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

.contact-section{

    position:relative;

    overflow:hidden;

    padding:7rem 0;

    background:
        linear-gradient(
                180deg,
                #E1F2FF 0%,
                #ECF7FF 45%,
                #E1F2FF 100%
            );

}


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

.contact-wrapper{

    position:relative;

    background:#fff;

    border-radius:42px;

    padding:4.5rem;

    border:1px solid rgba(74,169,255,.08);

    box-shadow:
        0 30px 70px rgba(74,169,255,.10);

    overflow:hidden;

}


/*==================================================
        FLOATING DECORATIONS
==================================================*/

.contact-baby{

    position:absolute;

    left:2rem;

    top:1.5rem;

    width:170px;

    pointer-events:none;

    user-select:none;

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

}

.contact-cloud{

    position:absolute;

    right:2rem;

    top:2rem;

    width:90px;

    pointer-events:none;

    user-select:none;

    animation:cloudFloat 9s ease-in-out infinite;

}

.contact-stars{

    position:absolute;

    left:18%;

    top:3rem;

    width:70px;

    pointer-events:none;

    user-select:none;

    animation:twinkle 5s ease-in-out infinite;

}

.contact-location-decoration{

    position:absolute;

    right:20%;

    top:6rem;

    width:70px;

    pointer-events:none;

    user-select:none;

    animation:floatTeddy 5.5s ease-in-out infinite;

}


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

.contact-heading{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:0 auto 4rem;

    text-align:center;

}

.contact-heading h2{

    margin:.8rem 0;

    font-size:clamp(2.4rem,4vw,3.7rem);

    font-weight:800;

    line-height:1;

    color:var(--heading-color);

}

