:root {
  --color-primary: #5d35a5;
  --color-primary-dark: #421869;
  --color-secondary: #8cc63f;
  --color-secondary-dark: #4f7d13;
  --color-white: #ffffff;
  --color-transparent: transparent;
  --color-blue: #0071bc;
  --color-dark-blue: #202b6c;
  --color-royal-blue: #0E3EA0;
  --color-orange: #f18022;
  --color-dark-orange: #bb5b0c;
  --color-white: #fff;
  --color-red: #FF0307;
  --color-red-dark: #c0392b;
  --color-green: #2ecc71;
  --color-green-dark: #27ae60;
  --color-yellow: #f1c40f;
  --color-yellow-dark: #f39c12;
  --color-purple: #9b59b6;
  --color-purple-dark: #8e44ad;
  --color-teal: #1abc9c;
  --color-teal-dark: #16a085;
  --color-gray-light: #ecf0f1;
  --color-gray: #bdc3c7;
  --color-gray-dark: #7f8c8d;
  --color-pink: #e91e63;
  --color-pink-dark: #c2185b;
  --color-brown: #795548;
  --color-brown-dark: #5d4037;
  --color-lime: #cddc39;
  --color-lime-dark: #afb42b;
  --color-indigo: #3f51b5;
  --color-indigo-dark: #303f9f;
  --color-cyan: #00bcd4;
  --color-cyan-dark: #0097a7;
  --color-amber: #ffc107;
  --color-amber-dark: #ffa000;
  --color-light-blue: #03a9f4;
  --color-light-blue-dark: #0288d1;
  --color-light-green: #8bc34a;
  --color-light-green-dark: #689f38;
  --color-deep-purple: #673ab7;
  --color-deep-purple-dark: #512da8;
  --color-deep-orange: #ff5722;
  --color-deep-orange-dark: #e64a19;
  --color-blue-light: rgba(51, 68, 156, 0.5);
  --color-orange-light: rgba(241, 128, 34, 0.5);
  --color-red-light: rgba(231, 76, 60, 0.5);
  --color-green-light: rgba(46, 204, 113, 0.5);
  --color-yellow-light: rgba(241, 196, 15, 0.5);
  --color-purple-light: rgba(155, 89, 182, 0.5);
  --color-teal-light: rgba(26, 188, 156, 0.5);
  --color-pink-light: rgba(233, 30, 99, 0.5);
  --color-brown-light: rgba(121, 85, 72, 0.5);
  --color-lime-light: rgba(205, 220, 57, 0.5);
  --color-indigo-light: rgba(63, 81, 181, 0.5);
  --color-cyan-light: rgba(0, 188, 212, 0.5);
  --color-amber-light: rgba(255, 193, 7, 0.5);

  --font-size-base: 16px;
  --font-size-heading: clamp(2.5rem, 6vw, 6.375rem);
  --font-size-subheading: clamp(1rem, 3vw, 2rem);
  --font-size-text: clamp(1rem, 1vw, 1rem);

  --spacing-small: 0.25rem;
  --spacing-medium: clamp(.1rem, 0.84vw, 2rem);
  --spacing-large: clamp(.5rem, 1.3vw, 3rem);
  --spacing-extra-large: 2.5rem;
  --spacing-2-extra-large: clamp(.5rem, 2.5vw, 6rem);


  --button-padding-vertical: 0.8rem;
  --button-padding-horizontal: clamp(1rem, 4vw, 4rem);
  --button-border-radius: 40px;

  --padding-0: 0;
  --padding-1: 0.25rem;
  --padding-2: clamp(0.1rem, 0.42vw, 1rem);
  --padding-3: clamp(.1rem, 0.84vw, 2rem);
  --padding-4: clamp(.5rem, 1.3vw, 3rem);
  --padding-5: clamp(.5rem, 2.5vw, 6rem);

  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-md: clamp(1px, 1.3vw, 50px);
  --radius-lg: 35px;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  --btn-sm-padding: 0.25rem 0.5rem;
  --btn-sm-font-size: 0.75rem;
  --btn-md-padding: 0.5rem 1rem;
  --btn-md-font-size: 0.875rem;
  --btn-lg-padding: 0.75rem 1.25rem;
  --btn-lg-font-size: 1rem;
  --btn-xl-padding: 1rem 1.5rem;
  --btn-xl-font-size: 1.25rem;
  --btn-2xl-padding: 1.25rem 2rem;
  --btn-2xl-font-size: 1.5rem;
}

