/*==========================================================
RESET
==========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    font-size:16px;
    color:#101828;
    background:#fff;
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
}

a{
    text-decoration:none;
    color:inherit;
}

button{
    border:none;
    outline:none;
    background:none;
    cursor:pointer;
    font-family:inherit;
}

ul{
    list-style:none;
}

/*==========================================================
ROOT
==========================================================*/

:root{

    --primary:#165DFF;
    --primary-dark:#0E4CD4;

    --green:#22C55E;

    --orange:#FF9F1A;

    --heading:#0F172A;

    --text:#475467;

    --border:#E8EDF5;

    --light:#F8FBFF;

    --white:#ffffff;

    --radius:14px;

    --transition:.35s ease;

}

/*==========================================================
CONTAINER
==========================================================*/

.hks-container{

    width:100%;
    max-width:1280px;
    margin:auto;
    padding-inline:22px;

}

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

.hks-topbar{

    background:linear-gradient(180deg,#F7FAFF,#EEF4FF);

    border-bottom:1px solid var(--border);

    height:50px;

}

.hks-topbar-list{

    display:grid;

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

    align-items:center;

    height:50px;

}

.hks-top-item{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    font-size:15px;

    font-weight:500;

    color:#334155;

    position:relative;

}

.hks-top-item:not(:last-child)::after{

content:"";

position:absolute;

right:0;

top:50%;

transform:translateY(-50%);

width:1px;

height:24px;

background:#DFE7F5;

}

.hks-top-item i{

color:var(--primary);

font-size:14px;

}

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

.hks-header{

height:112px;

background:#fff;

border-bottom:1px solid #EEF2F6;

position:sticky;

top:0;

z-index:999;

transition:.35s;

}

.hks-header-wrapper{

display:grid;

grid-template-columns:260px 1fr 360px;

align-items:center;

height:112px;

column-gap:20px;

}

/*==========================================================
LOGO
==========================================================*/

.hks-logo{

display:flex;

align-items:center;

}

.hks-logo img{

height:84px;

width:auto;

}

/*==========================================================
RATING
==========================================================*/

.hks-rating{

display:flex;

justify-content:center;

align-items:center;

gap:14px;

}

.hks-stars{

display:flex;

gap:5px;

}

.hks-stars i{

color:#FFA51F;

font-size:19px;

}

.hks-rating-text{

font-size:18px;

font-weight:700;

color:#111827;

}

/*==========================================================
BUTTON AREA
==========================================================*/

.hks-actions{

display:flex;

justify-content:flex-end;

align-items:center;

gap:16px;

}

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

.hks-call-btn,
.hks-whatsapp-btn{

    height:54px;

    min-width:165px;

    padding:0 22px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    font-size:15px;

    font-weight:700;

    transition:all .35s ease;

    white-space:nowrap;

}

.hks-call-btn{

    background:linear-gradient(180deg,#1668FF,#1157F5);

    color:#fff;

    box-shadow:0 16px 35px rgba(17,87,245,.22);

}

.hks-call-btn:hover{

    transform:translateY(-2px);

    background:#0F4EDB;

}

.hks-call-btn i{

    font-size:16px;

}

.hks-whatsapp-btn{

    border:2px solid #22C55E;

    color:#22C55E;

    background:#fff;

}

.hks-whatsapp-btn:hover{

    background:#22C55E;

    color:#fff;

    transform:translateY(-2px);

}

.hks-whatsapp-btn i{

    font-size:20px;

}

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

.hks-header.sticky{

    height:88px;

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

    backdrop-filter:blur(18px);

    box-shadow:0 18px 45px rgba(15,23,42,.08);

}

.hks-header.sticky .hks-header-wrapper{

    height:88px;

}

.hks-header.sticky .hks-logo img{

    height:68px;

}

/*==========================================================
REMOVE UNDERLINE
==========================================================*/

.hks-call-btn,
.hks-whatsapp-btn,
.hks-call-btn:hover,
.hks-whatsapp-btn:hover,
.hks-call-btn:visited,
.hks-whatsapp-btn:visited{

    text-decoration:none;

}

/*==========================================================
TABLET
==========================================================*/

@media(max-width:1024px){

.hks-header-wrapper{

grid-template-columns:220px 1fr 310px;

}

.hks-logo img{

height:72px;

}

.hks-call-btn,
.hks-whatsapp-btn{

min-width:145px;

padding:0 18px;

font-size:14px;

}

.hks-top-item{

font-size:13px;

}

}

/*==========================================================
MOBILE
==========================================================*/

@media(max-width:768px){

.hks-topbar{

height:42px;

}

.hks-topbar-list{

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

height:42px;

}

.hks-top-item{

font-size:11px;

gap:4px;

}

.hks-top-item i{

font-size:11px;

}

.hks-top-item:not(:last-child)::after{

height:18px;

}

.hks-header{

height:76px;

}

.hks-header-wrapper{

display:flex;

justify-content:space-between;

align-items:center;

height:76px;

gap:12px;

}

.hks-rating{

display:none;

}

.hks-logo{

flex:1;

}

.hks-logo img{

height:52px;

}

.hks-actions{

display:flex;

gap:8px;

}

.hks-call-btn,
.hks-whatsapp-btn{

min-width:auto;

height:42px;

padding:0 12px;

border-radius:10px;

font-size:12px;

gap:6px;

}

.hks-call-btn span,
.hks-whatsapp-btn span{

font-size:12px;

}

.hks-call-btn i{

font-size:13px;

}

.hks-whatsapp-btn i{

font-size:16px;

}

}

/*==========================================================
SMALL MOBILE
==========================================================*/

@media(max-width:390px){

.hks-container{

padding-inline:14px;

}

.hks-logo img{

height:46px;

}

.hks-top-item{

font-size:10px;

}

.hks-call-btn,
.hks-whatsapp-btn{

padding:0 10px;

height:40px;

font-size:11px;

}

}
/*==========================================================
MOBILE CTA (REFERENCE STYLE)
==========================================================*/

@media (max-width:768px){

    .hks-actions{

        display:flex;

        align-items:center;

        gap:8px;

        flex-shrink:0;

    }

    .hks-call-btn,
    .hks-whatsapp-btn{

        width:44px;
        height:44px;

        min-width:44px;

        padding:0;

        border-radius:12px;

        justify-content:center;

    }

    .hks-call-btn span,
    .hks-whatsapp-btn span{

        display:none;

    }

    .hks-call-btn i{

        font-size:16px;

        margin:0;

    }

    .hks-whatsapp-btn i{

        font-size:20px;

        margin:0;

    }

}

/*==========================================================
375px
==========================================================*/

@media (max-width:390px){

    .hks-header{

        height:72px;

    }

    .hks-header-wrapper{

        height:72px;

    }

    .hks-logo img{

        height:44px;

    }

    .hks-call-btn,
    .hks-whatsapp-btn{

        width:40px;

        height:40px;

        min-width:40px;

    }

}

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

.hks-header{

    animation:hksHeaderFade .4s ease;

}

@keyframes hksHeaderFade{

    from{

        opacity:0;

        transform:translateY(-15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================================
HOVER
==========================================================*/

.hks-top-item{

    transition:.3s;

}

.hks-top-item:hover{

    color:var(--primary);

}

.hks-top-item:hover i{

    transform:scale(1.1);

}

.hks-logo img{

    transition:.35s;

}

.hks-logo:hover img{

    transform:scale(1.02);

}

.hks-call-btn,
.hks-whatsapp-btn{

    transition:.35s;

}

/*==========================================================
UTILITY
==========================================================*/

.text-center{

    text-align:center;

}

.d-flex{

    display:flex;

}

.align-center{

    align-items:center;

}

.justify-between{

    justify-content:space-between;

}

.w-100{

    width:100%;

}

.position-relative{

    position:relative;

}

.position-absolute{

    position:absolute;

}

.overflow-hidden{

    overflow:hidden;

}

/*==========================================================
HERO START
==========================================================*/

.hks-hero{

    position:relative;

    padding:70px 0 90px;

    background:
    radial-gradient(circle at top left,#EAF2FF 0%,#ffffff 42%),
    radial-gradient(circle at right,#F6FAFF 0%,transparent 40%);

    overflow:hidden;

}

.hks-hero::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(22,93,255,.05);

    filter:blur(40px);

}

.hks-hero-grid{

    display:grid;

    grid-template-columns:1fr 580px;

    align-items:center;

    gap:60px;

}

/*==========================================================
HERO SECTION
==========================================================*/

.hks-hero{

    position:relative;

    overflow:hidden;

    padding:80px 0 100px;

    background:
    radial-gradient(circle at top left,#EAF2FF 0%,#ffffff 42%),
    radial-gradient(circle at right,#F5F9FF 0%,transparent 42%);

}

.hks-hero-bg{

    position:absolute;

    right:-220px;

    top:-220px;

    width:650px;

    height:650px;

    border-radius:50%;

    background:rgba(22,93,255,.06);

    filter:blur(20px);

}

.hks-hero-grid{

    display:grid;

    grid-template-columns:1fr 560px;

    gap:70px;

    align-items:center;

    position:relative;

    z-index:2;

}

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

.hks-hero-content{

    max-width:650px;

}

.hks-trust-badge{

    display:inline-flex;

    align-items:center;

    gap:15px;

    padding:12px 20px;

    border-radius:100px;

    background:#fff;

    box-shadow:0 15px 45px rgba(15,23,42,.08);

    margin-bottom:28px;

}

.hks-trust-avatar{

    display:flex;

}

.hks-trust-avatar img{

    width:42px;

    height:42px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #fff;

    margin-left:-10px;

}

.hks-trust-avatar img:first-child{

margin-left:0;

}

.hks-trust-badge span{

font-size:15px;

font-weight:600;

color:#344054;

}

.hks-trust-badge strong{

color:#1157F5;

}

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

.hks-hero-title{

font-size:62px;

font-weight:800;

line-height:1.08;

color:#101828;

margin-bottom:24px;

letter-spacing:-1px;

}

.hks-hero-title span{

display:block;

color:#1157F5;

}

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

.hks-hero-desc{

font-size:18px;

line-height:32px;

color:#667085;

max-width:620px;

margin-bottom:34px;

}

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

.hks-feature-list{

display:flex;

flex-wrap:wrap;

gap:22px;

margin-bottom:38px;

}

.hks-feature-list div{

display:flex;

align-items:center;

gap:8px;

font-size:15px;

font-weight:600;

color:#344054;

}

.hks-feature-list i{

color:#1157F5;

font-size:16px;

}

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

.hks-hero-btns{

display:flex;

gap:18px;

margin-bottom:40px;

}

.hks-primary-btn{

height:60px;

padding:0 34px;

border-radius:14px;

display:flex;

align-items:center;

gap:12px;

background:linear-gradient(180deg,#FF9B24,#FF7A00);

color:#fff;

font-weight:700;

box-shadow:0 18px 40px rgba(255,122,0,.28);

transition:.35s;

}

.hks-primary-btn:hover{

transform:translateY(-3px);

}

.hks-secondary-btn{

height:60px;

padding:0 34px;

display:flex;

align-items:center;

gap:12px;

border-radius:14px;

background:#165DFF;

color:#fff;

font-weight:700;

box-shadow:0 18px 40px rgba(22,93,255,.22);

transition:.35s;

}

.hks-secondary-btn:hover{

transform:translateY(-3px);

}

/*==========================================================
BOTTOM REVIEW
==========================================================*/

.hks-bottom-review{

display:flex;

align-items:center;

gap:14px;

}

.hks-bottom-review span{

font-size:15px;

font-weight:600;

color:#475467;

}

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

.hks-hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hks-image-wrap{

    position:relative;

    width:100%;

    max-width:560px;

}

.hks-image-wrap img{

    width:100%;

    display:block;

    border-radius:34px;

    box-shadow:
    0 35px 80px rgba(15,23,42,.14);

}

/*==========================================================
IMAGE BACKGROUND GLOW
==========================================================*/

.hks-image-wrap::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:#1157F5;

    opacity:.08;

    border-radius:50%;

    right:-80px;

    top:-80px;

    filter:blur(40px);

    z-index:-1;

}

.hks-image-wrap::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    background:#FF9D22;

    opacity:.12;

    border-radius:50%;

    left:-40px;

    bottom:-50px;

    filter:blur(45px);

    z-index:-1;

}

/*==========================================================
FLOATING CARDS
==========================================================*/

.hks-card{

    position:absolute;

    background:#fff;

    border-radius:18px;

    padding:18px;

    display:flex;

    align-items:center;

    gap:15px;

    min-width:220px;

    box-shadow:

    0 25px 60px rgba(15,23,42,.10);

}

.hks-card i{

    width:56px;

    height:56px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:16px;

    background:#1157F5;

    color:#fff;

    font-size:22px;

}

.hks-card h4{

    font-size:26px;

    color:#111827;

    font-weight:800;

    line-height:1;

    margin-bottom:6px;

}

.hks-card span{

    font-size:14px;

    color:#667085;

    font-weight:600;

}

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

.card-1{

    left:-55px;

    top:80px;

}

.card-2{

    right:-40px;

    bottom:70px;

}

/*==========================================================
BANK STRIP
==========================================================*/

.hks-bank-strip{

    margin-top:70px;

    background:#fff;

    border-radius:22px;

    padding:26px 34px;

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

}

.hks-bank-strip span{

    display:block;

    text-align:center;

    font-size:15px;

    font-weight:700;

    color:#667085;

    margin-bottom:22px;

}

.hks-bank-logos{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    flex-wrap:wrap;

}

.hks-bank-logos img{

    height:64px;

    width:auto;

    filter:grayscale(100%);

    opacity:.75;

    transition:.35s;

}

.hks-bank-logos img:hover{

    filter:none;

    opacity:1;

    transform:translateY(-2px);

}

/*==========================================================
MOBILE HERO
==========================================================*/

@media(max-width:991px){

.hks-hero{

padding:50px 0;

}

.hks-hero-grid{

grid-template-columns:1fr;

gap:40px;

}

.hks-hero-content{

max-width:100%;

order:2;

text-align:center;

}

.hks-hero-image{

order:1;

}

.hks-trust-badge{

margin-inline:auto;

}

.hks-feature-list{

justify-content:center;

}

.hks-hero-btns{

justify-content:center;

flex-wrap:wrap;

}

.card-1{

left:0;

top:20px;

}

.card-2{

right:0;

bottom:20px;

}

}

/*==========================================================
MOBILE 768
==========================================================*/

@media(max-width:768px){

.hks-hero{

padding:40px 0;

}

.hks-hero-title{

font-size:38px;

letter-spacing:-1px;

}

.hks-hero-desc{

font-size:15px;

line-height:1.8;

}

.hks-trust-badge{

padding:10px 14px;

}

.hks-trust-avatar img{

width:32px;

height:32px;

}

.hks-primary-btn,

.hks-secondary-btn{

width:100%;

height:54px;

justify-content:center;

}

.hks-card{

position:relative;

left:auto;

right:auto;

top:auto;

bottom:auto;

margin-top:15px;

min-width:100%;

}

.hks-bank-strip{

padding:20px;

margin-top:40px;

}

.hks-bank-logos{

justify-content:center;

gap:18px;

}

.hks-bank-logos img{

height:46px;

}

}

/*==========================================================
SMALL MOBILE
==========================================================*/

@media(max-width:420px){

.hks-hero-title{

font-size:32px;

}

.hks-feature-list{

flex-direction:column;

align-items:center;

gap:12px;

}

.hks-trust-badge{

width:100%;

justify-content:center;

}

.hks-card{

padding:16px;

}

.hks-card h4{

font-size:22px;

}

}

/* ===================================================
   HKS HERO SECTION
   Part 1A.2
===================================================*/

:root{

    --hks-primary:#0B63F6;
    --hks-primary-dark:#0849B8;
    --hks-secondary:#1F2937;

    --hks-white:#ffffff;
    --hks-light:#F7F9FC;
    --hks-border:#E5E7EB;

    --hks-text:#111827;
    --hks-text-light:#6B7280;

    --hks-success:#22C55E;

    --hks-shadow:0 20px 60px rgba(0,0,0,.08);
    --hks-shadow-sm:0 10px 25px rgba(0,0,0,.05);

    --hks-radius:22px;

}


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:"Inter",sans-serif;
    color:var(--hks-text);
    background:#fff;

}

img{

    display:block;
    max-width:100%;

}

a{

    text-decoration:none;

}

.hks-container{

    width:min(1280px,92%);
    margin:auto;

}


/*==================================
 HERO
==================================*/

.hks-hero-section{

    position:relative;

    padding:90px 0;

    background:
    linear-gradient(180deg,#F8FBFF 0%,#FFFFFF 100%);

    overflow:hidden;

}

.hks-hero-section::before{

    content:"";

    width:650px;
    height:650px;

    position:absolute;

    top:-240px;
    right:-180px;

    border-radius:50%;

    background:
    rgba(11,99,246,.08);

    filter:blur(90px);

}

.hks-hero-grid{

    display:grid;

    grid-template-columns:
    1.1fr
    .9fr;

    gap:70px;

    align-items:center;

    position:relative;
    z-index:2;

}


/*==================================
 BADGE
==================================*/

.hks-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:10px 20px;

    border-radius:100px;

    background:#EEF6FF;

    color:var(--hks-primary);

    font-size:14px;

    font-weight:600;

    margin-bottom:28px;

}

.hks-badge-icon{

    width:34px;
    height:34px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    background:var(--hks-primary);

}


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

.hks-hero-title{

    font-size:58px;

    line-height:1.12;

    font-weight:800;

    letter-spacing:-1px;

    max-width:700px;

    margin-bottom:24px;

}

.hks-hero-title span{

    color:var(--hks-primary);

}


.hks-hero-description{

    font-size:18px;

    line-height:1.9;

    color:var(--hks-text-light);

    max-width:620px;

    margin-bottom:42px;

}


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

.hks-feature-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:45px;

}

.hks-feature-card{

    background:#fff;

    border-radius:18px;

    padding:24px;

    display:flex;

    gap:18px;

    box-shadow:var(--hks-shadow-sm);

    border:1px solid rgba(0,0,0,.04);

    transition:.35s;

}

.hks-feature-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--hks-shadow);

}

.hks-feature-icon{

    min-width:56px;
    height:56px;

    border-radius:16px;

    background:#EEF6FF;

    color:var(--hks-primary);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:22px;

}

.hks-feature-card h4{

    font-size:18px;

    margin-bottom:8px;

    font-weight:700;

}

.hks-feature-card p{

    color:var(--hks-text-light);

    font-size:15px;

    line-height:1.7;

}


/*==================================
 TRUST BAR
==================================*/

.hks-trust-bar{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

}

.hks-trust-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 20px;

    border-radius:100px;

    background:#fff;

    box-shadow:var(--hks-shadow-sm);

    border:1px solid rgba(0,0,0,.05);

    font-weight:600;

}

.hks-trust-item i{

    color:var(--hks-success);

}


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

.hks-form-card{

    background:#fff;

    border-radius:30px;

    padding:38px;

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

    position:relative;

    overflow:hidden;

}

.hks-form-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:6px;

    background:
    linear-gradient(90deg,
    var(--hks-primary),
    #4DA3FF);

}

.hks-form-header{

    margin-bottom:35px;

}

.hks-form-header h3{

    font-size:34px;

    margin-bottom:12px;

    font-weight:800;

}

.hks-form-header p{

    color:var(--hks-text-light);

    line-height:1.8;

}

.hks-form-placeholder{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:420px;

}

.hks-placeholder-box{

    width:100%;

    border:2px dashed #D6E4FF;

    border-radius:20px;

    padding:70px 30px;

    text-align:center;

    background:#F8FBFF;

}

.hks-placeholder-box i{

    font-size:55px;

    color:var(--hks-primary);

    margin-bottom:22px;

}

.hks-placeholder-box h4{

    font-size:24px;

    margin-bottom:12px;

}

.hks-placeholder-box p{

    color:var(--hks-text-light);

    line-height:1.8;

}


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

/* Large Laptop */

@media (max-width:1400px){

.hks-hero-title{

font-size:52px;

}

.hks-hero-grid{

gap:60px;

}

}


/* Laptop */

@media (max-width:1200px){

.hks-hero-section{

padding:80px 0;

}

.hks-hero-grid{

grid-template-columns:1fr 460px;

gap:50px;

}

.hks-hero-title{

font-size:46px;

}

.hks-feature-grid{

gap:16px;

}

}


/* Tablet */

@media (max-width:991px){

.hks-hero-grid{

grid-template-columns:1fr;

gap:50px;

}

.hks-hero-right{

order:-1;

}

.hks-hero-left{

text-align:center;

}

.hks-badge{

margin-inline:auto;

}

.hks-hero-title{

font-size:42px;

max-width:100%;

}

.hks-hero-description{

margin-inline:auto;

}

.hks-feature-grid{

grid-template-columns:1fr 1fr;

}

.hks-trust-bar{

justify-content:center;

}

.hks-form-card{

max-width:650px;

margin:auto;

}

}


/* Mobile */

@media (max-width:768px){

.hks-hero-section{

padding:60px 0;

}

.hks-hero-title{

font-size:34px;

line-height:1.18;

}

.hks-hero-description{

font-size:16px;

line-height:1.8;

}

.hks-feature-grid{

grid-template-columns:1fr;

}

.hks-feature-card{

padding:20px;

}

.hks-form-card{

padding:28px;

border-radius:22px;

}

.hks-form-header h3{

font-size:28px;

}

.hks-placeholder-box{

min-height:320px;

padding:40px 20px;

}

}


/* Small Mobile */

@media (max-width:576px){

.hks-container{

width:92%;

}

.hks-hero-title{

font-size:30px;

}

.hks-badge{

font-size:13px;

padding:9px 15px;

}

.hks-badge-icon{

width:30px;

height:30px;

}

.hks-feature-icon{

width:50px;

height:50px;

min-width:50px;

font-size:20px;

}

.hks-feature-card h4{

font-size:17px;

}

.hks-feature-card p{

font-size:14px;

}

.hks-trust-item{

width:100%;

justify-content:center;

}

.hks-form-card{

padding:24px;

}

}


/*=========================================
ANIMATIONS
=========================================*/

.hks-hero-left{

animation:hksFadeLeft .9s ease forwards;

}

.hks-hero-right{

animation:hksFadeRight .9s ease forwards;

}

@keyframes hksFadeLeft{

0%{

opacity:0;

transform:translateX(-60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

@keyframes hksFadeRight{

0%{

opacity:0;

transform:translateX(60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

.hks-feature-card{

transition:

transform .35s ease,

box-shadow .35s ease;

}

.hks-feature-card:hover{

transform:translateY(-8px);

}

.hks-trust-item{

transition:.3s;

}

.hks-trust-item:hover{

background:#0B63F6;

color:#fff;

transform:translateY(-4px);

}

.hks-trust-item:hover i{

color:#fff;

}

.hks-form-card{

transition:.35s;

}

.hks-form-card:hover{

transform:translateY(-8px);

box-shadow:0 35px 80px rgba(0,0,0,.15);

}


/* Floating Background */

.hks-hero-section::after{

content:"";

position:absolute;

width:420px;

height:420px;

left:-180px;

bottom:-180px;

background:rgba(11,99,246,.05);

border-radius:50%;

filter:blur(80px);

}


/*=========================================
SMOOTH SCROLL OFFSET
=========================================*/

html{

scroll-behavior:smooth;

}


/*=========================================
ACCESSIBILITY
=========================================*/

.hks-feature-card:focus-within,

.hks-trust-item:focus-within{

outline:2px solid #0B63F6;

outline-offset:3px;

}


/*==================================================
Estimate Section
Part 1.2.1
==================================================*/

.estimate-section{

    position:relative;
    padding:90px 20px;
    background:#F8FBFF;
    overflow:hidden;

}

.estimate-section::before{

    content:"";
    position:absolute;

    top:-180px;
    right:-180px;

    width:650px;
    height:650px;

    border-radius:50%;

    background:rgba(22,73,208,.05);

    filter:blur(90px);

}

.estimate-section::after{

    content:"";
    position:absolute;

    left:-200px;
    bottom:-200px;

    width:450px;
    height:450px;

    border-radius:50%;

    background:rgba(22,73,208,.05);

    filter:blur(80px);

}


/*==================================
WRAPPER
==================================*/

.estimate-wrapper{

    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:70px;

}


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

.estimate-left{

    max-width:640px;

}


/*==================================
TAG
==================================*/

.estimate-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:50px;

    background:#EAF2FF;

    color:#1649D0;

    font-size:14px;

    font-weight:600;

    margin-bottom:28px;

}

.estimate-tag i{

    color:#1649D0;

}


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

.estimate-heading{

    font-size:58px;

    line-height:1.08;

    font-weight:800;

    color:#111827;

    margin-bottom:24px;

    letter-spacing:-1px;

}

.estimate-heading span{

    display:block;

    color:#1649D0;

}


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

.estimate-text{

    font-size:18px;

    line-height:1.9;

    color:#6B7280;

    margin-bottom:42px;

}


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

.estimate-features{

    display:grid;

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

    gap:20px;

    margin-bottom:40px;

}

.feature-card{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:24px;

    background:#fff;

    border-radius:20px;

    border:1px solid #EEF2F7;

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

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-8px);

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

}

.feature-icon{

    width:56px;
    min-width:56px;
    height:56px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:16px;

    background:#EDF4FF;

    color:#1649D0;

    font-size:22px;

}

.feature-content h4{

    font-size:18px;

    font-weight:700;

    margin-bottom:8px;

    color:#111827;

}

.feature-content p{

    font-size:14px;

    line-height:1.7;

    color:#6B7280;

}


/*==================================
BOTTOM BADGES
==================================*/

.estimate-trust{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

}

.trust-badge{

    display:flex;

    align-items:center;

    gap:10px;

    padding:13px 20px;

    border-radius:50px;

    background:#fff;

    border:1px solid #EEF2F7;

    box-shadow:
    0 10px 25px rgba(15,23,42,.05);

    font-size:15px;

    font-weight:600;

    color:#374151;

}

.trust-badge i{

    color:#22C55E;

}


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

.estimate-right{

    display:flex;

    justify-content:flex-end;

}


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

.quote-box{

    width:100%;
    max-width:520px;

    background:#fff;

    border-radius:28px;

    padding:38px;

    border:1px solid #EEF2F7;

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

    position:relative;

}

.quote-box::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        #1649D0,
        #3B82F6
    );

    border-radius:28px 28px 0 0;

}


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

.quote-header{

    margin-bottom:30px;

}

.quote-header h3{

    font-size:32px;

    font-weight:800;

    color:#111827;

    margin-bottom:10px;

}

.quote-header p{

    font-size:15px;

    color:#6B7280;

    line-height:1.8;

}

/*==================================
QUOTE FORM
==================================*/

.quote-form{

    display:flex;
    flex-direction:column;
    gap:20px;

}

.form-row{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;

}

.form-group{

    display:flex;
    flex-direction:column;
    gap:8px;

}

.form-group label{

    font-size:14px;
    font-weight:600;
    color:#374151;

}


/*==================================
INPUT GROUP
==================================*/

.input-group{

    position:relative;

}

.input-group i{

    position:absolute;

    left:18px;
    top:50%;

    transform:translateY(-50%);

    color:#9CA3AF;

    font-size:16px;

    transition:.3s;

    z-index:2;

}

.input-group input,
.input-group select{

    width:100%;

    height:56px;

    border:1px solid #E5E7EB;

    border-radius:14px;

    background:#fff;

    padding-left:50px;

    padding-right:18px;

    font-size:15px;

    color:#111827;

    transition:.3s;

    outline:none;

}


/* Placeholder */

.input-group input::placeholder{

    color:#9CA3AF;

}


/* Focus */

.input-group:focus-within i{

    color:#1649D0;

}

.input-group input:focus,
.input-group select:focus{

    border-color:#1649D0;

    box-shadow:
    0 0 0 4px rgba(22,73,208,.10);

}


/*==================================
SELECT
==================================*/

.input-group select{

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    cursor:pointer;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 18px center;

    padding-right:50px;

}


/*==================================
DATE
==================================*/

input[type="date"]{

    cursor:pointer;

}

input[type="date"]::-webkit-calendar-picker-indicator{

    opacity:0;

}


/*==================================
BUTTON
==================================*/

.quote-btn{

    width:100%;

    height:60px;

    margin-top:10px;

    border:none;

    border-radius:14px;

    background:#1649D0;

    color:#fff;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    box-shadow:
    0 18px 40px rgba(22,73,208,.25);

}

.quote-btn:hover{

    background:#103BA9;

    transform:translateY(-3px);

    box-shadow:
    0 25px 50px rgba(22,73,208,.35);

}

.quote-btn:active{

    transform:scale(.98);

}


/*==================================
NOTE
==================================*/

.form-note{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-top:8px;

    font-size:13px;

    color:#6B7280;

}

.form-note i{

    color:#22C55E;

}


/*==================================
VALIDATION
==================================*/

.input-group input:valid,
.input-group select:valid{

    border-color:#D1D5DB;

}

.input-group input:invalid:focus{

    border-color:#EF4444;

    box-shadow:
    0 0 0 4px rgba(239,68,68,.08);

}


/*==================================
AUTOFILL
==================================*/

input:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px #fff inset;

    -webkit-text-fill-color:#111827;

}
/*==================================================
Estimate Section
Part 1.2.3
Responsive
==================================================*/

/* ---------- Large Laptop ---------- */

@media (max-width:1400px){

    .estimate-heading{

        font-size:52px;

    }

    .estimate-wrapper{

        gap:60px;

    }

}


/* ---------- Laptop ---------- */

@media (max-width:1200px){

    .estimate-wrapper{

        grid-template-columns:1fr 470px;

        gap:45px;

    }

    .estimate-heading{

        font-size:46px;

    }

}


/* ---------- Tablet ---------- */

@media (max-width:992px){

    .estimate-section{

        padding:70px 20px;

    }

    .estimate-wrapper{

        grid-template-columns:1fr;

        gap:55px;

    }

    .estimate-left{

        max-width:100%;

        text-align:center;

    }

    .estimate-tag{

        margin:0 auto 24px;

    }

    .estimate-heading{

        font-size:40px;

    }

    .estimate-text{

        max-width:700px;

        margin:0 auto 40px;

    }

    .estimate-features{

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

    }

    .estimate-trust{

        justify-content:center;

    }

    .estimate-right{

        justify-content:center;

    }

}


/* ---------- Mobile ---------- */

@media (max-width:768px){

    .estimate-section{

        padding:60px 20px;

    }

    .estimate-heading{

        font-size:34px;

        line-height:1.2;

    }

    .estimate-text{

        font-size:16px;

    }

    .estimate-features{

        grid-template-columns:1fr;

    }

    .feature-card{

        padding:20px;

    }

    .form-row{

        grid-template-columns:1fr;

    }

    .quote-box{

        padding:28px;

        border-radius:22px;

    }

    .quote-header h3{

        font-size:28px;

    }

}


/* ---------- Small Mobile ---------- */

@media (max-width:576px){

    .estimate-heading{

        font-size:30px;

    }

    .estimate-tag{

        font-size:13px;

    }

    .feature-icon{

        width:50px;

        min-width:50px;

        height:50px;

        font-size:18px;

    }

    .feature-content h4{

        font-size:17px;

    }

    .feature-content p{

        font-size:14px;

    }

    .trust-badge{

        width:100%;

        justify-content:center;

    }

    .quote-box{

        padding:24px;

    }

    .quote-header h3{

        font-size:25px;

    }

    .input-group input,

    .input-group select{

        height:54px;

        font-size:14px;

    }

    .quote-btn{

        height:56px;

        font-size:16px;

    }

}


/*==================================================
Animations
==================================================*/

.estimate-left{

    animation:estimateLeft .8s ease;

}

.estimate-right{

    animation:estimateRight .8s ease;

}

@keyframes estimateLeft{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes estimateRight{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/* Hover */

.feature-card{

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-8px);

}

.trust-badge{

    transition:.3s;

}

.trust-badge:hover{

    background:#1649D0;

    color:#fff;

}

.trust-badge:hover i{

    color:#fff;

}

.quote-box{

    transition:.35s;

}

.quote-box:hover{

    transform:translateY(-6px);

}


/*==================================================
Accessibility
==================================================*/

.quote-btn:focus,

.input-group input:focus,

.input-group select:focus{

    outline:none;

}


/*==================================================
Smooth Scroll
==================================================*/

html{

    scroll-behavior:smooth;

}


/*=========================================
WHY SECTION
=========================================*/

.why-section{

    padding:90px 20px;

    background:#F8FAFD;

    position:relative;

    overflow:hidden;

}

.why-section::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    left:-180px;
    top:-120px;

    background:rgba(22,73,208,.05);

    border-radius:50%;

    filter:blur(80px);

}

.why-section::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-160px;
    bottom:-120px;

    background:rgba(22,73,208,.04);

    border-radius:50%;

    filter:blur(80px);

}

/*=========================================
Heading
=========================================*/

.section-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 55px;

    position:relative;

    z-index:2;

}

.section-heading h2{

    font-size:46px;

    font-weight:800;

    line-height:1.15;

    color:#101828;

    margin-bottom:18px;

}

.section-heading h2 span{

    display:block;

}

.section-heading p{

    font-size:17px;

    color:#667085;

    line-height:1.8;

}

/*=========================================
Grid
=========================================*/

.why-grid{

    display:grid;

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

    gap:24px;

    position:relative;

    z-index:2;

}

/*=========================================
Card
=========================================*/

.why-card{

    display:flex;

    align-items:flex-start;

    gap:20px;

    background:#fff;

    padding:28px;

    border-radius:18px;

    border:1px solid #EDF2F7;

    box-shadow:

        0 8px 20px rgba(15,23,42,.04);

    transition:all .35s ease;

}

.why-card:hover{

    transform:translateY(-8px);

    box-shadow:

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

}

/*=========================================
Icon
=========================================*/

.why-icon{

    width:72px;

    min-width:72px;

    height:72px;

    border-radius:50%;

    background:#F2F7FF;

    display:flex;

    justify-content:center;

    align-items:center;

}

.why-icon i{

    font-size:34px;

    color:#1649D0;

}

/*=========================================
Content
=========================================*/

.why-content{

    flex:1;

}

.why-content h3{

    font-size:20px;

    font-weight:700;

    color:#101828;

    margin-bottom:10px;

}

.why-content p{

    font-size:15px;

    line-height:1.8;

    color:#667085;

}

/*=========================================
Responsive
=========================================*/

@media(max-width:1200px){

    .why-grid{

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

    }

}

@media(max-width:768px){

    .why-section{

        padding:70px 20px;

    }

    .section-heading{

        margin-bottom:40px;

    }

    .section-heading h2{

        font-size:34px;

    }

    .section-heading p{

        font-size:15px;

    }

    .why-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .why-card{

        padding:22px;

        gap:18px;

    }

    .why-icon{

        width:62px;

        min-width:62px;

        height:62px;

    }

    .why-icon i{

        font-size:28px;

    }

    .why-content h3{

        font-size:18px;

    }

    .why-content p{

        font-size:14px;

    }

}

/*=========================================
Animation
=========================================*/

.why-card{

    opacity:0;

    transform:translateY(30px);

    animation:whyReveal .7s ease forwards;

}

.why-card:nth-child(2){animation-delay:.1s;}
.why-card:nth-child(3){animation-delay:.2s;}
.why-card:nth-child(4){animation-delay:.3s;}
.why-card:nth-child(5){animation-delay:.4s;}
.why-card:nth-child(6){animation-delay:.5s;}

@keyframes whyReveal{

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*=========================================
STATS SECTION
=========================================*/

.stats-section{

    padding:90px 20px;

    background:#FFFFFF;

    position:relative;

    overflow:hidden;

}

.stats-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.stats-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:50px;

    background:#EEF4FF;

    color:#1649D0;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.stats-header h2{

    font-size:46px;

    font-weight:800;

    color:#111827;

    margin-bottom:18px;

    line-height:1.2;

}

.stats-header p{

    font-size:17px;

    color:#667085;

    line-height:1.8;

}


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

.stats-grid{

    display:grid;

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

    gap:24px;

}


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

.stats-card{

    background:#fff;

    border:1px solid #EDF2F7;

    border-radius:20px;

    padding:35px 25px;

    text-align:center;

    transition:.35s;

    box-shadow:

    0 10px 30px rgba(15,23,42,.05);

}

.stats-card:hover{

    transform:translateY(-8px);

    box-shadow:

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

}


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

.stats-icon{

    width:72px;

    height:72px;

    margin:0 auto 24px;

    border-radius:50%;

    background:#EEF4FF;

    display:flex;

    align-items:center;

    justify-content:center;

}

.stats-icon i{

    font-size:30px;

    color:#1649D0;

}


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

.stats-card h3{

    font-size:42px;

    font-weight:800;

    color:#111827;

    margin-bottom:10px;

    line-height:1;

}

.stats-card p{

    font-size:15px;

    color:#667085;

    line-height:1.6;

}


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

@media(max-width:1200px){

    .stats-grid{

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

    }

}

@media(max-width:768px){

    .stats-section{

        padding:70px 20px;

    }

    .stats-header{

        margin-bottom:40px;

    }

    .stats-header h2{

        font-size:34px;

    }

    .stats-header p{

        font-size:15px;

    }

    .stats-grid{

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

        gap:18px;

    }

    .stats-card{

        padding:25px 18px;

    }

    .stats-icon{

        width:60px;

        height:60px;

        margin-bottom:18px;

    }

    .stats-icon i{

        font-size:24px;

    }

    .stats-card h3{

        font-size:32px;

    }

}

@media(max-width:576px){

    .stats-grid{

        grid-template-columns:1fr;

    }

}

/*=========================================
SERVICES SECTION
=========================================*/

.services-section{

    padding:90px 20px;

    background:#F8FAFD;

    position:relative;

    overflow:hidden;

}

.services-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.services-tag{

    display:inline-block;

    color:#1649D0;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.services-header h2{

    font-size:46px;

    font-weight:800;

    color:#101828;

    line-height:1.2;

    margin-bottom:15px;

}

.services-header p{

    font-size:17px;

    color:#667085;

    line-height:1.8;

}


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

.services-grid{

    display:grid;

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

    gap:22px;

}


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

.service-card{

    background:#fff;

    border:1px solid #EDF2F7;

    border-radius:18px;

    padding:28px 24px;

    display:flex;

    gap:18px;

    align-items:flex-start;

    transition:.35s;

    box-shadow:

        0 8px 22px rgba(15,23,42,.05);

}

.service-card:hover{

    transform:translateY(-8px);

    box-shadow:

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

}


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

.service-icon{

    width:64px;

    min-width:64px;

    height:64px;

    border-radius:16px;

    background:#F3F7FF;

    display:flex;

    justify-content:center;

    align-items:center;

}

.service-icon i{

    font-size:30px;

    color:#1649D0;

}


/*=========================================
CONTENT
=========================================*/

.service-content{

    flex:1;

}

.service-content h3{

    font-size:20px;

    font-weight:700;

    color:#101828;

    margin-bottom:10px;

}

.service-content p{

    font-size:15px;

    color:#667085;

    line-height:1.7;

    margin-bottom:18px;

}

.service-content a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#1649D0;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.service-content a i{

    font-size:13px;

    transition:.3s;

}

.service-content a:hover{

    color:#103BA9;

}

.service-content a:hover i{

    transform:translateX(5px);

}


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

@media(max-width:1200px){

    .services-grid{

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

    }

}

@media(max-width:768px){

    .services-section{

        padding:70px 20px;

    }

    .services-header{

        margin-bottom:40px;

    }

    .services-header h2{

        font-size:34px;

    }

    .services-header p{

        font-size:15px;

    }

    .services-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .service-card{

        padding:22px;

    }

    .service-icon{

        width:58px;

        min-width:58px;

        height:58px;

    }

    .service-icon i{

        font-size:26px;

    }

    .service-content h3{

        font-size:18px;

    }

    .service-content p{

        font-size:14px;

    }

}

/*=========================================
CTA SECTION
=========================================*/

.cta-section{

    padding:90px 20px;

    background:#F8FAFD;

}

.cta-wrapper{

    position:relative;

    overflow:hidden;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    padding:55px 60px;

    border-radius:24px;

    background:linear-gradient(
        135deg,
        #1649D0 0%,
        #0F5AE8 50%,
        #1E6BFF 100%
    );

    box-shadow:
    0 20px 50px rgba(22,73,208,.22);

}

.cta-wrapper::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    right:-80px;

    bottom:-80px;

    border-radius:50%;

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

}

