h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}

h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}

h4 {
  font-size: clamp(1.25rem, 2.5vw, 2rem);
}

h5 {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}

h6 {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}

p {
  font-size: 15px;

  font-weight: 400;

  line-height: 1.4;

  color: var(--text);
}

button {
  font-size: 14px;
}

a {
  font-size: 14px;
}

img {
  width: 100%;

  display: block;
}

a {
  color: inherit;

  text-decoration: none;
}

button {
  border: 0;

  cursor: pointer;

  font-family: inherit;
}

ul {
  list-style: none;
}

/*==================================================
    CONTAINER
==================================================*/

.container {
  width: min(1320px, 92%);

  margin-left: auto;

  margin-right: auto;
}

:root {
  /* Existing colors */
  --color-primary: #e59c00;
  --color-secondary: #e59c00;
  --dark-blue: #001e41;

  --color-dark: #111111;
  --color-black: #0d0d0d;
  --color-text: #666666;
  --color-text2: #dddddd;

  --color-btn-dark: #242424;
  --color-white: #ffffff;
  --color-offwhite: #f8f6f3;
  --color-gray: #f5f5f5;

  /* New Gondola / Luxury Colors */
  --color-cream: #f5eddf;
  --color-beige: #e8d8bf;
  --color-gold-light: #d9b86c;
  --color-gold-dark: #9f6d08;

  /* Fonts */
  --font-primary: "Montserrat", sans-serif;
  --font-secondary: "Playfair Display", serif;

  /* Container */
  --container-max: 1240px;

  /* Existing spacing */
  --space-0: 0px;
  --space-5: 5px;
  --space-10: 10px;
  --space-15: 15px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-80: 80px;
  --space-98: 98px;
  --space-110: 110px;
  --space-125: 125px;
  --space-150: 150px;
}

/* ---------------------------------------------------------
   2. CONTAINER / ROW / COLUMN  (already .container, .row,
      .col-cmn ache style.css e - eta shudhu extra helper)
   --------------------------------------------------------- */
