.container.fillRight {
    --maxWidth: 1320px;
    --origMargin: calc((100vw - min(var(--maxWidth),100%))/2);
    max-width: calc(100% - var(--origMargin));
    margin-left: var(--origMargin);
    margin-right: 0;
}
.container.fillLeft {
    --maxWidth: 1320px;
    --origMargin: calc((100vw - min(var(--maxWidth),100%))/2);
    max-width: calc(100% - var(--origMargin));
    margin-right: var(--origMargin);
    margin-left: 0;
}



@media (min-width: 576px) {
    .container.fillRight,
    .container.fillLeft {
        --maxWidth:540px;
    }
}

@media (min-width: 768px) {
    .container.fillRight,
    .container.fillLeft {
        --maxWidth:720px
    }
}

@media (min-width: 992px) {
    .container.fillRight,
    .container.fillLeft {
        --maxWidth:960px
    }
}

@media (min-width: 1200px) {
    .container.fillRight,
    .container.fillLeft {
        --maxWidth:1140px
    }
}

@media (min-width: 1400px) {
    .container.fillRight,
    .container.fillLeft {
        --maxWidth:1320px
    }
}


/* Custom CSS to extend padding top classes */

/* Custom CSS to extend margin and padding classes */

/* Padding */
.p-6 {
  padding: 4.5rem !important;
}
.p-7 {
  padding: 5rem !important;
}
.p-8 {
  padding: 6rem !important;
}
.p-9 {
  padding: 7rem !important;
}
.p-10 {
  padding: 8rem !important;
}

/* Padding Top */
.pt-6 {
  padding-top: 4.5rem !important;
}
.pt-7 {
  padding-top: 5rem !important;
}
.pt-8 {
  padding-top: 6rem !important;
}
.pt-9 {
  padding-top: 7rem !important;
}
.pt-10 {
  padding-top: 8rem !important;
}

/* Padding Bottom */
.pb-6 {
  padding-bottom: 4.5rem !important;
}
.pb-7 {
  padding-bottom: 5rem !important;
}
.pb-8 {
  padding-bottom: 6rem !important;
}
.pb-9 {
  padding-bottom: 7rem !important;
}
.pb-10 {
  padding-bottom: 8rem !important;
}

/* Padding Left */
.pl-6 {
  padding-left: 4.5rem !important;
}
.pl-7 {
  padding-left: 5rem !important;
}
.pl-8 {
  padding-left: 6rem !important;
}
.pl-9 {
  padding-left: 7rem !important;
}
.pl-10 {
  padding-left: 8rem !important;
}

/* Padding Right */
.pr-6 {
  padding-right: 4.5rem !important;
}
.pr-7 {
  padding-right: 5rem !important;
}
.pr-8 {
  padding-right: 6rem !important;
}
.pr-9 {
  padding-right: 7rem !important;
}
.pr-10 {
  padding-right: 8rem !important;
}

/* Margin */
.m-6 {
  margin: 4.5rem !important;
}
.m-7 {
  margin: 5rem !important;
}
.m-8 {
  margin: 6rem !important;
}
.m-9 {
  margin: 7rem !important;
}
.m-10 {
  margin: 8rem !important;
}

/* Margin Top */
.mt-6 {
  margin-top: 4.5rem !important;
}
.mt-7 {
  margin-top: 5rem !important;
}
.mt-8 {
  margin-top: 6rem !important;
}
.mt-9 {
  margin-top: 7rem !important;
}
.mt-10 {
  margin-top: 8rem !important;
}

/* Margin Bottom */
.mb-6 {
  margin-bottom: 4.5rem !important;
}
.mb-7 {
  margin-bottom: 5rem !important;
}
.mb-8 {
  margin-bottom: 6rem !important;
}
.mb-9 {
  margin-bottom: 7rem !important;
}
.mb-10 {
  margin-bottom: 8rem !important;
}

