@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
    
 *{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Poppins",sans-serif;
 /* Base styles for the entire header */
.Header {
    width: 100%; /* Might be better as width: 100%; max-width: 1280px; in a real-world scenario */
    height: 63px;
    padding: 5.34px 60px;
    background: white;
    box-shadow: 0px 1.335px 2.67px rgba(171, 190, 209, 0.40);
    display: flex;
    align-items: left;
    justify-content: left; /* Centers the inner content block if Header width > content width */
    gap: 21.03px;
}

/* Logo styles */
.Logo1 {
    width: 250px; 
}

/* Container for the right side (menu) */
.RightMenu {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10.68px;
}

/* Container for the main menu items */
.HeaderMenu {
    width: 754px;
    height: 37px;
    display: flex;
    justify-content: flex-start;
    align-items: center; /* Changed from flex-start to center for better alignment */
    gap: 8.01px;
}

/* Individual Menu Item container */
.Menu {
    width: 145px;
    height: 37px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2.67px;
}

/* Button/Link styles */
.Button {
    /* Using <a> tag instead of <div> for navigation links */
    width: 145px;
    height: 37px;
    padding: 4.67px 10.68px;
    background: white;
    border-radius: 1.34px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.67px;
    text-decoration: none; /* Remove underline from links */
    transition: background-color 0.3s;
}

/* Default state for menu text (Home, About Us, etc.) */
.Home, .AboutUs, .Products, .Videos, .ContactUs {
    flex: 1 1 0;
    align-self: stretch;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #4D4D4D;
    font-size: 14px;
    font-family: 'Inter', sans-serif; /* Assuming Inter font is imported */
    font-weight: 500;
    line-height: 8.01px; /* This is an unusual line-height, often better left to default or a standard value */
}

/* Hover effect for non-contact buttons */
.Button:not(.ContactButton):hover {
    background-color: #f0f0f0;
}


/* Styles for the highlighted 'Contact Us' button */
.ContactButton {
    background: #4CAF4F; /* Green color */
}

.ContactButton .ContactUs {
    color: white;
}

/* Hover effect for the contact button */
.ContactButton:hover {
    background-color: #439a47; /* Slightly darker green on hover */
}

/* Styles for the SVG icon wrapper */
.ArrowsDirectionsRight {
    position: relative;
    width: 21px; /* Set explicit width/height for the SVG container */
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Clip-path for the SVG icon */
#clip0_52_507 rect {
    fill: white;
}
/* ✅ Hamburger button */
.Hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
    align-items: center;      /* ✅ centers horizontal alignment */
    justify-content: center;  /* ✅ centers vertical alignment */
}


.Hamburger span {
    width: 25px;
    height: 3px;
    background-color: #4D4D4D;
    border-radius: 2px;
}
/* ✅ Overlay background effect */
.Overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4); /* dim background */
    backdrop-filter: blur(5px); /* blur effect */
    z-index: 998; /* behind navbar menu */
}

/* ✅ Show overlay when active */
.Overlay.active {
    display: block;
}

/* ✅ Mobile Styles */
@media screen and (max-width: 1075px) {
.RightMenu {
        display: none;
        position: absolute;
        top: 70px;
        left: 50%;
        transform: translateX(-50%);
        width: 85%;  /* ✅ centered and nicer width */
        flex-direction: column;
        padding: 15px 0;
        z-index: 999; /* above overlay */
        box-shadow: 0px 4px 10px rgba(0,0,0,0.15);
        border-radius: 8px;
         border-bottom: 1px solid #ccc; /* ✅ add separator line */
    }

    .RightMenu.open {
        display: flex;
    }

    .HeaderMenu {
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    .Menu, .Button {
        width: 100%;
        justify-content: center;
    }
    .RightMenu .Menu {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);

}


    .Hamburger {
        display: flex;
        margin-left: auto;
    }
    .RightMenu .Menu:last-child {
        border-bottom: none;
    }
}

/* Words */
/* Container for the entire text block */
.SolutionHeading {
    width: 100%;
    height: auto;
    padding-top: 4%;
    text-align: center;
}

