@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&family=Rajdhani:wght@300;400;500;600;700&display=swap");
/*
📚 01. Base
    🧩 1.1. Variables
    ♻️ 1.2. Reset
    ✍️ 1.3. Typography
    🎨 1.4. Colors

🧭 02. Layout
    ⏳ 2.1. Preloader
    🧱 2.2. Header
    📱 2.3. Mobile Menu
    🧭 2.4. Sidebar

🧩 03. Components
    🖼️ 3.1. Image
    🕶️ 3.2. Overlay
    🔘 3.3. Button
    📝 3.4. Form
    📂 3.5. Accordion
    🔢 3.6. Pagination
    🏛️ 3.7. Gallery
    🧭 3.8. Breadcrumbs
    📊 3.9. Progress Bar
    📸 3.10. Swiper
    🧾 3.11. Section
    💬 3.12. Comment
    ✨ 3.13. Feature Item

🧰 04. Utilities
    📐 4.1. Flex Align
    📍 4.2. Position
    📏 4.3. Sizing
    ↔️ 4.4. Margin
    ↕️ 4.5. Padding
    📦 4.6. Border
    🧮 4.7. Gap
    🔠 4.8. Font Size
    🏋️ 4.9. Font Weight
    📐 4.10. Line Height
    🔡 4.11. Letter Spacing
    ⚖️ 4.12. Ratio
    🌫️ 4.13. Shadow
    🔷 4.14. Shape
    🌗 4.15. Opacity
    🖱️ 4.16. Hover Effects
    🎞️ 4.17. Animation
*/

/*==============================================================================
  📚 01. Base
==============================================================================*/
/*==============================================================================
  🧩 1.1 Variables
==============================================================================*/
:root {
  /* --------------------------------------------------------------------------
   Fonts
  -------------------------------------------------------------------------- */
  --body-font-family: Hind, sans-serif;
  --heading-font-family: Rajdhani, sans-serif;
  --focused-font-family: Hind, sans-serif;
  --body-font-size: 16px;
  --heading-font-weight: 700;
  --section-title-font-weight: 700;
  /* --------------------------------------------------------------------------
   Colors
  -------------------------------------------------------------------------- */
  --brand-color: #FF7300;
  --brand-color-dark: #e66700;
  --brand-color-rgb:
    255,
    115,
    0;
  --brand-color-dark-rgb:
    230,
    103,
    0;
  --brand-color-1: #5ec251;
  --brand-color-1-dark: #4fb941;
  --brand-color-1-rgb:
    94,
    194,
    81;
  --brand-color-1-dark-rgb:
    79,
    185,
    65;
  --white-color: #fff;
  --white-color-rgb:
    255,
    255,
    255;
  --dark-color: #182333;
  --dark-color-rgb:
    24,
    35,
    51;
  --light-color: #F6F8FA;
  --light-color-rgb:
    246,
    248,
    250;
  --text-color: #768492;
  --border-color: #eee;
  --border-dark-color: rgba(255, 255, 255, 0.1);
  --border-radius: 0.45em;
  /* --------------------------------------------------------------------------
   Bootstrap Overrides
  -------------------------------------------------------------------------- */
  --bs-primary-rgb: var(--brand-color-rgb);
  --bs-dark-rgb: var(--dark-color-rgb);
  --bs-light-rgb: var(--light-color-rgb);
  --bs-border-color: var(--border-color);
  --bs-border-radius: var(--border-radius);
  --bs-btn-border-color: var(--border-color);
}

/* --------------------------------------------------------------------------
  Responsive Font Sizes
--------------------------------------------------------------------------*/
:root {
  --display-one: clamp(3rem, 1.8rem + 4vw, 4.5rem);
  --display-two: clamp(2.45rem, 1.5rem + 3vw, 4.35rem);
  --display-three: clamp(2.25rem, 1.4rem + 2.5vw, 3.5rem);
  --heading-one: clamp(2.5rem, 1.4rem + 2vw, 3.125rem);
  --heading-two: clamp(2.15rem, 1.2rem + 1.5vw, 2.85rem);
  --heading-three: clamp(1.65rem, 1rem + 1vw, 2.05rem);
  --heading-four: clamp(1.4rem, 1rem + 1vw, 1.5rem);
  --heading-five: clamp(1.25rem, 0.85rem + 0.6vw, 1.3rem);
  --heading-six: clamp(1rem, 0.875rem + 0.5vw, 1.0625rem);
}

/*!======================  ♻️ 1.2. Reset ======================*/
body, html {
  overflow-x: hidden;
}

