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

.contact-section{
    background:#0b0b12;
    padding:120px 10%;
    text-align:center;
}

.contact-header{
    max-width:760px;
    margin:auto;
}

.subtitle{
    display:inline-block;
    color:var(--primary);
    letter-spacing:4px;
    font-size:14px;
    font-weight:700;
    margin-bottom:18px;
}

.contact-header h2{
    font-family:'Sora',sans-serif;
    font-size:56px;
    color:#fff;
    font-weight:800;
    line-height:1.1;
    margin-bottom:20px;
}

.contact-header p{
    color:#aeb4c0;
    font-size:18px;
    line-height:1.8;
    margin-bottom:40px;
}

.cta-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:18px 38px;

    background:var(--primary);
    color:#fff;

    text-decoration:none;
    font-weight:600;

    border-radius:50px;

    transition:.35s ease;
}

.cta-btn:hover{

    background:#ff2f74;

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(255,79,135,.35);

}

.divider{

    width:90px;
    height:4px;

    background:var(--primary);

    margin:80px auto;

    border-radius:50px;

}

.contact-card{

    max-width:650px;

    margin:auto;

    padding:50px;

    background:#151515;

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

    border-radius:25px;

    box-shadow:0 20px 60px rgba(0,0,0,.35);

}

.contact-card h3{

    color:#fff;

    font-size:36px;

    margin-bottom:35px;

}

.contact-item{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    margin:22px 0;

}

.contact-item i{

    width:22px;

    color:var(--primary);

    font-size:20px;

}

.contact-item a,
.contact-item span{

    color:#d8d8d8;

    font-size:17px;

    text-decoration:none;

    transition:.3s;

}

.contact-item a:hover{

    color:var(--primary);

}

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

@media(max-width:992px){

.contact-section{

    padding:100px 8%;

}

.contact-header h2{

    font-size:46px;

}

.contact-card{

    padding:45px 35px;

}

}

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

@media(max-width:768px){

.contact-section{

    padding:80px 6%;

}

.contact-header h2{

    font-size:34px;

}

.contact-header p{

    font-size:16px;

}

.contact-card{

    padding:35px 25px;

}

.contact-card h3{

    font-size:30px;

}

.contact-item{

    flex-direction:column;

    gap:10px;

}

.contact-item a,
.contact-item span{

    font-size:15px;

}

.cta-btn{

    width:100%;

    max-width:320px;

}

}

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

@media(max-width:480px){

.contact-header h2{

    font-size:28px;

}

.contact-header p{

    font-size:15px;

}

.contact-card{

    padding:30px 20px;

}

.contact-card h3{

    font-size:26px;

}

}