.HeadingPart1, .HeadingPart2 {
    /* Updated to use clamp() for fluid, bounded responsiveness */
    font-size: clamp(30px, 8vw, 65px); 
    
    font-family: 'Kaisei HarunoUmi', serif; /* Assuming the font is imported */
    font-weight: 700;
    
    /* IMPORTANT: Line height should be a relative unit (like a number) or 'em' for proper scaling. */
    /* I've set it to 1.2 for better readability, which is much safer than the original 20px. */
    line-height: 1.2; 
    
    word-wrap: break-word;
}

/* Style for "Solution of " */
.HeadingPart1 {
    color: #4D4D4D;
}

/* Style for "Carton Packaging" (the green part) */
.HeadingPart2 {
    color: #62B965; /* Green color */
}

/* Style for the smaller sub-text */
.SubText {
    color: #4D4D4D;
    /* Updated to use clamp() for fluid font sizing */
    font-size: clamp(14px, 3vw, 24px);
    font-family: 'Amethysta', serif; /* Assuming the font is imported */
    font-weight: 400;
    /* Changed to unitless line-height for responsive vertical spacing */
    line-height: 1.8; 
    word-wrap: break-word;
    /* To ensure the sub-text appears on a new line after the heading, 
        we'll treat it as a block element within the flow: */
    display: block; 
}
/* landing Page */
/* --- Global Styles --- */
/* Ensure better sizing calculations */
*, *::before, *::after {
    box-sizing: border-box;
    /* Use Inter font as a standard fallback for good readability */
    font-family: 'Inter', sans-serif;
}
/* Ensure the Cardo font is used where specified */
.EstablishedIn2003 span, .ManufacturingText span {
    font-family: 'Cardo', serif;
}

/* --- Layout: Flexbox Container for the 3 Columns --- */
.Frame1 {
    display: flex;
    padding: 40px 2%; /* EDITED: Reduced padding from 5% to 2% for a wider layout */
    gap: 20px; 
    justify-content: center;
    /* EDITED: Vertically centers the entire column set (including the two rectangles) */
    align-items: center; 
    width: 100%; 
    min-height: 400px;
}

/* Base style for columns */
.Column {
    display: flex;    
    flex-direction: column;
    align-items: center; 
    position: relative;
    width: 100%; 
}

/* Flex distribution for DYNAMIC SIZING */
.Column1, .Column3 {
    flex-grow: 1.5; /* Side columns grow at a rate of 1.5 */
    flex-shrink: 1;
}
.Column2 {
    flex-grow: 2; /* Center column is bigger and grows at a rate of 2 */
    flex-shrink: 1;
}

/* --- Content Containers (Must be 100% width of their flexible column) --- */
.Insidegroup1, .Insidegroup2 {
    width: 100%; 
    max-width: 320px; /* NEW: Set a max-width based on original design sizes */
    height: 190px; /* Base height for the card area */
    position: relative; 
    /* EDITED: Using margin: 0 auto to center the block horizontally */
    margin: 0 auto 20px auto; 
}

