:root {
    --primary-red: #AF032A;
    --text-dark: #333333;
    --font-heading: 'Mukta Mahee', sans-serif;
    --font-body: 'Montserrat', sans-serif;
    --nav-height: 92px; 
    --top-bar-height: 40px; /* Define fixed height for math */
}

body { font-family: var(--font-body); margin: 0; padding: 0; }
h1, h2, h3, .nav-link, .btn-slant { font-family: var(--font-heading); }

/* --- TOP BAR (Fixes the Overlap Issue) --- */
.top-bar {
    background-color: var(--primary-red);
    height: var(--top-bar-height); 
    color: white;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    position: relative; 
    z-index: 1002; 
    
}


/* --- HEADER WRAPPER (Positions Navbar Down) --- */
.header-wrapper {
    position: absolute; 
    top: var(--top-bar-height); 
    left: 0;
    width: 100%;
    z-index: 1000; 
}

/* --- NAVBAR --- */

.navbar {
    height: var(--nav-height);
    background: white; /* Image 1 has white background */
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    
    /* These lines create the "floating" look */
    margin-top: 10px; 
    border-radius: 5px;
}

/* LOGO & LINKS */
.nav-logo { max-height: 60px; width: auto; }
.nav-link {
    color: #000 !important;
    font-weight: 700;
    font-size: 15px;
    padding: 0 15px !important;
    text-transform: capitalize;
    transition: color 0.3s;
}
.nav-link:hover, .nav-link.active { color: var(--primary-red) !important; }

/* --- SLANTED BUTTON --- */
.btn-slant {
    background-color: var(--primary-red);
    color: white !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    height: 88%;
    padding: 0 30px 0 50px; 
    display: flex; align-items: center;
    clip-path: polygon(50px 0, 100% 0, 100% 100%, 0% 100%);
    transition: background-color 0.3s;
}
.btn-slant:hover { background-color: #389538; }

.mega-dropdown {
  position: relative;
}

.mega-menu {
  left: 50% !important;
  transform: translateX(-50%);
  top: 100%;
  margin-top: 0;
  width: 560px;
  border: none;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.mega-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  top: 100%;
}

.mega-inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  background: #fff;
}

.mega-left {
  padding: 24px;
  border-right: 1px solid #e6e6e6;
}

.mega-category {
  display: block;
  padding: 10px 0;
  color: #111;
  text-decoration: none;
}

.mega-category:hover,
.mega-category.active {
  color: #c0002b;
}

.mega-right {
  padding: 24px;
}

.mega-right a {
  display: block;
  padding: 6px 0;
  color: #111;
  text-decoration: none;
}

.mega-right a:hover {
  color: #c0002b;
}

@media (min-width: 992px) {
  .mega-dropdown:hover .dropdown-menu {
    display: block;
  }
}



/* --- STICKY HEADER --- */
/* 1. Define the Slide-Down Animation */
@keyframes slideDown {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* 2. The Sticky State (Active when scrolled down) */
.menu-sticky.sticky {
    /* POSITIONING: Fix to top and force full width */
    position: fixed !important;
    top: 0; 
    left: 0; 
    width: 100% !important; 
    height: 80px !important;
    
    /* APPEARANCE: White background, Shadow, Square corners */
    background-color: #ffffff !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 2000; 
    
    /* IMPORTANT: Override the "First Page" styles */
    margin-top: 0 !important;    /* Removes the gap */
    border-radius: 0 !important; /* Removes rounded corners */
    
    /* ANIMATION: Slide in from top */
    animation: slideDown 0.4s ease-in-out forwards;
}

/* 3. STICKY CONTENTS (Adjustments for the sticky bar) */
.menu-sticky.sticky .container-fluid {
    /* Add some padding so logo/button don't touch the screen edges */
    padding-left: 30px;
    padding-right: 30px;
}

/* 4. LINKS: Keep Black */
.menu-sticky.sticky .nav-link { 
    color: #333 !important; 
}
.menu-sticky.sticky .nav-link:hover {
    color: var(--primary-red) !important;
}

/* 5. LOGO: Keep Normal */
.menu-sticky.sticky .nav-logo { 
    filter: none; 
    max-height: 80px; 
}

/* 6. BUTTON: Keep Visible & Slightly Smaller */
.menu-sticky.sticky .btn-slant { 
    display: flex !important; 
    transform: scale(0.95); 
}
/* --- HERO SLIDER --- */
.hero-slider {
    position: relative;
    height: 95vh; 
    background: #000;
    overflow: hidden;
    /* Hero naturally sits after Top Bar because Header-Wrapper is absolute */
}

.hero-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1s ease-in-out; z-index: 1;
}
.hero-slide.active { opacity: 1; z-index: 2; animation: fastZoom 20s linear forwards; }
@keyframes fastZoom { from { transform: scale(1); } to { transform: scale(1.35); } }

