a.social-icon-i img {
width: 29px;
height: 29px;
}
body{
font-family: 'Source Sans 3', sans-serif !important;
}

/* Base font for body and general text */
body, p, span, a, div, button, input, textarea, label {
font-family: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Antonio font for headings - more specific */
h1, h2, h3 {
font-family: 'Antonio', 'Source Sans 3', sans-serif !important;
font-weight: 700 !important;
}

/* Antonio font for specific elements */
.hero-title, .banner-title, .experience-heading, .projects-title {
font-family: 'Antonio', 'Source Sans 3', sans-serif !important;
font-weight: 700 !important;
}

h4, h5, h6 {
font-weight: 600 !important;
}

p, span, a {
font-weight: 400 !important;
}

.nav-link, .contact-btn {
font-weight: 500 !important;
}

/* Font test class */
.font-test {
font-family: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
font-weight: 400 !important;
}

/* Antonio font test class */
.antonio-test {
font-family: 'Antonio', sans-serif !important;
font-weight: 700 !important;
font-size: 24px !important;
}

/* Override Bootstrap font classes */
.btn, .btn-primary, .btn-secondary, .btn-success,
.form-control, .form-group, .navbar, .nav-item,
.container, .row, .col, .col-md, .col-lg {
font-family: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
 /* Mobile Menu Styles */
 .mobile-menu-toggle {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   padding: 10px;
   z-index: 1000;
}

.mobile-menu-toggle span {
   display: block;
   width: 25px;
   height: 3px;
   background-color: #fff;
   margin: 5px 0;
   transition: 0.3s;
   border-radius: 2px;
}

.mobile-menu-overlay {
   position: fixed;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100vh;
   background: rgb(25 18 3);
   z-index: 9999;
   transition: left 0.3s ease-in-out;
   overflow-y: auto;
}

.mobile-menu-overlay.active {
   left: 0;
}


.experience-years {
color: #9d652a;
font-size: 45px;
font-weight: bold !important;
line-height: 1.1;
font-family: 'Antonio', sans-serif !important;
}

.experience-text {
   color: #000;
   font-size: 1.1rem;
   line-height: 1.7;
   margin-bottom: 35px;
}



.read-more-btn {
background: #f5f4f0;
color: #9D652A;
border: 1px solid #9D652A;
border-radius: 40px;
padding: 12px 50px;
font-weight: 600 !important;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
font-size: 1rem;
/* font-family: 'Antonio', 'Source Sans 3', sans-serif !important; */
font-family: 'Source Sans 3', sans-serif !important;
}


.read-more-btn:hover {
   background: #d4a574;
   color: white;
   text-decoration: none;
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(212, 165, 116, 0.3);
}

/* Hero Section Styles */
.hero-section {
   background: url('../images/clinet/sliderbg.png') no-repeat center center;
   background-size: cover;
   background-position: center 20%;
   color: white;
   position: relative;
}

/* Client Bar */
.client-bar {
   /* background: rgba(0, 0, 0, 0.9); */
   padding: 35px 0;
   border-bottom: 3px dotted #404040;
   position: relative;
   z-index: 5;
   background: #000;
}

.client-count .count-number {
   font-size: 3.5rem;
   font-weight: 800;
   color: #9D652A;
   margin: 0;
   line-height: 1;
   letter-spacing: -1px;
}

/* .client-count .count-text {
   color: #ffffff;
   margin: 5px 0 0 0;
   font-size: 20px;
   font-weight: 400;
   letter-spacing: 0.3px;
} */

.certification-icons {
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-wrap: wrap;
   gap: 15px;
}

.icon-item {
   text-align: center;
   margin: 0;
   min-width: 70px;
}

.cert-icon {
   width: 90px;
   height: 90px;
   margin-bottom: 8px;
   filter: brightness(0) invert(1);
   display: block;
   object-fit: contain;
}

.icon-item span {
   display: block;
   color: #ffffff;
   font-size: 0.8rem;
   font-weight: 500;
   letter-spacing: 0.2px;
   line-height: 1.2;
}

/* Hero Main Area */
.hero-main {
   position: relative;
   min-height: 800px;
   display: flex;
   flex-direction: column;
}

.hero-background {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1;
}

.hero-overlay {
   position: relative;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 450px;
   padding: 80px 0;
   flex: 1;
}

.hero-content {

   text-align: left;
   max-width: 100%;
   /* padding: 50px 40px; */
   /* background: rgba(0, 0, 0, 0.4); */
   border-radius: 8px;
   /* margin: 0 20px; */
   /* backdrop-filter: blur(10px); */
}

.hero-title {
   font-size: 51px;
   font-weight: 700;
   line-height: 60px;
   margin: 0;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
   letter-spacing: 0.5px;
}

/* Feature Boxes Overlay */
.feature-boxes-overlay {
   position: relative;
   z-index: 3;
   padding: 30px 0 0px 0;
   border-radius: 0px !important;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
   margin-top: auto;
   overflow: hidden;
}

/* Swiper Styling */


.swiper-slide {
   height: auto;
}

.swiper-button-next,
.swiper-button-prev {
   width: 50px;
   height: 50px;
   background: rgba(0, 0, 0, 0.7);
   border-radius: 50%;
   color: #fff;
   opacity: 0.8;
   top: 50%;
   transform: translateY(-50%);
}

.swiper-button-next {
   right: -25px;
}

.swiper-button-prev {
   left: -25px;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
   opacity: 1;
   background: rgba(0, 0, 0, 0.9);
}

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

.swiper-pagination-bullet {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.5);
   border: none;
   margin: 0 5px;
}

.swiper-pagination-bullet-active {
   background-color: #d4a574;
}

.feature-box {
   background: #4a371566;
   border-radius: 40px;
   width: 100%;
   height: 220px;
   padding: 25px 20px;
   margin: 0px 0px;
   text-align: left;
   margin-bottom: 20px;
   border: 1px solid #ffffff2e;
   /* transition: transform 0.3s ease, box-shadow 0.3s ease; */
   /* border: 1px solid rgba(255, 255, 255, 0.2); */
   /* backdrop-filter: blur(20px); */
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.feature-icon {
   margin-bottom: 15px;
   text-align: left;
}

.feature-img {
   width: 50px;
   height: 50px;
   filter: brightness(0) invert(1);
   display: block;
   margin-bottom: 10px;
}

.feature-title {
   color: #ffffff;
   font-size: 1.2rem;
   font-weight: 600 !important;
   margin-bottom: 12px;
   letter-spacing: 0.3px;
   line-height: 1.3;
}

.feature-description {
   color: #ffffff;
   font-size: 0.9rem;
   line-height: 1.5;
   margin: 0;
   opacity: 0.9;
   letter-spacing: 0.2px;
}

/* Projects Section Styles */
/* .projects-section {
   background: #e4dfd4;
   padding: 80px 0;
   color: white;
   overflow: hidden;
} */

.projects-title-box {
   /* background: #f5f5dc; */
   /* padding: 30px 20px; */
   /* border-radius: 10px; */
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   align-items: flex-end;
   /* box-shadow: 0 8px 25px rgba(0,0,0,0.1); */
}

.projects-title-box p {
   color: #000;
   font-size: 1rem;
   font-weight: 700;
   margin: 0;
   text-align: center;
   letter-spacing: 1px;
   writing-mode: vertical-rl;
   text-orientation: mixed;
   transform: rotate(180deg);
}

.projects-title {
   color: #9D652A;
   font-size: 50px;
   font-weight: bold !important;
   margin: 0;
   text-align: center;
   letter-spacing: 1px;
   writing-mode: vertical-rl;
   text-orientation: mixed;
   transform: rotate(180deg);
}
.projects-title-box p {
font-size: 30px;
font-weight: 600 !important;
color: #3D3B3B;
margin-right: -12px;
}

.project-box {
   background: transparent;
   border-radius: 30px;
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   height: 100%;
   margin-right: 0px;
   border: none;
}

.project-box img {
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
}

.project-box:hover {
   transform: translateY(-5px);
   cursor: pointer;
}

.project-box:hover ~ .project-box {
   /* CSS rules removed - JavaScript will handle hover effects */
}

.project-box:hover ~ .project-box:first-child,
.project-box:hover ~ .project-box:nth-child(2) {
   /* CSS rules removed - JavaScript will handle hover effects */
}

.project-image {
   /* width: 394px;
   height: 406px; */
   min-height: 406px;
   overflow: hidden;
   position: relative;
   border-radius: 15px;
   border: none;
}

.project-image img {
   /* width: 394px;
   height: 406px; */
   max-height: 406px;
   object-fit: cover;
   transition: transform 0.3s ease;
}

.project-box:hover .project-image img {
   transform: scale(1.05);
}

.project-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   /* background: rgba(0, 0, 0, 0.8); */
   padding: 15px;
   opacity: 1;
   transition: opacity 0.3s ease;
   z-index: 1;
}
.project-overlay:hover {
   bottom: 0% !important;
}


.project-overlay .project-title {
   color: #ffffff;
   font-size: 30px;
   font-weight: 700;
   margin: 0;
   line-height: 1.3;
   letter-spacing: 0.5px;
   text-align: left;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
   transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Projects Swiper Styling */
.projects-swiper {
   /* padding: 20px 0; */
   overflow: hidden;
}

.projects-swiper .swiper-slide {
   height: auto;
   transition: transform 0.3s ease;
}

.projects-swiper .swiper-slide-active {
   transform: scale(1.02);
}

.projects-container {
   padding-right: 0;
   overflow: hidden;
}

.swiper-wrapper {
   transition-timing-function: ease-in-out;
}

/* Header Section Styles */
.header-section {
   /* background: rgba(0, 0, 0, 0.9); */
   padding: 5px 0;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   /* backdrop-filter: blur(10px); */
   transition: all 0.3s ease;
}

/* Header scroll effect */
.header-section.scrolled {
   /* background: rgba(0, 0, 0, 0.8); */
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.header-logo {
   display: flex;
   align-items: center;
}

.header-logo .logo-container {
   display: flex;
   align-items: center;
   margin-right: 15px;
}

.header-logo .estd-text,
.header-logo .year-text {
   writing-mode: vertical-rl;
   text-orientation: mixed;
   font-size: 0.7rem;
   font-weight: 600;
   color: #d4a574;
   margin: 0 3px;
}

.header-logo .building-icon {
   font-size: 1.8rem;
   color: #d4a574;
   margin: 0 8px;
}

.header-logo .company-name h3 {
   color: white;
   font-size: 1.2rem;
   font-weight: 700;
   margin: 0 0 2px 0;
   letter-spacing: 0.5px;
}

.header-logo .company-name p {
   color: #d4a574;
   font-size: 0.7rem;
   font-weight: 600;
   margin: 0;
   letter-spacing: 0.3px;
}

.header-navigation {
   display: flex;
   justify-content: center;
   gap: 25px;
}

.header-navigation .nav-link {
   color: white;
   text-decoration: none;
   font-size: 1rem;
   font-weight: 400 !important;
   transition: color 0.3s ease;
   letter-spacing: 0.3px;
}

.header-navigation .nav-link:hover {
   color: #d4a574;
   text-decoration: none;
}

.header-contact {
   display: flex;
   justify-content: flex-end;
}

.contact-btn {
   display: inline-block;
   padding: 10px 30px;
   background: #473018;
   color: white;
   border: none;
   border-radius: 25px;
   text-decoration: none;
   font-weight: 600;
   font-size: 1rem;
   transition: all 0.3s ease;
   letter-spacing: 0.3px;
   text-transform:math-auto;
}

.contact-btn:hover {
   background: #A0522D;
   color: white;
   text-decoration: none;
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(139, 69, 19, 0.4);
}

/* Banner Section with Dynamic Background */
.banner-section {
   position: relative;
   height: 100vh;
   min-height: 600px;
   overflow: hidden;
}

.banner-background {
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-image: url('../images/project/p1.png');
   transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   animation: bannerImageAnimation 1.5s ease-out;
}

@keyframes bannerImageAnimation {
   0% {
       opacity: 0;
       transform: scale(1.2) rotate(2deg);
       filter: blur(5px);
   }
   50% {
       opacity: 0.5;
       transform: scale(1.05) rotate(1deg);
       filter: blur(2px);
   }
   100% {
       opacity: 1;
       transform: scale(1) rotate(0deg);
       filter: blur(0px);
   }
}

.banner-background::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   /* background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%); */
   z-index: 1;
}

p#banner-description {
/* font-weight: 300 !important; */
padding: 0px 90px 0px 0px;
}

h1#banner-title{
padding: 0px 0px 0px 0px;
}
.banner-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   /* background: rgb(0 0 0 / 71%); */
   background-image: linear-gradient(rgba(0, 0, 0, 0.692), rgba(0, 0, 0, 0.411), rgba(0, 0, 0, 0.692));
   /* backdrop-filter: blur(2px); */
   display: flex;
   align-items: center;
   justify-content: center;
   animation: fadeIn 1s ease-out;
   z-index: 2;
}

