/*----FONTS IMPORTS-----*/
@font-face {
    font-family: 'Gilroy-Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Bold'), url('./../fonts/Gilroy-Bold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gilroy-Heavy';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Heavy'), url('./../fonts/Gilroy-Heavy.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gilroy-Light';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Light'), url('./../fonts/Gilroy-Light.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gilroy-Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Medium'), url('./../fonts/Gilroy-Medium.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Regular'), url('./../fonts/Gilroy-Regular.woff') format('woff');
    }
    @import url(fontawesome.css);
    body {
        font-family: 'Gilroy-Medium',sans-serif;
        margin: 0 !important;
    }
    
/*---------------------------------------*/


:root{
    --hdr-glass: rgba(28, 56, 46, 0.18);   /* translucent pill behind nav (initial) */
    --hdr-glass-2: rgba(235,230,210,0.06); /* subtle inner light */
    --hdr-solid: rgba(10, 92, 78, 0.826);    /* solid on scroll */
    --accent: #c9b07a;                     /* highlight/gold */
    --background-color: #ffffff; /* Background color for the entire website, including individual sections */
    --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #222222; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #27ae60; /* 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: #ffffff; /* 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. */
    }
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    background-color: var(--background-color);
    transition: all 0.6s ease-out;
    width: 100%;
    height: 100vh;
  }
  
  #preloader:before,
  #preloader:after {
    content: "";
    position: absolute;
    border: 4px solid var(--accent-color);
    border-radius: 50%;
    animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  
  #preloader:after {
    animation-delay: -0.5s;
  }
  
  @keyframes animate-preloader {
    0% {
      width: 10px;
      height: 10px;
      top: calc(50% - 5px);
      left: calc(50% - 5px);
      opacity: 1;
    }
  
    100% {
      width: 120px;
      height: 120px;
      top: calc(50% - 60px);
      left: calc(50% - 60px);
      opacity: 0;
    }
  }


.navbar-brand img {
    max-width: 120px;
}

/*------HEADER-------*/
.header-overlay{
    top: 18px;              /* slight gap from top so pill sits with rounded corners */
    left: 0; right: 0;
    pointer-events: auto;
    transition: all .28s ease;
    z-index: 1050;
  }
  
  /* inner nav pill that holds logo + menu */
  .nav-inner{
    /*background: linear-gradient(180deg, var(--background-color) 0%, rgba(255,255,255,0.8) 100%);*/
    background: linear-gradient(180deg, var(--hdr-glass) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-radius: 14px;
    padding: 10px 18px;
    align-items:center;
    display:flex;
    gap:20px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    backdrop-filter: blur(6px) saturate(110%);
    border: 1px solid rgba(255,255,255,0.04);
  }
  
  /* slightly bigger pill on large screens */
  @media(min-width:992px){
    .nav-inner{ padding:12px 26px; border-radius:18px; }
  }
  
  /* nav links (desktop) */
  .nav-desktop .nav-link{
    /*color: var(--hdr-solid);*/
    color: rgba(255,255,255,0.95);
    font-weight:600;
    letter-spacing:0.6px;
    padding:8px 12px;
    border-radius:10px;
    transition: all .18s ease;
    display:inline-block;
    text-decoration:none;
  }
  .nav-desktop .nav-link:hover,.nav-desktop .nav-link.active{
    color: #fff;
    /*background: linear-gradient(90deg, rgba(0,0,0,0.25), rgba(0,0,0,0.25));*/
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02));
    transform:translateY(-1px);
    color: #D9C08D !important;
  }
  
  /* brand logo spacing */
  .brand img{ display:block; height:36px; }
  
  /* when user scrolls — header becomes a solid sticky bar at the top */
  .header-solid{
    top: 0;
    padding-top: 0;
    transition: all .24s ease;
    background: var(--hdr-solid);
  }
  .header-solid .container {
      width: 100%;
      /*max-width: 100% !important;
      margin: 0;*/
      padding: 0;
      max-width: 1320px !important;
      margin: auto;
  } 
  .header-solid .nav-inner{
    /*background: var(--hdr-solid);*/
    border-radius: 0;
    padding: 10px 22px;
    box-shadow: none;
    border-bottom: none;
    backdrop-filter: none;
  }
  
  /* Dropdown container */
