
/*--------------------------------------------------------------
  >> : Buttons
--------------------------------------------------------------*/
  .btn-light {
    --bs-btn-color: #000;
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #ffffff;
  }

  .btn-icon {
    display: inline-flex;
    align-items: center;
  }

  .btn-icon .bi {
    font-size: 1.1rem;
    line-height: 1;
  }

  .btn-icon-start {
    padding-left: 18px;
  }

  .btn-icon-start .bi {
    margin-right: 10px;
  }

  .btn-icon-end .bi {
    margin-left: 10px;
  }

  .btn-icon-end {
    padding-right: 18px;
  }


/*--------------------------------------------------------------
  >> : Modals (Generic)
--------------------------------------------------------------*/
  .modal-content {
    border-radius: 15px;
  }

  .modal-header .btn-close {
    width: 40px;
    height: 40px;
    background-color: #ececec;
    border-radius: 10px;
  }


/*--------------------------------------------------------------
  >> : Modals (Specific)
--------------------------------------------------------------*/
  #content-modal .modal-dialog {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }

  #content-modal .modal-header {
    padding-top: 2rem;
    padding-right: 2rem;
    padding-bottom: 0;
    border: none;
  }

  #content-modal .modal-body {
    padding: 2rem;
    padding-top: 1.5rem;
  }
  

/*--------------------------------------------------------------
  >> : Pagination
--------------------------------------------------------------*/
  .pagination {
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }

  .pagination .page-numbers {
    width: 40px;
    height: 40px;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    text-decoration: none;
    border-radius: 10px
    
  }

  .pagination .current {
    background: none;
    font-weight: bold;
  }

  .pagination .next,
  .pagination .prev {
    width: fit-content;
    padding: 0 20px;
    border-radius: 100px;
    background-color: var(--bs-pagination-color);
    color: var(--bs-pagination-bg);
  }