body {
  word-break: break-word;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--body-font-family);
  color: var(--text-color);
  line-height: 1.54;
}

:root {
  scroll-behavior: inherit;
  font-size: var(--body-font-size);
}

@media (max-width: 990.98px) {
  :root {
    font-size: 90%;
  }
}
/* ---------------------------------
   Media Elements
---------------------------------- */
img {
  max-width: 100%;
}

/*!======================  ✍️ 1.3. Typography ======================*/
/* ---------------------------------
   Links
---------------------------------- */
a {
  color: inherit;
  transition: 0.5s;
  text-decoration: none;
  outline: 0 !important;
  cursor: pointer;
}
a:hover, a:focus {
  text-decoration: none;
}

/* ---------------------------------
   Common Components
---------------------------------- */
.btn,
.nav-menu-link {
  font-family: var(--heading-font-family);
}

/* ---------------------------------
   Common Components
---------------------------------- */
.btn,
.nav-link {
  font-family: var(--heading-font-family);
}

/* ---------------------------------
   Lists
---------------------------------- */
ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* ---------------------------------
   Headings (Dark / Primary Backgrounds)
---------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6, b, strong {
  color: var(--dark-color);
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
}

.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-dark .h1, .bg-dark .h2, .bg-dark .h3, .bg-dark .h4, .bg-dark .h5, .bg-dark .h6, .bg-dark b, .bg-dark strong {
  color: var(--white-color);
}

.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4, .bg-white h5, .bg-white h6,
.bg-white .h1, .bg-white .h2, .bg-white .h3, .bg-white .h4, .bg-white .h5, .bg-white .h6 {
  color: var(--dark-color);
}

/* ---------------------------------
   Heading Utilities
---------------------------------- */
.heading-font-family {
  font-family: var(--heading-font-family);
}

.display2 {
  font-size: var(--display-two);
}

h1, .h1 {
  font-size: var(--heading-one);
}

h2, .h2 {
  font-size: var(--heading-two);
}

h3, .h3 {
  font-size: var(--heading-three);
}

h4, .h4 {
  font-size: var(--heading-four);
}

h5, .h5 {
  font-size: var(--heading-five);
  line-height: 1.333;
}

h6, .h6 {
  font-size: var(--heading-six);
  line-height: 1.333;
}

dt {
  color: var(--dark-color);
}

/* ---------------------------------
   Blockquotes
---------------------------------- */
blockquote {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  padding: 30px 70px 30px 80px;
  background-color: rgba(var(--brand-color-1-rgb), 0.1);
  color: rgba(var(--dark-color-rgb), 1);
  position: relative;
}
blockquote p:before {
  font-family: "Phosphor" !important;
  content: "\e660";
  position: absolute;
  top: 22px;
  left: 22px;
  font-size: 42px;
  line-height: 54px;
  letter-spacing: -0.02em;
  color: var(--brand-color-1);
  transform: rotate(180deg);
}
blockquote cite {
  font-size: smaller;
  font-style: normal;
  text-transform: uppercase;
  font-family: var(--heading-font-family);
}
blockquote cite:before {
  content: "\e32a";
  font-family: Phosphor-Bold !important;
  font-size: 16px;
  margin-right: 5px;
}

/* ---------------------------------
   List with Check Icons
---------------------------------- */
.list-check li {
  display: flex;
  gap: 9px;
}
.list-check li:before {
  font-family: "Phosphor-Fill" !important;
  content: "\e184";
  font-size: 28px;
  margin-top: -4px;
  color: var(--brand-color-1);
}

.list-with-devider li:not(:first-child) {
  padding-top: 18px;
}
.list-with-devider li:not(:last-child) {
  padding-bottom: 18px;
}
.list-with-devider li + li {
  border-top: 1px solid var(--border-color);
}

/* ---------------------------------
   Horizontal Lines Rule
---------------------------------- */
hr {
  border-top: 1px solid var(--border-color);
  opacity: 1;
}

.content hr, .content .border, .content .border-bottom {
  border-color: var(--bs-gray-200) !important;
}

/* ---------------------------------
   Text Ellipsis (2 Lines)
---------------------------------- */
.ellipsis-2-lines,
.ellipsis-4-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.ellipsis-2-lines {
  -webkit-line-clamp: 2;
}

.ellipsis-4-lines {
  -webkit-line-clamp: 4;
}

/* ---------------------------------
   Text Outline
---------------------------------- */

/*!======================  🎨 1.4. Colors ======================*/
/* ---------------------------------
   Background Colors
---------------------------------- */

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

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