.services-dropdown {
  border-radius: 14px;
  padding: 12px 0;
  border: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  /*margin-top: 12px;*/
  min-width: 260px;
}

/* Dropdown items */
.services-dropdown .dropdown-item {
  padding: 10px 22px;
  font-weight: 500;
  color: #111;
  transition: 0.3s ease;
}

.services-dropdown .dropdown-item:hover {
  background: #f7f3e7;
  color: #c9a24d;
}

/* Hover open on desktop */
@media (min-width: 992px) {
  .nav-item.dropdown:hover .dropdown-menu {
    display: block;
    animation: fadeUp 0.3s ease;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

  /* tweak offcanvas mobile items */
  .offcanvas-body .nav-link{ 
    color: #ffffff; 
    font-weight:600;
    font-size: 26px;
 }
  
  /* small screens: reduce spacing */
  @media(max-width:991.98px){
    .nav-inner{ gap:12px; padding:10px 14px; }
  }
  
  /* Optional: sticky placeholder to avoid layout jump (use below the header if needed) */
  .header-placeholder{ height:72px; display:none; }
  @media(min-width:992px){ .header-placeholder{ display:block } }


  .offcanvas {
    z-index: 1051 !important;
    background: #0f3a32;
  }
  .offcanvas-body {
    padding-top: 0;
  }
  .mobile-menu {
    color:#ffffff
  }
  .btn-close {
    --bs-btn-close-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  }
/*------------END OF HEADER------*/

/*---------HOME PAGE-------------*/

/* HERO SECTION FULL HEIGHT */

.home-hero {
height: 100vh; /* full viewport height */
min-height: 600px; /* keeps good layout on small screens */
background: url("./../img/home/hero.jpeg") center/cover no-repeat;
color: #fff;
position: relative;
padding-top: 80px; /* space for navbar */
}

.home-hero::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}

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

.home-hero h1 {
font-size: 3rem;
font-weight: 700;
letter-spacing: 3px;
}

@media (max-width: 575.98px) {   /* mobile - 1 card */
    .home-hero h1 {
        font-size: 2rem;
    }
    .home-hero p {
        font-size: 14px;
    }
  }
.home-hero h1 span {
    color: #F9B233;
}
.hero-buttons .btn {
border-radius: 40px;
padding: 10px 28px;
margin: 8px;
background: none;
border-color: #D9C08D;
color: #D9C08D;
}

.hero-buttons .btn:hover {
    background: #0A5C4E;
    border-color: #ffffff;
    color: #ffffff;
    }


.section-title {
    font-weight: 700;
    margin-bottom: 20px;
}

.vertical-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    height: 100%;
    color: var(--bs-body-color);
}
.tech-card img {
    width:100%;
}
.vertical-card img{
    /*width: 90px;*/
    margin-bottom: 15px;
}

.tech-card {
    background: #0f3a32;
    color: #fff;
    position: relative;
}
.tech-content {
    position: absolute;
    bottom: 10px;
    left: 20px;
}
.tech-content p,.tech-content h5 {
    margin-bottom: 0;
}
.tech-content h5 {
    font-size: 16px;
}
.tech-content p {
    font-size: 14px;
}

.project-card img {
    width: 100%;
    border-radius: 12px;
}

.sustainability-section h2 {
    color: #0A5C4E;
    font-size: 40px;
    font-family: 'Gilroy-Medium',sans-serif;
}

.sustainability-section img {
    max-width: 100%;
}

.sections_title {
    color: #0A5C4E;
}
.global_verticals_headings {
    color: #0A5C4E;
}
/* OUTSIDE NAVIGATION ARROWS */
.carousel-btn-left,
.carousel-btn-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
/*width: 50px;*/
height: 50px;
border-radius: 50%;
color: #0d2c24;
font-size: 1.6rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
}

.carousel-btn-left:hover,
.carousel-btn-right:hover {
background: none;
}

