:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Nunito",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #333; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #de4e3c; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #333;  /* The default color of the main navmenu links */
  --nav-hover-color: #de4e3c; /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #de4e3c; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 10px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 45px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: #de4e3c;
  font-size: 15px;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 4px;
  transition: 0.3s;
  font-weight: 500;
  border-radius: 30px;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, #de4e3c, transparent 15%);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);
}

/* Index Page Header
------------------------------*/
.index-page .header {
  --background-color: rgba(255, 255, 255, 0);
}

/* Index Page Header on Scroll
------------------------------*/
.index-page.scrolled .header {
  /* --background-color: #ffffff; */
  background: rgba(255, 255, 255, 0.6); /* glass color */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari */

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul,
  .navmenu li {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
  
  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 12px;
    font-size: 15px;
    font-family: var(--nav-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu ul,
  .navmenu li {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/* Listing Dropdown - Desktop */
@media (min-width: 1200px) {
  .navmenu .listing-dropdown {
    position: static;
  }

  .navmenu .listing-dropdown ul {
    margin: 0;
    padding: 10px;
    background: var(--nav-dropdown-background-color);
    box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
    position: absolute;
    top: 130%;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    display: flex;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
  }

  .navmenu .listing-dropdown ul li {
    flex: 1;
  }

  .navmenu .listing-dropdown ul li a,
  .navmenu .listing-dropdown ul li:hover>a {
    padding: 10px 20px;
    font-size: 15px;
    color: var(--nav-dropdown-color);
    background-color: var(--nav-dropdown-background-color);
  }

  .navmenu .listing-dropdown ul li a:hover,
  .navmenu .listing-dropdown ul li .active,
  .navmenu .listing-dropdown ul li .active:hover {
    color: var(--nav-dropdown-hover-color);
    background-color: var(--nav-dropdown-background-color);
  }

  .navmenu .listing-dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }
}

/* Listing Dropdown - Mobile */
@media (max-width: 1199px) {
  .navmenu .listing-dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .listing-dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .listing-dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
/* .footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
} */

.footer {
  position: relative;
  padding: 0px 20px;
  border-radius: 20px;

  background: linear-gradient(
  120deg,
  #f7f8fc,
  #eef1f7,
  #e4e8f3
);

  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
      circle at 20% 30%,
      rgba(245, 239, 250,0.6),
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(226, 221, 244,0.4),
      transparent 60%
    );

  pointer-events: none;
}

.footer::after {
  content: "";
  position: absolute;
  inset: 0;

  mix-blend-mode: overlay;
}

.footer .footer-top {
  padding-top: 50px;
  border-top: 2px solid color-mix(in srgb, #de4e3c, transparent 75%);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: color-mix(in srgb, #de4e3c, transparent 97%);
  border: 1px solid color-mix(in srgb, #de4e3c, transparent 85%);
  font-size: 16px;
  color: #de4e3c;
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--contrast-color);
  background-color: #de4e3c;
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  margin-right: 3px;
  font-size: 12px;
  line-height: 0;
  color: #de4e3c;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.3;
}

.footer .footer-links ul a:hover {
  color: #de4e3c;
}

.footer .footer-about a {
  color: var(--heading-color);
  font-size: 24px;
  font-weight: 600;
  font-family: var(--heading-font);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: #de4e3c;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, #de4e3c, transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
}

.page-title .heading {
  padding: 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 20px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.page-title nav ol li+li {
  padding-left: 10px;
}

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 98px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 56px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 8px 20px;
  margin: 0;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  display: inline-block;
  text-transform: uppercase;
  border-radius: 50px;
  font-family: var(--default-font);
}

.section-title p {
  color: var(--heading-color);
  margin: 10px 0 0 0;
  font-size: 32px;
  font-weight: 700;
  font-family: var(--heading-font);
}

.section-title p .description-title {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/

.hero {
  width: 100%;
  min-height: 85vh;
  position: relative;
  padding: 80px 0 60px 0;
  display: flex;
  align-items: center;
  /* background: url(../img/hero-bg.png) top center no-repeat; */
  background-size: cover;
  background: linear-gradient(
    to right,
    rgba(240, 242, 247, 0.95),
    rgba(220, 225, 235, 0.8)
  );
}

.hero h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
}

.hero p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 5px 0 30px 0;
  font-size: 20px;
  font-weight: 400;
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  border-radius: 30px;
  transition: 0.5s;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.hero .btn-get-started i {
  margin-left: 5px;
  font-size: 18px;
  transition: 0.3s;
}

.hero .btn-get-started:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 55%);
}

.hero .btn-get-started:hover i {
  transform: translateX(5px);
}

.hero .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  color: var(--default-color);
  font-weight: 600;
}

.hero .btn-watch-video i {
  color: var(--accent-color);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

.hero .btn-watch-video:hover {
  color: var(--accent-color);
}

.hero .btn-watch-video:hover i {
  color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .hero p {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services-section {
  position: relative;
  /* background: #e8ebf2; */
  padding: 80px 0 140px; /* IMPORTANT: extra bottom space */
  overflow: hidden;
  background: linear-gradient(
    to right,
    rgba(240, 242, 247, 0.95),
    rgba(220, 225, 235, 0.8)
  );
}

/* Bottom wave */
.services-section::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; /* FIXED (was too low before) */

  width: 100%;
  height: 220px;

  background: linear-gradient(
    120deg,
    rgb(226, 221, 244),
    rgba(245, 239, 250),
    rgba(217, 210, 245)
  );

  border-top-left-radius: 60% 100%;
  border-top-right-radius: 60% 100%;

  z-index: 1; /* bring above background */
}

.services-section::after {
  filter: blur(30px);
  opacity: 0.9;
  /* background: rgb(171, 163, 223); */
}


.container {
  position: relative;
  z-index: 2;
}

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

.card {
  padding: 40px;
  border-radius: 20px;

  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);

  box-shadow:
    0 15px 30px rgba(0,0,0,0.08),
    inset 0 1px 1px rgba(255,255,255,0.7);
}

.services-section .card {
  background-color: var(--background-color);
  color: var(--default-color);
  padding: 10px 30px 30px;
  text-align: center;
  transition: 0.3s;
  height: 100%;
  border: 2px solid white;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.7),
    rgba(230,235,245,0.6)
  );

  /* background: rgba(255,255,255,0.6); */
  backdrop-filter: blur(10px);

  box-shadow:
    0 15px 30px rgba(0,0,0,0.08),
    inset 0 1px 1px rgba(255,255,255,0.6);
}


