:root {
    --hseqyellow: #ffcc08;
    --hseqgrey: #403D39;
    --hseqlightgrey: #606161;
    --textgrey: #808080;
    --dark: #141313;
    --white: #fff;
    --roboto: 'Roboto';
    --cocogoose: 'Cocogoose';
}

@font-face {
    font-display: swap;
    font-family: 'Cocogoose';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/cocogoose-pro.regular.ttf') format('truetype');
}

/* roboto-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v32-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/roboto-v32-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/roboto-v32-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-900 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/roboto-v32-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
}

html {
    scroll-behavior: smooth; /* Ensures the # part of anchors slowly scroll to that section e.g. services section */
}

main {
    flex-wrap: wrap;
}

body {
    display: block;
    margin: 0;
    background-color: black;
    font-family: var(--roboto);
    overflow-x: hidden;
}

a {
    background-color: transparent;
    text-decoration: none;
}

/* Header and Nav Start */
#header {
    position: fixed;
    display: flex;
    top: 0;
    width: 100%;
    height: 13rem;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: height 1s ease, background-color 1s ease;
}

.pages #header {
    background-color: var(--dark);
    
}

#header.black {
    height: 8rem;
    background-color: var(--dark);
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
}

.primary-header {
    display: flex;
    align-items: center;
    width: 80%;
    justify-content: space-between;
    z-index: 1;
}

/* Replacement Logo */
.logowrap img {
    width: 20rem;
    height: auto;
    visibility: hidden; 
    animation: showImage 1s forwards; 
    animation-delay: 6.8s;
    transition: transform 1s ease; 
}

.pages .logowrap img {
    animation: none;
    animation-delay: none;
    visibility: visible;
}

.logowrap img.scale-down {
    transform: scale(0.8); 
}

/* Visibility property for logo replacement */
@keyframes showImage {
    0% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}

/* Nav Anchor */
.primary-navigation {
    display: flex;
    margin: 0;
    padding: 0;
    /* Gap shrinks as the viewport narrows toward the hamburger breakpoint. */
    gap: clamp(1rem, 1.6vw, 2rem);
    justify-content: flex-start;
    pointer-events: none;
    animation: enablePointerEvents 0s forwards;
    animation-delay: 6.8s;
}

.pages .primary-navigation {
    animation: none;
    animation-delay: none;
    pointer-events: auto;
}

.primary-navigation li a {
    color: var(--white);
    /* Shrinks fluidly on narrower desktops (down to the 1366px hamburger
       breakpoint); caps at 1.5rem on large screens. */
    font-size: clamp(1.1rem, 1.3vw, 1.5rem);
    font-family: var(--roboto) ;
    font-weight: 500;
    opacity: 0;
    animation: fadeIn 2s ease-in forwards;
    animation-delay: 6.8s;
}

.pages .primary-navigation li a {
    animation: none;
    animation-delay: none;
    opacity: 1;
}

.primary-navigation li a:hover {
    color: var(--hseqyellow);
}

/* Fade In properties for nav */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Enable Pointer Events */
@keyframes enablePointerEvents {
    to {
        pointer-events: auto;
    }
}

/* Tel phone */
.tel button,
.hero button {
    border: none;
    border-radius: 15px;
    padding: 1rem 2rem;
    background-color: var(--hseqyellow);
    gap: 0.8rem;
    display: flex;
    opacity: 0;
    box-shadow: 0 10px 20px rgba(96, 97, 97, 0.4);
    transition: 0.5s;
    pointer-events: none;
    animation: fadeIn 2s ease-in forwards, enablePointerEvents 0s forwards;
    animation-delay: 6.8s;
}

.pages .tel button, 
.pages .hero button {
    opacity: 1;
    pointer-events: auto;
    animation: none;
    animation-delay: none;
}

.tel button:hover,
.hero button:hover {
    background-color: var(--hseqlightgrey);
    box-shadow: 0 10px 20px rgba(96, 97, 97, 0.8);
}

.tel img,
.hero button img {
    width: 1.8rem;
    height: auto;
    white-space: nowrap;
}

.tel p,
.hero button p {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    margin: 0;
    white-space: nowrap; /* keep the phone number on one line */
}

/* Nav phone button: dark grey text on the yellow button... */
.tel p {
    color: var(--hseqgrey);
}

/* ...switching to white on hover (button turns grey) so it stays readable. */
.tel button:hover p {
    color: var(--white);
}

/* Recolour the white phone icon to dark grey (matches the text); white on hover. */
.tel button img {
    filter: brightness(0.25);
}

.tel button:hover img {
    filter: none;
}

/* Dropdown */
.dropdown-container {
    position: absolute;
    background-color: var(--hseqyellow);
    z-index: 1;
    width: 15rem;
    transform: translate(-25%, calc(1% + 1rem));
    opacity: 0;
    transition: opacity 0.3s ease-out 0.1s;
    pointer-events: none;
}

#about {
    right: 655px;
}

.dropdown:hover .dropdown-container {
    opacity: 1;
    pointer-events: auto;
}

.dropdown-item {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.dropdown-item li a {
    text-decoration: none;
    color: var(--white);
    display: block;
    opacity: 1;
    padding: 1rem;
}

.dropdown-item li a:hover {
    background-color: var(--hseqlightgrey);
}

/* hamburger */
.hamburger-content,
.hamburger-item {
    display: none;
}

/* Hero Section */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #000;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* hero2.jpg with a dark tint baked on top for text contrast. Starts hidden
       (black .hero background shows) and fades in as the logo nears the header. */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/hero2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 1;
    animation: fadeIn 1.5s ease-in forwards;
    animation-delay: 6.3s;
}

.hero-item {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 2;
    gap: 4rem;
}

.hero h1 {
    position: relative;
    justify-content: start;
    color: var(--white);
    font-family: var(--roboto);
    font-size: 6rem;
    z-index: 2;
    text-align: left;
    width: 100%;
    opacity: 0;
    animation: fadeIn 2s ease-in forwards;
    animation-delay: 6.8s;
}

.hero button {
    position: relative;
    align-self: flex-start;
    margin-top: auto;
    z-index: 4;
}

/* Main logo */
.logo-gif {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.logo-gif img {
    width: 100rem;
    height: auto;
}

.logo-gif .logo {
    transform: scale(1);
    opacity: 1;
}

#animatedLogo {
    transform-origin: center center;
}