/* Positioning */
.carousel-btn-left {
left: -30px; /* moves outside */
}

.carousel-btn-right {
right: -30px; /* moves outside */
}

/* Mobile adjustment */
@media (max-width: 767px) {
.carousel-btn-left {
left: -10px;
}
.carousel-btn-right {
right: -10px;
}
}


/* ------Intelligent------ */
.project-card {
position: relative;
}
.project-card h6 {
position: absolute;
bottom: 20px;
left:20px;
color: #fff;
}
.project-card img {
border-radius: 15px;
}/* CSS: one large icon at right per card + responsive stacking */
.intelligent-section {
  /*padding: 60px 0;*/
  /* gentle neutral background (tweak to match page) */
  background: linear-gradient(145deg, #ffffff 0%, #ffffff 60%);
}

/* section title */
.intelligent-section .section-title {
  color: #143e37;
  font-weight: 700;
  font-size: 28px;
}

/* card */
.ibd-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border-radius: 16px;
  padding: 20px;
  height: 100%;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 30px rgba(6,18,15,0.06);
  gap: 18px;                 /* space between text and icon */
  justify-content: space-between;
  transition: transform .22s ease, box-shadow .22s ease;
}

/* hover lift */
.ibd-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(6,18,15,0.12);
}

/* text block */
.ibd-text h5 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #0f3a32;
}
.ibd-text p {
  margin: 0;
  color: rgba(15,58,50,0.75);
  font-size: 1rem;
  line-height: 1.45;
}

/* icon container (right side) */
.ibd-icon-wrap {
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 120px;           /* size of icon block on desktop */
  height: 120px;
  border-radius: 12px;
  /* subtle glass panel to match UI */
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.02);
}

/* actual icon image */
.ibd-icon {
  max-width: 86%;
  max-height: 86%;
  object-fit: contain;
  display:block;
}

/* Mobile: stack vertically, icon ABOVE text and centered */
@media (max-width: 767.98px) {
  .ibd-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px;
  }
  .ibd-icon-wrap {
    width: 88px;
    height: 88px;
    margin-bottom: 12px;
  }
  .ibd-text h5 { font-size: 16px; }
  .ibd-text p  { font-size: 14px; color: rgba(15,58,50,0.8); }
}

/* Tablet: keep icon moderately sized */
@media (min-width: 768px) and (max-width: 991.98px) {
  .ibd-icon-wrap { width: 100px; height: 100px; }
}

/* Accessibility: ensure contrast on small text */
.ibd-text p { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }


/* ---------FOOTER BACKGROUND------ */
.vgh-footer {
    background: radial-gradient(
        circle at 30% 20%,
        rgba(255,255,255,0.25),
        transparent 60%
    ),
    linear-gradient(
        to right,
        #253d36,
        #2f4b42,
        #3d5d50,
        #6e6252,
        #b4a38c
    );

background-blend-mode: screen, soft-light, normal;
padding: 20px 0;
color: #e8f9f0;

position: relative;
overflow: hidden;
}

/* Neural glow lines effect */
.vgh-footer::before {
content: "";
position: absolute;
inset: 0;
/*background: url("glow-pattern.png") center/cover no-repeat; *//* optional if you use a pattern */
opacity: 0.25;
pointer-events: none;
}

/* ----------FOOTER----------- */
.footer-content {
display: flex;
justify-content: space-between;
gap: 50px;
flex-wrap: wrap;
}

.footer-logo {
flex: 1 1 300px;
}

.footer-logo img {
max-width: 200px;
}
.footer-links,
.footer-contact {
flex: 1 1 220px;
}

.footer-links h4,
.footer-contact h4 {
margin-bottom: 15px;
font-size: 1.2rem;
font-weight: 600;
}

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

.footer-links ul li {
    display: inline-block;
    margin: 0 20px 0 0;
}

.footer-links a,
.footer-contact a {
color: #caffea;
text-decoration: none;
transition: 0.3s;
}

.footer-links a:hover,
.footer-contact a:hover {
color: #7affd4;
}

/* Social Icons */
.social-icons a {
margin-right: 12px;
font-size: 20px;
color: #caffea;
transition: 0.3s;
}