.services-section .card img {
  padding: 30px 50px;
  transition: 0.5s;
  transform: scale(1.1);
}

.services-section .card h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 18px;
}

.services-section .card:hover {
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 88%);
}

.services-section .card:hover img {
  transform: scale(1);
}

/* Icon container */
.icon-wrap {
  position: relative;
  width: 60%;
  height: 60%;
  margin: 0 auto 15px;
  border-radius: 12px;
  overflow: hidden;

  /* your card-like bg */
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.6),
    rgba(230,235,245,0.4)
  );
}

.icon-wrap {
  position: relative;
  width: 60%;
  height: 60%;
  margin: 0 auto 20px;
  border-radius: 12px;
  overflow: hidden;

  /* your card-like bg */
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.6),
    rgba(230,235,245,0.4)
  );
}

/*--------------------------------------------------------------
# videos
--------------------------------------------------------------*/
.icon-video {
  width: 100%;
  height: 100%;

  object-fit: contain;   /* keeps aspect ratio */
  mix-blend-mode: multiply;

  /* magic */
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);

  position: relative;
  z-index: 1;
}

.icon-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.6), transparent 70%);
  z-index: 0;
}


/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 15px 0;
  background: linear-gradient( 145deg, #5a647d, #3e475f );
  min-height: 40px;
  margin: 80px 0 0 0;
}

.breadcrumbs h2 {
  font-size: 28px;
  font-weight: 300;
  color: #fff;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  color: #ded5d2;
}

.breadcrumbs ol a {
  color: #fe825a;
}

.breadcrumbs ol li + li {
  padding-left: 10px;
}

.breadcrumbs ol li + li::before {
  display: inline-block;
  padding-right: 10px;
  color: #c8bab5;
  content: "/";
}

@media (max-width: 768px) {
  .breadcrumbs .d-flex {
    display: block !important;
  }
  .breadcrumbs ol {
    display: block;
  }
  .breadcrumbs ol li {
    display: inline-block;
  }
}

/*--------------------------------------------------------------
# Vision Section
--------------------------------------------------------------*/
.vision {
  background: linear-gradient(
  to bottom,
  rgba(226, 221, 244, 0) 0%,
  rgba(245, 239, 250, 0.8) 40%,
  rgba(217, 210, 245, 1) 100%
);
  backdrop-filter: blur(12px);

  /* border-radius: 20px; */
  padding: 0px 60px 80px 60px;  
}