@keyframes fadeIn {
   from {
       opacity: 0;
   }

   to {
       opacity: 1;
   }
}

.banner-overlay .container-fluid {
   position: relative;
   z-index: 3;
}

/* Left Side - Text Content with Animations */
.banner-content-left {
   padding: 2rem 1rem;
   color: white;
   text-align: left;
   animation: slideInLeft 1s ease-out 0.3s both;
}

@keyframes slideInLeft {
   from {
       opacity: 0;
       transform: translateX(-50px);
   }

   to {
       opacity: 1;
       transform: translateX(0);
   }
}

.banner-subtitle {
   font-size: 1.125rem;
   font-weight: 600;
   margin-bottom: 1rem;
   color: #ffffff;
   letter-spacing: 0.05em;
   opacity: 0.9;
   animation: fadeInUp 0.8s ease-out 0.5s both;
   font-weight: bold !important;
}

@keyframes fadeInUp {
   from {
       opacity: 0;
       transform: translateY(30px);
   }

   to {
       opacity: 1;
       transform: translateY(0);
   }
}

.banner-title {
   font-size: clamp(2rem, 5vw, 3.5rem);
   font-weight: 800;
   line-height: 1.1;
   margin-bottom: 1.5rem;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
   letter-spacing: 0.05em;
   animation: fadeInUp 0.8s ease-out 0.7s both;
   letter-spacing: -1px;
}

