/* Basic Reset */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
  
      body {
        font-family: Arial, sans-serif;
      }
  
      /* Navigation Bar Styling */
      .navbar {
        font-size: 16px;
        list-style-type: none;
        margin-right: 35rem;
        background-color: #ffffff;
        display: flex;
        justify-content: center; /* centers the nav horizontally */
      }
  
      .navbar > li {
        position: relative; /* Needed for absolutely-positioned dropdowns */
      }
  
      .navbar > li > a {
        margin-top: 2rem;
        font-family: "Source Sans 3", serif;
        font-size: 16px;
        display: block;
        padding: 14px 20px;
        text-decoration: none;
        color: #3b3b3b;
        background-color: #ffffff;
        transition: background-color 0.3s ease;
      }
  
      /* Hover effect for main menu items */
      .navbar > li > a:hover {
        background-color: #55555500;
        color: #0d47a1;
        border-bottom: 5px solid blue;
      }
  
      /* Dropdown Menu (initially hidden) */
      .dropdown {
        font-family: "Source Sans 3", serif;
        font-size: 16px;
        z-index: 999;
        width: 200px;
        height: 100px;
        text-align: center;
        list-style-type: none;
        position: absolute;
        top: 100%; /* positions the dropdown below the main menu link */
        left: 0;
        min-width: 150px;
        background-color: #44444400;
        display: none; /* Hide dropdown by default */
      }
  
      .dropdown li a {
        display: block;
        padding: 12px 16px;
        text-decoration: none;
        color: #fff;
        transition: background-color 0.3s ease;
      }
  
      .dropdown li a:hover {
        background-color: #666;
        color: #1b7bae;
      }
  
      /* Show the dropdown when hovering over the parent <li> */
      
      .navbar li:hover .dropdown {
        display: block;
      } 

      /* Main Content Area */
      main {
        padding: 0px;
      }
  
      h1 {
        margin-bottom: 20px;
      }
  
/* 1) Make the header transparent */
header {
    background-color: transparent;
    position: relative; /* or absolute if you want it on top of the hero */
    width: 100%;
    z-index: 999;       /* ensure the header stays above other elements */
  }
  
  /* 2) Style the logo container */
  .logo {
    float: left;        /* to position the logo on the left */
    padding: 20px 30px; /* adjust as needed */
  }
  
  .logo img {
    width: auto;
    height: auto;
    max-height: 60px;   /* restricts the logo size, adjust as needed */
  }
  
  /* 3) Make the dropdown background blue */
  .dropdown {
    background-color: #041c2b; /* bright blue or pick another shade */
  }
  
  .dropdown li a {
    background-color: #041c2b;
    color: #fff;  /* text color on blue background */
  }
  
  /* Hover effect for sub-menu items (optional) */
  .dropdown li a:hover {
    background-color: #041c2b; /* darker blue on hover */
  }

  /* For screens under ~768px (common mobile breakpoint) */
@media (max-width: 768px) {
  .navbar {
    margin-right: 0;          /* Remove huge right margin */
    flex-direction: column;   /* Stack menu items vertically */
    align-items: center;      /* Center them if you want */
  }

  .navbar > li > a {
    font-size: 14px;          /* Slightly smaller text if needed */
    margin-top: 0.5rem;       /* Space between items */
    border-bottom: none;      /* Remove any large bottom border if it conflicts */
  }
  
  /* Hide or restyle the dropdown differently (optional) */
  .dropdown {
    position: static;         /* So it doesn’t float off the screen */
    width: 100%;              /* Let it fill the available width if stacked */
  }
  .dropdown li a {
    text-align: center;       /* Center the dropdown links in mobile view */
  }
}
  
  /* 4) Hero Section Styles */
    /* Hero section container */
    .hero {
      position: relative;   /* Establishes a stacking context */
      width: 100%;
      height: 98%;        /* Full viewport height (adjust as needed) */
      overflow: hidden;     /* Hide any overflow from child elements */
    }

    /* The hero image itself */
    .hero img {
      width: 100%;
      height: 98%;
      object-fit: cover;    /* Ensures the image covers the container */
      display: block;
      position: relative;   /* So we can manage stacking if needed */
      z-index: 1;           /* Image is behind overlay & behind text, but we’ll handle that below */
    }

    /* Overlay that fades from white at the top to transparent further down */
    .hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* 
        White at the top, transparent by 70%.
        (Tweak the percentage to adjust the fade.)
      */
      background: linear-gradient(
        to bottom,
        white 0%,
        rgba(255, 255, 255, 0) 40%
      );
      pointer-events: none; /* So clicks go through to underlying elements */
      z-index: 2;           /* Overlay on top of the image */
    }

    /* Content within the hero (above everything else) */
    .hero .hero-content {
      position: absolute;
      top: 14%;
      left: 70%;
      transform: translate(-50%, 0);

      z-index: 3;
      color: #000000;

      width: min(760px, 92%);
      padding: 2.4rem 2.5rem;

      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;

      border: none;
      border-radius: 0;
      box-shadow: none;

      display: flex;
      flex-direction: column;
      gap: 1.2rem;
    }

    .hero .hero-content h1 {
      font-family: "Playfair Display", serif;
      text-align: left;
      font-size: 3.6rem;
      line-height: 1.05;
      margin: 0;
    }

    .hero .hero-content p {
      text-align: left;
      font-family: "Montserrat", serif;
      font-size: 1.1rem;
      line-height: 1.75;
      margin: 0;
      max-width: 640px;
    }

    /* Hero CTA button */
    .hero-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      width: fit-content;

      padding: 0.95rem 1.2rem;
      border-radius: 14px;

      background: #1e52fb;
      color: #ffffff;
      text-decoration: none;

      font-family: "Montserrat", serif;
      font-weight: 800;
      font-size: 1rem;

      box-shadow: 0 14px 30px rgba(30, 82, 251, 0.22);
      transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .hero-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 40px rgba(30, 82, 251, 0.28);
      background: #1542db;
    }

    .hero-cta__arrow {
      display: inline-block;
      transition: transform 0.2s ease;
    }

    .hero-cta:hover .hero-cta__arrow {
      transform: translateX(4px);
    }

    @media (max-width: 768px) {
      .hero .hero-content {
        top: 10%;
        left: 50%;
        transform: translate(-50%, 0);
        padding: 1.6rem 1.35rem;
        border-radius: 16px;
      }

      .hero .hero-content h1 {
        font-size: 2.35rem;
      }

      .hero .hero-content p {
        font-size: 1rem;
      }
    }

  
  /* General Reset/Box-Sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Body */
  body {
    font-family: Arial, sans-serif;
    color: #333;
    background-color: #fff; /* Main website color is white */
  }
  
  /* Header */
  .header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 2rem;
    background-color: #fff;
  }

  
  /* Navigation */
  .main-nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
  }
  
  .main-nav a {
    text-decoration: none;
    color: #333;
    padding: 0.5rem 0.75rem;
    transition: background-color 0.3s;
  }
  
  /* Dark blue hover for dropdown-hover class */
  .dropdown-hover:hover {
    background-color: #002060; /* Dark Blue */
    color: #fff;
  }
  
  .active {
    font-weight: bold;
  }
  
  /* HERO SECTION */
  .hero-section {
    position: relative;
    width: 100%;
    height: 60vh; /* Adjust as needed */
    overflow: hidden;
  }
  
  /* Hero content */
  .hero-section .hero-content {
    width: 50%;
    padding: 2rem;
    text-align: right;
  }
  
  .big-title {
    font-size: 3rem;
    color: #fff;
    margin-bottom: 1rem;
  }
  
  .small-text {
    color: #fff;
    margin-bottom: 2rem;
  }
  
  
  /* NEWS BAR (below hero) */
  .news-bar {
    color: #000000;
    font-family: "Montserrat", serif;
    margin-bottom: 0.5cm;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 1rem 3rem;
    justify-content: flex-start;
    gap: 2rem;
    font-size: 18px;
    /* Make sure it's "short in height, wide in width" => controlled by content & padding */
  }
  .news-bar h2 {
    font-size: 16px;
    margin-right: 2rem;
  }
  
  .news-items {
    color: #000000;
    display: flex;
    gap: 15rem;
  }
  
  .news-item {
    color: #000000;
    cursor: pointer;
    transition: color 0.3s;
  }
  
  /* Turn the news items blue on hover */
  .news-item:hover {
    color: #07399d;
  }
  
  /* GRAY SECTION */
  .gray-section {
    width: 100%; /* Make the section span the entire width */
    background-color: #f0f0f0; /* Light gray background */
    
    margin: 0; /* Remove default margins */
  }
  
  /* Row for the big image and text side by side */
  .row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* to handle responsiveness */
    gap: 2rem;
  }
  
  .image-container {
    flex: 1.290 1 40%;
  }
  
  .image-container img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .text-container {
    flex: 1 1 40%;
  }
  
  .text-container h2 {
    color: #000000;
    margin-left: 3rem;
    font-family: "Playfair Display", serif;
    font-size: 36px;
    margin-bottom: 1rem;
  }
  
  .text-container p {
    color: #000000;
    margin-left: 3rem;
    margin-right: 2rem;
    font-family: "Montserrat", serif;
    font-size: 1rem;
    line-height: 2;
    text-align: justify;
  }
  
  
  .Founders-quote{
    color: #000000;
    font-family: "Montserrat", serif;
    font-size: 11px;
    text-align: center;
    margin: 2rem;
  }

  /* ------------------------------
     2) Layout for quote
  -------------------------------- */
.container {
    display: flex;         /* Side-by-side layout */
    flex-wrap: wrap;       /* Wrap on smaller screens */
    align-items: stretch;  /* Make both columns same height */

    /* Space between the blue box and the image */
    gap: clamp(14px, 2.4vw, 34px);

    /* Space from the screen edges (both sides) */
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    margin-top: 3rem;
    padding-inline: clamp(16px, 4vw, 70px);

    min-height: clamp(420px, 58vh, 620px);
}
  
  /* Left side column (quote box) */
.left {
    flex: 1;
    min-width: 300px;
    display: flex;
    align-items: stretch;        /* Let the quote box fill full height */
    justify-content: stretch;
    background-color: #ffffff;
  }
  
  /* The quote box itself (blue box) */
.quote-box {
    line-height: 2;
    font-family: "Montserrat", serif;
    font-size: 18px;
    font-weight: bolder;

    width: 100%;
    height: 100%;

    background-color: #1e52fb;
    color: #ffffff;

    /* Responsive padding while keeping the same height as the image */
    padding: clamp(32px, 4vw, 72px);

    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the text */

    text-align: justify;
    border-radius: 0px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
  }
  
  /* Right side column (image) */
.right {
    flex: 1;
    min-width: 300px;
    background-color: #ffffff;
    overflow: hidden; /* Prevent overflow when the image is cover-fitted */
  }

.right img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  
  /* Responsive tweak: 
     For narrower screens, stack the columns
  */
  @media (max-width: 768px) {
    .container {
      flex-direction: column;
      min-height: unset;
    }
    .quote-box {
      width: 90%;
      margin: 1rem auto;
    }
    .right img {
      height: auto;
    }
  }
  
/*===============LINK TO GET TO KNOW US===============*/
  /* Basic box styling */
.box {
  font-family: "Montserrat", serif;
  font-size: 16px;
  position: relative;
  bottom: 50px;
  background-color: #ffffff;
  padding: 2rem;
  width: 300px;
  text-align: center;
  margin: auto; /* centers the box horizontally */
  margin-top: 50px;
}
.box:hover{
  background-color: #ffffff;
  outline: #1e52fb;

}
/* Link styling inside the box */
.box-link {
  color: #000000;              /* normal text color */
  text-decoration: none;    /* remove underline */
  font-weight: bold;
  transition: color 0.3s ease;
}

/* The arrow to move on hover */
.box-link .arrow {
  margin-left: 0.5rem;      /* space between text and arrow */
  transition: transform 0.3s ease;
}

.arrow {
  display: inline-block;             /* So transform affects it properly */
  margin-left: 0.5rem;               /* Spacing between text & arrow */
  transition: transform 0.3s ease;   /* Smooth movement transition */
}

/* Hover effects: text turns blue, arrow slides to the right */
.box-link:hover {
  color: rgb(0, 0, 0);
  text-decoration: underline;
}
.box-link:hover .arrow {
  transform: translateX(10px);
}
/* ==========================
   Solutions Intro (“Cómo lo hacemos realidad”)
   Quitar borde azul + quitar el cuadro/sombra para que todo quede en un solo fondo
========================== */
.solutions-intro{
  background: #f6f7fb; /* mismo fondo suave (no blanco pizarrón) */
}

.solutions-intro__card{
  border-left: none !important;
  background: #f6f7fb !important; /* igual al fondo de la sección */
  border: none !important;
  box-shadow: none !important;
}

/* Por si el borde o caja está creado con pseudo-elementos */
.solutions-intro__card::before,
.solutions-intro__card::after{
  content: none !important;
  display: none !important;
}

/*==========================
      COLUMNS
===========================*/

.container-column {
  max-width: 1200px;       /* Adjust as needed */
  margin-left: 5rem;       /* Center the container on the page */
  display: flex;           /* Use flexbox layout */
  justify-content: space-between;
  align-items: stretch;    /* Make all columns the same height */
  padding: 20px;           /* Optional padding around the container */
  color: #000000;
}

/* General column styling */
.column {
  flex: 1;                 /* Each column takes up equal width */
  margin: 10px;            /* Space between columns */
  text-align: center;      /* Center text and images */
  box-sizing: border-box;  /* So padding doesn't affect total width */

  display: flex;           /* Enable vertical layout */
  flex-direction: column;  /* Stack image, title, text, link */
}

/* Square image styling */
.column img {
  display: block;
  width: 400px;            /* Adjust as needed for a square */
  height: 230px;           /* Adjust as needed for a square */
  margin: 0 auto 10px;
  object-fit: cover;       /* Keep image aspect ratio without distortion */
}

/* Title styling */
.column h2 {
  margin-bottom: 10px;
  margin-top: 0.5cm;
  font-family: "Montserrat", serif;
}

/* Paragraph text spacing */
.column p {
  margin-bottom: 10px;
  font-family: "Montserrat", serif;
  text-align: left;
  line-height: 2;
  width: 350px;
  margin-left: 0.5cm;
}

/* "Learn More" link styling */
.learn-more {
  text-decoration: none;
  color: #000000;             /* Default link color */
  font-weight: bold;

  /* Push the link to the bottom so all 3 align */
  margin-top: auto;

  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  align-self: center;
  padding-top: 1.25rem;

  transition: color 0.3s, padding-right 0.3s;
}

/* Hover effect for link */
.learn-more:hover {
  color: blue;             /* Change text to blue on hover */
  padding-right: 10px;     /* Create space for arrow movement */
}

/* Arrow styling and hover effect */
.arrow-2 {
  color: #1e52fb;
  transition: transform 0.3s;
}

.learn-more:hover .arrow-2 {
  transform: translateX(5px);
}
  

/*========================
        VIDEO
===========================*/
/* Parent container for two columns */
.two-column {
  display: flex;
  flex-wrap: wrap;           /* Wrap on smaller screens */
}

/* Left column: text on gray-white background */
.left-text {
  flex: 1;
  min-width: 300px;          /* Prevent it from shrinking too small */
  background-color: #f4f4f4;  /* Light gray-white background */
  padding: 2rem;
  display: flex;
  flex-direction: column;     /* Stack title and text vertically */
  justify-content: center;    /* Vertically center text (optional) */
  color: #000000
}

.left-text h2 {
  font-family: "Playfair Display", serif;
  font-size: 36px;
  margin-bottom: 1rem;
}

.left-text p {
  font-family: "Montserrat", serif;
  font-size: 1rem;
  line-height: 2;
}

/* Right column: square video */
.right-video {
  flex: 1;
  min-width: 300px;
  display: flex;
  align-items: center;       /* Center the video container vertically */
  justify-content: center;   /* Center horizontally (optional) */
  background-color: #fafafa;
  padding: 2rem;
}

/* Enforce a square ratio for the video container */
.square-video {
  position: relative;
  width: 100%;
  max-width: 520px;          /* Make the video area smaller and aligned with the left text */
  aspect-ratio: 16 / 9;      /* Better fit for typical videos */
  margin: 0 auto;            /* Center inside the right column */
}

/* Absolutely position the iframe to fill the container */
.square-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;       /* Subtle rounding to match the site */
}

/* Responsive tweak: stack columns vertically on smaller screens */
@media (max-width: 768px) {
  .two-column {
    flex-direction: column;
  }
  .right-video {
    padding: 1rem;
  }
  .square-video {
    max-width: 100%;
    margin: 0 auto;
  }
}

