/* ==========================================================
   DWALLNET CONTACT PAGE
   ULTRA MODERN DESIGN SYSTEM
========================================================== */


.dw-contact-page {

    --contact-dark:#071426;
    --contact-dark-two:#0b1f3a;
    --contact-blue:#2563eb;
    --contact-cyan:#06b6d4;
    --contact-text:#172033;
    --contact-muted:#64748b;
    --contact-border:rgba(15,23,42,.08);

    background:#f7f9fc;
    color:var(--contact-text);

    overflow:hidden;
}



.dw-contact-page *,
.dw-contact-page *::before,
.dw-contact-page *::after {

    box-sizing:border-box;

}




.dw-contact-page .container {

    width:min(1180px, calc(100% - 40px));
    margin:auto;

}





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


.dw-contact-hero {

    position:relative;

    min-height:620px;

    display:flex;
    align-items:center;


    background:

    radial-gradient(
        circle at 80% 20%,
        rgba(37,99,235,.35),
        transparent 30%
    ),

    radial-gradient(
        circle at 20% 80%,
        rgba(6,182,212,.15),
        transparent 30%
    ),

    linear-gradient(
        135deg,
        #061326,
        #0b1f3a
    );


}



.dw-contact-hero::before {


    content:"";

    position:absolute;

    inset:0;


    background-image:

    linear-gradient(
        rgba(255,255,255,.04) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.04) 1px,
        transparent 1px
    );


    background-size:50px 50px;

    opacity:.4;

}




.dw-contact-hero-content {

    position:relative;

    z-index:2;

    max-width:850px;

}




.dw-contact-hero .dw-section-label {

    color:#93c5fd;

}




.dw-contact-hero h1 {


    margin-bottom:30px;

    font-size:

    clamp(
        50px,
        7vw,
        85px
    );


    line-height:1;

    letter-spacing:-.06em;

    color:white;


}



.dw-contact-hero h1 span {


    display:block;


    background:

    linear-gradient(
        90deg,
        #60a5fa,
        #22d3ee
    );


    -webkit-background-clip:text;

    color:transparent;


}




.dw-contact-hero p {


    max-width:650px;

    font-size:18px;

    line-height:1.8;

    color:

    rgba(
        255,255,255,.72
    );


}






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



.dw-contact-main {


    padding:120px 0;

    background:white;

}





.dw-contact-grid {


    display:grid;

    grid-template-columns:
    .9fr 1.1fr;

    gap:70px;

    align-items:start;


}






.dw-contact-info h2 {


    font-size:

    clamp(
        35px,
        5vw,
        58px
    );


    line-height:1.05;

    letter-spacing:-.04em;

    color:var(--contact-dark);


}



.dw-contact-info > p {


    color:var(--contact-muted);

    line-height:1.8;

    max-width:520px;


}







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


.dw-contact-cards {


    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:40px;


}





.dw-contact-card {


    display:flex;

    align-items:center;

    gap:20px;


    padding:25px;


    border:

    1px solid var(--contact-border);


    border-radius:22px;


    background:#fff;


    transition:.3s ease;


}



.dw-contact-card:hover {


    transform:translateY(-5px);


    box-shadow:

    0 25px 60px rgba(15,23,42,.08);


}





.dw-contact-icon {


    width:55px;

    height:55px;


    display:grid;

    place-items:center;


    border-radius:18px;


    color:white;


    font-size:22px;


    background:

    linear-gradient(
        135deg,
        var(--contact-blue),
        var(--contact-cyan)
    );


}




.dw-contact-card strong {


    display:block;

    margin-bottom:5px;

    color:var(--contact-dark);


}



.dw-contact-card p {


    margin:0;

    color:var(--contact-muted);


}






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



.dw-contact-form-box {


    padding:45px;


    border-radius:30px;


    background:white;


    border:

    1px solid var(--contact-border);


    box-shadow:

    0 35px 90px rgba(15,23,42,.08);


}




.dw-form-header h3 {


    margin-bottom:10px;


    font-size:32px;


    color:var(--contact-dark);


}




.dw-form-header p {


    color:var(--contact-muted);


}






.dw-modern-contact-form {


    margin-top:35px;

}



