/*======================================
    D-40 AV & Entertainment
    Contact Page Styles
======================================*/


/*======================================
    Contact Hero
======================================*/


.contact-hero{

    min-height:60vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:

    linear-gradient(
        rgba(0,0,0,.7),
        rgba(0,0,0,.9)
    ),

    url("../images/contact/contact-hero.jpg");

    background-size:cover;

    background-position:center;

    padding-top:120px;

}



.contact-hero h1{

    font-size:6rem;

    text-shadow:

    0 0 30px rgba(26,115,255,.8);

}



.contact-hero p{

    font-size:20px;

    margin-top:25px;

}






/*======================================
    Contact Cards
======================================*/


.contact-info{

    display:grid;

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

    gap:25px;

    background:#111;

}



.contact-card{

    background:#171717;

    padding:35px 25px;

    text-align:center;

    border-radius:18px;

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

    transition:.35s;

}



.contact-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:

    0 0 30px rgba(26,115,255,.25);

}



.contact-card i{

    font-size:45px;

    color:var(--primary);

    margin-bottom:20px;

}



.contact-card h3{

    font-size:1.8rem;

    margin-bottom:10px;

}





/*======================================
    Contact Form
======================================*/


.contact-section{

    background:#080808;

}



.contact-form-container{

    max-width:1000px;

    margin:auto;

    background:#151515;

    padding:50px;

    border-radius:20px;

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

    box-shadow:

    0 0 40px rgba(0,0,0,.4);

}



.contact-form-container h2{

    margin-bottom:40px;

}





.form-grid{

    display:grid;

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

    gap:25px;

}



form label{

    display:block;

    margin-bottom:8px;

    color:#ddd;

    font-weight:600;

}



form input,
form select,
form textarea{

    width:100%;

    background:#0d0d0d;

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

    color:white;

    padding:16px;

    border-radius:10px;

    font-family:'Inter',sans-serif;

    font-size:15px;

    transition:.3s;

}



form input:focus,
form select:focus,
form textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:

    0 0 15px rgba(26,115,255,.3);

}



form textarea{

    resize:none;

    margin-bottom:25px;

}



form .btn-primary{

    border:none;

    cursor:pointer;

}





/*======================================
    Location Section
======================================*/


.location{

    background:#111;

    text-align:center;

}



.map-placeholder{

    max-width:900px;

    height:350px;

    margin:auto;

    border-radius:20px;

    background:

    linear-gradient(
        135deg,
        #151515,
        #222
    );

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

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

}



.map-placeholder i{

    font-size:70px;

    color:var(--primary);

    margin-bottom:20px;

}



.map-placeholder p{

    font-size:18px;

}





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


.contact-section + .location{

    margin-top:0;

}





/*======================================
    Responsive
======================================*/


@media(max-width:1200px){


.contact-info{

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

}



}



@media(max-width:768px){


.contact-hero h1{

    font-size:3.8rem;

}



.contact-hero p{

    font-size:16px;

    padding:0 20px;

}



.contact-info{

    grid-template-columns:1fr;

}



.contact-form-container{

    padding:35px 25px;

}



.form-grid{

    grid-template-columns:1fr;

}



.map-placeholder{

    height:280px;

}



}




@media(max-width:450px){


.contact-hero h1{

    font-size:2.8rem;

}



.contact-card h3{

    font-size:1.5rem;

}



.contact-form-container{

    padding:25px 20px;

}



.map-placeholder i{

    font-size:50px;

}


}