:root {
     --primary-color: #eb0000;
     --secondary-color: #008751;
     --dark-bg: #111111;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     color: #333;
     overflow-x: hidden;
 }

 /* --- Fullscreen Intro Hero Section with Layered Backgrounds --- */
 .intro-hero {
     position: relative;
     min-height: 100vh;
     width: 100vw;
     background: linear-gradient(rgba(10, 10, 10, 0.75), rgba(10, 10, 10, 0.75)),
         url('https://srisaichandana.co.in/wp-content/uploads/revslider/the7-agency/art-poly-slider1.png'),
         url('../images/srivijlabs.png') no-repeat center center/cover;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: #fff;
     overflow: hidden;
     padding-bottom: 70px;
 }

 .intro-animation-wrapper {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     z-index: 10;
     padding: 20px;
     margin: auto;
 }

 .intro-logo {
     font-size: 3rem;
     color: #ffffff;
     background: #ffffff;
     width: 195px;
     height: 195px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 0 40px rgba(255, 255, 255, 0.4);
     animation: dropLogo 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
 }

 @keyframes dropLogo {
     0% {
         transform: translateY(-100vh) scale(0.5);
         opacity: 0;
     }

     60% {
         transform: translateY(15px) scale(1.05);
         opacity: 1;
     }

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

 .intro-title-box {
     opacity: 0;
     transform: translateY(20px);
     animation: revealText 1s ease 1.2s forwards;
     margin-top: 25px;
 }

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

 .intro-title-box h1 {
     font-size: clamp(2rem, 5vw, 3.2rem);
     font-weight: 800;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     margin-bottom: 12px;
     text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
     color: #ffffff;
 }

 .intro-title-box p {
     font-size: clamp(1rem, 2.5vw, 1.35rem);
     font-weight: 400;
     letter-spacing: 0.5px;
     color: #f8f9fa;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
 }

 /* First-time opening animation for the orange badge text box */
 .intro-badge-animated {
     display: inline-block;
     animation: introTextPulse 1.5s cubic-bezier(0.25, 1, 0.5, 1) 1.5s both;
 }

 @keyframes introTextPulse {
     0% {
         transform: scale(0.8);
         opacity: 0;
     }

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

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

 /* Chemical structure floating effect */
 .chemical-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 2;
     pointer-events: none;
     opacity: 0;
     animation: fadeInStructures 2s ease 2.5s forwards;
 }

 @keyframes fadeInStructures {
     to {
         opacity: 1;
     }
 }

 .chem-structure {
     position: absolute;
     opacity: 0.25;
     filter: blur(3px);
     animation: floatChem 20s linear infinite alternate;
 }

 .chem-structure img {
     width: 200px;
     height: auto;
 }

 .chem-1 {
     top: 10%;
     left: 5%;
     animation-duration: 25s;
 }

 .chem-2 {
     top: 55%;
     left: 8%;
     animation-duration: 32s;
     animation-delay: -4s;
 }

 .chem-3 {
     top: 12%;
     right: 5%;
     animation-duration: 24s;
     animation-delay: -2s;
 }

 .chem-4 {
     top: 60%;
     right: 8%;
     animation-duration: 28s;
     animation-delay: -6s;
 }

 @keyframes floatChem {
     0% {
         transform: translate(0, 0) rotate(0deg) scale(1);
     }

     50% {
         transform: translate(15px, -15px) rotate(6deg) scale(1.03);
     }

     100% {
         transform: translate(-15px, 15px) rotate(-6deg) scale(0.97);
     }
 }

 .scroll-down-arrow {
     position: absolute;
     bottom: 75px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 15;
     color: #fff;
     font-size: 1.8rem;
     text-decoration: none;
     animation: bounce 2s infinite;
     transition: color 0.3s;
 }

 .scroll-down-arrow:hover {
     color: var(--secondary-color);
 }

 @keyframes bounce {

     0%,
     20%,
     50%,
     80%,
     100% {
         transform: translate(-50%, 0);
     }

     40% {
         transform: translate(-50%, -10px);
     }

     60% {
         transform: translate(-50%, -5px);
     }
 }

 .hero-bottom-bar {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 60px;
     background: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(8px);
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 25px;
     z-index: 20;
     border-top: 1px solid rgba(255, 255, 255, 0.15);
 }

 .menu-toggler-btn {
     background: none;
     border: none;
     color: #fff;
     font-size: 1.1rem;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 /* --- Sticky Navigation --- */
 .navbar {
     background-color: #ffffff;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
     transition: all 0.3s ease;
 }

 .navbar-brand span {
     font-weight: 700;
     color: var(--primary-color);
     font-size: 1.1rem;
     letter-spacing: 0.5px;
 }

 .nav-link {
     font-weight: 600;
     color: #444 !important;
     margin-left: 15px;
     transition: color 0.3s;
 }

 .nav-link:hover,
 .nav-link.active {
     color: var(--primary-color) !important;
 }

 /* --- Sections & Cards --- */
 section {
     padding: 90px 0;
 }

 .section-title {
     position: relative;
     margin-bottom: 50px;
     font-weight: 700;
     text-align: center;
     color: #222;
 }

 .section-title::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 70px;
     height: 3px;
     background-color: var(--primary-color);
     border-radius: 2px;
 }

 .about-img {
     border-radius: 12px;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
     transition: transform 0.4s ease;
 }

 .about-img:hover {
     transform: scale(1.02);
 }

 .feature-card {
     border: none;
     border-radius: 12px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
     height: 100%;
     background: #fff;
 }

 .feature-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
 }

 .feature-icon {
     font-size: 2.5rem;
     color: var(--primary-color);
     margin-bottom: 20px;
 }

 /* --- Homepage Interactive Slider Enhancements --- */
 .home-slider-container {
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
 }

 .carousel-item {
     height: 450px;
     background-size: cover;
     background-position: center;
 }

 .carousel-caption-custom {
     background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 30px;
     color: #fff;
     text-align: left;
 }

 /* --- Achievement Counter Cards Section (Single Row with Auto-Fit Grid) --- */
 .achievement-container {
     display: grid;
     grid-template-columns: repeat(7, minmax(0, 1fr));
     gap: 15px;
     width: 100%;
 }

 @media (max-width: 1400px) {
     .achievement-container {
         grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 }

 @media (max-width: 768px) {
     .achievement-container {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 }

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

 .achievement-card {
     background: #ffffff;
     border: 1px solid #eaeaea;
     border-top: none;
     border-radius: 6px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
     position: relative;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 20px 10px;
     text-align: center;
 }

 .achievement-card::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background-color: var(--primary-color);
 }

 .achievement-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
 }

 .achievement-icon {
     font-size: 2rem;
     color: var(--primary-color);
     margin-bottom: 10px;
     height: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .achievement-title {
     font-size: 0.78rem;
     font-weight: 600;
     color: #555;
     margin-bottom: 10px;
     min-height: 38px;
     display: flex;
     align-items: center;
     justify-content: center;
     line-height: 1.2;
 }

 .achievement-number {
     font-size: 1.5rem;
     font-weight: 800;
     color: #1a365d;
     letter-spacing: -0.5px;
 }

 /* --- Footer Styles Matching Reference Screenshot --- */
 footer {
     background: linear-gradient(135deg, #1b0c18, #36112a);
     color: #ffffff;
     padding: 60px 0 40px 0;
     text-align: center;
     position: relative;
 }

 footer .footer-logo img {
     width: 90px;
     height: 90px;
     border-radius: 50%;
     background: #ffffff;
     padding: 8px;
     box-shadow: 0 0 20px rgba(235, 0, 0, 0.3);
     margin-bottom: 20px;
 }

 footer h5 {
     color: #ffffff;
     font-weight: 700;
     letter-spacing: 1px;
     text-transform: uppercase;
     font-size: 1.4rem;
     margin-bottom: 10px;
 }

 footer p {
     color: #cccccc !important;
     font-size: 0.95rem;
     margin-bottom: 8px;
 }

 .footer-divider {
     width: 120px;
     height: 3px;
     background-color: var(--primary-color);
     margin: 25px auto;
     border-radius: 2px;
 }

 /* --- Stylish Theme-Matched Scroll to Top Button ---. */
 #scrollTopBtn {
     position: fixed;
     bottom: 30px;
     right: 30px;
     z-index: 99;
     width: 48px;
     height: 48px;
     background: var(--primary-color);
     color: white;
     border: none;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     box-shadow: 0 4px 15px rgba(235, 0, 0, 0.4);
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
     cursor: pointer;
 }

 #scrollTopBtn.show {
     opacity: 1;
     visibility: visible;
 }

 #scrollTopBtn:hover {
     background: #c50000;
     transform: translateY(-4px);
     box-shadow: 0 6px 20px rgba(235, 0, 0, 0.6);
 }

 /* Why Chose Us */
 /* --- Why Choose Us Section Styles --- */
 .why-choose-section {
     background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
     position: relative;
 }

 .why-card {
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.05);
     border-radius: 16px;
     padding: 35px 25px;
     height: 100%;
     position: relative;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .why-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
 }

 .why-icon-box {
     font-size: 2.5rem;
     margin-bottom: 20px;
     width: 70px;
     height: 70px;
     background: rgba(0, 0, 0, 0.02);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.3s ease, transform 0.3s ease;
 }

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

 .why-card-line {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 4px;
     border-bottom-left-radius: 16px;
     border-bottom-right-radius: 16px;
 }

 /* --- Leadership Square Photo Box Style --- */
 .leadership-photo-wrapper {
     width: 100%;
     max-width: 240px;
     aspect-ratio: 1 / 1;
     overflow: hidden;
     border-radius: 12px;
     border: 3px solid #f1f1f1;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
     background-color: #f8f9fa;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .leadership-photo-wrapper img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* Menubar dropdown */
 /* --- Navbar Dropdown Hover Effect on Desktop --- */
 @media (min-width: 992px) {
     .navbar .dropdown:hover .dropdown-menu {
         display: block;
         margin-top: 0;
     }
 }

 .dropdown-menu {
     border-radius: 8px;
     animation: fadeInDropdown 0.3s ease;
 }

 .dropdown-item:hover {
     background-color: #f8f9fa;
     color: var(--primary-color) !important;
 }

 @keyframes fadeInDropdown {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

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