.cta-wrapper::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:
    radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);

    background-size:18px 18px;

    opacity:.35;

    mask-image:linear-gradient(to left,black,transparent);

}

.cta-content{

    position:relative;

    z-index:2;

    max-width:520px;

}

.cta-content h2{

    color:#fff;

    font-size:46px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:16px;

}

.cta-content p{

    color:rgba(255,255,255,.88);

    font-size:17px;

    line-height:1.8;

}

.cta-actions{

    position:relative;

    z-index:2;

    display:flex;

    gap:20px;

    align-items:center;

}

.call-btn,
.whatsapp-btn{

    min-width:220px;

    height:66px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    font-size:18px;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

.call-btn{

    background:#FF6B00;

    color:#fff;

    box-shadow:
    0 18px 35px rgba(255,107,0,.35);

}

.call-btn:hover{

    transform:translateY(-5px);

    background:#F35F00;

}

.whatsapp-btn{

    background:#fff;

    color:#111827;

}

.whatsapp-btn:hover{

    transform:translateY(-5px);

}

.call-btn i,
.whatsapp-btn i{

    font-size:22px;

}

/*=========================================
Responsive
=========================================*/

@media(max-width:991px){

    .cta-wrapper{

        flex-direction:column;

        text-align:center;

        padding:45px 35px;

    }

    .cta-content{

        max-width:100%;

    }

}

@media(max-width:768px){

    .cta-section{

        padding:70px 20px;

    }

    .cta-content h2{

        font-size:34px;

    }

    .cta-content p{

        font-size:15px;

    }

    .cta-actions{

        width:100%;

        flex-direction:column;

    }

    .call-btn,
    .whatsapp-btn{

        width:100%;

        min-width:100%;

    }

}

/*=========================================
IBA SECTION
=========================================*/

.iba-section{

    padding:90px 20px;

    background:#F8FAFD;

}

.iba-wrapper{

    position:relative;

    display:grid;

    grid-template-columns:1fr 1fr;

    overflow:hidden;

    border-radius:28px;

    background:#0F4EDB;

    box-shadow:
    0 20px 50px rgba(15,78,219,.18);

}


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

.iba-content{

    position:relative;

    z-index:2;

    padding:70px 60px;

    color:#fff;

    background:linear-gradient(
        90deg,
        rgba(15,78,219,.98),
        rgba(15,78,219,.92),
        rgba(15,78,219,.70),
        rgba(15,78,219,.15)
    );

}

.iba-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:50px;

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

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

    font-size:13px;

    font-weight:600;

    margin-bottom:30px;

}

