:root {
    --header-height: 60px; /* Desktop header height */
}
body {
    scroll-behavior: smooth;
        margin: 0;
    padding: 0;
        padding-top: var(--header-height);

}


/* Base Section */
.hero-video-section {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--header-height));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;      /* full width */
    height: 100%;     /* full height */
    object-fit: cover; /* fill container without stretching */
    /*transform: translate(-50%, -50%);*/
        background-color: #000;

    z-index: 1;
}

/* Background Video */
.hero-video-section video.fullscreen-video {
    position: absolute;
    left: 50%;
    width: 130%;
    height: 90%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 1;
    background-color: #000;
}

/* Overlay for contrast */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2;
}

/* Caption Content */
.hero-caption {
    position: relative;
    z-index: 3;
    color: #fff;
    text-align: center;
    padding: 0 20px;
}
.hero-video-section::before,
.hero-video-section::after {
    content: "";
    position: absolute;
    top: 0;
    width: 10%;  /* adjust width of blur zone */
    height: 100%;
    z-index: 3;  /* place above video but below text */
    pointer-events: none;
}

/* Left blur */
.hero-video-section::before {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent);
    backdrop-filter: blur(100px);
}

/* Right blur */
.hero-video-section::after {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), transparent);
    backdrop-filter: blur(100px);
}


.hero-caption h1 {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.hero-caption p {
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 25px;
}

.hero-caption .btn {
    background-color: #fff;
    color: #000;
    border: none;
    padding: 12px 28px;
    font-weight: 600;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.hero-caption .btn:hover {
    background-color: #000;
    color: #fff;
}

/* Responsive Design */
@media (max-width: 768px) {
    :root {
        --header-height: 95px; /* Mobile header height */
    }

    .hero-video-section {
        height: 70vh;
    }
}
@media (max-width: 576px) {
    :root {
        --header-height: 100px;
    }

    .hero-video-section {
        height: 60vh;
    }
}

@media (max-width: 992px) {
    :root {
        --header-height: 85px;
    }

    .hero-video-section {
        height: 80vh;
    }
}

@media (min-width: 1200px) {
    :root {
        --header-height: 80px;
    }

    .hero-video-section {
        min-height: 800px;
    }
}



/* Video Section */

/* ====================================
   0. Global Layout & Structure
   ==================================== */

.video-section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Crucial for scroll-snap and visual separation */
    width: 100%;
    padding: 60px 0; /* Add vertical padding for content spacing */
    margin: 0;
    overflow-x: hidden;
}

/* Video & Hover Content Alignment */
.video-hover-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; /* Increase space between video and description */
    width: 90%;
    max-width: 1600px; /* Larger container */
    margin: 60px auto;
}


/* ====================================
   1. Global Card & Video Styles
   ==================================== */

.video-card {
    /* Use flex-grow and flex-shrink, but set a smaller basis for better fitting */
    flex: 1 1 300px; 
    min-width: 250px;
    max-width: 500px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    /* Use aspect-ratio or remove fixed height to be more responsive */
    /* Removed max-height: 358px; and height: 395px; for responsiveness */
    aspect-ratio: 16 / 9; /* Use a common aspect ratio for video */
    margin-left: 0; /* Removed fixed margin-left: 7px; */
    margin-top: 0; /* Removed margin-top: 50px; as container now handles vertical margin */
    transition: box-shadow 0.4s ease; /* Ensure shadow transition is smooth */
}

.video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.4s ease;
    box-shadow: none !important; 
}

.video-card:hover video {
    transform: scale(1.03);
}

/* ====================================
   2. Global Hover Content Styles
   ==================================== */

.video-hover-content {
    /* Allows content to shrink more than the video card */
    flex: 2 1 400px; 
    max-width: 900px;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); 
    opacity: 0;
    transform: translateX(10px); 
    transition: all 0.4s ease;
    margin-top: 0; /* Removed margin-top: 50px; */
}

