/*=========================================
Single Hero
=========================================*/

.single-contact-hero {
    padding: 44px 0;
    background: #fff;
}

.contact-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
    gap: 40px;
    align-items: center;
}

.contact-hero-copy h1 {
    margin: 0 0 10px;
    color: #102f4d;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.12;
}

.contact-hero-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    color: #66788a;
    font-size: 14px;
}

.contact-hero-breadcrumb a,
.contact-hero-details a {
    color: #087f7a;
    text-decoration: none;
}

.contact-hero-details {
    margin: 0 0 18px;
    border-top: 1px solid #cbdfe4;
}

.contact-hero-details div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #cbdfe4;
}

.contact-hero-details dt,
.contact-hero-details dd {
    margin: 0;
}

.contact-hero-details dt {
    color: #102f4d;
    font-weight: 700;
}

.contact-hero-call {
    display: inline-flex;
    padding: 12px 20px;
    border-radius: 6px;
    background: #087f7a;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.contact-hero-call:hover {
    background: #05645f;
    color: #fff;
}

.contact-hero-image {
    padding: 7px;
    border: 1px solid #d8e1e5;
    border-radius: 4px;
    box-shadow: 0 3px 12px rgba(16, 47, 77, .12);
}

.contact-hero-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.single-hero{

    position:relative;

    height:400px;   /* pehle 520px tha */

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

.single-hero .hero-bg{

    position:absolute;

    inset:0;

}

.single-hero .hero-bg img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.single-hero .hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.58);

}

.single-hero .container{

    position:relative;

    z-index:2;

}

.hero-content{

    max-width:1100px;

    margin:auto;

    text-align:center;

}

.hero-content h1{

    color:#fff;

    font-size:52px;      /* pehle 64px */

    line-height:1.25;

    font-weight:700;

    margin-bottom:28px;

}

.hero-breadcrumb{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

}

.hero-breadcrumb a{

    display:inline-block;

    padding:8px 16px;

    background:#fff;

    color:#0d4f8b;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    font-size:15px;

    transition:.3s;

}

.hero-breadcrumb a:hover{

    background:#0d6efd;

    color:#fff;

}

.hero-breadcrumb .separator{

    color:#fff;

    font-size:18px;

    font-weight:700;

}

.hero-breadcrumb .current{

    color:#fff;

    font-size:16px;

    font-weight:500;

}

/* Tablet */

@media(max-width:991px){

    .contact-hero-grid {
        grid-template-columns: 1fr;
    }

    .single-hero{

        height:340px;

    }

    .hero-content h1{

        font-size:38px;

    }

}

/* Mobile */

@media(max-width:576px){

    .single-contact-hero {
        padding: 28px 0;
    }

    .contact-hero-grid {
        gap: 24px;
    }

    .contact-hero-details div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .single-hero{

        height:280px;

    }

    .hero-content h1{

        font-size:28px;

        margin-bottom:18px;

    }

    .hero-breadcrumb{

        gap:6px;

    }

    .hero-breadcrumb a{

        padding:6px 12px;

        font-size:13px;

    }

    .hero-breadcrumb .current{

        font-size:13px;

    }

}