.iba-badge i{

    color:#fff;

}

.iba-content h2{

    font-size:58px;

    line-height:1.08;

    font-weight:800;

    margin-bottom:28px;

}

.iba-content h2 span{

    display:block;

}

.iba-content p{

    font-size:17px;

    line-height:1.9;

    color:rgba(255,255,255,.88);

    margin-bottom:40px;

}


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

.iba-features{

    display:grid;

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

    gap:18px 28px;

}

.iba-item{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-size:15px;

    font-weight:500;

}

.iba-item i{

    color:#fff;

    font-size:16px;

}


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

.iba-image{

    position:relative;

    min-height:700px;

}

.iba-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


/*=========================================
FLOATING CARDS
=========================================*/

.floating-card{

    position:absolute;

    right:30px;

    width:260px;

    display:flex;

    align-items:center;

    gap:16px;

    background:#fff;

    border-radius:18px;

    padding:18px;

    box-shadow:

    0 15px 40px rgba(15,23,42,.12);

}

.card-one{

    top:170px;

}

.card-two{

    top:300px;

}

.card-three{

    top:430px;

}

.floating-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    background:#EEF4FF;

    display:flex;

    justify-content:center;

    align-items:center;

}

.floating-icon i{

    color:#1649D0;

    font-size:24px;

}

.floating-card h4{

    font-size:22px;

    font-weight:700;

    color:#111827;

    margin-bottom:4px;

}

.floating-card p{

    font-size:14px;

    color:#667085;

    line-height:1.5;

}
/*=========================================
IBA SECTION
Responsive
=========================================*/

@media (max-width:1400px){

    .iba-content{

        padding:60px 50px;

    }

    .iba-content h2{

        font-size:52px;

    }

}

@media (max-width:1200px){

    .iba-wrapper{

        grid-template-columns:1fr;

    }

    .iba-image{

        min-height:620px;

    }

    .floating-card{

        width:240px;

        right:20px;

    }

}