.bg-darker {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

.bg-dark-rgb-30 {
  background-color: rgba(var(--dark-color-rgb), 0.3) !important;
}

.bg-white-rgb-30 {
  background-color: rgba(var(--white-color-rgb), 0.3) !important;
}

.bg-white-rgb-10 {
  background-color: rgba(var(--white-color-rgb), 0.1) !important;
}

/* ---------------------------------
   Text Colors
---------------------------------- */
.text-brand {
  color: var(--brand-color) !important;
}

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

.text-light {
  color: rgba(var(--white-color-rgb), 0.7) !important;
}

/* ---------------------------------
   Hover Colors
---------------------------------- */

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

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

.hover-bg-brand-1:hover {
  background-color: var(--brand-color-1) !important;
}

.hover-text-brand-1:hover {
  color: var(--brand-color-1) !important;
}

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

/*!==============================================================================
  🧭 02. Layout
  ==============================================================================*/
html {
  font-size: 16px;
}

html, body {
  min-height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  flex: 1;
}

/*====================== ⏳ 2.1. Preloader ======================*/
.preloader {
  z-index: 999;
}

/*====================== 🧱 2.2. Header ======================*/
.header-main {
  transition: 0.2s linear;
  z-index: 100;
  position: relative;
}
.header-main.fixed-header {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--white-color);
  animation: slideDown 0.35s ease-out;
  box-shadow: 0 5px 16px rgba(var(--dark-color-rgb), 0.1);
}

/* ---------------------------------
   Navigation Menu
---------------------------------- */
.nav-menu {
  column-gap: 18px;
}
.nav-menu-link {
  display: block;
  color: var(--dark-color);
  font-size: 1.0625rem;
  font-weight: var(--heading-font-weight);
  padding: 18px 14px;
  text-transform: uppercase;
}
.nav-menu-link:hover {
  color: var(--brand-color);
}
.nav-menu-item.active > .nav-menu-link {
  color: var(--brand-color);
}

/* ---------------------------------
   Submenu Parent
---------------------------------- */
.has-submenu {
  position: relative;
}
.has-submenu:hover .nav-submenu, .has-submenu:focus-within .nav-submenu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) !important;
}
.has-submenu > a {
  position: relative;
}
.has-submenu > a::before {
  position: absolute;
  content: "\e136";
  font-family: "Phosphor-Bold" !important;
  font-size: 10px;
  font-weight: 900;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.2s linear;
}
.has-submenu > a:hover:before {
  transform: translateY(-50%) rotate(180deg);
}

/* ---------------------------------
   Submenu
---------------------------------- */
.nav-submenu {
  position: absolute;
  top: 105%;
  min-width: 190px;
  width: max-content;
  background-color: var(--white-color);
  padding: 7px 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(30%);
  transition: 0.25s linear;
  z-index: 99;
  border-radius: var(--border-radius);
  box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.1);
  animation: slideDown 0.5s;
}
@media (min-width: 768px) {
  .nav-submenu {
    max-height: 400px;
    overflow-y: auto;
  }
}
.nav-submenu-item {
  display: block;
  transition: 0.2s linear;
  position: relative;
}
.nav-submenu-item.active .nav-submenu-link {
  color: var(--brand-color);
}
.nav-submenu-link {
  display: block;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-color);
  border-radius: inherit;
  color: var(--dark-color);
  font-weight: var(--heading-font-weight);
  font-family: var(--heading-font-family);
  position: relative;
  text-transform: uppercase;
}
.nav-submenu-link::before {
  position: absolute;
}
.nav-submenu-link:hover {
  color: var(--brand-color);
  background-color: var(--light-color);
}
.nav-submenu-item:last-child .nav-submenu-link {
  border-bottom: 0;
}

/*====================== 📱 2.3. Mobile Menu ======================*/

/* ---------------------------------
   Close Button
---------------------------------- */

/* ---------------------------------
   Submenu Open State
---------------------------------- */
.has-submenu.submenu-open .nav-menu-link::before {
  transform: translateY(-50%) rotate(180deg);
}

/* ---------------------------------
   Mobile Nav Menu
---------------------------------- */
.nav-menu-mobile {
  display: block;
}
.nav-menu-mobile .nav-menu-link {
  border-bottom: 1px solid var(--border-color);
  position: relative;
  padding: 12px 16px 12px 0;
}
.nav-menu-mobile .nav-submenu {
  position: static;
  visibility: visible;
  opacity: 1;
  box-shadow: none;
  width: 100%;
  top: 0;
  padding: 0;
  margin-left: 16px;
  display: none;
  transition: none;
  transform: translateY(0);
}
.nav-menu-mobile .nav-submenu-link {
  width: 100%;
  padding: 10px 0;
  border-radius: 0;
  border-bottom: 1px solid var(--border-color);
}
.nav-menu-mobile .nav-submenu-item:hover {
  background-color: transparent;
  color: var(--brand-color);
}
.nav-menu-mobile .nav-submenu-item::before {
  display: none;
}