/* Specific overrides for leather (now unnecessary with general fix, but kept for clarity) */
.video-card-leather {
    margin-top: 0 !important; 
}
.video-hover-content-leather {
    margin-top: 0 !important; 
}

.video-hover-container:hover .video-hover-content {
    transform: translateX(0);
    opacity: 1;
}

/* Global Paragraph Base Style (Overridden by ID rules) */
.video-hover-content p {
    font-size: 1.25rem; /* Slightly reduced font size for better fit */
    line-height: 1.6;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    font-weight: 500;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin-top: 0 !important; 
    background-color: rgba(100, 100, 100, 0.8); 
    color: #fff; 
}

/* ====================================
   3. Global Overlay Text Styles
   ==================================== */

.video-overlay-text,
.video-overlay-textnew,
.video-overlay-textnewOEM {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 900;
    font-style: italic;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
    z-index: 2;
    pointer-events: none;
    /* Added to prevent text from overflowing the video card on smaller screens */
    white-space: nowrap; 
    padding: 0 5px; /* Small padding to prevent text from touching edges */
}

.video-overlay-text {
    font-size: 30px;
    font-family: 'Dancing Script', 'cursive';
}
.video-overlay-textnew {
    font-size: 20px; /* Reduced size for better fit */
    font-family: 'Times New Roman', Times, serif;
}
.video-overlay-textnewOEM {
    font-size: 25px; /* Reduced size for better fit */
    font-family: 'Times New Roman', Times, serif;
}

/* ====================================
   4. Section-Specific Styles (Theming)
   ==================================== */

/* --- Handicraft (#video1) Styles: Green/Dark Theme --- */
#video1 .video-card {
    box-shadow: 0 8px 20px rgba(4, 163, 136, 0.8); /* Green Shadow */
}
#video1 .video-hover-content p {
    background-color: #04a388; /* Dark Green */
    color: #fff;
}

/* --- Leather (#video2) Styles: Yellow/Orange Theme --- */
#video2 .video-card {

    box-shadow: 0 8px 20px rgba(255, 165, 0, 0.8); /* Amber Shadow */
}
#video2 .video-hover-content p {
    background-color: #f09819; /* Orange from your HTML inline style */
    color: #fff;
}

/* --- Imitation Jewellery (#video3) Styles: Purple Theme --- */
#video3 .video-card {
    box-shadow: 0 8px 20px rgba(128, 0, 128, 0.8); /* Deep Purple Shadow */
}
#video3 .video-hover-content p {
    background-color: rgba(128, 0, 128, 0.7); /* Semi-transparent Purple */
    color: #fff;
    border: 1px solid #ffccff;
}

/* --- Garments (#video4) Styles: Magenta Theme --- */
#video4 .video-card {
    box-shadow: 0 8px 20px rgba(49, 49, 49, 0.8); /* Strong Magenta Shadow */
}
#video4 .video-hover-content p {
    background-color: #6e6e6e; /* Gray from your original HTML inline style */
    color: #fff;
}

/* --- Used Auto Components (#video5) Styles: Dark/Brown Theme --- */
#video5 .video-card {
    box-shadow: 0 8px 20px rgba(139, 69, 19, 0.8); /* Saddle Brown Shadow */
}
#video5 .video-hover-content p {
    /* Use a semi-transparent dark overlay for text on image background */
    background-color: rgba(0, 0, 0, 0.6); 
    color: #fff;
    font-style: normal; /* Override italics */
}

/* --- OEM/Aftermarket Auto Components (#video6_oem) Styles: Gray Theme --- */
#video6_oem .video-card {
    box-shadow: 0 8px 20px rgba(119, 119, 119, 0.9); /* Gray Shadow */
}
#video6_oem .video-hover-content p {
    background-color: #fff; 
    color: #777777ff;
    font-style: normal;
    font-weight: bold; /* Keep bold text from HTML */
}