@media (max-width:991px){

    .iba-content{

        padding:55px 40px;

    }

    .iba-content h2{

        font-size:42px;

    }

    .iba-content p{

        font-size:16px;

    }

    .iba-features{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .iba-section{

        padding:70px 20px;

    }

    .iba-wrapper{

        border-radius:22px;

    }

    .iba-content{

        padding:45px 30px;

    }

    .iba-content h2{

        font-size:34px;

    }

    .iba-content p{

        margin-bottom:30px;

    }

    .iba-image{

        min-height:480px;

    }

    .floating-card{

        position:relative;

        top:auto !important;
        right:auto;

        width:calc(100% - 40px);

        margin:16px auto;

    }

}

@media (max-width:576px){

    .iba-content{

        padding:35px 22px;

    }

    .iba-content h2{

        font-size:30px;

        line-height:1.2;

    }

    .iba-badge{

        font-size:12px;

    }

    .iba-item{

        font-size:14px;

    }

    .floating-card{

        width:calc(100% - 24px);

        padding:16px;

    }

    .floating-icon{

        width:52px;

        height:52px;

    }

    .floating-icon i{

        font-size:20px;

    }

    .floating-card h4{

        font-size:18px;

    }

}


/*=========================================
Animations
=========================================*/

.iba-content{

    animation:ibaLeft .8s ease;

}

.iba-image{

    animation:ibaRight .8s ease;

}

@keyframes ibaLeft{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes ibaRight{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.floating-card{

    transition:.35s;

}

.floating-card:hover{

    transform:translateY(-8px);

}

.iba-image img{

    transition:1s;

}

.iba-wrapper:hover .iba-image img{

    transform:scale(1.04);

}

/*=========================================
PROCESS SECTION
=========================================*/

.process-section{

    padding:90px 20px;

    background:#FFFFFF;

    overflow:hidden;

}

.process-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.process-tag{

    display:inline-block;

    color:#1649D0;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.process-header h2{

    font-size:48px;

    font-weight:800;

    color:#101828;

    line-height:1.15;

    margin-bottom:18px;

}

.process-header h2 span{

    display:block;

}

.process-header p{

    max-width:650px;

    margin:auto;

    font-size:17px;

    color:#667085;

    line-height:1.8;

}


/*=========================================
TIMELINE
=========================================*/

.process-wrapper{

    display:grid;

    grid-template-columns:1fr 60px 1fr 60px 1fr 60px 1fr;

    align-items:start;

}


/*=========================================
STEP
=========================================*/

.process-step{

    position:relative;

    text-align:center;

}

.step-number{

    position:absolute;

    top:-10px;

    left:50%;

    transform:translateX(-50%);

    width:34px;

    height:34px;

    border-radius:50%;

    background:#1649D0;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:13px;

    font-weight:700;

    z-index:5;

}


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

.step-icon{

    width:140px;

    height:140px;

    margin:18px auto 28px;

    background:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    border:1px solid #EDF2F7;

    box-shadow:

    0 12px 30px rgba(15,23,42,.08);

    transition:.35s;

}

.step-icon i{

    font-size:48px;

    color:#1649D0;

}

.process-step:hover .step-icon{

    transform:translateY(-8px);

}


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

.process-step h3{

    font-size:24px;

    font-weight:700;

    color:#101828;

    margin-bottom:15px;

}

.process-step p{

    max-width:220px;

    margin:auto;

    font-size:15px;

    color:#667085;

    line-height:1.8;

}


/*=========================================
LINE
=========================================*/

.process-line{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:82px;

    position:relative;

}

.process-line::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:50%;

    transform:translateY(-50%);

    border-top:2px dashed #BFD4FF;

}

.process-line i{

    position:relative;

    z-index:2;

    background:#fff;

    color:#1649D0;

    font-size:24px;

}


/*=========================================
HOVER
=========================================*/

.process-step:hover h3{

    color:#1649D0;

}

.process-step{

    transition:.35s;

}

/*=========================================
PROCESS SECTION
Responsive
=========================================*/

@media (max-width:1200px){

    .process-wrapper{

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

        gap:50px 30px;

    }

    .process-line{

        display:none;

    }

}

@media (max-width:991px){

    .process-section{

        padding:70px 20px;

    }

    .process-header{

        margin-bottom:50px;

    }

    .process-header h2{

        font-size:40px;

    }

    .process-header p{

        font-size:16px;

    }

    .step-icon{

        width:120px;

        height:120px;

    }

    .step-icon i{

        font-size:42px;

    }

    .process-step h3{

        font-size:21px;

    }

}

@media (max-width:768px){

    .process-wrapper{

        grid-template-columns:1fr;

        gap:45px;

    }

    .process-header h2{

        font-size:34px;

    }

    .process-header p{

        font-size:15px;

    }

    .step-icon{

        width:110px;

        height:110px;

        margin-bottom:22px;

    }

    .step-icon i{

        font-size:38px;

    }

    .process-step h3{

        font-size:20px;

    }

    .process-step p{

        max-width:300px;

    }

}

@media (max-width:576px){

    .process-section{

        padding:60px 20px;

    }

    .process-header{

        margin-bottom:40px;

    }

    .process-tag{

        font-size:12px;

    }

    .process-header h2{

        font-size:30px;

    }

    .step-number{

        width:30px;

        height:30px;

        font-size:12px;

    }

    .step-icon{

        width:95px;

        height:95px;

    }

    .step-icon i{

        font-size:34px;

    }

    .process-step h3{

        font-size:18px;

    }

    .process-step p{

        font-size:14px;

        line-height:1.7;

    }

}

/*=========================================
PACKING SECTION
=========================================*/

.packing-section{

    padding:90px 20px;

    background:#F8FAFD;

    position:relative;

    overflow:hidden;

}

.packing-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.packing-tag{

    display:inline-block;

    color:#1649D0;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.packing-header h2{

    font-size:46px;

    font-weight:800;

    color:#101828;

    line-height:1.2;

    margin-bottom:18px;

}

.packing-header h2 span{

    display:block;

}

.packing-header p{

    font-size:17px;

    line-height:1.8;

    color:#667085;

}


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

.packing-grid{

    display:grid;

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

    gap:24px;

    margin-bottom:40px;

}


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

.packing-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    border:1px solid #EDF2F7;

    box-shadow:

    0 10px 28px rgba(15,23,42,.05);

    transition:.35s;

}

.packing-card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 22px 50px rgba(15,23,42,.10);

}


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

.packing-card img{

    width:100%;

    height:180px;

    object-fit:cover;

    display:block;

    transition:.5s;

}

.packing-card:hover img{

    transform:scale(1.06);

}


/*=========================================
CONTENT
=========================================*/

.packing-content{

    padding:22px;

    text-align:center;

}

.packing-content h3{

    font-size:20px;

    font-weight:700;

    color:#101828;

    margin-bottom:10px;

}

.packing-content p{

    font-size:15px;

    line-height:1.7;

    color:#667085;

}


/*=========================================
BOTTOM NOTE
=========================================*/

.packing-note{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:22px;

    padding:26px 35px;

    background:#F3F7FF;

    border:1px solid #D9E5FF;

    border-radius:20px;

}

.packing-note-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#1649D0;

    font-size:30px;

    box-shadow:

    0 8px 22px rgba(15,23,42,.05);

}

.packing-note h3{

    font-size:34px;

    font-weight:700;

    color:#101828;

    line-height:1.35;

}


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

@media(max-width:1200px){

    .packing-grid{

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

    }

}

@media(max-width:768px){

    .packing-section{

        padding:70px 20px;

    }

    .packing-header{

        margin-bottom:40px;

    }

    .packing-header h2{

        font-size:34px;

    }

    .packing-header p{

        font-size:15px;

    }

    .packing-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .packing-card img{

        height:220px;

    }

    .packing-note{

        flex-direction:column;

        text-align:center;

        padding:24px;

    }

    .packing-note h3{

        font-size:24px;

    }

}

@media(max-width:576px){

    .packing-note-icon{

        width:60px;

        height:60px;

        font-size:24px;

    }

    .packing-note h3{

        font-size:20px;

    }

}

/*=========================================
TESTIMONIAL SECTION
=========================================*/

.testimonial-section{

    padding:90px 20px;

    background:#FFFFFF;

    position:relative;

    overflow:hidden;

}


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

.testimonial-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.testimonial-tag{

    display:inline-block;

    margin-bottom:18px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#1649D0;

}

.testimonial-header h2{

    font-size:46px;

    font-weight:800;

    line-height:1.2;

    color:#101828;

    margin-bottom:18px;

}

.testimonial-header h2 span{

    display:block;

}

.testimonial-header p{

    font-size:17px;

    line-height:1.8;

    color:#667085;

}


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

.testimonial-grid{

    display:grid;

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

    gap:28px;

}


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

.testimonial-card{

    background:#fff;

    border:1px solid #EDF2F7;

    border-radius:20px;

    padding:30px;

    box-shadow:

        0 10px 30px rgba(15,23,42,.05);

    transition:.35s;

}

.testimonial-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 22px 50px rgba(15,23,42,.10);

}


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

.testimonial-top{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:22px;

}

.testimonial-top img{

    width:72px;

    height:72px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #EEF4FF;

}

.testimonial-top h3{

    font-size:20px;

    font-weight:700;

    color:#101828;

    margin-bottom:4px;

}

.testimonial-top span{

    font-size:14px;

    color:#667085;

}


/*=========================================
RATING
=========================================*/

.testimonial-rating{

    display:flex;

    gap:5px;

    margin-bottom:18px;

}

.testimonial-rating i{

    color:#FFC107;

    font-size:17px;

}


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

.testimonial-card p{

    font-size:15px;

    line-height:1.9;

    color:#667085;

}


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

@media(max-width:1200px){

    .testimonial-grid{

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

    }

}

@media(max-width:768px){

    .testimonial-section{

        padding:70px 20px;

    }

    .testimonial-header{

        margin-bottom:40px;

    }

    .testimonial-header h2{

        font-size:34px;

    }

    .testimonial-header p{

        font-size:15px;

    }

    .testimonial-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .testimonial-card{

        padding:24px;

    }

    .testimonial-top img{

        width:64px;

        height:64px;

    }

    .testimonial-top h3{

        font-size:18px;

    }

}

@media(max-width:576px){

    .testimonial-card{

        padding:20px;

    }

    .testimonial-top{

        gap:14px;

    }

    .testimonial-top img{

        width:58px;

        height:58px;

    }

    .testimonial-rating i{

        font-size:15px;

    }

    .testimonial-card p{

        font-size:14px;

    }

}

/*=========================================
FAQ SECTION
=========================================*/

.faq-section{

    padding:90px 20px;

    background:#F8FAFD;

    position:relative;

    overflow:hidden;

}


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

.faq-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.faq-tag{

    display:inline-block;

    margin-bottom:18px;

    color:#1649D0;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.faq-header h2{

    font-size:46px;

    font-weight:800;

    color:#101828;

    line-height:1.2;

    margin-bottom:18px;

}

.faq-header h2 span{

    display:block;

}

.faq-header p{

    max-width:650px;

    margin:auto;

    font-size:17px;

    line-height:1.8;

    color:#667085;

}


/*=========================================
WRAPPER
=========================================*/

.faq-wrapper{

    max-width:900px;

    margin:auto;

}


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

.faq-item{

    background:#FFFFFF;

    border:1px solid #E9EEF6;

    border-radius:18px;

    margin-bottom:18px;

    overflow:hidden;

    box-shadow:

        0 8px 24px rgba(15,23,42,.05);

    transition:.35s;

}

.faq-item:hover{

    transform:translateY(-3px);

    box-shadow:

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

}


/*=========================================
QUESTION
=========================================*/

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:24px 28px;

    border:none;

    background:transparent;

    cursor:pointer;

    text-align:left;

    font-size:19px;

    font-weight:700;

    color:#101828;

}

.faq-question span{

    flex:1;

}

.faq-question i{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#EEF4FF;

    color:#1649D0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:16px;

    transition:.35s;

}


/*=========================================
ANSWER
=========================================*/

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.faq-answer p{

    padding:0 28px 24px;

    font-size:16px;

    line-height:1.9;

    color:#667085;

}


/*=========================================
ACTIVE
=========================================*/

.faq-item.active{

    border-color:#1649D0;

}

.faq-item.active .faq-question i{

    background:#1649D0;

    color:#FFFFFF;

    transform:rotate(45deg);

}

.faq-item.active .faq-answer{

    max-height:250px;

}


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

