:root {

    --primary: #dc3545;

    --primary-light: #e74c3c;

    --secondary: #2c3e50;

    --accent: #f39c12;

    --safety-red: #e74c3c;

    --safety-orange: #e67e22;

    --safety-yellow: #f1c40f;

    --light: #f9f9f9;

    --dark: #2c3e50;

    --text: #333333;

    --text-light: #666666;

    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

}



body {

    font-family: 'Poppins', sans-serif;

    color: var(--text);

    overflow-x: hidden;

    background-color: var(--light);

    line-height: 1.6;

    scroll-behavior: smooth;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-weight: 700;

    color: var(--dark);

}



/* Navigation */

.navbar {

    background-color: rgba(255, 255, 255, 0.98);

    box-shadow: var(--shadow);

    padding: 1.2rem 0;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    backdrop-filter: blur(10px);

    border-bottom: 3px solid var(--primary);

}



.navbar.scrolled {

    padding: 0.8rem 0;

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

}



.navbar-brand {

    font-weight: 700;

    font-size: 1.8rem;

    color: var(--primary) !important;

    display: flex;

    align-items: center;

}



.navbar-brand img {

    height: 50px;

    margin-right: 10px;

}



.nav-link {

    color: var(--dark) !important;

    font-weight: 500;

    margin: 0 0.5rem;

    position: relative;

    padding: 0.5rem 1rem !important;

    transition: all 0.3s ease;

}



.nav-link::after {

    content: '';

    position: absolute;

    width: 0;

    height: 3px;

    background: linear-gradient(90deg, var(--primary), var(--accent));

    bottom: 0;

    left: 0;

    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    border-radius: 3px;

}



.nav-link:hover::after,

.nav-link.active::after {

    width: 100%;

}



.nav-link:hover {

    color: var(--primary) !important;

}



/* Hero Section */

.hero {

    height: 100vh;

    min-height: 800px;

    background: linear-gradient(135deg, rgba(220, 53, 69, 0.85), rgba(44, 62, 80, 0.9)),

        url('https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    display: flex;

    align-items: center;

    color: white;

    text-align: center;

    position: relative;

    overflow: hidden;

}



.hero::before {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100px;

    background: linear-gradient(to top, var(--light), transparent);

    z-index: 1;

}



.hero-content {

    position: relative;

    z-index: 2;

    transform: translateY(20px);

    opacity: 0;

    animation: fadeInUp 1s ease forwards 0.3s;

}



.hero h1 {

    font-size: 3.5rem;

    margin-bottom: 1.5rem;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

    line-height: 1.2;

}



.hero p {

    font-size: 1.25rem;

    max-width: 700px;

    margin: 0 auto 2.5rem;

    opacity: 0.9;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

}



.btn-primary {

    background: linear-gradient(135deg, var(--primary), var(--safety-orange));

    border: none;

    color: white;

    padding: 0.8rem 2rem;

    font-weight: 600;

    border-radius: 50px;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    transform: translateY(0);

}



.btn-primary:hover {

    background: linear-gradient(135deg, var(--safety-orange), var(--primary));

    color: white;

    transform: translateY(-3px);

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}



.btn-outline-primary {

    border: 2px solid white;

    color: white;

    padding: 0.8rem 2rem;

    font-weight: 600;

    border-radius: 50px;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    background: transparent;

}



.btn-outline-primary:hover {

    background: white;

    color: var(--primary);

}



/* Products Section */

.products {

    padding: 6rem 0;

    background-color: white;

    position: relative;

}



.section-title {

    position: relative;

    margin-bottom: 4rem;

    text-align: center;

}



.section-title h2 {

    font-size: 2.5rem;

    color: var(--dark);

    margin-bottom: 1rem;

    position: relative;

    display: inline-block;

}



.section-title h2::after {

    content: '';

    position: absolute;

    bottom: -10px;

    left: 50%;

    transform: translateX(-50%);

    width: 80px;

    height: 4px;

    background: linear-gradient(90deg, var(--primary), var(--accent));

    border-radius: 2px;

}



.section-title p {

    max-width: 700px;

    margin: 0 auto;

    color: var(--text-light);

    font-size: 1.1rem;

}



.product-card {

    border: none;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: var(--shadow);

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    margin-bottom: 2rem;

    height: 100%;

    background-color: white;

    position: relative;

    z-index: 1;

    transform: translateY(0);

    border: 1px solid rgba(220, 53, 69, 0.1);

}



.product-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

    border-color: var(--primary);

}



