:root {
       --bg-dark: #0B1F3A;
       --purple-main: #4b94c2;
       --nav-bg: #112847;
       ;
       /* Using your specific blue-purple tone */
       --text-white: #ffffff;
       --nav-height: 80px;
       --nav-shrink-height: 65px;
       --body-text: #4B5563;
       --white: #ffffff;


       --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
   }

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       background-color: #fafaf9;
       /* Added height for scroll testing */
       font-family: 'Inter', sans-serif;
   }

   /* --- Navbar Base State --- */
   .navbar {
       position: fixed;
       top: 0;
       width: 100%;
       height: var(--nav-height);
       background-color: var(--nav-bg);
       display: flex;
       align-items: center;
       z-index: 1000;
       transition: var(--transition-smooth);
   }

   /* Scrolled State: The "Slide & Stick" look */
   .navbar.scrolled {
       height: var(--nav-shrink-height);
       background-color: rgba(10, 12, 18, 0.747);
       backdrop-filter: blur(10px);
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
   }

   .nav-container {
       width: 90%;
       max-width: 1400px;
       margin: 0 auto;
       display: flex;
       align-items: center;
       justify-content: space-between;
       position: relative;
   }

   /* --- Brand Styles --- */
   .brand-group {
       display: flex;
       align-items: center;
       overflow: hidden;
       text-decoration: none;
       z-index: 1100;
   }

   .nav-logo {
       height: 60px;
       margin-right: 10px;
       transition: transform 0.4s ease;
   }

   .brand-text {
       font-size: 1.8rem;
       font-weight: 700;
       display: flex;
       gap: 2px;
       transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
   }

   /* Disappearing Animation: Move down and fade */
   .brand-text.hidden {
       transform: translateY(100%);
       opacity: 0;
       pointer-events: none;
   }

   .text-white {
       color: var(--text-white);
   }

   .text-purple {
       color: var(--purple-main);
   }

   /* --- Desktop Nav Links --- */
   .nav-links {
       display: flex;
       list-style: none;
       gap: 25px;
       align-items: center;
       transition: var(--transition-smooth);
   }

   .nav-links a {
       text-decoration: none;
       color: #ccc;
       font-size: 1rem;
       font-weight: 500;
       position: relative;
       padding: 5px 0;
       transition: color 0.3s ease;
   }

   .nav-links a:hover {
       color: var(--text-white);
   }

   .hover-underline::after {
       content: '';
       position: absolute;
       width: 0;
       height: 2px;
       bottom: 0;
       left: 0;
       background-color: var(--purple-main);
       transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   }

   .hover-underline:hover::after {
       width: 100%;
   }

   /* --- Client Login Button --- */
   .nav-actions {
       display: flex;
       align-items: center;
   }

   .client-login {
       text-decoration: none;
       color: var(--text-white);
       padding: 10px 24px;
       border: 1.5px solid #E5E7EB;
       background: rgba(59, 147, 188, 0.1);
       border-radius: 4px;
       font-weight: 600;
       transition: all 0.3s ease;
       white-space: nowrap;
   }

   .client-login:hover {
       background: #e5e7eb9d;
       box-shadow: 0 0 15px rgba(59, 147, 188, 0.4);
   }

   /* --- Dropdown Styles --- */
   .dropdown {
       position: relative;
   }

   .dropdown-content {
       position: absolute;
       top: 100%;
       left: 0;
       background: #1a1c24;
       min-width: 200px;
       display: none;
       list-style: none;
       border-radius: 4px;
       padding: 10px 0;
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
   }

   .dropdown:hover .dropdown-content {
       display: block;
   }

   .dropdown-content li a {
       padding: 10px 20px;
       display: block;
       color: #ccc;
   }

   .dropdown-content li a:hover {
       background: rgba(255, 255, 255, 0.05);
       color: var(--text-white);
   }

   /* --- Mobile Menu Toggle --- */
   .menu-toggle {
       display: none;
       flex-direction: column;
       cursor: pointer;
       gap: 6px;
       z-index: 1100;
   }

   .menu-toggle span {
       width: 28px;
       height: 3px;
       background-color: var(--text-white);
       transition: 0.3s ease;
   }

/* --- Desktop Styles (Add these) --- */
.mobile-only-login {
    display: none; /* Hide on desktop */
}

/* --- Existing CSS Fixes --- */
.nav-links.active {
    right: 0 !important;
}

