/* ======================================================
   @IMPORTS
   Description: Import external fonts and dependency stylesheets
   ====================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import "animate.css";
@import "magnific-popup.css";
@import "swiper-bundle.min.css";
@import "nice-select.css";
@import "odometer.css";

/* ======================================================
   CSS TABLE OF CONTENT (for SCSS or Modular Development)
   # mixin
   # variables
   # Typography
   # button 
   # animation
   # banner
   # blog
   # header
   # section
   # footer
   ====================================================== */

/* ======================================================
   ROOT VARIABLES
   Description: Define global color palette and theme variables
   ====================================================== */
:root {
  --body: #ffffff;
  --white: #ffffff;

  --theme: #12410d;
  
  --black: #222222;
  --subtitle: #275c53;
  --base: #4baf47;
  --pra: #888;
  --footer: #181818;
  --border: #cccccc;
  --border1: #414141;
  --ratting: #FF8000;
}

/* ======================================================
   GLOBAL RESET
   Description: Basic HTML reset and default body styling
   ====================================================== */
body {
  color: var(--white);
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  background-color: var(--body);
}

/* ======================================================
   HEADINGS (H1–H6)
   Description: Typography rules for headings
   ====================================================== */
h1 {
  font-size: 68px;
  font-weight: 600;
  line-height: 120%;
  font-family: "DM Sans", sans-serif;
}
h2, h3, h4, h5, h6 {
  color: var(--black);
  font-family: "DM Sans", sans-serif;
  text-transform: capitalize;
}
h2 {
  font-size: 40px;
  line-height: 140%;
  font-weight: 500;
}
@media (max-width: 575px) {
  h2 { font-size: 24px; }
}
h3 {
  font-size: 32px;
  line-height: 120%;
  font-weight: 600;
}
@media (max-width: 575px) {
  h3 { font-size: 26px; }
}
h4 { font-size: 24px; line-height: 130%; font-weight: 600; }
h5 { font-size: 20px; line-height: 130%; font-weight: 600; }
h6 { font-size: 16px; line-height: 130%; font-weight: 600; }

/* ======================================================
   BASE ELEMENT STYLING
   Description: Links, inputs, paragraphs, lists
   ====================================================== */
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
a {
  text-decoration: none;
  text-transform: capitalize;
  margin: 0;
  color: var(--black);
  font-family: "DM Sans", sans-serif;
  transition: all 0.3s;
}
a:hover {
  text-decoration: none;
  color: var(--title);
}
input, input:focus {
  color: var(--white);
  outline: none;
}
p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 0;
  color: var(--pra);
  font-family: "DM Sans", sans-serif;
}

/* ======================================================
   FONT SIZE HELPERS
   Description: Utility classes for responsive font sizing
   ====================================================== */
.fz-14 { font-size: 14px; }
.fz-16 { font-size: 16px; }
@media (max-width: 767px) {
  .fz-16 { font-size: 14px; }
}
.fz-18 { font-size: 18px; }
@media (max-width: 767px) {
  .fz-18 { font-size: 16px; }
}
.fz-20 { font-size: 20px; }
@media (max-width: 767px) {
  .fz-20 { font-size: 18px; }
}
.fz-24 { font-size: 24px; }
@media (max-width: 767px) {
  .fz-24 { font-size: 20px; }
}
.fz-26 { font-size: 26px; }
@media (max-width: 767px) {
  .fz-26 { font-size: 22px; }
}
.fz-30 { font-size: 30px; }
@media (max-width: 767px) {
  .fz-30 { font-size: 26px; }
}
.fz-32, .ifz32 { font-size: 32px; }
@media (max-width: 767px) {
  .fz-32 { font-size: 28px; }
}
.fz-38 { font-size: 38px; }

/* ======================================================
   FONT WEIGHT HELPERS
   Description: Utility classes for font weight styling
   ====================================================== */
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* ======================================================
   DISPLAY TEXT CLASSES
   Description: Special typography classes for large headlines
   ====================================================== */
.d1 { font-size: 80px; line-height: 150%; font-weight: 600; }
.d2 { font-size: 72px; line-height: 150%; font-weight: 600; }
.d3 { font-size: 64px; line-height: 150%; font-weight: 600; }
.d4 { font-size: 56px; line-height: 150%; font-weight: 600; }

/* ======================================================
   PARAGRAPH SIZE CLASSES
   Description: Font-size + line-height utilities for body text
   ====================================================== */
.pfz-24 { font-size: 24px; line-height: 150%; }
.pfz-20 { font-size: 20px; line-height: 150%; }
.pfz-18 { font-size: 18px; line-height: 150%; }
.pfz-16 { font-size: 16px; line-height: 150%; }
.pfz-14 { font-size: 14px; line-height: 150%; }
.pfz-12 { font-size: 12px; line-height: 150%; }

/* ======================================================
   PADDING UTILITIES
   Description: Responsive spacing for top/bottom padding
   ====================================================== */
.p-24 { padding: 24px; }
@media (max-width: 991px) {
  .p-24 { padding: 20px; }
}
@media (max-width: 575px) {
  .p-24 { padding: 15px; }
}
.pt-130 { padding-top: 130px; }
.pb-130 { padding-bottom: 130px; }
.pt-120 { padding-top: 120px; }
.pb-120 { padding-bottom: 120px; }
.pt-110 { padding-top: 110px; }
.pb-110 { padding-bottom: 110px; }
.pt-90  { padding-top: 90px; }
.pb-90  { padding-bottom: 90px; }
.pt-80  { padding-top: 80px; }
.pb-80  { padding-bottom: 80px; }
.pt-60  { padding-top: 60px; }
.pb-60  { padding-bottom: 60px; }
.pt-40  { padding-top: 40px; }
.pb-40  { padding-bottom: 40px; }
.pt-30  { padding-top: 30px; }
.pb-30  { padding-bottom: 30px; }
.pt-24  { padding-top: 24px; }
.pb-24  { padding-bottom: 24px; }
.pt-20  { padding-top: 20px; }
.pb-20  { padding-bottom: 20px; }
.pt-16  { padding-top: 16px; }
.pb-16  { padding-bottom: 16px; }
.pt-15  { padding-top: 15px; }
.pb-15  { padding-bottom: 15px; }
.pt-10  { padding-top: 10px; }
.pb-10  { padding-bottom: 10px; }
.pt5     { padding-top: 5px; }
.pb5     { padding-bottom: 5px; }
.p-8     { padding: 8px; }

/* ======================================================
   MARGIN UTILITIES
   Description: Responsive spacing for top/bottom margin
   ====================================================== */
.mt-120 { margin-top: 120px; }
.mb-120 { margin-bottom: 120px; }
.mt-100 { margin-top: 100px; }
.mb-100 { margin-bottom: 100px; }
.mt-80  { margin-top: 80px; }
.mb-80  { margin-bottom: 80px; }
.mt-60  { margin-top: 60px; }
.mb-60  { margin-bottom: 60px; }
.mt-50  { margin-top: 52px; }
.mb-50  { margin-bottom: 52px; }
.mt-40  { margin-top: 40px; }
.mb-40  { margin-bottom: 40px; }
.mt-30  { margin-top: 30px; }
.mb-30  { margin-bottom: 30px; }
.mt-24  { margin-top: 24px; }
.mb-24  { margin-bottom: 24px; }
.mt-20  { margin-top: 20px; }
.mb-20  { margin-bottom: 20px; }
.mt-16  { margin-top: 16px; }
.mb-16  { margin-bottom: 16px; }
.mt-15  { margin-top: 15px; }
.mb-15  { margin-bottom: 15px; }
.mt-10  { margin-top: 10px; }
.mb-10  { margin-bottom: 10px; }
.mt-8   { margin-top: 8px; }
.mb-8   { margin-bottom: 8px; }
.mt5    { margin-top: 5px; }
.mb5    { margin-bottom: 5px; }
















/* ======================================================
   BASE TYPOGRAPHY AND COLOR UTILITIES
   Description: Font, color, alignment, overflow, transforms
   ====================================================== */
.bodyfont {
  font-family: "DM Sans", sans-serif;
}

.ftext {
  color: var(--ftext);
}

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

.primary-hover:hover {
  color: var(--theme);
}

.blacks {
  color: #181818 !important;
}

.icolor1 {
  color: var(--icolor1);
}

.icolor2 {
  color: var(--icolor2);
}

.tcapi {
  text-transform: capitalize;
}

.center {
  text-align: center;
  margin: 0 auto;
}

.overhid {
  overflow: hidden;
}

/* ======================================================
   BORDER AND RADIUS UTILITIES
   Description: Quick classes for rounded corners and borders
   ====================================================== */
.round5 { border-radius: 5px; }
.round10 { border-radius: 10px; }
.round16 { border-radius: 16px; }
.round20 { border-radius: 20px; }
.round50 { border-radius: 50%; }

.btnround5 { border-radius: 5px !important; }

.bor { border: 1px solid var(--border); }
.bor-top { border-top: 1px solid var(--border); }
.bor-left { border-left: 1px solid var(--border); }
.bor-bottom { border-bottom: 1px solid var(--border); }
.bor-right { border-right: 1px solid var(--border); }
.border-none { border: none !important; }

/* ======================================================
   SHADOW UTILITIES
   Description: Drop shadow variations
   ====================================================== */
.shadow1 {
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
}
.shadow2 {
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.04);
}
.shadow6 {
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.06);
}

/* ======================================================
   PAGINATION STYLES
   Description: Styles for numbered pagination elements
   ====================================================== */
.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pagination a {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  border: 1px solid var(--base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--base);
  transition: all 0.4s;
}
.pagination a:hover {
  background: var(--base);
  color: var(--white);
  border-color: var(--base);
}
.pagination a:hover i {
  color: var(--white);
}
.pagination a span {
  margin-top: -4px;
}
.pagination a span i {
  font-size: 22px;
  color: var(--text);
}
.pagination .border-added {
  border: none;
  width: 44px;
  height: 44px;
}

/* ======================================================
   SWIPER DOT STYLES
   Description: Bullet pagination for Swiper components
   ====================================================== */
.swiper-dot .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 100px;
  transition: 0.6s;
  border: 1px solid var(--theme);
  background-color: var(--white);
  opacity: 1;
}
.swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--theme);
  transition: 0.6s;
}

/* ======================================================
   SOCIAL ICON LISTS
   Description: Common styles for social icons
   ====================================================== */
.social {
  gap: 12px;
}
.social li a {
  width: 36px;
  height: 36px;
  display: flex;
  border-radius: 50%;
  border: 1px solid var(--base);
  align-items: center;
  justify-content: center;
}
.social li a i {
  color: var(--white);
  font-size: 16px;
}

/* ======================================================
   GENERIC ICON BUTTONS
   Description: Common circular icon wrapper
   ====================================================== */
.cmn__icon {
  width: 36px;
  height: 36px;
  display: flex;
  border-radius: 50%;
  border: 1px solid var(--base);
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--white);
}
.cmn__icon i {
  color: var(--white);
  font-size: 16px;
}

/* ======================================================
   SECTION TITLE STYLING
   Description: Title and subtitle styles for sections
   ====================================================== */
.section__title {
  max-width: 650px;
  text-align: center;
  margin: 0 auto 50px;
}
.section__title h6 {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--subtitle);
  margin-bottom: 5px;
  text-transform: uppercase;
}
.section__title h2 {
  text-transform: capitalize;
  font-size: 42px;
}
@media (max-width: 1199px) {
  .section__title h2 { font-size: 38px; }
}
@media (max-width: 767px) {
  .section__title h2 { font-size: 36px; }
}
@media (max-width: 575px) {
  .section__title h2 { font-size: 32px; }
}
@media (max-width: 500px) {
  .section__title h2 { font-size: 28px; }
}
@media (max-width: 470px) {
  .section__title h2 { font-size: 24px; }
}

/* ======================================================
   SUBTITLE DECORATION
   Description: Subtitle with underline accent
   ====================================================== */
.sub__tittle h6 {
  text-transform: uppercase;
  color: var(--subtitle);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  position: relative;
}
.sub__tittle h6::before {
  position: absolute;
  top: 7px;
  left: 220px;
  width: 60px;
  height: 1px;
  content: "";
  background-color: var(--subtitle);
}

/* ======================================================
   LAYOUT UTILITIES
   Description: Reusable layout helpers
   ====================================================== */
.ralt {
  position: relative;
}
.section__bg {
  background-color: #f5f0ea;
}
@media (min-width: 992px) {
  .img__ending {
    justify-content: flex-end;
  }
}
.bgwhite {
  background: var(--white);
}
.boxes1 {
  background: var(--boxes1);
}
.boxes2 {
  background: var(--boxes2);
}
.boxes3 {
  background: var(--boxes3);
}
.boxes4 {
  background: var(--boxes4);
}

/* ======================================================
   SCROLLBAR STYLES
   Description: Custom Webkit-based scrollbars
   ====================================================== */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--theme-bg);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background: var(--base);
  border-radius: 10px;
}

/* ======================================================
   SOCIAL PLATFORM COLORS
   Description: Background colors for social media buttons
   ====================================================== */
.twitter {
  background: var(--secoundary-color) !important;
}
.twitch {
  background: rgb(110, 60, 210) !important;
}
.youtube {
  background: rgb(172, 46, 46) !important;
}
.insta {
  background: rgb(207, 93, 93) !important;
}
.lind {
  background: rgb(78, 131, 228) !important;
}
.face {
  background: rgb(27, 114, 244) !important;
}

/* ======================================================
   HEADER TOP BAR
   Description: Top strip above main header for info and social
   ====================================================== */
.header__top {
  padding: 10px 0px;
}
@media (max-width: 991px) {
  .header__top {
    display: none;
  }
}
.header__top .header__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__top .header__wrapper .info {
  display: flex;
  align-items: center;
}
.header__top .header__wrapper .info li {
  font-size: 16px;
  color: var(--black);
  font-weight: 500;
}
.header__top .header__wrapper .info li:not(:last-child) {
  margin-right: 20px;
}
.header__top .header__wrapper .info li i {
  margin-right: 5px;
  color: var(--theme);
}
.header__top .header__wrapper .social__icon li {
  border: 1px solid var(--theme);
  border-radius: 100%;
  width: 30px;
  height: 30px;
  line-height: 28px;
}
.header__top .header__wrapper .social__icon li a i {
  color: var(--theme);
  font-size: 14px;
  transition: all 0.4s ease-in-out;
}
.header__top .header__wrapper .social__icon li:hover a i {
  color: var(--white);
}

/* ======================================================
   MAIN HEADER SECTION ONE
   Description: Base header styling with theme background
   ====================================================== */

.header__one {
  background: var(--theme);
  padding: 25px 0;
}

/* ======================================================

====================================================== */










/* ======================================================
   HEADER LOGO VISIBILITY CONTROL
   Description: Controls visibility of logo in different states
   ====================================================== */
.header__two .logo__menuadjust .main__logo {
  display: none; /* Hide logo by default on larger screens */
}

@media (max-width: 991px) {
  .header__two .logo__menuadjust .main__logo {
    display: block; /* Show logo on small screens */
  }
}

/* ======================================================
   FIXED HEADER BEHAVIOR
   Description: Styles for sticky/fixed menu behavior
   ====================================================== */
.menu-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  transition: all 0.9s;
  background: var(--theme); /* Primary theme background */
}

.menu-fixed .logo__menuadjust .main__logo {
  display: block; /* Ensure logo is always shown when header is fixed */
}

/* ======================================================
   HEADER WRAPPER
   Description: Flex container for header layout
   ====================================================== */
.header-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  transition: all 0.9s;
  width: 100%;
  position: relative;
}

/* ======================================================
   LOGO AND MENU ADJUST SECTION
   Description: Space between logo and menu elements
   ====================================================== */
.header-wrapper .logo__menuadjust {
  display: flex;
  align-items: center;
  gap: 150px; /* Large gap between logo and menu */
}

@media (max-width: 1199px) {
  .header-wrapper .logo__menuadjust {
    gap: 50px; /* Smaller gap on medium screens */
  }
}

/* ======================================================
   MENU COMPONENTS
   Description: Styles for icons and menu items
   ====================================================== */
.header-wrapper .menu__components {
  display: flex;
  align-items: center;
  gap: 20px; /* Space between menu icons */
}

.header-wrapper .menu__components i {
  color: var(--white); /* Icons appear in white */
}

.header-wrapper .menu__components .fa-bars {
  font-size: 28px;
  cursor: pointer;
  display: inline-block;
}

@media (max-width: 991px) {
  .header-wrapper .menu__components .fa-bars {
    display: none; /* Hide burger icon on mobile */
  }
}





/* ======================================================
   HEADER LOGO VISIBILITY CONTROL
   Description: Controls visibility of logo in different states
   ====================================================== */
.header__two .logo__menuadjust .main__logo {
  /* Keep display: none/block rules as is if they control visibility based on header type or responsiveness */
  display: none; /* Hide logo by default on larger screens */
}

@media (max-width: 991px) {
  .header__two .logo__menuadjust .main__logo {
    display: block; /* Show logo on small screens */
  }
}

/* ======================================================
   FIXED HEADER BEHAVIOR
   Description: Styles for sticky/fixed menu behavior
   ====================================================== */
.menu-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  transition: all 0.9s;
  background: var(--theme); /* Primary theme background */
  /* If you want the logo to overflow *even when fixed*, remove overflow: hidden from THIS rule.
     If you want it clipped when fixed, keep it. */
  /* Let's remove it to allow consistent overflow as per your request */
  /* REMOVE THIS LINE: */ /* overflow: hidden; */
}

.menu-fixed .logo__menuadjust .main__logo {
  display: block; /* Ensure logo is always shown when header is fixed */
}

/* ======================================================
   HEADER WRAPPER
   Description: Flex container for header layout
   ====================================================== */
.header-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  transition: all 0.9s;
  width: 100%;
  position: relative; /* Make this relative for positioning children if needed */
  /* Ensure the main header wrapper allows visual overflow from its children */
  overflow: visible; /* <--- ENSURE THIS IS VISIBLE */
}

/* ======================================================
   LOGO AND MENU ADJUST SECTION
   Description: Space between logo and menu elements
   ====================================================== */
.header-wrapper .logo__menuadjust {
  display: flex; /* Keep flex layout for the logo container */
  align-items: center; /* Vertically align items *within* logo__menuadjust */
  gap: 150px; /* Keep the gap to push the menu */
  /* Ensure this flex item does not shrink or grow in the parent header-wrapper flex container */
  flex-shrink: 0;
  flex-grow: 0;
  /* Ensure this container allows the logo's visual overflow */
  overflow: visible; /* <--- ENSURE THIS IS VISIBLE */
  /* Make this relative for absolute logo image positioning - THIS IS IMPORTANT */
  position: relative; /* <--- ENSURE THIS IS RELATIVE */
  /* Add top padding to create space *above* the logo container within this item's area */
  padding-top: 10px; /* <--- ADD TOP PADDING HERE for space above the logo */
}

@media (max-width: 1199px) {
  .header-wrapper .logo__menuadjust {
    gap: 50px; /* Smaller gap on medium screens */
  }
}

/* ======================================================
   MENU COMPONENTS
   Description: Styles for icons and menu items
   ====================================================== */
.header-wrapper .menu__components {
  display: flex;
  align-items: center;
  gap: 20px; /* Space between menu icons */
}

.header-wrapper .menu__components i {
  color: var(--white); /* Icons appear in white */
}

.header-wrapper .menu__components .fa-bars {
  font-size: 28px;
  cursor: pointer;
  display: inline-block;
}