.bg-colour {
    background: linear-gradient(to bottom, #ffcc08 0%, #fff 100%);
}

/* Animated Cut Section */
.info-section {
    position: relative;
    background-color: var(--hseqyellow);
    z-index: -1;
    padding: clamp(3rem, 6vh, 6rem) 0;
}

.info-container {
    height: auto;
    width: 100%;
    z-index: 1;
    transition: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-container::before {
    content: "";
    position: absolute;
    width: 100%;
    height: var(--before-height, 0); 
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 2;
    transition: height 1s ease-in-out; 
}

/* .container-gif {
    position: absolute;
    z-index: 5;
    bottom: 0;
}

.container-gif img {
    width: 100vw;
}

.container-gif.top {
    top: 0;
}

.container-gif.bottom {
    bottom: 0;
} */


img#animated-line {
    visibility: hidden; 
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* Header and Nav Section End */

/* Dynamic Gear */
.gear-wrapper {
    position: relative; /* Keeps it within this section */
    overflow: hidden; /* Prevents it from displaying outside */
}

.gear-container{
    height: auto;
}
  

/* Gear is fixed but starts at the top */
.gear {
    position: absolute;
    top: 2%;
    /* Anchor the gear's centre to the left edge so exactly half shows at any
       viewport width. translateX(-50%) is 50% of the gear's own width (not the
       viewport's), so it doesn't drift when the window is narrowed. */
    left: 0;
    /* Size by viewport WIDTH (not height) so the gear is always ~20% of the
       screen width (half of 40vw is visible). Capped so it doesn't grow huge on
       wide monitors. Same size in both states → no size pop when it goes fixed. */
    width: min(40vw, 1100px);
    height: auto;
    transform: translateX(-50%);
    transition: transform 0.1s linear;
    z-index: 3; /* above the connected gear and the image */
}

.gear.fixed {
    position: fixed;
    top: 17%;
    left: 0;
    width: min(40vw, 1100px);
    height: auto;
    transform: translateX(-50%);
    transition: transform 0.1s linear;
    z-index: 3;
}


/* Cut-out Bezel Section Start */

.info-card {
    position: relative;
    z-index: 3;
    width: 80%;
    padding-left: 12%;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    /* min-height (not fixed height) lets the card grow with the text, so this
       only clips the device mockup's horizontal slide-in, not the content. */
    overflow: hidden;
}


.info-card .text-container {
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    width: 50%; 
    padding-left: 20px; 
    gap: 1rem;
}

.info-card h1 {
    color: var(--dark);
    font-family: var(--cocogoose);
    /* Match the "Why Businesses Trust" heading size/style. Use the real 400
       weight (Cocogoose ships regular only) so it isn't faux-bolded — which read
       heavier on the yellow background. */
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
    padding-bottom: 1rem;
}

.info-card h2 {
    /* Match the "Why Businesses Trust" list items exactly (h2 defaults to bold). */
    color: var(--hseqgrey);
    font-family: var(--roboto);
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    font-weight: 400;
    line-height: 1.4;
}

.info-card p {
    color: var(--white);
    font-size: 1rem;
    font-family: var(--roboto);
    font-weight: 500;
}

#static-line {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 4;
    visibility: hidden;
}

/* Cut-out Bezel Section End */

/* Features Homepage Section */

#features {
    /* min-height (not height) so the section grows to fit its content. With a
       fixed height the taller content overflowed above/below and pushed up into
       the hero. */
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #d3d3d3;/* if height adjustment is needed, change bg colour to match */
}

.features-container {
    display: flex;
    flex-direction: column; /* Stack text and cards */
    align-items: center; /* Center align */
    width: 100%;
    padding: 40px 0;
}

.features-text {
    color: var(--dark);
    font-family: var(--roboto);
    text-align: center;
    margin-bottom: 20px; /* Adds spacing between text and cards */
    /* Reserve the gear's visible zone on the left (half the gear width + a gap)
       so the heading and paragraph sit beside the gear, never behind it. Tracks
       the gear's responsive width. */
    padding-left: calc(min(20vw, 350px) + 2rem);
    padding-right: 2rem;
}

.features-text h1 {
    /* Fluid size: caps at 3rem on desktop (unchanged) but scales down on narrow
       screens so it fits in the space beside the gear. */
    font-size: clamp(1.5rem, 4.5vw, 3rem);
    font-family: var(--cocogoose);
}

.features-text p {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
}

/* Intro feature section (image left, text right — fades in progressively on scroll) */
.intro-feature {
    min-height: 80vh;
    display: flex;
    align-items: center;
    background: var(--white);
    /* Reserve the gear's visible zone on the left so the content sits beside the
       gear, not behind it (matches the features section). */
    padding: 60px 2rem;
    padding-left: calc(min(20vw, 350px) + 3rem);
}

.intro-feature-inner {
    display: flex;
    align-items: center;
    gap: 4rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* Keep the whole content block (image + text) above the orbiting brand gear,
       which otherwise covers the text when the layout stacks on mobile. */
    position: relative;
    z-index: 2;
}

.intro-image,
.intro-text {
    flex: 1 1 0;
    opacity: 0; /* JS zooms + fades these in once the connected gear is in view */
    transform-origin: center center;
    will-change: opacity, transform;
}

/* Image sits in front of the small connected gear (which is behind the big gear) */
.intro-image {
    position: relative;
    z-index: 2;
}

/* Smaller satellite gear that meshes with the main gear and sweeps in on scroll.
   Fully positioned/animated by intro-fade.js (transform = translate + rotate). */
.gear-connected {
    position: fixed;
    top: 0;
    left: 0;
    width: min(24vw, 660px);
    height: auto;
    opacity: 0;
    z-index: 1; /* behind the main gear (z-index 2), in front of the content */
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity;
}

/* Tick that pops into the small gear's hollow centre at horizontal alignment.
   Positioned/scaled by intro-fade.js. Shares the small gear's layer so it sits
   behind the content image, just like the gear. */
.intro-tick {
    position: fixed;
    top: 0;
    left: 0;
    width: min(10.8vw, 297px); /* ~45% of the connected gear, fits its hole */
    height: auto;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity;
}

.intro-image img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    display: block;
}

.intro-text {
    color: var(--dark);
    font-family: var(--roboto);
}

.intro-text h2 {
    font-family: var(--cocogoose);
    font-size: clamp(1.5rem, 4vw, 2.6rem);
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.intro-text p {
    font-size: clamp(1rem, 2vw, 1.3rem);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.intro-text p:last-child {
    margin-bottom: 0;
}

/* The two closing lines: bolder and tighter for punch */
.intro-text .intro-emphasis {
    font-family: var(--cocogoose);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

/* Stack the two columns on small screens */
@media (max-width: 765px) {
    .intro-feature-inner {
        flex-direction: column;
        gap: 2rem;
    }
}

/* ---- Pinned conveyor section (gear + card combos) ---- */
/* Tall outer wrapper provides the scroll distance; the inner stage is pinned. */
.combo-pin {
    position: relative;
    height: 500vh; /* ~one viewport of scroll per card (5 cards) */
    background: #1a1b1e;
}

/* Pinning is done with FIXED-positioned cards/gear (not position: sticky),
   because the .gear-wrapper ancestor has overflow:hidden which breaks sticky.
   Fixed elements escape that clipping, so they stay locked to the viewport while
   the tall .combo-pin wrapper scrolls past. */

/* Each card is centred in the right portion of the viewport; JS drives the
   conveyor motion (rise in -> hold -> rise out) and opacity. */
.combo-card {
    position: fixed;
    top: 50%;
    left: 60%;
    width: 500px;
    max-width: 80vw;
    opacity: 0;
    z-index: 2;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    will-change: transform, opacity;
}

/* Orange gear orbiting the big main gear; positioned/rotated by JS. */
.combo-gear {
    position: fixed;
    top: 0;
    left: 0;
    width: min(24vw, 660px);
    height: auto;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity;
}

/* Section heading: pinned at the top for the whole loop, fades at the ends.
   Opacity is driven by overall progress in combo-pin.js. */
.combo-heading {
    position: fixed;
    top: 17vh;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 90%;
    max-width: 1100px;
    text-align: center;
    color: var(--white);
    font-family: var(--cocogoose);
    font-size: clamp(1.8rem, 3.5vw, 4rem);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    will-change: opacity;
}

/* Tick that pops into the orange gear's centre as it hits horizontal (per card). */
.combo-tick {
    position: fixed;
    top: 0;
    left: 0;
    width: min(10.8vw, 297px); /* ~45% of the gear, fits its hole */
    height: auto;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity;
}

@media (max-width: 765px) {
    .combo-card { left: 50%; }
}

/* ---- Why Businesses Trust Robust HSEQ ---- */
.trust {
    background: var(--white);
    padding: clamp(4rem, 8vh, 8rem) 2rem;
    /* Keep the gear + tick clear to the left of the content card. */
    padding-left: min(40vw, 1080px);
}

/* The content lives in a white card with a soft shadow, sitting on top of the
   gear so the gear can never overlay/obscure the text. */
.trust-inner {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    background: var(--white);
    border-radius: 20px;
    padding: clamp(2rem, 4vw, 3.5rem);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.18);
}

/* Orange gear that orbits the main gear to reveal the CTA; positioned by JS. */
.trust-gear {
    position: fixed;
    top: 0;
    left: 0;
    width: min(24vw, 660px);
    height: auto;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity;
}

.trust-heading {
    font-family: var(--cocogoose);
    color: var(--dark);
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    margin: 0 0 clamp(2rem, 4vh, 3.5rem);
}

.trust-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2.5rem;
    text-align: left;
}

.trust-list li {
    position: relative;
    padding-left: 2.25rem;
    color: var(--hseqgrey);
    font-family: var(--roboto);
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    line-height: 1.4;
}

/* Brand-yellow checkmark before each point */
.trust-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--hseqyellow);
    font-weight: 700;
    font-size: 1.4em;
    line-height: 1;
}