/* ---------------------- */
/* FADING BACKGROUND LINE */
/* ---------------------- */
.help-section {
  /* A left-to-right fading background */
  background: linear-gradient(to right, #002060 0%, #083680 100%);
  text-align: center;
  padding: 2rem;
  color: #ffffff;
}

/* Bigger text for the main title */
.help-section h2 {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Smaller text below title */
.help-section p {
  font-family: "Montserrat", serif;
  font-size: 1rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

/* Links in the fading background line */
.fade-line-link {
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  transition: color 0.3s ease;
}

.fade-line-link:hover {
  color: #308be0;
}

/* Footer Container */
.footer{
  margin-top: 2rem;
  background-color: #f4f4f4;
  border-top: 1px solid #ccc;
  padding: 1rem clamp(16px, 4vw, 32px);

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}

/* Left side: Logo */
.footer-left{
  grid-column: 1;
  display: flex;
  align-items: center;
}

.footer-logo{
  max-height: 50px;
  width: auto;
}

/* Right side: Social links (optional) */
.footer-right{
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 0.75rem;
  margin: 0; /* IMPORTANT: remove the old huge margin */
}

.footer-right a img{
  width: 26px;
  height: 26px;
  object-fit: cover;
  border-radius: 999px;
  margin: 0;
  transition: filter 0.3s ease;
}

.footer-right a:hover img{
  filter: brightness(0.85);
}

/* Center: Copyright */
.footer-copyright{
  grid-column: 2;
  justify-self: center;
  text-align: center;
  font-size: 0.9rem;
  color: #666;
}

/* Mobile: stack footer items nicely */
@media (max-width: 768px){
  .footer{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.75rem;
  }

  .footer-left,
  .footer-right,
  .footer-copyright{
    grid-column: 1;
    justify-self: center;
  }
}


  /*=========================================
  PAGE 2 PAGE 2PAGE 2 PAGE 2 PAGE 2 PAGE 2
  ==========================================*/
/*LINE BELLOW TEH NAV BAR*/

.hero-page1-linenav {
  position: relative;   /* Establishes a stacking context */
  width: 100%;
  height: 1vh;        /* Full viewport height (adjust as needed) */
  overflow: hidden;     /* Hide any overflow from child elements */
}

/* Content within the hero (above everything else) */
.hero-content-page1-linenav {
  position: absolute;  /* We can position it over the image/overlay */
  top: 0%;            /* Center vertically (example) */
  left: 0%;           /* Center horizontally (example) */
  transform: translate(-50%, -50%); /* Perfect centering trick */
  
  z-index: 0;          /* Make sure this is higher than the overlay */
  color: #b4b4b4;         /* Visible text color */
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.hero-content-page1-linenav h1 {
  font-family: "Montserrat", serif;
  text-align: center;
  font-size: 2rem;
}

/*TITLE========================*/

  .hero-page1 {
    position: relative;   /* Establishes a stacking context */
    width: 100%;
    height: 80vh;
    overflow: hidden;     /* Hide any overflow from child elements */
  }

  /* Content within the hero (above everything else) */
  .hero-content-page1 {
    position: absolute;  /* We can position it over the image/overlay */
    top: 30%;            /* Center vertically (example) */
    left: 50%;           /* Center horizontally (example) */
    transform: translate(-50%, -50%); /* Perfect centering trick */
    
    z-index: 1;          /* Make sure this is higher than the overlay */
    color: #000000;         /* Visible text color */
    padding: 0rem;
    margin: 0 auto;
  }

  .hero-content-page1 h1 {
    margin-top: 6cm;
    right: 10%;
    font-family: "Playfair Display", serif;
    text-align: center;
    font-size: 3rem;
  }

  .hero-content-page1 p{ 
    margin-top: 1cm;
    font-family: "Montserrat", serif;
    text-align: center;
    font-size: 17px;
    line-height: 2;
    left: 9cm;
    width: 23cm;
  }

/*THREE FOUNDERS COLLUMNS*/

/* Container for the three columns */
.founders {
  display: flex;
  justify-content: space-between;  /* Spread the columns out */
  align-items: flex-start;         /* Align column tops on one line */
  flex-wrap: wrap;                 /* Wrap on smaller screens */
  gap: 1rem;                       /* Space between columns */
  margin: 2rem;
}

/* Base styling for each column */
.founder-col {
  flex: 1;
  min-width: 250px;               /* Prevent columns from getting too narrow */
  background-color: #ffffff;
  padding: 1rem;
  text-align: center;
}

/* Founder images: make them responsive */
.founder-image {
  width: 100%;
  height: 100%;
  max-width: 200px;               /* Limit how large the image can get */
  display: block;
  margin: 0 auto 1rem;            /* Center the image; add bottom spacing */
}

/* Headings for founders */
.founder-col h3 {
  font-family: "Montserrat", serif;
  color: #000000;
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
}

/* Paragraph (bio) styling */
.founder-col p {
  text-align: justify;
  font-family: "Montserrat", serif;
  color: #000000;
  line-height: 2;
  margin-bottom: 1rem;
}





/* The “Extended Bio” link in the middle column */
.extended-bio-link {
  margin-top: 1cm;
  font-family: "Montserrat", serif;
  text-decoration: none;
  color: #000000;
  font-weight: bold;
  transition: color 0.3s ease;
  display: inline-block;          /* So the arrow can move properly */
}

/* The arrow that moves on hover */
.extended-bio-link .arrow {
  display: inline-block;
  margin-left: 0.3rem;
  transition: transform 0.3s ease;
}

/* Hover effect: text turns blue, arrow slides to the right */
.extended-bio-link:hover {
  color: #1e52fb;
}

.extended-bio-link:hover .arrow {
  transform: translateX(5px);
}

/* Responsive: stack columns vertically on narrow screens */
@media (max-width: 768px) {
  .founders {
    flex-direction: column;
    align-items: center; 
  }
  .founder-col {
    max-width: 80%;
  }
}


/* HERO EXTENDED BIO===============*/

.hero-sky {
  position: relative;   /* Establishes a stacking context */
  width: 100%;
  height: 80vh;        /* Full viewport height (adjust as needed) */
  overflow: hidden;     /* Hide any overflow from child elements */
}

/* The hero image itself */
.hero-sky img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* Ensures the image covers the container */
  display: block;
  position: relative;   /* So we can manage stacking if needed */
  z-index: 1;           /* Image is behind overlay & behind text, but we’ll handle that below */
}

/* Overlay that fades from white at the top to transparent further down */
.hero-overlay-sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 
    White at the top, transparent by 70%.
    (Tweak the percentage to adjust the fade.)
  */
  background: linear-gradient(
    to bottom,
    white 0%,
    rgba(255, 255, 255, 0) 40%
  );
  pointer-events: none; /* So clicks go through to underlying elements */
  z-index: 2;           /* Overlay on top of the image */
}

/* Content within the hero (above everything else) */
.hero-content-sky {
  position: absolute;  /* We can position it over the image/overlay */
  top: 30%;            /* Center vertically (example) */
  left: 55%;           /* Center horizontally (example) */
  transform: translate(-50%, -50%); /* Perfect centering trick */
  
  z-index: 3;          /* Make sure this is higher than the overlay */
  color: #000000;         /* Visible text color */
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.hero-content-sky h1 {
  font-family: "Playfair Display", serif;
  text-align: center;
  margin-top: 6rem;
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-content-sky p {
  text-align: left;
  font-family: "Montserrat", serif;
  font-size: 1.2rem;
  margin-left: 2cm;
  line-height: 2;
}

/* EXTENDED BIO
=======================================

======================================
======================================*/

 /* 
    ------------- 
    Cool Line 
    ------------- 
    */
    .cool-line {
      border: 0;
      height: 2px;
      background: linear-gradient(to right, #181818, #181818);
      margin-top: 3rem;
      margin-bottom: 3rem;
      margin-left: 2cm;
      width: 26.5cm;
      border-radius: 2px; /* Optional: slightly rounded corners */
    }

    /* 
    ------------- 
    Extended Bio Section 
    ------------- 
    */
    .extended-bio-section {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .extended-bio-section h2 {
      font-family: "Montserrat", serif;
      color: #000000;
      font-size: 17px;
      margin-left: 2cm;
    }

    .extended-bio-container {
      display: flex;
      flex-wrap: wrap; /* allow wrapping for smaller screens */
      gap: 1rem;
      margin-top: 1rem;
    }

    /* The left side: takes most of the width */
    .extended-bio-left {
      font-family: "Montserrat", serif;
      text-align: justify;
      flex: 3; /* bigger portion for the text */
      min-width: 300px;
    }

    /* The right side: narrower column for the button */
    .extended-bio-right {
      flex: 1;
      min-width: 200px; 
      display: flex;
      align-items: flex-start; /* top-align the button */
      justify-content: flex-end; /* push button to the right if there's space */
    }

    /* Extended bio paragraph */
    .extended-bio-left p {
      margin-left: 2cm;
      color: #000000;
      width: 26cm;
      line-height: 2;
      font-size: 17px;
    }

    /* --- Button styling --- */
.get-in-touch-button {
  position: relative;           /* Stays in place even when scrolling */
  right: 80px;               /* Distance from the right edge */
  height: 70px;
  width: 200px;
  top: 50%;                  /* Center vertically */
  transform: translateY(-50%);
  background-color: #007bff; /* Blue background */
  color: #ffffff;            /* White text */
  border: none;              /* Remove default border */
  padding: 10px 20px;        /* Some padding */
  font-family: "Montserrat", serif;
  cursor: pointer;           /* Mouse pointer on hover */
  border-radius: 0px;        /* Rounded edges */
  font-size: 16px;           /* Adjust font size */
  transition: 0.3s ease;     /* For smooth hover effects */
}

.get-in-touch-button:hover {
  background-color: #fff;                 /* Background turns white */
  color: #007bff;                         /* Text turns blue */
  border: 2px solid #007bff;              /* Blue outline */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Shadow around the button */
}

/* --- Modal background styling --- */
.modal {
  display: none;                 /* Hidden by default */
  position: fixed;               /* Stay in place */
  z-index: 999;                  /* Sits above everything else */
  top: 0;
  left: 0;
  width: 100%;                   /* Full width */
  height: 100%;                  /* Full height */
  background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent background */
}

/* --- Modal content box styling --- */
.modal-content {
  background-color: #fff;
  margin: 15% auto;             /* Center on the page */
  padding: 20px;
  width: 40%;                   /* Adjust width to fit your needs */
  border-radius: 5px;           /* Rounded corners */
  position: relative;           /* Position for close button */
}

/* --- Close button (“x”) styling --- */
.close-button {
  position: absolute;  /* Position in the top-right corner */
  right: 15px;
  top: 10px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  color: #333;
}
.close-button:hover {
  color: #007bff;
}

/* --- Form styling --- */
.modal-content form {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
}
.modal-content form label,
.modal-content form input,
.modal-content form textarea {
  margin-bottom: 10px;
  font-family: "Montserrat", serif;;
  font-size: 16px;
}
.modal-content form input,
.modal-content form textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  font-family: "Montserrat", serif;;
  font-size: 16px;
}
.modal-content form button {
  background-color: #007bff; /* Blue background */
  border: none;
  color: #fff;               /* White text */
  font-family: "Montserrat", serif;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

/* ============================
PAGE VALUES VALUES VALUES
==============================*/

/* Hero section container */
.hero-values {
  position: relative;   /* Establishes a stacking context */
  width: 100%;
  height: 100vh;        /* Full viewport height (adjust as needed) */
  overflow: hidden;     /* Hide any overflow from child elements */
}

/* The hero image itself */
.hero-values img {
  width: 100%;
  height: 98%;
  object-fit: cover;    /* Ensures the image covers the container */
  display: block;
  position: relative;   /* So we can manage stacking if needed */
  z-index: 1;           /* Image is behind overlay & behind text, but we’ll handle that below */
}

/* Overlay that fades from white at the top to transparent further down */
.hero-overlay-values {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 
    White at the top, transparent by 70%.
    (Tweak the percentage to adjust the fade.)
  */
  background: linear-gradient(
    to bottom,
    white 0%,
    rgba(255, 255, 255, 0) 40%
  );
  pointer-events: none; /* So clicks go through to underlying elements */
  z-index: 2;           /* Overlay on top of the image */
}

/* Content within the hero (above everything else) */
.hero-content-values {
  position: absolute;  /* We can position it over the image/overlay */
  top: 9%;            /* Center vertically (example) */         
  left: 35%;  /* Center horizontally (example) */
  z-index: 3;          /* Make sure this is higher than the overlay */
  color: #ffffff;         /* Visible text color */
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.hero-content-values h1 {
  font-family: "Playfair Display", serif;
  text-align: left;
  font-size: 50px;
  margin-top: 3cm;
  margin-bottom: 1rem;
}

.hero-content-values p {
  text-align: left;
  font-family: "Montserrat", serif;
  font-size: 1.2rem;
}

/*VALUES*=================================================*/

/* Dark blue section */
.dark-blue-section {
  background-color: #f1f1f192;   /* A dark blue color */
  color: #000000;              /* White text in dark blue area */
  display: flex;               /* Allows side-by-side layout */
  justify-content: space-between;
  align-items: center;
  padding: 40px;
}

/* Left content (title + text) */
.left-content {
  max-width: 50%; /* Adjust as needed */
}

.left-content h2 {
  margin: 0 0 10px;
  font-family: "Montserrat", serif;
  font-size: 20px;
}

.left-content p {
  margin: 0;
  line-height: 2;
  font-family: "Montserrat", serif;
  font-size: 16px;
}

/* Right content: Container for the image placeholder */
.right-content {
  max-width: 50%; /* Adjust as needed */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Square placeholder with big blue outline */
.image-placeholder {
  width: 500px;              /* Square dimensions (adjust as needed) */
  height: 500px;
  background-color: #ffffff; /* White interior */
  box-sizing: border-box;     /* Ensures the border is included in total size */
  border-radius: 0px;        /* Slightly rounded corners (optional) */
}







.column-2 {
  flex: 1;                 /* Each column takes up equal width */
  margin: 10px;            /* Space between columns */
  margin-top: 1cm;
  text-align: center;      /* Center text and images */
  box-sizing: border-box;  /* So padding doesn't affect total width */
}

/* Square image styling */
.column-2 img {
  display: block;
  width: 400px;            /* Adjust as needed for a square */
  height: 230px;           /* Adjust as needed for a square */
  margin: 0 auto 10px;
  object-fit: cover;       /* Keep image aspect ratio without distortion */
}

/* Title styling */
.column-2 h2 {
  margin-bottom: 10px;
  margin-top: 0.5cm;
  font-family: "Montserrat", serif;
}

/* Paragraph text spacing */
.column-2 p {
  margin-bottom: 10px;
  font-family: "Montserrat", serif;
  text-align: left;
  line-height: 2;
  width: 350px;
  margin-left: 14cm;
  margin-bottom: 1rem;
}

/* SOLUTIONS PAGE==================\
=======================================================
=========================================*/

/* Container styling */
.container-4 {
  display: flex;               /* Use flex layout to place columns in a row */
  justify-content: space-between; 
  align-items: flex-start;     /* Align items at the start (top) of each column */
  max-width: 1200px;           /* Optional max width */
  margin: 0;              /* Center the container horizontally */
  padding: 20px;
  margin-top: 2cm;
}

/* Each column styling */
.column-2 {
  flex: 1;                     /* Allow columns to expand/shrink as needed */
  margin: 0 25px;              /* Spacing between columns */
  box-sizing: border-box;
  align-items: center;
}

/* Image styling */
.column-2 img {
  display: block;
  max-width: 100%;
  max-height: 5cm;
  height: auto;
  margin-bottom: 30px;
}

/* Title styling */
.column-2 h3 {
  text-align: center;
  font-family: "Montserrat", serif;
  color: #000000;
  margin: 0 0 20px;
  font-size: 1.2rem;

}

/* Description styling */
.column-2 p {
  font-family: "Montserrat", serif;
  line-height: 2;
  color: #000000;
  text-align: left;
  align-content: center;
  margin: 0 0 20px;
  width: 8cm;
}

/* Alignment variations based on class names */
.left-align {
  text-align: right;
}
.left-center {
  text-align: right;
}
.right-center {
  text-align: right;
}
.right-align {
  text-align: right;
}


/*==========================
      Hero-content-sol*/

      .hero-content-sol {
        position: absolute;  /* We can position it over the image/overlay */
        top: 40%;            /* Center vertically (example) */
        left: 30%;           /* Center horizontally (example) */
        transform: translate(-50%, -50%); /* Perfect centering trick */
        
        z-index: 3;          /* Make sure this is higher than the overlay */
        color: #ffffff;         /* Visible text color */
        padding: 2rem;
        max-width: 800px;
        margin: 0 auto;
      }
  
      .hero-content-sol h1 {
        font-family: "Playfair Display", serif;
        width: 22cm;
        text-align: left;
        font-size: 3rem;
        margin-bottom: 1rem;
      }
  
      .hero-content-sol p {
        text-align: left;
        line-height: 2;
        font-family: "Montserrat", serif;
        width: 17cm;
        font-size: 1.2rem;
      }
  


      /* ESG Risks & Opportunities Section */
.esg-risks-opportunities {
  margin: 2rem 0; /* Spacing above/below the section */
  font-family: "Montserrat", serif; /* Adjust as needed */
  width: 100%;
}

.esg-risks-opportunities h3 {
  margin-top: 3rem;
  color: #00297b;
}

.esg-title {
  font-family: "Montserrat", serif; /* Adjust as needed */
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 2rem;
  color: #000; /* Text color */
}

/* Wrapper for image + column */
.esg-content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap; /* Allows stacking on smaller screens */
  gap: 2rem;       /* Space between the image and text column */
  margin: 0 auto;  /* Center the container if narrower than 100% */
  max-width: 1200px; /* Optional max width */
}

/* Left side: image container */
.esg-image {
  flex: 1;
  min-width: 280px;  /* Prevent it from getting too narrow */
  max-width: 600px;  /* You can tweak this */
}
.esg-image img {
  width: 100%;
  height: auto;
  display: block;
  border: none; /* Remove any default borders */
}

/* Right side: stacked headings and text areas */
.esg-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 280px;  /* Prevent it from shrinking too much */
  max-width: 600px;  /* Adjust as needed */
}

/* Headings on the right side */
.esg-column h3 {
  margin-bottom: 0.5rem;
  font-family: "Montserrat", serif;
  font-size: 27px;
  color: #000;
}

/* Text areas under each heading */
.esg-column p {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 0rem;
  font-family: "Montserrat", serif;
  font-size: 1rem;
  line-height: 2;
  resize: vertical; /* Allows users to resize the text box vertically */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .esg-content {
    flex-direction: column; /* Stacks image and column vertically */
    align-items: center;    /* Center items when stacked */
  }
  
  .esg-image,
  .esg-column {
    max-width: 90%;        /* Let them fill more space on smaller screens */
  }
}

/* --- Gray Social Section --- */
.social-section {
  background-color: #f0f0f0; /* Light gray */
  padding: 2rem 1rem;       /* Spacing inside the section */
}

/* Wrapper that holds the text on the left and image on the right */
.social-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px; /* Limit width to keep content centered */
  margin: 0 auto;    /* Center the container horizontally */
  flex-wrap: wrap;   /* Wrap columns on smaller screens */
  gap: 8rem;         /* Space between columns */
}

/* Left side: Titles & text */
.social-left {
  flex: 1;
  min-width: 280px;  /* Avoid becoming too narrow on small screens */
  max-width: 700px;
}

/* Main title style */
.social-left .main-title {
  font-family: "Montserrat", serif; /* Adjust as needed */
  color: #0090c6;                   /* Example color for the word "SOCIAL" */
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Subtitles style */
.social-left .subtitle {
  font-family: "Montserrat", serif;
  font-weight: bold;
  color: #000;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

/* Paragraph / description text */
.social-left .description {
  font-family: "Montserrat", serif;
  margin-bottom: 1rem;
  line-height: 2;
  color: #333;
}

/* Right side: Image */
.social-right {
  flex: 1;
  min-width: 280px;
  max-width: 600px; /* Adjust if needed */
}

.social-right img {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive adjustments for screens below 768px */
@media (max-width: 768px) {
  .social-content {
    flex-direction: column; /* Stack columns vertically */
    text-align: center;
  }

  .social-left,
  .social-right {
    max-width: 100%;
  }
}

/* --- Governance Section (Image Left, Text Right) --- */
.governance-section {
  background-color: #fff;    /* White or any other background color */
  padding: 2rem 1rem;       /* Space inside the section */
}

/* Container that holds the left (image) and right (text) */
.governance-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;   /* Wrap columns on smaller screens */
  max-width: 1200px; /* Keep content centered if narrower than full width */
  margin: 0 auto;
  gap: 2rem;         /* Space between image and text */
}

/* Left side: image container */
.governance-left {
  flex: 1;
  min-width: 280px;  /* Prevent shrinking too small */
  max-width: 600px;  /* Adjust as needed */
}
.governance-left img {
  width: 100%;
  height: auto;
  display: block;
}

/* Right side: Title, subtitles, descriptions */
.governance-right {
  flex: 1;
  min-width: 280px;
  max-width: 700px;
}

/* Main title style (GOBERNANZA) */
.governance-right .main-title {
  font-family: "Montserrat", serif; /* Or your preferred font */
  font-size: 2rem; 
  color: #5e7d34;                   /* Example green color; adjust to suit */
  margin-bottom: 1rem;
}

/* Subtitles style (Riesgos, Oportunidades) */
.governance-right .subtitle {
  font-family: "Montserrat", serif;
  font-weight: bold;
  color: #000;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

/* Paragraph description under each subtitle */
.governance-right .description {
  font-family: "Montserrat", serif;
  line-height: 2;
  color: #333;
  margin-bottom: 1rem;
}


/* Responsive for screens below 768px */
@media (max-width: 768px) {
  .governance-content {
    flex-direction: column;  /* Stack image above text */
    text-align: center;
  }
  .governance-left,
  .governance-right {
    max-width: 100%;        /* Let columns expand full width on mobile */
  }
}

/* ASG Relevance Section */
.asg-relevance-section {
  width: 100%;
  margin: 2rem 0;            /* Spacing above/below the section */
  text-align: center;         /* Centers the section title */
  font-family: "Montserrat", serif; /* Adjust to match your fonts */
}

.asg-relevance-section h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  font-weight: bold;
}

/* Wrapper that stacks each “info bar” vertically */
.asg-relevance-content {
  max-width: 1200px;         /* Keep the content centered & not too wide */
  margin: 0 auto;
  display: flex;
  flex-direction: column;    /* Stack boxes vertically */
  gap: 2rem;                 /* Space between boxes */
}

/* Each “info bar” */
.asg-box {
  display: flex;
  align-items: center;
  justify-content: center; 
  padding: 2rem;
  gap: 2rem;                 /* Space between elements inside the box */
}

/* Gray background box */
.grey-bg {
  background-color: #eaeaea; /* Light gray; adjust as needed */
}

/* White background box */
.white-bg {
  background-color: #fff;
}

/* Large percentage text */
.asg-percentage {
  font-size: 4rem;
  font-weight: bold;
  color: #00297b;  /* Dark blue; tweak to your preference */
  line-height: 1;
  flex-shrink: 0; /* Prevent it from shrinking on small screens */
}

/* Paragraph text within each box */
.asg-box p {
  flex: 1;              /* Fills remaining space */
  margin: 0;            /* Remove default paragraph margin */
  font-size: 1rem;
  color: #000;
  text-align: justify;
  line-height: 1.6;
}

/* Reverse layout for the third box 
   (moves the percentage to the right) */
.reverse {
  flex-direction: row-reverse;
}

/* Mobile responsiveness: 
   Stack percentage and text in a column on smaller devices */
@media (max-width: 768px) {
  .asg-box {
    flex-direction: column;
    text-align: center;  /* Center text on narrower screens */
  }
  .asg-box p {
    text-align: center;
  }
}

/* Desert Section (Text Left, Image Right) */
.desert-section {
  background-color: #fff;    /* White background, adjust if desired */
  padding: 2rem 1rem;       /* Space inside the section */
}

/* Container that holds the left (text) and right (image) */
.desert-container {
  display: flex;
  align-items: center;        /* Vertically center items */
  justify-content: space-between; 
  flex-wrap: wrap;            /* Allows wrapping on smaller screens */
  max-width: 1200px;          /* Keep content centered if narrower than full width */
  margin: 0 auto;             /* Center horizontally */
  gap: 2rem;                  /* Space between text and image */
}

/* Left side: text */
.desert-text {
  flex: 1;
  min-width: 280px;           /* Prevent shrinking too small on mobiles */
  max-width: 600px;           /* Adjust as needed */
  font-family: "Montserrat", serif;
  color: #000;
  text-align: justify;        /* Or left / center, depending on preference */
  line-height: 2;
}

/* Right side: image container */
.desert-image {
  flex: 1;
  min-width: 280px;
  max-width: 600px;           /* Adjust as needed */
}

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

/* Responsive: stack text and image vertically on smaller screens */
@media (max-width: 768px) {
  .desert-container {
    flex-direction: column;
    text-align: center;        /* Center everything if stacked */
  }
  .desert-text,
  .desert-image {
    max-width: 100%;
  }
}

/* Challenges Section Container */
.challenges-section {
  max-width: 1200px;           /* Keep the content centered if narrower than the full page */
  margin: 2rem auto;           /* Space above & below, plus center horizontally */
  padding: 0 1rem;             /* Optional side padding */
  font-family: "Montserrat", serif; 
  color: #000;
}

/* Section Title */
.challenges-section h2 {
  text-align: left;            /* Align the main section title left, or center if you prefer */
  font-size: 1.6rem;
  margin-bottom: 2rem;
  margin-top: 3rem;
  font-weight: bold;
}

/* Each Challenge Item */
.challenge-item {
  margin-bottom: 2rem;         /* Space between challenges */
}

/* Challenge Title (e.g., “Capacidades internas limitadas”) */
.challenge-item h3 {
  font-size: 1.3rem;
  color: #00297b;              /* Dark blue example */
  margin-bottom: 0.5rem;
}

/* The row that holds Problem text, arrow, and Impact text */
.challenge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;             /* Allows wrapping on smaller screens */
  gap: 1.5rem;                 /* Space between columns */
}

/* Left (Problem) and Right (Impact) Blocks */
.problem,
.impact {
  flex: 1;                     /* Each takes up remaining horizontal space */
  min-width: 280px;            /* Prevent them from getting too narrow on mobile */
  line-height: 3;
  text-align: justify;         /* Or left, if you prefer */
}

/* Bold “Problema:” or “Impacto:” portion can be emphasized by default, or you can style further */
.problem strong,
.impact strong {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

/* Arrow Container */
.arrow-container {
  flex-shrink: 0;             /* Don’t let this box shrink */
}

/* Arrow Image */
.arrow-container img {
  width: 40px;               /* Adjust arrow size as needed */
  height: auto;
  display: block;
}

/* Responsive: stack Problem -> Arrow -> Impact vertically on smaller screens */
@media (max-width: 768px) {
  .challenge-row {
    flex-direction: column;
    align-items: flex-start; /* or center, if you want center alignment */
  }
  .arrow-container {
    margin: 1rem 0;          /* Space between text blocks */
  }
}

.esg-challenges {
  max-width: 1200px;   /* Keep the section centered if narrower than full page */
  margin: 2rem auto;   /* Space above & below, plus center horizontally */
  padding: 0 1rem;     /* Optional side padding */
  font-family: "Montserrat", sans-serif;
  color: #000;
}

/* Each challenge “block” with a title + row */
.challenge-block {
  margin-bottom: 2rem; /* Space between each challenge item */
}

/* Challenge Title */
.challenge-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #00297b;     /* A deep blue (adjust as needed) */
  margin-bottom: 1rem;
}

/* Horizontal row for Problem → Arrow → Impact */
.challenge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;    /* So it wraps on small screens */
  gap: 1.5rem;
}

/* Left (Problema) and Right (Impacto) */
.problem,
.impact {
  flex: 1;             /* Each side uses remaining space */
  min-width: 280px;    /* Prevent them from shrinking too small on mobile */
  line-height: 1.6;
  text-align: justify; /* Adjust if you prefer left-aligned or center */
}

/* The bold “Problema” / “Impacto” keywords */
.problem strong,
.impact strong {
  display: block;      /* Puts “Problema:” / “Impacto:” on its own line (optional) */
  margin-bottom: 0.25rem;
  font-weight: 700;
}

/* Arrow container in the middle */
.arrow-container {
  flex-shrink: 0;      /* Don’t let it shrink on narrow screens */
}

/* The arrow image */
.arrow-container img {
  width: 40px;         /* Adjust arrow size as needed */
  height: auto;
  display: block;
}

/* Responsive: stack Problem, Arrow, Impact vertically below 768px */
@media (max-width: 768px) {
  .challenge-row {
    flex-direction: column;
    align-items: flex-start; /* or center */
  }
  .arrow-container {
    margin: 1rem 0;
  }
}

/* --- Blue Banner Section --- */
.blue-section {
  background-color: #1f2f5b; /* Dark blue background */
  color: #ffffff;            /* White text */
  padding: 3rem 1rem;        /* Space inside the banner */
  text-align: center;        /* Center all text by default */
}

/* Container inside the blue section */
.blue-content {
  max-width: 1200px;         /* Keep content from stretching too wide */
  margin: 0 auto;            /* Center horizontally */
}

/* Main heading on the banner */
.blue-content h2 {
  font-family: "Montserrat", serif;
  font-size: 1.4rem;   /* Adjust to your preference */
  font-weight: bold;
  margin-bottom: 2rem;
}

/* Container for the bullet lists (3 columns in the example) */
.risk-lists {
  display: flex;
  flex-wrap: wrap;          /* Wrap on smaller screens */
  justify-content: center;  /* Center the lists horizontally */
  gap: 2rem;                /* Space between columns */
  margin-bottom: 2rem;      /* Space below the lists */
}

/* Each unordered list */
.risk-lists ul {
  list-style: disc inside;  /* Bullets inside the text */
  text-align: left;         /* Left-align the bullet points */
  margin: 0;
  padding: 0;
}

/* Bullet point text */
.risk-lists li {
  margin-bottom: 0.5rem;
  font-family: "Montserrat", serif;
  font-size: 1.5rem;          /* Adjust as needed */
}

/* Extra line of text in the banner (tagline) */
.tagline {
  font-family: "Montserrat", serif;
  font-size: 1.2rem;        /* Slightly larger text */
  font-weight: 600;         /* Semi-bold */
  margin-top: 2rem;
}

/* --- White Section with big title --- */
.white-section {
  background-color: #fff;
  padding: 3rem 1rem;
  text-align: center;  /* Center the heading */
}

/* Big title */
.white-section h1 {
  font-family: "Montserrat", serif;
  font-size: 2.5rem;   /* Adjust to your liking */
  font-weight: bold;
  margin: 0;           /* Remove default margin at top */
  color: #000;         /* Black text */
}

/* --- Responsive adjustments --- */
@media (max-width: 768px) {
  .risk-lists {
    flex-direction: column;   /* Stack the lists vertically on small screens */
    align-items: center;
  }
  .risk-lists ul {
    margin-bottom: 1rem;
  }
}

/* Gray Section (title & text left, image right) */
.gray-right-image-section {
  background-color: #e0e0e0; /* Light gray background */
  padding: 2rem 1rem;       /* Space inside the section */
}

/* Container to align text left & image right */
.gray-right-container {
  display: flex;
  align-items: center;       /* Vertically center items */
  justify-content: space-between;
  flex-wrap: wrap;           /* Wrap on narrow screens */
  gap: 2rem;                 /* Space between text and image */
  max-width: 1200px;         /* Keep content centered if narrower than 100% */
  margin: 0 auto;            /* Center horizontally */
}

/* Left text area */
.gray-right-text {
  flex: 1;                   /* Let text take up remaining space */
  min-width: 280px;          /* Prevent it from shrinking too narrow */
  font-family: "Montserrat", serif;
}

/* Title in the left area */
.gray-right-text h3 {
  font-size: 1.4rem;
  font-weight: bold;
  color: #000;
  margin-bottom: 1rem;
}

/* Paragraph in the left area */
.gray-right-text p {
  line-height: 1.6;
  color: #000;
  text-align: justify;
  margin-right: 2rem;
  font-size: 1rem;
}

/* Right image container */
.gray-right-image {
  flex: 1;                  /* Let image take up remaining space */
  min-width: 280px;         /* Prevent from shrinking too much on mobile */
}

/* Ensure the image is responsive */
.gray-right-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive: Stack text on top of image for screens < 768px */
@media (max-width: 768px) {
  .gray-right-container {
    flex-direction: column; /* Stack vertically */
    text-align: center;     /* Optionally center text in small screens */
  }
  .gray-right-text, .gray-right-image {
    max-width: 100%;
  }
}

/* Windmill Section: Image on Left, Stacked Titles & Paragraphs on the Right */
.windmill-section {
  background-color: #fff;   /* White background (optional) */
  padding: 2rem 1rem;      /* Space inside the section */
}

/* Flex container for left image + right text blocks */
.windmill-container {
  display: flex;
  align-items: flex-start;  /* Align items at the top */
  gap: 2rem;                /* Space between image and text */
  max-width: 1200px;        /* Keep the layout centered if narrower than full width */
  margin: 0 auto;           /* Center container horizontally */
  flex-wrap: wrap;          /* Allows wrapping on small screens */
}

/* Left: image container */
.windmill-image {
  flex: 1;                  /* Let image take up some portion of the row */
  min-width: 280px;         /* Prevent it from shrinking too small on mobile */
  max-width: 600px;         /* Adjust as needed */
}

.windmill-image img {
  width: 80%;
  height: auto;
  display: block;
}

/* Right: text column with stacked blocks */
.windmill-text-column {
  flex: 1;                  /* Let the text column share row space equally */
  min-width: 300px;         /* Prevent shrink to very narrow widths */
}

/* Each block (title + paragraphs) */
.text-block {
  margin-top: 5rem;
  margin-bottom: 9rem;      /* Space between blocks */
}

/* Title style (e.g. “Análisis y gestión de riesgos ASG”) */
.text-block h3 {
  font-family: "Montserrat", serif;
  font-size: 1.4rem;
  font-weight: bold;
  color: #000;
  margin-bottom: 0.5rem;
}

/* Paragraph style */
.text-block p {
  font-family: "Montserrat", serif;
  line-height: 2;
  color: #000;
  text-align: justify;      /* Adjust to left if you prefer */
  margin-bottom: 1rem;
}

/* Responsive: stack image & text column vertically on small screens */
@media (max-width: 768px) {
  .windmill-container {
    flex-direction: column;
    text-align: center; /* Center text if you like on smaller devices */
  }
  .windmill-image,
  .windmill-text-column {
    max-width: 100%;
  }
  .text-block p {
    text-align: left; /* Or center; depends on your preference */
  }
}

/* Gray background box for ASG reports info */
.asg-report-section {
  background-color: #e0e0e0; /* Light gray background */
  padding: 2rem;            /* Space around the text */
  margin: 1rem 0;           /* Spacing above/below this section */
  font-family: "Montserrat", serif; /* Adjust to match your site's font */
  color: #000;              /* Text color */
}

/* Title */
.asg-report-section h3 {
  margin-left: 2rem;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

/* Paragraph */
.asg-report-section p {
  line-height: 2;
  margin-left: 2rem;
  width: 95%;
  text-align: justify; /* Or left-aligned, depending on preference */
  font-size: 1rem;
}

/* --- Technology Section --- */
.technology-section {
  padding: 2rem 1rem;  /* Space inside the section */
  background-color: #fff;
  font-family: "Montserrat", sans-serif; /* Example font family */
}

/* Container for left (text) + right (image) */
.technology-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;           /* Allow wrapping on narrow screens */
  max-width: 1200px;         /* Keep content centered if narrower than full width */
  margin: 0 auto;
  gap: 2rem;                 /* Space between columns */
}

/* Left side: Big title, subtitle, bullet points */
.tech-left {
  flex: 1;
  min-width: 280px;          /* Prevent shrinking too much */
}

/* Big title */
.tech-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #000;
}

/* Subtitle */
.tech-subtitle {
  font-size: 1.2rem;
  font-weight: 400;
  margin-top: 2rem;
  color: #000;
  margin-bottom: 2rem;
}

/* Bullet list under the subtitle */
.tech-list {
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 2rem;  /* Indent the bullet points */
  font-size: 1.1rem;
  line-height: 2;
  color: #000;
}

/* Right side: image with overlay text */
.tech-right {
  flex: 1;
  min-width: 280px;
}

/* Position the image and the overlay text */
.tech-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 600px;
  overflow: hidden;
}

/* Make the image responsive */
.tech-image-container img {
  display: block;
  width: 100%;
  height: 10%;
}

/* The overlay text “SARAS” at the bottom */
.tech-overlay-text {
  position: absolute;
  bottom: 20px;          /* Space from bottom edge */
  left: 43%;            /* or “right: 20px;” if you prefer it on the right */
  
  font-size: 2rem;       /* Adjust for desired size */
  font-weight: 700;      /* Bold text */
  color: rgba(255, 255, 255, 0.7); /* White with some transparency */
  z-index: 2;            /* Ensure text is above the image */
}

/* --- Responsive: stack columns vertically on smaller screens --- */
@media (max-width: 768px) {
  .technology-container {
    flex-direction: column;
    align-items: center;
  }
  .tech-left,
  .tech-right {
    max-width: 100%;
  }
  .tech-title {
    text-align: center;
  }
  .tech-subtitle,
  .tech-list {
    text-align: left; /* or center, if you prefer */
    margin: 0 auto 1rem;
  }
  .tech-image-container {
    margin-top: 1rem;
  }
}

/* Education Section: Picture Left, Text Right */
.education-section {
  background-color: #e0e0e0; /* Light gray background (adjust as needed) */
  padding: 2rem 1rem;       /* Spacing around the section */
}

/* Container to hold the left image and right text */
.education-container {
  display: flex;
  align-items: center;      /* Vertically center items */
  justify-content: space-between;
  flex-wrap: wrap;          /* Wrap on smaller screens */
  max-width: 1200px;        /* Keep content centered if narrower than full page */
  margin: 0 auto;           /* Center horizontally */
  gap: 2rem;                /* Space between left & right */
}

/* Left side: image container */
.education-left {
  flex: 1;                  /* Share available space with the text */
  min-width: 280px;         /* Prevent it from shrinking too narrow on mobile */
  max-width: 600px;         /* Adjust as needed */
}
.education-left img {
  width: 100%;
  height: auto;
  display: block;
}

/* Right side: Title, subtitle, bullet list */
.education-right {
  flex: 1;                   
  min-width: 280px;          /* Prevent it from shrinking too narrow on mobile */
  max-width: 600px;          /* Adjust as needed */
}

/* Main title (EDUCACIÓN) */
.education-right h2 {
  font-family: "Montserrat", sans-serif; /* Adjust as needed */
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #000;
}

/* Subtitle */
.education-right h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: #000;
  margin-bottom: 1rem;
}

/* Bullet points */
.education-right ul {
  list-style-type: disc;
  margin-left: 2rem;  /* Indent bullet points */
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: #000;
}

/* Responsive: stack image & text vertically on smaller screens */
@media (max-width: 768px) {
  .education-container {
    flex-direction: column; /* Stacks the image above the text */
    text-align: center;     /* Optional: center text for mobile */
  }
  .education-left, 
  .education-right {
    max-width: 100%;
  }
  /* Remove the left indentation on bullet points if you prefer everything centered */
  .education-right ul {
    margin-left: 0;
    text-align: left;  /* or center */
  }
}

.blue-quote-section {
  background-color: #1f2f5b; /* Dark blue */
  padding: 3rem 1rem;       /* Spacing inside the section */
}

.blue-quote-content {
  max-width: 1200px;        /* Keep text centered if narrower than full width */
  margin: 0 auto;
  text-align: center;       /* Center the quote */
}

.blue-quote-content p {
  font-family: "Montserrat", sans-serif; /* Adjust to your font */
  font-size: 1.2rem;       /* Increase or decrease for desired text size */
  font-weight: 300;        /* Adjust weight as needed */
  line-height: 1.6;
  color: #ffffff;          /* White text for contrast against dark blue */
  margin: 0;
  padding: 0;
}

/* Section Wrapper */
.benefits-asg {
  max-width: 1200px;   /* Keeps the content centered if narrower than the screen */
  margin: 3rem auto;   /* Spacing above & below, center horizontally */
  padding: 0 1rem;     /* Optional side padding */
  font-family: "Montserrat", sans-serif;
  color: #000;
}

/* Main Title */
.benefits-title {
  text-align: center;        /* Center the heading text */
  font-size: 2rem;           /* Make it big; adjust as needed */
  font-weight: 700;          /* Bold text */
  margin-bottom: 3rem;       /* Space below the title */
  line-height: 1.3;
}

/* Each Benefit Block (number on left, text on right) */
.benefit-block {
  display: flex;
  align-items: flex-start;   /* Number & text top-aligned */
  margin-bottom: 3rem;       /* Space between blocks */
  flex-wrap: wrap;           /* Wrap if screen is too narrow */
}

/* The large number on the left */
.number {
  flex-shrink: 0;            /* Don’t let the number shrink on narrow screens */
  font-size: 4rem;           /* Adjust size as needed */
  color: #00297b;            /* Dark blue color for the number */
  font-weight: 700;
  margin-right: 1rem;        /* Space to the right of the number */
}

/* Right side text container */
.benefit-text {
  flex: 1;                   /* Take up remaining width */
  min-width: 240px;          /* Prevent shrinking too small on mobile */
  line-height: 1.6;
}

/* Title of each benefit (e.g., “Mejora de la reputación y la confianza”) */
.benefit-text h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #000;
}

/* Paragraph in each benefit */
.benefit-text p {
  font-size: 1rem;
  color: #333;
  text-align: justify;  /* Or left if you prefer */
}

/* Responsive: stack number above text on narrower screens */
@media (max-width: 768px) {
  .benefit-block {
    flex-direction: column;
    align-items: flex-start;
  }
  .number {
    margin-bottom: 1rem;
  }
}

/* Blue Background Section */
.benefits-on-blue {
  background-color: #1f2f5b; /* Dark blue background */
  padding: 3rem 1rem;       /* Space around the content */
  color: #ffffff;           /* White text by default */
  font-family: "Montserrat", sans-serif;
}

/* Container to center content and control max width */
.benefits-on-blue-content {
  max-width: 1200px;
  margin: 0 auto;
}

/* Optional main title at the top of the section */
.benefits-on-blue-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 3rem;
  line-height: 1.3;
}

