html{
     overflow-x: hidden;
}
body{
    margin: auto;
     overflow-x: hidden;
  font-family: "Unbounded", sans-serif;
  scroll-behavior: smooth;
}
p{
  font-family: "Inter", sans-serif !important;
}
h6{
  font-family: "Geist Mono", monospace !important;
}
h3{
  font-family: "Inter", sans-serif !important;
}
body.modal-open {
    padding-right: 0 !important;
}

a {
    text-decoration: none;
    transition: all ease-in-out .5s;
    -webkit-transition: all ease-in-out .5s;
    -o-transition: all ease-in-out .5s;
    -moz-transition: all ease-in-out .5s;
}
.ip-loader {
        bottom: 0 !important;
    text-align: center !important;
    position: relative !important;
    margin-left: 0%;
    width: 100%;
    height: 100vh;
    display: flex
;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.loading img {
    width: 222px;
    animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}
/* OTHER PAGES */
.inner-header {
  /* background: #000; */
  position: relative;
}

.inner-header .logo img {
  /* filter: brightness(0) invert(11); */
}





.inner-header .nav-toggle:before {
    background-color: #ffffff;
    box-shadow: 0 0.5em 0 0 #ffffff, 0 1em 0 0 #ffffff;
}











.header .menu li a img{
    width: 14px;
    margin-left: 7px;
    margin-top: -2px;
}

/* default (home page) */
.header .menu li a {
  color: #3B3F40;   /* or your normal color */
}

/* INNER PAGES */
.inner-header .menu li a {
  /* color: #fff; */
}

/* arrow icon white */
.inner-header .menu li a img {
  /* filter: brightness(0) invert(1); */
  width: 10px;
  margin-left: 10px;
}

.inner-header .menu li a:hover {
    color: #b5b5b5;
}


.head-menu{
    display: none;
}

.header{
    width: 100%;
    float: left;
    padding: 10px 0;
    position: relative;
    /* height: 130px; */
    z-index:11;
}

.logo {
    /* width: 100%; */
    float: left;
    /* display: flex; */
    /* align-items: center; */
    justify-content: center;
    height: 100%;
    /* width: 19%; */
}
.logo img{
    width: 100%;
    float: left;
    max-width: 232px;
    position: relative;
    z-index: 1111;
}
.hdr-menu {
    width: 100%;
    float: right;
    /* display: flex; */
    height: 100%;
    /* align-items: center; */
    gap: 28px;
}
.menus{
    float: right;
    width: 100%;
}
.header_menu_area {
    width: 100%;
    position: relative;
    float: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header_menu_area > ul {
    padding-right: 0px;
    padding: 0 0 0 !important;
    /* width: 90%; */
    float: right;
    vertical-align: middle;
    margin: unset;
    text-align: right;
}
.header_menu_area > ul > li:last-child {
    padding-right: 0;
}
.header_menu_area > ul > li {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    color: #000000;
    float: left;
    text-decoration: none;
    list-style-type: none;
    position: relative;
    padding: 0px 20px;
    z-index: 1;
    transition: all ease-in-out 0.5s;
    -o-transition: all ease-in-out 0.5s;
    -ms-transition: all ease-in-out 0.5s;
    -moz-transition: all ease-in-out 0.5s;
    -webkit-transition: all ease-in-out 0.5s;
    text-decoration: none;
    text-align: center;
}

.header_menu_area > ul > li > a, 
.header_menu_area > ul > li > a.stable {
    position: relative;
    float: left;
    font-family: "Inter", sans-serif !important;
    color: #3B3F40;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: text-shadow 0.3s ease, color 0.3s ease;
}

/* Force the stable/active page color and weight */
.header_menu_area > ul > li > a.stable {
    color: #020d33 !important;
    text-shadow: 0.2px 0 0 #020d33, -0.2px 0 0 #020d33;
}

/* Fix hover for ALL items including "Our Services" */
.header_menu_area > ul > li:hover > a {
    color: #020d33 !important;
    text-shadow: 0.2px 0 0 #020d33, -0.2px 0 0 #020d33;
}
.menu ul {
    display: flex;
    flex-wrap: wrap;
    width: 768px; /* adjust as needed */
    gap: 0;
}
.menu ul li {
    width: 50%;   /* 2 columns */
    float: none;  /* REMOVE float */
}
.menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    top: 0px;
    /* height: 0; */
    padding: 0;
    position: absolute;
    left: -250px;
    padding-top: 72px;
    /* right: 0; */
    bottom: 0;
    background: transparent;
    z-index: 99999;
    /* transform: translate(0, 20px); */
    /* transition: all .2s ease-out; */
    /* -webkit-transform: perspective(600px) rotateX(-90deg); */
    -moz-transform: perspective(600px) rotateX(-90deg);
    -ms-transform: perspective(600px) rotateX(-90deg);
    -o-transform: perspective(600px) rotateX(-90deg);
    /* transform: perspective(600px) rotateX(-90deg); */
    /* -webkit-transition: -webkit-transform .5s ease, opacity .6s ease, max-height .6s step-end, max-width .6s step-end, padding .6s step-end; */
    -o-transition: -o-transform .5s ease,opacity .6s ease,max-height .6s step-end,max-width .6s step-end,padding .6s step-end;
    /* transition: transform .5s ease, opacity .6s ease, max-height .6s step-end, max-width .6s step-end, padding .6s step-end; */
}
.menu ul li a:hover, .menu ul li:hover>a {
   background: rgba(255, 255, 255, 0.1);
    color: #fff;
    justify-content: center;
    text-decoration: none;
    backdrop-filter: blur(10px);
    transition: all ease-in-out 0.5s;
    -o-transition: all ease-in-out 0.5s;
    -ms-transition: all ease-in-out 0.5s;
    -moz-transition: all ease-in-out 0.5s;
    -webkit-transition: all ease-in-out 0.5s;
}

.menu li:first-child {
    margin-left: 0;
}
.menu li:first-child {
    margin-left: 0;
}
.menu ul li {
    display: block;
   
    background: 0 0;
    margin: 0;
    padding: 0;
 
    position: relative;
}
.menu li {
    display: inline-block;
    position: relative;
    z-index: 100;
  
}
.menu ul li a {
    width: 100%;
    font-size: 16px;
    font-family: "Inter", sans-serif !important;
    font-weight: 400;
    padding: 15px 15px;
    display: block;
    color: #fff !important;
    background: #020D33;
    text-align: -webkit-match-parent;
    text-decoration: none;
    text-align: left;
    border-bottom: 1px solid #eeeeee24;
}
.menu li:hover>ul {
    visibility: visible;
    opacity: 1;
    /* transform: translate(0, 0); */
    transition: all .5s ease-out;
    height: auto;
    right: -30px;
}


.menu ul li:last-child {
    width: 100%;
}
.menu ul li:nth-child(odd) {
    border-right: 1px solid #eeeeee24;
}.menu ul li:last-child {
    border-right: none;
}
/*mobile-wrapper*/



@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1180px;
    }

}



/*codestaring*/


/* Container positioning */
.banner-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #020d33;
    float: left;
}

/* Grid layout for both sections */
.content-grid {
    display: flex;
    align-items: flex-end; /* Aligns everything to the bottom like the image */
    height: 85vh;
    /* padding-bottom: 77px; */ /* Distance from bottom */
}

.left-side {
    /* flex: 0 0 64%; */ /* Headline takes 55% width */
    width: 67.6%;
    float: left;
}

.right-side {
     /* Paragraph takes the remaining 45% */
}

/* Carousel Headlines */
.top-carousel, .top-carousel .item {
    height: 100vh;
}

.top-carousel .item {
    background-size: cover;
    background-position: center;
}

.left-side h2 {
    font-size: 50px;
    color: #fff;
    font-weight: 600;
    line-height: 60px;
    margin: 0;
    text-transform: uppercase;
    float: left;
    width: 84%;
}

/* Fixed Overlay Logic */
.fixed-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none; /* Allows clicking carousel if needed */
}

.right-side {
    pointer-events: auto; /* Re-enable clicks for buttons */
    float: left;
    width: 32%;
    position: relative;
    top: -15px;
}

.right-side p {
    color: rgba(255,255,255,0.8);
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 15px;
}

/* Buttons Styling */
.button-row {
    display: flex;
    gap: 15px;
    float: left;
    width: 100%;
}
.arrow-btn{
    width: 12px !important;
}
.btn-white {
    background: #fff;
    color: #000;
    justify-content: center;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    font-size: 16px;
    align-items: center;
    font-family: "Inter", sans-serif !important;
    width: 152px;
    height: 49px;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease; /* Smooth text color change */
    border: none;
    cursor: pointer;
    z-index: 1; /* Keeps text above the slide */
}

