* {
	    margin: 0;
	    padding: 0;
	    box-sizing: border-box;
	    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}
	
	body {
	    background-color: #0a0a0a;
	    color: #ffffff;
	    overflow-x: hidden;
	}
	
	/* =========================================
	   HERO SECTION & VIDEO BACKGROUND
	   ========================================= */
	.hero-section {
	    position: relative;
	    width: 100%;
	    height: 100vh;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    text-align: center;
	    overflow: hidden; /* Video agar bada ho toh hide ho jaye */
	}
	
	.hero-video {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    object-fit: cover; /* Video stretch nahi hoga, ekdum perfect fit aayega */
	    z-index: 0;
	}
	
	.overlay {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.6); /* 60% dark taaki video ke upar ka text chamke */
	    z-index: 1;
	}
	
	/* Ensure Navbar and Content stays ABOVE the video */
	.navbar-modern, .hero-content-center {
	    z-index: 2; 
	}
	

	/* =========================================
	   NEW CENTERED HERO CONTENT (UPDATED SMOOTH UI)
	   ========================================= */
	   
	   .hero-content-center {
	       position: relative;
	       z-index: 2;
	       max-width: 900px;
	       margin: 0 auto;
	       margin-top: 150px; /* Ye line text ko navbar ke niche dhakelegi */
	   }  
	   
	  
	.hero-content-center h1 {
	    font-size: 55px; /* 70px se 55px kar diya taaki lamba naam smooth dikhe */
	    font-weight: 800;
	    line-height: 1.2;
	    margin-bottom: 20px;
	    color: #ffffff;
	    letter-spacing: -0.5px; /* Thoda tight aur premium look ke liye */
	}
	
	/* Premium Gradient Effect on Text */
	.text-gradient {
	    background: linear-gradient(90deg, #ffb400, #ff5e00);
	    -webkit-background-clip: text;
	    -webkit-text-fill-color: transparent;
	}
	
	.hero-content-center p {
	    font-size: 18px;
	    color: #d1d1d1;
	    line-height: 1.6;
	    margin-bottom: 45px;
	    max-width: 750px;
	    margin-left: auto;
	    margin-right: auto;
	}
	
	/* =========================================
	   SLEEK ENTERPRISE BUTTONS
	   ========================================= */
	.action-buttons-center {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    gap: 20px; /* Gap thoda kam kiya taaki compact lage */
	}
	
	/* 1st Button - Orange */
	.btn-primary-large {
	    background: #ffb400;
	    color: #000000;
	    padding: 10px 28px; /* Padding kam karke button chota kar diya */
	    border-radius: 6px; 
	    font-size: 13px; /* Font size bhi thoda chota aur sharp kar diya */
	    font-weight: 700;
	    text-transform: uppercase;
	    letter-spacing: 1px;
	    text-decoration: none;
	    transition: all 0.3s ease;
	    border: 2px solid #ffb400;
	}
	.btn-primary-large:hover {
	    background: transparent;
	    color: #ffb400;
	    /* transform wali line hata di, ab button apni jagah par fix rahega */
	    box-shadow: 0 5px 15px rgba(255, 180, 0, 0.2); /* Halka sa glow effect rakha hai */
	}
	
	/* 2nd Button - White */
	.btn-secondary-large {
	    background: rgba(255, 255, 255, 0.05); 
	    color: #ffffff; 
	    padding: 10px 28px; /* Same choti padding */
	    border-radius: 6px; 
	    font-size: 13px; /* Same chota font */
	    font-weight: 700;
	    text-transform: uppercase;
	    letter-spacing: 1px;
	    text-decoration: none;
	    transition: all 0.3s ease;
	    border: 2px solid rgba(255, 255, 255, 0.5); 
	}
	.btn-secondary-large:hover {
	    background: #ffffff; 
	    color: #000000; 
	    border-color: #ffffff;
	    /* Yahan se bhi udne wala effect hata diya */
	}
	
	/* =========================================
	   HERO FOOTER FIXED (Icons wapas lane ke liye)
	   ========================================= */
	.hero-footer {
	    position: relative;
	    z-index: 2;
	    width: 100%;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 0 60px 30px 60px; /* Navbar jaisa left-right gap set kiya */
	    margin: 0; /* 🔴 Puraana margin hataya taaki overflow na ho */
	    margin-top: auto; /* Isse ye ekdum niche bottom pe fix rahega */
	    box-sizing: border-box; /* 🔴 Ye super-trick hai jo footer ko screen ke bahar nahi jane degi */
	}
	
	.social-icons {
	    margin-left: 70px; /* 🔴 Ye tere social media icons ko right side push kar dega taaki wo floating buttons se na takraye */
	}
	
	.social-icons a {
	    color: #fff;
	    margin-right: 20px;
	    font-size: 18px;
	    transition: color 0.3s;
	}
	
	.social-icons a:hover {
	    color: #ffb400; 
	}
	
	/* =========================================
	   Premium Cascading Scroll Arrow (Unclickable)
	   ========================================= */
	   .scroll-arrow {
	       position: absolute;
	       bottom: 15px; /* 40px se kam karke 15px kar diya taaki aur niche chala jaye */
	       left: 50%;
	       transform: translateX(-50%);
	       z-index: 10;
	       display: flex;
	       flex-direction: column; 
	       align-items: center;
	       pointer-events: none;
	   }
	
	.scroll-arrow i {
	    color: #ffffff;
	    font-size: 20px; 
	    margin: -4px 0; 
	    opacity: 0; 
	    animation: chevronFade 1.5s infinite; 
	}
	
	.scroll-arrow .arrow-1 {
	    animation-delay: 0s;
	}
	
	.scroll-arrow .arrow-2 {
	    animation-delay: 0.2s;
	}
	
	@keyframes chevronFade {
	    0% {
	        opacity: 0;
	        transform: translateY(-10px);
	    }
	    50% {
	        opacity: 1;
	        transform: translateY(0);
	    }
	    100% {
	        opacity: 0;
	        transform: translateY(10px);
	    }
	}
	
	.contact-email a {
	    color: #fff;
	    text-decoration: none;
	    font-size: 15px;
	    letter-spacing: 1px;
	    transition: color 0.3s;
	}
	
	.contact-email a:hover {
	    color: #ffb400; 
	}
	
	
	.distributors-section {
	    width: 100%;
	    background-color: #ffffff;
	    padding: 80px 40px;
	    text-align: center;
	}
	
	.distributors-container h2 {
	    font-size: 36px;
	    font-weight: 700;
	    margin-bottom: 50px;
	    color: #000000;
	}
	
	.distributors-container .highlight-text {
	    color: #ffb400; 
	}
	
	
	.slider-area {
	    width: 100%;
	    overflow: hidden; 
	    padding: 20px 0;
	    position: relative;
	}
	
	
	/* =========================================
	   LOGO SLIDER (COMPACT SPACING)
	   ========================================= */
	.logo-track {
	    display: flex;
	    align-items: center;
	    gap: 40px; /* 🔴 80px se kam karke 40px kar diya taaki gap kam ho jaye */
	    width: max-content; 
	    animation: scrollLeftToRight 25s linear infinite; 
	}
	
	.logo-track img {
	    height: 85px; 
	    width: 140px; /* 🔴 180px se kam karke 140px kiya, taaki extra khali jagah kam ho */
	    object-fit: contain; 
	    padding: 0 5px; /* Padding bhi kam kardi */
	}
	
	   /* Hover wala pura block bhi hata diya hai taaki mouse le jaane par kuch na ude */
	
	/* Hover karne par wapas color me aayenge aur thode bade honge */
	.logo-track img:hover {
	    filter: grayscale(0%);
	    transform: scale(1.1);
	}
	
	
	@keyframes scrollLeftToRight {
	    0% {
	        transform: translateX(-50%); 
	    }
	    100% {
	        transform: translateX(0); 
	    }
	}
	
	
	
	
	.products-section {
	    width: 100%;
	    background-color: #0a0a0a;
	    padding: 30px 40px;
	    text-align: center;
	}
	
	.products-container h2 {
	    font-size: 32px;
	    font-weight: 700;
	    margin-bottom: 25px;
	    color: #ffffff;
	}
	
	.products-container .highlight-text {
	    color: #ffb400;
	}
	
	
	.products-grid {
	    display: grid;
	    grid-template-columns: repeat(4, 1fr);
	    gap: 12px;
	    max-width: 1250px;
	    margin: 0 auto;
		
	}
	
	
	.product-card {
	    position: relative;
	    display: block;
	    height: 150px; 
	    border-radius: 8px;
	    overflow: hidden; 
	    background-color: #222;
	    border: 1px solid rgba(255, 255, 255, 0.1);
	    cursor: default;
	    transition: all 0.3s ease; /* Smooth animation ke liye */
	}
	
	.product-card img {
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	    opacity: 0.5;
	    transition: all 0.4s ease; /* Image smooth change hogi */
	}
	.product-card:hover img {
	    opacity: 1; 
	    transform: scale(1.1); 
	}
	
	/* Mouse aane par image clear aur thodi badi hogi */
	/* Mouse aane par box highlight hoga */
	.product-card:hover {
	    border-color: #ffb400;
	    box-shadow: 0 8px 20px rgba(255, 180, 0, 0.25);
	    transform: translateY(-4px); /* Halka sa upar uthega */
	}
	
	
	/* Mouse aane par text gayab (opacity 0) ho jayega */
	.product-card:hover .default-title {
	    opacity: 0; 
	}
	
	.default-title {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    color: #ffffff;
	    font-size: 14px; 
	    font-weight: 700;
	    letter-spacing: 1px;
	    text-transform: uppercase;
	    z-index: 2;
	    width: 100%;
	    transition: opacity 0.3s ease; /* Text smooth fade out hoga */
	}

	
	@media (max-width: 1024px) {
	    .products-grid {
	        grid-template-columns: repeat(3, 1fr);
	    }
	}
	
	@media (max-width: 768px) {
	    .products-grid {
	        grid-template-columns: repeat(2, 1fr);
	    }
	}
	
	@media (max-width: 480px) {
	    .products-grid {
	        grid-template-columns: 1fr;
	    }
	}
	
	
	.modern-footer {
	    background-color: #050505;
	    color: #a0a0a0;
	    border-top: 1px solid rgba(255, 255, 255, 0.05);
	    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}
	
	
	.footer-cta {
	    text-align: center;
	    padding: 60px 20px;
	    background: linear-gradient(to bottom, #0a0a0a, #050505);
	    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}
	
	.footer-cta h2 {
	    color: #ffffff;
	    font-size: 32px;
	    margin-bottom: 15px;
	    font-weight: 700;
	}
	
	.footer-cta p {
	    font-size: 16px;
	    margin-bottom: 30px;
	    color: #cccccc;
	}
	
	
	/* =========================================
	   FOOTER SPACING FIX (4 Columns se 3 Columns)
	   ========================================= */
	.footer-content {
	    display: grid;
	    /* 🔴 NAYA CHANGE: Puraana '2.5fr 1fr 1fr 1.5fr' tha, ab ye rahega */
	    grid-template-columns: 2.5fr 1fr 1.5fr; 
	    gap: 40px;
	    max-width: 1300px;
	    margin: 0 auto;
	    padding: 60px 40px;
	}
	
	
	.footer-brand p {
	    font-size: 14px;
	    line-height: 1.7;
	    margin-bottom: 25px;
	    padding-right: 20px;
	}
	
	.footer-contact-direct {
	    display: flex;
	    flex-direction: column;
	    gap: 12px;
	}
	
	.footer-contact-direct a {
	    color: #ffffff;
	    text-decoration: none;
	    font-size: 14px;
	    display: flex;
	    align-items: center;
	    gap: 10px;
	    transition: color 0.3s;
	}
	
	.footer-contact-direct a:hover {
	    color: #ffb400; /* Orange highlight */
	}
	
	
	.footer-links-group h4, .footer-newsletter h4 {
	    color: #ffffff;
	    font-size: 16px;
	    margin-bottom: 25px;
	    font-weight: 600;
	    letter-spacing: 0.5px;
	}
	
	.footer-links-group ul {
	    list-style: none;
	    display: flex;
	    flex-direction: column;
	    gap: 12px;
	}
	
	.footer-links-group a {
	    color: #a0a0a0;
	    text-decoration: none;
	    font-size: 14px;
	    transition: all 0.3s ease;
	}
	
	.footer-links-group a:hover {
	    color: #ffb400;
	    padding-left: 5px; /* Slight move effect */
	}
	
	
	.footer-newsletter p {
	    font-size: 13px;
	    line-height: 1.6;
	    margin-bottom: 20px;
	}
	
	.newsletter-form {
	    display: flex;
	    margin-bottom: 20px;
	}
	
	.newsletter-form input {
	    background: rgba(255, 255, 255, 0.05);
	    border: 1px solid rgba(255, 255, 255, 0.1);
	    padding: 12px 15px;
	    color: #fff;
	    border-radius: 4px 0 0 4px;
	    outline: none;
	    width: 100%;
	    font-size: 13px;
	    transition: border-color 0.3s;
	}
	
	.newsletter-form input:focus {
	    border-color: #ffb400;
	}
	
	.newsletter-form button {
	    background: #ffb400;
	    color: #000;
	    border: none;
	    padding: 0 20px;
	    cursor: pointer;
	    border-radius: 0 4px 4px 0;
	    transition: background 0.3s;
	}
	
	.newsletter-form button:hover {
	    background: #ffffff;
	}
	
	.btn-download-modern {
	    display: inline-block;
	    color: #ffffff;
	    text-decoration: none;
	    font-size: 13px;
	    font-weight: 600;
	    padding-bottom: 2px;
	    border-bottom: 1px solid #ffb400;
	    transition: color 0.3s;
	}
	
	.btn-download-modern:hover {
	    color: #ffb400;
	}
	
	
	.footer-bottom-bar {
	    max-width: 1300px;
	    margin: 0 auto;
	    padding: 25px 40px;
	    border-top: 1px solid rgba(255, 255, 255, 0.05);
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    flex-wrap: wrap;
	    gap: 20px;
	}
	
	.copyright {
	    font-size: 13px;
	}
	
	.copyright .links {
	    margin-left: 10px;
	}
	
	.copyright a {
	    color: #a0a0a0;
	    text-decoration: none;
	    transition: color 0.3s;
	}
	
	.copyright a:hover {
	    color: #ffb400;
	}
	
	.social-icons-modern {
	    display: flex;
	    gap: 20px;
	}
	
	.social-icons-modern a {
	    color: #ffffff;
	    font-size: 16px;
	    background: rgba(255, 255, 255, 0.05);
	    width: 36px;
	    height: 36px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    border-radius: 50%;
	    text-decoration: none;
	    transition: all 0.3s ease;
	}
	
	.social-icons-modern a:hover {
	    background: #ffb400;
	    color: #000;
	    transform: translateY(-3px);
	}
	
	
	
	@media (max-width: 1024px) {
	    .footer-content {
	        grid-template-columns: 1fr 1fr;
	    }
	}
	@media (max-width: 768px) {
	    .footer-content {
	        grid-template-columns: 1fr;
	    }
	    .footer-bottom-bar {
	        flex-direction: column;
	        text-align: center;
	    }
	    .social-icons-modern {
	        justify-content: center;
	    }
	}
	
	
	
	/* =========================================
	   About Us Section
	   ========================================= */
	.about-section {
	    background-color: #050505; /* Slightly darker than hero for contrast */
	    padding: 100px 40px;
	    border-top: 1px solid rgba(255, 255, 255, 0.05);
	}
	
	.about-container {
	    max-width: 1200px;
	    margin: 0 auto;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    gap: 60px;
	}
	
	/* Left Content */
	.about-content {
	    flex: 1;
	    max-width: 55%;
	}
	
	.about-content h2 {
	    font-size: 36px;
	    font-weight: 700;
	    color: #ffffff;
	    margin-bottom: 10px;
	}
	
	.about-content .highlight-text {
	    color: #ffb400;
	}
	
	.about-subtitle {
	    font-size: 20px;
	    color: #cccccc;
	    font-weight: 400;
	    margin-bottom: 25px;
	}
	
	.about-content p {
	    font-size: 16px;
	    line-height: 1.7;
	    color: #a0a0a0;
	    margin-bottom: 20px;
	}
	
	.about-features {
	    list-style: none;
	    margin-top: 25px;
	}
	
	.about-features li {
	    font-size: 15px;
	    color: #ffffff;
	    margin-bottom: 15px;
	    display: flex;
	    align-items: center;
	    gap: 10px;
	}
	
	.about-features i {
	    color: #ffb400;
	    font-size: 18px;
	}
	
	/* Right Image */
	.about-image-wrapper {
	    flex: 1;
	    position: relative;
	}
	
	.about-image-wrapper img {
	    width: 100%;
	    border-radius: 12px;
	    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
	    border: 1px solid rgba(255, 255, 255, 0.1);
	}
	
	/* Floating Experience Badge */
	.experience-badge {
	    position: absolute;
	    bottom: -20px;
	    left: -20px;
	    background: #ffb400;
	    padding: 20px 30px;
	    border-radius: 8px;
	    display: flex;
	    align-items: center;
	    gap: 15px;
	    box-shadow: 0 10px 30px rgba(255, 180, 0, 0.3);
	}
	
	.experience-badge .years {
	    font-size: 36px;
	    font-weight: 800;
	    color: #000;
	}
	
	.experience-badge .text {
	    font-size: 14px;
	    font-weight: 600;
	    color: #000;
	    line-height: 1.2;
	    text-transform: uppercase;
	}
	
	/* Responsive for Mobile/Tablet */
	@media (max-width: 992px) {
	    .about-container {
	        flex-direction: column;
	    }
	    .about-content {
	        max-width: 100%;
	        text-align: center;
	    }
	    .about-features li {
	        justify-content: center;
	    }
	    .experience-badge {
	        bottom: -20px;
	        left: 50%;
	        transform: translateX(-50%);
	    }
	}
	
	/* =========================================
	   Why Choose Us / Expertise Section
	   ========================================= */
	.expertise-section {
	    background-color: #0a0a0a; /* Dark background */
		padding: 40px 20px; /* Top/Bottom padding 80px se 40px kardi */
		    background: #0a0a0a;
	    border-top: 1px solid rgba(255, 255, 255, 0.05);
	}
	
	.expertise-container {
	    max-width: 1200px;
	    margin: 0 auto;
	}
	
	.section-title-center {
	    text-align: center;
	    margin-bottom: 50px;
	}
	
	.section-title-center h2 {
	    font-size: 36px;
	    font-weight: 700;
	    color: #ffffff;
	    margin-bottom: 15px;
	}
	
	.section-title-center .highlight-text {
	    color: #ffb400; /* Tera theme color */
	}
	
	.section-title-center p {
	    font-size: 16px;
	    color: #cccccc;
	    max-width: 600px;
	    margin: 0 auto;
	}
	
	.expertise-grid {
	    display: grid;
	    grid-template-columns: repeat(3, 1fr); /* 4 se hata kar 3 column kar diya */
	    gap: 15px; 
	    max-width: 1200px;
	    margin: 0 auto;
	}
	
	/* Individual Card Styling */
	.expertise-card {
	    background-color: #111111;
	  padding: 25px 20px;
	    border-radius: 12px;
	    border: 1px solid rgba(255, 255, 255, 0.05);
	    text-align: center;
	    transition: all 0.3s ease;
	}
	
	/* Hover Animation */
	.expertise-card:hover {
	    transform: translateY(-10px); /* Card thoda upar aayega */
	    border-color: #ffb400; /* Border orange ho jayegi */
	    box-shadow: 0 10px 30px rgba(255, 180, 0, 0.1);
	}
	
	.expertise-card i {
	    font-size: 30px; 
	    color: #ffb400;
	    margin-bottom: 12px; 
	}
	
	.expertise-card h3 {
	    color: #ffffff;
	    font-size: 18px; 
	    margin-bottom: 8px; 
	}
	
	.expertise-card p {
	    color: #a0a0a0;
	    font-size: 13px; 
	    line-height: 1.4; 
	    margin: 0;
	}
	
	/* Mobile aur Tablet view ke liye (agar pehle se nahi hai toh add kar lo) */
	@media screen and (max-width: 992px) {
	    .expertise-grid {
	        grid-template-columns: repeat(2, 1fr); /* Tablet par 2 column */
	    }
	}

	@media screen and (max-width: 768px) {
	    .expertise-grid {
	        grid-template-columns: 1fr; /* Mobile par 1 column */
	    }
	}
	
	/* Contact Us Section */
	.contact-section {
	    background-color: #050505;
	    padding: 80px 40px;
	    border-top: 1px solid rgba(255, 255, 255, 0.05);
	}
	
	.contact-container {
	    max-width: 600px; /* Form ko center aur compact rakhne ke liye */
	    margin: 0 auto;
	}
	
	.contact-form {
	    display: flex;
	    flex-direction: column;
	    gap: 20px;
	}
	
	.contact-form input, 
	.contact-form textarea {
	    width: 100%;
	    padding: 15px 20px;
	    background: #111111;
	    border: 1px solid rgba(255, 255, 255, 0.1);
	    color: #ffffff;
	    border-radius: 8px;
	    font-size: 15px;
	    font-family: inherit;
	    transition: all 0.3s ease;
	}
	
	.contact-form input:focus, 
	.contact-form textarea:focus {
	    outline: none;
	    border-color: #ffb400; /* Tera orange theme color */
	    background: #1a1a1a;
	}
	
	/* =========================================
	   Contact Form Submit Button
	   ========================================= */
	.contact-form .btn-primary {
	    background: #ffb400; /* Tera orange theme color */
	    color: #000000; /* Black text */
	    padding: 16px 20px;
	    border-radius: 8px; /* Input boxes jaisa round */
	    font-size: 16px;
	    font-weight: 700;
	    text-transform: uppercase;
	    letter-spacing: 1.5px;
	    transition: all 0.3s ease;
	    margin-top: 10px;
	}
	
	.contact-form .btn-primary:hover {
	    background: #ffffff; /* Hover karne par white ho jayega */
	    color: #000000;
	    transform: translateY(-3px); /* Thoda upar uthega */
	    box-shadow: 0 10px 25px rgba(255, 180, 0, 0.3); /* Orange shadow aayegi */
	}
	
	/* =====================================================
	   SUCCESS TOAST (SINGLE LINE COMPACT)
	   ===================================================== */
	.toast-box {
	    position: fixed;
	    top: 100px;
	    right: 25px;
	    width: max-content; /* Extra space hata dega */
	    display: flex;
	    align-items: center; /* Ekdum center me layega */
	    gap: 12px;
	    padding: 12px 20px; /* Box ki height choti kar dega */
	    background: #111111;
	    color: #ffffff;
	    border-radius: 8px;
	    border-left: 5px solid #00d26a;
	    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
	    z-index: 99999;
	    
	    /* Animation - Hidden by default */
	    opacity: 0;
	    visibility: hidden;
	    pointer-events: none;
	    transform: translateX(120%);
	    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
	}

	.toast-box.show {
	    opacity: 1;
	    visibility: visible;
	    pointer-events: auto;
	    transform: translateX(0);
	}

	.toast-icon {
	    color: #00e676;
	    font-size: 20px; /* Icon thoda chota kiya */
	}

	.toast-text p {
	    margin: 0;
	    color: #ffffff;
	    font-size: 14px;
	    line-height: 1;
	}

	.toast-text p strong {
	    font-size: 15px;
	    margin-right: 5px;
	}
	
	/* =========================================
	   MOBILE RESPONSIVE NAVBAR (HAMBURGER MENU)
	   ========================================= */
	
	/* Hamburger Icon Design (By default hidden on Laptop) */
	.menu-toggle {
	    display: none;
	    flex-direction: column;
	    cursor: pointer;
	    gap: 6px;
	}
	
	.menu-toggle .bar {
	    width: 30px;
	    height: 3px;
	    background-color: #ffffff; /* Video ke upar White lines */
	    transition: all 0.3s ease;
	    border-radius: 5px;
	}
	
	/* Jab scroll karke niche aayenge (White navbar me lines Black ho jayengi) */
	.navbar-modern.scrolled .menu-toggle .bar {
	    background-color: #000000;
	}
	
	
	/* =========================================
	   1. HAMBURGER ICON DESIGN (Desktop pe hidden rahega)
	   ========================================= */
	.menu-toggle {
	    display: none;
	    flex-direction: column;
	    cursor: pointer;
	    gap: 6px;
	    margin-left: auto; /* Icon ko ekdum right side me dhakelne ke liye */
	}
	
	.menu-toggle .bar {
	    width: 30px;
	    height: 3px;
	    background-color: #ffffff; /* Video ke upar white lines */
	    transition: all 0.3s ease;
	    border-radius: 5px;
	}
	
	/* Niche aane par lines black ho jayengi */
	.navbar-modern.scrolled .menu-toggle .bar {
	    background-color: #000000;
	}
	
	/* =========================================
	   2. MOBILE RESPONSIVE (Max Width: 990px)
	   ========================================= */
	@media screen and (max-width: 990px) {
	    /* 3 lines wale icon ko dikhao */
	    .menu-toggle {
	        display: flex !important; 
	    }
	    
	    /* Normal laptop menu ko hide karo aur Dropdown banao */
	    .nav-menu {
	        display: none; 
	        flex-direction: column;
	        position: absolute;
	        top: 100%;
	        left: 0;
	        width: 100%;
	        background: #ffffff; 
	        padding: 20px 0;
	        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	        text-align: center;
	        gap: 10px;
	        margin: 0;
	    }
	    
	    /* Jab icon click hoga (JavaScript se) tab menu dikhega */
	    .nav-menu.active {
	        display: flex !important; 
	    }
	
	    /* List items ko center karo */
	    .nav-menu li {
	        width: 100%;
	        list-style: none; /* Dots hatao */
	    }
	
	    /* Mobile menu ke normal text ka color aur size */
	    .nav-menu li a {
	        color: #000000 !important; 
	        font-size: 16px;
	        padding: 10px 0;
	        display: block; 
	        text-decoration: none;
	    }
	
	    /* Contact Us button ko mobile dropdown me mast style do */
	    .nav-menu li a.btn-solid-nav {
	        display: inline-block;
	        background: #ffb400 !important; 
	        color: #000000 !important;      
	        padding: 10px 30px;
	        border-radius: 5px;
	        margin-top: 10px;
	        font-weight: 800;
	        width: auto;
	    }
	}
		
	
	
	
	
	
	/* =========================================
	   HERO BOTTOM CONTACT & PHONE HIGHLIGHT
	   ========================================= */
	.hero-bottom-contact {
	    display: flex;
	    align-items: center;
	    justify-content: flex-end; /* Right side me rakhne ke liye */
	    gap: 10px;
	}
	
	
	
	
	
	/* Beech ki line (Pipe) */
	.contact-divider {
	    color: #ffffff;
	    opacity: 0.5;
	}
	
	/* =========================================
	   PHONE AUR EMAIL DONO KA VIP HIGHLIGHT
	   ========================================= */
	
	
	/* Beech ki line (Pipe) jo dono ko alag karti hai */
	.contact-divider {
	    color: #ffffff;
	    opacity: 0.5;
	    font-size: 18px;
	    padding: 0 5px; /* Thoda space dene ke liye */
	}
	
	/* =========================================
	   PREMIUM HERO CONTACT BAR (BOTTOM RIGHT)
	   ========================================= */
	   /* =========================================
	      SIMPLE & CLEAN HERO CONTACT INFO
	      ========================================= */
	   .hero-bottom-contact {
	       display: flex;
	       align-items: center;
	       justify-content: flex-end;
	       gap: 10px;
	       /* Box, background, aur border sab hata diya */
	       background: transparent;
	       padding: 0;
	       border: none;
	       box-shadow: none;
	   }
	
	   /* Number aur Email ka simple text design */
	   .highlight-phone, .hero-email {
	       font-size: 16px !important;
	       font-weight: 700 !important; /* Ekdum clear aur bold */
	       text-decoration: none;
	       letter-spacing: 0.5px;
	       transition: color 0.3s ease;
	   }
	
	   .highlight-phone {
	       color: #ffb400 !important; /* Number Tera Orange rahega */
	   }
	
	   .hero-email {
	       color: #ffffff !important; /* Email White rahega */
	   }
	
	   /* Email par mouse le jane pe wo orange ho jayega */
	   .hero-email:hover {
	       color: #ffb400 !important;
	   }
	
	   /* Beech ki line (Pipe) */
	   .contact-divider {
	       color: #ffffff;
	       opacity: 0.5; /* Line thodi light rahegi */
	       font-size: 16px;
	       padding: 0 5px;
	   }
	
	
	   .highlight-phone {
	       color: #ffb400 !important; /* Number Tera Orange rahega */
	   }
	
	   .hero-email {
	       color: #ffffff !important; /* Email White rahega */
	   }
	
	   /* Email par mouse le jane pe wo bhi orange ho jayega */
	   .hero-email:hover {
	       color: #ffb400 !important;
	   }
	
	   /* Beech ki line (Pipe) */
	   .contact-divider {
	       color: #ffffff;
	       opacity: 0.3;
	       font-size: 18px;
	   }
	
	.highlight-phone {
	    color: #ffb400 !important; /* Phone tera brand orange rahega */
	}
	
	.hero-email {
	    color: #ffffff !important; /* Email ekdum crisp white rahega */
	    opacity: 0.9;
	}
	
	.highlight-phone i, .hero-email i {
	    font-size: 14px; /* Icons ka size */
	}
	
	/* 🔴 Premium Hover Effect (Smooth Lift) */
	.highlight-phone:hover, .hero-email:hover {
	    transform: translateY(-3px); /* Mouse aane par halka sa hawa me uthega */
	}
	
	.highlight-phone:hover {
	    text-shadow: 0 5px 15px rgba(255, 180, 0, 0.4); /* Halka sa VIP shadow */
	}
	
	.hero-email:hover {
	    color: #ffb400 !important; /* Email pe mouse le jaane par wo orange ho jayega */
	    opacity: 1;
	}
	
	/* Beech ki line (Pipe) */
	.contact-divider {
	    color: #ffffff;
	    opacity: 0.3; /* Line ko thoda light kar diya taaki disturb na kare */
	    font-size: 16px;
	}
	
	
	/* =========================================
	   MOBILE RESPONSIVE LOGO ADJUSTMENT
	   ========================================= */
	@media screen and (max-width: 990px) {
	 
	}
	

	/* =========================================
	   HERO SECTION - MOBILE RESPONSIVE FINAL
	   ========================================= */
	@media screen and (max-width: 768px) {

	    /* Fixed navbar ke niche se hero start hoga */
	    .hero-section {
	        height: auto;
	        min-height: 100svh;
	        padding-top: 95px;
	        padding-bottom: 25px;

	        justify-content: flex-start;
	        overflow: hidden;
	    }


	    /* Hero content ko upar push mat karo */
	    .hero-content-center {
	        position: relative;
	        z-index: 2;

	        width: 100%;
	        max-width: 100%;

	        margin: 0 auto;
	        padding: 30px 20px 0;

	        transform: none;
	    }


	    /* Main heading */
	    .hero-content-center h1 {
	        font-size: clamp(28px, 8vw, 34px);
	        line-height: 1.15;
	        margin-bottom: 18px;
	        letter-spacing: 0;
	    }


	    /* Hero description */
	    .hero-content-center p {
	        font-size: 14px;
	        line-height: 1.5;

	        padding: 0;
	        margin: 0 auto 25px;

	        max-width: 360px;
	    }


	    /* Buttons ek ke niche ek */
	    .action-buttons-center {
	        flex-direction: column;
	        align-items: center;

	        gap: 12px;

	        width: 100%;
	        padding: 0 10px;
	    }


	    .btn-primary-large,
	    .btn-secondary-large {
	        width: 100%;
	        max-width: 320px;

	        text-align: center;

	        padding: 14px 18px;
	        box-sizing: border-box;
	    }


	    /* Bottom social/contact information */
	    .hero-footer {
	        width: 100%;

	        flex-direction: column;
	        align-items: center;

	        margin-top: 35px;
	        padding: 0 20px 10px;

	        gap: 12px;
	    }


	    .social-icons {
	        margin: 0 auto;
	        text-align: center;
	    }


	    .social-icons a {
	        margin: 0 10px;
	    }


	    .hero-bottom-contact {
	        flex-direction: column;
	        align-items: center;
	        justify-content: center;

	        gap: 5px;
	    }


	    .highlight-phone,
	    .hero-email {
	        font-size: 14px !important;
	        text-align: center;
	    }


	    .contact-divider {
	        display: none;
	    }


	    /* Mobile me bottom arrow optional */
	    .scroll-arrow {
	        display: none;
	    }
	}
	
	/* =========================================
	   FIXED QUICK CONTACT WIDGET (LEFT SIDE)
	   ========================================= */
	.quick-contact-widget {
	    position: fixed;
	    left: 20px;       /* Screen ki left side se chipka hua */
	    bottom: 30px;     /* Niche se thoda upar taaki footer wale icons se na takraye */
	    z-index: 9999;    /* Sabse upar dikhne ke liye */
	    display: flex;
	    flex-direction: column; /* Dono buttons ek ke niche ek */
	    gap: 15px;        /* Dono ke beech ka gap */
	}
	
	.quick-contact-widget a {
	    width: 50px;
	    height: 50px;
	    border-radius: 50%; /* Ekdum gol (circle) button */
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    color: #ffffff;
	    font-size: 26px; /* Icon ka size */
	    text-decoration: none;
	    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Mast 3D shadow */
	    transition: all 0.3s ease;
	}
	
	.whatsapp-btn {
	    background-color: #25D366; /* Original WhatsApp Green color */
	}
	
	.phone-btn {
	    background-color: blue !important; /* 🔴 Orange se hata kar ekdum mast Yellow kar diya */
	}
	
	.email-btn {
	    background-color: #ea4335; 
	}
	/* Hover Effect: Jab mouse upar jayega toh buttons thode upar jump karenge */
	.quick-contact-widget a:hover {
	    transform: translateY(-5px) scale(1.1); 
	    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
	}
	
	/* =========================================
	   MOBILE RESPONSIVE (Agar mobile pe chota karna ho)
	   ========================================= */
	@media screen and (max-width: 768px) {
		.quick-contact-widget {
		    position: fixed;
		    left: 20px;       
		    bottom: 90px;  /* 🔴 ISKO KAM KARNA HAI */
		    /* ... baki code ... */
		}
	    .quick-contact-widget a {
	        width: 45px;
	        height: 45px;
	        font-size: 22px;
	    }
	}
	
	/* =========================================
	   PHONE ICON FIX (Icon ko palatne ke liye)
	   ========================================= */
	.phone-btn i {
	    transform: scaleX(-1); /* 🔴 Ye phone receiver ko flip karke ekdum seedha kar dega */
	}
	
	/* =========================================
	   MEGA MENU DROPDOWN (Grid Style - No Scroll)
	   ========================================= */
	
	/* Dropdown Container */
	.nav-dropdown {
	    position: relative;
	}
	
	/* Dropdown Box (White aur Grid Layout with Internal Scroll) */
	.dropdown-content {
	    display: none;
	    position: absolute;
	  top: calc(100% + 20px);
	    left: -200px; /* Thoda center align karne ke liye */
	    background-color: #ffffff; 
	    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
	    border-radius: 5px;
	    padding: 15px 20px; /* Padding thodi kam ki */
	    z-index: 2000;
	    
	    /* Grid system for Mega Menu */
	    grid-template-columns: repeat(4, 1fr); 
	    gap: 2px 25px; /* 🔴 Rows ekdum paas-paas kardi taaki compact lage */
	    width: max-content; 
	    
	    /* 🔴 JADOO: INTERNAL SCROLL */
	    max-height: 60vh; /* Screen ka sirf 60% height lega */
	    overflow-y: auto; /* Box ke andar scroll layega */
	}
	
	
	/* 🔴 NAYA CODE: Hover tootne se bachane ke liye invisible bridge */
	.dropdown-content::before {
	    content: "";
	    position: absolute;
	    top: -20px; /* Jitna niche khiskaya, utna hi upar bridge banaya */
	    left: 0;
	    width: 100%;
	    height: 20px;
	    background: transparent;
	}
	
	/* Hover karne par Dropdown Dikhana */
	.nav-dropdown:hover .dropdown-content {
	    display: grid; /* Flex/block nahi, ab grid dikhega */
	}
	
	/* =========================================
	   BRAND ITEMS DESIGN & PERFECT TEXT UNDERLINE
	   ========================================= */
	.dropdown-content li {
	    list-style: none;
	    width: 100%;
	    text-align: center; /* 🔴 Isse text ekdum center mein set rahega */
	}
	
	.dropdown-content li a {
	    color: #000000 !important;
	    padding: 5px 0 !important; /* 🔴 Left-Right padding hata di taaki line perfect aaye */
	    display: inline-block !important; /* 🔴 MAGIC FIX: Ab ye sirf text jitni jagah lega */
	    font-size: 11px !important; 
	    font-weight: 700;
	    text-transform: uppercase;
	    position: relative;
	    white-space: nowrap; 
	}
	
	/* THE MAGIC LINE (Center-Out Premium Animation) */
	.dropdown-content li a::after {
	    content: '';
	    position: absolute;
	    left: 50%; /* Line ekdum center se shuru hogi */
	    transform: translateX(-50%); /* Line ko perfectly center align karne ke liye */
	    bottom: 2px; 
	    width: 0; /* Pehle line gayab rahegi */   
	    height: 2px;
	    background-color: #ffb400; 
	    transition: width 0.3s ease; 
	}
	
	/* Jab Mouse Brand par jayega */
	.dropdown-content li a:hover {
	    color: #ffb400 !important; 
	    background-color: transparent !important; 
	}
	
	/* Mouse aane par Line chalu hogi */
	.dropdown-content li a:hover::after {
	    width: 100%; /* 🔴 Ab line SIRF text ke barabar (100%) badi hogi, box me nahi failegi */
	}
	
	
	/* =========================================
	   CUSTOM ORANGE SCROLLBAR FOR DROPDOWN
	   ========================================= */
	.dropdown-content::-webkit-scrollbar {
	    width: 6px;
	}
	.dropdown-content::-webkit-scrollbar-thumb {
	    background: #ffb400; /* Orange scroll bar */
	    border-radius: 10px;
	}
	.dropdown-content::-webkit-scrollbar-track {
	    background: #f1f1f1; /* Light grey track */
	    border-radius: 10px;
	    margin-top: 10px;
	    margin-bottom: 10px;
	}
	
	/* =========================================
	   100% WORKING HOVER BRIDGE (PRODUCTS ke niche)
	   ========================================= */
	.nav-dropdown {
	    position: relative;
	}
	
	/* 🔴 Ye pul seedha 'PRODUCTS' text se shuru hoga aur niche tak aayega */
	.nav-dropdown::after {
	    content: '';
	    position: absolute;
	    top: 100%; /* Text ke ekdum niche se shuru */
	    left: -20px;
	    width: 150px;
	    height: 35px; /* 35px ka extra hover area */
	    background: transparent; /* Dikhega nahi, bas kaam karega */
	    z-index: 999;
	}
	
	/* =========================================
	   CATALOG PAGE EXACT FIXES
	   ========================================= */

	/* 1. OVERLAP FIX: Pura page thoda niche khiskaya taaki navbar uske upar na chadhe */
	body.products-page-body {
	    background-color: #f4f6f9;
	    padding-top: 120px !important; /* YE SABSE ZAROORI HAI */
	    margin: 0;
	    overflow-x: visible !important; /* Left panel ko sticky rakhne ke liye */
	}

	/* 2. TOP NAVBAR FIX: Upar rehne par navbar Black rahega taaki white text clear dikhe.
	   Jaise hi tu scroll karega, ye rule hat jayega aur tera pasandida White Navbar aa jayega! */
	.navbar-modern.catalog-navbar:not(.scrolled) {
	    background-color: #050505 !important;
	}

	/* Products button ko orange rakhne ke liye */
	.navbar-modern.catalog-navbar .active-products {
	    color: #ffb400 !important;
	}

	/* =========================================
	   CATALOG LAYOUT (Left Panel & Right Grid)
	   ========================================= */
	.catalog-wrapper {
	    display: flex;
	    max-width: 1300px;
	    margin: 0 auto 60px auto;
	    gap: 30px;
	    padding: 0 20px;
	    min-height: 100vh;
	}

	/* Left Panel Sticky Setup */
	.brand-sidebar {
	    width: 280px;
	    min-width: 280px;
	    background: #ffffff;
	    padding: 25px;
	    border-radius: 10px;
	    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
	    position: -webkit-sticky; 
	    position: sticky;
	    top: 120px; /* Scroll karne par 120px par aake ruk jayega */
	    align-self: flex-start;
	    height: max-content;
	    z-index: 100;
	}

	.brand-sidebar h3 {
	    color: #000;
	    border-bottom: 2px solid #f1f1f1;
	    padding-bottom: 12px;
	    margin-bottom: 20px;
	    font-size: 18px;
	}
	.brand-sidebar h3 i { color: #ffb400; margin-right: 8px; }

	.brand-sidebar ul { list-style: none; padding: 0; margin: 0; }
	.brand-sidebar ul li { margin-bottom: 12px; }

	.brand-sidebar ul li a {
	    text-decoration: none;
	    color: #444;
	    font-weight: 600;
	    font-size: 14px;
	    display: block;
	    padding: 8px 10px;
	    border-radius: 5px;
	    transition: background-color 0.3s, color 0.3s;
	}
	.brand-sidebar ul li a:hover {
	    background-color: #f1f1f1;
	    color: #000;
	}

	/* Right Panel Setup */
	.product-display { flex: 1; }
	.product-display h2 { margin-bottom: 25px; color: #0a0a0a; font-size: 28px; }

	.product-grid-layout {
	    display: grid;
	    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	    gap: 20px;
	}

	.prod-card {
	    background: #ffffff;
	    padding: 25px;
	    border-radius: 10px;
	    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
	    border: 1px solid #eaeaea;
	    transition: transform 0.3s ease;
	}
	.prod-card:hover { transform: translateY(-5px); border-color: #ffb400; }

	.brand-tag { background: #000; color: #ffb400; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: bold; }
	.prod-card h3 { font-size: 18px; margin: 15px 0 10px 0; color: #000; }
	.prod-card p { color: #666; font-size: 14px; margin-bottom: 15px; line-height: 1.5; }
	.stock-status { color: green; font-weight: 700; font-size: 13px; margin-top: auto; display: block; }
	/* =========================================
	   CATALOG PAGE EXACT FIXES
	   ========================================= */

	/* 1. Body Fix: Left Panel Sticky Karne Ke Liye */
	body.products-page-body {
	    overflow-x: visible !important; 
	    background-color: #f4f6f9;
	}

	/* 2. Navbar Fix: Scroll pe Shrink aur White hone se rokna */
	.navbar-modern.catalog-nav,
	.navbar-modern.catalog-nav.scrolled {
	    background-color: #050505 !important;
	    padding: 25px 60px !important; /* Original Big Size */
	    border-bottom: 2px solid #222;
	    position: sticky !important;
	    top: 0;
	}

	/* 3. Text Color Fix: Scroll karne pe gayab na ho (Lekin Contact Us button ko chhod kar) */
	.navbar-modern.catalog-nav.scrolled .nav-menu a:not(.btn-solid-nav) {
	    color: #ffffff !important;
	}

	/* 4. Hover Fix: Normal links ka orange hover chalne ke liye */
	.navbar-modern.catalog-nav.scrolled .nav-menu a:not(.btn-solid-nav):hover {
	    color: #ffb400 !important;
	}

	/* 5. Dropdown Text Fix */
	.navbar-modern.catalog-nav .dropdown-content a {
	    color: #000000 !important;
	}

	/* 6. Active 'PRODUCTS' Menu color */
	.navbar-modern.catalog-nav .active-products {
	    color: #ffb400 !important;
	}

	/* =========================================
	   CATALOG LAYOUT (Left Panel & Right Grid)
	   ========================================= */
	.catalog-wrapper {
	    display: flex;
	    max-width: 1300px;
	    margin: 40px auto;
	    gap: 30px;
	    padding: 0 20px;
	    min-height: 100vh;
	}

	/* Left Panel Sticky Setup */
	.brand-sidebar {
	    width: 280px;
	    min-width: 280px;
	    background: #ffffff;
	    padding: 25px;
	    border-radius: 10px;
	    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
	    position: -webkit-sticky; 
	    position: sticky;
	    top: 120px; 
	    align-self: flex-start; /* IMPORTANT for sticky */
	    height: max-content; /* IMPORTANT for sticky */
	    z-index: 100;
	}

	.brand-sidebar h3 {
	    color: #000;
	    border-bottom: 2px solid #f1f1f1;
	    padding-bottom: 12px;
	    margin-bottom: 20px;
	    font-size: 18px;
	}
	.brand-sidebar h3 i { color: #ffb400; margin-right: 8px; }

	.brand-sidebar ul { list-style: none; padding: 0; margin: 0; }
	.brand-sidebar ul li { margin-bottom: 12px; }

	.brand-sidebar ul li a {
	    text-decoration: none;
	    color: #444;
	    font-weight: 600;
	    font-size: 14px;
	    display: block;
	    padding: 8px 10px;
	    border-radius: 5px;
	    transition: background-color 0.3s, color 0.3s;
	}
	.brand-sidebar ul li a:hover {
	    background-color: #f1f1f1;
	    color: #000;
	}

	/* Right Panel Setup */
	.product-display { flex: 1; }
	.product-display h2 { margin-bottom: 25px; color: #0a0a0a; font-size: 28px; }

	.product-grid-layout {
	    display: grid;
	    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	    gap: 20px;
	}

	.prod-card {
	    background: #ffffff;
	    padding: 25px;
	    border-radius: 10px;
	    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
	    border: 1px solid #eaeaea;
	    transition: transform 0.3s ease;
	}
	.prod-card:hover { transform: translateY(-5px); border-color: #ffb400; }

	.brand-tag { background: #000; color: #ffb400; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: bold; }
	.prod-card h3 { font-size: 18px; margin: 15px 0 10px 0; color: #000; }
	.prod-card p { color: #666; font-size: 14px; margin-bottom: 15px; line-height: 1.5; }
	.stock-status { color: green; font-weight: 700; font-size: 13px; margin-top: auto; }
	
	
	/* ===================================================
	   PRODUCT CATALOGUE PAGE
	   =================================================== */

	.products-page-body {

	    margin: 0;

	    background: #f4f6f9;

	    color: #111;

	}


	/* ===================================================
	   MAIN 2 COLUMN LAYOUT
	   =================================================== */

	.catalog-page-container {

	    display: grid;

	    grid-template-columns: 280px 1fr;

	    gap: 35px;


	    max-width: 1400px;

	    margin: 0 auto;


	    padding:

	        30px
	        35px
	        80px;

	}


	/* ===================================================
	   LEFT SIDEBAR
	   =================================================== */

	.brand-sidebar {

	    background: #ffffff;


	    border-radius: 10px;


	    padding: 22px 15px;


	    box-shadow:
	        0 5px 25px
	        rgba(0, 0, 0, 0.07);


	    border:
	        1px solid
	        #eeeeee;


	    /* Scroll karne par left panel wahi rahega */

	    position: sticky;

	    top: 110px;


	    height:
	        calc(100vh - 140px);


	    overflow-y: auto;

	}


	/* ===================================================
	   SIDEBAR HEADING
	   =================================================== */

	.sidebar-heading {

	    display: flex;

	    align-items: center;

	    gap: 10px;


	    padding:

	        5px
	        10px
	        18px;


	    margin-bottom: 12px;


	    border-bottom:
	        1px solid
	        #eeeeee;

	}


	.sidebar-heading i {

	    color: #ffb400;

	    font-size: 18px;

	}


	.sidebar-heading h3 {

	    margin: 0;

	    color: #111111;

	    font-size: 18px;

	    font-weight: 800;

	}


	/* ===================================================
	   BRAND LIST
	   =================================================== */

	.brand-list {

	    display: flex;

	    flex-direction: column;

	}


	/* Brand */

	.brand-list a {

	    position: relative;


	    display: block;


	    padding:

	        11px
	        12px;


	    color: #444444;


	    text-decoration: none;


	    font-size: 13px;

	    font-weight: 700;


	    letter-spacing: 0.4px;


	    border-radius: 5px;


	    transition:
	        color 0.25s ease,
	        background 0.25s ease,
	        padding-left 0.25s ease;

	}


	/* ===================================================
	   BRAND HOVER
	   =================================================== */

	.brand-list a:hover {

	    color: #ffb400;

	    background: #fafafa;

	    padding-left: 18px;

	}


	/* Orange left line */

	.brand-list a::before {

	    content: "";


	    position: absolute;


	    left: 0;

	    top: 50%;


	    transform:
	        translateY(-50%);


	    width: 3px;

	    height: 0;


	    background:
	        #ffb400;


	    border-radius: 5px;


	    transition:
	        height 0.25s ease;

	}


	.brand-list a:hover::before {

	    height: 60%;

	}


	/* ===================================================
	   SELECTED BRAND
	   =================================================== */

	.brand-list a.selected-brand {

	    color: #000000;


	    background:
	        #ffb400;


	    padding-left: 18px;

	}


	.brand-list a.selected-brand::before {

	    height: 65%;

	    background: #000000;

	}


	/* ===================================================
	   SIDEBAR SCROLLBAR
	   =================================================== */

	.brand-sidebar::-webkit-scrollbar {

	    width: 5px;

	}


	.brand-sidebar::-webkit-scrollbar-track {

	    background:
	        #f1f1f1;

	}


	.brand-sidebar::-webkit-scrollbar-thumb {

	    background:
	        #ffb400;

	    border-radius: 20px;

	}


	/* ===================================================
	   RIGHT PRODUCT SIDE
	   =================================================== */

	.product-display {

	    min-width: 0;

	}


	/* Heading */

	.product-page-heading {

	    margin-bottom: 35px;

	}


	.small-heading {

	    display: block;


	    color: #ffb400;


	    font-size: 12px;

	    font-weight: 800;


	    letter-spacing: 2px;


	    margin-bottom: 8px;

	}


	.product-page-heading h1 {

	    color: #111111;


	    font-size: 38px;


	    margin:

	        0
	        0
	        10px;


	    font-weight: 800;

	}


	.orange-text {

	    color: #ffb400;

	}


	.product-page-heading p {

	    color: #777777;

	    font-size: 15px;

	}


	/* ===================================================
	   PRODUCT GRID
	   =================================================== */

	.product-grid-layout {

	    display: grid;


	    grid-template-columns:
	        repeat(
	            3,
	            minmax(0, 1fr)
	        );


	    gap: 22px;

	}


	/* ===================================================
	   PRODUCT CARD
	   =================================================== */

	.prod-card {

	    display: flex;

	    flex-direction: column;


	    min-height: 240px;


	    padding: 25px;


	    background: #ffffff;


	    border:

	        1px solid
	        #ebebeb;


	    border-radius: 10px;


	    box-shadow:

	        0 5px 20px
	        rgba(0,0,0,0.04);


	    transition:

	        transform 0.3s ease,
	        box-shadow 0.3s ease,
	        border-color 0.3s ease;

	}


	.prod-card:hover {

	    transform:
	        translateY(-5px);


	    border-color:
	        #ffb400;


	    box-shadow:

	        0 15px 35px
	        rgba(0,0,0,0.09);

	}


	/* ===================================================
	   BRAND TAG
	   =================================================== */

	.brand-tag {

	    align-self:
	        flex-start;


	    background:
	        #111111;


	    color:
	        #ffb400;


	    padding:

	        5px
	        11px;


	    border-radius:
	        4px;


	    font-size:
	        10px;


	    font-weight:
	        800;


	    letter-spacing:
	        1px;

	}


	/* PRODUCT NAME */

	.prod-card h3 {

	    color:
	        #111111;


	    font-size:
	        18px;


	    margin:

	        18px
	        0
	        10px;


	    line-height:
	        1.4;

	}


	/* Description */

	.prod-card p {

	    color:
	        #777777;


	    font-size:
	        13px;


	    line-height:
	        1.6;


	    flex-grow:
	        1;

	}


	/* ===================================================
	   STOCK
	   =================================================== */

	.stock-status {

	    margin-top:
	        15px;


	    color:
	        #198754;


	    font-size:
	        12px;


	    font-weight:
	        700;

	}


	.stock-status i {

	    margin-right:
	        5px;

	}


	/* ===================================================
	   REQUEST QUOTE BUTTON
	   =================================================== */

	.product-quote-btn {

	    display:
	        flex;


	    align-items:
	        center;


	    justify-content:
	        space-between;


	    margin-top:
	        18px;


	    padding-top:
	        15px;


	    border-top:

	        1px solid
	        #eeeeee;


	    color:
	        #111111;


	    text-decoration:
	        none;


	    font-size:
	        12px;


	    font-weight:
	        800;


	    transition:
	        color 0.25s ease;

	}


	.product-quote-btn:hover {

	    color:
	        #ffb400;

	}


	.product-quote-btn i {

	    transition:
	        transform 0.25s ease;

	}


	.product-quote-btn:hover i {

	    transform:
	        translateX(5px);

	}


	/* ===================================================
	   NO PRODUCTS
	   =================================================== */

	.no-products-message {

	    background:
	        #ffffff;


	    padding:
	        80px 30px;


	    border-radius:
	        10px;


	    text-align:
	        center;


	    border:

	        1px solid
	        #eeeeee;

	}


	.no-products-message i {

	    color:
	        #ffb400;


	    font-size:
	        50px;


	    margin-bottom:
	        20px;

	}


	.no-products-message h3 {

	    color:
	        #111111;


	    font-size:
	        24px;


	    margin-bottom:
	        10px;

	}


	.no-products-message p {

	    color:
	        #777777;

	}


	/* ===================================================
	   TABLET
	   =================================================== */

	@media screen and (max-width: 1100px) {

	    .product-grid-layout {

	        grid-template-columns:
	            repeat(2, 1fr);

	    }

	}


	/* ===================================================
	   MOBILE
	   =================================================== */

	@media screen and (max-width: 800px) {

	    .catalog-page-container {

	        grid-template-columns:
	            1fr;


	        padding:

	            120px
	            15px
	            50px;

	    }


	    .brand-sidebar {

	        position:
	            relative;


	        top:
	            auto;


	        height:
	            280px;

	    }


	    .product-grid-layout {

	        grid-template-columns:
	            1fr;

	    }


	    .product-page-heading h1 {

	        font-size:
	            30px;

	    }

	}
	
	/* =====================================================
	   BRAND SIDEBAR - CATEGORY DROPDOWN
	   ===================================================== */

	.brand-item {
	    width: 100%;
	}


	/* =====================================================
	   BRAND ROW
	   ===================================================== */

	.brand-row {

	    display: flex;

	    align-items: center;

	    width: 100%;

	    position: relative;
	}


	/* Main brand link */

	.brand-row .brand-main-link {

	    flex: 1;

	    display: block;

	    padding: 11px 12px;

	    color: #333333;

	    text-decoration: none;

	    font-size: 13px;

	    font-weight: 700;

	    letter-spacing: 0.3px;

	    border-radius: 6px;

	    transition:
	        background 0.25s ease,
	        color 0.25s ease,
	        padding-left 0.25s ease;
	}


	/* Brand hover */

	.brand-row .brand-main-link:hover {

	    color: #ffb400;

	    background: #fafafa;

	    padding-left: 18px;
	}


	/* =====================================================
	   SELECTED BRAND
	   ===================================================== */

	.brand-row .brand-main-link.selected-brand {

	    background: #ffb400;

	    color: #000000;

	    padding-left: 20px;
	}


	/* =====================================================
	   AEROSHELL DROPDOWN BUTTON
	   ===================================================== */

	.category-toggle {

	    position: absolute;

	    right: 10px;

	    top: 50%;

	    transform: translateY(-50%);


	    width: 32px;

	    height: 32px;


	    display: flex;

	    align-items: center;

	    justify-content: center;


	    border: none;

	    background: transparent;


	    color: #111111;


	    cursor: pointer;


	    border-radius: 50%;


	    transition:
	        background 0.25s ease,
	        color 0.25s ease;
	}


	.category-toggle:hover {

	    background: rgba(0, 0, 0, 0.08);
	}


	/* Arrow */

	.category-toggle i {

	    font-size: 11px;

	    transition:
	        transform 0.35s
	        cubic-bezier(0.22, 1, 0.36, 1);
	}


	/* Open hone par arrow rotate */

	.category-toggle.active i {

	    transform: rotate(180deg);
	}


	/* =====================================================
	   CATEGORY SUBMENU
	   ===================================================== */

	.category-submenu {

	    max-height: 0;

	    overflow: hidden;


	    opacity: 0;


	    margin-left: 16px;

	    padding-left: 12px;


	    border-left: 2px solid #eeeeee;


	    transition:

	        max-height 0.45s ease,

	        opacity 0.3s ease,

	        margin-top 0.3s ease,

	        margin-bottom 0.3s ease;
	}


	/* Dropdown open */

	.category-submenu.open {

	    max-height: 300px;

	    opacity: 1;

	    margin-top: 5px;

	    margin-bottom: 10px;
	}


	/* =====================================================
	   CATEGORY LINKS
	   ===================================================== */

	.category-submenu a {

	    display: flex;

	    align-items: center;

	    gap: 9px;


	    position: relative;


	    padding: 9px 10px;


	    color: #666666;


	    text-decoration: none;


	    font-size: 11px;

	    font-weight: 700;


	    letter-spacing: 0.5px;


	    border-radius: 5px;


	    transition:

	        color 0.25s ease,

	        background 0.25s ease,

	        padding-left 0.25s ease;
	}


	/* Category dot */

	.category-dot {

	    width: 5px;

	    height: 5px;


	    min-width: 5px;


	    background: #bbbbbb;


	    border-radius: 50%;


	    transition:
	        background 0.25s ease,
	        transform 0.25s ease;
	}


	/* =====================================================
	   CATEGORY HOVER
	   ===================================================== */

	.category-submenu a:hover {

	    color: #ffb400;

	    background: #fafafa;

	    padding-left: 15px;
	}


	.category-submenu a:hover .category-dot {

	    background: #ffb400;

	    transform: scale(1.4);
	}


	/* =====================================================
	   SELECTED CATEGORY
	   ===================================================== */

	.category-submenu a.active-category {

	    color: #ffb400;

	    background: #fff8e6;

	    font-weight: 800;

	}


	.category-submenu a.active-category .category-dot {

	    background: #ffb400;

	    transform: scale(1.4);
	}


	/* Selected category title */

	.selected-category-title {

	    color: #111111;
	}
	
	/* =====================================================
	   AEROSHELL CATEGORY DROPDOWN
	   ===================================================== */

	.brand-item {
	    width: 100%;
	}


	/* Normal brands */

	.normal-brand-link {

	    display: block;

	    width: 100%;

	    padding: 12px 15px;

	    color: #333333;

	    text-decoration: none;

	    font-size: 13px;

	    font-weight: 700;

	    border-radius: 6px;

	    transition: all 0.25s ease;
	}


	.normal-brand-link:hover {

	    color: #ffb400;

	    background: #fafafa;

	    padding-left: 20px;
	}


	/* =====================================================
	   DETAILS DEFAULT ARROW REMOVE
	   ===================================================== */

	.aeroshell-dropdown {

	    width: 100%;
	}


	.aeroshell-dropdown summary {

	    list-style: none;

	    cursor: pointer;


	    display: flex;

	    justify-content: space-between;

	    align-items: center;


	    padding: 13px 15px;


	    color: #222222;

	    font-size: 14px;

	    font-weight: 800;


	    border-radius: 6px;


	    transition:

	        background 0.25s ease,

	        color 0.25s ease;
	}


	.aeroshell-dropdown summary::-webkit-details-marker {

	    display: none;
	}


	/* Aeroshell selected */

	.aeroshell-dropdown summary.selected-brand {

	    background: #ffb400;

	    color: #000000;
	}


	/* =====================================================
	   ARROW
	   ===================================================== */

	.aeroshell-dropdown summary i {

	    font-size: 11px;

	    transition: transform 0.3s ease;
	}


	/* Dropdown open -> arrow rotate */

	.aeroshell-dropdown[open] summary i {

	    transform: rotate(180deg);
	}


	/* =====================================================
	   CATEGORY AREA
	   ===================================================== */

	.aeroshell-category-list {

	    margin:

	        6px
	        0
	        10px
	        16px;


	    padding-left: 12px;


	    border-left:

	        2px solid
	        #eeeeee;


	    animation:

	        categoryOpen
	        0.3s ease;
	}


	/* Smooth open */

	@keyframes categoryOpen {

	    from {

	        opacity: 0;

	        transform: translateY(-5px);

	    }

	    to {

	        opacity: 1;

	        transform: translateY(0);

	    }

	}


	/* =====================================================
	   CATEGORY LINKS
	   ===================================================== */

	.aeroshell-category-list a {

	    display: flex;

	    align-items: center;

	    gap: 9px;


	    position: relative;


	    padding:

	        10px
	        10px;


	    color: #666666;


	    text-decoration: none;


	    font-size: 11px;

	    font-weight: 700;


	    text-transform: uppercase;


	    border-radius: 5px;


	    transition:

	        color 0.25s ease,

	        background 0.25s ease,

	        padding-left 0.25s ease;
	}


	/* Dot */

	.category-dot {

	    display: inline-block;


	    width: 5px;

	    height: 5px;


	    min-width: 5px;


	    background:

	        #aaaaaa;


	    border-radius: 50%;


	    transition:

	        background 0.25s ease,

	        transform 0.25s ease;
	}


	/* =====================================================
	   CATEGORY HOVER
	   ===================================================== */

	.aeroshell-category-list a:hover {

	    color: #ffb400;

	    background: #fff9ec;

	    padding-left: 15px;
	}


	.aeroshell-category-list a:hover .category-dot {

	    background: #ffb400;

	    transform: scale(1.5);
	}


	/* =====================================================
	   ACTIVE CATEGORY
	   ===================================================== */

	.aeroshell-category-list a.active-category {

	    color: #ffb400;

	    background: #fff5d9;

	    font-weight: 800;

	}


	.aeroshell-category-list a.active-category .category-dot {

	    background: #ffb400;

	    transform: scale(1.5);
	}
	
	
	/* =====================================================
	   AEROSHELL SIDEBAR STICKY HOLD
	   ===================================================== */

	#aeroshellBlock {

	    position: sticky;

	    top: 0;

	    z-index: 50;

	    background: #ffffff;

	    border-radius: 6px;

	    padding-bottom: 4px;
	}


	/* Sticky block ke niche halka shadow */

	#aeroshellBlock::after {

	    content: "";

	    position: absolute;

	    left: 0;
	    right: 0;
	    bottom: -5px;

	    height: 5px;

	    background: linear-gradient(
	        to bottom,
	        rgba(0, 0, 0, 0.06),
	        transparent
	    );

	    pointer-events: none;
	}
	
	.normal-brand-link.selected-brand {

	    background: #ffb400;

	    color: #000000;

	    padding-left: 20px;

	    font-weight: 800;
	}
	
	/* =========================================
	   SIDEBAR CLICK SAFETY
	   ========================================= */

	.brand-sidebar {

	    position: sticky;

	    top: 110px;

	    z-index: 500;

	    isolation: isolate;
	}


	.sidebar-heading {

	    position: relative;

	    z-index: 10;

	    pointer-events: auto;

	    cursor: default;
	}
	
	/* =====================================================
	   FINAL MOBILE HEADER FIX
	   ===================================================== */

	@media screen and (max-width: 768px) {

	    .navbar-modern {
	        width: 100% !important;
	        height: 82px !important;

	        padding: 8px 16px !important;

	        display: flex !important;
	        align-items: center !important;
	        justify-content: space-between !important;

	        box-sizing: border-box !important;

	        background: #ffffff !important;
	    }


	    /* LOGO OUTER BOX */
	    .logo-brand {
	        width: 245px !important;
	        max-width: calc(100% - 65px) !important;

	        height: 62px !important;

	        flex: 0 1 245px !important;

	        margin: 0 !important;
	        padding: 0 !important;

	        overflow: hidden !important;

	        display: flex !important;
	        align-items: center !important;
	        justify-content: flex-start !important;
	    }


	    /* ACTUAL LOGO IMAGE */
	    .logo-brand img {
	        width: 100% !important;
	        height: 100% !important;

	        max-width: 100% !important;

	        object-fit: contain !important;
	        object-position: left center !important;

	        transform: none !important;

	        left: 0 !important;
	        right: auto !important;

	        margin: 0 !important;
	        padding: 0 !important;
	    }


	    /* HAMBURGER */
	    .menu-toggle {
	        display: flex !important;

	        width: 34px !important;
	        min-width: 34px !important;

	        margin-left: auto !important;

	        position: relative !important;
	        z-index: 1002 !important;
	    }


	    .menu-toggle .bar {
	        width: 28px !important;
	        height: 3px !important;
	        background: #111111 !important;
	    }


	    /* MOBILE DROPDOWN MENU */
	    .nav-menu {
	        top: 82px !important;
	    }
	}
	
	
	/* =====================================================
	   FINAL HOME HERO MOBILE RESPONSIVE
	   ===================================================== */

	@media screen and (max-width: 768px) {

	    .hero-section {
	        width: 100% !important;

	        height: auto !important;
	        min-height: 100svh !important;

	        padding-top: 82px !important;
	        padding-bottom: 25px !important;

	        box-sizing: border-box !important;

	        display: flex !important;
	        flex-direction: column !important;

	        justify-content: flex-start !important;
	        align-items: center !important;

	        overflow: hidden !important;
	    }


	    .hero-video {
	        width: 100% !important;
	        height: 100% !important;

	        object-fit: cover !important;
	        object-position: center center !important;
	    }


	    .overlay {
	        width: 100% !important;
	        height: 100% !important;
	    }


	    /* MAIN CONTENT */
	    .hero-content-center {
	        width: 100% !important;
	        max-width: 100% !important;

	        margin: 0 auto !important;

	        padding: 32px 22px 0 !important;

	        box-sizing: border-box !important;

	        transform: none !important;

	        position: relative !important;
	        z-index: 2 !important;
	    }


	    .hero-content-center h1 {
	        width: 100% !important;

	        font-size: 30px !important;
	        line-height: 1.12 !important;

	        margin: 0 auto 20px !important;

	        padding: 0 !important;

	        text-align: center !important;

	        letter-spacing: -0.3px !important;
	    }


	    .hero-content-center h1 br {
	        display: none;
	    }


	    .text-gradient {
	        display: inline !important;
	    }


	    .hero-content-center p {
	        width: 100% !important;
	        max-width: 350px !important;

	        margin: 0 auto 25px !important;
	        padding: 0 !important;

	        font-size: 14px !important;
	        line-height: 1.5 !important;

	        text-align: center !important;
	    }


	    /* BUTTONS */
	    .action-buttons-center {
	        width: 100% !important;

	        display: flex !important;
	        flex-direction: column !important;

	        align-items: center !important;
	        justify-content: center !important;

	        gap: 12px !important;

	        padding: 0 !important;
	        margin: 0 !important;
	    }


	    .btn-primary-large,
	    .btn-secondary-large {
	        width: 100% !important;
	        max-width: 320px !important;

	        min-height: 48px !important;

	        display: flex !important;
	        align-items: center !important;
	        justify-content: center !important;

	        box-sizing: border-box !important;

	        padding: 12px 15px !important;
	        margin: 0 !important;

	        font-size: 13px !important;

	        text-align: center !important;
	    }


	    /* HERO BOTTOM AREA */
	    .hero-footer {
	        width: 100% !important;

	        display: flex !important;
	        flex-direction: column !important;

	        justify-content: center !important;
	        align-items: center !important;

	        margin-top: 35px !important;

	        padding: 0 20px 20px !important;

	        box-sizing: border-box !important;

	        gap: 12px !important;
	    }


	    .social-icons {
	        margin: 0 !important;
	        padding: 0 !important;

	        display: flex !important;
	        justify-content: center !important;

	        gap: 20px !important;
	    }


	    .social-icons a {
	        margin: 0 !important;
	    }


	    .hero-bottom-contact {
	        width: 100% !important;

	        display: flex !important;
	        flex-direction: column !important;

	        align-items: center !important;
	        justify-content: center !important;

	        gap: 5px !important;
	    }


	    .highlight-phone {
	        font-size: 14px !important;
	        text-align: center !important;
	    }


	    .hero-email {
	        font-size: 13px !important;
	        text-align: center !important;

	        word-break: break-word !important;
	    }


	    .contact-divider {
	        display: none !important;
	    }


	    .scroll-arrow {
	        display: none !important;
	    }


	    /* FLOATING CONTACT BUTTONS */
	    .quick-contact-widget {
	        left: 12px !important;
	        bottom: 90px !important;

	        gap: 10px !important;
	    }


	    .quick-contact-widget a {
	        width: 44px !important;
	        height: 44px !important;

	        font-size: 20px !important;
	    }
	}
	
	
	/* =====================================================
	   FINAL MOBILE LOGO + HEADER FIX
	   ===================================================== */
	@media screen and (max-width: 768px) {

	    .navbar-modern {
	        height: 78px !important;
	        padding: 8px 14px !important;

	        display: flex !important;
	        align-items: center !important;
	        justify-content: space-between !important;

	        background: #ffffff !important;
	        box-sizing: border-box !important;
	    }

	    /* Logo ka outer box */
	    .navbar-modern .logo-brand {
	        width: 205px !important;
	        height: 55px !important;

	        flex: 0 0 205px !important;

	        margin: 0 !important;
	        padding: 0 !important;

	        overflow: visible !important;

	        display: flex !important;
	        align-items: center !important;
	    }

	    /* Actual logo image */
	    .navbar-modern .logo-brand img {
	        width: 195px !important;
	        height: auto !important;

	        max-width: 195px !important;
	        max-height: 52px !important;

	        object-fit: contain !important;
	        object-position: left center !important;

	        transform: none !important;

	        position: static !important;
	        left: auto !important;

	        margin: 0 !important;
	        padding: 0 !important;
	    }

	    .menu-toggle {
	        display: flex !important;
	        width: 32px !important;
	        min-width: 32px !important;
	        margin-left: auto !important;
	    }

	    .menu-toggle .bar {
	        width: 27px !important;
	        height: 3px !important;
	        background: #111111 !important;
	    }

	    .nav-menu {
	        top: 78px !important;
	    }
	}
	
	
	/* =====================================================
	   FINAL MOBILE HERO HEIGHT FIX
	   ===================================================== */
	@media screen and (max-width: 768px) {

	    .hero-section {
	        width: 100% !important;

	        height: auto !important;
	        min-height: 0 !important;

	        padding-top: 78px !important;
	        padding-bottom: 25px !important;

	        display: flex !important;
	        flex-direction: column !important;

	        justify-content: flex-start !important;
	        align-items: center !important;

	        box-sizing: border-box !important;

	        overflow: hidden !important;
	    }

	    .hero-content-center {
	        width: 100% !important;
	        max-width: 100% !important;

	        margin: 0 !important;

	        padding: 28px 20px 0 !important;

	        box-sizing: border-box !important;

	        transform: none !important;
	    }

	    .hero-content-center h1 {
	        font-size: 27px !important;
	        line-height: 1.08 !important;

	        margin: 0 auto 18px !important;
	        padding: 0 !important;

	        max-width: 360px !important;
	        text-align: center !important;
	    }

	    .hero-content-center p {
	        font-size: 13px !important;
	        line-height: 1.45 !important;

	        max-width: 340px !important;

	        margin: 0 auto 22px !important;
	        padding: 0 !important;

	        text-align: center !important;
	    }

	    .action-buttons-center {
	        width: 100% !important;

	        flex-direction: column !important;

	        gap: 10px !important;

	        padding: 0 !important;
	        margin: 0 !important;
	    }

	    .btn-primary-large,
	    .btn-secondary-large {
	        width: 100% !important;
	        max-width: 300px !important;

	        min-height: 45px !important;

	        padding: 10px 15px !important;

	        box-sizing: border-box !important;
	    }

	    /* Social + phone/email section ko upar lao */
	    .hero-footer {
	        width: 100% !important;

	        margin-top: 22px !important;

	        padding: 0 15px 10px !important;

	        gap: 8px !important;

	        flex-direction: column !important;

	        align-items: center !important;
	        justify-content: center !important;

	        box-sizing: border-box !important;
	    }

	    .social-icons {
	        margin: 0 !important;
	        gap: 18px !important;
	    }

	    .hero-bottom-contact {
	        gap: 3px !important;
	    }

	    .highlight-phone {
	        font-size: 13px !important;
	    }

	    .hero-email {
	        font-size: 12px !important;
	    }

	    .scroll-arrow {
	        display: none !important;
	    }
	}
	/* =====================================================
	   TABLET HEADER - 769px TO 990px
	   ===================================================== */

	@media screen and (min-width: 769px) and (max-width: 990px) {

	    .navbar-modern {
	        height: 88px !important;
	        padding: 10px 28px !important;

	        display: flex !important;
	        align-items: center !important;
	        justify-content: space-between !important;

	        background: #ffffff !important;

	        box-sizing: border-box !important;
	    }

	    .navbar-modern .logo-brand {
	        width: 260px !important;
	        height: 62px !important;

	        flex: 0 0 260px !important;

	        margin: 0 !important;
	        padding: 0 !important;

	        overflow: visible !important;
	    }

	    .navbar-modern .logo-brand img {
	        width: 245px !important;
	        height: auto !important;

	        max-width: 245px !important;
	        max-height: 58px !important;

	        object-fit: contain !important;

	        transform: none !important;

	        position: static !important;
	        left: auto !important;

	        margin: 0 !important;
	    }

	    .menu-toggle {
	        display: flex !important;
	        margin-left: auto !important;
	    }

	    .menu-toggle .bar {
	        background: #111111 !important;
	    }

	    .nav-menu {
	        top: 88px !important;
	    }
	}
	
	/* =====================================================
	   TABLET RESPONSIVE - 769px TO 990px
	   ===================================================== */

	@media screen and (min-width: 769px) and (max-width: 990px) {

	    /* ================= HERO ================= */

	    .hero-section {
	        width: 100% !important;

	        height: auto !important;
	        min-height: 720px !important;

	        padding-top: 88px !important;
	        padding-bottom: 30px !important;

	        box-sizing: border-box !important;

	        justify-content: flex-start !important;
	    }

	    .hero-content-center {
	        width: 100% !important;
	        max-width: 760px !important;

	        margin: 0 auto !important;

	        padding: 55px 35px 0 !important;

	        box-sizing: border-box !important;

	        transform: none !important;
	    }

	    .hero-content-center h1 {
	        font-size: 44px !important;
	        line-height: 1.12 !important;

	        max-width: 760px !important;

	        margin: 0 auto 22px !important;

	        text-align: center !important;
	    }

	    .hero-content-center p {
	        font-size: 17px !important;
	        line-height: 1.6 !important;

	        max-width: 680px !important;

	        margin: 0 auto 30px !important;

	        text-align: center !important;
	    }

	    .action-buttons-center {
	        display: flex !important;
	        flex-direction: row !important;

	        justify-content: center !important;

	        gap: 18px !important;

	        padding: 0 !important;
	    }

	    .btn-primary-large,
	    .btn-secondary-large {
	        width: 220px !important;
	        min-height: 48px !important;

	        display: flex !important;
	        align-items: center !important;
	        justify-content: center !important;
	    }


	    /* ================= HERO FOOTER ================= */

	    .hero-footer {
	        margin-top: auto !important;

	        padding: 0 35px 25px !important;

	        flex-direction: row !important;

	        justify-content: space-between !important;
	        align-items: center !important;
	    }

	    .social-icons {
	        margin-left: 0 !important;
	    }

	    .hero-bottom-contact {
	        flex-direction: row !important;

	        gap: 10px !important;
	    }


	    /* ================= BRANDS ================= */

	    .distributors-section {
	        padding: 65px 30px !important;
	    }

	    .distributors-container h2 {
	        font-size: 32px !important;

	        margin-bottom: 40px !important;
	    }

	    .logo-track img {
	        width: 125px !important;
	        height: 75px !important;
	    }


	    /* ================= ABOUT ================= */

	    .about-section {
	        padding: 70px 35px !important;
	    }

	    .about-container {
	        width: 100% !important;

	        flex-direction: column !important;

	        gap: 35px !important;
	    }

	    .about-content {
	        width: 100% !important;
	        max-width: 760px !important;

	        margin: 0 auto !important;

	        text-align: center !important;
	    }

	    .about-content h2 {
	        font-size: 34px !important;
	    }

	    .about-subtitle {
	        font-size: 18px !important;
	        line-height: 1.6 !important;
	    }

	    .about-content p {
	        font-size: 16px !important;
	        line-height: 1.7 !important;
	    }
	}
	/* =====================================================
	   FINAL RESPONSIVE HEADER + LOGO
	   ISKE NICHE KOI AUR LOGO CSS MAT DENA
	   ===================================================== */

	@media screen and (max-width: 768px) {

	    :root {
	        --mobile-header-height: clamp(72px, 14vw, 88px);
	    }

	    /* HEADER */
	    .navbar-modern {
	        width: 100% !important;
	        height: var(--mobile-header-height) !important;

	        padding: 6px clamp(14px, 4vw, 24px) !important;

	        display: flex !important;
	        align-items: center !important;
	        justify-content: space-between !important;

	        background: #ffffff !important;
	        box-sizing: border-box !important;
	    }

	    /* LOGO BOX
	       Screen bada hoga -> logo bada
	       Screen chhota hoga -> logo chhota */
	    .navbar-modern .logo-brand {
	        width: clamp(190px, 45vw, 290px) !important;
	        flex: 0 0 clamp(190px, 45vw, 290px) !important;

	        height: calc(var(--mobile-header-height) - 14px) !important;

	        margin: 0 !important;
	        padding: 0 !important;

	        display: flex !important;
	        align-items: center !important;
	        justify-content: flex-start !important;

	        overflow: hidden !important;
	    }

	    /* ACTUAL LOGO IMAGE */
	    .navbar-modern .logo-brand img {
	        width: 100% !important;
	        height: 100% !important;

	        max-width: none !important;
	        max-height: none !important;

	        object-fit: contain !important;
	        object-position: left center !important;

	        /* PNG ke extra blank area ko compensate karta hai */
	        transform: scale(2.8) !important;
	        transform-origin: left center !important;

	        position: relative !important;
	        left: -5px !important;

	        margin: 0 !important;
	        padding: 0 !important;
	    }

	    /* HAMBURGER */
	    .menu-toggle {
	        display: flex !important;

	        width: 32px !important;
	        min-width: 32px !important;
	        flex: 0 0 32px !important;

	        margin-left: auto !important;
	    }

	    .menu-toggle .bar {
	        width: 28px !important;
	        height: 3px !important;
	        background: #111111 !important;
	    }

	    /* Menu header ke niche khulega */
	    .nav-menu {
	        top: var(--mobile-header-height) !important;
	    }

	    /* Hero bhi header ke niche hi start hoga */
	    .hero-section {
	        padding-top: var(--mobile-header-height) !important;
	    }
	}
	
	/* =====================================================
	   FINAL RESPONSIVE LOGO - KEEP THIS AT VERY BOTTOM
	   ===================================================== */

	@media screen and (max-width: 768px) {

	    .navbar-modern {
	        height: clamp(78px, 14vw, 92px) !important;
	        padding: 6px clamp(14px, 4vw, 24px) !important;

	        display: flex !important;
	        align-items: center !important;
	        justify-content: space-between !important;

	        box-sizing: border-box !important;
	        background: #ffffff !important;
	    }

	    /* Logo ka responsive container */
	    .navbar-modern .logo-brand {
	        width: clamp(230px, 58vw, 320px) !important;
	        max-width: calc(100% - 65px) !important;

	        height: clamp(60px, 11vw, 76px) !important;

	        flex: 0 1 auto !important;

	        margin: 0 !important;
	        padding: 0 !important;

	        overflow: hidden !important;

	        display: flex !important;
	        align-items: center !important;
	        justify-content: flex-start !important;
	    }

	    /* Actual Alanqa logo */
	    .navbar-modern .logo-brand img {
	        width: 100% !important;
	        height: 100% !important;

	        max-width: none !important;
	        max-height: none !important;

	        object-fit: contain !important;
	        object-position: left center !important;

	        /* PNG ke blank area ko compensate karega */
	        transform: scale(3.2) !important;
	        transform-origin: left center !important;

	        position: relative !important;
	        left: -4px !important;

	        margin: 0 !important;
	        padding: 0 !important;
	    }

	    /* Hamburger */
	    .menu-toggle {
	        display: flex !important;

	        width: 32px !important;
	        min-width: 32px !important;

	        margin-left: auto !important;
	        flex-shrink: 0 !important;
	    }

	    .menu-toggle .bar {
	        width: 27px !important;
	        height: 3px !important;
	    }
	}
	
	/* =====================================================
	   FINAL RESPONSIVE HERO BUTTONS
	   ===================================================== */


	/* ---------- SMALL MOBILE: 0 - 520px ---------- */

	@media screen and (max-width: 520px) {

	    .action-buttons-center {
	        width: 100% !important;

	        display: flex !important;
	        flex-direction: column !important;
	        align-items: center !important;

	        gap: 10px !important;

	        padding: 0 !important;
	        margin: 0 !important;
	    }

	    .btn-primary-large,
	    .btn-secondary-large {

	        width: clamp(210px, 65vw, 270px) !important;
	        max-width: 270px !important;

	        min-height: 42px !important;

	        padding: 9px 15px !important;

	        font-size: clamp(11px, 2.8vw, 13px) !important;
	        letter-spacing: 0.6px !important;

	        display: flex !important;
	        align-items: center !important;
	        justify-content: center !important;

	        box-sizing: border-box !important;

	        margin: 0 auto !important;
	    }
	}


	/* ---------- LARGE MOBILE / SMALL TABLET: 521 - 768px ---------- */

	@media screen and (min-width: 521px) and (max-width: 768px) {

	    .action-buttons-center {
	        width: 100% !important;

	        display: flex !important;
	        flex-direction: row !important;

	        align-items: center !important;
	        justify-content: center !important;

	        gap: clamp(10px, 2vw, 18px) !important;

	        padding: 0 !important;
	        margin: 0 auto !important;
	    }

	    .btn-primary-large,
	    .btn-secondary-large {

	        width: clamp(155px, 32vw, 215px) !important;

	        min-height: 42px !important;

	        padding: 9px 12px !important;

	        font-size: clamp(10px, 1.8vw, 12px) !important;

	        display: flex !important;
	        align-items: center !important;
	        justify-content: center !important;

	        box-sizing: border-box !important;

	        margin: 0 !important;
	    }
	}
	
	/* =====================================================
	   FINAL RESPONSIVE HERO BUTTONS
	   ===================================================== */


	/* ---------- SMALL MOBILE: 0 - 520px ---------- */

	@media screen and (max-width: 520px) {

	    .action-buttons-center {
	        width: 100% !important;

	        display: flex !important;
	        flex-direction: column !important;
	        align-items: center !important;

	        gap: 10px !important;

	        padding: 0 !important;
	        margin: 0 !important;
	    }

	    .btn-primary-large,
	    .btn-secondary-large {

	        width: clamp(210px, 65vw, 270px) !important;
	        max-width: 270px !important;

	        min-height: 42px !important;

	        padding: 9px 15px !important;

	        font-size: clamp(11px, 2.8vw, 13px) !important;
	        letter-spacing: 0.6px !important;

	        display: flex !important;
	        align-items: center !important;
	        justify-content: center !important;

	        box-sizing: border-box !important;

	        margin: 0 auto !important;
	    }
	}


	/* ---------- LARGE MOBILE / SMALL TABLET: 521 - 768px ---------- */

	@media screen and (min-width: 521px) and (max-width: 768px) {

	    .action-buttons-center {
	        width: 100% !important;

	        display: flex !important;
	        flex-direction: row !important;

	        align-items: center !important;
	        justify-content: center !important;

	        gap: clamp(10px, 2vw, 18px) !important;

	        padding: 0 !important;
	        margin: 0 auto !important;
	    }

	    .btn-primary-large,
	    .btn-secondary-large {

	        width: clamp(155px, 32vw, 215px) !important;

	        min-height: 42px !important;

	        padding: 9px 12px !important;

	        font-size: clamp(10px, 1.8vw, 12px) !important;

	        display: flex !important;
	        align-items: center !important;
	        justify-content: center !important;

	        box-sizing: border-box !important;

	        margin: 0 !important;
	    }
	}