/*==================================================
                CONTACT PAGE VARIABLES
==================================================*/

:root{

    --contact-bg-1:#F8FCFF;

    --contact-bg-2:#EEF7FF;

    --contact-card:#FFFFFF;

    --contact-border:rgba(74,169,255,.12);

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

}



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

.contact-page{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    padding:9rem 0 5rem;

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

}



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

.contact-moon{

    position:absolute;

    top:85px;

    left:5%;

    width:90px;

    opacity:.95;

    animation:floatMoon 8s ease-in-out infinite;

    pointer-events:none;

}

.contact-stars{

    position:absolute;

    width:90px;

    opacity:.6;

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

    pointer-events:none;

}

.contact-stars-left{

    top:230px;

    left:12%;

}

.contact-stars-right{

    top:160px;

    right:8%;

}

.contact-cloud{

    position:absolute;

    width:170px;

    opacity:.75;

    pointer-events:none;

}

.contact-cloud-top{

    top:170px;

    right:3%;

    animation:floatCloud 11s ease-in-out infinite;

}

.contact-cloud-bottom{

    bottom:140px;

    left:4%;

    animation:floatCloud 12s ease-in-out infinite reverse;

}



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

.contact-hero{

    position:relative;

    max-width:900px;

    margin:0 auto 4.5rem;

    text-align:center;

    z-index:2;

}

.contact-hero h1{

    margin:.5rem 0;

    font-family:var(--heading-font);

    font-size:clamp(2.7rem,5vw,4.4rem);

    line-height:1;

    color:var(--text-heading);

}

.contact-hero h1 span{
    background:
        linear-gradient(
            135deg,
            #4BA8FF,
            #6FC7FF
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

.contact-description{

    max-width:760px;

    margin:1.8rem auto 0;

    font-size:1.08rem;

    line-height:1.9;

    color:var(--text-body);

}



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

.contact-section{

    position:relative;

    margin-top:2rem;

    z-index:2;

}

.contact-grid{

    display:grid;

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

    gap:2.2rem;

    align-items:start;

}
/*==================================================
                LEFT COLUMN
==================================================*/

.contact-left{

    display:flex;

    flex-direction:column;

    gap:2rem;

}



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

.contact-map{

    overflow:hidden;

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

    border-radius:32px;

    background:var(--contact-card);

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

}

.contact-map iframe{

    display:block;

    width:100%;

    height:555px;

    border:none;

}



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

.callback-card{

    padding:2rem;

    background:var(--contact-card);

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

    border-radius:32px;

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

}

.callback-header{

    display:flex;

    align-items:flex-start;

    gap:1rem;

    margin-bottom:2rem;

}

.callback-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:64px;

    height:64px;

    flex-shrink:0;

    border-radius:18px;

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

    color:#fff;

    font-size:1.5rem;

}

.callback-header h3{

    margin:0 0 .4rem;

    font-family:var(--heading-font);

    font-size:1.6rem;

    color:var(--text-heading);

}

.callback-header p{

    margin:0;

    color:var(--text-body);

    line-height:1.8;

}



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

.callback-form{

    display:flex;

    flex-direction:column;

    gap:1.4rem;

}

.form-group{

    position:relative;

}

.form-group i{

    position:absolute;

    top:50%;

    left:20px;

    transform:translateY(-50%);

    font-size:1rem;

    color:var(--primary-color);

}

.form-group input{

    width:100%;

    height:62px;

    padding:0 20px 0 56px;

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

    border-radius:18px;

    background:#fff;

    font-family:var(--body-font);

    font-size:1rem;

    color:var(--text-heading);

    transition:all .3s ease;

}

.form-group input::placeholder{

    color:#9CA3AF;

}

.form-group input:focus{

    outline:none;

    border-color:var(--primary-color);

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

}



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

.callback-btn{

    justify-content:center;

    width:100%;

    margin-top:.3rem;

    background:var(--primary);

    color:var(--white);

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

}

.callback-btn i{

    margin-right:.6rem;

}
.callback-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

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

}



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

