/* =========================================================
   EASY LEARN TECHNOLOGY
   CONTACT PAGE
   DARK BLUE • PROFESSIONAL • ANIMATED
========================================================= */


:root {

    --navy: #020817;
    --navy-light: #06142e;
    --blue-dark: #08285a;
    --blue: #0866ff;
    --blue-light: #38bdf8;
    --cyan: #67e8f9;

    --white: #ffffff;
    --text: #0f172a;
    --muted: #64748b;

    --border: #e2e8f0;

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

}


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

.contact-hero {

    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    overflow: hidden;

    text-align: center;

    color: white;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(56,189,248,.18),
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 20%,
            rgba(8,102,255,.3),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #020817,
            #06142e,
            #08285a
        );

}


/* Grid */

.contact-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .3;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025)
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025)
            1px,
            transparent 1px
        );

    background-size: 60px 60px;

}


/* Glow */

.hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(20px);

}


.glow-one {

    width: 350px;
    height: 350px;

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

    background:
        rgba(56,189,248,.16);

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

}


.glow-two {

    width: 400px;
    height: 400px;

    right: -180px;
    bottom: -220px;

    background:
        rgba(8,102,255,.25);

    animation:
        floatingGlow
        10s
        ease-in-out
        infinite reverse;

}


@keyframes floatingGlow {

    0%,100% {

        transform:
            scale(1)
            translate(0,0);

    }

    50% {

        transform:
            scale(1.25)
            translate(20px,-20px);

    }

}


.contact-hero-content {

    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: auto;

    animation:
        heroReveal
        1s
        ease both;

}


@keyframes heroReveal {

    from {

        opacity: 0;

        transform:
            translateY(40px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


.hero-badge {

    display: inline-block;

    padding:
        9px 15px;

    border:
        1px solid
        rgba(103,232,249,.3);

    border-radius: 50px;

    color: var(--cyan);

    background:
        rgba(56,189,248,.08);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;

}


.contact-hero h1 {

    margin:
        25px 0 20px;

    font-size:
        clamp(
            45px,
            7vw,
            78px
        );

    line-height: 1;

    letter-spacing: -4px;

}


.contact-hero h1 strong {

    display: block;

    color: transparent;

    background:

        linear-gradient(
            90deg,
            #38bdf8,
            #67e8f9,
            #60a5fa
        );

    background-clip: text;

    -webkit-background-clip: text;

    background-size: 200% auto;

    animation:
        textGradient
        4s
        linear
        infinite;

}


@keyframes textGradient {

    to {

        background-position:
            200% center;

    }

}


.contact-hero p {

    max-width: 650px;

    margin:
        0 auto;

    color:
        rgba(226,232,240,.78);

    font-size: 17px;

    line-height: 1.8;

}


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

.hero-actions {

    display: flex;

    justify-content: center;

    gap: 14px;

    margin-top: 32px;

}


.contact-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 52px;

    padding:
        0 24px;

    border-radius: 12px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 900;

    overflow: hidden;

    transition:
        var(--transition);

}


.contact-btn:hover {

    transform:
        translateY(-4px);

}


.contact-btn.primary {

    color: white;

    background:
        linear-gradient(
            135deg,
            #0866ff,
            #0648c7
        );

    box-shadow:
        0 15px 35px
        rgba(8,102,255,.3);

}


.contact-btn.primary:hover {

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

}


.contact-btn.outline {

    color: white;

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

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

    backdrop-filter:
        blur(10px);

}


.contact-btn.outline:hover {

    border-color:
        rgba(103,232,249,.5);

    background:
        rgba(56,189,248,.1);

}


/* =========================================================
   INFORMATION
========================================================= */

.contact-information {

    padding:
        110px 0;

    background:
        white;

}


.section-heading {

    max-width: 700px;

    margin:
        0 auto 55px;

    text-align: center;

}


.section-heading span {

    color:
        var(--blue);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;

}


.section-heading h2 {

    margin:
        13px 0;

    color:
        var(--navy-light);

    font-size:
        clamp(
            35px,
            5vw,
            52px
        );

    letter-spacing: -2px;

}


.section-heading h2 strong {

    color:
        var(--blue);

}


.section-heading p {

    color:
        var(--muted);

    line-height: 1.8;

}


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

.contact-grid {

    display: grid;

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

    gap: 18px;

}


.contact-card {

    position: relative;

    overflow: hidden;

    padding: 30px;

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

    border-radius: 22px;

    background: white;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);

}


.contact-card::before {

    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -80px;
    top: -80px;

    border-radius: 50%;

    background:
        rgba(8,102,255,.07);

    transition:
        transform .5s ease;

}


.contact-card:hover::before {

    transform:
        scale(2);

}


.contact-card:hover {

    transform:
        translateY(-10px);

    border-color:
        rgba(8,102,255,.2);

    box-shadow:
        0 25px 60px
        rgba(6,20,46,.1);

}


.contact-icon {

    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    margin-bottom: 22px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #dbeafe
        );

    font-size: 25px;

    transition:
        var(--transition);

}