.trust-highlight {
    margin: clamp(2.5rem, 5vh, 4rem) auto 0;
    max-width: 800px;
    background: var(--hseqyellow);
    border-radius: 15px;
    padding: clamp(1.75rem, 4vw, 3rem);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    opacity: 0; /* JS fades/scales this in as the gear orbits */
    transform-origin: center center;
    will-change: transform, opacity;
}

.trust-highlight p {
    margin: 0;
    font-family: var(--cocogoose);
    font-weight: 700;
    color: var(--dark);
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    line-height: 1.2;
}

/* Small cheeky line under the quote — fades in just after the box (via JS). */
.trust-aside {
    margin: 1rem 0 0;
    font-family: var(--roboto);
    font-style: italic;
    color: var(--textgrey);
    font-size: clamp(0.85rem, 1.4vw, 1.05rem);
    opacity: 0;
    will-change: opacity;
}

/* Orange gear that orbits the main gear to reveal the CTA (with the tick). */
.trust-gear,
.trust-tick {
    position: fixed;
    top: 0;
    left: 0;
    height: auto;
    opacity: 0;
    z-index: 1; /* behind the white content card (z-index 2) */
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity;
}

.trust-tick {
    width: min(10.8vw, 297px); /* ~45% of the gear, fits its hole */
}

@media (max-width: 900px) {
    .trust-list {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Card goes near full-width on smaller screens; gear tucks behind it. */
    .trust {
        padding-left: 2rem;
    }
}

@media (max-width: 560px) {
    .trust-list {
        grid-template-columns: 1fr;
        max-width: 360px;
    }
}

/* Cards Section Start */

/* Ensure the entire section spans full width with a slightly lighter background */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: 50vh;
    width: 100%;
    padding: 40px 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Cards container - Ensuring horizontal layout */
.cards-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: none;
    min-height: 30vh;
    margin: 40px auto;
    font-family: var(--cocogoose);
    gap: 40px;
    flex-direction: row;
}

/* Horizontal Card Layout */
.cards-container .card,
.combo-card .card {
    position: relative;
    width: 500px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center; /* Centers everything inside */
    background: #26272b; /* A balanced shade, lighter than #1a1b1e */
    border-radius: 15px;
    padding: 20px;
    transition: 0.5s;
    text-align: center; /* Ensures text alignment */
    
    /* Permanent Glow Effect */
    box-shadow: 
    0 0 15px rgba(255, 203, 8, 0.6),
    0 0 25px rgba(255, 203, 8, 0.5);
}

/* Ensure full area is clickable */
.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Box inside the card */
.cards-container .card .box,
.combo-card .card .box {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border-radius: 15px;
    background: #2a2b2f;
    display: flex;
    flex-direction: column; /* Ensures vertical stacking */
    justify-content: center; /* Centers all content */
    align-items: center; /* Align items in center */
    overflow: hidden;
    transition: 0.5s;
    z-index: 3;
    padding: 20px;
    text-align: center;
}

/* Content inside cards */
.cards-container .card .box .content,
.combo-card .card .box .content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers text */
    align-items: flex-start; /* Centers text and button */
    text-align: left;
    width: 100%;
}

/* Headings inside the cards */
.cards-container .card .box .content h1,
.combo-card .card .box .content h1 {
    font-size: 1.8rem;
    color: #E5E5E5;
    z-index: 2;
    transition: 0.5s;
    margin-bottom: 15px;
}

/* Paragraph Text */
.cards-container .card .box .content p,
.combo-card .card .box .content p {
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
    transition: 0.5s;
    max-width: 80%; /* Ensures a clean width for better readability */
}

/* Read More Button */
.cards-container .card .box .content .read-more {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 5px;
    background: #FFCB08;
    text-decoration: none;
    color: white;
    text-align: center;
    align-self: flex-start; /* Centers button */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: 0.5s;
    margin-top: 15px; /* Adds spacing below text */
}

/* Read More Button Hover Effect */
.cards-container .card .box .content .read-more:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
    background: #fff;
    color: #000;
}

/* Icons inside cards - Positioned on the top-right */
.cards-container .card .box .content img {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 100px;
    opacity: 0.8;
    z-index: 1;
}

/* Specific adjustment for one of the images */
#choose {
    left: 110px !important;
}

/* Hover Effect - Moves Upwards */
.card-link:hover .card {
    transform: translateY(-10px);
    transition: transform 0.5s ease;
}

/* --- Conveyor (combo) cards: size to their bullet content, and grow on larger
   screens. Unlike the fixed feature cards, these hold variable-length lists. --- */
.combo-card .card {
    width: 100%;
    height: auto;
    min-height: 280px;
}

.combo-card .card .box {
    position: relative;
    inset: auto;
    margin: 18px;
    height: auto;
}

.combo-card .card .box .content p {
    max-width: 100%;
    margin-bottom: 0.4rem;
}

/* Bigger cards + text on screens wider than ~700px. Width and type scale with
   the viewport (so they grow on large/5K monitors) but hold ~760px around 1440px
   and cap so the text line length stays sensible. */
@media (min-width: 700px) {
    .combo-card {
        width: clamp(760px, 50vw, 1320px);
    }
    .combo-card .card .box .content h1 {
        font-size: clamp(2.4rem, 2.2vw, 3.4rem);
    }
    .combo-card .card .box .content p {
        font-size: clamp(1.3rem, 1.2vw, 1.85rem);
    }
}

/* Adds a subtle highlight effect when hovering */
.cards-container .card .box:hover {
    transform: translateY(-45px);
}

/* Adds a slight overlay effect on hover */
.cards-container .card .box:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.03);
}