@media(max-width:768px){

    .faq-section{

        padding:70px 20px;

    }

    .faq-header{

        margin-bottom:40px;

    }

    .faq-header h2{

        font-size:34px;

    }

    .faq-header p{

        font-size:15px;

    }

    .faq-question{

        padding:20px;

        font-size:17px;

    }

    .faq-answer p{

        padding:0 20px 20px;

        font-size:15px;

    }

    .faq-question i{

        width:38px;

        height:38px;

        font-size:14px;

    }

}


@media(max-width:576px){

    .faq-header h2{

        font-size:30px;

    }

    .faq-question{

        font-size:16px;

    }

    .faq-answer p{

        font-size:14px;

        line-height:1.8;

    }

}
/*=========================================
GOOGLE REVIEW STRIP
=========================================*/

.google-review-section{

    padding:40px 20px 90px;

    background:#F8FAFD;

}

.google-review-strip{

    background:#FFFFFF;

    border:1px solid #E9EEF6;

    border-radius:22px;

    padding:26px 38px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:35px;

    box-shadow:
    0 10px 35px rgba(15,23,42,.05);

}


/*=========================================
GOOGLE BRAND
=========================================*/

.google-brand{

    display:flex;

    align-items:center;

    gap:18px;

}

.google-brand img{

    width:64px;

    height:64px;

    object-fit:contain;

}

.google-brand-text h3{

    font-size:24px;

    font-weight:700;

    color:#101828;

    line-height:1;

    margin-bottom:6px;

}

.google-brand-text span{

    font-size:24px;

    font-weight:500;

    color:#374151;

}


/*=========================================
DIVIDER
=========================================*/

.review-divider{

    width:1px;

    height:70px;

    background:#E5E7EB;

}


/*=========================================
RATING
=========================================*/

.google-rating h2{

    font-size:68px;

    font-weight:800;

    color:#101828;

    line-height:1;

}

.google-rating h2 span{

    font-size:34px;

    font-weight:700;

}


/*=========================================
STARS
=========================================*/

.google-stars{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.stars{

    display:flex;

    gap:6px;

}

.stars i{

    color:#FDBA12;

    font-size:22px;

}

.google-stars p{

    font-size:17px;

    color:#374151;

    font-weight:500;

}


/*=========================================
BUTTON
=========================================*/

.google-review-btn{

    min-width:250px;

    height:62px;

    background:#1649D0;

    color:#FFFFFF;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    text-decoration:none;

    font-size:17px;

    font-weight:600;

    transition:.35s;

}

.google-review-btn:hover{

    background:#103BA9;

    transform:translateY(-4px);

    box-shadow:
    0 15px 30px rgba(22,73,208,.25);

}

.google-review-btn i{

    transition:.35s;

}

.google-review-btn:hover i{

    transform:translateX(6px);

}


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

@media(max-width:1200px){

    .google-review-strip{

        flex-wrap:wrap;

        justify-content:center;

        text-align:center;

    }

    .review-divider{

        display:none;

    }

}

@media(max-width:768px){

    .google-review-section{

        padding:30px 20px 70px;

    }

    .google-review-strip{

        padding:28px 24px;

        flex-direction:column;

        gap:24px;

    }

    .google-brand{

        justify-content:center;

    }

    .google-rating h2{

        font-size:54px;

    }

    .google-rating h2 span{

        font-size:26px;

    }

    .google-brand-text h3,

    .google-brand-text span{

        font-size:22px;

    }

    .google-stars{

        align-items:center;

    }

    .google-review-btn{

        width:100%;

        min-width:100%;

    }

}

@media(max-width:576px){

    .google-brand img{

        width:54px;

        height:54px;

    }

    .google-rating h2{

        font-size:46px;

    }

    .google-stars p{

        font-size:15px;

    }

    .google-review-btn{

        height:56px;

        font-size:16px;

    }

}

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

.final-cta-section{

    padding:90px 20px;

    background:#F8FAFD;

}

.final-cta-wrapper{

    position:relative;

    overflow:hidden;

    display:grid;

    grid-template-columns:1.2fr .95fr;

    gap:60px;

    align-items:center;

    padding:55px 60px;

    border-radius:28px;

    background:linear-gradient(135deg,#1649D0 0%,#0F55E8 55%,#1649D0 100%);

    box-shadow:
    0 25px 60px rgba(22,73,208,.20);

}


/*=========================================
BACKGROUND IMAGE
=========================================*/

.final-cta-wrapper::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:38%;

    height:100%;

    background:url("../images/final-cta-bg.webp") center/cover;

    opacity:.22;

}

.final-cta-wrapper::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
    90deg,
    rgba(22,73,208,.96),
    rgba(22,73,208,.88),
    rgba(22,73,208,.65),
    rgba(22,73,208,.10));

}


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

.final-cta-content{

    position:relative;

    z-index:2;

    color:#fff;

}

.final-cta-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:40px;

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

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

    font-size:13px;

    font-weight:700;

    letter-spacing:.8px;

    margin-bottom:26px;

}

.final-cta-content h2{

    font-size:58px;

    line-height:1.1;

    font-weight:800;

    margin-bottom:22px;

}

.final-cta-content h2 span{

    display:block;

}

.final-cta-content p{

    max-width:600px;

    font-size:18px;

    line-height:1.8;

    color:rgba(255,255,255,.90);

    margin-bottom:45px;

}


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

.final-cta-features{

    display:flex;

    flex-wrap:wrap;

    gap:24px;

}

.cta-feature{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:12px;

    color:#fff;

}

.cta-feature-icon{

    width:58px;

    height:58px;

    border-radius:50%;

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

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

    display:flex;

    justify-content:center;

    align-items:center;

}

.cta-feature-icon i{

    font-size:22px;

}

.cta-feature span{

    font-size:14px;

    line-height:1.5;

}


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

.final-cta-card{

    position:relative;

    z-index:2;

    background:#fff;

    border-radius:24px;

    padding:35px;

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

}

.final-cta-card h3{

    text-align:center;

    font-size:34px;

    color:#111827;

    font-weight:700;

    margin-bottom:28px;

}


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

.cta-call-btn,
.cta-whatsapp-btn,
.cta-estimate-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    width:100%;

    height:62px;

    border-radius:12px;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    margin-bottom:16px;

    transition:.35s;

}

.cta-call-btn{

    background:#FF6B00;

    color:#fff;

}

.cta-call-btn:hover{

    background:#F15F00;

}

.cta-whatsapp-btn{

    background:#16A34A;

    color:#fff;

}

.cta-whatsapp-btn:hover{

    background:#15803D;

}

.cta-estimate-btn{

    border:2px solid #D7DCE5;

    color:#111827;

    background:#fff;

}

.cta-estimate-btn:hover{

    border-color:#1649D0;

    color:#1649D0;

}


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

.cta-card-bottom{

    display:flex;

    justify-content:space-between;

    gap:25px;

    margin-top:22px;

    padding-top:22px;

    border-top:1px solid #EEF2F7;

}

.cta-rating,
.cta-response{

    display:flex;

    gap:12px;

    align-items:flex-start;

}

.cta-stars{

    display:flex;

    gap:3px;

}

.cta-stars i{

    color:#F5B301;

    font-size:14px;

}

.cta-rating span,
.cta-response span{

    font-size:13px;

    line-height:1.5;

    color:#667085;

}

.cta-rating strong,
.cta-response strong{

    display:block;

    color:#111827;

}

.cta-response i{

    color:#1649D0;

    margin-top:2px;

}


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

@media(max-width:1200px){

    .final-cta-wrapper{

        grid-template-columns:1fr;

        gap:40px;

    }

}

@media(max-width:768px){

    .final-cta-section{

        padding:70px 20px;

    }

    .final-cta-wrapper{

        padding:35px 25px;

    }

    .final-cta-content{

        text-align:center;

    }

    .final-cta-content h2{

        font-size:36px;

    }

    .final-cta-content p{

        font-size:15px;

        margin:0 auto 35px;

    }

    .final-cta-features{

        justify-content:center;

    }

    .final-cta-card{

        padding:25px;

    }

    .final-cta-card h3{

        font-size:26px;

    }

    .cta-card-bottom{

        flex-direction:column;

        gap:20px;

    }

}
/*=========================================
CONTACT WRAPPER
=========================================*/

.contact-wrapper{

    display:grid;

    grid-template-columns:1.25fr .95fr;

    gap:35px;

    align-items:start;

}


/*=========================================
MAP
=========================================*/

.map-card{

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:24px;

    border:1px solid #E9EEF6;

    box-shadow:

        0 12px 35px rgba(15,23,42,.05);

}

.map-card iframe{

    width:100%;

    height:650px;

    border:none;

    display:block;

}


/*=========================================
FLOATING GOOGLE CARD
=========================================*/

.map-info-card{

    position:absolute;

    top:25px;

    left:25px;

    width:280px;

    background:#fff;

    border-radius:18px;

    padding:22px;

    box-shadow:

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

}

.map-info-card h3{

    font-size:26px;

    color:#101828;

    font-weight:700;

    margin-bottom:15px;

}

.map-rating{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:15px;

}

.map-rating strong{

    font-size:18px;

    color:#111827;

}

.map-stars{

    display:flex;

    gap:3px;

}

.map-stars i{

    color:#F5B301;

    font-size:15px;

}

.map-rating small{

    color:#667085;

}

.map-info-card p{

    color:#667085;

    line-height:1.8;

    margin-bottom:18px;

}

.map-info-card a{

    display:flex;

    align-items:center;

    gap:12px;

    height:52px;

    padding:0 18px;

    margin-bottom:12px;

    border-radius:12px;

    border:1px solid #E8EDF5;

    text-decoration:none;

    color:#1649D0;

    font-weight:600;

    transition:.35s;

}

.map-info-card a:hover{

    background:#1649D0;

    color:#fff;

}



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

.office-card{

    background:#fff;

    border-radius:24px;

    border:1px solid #E9EEF6;

    padding:35px;

    box-shadow:

        0 12px 35px rgba(15,23,42,.05);

}

.office-item{

    display:flex;

    gap:18px;

    margin-bottom:28px;

}

.office-icon{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#EEF4FF;

    color:#1649D0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    flex-shrink:0;

}

.office-item h4{

    font-size:20px;

    font-weight:700;

    color:#111827;

    margin-bottom:8px;

}

.office-item p,

.office-item a{

    color:#667085;

    line-height:1.8;

    text-decoration:none;

}



/*=========================================
BADGES
=========================================*/

.office-badges{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:30px 0;

}

.office-badges span{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 14px;

    background:#F8FAFD;

    border-radius:30px;

    border:1px solid #E8EDF5;

    font-size:14px;

    font-weight:500;

}

.office-badges i{

    color:#1649D0;

}



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

.office-action{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

    margin-bottom:18px;

}

.office-call-btn,

.office-whatsapp-btn{

    height:58px;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#fff;

    font-size:17px;

    font-weight:700;

    transition:.35s;

}

.office-call-btn{

    background:#FF6B00;

}

.office-call-btn:hover{

    background:#F05A00;

}

.office-whatsapp-btn{

    background:#16A34A;

}

.office-whatsapp-btn:hover{

    background:#15803D;

}

.office-direction-btn{

    height:58px;

    border-radius:12px;

    border:2px solid #D7DCE5;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#111827;

    font-weight:700;

    transition:.35s;

}

.office-direction-btn:hover{

    border-color:#1649D0;

    color:#1649D0;

}



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

