/* Custom padding class between Bootstrap's p-4 (1.5rem) and p-5 (3rem) */
.p-4-5 {
    padding: 2.25rem !important; /* Halfway between 1.5rem and 3rem */
  }
  
  /* Directional variants */
  .pt-4-5 {
    padding-top: 2.25rem !important;
  }
  
  .pr-4-5 {
    padding-right: 2.25rem !important;
  }
  
  .pb-4-5 {
    padding-bottom: 2.25rem !important;
  }
  
  .pl-4-5 {
    padding-left: 2.25rem !important;
  }
  
  .px-4-5 {
    padding-left: 2.25rem !important;
    padding-right: 2.25rem !important;
  }
  
  .py-4-5 {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }
  
  /* Responsive variants (for different breakpoints) */
  @media (min-width: 576px) {
    .p-sm-4-5 {
      padding: 2.25rem !important;
    }
    /* Add other directional variants as needed */
  }
  
  @media (min-width: 768px) {
    .p-md-4-5 {
      padding: 2.25rem !important;
    }
    /* Add other directional variants as needed */
  }
  
  @media (min-width: 992px) {
    .p-lg-4-5 {
      padding: 2.25rem !important;
    }
    /* Add other directional variants as needed */
  }
  
  @media (min-width: 1200px) {
    .p-xl-4-5 {
      padding: 2.25rem !important;
    }
    /* Add other directional variants as needed */
  }

  @media (min-width: 1400px) {
    .p-xxl-4-5 {
      padding: 2.25rem !important;
    }
    /* Add other directional variants as needed */
  }

/* Base Extra Gutter Spacing */
.g-6 {
    --bs-gutter-x: 4rem;
    --bs-gutter-y: 4rem;
}

.g-7 {
    --bs-gutter-x: 5rem;
    --bs-gutter-y: 5rem;
}

.g-8 {
    --bs-gutter-x: 6rem;
    --bs-gutter-y: 6rem;
}

.g-9 {
    --bs-gutter-x: 8rem;
    --bs-gutter-y: 8rem;
}

.g-10 {
    --bs-gutter-x: 10rem;
    --bs-gutter-y: 10rem;
}

/* Base Horizontal-only Gutters */
.gx-6 {
    --bs-gutter-x: 4rem;
}

.gx-7 {
    --bs-gutter-x: 5rem;
}

.gx-8 {
    --bs-gutter-x: 6rem;
}

.gx-9 {
    --bs-gutter-x: 8rem;
}

.gx-10 {
    --bs-gutter-x: 10rem;
}

/* Base Vertical-only Gutters */
.gy-6 {
    --bs-gutter-y: 4rem;
}

.gy-7 {
    --bs-gutter-y: 5rem;
}

.gy-8 {
    --bs-gutter-y: 6rem;
}

.gy-9 {
    --bs-gutter-y: 8rem;
}

.gy-10 {
    --bs-gutter-y: 10rem;
}

/* Small (sm) breakpoint */
@media (min-width: 576px) {
    .g-sm-6 {
        --bs-gutter-x: 4rem;
        --bs-gutter-y: 4rem;
    }

    .g-sm-7 {
        --bs-gutter-x: 5rem;
        --bs-gutter-y: 5rem;
    }

    .g-sm-8 {
        --bs-gutter-x: 6rem;
        --bs-gutter-y: 6rem;
    }

    .g-sm-9 {
        --bs-gutter-x: 8rem;
        --bs-gutter-y: 8rem;
    }

    .g-sm-10 {
        --bs-gutter-x: 10rem;
        --bs-gutter-y: 10rem;
    }

    .gx-sm-6 {
        --bs-gutter-x: 4rem;
    }

    .gx-sm-7 {
        --bs-gutter-x: 5rem;
    }

    .gx-sm-8 {
        --bs-gutter-x: 6rem;
    }

    .gx-sm-9 {
        --bs-gutter-x: 8rem;
    }

    .gx-sm-10 {
        --bs-gutter-x: 10rem;
    }

    .gy-sm-6 {
        --bs-gutter-y: 4rem;
    }

    .gy-sm-7 {
        --bs-gutter-y: 5rem;
    }

    .gy-sm-8 {
        --bs-gutter-y: 6rem;
    }

    .gy-sm-9 {
        --bs-gutter-y: 8rem;
    }

    .gy-sm-10 {
        --bs-gutter-y: 10rem;
    }
}

/* Medium (md) breakpoint */
@media (min-width: 768px) {
    .g-md-6 {
        --bs-gutter-x: 4rem;
        --bs-gutter-y: 4rem;
    }

    .g-md-7 {
        --bs-gutter-x: 5rem;
        --bs-gutter-y: 5rem;
    }

    .g-md-8 {
        --bs-gutter-x: 6rem;
        --bs-gutter-y: 6rem;
    }

    .g-md-9 {
        --bs-gutter-x: 8rem;
        --bs-gutter-y: 8rem;
    }

    .g-md-10 {
        --bs-gutter-x: 10rem;
        --bs-gutter-y: 10rem;
    }

    .gx-md-6 {
        --bs-gutter-x: 4rem;
    }

    .gx-md-7 {
        --bs-gutter-x: 5rem;
    }

    .gx-md-8 {
        --bs-gutter-x: 6rem;
    }

    .gx-md-9 {
        --bs-gutter-x: 8rem;
    }

    .gx-md-10 {
        --bs-gutter-x: 10rem;
    }

    .gy-md-6 {
        --bs-gutter-y: 4rem;
    }

    .gy-md-7 {
        --bs-gutter-y: 5rem;
    }

    .gy-md-8 {
        --bs-gutter-y: 6rem;
    }

    .gy-md-9 {
        --bs-gutter-y: 8rem;
    }

    .gy-md-10 {
        --bs-gutter-y: 10rem;
    }
}