.container-fluid {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.row > [class*="col-"] {
  padding-left: 15px;
  padding-right: 15px;
}

/* ---------------------------------------------------------
   3. DISPLAY UTILITIES
   --------------------------------------------------------- */
.d-block {
  display: block !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-none {
  display: none !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-grid {
  display: grid !important;
}

/* ---------------------------------------------------------
   4. FLEXBOX UTILITIES
   --------------------------------------------------------- */
.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.justify-start {
  justify-content: flex-start !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-around {
  justify-content: space-around !important;
}

.align-start {
  align-items: flex-start !important;
}

.align-center {
  align-items: center !important;
}

.align-end {
  align-items: flex-end !important;
}

.gap-5 {
  gap: 5px !important;
}

.gap-8 {
  gap: 8px !important;
}

.gap-10 {
  gap: 10px !important;
}

.gap-12 {
  gap: 12px !important;
}

.gap-15 {
  gap: 15px !important;
}

.gap-18 {
  gap: 18px !important;
}

.gap-20 {
  gap: 20px !important;
}

.gap-25 {
  gap: 25px !important;
}

.gap-28 {
  gap: 28px !important;
}

.gap-30 {
  gap: 30px !important;
}

.gap-35 {
  gap: 35px !important;
}

.gap-38 {
  gap: 38px !important;
}

.gap-40 {
  gap: 40px !important;
}

.gap-50 {
  gap: 50px !important;
}

.gap-60 {
  gap: 60px !important;
}

.gap-80 {
  gap: 80px !important;
}

/* common flex combo shortcuts - most used pattern in headers/navbars */
.flex-center {
  display: flex !important;
  align-items: center !important;
}

.flex-center-between {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.flex-center-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.inline-flex-center {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---------------------------------------------------------
   5. GRID UTILITIES
   --------------------------------------------------------- */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

@media (max-width: 991px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   6. SPACING UTILITIES - PADDING
   (already p-t-60/p-b-60 style ache style.css e, eikhane
   aro sob size ekshathe rakha holo - jate notun kono size
   lagle bar bar CSS likhte na hoy)
   --------------------------------------------------------- */

.p-0 {
  padding: 0 !important;
}

.p-5 {
  padding: 5px !important;
}

.p-10 {
  padding: 10px !important;
}

.p-15 {
  padding: 15px !important;
}

.p-20 {
  padding: 20px !important;
}

.p-25 {
  padding: 25px !important;
}

.p-30 {
  padding: 30px !important;
}

.p-40 {
  padding: 40px !important;
}

.p-50 {
  padding: 50px !important;
}

.p-60 {
  padding: 60px !important;
}

.p-80 {
  padding: 80px !important;
}

.p-98 {
  padding: 98px !important;
}

.p-110 {
  padding: 110px !important;
}

.p-125 {
  padding: 125px !important;
}

.p-150 {
  padding: 150px !important;
}

.m-0 {
  margin: 0 !important;
}

.m-5 {
  margin: 5px !important;
}

.m-10 {
  margin: 10px !important;
}

.m-15 {
  margin: 15px !important;
}

.m-20 {
  margin: 20px !important;
}

.m-25 {
  margin: 25px !important;
}

.m-30 {
  margin: 30px !important;
}

.m-40 {
  margin: 40px !important;
}

.m-50 {
  margin: 50px !important;
}

.m-60 {
  margin: 60px !important;
}

.m-80 {
  margin: 80px !important;
}

.m-98 {
  margin: 98px !important;
}

.m-110 {
  margin: 110px !important;
}

.m-125 {
  margin: 125px !important;
}

.m-150 {
  margin: 150px !important;
}

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

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

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

.p-t-10 {
  padding-top: var(--space-10) !important;
}

.p-b-10 {
  padding-bottom: var(--space-10) !important;
}

.p-t-15 {
  padding-top: var(--space-15) !important;
}

.p-b-15 {
  padding-bottom: var(--space-15) !important;
}

.p-t-20 {
  padding-top: var(--space-20) !important;
}

.p-b-20 {
  padding-bottom: var(--space-20) !important;
}

.p-t-25 {
  padding-top: var(--space-25) !important;
}

.p-b-25 {
  padding-bottom: var(--space-25) !important;
}

.p-t-30 {
  padding-top: var(--space-30) !important;
}

.p-b-30 {
  padding-bottom: var(--space-30) !important;
}

.p-t-40 {
  padding-top: var(--space-40) !important;
}

.p-b-40 {
  padding-bottom: var(--space-40) !important;
}

.p-t-50 {
  padding-top: var(--space-50) !important;
}

.p-b-50 {
  padding-bottom: var(--space-50) !important;
}

.p-t-60 {
  padding-top: var(--space-60) !important;
}

.p-b-60 {
  padding-bottom: var(--space-60) !important;
}

.p-t-80 {
  padding-top: var(--space-80) !important;
}

.p-b-80 {
  padding-bottom: var(--space-80) !important;
}

.p-t-98 {
  padding-top: var(--space-98) !important;
}

.p-b-98 {
  padding-bottom: var(--space-98) !important;
}

.p-t-110 {
  padding-top: var(--space-110) !important;
}

.p-b-110 {
  padding-bottom: var(--space-110) !important;
}

.p-t-125 {
  padding-top: var(--space-125) !important;
}

.p-b-125 {
  padding-bottom: var(--space-125) !important;
}

.p-t-150 {
  padding-top: var(--space-150) !important;
}

.p-b-150 {
  padding-bottom: var(--space-150) !important;
}

/* Padding Left */

.p-l-0 {
  padding-left: 0 !important;
}

.p-l-5 {
  padding-left: 5px !important;
}

.p-l-10 {
  padding-left: 10px !important;
}

.p-l-15 {
  padding-left: 15px !important;
}

.p-l-20 {
  padding-left: 20px !important;
}

.p-l-25 {
  padding-left: 25px !important;
}

.p-l-30 {
  padding-left: 30px !important;
}

.p-l-40 {
  padding-left: 40px !important;
}

.p-l-50 {
  padding-left: 50px !important;
}

.p-l-60 {
  padding-left: 60px !important;
}

/* Padding Right */

.p-r-0 {
  padding-right: 0 !important;
}

.p-r-5 {
  padding-right: 5px !important;
}

.p-r-10 {
  padding-right: 10px !important;
}

.p-r-15 {
  padding-right: 15px !important;
}

.p-r-20 {
  padding-right: 20px !important;
}

.p-r-25 {
  padding-right: 25px !important;
}

.p-r-30 {
  padding-right: 30px !important;
}

.p-r-40 {
  padding-right: 40px !important;
}

.p-r-50 {
  padding-right: 50px !important;
}

.p-r-60 {
  padding-right: 60px !important;
}

/* ---------------------------------------------------------
   7. SPACING UTILITIES - MARGIN
   --------------------------------------------------------- */
.m-0 {
  margin: var(--space-0) !important;
}

.m-t-0 {
  margin-top: var(--space-0) !important;
}

.m-b-0 {
  margin-bottom: var(--space-0) !important;
}

.m-t-10 {
  margin-top: var(--space-10) !important;
}

.m-b-10 {
  margin-bottom: var(--space-10) !important;
}

.m-t-15 {
  margin-top: var(--space-15) !important;
}

.m-b-15 {
  margin-bottom: var(--space-15) !important;
}

.m-t-20 {
  margin-top: var(--space-20) !important;
}

.m-b-20 {
  margin-bottom: var(--space-20) !important;
}

.m-t-25 {
  margin-top: var(--space-25) !important;
}

.m-b-25 {
  margin-bottom: var(--space-25) !important;
}

.m-t-30 {
  margin-top: var(--space-30) !important;
}

.m-b-30 {
  margin-bottom: var(--space-30) !important;
}

.m-t-40 {
  margin-top: var(--space-40) !important;
}

.m-b-40 {
  margin-bottom: var(--space-40) !important;
}

.m-t-50 {
  margin-top: var(--space-50) !important;
}

.m-b-50 {
  margin-bottom: var(--space-50) !important;
}

.m-t-60 {
  margin-top: var(--space-60) !important;
}

.m-b-60 {
  margin-bottom: var(--space-60) !important;
}

.m-t-80 {
  margin-top: var(--space-80) !important;
}

.m-b-80 {
  margin-bottom: var(--space-80) !important;
}

.m-t-98 {
  margin-top: var(--space-98) !important;
}

.m-b-98 {
  margin-bottom: var(--space-98) !important;
}

.m-t-125 {
  margin-top: var(--space-125) !important;
}

.m-b-125 {
  margin-bottom: var(--space-125) !important;
}

.m-t-150 {
  margin-top: var(--space-150) !important;
}

.m-b-150 {
  margin-bottom: var(--space-150) !important;
}

/* ---------------------------------------------------------
   8. TEXT / TYPOGRAPHY UTILITIES
   --------------------------------------------------------- */
.text-left {
  text-align: left !important;
}

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

.text-right {
  text-align: right !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

/* ---------------------------------------------------------
   9. COLOR / BACKGROUND UTILITIES (existing blackBG,
      offWhiteBG, lightBlueBG ইতিমধ্যে style.css এ ache -
      eikhane ekটু generic text/bg color add kora holo)
   --------------------------------------------------------- */
.text-dark {
  color: var(--color-dark) !important;
}

.text-body {
  color: var(--color-text) !important;
}

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

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

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

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

.bg-dark {
  background: var(--color-black) !important;
}

/* ---------------------------------------------------------
   10. WIDTH / HEIGHT UTILITIES
   --------------------------------------------------------- */
.w-100 {
  width: 100% !important;
}

.w-75 {
  width: 75% !important;
}

.w-50 {
  width: 50% !important;
}

.w-25 {
  width: 25% !important;
}

.h-100 {
  height: 100% !important;
}

.mw-100 {
  max-width: 100% !important;
}

/* ---------------------------------------------------------
   11. POSITION UTILITIES
   --------------------------------------------------------- */
.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

/* ---------------------------------------------------------
   12. RESPONSIVE HELPERS
   --------------------------------------------------------- */
@media (max-width: 991px) {
  .d-lg-none {
    display: none !important;
  }

  .p-t-60,
  .p-t-98,
  .p-t-125,
  .p-t-150 {
    padding-top: 40px !important;
  }

  .p-b-60,
  .p-b-98,
  .p-b-125,
  .p-b-150 {
    padding-bottom: 40px !important;
  }
}

@media (max-width: 767px) {
  .d-md-none {
    display: none !important;
  }
}

@media (max-width: 576px) {
  .d-sm-none {
    display: none !important;
  }

  .text-center-sm {
    text-align: center !important;
  }
}