/* Reset and Base */
         * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         }
         html {
         scroll-behavior: smooth;
         }
         /* Thin scrollbar for Chrome, Edge, Safari */
         ::-webkit-scrollbar {
         width: 6px;
         }
         ::-webkit-scrollbar-track {
         background: #f4f4f4;
         }
         ::-webkit-scrollbar-thumb {
         background-color:rgb(75, 74, 74);
         border-radius: 10px;
         border: 1px solid #f4f4f4;
         }
         .session-msg {
         padding: 10px 15px;
         border-radius: 5px;
         margin: 10px auto;
         width: fit-content;
         max-width: 90%;
         font-size: 14px;
         font-weight: 500;
         opacity: 1;
         transition: opacity 0.6s ease;
         z-index: 1000;
         }

         .session-msg.error {
            background-color: #ffdddd;
            color: #a70000;
            border: 1px solid #e60000;
         }

         .session-msg.success {
            background-color: #ddffdd;
            color: #007000;
            border: 1px solid #00c400;
         }
         body {
         font-family: 'Poppins', sans-serif;
         background: #f4f4f4;
         color: #333;
         scrollbar-width: thin;
         }
         /* Navbar */
         .navbar {
         display: flex;
         position: fixed;
         top: 0;
         width: 100%;
         background: #f0f0f0;
         color: #323232;
         padding: 1.2rem 2rem;
         justify-content: space-between;
         align-items: center;
         z-index: 10;
         }
         .logo {
         display: flex;
         align-items: center;
         gap: 0.5rem;
         font-weight: bold;
         }
         .logo-img {
         width: 40px;
         height: auto;
         }
         .logo-text {
         display: flex;
         flex-direction: column;
         justify-content: center; /* vertical center */
         align-items: left;     /* horizontal center */
         line-height: .5 ;
         }
         .logo-text .line1 {
         font-size: 1.3rem;
         }
         .logo-text .line2 {
         font-size: 1.2rem;
         }
         .nav-links {
         display: flex;   /* always flex on desktop */
         gap: 1.5rem;
         }
         .nav-links.active {
         opacity: 1;
         visibility: visible;
         }
         .nav-links a {
         color: #323232;
         text-decoration: none;
         font-weight: 500;
         text-align: center;
         transition: color 0.3s;
         padding-bottom: 4px; /* space for underline */
         }
         .nav-links a:hover {
         color: #C51D39;
         border-bottom:2px solid #C51D39;
         }
         .nav-links a.active {
         color: #C51D39;
         font-weight:bold;
         }
         /* Login button */
         .login-btn {
         position: relative;
         overflow: hidden;
         background: #C51D39;
         border: 2px solid #C51D39;
         color: white;
         padding: 0.5rem 1rem;
         font-weight: bold;
         cursor: pointer;
         border-radius: 5px;
         z-index: 1;
         transition: color 0.4s ease;
         }
         .login-btn::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 0%;
         height: 100%;
         background: white;
         z-index: -1;
         transition: width 0.4s ease;
         }
         .login-btn:hover::before {
         width: 100%;
         }
         .login-btn:hover {
         color: #C51D39;
         }
         /* Toggle hamburger icon */
         .toggle {
         display: none;
         font-size: 1.8rem;
         cursor: pointer;
         color: #323232;
         user-select: none;
         z-index: 1100;
         background: transparent;
         border: none;
         padding: 0;
         position: relative;
         font-weight: bold;
         transition: transform 0.5s ease;
         }
         /* Toggle active state - rotate & X effect */
         .toggle.active {
         transform: rotate(90deg);
         font-size: 2rem;
         color: transparent; /* Hide hamburger character */
         }
         /* Create X using pseudo-elements */
         .toggle.active::before,
         .toggle.active::after {
         content: '';
         position: absolute;
         left: 0;
         top: 50%;
         width: 100%;
         height: 2px;
         background-color: #C51D39;
         transition: all 0.3s ease;
         }
         .toggle.active::before {
         transform: rotate(45deg);
         }
         .toggle.active::after {
         transform: rotate(-45deg);
         }
         .hero {
         height: 100vh;
         background: linear-gradient(to right, #C51D39, rgb(239, 100, 100));
         background-image: url('../images/background.png');
         background-size: cover;
         background-position: center;
         display: flex;
         justify-content: center;
         align-items: center;
         text-align: left;
         position: relative;
         overflow: hidden;
         color: white;
         padding-top: 60px;
         }
         .hero-container {
         display: flex;
         align-items: center;
         justify-content: center;
         max-width: 1200px;
         width: 100%;
         padding: 0 2rem;
         gap: 3rem;
         z-index: 2;
         flex-wrap: wrap;
         }
         .hero-content {
         flex: 1;
         animation: fadeInUp 1.5s ease-out forwards;
         padding: 2rem;
         }
         .hero-content h1 {
         font-size: 3.5rem;
         font-weight: 900;
         letter-spacing: 2px;
         margin-bottom: .5rem;
         color: #C51D39;
         }
         .hero-content .subheading {
         font-size: 2.5rem;
         font-weight: 300;
         padding-top: 10px;
         opacity: 0.95;
         color: #C51D39;
         }
         .hero-image {
         flex: 1;
         display: flex;
         justify-content: center;
         align-items: center;
         }
         .hero-phone {
         height: 500px;
         max-width: 100%;
         object-fit: contain;
         animation: floatUp 3s ease-in-out forwards;
         }
         .wave {
         position: absolute;
         bottom: 0;
         width: 100%;
         z-index: 0;
         }
        
         @media (max-width: 768px) {
         .hero {
         padding-top: 40px;
         height: auto;
         text-align: center;
         }
         .hero-container {
         flex-direction: column;
         gap: 2rem;
         padding: 0 1rem;
         }
         .hero-content {
         padding: 1.5rem;
         backdrop-filter: none; /* Optional: less blur on small screens */
         -webkit-backdrop-filter: none;
         margin-top:20px;
         }
         .hero-content h1 {
         font-size: 2.2rem;
         }
         .hero-content .subheading {
         font-size: 1.1rem;
         }
         .hero-phone {
         height: 300px;
         }
         }
         /* Animations */
         @keyframes fadeInUp {
         0% {
         transform: translateY(30px);
         opacity: 0;
         }
         100% {
         transform: translateY(0);
         opacity: 1;
         }
         }
         @keyframes floatUp {
         0% {
         transform: translateY(60px);
         opacity: 0;
         }
         100% {
         transform: translateY(0);
         opacity: 1;
         }
         }
         .section {
         min-height: 100vh;
         padding: 5rem 2rem;
         display: flex;
         flex-direction: column;
         justify-content: center;
         background: white;
         text-align: center;
         transition: transform 0.3s ease; /* smooth parallax */
         }
         /* Parallax scroll effect */
         .section:nth-child(even) {
         background-image: url('../images/background.png');
         background-size: cover;
         background-position: center;
         }
         .section h2 {
         font-size: 2.5rem;
         margin-bottom: 1rem;
         }
         /* Modal base */
         .modal {
         display: none; 
         position: fixed;
         z-index: 9999;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         overflow: auto;
         background-color: rgba(0, 0, 0, 0.5); /* dim background */
         }
         /* Modal content */
         .modal-content {
         background-color: #fff;
         position: relative;
         margin: 10% auto;
         padding: 2rem;
         border-radius: 8px;
         width: 500px;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
         overflow: hidden;
         z-index: 1;
         }
         .modal-content::before {
         content: "";
         position: absolute;
         inset: 0;
         background-image: url('../images/background.png');
         background-size: cover;
         background-position: center;
         opacity: 0.5; /* Adjust this value to control image transparency */
         z-index: 0;
         }
         .modal-content * {
         position: relative;
         z-index: 1;
         }
         /* Close button */
         .modal .close {
         position: absolute;
         right: 15px;
         top: 10px;
         font-size: 24px;
         font-weight: bold;
         color: #333;
         cursor: pointer;
         }
         /* Form inputs */
         .modal-content form input {
         width: 100%;
         padding: 0.6rem;
         margin: 0.5rem 0 1rem;
         border: 1px solid #ccc;
         border-radius: 4px;
         font-size: 1rem;
         }
         .modal-logo {
         display: block;
         margin: 0 auto 1rem;
         width: 80px; /* Adjust size as needed */
         height: auto;
         }
         /* Submit button */
         .login-submit {
         background: #C51D39;
         color: white;
         border: none;
         padding: 0.7rem;
         margin-top:20px;
         width: 100%;
         border-radius: 4px;
         font-weight: bold;
         font-size: 1rem;
         cursor: pointer;
         transition: background 0.3s ease;
         }
         .login-submit:hover {
         background: #C51D39;
         }
        .password-wrapper {
            position: relative;
            width: 100%;
            }

            .password-wrapper input {
            width: 100%;
            padding-right: 2.7rem; /* ensure space for the icon */
            height: 44px; /* optional: ensures consistent height */
            line-height: 1.5;
            box-sizing: border-box;
            }

            .toggle-password {
            position: absolute;
            top: 50%;
            right: 12px;
            transform: translateY(-50%);
            cursor: pointer;
            font-size: 1.4rem;
            color: #C51D39;
            z-index: 2;
            height: 100%;
            display: flex;
            align-items: center;
            }
            .forgot-password {
            text-align: right;
            margin-top: -0.5rem;
            margin-bottom: 1rem;
            }

            .forgot-password a {
            font-size: 0.9rem;
            color: #C51D39;
            text-decoration: none;
            transition: color 0.3s ease;
            }

            .forgot-password a:hover {
            color: #a7182f;
            text-decoration: underline;
            }
        
            .error-message {
            color: #ff4d4d;
            font-size: 0.85rem;
            margin-top: -0.5rem;
            margin-bottom: 0.5rem;
            display: block;
            }
         /* Responsive styles */
         @media (max-width: 768px) {
         .nav-links {
         position: absolute;
         top: 60px;
         right: 0;
         width: 100%;
         background: #f0f0f0;
         color: #323232;
         flex-direction: column;
         display: flex; /* Keep flex to allow transition */
         gap: 0;
         padding: 1rem 0;
         z-index: 999;
         /* Override initial opacity and visibility */
         opacity: 0;
         visibility: hidden;
         transition: opacity 1s ease, visibility 1s ease;
         pointer-events: none; /* prevent clicks when hidden */
         }
         .nav-links.active {
         opacity: 1;
         visibility: visible;
         pointer-events: auto;
         }
         .nav-links a {
         color: #323232;
         padding: 0.8rem 0;
         font-size: 1.2rem;
         }
         /* Show toggle */
         .toggle {
         display: block;
         }
         /* Arrange toggle and login side by side */
         .navbar {
         padding-right: 1rem;
         }
         .nav-buttons {
         display: flex;
         align-items: center;
         gap: 0.8rem;
         }
         .modal-content {
         width: 90%;
         height: auto;
         margin: 20% auto;
         padding: 1.5rem;
         }
         .login-submit {
         font-size: 0.95rem;
         }
         .modal-content form input {
         font-size: 0.95rem;
         }
         }
         .site-footer {
         background-color: #222;
         color: #fff;
         padding: 2rem 1rem 1rem;
         font-family: 'Helvetica Neue', sans-serif;
         }
         .footer-container {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         gap: 2rem;
         max-width: 1200px;
         margin: 0 auto;
         }
         .footer-left {
         flex: 1 1 300px;
         }
         .footer-left h3 {
         font-size: 1.8rem;
         margin-bottom: 0.5rem;
         }
         .footer-left p {
         font-size: 0.95rem;
         line-height: 1.5;
         max-width: 400px;
         }
         .footer-right {
         flex: 1 1 200px;
         display: flex;
         align-items: center;
         justify-content: flex-end;
         }
         .footer-links {
         list-style: none;
         padding: 0;
         display: flex;
         flex-wrap: wrap;
         gap: 1.5rem;
         }
         .footer-links a {
         text-decoration: none;
         color: #ccc;
         transition: color 0.3s ease;
         }
         .footer-links a:hover {
         color: #fff;
         }
         .footer-bottom {
         text-align: center;
         padding-top: 1rem;
         font-size: 0.9rem;
         color: #aaa;
         border-top: 1px solid #444;
         margin-top: 2rem;
         }
         /* ✅ Responsive adjustments */
         @media (max-width: 768px) {
         .footer-container {
         flex-direction: column;
         text-align: center;
         align-items: center;
         }
         .footer-right {
         justify-content: center;
         }
         .footer-links {
         justify-content: center;
         }
         }
         @media (max-width: 480px) {
         .footer-left h3 {
         font-size: 1.5rem;
         }
         .footer-left p,
         .footer-links a {
         font-size: 0.85rem;
         }
         .footer-links {
         gap: 1rem;
         }
         }
         /* Animations */
         @keyframes fadeInUp {
         from {
         transform: translateY(20px);
         opacity: 0;
         }
         to {
         transform: translateY(0);
         opacity: 1;
         }
         }