.social-icons a:hover {
color: #7affd4;
}


.footer-style-gradient {
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.25), transparent 60%),
        linear-gradient(to right, #253d36, #2f4b42, #3d5d50, #6e6252, #b4a38c);
}
.vgh-footer p {
    margin: 20px 0 0 ;
}

/* MULTI-ITEM CAROUSEL FIX */
@media (max-width: 575.98px) {   /* mobile - 1 card */
    #featuredCarousel .carousel-item > .col-12 {
      display: none;
    }
    #featuredCarousel .carousel-item > .col-12:first-child {
      display: block;
    }
  }
  
  @media (min-width: 576px) and (max-width: 991.98px) { /* tablet - 2 cards */
    #featuredCarousel .carousel-item > .col-12 {
      display: none;
    }
  
    #featuredCarousel .carousel-item > .col-12:nth-child(-n+2) {
      display: block;
    }
  }
  
  /* desktop - show all 4 */
  @media (min-width: 992px) {
    #featuredCarousel .carousel-item > .col-12 {
      display: block;
    }
  }
  
  .mySwiper {
    width: 100%;
    padding: 20px 0;
  }
  
  .swiper-slide {
    display: flex;
    justify-content: center;
  }
  
  .card {
    width: 100%;
    /*max-width: 330px;*/
    background: #fff;
    /*padding: 20px;*/
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  }
  .card h6 {
    position: absolute;
    bottom: 20px;
    left:20px;
    color: #fff;
  }
  /* Prevent card from shrinking on mobile */
  .swiper-slide {
    box-sizing: border-box;
  }
  
  .swiper-button-next, .swiper-button-prev {
    color:#ffffff !important;
  }

  .swiper-button-next {
    right: 0 !important;
    
  }
  .swiper-button-prev {
    left: 0 !important;
    
  }
  .swiper-button-next:after, .swiper-button-prev:after {
    font-size: 20px !important;
  }
  


  /*---------ABOUT PAGE-------------*/

   /* ---------- ABOUT HERO ---------- */
   .about-hero {
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;

    /* Gradient background exactly like your image */
    /*background: linear-gradient(
        135deg,
        #0a4438 0%,
        #0e5649 40%,
        #0f6f5a 100%
    );*/
    background: linear-gradient(        135deg,        #c5cdb6 0%,        #dfd8bb 40%,        #ebd1ae 100%    );

    color: #000000;
}

.hero-title {
    font-size: 70px;
    font-weight: 700;
}

.hero-text {
    font-size: 18px;
    line-height: 1.7;
    color: #000000;
}

.hero-globe {
    max-width: 580px;
    width: 100%;
}

/* Responsive */
@media (max-width: 992px) {
    .hero-title {
        font-size: 48px;
        text-align: center;
    }
    .hero-text {
        font-size: 16px;
        text-align: center;
        margin-top: 15px;
    }
    .hero-globe {
        max-width: 400px;
        margin: 0 auto;
        display: block;
    }
    .about-hero {
        padding-top: 100px;
        height: auto;
        padding-bottom: 70px;
    }
}
/* ----------END OF  ABOUT HERO ---------- */
   /* ---------- MISSION / VISION ---------- */
   .mv-section {
    padding: 100px 0;
    /*background: linear-gradient(
        145deg,
        rgba(60, 120, 110, 1) 0%,
        rgba(120, 150, 130, 1) 35%,
        rgba(200, 160, 130, 1) 70%,
        rgba(180, 110, 90, 1) 100%
    );*/
}

.mv-card {
    /*background: rgba(10, 68, 56, 0.8);*/
    background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    border-radius: 22px;
    padding: 40px 20px;
    backdrop-filter: blur(18px);         /* GLASS EFFECT */
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--hdr-solid);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
    color: #000000;
}

/* subtle pattern overlay in the corner like image */
.mv-card::after {
    content: "";
    position: absolute;
    right: -20px;
    bottom: -10px;
    width: 180px;
    height: 180px;
    
    background-size: contain;
    opacity: 0.12;
}
.mv-title {
    font-size: 32px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 12px;
}

