/* ==================================================
   1. FONT IMPORTS
================================================== */




/* ==================================================
   2. ROOT VARIABLES
================================================== */
:root {
  --font-heading: 'Marcellus', serif;
  --font-body: 'Inter', sans-serif;

  --color-base: #c07f48;
  --color-accent: #b26c3e;
  --color-bg: #f9f1ea;
  --color-heading: #1a1a1a;
  --color-text: #5a5a5a;
  --color-border: #e5e0da;
  --color-white: #ffffff;
  --color-black: #000000;

  --spacing-section: 120px;
  --spacing-section-small: 80px;

  --radius-soft: 8px;
  --transition-fast: all 0.3s ease;

  --trans-parent: transparent;
  --transition-order: all 0.3s ease;
}


.alt-font {
  font-family: var(--font-heading)!important;
}

.alt-font1 {
  font-family: var(--font-body)!important;
}


/* ==================================================
   3. GLOBAL / BASE STYLES
================================================== */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-body) !important;
  background-color: var(--color-bg) !important;
  color: var(--color-text);
  font-size: 16px!important;
  font-weight: 400!important;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-base);
  text-decoration: none!important;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--color-accent);
}

p {
  margin-bottom: 1.5rem;
  font-size: 1rem!important;
  color: var(--color-text);
}


/* ==================================================
   4. TYPOGRAPHY – HEADINGS
================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-weight: 500!important;
  margin-bottom: 1rem;
}

/* Mobile (Base) */
h1 { font-size: 2rem !important; line-height: 1.2 !important; }
h2 { font-size: 1.75rem !important; }
h3 { font-size: 1.5rem !important; }
h4 { font-size: 1.35rem !important; }
h5 { font-size: 1.125rem !important; }
h6 { font-size: 1rem !important; }

/* Tablet */
@media (min-width: 768px) {
  h1 { font-size: 2.75rem !important; }
  h2 { font-size: 2.25rem !important; }
  h3 { font-size: 1.875rem !important; }
  h4 { font-size: 1.5rem !important; }
  h5 { font-size: 1.25rem !important; }
  h6 { font-size: 1.125rem !important; }
}

/* Desktop */
@media (min-width: 992px) {
  h1 { font-size: 3.5rem !important; }
  h2 { font-size: 2.5rem !important; }
  h3 { font-size: 2rem !important; }
  h4 { font-size: 1.75rem !important; }
  h5 { font-size: 1.5rem !important; }
  h6 { font-size: 1.25rem !important; }
}

/* ==================================================
   5. TEXT-COLOR
================================================== */

