    * {
  font-family: "Poppins", sans-serif;
}

.navbar {
  z-index: 1040;
  transition: background-color 220ms ease, box-shadow 220ms ease;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* Default transparent state */
.navbar.transparent-nav {
  background: transparent !important;
  box-shadow: none !important;
}

/* Scrolled state - higher specificity */
.navbar.transparent-nav.scrolled {
  background: rgba(0,0,0,0.95) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28) !important;
}

.navbar .nav-link,
.navbar .navbar-brand img,
.navbar .btn {
    color: #fff !important;
}

.video-section {
    position: relative;
    z-index: 0;
}

/* gradient shadow at top */
.video-top-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px; 
   /* adjust as needed */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.55),   /* strong top */
        rgba(0, 0, 0, 0.40),   /* fade */
        rgba(0, 0, 0, 0)       /* no shadow */
    );
    z-index: 1;
    pointer-events: none;
}
.video-banner {
    width: 100%;
    height: 100vh;  /* Full screen hero video */
    object-fit: cover;
      z-index: 0;
}

.bggradient{
    background: linear-gradient(135deg, #29a0d3, #4B0082);
}

    
    .greadient,.navbar .nav-link.active {
    background: linear-gradient(135deg, #29a0d3, #4B0082);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600; /* optional */
}

.social-bar {
  position: fixed;       /* Fix it on screen */
  top: 50%;              /* Center vertically */
  right: 0;              /* Attach to right */
  transform: translateY(-50%); /* Perfect vertical centering */
  display: flex;
  flex-direction: column;
  gap: 10px;             /* Space between icons */
  background: linear-gradient(180deg, #25b3f0, #4B0082);
  padding: 10px 5px;
  border-radius: 25px 0 0 25px; /* Rounded left corners */
  z-index: 1000;         /* Stay above content */
}

.social-bar a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  color: white;
  font-weight: bold;
  text-decoration: none;
  font-size: 18px;
}

.social-bar a:hover {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

 /* hide description by default */
  .desc { opacity: 0; transition: opacity .4s ease; }

  /* hide title when hovering */
  .service-card:hover .title { opacity: 0; }

  /* show description when hovering */
  .service-card:hover .desc { opacity: 1; }

  /* Testimonials Section Styles */
  .testimonials-section {
    background-color: #000;
    padding: 80px 0;
  }




.testimonial-card {
    --border-angle: 0deg;
    border: 1px solid #333;
    background: linear-gradient(to bottom, #000 0%, #000 20%, #fff 100%);
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    height: 100%;
    position: relative;
    overflow: hidden;

    /* no border here */
    transition: transform 0.3s ease;
}

/* Animated border layer */
.testimonial-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 4px; /* border thickness */

    background: conic-gradient(
        from var(--border-angle),
        transparent 65%,
        #29a0d3,
        #8B5FBF,
        transparent
    );

    /* mask inner area */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    pointer-events: none;
}

/* Hover state */
.testimonial-card:hover::before {
    opacity: 1;
    animation: border-rotate 2.5s linear infinite;
}



/* Content above border */
.testimonial-card * {
    position: relative;
    z-index: 1;
}

@keyframes border-rotate {
    from { --border-angle: 0deg; }
    to   { --border-angle: 360deg; }
}

@property --border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.testimonial-text {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 25px;
    color: #c5c5c5;
    position: relative;
    z-index: 1;
}

.testimonial-author {
    background: linear-gradient(135deg, #29a0d3, #8B5FBF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 23px;
    font-weight: 600;
    margin-top: 15px;
    position: relative;
    z-index: 1;
}

  /* animation */

 .slider-section {
            background: #000;
            padding: 80px 0;
            overflow: hidden;
            position: relative;
        }

        .background-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }

        .section-title,
        .section-subtitle,
        .slider-container {
            position: relative;
            z-index: 1;
        }

        .section-title {
            text-align: center;
            color: #fff;
            font-size: 24px;
            margin-bottom: 10px;
        }

        .section-subtitle {
            text-align: center;
            color: #fff;
            font-size: 48px;
            font-weight: bold;
            margin-bottom: 60px;
        }

        .slider-container {
            position: relative;
            width: 100%;
            overflow: hidden;
            margin: 30px 0;
        }

        .slider-track {
            display: flex;
            gap: 30px;
            width: fit-content;
        }

        .slider-box {
            width: 200px;
            height: 120px;
            
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
          
            padding: 20px;
        }

            .about-slider-box {
       
            
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
          
            padding: 20px;
        }

        .slider-box img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        /* Upper slider - moves left */
        .slider-left .slider-track {
            animation: slideLeft 20s linear infinite;
        }

        /* Lower slider - moves right */
        .slider-right .slider-track {
            animation: slideRight 20s linear infinite;
        }

        @keyframes slideLeft {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(calc(-200px * 6 - 30px * 6));
            }
        }

        @keyframes slideRight {
            0% {
                transform: translateX(calc(-200px * 6 - 30px * 6));
            }
            100% {
                transform: translateX(0);
            }
        }

        /* Pause on hover */
        .slider-container:hover .slider-track {
            animation-play-state: paused;
        }


        /* Footer Styles */


       .footer-gradient {
            background: linear-gradient(90deg, #2b7a9e 0%, #3d4a8f 40%, #5e3a82 70%, #7b2d7e 100%);
            position: relative;
        }
        
        .footer-gradient::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('../img/footer-bg.png');
            background-size: cover;
            background-position: center;
            opacity: 1;
        }
        
        .social-icon {
            width: 35px;
            height: 35px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            color: white;
            text-decoration: none;
            font-size: 18px;
            transition: all 0.3s;
        }
        
        .social-icon:hover {
            background: rgba(255, 255, 255, 0.3);
            color: white;
        }


        .gradient-text {
            background: linear-gradient(135deg, #29a0d3, #8B5FBF);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }





