/**
* Template Name: Clarity
* Template URL: https://bootstrapmade.com/clarity-bootstrap-agency-template/
* Updated: Sep 13 2025 with Bootstrap v5.3.8
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

@charset "UTF-8";

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
: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"; */
  --default-font:"Helvetica", Sans-serif;
  /* --heading-font: "Quicksand",  sans-serif;
  --nav-font: "Poppins",  sans-serif; */
  --heading-font: "Helvetica", Sans-serif;
  --nav-font: "Helvetica", 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: #ffff; /* Background color for the entire website, including individual sections */
  --default-color: #e8e7f7; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #ffffff; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #524dd3; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #131428; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default 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: #c8c6e3;  /* The default color of the main navmenu links */
  --nav-hover-color: #ffffff; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #03051f; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #1f2240; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: blue; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: blue; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #0c114a;
  --surface-color: #131b76;
}

.dark-background {
  --background-color: #01020e;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

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

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color:white;
  font-family: var(--default-font);

}


strong{
  color:#0d72b6;
  font-weight:600px;
}
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);
}

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

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

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

.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(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

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

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(255, 255, 255, 0);
  --surface-color: #1b1933;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .header-container {
  background-color: #301db7;
  border-radius: 50px;
  padding: 5px 25px;
  /* box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); */
}

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

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

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

.header .btn-getstarted,
.header .btn-getstarted:focus {
  /* color: var(--contrast-color);
  background: var(--accent-color); */
  color:white;
  background-color:#0d72b6;
  font-size: 14px;
  padding: 8px 20px;
  margin: 0 0 0 30px;
  border-radius: 50px;
  transition: 0.3s;
}

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

@media (max-width: 1200px) {
  .header {
    padding-top: 10px;
  }

  .header .header-container {
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px 5px 10px 15px;
  }

  .header .logo {
    order: 1;
  }

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

  .header .navmenu {
    order: 3;
  }
}

@media (max-width: 575px){
    .header .logo img {
  max-height: 35px;
          margin-left: -15px;
}

}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */


@media (min-width: 1200px) {

  .navmenu {
    padding: 0;
  }

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

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 14px;
  }

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

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

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

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--accent-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

  .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 rgba(0, 0, 0, 0.1);
  }

  .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); */
    color:#a5ca3e;
  }

  .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;
  }
}

/* Mobile Navigation */
@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 {
    padding: 0;
    z-index: 9997;
  }

  /* .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  } */
    .navmenu ul {
        display: none;
        list-style: none;
        position: absolute;
        inset: 55px -1px -12px -2px;
                padding: 10px 0;
        margin: 0;
        /* border-radius: 6px; */
        background-color: var(--nav-mobile-background-color);
        border: 1px solid
 color-mix(in srgb, var(--default-color), transparent 90%);
        box-shadow: none;
        overflow-y: auto;
        transition: 0.3s;
        z-index: 9998;
    }
  .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); */
    background-color:#0d72b6;
    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);
    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; */
    color:black;
    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;
  }
}


@media (max-width: 567px) {
        .mobile-nav-active .navmenu > ul .mobile-cta
{
    margin-top:0px !important;
}

}
/* topbar */
/* -------- Topbar -------- */
:root{
  --topbar-bg:#0d72b6;
  --topbar-text:#ffffff;
  --brand-green:#0b773f;               /* main green */
  --brand-green-2:#0f8a49;             /* slight lighter for gradient/hover */
  --brand-green-accent:#39c36a;        /* underline accent */
  --header-surface:#1b1933;            /* your existing var fallback */
}

.topbar{
  background: var(--topbar-bg);
  color: var(--topbar-text);
  padding: 8px 0;
  font-size: 14px;
}
.topbar a{
  color: var(--topbar-text);
  text-decoration: none;
  opacity: 0.95;
}
.topbar a:hover{ opacity: 1; }
.topbar .gap-3 > a, .topbar .gap-4 > a{ display:inline-flex; align-items:center; }
.topbar i{ font-size: 16px; }

/* Small screens: show compact topbar */
@media (max-width: 767.98px){
  .topbar{ padding: 6px 0; font-size: 13px; }
  .topbar-contacts a span{ display:none; }
}

/* -------- Header look to match screenshot -------- */
.header{
  --background-color: transparent; /* keep transparent behind */
  padding: 16px 0;                 /* tighter like screenshot */
}

/* Green rounded pill container */
.header .header-container{
  /* background: linear-gradient(90deg, var(--brand-green), var(--brand-green-2)); */

  background:white;
  border-radius: 22px;
  padding: 10px 18px;
  /* box-shadow: 0 8px 24px rgba(0,0,0,0.2); */
  /* new change */
      margin-top: -16px;
}

/* Logo text color (if using text instead of image) */
.header .logo h1{
  color:#fff;
  font-weight:700;
}

