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

.services{

    padding:90px 0;

    background:#fff;

}

.section-subtitle{

    display:block;

    text-align:center;

    color:#19C2B5;

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:10px;

    text-transform:uppercase;

}

.section-title{

    text-align:center;

    font-size:42px;

    color:#0B2C5F;

    margin-bottom:60px;

    font-weight:700;

}

.services-grid{

    display:grid;

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

    gap:28px;

}

.service-box{

    background:#fff;

    border:1px solid #eef3f8;

    border-radius:18px;

    padding:35px 28px;

    transition:.35s;

    min-height:330px;

    display:flex;

    flex-direction:column;

}

.service-box:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    border-color:#19C2B5;

}

.service-icon{

    width:65px;

    height:65px;

    border-radius:50%;

    background:#ECFCF9;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

}

.service-icon i{

    font-size:30px;

    color:#19C2B5;

}

.service-box h3{

    color:#0B2C5F;

    font-size:24px;

    line-height:1.45;

    margin-bottom:18px;

    font-weight:600;

}

.service-box p{

    color:#667085;

    line-height:1.9;

    font-size:16px;

    margin-bottom:auto;

}

.service-box a{

    margin-top:35px;

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#19C2B5;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.service-box a:hover{

    gap:15px;

}

@media(max-width:1100px){

.services-grid{

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

}

}

@media(max-width:768px){

.services{

padding:70px 0;

}

.section-title{

font-size:32px;

margin-bottom:40px;

}

.services-grid{

grid-template-columns:1fr;

}

.service-box{

min-height:auto;

}

}


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

.page-hero{

    position:relative;

    height:360px;

    overflow:hidden;

    display:flex;

    align-items:center;

}

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

Background

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

.page-hero-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

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

Overlay

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

.page-hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(11,44,95,.95) 0%,
        rgba(11,44,95,.82) 25%,
        rgba(11,44,95,.60) 45%,
        rgba(11,44,95,.18) 70%,
        rgba(11,44,95,0) 100%
    );

}

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

Content

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

.page-hero .container{

    position:relative;

    z-index:5;

}

.page-hero-content{

    max-width:600px;

}

.page-tag{

    display:inline-block;

    color:#19C2B5;

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:18px;

}

.page-hero h1{

    color:#fff;

    font-size:58px;

    line-height:1.15;

    margin-bottom:20px;

    font-weight:700;

}

.page-hero p{

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

    line-height:1.9;

    margin-bottom:35px;

    font-size:17px;

}

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

Breadcrumb

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

.breadcrumb{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:15px;

}

.breadcrumb a{

    color:#ffffff;

    text-decoration:none;

    transition:.3s;

}

.breadcrumb a:hover{

    color:#19C2B5;

}

.breadcrumb span{

    color:#D8E3EF;

}

.breadcrumb i{

    font-size:11px;

}

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

Responsive

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

@media(max-width:992px){

.page-hero{

height:320px;

}

.page-hero h1{

font-size:46px;

}

}

@media(max-width:768px){

.page-hero{

height:300px;

}

.page-hero h1{

font-size:34px;

}

.page-hero p{

font-size:16px;

}

.breadcrumb{

font-size:14px;

}

}
.page-hero-bg{

    animation:heroZoom 15s ease-in-out infinite alternate;

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

/*========================================
ABOUT INTRO
========================================*/

.about-intro{

    padding:100px 0;

    background:#fff;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1.1fr;

    gap:80px;

    align-items:center;

}

.about-content{

    max-width:560px;

}

.about-content h2{

    font-size:48px;

    color:#0B2C5F;

    line-height:1.2;

    margin:15px 0 28px;

    font-weight:700;

}

.about-content .lead{

    font-size:18px;

    color:#43556B;

    line-height:1.9;

    margin-bottom:24px;

}

.about-content p{

    color:#667085;

    line-height:1.9;

    margin-bottom:35px;

    font-size:16px;

}

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

Image

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

.about-image{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.about-image img{

    width:100%;

    display:block;

    transition:.5s;

}

.about-image:hover img{

    transform:scale(1.05);

}

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

Responsive

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

@media(max-width:992px){

.about-grid{

grid-template-columns:1fr;

gap:60px;

}

.about-content{

max-width:100%;

}

}

@media(max-width:768px){

.about-intro{

padding:70px 0;

}

.about-content h2{

font-size:36px;

}

}

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

MISSION & VISION

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

.mission-vision{

    padding:100px 0;

    background:#F8FBFD;

}

.mv-grid{

    display:grid;

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

    gap:35px;

}

.mv-card{

    background:#fff;

    border-radius:24px;

    padding:28px;

    border:1px solid #EEF3F8;

    box-shadow:0 15px 45px rgba(0,0,0,.05);

    transition:.35s;

}

.mv-card:hover{

    transform:translateY(-8px);

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

}

.mv-header{

    display:flex;

    gap:20px;

    align-items:flex-start;

    margin-bottom:25px;

}

.mv-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#EAFBF8;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.mv-icon i{

    color:#19C2B5;

    font-size:28px;

}

.mv-header h3{

    color:#0B2C5F;

    font-size:28px;

    margin-bottom:10px;

}

.mv-header p{

    color:#667085;

    line-height:1.8;

}

.mv-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    border-radius:18px;

    display:block;

    transition:.4s;

}