@media (max-width: 991px) {
  .header-wrapper .menu__components .fa-bars {
    display: none; /* Hide burger icon on mobile */
  }
}













/* ======================================================
   HEADER LOGO VISIBILITY CONTROL
   Description: Controls visibility of logo in different states
   ====================================================== */
/* These rules control when the logo container (.main__logo) is displayed, not its internal size or position. */
.header__two .logo__menuadjust .main__logo {
  /* Keep display: none/block rules as is if they control visibility based on header type or responsiveness */
  display: none; /* Hide logo by default on larger screens */
}

@media (max-width: 991px) {
  .header__two .logo__menuadjust .main__logo {
    display: block; /* Show logo on small screens */
  }
}

/* ======================================================
   FIXED HEADER BEHAVIOR
   Description: Styles for sticky/fixed menu behavior
   ====================================================== */
/* This rule applies when the header becomes sticky as you scroll down. */
.menu-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  transition: all 0.9s; /* This controls the smooth transition of the header becoming fixed */
  background: var(--theme); /* Primary theme background */
  /* REMOVE overflow: hidden from this rule so the logo can overflow visually *even when this fixed container is active*. */
  /* The clipping when sticky will be handled by a rule on .header-wrapper when inside .menu-fixed */
  /* overflow: hidden; */ /* <--- ENSURE THIS LINE IS NOT PRESENT OR COMMENTED OUT */
}

.menu-fixed .logo__menuadjust .main__logo {
  display: block; /* Ensure logo is always shown when header is fixed */
}

/* ======================================================
   HEADER WRAPPER
   Description: Flex container for header layout
   ====================================================== */
/* This is the main flex container inside the header. */
.header-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* Vertically aligns items (like .logo__menuadjust and .main-menu) */
  justify-content: space-between;
  transition: all 0.9s; /* This controls the smooth transition of the header wrapper itself */
  width: 100%;
  position: relative; /* Make this relative for positioning children if needed */
  /* Ensure the main header wrapper allows visual overflow from its children in the DEFAULT (non-sticky) state */
  overflow: visible; /* <--- ENSURE THIS IS VISIBLE IN DEFAULT STATE */
}

/* ======================================================
   LOGO AND MENU ADJUST SECTION
   Description: Container for logo and space to menu elements
   ====================================================== */
/* This div contains the actual logo element and defines the space between the logo and the menu items */
.header-wrapper .logo__menuadjust {
  display: flex; /* Keep flex layout for this container */
  align-items: center; /* Vertically align items *within* logo__menuadjust (like .main__logo) */
  gap: 150px; /* Keep the gap to push the menu items away horizontally */
  /* Ensure this flex item does not shrink or grow in the parent header-wrapper flex container */
  flex-shrink: 0;
  flex-grow: 0;
  /* Ensure this container allows the logo's visual overflow */
  overflow: visible; /* <--- ENSURE THIS IS VISIBLE */
  /* Make this relative: IMPORTANT positioning context for the absolute logo image */
  position: relative; /* <--- ENSURE THIS IS RELATIVE */
  /*
     ADJUST THIS VALUE: This padding creates structural empty space *above* the .main__logo container
     within the logo's column area. This space contributes to the overall header height
     and helps visually separate the logo from the very top of the header area.
     Adjust this if you want MORE or LESS empty space at the absolute top of the logo column.
  */
  padding-top: 10px; /* <--- ADJUST THIS LINE FOR EMPTY SPACE AT THE VERY TOP OF LOGO AREA */
}

@media (max-width: 1199px) {
  .header-wrapper .logo__menuadjust {
    gap: 50px; /* Smaller gap on medium screens */
  }
}

/* ======================================================
   MENU COMPONENTS
   Description: Styles for icons and menu items
   ====================================================== */
/* This rule is for the icons next to the main menu */
.header-wrapper .menu__components {
  display: flex;
  align-items: center;
  gap: 20px; /* Space between menu icons */
}

.header-wrapper .menu__components i {
  color: var(--white); /* Icons appear in white */
}

.header-wrapper .menu__components .fa-bars {
  font-size: 28px;
  cursor: pointer;
  display: inline-block;
}

@media (max-width: 991px) {
  .header-wrapper .menu__components .fa-bars {
    display: none; /* Hide burger icon on mobile */
  }
}

/* ==========================================================================
   SECTION: RESPONSIVE LOGO STYLING (Main Logo Container)
   Purpose: Container for the logo image, setting its position context and overflow
   ========================================================================== */
.header-wrapper .main__logo {
  display: flex; /* Keep display: flex for this container */
  align-items: center; /* Keep align-items: center */
  /* These height/max-height were potentially conflicting with flex or overflow.
     We let the *image's* height and position control the visual result,
     and the parent flex item (.logo__menuadjust) control the structural space. */
  /* REMOVE OR COMMENT OUT THESE LINES - their height was interfering */
  height: auto; /* <--- Set to auto, height is effectively controlled by parent/image */
  max-height: none; /* <--- Remove constraint */
  /* Keep relative positioning: Used as a fallback positioning context for the absolute image */
  position: relative; /* <--- ENSURE THIS IS RELATIVE */
  /* This container should allow the image's visual overflow */
  overflow: visible; /* <--- ENSURE THIS IS VISIBLE */
  padding: 0; /* Remove any padding here */
  /* No transition needed on this container for the logo shrinking effect */
}

/* Logo wrapper: This inner div primarily helps with horizontal centering if needed, and contains the absolute image */
.header-wrapper .main__logo .logo {
  display: block; /* Keep as block */
  width: 200px;    /* Fixed width: IMPORTANT for maintaining horizontal space in the header row */
  /* Remove any height/max-height or overflow on this inner div, let the absolute image define height visually */
  height: auto; /* <--- Set to auto */
  max-height: none; /* <--- Remove any constraint */
  line-height: 0;
  margin: 0 auto; /* Center the .logo div horizontally within .main__logo's width */
  overflow: visible; /* <--- ENSURE THIS IS VISIBLE */
  /* Remove redundant flex properties */
  /* display: block; */ /* Already set */
  /* align-items: center; */
  /* justify-content: center; */
}

/* ==========================================================================
   SECTION: Logo Image Styling (Absolute Positioning & Sizing)
   Purpose: Styles for the actual <img> tag for size, position, and transition
   ========================================================================== */
.header-wrapper .main__logo .logo img { /* <-- THIS RULE STYLES THE ACTUAL IMAGE IN DEFAULT & STICKY STATES */
  display: block;
  width: auto; /* Maintain natural width based on height */
  object-fit: contain; /* Ensure image scaling is correct */
  vertical-align: middle; /* Good practice */

  /* Make the image absolute to take it out of the normal layout flow */
  position: absolute; /* <--- MAKE IMAGE ABSOLUTE (This is why it's NOT in layout flow) */

  /*
     ******************************************************************
     * ADJUSTMENTS FOR DEFAULT (OVERFLOWING) STATE                   *
     ******************************************************************
  */

  /*
     ADJUST THIS VALUE: This sets the overall height of the logo image
     in the default (non-sticky/overflow) state.
     To make the *visible portion within the navbar* larger, adjust the 'top' property below.
  */
  height: 160px; /* <--- ADJUST THIS LINE FOR OVERALL LARGE LOGO HEIGHT (DEFAULT STATE) */

  /*
     ADJUST THIS VALUE: This positions the TOP edge of the absolute image
     relative to the TOP edge of its positioned parent (.logo__menuadjust).
     Decreasing this value (e.g., from 10px to 0px or even negative) will
     move the entire logo image UPWARDS relative to the header area.
     This makes more of the logo's top visible within the standard header height.
     This is the primary value to adjust if the logo is cut off at the bottom
     or not positioned correctly within the top part of the navbar in the default state.
  */
  top: -10px; /* <--- ADJUST THIS LINE FOR VERTICAL POSITIONING IN DEFAULT (OVERFLOWING) STATE */

  /* Horizontal centering in default state */
  left: 50%; /* Position the left edge at the horizontal center of the parent */
  transform: translateX(-50%); /* Shift image back by half its width to truly center horizontally */


  z-index: 10; /* Ensure the logo is visually above other header elements like the menu */

  /* This makes the size and position changes smooth between default and sticky states */
  transition: height 0.4s ease-in-out, top 0.4s ease-in-out, transform 0.4s ease-in-out; /* <--- THIS MAKES THE SHRINK/REPOSITION SMOOTH */
}










/*
   **************************************************************************
   * RULE FOR STICKY STATE CONTAINER OF LOGO: Adjust Height/Padding       *
   **************************************************************************
   This rule targets the container (.logo__menuadjust) that holds the logo structure
   when the header is fixed (.menu-fixed). This container is a flex item
   within the header row (.header-wrapper).

   To make the sticky header row TALLER so the full logo fits without clipping,
   adjust the MINIMUM HEIGHT or PADDING DIRECTLY ON THIS CONTAINER.
*/
.menu-fixed .header-wrapper .logo__menuadjust { /* <--- THIS RULE TARGETS THE LOGO'S CONTAINER IN STICKY STATE */
    /*
       ****************************************************************************************************
       * ADJUST THIS VALUE TO CONTROL THE MINIMUM HEIGHT OF THE LOGO'S CONTAINER IN THE STICKY STATE      *
       ****************************************************************************************************
       Uncomment and set 'min-height' to force this container, and thus the sticky header row, to be taller.
       Set this value to be AT LEAST the 'height' you set on the logo image below (e.g., >= 90px).
       Example: If your sticky logo image is 90px tall and cut off, uncomment and set this to 90px or slightly more.
    */
     /* min-height: 90px; */ /* <--- ADJUST OR ADD THIS LINE IF FORCING CONTAINER HEIGHT */

    /*
       ****************************************************************************************************
       * ADJUST THESE VALUES TO ADD VERTICAL PADDING/SPACE WITHIN THE LOGO'S CONTAINER IN STICKY STATE    *
       ****************************************************************************************************
       Uncomment and adjust these if you want space ABOVE and BELOW the logo *within its column* when sticky.
       Adding padding here WILL make the sticky header taller by the amount of padding added.
       Adjust these based on visual needs for spacing within the logo's column.
    */
     padding-top: 0px;    /* <--- ADJUST TOP PADDING HERE IN STICKY STATE */
     padding-bottom: -10px; /* <--- ADJUST BOTTOM PADDING HERE IN STICKY STATE */

     /* KEEP other existing properties for this rule as needed */
     display: flex; /* Keep flex layout for this container */
     align-items: center; /* Vertically align items *within* logo__menuadjust */
     gap: 150px; /* Keep the gap to push the menu */
     flex-shrink: 0; /* Ensure this flex item does not shrink or grow */
     flex-grow: 0;
     overflow: visible; /* Ensure this container allows the logo's visual overflow (image is absolute) */
     position: relative; /* Important positioning context for the absolute logo image */
     /* Default state padding-top remains on the rule NOT starting with .menu-fixed */
}


/*
   **************************************************************************
   * RULE FOR STICKY STATE LOGO IMAGE: Size and Position                 *
   **************************************************************************
   This rule applies only to the actual <img> tag when the header has the .menu-fixed class.
   This is where you set the logo's size and position *within the sticky header's height*.
   Make sure the 'height' here is the height you want the logo to appear at
   when the header is sticky AND that this height is LESS THAN OR EQUAL TO
   the actual height of your sticky navbar row.
*/
.menu-fixed .header-wrapper .main__logo .logo img { /* <--- THIS RULE STYLES THE STICKY IMAGE */
    /*
       ***************************************************************************************
       * ADJUST THIS VALUE DOWNWARDS TO FIX CUTOFF IN STICKY STATE                           *
       ***************************************************************************************
       This sets the height of the logo image when the header is FIXED (sticky).
       The image IS STILL CUT OFF because 90px is GREATER than the actual height
       of your sticky navbar row (determined by the menu padding, etc.).

       To make the FULL LOGO visible *without making the navbar taller*,
       you **MUST REDUCE THIS VALUE** until the logo image is fully visible
       within the existing sticky navbar height.

       REDUCE THIS HEIGHT (e.g., try 60px, 50px, 40px) until the logo is
       NO LONGER CUT OFF when the header is sticky. The exact value depends
       on the true height of your sticky navbar.
    */
    height: 70px; /* <--- ADJUST THIS LINE DOWNWARDS FOR LOGO IMAGE HEIGHT IN STICKY STATE TO STOP CLIPPING */

    /*
       These values center the shrunk logo vertically and horizontally
       within the sticky header's space. These should be correct for centering
       once the 'height' above is set correctly to fit.
    */
    top: 150%; /* Vertical positioning in sticky image (usually 50% for centering) */
    left: 50%; /* Horizontal positioning in sticky image (keep at 50%) */
    transform: translate(-50%, -50%); /* Centering adjustment in sticky image */

    /* The transition rule is on the default img rule and applies here automatically */
}











/* ======================================================
   MAIN MENU CONTAINER
   Description: Flex container for primary navigation links
   ====================================================== */
.header-wrapper .main-menu {
  display: flex;
  align-items: center;
}

/* ======================================================
   MAIN MENU LIST ITEMS
   Description: Top-level menu links and hover behavior
   ====================================================== */
.header-wrapper .main-menu li {
  transition: all 0.4s;
  position: relative;
}

/* ======================================================
   MAIN MENU LINKS
   Description: Top-level anchor styles
   ====================================================== */
.header-wrapper .main-menu li a {
  color: var(--white);                    /* Default link color */
  font-size: 16px;
  font-style: normal;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  line-height: 120%;
  text-transform: capitalize;
  padding: 40px 16px;                     /* Vertical rhythm and horizontal spacing */
}

.header-wrapper .main-menu li a i {
  margin-left: 2px;
  font-size: 16px !important;
  color: var(--title);                   /* Icon color */
}

/* ======================================================
   SUBMENU WRAPPER BASE
   Description: Default submenu layout and transition
   ====================================================== */
.header-wrapper .main-menu li .sub-menu {
  position: relative;
  padding: 5px;
  transition: all 0.4s;
}

/* ======================================================
   NESTED SUBMENU DROPDOWNS
   Description: Styles for second-level dropdowns
   ====================================================== */
@media (min-width: 992px) {
  .header-wrapper .main-menu li .sub-menu .sub-menutwo ul {
    position: absolute;
    top: -31px;
    left: 100%;
    width: 250px;
    z-index: 999;
    transition: all 0.3s;
    background: var(--white);
    box-shadow: rgba(0, 0, 0, 0.15) 0px -1px 34px 0px;
    justify-content: center;
    opacity: 0;
    gap: 5px;
    transform: translateY(55px);
    visibility: hidden;
    display: block !important;
  }

  .header-wrapper .main-menu li .sub-menu .sub-menutwo ul li a {
    color: var(--black);
  }

  .header-wrapper .main-menu li .sub-menu .sub-menutwo ul li:hover a {
    color: var(--base);
    padding-left: 10px;
  }

  .header-wrapper .main-menu li .sub-menu .sub-menutwo:hover ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(25px);
  }

  .header-wrapper .main-menu li .sub-menu .sub-menutwo:hover ul li a::before {
    display: none;
  }
}

/* ======================================================
   FIRST LEVEL DROPDOWN SUBMENU
   Description: Default dropdown behavior for level 1
   ====================================================== */
@media (min-width: 992px) {
  .header-wrapper .main-menu li .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 250px;
    z-index: 999;
    transition: all 0.3s;
    background: var(--white);
    box-shadow: rgba(0, 0, 0, 0.15) 0px -1px 34px 0px;
    justify-content: center;
    opacity: 0;
    gap: 5px;
    transform: translateY(55px);
    visibility: hidden;
    display: block !important;
  }

  .header-wrapper .main-menu li .sub-menu ul {
    display: block !important;
  }
}

/* ======================================================
   SUBMENU LINK STYLING
   Description: Child <li><a> elements inside dropdown
   ====================================================== */
.header-wrapper .main-menu li .sub-menu li {
  transition: all 0.4s !important;
}

.header-wrapper .main-menu li .sub-menu li a {
  color: var(--black);
  text-transform: capitalize;
  font-weight: 400;
  font-size: 16px;
  width: 100%;
  display: block;
  padding: 5px 8px;
  margin: 1px;
  border-radius: 8px;
  transition: all 0.4s;
}

/* ======================================================
   SUBMENU HIGHLIGHT INDICATOR
   Description: Decorative line shown on hover
   ====================================================== */
.header-wrapper .main-menu li .sub-menu li a::before {
  position: absolute;
  content: "";
  left: 20px;
  bottom: 10px;
  background: var(--base);
  width: 10px;
  height: 2px;
  transition: all 0.4s;
  opacity: 0;
}

.header-wrapper .main-menu li .sub-menu li a i {
  font-size: 14px !important;
}

/* ======================================================
   RESPONSIVE FONT/WEIGHT ADJUSTMENTS FOR MOBILE
   ====================================================== */
@media (max-width: 991px) {
  .header-wrapper .main-menu li .sub-menu li a {
    font-size: 14px;
    font-weight: 500;
  }
}

/* ======================================================
   SUBMENU BORDER AND SPACING
   Description: Styles applied to each submenu item
   ====================================================== */
@media (min-width: 992px) {
  .header-wrapper .main-menu li .sub-menu li:not(:last-child) {
    border-bottom: 1px solid var(--changeborder);
  }

  .header-wrapper .main-menu li .sub-menu li a {
    padding: 10px 10px;
  }
}

/* ======================================================
   HOVER EFFECTS FOR SUBMENU LINKS
   Description: Text shift + left line indicator on hover
   ====================================================== */
.header-wrapper .main-menu li .sub-menu li:hover a {
  color: var(--base);
  padding-left: 20px;
}

.header-wrapper .main-menu li .sub-menu li:hover a::before {
  position: absolute;
  content: "";
  left: 7px;
  bottom: 18px;
  background: var(--base);
  width: 10px;
  height: 2px;
  transition: all 0.4s;
  opacity: 1;
}

/* ======================================================
   FIRST LEVEL MENU HOVER: DROPDOWN REVEAL
   Description: Controls visibility of dropdown menus
   ====================================================== */
@media (min-width: 992px) {
  .header-wrapper .main-menu li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(25px);
  }

  .header-wrapper .main-menu li:hover .sub-menu::before {
    position: absolute;
    content: "";
    top: -18px;
    left: 26px;
    width: 28px;
    height: 20px;
    background: #fff;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
  }
}

/* ======================================================
   RESPONSIVE SPACING TWEAKS (NAV ITEM GAPS + PADDING)
   ====================================================== */
@media (max-width: 1199px) {
  .header-wrapper .main-menu {
    gap: 0 20px;
  }

  .header-wrapper .main-menu li a {
    padding: 40px 2px;
  }
}

@media (max-width: 991px) {
  .header-wrapper .main-menu {
    gap: 0 20px;
  }

  .header-wrapper .main-menu li a {
    padding: 16px 10px;
    color: var(--black); /* Switch to dark text on mobile */
  }
}

/* ======================================================
   RIGHT COMPONENTS (EX: ICONS, BUTTONS)
   Description: Aligns additional right-hand header tools
   ====================================================== */
.header-wrapper .menu__right__components {
  gap: 15px;
}

@media (max-width: 500px) {
  .header-wrapper .menu__right__components {
    gap: 10px;
  }
}

@media (max-width: 1600px) {
  .header-wrapper .buttonsearch__area {
    gap: 20px;
  }
}


















/* ======================================================
   MOBILE MENU WRAPPER
   Description: Styles for the main dropdown menu in mobile view
   Target: screen ≤ 991px
   ====================================================== */