.callback-form small{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:.45rem;

    font-size:.9rem;

    color:#64748B;

    text-align:center;

    line-height:1.6;

}

.callback-form small i{

    color:#22C55E;

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

.contact-sidebar{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

    padding:2rem;

    background:var(--contact-card);

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

    border-radius:32px;

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

}



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

.contact-info-item{

    display:flex;

    align-items:flex-start;

    gap:1rem;

    padding-bottom:1.5rem;

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

}

.contact-info-item:last-of-type{

    border-bottom:none;

    padding-bottom:.5rem;

}

.contact-info-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:58px;

    flex-shrink:0;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #EAF6FF,
        #D9EEFF
    );

    color:var(--primary-color);

    font-size:1.35rem;

}

.contact-info-item h4{

    margin:0 0 .35rem;

    font-family:var(--heading-font);

    font-size:1.15rem;

    color:var(--text-heading);

}

.contact-info-item p{

    margin:0;

    color:var(--text-body);

    line-height:1.8;

}

.contact-info-item a{

    color:var(--primary-color);

    font-weight:600;

    text-decoration:none;

    transition:var(--transition);

}

.contact-info-item a:hover{

    color:#2388E8;

}



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

.contact-social{

    margin-top:.5rem;

}

.contact-social h4{

    margin:0 0 1rem;

    font-family:var(--heading-font);

    color:var(--text-heading);

}

.contact-social-icons{

    display:flex;

    gap:.85rem;

}

.contact-social-icons a{
    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:#EEF8FF;

    color:var(--primary-color);

    text-decoration:none;

    font-size:1.15rem;

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


}

.contact-social-icons a:hover{

     transform:translateY(-4px);

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

        color:#fff;

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

}



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

.contact-buttons{

    display:flex;

    flex-direction:column;

    gap:1rem;

    margin-top:1rem;

}

.contact-buttons .btn,

.contact-buttons .btn-whatsapp,

.contact-buttons .btn-outline{

    width:100%;

    justify-content:center;

}

.contact-buttons i{

    margin-right:.6rem;

}


.btn-whatsapp{

    background:#fff;

    color:#25D366;

    border:2px solid #25D366;

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

}

.btn-whatsapp:hover{

    background:#25D366;

    color:#fff;

    border-color:#25D366;

    transform:translateY(-3px);

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

}


/*==================================================
                FEATURE SECTION
==================================================*/

.contact-features{

    display:grid;

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

    gap:1.5rem;

    margin:4rem 0;

}

.feature-card{

    display:flex;

    align-items:flex-start;

    gap:1rem;

    padding:1.6rem;

    background:#fff;

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

    border-radius:26px;

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

    transition:all .35s ease;

}

.feature-card:hover{

    transform:translateY(-6px);

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

}

.feature-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:58px;

    flex-shrink:0;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #4BA8FF,
        #8ED0FF
    );

    color:#fff;

    font-size:1.35rem;

}

.feature-card h4{

    margin:0 0 .45rem;

    font-family:var(--heading-font);

    font-size:1.15rem;

    color:var(--text-heading);

}

.feature-card p{

    margin:0;

    color:var(--text-body);

    line-height:1.7;

}



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

.contact-notice{

    max-width:900px;

    margin:0 auto;

    padding:3rem;

    text-align:center;

    background:#fff;

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

    border-radius:36px;

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

}

.contact-notice-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:80px;

    height:80px;

    margin:0 auto 1.5rem;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary-color),
        #8ED0FF
    );

    color:#fff;

    font-size:2rem;

}

.contact-notice h2{

    margin-bottom:1rem;

    font-family:var(--heading-font);

    font-size:2rem;

    color:var(--text-heading);

}