/* Margin Left */
.ml-6 {
  margin-left: 4.5rem !important;
}
.ml-7 {
  margin-left: 5rem !important;
}
.ml-8 {
  margin-left: 6rem !important;
}
.ml-9 {
  margin-left: 7rem !important;
}
.ml-10 {
  margin-left: 8rem !important;
}

/* Margin Right */
.mr-6 {
  margin-right: 4.5rem !important;
}
.mr-7 {
  margin-right: 5rem !important;
}
.mr-8 {
  margin-right: 6rem !important;
}
.mr-9 {
  margin-right: 7rem !important;
}
.mr-10 {
  margin-right: 8rem !important;
}

/* Custom CSS to extend padding and margin classes */

/* Padding Y */
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
.py-7 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
.py-8 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}
.py-9 {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}
.py-10 {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}

/* Margin Y */
.my-6 {
  margin-top: 4.5rem !important;
  margin-bottom: 4.5rem !important;
}
.my-7 {
  margin-top: 5rem !important;
  margin-bottom: 5rem !important;
}
.my-8 {
  margin-top: 6rem !important;
  margin-bottom: 6rem !important;
}
.my-9 {
  margin-top: 7rem !important;
  margin-bottom: 7rem !important;
}
.my-10 {
  margin-top: 8rem !important;
  margin-bottom: 8rem !important;
}

/* Padding X */
.px-6 {
  padding-left: 4.5rem !important;
  padding-right: 4.5rem !important;
}
.px-7 {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}
.px-8 {
  padding-left: 6rem !important;
  padding-right: 6rem !important;
}
.px-9 {
  padding-left: 7rem !important;
  padding-right: 7rem !important;
}
.px-10 {
  padding-left: 8rem !important;
  padding-right: 8rem !important;
}

/* Margin X */
.mx-6 {
  margin-left: 4.5rem !important;
  margin-right: 4.5rem !important;
}
.mx-7 {
  margin-left: 5rem !important;
  margin-right: 5rem !important;
}
.mx-8 {
  margin-left: 6rem !important;
  margin-right: 6rem !important;
}
.mx-9 {
  margin-left: 7rem !important;
  margin-right: 7rem !important;
}
.mx-10 {
  margin-left: 8rem !important;
  margin-right: 8rem !important;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .pt-sm-6 {
      padding-top: 4.5rem !important;
    }
    .pt-sm-7 {
      padding-top: 5rem !important;
    }
    .pt-sm-8 {
      padding-top: 6rem !important;
    }
    .pt-sm-9 {
      padding-top: 7rem !important;
    }
    .pt-sm-10 {
      padding-top: 8rem !important;
    }
  }
  
  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    .pt-md-6 {
      padding-top: 4.5rem !important;
    }
    .pt-md-7 {
      padding-top: 5rem !important;
    }
    .pt-md-8 {
      padding-top: 6rem !important;
    }
    .pt-md-9 {
      padding-top: 7rem !important;
    }
    .pt-md-10 {
      padding-top: 8rem !important;
    }

    .pl-md-6 {
      padding-left: 4.5rem !important;
    }
    .pl-md-7 {
      padding-left: 5rem !important;
    }
    .pl-md-8 {
      padding-left: 6rem !important;
    }
    .pl-md-9 {
      padding-left: 7rem !important;
    }
    .pl-md-10 {
      padding-left: 8rem !important;
    }
    
    .pr-md-6 {
      padding-right: 4.5rem !important;
    }
    .pr-md-7 {
      padding-right: 5rem !important;
    }
    .pr-md-8 {
      padding-right: 6rem !important;
    }
    .pr-md-9 {
      padding-right: 7rem !important;
    }
    .pr-md-10 {
      padding-right: 8rem !important;
    }
  }
  
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    .pt-lg-6 {
      padding-top: 4.5rem !important;
    }
    .pt-lg-7 {
      padding-top: 5rem !important;
    }
    .pt-lg-8 {
      padding-top: 6rem !important;
    }
    .pt-lg-9 {
      padding-top: 7rem !important;
    }
    .pt-lg-10 {
      padding-top: 8rem !important;
    }
  }
  
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
    .pt-xl-6 {
      padding-top: 4.5rem !important;
    }
    .pt-xl-7 {
      padding-top: 5rem !important;
    }
    .pt-xl-8 {
      padding-top: 6rem !important;
    }
    .pt-xl-9 {
      padding-top: 7rem !important;
    }
    .pt-xl-10 {
      padding-top: 8rem !important;
    }
  }