@media screen and (max-width: 991px) {
  .main-menu {
    position: fixed;                        /* Fixed to viewport */
    top: 55px;                              /* Below header */
    width: 100%;
    left: 0;
    display: block !important;
    margin-top: 20px;
    z-index: 999;
    padding: 15px 15px;                     /* Inner padding */
    transition: all 0.4s !important;
    transform-origin: top;
    max-height: calc(100vh - 130px);       /* Prevent scroll cutoff */
    background: var(--white);              /* White background */
    overflow-y: auto;                      /* Scroll if menu too long */
  }

  .main-menu:not(.active) {
    position: fixed;
    display: none !important;              /* Hidden if not active */
  }

  .main-menu li {
    width: 100%;
    border-radius: 2px;
    border-bottom: 1px solid rgba(170, 181, 200, 0.5); /* Subtle border */
  }

  .main-menu li a {
    display: block;
    padding: 8px 10px 6px;                 /* Compact mobile spacing */
  }

  .main-menu li .sub-menu {
    display: none;                         /* Hide nested menus by default */
  }

  .main-menu li .sub-menu li {
    border-bottom: unset;                  /* Remove border from sub-items */
  }

  .main-menu .active a {
    color: var(--white);                   /* Highlight active link */
  }

  /* ======================================================
     HEADER BAR ICON (BURGER MENU)
     Description: Mobile hamburger menu styles and animation
     ====================================================== */
  .header-bar {
    position: relative;
    width: 31px;
    height: 20px;
  }

  .header-bar span {
    position: absolute;
    width: 100%;
    height: 2px;
    display: inline-block;
    transition: all 0.3s;
    left: 0;
    background: var(--white);              /* White lines */
  }

  .header-bar span:first-child {
    top: 0;
    background: var(--white);
  }

  .header-bar span:nth-child(2) {
    top: 44%;
    background: var(--white);
  }

  .header-bar span:last-child {
    bottom: 0;
    background: var(--white);
  }

  /* ======================================================
     BURGER TO X TRANSITION (ACTIVE STATE)
     Description: Transforms bars into a close icon when active
     ====================================================== */
  .header-bar.active span:first-child {
    transform: rotate(45deg) translate(3px, 9px);
  }

  .header-bar.active span:nth-child(2) {
    opacity: 0;
  }

  .header-bar.active span:last-child {
    transform: rotate(-45deg) translate(3px, -9px);
  }

  .header-bar:hover {
    cursor: pointer;
  }
}




























/* ======================================================
   SEARCH WRAPPER OVERLAY
   Description: Full-screen search panel, hidden by default
   ====================================================== */
.search-wrap {
  width: 100%;                                  /* Full width */
  height: 100%;                                 /* Full height */
  overflow: hidden;
  display: none;                                /* Hidden until triggered */
  position: fixed;                              /* Fixed to viewport */
  top: 0;
  left: 0;
  z-index: 999999;                              /* Above all other elements */
  background-color: rgba(255, 255, 255, 0.9);   /* Semi-transparent white */
}

/* ======================================================
   SEARCH INNER LAYOUT
   Description: Centers input content within overlay
   ====================================================== */
.search-wrap .search-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.search-wrap .search-cell {
  position: absolute;
  top: 50%;                                      /* Center vertically */
  width: 100%;
  transform: translateY(-50%);                   /* Pull up by half height */
}

/* ======================================================
   SEARCH FIELD HOLDER
   Description: Container for animated input field
   ====================================================== */
.search-wrap .search-field-holder {
  width: 50%;                                    /* Default width */
  margin: auto;
  position: relative;
  animation: slideInUp 0.3s;                     /* Entrance animation */
}

/* Tablet width adjustment */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .search-wrap .search-field-holder {
    width: 70%;
  }
}

/* Mobile width adjustment */
@media (max-width: 575px) {
  .search-wrap .search-field-holder {
    width: 80%;
  }
}

/* ======================================================
   MAIN SEARCH INPUT FIELD
   Description: Full-width, styled, uppercase text field
   ====================================================== */
.search-wrap .main-search-input {
  width: 100%;
  height: 70px;
  border: 0;
  padding: 0 50px;
  text-transform: uppercase;
  background: transparent;
  font-size: 25px;
  color: var(--theme-color);
  border-bottom: 2px solid var(--theme);
  text-align: center;
  letter-spacing: 2px;
}

/* Mobile adjustments */
@media (max-width: 575px) {
  .search-wrap .main-search-input {
    height: 50px;
    padding: 0 0;
    line-height: 50px;
    font-size: 18px;
  }
}

/* ======================================================
   FORM CONTROL OVERRIDE
   Description: Theme background for autocomplete input fields
   ====================================================== */
.search-wrap input.form-control,
.search-wrap input.form-control:focus {
  background-color: var(--theme);
}

/* ======================================================
   PLACEHOLDER STYLING
   Description: Themed and sized placeholder text
   ====================================================== */
input.main-search-input::placeholder {
  color: var(--theme);
  opacity: 1;
  font-size: 25px;
}

@media (max-width: 575px) {
  input.main-search-input::placeholder {
    font-size: 18px;
  }
}

/* ======================================================
   SEARCH CLOSE ICON
   Description: Positioned close "X" in upper-right corner
   ====================================================== */
.search-close {
  position: absolute;
  top: 50px;
  right: 50px;
  font-size: 30px;
  color: var(--theme);
  cursor: pointer;                              /* Pointer on hover */
}






















/* ======================================================
   SIDE BAR CONTAINER
   Description: Fixed right panel with overlay-style theme
   ====================================================== */
.side_bar {
  position: fixed;                             /* Fixed to viewport */
  top: 0;
  right: 0px;                                  /* Align to right edge */
  width: 450px;                                /* Sidebar width */
  height: 100%;                                /* Full screen height */
  background-color: var(--theme);              /* Themed background */
  padding: 40px;
  padding-top: 45px;
  z-index: 9999;                               /* Above main content */
  transition: all 0.3s ease-in-out;            /* Smooth slide-in/out */
}

/* ======================================================
   TEXT CONTENT INSIDE SIDEBAR
   Description: Paragraph text styled white
   ====================================================== */
.side_bar p.text-justify {
  color: var(--white);
}

/* ======================================================
   CONTACT INFO LIST ITEMS
   Description: Font and color styles for <li> elements in .info
   ====================================================== */
.side_bar .info li {
  font-size: 18px;
}

.side_bar .info li a {
  color: var(--white);                         /* White links */
}

.side_bar .info li i {
  color: var(--white);                         /* White icons */
  margin-right: 5px;
}

/* ======================================================
   CLOSE BUTTON
   Description: Round icon button to close sidebar
   ====================================================== */
.side_bar button {
  position: absolute;
  right: 40px;
  top: 40px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  background-color: var(--white);              /* White circle */
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  border: none;
}

.side_bar button:hover {
  transform: rotate(90deg);                    /* Rotate on hover */
}

.side_bar button i {
  color: var(--theme);                         /* Theme-colored icon */
}

/* ======================================================
   SOCIAL ICONS ROW
   Description: Horizontal list of round social media buttons
   ====================================================== */
.side_bar .social__icon {
  display: flex;
  align-items: center;
  gap: 10px;                                   /* Spacing between icons */
}

.side_bar .social__icon li {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border: 1px solid var(--white);
  text-align: center;
  border-radius: 100%;                         /* Perfect circle */
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.side_bar .social__icon li a i {
  font-size: 16px;
  color: var(--white);                         /* Default white icon */
  transition: all 0.3s ease-in-out;
}

.side_bar .social__icon li:hover {
  background-color: var(--white);              /* White hover background */
}

.side_bar .social__icon li:hover a i {
  color: var(--theme);                         /* Icon turns theme-colored */
}

/* ======================================================
   HIDDEN SIDEBAR STATE
   Description: Used to hide sidebar off-screen with opacity
   ====================================================== */
.side_bar_hidden {
  visibility: hidden;                          /* Hide from view */
  opacity: 0;
  right: -30px;                                /* Shift slightly off screen */
}



















/* ======================================================
   SCROLL-UP BUTTON BASE
   Description: Circular fixed-position "back to top" button
   ====================================================== */
.scroll-up {
  cursor: pointer;                             /* Pointer cursor on hover */
  display: block;
  border-radius: 50px;                         /* Fully rounded circle */
  box-shadow: inset 0 0 0 2px var(--white);    /* White inset border */
  z-index: 10000;                              /* Above most UI elements */
  opacity: 0;                                  /* Initially hidden */
  visibility: hidden;
  transform: translateY(15px);                 /* Offset for animation */
  position: fixed;                             /* Fixed at bottom corner */
  right: 20px;
  bottom: 20px;
  height: 50px;
  width: 50px;
  transition: all 200ms linear;                /* Smooth transition */
}

/* ======================================================
   SCROLL-UP ICON STYLING
   Description: FontAwesome icon placed inside button
   ====================================================== */
.scroll-up::after {
  position: absolute;
  font-family: "Font Awesome 6 free";          /* FontAwesome icon font */
  content: "\f062";                            /* Unicode: up arrow */
  text-align: center;
  line-height: 50px;                           /* Vertically center icon */
  font-weight: 700;
  font-size: 18px;
  color: var(--theme);                         /* Theme-colored icon */
  left: 0;
  top: 0;
  height: 50px;
  width: 50px;
  cursor: pointer;
  display: block;
  z-index: 1;
  transition: all 200ms linear;
}

/* ======================================================
   SCROLL-UP VISIBLE STATE
   Description: Activated when scroll threshold is reached
   ====================================================== */
.scroll-up.active-scroll {
  opacity: 1;                                  /* Make button visible */
  visibility: visible;
  transform: translateY(0);                    /* Reset offset */
}

/* ======================================================
   SVG PATH STYLING (CIRCLE)
   Description: Optional circular progress stroke styling
   ====================================================== */
.scroll-up svg path {
  fill: none;                                  /* Ensure transparency */
}

.scroll-up svg.scroll-circle path {
  stroke: var(--theme);                        /* Theme stroke color */
  stroke-width: 4px;
  box-sizing: border-box;
  transition: all 200ms linear;                /* Smooth stroke transition */
}


















/* ======================================================
   LOADER WRAPPER OVERLAY
   Description: Fullscreen loader background during page load
   ====================================================== */
#loader-wrapper {
  position: fixed;                     /* Stay fixed during load */
  top: 0;
  left: 0;
  width: 100%;                         /* Full viewport width */
  height: 100%;                        /* Full viewport height */
  z-index: 1001;                       /* Above most content layers */
}

/* ======================================================
   LOADER BACKGROUND PANELS
   Description: Left and right white panels covering screen
   ====================================================== */
#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;                          /* Cover more than half to overlap */
  height: 100%;
  background: #fff;                    /* Solid white background */
  z-index: 1000;
  -webkit-transform: translateX(0);    /* Initial state: no movement */
  transform: translateX(0);
}

/* Section split: left side */
#loader-wrapper .loader-section.section-left {
  left: 0;
}

/* Section split: right side */
#loader-wrapper .loader-section.section-right {
  right: 0;
}

/* ======================================================
   MAIN SPINNER
   Description: Multi-ring rotating loader element
   ====================================================== */
#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;             /* Centering the spinner */
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--theme);      /* Spinner color */
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  z-index: 99999;
}

/* Inner ring #1 */
#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--theme);      /* Inner ring color */
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

/* Inner ring #2 */
#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--theme);      /* Innermost ring color */
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

/* ======================================================
   LOADED STATE TRANSITIONS
   Description: When page finishes loading, animate exit
   ====================================================== */
.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}

/* Left panel slides out */
.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Right panel slides out */
.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Loader fades out */
.loaded #loader {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

/* ======================================================
   SPINNING ANIMATION (WEBKIT & STANDARD)
   Description: Used by loader and its :before/:after rings
   ====================================================== */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}






















/* ==========================================================================
   SECTION: Banner Section Container
   Purpose: Base wrapper and button container positioning
   ========================================================================== */
.banner__section {
  overflow: hidden;                           /* Prevent overflow issues */
  position: relative;                         /* Context for absolute elements */
}

/* --------------------------------------------------------------------------
   SECTION: Arrow Button Wrapper (Navigation Arrows)
   -------------------------------------------------------------------------- */
.banner__section .arry__button {
  position: absolute;
  top: 50%;
  right: 50px;
  transform: translateY(-50%);
  z-index: 2;
}

/* Hide arrows on smaller screens */
@media (max-width: 991px) {
  .banner__section .arry__button {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   SECTION: Arrow Button Styles
   -------------------------------------------------------------------------- */
.banner__section .arry__button .arry__prev,
.banner__section .arry__button .arry__next {
  width: 51px;                                /* Adjust width here */
  height: 51px;                               /* Adjust height here */
  border-radius: 100%;                        /* Circular button */
  border: 1px solid var(--pra);               /* Gray border */
  transition: all 0.3s ease-in-out;
}

/* Previous Arrow */
.banner__section .arry__button .arry__prev {
  background: transparent;
  margin-bottom: 17px;
}
.banner__section .arry__button .arry__prev i {
  color: var(--white);                        /* Icon color */
}
.banner__section .arry__button .arry__prev:hover {
  background-color: var(--theme);             /* Hover background: primary */
  border-color: var(--theme);
}
.banner__section .arry__button .arry__prev:hover i {
  color: var(--white);
}

/* Next Arrow */
.banner__section .arry__button .arry__next {
  background-color: var(--theme);             /* Background: primary */
  border-color: var(--theme);
}
.banner__section .arry__button .arry__next i {
  color: var(--white);                        /* Icon color */
}

/* ==========================================================================
   SECTION: Banner Image Zoom on Active Slide
   ========================================================================== */
.banner__section .swiper-slide-active .banner__image {
  transform: scale(1.12);
  transition: all 8s ease-out;
}

/* ==========================================================================
   SECTION: Pagination Bullets
   ========================================================================== */
.banner__section .banner-pagination {
  display: flex;
}
.banner__section .banner-pagination .swiper-pagination-bullet {
  width: 20px;
  height: 8px;
  border-radius: 20px;
  background-color: var(--white);
  opacity: 1;
  transition: 0.6s;
}
.banner__section .banner-pagination .swiper-pagination-bullet:hover {
  background: var(--white);
}
.banner__section .banner-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 30px;
  background-color: var(--theme);             /* Active bullet color: primary */
}

/* ==========================================================================
   SECTION: Pagination Positioning
   ========================================================================== */
.banner__section .banner__pagination__wrapper {
  position: absolute;
  z-index: 2;
  bottom: 10%;
  left: 50%;
  transform: translateY(-50%);
}

/* ==========================================================================
   SECTION: Banner Background Images
   ========================================================================== */
.banner__image {
  background: url(../img/banner/banner1.jpg) no-repeat center center;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: -2;
  transition: all 8s ease-out 0s;
}
.banner__image::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);             /* Overlay for contrast */
}

/* ==========================================================================
   SECTION: Banner Content (Text, Button, Video)
   ========================================================================== */
.banner__content {
  position: relative;
  padding: 250px 0;
}
@media (max-width: 1399px) {
  .banner__content { padding: 180px 0; }
}
@media (max-width: 1199px) {
  .banner__content { padding: 140px 0; }
}
@media (max-width: 991px) {
  .banner__content { padding: 110px 0; }
}
@media (max-width: 767px) {
  .banner__content { padding: 90px 0; }
}
@media (max-width: 575px) {
  .banner__content { padding: 60px 0; }
}

.banner__content h1 {
  text-transform: capitalize;
  color: var(--white-color);
  margin-bottom: 20px;
  line-height: 92px;
}
@media (max-width: 1399px) {
  .banner__content h1 { line-height: 80px; font-size: 56px; }
}
@media (max-width: 1199px) {
  .banner__content h1 { line-height: 65px; font-size: 48px; }
}
@media (max-width: 991px) {
  .banner__content h1 { line-height: 50px; font-size: 36px; margin-bottom: 25px; }
}
@media (max-width: 575px) {
  .banner__content h1 { line-height: 38px; font-size: 28px; margin-bottom: 20px; }
}

.banner__content p {
  color: var(--white-color);
  line-height: 28px;
}

.banner__content .banner__button {
  margin-top: 30px;
  gap: 20px;
}

.banner__content .content__two {
  justify-content: space-between;
}
@media (max-width: 767px) {
  .banner__content .content__two {
    flex-wrap: wrap;
    gap: 20px;
  }
}
.banner__content .content__two .content {
  max-width: 820px;
}

/* ==========================================================================
   SECTION: Video Button Pulse Effect
   ========================================================================== */
.banner__content .content__two .video__content .video {
  position: relative;
  text-align: center;
  display: inline-block;
  z-index: 4;
}
.banner__content .content__two .video__content .video a {
  font-size: 25px;
  z-index: 1;
  width: 70px;
  height: 70px;
  line-height: 70px;
  border-radius: 100%;
  color: var(--white-color);
  background-color: var(--theme-color);
  display: block;
  transition: 0.6s;
}

/* Pulse Effect */
.banner__content .content__two .video__content .video-pulse::after,
.banner__content .content__two .video__content .video-pulse::before {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  line-height: 70px;
  border: 1px solid var(--theme-color);
  opacity: 0.7;
  left: 0;
  top: 0;
  border-radius: 50%;
  animation: video-animation 2.5s linear infinite;
}
.banner__content .content__two .video__content .video-pulse::before {
  animation-delay: 1s;
}

/* ==========================================================================
   SECTION: Alternate Banner Background Variants
   ========================================================================== */
.imagetwo {
  background: url(../img/banner/banner2.jpg) no-repeat center center;
  background-size: cover;
}
.imagethree {
  background: url(../img/banner/banner3.jpg) no-repeat center center;
  background-size: cover;
}

/* ==========================================================================
   SECTION: Alternate Banner Layout (Banner Two)
   ========================================================================== */
.banner__two {
  background: url(../img/banner/banner4.jpg) no-repeat center center;
  background-size: cover;
  position: relative;
  padding: 250px 0;
}
.banner__two::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);             /* Dark overlay for contrast */
}
.banner__two .banner__content {
  padding: initial;
  max-width: 650px;
}

























/* ==========================================================================
   SECTION: Breadcrumb Banner Container
   Purpose: Background and layout for breadcrumb/top section banner
   ========================================================================== */
.breadcumd__banner {
  background: url(../img/banner/breadcumd-bg.jpg) no-repeat center center; /* 📷 Background image */
  background-size: cover;                     /* 🔄 Ensure image fills the banner */
  position: relative;                         /* 📍 Anchor pseudo-element overlay */
  background-attachment: fixed;               /* 📌 Parallax-style fixed background */
}

/* --------------------------------------------------------------------------
   SECTION: Overlay Layer for Breadcrumb Background
   -------------------------------------------------------------------------- */
.breadcumd__banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);             /* 🌒 Semi-transparent black overlay */
}

/* ==========================================================================
   SECTION: Main Wrapper (Flexbox Layout)
   ========================================================================== */
.breadcumd__banner .breadcumd__wrapper {
  display: flex;                              /* 🧱 Enable horizontal layout */
  align-items: center;                        /* 🔄 Vertically center content */
  justify-content: space-between;            /* ↔️ Space out left and right blocks */
  position: relative;                         /* 📍 Context for child elements */
  flex-wrap: wrap;                            /* 📦 Allow wrapping on small screens */
  padding: 150px 0;                           /* 📐 Vertical padding */
}