/* Glass Background Layer */
.btn-white::after {
    content: '';
    position: absolute;
    bottom: -100%;
    left: 0;
        border-radius: 10px;

    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: 0.5s ease;
    z-index: -1; /* Ensures text stays in front of this layer */
}

/* Hover Effect */
.btn-white:hover::after {
    bottom: 0;
}

.btn-white:hover {
    background-color: transparent;
    color: #fff; /* Optional: text changes to white to contrast with the glass */
}
.btn-white:hover .arrow-btn{
filter: invert(1);
}

.btn-outline {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgb(255 255 255 / 15%);
    justify-content: center;
    border-radius: 8px;
    text-decoration: none;
    backdrop-filter: blur(10px);
    font-family: "Inter", sans-serif !important;
    font-size: 16px;
    font-weight: 500;
    width: 152px;
    height: 49px;
    align-items: center;
    display: flex;
    position: relative;
    overflow: hidden; /* Important: keeps the glare inside the button */
    gap: 10px;
    transition: 0.3s;
}

.btn-outline::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: 0.5s;
}

/* CORRECTED: Trigger animation on hover */
.btn-outline:hover::after {
    left: 100%;
}




.left-side h2 {
    display: inline-block;
    /* Important: Keeps the perspective tight to the text */
    perspective: 500px;
}

.owl-item.active .left-side h2 {
    animation: carveReveal 1.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes carveReveal {
    0% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
        /* Tilt back on Y axis */
        transform: rotateY(-30deg) translateX(-50px);
        filter: blur(8px);
    }
    100% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        /* Flatten to center */
        transform: rotateY(0deg) translateX(0px);
        filter: blur(0px);
    }
}

.top-carousel .item {
    background-size: cover;
    background-position: center;
    /* Important for the "Wow" effect */
    transition: none !important; 
}

/* Apply this class when the item is active */
.top-carousel .owl-item.active .item {
    animation: wowTransition 2s ease-out forwards;
}

@keyframes wowTransition {
    0% {
        filter: brightness(0.5) blur(10px);
        transform: translateX(10%);
    }
    100% {
        filter: brightness(1) blur(0px);
        transform: translateX(0%);
    }
}

/* Ensure the carousel doesn't have overflow clipping issues */
.top-carousel .owl-item {
    position: relative;
}

/* Exit: The current image is sliced away from the center */
.maskOut {
    animation: maskOut 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) both;
    z-index: 1;
}

/* Enter: The new image slices in from the center */
.maskIn {
    animation: maskIn 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) both;
    z-index: 2;
}

@keyframes maskOut {
    0% { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(50% 50% 50% 50%); }
}

@keyframes maskIn {
    0% { clip-path: inset(50% 50% 50% 50%); }
    100% { clip-path: inset(0 0 0 0); }
}
/* Add this if you want words to pop in one after another */
.left-side h2 span:nth-child(1) { animation-delay: 0.1s; }
.left-side h2 span:nth-child(2) { animation-delay: 0.2s; }
.left-side h2 span:nth-child(3) { animation-delay: 0.3s; }




.panel1{width: 100%;float: left;background: #020D33;padding: 0px 0 50px;position: relative;}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

.panel1-h2{
    font-size: 36px;
    color: #fff;
    font-weight: 400;
    width: 100%;
    line-height: 151%;
    letter-spacing: -1px;
    margin: 27px 0 14px;
    text-transform: capitalize;
 }




.tag-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Glassmorphism background */
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari support */
  border: 1px solid rgb(255 255 255 / 27%); /* Subtle light border */
  color: #fff;
  padding: 2px 5px;
  border-radius: 0;
  font-size: 15px;
  overflow: hidden;
  z-index: 1;
  /* float: left; */
  font-family: "Geist Mono", sans-serif !important;
}

/* Green dot */
.tag-box .dot {
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 0;
  margin-left: 6px;
  box-shadow: 0 0 8px #fff; /* Adds a soft glow to the dot */
}

/* Animated border layer (Kept as is) */
.tag-box::before {
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: 30px;
  background: conic-gradient(from 0deg, transparent, transparent, #646b82, transparent, transparent);
  animation: rotateBorder 3s linear infinite;
  z-index: -1;
  opacity: 0.6; /* Slight transparency for the border to look more premium */
}

.tag-box::after {
  content: "";
  position: absolute;
  inset: 2px;
  /* background: #191b1f; */
  border-radius: 30px;
  z-index: -1;
}

/* Rotation animation */
@keyframes rotateBorder {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


span.fill-text .char {
  color: #646B82; /* Initial grey */
  transition: color 0.3s ease;
}

span.fill-text .char.visible {
  color: #fff; /* Highlight color */
}

.light .char {
  color: #646B82;
}

.light .char.visible {
  color: #646B82;
}
.panel-header{

}
.panel-content{float: left;width: 79%;position: absolute;bottom: 30px;}
.panel-content h3{font-size: 36px;letter-spacing: -2px;line-height: 40px;font-weight: 600;color: #fff;text-transform: capitalize;}
.panel-content p{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #C7C7C7;
    word-spacing: -2px;
    margin-bottom: 12px;
}
/* Glassmorphism Navigation Styling */
.panel-carousel .owl-nav {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 8px;
}

.panel-carousel .owl-prev,
.panel-carousel .owl-next {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    width: 38px;
    height: 38px;
    /* border-radius: 5px; */
    font-size: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}
.panel-carousel .owl-prev img,
.panel-carousel .owl-next img {

width: 7px;
}
.panel-carousel .owl-prev:hover,
.panel-carousel .owl-next:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}
.lorem-tag{
     background: rgba(255, 255, 255, 0.1) !important;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2) !important;
     color: #fff !important;
     /* width: 40px; */
     /* height: 40px; */
     /* border-radius: 5px; */
     font-size: 15px !important;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: 0.3s;
     float: left;
     padding: 3px 7px;
     font-family: 'Geist Mono';
}
/* Item Styling */
.panel-carousel .item {
    height: 516px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

/* Container for all dots */
.panel-carousel .owl-dots {
    position: absolute;
    bottom: 13px;
    left: 24px;
    display: flex;
    gap: 10px;
    right: 30px;
}

.panel-carousel .owl-dot {
    width: 102px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.panel-carousel .owl-dot.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #fff !important;
    animation: progressFill 5s linear forwards;
}

@keyframes progressFill {
    0% { width: 0%; }
    100% { width: 100%; }
}
.bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Image stays at back */
}

.panel-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 23px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #fff;
    z-index: 2; /* Content stays on top */
    height: 100%;
}



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

/* Custom Animation Keyframes */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.owl-animated-in { z-index: 2; }
.owl-animated-out { z-index: 1; }

/* Applying the zoom to the carousel items */
.panel-carousel .owl-item.active .item {
    animation: zoomIn 0.8s ease-out;
}


@media (max-width: 500px){
.banner-mobil{
    display: block;
}
.banner-desktop{
    display: none;
}
}
.mobilemenu{
    width: 100%;
    float: left;
    position: relative;
    display: none;
}
@media (max-width: 991px){
.hdr-menu{
display: none;
}
.mobilemenu{
    display: block;
}
}


.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}.sticky .logo img{
 width: 180px; 
}

.sticky ul{padding-top: 58px;}



.panel2{
    float: left;
    width: 100%;
    padding: 23px 0px;
}

/*odometer*/
 .counterup-section {
   float: left;
   width: 100%;
   align-items: start;
   margin-top: 27px;
   }


.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
  font-family: "Unbounded", sans-serif !important;
}
    .counterup-container {
     display: flex;
     float: left;
    }
.odometer-wrapper {
  display: inline-flex;
  align-items: baseline;
  justify-content: start;
  font-size: 64px;
  font-weight: 500;
  float: left;
  width: 91%;
  color: #fff;
  border-bottom: 1px solid #a7a7a7;
}



.plus {
  margin-left: 5px;
  position: relative;
  top: 0px;
  font-weight: 600;
  font-size: 40px;
}
    .counter-box {
      float: left;
      width: 100%;
    }

    .odometer {
      font-size: 64px;
      font-weight: 500;
      margin-bottom: -4px;
      line-height: 130% !important;
      letter-spacing: 0px;
      /* margin-left: -8px; */
      color: #fff;
      float: left;
    }


.counter-p{
    font-size: 18px;
    line-height: 150%;
    float: left;
    color: #fff;
    width: 100%;
    padding-top: 20px;
}

.service-card {
  position: relative;
  min-height: 520px;
  border-radius: 14px;
  padding: 34px 28px 24px;
  background: #2b335d; /* default box color */
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
  transition: 0.45s ease;
}

.service-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0; /* hidden by default */
  transform: scale(1.08);
  transition: all 0.5s ease;
  z-index: 0;
}

.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,20,70,0.05) 0%, rgba(8,20,70,0.82) 100%);
  opacity: 0;
  transition: 0.45s ease;
  z-index: 1;
}