/* Custom CSS to extend margin top classes */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .mt-sm-6 {
      margin-top: 4.5rem !important;
    }
    .mt-sm-7 {
      margin-top: 5rem !important;
    }
    .mt-sm-8 {
      margin-top: 6rem !important;
    }
    .mt-sm-9 {
      margin-top: 7rem !important;
    }
    .mt-sm-10 {
      margin-top: 8rem !important;
    }
  }
  
  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    .mt-md-6 {
      margin-top: 4.5rem !important;
    }
    .mt-md-7 {
      margin-top: 5rem !important;
    }
    .mt-md-8 {
      margin-top: 6rem !important;
    }
    .mt-md-9 {
      margin-top: 7rem !important;
    }
    .mt-md-10 {
      margin-top: 8rem !important;
    }
  }
  
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    .mt-lg-6 {
      margin-top: 4.5rem !important;
    }
    .mt-lg-7 {
      margin-top: 5rem !important;
    }
    .mt-lg-8 {
      margin-top: 6rem !important;
    }
    .mt-lg-9 {
      margin-top: 7rem !important;
    }
    .mt-lg-10 {
      margin-top: 8rem !important;
    }
  }
  
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
    .mt-xl-6 {
      margin-top: 4.5rem !important;
    }
    .mt-xl-7 {
      margin-top: 5rem !important;
    }
    .mt-xl-8 {
      margin-top: 6rem !important;
    }
    .mt-xl-9 {
      margin-top: 7rem !important;
    }
    .mt-xl-10 {
      margin-top: 8rem !important;
    }
  }

  /* Custom CSS to extend padding and margin classes */

/* Padding Top */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-sm-7 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  .py-sm-8 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-sm-9 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }
  .py-sm-10 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-md-7 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  .py-md-8 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-md-9 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }
  .py-md-10 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-lg-7 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  .py-lg-8 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-lg-9 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }
  .py-lg-10 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-xl-7 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  .py-xl-8 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-xl-9 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }
  .py-xl-10 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
  }
}