/*--------------------------------------------------------------
  >> : Extra Margins
--------------------------------------------------------------*/
  .mt-g {
    margin-top: calc(var(--bs-gutter-x) * .5) !important;
  }

  .mb-g {
    margin-bottom: calc(var(--bs-gutter-x) * .5) !important;
  }

  .ms-g {
    margin-left: calc(var(--bs-gutter-x) * .5) !important;
  }

  .me-g {
    margin-right: calc(var(--bs-gutter-x) * .5) !important;
  }

  .mx-g {
    margin-right: calc(var(--bs-gutter-x) * .5) !important;
    margin-left: calc(var(--bs-gutter-x) * .5) !important;
  }

  .my-g {
    margin-top: calc(var(--bs-gutter-x) * .5) !important;
    margin-bottom: calc(var(--bs-gutter-x) * .5) !important;
  }

  .m-g {
    margin: calc(var(--bs-gutter-x) * .5) !important;
  }

  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) {
    .mt-sm-g {
      margin-top: calc(var(--bs-gutter-x) * .5) !important;
    }

    .mb-sm-g {
      margin-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .ms-sm-g {
      margin-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .me-sm-g {
      margin-right: calc(var(--bs-gutter-x) * .5) !important;
    }

    .mx-sm-g {
      margin-right: calc(var(--bs-gutter-x) * .5) !important;
      margin-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .my-sm-g {
      margin-top: calc(var(--bs-gutter-x) * .5) !important;
      margin-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .m-sm-g {
      margin: calc(var(--bs-gutter-x) * .5) !important;
    }
  }

  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    .mt-md-g {
      margin-top: calc(var(--bs-gutter-x) * .5) !important;
    }

    .mb-md-g {
      margin-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .ms-md-g {
      margin-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .me-md-g {
      margin-right: calc(var(--bs-gutter-x) * .5) !important;
    }

    .mx-md-g {
      margin-right: calc(var(--bs-gutter-x) * .5) !important;
      margin-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .my-md-g {
      margin-top: calc(var(--bs-gutter-x) * .5) !important;
      margin-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .m-md-g {
      margin: calc(var(--bs-gutter-x) * .5) !important;
    }
  }

  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    .mt-lg-g {
      margin-top: calc(var(--bs-gutter-x) * .5) !important;
    }

    .mb-lg-g {
      margin-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .ms-lg-g {
      margin-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .me-lg-g {
      margin-right: calc(var(--bs-gutter-x) * .5) !important;
    }

    .mx-lg-g {
      margin-right: calc(var(--bs-gutter-x) * .5) !important;
      margin-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .my-lg-g {
      margin-top: calc(var(--bs-gutter-x) * .5) !important;
      margin-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .m-lg-g {
      margin: calc(var(--bs-gutter-x) * .5) !important;
    }
  }

  /* X-Large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
    .mt-xl-g {
      margin-top: calc(var(--bs-gutter-x) * .5) !important;
    }

    .mb-xl-g {
      margin-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .ms-xl-g {
      margin-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .me-xl-g {
      margin-right: calc(var(--bs-gutter-x) * .5) !important;
    }

    .mx-xl-g {
      margin-right: calc(var(--bs-gutter-x) * .5) !important;
      margin-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .my-xl-g {
      margin-top: calc(var(--bs-gutter-x) * .5) !important;
      margin-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .m-xl-g {
      margin: calc(var(--bs-gutter-x) * .5) !important;
    }
  }

  /* XX-Large devices (larger desktops, 1400px and up) */
  @media (min-width: 1400px) {
    .mt-xxl-g {
      margin-top: calc(var(--bs-gutter-x) * .5) !important;
    }

    .mb-xxl-g {
      margin-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .ms-xxl-g {
      margin-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .me-xxl-g {
      margin-right: calc(var(--bs-gutter-x) * .5) !important;
    }

    .mx-xxl-g {
      margin-right: calc(var(--bs-gutter-x) * .5) !important;
      margin-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .my-xxl-g {
      margin-top: calc(var(--bs-gutter-x) * .5) !important;
      margin-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .m-xxl-g {
      margin: calc(var(--bs-gutter-x) * .5) !important;
    }
  }


/*--------------------------------------------------------------
  >> : Extra Paddings
--------------------------------------------------------------*/
  .pt-g {
    padding-top: calc(var(--bs-gutter-x) * .5) !important;
  }

  .pb-g {
    padding-bottom: calc(var(--bs-gutter-x) * .5) !important;
  }

  .ps-g {
    padding-left: calc(var(--bs-gutter-x) * .5) !important;
  }

  .pe-g {
    padding-right: calc(var(--bs-gutter-x) * .5) !important;
  }

  .px-g {
    padding-right: calc(var(--bs-gutter-x) * .5) !important;
    padding-left: calc(var(--bs-gutter-x) * .5) !important;
  }

  .py-g {
    padding-top: calc(var(--bs-gutter-x) * .5) !important;
    padding-bottom: calc(var(--bs-gutter-x) * .5) !important;
  }

  .p-g {
    padding: calc(var(--bs-gutter-x) * .5) !important;
  }

  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) {
    .pt-sm-g {
      padding-top: calc(var(--bs-gutter-x) * .5) !important;
    }

    .pb-sm-g {
      padding-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .ps-sm-g {
      padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .pe-sm-g {
      padding-right: calc(var(--bs-gutter-x) * .5) !important;
    }

    .px-sm-g {
      padding-right: calc(var(--bs-gutter-x) * .5) !important;
      padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .py-sm-g {
      padding-top: calc(var(--bs-gutter-x) * .5) !important;
      padding-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .p-sm-g {
      padding: calc(var(--bs-gutter-x) * .5) !important;
    }
  }

  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    .pt-md-g {
      padding-top: calc(var(--bs-gutter-x) * .5) !important;
    }

    .pb-md-g {
      padding-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .ps-md-g {
      padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .pe-md-g {
      padding-right: calc(var(--bs-gutter-x) * .5) !important;
    }

    .px-md-g {
      padding-right: calc(var(--bs-gutter-x) * .5) !important;
      padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .py-md-g {
      padding-top: calc(var(--bs-gutter-x) * .5) !important;
      padding-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .p-md-g {
      padding: calc(var(--bs-gutter-x) * .5) !important;
    }
  }

  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    .pt-lg-g {
      padding-top: calc(var(--bs-gutter-x) * .5) !important;
    }

    .pb-lg-g {
      padding-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .ps-lg-g {
      padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .pe-lg-g {
      padding-right: calc(var(--bs-gutter-x) * .5) !important;
    }

    .px-lg-g {
      padding-right: calc(var(--bs-gutter-x) * .5) !important;
      padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .py-lg-g {
      padding-top: calc(var(--bs-gutter-x) * .5) !important;
      padding-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .p-lg-g {
      padding: calc(var(--bs-gutter-x) * .5) !important;
    }
  }

  /* X-Large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
    .pt-xl-g {
      padding-top: calc(var(--bs-gutter-x) * .5) !important;
    }

    .pb-xl-g {
      padding-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .ps-xl-g {
      padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .pe-xl-g {
      padding-right: calc(var(--bs-gutter-x) * .5) !important;
    }

    .px-xl-g {
      padding-right: calc(var(--bs-gutter-x) * .5) !important;
      padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .py-xl-g {
      padding-top: calc(var(--bs-gutter-x) * .5) !important;
      padding-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .p-xl-g {
      padding: calc(var(--bs-gutter-x) * .5) !important;
    }
  }

  /* XX-Large devices (larger desktops, 1400px and up) */
  @media (min-width: 1400px) {
    .pt-xxl-g {
      padding-top: calc(var(--bs-gutter-x) * .5) !important;
    }

    .pb-xxl-g {
      padding-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .ps-xxl-g {
      padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .pe-xxl-g {
      padding-right: calc(var(--bs-gutter-x) * .5) !important;
    }

    .px-xxl-g {
      padding-right: calc(var(--bs-gutter-x) * .5) !important;
      padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }

    .py-xxl-g {
      padding-top: calc(var(--bs-gutter-x) * .5) !important;
      padding-bottom: calc(var(--bs-gutter-x) * .5) !important;
    }

    .p-xxl-g {
      padding: calc(var(--bs-gutter-x) * .5) !important;
    }
  }


/*--------------------------------------------------------------
  >> : Container Changes
--------------------------------------------------------------*/
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  max-width: 80%;
}

@media (min-width: 1920px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1440px;
  }
}
