:root {
      --yellow: #EFD13C;
      --dark: #1D1E18;
      --soft-yellow: rgba(255, 245, 155, 0.55);
      --blue: #135885;
      --white: #fff;
      --green: #2d7554;
      --light-blue: #91b8cf;
    }

    body {
      margin: 0;
      background: var(--white);
      color: var(--dark);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .container {
      /*max-width: 1450px;*/
    }

    .site-header {
      padding: 24px 0 18px;
      background: var(--yellow);
    }

    .brand-logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0px solid var(--dark);
      border-radius: 999px;
      padding: 8px 18px;
      font-weight: 900;
      font-size: 26px;
      line-height: 1;
      color: var(--dark);
      text-decoration: none;
      letter-spacing: -1px;
      
    }

    .brand-logo img {
      width:150px;
    }

    .brand-logo .star {
      width: 24px;
      height: 24px;
      border: 2px solid var(--dark);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0 2px;
      font-size: 13px;
    }

    .nav-yellow {background-color: var(--yellow)!important;}
    .nav-blue {background-color: var(--blue)!important;}
    .nav-green {background-color: var(--green)!important;}
    .nav-lightblue {background-color: var(--light-blue)!important;}
    .nav-black {background-color: var(--dark)!important;}
    .nav-blue .navbar-nav .nav-link, .nav-green .navbar-nav .nav-link, .nav-lightblue .navbar-nav .nav-link, .nav-black .navbar-nav .nav-link {
      color: var(--white);
    }
    .nav-yellow i {
      color: var(--dark)!important;
    }
    .nav-blue i, .nav-green i, .nav-lightblue i, .nav-black i {
      color: var(--white)!important;
    }

    .navbar-nav .nav-link {
      color: var(--dark);
      font-weight: 600;
      font-size: 15px;
      padding: 0 12px !important;
    }

    .navbar-nav .nav-link:hover {
      opacity: .7;
    }

    .nav-icons {
      display: flex;
      align-items: center;
      gap: 15px;
      font-size: 18px;
      margin-right:30px;
    }

    

    .hero-wrap {
      background: var(--yellow);
      position: relative;
      padding: 0 0 90px;
    }

    .hero-card {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      min-height: 640px;
    }

    .hero-card img {
      width: 100%;
      height: 640px;
      object-fit: cover;
      display: block;
    }

    .hero-title {
      position: absolute;
      top: 105px;
      left: 14.5%;
      color: white;
      font-size: clamp(46px, 6vw, 76px);
      font-weight: 600;
      line-height: .95;
      letter-spacing: -2px;
      text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5);
    }

    .hero-cta {
      position: absolute;
      left: 50%;
      bottom: -1px;
      transform: translateX(-50%);
      background: var(--yellow);
      min-width: 370px;
      text-align: center;
      padding: 23px 38px 9px;
      border-radius: 36px 36px 0 0;
      font-size: 20px;
      font-weight: 600;
    }

    /* Container height locking */
    .hero-card {
      height: 640px;
      border-radius: 1rem; /* Adjust or remove as per design */
    }

    /* Force image normalization */
    .hero-card .hero-img {
      height: 640px !important;
      width: 100%;
      object-fit: cover;
      object-position: center;
    }

    /* Overlay and Text z-index layering */
    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 10; /* Keeps text on top of carousel elements */
      pointer-events: none; /* Allows carousel controls underneath to stay clickable */
      background: linear-gradient(
        180deg, 
        rgba(0,0,0,0.4) 0%, 
        rgba(0,0,0,0) 50%, 
        rgba(0,0,0,0.6) 100%
      );
    }

    /* Re-enable pointer events for interactive CTA elements */
    .hero-overlay .hero-cta {
      pointer-events: auto;
    }

    .hero-title {
      color: #ffffff;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    /* Carousel Controls Container Bounding */
.hero-card .carousel-control-prev,
.hero-card .carousel-control-next {
  z-index: 20; /* Ensures buttons sit above the text overlay */
  width: 50px;
  height: 50px;
  top: 50%;
  transform: translateY(-50%); /* Centers buttons vertically */
  background-color: rgba(0, 0, 0, 0.5); /* Dark circle background */
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  opacity: 0.85;
  transition: all 0.25s ease-in-out;
}

/* Position offset from sides */
.hero-card .carousel-control-prev {
  left: 20px;
}

.hero-card .carousel-control-next {
  right: 20px;
}

/* Hover & Active States */
.hero-card .carousel-control-prev:hover,
.hero-card .carousel-control-next:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.8);
  transform: translateY(-50%) scale(1.1); /* Slight pulse on hover */
}

