/* CONTACT SECTION */

.contact-section{
background:#ffffff;
padding:120px 0;
}

.contact-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:start;
}

/* LEFT */

.contact-left h2{
font-size:36px;
margin-bottom:20px;
}

.contact-left p{
color:#555;
line-height:1.7;
margin-bottom:30px;
}

.contact-info p{
margin-bottom:15px;
}

/* FORM */

.contact-form{
display:flex;
flex-direction:column;
gap:16px;
}

.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.contact-form input, .contact-form textarea{
width:100%;
padding:14px;
border-radius:8px;
border:1px solid #ddd;
font-size:14px;
}

.contact-form textarea{
min-height:120px;
resize:none;
}

.contact-form button{
background:#000;
color:#fff;
border:none;
padding:14px;
border-radius:30px;
cursor:pointer;
font-size:15px;
}

/* TABLET */
@media(max-width:1024px){
.contact-container{
grid-template-columns:1fr;
gap:50px;
}
}

/* MOBILE */
@media(max-width:768px){

.contact-section{
background:#ffffff;
padding:120px 0;
}

.form-row{
grid-template-columns:1fr;
}
}


/* Dropdown */
/* =========================================
FORM GROUP
========================================= */

.form-group{

    width:100%;
}

.form-group label{

    display:block;

    font-size:14px;

    font-weight:600;

    margin-bottom:10px;

    color:#111;
}

/* =========================================
DROPDOWN STYLE
MATCHING YOUR INPUT DESIGN
========================================= */

.custom-select{
    width:100%;
    height:48px;
    padding:0 18px;
    border:1px solid #dcdcdc;
    border-radius:10px;
    background:#fff;
    /* font-size:16px; */
    color:#555;
    outline:none;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    transition:0.3s ease;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23666' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    background-size:16px;
}

/* HOVER */
.custom-select:hover{
    border-color:#999;
}

/* FOCUS */
.custom-select:focus{
    border-color:#000;
    box-shadow:0 0 0 3px rgba(0,0,0,0.05);
}

/* OPTION */
.custom-select option{
    color:#111;
    font-size:15px;
}

/* FULL WIDTH */
.full-width{
    grid-column:1 / -1;
}

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

@media(max-width:1024px){
    .custom-select{
        /* font-size:15px; */
    }
}

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

@media(max-width:768px){
    .custom-select{
        height:46px;
        /* font-size:14px; */
        padding:0 16px;
    }

    .form-group label{
        /* font-size:13px; */
    }
}