/* Ensuring back of card hover effect works */
.card-link:hover .card {
    transform: scale(1.03);
    transition: transform 0.5s ease;
}


/* Cards Section End */

/* Features Homepage Section End */

/* Features Page Start */

.features-hero {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center the content */
    overflow: hidden;
    background-color: #E5E5E5;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 250px; /* Adjust based on navbar height */
}

.products .hero,
.about .hero {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-image: url('/assets/images/hero_bg.webp');
    background-color: #E5E5E5;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
}

.features .text-item,
.products .text-item,
.about .text-item{
    flex: 1; /* Takes up remaining space */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.features .hero-image {
    display: flex;
    justify-content: flex-end;
}

.features-hero img,
.products .hero-img img,
.about .hero-img img {
    width: 100vw;
    height: auto;
}

.features-hero-item {
    width: 90%; /* Adjust width for better responsiveness */
    max-width: 1200px; /* Prevent text from stretching too wide */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
}


.features-hero h1,
.products .hero-item h1,
.about .hero-item h1 {
    justify-content: start;
    color: var(--dark);
    font-family: var(--roboto);
    font-size: 4.5rem;
    z-index: 2;
    text-align: center;
    width: 100%;
    opacity: 0;
    animation: fadeIn 2s ease-in forwards;
    animation-delay: 6.8s;
}

.features-hero p,
.products .hero-item p,
.about .hero-item p {

    font-size: 2rem;
    width: 80%;
    padding-top: 2rem;
}

#features-page {
    background: linear-gradient(to bottom, #ffcc08 0%, #fff 100%);
    min-height: 100vh; /* Ensures it takes up full viewport height */
    padding: 50px; /* Adds spacing inside the section */
    overflow: hidden;
}

#no-bg-color {
    background-color: transparent !important;
}

.fade-in-row {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    display: flex;
    justify-content: center; /* Aligns items horizontally */
    flex-wrap: wrap; /* Ensures items wrap if necessary */
    gap: 40px; /* Matches existing card spacing */
    width: 100%;
}

.fade-in-row.fade-in-active {
    opacity: 1;
    transform: translateY(0);
}

/* Initial state: hidden with transparency */
.fade-in-section {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    will-change: opacity, transform;
}

/* When the class "fade-in-active" is added, fade in */
.fade-in-section.fade-in-active {
    opacity: 1;
    transform: translateY(0);
}

/* Features Page End */

/* Testimonials Section Start */

.testimonials {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 60vh;
    text-align: center;
    width: 100%;
    padding: 50px 0; /* Adds spacing above and below the section */
    background-color: var(--white);
  }
  
  .testimonials-header {
    margin-bottom: 30px; /* Ensures spacing between title and carousel */
    width: 80%; /* Adjust width to align text properly */
  }
  
  .testimonials-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #FFC107; /* Adjust to match your theme */
    font-family: 'Cocogoose';
  }
  
  .testimonials-header p {
    font-size: 1.2rem;
    color: #000;
    font-weight: 600;
    max-width: 80%;
    margin: 0 auto; /* Centers text block */
    font-family: 'Roboto';
  }
  
  .wrapper {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 1100px;
    width: 100%;
  }
  
  /* Ensures the carousel remains aligned within the section */
  .carousel {
    width: 100%;
  }
  
  .wrapper {
    max-width: 1100px;
    width: 100%;
    position: relative;
  }
  .wrapper i {
    top: 50%;
    height: 50px;
    width: 50px;
    cursor: pointer;
    font-size: 1.25rem;
    position: absolute;
    text-align: center;
    line-height: 50px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0,0,0,0.23);
    transform: translateY(-50%);
    transition: transform 0.1s linear;
  }
  .wrapper i:active{
    transform: translateY(-50%) scale(0.85);
  }
  .wrapper i:first-child{
    left: -22px;
  }
  .wrapper i:last-child{
    right: -22px;
  }
  .wrapper .carousel{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% / 3) - 12px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    border-radius: 8px;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .carousel::-webkit-scrollbar {
    display: none;
  }
  .carousel.no-transition {
    scroll-behavior: auto;
  }
  .carousel.dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
  .carousel.dragging .testimonials-card {
    cursor: grab;
    user-select: none;
  }
  .carousel :where(.testimonials-card, .testimonials-img) {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .carousel .testimonials-card {
    scroll-snap-align: start;
    height: 342px;
    list-style: none;
    background: #fff;
    cursor: pointer;
    padding-bottom: 15px;
    flex-direction: column;
    border-radius: 8px;
  }
  .carousel .testimonials-card .testimonials-img {
    background: var(--hseqyellow);
    height: 148px;
    width: 148px;
    border-radius: 50%;
  }
  .testimonials-card .testimonials-img img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
  }
  .carousel .testimonials-card h2 {
    font-weight: 500;
    font-size: 1.56rem;
    margin: 30px 0 5px;
    font-family: 'Cocogoose';
    color: var(--hseqyellow);
  }
  .carousel .testimonials-card span {
    color: #6A6D78;
    font-size: 1.2rem; /* Adjust as needed */
    text-align: center; /* Centers text */
    display: block; /* Ensures full width */
    padding: 0 15px; /* Adds some padding for better readability */
    max-width: 90%; /* Prevents text from stretching too wide */
    margin: 0 auto; /* Centers block element inside the card */
    line-height: 1.4; /* Improves readability */
  }
  
  .carousel-btn {
    top: 50%;
    height: auto; /* Adjust based on button size */
    width: 50px; /* Adjust based on button size */
    cursor: pointer;
    position: absolute;
    transform: translateY(-50%);
    transition: transform 0.1s linear;
  }
  
  
  /* Animate Carousel Button Press */
  .carousel-btn:active {
    transform: translateY(-50%) scale(0.85);
  }
  
  #left {
    left: -4.5%; /* Adjust as needed */
  }
  
  #right {
    right: -4.15%; /* Adjust as needed */
  }
  
/* Testimonials Section End */

/* Footer Section Start */

#footerBG {
    background: #141313;
    color: var(--white);
    font-family: var(--roboto);
    padding-top: 30px;
}

#footerBG .container {
    width: auto;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.container::before {
    display: table;
    content: " ";
}

#footerBG .row {
    display: flex;
    justify-content: center; /* Align columns closer together */
    text-align: center;
    margin: 0 auto;
    position: relative; /* Make position relative to enable pseudo-elements */
    gap: 10rem; /* Small gap between columns */
}

.row::before {
    display: table;
    content: " ";
}

.column {
    position: relative;
    min-height: 1px;
    padding-left: 0; /* Remove padding to bring columns closer */
    padding-right: 0; /* Remove padding to bring columns closer */
    margin-left: 0; /* Keep margin at 0 */
    margin-right: 0; /* Keep margin at 0 */
}

.footer-line {
    position: absolute;
    right: -50%; /* Adjust this value as needed to center the line */
    top: 10%; /* Adjust top position for consistency */
    bottom: 10%; /* Adjust bottom position for consistency */
    width: 2px; /* Adjust width as needed */
    height: 80%; /* Adjust height to ensure it fits well */
    background-color: var(--hseqyellow);
    transform: translateX(50%); /* Center it within the gap */
}

/* First Line (Between HOME and ABOUT) */
.column:nth-child(1) .footer-line {
    right: -120%; /* Adjust this value to center the line */
}

