/* ==========================================================================
   Green Marker — brand overrides
   Loaded AFTER the vendor template styles so nothing in public/web/style/
   or public/web/fonts/ needs editing. Keep all custom rules in this file.
   ========================================================================== */

:root {
    --gm-green: #076644;        /* sampled from greenmarker_logo.png — 7.01:1 on white (WCAG AAA) */
    --gm-green-dark: #04452e;
    --gm-green-light: #cbe5a6;
    --gm-text: #333333;
    --gm-photo-bg: #E4EAE7;    /* team photo side */
    --gm-info-bg: #F7F9F8;     /* team info side */
}

/* --------------------------------------------------------------------------
   Lining figures, site-wide
   Raleway (as served by the template's Google Fonts v1 request) defaults to
   old-style/text figures: 0 1 2 sit at x-height while 3 4 5 7 9 rise or drop
   below the baseline. That's what made numbers look like some digits were
   bigger or higher than others — phone numbers, dates, project values, the
   copyright year, everything. Force lining, tabular figures everywhere.
   -------------------------------------------------------------------------- */

html,
body,
input,
textarea,
select,
button {
    font-variant-numeric: lining-nums tabular-nums;
    -moz-font-feature-settings: "lnum" 1, "tnum" 1;
    -webkit-font-feature-settings: "lnum" 1, "tnum" 1;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Inherit rather than let any element fall back to the font's defaults. */
*,
*::before,
*::after {
    font-variant-numeric: inherit;
    font-feature-settings: inherit;
}

/* --------------------------------------------------------------------------
   Top bar — phone / email / office time
   Overrides style.css:2726 (.contact-details li) and :2745 (li::before).
   -------------------------------------------------------------------------- */

.contact-details li {
    /* Tabular numerals keep the phone digits on a fixed width so they don't
       shift around; Raleway's proportional figures are what made the number
       look unsteady. */
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.2px;
    color: var(--gm-green);
}

.contact-details li a {
    color: var(--gm-green);
    transition: color 0.2s ease;
}

.contact-details li a:hover,
.contact-details li a:focus {
    color: var(--gm-green-dark);
    text-decoration: underline;
}

/* The icons are a separate rule in style.css and stay grey otherwise. */
.contact-details li::before {
    color: var(--gm-green);
}

/* --------------------------------------------------------------------------
   Main nav — third level (SERVICES > division > products)
   The template already styles 3 levels (superfish.css:49, style.css:672) at
   218px. Product names are longer than the template's demo labels, so widen
   the third level and cap its height rather than letting it run off-screen.
   -------------------------------------------------------------------------- */

ul.sf-menu li li ul {
    width: 280px;
    max-height: 70vh;
    overflow-y: auto;
}

ul.sf-menu li li ul li,
.menu-container .sf-menu li li ul li {
    width: 280px;
}

/* Third level opens to the right of the (218px) second level. */
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left: 218px;
}

/* Mobile: the collapsible nav stacks, so indent each level instead. */
@media only screen and (max-width: 767px) {
    .mobile-menu ul ul li a {
        padding-left: 40px;
    }
    .mobile-menu ul ul ul li a {
        padding-left: 60px;
    }
    ul.sf-menu li li ul,
    ul.sf-menu li li ul li {
        width: auto;
        max-height: none;
    }
}

/* --------------------------------------------------------------------------
   Core Projects slider
   Driven by the template's own `.horizontal-carousel` initializer (main.js:523),
   which supplies preloading, autoplay, responsive scroll count and swipe.
   Only the prev/next buttons and the card overlay are ours.
   -------------------------------------------------------------------------- */

.gm-slider-container {
    position: relative;
}

/* Uniform gutters: the template's `.column:first-child { margin-left: 0 }` would
   otherwise shift the row by 30px each time the carousel rotates. */
.gm-core-slider > li.column {
    margin-left: 0;
    margin-right: 30px;
    position: relative;
    overflow: hidden;
}

.gm-core-slider > li img {
    width: 100%;
    display: block;
}

/* Hover overlay — mirrors .projects-list li .view without inheriting that
   rule's `width: 25%` on the list item. */
.gm-core-slider li .view {
    position: absolute;
    top: 0;
    background: rgba(38, 38, 40, 0.5);
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.3s ease 0s;
}

.gm-core-slider li:hover .view {
    opacity: 1;
}

.gm-core-slider li .view .vertical-align-table {
    width: 100%;
    height: 100%;
}