/* --- Main Video Element (Column 2) --- */
.Image55 {
    /* FIX: Allow the video to fill the space given by flex-grow: 2 */
    width: 100%; 
    height: auto; 
    /* REMOVED: max-width: 472px; - This was restricting the column's growth */
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* --- Base Styles for Rectangles (Background Cards) --- */
.Rectangle184, .Rectangle183 {
    background: rgba(232, 245, 233, 0.59);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    
    /* Use 100% to fill the Insidegroup container */
    width: 100%; 
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
}


/* -------------------------------------------------------------------------- */
/* RESPONSIVE ABSOLUTE CHILD ELEMENTS (Insidegroup 1)             */
/* Uses percentages relative to the 310x190 base parent size */
/* -------------------------------------------------------------------------- */

/* 1. Factory Image */
.Factory {
    width: 25.35%;  
    height: 25.26%; 
    left: 3.23%;    
    top: 12.10%;    
    position: absolute;
    max-width: 100%;
    height: auto;
}

/* 2. Text Block: "Established in 2003" */
.EstablishedIn2003 {
    width: 80.65%; 
    height: 35.26%; 
    left: 5.23%; 
    top: 64.74%; 
    position: absolute;
}

/* 3. Text Styling (Responsive REM units) */
.EstablishedIn2003 span {
    font-weight: 700;
    /* Using EM for letter-spacing to be responsive to font size */
    letter-spacing: 0.05em; 
    word-wrap: break-word;
}
.EstablishedIn2003 .text-prefix {
    color: #4D4D4D;
    font-size: 1.625rem; /* ~26px */
    line-height: .5rem;
}
.EstablishedIn2003 .text-year {
    color: #66BB69;
    font-size: 2.25rem; /* ~36px */
    line-height: 3rem;
}


/* -------------------------------------------------------------------------- */
/* RESPONSIVE ABSOLUTE CHILD ELEMENTS (Insidegroup 2)             */
/* Uses percentages relative to the 295x182 base parent size */
/* -------------------------------------------------------------------------- */

/* 1. Manufacturing Text Block */
.ManufacturingText {
    width: 84.75%; 
    height: 62.64%; 
    left: 5.42%; 
    top: 23.63%; 
    position: absolute;
}
.ManufacturingText span {
    font-weight: 700;
    font-size: 1.25rem; /* ~20px */
    line-height: 1.25em; 
    letter-spacing: 0.005em; 
    /* NEW: Setting display to inline-block helps with wrapping in constrained, positioned elements */
    display: inline-block; 
    /* NEW: Using the modern property for word breaking */
    overflow-wrap: break-word;
}
.ManufacturingText .manufacturing-highlight {
    color: #4CAF4F;
    /* FIX: Removed conflicting line-height property to allow text to wrap properly */
}
.ManufacturingText .manufacturing-normal {
    color: black;
}

/* 2. Successful Delivery Image */
.SuccessfulDelivery {
    width: 20.51%;
    height: 31.31%;
    left: 69.49%;
    top: 3.02%;
    position: absolute;
    max-width: 100%;
    height: auto;
}

/* --- Responsive Media Queries (Mobile View Cleanup) --- */
    .aboutusimage {
        width: 100%;                /* Smaller */
        height: auto;
        margin: 0 auto;
        display: block;
    }
/* --- Responsive Media Queries (Mobile View Cleanup) --- */
@media (max-width: 768px) {
        .HeadingPart2 {
        color: #62B965;
        line-height: 1.3;
    }
    /* Keep row layout but compress spacing for mobile */
    .Frame1 {
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;
        padding: 20px 4%;
        min-height: 200px;
    }

    /* Make Column1 and Column3 smaller */
    .Column1 {
        flex: 0.8;       
        display: flex;
    }
    .Column{
        
        justify-content: center; /* center vertically */
    }
        /* Make Column1 and Column3 smaller */
    .Column3 {
        flex: 0.8;              
        display: flex;
        margin-top: 40px;
        flex-direction: column; /* stack icon + text vertically */
        align-items: center;     /* center horizontally */
        justify-content: center; /* center vertically */
    }

    /* Middle Column a bit smaller too */
    .Column2 {
        flex: 1.2;                 /* Slightly larger than sides */
        max-width: 250px;
    }
    /* Optional: ensure absolute-positioned items adjust */
    .Factory, .EstablishedIn2003 {
        top:3%;
        position: static;  /* remove absolute positioning */
        margin: 10px 0 0 10px;     /* small spacing between icon & text */
    }

    /* Reduce image size in Middle Column */
    .aboutusimage {
        width: 100%;                /* Smaller */
        height: auto;
        margin: 0 auto;
        display: block;
    }
    .Rectangle183{
        height: auto;
    }
    .Rectangle184{
        height: auto;
    }
    /* Fix text issues inside columns */
    .Insidegroup1, .Insidegroup2 {
        display: flex;
        flex-direction: column;
        justify-content: center; /* ✅ this centers content vertically inside the card */
        width: 100%;
    }

    /* ✅ Reduce font size in Column1 + Column3 */
    .EstablishedIn2003 .text-prefix {
        font-size: 0.8rem;        /* smaller text */
        line-height: 1.2rem;
    }
    .EstablishedIn2003 .text-year {
        font-size: 0.8rem;
        line-height: 2rem;
    }
    .ManufacturingText span {
        font-size: 0.6rem;         /* Reduce text size */
        line-height: 1.2rem;
    }
    .ManufacturingText {
        top:3%;
        position: static;  /* remove absolute positioning */
        margin: 30px 0 20px 10px;     /* small spacing between icon & text */
    }

    /* ✅ Reduce images inside Column1 & 3 for balance */
    .Factory,
    .SuccessfulDelivery {
        width: 28%;
    }
    
}




/* ABout US intro Word */
/* Base styles and variables for a consistent look */
:root {
    --primary-color: #1B5E1F; /* Dark Green */
    --button-color: #4CAF4F; /* Lighter Green */
    --text-dark: #4D4D4D;
    --text-medium: #717171;
}

/* 1. Main Container (Responsive Grid) */
.Group3 {
    /* The original width was 452px. We use max-width for scaling. */
    max-width: 90%;
    /* Use padding instead of fixed height to let content define height */
    padding: 20px; 
    margin: 20px auto; /* Center the whole component */
    display: grid;
    /* Define two columns: 1 for the title/arrow, 2 for the main content */
    grid-template-columns: 1fr 3fr; /* 1 part for left, 3 parts for right */
    gap: 30px; /* Space between the two columns */
    position: relative;
}

/* 2. Left Column Styles (About Us Title & Arrow) */
.left-column {
    display: flex;
    flex-direction: column;
    /* The title and arrow were vertically separated in the original absolute layout. */
    justify-content: flex-start; 
    align-items: flex-start;
}

.AboutUsword {
    color: #1B5E1F;
    /* Scale font size using viewport units and clamp for better responsiveness */
    font-size: clamp(1.5rem, 3vw, 2.5rem); 
    font-family: 'Halant', serif; /* Assuming Halant is available */
    font-weight: 600;
    /* The original line-height was very large (52.9px for 20px font). 
       We adjust to a more reasonable value but keep it tall if needed. */
    line-height: 1.5; 
    white-space: nowrap; /* Keep 'About Us' on one line */
}

.Arrow1 {
    /* Position the arrow relative to the text in the new flow */
    width: 11rem; /* Adjust to a fixed width or percentage of column */
    margin-top: 10px; /* Space below the title */
}

.Arrow1 svg {
    width: 100%;
    height: auto;
    display: block;
}

/* 3. Right Column Styles (Content) */
.right-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space out the title, body, and button */
    gap: 15px; /* Vertical space between content elements */
}