.product-card .card-body {

    padding: 2rem;

    position: relative;

    z-index: 2;

}



.product-card .card-title {

    color: var(--dark);

    font-weight: 600;

    font-size: 1.4rem;

    margin-bottom: 1rem;

}



.product-card .card-text {

    color: var(--text-light);

    margin-bottom: 1.5rem;

}



.product-icon {

    font-size: 2.5rem;

    color: var(--primary);

    margin-bottom: 1.5rem;

    background: linear-gradient(135deg, var(--primary), var(--accent));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}



.product-link {

    display: inline-flex;

    align-items: center;

    color: var(--primary);

    font-weight: 500;

    text-decoration: none;

    transition: all 0.3s ease;

}



.product-link i {

    margin-left: 0.5rem;

    transition: transform 0.3s ease;

}



.product-link:hover i {

    transform: translateX(5px);

}



/* About Section */

.about-section {

    padding: 6rem 0;

    background-color: var(--light);

    position: relative;

    overflow: hidden;

}



.about-content {

    position: relative;

    z-index: 1;

}



.about-img {

    border-radius: 12px;

    box-shadow: var(--shadow-lg);

    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    transform: perspective(1000px) rotateY(0deg);

}



.about-img:hover {

    transform: perspective(1000px) rotateY(10deg);

}



.about-text h2 {

    color: var(--dark);

    margin-bottom: 1.5rem;

    position: relative;

    display: inline-block;

}



.about-text h2::after {

    content: '';

    position: absolute;

    bottom: -10px;

    left: 0;

    width: 60px;

    height: 4px;

    background: linear-gradient(90deg, var(--primary), var(--accent));

    border-radius: 2px;

}



.about-text p {

    margin-bottom: 1.5rem;

    color: var(--text);

}



.feature-list {

    list-style: none;

    padding-left: 0;

}



.feature-list li {

    margin-bottom: 1rem;

    position: relative;

    padding-left: 2rem;

}



.feature-list li::before {

    content: '\f00c';

    font-family: 'Font Awesome 6 Free';

    font-weight: 900;

    position: absolute;

    left: 0;

    top: 0;

    color: var(--accent);

}



/* Categories Section */

.categories-section {

    padding: 6rem 0;

    background: linear-gradient(135deg, var(--dark), #1a252f);

    color: white;

    position: relative;

    overflow: hidden;

}



.categories-section::before {

    content: '';

    position: absolute;

    top: 0;

    right: 0;

    width: 200px;

    height: 200px;

    background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 70%);

}



.categories-section .section-title h2 {

    color: white;

}



.categories-section .section-title p {

    color: rgba(255, 255, 255, 0.7);

}



.categories-section .section-title h2::after {

    background: var(--accent);

}



.category-box {

    text-align: center;

    padding: 2.5rem 2rem;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.08);

    margin-bottom: 2rem;

    height: 100%;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    transform: translateY(0);

}



.category-box:hover {

    transform: translateY(-10px);

    background: rgba(255, 255, 255, 0.15);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

    border-color: rgba(255, 255, 255, 0.2);

}