/* Adjust gap between columns on small screens */
@media (max-width: 767px) {
  .breadcumd__banner .breadcumd__wrapper {
    gap: 20px;
  }
}

/* ==========================================================================
   SECTION: Left Content (Title)
   ========================================================================== */
.breadcumd__banner .breadcumd__wrapper .left__content {
  color: var(--white);                        /* 🎨 White text color */
  font-weight: 600;                           /* 🆙 Bold weight */
}

/* Smaller title font on extra-small devices */
@media (max-width: 575px) {
  .breadcumd__banner .breadcumd__wrapper .left__content {
    font-size: 24px;
  }
}

/* ==========================================================================
   SECTION: Right Content (Breadcrumb Navigation)
   ========================================================================== */
.breadcumd__banner .breadcumd__wrapper .right__content {
  display: flex;                              /* 📏 Row of breadcrumb items */
  align-items: center;                        /* 🧭 Vertically align center */
}

/* --------------------------------------------------------------------------
   SECTION: Breadcrumb Items
   -------------------------------------------------------------------------- */
.breadcumd__banner .breadcumd__wrapper .right__content li {
  font-size: 16px;
  font-weight: 600;
  position: relative;
  text-transform: capitalize;
  color: var(--theme);                        /* 🎨 Primary theme color (active page) */
}

/* Breadcrumb items except last one (e.g., "Home > Page") */
.breadcumd__banner .breadcumd__wrapper .right__content li:not(:last-child) {
  margin-right: 10px;
  color: var(--white);                        /* 🎨 Intermediate breadcrumb color */
}

/* Breadcrumb links (clickable items) */
.breadcumd__banner .breadcumd__wrapper .right__content li a {
  color: var(--white);                        /* 🎨 Default link color */
  font-weight: 600;
  transition: all 0.3s ease-in-out;
}

/* Breadcrumb icons */
.breadcumd__banner .breadcumd__wrapper .right__content li a i {
  font-size: 16px;
  margin-right: 4px;
  transition: all 0.3s ease-in-out;
}

/* Hover states for links and icons */
.breadcumd__banner .breadcumd__wrapper .right__content li a:hover {
  color: var(--theme);                        /* 🎨 Primary theme color on hover */
}
.breadcumd__banner .breadcumd__wrapper .right__content li a:hover i {
  color: var(--theme);
}

/* Static breadcrumb icon (non-hover state) */
.breadcumd__banner .breadcumd__wrapper .right__content li i {
  color: var(--white);
}

























/* ==========================================================================
   SECTION: Feature Section Container
   Description: Handles layout and overlap positioning of the feature area
   ========================================================================== */
.feature__section {
  position: relative;
  margin-top: -80px;                          /* 🧩 Pulls section upward for overlap effect */
  z-index: 99;                                /* ⬆️ Keep above default content flow */
}

/* Reset margin on smaller devices */
@media (max-width: 991px) {
  .feature__section {
    margin-top: 0;
  }
}

/* ==========================================================================
   SECTION: Feature Wrapper
   Description: White container padding and structure
   ========================================================================== */
.feature__section .feature__wrapper {
  padding: 30px;                              /* 📦 Inner spacing */
  background-color: var(--white);            /* 🎨 White background */
}

/* ==========================================================================
   SECTION: Feature Item Image Wrapper
   ========================================================================== */
.feature__section .feature__items .feature__thumb {
  position: relative;
}

.feature__section .feature__items .feature__thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px;                        /* 🟦 Smooth corners */
  transition: all 0.4s ease-in-out;           /* 🎞️ Smooth hover effect */
}

/* Overlay gradient on feature images */
.feature__section .feature__items .feature__thumb::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  border-radius: 10px;
  background: linear-gradient(360deg, var(--black), transparent); /* 🌘 Black-to-clear fade */
  transition: all 0.5s;
}

/* ==========================================================================
   SECTION: Default Visible Content Box (Overlay)
   ========================================================================== */
.feature__section .feature__items .feature__box {
  position: absolute;
  bottom: 25px;
  text-align: center;
  padding: 0 30px;
  width: 100%;
  opacity: 1;
  visibility: visible;
  transition: all 0.7s;
}

/* Title inside overlay */
.feature__section .feature__items .feature__box .feature__title {
  color: #ffffff;                             /* 🎨 Bright white */
  margin-top: 0;
  margin-bottom: 30px;
  text-transform: capitalize;
  position: relative;
  z-index: 99;
}

/* ==========================================================================
   SECTION: Feature Icon Circle
   ========================================================================== */
.feature__section .feature__items .feature__box .feature__icon {
  margin-bottom: -60px;
}

.feature__section .feature__items .feature__box .feature__icon .icon {
  height: 80px;
  width: 80px;
  line-height: 90px;
  text-align: center;
  background: var(--theme);                  /* 🎨 Primary theme color */
  border-radius: 50%;                        /* 🟡 Circle */
  display: inline-block;
  position: relative;
  z-index: 99;
  transition: all 0.4s ease-in-out;
}

.feature__section .feature__items .feature__box .feature__icon i {
  font-size: 36px;
  color: var(--white);                        /* 🎨 White icon */
}

/* ==========================================================================
   SECTION: Hidden Hover-Reveal Content Panel
   ========================================================================== */
.feature__section .feature__items .feature__content {
  position: absolute;
  bottom: -60px;
  padding: 30px;
  background: var(--theme);                   /* 🎨 Background panel */
  border-radius: 0 0 10px 10px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s;
}

/* Content Title in Hover Panel */
.feature__section .feature__items .feature__content .feature__title {
  text-transform: capitalize;
  color: #ffffff;                             /* 🎨 Bright white */
  margin-top: 0;
  margin-bottom: 15px;
  position: relative;
  z-index: 99;
}

/* Content Paragraph */
.feature__section .feature__items .feature__content p {
  color: var(--white);                        /* 🎨 White text */
}

/* ==========================================================================
   SECTION: Hover Interactions
   ========================================================================== */

/* On Hover: Hide initial box content */
.feature__section .feature__items:hover .feature__box {
  visibility: hidden;
  bottom: 60px;
}

/* On Hover: Show hidden panel */
.feature__section .feature__items:hover .feature__content {
  bottom: -30px;
  opacity: 1;
  visibility: visible;
  z-index: 9999;                              /* ⬆️ Top layer on hover */
}




























/* ==========================================================================
   SECTION: About Section Image Styling
   ========================================================================== */
.about__section .about__thumb img {
  width: 100%;                                /* 📸 Full width image */
  height: 100%;                               /* 📸 Full height image */
}

/* ==========================================================================
   SECTION: About Style Two Wrapper
   ========================================================================== */
.about__section .style__two {
  position: relative;                         /* 🎯 Needed for ::before/::after absolute children */
}

/* Vertical bar on the right side */
.about__section .style__two::before {
  content: "";
  position: absolute;
  right: -30px;                               /* ➡️ Negative offset to right */
  top: 0;
  height: 50%;
  width: 15px;
  background: var(--theme);                   /* 🎨 Theme color bar */
}

/* Vertical bar on the left bottom */
.about__section .style__two::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -30px;                                /* ⬅️ Negative offset to left */
  height: 55%;
  width: 15px;
  background: var(--theme);                   /* 🎨 Theme color bar */
}

/* ==========================================================================
   SECTION: About Video Popup Button
   ========================================================================== */
.about__section .style__two .video__content .video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);           /* 🎯 Centered */
  text-align: center;
  display: inline-block;
  z-index: 4;
}

/* Video button anchor */
.about__section .style__two .video__content .video a {
  position: relative;
  font-size: 25px;
  color: var(--white);                        /* 🎨 White icon */
  background-color: var(--theme);            /* 🎨 Theme color background */
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 100%;                        /* 🟢 Circle */
  display: block;
  z-index: 1;
  transition: 0.6s;
}

/* ==========================================================================
   SECTION: Pulsing Animation Around Video Icon
   ========================================================================== */
.about__section .style__two .video__content .video-pulse::after,
.about__section .style__two .video__content .video-pulse::before {
  position: absolute;
  content: "";
  width: 100px;
  height: 100px;
  line-height: 100px;
  left: 0;
  top: 0;
  border-radius: 50%;                         /* 🟢 Circle pulse */
  border: 1px solid var(--white);            /* ⚪ White pulse border */
  opacity: 0.7;
  animation-name: video-animation;
  animation-duration: 2.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Delay for second pulsing ring */
.about__section .style__two .video__content .video-pulse::before {
  animation-delay: 1s;
}

/* ==========================================================================
   SECTION: About Content Typography
   ========================================================================== */
.about__section .about__content h2 {
  text-transform: capitalize;
  font-weight: 500;
}

/* Theme-colored span in heading */
.about__section .about__content h2 span {
  color: var(--theme);                        /* 🎨 Highlight word */
}

/* List items in about section */
.about__section .about__content ul li {
  color: var(--pra);                          /* 🎨 Paragraph color */
}

/* Spacing between list items */
.about__section .about__content ul li:not(:last-child) {
  margin-bottom: 10px;
}

/* Icons in list */
.about__section .about__content ul li i {
  color: var(--theme);                        /* 🎨 Icon colored */
  margin-right: 5px;
}

/* Paragraph styling inside .text block */
.about__section .about__content .text p {
  color: var(--theme) !important;             /* 🎨 Force theme color */
  font-weight: 600;                           /* 🔡 Bold paragraph */
}





















/* ==========================================================================
   SECTION: Cannabis Section Background & Gradient Overlay
   ========================================================================== */
.canabis__section {
  background: url(../img/canabis/canabis-bg.png) no-repeat center center; /* 🌿 Background image */
  background-size: cover;                                                 /* 📸 Full cover */
  background-attachment: fixed;                                           /* 📌 Fixed parallax effect */
}

/* Dark gradient overlay from bottom */
.canabis__section::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  border-radius: 10px;
  transition: all 0.5s;
  background: linear-gradient(to bottom, transparent 0%, #000 100%);     /* 🎨 Black bottom gradient */
}

/* ==========================================================================
   SECTION: Video & Text Content Area
   ========================================================================== */
.canabis__section .canabis__content {
  max-width: 650px;                                                      /* 📐 Max content width */
}

/* Spacing for video content block */
.canabis__section .canabis__content .video__content {
  margin-bottom: 60px;
}

/* Video play button styling */
.canabis__section .canabis__content .video__content .video a {
  position: relative;
  font-size: 25px;
  color: var(--white);                                                   /* 🎨 White icon */
  background-color: transparent;                                         /* ⬜ Transparent button background */
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 100%;                                                   /* 🟢 Circle */
  display: block;
  transition: 0.6s;
  text-align: center;
  margin: 0 auto;
  z-index: 1;
}

/* ==========================================================================
   SECTION: Pulsing Animation Around Video Icon
   ========================================================================== */
.canabis__section .canabis__content .video__content .video-pulse::after,
.canabis__section .canabis__content .video__content .video-pulse::before {
  position: absolute;
  content: "";
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px solid var(--theme);                                       /* 🎨 Theme-colored pulse border */
  opacity: 0.7;
  left: 43%;
  top: 0;
  border-radius: 50%;                                                   /* 🟢 Circle */
  animation-name: video-animation;
  animation-duration: 2.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: video-animation;
  -webkit-animation-duration: 2.5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  transform: translate(-50%, -50%);
}

/* Delayed second pulse ring */
.canabis__section .canabis__content .video__content .video-pulse::before {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
  text-align: center;
  margin: 0 auto;
}

/* ==========================================================================
   SECTION: Title Text
   ========================================================================== */
.canabis__section .canabis__content h2 {
  color: var(--white);                                                   /* 🎨 White heading */
}























/* ==========================================================================
   SECTION: Product Section - Individual Product Box
   ========================================================================== */
.product__section .product__items {
  background-color: rgb(255, 255, 255); /* 🎨 White background */
  box-shadow: 0px 0px 8px 0px rgba(136, 136, 136, 0.1); /* 🕶️ Soft shadow */
}

/* Thumbnail wrapper */
.product__section .product__items .product__thumb {
  position: relative;
}

/* Product image */
.product__section .product__items .product__thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px 10px 0 0; /* 🟦 Rounded top corners */
}

/* Icon hover group (centered on image) */
.product__section .product__items .product__thumb .product__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 999;
}

/* Individual icon style */
.product__section .product__items .product__thumb .product__icon li {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 100px; /* 🟢 Circle */
  background-color: var(--theme); /* 🎨 Theme color */
  margin: 0px 2px;
  cursor: pointer;
  transform: scaleX(0); /* 👻 Hidden by default */
  transition: all 0.4s ease-out 0s;
}

/* Icon font */
.product__section .product__items .product__thumb .product__icon li a i {
  font-size: 14px;
  color: var(--white); /* 🎨 White icon */
}

/* Bottom overlay fade gradient (hidden initially) */
.product__section .product__items .product__thumb::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to bottom, transparent 0%, var(--subtitle) 100%); /* 🎨 Fade overlay */
  transition: all 0.4s ease;
}

/* Border effect on hover */
.product__section .product__items .product__thumb::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  top: 15px;
  bottom: 15px;
  border-radius: 10px;
  border: 2px solid var(--theme); /* 🎨 Theme border */
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  visibility: hidden;
  transform: scale(0.5); /* 👻 Hidden initially */
  transition: all 0.2s ease;
}

/* ==========================================================================
   SECTION: Product Content Area
   ========================================================================== */
.product__section .product__items .product__content {
  padding: 30px 0;
}

/* Product Title */
.product__section .product__items .product__content h4 {
  text-transform: capitalize;
}

/* Hover color transition for product title */
.product__section .product__items .product__content h4 a {
  transition: all 0.4s ease-in-out;
}

/* Hover state - highlight title */
.product__section .product__items .product__content h4 a:hover {
  color: var(--theme); /* 🎨 Theme color */
}

/* Price container */
.product__section .product__items .product__content .product__price {
  gap: 6px;
}

/* Old price style */
.product__section .product__items .product__content .product__price del,
.product__section .product__items .product__content .product__price span {
  font-size: 16px;
  font-weight: 500;
  color: var(--pra); /* 🎨 Paragraph color */
}

/* Star rating layout */
.product__section .product__items .product__content ul {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

/* Star icons */
.product__section .product__items .product__content ul li i {
  color: var(--theme); /* 🎨 Theme star color */
}

/* ==========================================================================
   SECTION: Hover Effects
   ========================================================================== */

/* Reveal icons */
.product__section .product__items:hover .product__thumb .product__icon li {
  transform: scaleX(1) !important;
}

/* Expand bottom gradient overlay */
.product__section .product__items:hover .product__thumb::before {
  bottom: 0;
  height: 100%;
}

/* Reveal border */
.product__section .product__items:hover .product__thumb::after {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  transition-delay: 0.2s;
}




























/* ==========================================================================
   SECTION: Story Section - Content and Imagery
   ========================================================================== */

/* Sub-title heading */
.story__section .story__content .sub__tittle h6 {
  margin-bottom: 20px;
}

/* Remove any pseudo-element line from sub-title */
.story__section .story__content .sub__tittle h6::before {
  display: none;
}

/* Main title */
.story__section .story__content h2 {
  text-transform: capitalize; /* 🔤 Capitalize each word */
  margin-bottom: 15px;
}

/* Subheading below title */
.story__section .story__content h6 {
  color: var(--theme); /* 🎨 Theme color */
  line-height: 150%; /* 📏 Readability */
  letter-spacing: 1.5px; /* 🔠 Slight spacing */
  margin-bottom: 30px;
}

/* Button span text */
.story__section .story__content .button .cmn--btn span {
  color: var(--theme); /* 🎨 Theme color */
  transition: all 0.3s ease-in-out; /* ⏳ Smooth color transition */
}

/* On hover, text turns white */
.story__section .story__content .button .cmn--btn:hover span {
  color: var(--white) !important; /* 🎨 White override */
}

/* Story image styling */
.story__section .story__thumb img {
  width: 100%;
  height: 100%; /* 📐 Fully responsive image */
}
















/* ==========================================================================
   SECTION: Apply Section - Image, Form, and Styling
   ========================================================================== */

/* Apply Section image styling */
.apply__section .apply__thumb img {
  width: 100%; /* 📐 Full container width */
  height: 100%; /* 📐 Full container height */
  border-radius: 10px; /* 🟦 Rounded corners */
}

/* Apply Section main content wrapper */
.apply__section .apply__wrapper {
  padding: 60px 0 0 60px; /* 📦 Top + Left padding */
  border-radius: 10px; /* 🟦 Rounded corners */
}

/* Responsive padding adjustment for smaller screens */
@media (max-width: 1199px) {
  .apply__section .apply__wrapper {
    padding: 30px 30px; /* 📱 Reduce spacing */
  }
}

/* Header inside the form/info area */
.apply__section .apply__wrapper .info__header h2 {
  text-transform: capitalize; /* 🔤 Capitalize each word */
  margin-bottom: 20px; /* 📏 Spacing below heading */
}

/* Input styling inside contact form */
.apply__section .contact__right .form__clt input {
  width: 100%; /* 📐 Full-width fields */
  outline: none; /* 🚫 No browser focus border */
  border: none; /* 🚫 Remove all borders */
  border-bottom: 1px solid var(--subtitle); /* ⬇ Bottom border only - theme: subtitle color */
  padding: 20px 0; /* 📦 Vertical padding */
  color: var(--black); /* 🎨 Text color: #000 */
  background-color: transparent; /* 🔳 Transparent background */
  font-size: 16px; /* 🔤 Standard text size */
}

/* Responsive font size for smaller screens */
@media (max-width: 1199px) {
  .apply__section .contact__right .form__clt input {
    font-size: 14px; /* 📱 Smaller input text */
  }
}

/* Common button background override */
.apply__section .contact__right .cmn--btn {
  background: transparent; /* 🔳 Transparent button base */
}

/* Button text color */
.apply__section .contact__right .cmn--btn span {
  color: var(--theme); /* 🎨 Theme-colored text */
}

/* Button hover behavior */
.apply__section .contact__right .cmn--btn:hover span {
  color: var(--white); /* 🎨 White on hover */
}














/* ==========================================================================
   SECTION: Service Section - Cards with Hover Zoom and Theme Colors
   ========================================================================== */

/* Service card container */
.service__section .service__items {
  background-color: var(--white); /* 🎨 Background: white */
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); /* 🌫 Subtle shadow for card depth */
}

/* Thumbnail image wrapper */
.service__section .service__items .service__thumb {
  overflow: hidden; /* 🚫 Prevent image from overflowing container on zoom */
}

/* Thumbnail image inside service card */
.service__section .service__items .service__thumb img {
  width: 100%; /* 📐 Full width */
  height: 100%; /* 📐 Full height */
  transition: all 0.4s ease-in-out; /* 🎞 Smooth scaling transition */
}

/* Content block under each service item */
.service__section .service__items .service__content {
  padding: 25px 25px; /* 📦 Internal spacing */
}

/* Heading inside the content area */
.service__section .service__items .service__content h4 {
  text-transform: capitalize; /* 🔤 Capitalize each word */
  margin-bottom: 10px; /* 📏 Space below heading */
}

/* Service item title links */
.service__section .service__items .service__content h4 a {
  transition: all 0.4s ease-in-out; /* 🕓 Smooth hover effect */
}

/* Hover effect on service links */
.service__section .service__items .service__content h4 a:hover {
  color: var(--theme); /* 🎨 Change text color to theme color on hover */
}

/* Zoom effect on image when hovering over service item */
.service__section .service__items:hover .service__thumb img {
  transform: scale(1.1); /* 🔍 Slight zoom-in */
}

















