/* Small enhancement for dropdown hover on desktop */
 @media (min-width: 992px) {
   .navbar .nav-item.dropdown:hover .dropdown-menu {
     display: block;
     margin-top: 0;
   }
 }

 @media (min-width: 1400px) {
   .container {
     max-width: 1440px;
   }
 }

 /* Navbar logo size */
 body {
   font-family: 'Poppins', sans-serif;
 }

 .swiper-pagination-bullet-active {
   opacity: var(--swiper-pagination-bullet-opacity, 1);
   background: #f1c916e8 !important;
 }

 .navbar-brand img {
   width: 220px;
   height: auto;
 }

 .navbar-dark .navbar-nav .nav-link:focus,
 .navbar-dark .navbar-nav .nav-link:hover {
   color: rgb(254 254 0);
 }

 @media (min-width: 1200px) {

   .container,
   .container-lg,
   .container-md,
   .container-sm,
   .container-xl {
     max-width: 1300px;
   }
 }

 .navbar {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }

 /* Hero Section */
 .hero-section {
   position: relative;
   min-height: 95vh;
   display: flex;
   align-items: center;
   background: url('../images/big-banner.png') center/cover no-repeat;
   padding: 80px 0;
 }

 .hero-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, rgb(0 0 0 / 91%) 0%, rgb(0 0 0 / 79%) 50%, rgb(0 0 0 / 80%) 100%);
 }

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

 .tagline-wrapper {
   padding-right: 40px;
 }

 .tagline {
   /* */
   font-size: 54px;
   font-weight: 700;
   color: #ffffff;
   line-height: 1.3;
   margin-bottom: 1.5rem;
   letter-spacing: -0.5px;
 }

 .tagline-highlight {
   color: #f4d03f;
   position: relative;
   display: inline-block;
 }

 .subtext {
   font-size: 1.1rem;
   color: #ececec;
   line-height: 1.7;
   font-weight: 400;
   margin-bottom: 2rem;
 }

 /* Stats Bar */
 .stats-bar {
   background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
   padding: 1.5rem 0;
   margin-top: 3rem;
   border-radius: 15px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 }

 .stat-item {
   text-align: center;
   padding: 0 15px;
   border-right: 1px solid rgba(255, 255, 255, 0.1);
 }

 .stat-item:last-child {
   border-right: none;
 }

 .stat-number {
   font-size: 2rem;
   font-weight: 700;
   color: #f4d03f;
   display: block;
   margin-bottom: 0.3rem;
   font-family: 'Playfair Display', serif;
 }

 .stat-label {
   font-size: 0.85rem;
   color: #ecf0f1;
   font-weight: 400;
 }

 /* Contact Form */
 .contact-form-wrapper {
   background: #ffffff;
   padding: 20px;
   border-radius: 20px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
   position: relative;
   overflow: hidden;
 }

 .contact-form-wrapper::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 5px;
   background: linear-gradient(90deg, #f4d03f 0%, #f39c12 100%);
 }

 .form-title {
   font-size: 1.8rem;
   font-weight: 700;
   color: #2c3e50;
   margin-bottom: 0.5rem;
 }

 .form-subtitle {
   font-size: 0.95rem;
   color: #7f8c8d;
   margin-bottom: 1rem;
 }

 .form-group {
   margin-bottom: 15px;
 }

 .form-label {
   font-weight: 600;
   color: #2c3e50;
   margin-bottom: 0.5rem;
   font-size: 0.9rem;
 }

 .form-control {
   border: 2px solid #e8ecef;
   border-radius: 12px;
   padding: 20px 12px;
   font-size: 1rem;
   transition: all 0.3s ease;
   background: #f8f9fa;
 }

 .form-control:focus {
   border-color: #f4d03f;
   box-shadow: 0 0 0 0.2rem rgba(244, 208, 63, 0.15);
   background: #ffffff;
   outline: none;
 }

 .form-control::placeholder {
   color: #adb5bd;
 }

 .input-icon {
   position: relative;
 }

 .input-icon i {
   position: absolute;
   right: 15px;
   top: 50%;
   transform: translateY(-50%);
   color: #adb5bd;
   font-size: 1rem;
 }

 .btn-submit {
   width: 100%;
   padding: 12px;
   font-size: 1.1rem;
   font-weight: 600;
   border: none;
   border-radius: 12px;
   background: linear-gradient(135deg, #f4d03f 0%, #f39c12 100%);
   color: #2c3e50;
   transition: all 0.3s ease;
   box-shadow: 0 8px 25px rgba(244, 208, 63, 0.3);
   margin-top: 0rem;
 }

 .btn-submit:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 35px rgba(244, 208, 63, 0.4);
   background: linear-gradient(135deg, #f39c12 0%, #f4d03f 100%);
 }

 .btn-submit i {
   margin-left: 8px;
 }

 .privacy-note {
   font-size: 0.8rem;
   color: #95a5a6;
   text-align: center;
   margin-top: 1rem;
 }

 /* Responsive Design */
 @media (max-width: 768px) {
   .tagline {
     font-size: 36px;
   }

   .order-c {
     order: 1;
     margin-bottom: 30px;
   }

   .order-cx {
     order: 2;
   }

   .brand-logo-wrapper {
     width: 315px !important;
     height: 231px !important;
   }


   .tagline-wrapper h3 {
     color: #fff;
     font-size: 28px !important;
   }

   .tagline-wrapper {
     padding-right: 0;
     margin-bottom: 3rem;
   }

   .hero-section {
     min-height: auto;
     padding: 50px 0;
   }

   .contact-form-wrapper {
     padding: 1rem;
   }

   .stat-item {
     border-right: 1px solid rgba(255, 255, 255, 0.3);
     margin-bottom: 1rem;
     padding: 0.5rem 0;
   }

   .stats-bar {
     margin-top: 2rem;
     padding: 0.5rem 1rem;
   }

   .stat-number {
     font-size: 1.5rem;
   }
 }

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

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

 .hero-content>* {
   animation: fadeInUp 0.8s ease-out;
 }

 .contact-form-wrapper {
   animation: fadeInUp 1s ease-out;
 }

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

 .section-header {
   text-align: center;
   margin-bottom: 60px;
 }

 .section-title {

   font-size: 40px !important;
   font-weight: 700;
   color: #2c3e50;
   margin-bottom: 1rem;
   position: relative;
   display: inline-block;
 }

 .section-title::after {
   content: '';
   position: absolute;
   bottom: -10px;
   left: 50%;
   transform: translateX(-50%);
   width: 80px;
   height: 4px;
   background: linear-gradient(90deg, #f4d03f, #f39c12);
   border-radius: 2px;
 }

 .section-subtitle {
   font-size: 1.1rem;
   color: #7f8c8d;
   max-width: 700px;
   margin: 1.5rem auto 0;
   line-height: 1.7;
 }

 /* Service Cards */
 .service-card {
   position: relative;
   border-radius: 25px;
   overflow: hidden;
   cursor: pointer;
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
   margin-bottom: 30px;
 }

 .service-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.85) 100%);
   z-index: 1;
   transition: all 0.5s ease;
 }

 .navbar-dark .navbar-nav .nav-link {
   color: rgb(255 255 255 / 81%);
 }

 .card-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: all 0.5s ease;
 }

 .service-card:hover .card-image {
   transform: scale(1.1);
 }

 .card-content {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 40px;
   z-index: 2;
   transition: all 0.5s ease;
 }

 .card-icon {
   width: 70px;
   height: 70px;
   background: linear-gradient(135deg, #f4d03f, #f39c12);
   border-radius: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   transition: all 0.5s ease;
   box-shadow: 0 10px 30px rgba(244, 208, 63, 0.4);
 }

 .card-icon i {
   font-size: 1.8rem;
   color: #2c3e50;
 }

 .service-card:hover .card-icon {
   transform: scale(1.1) rotate(5deg);
 }

 .card-title {

   font-size: 2rem;
   font-weight: 700;
   color: #ffffff;
   margin-bottom: 15px;
   transition: all 0.3s ease;
 }

 .service-card:hover .card-title {
   color: #f4d03f;
 }

 .card-description {
   font-size: 1rem;
   color: #ecf0f1;
   line-height: 1.6;
   margin-bottom: 20px;
   opacity: 0.9;
 }

 .card-features {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 25px;
 }

 .feature-tag {
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(10px);
   padding: 8px 16px;
   border-radius: 20px;
   font-size: 0.85rem;
   color: #ffffff;
   border: 1px solid rgba(255, 255, 255, 0.2);
   transition: all 0.3s ease;
 }

 .service-card:hover .feature-tag {
   background: rgba(244, 208, 63, 0.2);
   border-color: rgba(244, 208, 63, 0.4);
 }

 .card-link {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   color: #ffffff;
   font-weight: 600;
   font-size: 1rem;
   text-decoration: none;
   transition: all 0.3s ease;
   padding: 12px 0;
 }

 .card-link i {
   font-size: 1.2rem;
   transition: all 0.3s ease;
 }

 .service-card:hover .card-link {
   color: #f4d03f;
   gap: 15px;
 }

 .service-card:hover .card-link i {
   transform: translateX(5px);
 }

 /* Badge */
 /* .popular-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #f4d03f, #f39c12);
  color: #2c3e50;
  padding: 8px 20px;
  border-radius: 25px;
  font-weight: 700;
  font-size: 0.85rem;
  z-index: 3;
  box-shadow: 0 5px 20px rgba(244, 208, 63, 0.4);
  animation: pulse 2s infinite;
} */

 @keyframes pulse {

   0%,
   100% {
     transform: scale(1);
   }

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

 /* Responsive */
 @media (max-width: 768px) {
   .section-title {
     font-size: 2rem;
   }

   .form-subtitle {
     margin-bottom: 1rem;
   }

   .form-group {
     margin-bottom: 14px;
   }

   .service-card {
     height: 466px;
   }

   .feature-card {
     padding: 14px !important;
   }

   .card-content {
     padding: 14px;
   }

   .section-header {
     margin-bottom: 27px;
   }

   .section-header p {
     font-size: 16px;
   }

   .card-title {
     font-size: 1.6rem;
   }
 }

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

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

 .service-card {
   animation: fadeInUp 0.8s ease-out;
 }

 .service-card:nth-child(2) {
   animation-delay: 0.2s;
 }

 .why-choose-section {
   padding: 100px 0;
   background: linear-gradient(135deg, #f8f9fa 0%, #d0d0d0 100%);
   position: relative;
   overflow: hidden;
 }

 .why-choose-section::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -20%;
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, rgba(244, 208, 63, 0.1) 0%, transparent 70%);
   border-radius: 50%;
 }

 .section-content {
   position: relative;
   z-index: 2;
 }

 /* Left Content */
 .content-left {
   padding-right: 50px;
 }

 .section-tag {
   display: inline-block;
   background: linear-gradient(135deg, #f4d03f, #f39c12);
   color: #2c3e50;
   padding: 8px 20px;
   border-radius: 25px;
   font-weight: 700;
   font-size: 0.85rem;
   margin-bottom: 20px;
   box-shadow: 0 5px 15px rgba(244, 208, 63, 0.3);
 }

 .main-heading {
   font-size: 34px;
   font-weight: 700;
   color: #2c3e50;
   line-height: 1.3;
   margin-bottom: 20px;
 }

 .main-heading .highlight {
   color: #a58400;
   position: relative;
 }

 .main-description {
   font-size: 1.1rem;
   color: #5a6c7d;
   line-height: 1.8;
   margin-bottom: 40px;
 }

 /* Feature Cards */
 .features-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 25px;
   margin-bottom: 40px;
 }

 .feature-card {
   background: #ffffff;
   padding: 30px;
   border-radius: 20px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   border: 2px solid transparent;
   position: relative;
   overflow: hidden;
 }

 .feature-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 4px;
   height: 0;
   background: linear-gradient(180deg, #f4d03f, #f39c12);
   transition: height 0.4s ease;
 }

 .feature-card:hover::before {
   height: 100%;
 }

 .feature-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 20px 45px rgba(244, 208, 63, 0.2);
   border-color: rgba(244, 208, 63, 0.3);
 }

 .feature-icon {
   width: 60px;
   height: 60px;
   background: linear-gradient(135deg, rgba(244, 208, 63, 0.15), rgba(243, 156, 18, 0.15));
   border-radius: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   transition: all 0.4s ease;
 }

 .feature-card:hover .feature-icon {
   background: linear-gradient(135deg, #f4d03f, #f39c12);
   transform: scale(1.1) rotate(5deg);
 }

 .feature-icon i {
   font-size: 1.6rem;
   color: #f4d03f;
   transition: all 0.4s ease;
 }

 .feature-card:hover .feature-icon i {
   color: #2c3e50;
 }

 .feature-title {
   font-size: 1.2rem;
   font-weight: 700;
   color: #2c3e50;
   margin-bottom: 10px;
 }

 .feature-description {
   font-size: 0.95rem;
   color: #7f8c8d;
   line-height: 1.6;
 }

 /* CTA Button */
 .cta-button {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   background: linear-gradient(135deg, #2c3e50, #34495e);
   color: #ffffff;
   padding: 16px 35px;
   border-radius: 50px;
   font-weight: 600;
   font-size: 1.05rem;
   text-decoration: none;
   transition: all 0.4s ease;
   box-shadow: 0 10px 30px rgba(44, 62, 80, 0.3);
   border: 2px solid transparent;
 }

 .cta-button:hover {
   background: linear-gradient(135deg, #f4d03f, #f39c12);
   color: #2c3e50;
   transform: translateY(-3px);
   box-shadow: 0 15px 40px rgba(244, 208, 63, 0.4);
   text-decoration: none;
 }

 .cta-button i {
   transition: transform 0.4s ease;
 }

 .cta-button:hover i {
   transform: translateX(5px);
 }

 /* Right Image Section */
 .image-section {
   position: relative;
   padding-left: 50px;
 }

 .image-wrapper {
   position: relative;
   border-radius: 30px;
   overflow: hidden;
   box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
 }

 .image-wrapper::before {
   content: '';
   position: absolute;
   top: -20px;
   right: -20px;
   width: 200px;
   height: 200px;
   background: linear-gradient(135deg, #f4d03f, #f39c12);
   border-radius: 30px;
   z-index: -1;
   opacity: 0.3;
 }

 .main-image {
   width: 100%;
   height: auto;
   display: block;
   border-radius: 30px;
   transition: transform 0.5s ease;
 }

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

 /* Floating Elements */
 .floating-card {
   position: absolute;
   background: #ffffff;
   padding: 20px 25px;
   border-radius: 15px;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
   display: flex;
   align-items: center;
   gap: 15px;
   animation: float 3s ease-in-out infinite;
 }

 .floating-card-1 {
   top: 50px;
   left: -30px;
   z-index: 5;
 }

 .floating-card-2 {
   bottom: 50px;
   right: -30px;
   z-index: 5;
 }

 .floating-icon {
   width: 50px;
   height: 50px;
   background: linear-gradient(135deg, #f4d03f, #f39c12);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .floating-icon i {
   color: #2c3e50;
   font-size: 1.3rem;
 }

 .floating-text h4 {
   font-size: 1.1rem;
   font-weight: 700;
   color: #2c3e50;
   margin: 0;
 }

 .floating-text p {
   font-size: 0.85rem;
   color: #7f8c8d;
   margin: 0;
 }

 @keyframes float {

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

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

 /* Decorative Elements */
 .decorative-circle {
   position: absolute;
   width: 100px;
   height: 100px;
   border: 3px solid rgba(244, 208, 63, 0.3);
   border-radius: 50%;
   top: -20px;
   left: -20px;
   z-index: -1;
 }

 /* Responsive */
 @media (max-width: 992px) {
   .content-left {
     padding-right: 0;
     margin-bottom: 50px;
   }

   .image-section {
     padding-left: 0;
   }

   /* .features-grid {
      grid-template-columns: 1fr;
  } */

   .main-heading {
     font-size: 2.2rem;
   }

   .floating-card-1,
   .floating-card-2 {
     position: relative;
     top: auto;
     bottom: auto;
     left: auto;
     right: auto;
     margin: 20px auto;
     max-width: 300px;
   }
 }

 @media (max-width: 768px) {
   .why-choose-section {
     padding: 10px 0;
   }

   .main-heading {
     font-size: 1.8rem;
   }
 }

 /* Animations */
 @keyframes fadeInUp {
   from {
     opacity: 0;
     transform: translateY(40px);
   }

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

 .feature-card {
   animation: fadeInUp 0.8s ease-out;
 }

 .feature-card:nth-child(1) {
   animation-delay: 0.1s;
 }

 .feature-card:nth-child(2) {
   animation-delay: 0.2s;
 }

 .feature-card:nth-child(3) {
   animation-delay: 0.3s;
 }

 .feature-card:nth-child(4) {
   animation-delay: 0.4s;
 }

 /* ciuntdown css start */
 .stats-section {
   position: relative;
   padding: 10px 0;
   background: url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80') center/cover no-repeat fixed;
   overflow: hidden;
 }

 .stats-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, rgba(44, 62, 80, 0.95) 0%, rgba(52, 73, 94, 0.92) 50%, rgba(44, 62, 80, 0.95) 100%);
   z-index: 1;
 }

 .stats-section::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background:
     linear-gradient(45deg, transparent 48%, rgba(244, 208, 63, 0.03) 49%, rgba(244, 208, 63, 0.03) 51%, transparent 52%),
     linear-gradient(-45deg, transparent 48%, rgba(244, 208, 63, 0.03) 49%, rgba(244, 208, 63, 0.03) 51%, transparent 52%);
   background-size: 60px 60px;
   z-index: 1;
 }

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

 /* Individual Stat Card */
 .stat-item {
   text-align: center;
   padding: 10px 18px;
   position: relative;
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .stat-item::before {
   content: '';
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 1px;
   height: 80px;
   background: linear-gradient(180deg, transparent, rgba(244, 208, 63, 0.5), transparent);
 }

 .stat-item:last-child::before {
   display: none;
 }

 .stat-item:hover {
   transform: translateY(-10px);
 }

 /* Icon Wrapper */
 .stat-icon-wrapper {
   position: relative;
   display: inline-block;
   margin-bottom: 25px;
 }

 .stat-icon-bg {
   width: 100px;
   height: 100px;
   background: linear-gradient(135deg, rgba(244, 208, 63, 0.2), rgba(243, 156, 18, 0.2));
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   transition: all 0.5s ease;
   border: 3px solid rgba(244, 208, 63, 0.3);
   box-shadow: 0 10px 40px rgba(244, 208, 63, 0.2);
 }

 .stat-item:hover .stat-icon-bg {
   background: linear-gradient(135deg, #f4d03f, #f39c12);
   transform: scale(1.1) rotate(10deg);
   box-shadow: 0 15px 50px rgba(244, 208, 63, 0.4);
 }

 .stat-icon-bg::before {
   content: '';
   position: absolute;
   top: -10px;
   right: -10px;
   width: 30px;
   height: 30px;
   background: #f4d03f;
   border-radius: 50%;
   opacity: 0;
   transition: all 0.5s ease;
 }

 .stat-item:hover .stat-icon-bg::before {
   opacity: 1;
   animation: ping 1.5s ease-out infinite;
 }

 @keyframes ping {
   0% {
     transform: scale(1);
     opacity: 1;
   }

   100% {
     transform: scale(2);
     opacity: 0;
   }
 }

 .stat-icon {
   font-size: 2.5rem;
   color: #f4d03f;
   transition: all 0.5s ease;
   position: relative;
   z-index: 2;
 }

 .stat-item:hover .stat-icon {
   color: #2c3e50;
   transform: scale(1.1);
 }



 /* Decorative Line */
 .decorative-line {
   width: 50px;
   height: 3px;
   background: linear-gradient(90deg, transparent, #f4d03f, transparent);
   margin: 15px auto;
   transition: all 0.5s ease;
 }

 .stat-item:hover .decorative-line {
   width: 80px;
   background: linear-gradient(90deg, #f4d03f, #f39c12, #f4d03f);
 }

 /* Floating Particles */
 .particle {
   position: absolute;
   width: 4px;
   height: 4px;
   background: #f4d03f;
   border-radius: 50%;
   opacity: 0.4;
   animation: float-particle 6s ease-in-out infinite;
 }

 .particle:nth-child(1) {
   top: 20%;
   left: 10%;
   animation-delay: 0s;
 }

 .particle:nth-child(2) {
   top: 40%;
   left: 80%;
   animation-delay: 1s;
 }

 .particle:nth-child(3) {
   top: 60%;
   left: 30%;
   animation-delay: 2s;
 }

 .particle:nth-child(4) {
   top: 80%;
   left: 70%;
   animation-delay: 3s;
 }

 @keyframes float-particle {

   0%,
   100% {
     transform: translateY(0) scale(1);
     opacity: 0.4;
   }

   50% {
     transform: translateY(-30px) scale(1.5);
     opacity: 0.8;
   }
 }

 /* Responsive */
 @media (max-width: 992px) {
   .stat-item::before {
     display: none;
   }

   .stat-item {
     margin-bottom: 0px;
     padding: 10px 10px;
   }

   .stats-section .row {

     flex-wrap: nowrap;
     overflow-x: auto;
   }

   .stat-number {
     font-size: 2.8rem;
   }
 }

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

   .stat-number {
     font-size: 2.2rem;
   }

   .stat-icon-bg {
     width: 80px;
     height: 80px;
   }

   .stat-icon {
     font-size: 2rem;
   }

   .stat-label {
     font-size: 0.95rem;
   }
 }

 /* Loading Animation */
 @keyframes fadeInScale {
   from {
     opacity: 0;
     transform: scale(0.8) translateY(30px);
   }

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

 .stat-item {
   animation: fadeInScale 0.8s ease-out;
 }

 .stat-item:nth-child(1) {
   animation-delay: 0.1s;
 }

 .stat-item:nth-child(2) {
   animation-delay: 0.2s;
 }

 .stat-item:nth-child(3) {
   animation-delay: 0.3s;
 }

 .stat-item:nth-child(4) {
   animation-delay: 0.4s;
 }

 /* brand section css */
 .brands-section {
   padding: 50px 0;
   background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
   position: relative;
   overflow: hidden;
 }

 .brands-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: -50%;
   width: 200%;
   height: 100%;
   background: radial-gradient(circle at 50% 50%, rgba(244, 208, 63, 0.05) 0%, transparent 70%);
 }

 .section-header {
   text-align: center;
   margin-bottom: 70px;
   position: relative;
   z-index: 2;
 }

 .section-tag {
   display: inline-block;
   background: linear-gradient(135deg, rgba(244, 208, 63, 0.15), rgba(243, 156, 18, 0.15));
   color: #f39c12;
   padding: 10px 25px;
   border-radius: 30px;
   font-weight: 700;
   font-size: 0.9rem;
   margin-bottom: 20px;
   border: 2px solid rgba(244, 208, 63, 0.3);
 }

 .section-title {

   font-size: 3rem;
   font-weight: 700;
   color: #2c3e50;
   margin-bottom: 1rem;
   line-height: 1.3;
 }

 .section-title .highlight {
   color: #a88700;
   position: relative;
 }



 /* Swiper Container */
 .brands-swiper {
   padding: 40px 0 80px;
   position: relative;
   z-index: 2;
 }

 /* Brand Card */
 .brand-card {
   border-radius: 25px;
   padding: 30px 40px;
   box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   border: 2px solid transparent;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   position: relative;
   overflow: hidden;
 }

 .brand-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 5px;
   background: linear-gradient(90deg, #f4d03f, #f39c12);
   transform: scaleX(0);
   transition: transform 0.5s ease;
 }

 .dropdown-menu a:hover {
   background-color: #FFEB3B;
 }

 .brand-card:hover::before {
   transform: scaleX(1);
 }

 .brand-card:hover {
   transform: translateY(-15px);
   box-shadow: 0 25px 60px rgba(244, 208, 63, 0.25);
   border-color: rgba(244, 208, 63, 0.3);
 }

 /* Brand Logo */
 .brand-logo-wrapper {
   width: 290px;
   height: 150px;
   background: #f8f9fa;
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 4px;
   transition: all 0.5s ease;
   padding: 0px;
 }

 .brand-card:hover .brand-logo-wrapper {
   background: linear-gradient(135deg, rgba(244, 208, 63, 0.1), rgba(243, 156, 18, 0.1));
   border-color: rgba(244, 208, 63, 0.4);
   transform: scale(1.05);
 }

 .brand-logo {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   transition: all 0.5s ease;
 }

 .brand-card:hover .brand-logo {
   filter: grayscale(0%);
 }

 /* Brand Name */
 .brand-name {

   font-size: 1.8rem;
   font-weight: 700;
   color: #2c3e50;
   margin-bottom: 15px;
   transition: all 0.3s ease;
 }

 .brand-card:hover .brand-name {
   color: #f4d03f;
 }

 /* Category */
 .brand-category {
   font-size: 0.95rem;
   color: #7f8c8d;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 25px;
 }

 /* Testimonial Quote */


 /* Swiper Navigation */
 .swiper-button-next,
 .swiper-button-prev {
   width: 55px;
   height: 55px;
   background: #ffffff;
   border-radius: 50%;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   transition: all 0.3s ease;
 }

 .swiper-button-next::after,
 .swiper-button-prev::after {
   font-size: 1.3rem;
   color: #2c3e50;
   font-weight: bold;
 }

 .swiper-button-next:hover,
 .swiper-button-prev:hover {
   background: linear-gradient(135deg, #f4d03f, #f39c12);
   transform: scale(1.1);
 }

 .swiper-button-next:hover::after,
 .swiper-button-prev:hover::after {
   color: #2c3e50;
 }

 /* Swiper Pagination */
 .swiper-pagination-bullet {
   width: 12px;
   height: 12px;
   background: #d1d8dd;
   opacity: 1;
   transition: all 0.3s ease;
 }

 .swiper-pagination-bullet-active {
   background: linear-gradient(135deg, #f4d03f, #f39c12);
   width: 35px;
   border-radius: 6px;
 }

 /* Stats Row */
 .stats-row {
   margin-top: 80px;
   padding: 50px;
   background: linear-gradient(135deg, #2c3e50, #34495e);
   border-radius: 25px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
   position: relative;
   z-index: 2;
 }

 .stat-item {
   text-align: center;
   color: #ffffff;
 }

 .stat-number {

   font-size: 2.5rem;
   font-weight: 700;
   color: #f4d03f;
   display: block;
   margin-bottom: 10px;
 }

 .stat-label {
   font-size: 1rem;
   color: #ecf0f1;
   font-weight: 500;
 }

 /* Responsive */
 @media (max-width: 992px) {
   .section-title {
     font-size: 2.2rem;
   }

   .brand-card {
     padding: 40px 30px;
   }
 }

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

   .section-title {
     font-size: 1.8rem;
   }

   .section-subtitle {
     font-size: 1rem;
   }

   .brand-card {
     padding: 5px 5px;
   }

   .stats-row {
     padding: 30px 20px;
   }

   .stat-number {
     font-size: 2rem;
   }
 }

 /* Animation */
 @keyframes fadeInUp {
   from {
     opacity: 0;
     transform: translateY(40px);
   }

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

 .brand-card {
   animation: fadeInUp 0.8s ease-out;
 }

 /* end of brand slid css */
 /* app section start */
 .app-section {
   padding: 100px 0;
   background: linear-gradient(135deg, #f8f9fa 0%, #d0d0d0 100%);
   position: relative;
   overflow: hidden;

 }

 .app-section::before {
   content: '';
   position: absolute;
   top: -100px;
   right: -100px;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, rgba(244, 208, 63, 0.15) 0%, transparent 70%);
   border-radius: 50%;
 }

 .app-section::after {
   content: '';
   position: absolute;
   bottom: -150px;
   left: -150px;
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, rgba(46, 213, 115, 0.12) 0%, transparent 70%);
   border-radius: 50%;
 }

 .section-content {
   position: relative;
   z-index: 2;
 }

 section.projects-section .swiper-wrapper {
   min-height: 470px;
 }

 /* Left Content */
 .content-left {
   padding-right: 50px;
 }

 .app-img img {
   width: 100%;
   position: relative;
 }


 .main-heading .normal {
   color: #2c3e50;
 }


 .sub-heading {
   font-size: 2.8rem;
   font-weight: 800;
   color: #2c3e50;
   margin-bottom: 20px;

 }

 .description {
   font-size: 1.1rem;
   color: #5a6c7d;
   line-height: 1.8;
   margin-bottom: 35px;
 }

 /* Features List */
 .features-list {
   margin-bottom: 40px;
 }

 .feature-item {
   display: flex;
   align-items: center;
   gap: 15px;
   margin-bottom: 6px;
   transition: all 0.3s ease;
   padding: 1px;
   border-radius: 15px;
 }


 .feature-icon {
   width: 45px;
   height: 45px;
   background: linear-gradient(135deg, #cc9a2e, #cf810b);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: all 0.3s ease;
 }


 .feature-icon i {
   color: #ffffff;
   font-size: 1.1rem;
 }

 .feature-text {
   flex: 1;
   font-size: 1.05rem;
   color: #2c3e50;
   font-weight: 600;
   line-height: 1.6;
 }

 /* App Store Buttons */
 .app-buttons {
   display: flex;
   gap: 15px;
   flex-wrap: wrap;
 }

 .app-btn {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   padding: 14px 28px;
   background: #2c3e50;
   color: #ffffff;
   text-decoration: none;
   border-radius: 12px;
   font-weight: 600;
   font-size: 0.95rem;
   transition: all 0.4s ease;
   box-shadow: 0 10px 30px rgba(44, 62, 80, 0.3);
   border: 2px solid transparent;
 }

 .app-btn:hover {
   color: #ffffff;
   text-decoration: none;
   transform: translateY(-5px);
 }

 .app-btn i {
   font-size: 1.8rem;
 }

 .btn-text {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }

 .btn-label {
   font-size: 0.75rem;
   font-weight: 400;
   opacity: 0.8;
 }

 .btn-store {
   font-size: 1rem;
   font-weight: 700;
 }

 /* Right Side - Phone Mockups */
 .phones-wrapper {
   position: relative;
   height: 600px;
   perspective: 1000px;
 }

 .phone-mockup {
   position: absolute;
   width: 280px;
   background: #2c3e50;
   border-radius: 40px;
   padding: 12px;
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
   transition: all 0.6s ease;
 }

 .phone-mockup:hover {
   transform: translateY(-20px) scale(1.05);
 }

 .phone-1 {
   top: 50px;
   left: 50%;
   transform: translateX(-50%) rotate(-5deg);
   z-index: 3;
 }

 .phone-2 {
   top: 20px;
   right: 0;
   transform: rotate(8deg);
   z-index: 2;
 }

 .phone-notch {
   width: 120px;
   height: 25px;
   background: #2c3e50;
   border-radius: 0 0 20px 20px;
   margin: 0 auto 5px;
   position: relative;
   z-index: 5;
 }

 .phone-screen {
   width: 100%;
   height: 560px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border-radius: 30px;
   overflow: hidden;
   position: relative;
 }

 .phone-2 .phone-screen {
   background: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   padding: 30px;
 }

 .app-logo {
   width: 100px;
   height: 100px;
   background: linear-gradient(135deg, #f4d03f, #f39c12);
   border-radius: 25px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   box-shadow: 0 15px 40px rgba(244, 208, 63, 0.4);
 }

 .app-logo i {
   font-size: 3rem;
   color: #2c3e50;
 }

 .app-name {

   font-size: 1.8rem;
   font-weight: 700;
   color: #2c3e50;
   text-align: center;
 }

 .app-tagline {
   font-size: 0.9rem;
   color: #7f8c8d;
   text-align: center;
   margin-top: 10px;
 }

 /* Screen Content */
 .screen-content {
   padding: 30px 20px;
 }

 .screen-header {
   color: #ffffff;
   font-size: 1.5rem;
   font-weight: 700;
   margin-bottom: 20px;
 }

 .progress-card {
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(10px);
   border-radius: 15px;
   padding: 20px;
   margin-bottom: 15px;
   border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .progress-title {
   color: #ffffff;
   font-size: 1rem;
   font-weight: 600;
   margin-bottom: 10px;
 }

 .progress-bar-custom {
   width: 100%;
   height: 8px;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 10px;
   overflow: hidden;
 }

 .progress-fill {
   height: 100%;
   background: linear-gradient(90deg, #2ecc71, #27ae60);
   border-radius: 10px;
   animation: progress 2s ease-out;
 }

 @keyframes progress {
   from {
     width: 0;
   }
 }

 /* Floating Elements */
 .floating-badge {
   position: absolute;
   background: #ffffff;
   padding: 12px 20px;
   border-radius: 50px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   font-weight: 700;
   color: #2c3e50;
   font-size: 0.9rem;
   animation: float 3s ease-in-out infinite;
 }



 @keyframes float {

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

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

 /* Responsive */
 @media (max-width: 992px) {
   .content-left {
     padding-right: 0;
     margin-bottom: 60px;
   }

   .main-heading {
     font-size: 2.5rem;
   }

   .sub-heading {
     font-size: 2rem;
   }

   .phones-wrapper {
     height: 500px;
   }

   .phone-mockup {
     width: 240px;
   }

   .phone-screen {
     height: 480px;
   }
 }

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

   .main-heading {
     font-size: 2rem;
   }

   .sub-heading {
     font-size: 1.6rem;
   }

   .phones-wrapper {
     height: 268px;
   }

   .phone-mockup {
     width: 200px;
   }

   .phone-screen {
     height: 400px;
   }

   .phone-1 {
     left: 20%;
   }

   .phone-2 {
     right: -20px;
   }

   .floating-badge {
     display: none;
   }
 }

 /* Animations */
 @keyframes fadeInLeft {
   from {
     opacity: 0;
     transform: translateX(-50px);
   }

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

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

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

 .content-left {
   animation: fadeInLeft 1s ease-out;
 }

 .phones-wrapper {
   animation: fadeInRight 1s ease-out;
 }

 .swiper.brands-swiper {
   min-height: 300px;
 }

 .swiper-button-prev,
 .swiper-rtl .swiper-button-next {
   display: none !important;
 }

 .swiper-button-next {
   display: none !important;
 }

 /* home page css  */
 .how-it-works-section {
   padding: 100px 0;
   background: linear-gradient(180deg, #ffffff 0%, #fefef8 100%);
   position: relative;
   overflow: hidden;
 }

 .how-it-works-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 90%;
   height: 2px;
   background: linear-gradient(90deg, transparent, rgba(244, 208, 63, 0.3), transparent);
 }

 /* Section Header */
 .section-header {
   text-align: center;
   margin-bottom: 80px;
 }

 .section-title {

   font-size: 3rem;
   font-weight: 700;
   color: #2c3e50;
   margin-bottom: 15px;
   position: relative;
   display: inline-block;
 }

 .section-title::after {
   content: '';
   position: absolute;
   bottom: -15px;
   left: 50%;
   transform: translateX(-50%);
   width: 100px;
   height: 4px;
   background: linear-gradient(90deg, #f4d03f, #f39c12);
   border-radius: 2px;
 }



 /* Process Container */
 .process-container {
   background: #303e4e;
   border-radius: 30px;
   padding: 35px 36px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
   border: 2px solid #f8f9fa;
   position: relative;
 }

 /* Timeline */
 .timeline {
   position: relative;
 }

 .timeline::before {
   content: '';
   position: absolute;
   top: 80px;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg,
       #f4d03f 0%,
       #f4d03f 25%,
       #e8ecef 25%,
       #e8ecef 50%,
       #e8ecef 50%,
       #e8ecef 75%,
       #e8ecef 75%,
       #e8ecef 100%);
   z-index: 0;
 }

 .timeline.active-step-2::before {
   background: linear-gradient(90deg,
       #f4d03f 0%,
       #f4d03f 50%,
       #e8ecef 50%,
       #e8ecef 100%);
 }

 .timeline.active-step-3::before {
   background: linear-gradient(90deg,
       #f4d03f 0%,
       #f4d03f 75%,
       #e8ecef 75%,
       #e8ecef 100%);
 }

 .timeline.active-step-4::before {
   background: #f4d03f;
 }

 /* Step Items */
 .step-item {
   text-align: center;
   position: relative;
   z-index: 1;
   transition: all 0.5s ease;
   cursor: pointer;
 }

 .step-item:hover {
   transform: translateY(-10px);
 }

 /* Icon Wrapper */
 .step-icon-wrapper {
   width: 140px;
   height: 140px;
   margin: 0 auto 30px;
   position: relative;
   transition: all 0.5s ease;
 }

 .step-icon-bg {
   width: 100%;
   height: 100%;
   background: #ffffff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 4px solid #e8ecef;
   transition: all 0.5s ease;
   position: relative;
   z-index: 2;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 }

 .step-item:hover .step-icon-bg {
   border-color: #f4d03f;
   background: linear-gradient(135deg, #fff9e6, #ffffff);
   transform: scale(1.1);
   box-shadow: 0 15px 45px rgba(244, 208, 63, 0.3);
 }

 .step-icon {
   font-size: 3rem;
   color: #bdc3c7;
   transition: all 0.5s ease;
 }

 .step-item:hover .step-icon {
   color: #f4d03f;
   transform: scale(1.1);
 }

 /* Step Number */
 .step-number {
   position: absolute;
   top: -10px;
   right: 5px;
   width: 40px;
   height: 40px;
   background: linear-gradient(135deg, #f4d03f, #f39c12);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   color: #2c3e50;
   font-size: 1.1rem;
   box-shadow: 0 5px 20px rgba(244, 208, 63, 0.4);
   z-index: 3;

   border: 3px solid #ffffff;
 }

 /* Step Content */
 .step-title {
   font-size: 18px;
   font-weight: 700;
   color: #ffffff;
   margin-bottom: 15px;
   transition: all 0.3s ease;
 }

 .step-item:hover .step-title {
   color: #f4d03f;
 }

 .step-description {
   font-size: 14px;
   color: #f3f3f3;
   line-height: 1.7;
   padding: 0 10px;
 }

 /* Active State */
 .step-item.active .step-icon-bg {
   border-color: #f4d03f;
   background: linear-gradient(135deg, #f4d03f, #f39c12);
 }

 .step-item.active .step-icon {
   color: #2c3e50;
 }

 .step-item.active .step-title {
   color: #f4d03f;
 }

 /* Decorative Elements */
 .decorative-dot {
   position: absolute;
   width: 12px;
   height: 12px;
   background: #f4d03f;
   border-radius: 50%;
   top: 75px;
   animation: pulse 2s infinite;
 }

 .dot-1 {
   left: 25%;
   animation-delay: 0s;
 }

 .dot-2 {
   left: 50%;
   animation-delay: 0.5s;
 }

 .dot-3 {
   left: 75%;
   animation-delay: 1s;
 }

 @keyframes pulse {

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

   50% {
     transform: scale(1.5);
     opacity: 0.5;
   }
 }

 /* CTA Section */
 .cta-section {
   text-align: center;
   padding-top: 10px;
   border-top: 2px solid #f8f9fa;
 }

 .cta-button {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   background: linear-gradient(135deg, #2c3e50, #34495e);
   color: #ffffff;
   padding: 18px 40px;
   border-radius: 50px;
   font-weight: 700;
   font-size: 1.1rem;
   text-decoration: none;
   transition: all 0.4s ease;
   box-shadow: 0 15px 40px rgba(44, 62, 80, 0.3);
   border: 2px solid transparent;
 }

 .cta-button:hover {
   background: linear-gradient(135deg, #f4d03f, #f39c12);
   color: #2c3e50;
   transform: translateY(-5px);
   box-shadow: 0 20px 50px rgba(244, 208, 63, 0.4);
   text-decoration: none;
 }

 .cta-button i {
   transition: transform 0.4s ease;
 }

 .cta-button:hover i {
   transform: translateX(5px);
 }

 /* Responsive */
 @media (max-width: 992px) {
   .timeline::before {
     display: none;
   }

   .step-item {
     margin-bottom: 50px;
   }

   .decorative-dot {
     display: none;
   }
 }

 @media (max-width: 768px) {
   .how-it-works-section {
     padding: 60px 0;
   }

   .section-title {
     font-size: 2rem;
   }

   .process-container {
     padding: 40px 25px;
   }

   .step-icon-wrapper {
     width: 110px;
     height: 110px;
   }

   .step-icon {
     font-size: 2.2rem;
   }

   .step-title {
     font-size: 1.15rem;
   }

   .step-description {
     font-size: 0.9rem;
   }
 }

 /* Animations */
 @keyframes fadeInUp {
   from {
     opacity: 0;
     transform: translateY(40px);
   }

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

 .step-item {
   animation: fadeInUp 0.8s ease-out;
 }

 .step-item:nth-child(1) {
   animation-delay: 0.1s;
 }

 .step-item:nth-child(2) {
   animation-delay: 0.2s;
 }

 .step-item:nth-child(3) {
   animation-delay: 0.3s;
 }

 .step-item:nth-child(4) {
   animation-delay: 0.4s;
 }

 /* end of how it works css */

 /* our services css */
 .projects-section {
   padding: 60px 0;
   background: linear-gradient(180deg, #efefef 0%, #f8f9fa 100%);
   position: relative;
 }

 /* Section Header */
 .section-header {
   text-align: center;
   margin-bottom: 70px;
 }

 .section-title {

   font-size: 3rem;
   font-weight: 700;
   color: #2c3e50;
   position: relative;
   display: inline-block;
   margin-bottom: 20px;
 }

 .section-title::after {
   content: '';
   position: absolute;
   bottom: -10px;
   left: 50%;
   transform: translateX(-50%);
   width: 100px;
   height: 4px;
   background: linear-gradient(90deg, #f4d03f, #f39c12);
   border-radius: 2px;
 }

 .section-subtitle {
   font-size: 1.1rem;
   color: #7f8c8d;
   margin-top: 25px;
 }

 /* Projects Slider Container */
 .projects-slider-wrapper {
   position: relative;
   padding: 20px 0 10px;
 }

 .projects-swiper {
   padding: 0 60px;
 }

 /* Project Card */
 .project-card {
   position: relative;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   height: 400px;
   background: #ffffff;
 }

 .project-card:hover {
   transform: translateY(-15px);
   box-shadow: 0 25px 60px rgba(244, 208, 63, 0.25);
 }

 /* Project Image */
 .project-image-wrapper {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
 }

 .project-image {
   width: 100%;
   height: 100%;
   object-fit: contain;
   transition: all 0.6s ease;
 }

 .project-card:hover .project-image {
   transform: scale(1.15);
 }

 /* Overlay */
 /* .project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 50%, rgba(44,62,80,0.95) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  transition: all 0.5s ease;
} */

 .project-card:hover .project-overlay {
   background: linear-gradient(180deg, rgba(244, 208, 63, 0.1) 0%, rgba(244, 208, 63, 0.2) 30%, rgba(44, 62, 80, 0.98) 100%);
 }

 /* Project Info */
 .project-category {
   display: inline-block;
   background: linear-gradient(135deg, #f4d03f, #f39c12);
   color: #2c3e50;
   padding: 6px 16px;
   border-radius: 20px;
   font-size: 0.8rem;
   font-weight: 700;
   margin-bottom: 15px;
   text-transform: uppercase;
   letter-spacing: 1px;
 }

 .project-title {

   font-size: 1.8rem;
   font-weight: 700;
   color: #ffffff;
   margin-bottom: 10px;
   transition: all 0.3s ease;
 }

 .project-card:hover .project-title {
   color: #f4d03f;
 }

 .project-description {
   font-size: 0.95rem;
   color: #ecf0f1;
   line-height: 1.6;
   margin-bottom: 20px;
   opacity: 0;
   transform: translateY(20px);
   transition: all 0.5s ease;
 }

 .project-card:hover .project-description {
   opacity: 1;
   transform: translateY(0);
 }

 /* View Details Button */
 .view-details-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   color: #f4d03f;
   font-weight: 700;
   font-size: 1rem;
   text-decoration: none;
   opacity: 0;
   transform: translateX(-20px);
   transition: all 0.5s ease;
 }

 .project-card:hover .view-details-btn {
   opacity: 1;
   transform: translateX(0);
 }

 .view-details-btn:hover {
   color: #ffffff;
   text-decoration: none;
   gap: 15px;
 }

 .view-details-btn i {
   transition: transform 0.3s ease;
 }

 .view-details-btn:hover i {
   transform: translateX(5px);
 }

 /* Swiper Navigation */
 .swiper-button-next,
 .swiper-button-prev {
   width: 55px;
   height: 55px;
   background: #ffffff;
   border-radius: 50%;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   transition: all 0.3s ease;
 }

 .swiper-button-next::after,
 .swiper-button-prev::after {
   font-size: 1.3rem;
   color: #2c3e50;
   font-weight: bold;
 }

 .swiper-button-next:hover,
 .swiper-button-prev:hover {
   background: linear-gradient(135deg, #f4d03f, #f39c12);
   transform: scale(1.1);
 }

 .swiper-button-next:hover::after,
 .swiper-button-prev:hover::after {
   color: #2c3e50;
 }

 /* Swiper Pagination */
 .swiper-pagination {
   bottom: 20px !important;
 }

 .swiper-pagination-bullet {
   width: 12px;
   height: 12px;
   background: #d1d8dd;
   opacity: 1;
   transition: all 0.3s ease;
 }

 .swiper-pagination-bullet-active {
   background: linear-gradient(135deg, #f4d03f, #f39c12);
   width: 35px;
   border-radius: 6px;
 }

 /* CTA Button */
 .cta-section {
   text-align: center;
 }

 .cta-button {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   background: linear-gradient(135deg, #2c3e50, #34495e);
   color: #ffffff;
   padding: 18px 40px;
   border-radius: 50px;
   font-weight: 700;
   font-size: 1.1rem;
   text-decoration: none;
   transition: all 0.4s ease;
   box-shadow: 0 15px 40px rgba(44, 62, 80, 0.3);
   border: 2px solid transparent;
 }

 .cta-button:hover {
   background: linear-gradient(135deg, #f4d03f, #f39c12);
   color: #2c3e50;
   transform: translateY(-5px);
   box-shadow: 0 20px 50px rgba(244, 208, 63, 0.4);
   text-decoration: none;
 }

 .cta-button i {
   transition: transform 0.4s ease;
 }

 .cta-button:hover i {
   transform: translateX(5px);
 }

 /* Stats Badge */
 .stats-badge {
   position: absolute;
   top: 20px;
   right: 20px;
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
   padding: 10px 20px;
   border-radius: 50px;
   display: flex;
   align-items: center;
   gap: 8px;
   font-weight: 700;
   font-size: 0.85rem;
   color: #2c3e50;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   z-index: 5;
 }

 .stats-badge i {
   color: #f4d03f;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .projects-section {
     padding: 40px 0;
   }

   .section-title {
     font-size: 2rem !important;
   }

   .feature-title {
     font-size: 16px !important;

   }

   .feature-description {
     font-size: 14px !important;
   }

   .projects-swiper {
     padding: 0 20px;
   }

   .project-card {
     height: 350px;
   }

   .project-title {
     font-size: 1.4rem;
   }

   .swiper-button-next,
   .swiper-button-prev {
     width: 45px;
     height: 45px;
   }
 }

 /* Animations */
 @keyframes fadeInUp {
   from {
     opacity: 0;
     transform: translateY(40px);
   }

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

 .project-card {
   animation: fadeInUp 0.8s ease-out;
 }

 /* testimonial section css  */
 .testimonial-swiper {
   padding: 60px 0 100px;
 }

 .testimonial-slide {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
   border-radius: 30px;
   padding: 27px 40px;
   position: relative;
   overflow: hidden;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
   transition: all 0.4s ease;
 }

 .testimonial-slide::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -50%;
   width: 200%;
   height: 200%;
   background: linear-gradient(45deg, transparent, rgba(243, 156, 18, 0.1), transparent);
   transform: rotate(45deg);
   transition: all 0.6s ease;
 }

 .swiper-slide-active .testimonial-slide::before {
   top: -100%;
   right: 100%;
 }

 .quote-icon {
   position: absolute;
   top: 20px;
   left: 30px;
   font-size: 80px;
   color: #f39c12;
   opacity: 0.15;
   z-index: 1;
 }

 .client-img {
   position: relative;
   margin: 0 auto 30px;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   overflow: hidden;
   border: 5px solid #f1dd2e;
   box-shadow: 0 10px 30px rgba(243, 156, 18, 0.4);
   z-index: 2;
 }

 .testimonial-section {
   background-color: #ffffff;
   padding: 50px 0px;
 }

 .testimonial-section .swiper-wrapper {
   min-height: 580px;
 }

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

 .testimonial-text {
   position: relative;
   z-index: 2;
   font-size: 14px;
   line-height: 1.8;
   color: #333;
   font-style: italic;
   margin-bottom: 15px;
 }

 .client-info h4 {
   font-weight: 700;
   color: #2c3e50;
   margin-bottom: 5px;
   font-size: 16px;
 }

 .client-info p {
   color: #7f8c8d;
   font-size: 14px;
 }

 .rating {
   margin: 20px 0;
 }

 .rating i {
   color: #d2b90d;
   font-size: 20px;
   margin: 0 2px;
   animation: starPulse 2s infinite;
 }

 .rating i:nth-child(1) {
   animation-delay: 0s;
 }

 .rating i:nth-child(2) {
   animation-delay: 0.1s;
 }

 .rating i:nth-child(3) {
   animation-delay: 0.2s;
 }

 .rating i:nth-child(4) {
   animation-delay: 0.3s;
 }

 .rating i:nth-child(5) {
   animation-delay: 0.4s;
 }

 @keyframes starPulse {

   0%,
   100% {
     transform: scale(1);
   }

   50% {
     transform: scale(1.2);
   }
 }

 .swiper-pagination-bullet {
   width: 12px;
   height: 12px;
   background: #fff;
   opacity: 0.5;
 }

 .swiper-pagination-bullet-active {
   background: #f39c12;
   opacity: 1;
   width: 35px;
   border-radius: 10px;
 }

 .stats-badge {
   position: absolute;
   top: -30px;
   right: 30px;
   background: linear-gradient(135deg, #f39c12, #e67e22);
   color: white;
   padding: 15px 25px;
   border-radius: 50px;
   font-weight: 700;
   font-size: 14px;
   box-shadow: 0 10px 30px rgba(243, 156, 18, 0.5);
   z-index: 3;
   animation: float 3s ease-in-out infinite;
 }

 @keyframes float {

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

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

 .project-type {
   display: inline-block;
   background: linear-gradient(135deg, #667eea, #764ba2);
   color: white;
   padding: 8px 20px;
   border-radius: 20px;
   font-size: 13px;
   font-weight: 600;
   margin-top: 15px;
 }

 .swiper-button-next,
 .swiper-button-prev {
   background: white;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
 }

 .swiper-button-next::after,
 .swiper-button-prev::after {
   font-size: 20px;
   color: #2c3e50;
   font-weight: 900;
 }

 .section-header {
   text-align: center;
   margin-bottom: 60px;
   animation: fadeInDown 1s ease;
 }

 @keyframes fadeInDown {
   from {
     opacity: 0;
     transform: translateY(-50px);
   }

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

 .section-header h1 {
   font-size: 48px;
   font-weight: 800;
   color: #32475b;
   margin-bottom: 15px;
   text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);

 }

 .section-header p {
   font-size: 16px;
   color: rgb(59 59 59 / 90%);
 }

 .happy-clients {
   text-align: center;
   margin-top: 50px;
 }

 .happy-clients .badge-pill {
   font-size: 24px;
   padding: 20px 40px;
   background: white;
   color: #2c3e50;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
 }

 .happy-clients .badge-pill span {
   color: #f39c12;
   font-weight: 800;
 }

 /* form section css */
 .form-section {
   max-width: 1224px;
   margin: 0 auto;
   padding: 60px 0px;
 }

 .form-container {
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9));
   backdrop-filter: blur(10px);
   border-radius: 30px;
   padding: 30px 40px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
   position: relative;
   overflow: hidden;
 }

 .form-container::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -50%;
   width: 200%;
   height: 200%;
   background: linear-gradient(45deg, transparent, rgba(243, 156, 18, 0.05), transparent);
   transform: rotate(45deg);
   animation: shimmer 3s infinite;
 }

 @keyframes shimmer {

   0%,
   100% {
     transform: translateX(-100%) rotate(45deg);
   }

   50% {
     transform: translateX(100%) rotate(45deg);
   }
 }

 .form-header {
   text-align: center;
   margin-bottom: 50px;
   position: relative;
   z-index: 2;
 }

 .form-header h2 {
   font-size: 42px;
   font-weight: 800;
   color: #2c3e50;
   margin-bottom: 15px;
   line-height: 1.2;

 }

 .form-header h2 span {
   background: linear-gradient(135deg, #dac725, #534a00);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }

 .form-header p {
   font-size: 16px;
   color: #7f8c8d;
   margin-top: 10px;
 }



 @keyframes float {

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

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

 .form-content {
   position: relative;
   z-index: 2;
 }

 .form-row-custom {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin-bottom: 20px;
 }

 .form-group-custom {
   position: relative;
 }

 .form-group-custom label {
   font-size: 14px;
   font-weight: 600;
   color: #2c3e50;
   margin-bottom: 8px;
   display: block;
 }

 .form-group-custom label i {
   color: #f39c12;
   margin-right: 5px;
 }

 .form-control-custom {
   width: 100%;
   padding: 15px 20px;
   border: 2px solid #e0e0e0;
   border-radius: 12px;
   font-size: 15px;
   transition: all 0.3s ease;
   background: white;
 }

 .form-control-custom:focus {
   outline: none;
   border-color: #f39c12;
   box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.1);
   transform: translateY(-2px);
 }

 .form-control-custom::placeholder {
   color: #bdc3c7;
 }

 select.form-control-custom {
   cursor: pointer;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f39c12' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 15px center;
   padding-right: 45px;
 }

 textarea.form-control-custom {
   resize: vertical;
   min-height: 120px;
 }

 .radio-group {
   display: flex;
   gap: 20px;
   margin-top: 10px;
 }

 .radio-option {
   position: relative;
 }

 .radio-option input[type="radio"] {
   position: absolute;
   opacity: 0;
 }

 .radio-option label {
   display: flex;
   align-items: center;
   padding: 12px 20px;
   border: 2px solid #e0e0e0;
   border-radius: 10px;
   cursor: pointer;
   transition: all 0.3s ease;
   background: white;
   font-weight: 500;
 }

 .radio-option input[type="radio"]:checked+label {
   border-color: #f39c12;
   background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(230, 126, 34, 0.1));
   color: #f39c12;
 }

 .checkbox-group {
   margin-top: 10px;
 }

 .checkbox-option {
   position: relative;
   margin-bottom: 10px;
 }

 .checkbox-option input[type="checkbox"] {
   position: absolute;
   opacity: 0;
 }

 .checkbox-option label {
   display: flex;
   align-items: center;
   padding: 12px 15px;
   cursor: pointer;
   font-size: 14px;
   color: #2c3e50;
 }

 .checkbox-option label::before {
   content: '';
   width: 20px;
   height: 20px;
   border: 2px solid #e0e0e0;
   border-radius: 5px;
   margin-right: 10px;
   transition: all 0.3s ease;
   background: white;
 }

 .checkbox-option input[type="checkbox"]:checked+label::before {
   background: linear-gradient(135deg, #f39c12, #e67e22);
   border-color: #f39c12;
 }

 .checkbox-option input[type="checkbox"]:checked+label::after {
   content: '\f00c';
   font-family: 'Font Awesome 5 Free';
   font-weight: 900;
   position: absolute;
   left: 19px;
   top: 15px;
   color: white;
   font-size: 12px;
 }

 .submit-btn {
   width: 100%;
   padding: 18px;
   background: linear-gradient(135deg, #FFEB3B, #FFEB3B);
   color: #232323;
   border: none;
   border-radius: 15px;
   font-size: 18px;
   font-weight: 700;
   cursor: pointer;
   transition: all 0.3s ease;
   /* box-shadow: 0 10px 30px rgba(243, 156, 18, 0.4); */
   margin-top: 30px;
   text-transform: uppercase;
   letter-spacing: 1px;
 }

 .submit-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 15px 40px rgba(243, 156, 18, 0.5);
 }

 .submit-btn:active {
   transform: translateY(0);
 }

 .submit-btn i {
   margin-left: 10px;
 }

 .privacy-text {
   text-align: center;
   font-size: 13px;
   color: #7f8c8d;
   margin-top: 20px;
 }

 .privacy-text a {
   color: #f39c12;
   text-decoration: none;
   font-weight: 600;
 }

 .feature-badges {
   display: flex;
   justify-content: center;
   gap: 30px;
   margin-top: 40px;
   flex-wrap: wrap;
 }

 .badge-item {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   color: #2c3e50;
   font-weight: 600;
 }

 .badge-item i {
   color: #27ae60;
   font-size: 18px;
 }

 @media (max-width: 768px) {
   .form-container {
     padding: 40px 25px;
   }

   .form-header {
     margin-bottom: 30px;

   }

   section.cont-form-section .submit-btn {
     margin-top: 0px;

   }

   .form-header h2 {
     font-size: 32px;
   }

   .form-row-custom {
     grid-template-columns: 1fr;
     gap: 15px;
   }

   .radio-group {
     flex-direction: column;
     gap: 10px;
   }

   .feature-badges {
     gap: 15px;
   }
 }

 /* footer css */
 .footer {
   background-color: #2d2d2d;
   color: #ffffff;
   padding: 50px 0 20px;
 }

 .footer-container {
   max-width: 1440px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 2fr;
   gap: 40px;
   padding: 0 20px;
 }

 .footer-logo {
   color: #fff;
   font-size: 24px;
   font-weight: bold;
   margin-bottom: 20px;
 }

 .footer-logo span {
   color: #f4a261;
 }

 .footer-about {
   line-height: 1.6;
   color: #cccccc;
   margin-bottom: 20px;
 }

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

 .social-icons a {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   font-size: 18px;
   transition: transform 0.3s;
 }

 .social-icons a:hover {
   transform: translateY(-3px);
 }

 .facebook {
   background-color: #3b5998;
   color: white;
 }

 .instagram {
   background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
   color: white;
 }

 .twitter {
   background-color: #1da1f2;
   color: white;
 }

 .linkedin {
   background-color: #0077b5;
   color: white;
 }

 .footer-section h3 {
   color: #ffffff;
   margin-bottom: 20px;
   font-size: 18px;
 }

 .footer-section ul {
   list-style: none;
   margin-left: -36px;
 }

 .footer-section ul li {
   margin-bottom: 12px;
 }

 .footer-section ul li a {
   color: #cccccc;
   text-decoration: none;
   transition: color 0.3s;
 }

 .footer-section ul li a:hover {
   color: #f4a261;
 }

 .contact-info {
   display: flex;
   flex-direction: column;
   gap: 15px;
 }

 .contact-item {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   color: #cccccc;
 }

 .contact-item i {
   color: #f4a261;
   margin-top: 3px;
 }

 .map-container {
   width: 100%;
   height: 250px;
   border-radius: 8px;
   overflow: hidden;
   border: 2px solid #444;
 }

 .map-container iframe {
   width: 100%;
   height: 100%;
   border: none;
 }

 .footer-bottom {
   text-align: center;
   padding: 20px;
   margin-top: 40px;
   border-top: 1px solid #444;
   color: #999;
 }

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

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

 .tagline-wrapper h3 {
   color: #fff;
   font-size: 35px;
   font-weight: 600;
   margin-bottom: 40px;
   /* */
 }

 .floating-btns {
   position: fixed;
   right: 20px;
   bottom: 100px;
   /* adjust vertical position */
   display: flex;
   flex-direction: column;
   gap: 15px;
   z-index: 9999;
 }

 .floating-btns a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 55px;
   height: 55px;
   border-radius: 50%;
   color: #fff;
   font-size: 24px;
   text-decoration: none;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 }

 .whatsapp-btn {
   background-color: #25D366;
 }

 .call-btn {
   background-color: #FF9800;
 }

 @media (max-width: 1400px) {
   .tagline {
     /* */
     font-size: 44px;
     font-weight: 700;
     color: #ffffff;
     line-height: 1.3;
     margin-bottom: 1.5rem;
     letter-spacing: -0.5px;
   }

   .form-title {
     font-size: 24px;
   }

   .hero-section {
     position: relative;
     min-height: 70vh;
     display: flex;
     align-items: center;
     background: url('../images/big-banner.png') center/cover no-repeat;
     padding: 54px 0;
   }

   .stats-bar {
     margin-top: 1rem;
   }
 }

 /* top to bottom css */
 /* Scroll to Top Button Style */
 #scrollToTopBtn {
   position: fixed;
   bottom: 24px;
   right: 18px;
   z-index: 99;
   font-size: 22px;
   background-color: #00BCD4;
   color: white;
   border: none;
   outline: none;
   cursor: pointer;
   padding: 12px 20px;
   border-radius: 50%;
   transition: all 0.3s ease;
   display: none;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 }

 #scrollToTopBtn:hover {
   background-color: #555;
   transform: scale(1.1);
 }

 /* big project slider css */
 .projects-section .heading {
   text-align: center;
   margin-bottom: 40px;
 }

 .projects-section .heading h1 {
   font-size: 2.5rem;
   margin-bottom: 10px;
   color: #333;
 }

 .projects-section .heading p {
   font-size: 1.2rem;
   color: #666;
 }

 .projects-section .swiper {
   width: 100%;
   height: 500px;
   padding: 0 50px;
 }

 .projects-section .swiper-slide {
   background: #fff;
   border-radius: 15px;
   overflow: hidden;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
 }

 .projects-section .swiper-slide:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
 }

 .projects-section .slide-image {
   width: 100%;
   height: 100%;
   position: relative;
 }

 .projects-section .slide-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .projects-section .slide-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
   padding: 25px;
   color: white;
 }

 .projects-section .slide-overlay h3 {
   font-size: 1.5rem;
   margin-bottom: 8px;
 }

 .projects-section .slide-overlay p {
   font-size: 0.95rem;
   line-height: 1.5;
   opacity: 0.95;
 }

 .projects-section .swiper-button-next,
 .swiper-button-prev {
   color: white;
   background: rgba(0, 0, 0, 0.5);
   width: 45px;
   height: 45px;
   border-radius: 50%;
 }

 .swiper-button-next:after,
 .swiper-button-prev:after {
   font-size: 18px;
 }

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

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

 .swiper-pagination {
   bottom: 10px;
 }

 .projects-section .swiper-pagination-bullet {
   width: 10px;
   height: 10px;
   background: #333;
   opacity: 0.5;
 }

 .swiper-pagination-bullet-active {
   opacity: 1;
   background: #667eea;
 }

 @media (max-width: 1024px) {
   .projects-section .swiper {
     height: 400px;
   }
 }

 @media (max-width: 768px) {
   .projects-section .swiper {
     height: 350px;
     padding: 0 20px;
   }

   .projects-section .slide-image img {
     width: 100%;
     height: auto;
     object-fit: contain;
   }

   .projects-section .heading h1 {
     font-size: 1.8rem;
   }

   .projects-section .slide-overlay h3 {
     font-size: 1.2rem;
   }

   .slide-overlay p {
     font-size: 0.85rem;
   }

   .slide-overlay {
     padding: 15px;
   }
 }

 @media (max-width: 480px) {
   .projects-section .swiper {
     height: 270px;
   }
   .cta-button {
    padding: 12px 12px;
   
}
   .projects-section .slide-image img {
     width: 100%;
     height: auto;
     object-fit: contain;
   }
 }