.banner-description {
   font-size: 1.125rem;
   line-height: 1.6;
   margin-bottom: 2rem;
   opacity: 0.9;
   max-width: 32rem;
   animation: fadeInUp 0.8s ease-out 0.9s both;
}
a.banner-btn {
display: flex;
justify-content: center;
max-width: 190px;
letter-spacing: 0px;
font-weight: 500 !important;
}

h1#banner-title{
   font-weight: bold !important;
   font-size: 60px;
   width: 100%;
}

.banner-btn {
   display: inline-block;
   padding: .5rem 0rem;
   /* min-width: 240px; */
   background: transparent;
   color: white;
   border: 2px solid white;
   border-radius: 2rem;
   text-decoration: none;
   font-weight: 600;
   font-size: 1.3rem;
   transition: all 0.3s ease;
   letter-spacing: 0.05em;
   animation: fadeInUp 0.8s ease-out 1.1s both;
   position: relative;
   overflow: hidden;
}

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

.banner-btn:hover::before {
   left: 100%;
}

.banner-btn:hover {
   background: white;
   color: #1a1a1a;
   text-decoration: none;
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
}

/* Dynamic Active Content Display */
.active-content-display {
   margin-top: 2rem;
   animation: fadeInUp 0.8s ease-out 1.3s both;
}