/* ==========================================================================
   SECTION: Discount Section - Image Overlay with Theme Borders and Effects
   ========================================================================== */

/* Wrapper for each discount item thumbnail */
.discount__section .discount__items .discount__thumb {
  position: relative; /* 📍 Makes pseudo-elements absolute to this container */
}

/* ::before overlay with diagonal gradient */
.discount__section .discount__items .discount__thumb::before {
  height: 100%; /* 📐 Full height overlay */
  width: 100%; /* 📐 Full width overlay */
  top: 0;
  left: 0;
  position: absolute;
  content: ""; /* 🧱 Required for pseudo-element */
  background-color: transparent; /* 🧊 Base transparent layer */
  background-image: linear-gradient(
    120deg,
    rgba(0, 0, 0, 0.78) 20%, /* 🎨 Deep black gradient start */
    rgba(0, 60, 56, 0) 80%   /* 🎨 Fade out to transparent teal */
  );
  border-radius: 10px; /* 🟦 Rounded corners */
}

/* ::after border effect with scale on hover */
.discount__section .discount__items .discount__thumb::after {
  position: absolute;
  left: 15px;
  bottom: 15px;
  right: 15px;
  top: 15px;
  border: 2px solid var(--theme); /* 🎨 Theme-colored border */
  content: "";
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  visibility: hidden;
  border-radius: 10px;
  transform: scale(0.5); /* 🔍 Shrunk by default */
  transition: all 0.2s ease; /* 🎞 Smooth grow effect */
}

/* Discount thumbnail image itself */
.discount__section .discount__items .discount__thumb img {
  width: 100%; /* 📐 Responsive full width */
  height: 100%; /* 📐 Responsive full height */
  border-radius: 10px; /* 🟦 Rounded corners for image */
}

/* Wrapper for the discount content */
.discount__section .discount__items .discount__thumb .discount__wrap {
  position: absolute; /* 📍 Layered over the image */
  top: 0;
  left: 0;
}

/* Inner content padding inside the overlay */
.discount__section .discount__items .discount__thumb .discount__wrap .discount__content {
  padding: 60px 60px; /* 📦 Generous padding */
}

/* Small subtitle label (e.g., "30% off") */
.discount__section .discount__items .discount__thumb .discount__wrap .discount__content h6 {
  color: var(--theme); /* 🎨 Theme color */
  font-size: 15px;
  letter-spacing: 2px;
  margin-bottom: 10px;
  text-transform: uppercase; /* 🔠 All caps for emphasis */
}

/* Main heading (e.g., "Black Friday Deal") */
.discount__section .discount__items .discount__thumb .discount__wrap .discount__content h2 {
  color: var(--white); /* 🎨 White text */
  text-transform: capitalize; /* 🔤 Capitalized words */
  margin-bottom: 10px;
}

/* Description paragraph */
.discount__section .discount__items .discount__thumb .discount__wrap .discount__content p {
  color: var(--white); /* 🎨 White text */
  margin-bottom: 40px;
}

/* Hover effect to show glowing theme border */
.discount__section .discount__items:hover .discount__thumb::after {
  transform: scale(1); /* 🔍 Expand border */
  opacity: 1;
  visibility: visible;
  transition-delay: 0.2s; /* ⏱ Smooth delayed animation */
}





















/* ==========================================================================
   SECTION: Contact Section - Background Image with Overlay and Contact Icons
   ========================================================================== */

/* Contact section with background image */
.contact__section {
  background: url(../img/contact/bg.jpg) no-repeat center center; /* 🖼️ Background image centered */
  background-size: cover; /* 📐 Ensure full coverage */
}

/* Dark overlay layer on top of the image */
.contact__section::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: ""; /* 🧱 Required for pseudo-element */
  background: rgba(0, 0, 0, 0.5); /* 🎨 50% black overlay for contrast */
}

/* Contact icon inside the item link */
.contact__section .contact__item a i {
  font-size: 28px; /* 🔠 Icon size */
  color: var(--theme); /* 🎨 Theme color (foreground) */
  margin-bottom: 30px;
  width: 70px; /* ⭕ Fixed icon dimensions */
  height: 70px;
  background-color: var(--white); /* 🎨 White circular background */
  line-height: 70px; /* 🔁 Center vertically */
  border-radius: 100%; /* ⭕ Perfect circle */
}

/* Contact item subheading */
.contact__section .contact__item h5 {
  color: var(--white); /* 🎨 White text for subtitle */
}

/* Contact item heading */
.contact__section .contact__item h2 {
  color: var(--white); /* 🎨 White text for title */
}




















/* ==========================================================================
   SECTION: Work Section - Work Card Items with Interactive Icon & Button
   ========================================================================== */

/* Individual work item card */
.work__section .work__items {
  background-color: rgb(255, 255, 255); /* 🎨 Pure white background */
  box-shadow: 0px 0px 8px 0px rgba(136, 136, 136, 0.1); /* 🌫️ Subtle shadow for depth */
  padding: 30px; /* 📏 Consistent inner spacing */
}

/* Decorative icon with stroke-only theme coloring */
.work__section .work__items .work__icon {
  font-weight: 700;
  -webkit-text-stroke-width: 1px; /* ✏️ Outline thickness */
  -webkit-text-stroke-color: var(--theme); /* 🎨 Theme stroke color */
  font-size: 48px; /* 🔠 Large display */
  line-height: 55px;
  color: transparent; /* 🫥 Fill removed so stroke is visible */
}

/* Work content heading */
.work__section .work__items .work__content h5 {
  text-transform: capitalize; /* 🔤 Capitalized styling */
  font-weight: 600;
}

/* Link inside work item heading */
.work__section .work__items .work__content h5 a {
  transition: all 0.3s ease-in-out; /* ⏳ Smooth transition on hover */
}

/* Hover state for heading link */
.work__section .work__items .work__content h5 a:hover {
  color: var(--theme); /* 🎨 Theme color on hover */
}

/* Description paragraph inside content */
.work__section .work__items .work__content p {
  margin-bottom: 15px; /* 📏 Bottom spacing */
}

/* Arrow button container */
.work__section .work__items .work__content .arrow__button {
  font-size: 18px;
  position: relative;
  transform: translateX(0); /* ➡️ Initial state */
  transition: 0.7s; /* ⏳ Smooth animation */
  display: inline-block;
}

/* Arrow icon color */
.work__section .work__items .work__content .arrow__button i {
  color: var(--black); /* 🎨 Base black icon color */
}

/* Text "Know More" appears on hover */
.work__section .work__items .work__content .arrow__button::before {
  position: absolute;
  content: "Know More"; /* 🪧 Button label */
  font-weight: 600;
  color: var(--theme); /* 🎨 Theme-colored text */
  font-size: 16px;
  left: -95px; /* ⬅️ Initially hidden to the left */
  top: -2px;
  transition: all 0.3s ease-in-out;
  opacity: 0; /* 🙈 Hidden by default */
}

/* Hover animation for arrow and text */
.work__section .work__items:hover .work__content .arrow__button {
  transform: translateX(95px); /* ➡️ Slide right on hover */
  color: var(--theme); /* 🎨 Theme color while moving */
}

.work__section .work__items:hover .work__content .arrow__button::before {
  opacity: 1; /* 👁️ Reveal the "Know More" text */
}



















/* ==========================================================================
   SECTION: Testimonial Section - Cards and Inner Testimonial Styling
   ========================================================================== */

/* Main testimonial wrapper container */
.testimonial__section .testimonial__wrapper {
  padding: 2px; /* 📏 Minor padding for section alignment */
}

/* Individual testimonial card item */
.testimonial__section .testi__items {
  background: url(../img/testimonial/bg.jpg) no-repeat center center; /* 🖼️ Background image */
  background-size: cover; /* 🔍 Ensures full image fit */
  padding: 50px 40px; /* 📏 Spacing inside card */
  border-radius: 10px; /* 🟦 Rounded corners */
  background-color: rgb(255, 255, 255); /* 🎨 Fallback white background */
  box-shadow: 0px 0px 8px 0px rgba(136, 136, 136, 0.1); /* 🌫️ Subtle elevation */
}

/* Flex wrapper around thumb and content */
.testimonial__section .testi__items .testi__wrap {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 20px;
  gap: 25px; /* ↔️ Space between image and content */
}

/* Circular testimonial thumbnail image */
.testimonial__section .testi__items .testi__wrap .testi__thumb img {
  border-radius: 100%; /* 🟠 Makes image perfectly round */
}

/* Text block beside image */
.testimonial__section .testi__items .testi__wrap .content {
  position: relative;
}

/* Subtext like title or role */
.testimonial__section .testi__items .testi__wrap .content span {
  font-size: 18px;
  color: var(--pra); /* 🎨 Subtle paragraph text color */
}

/* Testimonial text block */
.testimonial__section .testi__items p {
  position: relative;
}

/* Rating stars wrapper */
.testimonial__section .testi__items ul {
  display: flex;
  align-items: center;
  margin-top: 15px;
  position: relative;
}

/* Individual star item spacing */
.testimonial__section .testi__items ul li {
  margin-right: 4px;
}

/* Star icon color */
.testimonial__section .testi__items ul li i {
  color: var(--theme); /* 🌟 Uses primary theme color */
}

/* Standalone inner testimonial card styling */
.testimonial__section .testi__inner {
  background: #ffffff; /* 🎨 White background */
  position: relative;
  text-align: center;
  padding: 0 60px 50px; /* 🧱 Top 0, sides 60px, bottom 50px */
  box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1); /* 🌫️ Soft card shadow */
  border-radius: 15px; /* 🟦 Rounded card edges */
  border-top: 10px solid var(--theme); /* 🎨 Thick top border in theme color */
  transition: all 0.3s ease-in-out; /* ⏳ Smooth hover animation */
  margin-top: 50px;
  margin-bottom: 40px;
}

/* Top circular image with upward float effect */
.testimonial__section .testi__inner .testi__inner__thumb {
  margin-bottom: 40px;
  margin-top: -90px;
  position: relative;
}

/* Inner profile picture */
.testimonial__section .testi__inner .testi__inner__thumb img {
  width: 150px;
  height: 150px;
  border-radius: 100%; /* 🟠 Perfect circle image */
}

/* Heading (Name) inside testimonial card */
.testimonial__section .testi__inner .testi__inner__content h5 {
  margin-top: 20px;
}

/* Subtext (Role or Title) styling */
.testimonial__section .testi__inner .testi__inner__content span {
  font-size: 17px;
  font-weight: 500;
  color: var(--theme); /* 🎨 Primary highlight color */
}






















/* ==========================================================================
   SECTION: Team Section - Team Card, Thumbnail, Social Icons
   ========================================================================== */

/* Team card container */
.team__section .team__items {
  box-shadow: 0px 3px 7.54px 5.46px rgba(0, 0, 0, 0.04); /* 🌫️ Subtle card shadow */
  background: var(--white); /* 🎨 Background set to white theme var */
  border-radius: 0 0 10px 10px; /* 🟦 Rounded bottom corners only */
}

/* Team profile thumbnail image */
.team__section .team__items .team__thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px 10px 0 0; /* 🟦 Rounded top corners only */
}

/* Inner content block below image */
.team__section .team__items .team__content {
  position: relative;
  padding: 25px 30px; /* 📏 Spacing around content */
  text-align: center;
}

/* Name heading with hover link behavior */
.team__section .team__items .team__content h5 a {
  transition: all 0.4s ease-in-out; /* ⏳ Smooth hover animation */
}

/* Name hover effect */
.team__section .team__items .team__content h5 a:hover {
  color: var(--theme); /* 🎨 Primary highlight color */
}

/* Title/role below name */
.team__section .team__items .team__content p {
  text-transform: capitalize;
  color: var(--theme); /* 🎨 Primary color text */
  margin-top: 5px;
}

/* Social icon button container */
.team__section .team__items .team__content .social__icon {
  gap: 10px; /* ↔️ Space between icons */
  margin-top: 20px;
}

/* Social icon box */
.team__section .team__items .team__content .social__icon li {
  width: 30px;
  height: 30px;
  line-height: 28px;
  border: 1px solid var(--theme); /* 🎨 Border with theme color */
  border-radius: 5px; /* 🟪 Slightly rounded corners */
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

/* Icon inside box */
.team__section .team__items .team__content .social__icon li a i {
  color: var(--theme); /* 🎨 Icon color */
  font-size: 15px;
  transition: all 0.4s ease-in-out;
}

/* Hover background effect for icon container */
.team__section .team__items .team__content .social__icon li:hover {
  background-color: var(--theme); /* 🎨 Fill with theme color */
}

/* Hover icon color flip */
.team__section .team__items .team__content .social__icon li:hover a i {
  color: var(--white); /* 🎨 Icon switches to white on hover */
}


















/* ==========================================================================
   SECTION: Default Pagination Styles
   Description: Styling for numbered pagination controls with hover behavior
   ========================================================================== */

/* Pagination wrapper container */
.default__pagination {
  display: flex; /* ➡️ Horizontal layout */
  align-items: center; /* 🔽 Center items vertically */
  gap: 10px; /* ↔️ Space between each pagination item */
  justify-content: center; /* 🔄 Center all items horizontally */
}

/* Individual pagination button */
.default__pagination li {
  width: 40px;
  height: 40px;
  border-radius: 5px; /* ⬜ Slightly rounded corners */
  border: 1px solid var(--theme); /* 🎨 Theme color border */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s; /* ⏳ Smooth hover transition */
  cursor: pointer;
  font-weight: 500; /* 🅱️ Bold text for visibility */
}

/* Anchor text inside pagination item */
.default__pagination li a {
  transition: all 0.4s; /* ⏳ Smooth transition on text hover */
  color: var(--theme); /* 🎨 Theme-colored text */
}

/* Icon inside the anchor, if any */
.default__pagination li a i {
  color: var(--theme); /* 🎨 Theme-colored icon */
}

/* Hover state for pagination button */
.default__pagination li:hover {
  background-color: var(--theme); /* 🎨 Highlight background on hover */
}

/* Hover state for link text */
.default__pagination li:hover a {
  color: var(--white); /* 🎨 Turn text white on hover */
}

/* Hover state for icon */
.default__pagination li:hover a i {
  color: var(--white); /* 🎨 Turn icon white on hover */
}
























/* ==========================================================================
   SECTION: Team Details Styles
   Description: Styling for team member detail page layout and content
   ========================================================================== */

/* Container for team details, hiding overflow */
.team__details {
  overflow: hidden;
}

/* Left section: Team member image */
.team__details .team__left .details__thumb img {
  width: 100%; /* 📐 Full width */
  height: 100%; /* 📐 Full height */
  border-radius: 10px; /* 🟦 Rounded corners */
}

/* Team member name */
.team__details .details__cont h3 {
  text-transform: capitalize; /* 🔠 Capitalize name */
  margin-bottom: 15px;
}

/* Team member role/title */
.team__details .details__cont span {
  font-size: 18px;
  color: var(--theme); /* 🎨 Theme accent */
  font-weight: 600;
  text-transform: uppercase;
}

/* Team member description */
.team__details .details__cont p {
  margin-top: 15px;
  max-width: 100%;
}

/* List of personal attributes or info */
.team__details .details__cont .list__item li {
  font-size: 16px;
  font-weight: 500;
  padding: 15px 0;
  color: var(--pra); /* 🎨 Subtext color */
}

/* Icon for each list item */
.team__details .details__cont .list__item li i {
  color: var(--theme); /* 🎨 Theme icon */
  font-size: 16px;
  margin-right: 5px;
}

/* Bottom section title */
.team__details .bottom__info .bottom__content h3 {
  text-transform: capitalize;
  margin-bottom: 15px;
}

/* Bullet points or profile summary */
.team__details .bottom__info .bottom__content ul li {
  font-size: 16px;
  text-transform: capitalize;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--black); /* 🎨 Main text */
}

/* Social icon border */
.team__details .bottom__info .bottom__content .social__icon li {
  border: 1px solid var(--theme); /* 🎨 Themed border */
}

/* Social icon style (default) */
.team__details .bottom__info .bottom__content .social__icon li a i {
  color: var(--theme); /* 🎨 Theme-colored icon */
  transition: all 0.3s ease-in-out;
}

/* Social icon style (hover) */
.team__details .bottom__info .bottom__content .social__icon li:hover a i {
  color: var(--white); /* 🎨 Turns white on hover */
}






















/* ==========================================================================
   SECTION: Progress Bars Styling
   Description: Styles for custom progress bar components with theming
   ========================================================================== */

/* Wrapper for entire progress bar section */
.progressbar-wrap {
  margin-top: 33px; /* 📐 Spacing above the progress section */
}

/* Individual progress bar block */
.progressbar-wrap .progress-element {
  width: 100%; /* 📐 Full-width container */
  margin: 0 0 16px;
}

/* Progress title above each bar */
.progressbar-wrap .progress-element h6 {
  font-weight: 600;
  margin-bottom: 3px;
  color: var(--black); /* 🎨 Primary text color */
  font-family: "Barlow", sans-serif;
}

/* Flex container for progress label + count + bar */
.progressbar-wrap .progress-element .main-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Label on the left side of progress bar */
.progressbar-wrap .progress-element .main-progress h6 {
  padding-left: 20px;
  margin-bottom: 0px;
  color: var(--black); /* 🎨 Text color */
  font-size: 16px;
  font-weight: 400;
}

/* Percentage count text */
.progressbar-wrap .progress-element .main-progress .pro-count {
  font-size: 16px;
  color: var(--black); /* 🎨 Count text color */
  font-family: "Barlow", sans-serif;
}

/* Base progress bar track */
.progressbar-wrap .progress-element .main-progress .progress-container {
  position: relative;
  background: #eee; /* 🎨 Light gray background */
  height: 6px;
  width: 100%;
  border-radius: 6px;
}

/* Filled portion (style 1) of the progress bar */
.progressbar-wrap .progress-element .main-progress .progress-container .main-scale {
  position: absolute;
  top: 0;
  left: 0;
  width: 95%; /* 📊 Adjust fill width as needed */
  height: 100%;
  overflow: initial;
  background-color: var(--theme); /* 🎨 Fill color */
}

/* Alternate fill style (style 2) */
.progressbar-wrap .progress-element .main-progress .progress-container .main-scle2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%; /* 📊 Fill variation */
  height: 100%;
  background-color: var(--theme); /* 🎨 Fill color */
}

/* Decorative stripe/edge for base bar */
.progressbar-wrap .progress-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: -20px;
  height: 100%;
  background: var(--theme); /* 🎨 Edge highlight */
}

/* Extra margin class for styled progress groups */
.style__progress {
  margin-top: 30px;
}

























/* ==========================================================================
   SECTION: Details Section Styling
   Description: Styling for details pages, image blocks, navigation, and service boxes
   ========================================================================== */

/* Wrapper for text title styling */
.details__section .details__items .title {
  text-transform: capitalize;
  margin-bottom: 25px;
}

/* -------- RESPONSIVE: Font resizing for title -------- */
@media (max-width: 1199px) {
  .details__section .details__items .title {
    font-size: 38px;
  }
}
@media (max-width: 991px) {
  .details__section .details__items .title {
    font-size: 32px;
  }
}
@media (max-width: 575px) {
  .details__section .details__items .title {
    font-size: 24px;
    line-height: 35px;
  }
}

/* Image block in detail section */
.details__section .details__items .details__thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px; /* ⤴️ Rounded corners */
}

/* Content block spacing */
.details__section .details__items .details__content {
  padding: 30px 0;
}

/* Subtitle heading */
.details__section .details__items .details__content h3 {
  text-transform: capitalize;
  margin-bottom: 20px;
}

/* Paragraph container */
.details__section .details__items .details__content p {
  max-width: 100%;
}

/* Image section styling */
.details__section .details__items .img__item {
  padding: 30px 0;
}

/* Image inside image section */
.details__section .details__items .img__item .thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/* Margin class */
.details__section .details__items .img__item .mt-25 {
  margin-top: 25px;
}

/* Prev/Next navigation section */
.details__section .details__items .prev__next__btns {
  padding: 30px 0;
  border-top: 1px solid var(--border); /* 🎨 Thematic border */
  border-bottom: 1px solid var(--border); /* 🎨 Thematic border */
}

/* Link text styling */
.details__section .details__items .prev__next__btns .text {
  font-size: 16px;
  color: var(--black); /* 🎨 Text color */
  font-weight: 600;
  transition: all 0.3s ease-in-out;
}

/* Hover effect */
.details__section .details__items .prev__next__btns .text:hover {
  color: var(--theme); /* 🎨 Accent color */
}

/* Icon in nav buttons */
.details__section .details__items .prev__next__btns .icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  color: var(--theme); /* 🎨 Icon color */
  border-radius: 100px;
}

/* Gaps between prev/next button items */
.details__section .details__items .prev__next__btns .prev__btn,
.details__section .details__items .prev__next__btns .next__btn {
  gap: 15px;
}

/* --------------------------------------
   SECTION: Service Details
   -------------------------------------- */

/* Flexbox container for icon list */
.details__section .service__details .service__wrap .service__list {
  gap: 25px;
}

/* Responsive wrap on smaller screens */
@media (max-width: 1199px) {
  .details__section .service__details .service__wrap .service__list {
    flex-wrap: wrap;
  }
}

/* Icon box */
.details__section .service__details .service__wrap .service__list .icon {
  width: 70px;
  height: 50px;
  line-height: 50px;
  border-radius: 10px;
  background-color: var(--theme); /* 🎨 Background */
  text-align: center;
}

/* Icon color */
.details__section .service__details .service__wrap .service__list .icon i {
  color: var(--white); /* 🎨 Icon text */
  font-size: 16px;
}

/* Paragraph section for description */
.details__section .service__details .pra__text {
  max-width: 100%;
}

/* Highlight service box */
.details__section .service__details .special__box {
  background-color: var(--theme); /* 🎨 Box color */
  padding: 40px;
  border-radius: 10px;
}

/* Text inside special box */
.details__section .service__details .special__box h5 {
  line-height: 40px;
  color: var(--white); /* 🎨 White text */
}

/* --------------------------------------
   SECTION: Benefits List with Icons
   -------------------------------------- */

.details__section .service__details .benefit__item .points {
  position: relative;
}

.details__section .service__details .benefit__item .points li {
  position: relative;
  font-size: 16px;
  padding-left: 25px;
  font-weight: 500;
  line-height: 1.6em;
  margin-bottom: 12px;
  color: var(--pra); /* 🎨 Text color */
}

/* Custom bullet icon using FontAwesome */
.details__section .service__details .benefit__item .points li::before {
  position: absolute;
  content: "\f14a"; /*  FontAwesome check */
  left: 0px;
  top: 5px;
  color: var(--theme); /* 🎨 Icon color */
  font-size: 16px;
  line-height: 1em;
  font-weight: 500;
  font-family: "FontAwesome";
}

















/* ==========================================================================
   SECTION: Sidebar Right Styling
   Description: Sidebar structure including service list, help box, recent posts, and tags
   ========================================================================== */

/* Title Headings */
.sidebar__right .widget__tittle h4,
.sidebar__right .widget__tittle h5 {
  text-transform: capitalize;
}

/* ==============================
   SERVICE LIST
   ============================== */

.sidebar__right .service__list {
  position: relative;
}
.sidebar__right .service__list li {
  padding: 20px 20px;
  border-radius: 10px;
  border: 1px solid var(--border); /* 🎨 Border color */
  font-weight: 500;
  transition: all 0.4s ease-in-out;
  text-transform: capitalize;
}
.sidebar__right .service__list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--black); /* 🎨 Text color */
  transition: all 0.4s ease-in-out;
}
.sidebar__right .service__list li a span {
  font-size: 18px;
  font-weight: 500;
}
@media (max-width: 575px) {
  .sidebar__right .service__list li a span {
    font-size: 15px;
  }
}
.sidebar__right .service__list li:hover {
  background-color: var(--theme); /* 🎨 Theme hover */
  border: 1px solid var(--theme);
}
.sidebar__right .service__list li:hover a {
  color: var(--white); /* 🎨 Hover text color */
}
.sidebar__right .service__list .active {
  background-color: var(--theme); /* 🎨 Active state */
  border: 1px solid var(--theme);
}
.sidebar__right .service__list .active a {
  color: var(--white-color); /* 🎨 Active text color */
}

/* ==============================
   HELPING BOX
   ============================== */

.sidebar__right .service__helping {
  background-color: var(--white); /* 🎨 Box background */
  box-shadow: 0px 3px 7.54px 5.46px rgba(0, 0, 0, 0.04); /* Soft shadow */
}
.sidebar__right .service__helping .thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.sidebar__right .service__helping .helping__content {
  padding: 20px 25px;
}
.sidebar__right .service__helping .helping__content h4 {
  text-transform: capitalize;
  margin-bottom: 10px;
}
.sidebar__right .service__helping .helping__content p {
  text-transform: capitalize;
}
.sidebar__right .service__helping .helping__content ul li {
  font-size: 18px;
  font-weight: 500;
}
.sidebar__right .service__helping .helping__content ul li i {
  color: var(--theme); /* 🎨 Icon color */
  margin-right: 4px;
  font-size: 18px;
}
.sidebar__right .service__helping .helping__content ul li span a {
  color: var(--pra); /* 🎨 Text color */
  text-transform: capitalize;
}

/* ==============================
   SEARCH FORM
   ============================== */

.sidebar__right form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
  background: transparent;
  border: 1px solid var(--border);
}
.sidebar__right form input {
  width: 100%;
  border-radius: 5px;
  padding: 12px 20px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--black); /* 🎨 Input text */
}
.sidebar__right form button {
  margin-right: 10px;
  margin-top: 8px;
  background: none;
  border: none;
  outline: none;
}
.sidebar__right form button i {
  color: var(--theme); /* 🎨 Button icon */
}

/* ==============================
   RECENT POSTS LIST
   ============================== */

.sidebar__right .recent__wrap .recent__items {
  display: flex;
  align-items: center;
  gap: 9px 20px;
}
.sidebar__right .recent__wrap .recent__items .recent__content {
  width: calc(100% - 150px);
}
.sidebar__right .recent__wrap .recent__items .recent__content h6 {
  text-transform: capitalize;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
}
.sidebar__right .recent__wrap .recent__items .recent__content h6:hover {
  color: var(--theme); /* 🎨 Hover color */
}
@media (max-width: 500px) {
  .sidebar__right .recent__wrap .recent__items .recent__content h6 {
    font-size: 14px;
    margin-bottom: 0;
  }
}
@media (max-width: 1199px) {
  .sidebar__right .recent__wrap .recent__items .recent__content p {
    font-size: 14px !important;
  }
}
.sidebar__right .recent__wrap .recent__items .recent__content .date {
  font-size: 16px;
  color: var(--theme-color); /* 🎨 Date color */
}
@media (max-width: 500px) {
  .sidebar__right .recent__wrap .recent__items .recent__content .date {
    font-size: 14px;
  }
}
.sidebar__right .recent__wrap .recent__items:not(:last-child) {
  margin-bottom: 24px;
}
.sidebar__right .recent__wrap .recent__items .thumb {
  display: block;
  width: 120px;
}
.sidebar__right .recent__wrap .recent__items .thumb img {
  width: 100%;
  border-radius: 5px;
}
@media (max-width: 1199px) {
  .sidebar__right .recent__wrap .recent__items {
    gap: 9px 12px;
  }
  .sidebar__right .recent__wrap .recent__items .thumb {
    width: 100px;
  }
  .sidebar__right .recent__wrap .recent__items .recent__content {
    width: calc(100% - 100px);
  }
}

/* ==============================
   TAG LIST
   ============================== */

.sidebar__right .tag__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.sidebar__right .tag__list li {
  margin: 0 8px 8px 0;
}
.sidebar__right .tag__list li a {
  font-size: 16px;
  display: inline-block;
  padding: 5px 18px;
  color: var(--black); /* 🎨 Tag text */
  border: 1px solid var(--border); /* 🎨 Tag border */
  border-radius: 5px;
  font-weight: 600;
  transition: all 0.3s;
}
.sidebar__right .tag__list li a:hover {
  background-color: var(--theme); /* 🎨 Hover */
  color: var(--white); /* 🎨 Text on hover */
}

/* ==============================
   RECENT BUTTON
   ============================== */

.sidebar__right .recent__btn {
  display: flex;
  align-items: center;
  gap: 5px;
}
.sidebar__right .recent__btn span {
  color: var(--theme); /* 🎨 Label text */
  font-size: 14px;
  font-weight: 600;
  line-height: 26px;
  text-transform: uppercase;
}
.sidebar__right .recent__btn .icon i {
  font-size: 14px;
  color: var(--theme); /* 🎨 Icon */
}






















/* ==========================================================================
   SECTION: Blog Details Styling
   Description: Styling for blog post content, video previews, footer actions, comments
   ========================================================================== */

.blog__details {
  overflow: hidden;
}

/* ==============================
   Blog Content Card
   ============================== */

.blog__details .blog__details__items .details__wrapper {
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08); /* Soft drop shadow */
}
.blog__details .blog__details__items .details__wrapper .details__thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.blog__details .blog__details__items .details__wrapper .details__content {
  padding: 25px 25px;
}
.blog__details .blog__details__items .details__wrapper .details__content h2 {
  text-transform: capitalize;
  font-size: 36px;
  line-height: 40px;
}
@media (max-width: 1199px) {
  .blog__details .blog__details__items .details__wrapper .details__content h2 {
    line-height: 40px !important;
  }
}
@media (max-width: 991px) {
  .blog__details .blog__details__items .details__wrapper .details__content h2 {
    font-size: 24px;
    line-height: 35px !important;
  }
}
@media (max-width: 575px) {
  .blog__details .blog__details__items .details__wrapper .details__content h2 {
    font-size: 18px;
    line-height: 28px !important;
  }
}
.blog__details .blog__details__items .details__wrapper .details__content p {
  max-width: 100%;
}

/* ==============================
   Blog Meta Info (Tags, Author)
   ============================== */

.blog__details .blog__details__items .details__wrapper .details__content ul {
  display: flex;
  align-items: center;
  gap: 10px 30px;
  padding: 20px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border); /* 🎨 Border color */
}
@media (max-width: 575px) {
  .blog__details .blog__details__items .details__wrapper .details__content ul {
    flex-wrap: wrap;
  }
}
.blog__details .blog__details__items .details__wrapper .details__content ul li {
  margin-right: 10px;
  font-size: 18px;
  font-weight: 500;
  color: var(--pra); /* 🎨 Paragraph-style color */
}
.blog__details .blog__details__items .details__wrapper .details__content ul li i {
  margin-right: 8px;
  color: var(--theme); /* 🎨 Icon color */
  font-size: 16px;
}

/* ==============================
   Additional Images
   ============================== */

.blog__details .blog__details__items .details__wrapper .details__content .more__details__item img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/* ==============================
   Embedded Video Section
   ============================== */

.blog__details .blog__details__items .details__wrapper .details__content .video__thumb {
  margin: 28px 0;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.blog__details .blog__details__items .details__wrapper .details__content .video__thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.blog__details .blog__details__items .details__wrapper .details__content .video__thumb .video-btn {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--theme); /* 🎨 Video button */
  text-align: center;
  line-height: 58px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s;
}
.blog__details .blog__details__items .details__wrapper .details__content .video__thumb .video-btn i {
  font-size: 18px;
  color: var(--white); /* 🎨 Icon inside video button */
}

/* ==============================
   Standard Footer (Share / Actions)
   ============================== */

.blog__details .blog__details__items .details__wrapper .details__content .standard__footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(69, 47, 244, 0.1);
  padding-top: 24px;
  margin-top: 28px;
}
@media (max-width: 500px) {
  .blog__details .blog__details__items .details__wrapper .details__content .standard__footer {
    display: grid;
    gap: 15px;
  }
}
.blog__details .blog__details__items .details__wrapper .details__content .standard__footer .standard___btn,
.blog__details .blog__details__items .details__wrapper .details__content .standard__footer .standard___btn2 {
  display: flex;
  align-items: center;
  gap: 5px;
}
.blog__details .blog__details__items .details__wrapper .details__content .standard__footer .standard___btn .icon {
  margin-top: 6px;
}
.blog__details .blog__details__items .details__wrapper .details__content .standard__footer .standard___btn .icon i {
  font-size: 22px;
  color: var(--theme);
}
.blog__details .blog__details__items .details__wrapper .details__content .standard__footer .standard___btn span {
  font-weight: 600;
  font-size: 18px;
  color: var(--theme);
}
.blog__details .blog__details__items .details__wrapper .details__content .standard__footer .standard___btn2 .icon i {
  font-size: 16px;
  color: var(--theme);
}
.blog__details .blog__details__items .details__wrapper .details__content .standard__footer .standard___btn2 span {
  font-weight: 600;
  font-size: 16px;
  color: var(--black); /* 🎨 Text */
  transition: all 0.3s ease-in-out;
}
.blog__details .blog__details__items .details__wrapper .details__content .standard__footer .standard___btn2 span:hover {
  color: var(--theme); /* 🎨 Hover effect */
}

/* ==============================
   Comments Wrap Section
   ============================== */

.blog__details .blog__details__items .comments__wrap {
  padding: 28px 28px;
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08); /* 🎨 Soft shadow */
  border-radius: 5px;
}
@media (max-width: 575px) {
  .blog__details .blog__details__items .comments__wrap {
    padding: 20px 15px;
  }
}
.blog__details .blog__details__items .comments__wrap h4 {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border); /* 🎨 Divider */
  text-transform: capitalize;
}
@media (max-width: 575px) {
  .blog__details .blog__details__items .comments__wrap h4 {
    font-size: 28px;
    padding-bottom: 22px;
  }
}





















/* ==========================================================================
   SECTION: Reviews Box Layout
   Description: Styles for user reviews, including avatars, names, dates, ratings, and reactions
   ========================================================================== */

.reviews__boxes {
  padding: 15px 0;
  display: flex; /* Use Flexbox for layout */
  gap: 20px;
}

/* Divider between review items */
.reviews__boxes:not(:last-child) {
  border-bottom: 1px solid var(--border); /* 🎨 Border color */
}

/* Responsive: stack layout on smaller screens */
@media (max-width: 1199px) {
  .reviews__boxes {
    flex-wrap: wrap;
  }
}

/* ==============================
   Reviewer Image (Circle Avatar)
   ============================== */

.reviews__boxes .thumb {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* Full circle */
}

.reviews__boxes .thumb img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

/* Smaller Avatar (e.g. inline preview) */
.reviews__boxes .thumb__review {
  width: 60px;
  height: 60px;
}
.reviews__boxes .thumb__review img {
  width: 100%;
  height: 100%;
  border-radius: 100%; /* Full circle */
}

/* ==============================
   Review Content Wrapper
   ============================== */

.reviews__boxes .review-content {
  width: calc(100% - 100px); /* Fill remaining space next to avatar */
}

@media (max-width: 1199px) {
  .reviews__boxes .review-content {
    width: 100%; /* Full width when stacked */
  }
}

/* ==============================
   Name + Rating Line
   ============================== */

.reviews__boxes .review-content .name__ratting {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 8px;
}

.reviews__boxes .review-content .name {
  font-size: 18px;
  font-weight: 600;
  color: var(--black); /* 🎨 Text color */
  text-transform: capitalize;
}

.reviews__boxes .review-content .time {
  font-size: 16px;
  color: var(--pra); /* 🎨 Secondary/paragraph color */
  font-weight: 500;
  margin-left: 10px;
}

/* ==============================
   Review Body
   ============================== */

.reviews__boxes .review-content p {
  font-size: 16px;
  margin-bottom: 10px;
}

/* ==============================
   Likes & Reactions Bar
   ============================== */

.reviews__boxes .review-content .liked__wrap {
  display: flex;
  align-items: center;
  gap: 40px;
}

.reviews__boxes .review-content .liked__wrap li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reviews__boxes .review-content .liked__wrap li span {
  color: var(--theme); /* 🎨 Highlight color */
  font-size: 18px;
  font-weight: 400;
}

.reviews__boxes .review-content .liked__wrap li .icon {
  margin-top: 6px;
}

.reviews__boxes .review-content .liked__wrap li .icon i {
  color: var(--theme); /* 🎨 Icon color */
  font-size: 20px;
}

/* ==============================
   Rating Stars or Text
   ============================== */

.reviews__boxes .review-content .ratting {
  display: flex;
  align-items: center;
  gap: 5px;
}

.reviews__boxes .review-content .ratting span {
  color: var(--theme); /* 🎨 Theme color for stars or numbers */
  font-size: 16px;
}
















/* ==========================================================================
   SECTION: Gallery Section Styling
   Description: Handles layout, interactivity, hover overlays, and responsiveness
   ========================================================================== */

.gallery-section {
  overflow: hidden;
  position: relative;
}

/* ----------------------------------------------
   FLEX CONTAINER FOR GALLERY WRAPPER
   ---------------------------------------------- */
.gallery-section .galley-wrapper {
  display: flex; /* Flexbox layout */
  justify-content: space-between;
  align-items: center;
}

/* ----------------------------------------------
   INDIVIDUAL GALLERY ITEM WRAPPER
   ---------------------------------------------- */
.gallery-section .galley-wrapper .gallery-items .g-items {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 25px;
}

/* ----------------------------------------------
   GALLERY IMAGE WITH ROUNDED CORNER
   ---------------------------------------------- */
.gallery-section .galley-wrapper .gallery-items .g-items img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/* ----------------------------------------------
   HOVER OVERLAY ON GALLERY IMAGE
   ---------------------------------------------- */
.gallery-section .galley-wrapper .gallery-items .g-items .link-solcial {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 🎨 Semi-transparent black */
  border-radius: 10px;
  opacity: 0;
  transition: all 0.7s;
}

/* ----------------------------------------------
   CENTERED OVERLAY CONTENT
   ---------------------------------------------- */
.gallery-section .galley-wrapper .gallery-items .g-items .link-solcial .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the content */
  text-align: center;
}

/* Title inside overlay */
.gallery-section .galley-wrapper .gallery-items .g-items .link-solcial .content .title {
  font-size: 24px;
  margin-bottom: 15px;
  color: var(--white); /* 🎨 Text color white */
  text-transform: capitalize;
  font-weight: 600;
}

/* ----------------------------------------------
   SOCIAL ICONS INSIDE OVERLAY
   ---------------------------------------------- */
.gallery-section .galley-wrapper .gallery-items .g-items .link-solcial .link {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-section .galley-wrapper .gallery-items .g-items .link-solcial .link a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid var(--white); /* 🎨 Border color */
  border-radius: 10%;
  display: block;
}

.gallery-section .galley-wrapper .gallery-items .g-items .link-solcial .link a:not(:last-child) {
  margin-right: 10px;
}