@media(max-width:1200px){

    .contact-wrapper{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .contact-section{

        padding:70px 20px;

    }

    .map-card iframe{

        height:420px;

    }

    .map-info-card{

        position:relative;

        width:calc(100% - 40px);

        top:auto;

        left:auto;

        margin:20px;

    }

    .office-card{

        padding:25px;

    }

    .office-action{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    .office-item{

        gap:14px;

    }

    .office-icon{

        width:46px;

        height:46px;

        font-size:18px;

    }

    .office-item h4{

        font-size:18px;

    }

    .office-badges{

        gap:10px;

    }

    .office-badges span{

        width:100%;

        justify-content:center;

    }

}

/*=========================================
SERVICE AREA SECTION
=========================================*/

.service-area-section{

    padding:90px 20px;

    background:#F8FAFD;

    position:relative;

    overflow:hidden;

}

.service-area-section::before{

    content:"";

    position:absolute;

    top:-200px;

    left:-200px;

    width:500px;

    height:500px;

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

    pointer-events:none;

}

.service-area-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:450px;

    height:450px;

    background:radial-gradient(circle,rgba(22,73,208,.05),transparent 70%);

    pointer-events:none;

}


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

.service-area-header{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.service-area-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#1649D0;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.service-area-tag i{

    font-size:12px;

}

.service-area-header h2{

    font-size:52px;

    line-height:1.15;

    font-weight:800;

    color:#101828;

    margin-bottom:18px;

}

.service-area-header h2 span{

    display:block;

}

.service-area-header p{

    max-width:720px;

    margin:auto;

    font-size:17px;

    line-height:1.8;

    color:#667085;

}


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

.service-area-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:22px;

}


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

.service-area-card{

    background:#FFFFFF;

    border:1px solid #E8EDF5;

    border-radius:18px;

    padding:24px;

    display:flex;

    align-items:flex-start;

    gap:16px;

    transition:.35s;

    box-shadow:

    0 8px 25px rgba(15,23,42,.04);

}

.service-area-card:hover{

    transform:translateY(-6px);

    border-color:#1649D0;

    box-shadow:

    0 18px 40px rgba(15,23,42,.08);

}


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

.service-area-card i{

    font-size:24px;

    color:#1649D0;

    margin-top:3px;

    flex-shrink:0;

}


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

.service-area-card h3{

    font-size:20px;

    font-weight:700;

    color:#101828;

    margin-bottom:8px;

}

.service-area-card p{

    font-size:15px;

    line-height:1.7;

    color:#667085;

}


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

@media(max-width:1200px){

    .service-area-grid{

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

    }

}

@media(max-width:991px){

    .service-area-grid{

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

    }

    .service-area-header h2{

        font-size:40px;

    }

}

@media(max-width:768px){

    .service-area-section{

        padding:70px 20px;

    }

    .service-area-header{

        margin-bottom:40px;

    }

    .service-area-header h2{

        font-size:34px;

    }

    .service-area-header p{

        font-size:15px;

    }

}

@media(max-width:576px){

    .service-area-grid{

        grid-template-columns:1fr;

    }

    .service-area-card{

        padding:20px;

    }

    .service-area-card h3{

        font-size:18px;

    }

    .service-area-card p{

        font-size:14px;

    }

}

/*=========================================
LOCAL TRUST SECTION
=========================================*/

.local-trust-section{

    padding:90px 20px;

    background:#FFFFFF;

    overflow:hidden;

}

.local-trust-wrapper{

    display:grid;

    grid-template-columns:1.15fr .95fr;

    gap:60px;

    align-items:center;

}


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

.local-trust-image{

    position:relative;

}

.local-trust-image img{

    width:100%;

    display:block;

    border-radius:22px;

    object-fit:cover;

    box-shadow:

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

}


/*=========================================
CONTENT
=========================================*/

.local-trust-content{

    max-width:560px;

}

.local-trust-tag{

    display:inline-block;

    margin-bottom:18px;

    color:#1649D0;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.local-trust-content h2{

    font-size:52px;

    font-weight:800;

    line-height:1.15;

    color:#101828;

    margin-bottom:22px;

}

.local-trust-content h2 span{

    display:block;

}

.local-trust-content p{

    font-size:17px;

    line-height:1.9;

    color:#667085;

    margin-bottom:35px;

}


/*=========================================
CHECK LIST
=========================================*/

.local-trust-list{

    display:grid;

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

    gap:18px 35px;

}

.trust-point{

    display:flex;

    align-items:center;

    gap:12px;

}

.trust-point i{

    color:#1649D0;

    font-size:18px;

    flex-shrink:0;

}

.trust-point span{

    font-size:17px;

    font-weight:500;

    color:#101828;

}


/*=========================================
HOVER
=========================================*/

.local-trust-image img{

    transition:.45s;

}

.local-trust-image:hover img{

    transform:scale(1.02);

}


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

@media(max-width:1200px){

    .local-trust-wrapper{

        gap:40px;

    }

}

@media(max-width:991px){

    .local-trust-wrapper{

        grid-template-columns:1fr;

    }

    .local-trust-content{

        max-width:100%;

    }

}

@media(max-width:768px){

    .local-trust-section{

        padding:70px 20px;

    }

    .local-trust-content{

        text-align:center;

    }

    .local-trust-content h2{

        font-size:36px;

    }

    .local-trust-content p{

        font-size:15px;

    }

    .local-trust-list{

        grid-template-columns:1fr;

        text-align:left;

    }

}

@media(max-width:576px){

    .local-trust-content h2{

        font-size:30px;

    }

    .trust-point span{

        font-size:15px;

    }

}

/*=========================================
BOTTOM CTA SECTION
=========================================*/

.bottom-cta-section{

    padding:90px 20px;

    background:#F8FAFD;

}

.bottom-cta-wrapper{

    background:linear-gradient(135deg,#1148D4 0%,#0F56E9 100%);

    border-radius:24px;

    padding:45px;

    overflow:hidden;

    position:relative;

    box-shadow:
    0 20px 60px rgba(17,72,212,.18);

}


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

.bottom-cta-wrapper::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:320px;

    height:320px;

    border-radius:50%;

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

    transform:translate(35%,-35%);

}


/*=========================================
CONTENT
=========================================*/

.bottom-cta-content{

    width:34%;

    float:left;

}

.bottom-cta-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#FFFFFF;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.bottom-cta-tag i{

    font-size:11px;

}

.bottom-cta-content h2{

    color:#fff;

    font-size:54px;

    line-height:1.15;

    font-weight:800;

    margin-bottom:18px;

}

.bottom-cta-content h2 span{

    display:block;

}

.bottom-cta-content p{

    color:rgba(255,255,255,.92);

    font-size:18px;

    line-height:1.8;

}


/*=========================================
STATS
=========================================*/

.bottom-cta-stats{

    width:62%;

    float:right;

    display:grid;

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

}

.bottom-stat{

    text-align:center;

    padding:0 25px;

    border-left:1px solid rgba(255,255,255,.15);

}

.bottom-stat:first-child{

    border-left:none;

}

.bottom-stat i{

    color:#fff;

    font-size:34px;

    margin-bottom:18px;

}

.bottom-stat h3{

    color:#fff;

    font-size:44px;

    font-weight:800;

    margin-bottom:10px;

}

.bottom-stat span{

    color:rgba(255,255,255,.92);

    font-size:16px;

    line-height:1.6;

}


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

.bottom-cta-buttons{

    clear:both;

    display:grid;

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

    gap:18px;

    margin-top:45px;

}

.bottom-call-btn,

.bottom-whatsapp-btn,

.bottom-quote-btn{

    height:66px;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    text-decoration:none;

    font-size:19px;

    font-weight:700;

    transition:.35s;

}

.bottom-call-btn{

    background:#FF6A00;

    color:#fff;

}

.bottom-call-btn:hover{

    background:#F15D00;

}

.bottom-whatsapp-btn{

    background:#16A34A;

    color:#fff;

}

.bottom-whatsapp-btn:hover{

    background:#15803D;

}

.bottom-quote-btn{

    background:#fff;

    color:#1649D0;

}

.bottom-quote-btn:hover{

    background:#F8FAFD;

}


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

.bottom-cta-info{

    margin-top:28px;

    padding-top:22px;

    border-top:1px solid rgba(255,255,255,.15);

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.bottom-review{

    display:flex;

    align-items:center;

    gap:16px;

}

.bottom-stars{

    display:flex;

    gap:5px;

}

.bottom-stars i{

    color:#FFC72C;

}

.bottom-review span{

    color:#fff;

    font-size:16px;

}

.bottom-response{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-size:16px;

}

.bottom-response i{

    font-size:18px;

}


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

@media(max-width:1200px){

    .bottom-cta-content,

    .bottom-cta-stats{

        width:100%;

        float:none;

    }

    .bottom-cta-stats{

        margin-top:45px;

    }

}

@media(max-width:991px){

    .bottom-cta-stats{

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

        gap:35px;

    }

    .bottom-stat{

        border:none;

    }

    .bottom-cta-buttons{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .bottom-cta-section{

        padding:70px 20px;

    }

    .bottom-cta-wrapper{

        padding:30px;

    }

    .bottom-cta-content{

        text-align:center;

    }

    .bottom-cta-content h2{

        font-size:36px;

    }

    .bottom-cta-content p{

        font-size:15px;

    }

    .bottom-cta-info{

        flex-direction:column;

        gap:18px;

        text-align:center;

    }

}

@media(max-width:576px){

    .bottom-cta-stats{

        grid-template-columns:1fr;

    }

    .bottom-stat h3{

        font-size:34px;

    }

    .bottom-stat i{

        font-size:28px;

    }

}

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

.footer-section{

    background:#FFFFFF;

    padding:70px 20px 0;

    border-top:1px solid #EEF2F7;

}

.footer-wrapper{

    display:grid;

    grid-template-columns:1.25fr .9fr 1fr .95fr;

    gap:40px;

    padding-bottom:40px;

}


/*=========================================
COLUMN DIVIDER
=========================================*/

.footer-company,
.footer-links,
.footer-contact{

    border-right:1px solid #E8EDF5;

    padding-right:35px;

}


/*=========================================
LOGO
=========================================*/

.footer-logo{

    display:inline-block;

    margin-bottom:20px;

}

.footer-logo img{

    max-width:180px;

    display:block;

}

.footer-company h3{

    font-size:28px;

    color:#1649D0;

    font-weight:700;

    margin-bottom:18px;

}

.footer-company p{

    color:#667085;

    font-size:15px;

    line-height:1.9;

    margin-bottom:28px;

}


/*=========================================
SOCIAL
=========================================*/

.footer-social{

    display:flex;

    gap:12px;

}

.footer-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#F4F7FD;

    color:#1649D0;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    transition:.35s;

}

.footer-social a:hover{

    background:#1649D0;

    color:#FFFFFF;

    transform:translateY(-4px);

}


/*=========================================
HEADINGS
=========================================*/

.footer-links h3,
.footer-contact h3,
.footer-trust h3{

    font-size:24px;

    font-weight:700;

    color:#101828;

    margin-bottom:24px;

}


/*=========================================
LISTS
=========================================*/

.footer-links ul,
.footer-contact ul,
.footer-trust ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-links li,
.footer-contact li,
.footer-trust li{

    margin-bottom:18px;

}

.footer-links a{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:#475467;

    transition:.3s;

}

.footer-links a:hover{

    color:#1649D0;

    padding-left:6px;

}

.footer-links i{

    color:#1649D0;

    font-size:12px;

}


/*=========================================
CONTACT
=========================================*/

.footer-contact li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    color:#475467;

    line-height:1.8;

}

.footer-contact li i{

    color:#1649D0;

    margin-top:5px;

    flex-shrink:0;

}

.footer-contact a{

    text-decoration:none;

    color:#475467;

}

.footer-contact strong{

    display:block;

    color:#101828;

}