/*====================== 🧭 2.4. Sidebar ======================*/
.service-category-item:not(:first-child) .service-category-link {
  padding-top: 10px;
}
.service-category-item:not(:last-child) .service-category-link {
  padding-bottom: 10px;
}
.service-category-item + .service-category-item .service-category-link {
  border-top: 1px solid var(--border-color);
}

.service-category-item.active > .service-category-link, .service-category-link:hover {
  color: var(--brand-color) !important;
}

/*!==============================================================================
  🧩 03. Components
  ==============================================================================*/
/*====================== 🖼️ 3.1. Image ======================*/
.background-img {
  background-repeat: no-repeat;
}

.bg-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.bg-contain {
  max-width: 100%;
  max-height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.bg-fixed {
  background-attachment: fixed;
}
.bg-center {
  background-repeat: no-repeat;
  background-position: center center;
}
.bg-bottom {
  background-position-y: bottom;
}
.bg-invert {
  transition: all 0.2s;
  filter: saturate(0);
  opacity: 0.4;
}
.bg-invert:hover {
  filter: saturate(1);
  opacity: 1;
}

.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*======================  🕶️ 3.2. Overlay ======================*/
 .overlay-linear-bottom-dark, .overlay-linear-top-dark {
  position: relative;
  z-index: 1;
}
 .overlay-linear-bottom-dark::before, .overlay-linear-top-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
}

/* Overlay Variations */
.overlay-linear-top-dark::before {
  background-image: linear-gradient(to bottom, rgba(var(--dark-color-rgb), 0.8) 0%, rgba(var(--dark-color-rgb), 0.7) 20%, rgba(var(--dark-color-rgb), 0.6) 70%, rgba(var(--dark-color-rgb), 0) 100%);
}
.overlay-linear-bottom-dark::before {
  background-image: linear-gradient(to top, rgba(var(--dark-color-rgb), 0.8) 0%, rgba(var(--dark-color-rgb), 0.7) 20%, rgba(var(--dark-color-rgb), 0.6) 70%, rgba(var(--dark-color-rgb), 0) 100%);
}
/*====================== 🔘 3.3. Button ======================*/
button {
  border: 0;
  background: transparent;
}

.btn,
.form-control {
  padding: 0.65rem 1.15rem;
}

.btn-lg {
  padding: 0.7rem 1.25rem;
  font-size: 17px;
}

.btn-sm {
  padding: 0.4rem 1.15rem;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: var(--heading-font-weight);
  text-transform: uppercase;
}
.btn-brand, .btn-primary {
  background-color: var(--brand-color);
  border-color: var(--brand-color);
  color: var(--white-color) !important;
}
.btn-brand:hover, .btn-brand:active, .btn-brand:focus, .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background-color: var(--brand-color-dark) !important;
  border-color: var(--brand-color-dark) !important;
}
.btn-brand-1 {
  background-color: var(--brand-color-1);
  border-color: var(--brand-color-1);
  color: var(--white-color) !important;
}
.btn-brand-1:hover, .btn-brand-1.active, .btn-brand-1:active, .btn-brand-1:focus {
  background-color: var(--brand-color-1-dark) !important;
  border-color: var(--brand-color-1-dark) !important;
}
.btn-video-popup {
  transition: all 0.5s ease;
}
.btn.ripple::before, .btn.ripple::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  animation: ripple 1.5s infinite;
}

.btn-link {
  color: inherit;
  text-decoration: none;
}

.rounded-circle.ripple::before, .rounded-circle.ripple::after {
  border-radius: 50%;
}

.btn-with-arr-right .arr-right {
  transition: all 0.5s;
}
.btn-with-arr-right:hover .arr-right {
  transform: rotate(-45deg);
}

.btn-with-arr-top-right .arr-top-right {
  transition: all 0.5s;
}
.btn-with-arr-top-right:hover .arr-top-right {
  transform: rotate(45deg);
}