.vision .card {
  /* width: 300px; */
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.9),
    rgba(235,240,250,0.7)
  );
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  position: relative;
  border: solid 2px white;
  padding: 0;
}

.vision .card-image {
  position: relative;
  height: 250px;
  overflow: hidden;
  clip-path: fill-box;
}

.vision .card:hover {
  transform: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.vision .card:hover h3 {
  transform: none;
}

.vision .card:hover p {
  transform: none;
  /* opacity: 0.9; */
}

/*--------------------------------------------------------------
# Values Section
--------------------------------------------------------------*/
.values {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);

  border-radius: 20px;
  padding: 60px;  
}


.values .card {
  /* width: 300px; */
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.9),
    rgba(235,240,250,0.7)
  );
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  position: relative;
  border: solid 2px white;
  padding: 0;
}

.card {
  transition: 
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.icon-badge img{
  height: 65%;
}

.icon-badge {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card:hover .icon-badge {
  transform: translateY(-5px) scale(1.05);
  box-shadow:
    8px 8px 18px rgba(0,0,0,0.2),
    -6px -6px 15px rgba(255,255,255,0.9);
}

.card h3,
.card p,
.card a {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.card:hover h3 {
  transform: translateY(-2px);
}

.card:hover p {
  transform: translateY(-2px);
  opacity: 0.9;
}

.card:hover a {
  letter-spacing: 1px;
}


/* IMAGE TOP */
.card-image {
  position: relative;
  height: 250px;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0px, 100% 100%, 0 75%);
}

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

/* ANGLED CUT */
.card-image::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  /* height: 80px; */

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0) 50%,
    rgba(255,255,255,0.95) 50%
  );
}

/* BODY */
.card-body {
  padding: 25px 20px 20px;
  position: relative;
}

/* FLOATING ICON */
.icon-badge {
  position: absolute;
  top: -30px;
  left: 20px;

  width: 55px;
  height: 55px;
  border-radius: 50%;

  background: linear-gradient(
    145deg,
    #f0f3f9,
    #adb5c6
  );

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    5px 5px 12px rgba(0,0,0,0.15),
    -5px -5px 12px rgba(255,255,255,0.8);
}

/* TEXT */
.card h3 {
  margin-top: 20px;
  font-size: 20px;
  color: #1d2a3a;
  font-weight: 700;
}

.card p {
  font-size: 14px;
  color: #6b7280;
  margin: 10px 0 15px;
}

/* LINK */
.card a {
  text-decoration: none;
  font-weight: 600;
  color: #dd4b39;
  transition: 0.3s;
}

.card a:hover {
  letter-spacing: 1px;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.card-body {
  backdrop-filter: blur(10px);
}
/* .card-image {
  clip-path: polygon(0 0, 100% 0px, 100% 100%, 0 75%);
} */

.values .card:hover img {
  transform: scale(1);
}



/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 85%);
  padding: 30px;
  border-radius: 20px;
}

.stats .stats-item i {
  color: var(--accent-color);
  font-size: 42px;
  line-height: 0;
  margin-right: 20px;
}

.stats .stats-item span {
  color: var(--heading-color);
  font-size: 36px;
  display: block;
  font-weight: 600;
}

.stats .stats-item p {
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 16px;
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients .swiper-slide img {
  transition: 0.3s;
  opacity: 0.5;
}

.clients .swiper-slide img:hover {
  opacity: 1;
}

.clients .swiper-wrapper {
  height: auto;
}

.clients .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.clients .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 1;
  background-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.clients .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  background: color-mix(in srgb, #3f4860, transparent 93%);
  padding: 30px;
  border-radius: 20px;
}

.contact .info-item i {
  font-size: 38px;
  line-height: 0;
  color: #dd4b39;
}

.contact .info-item h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 20px 0 10px 0;
}