.gm-core-slider li .view p.description {
    color: #FFF;
    margin-top: -20px;
    margin-bottom: 55px;
    font-size: 14px;
    line-height: 24px;
    transition: all 0.3s ease 0s;
}

.gm-core-slider li:hover .view p.description {
    margin-bottom: 35px;
}

/* prev / next */
.gm-slider-nav {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: var(--gm-green);
    color: #FFF;
    z-index: 10;
    border-radius: 2px;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.gm-slider-nav:hover {
    opacity: 1;
}

.gm-slider-prev { left: -50px; }
.gm-slider-next { right: -50px; }

/* Pull the arrows inside the track when there isn't room beside it. */
@media only screen and (max-width: 1290px) {
    .gm-slider-prev { left: 5px; }
    .gm-slider-next { right: 5px; }
}

@media only screen and (max-width: 767px) {
    .gm-core-slider > li.column {
        margin-right: 20px;
    }
}

/* --------------------------------------------------------------------------
   Our Team — horizontal rows
   Image on the left, information on the right, each half with its own
   background. The template ships no class for this layout.
   -------------------------------------------------------------------------- */

.gm-team-rows {
    width: 100%;
}

.gm-team-row {
    display: flex;
    align-items: stretch;      /* both halves match the taller one */
    width: 100%;
    margin-top: 40px;
    overflow: hidden;          /* nothing escapes the row */
}

.gm-team-row:first-child {
    margin-top: 70px;
}

/* Left half — photo. A ratio box gives the column a height of its own, so the
   image has something definite to fill whether or not the text side is taller. */
.gm-team-photo {
    flex: 0 0 38%;
    width: 38%;
    max-width: 38%;
    background: var(--gm-photo-bg);
    position: relative;
    overflow: hidden;
}

.gm-team-photo::before {
    content: "";
    display: block;
    padding-top: 78%;          /* the column's own minimum height */
}

.gm-team-photo img {
    position: absolute;
    top: 20px;
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    max-width: calc(100% - 40px);
    /* `contain` keeps the whole person visible — these are portrait studio
       cutouts, and `cover` cropped them off mid-torso. */
    object-fit: contain;
    object-position: center center;
    display: block;
}

/* Right half — information, on a contrasting light ground. */
.gm-team-info {
    flex: 1 1 60%;
    max-width: 60%;
    background: var(--gm-info-bg);
    display: flex;
    align-items: center;
    min-width: 0;              /* lets long words wrap instead of forcing width */
}

.gm-team-info-inner {
    padding: 35px 45px;
    width: 100%;
    min-width: 0;
}

.gm-team-info-inner h3 {
    font-family: 'Raleway';
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 1px;
    color: var(--gm-text);
    margin: 0;
    word-wrap: break-word;
}

.gm-team-role {
    display: block;
    margin-top: 8px;
    font-family: 'Raleway';
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gm-green);
}

.gm-team-summary {
    margin-top: 18px;
}

.gm-team-summary p:first-child {
    margin-top: 0;
}

.gm-team-summary img {
    max-width: 100%;
    height: auto;
}

/* Tablet — give the text side more room. */
@media only screen and (max-width: 1024px) {
    .gm-team-photo {
        flex-basis: 36%;
        width: 36%;
        max-width: 36%;
    }
    .gm-team-info {
        max-width: 64%;
    }
    .gm-team-info-inner {
        padding: 25px 30px;
    }
    .gm-team-info-inner h3 {
        font-size: 20px;
        line-height: 28px;
    }
}

/* Mobile — stack, but keep the two background colors. */
@media only screen and (max-width: 767px) {
    .gm-team-row {
        display: block;
        margin-top: 30px;
    }
    .gm-team-row:first-child {
        margin-top: 40px;
    }
    .gm-team-photo,
    .gm-team-info {
        flex: none;
        width: 100%;
        max-width: 100%;
    }
    .gm-team-photo::before {
        padding-top: 85%;
    }
    .gm-team-photo img {
        top: 15px;
        left: 15px;
        width: calc(100% - 30px);
        height: calc(100% - 30px);
        max-width: calc(100% - 30px);
    }
    .gm-team-info-inner {
        padding: 25px 20px;
    }
}

/* --------------------------------------------------------------------------
   Footer — Get In Touch
   `.contact-details-list` is built for the yellow CTA strip: a 48px glyph in an
   86px white circle, with white text. Both are wrong against the grey footer,
   so this block gets its own styling.
   -------------------------------------------------------------------------- */