.mv-underline {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #e0d189, #ffcf63);
    border-radius: 4px;
    margin-bottom: 25px;
}
.mv-underline.mv-title-mission {
  width: 175px;
}
.mv-underline.mv-title-vission {
  width: 155px;
}
.vission-extra-text {
  display: inline-block;
  visibility: hidden;
}
@media (max-width: 576px) {
  .vission-extra-text {
    display: none;
  }
}
/* ---------- END OF MISSION / VISION ---------- */


/* ---------- MAP SECTION ---------- */
    .map-section{ padding:44px 0;color:#dbeee6; }
    .map-card{
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    }
/* ---------- END OF MAP SECTION ---------- */

/*------------ VGH Completitive Edge Section ------------*/
.vgh-edge-section {
  /*background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.7), rgba(230,240,230,0.4)),
              linear-gradient(135deg, #dfe7dd 0%, #cfd9d4 40%, #b4c7c2 100%);*/
  background-size: cover;
  padding: 70px 0;
  border-radius: 0;
}

/* Section title */
.vgh-title {
  font-size: 28px;
  color: #0f3a32;
  font-weight: 700;
}

/* List container */
.vgh-list {
  margin-top: 20px;
}

/* Each list item */
.vgh-item {
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(15, 58, 50, 0.15);
}

/* Large numbers */
.vgh-number {
  font-size: 48px;
  font-weight: 700;
  color: #c19e5a;         /* warm-gold tone from the image */
  margin-right: 22px;
  line-height: 1;
  min-width: 45px;
}

/* Text block */
.vgh-content h5 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f3a32;
}

.vgh-content p {
  margin: 5px 0 0;
  font-size: 14px;
  color: rgba(15, 58, 50, 0.75);
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .vgh-number {
    font-size: 38px;
    min-width: 35px;
  }
  .vgh-content h5 { font-size: 16px; }
  .vgh-content p { font-size: 13px; }
}

/*----------------END OF ABOUT------------------------*/

/*----------------TECHNOLOGY PAGE-------------------*/

/*------ TECH HERO BACKGROUND --------------*/
.tech-hero-section {
    background: radial-gradient(circle at center, rgba(223, 216, 171, 0.15), transparent 60%), linear-gradient(180deg, #c5cdb6, #dfd8bb, #ebd1ae);
    padding: 80px 0 40px;
    color: white;
}

.hero-city-img {
    max-width: 500px;
}

@media (max-width: 576px) {
  .hero-city-img {
    max-width: 100%;
  }
  
}
/* TITLES */
.tech-title {
    font-size: 42px;
    font-weight: 700;
    color: #000000;
}

.tech-subtitle {
    font-size: 20px;
    opacity: 0.8;
    color: #000000;
}
/*------ TECH HERO BACKGROUND --------------*/

/*--------------- INTELLIGENCE SECTION -----------------*/
.intelligence-section {
    /*background: linear-gradient(180deg, #003534, #0b403c, #0d453f);*/
    color: #000000;
}

.section-heading {
    font-size: 32px;
    font-weight: 700;
    color: white;
}

.int-list li {
    list-style: none;
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}

.int-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 22px;
    color: #58f5ff;
}

/* RIGHT SIDE BOXES */
.right-box {
    background: radial-gradient(circle at center, rgba(223, 216, 171, 0.15), transparent 60%), linear-gradient(180deg, #c5cdb6, #dfd8bb, #ebd1ae);
    padding: 10px 20px;
    margin-bottom: 15px;
    border-radius: 12px;
    backdrop-filter: blur(12px);
    color: #000000;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.rb-icon {
    width: 50px;
    margin-right: 15px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}

/*--------------- END OF INTELLIGENCE SECTION -----------------*/

/*-----------SMART GRID SECTION------------------- */
.smart-grid-section {
    /*background: linear-gradient(180deg, #0d453f, #0b403c, #003534);*/
    color: #000000;
}

.glass-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
    color: var(--bs-body-color);
}

.card-icon {
    width: 100px;
    margin-bottom: 10px;
}