/* Individual benefit item (text on the left, number on the right) */
.benefit-block-blue {
  display: flex;
  align-items: flex-start;      /* Top-align the text & number */
  justify-content: space-between;
  margin-bottom: 3rem;         /* Space between blocks */
  flex-wrap: wrap;             /* Allow wrapping on smaller screens */
  gap: 1rem;                   /* Space if they wrap */
}

/* Left side: title + paragraph */
.benefit-text-blue {
  flex: 1;                     /* Take remaining width */
  min-width: 260px;            /* Prevent it from shrinking too much on smaller screens */
  margin-right: 1rem;
}

/* Heading (e.g. “Reducción de riesgos financieros”) */
.benefit-text-blue h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #ffffff; /* White, or any contrasting color */
}

/* Paragraph text (white by default) */
.benefit-text-blue p {
  font-size: 1rem;
  line-height: 1.6;
  width: 80%;
  text-align: justify; /* or left-aligned if you prefer */
  color: #ffffff;
}

/* Right side: Large number */
.benefit-number-blue {
  flex-shrink: 0;             /* Prevent the number from shrinking */
  font-size: 4rem;            /* Make it large */
  font-weight: 700;
  color: #ffffff;             /* White text for the number */
}

/* Responsive: stack text above the number for narrow screens */
@media (max-width: 768px) {
  .benefit-block-blue {
    flex-direction: column;   /* Stack them vertically */
    align-items: flex-start;  /* Align left */
  }
  .benefit-number-blue {
    margin-top: 1rem;        /* Space between text and number */
  }
}