.contact .info-item p {
  padding: 0;
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.contact .php-email-form {
  background: color-mix(in srgb, #3f4860, transparent 93%);
  padding: 30px;
  height: 100%;
  border-radius: 20px;
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 8px;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 30px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# buttons
--------------------------------------------------------------*/

.btn-gray {
  width: fit-content;
  margin: 0 auto;   /* center */
  display: block;

  display: inline-block;
  padding: 12px 38px;
  border-radius: 30px;

  font-size: 16px;
  font-weight: 400;
  color: #fff;
  text-align: center;

  background: linear-gradient(
    145deg,
    #66708a,
    #464f68
  );

  border: none;
  cursor: pointer;

  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);

  transition: all 0.3s ease;
}

.btn-gray:hover {
  background: linear-gradient(
    145deg,
    #5a647d,
    #3e475f    
  );
  color: #fff;

  transform: translateY(-2px);

  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.btn-red {
  color: #fff;
  background: #de4e3c;
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  border-radius: 30px;
  transition: 0.5s;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    transition-delay: 0s;
  box-shadow: 0 8px 28px color-mix(in srgb, #de4e3c, transparent 80%);
  width: fit-content;
  margin: 30px auto 0;
}

.btn-red:hover {
  color: #FFF;
  background: color-mix(in srgb, #de4e3c, transparent 15%);
  box-shadow: 0 8px 28px color-mix(in srgb, #de4e3c, transparent 55%);
}

/*--------------------------------------------------------------
# work steps
--------------------------------------------------------------*/
.steps {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  text-align: center;
}

/* each step */
.step {
  position: relative;
  flex: 1;
}

/* =========================
   CONNECTOR (LINE + ARROW)
   ========================= */

/* line */
.step:not(:last-child)::after {
  content: "";
  position: absolute;

  top: 90px;              /* center of circle */
  right: -70px;

  width: 140px;
  height: 2px;
  background: #cfd6e4;

  transition: 0.3s ease;
}

/* arrow head */
.step:not(:last-child)::before {
  content: "";
  position: absolute;

  top: 87px;
  right: -71px;

  width: 8px;
  height: 8px;

  border-top: 2px solid #cfd6e4;
  border-right: 2px solid #cfd6e4;

  transform: rotate(45deg);

  transition: 0.3s ease;
}

/* hover effect */
.step:hover::after {
  background: #dd4b39;
}

.step:hover::before {
  border-color: #dd4b39;
}

/* =========================
   NUMBER
   ========================= */

.step-number {
  display: block;
  font-weight: 600;
  margin-bottom: 10px;
  color: #2c2f3a;
}

/* =========================
   ICON CIRCLE
   ========================= */

.step-icon {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  border: 4px solid #fff;

  background: linear-gradient(145deg, #e6ebf3, #ffffff);

  box-shadow:
    8px 8px 20px rgba(0,0,0,0.1),
    -8px -8px 20px rgba(255,255,255,0.9);

  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* inner circle */
.circle-inner {
  width: 80px;
  height: 80px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-inner img {
  width: 50%;
}

/* color variants */
.red .circle-inner {
  background: linear-gradient(145deg, #e2685d, #993e41);
}

.blue .circle-inner {
  background: linear-gradient(145deg, #6b8cff, #4a66cc);
}

.dark .circle-inner {
  background: linear-gradient(145deg, #5a6c8f, #2f3f5f);
}

/* =========================
   TEXT
   ========================= */

.step h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #1f2937;
  font-weight: 700;
}

.step p {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  padding: 0 40px;
}

/* =========================
   HOVER EFFECT
   ========================= */

.step:hover .step-icon {
  transform: translateY(-8px) scale(1.05);
  box-shadow:
    12px 12px 30px rgba(0,0,0,0.15),
    -10px -10px 25px rgba(255,255,255,0.95);
}

@media (max-width: 768px) {

  .steps {
    flex-direction: column;
    gap: 50px;
    align-items: center;
  }

  .step {
    width: 100%;
    max-width: 320px;
  }

  /* REMOVE horizontal arrows */
  .step::after,
  .step::before {
    display: none;
  }

  /* =========================
     VERTICAL CONNECTOR
     ========================= */

  .step:not(:last-child) {
    position: relative;
  }

  .step:not(:last-child)::after {
    content: "";
    position: absolute;

    left: 50%;
    transform: translateX(-50%);

    top: 130px;        /* below circle */
    width: 2px;
    height: 40px;

    background: #cfd6e4;
  }

  /* arrow down */
  .step:not(:last-child)::before {
    content: "";
    position: absolute;

    left: 50%;
    transform: translateX(-50%) rotate(135deg);

    top: 165px;

    width: 8px;
    height: 8px;

    border-top: 2px solid #cfd6e4;
    border-right: 2px solid #cfd6e4;
  }

}

@media (max-width: 768px) {
  .step p {
    padding: 0 20px;
  }
}

.step::after,
.step::before {
  transition: all 0.3s ease;
}

/*--------------------------------------------------------------
# About Us
--------------------------------------------------------------*/
.about-us .content {
  padding: 30px 0;
}

.about-us .content h3 {
  font-weight: 700;
  font-size: 34px;
}

.about-us .content p {
  margin-bottom: 0;
}

.about-us .content .icon-box {
  margin-top: 25px;
}

.about-us .content .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 5px 0 10px 60px;
}

.about-us .content .icon-box i {
  font-size: 40px;
  float: left;
  color: #dd4b39;
}

.about-us .content .icon-box p {
  font-size: 15px;
  color: #90847f;
  margin-left: 60px;
}

.about-us .image {
  background: url("../img/about.jpg") center center no-repeat;
  background-size: cover;
  min-height: 400px;
  border-radius: 20px;
}

@media (max-width: 991px) {
  .about-us .image {
    text-align: center;
  }
  .about-us .image img {
    max-width: 80%;
  }
}

@media (max-width: 667px) {
  .about-us .image img {
    max-width: 100%;
  }
}

@media (min-width: 992px) {
    .pl-lg-5, .px-lg-5 {
        padding-left: 3rem !important;
    }

    .pr-lg-5, .px-lg-5 {
        padding-right: 3rem !important;
    }
}
@media (min-width: 992px) {
    .pr-lg-1, .px-lg-1 {
        padding-right: .25rem !important;
    }
}

.image-electricity {
  background: url("../img/service/electricity-01.jpg") center center no-repeat;
  background-size: cover;
  min-height: 400px;
  border-radius: 20px;
}

.image-electricity-2 {
  background: url("../img/service/electricity-02.jpg") center center no-repeat;
  background-size: cover;
  min-height: 400px;
  border-radius: 20px;
}

.image-gas {
  background: url("../img/service/gas.jpg") center center no-repeat;
  background-size: cover;
  min-height: 400px;
  border-radius: 20px;
}

.image-gas-2 {
  background: url("../img/service/gas-02.jpg") center center no-repeat;
  background-size: cover;
  min-height: 400px;
  border-radius: 20px;
}

.image-water {
  background: url("../img/service/water-01.jpg") center center no-repeat;
  background-size: cover;
  min-height: 400px;
  border-radius: 20px;
}

.image-water-2 {
  background: url("../img/service/water-02.jpg") center center no-repeat;
  background-size: cover;
  min-height: 400px;
  border-radius: 20px;
}

.image-water-2 {
  background: url("../img/service/water-02.jpg") center center no-repeat;
  background-size: cover;
  min-height: 400px;
  border-radius: 20px;
}

.image-fastTag {
  background: url("../img/service/fast-tag-01.jpg") center center no-repeat;
  background-size: cover;
  min-height: 400px;
  border-radius: 20px;
}

.image-fastTag-2 {
  background: url("../img/service/fast-tag-02.jpg") center center no-repeat;
  background-size: cover;
  min-height: 400px;
  border-radius: 20px;
}

.image-education {
  background: url("../img/service/education-01.jpg") center center no-repeat;
  background-size: cover;
  min-height: 400px;
  border-radius: 20px;
}

.image-education-2 {
  background: url("../img/service/education-02.jpg") center center no-repeat;
  background-size: cover;
  min-height: 400px;
  border-radius: 20px;
}

.image-insurance {
  background: url("../img/service/insurance-01.jpg") center center no-repeat;
  background-size: cover;
  min-height: 400px;
  border-radius: 20px;
}

.image-insurance-2 {
  background: url("../img/service/insurance-02.jpg") center center no-repeat;
  background-size: cover;
  min-height: 400px;
  border-radius: 20px;
}

.image-adventure {
  background: url("../img/adventure.jpg") center center no-repeat;
  background-size: cover;
  min-height: 400px;
  border-radius: 20px;
}

.about-us .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  border-radius: 30px;
  transition: 0.5s;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 80%);
  width: fit-content;
  margin: 30px 0 0;
}

.about-us .btn-get-started:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 55%);
}

.about-us .btn-get-started:hover i {
  transform: translateX(5px);
}

.cta {
    position: relative;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
    url("../img/service/ecity-bg.jpg") center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
    padding: 60px 0;

    background-position: center;
    min-height: 300px; /* increase height */
}

.cta-gas {
    position: relative;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
    url("../img/service/gas-bg.jpg") center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
    padding: 60px 0;

    background-position: center;
    min-height: 300px; /* increase height */
}

.cta-water {
    position: relative;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
    url("../img/service/water-bg.jpg") center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
    padding: 60px 0;

    background-position: center;
    min-height: 300px; /* increase height */
}

.cta-fastTag {
    position: relative;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
    url("../img/service/fast-tag-bg.jpg") center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
    padding: 60px 0;

    background-position: center;
    min-height: 300px; /* increase height */
}

.cta-education {
    position: relative;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
    url("../img/service/education-bg.jpg") center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
    padding: 60px 0;

    background-position: center;
    min-height: 300px; /* increase height */
}

.cta-insurance {
    position: relative;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
    url("../img/service/insurance-bg.jpg") center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
    padding: 60px 0;

    background-position: center;
    min-height: 300px; /* increase height */
}

.cta h3 {
  font-size: 36px;
  font-weight: 700;
  font-family: var(--default-font);
}

.cta p{
  font-size: 20px;
  padding: 15px 0;
}

/* Disable fixed on mobile */
@media (max-width: 768px) {
    .cta {
        background-attachment: scroll;
    }
}

.feature-box {
  padding: 15px 20px;
  background-color: #ffffff00;
  border: 1px solid #fff;
  box-shadow: var(--bs-box-shadow) !important;
  border-radius: 12px;
  transition: 0.3s;
  height: 100%;
}

.feature-box i {
  background: color-mix(in srgb, #de4e3c, transparent 92%);
  color: #de4e3c;
  line-height: 0;
  padding: 4px;
  margin-right: 10px;
  font-size: 24px;
  border-radius: 3px;
  transition: 0.3s;
}

.feature-box h3 {
  font-size: 18px;
  font-weight: 400;
  margin: 0;
}

.feature-box:hover i {
  background: var(--accent-color);
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Product
--------------------------------------------------------------*/
.product {
  background: linear-gradient( to bottom, rgba(226, 221, 244, 0) 0%, rgba(245, 239, 250, 0.8) 40%, rgba(217, 210, 245, 1) 100% );
  backdrop-filter: blur(12px);

  border-radius: 20px;
  padding: 60px;  
}

.product-card {
  display: flex;
  align-items: stretch;
  border-radius: 20px;
  overflow: hidden;
  padding: 15px;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.9),
    rgba(235,240,250,0.7)
  );

  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border: solid 2px white;

  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.product-card .card-image {
  /* width: 35%; */
  height: 400px;
  clip-path: none; /* REMOVE angle */
}

.product-card .card-image img {
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.product-card .card-body {
  /* width: 65%; */
  padding: 15px 10px 15px 30px;
  position: relative;
  backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
  .product-card {
    flex-direction: column;
  }

  .product-card .card-image,
  .product-card .card-body {
    width: 100%;
  }

  .product-card .card-image {
    height: 220px;
  }
}

.product-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;

  background: linear-gradient(145deg, #5a6278, #4a5268);
  color: #fff;

  padding: 10px 14px;
  border-radius: 12px;

  font-size: 14px;
  gap: 10px;
  box-shadow: var(--bs-box-shadow) !important;
}

/* prevent breaking */
.product-badge span:first-child {
  white-space: nowrap;
}

.product-badge .badge {
  background: rgba(255,255,255,0.29);
  color: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;

  white-space: nowrap;
}

@media (max-width: 576px) {

  .product-badge {
    flex-direction: row;
    font-size: 13px;
    padding: 10px;
  }

  .product-badge .badge {
    font-size: 11px;
  }
}

.product-badge span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

/*--------------------------------------------------------------
# Gallery
--------------------------------------------------------------*/

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 250px;
  gap: 20px;
  padding: 40px;
}

/* Grid variations */
.item.wide {
  grid-column: span 2;
}

.item.tall {
  grid-row: span 2;
}

/* Card styling */
.item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Overlay text */
.gallery-content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
  z-index: 2;
}

.gallery-content h3 {
  margin: 0;
  font-size: 15px;
  background: #de4e3c;
  color: white;
  padding: 10px 25px;
  border-radius: 30px;
}

.content p {
  margin: 5px 0 0;
  font-size: 14px;
}

/* Dark overlay */
.item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.203);
  transition: 0.3s;
}

/* Hover effect */
.item:hover img {
  transform: scale(1.2);
}

.item:hover::after {
  background: rgba(0, 0, 0, 0.052);
}

/* Slight expand feel */
.item:hover {
  z-index: 5;
  /* transform: scale(1.05); */
  transition: 0.3s;
}

/* Responsive */
@media (max-width: 992px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .gallery {
    grid-template-columns: 1fr;
  }

  .item.wide,
  .item.tall {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/*--------------------------------------------------------------
# ferry about
--------------------------------------------------------------*/

.about-section {
  padding: 60px 0;
  position: relative;
  background: linear-gradient( to bottom, rgba(226, 221, 244, 0) 0%, rgba(245, 239, 250, 0.8) 40%, rgba(217, 210, 245, 1) 100% );
  backdrop-filter: blur(12px);
}

/* Content */
.content-box {
  padding: 60px 40px 60px 100px;
}

.travel-bg{
  background: linear-gradient( 145deg, #66708a, #464f68 );
  backdrop-filter: blur(12px);
  border-radius: 15px;
  box-shadow: var(--bs-box-shadow) !important;
}

/* IMAGE OVERLAP */
.image-wrapper {
  position: absolute;
  top: 30%;
  left: 0;
  transform: translateY(-50%);
  width: 53%;
  z-index: 2;
}

.image-wrapper img {
  width: 100%;
  box-shadow: var(--bs-box-shadow) !important;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .image-wrapper {
    position: relative;
    width: 100%;
    transform: none;
    margin-bottom: 30px;
  }

  .content-box {
    padding: 20px;
  }
}


/* Background Section */
.booking-section {
  background: url(../img/ferry/booking-bg.jpg) top left no-repeat;
  background-size: cover;
  min-height: 100%;
  padding: 120px 0 60px;
  position: relative;
}

/* Card */
.booking-card {
  background: #48516a8c;
  border-radius: 20px;
  padding: 40px;
  position: relative;
  z-index: 2;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

/* Heading */
.booking-card h2 {
  font-weight: 600;
  margin-bottom: 10px;
  color: white;
}

.underline {
  width: 50px;
  height: 3px;
  background: #ffffff;
  margin-bottom: 20px;
}

/* Text */
.booking-card p {
  color: #555;
  font-size: 14px;
}

/* Inputs */
.form-control {
  border-radius: 10px;
  padding: 12px;
  border: 1px solid #ddd;
  box-shadow: none;
}

/* Button */
.btn-custom {
  background: color-mix(in srgb, #de4e3c, transparent 15%);
  color: #fff;
  border-radius: 30px;
  padding: 10px 25px;
  border: none;
  margin-top: 20px;
}

.btn-custom:hover {
  color: #FFF;
  background: color-mix(in srgb, #de4e3c, transparent 15%);
  box-shadow: 0 8px 28px color-mix(in srgb, #de4e3c, transparent 55%);
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .booking-card {
    margin-top: -80px; /* still overlap on tablet */
  }
}

@media (max-width: 576px) {
  .booking-card {
    margin-top: -50px;
    padding: 20px;
  }

  .booking-section {
    padding: 40px 15px;
  }
}

.flatpickr-calendar {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}


/*--------------------------------------------------------------
# Login Page
--------------------------------------------------------------*/

.login-bg {
  background: linear-gradient(
    to bottom,
    rgba(226, 221, 244, 0) 0%,
    rgba(245, 239, 250, 0.8) 40%,
    rgba(217, 210, 245, 1) 100%
  );
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding-bottom: 80px;
}

/* =========================
   FORM
========================= */
.form-box {
  max-width: 350px;
  position: relative;
  z-index: 2;
}

.form-box h2 {
  margin-bottom: 10px;
}

.form-box p {
  margin-bottom: 20px;
  color: gray;
  font-size: 1rem;
}

/* INPUTS */
.form-box input {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* BUTTONS */
.btn-custom {
  width: 100%;
  padding: 12px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 6px;
  margin-bottom: 10px;
  cursor: pointer;
}

.google-btn {
  width: 100%;
  padding: 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
}

/* LINKS */
.link {
  margin-top: 10px;
  font-size: 14px;
}

.link a {
  color: #4a6cf7;
  text-decoration: none;
}

/* HIDE FORM */
.hidden {
  display: none;
}

/* =========================
   RIGHT SIDE (CIRCLES)
========================= */
.circle-wrapper {
  position: relative;
  min-height: 350px;
}

/* FLOATING IMAGES */
.float-img {
  position: absolute;
  width: 50px; /* adjust as needed */
  height: auto;
  animation: floatY 6s ease-in-out infinite;
  z-index: 1;
}

/* POSITIONING (adjust visually) */
.i1 {
  right: 85%;
  top: 40%;
  animation-duration: 5s;
}

.i2 {
  right: -20%;
  top: 10%;
  animation-duration: 5s;
}

.i3 {
  right: -15%;
  top: 50%;
  animation-duration: 6s;
}

.i4 {
  right: 35%;
  top: 40%;
  animation-duration: 7s;
}

.i5 {
  right: 15%;
  top: 63%;
  animation-duration: 8s;
}

.i6 {
  right: 45%;
  top: 95%;
  animation-duration: 8s;
}

.i7 {
  right: 65%;
  top: 5%;
  animation-duration: 7s;
}

.i8 {
  right: 67%;
  top: 70%;
  animation-duration: 9s;
}

.i9 {
  right: 20%;
  top: 15%;
  animation-duration: 6s;
}

.i10 {
  right: -8%;
  top: 91%;
  animation-duration: 4s;
}

.i6 {
  right: 45%;
  top: 75%;
  animation-duration: 3s;
}

/* FLOAT ANIMATION */
@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

/* =========================
   RESPONSIVE FIXES
========================= */
@media (max-width: 768px) {

  /* Remove extra padding */
  .p-5 {
    padding: 1rem !important;
  }

  /* Full width form */
  .form-box {
    max-width: 100%;
  }

  /* Hide circles (best UX) */
  .circle-wrapper {
    display: none;
  }
}

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

.btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  border-radius: 30px;
  transition: 0.5s;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 80%);
  width: fit-content;
  margin: 30px 0 0;
}

.btn-get-started:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 55%);
}


@media (max-width: 768px) {
  .values {
    padding: 60px 15px 30px !important;
  }

  /* .services-section .card {
    margin: 0 15px;
  } */

  .about-us .content {
    padding: 40px 0 !important;
  }

  .mx-md-15 {
    margin: 0 5px !important;
  }

  .pb-md-0 {
    padding-bottom: 0 !important;
  }

  .pt-md-40 {
    padding-top: 40px !important;
  }

  .pb-md-40 {
    padding-bottom: 40px !important;
  }

  .pb-md-20 {
    padding-bottom: 20px !important;
  }

  .vision {
    padding: 0 15px 70px !important;
  }

  section, .section{
    padding: 30px 15px !important;
  }

  .md-text-left{
    text-align: left !important;
  }

  .product-card .card-body{
    padding: 15px !important;
  }
}

.hero {
  position: relative;
  min-height: 90vh;
  overflow: hidden;
  padding: 0;
}

/* Slider as background */
#wowslider-container1 {
  position: absolute !important;
  top: 0;
  left: 0;
  z-index: 0 !important;
}

/* Overlay */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 8%);
  z-index: 1;
}

/* Content layer */
.hero-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.form-wrapper {
  width: 350px;
}

/* Form styling */
.form-box {
  background: rgba(255, 255, 255, 0.81);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Hide toggle */
.hidden {
  display: none;
}

@media (min-width: 992px) {
  .form-wrapper {
    margin-right: 100px !important; /* adjust as needed */
  }
}

@media (max-width: 768px) {

  .hero {
    height: auto;
    display: block;
  }

  #wowslider-container1 {
    position: relative !important;
    width: 100% !important;
    height: 220px;   /* adjust as needed */
  }

  .overlay {
    position: absolute;
    height: 220px;
    background: rgba(0, 0, 0, 0);
  }

  .hero-content {
    position: relative !important;   /* 🔥 force remove absolute */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: #fff;
  }

  .form-wrapper {
    width: 100%;
    max-width: 550px;
    margin: 20px auto 0 auto;
  }

}

/* Tablet view */
@media (min-width: 768px) and (max-width: 991px) {

  .hero {
    height: auto;
    display: block;
  }

  #wowslider-container1 {
    position: relative !important;
    width: 100% !important;
    height: 220px;   /* adjust as needed */
  }

  .overlay {
    position: absolute;
    height: 220px;
    background: rgba(0, 0, 0, 0);
  }

  .hero-content {
    position: relative !important;
    display: flex;
    padding: 20px;
    background: #fff;

    align-items: center;
    justify-content: center !important;
  }

  .form-wrapper {
    width: 100%;
    max-width: 400px;
    margin: 20px auto 0 auto;
  }

}