/* Contact button (right side) */
.header .btn-getstarted,
.header .btn-getstarted:focus{
  color:#fff;
  background:#a5ca3e;          /* black pill like screenshot */
  border-radius:12px;
  padding:10px 22px;
  font-weight:600;
  border:1px solid rgba(255,255,255,0.08);

}
.header .btn-getstarted:hover{ background:#111; }

/* -------- Nav underline + colors -------- */
@media (min-width:1200px){
  .navmenu a,
  .navmenu a:focus{
    color:#0d72b6;             /* light text on green */
    font-weight:600;
    letter-spacing:.2px;
  }
  .navmenu>ul>li{ padding: 12px 16px; }

  /* active/hover underline */
  .navmenu>ul>li>a:before{
    bottom:-10px;
    height:3px;
    /* background: var(--topbar-bg); */
    background-color:#a5ca3e;
    border-radius:2px;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus{
    color:#0d72b6;
  }

  /* dropdown panel styling on green header */
  .navmenu .dropdown ul{
    background:#0e0e0e;
    border:1px solid rgba(255,255,255,0.06);
  }
  .navmenu .dropdown ul a{ color:#f5f5f5; }
  .navmenu .dropdown ul a:hover{ color:#b0ffcc; }
}
/* default: mobile CTA hidden on desktop */
.navmenu ul .mobile-cta { display: none; }

/* desktop CTA visible by default */
.header-cta { display: inline-flex; }

/* ===== Mobile view (<=1199px) ===== */
@media (max-width:1199px){
  /* desktop CTA hide on mobile */
  .header-cta { display: none !important; }

  /* show CTA inside menu list */
  .navmenu ul .mobile-cta {
    display: block;
    padding: 10px 20px;
    margin-top: 8px;
  }

  /* make it look prominent & centered in the panel */
  .navmenu ul .mobile-cta .pearl-btn{
    width: 100%;
    justify-content: center;
    transform: scale(.95);
  }
}

/* optional: when menu opens, keep CTA a bit separated */
.mobile-nav-active .navmenu > ul .mobile-cta{
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 14px;
  width:120px;
  height:50px;
}


.header.sticky-top {
  position: sticky;
  top: 0;
  z-index: 999;
}
/* -------- Mobile nav harmonize with green header -------- */
@media (max-width:1199.98px){
    /* .header.sticky-top {
    top: 0px !important;
    position: sticky !important;
} */
   /* (A) make header non-sticky on mobile (no jump/overlap) */
  .header.sticky-top{
    position: static !important;
    top: auto !important;
    box-shadow: none !important;
  }

    .header .header-container{
        /* background: linear-gradient(90deg, var(--brand-green), var(--brand-green-2)); */
     /* border: 0px; */
        /* background: linear-gradient(90deg, var(--brand-green), var(--brand-green-2)); */
        /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); */
        border: none;
        border-radius: 0px;
        background: none;

    }
  .mobile-nav-toggle{ color:blue; }
  .navmenu > ul{
    background: white;  /* dark panel */
    border:1px solid rgba(255,255,255,0.06);
  }
  .navmenu a, .navmenu a:focus{
    color:#0d72b6;
    fontsize:12px !important;
  }
    header .navmenu .dropdown ul a{
                color:white;
    font-size: 13px !important;
    padding: 12px 14px;
  }
    .navmenu a, .navmenu a:focus:hover{
    color:blue;
fontsize:12px !important;
  }
  .navmenu .dropdown ul{ background:#151515;  ;
 }

}


/* Optional: give slight separation under green bar like screenshot */
.header::after{
  content:"";
  display:block;
  height:6px;
  background: transparent;
}
/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
 .footer {
  color: var(--default-color);
  /* background-color: var(--background-color); */
  background-color:#0d72b6;
  font-size: 14px;

  position: relative;
  back
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer-link-modern {
  display: inline-block;
  position: relative;
  transition: color 0.3s ease;
  text-decoration: none;
  font-weight: 600;
  color: #ffffff;
}

/* === underline animation === */
.footer-link-modern::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: #d1a65a;
  transition: width 0.3s ease;
}

/* === glow text + underline on hover === */
.footer-link-modern:hover {
  color: #d1a65a;
  text-shadow: 0 0 5px #d1a65a, 0 0 10px #d1a65a;
}

.footer-link-modern:hover::after {
  width: 100%;
}

/* === hover logo appears on top-right === */
.footer-link-modern .hover-logo {
  position: absolute;
  top: -10px;
  left: 100%;
  transform: translateX(10px);
  width: 120px;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  z-index: 999;
  filter: drop-shadow(0 0 6px #d1a65a);
}

.footer-link-modern:hover .hover-logo {
  opacity: 1;
  transform: translateX(0px);
}

/* keep content above background & gif */
.footer .footer-top,
.footer .copyright{ position: relative; z-index: 2; }

.footer-electrician {
  position: absolute;
  left: clamp(-40px, 0.5vw, 8px);
  bottom: -5px;
  pointer-events: none;
  z-index: 2;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 0 12px rgba(13,114,182,0.4)); /* subtle glow only */
  animation: footerFloat 4s ease-in-out infinite;
}

/* Floating animation (gentle, not blurry) */
@keyframes footerFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Hide on mobile */
@media (max-width: 768px) {
  .footer-electrician { display: none; }
}

/* optional: thoda extra breathing room so gif overlap na kare (large screens) */
@media (min-width: 1200px){
  .footer .footer-top{ padding-left: 20px; }
}


.footer .footer-top {
  padding-top: 50px;
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo{
  display:flex; justify-content:left; align-items:center;
  width:100%; margin-bottom:.5rem;
}

.fotlogo{
  display:flex; justify-content:center; align-items:center;
  width:min(220px, 90%); height:auto;
  padding:12px 16px;
  background:#fff; border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.fotlogo img{
  display:block;
  width:100%; height:auto;
  max-height:80px; object-fit:contain;
  /* no background on the img */
}

.footer .footer-about .logo span {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

/* === Social icons: show original brand colors (override) === */
.footer .social-links a{
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-right: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background:white;
  color: inherit;                  /* don't force grey on <a> */
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.footer .social-links a i{
  font-size: 18px; line-height: 1;
}

/* X (Twitter) */
.footer .social-links a:nth-child(1) i{ color:#000000; }
.footer .social-links a:nth-child(1):hover{
  background:#000000; border-color:#000000;
}
.footer .social-links a:nth-child(1):hover i{ color:#ffffff; }

/* Facebook */
.footer .social-links a:nth-child(2) i{ color:#1877F2; }
.footer .social-links a:nth-child(2):hover{
  background:#1877F2; border-color:#1877F2;
}
.footer .social-links a:nth-child(2):hover i{ color:#ffffff; }

/* Instagram */
.footer .social-links a:nth-child(3) i{ color:#E4405F; }
.footer .social-links a:nth-child(3):hover{
  /* simulated insta fill */
  background: radial-gradient(circle at 30% 110%, #F77737 0%, #F56040 30%, #E4405F 60%, #B73AC5 95%);
  border-color:#E4405F;
}
.footer .social-links a:nth-child(3):hover i{ color:#ffffff; }

/* LinkedIn */
.footer .social-links a:nth-child(4) i{ color:#0A66C2; }
.footer .social-links a:nth-child(4):hover{
  background:#0A66C2; border-color:#0A66C2;
}
.footer .social-links a:nth-child(4):hover i{ color:#ffffff; }


.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 {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.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 {
  /* color: color-mix(in srgb, var(--default-color), transparent 30%); */
  color:white;
  display: inline-block;
  line-height: 1;
}

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

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

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

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

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


/* col */
/* --- Newsletter styles (matches dark theme, no underlines) --- */
#footer .footer-newsletter a { text-decoration: none !important; }

#footer .footer-newsletter h4{ color:#eef7ff; margin-bottom:.6rem; }
#footer .footer-newsletter p{     color: #fff;
    font-size: 14px; }

#footer .nl-form{
  display:grid; grid-template-columns: 1fr auto; gap:10px;
}
/* #footer .nl-input{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  width:150px;
  color:#fff; padding:.7rem .85rem; border-radius:10px; outline:none;
} */
#footer .nl-input::placeholder{ color:#cfe1ffbf; }

#footer .nl-btn{
  border:none; border-radius:10px; padding:.7rem 1rem; font-weight:600; cursor:pointer;
  background: linear-gradient(135deg, #a5ca3e, #0d72b6); /* brand green->blue */
  color:#06121f; box-shadow:0 10px 26px rgba(13,114,182,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition: transform .15s ease, opacity .2s ease;
  white-space:nowrap;
}
#footer .nl-btn:hover{ transform: translateY(-1px); }

#footer .nl-legal a{ color:#cfe1ff; }
#footer .nl-legal a:hover{ color:#fff; }

#footer .quick-help .btn-outline-light{
  border-color: rgba(255,255,255,.35);
  color:#e9f2ff;
}
#footer .quick-help .btn-outline-light:hover{
  background:#a5ca3e; color:#0a0f1d;
}

/* responsive: stack inputs on small screens */
@media (max-width: 576px){
   .footer-top {
        padding-left:30px !important;;
    }
  #footer .nl-form{ grid-template-columns: 1fr; }

}


/* === Newsletter form responsive alignment === */
/* #footer .nl-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
} */

/* input field styling */
#footer .nl-input {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  padding: .7rem .85rem;
  border-radius: 10px;
  outline: none;
}

.mbfooter{
        font-size: 14px;
    color: #d1d1d1;
    letter-spacing: 0.5px;
}
/* responsive fix: stack vertically on mobile */
@media (max-width: 576px) {
  #footer .nl-form {
    flex-direction: column;
    align-items: stretch;
  }
  #footer .nl-input {
    /* width: 100%; */
    width:315px;
  }
  #footer .nl-form .pearl-btn {
    width: 100%;
    margin-top: 8px;
  }
   .copyright {
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 25px; /* creates space above bottom edge */
  }

  .copyright .mbfooter {
    margin: 0 auto;
    line-height: 1.6;
    font-size: 9px;
  }

  .footer-link-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .footer-link-modern img.hover-logo {
    width: 20px;
    height: auto;
    margin-top: 2px; /* keeps logo aligned */
  }


}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
/* #preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

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

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


:root{
  --brand:#0d72b6;      /* blue */
  --accent:#A7CF38;     /* green */
  --glow:#F2E205;       /* yellow */
  --bg1:#0C1A2E; --bg2:#000814;
}
.preloader{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  /* background:
    radial-gradient(900px 500px at 30% 40%, rgba(13,114,182,.22) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2)); */
    background:white !important;
  transition:opacity .35s ease, visibility .35s ease;
}
.preloader.is-hide{ opacity:0; visibility:hidden; }

.preloader__card{
  text-align:center; padding:22px 22px 18px; width:min(360px, 86vw);
  border-radius:18px; background:rgba(7,18,36,.35);
  border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(6px);
  box-shadow:0 18px 60px rgba(13,114,182,.15);
}

.plug-svg{ width:100%; height:auto; overflow:visible; }

#wire{ stroke:rgba(255,255,255,.25); stroke-width:3; }
.socket-body{ fill:#0e2346; stroke:#456; stroke-width:1; }
.socket-hole{ fill:#1a2f57; }

.plug-body{ fill:#12315f; stroke:#456; stroke-width:1; }
.plug-pin{ fill:#c9d6ff; }

.pulse{
  fill:var(--glow);
  filter:drop-shadow(0 0 8px rgba(242,226,5,.55)) drop-shadow(0 0 18px rgba(167,207,56,.25));
}

.spark circle{ fill:var(--glow); filter:drop-shadow(0 0 8px rgba(242,226,5,.7)); }

.preloader__text{
  margin:.35rem 0 0; color:#e6f1ff; font:600 .95rem/1.2 Poppins,system-ui,Segoe UI,Roboto,sans-serif;
  color:#0d72b6;
  text-align:center;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .pulse, .plug, .spark{ animation:none !important; }
}

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

.scroll-top i {
  font-size: 24px;
  color:#0d72b6;
  line-height: 0;
}

.scroll-top:hover {
  background-color:#a5ca3e;
  color:#0d72b6;}

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

/*--------------------------------------------------------------
# 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 {
  text-align: center;
  padding: 20px 0;
}

.page-title .breadcrumbs {
  margin-bottom: 1.5rem;
}

.page-title .breadcrumbs .breadcrumb {
  justify-content: center;
  margin: 0;
  padding: 0;
  background: none;
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item.active {
  color: var(--accent-color);
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item a:hover {
  color: var(--accent-color);
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item a i {
  font-size: 0.9rem;
  margin-right: 0.2rem;
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.page-title .title-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem 0;
}

.page-title .title-wrapper h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: var(--heading-color);
}

.page-title .title-wrapper p {
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .page-title .title-wrapper h1 {
    font-size: 2rem;
  }

  .page-title .title-wrapper p {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .page-title .title-wrapper h1 {
    font-size: 1.75rem;
  }
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: black;
  background-color: white;
  padding: 60px 0;
  scroll-margin-top: 90px;
  overflow: clip;
}

@media (max-width: 1199px) {

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

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

}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
color:black;
}

.section-title p {
  margin-bottom: 0;
color:black;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
/* .hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--background-color) 0%, color-mix(in srgb, var(--accent-color), transparent 95%) 100%);
  padding: 120px 0;
}

.hero .hero-content h1 {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .hero .hero-content h1 {
    font-size: 2.5rem;
  }
}

.hero .hero-content p {
  font-size: 1.2rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.hero .hero-buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.hero .hero-buttons .btn {
  padding: 15px 30px;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.hero .hero-buttons .btn.btn-primary {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 2px solid var(--accent-color);
}

.hero .hero-buttons .btn.btn-primary:hover {
  background: color-mix(in srgb, var(--accent-color), black 10%);
  border-color: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
}

.hero .hero-buttons .btn.btn-outline {
  background: transparent;
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
}

.hero .hero-buttons .btn.btn-outline:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

.hero .hero-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.hero .hero-stats .stat-item {
  text-align: center;
}

.hero .hero-stats .stat-item .stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1;
}

.hero .hero-stats .stat-item .stat-label {
  display: block;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .hero .hero-stats {
    justify-content: center;
    gap: 1.5rem;
  }
}

.hero .hero-visual {
  position: relative;
}

.hero .hero-visual .hero-image {
  position: relative;
  z-index: 2;
}

.hero .hero-visual .hero-image img {
  border-radius: 20px;
}

.hero .hero-bg-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

.hero .hero-bg-elements .bg-shape {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 90%), color-mix(in srgb, var(--accent-color), transparent 95%));
}

.hero .hero-bg-elements .bg-shape.shape-1 {
  width: 300px;
  height: 300px;
  top: -150px;
  right: -150px;
  animation: rotate 20s linear infinite;
}

.hero .hero-bg-elements .bg-shape.shape-2 {
  width: 200px;
  height: 200px;
  bottom: -100px;
  left: -100px;
  animation: rotate 15s linear infinite reverse;
}

.hero .hero-bg-elements .bg-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--accent-color), transparent 85%) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: moveParticles 30s linear infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes moveParticles {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(50px, 50px);
  }
}

@media (max-width: 992px) {
  .hero .hero-content {
    text-align: center;
    margin-bottom: 3rem;
  }
}

@media (max-width: 768px) {
  .hero .hero-buttons {
    justify-content: center;
  }

  .hero .hero-stats .stat-item .stat-number {
    font-size: 1.5rem;
  }
} */



/* .hero-section {
  position: relative;
  width: 100%;
  background: #000;
  color: #fff;
  overflow: hidden;
  padding: 100px 0 0;
}




.hero-section .hero-text h1 {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 20px;
  margin-top: -250px;
}



.hero-section .hero-text h1 span {
  color: #ffffff;
  display: block;
}
.hero-section .hero-text p {
  font-size: 16px;
  line-height: 1.7;
  color: #ddd;
  margin-bottom: 30px;
}


.hero-section .btn-book {
        background-color: transparent;

  background:  linear-gradient(111deg, #E4312A 0%, #E4312AA6 54%);;
      background-image: linear-gradient(111deg, #E4312A 0%, #E4312AA6 54%);

  color: #fff;
  font-weight: 600;
  padding: 12px 25px;
  border-radius: 5px 5px 5px 5px;
  text-decoration: none;
  transition: all 0.3s ease;


}
.hero-section .btn-book:hover {
  background: #b91e18;
  transform: translateY(-2px);
}


.hero-section .hero-image img {
  max-width: 100%;
  height: auto;
  position: relative;
  top: -70px;
  z-index: 3;
}


.uae-wave {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: -130px;
  z-index: 2;
}
.uae-wave img {
  width: 100%;
  display: block;
  position: relative;
  top: 0;
  z-index: 2;
}


@media (max-width: 991px) {
  .hero-section {
    text-align: center;
    padding: 80px 0 0;
  }

  .hero-section .hero-image {
    margin-top: 30px;
  }

  .uae-wave {
    margin-top: -60px;
  }
} */



/* Right media wrapper: container ke andar clip + responsive height */



/* ---------- Hero Section ---------- */
/* .hero-section{
  position: relative;
  width:100%;
     height:658px;
  background:#0d72b6;
  color:#fff;
  overflow:visible;
  padding: 100px 0 0;
     border-bottom: 1px solid black;
     margin-top:-15px;
} */
/* ---------- Hero Section (updated) ---------- */
.hero-section {
  position: relative;
  width: 100%;
     height: 659px;
  color: #fff;
  overflow: visible;
  padding: 100px 0 0;
  margin-top: -15px;
  background-image: url('assets/img/areas/dubai.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* blue transparent overlay (opacity effect) */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(13, 114, 182, 0.6); /* #0d72b6 with 60% opacity */
  z-index: 1;
}

/* container above overlay */
.hero-section .container {
  position: relative;
  z-index: 2;
}

/* RIGHT circular gradient glow behind person */
.hero-section .hero-text{
    margin-top: 180px;

}
/* Headings / text */
.hero-section .hero-text h1{
  font-size:3rem;
  font-weight:800;
  line-height:1.3;
  margin-bottom:20px;
  margin-top:-250px;
}
.hero-section .hero-text p{
  font-size:16px; line-height:1.7; color:white; margin-bottom:30px;
}
.hero-section .btn-book{
  background-color: transparent;

  background:  linear-gradient(111deg, #E4312A 0%, #E4312AA6 54%);;
      background-image: linear-gradient(111deg, #E4312A 0%, #E4312AA6 54%);  color:#fff; font-weight:600; padding:12px 25px;
  border-radius:6px; text-decoration:none; transition:.3s;
}


.hero-section .hero-image img{
  max-width:100%; height:auto;
      vertical-align: middle;
  position:relative;
  /* top:-70px;                */
  z-index:2;
}


:root{
  --wave-lift: clamp(90px, 14vw, 260px);
}

.uae-wave{
  position: relative;
  width:100%;
  overflow:visible;
  margin-top: calc(-1 * var(--wave-lift));
  z-index:2;
}

.uae-wave img{
  width: 100%;
  max-width:none;
  display:block;
position:relative;
bottom:-56px;}

.uae-wave::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * (var(--wave-lift) - 20px));
  height: 100px;
  z-index: 1;
  pointer-events: none;
}


.hero .hero-bg-elements,
.hero-section .hero-bg-elements{
  z-index:1;
}

@media (max-width:991px){
    .hero-section .hero-text{
    margin-top: 0px !important;

}
  .hero-section .hero-text h1{
  font-size:3rem;
  font-weight:800;
  line-height:1.3;
  margin-bottom:20px;
  margin-top:-50px; /* (tumhari current offset) */
}
  .hero-section{ text-align:center;
    padding:80px 0 0;
  width:100%;
    height:auto;  /* auto height for mobile */
  }
  .hero-section .hero-image{
      max-width:100%; height:auto;
  position:relative;
  top:50px;                /* tumhari current offset */
  z-index:2;
   }
   .hero-section .hero-image img{
  max-width:100%; height:auto;
      vertical-align: middle;
  position:relative;
  top:-23px;
  z-index:2;
}


.hero-section .btn-book{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  margin: 12px auto clamp(35px, 6vw, 60px);  /* responsive bottom gap */
  z-index: 3;
  position: relative;
  border-radius: 6px;
  background: linear-gradient(111deg, #E4312A 0%, #E4312AA6 54%);
}

  /* mobile par thoda kam lift */
  :root{ --wave-lift: clamp(60px, 18vw, 160px); }

}


/* hero section */
/* About Section */
/* ===== About: Right image wrapper (clean, aligned end) ===== */
.about .media-wrap{
  position: relative;
  border-radius: 0;
  overflow: hidden;           /* clip neatly */
  margin-left: auto;          /* push to the right */
  margin-right: 0;
  background: transparent;
  width: 100%;
}

/* Image full fit & crop */
.about .media-wrap .media-img{
  width:650px;                /* <-- FIX: no fixed px */
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center right; /* keep right edge emphasized */
}

/* Mobile / Tablet */

/* ✅ Mobile/Tablet ONLY — desktop untouched */
@media (max-width: 991.98px){
  /* image column ka right gutter hatao taake edge clean ho */
  .about .image-col{ padding-right: 0; }

  .about .media-wrap{
    margin: 0;
    width: 100%;
    height: 340px;
    border-radius: 12px;
    overflow: hidden;
  }

  .about .media-wrap .media-img{
    width: 100%;          /* override desktop 650px on mobile only */
    height: 100%;
    object-fit: cover;    /* clean crop */
    object-position: center;  /* mobile pe center best */
  }
}

/* Desktop */


  :root{

  --accent-color:#6c63ff;
  --default-color:#0b0f14;
  --surface-color:#0f1220;
  --contrast-color:#0b0f14;
}

.about .content .subtitle,
.about .content .badge-soft{
  display:inline-block;
  color:var(--accent-color);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:color-mix(in srgb, var(--accent-color), white 85%);
  color:color-mix(in srgb, var(--accent-color), black 30%);
  padding:.45rem .8rem;
  border-radius:999px;
  margin-bottom:1rem;
}
/* about */
/*pearl button */
/* ====== Brand vars ====== */
:root{
  --brand:#3D2CF3;      /* main purple */
  --brand-2:#6C63FF;    /* tint */
  --on-brand:#fff;
  --out-a:  .20;        /* outer alpha */
  --out-a2: .55;        /* rim alpha */
  --out-blur: 1.6rem;   /* blur */
  --out-y:    1.1rem;   /* vertical offset */

  --in-w1:.24;          /* top white highlight */
  --in-k :.52;          /* inner dark rim */
  --in-w2:.40;          /* bottom white glow */

}

/* ====== Shell ====== */
.pearl-btn{
  --radius:100px;
  display:inline-block; position:relative; border:0; outline:0; cursor:pointer;
  border-radius:var(--radius); color:var(--on-brand); text-decoration:none;

  /* background:
    radial-gradient(90% 140% at 10% 0%,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.06) 30%,
      rgba(0,0,0,.10) 31%,
      rgba(0,0,0,.22) 100%),
    linear-gradient(135deg, var(--brand), var(--brand-2)); */
    background:#a5ca3e;

  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;

  /* NORMAL (balanced) shadow — no heavy glow on content */
  box-shadow:
    inset 0 .25rem .75rem rgba(255,255,255,var(--in-w1)),
    inset 0 -.08rem .28rem rgba(0,0,0,var(--in-k)),
    inset 0 -.32rem .8rem  rgba(255,255,255,var(--in-w2)),
    0 var(--out-y) var(--out-blur) rgba(0,0,0,var(--out-a)),
    0 .75rem .9rem -.5rem   rgba(0,0,0,var(--out-a2));
}

/* ====== Inner content (clear & readable) ====== */
.pearl-btn .wrap{
  position:relative; z-index:2;               /* text above overlays */
  overflow:hidden; border-radius:inherit;
  padding:12px 24px; font-weight:700; font-size:18px;
  color:rgba(255,255,255,.96);
  text-shadow:0 1px 0 rgba(0,0,0,.18);        /* subtle legibility */
}
.pearl-btn .wrap p{
  display:flex; align-items:center; gap:12px; margin:0;
  transform:translateY(0); transition:transform .2s ease;
  mask-image:none;                              /* ✅ stripe removed */
}

/* star swap on hover (optional) */
.pearl-btn .wrap p span:nth-child(2){display:none;}
.pearl-btn:hover .wrap p span:nth-child(1){display:none;}
.pearl-btn:hover .wrap p span:nth-child(2){display:inline-block;}

/* glossy strips (softened so they don't darken text) */
.pearl-btn .wrap::before,
.pearl-btn .wrap::after{content:"";position:absolute;transition:.3s ease;z-index:1;}
.pearl-btn .wrap::before{
  left:-15%; right:-15%; bottom:25%; top:-100%;
  border-radius:50%; background:rgba(255,255,255,.08); /* softer */
}
.pearl-btn .wrap::after{
  left:6%; right:6%; top:12%; bottom:40%; border-radius:22px 22px 0 0;
  box-shadow:inset 0 10px 8px -10px rgba(255,255,255,.60); /* softer */
  background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 50%);
}

/* Hover */
.pearl-btn:hover{
  filter:saturate(1.05);
  box-shadow:
    inset 0 .25rem .75rem rgba(255,255,255,calc(var(--in-w1)+.06)),
    inset 0 -.08rem .30rem rgba(0,0,0,       calc(var(--in-k) +.06)),
    inset 0 -.32rem .9rem  rgba(255,255,255,calc(var(--in-w2)+.08)),
    0 var(--out-y) var(--out-blur) rgba(0,0,0,calc(var(--out-a)+.05)),
    0 .75rem .9rem -.5rem   rgba(0,0,0,       calc(var(--out-a2)+.05));
}
.pearl-btn:hover .wrap::before{transform:translateY(-5%);}
.pearl-btn:hover .wrap::after {opacity:.4; transform:translateY(5%);}

/* Active (click) */
.pearl-btn:active{ transform:translateY(2px); }

/* ====== Smooth moving shine (doesn't darken text) ====== */
.pearl-btn .shine{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  width:65%; height:100%; left:-70%; top:0; transform:skewX(-25deg);
  /* background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); */
  animation:shineMove 5s ease-in-out infinite; opacity:.7; z-index:1; /* under text */
}
@keyframes shineMove{ 0%{left:-70%;} 60%{left:125%;} 100%{left:125%;} }

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .pearl-btn, .pearl-btn *{ transition:none !important; animation:none !important; }
}

/* image btnnn  pop*/
/* button overflow visible & face layer setup from your current code */


/* default: desktop / large screens */
.pearl-btn.pop-under.pop-pin{
  --pop-size: 80px;   /* image width/height */
  --pop-rise: 60px;   /* kitna upar aaye */
  --pop-inset: 5px;   /* rim ke niche kitna chhupa rahe */
  --pin-x: -10px;     /* right edge se offset (negative = aur right) */
  --pin-y: -2px;      /* top se offset */
}

/* .pearl-btn{ overflow: visible; } */
.pearl-btn{ position:relative; overflow:visible; }
/* HOVER/FIELD FOCUS trigger (desktop + keyboard) */
.pearl-btn.pop-under.pop-pin:hover .btn-pop,
.pearl-btn.pop-under.pop-pin:focus-within .btn-pop {
  transform: translate3d(0, calc(-1 * var(--pop-rise)), 0) scale(1);
  opacity: 1;
}

/* start state stays hidden (you already have this) */
/* .pop-under.pop-pin .btn-pop { ... } */

/* optional: smoother in + slower out */
.pop-under.pop-pin .btn-pop{
  transition:
    transform 260ms cubic-bezier(.2,.9,.2,1),
    opacity   220ms ease;
}
.pearl-btn.pop-under.pop-pin:hover .btn-pop{
  transition:
    transform 260ms cubic-bezier(.2,.9,.2,1),
    opacity   160ms ease-in;
}
.pearl-btn.pop-under.pop-pin:not(:hover) .btn-pop{
  transition:
    transform 320ms ease,
    opacity   260ms ease;
}
/* --- POP UNDER (already used) --- */
.pop-under{
  --pop-size:72px;   /* bigger, clearer */
  --pop-rise:44px;   /* how high it comes out */
  --pop-inset:26px;  /* how deep it hides under rim */
}

/* --- PINNED ORIGIN: exact top-right spot --- */
.pop-pin{
  --pin-x:12px;  /* 👉 right edge se kitna andar (increase = left ki taraf) */
  --pin-y:-2px;  /* 👉 top se vertical offset (negative = thoda upar) */
}

/* start: hidden behind face, pinned to the chosen spot */
.pop-under.pop-pin .btn-pop{
  position:absolute;
  right: var(--pin-x);
  top:   var(--pin-y);
  width: var(--pop-size);
  height:var(--pop-size);

  transform: translate3d(0, var(--pop-inset), 0) scale(.74);
  opacity: 0;
  z-index:0; pointer-events:none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.24));
  transition:
    transform 260ms cubic-bezier(.2,.9,.2,1),
    opacity   220ms ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-origin: 100% 0%; /* top-right corner */
}

/* clicked/up state — smooth, no glitch */
.pop-under.is-up .btn-pop{
  transform: translate3d(0, calc(-1 * var(--pop-rise)), 0) scale(1);
  opacity: 1;
}

/* ≥ 992px par thoda adjust (tablets landscape / small laptops) */
@media (max-width: 992px){
  .pearl-btn.pop-under.pop-pin{
    --pop-size: 72px;
    --pop-rise: 52px;
    --pin-x: -8px;
    --pin-y: -2px;
  }
  .pearl-btn .wrap{ font-size: 17px; padding: 11px 22px; }
}

/* Phones (≤ 576px) */
@media (max-width: 576px){
  .pearl-btn.pop-under.pop-pin{
    --pop-size: 60px;
    --pop-rise: 44px;
    --pop-inset: 8px;     /* thoda aur andar se nikle */
    --pin-x: -6px;        /* right ke aur kareeb */
    --pin-y: -2px;
  }
  .pearl-btn .wrap{ font-size: 16px; padding: 10px 18px; }
  .pearl-btn .shine{ animation-duration: 6.5s; } /* mobile pe softer */
}

/* Small phones (≤ 360px) */
@media (max-width: 360px){
  .pearl-btn.pop-under.pop-pin{
    --pop-size: 54px;
    --pop-rise: 38px;
    --pin-x: -4px;
    --pin-y: -1px;
  }
  .pearl-btn .wrap{ font-size: 15px; padding: 9px 16px; }
}
/* full website button here...... */


/* image btnnnn pop */
/* pearl button */
.about .content h2{
  font-size:2.4rem;
  font-weight:800;
  line-height:1.12;
  margin-bottom:.75rem;
  color:#0b0f14;
}
.about .content h2 .hl{ color:var(--accent-color); }

.about .content p.lead{
  color:color-mix(in srgb, #000, transparent 35%);
  margin-bottom:1.3rem;
}

.about .content .features-list{
  list-style:none; padding:0; margin:0 0 1.8rem 0;
}
.about .content .features-list li{
  display:flex; align-items:flex-start; gap:.65rem;
  padding:.55rem 0; font-weight:600;
  color:color-mix(in srgb, #000, transparent 20%);
}
.about .content .features-list li i{
  font-size:1.15rem; line-height:1.4;
  color:var(--accent-color);
}

/* buttons */
.about .content .btn.pill{ border-radius:999px;
     padding:.8rem 1.4rem;
    border:3px solid #a5ca3e !important;

    }
    .about .content .btn.pill:hover{
background-color:#0d72b6 !important;

    }
.about .content .btn-primary{
  background:var(--accent-color); border-color:var(--accent-color);
  color:#fff; box-shadow:0 10px 24px color-mix(in srgb, var(--accent-color), transparent 70%);
  transition:transform .25s ease, filter .25s ease;
}
.about .content .btn-primary:hover{ transform:translateY(-2px); filter:brightness(.95);
}

/* ====== image composition ====== */
.about .image-composition{ position:relative; padding:2rem; isolation:isolate; }
@media (max-width: 768px){ .about .image-composition{ padding:1rem; } }

/* soft halo behind images */
.about .image-composition::before{
  content:""; position:absolute; inset:8% 6% 10% 6%;
  background: radial-gradient(60% 50% at 20% 20%, color-mix(in srgb, var(--accent-color), transparent 80%), transparent 60%),
              radial-gradient(70% 60% at 95% 70%, rgba(12,48,39,.12), transparent 60%);
  border-radius:16px; z-index:1; filter:blur(10px);
}

.about .image-composition .image-main{ position:relative; z-index:2; }
.about .image-composition .image-main img{
  border-radius:14px;
  border:4px solid color-mix(in srgb, var(--default-color), transparent 85%);
  box-shadow:0 20px 50px rgba(0,0,0,.18);
}

.about .image-composition .image-secondary{
  position:absolute; bottom:-12px; left:-8px; width:44%; z-index:3;
}
.about .image-composition .image-secondary img{
  border-radius:14px;
  border:4px solid color-mix(in srgb, var(--default-color), transparent 82%);
  box-shadow:0 16px 36px rgba(0,0,0,.18);
}

/* glass stats */
.about .image-composition .stats-card{
  position:absolute; top:-10px; right:-10px; z-index:4;
  display:flex; gap:1.2rem; align-items:stretch;
  padding:1rem 1.1rem;
  /* background:rgba(15,18,32,.6); */
      background: #0d72b6;
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
  border-radius:14px;
  box-shadow:0 12px 26px rgba(0,0,0,.25);
}
@media (max-width: 576px){
  .about .image-composition .stats-card{ inset:auto 0 0 auto; flex-direction:column; gap:.6rem; }
}
.about .image-composition .stats-card .stats-item{ text-align:center; min-width:95px; }
.about .image-composition .stats-card .stats-item h3{
  font-size:1.9rem; font-weight:800; margin:0; line-height:1; color:#fff;
}
.about .image-composition .stats-card .stats-item p{
  margin:.35rem 0 0; font-size:.75rem; color:rgba(255,255,255,.8); font-weight:600;
}

/* fix from your CSS bug */
.about .content p{ color:color-mix(in srgb, #ffffffff, transparent 5%);
}

/* animation up and down */
/* gentle vertical float */
  @keyframes floatY {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-12px); }
  }
  .float-y { animation: floatY 7s ease-in-out infinite; will-change: transform; }
  .float-fast { animation-duration: 5.5s; }
  .float-slow { animation-duration: 9s; }
  @media (prefers-reduced-motion: reduce){
    .float-y { animation: none !important; }
  }




  /* about section mb rresponsive */
  /* =========================
   ABOUT – RESPONSIVE ONLY
   (kept your desktop styles)
   ========================= */
  #about.section {
    padding-top: 170px;
    padding-bottom: 72px; }

/* ---------- Large tablets & small laptops (≤1200px) ---------- */
@media (max-width: 1200px){
  #about.section { padding-top: 140px;
    /* padding-bottom: 72px;  */
}
  .about .image-composition { padding: 1.5rem; }
  .about .image-composition .stats-card { right: -6px; top: -6px; }
  .about .content h2 { font-size: 2.2rem; }
}

/* ---------- Tablets (≤992px) ---------- */
@media (max-width: 992px){
  #about.section { padding-top: 120px; padding-bottom: 64px; }

  /* grid stacks automatically with Bootstrap; just tighten spacing */
  .about .content { margin-bottom: 20px; }
  .about .content h2 { font-size: 2.05rem; line-height: 1.15; }
  .about .content p.lead { margin-bottom: 1.05rem; }
  .about .content .features-list li { padding: .45rem 0; }

  /* image block breathing room */
  .about .image-composition { padding: 1.25rem; }
  .about .image-composition .image-secondary { width: 48%; bottom: -10px; left: -6px; }
  .about .image-composition::before { inset: 10% 8% 12% 8%; }

  /* stats card: shrink a bit */
  .about .image-composition .stats-card {
    right: 0; top: 0;
    padding: .85rem .95rem;
    gap: .9rem;
  }
  .about .image-composition .stats-card .stats-item { min-width: 88px; }
  .about .image-composition .stats-card .stats-item h3 { font-size: 1.7rem; }

  /* pearl button: keep pop image in bounds */
  .pearl-btn.pop-under.pop-pin{
    --pop-size: 72px;
    --pop-rise: 48px;
    --pin-x: -6px;
    --pin-y: -2px;
  }
}

/* ---------- Mobiles (≤768px) ---------- */
@media (max-width: 768px){
  #about.section { padding-top: 96px;padding-bottom: 25px;
     }
/* remove extra “gy-5” feel by tightening local spacing */
  .about .content { margin-bottom: 14px; }
  .about .content h1 { font-size: 1.9rem; margin-bottom: .6rem; }
  .about .content .features-list { margin-bottom: 1.2rem; }
  .about .content .features-list li { gap: .55rem; }
  .about .content .btn.pill { padding: .5rem 1rem; }

  /* images full width + closer overlay */
  .about .image-composition { padding: 1rem; }
  .about .image-composition .image-secondary { width: 52%; bottom: -8px; left: -4px; }
  .about .image-composition::before { inset: 8% 6% 12% 6%; }

  /* stats card: move to bottom-right for readability */
  .about .image-composition .stats-card{
    right: 8px; top: auto; bottom: 8px;
    padding: .8rem .9rem;
  }
  .about .image-composition .stats-card .stats-item { min-width: 82px; }
  .about .image-composition .stats-card .stats-item h3 { font-size: 1.55rem; }
  .about .image-composition .stats-card .stats-item p { font-size: .72rem; }

  /* prevent pop image overflow on small screens */
  .pearl-btn.pop-under.pop-pin{
    --pop-size: 60px;
    --pop-rise: 44px;
    --pop-inset: 10px;
    --pin-x: -6px;
    --pin-y: -2px;
  }
  .pearl-btn .wrap{ font-size: 16px; padding: 10px 18px; }
  .pearl-btn .shine{ animation-duration: 6.5s; }
}

/* ---------- Small phones (≤576px) ---------- */
@media (max-width: 576px){
    section{
        padding-top:-220px;
    }
  /* #about.section { padding-top: 84px; padding-bottom: 48px; } */

  .about .content h1 { font-size: 1.75rem;text-align:center;margin-bottom:20px; margin-top: 40px;
 }
  .about .content p.lead { font-size: .98rem; }
  .about .content .features-list li i { font-size: 1.05rem; }

  .about .image-composition { padding: .8rem; }
  .about .image-composition .image-secondary { width: 56%; bottom: -6px; left: -2px; }

  .about .image-composition .stats-card{
    inset: auto 6px 6px auto;
    flex-direction: column;
    gap: .55rem;
    padding: .7rem .8rem;
  }
  .about .image-composition .stats-card .stats-item { min-width: 78px; }
  .about .image-composition .stats-card .stats-item h3 { font-size: 1.45rem; }
  .about .image-composition .stats-card .stats-item p { font-size: .7rem; }

  .pearl-btn.pop-under.pop-pin{
    --pop-size: 54px;
    --pop-rise: 38px;
    --pop-inset: 8px;
    --pin-x: -4px;
    --pin-y: -1px;
  }
  .pearl-btn .wrap{ font-size: 15px;
    /* padding: 9px 16px; */
 }
}

/* ---------- Ultra small (≤360px) ---------- */
@media (max-width: 360px){
  #about.section { padding-top: 78px; padding-bottom: 42px; }
  .about .content h2 { font-size: 1.62rem; }
  .about .image-composition .stats-card .stats-item { min-width: 72px; }
}

/* ✅ Mobile: keep both CTA buttons on one row */
@media (max-width: 576px){
  .about .content .d-flex.gap-3.flex-wrap{
    flex-wrap: nowrap;          /* no line break */
    gap: 10px;                   /* same look, tighter gap */
    align-items: stretch;
  }
  .about .content .d-flex.gap-3.flex-wrap > a.pearl-btn,
  .about .content .d-flex.gap-3.flex-wrap > a.btn.pill{
    flex: 1 1 0;                 /* share width evenly */
    min-width: 0;                /* allow shrink */
    white-space: nowrap;         /* no text wrap */

  }
  /* ensure phone button centers its content like the pearl button */
  .about .content .d-flex.gap-3.flex-wrap > a.btn.pill{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* keep pearl text centered within its own wrapper */
  .about .content .d-flex.gap-3.flex-wrap > a.pearl-btn .wrap{
    width: 100%;
    text-align: center;
  }
  .about .content p {
        font-size: 12px;
  }
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
/* ================= Services (Floating Card) ================= */
:root{
  --svc-navy:#0b2f4a;
  --svc-navy-900:#082338;
  --svc-white:#ffffff;
  --svc-text:#0e1a2b;
  --svc-muted:#627086;
  --svc-badge:#0d72b6;
  --svc-arrow:#0d72b6;
  --svc-card-w: 360px;   /* card width */
  --svc-card-h: 260px;   /* card height */
  --svc-photo-h: 520px;  /* image height */
}

/* === Background Overlay for better text contrast === */
/* services */
/*--------------------------------------------------------------
# Services Section (Equal Headings & Paragraphs)
--------------------------------------------------------------*/
:root{
  --svc-navy:#0d72b6;
  --svc-navy-900:#0d72b6;
  --svc-white:#ffffff;
  --svc-text:#0e1a2b;
  --svc-muted:#627086;
  --svc-badge:#0d72b6;
  --svc-arrow:#0d72b6;
  --svc-card-w: 360px;
  --svc-card-h: 260px;
  --svc-photo-h: 520px;
}

.servicecontent{
  text-align:justify;
  font-size:18px;
}
@media (max-width: 576px){
.servicecontent{
  text-align:center;
}
.mbservices{
    margin-top:0px!important;
}
.mobilenews{
    margin-top:20px !important;
}
}

.section-title.news{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: clamp(16px, 3vw, 28px) clamp(16px, 3vw, 28px);
  margin: 0 auto 28px auto;
  max-width: 1400px;
  text-align: center;
  border:1px solid red;
}

.section-title.news > *{
  position: relative;
  z-index: 1;
  color: #fff;
}
.section-title.news .glow{
  position:absolute; inset:auto 10% 0 10%;
  height: 40px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(255,255,255,.18), transparent 60%);
  z-index:1; pointer-events:none;
}

@media (max-width: 576px){
  .section-title.news{ border-radius:14px; }
  .section-title.news::after{ padding: 1.5px; }
}

.svc-section{ background:#f7f9fc; position:relative; }
.svc-section::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,153,255,.25), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(255,0,204,.25), transparent 60%),
    linear-gradient(180deg, rgba(5,10,30,.7) 0%, rgba(5,10,20,.95) 100%);
  mix-blend-mode: screen; z-index:1; pointer-events:none;
}
.svc-section > .container{ position:relative; z-index:2; }

/* ✅ Grid removed */
.svc-container{
  display: flex;
  flex-wrap: wrap;
}

.svc-item{ position:relative;
    border-radius:8px;
    overflow:hidden;
    min-height:var(--svc-photo-h);
     border:2px solid blue;
       margin-bottom: 28px;

 }
.svc-photo{
  height:var(--svc-photo-h);
  background-size:cover; background-position:center;
  border-radius:8px; transition:transform .4s ease;
}
.svc-item:hover .svc-photo{ transform: scale(1.035); }

.svc-card{
  position:absolute; left:36px; bottom:28px;
  width:var(--svc-card-w); min-height:var(--svc-card-h);
  background:var(--svc-white); border-radius:6px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  display:grid; gap:16px; align-items:start;
  grid-template-columns: 72px 1fr 46px;
  padding:22px;
  box-sizing:border-box;
  transition:transform .3s ease, background .35s ease;
  border:2px dashed #a5ca3e;
}
.svc-item:hover .svc-card{ transform: translateY(-6px); }

.svc-badge{
  width:72px; height:72px; border-radius:4px;
  background:var(--svc-badge); color:#fff;
  display:grid; place-items:center;
  align-self:start;
}
.svc-badge i{ font-size:34px; line-height:1; }

.svc-content{
  display:grid; align-content:start;
  gap:8px;
  padding-right:8px;
  text-align:left;
}
.svc-content h6{
  margin: 2px 0 0 0;
  font-size: 16.5px;
  line-height: 1.28;
  color: #0a1b2e;
  font-weight: 900;
  font-variation-settings: "wght" 900;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.28em * 2);
  text-wrap: balance;
}
.svc-content p{
  margin:0; font-size:13px; line-height:1.65; color:var(--svc-muted);
  text-wrap:pretty; hyphens:auto;
  --svc-lines: 4;
  display:-webkit-box; -webkit-line-clamp: var(--svc-lines);
  -webkit-box-orient: vertical; overflow:hidden;
}
.svc-card > .svc-arrow{
  position: relative !important;
  top:150px;
  right:30px;
  transform:none !important;
  width:46px; height:46px; border-radius:6px;
  margin-left:auto;
  display:grid; place-items:center;
  background:#0d72b6; color:#fff;
  box-shadow:0 6px 12px rgba(0,0,0,.25);
  transition: transform .2s ease, background .2s ease;
}
.svc-card > .svc-arrow:hover{ transform: translateY(-2px) !important;background-color:#a5ca3e !important; }

.svc-item:hover .svc-card{ background: var(--svc-navy); }
.svc-item:hover .svc-content h6{
  color: #fff;
  text-shadow: 0 0 1px rgba(0,0,0,.15);
}
.svc-item:hover .svc-content p{ color:#d6e2ef; }
.svc-item:hover .svc-badge{ background:#a5ca3e; }
.svc-item:hover .svc-arrow{ background:#a5ca3e !important; color:#fff; }

@media (max-width: 991.98px){
  :root{ --svc-card-w: 330px; --svc-card-h: 240px; --svc-photo-h: 480px; }
  .svc-card{ left:24px; padding:20px; grid-template-columns:64px 1fr 46px; }
}

@media (max-width: 576px){
  .svc-section{ padding: 48px 0; }
  .svc-container{
    padding: 0 10px;
  }
  .svc-item{
    border-radius: 12px;
    min-height: auto;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
    overflow: hidden;
  }

  .svc-photo{
    height: 260px;
    border-radius: 12px 12px 0 0;
  }
  .svc-card{
    position: relative !important;
    left: 0 !important; bottom: 0 !important; width: 100%;
    min-height: auto;
    border-radius: 0 0 12px 12px;
    box-shadow: none;
    padding: 16px 16px 18px 16px;
    grid-template-columns: 56px 1fr 36px;
    align-items: start;
    gap: 12px;
    background: var(--svc-white);
  }
  .svc-badge{
    width: 56px;
    height: 56px;
    border-radius: 10px;
  }
  .svc-badge i{ font-size: 26px; }
  .svc-content{
    padding-right: 6px;
    display: grid;
    align-content: start;
    gap: 6px;
    text-align: left;
  }
  .svc-content h6{
    margin: 0;
    font-size: 15.5px;
    line-height: 1.35;
    font-weight: 800;
    color: var(--svc-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.35em * 3);
  }
  .svc-content p{
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--svc-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .svc-card > .svc-arrow{
    position: static !important;
    width: 36px; height: 36px;
    border-radius: 8px;
    margin-left: auto;
    display: grid; place-items: center;
    background: var(--svc-arrow);
    color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
    transform: none !important;
  }
  .svc-card > .svc-arrow i{ font-size: 18px; }

  .svc-item:active .svc-card,
  .svc-item:hover .svc-card{ background: var(--svc-navy);}
  .svc-item:active .svc-content h6,
  .svc-item:hover  .svc-content h6{ color:#fff; }
  .svc-item:active .svc-content p,
  .svc-item:hover  .svc-content p{ color:#d6e2ef; }
  .svc-item:active .svc-badge,
  .svc-item:hover  .svc-badge{ background:#a5ca3e; }
}

/* processs */
:root{
  --navy-900:#0b1a2f; --navy-800:#0e2542;
  --text:#f7fafc; --muted:#cbd5e1;
  --g1-from:#0d72b6; --g1-to:#0d72b6;
  --g2-from:#a5ca3e; --g2-to:#a5ca3e;
  --g3-from:#0d72b6; --g3-to:#0d72b6;
  --g4-from:#a5ca3e; --g4-to:#a5ca3e;
    --g5-from:#0d72b6; --g5-to:#0d72b6;

}

/* 🔹 Full background fluid */
.process-section {
background:white;
  color: black;
}

/* Inner content */
.process__head h3 {
  font-size: clamp(28px,3vw,40px);
  color:black;
}
.process__head p {
  color: var(--muted);
    color:black;

}
/* === Mobile: number above icon, sequence auto === */
@media (max-width: 576px){

  /* left big number hide */
  .proc-item::before{ display:none; }

  /* icon container relative so badge place ho sake */
  .proc-ico{
    position: relative;
    width:44px; height:44px; border-radius:10px;
    flex:0 0 44px;
  }

  /* number badge – icon ke bilkul upar center */
  .proc-ico::after{
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: 0; left: 50%;
    transform: translate(-50%, -70%);   /* upar carry karo */
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
    padding: 4px 8px;
    background: #fff;                   /* clean white chip */
    color: var(--from);                  /* current card color */
    border: 2px solid currentColor;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
  }

  /* thoda compact spacing */
  .proc-item{ gap:12px; padding:14px; }
  .proc-copy h3{ font-size:16px; }
  .proc-copy p{ font-size:13px; }

.mbwhy{
    margin-bottom:-123px;
}
}

.proc-list {
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: relative;
}
@media (min-width:760px){
  .proc-list::before {
    content:"";
    position:absolute; inset:0;
    width:1px; margin-inline:auto;
    background:linear-gradient(to bottom,transparent,rgba(255,255,255,.08) 12%,rgba(255,255,255,.08) 88%,transparent);
  }
}

/* Items */
.proc-item {
  --from:#22c55e; --to:#16a34a;
  counter-increment: step;
  position: relative;
  display: flex; gap: 16px; align-items: center;
  padding: 14px 18px;
  width: min(780px,96%);
  /* background: rgba(255,255,255,.04); */
  /* border: 1px solid rgba(255,255,255,.16); */
  border-radius: 18px;
  /* box-shadow: 0 10px 28px rgba(0,0,0,.35); */
  overflow: visible;
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
@media(min-width:760px){
  .proc-item[data-side="left"]{margin-right:auto;}
  .proc-item[data-side="right"]{margin-left:auto;}
}

/* Step number */
.proc-item::before {
  content: counter(step, decimal-leading-zero);
  font-weight: 800;
  font-size: clamp(40px,6vw,64px);
  /* opacity: .15; */
  margin-left: 20px;
  color:white;
}

/* Shadow */
.proc-item::after {
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:-10px;
  height:18px; border-radius:12px;
  /* box-shadow: 0 10px 22px rgba(0,0,0,.45); */
  opacity:.65; z-index:-2;
}

/* Gradient plate */
.proc-plate {
  position:absolute; inset:0; z-index:-1;
  border-radius:18px;
  background: linear-gradient(90deg,var(--from),var(--to));
  clip-path: polygon(0% 0%,calc(100% - 60px) 0%,100% 50%,calc(100% - 60px) 100%,0% 100%,12px 50%);
}
.proc-item[data-side="right"] .proc-plate {
  background: linear-gradient(270deg,var(--from),var(--to));
  clip-path: polygon(60px 0%,100% 0%,calc(100% - 12px) 50%,100% 100%,60px 100%,0% 50%);
}

/* Icon */
.proc-ico {
  width:60px;height:60px;border-radius:12px;
  display:grid;place-items:center;
  color:white;
  /* background: linear-gradient(135deg,var(--from),var(--to)); */
  /* box-shadow: inset 0 0 0 2px rgba(255,255,255,.18),0 10px 22px rgba(0,0,0,.35); */
  /* background:red; */
  font-size:24px;
}

/* Text */
.proc-copy h3 {font-size:clamp(18px,2.2vw,22px);}
.proc-copy p {
  /* color:var(--muted); */
  color:white;
}

/* Animation */
.proc-item.show {opacity:1;transform:none;}
.proc-item[data-side="left"].show {animation: slideL .7s ease both;}
.proc-item[data-side="right"].show {animation: slideR .7s ease both;}
@keyframes slideL{from{transform:translate(-14px,14px);opacity:.2}to{transform:none;opacity:1}}
@keyframes slideR{from{transform:translate(14px,14px);opacity:.2}to{transform:none;opacity:1}}







/* mobile responsive process section */
/* ===== MOBILE/TABLET RESPONSIVE ONLY ===== */
@media (max-width: 992px) {

  .process-section{
    min-height:auto;
    /* padding: 60px 0; */
    /* background:
      radial-gradient(90% 60% at 20% 50%, rgba(223,176,21,.65) 0%,
        rgba(38,110,209,.45) 40%, rgba(11,26,47,0) 70%),
      url('assets/img/about/chooseusone.jpg') right bottom / 50% auto no-repeat,
      linear-gradient(180deg,#0b1a2f,#3f6e4d); */
    background-attachment: scroll;
  }

  .process__head h3{ font-size: clamp(24px,5vw,32px); }
  .process__head p{ font-size: 14px; opacity:.9; }

  .proc-list{ gap:18px; }
  .proc-item{
    width: 100%;
    padding: 14px 14px 14px 12px;
    border-radius: 14px;
  }

  /* Number size thoda chhota + spacing tight */
  .proc-item::before{
    font-size: clamp(28px,8vw,40px);
    margin-left: 8px;
    opacity:.9;
  }

  .proc-ico{
    width:48px; height:48px; font-size:20px; border-radius:10px;
    flex:0 0 48px;
  }

  .proc-copy h3{ font-size: clamp(16px,4.5vw,20px); }
  .proc-copy p{ font-size: 14px; line-height:1.5; }

  /* central timeline line already off <760px, yahan tablet ke liye bhi off */
  .proc-list::before{ display:none; }
}

/* ===== SMALL MOBILES (<= 576px) ===== */
@media (max-width: 576px) {
  .process-section{
    /* padding: 44px 0; */
    /* image aur chhoti + right se thodi door */
    background:
      radial-gradient(90% 60% at 20% 50%, rgba(223,176,21,.55) 0%,
        rgba(38,110,209,.35) 40%, rgba(11,26,47,0) 70%),
      url('assets/img/about/chooseusone.jpg') right -24px bottom / 42% auto no-repeat,
      linear-gradient(180deg,#0b1a2f,#3f6e4d);
  }
  .processmb{
text-align:center;
  }

  /* Mobile par complex notch/diamond plate ko simple kar do (performance + clean) */
  .proc-plate{
    clip-path: none !important;
    border-radius: 14px;
    background: linear-gradient(90deg,var(--from),var(--to));
  }
  .proc-item[data-side="right"] .proc-plate{
    background: linear-gradient(90deg,var(--from),var(--to));
  }

  /* Left gradient stripe look (clean mobile look) */
  .proc-item{
    padding-left: 12px;
  }
  .proc-item .proc-plate::after{
    content:"";
    position:absolute; left:0; top:0; bottom:0; width:6px;
    border-radius:14px 0 0 14px;
    background:inherit;
    opacity:.9;
  }

  /* Shadow off – mobile par heavy lagta hai */
  .proc-item::after{ display:none; }

  /* Icons/text thoda compact */
  .proc-ico{ width:44px; height:44px; font-size:18px; }
  .proc-copy h3{ font-size:16px; }
  .proc-copy p{ font-size:13px; }
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
  padding: 0;
  list-style: none;
}

@media (max-width: 768px) {
  .portfolio .portfolio-filters {
    gap: 6px;
    margin-bottom: 30px;
  }
}

.portfolio .portfolio-filters li {
  padding: 12px 24px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .portfolio .portfolio-filters li {
    padding: 10px 18px;
    font-size: 0.8rem;
  }
}

.portfolio .portfolio-filters li::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.portfolio .portfolio-filters li:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 85%);
  border-color: var(--accent-color);
}

.portfolio .portfolio-filters li:hover::before {
  left: 100%;
}

.portfolio .portfolio-filters li.filter-active {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #4338ca 20%));
  color: var(--contrast-color);
  border-color: var(--accent-color);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.portfolio .portfolio-wrapper {
  background-color: var(--surface-color);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--default-color), transparent 92%);
  margin-bottom: 30px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.portfolio .portfolio-wrapper:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--default-color), transparent 85%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.portfolio .portfolio-wrapper:hover .portfolio-image img {
  transform: scale(1.05);
}

.portfolio .portfolio-wrapper:hover .portfolio-image .portfolio-hover {
  opacity: 1;
  visibility: visible;
}

.portfolio .portfolio-wrapper .portfolio-image {
  position: relative;
  overflow: hidden;
  height: 240px;
}

.portfolio .portfolio-wrapper .portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio .portfolio-wrapper .portfolio-image .portfolio-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 70%, white 15%), color-mix(in srgb, var(--accent-color) 90%, black 15%));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(2px);
}

.portfolio .portfolio-wrapper .portfolio-image .portfolio-hover .portfolio-actions {
  display: flex;
  gap: 15px;
}

.portfolio .portfolio-wrapper .portfolio-image .portfolio-hover .portfolio-actions .action-btn {
  width: 50px;
  height: 50px;
  background-color: var(--surface-color);
  color: var(--contrast-color);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.portfolio .portfolio-wrapper .portfolio-image .portfolio-hover .portfolio-actions .action-btn:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.portfolio .portfolio-wrapper .portfolio-content {
  padding: 25px;
}

.portfolio .portfolio-wrapper .portfolio-content .portfolio-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.portfolio .portfolio-wrapper .portfolio-content .portfolio-meta .project-type {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-color);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 90%), color-mix(in srgb, var(--accent-color), transparent 85%));
  padding: 6px 12px;
  border-radius: 20px;
}

.portfolio .portfolio-wrapper .portfolio-content .portfolio-meta .project-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fbbf24;
}

.portfolio .portfolio-wrapper .portfolio-content .portfolio-meta .project-rating i {
  font-size: 0.8rem;
}

.portfolio .portfolio-wrapper .portfolio-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--heading-color);
  line-height: 1.3;
}

.portfolio .portfolio-wrapper .portfolio-content p {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 20px;
  line-height: 1.5;
}

.portfolio .portfolio-wrapper .portfolio-content .portfolio-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portfolio .portfolio-wrapper .portfolio-content .portfolio-tech .tech-badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.3s ease;
}

.portfolio .portfolio-wrapper .portfolio-content .portfolio-tech .tech-badge:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.portfolio .portfolio-cta {
  margin-top: 60px;
  padding: 40px 30px;
  background: linear-gradient(135deg, var(--surface-color), color-mix(in srgb, var(--surface-color), var(--accent-color) 5%));
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
}

.portfolio .portfolio-cta h4 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--heading-color);
}

.portfolio .portfolio-cta p {
  font-size: 1rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 30px;
}

.portfolio .portfolio-cta .cta-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.portfolio .portfolio-cta .cta-buttons .btn {
  padding: 14px 28px;
  font-weight: 600;
  border-radius: 12px;
  font-size: 0.925rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.portfolio .portfolio-cta .cta-buttons .btn.btn-primary {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #4338ca 20%));
  color: var(--contrast-color);
  border: none;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.portfolio .portfolio-cta .cta-buttons .btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.portfolio .portfolio-cta .cta-buttons .btn.btn-outline {
  background-color: transparent;
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
}

.portfolio .portfolio-cta .cta-buttons .btn.btn-outline:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 70%);
}


/* tabs */
    /* ---- Brand Theme ---- */
:root{
  --fi-blue:#0078C8;
  --fi-green:#A5C936;
  --fi-ink:#0b1828;
  --fi-muted:#50607a;
  --fi-line:rgba(0,0,0,.10);
  --fi-grad: linear-gradient(90deg, var(--fi-blue), var(--fi-green));
}

/* ---- Section background (subtle, premium) ---- */
#ac-services-actabs.section{
  position:relative;
  background:
    radial-gradient(60% 100% at 10% -10%, rgba(0,120,200,.06), transparent 60%),
    radial-gradient(70% 120% at 90% -20%, rgba(165,201,54,.06), transparent 60%),
    linear-gradient(#fff, #fff);
}

/* Container breathing room */
/* #ac-services-actabs .container{ max-width:1100px; } */

/* ========= Theme ========= */
  :root{
    --fi-blue:#0078C8;
    --fi-green:#A5C936;
    --fi-ink:#0b1828;
    --fi-muted:#50607a;
    --fi-line:rgba(0,0,0,.10);
    --fi-grad: linear-gradient(90deg, var(--fi-blue), var(--fi-green));
  }

  /* ========= Section BG (optional) ========= */
  #ac-services-actabs.section{
    position:relative;
    background:
      radial-gradient(60% 100% at 10% -10%, rgba(0,120,200,.06), transparent 60%),
      radial-gradient(70% 120% at 90% -20%, rgba(165,201,54,.06), transparent 60%),
      linear-gradient(#fff,#fff);
  }

  /* ========= Top layout: Tabs (left) + AC (right) ========= */
  #ac-services-actabs .ac-top{
    display:flex; align-items:center; gap:clamp(16px,2.5vw,28px);
    padding:clamp(8px,1.6vw,16px) 0;
  }
  #ac-services-actabs .actabs-left{ flex:0 1 620px; }
  #ac-services-actabs .ac-anim-right{
    flex:0 0 540px; display:flex; align-items:center; justify-content:center;
  }


  /* tabs mobile */