/* Section wrapper */
.numbers-section {
  background-color: #fff;   /* White background */
  color: #000;              /* Default text color */
  font-family: "Montserrat", sans-serif;
  max-width: 1200px;        /* Keep content centered if narrower than the full page */
  margin: 3rem auto;        /* Space above/below, plus center horizontally */
  padding: 0 1rem;          /* Optional side padding */
}

/* Optional main title for the section */
.numbers-main-title {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 3rem;
}

/* A single numbered block (big number on the left, text on the right) */
.number-block {
  display: flex;
  align-items: flex-start;    /* Top-align the big number & text */
  margin-bottom: 3rem;        /* Space between numbered items */
  flex-wrap: wrap;            /* Wrap columns on smaller screens */
}

/* The large number on the left (e.g., “5.”) */
.big-num {
  flex-shrink: 0;             /* Prevent big number from shrinking on small screens */
  font-size: 4rem;            /* Make it large; adjust as needed */
  font-weight: 700;
  color: #00297b;             /* Dark navy color (customize to match your branding) */
  margin-right: 1rem;         /* Space between number and text */
}

/* Right side: heading + paragraph */
.number-text {
  flex: 1;                    /* Take remaining horizontal space */
  min-width: 250px;           /* Prevent it from shrinking too small on mobile */
}

/* Heading (e.g., “Atracción y retención de talento”) */
.number-text h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #000;
}

/* Paragraph under the heading */
.number-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  text-align: justify; /* or left-aligned if you prefer */
  margin-right: 2rem;  /* optional additional spacing on the right */
}

/* Responsive: stack big number above text on narrower screens */
@media (max-width: 768px) {
  .number-block {
    flex-direction: column;   /* Stack vertically */
    align-items: flex-start;  /* Left-align the text & number */
  }
  .big-num {
    margin-bottom: 1rem;      /* Space below the big number when stacked */
  }
  .number-text {
    margin-right: 0;          /* Remove right margin if stacked */
  }
}

/* CTA Section: Title/Text Left, Image Right */
.cta-section {
  background-color: #fff;        /* White or any background color you prefer */
  padding: 2rem 1rem;           /* Spacing around the section */
}

.cta-container {
  display: flex;
  align-items: center;           /* Vertically center content */
  justify-content: space-between;
  max-width: 1200px;            /* Keep content centered if narrower than full page */
  margin: 0 auto;               /* Center horizontally */
  gap: 2rem;                    /* Space between left & right */
  flex-wrap: wrap;              /* Allows wrapping on smaller screens */
}

/* Left side: Title, paragraph, buttons */
.cta-left {
  flex: 1;
  min-width: 300px;             /* Prevent it from shrinking too much on mobile */
  font-family: "Montserrat", sans-serif; /* Adjust to your chosen font */
}

/* Title styling */
.cta-left h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #00297b;               /* A dark blue example; adjust to your brand color */
  margin-bottom: 1rem;
  line-height: 1.2;
}

/* Paragraph styling */
.cta-left p {
  font-size: 1rem;
  line-height: 1.6;
  color: #000;
  margin-bottom: 2rem;
}

/* Buttons container */
.cta-buttons {
  display: flex;
  gap: 1rem; /* space between the two buttons */
}

/* Buttons style */
.cta-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background-color: #00297b; /* Same dark blue or your preferred color */
  text-decoration: none;
  border-radius: 30px;       /* Rounded corners */
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #0043b3;  /* Slightly lighter/darker on hover, if desired */
}

/* Right side: Image container */
.cta-right {
  flex: 1;
  min-width: 280px;  /* Prevent image area from shrinking too much on mobile */
  max-width: 600px;  /* Adjust to control image max width */
}

.cta-right img {
  width: 90%;
  height: min-content;
  display: block;
}

/* Responsive: stack left content above the image on smaller screens */
@media (max-width: 768px) {
  .cta-container {
    flex-direction: column;
    text-align: center; /* Optionally center text/buttons on mobile */
  }
  
  .cta-left, .cta-right {
    max-width: 100%;
  }
  
  .cta-buttons {
    justify-content: center; /* Center the buttons horizontally */
  }
}


/* Hero Section with a Background Image */
.hero-background {
  position: relative;
  width: 100%;
  height: 100vh; /* Full browser height; adjust if you prefer a shorter hero */
  background: url("../img/apple-hero.jpg") center center no-repeat;
  background-size: cover;  /* Make the image fill the container */
  display: flex;
  align-items: center;      /* Vertically center the hero content */
  justify-content: center;  /* Horizontally center the hero content */
  overflow: hidden;
}

/* Optional overlay to darken or lighten the image behind the text */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35); /* 35% black overlay */
  z-index: 1; /* Make sure overlay is above background but below text */
}

/* Text container sits above the overlay */
.hero-text {
  position: relative;
  z-index: 2;            /* Above the overlay */
  text-align: center;
  color: #fff;           /* White text for contrast */
  max-width: 800px;      /* Limit text width */
  padding: 2rem;         /* Add some spacing around the text */
  font-family: "Montserrat", sans-serif; /* Example font; adapt to your site */
}

/* Small heading (optional) */
.hero-text h3 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 1px; /* Optional spacing for uppercase style */
}

/* Large heading */
.hero-text h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.2;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .hero-background {
    height: 70vh; /* Make hero shorter on mobile if you prefer */
  }
  
  .hero-text h1 {
    font-size: 2rem;
  }
  .hero-text h3 {
    font-size: 1rem;
  }
}

/* Wrapper for the entire section */
.percentage-section {
  width: 100%;
  background-color: #fff;   /* White, or any background color */
  padding: 2rem 1rem;       /* Spacing around the section */
  box-sizing: border-box;
}

/* Container to lay out text (left) & image (right) side by side */
.percentage-container {
  display: flex;
  align-items: center;      /* Vertically center in the row */
  justify-content: space-between;
  flex-wrap: wrap;          /* Allow wrapping on smaller screens */
  max-width: 1200px;        /* Keep content centered if narrower than full width */
  margin: 0 auto;           /* Center horizontally */
  gap: 2rem;                /* Space between the left & right sides */
}

/* Left side: Big question text */
.percentage-left {
  flex: 1;                   /* Let the text take up half the row (approximately) */
  min-width: 280px;          /* Prevent shrinking too small on mobiles */
  font-family: "Montserrat", sans-serif;
  color: #000;
}

/* Large question text (e.g., “¿Sabes cuál”) */
.percentage-left h2 {
  font-size: 3rem;           /* Make it big; adjust as needed */
  font-weight: 700;
  color: #b2525a;            /* Example color for “¿Sabes cuál”; tweak to your preference */
  margin-bottom: 1rem;
  line-height: 1.2;
}

/* Supporting paragraph below the question */
.percentage-left p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #000;
  text-align: justify;  /* or left, if you prefer */
}

/* Right side: image container */
.percentage-right {
  flex: 1;           
  min-width: 280px;   /* Prevent from shrinking too much on small screens */
}

/* Positioning wrapper for the image + the big “7%-10%” text */
.percentage-image-wrapper {
  position: relative;     /* Enables absolutely-positioned overlay text */
  width: 100%;
  overflow: hidden;       /* Hide any overflow if the overlay goes out of bounds */
}

/* The background image */
.percentage-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

/* Large overlay text (e.g., “7%-10%”) on top of the image */
.overlay-text {
  position: absolute;
  bottom: 160px;            /* Position from the bottom edge */
  right: 130px;             /* Position from the right edge */
  transform: translate(0, 0); /* Adjust if you want to shift it more precisely */
  
  font-size: 5rem;         /* Make it big; adjust as needed */
  font-weight: 700;
  color: #95bd28;          /* Example green color */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.4); /* Optional shadow behind text */
  z-index: 2;              /* Ensure it’s above the image */
}

/* Responsive: stack text & image vertically on smaller screens */
@media (max-width: 768px) {
  .percentage-container {
    flex-direction: column; /* Stacks left and right vertically */
    text-align: center;     /* Center everything on mobile if you prefer */
  }
  
  /* Optionally center the overlay text on smaller screens */
  .overlay-text {
    bottom: 20px;
    right: 50%;
    transform: translateX(50%); /* Move text to center horizontally */
    font-size: 2rem;
  }
}


/* Gray background section */
.gray-intro-section {
  background-color: #f0f0f0; /* Light gray */
  padding: 3rem 1rem;       /* Space around the content */
  width: 100%;              /* Full width */
}

/* Container to center and limit the text width */
.gray-intro-content {
  max-width: 1200px;  /* Adjust if desired */
  margin: 0 auto;     /* Center horizontally */
  text-align: center; /* Center all text */
  font-family: "Montserrat", sans-serif; /* Example font family */
}

/* Main heading style */
.gray-intro-content h2 {
  font-size: 2rem;     /* Adjust as needed */
  font-weight: 700;    /* Bold heading */
  color: #000;         /* Black text color */
  margin-bottom: 1rem; /* Space below heading */
  line-height: 1.2;    
}

/* Paragraph (subtext) style */
.gray-intro-content p {
  font-size: 1.2rem;   /* Slightly smaller than heading */
  line-height: 1.6;    
  color: #000;
}