/* --- Updated Responsive Queries --- */
@media (max-width: 900px) {
    .menu-toggle {
        display: flex;
    }

    .nav-actions {
        display: none; /* Hide the desktop-style floating button */
    }

    .mobile-only-login {
        display: block; /* Show inside the mobile menu list */
        margin-top: 20px;
        width: 100%;
    }

    .client-login-mobile {
        display: block;
        padding: 12px 24px;
        border: 1.5px solid var(--purple-main);
        color: white;
        border-radius: 4px;
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        background: rgba(106, 27, 154, 0.1);
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 75%;
        background-color: #111; /* Use a solid dark color */
        flex-direction: column;
        justify-content: center;
        padding: 40px;
        transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
        z-index: 1050;
    }

    /* REMOVE the .nav-links::after block entirely from your old code */
    .nav-links::after {
        display: none !important;
    }

    .nav-links li {
        width: 100%;
        text-align: left;
    }

    /* Mobile Dropdown Fix */
    .dropdown-content {
        position: static;
        display: none; /* Keep hidden until clicked on mobile or just show always */
        background: transparent;
        padding-left: 20px;
        box-shadow: none;
    }
    
    .dropdown:hover .dropdown-content {
        display: block;
    }
}



   /* --- Responsive Queries --- */
   @media (max-width: 1024px) {
       .nav-links {
           gap: 15px;
       }

       .brand-text {
           font-size: 1.2rem;
       }
   }

   @media (max-width: 900px) {
       .menu-toggle {
           display: flex;
       }

       .nav-actions {
           display: none;
       }

       /* Hide desktop login */

       .nav-links {
           position: fixed;
           top: 0;
           right: -100%;
           height: 100vh;
           width: 75%;
           background-color: var(--bg-dark);
           flex-direction: column;
           justify-content: center;
           padding: 40px;
           transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
           box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
       }

       .nav-links.active {
           right: 0;
       }

       .nav-links li {
           width: 100%;
           text-align: left;
       }

       .nav-links a {
           font-size: 1.2rem;
           display: block;
           width: 100%;
       }

       /* Mobile Dropdown */
       .dropdown-content {
           position: static;
           display: block;
           background: transparent;
           padding-left: 20px;
           box-shadow: none;
       }

       /* Show Login inside Mobile Menu */
       .nav-links::after {
           content: "Client Login";
           margin-top: 20px;
           padding: 12px 24px;
           border: 1.5px solid var(--purple-main);
           color: white;
           border-radius: 4px;
           text-align: center;
           width: 100%;
           display: block;
           cursor: pointer;
       }
   }

   /* Hamburger Animation */
   .menu-toggle.active span:nth-child(1) {
       transform: translateY(9px) rotate(45deg);
   }

   .menu-toggle.active span:nth-child(2) {
       opacity: 0;
   }

   .menu-toggle.active span:nth-child(3) {
       transform: translateY(-9px) rotate(-45deg);
   }

   .hero-section {
       height: 100vh;
       width: 100%;
       background-image: linear-gradient(to right, rgba(0, 0, 0, 0.758), rgba(0, 0, 0, 0.116)), url('../img/bgnew.png ');
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
       background-attachment: fixed;

       /* Change to left alignment */
       display: flex;
       align-items: center;
       /* Vertical center */
       justify-content: flex-start;
       /* Horizontal left */
   }

   .hero-content {
       max-width: 1200px;
       width: 90%;
       margin-left: 10%;
       /* Proper spacing from left edge */
       text-align: left;
       /* Text align left */
       color: white;
   }

   .main-title {
       color: white;
       font-size: clamp(2rem, 5vw, 4rem);
       font-weight: 700;
       line-height: 1.2;
       margin-bottom: 20px;

   }

   .purple-text {
       color: var(--purple-main);
       /* High-contrast Purple */
       font-weight: 800;
       font-style: italic;
   }

   .hero-subtext {
       font-size: 1.2rem;
       color: rgba(255, 255, 255, 0.8);
       margin-bottom: 35px;
       max-width: 500px;
   }

   /* Typing Cursor Animation */
   .cursor {
       font-weight: 100;
       color: white;
       animation: blink 0.7s infinite;
   }

   @keyframes blink {

       from,
       to {
           opacity: 1;
       }

       50% {
           opacity: 0;
       }
   }

   @media (max-width: 768px) {
       .hero-content {
           margin-left: 5%;
       }

       .hero-section {
           background-attachment: scroll;
       }
   }

   .trust-section {
       padding: 100px 0;
       background-color: #fafaf9;
       /* Matches your light body background */
       overflow: hidden;
       /* Prevents horizontal scroll during animation */
   }

   .split-container {
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
       align-items: center;
       gap: 60px;
       padding: 0 5%;
   }

   /* Video Block Styling */
   .video-block {
       flex: 1;
       max-width: 450px;
       /* Vertical aspect ratio */
   }

   .video-wrapper {
       position: relative;
       border-radius: 20px;
       overflow: hidden;
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
   }

   .vertical-vid {
       width: 100%;
       display: block;
       /* aspect-ratio: 9/16; */
       height: 600px;
       object-fit: cover;
   }

   /* Content Block Styling */
   .content-block {
       flex: 1.2;
   }

   .sub-title {
       color: var(--body);
       /* Your blue-purple theme */
       text-transform: uppercase;
       letter-spacing: 2px;
       font-weight: 700;
       margin-bottom: 10px;
   }

   .main-title {
       font-size: 3rem;
       color: var(--nav-bg);

       line-height: 1.2;
       margin-bottom: 25px;
   }

   .main-title .accent {
       color: var(--purple-main);
   }

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

   .credentials-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 20px;
   }

   .stat-item h3 {
       font-size: 2rem;
       color: #0a0c12;
   }

   .stat-item p {
       font-size: 0.9rem;
       color: #777;
   }

   /* --- ANIMATION STATES --- */

   .scroll-reveal-left {
       opacity: 0;
       transform: translateX(-100px);
       transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
   }

   .scroll-reveal-right {
       opacity: 0;
       transform: translateX(100px);
       transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
   }

   /* This class will be added via JS */
   .reveal-active {
       opacity: 1 !important;
       transform: translateX(0) !important;
   }

   /* Responsive */
   @media (max-width: 900px) {
       .split-container {
           flex-direction: column;
           text-align: center;
       }

       .video-block {
           max-width: 300px;
           order: 2;
       }

       .content-block {
           order: 1;
       }

       .credentials-grid {
           justify-items: center;
       }
   }








   .offer-section {
       padding: 80px 0;
       background-color: #ffffff;
       overflow: hidden;
   }

   .offer-container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
   }

   .offer-header {
       text-align: center;
       margin-bottom: 50px;
   }

   .offer-title {
       font-size: 2.8rem;
       font-weight: 800;
       color: var(--nav-bg);
   }

   .purple-text {
       color: var(--purple-main);
   }

   /* Grid logic for 300x250 boxes */
   .offer-grid {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 30px;
   }

   .offer-box {
       width: 300px;
       /* Fixed width as requested */
       height: 250px;
       /* Fixed height as requested */
       background: #E5E7EB;
       border-radius: 15px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       transition: all 0.4s ease;
       border: 1px solid #E5E7EB;
   }

   /* Perfect Square Image Container */
   .img-square {
       width: 80px;
       height: 80px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 20px;
   }

   .img-square img {
       max-width: 100%;
       max-height: 100%;
       object-fit: contain;
       transition: transform 0.3s ease;
   }

   .offer-box h3 {
       font-size: 1.25rem;
       color: #0B1F3A;
       font-weight: 700;
   }

   .offer-box:hover {
       transform: translateY(-10px);
       box-shadow: 0 15px 35px rgba(168, 85, 247, 0.15);
       border-color: rgb(63, 3, 3);
   }

   .offer-box:hover img {
       transform: scale(1.15);
   }

   /* --- Animation States --- */
   .reveal-left {
       opacity: 0;
       transform: translateX(-120px);
       transition: all 0.9s cubic-bezier(0.2, 1, 0.3, 1);
   }

   .reveal-right {
       opacity: 0;
       transform: translateX(120px);
       transition: all 0.9s cubic-bezier(0.2, 1, 0.3, 1);
   }

   .reveal-active {
       opacity: 1;
       transform: translateX(0);
   }

   /* Responsive */
   @media (max-width: 768px) {
       .offer-box {
           width: 100%;
           /* Fill width on small screens */
           max-width: 350px;
       }
   }



   @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

   .slogan-container {
       padding: 60px 20px;
       text-align: center;
       background-color: transparent;
       /* Or match your section bg */
   }

   .premium-slogan {
       font-family: 'Inter', sans-serif;
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .top-line {
       font-size: clamp(1.8rem, 5vw, 3.5rem);
       font-weight: 300;
       /* Light weight for elegance */
       color: var(--nav-bg);
       text-transform: uppercase;
       letter-spacing: -1px;
   }

   .top-line .accent {
       font-weight: 800;
       /* Bold weight for the "Future" */
       color: var(--purple-main)
           /* Your brand blue/purple */
   }

   .hindi-line {
       font-size: clamp(1.2rem, 3vw, 2.2rem);
       font-weight: 500;
       color: #64748b;
       /* Subtle gray for the sub-slogan */
       font-style: italic;
       position: relative;
       display: inline-block;
   }

   .hindi-line .secure {
       color: var(--purple-main);
       /* Purple to highlight 'Secure' */
       font-weight: 700;
       font-style: normal;
       background: linear-gradient(120deg, rgba(168, 85, 247, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
       padding: 0 5px;
   }

   /* Responsive adjustment */
   @media (max-width: 600px) {
       .premium-slogan {
           gap: 5px;
       }
   }




   .logo-slider-section {
       padding: 60px 0;
       background-color: #E5E7EB;
       overflow: hidden;
   }

   .slider-container {
       /* Large padding as requested for desktop */
       padding: 0 300px;
       margin: 0 auto;
       overflow: hidden;
       position: relative;
   }

   /* Gradient Fades for the edges (makes it look premium) */
   .slider-container::before,
   .slider-container::after {
       content: "";
       height: 100%;
       position: absolute;
       width: 150px;
       z-index: 2;
   }

   .slider-container::before {
       left: 00px;
       /* Aligned with your padding */
       background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
   }

   .slider-container::after {
       right: 00px;
       /* Aligned with your padding */
       background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
   }

   .logo-track {
       display: flex;
       width: calc(250px * 10);
       /* Width of 1 slide * total slides */
       animation: scrollInfinite 25s linear infinite;
   }

   .logo-slide {
       width: 250px;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 0 40px;
   }

   .logo-slide img {
       width: 100%;
       max-width: 150px;
       filter: grayscale(100%);
       /* Makes all logos uniform gray */
       opacity: 0.6;
       transition: 0.3s ease;
   }

   .logo-slide img:hover {
       filter: grayscale(0%);
       opacity: 1;
   }

   /* --- Infinite Scroll Animation --- */
   @keyframes scrollInfinite {
       0% {
           transform: translateX(0);
       }

       100% {
           transform: translateX(calc(-250px * 5));
       }

       /* Move exactly half the track width */
   }

   /* --- Responsive Behavior --- */
   @media (max-width: 1200px) {
       .slider-container {
           padding: 0 100px;
       }

       .slider-container::before {
           left: 100px;
       }

       .slider-container::after {
           right: 100px;
       }
   }

   @media (max-width: 768px) {
       .slider-container {
           padding: 0 20px;
       }

       .slider-container::before,
       .slider-container::after {
           display: none;
       }
   }



   :root {
       --footer-bg: #0a0c12;
       --footer-text: #94a3b8;
       --accent-purple: #a855f7;
   }

   .main-footer {
       background-color: var(--bg-dark);
       color: #ffffff;
       padding: 80px 0 20px 0;
       font-family: 'Inter', sans-serif;
   }

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

   .footer-logo {
       height: 50px;
       margin-bottom: 20px;
   }

   .footer-about-text {
       color: var(--footer-text);
       line-height: 1.6;
       font-size: 0.95rem;
   }

   .footer-col h3 {
       font-size: 1.2rem;
       margin-bottom: 25px;
       position: relative;
       padding-bottom: 10px;
   }

   .footer-col h3::after {
       content: '';
       position: absolute;
       left: 0;
       bottom: 0;
       width: 30px;
       height: 2px;
       background-color: var(--accent-purple);
   }

   .footer-links {
       list-style: none;
   }

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

   .footer-links a {
       color: var(--footer-text);
       text-decoration: none;
       font-size: 0.95rem;
       position: relative;
       padding-bottom: 2px;
       transition: color 0.3s;
   }

   .footer-links a:hover {
       color: #ffffff;
   }

   /* Hover Underline Animation */
   .hover-underline::after {
       content: '';
       position: absolute;
       width: 0;
       height: 1px;
       bottom: 0;
       left: 0;
       background-color: var(--accent-purple);
       transition: width 0.3s ease;
   }

   .hover-underline:hover::after {
       width: 100%;
   }

   .contact-info {
       color: var(--footer-text);
       font-size: 0.9rem;
       margin-bottom: 10px;
   }

   /* Bottom Bar Styling */
   .footer-bottom {
       margin-top: 60px;
       padding-top: 30px;
       border-top: 1px solid rgba(255, 255, 255, 0.05);
       text-align: center;
   }

   .bottom-container {
       max-width: 1000px;
       margin: 0 auto;
       padding: 0 20px;
   }

   .disclaimer {
       font-size: 0.8rem;
       color: #64748b;
       line-height: 1.6;
       margin-bottom: 20px;
   }

   .copyright {
       font-size: 0.85rem;
       color: var(--footer-text);
   }

   /* Responsive Design */
   @media (max-width: 1024px) {
       .footer-container {
           grid-template-columns: repeat(2, 1fr);
       }
   }

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

       .footer-col h3::after {
           left: 50%;
           transform: translateX(-50%);
       }

       .footer-logo {
           margin: 0 auto 20px auto;
       }
   }




   /* Styling for the t&c link */
.footer-legal-links {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.tc-btn {
    color: var(--footer-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 6px 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.02);
}

.tc-btn:hover {
    color: #ffffff;
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(111, 66, 193, 0.2);
}

/* Ensure footer-bottom is properly centered */
.footer-bottom {
    margin-top: 60px;
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}
   /* ABOUT START */



   .statement-section {
       padding: 100px 0;
       background-color: #ffffff;
       overflow: hidden;
   }

   .statement-container {
       max-width: 1200px;
       margin: 0 auto;
       display: grid;
       /* 60% text space, 40% image space */
       grid-template-columns: 1.2fr 0.8fr;
       gap: 60px;
       align-items: center;
       padding: 0 20px;
   }

   /* Left Content Alignment */
   .left-side {
       display: flex;
       align-items: center;
       justify-content: flex-start;
   }

   .vertical-line {
       width: 5px;
       height: 0;
       background-color: var(--purple-main);
       transition: height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
       border-radius: 10px;
       flex-shrink: 0;
   }

   .statement-content {
       padding-left: 30px;
       overflow: hidden;
   }

   .value-para {
       font-size: clamp(1.5rem, 2.5vw, 1.8rem);
       line-height: 1.6;
       color: var(--dark-slate);
       font-weight: 500;
       transform: translateX(-105%);
       /* Hidden behind the line */
       opacity: 0;
       transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
   }

   .brand-name {
       color: var(--purple-main);
       font-weight: 700;
   }

   /* Right Image Styling */
   .image-box {
       width: 100%;
       height: 400px;
       border-radius: 25px;
       overflow: hidden;

       opacity: 0;
       transform: scale(0.9);
       transition: all 1.2s ease 0.6s;
       /* Starts after text */
       background-color: #f6f6f6;
   }

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

   
   /* Adjust based on text length */
   .text-slide {
       transform: translateX(0);
       opacity: 1;
   }

   .img-active {
       opacity: 1;
       transform: scale(1);
   }

   /* Mobile View */
   @media (max-width: 992px) {
       .statement-container {
           grid-template-columns: 1fr;
           text-align: center;
       }

       .left-side {
           justify-content: center;
           margin-bottom: 40px;
       }

       .image-box {
           height: 300px;
       }
   }

   /* --- Animation Classes --- */
   .line-grow {
       height: 250px;
   }

   /* Increased for better alignment */

   .text-slide {
       transform: translateX(0);
       opacity: 1;
   }

   .img-visible {
       opacity: 1;
       transform: translateY(0);
   }

   /* Responsive adjustment */
   @media (max-width: 992px) {
       .statement-container {
           grid-template-columns: 1fr;
           /* Stack on top of each other */
           text-align: center;
       }

       .left-side {
           justify-content: center;
       }

       .image-box {
           height: 300px;
           margin-top: 30px;
       }
   }








   .credentials-section {
       padding: 0px 0;
       margin-top: 40px;
       background-color: #f8fafc;
       /* Subtle grey background to make cards pop */
   }

   .credentials-container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       /* 3 boxes in a row */
       gap: 30px;
   }

   .credential-card {
       background: var(--white);
       border: 1px solid #e2e8f0;
       border-radius: 12px;
       padding: 25px;
       text-decoration: none;
       /* Removes underline for the link box */
       box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
       transition: all 0.3s ease;
   }

   .card-inner {
       display: flex;
       align-items: center;
       gap: 20px;
   }

   .credential-icon {
       width: 50px;
       height: 50px;
       flex-shrink: 0;
   }

   .credential-icon img {
       width: 100%;
       height: 100%;
       object-fit: contain;
       /* This filter tints black icons to your brand purple */
       filter: invert(41%) sepia(82%) saturate(2256%) hue-rotate(245deg) brightness(101%) contrast(96%);
   }

   .credential-card h3 {
       font-size: 1.25rem;
       font-weight: 700;
       color: var(--dark-text);
       margin: 0;
   }

   /* Hover effects */
   .credential-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 12px 20px -5px rgba(168, 85, 247, 0.2);
       border-color: var(--purple-main);
   }

   .support-link:hover h3 {
       color: var(--purple-main);
   }

   /* Responsive Adjustments */
   @media (max-width: 992px) {
       .credentials-container {
           grid-template-columns: repeat(2, 1fr);
           /* 2 boxes on tablets */
       }
   }

   @media (max-width: 600px) {
       .credentials-container {
           grid-template-columns: 1fr;
           /* 1 box on mobile */
           gap: 20px;
       }

       .credential-card h3 {
           font-size: 1.1rem;
       }
   }






   .expert-profile-section {
       padding: 100px 0;
       margin-top: 30px;
       background-color: var(--nav-bg);
       overflow: hidden;
       /* Important to hide the text while it's "behind" */
   }

   .profile-wrapper {
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
       align-items: center;
       gap: 0;
       /* Gap is 0 so text can stay behind the image */
       padding: 0 20px;
   }

   /* --- Image Styling --- */
   .profile-image-box {
       position: relative;
       z-index: 10;
       /* Image stays on top */
       width: 45%;
       flex-shrink: 0;
   }

   .main-profile-img {
       width: 100%;
       height: 550px;
       object-fit: cover;
       border-radius: 8px;
       box-shadow: 20px 0 50px rgba(0, 0, 0, 0.1);
   }

   .image-bg-accent {
       position: absolute;
       top: -20px;
       left: -20px;
       width: 100%;
       height: 100%;
       background-color: var(--purple-main);
       z-index: -1;
       border-radius: 8px;
   }

   /* --- Info Styling (Hidden State) --- */
   .profile-info-box {
       width: 55%;
       padding-left: 50px;
       z-index: 5;
       /* Lower than image */

       /* Animation initial state: hidden behind image */
       opacity: 0;
       transform: translateX(-80%);
       transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
   }

   .experience-title {
       font-size: 3.5rem;
       color: var(--purple-main);
       font-weight: 800;
       margin-bottom: 20px;
   }

   .cyan-text15 {
       color: var(--white);
   }

   .profile-description {
       font-size: 1.1rem;
       color: #77818e;
       line-height: 1.7;
       margin-bottom: 40px;
       max-width: 500px;
   }

   .founder-name {
       font-size: 2rem;
       color: var(--white);
       margin: 0;
   }

   .arn-no,
   .designation-text {
       color: var(--purple-main);
       font-weight: 600;
       margin: 5px 0;
       letter-spacing: 1px;
   }

   /* --- Active Animation State --- */
   .reveal-info {
       opacity: 1;
       transform: translateX(0);
       /* Slides to original right-side position */
   }

   /* Responsive View */
   @media (max-width: 992px) {
       .profile-wrapper {
           flex-direction: column;
           text-align: center;
       }

       .profile-image-box {
           width: 80%;
           margin-bottom: 50px;
       }

       .profile-info-box {
           width: 100%;
           padding-left: 0;
           transform: translateY(50px);
           /* Mobile uses a slide-up instead */
       }

       .reveal-info {
           transform: translateY(0);
       }
   }




   .why-us-section {
       padding: 120px 0;
       background-color: var(--white);
       overflow: hidden;
   }

   .why-us-container {
       max-width: 1200px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: 1.1fr 0.9fr;
       /* Text left, Image right */
       gap: 60px;
       align-items: center;
       padding: 0 20px;
   }

   /* --- Left Side (Text) --- */
   .why-us-info {
       opacity: 0;
       transform: translateX(80%);
       /* Initial state: Pushed right (behind image area) */
       transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
           opacity 0.8s ease;
   }

   .sub-title {
       color: var(--purple-main);
       font-weight: 700;
       text-transform: uppercase;
       font-size: 0.9rem;
       letter-spacing: 2px;
   }

   .main-title {
       font-size: 3rem;
       color: var(--nav-bg);
       margin: 10px 0 20px 0;
       font-weight: 800;
   }

   .intro-text {
       color: var(--body-text);
       font-size: 1.1rem;
       margin-bottom: 40px;
   }

   /* Values Grid */
   .values-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 25px;
   }

   .value-item {
       display: flex;
       align-items: center;
       gap: 15px;
       background: #f8fafc;
       padding: 15px;
       border-radius: 8px;
       border-left: 3px solid var(--purple-main);
   }

   .value-item p {
       color: var(--nav-bg);
       font-weight: 600;
       margin: 0;
   }

   /* --- Right Side (Image) --- */
   .why-us-image {
       position: relative;
       z-index: 10;
   }

   .image-inner-wrap img {
       width: 100%;
       height: 500px;
       object-fit: cover;
       border-radius: 12px;
       box-shadow: -15px 15px 40px rgba(17, 40, 71, 0.1);
   }

   .image-accent-bg {
       position: absolute;
       top: 20px;
       right: -20px;
       width: 100%;
       height: 100%;
       background-color: var(--nav-bg);
       z-index: -1;
       border-radius: 12px;
   }

   /* --- Animation Class --- */
   .info-reveal-active {
       opacity: 1;
       transform: translateX(0);
   }

   /* --- Responsive --- */
   @media (max-width: 992px) {
       .why-us-container {
           grid-template-columns: 1fr;
           text-align: center;
       }

       .why-us-info {
           transform: translateY(50px);
           order: 2;
           /* Move text below image on mobile */
       }

       .why-us-image {
           order: 1;
           margin-bottom: 50px;
       }

       .values-grid {
           grid-template-columns: 1fr;
       }

       .value-item {
           justify-content: center;
       }

       .info-reveal-active {
           transform: translateY(0);
       }
   }




   .who-we-serve {
       padding: 60px 0;
       background-color: var(--white);
       text-align: center;
   }

   .serve-container {
       max-width: 1500px;
       margin: 0 auto;
       padding: 0 20px;
   }

   /* Header Styling */
   .serve-header {
       margin-bottom: 60px;
   }

   .sub-title {
       color: var(--purple-main);
       font-weight: 700;
       text-transform: uppercase;
       font-size: 0.9rem;
       letter-spacing: 2px;
   }

   .main-title {
       font-size: 2.8rem;
       color: var(--nav-bg);
       margin: 10px 0;
       font-weight: 800;
   }

   .cyan-text {
       color: var(--purple-main);
   }

   .title-underline {
       width: 60px;
       height: 4px;
       background: var(--purple-main);
       margin: 0 auto 20px;
   }

   .serve-lead {
       color: #64748b;
       max-width: 600px;
       margin: 0 auto;
       font-size: 1.1rem;
   }

   /* Grid & Cards */
   .serve-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
       gap: 30px;
   }

   .serve-card {
       background: #E5E7EB;
       padding: 10px 5px;
       border-radius: 15px;
       border: 1px solid #e2e8f0;
       box-shadow: 0 10px 30px rgba(17, 40, 71, 0.05);
       transition: all 0.4s ease;
       cursor: default;
   }

   .card-icon {
       font-size: 2rem;
       margin-bottom: 20px;
       display: inline-block;
   }

   .serve-card h3 {
       color: var(--nav-bg);
       font-size: 1.4rem;
       margin-bottom: 15px;
       font-weight: 700;
   }

   .serve-card p {
       color: #64748b;
       line-height: 1.6;
       font-size: 0.95rem;
   }

   /* Hover Effects */
   .serve-card:hover {
       transform: translateY(-10px);
       border-color: var(--purple-main);
       box-shadow: 0 20px 40px rgba(63, 192, 217, 0.15);
   }

   .serve-card:hover h3 {
       color: var(--purple-main);
   }

   /* Previous root variables remain same */

   .card-icon-wrap {
       width: 70px;
       height: 70px;
       background-color: #f0f9ff;
       /* Very light cyan bg */
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 25px;
       transition: all 0.3s ease;
   }

   .card-icon-wrap i {
       font-size: 1.8rem;
       color: var(--purple-main);
       /* Your Brand Color */
   }

   /* Hover effect for the icon */
   .serve-card:hover .card-icon-wrap {
       background-color: var(--purple-main);
   }

   .serve-card:hover .card-icon-wrap i {
       color: var(--white);
       transform: scale(1.1);
   }

   /* Rest of the serve-card CSS from the previous message remains same */

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

       .serve-grid {
           grid-template-columns: 1fr;
       }
   }

   /* ABOUT END */



   /* contact us start */
   /* --- Root Variables --- */
   :root {
       
       --card-shadow: 0 15px 35px rgba(17, 40, 71, 0.08);
   }

   /* --- Global Reset for Contact Page --- */
   * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }


  /* --- Section 1: Top Contact Cards --- */