.contact-notice p{

    max-width:700px;

    margin:0 auto;

    color:var(--text-body);

    line-height:1.9;

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

@keyframes floatMoon{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

@keyframes floatCloud{

    0%,100%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(12px);

    }

}

@keyframes twinkle{

    0%,100%{

        opacity:.45;

        transform:scale(1);

    }

    50%{

        opacity:1;

        transform:scale(1.08);

    }

}



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

@media (max-width:992px){

    .contact-page{

        padding:8rem 0 4rem;

    }

    .contact-grid{

        grid-template-columns:1fr;

        gap:2rem;

    }

    .contact-sidebar{

        order:1;

    }

    .contact-left{

        order:2;

    }

    .contact-features{

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

        gap:1.4rem;

    }

    .contact-map iframe{

        height:300px;

    }

    .contact-notice{

        padding:2.5rem;

    }

}


@media (max-width:992px){

    .contact-page{

        padding:7rem 0 3rem;

    }

    .contact-moon{

        width:70px;

        top:80px;

        left:4%;

    }
     .contact-cloud{

        width:120px;
        top:140px;

    }
}

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

@media (max-width:768px){

    .contact-page{

        padding:7rem 0 3rem;

    }

    .contact-moon{

        width:70px;

        top:70px;

        left:4%;

    }

    .contact-stars{

        width:60px;

    }

    .contact-cloud{

        width:120px;

    }

    .contact-hero{

        margin-bottom:3rem;

    }

    .contact-hero h1{

        font-size:2.5rem;

    }

    .contact-description{

        font-size:1rem;

        line-height:1.8;

    }

    .contact-map iframe{

        height:260px;

    }

    .callback-card,

    .contact-sidebar{

        padding:1.5rem;

        border-radius:24px;

    }

    .callback-header{

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

    .callback-icon{

        width:60px;

        height:60px;

    }

    .callback-header h3{

        font-size:1.4rem;

    }

    .contact-info-item{

        gap:.85rem;

    }

    .contact-info-icon{

        width:52px;

        height:52px;

        font-size:1.2rem;

    }

    .contact-social{

        text-align:center;

    }

    .contact-social-icons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .contact-features{

        grid-template-columns:1fr;

        gap:1.2rem;

        margin:3rem 0;

    }

    .feature-card{

        padding:1.4rem;

    }

    .contact-notice{

        padding:2rem 1.5rem;

        border-radius:28px;

    }

    .contact-notice-icon{

        width:70px;

        height:70px;

        font-size:1.7rem;

    }

    .contact-notice h2{

        font-size:1.7rem;

    }

}



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

@media (max-width:576px){

    .contact-page{

        padding:6.5rem 0 2.5rem;

    }

    .contact-hero h1{

        font-size:2.1rem;

    }

    .contact-description{

        font-size:.96rem;

    }

    .contact-map iframe{

        height:220px;

    }

    .callback-card,

    .contact-sidebar{

        padding:1.25rem;

    }

    .callback-header h3{

        font-size:1.25rem;

    }

    .form-group input{

        height:56px;

        padding-left:52px;

        font-size:.95rem;

    }

    .form-group i{

        left:18px;

    }

    .contact-info-item{

        flex-direction:column;

        align-items:flex-start;

    }

    .contact-info-icon{

        margin-bottom:.3rem;

    }

    .contact-buttons{

        gap:.8rem;

    }

    .feature-card{

        flex-direction:column;

        align-items:center;

        text-align:center;

        padding:1.5rem;

    }

    .feature-icon{

        width:56px;

        height:56px;

        margin-bottom:.4rem;

    }

    .contact-notice{

        padding:1.8rem 1.25rem;

    }

    .contact-notice h2{

        font-size:1.5rem;

    }

    .contact-notice p{

        font-size:.95rem;

        line-height:1.8;

    }

}



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

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

    .contact-moon,

    .contact-stars,

    .contact-cloud{

        animation:none;

    }

    .feature-card,

    .contact-social-icons a{

        transition:none;

    }

}