.service-image-wrap {
  position: relative;
  z-index: 2;
  width: 320px;
  height: 320px;
  margin: 12px auto 34px;
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.5s ease;
}

.service-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-content {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  z-index: 3;
  text-align: center;
}

.service-title {
  color: #fff;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 700;
  text-transform: uppercase;
}

.service-card:hover .service-bg {
  opacity: 1; /* bg image comes on hover */
  transform: scale(1);
}

.service-card:hover::after {
  opacity: 1;
}

.service-card:hover .service-image-wrap {
  opacity: 0;
  transform: scale(0.55);
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 55px rgba(0,0,0,0.35);
}
.services-carousel .owl-stage-outer {
    padding-top: 34px;
}


.services-carousel .owl-nav {
    position: absolute;
    top: -70px;
    right: 0;
    display: flex;
    gap: 8px;
}

.services-carousel .owl-prev,
.services-carousel .owl-next {
    background: #535B75 !important;
    backdrop-filter: blur(10px);
    /* border: 1px solid rgba(255, 255, 255, 0.2) !important; */
    color: #fff !important;
    width: 43px;
    height: 44px;
    border-radius: 5px;
    font-size: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}
.services-carousel .owl-prev img,
.services-carousel .owl-next img {

width: 7px;
}
.services-carousel .owl-prev:hover,
.services-carousel .owl-next:hover {
    background: rgb(255 255 255) !important;
}

.services-carousel .owl-prev:hover img,
.services-carousel .owl-next:hover img {
filter: invert(1);
}
.services-section {
    float: left;
    width: 100%;
    padding-top: 55px;
}

.services-title{
    float: left;
    width: 100%;
    text-transform: uppercase;
    font-size: 40px;
    font-weight: 500;
    line-height: 57px;
    color: #fff;
    margin: 15px 0 0px;
}



.values-section {
  position: relative;
  padding: 53px 0;
  /* min-height: 100vh; */
  background: url("../images/value.webp") center center / cover no-repeat;
  background-attachment: fixed;
  overflow: hidden;
  float: left;
  width: 100%;
}


.values-card {
  width: 44%;
  float: right;
  /* margin-left: auto; */
  padding: 36px 47px 36px 19px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 16px 16px 0 16px;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(10px);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
  position: relative;
   clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 40px),
    calc(100% - 40px) 100%,
    0 100%
  );
}

.values-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px 16px 0px 16px;
  padding: 1px;
  background: linear-gradient(135deg, rgb(2 13 51), rgb(16 24 75), rgba(255, 255, 255, 0.5));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;


}

.values-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 45px 100px rgba(0, 0, 0, 0.24);
}

.values-card h2 {
  font-size:38px;
  line-height: 51px;
  font-weight: 500;
  text-transform: uppercase;
  color: #020D33;
  margin-bottom: 11px;
  max-width: 100%;
}

.values-card p {
  font-size: 16px;
  line-height: 24px;
  color: #838181;
  margin-bottom: 36px;
  /* max-width: 600px; */
}

.values-list {
  list-style: none;
  margin-bottom: 23px;
  padding: 0;
}

.values-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 0;
  border-top: 1px solid rgb(160 160 160);
  transition: all 0.35s ease;
  position: relative;
    transition: all 0.35s ease;

}

.values-list li:last-child {
  border-bottom: 1px solid rgba(9, 20, 71, 0.16);
}

.values-list li::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: calc(100% - 16px);
  border-radius: 14px;
  background: linear-gradient(180deg, #1d43ff, #783bff);
  opacity: 0;
  transition: all 0.35s ease;
}

.values-list li:hover {
  padding-left: 16px;
    transition: all 0.35s ease;

}

.values-list li:hover::before {
  width: 6px;
  opacity: 1;
}

.values-list .number {
  /* min-width: 58px; */
  font-size: 18px;
  font-weight: 500;
  color: #0c0c0c;
  transition: color 0.35s ease, transform 0.35s ease;
}

.values-list .text {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 500;
  color: #0c0c0c;
  transition: color 0.35s ease, transform 0.35s ease;
}

.values-list li:hover .number,
.values-list li:hover .text {
  color: #081446;
  transform: translateX(4px);
}

.values-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  border-radius: 8px;
  background: #081446;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.35s ease;
  /* box-shadow: 0 16px 35px rgba(8, 20, 70, 0.25); */
  width: 156px;
  height: 51px;
  font-family: 'Inter',sans-serif;
}

.values-btn span {
  font-size: 16px;
  line-height: 1;
  transition: transform 0.35s ease;
}

.values-btn:hover {
  background: linear-gradient(135deg, #081446 0%, #2143d8 100%);
  transform: translateY(-4px);
  /* box-shadow: 0 24px 45px rgba(8, 20, 70, 0.35); */
}

.values-btn:hover span {
  transform: translateX(6px);
}

@media (max-width: 1199px) {
  .values-container {
    flex-direction: column;
    justify-content: flex-start;
    min-height: auto;
  }

  .values-card {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .values-section {
    padding: 60px 0;
  }


  .values-badge {
    font-size: 18px;
    padding: 10px 14px;
  }

  .values-card {
    padding: 34px 22px 36px;
    border-radius: 20px;
  }

  .values-card p {
    font-size: 17px;
  }

  .values-list li {
    gap: 14px;
    padding: 20px 0;
  }

  .values-list .number {
    min-width: 42px;
    font-size: 20px;
  }

  .values-list .text {
    font-size: 20px;
  }

  .values-btn {
    padding: 16px 24px;
            width: 175px;
  }
}




.tag-box2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Glassmorphism background */
  background: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari support */
  border: 1px solid rgb(255 255 255 / 27%); /* Subtle light border */
  color: #000;
  padding: 2px 5px;
  border-radius: 0;
  font-size: 15px;
  overflow: hidden;
  z-index: 1;
  /* float: left; */
  font-family: "Geist Mono", sans-serif !important;
}

/* Green dot */
.tag-box2 .dot2 {
  width: 6px;
  height: 6px;
  background: #000;
  border-radius: 0;
  margin-left: 6px;
}

/* Animated border layer (Kept as is) */
.tag-box2::before {
  top: -62px;
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 131px;
  /* background: conic-gradient(from 0deg, transparent, transparent, #2648c9, transparent, transparent); */
  animation: rotateBorder 3s linear infinite;
  z-index: -1;
  opacity: 0.6; /* Slight transparency for the border to look more premium */
}

.tag-box2::after {
  content: "";
  position: absolute;
  inset: 2px;
  /* background: #191b1f; */
  border-radius: 30px;
  z-index: -1;
}






.hero-section {
  padding-top: 119px;
  padding-bottom: 0;
  position: relative;
  float: left;
  width: 100%;
  background-color: #020D33;
  overflow: hidden;
}

.hero-box {
  position: relative;
  overflow: hidden;
}

.hero-box-content {
  max-width: 936px;
  margin: 0 auto 70px;
  position: relative;
  text-align: center;
  font-size: 45px;
  line-height: 151%;
  font-weight: 500;
  color: #ffffff;
  text-transform: capitalize;
}

.hero-mini-img {
  display: inline-block;
  width: 120px;
  height: 66px;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 6px;
  transform: translateY(30px) scale(0.92);
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.8s ease;
}

.reveal-line {
  display: inline;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.18);
  position: relative;
  transition: background-size 1.4s ease;
}

.reveal-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  opacity: 0.18;
  filter: blur(18px);
  transition: width 1.2s ease;
  z-index: -1;
}.reveal-section .reveal-item {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease, clip-path 0.8s ease;
}

.reveal-section.is-visible .reveal-item {
  opacity: 1;
  transform: translateY(0);
}
.reveal-section .reveal-item:nth-child(1) {
  transition-delay: 0.08s;
}

.reveal-section .reveal-item:nth-child(2) {
  transition-delay: 0.16s;
}

.reveal-section .reveal-item:nth-child(3) {
  transition-delay: 0.24s;
}

.reveal-section .reveal-item:nth-child(4) {
  transition-delay: 0.32s;
}

.reveal-section .reveal-item:nth-child(5) {
  transition-delay: 0.40s;
}

.reveal-section .reveal-item:nth-child(6) {
  transition-delay: 0.48s;
}


.reveal-section .hero-box-content {
  transform: translateY(50px);
  opacity: 0;
  transition: transform 0.9s ease, opacity 0.9s ease;
}

.reveal-section.active .hero-box-content {
  transform: translateY(0);
  opacity: 1;
}

.reveal-section.active .reveal-line {
  background-size: 100% 100%;
}

.reveal-section.active .reveal-line::after {
  width: 100%;
}