/*-------------------------------------------------
  Scroll-to-Top Button
--------------------------------------------------*/
.btn-scroll-top {
  position: fixed;
  bottom: 58px;
  right: 78px;
  width: 46px;
  height: 46px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 46px;
  text-align: center;
  background: rgba(var(--brand-color-1-rgb), 0.5);
  color: var(--white-color);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.2s linear;
  backdrop-filter: blur(30px);
}
.btn-scroll-top.active {
  opacity: 1;
  visibility: visible;
}
.btn-scroll-top .progress-ring {
  position: absolute;
  transform: rotate(-90deg);
}
.btn-scroll-top .progress-ring-bg {
  fill: none;
  stroke: rgba(var(--brand-color-rgb), 0.1);
  stroke-width: 2;
}
.btn-scroll-top .progress-ring-circle {
  fill: none;
  stroke: var(--brand-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.2s linear;
}
.btn-scroll-top .arrow {
  position: relative;
  z-index: 1;
  color: var(--white-color);
  font-size: 16px;
  pointer-events: none;
}

/*======================  🖼️ 3.4. Form ======================*/
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--border-color);
  transition: border-color 0.3s ease;
}

/*======================  📂 3.5. Accordion ======================*/
.accordion-item {
  border: 0 !important;
}

.accordion-button {
  background-color: var(--light-color);
  color: var(--dark-color);
  font-size: 20px;
  font-weight: var(--heading-font-weight);
  transition: all 0.3s ease;
  box-shadow: none !important;
}
.accordion-button.collapsed {
  margin-bottom: 20px;
}
.accordion-button:not(.collapsed) {
  background-color: var(--light-color);
  color: var(--dark-color);
}
.accordion-button:after, .accordion-button:not(.collapsed):after {
  content: "";
}

/*======================  🔢 3.6. Pagination ======================*/
.pagination {
  --bs-pagination-padding-x: 0.85rem;
  --bs-pagination-disabled-bg: transparent;
}

.page-link {
  font-weight: 500;
  border-radius: 4px !important;
  transition: background-color 0.3s ease, color 0.3s ease;
  color: var(--brand-color-1);
}
.page-link:hover, .page-link:active {
  background-color: var(--brand-color-1);
  border-color: var(--brand-color-1);
  color: var(--white-color);
}

.page-item.active .page-link {
  background-color: var(--brand-color-1);
  border-color: var(--brand-color-1);
  color: var(--white-color);
}