/* ===== Mobile overrides: hide Lottie, show tabs cleanly ===== */
@media (max-width: 768px){
  /* Lottie/AC side ko bilkul hide */
  #ac-services-actabs .ac-anim-right,
  #ac-services-actabs .ac-anim-wrap{
    display:none !important;
  }

  /* Tabs full width, single column */
  #ac-services-actabs .actabs-left{ flex:1 1 100%; }
  #ac-services-actabs .actabs-nav{
    grid-template-columns: 1fr;   /* one column */
    gap: 10px;
  }
  #ac-services-actabs .actabs-nav .nav-link{
    height:56px;                  /* better touch target */
    border-radius:16px;
  }
}

  /* ========= TABS: 2×2 GRID, equal width & height ========= */
  /* delete any old .actabs-nav flex CSS to avoid conflict */
  #ac-services-actabs .actabs-nav{
    display:grid;
    grid-template-columns: repeat(2, minmax(230px,1fr));
    gap:14px;
    padding:0;
    margin:0;
    list-style:none;
    background:transparent;
    border:0;
  }
  #ac-services-actabs .actabs-nav .nav-item{ display:contents; } /* let button fill grid cell */

  #ac-services-actabs .actabs-nav .nav-link{
    display:flex; align-items:center; justify-content:center;
    height:64px; width:100%;
    border-radius:20px;
    border:1px solid rgba(0,0,0,.08);
    background:#eef4fb;
    color:#0e223d; font-weight:700; letter-spacing:.2px;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    box-shadow:0 2px 0 rgba(0,0,0,.04) inset;
  }
  #ac-services-actabs .actabs-nav .nav-link:hover{
    background:#e8f1fb; transform:translateY(-1px);
  }
  #ac-services-actabs .actabs-nav .nav-link.active{
    background:#e9f4ff; border-color:#cfe6ff;
    box-shadow:inset 0 -3px 0 0 var(--fi-blue), 0 6px 18px rgba(0,120,200,.12);
    color:#061120;
  }

  /* ========= AC (Lottie) ========= */
  #ac-services-actabs .ac-anim-wrap{ position:relative; isolation:isolate; }
  #ac-services-actabs .ac-anim-wrap::before{
    content:""; position:absolute; inset:auto 8px -6px 8px; height:36px;
    background:radial-gradient(50% 100% at 50% 0%, rgba(0,120,200,.20), rgba(165,201,54,.12) 45%, transparent 70%);
    filter:blur(18px); z-index:-1;
  }
  #ac-services-actabs .ac-anim-wrap lottie-player{
    width:520px; height:220px;
    will-change:transform; animation:acFloat 6s ease-in-out infinite;
  }
  @keyframes acFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

  /* ========= Panel/Card ========= */
  #ac-services-actabs .tab-content{
    background:#fff; border:1px solid var(--fi-line); border-radius:16px;
    padding:clamp(18px,2.2vw,26px); margin-top:1rem;
    box-shadow:0 18px 48px rgba(10,31,68,.08);
  }
  #ac-services-actabs .headline{
    font-size:clamp(22px,2.4vw,30px); line-height:1.22; margin-bottom:.5rem;
    background: #0d72b6;
     -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  }
  #ac-services-actabs p{ color:var(--fi-ink); line-height:1.7; margin:.4rem 0; }
  #ac-services-actabs .muted{ color:var(--fi-muted); }

  /* ========= List bullets ========= */
  #ac-services-actabs ul.list-clean{ margin:.4rem 0 0 0; padding-left:0; }
  #ac-services-actabs ul.list-clean li{
    list-style:none; margin:.4rem 0; padding-left:1.4rem; position:relative;
  }
  #ac-services-actabs ul.list-clean li::before{
    content:""; position:absolute; left:0; top:.45rem; width:.7rem; height:.7rem;
    border-radius:50%;
    background: radial-gradient(circle at 30% 30%, #fff 20%, var(--fi-blue) 60%);
    box-shadow:0 0 0 3px rgba(0,120,200,.12);
  }

  /* ========= Responsive ========= */
  @media (max-width: 992px){
    #ac-services-actabs .ac-top{ flex-direction:column; align-items:stretch; }
    #ac-services-actabs .ac-anim-right{ order:2; }
    #ac-services-actabs .actabs-left{ order:1; }
    #ac-services-actabs .actabs-nav{
      grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    }
    #ac-services-actabs .ac-anim-wrap lottie-player{
      width:360px !important; height:170px !important;
    }
  }
  @media (max-width: 520px){
    #ac-services-actabs .actabs-nav{ grid-template-columns:1fr; gap:10px; }
    #ac-services-actabs .actabs-nav .nav-link{ height:56px; border-radius:16px; }
    #ac-services-actabs .ac-anim-wrap lottie-player{
      width:300px !important; height:150px !important;
    }
  }
  @media (prefers-reduced-motion: reduce){
    #ac-services-actabs .ac-anim-wrap lottie-player{ animation:none; }
  }

/* acservicetabs */

/*--------------------------------------------------------------
# Why Us Section
--------------------------------------------------------------*/
/* .why-us {
  padding-top: 60px;
  padding-bottom: 60px;
  background-color:white;
  color:black
}

.why-us .feature-card {
  background: var(--surface-color);
  padding: 40px 30px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
}

.why-us .feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.why-us .feature-card .icon-wrapper {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #8b5cf6 30%));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  position: relative;
}

.why-us .feature-card .icon-wrapper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  opacity: 0.3;
  transform: scale(1.2);
  z-index: 0;
}

.why-us .feature-card .icon-wrapper i {
  font-size: 36px;
  color: var(--contrast-color);
}

.why-us .feature-card h4 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--heading-color);
}

.why-us .feature-card p {
  color: white;
  line-height: 1.6;
  margin-bottom: 25px;
}

.why-us .feature-card .feature-stats {
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.why-us .feature-card .feature-stats .stat-number {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: var(--accent-color);
  line-height: 1;
}

.why-us .feature-card .feature-stats .stat-label {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
}

.why-us .feature-showcase {
  text-align: center;
}

.why-us .feature-showcase img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
}

.why-us .feature-content {
  padding-left: 30px;
}

.why-us .feature-content h3 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 20px;
  color: black;
  line-height: 1.2;
}

.why-us .feature-content .lead {
  font-size: 18px;
  color:black;
  margin-bottom: 40px;
  line-height: 1.6;
}

.why-us .feature-content .feature-list {
  margin-bottom: 40px;
}

.why-us .feature-content .feature-list .feature-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}

.why-us .feature-content .feature-list .feature-item .feature-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 80%), color-mix(in srgb, var(--accent-color), transparent 90%));
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
}

.why-us .feature-content .feature-list .feature-item .feature-icon i {
  color: var(--accent-color);
  font-size: 24px;
}

.why-us .feature-content .feature-list .feature-item .feature-text h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
  color:black;
}

.why-us .feature-content .feature-list .feature-item .feature-text p {
  color:black;
  margin: 0;
  line-height: 1.5;
}

.why-us .feature-content .cta-wrapper {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.why-us .feature-content .cta-wrapper .btn {
  padding: 15px 30px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.why-us .feature-content .cta-wrapper .btn.btn-primary {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #8b5cf6 30%));
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

.why-us .feature-content .cta-wrapper .btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.why-us .feature-content .cta-wrapper .btn.btn-outline {
  background: transparent;
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.why-us .feature-content .cta-wrapper .btn.btn-outline:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

@media (max-width: 991px) {
  .why-us .feature-content {
    padding-left: 0;
    padding-top: 40px;
  }
}

@media (max-width: 768px) {
  .why-us .feature-card {
    padding: 30px 20px;
  }

  .why-us .feature-card .icon-wrapper {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
  }

  .why-us .feature-card .icon-wrapper i {
    font-size: 30px;
  }

  .why-us .feature-card h4 {
    font-size: 20px;
  }

  .why-us .feature-card .feature-stats .stat-number {
    font-size: 28px;
  }

  .why-us .feature-content h3 {
    font-size: 28px;
  }

  .why-us .feature-content .cta-wrapper .btn {
    padding: 12px 25px;
    font-size: 14px;
    width: 100%;
    justify-content: center;
  }
} */

/* ========= WHY US — Clean Corporate (brand #301db7) ========= */
#why-us.why-us{
  --brand:#301db7;          /* your site color */
  --ink:#0f172a;            /* headings */
  --muted:#5c6577;          /* body text */
  --line:#e8ecf3;           /* hairline */
  --card:#ffffff;           /* card bg */
  background:#fff;
  color:var(--ink);
}



/* section title */
#why-us .section-title h2{color:var(--ink);font-weight:800}
#why-us .section-title p{color:var(--muted)}

/* ------ feature cards (top 3) ------ */
#why-us .feature-card{
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(2,6,23,.06);
  border-radius:16px;
  padding:28px 22px;
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
#why-us .feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(2,6,23,.10);
  border-color:#dbe5f2;
}
#why-us .feature-card .icon-wrapper{
  width:56px;height:56px;border-radius:12px;margin:0 auto 14px;
  display:grid;place-items:center;
  background:rgba(48,29,183,.10);
  border:1px solid rgba(48,29,183,.18);
}
#why-us .feature-card .icon-wrapper i{color:var(--brand);font-size:26px}
#why-us .feature-card h4{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:8px}
#why-us .feature-card p{color:var(--muted);line-height:1.6}
#why-us .feature-card .feature-stats{border-top:1px solid var(--line);padding-top:12px}
#why-us .feature-card .stat-number{color:var(--brand);font-weight:900;font-size:28px}
#why-us .feature-card .stat-label{color:var(--muted)}

/* ------ right column content ------ */
#why-us .feature-content{padding-left:30px}
#why-us .feature-content h3{
  /* font-size:clamp(28px,2.2vw,36px); */
  font-size: 27px;
  font-weight:800;color:var(--ink);margin-bottom:12px
}
#why-us .feature-content .lead{color:var(--muted);margin-bottom:28px}

/* bullet list */
#why-us .feature-list{margin-bottom:28px}
#why-us .feature-list .feature-item{
  display:flex;gap:14px;margin-bottom:16px;align-items:flex-start
}
#why-us .feature-list .feature-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:grid;place-items:center;
  background:rgba(48,29,183,.10);
  border:1px solid rgba(48,29,183,.18);
}
#why-us .feature-list .feature-icon i{color:var(--brand);font-size:20px}
#why-us .feature-list h5{margin:0 0 4px;font-weight:700;color:var(--ink)}
#why-us .feature-list p{margin:0;color:var(--muted)}

/* CTAs (if you enable later) */
#why-us .feature-content .cta-wrapper{display:flex;gap:12px;flex-wrap:wrap}
#why-us .feature-content .btn{border-radius:999px;padding:12px 22px;font-weight:700}
#why-us .feature-content .btn.btn-primary{background:var(--brand);border:2px solid var(--brand);color:#fff}
#why-us .feature-content .btn.btn-primary:hover{background:#24179b}
#why-us .feature-content .btn.btn-outline{border:2px solid var(--brand);color:var(--brand)}
#why-us .feature-content .btn.btn-outline:hover{background:var(--brand);color:#fff}

/* image panel on the left column (if you used it) */
#why-us .feature-showcase img{max-width:100%;height:auto;filter:drop-shadow(0 10px 22px rgba(2,6,23,.12))}

/* responsive */
@media (max-width:991px){#why-us .feature-content{padding-left:0;padding-top:28px}}
@media (max-width:768px){
  #why-us .feature-card{padding:24px 18px}
  #why-us .feature-content h3{font-size:28px}
  .col-lg-6.mbchoose.mt-5 {
      margin-top: 0 !important; /* Remove margin-top on mobile */
    }

}



/* ==== WHY-US: Mobile polish ==== */

/* 991px se neeche: stack view clean */
@media (max-width: 991px){
  #why-us .container { padding-left:14px; padding-right:14px; }
  #why-us .feature-content{
    padding:30px 14px;
    /* background:#fff;
    border:1px solid #030303ff;
    border-radius:16px; */
    /* box-shadow:0 8px 22px rgba(2,6,23,.06); */
  }
  #why-us .feature-showcase{
    min-height:360px;               /* thoda chhota */
    margin-bottom:16px;
    border-radius:20px;
  }
}

/* 768px se neeche: type & spacing tighten */
@media (max-width: 768px){
  #why-us .feature-content h3{
    font-size:24px;                 /* 28 → 24 */
    line-height:1.25;
    margin-bottom:14px;
    letter-spacing:.1px;
  }
  #why-us .feature-list .feature-item{
    gap:12px;
    margin-bottom:14px;
  }
  #why-us .feature-list .feature-icon{
    width:38px; height:38px; border-radius:10px;
  }
  #why-us .feature-list .feature-icon i{ font-size:18px; }
  #why-us .feature-list h5{
    font-size:16.5px;               /* headings compact */
    margin-bottom:3px;
  }
  #why-us .feature-list p{
    font-size:13.5px;
    line-height:1.55;
  }
}

/* 575px se neeche: biggest squeeze fixes */
@media (max-width: 575px){
  /* left person image ko clash se bachaao */
  #why-us .feature-showcase img{
    max-width:300px;
    height:auto;
    left:-6px; bottom:-4px;
    filter:drop-shadow(0 12px 24px rgba(0,0,0,.22));
  }

  /* heading 3 lines me clean dikhe */
  #why-us .feature-content h3{
    font-size:22px;
    word-break:break-word;
    hyphens:auto;
  }

  /* list ke beech extra spacing */
  #why-us .feature-list .feature-item + .feature-item{
    padding-top:8px;
    border-top:1px dashed #eef2f7;
  }
}

/* 400px se neeche: micro-tweak */
@media (max-width: 400px){
  #why-us .feature-content h3{ font-size:20px;margin-bottom: 32px; }
  #why-us .feature-list .feature-icon{ width:34px; height:34px; }
  #why-us .feature-list h5{ font-size:16px; }
  #why-us .feature-list p{ font-size:14px; }
}


/* frequently asked question */
/* ===== keep your existing styles as-is ===== */
  .faqsSection{
    --brand:#301db7; --ink:#0f172a; --muted:#5c6577; --line:#e8ecf3; --card:#fff;
    color:var(--ink);
    position:relative; isolation:isolate;
  }
  .faqsSection::before{
    content:""; position:absolute; inset:0; z-index:0;
    opacity:.18;
    filter:contrast(105%) brightness(105%) saturate(105%);
  }
  .faqsSection::after{ content:""; position:absolute; inset:0; z-index:0; }

  /* We are now using Bootstrap .row/.col, so disable CSS grid of .faqsGrid */
  .faqsGrid{ position:relative; z-index:1; }

  .faq-visual{ border-radius:5%; }
  .faq-content{ }

  /* Sticky visual on desktop */
  /* .faq-visual-card{
    position:sticky; top:130px; min-height:520px;
    border-radius:22px; overflow:hidden; padding:18px;
  } */

  /* image should remain crisp & responsive */
  .faq-person{
    display:block;
    width:100%;               /* full width inside the column */
    height:auto;              /* keep aspect ratio */
    transform-origin:50% 100%;
    object-fit:cover;
  }
  @keyframes bobRotate{
    0%{ transform:translateY(0) rotate(-1.4deg); }
    50%{ transform:translateY(-12px) rotate(1.4deg); }
    100%{ transform:translateY(0) rotate(-1.4deg); }
  }

  .faq-content .content{ margin-bottom:14px; }
  .faq-content h2{ margin:0 0 6px; font-weight:800; }
  .faq-content p{ color:var(--muted); margin:0; }

  .faqsList{ max-width:720px; }
  .faqsList__item{
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:14px 18px; margin-bottom:12px;
    box-shadow:0 6px 16px rgba(2,6,23,.05);
    position:relative; overflow:visible;
    scroll-margin-top:96px;
  }
  .faqsList__question{
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    cursor:pointer; outline:none;
  }
  .faqsList__question:focus-visible{
    box-shadow:0 0 0 3px rgba(48,29,183,.18); border-radius:10px;
  }
  .faqsList__question .title{ margin:0; font-weight:700; font-size:1.05rem; color:#0f172a; }
  .faqsList__question .icon{ position:relative; width:24px; height:24px; flex-shrink:0; }
  .faqsList__question .icon::before,
  .faqsList__question .icon::after{
    content:""; position:absolute; left:50%; top:50%;
    width:16px; height:2px; background:var(--brand); border-radius:2px;
    transform-origin:center; transition:transform .25s;
    transform:translate(-50%,-50%);
  }
  .faqsList__question .icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
  .faqsList__question.active .icon::before{ transform:translate(-50%,-50%) rotate(45deg); }
  .faqsList__question.active .icon::after{ transform:translate(-50%,-50%) rotate(-45deg); }

  .faqsList__answer{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
  .faqsList__answer .wrapper{ overflow:hidden; }
  .faqsList__answer p{ margin:0; padding-top:10px; color:var(--muted); line-height:1.6; }
  .faqsList__answer.active{ grid-template-rows:1fr; }

  .faqsList__item.electric::after{
    content:""; position:absolute; inset:-1px; border-radius:16px; padding:1px; pointer-events:none;
    background: conic-gradient(from 0deg,#7df9ff 0%,
      color-mix(in hsl, var(--brand) 80%, #7df9ff) 20%,
      #7df9ff 40%, transparent 60%,
      color-mix(in hsl, var(--brand) 70%, transparent) 100%);
    background-size:200% 200%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation:faq-electric 6s linear infinite; opacity:.9;
  }
  .faqsList__item:hover::after{ animation-duration:3.5s; }
  @keyframes faq-electric{
    0%{ background-position:0% 50%; filter:hue-rotate(0deg) saturate(130%); }
    50%{ background-position:100% 50%; filter:hue-rotate(10deg) saturate(150%); }
    100%{ background-position:0% 50%; filter:hue-rotate(0deg) saturate(130%); }
  }
  .faqsList__item:hover{
    box-shadow:0 10px 26px rgba(2,6,23,.08);
    transform:translateY(-1px);
    transition:.25s ease;
  }
  .faqsList__item.open{ border-color: color-mix(in hsl, var(--brand) 35%, #e8ecf3); }

  /* ===== Mobile tweaks ===== */
  @media (max-width: 991.98px){
    .faq-visual-card{
      position:relative; top:auto; min-height:auto;
      border-radius:16px; background:transparent; box-shadow:none; padding:0;
    }
    .faq-person{ max-width:360px; margin:0 auto; }
    .faqsList{ max-width:100%; }
    .faqsList__item{ padding:14px; border-radius:12px; margin-bottom:12px; box-shadow:0 8px 18px rgba(2,6,23,.06); }
    .faqsList__question .title{ font-size:1rem; line-height:1.35; }
    .faqsList__answer p{ font-size:14px; line-height:1.6; }
    .faqsList__item.electric::after{ opacity:.75; animation-duration:8s; }
  }
  @media (max-width: 575.98px){
    .faq-person{ max-width:320px; }
    .faqsList__item{ padding:12px; border-radius:10px; }
    .faqsList__question .icon{ width:22px; height:22px; }
    .faqsList__answer p{ font-size:13.5px; }
    .mbwel{
padding-top:0px !important;
    }
  }

/* faq */

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
    .testimonials-section {
      /* background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80') no-repeat center center;
      background-size: cover; */
      background: linear-gradient(rgb(28 25 25 / 30%), rgb(28 25 25 / 30%)),
            url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80')
            no-repeat center center;
background-size: cover;

      position: relative;
      padding: 40px 0;
      color: white;
      overflow: visible;
    }




/* Content layering */
.testimonial-overlay{ z-index:1; }
.testimonial-content{ position:relative; z-index:3; }

/* LEFT figure (no extra bottom padding now) */
.testimonial-figure{
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

/* Image: thoda rotate + niche shift so it “touches” the wave */
.testimonial-left-img{
  position: relative;
  z-index: 2;                        /* wave (2) se upar rahe */
  width: 100%;
  top:50px;
  height: auto;
  object-fit: contain;
  transform: rotate(-6deg) translateY(var(--img-shift, 26px));
  transform-origin: left bottom;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

/* UAE wave at section bottom (clear & crisp) */
.uae-bottom-wave{


  width: 100%;          /* width control */
  height: auto;                      /* stretch mat karo */

  pointer-events: none;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.32));
  /* Optional: agar sirf lower arc chahiye:
  clip-path: inset(30% 0 0 0);
  */
}

/* Overlay halka, image/wave clear dikhne ke liye */
.testimonial-overlay{
  background-color: rgba(42,96,57,.66);
}

/* Responsive tuning */
@media (max-width: 991.98px){
  .testimonial-figure{ max-width:520px; }
  .testimonials-section{ padding-bottom: calc(var(--wave-h, 110px) + 20px); }
  .testimonial-left-img{ transform: rotate(-5deg) translateY(22px); }
  .uae-bottom-wave{
    width: min(1000px, 98vw);
    transform: translateX(-50%) rotate(-2.6deg);
  }
}
@media (max-width: 575.98px){
  .testimonial-figure{ max-width:440px; }
  .testimonials-section{ padding-bottom: calc(var(--wave-h, 100px) + 16px); }
  .testimonial-left-img{ transform: rotate(-3deg) translateY(18px); }
  .uae-bottom-wave{
    width: 102vw;
    transform: translateX(-50%) rotate(-2.2deg);
    filter: drop-shadow(0 12px 20px rgba(0,0,0,.28));
  }
}
    .testimonial-overlay {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      /* background-color: rgb(42,96,57,80%); */
      background-color: rgba(13, 114, 182, 0.6);
      z-index: 1;
    }

    .testimonial-content {
      position: relative;
      z-index: 3;
    }

    .testimonial-left-img {
      width: 100%;
      object-fit: cover;
      filter: drop-shadow(0 0 10px rgba(124, 10, 10, 0.5));
    }

    .testimonial-card {
      background-color: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 25px;
      min-height: 280px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: all 0.3s ease;
    }

    .testimonial-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      border-color:#a5ca3e;
    }

    .quote-icon {
      background-color: #a5ca3e;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 15px;
    }

    .testimonial-user {
      margin-top: 20px;
      display: flex;
      align-items: center;
    }

    .testimonial-user img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      margin-right: 10px;
      border: 2px solid #a5ca3e;
    }

    .testimonial-nav {
      font-size: 18px;
      color: #0d72b6;
      background-color: #a5ca3e;
      border-radius: 50%;
      width: 35px;
      height: 35px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-left: 8px;
      border: 1px solid #fff;
      transition: all 0.3s ease;
    }

    .testimonial-nav:hover {
      background-color: #fff;
      color: #7c0a0a;
    }

    .testimonial-nav.active {
      background-color: #fff;
      color: #0d72b6;
    }

    .testimonial-pattern {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 200px;
      height: 200px;
      background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.06' fill-rule='evenodd'/%3E%3C/svg%3E");
      background-size: cover;
      opacity: 0.3;
      z-index: 2;
    }

    .testimonial-carousel {
      position: relative;
      min-height: 280px;
    }

    .testimonial-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .testimonial-slide.active {
      opacity: 1;
      position: relative;
    }

    .section-title-test{
      position: relative;
      display: inline-block;
      margin-bottom: 25px;
      font-size: 28px;
      font-weight: 700;
    }

    .section-title-test:after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 50px;
      height: 3px;
      background: #a5ca3e;
    }
.test{
  color:white;
}
    .testimonial-text {
      font-size: 14px;
      line-height: 1.6;
    }

    .user-name {
      font-size: 15px;
      font-weight: 600;
    }

    .user-role {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
    }

    /* Responsive adjustments */
    @media (max-width: 991px) {
      .testimonial-left-img {
        height: 400px;
      }
    }

    @media (max-width: 767px) {
      .testimonial-left-img {
        height: 300px;
      }

      .testimonials-section {
        padding: 60px 0;
      }
    }


    /* testimonial */
    /* ======== HIDE LEFT IMAGE + UAE FLAG (Mobile & Tablet) ======== */

/* Tablet & down */
@media (max-width: 991.98px){
  /* Hide left image column */
  .testimonials-section .testimonial-content .row > .col-lg-6:first-child {
    display: none !important;
  }

  /* Hide UAE flag bottom wave */
  .test {
    display: none !important;
  }

  /* Make right column full width */
  .testimonials-section .testimonial-content .row > .col-lg-6:last-child {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Center everything neatly */
  .testimonials-section .testimonial-content {
    text-align: center;
  }

  /* Adjust section spacing */
  .testimonials-section {
    padding: 60px 0;
  }

  /* Title styling */
  .section-title-test {
    display: inline-block;
    margin: 0 auto 25px auto;
    font-size: 26px;
    text-align: center;
  }

  /* Testimonial cards centered */
  .testimonial-card {
    margin: 0 auto 20px;
    max-width: 90%;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 22px;
    text-align: left;
  }

  /* Text adjustments */
  .testimonial-text {
    font-size: 14px;
    line-height: 1.6;
  }

  /* Navigation buttons centered */
  .testimonial-nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
    margin: 5px;
  }

  .testimonial-carousel {
    min-height: 260px;
  }
}

/* Mobile optimization */
@media (max-width: 575.98px){
  .section-title-test {
    font-size: 24px;
  }

  .testimonial-card {
    max-width: 95%;
    padding: 18px;
  }

  .testimonial-text {
    font-size: 13.5px;
  }

  .testimonial-nav {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }

  /* Extra ensure UAE flag hidden */
  .test {
    display: none !important;
    visibility: hidden;
    opacity: 0;
  }
}


/* ==== MOBILE SPACING FIX (paste at the end) ==== */

/* Tablet & down */
@media (max-width: 991.98px) {
  /* tighter vertical rhythm inside slides */
  .testimonial-carousel { min-height: unset; }
  .testimonial-slide { margin-bottom: 0; }

  /* gutters kam karo (Bootstrap g-4 override) */
  .testimonial-slide .row.g-4 {
    --bs-gutter-y: .75rem;
    --bs-gutter-x: .75rem;
  }

  .testimonial-card {
    min-height: unset;         /* remove fixed height */
    padding: 16px 16px 14px;   /* kam padding */
    margin-bottom: 12px;       /* smaller gap between cards */
  }

  .quote-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
  }

  .testimonial-user { margin-top: 12px; }
  .testimonial-user img { width: 32px; height: 32px; }

  .testimonial-text { font-size: 13.5px; line-height: 1.5; }
  .user-name { font-size: 14px; }
  .user-role { font-size: 12px; }

  /* section padding thoda kam */
  .testimonials-section { padding-top: 36px; padding-bottom: 36px; }

  /* ornamental pattern ko hide kar do to avoid extra visual noise/space */
  .testimonial-pattern { display: none !important; }
}

/* Small phones */
@media (max-width: 575.98px) {
  .testimonial-card { padding: 14px 14px 12px; margin-bottom: 10px; }
  .section-title-test { margin-bottom: 14px; font-size: 22px; }
  .testimonial-nav { width: 34px; height: 34px; font-size: 18px; }
}


    /* acinstallationservices */
/* acinstallationservices */
/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@600;800&display=swap"); */

.abouthead.blackgold-text {
  /* font-family: "Inter", sans-serif; */
  font-weight: 800;
   font-size: 40px;
  text-align:left;
  color: #000; /* black main text */
  position: relative;
  line-height: 1.3;
  letter-spacing: -0.5px;
  /* margin: 1.5rem 0; */
  background: none;
  overflow: hidden;
}

/* Blue → Lime-Green reflection inside black text */
.abouthead.blackgold-text::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* only 2 colors */
  background: linear-gradient(
    90deg,
    transparent 0%,
    #0078c8 35%,
    #a5c936 50%,
    transparent 80%
  );

  background-size: 200%;
  mix-blend-mode: lighten;
  animation: shineMove 5s ease-in-out infinite;
  pointer-events: none;
}

/* reflection movement — blue fades out halfway */
@keyframes shineMove {
  0% {
    background-position: -150% 0;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    background-position: 0% 0;
    opacity: 0.8;
  }
  75% {
    opacity: 0.4;
  }
  100% {
    background-position: 150% 0;
    opacity: 0;
  }
}

/* separator bar stays solid black */
.abouthead span {
  color: #000;
}

.aboutpara{
text-align:justify;
}


   @media (max-width: 767px) {
     .aboutpara{
text-align:center;
/* margin-top: -40px; */
}
.about .mbpaint{
    margin-top: 40px !important;
}
.abouthead.blackgold-text{
    font-size:20px !important;

}
    }

   @media (max-width: 767px) {
     .aboutparas{
text-align:center;
 margin-top: -40px;
}

    }


/* contact */
/* ===== Contact / Quote (scoped styles) ===== */

.cta-email-bs{
  --brand:#8ef1c9;          /* accent */
  --brand-2:#0ea067;        /* deep green */
  --ink:#ecf3ff;            /* light text */
  --muted:#c5d3f0;          /* sub text */
  --panel:#0a1222;          /* card base */
    padding-top:210px;

}

/* Main card wrapper (stripes + depth; keeps left image intact) */
.cta-card{
  position:relative; isolation:isolate;
  border-radius:20px; overflow:hidden;
  background:
    repeating-linear-gradient(-12deg, rgba(255,255,255,.06) 0 2px, rgba(255,255,255,0) 2px 18px),
    linear-gradient(180deg,#0f1a2e 0%, #0c1527 55%, #0a1222 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

/* Left image pane (desktop: cover; mobile: we show the <img>) */
.cta-email-bs .bg-media{
  min-height:420px;
  background:
    linear-gradient(90deg, rgba(11,19,34,0) 60%, rgba(11,19,34,.75) 92%),
    url('assets/img/services/contactus.png') center/cover no-repeat;
}
@media (max-width: 991.98px){
  .cta-email-bs .bg-media{ background:none; min-height:auto; }
}

/* ===== RIGHT SIDE — HIGH READABILITY ===== */
.cta-right{
  width:100%; max-width:640px; margin:0 auto;
  color:var(--ink);
  /* glass-like content card for clarity */
  /* background:
    linear-gradient(180deg, rgba(9,18,34,.82), rgba(9,18,34,.88)),
    radial-gradient(120% 90% at 20% 0%, rgba(24,187,130,.14), rgba(24,187,130,0) 60%); */
  /* border:1px solid rgba(142,241,201,.18); */
  /* box-shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04); */
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  /* border-radius:18px; */
  padding:32px 28px;
}

.cta-email-bs .eyebrow{
  display:inline-block; margin-bottom:8px;
  color:var(--brand);
   /* font-weight:800; */
  letter-spacing:.14em; text-transform:uppercase;
  font-size:.8rem;
}

.cta-email-bs .cta-title{
  margin:0 0 10px; font-weight:900;
  font-size:clamp(28px,3vw,40px); line-height:1.15; letter-spacing:.2px;
  color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.25);
}

.cta-email-bs .cta-sub{
  margin:0 0 18px; color:var(--muted);
  font-size:1.05rem; line-height:1.55;
}

/* Email pill */
.cta-email-bs .email-pill{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(142,241,201,.55);
  background:linear-gradient(180deg,#0f1a2e,#0c1629);
  padding:10px 12px; border-radius:999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 24px rgba(14,160,103,.20);
  margin-bottom:14px;
}
.cta-email-bs .email-pill .icon{ width:18px; height:18px; color:var(--brand); }
.cta-email-bs .email-pill a{
  color:#e9fffa; text-decoration:none; font-weight:800;
}
.cta-email-bs .email-pill .copy{
  border:none; outline:0; cursor:pointer;
  padding:6px 10px; border-radius:999px; font-weight:800;
  background:#12253b; color:var(--brand);
}
.cta-email-bs .email-pill .copy:hover{ filter:brightness(1.1); }

/* Primary CTA */
.cta-email-bs .cta-actions{ margin:6px 0 18px; }
.cta-email-bs .btn-solid{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 18px; border-radius:14px; font-weight:900; letter-spacing:.2px;
  color:#08131e; text-decoration:none;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  box-shadow: 0 16px 36px rgba(14,160,103,.35), inset 0 1px 0 rgba(255,255,255,.55);
  transform:translateZ(0); transition:transform .14s ease, box-shadow .14s ease;
}
.cta-email-bs .btn-solid:hover{
  transform:translateY(-2px);
  box-shadow: 0 22px 44px rgba(14,160,103,.42), inset 0 1px 0 rgba(255,255,255,.6);
}

/* Trust bullets */
.cta-email-bs .trust-list{
  list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:14px;
}
.cta-email-bs .trust-list li{
  position:relative; padding-left:18px; color:#e8f2ff; font-weight:700;
}
.cta-email-bs .trust-list li::before{
  content:""; position:absolute; left:0; top:9px; width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff 0 40%, var(--brand) 41% 100%);
  box-shadow:0 0 0 3px rgba(17,196,131,.20) inset;
}

/* Small screens: keep readability */
@media (max-width: 575.98px){
  .cta-right{ padding:22px 18px; border-radius:14px; }
  .cta-email-bs .cta-title{ font-size:26px; }
  .cta-email-bs .cta-sub{ font-size:.98rem; }
  .cta-email-bs{padding-top:100px!important; }
  .cta-email-bs .email-pill {
    width:300px;
    font-size:12px;
  }
}


/* y hide in form issue contact */
/* Form fields: DO NOT match line-height to height */
.contact .form-control,
.contact select.form-control {
  height: auto;                 /* or a fixed height but see below */
  padding: 12px 16px;
  line-height: 1.25;            /* keep it < height, not equal */
  overflow: visible;            /* avoid clipping */
}

/* Agar tum fixed height rakhna chaho: */
.contact .form-control,
.contact select.form-control {
  height: 52px;                 /* example */
  padding: 12px 16px;
  line-height: 1.25;            /* important */
}

/* Placeholder bhi same leading pe rakho */
.contact .form-control::placeholder {
  line-height: 1.25;
}

/* Kabhi kabhi parent card pe overflow hidden hota hai—remove it */
.contact-form-card { overflow: visible; }

/* Tailwind use kar rahe ho to 'leading-none' hata kar 'leading-[1.25]' use karo */

/* =========================
   Testimonials — Brand Glass Look
   (Indigo #301db7 + Olive #94a54f)
   ========================= */
/* maps section */
/* Map Section Styling */
.map-section {
  background-color: #f8f8f8; /* Light background for contrast */
  padding-top: 50px;
  padding-bottom: 50px;
}

.map-section h2 {
  font-size: 2.5rem;
  color: #0f172a;
}

.map-section p {
  font-size: 1.125rem;
  color: #4b5563;
}

.map-container {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.map-container iframe {
  border-radius: 10px;
}
/* map section */

/* satisficatioon section electric current */
  :root{
    /* === Logo palette === */
    --brand-blue:#2D7CC9;         /* Future Innovation blue */
    --brand-lime:#A7CF38;         /* Future Innovation lime */
    --brand-bg:#0A1424;           /* deep navy base */
    --accent-soft: color-mix(in hsl, var(--brand-blue) 30%, transparent);
  }


  /* ===== SECTION BG ===== */
  .hero-electrician{
    position:relative;
 background:radial-gradient(1200px 520px at -10% 20%, color-mix(in hsl, var(--brand-blue) 40%, #000) 0%,
                                          color-mix(in hsl, var(--brand-blue) 22%, #000) 45%,
                                          var(--brand-bg) 100%);

    padding:48px 0 64px;
    overflow:hidden;
  }

  /* ===== ELECTRIC WRAP ===== */
  .eb-wrap{
    position:relative; border-radius:22px; isolation:isolate;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06) inset,
      0 10px 40px rgba(0,0,0,.45),
      0 0 120px var(--accent-soft);
    animation:pulse-glow 8s ease-in-out infinite;
    transition:transform .3s ease;
  }
  .eb-wrap:hover{ transform:translateY(-4px); }
  .eb-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible;}

  /* Card */
  .hero-card{
    position:relative; border-radius:22px; z-index:2;
    background:
      linear-gradient(160deg, rgba(17, 17, 17, 0.94), rgba(255,255,255,.02)),
      linear-gradient(25deg, var(--accent-soft), rgba(255,255,255,0));
    padding:28px;
  }
  @media (min-width:768px){ .hero-card{padding:40px;} }

  /* Ambient blobs use logo colors */
  .glow-a,.glow-b{position:absolute; pointer-events:none; border-radius:999px; filter:blur(100px); z-index:1;}
  .glow-a{ width:22rem;height:22rem; left:-8rem; bottom:-8rem; background:color-mix(in hsl, var(--brand-blue) 35%, transparent); }
  .glow-b{ width:24rem;height:24rem; right:-8rem; top:-8rem;  background:color-mix(in hsl, var(--brand-lime) 28%, transparent); }

  /* Heading with subtle blue→lime tint */
  .display-5{
    background:linear-gradient(to right, #ffffff, #E7F2FF 55%, #F0F9E4);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 0 18px color-mix(in hsl, var(--brand-blue) 28%, transparent);
  }

  /* CTA = logo gradient */
  .btn-cta{
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-lime));
    color:#061428; border:none; font-weight:700; border-radius:12px;
  }

  /* Shine sweep */
  .shine-sweep{ position:relative; overflow:hidden; }
  .shine-sweep::before{
    content:""; position:absolute; inset:-30%; transform:translateX(-120%) skewX(-18deg);
    background:linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 65%);
    filter:blur(2px); animation:shine-move 9s linear infinite;
  }
  @keyframes shine-move{ to{ transform:translateX(120%) skewX(-18deg);} }

  /* Outer ambient glow (slow) */
  @keyframes eb-flicker{0%,100%{opacity:.42}50%{opacity:.68}}
  .eb-outer-glow{position:absolute; inset:-24px; z-index:-1; border-radius:30px;
    background:radial-gradient(60% 90% at 50% 50%, var(--accent-soft), transparent 70%);
    filter:blur(18px); animation:eb-flicker 12s linear infinite;
  }
  @keyframes pulse-glow{
    0%,100%{ box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 10px 40px rgba(0,0,0,.45),0 0 120px var(--accent-soft)}
    50%    { box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 10px 40px rgba(0,0,0,.45),0 0 160px color-mix(in hsl, var(--brand-blue) 35%, transparent)}
  }

  /* ===========================
     PHOTO STACK (scoped)
     =========================== */

  @property --stk-p { syntax: '<number>'; initial-value: 0; inherits: true; }
  @property --stk-v { syntax: '<number>'; initial-value: 0; inherits: true; }

  .stack{
    --stk-n: 6;
    --stk-k: 0;
    --stk-p: var(--stk-k);
    --stk-v: var(--stk-k);

    /* keep slides inside & responsive */
    --slide: clamp(14%, 5vw, 28%);
    overflow: hidden;
    contain: layout paint;

    display:grid;
    grid-template:
      "imgs" max-content
      "ctrl" max-content / 1fr;
    gap:1.25rem;
    width:100%;
    justify-items:center;
  }

  .stack{
    --abs-p: abs(var(--stk-k) - var(--stk-p));
    --end: clamp(0, var(--abs-p) - 1, 1);
    --dir: calc((1 - 2*var(--end))*sign(var(--stk-k) - var(--stk-p)));
    --fwd: calc(.5*(1 + var(--dir)));
    --stk-v: var(--stk-k);
    --abs-v: abs(var(--stk-v) - var(--stk-p));
    --prg: calc(var(--abs-v)/(1 - var(--end) + var(--end)*(var(--stk-n) - 1)));
    transition: --stk-p 0s .8s, --stk-v .8s;
  }
  @supports not (scale: Abs(-2)) {
    .stack{ --abs-p: max(var(--stk-k) - var(--stk-p), var(--stk-p) - var(--stk-k));
            --abs-v: max(var(--stk-v) - var(--stk-p), var(--stk-p) - var(--stk-v)); }
  }
  @supports not (scale: Sign(-2)) {
    .stack{ --dir: clamp(-1, (var(--stk-k) - var(--stk-p))*100000, 1); }
  }

  .stack article{
    --abs-top: abs(var(--stk-k) - var(--i));
    --not-top: min(1, var(--abs-top));
    --top: calc(1 - var(--not-top));
    --val-mov: ((1 - var(--fwd))*var(--stk-p) + var(--fwd)*var(--stk-k) - var(--i));
    --abs-mov: abs(var(--val-mov));
    --not-mov: min(1, var(--abs-mov));
    --mov: calc(1 - var(--not-mov));

    grid-area: imgs; display:grid;
    z-index: mod(calc(var(--stk-n) - 1 + var(--i) - var(--stk-k)), var(--stk-n));
    transition: z-index .8s cubic-bezier(1,-.9,0,1.9);
  }
  @supports not (scale: Abs(-2)) {
    .stack article{ --abs-top:max(var(--stk-k) - var(--i), var(--i) - var(--stk-k));
                    --abs-mov:max(var(--val-mov), -1*var(--val-mov)); }
  }

  .stack img{
    --sin: sin(var(--prg)*.5turn);
    height: 17rem; aspect-ratio: 1; object-fit: cover;
    border-radius: .8rem;
    border:2px solid color-mix(in hsl, var(--brand-blue) 40%, #52527a);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    translate: calc(-1*var(--slide)*var(--mov)*sqrt(var(--sin)));
    rotate: calc((1 - var(--sin)) * clamp(-2deg, var(--a), 2deg));
    background:#0b1628;
    will-change: transform;
  }
  @media (min-width: 1200px){
    .stack img{ height: 20rem; }
  }

  .stack .controls{ grid-area: ctrl; display:flex; gap:1rem; justify-content:center; }
  .stack button{
    --hov:0; --prc: calc(var(--hov)*100%);
    --c: color-mix(in hsl, var(--brand-blue) var(--prc), #384a6a);
    border:none; width:2.75rem; aspect-ratio:1; border-radius:50%;
    background: RGB(from var(--c) r g b / .18);
    color: color-mix(in hsl, var(--brand-blue) var(--prc), #c9d5e7);
    transition:.25s ease; position:relative;
  }
  .stack button::before{
    content:""; position:absolute; inset:0; margin:auto; width:34%; aspect-ratio:1;
    border:2px solid currentColor; border-width:2px 2px 0 0;
    transform: rotate(45deg) translateX(-10%);
  }
  .stack button[data-inc="-1"]::before{ transform: rotate(45deg) scaleX(-1) translateX(-10%); }
  .stack button:is(:hover,:focus){ --hov:1; outline:none; }

  /* accessibility */
  @media (prefers-reduced-motion: reduce){
    .stack, .eb-outer-glow, .eb-wrap, .shine-sweep::before { animation:none !important; }
  }
/* satisfication */

  /* satisfication */
/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-intro .intro-content h3 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  color: var(--heading-color);
}

.team .team-intro .intro-content p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 30px;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.team .team-intro .intro-content .stats-row {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.team .team-intro .intro-content .stats-row .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.team .team-intro .intro-content .stats-row .stat-item .stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1;
  margin-bottom: 4px;
}

.team .team-intro .intro-content .stats-row .stat-item .stat-label {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.team .team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 400px;
  margin: 0 auto;
}

.team .team-grid .member-hexagon {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto;
}

.team .team-grid .member-hexagon:nth-child(even) {
  margin-top: 40px;
}

.team .team-grid .member-hexagon .hexagon-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  overflow: hidden;
  transition: all 0.4s ease;
  cursor: pointer;
}

.team .team-grid .member-hexagon .hexagon-inner:hover {
  border-radius: 20% 80% 80% 20%/20% 20% 80% 80%;
  transform: scale(1.05) rotate(5deg);
}

.team .team-grid .member-hexagon .hexagon-inner:hover .member-overlay {
  opacity: 1;
  transform: translateY(0);
}

.team .team-grid .member-hexagon .hexagon-inner:hover img {
  transform: scale(1.1);
}

.team .team-grid .member-hexagon .hexagon-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.team .team-grid .member-hexagon .hexagon-inner .member-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, color-mix(in srgb, var(--accent-color), transparent 10%) 0%, color-mix(in srgb, var(--accent-color), transparent 25%) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--contrast-color);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
  padding: 20px;
}

.team .team-grid .member-hexagon .hexagon-inner .member-overlay h5 {
  font-size: 1.1rem;
  margin: 0 0 4px 0;
  font-weight: 600;
  color: var(--contrast-color);
}

.team .team-grid .member-hexagon .hexagon-inner .member-overlay span {
  font-size: 0.85rem;
  margin-bottom: 15px;
  opacity: 0.9;
}

.team .team-grid .member-hexagon .hexagon-inner .member-overlay .social-icons {
  display: flex;
  gap: 8px;
}

.team .team-grid .member-hexagon .hexagon-inner .member-overlay .social-icons a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-color);
  color: var(--accent-color);
  display: grid;
  place-items: center;
  transition: all 0.3s ease;
}

.team .team-grid .member-hexagon .hexagon-inner .member-overlay .social-icons a:hover {
  background: var(--contrast-color);
  transform: translateY(-2px);
}

/* teams */
.team .team-carousel-wrapper .carousel-title {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 40px;
  color: var(--heading-color);
}

.team .team-carousel-wrapper .leadership-slider {
  padding-bottom: 50px;
}

.team .team-carousel-wrapper .leadership-slider .swiper-slide {
  padding: 15px;
}

.team .team-carousel-wrapper .leadership-slider .leader-card {
  background: var(--surface-color);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.3s ease;
  height: 100%;
}

.team .team-carousel-wrapper .leadership-slider .leader-card:hover {
  transform: translateY(-8px);
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}


.team .team-carousel-wrapper .leadership-slider .leader-card .leader-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--accent-color), transparent 85%) 100%);
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-info {
  padding: 25px;
  text-align: center;
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-info h5 {
  font-size: 1.3rem;
  margin: 0 0 5px 0;
  color: var(--heading-color);
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-info .position {
  color: var(--accent-color);
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 15px;
  display: block;
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-info p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 20px;
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-info .leader-contact {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-info .leader-contact .contact-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  display: grid;
  place-items: center;
  transition: all 0.3s ease;
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-info .leader-contact .contact-btn:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

.team .team-carousel-wrapper .leadership-slider .swiper-pagination .swiper-pagination-bullet {
  background: color-mix(in srgb, var(--accent-color), transparent 70%);
  opacity: 1;
}

.team .team-carousel-wrapper .leadership-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--accent-color);
}

.team .join-team-cta {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 95%) 0%, color-mix(in srgb, var(--accent-color), transparent 92%) 100%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
  border-radius: 25px;
  padding: 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.team .join-team-cta::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-color), transparent 85%) 0%, transparent 70%);
  border-radius: 50%;
}

.team .join-team-cta .cta-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  display: grid;
  place-items: center;
  margin: 0 auto 25px;
  position: relative;
  z-index: 2;
}

.team .join-team-cta .cta-icon i {
  font-size: 2rem;
}

.team .join-team-cta .cta-content {
  position: relative;
  z-index: 2;
}

.team .join-team-cta .cta-content h4 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: var(--heading-color);
}

.team .join-team-cta .cta-content p {
  font-size: 1.05rem;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.team .join-team-cta .cta-content .cta-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.team .join-team-cta .cta-content .cta-actions .btn {
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.team .join-team-cta .cta-content .cta-actions .btn.btn-primary {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 1px solid var(--accent-color);
}
.team .join-team-cta .cta-content .cta-actions .btn.btn-primary:hover {
  background: color-mix(in srgb, var(--accent-color), black 15%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color), transparent 65%);
}

.team .join-team-cta .cta-content .cta-actions .btn.btn-outline {
  background: transparent;
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
}

.team .join-team-cta .cta-content .cta-actions .btn.btn-outline:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

.team .swiper-wrapper {
  height: auto !important;
}

@media (max-width: 1200px) {
  .team .team-intro .intro-content h3 {
    font-size: 1.9rem;
  }
}

@media (max-width: 992px) {
  .team .team-grid {
    max-width: 300px;
  }

  .team .team-grid .member-hexagon {
    width: 130px;
    height: 130px;
  }

  .team .team-grid .member-hexagon:nth-child(even) {
    margin-top: 30px;
  }

  .team .join-team-cta {
    padding: 30px 20px;
  }

  .team .join-team-cta .cta-content h4 {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .team .team-intro .intro-content {
    text-align: center;
    margin-bottom: 40px;
  }

  .team .team-intro .intro-content .stats-row {
    justify-content: center;
    gap: 20px;
  }

  .team .team-grid {
    grid-template-columns: 1fr;
    max-width: 200px;
  }

  .team .team-grid .member-hexagon {
    width: 180px;
    height: 180px;
  }

  .team .team-grid .member-hexagon:nth-child(even) {
    margin-top: 0;
  }

  .team .join-team-cta .cta-content .cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .team .join-team-cta .cta-content .cta-actions .btn {
    width: 200px;
  }
}

@media (max-width: 576px) {
  .team .team-carousel-wrapper .carousel-title {
    font-size: 1.5rem;
    margin-bottom: 30px;
  }

  .team .leadership-slider .leader-card .leader-info {
    padding: 20px;
  }
}



/* servoce area in dubai */
.serviceareas-section { background-color: #0c0c0c; color: #fff; }


/* 🔹 Professional Hover Style - Balanced and Elegant */
/* ===== Brand palette (optional, global) ===== */
:root{
  --brand-deep:   #301db7; /* primary */
  --brand-accent: #94a54f; /* contrast */
  --white: #ffffff;
  --black: #0f0f0f;
  --paragraph: #ffff;
  --line: #1e1e1e;
}

/* 🔹 Professional Hover Style — Brand version */
.serviceareas-card{
  /* base surface */
  background-color:#0d72b6;

  /* subtle brand glows in corners */
  /* background-image:
    radial-gradient(45rem 22rem at 20% 10%, color-mix(in srgb, var(--brand-deep) 22%, transparent), transparent 70%),
    radial-gradient(40rem 24rem at 90% 85%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 75%); */

  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  padding:1rem;
  position:relative;
  transition:transform .35s ease, box-shadow .35s ease, background-image .35s ease;
  transform:translateY(0);
  /* border:2px dash black; */
    border: 2px dashed #94a54f;   /* or black */

}



/* Hover: lift + invert the brand glow for contrast pop */
.serviceareas-card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 28px rgba(48, 47, 47, 0.35);

  background-image:
    radial-gradient(36rem 18rem at 15% 12%, color-mix(in srgb, var(--brand-accent) 28%, transparent), transparent 68%),
    radial-gradient(36rem 20rem at 85% 88%, color-mix(in srgb, var(--brand-deep) 30%, transparent), transparent 70%);
}


.card__border::before {
content: "";
position: absolute;
width: 200%;
height: 12rem;
background-image: linear-gradient(90deg, transparent, var(--primary), transparent);
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
animation: rotate 8s linear infinite;
pointer-events: none;
z-index: 0;
}


@keyframes rotate {
to { transform: rotate(360deg); }
}


/* .serviceareas-card_title { font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
 } */
  .serviceareas-card_title{
  color:var(--white);
  letter-spacing:.2px;
}
/* .serviceareas-card_paragraph { font-size: 0.8rem; color: var(--paragraph); margin: 0.25rem 0 0.5rem;text-align:justify; } */
.serviceareas-card_paragraph{
  color:var(--paragraph);
}
.serviceareas-line { border: none; height: 1px; background-color: var(--line); margin: 0.5rem 0; }
.serviceareas-card__list { list-style: none; padding-left: 0; margin: 0; }
.serviceareas-card__list_item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--white); }
/* .serviceareas-check { width: 1rem; height: 1rem; background-color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; } */
.serviceareas-check{
  background: var(--brand-accent);
}

.check_svg { width: 0.75rem; height: 0.75rem; fill: #0f0f0f; }
.serviceareas-button { background-image: linear-gradient(to right, #6d28d9, #a855f7); color: white; border: none; padding: 0.5rem 1rem; border-radius: 999px; width: 100%; font-size: 0.8rem; cursor: pointer; transition: 0.3s; }
.serviceareas-button:hover { opacity: 0.85; }


/* modal service */

/* gradient CTA */
.btn-gradient{
  background-image: linear-gradient(90deg,#6d28d9,#a855f7);
  color:#fff;border:0;padding:.5rem .9rem;border-radius:999px
}
.btn-gradient:hover{filter:brightness(1.05);color:#fff}

/* dark modal theme */
.sa-modal .modal-content{
  background:#0f1117;color:#eaf2ff;border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 40px rgba(0,0,0,.5)
}
.sa-modal .modal-header{background:linear-gradient(180deg,#141927,#0f1117)}
.sa-modal .btn-close{filter:invert(1) grayscale(1)}

/* table look */
.serviceareatb{
  --bg:#0f1117;--fg:#eaf2ff;--muted:#c9d4e6;--line:#1c2230;--head:#131826;
  --accent:#6d28d9;--accent2:#a855f7;
  border-radius:14px;background:
    linear-gradient(var(--bg),var(--bg)) padding-box,
    linear-gradient(90deg,var(--accent),var(--accent2)) border-box;
  border:2px solid transparent;
  box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03)
}
.serviceareatb__title{padding:12px 14px 6px;font-weight:800;color:#fff;font-size:.92rem;letter-spacing:.2px;text-transform:uppercase}
.serviceareatb__table{width:100%;border-collapse:collapse;color:var(--fg);font-size:.9rem}
.serviceareatb__table thead th{padding:10px 14px;font-weight:800;color:#fff;text-align:left;background:linear-gradient(180deg,var(--head),#0e1421);border-bottom:1px solid var(--line)}
.serviceareatb__table tbody td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--muted)}
.serviceareatb__table tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}
.serviceareatb__table tbody tr:hover{background:rgba(109,40,217,.08)}
.serviceareatb__table tbody td:last-child{text-align:right;color:#e7edff;font-weight:800}
.servicepic{
width:100%;
height:250px;
object-fit:cover

}
/* mobile stack */
@media (max-width:576px){
  .serviceareatb__table thead{display:none}
  .serviceareatb__table tbody tr{display:grid;grid-template-columns:1fr;gap:6px;padding:8px 12px}
  .serviceareatb__table tbody td{padding:0;border:0;display:flex;justify-content:space-between;gap:10px}
  .serviceareatb__table tbody td::before{content:attr(data-label);font-weight:800;color:#fff;letter-spacing:.2px}
  .serviceareatb__table tbody td:last-child{text-align:left}
}

/* ≤ 768px: head row ko column + center */
@media (max-width: 768px){
  .sa-head{
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: .5rem;
  }
  .sa-head h2{ width:100%; text-align:center; }
  .pagination-controls{
    width:100%;
    display:flex;
    justify-content:center;
    gap:.5rem;
  }
}

/* ≤ 576px: intro paragraph center + nice width */
@media (max-width: 576px){
  .serviceareas-section .intro{
    text-align: center !important;   /* override text-start */
    margin: 0 auto 1rem;
    max-width: 60ch;                 /* readable line length */
  }
  .serviceareas-card {
    padding:0px;
  }


}

/* service bulb */
/* ---------- HANGING BULB (Service Areas) ---------- */
.serviceareas-section{
  position: relative;
  /* common tuning */
  --bulb-size: 84px;
  --bulb-top: -6px;
  --wire-width: 3px;
  --glow-width: 440px;
  --glow-height: 320px;
  --glow-strength: .75;

  /* positions for both sides */
  --bulb-right: 24px;
  --bulb-left: 24px;
}

/* shared rig */
.sa-bulb-rig{
  position: absolute;
  top: var(--bulb-top);
  width: var(--bulb-size);
  height: calc(var(--bulb-size) + 12px);
  pointer-events: none;
  z-index: 3;
  transform-origin: top center;
  will-change: transform;
  animation: sa-bulb-swing 7.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* side modifiers */
.sa-bulb-rig.is-right{ right: var(--bulb-right); }
.sa-bulb-rig.is-left { left:  var(--bulb-left); }

/* cable */
.sa-bulb-wire{
  position: absolute;
  top: -110px;
  width: var(--wire-width);
  height: 130px;
  background: linear-gradient(#5f6b7a, #2b3038);
  border-radius: 999px;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.12));
  transform-origin: top center;
  animation: sa-wire-sway 7.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.sa-bulb-rig.is-right .sa-bulb-wire{
  right: calc(var(--bulb-size) / 2 - var(--wire-width) / 2);
}
.sa-bulb-rig.is-left .sa-bulb-wire{
  left:  calc(var(--bulb-size) / 2 - var(--wire-width) / 2);
}

/* bulb image */
.sa-bulb-img{
  position: absolute;
  inset: auto 0 0 0;
  margin: 0 auto;
  width: var(--bulb-size);
  height: auto;
  display: block;
  transform-origin: top center;
  filter:
    drop-shadow(0 3px 6px rgba(0,0,0,.35))
    drop-shadow(0 12px 26px rgba(0,0,0,.35));
  animation: sa-bulb-swing 7.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* warm glow */
.sa-bulb-glow{
  position: absolute;
  top: calc(100% - 4px);
  left: 50%;
  width: var(--glow-width);
  height: var(--glow-height);
  transform: translateX(-50%);
  mix-blend-mode: screen;
  opacity: var(--glow-strength);
  filter: blur(10px);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(255,214,120,.95) 0%,
      rgba(255,193, 82,.55) 22%,
      rgba(255,170, 40,.24) 45%,
      rgba(255,150,  0,.10) 68%,
      rgba(255,150,  0, 0) 100%);
  animation:
    sa-glow-flicker 2.4s infinite ease-in-out,
    sa-glow-breathe 8s infinite ease-in-out;
  animation-delay: var(--delay, 0s), var(--delay, 0s);
}

/* animations (same as before) */
@keyframes sa-bulb-swing{
  0%{transform:rotate(0)}20%{transform:rotate(4.5deg)}
  50%{transform:rotate(0)}80%{transform:rotate(-4.5deg)}
  100%{transform:rotate(0)}
}
@keyframes sa-wire-sway{
  0%{transform:rotate(0)}20%{transform:rotate(2.2deg)}
  50%{transform:rotate(0)}80%{transform:rotate(-2.2deg)}
  100%{transform:rotate(0)}
}
@keyframes sa-glow-flicker{
  0%,100%{opacity:calc(var(--glow-strength)*.92)}
  45%{opacity:calc(var(--glow-strength)*1.00)}
  60%{opacity:calc(var(--glow-strength)*.84)}
}
@keyframes sa-glow-breathe{
  0%,100%{transform:translateX(-50%) scale(1)}
  50%{transform:translateX(-50%) scale(1.04)}
}

/* hide both bulbs on mobile */
@media (max-width:576px){
  .sa-bulb-rig{ display:none !important; }
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .sa-bulb-rig,.sa-bulb-wire,.sa-bulb-img,.sa-bulb-glow{animation:none!important}
}

/*service bulb  */

/* services area*/
/* readmore pearl */
/* ===== Modal shell (brand-friendly, minimal) ===== */
:root{
  --pm-bg:#0f1117;
  --pm-fg:#eaf2ff;
  --pm-line:#1c2230;
  --pm-head:#141927;
  --pm-acc1:#6d28d9; /* you can swap with --brand if you like */
  --pm-acc2:#a855f7;
}

/* overlay container (hidden by default) */
.pearl-modal{
  position:fixed; inset:0; z-index:9999;
  display:none; opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.pearl-modal.is-open{
  display:block; opacity:1; pointer-events:auto;
}

/* dark translucent backdrop */
.pearl-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:saturate(120%) blur(2px);
}

/* dialog card */
.pearl-modal__dialog{
  position:relative; z-index:1;
  width:min(720px, 92vw);
  max-height:84vh; overflow:auto;
  margin:6vh auto 0;
  background:
    linear-gradient(var(--pm-bg), var(--pm-bg)) padding-box,
    linear-gradient(90deg, var(--pm-acc1), var(--pm-acc2)) border-box;
  border:2px solid transparent;
  border-radius:18px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.04);
  color:var(--pm-fg);
}

/* header/body/footer */
.pearl-modal__head{
  padding:16px 20px;
  background:linear-gradient(180deg, var(--pm-head), var(--pm-bg));
  border-bottom:1px solid var(--pm-line);
}
.pearl-modal__head h3{margin:0; font-size:1.15rem; letter-spacing:.2px}

.pearl-modal__body{ padding:18px 20px; line-height:1.6; color:#cfd6e3 }
.pearl-modal__body ul{ margin:8px 0 0 1.2rem }

.pearl-modal__foot{
  padding:16px 20px;
  border-top:1px solid var(--pm-line);
  display:flex; justify-content:flex-end; gap:12px;
}

/* close button */
.pearl-modal__close{
  position:absolute; top:10px; right:12px;
  width:40px; height:40px; border-radius:10px;
  border:0; background:rgba(255,255,255,.06);
  color:#fff; font-size:28px; line-height:1; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.pearl-modal__close:hover{ background:rgba(255,255,255,.12); transform:rotate(5deg) }

/* small screens */
@media (max-width:576px){
  .pearl-modal__dialog{ margin:4vh auto 0; max-height:88vh }
  .pearl-modal__head h3{ font-size:1.05rem }
}


/* ===== Team on image background ===== */
.team.team-on-image{
  position: relative;
  isolation: isolate;
  /* apni bg image yahan set karo */

  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding-top: 70px;
  padding-bottom: 70px;
}

.team.team-on-image .team-bg-overlay{
  position:absolute; inset:0; z-index:0;
  /* deep navy gradient + subtle grid glow */
  background:
    radial-gradient(1200px 500px at 20% 10%, rgba(22,163,74,.12), transparent 60%),
    radial-gradient(1200px 600px at 90% 80%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, rgba(4,12,23,.85), rgba(4,12,23,.88));
  backdrop-filter: blur(2px);
}

/* bring content above overlay */
.team.team-on-image .container{ position: relative; z-index: 1; }

/* headings on dark bg */
.team.team-on-image .carousel-title{
  color:#e8f1ff;
  text-shadow:0 8px 24px rgba(0,0,0,.45);
}

/* swiper bullets on dark bg */
.team.team-on-image .swiper-pagination .swiper-pagination-bullet{
  background: rgba(16,185,129,.45);
  box-shadow:0 0 0 2px rgba(255,255,255,.15) inset;
}
.team.team-on-image .swiper-pagination .swiper-pagination-bullet-active{
  background: linear-gradient(90deg,#22c55e,#3b82f6);
  box-shadow:0 0 14px rgba(56,189,248,.6);
}

/* glassy cards (readable on image) */
.team.team-on-image .leader-card{
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.80));
  border:1px solid rgba(255,255,255,.28);
  box-shadow: 0 16px 40px rgba(2,10,20,.45);
  backdrop-filter: blur(6px);
}
.team.team-on-image .leader-image{ height: 220px; }
.team.team-on-image .leader-image::after{
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 100%);
}

/* card text colors tuned for glass */
.team.team-on-image .leader-info h5{ color:#0b2b16; }
.team.team-on-image .leader-info .position{ color:#16a34a; }
.team.team-on-image .leader-info p{ color:#334155; }
.team.team-on-image .leader-info .contact-btn{
  background: rgba(22,163,74,.09);
  color:#16a34a; border:1px solid rgba(22,163,74,.25);
}

/* CTA on image */
.team.team-on-image .join-team-cta{
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.25);
  color:#eaf4ff;
}
.team.team-on-image .join-team-cta .cta-content h4{ color:#eaf4ff; }
.team.team-on-image .btn.btn-primary{
  background: linear-gradient(90deg,#22c55e,#3b82f6);
  border:none; color:#06121b;
}

/* subtle enter animation on scroll */
.team.team-on-image .leader-card{
  opacity:0; transform: translateY(24px) scale(.98);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s;
}
.team.team-on-image .leader-card.in-view{
  opacity:1; transform: translateY(0) scale(1);
}

/* Services Details page experrt tips*/
.maintenance-section {
  position: relative;
  width: 100%;
  color: #fff;
  overflow: hidden;
}

.maintenance-bg-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;          /* fills background properly */
  z-index: 0;
}

.maintenance-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11, 59, 47, 0.3), rgba(51, 49, 190, 0.75));
  z-index: 1;
}

.maintenance-content {
  position: relative;
  z-index: 2;
  padding: 80px 0;
}

.clear-image img {
  padding-bottom: 20px;
}

.benefit-item {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.benefit-badge {
  background-color: #94a54f;
  font-size: 1.25rem;
  padding: 10px 18px;
  border-radius: 50px;
  font-weight: 600;
  margin-right: 1rem;
}

/* Mobile optimization */
/* @media (max-width: 768px) {
  .maintenance-content { padding: 60px 0; }
  .clear-image img { height: auto; margin-bottom: 20px; }
  .benefit-badge { font-size: 1rem; padding: 8px 14px; }
} */
 /* Mobile optimization */
@media (max-width: 768px) {
  .maintenance-content {
    padding: 60px 0;
  }

  .clear-image {
    display: none; /* Hide the image on mobile */
  }

  .benefit-badge {
    font-size: 1rem;
    padding: 8px 14px;
  }

  .benefit-item {
    display: block;
    align-items: flex-start;
    margin-bottom: 1.5rem;
  }

  .maintenance-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: linear-gradient(to right, rgba(11, 59, 47, 0.3), rgba(51, 49, 190, 0.85)); */
    background:#0d72b6 !important;
    z-index: 1;
  }

  .maintenance-bg-video {
  display: none;
  }
  .mbele{
margin-top:30px;
  }


}


/*  */

  .maintenance-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(11, 59, 47, 0.3), rgba(51, 49, 190, 0.85));
    z-index: 1;
  }

  .maintenance-content {
    position: relative;
    z-index: 2;
    padding: 80px 0;
  }

  .clear-image img {
    padding-bottom: 20px;
  }

  .benefit-item {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  .benefit-badge {
    background-color: #94a54f;
    font-size: 1.25rem;
    padding: 10px 18px;
    border-radius: 50px;
    font-weight: 600;
    margin-right: 1rem;
  }

  /* Services Details page
   */


   /* PROBLEM Solution table */
   :root {
  --ink:#0b1b2b;
  --muted:#42546b;
  --line:rgba(0,0,0,.12);
  --blue:#1479ff;
  --cyan:#06b6d4;
  --emerald:#10b981;
  --amber:#f59e0b;
  --fuchsia:#d946ef;
}

/* Section base */
.ps-wrap {
  padding:64px 16px;
  background:linear-gradient(180deg,#f6f9ff 0,#f3f7fd 100%);
}
/* .ps-container { max-width:1100px; margin:0 auto; } */

.ps-title {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
}
.ps-badge {
  width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(20,121,255,.12); color:var(--blue);
}
.ps-title h2 {
  font-weight:800;
  font-size:28px;
  line-height:1.2;
  color:var(--ink);
}

/* Card shell */
.ps-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 18px 48px rgba(10,31,68,.08);
  overflow:hidden;
}

/* Table */
.ps-table {
  width:100%;
  border-collapse:collapse;
  color:#23354c;
}
.ps-table thead th {
  text-align:left;
  padding:16px 20px;
  font-weight:600;
  font-size:13px;
  line-height:1.2;
  color:#fff;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  letter-spacing:.3px;
}
.ps-table tbody td {
  padding:16px 20px;
  border-top:1px solid #e7eef8;
  vertical-align:top;
}
.ps-table tbody tr:hover { background:#f5f9ff; }
.ps-strong { font-weight:700; color:var(--ink); }

/* Time Badges */
.ps-time {
  display:inline-flex;
  align-items:center;
  font-weight:700;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
}
.t-blue { background:rgba(20,121,255,.12); color:var(--blue); }
.t-emerald { background:rgba(16,185,129,.12); color:var(--emerald); }
.t-amber { background:rgba(245,158,11,.12); color:var(--amber); }
.t-fuchsia { background:rgba(217,70,239,.12); color:var(--fuchsia); }
.t-cyan { background:rgba(6,182,212,.12); color:var(--cyan); }

/* Mobile Cards */
.ps-mobile { display:none; margin-top:12px; }
.ps-mcard {
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  padding:14px 14px 12px;
  margin-bottom:10px;
  box-shadow:0 10px 24px rgba(10,31,68,.06);
}
.ps-mhead { display:flex; justify-content:space-between; gap:10px; }
.ps-mtitle {
  font-weight:700;
  font-size:16px;
  line-height:1.2;
  color:black;
}
.ps-mbody {
  margin-top:6px;
  color:#2b3e59;
  font-weight:500;
  font-size:14px;
  line-height:1.5;
}
.ps-mbody span { font-weight:700; color:#1e2f45; }

/* Responsive */
@media (max-width:768px) {
  .ps-desktop { display:none; }
  .ps-mobile { display:block; }
  .ps-title h2 { font-size:24px; }
}

/* Equal-width repair badges */
.repair-badge {
  display:inline-block;
  min-width:100px;
  text-align:center;
  padding:6px 12px;
  border-radius:9999px;
  font-weight:600;
  font-size:0.875rem;
  margin:0 auto;
}
.repair-blue { background:#e0e9ff; color:#3163ff; }
.repair-green { background:#d7f9e4; color:#26a35a; }
.repair-orange { background:#ffe7c2; color:#ff7b00; }
.repair-pink { background:#f8d8ff; color:#b84bff; }
.repair-cyan { background:#d6f6ff; color:#2cb3e5; }

.repair-badge:hover {
  transform:scale(1.05);
  transition:0.2s ease;
  box-shadow:0 0 10px rgba(0,0,0,0.1);
}

.fa-fan {
  animation: spin 3s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* ✅ Force same site-wide font in Problem–Solution section */
.ps-wrap,
.ps-wrap * {
  font-family: inherit !important;
}

/* Optional: headings bhi inherit karein */
.ps-title h2,
.ps-title h3,
.ps-mtitle {
  font-family: inherit !important;
}


/* ========== CLARITY PATCH for ps-table (append at end) ========== */

/* Global polish (only inside .ps-wrap) */
.ps-wrap{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ink);
}
.ps-wrap, .ps-table{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  letter-spacing: .2px;
}

/* Card & container */
.ps-card{
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(13,30,64,.10);
  border-color: #e6ecf5;
}

/* Header: bigger, bolder, clearer */
.ps-table thead th{
  font-weight: 800;
  font-size: 14.5px;
  line-height: 1.25;
  padding: 18px 22px;            /* a bit more breathing room */
  background: linear-gradient(90deg, #0f6dff, #05c2dc);
  color: #fff;
  position: relative;
  white-space: nowrap;
}
.ps-table thead th:first-child{ border-top-left-radius:14px }
.ps-table thead th:last-child { border-top-right-radius:14px }

/* Body cells: bigger text + middle align */
.ps-table{
  border-collapse: separate;      /* so hover/shadows feel smoother */
  border-spacing: 0;
  font-size: 15.5px;              /* clearer size */
  line-height: 1.6;
  color: #1a2a40;
}
.ps-table tbody td{
  padding: 18px 22px;
  vertical-align: middle;
  border-top: 1px solid #e9eff7;
  background: #fff;
}

/* Zebra + hover */
.ps-table tbody tr:nth-child(even) td{ background:#f8fbff }
.ps-table tbody tr:hover td{
  background:#f2f8ff;
  box-shadow: inset 0 1px 0 rgba(15,109,255,.06), inset 0 -1px 0 rgba(15,109,255,.06);
}

/* First column: stronger title look */
.ps-strong{
  font-weight: 800;
  color: #0b1b2b;
}
.ps-table tbody td:first-child{
  color:#0b1b2b;
  font-weight: 800;
}

/* Badge readability: a bit bigger */
.ps-time{
  font-size: 12.5px;
  padding: 7px 12px;
  font-weight: 800;
}

/* Repair badges (equal width): clearer */
.repair-badge{
  min-width: 106px;
  font-size: .9rem;
  padding: 7px 12px;
}

/* Title block spacing */
.ps-title{
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.ps-title h2{
  margin: 0;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 900;
}
.ps-title p{ margin: 4px 0 0; color: var(--muted); max-width: 80ch }

/* Mobile cards: larger and airier */
.ps-mobile{ margin-top: 14px }
.ps-mtitle{
  font-size: 17px;
  font-weight: 800;
}
.ps-mbody{
  font-size: 15px;
  line-height: 1.65;
}
.ps-mcard{ padding: 16px 16px 14px }

/* Column helpers (use optional on your <th> or <td>) */
.ps-num{ text-align: right; font-variant-numeric: tabular-nums; }
.ps-nowrap{ white-space: nowrap; }
.ps-muted{ color: #4b5e76; }

/* Optional: sticky header (uncomment if needed) */
/*
.ps-card{ overflow: auto; }
.ps-table thead th{ position: sticky; top: 0; z-index: 2; }
*/

/* Optional: subtle dividers between columns (desktop) */
@media (min-width: 992px){
  .ps-table tbody td + td{ box-shadow: inset 1px 0 0 #f0f4fb; }
}

/* Responsive: keep clarity on small screens */
@media (max-width: 768px){
  .ps-table{ font-size: 15px; }
  .ps-table tbody td{ padding: 16px 16px; }
  .ps-time{ font-size: 12px; padding: 6px 10px; }
}



/* Button hamesha clickable */
.pearl-btn { position: relative; z-index: 5; display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; }
/* Inner children click na khaayen */
.pearl-btn > * { pointer-events: none; }

/* Hero ke decorative layers click block na karein */
.hero-section .uae-wave,
.hero-section::before,
.hero-section::after { pointer-events: none !important; }


/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
/* .contact {
  background: linear-gradient(135deg, var(--background-color), color-mix(in srgb, var(--accent-color), transparent 97%));
} */
/* .section-title-details{
    text-align: center;
  position: relative;
color:black;
} */

/* Contact title block — make text crystal clear over image */
.section-title-details{
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 980px;         /* keeps line-length readable */
  margin: 0 auto 24px;
  padding: 24px 22px;
  color: #fff;
}

/* frosted-glass panel behind the text */
.section-title-details::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: rgba(0,0,0,.55);                  /* dimmer for contrast */
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  z-index: -1;                                   /* stays behind text */
}

/* typography tweaks for clarity */
.section-title-details h2{
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.section-title-details p{
  color: #e6edf7;
  line-height: 1.75;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* a touch stronger on small screens */
@media (max-width: 768px){
  .section-title-details{ padding: 18px 16px; }
  .section-title-details::before{ background: rgba(0,0,0,.62); }
}

.contact .contact-form-card {
  background: var(--surface-color);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
  position: relative;
  overflow: hidden;
}

.contact .contact-form-card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* height: 4px; */
  /* background: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #6366f1 30%)); */
}

.contact .contact-form-card .form-header {
  text-align: center;
  margin-bottom: 35px;
}

.contact .contact-form-card .form-header .header-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #6366f1 30%));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.contact .contact-form-card .form-header .header-icon i {
  font-size: 28px;
  color: var(--contrast-color);
}

.contact .contact-form-card .form-header h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--heading-color);
}

.contact .contact-form-card .form-header p {
  font-size: 15px;
  line-height: 1.6;
  color:white;
  margin-bottom: 0;
}

.contact .contact-form-card .php-email-form .form-control {
  height: 52px;
  padding: 16px 20px;
  border-radius: 16px;
  border: 2px solid #a5ca3e;
  /* background-color: color-mix(in srgb, var(--surface-color), var(--background-color) 30%); */
  background-color:black;
  color:white;
  font-size: 15px;
  transition: all 0.3s ease;
}

.contact .contact-form-card .php-email-form .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 90%);
  background-color: var(--surface-color);
  outline: none;
}

.contact .contact-form-card .php-email-form .form-control::placeholder {
  color:white;
  font-weight: 400;
}

.contact .contact-form-card .php-email-form textarea.form-control {
  height: 100px;
  resize: vertical;
  font-family: inherit;
}

.contact .contact-form-card .php-email-form .submit-btn {
  width: 100%;
  /* background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #6366f1 30%)); */
  background:#a5ca3e;
  color: var(--contrast-color);
  border: none;
  padding: 16px 30px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.contact .contact-form-card .php-email-form .submit-btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--contrast-color), transparent 85%), transparent);
  transition: left 0.6s ease;
}

.contact .contact-form-card .php-email-form .submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px color-mix(in srgb, var(--accent-color), transparent 75%);
}

.contact .contact-form-card .php-email-form .submit-btn:hover:before {
  left: 100%;
}

.contact .contact-form-card .php-email-form .submit-btn:hover i {
  transform: translateX(3px);
}

.contact .contact-form-card .php-email-form .submit-btn span,
.contact .contact-form-card .php-email-form .submit-btn i {
  position: relative;
  z-index: 1;
}

.contact .contact-form-card .php-email-form .submit-btn i {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.contact .contact-info-area {
  padding-left: 40px;
}

.contact .contact-info-area .info-header {
  margin-bottom: 40px;
}

.contact .contact-info-area .info-header h3 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--heading-color);
  line-height: 1.2;
}

.contact .contact-info-area .info-header p {
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 0;
}

.contact .contact-info-area .contact-methods {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

.contact .contact-info-area .method-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: var(--surface-color);
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 92%);
  transition: all 0.3s ease;
}

.contact .contact-info-area .method-card:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--accent-color), transparent 88%);
  /* border-color: color-mix(in srgb, var(--accent-color), transparent 80%); */
   border-color:#0d72b6;
}

.contact .contact-info-area .method-card:hover .card-icon {
  /* background: var(--accent-color); */
  border:1px solid #0d72b6;
  background-color:#a5ca3e;
}

.contact .contact-info-area .method-card:hover .card-icon i {
  /* color: var(--contrast-color); */
  color:white;
}

.contact .contact-info-area .method-card .card-icon {
  width: 50px;
  height: 50px;
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.contact .contact-info-area .method-card .card-icon i {
  font-size: 20px;
  /* color: var(--accent-color); */
  color:white;
  transition: all 0.3s ease;
}

.contact .contact-info-area .method-card .card-content {
  flex: 1;
}

.contact .contact-info-area .method-card .card-content h5 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--heading-color);
}

.contact .contact-info-area .method-card .card-content p {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
  /* color: var(--default-color); */
  color:white;
}

.contact .contact-info-area .method-card .card-content .response-time {
  font-size: 13px;
  /* color: color-mix(in srgb, var(--default-color), transparent 40%); */
  color:white;
}

.contact .contact-info-area .additional-info .info-stats {
  display: flex;
  justify-content:center;
  gap: 30px;
  padding: 30px;
  background:black;
  border-radius: 20px;
  margin-bottom: 30px;
}

.contact .contact-info-area .additional-info .info-stats .stat-item {
  text-align: center;
}

.contact .contact-info-area .additional-info .info-stats .stat-item .stat-number {
  font-size: 24px;
  font-weight: 700;
  /* color: var(--accent-color); */
  color:#a5ca3e;
  margin-bottom: 4px;
}

.contact .contact-info-area .additional-info .info-stats .stat-item .stat-label {
  font-size: 13px;
  /* color: color-mix(in srgb, var(--default-color), transparent 30%); */
  color:white;
  font-weight: 500;
}

.contact .contact-info-area .additional-info .social-connect {
  text-align: center;
}

.contact .contact-info-area .additional-info .social-connect h6 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  /* color: var(--heading-color); */
  color:black;
}

.contact .contact-info-area .additional-info .social-connect .social-links {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.contact .contact-info-area .additional-info .social-connect .social-links .social-link {
  width: 40px;
  height: 40px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact .contact-info-area .additional-info .social-connect .social-links .social-link:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.contact .contact-info-area .additional-info .social-connect .social-links .social-link i {
  font-size: 16px;
}

@media (max-width: 992px) {
  .contact .contact-info-area {
    padding-left: 0;
    margin-top: 40px;
  }

  .contact .contact-info-area .info-header h3 {
    font-size: 28px;
  }

  .contact .contact-info-area .additional-info .info-stats {
    gap: 20px;
    padding: 25px;
  }
}

@media (max-width: 768px) {
  .contact .contact-form-card {
    padding: 30px 25px;
  }

  .contact .contact-form-card .form-header h3 {
    font-size: 24px;
  }

  .contact .contact-info-area .info-header h3 {
    font-size: 26px;
  }

  .contact .contact-info-area .method-card {
    padding: 20px;
  }

  .contact .contact-info-area .method-card:hover {
    transform: translateY(-3px);
  }

  .contact .contact-info-area .additional-info .info-stats {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}
/* ================================
   CONTACT — GLASSMORPHISM UPGRADE
   (drop-in overrides; no HTML change)
   ================================ */

:root{
  --glass-bg: rgba(16,22,38,.38);      /* card bg over photo */
  --glass-bdr: rgba(255,255,255,.16);  /* border */
  --glass-shadow: 0 12px 44px rgba(0,0,0,.35);
  --glass-blur: 14px;
}

/* Dim only the background image so text pops */
.contact{ position: relative; isolation:isolate; }
.contact::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.52));
}
/* bring real content above overlay */
.contact > .container{ position:relative; z-index:1; }

/* Title block readability */
.contact .section-title-details{ color:#fff; text-align:center; }
.contact .section-title-details h2{ color:#fff; }
.contact .section-title-details p{
  color:#e8eef7; max-width:1000px; margin:8px auto 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* ===== Glass cards ===== */
.contact .contact-form-card,
.contact .contact-info-area .method-card,
.contact .contact-info-area .additional-info .info-stats{
  background: var(--glass-bg);
  /* border: 1px solid var(--glass-bdr); */
  border:2px solid #a5ca3e;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%);
}

/* Form fields — frosted inputs */
.contact .contact-form-card .php-email-form .form-control{
  background: rgba(255,255,255,.06);
  /* border: 1px solid rgba(255,255,255,.22); */
  border:1px soplid #a5ca3e !important;
  color:#f5f8ff;
}
.contact .contact-form-card .php-email-form .form-control::placeholder{ color:#d7dfef; }

/* Right-side copy high contrast */
.contact .contact-info-area .info-header h3{ color:#fff; }
.contact .contact-info-area .info-header p{ color:#e6edf7; }
.contact .contact-info-area .method-card .card-content p,
.contact .contact-info-area .method-card .card-content .response-time{
  color:#dbe7ff;
}

/* Icons tile (left) with soft glass */
.contact .contact-info-area .method-card .card-icon{
  /* background: rgba(255,255,255,.10); */
   background: #0d72b6;
  border: 2px solid #a5ca3e;
}


/* Stats box labels a bit brighter */
.contact .contact-info-area .additional-info .info-stats .stat-label{ color:#e4ebf7; }

/* ===== Social — real brand colors ===== */
.contact .contact-info-area .additional-info .social-connect h6{ color:#fff; }

.contact .contact-info-area .additional-info .social-connect .social-links .social-link{
  width:40px;height:40px;border-radius:12px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:center;
  transition:.25s ease; color:#111827;
}

/* order: LinkedIn, X, GitHub, Discord (no HTML change needed) */
.social-links a:nth-child(1){ color:#0A66C2; } /* LinkedIn */
.social-links a:nth-child(2){ color:#000000; } /* X */
.social-links a:nth-child(3){ color:#24292e; } /* GitHub */
.social-links a:nth-child(4){ color:#5865F2; } /* Discord */

/* Hover -> brand fill + white icon */
.social-links a:hover{ transform:translateY(-3px); }
.social-links a:nth-child(1):hover{ background:#0A66C2; }
.social-links a:nth-child(2):hover{ background:#000000; }
.social-links a:nth-child(3):hover{ background:#24292e; }
.social-links a:nth-child(4):hover{ background:#5865F2; }
.social-links a:hover i{ color:#fff; }

/* Mobile: slightly stronger dim for perfect legibility */
@media (max-width: 768px){
  .contact::before{ background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.60)); }
}


/* ceiling */

/* ===== AC Section Styling ===== */
/* .ac-section {
  background: linear-gradient(135deg, #f9fbff 0%, #eaf2ff 100%);
  padding: 80px 0;

  position: relative;
  overflow: hidden;
}

.ac-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ac-content-box {
  position: relative;
  z-index: 2;
  color: #0b1a2f;
}

.ac-content-box h2 {
  color: #013a63;
  font-weight: 800;
  font-size: 2.2rem;
  margin-bottom: 20px;
}

.ac-content-box p {
  color: #334155;
  line-height: 1.7;
  margin-bottom: 15px;
}

.ac-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.ac-list li {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #013a63;
  margin-bottom: 10px;
}

.ac-list i {
  color: #007bff;
  margin-right: 10px;
  font-size: 1.2rem;
}

.btn-ac {
  background: linear-gradient(90deg, #007bff, #00b4d8);
  color: #fff;
  padding: 12px 26px;
  border-radius: 9999px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-ac:hover {
  background: linear-gradient(90deg, #0056b3, #0077b6);
  color: #fff;
  transform: translateY(-2px);
}

.ac-image {
  max-width: 90%;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
}


 */


/* right ac dea */
/* ===== Section base ===== */
/* homemajorservicdesac */
    /* ====== SECTION (bg only here) ====== */
        :root{
      --fi-blue:#0078C8;
      --fi-green:#ffff;
      --section-bg:#0d72b6;   /* section ka background */
      --white:#f8fafc;

      --card-border:rgba(0,120,200,.22);
      --row-gap:28px;
      --col-gap:30px;
    }
    .section.homePartners{
      position:relative; overflow:hidden; padding:100px 0;
      background:var(--section-bg);       /* solid color only */
      color:var(--white);
    }

    .container-s{max-width:1200px;margin:0 auto;padding:0 20px}

    /* ====== HEADINGS ====== */
    .genericHead{text-align:center;margin-bottom:56px}
    .genericHead__subTitle{
      letter-spacing:.25em; text-transform:uppercase;
      color:var(--fi-green); font-weight:700; font-size:.9rem;
      margin-bottom:16px; display:inline-block; position:relative;
      opacity:.95;
    }
    .genericHead__subTitle::after{
      content:""; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
      width:90px; height:3px; border-radius:999px;
      background:linear-gradient(90deg,var(--fi-blue),var(--fi-green));
      box-shadow:0 0 20px rgba(0,120,200,.35);
      animation:linePulse 2.4s ease-in-out infinite;
    }
    @keyframes linePulse{
      0%,100%{transform:translateX(-50%) scaleX(.8); opacity:.8}
      50%{transform:translateX(-50%) scaleX(1.15); opacity:1}
    }
    .genericHead h2{
      font-size:2.6rem; font-weight:800; margin:0;
      /* background:linear-gradient(90deg,var(--fi-blue),var(--fi-green)); */
      background-color:#a5ca3e;
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    }

    /* ====== ROW WRAPPER ====== */
    .rows{display:flex;flex-direction:column;gap:var(--row-gap)}
    .marquee-row{position:relative;
        overflow:hidden;
        padding:4px 0;}
    .track{
      display:flex; gap:var(--col-gap);
      animation:scroll-left linear infinite;
      animation-duration:36s;
    }
    .marquee-row.reverse .track{animation-name:scroll-right}
    .marquee-row.speed-30 .track{animation-duration:30s}
    .marquee-row.speed-40 .track{animation-duration:40s}
    @keyframes scroll-left{from{transform:translateX(0)} to{transform:translateX(-50%)}}
    @keyframes scroll-right{from{transform:translateX(-50%)} to{transform:translateX(0)}}

    /* ====== CARD (no hover, no click) ====== */
    .card{
      flex:0 0 auto;
      width:200px;height:120px;
      border:1px solid var(--card-border);
      border-radius:16px;
      background:rgba(17,26,44,.55);
      backdrop-filter:blur(12px);
      display:flex;align-items:center;justify-content:center;
      position:relative;overflow:hidden;
      box-shadow:0 10px 25px rgba(0,0,0,.25);
      cursor:default;
    }
/* Only photos should fill the whole card */
.cover-img{
  width:100%;
  height:100%;
  object-fit:cover;      /* fills completely */
  display:block;
  border-radius:inherit; /* rounded corners match the card */
}

    /* ====== LOGO (renamed to homelogo) ====== */
    .homelogo{
      width:100%;height:100%; object-fit:cover; display:block;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,.18));
      opacity:.96;
    }

    /* ====== STATS (static) ====== */
    .stats-container{
      display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:56px;
    }
    .stats-box{
      text-align:center; min-width:140px; padding:20px; border-radius:16px;
      /* background:rgba(255,255,255,0.06); */
      background:#a5ca3e;
      border:1px solid rgba(0,120,200,.18);
      color:var(--white);
      border:2px dashed blue;
    }
    .stats-number{ font-size:2.2rem; font-weight:800; color:var(--fi-green) }
    .stats-label{ opacity:.9; letter-spacing:.06em; text-transform:uppercase }

    /* ====== RESPONSIVE ====== */
    @media (max-width:1024px){
      .card{width:180px;height:110px}
      .homelogo{width:120px;height:64px}
    }
    @media (max-width:768px){
      .section.homePartners{padding:60px 0}
      .genericHead h2{font-size:2rem}
      .card{width:170px;height:100px}
      .homelogo{width:110px;height:58px}
    }
    @media (max-width:520px){
      .card{width:150px}
      .homelogo{width:100px}
    }
/* container */
/* AC section  */
#ac-services .ac-cardglass strong,
#ac-services .ac-cardglass a strong{
  color:black !important;
  font-weight:600;           /* NOTE: unitless number, NOT 600px */
}

.ac-section {

  /* padding: 80px 0; */

  position: relative;
  overflow: visible;
}

.ac-blue-wrap{
background: radial-gradient(
    circle at 30% 40%,
    #153aa0 0%,     /* inner deep blue */
    #0b4dd9 45%,    /* royal core tone */
    #082e7a 80%,    /* darker outer rim */
    #041c4d 100%    /* subtle navy edge */
  );     /* royal blue bar inside container */
     color: #fff;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(2, 8, 23, 0.2);
  border: 3px dashed #69d354ff;
  position: relative;
  overflow: hidden;
}
@media (max-width: 575.98px){ .ac-blue-wrap{padding:20px} }

/* ===== Left glass card ===== */
.ac-cardglass{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius:16px;
  padding:24px;
  box-shadow:0 12px 30px rgba(2,8,23,.12);
}
.issue-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.issue-head-img{flex:0 0 auto;width:88px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.12));border-radius:8px}
@media (max-width:576px){ .issue-head-img{width:64px}
.issue-title{
    font-size:17px !important;
}
 }

/* Heading: bold + underline accent */
.issue-title{
  margin:0;
  font-family:"Inter",system-ui,Segoe UI,Roboto,sans-serif;
  color:#fff;
  font-weight:800;
  font-size:25px;
  /* letter-spacing:-.015em; */
  position:relative;
  text-wrap:balance;
}
.issue-title.is-underline{padding-bottom:.25rem}
.issue-title.is-underline::after{
  content:"";position:absolute;left:0;bottom:-2px;height:6px;width:46%;
  border-radius:999px;background:linear-gradient(90deg,#22d3ee,#60a5fa);
  box-shadow:0 6px 18px rgba(96,165,250,.35);transform:scaleX(0);transform-origin:left;
  animation:underlineIn .7s cubic-bezier(.2,.9,.2,1) .1s forwards;
}
.issue-title.attract{ text-shadow:0 1px 0 rgba(0,0,0,.15), 0 16px 40px rgba(0,0,0,.18) }
@keyframes underlineIn{to{transform:scaleX(1)}}

/* Body text */
.ac-content-box p{ color:#e6f0ff; line-height:1.7; margin-bottom:12px }
.ac-list{list-style:none;padding:0;margin:16px 0 14px}
.ac-list li{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;margin-bottom:10px}
.ac-list i{color:#22d3ee;font-size:1.05rem}

/* ===== Right interactive gallery ===== */
.ac-sticky-gallery{--card-w:20rem;--card-h:30rem;--accent:#22d3ee;--accent-fade:rgba(34,211,238,.8);position:relative;isolation:isolate}
/* .ac-sticky-gallery-three{--card-w:20rem;--card-h:22rem;--accent:#22d3ee;--accent-fade:rgba(34,211,238,.8);position:relative;isolation:isolate} */

.ac-sticky-list{list-style:none;display:flex;overflow-x:auto;overflow-y:visible;padding-bottom:2rem}
.ac-sticky-list li{flex:0 0 45vw;max-width:var(--card-w);position:sticky;top:0;left:0;height:var(--card-h);z-index:0}
.ac-sticky-list li:hover{z-index:10;transform:translateZ(0)}
.ac-sticky-list li span{position:absolute;top:0;left:0;height:100%;writing-mode:vertical-lr;transform:rotate(180deg);color:#fff;padding:.75em;font-weight:700;z-index:2;
    background:linear-gradient(180deg,rgba(2,8,23,.85),rgba(2,8,23,.4));
    border-radius:10px 0 0 10px}
.ac-sticky-list li::before{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,var(--accent-fade) 2%,transparent 60%);border-radius:12px;z-index:0;pointer-events:none}
.ac-card .img-base,.ac-card .img-hover{position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;height:var(--card-h);object-fit:cover;border-radius:12px;transition:opacity .45s ease,transform .45s ease;box-shadow:0 10px 24px rgba(2,8,23,.35)}
.ac-card .img-base{opacity:1;z-index:1}
.ac-card .img-hover{opacity:0;z-index:2}
.ac-card:hover .img-base{opacity:0;transform:translateY(-50%) scale(1.02)}
.ac-card:hover .img-hover{opacity:1;transform:translateY(-50%) scale(1)}
@media (min-width:53rem){
  .ac-sticky-list li:nth-child(1){left:0}
  .ac-sticky-list li:nth-child(2){left:2.2rem}
  .ac-sticky-list li:nth-child(3){left:4.4rem}
  .ac-sticky-list li:nth-child(4){left:6.6rem}
  .ac-sticky-list li:nth-child(5){left:8.8rem}
  .ac-sticky-list li:nth-child(6){left:11rem}
  .ac-sticky-list li:nth-child(7){left:13.2rem}
  .ac-sticky-list li:nth-child(8){left:15.4rem}
}

/* Scrollbar tweak */
.ac-sticky-list::-webkit-scrollbar{height:10px}
.ac-sticky-list::-webkit-scrollbar-thumb{background:#9ed9f6;border-radius:10px}

/* ===== Modal ===== */
.ac-modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;z-index:9999;padding:2rem}
.ac-modal.open{display:flex}
.ac-modal img{max-width:min(92vw,1100px);max-height:85vh;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.ac-modal__close{position:absolute;top:18px;right:22px;background:#111827;color:#fff;border:0;font-size:30px;line-height:1;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ac-modal__close:hover{background:#0f172a}
@media (prefers-reduced-motion:reduce){ .ac-card .img-base,.ac-card .img-hover{transition:none} }

/* media query of common forx issue

/* =============== AC section: mobile order fix (gallery first) =============== */
@media (max-width: 767.98px){
  /* ensure flex ordering works */
  #ac-services .row{ display:flex; flex-wrap:wrap; }


/*
  #ac-services .row > .col-lg-6:nth-of-type(1){ order: 2; }
  #ac-services .row > .col-lg-6:nth-of-type(2){ order: 1; }


  #ac-services .row > .col-lg-6:nth-of-type(3){ order: 3; }
  #ac-services .row > .col-lg-6:nth-of-type(4){ order: 4; }
  #ac-services .row > .col-lg-6:nth-of-type(5){ order: 5; }
  #ac-services .row > .col-lg-6:nth-of-type(6){ order: 6; } */

  /* equal left/right padding on phones */
  :root{ --gutter-m:14px; }
  #ac-services .container{ padding-left:var(--gutter-m); padding-right:var(--gutter-m); }

  /* gallery cards: better mobile feel */
  .ac-sticky-list{ scroll-snap-type:x mandatory; gap:14px; padding-bottom:1.25rem; }
  .ac-sticky-list li{ scroll-snap-align:center; flex-basis: 78vw; height: 60vh; }
  .ac-card .img-base, .ac-card .img-hover{ height: 60vh; }
  .ac-sticky-list::-webkit-scrollbar{ height:8px; }
}

/* small phones (≤575px): tighten a bit */
@media (max-width: 575.98px){
  .ac-sticky-list li{ flex-basis: 84vw; height: 54vh; }
  .ac-card .img-base, .ac-card .img-hover{ height: 54vh; }
  .ac-blue-wrap{ padding: 18px; } /* equal gutters with container */
  .mbtop{

    margin-top:5px!important;
  }
}
  .mbtop{

    margin-top:5px!important;
  }

/* paionting */
   /* ===== CONFIG ===== */
    .paintsection{
      --roller-size: 250px;
      --duration: 12s;

      /* START color (plain) */
      --base: #0d72b6;        /* 👈 yahi pehle dikhega */

      /* Final painted gradient colors */
      --blue:  #0d72b6;       /* 👈 aapka blue (radial me use hoga) */
      --green: #A5C936;
      --ink-2: #0c1526;
    }

    /* Container + flip */
    .paintsection .ac-blue-wrap{
      position:relative; overflow:hidden; border-radius:18px;
      background: var(--base);
      animation: bgFlip var(--duration) steps(1,end) infinite alternate;
      isolation:isolate;
    }
    .paintsection .ac-blue-wrap > *{ position:relative; z-index:3; }

    /* Roller centered */
    .paintsection .ac-blue-wrap::after{
      content:"";
      position:absolute; left:50%; top:10%;
      width:var(--roller-size); height:var(--roller-size);
      background: var(--roller-img) center/contain no-repeat;
      filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
      z-index:2; pointer-events:none;
      animation: rollerY var(--duration) ease-in-out infinite alternate;
      transform-origin:50% 60%;
    }

    /* ===== KEYFRAMES =====
       0–39%: plain #0d72b6
       40–100%: radial (fallback approx) */
    @keyframes bgFlip{
      0%,39%  { background: var(--base); }
      40%,100%{
        /* Fallback radial (without color-mix) */
        background:
          radial-gradient(60% 60% at 20% 40%, rgba(13,114,182,.55) 0%, transparent 65%),
          radial-gradient(60% 60% at 80% 60%, rgba(165,201,54,.55) 0%, transparent 65%),
          linear-gradient(180deg, #0b1220 0%, var(--ink-2) 60%, #0a0f1d 100%);
      }
    }

    /* Modern browsers: high-fidelity oklab color-mix radial */
    @supports (background: color-mix(in oklab, #000 50%, #fff 50%)) {
      @keyframes bgFlip{
        0%,39%  { background: var(--base); }
        40%,100%{
          background:
            radial-gradient(60% 60% at 20% 40%,
              color-mix(in oklab, var(--blue) 55%, white 0%) 0%, transparent 65%),
            radial-gradient(60% 60% at 80% 60%,
              color-mix(in oklab, var(--green) 55%, white 0%) 0%, transparent 65%),
            linear-gradient(180deg, #0b1220 0%, var(--ink-2) 60%, #0a0f1d 100%);
        }
      }
    }

    @keyframes rollerY{
      0%   { top:10%;  transform: translateX(-50%) rotate(-8deg); }
      50%  { top:80%;  transform: translateX(-50%) rotate(0deg);  }
      100% { top:10%;  transform: translateX(-50%) rotate(8deg);  }
    }

    /* Responsive + accessibility */
    @media (max-width: 767.98px){
      .paintsection{ --roller-size: 160px; }
    }
    @media (prefers-reduced-motion: reduce){
      .paintsection .ac-blue-wrap,
      .paintsection .ac-blue-wrap::after{ animation:none !important; }
      .paintsection .ac-blue-wrap{
        background:
          radial-gradient(60% 60% at 20% 40%,
            color-mix(in oklab, var(--blue) 55%, white 0%) 0%, transparent 65%),
          radial-gradient(60% 60% at 80% 60%,
            color-mix(in oklab, var(--green) 55%, white 0%) 0%, transparent 65%),
          linear-gradient(180deg, #0b1220 0%, var(--ink-2) 60%, #0a0f1d 100%);
      }
    }

    .paintsec {
  position: relative;
  width: 100%;
  height: var(--card-h, 22rem);
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease;
}

.paintsec:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.paintsec .paint-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  border-radius: inherit;
}

.paintsec:hover .paint-img {
  transform: scale(1.05);
}

/* Optional gradient overlay */
.paintsec::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
  pointer-events: none;
  border-radius: inherit;
}


/* pain */
.paintsec {
  position: relative;
  width: 100%;
  height: var(--card-h, 20rem); /* custom height control */
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  transition: height 0.4s ease;
}

.paintsec img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: inherit;
}

/* ✅ Responsive control for next section alignment */
@media (max-width: 992px) {
  .paintsec {
    height: 18rem; /* tablet */
  }
}
@media (max-width: 768px) {
  .paintsec {
    height: 16rem; /* mobile */
  }
}


/* ac installation */
/*--------------------------------------------------------------



# Portfolio Details Section
--------------------------------------------------------------*/
/* .portfolio-details {
  --section-spacing: 2.5rem;
}

.portfolio-details .portfolio-details-media {
  position: relative;
}

.portfolio-details .portfolio-details-media .main-image {
  margin-bottom: 1rem;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider {
  position: relative;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-wrapper {
  height: auto !important;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-slide img {
  aspect-ratio: 3/2;
  object-fit: cover;
  width: 100%;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-next,
.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-prev {
  background-color: var(--contrast-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-next:after,
.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-prev:after {
  font-size: 16px;
  color: var(--accent-color);
  font-weight: bold;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-next:hover,
.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-prev:hover {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-next:hover:after,
.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-prev:hover:after {
  color: var(--contrast-color);
}

.portfolio-details .portfolio-details-media .thumbnail-grid img {
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.portfolio-details .portfolio-details-media .thumbnail-grid img:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.portfolio-details .portfolio-details-media .tech-stack-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.5rem;
}

.portfolio-details .portfolio-details-media .tech-stack-badges span {
  display: inline-block;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 20px;
  background-color: color-mix(in srgb, var(--heading-color), transparent 85%);
  color: var(--heading-color);
  transition: all 0.3s ease;
}

.portfolio-details .portfolio-details-media .tech-stack-badges span:hover {
  background-color: color-mix(in srgb, var(--heading-color), transparent 70%);
  transform: translateY(-2px);
}

.portfolio-details .portfolio-details-content {
  padding: 0 0 0 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.portfolio-details .portfolio-details-content .project-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.portfolio-details .portfolio-details-content .project-meta .badge-wrapper .project-badge {
  display: inline-block;
  padding: 8px 16px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
}

.portfolio-details .portfolio-details-content .project-meta .date-client {
  display: flex;
  gap: 1.5rem;
}

.portfolio-details .portfolio-details-content .project-meta .date-client .meta-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.portfolio-details .portfolio-details-content .project-meta .date-client .meta-item i {
  margin-right: 6px;
  color: var(--accent-color);
}

.portfolio-details .portfolio-details-content .project-title {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--heading-color);
}

.portfolio-details .portfolio-details-content .project-website {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.portfolio-details .portfolio-details-content .project-website i {
  font-size: 22px;
  color: var(--accent-color);
  margin-right: 8px;
}

.portfolio-details .portfolio-details-content .project-website a {
  font-weight: 500;
  transition: all 0.3s;
}

.portfolio-details .portfolio-details-content .project-website a:hover {
  letter-spacing: 0.5px;
}

.portfolio-details .portfolio-details-content .project-overview {
  margin-bottom: var(--section-spacing);
}

.portfolio-details .portfolio-details-content .project-overview .lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 1.5rem;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item {
  border: none;
  background: none;
  margin-bottom: 10px;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button {
  padding: 1rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--heading-color);
  background-color: color-mix(in srgb, var(--surface-color), transparent 70%);
  border-radius: 8px !important;
  box-shadow: none;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  background-color: var(--surface-color);
  color: var(--accent-color);
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) i {
  color: var(--accent-color);
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button::after {
  background-size: 14px;
  width: 14px;
  height: 14px;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button i {
  font-size: 1.1rem;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-body {
  padding: 1rem;
  background-color: var(--surface-color);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-body p {
  margin-bottom: 0;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  line-height: 1.6;
}

.portfolio-details .portfolio-details-content .project-features {
  margin-bottom: var(--section-spacing);
}

.portfolio-details .portfolio-details-content .project-features h3 {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  margin-bottom: 1.2rem;
}

.portfolio-details .portfolio-details-content .project-features h3 i {
  margin-right: 10px;
  color: var(--accent-color);
  font-size: 1.1em;
}

.portfolio-details .portfolio-details-content .project-features .feature-list {
  list-style: none;
  padding-left: 0;
}

.portfolio-details .portfolio-details-content .project-features .feature-list li {
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.portfolio-details .portfolio-details-content .project-features .feature-list li i {
  color: var(--accent-color);
  margin-right: 10px;
  font-size: 1.1em;
}

.portfolio-details .portfolio-details-content .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: auto;
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-view-project {
  padding: 12px 28px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 30px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-view-project:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 15%);
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-next-project {
  padding: 12px 28px;
  background-color: color-mix(in srgb, var(--heading-color), transparent 90%);
  color: var(--heading-color);
  border-radius: 30px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-next-project i {
  transition: transform 0.3s ease;
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-next-project:hover {
  background-color: color-mix(in srgb, var(--heading-color), transparent 80%);
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-next-project:hover i {
  transform: translateX(3px);
}

@media (max-width: 1199.98px) {
  .portfolio-details .portfolio-details-content {
    padding-left: 1rem;
  }
}

@media (max-width: 991.98px) {
  .portfolio-details .portfolio-details-content {
    padding: 2rem 0 0 0;
  }

  .portfolio-details .portfolio-details-content .cta-buttons {
    margin-top: 2rem;
  }
}

@media (max-width: 767.98px) {
  .portfolio-details .project-meta {
    flex-direction: column;
    gap: 1rem;
  }

  .portfolio-details .project-meta .date-client {
    flex-direction: column;
    gap: 0.5rem;
  }

  .portfolio-details .cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .portfolio-details .cta-buttons a {
    width: 100%;
    text-align: center;
  }
} */

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
/* .service-details .service-content h2 {
  color: var(--heading-color);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.service-details .service-content .lead {
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.service-details .service-content .service-image {
  margin: 2.5rem 0;
}

.service-details .service-content .service-image img {
  width: 100%;
  height: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.service-details .service-content p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

.service-details .service-features {
  background: var(--surface-color);
  padding: 2.5rem;
  border-radius: 12px;
  margin: 3rem 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .service-features h4 {
  color: var(--heading-color);
  margin-bottom: 2rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.service-details .service-features .feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.service-details .service-features .feature-item i {
  font-size: 1.5rem;
  color: var(--accent-color);
  margin-top: 0.25rem;
}

.service-details .service-features .feature-item h5 {
  color: var(--heading-color);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.service-details .service-features .feature-item p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.service-details .service-process {
  margin: 3rem 0;
}

.service-details .service-process h4 {
  color: var(--heading-color);
  margin-bottom: 2.5rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.service-details .service-process .process-steps .step-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  position: relative;
}

.service-details .service-process .process-steps .step-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3.5rem;
  width: 2px;
  height: 2rem;
  background: color-mix(in srgb, var(--accent-color), transparent 70%);
  transform: translateX(-50%);
}

.service-details .service-process .process-steps .step-item .step-number {
  background: var(--accent-color);
  color: var(--contrast-color);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.service-details .service-process .process-steps .step-item .step-content h5 {
  color: var(--heading-color);
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.service-details .service-process .process-steps .step-item .step-content p {
  margin: 0;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.service-details .sidebar .service-info,
.service-details .sidebar .service-testimonial,
.service-details .sidebar .inquiry-form {
  background: var(--surface-color);
  padding: 2rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .sidebar h4 {
  color: var(--heading-color);
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.service-details .service-facts {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-details .service-facts li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .service-facts li:last-child {
  border-bottom: none;
}

.service-details .service-facts li .fact-label {
  font-weight: 500;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.service-details .service-facts li .fact-value {
  font-weight: 600;
  color: var(--heading-color);
}

.service-details .service-testimonial .testimonial-content p {
  font-style: italic;
  margin-bottom: 1.5rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.6;
}

.service-details .service-testimonial .testimonial-content .testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.service-details .service-testimonial .testimonial-content .testimonial-author .author-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.service-details .service-testimonial .testimonial-content .testimonial-author .author-info h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading-color);
}

.service-details .service-testimonial .testimonial-content .testimonial-author .author-info span {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.service-details .inquiry-form .form-control {
  margin-bottom: 1rem;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
}

.service-details .inquiry-form .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color), transparent 80%);
}

.service-details .inquiry-form input[type=text],
.service-details .inquiry-form input[type=email],
.service-details .inquiry-form input[type=tel],
.service-details .inquiry-form textarea {
  color: var(--default-color);
  background-color: var(--surface-color);
  font-size: 14px;
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.service-details .inquiry-form input[type=text]:focus,
.service-details .inquiry-form input[type=email]:focus,
.service-details .inquiry-form input[type=tel]:focus,
.service-details .inquiry-form textarea:focus {
  border-color: var(--accent-color);
}

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

.service-details .inquiry-form .btn-submit {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  padding: 0.875rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.service-details .inquiry-form .btn-submit:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .service-details .service-content h2 {
    font-size: 2rem;
  }

  .service-details .service-content .service-image {
    margin: 2rem 0;
  }

  .service-details .service-features {
    padding: 1.5rem;
    margin: 2rem 0;
  }

  .service-details .sidebar {
    margin-top: 3rem;
  }

  .service-details .sidebar .service-info,
  .service-details .sidebar .service-testimonial,
  .service-details .sidebar .inquiry-form {
    padding: 1.5rem;
  }

  .service-details .process-steps .step-item .step-number {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }

  .service-details .process-steps .step-item:not(:last-child)::after {
    left: 1.25rem;
    top: 3rem;
    height: 1.5rem;
  }
} */



/* ===== Service Details — Electrician (brand #301db7) ===== */
    section#services-section {
      background-color: #0f0f2f;
       color: #ffffff;
      padding: 80px 0;
    }

    .service-box {
      background-color: #1a1c2d;
      border: 2px solid #3f0eff;
      border-radius: 20px;
      padding: 35px 25px;
      margin-bottom: 30px;
      box-shadow: 0 8px 20px rgba(63, 14, 255, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .service-box:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 30px rgba(63, 14, 255, 0.2);
    }

    .icon-circle {
      width: 90px;
      height: 90px;
      background-color: #3f0eff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto 20px auto;
    }

    .icon-circle i {
      font-size: 34px;
      color: white;
    }

    .section-title-detail {
      /* font-size: 24px; */
      font-weight: 700;
      text-align: center;
      margin-bottom: 20px;
    }

    .section-subtitle-details {
      text-align: center;
      margin: 0 auto 40px auto;
      color: #b0b0b0;
    }

    .list-unstyled li {
      margin-bottom: 12px;
      font-size: 16px;
    }

    .list-unstyled i {
      color: #29cc6a;
    }

    .bottom-text {
      font-weight: 600;
      text-align: center;
      margin-top: 40px;
      color: #b0b0b0;
    }



/*----------------Services----------------------------------------------




Terms Of Service Section
--------------------------------------------------------------*/



.terms-of-service .tos-header {
  margin-bottom: 60px;
}

.terms-of-service .tos-header .last-updated {
  display: inline-block;
  padding: 8px 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 30px;
  color: var(--accent-color);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.terms-of-service .tos-header h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.terms-of-service .tos-header p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
}

.terms-of-service .tos-content .content-section {
  margin-bottom: 50px;
  scroll-margin-top: 100px;
}

.terms-of-service .tos-content .content-section:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: var(--heading-color);
}

.terms-of-service .tos-content .content-section p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.7;
  margin-bottom: 20px;
}

.terms-of-service .tos-content .content-section p:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .info-box {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 15px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .info-box i {
  font-size: 1.5rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .info-box p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .list-items {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.terms-of-service .tos-content .content-section .list-items li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.terms-of-service .tos-content .content-section .list-items li:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .list-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-color);
}

.terms-of-service .tos-content .content-section .alert-box {
  display: flex;
  gap: 20px;
  padding: 25px;
  background-color: var(--surface-color);
  border-radius: 15px;
  border-left: 4px solid var(--accent-color);
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .alert-box i {
  font-size: 2rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .alert-box .alert-content h5 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.terms-of-service .tos-content .content-section .alert-box .alert-content p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .prohibited-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 576px) {
  .terms-of-service .tos-content .content-section .prohibited-list {
    grid-template-columns: 1fr;
  }
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background-color: var(--surface-color);
  border-radius: 12px;
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item i {
  color: #dc3545;
  font-size: 1.2rem;
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item span {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.terms-of-service .tos-content .content-section .disclaimer-box {
  background-color: var(--surface-color);
  padding: 25px;
  border-radius: 15px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .disclaimer-box p {
  margin-bottom: 15px;
  font-weight: 500;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: var(--accent-color);
}

.terms-of-service .tos-content .content-section .notice-box {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 15px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .notice-box i {
  font-size: 1.5rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .notice-box p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-contact {
  margin-top: 60px;
}

.terms-of-service .tos-contact .contact-box {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 95%) 0%, color-mix(in srgb, var(--accent-color), transparent 98%) 100%);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  align-items: center;
  gap: 30px;
}

@media (max-width: 576px) {
  .terms-of-service .tos-contact .contact-box {
    flex-direction: column;
    text-align: center;
  }
}

.terms-of-service .tos-contact .contact-box .contact-icon {
  width: 60px;
  height: 60px;
  background-color: var(--accent-color);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.terms-of-service .tos-contact .contact-box .contact-icon i {
  font-size: 1.8rem;
  color: var(--contrast-color);
}

.terms-of-service .tos-contact .contact-box .contact-content {
  flex: 1;
}

.terms-of-service .tos-contact .contact-box .contact-content h4 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.terms-of-service .tos-contact .contact-box .contact-content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 15px;
}

.terms-of-service .tos-contact .contact-box .contact-content .contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 25px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 30px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s;
}

.terms-of-service .tos-contact .contact-box .contact-content .contact-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@media print {
  .terms-of-service .tos-contact {
    display: none;
  }

  .terms-of-service .content-section {
    page-break-inside: avoid;
  }
}

/*--------------------------------------------------------------
# Privacy Section
--------------------------------------------------------------*/
.privacy {
  font-size: 1rem;
  line-height: 1.7;
}

.privacy .privacy-header {
  margin-bottom: 60px;
  text-align: center;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding-bottom: 40px;
}

.privacy .privacy-header .header-content {
  max-width: 800px;
  margin: 0 auto;
}

.privacy .privacy-header .header-content .last-updated {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 20px;
}

.privacy .privacy-header .header-content h1 {
  font-size: 2.8rem;
  color: var(--heading-color);
  margin-bottom: 20px;
  font-weight: 600;
}

.privacy .privacy-header .header-content .intro-text {
  font-size: 1.2rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.6;
}

.privacy .privacy-content {
  max-width: 800px;
  margin: 0 auto 60px;
}

.privacy .privacy-content .content-section {
  margin-bottom: 50px;
}

.privacy .privacy-content .content-section:last-child {
  margin-bottom: 0;
}

.privacy .privacy-content .content-section h2 {
  font-size: 1.8rem;
  color: var(--heading-color);
  margin-bottom: 25px;
  font-weight: 600;
}

.privacy .privacy-content .content-section h3 {
  font-size: 1.4rem;
  color: var(--heading-color);
  margin: 30px 0 20px;
  font-weight: 500;
}

.privacy .privacy-content .content-section p {
  margin-bottom: 20px;
}

.privacy .privacy-content .content-section p:last-child {
  margin-bottom: 0;
}

.privacy .privacy-content .content-section ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.privacy .privacy-content .content-section ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
}

.privacy .privacy-content .content-section ul li:last-child {
  margin-bottom: 0;
}

.privacy .privacy-content .content-section ul li::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: var(--accent-color);
}

.privacy .privacy-contact {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 40px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.privacy .privacy-contact h2 {
  font-size: 1.8rem;
  color: var(--heading-color);
  margin-bottom: 20px;
  font-weight: 600;
}

.privacy .privacy-contact p {
  margin-bottom: 20px;
}

.privacy .privacy-contact .contact-details {
  background-color: var(--surface-color);
  padding: 25px;
  border-radius: 10px;
}

.privacy .privacy-contact .contact-details p {
  margin-bottom: 10px;
}

.privacy .privacy-contact .contact-details p:last-child {
  margin-bottom: 0;
}

.privacy .privacy-contact .contact-details p strong {
  color: var(--heading-color);
  font-weight: 600;
}

@media print {
  .privacy {
    font-size: 12pt;
    line-height: 1.5;
  }

  .privacy .privacy-header {
    text-align: left;
    border-bottom: 1pt solid #000;
    padding-bottom: 20pt;
    margin-bottom: 30pt;
  }

  .privacy h1 {
    font-size: 24pt;
  }

  .privacy h2 {
    font-size: 18pt;
    page-break-after: avoid;
  }

  .privacy h3 {
    font-size: 14pt;
    page-break-after: avoid;
  }

  .privacy p,
  .privacy ul {
    page-break-inside: avoid;
  }

  .privacy .contact-details {
    border: 1pt solid #000;
    padding: 15pt;
  }
}

@media (max-width: 767px) {
  .privacy .privacy-header {
    margin-bottom: 40px;
    padding-bottom: 30px;
  }

  .privacy .privacy-header .header-content h1 {
    font-size: 2.2rem;
  }

  .privacy .privacy-header .header-content .intro-text {
    font-size: 1.1rem;
  }

  .privacy .privacy-content .content-section {
    margin-bottom: 40px;
  }

  .privacy .privacy-content .content-section h2 {
    font-size: 1.6rem;
  }

  .privacy .privacy-content .content-section h3 {
    font-size: 1.3rem;
  }
}

/*--------------------------------------------------------------
# Error 404 Section
--------------------------------------------------------------*/
/* .error-404 {
  padding: 120px 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--surface-color) 0%, color-mix(in srgb, var(--accent-color), transparent 97%) 100%);
}

.error-404 .error-number {
  font-size: clamp(120px, 20vw, 280px);
  font-weight: 300;
  color: color-mix(in srgb, var(--heading-color), transparent 15%);
  line-height: 0.8;
  margin-bottom: 40px;
  font-family: var(--heading-font);
  letter-spacing: -0.02em;
}

.error-404 .error-title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 300;
  color: var(--heading-color);
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}

.error-404 .error-description {
  font-size: 18px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.error-404 .error-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  margin-bottom: 80px;
}

@media (min-width: 576px) {
  .error-404 .error-actions {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }
}

.error-404 .error-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 400;
  font-size: 16px;
  transition: all 0.3s ease;
  border: 2px solid var(--accent-color);
}

.error-404 .error-actions .btn-primary:hover {
  background-color: transparent;
  color: var(--accent-color);
  transform: translateY(-2px);
}

.error-404 .error-actions .btn-primary i {
  font-size: 18px;
}

.error-404 .error-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background-color: transparent;
  color: var(--heading-color);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 400;
  font-size: 16px;
  transition: all 0.3s ease;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 80%);
}

.error-404 .error-actions .btn-secondary:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-2px);
}

.error-404 .error-actions .btn-secondary i {
  font-size: 18px;
}

.error-404 .helpful-links {
  text-align: center;
}

.error-404 .helpful-links h3 {
  font-size: 24px;
  font-weight: 300;
  color: var(--heading-color);
  margin-bottom: 40px;
}

.error-404 .helpful-links .links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .error-404 .helpful-links .links-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.error-404 .helpful-links .link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 20px;
  background-color: var(--surface-color);
  border-radius: 8px;
  text-decoration: none;
  color: var(--default-color);
  transition: all 0.3s ease;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.error-404 .helpful-links .link-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--accent-color);
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.error-404 .helpful-links .link-item i {
  font-size: 24px;
  color: var(--accent-color);
  transition: all 0.3s ease;
}

.error-404 .helpful-links .link-item span {
  font-size: 16px;
  font-weight: 400;
}

.error-404 .helpful-links .link-item:hover i {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .error-404 {
    padding: 80px 0;
  }

  .error-404 .error-actions {
    margin-bottom: 60px;
  }

  .error-404 .helpful-links .links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .error-404 .helpful-links .links-grid {
    grid-template-columns: 1fr;
  }
} */

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}




/* full page css welcome page */
/* swimming pool section here emergemncy*/
 #driveHero{
      --blue:#0078C8; --green:#A5C936; --ink-2:#0c1526; --text:#F8FAFC;
      --panel: rgba(8,12,22,.55); --titleBoxBg: rgba(5,9,18,.78);
    }

    /* Hero */
    #driveHero.drive-hero{
      position:relative; isolation:isolate; overflow:hidden; min-height:900px;
      display:grid; place-items:center;
      background:
        radial-gradient(60% 60% at 20% 40%, color-mix(in oklab, var(--blue) 55%, white 0%) 0%, transparent 65%),
        radial-gradient(60% 60% at 80% 60%, color-mix(in oklab, var(--green) 55%, white 0%) 0%, transparent 65%),
        linear-gradient(180deg, #0b1220 0%, var(--ink-2) 60%, #0a0f1d 100%);
      color:var(--text);
    }
    #driveHero.drive-hero::after{
      content:""; position:absolute; inset:auto 0 0 0; height:22%;
      background:linear-gradient(180deg, transparent, rgba(0,0,0,.35) 30%, rgba(0,0,0,.65));
      z-index:0;
    }
    #driveHero .hero-inner{position:relative; width:min(1200px,94vw); padding:clamp(28px,6vw,56px) 0;}

    /* VAN */
    #driveHero .van-wrap{position:absolute; left:50%; bottom:-10%; transform:translateX(-50%); width:min(720px,84vw); z-index:1; pointer-events:none;}
    #driveHero .van{display:block; width:100%; filter:drop-shadow(0 18px 28px rgba(0,0,0,.55)); will-change:transform;}
    @keyframes right-left-center{0%{transform:translateX(0)}33%{transform:translateX(34vw)}66%{transform:translateX(-34vw)}82%{transform:translateX(2vw)}100%{transform:translateX(0)}}

    /* COPY (heading + paragraph appear together after stop) */
    #driveHero .copy{position:relative; z-index:2; text-align:center; max-width:900px; margin:0 auto;}

    /* HEADING BOX */
    #driveHero .title-box{
      display:inline-block;
      padding:clamp(8px,1.6vw,16px) clamp(16px,3vw,28px);
      background:var(--titleBoxBg);
      border:1px solid rgba(255,255,255,.08);
      border-radius:16px;
      box-shadow:0 14px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
      backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
      margin-bottom:14px; /* paragraph ke upar thoda gap */
      position:relative;
      top:200px;
    }
    #driveHero .title-box::after{
      content:""; display:block; height:4px; width:min(180px,40%); margin:10px auto 0;
      background:linear-gradient(90deg, var(--blue), var(--green)); border-radius:3px;
      box-shadow:0 0 12px rgba(0,120,200,.45);
    }
    /* H1 exact size you asked */
    #driveHero .title{
      margin:0; font-family:"Sacramento",cursive; color:var(--blue);
      font-weight:900; line-height:1.05; font-size:50px; letter-spacing:.2px;
      -webkit-text-stroke:.8px rgba(0,0,0,.28);
      text-shadow:0 2px 8px rgba(0,0,0,.55), 0 0 18px rgba(0,120,200,.28);
    }

    /* Lead paragraph box */
    #driveHero .lead{
      margin:0 auto; /* heading ke baad turant */
      font-size:clamp(16px,1.8vw,20px); line-height:1.7; color:#eaf3ff;
      max-width:840px; padding:18px 22px; background:var(--panel); border-radius:14px;
      box-shadow:0 10px 30px rgba(0,0,0,.35); backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.08); position:relative; overflow:hidden;
           position:relative;
      top:200px;
    }
    #driveHero .lead::before{
      content:""; position:absolute; top:0; left:-100%; width:100%; height:100%;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
      transition:left .7s;
    }

    /* Reveal: both heading and paragraph show together after van stops */
    #driveHero .copy .title-box, #driveHero .copy .lead{opacity:0; transform:translateY(14px); transition:.6s ease}
    #driveHero .copy.revealed .title-box, #driveHero .copy.revealed .lead{opacity:1; transform:none}
    #driveHero .copy.revealed .lead::before{left:100%}

    /* A11y & responsive */
    @media (prefers-reduced-motion:reduce){
      #driveHero .van{transform:none !important}
      #driveHero .copy .title-box, #driveHero .copy .lead{opacity:1; transform:none}
    }
    @media (max-width:640px){
      #driveHero .van-wrap{bottom:2%}
      #driveHero .lead{padding:14px 16px; margin:0 10px}
    }
/* ===== Mobile-only behavior: show content only, hide image ===== */
/* ===== Mobile fix: no huge top gap, only content visible ===== */
/* === Mobile view: clean top, no image, no hiding/overlap === */
@media (max-width: 640px){

  /* section spacing — no extra top gap */
  #driveHero.drive-hero{
    min-height: auto;             /* size by content */
    /* padding: 16px 12px 88px;   */
  }

  /* hide ambulance & its animation */
  #driveHero .van-wrap,
  #driveHero .van{ display:none !important; }

  /* remove any offsets that were pushing content down */
  #driveHero .copy{
    margin-top: 0 !important;
    max-width: 92vw;
  }

  /* Title box in normal flow (NO position/top) */
  #driveHero .title-box{
    position: static !important;  /* override previous position */
    margin: 0 auto 12px !important;
    padding: 10px 16px;
    border-radius: 14px;
  }

  /* Keep your exact title size; allow wrap on small screens */
  #driveHero .title{
    font-size: 40px;
    line-height: 1.05;
    white-space: normal;
    -webkit-text-stroke: .6px rgba(0,0,0,.32);
    text-align: center;
  }

  /* Paragraph box — tidy padding */
  #driveHero .lead{
    position: static !important;  /* override previous position/top */
    margin: 0 8px;
    padding: 14px 16px;
    font-size: 16px;
  }

  /* Optional: remove bottom ground gradient on very small screens */
  #driveHero.drive-hero::after{ height: 14%; }
}




/* get started with weboctane */
/* ====== Hero (Bootstrap-safe) ====== */
:root{
  --navy:#0b1220; --ink:#eaf1ff; --muted:#b6c2d9;
  --blue:#1e72e6; --blue-2:#0a4a9a; --gold:#ffc107;
  --panel: rgba(10,16,32,.55); --border: rgba(124,195,255,.25);
}

/* base */
.wo-hero{
  position:relative; height:100%;
  min-height:100lvh; /* mobile-safe viewport */
  display:grid; place-items:center;
  overflow:hidden; background:var(--navy); color:var(--ink);
  isolation:isolate; /* keep overlay layering clean */
}
.wo-hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:saturate(1.05) contrast(1.05);
  z-index:0;
}
.wo-hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(1200px 600px at 80% 20%, rgba(255,193,7,.12), transparent 60%),
    linear-gradient(180deg, #071020cc 0%, #081429cc 60%, #081429e6 100%),
    linear-gradient(135deg, #0a4a9a55 0%, transparent 55%);
  mix-blend-mode:multiply;
}
.wo-hero__inner{
  position:relative; z-index:2;
  width:min(1100px, 92%);
  text-align:center;
  padding: clamp(24px,4vw,48px) 0;
  animation: rise .6s ease both;
}
@keyframes rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* title + lede */
.wo-hero__title{
  margin:22px 0 10px; line-height:1.08;
  font-size: clamp(28px, 2.8vw, 54px); font-weight:900; letter-spacing:.2px;
}
.wo-hero__title .accent{
  display:inline-block; padding:.06em .3em; border-radius:10px;
  background:linear-gradient(180deg,#1e72e6,#0a4a9a);
  box-shadow:0 10px 24px #0a4a9a55; color:#fff;
}
.wo-hero__lede{
  margin:10px auto 20px; max-width: 70ch;
  color:var(--muted); line-height:1.85; font-size: clamp(15px,1.05vw,18px);
  text-wrap:balance;
}

/* safety card (kept above title as in your HTML) */
.wo-safety{
  margin:6px auto 10px;
  display:grid; gap:14px;
  background:linear-gradient(180deg, rgba(10,16,32,.55), rgba(10,16,32,.72));
  border:1px solid var(--border);
  box-shadow:0 16px 40px rgba(12, 30, 64, .45);
  backdrop-filter:saturate(1.1) blur(8px);
  border-radius:16px;
  padding:18px 18px 14px;
  text-align:left;
  width:min(900px, 100%);
}
.wo-safety__head{
  display:flex; align-items:center; gap:10px; font-weight:800;
  font-size: clamp(16px,1.5vw,20px);
}
.wo-safety__head i{ font-size:1.1em; color:#7cc3ff; }
.wo-safety__body{ color:#d0def5; line-height:1.7; font-size:clamp(14px,1vw,16px); }
.wo-safety__meta{
  display:flex; flex-wrap:wrap; gap:8px; font-size:.9rem; color:#bcd3ff;
}
.wo-chip{
  padding:6px 10px; border-radius:999px; background:#0f1c33; border:1px solid #284066;
}

/* badges & CTAs (scoped to hero to avoid Bootstrap .badge clash) */
.wo-hero .wo-hero__badges{
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px 12px; margin-bottom:14px;
}
.wo-hero .badge{
  /* override Bootstrap safely inside hero */
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; font-weight:700; font-size:.93rem;
  background:#0e1b2f; border:1px solid #284066; color:#cfe4ff !important;
  box-shadow:0 8px 18px rgba(10,74,154,.18);
  line-height:1.1;
}
.wo-hero .badge i{ color:#7cc3ff; font-size:1rem; }

.wo-hero__ctas{
  display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:6px;
}
.cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:12px; font-weight:800; text-decoration:none; color:#fff !important;
  background:linear-gradient(180deg,#1e72e6,#0a4a9a);
  border:1px solid #a5ca3e; box-shadow:0 12px 26px rgba(30,114,230,.28);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.cta:hover{ transform:translateY(-2px); filter:saturate(1.08); box-shadow:0 16px 34px rgba(30,114,230,.36); }
.cta i{ font-size:1rem; }
.cta.ghost{ background:#13233b; border-color:#a5ca3e; color:white !important; }
.cta.gold{
  /* background:linear-gradient(180deg,#ffd44a,#ffb300); */
  background:#0d72b6;
  border-color:#a5ca3e;
   color:white !important;
  box-shadow:0 12px 26px rgba(255,193,7,.3);
}

/* mobile tweaks */
@media (max-width: 640px){
  .wo-hero{ min-height:92lvh; }
  .wo-hero__lede{ max-width: 90ch; }
  .wo-safety{ padding:14px; }
}

/* remove external top margin to keep full height */
#wo-hero.mt-5 { margin-top:0 !important; }

/* ====== AC Services section quick polish (Bootstrap friendly) ====== */
#ac-services-actabs .headline{
/* background: #0d72b6; */
  font-weight:800; font-size:clamp(20px,2.2vw,30px);
  color:#0b1220; margin: 10px 0 10px;
}
#ac-services-actabs .muted{ color:#4b5565; }
#ac-services-actabs .list-clean{ padding-left:0; margin-left:0; list-style:none; }
#ac-services-actabs .list-clean li{ margin:6px 0; line-height:1.7; }

/* top row: tabs left, animation right */
#ac-services-actabs .ac-top{
  display:grid; gap: clamp(12px,2vw,24px);
  align-items:start;
}
@media (min-width: 992px){
  #ac-services-actabs .ac-top{ grid-template-columns: 1fr 1.2fr; }
}

/* nav pills style tune without breaking Bootstrap */
#ac-services-actabs .actabs-nav .nav-link{
  border-radius:10px; font-weight:700;
  color:#0b1220; background:#f3f6fb; border:1px solid #e5eefb; margin:0 8px 8px 0;
  padding:.6rem .9rem;
}
#ac-services-actabs .actabs-nav .nav-link:hover{ background:#e9f0fd; }
#ac-services-actabs .actabs-nav .nav-link.active{
  color:#fff; background:linear-gradient(180deg,#1e72e6,#0a4a9a); border-color:#0a4a9a;
  box-shadow:0 8px 20px rgba(30,114,230,.25);
}

/* lottie responsive */
#ac-services-actabs .ac-anim-right{ display:flex; justify-content:center; align-items:center; }
#ac-services-actabs .ac-anim-wrap{ width:min(900px,100%); }
#ac-services-actabs lottie-player{ width:100% !important; height:auto; }

/* section spacing */
#ac-services-actabs.section{ padding-top: clamp(48px,6vw,80px); padding-bottom: clamp(64px,7vw,110px); }



/* glassy title box like driveHero */
:root{
  /* ensure this var exists (used by box background) */
  --titleBoxBg: rgba(5, 9, 18, .78);
}

/* wrapper around your H1 */
.wo-titlebox{
  display:inline-block;
  padding:clamp(8px,1.6vw,16px) clamp(16px,3vw,28px);
  background:var(--titleBoxBg);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  box-shadow:0 14px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  margin: 0 auto 14px; /* H1 ke upar/neeche spacing */
}

/* gradient underline bar under the box */
/* .wo-titlebox::after{
  content:""; display:block; height:4px; width:min(280px,40%); margin:10px auto 0;
  background:linear-gradient(90deg, var(--blue), var(--green, #A5C936));
  border-radius:3px;
  box-shadow:0 0 12px rgba(0,120,200,.45);
} */

/* cursive part exactly like your driveHero intent */
.wo-hero__title .accent-script{
  font-family: "Sacramento", cursive;
  font-weight: 900; /* looks bold with stroke */
  font-size: clamp(36px, 4vw, 58px); /* thoda bada for script */
  line-height: 1.05;
  letter-spacing: .2px;
  color: var(--blue);
  -webkit-text-stroke: .8px rgba(0,0,0,.28);
  text-shadow: 0 2px 8px rgba(0,0,0,.55), 0 0 18px rgba(0,120,200,.28);
  display:inline-block;
  margin-right:.25ch;
}

/* remaining text (Maintenance Today) stays bold & clean */
.wo-hero__title{
  /* keep your existing styles; just ensure good pairing with script */
  font-weight: 900;
}

/* small-screen tweak: tighten underline distance */
@media (max-width: 576px){
  .wo-titlebox{ padding:10px 14px; }
  .wo-titlebox::after{ margin-top:8px; width:50%; }
}



/* car */
/* form errors */
.is-invalid {
  border-color: #dc3545 !important;
  background-color: #fff5f5;
}
.text-danger {
  font-size: 0.85rem;
  color: #dc3545 !important;
}



/*  */
/* ===== Blog "Latest News" – Neon/Indigo Theme (matches your screenshot) ===== */

.latest_news--grid {
  --bg-deep: #0b1a2f;          /* deep navy */
  --bg-deeper: #090f1e;        /* page base */
  --brand-indigo: #0d72b6;     /* card background */
  --brand-indigo-2: #3a33b3;   /* gradient overlay */
  --brand-green: #a5ca3e;      /* neon green accent from your site */
  --brand-lime: #c6f25a;       /* lighter neon */
  --gold: #dfb015;             /* warm gold from hero glow */
  --blue-glow: #266ed1;        /* cool blue glow */

  position: relative;
  border-radius: 24px;
  overflow: hidden;
  /* background: layered gradient similar to screenshot */
  /* background:
    radial-gradient(70% 50% at 20% 40%, rgba(223,176,21,.22) 0%, rgba(223,176,21,0) 60%),
    radial-gradient(60% 40% at 80% 30%, rgba(38,110,209,.22) 0%, rgba(38,110,209,0) 60%),
    linear-gradient(180deg, var(--bg-deep), var(--bg-deeper)); */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* ===== Latest News Section: Full width with brand colors ===== */
.latest-news-section {
  width: 100%;
  padding: 60px 0;
  position: relative;
  overflow: hidden;
  border-radius: 0;

  /* 💠 Brand color gradient background */
  background:
    radial-gradient(60% 50% at 20% 40%, rgba(165,202,62,0.25) 0%, rgba(165,202,62,0) 60%),
    radial-gradient(60% 40% at 80% 30%, rgba(13,114,182,0.25) 0%, rgba(13,114,182,0) 60%),
    linear-gradient(180deg, #0d72b6 0%, #0b1a2f 100%);
}

/* Inner container spacing */
.latest-news-section .container {
  position: relative;
  z-index: 2;
}

/* Make inner grid transparent so section bg shows */
.latest_news--grid {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
}


/* card grid spacing */
.latest_news--grid .news-grid{
  row-gap: 28px;
}

/* ===== Card ===== */
.latest_news--grid .news-card{
  display:block;
  background: linear-gradient(180deg, var(--brand-indigo), var(--brand-indigo-2));
  border-radius: 22px;
  color:#e8e9ff;
  text-decoration:none;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(255,255,255,.08);
  /* box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    0 0 0 1.5px rgba(165,202,62,.06) inset; */
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border:3px dashed #a5ca3e;
}
.latest_news--grid .news-card:hover{
border:3px dashed #a5ca3e;
}

/* .latest_news--grid .news-card:hover,
.latest_news--grid .news-card:focus-visible{
  transform: translateY(-6px);
  box-shadow:
    0 16px 36px rgba(0,0,0,.45),
    0 0 0 2px rgba(165,202,62,.25) inset,
    0 0 24px rgba(165,202,62,.20);
  border-color: rgba(165,202,62,.35);
  outline: none;
} */

/* ===== Thumb ===== */
.latest_news--grid .news-thumb{
  position:relative;
  aspect-ratio: 16/10;
  overflow:hidden;
  border-radius: 18px;
  margin: 14px 14px 0 14px;
}
.latest_news--grid .news-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.02);
  transition: transform .45s ease;
  filter: saturate(1.05) contrast(1.03);
}
.latest_news--grid .news-card:hover .news-thumb img{
  transform: scale(1.06);
}

/* date badge (top-left) */
.latest_news--grid .news-date{
  position:absolute; left:12px; top:12px;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-lime));
  color:#0b1a2f; font-weight:700; font-size:12px;
  padding:7px 10px; border-radius:999px;
  box-shadow: 0 6px 16px rgba(165,202,62,.35);
}

/* ===== Body ===== */
.latest_news--grid .news-body{
  padding:16px 18px 20px 18px;
}
.latest_news--grid .news-body h5{
  margin: 4px 0 8px 0;
  font-size: 23px; line-height: 1.35;
  color:#ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.latest_news--grid .news-body p{
  margin:0 0 10px 0;
  color: #cfd3ff;
  font-size: 16px; line-height: 1.6;
  display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden;
}



/* ===== Responsive tweaks ===== */
@media (max-width: 991.98px){
  .latest_news--grid{ padding: 24px 16px; border-radius:18px; }
}
@media (max-width: 575.98px){
  .latest_news--grid .news-body h5{ font-size:16px; }
  .latest_news--grid .news-body p{ -webkit-line-clamp: 4; }
}
/* ========== LATEST NEWS – Polished, compact & image-only hover ========== */

/* 1) Card: no lift on hover, subtle border only */
/* .latest_news--grid .news-card{
  border-radius: 18px;
  transform: none !important;
  transition: box-shadow .25s ease, border-color .25s ease;
} */
/* .latest_news--grid .news-card:hover,
.latest_news--grid .news-card:focus-visible{
  box-shadow: 0 14px 28px rgba(0,0,0,.34), 0 0 0 2px rgba(165,202,62,.18) inset;
  border-color: rgba(165,202,62,.25);
  outline: none;
} */

/* 2) Thumb: image-only interaction (hover par bas image zoom) */
.latest_news--grid .news-thumb{
  aspect-ratio: 16/9;                  /* thoda cinematic */
  border-radius: 14px;
  margin: 12px 12px 0 12px;            /* extra padding kam */
}
.latest_news--grid .news-thumb img{
  transform: scale(1);                 /* base neutral */
  transition: transform .45s ease, filter .3s ease;
}
.latest_news--grid .news-card:hover .news-thumb img,
.latest_news--grid .news-card:focus-visible .news-thumb img{
  transform: scale(1.06);              /* sirf image hover */
  filter: saturate(1.08) contrast(1.04);
}

/* 3) Date pill: compact */
.latest_news--grid .news-date{
  left:10px; top:10px;
  font-size: 11px;
  padding: 6px 9px;
}

/* 4) Body: extra padding hatao, typography tidy */
.latest_news--grid .news-body{
  padding: 12px 14px 14px 14px;        /* was 16/18/20 → compact */
}
.latest_news--grid .news-body h5{
  margin: 0 0 6px 0;
  font-size: 24px;                   /* thoda sleek */
  line-height: 1.35;
  text-shadow: none;                   /* crisp text */
}




/* 6) Mobile tweaks: thoda aur compact */
@media (max-width: 575.98px){
  .latest_news--grid{ padding: 20px 14px; }
  .latest_news--grid .news-body h5{ font-size: 15.5px; }
  .latest_news--grid .news-body p{ -webkit-line-clamp: 4; font-size: 13px; }
  .latest_news--grid .pearl-btn .wrap{ padding: 7px 11px; font-size: 13px; }
}



/* privacy policy */
/* preloader */
/* Preloader overlay */
/* PRELOADER BACKDROP — brand gradient */
#preloader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1200px 600px at 30% 40%, rgba(13,114,182,.35) 0%, rgba(12,26,46,.78) 45%, #000814 100%),
    #050b14;
  transition: opacity .35s ease, visibility .35s ease;
}
/* JS bug fix: script "is-hide" class add karta hai */
#preloader.hide, #preloader.is-hide{ opacity:0; visibility:hidden; }

.preloader__inner{ text-align:center; color:#d9f2ff; }

/* IMAGE: make it circular + glow + motion */
/* === Preloader Circle with Blue–Green Ring === */
.preloader__gif {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto;

  /* gradient ring using brand colors */
  padding: 8px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #0d72b6 0%, #a5ca3e 100%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.1) inset,
    0 0 30px rgba(13,114,182,0.3),
    0 0 50px rgba(165,202,62,0.25);

  /* motion */
  animation: pe-bob 2.2s ease-in-out infinite, pe-tilt 3.6s ease-in-out infinite;
}

/* loader text */
.preloader__text {
  margin-top: .75rem;
  font: 600 .95rem/1.2 "Poppins", system-ui;
  letter-spacing: .5px;
  color: #e9f7ff;
  opacity: .95;
}

/* motion respect for accessibility */
@media (prefers-reduced-motion: reduce){
  .preloader__gif { animation: none; }
}

/* bob and tilt */
@keyframes pe-bob {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-10px) }
}
@keyframes pe-tilt {
  0%,100% { rotate: 0deg }
  50%     { rotate: 2.5deg }
}


/* motion respect for accessibility */
@media (prefers-reduced-motion: reduce){
  .preloader__gif{ animation:none; }
}
/* secondary logo below loader */

/* secondary logo below loader (static, no animation) */
.preloader__logo {
  margin-top: 1rem;
  display: inline-block;
  width:300px;
  height: auto;
  filter:
    drop-shadow(0 0 8px rgba(13,114,182,0.4))
    drop-shadow(0 0 16px rgba(165,202,62,0.25));
  opacity: 1;
  transform: none;
}