/* Custom background colors */
.bg-primary {
  background-color: var(--color-primary);
}

.bg-primary-dark {
  background-color: var(--color-primary-dark);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

.bg-secondary-dark {
  background-color: var(--color-secondary-dark);
}

.bg-blue {
  background-color: var(--color-blue);
}

.bg-dark-blue {
  background-color: var(--color-dark-blue);
}

.bg-royal-blue {
  background-color: var(--color-royal-blue);
}

.bg-orange {
  background-color: var(--color-orange);
}

.bg-dark-orange {
  background-color: var(--color-dark-orange);
}

.bg-white {
  background-color: var(--color-white);
}

.bg-red {
  background-color: var(--color-red);
}

.bg-red-dark {
  background-color: var(--color-red-dark);
}

.bg-green {
  background-color: var(--color-green);
}

.bg-green-dark {
  background-color: var(--color-green-dark);
}

.bg-yellow {
  background-color: var(--color-yellow);
}

.bg-yellow-dark {
  background-color: var(--color-yellow-dark);
}

.bg-purple {
  background-color: var(--color-purple);
}

.bg-purple-dark {
  background-color: var(--color-purple-dark);
}

.bg-teal {
  background-color: var(--color-teal);
}

.bg-teal-dark {
  background-color: var(--color-teal-dark);
}

.bg-gray-light {
  background-color: var(--color-gray-light);
}

.bg-gray {
  background-color: var(--color-gray);
}

.bg-gray-dark {
  background-color: var(--color-gray-dark);
}

.bg-pink {
  background-color: var(--color-pink);
}

.bg-pink-dark {
  background-color: var(--color-pink-dark);
}

.bg-brown {
  background-color: var(--color-brown);
}

.bg-brown-dark {
  background-color: var(--color-brown-dark);
}

.bg-lime {
  background-color: var(--color-lime);
}

.bg-lime-dark {
  background-color: var(--color-lime-dark);
}

.bg-indigo {
  background-color: var(--color-indigo);
}

.bg-indigo-dark {
  background-color: var(--color-indigo-dark);
}

.bg-cyan {
  background-color: var(--color-cyan);
}

.bg-cyan-dark {
  background-color: var(--color-cyan-dark);
}

.bg-amber {
  background-color: var(--color-amber);
}

.bg-amber-dark {
  background-color: var(--color-amber-dark);
}

.bg-light-blue {
  background-color: var(--color-light-blue);
}

.bg-light-blue-dark {
  background-color: var(--color-light-blue-dark);
}

.bg-light-green {
  background-color: var(--color-light-green);
}

.bg-light-green-dark {
  background-color: var(--color-light-green-dark);
}

.bg-deep-purple {
  background-color: var(--color-deep-purple);
}

.bg-deep-purple-dark {
  background-color: var(--color-deep-purple-dark);
}

.bg-deep-orange {
  background-color: var(--color-deep-orange);
}

.bg-deep-orange-dark {
  background-color: var(--color-deep-orange-dark);
}

.bg-blue-light {
  background-color: var(--color-blue-light);
}

.bg-dark-blue-light {
  background-color: var(--color-dark-blue-light);
}

.bg-orange-light {
  background-color: var(--color-orange-light);
}

.bg-dark-orange-light {
  background-color: var(--color-dark-orange-light);
}

.bg-red-light {
  background-color: var(--color-red-light);
}

.bg-red-dark-light {
  background-color: var(--color-red-dark-light);
}

.bg-green-light {
  background-color: var(--color-green-light);
}

.bg-green-dark-light {
  background-color: var(--color-green-dark-light);
}

.bg-yellow-light {
  background-color: var(--color-yellow-light);
}

.bg-yellow-dark-light {
  background-color: var(--color-yellow-dark-light);
}

.bg-purple-light {
  background-color: var(--color-purple-light);
}

.bg-purple-dark-light {
  background-color: var(--color-purple-dark-light);
}

.bg-teal-light {
  background-color: var(--color-teal-light);
}

.bg-teal-dark-light {
  background-color: var(--color-teal-dark-light);
}

.bg-pink-light {
  background-color: var(--color-pink-light);
}

.bg-brown-light {
  background-color: var(--color-brown-light);
}

.bg-lime-light {
  background-color: var(--color-lime-light);
}

.bg-indigo-light {
  background-color: var(--color-indigo-light);
}

.bg-cyan-light {
  background-color: var(--color-cyan-light);
}

.bg-amber-light {
  background-color: var(--color-amber-light);
}

/* Custom text colors */

.text-primary {
  color: var(--color-primary);
}

.text-primary-dark {
  color: var(--color-primary-dark);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-secondary-dark {
  color: var(--color-secondary-dark);
}

.text-blue {
  color: var(--color-blue);
}

.text-royal-blue {
  color: var(--color-royal-blue);
}

.text-dark-blue {
  color: var(--color-dark-blue);
}

.text-orange {
  color: var(--color-orange);
}

.text-dark-orange {
  color: var(--color-dark-orange);
}

.text-red {
  color: var(--color-red);
}

.text-red-dark {
  color: var(--color-red-dark);
}

.text-green {
  color: var(--color-green);
}

.text-green-dark {
  color: var(--color-green-dark);
}

.text-yellow {
  color: var(--color-yellow);
}

.text-yellow-dark {
  color: var(--color-yellow-dark);
}

.text-purple {
  color: var(--color-purple);
}

.text-purple-dark {
  color: var(--color-purple-dark);
}

.text-teal {
  color: var(--color-teal);
}

.text-teal-dark {
  color: var(--color-teal-dark);
}

.text-gray {
  color: var(--color-gray);
}

.text-gray-dark {
  color: var(--color-gray-dark);
}

.text-white {
  color: var(--color-white);
}

.text-pink {
  color: var(--color-pink);
}

.text-pink-dark {
  color: var(--color-pink-dark);
}

.text-brown {
  color: var(--color-brown);
}

.text-brown-dark {
  color: var(--color-brown-dark);
}

.text-lime {
  color: var(--color-lime);
}

.text-lime-dark {
  color: var(--color-lime-dark);
}

.text-indigo {
  color: var(--color-indigo);
}

.text-indigo-dark {
  color: var(--color-indigo-dark);
}

.text-cyan {
  color: var(--color-cyan);
}

.text-cyan-dark {
  color: var(--color-cyan-dark);
}

.text-amber {
  color: var(--color-amber);
}

.text-amber-dark {
  color: var(--color-amber-dark);
}

.text-light-blue {
  color: var(--color-light-blue);
}

.text-light-blue-dark {
  color: var(--color-light-blue-dark);
}

.text-light-green {
  color: var(--color-light-green);
}

.text-light-green-dark {
  color: var(--color-light-green-dark);
}

.text-deep-purple {
  color: var(--color-deep-purple);
}

.text-deep-purple-dark {
  color: var(--color-deep-purple-dark);
}

.text-deep-orange {
  color: var(--color-deep-orange);
}

.text-deep-orange-dark {
  color: var(--color-deep-orange-dark);
}

/* Buttons */
.default-button {
  border-radius: var(--button-border-radius);
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  font-size: var(--font-size-text);
  text-decoration: none;
}

.button-sm {
  padding: var(--btn-sm-padding);
  font-size: var(--btn-sm-font-size);
}

.button-md {
  padding: var(--btn-md-padding);
  font-size: var(--btn-md-font-size);
}

.button-lg {
  padding: var(--btn-lg-padding);
  font-size: var(--btn-lg-font-size);
}

.button-xl {
  padding: var(--btn-xl-padding);
  font-size: var(--btn-xl-font-size);
}

.button-2xl {
  padding: var(--btn-2xl-padding);
  font-size: var(--btn-2xl-font-size);
}

.btn-blue {
  background-color: var(--color-blue);
}

.btn-blue:hover {
  background-color: var(--color-dark-blue);
  color: var(--color-white);
}

.btn-orange {
  background-color: var(--color-orange);
}

.btn-orange:hover {
  background-color: var(--color-dark-orange);
  color: var(--color-white);
}

.btn-red {
  background-color: var(--color-red);
}

.btn-red:hover {
  background-color: var(--color-red-dark);
  color: var(--color-white);
}

.btn-green {
  background-color: var(--color-green);
}

.btn-green:hover {
  background-color: var(--color-green-dark);
  color: var(--color-white);
}

.btn-yellow {
  background-color: var(--color-yellow);
}

.btn-yellow:hover {
  background-color: var(--color-yellow-dark);
  color: var(--color-white);
}

.btn-purple {
  background-color: var(--color-purple);
}

.btn-purple:hover {
  background-color: var(--color-purple-dark);
  color: var(--color-white);
}

.btn-teal {
  background-color: var(--color-teal);
}

.btn-teal:hover {
  background-color: var(--color-teal-dark);
  color: var(--color-white);
}

.btn-pink {
  background-color: var(--color-pink);
}

.btn-pink:hover {
  background-color: var(--color-pink-dark);
  color: var(--color-white);
}

.btn-brown {
  background-color: var(--color-brown);
}

.btn-brown:hover {
  background-color: var(--color-brown-dark);
  color: var(--color-white);
}

.btn-lime {
  background-color: var(--color-lime);
}

.btn-lime:hover {
  background-color: var(--color-lime-dark);
  color: var(--color-white);
}

.btn-indigo {
  background-color: var(--color-indigo);
}

.btn-indigo:hover {
  background-color: var(--color-indigo-dark);
  color: var(--color-white);
}

.btn-cyan {
  background-color: var(--color-cyan);
}

.btn-cyan:hover {
  background-color: var(--color-cyan-dark);
  color: var(--color-white);
}

.btn-amber {
  background-color: var(--color-amber);
}

.btn-amber:hover {
  background-color: var(--color-amber-dark);
  color: var(--color-white);
}

.btn-light-blue {
  background-color: var(--color-light-blue);
}

.btn-light-blue:hover {
  background-color: var(--color-light-blue-dark);
  color: var(--color-white);
}

.btn-light-green {
  background-color: var(--color-light-green);
}

.btn-light-green:hover {
  background-color: var(--color-light-green-dark);
  color: var(--color-white);
}

.btn-deep-purple {
  background-color: var(--color-deep-purple);
}

.btn-deep-purple:hover {
  background-color: var(--color-deep-purple-dark);
  color: var(--color-white);
}

.btn-deep-orange {
  background-color: var(--color-deep-orange);
}

.btn-deep-orange:hover {
  background-color: var(--color-deep-orange-dark);
  color: var(--color-white);
}

/* Section */
section {
  padding: 6.5% 0;
}

.section-b {
  padding-bottom: 6.5%;
}

.section-t {
  padding-top: 6.5%;
}

.container-l {
  padding: 0 0 0 8.4%;
}

/* Typography */
.font-heading {
  font-size: var(--font-size-heading);
}

.font-subheading {
  font-size: var(--font-size-subheading);
}

.font-text {
  font-size: var(--font-size-text);
}

/* Rounded Corners */
.rounded-none {
  border-radius: var(--radius-none);
}

.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded-md {
  border-radius: var(--radius-md) !important;
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-xl {
  border-radius: var(--radius-xl);
}

.rounded-2xl {
  border-radius: var(--radius-2xl);
}

.rounded-full {
  border-radius: var(--radius-full);
}

.rounded-top {
  border-top-left-radius: var(--radius-md) !important;
  border-top-right-radius: var(--radius-md) !important;
}

.rounded-right {
  border-top-right-radius: var(--radius-md) !important;
  border-bottom-right-radius: var(--radius-md) !important;
}

.rounded-bottom {
  border-bottom-left-radius: var(--radius-md) !important;
  border-bottom-right-radius: var(--radius-md) !important;
}

.rounded-left {
  border-top-left-radius: var(--radius-md) !important;
  border-bottom-left-radius: var(--radius-md) !important;
}

.rounded-t-sm {
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
}

.rounded-r-sm {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

.rounded-b-sm {
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

.rounded-l-sm {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

.rounded-t-lg {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.rounded-r-lg {
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.rounded-b-lg {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.rounded-l-lg {
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}

.opacity-80 {
  opacity: .80 !important
}

/* Text Alignment */
.text-start {
  text-align: left;
}

.text-end {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.text-decoration-none {
  text-decoration: none;
}

/* Margin and Padding */
.m-1 {
  margin: 0 !important;
}

.m-1 {
  margin: var(--spacing-small) !important;
}

.m-2 {
  margin: var(--spacing-medium) !important;
}

.m-3 {
  margin: var(--spacing-large) !important;
}

.m-4 {
  margin: var(--spacing-extra-large) !important;
}

.m-5 {
  margin: var(--spacing-2-extra-large) !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mx-1 {
  margin-right: var(--spacing-small) !important;
  margin-left: var(--spacing-small) !important;
}

.mx-2 {
  margin-right: var(--spacing-medium) !important;
  margin-left: var(--spacing-medium) !important;
}

.mx-3 {
  margin-right: var(--spacing-large) !important;
  margin-left: var(--spacing-large) !important;
}

.mx-4 {
  margin-right: var(--spacing-extra-large) !important;
  margin-left: var(--spacing-extra-large) !important;
}

.mx-5 {
  margin-right: var(--spacing-2-extra-large) !important;
  margin-left: var(--spacing-2-extra-large) !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: var(--spacing-small) !important;
  margin-bottom: var(--spacing-small) !important;
}

.my-2 {
  margin-top: var(--spacing-medium) !important;
  margin-bottom: var(--spacing-medium) !important;
}

.my-3 {
  margin-top: var(--spacing-large) !important;
  margin-bottom: var(--spacing-large) !important;
}

.my-4 {
  margin-top: var(--spacing-extra-large) !important;
  margin-bottom: var(--spacing-extra-large) !important;
}

.my-5 {
  margin-top: var(--spacing-2-extra-large) !important;
  margin-bottom: var(--spacing-2-extra-large) !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: var(--spacing-small) !important;
}

.mt-2 {
  margin-top: var(--spacing-medium) !important;
}

.mt-3 {
  margin-top: var(--spacing-large) !important;
}

.mt-4 {
  margin-top: var(--spacing-extra-large) !important;
}

.mt-5 {
  margin-top: var(--spacing-2-extra-large) !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: var(--spacing-small) !important;
}

.mb-2 {
  margin-bottom: var(--spacing-medium) !important;
}

.mb-3 {
  margin-bottom: var(--spacing-large) !important;
}

.mb-4 {
  margin-bottom: var(--spacing-extra-large) !important;
}

.mb-5 {
  margin-bottom: var(--spacing-2-extra-large) !important;
}

.ms-0 {
  margin-left: 0 !important;
}

.ms-1 {
  margin-left: var(--spacing-small) !important;
}

.ms-2 {
  margin-left: var(--spacing-medium) !important;
}

.ms-3 {
  margin-left: var(--spacing-large) !important;
}

.ms-4 {
  margin-left: var(--spacing-extra-large) !important;
}

.ms-5 {
  margin-left: var(--spacing-2-extra-large) !important;
}

.me-0 {
  margin-right: 0 !important;
}

.me-1 {
  margin-right: var(--spacing-small) !important;
}

.me-2 {
  margin-right: var(--spacing-medium) !important;
}

.me-3 {
  margin-right: var(--spacing-large) !important;
}

.me-4 {
  margin-right: var(--spacing-extra-large) !important;
}

.me-5 {
  margin-right: var(--spacing-2-extra-large) !important;
}

.p-0 {
  padding: var(--padding-0) !important;
}

.p-1 {
  padding: var(--padding-1) !important;
}

.p-2 {
  padding: var(--padding-2) !important;
}

.p-3 {
  padding: var(--padding-3) !important;
}

.p-4 {
  padding: var(--padding-4) !important;
}

.p-5 {
  padding: var(--padding-5) !important;
}

.px-0 {
  padding-right: var(--padding-0) !important;
  padding-left: var(--padding-0) !important;
}

.px-1 {
  padding-right: var(--padding-1) !important;
  padding-left: var(--padding-1) !important;
}

.px-2 {
  padding-right: var(--padding-2) !important;
  padding-left: var(--padding-2) !important;
}

.px-3 {
  padding-right: var(--padding-3) !important;
  padding-left: var(--padding-3) !important;
}

.px-4 {
  padding-right: var(--padding-4) !important;
  padding-left: var(--padding-4) !important;
}

.px-5 {
  padding-right: var(--padding-5) !important;
  padding-left: var(--padding-5) !important;
}

.py-0 {
  padding-top: var(--padding-0) !important;
  padding-bottom: var(--padding-0) !important;
}

.py-1 {
  padding-top: var(--padding-1) !important;
  padding-bottom: var(--padding-1) !important;
}

.py-2 {
  padding-top: var(--padding-2) !important;
  padding-bottom: var(--padding-2) !important;
}

.py-3 {
  padding-top: var(--padding-3) !important;
  padding-bottom: var(--padding-3) !important;
}

.py-4 {
  padding-top: var(--padding-4) !important;
  padding-bottom: var(--padding-4) !important;
}

.py-5 {
  padding-top: var(--padding-5) !important;
  padding-bottom: var(--padding-5) !important;
}

.pt-0 {
  padding-top: var(--padding-0) !important;
}

.pt-1 {
  padding-top: var(--padding-1) !important;
}

.pt-2 {
  padding-top: var(--padding-2) !important;
}

.pt-3 {
  padding-top: var(--padding-3) !important;
}

.pt-4 {
  padding-top: var(--padding-4) !important;
}

.pt-5 {
  padding-top: var(--padding-5) !important;
}

.pe-0 {
  padding-right: var(--padding-0) !important;
}

.pe-1 {
  padding-right: var(--padding-1) !important;
}

.pe-2 {
  padding-right: var(--padding-2) !important;
}

.pe-3 {
  padding-right: var(--padding-3) !important;
}

.pe-4 {
  padding-right: var(--padding-4) !important;
}

.pe-5 {
  padding-right: var(--padding-5) !important;
}

.pb-0 {
  padding-bottom: var(--padding-0) !important;
}

.pb-1 {
  padding-bottom: var(--padding-1) !important;
}

.pb-2 {
  padding-bottom: var(--padding-2) !important;
}

.pb-3 {
  padding-bottom: var(--padding-3) !important;
}

.pb-4 {
  padding-bottom: var(--padding-4) !important;
}

.pb-5 {
  padding-bottom: var(--padding-5) !important;
}

.ps-0 {
  padding-left: var(--padding-0) !important;
}

.ps-1 {
  padding-left: var(--padding-1) !important;
}

.ps-2 {
  padding-left: var(--padding-2) !important;
}

.ps-3 {
  padding-left: var(--padding-3) !important;
}

.ps-4 {
  padding-left: var(--padding-4) !important;
}

.ps-5 {
  padding-left: var(--padding-5) !important;
}

@media (min-width:768px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: clamp(1px, 84.4%, 3550px) !important;
  }

}

@media (max-width:767px) {

  /* Margin and Padding */
  section {
    padding: 17% 0;
  }

  .section-b {
    padding-bottom: 20%;
  }
	
  .section-t {
    padding-top: 20%;
  }
	
  .m-md-0 {
    margin: 0 !important;
  }

  .m-md-1 {
    margin: var(--spacing-small) !important;
  }

  .m-md-2 {
    margin: var(--spacing-medium) !important;
  }

  .m-md-3 {
    margin: var(--spacing-large) !important;
  }

  .m-md-4 {
    margin: var(--spacing-extra-large) !important;
  }

  .m-md-5 {
    margin: var(--spacing-2-extra-large) !important;

  }

  .mx-md-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .mx-md-1 {
    margin-left: var(--spacing-small) !important;
    margin-right: var(--spacing-small) !important;
  }

  .mx-md-2 {
    margin-left: var(--spacing-medium) !important;
    margin-right: var(--spacing-medium) !important;
  }


  .mx-md-3 {
    margin-left: var(--spacing-large) !important;
    margin-right: var(--spacing-large) !important;
  }


  .mx-md-4 {
    margin-left: var(--spacing-extra-large) !important;
    margin-right: var(--spacing-large) !important;
  }

  .mx-md-5 {
    margin-left: var(--spacing-2-extra-large) !important;
    margin-right: var(--spacing-large) !important;

  }

  .my-md-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-md-1 {
    margin-top: var(--spacing-small) !important;
    margin-bottom: var(--spacing-small) !important;
  }

  .my-md-2 {
    margin-top: var(--spacing-medium) !important;
    margin-bottom: var(--spacing-medium) !important;
  }


  .my-md-3 {
    margin-top: var(--spacing-large) !important;
    margin-bottom: var(--spacing-large) !important;
  }


  .my-md-4 {
    margin-top: var(--spacing-extra-large) !important;
    margin-bottom: var(--spacing-large) !important;
  }

  .my-md-5 {
    margin-top: var(--spacing-2-extra-large) !important;
    margin-bottom: var(--spacing-large) !important;

  }

  .mt-md-0 {
    margin-top: 0 !important;
  }

  .mt-md-1 {
    margin-top: var(--spacing-small) !important;
  }

  .mt-md-2 {
    margin-top: var(--spacing-medium) !important;
  }

  .mt-md-3 {
    margin-top: var(--spacing-large) !important;
  }

  .mt-md-4 {
    margin-top: var(--spacing-extra-large) !important;
  }

  .mt-md-5 {
    margin-top: var(--spacing-2-extra-large) !important;
  }

  .mb-md-0 {
    margin-bottom: 0 !important;
  }

  .mb-md-1 {
    margin-bottom: var(--spacing-small) !important;
  }

  .mb-md-2 {
    margin-bottom: var(--spacing-medium) !important;
  }

  .mb-md-3 {
    margin-bottom: var(--spacing-large) !important;
  }

  .mb-md-4 {
    margin-bottom: var(--spacing-extra-large) !important;
  }

  .mb-md-5 {
    margin-bottom: var(--spacing-2-extra-large) !important;
  }

  .ms-md-0 {
    margin-left: 0 !important;
  }

  .ms-md-1 {
    margin-left: var(--spacing-small) !important;
  }

  .ms-md-2 {
    margin-left: var(--spacing-medium) !important;
  }

  .ms-md-3 {
    margin-left: var(--spacing-large) !important;
  }

  .ms-md-4 {
    margin-left: var(--spacing-extra-large) !important;
  }

  .ms-md-5 {
    margin-left: var(--spacing-2-extra-large) !important;
  }

  .me-md-0 {
    margin-right: 0 !important;
  }

  .me-md-1 {
    margin-right: var(--spacing-small) !important;
  }

  .me-md-2 {
    margin-right: var(--spacing-me-mddium) !important;
  }

  .me-md-3 {
    margin-right: var(--spacing-large) !important;
  }

  .me-md-4 {
    margin-right: var(--spacing-extra-large) !important;
  }

  .me-md-5 {
    margin-right: var(--spacing-2-extra-large) !important;
  }

  .p-md-0 {
    padding: var(--padding-0) !important;
  }

  .p-md-1 {
    padding: var(--padding-1) !important;
  }

  .p-md-2 {
    padding: var(--padding-2) !important;
  }

  .p-md-3 {
    padding: var(--padding-3) !important;
  }

  .p-md-4 {
    padding: var(--padding-4) !important;
  }

  .p-md-5 {
    padding: var(--padding-5) !important;
  }

  .px-md-0 {
    padding-right: var(--padding-0) !important;
    padding-left: var(--padding-0) !important;
  }

  .px-md-1 {
    padding-right: var(--padding-1) !important;
    padding-left: var(--padding-1) !important;
  }

  .px-md-2 {
    padding-right: var(--padding-2) !important;
    padding-left: var(--padding-2) !important;
  }

  .px-md-3 {
    padding-right: var(--padding-3) !important;
    padding-left: var(--padding-3) !important;
  }

  .px-md-4 {
    padding-right: var(--padding-4) !important;
    padding-left: var(--padding-4) !important;
  }

  .px-md-5 {
    padding-right: var(--padding-5) !important;
    padding-left: var(--padding-5) !important;
  }

  .py-md-0 {
    padding-top: var(--padding-0) !important;
    padding-bottom: var(--padding-0) !important;
  }

  .py-md-1 {
    padding-top: var(--padding-1) !important;
    padding-bottom: var(--padding-1) !important;
  }

  .py-md-2 {
    padding-top: var(--padding-2) !important;
    padding-bottom: var(--padding-2) !important;
  }

  .py-md-3 {
    padding-top: var(--padding-3) !important;
    padding-bottom: var(--padding-3) !important;
  }

  .py-md-4 {
    padding-top: var(--padding-4) !important;
    padding-bottom: var(--padding-4) !important;
  }

  .py-md-5 {
    padding-top: var(--padding-5) !important;
    padding-bottom: var(--padding-5) !important;
  }

  .pt-md-0 {
    padding-top: var(--padding-0) !important;
  }

  .pt-md-1 {
    padding-top: var(--padding-1) !important;
  }

  .pt-md-2 {
    padding-top: var(--padding-2) !important;
  }

  .pt-md-3 {
    padding-top: var(--padding-3) !important;
  }

  .pt-md-4 {
    padding-top: var(--padding-4) !important;
  }

  .pt-md-5 {
    padding-top: var(--padding-5) !important;
  }

  .pe-md-0 {
    padding-right: var(--padding-0) !important;
  }

  .pe-md-1 {
    padding-right: var(--padding-1) !important;
  }

  .pe-md-2 {
    padding-right: var(--padding-2) !important;
  }

  .pe-md-3 {
    padding-right: var(--padding-3) !important;
  }

  .pe-md-4 {
    padding-right: var(--padding-4) !important;
  }

  .pe-md-5 {
    padding-right: var(--padding-5) !important;
  }

  .pb-md-0 {
    padding-bottom: var(--padding-0) !important;
  }

  .pb-md-1 {
    padding-bottom: var(--padding-1) !important;
  }

  .pb-md-2 {
    padding-bottom: var(--padding-2) !important;
  }

  .pb-md-3 {
    padding-bottom: var(--padding-3) !important;
  }

  .pb-md-4 {
    padding-bottom: var(--padding-4) !important;
  }

  .pb-md-5 {
    padding-bottom: var(--padding-5) !important;
  }

  .ps-md-0 {
    padding-left: var(--padding-0) !important;
  }

  .ps-md-1 {
    padding-left: var(--padding-1) !important;
  }

  .ps-md-2 {
    padding-left: var(--padding-2) !important;
  }

  .ps-md-3 {
    padding-left: var(--padding-3) !important;
  }

  .ps-md-4 {
    padding-left: var(--padding-4) !important;
  }

  .ps-md-5 {
    padding-left: var(--padding-5) !important;
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-md-l {
    max-width: clamp(1px, 91.398%, 1775px) !important;
  }

  :root {
    --radius-md: clamp(1px, 4vw, 25px);

    --spacing-medium: clamp(.1rem, 2.32559vw, 1rem);
    --spacing-large: clamp(.5rem, 6.1111vw, 1.5rem);
    --spacing-2-extra-large: clamp(.5rem, 9.30232vw, 3rem);

    --padding-3: clamp(.1rem, 2.32559vw, 1rem);
    --padding-4: clamp(.5rem, 6.1111vw, 1.5rem);
    --padding-5: clamp(.5rem, 9.30232vw, 3rem);
  }
}