/* Large (lg) breakpoint */
@media (min-width: 992px) {
    .g-lg-6 {
        --bs-gutter-x: 4rem;
        --bs-gutter-y: 4rem;
    }

    .g-lg-7 {
        --bs-gutter-x: 5rem;
        --bs-gutter-y: 5rem;
    }

    .g-lg-8 {
        --bs-gutter-x: 6rem;
        --bs-gutter-y: 6rem;
    }

    .g-lg-9 {
        --bs-gutter-x: 8rem;
        --bs-gutter-y: 8rem;
    }

    .g-lg-10 {
        --bs-gutter-x: 10rem;
        --bs-gutter-y: 10rem;
    }

    .gx-lg-6 {
        --bs-gutter-x: 4rem;
    }

    .gx-lg-7 {
        --bs-gutter-x: 5rem;
    }

    .gx-lg-8 {
        --bs-gutter-x: 6rem;
    }

    .gx-lg-9 {
        --bs-gutter-x: 8rem;
    }

    .gx-lg-10 {
        --bs-gutter-x: 10rem;
    }

    .gy-lg-6 {
        --bs-gutter-y: 4rem;
    }

    .gy-lg-7 {
        --bs-gutter-y: 5rem;
    }

    .gy-lg-8 {
        --bs-gutter-y: 6rem;
    }

    .gy-lg-9 {
        --bs-gutter-y: 8rem;
    }

    .gy-lg-10 {
        --bs-gutter-y: 10rem;
    }
}

/* Extra Large (xl) breakpoint */
@media (min-width: 1200px) {
    .g-xl-6 {
        --bs-gutter-x: 4rem;
        --bs-gutter-y: 4rem;
    }

    .g-xl-7 {
        --bs-gutter-x: 5rem;
        --bs-gutter-y: 5rem;
    }

    .g-xl-8 {
        --bs-gutter-x: 6rem;
        --bs-gutter-y: 6rem;
    }

    .g-xl-9 {
        --bs-gutter-x: 8rem;
        --bs-gutter-y: 8rem;
    }

    .g-xl-10 {
        --bs-gutter-x: 10rem;
        --bs-gutter-y: 10rem;
    }

    .gx-xl-6 {
        --bs-gutter-x: 4rem;
    }

    .gx-xl-7 {
        --bs-gutter-x: 5rem;
    }

    .gx-xl-8 {
        --bs-gutter-x: 6rem;
    }

    .gx-xl-9 {
        --bs-gutter-x: 8rem;
    }

    .gx-xl-10 {
        --bs-gutter-x: 10rem;
    }

    .gy-xl-6 {
        --bs-gutter-y: 4rem;
    }

    .gy-xl-7 {
        --bs-gutter-y: 5rem;
    }

    .gy-xl-8 {
        --bs-gutter-y: 6rem;
    }

    .gy-xl-9 {
        --bs-gutter-y: 8rem;
    }

    .gy-xl-10 {
        --bs-gutter-y: 10rem;
    }
}

/* Extra Extra Large (xxl) breakpoint */
@media (min-width: 1400px) {
    .g-xxl-6 {
        --bs-gutter-x: 4rem;
        --bs-gutter-y: 4rem;
    }

    .g-xxl-7 {
        --bs-gutter-x: 5rem;
        --bs-gutter-y: 5rem;
    }

    .g-xxl-8 {
        --bs-gutter-x: 6rem;
        --bs-gutter-y: 6rem;
    }

    .g-xxl-9 {
        --bs-gutter-x: 8rem;
        --bs-gutter-y: 8rem;
    }

    .g-xxl-10 {
        --bs-gutter-x: 10rem;
        --bs-gutter-y: 10rem;
    }

    .gx-xxl-6 {
        --bs-gutter-x: 4rem;
    }

    .gx-xxl-7 {
        --bs-gutter-x: 5rem;
    }

    .gx-xxl-8 {
        --bs-gutter-x: 6rem;
    }

    .gx-xxl-9 {
        --bs-gutter-x: 8rem;
    }

    .gx-xxl-10 {
        --bs-gutter-x: 10rem;
    }

    .gy-xxl-6 {
        --bs-gutter-y: 4rem;
    }

    .gy-xxl-7 {
        --bs-gutter-y: 5rem;
    }

    .gy-xxl-8 {
        --bs-gutter-y: 6rem;
    }

    .gy-xxl-9 {
        --bs-gutter-y: 8rem;
    }

    .gy-xxl-10 {
        --bs-gutter-y: 10rem;
    }
}

/* Custom Containers */

.wide-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    width: 100%;
    max-width: none;
  
    @media (min-width:576px) {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  
    @media (min-width:1200px) {
      padding-left: 3rem;
      padding-right: 3rem;
    }
    @media (min-width:1440px) {
        padding-left: 4.25rem;
        padding-right: 4.25rem;
      }
      @media (min-width:1600px) {
        padding-left: 5rem;
        padding-right: 5rem;
      }
  }

.container-small {
    padding-left: 15px;
    padding-right: 15px;
}

    .container-small:before, .container-small:after {
        content: " ";
        display: table;
        clear: both;
    }

@media(min-width: 1200px) {
    .container-small {
        width: 860px;
        margin-left: auto;
        margin-right: auto;
    }
}

.container-large {
    padding-left: 15px;
    padding-right: 15px;
}

    .container-large:before, .container-large:after {
        content: " ";
        display: table;
        clear: both;
    }

@media(min-width: 1600px) {
    .container-large {
        max-width: 1500px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media(min-width: 1800px) {
    .container-large {
        max-width: 1700px;
    }
}