.reveal-section.active .hero-mini-img {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.reveal-section.active .hero-mini-img:nth-of-type(1) {
  transition-delay: 0.35s;
}

.reveal-section.active .hero-mini-img:nth-of-type(2) {
  transition-delay: 0.55s;
}

.reveal-section.active .hero-mini-img:nth-of-type(3) {
  transition-delay: 0.75s;
}

@media (max-width: 991px) {
  .hero-box-content {
    font-size: 34px;
  }

  .hero-mini-img {
    width: 90px;
    height: 52px;
  }
}

@media (max-width: 767px) {
  .hero-section {
    padding-top: 80px;
    padding-bottom: 40px;
  }

  .hero-box-content {
    font-size: 24px;
    line-height: 160%;
    margin-bottom: 40px;
  }

  .hero-mini-img {
    width: 68px;
    height: 42px;
  }
}

.process-section {
  width: 100%;
  background-color: #020D33;
  padding: 70px 0 57px 0;
  overflow: hidden;
  position: relative;
}

.process-head-row {
  margin-bottom: 45px;
}


.process-title {
  color: #FFFFFF;
  font-weight: 500;
  font-size: 40px;
  line-height: 57px;
  text-transform: uppercase;
  margin-top: 14px;
  max-width: 620px;
  margin-bottom: 0;
}



.feature-grid {
  width: 100%;
  margin: 0;
 
}

.feature-card {
  position: relative;
  float: left;
  transition: transform 0.35s ease;
  width: 25%;
  margin-bottom: 38px;
  padding: 0;
}
.feature-card {
  overflow: hidden;
}

.feature-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  transition: all 0.55s ease;
}

.feature-card:hover::after {
  left: 120%;
}


.feature-icon {
  width: 100%;
  padding-bottom: 24px;
  position: relative;
  border-bottom: 1px solid #ccc;
  margin-bottom: 27px;
}

.feature-icon img {
  width: 69px;
  display: block;
  transition: transform 0.45s ease, filter 0.45s ease;
}


.feature-card h4 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 16px;
}

.feature-card p {
  max-width: 87%;
  font-size: 16px;
  line-height: 24px;
  color: #B7B7B7;
  word-spacing: -1px;
  margin-bottom: 0;
}



.process-flex .btn-outline {
    margin-bottom: 17px;
}

@media (max-width: 991px) {
  .process-section {
    padding: 56px 0 14px 0px;
  }

  .process-title {
    font-size: 40px;
    max-width: 100%;
  }

  .feature-card {
    padding-right: 0;
  }

  .feature-card p {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .process-title {
    font-size: 30px;
    line-height: 1.18;
  }

  .feature-grid {
    padding-top: 24px;
  }

  .feature-icon {
    margin-bottom: 20px;
  }

  .feature-card h4 {
    font-size: 15px;
  }

  .feature-card p {
    font-size: 13px;
  }

}

.process-flex{
    display: flex;
    justify-content: space-between;
        align-items: end;
}

.clients-section {
  width: 100%;
  float: left;
  background-color: #020D33;
  padding: 70px 0;
  overflow: hidden;
}

.clients-head {
  margin-bottom: 45px;
}



.clients-title {
  color: #FFFFFF;
  font-weight: 500;
  font-size: 40px;
  line-height: 57px;
  text-transform: uppercase;
  margin-top: 17px;
  margin-bottom: 0;
}

.clients-grid {
  row-gap: 15px;
}

.client-card {
  width: 100%;
  min-height: 91px;
  border-radius: 14px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 17px 10px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.client-card img {
  max-width: 100%;
  max-height: 116px;
  width: auto;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 2;
  transition: all 0.45s ease;
}





/* hover effect */
/*.client-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #4DA8FF 0%, rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.00) 100%);
  opacity: 0;
  transition: all 0.4s ease;
}

.client-card::after {
  content: "";
  position: absolute;
  left: -120%;
  top: 0;
  width: 70%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.00) 100%);
  transform: skewX(-22deg);
  transition: all 0.65s ease;
}

.client-card:hover {
  background-color: #46507A;
  border-color: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.20);
}

.client-card:hover::before {
  opacity: 0.16;
}*/

/*.client-card:hover::after {
  left: 135%;
}
*/
.client-card:hover img {
  transform: scale(1.06);
  /* filter: brightness(1.08); */
}

.clients-btn {
  margin-top: 38px;
  float: none;
  width: 100%;
  display: table;
  margin: 41px auto 0 auto;
}



@media (max-width: 1199px) {
  .clients-title {
    font-size: 46px;
  }
}

@media (max-width: 991px) {
  .clients-section {
    padding: 55px 0;
  }

  .clients-title {
    font-size: 38px;
  }

  .client-card {
    min-height: 125px;
  }
}

@media (max-width: 767px) {
  .clients-title {
    font-size: 28px;
  }

  .clients-head {
    margin-bottom: 30px;
  }

  .clients-grid {
    row-gap: 18px;
  }

  .client-card {
    min-height: 110px;
    padding: 24px 18px;
    border-radius: 12px;
  }

  .client-card img {
    max-width: 160px;
    max-height: 42px;
  }


}
.reveal-box .reveal-item {
  opacity: 0;
  transform: translateY(35px) scale(0.96);
  filter: blur(8px);
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease, clip-path 0.8s ease;
}

.reveal-box.is-visible .reveal-item {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  clip-path: inset(0 0 0 0);
}

.reveal-box .reveal-item:nth-child(1) { transition-delay: 0.08s; }
.reveal-box .reveal-item:nth-child(2) { transition-delay: 0.16s; }
.reveal-box .reveal-item:nth-child(3) { transition-delay: 0.24s; }
.reveal-box .reveal-item:nth-child(4) { transition-delay: 0.32s; }
.reveal-box .reveal-item:nth-child(5) { transition-delay: 0.40s; }
.reveal-box .reveal-item:nth-child(6) { transition-delay: 0.48s; }
.reveal-box .reveal-item:nth-child(7) { transition-delay: 0.56s; }
.reveal-box .reveal-item:nth-child(8) { transition-delay: 0.64s; }

.clients-btn .btn-outline{
    margin: auto;
}


.events-section {
  display: flex;
  background-color: #020d33;
  color: white;
  padding: 28px  0px 60px 133px;
  align-items: flex-start;
  /* gap: 50px; */
  float: left;
  width: 100%;
  position: relative;
}

.content-left {width: 37%;float: left;position: relative;}


.events-section h2 {font-size: 40px;line-height: 57px;margin-bottom: 30px;margin-top: 29px;text-transform: uppercase;}

.event-carousel-nav { display: flex; gap: 10px; }

/* Glassmorphism Navigation Styling */
.event-carousel .owl-nav {
    position: absolute;
    bottom: 0;
    left: -477px;
    display: flex;
    gap: 8px;
}

.event-carousel .owl-prev,
.event-carousel .owl-next {
    background: #535B75 !important;
    backdrop-filter: blur(10px);
    /* border: 1px solid rgba(255, 255, 255, 0.2) !important; */
    color: #fff !important;
    width: 43px;
    height: 43px;
    border-radius: 8px;
    font-size: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}
.event-carousel .owl-prev img,
.event-carousel .owl-next img {

width: 7px;
}
.event-carousel .owl-prev:hover,
.event-carousel .owl-next:hover {
    background: #fff !important;
}
.event-carousel {
  display: flex;
  gap: 20px;
  /* overflow-x: auto; */
  flex: 1;
}

.card-event {
  background: #253254;
  padding: 18px 28px 18px 19px;
  border-radius: 8px;
  flex: 0 0 auto;
    transition: all 0.35s ease;
      overflow: hidden;
position: relative;
    width: 100%;
    min-height: 394px;
  border: 1px solid #253254;

}

.event-number {font-size: 18px;font-weight: 500;margin-bottom: 15px;  }

.card-img {height: 203px;margin-bottom: 20px;overflow: visible;     transition: all 0.35s ease;
}
.card-img img {margin: auto;width: 215px !important;object-fit: cover;transition: transform 0.4s ease;}

.card-event h4 {font-weight: 500;font-size: 15px;margin-bottom: 9px;line-height: 28px; text-transform:uppercase; }
.card-event p {font-size: 16px;color: #B7B7B7;line-height: 24px;margin-bottom: 3px;}

.content-right {
    float: left;
    width: 63%;
    overflow: visible;
}


.event-carousel .owl-prev:hover img,
.event-carousel .owl-next:hover img {
filter: invert(1);
}


.card-event:hover {
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);
  background: #2d3b63;
}

.card-event:hover .card-img img {
  transform: scale(1.08);
}
.card-event:hover {
  border: 1px solid #e5e5e570;
  box-shadow: 0 0 18px rgba(110, 168, 255, 0.35);
}.card-event::before {
  content: "";
  position: absolute;
  top: 0;
  left: -91%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.18),
    transparent
  );
  transform: skewX(-25deg);
  transition: 0.6s;
}