.glass-card h5 {
    font-size: 18px;
    font-weight: 600;
}

.glass-card p {
    font-size: 14px;
    color: #000000;
}
/*-----------END OF SMART GRID SECTION------------------- */


/*------------------SOLUTION------------------------*/
 .solution-page .ibd-card {
  height: auto;
  padding: 10px 20px;
 }

  .solution-page .ibd-card .ibd-text h5 {
    margin: 0 !important;
    display: flex;
    gap: 10px;
  }
  .solution-page .ibd-card .ibd-text h5 img {
    max-width: 30px;
  }

  /* PARALLAX HERO SLIDER */
.parallax-slider {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.myParallaxSwiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
} 

.swiper-pagination-bullet {
  background: #ffffff;
  opacity: .6;
}
.swiper-pagination-bullet-active {
   background: #ffffff;
  opacity: 1;
}

/* Background Image (Parallax Layer) */
.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Text Layer */
.slide-content {
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 800px;
  padding: 20px;
}

.slide-content h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
}

.slide-content p {
  margin-top: 15px;
  font-size: 1.2rem;
  opacity: 0.9;
}

/* Dark overlay for readability */
.parallax-slider .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

/* Responsive */
@media (max-width: 768px) {
  .slide-content h1 {
    font-size: 2rem;
  }
  .parallax-slider {
    height: 80vh;
  }
}



