.elementor-29 .elementor-element.elementor-element-9b4727f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-29 .elementor-element.elementor-element-deb8491{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-29 .elementor-element.elementor-element-63cc420{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-29 .elementor-element.elementor-element-adb509f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-29 .elementor-element.elementor-element-59c2eaa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-29 .elementor-element.elementor-element-96ff4e7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-29 .elementor-element.elementor-element-02f9148{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-29 .elementor-element.elementor-element-cd6dfe9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-29 .elementor-element.elementor-element-6f5c662{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-29 .elementor-element.elementor-element-52d12dc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-29 .elementor-element.elementor-element-9b4727f{--content-width:1600px;}.elementor-29 .elementor-element.elementor-element-59c2eaa{--content-width:1600px;}}/* Start custom CSS for html, class: .elementor-element-920fc8d *//*==================================================
ABOUT HERO PREMIUM
==================================================*/

.about-hero{
    position:relative;
    padding:120px 0;
    overflow:hidden;
    background:
    radial-gradient(circle at top right,#dbeafe 0%,transparent 35%),
    radial-gradient(circle at bottom left,#e0f2fe 0%,transparent 35%),
    linear-gradient(180deg,#ffffff,#f8fbff);
}

.about-hero::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    right:-220px;
    top:-220px;
    border-radius:50%;
    background:radial-gradient(circle,#2563eb18,transparent 70%);
}

.about-hero::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    left:-180px;
    bottom:-180px;
    border-radius:50%;
    background:radial-gradient(circle,#06b6d415,transparent 70%);
}

.about-container{

    width:1280px;
    max-width:92%;
    margin:auto;

    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:80px;
    align-items:center;

    position:relative;
    z-index:10;

}

/*==================================================
LEFT
==================================================*/

.about-badge{

display:inline-flex;

padding:10px 20px;

border-radius:40px;

background:#EEF4FF;

color:#2563eb;

font-size:13px;

font-weight:700;

letter-spacing:1px;

margin-bottom:25px;

}

.about-left h1{

font-size:68px;

font-weight:800;

line-height:1.05;

color:#111827;

margin-bottom:25px;

}

.about-left h1 span{

display:block;

background:linear-gradient(90deg,#2563eb,#06b6d4);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.about-left p{

font-size:18px;

line-height:34px;

color:#64748b;

margin-bottom:45px;

max-width:650px;

}

/*==================================================
FEATURES
==================================================*/

.about-features{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-bottom:45px;

}

.feature{

display:flex;

align-items:center;

gap:12px;

padding:18px 22px;

border-radius:18px;

background:#fff;

border:1px solid #edf2f7;

transition:.35s;

box-shadow:0 12px 30px rgba(0,0,0,.05);

}

.feature:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(37,99,235,.12);

border-color:#2563eb25;

}

.feature i{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:12px;

background:linear-gradient(135deg,#2563eb,#06b6d4);

color:#fff;

font-size:15px;

}

.feature span{

font-weight:600;

color:#334155;

}

/*==================================================
BUTTONS
==================================================*/

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.primary-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:18px 34px;

border-radius:15px;

background:linear-gradient(135deg,#2563eb,#1d4ed8);

color:#fff;

text-decoration:none;

font-weight:700;

transition:.35s;

box-shadow:0 18px 40px rgba(37,99,235,.22);

}

.primary-btn:hover{

transform:translateY(-5px);

}

.secondary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 34px;

border-radius:15px;

border:2px solid #2563eb;

color:#2563eb;

font-weight:700;

text-decoration:none;

transition:.35s;

}

.secondary-btn:hover{

background:#2563eb;

color:#fff;

}

/*==================================================
RIGHT IMAGE
==================================================*/

.about-right{

position:relative;

}

.image-box{

border-radius:30px;

overflow:hidden;

box-shadow:0 30px 80px rgba(0,0,0,.12);

position:relative;

}

.image-box img{

width:100%;

height:650px;

display:block;

object-fit:cover;

transition:.5s;

}

.image-box:hover img{

transform:scale(1.05);

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ca6b92a *//*==================================================
WHO WE ARE - PREMIUM
==================================================*/

.philosophy-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:
    radial-gradient(circle at top right,#dbeafe 0%,transparent 35%),
    radial-gradient(circle at bottom left,#e0f2fe 0%,transparent 35%),
    linear-gradient(180deg,#ffffff,#f8fbff);

}

.philosophy-bg{

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    right:-250px;

    top:-250px;

    background:
    radial-gradient(circle,#2563eb12,transparent 70%);

}

.philosophy-section .container{

    width:1280px;

    max-width:92%;

    margin:auto;

    position:relative;

    z-index:2;

}

.philosophy-header{

    max-width:760px;

    margin:auto;

    text-align:center;

    margin-bottom:80px;

}

.philosophy-header h2{

    font-size:62px;

    line-height:1.08;

    font-weight:800;

    color:#0f172a;

    margin:20px 0;

}

.philosophy-header h2 span{

    background:linear-gradient(90deg,#2563eb,#06b6d4);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.philosophy-header p{

    font-size:19px;

    line-height:34px;

    color:#64748b;

}

.philosophy-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:start;

}
/*==================================================
QUOTE BOX
==================================================*/

.quote-box{

position:relative;

padding:45px;

border-radius:32px;

background:rgba(255,255,255,.75);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.4);

overflow:hidden;

transition:.45s cubic-bezier(.2,.8,.2,1);

box-shadow:

0 20px 60px rgba(15,23,42,.06);

}

.quote-box::before{

content:"";

position:absolute;

left:0;

top:0;

width:0;

height:5px;

background:linear-gradient(90deg,#2563eb,#06b6d4);

transition:.45s;

}

.quote-box:hover::before{

width:100%;

}

.quote-box::after{

content:"";

position:absolute;

width:260px;

height:260px;

border-radius:50%;

background:

radial-gradient(circle,#2563eb12,transparent 70%);

right:-120px;

top:-120px;

transition:.45s;

}

.quote-box:hover::after{

transform:scale(1.3);

}

.quote-box:hover{

transform:translateY(-12px);

box-shadow:

0 35px 80px rgba(37,99,235,.16);

}

/*==================================================
QUOTE ICON
==================================================*/

.quote-icon{

width:82px;

height:82px;

border-radius:24px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#2563eb,#06b6d4);

color:#fff;

font-size:28px;

margin-bottom:30px;

transition:.45s;

box-shadow:

0 15px 35px rgba(37,99,235,.22);

}

.quote-box:hover .quote-icon{

transform:rotate(-10deg) scale(1.08);

}

/*==================================================
TITLE
==================================================*/

.quote-box h3{

font-size:42px;

line-height:1.15;

font-weight:800;

color:#0f172a;

margin-bottom:25px;

}

.quote-box h3::after{

content:"";

display:block;

margin-top:18px;

width:80px;

height:4px;

border-radius:20px;

background:linear-gradient(90deg,#2563eb,#06b6d4);

transition:.4s;

}

.quote-box:hover h3::after{

width:150px;

}

/*==================================================
DESCRIPTION
==================================================*/

.quote-box p{

font-size:18px;

line-height:34px;

color:#64748b;

margin-bottom:35px;

}

/*==================================================
FOOTER
==================================================*/

.quote-footer{

display:flex;

align-items:center;

gap:18px;

}

.quote-footer .line{

width:70px;

height:2px;

background:linear-gradient(90deg,#2563eb,#06b6d4);

transition:.35s;

}

.quote-box:hover .quote-footer .line{

width:130px;

}

.quote-footer span{

font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:#2563eb;

}
/*==================================================
PREMIUM PHILOSOPHY CARDS
==================================================*/

.philosophy-cards{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:28px;

position:relative;

}

.philo-card{

position:relative;

padding:35px;

border-radius:28px;

background:rgba(255,255,255,.72);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.45);

overflow:hidden;

transition:.45s cubic-bezier(.2,.8,.2,1);

box-shadow:

0 15px 45px rgba(15,23,42,.06);

cursor:pointer;

min-height:280px;

display:flex;

flex-direction:column;

justify-content:flex-start;

}

/* Animated Top Border */

.philo-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:0;

height:4px;

background:linear-gradient(90deg,#2563eb,#06b6d4);

transition:.45s;

}

.philo-card:hover::before{

width:100%;

}

/* Glow */

.card-glow{

position:absolute;

width:180px;

height:180px;

right:-70px;

top:-70px;

border-radius:50%;

background:

radial-gradient(circle,#2563eb18,transparent 70%);

opacity:0;

transition:.5s;

}

.philo-card:hover .card-glow{

opacity:1;

transform:scale(1.4);

}

/* Hover */

.philo-card:hover{

transform:translateY(-12px);

border-color:#2563eb25;

box-shadow:

0 35px 70px rgba(37,99,235,.16);

}

/* Huge Number */

.number{

position:absolute;

top:15px;

right:25px;

font-size:80px;

font-weight:800;

color:#2563eb08;

line-height:1;

transition:.45s;

pointer-events:none;

}

.philo-card:hover .number{

transform:translateY(-6px) scale(1.08);

color:#2563eb15;

}

/* Icon */

.card-icon{

width:72px;

height:72px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#2563eb,#06b6d4);

color:#fff;

font-size:24px;

margin-bottom:25px;

transition:.4s;

box-shadow:

0 12px 30px rgba(37,99,235,.25);

}

.philo-card:hover .card-icon{

transform:rotate(-8deg) scale(1.08);

}

/* Heading */

.philo-card h3{

font-size:24px;

font-weight:700;

color:#0f172a;

margin-bottom:15px;

}

/* Description */

.philo-card p{

font-size:16px;

line-height:30px;

color:#64748b;

margin-bottom:auto;

}

/* Arrow */

.card-arrow{

margin-top:30px;

width:48px;

height:48px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#eef4ff;

color:#2563eb;

transition:.4s;

}

.philo-card:hover .card-arrow{

width:60px;

border-radius:40px;

background:#2563eb;

color:#fff;

transform:translateX(8px);

}

/*==================================================
BOTTOM STRIP
==================================================*/

.philosophy-footer{

margin-top:80px;

padding-top:35px;

border-top:1px solid #e5e7eb;

display:flex;

align-items:center;

gap:30px;

}

.footer-line{

width:120px;

height:4px;

border-radius:30px;

background:linear-gradient(90deg,#2563eb,#06b6d4);

}

.philosophy-footer p{

font-size:18px;

line-height:32px;

color:#475569;

margin:0;

}

.philosophy-footer strong{

color:#111827;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:991px){

.philosophy-wrapper{

grid-template-columns:1fr;

gap:50px;

}

.philosophy-cards{

grid-template-columns:1fr;

}

.quote-box{

position:relative;

}

}

@media(max-width:768px){

.philosophy-section{

padding:80px 20px;

}

.philosophy-header h2{

font-size:40px;

}

.quote-box h3{

font-size:30px;

}

.philo-card{

min-height:auto;

padding:28px;

}

.number{

font-size:58px;

}

.philosophy-footer{

flex-direction:column;

align-items:flex-start;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-548b501 *//*=====================================
OUR PROMISE
=====================================*/

.promise-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:
    radial-gradient(circle at top right,#dbeafe 0%,transparent 35%),
    radial-gradient(circle at bottom left,#ecfeff 0%,transparent 35%),
    linear-gradient(180deg,#ffffff,#f8fbff);

}

.promise-section::before{

content:"";

position:absolute;

width:550px;

height:550px;

right:-220px;

top:-220px;

border-radius:50%;

background:radial-gradient(circle,#2563eb10,transparent 70%);

}

.promise-section::after{

content:"";

position:absolute;

width:420px;

height:420px;

left:-180px;

bottom:-180px;

border-radius:50%;

background:radial-gradient(circle,#06b6d410,transparent 70%);

}

.promise-section .container{

width:1280px;

max-width:92%;

margin:auto;

position:relative;

z-index:5;

}

/*=====================================
HEADER
=====================================*/

.promise-header{

max-width:760px;

margin:auto;

text-align:center;

margin-bottom:70px;

}

.promise-header h2{

font-size:60px;

font-weight:800;

line-height:1.08;

margin:20px 0;

color:#0f172a;

}

.promise-header h2 span{

background:linear-gradient(90deg,#2563eb,#06b6d4);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.promise-header p{

font-size:18px;

line-height:34px;

color:#64748b;

}

/*=====================================
GRID
=====================================*/

.promise-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

}
/*=====================================
CARD
=====================================*/

.promise-card{

position:relative;

padding:38px;

border-radius:28px;

background:rgba(255,255,255,.78);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.45);

overflow:hidden;

transition:.45s cubic-bezier(.2,.8,.2,1);

box-shadow:

0 18px 45px rgba(15,23,42,.06);

min-height:290px;

display:flex;

flex-direction:column;

}

.promise-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:0;

height:5px;

background:linear-gradient(90deg,#2563eb,#06b6d4);

transition:.45s;

}

.promise-card:hover::before{

width:100%;

}

.promise-card::after{

content:"";

position:absolute;

width:220px;

height:220px;

right:-90px;

top:-90px;

border-radius:50%;

background:radial-gradient(circle,#2563eb15,transparent 70%);

opacity:0;

transition:.45s;

}

.promise-card:hover::after{

opacity:1;

transform:scale(1.3);

}

.promise-card:hover{

transform:translateY(-12px);

box-shadow:

0 35px 75px rgba(37,99,235,.16);

border-color:#2563eb30;

}
/*=====================================
ICON
=====================================*/

.promise-icon{

width:72px;

height:72px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#2563eb,#06b6d4);

color:#fff;

font-size:26px;

margin-bottom:28px;

transition:.45s;

box-shadow:

0 15px 35px rgba(37,99,235,.22);

}

.promise-card:hover .promise-icon{

transform:rotate(-8deg) scale(1.1);

}

/*=====================================
TEXT
=====================================*/

.promise-card h3{

font-size:24px;

font-weight:700;

margin-bottom:18px;

color:#0f172a;

}

.promise-card p{

font-size:16px;

line-height:30px;

color:#64748b;

margin-bottom:auto;

}

/*=====================================
ARROW
=====================================*/

.promise-card{

cursor:pointer;

}

.promise-card h3::after{

content:"→";

margin-left:10px;

opacity:0;

transform:translateX(-10px);

display:inline-block;

transition:.35s;

color:#2563eb;

}

.promise-card:hover h3::after{

opacity:1;

transform:translateX(0);

}

/*=====================================
RESPONSIVE
=====================================*/

@media(max-width:991px){

.promise-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.promise-section{

padding:80px 20px;

}

.promise-header h2{

font-size:40px;

}

.promise-grid{

grid-template-columns:1fr;

}

.promise-card{

min-height:auto;

padding:30px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d761cc6 *//*==================================================
OUR EXPERTISE
==================================================*/

.expertise-section{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:
    radial-gradient(circle at top right,#dbeafe 0%,transparent 35%),
    radial-gradient(circle at bottom left,#ecfeff 0%,transparent 35%),
    linear-gradient(180deg,#ffffff,#f8fbff);

}

.expertise-section::before{

content:"";

position:absolute;

width:550px;

height:550px;

right:-250px;

top:-250px;

border-radius:50%;

background:
radial-gradient(circle,#2563eb12,transparent 70%);

}

.expertise-section::after{

content:"";

position:absolute;

width:420px;

height:420px;

left:-180px;

bottom:-180px;

border-radius:50%;

background:
radial-gradient(circle,#06b6d412,transparent 70%);

}

.expertise-section .container{

width:1280px;

max-width:92%;

margin:auto;

position:relative;

z-index:2;

}

/*==========================*/

.expertise-heading{

max-width:760px;

margin:auto;

text-align:center;

margin-bottom:80px;

}

.expertise-heading h2{

font-size:60px;

font-weight:800;

line-height:1.1;

color:#111827;

margin:20px 0;

}

.expertise-heading h2 span{

background:linear-gradient(90deg,#2563eb,#06b6d4);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.expertise-heading p{

font-size:18px;

line-height:34px;

color:#64748b;

}

/*==========================*/

.expertise-list{

display:flex;

flex-direction:column;

border-top:1px solid #e5e7eb;

}
/*==================================================
ROW
==================================================*/

.expertise-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:40px 0;

border-bottom:1px solid #e5e7eb;

cursor:pointer;

transition:.45s;

position:relative;

overflow:hidden;

}

.expertise-item::before{

content:"";

position:absolute;

left:0;

top:0;

width:0;

height:100%;

background:

linear-gradient(90deg,#2563eb08,transparent);

transition:.5s;

}

.expertise-item:hover::before{

width:100%;

}

.expertise-item:hover{

padding-left:25px;

}

.expertise-left{

display:flex;

gap:35px;

align-items:flex-start;

}

.expertise-number{

font-size:64px;

font-weight:800;

color:#2563eb15;

line-height:1;

transition:.4s;

min-width:90px;

}

.expertise-item:hover .expertise-number{

color:#2563eb;

transform:scale(1.1);

}

.expertise-left h3{

font-size:34px;

font-weight:700;

margin-bottom:0;

transition:.35s;

}

.expertise-item:hover h3{

color:#2563eb;

}
/*==================================================
DESCRIPTION
==================================================*/

.expertise-left p{

max-height:0;

overflow:hidden;

opacity:0;

margin-top:0;

font-size:17px;

line-height:30px;

color:#64748b;

transition:.45s;

max-width:650px;

}

.expertise-item:hover .expertise-left p,

.expertise-item.active .expertise-left p{

max-height:150px;

opacity:1;

margin-top:18px;

}

/*==================================================
RIGHT
==================================================*/

.expertise-right{

display:flex;

align-items:center;

gap:25px;

}

.expertise-right i{

font-size:30px;

color:#2563eb;

transition:.4s;

}

.expertise-item:hover .expertise-right i{

transform:rotate(-10deg) scale(1.15);

}

.expertise-right span{

display:flex;

align-items:center;

gap:12px;

font-weight:700;

color:#2563eb;

opacity:0;

transform:translateX(-20px);

transition:.4s;

}

.expertise-item:hover .expertise-right span{

opacity:1;

transform:translateX(0);

}

.expertise-right span i{

font-size:16px;

}
/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:991px){

.expertise-item{

flex-direction:column;

align-items:flex-start;

gap:25px;

}

.expertise-right{

margin-left:125px;

}

}

@media(max-width:768px){

.expertise-section{

padding:80px 20px;

}

.expertise-heading h2{

font-size:40px;

}

.expertise-left{

gap:18px;

}

.expertise-number{

font-size:42px;

min-width:55px;

}

.expertise-left h3{

font-size:24px;

}

.expertise-right{

margin-left:0;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0e2688f *//*=====================================
WHY CHOOSE INFOTECH
======================================*/

.comparison-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:
    radial-gradient(circle at top right,#dbeafe 0%,transparent 35%),
    radial-gradient(circle at bottom left,#ecfeff 0%,transparent 35%),
    linear-gradient(180deg,#ffffff,#f8fbff);

}

.comparison-section::before{

content:"";

position:absolute;

right:-220px;

top:-220px;

width:550px;

height:550px;

border-radius:50%;

background:
radial-gradient(circle,#2563eb12,transparent 70%);

}

.comparison-section::after{

content:"";

position:absolute;

left:-200px;

bottom:-200px;

width:420px;

height:420px;

border-radius:50%;

background:
radial-gradient(circle,#06b6d412,transparent 70%);

}

.comparison-section .container{

width:1280px;

max-width:92%;

margin:auto;

position:relative;

z-index:5;

}

/*========================*/

.comparison-header{

max-width:760px;

margin:auto;

text-align:center;

margin-bottom:70px;

}

.comparison-header h2{

font-size:60px;

font-weight:800;

line-height:1.08;

margin:20px 0;

color:#111827;

}

.comparison-header h2 span{

background:linear-gradient(90deg,#2563eb,#06b6d4);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.comparison-header p{

font-size:18px;

line-height:34px;

color:#64748b;

}
/*=====================================
TABLE
======================================*/

.comparison-table{

background:#fff;

border-radius:32px;

overflow:hidden;

border:1px solid #edf2f7;

box-shadow:
0 30px 70px rgba(15,23,42,.06);

}

.comparison-head{

display:grid;

grid-template-columns:1fr 1fr;

background:linear-gradient(90deg,#f8fafc,#eef6ff);

}

.left-title,

.right-title{

padding:28px 35px;

font-size:20px;

font-weight:700;

display:flex;

align-items:center;

justify-content:center;

}

.left-title{

color:#64748b;

border-right:1px solid #edf2f7;

}

.right-title{

color:#2563eb;

gap:12px;

}
/*=====================================
ROWS
======================================*/

.compare-row{

display:grid;

grid-template-columns:1fr 1fr;

transition:.35s;

border-top:1px solid #edf2f7;

position:relative;

overflow:hidden;

}

.compare-row::before{

content:"";

position:absolute;

left:0;

top:0;

width:0;

height:100%;

background:linear-gradient(90deg,#2563eb08,transparent);

transition:.45s;

}

.compare-row:hover::before{

width:100%;

}

.compare-row:hover{

transform:scale(1.01);

background:#fbfdff;

}

.compare-left,

.compare-right{

padding:28px 35px;

display:flex;

align-items:center;

gap:15px;

font-size:17px;

}

.compare-left{

border-right:1px solid #edf2f7;

color:#64748b;

}

.compare-right{

font-weight:600;

color:#111827;

}

.compare-left i{

color:#ef4444;

font-size:18px;

}

.compare-right i{

color:#10b981;

font-size:18px;

transition:.35s;

}

.compare-row:hover .compare-right i{

transform:scale(1.25);

}
/*=====================================
RESPONSIVE
======================================*/

@media(max-width:991px){

.comparison-head{

display:none;

}

.compare-row{

grid-template-columns:1fr;

}

.compare-left{

border-right:none;

border-bottom:1px solid #edf2f7;

background:#fafafa;

}

}

@media(max-width:768px){

.comparison-section{

padding:80px 20px;

}

.comparison-header h2{

font-size:40px;

}

.compare-left,

.compare-right{

padding:22px;

font-size:15px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e626add *//*==================================================
HOW WE WORK
==================================================*/

.story-section{

    position:relative;

    padding:140px 0;

    overflow:hidden;

    background:
    radial-gradient(circle at top right,#dbeafe 0%,transparent 35%),
    radial-gradient(circle at bottom left,#ecfeff 0%,transparent 35%),
    linear-gradient(180deg,#ffffff,#f8fbff);

}

.story-section::before{

content:"";

position:absolute;

right:-250px;

top:-250px;

width:700px;

height:700px;

border-radius:50%;

background:
radial-gradient(circle,#2563eb10,transparent 70%);

}

.story-section::after{

content:"";

position:absolute;

left:-220px;

bottom:-220px;

width:500px;

height:500px;

border-radius:50%;

background:
radial-gradient(circle,#06b6d410,transparent 70%);

}

.story-container{

width:1280px;

max-width:92%;

margin:auto;

display:grid;

grid-template-columns:420px 1fr;

gap:90px;

position:relative;

z-index:2;

}

/*========================================*/

.story-left{

position:sticky;

top:120px;

height:max-content;

}

.story-left h2{

font-size:62px;

font-weight:800;

line-height:1.05;

margin:20px 0;

color:#111827;

}

.story-left p{

font-size:18px;

line-height:34px;

color:#64748b;

margin-bottom:45px;

}

.story-progress{

width:4px;

height:320px;

background:#e5e7eb;

border-radius:30px;

overflow:hidden;

}

.story-line{

height:100%;

position:relative;

}

.story-line span{

position:absolute;

left:0;

top:0;

width:100%;

height:20%;

background:
linear-gradient(#2563eb,#06b6d4);

border-radius:30px;

transition:.4s;

}
/*========================================
RIGHT SIDE
========================================*/

.story-right{

    display:flex;

    flex-direction:column;

    gap:45px;

}

/*========================================
CARD
========================================*/

.story-card{

    position:relative;

    padding:45px;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(18px);

    border:1px solid rgba(226,232,240,.9);

    border-radius:32px;

    overflow:hidden;

    transition:.45s cubic-bezier(.2,.8,.2,1);

    box-shadow:
    0 20px 60px rgba(15,23,42,.06);

}

/* Top Border Animation */

.story-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:0;

height:4px;

background:
linear-gradient(90deg,#2563eb,#06b6d4);

transition:.45s;

}

.story-card:hover::before,

.story-card.active::before{

width:100%;

}

/* Background Glow */

.story-card::after{

content:"";

position:absolute;

right:-80px;

top:-80px;

width:220px;

height:220px;

border-radius:50%;

background:
radial-gradient(circle,#2563eb15,transparent 70%);

opacity:0;

transition:.45s;

}

.story-card:hover::after{

opacity:1;

transform:scale(1.4);

}

/* Hover */

.story-card:hover,

.story-card.active{

transform:translateY(-12px);

border-color:#2563eb30;

box-shadow:

0 35px 80px rgba(37,99,235,.15);

}

/*========================================
TOP
========================================*/

.story-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.story-tag{

padding:8px 18px;

border-radius:40px;

background:#EEF4FF;

color:#2563eb;

font-size:12px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

}

/*========================================
NUMBER
========================================*/

.story-no{

font-size:74px;

font-weight:800;

line-height:1;

color:#2563eb12;

transition:.45s;

}

.story-card:hover .story-no,

.story-card.active .story-no{

transform:scale(1.1);

color:#2563eb;

}
/*========================================
TEXT
========================================*/

.story-card h3{

font-size:34px;

font-weight:700;

line-height:1.2;

margin-bottom:18px;

color:#111827;

transition:.35s;

}

.story-card:hover h3,

.story-card.active h3{

color:#2563eb;

}

.story-card p{

font-size:17px;

line-height:32px;

color:#64748b;

margin:0;

max-width:650px;

}

/* Arrow */

.story-card h3::after{

content:"→";

margin-left:12px;

opacity:0;

transform:translateX(-10px);

display:inline-block;

transition:.35s;

color:#2563eb;

}

.story-card:hover h3::after{

opacity:1;

transform:translateX(0);

}

/*========================================
FINAL CTA
========================================*/

.story-finale{

position:relative;

padding:70px 60px;

margin-top:30px;

border-radius:36px;

overflow:hidden;

background:
linear-gradient(135deg,#2563eb,#0f172a);

color:#fff;

box-shadow:
0 40px 90px rgba(37,99,235,.30);

}

.story-finale::before{

content:"";

position:absolute;

right:-120px;

top:-120px;

width:320px;

height:320px;

border-radius:50%;

background:
radial-gradient(circle,rgba(255,255,255,.15),transparent 70%);

}

.story-finale::after{

content:"";

position:absolute;

left:-80px;

bottom:-80px;

width:220px;

height:220px;

border-radius:50%;

background:
radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);

}

.finale-icon{

width:90px;

height:90px;

display:flex;

align-items:center;

justify-content:center;

border-radius:28px;

background:rgba(255,255,255,.12);

backdrop-filter:blur(10px);

font-size:34px;

margin-bottom:30px;

}

.story-finale span{

display:inline-block;

padding:8px 18px;

border-radius:40px;

background:rgba(255,255,255,.12);

font-size:12px;

letter-spacing:2px;

font-weight:700;

margin-bottom:22px;

}

.story-finale h2{

font-size:46px;

line-height:1.1;

margin-bottom:25px;

font-weight:800;

max-width:700px;

}

.story-finale p{

font-size:18px;

line-height:34px;

max-width:720px;

opacity:.9;

margin-bottom:40px;

}

.finale-btn{

display:inline-flex;

align-items:center;

gap:14px;

padding:18px 34px;

background:#fff;

color:#2563eb;

border-radius:60px;

text-decoration:none;

font-weight:700;

transition:.35s;

}

.finale-btn:hover{

transform:translateY(-6px);

box-shadow:
0 20px 45px rgba(255,255,255,.25);

}

.finale-btn i{

transition:.35s;

}

.finale-btn:hover i{

transform:translateX(6px);

}

/*========================================
RESPONSIVE
========================================*/

@media(max-width:991px){

.story-container{

grid-template-columns:1fr;

gap:60px;

}

.story-left{

position:relative;

top:auto;

}

.story-progress{

display:none;

}

.story-finale{

padding:50px 40px;

}

}

@media(max-width:768px){

.story-section{

padding:80px 20px;

}

.story-left h2{

font-size:42px;

}

.story-card{

padding:30px;

}

.story-top{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.story-no{

font-size:48px;

}

.story-card h3{

font-size:26px;

}

.story-card p{

font-size:15px;

line-height:28px;

}

.story-finale{

padding:35px 28px;

}

.story-finale h2{

font-size:30px;

}

.story-finale p{

font-size:16px;

line-height:30px;

}

.finale-btn{

width:100%;

justify-content:center;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-41d285a *//*=====================================
WHY BUSINESSES TRUST US
=====================================*/

.trust-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:
    radial-gradient(circle at top right,#dbeafe 0%,transparent 35%),
    radial-gradient(circle at bottom left,#ecfeff 0%,transparent 35%),
    linear-gradient(180deg,#ffffff,#f8fbff);

}

.trust-section::before{

content:"";

position:absolute;

right:-220px;

top:-220px;

width:520px;

height:520px;

border-radius:50%;

background:
radial-gradient(circle,#2563eb10,transparent 70%);

}

.trust-section::after{

content:"";

position:absolute;

left:-180px;

bottom:-180px;

width:420px;

height:420px;

border-radius:50%;

background:
radial-gradient(circle,#06b6d410,transparent 70%);

}

.trust-section .container{

width:1280px;

max-width:92%;

margin:auto;

position:relative;

z-index:2;

}

/*=====================================
HEADER
=====================================*/

.trust-header{

max-width:760px;

margin:auto;

text-align:center;

margin-bottom:80px;

}

.trust-header h2{

font-size:60px;

font-weight:800;

line-height:1.08;

margin:20px 0;

color:#111827;

}

.trust-header h2 span{

background:linear-gradient(90deg,#2563eb,#06b6d4);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.trust-header p{

font-size:18px;

line-height:34px;

color:#64748b;

}

/*=====================================
LAYOUT
=====================================*/

.trust-wrapper{

display:grid;

grid-template-columns:430px 1fr;

gap:60px;

align-items:center;

}

/*=====================================
LEFT CARD
=====================================*/

.trust-main-card{

position:relative;

padding:45px;

border-radius:35px;

overflow:hidden;

background:#fff;

border:1px solid #edf2f7;

box-shadow:
0 30px 70px rgba(15,23,42,.07);

transition:.45s;

}

.trust-main-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(90deg,#2563eb,#06b6d4);

}

.trust-main-card:hover{

transform:translateY(-10px);

box-shadow:
0 45px 90px rgba(37,99,235,.15);

}

.trust-icon{

width:90px;

height:90px;

display:flex;

align-items:center;

justify-content:center;

border-radius:28px;

background:linear-gradient(135deg,#2563eb,#06b6d4);

color:#fff;

font-size:34px;

margin-bottom:30px;

box-shadow:
0 20px 45px rgba(37,99,235,.25);

transition:.4s;

}

.trust-main-card:hover .trust-icon{

transform:rotate(-8deg) scale(1.08);

}

.trust-label{

display:inline-block;

padding:8px 18px;

border-radius:30px;

background:#EEF4FF;

color:#2563eb;

font-size:12px;

font-weight:700;

letter-spacing:1px;

margin-bottom:18px;

}

.trust-main-card h3{

font-size:38px;

font-weight:800;

line-height:1.15;

margin-bottom:18px;

color:#111827;

}

.trust-main-card p{

font-size:17px;

line-height:30px;

color:#64748b;

}
/*=====================================
RIGHT SIDE
=====================================*/

.trust-right{

display:flex;

flex-direction:column;

gap:22px;

}

/*=====================================
ITEM
=====================================*/

.trust-item{

position:relative;

display:flex;

align-items:center;

gap:22px;

padding:26px 28px;

background:rgba(255,255,255,.75);

backdrop-filter:blur(12px);

border:1px solid #edf2f7;

border-radius:22px;

overflow:hidden;

transition:.4s cubic-bezier(.2,.8,.2,1);

cursor:pointer;

}

/* Animated Left Border */

.trust-item::before{

content:"";

position:absolute;

left:0;

top:0;

width:0;

height:100%;

background:linear-gradient(180deg,#2563eb,#06b6d4);

transition:.4s;

}

.trust-item:hover::before{

width:6px;

}

/* Background Glow */

.trust-item::after{

content:"";

position:absolute;

right:-80px;

top:-80px;

width:180px;

height:180px;

border-radius:50%;

background:radial-gradient(circle,#2563eb15,transparent 70%);

opacity:0;

transition:.4s;

}

.trust-item:hover::after{

opacity:1;

transform:scale(1.4);

}

.trust-item:hover{

transform:translateX(12px);

border-color:#2563eb25;

box-shadow:

0 25px 55px rgba(37,99,235,.12);

}

/*=====================================
CHECK ICON
=====================================*/

.tick{

width:60px;

height:60px;

min-width:60px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

background:#EEF4FF;

color:#2563eb;

font-size:22px;

transition:.4s;

}

.trust-item:hover .tick{

background:linear-gradient(135deg,#2563eb,#06b6d4);

color:#fff;

transform:rotate(-8deg) scale(1.08);

box-shadow:

0 12px 28px rgba(37,99,235,.25);

}

/*=====================================
TEXT
=====================================*/

.trust-item h4{

font-size:22px;

font-weight:700;

margin-bottom:6px;

color:#111827;

transition:.3s;

}

.trust-item:hover h4{

color:#2563eb;

}

.trust-item p{

font-size:15px;

line-height:28px;

color:#64748b;

margin:0;

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-51001e0 *//*=========================================
WHAT DRIVES US
=========================================*/

.drives-section{

    position:relative;

    padding:140px 0;

    overflow:hidden;

    background:
    radial-gradient(circle at top right,#dbeafe 0%,transparent 35%),
    radial-gradient(circle at bottom left,#ecfeff 0%,transparent 35%),
    linear-gradient(180deg,#ffffff,#f8fbff);

}

.drives-section::before{

content:"";

position:absolute;

right:-250px;

top:-250px;

width:650px;

height:650px;

border-radius:50%;

background:
radial-gradient(circle,#2563eb10,transparent 70%);

}

.drives-section::after{

content:"";

position:absolute;

left:-220px;

bottom:-220px;

width:500px;

height:500px;

border-radius:50%;

background:
radial-gradient(circle,#06b6d410,transparent 70%);

}

.drives-section .container{

width:1280px;

max-width:92%;

margin:auto;

position:relative;

z-index:2;

}

/*===========================*/

.drives-header{

max-width:760px;

margin:auto;

text-align:center;

margin-bottom:90px;

}

.drives-header h2{

font-size:60px;

font-weight:800;

line-height:1.08;

margin:20px 0;

color:#111827;

}

.drives-header p{

font-size:18px;

line-height:34px;

color:#64748b;

}

/*===========================*/

.drives-wrapper{

display:flex;

flex-direction:column;

border-top:1px solid #E5E7EB;

}
/*=========================================
ITEM
=========================================*/

.drive-item{

display:grid;

grid-template-columns:380px 1fr;

gap:80px;

align-items:center;

padding:55px 0;

border-bottom:1px solid #E5E7EB;

position:relative;

transition:.45s;

overflow:hidden;

}

.drive-item::before{

content:"";

position:absolute;

left:0;

top:0;

width:0;

height:100%;

background:

linear-gradient(90deg,#2563eb08,transparent);

transition:.45s;

}

.drive-item:hover::before{

width:100%;

}

.drive-item:hover{

padding-left:20px;

}

.drive-left{

position:relative;

}

.drive-left span{

position:absolute;

left:0;

top:-45px;

font-size:90px;

font-weight:800;

color:#2563eb10;

transition:.45s;

line-height:1;

}

.drive-item:hover .drive-left span{

color:#2563eb25;

transform:scale(1.08);

}

.drive-left h3{

font-size:38px;

font-weight:800;

line-height:1.1;

color:#111827;

position:relative;

z-index:2;

transition:.35s;

}

.drive-item:hover .drive-left h3{

color:#2563eb;

}
/*=========================================
RIGHT
=========================================*/

.drive-right{

position:relative;

}

.drive-right h4{

font-size:36px;

font-weight:700;

color:#111827;

margin-bottom:18px;

transition:.35s;

}

.drive-item:hover .drive-right h4{

color:#2563eb;

transform:translateX(10px);

}

.drive-right p{

font-size:17px;

line-height:32px;

color:#64748b;

max-width:620px;

}

/* Arrow */

.drive-right::after{

content:"→";

position:absolute;

right:0;

top:50%;

transform:translateY(-50%) translateX(-20px);

font-size:34px;

font-weight:700;

color:#2563eb;

opacity:0;

transition:.35s;

}

.drive-item:hover .drive-right::after{

opacity:1;

transform:translateY(-50%) translateX(0);

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:991px){

.drive-item{

grid-template-columns:1fr;

gap:30px;

padding:40px 0;

}

.drive-left span{

position:relative;

display:block;

top:0;

margin-bottom:10px;

font-size:60px;

}

.drive-left h3{

font-size:32px;

}

.drive-right h4{

font-size:28px;

}

.drive-right::after{

display:none;

}

}

@media(max-width:768px){

.drives-section{

padding:80px 20px;

}

.drives-header h2{

font-size:40px;

}

.drives-header p{

font-size:16px;

line-height:28px;

}

.drive-left h3{

font-size:26px;

}

.drive-right h4{

font-size:22px;

}

.drive-right p{

font-size:15px;

line-height:28px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4928be3 *//*=========================================
TECH SHOWCASE
=========================================*/

.tech-showcase{

    position:relative;

    padding:140px 0;

    overflow:hidden;

    background:#fff;

}

.tech-showcase::before{

content:"";

position:absolute;

right:-250px;

top:-250px;

width:700px;

height:700px;

border-radius:50%;

background:

radial-gradient(circle,#2563eb10,transparent 70%);

}

.tech-showcase::after{

content:"";

position:absolute;

left:-220px;

bottom:-220px;

width:500px;

height:500px;

border-radius:50%;

background:

radial-gradient(circle,#06b6d410,transparent 70%);

}

.tech-showcase .container{

width:1280px;

max-width:92%;

margin:auto;

position:relative;

z-index:2;

}

/*=========================*/

.tech-header{

max-width:760px;

margin:auto;

text-align:center;

margin-bottom:90px;

}

.tech-header h2{

font-size:60px;

font-weight:800;

line-height:1.08;

margin:20px 0;

color:#111827;

}

.tech-header h2 span{

background:linear-gradient(90deg,#2563eb,#06b6d4);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.tech-header p{

font-size:18px;

line-height:34px;

color:#64748b;

}

.tech-list{

border-top:1px solid #E5E7EB;

}
/*=========================================
ROW
=========================================*/

.tech-row{

display:grid;

grid-template-columns:2fr 2fr 70px;

align-items:center;

padding:45px 0;

border-bottom:1px solid #E5E7EB;

position:relative;

cursor:pointer;

transition:.45s;

overflow:hidden;

}

.tech-row::before{

content:"";

position:absolute;

left:0;

top:0;

width:0;

height:100%;

background:

linear-gradient(90deg,#2563eb08,transparent);

transition:.45s;

}

.tech-row:hover::before{

width:100%;

}

.tech-row:hover{

padding-left:18px;

}

/* Huge Name */

.tech-name{

font-size:62px;

font-weight:900;

letter-spacing:-2px;

line-height:1;

color:#E2E8F0;

transition:.45s;

}

.tech-row:hover .tech-name,

.tech-row.active .tech-name{

color:#2563eb;

transform:translateX(10px);

}
/*=========================================
DETAIL
=========================================*/

.tech-detail{

opacity:0;

transform:translateY(15px);

transition:.45s;

}

.tech-row:hover .tech-detail,

.tech-row.active .tech-detail{

opacity:1;

transform:translateY(0);

}

.tech-detail h3{

font-size:28px;

font-weight:700;

margin-bottom:12px;

color:#111827;

}

.tech-detail p{

font-size:16px;

line-height:30px;

color:#64748B;

max-width:480px;

}

/* Arrow */

.tech-arrow{

display:flex;

justify-content:flex-end;

font-size:30px;

color:#2563eb;

opacity:0;

transform:translateX(-20px);

transition:.4s;

}

.tech-row:hover .tech-arrow,

.tech-row.active .tech-arrow{

opacity:1;

transform:translateX(0);

}

.tech-arrow i{

transition:.35s;

}

.tech-row:hover .tech-arrow i{

transform:translateX(8px);

}
/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1100px){

.tech-row{

grid-template-columns:1fr;

gap:20px;

padding:35px 0;

}

.tech-arrow{

justify-content:flex-start;

opacity:1;

transform:none;

}

.tech-detail{

opacity:1;

transform:none;

}

.tech-name{

font-size:46px;

}

}

@media(max-width:768px){

.tech-showcase{

padding:80px 20px;

}

.tech-header h2{

font-size:40px;

}

.tech-name{

font-size:34px;

}

.tech-detail h3{

font-size:22px;

}

.tech-detail p{

font-size:15px;

line-height:28px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0058fd0 *//*=================================================
FAQ SECTION
=================================================*/

.faq-section{

    padding:120px 0;
    background:#fff;
    position:relative;
    overflow:hidden;

}

.faq-section::before{

content:"";

position:absolute;

top:-250px;
right:-250px;

width:650px;
height:650px;

border-radius:50%;

background:radial-gradient(circle,#2563eb10,transparent 70%);

}

.faq-section::after{

content:"";

position:absolute;

bottom:-220px;
left:-220px;

width:500px;
height:500px;

border-radius:50%;

background:radial-gradient(circle,#06b6d410,transparent 70%);

}

.faq-section .container{

width:1200px;
max-width:92%;
margin:auto;
position:relative;
z-index:2;

}

/*====================*/

.faq-header{

max-width:700px;
margin:auto;
text-align:center;
margin-bottom:70px;

}

.faq-header h2{

font-size:52px;
font-weight:800;
margin:18px 0;
color:#111827;

}

.faq-header p{

font-size:17px;
line-height:30px;
color:#64748b;

}

.faq-list{

max-width:900px;
margin:auto;

}
/*=================================================
FAQ ITEM
=================================================*/

.faq-item{

border-bottom:1px solid #e5e7eb;
transition:.35s;
position:relative;

}

.faq-item::before{

content:"";

position:absolute;

left:0;
top:0;

width:0;
height:100%;

background:linear-gradient(90deg,#2563eb08,transparent);

transition:.4s;

}

.faq-item:hover::before,
.faq-item.active::before{

width:100%;

}

.faq-question{

width:100%;

padding:28px 0;

display:flex;

justify-content:space-between;

align-items:center;

background:none;

border:none;

cursor:pointer;

text-align:left;

}

.faq-question span{

font-size:24px;

font-weight:600;

color:#111827;

transition:.35s;

}

.faq-item:hover .faq-question span,
.faq-item.active .faq-question span{

color:#2563eb;
padding-left:10px;

}
/*=================================================
ICON
=================================================*/

.faq-toggle{

width:54px;
height:54px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

border:1px solid #dbe4ef;

background:#f8fafc;

color:#2563eb;

font-size:18px;

transition:.35s;

flex-shrink:0;

}

.faq-item:hover .faq-toggle{

background:#2563eb;
color:#fff;

}

.faq-item.active .faq-toggle{

background:linear-gradient(135deg,#2563eb,#06b6d4);
color:#fff;

transform:rotate(45deg);

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

}

.faq-answer p{

padding:0 0 28px;

max-width:720px;

font-size:16px;

line-height:30px;

color:#64748b;

}

.faq-item.active .faq-answer{

max-height:250px;

}
/*=================================================
CTA
=================================================*/

.faq-cta{

margin-top:70px;

padding:50px;

border-radius:30px;

text-align:center;

background:linear-gradient(135deg,#2563eb,#0f172a);

color:#fff;

}

.faq-cta h3{

font-size:36px;
margin-bottom:15px;

}

.faq-cta p{

font-size:17px;

opacity:.9;

margin-bottom:30px;

}

.faq-buttons{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}

.faq-buttons a{

padding:16px 30px;

border-radius:50px;

text-decoration:none;

font-weight:700;

transition:.35s;

display:inline-flex;

align-items:center;

gap:10px;

}

.call-btn{

background:#fff;

color:#2563eb;

}

.contact-btn{

background:rgba(255,255,255,.12);

border:1px solid rgba(255,255,255,.2);

color:#fff;

}

.faq-buttons a:hover{

transform:translateY(-5px);

}

/*==================*/

@media(max-width:768px){

.faq-header h2{

font-size:38px;

}

.faq-question{

padding:22px 0;

}

.faq-question span{

font-size:18px;

padding-right:15px;

}

.faq-toggle{

width:44px;
height:44px;

font-size:15px;

}

.faq-answer p{

font-size:15px;

line-height:28px;

}

.faq-cta{

padding:35px 25px;

}

.faq-cta h3{

font-size:28px;

}

}/* End custom CSS */