/* ---------------------------------------------------------
   1. ROOT VARIABLES  (color, font, spacing - ekhane change korle
      puro site update hoye jabe)
   --------------------------------------------------------- */
:root {
   /* Colors */
   --color-primary: #bd1717;
   /* gold/accent - h5, links */
   --color-secondary: #e59c00;
   /* anchor default color */
   --color-dark: #111111;
   /* headings */
   --color-black: #0d0d0d;
   /* blackBG section */
   --color-text: #666666;
   --color-text2: #dddddd;

   /* body text */
   --color-btn-dark: #242424;
   /* button bg */
   --color-white: #ffffff;
   --color-offwhite: #f8f6f3;
   --color-gray: #f5f5f5;

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

 

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

   /* Spacing scale - সব utility class ei scale follow kore */
   --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-t-125 {
   padding-top: var(--space-125) !important;
}

.p-b-110 {
   padding-bottom: var(--space-110) !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;
   }
}