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

   GP SERVICES PAGE STYLES

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



/* CSS Variables */

:root {

    --gp-color-beige: #E6E1DA;

    --gp-color-tan: #BAB0A1;

    --gp-color-light-tan: #D6CFC2;

    --gp-color-teal: #56C2C2;

    --gp-color-dark-teal: #1B7895;

    --gp-color-white: #FFFFFF;

    --gp-color-gray: #6C6C6C;

    --gp-color-dark-gray: #3B3B3B;

    --gp-color-text: #1D1D1D;

    --gp-color-light-gray: #7A8087;

    --gp-color-bg-light: #F8F7F5;

    --gp-color-bg-explore: #F5F3EF;

    

    --gp-font-title: 38px;

    --gp-font-h2: 32px;

    --gp-font-h3: 24px;

    --gp-font-body: 16px;

    --gp-font-small: 14px;

    

    --gp-radius: 12px;

    --gp-radius-sm: 10px;

    --gp-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);

    --gp-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);

  }

  

 

  

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

     HERO BANNER SECTION

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

  .gp-hero-banner {

    position: relative;

    min-height: 590px !important;

    display: flex;

    align-items: center;

    justify-content: center;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    overflow: hidden;

    text-align: center;

    color: var(--gp-color-white);

  }

  

  .gp-hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.4);

    z-index: 1;

  }

  

  .gp-hero-content {

    position: relative;

    z-index: 2;

    max-width: 1000px;

    margin: 0 auto;

    padding: 0 20px;

  }

  

  .gp-hero-title {/* font-family: "Proxima Nova", "Nunito Sans", sans-serif; */font-weight: 700;font-size: 46px;line-height: 1.2;margin: 0 0 16px;color: var(--gp-color-white);}

  

  .gp-breadcrumb {

    font-family: "Nunito Sans", sans-serif;

    font-weight: 400;

    font-size: 14px;

    line-height: 1.8;

    opacity: 0.9;

    margin-top: 12px;

  }





  

  .gp-breadcrumb a {

    color: var(--gp-color-white);

    text-decoration: none;

    transition: opacity 0.3s ease;

  }

  

  .gp-breadcrumb a:hover {

    opacity: 0.8;

  }

  

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

     INFO SECTION (CARDS STACK)

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

  .gp-info-section {

    padding: 64px 0 48px;

    background: var(--gp-color-white);

  }

  

  .gp-section-title {/* font-family: "Proxima Nova", "Nunito Sans", sans-serif; */font-weight: 700;font-size: var(--gp-font-title);line-height: 1.26;color: var(--gp-color-dark-teal);text-align: center;margin: 0 0 40px;}

  

  .gp-info-stack {

    display: grid;

    gap: 16px;

    max-width: 800px;

    margin: 0 auto;

  }

  

  .gp-info-card {

    background: var(--gp-color-bg-light);

    border-radius: var(--gp-radius-sm);

    padding: 20px 24px;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

  }

  

  

  

  .gp-info-card h3 {/* font-family: "Proxima Nova", "Nunito Sans", sans-serif; */font-weight: 700;font-size: 21px;line-height: 1.5;color: var(--gp-color-dark-teal);margin: 0 0 10px;}

  

  .gp-info-card p {

    font-family: "Nunito Sans", sans-serif;

    font-weight: 400;

    font-size: var(--gp-font-small);

    line-height: 1.6;

    color: var(--gp-color-gray);

    margin: 0;

  }

  

  .gp-info-card ul {

    margin: 12px 0 0;

    padding: 0 0 0 20px;

    list-style-type: disc;

  }

  

  .gp-info-card li {

    font-family: "Nunito Sans", sans-serif;

    font-weight: 400;

    font-size: var(--gp-font-small);

    line-height: 1.6;

    color: var(--gp-color-gray);

    margin: 8px 0;

  }

  





  ::marker {

    color: #FABAAB;

  }



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

     TABLE SECTION WITH IMAGE OVERLAY

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

  .gp-table-hero {

    position: relative;

    min-height: 700px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    overflow: hidden;

    margin: 64px 0 0;

    color: var(--gp-color-white);

  }

  

  .gp-table-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(0deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45));

    z-index: 1;

  }

  

  .gp-table-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1000px;

    margin: 0 auto;

    padding: 60px 20px;

  }

  

  .gp-table-content h2 {/* font-family: "Proxima Nova", "Nunito Sans", sans-serif; */font-weight: 700;font-size: var(--gp-font-title);line-height: 1.26;text-align: center;margin: 0 0 40px;color: var(--gp-color-white);}

  

  .gp-table {

    width: 100%;

    max-width: 860px;

    margin: 0 auto;

    border-collapse: collapse;

    backdrop-filter: saturate(120%) blur(0.3px);

  }

  

  .gp-table thead th {

    font-family: "Proxima Nova", "Nunito Sans", sans-serif;

    font-weight: 700;

    font-size: var(--gp-font-small);

    text-align: left;

    padding: 16px 18px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.35);

    opacity: 0.9;

    color: var(--gp-color-white);

  }

  

  .gp-table tbody td {

    font-family: "Nunito Sans", sans-serif;

    font-weight: 400;

    font-size: 15px;

    line-height: 1.73;

    padding: 16px 18px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.15);

    vertical-align: middle;

    color: var(--gp-color-white);

  }

  

  .gp-table tbody td:first-child {

    font-weight: 700;

  }

  

  .gp-table a {

    color: var(--gp-color-white);

    text-decoration: none;

    position: relative;

    padding-right: 20px;

    transition: opacity 0.3s ease;

    display: inline-block;

  }

  

  .gp-table a::after {

    content: "›";

    position: absolute;

    right: 0;

    top: 0;

    font-weight: 700;

    font-size: 18px;

  }

  

  .gp-table a:hover {

    opacity: 0.8;

  }

  

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

     EXPLORE MORE SECTION

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

  .gp-explore-section {

   

    padding: 80px 0 90px;

    position: relative;
	  background: url('../images/icons/other-pattern.svg') no-repeat var(--gp-color-bg-explore);
    background-position: right bottom;
    background-size: 506px;
    background-repeat: no-repeat;

  }

  

  .gp-explore-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 32px;/* max-width: 1000px; */margin: 48px auto 0;}

  

  .gp-explore-card {background: var(--gp-color-white);border-radius: 8px;box-shadow: var(--gp-shadow-card);padding: 60px 40px;text-align: center;transition: transform 0.3s ease, box-shadow 0.3s ease;}

  

 

  

  .gp-explore-icon {

    width: 87px;

    height: 87px;

    border-radius: 50%;

    background: var(--gp-color-teal);

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 24px;

    overflow: hidden;

  }

  

  .gp-explore-icon img {

    width: 50px;

    height: 50px;

    object-fit: contain;

  }

  

  .gp-explore-card h3 {/* font-family: "Proxima Nova", "Nunito Sans", sans-serif; *//* font-weight: 700; */font-size: 22px;line-height: 1.4;color: var(--gp-color-dark-teal);margin: 0 0 12px;}

  

  .gp-explore-card p {/* font-family: "Nunito Sans", sans-serif; *//* font-weight: 400; *//* font-size: 15px; */line-height: 1.6;color: var(--gp-color-light-gray);margin: 0;}

  

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

     RESPONSIVE STYLES - TABLET

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

  @media (max-width: 1024px) {

    .gp-table {

      max-width: 92%;

    }

    

    .gp-explore-grid {

      grid-template-columns: repeat(2, 1fr);

      gap: 24px;

    }

  }

  

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

     RESPONSIVE STYLES - TABLET (768px)

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

  @media (max-width: 768px) {

    /* Hero Banner */

    .gp-hero-banner {

      min-height: 450px;

    }

    

    .gp-hero-title {

      font-size: 40px;

      line-height: 1.2;

    }

    

    .gp-breadcrumb {

      font-size: 13px;

    }

    

    /* Section Titles */

    .gp-section-title {

      font-size: 32px;

      margin-bottom: 32px;

    }

    

    /* Info Section */

    .gp-info-section {

      padding: 50px 0 40px;

    }

    

    .gp-info-card {

      padding: 18px 20px;

    }

    

    .gp-info-card h3 {

      font-size: 19px;

    }

    

    /* Table Section */

    .gp-table-hero {

      min-height: auto;

      padding: 60px 0;

    }

    

    .gp-table-content {

      padding: 40px 20px;

    }

    

    .gp-table-content h2 {

      font-size: 32px;

      margin-bottom: 32px;

    }

    

    /* Explore Section */

    .gp-explore-section {

      padding: 60px 0 70px;

    }

    

    .gp-explore-grid {

      grid-template-columns: 1fr;

      gap: 20px;

      margin-top: 32px;

    }

  }

  

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

     RESPONSIVE STYLES - MOBILE (640px)

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

  @media (max-width: 640px) {

    /* Hero Banner */

    .gp-hero-banner {

      min-height: 380px;

    }

    

    .gp-hero-title {

      font-size: 32px;

      line-height: 1.25;

      margin-bottom: 12px;

    }

    

    .gp-breadcrumb {

      font-size: 12px;

    }

    

    /* Section Titles */

    .gp-section-title {

      font-size: 28px;

      line-height: 1.35;

      margin-bottom: 28px;

    }

    

    /* Info Section */

    .gp-info-section {

      padding: 40px 0 32px;

    }

    

    .gp-info-stack {

      gap: 14px;

    }

    

    .gp-info-card {

      padding: 16px 18px;

    }

    

    .gp-info-card h3 {

      font-size: 18px;

      margin-bottom: 8px;

    }

    

    .gp-info-card p,

    .gp-info-card li {

      font-size: 14px;

    }

    

    .gp-info-card ul {

      padding-left: 18px;

      margin-top: 10px;

    }

    

    /* Table Section - Mobile View */

    .gp-table-hero {

      padding: 48px 0;

    }

    

    .gp-table-content {

      padding: 30px 16px;

    }

    

    .gp-table-content h2 {

      font-size: 26px;

      margin-bottom: 28px;

    }

    

    /* Hide table header on mobile */

    .gp-table thead {

      display: none;

    }

    

    /* Convert table to cards on mobile */

    .gp-table,

    .gp-table tbody,

    .gp-table tr,

    .gp-table td {

      display: block;

      width: 100%;

    }

    

    .gp-table tr {

      background: rgba(0, 0, 0, 0.15);

      margin: 12px 0;

      border-radius: var(--gp-radius-sm);

      padding: 4px;

    }

    

    .gp-table td {

      border: none;

      padding: 12px 16px;

      text-align: left;

    }

    

    .gp-table td::before {

      content: attr(data-label);

      display: block;

      font-family: "Proxima Nova", "Nunito Sans", sans-serif;

      font-weight: 700;

      font-size: 12px;

      opacity: 0.8;

      margin-bottom: 4px;

      text-transform: uppercase;

      letter-spacing: 0.5px;

    }

    

    .gp-table a {

      display: inline-block;

      margin-top: 4px;

    }

    

    /* Explore Section */

    .gp-explore-section {

      padding: 50px 0 60px;

    }

    

    .gp-explore-grid {

      margin-top: 28px;

      gap: 18px;

    }

    

    .gp-explore-card {

      padding: 28px 24px 32px;

    }

    

    .gp-explore-icon {

      width: 75px;

      height: 75px;

      margin-bottom: 20px;

    }

    

    .gp-explore-icon img {

      width: 42px;

      height: 42px;

    }

    

    .gp-explore-card h3 {

      font-size: 18px;

      margin-bottom: 10px;

    }

    

    .gp-explore-card p {

      font-size: 14px;

    }

  }

  

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

     RESPONSIVE STYLES - SMALL MOBILE (480px)

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

  @media (max-width: 480px) {

    .gp-hero-banner {

      min-height: 320px;

    }

    

    .gp-hero-title {

      font-size: 28px;

      line-height: 1.3;

    }

    

    .gp-section-title {

      font-size: 24px;

      line-height: 1.4;

    }

    

    .gp-info-card h3 {

      font-size: 17px;

    }

    

    .gp-table-content h2 {

      font-size: 24px;

    }

    

    .gp-table td {

      padding: 10px 14px;

      font-size: 14px;

    }

  }

  

  /* Ensure container doesn't overflow */

 

  

  /* Prevent images from overflowing */

  .gp-info-card img,

  .gp-explore-card img {

    max-width: 100%;

    height: auto;

  }