.mv-card:hover img{

    transform:scale(1.04);

}

@media(max-width:992px){

.mv-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.mission-vision{

padding:70px 0;

}

.mv-header{

flex-direction:column;

}

.mv-header h3{

font-size:24px;

}

.mv-card img{

height:220px;

}

}
/*=====================================
OUR VALUES
======================================*/

.values{

    padding:100px 0;

    background:#ffffff;

}

.values-grid{

    margin-top:70px;

    display:grid;

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

    gap:25px;

}

.value-card{

    background:#ffffff;

    border:1px solid #EEF3F8;

    border-radius:20px;

    padding:35px 25px;

    text-align:center;

    transition:.35s;

    position:relative;

    overflow:hidden;

    min-height:280px;

}

.value-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:#19C2B5;

    transform:scaleX(0);

    transition:.35s;

}

.value-card:hover::before{

    transform:scaleX(1);

}

.value-card:hover{

    transform:translateY(-8px);

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

}

.value-icon{

    width:75px;

    height:75px;

    border-radius:50%;

    margin:auto;

    margin-bottom:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#ECFCF9;

    transition:.35s;

}

.value-icon i{

    font-size:30px;

    color:#19C2B5;

    transition:.35s;

}

.value-card:hover .value-icon{

    background:#19C2B5;

}

.value-card:hover .value-icon i{

    color:#fff;

}

.value-card h3{

    color:#0B2C5F;

    font-size:22px;

    margin-bottom:15px;

}

.value-card p{

    color:#667085;

    font-size:15px;

    line-height:1.8;

}

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

@media(max-width:1200px){

.values-grid{

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

}

}

@media(max-width:768px){

.values{

padding:70px 0;

}

.values-grid{

grid-template-columns:1fr;

}

.value-card{

min-height:auto;

}

}

.section-title{

position:relative;

}

.section-title::after{

content:"";

width:70px;

height:4px;

background:#19C2B5;

display:block;

margin:18px auto 0;

border-radius:30px;

}

/*====================================
STATISTICS
=====================================*/

.stats{

    padding:90px 0;

    background:#F8FBFD;

}

.stats-wrapper{

    background:linear-gradient(
        135deg,
        #0B2C5F,
        #123E7A
    );

    border-radius:22px;

    display:grid;

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

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.10);

}

.stat-item{

    position:relative;

    padding:45px 25px;

    text-align:center;

    color:#fff;

    transition:.35s;

}

.stat-item:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;

    top:25%;

    width:1px;

    height:50%;

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

}

.stat-item:hover{

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

}

.stat-icon{

    width:70px;

    height:70px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:rgba(25,194,181,.12);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

}

.stat-item:hover .stat-icon{

    background:#19C2B5;

}

.stat-icon i{

    color:#19C2B5;

    font-size:28px;

    transition:.35s;

}

.stat-item:hover i{

    color:#fff;

}

.stat-item h2{

    font-size:42px;

    font-weight:700;

    margin-bottom:10px;

}

.stat-item p{

    color:#DCE7F4;

    font-size:15px;

}

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

Responsive

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

@media(max-width:1100px){

.stats-wrapper{

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

}

}

