/* Gayatri Devi Group — corporate/diversified-enterprise theme. Black + orange. */

:root {
    --black: #161616;
    --black-deep: #0A0A0A;
    --orange: #FB8608;
    --orange-deep: #D96F00;
    --ink: #1A1A1A;
    --ink-soft: #5C5C5C;
    --surface: #F6F6F4;
    --line: #E5E5E3;
}

body {
    color: var(--ink);
    background: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.02rem;
    line-height: 1.7;
}

h1, h2, h3, h4, .gg-page-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -.01em;
}

a { color: var(--black); }
a:hover { color: var(--orange); }

/* ---- Content width + full-bleed breakout ----
   .page-content is the readable column; sections that need to span the
   full viewport (the hero slider/band, interior page header) opt out via
   this breakout instead of the template hardcoding two different wrappers. */
.page-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
}
.page-content > .block-html:first-child { margin-top: 0; }
.gg-hero-slider,
.gg-hero-band,
.gg-hero {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
}

/* ---- Top utility bar ---- */
.gg-topbar {
    background: var(--black-deep);
    color: rgba(255, 255, 255, .82);
    font-size: .82rem;
    padding: .5rem 0;
}
.gg-topbar-contact a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    margin-right: 1.25rem;
}
.gg-topbar-contact a:hover { color: var(--orange); }
.gg-topbar-tag {
    color: rgba(255, 255, 255, .55);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .74rem;
}

/* ---- Main nav ---- */
.gg-nav {
    background: var(--black);
    padding: .6rem 0;
}
.gg-logo { height: 68px; width: auto; }
.gg-logo-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    color: #fff;
}
.gg-nav .nav-link {
    color: rgba(255, 255, 255, .88);
    font-weight: 600;
    font-size: .92rem;
    padding: .55rem .9rem !important;
}
.gg-nav .nav-link:hover,
.gg-nav .nav-link:focus,
.gg-nav .dropdown-toggle:hover {
    color: var(--orange);
}
.gg-nav .dropdown-menu {
    border: 0;
    border-radius: .5rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
    padding: .5rem;
}
.gg-nav .dropdown-item {
    border-radius: .35rem;
    font-weight: 500;
    padding: .55rem .8rem;
}
.gg-nav .dropdown-item:hover { background: var(--surface); color: var(--orange); }
.gg-nav .navbar-toggler {
    border-color: rgba(255, 255, 255, .3);
}
.gg-nav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.gg-btn-brand {
    background: var(--orange);
    border: 0;
    color: #fff !important;
    font-weight: 700;
    padding: .5rem 1.2rem !important;
    border-radius: .4rem;
}
.gg-btn-brand:hover { background: var(--orange-deep); color: #fff !important; }

/* ---- Interior page hero banner ----
   Every non-home page provides its own background-image via inline style
   (a gradient layered with the page's photo — set as the `background-image`
   value directly on the element), keeping this one class consistent across
   About/CSR/News/Career/Contact/every division page. */
.gg-hero {
    background-color: var(--black);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 4.5rem 0;
    margin-bottom: 2.5rem;
    position: relative;
    overflow: hidden;
    border-bottom: 4px solid var(--orange);
}
.gg-hero-title {
    color: #fff;
    margin: 0;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    position: relative;
}
.gg-hero-subtitle {
    color: rgba(255, 255, 255, .8);
    max-width: 620px;
    margin: .6rem 0 0;
    font-size: 1.02rem;
    position: relative;
}

/* ---- Home hero slider (rotating banner — real campaign creatives, shown
   natively; no dark overlay since the images already carry their own
   captions with a light-to-white fade). ---- */
.gg-hero-slider {
    aspect-ratio: 1920 / 1024;
    max-height: 720px;
    background: #fff;
}
.gg-hero-slider .carousel-inner,
.gg-hero-slider .carousel-item {
    height: 100%;
}
.gg-hero-slider .carousel-item img {
    width: 100%;
    height: 100%;
    /* contain (not cover): these slides are pre-designed creatives with
       their own text baked in on one side — cropping would cut that text
       off on wide viewports. Contain keeps the whole creative visible and
       centered, letterboxed in the slider's own white background so the
       letterboxing is invisible against the page. */
    object-fit: contain;
    object-position: center;
    display: block;
}
.gg-hero-slider .carousel-control-prev,
.gg-hero-slider .carousel-control-next {
    width: 4rem;
}
.gg-hero-slider .carousel-control-prev-icon,
.gg-hero-slider .carousel-control-next-icon {
    background-color: rgba(20, 20, 20, .45);
    border-radius: 50%;
    padding: 1.4rem;
    background-size: 1.2rem;
}
.gg-hero-slider .carousel-indicators {
    margin-bottom: 1rem;
}
.gg-hero-slider .carousel-indicators [data-bs-target] {
    width: 10px; height: 10px;
    border-radius: 50%;
    background-color: rgba(20, 20, 20, .3);
    border: 0;
    margin: 0 5px;
}
.gg-hero-slider .carousel-indicators .active { background-color: var(--orange); }
@media (max-width: 767.98px) {
    .gg-hero-slider { aspect-ratio: 4 / 5; max-height: 520px; }
    .gg-hero-slider .carousel-item img { object-position: right center; }
}

/* ---- Hero statement band (sits below the slider on the homepage) ---- */
.gg-hero-band {
    background: linear-gradient(120deg, var(--black) 0%, #262626 100%);
    color: #fff;
    padding: 3rem 0;
    position: relative;
    overflow: hidden;
}
.gg-hero-band::after {
    content: "";
    position: absolute;
    right: -60px; bottom: -80px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: rgba(251, 134, 8, .12);
}
.gg-hero-eyebrow {
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    font-size: .8rem;
    margin-bottom: .75rem;
    position: relative;
}
.gg-hero-band h1 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 2.9rem);
    max-width: 720px;
    margin-bottom: 1rem;
    position: relative;
}
.gg-hero-band p {
    color: rgba(255, 255, 255, .82);
    max-width: 620px;
    font-size: 1.08rem;
    margin-bottom: 1.75rem;
    position: relative;
}
.gg-hero-band .btn { position: relative; }