.gm-footer-contact li {
    position: relative;
    padding-left: 42px;        /* clears the 28px glyph */
    min-height: 30px;
    margin-top: 18px;
    font-family: 'Raleway';
    font-size: 13px;
    line-height: 22px;
    color: #666;
}

.gm-footer-contact li:first-child {
    margin-top: 0;
}

.gm-footer-contact li::before {
    position: absolute;
    left: 0;
    top: 0;
    /* Between the two extremes: the template's 48px glyph in an 86px white
       circle dominated the column, 16px was too small. */
    font-size: 28px;
    line-height: 30px;
    color: var(--gm-green);
    /* keep the glyph, drop the CTA-strip circle */
    float: none;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    border-radius: 0;
}

.gm-footer-contact li a {
    color: #666;
    transition: color 0.2s ease;
}

.gm-footer-contact li a:hover {
    color: var(--gm-green);
}

/* --------------------------------------------------------------------------
   Homepage slider — video slides
   -------------------------------------------------------------------------- */

/* YouTube/Vimeo embeds: cover the slide the way a background image would.
   The iframe is oversized and centred so 16:9 video fills a wider viewport
   without letterboxing. */
.gm-slide-embed {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;          /* 16:9 */
    min-height: 100%;
    min-width: 177.77vh;      /* 16:9 the other way round */
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;     /* let slider swipe/drag through the iframe */
    z-index: 0;
}

/* Keep the caption above the video layer. */
.revolution-slider .tp-caption {
    z-index: 5;
}

/* --------------------------------------------------------------------------
   Address
   The stored value carries a real line break between the corporate and
   registered offices; HTML collapses it, so the two run together as
   "...Dhaka Registered Office: 75...". Keep the break, collapse the rest.
   -------------------------------------------------------------------------- */

.gm-address {
    white-space: pre-line;
}

/* --------------------------------------------------------------------------
   Green contact strip — icon / text alignment
   `.contact-details-list li::before` is floated, so any text taller than the
   icon wraps underneath it (the address ran to four lines and the last slid
   under the pin). Position the icon instead and indent the text, so every line
   stays to its right regardless of length.

   Scoped to the widths where the template actually puts the icon on the left.
   Between 768px and 1189px responsive.css deliberately centres the icon above
   centred text (responsive.css:409), so that layout is left alone.

   Icon box is 86px: 48px glyph + 19px padding each side (no global
   border-box). 86 + 30px gap = 116px indent.
   -------------------------------------------------------------------------- */

@media only screen and (min-width: 1190px), only screen and (max-width: 767px) {
    .contact-details-list li {
        position: relative;
        padding-left: 116px;
        min-height: 88px;
    }

    .contact-details-list li::before {
        position: absolute;
        left: 0;
        top: 0;
        float: none;
        margin-right: 0;
    }
}

/* responsive.css:1272 narrows the gap to 10px at this width. */
@media only screen and (max-width: 479px) {
    .contact-details-list li {
        padding-left: 96px;
    }
}

/* --------------------------------------------------------------------------
   Services / products card grid
   The template lays `.services-list` out as fixed-pixel floats — 390px, then
   250 / 231 / 300px at its breakpoints. Three 231px cards need 693px, which is
   wider than the phone viewport that rule targets, so cards collided and the
   middle one ran over its neighbours. Source images also vary in ratio, so the
   floats were ragged and titles never lined up.

   Replaced with a flex grid: fluid widths, equal-height cards, and a fixed
   image ratio. `.services-icons` (the alternate icon layout) is left alone.
   Loads after responsive.css, so no !important is needed.
   -------------------------------------------------------------------------- */

.services-list:not(.services-icons) {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
}

.services-list:not(.services-icons) li {
    float: none;
    width: calc((100% - 60px) / 3);
    margin: 0;
    display: flex;
    flex-direction: column;
    background: #FFF;
    padding-bottom: 26px;
}

/* Image well: one ratio for every card, so headings align across the row. */
.services-list:not(.services-icons) li > a:first-child {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    flex: none;
}

.services-list:not(.services-icons) li > a:first-child img,
.services-list:not(.services-icons) li > a:first-child .image-wrapper,
.services-list:not(.services-icons) li > a:first-child .image-wrapper img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
}

/* Tablet — two across. */
@media only screen and (max-width: 1024px) {
    .services-list:not(.services-icons) li {
        width: calc((100% - 30px) / 2);
    }
}