.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); }

/* CONTENT SPACING FIX */
.hero-content {
    /* Push text down so it doesn't collide with the navbar that is floating over it */
    padding-top: 150px; 
}

.hero-title {
    font-size: 3.2rem; font-weight: 700; line-height: 1.2;
    opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out 0.5s;
}
.hero-subtitle {
    font-size: 1.2rem; font-weight: 500;
    opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out 0.8s;
}
.hero-slide.active .hero-title, .hero-slide.active .hero-subtitle { opacity: 1; transform: translateY(0); }

.slider-dots { position: absolute; bottom: 30px; left: 10%; z-index: 10; }
.dot { display: inline-block; width: 10px; height: 10px; margin: 0 5px; background: transparent; border: 2px solid white; border-radius: 50%; cursor: pointer; transition: all 0.3s; }
.dot.active { background: white; transform: scale(1.2); }

.back-to-top {
    /* Flexbox Centering (Crucial) */
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    
    /* Position */
    position: fixed; 
    bottom: 40px; 
    right: 30px; 
    z-index: 99; 
    
    /* Visuals */
    background-color: rgb(255, 255, 255); 
    color: rgb(8, 8, 8); 
    border: none; 
    border-radius: 50%; 
    box-shadow: 0 4px 10px rgb(141, 139, 139); 
    
    
    height: 40px; 
    width: 40px;   
    padding: 0;    
    
    /* Icon Size */
    font-size: 16px; /* Adjust this if the arrow is too big/small */
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s;
}

.back-to-top:hover {
    transform: translateY(-5px); /* Nice hover effect */
    background-color: #ffffff;      /* Optional: Change color on hover */
}

@media (max-width: 991px) {
    .navbar { height: auto; padding: 10px !important; }
    .btn-slant { display: none !important; }
    .hero-title { font-size: 2rem; }
    .top-bar { display: none; }
    /* On mobile, reset position to normal flow to avoid overlap issues */
    .header-wrapper { position: relative; top: 0; }
    .hero-content { padding-top: 50px; }
}


/* --- UTILITIES --- */
.ls-2 { letter-spacing: 2px; }
.leading-relaxed { line-height: 1.8; }

/* --- COLLAGE GRID LAYOUT --- */
.collage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 20px;
    align-items: start; 
}

.collage-item {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #f0f0f0; 
}

.collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Left Column */
.item-screws { height: 450px; } 
.item-sockets { height: 420px; display: flex;} 

/* Right Column */
.item-bolts { height: 420px; margin-top: 20px; display: flex; }   
.item-nuts  { height: 450px; display: flex; }   


/* --- TEXT ANIMATION --- */
.animate-text {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.animate-text.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- DELAYS --- */
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .collage-grid {
        gap: 10px;
        margin-top: 40px;
    }
    /* Reset heights for mobile to be uniform */
    .item-screws, .item-bolts, .item-nuts { height: 30px; }
    .item-sockets { height: 250px; }
}

/* --- FEATURES CARD SECTION --- */
.feature-card {
    background-color: var(--primary-red); /* Default: Red */
    color: white;
    padding: 2.5rem 1.5rem;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    height: 100%;
    
    /* Smooth Transition for background & shadow */
    transition: all 0.3s ease-in-out; 
    
    border: 1px solid transparent;
    box-shadow: 0 10px 30px rgba(175, 3, 42, 0.15);
}

/* --- CARD CONTENT TRANSITIONS --- */
.card-icon, .card-title, .card-text {
    transition: color 0.3s ease-in-out;
}

/* Default Colors */
.card-icon { font-size: 2.5rem; margin-bottom: 1.5rem; color: white; }
.card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: white; }
.card-text { font-size: 0.9rem; line-height: 1.6; color: rgba(255, 255, 255, 0.9); }

/* --- CORNER CUTOUT --- */
.corner-cutout {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 40px;
    height: 40px;
    
   
    background-color: #fcfcfc; 
    
    border-top-left-radius: 20px;
    z-index: 2;
    transition: background-color 0.3s ease-in-out;
}

/* =========================================
   HOVER EFFECTS (Fully White + Black Text)
   ========================================= */

.feature-card:hover {
    background-color: #ffffff !important; /* Force Pure White */
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    border: 1px solid #e0e0e0; /* Subtle border to define the white card */
}