@media(max-width:768px){

.stats{

padding:70px 0;

}

.stats-wrapper{

grid-template-columns:1fr;

}

.stat-item::after{

display:none;

}

}

.team{

    padding:100px 0;

    background:#fff;

}

.team-grid{

    margin-top:60px;

    display:grid;

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

    gap:25px;

}

.team-card{

    background:#fff;

    border:1px solid #eef3f8;

    border-radius:20px;

    padding:30px;

    text-align:center;

    transition:.35s;

}

.team-card:hover{

    transform:translateY(-8px);

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

}

.team-card img{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:20px;

}

.team-card h3{

    color:#0B2C5F;

    margin-bottom:8px;

}

.team-card span{

    color:#667085;

    display:block;

    margin-bottom:20px;

}

.team-social{

    display:flex;

    justify-content:center;

    gap:12px;

}

.team-social a{

    width:38px;

    height:38px;

    border-radius:50%;

    background:#F5FAFC;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#0B2C5F;

    transition:.3s;

}

.team-social a:hover{

    background:#19C2B5;

    color:#fff;

}

.team-button{

    text-align:center;

    margin-top:50px;

}


/*=========================================
COMING SOON
==========================================*/

.coming-soon{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:
    linear-gradient(
        135deg,
        #FCFEFF 0%,
        #F3F8FC 25%,
        #EDF7FC 55%,
        #FFFFFF 100%
    );

}

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

Blur Background

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

.blur{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.55;

    z-index:0;

}

.blur.one{

    width:380px;

    height:380px;

    background:#DDF8F4;

    top:-120px;

    left:-100px;

}

.blur.two{

    width:320px;

    height:320px;

    background:#E3F2FF;

    right:-80px;

    top:40px;

}

.blur.three{

    width:260px;

    height:260px;

    background:#F7FBFF;

    bottom:-100px;

    left:45%;

}

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

.coming-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.coming-content h2{

    font-size:58px;

    color:#0B2C5F;

    margin:18px 0;

}

.coming-content p{

    color:#667085;

    line-height:1.9;

    max-width:520px;

    margin-bottom:45px;

}

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

Countdown

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

.countdown{

    display:flex;

    gap:18px;

    margin-bottom:40px;

}

.time-box{

    width:95px;

    height:95px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(18px);

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

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

    border-radius:20px;

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

}

.time-box h3{

    font-size:34px;

    color:#0B2C5F;

    margin-bottom:6px;

}

.time-box span{

    color:#667085;

    font-size:14px;

}

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

Email Form

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

.notify-form{

    display:flex;

    gap:15px;

    margin-bottom:15px;

}

.notify-form input{

    flex:1;

    height:58px;

    padding:0 22px;

    border-radius:50px;

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

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

    backdrop-filter:blur(18px);

    outline:none;

    font-size:15px;

}

.notify-form button{

    height:58px;

    padding:0 34px;

    border:none;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #19C2B5,
        #0B2C5F
    );

    color:#fff;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.notify-form button:hover{

    transform:translateY(-3px);

}

.coming-content small{

    color:#7A8796;

}

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

Image

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

.coming-image{

    text-align:center;

}

.coming-image img{

    width:100%;

    max-width:520px;

    filter:drop-shadow(
        0 35px 45px rgba(0,0,0,.15)
    );

    animation:float 6s ease-in-out infinite;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

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

Responsive

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

@media(max-width:992px){

.coming-grid{

grid-template-columns:1fr;

text-align:center;

}

.coming-content p{

margin:auto auto 40px;

}

.countdown{

justify-content:center;

flex-wrap:wrap;

}

.notify-form{

flex-direction:column;

}

}

@media(max-width:768px){

.coming-soon{

padding:80px 0;

}

.coming-content h2{

font-size:42px;

}

.time-box{

width:80px;

height:80px;

}

.time-box h3{

font-size:28px;

}

}

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

PAGE BANNER

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

.page-banner{

    position:relative;

    height:430px;

    overflow:hidden;

    display:flex;

    align-items:center;

}

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

Background

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

.banner-image{

    position:absolute;

    inset:0;

}

.banner-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    animation:bannerZoom 20s ease-in-out infinite alternate;

}

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

Overlay

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