/* Highlight specific words in a different color */
.highlight-text {
  color: #b2525a;  /* A muted red/pink shade; adjust to your preference */
  font-weight: bold;
}

/* Responsive adjustments (optional) */
@media (max-width: 768px) {
  .gray-intro-content h2 {
    font-size: 1.5rem;
  }
  .gray-intro-content p {
    font-size: 1rem;
  }
}

/* Regulatory Fines Section (Background Image + Text) */
.fines-section {
  position: relative;
  width: 100%;
  height: 60vh; /* Adjust for desired banner height (e.g., 50vh, 70vh, etc.) */
  background: url("../img/manzana2.jpg") center center no-repeat;
  background-size: cover;  /* Ensure the image covers the container */
  display: flex;
  align-items: center;     /* Vertically center content */
  justify-content: center; /* Horizontally center content */
  overflow: hidden;
}

/* Semi-transparent overlay for improved text legibility */
.fines-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* 40% black overlay */
  z-index: 1; /* Sits above the background but below the text */
}

/* Text container */
.fines-text {
  position: relative; /* So it's above the overlay */
  z-index: 2;
  text-align: center;
  color: #ffffff;      /* White text for contrast against dark overlay */
  max-width: 1000px;   /* Optional max width for text area */
  padding: 2rem;       /* Some spacing around the text */
  font-family: "Montserrat", sans-serif; /* Example font family */
}

/* Question text */
.fines-text h2 {
  font-size: 1.6rem; /* Adjust as needed */
  font-weight: 400;
  margin-bottom: 1rem;
  line-height: 1.4;
}

/* Large highlight text */
.fines-text h1 {
  font-size: 3rem;        /* Make it big and bold */
  font-weight: 700;
  margin: 0;              /* No extra margin below */
  color: #95bd28;         /* Example green to stand out against the white question text */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); /* Optional text shadow */
}

/* Responsive adjustments: smaller text on narrow screens */
@media (max-width: 768px) {
  .fines-section {
    height: 50vh; /* Make hero shorter on mobile if you prefer */
  }
  .fines-text h2 {
    font-size: 1.2rem;
  }
  .fines-text h1 {
    font-size: 2rem;
  }
}

/* Legal & Regulatory Text Section */
.legal-reg-text-section {
  background-color: #fff;   /* White background */
  padding: 3rem 1rem;       /* Spacing around the text */
  width: 100%;              /* Full width of the page */
}

.legal-reg-text-container {
  max-width: 1200px;        /* Keep the text container from being too wide */
  margin: 0 auto;           /* Centers the container horizontally */
  font-family: "Montserrat", sans-serif; /* Example font */
  color: #000;
  text-align: justify;      /* Justify or left align, based on your preference */
  line-height: 1.8;         /* Increase line-height for readability */
  font-size: 1.1rem;        /* Adjust font size to your design */
}

.legal-reg-text-container p {
  margin: 0;                /* Remove default paragraph margin */
  padding: 0;               /* Remove default padding */
}
.red-banner {
  background-color: #b52b2b; /* or another red shade (e.g., #c0392b) */
  padding: 2rem 1rem;       /* Space around the heading */
  text-align: center;       /* Center the text horizontally */
}

.red-banner h2 {
  font-family: "Montserrat", sans-serif; /* Adjust to your preferred font */
  font-size: 2rem;                      /* Large text; tweak to taste */
  font-weight: 700;                     /* Bold style */
  color: #fff;                          /* White text */
  margin: 0;                            /* Remove default margins */
  letter-spacing: 1px;                  /* Slight spacing (optional) */
}

/* Section wrapper */
.bullets-image-section {
  background-color: #fff;       /* White background (adjust if desired) */
  padding: 2rem 1rem;          /* Spacing around the section */
}

/* Container for bullet list (left) and image (right) */
.bullets-image-container {
  display: flex;
  align-items: flex-start;      /* Align items at the top */
  justify-content: center;      /* Center horizontally if narrower than full width */
  flex-wrap: wrap;              /* Wrap on smaller screens */
  max-width: 1200px;           /* Limit total width & center container */
  margin: 0 auto;              /* Center horizontally */
  gap: 2rem;                   /* Space between left & right */
}

/* Left side: bullet points */
.bullets-left {
  flex: 1;                      /* Let the bullets fill available space */
  margin-top: 7rem;
  min-width: 280px;            /* Prevent shrinking too small on mobile */
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;
  color: #000;
}

/* Bullet list styling */
.bullets-left ul {
  list-style: disc outside;     /* Standard bullet style */
  margin-left: 2rem;           /* Indent bullets */
  line-height: 2;            /* Increase line spacing for readability */
}

/* Each bullet item */
.bullets-left li {
  margin-bottom: 1.5rem;       /* Space between bullet points */
}

/* Make certain words bold & colored */
.bullets-left li strong {
  color: #b2525a;              /* Example color for emphasized text */
  font-weight: 700;
}

/* Right side: Image container */
.image-right {
  flex: 1;
  min-width: 280px;            /* Prevent it from shrinking too small */
  max-width: 500px;            /* Optional: Limit image’s max width */
}

/* Image is responsive, no distortion */
.image-right img {
  width: 90%;
  height: auto;
  display: block;
}

/* Responsive: stack list above image on smaller screens */
@media (max-width: 768px) {
  .bullets-image-container {
    flex-direction: column;     /* Stacks bullets & image vertically */
    align-items: center;        /* Center them horizontally */
  }
  .bullets-left, .image-right {
    max-width: 100%;            /* Let them fill the mobile screen width */
  }
  .bullets-left ul {
    margin-left: 1rem;          /* Slight indentation on mobile */
    text-align: left;           /* Keep text left-aligned or adjust as desired */
  }
}

/* Hero Bullets Section */
.hero-bullets {
  position: relative;
  width: 100%;
  height: 60vh; /* Adjust as needed (e.g., 50vh, 80vh, or a fixed px height) */
  background: url("../img/apples.jpg") center center no-repeat;
  background-size: cover;     /* Ensure the image covers the entire container */
  overflow: hidden;           /* Hide any overflow from child elements */
  display: flex;
  align-items: center;        /* Vertically center the bullet content */
  justify-content: center;    /* Horizontally center the bullet content */
  padding: 2rem;             /* Additional spacing inside the hero if you want */
}

/* Optional semi‐transparent overlay to help text stand out */
.hero-bullets-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 30% black overlay, adjust if needed */
  z-index: 1;                           /* Sits above the background image but below text */
}

/* Bullet points container */
.hero-bullets-content {
  position: relative; /* Above the overlay */
  z-index: 2;         /* Make sure text is on top */
  max-width: 800px;   /* Limit line length if desired */
}

/* Bullet points list */
.hero-bullets-content ul {
  list-style: disc outside; /* Standard bullet style; you can use circle/square */
  color: #ffffff;           /* White text for contrast against dark overlay */
  font-family: "Montserrat", sans-serif;
  font-size: 1.4rem;
  line-height: 1.8;
  padding-left: 2rem;       /* Indent bullet points */
}

/* Each bullet point */
.hero-bullets-content ul li {
  margin-bottom: 1rem;      /* Spacing between bullets */
}

/* Bold text for emphasis */
.hero-bullets-content strong {
  font-weight: 700;         /* Bolder emphasis */
}
  
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .hero-bullets {
    height: auto;            /* Let content dictate height on small devices, if you prefer */
    padding: 2rem 1rem;  
  }
  .hero-bullets-content ul {
    font-size: 1rem;         /* Slightly smaller text on mobile */
  }
}

/* Reddish Section */
.reddish-section {
  background-color: #8b2530;  /* Reddish shade, tweak as desired */
  padding: 3rem 1rem;        /* Space around the text */
  width: 100%;               /* Full width of the page */
  text-align: center;        /* Center the paragraph horizontally */
}

/* Container to limit text width and center it */
.reddish-section-content {
  max-width: 900px;    /* Adjust the maximum width for text */
  margin: 0 auto;      /* Center horizontally */
  font-family: "Montserrat", sans-serif;  /* Example font */
  color: #fff;         /* White text for contrast on a dark background */
  font-size: 1.3rem;   /* Adjust text size to your liking */
  line-height: 1.6;    /* Improve readability with extra line spacing */
}

/* Optional: responsive tweak for smaller screens */
@media (max-width: 768px) {
  .reddish-section-content {
    font-size: 1rem;
    padding: 0 1rem;   /* Some horizontal padding if needed */
  }
}

/* Basilea Section with Background Image */
.basilea-section {
  position: relative;
  width: 100%;
  min-height: 60vh; /* Adjust as needed (e.g., 70vh, 80vh, or a fixed px height) */
  
  /* Background image that covers the entire container */
  background: url("../img/apples2.jpg") center center no-repeat;
  background-size: cover;
  overflow: hidden;  /* Hide any overflow */
  display: flex;
  align-items: center;     /* Vertically center the content */
  justify-content: center; /* Horizontally center the content */
  padding: 2rem;           /* Optional additional spacing */
}

/* Semi-transparent overlay covering the background image */
.basilea-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* 40% black, adjust for more/less opacity */
  z-index: 1; /* Stacked above background image, but below text content */
}

/* The black box holding title & bullet points */
.basilea-content {
  position: relative;
  z-index: 2;                  /* Above the overlay */
  background-color: rgba(0, 0, 0, 0.5); /* Additional black layer for better contrast */
  color: #fff;                 /* White text */
  padding: 2rem;
  max-width: 800px;           /* Optional max width for your text box */
  margin: 0 auto;
  border-radius: 0px;         /* Rounded corners if you like (e.g., 8px) */
  text-align: left;           /* Left-align or center your text */
}

/* Title style */
.basilea-content h2 {
  font-family: "Montserrat", sans-serif; /* Example font family */
  font-size: 2rem;        /* Large title text */
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Bullet points */
.basilea-content ul {
  list-style: disc outside; /* Standard disc bullets */
  margin-left: 2rem;        /* Indent bullet points */
  line-height: 1.6;         /* Spacing between lines for readability */
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
}

/* Bullet spacing */
.basilea-content ul li {
  margin-bottom: 1rem;
}

/* Responsive: narrower screens */
@media (max-width: 768px) {
  .basilea-section {
    min-height: 80vh; /* Possibly increase height on mobile if you have more text */
    padding: 1rem;
  }
  .basilea-content {
    padding: 1rem;
    margin: 0 1rem;
  }
  .basilea-content h2 {
    font-size: 1.4rem;
  }
  .basilea-content ul {
    font-size: 0.9rem;
    margin-left: 1.5rem;
  }
}

/* Green Quote Banner Section */
.green-quote-banner {
  background-color: #556b2f; /* Example green; tweak to your preference (#6b2f55, #3c5f39, etc.) */
  padding: 3rem 1rem;       /* Space around the quote */
  text-align: center;       /* Center the quote horizontally */
  color: #fff;              /* White text for contrast */
}

/* Container to center and limit text width */
.green-quote-content {
  max-width: 1000px; /* Adjust to limit the text width */
  margin: 0 auto;    /* Center horizontally */
  font-family: "Montserrat", sans-serif; /* Example font family */
}

/* The main quote text */
.quote-text {
  font-size: 1.6rem;  /* Adjust as needed */
  line-height: 1.4;
  margin-bottom: 1rem;
}

/* The author (Paul McNulty) styling */
.quote-author {
  font-size: 1.6rem;
  font-weight: 700; /* Make the author name bold */
  margin: 0;        /* No extra space below */
}

/* QF Advisors Help Section */
.qf-help-section {
  width: 100%;                 /* Full width of the page */
  background-color: #fff;      /* White background */
  padding: 2rem 1rem;         /* Space around the content */
}

.qf-help-content {
  max-width: 1200px;          /* Keep text from spanning too wide */
  margin: 0 auto;             /* Center horizontally */
  font-family: "Montserrat", sans-serif; /* Example font family */
  color: #000;                /* Black text */
  line-height: 1.6;           /* Improves readability */
}

/* Main heading style */
.qf-help-content h2 {
  font-size: 2rem;
  font-weight: 700;           /* Bold heading */
  margin-bottom: 1rem;
  line-height: 1.3;
}

/* Highlight “QF Advisors” in red/pink, or your choice */
.qf-highlight {
  color: #b2525a;            /* Example red/pink color */
}

/* Paragraph style */
.qf-help-content p {
  font-size: 1rem;           
  text-align: justify;       /* or left if preferred */
  margin-bottom: 0;          /* No extra space at bottom */
}

.consultoria-section {
  position: relative;
  width: 100%;
  height: 50vh; /* Adjust for the desired vertical height (e.g., 60vh, 70vh) */
  background: url("../img/consultoria-bg.jpg") center center no-repeat;
  background-size: cover; 
  display: flex;
  align-items: center;   /* Vertically center the text */
  justify-content: center;  /* Horizontally center the text */
  overflow: hidden; 
}

/* The semi‐transparent overlay covering the background */
.consultoria-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* 40% black overlay; tweak as needed */
  z-index: 1;  /* Below text, above background */
}

/* The text container, positioned above the overlay */
.consultoria-content {
  position: relative;
  z-index: 2;  /* Above the overlay */
  text-align: center;
}

/* Large title style */
.consultoria-content h1 {
  font-family: "Montserrat", sans-serif; /* Example font; adjust to suit */
  font-size: 3rem;     /* Make it big; adjust as you like */
  font-weight: 700;
  color: #fff;         /* White text for contrast */
  margin: 0;
  letter-spacing: 1px; /* Optional spacing */
}

/* Responsive styling for smaller screens */
@media (max-width: 768px) {
  .consultoria-section {
    height: 40vh; /* Possibly shorter on mobile, if desired */
  }
  .consultoria-content h1 {
    font-size: 2rem; 
  }
}

/* Container for the entire section */
.numbers-image-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;             /* Allow wrapping on smaller screens */
  width: 100%;
  margin: 0rem 0;
}

/* Dark left panel */
.dark-left-panel {
  background-color: #1f3700; /* Dark gray; tweak if you want a darker/lighter shade */
  color: #ffffff;
  flex: 1;                   /* Fill available horizontal space */
  min-width: 280px;          /* Prevent panel from shrinking too narrow on mobile */
  padding: 2rem;
  display: flex;
  flex-direction: column;    /* Stack the 4 items vertically */
  gap: 2rem;                 /* Space between items */
}

/* Each numbered item */
.numbered-item {
  display: flex;             /* Big number + text side by side */
  margin-left: 6rem;
  gap: 1rem;                 /* Space between big number and text */
  align-items: flex-start;   /* Align top edges */
}

/* Big number styling */
.big-number {
  font-size: 6rem;
  font-weight: 700;
  color: #c6c6c6;         /* A lighter gray for contrast on dark background */
  flex-shrink: 0;      /* Prevent the number from shrinking on narrow screens */
}

/* Text area next to the number */
.item-text {
  margin-left: 1rem;
  font-family: "Montserrat", sans-serif;
  max-width: 600px;    /* Optional: limit text width */
}

/* Title (e.g., “Diagnóstico Regulatorio:”) */
.item-text h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #c6c6c6;        /* White text */
}

/* Bullet lists */
.item-text ul {
  list-style-type: disc;
  margin-left: 1.5rem;  /* Indent bullet points */
  line-height: 1.8;
  font-size: 1.3rem;
}

/* Right side: Tall image */
.tall-image-right {
  flex: 1;                /* Fill remaining horizontal space */
  min-width: 280px;       /* Prevent it from shrinking too small */
  max-width: 500px;       /* Adjust if you want to limit how big the image can get */
  max-height: 736px;
  display: flex;
  align-items: center;    /* Vertically center the image if there's space */
  justify-content: center;
}

/* Make the image fill its container’s width (up to max-width) */
.tall-image-right img {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive: stack the dark panel above the image on smaller screens */
@media (max-width: 768px) {
  .numbers-image-section {
    flex-direction: column;
  }
  .dark-left-panel,
  .tall-image-right {
    max-width: 100%;
  }
}

/* Technology Section (Brown left, image right) */
.technology-regtech-section {
  width: 100%;
  background-color: #b07358; /* A brownish color; tweak as desired */
  padding: 2rem 1rem;       /* Spacing within the section */
  font-family: "Montserrat", sans-serif;
}

/* Container to hold the left (text) and right (image) */
.technology-regtech-container {
  display: flex;
  align-items: flex-start;   /* Align items from the top */
  justify-content: space-between;
  flex-wrap: wrap;           /* Allow wrapping on smaller screens */
  max-width: 1200px;         /* Center content if narrower than full width */
  margin: 0 auto;            /* Center horizontally */
  gap: 2rem;                 /* Space between left & right columns */
}

/* Left column: big title, subtitle, bullet points */
.tech-left-side {
  flex: 1;                     /* Takes up remaining width on the left */
  min-width: 280px;            /* Prevent it from shrinking too narrow on mobile */
  color: #fff;                 /* White or near-white text on brown background */
}

/* Big title */
.tech-big-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  margin-top: 7rem;
  color: #000;                 /* Black text for the big heading (like your screenshot) */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Optional subtle shadow to pop text */
}

/* Subtitle (with a certain part in bold white) */
.tech-subtitle {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #fff;  /* White text for subtitle */
}

/* This class highlights “cumplimiento legal y regulatorio” in white/bold */
.white-highlight {
  color: #fff;
  font-weight: bold;
}

/* Bullet list under the subtitle */
.tech-bullet-list {
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 1.5rem;  /* Indent the bullet points */
  line-height: 1.8;
  font-size: 1.3rem;
  color: #fff;          /* White text for bullet points */
}

