html {
  scroll-behavior: smooth;
  scroll-snap-align: center;
  scroll-padding-top: 5rem;
}

body {
  min-height: 100svh;
  height: 100%;
  background-color: #F4F4F4;
}

button,
input {
  border: 0;
  outline: none;
}

header, main {
  background-color: #fff;
}

button {
  all: unset;
  cursor: pointer;
}

button:focus,
input:focus {
  outline: none;
}

ul,
li {
  all: unset;
  display: block;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

a {
  all: unset;
  color: var(--link-color);
  cursor: pointer;
}
p {
  all: unset;
  display: block;
}
p,
a,
span {
  font-family: 'Montserrat', sans-serif;
  color: var(--text-color);
  text-decoration: none;
  font-weight: 400;
}
.link:hover {
  color: var(--primary-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0;
  padding-bottom: 0;
  font-family: 'Poopins', sans-serif;
  color: var(--title-color);
  font-weight: 600;
}
.right-0 {
  right: 0;
}
.btn {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  padding-inline: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 2.4rem !important;
  border-radius: 10px !important;
  border: none !important;
  text-transform: uppercase !important;
  text-align: none !important;
}
.btn-two-elements {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  padding: 0.2rem 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 2.4rem !important;
  border-radius: 10px !important;
  border: none !important;
  text-transform: uppercase !important;
  text-align: none !important;
}
.btn-two-elements span {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: #fff;
}
.btn-two-elements span:first-child {
  font-weight: 700 !important;
}
.btn-two-elements:hover span {
  color: var(--primary-color);
}
.btn-primary-outline {
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  transition: all 0.1s ease-in-out;
}
.btn-primary-outline:hover {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}
.btn-primary {
  border: 1px solid var(--primary-color) !important;
  background-color: var(--primary-color) !important;
  color: #fff !important;
  transition: all 0.1s ease-in-out;
}
.btn-primary:hover {
  background-color: #fff !important;
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
}
.text-primary {
  color: var(--primary-color) !important;
}
.text-black {
  color: #000 !important;
}
.text-sm {
  font-size: 0.9rem !important;
}
.text-lg {
  font-size: 1.2rem !important;
}
.text-xl {
  font-size: 1.5rem !important;
}
.font-weight-light-bold {
  font-weight: 500 !important;
}
.gap-1 {
  gap: 5px;
}
.gap-2 {
  gap: 10px;
}
.gap-3 {
  gap: 15px;
}
.gap-4 {
  gap: 20px;
}
.gap-5 {
  gap: 25px;
}
.shadow-xl {
  box-shadow: 0px 0px 15px -2px rgba(0, 0, 0, 0.4);
}

.shadow-xl-top {
  box-shadow: 0px -2px 15px -2px rgba(0, 0, 0, 0.4);
}

.shadow-xl-right {
  box-shadow: 2px 0px 15px -2px rgba(0, 0, 0, 0.4);
}

.shadow-xl-bottom {
  box-shadow: 0px 2px 15px -2px rgba(0, 0, 0, 0.4);
}

.shadow-xl-left {
  box-shadow: -2px 0px 15px -2px rgba(0, 0, 0, 0.4);
}
.shadow-custom {
  box-shadow: 0px 0px 18px -5px rgba(0, 0, 0, 0.4);
}
.rounded-xl {
  border-radius: 12px;
}
.bg-primary {
  background-color: var(--primary-color) !important;
}
.bg-element {
  background-color: var(--element-color) !important;
}
.bg-white {
  background-color: #fff !important;
}
.ratio-1x1 {
  aspect-ratio: 1 / 1 !important;
}
.ratio-16x9 {
  aspect-ratio: 16 / 9 !important;
}
.form-check-input {
  height: 17px;
  width: 17px;
  margin-left: 10px;
  cursor: pointer;
}

.form-check-input:checked,
.flatpickr-day.today {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.form-check-input:disabled {
  background-color: #f0f0f0;
  border-color: #000000;
  cursor: none;
  opacity: 1;
}

.form-check-input:disabled:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.position-sticky {
  position: sticky !important;
  z-index: 1000;
}

.position-sticky-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000;
}

.position-sticky-bottom {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 1000;
}

.position-sticky-left {
  position: sticky !important;
  left: 0 !important;
  z-index: 1000;
}

.position-sticky-right {
  position: sticky !important;
  right: 0 !important;
  z-index: 1000;
}
.position-absolute {
  position: absolute !important;
  z-index: 1000;
}

.position-absolute-top {
  position: absolute !important;
  top: 0 !important;
  z-index: 1000;
}

.position-absolute-bottom {
  position: absolute !important;
  bottom: 0 !important;
  z-index: 1000;
}

.position-absolute-left {
  position: absolute !important;
  left: 0 !important;
  z-index: 1000;
}

.position-absolute-right {
  position: absolute !important;
  right: 0 !important;
  z-index: 1000;
}
.position-fixed {
  position: fixed !important;
  z-index: 1000;
}

.position-fixed-top {
  position: fixed !important;
  top: 0 !important;
  z-index: 1000;
}

.position-fixed-bottom {
  position: fixed !important;
  bottom: 0 !important;
  z-index: 1000;
}

.position-fixed-left {
  position: fixed !important;
  left: 0 !important;
  z-index: 1000;
}

.position-fixed-right {
  position: fixed !important;
  right: 0 !important;
  z-index: 1000;
}
.ratio {
  position: relative;
  width: 100%;
}

.ratio::before {
  display: block;
  content: '';
}

.ratio-1x1::before {
  padding-top: 100%; /* 1:1 Aspect Ratio */
}

.ratio-16x9::before {
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* section {
  padding: 30px 100px;
} */
footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 100px;
  background-color: var(--secondary-color);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
  flex-direction: column;
  gap: .5rem;
  text-align: center;
}

.footer-content p, .footer-content a {
  color: #fff !important;
}

footer p {
  font-size: 0.85rem;
}

header {
  padding-block: 20px;
}
/* 
header div {
  height: 4rem;
} */

@media (min-width: 720px) {
  .footer-content {
    gap: 0;
    flex-direction: row;
    text-align: justify;
  }
}

@media screen and (max-width: 768px) {
  section {
    padding: 20px 30px;
  }
  html,
  body {
    font-size: 1rem;
  }
  footer {
    padding: 1rem 0;
  }
  /* .button {
      width: 70%;
      justify-self: center;
    } */

    
  /* header {
    padding-block: 10px;
  } */

  header .nav-bar a {
    display: none;
  }
}

.rounded-start-0 {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.rounded-end-0 {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.rounded-top-0 {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.rounded-bottom-0 {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

@media (min-width: 576px) {
  .rounded-start-sm-0 {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  .rounded-end-sm-0 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .rounded-top-sm-0 {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  .rounded-bottom-sm-0 {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .position-sm-sticky {
    position: sticky !important;
    z-index: 1000;
  }

  .position-sm-sticky-top {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000;
  }

  .position-sm-sticky-bottom {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 1000;
  }

  .position-sm-sticky-left {
    position: sticky !important;
    left: 0 !important;
    z-index: 1000;
  }

  .position-sm-sticky-right {
    position: sticky !important;
    right: 0 !important;
    z-index: 1000;
  }
  .position-sm-absolute {
    position: absolute !important;
    z-index: 1000;
  }

  .position-sm-absolute-top {
    position: absolute !important;
    top: 0 !important;
    z-index: 1000;
  }

  .position-sm-absolute-bottom {
    position: absolute !important;
    bottom: 0 !important;
    z-index: 1000;
  }

  .position-sm-absolute-left {
    position: absolute !important;
    left: 0 !important;
    z-index: 1000;
  }

  .position-sm-absolute-right {
    position: absolute !important;
    right: 0 !important;
    z-index: 1000;
  }
  .position-sm-fixed {
    position: fixed !important;
    z-index: 1000;
  }

  .position-sm-fixed-top {
    position: fixed !important;
    top: 0 !important;
    z-index: 1000;
  }

  .position-sm-fixed-bottom {
    position: fixed !important;
    bottom: 0 !important;
    z-index: 1000;
  }

  .position-sm-fixed-left {
    position: fixed !important;
    left: 0 !important;
    z-index: 1000;
  }

  .position-sm-fixed-right {
    position: fixed !important;
    right: 0 !important;
    z-index: 1000;
  }
  .ratio-sm {
    position: relative;
    width: 100%;
  }

  .ratio-sm::before {
    display: block;
    content: '';
  }

  .ratio-sm-1x1::before {
    padding-top: 100%; /* 1:1 Aspect Ratio */
  }

  .ratio-sm-16x9::before {
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
  }

  .ratio-sm > * {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}

@media (min-width: 768px) {
  .rounded-start-md-0 {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  .rounded-end-md-0 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .rounded-top-md-0 {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  .rounded-bottom-md-0 {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .position-md-sticky {
    position: sticky !important;
    z-index: 1000;
  }

  .position-md-sticky-top {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000;
  }

  .position-md-sticky-bottom {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 1000;
  }

  .position-md-sticky-left {
    position: sticky !important;
    left: 0 !important;
    z-index: 1000;
  }

  .position-md-sticky-right {
    position: sticky !important;
    right: 0 !important;
    z-index: 1000;
  }
  .position-md-absolute {
    position: absolute !important;
    z-index: 1000;
  }

  .position-md-absolute-top {
    position: absolute !important;
    top: 0 !important;
    z-index: 1000;
  }

  .position-md-absolute-bottom {
    position: absolute !important;
    bottom: 0 !important;
    z-index: 1000;
  }

  .position-md-absolute-left {
    position: absolute !important;
    left: 0 !important;
    z-index: 1000;
  }

  .position-md-absolute-right {
    position: absolute !important;
    right: 0 !important;
    z-index: 1000;
  }
  .position-md-fixed {
    position: fixed !important;
    z-index: 1000;
  }

  .position-md-fixed-top {
    position: fixed !important;
    top: 0 !important;
    z-index: 1000;
  }

  .position-md-fixed-bottom {
    position: fixed !important;
    bottom: 0 !important;
    z-index: 1000;
  }

  .position-md-fixed-left {
    position: fixed !important;
    left: 0 !important;
    z-index: 1000;
  }

  .position-md-fixed-right {
    position: fixed !important;
    right: 0 !important;
    z-index: 1000;
  }

  .ratio-md {
    position: relative;
    width: 100%;
  }

  .ratio-md::before {
    display: block;
    content: '';
  }

  .ratio-md-1x1::before {
    padding-top: 100%; /* 1:1 Aspect Ratio */
  }

  .ratio-md-16x9::before {
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
  }

  .ratio-md > * {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}

@media (min-width: 992px) {
  .rounded-start-lg-0 {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  .rounded-end-lg-0 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .rounded-top-lg-0 {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  .rounded-bottom-lg-0 {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .position-lg-sticky {
    position: sticky !important;
    z-index: 1000;
  }

  .position-lg-sticky-top {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000;
  }

  .position-lg-sticky-bottom {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 1000;
  }

  .position-lg-sticky-left {
    position: sticky !important;
    left: 0 !important;
    z-index: 1000;
  }

  .position-lg-sticky-right {
    position: sticky !important;
    right: 0 !important;
    z-index: 1000;
  }
  .position-lg-absolute {
    position: absolute !important;
    z-index: 1000;
  }

  .position-lg-absolute-top {
    position: absolute !important;
    top: 0 !important;
    z-index: 1000;
  }

  .position-lg-absolute-bottom {
    position: absolute !important;
    bottom: 0 !important;
    z-index: 1000;
  }

  .position-lg-absolute-left {
    position: absolute !important;
    left: 0 !important;
    z-index: 1000;
  }

  .position-lg-absolute-right {
    position: absolute !important;
    right: 0 !important;
    z-index: 1000;
  }
  .position-lg-fixed {
    position: fixed !important;
    z-index: 1000;
  }

  .position-lg-fixed-top {
    position: fixed !important;
    top: 0 !important;
    z-index: 1000;
  }

  .position-lg-fixed-bottom {
    position: fixed !important;
    bottom: 0 !important;
    z-index: 1000;
  }

  .position-lg-fixed-left {
    position: fixed !important;
    left: 0 !important;
    z-index: 1000;
  }

  .position-lg-fixed-right {
    position: fixed !important;
    right: 0 !important;
    z-index: 1000;
  }
  .ratio-lg {
    position: relative;
    width: 100%;
  }

  .ratio-lg::before {
    display: block;
    content: '';
  }

  .ratio-lg-1x1::before {
    padding-top: 100%; /* 1:1 Aspect Ratio */
  }

  .ratio-lg-16x9::before {
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
  }

  .ratio-lg > * {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}

.bold {
  font-weight: bold !important;
}