/* Second Line (Between ABOUT and SERVICES) */
.column:nth-child(2) .footer-line {
    right: -50%; /* Adjust this value to center the line */
}

/* Third Line (Between SERVICES and CONTACT) */
.column:nth-child(3) .footer-line {
    right: -75%; /* Adjust this value to center the line */
}

h5 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    text-align: left;
}

#footerBG ul {
    list-style-type: none;
    line-height: 1.7;
}

.column ul {
    display: block;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: left;
    font-size: 0.9rem;
}

.column-hover:hover h5,
.column-hover:hover ul li a {
    color: var(--hseqyellow); 
}

/* Target the About section */
.column:nth-child(2) ul li {
    margin-bottom: 15px; /* Adjust the value to increase/decrease the gap */
}

/* Target the Contact section */
.column:nth-child(4) ul li {
    margin-bottom: 15px; /* Adjust the value to increase/decrease the gap */
}

/* Ensure consistent styling across About and Contact sections */
.column:nth-child(2) ul li:last-child,
.column:nth-child(4) ul li:last-child {
    margin-bottom: 0;
}

#footerBG a {
    color: var(--white);
}

.row::after {
    clear: both;
    display: table;
    content: " ";
}

.container::after {
    clear: both;
    display: table;
    content: " ";
}

#footerBG .footer-social-networks {
    padding-top: 10px;
    padding-bottom: 10px;
}

.footer-social-networks {
    display: flex;
    flex-direction: column; /* Stack icons vertically */
    align-items: center; /* Align icons in the center */
    justify-content: flex-start; /* Align icons to the top */
}

.footer-social-networks a {
    margin: 10px 0; /* Increase margin between icons */
}

.footer-social-networks img {
    width: 30px;
    height: auto;
}

.footer-copyright {
    background-color: var(--hseqyellow);
    text-align: center;
    overflow-y: hidden;
    height: 60px; /* Set a fixed height */
    display: flex; /* Use flexbox to center content */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
}

.ud-logo {
    width: 20vw; /* Smaller percentage of the viewport width */
    max-width: 220px; /* Increase the maximum width */
    min-width: 60px; /* Ensure a minimum size so it doesn't get too small */
    height: auto; /* Maintain aspect ratio */
}

/* Mobile Footer Menu Style */
.mobile-footer {
    display: none;
    background-color: #141313;
    padding: 15px;
    text-align: center;
    border-radius: 15px;
}

.mobile-footer .social-networks {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.mobile-footer .social-networks img {
    width: 30px;
    height: auto;
}

.mobile-footer .mobile-footer-logo {
    display: flex;
    justify-content: center;
    padding-bottom: 30px;
}

.mobile-footer .mobile-footer-logo img {
    width: 250px;
    height: auto;
}

.mobile-footer .social-networks,
.mobile-footer .mobile-footer-logo {
    display: none;
}


/* Footer Section End */

/* applicable to sub pages  */
.pages .logowrap img,
.pages .primary-navigation li a,
.pages .tel button,
.pages .hero h1{
    animation: none;
    animation-delay: none;
    visibility: visible;
    opacity: 1;
}

.pages .hero {
    background-image: none;
}

.pages .hero::before {
    background-color: rgba(0, 0, 0, 0);
}


.pages .primary-navigation li a {
    color: #000;
    transition: color 0.3s ease-in-out;
}

.pages header.black .primary-navigation li a {
    color: #fff;
}

.pages #header {
    background-color: transparent;
}
.pages #header.black {
    background-color: var(--dark);

}

/* Products Pages Start*/
.products .hero-item {
    display: grid;
    grid-template-areas: "stack";
    position: relative;
    width: 100%;
    height: 100%;
}

/* Background Image */
.products .hero-img{
    grid-area: stack;
    width: 100%;
    height: auto;
    align-self: start;
    padding-top: 12rem;
}

.products .hero-img img{
    width: 100%;
    height: auto;
    object-fit: cover;
}

.products .text-item {
    grid-area: stack;
    position: relative;
    color: white;
    text-align: center;
    z-index: 2;
    border-radius: 10px;
    width: 100%;
    padding-bottom: 12rem;

}

.products .text-item h1,
.products .text-item p,
.about .text-item h1,
.about .text-item p{
    color: white;
    width: 60%;
}

.products .bezel {
    grid-area: stack; 
    z-index: 3;
    display: flex;
    justify-content: center;
    align-self: end; 
}

.products .bezel img {
    width: 35%;
    height: auto;
}
/* Products Hero Ends */
.products-content {
    height: auto;
    padding: 2rem;
    background: linear-gradient(to bottom, #ffcc08 0%, #fff 100%);
}

.products-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 0;
    
}

.products .content {
    display: flex;
    width: 80%; 
    padding: 8rem 0;
    flex-direction: row-reverse;
}

.products .content .text-item {
    align-items: start;
    padding-bottom: 6rem;
}

.products .content h1 {
    color: var(--hseqgrey);
    font-size: clamp(2.5rem, 5vw, 4rem);
    text-align: start;
    width: 80%;
    font-size: 3rem;
}

.products .content p {
    color: var(--hseqlightgrey);
    text-align: start;
    width: 82%;
    font-size: 1.5rem;
}

.products .content li {
    list-style: none;
    background-image: url(/assets/images/robusthseq-secondary-icon.webp);
    background-position: 0 1.4rem;
    background-size: 2rem;
    background-repeat: no-repeat;
    font-size: 1.7rem;
    font-weight: 700;
    padding: 1.5rem 3rem;
    color: var(--hseqgrey);
    text-align: left;
}

.products .text-container {
    display: flex;
    flex-direction: column;
    gap: 15rem;
}


.products .first li {
    background-image: url(/assets/images/robusthseq-white-icon.png);
}

.products .text-item h1 {
    color: var(--white);
}

.products .yt-bg h1 {
    color: var(--dark);
}

.products .gif-container img {
    transition: all 0.3s ease-in-out;
}


.fixed {
    position: fixed;
    top: 45%; /* Adjust as needed */
    z-index: 1000;
}

/* Products Pages Ends*/

/* About Pages Start*/
.about .hero {
    height: auto;
    display: grid;
    place-items: center;
    padding-top: min(10vh, 5rem);
}

/* Grid Layout */
.about .hero-item {
    display: grid;
    grid-template-areas: "stack";
    position: relative;
    width: 100%;
    height: auto;
}

/* Background Image */
.about .hero-img {
    grid-area: stack;
    width: 100%;
    height: auto;
    align-self: start;
    padding-top: min(12vh, 7rem);
}

.about .hero-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.about .text-item {
    grid-area: stack;
    position: relative;
    color: white;
    text-align: center;
    z-index: 2;
    border-radius: 10px;
    width: 100%;
    padding-bottom: max(95vh, 50rem);

}

.about .content {
    grid-area: stack;
    padding-top: min(40vh, 30rem);
    padding-bottom: min(20vh, 10rem);
}

.about .bezel {
    grid-area: stack;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-self: end;
}

.about .bezel img {
    width: 55%;
    height: 100%;
    padding-left: min(20vw, 10rem);
    padding-top: 10rem;
}

.about .text-container {
    padding-top: clamp(52vh, 40vh, 35rem);

}

.about .content h1 {
    color: var(--hseqgrey);
    font-size: clamp(2.5rem, 5vw, 2rem);
    text-align: start;
    width: 80%;
}

