@import url("variables.css");

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

.contact-hero{

    background:#081B29;
    padding:170px 0 100px;
    text-align:center;

}

.contact-hero .section-tag{

    color:#1EA6E8;
    letter-spacing:2px;
    font-weight:700;
    text-transform:uppercase;

}

.contact-hero h1{

    font-size:64px;
    color:#fff;
    margin:20px 0;

}

.contact-hero p{

    max-width:760px;
    margin:auto;
    color:#CBD5E1;
    font-size:18px;
    line-height:1.9;

}

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

.contact-cards{

    background:#F8FAFC;
    padding:70px 0;

}

.cards-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.contact-card{

    background:#fff;
    border-radius:25px;
    padding:35px 25px;
    text-align:center;
    transition:.35s;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.contact-card:hover{

    transform:translateY(-10px);
    box-shadow:0 25px 45px rgba(30,166,232,.18);

}

.contact-card i{

    font-size:42px;
    color:#1EA6E8;
    margin-bottom:20px;

}

.contact-card h3{

    color:#081B29;
    margin-bottom:12px;
    font-size:24px;

}

.contact-card p{

    color:#64748B;
    line-height:1.8;

}

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

.contact-main{

    background:#F8FAFC;
    padding:40px 0 100px;

}

.contact-wrapper{

    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:45px;

}

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

.contact-form{

    background:#fff;
    border-radius:25px;
    padding:45px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.contact-form h2{

    color:#081B29;
    margin-bottom:30px;
    font-size:34px;

}

.contact-form form{

    display:flex;
    flex-direction:column;
    gap:20px;

}

.contact-form input,
.contact-form textarea{

    width:100%;
    padding:16px 20px;
    border:1px solid #D6E2EE;
    border-radius:12px;
    outline:none;
    font-size:15px;
    font-family:inherit;

}

.contact-form input:focus,
.contact-form textarea:focus{

    border-color:#1EA6E8;

}

.contact-form textarea{

    resize:none;

}

/*=========================================
COMPANY INFO
=========================================*/

.company-info{

    background:#fff;
    border-radius:25px;
    padding:45px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.company-info h2{

    color:#081B29;
    margin-bottom:30px;
    font-size:34px;

}

.info-item{

    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-bottom:30px;

}

.info-item i{

    width:45px;
    height:45px;
    background:#E6F6FD;
    color:#1EA6E8;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:18px;
    flex-shrink:0;

}

.info-item h4{

    color:#081B29;
    margin-bottom:6px;

}

.info-item p{

    color:#64748B;
    line-height:1.8;

}

.info-item a{

    color:#1EA6E8;
    text-decoration:none;
    font-weight:600;

}

.info-item a:hover{

    text-decoration:underline;

}

/*=========================================
MAP
=========================================*/

.map-section{

    background:#F8FAFC;
    padding-bottom:100px;

}

.map-section iframe{

    width:100%;
    height:450px;
    border:none;
    border-radius:25px;

}
#success-message{

    margin-top:20px;

    font-size:16px;

    font-weight:600;

    color:#16A34A;

}