.contact-cards-section {
    padding: 60px 0 30px;
    background-color: var(--bg-light);
}

.cards-wrapper {
    max-width: 1900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 25px;
    padding: 0 10px;
}

.info-card {
    background: var(--white);
    flex: 1;
    display: flex;
    align-items: center;
    padding: 35px 25px;
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-bottom: 4px solid transparent;
}

.icon-box {
    width: 65px;
    height: 65px;
    background-color: #f0f4f8;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    transition: 0.3s;
    flex-shrink: 0;
}

/* Specific adjustment for the Social Card Icon Box */
.social-container {
    width: auto; /* Allows box to expand for two icons */
    min-width: 110px;
    padding: 0 15px;
    gap: 15px; /* Space between WhatsApp and Insta */
}

.icon-box i {
    font-size: 1.8rem;
    color: var(--nav-bg);
    transition: color 0.3s ease;
}

/* Default Social Media Brand Colors */
.wa-icon { color: #25D366 !important; }
.insta-icon { color: #E1306C !important; }

.card-text h3 {
    margin-bottom: 8px;
    font-size: 1.25rem;
    color: var(--nav-bg);
}

.card-text p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
}

/* --- Hover States --- */

.info-card:hover {
    transform: translateY(-10px);
    border-bottom-color: var(--purple-main);
    box-shadow: 0 20px 40px rgba(17, 40, 71, 0.12);
}

/* Icon Box turns dark on hover */
.info-card:hover .icon-box {
    background-color: var(--nav-bg);
}

/* All icons inside the box (Address, Phone, Email) turn white on hover */
.info-card:hover .icon-box i {
    color: var(--white) !important;
}

/* Individual Social Link scaling */
.social-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.social-link:hover {
    transform: scale(1.2);
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .cards-wrapper {
        flex-wrap: wrap;
    }
    .info-card {
        flex: 1 1 calc(50% - 25px);
    }
}

@media (max-width: 768px) {
    .info-card {
        flex: 1 1 100%;
    }
}

   /* --- Section 2: Main Contact Form (50/50 Split) --- */
   .contact-section {
       padding: 30px 0;
       /* Reduced from 50px to 30px */
       display: flex;
       justify-content: center;
   }

   .contact-card {
       background: var(--white);
       max-width: 1100px;
       width: 95%;
       display: grid;
       grid-template-columns: 1fr 1.1fr;
       border-radius: 24px;
       overflow: hidden;
       box-shadow: 0 40px 80px rgba(17, 40, 71, 0.1);
   }

   /* Left Side: Visuals & Shapes */
   .contact-visual {
       position: relative;
       background-color: var(--nav-bg);
       overflow: hidden;
       height: 100%;
   }

   .contact-img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       opacity: 0.85;
   }

   .shape {
       position: absolute;
       z-index: 2;
   }

   .tri-navy-top {
       top: 0;
       left: 10%;
       width: 100px;
       height: 80px;
       background: var(--nav-bg);
       clip-path: polygon(50% 100%, 0 0, 100% 0);
   }

   .tri-cyan-top {
       top: 0;
       left: 35%;
       width: 120px;
       height: 100px;
       background: var(--purple-main);
       clip-path: polygon(50% 100%, 0 0, 100% 0);
   }

   .tri-navy-bottom {
       bottom: 0;
       left: 0;
       width: 200px;
       height: 150px;
       background: var(--nav-bg);
       clip-path: polygon(0 0, 0% 100%, 100% 100%);
   }

   .tri-cyan-left {
       bottom: 15%;
       left: 0;
       width: 80px;
       height: 120px;
       background: var(--purple-main);
       clip-path: polygon(0 50%, 100% 0, 100% 100%);
   }

   /* Right Side: Optimized Form Area */
   .contact-form-area {
      padding: 40px 50px
   }

   .get-in-touch {
       color: var(--purple-main);
       font-weight: 700;
       text-transform: uppercase;
       font-size: 0.85rem;
       letter-spacing: 1px;
       display: inline-block;
       margin-bottom: 10px;
   }

   .contact-title {
    font-size: 2.2rem;
       color: var(--nav-bg);
      margin-bottom: 25px;
       line-height: 1.2;
   }

   .actual-form {
       display: flex;
       flex-direction: column;
       gap: 15px;
       /* Space between input rows */
   }

   .actual-form input,
   .actual-form textarea {
       width: 100%;
       padding: 12px 18px;
       border: 1.5px solid #e2e8f0;
       border-radius: 10px;
       background: #fcfdfe;
       outline: none;
       font-size: 1rem;
       font-family: inherit;
       text-align: left;
       transition: all 0.3s ease;
   }

   .actual-form input:focus,
   .actual-form textarea:focus {
       border-color: var(--purple-main);
       background: var(--white);
       box-shadow: 0 0 0 4px rgba(106, 27, 154, 0.05);
   }

   .btn-send {
       background: var(--nav-bg);
       color: white;
      padding: 14px;
       border: none;
       border-radius: 10px;
       font-weight: 700;
       font-size: 1.1rem;
       cursor: pointer;
       transition: all 0.3s ease;
       margin-top: 10px;
   }

   .btn-send:hover {
       background: var(--purple-main);
       transform: translateY(-3px);
       box-shadow: 0 10px 20px rgba(106, 27, 154, 0.2);
   }

   /* --- Section 3: Professional Map Section --- */
   .map-section {
       width: 100%;
       padding: 40px 0 80px;
       display: flex;
       justify-content: center;
   }

   .map-container {
       width: 80%;
       height: 350px;
       background: var(--white);
       border-radius: 20px;
       overflow: hidden;
       border: 6px solid var(--white);
       box-shadow: var(--nav-bg);
       position: relative;
   }

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

   .map-container::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 6px;
       background: var(--nav-bg);
       z-index: 5;
   }

   /* --- Responsive Adjustments --- */

   @media (max-width: 992px) {
       .cards-wrapper {
           flex-direction: column;
       }

       .contact-card {
           grid-template-columns: 1fr;
       }

       .contact-visual {
          height: 250px;
       }

       .shape {
           display: none;
       }

       /* Hide complex shapes on mobile */
       .contact-form-area {
           padding: 40px 30px;
       }

       .map-container {
           width: 95%;
           height: 300px;
       }
   }

   @media (max-width: 600px) {
       .contact-title {
           font-size: 1.8rem;
       }

       .actual-form input,
       .actual-form textarea {
           padding: 14px 15px;
       }
   }

   /* contact us end */



   /* sip start */





   /* Calculator Card */
   .calculator-container {
       display: flex;
       justify-content: center;
       padding: 50px 20px;
   }

   .calc-card {
       background: white;
       width: 100%;
       max-width: 900px;
       padding: 40px;
       border-radius: 25px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
   }

   .title {
       text-align: center;
       font-size: 2rem;
       color: var(--nav-bg);
       margin-bottom: 30px;
   }

   .title span {
       color: var(--purple-main);
   }

   .calc-content {
       display: flex;
       gap: 50px;
       flex-wrap: wrap;
   }

   .inputs-section {
       flex: 1.2;
       min-width: 300px;
   }

   .chart-section {
       flex: 0.8;
       min-width: 250px;
       display: flex;
       flex-direction: column;
       align-items: center;
   }

   /* Input Styling */
   .input-group {
       margin-bottom: 30px;
   }

   .label-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 10px;
   }

   .input-wrapper {
       background: #f9f9f9;
       padding: 5px 10px;
       border: 1px solid #ddd;
       border-radius: 5px;
   }

   .input-wrapper input {
       border: none;
       background: transparent;
       font-weight: bold;
       width: 60px;
       text-align: center;
   }

   /* Slider Customization */
   input[type=range] {
       width: 100%;
       accent-color: var(--purple-main);
   }

   /* Results Box */
   .results-box {
       background: var(--nav-bg);
       color: white;
       padding: 25px;
       border-radius: 15px;
   }

   .res-row {
       display: flex;
       justify-content: space-between;
       margin-bottom: 12px;
   }

   .light-blue {
       color: var(--purple-main);
   }

   .total {
       font-size: 1.4rem;
       font-weight: bold;
       margin-top: 15px;
   }

   /* Legend */
   .chart-legend {
       margin-top: 20px;
       display: flex;
       gap: 20px;
   }

   .legend-item {
       display: flex;
       align-items: center;
       font-size: 0.9rem;
   }

   .dot {
       width: 12px;
       height: 12px;
       border-radius: 2px;
       margin-right: 8px;
   }

   .invested {
       background: var(--nav-bg);
   }

   .returns {
       background: var(--purple-main);
   }

   /* Responsive */
   @media (max-width: 768px) {
       .calc-content {
           flex-direction: column;
       }

       .navbar {
           flex-direction: column;
           gap: 15px;
       }
   }


   /* sip end */



   /* lumpsum start */


   .logo {
       font-weight: bold;
       font-size: 1.2rem;
       display: flex;
       align-items: center;
       gap: 8px;
   }

   .logo span {
       color: var(--purple-main);
   }

   nav a {
       color: #ccc;
       text-decoration: none;
       margin: 0 10px;
       font-size: 0.9rem;
   }

   .login-btn {
       background: transparent;
       border: 1px solid white;
       color: white;
       padding: 6px 15px;
       border-radius: 5px;
       cursor: pointer;
   }

   /* Calculator Card */
   .main-container {
       padding: 40px 20px;
       display: flex;
       justify-content: center;
   }

   .calc-card {
       background: white;
       max-width: 900px;
       width: 100%;
       border-radius: 20px;
       padding: 40px;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
   }

   .calc-title {
       text-align: center;
       margin-bottom: 40px;
       color: var(--nav-bg);
   }

   .calc-title span {
       color: var(--purple-main);
   }

   .grid-layout {
       display: flex;
       gap: 60px;
       flex-wrap: wrap;
   }

   .controls {
       flex: 1.2;
       min-width: 300px;
   }

   .chart-container {
       flex: 0.8;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }

   /* Input Styling */
   .input-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 10px;
   }

   .input-field {
       border: 1px solid #ddd;
       padding: 5px 12px;
       border-radius: 8px;
       background: #f9f9f9;
       display: flex;
       align-items: center;
       font-weight: bold;
   }

   .input-field input {
       border: none;
       background: transparent;
       width: 80px;
       text-align: right;
       font-weight: bold;
       font-size: 1rem;
       color: #333;
   }

   .slider {
       width: 100%;
       margin-bottom: 30px;
       accent-color: var(--purple-main);
   }

   /* Result Box */
   .result-box {
       background: var(--nav-bg);
       color: white;
       padding: 25px;
       border-radius: 12px;
       margin-top: 20px;
   }

   .res-item {
       display: flex;
       justify-content: space-between;
       margin-bottom: 10px;
       font-size: 0.95rem;
   }

   .cyan-text {
       color: var(--purple-main);
   }

   .res-total {
       display: flex;
       justify-content: space-between;
       margin-top: 15px;
       padding-top: 15px;
       border-top: 1px solid #ffffff22;
       font-size: 1.6rem;
       font-weight: bold;
   }

   #res-total {
       color: var(--purple-main);
   }

   /* Legend */
   .canvas-wrapper {
       width: 280px;
       height: 280px;
   }

   .legend {
       display: flex;
       gap: 20px;
       margin-top: 20px;
   }

   .legend-item {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 0.85rem;
   }

   .dot {
       width: 12px;
       height: 12px;
       border-radius: 2px;
   }

   .invested {
       background: var(--nav-bg);
   }

   .returns {
       background: var(--purple-main);
   }

   @media (max-width: 768px) {
       .grid-layout {
           flex-direction: column;
       }

       .navbar nav {
           display: none;
       }
   }

   /* lumpsum end */



   /* swp start */


   .swp-calculator-panel {
       display: flex;
       justify-content: center;
       padding: 40px 20px;
       background: #f0f4f8;
       font-family: 'Inter', sans-serif;
   }

   .swp-card {
       background: var(--white);
       max-width: 1000px;
       width: 100%;
       padding: 40px;
       border-radius: 24px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
   }

   .swp-title {
       color: var(--nav-bg);
       font-size: 2rem;
       margin-bottom: 35px;
   }

   .swp-title span {
       color: var(--purple-main);
   }

   .swp-grid {
       display: grid;
       grid-template-columns: 1.2fr 0.8fr;
       gap: 50px;
       align-items: center;
   }

   .swp-group {
       margin-bottom: 25px;
   }

   .swp-label-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 12px;
   }

   .swp-label-row label {
       color: var(--nav-bg);
       font-weight: 500;
   }

   .swp-num-box {
       background: #f1f5f9;
       padding: 6px 12px;
       border-radius: 6px;
       border: 1px solid #e2e8f0;
   }

   .swp-num-box input {
       border: none;
       background: transparent;
       font-weight: 700;
       width: 80px;
       text-align: right;
       color: var(--nav-bg);
       outline: none;
   }

   /* Dark Result Card Styling */
   .swp-result-card {
       background: var(--nav-bg);
       padding: 25px;
       border-radius: 16px;
       color: white;
       margin-top: 30px;
   }

   .res-line {
       display: flex;
       justify-content: space-between;
       margin-bottom: 10px;
       opacity: 0.8;
       font-size: 0.9rem;
   }

   .res-line.total {
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       padding-top: 15px;
       margin-top: 15px;
       opacity: 1;
       font-size: 1.3rem;
       color: var(--white);
   }

   .res-line.total strong:last-child {
       color: var(--white);
   }

   /* Slider Styling */
   input[type="range"] {
       width: 100%;
       accent-color: var(--purple-main);
       cursor: pointer;
       height: 6px;
   }

   /* Chart Styling */
   .swp-visual {
       text-align: center;
   }

   #swpChart {
       max-width: 300px;
       margin: 0 auto;
   }

   .chart-legend {
       display: flex;
       justify-content: center;
       gap: 20px;
       margin-top: 20px;
       font-weight: 600;
       color: var(--nav-bg);
   }

   .dot {
       height: 12px;
       width: 12px;
       border-radius: 50%;
       display: inline-block;
       margin-right: 5px;
   }

   .dot.navy {
       background: var(--nav-bg);
   }

   .dot.cyan {
       background: var(--purple-main);
   }

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

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

   /* swp end */


   /* stp start */


   .stp-section {
       padding: 60px 20px;
       display: flex;
       justify-content: center
   }

   .stp-card {
       background: #fff;
       max-width: 1100px;
       width: 100%;
       padding: 40px;
       border-radius: 20px;
       box-shadow: 0 20px 40px rgba(0, 0, 0, .08)
   }

   .grid {
       display: grid;
       grid-template-columns: 1.2fr .8fr;
       gap: 60px
   }

   .group {
       margin-bottom: 25px
   }

   .label-row {
       display: flex;
       justify-content: space-between;
       margin-bottom: 10px;
       font-weight: 600;
       color: var(--nav-bg)
   }

   .input-wrap {
       background: #f4f7fa;
       padding: 6px 12px;
       border-radius: 6px;
       border: 1px solid #ddd
   }

   input {
       border: none;
       background: transparent;
       font-weight: 700;
       width: 90px;
       text-align: right
   }

   input[type=range] {
       width: 100%;
       accent-color: var(--purple-main)
   }

   .stats {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 15px
   }

   .stat {
       background: #f4f7fa;
       padding: 20px;
       border-radius: 12px;
       text-align: center
   }

   .chart-box {
       max-width: 240px;
       margin: auto
   }

   .earn {
       margin-top: 25px;
       background: var(--nav-bg);
       border: 1px solid var(--purple-main);
       padding: 20px;
       border-radius: 12px;
       display: flex;
       gap: 15px;
       color: var(--white);
   }


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

       .chart-box {
           display: none
       }
   }

   /* stp end */



   /* services start  */


   .serv-container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 80px 20px;
   }

   .serv-cyan-text {
       color: var(--purple-main);
   }

   .serv-section-title {
       text-align: center;
       font-size: 2.8rem;
       margin-bottom: 50px;
   }

   /* --- Services Grid --- */
   .serv-services-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
       gap: 30px;
   }

   .serv-service-card {
       background: var(--white);
       padding: 40px;
       border-radius: 24px;
       transition: all 0.3s ease;
       cursor: pointer;
       box-shadow: 0 10px 30px rgba(17, 40, 71, 0.05);
       border: 1.5px solid transparent;
   }

   .serv-service-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 20px 40px rgba(17, 40, 71, 0.1);
       border-color: var(--purple-main);
   }

   .serv-icon-box {
       font-size: 2.8rem;
       color: var(--purple-main);
       margin-bottom: 20px;
   }

   .serv-service-card h3 {
       margin: 0 0 15px 0;
       font-size: 1.5rem;
       color: var(--nav-bg);
   }

   .serv-service-card p {
       color: var(--text-gray);
       line-height: 1.6;
       font-size: 0.95rem;
       margin-bottom: 20px;
   }

   .serv-learn-more {
       color: var(--purple-main);
       font-weight: 700;
       font-size: 0.9rem;
       display: flex;
       align-items: center;
       gap: 8px;
   }

   /* --- Full Page Immersive Popup --- */
   .serv-full-page-overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: var(--nav-bg);
       z-index: 9999;
       visibility: hidden;
       opacity: 0;
       transform: scale(1.1);
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .serv-full-page-overlay.active {
       visibility: visible;
       opacity: 1;
       transform: scale(1);
   }

   .serv-exit-btn {
       position: fixed;
       top: 30px;
       right: 40px;
       background: none;
       border: none;
       color: var(--white);
       font-size: 3.5rem;
       cursor: pointer;
       z-index: 10001;
       transition: 0.3s;
   }

   .serv-exit-btn:hover {
       color: var(--purple-main);
       transform: rotate(90deg);
   }

   .serv-popup-scroll-area {
       width: 100%;
       height: 100%;
       overflow-y: auto;
       padding: 100px 20px;
   }

   .serv-popup-inner {
       max-width: 1100px;
       margin: 0 auto;
       text-align: center;
       color: var(--white);
   }

   .serv-popup-inner h2 {
       font-size: 3.5rem;
       margin-bottom: 10px;
   }

   .serv-divider {
       width: 80px;
       height: 4px;
       background: var(--purple-main);
       margin: 20px auto;
       border-radius: 2px;
   }

   .serv-lead-text {
       font-size: 1.3rem;
       line-height: 1.8;
       opacity: 0.9;
       max-width: 850px;
       margin: 0 auto 60px;
   }

   /* --- Masonry Dynamic Grid --- */
   .serv-info-details-grid {
       column-count: 2;
       /* Professional masonry layout */
       column-gap: 30px;
       text-align: left;
       margin-bottom: 60px;
   }

   .serv-info-block {
       break-inside: avoid;
       /* Prevents splitting across columns */
       display: inline-block;
       width: 100%;
       background: rgba(255, 255, 255, 0.05);
       padding: 40px;
       border-radius: 20px;
       border: 1px solid rgba(63, 192, 217, 0.1);
       margin-bottom: 30px;
   }

   .serv-info-block h4 {
       color: var(--purple-main);
       margin: 0 0 20px 0;
       font-size: 1.5rem;
       display: flex;
       align-items: center;
       gap: 15px;
   }

   .serv-info-block ul {
       list-style: none;
       padding: 0;
       margin: 0;
   }

   .serv-info-block ul li {
       margin-bottom: 12px;
       padding-left: 30px;
       position: relative;
       line-height: 1.5;
       color: rgba(255, 255, 255, 0.9);
   }

   .serv-info-block ul li::before {
       content: "\f054";
       /* Small arrow */
       font-family: "Font Awesome 6 Free";
       font-weight: 900;
       position: absolute;
       left: 0;
       color: var(--purple-main);
       font-size: 0.8rem;
       top: 4px;
   }

   .serv-popup-actions {
       display: flex;
       gap: 20px;
       justify-content: center;
       padding-bottom: 50px;
   }

   .serv-btn-calc {
       background: var(--purple-main);
       color: var(--nav-bg);
       border: none;
       padding: 18px 45px;
       border-radius: 50px;
       font-weight: 700;
       cursor: pointer;
       font-size: 1.1rem;
       transition: 0.3s;
   }

   .serv-btn-back {
       background: transparent;
       color: var(--white);
       border: 2px solid var(--white);
       padding: 18px 45px;
       border-radius: 50px;
       font-weight: 700;
       cursor: pointer;
       font-size: 1.1rem;
       transition: 0.3s;
   }

   .serv-btn-calc:hover {
       background: var(--white);
       transform: translateY(-3px);
   }

   .serv-btn-back:hover {
       background: var(--white);
       color: var(--nav-bg);
   }

   /* Responsive Breakpoints */
   @media (max-width: 900px) {
       .serv-info-details-grid {
           column-count: 1;
       }

       .serv-popup-inner h2 {
           font-size: 2.5rem;
       }

       .serv-section-title {
           font-size: 2.2rem;
       }

       .serv-exit-btn {
           right: 20px;
           top: 20px;
           font-size: 2.5rem;
       }
   }


   /* Slider Base Container */
   .serv-hero-slider {
       position: relative;
       width: 100%;
       height: 600px;
       /* Enhanced height for Big Screens/TVs */
       overflow: hidden;
       background: var(--nav-bg);
   }

   .serv-slider-inner {
       display: flex;
       width: 400%;
       height: 100%;
       transition: transform 0.8s cubic-bezier(0.45, 0, 0.55, 1);
   }

   .serv-slide-item {
       width: 25%;
       height: 100%;
   }

   .serv-slide-item picture,
   .serv-slide-item img {
       width: 100%;
       height: 100%;
       display: block;
   }

   .serv-slide-item img {
       object-fit: cover;
       /* Ensures image fills the screen on TV/Laptop without distortion */
       object-position: center;
   }

   /* Mobile Image Adjustments */
   @media (max-width: 768px) {
       .serv-hero-slider {
           height: 450px;
           /* Optimized height for Mobile portrait view */
       }

       .serv-slide-item img {
           object-fit: contain;
           /* Prevents cropping of text on mobile banners */
           background-color: var(--nav-bg);
       }
   }

   /* Large Display Adjustments (TV/4K Monitors) */
   @media (min-width: 1800px) {
       .serv-hero-slider {
           height: 750px;
           /* Taller slider for ultra-wide screens */
       }
   }

   /* Navigation Dots */
   .dot-nav {
       position: absolute;
       bottom: 20px;
       left: 50%;
       transform: translateX(-50%);
       display: flex;
       gap: 12px;
       z-index: 5;
   }

   .nav-dot {
       width: 10px;
       height: 10px;
       background: rgba(255, 255, 255, 0.4);
       border-radius: 50%;
       cursor: pointer;
       transition: all 0.3s ease;
   }

   .nav-dot.active {
       background: var(--purple-main);
       width: 28px;
       border-radius: 10px;
   }


   /* services end */


   /* knowledge starts */


   .know-container {
       max-width: 1100px;
       margin: 0 auto;
       padding: 0 20px;
   }

   /* --- Header & Search Section --- */
   .know-hero {
       background: linear-gradient(135deg, var(--nav-bg) 0%, #1e3a5f 100%);
       color: white;
       padding: 60px 0 40px;
       text-align: center;
       border-radius: 0 0 30px 30px;
   }

   .know-hero h1 {
       font-size: 2.5rem;
       margin: 0 0 10px;
   }

   .know-search-wrapper {
       max-width: 550px;
       margin: 0 auto;
       position: relative;
       text-align: left;
   }

   .know-search-input {
       width: 100%;
       padding: 16px 20px 16px 55px;
       border-radius: 50px;
       border: none;
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
       outline: none;
       font-size: 1rem;
       text-align: left;
       background-color: var(--white);
   }

   .know-search-icon {
       position: absolute;
       left: 22px;
       top: 50%;
       transform: translateY(-50%);
       color: var(--purple-main);
       pointer-events: none;
   }

   /* --- FAQ Section --- */
   .know-faq-section {
       margin-top: 25px;
       margin-bottom: 50px;
   }

   .know-faq-item {
       background: white;
       margin-bottom: 8px;
       border-radius: 12px;
       border: 1px solid var(--white);
       overflow: hidden;
       transition: 0.3s;
   }

   .know-faq-q {
       padding: 18px 25px;
       display: flex;
       justify-content: space-between;
       cursor: pointer;
       font-weight: 600;
       align-items: center;
   }

   .know-faq-a {
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.4s ease-out;
       background: #fcfdfe;
   }

   .know-faq-a p {
       padding: 0 25px 20px;
       color: var(--body-text);
       font-size: 0.95rem;
       margin: 0;
       line-height: 1.6;
   }

   .know-faq-item.active {
       border-color: var(--purple-main);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   }

   .know-faq-item.active .know-faq-a {
       max-height: 500px;
   }

   .know-faq-item.active .fa-chevron-down {
       transform: rotate(180deg);
       color: var(--purple-main);
   }

   /* --- Load More Button --- */
   .know-more-container {
       text-align: center;
       margin-top: 30px;
   }

   .know-view-btn {
       background: transparent;
       color: var(--purple-main);
       border: 2px solid var(--purple-main);
       padding: 12px 35px;
       border-radius: 50px;
       font-weight: 700;
       cursor: pointer;
       transition: 0.3s;
   }

   .know-view-btn:hover {
       background: var(--purple-main);
       color: white;
       transform: translateY(-3px);
   }

   /* --- Inquiry Form --- */
   /* Container adjustments */
   .know-form-card {
       display: flex;
       flex-direction: row;
       /* Side-by-side on Desktop */
       flex-wrap: wrap;
       background: white;
       border-radius: 24px;
       overflow: hidden;
       box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
       margin-bottom: 80px;
       width: 100%;
   }

   .know-info-side {
       flex: 1 1 350px;
       background: var(--nav-bg, #112847);
       color: white;
       padding: 40px;
   }

   .know-contact-links p {
       margin: 15px 0;
       display: flex;
       align-items: center;
       gap: 15px;
   }

   .know-form-side {
       flex: 1.5 1 450px;
       padding: 40px;
   }

   /* Grid System */
   .know-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       /* 2 columns on Desktop */
       gap: 20px;
   }

   .know-full-span {
       grid-column: span 2;
   }

   .know-input-box label {
       display: block;
       font-weight: 600;
       margin-bottom: 8px;
       font-size: 0.9rem;
       color: var(--nav-bg);
   }

   .know-input {
       width: 100%;
       padding: 12px 15px;
       border: 1px solid #ddd;
       /* Changed from var(--white) to be visible */
       border-radius: 8px;
       outline: none;
       font-family: inherit;
       transition: border-color 0.3s;
       text-align: left;
   }

   .know-input:focus {
       border-color: var(--know-purple, #6a1b9a);
   }

   .know-btn {
       background: var(--nav-bg, #112847);
       color: white;
       border: none;
       width: 100%;
       padding: 16px;
       border-radius: 8px;
       font-weight: 700;
       cursor: pointer;
       transition: background 0.3s, transform 0.2s;
   }

   .know-btn:hover {
       filter: brightness(1.2);
       transform: translateY(-2px);
   }

   /* --- MOBILE RESPONSIVE BREAKPOINTS --- */

   @media (max-width: 850px) {
       .know-form-card {
           flex-direction: column;
           /* Stack vertically on Tablet/Mobile */
       }

       .know-info-side,
       .know-form-side {
           padding: 30px;
           flex: none;
           width: 100%;
       }
   }

   @media (max-width: 500px) {
       .know-grid {
           grid-template-columns: 1fr;
           /* Single column on phones */
       }

       .know-full-span {
           grid-column: span 1;
       }

       .know-info-side h2 {
           font-size: 1.5rem;
       }
   }



.edu-scroll-lock {
    height: 400vh; /* Extra height for smooth sticky transition */
    position: relative;
    background: var(--bg-light);
    padding-top: 50px;
}

.edu-header {
    text-align: center;
    padding: 0 20px;
    margin-bottom: 20px;
}

.serv-section-title {
    font-size: clamp(2rem, 5vw, 2.8rem);
    margin-bottom: 10px;
}

.serve-lead {
    font-size: 1.1rem;
    color: #666;
}

.scroll-animation-zone {
    position: sticky;
    top: 5vh;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.zoom-layer {
    position: absolute;
    width: 92%;
    max-width: 1200px;
    height: 80vh; /* Height based on viewport */
    max-height: 650px;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
    border: 1px solid #eee;
    opacity: 0;
    transform: scale(0.7);
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden; /* Contains the inner flex */
}

#layer-1 { opacity: 1; transform: scale(1); visibility: visible; }

.layer-inner {
    display: flex;
    height: 100%;
}

/* Image Zone */
.layer-left {
    flex: 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    border-right: 1px solid #f0f0f0;
}

.brand-img-large {
    width: 100%;
    max-width: 320px;
    height: auto;
    object-fit: contain;
}

/* Text Zone */
.layer-right {
    flex: 1.5;
    padding: 50px;
    display: flex;
    flex-direction: column;
}

.layer-right h3 {
    color: var(--purple-main);
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.scroll-content {
    overflow-y: auto;
    padding-right: 10px;
}

.scroll-content p {
    line-height: 1.6;
    color: #444;
    margin-bottom: 15px;
}

.scroll-content ul {
    list-style: none;
    padding: 0;
}

.scroll-content li {
    background: #f8f6ff;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 10px;
    border-left: 4px solid var(--purple-main);
    font-size: 0.9rem;
}

/* --- MOBILE BREAKPOINT --- */
@media (max-width: 991px) {
    .edu-scroll-lock {
        height: 350vh;
    }

    .scroll-animation-zone {
        top: 2vh;
        height: 95vh;
    }

    .zoom-layer {
        height: 85vh; /* Taller on mobile to fit text */
    }

    .layer-inner {
        flex-direction: column; /* Stack vertically */
    }

    .layer-left {
        flex: 0 0 180px; /* Fixed height for logo area */
        padding: 20px;
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
    }

    .brand-img-large {
        max-width: 140px;
    }

    .layer-right {
        flex: 1;
        padding: 25px;
        overflow: hidden; /* Inner content will scroll */
    }

    .layer-right h3 {
        font-size: 1.3rem;
        text-align: center;
    }

    .scroll-content {
        font-size: 0.85rem;
    }
}

/* --- SMALL MOBILE FIX --- */
@media (max-width: 480px) {
    .zoom-layer {
        width: 95%;
        border-radius: 20px;
    }
    .layer-left { flex: 0 0 140px; }
    .brand-img-large { max-width: 110px; }
}


/* Styling for the info badges inside cards */
.info-badge {
    background: var(--purple-main);
    color: white;
    padding: 5px 15px;
    border-radius: 50px;
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Market Summary Grid */
.market-summary-boxes {
    padding: 80px 20px;
    background: #fff;
}

/* .sub-title {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 40px;
    color: var(--log-navy);
} */

.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.market-box {
    padding: 30px;
    background: var(--bg-light);
    border-radius: 20px;
    text-align: center;
    transition: transform 0.3s ease;
    border: 1px solid #eee;
}

.market-box:hover {
    transform: translateY(-10px);
    background: #fff;
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}

.market-box i {
    font-size: 2.5rem;
    color: var(--purple-main);
    margin-bottom: 20px;
}

.market-box h4 {
    margin-bottom: 15px;
    font-size: 1.3rem;
    color: var(--log-navy);
}

.market-box p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Mobile Adjustments for Grid */
@media (max-width: 768px) {
    .market-summary-boxes {
        padding: 50px 15px;
    }
    .sub-title {
        font-size: 1.8rem;
    }
}
   /* knowledge ends */





   /* reviews start  */
   .testimonials-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
    transition: all 0.5s ease;
}

.testimonial-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-bottom: 4px solid #112847; /* Your purple theme */
    display: flex;
    flex-direction: column;
}

.client-info {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.client-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #6f42c1;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 15px;
}

.stars {
    color: #ffc107;
    margin-bottom: 10px;
}

.testimonial-text {
    font-style: italic;
    color: #555;
    line-height: 1.6;
}

.client-name {
    font-weight: 700;
    color: #333;
    display: block;
}

.test-main-title {
       font-size: 2.8rem;
       color: var(--nav-bg);
       margin: 10px 0;
       font-weight: 800;
       text-align: center;
   }

.load-more-wrapper { margin-top: 30px; text-align: center; }
.testimonial-card span.fw-bold {
    display: inline-block;
    white-space: nowrap;    /* keeps name in one line */
    font-size: 16px;
}
.testimonial-card .d-flex {
    display: flex;
    align-items: center;
    gap: 10px;              /* space between circle and name */
}

   /* reviews end */





/* market prices start */

    :root {
    --ticker-bg: #1a1a1a;
    --up-color: #2ecc71;
    --down-color: #e74c3c;
}

.ticker-wrap {
    width: 100%;
    overflow: hidden;
    background-color: var(--nav-bg);
    padding: 20px 0;
    border-bottom: 2px solid var(--accent-purple);
    white-space: nowrap;
}

.ticker {
    display: inline-block;
    padding-left: 100%;
    animation: ticker-move 50s linear infinite;
}

.ticker:hover {
    animation-play-state: paused; /* Pause on hover for easier reading */
}

.ticker__item {
    display: inline-block;
    padding: 0 30px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: white;
}

.ticker__name {
    font-weight: 700;
    color: #bbb;
    margin-right: 8px;
}

.ticker__price {
    font-weight: 500;
    color: white;
}

.ticker__pct {
    margin-left: 8px;
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.ticker__pct.up { color: var(--up-color); }
.ticker__pct.down { color: var(--down-color); }

@keyframes ticker-move {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* Responsive adjust */
@media (max-width: 768px) {
    .ticker-wrap { padding: 8px 0; }
    .ticker__item { padding: 0 15px; font-size: 0.8rem; }
}

/* market prices end */



/* Interactive Animations */
.zoom-layer, .info-card, .contact-card, .testimonial-card, .calc-card, .swp-card, .stp-card, .ret-planner-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.zoom-layer:hover, .info-card:hover, .testimonial-card:hover, .calc-card:hover, .swp-card:hover, .stp-card:hover, .ret-planner-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(17, 40, 71, 0.15) !important;
}
.contact-card:hover {
    box-shadow: 0 25px 60px rgba(106, 27, 154, 0.15) !important;
}
.btn, .btn-send, .know-view-btn, .client-login {
    transition: all 0.3s ease;
}
.btn:active, .btn-send:active, .know-view-btn:active, .client-login:active {
    transform: scale(0.96);
}


/* Market Grid Styles */
.market-summary-boxes { padding: 60px 0; background: #fff; }
.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}
.market-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.market-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}
.market-box i {
    font-size: 2.5rem;
    color: var(--purple-main);
    margin-bottom: 20px;
}
.market-box h4 {
    color: var(--navy);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 15px;
}
.market-box p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
}
.sub-title {
    color: var(--purple-main);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 1rem;
    text-align: center;
}