/* ---- Stat band (full-bleed, sits under the hero) ----
   Markup: .stat-bar > .container.d-flex > div (one per stat) — the
   Bootstrap .container caps/centers the row; .stat-bar just supplies the
   full-bleed black background, so selectors below target .container > div,
   not a direct child of .stat-bar. */
.stat-bar {
    background: var(--black);
    padding: 3.5rem 1.5rem;
    margin: 0 0 4.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
}
.stat-bar::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 900px; height: 900px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(251, 134, 8, .1) 0%, rgba(251, 134, 8, 0) 60%);
    pointer-events: none;
}
.stat-bar .container { position: relative; gap: 0; }
.stat-bar .container > div {
    min-width: 160px;
    padding: 0 2.5rem;
    position: relative;
}
.stat-bar .container > div + div::before {
    content: "";
    position: absolute;
    left: 0; top: 15%; bottom: 15%;
    width: 1px;
    background: rgba(255, 255, 255, .14);
}
.stat-number {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    color: var(--orange);
    line-height: 1;
}
.stat-label {
    display: block;
    color: rgba(255, 255, 255, .7);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: .6rem;
}
@media (max-width: 576px) {
    .stat-bar .container { row-gap: 1.5rem; }
    .stat-bar .container > div { padding: 0 1.25rem; min-width: 45%; }
    .stat-bar .container > div + div::before { display: none; }
}

/* ---- Reusable centered section heading ---- */
.gg-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.75rem;
}
.gg-section-eyebrow {
    display: inline-block;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    font-size: .78rem;
    margin-bottom: .6rem;
}
.gg-section-head h2 {
    margin: 0 0 .75rem;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
}
.gg-section-head p {
    color: var(--ink-soft);
    margin: 0;
    font-size: 1.02rem;
}

/* ---- Alternating section background (full-bleed) ---- */
.gg-section-alt {
    background: var(--surface);
    padding: 4rem 0;
    margin: 0 0 4.5rem;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
}
.gg-section-alt > .container > *:last-child,
.gg-section-alt .gg-section-head { margin-bottom: 0; }
.gg-section-alt .gg-section-head { margin-bottom: 2.75rem; }

/* ---- Feature grid ---- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
@media (max-width: 992px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-item {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid transparent;
    border-radius: .75rem;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
    transition: box-shadow .2s ease, transform .2s ease, border-top-color .2s ease;
}
.feature-item:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, .12);
    transform: translateY(-4px);
    border-top-color: var(--orange);
}
.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--black);
    color: var(--orange);
    font-size: 1.65rem;
    margin-bottom: 1.1rem;
    transition: background .2s ease, color .2s ease;
}
.feature-item:hover .feature-icon { background: var(--orange); color: #fff; }
.feature-item h4 { font-size: 1.05rem; margin-bottom: .5rem; }
.feature-item p { color: var(--ink-soft); font-size: .92rem; margin: 0; }

/* ---- Division cards ---- */
.division-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
@media (max-width: 900px) { .division-grid { grid-template-columns: 1fr; } }
.division-card {
    display: block;
    background: var(--black);
    color: #fff;
    border-radius: .9rem;
    padding: 2rem 1.75rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    min-height: 220px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.division-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 0, .3); }