.gallery-section .galley-wrapper .gallery-items .g-items .link-solcial .link a i {
  color: var(--white); /* 🎨 Icon color */
  font-size: 17px;
}

/* ----------------------------------------------
   HOVER EFFECT TO SHOW OVERLAY
   ---------------------------------------------- */
.gallery-section .galley-wrapper .gallery-items .g-items:hover {
  cursor: pointer;
}
.gallery-section .galley-wrapper .gallery-items .g-items:hover .link-solcial {
  opacity: 1;
}

/* Extra margin container */
.gallery-section .galley-wrapper .gallery-items-two {
  margin: 0 20px;
}

/* ==========================================================================
   RESPONSIVE STYLING
   ========================================================================== */

/* Tablet breakpoint */
@media screen and (max-width: 1199px) {
  .gallery-section .galley-wrapper .gallery-items .g-items .link-solcial .content .title {
    font-size: 18px;
    margin-bottom: 15px;
  }
}

/* Medium screen / Tablet portrait */
@media screen and (max-width: 991px) {
  .gallery-section .galley-wrapper {
    flex-wrap: wrap;
  }

  .gallery-section .galley-wrapper .gallery-items-two {
    margin: 0;
  }

  .gallery-section .galley-wrapper .gallery-items-three {
    margin-top: -25px;
  }

  .gallery-section .galley-wrapper .gallery-items {
    width: 48.5%;
  }

  .gallery-section .galley-wrapper .gallery-items .g-items {
    margin: 20px;
  }

  .gallery-section .galley-wrapper .gallery-items .g-items .link-solcial .content .title {
    font-size: 18px;
    margin-bottom: 15px;
  }
}

/* Mobile breakpoint */
@media screen and (max-width: 580px) {
  .gallery-section .galley-wrapper {
    flex-wrap: wrap;
  }

  .gallery-section .galley-wrapper .gallery-items-two {
    margin: 0;
  }

  .gallery-section .galley-wrapper .gallery-items-three {
    margin-top: 0px;
  }

  .gallery-section .galley-wrapper .gallery-items {
    width: 95%;
  }

  .gallery-section .galley-wrapper .gallery-items .g-items {
    margin: 10px;
  }

  .gallery-section .galley-wrapper .gallery-items .g-items:not(:last-child) {
    margin-bottom: 25px;
  }

  .gallery-section .galley-wrapper .gallery-items .g-items .link-solcial .content .title {
    font-size: 18px;
    margin-bottom: 15px;
  }
}





















/* ==========================================================================
   SECTION: Error Page Styling
   Description: Styles for error message display, heading, paragraph, and button
   ========================================================================== */

/* ----------------------------------------------
   LARGE ERROR NUMBER (e.g., 404)
   ---------------------------------------------- */
.error__section .error__content h1 {
  font-size: 200px;               /* Giant heading for error number */
  color: var(--black);            /* 🎨 Primary text color */
}

/* Responsive adjustment for mobile screens */
@media (max-width: 575px) {
  .error__section .error__content h1 {
    font-size: 100px;             /* Smaller on phones */
  }
}

/* ----------------------------------------------
   ERROR TITLE / MESSAGE
   ---------------------------------------------- */
.error__section .error__content h3 {
  text-transform: uppercase;      /* Convert to all caps */
  margin-bottom: 15px;            /* Space below heading */
}

/* ----------------------------------------------
   ERROR PARAGRAPH
   ---------------------------------------------- */
.error__section .error__content p {
  text-align: center !important; /* Override alignment to center */
  max-width: 100%;               /* Full container width */
}

/* ----------------------------------------------
   STYLED BUTTON
   ---------------------------------------------- */
.error__section .error__content .button .cmn--btn span {
  color: var(--theme);            /* 🎨 Theme color for button text */
}

/* Hover effect for button */
.error__section .error__content .button .cmn--btn:hover span {
  color: var(--white);            /* 🎨 Invert to white on hover */
}

















/* ==========================================================================
   SECTION: Shop Details Styles
   Description: Handles product display, quantity input, rating, and comments
   ========================================================================== */

/* ----------------------------------------------
   Product Main Image Slide
   ---------------------------------------------- */
.shop__details .shop-single-slide img {
  width: 100%;                       /* Full width image */
  height: 100%;                      /* Full height container */
}

/* ----------------------------------------------
   Thumbnail Image Hover for Product
   ---------------------------------------------- */
.shop__details .shop-slider-thumb img {
  width: 100%;
  height: 100%;
  cursor: pointer;                   /* Show pointer on hover */
}

/* ----------------------------------------------
   Cart Quantity Box
   ---------------------------------------------- */
.shop__details .cart-quantity {
  padding-right: 15px;              /* Space on right side */
}
.shop__details .cart-quantity input {
  width: 50px;
  height: 40px;
  text-align: center;               /* Centered number input */
  background-color: transparent;
  border: 1px solid var(--border);  /* 🎨 Border color */
}
.shop__details .cart-quantity .qty,
.shop__details .cart-quantity .minus,
.shop__details .cart-quantity .plus {
  color: var(--black);              /* 🎨 Black font color */
  font-weight: 500;                 /* Emphasized text */
}

/* ----------------------------------------------
   Cart Wrapper Layout
   ---------------------------------------------- */
.shop__details .cart-wrp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;  /* Space between discount & button */
}
.shop__details .cart-wrp .discount input {
  border: 1px solid var(--border);  /* 🎨 Border color */
  padding: 7px 10px;
  background-color: transparent;
  color: var(--pra);                /* 🎨 Text color for discount input */
}

/* ----------------------------------------------
   Button Styling
   ---------------------------------------------- */
.shop__details .cmn--btn span,
.shop__details .cmn--btn span i {
  color: var(--theme);              /* 🎨 Theme color on default */
}
.shop__details .cmn--btn:hover span,
.shop__details .cmn--btn:hover i {
  color: var(--white);              /* 🎨 Hover text/icon turns white */
}

/* ----------------------------------------------
   Responsive Layout for Discount Box
   ---------------------------------------------- */
@media screen and (max-width: 575px) {
  .shop__details .cart-wrp .discount {
    margin-top: 10px;               /* Add spacing on smaller screens */
  }
}

/* ----------------------------------------------
   Tab Navigation for Product Details
   ---------------------------------------------- */
.shop__details .shop-singe-tab .nav .nav-item .nav-link {
  background: none;                 /* No background */
  border: none;                     /* Remove border */
}
.shop__details .shop-singe-tab .nav .nav-item .nav-link h5 {
  font-size: 18px;                  /* Tab label size */
}

/* ----------------------------------------------
   Review Section Text Size
   ---------------------------------------------- */
.shop__details .shop-singe-tab .tab-content .review-wrp .content a h5 span {
  font-size: 15px;
}

/* ----------------------------------------------
   Comment Form Styling
   ---------------------------------------------- */
.shop__details .comment-form input {
  background-color: transparent;
  width: 100%;
  outline: none;
  padding: 15px 20px !important;
}
.shop__details .comment-form textarea {
  background-color: transparent;
  height: 250px;
  width: 100%;
  outline: none;
  padding: 15px 20px !important;
}

/* ----------------------------------------------
   Star Rating Area
   ---------------------------------------------- */
.shop__details .shop-single__rate-now {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.shop__details .shop-single__rate-now p {
  font-weight: 500;
  color: var(--theme);              /* 🎨 Highlight text */
}
.shop__details .shop-single__rate-now .star span i {
  color: var(--theme);              /* 🎨 Star icon color */
  cursor: pointer;
}

/* ----------------------------------------------
   Secondary Button Reset
   ---------------------------------------------- */
.shop__details .cmn--btn2 {
  border: none;                     /* Remove borders for alternate button */
}


















/* ==========================================================================
   SECTION: Cart Page Styling
   Description: Layout and style for the shopping cart interface
   ========================================================================== */

/* ----------------------------------------------
   Main Cart Container
   ---------------------------------------------- */
.cart__section .main__cart__wrap {
  border-radius: 5px; /* Rounded box */
}

/* ----------------------------------------------
   Cart Wrapper (Box Shadow + Padding)
   ---------------------------------------------- */
.cart__section .main__cart__wrap .cart__wrapper {
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.06); /* Subtle box shadow */
  border-radius: 5px;
  padding: 40px 40px;
}

/* ----------------------------------------------
   Cart Table Setup
   ---------------------------------------------- */
.cart__section .main__cart__wrap .cart__wrapper .cart-items-wrapper table {
  width: 100%;
}

/* ----------------------------------------------
   Table Header Row
   ---------------------------------------------- */
.cart__section .main__cart__wrap .cart__wrapper .cart-items-wrapper table thead {
  border-bottom: 1px solid var(--border); /* 🎨 Border color */
}
.cart__section .main__cart__wrap .cart__wrapper .cart-items-wrapper table thead tr th {
  padding-bottom: 16px;
  color: var(--black);             /* 🎨 Header text color */
  font-size: 18px;
  text-transform: capitalize;
}

/* ----------------------------------------------
   Cart Item Rows
   ---------------------------------------------- */
.cart__section .main__cart__wrap .cart__wrapper .cart-items-wrapper table tbody .cart-item td {
  border-bottom: 1px solid var(--border); /* 🎨 Row separator */
  padding: 16px 0;
}

/* ----------------------------------------------
   Cart Item Info Section (Image + Text)
   ---------------------------------------------- */
.cart__section .main__cart__wrap .cart__wrapper .cart-items-wrapper table tbody .cart-item .cart-item-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cart__section .main__cart__wrap .cart__wrapper .cart-items-wrapper table tbody .cart-item .cart-item-info img {
  border-radius: 5px;
}

/* ----------------------------------------------
   Price Display in Cart
   ---------------------------------------------- */
.cart__section .main__cart__wrap .cart__wrapper .cart-items-wrapper table tbody .cart-item .cart-item-price {
  color: var(--theme); /* 🎨 Highlighted price color */
}

/* ----------------------------------------------
   Quantity Adjustment Control
   ---------------------------------------------- */
.cart__section .main__cart__wrap .cart__wrapper .cart-items-wrapper table tbody .cart-item .cart-item-quantity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #F5F4FE;           /* 🎨 Soft lavender box */
  width: 100px;
  border-radius: 5px;
  padding: 2px 20px;
}
.cart__section .main__cart__wrap .cart__wrapper .cart-items-wrapper table tbody .cart-item .cart-item-quantity span {
  display: block;
  color: var(--theme);           /* 🎨 Count number color */
}
.cart__section .main__cart__wrap .cart__wrapper .cart-items-wrapper table tbody .cart-item .cart-item-quantity .cart-item-quantity-controller a {
  display: block;
}
.cart__section .main__cart__wrap .cart__wrapper .cart-items-wrapper table tbody .cart-item .cart-item-quantity .cart-item-quantity-controller a i {
  color: var(--theme);           /* 🎨 Icon color */
}

/* ----------------------------------------------
   Item Remove Button
   ---------------------------------------------- */
.cart__section .main__cart__wrap .cart__wrapper .cart-items-wrapper table tbody .cart-item .cart-item-remove a i {
  color: var(--theme);           /* 🎨 Trash icon color */
}

/* ----------------------------------------------
   Cart Footer Section
   ---------------------------------------------- */
.cart__section .main__cart__wrap .cart__wrapper-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

/* ----------------------------------------------
   Promo Code Form
   ---------------------------------------------- */
.cart__section .main__cart__wrap .cart__wrapper-footer form {
  border: 1px solid var(--border); /* 🎨 Border around promo form */
  padding: 8px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart__section .main__cart__wrap .cart__wrapper-footer form input {
  color: var(--pra);              /* 🎨 Input text color */
  padding: 5px 5px;
  border: none;
  font-weight: 500;
  outline: none;
  background: transparent;
}
.cart__section .main__cart__wrap .cart__wrapper-footer form button {
  outline: none;
  border: none;
}

/* ----------------------------------------------
   Pragraph Box Styling (Right Column)
   ---------------------------------------------- */
.cart__section .main__cart__wrap .cart__pragh__box {
  margin-top: 24px;
  padding-right: 30px;
  padding-bottom: 30px;
}

/* ----------------------------------------------
   Summary Box Styling
   ---------------------------------------------- */
.cart__section .main__cart__wrap .cart__graph {
  border: 1px solid var(--border); /* 🎨 Border box */
  padding: 30px 30px;
  border-radius: 5px;
}
.cart__section .main__cart__wrap .cart__graph h4 {
  text-align: center;
  color: var(--black);             /* 🎨 Title color */
  margin-bottom: 30px;
}
.cart__section .main__cart__wrap .cart__graph ul {
  margin-bottom: 30px;
}
.cart__section .main__cart__wrap .cart__graph ul li {
  display: flex;
}
.cart__section .main__cart__wrap .cart__graph ul li:not(:last-child) {
  border-bottom: 1px solid var(--border); /* 🎨 Row separation */
}
.cart__section .main__cart__wrap .cart__graph ul li span {
  width: 50%;
  color: var(--black);             /* 🎨 Summary label color */
  font-size: 18px;
  font-weight: 500;
  padding: 16px 0;
}

/* ----------------------------------------------
   Responsive Scroll Behavior for Narrow Screens
   ---------------------------------------------- */
@media (max-width: 767px) {
  .cart__wrapper {
    overflow-x: scroll; /* Horizontal scroll for small devices */
  }
  .cart__wrapper .cart-items-wrapper {
    width: 700px;
  }
  .cart__wrapper .cart__wrapper-footer {
    width: 700px;
  }
}



















/* ==========================================================================
   SECTION: Checkout Page Components
   Description: Styling for checkout radio options, forms, and containers
   ========================================================================== */

/* ----------------------------------------------
   Checkout Radio Box
   ---------------------------------------------- */
.checkout__radio {
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.06); /* Subtle card shadow */
  border-radius: 5px; /* Rounded corners */
  padding: 24px;
}
.checkout__radio .primary-text {
  font-size: 24px;
  font-weight: 600; /* Emphasized heading */
  line-height: 150%;
  margin-bottom: 16px;
  color: var(--black); /* 🎨 Main heading color */
}
.checkout__radio h4 {
  color: var(--black); /* 🎨 Subheading color */
  margin-bottom: 16px;
}

/* ----------------------------------------------
   Radio Inputs Wrapper
   ---------------------------------------------- */
.checkout__radio .checkout__radio-wrapper .checkout__radio-single .form-check-input {
  border-radius: 50%; /* Circular input */
  width: 18px;
  height: 18px;
  box-shadow: none;
  outline: none;
  border: 1px solid var(--border); /* 🎨 Input border color */
}
.checkout__radio .checkout__radio-wrapper .checkout__radio-single label {
  color: var(--black); /* 🎨 Label text */
}
.checkout__radio .checkout__radio-wrapper .checkout__radio-single:not(:last-child) {
  margin-bottom: 12px;
}

/* Responsive Padding for Small Devices */
@media (max-width: 500px) {
  .checkout__radio {
    padding: 10px;
  }
}

/* ----------------------------------------------
   Checkout Form Sections
   ---------------------------------------------- */
.checkout__single-wrapper .checkout__single h4 {
  color: var(--black); /* 🎨 Section title color */
  margin-bottom: 2rem;
}
.checkout__single-wrapper .checkout__single .checkout__single-form .input-single textarea,
.checkout__single-wrapper .checkout__single .checkout__single-form .input-single .country-select,
.checkout__single-wrapper .checkout__single .checkout__single-form .input-single input {
  width: 100%;
  outline: none;
  box-shadow: none;
  border: 1px solid var(--border); /* 🎨 Input border */
  border-radius: 5px;
  padding: 12px 24px;
  color: var(--black); /* 🎨 Input text color */
}
.checkout__single-wrapper .checkout__single .checkout__single-form .input-single label {
  color: var(--black); /* 🎨 Label text color */
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}
.checkout__single-wrapper .checkout__single .checkout__single-form .input-single ::placeholder {
  color: var(--black); /* 🎨 Placeholder text color */
}
.checkout__single-wrapper .checkout__single .checkout__single-form .payment {
  color: var(--black); /* 🎨 Payment label text */
  margin-bottom: 12px;
}

/* ----------------------------------------------
   Box Shadow Container
   ---------------------------------------------- */
.checkout__single-wrapper .boxshado__single {
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.06); /* 🎨 Card shadow */
  border-radius: 5px;
  padding: 32px;
  margin-bottom: 24px;
}
@media (max-width: 575px) {
  .checkout__single-wrapper .boxshado__single {
    padding: 14px;
  }
}

/* ----------------------------------------------
   Checkout Section with Background and Save Option
   ---------------------------------------------- */
.checkout__single-wrapper .checkout__single__bg {
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.06); /* 🎨 Box shadow */
  border-radius: 5px;
  padding: 32px;
}
.checkout__single-wrapper .checkout__single__bg .checkout__single-form .input-single textarea,
.checkout__single-wrapper .checkout__single__bg .checkout__single-form .input-single .country-select,
.checkout__single-wrapper .checkout__single__bg .checkout__single-form .input-single input {
  border: 1px solid var(--border); /* 🎨 Field border */
  background: transparent;
}
@media (max-width: 575px) {
  .checkout__single-wrapper .checkout__single__bg {
    padding: 14px;
  }
}

/* ----------------------------------------------
   Save Payment Info Option
   ---------------------------------------------- */
.checkout__single-wrapper .checkout__single__bg .payment__save {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.checkout__single-wrapper .checkout__single__bg .payment__save input {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--border); /* 🎨 Checkbox border */
  background-color: var(--theme); /* 🎨 Theme background */
  outline: none;
  color: var(--theme); /* 🎨 Checkbox color */
}
.checkout__single-wrapper .checkout__single__bg .payment__save label {
  font-size: 16px;
  font-weight: 500;
  color: var(--pra); /* 🎨 Description text */
}
























/* ==========================================================================
   SECTION: Order Successful Page Section
   Description: Handles the padding for the confirmation section layout
   ========================================================================== */

.successful__section {
  padding: 240px 0 120px; /* Top: 240px | Bottom: 120px */
}

/* -------------------------
   Responsive Padding
   ------------------------- */
@media (max-width: 991px) {
  .successful__section {
    padding: 200px 0px; /* Top & Bottom: 200px */
  }
}

@media (max-width: 500px) {
  .successful__section {
    padding: 180px 0px; /* Top & Bottom: 180px */
  }
}















/* ==========================================================================
   SECTION: Payment Success Wrapper
   Description: Main styling for payment success message container and layout
   ========================================================================== */

.payment__success__inner {
  border: 1px solid var(--border); /* Border color variable */
  background: var(--white); /* White background */
  border-radius: 5px; /* Rounded corners */
  padding: 32px; /* Inner spacing */
}

/* -------------------------
   Header Content Styling
   ------------------------- */
.payment__success__inner .payment__success__header {
  text-align: center; /* Centered content */
  margin-bottom: 24px;
}
.payment__success__inner .payment__success__header .icon {
  width: 60px;
  height: 60px;
  border-radius: 50%; /* Circle */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--theme); /* Themed color */
  margin: 0 auto 20px;
}
.payment__success__inner .payment__success__header .icon i {
  color: var(--white); /* Icon color */
  font-size: 24px;
}
.payment__success__inner .payment__success__header h2 {
  color: var(--black);
  margin-bottom: 20px;
}
.payment__success__inner .payment__success__header p {
  font-size: 18px;
  max-width: 100%;
}

/* -------------------------
   Responsive Header
   ------------------------- */
@media (max-width: 575px) {
  .payment__success__inner .payment__success__header h2 {
    font-size: 26px;
  }
  .payment__success__inner .payment__success__header p {
    font-size: 16px;
  }
}