/*======================  🏛️ 3.7. Gallery ======================*/
.gallery {
  column-gap: 2rem;
}
.gallery-item-description {
  opacity: 1;
  bottom: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

@media (min-width: 768px) {
  .gallery {
    column-count: 2;
  }
}
@media (min-width: 991px) {
  .gallery {
    column-count: 3;
  }
  .gallery-item-description {
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    transition: all 0.4s ease;
  }
  .gallery-item:hover > .gallery-item-description {
    bottom: 0;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}
/*======================  🧭 3.8. Breadcrumbs ======================*/
.breadcrumb-item {
  font-size: clamp(1rem, 0.5rem + 0.5vw, 1.15rem);
  color: rgba(var(--white-color-rgb));
}
.breadcrumb-item + .breadcrumb-item::before {
  margin: 0 7px;
}
.breadcrumb-item a:hover {
  color: var(--brand-color-1);
}

/*======================  📊 3.9. Progress Bar ======================*/
.progress {
  height: 0.65rem;
  font-size: 0.65rem;
  background-color: var(--bs-secondary-bg);
  overflow: hidden;
}
.progress .progress-bar {
  width: 0;
  background-color: var(--brand-color);
  background-image: linear-gradient(135deg, #CEDA22 0%, var(--brand-color-1) 100%);
  transition: width 1.5s ease-in-out;
}

/*======================  📸 3.10. Swiper ======================*/
:root {
  --swiper-pagination-right: 24px;
  --swiper-pagination-color: var(--brand-color);
  --swiper-navigation-size: 20px;
  --swiper-pagination-bullet-vertical-gap: 16px;
  --swiper-pagination-bullet-horizontal-gap: 7px;
  --swiper-navigation-sides-offset: 24px;
  --swiper-pagination-right: 38px;
  --swiper-navigation-color: rgba(var(--dark-color-rgb), 0.4) !important;
}

.swiper-hero,
.swiper-slide {
  height: auto !important;
}

.swiper-container-wrapper {
  margin: -20px;
  overflow: hidden;
  padding: 20px;
}
.swiper-container-wrapper .swiper {
  overflow: visible;
}
.swiper-container-wrapper .swiper-pagination {
  position: relative;
  margin-top: 38px;
  --swiper-pagination-bottom: 0;
}

/*-------------------------------------------------
  Swiper Pagination
--------------------------------------------------*/
.swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet-active {
  color: var(--brand-color) !important;
}

.bg-dark .swiper-pagination-bullet {
  color: var(--white-color);
  opacity: 1;
}

/*-------------------------------------------------
  Swiper Navigation Buttons
--------------------------------------------------*/
.swiper-btn-prev[aria-disabled=true],
.swiper-btn-next[aria-disabled=true] {
  color: var(--text-color) !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/*-------------------------------------------------
  Swiper Circle Pagination Style
--------------------------------------------------*/
.circle-style:before, .circle-style:after {
  content: "";
  position: absolute;
  width: 3px;
  height: 77px;
  left: 14px;
  margin-left: -1px;
}
.circle-style .swiper-pagination-bullet {
  width: 26px;
  height: 26px;
  background-color: transparent;
  position: relative;
  text-align: center;
  transform: scale(0.96);
  transition: all 0.5s;
}
.circle-style .swiper-pagination-bullet::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: currentColor;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.circle-style .swiper-pagination-bullet.swiper-pagination-bullet-active {
  transform: scale(1.05);
  border: 1px solid currentColor;
}

/*-------------------------------------------------
  Swiper Pill Pagination Style
--------------------------------------------------*/
.pill-style .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  transition: all 0.3s ease;
}
.pill-style .swiper-pagination-bullet-active {
  width: 24px;
}

/*-------------------------------------------------
  Swiper Custom Hero Navigation Buttons
--------------------------------------------------*/
.swiper-hero-btn-prev,
.swiper-hero-btn-next {
  position: absolute;
  top: 50%;
  z-index: 1;
  margin-top: -135px;
}

.swiper-hero-btn-prev {
  width: 0;
  height: 0;
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
  border-left: 70px solid var(--brand-color);
}

/*-------------------------------------------------
  Swiper Custom Animations for Active Slide Elements
--------------------------------------------------*/
.swiper-slide-active .animated-fade-up {
  animation: fadeUp 0.8s ease forwards;
}

/*====================== 🧾 3.11. Section ======================*/
/* ---------------------------------
   Section Title
---------------------------------- */
.section-title {
  max-width: 780px;
}
.section-title .sub-title {
  font-size: 0.9375rem;
  font-weight: var(--section-title-font-weight);
  text-transform: uppercase;
  color: var(--brand-color);
  letter-spacing: 1.5px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.section-title .title {
  font-weight: var(--section-title-font-weight);
  font-size: var(--heading-two);
}
.section-title-centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------------------------------
   Description
---------------------------------- */
.description {
  font-size: 1.0625rem;
}

/* ---------------------------------
   Responsive: Centered Title (Small Screens)
---------------------------------- */
@media (max-width: 767.98px) {
  .section-title-sm-centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .section-title-sm-centered .sub-title::after {
    content: "\e32a";
    font-family: "Phosphor-Bold" !important;
  }
}
/* ---------------------------------
   Section Spacing Sizes
---------------------------------- */

.section-bottom-sm {
  padding-bottom: clamp(2.5rem, 1.364rem + 3.636vw, 3.5rem);
}

.section-md {
  padding-top: clamp(2.5rem, 1.364rem + 3.636vw, 5rem);
  padding-bottom: clamp(2.5rem, 1.364rem + 3.636vw, 5rem);
}

.section-top-md {
  padding-top: clamp(2.5rem, 1.364rem + 3.636vw, 5rem);
}

.section-lg {
  padding-top: clamp(3.75rem, 2.273rem + 4.545vw, 7.5rem);
  padding-bottom: clamp(3.75rem, 2.273rem + 4.545vw, 7.5rem);
}

.section-top-lg {
  padding-top: clamp(3.75rem, 2.273rem + 4.545vw, 7.5rem);
}

.section-bottom-lg {
  padding-bottom: clamp(3.75rem, 2.273rem + 4.545vw, 7.5rem);
}

.section-bottom-xl {
  padding-bottom: clamp(5rem, 2.841rem + 8.864vw, 11.35rem);
}

.section-top-xxl {
  padding-top: clamp(6.25rem, 3.409rem + 11.591vw, 12.75rem);
}

/*======================  💬 3.12. Comment ======================*/
.comment {
  margin-top: 32px;
}

.comment-list .children {
  position: relative;
  margin-left: 48px;
}

/*======================  ✨ 3.13. Feature Item ======================*/

/*!==============================================================================
  🧰 04. Utilities
  ==============================================================================*/
/*======================  📐  4.1. Flex Align ======================*/
.flex-between, .flex-center, .flex-align {
  display: flex;
  align-items: center;
}

.flex-center {
  justify-content: center;
}

.flex-between {
  justify-content: space-between;
}

/*======================  📍  4.2. Position ======================*/
.top-0 {
  top: 0;
}

.top-16px {
  top: 16px;
}

.top-minus-30px {
  top: -30px;
}

.right-5px {
  right: 5px;
}

.right-15px {
  right: 15px;
}

.right-16px {
  right: 16px;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}
.center-y {
  top: 50%;
  transform: translateY(-50%);
}

/*======================  📏  4.3. Sizing ======================*/

.w-38px {
  width: 2.375rem;
}

.h-38px {
  height: 2.375rem;
}

.w-42px {
  width: 2.625rem;
}

.h-42px {
  height: 2.625rem;
}

.w-46px {
  width: 2.875rem;
}

.h-46px {
  height: 2.875rem;
}

.max-h-48px {
  max-height: 3rem;
}

.w-54px {
  width: 3.375rem;
}

.h-54px {
  height: 3.375rem;
}

.w-60px {
  width: 3.75rem;
}

.h-60px {
  height: 3.75rem;
}

.w-64px {
  width: 4rem;
}

.h-64px {
  height: 4rem;
}

.w-68px {
  width: 4.25rem;
}

.h-68px {
  height: 4.25rem;
}

.w-74px {
  width: 4.625rem;
}

.h-74px {
  height: 4.625rem;
}

.max-w-180px {
  max-width: 11.25rem;
}

.h-540px {
  height: 33.75rem;
}

.max-w-540px {
  max-width: 33.75rem;
}

.h-560px {
  height: 35rem;
}

@media (min-width: 991px) {
  .max-h-lg-58px {
    max-height: 3.625rem;
  }
}
.w-86per {
  width: 86%;
}

/*======================  ↔️  4.4. Margin ======================*/

.mt-4px {
  margin-top: 0.25rem;
}

.mb-4px {
  margin-bottom: 0.25rem;
}

.mb-6px {
  margin-bottom: 0.375rem;
}

.me-8px {
  margin-right: 0.5rem;
}

.mt-12px {
  margin-top: 0.75rem;
}

.mb-12px {
  margin-bottom: 0.75rem;
}

.mx-12px {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.my-16px {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.mt-16px {
  margin-top: 1rem;
}

.mb-16px {
  margin-bottom: 1rem;
}

.mb-18px {
  margin-bottom: 1.125rem;
}

.me-18px {
  margin-right: 1.125rem;
}

.mt-20px {
  margin-top: 1.25rem;
}

.my-24px {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.mt-24px {
  margin-top: 1.5rem;
}

.mb-24px {
  margin-bottom: 1.5rem;
}

.mb-28px {
  margin-bottom: 1.75rem;
}

.my-32px {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.mt-32px {
  margin-top: 2rem;
}

.mb-32px {
  margin-bottom: 2rem;
}

.mt-38px {
  margin-top: 2.375rem;
}

.mt-42px {
  margin-top: 2.625rem;
}

.mb-42px {
  margin-bottom: 2.625rem;
}

.mt-48px {
  margin-top: 3rem;
}

.mb-48px {
  margin-bottom: 3rem;
}

.mt-minus-70px {
  margin-top: -4.375rem;
}

@media (min-width: 991px) {
  .mt-lg-minus-70px {
    margin-top: -70px;
  }
}
/*======================  ↕️  4.5. Padding Utilities ======================*/

.py-2px {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-4px {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-6px {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-12px {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.px-12px {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.p-14px {
  padding: 0.875rem;
}

.py-14px {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.p-18px {
  padding: 1.125rem;
}

.py-18px {
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
}

.pt-18px {
  padding-top: 1.125rem;
}

.px-18px {
  padding-left: 1.125rem;
  padding-right: 1.125rem;
}

.p-20px {
  padding: 1.25rem;
}

.py-20px {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-22px {
  padding-top: 1.375rem;
  padding-bottom: 1.375rem;
}

.p-24px {
  padding: 1.5rem;
}

.py-24px {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.px-24px {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-28px {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.py-30px {
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
}

.px-30px {
  padding-left: 1.875rem;
  padding-right: 1.875rem;
}

.p-32px {
  padding: 2rem;
}

.px-32px {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-48px {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.pe-54px {
  padding-right: 3.375rem;
}

.pb-100px {
  padding-bottom: 6.25rem;
}

@media (min-width: 1200px) {
  .px-xl-24px {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .py-xl-32px {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .pe-xl-32px {
    padding-right: 2rem;
  }
  .px-xl-32px {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .py-xl-40px {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .px-xl-40px {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .ps-xl-54px {
    padding-left: 3.375rem;
  }
  .pe-xl-60px {
    padding-right: 3.75rem;
  }
  .px-xl-60px {
    padding-left: 3.75rem;
    padding-right: 3.75rem;
  }
  .pe-xl-80px {
    padding-right: 5rem;
  }
  .pe-xl-100px {
    padding-right: 6.25rem;
  }
}
/*======================  📦  4.6. Border ======================*/
.border-dark {
  border-color: var(--border-dark-color) !important;
}
.border-dashed {
  border-style: dashed !important;
}
.br-28px {
  border-radius: 28px !important;
}

/*======================  🧮  4.7. Gap ======================*/
.gap-4px {
  gap: 0.25rem;
}

.gap-6px {
  gap: 0.375rem;
}

.gap-7px {
  gap: 0.4375rem;
}

.gap-8px {
  gap: 0.5rem;
}

.gap-10px {
  gap: 0.625rem;
}

.gap-12px {
  gap: 0.75rem;
}

.gap-y-12px {
  row-gap: 0.75rem;
}

.gap-16px {
  gap: 1rem;
}

.gap-18px {
  gap: 1.125rem;
}

.gap-24px {
  gap: 1.5rem;
}

.gap-x-24px {
  column-gap: 1.5rem;
}

.gap-32px {
  gap: 2rem;
}

/*======================  🔠  4.8. Font Size ======================*/

.fs-14px {
  font-size: 0.875rem;
}

.fs-15px {
  font-size: 0.9375rem;
}

.fs-17px {
  font-size: 1.0625rem;
}

.fs-18px {
  font-size: 1.125rem;
}

.fs-20px {
  font-size: 1.25rem;
}

.fs-24px {
  font-size: 1.5rem;
}

.fs-28px {
  font-size: 1.75rem;
}

.fs-40px {
  font-size: 2.5rem;
}

.fs-48px {
  font-size: 3rem;
}

/*======================  🏋️  4.9. Font Weight ======================*/

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

/*======================  📏  4.10. Line Height ======================*/
.lh-1 {
  line-height: 1;
}

.lh-1_7 {
  line-height: 1.7;
}

/*======================  🔡  4.11. Letter Spacing ======================*/
.ls-minus-2px {
  letter-spacing: -2px !important;
}

.ls-minus-1px {
  letter-spacing: -1px !important;
}

/*======================  ⚖️  4.12. Ratio ======================*/
.ratio-5x6 {
  --bs-aspect-ratio: calc(6 / 5 * 100%);
}

/*======================  🌫️  4.13. Shadow ======================*/
.box-shadow-md {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.09);
}

/*======================  🔷 4.14. Shape ======================*/

/*======================  🌗 4.15. Opacity ======================*/

/*======================  🖱️ 4.16. Hover Effects ======================*/
.hover-scale {
  overflow: hidden;
}
.hover-scale img {
  transition: 0.5s ease-in-out;
}
.hover-scale:hover > img {
  transform: scale(1.1) rotate(2deg) translateY(-10px);
}
.hover-ls-0_5px:hover {
  letter-spacing: 0.5px;
}

/*======================  🎞️  4.17. Animations ======================*/
/*--------------------------------------*\
  Fade Animations
\*--------------------------------------*/
@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*--------------------------------------*\
  Bounce In Animations
\*--------------------------------------*/
@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-300px);
  }
  60% {
    opacity: 1;
    transform: translateX(25px);
  }
  80% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(300px);
  }
  60% {
    opacity: 1;
    transform: translateX(-25px);
  }
  80% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(300px);
  }
  60% {
    opacity: 1;
    transform: translateY(-20px);
  }
  80% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-300px);
  }
  60% {
    opacity: 1;
    transform: translateY(20px);
  }
  80% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
/*--------------------------------------*\
  Miscellaneous
\*--------------------------------------*/
/* Slide in from top (not fade) */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
/* Ripple effect (for buttons/icons) */
@keyframes ripple {
  70% {
    box-shadow: 0 0 0 10px rgba(10, 165, 205, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(10, 165, 205, 0);
  }
}
/* Smooth scale-in for images or cards */
@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}

.shine-img {
  mask-image: linear-gradient(45deg, #000 35%, rgba(0, 0, 0, 0.6) 50%, #000 65%);
  mask-size: 800%;
  mask-position: 0;
}
.shine-img:hover {
  transition: mask-position 2s ease;
  mask-position: 120%;
  opacity: 1;
}