/* Right column: tall image */
.tech-right-side {
  flex: 1;                     /* The image also shares the horizontal space */
  min-width: 280px;
  max-width: 600px;           /* Adjust if desired */
}

/* Make the image fill the container’s width while keeping aspect ratio */
.tech-right-side img {
  width: 100%;
  height: 50rem;
  display: block;
}

/* Responsive layout for smaller screens */
@media (max-width: 768px) {
  .technology-regtech-container {
    flex-direction: column;   /* Stack the text above the image */
  }
  .tech-right-side,
  .tech-left-side {
    max-width: 100%;
  }
  .tech-big-title {
    font-size: 2rem;         /* Scale down the big title */
  }
  .tech-subtitle {
    font-size: 1rem;
  }
  .tech-bullet-list {
    font-size: 0.95rem;
  }
}

/* Education Lateral Section */
.education-lateral-section {
  width: 100%;
  background-color: #fff; /* Overall white background behind the entire container, if desired */
}

/* Flex container for left image + right text */
.education-lateral-container {
  display: flex;
  align-items: stretch; /* Let columns stretch to the same height */
  flex-wrap: wrap;      /* Wrap on smaller screens */
  max-width: auto;    /* Keep content centered if narrower than full width */
  margin: 0 auto;       /* Center horizontally */
  gap: 0;               /* No gap so images & green box line up flush */
}

/* Left side: image container */
.education-lateral-left {
  flex: 1;             /* Occupies half or so of the horizontal space */
  min-width: 300px;    /* Prevent it from shrinking too narrow on mobile */
}
.education-lateral-left img {
  width: 100%;
  height: auto;
  display: block;
}

/* Right side: green background with text */
.education-lateral-right {
  flex: 1;
  min-width: 300px;
  background-color: #7b8050; /* Example green shade; tweak to match your screenshot (#a7a87a, #8c8e63, etc.) */
  color: #fff;               /* White text for contrast */
  display: flex;            /* So we can vertically center content if desired */
  flex-direction: column;
  justify-content: center;
  padding: 2rem;            /* Space inside the green area */
}

/* Big title styling */
.education-lateral-right h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #000; /* If you want a black text with slight shadow, or #fff if you want it white */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Optional subtle shadow effect */
}

/* Bullet point list */
.education-lateral-right ul {
  list-style-type: disc;
  margin-left: 1.5rem;  /* Indent bullet points */
  line-height: 1.8;
  font-size: 1.1rem;
  font-family: "Montserrat", sans-serif;
  color: #fff;
}

/* Bullet styling (optional) */
.education-lateral-right li {
  margin-bottom: 1rem;
}

/* Responsive: stack image & green box vertically on smaller screens */
@media (max-width: 768px) {
  .education-lateral-container {
    flex-direction: column; /* Stack image above the text box */
  }
  
  .education-lateral-right {
    padding: 1.5rem;
  }

  .education-lateral-right h1 {
    font-size: 2rem; /* Slightly smaller for mobile */
  }

  .education-lateral-right ul {
    font-size: 1rem;
  }
}

/* Collaboration Benefits Section */
.collab-benefits-section {
  width: 100%;
  background-color: #fff; /* White background; adjust if needed */
  padding: 2rem 1rem;     /* Space around the entire section */
  font-family: "Montserrat", sans-serif; /* Example font family */
}

/* Container for left content and right image */
.collab-benefits-container {
  display: flex;
  align-items: flex-start;         /* Align items at the top */
  justify-content: space-between;
  max-width: 1200px;               /* Center content if narrower than full width */
  margin: 0 auto;                  /* Center horizontally */
  gap: 2rem;                       /* Space between left & right columns */
  position: relative;              /* For optional absolute positioning of the image */
}

/* Left side: big title, subtitle, bullet list */
.collab-left {
  flex: 1;
  min-width: 280px;     /* Prevent shrinking too narrow on mobile */
  width: 100%;
}

/* Main title style */
.collab-left h1 {
  font-size: 2.5rem;    /* Big title size; adjust as you like */
  font-weight: 700;
  width: 90rem;
  color: #000;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.collab-left h3{
  width: 90rem;
  margin-top: 2rem;
  margin-bottom: 1rem;

}

/* Highlight “QF Advisors” in a different color (e.g., red/brown) */
.qf-highlight {
  color: #9e4b3e;       /* Example “rusty red” color; tweak to match your design */
}

/* Subtitle under the main title */
.collab-subtitle {
  font-size: 1.4rem;
  color: #000;
  margin-bottom: 1.5rem;
  margin-top: 7rem;
  line-height: 2;
}

/* Bullet points */
.collab-bullets {
  list-style-type: disc;
  margin-left: 2rem;   /* Indent bullet points */
  line-height: 2;
  font-size: 1.3rem;
  color: #000;
}

/* Right side: “bottom” aligned image */
.collab-right {
  flex: 1;
  min-width: 280px;
  display: flex;
  align-items: flex-end;  /* Align the image at the bottom of the column */
  justify-content: center;/* Center horizontally within that column */
}

/* Make the image responsive */
.collab-right img {
  margin-top: 6rem;
  width: 100%;      /* Fill the column's width */
  height: auto;     /* Maintain aspect ratio */
  display: block;
}

/* Responsive: stack content vertically on smaller screens */
@media (max-width: 768px) {
  .collab-benefits-container {
    flex-direction: column; /* Stack text above the image */
  }
  .collab-left, .collab-right {
    max-width: 100%;
  }
  .collab-left h1 {
    font-size: 2rem;
  }
  .collab-subtitle {
    font-size: 1rem;
  }
  .collab-bullets {
    font-size: 0.95rem;
  }
}

/* Culture Lateral Section */
.culture-lateral-section {
  width: 100%;
  background-color: #fff;          /* White background (optional) */
  padding: 2rem 1rem;             /* Spacing around the entire section */
  font-family: "Montserrat", sans-serif; 
}

.culture-lateral-container {
  display: flex;
  align-items: stretch; /* Both columns stretch vertically */
  flex-wrap: wrap;      /* Wrap columns on smaller screens */
  max-width: 1200px;    /* Keep content centered if narrower than the page */
  margin: 0 auto;
  gap: 1.5rem;          /* Space between left (image) & right (text) */
}

/* Left side: the image */
.culture-lateral-left {
  flex: 1;                  
  min-width: 300px;         /* Prevent it from shrinking too small */
}
.culture-lateral-left img {
  width: 100%;
  height: auto;
  display: block;
}

/* Right side: heading + bullet points */
.culture-lateral-right {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Vertically center text if column taller */
}

/* Heading style */
.culture-lateral-right h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #000;
}

/* Bullet points */
.culture-lateral-right ul {
  list-style-type: disc;    /* Standard disc bullets */
  margin-left: 1.5rem;      /* Indent bullet points */
  line-height: 1.6;
  font-size: 1rem;
  color: #000;
}

/* Bold text for emphasis inside bullets */
.culture-lateral-right li strong {
  font-weight: 700;
}

/* Responsive: stack columns vertically on narrow screens */
@media (max-width: 768px) {
  .culture-lateral-container {
    flex-direction: column; /* Stacks image above text */
    align-items: center;
  }
  .culture-lateral-left, 
  .culture-lateral-right {
    max-width: 100%;
  }
  .culture-lateral-right h3 {
    font-size: 1.4rem;
  }
  .culture-lateral-right ul {
    font-size: 0.95rem;
  }
}

/* CTA Section (Background Image + Overlay + Text + Buttons) */
.cta-section {
  position: relative;
  width: 100%;
  height: 60vh; /* Adjust hero height (e.g., 70vh, 80vh, or a fixed px height) */
  background: url("../img/cta-bg.jpg") center center no-repeat;
  background-size: cover;  /* Make the image fill the container */
  overflow: hidden;
  display: flex;
  align-items: center;      /* Vertically center the content */
  justify-content: center;  /* Horizontally center the content */
  padding: 2rem;
}

/* Semi-transparent overlay for better text contrast */
.cta-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* 40% black overlay */
  z-index: 1;
}

/* The CTA text container */
.cta-content {
  position: relative;   /* So it’s above the overlay */
  z-index: 2;           /* Above the overlay */
  text-align: center;   /* Center the text horizontally */
  max-width: 800px;     /* Optional limit on text width */
  color: #fff;          /* White text */
  font-family: "Montserrat", sans-serif;
}

/* Main heading */
.cta-content h2 {
  font-size: 2.5rem;   /* Big, bold title */
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}

/* Paragraph under the title */
.cta-content p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* Smaller subheading above the buttons */
.cta-content h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: #fff;
}

/* Buttons container */
.cta-buttons {
  display: flex;
  justify-content: center; /* Center the buttons side by side */
  gap: 1rem;               /* Space between the two buttons */
}

/* CTA buttons */
.cta-button {
  display: inline-block;
  background-color: #00297b; /* Example dark blue; adjust as needed */
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.8rem 1.5rem;
  border-radius: 30px;     /* Curved corners */
  text-decoration: none;   /* Remove link underline */
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #0043b3; /* Slightly lighter on hover (or darker) */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cta-section {
    height: auto;         /* Let content dictate height on mobile */
    padding: 3rem 1rem;
  }
  .cta-content h2 {
    font-size: 1.8rem; 
  }
  .cta-content p {
    font-size: 0.95rem;
  }
  .cta-content h3 {
    font-size: 1rem;
  }
  .cta-buttons {
    flex-direction: column; /* Stack buttons vertically if needed */
  }
}

/* Hero container */
.my-hero {
  position: relative;
  width: 100%;
  height: 750px; /* Adjust height as needed */
  background: url('../img/iceberg.jpg') center center/cover no-repeat;
  display: flex; 
  align-items: center; /* Vertically center content */
}

/* Transparent blue box on the left */
.my-hero-textbox {
  font-family: "Montserrat", sans-serif;
  background-color: rgba(0, 90, 140, 0.5); /* A semi-transparent blue */
  padding: 2rem; 
  max-width: 450px; /* Adjust as you like */
  margin-left: 2rem; /* Give it some left spacing */
  color: #ffffff; /* White text */
}

/* Main hero heading */
.my-hero-heading {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

/* Sub-heading or quote */
.my-hero-subheading {
  font-size: 1rem;
  margin: 0;
}

/* Risk Challenges Section */
.risk-challenges-section {
  width: 100%;
  background-color: #fff;   /* White background */
  padding: 2rem 1rem;
  font-family: "Montserrat", sans-serif; /* Example font */
}

/* Container to center content and set max width */
.risk-challenges-container {
  max-width: 1200px;        /* Keep content centered if narrower than full width */
  margin: 0 auto;           /* Center horizontally */
}

/* Main title (e.g. “En QF sabemos... RETOS”) */
.risk-challenges-container h2 {
  font-size: 2rem;
  font-weight: 700;
  text-align: left;         /* or center, if you prefer */
  margin-bottom: 1.5rem;
  margin-top: 2rem;
  line-height: 1.2;
  color: #333;              /* Adjust color to your liking */
}

/* Optional accent color for the word “RETOS” (or any highlight) */
.accent-text {
  color: #006c7d;           /* Example teal color; change as you like */
  font-weight: bold;
}

/* Row that holds the bullets on the left and image on the right */
.row-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;          /* Wrap columns on smaller screens */
  gap: 2rem;                /* Space between the two columns */
}

/* Left column: bullet list */
.challenges-left {
  flex: 1;
  margin-top: 2rem;
  min-width: 280px;         /* Prevent from shrinking too small */
}

/* The bullet list styling */
.challenges-left ul {
  list-style-type: disc;
  margin-left: 1.5rem;      /* Indent bullets slightly */
  line-height: 2;
  font-size: 1.2rem;
  color: #000;
}

/* Right column: image container */
.challenges-right {
  flex: 1;
  min-width: 280px;
  max-width: 500px;         /* Adjust if desired to control how big the image gets */
}

/* Make the image responsive */
.challenges-right img {
  width: 90%;
  height: auto;
  display: block;
}

/* Responsive: stack bullets above the image on small screens */
@media (max-width: 768px) {
  .row-content {
    flex-direction: column; /* Stack vertically */
    align-items: center;    /* Center content horizontally */
  }
  .challenges-left, .challenges-right {
    max-width: 100%;
  }
  .risk-challenges-container h2 {
    text-align: center;     /* Center the title for mobile if you want */
  }
}

/* Robust Risk Management Section */
.robust-risk-section {
  background-color: #fff; /* White background (adjust as desired) */
  padding: 2rem 1rem;
  font-family: "Montserrat", sans-serif; /* Example font; tweak to suit your site */
}

/* Container to center content and set a max width */
.robust-risk-container {
  max-width: 1200px;
  margin: 0 auto;
  color: #000;               /* Default text color */
}

/* Main title */
.robust-risk-container h2 {
  font-size: 2rem;          /* Large heading size */
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

/* Optional accent color for the word “robusta” */
.accent {
  color: #fa9141;            /* Example orange accent color */
  font-weight: bold;
}

/* Row content: left text + right image */
.robust-content {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;           /* Wrap columns on smaller screens */
}

/* Left: enumerated points */
.robust-left {
  flex: 1;
  min-width: 280px;          /* Prevent from shrinking too narrow on mobile */
}

/* Each numbered point (heading + paragraph) */
.numbered-point h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #000;
}

.numbered-point p {
  font-size: 1.2rem;
  line-height: 2;
  text-align: justify;
  margin-bottom: 1.5rem; /* Space below each point */
}

/* Right: image container */
.robust-right {
  flex: 1;
  min-width: 280px;
  max-width: 500px;         /* Adjust if desired to control how big the image gets */
}

/* Responsive image */
.robust-right img {
  width: 90%;
  height: auto;
  display: block;
}

/* Responsive layout for smaller screens */
@media (max-width: 768px) {
  .robust-content {
    flex-direction: column;  /* Stack text above the image */
  }
  .robust-left, .robust-right {
    max-width: 100%;         /* Full width for each on mobile */
  }
}

/* Underwater Risk Benefits Section */
.underwater-risk-section {
  position: relative;
  width: 100%;
  min-height: 70vh; /* Adjust the height as needed (e.g., 60vh, 80vh) */
  background: url("../img/turtle.jpg") center center no-repeat;
  background-size: cover; /* Ensures the image covers the entire container */
  overflow: hidden;
}

/* Dark overlay for better text contrast */
.underwater-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 50% black overlay; tweak as needed */
  z-index: 1; /* Sits above the background image but below the text */
}

/* Container for headings and paragraphs */
.underwater-content {
  position: relative;
  z-index: 2;    /* Above the overlay */
  color: #ffffff;
  max-width: 1000px;  /* Limit the text container width */
  margin: 0 auto;
  padding: 3rem;      /* Space around the text */
  font-family: "Montserrat", sans-serif;
  margin-top: 3rem;
}

/* Headings (4, 5, 6) */
.underwater-content h2 {
  font-size: 1.4rem;     /* Adjust as needed */
  font-weight: 700;
  margin-bottom: 0.5rem; /* Space below each numbered heading */
  line-height: 1.4;
}

/* Paragraph text */
.underwater-content p {
  font-size: 1.2rem;       /* Adjust as needed */
  line-height: 1.6;
  margin-bottom: 2rem;   /* Space below each paragraph */
  text-align: justify;   /* Or left if you prefer */
}

/* Responsive adjustments: smaller text on narrow screens */
@media (max-width: 768px) {
  .underwater-content {
    padding: 2rem 1rem;  /* Reduce padding on mobile */
  }
  .underwater-content h2 {
    font-size: 1.2rem;
  }
  .underwater-content p {
    font-size: 0.95rem;
  }
}

/* Underwater Lateral Section */
.underwater-lateral-section {
  background-color: #f0f0f0; /* Light gray background; tweak color if needed */
  padding: 2rem 1rem;       /* Spacing around the section */
  font-family: "Montserrat", sans-serif; /* Example font family */
}

/* Container for left (image/video) and right (text) */
.underwater-lateral-container {
  display: flex;
  align-items: center;     /* Vertically center content */
  gap: 2rem;               /* Space between left & right sides */
  flex-wrap: wrap;         /* Stack columns on narrow screens */
  max-width: 1200px;       /* Keep content centered if narrower than full page */
  margin: 0 auto;          /* Center horizontally */
}

/* Left side: image container */
.underwater-lateral-left {
  flex: 1;                 /* Share available width with the text side */
  min-width: 280px;        /* Prevent shrinking too narrow on mobile */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Make sure the image/video fits the container */
.underwater-lateral-left img {
  width: 100%;
  height: auto;
  display: block;
}

/* Right side: text container */
.underwater-lateral-right {
  flex: 1;
  text-align: center;
  min-width: 280px;
  color: #000;            /* Black text, tweak if you prefer a different color */
}

/* Heading style */
.underwater-lateral-right h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
  color: #000;
}

/* Optional accent color for “QF Advisors” */
.accent-text {
  color: #083680;          /* Example dark blue shade; adjust if desired */
}

/* Paragraph style */
.underwater-lateral-right p {
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;     /* Or left-aligned if you prefer */
  margin-bottom: 1.5rem;
}

/* Responsive: stack image above text on smaller screens */
@media (max-width: 768px) {
  .underwater-lateral-container {
    flex-direction: column;   /* Stack vertically */
    text-align: center;       /* Center text if you like */
  }
  .underwater-lateral-left, 
  .underwater-lateral-right {
    max-width: 100%;
  }
  .underwater-lateral-right p {
    text-align: left;        /* Or center, your choice */
  }
}