/* --- Coffee (#video7_coffee) Styles: Brown Theme --- */
#video7_coffee .video-card {
    box-shadow: 0 8px 20px rgba(114, 50, 4, 0.9); /* Brown Shadow */
}
#video7_coffee .video-hover-content p {
    background-color: rgba(147, 90, 10, 0.8); /* Darker transparent brown */
    color: #d5beac; /* Coffee-themed text color */
    font-weight: bold;
}

/* --- Tea (#video8_tea) Styles: Default/Neutral Theme --- */
#video8_tea .video-card {
    box-shadow: 0 8px 20px rgba(255, 145, 1, 0.6); /* Green Tea Shadow */
}
#video8_tea .video-hover-content p {
    /* Default light background */
    background-color: rgba(240, 240, 240, 0.9); 
    color: #333; /* Dark text */
    font-style: normal;
}

/* ====================================
   5. Utility Styles
   ==================================== */
.decorative-divider {
    width: 100%;
    height: 20px;
    background: linear-gradient(to right, #04a388 0%, #3ab09cff 30%, #71a9a0ff 60%, #9db4b0ff 100%);
    border-radius: 50% / 50%;
    margin: 30px 0;
}

/* ====================================
   6. Responsiveness (Crucial for Slider Fix)
   ==================================== */

/* Apply this rule to prevent the side-by-side layout from breaking on smaller screens */
@media (max-width: 992px) {
    .video-hover-container {
        /* Stack elements vertically on smaller screens */
        flex-direction: column; 
        align-items: center;
        width: 95%;
        gap: 10px;
        margin: 30px auto;
    }

    .video-card {
        /* Allow the video card to take full available width */
        flex-basis: auto; 
        width: 100%;
        max-width: 500px;
        margin-left: 0;
        /* Reapply the video card's specific height/aspect for a better look */
        aspect-ratio: 16 / 9; 
    }

    .video-hover-content {
        /* Allow hover content to take full available width */
        flex-basis: auto;
        width: 100%;
        max-width: 500px;
        /* Ensure the content is visible without hover, or adjust hover to click/touch */
        opacity: 1; /* Make content always visible on touch devices */
        transform: translateX(0);
    }
    
    /* Remove the hover effect that makes the text content appear, as it's now always visible */
    .video-hover-container:hover .video-hover-content {
        opacity: 1;
        transform: translateX(0);
    }

    .video-hover-content p {
        font-size: 1.1rem;
        padding: 10px;
    }
}
/* about us */

/* Overlay for readability */
.overlay {
    background-color: rgba(255, 255, 255, 0.85);
    /* White overlay with transparency */
    min-height: 100vh;
    padding-top: 60px;
    padding-bottom: 60px;
}

.section-heading {
    font-size: 2rem;
    font-weight: 700;
    color: #007d7b;
    margin-bottom: 1rem;
}

.highlight {
    color: #007d7b;
}

.content-block {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

ul li {
    margin-bottom: 10px;
}

@media (min-width: 768px) {
    .section-heading {
        font-size: 2.5rem;
    }
}

.decorative-divider {
    width: 100%;
    height: 40px;
    /* make it taller if you want a wave look */
    margin: 0;
    /* remove the 30px vertical space */
    padding: 0;
    line-height: 0;
    /* remove inline whitespace */
}

.decorative-divider svg {
    display: block;
    /* removes inline svg white gap */
    width: 100%;
    height: 100%;
}

.video-section {
    margin: 0;
    padding: 0;
}

/* Add to your existing <style> block */

/* 1. Apply Scroll Snapping to the Scrollable Container */
.page-wrapper {
    /* * IMPORTANT: The height must be set to the viewport height 
     * and overflow-y set to auto/scroll for snapping to work.
     * Assuming .page-wrapper contains all your content.
     */
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    /* Enable vertical snapping, and force it (mandatory) */
    /* optional: smoother scrolling */
    scroll-behavior: smooth;
}

/* 2. Define the Snap Target on each Section */
.hero-video-section,
.video-section,
#about,
#contact {
    scroll-snap-align: start;
    /* Snap to the start edge of the element */
    min-height: 100vh;
    /* Make sure each section takes up at least the full viewport height */
}

/* 3. Adjust your existing .hero-video-section */
.hero-video-section {
    /* Set the section height to the full viewport height */
    height: 100vh;
    /* Remove the conflicting margin-top from .mt-7 (Bootstrap class) as it'll break the full-page snap. */
    margin-top: 0 !important;
}

/* 4. Correct the media query for smaller screens */
/* The existing media query conflicts with the 100vh setup. Adjust it like this: */
@media (max-width: 992px) {
    /* Remove or significantly simplify the hero-video-section height adjustment 
       or calculate the height to include the header's height if it's fixed.
       For pure snapping, 100vh is usually best. 
       If your header is fixed and 60px high, use: */
    /* .hero-video-section {
        height: 100vh; 
        margin-top: 0;
    }
    */
    /* If you still want the video section to start after the header: */
    /*
    .hero-video-section {
         height: calc(100vh - 60px); 
         margin-top: 60px;
         scroll-snap-align: start; // Keep this
    }
    */
}



/* For now, it's safer to use 100vh and remove the conflicting responsive heights/margins for the scroll-snap container and its children. */
/* contact us */
/* General Typography */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: 'Roboto', sans-serif;
    color: #000;
    margin-bottom: 1rem;
}

