.contacts-hero{
    position:relative;

    overflow:hidden;

    padding:70px 0 90px;

    background:
    linear-gradient(135deg,#0f172a 0%,#1e293b 45%,#2563eb 100%);
}

.contacts-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:0.35;
}

.contacts-glow-one{
    width:320px;
    height:320px;

    background:#38bdf8;

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

.contacts-glow-two{
    width:260px;
    height:260px;

    background:#1ad1bc;

    bottom:-80px;
    left:-80px;
}

.contacts-hero-content{
    position:relative;

    z-index:2;

    max-width:760px;
}

.contacts-badge{
    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:999px;

    background:rgba(255,255,255,0.08);

    backdrop-filter:blur(14px);

    color:white;

    font-weight:700;

    margin-bottom:26px;
}

.contacts-hero h1{
    font-size:72px;

    line-height:1.02;

    color:white;

    margin-bottom:24px;
}

.contacts-hero p{
    font-size:20px;

    line-height:1.7;

    color:rgba(255,255,255,0.82);
}

/* MAIN */

.contacts-main{
    background:#f8fafc;

    padding:80px 0;
}

.contacts-layout{
    display:grid;

    grid-template-columns:1fr 0.95fr;

    gap:34px;

    align-items:start;
}

/* LEFT */

.contacts-info{
    display:flex;

    flex-direction:column;

    gap:26px;
}

.contact-card{
    display:flex;

    gap:24px;

    align-items:flex-start;

    background:white;

    border-radius:34px;

    padding:34px;

    box-shadow:
    0 10px 30px rgba(15,23,42,0.04);

    transition:0.3s;
}

.contact-card:hover{
    transform:translateY(-6px);
}

.contact-icon{
    width:78px;
    height:78px;

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

    flex-shrink:0;

    border-radius:24px;

    background:#dbeafe;

    font-size:34px;
}

.contact-card h3{
    font-size:30px;

    margin-bottom:12px;
}

.contact-card p{
    color:#64748b;

    line-height:1.8;

    margin-bottom:14px;
}

.contact-card a{
    color:#2563eb;

    font-weight:700;

    text-decoration:none;
}

.contact-card a:hover{
    text-decoration:underline;
}

/* RIGHT */

.contacts-panel{
    position:sticky;

    top:120px;

    background:
    linear-gradient(135deg,#0f172a,#1e293b);

    color:white;

    border-radius:36px;

    padding:42px;

    overflow:hidden;
}

.contacts-panel::before{
    content:"";

    position:absolute;

    width:240px;
    height:240px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(59,130,246,0.35),
    transparent 70%);

    top:-120px;
    right:-120px;
}

.panel-top{
    position:relative;

    z-index:2;
}

.panel-icon{
    width:86px;
    height:86px;

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

    border-radius:28px;

    background:rgba(255,255,255,0.08);

    font-size:42px;

    margin-bottom:26px;
}

.contacts-panel h2{
    font-size:42px;

    margin-bottom:16px;
}

.contacts-panel p{
    color:rgba(255,255,255,0.78);

    line-height:1.8;
}

/* FEEDBACK */

.feedback-list{
    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    gap:18px;

    margin:36px 0;
}

.feedback-item{
    display:flex;

    gap:16px;

    align-items:flex-start;
}

.feedback-item span{
    color:#1ad1bc;

    font-size:18px;

    margin-top:2px;
}

.feedback-item p{
    margin:0;
}

/* BUTTON */

.contact-btn{
    position:relative;

    z-index:2;

    display:inline-flex;

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

    width:100%;

    height:58px;

    border-radius:18px;

    background:#2563eb;

    color:white;

    font-size:17px;

    font-weight:700;

    text-decoration:none;

    transition:0.3s;
}

.contact-btn:hover{
    transform:translateY(-3px);
}

/* EXTRA */

.contacts-extra{
    background:white;

    padding-bottom:80px;
}

.extra-box{
    position:relative;

    overflow:hidden;

    border-radius:40px;

    padding:60px;

    background:
    linear-gradient(135deg,#2563eb,#1d4ed8);
}

.extra-box::before{
    content:"";

    position:absolute;

    width:320px;
    height:320px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(255,255,255,0.18),
    transparent 70%);

    top:-140px;
    right:-120px;
}

.extra-content{
    position:relative;

    z-index:2;

    max-width:760px;

    color:white;
}

.extra-badge{
    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 16px;

    border-radius:999px;

    background:rgba(255,255,255,0.12);

    margin-bottom:24px;

    font-weight:700;
}

.extra-content h2{
    font-size:54px;

    line-height:1.1;

    margin-bottom:22px;
}

.extra-content p{
    font-size:18px;

    line-height:1.8;

    color:rgba(255,255,255,0.82);
}

/* MOBILE */

@media(max-width:980px){

    .contacts-layout{
        grid-template-columns:1fr;
    }

    .contacts-panel{
        position:relative;

        top:0;
    }

    .contacts-hero h1{
        font-size:56px;
    }

}

@media(max-width:768px){

    html,
    body{
        overflow-x:hidden;
    }

    .contacts-hero{
        padding:50px 0 70px;
    }

    .contacts-main{
        padding:50px 0;
    }

    .contact-card{
        padding:26px;
    }

    .contacts-panel{
        padding:30px;
    }

    .extra-box{
        padding:40px 28px;
    }

}

@media(max-width:640px){

    .contacts-hero h1{
        font-size:42px;
    }

    .contacts-hero p{
        font-size:18px;
    }

    .contact-card{
        flex-direction:column;
    }

    .contact-card h3{
        font-size:26px;
    }

    .contacts-panel h2{
        font-size:34px;
    }

    .extra-content h2{
        font-size:38px;
    }

}