.contact-card:hover
.contact-icon {

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

}


.contact-card > span {

    color:
        var(--blue);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.contact-card h3 {

    margin:
        8px 0;

    color:
        var(--navy-light);

    font-size: 18px;

}


.contact-card p {

    color:
        var(--muted);

    font-size: 13px;

    line-height: 1.7;

}


.contact-card a {

    position: relative;

    display: inline-block;

    margin-top: 10px;

    color:
        var(--blue);

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

}


.contact-card a:hover {

    text-decoration:
        underline;

}


.working-hours {

    display: block;

    margin-top: 12px;

    color:
        var(--blue);

    font-size: 14px;

}


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

.contact-form-section {

    position: relative;

    overflow: hidden;

    padding:
        110px 0;

    background:
        #f5f8fc;

}


.contact-form-section::before {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

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

    border-radius: 50%;

    background:
        rgba(8,102,255,.07);

    filter: blur(30px);

}


.contact-form-grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 80px;

    align-items: start;

}


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

.contact-form-intro > span {

    color:
        var(--blue);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;

}


.contact-form-intro h2 {

    margin:
        15px 0;

    color:
        var(--navy-light);

    font-size:
        clamp(
            40px,
            5vw,
            57px
        );

    line-height: 1.05;

    letter-spacing: -2px;

}


.contact-form-intro h2 strong {

    display: block;

    color:
        var(--blue);

}


.contact-form-intro > p {

    max-width: 520px;

    color:
        var(--muted);

    line-height: 1.8;

}


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

.contact-points {

    margin-top: 30px;

}


.contact-points div {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 14px;

}


.contact-points span {

    width: 27px;
    height: 27px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: white;

    background:
        var(--blue);

    font-size: 12px;

    font-weight: 900;

}


.contact-points p {

    margin: 0;

    color:
        #334155;

    font-size: 13px;

    font-weight: 700;

}


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

.contact-form {

    position: relative;

    padding: 40px;

    border:
        1px solid
        #e2e8f0;

    border-radius: 28px;

    background: white;

    box-shadow:
        0 30px 80px
        rgba(6,20,46,.08);

}


.contact-form::before {

    content: "";

    position: absolute;

    top: 0;
    left: 35px;
    right: 35px;

    height: 3px;

    border-radius:
        0 0 10px 10px;

    background:
        linear-gradient(
            90deg,
            #0866ff,
            #38bdf8,
            #67e8f9
        );

}


.form-header {

    margin-bottom: 30px;

}


.form-header span {

    color:
        var(--blue);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.form-header h3 {

    margin-top: 7px;

    color:
        var(--navy-light);

    font-size: 24px;

}


.form-row {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 16px;

}


.form-group {

    margin-bottom: 20px;

}


.form-group label {

    display: block;

    margin-bottom: 8px;

    color:
        var(--navy-light);

    font-size: 12px;

    font-weight: 800;

}


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

    width: 100%;

    padding:
        14px 15px;

    outline: none;

    border:
        1px solid
        #d8e1ec;

    border-radius: 12px;

    color:
        var(--text);

    background:
        #f8fafc;

    font-family:
        inherit;

    font-size: 13px;

    transition:
        .3s ease;

}


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

    border-color:
        var(--blue);

    background: white;

    box-shadow:
        0 0 0 4px
        rgba(8,102,255,.08);

}


.form-group textarea {

    min-height: 140px;

    resize: vertical;

}


.submit-btn {

    width: 100%;

    min-height: 54px;

    border: none;

    border-radius: 12px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #0866ff,
            #0648c7
        );

    font-family:
        inherit;

    font-size: 14px;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 12px 30px
        rgba(8,102,255,.25);

    transition:
        var(--transition);

}


.submit-btn:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 40px
        rgba(8,102,255,.35);

}


.submit-btn span {

    margin-left: 7px;

    transition:
        transform .3s ease;

}


.submit-btn:hover span {

    transform:
        translateX(5px);

}


.form-message {

    margin-top: 15px;

    text-align: center;

    font-size: 12px;

    font-weight: 700;

}


/* =========================================================
   LOCATION
========================================================= */

.location-section {

    padding:
        110px 0;

    background: white;

}


.location-box {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    min-height: 430px;

    overflow: hidden;

    border-radius: 28px;

    background:
        #06142e;

    box-shadow:
        0 30px 80px
        rgba(6,20,46,.15);

}


.location-content {

    padding: 55px;

    color: white;

}


.location-content > span {

    color:
        var(--cyan);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;

}


.location-content h2 {

    margin:
        15px 0;

    font-size: 45px;

    line-height: 1.05;

    letter-spacing: -2px;

}


.location-content h2 strong {

    color:
        var(--cyan);

}


.location-content > p {

    max-width: 480px;

    color:
        rgba(191,208,231,.75);

    line-height: 1.8;

}