.active-image-container {
   position: relative;
   border-radius: 1rem;
   overflow: hidden;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   cursor: pointer;
}

.active-image-container:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.active-banner-image {
   width: 100%;
   height: 12rem;
   object-fit: cover;
   border-radius: 1rem;
   transition: transform 0.4s ease;
}

.active-image-container:hover .active-banner-image {
   transform: scale(1.05);
}

.active-image-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
   padding: 1.5rem 1rem 1rem;
   color: white;
   transform: translateY(0);
   transition: transform 0.4s ease;
}

.active-image-container:hover .active-image-overlay {
   transform: translateY(0);
}

.active-project-title {
   font-size: 1.125rem;
   font-weight: 700;
   margin: 0 0 0.5rem 0;
   text-align: center;
   letter-spacing: 0.05em;
}

.active-project-desc {
   font-size: 0.875rem;
   margin: 0;
   text-align: center;
   opacity: 0.9;
   line-height: 1.4;
}

/* Right Side - Image Carousel with Animations */
.banner-carousel-container {
   position: relative;
   padding: 0rem 0rem;
   animation: slideInRight 1s ease-out 0.5s both;
}

@keyframes slideInRight {
   from {
       opacity: 0;
       transform: translateX(50px);
   }

   to {
       opacity: 1;
       transform: translateX(0);
   }
}

/* Ensure exactly 3 slides are visible */
.banner-carousel-swiper {
   width: 100%;
   height: auto;
   padding: 1rem 0;
   overflow: hidden;
}

.banner-carousel-swiper .swiper-wrapper {
   display: flex;
   align-items: center;
}

.banner-carousel-swiper .swiper-slide {
   flex-shrink: 0;
   width: calc((100% - 40px) / 3) !important;
   max-width: calc((100% - 40px) / 3) !important;
}

/* Show all 3 visible slides with full opacity */
.banner-carousel-swiper .swiper-slide {
   opacity: 1 !important;
   transform: scale(1) !important;
}

/* Remove the rule that hides slides - this was causing mobile issues */
/* .banner-carousel-swiper .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-next):not(.swiper-slide-prev):not(.swiper-slide-duplicate) {
   opacity: 0.3;
   transform: scale(0.9);
} */

.carousel-card {
   position: relative;
   border-radius: 1rem;
   overflow: hidden;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   cursor: pointer;
   border: 2px solid transparent;
   transform: scale(1);
   height: calc(18rem + 50px);
   animation: fadeInScale 0.6s ease-out 1s both;
}

@keyframes fadeInScale {
   from {
       opacity: 0;
       transform: scale(0.8);
   }

   to {
       opacity: 1;
       transform: scale(1);
   }
}