/*--------------Flagship Projects--------------*/
/* Flagship Projects Section */
.flagship-section {
  background: linear-gradient(135deg, #faf7ef 0%, #f7f5e8 100%);
}

/* Card styling */
.project-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Image styling */
.project-img {
  border-radius: 14px;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Button */
.project-btn {
  background: #f5d18b;
  color: #000;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 30px;
  display: block;
  transition: 0.3s ease;
  margin-top: 5px;
}

.project-btn:hover {
  background: #e4bd73;
  color: #000;
}

/* Text spacing */
.project-card h5 {
  font-size: 1.1rem;
}

.project-card p {
  font-size: 0.95rem;
  margin-bottom: 1.2rem;
}


/*--------------PROJECT PORTFOLIO--------------*/
 /* Section Background */
.portfolio-section {
  background: linear-gradient(135deg, #f6f2e9 0%, #eef4ef 50%, #f9f6f2 100%);
}

/* Heading */
.portfolio-title {
  font-weight: 600;
  color: #2b4a42;
  margin-top: 60px;
}

.portfolio-subtitle {
  max-width: 600px;
  margin: 0 auto;
  color: #6b7f78;
  font-size: 15px;
}

/* Filter Buttons */
.filter-btn {
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 14px;
  border: 1px solid #d6dfda;
  background: #ffffff;
  color: #2b4a42;
}

.filter-btn.active,
.filter-btn:hover {
  background: #2b4a42;
  color: #ffffff;
  border-color: #2b4a42;
}

/* Portfolio Card */
.portfolio-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: transform .3s ease, box-shadow .3s ease;
}

.portfolio-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.portfolio-card-body {
  padding: 16px;
}

.portfolio-card-body h6 {
  margin: 0;
  font-weight: 600;
  color: #243f38;
}

.portfolio-card-body p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #7b8f88;
}

/* Hover Effect */
.portfolio-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.portfolio-item {
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

/* visible */
.portfolio-item.show {
  opacity: 1;
  transform: scale(1) translateY(0);
  display: block;
}

/* hidden (animated) */
.portfolio-item.hide {
  opacity: 0;
  transform: scale(0.92) translateY(12px);
}
/*--------------END OF PROJECT PORTFOLIO--------------*/

/*--------------LEADERSHIP ------------------*/
/* HERO */
.leadership-hero {
  padding: 80px 0;
  background: radial-gradient(circle at right,
    #d8c08c,
    #3f6b5c 60%,
    #153e3a);
  color: #fff;
}

.leadership-hero h1 {
  font-size: 42px;
  font-weight: 600;
  color: #e7d3a3;
  margin-top: 30px;
}

.leadership-hero p {
  max-width: 600px;
  opacity: 0.9;
}

/* SECTION TITLE */
.section-title {
  font-weight: 600;
  color: #355f53;
}

/* LEADERS */
.leader-card {
  width: 250px;
  height: 250px;
  margin: auto;
  border-radius: 50%;
  padding: 6px;
  background: radial-gradient(circle, #f5dba1, #9e7f45);
  box-shadow: 0 0 25px rgba(215, 190, 120, 0.6);
  margin-bottom:15px ;
}

.leader-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Glass glow ring */
.glass-ring {
  position: absolute;
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  z-index: 0;
  opacity: 0.9;
  animation: rotateGlass 14s linear infinite;
  filter: drop-shadow(0 0 25px rgba(214, 182, 106, 0.45));
}

/* Smooth rotation */
@keyframes rotateGlass {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Ensure image stays above glass */
.leader-card img {
  position: relative;
  z-index: 2;
  border-radius: 50%;
}

/* Optional hover intensification */
.leader-card:hover .glass-ring {
  filter:
    drop-shadow(0 0 35px rgba(214,182,106,0.7))
    blur(0.3px);
}


/* ADVISORY */
.advisory-section {
  padding: 60px 0;
  background: linear-gradient(135deg, #edf0ec, #dde4dd);
}

.advisory-light,
.advisory-dark {
  padding: 40px;
  border-radius: 30px;
}

.advisory-light {
  background: rgba(255,255,255,0.85);
}

.advisory-dark {
  background: linear-gradient(135deg, #3f6b5c, #244b43);
  color: #fff;
}

.advisory-section ul {
  padding-left: 18px;
}

.advisory-section li {
  margin-bottom: 10px;
}

/* PARTNERS */
.partner-card {
  background: #fff;
  padding: 18px;
  border-radius: 12px;
  font-weight: 500;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  margin: 0 10px;
}
.partener-cont {
  margin-top:30px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .leadership-hero h1 {
    font-size: 30px;
  }
}
/*--------------END OF LEADERSHIP------------------*/

/*-----------------CONTACT PAGE-------------------*/
 .contact-body {
background: linear-gradient(135deg, #e8e3d6, #5e8f87);
font-family: 'Inter', sans-serif;
}


.contact-map-section .section-title {
margin-top: 125px;
}


.contact-body .map-glass-box,
.contact-body .glass-card {
background: rgba(255,255,255,0.25);
border-radius: 20px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: 25px;
box-shadow: 0 0 40px rgba(0,0,0,0.15);
}


.contact-body .map-label {
position: absolute;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 6px 12px;
border-radius: 12px;
font-size: 12px;
}


.contact-body .partnership-section {
  padding: 50px 0;
  /*background: linear-gradient(135deg, #e9e2d1, #8faea1, #4b7669);*/
}

/* GLASS BASE */
.contact-body .glass-card {
  position: relative;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 32px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}

/* LEFT LIST */
.contact-body .partner-types h5 {
  font-weight: 600;
}

.contact-body .partner-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-body .partner-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-weight: 500;
}

.contact-body .partner-list i {
  font-size: 1.2rem;
  color: #cfa968;
}

/* INPUTS */
.contact-body .glass-input {
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 14px;
  padding: 12px 14px;
  color: #1b3a32;
}

.contact-body .glass-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(207,169,104,0.4);
}

/* BUTTON */
.contact-body .submit-btn {
  background: linear-gradient(135deg, #e5c07b, #cfa968);
  color: #1f3d35;
  border-radius: 30px;
  padding: 12px 36px;
  font-weight: 600;
  border: none;
  box-shadow: 0 10px 25px rgba(207,169,104,0.4);
}

.contact-body .submit-btn:hover {
  transform: translateY(-2px);
}

/* DECORATIVE GLOW */
.contact-body .leaf-glow {
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(126,214,192,0.5), transparent 70%);
  filter: blur(25px);
}


.contact-body .submit-btn {
background: linear-gradient(135deg, #e5c27b, #b38a3f);
border-radius: 25px;
padding: 10px 25px;
color: #000;
}


.contact-body .small-btn {
background: #e5c27b;
border-radius: 20px;
padding: 6px 18px;
}


.contact-body .partner-list li {
list-style: none;
padding: 6px 0;
}

.contact-body .partner-list li {
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-body .partner-list li.active {
  color: #cfa968;
  font-weight: 600;
}

.contact-body .form-transition {
  transition: all 0.3s ease;
}

.contact-body .form-transition.hide {
  opacity: 0;
  transform: scale(0.96);
}

.contact-body .form-transition.show {
  opacity: 1;
  transform: scale(1);
}

.contact-body .btn-gold {
  background: linear-gradient(90deg, #e6c27a, #cfa968);
  color: #1f3d34;
  font-weight: 600;
  border-radius: 30px;
  padding: 12px;
  border: none;
  transition: all 0.3s ease;
}

.contact-body .btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(207,169,104,0.4);
}

.contact-body .map-footer {
  margin-top: 30px;
}
.contact-body .map-footer div {
  font-size: 20px;
  font-weight: 600px  ;
}

.contact-body .investor-section {
  margin-bottom: 30px;
}
.contact-body .investor-section h6 {
  margin-top: 20px;
  font-size: 1.25rem;
}
.contact-body .investor-section-img {
  max-width: 100px;
}

/*-----------------END OF CONTACT PAGE-------------------*/


/*-------------------TOKENIZATION--------------------*/
.token-echosystem .vertical-card img {
  max-height: 125px;
}

.brand-essence-section {
  margin:40px 0;
}

/*-------------------END OF TOKENIZATION--------------*/

/*--------------------INSIGHTS----------------------*/

.insights-hero {
height: 40vh; /* full viewport height */
min-height: 600px; /* keeps good layout on small screens */
background: url("./../img/insights/hero-bg.jpeg") center/cover no-repeat;
color: #fff;
position: relative;
padding-top: 80px; /* space for navbar */
}

.insights-hero::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}

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

.insights-hero h1 {
font-size: 3rem;
font-weight: 700;
letter-spacing: 3px;
}


.insights-hero h1 span {
    color: #F9B233;
}

.expert-articles-section img {
  max-height: 125px;
}

.expert-articles-section .col-xs-2{
   
}
.expert-articles-section .col-half-offset{
    margin-left:4.166666667%
}
@media (max-width: 575.98px) {   /* mobile - 1 card */
    .insights-hero h1 {
        font-size: 2rem;
    }
    .insights-hero p {
        font-size: 14px;
    }
    .expert-articles-section .col-half-offset{
    margin-left:0%
}
  }

  /* Section background */
.category-bar-section {
  background: linear-gradient(135deg, #e6efe9, #c7d9d1);
}

/* Glass container */
.category-bar {
  padding: 14px 18px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* Pills */
.category-pill {
  border: none;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  color: #2f4f46;
  background: rgba(255,255,255,0.75);
  transition: all 0.3s ease;
}

/* Active pill */
.category-pill.active {
  background: linear-gradient(135deg, #f3deb0, #d8b76f);
  color: #3b2e12;
  box-shadow: 0 6px 16px rgba(216,183,111,0.5);
}

/* Hover */
.category-pill:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.95);
}

/* Responsive */
@media (max-width: 576px) {
  .category-pill {
    font-size: 13px;
    padding: 8px 18px;
  }
}
@media (min-width: 576px) {
.col-md-cus-2 {
  width: 20%;
}
}

 /* Pill Container */
    .pill-container {
      background: rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(12px);
      border-radius: 50px;
      padding: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    }

    .pill-btn {
      border: none;
      padding: 10px 22px;
      border-radius: 30px;
      background: #ffffff;
      font-size: 14px;
      color: #333;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

    .pill-btn.active {
      background: linear-gradient(135deg, #e7c27d, #f3d59c);
      color: #000;
      font-weight: 600;
    }

    .pill-btn:hover {
      transform: translateY(-2px);
    }

    /* Content Box */
    .news-content {
      margin-top: 40px;
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(14px);
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.08);
      animation: fadeIn 0.4s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
/*----------END OF INSIGHTS------------------*/