@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

  /* CSS Reset and Global Styles */
  :root {
      /* Color Palette */
      --color-dark-blue: #005B93;
      /* Main Heading, Divisions BG */
      --color-medium-blue: #007bff;
      /* General blue, link hover */
      --color-teal: #20AF5B;
      /*  Email link */
      --color-orange: #FFBE0D;
      /* INTEGRA title */
      --color-white: #ffffff;
      --color-text-black: #000;
      --color-text-dark: #333333;
      /* Body text */
      --color-text-light: #f0f0f0;
      /* Text on dark BG */
      --color-border: #cccccc;
      /* Card borders */
  }

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      font-family: "Barlow", sans-serif;
      line-height: 1.6;
      color: var(--color-text-dark);
      background-color: var(--color-white);
      min-height: 100vh;
      display: flex;
      /* Helps align content wrapper */
      flex-direction: column;
  }

  /* --- Header / Logo Styling --- */
  .header {
      padding: 2rem 0rem;
      /* position: absolute;
            top: 0;
            left: 0; */
      z-index: 10;
  }

  .logo {
      align-items: center;
      position: relative;
      width: 100%;
      max-width: 250px;
  }

  .logo::before {
      content: "";
      display: block;
      position: static;
      width: 100%;
      padding-top: calc(52 / 250 * 100%);
  }

  .logo img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      object-fit: contain;
  }



  /* --- Main Page Layout (Desktop) --- */
  .page-wrapper {
      display: flex;
      flex-grow: 1;
  }

  .content-section {
      flex: 55%;
      /* Takes 50% width on desktop */
      padding: 5vh 5vw 6vh 7vw;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      /* Pushes contacts to the bottom */
      min-height: 100vh;
  }

  .divisions-section {
      flex: 45%;
      background-color: #0569A7;
      background-image: url(../images/right-bg.png);
      background-size: cover;
      color: var(--color-white);
      padding: 10rem 4rem 4rem;
      position: relative;
      overflow: hidden;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }

  /* --- Abstract Background Design for Divisions Section --- */
  .divisions-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* Simulating the layered geometric pattern */
      background:
          /* Darkest bottom layer */
          linear-gradient(20deg, rgba(0, 0, 0, 0) 60%, rgba(0, 50, 80, 0.4) 100%),
          /* Middle blue layer (slanted rectangle) */
          linear-gradient(15deg, rgba(10, 100, 150, 0) 30%, rgba(10, 100, 150, 0.2) 50%, rgba(10, 100, 150, 0.4) 70%),
          /* Lighter blue layer (slanted edge) */
          linear-gradient(90deg, transparent 50%, rgba(0, 130, 200, 0.1) 100%);
      opacity: 0.5;
      z-index: 1;
  }

  .divisions-content {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 547px;
      /* Constrain divisions content width */
  }

  /* --- Hero Content Styling --- */
  .hero-title {
      font-size: 88px;
      font-weight: 600;
      color: var(--color-dark-blue);
      line-height: 1.1;
      margin-bottom: 2rem;
  }

  .hero-description {
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: 17px;
      color: var(--color-text-black);
      max-width: 600px;
      margin-bottom: 2rem;
  }

  .email-contact {
      color: var(--color-text-black);
      font-size: 16px;
      font-weight: 500;
  }

  .email-contact a {
      font-size: 17px;
      color: var(--color-teal);
      text-decoration: underline;
      font-weight: 500;
  }

  .email-contact a:hover {
      text-decoration: underline;
  }

  /* --- Divisions Content Styling --- */
  .divisions-title {
      font-size: 50px;
      font-weight: 600;
      color: var(--color-white);
      margin-bottom: 20px;
  }


  .division-card {
      background-color: var(--color-white);
      color: var(--color-text-dark);
      border-radius: 0.5rem;
      padding: 32px;
      margin-bottom: 20px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }


  .division-name {
      font-size: 26px;
      line-height: 32px;
      font-weight: 600;
      margin-bottom: 5px; 
      color: #005E97;
  }

  .division-name.green {
      color: #57C281;
  }

  .division-name.integra {
      color: var(--color-orange);
  }

  .division-slogan {
      font-size: 20px;
      font-weight: 500;
      margin-bottom: 1rem;
      color: #000000;
  }

  .division-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0rem;
  }

  .division-tag {
      font-size: 18px;
      line-height: 22px;
      color: #393939;
      padding: 0 20px;
      border-right: 1px solid #98C3DE;
  }

  .division-tag:first-child {
      padding-left: 0px;
  }

  /* Remove border from last tag in the list */
  .division-tag:last-child {
      border-right: none;
  }

  /* --- Regional Contacts (Desktop Layout) --- */
  .regional-contacts {
      margin-top: 4rem;
  }

  .contact-list {
      display: flex;
      gap: 2rem;
      flex-wrap: wrap; 
       justify-content: space-between;
  }

  .contact-item {
      display: block;
  }

  .contact-item-title {
      color: #005B93;
      font-weight: 500;
      font-size: 18px;
      margin-bottom: 0.25rem;
      display: block;
  }

  .contact-item-name {
      display: block;
      font-weight: 400;
      font-size: 14px;
      color: #6F6F6F;
  }

  .contact-item-number {
      font-weight: 500;
      font-size: 16px;
      color: var(--color-text-dark);
      text-decoration: none;
  }

  .contact-item-sub-name {
      font-size: 0.8rem;
      color: #666;
      display: block;
  }


  .desktop-contacts-wrapper {
      border-top: #D3E5F1 1px solid;
      padding-top: 32px;

  }

  /* --- Footer (Mobile only in this view) --- */
  .footer {
      display: none;
      /* Hidden on desktop */
      background-color: var(--color-dark-blue);
      color: var(--color-text-light);
      text-align: center;
      padding: 14px 20px;
      font-size: 16px;
      width: 100%;
  }

    @media (max-width: 1500px) {
        .content-section { 
            padding: 3vh 3vw 3vh 4vw;
        }
        .divisions-section { 
             padding: 5rem 3rem 3rem;
        }
         .hero-title {
                 font-size: 58px;

      }
          .divisions-title {
        font-size: 42px;
        line-height: 46px; 
    }
      .regional-contacts {
            margin-top: 1.3rem;
        }

          .contact-list { 
       justify-content: flex-start; /* FIX */
  }

    }

  @media (max-width: 1400px) {
      .hero-title {
                 font-size: 54px;

      }
       .divisions-title {
        font-size: 32px;
        line-height: 36px; 
    }
  }

  /* --- Mobile Responsiveness (Max 1024px for tablet/mobile stacking) --- */
  @media (max-width: 1024px) {
      .logo {
          max-width: 167px;
      }

      .page-wrapper {
          flex-direction: column;
          /* Stack sections vertically */
      }

      .header {
          padding: 20px 20px;
          position: static;
          /* Make header part of the flow */
          border-bottom: #F2F2F2 1px solid;
      }

      .mob-hero-padding {
          padding: 30px 20px;
      }


      .content-section {
          padding: 0px;
          min-height: auto;
          /* Reset justify-content to standard flow */
          justify-content: flex-start;
      }

      .hero-title {
          font-size: 54px;
          margin-bottom: 1rem;
      }

      .hero-description {
          font-size: 16px;
          margin-bottom: 1rem;
      }

      .email-contact a {
          display: block;
      }

      .email-contact {
          font-weight: 400;
          margin-bottom: 10px;
      }

      /* Divisions Section Mobile Adjustments */
      .divisions-section {
          padding: 30px 20px;
          min-height: auto;
          align-items: flex-start;
      }

      .divisions-content {
          max-width: 100%;
      }


      .divisions-title {
          font-size: 26px;
          line-height: 26px;
          margin-bottom: 25px;
      }

      .division-name {
          font-size: 20px;
          line-height: 24px;
          margin-bottom: 5px;
      }

      .division-slogan {
          font-size: 17px;
          line-height: 18px;
      }

      .division-card {
          padding: 25px 20px;
          margin-bottom: 10px;
      }

      .division-card:last-child {
          margin-bottom: 0;
      }

      .division-tags {
          gap: 0rem;
      }

      .division-tag {
          font-size: 14px;
          line-height: 17px;
          border-right: 1px solid var(--color-border);
          padding: 0 10px;

      }

      /* Fix for mobile layout which removes the horizontal contact section */
      .division-tags .division-tag:last-child {
          border-right: none;
      }

      /* Separate Regional Contacts Section for Mobile */
      .regional-contacts {
          margin-top: 0;
          padding: 30px 20px;
      }

      .regional-contacts-title {
          font-size: 26px;
          font-weight: 600;
          color: var(--color-text-black);
          margin-bottom: 1.5rem;
      }

      .contact-list {
          /* flex-direction: column; */
          /* Stack contacts vertically */
          gap: 20px 20px;

      }

      .contact-list .contact-item {
          width: calc(50% - 20px);
          border-bottom: #E6E6E6 1px solid;
          padding-bottom: 10px;
      }

      .contact-item-title {
          font-size: 18px;
          font-weight: 500;
      }

      .contact-item-name,
      .contact-item-number {
          font-size: 16px;
          font-weight: 400;
      }

      .contact-item-number {
          font-weight: 500;
          font-size: 18px;
      }

      .contact-item-sub-name {
          font-size: 0.9rem;
      }

      /* Show Footer on Mobile */
      .footer {
          display: block;
      }

      /* Hide desktop contact list wrapper */
      .desktop-contacts-wrapper {
          display: none;
      }
  }

  /* Hide Mobile Contact Title on Desktop */
  @media (min-width: 1025px) {
      .mobile-contacts-wrapper {
          display: none;
      }

      .regional-contacts-title {
          display: none;
      }

  }

   @media (hover: hover) and (pointer: fine) {

.contact-item-number:hover{
    color: var(--color-teal);
}

 }