.simpler-smarter-section {
  width: 100%;
  background-color: #fff; /* White background or any other color */
  padding: 2rem 1rem;     /* Spacing around the title */
  text-align: center;     /* Center the title horizontally */
}

.simpler-smarter-container {
  max-width: 1200px;      /* Keep content centered if narrower than the page */
  margin: 0 auto;
}

/* Main title styling */
.simpler-smarter-title {
  font-family: "Montserrat", sans-serif; /* Example font */
  font-size: 2rem;          /* Adjust as needed */
  font-weight: 700;         /* Bold */
  color: #000;              /* Base text color for unaccented words */
  margin: 0;
  line-height: 1.3;
}

/* Accent colors for specific words */
.accent-orange {
  color: #fa9141;           /* Example orange color */
  font-weight: bold;
}

.accent-blue {
  color: #083680;           /* Example dark blue */
  font-weight: bold;
}

/* Optional second blue shade (if you want “BETTER” to differ) */
.accent-blue2 {
  color: #006c7d;           /* Another blue/teal shade */
  font-weight: bold;
}

/* Responsive: scale down on smaller devices */
@media (max-width: 768px) {
  .simpler-smarter-title {
    font-size: 1.6rem;
  }
}

/* Three-Tiles Section Wrapper */
.three-tiles-section {
  margin: 0;               /* Remove default margins so corners meet */
  padding: 0;              /* No extra padding around the rows */
  width: 100%;             /* Full width layout */
  overflow: hidden;        /* Prevent any overflow from child elements */
}

/* Each row: side-by-side image & text */
.tile-row {
  display: flex;
  width: 100%;
  min-height: 33.3vh;      /* Each row can take ~1/3 of viewport height (adjust as needed) */
  overflow: hidden;        /* Ensures the images line up flush with no overflow */
}

/* Row 2: we reverse the order to put image on the right, text on the left */
.row2 {
  flex-direction: row-reverse;
}

/* If Row 3 also wants image left => keep default “row” direction, same as Row 1 */

/* Image Container */
.tile-image {
  flex: 1;                 /* Occupies half the row */
  min-width: 300px;        /* Prevent from shrinking too narrow */
  overflow: hidden;        /* Crop if image is bigger than container */
}

/* Make images fill their container’s width & height */
.tile-image img {
  display: block;
  width: 100%;
  height: auto;       /* Keep aspect ratio */
  object-fit: cover;  /* Crop to fill if the container is fixed-sized */
  margin: 0;          /* Ensure corners meet exactly with no gap */
}

/* Text Container */
.tile-text {
  flex: 1;                  /* Occupies other half of the row */
  min-width: 300px;
  background-color: #e5e9f0; /* Light gray background (adjust if needed) */
  padding: 2rem;
  box-sizing: border-box;    /* Padding is included in the total width */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* Vertically center the text */
  font-family: "Montserrat", sans-serif; 
  color: #000;
}

/* Heading inside each tile (SIMPLER, SMARTER, BETTER) */
.tile-text h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #083680; /* Example color; you can override per tile if desired */
}

/* Paragraph text styling */
.tile-text p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  text-align: justify;
}

/* If you want each tile to have a custom heading color: */
.simpler-tile h3 { color: #fa9141; }    /* orange for “SIMPLER” */
.smarter-tile h3 { color: #083680; }    /* dark blue for “SMARTER” */
.better-tile h3  { color: #b2525a; }    /* pinkish color for “BETTER” */

/* Responsive: stack each row’s image above text on smaller screens */
@media (max-width: 768px) {
  .tile-row {
    flex-direction: column;
  }
  .tile-text {
    padding: 1rem; /* maybe less padding on mobile */
  }
}

/* Advisory Title Section */
.advisory-title-section {
  background-color: #e5e9f0; /* Light gray background */
  padding: 2rem 1rem;       /* Spacing around the title */
  text-align: center;       /* Center the text horizontally */
  margin: 0;                /* Remove default section margins if desired */
}

.advisory-title-container {
  max-width: 1200px;        /* Keep content centered if narrower than full page */
  margin: 0 auto;           /* Center horizontally */
}

.advisory-title {
  font-family: "Montserrat", sans-serif; /* Example font family */
  font-size: 1.8rem;                     /* Adjust font size to your liking */
  font-weight: 700;                      /* Bold text */
  color: #000;                           /* Black text color */
  margin: 0;                             /* Remove default heading margin */
  line-height: 1.2;                      /* Tight line spacing if you like */
}

/* Governance Hero Section */
.governance-hero {
  position: relative;
  width: 100%;
  min-height: 70vh; /* Adjust as needed (e.g., 60vh, 80vh, etc.) */
  background: url("../img/ocean.jpg") center center no-repeat; /* Replace with your image path */
  background-size: cover; /* Make the image fill the container */
  overflow: hidden; /* Hide any content that overflows */
  margin: 0;        /* Remove default margins if you want the image flush with edges */
  padding: 0;
}

/* Semi‐transparent overlay to darken/lighten the image for better text visibility */
.gov-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 50% black overlay; adjust as needed */
  z-index: 1; /* Above the background image, below the text */
}

/* The text container (above the overlay) */
.governance-content {
  position: relative;
  z-index: 2;                /* Above the overlay */
  max-width: 1200px;         /* Center content if narrower than the page */
  margin: 0 auto;
  padding: 3rem 2rem;        /* Spacing around the text content */
  color: #fff;               /* White text for contrast */
  font-family: "Montserrat", sans-serif;
}

/* Main headings */
.governance-content h2 {
  font-size: 2rem;   
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 2;
}

.governance-content h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

/* Paragraph & bullet list */
.governance-content p {
  font-size: 1.3rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.governance-content ul {
  list-style-type: disc;
  margin-left: 2rem;  /* Indent bullets */
  line-height: 1.8;
  font-size: 1.2rem;
}

/* Responsive styling for smaller screens */
@media (max-width: 768px) {
  .governance-content {
    padding: 2rem 1rem;  /* Reduce padding on mobile */
  }
  .governance-content h2 {
    font-size: 1.6rem;
  }
  .governance-content h3 {
    font-size: 1.2rem;
  }
  .governance-content p,
  .governance-content li {
    font-size: 0.95rem;
  }
}

/* Education Row Section (Title Left, Text Right) */
.education-row-section {
  background-color: #e5e9f0; /* Light gray background */
  padding: 1.5rem 1rem;     /* Spacing around the row */
  width: 100%;              /* Full width */
}

.education-row-container {
  display: flex;
  align-items: center;      /* Vertically center content */
  justify-content: space-between;
  flex-wrap: wrap;          /* Stack on smaller screens if needed */
  max-width: 1200px;        /* Keep content centered if narrower than the page */
  margin: 0 auto;           /* Center horizontally */
  gap: 2rem;                /* Space between the two sides */
}

/* Left side: Title */
.education-row-left {
  flex: 0 0 auto;           /* Prevent from shrinking */
  min-width: 180px;         /* Enough space for the title */
  font-family: "Montserrat", sans-serif;
}
.education-row-left h3 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #083680;  /* Dark blue or any color you prefer */
  margin: 0;       /* Remove default heading margin */
}

/* Right side: Text */
.education-row-right {
  flex: 1;                 /* Fill remaining horizontal space */
  min-width: 280px;        /* Prevent from shrinking too narrow */
  font-family: "Montserrat", sans-serif;
  color: #000;             /* Black text */
}
.education-row-right p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0;               /* Remove default paragraph margin */
  text-align: justify;     /* Or left if you prefer */
}

/* Responsive: stack the title above the paragraph on smaller screens */
@media (max-width: 768px) {
  .education-row-container {
    flex-direction: column;  /* Stack vertically */
    text-align: center;      /* Optionally center text on mobile */
  }
  .education-row-left, 
  .education-row-right {
    max-width: 100%;
  }
}

/* Risk Cycle Title Section */
.risk-cycle-section {
  width: 100%;
  background-color: #fff;        /* White background (adjust if needed) */
  padding: 2rem 1rem;           /* Space around the entire section */
  font-family: "Montserrat", sans-serif; /* Example font family */
}

/* Container that holds the headings + paragraph */
.risk-cycle-container {
  max-width: 1200px;    /* Keep content centered if narrower than full page */
  margin: 0 auto;       /* Center horizontally */
  text-align: left;     /* Align text to the left (or center if you prefer) */
}

/* Main heading style */
.risk-cycle-heading {
  font-size: 2rem;      /* Big bold heading */
  font-weight: 700;
  color: #000;          
  margin-bottom: 1rem;
  line-height: 1.2;
}

/* Subheading (e.g., “B.1) CONSULTORÍA”) */
.risk-cycle-subheading {
  font-size: 1.4rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 1rem;
}

/* Short paragraph describing the services */
.risk-cycle-paragraph {
  font-size: 1rem;
  line-height: 1.6;
  color: #000;
  margin: 0; /* No extra space below, unless you want it */
}

/* Responsive example (reduce font sizes for small screens) */
@media (max-width: 768px) {
  .risk-cycle-heading {
    font-size: 1.6rem;
  }
  .risk-cycle-subheading {
    font-size: 1.2rem;
  }
  .risk-cycle-paragraph {
    font-size: 0.95rem;
  }
}

/* Risk Steps Section with a full background image */
.risk-steps-section {
  position: relative;
  width: 100%;
  min-height: 80vh; /* Adjust as needed */
  background: url("../img/jellyfish-bg.jpg") center center no-repeat; /* Replace with your background image */
  background-size: cover;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Semi-transparent overlay (darkening the background) */
.risk-steps-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* 40% black overlay */
  z-index: 1;  /* Above the background image, below the text content */
}

/* Container for rows with text & images */
.risk-steps-content {
  position: relative;
  z-index: 2;             /* Above the overlay */
  max-width: 1200px;      /* Keep content centered if narrower than page */
  margin: 0 auto;
  padding: 2rem;          /* Space around the content */
  font-family: "Montserrat", sans-serif;
  color: #fff;            /* White text for contrast on dark background */
}

/* Each row = text (left) + image (right) in a horizontal flex container */
.risk-step {
  display: flex;
  flex-wrap: wrap;        /* Wrap on smaller screens */
  align-items: flex-start; /* Top-align text and image */
  margin-bottom: 2rem;     /* Space between rows */
}

/* Left side: large number, heading, bullet points */
.risk-step-text {
  flex: 1;
  min-width: 300px;
  margin-right: 1.5rem; /* Gap between text and the image */
}

/* The big number (“1” or “2”) */
.big-number {
  font-size: 3rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

/* Subheading (e.g., “Identificación”, “Valoración”) */
.risk-step-text h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Bullet list under each step */
.risk-step-text ul {
  list-style-type: disc;
  margin-left: 2rem;
  line-height: 1.6;
  font-size: 1.2rem;
  width: 40rem;
}

/* Bold text for bullet subheadings (optional) */
.risk-step-text ul li strong {
  font-weight: 700;
}

/* Right side: image container */
.risk-step-image {
  flex: 1;
  min-width: 300px;
  margin-left: 8rem;
  margin-top: 5rem;
  overflow: hidden; /* Crop if image is bigger than container */
}

/* Make the diagram images fill the container’s width while maintaining aspect ratio */
.risk-step-image img {
  display: block;
  margin-left: 3rem;
  width: 100%;
  height: auto;
  object-fit: contain; /* or cover, if you want to fill the area entirely */
}

/* Responsive: stack text above image on narrower devices */
@media (max-width: 768px) {
  .risk-step {
    flex-direction: column;
  }
  .risk-step-text {
    margin-right: 0;
    margin-bottom: 1rem;
  }
  .big-number {
    font-size: 2rem;
  }
  .risk-step-text h3 {
    font-size: 1.2rem;
  }
  .risk-step-text ul {
    font-size: 0.95rem;
  }
}

.risk-steps-section-whale {
  position: relative;
  width: 100%;
  min-height: 80vh; /* Adjust as needed */
  background: url("../img/whale.jpg") center center no-repeat; /* Replace with your background image */
  background-size: cover;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.risk-steps-section-reef {
  position: relative;
  width: 100%;
  min-height: 80vh; /* Adjust as needed */
  background: url("../img/reef.jpg") center center no-repeat; /* Replace with your background image */
  background-size: cover;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 1) Container for the entire “Tecnología” section */
.technology-section {
  width: 90%;
  max-width: 1200px; /* Limit how wide this section can grow */
  margin: 0 auto;    /* Center horizontally */
  padding: 2rem;     /* Spacing around the content */
  font-family: "Montserrat", sans-serif; /* Example font */
  color: #000;       /* Text color */
}

/* 2) The main title styling */
.tech-title {
  font-size: 2rem;       /* Large text for the title */
  font-weight: 700;      /* Bold */
  margin-top: 3rem;
  margin-bottom: 1.5rem; /* Space below the title */
}


/* 3) Flex container for bullets (left) and image (right) */
.tech-content {
  display: flex;
  align-items: flex-start;   /* Top-align both columns */
  justify-content: space-between;
  flex-wrap: wrap;           /* Allow wrapping on smaller screens */
  gap: 2rem;                 /* Space between the columns */
}

/* 4) Bullets column on the left */
.tech-bullets {
  flex: 2;             /* Give the bullets a bit more space */
  margin-top: 4rem;
  min-width: 300px;    /* Prevent it from getting too narrow */
}

/* Adjust list appearance */
.tech-bullets ul {
  list-style-type: disc; /* Standard bullet style */
  margin-left: 1.5rem;   /* Indent bullets */
  line-height: 2;      /* Spacing between lines for readability */
  font-size: 1.2rem;
}

.tech-bullets li {
  margin-bottom: 1rem;   /* Spacing between bullet points */
}

/* 5) Image column on the right */
.tech-image {
  flex: 1;               /* The image side can be narrower */
  min-width: 200px;      /* Prevent it from shrinking too small */
  display: flex;         /* Optional: to center the image inside */
  align-items: center;
  justify-content: center;
}

/* Make the image responsive */
.tech-image img {
  max-width: 100%;   /* Scale down if too large */
  height: auto;      /* Keep aspect ratio */
  border-radius: 0rem; /* Optional rounded corners */
}

/* 6) Responsive tweaks for mobile screens */
@media (max-width: 768px) {
  .tech-content {
    flex-direction: column;   /* Stack bullets above the image */
    align-items: flex-start;  /* Left-align the stacked items (or center) */
  }
  .tech-image {
    margin-top: 1.5rem; /* Space above the image when stacked */
    justify-content: flex-start; /* or center, if you prefer */
  }
}

/***************************************
  BLUE BANNER FOR EDUCATION
****************************************/
.education-banner {
  background-color: #1f2f5b; /* Dark blue color */
  color: #ffffff;           /* White text */
  text-align: center;       /* Center all text within */
  padding: 2rem 1rem;       /* Space above/below, plus some side padding */
}

/* Big title */
.education-title {
  font-size: 2.5rem;        /* Make the title large */
  font-weight: 700;         /* Bold text */
  margin-bottom: 1rem;      /* Space below the title */
  font-family: "Montserrat", sans-serif; /* Example font */
}

/* Subtitle below the title */
.education-subtitle {
  font-size: 1.2rem;       /* Slightly smaller text than the title */
  max-width: 900px;        /* Limit width to keep text in a narrower column */
  margin: 0 auto;          /* Center the text block if narrower than parent */
  line-height: 1.6;        /* Spacing between lines for readability */
  font-family: "Montserrat", sans-serif;
}

/* Optional: Adjust responsive font sizes for mobile screens */
@media (max-width: 768px) {
  .education-title {
    font-size: 2rem;
  }
  .education-subtitle {
    font-size: 1rem;
  }
}

/****************************************
   WHITE BACKGROUND + TITLES
****************************************/
.recovery-plans-section {
  background-color: #fff;       /* White background */
  padding: 2rem 1rem;          /* Spacing around the section */
  text-align: left;            /* Left-align text */
}

/* Big main title */
.recovery-main-title {
  font-family: "Montserrat", sans-serif; /* Example font; adjust as needed */
  font-size: 2.5rem;                     /* Large text */
  font-weight: 700;                      /* Bold style */
  margin-left: 7rem;
  margin-bottom: 1rem;                   /* Space below the main title */
  color: #000;                           /* Black text color */
}

/* Smaller subtitle below */
.recovery-subtitle {
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;                     /* Slightly smaller than main title */
  font-weight: 600;
  color: #000;                           /* Black text color */
  margin: 0;                             /* Remove default margin if desired */
  margin-left: 7rem;
}

/* 
  1) SECTION WRAPPER
  - Use your own background image path for `background-image`.
*/
.plans-section {
  position: relative;
  font-family: "Montserrat", sans-serif;
  width: 100%;
  min-height: 80vh; /* or whatever height you prefer */
  max-height: 85vh;
  background: url("../img/starfish.jpg") center center no-repeat;
  background-size: cover;
  overflow: hidden;  /* in case anything overflows the container */
  padding: 4rem 1rem;
}

/* OPTIONAL: Dark/transparent overlay over the background image */
.plans-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* 50% black overlay, tweak as desired */
  z-index: 1;
}

/* The main content container (above the overlay) */
.plans-content {
  position: relative;
  z-index: 2;              /* Appear above .plans-overlay */
  max-width: 1200px;       /* Center the content if narrower than the full screen */
  margin: 0 auto;
  color: #ffffff;          /* White text by default */
  display: flex;
  flex-direction: column;  /* Stack the plan blocks vertically */
  gap: 3rem;               /* Space between block 1 and block 2 */
}

/*
  2) STYLING EACH “PLAN BLOCK”
  - Big number on left, text on right
*/
.plan-block {
  display: flex;             /* Side-by-side layout for number & text */
  align-items: flex-start;   /* Top-align number and text */
  gap: 4rem;                 /* Space between the big number and text */
}

/* The large number on the left (e.g., “1” or “2”) */
.plan-number {
  font-size: 6rem;       /* Make it big */
  font-weight: 700;      /* Bold */
  line-height: 1;        /* Tight line spacing so it’s a solid block of text */
  color: #ffffff;
  flex-shrink: 0;        /* Don’t let it shrink if the screen is narrow */
}

/* The text area on the right */
.plan-text {
  max-width: 800px;      /* Limit how wide the text can get */
}

/* Title inside each plan (e.g., “Diseño y Actualización...” ) */
.plan-text h2 {
  font-size: 1.6rem; /* Adjust for your design */
  margin-bottom: 1rem;
  font-weight: 700;
}

/* Paragraphs within each plan */
.plan-text p {
  margin-bottom: 1rem;
  line-height: 2;
  font-size: 1.2rem;
  text-align: justify;
}

/* Bold subhead (e.g. “Desarrollo de indicadores...”) for easy emphasis */
.plan-text p strong {
  font-weight: 700;
  color: #ffffff;
}

/* 3) RESPONSIVE: stack number & text on narrow screens */
@media (max-width: 768px) {
  .plan-block {
    flex-direction: column;  /* stack vertically */
    align-items: flex-start; /* left-align everything */
  }
  .plan-number {
    font-size: 4rem;         /* Slightly smaller on mobile */
  }
}

/******************************************************
  CAPITAL OPTIMIZATION SECTION
******************************************************/
.capital-optimization-section {
  display: flex;               /* Place content side by side */
  align-items: flex-start;     /* Top-align the columns */
  justify-content: space-between;
  flex-wrap: wrap;            /* Allow wrapping on small screens */
  max-width: 1200px;          /* Keep content centered if narrower than full width */
  margin: 0 auto;             /* Center horizontally */
  padding: 2rem 1rem;         /* Some spacing around the section */
  background-color: #ffffff;   /* White background (adjust as needed) */
  font-family: "Montserrat", sans-serif;
  color: #000;                 /* Black text */
}

/* Left column: Title, subtitle, bullet points */
.capital-left {
  flex: 2;                     /* Give the text more space than the image */
  min-width: 300px;            /* Prevent it from shrinking too much on smaller screens */
}

/* Big main title */
.capital-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

/* Subtitle */
.capital-subtitle {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* Bullet list */
.capital-list {
  list-style-type: disc;
  margin-left: 2rem;       /* Indent bullets */
  line-height: 2;
  font-size: 1.1rem;
}

.capital-list li {
  margin-bottom: 1rem;     /* Space between bullet points */
}

.capital-list li strong {
  font-weight: 700;        /* Make the key words bold */
  color: #000;             /* Keep them black (or choose another color) */
}

/* Right column: Image (tall, narrow style) */
.capital-right {
  flex: 1;                 /* Smaller share of horizontal space */
  min-width: 200px;        /* Ensure it never shrinks too small */
  max-width: 250px;        /* Adjust to keep it narrow */
  margin-left: 2rem;       /* Space between the left and right columns */
}

/* Make the image responsive + “tall but narrow” feel */
.capital-right img {
  margin-top: 2rem;
  width: 150%;
  height: auto;
  display: block;
  object-fit: cover;       /* Crop if the aspect ratio doesn't match */
  border-radius: 0rem;  /* Optional slight corner rounding */
}

/* Responsive adjustments for narrow screens (below ~768px) */
@media (max-width: 768px) {
  .capital-optimization-section {
    flex-direction: column;    /* Stack the two columns vertically */
    align-items: flex-start;
  }
  .capital-right {
    margin-left: 0;           /* Remove extra gap when stacked */
    margin-top: 2rem;         /* Space above the image column */
    max-width: 100%;          /* Let it fill the screen width */
  }
}

/* 2) Overall container: left image + right text */
.tech-section {
  font-family: "Montserrat", sans-serif;
  display: flex;
  width: 100%;
  min-height: 300px; /* Adjust as needed */
}

/* 3) Left side: the image flush with the left edge */
.tech-image-left {
  flex-shrink: 0;     /* Don’t let this side shrink too small */
  min-width: 300px;   /* Adjust to the width you want for the image */
  max-width: 800px;   /* Optionally limit how wide the image can get */
  overflow: hidden;   /* Hide any overflow if the image is large */
  max-height: 500px;
}
.tech-image-left img {
  display: block;
  width: 100%;        /* Fill the left column’s width */
  height: auto;       /* Keep original aspect ratio */
}

/* 4) Right side: Title + bullet points */
.tech-content-right {
  flex: 1;
  background-color: #fff;      /* White background */
  padding: 2rem;               /* Spacing around text */
}

/* Light‐blue/dark‐cyan title (example color #2B6573) */
.tech-title {
  font-size: 2rem;
  color: #2B6573; /* Adjust the exact shade of blue as needed */
  margin-bottom: 1.5rem;
}

/* Bullet list styling */
.tech-bullets {
  list-style-type: disc;
  margin-left: 2rem; /* Indent bullets */
  line-height: 2;
  color: #000;       /* Black text */
  font-size: 1.2rem;   /* Adjust font size if desired */
}

.tech-bullets li {
  margin-bottom: 1rem; /* Space between bullet points */
}

/* 5) Responsive: stack the image on top of text on narrower screens */
@media (max-width: 768px) {
  .tech-section {
    flex-direction: column;
  }
  .tech-image-left, .tech-content-right {
    max-width: 100%;
  }
}

/************************************
  GRAYISH-BLUE BANNER
************************************/
.education-banner {
  /* Choose a grayish blue color you like */
  background-color: #e2e6ed; /* Example shade */
  text-align: center;       /* Center the title & subtitle */
  padding: 3rem 1rem;       /* Spacing around the content (top/bottom, sides) */
}

/* Big title in blue */
.education-title {
  color: #1f3f85;           /* Example deep blue color */
  font-size: 2rem;          /* Adjust to your preference */
  font-weight: 700;         /* Bold text */
  margin-bottom: 1rem;      /* Space below the title */
  font-family: "Montserrat", sans-serif; /* Example font family */
}

/* Subtitle text */
.education-subtitle {
  font-size: 1.2rem;        /* Slightly smaller than the title */
  line-height: 1.6;         /* Improve readability */
  color: #000;              /* Black text */
  margin: 0 auto;           /* Center the paragraph if narrower than container */
  max-width: 800px;         /* Limit width for better readability on large screens */
  font-family: "Montserrat", sans-serif;
}

/* OPTIONAL: Responsive adjustments for mobile screens */
@media (max-width: 768px) {
  .education-title {
    font-size: 1.6rem;
  }
  .education-subtitle {
    font-size: 1rem;
  }
}

/********************************************
  QUOTE SECTION
*********************************************/
.quote-section {
  text-align: center;    /* Center the text horizontally */
  margin: 3rem 0;        /* Space above/below this block */
  padding: 1rem;         /* Optional extra space within */
  background-color: #fff; /* White background (or remove if unnecessary) */
}

.quote-text {
  font-family: "Montserrat", sans-serif; /* Match your site’s font */
  font-size: 1.4rem;       /* Adjust size as desired */
  font-style: italic;      /* Italic for the quote text (optional) */
  color: #000;             /* Black text color */
  margin-bottom: 0.5rem;   /* Small space before the author line */
  line-height: 1.6;
}

.quote-author {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 500;        /* Slightly bolder for emphasis */
  color: #000;
  margin: 0;
}

/************************************
  Marine Facts Section
************************************/
.marine-fact-section {
  background-color: #89A8A6;  /* A bluish-green background; adjust as needed */
  padding: 2rem 1rem;        /* Spacing around the text */
  text-align: left;          /* Align text to the left (or center if preferred) */
}

/* Text inside the marine-fact-section */
.marine-fact-text {
  color: #ffffff;            /* White text for contrast */
  font-family: "Montserrat", sans-serif; /* Example font */
  font-size: 1.2rem;         /* Adjust size as needed */
  line-height: 1.6;          /* Improve readability */
  max-width: 1200px;         /* Limit how wide the text stretches */
  margin: 0 auto;            /* Center this block horizontally if narrower than container */
}

/**************************************
  Marine Animals Background Section
***************************************/
.marine-animals-section {
  position: relative;
  font-family: "Montserrat", sans-serif;
  width: 100%;
  min-height: 60vh; /* Adjust as needed */
  background: url("../img/nemo.jpg") center center no-repeat; /* Replace with your image */
  background-size: cover;   /* Make the image cover the section */
  color: #fff;              /* White text for contrast */
  overflow: hidden;         /* Hide any overflowing elements */
  padding: 3rem 2rem;       /* Space inside the section */
}

/* Optional: an overlay to darken/lighten the background image for better text visibility */
.marine-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4); /* 40% black overlay, adjust as needed */
  z-index: 1;                        /* Place the overlay above the bg image */
}

/* Container for the text, placed above the overlay */
.marine-animals-content {
  position: relative;
  z-index: 2;               /* Ensure text is above the overlay */
  max-width: 800px;         /* Limit how wide the text can stretch */
  margin: 0 auto;           /* Center horizontally if narrower than section */
  line-height: 2;         /* Better readability */
  text-align: left;         /* Left-align the text */
}

/* Paragraph spacing */
.marine-animals-content p {
  margin-bottom: 1rem;     /* Space between paragraphs */
  font-size: 1.2rem;         /* Adjust to your preference */
}

/* Make the species names bold white (already bold from <strong>),
   but you could color them differently if desired */
.marine-animals-content strong {
  color: #fff;
  font-weight: 700;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .marine-animals-section {
    padding: 2rem 1rem;
  }
  .marine-animals-content p {
    font-size: 0.95rem;
  }
}







.cta-section-risk {
  position: relative;
  width: 100%;
  height: 60vh; /* Adjust hero height (e.g., 70vh, 80vh, or a fixed px height) */
  background: url("../img/risk-cta.jpg") center center no-repeat;
  background-size: cover;  /* Make the image fill the container */
  overflow: hidden;
  display: flex;
  align-items: center;      /* Vertically center the content */
  justify-content: center;  /* Horizontally center the content */
  padding: 2rem;
}


.cta-section-esg {
  position: relative;
  width: 100%;
  height: 60vh; /* Adjust hero height (e.g., 70vh, 80vh, or a fixed px height) */
  background: url("../img/esgcta.jpg") center center no-repeat;
  background-size: cover;  /* Make the image fill the container */
  overflow: hidden;
  display: flex;
  align-items: center;      /* Vertically center the content */
  justify-content: center;  /* Horizontally center the content */
  padding: 2rem;
}

/* The CTA text container */
.cta-content-esg {
  position: relative;   /* So it’s above the overlay */
  z-index: 2;           /* Above the overlay */
  text-align: center;   /* Center the text horizontally */
  max-width: 800px;     /* Optional limit on text width */
  color: #fff;          /* White text */
  margin-left: 7rem;
  font-family: "Montserrat", sans-serif;
}

/* Main heading */
.cta-content-esg h2 {
  font-size: 2.5rem;   /* Big, bold title */
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
  line-height: 1.2;
}

/* Paragraph under the title */
.cta-content-esg p {
  font-size: 1rem;
  line-height: 1.6;
  margin-left: 7rem;
  margin-bottom: 1.5rem;
}

/* Smaller subheading above the buttons */
.cta-content-esg h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: #fff;
}