p {
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
}

/* Section Styling */
.contact-section {
    min-height: 100vh;
    padding: 80px 0;
    background-color: #f7f7f7;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #555;
}

/* Heading */
.heading {
    font-size: 2rem;
    font-weight: 700;
}

/* Contact Image */
.contact-img {
    max-width: 80%;
}

/* Contact Form Box */
.contact-box {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    
}

.form-control {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 12px 15px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: #000;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.btn-primary {
    background-color: #000;
    color: #fff;
    padding: 12px;
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #333;
}

/* Messages */
#form-message-warning {
    color: #B90B0B;
    display: none;
}

#form-message-success {
    color: #28a745;
    font-weight: bold;
    display: none;
}

/* Responsive */
@media (max-width: 991px) {
    .contact-section {
        padding: 50px 15px;
    }

    .contact-img {
        margin-bottom: 30px;
    }
}

/* news css */
/* Remove extra spacing from section */
.video-section {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Video container full height */
.video-card12 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Make video fill container properly */
.video-card12 video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ensures video covers the box without stretching */
  display: block;
}

/* Overlay text styling */
.video-overlay-text {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.video-overlay-textjewl
{
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
/* Right side text block */
.text-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* match video height */
  background-color: #f5f5f5; /* optional background */
  padding: 50px;
}

.text-content p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #333;
  margin: 0;
}

/* Make sure both columns have equal height */
.row.g-0 {
  display: flex;
  flex-wrap: wrap;
}

/* Responsive fix */
@media (max-width: 768px) {
  .text-content {
    padding: 30px;
  }

  .video-card12 video {
    height: 300px;
  }
}



/* Make sure section takes full width */
#video8_tea.video-section {
  width: 100%;
  margin: 0;
    padding: 60px 0 60px 40px; /* top | right | bottom | left */

}

/* Use flexbox on the row to align side by side */
#video8_tea .row {
  display: flex;
  align-items: stretch; /* ensures both sides are same height */
  flex-wrap: wrap;
  margin: 0;
}

/* Left side video container */
#video8_tea .video-card12 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Make video fill its column perfectly */
#video8_tea .video-card12 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay text styling */
#video8_tea .video-overlay-text {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

/* Right side text */
#video8_tea .text-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background-color: #f5f5f5;
  height: 100%;
}

#video8_tea .text-content p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #333;
  margin: 0;
  max-width: 500px;
}

/* Responsive layout (stack on mobile) */
@media (max-width: 768px) {
  #video8_tea .row {
    flex-direction: column;
  }

  #video8_tea .video-card12 video {
    height: 300px;
  }

  #video8_tea .text-content {
    padding: 30px;
  }
}