.category-box i {

    font-size: 2.5rem;

    color: white;

    margin-bottom: 1.5rem;

    background: linear-gradient(135deg, var(--accent), #f1c40f);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}



.category-box h4 {

    font-weight: 600;

    margin-bottom: 1rem;

    color: white;

}



.category-box p {

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 0;

}



/* Contact Section */

.contact-section {

    padding: 6rem 0;

    background-color: var(--light);

    position: relative;

}



.contact-content {

    position: relative;

    z-index: 1;

}



.contact-info {

    background-color: white;

    padding: 2.5rem;

    border-radius: 12px;

    box-shadow: var(--shadow);

    height: 100%;

    transition: all 0.4s ease;

    border: 1px solid rgba(220, 53, 69, 0.1);

}



.contact-info:hover {

    box-shadow: var(--shadow-lg);

}



.contact-info h3 {

    color: var(--dark);

    margin-bottom: 1.5rem;

    position: relative;

    padding-bottom: 1rem;

}



.contact-info h3::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 60px;

    height: 3px;

    background: linear-gradient(90deg, var(--primary), var(--accent));

    border-radius: 2px;

}



.contact-item {

    display: flex;

    margin-bottom: 1.5rem;

    align-items: flex-start;

}



.contact-icon {

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, var(--primary), var(--accent));

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 1.5rem;

    flex-shrink: 0;

    font-size: 1.2rem;

    transition: all 0.3s ease;

}



.contact-item:hover .contact-icon {

    transform: rotate(15deg);

}



.contact-text h5 {

    margin-bottom: 0.5rem;

    color: var(--dark);

    font-weight: 600;

}



.contact-text a {

    color: var(--text);

    text-decoration: none;

    transition: all 0.3s ease;

}



.contact-text a:hover {

    color: var(--primary);

}



.contact-form {

    background-color: white;

    padding: 2.5rem;

    border-radius: 12px;

    box-shadow: var(--shadow);

    transition: all 0.4s ease;

    border: 1px solid rgba(220, 53, 69, 0.1);

}



.contact-form:hover {

    box-shadow: var(--shadow-lg);

}



.form-control {

    padding: 1rem;

    border-radius: 8px;

    margin-bottom: 1.5rem;

    border: 1px solid #e2e8f0;

    transition: all 0.3s ease;

}



.form-control:focus {

    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);

    border-color: var(--primary);

}



textarea.form-control {

    min-height: 150px;

}



.submit-btn {

    width: 100%;

    padding: 1rem;

    background: linear-gradient(135deg, var(--primary), var(--accent));

    color: white;

    border: none;

    border-radius: 8px;

    font-weight: 600;

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



.submit-btn:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 20px rgba(220, 53, 69, 0.2);

    background: linear-gradient(135deg, var(--accent), var(--primary));

}



/* Map */

.map-container {

    border-radius: 12px;

    overflow: hidden;

    box-shadow: var(--shadow-lg);

    margin-top: 3rem;

    transition: all 0.4s ease;

}



.map-container:hover {

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);

}



.map-container iframe {

    width: 100%;

    height: 400px;

    border: none;

}



/* Footer */

footer {

    background-color: var(--dark);

    color: white;

    padding: 5rem 0 2rem;

    position: relative;

}



footer::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 2px;

    background: linear-gradient(90deg, var(--primary), var(--accent));

}



.footer-logo {

    font-weight: 700;

    font-size: 2rem;

    color: white;

    margin-bottom: 1.5rem;

    display: inline-block;

}



.footer-about p {

    opacity: 0.7;

    margin-bottom: 1.5rem;

}



.footer-links h4 {

    color: white;

    margin-bottom: 1.5rem;

    font-size: 1.25rem;

    font-weight: 600;

    position: relative;

    padding-bottom: 0.5rem;

}



.footer-links h4::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 40px;

    height: 2px;

    background: var(--accent);

}



.footer-links ul {

    list-style: none;

    padding-left: 0;

}



.footer-links li {

    margin-bottom: 0.8rem;

}



.footer-links a {

    color: rgba(255, 255, 255, 0.7);

    text-decoration: none;

    transition: all 0.3s ease;

    display: inline-block;

}



.footer-links a:hover {

    color: white;

    transform: translateX(5px);

}



.social-icons {

    display: flex;

    gap: 0.8rem;

    margin-top: 1.5rem;

}