.about .content p {
    color: var(--hseqlightgrey);
    width: 80%;
    font-size: clamp(1.5rem, 2.5vw, 1.5rem);
    padding: 3rem 0;
}

.about .text-container li {
    list-style: none;
    background-image: url(/assets/images/robusthseq-secondary-icon.webp);
    background-position: 0 2rem;
    background-size: 2rem;
    background-repeat: no-repeat;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 1.5rem 3rem;
    color: var(--hseqgrey);
    text-align: left;
}

/* .about .text-container span {
    color: var(--hseqyellow);
} */

/* About Pages Ends*/
.wcu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #1e1d1d;
}

.sec,
.ccc {
    display: flex;
    background-color: #1e1d1d;
   justify-content: center;
   align-items: center;
    padding-top: 5rem;
    padding-bottom: 10rem;
}

.ccc-container,
.sec-container {
    width: 80%;
    display: flex;
    flex-direction: row-reverse;
    margin-top: 15rem;
    box-shadow: inset 5px 5px 8px rgba(234, 94, 40, 0.2), inset -5px -5px 8px rgba(234, 94, 40, 0.15), 0px 10px 20px rgba(234, 94, 40, 0.3), 0px -10px 20px rgba(234, 94, 40, 0.3);
    border-radius: 15px;
}

.wcu-content{
    background-image: url('/assets/images/crosscut-truck.webp');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
}

.abt-pg-content {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    /* overflow: hidden; */
}

.ccc .abt-pg-content,
.sec .abt-pg-content{
    width: 30%;
}

.ccc .abt-pg-content img,
.sec .abt-pg-content img {
    width: 40%;
    transform: translateX(20%);
    position: fixed;
    margin-bottom: 20rem;

}

.wcu-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1;
}

.abt-pg-infographic {
    z-index: 2;
    padding-right: 3rem;
}

.abt-pg-items {
    position: relative;
    display: flex;
    width: 77%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #cbcbcb;
    padding: 5rem;
    font-size: 1.3rem;
}

.abt-pg-items h1 {
    color: var(--hseqyellow);
    font-size: 3rem;
    padding: 2rem;
}

.abt-pg-items p span {
    font-weight: 800;
    color: var(--white);
}

.abt-pg-items ul {
    padding: 3rem;
}

.abt-pg-items ol {
    padding-left: 5rem;
    padding-bottom: 2rem;
}

.abt-pg-items ol li{
    background-image: none;
    padding-left: 1rem;
    color: #cbcbcb;
    list-style-type: disc;
    font-size: 1rem;
}

.abt-pg-items li {
    list-style: none; 
    background-image: url('/assets/images/cc_fc.webp');
    background-position: 0 0.25rem; 
    background-size: 1rem; 
    background-repeat: no-repeat;
    padding-left: 2rem; 
    color: #ffce9d;
    font-size: 1.2rem;
}

.abt-pg-items ul p {
    color: var(--white);
    padding: 1rem 2rem;
    font-size: 1rem;
}

/* about pages end */

/* Contact Page Start */

/* Contact Section */
/* ===== Contact page ===== */
.contact {
    background: var(--white);
    /* Top padding clears the fixed header. */
    padding: clamp(9rem, 20vh, 14rem) 1.5rem clamp(4rem, 8vh, 7rem);
}

.contact-hero {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(2.5rem, 6vh, 4rem);
}

.contact-hero h1 {
    font-family: var(--cocogoose);
    color: var(--dark);
    font-size: clamp(2.4rem, 6vw, 4rem);
    margin: 0 0 1rem;
}

.contact-hero p {
    font-family: var(--roboto);
    color: var(--hseqgrey);
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.55;
    margin: 0;
}

/* Quick contact method cards */
.contact-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto clamp(3rem, 7vh, 5rem);
}

.contact-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    text-decoration: none;
    padding: 2.25rem 1.5rem;
    border-radius: 16px;
    background: #1a1b1e;
    box-shadow: 0 0 15px rgba(255, 203, 8, 0.5), 0 0 25px rgba(255, 203, 8, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-method:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 20px rgba(255, 203, 8, 0.85), 0 0 38px rgba(255, 203, 8, 0.5);
}

.contact-method img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.contact-method h3 {
    font-family: var(--cocogoose);
    color: var(--white);
    font-size: 1.3rem;
    margin: 0;
}

.contact-method span {
    font-family: var(--roboto);
    color: var(--hseqyellow);
    font-size: 1rem;
    font-weight: 500;
    word-break: break-word;
}

/* Intro + form */
.contact-main {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(2rem, 5vw, 4rem);
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
}

.contact-intro {
    flex: 1 1 320px;
    align-self: center;
}

.contact-intro h2 {
    font-family: var(--cocogoose);
    color: var(--dark);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    margin: 0 0 1rem;
}

.contact-intro p {
    font-family: var(--roboto);
    color: var(--hseqgrey);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.contact-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.contact-points li {
    position: relative;
    padding-left: 2rem;
    font-family: var(--roboto);
    color: var(--hseqgrey);
    font-size: 1.05rem;
}

.contact-points li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--hseqyellow);
    font-weight: 700;
    font-size: 1.3em;
    line-height: 1;
}

/* Form card */
.contact-form {
    flex: 1 1 380px;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    border: 1px solid #ececec;
    align-self: flex-start;
}

.form-header {
    background: var(--hseqyellow);
    padding: 1.1rem 1.5rem;
    text-align: center;
}

.form-header h2 {
    font-family: var(--cocogoose);
    color: var(--dark);
    font-size: 1.3rem;
    margin: 0;
}