.contact-heading h2 span{

    display:block;

    background:
    linear-gradient(
        135deg,
        #4BA8FF,
        #6FC7FF,
        #8ED8FF
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

.contact-heading p{

    max-width:760px;

    margin:0 auto;

    font-size:1.08rem;

    line-height:1.9;

    color:var(--text-color);

}

.contact-heading strong{

    color:var(--heading-color);

}


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

.contact-content{

    display:grid;

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

    gap:2rem;

    align-items:start;

}
/*==================================================
        GOOGLE MAP
==================================================*/

.contact-map{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    background:#fff;

    border:1px solid rgba(74,169,255,.10);

    box-shadow:
        0 22px 55px rgba(74,169,255,.10);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.contact-map:hover{

    transform:translateY(-6px);

    box-shadow:
        0 28px 65px rgba(74,169,255,.15);

}

.contact-map iframe{

    display:block;

    width:100%;

    height:100%;

    min-height:960px;

    border:0;

}


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

.contact-card{

    background:#fff;

    border-radius:32px;

    padding:2rem;

    border:1px solid rgba(74,169,255,.10);

    box-shadow:
        0 22px 55px rgba(74,169,255,.10);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.contact-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 28px 65px rgba(74,169,255,.15);

}


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

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:1rem;

    padding:1rem 0;

    border-bottom:1px solid rgba(74,169,255,.08);

}

.contact-item:last-of-type{

    border-bottom:none;

    margin-bottom:1.2rem;

}


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

.contact-icon{

    width:58px;

    height:58px;

    flex-shrink:0;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #4BA8FF,
            #6FC7FF
        );

    color:#fff;

    font-size:1.3rem;

    box-shadow:
        0 14px 35px rgba(74,169,255,.18);

    transition:
        transform .35s ease;

}

.contact-item:hover .contact-icon{

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

}


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

.contact-info{

    flex:1;

}

.contact-info h3{

    margin:0 0 .45rem;

    font-size:1.08rem;

    font-weight:700;

    color:var(--heading-color);

}

.contact-info p{

    margin:0;

    font-size:.94rem;

    line-height:1.75;

    color:var(--text-color);

}

.contact-info a{

    color:var(--primary-color);

    font-weight:600;

    text-decoration:none;

    transition:color .3s ease;

}

.contact-info a:hover{

    color:#2F8BFF;

}


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

.contact-social{

    margin-top:2rem;

}

.contact-social h3{

    margin-bottom:1rem;

    font-size:1.1rem;

    color:var(--heading-color);

}

.social-icons{

    display:flex;

    flex-wrap:wrap;

    gap:.8rem;

}

.social-icons a{

    width:50px;

    height:50px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EEF8FF;

    color:var(--primary-color);

    text-decoration:none;

    font-size:1.2rem;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;

}

.social-icons a:hover{

    transform:translateY(-5px);

    background:
        linear-gradient(
            135deg,
            #4BA8FF,
            #6FC7FF
        );

    color:#fff;

}


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

.contact-buttons{

    display:flex;

    flex-direction:column;

    gap:1rem;

    margin-top:2rem;

}

.contact-buttons .btn,
.contact-buttons .btn-outline-testimonial{

    width:100%;

}
/*==================================================
        CONTACT TRUST STRIP
==================================================*/

.contact-trust{

    margin-top:4rem;

    display:grid;

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

    gap:1.25rem;

}

.contact-trust-item{

    background:#fff;

    border:1px solid rgba(74,169,255,.10);

    border-radius:22px;

    padding:1.4rem;

    display:flex;

    align-items:flex-start;

    gap:1rem;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.contact-trust-item:hover{

    transform:translateY(-5px);

    border-color:rgba(74,169,255,.22);

    box-shadow:
        0 18px 40px rgba(74,169,255,.12);

}

.contact-trust-icon{

    width:54px;

    height:54px;

    flex-shrink:0;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #4BA8FF,
            #6FC7FF
        );

    color:#fff;

    font-size:1.25rem;

    transition:transform .35s ease;

}

.contact-trust-item:hover .contact-trust-icon{

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

}

.contact-trust-item h4{

    margin:0 0 .35rem;

    font-size:1rem;

    font-weight:700;

    color:var(--heading-color);

}

.contact-trust-item p{

    margin:0;

    font-size:.84rem;

    line-height:1.65;

    color:var(--text-light);

}


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

@media (max-width:992px){

    .contact-section{

        padding:5.5rem 0;

    }

    .contact-wrapper{

        padding:3rem;

        border-radius:34px;

    }

    .contact-content{

        grid-template-columns:1fr;

    }

    .contact-map iframe{

        min-height:450px;

    }

    .contact-trust{

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

    }

    .contact-baby{

        width:140px;

    }

    .contact-cloud{

        width:70px;

    }

    .contact-stars{

        width:55px;

    }

    .contact-location-decoration{

        width:60px;
        right:10rem;
        top:3rem;
    }

}


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

@media (max-width:768px){

    .contact-section{

        padding:4.5rem 0;

    }

    .contact-wrapper{

        padding:2rem;

        border-radius:28px;

    }

    .contact-heading{

        margin-bottom:2.5rem;

    }

    .contact-heading h2{

        font-size:2rem;

    }

    .contact-heading p{

        font-size:.95rem;

        line-height:1.75;

    }

    .contact-content{

        gap:2rem;

    }

    .contact-map{

        border-radius:24px;

    }

    .contact-map iframe{

        min-height:350px;

    }

    .contact-card{

        border-radius:24px;

        padding:1.5rem;

    }

    .contact-item{

        gap:.8rem;

        padding:.9rem 0;

    }

    .contact-icon{

        width:48px;

        height:48px;

        border-radius:14px;

        font-size:1.05rem;

    }

    .contact-info h3{

        font-size:1rem;

    }

    .contact-info p,

    .contact-info a{

        font-size:.9rem;

    }

    .social-icons{

        justify-content:center;

    }

    .contact-buttons{

        margin-top:1.5rem;

    }

    .contact-trust{

        display:flex;

        gap:1rem;

        overflow-x:auto;

        overflow-y:hidden;

        padding-bottom:1rem;

        scroll-snap-type:x mandatory;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

    }

    .contact-trust::-webkit-scrollbar{

        display:none;

    }

    .contact-trust-item{

        flex:0 0 85%;

        min-height:140px;

        scroll-snap-align:center;

        scroll-snap-stop:always;

    }

    .contact-baby{

        display:none;
    }

    .contact-cloud{

         display:none;
    }

    .contact-stars{

        width:65px;
        top:4rem;
        left:1rem;

    }

    .contact-location-decoration{

        width:35px;

        right:8%;

        top:5rem;

    }

}


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

@media (max-width:576px){

    .contact-wrapper{

        padding:1.5rem;

    }

    .contact-heading h2{

        font-size:1.7rem;

    }

    .contact-heading p{

        font-size:.9rem;

    }

    .contact-map iframe{

        min-height:300px;

    }

    .contact-card{

        padding:1.25rem;

    }

    .contact-trust-item{

        flex:0 0 90%;

        padding:1.2rem;

    }

}


/*==================================================
        REVEAL ANIMATION
==================================================*/

.contact-heading,
.contact-map,
.contact-card,
.contact-trust{

    opacity:0;

    transform:translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.contact-heading.revealed,
.contact-map.revealed,
.contact-card.revealed,
.contact-trust.revealed{

    opacity:1;

    transform:none;

}


/*==================================================
        REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

    .contact-heading,
    .contact-map,
    .contact-card,
    .contact-trust{

        opacity:1 !important;

        transform:none !important;

        transition:none !important;

    }

    .contact-baby,
    .contact-cloud,
    .contact-stars,
    .contact-location-decoration{

        animation:none;
        display:none;

    }

}
.faq-section{
    padding-bottom:0px !important;
}

.contact-section{
    padding-top:20px !important;
}