.banner-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        90deg,
        rgba(11,44,95,.92) 0%,
        rgba(11,44,95,.82) 25%,
        rgba(11,44,95,.55) 50%,
        rgba(11,44,95,.18) 75%,
        rgba(11,44,95,0) 100%
    );

}

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

Content

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

.banner-content{

    position:relative;

    z-index:2;

    max-width:650px;

}

.banner-tag{

    display:inline-block;

    color:#19C2B5;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

}

.banner-content h1{

    font-size:60px;

    line-height:1.1;

    color:#fff;

    margin-bottom:22px;

    font-weight:700;

}

.banner-content p{

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

    font-size:19px;

    line-height:1.8;

    max-width:560px;

}

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

Breadcrumb

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

.breadcrumb{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:30px;

    font-size:14px;

}

.breadcrumb a{

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.breadcrumb a:hover{

    color:#19C2B5;

}

.breadcrumb span{

    color:#D6E2EF;

}

.breadcrumb i{

    color:#19C2B5;

    font-size:11px;

}

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

Animation

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

@keyframes bannerZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

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

Responsive

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

@media(max-width:992px){

.page-banner{

height:360px;

}

.banner-content h1{

font-size:46px;

}

}

@media(max-width:768px){

.page-banner{

height:320px;

}

.banner-content{

max-width:100%;

}

.banner-content h1{

font-size:34px;

}

.banner-content p{

font-size:16px;

}

}

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

FEATURED SERVICES

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

.featured-services{

    padding:120px 0;

    background:#fff;

}

.service-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    margin-bottom:120px;

}

.service-row:last-child{

    margin-bottom:0;

}

.service-row.reverse .service-image{

    order:2;

}

.service-row.reverse .service-content{

    order:1;

}

.service-image{

    overflow:hidden;

    border-radius:24px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.service-image img{

    width:100%;

    display:block;

    transition:.45s;

}

.service-image:hover img{

    transform:scale(1.05);

}

.service-icon{

    width:68px;

    height:68px;

    border-radius:20px;

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

    backdrop-filter:blur(12px);

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

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

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

}

.service-icon i{

    color:#19C2B5;

    font-size:28px;

}

.service-label{

    display:block;

    text-transform:uppercase;

    letter-spacing:2px;

    color:#19C2B5;

    font-size:13px;

    margin-bottom:10px;

    font-weight:600;

}

.service-content h2{

    font-size:42px;

    color:#0B2C5F;

    margin-bottom:20px;

}

.service-content p{

    color:#667085;

    line-height:1.9;

    margin-bottom:35px;

}

.service-list{

    display:grid;

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

    gap:18px;

    margin-bottom:35px;

}

.service-list div{

    display:flex;

    gap:10px;

    align-items:center;

    color:#243B53;

}

.service-list i{

    color:#19C2B5;

}

@media(max-width:992px){

.service-row{

grid-template-columns:1fr;

gap:50px;

margin-bottom:90px;

}

.service-row.reverse .service-image,

.service-row.reverse .service-content{

order:unset;

}

.service-list{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.featured-services{

padding:80px 0;

}

.service-content h2{

font-size:34px;

}

}

/*====================================
HOW IT WORKS
=====================================*/

.how-it-works{

    padding:120px 0;

    background:#F8FBFD;

}

.steps{

    position:relative;

    margin-top:70px;

    display:grid;

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

    gap:25px;

}

.progress-line{

    position:absolute;

    top:50px;

    left:8%;

    width:84%;

    height:2px;

    background:#19C2B5;

    opacity:.2;

}

.step-card{

    position:relative;

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

    backdrop-filter:blur(12px);

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

    border-radius:22px;

    padding:35px;

    min-height:240px;

    transition:.35s;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.step-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.step-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:#19C2B5;

    transform:scaleX(0);

    transition:.35s;

    border-radius:22px 22px 0 0;

}

.step-card:hover::before{

    transform:scaleX(1);

}

.step-number{

    position:absolute;

    top:20px;

    left:25px;

    font-size:58px;

    color:#19C2B5;

    opacity:.12;

    font-weight:700;

}

.step-arrow{

    position:absolute;

    top:28px;

    right:28px;

    color:#19C2B5;

}

.step-card h3{

    margin-top:70px;

    color:#0B2C5F;

    font-size:22px;

    margin-bottom:18px;

}

.step-card p{

    color:#667085;

    line-height:1.8;

}

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

.contact-section{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:
    linear-gradient(
        135deg,
        #FCFEFF 0%,
        #F6FAFD 35%,
        #EEF7FC 70%,
        #FFFFFF 100%
    );

}

.contact-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:#DDF8F4;

    filter:blur(120px);

    opacity:.5;

}

.contact-section::after{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    right:-120px;

    bottom:-120px;

    border-radius:50%;

    background:#DDEEFF;

    filter:blur(120px);

    opacity:.45;

}

.contact-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:45px;

    align-items:start;

}

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