.form-body {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row input { flex: 1; }

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid #d5d5d5;
    border-radius: 8px;
    font-family: var(--roboto);
    font-size: 1rem;
    color: var(--dark);
    background: #fafafa;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--hseqyellow);
    box-shadow: 0 0 0 3px rgba(255, 203, 8, 0.25);
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.submit-btn {
    background: var(--hseqyellow);
    color: var(--dark);
    border: none;
    border-radius: 10px;
    padding: 0.95rem 1.5rem;
    font-family: var(--cocogoose);
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(255, 203, 8, 0.35);
    transition: background 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
}

.submit-btn:hover {
    background: #ffd633;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(255, 203, 8, 0.5);
}

.submit-btn:active {
    transform: translateY(0) scale(0.98);
}

@media (max-width: 768px) {
    .contact-methods { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; gap: 1rem; }
}


/* Contact Page End */

/* Media Queries  */

/* Tablets - Portrait Orientation */

@media  (min-width: 766px) and (max-width: 1366px) {

    .primary-navigation {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .hamburger-item {
        display: flex;
        justify-content: center;
        align-items: center;
        visibility: hidden;
        opacity: 0;
        animation: fadeIn 2s ease-in forwards, enablePointerEvents 0s forwards;
        animation-delay: 6.8s;
    }

    .tel-hamburger-wrap {
        display: flex;
        align-items: center;  /* Ensure content is vertically centered */
        justify-content: center; /* Ensure content is horizontally centered */
        white-space: nowrap; /* Prevent line breaks inside the button */
        flex-wrap: nowrap;  /* Prevent the content from wrapping onto another line */
        gap: 3rem;
    }

    /* Shrink the phone button so it fits the crowded nav at this range */
    .tel button {
        padding: 0.6rem 1.1rem;
        border-radius: 10px;
        gap: 0.5rem;
    }

    .tel button p {
        font-size: 1.1rem;
    }

    .tel button img {
        width: 1.4rem;
    }

    .hamburger {
        height: 5vh;
        width: 3.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 0.4rem;
    }

    .hamburger span{
        background-color: var(--white);
        max-height: 0.7rem;
        min-height: 0.5rem;
        max-width: 100%;
        min-width: 70%;
        border-radius: 1rem;
    }

    #menuToggle:checked + menu-icon .hamburger span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    #menuToggle:checked + menu-icon .hamburger span:nth-child(2) {
        opacity: 0;
    }

    #menuToggle:checked + menu-icon .hamburger span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .hamburger-content {
        display: none;
        flex-direction: column;
        position: absolute;
        margin-top: 300px;
        background-color: var(--hseqgrey);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        width: 20%; 
        text-align: center;
        font-family: var(--roboto);
        font-weight: bold;
        transition: top 0.9s ease, background-color 0.9s ease;
    }
    
    .hamburger-content a {
        padding: 15px;
        text-decoration: none;
        color: var(--hseqyellow);
        display: block;
        font-size: 1rem;
        transition: color 0.9s ease;
    }
    
    .hamburger-content a:last-child {
        border-bottom: none;
    }
    
    #menuToggle:checked ~ .hamburger-content {
        display: flex;
    }

    .hb-item {
        padding: 1rem;
    }

    .w-hb-link {
        color: var(--hseqyellow);
        text-decoration: none;
        display: flex;
        justify-content: center;
    }

    #menuToggle:checked + .menu-icon + .hamburger-content {
        display: flex; /* Ensure it displays correctly */
        flex-direction: column;
    }

    #header {
        height: 9rem;
    }

    .logowrap img {
        width: 19.5rem;
    }

    .logowrap img.scale-down {
        transform: scale(0.95); 
    }

    .logo-gif {
        position: absolute;
        left: 50%;
        transform: translateX(-22%);
        width: 1800px; 
        height: auto; 
        z-index: 1;
    }

    .logo-gif img {
        width: 50%; /* Set a fixed width */
        height: auto;
    }

    .hero h1 {
        font-size: 7rem;
    }

    /* Keeps info elements inside the container */
    .info-container {
        height: 0;
        overflow: hidden;
        transition: height 1s ease-in-out;
    }

    .info-card {
        flex-direction: column;
        height: auto; 
        align-items: flex-start;
    }

    .info-card .text-container {
        width: 100%;
        padding-left: 0;
        padding-top: 30px; 
        text-align: center; 
        align-items: center; 
    }

    .hover-text {
        opacity: 1; /* Make it fully visible */
        pointer-events: auto; /* Ensure it can be interacted with */
    }

    .cards-container .card {
        min-width: 380px; /* Increase the minimum width */
        height: 500px; /* Increase the height */
        margin: 40px; /* Optionally adjust margin for better spacing */
        transition: 0.5s;
    }

    .cards-container .card .box {
        top: 30px; /* Adjust top position to keep inner box aligned */
        left: 30px; /* Adjust left position */
        right: 30px; /* Adjust right position */
        bottom: 30px; /* Adjust bottom position */
    }

    .cards-container .card .box .content {
        padding: 30px; /* Increase padding for better content spacing */
    }

    .cards-container .card .box .content h3 {
        font-size: 2rem; /* Increase the font size of the heading */
    }

    .cards-container .card .box .content p {
        font-size: 1.25rem; /* Increase the font size of the paragraph */
    }

    .cards-container .card .box .content .read-more {
        padding: 10px 25px; /* Increase padding for the button */
        font-size: 1.1rem; /* Optionally increase the font size */
    }

    .cards-container .card .box .content img {
        top: -20px; /* Adjust the position of the image if necessary */
        left: 150px; /* Adjust the left position */
        width: 200px; /* Increase the size of the image */
    }

    #footerBG .row {
        display: flex;
        justify-content: center; /* Align columns closer together */
        text-align: center;
        margin: 0 auto;
        position: relative; /* Make position relative to enable pseudo-elements */
        gap: 6rem; /* Small gap between columns */
    }

    .column {
        position: relative;
        min-height: 1px;
        padding-left: 0; /* Remove padding to bring columns closer */
        padding-right: 0; /* Remove padding to bring columns closer */
        margin-left: 0; /* Keep margin at 0 */
        margin-right: 0; /* Keep margin at 0 */
    }

    /* Increase font size for headings and list items */
    .column h5 {
        font-size: 1.5rem; /* Increase font size for headings */
    }

    .column ul li {
        font-size: 1.1rem; /* Increase font size for list items */
    }

    .footer-line {
        position: absolute;
        right: -50%; /* Adjust this value as needed to center the line */
        top: 10%; /* Adjust top position for consistency */
        bottom: 10%; /* Adjust bottom position for consistency */
        width: 2px; /* Adjust width as needed */
        height: 80%; /* Adjust height to ensure it fits well */
        background-color: var(--hseqyellow);
        transform: translateX(50%); /* Center it within the gap */
    }
    
    /* First Line (Between HOME and ABOUT) */
    .column:nth-child(1) .footer-line {
        right: -80%; /* Adjust this value to center the line */
    }
    
    /* Second Line (Between ABOUT and SERVICES) */
    .column:nth-child(2) .footer-line {
        right: -30%; /* Adjust this value to center the line */
    }
    
    /* Third Line (Between SERVICES and CONTACT) */
    .column:nth-child(3) .footer-line {
        right: -50%; /* Adjust this value to center the line */
    }

    .footer-social-networks {
        flex-direction: column; /* Stack icons vertically */
        align-items: center; /* Center icons */
        justify-content: flex-start; /* Align icons to the top */
    }

    .footer-social-networks a {
        margin: 10px 0; /* Increase margin between icons */
    }

    .footer-copyright {
        height: 50px; /* Reduce the height slightly for better spacing */
        padding: 0 15px; /* Add padding to ensure content doesn’t touch edges */
        font-size: 0.9rem; /* Reduce font size slightly for tablet view */
    }

    .ud-logo {
        width: 26vw; /* Slightly reduce viewport width percentage */
        max-width: 300px; /* Adjust max-width */
        min-width: 50px; /* Adjust minimum width */
    }
/* about pages */
    .sec-container, 
    .ccc-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .ccc .abt-pg-items,
    .sec .abt-pg-items {
        width: 100%;
    }

    .sec h1, 
    .ccc h1 {
        font-size: 3rem;
    }

    .sec p, 
    .ccc p, 
    .abt-pg-items p {
        font-size: 1.6rem;
    }

    .sec ul p, 
    .ccc ul p, 
    .abt-pg-items ul p {
        font-size: 1.4rem;
    }

    .sec li, 
    .ccc li {
        font-size: 2rem;
    }

    .sec ol li, 
    .ccc ol li {
        font-size: 1.3rem;
        padding: 1rem 0 ;
    }

    .sec .abt-pg-content img, 
    .ccc .abt-pg-content img {
        display: none;
    }

    .sec .abt-pg-content, 
    .ccc .abt-pg-content {
        display: none;
    }
    /* about pages end */

}