/*=========================================
TRUST
=========================================*/

.footer-trust li{

    display:flex;

    align-items:center;

    gap:12px;

    color:#475467;

}

.footer-trust i{

    color:#1649D0;

}


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

.footer-bottom{

    border-top:1px solid #E8EDF5;

    padding:20px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.footer-bottom p{

    margin:0;

    font-size:14px;

    color:#667085;

}

.footer-bottom span{

    margin:0 10px;

    color:#D0D5DD;

}


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

@media(max-width:1200px){

    .footer-wrapper{

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

        gap:45px;

    }

    .footer-company,
    .footer-links{

        border-right:none;

        padding-right:0;

    }

}

@media(max-width:768px){

    .footer-section{

        padding:60px 20px 0;

    }

    .footer-wrapper{

        grid-template-columns:1fr;

        gap:35px;

    }

    .footer-company,
    .footer-links,
    .footer-contact{

        border-right:none;

        padding-right:0;

        border-bottom:1px solid #EEF2F7;

        padding-bottom:30px;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}

@media(max-width:576px){

    .footer-logo img{

        max-width:150px;

    }

    .footer-company h3{

        font-size:24px;

    }

    .footer-links h3,
    .footer-contact h3,
    .footer-trust h3{

        font-size:22px;

    }

    .footer-social{

        justify-content:center;

    }

}

/*=========================================
THANK YOU PAGE
=========================================*/

body{

    margin:0;

    font-family:'Inter',sans-serif;

    background:#F5F8FE;

}

.thankyou-section{

    min-height:100vh;

    padding:40px 20px;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    overflow:hidden;

    background:
    radial-gradient(circle at top left,
    rgba(22,73,208,.10),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(22,73,208,.08),
    transparent 35%),

    #F8FAFD;

}

.thankyou-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:

    radial-gradient(circle,
    rgba(22,73,208,.08),
    transparent 70%);

    top:-250px;

    right:-250px;

    border-radius:50%;

}

.thankyou-section::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    background:

    radial-gradient(circle,
    rgba(255,106,0,.08),
    transparent 70%);

    left:-180px;

    bottom:-180px;

    border-radius:50%;

}



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

.thankyou-card{

    position:relative;

    z-index:2;

    width:100%;

    max-width:760px;

    background:#FFFFFF;

    border-radius:30px;

    padding:60px;

    text-align:center;

    border:1px solid #E8EDF5;

    box-shadow:

    0 30px 80px rgba(15,23,42,.08);

}



/*=========================================
SUCCESS ICON
=========================================*/

.thankyou-icon{

    width:110px;

    height:110px;

    margin:auto;

    border-radius:50%;

    background:#EEF6FF;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

    animation:successPulse 2s infinite;

}

.thankyou-icon i{

    color:#16A34A;

    font-size:56px;

}

@keyframes successPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}



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

.thankyou-tag{

    display:inline-block;

    padding:10px 20px;

    border-radius:30px;

    background:#EEF4FF;

    color:#1649D0;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:22px;

}

.thankyou-card h1{

    font-size:60px;

    color:#101828;

    font-weight:800;

    margin:0;

}

.thankyou-card h2{

    font-size:34px;

    line-height:1.3;

    color:#101828;

    margin:18px 0 25px;

}

.thankyou-card h2 span{

    display:block;

}

.thankyou-card p{

    max-width:620px;

    margin:0 auto;

    font-size:17px;

    line-height:1.9;

    color:#667085;

}



/*=========================================
STEPS
=========================================*/

.thankyou-steps{

    display:grid;

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

    gap:22px;

    margin:50px 0;

}

.thank-step{

    background:#F8FAFD;

    border:1px solid #E8EDF5;

    border-radius:18px;

    padding:28px;

}

.step-icon{

    width:58px;

    height:58px;

    margin:auto auto 18px;

    border-radius:50%;

    background:#1649D0;

    display:flex;

    justify-content:center;

    align-items:center;

}

.step-icon i{

    color:#FFFFFF;

    font-size:22px;

}

.thank-step span{

    display:block;

    color:#667085;

    line-height:1.7;

}

.thank-step strong{

    display:block;

    color:#101828;

}



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

.thankyou-buttons{

    display:flex;

    gap:18px;

    justify-content:center;

    margin-bottom:35px;

}

.thank-call-btn,

.thank-whatsapp-btn{

    min-width:220px;

    height:60px;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#FFFFFF;

    font-size:18px;

    font-weight:700;

    transition:.35s;

}

.thank-call-btn{

    background:#FF6A00;

}

.thank-call-btn:hover{

    background:#F15C00;

}

.thank-whatsapp-btn{

    background:#16A34A;

}

.thank-whatsapp-btn:hover{

    background:#15803D;

}



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

.thankyou-footer{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    color:#667085;

    font-size:16px;

}

.thankyou-footer i{

    color:#1649D0;

}

#countdown{

    color:#1649D0;

    font-weight:700;

}



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

@media(max-width:768px){

    .thankyou-card{

        padding:35px 25px;

    }

    .thankyou-card h1{

        font-size:42px;

    }

    .thankyou-card h2{

        font-size:26px;

    }

    .thankyou-card p{

        font-size:15px;

    }

    .thankyou-steps{

        grid-template-columns:1fr;

    }

    .thankyou-buttons{

        flex-direction:column;

    }

    .thank-call-btn,

    .thank-whatsapp-btn{

        width:100%;

    }

}

@media(max-width:576px){

    .thankyou-icon{

        width:90px;

        height:90px;

    }

    .thankyou-icon i{

        font-size:46px;

    }

    .thankyou-card h1{

        font-size:36px;

    }

}


.thankyou-section{

    min-height:100vh;

    padding:40px 20px;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    overflow:hidden;

    background:
    radial-gradient(circle at top left,
    rgba(22,73,208,.10),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(22,73,208,.08),
    transparent 35%),

    #F8FAFD;

}

.thankyou-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:

    radial-gradient(circle,
    rgba(22,73,208,.08),
    transparent 70%);

    top:-250px;

    right:-250px;

    border-radius:50%;

}

.thankyou-section::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    background:

    radial-gradient(circle,
    rgba(255,106,0,.08),
    transparent 70%);

    left:-180px;

    bottom:-180px;

    border-radius:50%;

}



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

.thankyou-card{

    position:relative;

    z-index:2;

    width:100%;

    max-width:760px;

    background:#FFFFFF;

    border-radius:30px;

    padding:60px;

    text-align:center;

    border:1px solid #E8EDF5;

    box-shadow:

    0 30px 80px rgba(15,23,42,.08);

}



/*=========================================
SUCCESS ICON
=========================================*/

.thankyou-icon{

    width:110px;

    height:110px;

    margin:auto;

    border-radius:50%;

    background:#EEF6FF;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

    animation:successPulse 2s infinite;

}

.thankyou-icon i{

    color:#16A34A;

    font-size:56px;

}

@keyframes successPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}



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

.thankyou-tag{

    display:inline-block;

    padding:10px 20px;

    border-radius:30px;

    background:#EEF4FF;

    color:#1649D0;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:22px;

}

.thankyou-card h1{

    font-size:60px;

    color:#101828;

    font-weight:800;

    margin:0;

}

.thankyou-card h2{

    font-size:34px;

    line-height:1.3;

    color:#101828;

    margin:18px 0 25px;

}

.thankyou-card h2 span{

    display:block;

}

.thankyou-card p{

    max-width:620px;

    margin:0 auto;

    font-size:17px;

    line-height:1.9;

    color:#667085;

}



/*=========================================
STEPS
=========================================*/

.thankyou-steps{

    display:grid;

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

    gap:22px;

    margin:50px 0;

}

.thank-step{

    background:#F8FAFD;

    border:1px solid #E8EDF5;

    border-radius:18px;

    padding:28px;

}

.step-icon{

    width:58px;

    height:58px;

    margin:auto auto 18px;

    border-radius:50%;

    background:#1649D0;

    display:flex;

    justify-content:center;

    align-items:center;

}

.step-icon i{

    color:#FFFFFF;

    font-size:22px;

}

.thank-step span{

    display:block;

    color:#667085;

    line-height:1.7;

}

.thank-step strong{

    display:block;

    color:#101828;

}



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

.thankyou-buttons{

    display:flex;

    gap:18px;

    justify-content:center;

    margin-bottom:35px;

}

.thank-call-btn,

.thank-whatsapp-btn{

    min-width:220px;

    height:60px;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#FFFFFF;

    font-size:18px;

    font-weight:700;

    transition:.35s;

}

.thank-call-btn{

    background:#FF6A00;

}

.thank-call-btn:hover{

    background:#F15C00;

}

.thank-whatsapp-btn{

    background:#16A34A;

}

.thank-whatsapp-btn:hover{

    background:#15803D;

}



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

.thankyou-footer{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    color:#667085;

    font-size:16px;

}

.thankyou-footer i{

    color:#1649D0;

}

#countdown{

    color:#1649D0;

    font-weight:700;

}



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

@media(max-width:768px){

    .thankyou-card{

        padding:35px 25px;

    }

    .thankyou-card h1{

        font-size:42px;

    }

    .thankyou-card h2{

        font-size:26px;

    }

    .thankyou-card p{

        font-size:15px;

    }

    .thankyou-steps{

        grid-template-columns:1fr;

    }

    .thankyou-buttons{

        flex-direction:column;

    }

    .thank-call-btn,

    .thank-whatsapp-btn{

        width:100%;

    }

}

@media(max-width:576px){

    .thankyou-icon{

        width:90px;

        height:90px;

    }

    .thankyou-icon i{

        font-size:46px;

    }

    .thankyou-card h1{

        font-size:36px;

    }

}
/*=========================================
CONFETTI
=========================================*/

.confetti{

    position:fixed;

    top:-20px;

    width:10px;

    height:18px;

    border-radius:2px;

    pointer-events:none;

    z-index:9999;

    animation:confettiFall linear forwards;

}

@keyframes confettiFall{

    0%{

        transform:translateY(0) rotate(0deg);

        opacity:1;

    }

    100%{

        transform:translateY(110vh) rotate(720deg);

        opacity:0;

    }

}

/*=========================================
MOBILE FLOATING CTA
=========================================*/

.mobile-cta-bar{

    position:fixed;

    left:12px;

    right:12px;

    bottom:12px;

    height:76px;

    display:none;

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

    gap:10px;

    padding:10px;

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

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

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

    border-radius:22px;

    box-shadow:
    0 15px 40px rgba(15,23,42,.18);

    z-index:99999;

}



/* White Glow */

.mobile-cta-bar::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    background:

    linear-gradient(

    180deg,

    rgba(255,255,255,.45),

    rgba(255,255,255,0)

    );

    pointer-events:none;

}



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

.mobile-cta-bar a{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:6px;

    text-decoration:none;

    border-radius:14px;

    color:#fff;

    font-size:11px;

    font-weight:700;

    transition:.35s;

}

.mobile-cta-bar a i{

    font-size:20px;

}



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

.mobile-call-btn{

    background:#FF6A00;

}

.mobile-call-btn:hover{

    transform:translateY(-3px);

}



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

.mobile-whatsapp-btn{

    background:#16A34A;

}

.mobile-whatsapp-btn:hover{

    transform:translateY(-3px);

}



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

.mobile-quote-btn{

    background:#1649D0;

}

.mobile-quote-btn:hover{

    transform:translateY(-3px);

}



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

@media(max-width:768px){

    .mobile-cta-bar{

        display:grid;

    }

    body{

        padding-bottom:105px;

    }

}

@media(min-width:769px){

    .mobile-cta-bar{

        display:none;

    }

}