.carousel-card:hover {
   transform: translateY(-5px) scale(1);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

/* Active slide highlighting - Blue dashed border with animation */
.swiper-slide-active .carousel-card {
   /* border: 2px dashed #007bff; */
   /* box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3); */
   transform: scale(1);
   position: relative;
   animation: activeCardPulse 2s ease-in-out infinite;
}
/* 
@keyframes activeCardPulse {

   0%,
   100% {
       box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
   }

   50% {
       box-shadow: 0 8px 25px rgba(0, 123, 255, 0.6);
   }
} */

.swiper-slide-active .carousel-card::before {
   content: '';
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   background: transparent !important;
   border-radius: 0px;
   z-index: -1;
   animation: borderGlow 2s ease-in-out infinite alternate;
}

@keyframes borderGlow {
   0% {
       opacity: 0.7;
   }

   100% {
       opacity: 1;
   }
}

.swiper-slide-active .carousel-card:hover {
   border-color: #0056b3;
   /* box-shadow: 0 15px 35px rgba(0, 123, 255, 0.4); */
}

/* Enhanced Auto-moving Slider Features */
.banner-carousel-swiper {
   transition: all 0.5s ease;
}

.swiper-slide {
   transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.swiper-slide:not(.swiper-slide-active) .carousel-card {
   /* filter: brightness(0.7) saturate(0.8); */
   /* transform: scale(0.9); */
}

.swiper-slide-active .carousel-card {
   /* filter: brightness(1) saturate(1.1); */
}

/* Auto-move progress indicator */
.auto-move-progress {
   position: absolute;
   bottom: 0;
   left: 0;
   height: 3px;
   background: linear-gradient(90deg, #007bff, #00d4ff);
   width: 0%;
   transition: width 0.1s linear;
   z-index: 5;
}

.swiper-slide-active .auto-move-progress {
   animation: progressBar 4s linear forwards;
}

@keyframes progressBar {
   from {
       width: 0%;
   }

   to {
       width: 100%;
   }
}

.carousel-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 30px;
   transition: transform 0.4s ease;
}

.carousel-card:hover .carousel-image {
   transform: scale(1.05);
}

.carousel-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   /* background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); */
   padding: 1.5rem 1rem 1rem;
   color: white;
   transform: translateY(0);
   transition: transform 0.4s ease;
}

.carousel-card:hover .carousel-overlay {
   transform: translateY(0);
}

.carousel-title {
   font-size: 1.2rem;
   font-weight: 700;
   margin: 0;
   text-align: left;
   letter-spacing: 0.05em;
}

.card-dimensions {
   position: absolute;
   top: 0.75rem;
   right: 0.75rem;
   background: #007bff;
   color: white;
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
   font-size: 0.75rem;
   font-weight: 600;
   animation: bounceIn 0.6s ease-out 1.2s both;
}

@keyframes bounceIn {
   0% {
       opacity: 0;
       transform: scale(0.3);
   }

   50% {
       opacity: 1;
       transform: scale(1.05);
   }

   70% {
       transform: scale(0.9);
   }

   100% {
       opacity: 1;
       transform: scale(1);
   }
}

/* Carousel Navigation with animations */
.carousel-nav {
   display: flex;
   justify-content: flex-start;
   gap: 1rem;
   margin-top: 1.5rem;
   animation: fadeInUp 0.8s ease-out 1.3s both;
   margin-left: -5%;
   margin-bottom: -2rem;
}
.carousel-nav-btn {
   width: 3rem;
   height: 3rem;
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   color: white;
   font-size: 1rem;
   cursor: pointer;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
}

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

.carousel-nav-btn:hover::before {
   left: 100%;
}

.carousel-nav-btn:hover {
   background: rgba(255, 255, 255, 0.3);
   border-color: rgba(255, 255, 255, 0.5);
   transform: scale(1.1);
}

/* Responsive Design */
@media (max-width: 991.98px) {
   .header-section.scrolled {
   background: rgb(25 18 3);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

   .banner-content-left {
       text-align: center;
       padding: 2rem 1rem 1rem;
   }

   .banner-title {
       font-size: clamp(1.75rem, 6vw, 2.5rem);
   }

   .banner-description {
       font-size: 1rem;
       margin: 0 auto 1rem;
   }

   .active-content-display {
       margin-top: 1.5rem;
   }

   .active-banner-image {
       height: 10rem;
   }

   .banner-carousel-container {
       padding: 1rem;
   }

   .carousel-image {
       height: 12rem;
   }

   .carousel-card {
       height: 14rem;
   }
}

@media (max-width: 767.98px) {
   .project-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      /* background: rgba(0, 0, 0, 0.8); */
      padding: 15px;
      opacity: 1;
      transition: opacity 0.3s ease;
      z-index: 1;
   }
   a.banner-btn{
       display: none;
   }
   .image-box img {
max-width: 100%;
height: auto;
border-radius: 20px;
transition: transform 0.3s ease;
filter: brightness(0.95) saturate(1.1);
}
   .projects-title{
       writing-mode: horizontal-tb;
       transform: rotate(0deg);
   }
   .projects-title-box p{
        writing-mode: horizontal-tb;
        transform: rotate(360deg);
        font-size: 3rem;
        margin-right: 5px;
        margin-bottom: -8px;
        font-family: 'Antonio', 'Source Sans 3', sans-serif !important;
   }
   .banner-slider-section {
       padding: 2rem 0;
       min-height: auto;
   }

   .banner-content-left {
       padding: 1.5rem 1rem 1rem;
   }

   .banner-title {
       font-size: clamp(1.5rem, 7vw, 2rem);
   }

   .carousel-image {
       height: 10rem;
   }

   .carousel-card {
       height: 12rem;
   }

   .carousel-nav-btn {
       width: 2.5rem;
       height: 2.5rem;
       font-size: 0.875rem;
   }

   /* Mobile-specific auto-move slider styles */
   .banner-carousel-container {
       padding: 1rem 0.5rem;
   }

   .auto-move-progress {
       height: 2px;
   }

   .carousel-title {
       font-size: 0.9rem;
       padding: 1rem 1rem 0.5rem;
   }
}

@media (max-width: 575.98px) {
   .banner-carousel-container {
       padding: 0.5rem;
   }

   .carousel-card {
       height: 10rem;
   }

   .carousel-title {
       font-size: 0.875rem;
   }

   .card-dimensions {
       font-size: 0.625rem;
       padding: 0.125rem 0.375rem;
   }

   /* Small mobile auto-move slider styles */
   .banner-carousel-swiper {
       padding: 0.5rem 0;
   }

   .auto-move-progress {
       height: 2px;
   }
}

/* Auto-move slider loading animation */
.swiper-slide-active .carousel-card {
   animation: slideInActive 0.6s ease-out;
}

@keyframes slideInActive {
   from {
       opacity: 0;
       transform: scale(0.9) translateY(20px);
   }

   to {
       opacity: 1;
       transform: scale(1) translateY(0);
   }
}

/* Enhanced hover effects for auto-move slider */
.carousel-card:hover .carousel-overlay {
   transform: translateY(0);
}

.carousel-card:hover .auto-move-progress {
   background: linear-gradient(90deg, #00d4ff, #007bff);
}

/* Footer Section Styles */
.footer-section {
   background: #191203;
   color: white;
   padding: 60px 0 20px 0;
}

/* .footer-left {
   padding-right: 30px;
} */

.footer-logo {
   display: flex;
   align-items: center;
   margin-bottom: 25px;
}

.footer-logo img {
   width: 226px;
   height: 138px;
   /* object-fit: cover; */
}

.social-media {
   display: flex;
   align-items: center;
   gap: 20px;
}

.logo-container {
   display: flex;
   align-items: center;
   margin-right: 20px;
}

.estd-text,
.year-text {
   writing-mode: vertical-rl;
   text-orientation: mixed;
   font-size: 0.8rem;
   font-weight: 600;
   color: #d4a574;
   margin: 0 5px;
}

.building-icon {
   font-size: 2.5rem;
   color: #d4a574;
   margin: 0 10px;
}

.company-name h3 {
   color: white;
   font-size: 1.8rem;
   font-weight: 700;
   margin: 0 0 5px 0;
   letter-spacing: 1px;
}

.company-name p {
   color: #d4a574;
   font-size: 0.9rem;
   font-weight: 600;
   margin: 0;
   letter-spacing: 0.5px;
}

.company-description {
   margin-bottom: 25px;
}

.company-description p {
   color: #cccccc;
   font-size: 1rem;
   line-height: 1.6;
   margin: 0;
   font-weight: 300 !important;
}

.social-media h4 {
   color: white;
   font-size: 14px;
   font-weight: 600;
   margin: 0 0 15px 0;
   letter-spacing: 0.5px;
   margin-bottom: 0px;
}

.social-icons {
   display: flex;
   gap: 15px;
}

.social-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   color: white;
   text-decoration: none;
   transition: all 0.3s ease;
}

.social-icon:hover {
   background: #d4a574;
   color: white;
   transform: translateY(-2px);
}

.social-icon i {
   font-size: 1.1rem;
}

.footer-right {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   flex-direction: row-reverse;
}

.footer-navigation {
   display: flex;
   flex-direction: row;
   gap: 15px;
}

.nav-link {
   color: white;
   text-decoration: none;
   font-size: 1rem;
   font-weight: 600;
   letter-spacing: 0.5px;
   transition: color 0.3s ease;
}

.nav-link:hover {
   color: #d4a574;
   text-decoration: none;
}

.footer-bottom {
   border-top: 2px dotted #404040;
   padding-top: 20px;
   margin-top: 30px;
   text-align: center;
}

.footer-bottom p {
   color: #999999;
   font-size: 0.9rem;
   margin: 0;
   font-size: 17px;
}

@media (max-width: 768px) {
   .play-icon-overlay img {
width: 30px !important;
height: 30px !important;
border-radius: 0% !important;
}
   .social-media {
       display: flex;
       gap: 20px;
       flex-direction: column;
       width: 100%;
       align-items: flex-start;
   }

   .footer-navigation {
       display: flex;
       flex-direction: column;
       gap: 5px;
   }

   .nav-link {
       display: block;
       padding: .5rem 0rem;
   }

   .footer-right {
       display: flex;
       justify-content: flex-end;
       align-items: flex-start;
       flex-direction: row-reverse;
   }

   .social-media {
       display: flex;
       gap: 20px;
       flex-direction: column;
       width: 100%;
   }


   .experience-section {
       padding: 40px 0;
   }

   /* .content-box,
   .image-box {
       margin-bottom: 30px;
   } */

   .experience-years {
       font-size: 3rem;
   }

   .hero-title {
       font-size: 1.4rem;
       line-height: 1.4;
   }

   .certification-icons {
       justify-content: center;
       margin-top: 20px;
       gap: 15px;
   }

   .icon-item {
       padding: 10px 15px;
   }

   .client-count {
       text-align: center;
       margin-bottom: 20px;
   }

   .client-count .count-number {
       font-size: 3.5rem;
   }

   .hero-content {
       padding: 40px 30px;
       margin: 0 15px;
   }

   .hero-main {
       min-height: 600px;
   }

   .hero-overlay {
       min-height: 400px;
       padding: 50px 0;
   }

   .feature-boxes-overlay {
       padding: 40px 0;
   }

   .feature-box {
       padding: 25px 20px;
       margin-bottom: 20px;
   }

   .feature-title {
       font-size: 1.1rem;
   }
}

@media (max-width: 576px) {
   /* .hero-title {
       font-size: 1.8rem;
       line-height: 1.4;
   } */

   .client-count .count-text {
color: #ffffff;
margin: 5px 0 0 0;
font-size: 25px;
font-weight: 400;
letter-spacing: 0.3px;
}
   .client-count .count-number {
       font-size: 3.5rem;
   }

   .cert-icon {
       width: 65px;
       height: 65px;
   }

   .icon-item span {
       font-size: 0.75rem;
   }

   .hero-content {
       padding: 30px 20px;
       margin: 0 10px;
   }

   .hero-overlay {
       min-height: 350px;
       padding: 40px 0;
   }

   .feature-box {
       padding: 20px 15px;
   }

   .feature-title {
       font-size: 1.5rem;
   }

   .feature-description {
       font-size: 1.2rem;
   }

   .feature-boxes-overlay {
       padding: 30px 0;
   }
}

/* Auto-move indicator */
/* .auto-move-indicator {
   position: absolute;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 20px;
   align-items: center;
   background: rgba(0, 0, 0, 0.7);
   padding: 8px 16px;
   border-radius: 25px;
   backdrop-filter: blur(10px);
   z-index: 5;
   animation: fadeInUp 0.8s ease-out 1.2s both;
} */

.slide-counter {
   color: white;
   font-size: 0.9rem;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 4px;
}

.current-slide {
   color: #00d4ff;
   font-weight: 700;
}

.slide-separator {
   color: rgba(255, 255, 255, 0.6);
}

.total-slides {
   color: rgba(255, 255, 255, 0.8);
}

.auto-play-status {
   display: flex;
   align-items: center;
   gap: 6px;
   color: #00d4ff;
   font-size: 0.8rem;
   font-weight: 500;
}

.auto-play-status i {
   font-size: 1rem;
   animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

   0%,
   100% {
       opacity: 1;
   }

   50% {
       opacity: 0.7;
   }
}


     /* Responsive Design */
     @media (max-width: 991.98px) {
       .col-md-6.d-lg-none.text-right {
float: right;
position: absolute;
left: 75%;
}
       .col-lg-3.col-md-6.text-right {
display: none;
}
   .mobile-menu-toggle {
       display: block;
   }
   
   .header-navigation {
       display: none;
   }
}

@media (max-width: 767.98px) {
   .experience-heading {
font-size: 3rem;
}
   .header-logo .company-name h3 {
       font-size: 1rem;
   }
   
   .header-logo .company-name p {
       font-size: 0.7rem;
   }
   
   .contact-btn {
       padding: 8px 16px;
       font-size: 0.9rem;
   }
}

@media (max-width: 575.98px) {
   .mobile-menu-content {
       padding: 15px;
   }
   
   .mobile-logo .company-name h3 {
       font-size: 0.9rem;
   }
   
   .mobile-nav-link {
       font-size: 1.1rem;
       padding: 12px 0;
   }
}

/* Override conflicting styles for view-project-icon */
.view-project-icon {
   width: 50px !important;
   height: 50px !important;
   max-height: 50px !important;
   object-fit: contain !important;
}

.project-image .view-project-icon {
   width: 50px !important;
   height: 50px !important;
   max-height: 50px !important;
   object-fit: contain !important;
}

/* Force override for view-project-icon - highest specificity */
.view-project-overlay .view-project-content .view-project-icon,
.project-image .view-project-overlay .view-project-content .view-project-icon,
.project-box .project-image .view-project-overlay .view-project-content .view-project-icon {
   width: 30px !important;
   height: 30px !important;
   max-width: 30px !important;
   max-height: 30px !important;
   min-width: 30px !important;
   min-height: 30px !important;
   object-fit: contain !important;
   flex-shrink: 0 !important;

}

/* View Project overlay layout - text on top, arrow below */
.view-project-overlay {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 ;
   display: flex !important;
   flex-direction: column !important;
   justify-content: space-between !important;
   align-items: flex-start !important;
   opacity: 0 !important;
   transition: opacity 0.3s ease !important;
   z-index: 10 !important;
   border-radius: 40px !important;
   transform: none !important;
   padding: 20px !important;
}

.view-project-content {
   text-align: left !important;
   color: white !important;
   display: flex !important;
   flex-direction: row !important;
   align-items: center !important;
   justify-content: flex-start !important;
   gap: 15px !important;
   width: 100% !important;
   transform: none !important;
   margin-top: auto !important;
   position: relative !important;
   bottom: 0 !important;
   /* bottom: 0px !important; */
   /* margin-bottom: 20px !important; */
}

.view-project-text {
   font-size: 20px !important;
   font-weight: 700 !important;
   margin-bottom: 0 !important;
   font-family: 'Antonio', sans-serif !important;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
   order: 1 !important;
   transform: none !important;
}

.view-project-icon {
   width: 50px !important;
   height: 50px !important;
   max-width: 50px !important;
   max-height: 50px !important;
   min-width: 50px !important;
   min-height: 50px !important;
   margin: 0 auto !important;
   order: 2 !important;
   object-fit: contain !important;
   flex-shrink: 0 !important;
   transform: none !important;
}

.view-project-description {
   color: white !important;
   font-size: 17px !important;
   line-height: 17px !important;
   font-weight: 400 !important;
   margin-top: 10px !important;
   text-align: left !important;
   margin-left: -5px !important;
   opacity: 0.9 !important;
   font-family: 'Source Sans 3', sans-serif !important;
   transform: none !important;
   margin-bottom: 0 !important;
   width: 80% !important;
}

/* Show View Project on hover - no movement */
.project-box:hover .view-project-overlay {
   opacity: 1 !important;
   transform: none !important;
}

/* Move original title to top on hover */
.project-box:hover .project-overlay .project-title {
   transform: translateY(-250px) !important;
   opacity: 0.7 !important;
   transition: all 0.3s ease !important;
}

/* Alternative more specific selector */
.project-box:hover .project-image .project-overlay .project-title {
   transform: translateY(-300px) !important;
   opacity: 0.7 !important;
   transition: all 0.3s ease !important;
   font-size: 30px;
}

/* Position description at top on hover */
.project-box:hover .view-project-description {
   transform: translateY(-250px) !important;
   opacity: 0.9 !important;
   transition: all 0.3s ease !important;
   text-align: left !important;
   margin-top: 0 !important;
}

/* Keep VIEW PROJECT content in fixed position */
.project-box:hover .view-project-content {
   transform: none !important;
   opacity: 1 !important;
   transition: opacity 0.3s ease !important;
}

/* Enhanced hover effect for project overlay */
.project-overlay .project-title {
   transition: all 0.3s ease !important;
}

/* Additional hover effect for better visibility */
.project-box:hover .project-overlay {
   background: linear-gradient(transparent, rgba(0, 0, 0, 0.3)) !important;
   transition: all 0.3s ease !important;
}