/* Text turns Black */
.feature-card:hover .card-icon { color: var(--primary-red) !important; /* Icon turns Red */ }
.feature-card:hover .card-title { color: #000000 !important; /* Title turns Black */ }
.feature-card:hover .card-text { color: #333333 !important; /* Text turns Dark Gray */ }


.feature-card:hover .corner-cutout {
    
    background-color: #fcfcfc !important; 
     
}

.animate-block {
    opacity: 0;
    transition: all 0.6s ease-out; 
}
.fade-up { transform: translateY(30px); }

.animate-block.active {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced delays so the 4th card appears quicker */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }


/* ==================== CTA SECTION ==================== */
.cta-section {
    background-color: #ecf0f3;
    /* IMPORTANT: Large bottom padding allows the footer to overlap without covering content */
    padding: 40px 0 100px 0; 
}

.text-dark-gray { color: #333; font-size: 0.85rem; }

.cta-heading {
    color: var(--primary-red);
    font-size: 2.5rem;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.4;
    font-weight: 800;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   
}

.btn-cta {
    background-color: var(--primary-red);
    color: white;
    border: none;
    letter-spacing: 1px;
    font-weight: 800;
    transition: all 0.3s ease;
}
.btn-cta:hover {
    background-color: #a90226;
    color: white;
    transform: translateY(-3px);
}

/* --- GEOMETRIC FOOTER (Deep Cut / Steeper Sides) --- */

.geometric-footer {
    position: relative;
    
    margin-top: -250px; 
    z-index: 10;
}

.footer-content {
    background-color: #000000;
    

    padding: 290px 0 60px 0; 
   
   
    -webkit-clip-path: polygon(
        0% 0%, 
        30% 250px, 
        70% 250px, 
        100% 0%, 
        100% 100%, 
        0% 100%
    );
    clip-path: polygon(
        0% 0%, 
        30% 250px, 
        70% 250px, 
        100% 0%, 
        100% 100%, 
        0% 100%
    );
}

/* --- RESPONSIVE ADJUSTMENT --- */
@media (max-width: 991px) {
    /* Mobile doesn't need such a huge cut */
    .geometric-footer { margin-top: -100px; }
    
    .footer-content {
        padding-top: 140px;
        -webkit-clip-path: polygon(
            0% 0%, 
            20% 100px, 
            80% 100px, 
            100% 0%, 
            100% 100%, 
            0% 100%
        );
        clip-path: polygon(
            0% 0%, 
            20% 100px, 
            80% 100px, 
            100% 0%, 
            100% 100%, 
            0% 100%
        );
    }
}
/* --- FOOTER ELEMENTS --- */
.fs-09 { font-size: 0.95rem; }

.hover-red:hover { color: var(--primary-red) !important; }

/* Logo Box */
.footer-logo-box {
    background: white;
    padding: 20px 40px;
    border-radius: 4px;
    display: inline-block;
    max-width: 300px;
}

/* Social Squares */
.social-sq {
    display: inline-flex; align-items: center; justify-content: center;
    width: 35px; height: 35px;
    background-color: var(--primary-red); color: white;
    text-decoration: none; border-radius: 4px;
    transition: background 0.3s, transform 0.3s;
    
}
.social-sq:hover {
    background-color: white; color: var(--primary-red);
    transform: translateY(-3px);
}

/* --- COPYRIGHT BAR --- */
.copyright-bar {
    background-color: #021d05; 
    border-top: 1px solid #1a1a1a;
    
    /* Layout */
    width: 100%; 
    box-sizing: border-box; 
    
    /* Flexbox Centering */
    display: flex;            
    justify-content: center;  
    align-items: center;       
    flex-wrap: wrap;           
    
    /* Visuals */
    padding: 20px 15px;        
    color: #ffffff;
    gap: 10px;                 
}


.copyright-bar p {
    margin: 0;
    text-align: center;
}

.hover-text-red:hover { 
    color: var(--primary-red); 
    cursor: pointer; 
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 768px) {
    .copyright-bar {
        padding: 15px 10px;
        font-size: 14px; 
        flex-direction: column; 
        text-align: center;    
    }
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    
    .geometric-footer { margin-top: -80px; }
    
    .footer-content {
        padding-top: 120px;
        -webkit-clip-path: polygon(
            0% 0%, 
            10% 80px, 
            90% 80px, 
            100% 0%, 
            100% 100%, 
            0% 100%
        );
        clip-path: polygon(
            0% 0%, 
            10% 80px, 
            90% 80px, 
            100% 0%, 
            100% 100%, 
            0% 100%
        );
    }
    
    .cta-section { padding-bottom: 150px; }
    .footer-logo-box { margin: 30px 0; }
    
}