/* Phones and Small Tablets (iPhone 14 Pro Mainly) */
@media (min-width: 320px) and (max-width: 765px) {

    .primary-navigation {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .hamburger-item {
        display: flex;
        justify-content: center;
        align-items: center;
        visibility: hidden;
        opacity: 0;
        animation: fadeIn 1.5s ease-in forwards, enablePointerEvents 0s forwards;
        animation-delay: 3.4s; /* Reduced delay for faster appearance */
    }

    .tel-hamburger-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        flex-wrap: nowrap;
        gap: 1.5rem; /* Reduced gap for smaller screens */
    }

    .tel button {
        padding: 0.5rem; /* Adjust padding to center the image */
        font-size: 0; /* Hide text by reducing font-size */
        border-radius: 10px; /* Make the button circular */
        width: auto; /* Allow button width to adjust to the content */
    }

    .tel button img {
        width: 20px; /* Adjust the size of the phone icon */
        height: auto;
    }

    .tel button p {
        display: none; /* Hide the phone number text */
    }

    .hamburger {
        height: 4vh; /* Slightly smaller height */
        width: 2.5rem; /* Reduced width */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 0.3rem; /* Reduced gap between lines */
    }

    .hamburger span {
        background-color: var(--white);
        max-height: 0.5rem; /* Adjusted height */
        min-height: 0.3rem; /* Adjusted height */
        max-width: 90%; /* Reduced max-width */
        min-width: 60%; /* Reduced min-width */
        border-radius: 0.8rem; /* Slightly smaller radius */
    }

    #menuToggle:checked + menu-icon .hamburger span:nth-child(1) {
        transform: translateY(6px) rotate(45deg); /* Adjusted for smaller span height */
    }

    #menuToggle:checked + menu-icon .hamburger span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg); /* Adjusted for smaller span height */
    }

    .hamburger-content {
        display: none;
        flex-direction: column;
        position: absolute;
        margin-top: 220px; /* Adjusted for smaller screens */
        background-color: var(--hseqgrey);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        width: 30%; /* Increased width for better visibility */
        text-align: center;
        font-family: var(--roboto);
        font-weight: bold;
        transition: top 0.7s ease, background-color 0.7s ease;
    }

    .hamburger-content a {
        padding: 10px; /* Reduced padding */
        font-size: 0.9rem; /* Reduced font size */
        transition: color 0.7s ease;
    }

    #menuToggle:checked ~ .hamburger-content {
        display: flex;
    }

    .hb-item {
        padding: 0.5rem; /* Reduced padding */
    }

    .w-hb-link {
        color: var(--hseqyellow);
        text-decoration: none;
        display: flex;
        justify-content: center;
    }

    #header {
        height: 7rem; /* Reduced height */
    }

    .logowrap img {
        width: 14rem; /* Reduced width */
    }

    .logowrap img.scale-down {
        transform: scale(0.85); /* Further scale down */
    }

    .logo-gif {
        position: absolute;
        left: 50%;
        transform: translateX(-17%);
        width: 1000px; /* Reduced width */
        height: auto; 
        z-index: 1;
    }

    .logo-gif img {
        width: 40%; /* Reduced width */
        height: auto;
    }

    .hero h1 {
        font-size: 3.5rem; /* Reduced font size */
    }

    .info-container {
        height: 0;
        overflow: hidden;
        transition: height 0.8s ease-in-out;
    }

    .info-card {
        flex-direction: column;
        height: auto; 
        align-items: flex-start;
    }


    .info-card .text-container {
        width: 100%;
        padding-left: 0;
        padding-top: 20px; /* Reduced padding */
        text-align: center; 
        align-items: center; 
    }

    .info-card .text-container h1 {
        font-size: clamp(1.8rem, 4vw, 3.2rem);
    }

    .cards-container .card {
        min-width: 300px; /* Further reduced min-width */
        height: 400px; /* Reduced height */
        margin: 30px; /* Adjusted margin */
        transition: 0.5s;
    }

    .cards-container .card .box {
        top: 20px; /* Adjusted top position */
        left: 20px; /* Adjusted left position */
        right: 20px; /* Adjusted right position */
        bottom: 20px; /* Adjusted bottom position */
    }

    .cards-container .card .box .content {
        padding: 20px; /* Reduced padding */
    }

    .cards-container .card .box .content h3 {
        font-size: 1.8rem; /* Reduced font size */
    }

    .cards-container .card .box .content p {
        font-size: 1rem; /* Reduced font size */
    }

    .cards-container .card .box .content .read-more {
        padding: 8px 20px; /* Reduced padding */
        font-size: 1rem; /* Adjusted font size */
    }

    .cards-container .card .box .content img {
        top: -10px; /* Adjusted top position */
        left: 120px; /* Adjusted left position */
        width: 150px; /* Reduced width */
    }

    .mobile-footer {
        display: block; /* Show dropdown on mobile devices */
    }

    .mobile-footer .social-networks,
    .mobile-footer .mobile-footer-logo {
        display: flex; /* Show both dropdown and social networks */
    }

    #footerBG .container {
        display: none; /* Hide the original footer content on mobile */
    }

    #footerBG {
        padding-top: 0px;
    }

    .footer-copyright {
        height: 50px; /* Reduced height */
        padding: 0 15px; /* Reduced padding */
        font-size: 0.8rem; /* Reduced font size */
    }

    .ud-logo {
        width: 40vw; /* Reduced width */
        max-width: 800px; /* Reduced max-width */
        min-width: 40px; /* Reduced min-width */
    }

    .service-section .container {
        height: auto; /* Allow height to adjust based on content */
        padding-top: 2rem;
    }

    .service-content {
        flex-direction: column; /* Stack items vertically */
        align-items: center;
    }

    /* about pages */

    .sec, 
    .ccc {
        padding-bottom: 5rem;
    }

    .sec-container,
    .ccc-container {
        margin-top: 8rem;
        padding: 2rem;
        width: auto;
    }

    .abt-pg-content {
        align-items: center;
    }

    .abt-pg-content img{
        width: 70%;
    }

    .abt-pg-infographic {
        padding: 0;
    }

    .sec .abt-pg-items,
    .ccc .abt-pg-items,
    .abt-pg-items{
        padding: 1rem;
        padding-left: 0;
        width: 20rem;
    }

    .sec h1,
    .ccc h1,
    .abt-pg-items h1{
        font-size: 1.8rem;
        padding: 0;
        padding: 2rem 0;
    }

    .sec p ,
    .ccc p,
    .abt-pg-items p{
        font-size: 0.8rem;
        padding-bottom: 2rem;
    }

    .sec ul p ,
    .ccc ul p,
    .abt-pg-items ul p{
        font-size: 0.8rem;
        padding: 1rem 0;
        width: 15rem;
    }

    .sec li ,
    .ccc li {
        font-size: 1rem;
        padding: 0rem 2rem 2rem;
        width: 12rem;
        margin-right: 5rem;
        background-position: 0rem 2rem;
    }

    .sec ul ,
    .ccc ul {
        padding: 0;
    }

    .sec ol ,
    .ccc ol {
        padding: 1rem;
    }

    .sec ol li,
    .ccc ol li{
        font-size: 0.8rem;
        padding: 1rem 0;
    }

    .sec .abt-pg-content img, 
    .ccc .abt-pg-content img {
        display: none;
    }

    .sec .abt-pg-content, 
    .ccc .abt-pg-content {
        display: none;
    }

    /* about pages end */
}