.division-card::before {
    content: "";
    position: absolute;
    right: -30px; bottom: -30px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: rgba(251, 134, 8, .16);
}
.division-card .bi {
    font-size: 1.9rem;
    color: var(--orange);
    margin-bottom: 1rem;
    display: block;
}
.division-card h4 { color: #fff; margin-bottom: .6rem; font-size: 1.15rem; }
.division-card p { color: rgba(255, 255, 255, .75); font-size: .9rem; margin-bottom: 1rem; position: relative; z-index: 1; }
.division-card .division-link { color: var(--orange); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }

/* ---- Awards / cert badges ---- */
.cert-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .6rem 1.3rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--black);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
    margin: .3rem;
}
.cert-badge .bi { color: var(--orange); }

/* ---- News grid ---- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } }
.news-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .8rem;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.news-card-photo { aspect-ratio: 4 / 3; background: var(--surface); }
.news-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card-body { padding: 1.1rem 1.25rem 1.35rem; }
.news-card-date {
    display: block;
    color: var(--orange);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .4rem;
}
.news-card h4 { font-size: 1.02rem; margin: 0; }

/* ---- Leadership / profile cards ---- */
.profile-card {
    display: flex;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .9rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.profile-card.reverse { flex-direction: row-reverse; }
.profile-card-photo { flex: 1 1 220px; min-height: 220px; }
.profile-card-photo img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; }
.profile-card-body { flex: 2 1 320px; padding: 1.75rem 2rem; display: flex; flex-direction: column; justify-content: center; }
.profile-card-body h3 { font-size: 1.35rem; color: var(--black); margin-bottom: .2rem; }
.profile-card-body p { color: var(--ink-soft); margin: 0; font-size: .95rem; }
.profile-card-role {
    display: inline-block;
    color: var(--orange);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .74rem;
    letter-spacing: .06em;
    margin-bottom: .4rem;
}
@media (max-width: 700px) {
    .profile-card, .profile-card.reverse { flex-direction: column; }
    .profile-card-body { padding: 1.5rem 1.5rem; }
}

/* ---- CTA banner ---- */
.cta-banner {
    background: linear-gradient(120deg, var(--black), var(--black-deep));
    color: #fff;
    border-radius: 1rem;
    padding: 3rem 2rem;
    text-align: center;
    margin: 0 0 2.5rem;
}
.cta-banner h3 { color: #fff; margin-bottom: .5rem; font-size: 1.6rem; }
.cta-banner p { color: rgba(255, 255, 255, .8); margin-bottom: 1.5rem; }

/* ---- Pull quote ---- */
.pull-quote {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--black);
    text-align: center;
    max-width: 760px;
    margin: 0 auto 4.5rem;
    padding: 0 1rem;
    position: relative;
}
.pull-quote::before {
    content: "\201C";
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 4.5rem;
    font-weight: 800;
    color: var(--orange);
    line-height: 1;
    margin-bottom: -.5rem;
}

/* ---- Product highlight (division pages) ---- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}
@media (max-width: 700px) { .product-grid { grid-template-columns: 1fr; } }
.product-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--surface);
    border-radius: .7rem;
    padding: 1.25rem 1.4rem;
}
.product-item .bi { font-size: 1.4rem; color: var(--orange); margin-top: .1rem; }
.product-item h4 { font-size: .98rem; margin-bottom: .3rem; }
.product-item p { color: var(--ink-soft); font-size: .88rem; margin: 0; }

/* ---- Footer ---- */
.gg-footer {
    background: var(--black-deep);
    color: rgba(255, 255, 255, .72);
    padding: 3.5rem 0 0;
    margin-top: 3rem;
}
.gg-footer-brand {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 1rem;
}
.gg-footer-brand span { color: var(--orange); }
.gg-footer-about { font-size: .88rem; line-height: 1.7; color: rgba(255, 255, 255, .6); }
.gg-footer-heading {
    color: #fff;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 1.1rem;
}
.gg-footer-links { list-style: none; padding: 0; margin: 0; }
.gg-footer-links li { margin-bottom: .7rem; font-size: .88rem; }
.gg-footer-links a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.gg-footer-links a:hover { color: var(--orange); }
.gg-footer-contact li { display: flex; align-items: flex-start; gap: .55rem; color: rgba(255, 255, 255, .7); }
.gg-footer-contact .bi { color: var(--orange); margin-top: .2rem; }
.gg-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin-top: 2.5rem;
    padding: 1.25rem 0;
    font-size: .78rem;
    color: rgba(255, 255, 255, .5);
}