/* =========================================================
   GeoTech Design Consultants — client changes, 20 Oct 2026
   (linked LAST on every page, just before </head>)
   1. Home: banner shorter + moving strip attached / overlapping
   2. Header logo: smaller, on a clean white plate
   3. Footer: Service-Network map — bigger, readable state names
   4. About page: home-page drawing + small team photo overlapping
   5. Service pages: "Sectors we serve" redesigned
   ========================================================= */

/* ---------------------------------------------------------
   1. HOME — banner height fits the screen, strip attached
   --------------------------------------------------------- */
.gt-strip { margin-top: 0 !important; }

@media (min-width: 768px) {
    /* full banner image exactly as before (no crop); strip sits directly under it */
    html body .gt-strip {
        margin-top: 0 !important; z-index: 6;
        border-top: 3px solid var(--bs-secondary, #ff5e14);
        box-shadow: 0 -10px 26px rgba(0, 22, 89, .22);
    }
}
html body .gt-strip .gt-strip-track { animation-duration: 70s; }
@media (min-width: 768px) { html body .gt-strip .gt-strip-label { padding-left: 100px; } }   /* clear of the floating call button */
html body .gt-strip .gt-strip-item { width: 470px; align-items: center; padding-top: 14px; padding-bottom: 14px; }
html body .gt-strip .gt-strip-item h4 { font-size: 17px; margin: 0 0 4px; }
html body .gt-strip .gt-strip-item p { font-size: 13.5px; line-height: 1.5; }
@media (max-width: 767.98px) {
    html body .gt-strip .gt-strip-item { width: 330px; }
    .gt-bn-mobile { border-bottom: 0; }
}

/* ---------------------------------------------------------
   2. HEADER LOGO — a bit smaller, white plate
   --------------------------------------------------------- */
html body .navbar, html body .navbar.bg-light { background-color: #fff !important; }
html body .navbar .navbar-brand {
    background: transparent; border-radius: 0; padding: 4px 10px !important; box-shadow: none !important;
}
html body .navbar .navbar-brand img { max-height: 54px !important; height: 54px; background: transparent; box-shadow: none !important; }
@media (max-width: 991px) {
    html body .navbar .navbar-brand img { max-height: 42px !important; height: 42px; }
}

/* ---------------------------------------------------------
   3. FOOTER MAP — wider column, readable labels
   --------------------------------------------------------- */
@media (min-width: 1200px) {
    html body .footer .row > .col-xl-4:nth-child(1) { width: 31%; }
    html body .footer .row > .col-xl-4:nth-child(2) { width: 24%; }
    html body .footer .row > .col-xl-4:nth-child(3) { width: 45%; }
}
html body .footer .india-map { max-width: 600px; }
html body .india-map .map-pin .pin-label {
    font-size: 11px; font-weight: 700; padding: 3px 6px; border-radius: 4px;
    background: rgba(255, 255, 255, .94); color: #001248; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
html body .india-map .map-pin.map-pin-hq .pin-label {
    font-size: 14px; font-weight: 800; padding: 6px 12px; border-radius: 6px;
    background: #ff5e14; color: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .4);
    top: 6px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
}
html body .india-map .map-pin.map-pin-hq .pin-icon { font-size: 34px; }
html body .india-map .map-pin:hover .pin-label,
html body .india-map .map-pin.active .pin-label { font-size: 12px; padding: 4px 8px; }
@media (max-width: 575px) { html body .india-map .map-pin .pin-label { font-size: 9px; padding: 2px 4px; } }

/* ---------------------------------------------------------
   4. ABOUT PAGE — same navy "Study · Design · Deliver" card as home, small photo overlapping
   --------------------------------------------------------- */
html body .gu-abp-row > .col-xl-5 { justify-content: center; }
html body .gu-abp-media.gu-abp-ov {
    position: relative; flex: 0 0 auto; min-height: 0; overflow: visible;
    background: transparent; box-shadow: none; border-radius: 0; padding: 0 0 27% 0;
}
html body .gu-abp-media.gu-abp-ov::before,
html body .gu-abp-media.gu-abp-ov::after { display: none !important; content: none !important; }
html body .gu-abp-media.gu-abp-ov img.gu-abp-plan {
    position: static; inset: auto; display: block; width: 100%; height: auto;
    aspect-ratio: 1093 / 887; object-fit: contain;
    background: #fff; border: 1px solid #cfd8ea; border-radius: 10px !important;
    padding: 10px; box-shadow: 0 14px 36px rgba(0, 22, 89, .12) !important;
}
html body .gu-abp-media.gu-abp-ov .gu-abp-small {
    position: absolute; right: 0; bottom: 0; width: 56%; z-index: 2;
    border: 6px solid #fff; border-radius: 12px; overflow: hidden; background: #fff;
    box-shadow: 0 20px 44px rgba(0, 22, 89, .30);
}
html body .gu-abp-media.gu-abp-ov .gu-abp-small img {
    position: static; display: block; width: 100%; height: auto; border-radius: 0 !important;
}
html body .gu-abp-media.gu-abp-ov .gu-abp-small::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #ff5e14;
}
/* navy card straddles the bottom edge of the drawing, on the left (same look as the home page) */
html body .gu-abp-media.gu-abp-ov .gu-abp-card {
    position: absolute; left: 0; right: auto; bottom: 11%; width: 55%; max-width: none; z-index: 3;
    gap: .7rem; padding: .8rem .9rem;
}
html body .gu-abp-media.gu-abp-ov .gu-abp-card .gu-ab-card-ico { width: 38px; height: 38px; font-size: 1rem; }
html body .gu-abp-media.gu-abp-ov .gu-abp-card b { font-size: clamp(.78rem, .92vw, .98rem); line-height: 1.2; white-space: nowrap; }
html body .gu-abp-media.gu-abp-ov .gu-abp-card small { font-size: clamp(.64rem, .8vw, .76rem); line-height: 1.3; }
@media (max-width: 575px) {
    html body .gu-abp-media.gu-abp-ov .gu-abp-card { position: absolute; margin: 0; width: 60%; padding: .6rem .7rem; }
    html body .gu-abp-media.gu-abp-ov .gu-abp-card .gu-ab-card-ico { width: 30px; height: 30px; font-size: .8rem; }
    html body .gu-abp-media.gu-abp-ov .gu-abp-card small { display: none; }
}

/* ---------------------------------------------------------
   5. SERVICE PAGES — "Sectors we serve"
   --------------------------------------------------------- */
html body .sx-sectors {
    position: relative; overflow: hidden; isolation: isolate;
    margin-top: 4rem; padding: 2.6rem 2.6rem 2.8rem;
    border: 0; border-radius: 22px;
    background: linear-gradient(135deg, #001659 0%, #06307c 62%, #0a3d94 100%);
    box-shadow: 0 26px 60px rgba(0, 22, 89, .28);
}
html body .sx-sectors::before {                              /* contour-line texture */
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16;
    background: url("../img/contours.svg") center / cover no-repeat;
}
html body .sx-sectors::after {                               /* orange glow */
    content: ""; position: absolute; right: -90px; top: -110px; width: 320px; height: 320px; z-index: -1;
    border-radius: 50%; background: radial-gradient(circle, rgba(255, 94, 20, .55), transparent 68%);
}
html body .sx-sectors .sx-sec-lbl {
    display: flex; align-items: center; gap: 1rem;
    color: #fff; font-size: 1.55rem; font-weight: 800; letter-spacing: .01em; text-transform: none;
    margin: 0 0 1.8rem;
}
html body .sx-sectors .sx-sec-lbl::before {
    content: ""; flex: none; width: 46px; height: 4px; border-radius: 3px; background: #ff5e14;
}
html body .sx-sectors .sx-sec-lbl::after {
    content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .35), transparent);
}
html body .sx-sectors .sx-tiles { counter-reset: sxt; gap: 1.1rem; margin: 0; }
html body .sx-sectors .sx-tile {
    counter-increment: sxt; position: relative; overflow: hidden;
    flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 1rem;
    min-height: 138px; padding: 1.2rem 1.3rem 1.15rem;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px; backdrop-filter: blur(3px);
    transition: transform .3s, background .3s, border-color .3s, box-shadow .3s;
}
html body .sx-sectors .sx-tile::before {                     /* number */
    content: counter(sxt, decimal-leading-zero); position: absolute; right: 1.1rem; top: .8rem;
    font-size: 1.7rem; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, .16);
    transition: color .3s;
}
html body .sx-sectors .sx-tile::after {                      /* orange base line */
    content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: #ff5e14;
    transition: width .35s;
}
html body .sx-sectors .sx-tile .ic {
    width: 52px; height: 52px; border-radius: 14px; font-size: 1.15rem; color: #fff;
    background: linear-gradient(135deg, #ff7a3d, #ff5e14); box-shadow: 0 10px 22px rgba(255, 94, 20, .45);
    transition: transform .3s, background .3s, color .3s;
}
html body .sx-sectors .sx-tile b { color: #fff; font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
html body .sx-sectors .sx-tile:hover {
    background: #fff; border-color: #fff; transform: translateY(-6px);
    box-shadow: 0 22px 40px rgba(0, 0, 0, .28);
}
html body .sx-sectors .sx-tile:hover b { color: #001659; }
html body .sx-sectors .sx-tile:hover::before { color: rgba(0, 22, 89, .12); }
html body .sx-sectors .sx-tile:hover::after { width: 100%; }
html body .sx-sectors .sx-tile:hover .ic { transform: scale(1.08) rotate(-6deg); background: linear-gradient(135deg, #001659, #0a3d94); color: #fff; }
@media (max-width: 767px) {
    html body .sx-sectors { padding: 1.8rem 1.2rem 1.9rem; border-radius: 16px; }
    html body .sx-sectors .sx-sec-lbl { font-size: 1.25rem; }
    html body .sx-sectors .sx-tiles { grid-template-columns: 1fr 1fr !important; gap: .8rem; }
    html body .sx-sectors .sx-tile { min-height: 118px; padding: 1rem; }
    html body .sx-sectors .sx-tile b { font-size: .95rem; }
}


/* =========================================================
   6. CLIENT REVIEW (round 3) — neat overview blocks, AMC photo
   ========================================================= */

/* ---- Overview heading (home + about): "Geotechnical & Geoenvironmental" on ONE line ---- */
html body .gu-ov-title, html body .gu-ab-row h2.display-5.gu-ov-title { font-size: 2.1rem; line-height: 1.22; font-weight: 700; margin-bottom: .6rem; }
@media (min-width: 1200px) { html body .gu-ov-title, html body .gu-ab-row h2.display-5.gu-ov-title { font-size: 1.95rem; } }
@media (min-width: 1400px) { html body .gu-ov-title, html body .gu-ab-row h2.display-5.gu-ov-title { font-size: 2.3rem; } }
@media (max-width: 575px) { html body .gu-ov-title { font-size: 1.55rem; } }
html body .gu-ov-title .nw { white-space: nowrap; }
@media (max-width: 575px) { html body .gu-ov-title .nw { white-space: normal; } }

/* ---- HOME overview: picture and text start and end on the same line; badge straddles the bottom edge, flush with the picture's left border ---- */
html body .gu-ab-row { align-items: stretch !important; }
html body .gu-ab-row > .col-xl-6:first-child { display: flex; }
html body .gu-ab-row .gu-ab-media { position: relative; display: flex; flex-direction: column; width: 100%; padding: 0 0 30px 0 !important; }
html body .gu-ab-row .gu-ab-media::before,
html body .gu-ab-row .gu-ab-media::after { display: none !important; content: none !important; }
html body .gu-ab-row .gu-ab-media img.gu-plan {
    display: block; flex: 1 1 auto; width: 100%; height: 100% !important; min-height: 0;
    aspect-ratio: auto !important; object-fit: contain; object-position: 50% 50%;
    background: #fff; clip-path: none !important; filter: none;
    border: 1px solid #cfd8ea; border-radius: 8px !important; padding: 14px; box-shadow: none !important;
}
html body .gu-ab-row .gu-ab-media .gu-ab-card {
    position: absolute !important; left: 0; right: auto; bottom: 0; width: auto; max-width: 78%; margin: 0;
    gap: .75rem; padding: .7rem 1.05rem; border-radius: 0 6px 6px 0;
    box-shadow: 0 12px 26px rgba(0, 22, 89, .25);
}
html body .gu-ab-row .gu-ab-media .gu-ab-card .gu-ab-card-ico { width: 36px; height: 36px; font-size: 1rem; }
html body .gu-ab-row .gu-ab-media .gu-ab-card b { font-size: .95rem; white-space: nowrap; }
html body .gu-ab-row .gu-ab-media .gu-ab-card small { font-size: .72rem; line-height: 1.3; }
@media (max-width: 1199px) {
    html body .gu-ab-row .gu-ab-media img.gu-plan { height: auto !important; flex: 0 0 auto; aspect-ratio: 1093 / 887 !important; }
}
@media (max-width: 575px) {
    html body .gu-ab-row .gu-ab-media .gu-ab-card { max-width: 92%; }
    html body .gu-ab-row .gu-ab-media .gu-ab-card small { display: none; }
}

/* ---- ABOUT overview: orange-framed picture block (same idea as geotechbuildcon.in/about) ---- */
html body .gu-abp-row { align-items: stretch !important; }
html body .gu-abp-row > .col-xl-6:first-child { display: flex; justify-content: flex-start; }
html body .gu-abp-text { justify-content: flex-start !important; }
html body .gu-abp-media.gu-abp-ov {
    flex: 1 1 auto; width: 100%; min-height: 0; position: relative; overflow: visible;
    display: grid; grid-template-columns: 1fr 44%; grid-template-rows: minmax(0, 1fr) auto; column-gap: 14px; align-items: end;
    padding: 18px 18px 22px !important; background: #fff; border: 3px solid #ff5e14; border-radius: 0; box-shadow: none;
}
html body .gu-abp-media.gu-abp-ov::before,
html body .gu-abp-media.gu-abp-ov::after { display: none !important; content: none !important; }
html body .gu-abp-media.gu-abp-ov img.gu-abp-plan {
    grid-column: 1 / -1; grid-row: 1; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto;
    object-fit: contain; object-position: 50% 50%; padding: 0;
    background-color: #f4f7fc;
    background-image: linear-gradient(rgba(0, 22, 89, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 22, 89, .055) 1px, transparent 1px);
    background-size: 24px 24px;
    border: 1px solid #d7deee; border-radius: 6px !important; box-shadow: none !important;
}
html body .gu-abp-media.gu-abp-ov .gu-abp-small {
    grid-column: 2; grid-row: 2; position: relative; right: auto; bottom: auto; width: 100%;
    margin-top: -40px; border: 5px solid #fff; border-radius: 8px; overflow: hidden; background: #fff;
    box-shadow: 0 14px 30px rgba(0, 22, 89, .22);
}
html body .gu-abp-media.gu-abp-ov .gu-abp-small img { display: block; width: 100%; height: auto; border-radius: 0 !important; }
html body .gu-abp-media.gu-abp-ov .gu-abp-card {
    grid-column: 1; grid-row: 2; position: relative !important; left: auto; bottom: auto; width: auto; max-width: 100%;
    margin: 14px 0 0; align-self: end; border-radius: 6px; padding: .65rem .9rem; gap: .65rem;
    box-shadow: 0 10px 22px rgba(0, 22, 89, .2);
}
html body .gu-abp-media.gu-abp-ov .gu-abp-card .gu-ab-card-ico { width: 34px; height: 34px; font-size: .95rem; }
html body .gu-abp-media.gu-abp-ov .gu-abp-card b { font-size: .88rem; white-space: nowrap; line-height: 1.2; }
html body .gu-abp-media.gu-abp-ov .gu-abp-card small { font-size: .68rem; line-height: 1.3; }
@media (max-width: 1199px) {
    html body .gu-abp-media.gu-abp-ov img.gu-abp-plan { height: auto; aspect-ratio: 1093 / 887; }
}
@media (max-width: 575px) {
    html body .gu-abp-media.gu-abp-ov { grid-template-columns: 1fr; row-gap: 12px; padding: 12px 12px 16px !important; }
    html body .gu-abp-media.gu-abp-ov .gu-abp-small { grid-column: 1; grid-row: 3; margin-top: 0; }
    html body .gu-abp-media.gu-abp-ov .gu-abp-card { grid-row: 2; margin-top: 0; }
}

/* ---- AMC overview: photo at its own proportion, in a column narrow enough that photo and text sit level ---- */
@media (min-width: 992px) {
    html body .sx-intro-fit:has(.sx-amc) .row.g-5 { align-items: center !important; }
    html body .sx-intro-fit:has(.sx-amc) .row.g-5 > .col-lg-6:first-child { width: 56%; }
    html body .sx-intro-fit:has(.sx-amc) .row.g-5 > .col-lg-6:nth-child(2) { width: 44%; }
}
html body .sx-intro-fit .sx-collage.sx-amc { min-height: 0; flex: 0 0 auto; align-self: center; padding: 0 0 18px 0; }
html body .sx-intro-fit .sx-collage.sx-amc .main {
    position: relative; left: auto; top: auto; z-index: 1;
    width: calc(100% - 18px); margin-left: 18px; height: auto !important; max-height: none;
    aspect-ratio: 1.32 / 1; object-fit: cover; object-position: 50% 22%;
}


/* =========================================================
   7. CLIENT REVIEW (round 4)
   ========================================================= */
/* About: plain white sheet behind the drawing, bigger team photo */
html body .gu-abp-media.gu-abp-ov { grid-template-columns: 1fr 1fr; }
html body .gu-abp-media.gu-abp-ov img.gu-abp-plan { background-color: #fff !important; background-image: none !important; border: 0 !important; }
html body .gu-abp-media.gu-abp-ov .gu-abp-small { margin-top: -64px; }
html body .gu-abp-media.gu-abp-ov .gu-abp-card b { white-space: normal; }
/* AMC: text block and photo centred on the same line */
@media (min-width: 992px) { html body .sx-intro-fit:has(.sx-amc) .row.g-5 { align-items: center !important; } }
html body .sx-intro-fit:has(.sx-amc) .row.g-5 > .col-lg-6:first-child p + p { margin-top: 1rem; }


/* =========================================================
   6. SPACING — tighter gaps between sections on every page
   (sections had py-5 on the section AND py-5 on the inner container = double padding)
   ========================================================= */
html body .container-fluid.py-5:not(.footer):not(.gu-faq) { padding-top: 30px !important; padding-bottom: 30px !important; }
html body .container-fluid.py-5:not(.footer) > .container.py-5,
html body .container-fluid.py-5:not(.footer) > .container-xl.py-5 { padding-top: 20px !important; padding-bottom: 20px !important; }
html body .container-fluid.gu-faq.py-5 { padding-top: 30px !important; }
html body .container-fluid.pb-5.gt-life-sec { padding-bottom: 30px !important; }
html body .bg-breadcrumb { padding-top: 72px !important; padding-bottom: 54px !important; }
html body .ct-section { padding-top: 48px; padding-bottom: 28px; }
html body .ct-map-wrap { padding-bottom: 36px; }
html body .bp-main { padding-top: 48px; padding-bottom: 28px; }
html body .bp-related { padding-top: 40px; padding-bottom: 44px; }
html body .cs-main { padding-top: 56px; padding-bottom: 20px; }
html body .cs-main .cs-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
html body .cs-nav-wrap { padding-top: 28px; padding-bottom: 48px; }
@media (min-width: 992px) {
    html body .sx-sec, html body .sx-dark, html body .sx-cta { padding-top: 48px; padding-bottom: 48px; }
    html body .sx-hero { padding-bottom: 64px; }
}
@media (max-width: 991.98px) {
    html body .sx-sec, html body .sx-dark, html body .sx-cta { padding-top: 36px; padding-bottom: 36px; }
    html body .container-fluid.py-5:not(.footer):not(.gu-faq) { padding-top: 24px !important; padding-bottom: 24px !important; }
}

/* ---------------------------------------------------------
   7. "Sectors we serve" — compact, evenly aligned tiles
   --------------------------------------------------------- */
html body .sx-sectors { margin-top: 2.4rem; padding: 2rem 2.2rem 2.2rem; }
html body .sx-sectors .sx-sec-lbl { font-size: 1.4rem; margin: 0 0 1.4rem; }
html body .sx-sectors .sx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
html body .sx-sectors .sx-tile {
    flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem;
    min-height: 88px; padding: 1rem 3.2rem 1rem 1.1rem;
}
html body .sx-sectors .sx-tile .ic { flex: none; width: 48px; height: 48px; display: grid; place-items: center; }
html body .sx-sectors .sx-tile b { font-size: 1.02rem; text-align: left; }
html body .sx-sectors .sx-tile::before { right: .9rem; top: .55rem; font-size: 1.15rem; }
@media (max-width: 1199px) { html body .sx-sectors .sx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    html body .sx-sectors { padding: 1.5rem 1rem 1.6rem; }
    html body .sx-sectors .sx-tiles { grid-template-columns: 1fr 1fr !important; gap: .7rem; }
    html body .sx-sectors .sx-tile { min-height: 76px; padding: .8rem 2.4rem .8rem .8rem; gap: .7rem; }
    html body .sx-sectors .sx-tile .ic { width: 40px; height: 40px; }
    html body .sx-sectors .sx-tile b { font-size: .9rem; }
}