.cta-left-esg {
  flex: 1;
  min-width: 300px;             /* Prevent it from shrinking too much on mobile */
  font-family: "Montserrat", sans-serif; /* Adjust to your chosen font */
}

/* Title styling */
.cta-left-esg h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #00297b;               /* A dark blue example; adjust to your brand color */
  margin-bottom: 1rem;
  line-height: 1.2;
}

/* Paragraph styling */
.cta-left-esg p {
  font-size: 1rem;
  line-height: 1.6;
  color: #ffffff;
  margin-bottom: 2rem;
}
/* Mobile Phone Styles (max-width:480px) */
@media (max-width: 480px) {
  body { padding: 0 1rem; }
  .navbar, .main-nav ul { flex-direction: column !important; margin: 0 !important; }
  .navbar > li > a, .main-nav a { padding: 12px !important; text-align: center !important; }
  .dropdown { position: static !important; width: 100% !important; }
  .hero-content, .hero-content-page1, .hero-content-sky, .hero-content-values, .hero-text, .fines-text {
    left: 50% !important; transform: translateX(-50%) !important; max-width: 90% !important; padding: 1rem !important;
  }
  .news-bar, .news-items { flex-direction: column !important; gap: 1rem !important; padding: 1rem 0 !important; }
  .container, .container-column, .two-column, .founders, .esg-content, .social-content, .governance-content,
  .desert-container, .windmill-container, .technology-container, .education-container, .percentage-container,
  .bullets-image-container { flex-direction: column !important; align-items: center !important; }
  .text-container, .image-container, .left, .right, .left-text, .right-video, .social-left, .social-right,
  .governance-left, .governance-right, .desert-text, .desert-image, .windmill-image, .windmill-text-column,
  .tech-left, .tech-right, .education-left, .education-right, .percentage-left, .percentage-right,
  .bullets-left, .image-right, .number-text, .number-block { width: 100% !important; margin: 0 !important; }
  h1, .big-title { font-size: 1.5rem !important; }
  h2, h3, .main-title, .founder-col h3 { font-size: 1.2rem !important; }
  p, li { font-size: 1rem !important; line-height: 1.6 !important; }
  img, iframe, .hero img { max-width: 100% !important; height: auto !important; }
}

/* Principles Bridge (after Better, before Quote) */
.principles-bridge {
  padding: 2.5rem 0;
  background:
    radial-gradient(900px circle at 90% 10%, rgba(30, 82, 251, 0.10) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #ffffff 0%, #f7f8ff 100%);
}

.principles-bridge__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3rem;
}

.principles-bridge__card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 6px solid #1e52fb;
  border-radius: 18px;
  padding: 2.1rem 2.5rem;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.06);
}

.principles-bridge__title {
  font-family: "Playfair Display", serif;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem 0;
  color: #000000;
}

.principles-bridge__title::after {
  content: "";
  display: block;
  width: 84px;
  height: 3px;
  background: #1e52fb;
  margin-top: 0.85rem;
  border-radius: 999px;
  opacity: 0.95;
}

.principles-bridge__text {
  font-family: "Montserrat", serif;
  font-size: 1.02rem;
  line-height: 1.95;
  margin: 0;
  max-width: 980px;
  color: #000000;
}

.principles-bridge__text strong {
  color: #1e52fb;
  font-weight: 800;
}

@media (max-width: 768px) {
  .principles-bridge__inner {
    padding: 0 1.5rem;
  }

  .principles-bridge__card {
    padding: 1.7rem 1.55rem;
    border-radius: 16px;
  }

  .principles-bridge__title {
    font-size: 26px;
  }

  .principles-bridge__text {
    font-size: 1rem;
    line-height: 1.85;
  }
}

/* Solutions Intro (before Educación / Consultoría / Tecnología) */
.solutions-intro {
  padding: 2.5rem 0 1.5rem;
  background:
    radial-gradient(900px circle at 10% 10%, rgba(30, 82, 251, 0.10) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #ffffff 0%, #f7f8ff 100%);
}

.solutions-intro__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3rem;
}

.solutions-intro__card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 6px solid #1e52fb;
  border-radius: 18px;
  padding: 2.1rem 2.5rem;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.06);
}

.solutions-intro__title {
  font-family: "Playfair Display", serif;
  font-size: 34px;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem 0;
  color: #000000;
}

.solutions-intro__title::after {
  content: "";
  display: block;
  width: 84px;
  height: 3px;
  background: #1e52fb;
  margin-top: 0.85rem;
  border-radius: 999px;
  opacity: 0.95;
}

.solutions-intro__text {
  font-family: "Montserrat", serif;
  font-size: 1.02rem;
  line-height: 1.95;
  margin: 0;
  max-width: 980px;
  color: #000000;
}

.solutions-intro__text strong {
  color: #1e52fb;
  font-weight: 800;
}

@media (max-width: 768px) {
  .solutions-intro__inner {
    padding: 0 1.5rem;
  }

  .solutions-intro__card {
    padding: 1.7rem 1.55rem;
    border-radius: 16px;
  }

  .solutions-intro__title {
    font-size: 26px;
  }

  .solutions-intro__text {
    font-size: 1rem;
    line-height: 1.85;
  }
}



/* ==========================
   Solutions Intro (“Cómo lo hacemos realidad”)
   Quitar borde azul + quitar el cuadro/sombra para que todo quede en un solo fondo
========================== */
.solutions-intro{
  background: #f6f7fb; /* mismo fondo suave (no blanco pizarrón) */
}

.solutions-intro__card{
  border-left: none !important;
  background: #f6f7fb !important; /* igual al fondo de la sección */
  border: none !important;
  box-shadow: none !important;
}

/* Por si el borde o caja está creado con pseudo-elementos */
.solutions-intro__card::before,
.solutions-intro__card::after{
  content: none !important;
  display: none !important;
}

.hero-logo{
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  display: grid;
  place-items: center;
  padding: 10px;
  overflow: hidden;
  flex: 0 0 auto;
}

.hero-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.navbar {

  margin: 0;                 /* ✅ remove the squeeze */
  padding: 0 0rem;
  margin-right: 24rem;



}

header nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.logo {
  padding: 20px 30px;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .navbar > li > a {
    white-space: normal;   /* ✅ allow wrap on small screens */
  }
}