.address {

    margin-top: 25px;

}


.address strong {

    font-size: 14px;

}


.address p {

    color:
        rgba(191,208,231,.7);

    font-size: 13px;

}


.map-btn {

    display: inline-flex;

    margin-top: 20px;

    padding:
        13px 18px;

    border:
        1px solid
        rgba(103,232,249,.2);

    border-radius: 10px;

    color:
        var(--cyan);

    background:
        rgba(56,189,248,.07);

    text-decoration: none;

    font-size: 12px;

    font-weight: 900;

    transition:
        var(--transition);

}


.map-btn:hover {

    transform:
        translateY(-3px);

    background:
        rgba(56,189,248,.14);

}


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

.map-placeholder {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    overflow: hidden;

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

    background:

        radial-gradient(
            circle at center,
            rgba(56,189,248,.16),
            transparent 35%
        ),

        linear-gradient(
            rgba(255,255,255,.025)
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025)
            1px,
            transparent 1px
        );

    background-size:
        auto,
        45px 45px,
        45px 45px;

}


.map-placeholder::before {

    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    border:
        1px solid
        rgba(56,189,248,.2);

    border-radius: 50%;

    animation:
        mapPulse
        3s
        ease-in-out
        infinite;

}


@keyframes mapPulse {

    0%,100% {

        transform:
            scale(.8);

        opacity: .2;

    }

    50% {

        transform:
            scale(1.15);

        opacity: .8;

    }

}


.map-pin {

    position: relative;

    z-index: 2;

    width: 75px;
    height: 75px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(8,102,255,.18);

    border:
        1px solid
        rgba(103,232,249,.3);

    font-size: 32px;

    animation:
        pinFloat
        2.5s
        ease-in-out
        infinite;

}


@keyframes pinFloat {

    0%,100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-10px);

    }

}


.map-placeholder span {

    position: relative;

    z-index: 2;

    margin-top: 25px;

    color: white;

    font-weight: 800;

}


.map-placeholder small {

    position: relative;

    z-index: 2;

    margin-top: 5px;

    color:
        rgba(191,208,231,.6);

}


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

.contact-cta {

    position: relative;

    overflow: hidden;

    padding:
        110px 0;

    text-align: center;

    color: white;

    background:

        radial-gradient(
            circle at center,
            rgba(8,102,255,.3),
            transparent 35%
        ),

        #020817;

}


.contact-cta span {

    color:
        var(--cyan);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;

}


.contact-cta h2 {

    margin:
        15px auto;

    max-width: 800px;

    font-size:
        clamp(
            40px,
            6vw,
            65px
        );

    line-height: 1;

    letter-spacing: -3px;

}


.contact-cta h2 strong {

    color:
        var(--cyan);

}


.contact-cta p {

    margin:
        0 auto 30px;

    color:
        rgba(191,208,231,.75);

}


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

.whatsapp-button {

    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 999;

    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: white;

    background:
        #0aad5f;

    text-decoration: none;

    font-size: 25px;

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.2);

    animation:
        whatsappPulse
        2.5s
        infinite;

}


@keyframes whatsappPulse {

    0%,100% {

        box-shadow:
            0 0 0 0
            rgba(10,173,95,.35);

    }

    50% {

        box-shadow:
            0 0 0 13px
            rgba(10,173,95,0);

    }

}


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

.site-footer {

    padding:
        25px 0;

    text-align: center;

    color:
        rgba(191,208,231,.6);

    background:
        #010611;

    font-size: 12px;

}


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

@media (max-width: 1050px) {

    .contact-grid {

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

    }

}


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

@media (max-width: 850px) {

    .contact-hero {

        min-height:
            580px;

        padding:
            80px 0;

    }


    .contact-hero h1 {

        font-size:
            48px;

        letter-spacing:
            -2px;

    }


    .contact-form-grid,
    .location-box {

        grid-template-columns:
            1fr;

    }


    .contact-form-grid {

        gap:
            45px;

    }


    .map-placeholder {

        min-height:
            350px;

        border-left:
            none;

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

    }


    .location-content {

        padding:
            40px 30px;

    }

}


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

@media (max-width: 600px) {

    .hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .contact-btn {

        width: 100%;

    }


    .contact-grid {

        grid-template-columns:
            1fr;

    }


    .form-row {

        grid-template-columns:
            1fr;

        gap: 0;

    }


    .contact-form {

        padding:
            28px 20px;

        border-radius:
            22px;

    }


    .contact-hero h1 {

        font-size:
            43px;

    }


    .contact-hero p {

        font-size:
            15px;

    }


    .contact-information,
    .contact-form-section,
    .location-section,
    .contact-cta {

        padding:
            80px 0;

    }


    .location-content h2 {

        font-size:
            38px;

    }


    .contact-cta h2 {

        font-size:
            42px;

    }


    .whatsapp-button {

        right:
            18px;

        bottom:
            18px;

        width:
            54px;

        height:
            54px;

    }

}