.text-white {color: #fff!important;}
.text-dark {color: #322e2a!important;}
.text-baige {color: #f9f1ea!important;}
.text-grey {color: #828282!important;}
.text-gold {color: #c7956d!important;}



  
/* ==================================================
   5. SLIDER – TITLE AND SUBTITLE
================================================== */

.title {
   font-size: 5.625rem!important;
   line-height: 5.313rem!important;
   font-weight: 500!important;
   margin-bottom: 50px!important;
   color: #fff!important;
}

.subtitle {
    font-size: 16px!important;
    line-height: 16px!important;
    font-weight: 500!important;
}



/* ==================================================
   6. SECTION TITLES
================================================== */
.section-title {
  font-family: var(--font-heading);
  font-size: 5rem!important;
  font-weight: 500!important;
  letter-spacing: 0.1rem!important;
  text-transform: capitalize!important;
  margin-bottom: 1rem!important;
}

.section-heading {
  font-family: var(--font-heading);
  font-size: 4.375rem !important;
  line-height: 4.375rem !important;
  font-weight: 500 !important;
  margin-bottom: 4rem;
}


.subheading {
  font-family: var(--font-body);
  font-size: 1.3rem !important;
  font-weight: 400 !important;
  margin-bottom: 1rem;
}

.section-subheading {
  font-family: var(--font-body);
  font-size: 1.875rem !important;
  font-weight: 500 !important;
  margin-bottom: 1rem;
}


/* ==================================================
   7. BACKGROUND UTILITIES
================================================== */
.bg-hongo               { background-color: #f9f1ea; }
.bg-hongo-extra-light   { background-color: #f3e9e0; }
.bg-hongo-light         { background-color: #eedfd3; }
.bg-hongo-footer        { background-color: #5b5855; }
.bg-hongo-white         { background-color: #ffffff; }
.bg-hongo-dark          { background-color: #c09671; }
.bg-hongo-extra-dark    { background-color: #322e2a; }
.bg-hongo-grey          { background-color: #f5f5f5; }
.bg-hongo-dark-grey     { background-color: #322e2a; }
.bg-gradient            { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
.bg-none                { background: transparent!important; }



/* ==================================================
   8. LAYOUT / SECTIONS
================================================== */
section {
  padding: var(--spacing-section) 0;
}

.section-small {
  padding: var(--spacing-section-small) 0;
}


/* Responsive adjustments */
@media (max-width: 768px) {
  section {
    padding: calc(var(--spacing-section) * 0.6) 0;
  }
  
  .section-small {
    padding: calc(var(--spacing-section-small) * 0.6) 0;
  }
}

@media (max-width: 480px) {
  section {
    padding: calc(var(--spacing-section) * 0.5) 0;
  }
  
  .section-small {
    padding: calc(var(--spacing-section-small) * 0.5) 0;
  }
}

.container-custom {
  width: 100%;
  max-width: 1710px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}


/* ==================================================
   9. BUTTONS – HONGO SYSTEM (FIXED)
================================================== */
:root {
  --trans-parent: transparent;
  --transition-order: all 0.3s ease;
}

/* Base button styles */
.btn-hongo {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  padding: 22px 32px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease-in-out;
  cursor: pointer !important;
  text-decoration: none;
  margin-top: 10px;
  border: 1px solid transparent; /* ✅ FIXED: Default 1px border */
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box; /* ✅ ADDED: Ensures consistent sizing */
}


/* ===================================================================
   BUTTON SIZE VARIATIONS
   ================================================================= */
.btn-hongo-sm,
.btn-hongo-md,
.btn-hongo-lg,
.btn-hongo-xl {
  box-sizing: border-box !important;
  line-height: 1.5 !important; /* Normalize line-height */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* Small Button */
.btn-hongo-sm {
  font-size: 16px !important;
  padding: 12px 24px !important;
  letter-spacing: 0.4px;
}

/* Medium Button (Default) - Already defined above */
.btn-hongo-md {
  font-size: 16px !important;
  padding: 18px 32px !important;
  letter-spacing: 0.5px;
}

/* Large Button */
.btn-hongo-lg {
  font-size: 16px !important;
  padding: 22px 40px !important;
  letter-spacing: 0.6px;
}

/* Extra Large Button */
.btn-hongo-xl {
  font-size: 18px !important;
  padding: 26px 48px !important;
  letter-spacing: 0.7px;
}


/* ===================================================================
   BUTTON COLOR VARIATIONS
   ================================================================= */


/* Primary button */
.btn-hongo-primary {
  background: #322e2a;
  color: #fff;
  border: 1px solid #322e2a;
}

.btn-hongo-primary:hover {
  background: transparent;
  color: #322e2a;
}

/* Secondary button */
.btn-hongo-secondary {
  background: #f9f1ea;
  color: #fff;
  border: 1px solid #322e2a;
}

/* Black button */
.btn-hongo-black {
  background-color: #322e2a;
  border: 1px solid #322e2a;
  color: #fff;
}

.btn-hongo-black:hover {
  background: transparent;
  border: 1px solid #322e2a;
  color: #322e2a;
}

/* White button - Same 1px border */
.btn-hongo-white {
  background: #fff;
  color: #322e2a;
  border: 1px solid #322e2a; /* ✅ 1px border */
}

.btn-hongo-white:hover {
  background: #322e2a;
  border: 1px solid #322e2a;
  color: #fff;
}

/* Outline button - FIXED to match white button height */
.btn-hongo-outline {
  background: transparent;
  border: 1px solid #322e2a; /* ✅ FIXED: Changed from 2px to 1px */
  color: #322e2a!important;
}

.btn-hongo-outline:hover {
  background: #322e2a;
  color: #ffffff!important;
}

/* White outline button - FIXED to match */
.btn-hongo-white-outline {
  background: transparent;
  border: 1px solid #fff; /* ✅ FIXED: Changed from 2px to 1px */
  color: #fff;
}

.btn-hongo-white-outline:hover {
  background: #fff;
  color: #322e2a;
}


.btn-outline-dark {
  background: transparent!important;
  border: 1px solid #322e2a!important; /* ✅ FIXED: Changed from 2px to 1px */
  color: #322e2a!important;
}

.btn-outline-dark:hover {
  background: #322e2a!important;
  color: #fff!important;
}

.btn-hongo-underline {
  background: transparent;
  border: none;
  color: #322e2a;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

/* Underline */
.btn-hongo-underline::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #322e2a;
  margin-top: 6px;
  transition: transform 0.3s ease;
  transform-origin: left;
}

/* Hover effect */
.btn-hongo-underline:hover::after {
  transform: scaleX(0.6);
}


/* Dual Button Layout */
.hero-inner .hero-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 25px;
}

/* Ensure buttons align perfectly side by side */
.hero-buttons .btn-hongo {
  margin-top: 0; /* Remove top margin when in button group */
  vertical-align: middle; /* Align buttons perfectly */
}

/* === HONGO-style circular Swiper navigation buttons === */
.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.hero-slider .swiper-button-prev { 
  left: 50px; 
}

.hero-slider .swiper-button-next { 
  right: 50px; 
}

.hero-slider .swiper-button-prev::after,
.hero-slider .swiper-button-next::after {
  font-family: none !important;
  content: '';
  width: 12px;
  height: 12px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: all 0.3s ease;
}

/* flip direction for previous */
.hero-slider .swiper-button-prev::after {
  transform: rotate(-135deg);
}

/* Hover effects like Hongo */
.hero-slider .swiper-button-prev:hover,
.hero-slider .swiper-button-next:hover {
  background: #fff;
  border-color: #fff;
}

.hero-slider .swiper-button-prev:hover::after,
.hero-slider .swiper-button-next:hover::after {
  border-color: #000;
}

/* Smooth fade in/out on hover */
.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
  opacity: 0.9;
}

.hero-slider:hover .swiper-button-prev,
.hero-slider:hover .swiper-button-next {
  opacity: 1;
}

/* Responsive: hide on mobile like Hongo */
@media (max-width: 768px) {
  .hero-slider .swiper-button-prev,
  .hero-slider .swiper-button-next {
    display: none;
  }
  
  /* Stack buttons on mobile */
  .hero-inner .hero-buttons {
    flex-direction: column;
    gap: 15px;
  }
  
}



/* ==================================================
   10. COMPONENTS
================================================== */
.hongo-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-soft);
  padding: 20px;
  transition: var(--transition-fast);
}

.hongo-card:hover {
  transform: translateY(-5px);
}


/* ==================================================
   11. HERO / SLIDER
================================================== */
.hero-inner .hero-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 25px;
}


/* ==================================================
   12. HEADER & FOOTER
================================================== */
header {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}


/* ==================================================
   13. UTILITIES
================================================== */
.ls-0 { letter-spacing: 0!important; }
.ls-1 { letter-spacing: 1px; }
.ls-2 { letter-spacing: 2px; }
.ls-3 { letter-spacing: 3px; }

.box-shadow-light { box-shadow: 0 0 3px rgba(0,0,0,.1); }
.box-shadow       { box-shadow: 0 0 3px rgba(0,0,0,.2); }
.box-shadow-large { box-shadow: 0 0 12px rgba(0,0,0,.1); }

.z-index-1 { z-index: 1; }
.z-index-2 { z-index: 2; }


/* ==================================================
   14. ANIMATIONS
================================================== */
.hover-lift {
  transition: all 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* ==================================================
   15. FONT SIZE
================================================== */
:root {
    --font_size: 16px;
    --font_size_minus1: 15px;
    --font_size_minus2: 14px;
    --font_size_minus3: 13px;
    --font_size_minus4: 12px;
    --font_size_minus5: 11px;
    --font_size_plus1: 17px;
    --font_size_plus2: 18px;
    --font_size_plus3: 19px;
    --font_size_plus4: 20px;
    --font_size_plus5: 21px;
    --font_size_plus6: 22px;
    --font_size_plus7: 23px;
    --font_size_plus8: 24px;
    --font_size_plus9: 25px;
    --font_size_plus10: 26px;
    --font_size_plus11: 27px;
    --font_size_plus12: 28px;
    --font_size_plus13: 29px;
    --font_size_plus14: 30px;
    --font_size_plus15: 31px;
    --font_size_plus16: 32px;
    --font_size_plus17: 33px;
    --font_size_plus18: 34px;
    --font_size_plus19: 35px;
    --font_size_plus20: 36px;
    --font_size_plus21: 37px;
    --font_size_plus22: 38px;
    --font_size_plus23: 39px;
    --font_size_plus24: 40px;
    --font_size_plus25: 41px;
    --font_size_plus26: 42px;
    --font_size_plus27: 43px;
    --font_size_plus28: 44px;
    --font_size_plus29: 45px;
    --font_size_plus30: 46px;
    --font_size_plus31: 47px;
    --font_size_plus32: 48px;
    --font_size_plus33: 49px;
    --font_size_plus34: 50px;
    --font_size_plus35: 51px;
    --font_size_plus36: 52px;
    --font_size_plus37: 53px;
    --font_size_plus38: 54px;
    --font_size_plus39: 55px;
    --font_size_plus40: 56px;
    --font_size_plus41: 57px;
    --font_size_plus42: 58px;
    --font_size_plus43: 59px;
    --font_size_plus44: 60px;
    
    }
    
    /* ==========================================
   Custom Font Size Utilities (like Bootstrap)
   ========================================== */

.fs-9 { font-size: 9px !important; }
.fs-10 { font-size: 10px !important; }
.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px !important; }
.fs-16 { font-size: 16px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.fs-22 { font-size: 22px !important; }
.fs-24 { font-size: 24px !important; }
.fs-28 { font-size: 28px !important; }
.fs-30 { font-size: 30px !important; }
.fs-32 { font-size: 32px !important; }
.fs-34 { font-size: 34px !important; }
.fs-36 { font-size: 36px !important; }
.fs-40 { font-size: 40px !important; }
.fs-48 { font-size: 48px !important; }
.fs-56 { font-size: 56px !important; }
.fs-64 { font-size: 64px !important; }



/* Optional — control font weight too */
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }

/* ==================================================
   16. PADDING
================================================== */

/* Padding top and bottom */
.pt-0 { padding-top: 0!important; }
.pb-0 { padding-bottom: 0!important; }
.pt-1 { padding-top: 1px!important; }
.pb-1 { padding-bottom: 1px!important; }
.pt-2 { padding-top: 2px!important; }
.pb-2 { padding-bottom: 2px!important; }
.pt-3 { padding-top: 3px!important; }
.pb-3 { padding-bottom: 3px!important; }
.pt-4 { padding-top: 4px!important; }
.pb-4 { padding-bottom: 4px!important; }
.pt-5 { padding-top: 5px; }
.pb-5 { padding-bottom: 5px; }
.pt-6 { padding-top: 6px; }
.pb-6 { padding-bottom: 6px; }
.pt-7 { padding-top: 7px; }
.pb-7 { padding-bottom: 7px; }
.pt-8 { padding-top: 8px; }
.pb-8 { padding-bottom: 8px; }
.pt-9 { padding-top: 9px; }
.pb-9 { padding-bottom: 9px; }
.pt-10 { padding-top: 10px; }
.pb-10 { padding-bottom: 10px; }
.pt-15 { padding-top: 15px; }
.pb-15 { padding-bottom: 15px; }
.pt-20 { padding-top: 20px; }
.pb-20 { padding-bottom: 20px; }
.pt-25 { padding-top: 25px; }
.pb-25 { padding-bottom: 25px; }
.pt-30 { padding-top: 30px; }
.pb-30 { padding-bottom: 30px; }
.pt-40 { padding-top: 40px; }
.pb-40 { padding-bottom: 40px; }
.pt-50 { padding-top: 50px; }
.pb-50 { padding-bottom: 50px; }
.pt-60 { padding-top: 60px; }
.pb-60 { padding-bottom: 60px; }
.pt-70 { padding-top: 70px; }
.pb-70 { padding-bottom: 70px; }
.pt-80 { padding-top: 80px; }
.pb-80 { padding-bottom: 80px; }
.pt-100 { padding-top: 100px; }
.pb-100 { padding-bottom: 100px; }

/* Padding Left & Right */

.pl-5 { padding-left: 5px!important; }
.pr-5 { padding-right: 5px!important; }
.pl-10 { padding-left: 10px!important; }
.pr-10 { padding-right: 10px!important; }
.pl-15 { padding-left: 15px!important; }
.pr-15 { padding-right: 15px!important; }
.pl-20 { padding-left: 20px!important; }
.pr-20 { padding-right: 20px!important; }
.pl-25 { padding-left: 25px!important; }
.pr-25 { padding-right: 25px!important; }
.pl-30 { padding-left: 30px!important; }
.pr-30 { padding-right: 30px!important; }
.pl-35 { padding-left: 35px!important; }
.pr-35 { padding-right: 35px!important; }
.pl-40 { padding-left: 40px!important; }
.pr-40 { padding-right: 40px!important; }
.pl-50 { padding-left: 50px!important; }
.pr-50 { padding-right: 50px!important; }
.pl-60 { padding-left: 60px!important; }
.pr-60 { padding-right: 60px!important; }
.pl-70 { padding-left: 70px!important; }
.pr-70 { padding-right: 70px!important; }
.pl-80 { padding-left: 80px!important; }
.pr-80 { padding-right: 80px!important; }
.pl-90 { padding-left: 90px!important; }
.pr-90 { padding-right: 90px!important; }
.pl-100 { padding-left: 100px!important; }
.pr-100 { padding-right: 100px!important; }

/*
 * Custom Spacing Utilities: Padding and Margin (Top/Bottom, Left/Right)
 * Scale: 1 unit = 0.25rem (4px base)
 * Range: 1 (0.25rem) to 25 (6.25rem)
 */

/* =========================================================================
   1. PADDING Y (Top & Bottom)
   ========================================================================= */
.py-0 { padding-top: 0!important; padding-bottom: 0!important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-7 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
.py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-9 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
.py-10 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.py-11 { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
.py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.py-13 { padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; }
.py-14 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
.py-15 { padding-top: 3.75rem !important; padding-bottom: 3.75rem !important; }
.py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-17 { padding-top: 4.25rem !important; padding-bottom: 4.25rem !important; }
.py-18 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
.py-19 { padding-top: 4.75rem !important; padding-bottom: 4.75rem !important; }
.py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.py-21 { padding-top: 5.25rem !important; padding-bottom: 5.25rem !important; }
.py-22 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
.py-23 { padding-top: 5.75rem !important; padding-bottom: 5.75rem !important; }
.py-24 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.py-25 { padding-top: 6.25rem !important; padding-bottom: 6.25rem !important; }


/* =========================================================================
   2. PADDING X (Left & Right - using pe and ps for consistency with px)
   ========================================================================= */
/* .px-N is the standard, but using pe (end/right) as per your request */
.pe-1, .ps-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.pe-2, .ps-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.pe-3, .ps-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.pe-4, .ps-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.pe-5, .ps-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.pe-6, .ps-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.pe-7, .ps-7 { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }
.pe-8, .ps-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
.pe-9, .ps-9 { padding-left: 2.25rem !important; padding-right: 2.25rem !important; }
.pe-10, .ps-10 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
.pe-11, .ps-11 { padding-left: 2.75rem !important; padding-right: 2.75rem !important; }
.pe-12, .ps-12 { padding-left: 3rem !important; padding-right: 3rem !important; }
.pe-13, .ps-13 { padding-left: 3.25rem !important; padding-right: 3.25rem !important; }
.pe-14, .ps-14 { padding-left: 3.5rem !important; padding-right: 3.5rem !important; }
.pe-15, .ps-15 { padding-left: 3.75rem !important; padding-right: 3.75rem !important; }
.pe-16, .ps-16 { padding-left: 4rem !important; padding-right: 4rem !important; }
.pe-17, .ps-17 { padding-left: 4.25rem !important; padding-right: 4.25rem !important; }
.pe-18, .ps-18 { padding-left: 4.5rem !important; padding-right: 4.5rem !important; }
.pe-19, .ps-19 { padding-left: 4.75rem !important; padding-right: 4.75rem !important; }
.pe-20, .ps-20 { padding-left: 5rem !important; padding-right: 5rem !important; }
.pe-21, .ps-21 { padding-left: 5.25rem !important; padding-right: 5.25rem !important; }
.pe-22, .ps-22 { padding-left: 5.5rem !important; padding-right: 5.5rem !important; }
.pe-23, .ps-23 { padding-left: 5.75rem !important; padding-right: 5.75rem !important; }
.pe-24, .ps-24 { padding-left: 6rem !important; padding-right: 6rem !important; }
.pe-25, .ps-25 { padding-left: 6.25rem !important; padding-right: 6.25rem !important; }
/* NOTE: In a real environment, you would use .px-N for both L/R padding.
         For maximum utility coverage, consider including .px-N as well. */
         
         
         /* =========================================================================
   2. PADDING X (Left & Right - using pe and ps for consistency with px)
   ========================================================================= */
/* .px-N is the standard, but using pe (end/right) as per your request */
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-7 { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }
.px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
.px-9 { padding-left: 2.25rem !important; padding-right: 2.25rem !important; }
.px-10 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
.px-11 { padding-left: 2.75rem !important; padding-right: 2.75rem !important; }
.px-12 { padding-left: 3rem !important; padding-right: 3rem !important; }
.px-13 { padding-left: 3.25rem !important; padding-right: 3.25rem !important; }
.px-14 { padding-left: 3.5rem !important; padding-right: 3.5rem !important; }
.px-15 { padding-left: 3.75rem !important; padding-right: 3.75rem !important; }
.px-16 { padding-left: 4rem !important; padding-right: 4rem !important; }
.px-17 { padding-left: 4.25rem !important; padding-right: 4.25rem !important; }
.px-18 { padding-left: 4.5rem !important; padding-right: 4.5rem !important; }
.px-19 { padding-left: 4.75rem !important; padding-right: 4.75rem !important; }
.px-20 { padding-left: 5rem !important; padding-right: 5rem !important; }
.px-21 { padding-left: 5.25rem !important; padding-right: 5.25rem !important; }
.px-22 { padding-left: 5.5rem !important; padding-right: 5.5rem !important; }
.px-23 { padding-left: 5.75rem !important; padding-right: 5.75rem !important; }
.px-24 { padding-left: 6rem !important; padding-right: 6rem !important; }
.px-25 { padding-left: 6.25rem !important; padding-right: 6.25rem !important; }

/* ==================================================
   17. MARGIN
================================================== */

/* margin-left */

.ms-1  { margin-left: 0.25rem !important; }
.ms-2  { margin-left: 0.5rem !important; }
.ms-3  { margin-left: 0.75rem !important; }
.ms-4  { margin-left: 1rem !important; }
.ms-5  { margin-left: 1.25rem !important; }
.ms-6  { margin-left: 1.5rem !important; }
.ms-7  { margin-left: 1.75rem !important; }
.ms-8  { margin-left: 2rem !important; }
.ms-9  { margin-left: 2.25rem !important; }
.ms-10 { margin-left: 2.5rem !important; }
.ms-11 { margin-left: 2.75rem !important; }
.ms-12 { margin-left: 3rem !important; }
.ms-13 { margin-left: 3.25rem !important; }
.ms-14 { margin-left: 3.5rem !important; }
.ms-15 { margin-left: 3.75rem !important; }
.ms-16 { margin-left: 4rem !important; }
.ms-17 { margin-left: 4.25rem !important; }
.ms-18 { margin-left: 4.5rem !important; }
.ms-19 { margin-left: 4.75rem !important; }
.ms-20 { margin-left: 5rem !important; }
.ms-21 { margin-left: 5.25rem !important; }
.ms-22 { margin-left: 5.5rem !important; }
.ms-23 { margin-left: 5.75rem !important; }
.ms-24 { margin-left: 6rem !important; }
.ms-25 { margin-left: 6.25rem !important; }



/* margin-right */

.me-0  { margin-right: 0 !important; }
.me-1  { margin-right: 0.25rem !important; }
.me-2  { margin-right: 0.5rem !important; }
.me-3  { margin-right: 0.75rem !important; }
.me-4  { margin-right: 1rem !important; }
.me-5  { margin-right: 1.25rem !important; }
.me-6  { margin-right: 1.5rem !important; }
.me-7  { margin-right: 1.75rem !important; }
.me-8  { margin-right: 2rem !important; }
.me-9  { margin-right: 2.25rem !important; }
.me-10 { margin-right: 2.5rem !important; }
.me-11 { margin-right: 2.75rem !important; }
.me-12 { margin-right: 3rem !important; }
.me-13 { margin-right: 3.25rem !important; }
.me-14 { margin-right: 3.5rem !important; }
.me-15 { margin-right: 3.75rem !important; }
.me-16 { margin-right: 4rem !important; }
.me-17 { margin-right: 4.25rem !important; }
.me-18 { margin-right: 4.5rem !important; }
.me-19 { margin-right: 4.75rem !important; }
.me-20 { margin-right: 5rem !important; }
.me-21 { margin-right: 5.25rem !important; }
.me-22 { margin-right: 5.5rem !important; }
.me-23 { margin-right: 5.75rem !important; }
.me-24 { margin-right: 6rem !important; }
.me-25 { margin-right: 6.25rem !important; }



/* margin-left-right */

.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 0.75rem !important; margin-right: 0.75rem !important; }
.mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-5 { margin-left: 1.25rem !important; margin-right: 1.25rem !important; }
.mx-6 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-8 { margin-left: 2rem !important; margin-right: 2rem !important; }
.mx-10 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; }
.mx-15 { margin-left: 3.75rem !important; margin-right: 3.75rem !important; }
.mx-20 { margin-left: 5rem !important; margin-right: 5rem !important; }
.mx-25 { margin-left: 6.25rem !important; margin-right: 6.25rem !important; }


/* margin-top */

.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.mt-70 { margin-top: 70px; }
.mt-80 { margin-top: 80px; }
.mt-100 { margin-top: 100px; }


/* margin-bottom */

.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }
.mb-70 { margin-bottom: 70px; }
.mb-80 { margin-bottom: 80px; }
.mb-100 { margin-bottom: 100px; }

.no-margin { margin: 0 !important; }
.no-padding { padding: 0 !important; }


/* margin-top and bottom */

.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-5 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
.my-6 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-7 { margin-top: 1.75rem !important; margin-bottom: 1.75rem !important; }
.my-8 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.my-9 { margin-top: 2.25rem !important; margin-bottom: 2.25rem !important; }
.my-10 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }
.my-11 { margin-top: 2.75rem !important; margin-bottom: 2.75rem !important; }
.my-12 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.my-13 { margin-top: 3.25rem !important; margin-bottom: 3.25rem !important; }
.my-14 { margin-top: 3.5rem !important; margin-bottom: 3.5rem !important; }
.my-15 { margin-top: 3.75rem !important; margin-bottom: 3.75rem !important; }
.my-16 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
.my-17 { margin-top: 4.25rem !important; margin-bottom: 4.25rem !important; }
.my-18 { margin-top: 4.5rem !important; margin-bottom: 4.5rem !important; }
.my-19 { margin-top: 4.75rem !important; margin-bottom: 4.75rem !important; }
.my-20 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
.my-21 { margin-top: 5.25rem !important; margin-bottom: 5.25rem !important; }
.my-22 { margin-top: 5.5rem !important; margin-bottom: 5.5rem !important; }
.my-23 { margin-top: 5.75rem !important; margin-bottom: 5.75rem !important; }
.my-24 { margin-top: 6rem !important; margin-bottom: 6rem !important; }
.my-25 { margin-top: 6.25rem !important; margin-bottom: 6.25rem !important; }



/* Opacity */
.opacity-1 { opacity: 0.1; }
.opacity-2 { opacity: 0.2; }
.opacity-3 { opacity: 0.3; }
.opacity-4 { opacity: 0.4; }
.opacity-5 { opacity: 0.5; }
.opacity-6 { opacity: 0.6; }
.opacity-7 { opacity: 0.7; }
.opacity-8 { opacity: 0.8; }
.opacity-9 { opacity: 0.9; }

/* Box Shadows */
.box-shadow-light { box-shadow: 0 0 3px rgba(0,0,0,.1); }
.box-shadow { box-shadow: 0 0 3px rgba(0,0,0,.2); }
.box-shadow-large { box-shadow: 0 0 12px rgba(0,0,0,.1); }

/* Z-Index */
.z-index-1 { z-index: 1; }
.z-index-2 { z-index: 2; }