.card-event:hover::before {
  left: 130%;
}






/* testimonails */
.testimon{
    padding: 38px 0px;
    float: left;
    width: 100%;
  background-color: #020D33;
}
.testimon h2 {
    font-size: 40px;
    line-height: 57px;
    margin-bottom: 35px;
    margin-top: 18px;
    color: #fff;
    float: left;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
}
  .testi-card{
    background-color: #2D3655;
    padding: 30px 31px;
    border-radius: 8px;
    border: 1px solid #2d3655;
    float: left;
    width: 100%; transition: transform 0.4s ease;
  }
 .testi-card:hover{
        border: 1px solid #f5f5f5;
 transition: transform 0.4s ease;
 }
.star{
    width: 115px !important;
    float: left;
    margin-bottom: 30px;
}
  .testi-card .cont p{
    color: #dddddd;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 0px;
    /* padding-bottom: 24px; */
    word-spacing: -1px;
    float: left;
    width: 100%;
  }
  .testi-card .cardimg{
        display: flex;
        gap: 11px;
        flex-direction: row;
        width: 100%;
        align-items: center;
  }
  .testi-card .cardimg .profile{
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
   .testi-card .cardimg .crdname{
        display: flex;
        flex-direction: column;
    width: calc(100% - 63px);
   }
    .testi-card .cardimg .crdname p{color: #fff;font-size: 16px;font-weight: 500;margin: 0;}
    .testi-card .cardimg .crdname .designatin{
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
    }
    .cardimg-full{
          display: flex;
          align-items: center;
          flex-direction: row;
          justify-content: space-between;
          margin-top: 24px;
          float: left;
          width: 100%;
    }

/* Ensure the container matches your image's dark blue theme */
.map-section {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
    background-color: #020D33;

}

.map-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('../images/world.webp');
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
    animation: mapBreath 9s ease-in-out infinite;
}

@keyframes mapBreath {
  0%, 100% {
    transform: scale(1);
    filter: blur(0px) brightness(1);
  }
  50% {
    transform: scale(1.04);
    filter: blur(1.5px) brightness(1.15);
  }
}
.map-content {
  z-index: 1;
  text-align: center;

  /* Text entrance */
  animation: textReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.map-content h2{
      color: white;
  font-size:45px;
  font-weight:500;
  line-height:57px;
}
.map-content p{
      color: #fff;
  font-size:16px;
  font-weight:400;
  line-height:24px;
}
@keyframes textReveal {
  from { opacity: 0; transform: translateY(50px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.map-section .btn-white{
    margin-right: auto;
    margin-left: auto;
}


/* animation */
.reveal-text .word {
  opacity: 0;
  display: inline-block;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.reveal-text .word.visible {
  opacity: 1;
  transform: translateY(0);
}




/* Remove floats; use Flexbox for container alignment */
.cta-section {
  width: 100%;
  padding: 50px 0 71px 0;
  background-color: #020D33;
  overflow: hidden; /* Important for the parallax effect */
}

.cta-box {
  width: 100%;
  /* Apply background to the box, not the section */
  background-image: url("../images/cta.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 78px 50px 79px 26px; /* Adjust padding for better spacing */
  min-height: 300px;
  border-radius: 14px;
}

.text-side {
  display: flex;
  flex-direction: column; /* Stack H2 and Button */
  gap: 20px;
  width: 100%;
}

.cta-box h2 {
  color: white;
  font-size: 40px;
  font-weight: 500;
  line-height: 49px;
  width: 40%;
  margin: 0;
}
.cta-btn{
     background: #474787; /* Slightly more transparent */
     backdrop-filter: blur(12px);          /* Stronger blur effect */
     -webkit-backdrop-filter: blur(12px);
     color: #fff;
     border: 1px solid rgba(255, 255, 255, 0.3);
     justify-content: center;
     border-radius: 8px;
     text-decoration: none;
     backdrop-filter: blur(10px);
     text-decoration: none;
     font-weight: 500;
     display: flex;
     font-size: 16px;
     align-items: center;
     font-family: "Inter", sans-serif !important;
     width: 152px;
     height: 49px;
     gap: 10px;
     position: relative;
     overflow: hidden;
     transition: color 0.3s ease; /* Smooth text color change */
     border: none;
     cursor: pointer;
     z-index: 1; /* Keeps text above the slide */
}




/* Glass Background Layer */
.cta-btn::after {
    content: '';
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: 0.5s ease;
    z-index: -1; /* Ensures text stays in front of this layer */
}

/* Hover Effect */
.cta-btn:hover::after {
    bottom: 0;
}

.cta-btn:hover {
    background-color: transparent;
    color: #fff; /* Optional: text changes to white to contrast with the glass */
}
.footer {
  background-color: #020D33;
  float: left;
  width: 100%;
  padding: 45px 0px 0px 0px;
  border-top: 1px solid #4646469e;
}

/* Top Section */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
}

.footer-heading h2 {
  color: #fff;
  font-size: 40px;
  margin: 0;
  line-height: 54px;
  font-weight: 500;
  text-transform: uppercase;
}

.footer .btn-outline{
    width: 189px !important;
    margin-bottom: 10px;
}
hr {
  border: none;
  border-top: 1px solid #4646469e;
  margin: 38px 0;
  opacity: 1;
}

/* Grid */
.footer-grid {
  /* display: flex; */
  /* grid-template-columns: repeat(3, 1fr); */
  /* gap: 38px; */
  margin-top: 38px;
  float: left;
  width: 100%;
  justify-content: space-between;
}

.footer-col h4 {
  color: #fff;
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 500;
}

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

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul li a {
  text-decoration: none;
  color: #9A9EAD;
  font-size: 16px;
  font-weight: 400;
  transition: 0.3s;
  line-height: 140%;
  font-family: 'Inter' !important;
}


 .footer-col p a {
  text-decoration: none;
  color: #9A9EAD;
  font-size: 16px;
  font-weight: 400;
  transition: 0.3s;
  line-height: 140%;
  font-family: 'Inter' !important;
}
.footer-col ul li , .footer-col p a {
  padding-left: 0;
  border-left: 0px solid #fff;
  transition: all 0.3s ease;
}

.footer-col ul li:hover{
  color: #fff;
  padding-left: 10px; /* Slides the text to the right */
  border-left: 3px solid #fff; /* Creates a clean vertical tab effect */
}
.footer-col p a:hover {
  color: #fff;
}
.footer-col p {
  margin: 12px 0;
  color: #9A9EAD;
  font-size: 16px;
  font-weight: 400;
  transition: 0.3s;
  line-height: 140%;
}

/* Hide heading for alignment */
.invisible {
  visibility: hidden;
}

/* Bottom */
.footer-bottom {
  margin-top: 63px;
  /* border-top: 1px solid #1e2a4a; */
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  float: left;
  flex-wrap: wrap;
  width: 100%;
}

.socials {
  display: flex;
  /* flex-direction: column; */ /* Stacks them vertically */
  width: 71%;
}

.social-link {
  text-decoration: none; /* Removes underline */
  color: #9A9EAD;
  border-top: 1px solid #4646469e;
  padding: 30px 0px;
  transition: all 0.3s ease;
  display: block;
  width: 50%;
}

/* Hover Effect: Text turns white and slides slightly to the right */
.social-link:hover {
  color: #ffffff;
  padding-left: 15px; 
}

.social-link span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
}

.social-link img {
  width: 20px;
  transition: transform 0.3s ease;
}

/* Optional: Icon pulses on hover */
.social-link:hover img {
  transform: scale(1.2);
}

.scroll-top {
 
  cursor: pointer;
}
.scroll-top img{
    width: 62px;
  animation: zoomInOut 4s ease-in-out infinite;

}
@keyframes zoomInOut {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1); /* zoom in */
  }
  100% {
    transform: scale(1); /* zoom out */
  }
}
.copyright{
     color: #696f89;
     font-size: 16px;
     font-weight: 500;
     font-family: 'inter' !important;
     padding-top: 49px;
     padding-bottom: 23px;
}
/* Responsive */
@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .footer-top {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
}
.service-col{
   float: left;
   width: 50%;

}

.f-col-1{
    float: left;
    width: 22%;
}


.f-col-2{
    float: left;
    width: 59%;
}

.f-col-3{
    float: left;
    width: 19%;
}
.socials {
    float: left;
    width: 71%;
    display: flex;
    justify-content: space-between;
    gap: 52px;
}

.side{
    width: 27px !important;
    margin: -1px 0 0 !important;
}

/* BOOK OPEN STATE */


#sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 35%; /* 50% width as requested */
    height: 100%; /* Full screen height */
    z-index: 1000;
    color: #d9d9d9;
    border-top-left-radius: 20px;
    transform: translateX(100%) translateZ(-500px);
    background-color: #020D33;
    backdrop-filter: blur(60px);
    /* BOOK CLOSED STATE */
    transform-origin: right center;
    transform: perspective(1400px) rotateY(-90deg);
    opacity: 0;
    transition:
        transform 1.2s cubic-bezier(0.23, 1, 0.32, 1),
        opacity 0.6s ease,
        visibility 0s 1.2s;
    visibility: hidden;
    padding: 0px 20px 0px 40px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    /* background: #B90723; */
    /* background: linear-gradient(1deg,rgba(185, 7, 35, 1) 0%, rgba(120, 11, 14, 1) 100%); */
    overflow-y: auto;

    /* smooth scrolling */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}




.subscribe-form input::placeholder {
  color: #ffffff;
  opacity: 1; /* important for Firefox */
}

/* For older browser support */
.subscribe-form input::-webkit-input-placeholder {
  color: #ffffff;
}
.subscribe-form input:-ms-input-placeholder {
  color: #ffffff;
}
.subscribe-form input::-ms-input-placeholder {
  color: #ffffff;
}
/* BOOK OPEN STATE */
.sidebar-open #sidebar {
    transform: perspective(1400px) rotateY(0deg);
    opacity: 1;
    visibility: visible;
    transition:
        transform 1.2s cubic-bezier(0.23, 1, 0.32, 1),
        opacity 0.6s ease;
}


body.sidebar-open {
    overflow: hidden;
    height: 100vh;
}



.close-sidebtn {
    color: #ffffff;
    font-size: 48px;
    text-decoration: none;
    line-height: 0.5;
    transition: color 0.3s;
    margin-top: 0px;
    float: left;
    text-align: left;
    position: absolute;
    top: -42px;
    font-weight: 200;
}
.sd-logo img{
    filter: brightness(100);
    width: 260px;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 10px;
    position: relative;
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.quick-enquiry {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-title {
    font-size: 17px;
    font-weight: 400;
    font-family: 'inter' !important;
    color: #d9d9d9;
    text-decoration: none;
}
.sidebar-title:hover{
        color: #969595;

}
.quick-enquiry h2{
    font-size: 28px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.social-links-side{
  float:left;
  width:100%;
  margin-top: 27px;
}

.social-links-side h4{
  float: left;
    width: 100%;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 23px;
    font-family: "Mona Sans", sans-serif !important;
    color: white;
}

.side-scl{
    border-right: solid 1px rgb(255 255 255 / 45%);
    padding-right: 15px;
    padding-left: 15px;
    float: left;
    color: #d9d9d9;
    font-size: 14px;
    font-family: inter, sans-serif !important;
    text-transform: uppercase;
    font-weight: 500;
}

.side-scl:hover{
    color: #f7d6d6;
     text-decoration: none;
    transition: all ease-in-out .5s;
    -webkit-transition: all ease-in-out .5s;
-o-transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
}








/*about us page */

/*innerpagges*/

.abt-banner1 {
  position: relative;
  padding: 121px 0px 116px 0px;
  float: left;
  width: 100%;
  object-fit: cover;
  background-repeat: no-repeat;
  background-attachment: fixed !important;
  background-size: cover;
  background-color: #020d33;
  background-position: bottom;
  z-index: 1;
  color: #fff;
  background-image: url("../images/head2.webp");
}

/* Black overlay */
.abt-banner1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(2 13 51 / 56%); /* Adjust opacity (0.6 = 60% black) */
  z-index: -1; /* Keeps it behind the text */
}

/* Ensure text stays above overlay */
.abt-banner1 .container {
  position: relative;
  z-index: 2;
}

.abt-banner1 h1{
       text-transform: uppercase;
       text-align: left;
       float: left;
       width: 100%;
       color: #fff;
       font-size: 45px;
       line-height: 51px;
       position: relative;
       font-weight: 500;
       /* letter-spacing: -2px; */
   }

.abt-banner1 h1 span{width: 100%;float: left;font-size: 17px;color: #f5f5f5;font-weight: 300;letter-spacing: 0;font-family: 'Syne',sans-serif;text-transform: capitalize;}

.abt-wrapper {
    /* position: absolute; */
    float: left;
    width: 100%;
}
.about {
    padding-bottom: 90px;
}
.section-padding2 {
    padding: 100px 0px;
    position: relative;
    float: left;
    width: 100%;
      background-color: #020D33;

}
.section-title3 {
   font-size: 40px;
   font-weight: 500;
   margin-bottom: 20px;
   line-height: 57px;
   color: #fff;
   text-transform: uppercase;
}


.sec-p {
    font-size: 16px;
    font-weight: 400;
    line-height: 181%;
    color: #fafafacf;
    margin-bottom: 20px;
}

.about .about-img {
    position: relative;
    float: left;
}
.about .about-img .img {
    padding: 0 15px 30px 30px;
    position: relative;
}.about-img .img img {
    border-radius: 20px;
    z-index: 2;
    width: 507px;
    background: #272727;
    object-fit: cover;
    margin-right: 38px;
    margin-bottom: 40px;
}



.about-facility-list{
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    float: left;
    width: 100%;
}

.about-facility-item{
    width: calc(33.33% - 20px);
    display: flex;
    margin-top: 33px;
}

.about-facility-item .icon-box-inner{
    position: relative;
    height: 60px;
    width: 60px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
}

.about-facility-item .icon-box-inner:before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.about-facility-item:hover .icon-box-inner {
  background-color: #b7b7b7;
}

.about-facility-item .icon-box-inner img{
    max-width: 34px;
    z-index: 1;
    transition: all 0.4s ease-in-out;
}

.about-facility-item:hover .icon-box-inner img{
    filter: invert(1);
}

.about-facility-content{
    width: calc(100% - 80px);
}

.about-facility-content h3{
    font-size: 22px;
    text-transform: capitalize;
    margin-bottom: 10px;
    color: #fff;
    font-weight: 500;
}

.about-facility-content p{
    margin-bottom: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 180%;
    color: #ccc;
}
.about4 {
  width: 100%;
  float: left;
        background-color: #020D33;

 
}
.about4 .showcase-content{
    float: left;
    margin-bottom: 2px;
    background-color: #2D3655;
    width: 100%;
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.6s ease;
    padding: 60px 50px 60px 50px;
    border-radius: 30px;
    display: flex;
    align-items: center;
}

.badge-dot2 {
    color: #fff;
    font-size: 38px;
    display: flex;
    align-items: center;
    /* gap: 10px; */
    font-weight: 500;
    margin-bottom: 15px;
    float: left;
    /* font-style: italic; */
    width: 100%;
    text-transform: uppercase;
 }


.team-expertise {
  background-color: #020D33;
    overflow: hidden;
    float: left;
    width: 100%;
    padding: 40px 0px;
}

/* Typography & Badges */
.section-badge {
    color: #d4af37;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}

.section-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.2;
}

.section-title i {
    color: #555;
    font-weight: 400;
    font-style: italic;
}

.intro-text {
    font-size: 16px;
    FONT-WEIGHT: 400;
    line-height: 24px;
    color: #fafafadb;
    float: left;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 2px;
}
.sub-text2{
    color: #b7b7b7;
    line-height: 24px;
    font-size: 16px;
    margin: 0;
}
/* The Quote Box */
.quote-box {
    background: #2d3655;
    border-left: 4px solid #ffffff;
    padding: 25px;
    margin: 35px 0;
    border-radius: 0 8px 8px 0;
    float: left;
    width: 100%;
}

.quote-box p {
    margin-bottom: 0;
    font-style: italic;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
}

.summary-text {
    color: #fafafadb;
    line-height: 1.8;
    font-size: 16px;
    font-weight: 400;
}

/* Image Stack Layout */
.image-stack {
    position: relative;
    /* padding: 20px; */
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    float: right;
    justify-content: end;
}

.main-image {
    width: 82%;
    border-radius: 15px;
    float: right;
}

.overlay-image-wrapper {
    position: absolute;
    bottom: -100px;
    left: 22px;
    width: 43%;
    /* border: 8px solid #fff; */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 2;
}

.overlay-image {
    width: 100%;
    display: block;

}
.about-top {
    float: left;
    width: 100%;
    padding-top: 60px;
}



/*blog*/
.acg-card-link-wrapper {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease;
        margin-bottom: 20px;
}

.acg-card-container {
    width: 100%;
    background-color: #020d33;
    cursor: pointer;
    overflow: hidden; /* Important for the image zoom effect */
    border-radius: 10px; /* Applied to container instead of children for cleaner look */
}

.acg-card-media-box {
    position: relative;
    width: 100%;
    aspect-ratio: 390 / 283;
    overflow: hidden;
}
        .acg-card-main-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px 10px 0 0;
            transition: transform 0.5s ease; /* Smooth zoom transition */
        }

    
        .acg-card-text-content {
            float: left;
            border-radius: 0 0 10px 10px;
            width: 100%;
            -webkit-transition: all ease-in-out .5s;
            background-color: #2d3655;
            padding: 20px 20px;
transition: background-color 0.4s ease;
        }

        .acg-card-title-heading {
            color: #fafafa;
            font-size: 17px;
            margin: 0 0 14px 0;
            line-height: 33px;
            font-weight: 500;
            text-transform: uppercase;
            transition: color 0.4s ease;
        }

        .acg-card-post-timestamp {
            color: #fff;
            display: block;
            margin-bottom: 15px;
            font-size: 15px;
            font-weight: 400;
            font-family: 'Inter';
        }

        .acg-card-description-text {
            color: #b7b7b7;
            font-size: 16px;
            line-height: 24px;
            margin-bottom: 18px;
            transition: color 0.4s ease;
            font-weight: 400;
            font-family: 'Inter';
            margin-bottom: 25px;
        }

       .acg-card-link-wrapper:hover .acg-card-main-img {
    transform: scale(1.05);
}

.acg-card-link-wrapper:hover .acg-card-text-content {
    background-color: #3a456d; /* Slightly lighter shade */
}






.bauen-blog3 .item {
    margin-bottom: 30px;
}
.bauen-blog3 .post-img {
    position: relative;
    overflow: hidden;
/*    height: 454px;*/

  aspect-ratio: 390 / 283; /* SAME AS BLOG CARD */     border-radius: 20px;
}
.bauen-blog3 .post-img:hover img {
    -webkit-filter: none;
    filter: none;
    -webkit-transform: scale(1.09, 1.09);
    transform: scale(1.09, 1.09);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.bauen-blog3 .post-img a {
    display: block;
}
.bauen-blog3 .post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transition: all .5s;
    transition: all .5s;
}
.bauen-blog3 .post-cont {
    padding: 30px 0;
    float: left;
    width: 100%;
    color: #b79556;
}
.bauen-blog3 .post-cont .tag {
    display: block;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 2px;
    color: #fafafaa1;
    text-transform: uppercase;
    margin-bottom: 0;
    float: left;
}
 .blog-area-h1 {
            font-size: 40px;
            line-height: 57px;
            font-weight: 500;
            margin-bottom: 25px;
            color: #fafafa;
            float: left;
            width: 100%;
            text-transform: uppercase;
            margin-top: 31px;
        }

        .blog-area-h1 span {
            font-style: italic;
            color: #caa55f;
        }
.blog-date{
    display: flex;
    align-items: center;
    float: left;
    width: 100%;
    gap: 13px;
    margin-bottom: 26px;
}

.post-cont p{
      font-weight: 400;
      float: left;
      width: 100%;
      font-size: 16px;
      line-height: 27px;
      color: #b7b7b7;
      margin-bottom: 30px;
}

.bauen-blog3 .post-cont .date {
    margin-top: 0px;
    font-size: 12px;
    text-align: right;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0;
    float: left;
    font-weight: 400;
}
.bauen-blog3 .post-cont .date a {
    color: #b19777;
}
.bauen-blog3 .post-cont i {
    color: #777;
    margin-top: -3px;
    font-size: 12px;
    float: left;
}
/* blog sidebar */
.blog-sidebar .widget {
    background: #353D5C;
    padding: 30px;
    margin-bottom: 30px;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
}
.blog-sidebar .widget ul {
    margin-bottom: 0;
    padding: 0;
    float: left;
    width: 100%;
}
.blog-sidebar .widget ul li {
    margin-bottom: 15px;
    color: #999;
    font-size: 16px;
    line-height: 1.5em;
}
.blog-sidebar .widget ul li h4 {
    color: #fafafa;
    font-weight: 500;
    font-size: 14px;
    line-height: 26px;

    /* 2-line clamp */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-transform: uppercase;
}

.blog-sidebar .widget ul li a:hover {
        text-decoration: none !important;

    color: #fff;
}
.blog-sidebar .widget ul li:hover  h4{

    color: #fff;
}
.blog-sidebar .widget ul li:last-child {
    margin-bottom: 20px;
}

.blog-sidebar .widget .recent li {
    display: flex;
    overflow: hidden;
    gap: 20px;
    align-items: center;
}
.blog-sidebar .widget .recent .thum {
width: 110px; /* You can adjust this width, the height will follow the ratio */
    flex-shrink: 0;
  aspect-ratio: 390 / 283; /* SAME AS BLOG CARD */
          overflow: hidden;
    float: left;
    flex-shrink: 0;
    height: auto;
}

.blog-sidebar .widget .recent .thum img{


width: 100%;
    height: 100%; /* Force height to fill the aspect-ratio box */
    object-fit: cover;
border-radius: 10px;

object-fit: cover;
}
.blog-sidebar{
    height: 100%;
}

.blog-sidebar .widget .recent a {
    display: block;
            text-decoration: none !important;

}
.blog-sidebar .widget-title {
    margin-bottom: 20px;
    float: left;
    width: 100%;
}
.blog-sidebar .widget-title h6 {
    padding-bottom: 5px;
    border-bottom: 1px solid rgb(255 255 255 / 12%);
    font-size: 20px;
    line-height: 200%;
    margin-bottom: 15px;
    /* text-transform: uppercase; */
    color: #fff;
    cursor: pointer;
    font-weight: 500;
    float: left;
    position: relative;
    /* font-size: 16px; */
    text-align: left;
    /* text-transform: uppercase; */
    /* letter-spacing: 4px; */
    float: left;
    width: 100%;
    text-transform: uppercase;
    font-family: unbounded !important;
}
.blog-sidebar .widget ul li h5{
      color: #b7b7b7;
      font-weight: 400;
      font-size: 14px;
      line-height: 117%;
      /* font-style: italic; */
      text-decoration: underline;
      font-family: inter;
}
.blog-sidebar .widget .recent li:hover h5{
    color: #fff;
    text-decoration: none !important;
}










/* ===== BASE ===== */
.nova-contact {
 background: #020D33; 
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    color: #fff;
    float: left;
    width: 100%;
}


.nova-contact-box {
    display: flex;
    backdrop-filter: blur(24px);
    background: rgb(255 255 255 / 25%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

/* ===== LEFT SECTION ===== */
.nova-sec1 {
    width: 35%;
    padding: 40px;
    background: rgba(0, 0, 0, 0.35);
}

.nova-sec1 h2 {
    font-size: 24px;
    margin-bottom: 30px;
    /* font-family: 'GeneralSans-Medium'; */
    /* letter-spacing: -1px; */
    font-weight: 500;
    text-transform: uppercase;
    line-height: 36px;
}

.nova-sec1 a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #b7b7b7;
    text-decoration: none;
    margin-bottom: 29px;
    font-size: 17px;
    font-family: inter;
    font-weight: 400;
}

.nova-sec1 a img {
    width: 29px;
    filter: brightness(100);
}

.cont-flx{
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 29px;
}
.cont-flx  img {
    width: 29px;
    filter: brightness(100);
}
.cont-flx a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #b7b7b7;
    text-decoration: none;
    margin-bottom: 0;
    font-size: 17px;
    font-family: inter;
    font-weight: 400;
}

.nova-sec1 h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 400;
    line-height: 180%;
    color: #b7b7b7;
    /* font-family: 'GEneralSans-Regular'; */
}

.nova-sec1 h3 img {
    width: 29px;
    /* margin-top: 3px; */
    filter: brightness(100);
}

/* ===== RIGHT SECTION ===== */
.nova-sec2 {
    width: 65%;
    padding: 40px;
}

.contact-label2 {
    font-size: 15px;
    color: #fff;
    margin-bottom: 8px;
    text-transform: uppercase;
    /* font-family: ''; */
}

/* Inputs */
.mct_form2 {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding: 10px 5px;
    color: #fff;
    outline: none;
    font-size: 14px;
}

.mct_form2::placeholder {
    color: #aaa;
}

textarea.mct_form2 {
    resize: none;
}

/* Grid spacing */
.cnts-paddings {
    padding: 10px 15px;
}



/* Error text */
.error_msg {
    font-size: 12px;
    color: #ff7b7b;
    margin-top: 5px;
}



/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .nova-contact-box {
        flex-direction: column;
    }

    .nova-sec1,
    .nova-sec2 {
        width: 100%;
    }

}



.events-section-service{
    float: left;
    width: 100%;
 padding-left:  0 !important;
 display: block !important;
 text-align: center;
 padding-top: 40px !important;
 padding-bottom: 0 !important;
}
.events-section-service .card-event{
    margin-bottom: 30px;
}
.content-left-service {
    width: 100% !important;
}



/* Layout Containers */
.service-sec {
        background: #020d33;

    /* padding: 30px 0; */ /* Top/bottom padding for the whole section */
    float: left;
    width: 100%;
}

.main-content-layout {
    display: flex;
    gap: 30px; /* Space between content and sidebar */
}

.content-column {
    flex: 2.5; /* Takes up more space */
    min-width: 0; /* Important for flex items with content like images */
    padding: 60px 0px;
}

.sidebar-column {
    flex: 1.2; /* Takes up less space */
    min-width: 280px; /* Minimum width for the sidebar */
    backdrop-filter: blur(24px);
   
    padding: 60px 20px;
}

/* Typography and Headings */
h2.widget-title {
    font-size: 30px;
    margin-bottom: 15px;
    color: #333;
}

h3.widget-title {
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    font-family: unbounded !important;
    t;
    width: 100%;
    margin: 0;
    text-align: center;
}
.service-list a{color: #000;text-decoration: none;line-height: 28px;}
.service-list{
    padding: 8px 10px;
    background-color: #fff;
    border-radius: 11px;
    float: left;
    width: 100%;
}
.service-list:hover{
 background: rgba(255, 255, 255, 0.1);
  
    text-decoration: none;
    backdrop-filter: blur(10px);
}
.service-list:hover a{
    color:#FEF8FF ;
        padding-left: 10px;


}
a:hover{
    cursor: pointer;
}
.active-service{


        background: rgba(255, 255, 255, 0.1);
  
    text-decoration: none;
    backdrop-filter: blur(10px);
}
.active-service a{
        color: #fff!important;
        padding-left: 10px !important;
        font-family: inter;
}
/* Sections */
.section {
    margin-bottom: 10px;
}

.hero-image img {
    width: 100%;
    height: 432px;
    display: block;
    margin-bottom: 40px;
    object-fit: cover;
    border-radius: 20px;
}

.heading-lora {
    font-weight: 500;
    float: left;
    width: 100%;
    color: #fff;
    line-height: 57px;
    font-size: 38px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.para-lora {
    font-family:'inter',sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 200%;
    color: #b7b7b7;
    margin-bottom: 23px;
}

/* Sidebar Widgets */
.widget {
  border: 1px solid #f0f0f03d;
  margin-bottom: 28px;
  background: #b7b7b740;
  padding: 10px 10px;
  border-radius: 20px;
  float: left;
  width: 100%;
  /* margin-bottom: 0; */
}

/* Contact Form Styling */
.contact-form {
    position: relative;
    padding: 20px 0px;
    float: left;
    width: 100%;
    /* border: 1px solid #efefef; */
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px !important;
    border: none;
    font-family: 'inter', sans-serif;
    font-size: 16px;
    border-radius: 10px;
    line-height: 1.5;
    color: #000;
    font-weight: 400;
}

.contact-form textarea {
    resize: vertical;
    min-height: 100px;
    margin-top: 15px;
}


/* Contact Details Styling */
.contact-details-widget {
    /* padding-bottom: 20px; */
    float: left;
    width: 100%;
   
}

.contact-details-widget ul {
    list-style: none;
    padding: 20px 0px;
    float: left;
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}

.contact-details-widget li {
    line-height: 200%; /* Adjust line height for list to look tighter */
    cursor: pointer;
    display: flex;
    align-items: center;
    float: left;
    width: 100%;
    gap: 2px;
    text-align: left;
    font-family: inter;
}

.contact-details-widget li i {
    color: #7b8e5c; /* Accent color */
    margin-right: 15px;
    font-size: 18px;
    width: 20px; /* Fixed width for consistent alignment */
    text-align: center;
    float: left;
    width: 100%;
}
.widget .btn-outline{
    margin: auto;
    width: 100%;
}



.contact2-widget {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  padding: 29px 20px;
  color: #333333;
  /* font-family: 'Lora', sans-serif; */
  float: left;
  width: 100%;
  background-image: url("../images/inner-2.webp");
  background-size: cover;
  position: relative;
  background-attachment: fixed;
}
.cw-overlay {
  position: absolute;
  inset: 0;
    background: rgb(2 13 51 / 33%);  z-index: 1;
  border-radius: 12px;
  /* padding: 0px 40px; */
}

/* Left section (icon + title) */
.cw-title {
  font-weight: 500;
  font-size: 33px;
  color: #fff;
  float: left;
  width: 100%;
  text-align: left;
}
.cw-inner {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-direction: column;
  position: relative;
  z-index: 2;
  padding: 0px 29px;
}

/* Right section (contact info + button) */
.cw-contacts {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  float: left;
  width: 100%;
  align-items: baseline;
}

.cw-contact {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-size: 14px;
  justify-content: center;
}
.nova-sec1 a:hover{
    color: #fff;
}

.cw-link {
  float: none;
  color: #fff;
  font-weight: 400;
  transition: color 0.3s ease;
  font-size: 20px;
  text-align: center;
  font-family: 'Inter';
}
.cw-icon-box {
    display: flex;
    flex-direction: column;
    min-width: 100%;
    text-align: center;
    gap: 18px;
}
.cw-link:hover {
  color: #0b76ff;
}

.cw-email{
    margin-bottom: 10px;
}
.call-btn{
    filter: brightness(100);
    width: 20px;
}


@media( max-width:990px)
{
    .cont-flx {
    flex-direction: column;
    justify-content: center;
}

.sticky ul {
     padding-top: 0; 
}
}

/* Ensure the transition is defined on the base class */
.page-header {
    transition: background 0.3s ease, padding 0.3s ease;
    width: 100%;
    z-index: 999;
}

/* Sticky State */
.page-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 5px 0; /* Make it slightly slimmer when scrolling */
    animation: slideInDown 0.4s ease; /* Smooth slide-in effect */
}

/* Animation for the smooth drop-down */
@keyframes slideInDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Smoothly resize logo when sticky */
.is-sticky .logo img {
    max-width: 180px;
    transition: max-width 0.3s ease;
}
 .map-wrapper {
    position: relative;
}
.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 98%;
background-color: rgb(2 13 51 / 15%);    
    mix-blend-mode: multiply; 
    
    pointer-events: none; 
    
    z-index: 1;
    border-radius: 20px;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex; /* Keep this as flex */
    justify-content: center;
    align-items: center;
    z-index: 2000;
    
    /* This controls the "Not Working" part */
    visibility: hidden; 
    opacity: 0;
    
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
    box-sizing: border-box;
}

.modal-overlay.is-visible {
    visibility: visible;
    opacity: 1;
}
.modal-content {
    background: #020d33;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Existing Styles */
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    width: 95%;
    max-width: 800px;
    position: relative;
    overflow: hidden;
    color: #000; /* Ensures text remains readable */
}

.join-form input {
    /* background: rgba(255, 255, 255, 0.5) !important; */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.close-button {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    transition: color 0.2s;
}

.close-button:hover {
    color: #333;
    /* transform: rotate(90deg); */
}

.modal-header-form {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #7e7e7e;
}

.modal-header-form h2 {
   font-size: 34px; /* Adjust font size as needed */
   font-weight: 500;
   line-height: 125%;
   margin-bottom: 16px;
   color: #fff; /* Dark text color */
   letter-spacing: -2px;
   text-transform: uppercase;
}

.modal-header-form p {
    color: #b7b7b7;
    font-size: 16px;
    /* font-family: 'GeneralSans-Regular'; */
    font-weight: 400;
}

.join-form {
    display: flex;
    flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
    gap: 20px; /* Spacing between columns and rows */
}

.join-form .form-group {
    flex: 1 1 calc(50% - 10px); /* Two columns: 50% width minus half the gap */
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .join-form .form-group {
        flex: 1 1 100%; /* Stack columns on very small screens */
    }
    .modal-content {
        padding: 5px;
    }
}

.join-form label {
    display: block;
    font-weight: 400;
    color: #fff;
    margin-bottom: 8px;
    font-size: 16px;
    font-family: 'inter' !important;
    /* letter-spacing: -0.5px; */
}

.join-form label i {
    margin-right: 8px;
    color: #ffffff; /* Accent color for icons */
}
/* Add 'select' to this group so it looks like the inputs and takes full width of the 50% column */
.join-form input[type="text"],
.join-form input[type="email"],
.join-form input[type="tel"],
.join-form select {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 11px;
    font-size: 14px;
    box-sizing: border-box;
    font-family: 'inter' !important;
    font-weight: 400;
    color: #000;
    background-color: #fff; /* Ensures the select is white like the inputs */
}

.form-button-wrapper {
    flex: 1 1 100%; 
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.join-form input:focus {
    box-shadow: 0 0 8px rgb(0 128 0 / 10%);
    background-color: #fff;
    outline: none;
}

.clients-grid h5 {
    float: left;
    width: 100%;
    color: #fff;
    margin: 20px 0;
    text-align: center;
}