.social-icons a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    background-color: rgba(255, 255, 255, 0.1);

    color: white;

    border-radius: 50%;

    transition: all 0.3s ease;

}



.social-icons a:hover {

    background: linear-gradient(135deg, var(--primary), var(--accent));

    transform: translateY(-3px);

}



.copyright {

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    padding-top: 2rem;

    margin-top: 3rem;

    text-align: center;

    opacity: 0.7;

    font-size: 0.9rem;

}



/* WhatsApp Float */

.whatsapp-float {

    position: fixed;

    width: 60px;

    height: 60px;

    bottom: 30px;

    right: 30px;

    background-color: #25d366;

    color: #FFF;

    border-radius: 50px;

    text-align: center;

    font-size: 30px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

    z-index: 100;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.whatsapp-float:hover {

    color: #FFF;

    background-color: #128C7E;

    transform: scale(1.1) rotate(10deg);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);

}



/* Back to Top Button */

.back-to-top {

    position: fixed;

    bottom: 100px;

    right: 30px;

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, var(--primary), var(--accent));

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

    z-index: 99;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

}



.back-to-top.active {

    opacity: 1;

    visibility: visible;

}



.back-to-top:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);

}



/* Animations */

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Animate on scroll */

.animate {

    opacity: 0;

    transform: translateY(30px);

    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}



.animate.animated {

    opacity: 1;

    transform: translateY(0);

}



.delay-1 {

    transition-delay: 0.1s;

}



.delay-2 {

    transition-delay: 0.2s;

}



.delay-3 {

    transition-delay: 0.3s;

}



.delay-4 {

    transition-delay: 0.4s;

}



/* Product Images */

.product-image {

    height: 200px;

    width: 100%;

    object-fit: cover;

    border-bottom: 3px solid var(--primary);

}



.manufacturer-badge {

    position: absolute;

    top: 15px;

    right: 15px;

    background: var(--accent);

    color: white;

    padding: 5px 15px;

    border-radius: 20px;

    font-size: 0.8rem;

    font-weight: 600;

    z-index: 3;

}



/* GST Badge */

.gst-badge {

    display: inline-block;

    background: linear-gradient(135deg, #27ae60, #2ecc71);

    color: white;

    padding: 5px 15px;

    border-radius: 20px;

    font-size: 0.9rem;

    font-weight: 600;

    margin: 5px;

}



/* Responsive */

@media (max-width: 1199.98px) {

    .hero h1 {

        font-size: 3rem;

    }

}



@media (max-width: 991.98px) {

    .hero {

        min-height: 700px;

    }



    .hero h1 {

        font-size: 2.5rem;

    }



    .about-img {

        margin-bottom: 3rem;

    }

}



@media (max-width: 767.98px) {

    .hero {

        height: auto;

        min-height: auto;

        padding: 8rem 0;

    }



    .hero h1 {

        font-size: 2.2rem;

    }



    .hero p {

        font-size: 1.1rem;

    }



    .section-title h2 {

        font-size: 2rem;

    }

}



@media (max-width: 575.98px) {

    .navbar-brand {

        font-size: 1.5rem;

    }



    .hero h1 {

        font-size: 2rem;

    }



    .btn-primary,

    .btn-outline-primary {

        padding: 0.7rem 1.5rem;

        font-size: 0.9rem;

    }



    .contact-info,

    .contact-form {

        padding: 1.5rem;

    }



    .whatsapp-float {

        width: 50px;

        height: 50px;

        font-size: 24px;

        bottom: 20px;

        right: 20px;

    }



    .back-to-top {

        width: 40px;

        height: 40px;

        font-size: 1rem;

        bottom: 80px;

        right: 20px;

    }

}





.product-main-image {

    width: 100%;

    max-height: 520px;

    object-fit: contain;

    background: #f8f9fa;

    border-radius: 12px;

    padding: 12px;

}



.product-thumb {

    width: 72px;

    height: 72px;

    object-fit: cover;

    border-radius: 8px;

    cursor: pointer;

    border: 1px solid #ddd;

}