@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

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

.dx-contactblue-section{
    padding:100px 0;
    background:#f4f9ff;
}

.dx-contactblue-wrap{
    max-width:1080px;
    margin:0 auto;
    padding:0 40px;

    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:70px;
    align-items:start;
}

/* LEFT SIDE */

.dx-contactblue-info{
    padding-top:20px;
    text-align:left;
}

.dx-contactblue-label{
    display:inline-block;
    margin-bottom:20px;

    color:#1d76ec;

    font-size:13px;
    font-weight:800;
    letter-spacing:.15em;
    text-transform:uppercase;
    text-align:left;
}

.dx-contactblue-info h2{
    margin:0 0 25px;

    color:#061f4d;

    font-size:64px;
    line-height:1;
    font-weight:800;

    text-align:left;
}

.dx-contactblue-info > p{
    max-width:600px;

    margin:0 0 50px 0;

    color:#526784;

    font-size:20px;
    line-height:1.8;

    text-align:left;
}

/* CONTACT ITEMS */

.dx-contactblue-item{
    display:flex;
    align-items:flex-start;
    gap:22px;
    margin-bottom:35px;

    text-align:left;
}

.dx-contactblue-item i{
    width:70px;
    height:70px;
    min-width:70px;

    border-radius:50%;

    background:#1d76ec;
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:24px;
}

.dx-contactblue-item h3{
    margin:0 0 8px;

    color:#1d76ec;

    font-size:24px;
    font-weight:800;

    text-align:left;
}

.dx-contactblue-item p{
    margin:0;

    color:#526784;

    font-size:18px;
    line-height:1.7;

    text-align:left;
}

/* FORM */

.dx-contactblue-formbox{
    background:#061f4d;

    border-radius:5px;

    padding:25px;

    box-shadow:
    0 30px 80px rgba(9,42,104,.18);

    text-align:left;
}

.dx-contactblue-formbox h2{
    margin:0 0 20px;

    color:#fff;

    font-size:58px;
    line-height:1;
    font-weight:800;

    text-align:left;
}

.dx-contactblue-formbox > p{
    margin:0 0 35px;

    color:#8fc2ff;

    font-size:20px;
    line-height:1.7;

    text-align:left;
}

.dx-contactblue-formbox form{
    text-align:left;
}

.dx-contactblue-formbox label{
    display:block;

    margin:18px 0 10px;

    color:#fff;

    font-size:15px;
    font-weight:700;

    text-align:left;
}

.dx-contactblue-formbox input,
.dx-contactblue-formbox textarea{
    width:90%;

    padding:18px 30px;

    border-radius:5px;

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

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

    color:#fff;

    font-size:16px;

    outline:none;

    text-align:left;
}

.dx-contactblue-formbox input::placeholder,
.dx-contactblue-formbox textarea::placeholder{
    color:rgba(255,255,255,.45);
}

.dx-contactblue-formbox textarea{
    min-height:160px;
    resize:vertical;
}

.dx-contactblue-formbox button{
    width:100%;

    margin-top:28px;

    padding:18px 24px;

    border:none;
    border-radius:999px;

    background:linear-gradient(
        135deg,
        #1d76ec,
        #58aaff
    );

    color:#fff;

    font-size:17px;
    font-weight:800;

    cursor:pointer;

    transition:.35s ease;
}

.dx-contactblue-formbox button:hover{
    transform:translateY(-3px);

    box-shadow:
    0 16px 35px rgba(29,118,236,.35);
}

.dx-contactblue-formbox small{
    display:block;

    margin-top:18px;

    color:rgba(255,255,255,.6);

    font-size:13px;
    line-height:1.7;

    text-align:left;
}

/* MAP */

.dx-contactblue-map{
    max-width:1280px;
    margin:70px auto 0;
    padding:0 40px;
}

.dx-contactblue-map iframe{
    width:100%;
    height:450px;

    border:none;
    border-radius:30px;

    box-shadow:
    0 20px 55px rgba(9,42,104,.12);
}

/* RESPONSIVE */

@media(max-width:1024px){

    .dx-contactblue-wrap{
        grid-template-columns:1fr;
        gap:50px;
    }

    .dx-contactblue-info h2,
    .dx-contactblue-formbox h2{
        font-size:48px;
    }
}

@media(max-width:768px){

    .dx-contactblue-section{
        padding:70px 0;
    }

    .dx-contactblue-wrap,
    .dx-contactblue-map{
        padding:0 24px;
    }

    .dx-contactblue-formbox{
        padding:35px 25px;
    }

    .dx-contactblue-info h2,
    .dx-contactblue-formbox h2{
        font-size:40px;
    }

    .dx-contactblue-item{
        flex-direction:column;
    }

    .dx-contactblue-map iframe{
        height:350px;
    }
}