.FitspecsTitle {
    color: #4D4D4D;
    /* Scale font size */
    font-size: clamp(1rem, 1.5vw, 1.4rem); 
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    line-height: 1.4; /* Adjusted from 14.69px for 8px font (very tall) */
}

.FitspecsBody {
    color: #717171;
    /* Scale font size */
    font-size: clamp(0.8rem, 1.1vw, 0.95rem); /* Scaled from 6px */
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 1.6; /* Adjusted from 6.68px for 6px font */
    text-align: justify;
}

/* 4. Button Styles (Responsive Sizing) */
.Buttonexplore {
    /* Use flex on the button container itself */
    display: inline-flex;
    background: #4CAF4F;
    border-radius: 4px; /* Scaled from 1.34px */
    justify-content: center;
    align-items: center;
    /* Use relative padding for a scalable button size */
    padding: 0.5em 1.5em; 
    gap: 0.5em;
    /* The button was absolutely positioned very far right. 
       Use auto margins to push it to the right of the right-column. */
    align-self: flex-end; 
    margin-top: 10px;
}

.Label {
    color: white;
    /* Scale font size for the button label */
    font-size: 0.8em; 
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    line-height: 1.2; 
    text-align: center;
}


/* 5. Media Query for smaller screens (Mobile first approach) */
@media (max-width: 768px) {
    .Group3 {
        /* On small screens, stack the two columns vertically */
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .left-column {
        /* For mobile, align the title/arrow to the center or left of the full width */
        align-items: flex-start;
        flex-direction: row; /* Put the text and arrow next to each other */
        align-items: center;
        gap: 20px;
    }
    
    .AboutUsword {
        font-size: clamp(1.2rem, 5vw, 1.8rem);
        line-height: 1;
    }

    .Arrow1 {
        width: 60px; /* Smaller arrow on mobile */
        margin-top: 0;
    }
    
    .Button {
        /* Center the button on mobile if preferred, or keep it right */
        align-self: center;
    }
}
/* Mission Vission and Goal Box */
/* Main Container - The original "Group 7" */
.corporate-container {
    width: 100%; /* Fluid width for responsiveness */
    
    background: #F5F7FA; /* White background for the main card */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    padding: 10px 0;
    
    /* Flexbox setup for mobile (default: column layout) */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Spacing between the items */
}

/* Media Query for Desktop/Larger Screens */
@media (min-width: 768px) {
    .corporate-container {
        flex-direction: row; /* Switch to row layout on desktop */
        padding: 20px;
        gap: 0;
    }
}

/* Individual Item Card Styling (Mission, Vision, Goals) */
.item-card {
    flex: 1; /* Allows all cards to take equal space in a row */
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.item-card:hover {
    background-color: #FFFFFF; /* Light hover effect */
}

/* Separator lines (only on desktop using borders/dividers) */
@media (min-width: 768px) {
    .item-card:not(:last-child) {
        border-right: 1px solid #e0e0e0;
    }
}


/* Icon Styling */
.icon {
    width: 5.5rem;
    height: 5rem;
    color: #4A90E2; /* Primary color for icons */
    margin: 0 auto 10px auto;
    stroke-width: 2.5; /* Slightly thicker stroke for better visibility */
}

/* Heading Styling (Mission, Vision, Goals) */
.heading {
    color: #4D4D4D;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Description Text Styling */
.description {
    color: #717171;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 0 10px; /* Add slight horizontal padding for better readability on narrow screens */
    margin: 0;
}
.productimagesdesign {
    width: 100%; /* Ensures the image never overflows its parent container */
    height: auto;    /* Crucial: Maintains the image's aspect ratio */
    display: block;  /* Removes any extra space below the image (common for img tags) */
    margin: 0 auto;  /* Optional: Centers the image if it's smaller than max-width */
}

/* Product Page grid */
/* --- PRODUCT CATALOG STYLES --- */
.productcatalog{
    margin: 0;
    padding: 20px;
    background-color: #f7f9fc;
    font-family: 'Inter', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}
.product-catalog-grid {
    
    width: 100%;
    max-width: 90%; /* Wider container for the 2x2 grid */
    margin: 0 auto;
    display: grid;
    gap: 20px;
    padding: 10px;
}

/* Mobile Layout: 1 column */
.product-catalog-grid {
    grid-template-columns: 1fr;
}

/* Tablet/Desktop Layout: 2 columns */
@media (min-width: 768px) {
    .product-catalog-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns, equal width */
    }
}

/* Individual Product Card Styling */
.product-card {
    background: #FFFFFF;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: flex; /* Use flex inside the card for image and text area */
    align-items: stretch;
    min-height: 140px; /* Ensure a consistent minimum height */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Left side of the card (Image Area) */
.image-area {
    flex: 0 0 40%; /* Fixed width for the image side */
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-right: 1px solid #e0e0e0;
}

.product-image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin: 3px 0;
}


/* Right side of the card (Text Area) */
.text-area {
    flex-grow: 1;
    background: #F8FFF9; /* Light green background from original HTML */
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.title {
    color: #237D31; /* Dark Green from original HTML */
    font-size: 1.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.code {
    color: #4D4D4D; /* Medium Gray */
    font-size: 1.0rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    margin-bottom: 5px;
    display: block;
    line-height: 1.5;
}

.details {
    color: #909090; /* Light Blue/Gray from original HTML */
    font-size: 0.9rem;
    font-weight: 200;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    margin: 0;
}
/* New style for section headings (like "Interior Additions") */
.section-heading {
    text-align: center;
    color: #4D4D4D;
    font-size: 24px; /* Slightly larger heading */
    font-weight: 700;
    margin: 40px 0 25px 0; /* Clear spacing */
    padding-bottom: 5px;
}
/* Videos */
/* General reset for better box-model handling */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 1. Main Container - Responsive Layout */
.video-gallery-container {
    /* Define the overall width and height with responsiveness in mind */
    /* Using max-width to keep it contained on very large screens */
    width: 100%;
    column-gap: 20px;
    min-height: 100px;
    background: #ffffff;
    display: flex; /* Enable flexbox for horizontal layout */
    padding: 10px; /* Add some internal padding */
    font-family: Inter, sans-serif;
    border-radius: 8px; /* Optional: for a nicer look */
}

/* 2. Menu Section (Icon and Label) */
.video-menu-section {
    /* Takes a fixed proportion of the space */
    flex-shrink: 0;
    width: 15%; /* Allocate about 15% of the container width to the menu */
    display: flex;
    flex-direction: column; /* Stack icon and text vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    gap: 5px; /* Space between icon and text */
    padding-right: 10px;
}

.video-playlist-icon {
    /* Make the icon size relative to the container height */
    max-width: 100%;
    height: auto;
    max-height: 40px; /* Limit the max height of the icon */
}

.video-label {
    color: #4D4D4D;
    font-size: clamp(20px, 2.5vw, 25px); /* Responsive font size */
    font-weight: 600;
    text-align: center;
}

/* 3. Thumbnails Section (The 3 videos) */
.video-thumbnails-section {
    /* Takes up the remaining space */
    flex-grow: 1;
    display: flex;
    gap: 10px; /* Space between the thumbnails */
    align-items: center; /* Vertically align thumbnails in the center */
    justify-content: space-around; /* Distribute space around the thumbnails */
    padding-left: 10px;
}

.video-thumbnail {
    /* Each thumbnail should take an equal share of the space */
    width: calc(33.33% - 10px); /* Approx one third of the remaining width, accounting for gap */

    min-width: 80px; /* Ensure they don't get too small on tiny screens */
    
    height: 15vw;
    /* Ensure the image fills its container without distortion (cropping may occur) */
    object-fit: cover;
    border-radius: 4px; /* Optional */
}

/* Optional: Media query for very small screens if the layout breaks */
@media (max-width: 380px) {
    .video-gallery-container {
        /* On very small screens, maybe stack the content or adjust proportions */
        min-height: 80px;
    }
    .video-thumbnail {
        min-width: 60px; /* Allow thumbnails to be smaller */
    }
}
/* Certificate */
/* 1. Main Container */
.certificate-page-container {
    /* Set a responsive width, max-width mimics the original content area */
    width: 90%; 
    padding: 20px 5%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 2. Header Section */
.page-header {
    display: flex;
    align-items: center;
    gap: 15px; /* Increased gap for separation */
    padding: 5px 0;
    /* Center the header text and line visually */
    justify-content: flex-start; 
}

.header-icon {
    /* Fixed size for the icon (using an SVG placeholder here) */
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.header-title-wrapper {
    /* This wrapper stacks the Title and the short Line */
    display: flex; 
    flex-direction: column;
    align-items: center;
    align-items: flex-start; /* Aligns the short line to the left edge of the text */
    flex-shrink: 0;
}


.header-title {
    color: black;
    /* Responsive font size */
    font-size: clamp(16px, 5vw, 24px); 
    font-weight: 600;
}

.header-line {
    /* This creates the short, centered underline segment */
    width: 70px; /* Specific length to look like a segment under the word */
    height: 3px; /* Thickness of the line */
    background-color: black;
    margin-top: 2px; /* Small space below the word */
    /* This line is now aligned to the left side of the text by the wrapper's align-items: flex-start */
}

/* 3. Certification Content Area (Staggered Layout) */
.certification-content {
    display: flex;
    margin-left: 15%;
    flex-direction: column;
    position: relative;
    align-items: center;
    justify-items: center;
    /* Height is set to ensure the second element can overlap the first */
    min-height: 400px; 
    padding: 20px 0;
}

.cert-block {
    display: flex;
    position: relative; /* Context for image and text positioning */
    align-items: center;
    transition: all 0.3s ease;
}

.cert-image {
    /* Set a responsive width for the images */
    width: clamp(300px, 45vw, 250px); 
    height: auto;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    object-fit: contain;
    /* Ensures the image is on top of the text from other blocks if they overlap */
    z-index: 10; 
}

.cert-text {
    color: #4D4D4D;
    /* Responsive font size */
    font-size: clamp(10px, 3vw, 14px); 
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    text-align: center;
    z-index: 5; 
}

/* Staggering the ISO block (Top-Left) */
.cert-block.iso {
    /* Pushes the ISO block to the left */
    align-self: flex-start;
}

.cert-block.iso .cert-text {
    /* Position the text to the LEFT of the certificate image */
    position: absolute;
    right: 100%; /* Start positioning from the left edge of the image */
    padding-right: 20px; /* Space between text and image */
    width: clamp(100px, 20vw, 150px);
    text-align: right;
}

/* Staggering the FSC block (Bottom-Right) */
.cert-block.fsc {
    /* Pushes the FSC block down and right, creating the stagger effect */
    align-self: flex-end;
    /* Use margin-top to pull it up over the ISO block */
    margin-top: -150px; 
}

.cert-block.fsc .cert-text {
    /* Position the text BELOW the certificate image */
    bottom: -50px; /* 50px below the bottom edge of the image */
    left: 50%; /* Center relative to the image block */
    transform: translateX(-50%); /* Center horizontally */
    width: clamp(150px, 40vw, 250px);
    text-align: center;
}

/* Media query for small screens: Stack vertically and remove staggering */
@media (max-width: 600px) {
    .certification-content {
        /* Stack the elements vertically */
        min-height: auto;
        gap: 80px; /* Increased gap for the text below the image */
    }

    .cert-block.iso,
    .cert-block.fsc {
        /* Center both blocks and reset vertical offset */
        align-self: center;
        margin-top: 0;
        flex-direction: column;
    }

    .cert-block .cert-image {
        /* Allow images to shrink further on mobile */
        width: clamp(150px, 60vw, 200px); 
    }

    .cert-block.iso .cert-text {
        /* Move ISO text below the image for better mobile layout */
        position: static;
        padding: 10px 0;
        text-align: center;
        width: 100%;
    }

    .cert-block.fsc .cert-text {
        /* Move FSC text below the image, reset absolute positioning */
        position: static;
        bottom: auto;
        left: auto;
        transform: none;
        padding: 10px 0;
        width: 100%;
    }
}
/* Footer */
/* 1. Main Container (Rectangle 178) */
.contact-us-container {
    width: 100%;
    background: #263238; /* Dark background color */
    color: white;
    padding: 20px;
}

/* 2. Header (Contact Us Title and Hours) */
.contact-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-title {
    font-size: clamp(24px, 7vw, 30px);
    font-weight: 800;
    margin-bottom: 8px;
}

.operation-hours {
    font-size: clamp(10px, 2vw, 18px);
    font-weight: 800;
}

/* 3. Main Content Layout (Details and Image) */
.contact-main-content {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    gap: 20px;
    align-items: flex-start; /* Align content to the top */
}

/* Contact Details Column */
.contact-details {
    /* MODIFIED: Reduced flexibility to accommodate a larger image. (Flex: 1) */
    flex: 1; 
    min-width: 180px; /* Adjusted min-width slightly */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-item {
    display: flex;
    align-items: flex-start; /* Aligns icons and text properly */
    gap: 10px;
}

.contact-icon {
    /* Styling for Font Awesome icons */
    color: white;
    font-size: 16px;
    width: 25px; /* Fixed width for alignment */
    text-align: center;
    padding-top: 3px; /* Vertical alignment adjustment */
    flex-shrink: 0;
}

.contact-text {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.8;
}

/* Image Column */
.contact-image-wrapper {
    /* MODIFIED: Increased flexibility to take up ~60% of available space (Flex: 1.5) */
    flex: 1.5; 
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 150px;
}

.contact-main-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 4px; /* Slight rounding on image */
}
.copyright{
   width: 100%;
    background: #263238; /* Dark background color */
    color: white;
    text-align: center;
}

/* Media Query for Mobile (stacking layout) */
@media (max-width: 480px) {
    .contact-main-content {
        flex-direction: column-reverse; /* Put image on top of details on mobile */
        gap: 25px;
    }
    
    .contact-details,
    .contact-image-wrapper {
        width: 100%;
        min-width: auto;
        flex: none; /* Reset flex properties */
    }

    .contact-details {
        align-items: center;
        text-align: center;
    }

    .contact-item {
        /* On mobile, center text but keep icon left if possible, or center all */
        align-items: center;
        width: 100%;
    }

    /* Override item alignment for address on small screens if it gets too long */
    .address-text {
        text-align: left; /* Keep address readable */
    }
}
.copyright{
   width: 100%;
    background: #263238; /* Dark background color */
    color: white;
    text-align: center;
    font-size: clamp(5px, 1vw, 10px);
}








}