.contact-info h2{

    font-size:48px;

    color:#0B2C5F;

    margin:18px 0;

    line-height:1.2;

}

.contact-info>p{

    color:#667085;

    line-height:1.9;

    margin-bottom:35px;

    max-width:560px;

}

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

.btn-whatsapp{

    display:inline-flex;

    align-items:center;

    gap:12px;

    background:#25D366;

    color:#fff;

    text-decoration:none;

    padding:18px 34px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

    margin-bottom:45px;

}

.btn-whatsapp:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(37,211,102,.28);

}

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

.contact-cards{

    display:grid;

    gap:18px;

}

.contact-card{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:22px;

    border-radius:22px;

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

    backdrop-filter:blur(18px);

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

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

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-5px);

    box-shadow:0 22px 50px rgba(0,0,0,.08);

}

.contact-card .icon{

    width:58px;

    height:58px;

    border-radius:16px;

    background:#ECFCF9;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}

.contact-card .icon i{

    font-size:24px;

    color:#19C2B5;

}

.contact-card h4{

    color:#0B2C5F;

    margin-bottom:8px;

    font-size:18px;

}

.contact-card a{

    color:#667085;

    text-decoration:none;

    transition:.3s;

    word-break:break-word;

}

.contact-card a:hover{

    color:#19C2B5;

}

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

.social-media{

    margin-top:45px;

}

.social-media h4{

    color:#0B2C5F;

    margin-bottom:18px;

}

.social-icons{

    display:flex;

    gap:15px;

    margin-bottom:15px;

}

.social-icons a{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#0B2C5F;

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

    transition:.35s;

}

.social-icons a:hover{

    background:#19C2B5;

    color:#fff;

    transform:translateY(-4px);

}

.social-media p{

    color:#667085;

    font-weight:500;

}

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

.contact-form-card{

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

    backdrop-filter:blur(18px);

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

    border-radius:28px;

    padding:45px;

    box-shadow:0 20px 55px rgba(0,0,0,.06);

}

.form-title{

    display:block;

    color:#19C2B5;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:13px;

    font-weight:600;

    margin-bottom:25px;

}

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

.form-group{

    margin-bottom:24px;

}

.form-group label{

    display:block;

    color:#0B2C5F;

    font-weight:600;

    margin-bottom:10px;

}

.form-group label span{

    color:#ff4d4d;

}

.form-group input,

.form-group textarea,

.form-group select{

    width:100%;

    border:1px solid #DFE7EF;

    border-radius:16px;

    background:#fff;

    padding:16px 18px;

    font-size:15px;

    transition:.35s;

    outline:none;

    font-family:inherit;

}

.form-group textarea{

    min-height:180px;

    resize:vertical;

}

.form-group input::placeholder,

.form-group textarea::placeholder{

    color:#98A2B3;

}

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

    border-color:#19C2B5;

    box-shadow:0 0 0 4px rgba(25,194,181,.12);

}

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

.form-group select{

    appearance:none;

    cursor:pointer;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%230B2C5F' viewBox='0 0 256 256'%3E%3Cpath d='M208.49 88.49a12 12 0 0 0-17 0L128 152 64.49 88.49a12 12 0 0 0-17 17l72 72a12 12 0 0 0 17 0l72-72a12 12 0 0 0 0-17Z'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 18px center;

    background-size:18px;

    padding-right:50px;

}

.checkbox-group{

    margin:30px 0;

}

.checkbox-group label{

    display:flex;

    gap:12px;

    align-items:flex-start;

    line-height:1.8;

    color:#667085;

}

.checkbox-group input{

    margin-top:5px;

    accent-color:#19C2B5;

}