/* Make arrow icons larger and brighter white */
.hero-card .carousel-control-prev-icon,
.hero-card .carousel-control-next-icon {
  width: 1.75rem;
  height: 1.75rem;
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.6));
}

    /* Responsive adjustment for mobile screens */
    @media (max-width: 768px) {
      .hero-card,
      .hero-card .hero-img {
        height: 400px !important;
      }
    }

    .scroll-circle {
      position: absolute;
      left: 50%;
      top: -29px;
      transform: translateX(-50%);
      width: 48px;
      height: 48px;
      background: rgba(255, 255, 255, .65);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--dark);
      font-size: 24px;
      backdrop-filter: blur(3px);
    }

    .intro-section, .bg-yellow {
      position: relative;
      padding: 65px 0 210px;
      overflow: hidden;
      background: var(--yellow);
      /*background: url('/media/tjyftujf/background-intro-1920.png');*/
      background-size: cover;
      background-repeat: no-repeat;
    }

    .bg-yellow.section.has-bg-circles::after {
      background-image: url(/img/circles-light.svg);
      opacity:0.3;
    }

    .intro-label {
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 16px;
    }

    .intro-heading {
      font-size: clamp(38px, 4vw, 46px);
      line-height: 1.12;
      font-style: italic;
      font-weight: 400;
      letter-spacing: -1px;
    }

    .intro-copy {
      font-size: 20px;
      line-height: 1.52;
      font-weight: 600;
      max-width: 560px;
      margin-bottom: 28px;
    }

    .underline-link {
      color: var(--dark);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .thin-line {
      height: 2px;
      background: var(--dark);
      width: 100%;
      max-width: 520px;
      margin: 0 0 22px;
    }

    .dot-pattern {
      position: absolute;
      right: -115px;
      bottom: -140px;
      width: 590px;
      height: 470px;
      opacity: .75;
      pointer-events: none;
      background-image: radial-gradient(circle, var(--soft-yellow) 0 36px, transparent 37px);
      background-size: 110px 110px;
      background-position: 0 0;
      z-index: -1;
    }

    .main-content-section {
            background-color: #f7f8f9;
            /*margin-top: -4rem;*/
            border-top-left-radius: 40px;
            border-top-right-radius: 40px;
            position: relative;
            z-index: 2;
            padding-top: 5rem;
            padding-bottom: 10rem;
        }
        .tab-indicator {
            position: absolute;
            top: -50px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #f7f8f9;
            text-align: center;
            padding: 13px 38px 9px;
            border-radius: 36px 36px 0 0;
            font-size: 20px;
            font-weight: 600;
            /*box-shadow: 0 -5px 15px rgba(0,0,0,0.05);*/
        }

        /* Buttons */
        /* Scoped Custom Buttons to override Bootstrap defaults */
.btn.btn-custom-blue {
    background-color: var(--staatsolie-blue) !important;
    color: #ffffff !important;
    border-radius: 24px;
    padding: 10px 28px;
    font-weight: 600;
    font-size: 0.85rem;
    border: none;
    transition: all 0.2s ease-in-out;
}

.btn.btn-custom-blue:hover {
    background-color: #084471 !important;
    opacity: 0.9;
}

.btn.btn-custom-outline {
    background-color: transparent !important;
    color: var(--staatsolie-blue) !important;
    border: 1.5px solid var(--staatsolie-blue) !important;
    border-radius: 24px;
    padding: 10px 28px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s ease-in-out;
}

.btn.btn-custom-outline:hover {
    background-color: rgba(10, 85, 140, 0.08) !important;
    color: var(--staatsolie-blue) !important;
}

        /* Overlapping Images styling */
        .image-stack {
            position: relative;
            height: 400px;
        }
        .img-large {
            width: 85%;
            height: 280px;
            object-fit: cover;
            border-radius: 8px;
            position: absolute;
            top: 0;
            right: 0;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .img-small {
            width: 45%;
            height: 180px;
            object-fit: cover;
            border-radius: 8px;
            position: absolute;
            bottom: 20px;
            left: 0;
            z-index: 2;
            border: 4px solid #fff;
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }

        /* Footer Icons Section */
        .icon-section {
            border-top: 0px solid #eee;
            padding-bottom: 2rem;
        }
        .svg-icon {
            width: 60px;
            height: 60px;
            stroke: var(--staatsolie-blue);
            stroke-width: 1.5;
            fill: none;
        }

  /* Energy Resources Section Custom Styles */
.energy-resources-section {
    background-color: #f8f9fa; /* Light off-white background matching the graphic */
    padding-top: 6rem;
    padding-bottom: 6rem;
    position: relative;
    overflow: hidden;
    background: url('/media/e0ijieie/bg-whitedots.png');
      background-size: cover;
      background-repeat: no-repeat;
}

.energy-resources-section .container {
    position: relative;
    z-index: 2; /* Keeps text and content sitting correctly above the dot graphics */
}

.energy-resources-section .image-wrapper img {
    width: 100%;
    height: 420px;
    object-fit: cover;
}

.energy-resources-section .accent-line {
    border: none;
    border-top: 2px solid var(--staatsolie-yellow);
    opacity: 1;
    width: 100%;
}

.energy-resources-section .footer-text-link {
    color: var(--staatsolie-blue);
    font-weight: 600;
    font-size: 0.95rem;
    /*text-decoration: none;*/
    border-bottom: 0px solid var(--staatsolie-blue);
    padding-bottom: 2px;
    transition: opacity 0.2s ease;
}

.energy-resources-section .footer-text-link:hover {
    opacity: 0.8;
}

/* Subsidiaries Block Styles */
.subsidiaries-section {
    background-color: #E2E8F0; /* Soft gray-blue background matching the image */
    padding-top: 6rem;
    padding-bottom: 7rem;
}

.subsidiaries-section .subsidiary-card {
    border-radius: 16px;
    background-color: #ffffff;
    min-height: 160px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.subsidiaries-section .subsidiary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Reusing brand blue color rule for standard inline icons */
.subsidiaries-section .text-primary-blue {
    color: var(--staatsolie-blue);
}

/* Sustainability Block Layout Styles */
.sustainability-section {
    background-color: #2D6A4F; /* Emerald/Forest green color matching the UI */
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    padding-top: 7rem;
    padding-bottom: 0rem;
    position: relative;
    margin-top: 0rem; /* Provides separation if stacked underneath another block */
}

/* Intersecting/Overlapping Tab Component */
.sustainability-tab {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2D6A4F; /* Slightly darker matching green header variant */
    color: #ffffff;
    padding: 12px 45px;
    border-radius: 24px 24px 0 0;
    font-weight: 500;
    font-size: 1.1rem;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
    white-space: nowrap;
}

.sustainability-section .content-container {
    position: relative;
    z-index: 2;
}

.sustainability-section .dashed-line {
    border: none;
    border-top: 1.5px solid #ffffff;
}

.sustainability-section .sustainability-link {
    color: #ffffff;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    border-bottom: 1.5px solid #ffffff;
    padding-bottom: 3px;
    transition: opacity 0.2s ease-in-out;
}

.sustainability-section .sustainability-link:hover {
    opacity: 0.8;
}

/* Utility layout helper to smooth white-on-dark contrast scaling */
.sustainability-section .opacity-90 {
    opacity: 0.9;
}

/* Careers Block Custom Styles */
.careers-section {
    background-color: #f8f9fa; /* Off-white background match */
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.careers-section .careers-image-wrapper img {
    width: 100%;
    height: 420px;
    object-fit: cover;
}

.careers-section .careers-text p {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Updates Section Layout */
.updates-section {
    background-color: #f8f9fa;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* Helper blue text token */
.updates-section .text-blue {
    color: var(--blue);
}

/* Modifying standard toggles to match pill states */
.updates-section .btn-custom-outline.active {
    background-color: var(--blue) !important;
    color: #ffffff !important;
}

/* News Cards specific configurations */
.updates-section .news-card {
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease;
}
.updates-section .news-card:hover,
.updates-section .download-card:hover {
    transform: translateY(-4px);
    cursor: pointer;
}
.updates-section .card-hero-img {
    height: 200px;
    object-fit: cover;
}
.updates-section .news-card .card-title {
    font-size: 1.15rem;
    line-height: 1.3;
}

/* Download Cards specific layout configurations */
.updates-section .download-card {
    border-radius: 12px;
    background-color: #ffffff;
    min-height: 140px;
    transition: transform 0.2s ease;
}
.updates-section .download-card h5 {
    font-size: 1.1rem;
}

/* Actual Footer Custom Styles */

.main-footer {
    background-color: #434B4E; 
    border-radius: 40px 40px 0 0; /* Rounds both top-left and top-right corners */
    margin-top: 0;
    position: relative;
}

.main-footer .footer-desc {
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Vertical text link list column configuration */
.main-footer .footer-nav-links li {
    margin-bottom: 0.75rem;
}

.main-footer .footer-nav-links li.spacer {
    height: 1.2rem; /* Creates the distinct visual separation present in the image layout */
}

.main-footer .footer-nav-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    transition: color 0.15s ease-in-out;
}

.main-footer .footer-nav-links a:hover {
    color: var(--staatsolie-yellow);
}

/* Contact block styles */
.main-footer .contact-title {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 600;
}

.main-footer .contact-info p {
    color: #fff;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.main-footer .contact-info a {
    color: #fff;
    text-decoration:none;
}

/* Bottom Yellow bar setup */
.main-footer .bottom-yellow-bar {
    background-color: #F4D03F; /* Staatsolie yellow token */
    padding: 1.2rem 0;
}

.main-footer .legal-link {
    color: #000000;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.main-footer .legal-link:hover {
    text-decoration: underline;
}


/* About Us Specific Page Styles */
.about-hero-section {
    background-color: var(--blue); /* Inherits original #0A558C variable */
    padding-bottom: 6rem;
    position: relative;
}

/* Breadcrumb Home Badge styling */
.about-hero-section .home-icon-badge {
    background-color: var(--yellow);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Unique curve applied to top-left corner of hero image frame */
.about-hero-section .curved-hero-mask {
    border-top-left-radius: 140px;
    overflow: hidden;
    display: inline-block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    width: 100%;
}

.about-hero-section .curved-hero-mask img {
    width: 100%;
    height: 450px;
    object-fit: cover;
}

/* Custom layout block for the bottom white navigation card strip */
.sub-nav-shelf-section {
    background-color: #ffffff;
    margin-top: -3.5rem;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    position: relative;
    z-index: 10;
    padding: 3rem 1.5rem 5rem 1.5rem;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.03);
}

/* Reusing button configurations with minor tweaks to scale across groups */
.sub-nav-shelf-section .btn-custom-blue {
    font-size: 0.95rem;
    padding: 12px 32px;
}

/* What We Do Component Custom Variables & Space */
.what-we-do-section {
    background-color: #f8f9fa; /* Consistent off-white canvas setting */
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/*
.what-we-do-section .main-image-wrapper img {
    width: 100%;
    height: 440px;
    object-fit: cover;
}
*/

.what-we-do-section .text-block p {
    font-size: 0.95rem;
    line-height: 1.65;
}

/* Subtle pulse transition when checking process options */
.what-we-do-section svg {
    transition: transform 0.25s ease;
    cursor: pointer;
}
.what-we-do-section svg:hover {
    transform: scale(1.08);
}

/* Feature Cards styling */
.icon-section .feature-icon-card {
    padding: 0 1rem;
}

.icon-section .icon-wrapper img {
    height: 100px; /* Adjust scale size to match your media file dimensions */
    object-fit: contain;
}

.icon-section .feature-title {
    color: var(--staatsolie-blue, #0A558C);
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

/* Yellow border marker rule beneath the titles */
.icon-section .yellow-accent-line {
    width: 60px;
    height: 3px;
    background-color: var(--staatsolie-yellow, #F4D03F);
    border-radius: 2px;
}

.icon-section .feature-text {
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 280px;
    margin: 0 auto;
}

    @media (max-width: 991px) {
      .site-header {
        padding-top: 18px;
      }

      .navbar-nav {
        margin-top: 20px;
        gap: 12px;
      }

      .navbar-nav .nav-link {
        padding: 6px 0 !important;
      }

      .hero-card,
      .hero-card img {
        min-height: 520px;
        height: 520px;
      }

      .hero-title {
        left: 8%;
        top: 80px;
      }

      .intro-section {
        padding-top: 40px;
      }
    }

    @media (max-width: 575px) {
      .brand-logo {
        font-size: 21px;
      }

      .hero-card,
      .hero-card img {
        min-height: 430px;
        height: 430px;
      }

      .hero-title {
        font-size: 46px;
        left: 32px;
        top: 65px;
      }

      .hero-cta {
        min-width: 300px;
        font-size: 16px;
        padding-left: 20px;
        padding-right: 20px;
        bottom: 10px;
      }

      .tab-indicator {
        font-size: 16px;
        top: -40px;
      }

      .intro-copy {
        font-size: 17px;
      }

    }