:root {
    /* H1 Sizes */
    --font-size-h1-giant: 7.5rem;
    --font-size-h1-big: 7rem;
    --font-size-h1-medium: 4rem;
    --font-size-h1: 2.5rem;
    --font-size-h1-tablet: 2rem;
    --font-size-h1-mobile: 1.75rem;
  
    /* H2 Sizes */
    --font-size-h2-giant: 7rem;
    --font-size-h2-big: 6rem;
    --font-size-h2-medium: 3.5rem;
    --font-size-h2: 2rem;
    --font-size-h2-tablet: 1.75rem;
    --font-size-h2-mobile: 1.5rem;
  
    /* H3 Sizes */
    --font-size-h3-giant: 6rem;
    --font-size-h3-big: 5rem;
    --font-size-h3-medium: 2.25rem;
    --font-size-h3: 1.5rem;
    --font-size-h3-tablet: 1.375rem;
    --font-size-h3-mobile: 1.25rem;
  
    /* Subtext Sizes */
    --font-size-subtext-giant: 4.8rem;
    --font-size-subtext-big: 3.5rem;
    --font-size-subtext-medium: 2.2rem;
    --font-size-subtext: 1.25rem;
    --font-size-subtext-tablet: 1.125rem;
    --font-size-subtext-mobile: 1rem;
  
    /* Body Text Sizes */
    --font-size-body-giant: 4rem;
    --font-size-body-big: 3.8rem;
    --font-size-body-medium: 2rem;
    --font-size-body: 1rem;
    --font-size-body-tablet: 0.9375rem;
    --font-size-body-mobile: 0.875rem;
  
    /* Small Text Sizes */
    --font-size-small-giant: 2.8rem;
    --font-size-small-big: 2.5rem;
    --font-size-small-medium: 1.4rem;
    --font-size-small: 0.875rem;
    --font-size-small-tablet: 0.8125rem;
    --font-size-small-mobile: 0.75rem;
  
    /*Index specific*/
    --font-size-h1-plus: 6rem;
    --font-size-h2-plus: 5rem;
    --font-size-h3-plus: 4.2rem;
    --font-size-subtext-plus: 3rem;
    --font-size-body-plus: 2.9rem;
    --font-size-small-plus: 1.9rem;
  }
  
  body.christ-page {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      width: 100%;
  }
  
  .page-title {
      background: #003366;
      color: #fff;
      padding: 20px;
      text-align: center;
      font-size: var(--font-size-h2);
      font-weight: bold;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .christ-container {
      width: 80%;
      margin: 20px auto;
      padding: 20px;
      border-radius: 10px;
  }
  
  .christ-container h2 {
      color: #003366;
      font-size: var(--font-size-h2);
      font-variant: small-caps;
      margin-top: 20px;
      padding-bottom: 5px;
      border-bottom: 1px solid rgba(0, 51, 102, 0.2);
  }
  
  .christ-container h3 {
        color: #003366;
        font-size: var(--font-size-h3);
        font-variant: small-caps;
        margin-top: 30px; 
        margin-bottom: 10px; 
        padding-bottom: 5px;
        border-bottom: 1px solid rgba(0, 51, 102, 0.2);
    }
    .christ-container p {
        font-size: var(--font-size-body);
        line-height: 1.6;
        color: #555;
        text-align: justify;
        margin-bottom: 15px; 
    }
    .christ-container ul {
        padding-left: 20px;
        list-style-type: square;
        color: #555;
    }

    .christ-container ul li {
        margin-bottom: 10px;
        font-size: var(--font-size-body); /* Default size */
    }

    .christ-container strong {
        color: #003366;
    }
  
    .map-container {
        width: 100%;
        max-width: 800px;
        margin: 20px auto;
        padding: 10px;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
        text-align: center;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }
  
    .map-container iframe {
        width: 100%;
        height: 300px;
        border-radius: 6px;
        border: none;
    }
    
  /* Responsive Adjustments */
  
  /* Giant screens */
  @media screen and (min-width: 3100px) {
      .page-title {
          font-size: var(--font-size-h2-giant);
      }
  
      .christ-container h2 {
          font-size: var(--font-size-h2-giant);
      }
  
      .christ-container h3 {
          font-size: var(--font-size-h3-giant);
          margin-top: 50px;
          margin-bottom: 20px;
      }
  
      .christ-container p {
          font-size: var(--font-size-body-giant);
          margin-bottom: 25px;
      }

      .christ-container ul li {
          font-size: var(--font-size-body-giant);
          margin-bottom: 25px;

       }
  
       .map-container {
        max-width: 2800px;
        height: 1200px;
        }

        .map-container iframe {
        height: 1200px;
        border-radius: 26px;
    }
  }
  
  /* Big screens */
  @media screen and (min-width: 2501px) and (max-width: 3100px) {
      .page-title {
          font-size: var(--font-size-h2-plus);
      }
  
      .christ-container h2 {
          font-size: var(--font-size-h2-plus);
      }
  
      .christ-container h3 {
          font-size: var(--font-size-h3-plus);
          margin-top: 45px;
        margin-bottom: 18px;
      }
  
      .christ-container p {
          font-size: var(--font-size-body-plus);
          margin-bottom: 22px;
      }

      .christ-container ul li {
        font-size: var(--font-size-body-plus);
        margin-bottom: 22px;
      }
  
      .map-container {
          max-width: 2000px;
          height: 800px;
      }

      .map-container iframe {
        height: 800px;
        border-radius: 6px;
      }
  }
  
  /* Medium screens */
  @media screen and (min-width: 1800px) and (max-width: 2500px) {
      .page-title {
          font-size: var(--font-size-h2-medium);
      }
  
      .christ-container h2 {
          font-size: var(--font-size-h2-medium);
      }
  
      .christ-container h3 {
          font-size: var(--font-size-h3-medium);
          margin-top: 40px;
        margin-bottom: 15px;
      }
  
      .christ-container p {
          font-size: var(--font-size-body-medium);
          margin-bottom: 20px;
      }

      .christ-container ul li {
        font-size: var(--font-size-body-medium);
        margin-bottom: 20px;
      }
  
    .map-container {
        max-width: 1800px;
        height: 600px;
    }

    .map-container iframe {
      height: 600px;
      border-radius: 6px;
     }
  }
  
  /* Tablet screens */
  @media (max-width: 768px) {
      .page-title {
          font-size: var(--font-size-h2-tablet);
      }
  
      .christ-container h2 {
          font-size: var(--font-size-h2-tablet);
      }
  
      .christ-container h3 {
          font-size: var(--font-size-h3-tablet);
      }
  
      .christ-container p {
          font-size: var(--font-size-body-tablet);
      }

      .christ-container ul li {
        font-size: var(--font-size-body-tablet);
      }
  
      .map-container {
          max-width: 90%;
      }
  }
  
  /* Mobile screens */
  @media (max-width: 480px) {
      .page-title {
          font-size: var(--font-size-h2-mobile);
      }
  
      .christ-container h2 {
          font-size: var(--font-size-h2-mobile);
      }
  
      .christ-container h3 {
          font-size: var(--font-size-h3-mobile);
      }
  
      .christ-container p {
          font-size: var(--font-size-body-mobile);
      }

      .christ-container ul li {
        font-size: var(--font-size-body-mobile);
      }
  
      .map-container {
          max-width: 100%;
          padding: 5px;
      }
  
      .map-container iframe {
          height: 200px;
      }

}

  @media screen and (min-width: 1800px) and (max-width: 2500px) {
      .page-title {
          font-size: 3rem !important;
      }
  
      .christ-container h2 {
          font-size: 1.5rem !important;
      }
  
      .christ-container h3 {
          font-size: 1.8rem !important;
      }
  
      .christ-container p {
          font-size: 1.5rem;
      }

      .christ-container ul li {
        font-size: 1.5rem !important;
      }

  }