/* Phone — one across, full width. */
@media only screen and (max-width: 600px) {
    .services-list:not(.services-icons) {
        gap: 25px;
    }
    .services-list:not(.services-icons) li {
        width: 100%;
    }
}

/* A card with no image shouldn't reserve the empty image well. */
.services-list:not(.services-icons) li > a:first-child:empty {
    display: none;
}

/* --------------------------------------------------------------------------
   About Us
   Only the two blocks the template has no component for. Everything else on
   that page reuses .features-list, .list, .parallax, .call-to-action etc.
   -------------------------------------------------------------------------- */

/* Signature under the management portrait */
.gm-signature {
    margin-top: 20px;
    font-family: 'Raleway';
    line-height: 22px;
}

.gm-signature strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--gm-text);
}

.gm-signature span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gm-green);
}

/* Valued clients — three per row, icon left of the name */
.gm-client-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
    width: 100%;
}

.gm-client-list li {
    position: relative;
    flex: 0 0 calc((100% - 60px) / 3);
    width: calc((100% - 60px) / 3);
    min-width: 0;
    box-sizing: border-box;
    padding: 22px 25px 22px 66px;
    background: #F7F9F8;
    border-left: 3px solid var(--gm-green);
    font-family: 'Raleway';
    font-size: 14px;
    line-height: 22px;
    color: var(--gm-text);
    display: flex;
    align-items: center;
}

.gm-client-list li::before {
    position: absolute;
    left: 25px;
    top: 50%;
    margin-top: -14px;
    font-size: 28px;
    line-height: 28px;
    color: var(--gm-green);
}

@media only screen and (max-width: 1024px) {
    .gm-client-list li {
        flex-basis: calc((100% - 30px) / 2);
        width: calc((100% - 30px) / 2);
    }
}

@media only screen and (max-width: 600px) {
    .gm-client-list li {
        flex-basis: 100%;
        width: 100%;
    }
}

/* Core divisions — icon-topped cards.
   Deliberately not `.features-list`: that component floats its icon via
   `li:before`, and a nested `.list` inherits both the float and the 48px
   circled glyph, turning the bullets into giant circled ticks. */
.gm-divisions {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
}

.gm-divisions > li {
    /* flex items default to min-width:auto, so a long bullet line would push
       the card past its calculated width and drop the row to two across. */
    flex: 0 0 calc((100% - 60px) / 3);
    width: calc((100% - 60px) / 3);
    min-width: 0;
    /* no global border-box in this template — without this the padding is
       added on top of the calculated width and only two cards fit per row */
    box-sizing: border-box;
    padding: 40px 30px 35px;
    background: #F7F9F8;
    border-top: 3px solid var(--gm-green);
    text-align: center;
}

.gm-division-icon {
    display: inline-block;
    font-size: 48px;
    line-height: 48px;
    color: var(--gm-green);
    border: 1px solid #E2E6E7;
    background: #FFF;
    padding: 19px;
    border-radius: 50%;
}

.gm-divisions > li h4 {
    margin-top: 22px;
    font-family: 'Raleway';
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--gm-text);
}

.gm-divisions > li > p {
    margin-top: 10px;
    font-family: 'Raleway';
    font-size: 14px;
    line-height: 24px;
}

/* Bullets sit left-aligned inside a centred card. */
.gm-divisions > li .list {
    margin-top: 22px;
    text-align: left;
    display: inline-block;
}

@media only screen and (max-width: 1024px) {
    .gm-divisions > li {
        flex-basis: calc((100% - 30px) / 2);
        width: calc((100% - 30px) / 2);
    }
}

@media only screen and (max-width: 600px) {
    .gm-divisions > li {
        flex-basis: 100%;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Images inside .image-wrapper
   The wrapper is `display:inline-block; max-width:100%` (style.css:176) but the
   <img> inside is unconstrained, so an upload wider than its column renders at
   natural size and spills over the neighbouring column. The template only got
   away with it because its sample images were pre-sized to each slot.
   -------------------------------------------------------------------------- */

.image-wrapper {
    display: block;
    width: 100%;
}

.image-wrapper img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
}

/* Management portrait: uploads are portrait-orientation and would otherwise run
   much taller than the message beside them. */
.gm-management-photo img {
    max-height: 460px;
    width: auto;
    max-width: 100%;
    object-fit: cover;
    object-position: center top;
}

@media only screen and (max-width: 767px) {
    .gm-management-photo img {
        max-height: 360px;
    }
}