/* =====================================================
   CONTACTS PAGE
===================================================== */

.contacts-hero{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding:20px 0 60px;

}

.contacts-card{

    width:100%;

    max-width:1500px;

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

    backdrop-filter:blur(18px);

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

    border-radius:34px;

    padding:55px;

    box-shadow:0 25px 60px rgba(0,0,0,.08);

    animation:fadePage .8s ease;

}

.contacts-card h1{

    text-align:center;

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

    font-size:62px;

    margin-bottom:25px;

}

.contacts-description{

    max-width:900px;

    margin:0 auto 60px;

    text-align:center;

    font-size:22px;

    line-height:1.9;

    color:var(--text-light);

}

.contacts-grid{

    display:grid;

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

    gap:30px;

    margin-bottom:60px;

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

.contact-item{

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

    backdrop-filter:blur(14px);

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

    border-radius:26px;

    padding:35px;

    text-align:center;

    transition:.35s;

    cursor:pointer;

}

.contact-item:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.10);

    border-color:rgba(199,161,90,.45);

}

.contact-icon{

    font-size:48px;

    margin-bottom:20px;

}

.contact-item h3{

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

    font-size:30px;

    margin-bottom:15px;

}

.contact-item p{

    font-size:18px;

    color:var(--text-light);

    word-break:break-word;

}

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

.contact-form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.contact-form h2{

    text-align:center;

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

    font-size:42px;

    margin-bottom:15px;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:18px 22px;

    border:none;

    border-radius:18px;

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

    font-size:18px;

    outline:none;

    transition:.3s;

}

.contact-form input:focus,

.contact-form textarea:focus{

    box-shadow:0 0 0 3px rgba(199,161,90,.25);

}

.contact-form textarea{

    resize:vertical;

    min-height:180px;

}
/* =====================================================
   BUTTON
===================================================== */

.contact-form .primary-button{

    align-self:center;

    min-width:280px;

    margin-top:10px;

}

/* =====================================================
   DECORATION
===================================================== */

.contact-item{

    position:relative;

    overflow:hidden;

}

.contact-item::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    top:-80px;

    right:-80px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(199,161,90,.15),
        transparent 70%
    );

    pointer-events:none;

}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:900px){

    .contacts-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .contacts-card{

        padding:25px;

    }

    .contacts-card h1{

        font-size:38px;

    }

    .contacts-description{

        font-size:18px;

        margin-bottom:40px;

    }

    .contact-item{

        padding:25px;

    }

    .contact-item h3{

        font-size:24px;

    }

    .contact-form h2{

        font-size:30px;

    }

    .contact-form input,

    .contact-form textarea{

        font-size:16px;

        padding:16px 18px;

    }

    .contact-form .primary-button{

        width:100%;

        min-width:0;

    }

}