/* Padding X */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .px-sm-6 {
    padding-left: 4.5rem !important;
    padding-right: 4.5rem !important;
  }
  .px-sm-7 {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
  }
  .px-sm-8 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
  .px-sm-9 {
    padding-left: 7rem !important;
    padding-right: 7rem !important;
  }
  .px-sm-10 {
    padding-left: 8rem !important;
    padding-right: 8rem !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .px-md-6 {
    padding-left: 4.5rem !important;
    padding-right: 4.5rem !important;
  }
  .px-md-7 {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
  }
  .px-md-8 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
  .px-md-9 {
    padding-left: 7rem !important;
    padding-right: 7rem !important;
  }
  .px-md-10 {
    padding-left: 8rem !important;
    padding-right: 8rem !important;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .px-lg-6 {
    padding-left: 4.5rem !important;
    padding-right: 4.5rem !important;
  }
  .px-lg-7 {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
  }
  .px-lg-8 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
  .px-lg-9 {
    padding-left: 7rem !important;
    padding-right: 7rem !important;
  }
  .px-lg-10 {
    padding-left: 8rem !important;
    padding-right: 8rem !important;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .px-xl-6 {
    padding-left: 4.5rem !important;
    padding-right: 4.5rem !important;
  }
  .px-xl-7 {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
  }
  .px-xl-8 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
  .px-xl-9 {
    padding-left: 7rem !important;
    padding-right: 7rem !important;
  }
  .px-xl-10 {
    padding-left: 8rem !important;
    padding-right: 8rem !important;
  }
}

/* Margin X */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .mx-sm-6 {
    margin-left: 4.5rem !important;
    margin-right: 4.5rem !important;
  }
  .mx-sm-7 {
    margin-left: 5rem !important;
    margin-right: 5rem !important;
  }
  .mx-sm-8 {
    margin-left: 6rem !important;
    margin-right: 6rem !important;
  }
  .mx-sm-9 {
    margin-left: 7rem !important;
    margin-right: 7rem !important;
  }
  .mx-sm-10 {
    margin-left: 8rem !important;
    margin-right: 8rem !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .mx-md-6 {
    margin-left: 4.5rem !important;
    margin-right: 4.5rem !important;
  }
  .mx-md-7 {
    margin-left: 5rem !important;
    margin-right: 5rem !important;
  }
  .mx-md-8 {
    margin-left: 6rem !important;
    margin-right: 6rem !important;
  }
  .mx-md-9 {
    margin-left: 7rem !important;
    margin-right: 7rem !important;
  }
  .mx-md-10 {
    margin-left: 8rem !important;
    margin-right: 8rem !important;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .mx-lg-6 {
    margin-left: 4.5rem !important;
    margin-right: 4.5rem !important;
  }
  .mx-lg-7 {
    margin-left: 5rem !important;
    margin-right: 5rem !important;
  }
  .mx-lg-8 {
    margin-left: 6rem !important;
    margin-right: 6rem !important;
  }
  .mx-lg-9 {
    margin-left: 7rem !important;
    margin-right: 7rem !important;
  }
  .mx-lg-10 {
    margin-left: 8rem !important;
    margin-right: 8rem !important;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .mx-xl-6 {
    margin-left: 4.5rem !important;
    margin-right: 4.5rem !important;
  }
  .mx-xl-7 {
    margin-left: 5rem !important;
    margin-right: 5rem !important;
  }
  .mx-xl-8 {
    margin-left: 6rem !important;
    margin-right: 6rem !important;
  }
  .mx-xl-9 {
    margin-left: 7rem !important;
    margin-right: 7rem !important;
  }
  .mx-xl-10 {
    margin-left: 8rem !important;
    margin-right: 8rem !important;
  }
}

/* Margin Y */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .my-sm-6 {
    margin-top: 4.5rem !important;
    margin-bottom: 4.5rem !important;
  }
  .my-sm-7 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
  }
  .my-sm-8 {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
  }
  .my-sm-9 {
    margin-top: 7rem !important;
    margin-bottom: 7rem !important;
  }
  .my-sm-10 {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .my-md-6 {
    margin-top: 4.5rem !important;
    margin-bottom: 4.5rem !important;
  }
  .my-md-7 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
  }
  .my-md-8 {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
  }
  .my-md-9 {
    margin-top: 7rem !important;
    margin-bottom: 7rem !important;
  }
  .my-md-10 {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .my-lg-6 {
    margin-top: 4.5rem !important;
    margin-bottom: 4.5rem !important;
  }
  .my-lg-7 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
  }
  .my-lg-8 {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
  }
  .my-lg-9 {
    margin-top: 7rem !important;
    margin-bottom: 7rem !important;
  }
  .my-lg-10 {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .my-xl-6 {
    margin-top: 4.5rem !important;
    margin-bottom: 4.5rem !important;
  }
  .my-xl-7 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
  }
  .my-xl-8 {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
  }
  .my-xl-9 {
    margin-top: 7rem !important;
    margin-bottom: 7rem !important;
  }
  .my-xl-10 {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important;
  }
}

    
/* Custom CSS to extend z-index classes */

.z-0 {
  z-index: 0 !important;
}

.z-1 {
  z-index: 100 !important;
}

.z-2 {
  z-index: 200 !important;
}

.z-3 {
  z-index: 300 !important;
}

.z-4 {
  z-index: 400 !important;
}

.z-5 {
  z-index: 500 !important;
}

.z-6 {
  z-index: 600 !important;
}

.z-7 {
  z-index: 700 !important;
}

.z-8 {
  z-index: 800 !important;
}

.z-9 {
  z-index: 900 !important;
}

.z-10 {
  z-index: 1000 !important;
}