.dw-form-row {


    display:grid;

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

    gap:20px;


}





.dw-form-group {


    margin-bottom:22px;

}



.dw-form-group label {


    display:block;

    margin-bottom:9px;


    font-size:14px;

    font-weight:700;


    color:var(--contact-dark);


}




.dw-form-group input,
.dw-form-group select,
.dw-form-group textarea {


    width:100%;


    padding:16px 18px;


    border-radius:14px;


    border:

    1px solid #dbe3ef;


    outline:none;


    background:#f8fafc;


    font-size:15px;


    transition:.25s ease;


}





.dw-form-group textarea {


    resize:vertical;


}





.dw-form-group input:focus,
.dw-form-group select:focus,
.dw-form-group textarea:focus {


    border-color:var(--contact-blue);


    background:white;


    box-shadow:

    0 0 0 4px rgba(37,99,235,.12);


}





.dw-contact-submit {


    width:100%;


    height:58px;


    border:none;


    border-radius:15px;


    cursor:pointer;


    color:white;


    font-size:16px;

    font-weight:700;


    background:

    linear-gradient(
        135deg,
        var(--contact-blue),
        var(--contact-cyan)
    );


    transition:.3s ease;


}





.dw-contact-submit:hover {


    transform:translateY(-4px);


    box-shadow:

    0 20px 40px rgba(37,99,235,.3);


}







/* ==========================================================
   SERVICES
========================================================== */



.dw-contact-services {


    padding:120px 0;

    background:#f7f9fc;


}



.dw-contact-heading {


    max-width:750px;

    margin-bottom:50px;


}



.dw-contact-heading h2 {


    font-size:

    clamp(
        35px,
        5vw,
        55px
    );


    letter-spacing:-.04em;


}






.dw-contact-service-grid {


    display:grid;

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

    gap:25px;


}




.dw-service-box {


    padding:40px;


    border-radius:25px;


    background:white;


    border:

    1px solid var(--contact-border);


    transition:.3s ease;


}



.dw-service-box:hover {


    transform:translateY(-8px);


    box-shadow:

    0 30px 70px rgba(15,23,42,.08);


}




.dw-service-box span {


    font-size:50px;

    font-weight:900;

    color:

    rgba(37,99,235,.15);


}



.dw-service-box h3 {


    margin:20px 0 10px;


    font-size:25px;


    color:var(--contact-dark);


}




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


.dw-contact-map {


    padding:100px 0;

    background:white;


}



.dw-map-placeholder {


    height:350px;


    display:grid;

    place-items:center;


    border-radius:30px;


    color:white;


    text-align:center;


    background:


    linear-gradient(
        135deg,
        #061326,
        #2563eb
    );


}




.dw-map-placeholder span {


    font-size:13px;

    letter-spacing:.2em;

    font-weight:800;


}




.dw-map-placeholder h3 {


    font-size:40px;

    margin:15px 0;


}





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



.dw-contact-cta {


    padding:120px 0;


    text-align:center;


    color:white;


    background:

    linear-gradient(
        135deg,
        #061326,
        #0b1f3a
    );


}



.dw-contact-cta h2 {


    color:white;

    font-size:

    clamp(
        38px,
        5vw,
        60px
    );


}



.dw-contact-cta p {


    color:

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


    margin-bottom:35px;


}







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



@media(max-width:900px){


.dw-contact-grid {

    grid-template-columns:1fr;

}



.dw-contact-service-grid {

    grid-template-columns:1fr;

}



.dw-form-row {

    grid-template-columns:1fr;

}



}





@media(max-width:600px){


.dw-contact-page .container {

    width:
    calc(100% - 28px);

}



.dw-contact-hero {

    min-height:520px;

}



.dw-contact-form-box {

    padding:25px;

}



.dw-contact-main,
.dw-contact-services,
.dw-contact-map,
.dw-contact-cta {

    padding:80px 0;

}



.dw-map-placeholder {

    height:260px;

}



}

.dw-form-message{

padding:20px 25px;

border-radius:15px;

margin-bottom:25px;

font-weight:600;

}



.dw-form-message.success{

background:#dcfce7;

color:#166534;

}



.dw-form-message.error{

background:#fee2e2;

color:#991b1b;

}