.error{

    display:block;

    margin-top:8px;

    color:#E63946;

    font-size:13px;

    min-height:18px;

}

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

.submit-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #19C2B5,
        #12B3A5
    );

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    transition:.35s;

}

.submit-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(25,194,181,.30);

}

/*==========================================================
SUCCESS MODAL
==========================================================*/

.success-modal{

    position:fixed;

    inset:0;

    background:rgba(8,23,43,.55);

    backdrop-filter:blur(8px);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:9999;

}

.success-modal.active{

    opacity:1;

    visibility:visible;

}

.success-box{

    width:90%;

    max-width:520px;

    background:#fff;

    border-radius:28px;

    padding:45px;

    text-align:center;

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

    transform:translateY(30px) scale(.95);

    transition:.35s ease;

}

.success-modal.active .success-box{

    transform:translateY(0) scale(1);

}

.success-icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#ECFCF9;

    display:flex;

    justify-content:center;

    align-items:center;

}

.success-icon i{

    font-size:46px;

    color:#19C2B5;

}

.success-box h2{

    color:#0B2C5F;

    font-size:34px;

    margin-bottom:18px;

}

.success-box p{

    color:#667085;

    line-height:1.8;

    margin-bottom:18px;

}

.success-box .btn-whatsapp{

    width:100%;

    justify-content:center;

    margin:25px 0 15px;

}

.btn-outline{

    width:100%;

    height:56px;

    border-radius:50px;

    border:2px solid #0B2C5F;

    background:transparent;

    color:#0B2C5F;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.btn-outline:hover{

    background:#0B2C5F;

    color:#fff;

}

/*==========================================================
FORM STATES
==========================================================*/

.form-group.error input,
.form-group.error textarea,
.form-group.error select{

    border-color:#E63946;

    box-shadow:0 0 0 4px rgba(230,57,70,.12);

}

.form-group.success input,
.form-group.success textarea,
.form-group.success select{

    border-color:#19C2B5;

}

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

.submit-btn.loading{

    pointer-events:none;

    opacity:.85;

}

.submit-btn.loading i{

    animation:spin .8s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==========================================================
TOAST
==========================================================*/

.toast{

    position:fixed;

    top:25px;

    right:25px;

    min-width:320px;

    max-width:420px;

    padding:18px 22px;

    border-radius:16px;

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-weight:500;

    box-shadow:0 18px 45px rgba(0,0,0,.18);

    transform:translateX(120%);

    opacity:0;

    transition:.35s ease;

    z-index:99999;

}

.toast.show{

    transform:translateX(0);

    opacity:1;

}

.toast.success{

    background:#19C2B5;

}

.toast.error{

    background:#E63946;

}

.toast i{

    font-size:22px;

}

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

.contact-card,
.contact-form-card{

    animation:fadeUp .8s ease both;

}

.contact-card:nth-child(2){

    animation-delay:.1s;

}

.contact-card:nth-child(3){

    animation-delay:.2s;

}

.contact-card:nth-child(4){

    animation-delay:.3s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{

    outline:3px solid rgba(25,194,181,.35);

    outline-offset:3px;

}

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

@media(max-width:1100px){

.contact-grid{

grid-template-columns:1fr;

gap:50px;

}

.contact-info{

order:2;

}

.contact-form-card{

order:1;

}

}

@media(max-width:768px){

.contact-section{

padding:80px 0;

}

.contact-info h2{

font-size:36px;

}

.contact-form-card{

padding:30px;

border-radius:24px;

}

.contact-card{

padding:18px;

}

.contact-card .icon{

width:50px;

height:50px;

}

.contact-card .icon i{

font-size:20px;

}

.btn-whatsapp{

width:100%;

justify-content:center;

}

.success-box{

padding:35px 25px;

}

.success-box h2{

font-size:28px;

}

}

@media(max-width:576px){

.contact-section{

padding:70px 0;

}

.contact-info h2{

font-size:30px;

}

.contact-card{

flex-direction:column;

align-items:flex-start;

}

.contact-card .icon{

margin-bottom:5px;

}

.social-icons{

flex-wrap:wrap;

}

.toast{

left:15px;

right:15px;

min-width:auto;

max-width:none;

}

.success-box{

width:95%;

padding:30px 20px;

}

.submit-btn{

height:54px;

}

}