/* -------------------------
   Body Information List
   ------------------------- */
.payment__success__inner .payment__success__body {
  padding: 14px 24px;
  background: #F6F5FE; /* Light lavender background */
  margin-bottom: 24px;
}
.payment__success__inner .payment__success__body ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.payment__success__inner .payment__success__body ul li:not(:last-child) {
  border-bottom: 1px solid var(--border);
}
.payment__success__inner .payment__success__body ul li span {
  color: var(--black);
  font-size: 18px;
  font-weight: 600;
  padding: 12px 0;
}
.payment__success__inner .payment__success__body ul li .textbo {
  font-weight: 600;
}

/* -------------------------
   Responsive Body
   ------------------------- */
@media (max-width: 575px) {
  .payment__success__inner .payment__success__body {
    padding: 14px 14px;
  }
  .payment__success__inner .payment__success__body li span {
    font-size: 14px !important;
  }
}

/* -------------------------
   Footer Button and Actions
   ------------------------- */
.payment__success__inner .payment__success__footer .payment-success__footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 24px;
}
.payment__success__inner .payment__success__footer .payment-success__footer-inner a {
  display: flex;
  align-items: center;
  gap: 8px;
}
.payment__success__inner .payment__success__footer .payment-success__footer-inner a .icon {
  margin-top: 5px;
}
.payment__success__inner .payment__success__footer .payment-success__footer-inner a .icon i {
  font-size: 20px;
  color: var(--theme);
}
.payment__success__inner .payment__success__footer .payment-success__footer-inner a span {
  color: var(--black);
  font-size: 18px;
  font-weight: 500;
}

/* -------------------------
   Responsive Footer
   ------------------------- */
@media (max-width: 575px) {
  .payment__success__inner .payment__success__footer .payment-success__footer-inner {
    flex-wrap: wrap;
  }
}

/* -------------------------
   Download Button Section
   ------------------------- */
.payment__success__inner .payment__success__footer .dbutton {
  text-align: center;
  margin-top: 32px;
}

/* -------------------------
   Responsive Wrapper Padding
   ------------------------- */
@media (max-width: 575px) {
  .payment__success__inner {
    padding: 15px;
  }
}















/* ==========================================================================
   SECTION: Contact Info Section
   Description: Displays contact icons and form layout with themed buttons
   ========================================================================== */

.contact__info {
  overflow: hidden; /* Prevent content overflow */
  background-color: #fbf8f8; /* Light gray background (#fbf8f8) */
}

.contact__info .info__items {
  background-color: var(--white); /* White card background */
  padding: 50px 30px; /* Top-bottom and side spacing */
}

.contact__info .info__items .info__icon {
  width: 75px;
  height: 75px;
  line-height: 80px;
  border-radius: 100%; /* Perfect circle */
  box-shadow: 0px 4px 24px 0px rgba(106, 105, 194, 0.15); /* Soft purple shadow */
  text-align: center; /* Center icon horizontally */
  margin: 0 auto; /* Center icon container */
}

.contact__info .info__items .info__icon i {
  font-size: 28px;
  color: var(--theme); /* Primary theme color */
}

.contact__info .info__items h4 {
  text-transform: capitalize; /* Capitalize words */
  margin-bottom: 0;
  margin-top: 20px;
  font-weight: 600; /* Semi-bold */
}

/* ==========================================================================
   SECTION: Contact Form Inputs and Textarea
   ========================================================================== */

.contact__us__section .contact__right .form__clt input {
  width: 100%; /* Full width input */
  outline: none; /* Remove focus outline */
  border-radius: 5px; /* Rounded corners */
  border: none; /* Reset default border */
  padding: 14px 15px; /* Inner spacing */
  color: var(--black); /* Input text color */
  border: 1px solid var(--border); /* Custom border */
  font-size: 16px;
}

/* Responsive font size for smaller screens */
@media (max-width: 1199px) {
  .contact__us__section .contact__right .form__clt input {
    font-size: 14px;
  }
}

.contact__us__section .contact__right .form__clt__big textarea {
  padding: 14px 15px 130px; /* Top, side, and bottom spacing for larger height */
  width: 100%; /* Full width */
  outline: none; /* Remove focus outline */
  border-radius: 5px;
  border: none;
  color: var(--black);
  border: 1px solid var(--border); /* Consistent border with inputs */
}

/* Responsive font size for textarea */
@media (max-width: 1199px) {
  .contact__us__section .contact__right .form__clt__big textarea {
    font-size: 14px;
  }
}

/* ==========================================================================
   SECTION: Contact Form Submit Button
   ========================================================================== */

.contact__us__section .contact__right .cmn--btn {
  background: transparent; /* Transparent background by default */
  width: 100%; /* Full-width button */
}

.contact__us__section .contact__right .cmn--btn span {
  color: var(--theme); /* Button text color */
}

.contact__us__section .contact__right .cmn--btn:hover span {
  color: var(--white); /* Button text color on hover */
}















/* ==========================================================================
   SECTION: Contact Info Section End / Map Embed
   ========================================================================== */

.map__section .googpemap iframe {
  width: 100%;       /* Full width map for responsive layout */
  height: 650px;     /* Fixed height for visible area */
}

/* ==========================================================================
   SECTION: Video Animation Keyframes
   Description: Pulse scale + fade-out animation used for video play indicator
   ========================================================================== */

/* Webkit-prefixed keyframe animation for Safari and older Chrome versions */
@-webkit-keyframes video-animation {
  0% {
    transform: scale(1);     /* Start at normal size */
  }
  50% {
    transform: scale(1.5);   /* Midpoint pulse enlargement */
  }
  100% {
    opacity: 0;              /* Fade out at end */
    transform: scale(2);     /* End with larger scale */
  }
}

/* Standard keyframe animation for all modern browsers */
@keyframes video-animation {
  0% {
    transform: scale(1);     /* Start at normal size */
  }
  50% {
    transform: scale(1.5);   /* Pulse grows */
  }
  100% {
    opacity: 0;              /* Disappear smoothly */
    transform: scale(2);     /* Exit with dramatic scale-up */
  }
}













/* ==========================================================================
   SECTION: Blog Section Styles
   Description: Styles and hover animation for blog cards
   ========================================================================== */

/* Container for the blog section */
.blog__section {
  overflow: hidden; /* Prevents overflow artifacts */
}

/* Individual blog item wrapper with box-shadow */
.blog__section .blog__items {
  background-color: rgb(255, 255, 255); /* Pure white background */
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); /* Light shadow for elevation */
}

/* Blog thumbnail container */
.blog__section .blog__items .blog__thumb {
  overflow: hidden; /* Ensures image and overlay are clipped */
  position: relative;
  z-index: 1;
}

/* Diagonal shimmer animation on hover */
.blog__section .blog__items .blog__thumb::before {
  position: absolute;
  top: 0;
  left: -75%; /* Starts far off-screen to the left */
  display: block;
  content: "";
  width: 15%; /* Thin diagonal bar */
  height: 100%;
  transform: skewX(-35deg); /* Creates diagonal effect */
  background-color: var(--theme); /* Theme accent color */
  opacity: 0.3;
  z-index: 1;
}

/* Image inside thumbnail */
.blog__section .blog__items .blog__thumb img {
  width: 100%; /* Full width image */
  height: 100%;
  transition: all 0.4s ease-in-out; /* Smooth image transition on hover */
}

/* Blog content area */
.blog__section .blog__items .blog__content {
  padding: 30px 20px; /* Padding for inner content */
}

/* Blog title spacing */
.blog__section .blog__items .blog__content h4 {
  margin-top: 0;
  margin-bottom: 13px;
}

/* Blog title link styling */
.blog__section .blog__items .blog__content h4 a {
  color: var(--black); /* Main text color */
  transition: all 0.4s ease-in-out;
}

/* Metadata list (date, author, etc.) */
.blog__section .blog__items .blog__content ul {
  display: flex; /* Flex for horizontal layout */
  align-items: center;
  margin: 10px 0;
}

/* Metadata items */
.blog__section .blog__items .blog__content ul li {
  margin-right: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--pra); /* Paragraph/text-muted color */
}

/* Icon inside metadata */
.blog__section .blog__items .blog__content ul li i {
  margin-right: 5px;
  color: var(--theme); /* Theme accent color */
  font-size: 16px;
}

/* Hover state: change title color */
.blog__section .blog__items:hover .blog__content h4 a {
  color: var(--theme);
}

/* Hover state: move shimmer effect across thumbnail */
.blog__section .blog__items:hover .blog__thumb::before {
  left: 140%; /* Sweeps across thumbnail */
  transition: all 2300ms cubic-bezier(0.19, 1, 0.22, 1); /* Smooth, spring-like motion */
}

/* Hover state: scale and rotate thumbnail image */
.blog__section .blog__items:hover .blog__thumb img {
  -webkit-transform: scale(1.1) rotate(-4deg); /* Safari compatibility */
  transform: scale(1.1) rotate(-4deg); /* Zoom and tilt effect */
}











/* ==========================================================================
   SECTION: Footer Section Styles
   Description: Complete styling for footer layout, content, and newsletter form
   ========================================================================== */

/* Root footer container with background image and overlay */
.footer__section {
  background: url(../img/footer/footer-bg.jpg) no-repeat center center; /* Centered background image */
  background-size: cover; /* Full cover scaling */
  position: relative;
  overflow: hidden;
}

/* Dark overlay over the footer background */
.footer__section::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0.7); /* Black overlay with 70% opacity */
}

/* Top portion of the footer containing widgets */
.footer__section .footer__top {
  position: relative;
  padding: 80px 0; /* Vertical spacing */
}

/* Each footer widget container */
.footer__section .footer__top .footer__widget .widget__head {
  position: relative;
}

/* Widget heading */
.footer__section .footer__top .footer__widget .widget__head h5 {
  text-transform: capitalize;
  color: var(--white); /* White text */
  margin-bottom: 10px;
}

/* Widget underline/decoration */
.footer__section .footer__top .footer__widget .widget__head .witr_bar_main .witr_bar_inner {
  margin: initial !important;
}

/* Widget paragraph text */
.footer__section .footer__top .footer__widget p {
  color: var(--white);
}

/* Contact list spacing */
.footer__section .footer__top .footer__widget .contact__list li:not(:last-child) {
  margin-bottom: 15px;
}

/* Contact links */
.footer__section .footer__top .footer__widget .contact__list li a {
  color: var(--white);
}

/* Contact icon styling */
.footer__section .footer__top .footer__widget .contact__list li a i {
  font-size: 16px;
  margin-right: 10px;
  color: var(--theme); /* Theme accent color */
}

/* Footer link list items */
.footer__section .footer__top .footer__widget .list li {
  margin-bottom: 10px;
  text-transform: capitalize;
}

/* Footer links */
.footer__section .footer__top .footer__widget .list li a {
  color: var(--white);
  transition: all 0.3s ease-in-out;
}

/* Icon next to links */
.footer__section .footer__top .footer__widget .list li a i {
  margin-right: 5px;
  font-size: 16px;
  color: var(--theme);
}

/* Link hover effect */
.footer__section .footer__top .footer__widget .list li a:hover {
  color: var(--theme);
}

/* Recent item spacing */
.footer__section .footer__top .footer__widget .recent__items {
  gap: 15px;
}

/* Bottom margin between recent items */
.footer__section .footer__top .footer__widget .recent__items:not(:last-child) {
  margin-bottom: 30px;
}

/* Recent item image */
.footer__section .footer__top .footer__widget .recent__items .thumb img {
  width: 100px;
  height: 100px;
  border-radius: 100%; /* Circular image */
}

/* Recent item metadata */
.footer__section .footer__top .footer__widget .recent__items .content p {
  font-size: 14px;
  margin-bottom: 5px;
  color: var(--theme);
}

/* Recent item title */
.footer__section .footer__top .footer__widget .recent__items .content h6 {
  font-size: 15px;
  line-height: 20px;
}

/* Responsive font adjustment */
@media (max-width: 1199px) {
  .footer__section .footer__top .footer__widget .recent__items .content h6 {
    font-size: 13px;
  }
}

/* Recent item title link */
.footer__section .footer__top .footer__widget .recent__items .content h6 a {
  color: var(--white);
  transition: all 0.3s ease-in-out;
}

/* Hover color change on title */
.footer__section .footer__top .footer__widget .recent__items .content h6 a:hover {
  color: var(--theme);
}

/* Generic widget item image */
.footer__section .footer__top .footer__widget .item img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/* Play icon overlay */
.footer__section .footer__top .footer__widget .item .iocn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: #f94c30; /* Alert red */
  width: 25px;
  height: 25px;
  line-height: 27px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  transition: 0.3s;
  opacity: 0;
}

/* Newsletter input box */
.footer__section .footer__top .footer__widget .footer__newsletter input {
  background: transparent;
  border: 1px solid var(--white);
  padding: 14px 20px;
  font-size: 15px;
  color: var(--white);
  width: 100%;
  border-radius: 10px;
  position: relative;
}

/* Newsletter submit button */
.footer__section .footer__top .footer__widget .footer__newsletter button {
  position: absolute;
  right: 1px;
  border: none;
  height: 52px;
  width: 70px;
  font-size: 16px;
  background: var(--theme);
  color: var(--white);
  cursor: pointer;
  border-radius: 0 10px 10px 0;
}

/* Icon inside button */
.footer__section .footer__top .footer__widget .footer__newsletter button i {
  font-size: 18px;
}

/* Bottom portion of footer */
.footer__section .footer__bottom {
  border-top: 1px solid var(--white);
  position: relative;
  padding: 50px 0;
}

/* Responsive alignment for bottom text */
@media (max-width: 767px) {
  .footer__section .footer__bottom .bottom__wrap {
    justify-content: center !important;
  }
  .footer__section .footer__bottom .bottom__wrap p {
    text-align: center;
  }
}

/* Copyright text */
.footer__section .footer__bottom p {
  color: var(--white);
}

/* Footer links */
.footer__section .footer__bottom p a {
  color: var(--theme);
}


















/* ==========================================================================
   SECTION: Social Media Icon Styles
   Description: Flexbox-aligned list of social media icons with hover effects
   ========================================================================== */

/* Wrapper for social icon list - horizontal flex layout */
.social__icon {
  display: flex;                          /* Flexbox layout */
  align-items: center;                   /* Vertically align icons */
  gap: 8px;                              /* Spacing between icons */
}

/* Individual social icon block */
.social__icon li {
  width: 32px;                           /* Fixed width */
  height: 32px;                          /* Fixed height */
  line-height: 32px;                     /* Vertically center icon */
  text-align: center;                    /* Horizontally center icon */
  display: block;                        /* Block-level element */
  border-radius: 5px;                    /* Rounded corners */
  border: 1px solid var(--white);        /* White border for contrast */
  cursor: pointer;                       /* Show pointer on hover */
  transition: all 0.3s ease-in-out;      /* Smooth transition on hover */
}

/* Icon inside the anchor tag */
.social__icon li a i {
  color: var(--white);                   /* White icon color */
  font-size: 16px;                       /* Standard icon size */
}

/* Hover effect for social icon block */
.social__icon li:hover {
  background-color: var(--theme);        /* Theme background on hover */
  border: 1px solid var(--theme);        /* Match border with theme */
}















/* ==========================================================================
   SECTION: Common Button Styles
   Description: Global reusable button classes with hover effects and transitions
   ========================================================================== */

/* Primary button base (outlined theme style) */
.cmn--btn {
  padding: 15px 30px;                                /* Button padding */
  font-weight: 600;                                  /* Bold text */
  color: var(--theme);                               /* Text color from theme */
  border: 2px solid var(--theme);                    /* Border color */
  border-radius: 6px;                                /* Rounded corners */
  position: relative;                                /* Required for ::before */
  text-transform: capitalize;                        /* Capitalized button label */
  transition: all 0.4s ease-in-out;                  /* Smooth transition */
  font-family: "Inter", sans-serif;                  /* Font family */
}

/* Text span inside button */
.cmn--btn span {
  position: relative;                                /* Ensure text is on top */
  z-index: 1;                                        /* Bring above background animation */
  transition: all 0.5s;                              /* Smooth text color transition */
  color: var(--white);                               /* Button text color */
}

/* Animated background fill effect on hover */
.cmn--btn::before {
  position: absolute;
  content: "";
  width: 0%;                                         /* Starts at 0 width */
  height: 100%;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background-color: var(--theme);                    /* Background fill color */
  transition: all 0.4s ease-in-out;                  /* Smooth fill animation */
  z-index: 0;                                        /* Behind the span text */
}

/* Expand fill animation on hover */
.cmn--btn:hover::before {
  width: 100%;                                       /* Expand to full width */
  left: 0px;                                         /* Animate from left */
}

/* ==========================================================================
   SECTION: Solid Theme Button (filled variant)
   ========================================================================== */
.cmn--btn2 {
  padding: 15px 30px 15px;                           /* Uniform padding */
  font-size: 16px;                                   /* Font size */
  font-weight: 600;                                  /* Bold */
  background: var(--theme);                          /* Solid background */
  display: inline-block;                             /* Inline-block for size control */
  position: relative;                                /* Needed for ::before animation */
  z-index: 1;                                        /* Layering */
  transition: all 0.6s ease-in-out 0s;               /* Transition delay for smoother effect */
  overflow: hidden;                                  /* Hide overflow from animation */
  text-transform: capitalize;                        /* Capitalized text */
  color: var(--white);                               /* Text color */
  border-radius: 5px;                                /* Rounded edges */
}

/* Hover state retains base styling */
.cmn--btn2:hover {
  color: var(--white);                               /* Ensure text stays white */
  background: var(--theme);                          /* Maintain theme color */
}

/* Shine effect using diagonal white flash */
.cmn--btn2::before {
  background-color: var(--white);                    /* Shine color */
  content: "";
  height: 150px;
  left: -75px;
  position: absolute;
  top: -60px;
  transform: rotate(35deg);                          /* Diagonal shine */
  transition: all 2600ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 20px;
  opacity: 0;
  z-index: 2;
}

/* Move shine across button on hover */
.cmn--btn2:hover::before {
  left: 140%;                                        /* Animate across */
  opacity: 0.5;                                      /* Make it visible */
  transition: all 2300ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* Responsive tweaks for smaller screens */
@media (max-width: 575px) {
  .cmn--btn2 {
    font-size: 13px;                                 /* Smaller text */
    padding: 10px 20px 10px;                         /* Reduced padding */
  }
  .cmn--btn2 i {
    font-size: 13px;                                 /* Smaller icon */
  }
}

/* ==========================================================================
   SECTION: Text-Only Button (link style)
   ========================================================================== */
.cmn--btn3 {
  font-size: 16px;                                   /* Text size */
  font-weight: 600;                                  /* Bold */
  text-transform: capitalize;                        /* Capitalized words */
  color: var(--black);                               /* Black text color */
  transition: all 0.4s ease-in-out;                  /* Smooth hover transition */
}

/* Optional icon inside text button */
.cmn--btn3 i {
  font-size: 16px;                                   /* Icon size */
  color: var(--black);                               /* Same base color */
  transition: all 0.4s ease-in-out;                  /* Icon transitions too */
  margin-left: 4px;                                  /* Spacing between text and icon */
}

/* Hover states change to theme color */
.cmn--btn3:hover {
  color: var(--theme);                               /* Highlight on hover */
}
.cmn--btn3:hover i {
  color: var(--theme);                               /* Icon highlight on hover */
}
















