/* General HTML/Body adjustments - Keep these as they are good base styles */
 body {
    min-height: 100vh;
    /* margin: 0; */
    font-family: 'Segoe UI', sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background-color: white;
}


body h1 { margin-top: 70px; }

/* Font Import (Move from HTML style blocks) */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); /* Added for paragraph font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); /* Added for section-body font */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap'); /* NEW: Added Raleway font */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap'); /* NEW: Added Playfair Display font */


/* Basic Resets (From HTML style blocks) */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif; /* Default font can be set here */
}

/* Define a CSS variable for the new accent color */
:root {
    --accent-green: rgb(98, 200, 55);
    --accent-green-dark: rgb(78, 160, 44); /* Slightly darker for hover states */
    --accent-green-light: rgba(98, 200, 55, 0.1); /* Lighter for backgrounds/shadows */
    --accent-green-subtle-line: rgba(98, 200, 55, 0.5); /* For subtle lines */
    --dark-neutral: #222; /* A dark gray for text and lines */
    --medium-neutral: #777; /* A medium gray for lines */
    --light-neutral: #ccc; /* A light gray for lines/backgrounds */
    --very-light-neutral: #dfdfdf; /* Very light gray */
    --background-light: #f8f8f8; /* For the new div backgrounds */
    --text-dark: #080808;
    --text-dark1: rgba(0,0,0.3);

    /* --- Font Variables for consistency --- */
    --font-primary: 'Roboto', sans-serif; /* General body, default */
    --font-heading: 'Raleway', sans-serif; /* For headings */
    --font-paragraph: 'Open Sans', sans-serif; /* For specific paragraph text */
    --font-display: 'Playfair Display', serif; /* For special display text */
}

/* --- Base Font Application --- */
html, body {
    font-family: var(--font-primary); /* Use primary font as base */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

/* Flash Alert Styling - This is fine */
.alert {
    margin-top: 20px; /* Space below the navbar */
    margin-left: auto;
    margin-right: auto;
    width: 90%; /* Or set a max-width */
    max-width: 600px;
}

/* --- Navbar --- */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.8) !important; /* Initial transparency */
    padding: 0.5rem 1.5rem;
    transition: background-color 0.5s ease; /* Smooth transition for background on scroll */
}

.navbar-brand img {
    height: 50px;
}

.navbar-nav .nav-link {
    letter-spacing: 1px;
    font-family: var(--font-heading); /* Using font variable */
    color: rgb(255, 255, 255, 0.5) !important;
    font-weight: 400;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
    padding: 0.5rem 1rem;
    overflow: hidden;
}

.navbar-nav .nav-item {
    margin-right: 30px;
    margin-left: 15px;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: var(--accent-green); /* Changed from #00ff88 */
    transition: width 0.3s ease-out, left 0.3s ease-out;
}

.navbar-nav .nav-link:hover::after {
    width: 100%;
    left: 0;
}

.navbar-nav .nav-link:hover {
    color: white!important;
}

/* --- Video Carousel Section --- */
.video-carousel-section {
    height: 100vh;
    z-index: 0;
    position: relative;
}

.carousel-item video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

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

/* --- Animated Cards Section (About Section) --- */
.animated-cards-section {
    background-color: rgba(0, 0, 0, 0); /* Transparent background */
    color: #333;
    padding: 80px 0; /* Consistent padding for the section */
    margin: 10px; /* This margin might be problematic on small screens if not intended */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-wrapper {
    position: relative;
    width: 90%;
    max-width: 1200px;
    height: 600px; /* Fixed height can be problematic for responsive content */
}

.text-card,
.image-card {
    /* Base styles, no animations applied by default */
    animation: none;
    position: absolute; /* Default to absolute for desktop */
    opacity: 0; /* Hidden by default for animation, will be set to 1 on animate */
}

.text-card {
    top: 50%;
    left: -70%;
    width: 60%;
    transform: translateY(-50%);
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 30px;
    padding-right: 150px;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.text-card.animate {
    animation: slideInText 0.7s ease-out forwards;
    opacity: 1; /* Ensure it becomes visible when animated */
}

.text-card h3 {
    margin-bottom: 15px;
}

.initial-text {
    margin-bottom: 15px;
}

.toggle-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease;
}

.toggle-container.show {
    max-height: 300px; /* Adjust based on content */
}

.read-btn {
    margin-top: auto;
    align-self: flex-start;
}

.image-card {
    top: calc(50% + 150px); /* Start at 50% for consistency in animation logic */
    left: 70%;
    width: 35%;
    height: 300px;
    transform: translate(-50%, -50%);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    overflow: hidden;
    /* opacity: 0; - Handled by base .image-card */
    z-index: 3;
}

.image-card.animate {
    animation: bounceInImage 1.4s ease-out forwards;
    animation-delay: 0.75s;
    animation-fill-mode: forwards;
    opacity: 1; /* Ensure it becomes visible when animated */
}

.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Animations (from HTML style block) */
@keyframes slideInText {
    to {
        left: 5%;
    }
}

@keyframes bounceInImage {
    0%   { top: -400px; opacity: 0; }
    20%  { top: 80%; opacity: 1; }
    30%  { top: 80%; }
    40%  { top: 30%; }
    50%  { top: 80%; }
    60%  { top: 50%; } /* Settle point */
    70%  { top: 80%; }
    80%  { top: 60%; }
    85%  { top: 80%; }
    90%  { top: 75%; }
    100% { top: 80%; opacity: 1; } /* Final position should be consistent */
}

/* Responsive for Animated Cards */
@media (max-width: 600px) {
    .animated-cards-section {
        padding: 50px 15px; /* Add horizontal padding for small screens */
        margin: 0; /* Remove margin on small screens */
        min-height: auto; /* Allow height to adjust to content */
    }

        .image-card {
            display: none;
                 }
    .text-card{
        position: relative;  /* Crucial for stacking on mobile */
        top: auto;
        left: auto;
        transform: none;   /* Remove transformations */
        width: 100% !important;
        margin: 15px auto; /* Add vertical margin between cards */
        animation: none;  /* Disable animations on small screens if they hinder usability */
        padding-right: 30px;  /* Reset padding for smaller screens */
        opacity: 1;  /* Ensure they are visible on mobile */ 
    }

    .image-card {
        height: 250px;
        /* opacity: 1; - Handled by base .text-card, .image-card in media query */
        order: -1; /* Place image above text on small screens */
    }

    .card-wrapper {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 50px;
        width: 100%; /* Take full width on small screens */
    }

    .read-btn {
        margin-top: 15px;
    }

    .fade-pop-wrapper {
        display: none !important; /* Hide fade-pop-img on small screens */
    }
}

/* Fade Pop Image */
.fade-pop-wrapper {
    position: absolute;
    top: 120px;
    right: 17%;
    z-index: 10;
}

.fade-pop-img {
    opacity: 0;
    transform: scale(0.8);
    animation: none;
    will-change: opacity, transform;
    width: 150px;
    height: 150px;
    border-radius: 25%;
    box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px; /* Applied inline style from HTML */
    border-radius: 0px; /* Applied inline style from HTML, consider if this is desired with the 25% above */
}

.fade-pop-img.show {
    animation: bounceFadeIn 1s ease-out forwards;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

@keyframes bounceFadeIn {
    0% { opacity: 0; transform: scale(0.8); }
    60% { opacity: 1; transform: scale(1.05); }
    80% { transform: scale(0.97); }
    100% { opacity: 1; transform: scale(1); }
}

/* --- Services Section --- */
.container { /* Resetting container margin from one of your HTML style blocks */
    margin-top: 0; /* Bootstrap containers handle this, or add section padding */
    padding-top: 50px; /* Add general padding for sections */
}

.section-title { /* Renamed to .service-section-title for clarity */
    margin-bottom: 38px;
}

.shadow, .subscription-wrapper {
    box-shadow: 0px 15px 39px 0px rgba(8, 18, 109, 0.1) !important; /* Keep original shadow for non-color elements */
}

.icon-primary { color: var(--accent-green); } /* Changed from #062caf */
.icon-bg-circle { position: relative; }
.icon-lg { font-size: 50px; }

.icon-bg-circle::before { z-index: 1; position: relative; }
.icon-bg-primary::after { background: var(--accent-green) !important; } /* Changed from #062caf */

.icon-bg-circle::after {
    content: '';
    position: absolute;
    width: 68px;
    height: 68px;
    top: -35px;
    left: 15px;
    border-radius: 50%;
    background: inherit;
    opacity: .1;
}

p, .paragraph {
    font-weight: 400;
    color: #8b8e93;
    font-size: 15px;
    line-height: 1.6;
    font-family: var(--font-paragraph); /* Using font variable */
}

.icon-bg-yellow::after { background: #f6a622 !important; }
.icon-bg-purple::after { background: #7952f5; }
.icon-yellow { color: #f6a622; }
.icon-purple { color: #7952f5; }
.icon-cyan { color: var(--accent-green); } /* Changed from #02d0a1 */
.icon-bg-cyan::after { background: var(--accent-green); } /* Changed from #02d0a1 */
.icon-bg-red::after { background: #ff4949; }
.icon-red { color: #ff4949; }
.icon-bg-green::after { background: var(--accent-green); } /* Changed from #66cc33 */
.icon-green { color: var(--accent-green); } /* Changed from #66cc33 */
.icon-bg-orange::after { background: #ff7c17; }
.icon-orange { color: #ff7c17; }
.icon-bg-blue::after { background: var(--accent-green); } /* Changed from #3682ff */
.icon-blue { color: var(--accent-green); } /* Changed from #3682ff */

/* Service Card Image */
.services-section .card img.person-img { /* More specific selector */
    width: 100px; /* Adjust size of service icons/images */
    height: 100px;
    object-fit: cover; /* Changed from contain for better circular fill */
    border-radius: 50%; /* Make them circular */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Add a subtle shadow */
}

/* --- Pioneers Section --- */
.icon-block svg {
    width: 100%;
    height: 100%;
}

.team-cards-inner-container {
    display: flex;
    flex-wrap: wrap; /* Ensure wrapping for responsive grid */
    row-gap: 1.3rem;
    column-gap: 1.3rem;
    justify-content: center; /* Center cards within the container */
}

.text-blk {
    margin: 0;
    padding: 0;
    line-height: 25px;
}

.responsive-cell-block {
    min-height: 75px;
}

.responsive-container-block {
    min-height: 75px;
    height: fit-content;
    width: 100%;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto; /* Center the container */
    justify-content: flex-start;
}

.inner-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Default to column for mobile/smaller screens */
    align-items: center; /* Center items when in column layout */
    justify-content: center; /* Center content vertically when in column layout */
}

/* Media query to make inner-container a row for larger screens */
@media (min-width: 768px) {
    .inner-container {
        flex-direction: row; /* Change to row for tablet and desktop */
        align-items: center; /* Vertically align items in the row */
        justify-content: space-between; /* Or space-around, flex-start, etc., depending on desired spacing */
        min-height: auto; /* Reset min-height if it's too aggressive, let content dictate height */
    }
}

/* Pioneers Section - Mobile First Defaults */
.section-head {
    font-family: var(--font-heading); /* Using font variable */
    color: rgb(53, 51, 51);
    font-weight: bold;
    font-size: 36px; /* Default for smallest screens */
    line-height: 40px;
    margin-bottom: 20px; /* Consistent margin */
    text-align: center; /* Default center for mobile */
}

.section-body {
    font-family: var(--font-paragraph); /* Using font variable */
    color: rgb(44, 42, 42);
    font-size: 14px; /* Default for smallest screens */
    line-height: 1.6;
    margin-bottom: 30px; /* Consistent margin, adjusted from 64px */
    text-align: center; /* Default center for mobile */
}

.team-cards-outer-container {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the outer container */
    flex-grow: 1; /* Allow it to grow in flex parent */
}

.content-container {
    display: flex;
    justify-content: flex-start; /* Default for mobile/column */
    flex-direction: column; /* Stack text content vertically */
    align-items: center; /* Center content on small screens */
    padding: 0 25px 0 0; /* Default padding for larger screens when stacked or starting */
    text-align: center; /* Center text for responsive layout on small screens */
}

/* Adjust content-container and fonts for larger screens */
@media (min-width: 768px) {
    .content-container {
        text-align: left; /* Align text left on larger screens */
        align-items: flex-start; /* Align text within its column to the start */
        padding-right: 25px; /* Keep desired padding for desktop */
        max-width: 400px; /* Limit the maximum width of this content block */
        width: 100%; /* Ensure it takes full available width up to max-width */
    }

    .section-head {
        font-size: 48px; /* Smaller font size for desktop heading */
        line-height: 55px; /* Adjust line height accordingly */
        margin-bottom: 20px; /* Slightly less space below heading */
    }

    .section-body {
        font-size: 16px; /* Smaller font size for desktop body text */
        line-height: 1.5; /* Slightly tighter line spacing for readability */
        margin-bottom: 30px; /* Adjust space before the next element (if any) */
    }
}

/* Large devices (desktops, >= 1024px) */
@media (min-width: 1024px) {
     .section-head {
        font-size: 60px; /* If you want a larger size for very large screens */
        line-height: 70px;
     }
}

.img-box {
    max-width: 130px;
    max-height: 130px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin-right: 25px; /* Adjust for responsiveness */
}

/* Card for Pioneers */
.card { /* This .card applies to both pioneers and services */
    background-color: rgb(255, 255, 255);
    display: flex;
    padding: 16px;
    box-shadow: rgba(95, 95, 95, 0.1) 6px 12px 24px !important;
    flex-direction: row;
    border-radius: 15px; /* Combined border-radius properties */
    opacity: 1; /* For animation */
    transform: translateY(40px); /* For animation */
    transition: all 0.6s ease-out; /* For animation */
}

.card.animate {
    opacity: 1;
    transform: translateY(0);
}

.card-container {
    max-width: 400px;
    max-height: 200px;
    flex-basis: auto; /* Allow flexible width */
}

.card-content-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.person-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
}

.person-info {
    font-size: 11px;
    line-height: 15px;
}

.outer-container {
    justify-content: center;
    padding: 0 50px;
    margin: 10px auto; /* Center the section itself */
    background-color: rgba(0, 0, 0, 0);
}

.person-img {
    width: 100%;
    height: 100%;
    border-radius: 6px; /* Combined border-radius properties */
    object-fit: cover; /* Ensure images fill the box */
}


@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0px); }
    40% { transform: translateY(-30px); }
    60% { transform: translateY(-15px); }
}

/* Responsive for Pioneers Section - Continue refining as needed */
@media (max-width: 1024px) {
    .team-card-container { /* This class seems unused or a typo, assuming it was meant for .team-cards-inner-container */
        justify-content: center;
    }
    /* section-head adjustments for this breakpoint are now handled by min-width media queries above */
    .img-box {
        max-width: 109px;
        max-height: 109px;
    }
}

@media (max-width: 768px) {
    .inner-container {
        margin: 60px 0; /* Keep this if you want more vertical margin on small screens */
    }
    /* section-body margin-bottom is handled by mobile-first and min-width */
    .img-box {
        margin-right: 30px;
    }
    .content-box {
        text-align: center;
        background-color: white;
        margin: 10px;
    }
    .content-container {
        max-width: 100%; /* Reset max-width for smaller screens if it was limited */
        padding: 0; /* Reset padding for smaller screens */
        margin-bottom: 30px; /* Add space below content on small screens */
    }
    /* section-head and section-body font sizes are handled by mobile-first and min-width */
}

@media (max-width: 500px) {
    .outer-container {
        padding: 0 20px; /* Reduce padding for mobile */
    }
    .section-head {
        font-size: 36px; /* A bit smaller for very small screens, overridden by mobile-first */
        line-height: 40px;
    }
    .content-box {
        padding: 0;
    }
    .section-body {
        font-size: 14px; /* A bit smaller for very small screens, overridden by mobile-first */
    }
    .img-box {
        max-width: 68px;
        max-height: 68px;
    }
    .person-name {
        font-size: 14px;
        margin-bottom: 1px;
    }
    .content-box {
        margin-bottom: 46px;
        text-align: left; /* Keep it left-aligned if desired */
    }
    .content-container {
        margin: 0;
    }
    .card-container {
        max-width: 100%; /* Single card per row on very small screens */
    }
}


/* --- Project Cards Section (WITH RESPONSIVE & CONSISTENT HEIGHT FIXES) --- */
.carz {
    width: 100%; /* Ensures card takes full width of its column */
    max-width: 320px; /* Limits max width for larger screens (adjust as needed) */
    margin-left: auto; /* Centers the card within its column if max-width is hit */
    margin-right: auto; /* Centers the card within its column if max-width is hit */

    /* Make the card itself a flex container */
    display: flex;
    flex-direction: column; /* Stacks content vertically */
    
    /* Set a minimum height for all cards. 
        This is the key for "consistent height" in a row.
        The actual height will be determined by the tallest card in the row
        due to Bootstrap's row/column flex behavior. */
    min-height: 520px; /* Use your desired consistent height as a minimum */
    
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background: #fff;
    transition: all 0.5s ease;
    cursor: pointer;
    user-select: none;
    z-index: 10;
    overflow: hidden; /* Important to contain any overflow from images or content */
    /* Removed: margin-right: 0 !important; - Let Bootstrap's column spacing handle margins between cards */
}

.carz .backgroundEffect {
    bottom: 0;
    height: 0px;
    width: 100%;
}

.carz:hover {
    color: #fff;
    transform: scale(1.025);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 5px 10px;
}

.carz:hover .backgroundEffect {
    bottom: 0;
    height: 320px;
    width: 100%;
    position: absolute;
    z-index: -1;
    background: var(--accent-green); /* Changed from #1b9ce3 */
    animation: popBackground 0.3s ease-in;
}

@keyframes popBackground {
    0% { height: 20px; border-top-left-radius: 50%; border-top-right-radius: 50%; }
    50% { height: 80px; border-top-left-radius: 75%; border-top-right-radius: 75%; }
    75% { height: 160px; border-top-left-radius: 85%; border-top-right-radius: 85%; }
    100% { height: 320px; border-top-left-radius: 100%; border-top-right-radius: 100%; }
}

.carz .pic { position: relative; }
.carz .pic img { width: 100%; height: 280px; object-fit: cover; }

.carz .date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 70px;
    background-color: var(--accent-green); /* Changed from #1b9ce3 */
    color: white;
    position: absolute;
    bottom: 0px;
    transition: all ease;
}

.carz .date .day { font-size: 14px; font-weight: 600; }
.carz .date .month, .carz .date .year { font-size: 10px; }

.carz .text-muted { font-size: 12px; }
.carz:hover .text-muted { color: #fff !important; }

.carz .content {
    padding: 15px 20px; /* Provides space around the text content */
    word-wrap: break-word; /* Ensures long words break to the next line */
    overflow-wrap: break-word; /* Modern equivalent for word-wrap */

    /* Make the content area fill available vertical space */
    flex-grow: 1; 
    /* Make the content div itself a flex container to manage its children */
    display: flex;
    flex-direction: column;
}

.carz .content h4.card-title { /* Targeting h4 specifically */
    margin-bottom: 0.5rem; /* Add some space below the title */
}

.carz .content p.card-text { /* Target the specific paragraph tag for project content */
    flex-grow: 1; /* Allow the paragraph to grow and take up remaining space before the buttons */
    margin-bottom: 1rem; /* Add some space below the paragraph */
}

.carz .content .btn {
    display: flex;
    align-items: start; /* Changed from left to center for consistency */
    justify-content: start;
    padding: 5px 10px;
    background-color: var(--accent-green); /* Changed from #1b9ce3 */
    border-radius: 25px;
    /* font-size: 12px; */
    border: none;
}

.carz:hover .content .btn {
    background: #fff;
    color: var(--accent-green); /* Changed from #1b9ce3 */
    box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 5px; /* Adjust shadow for clarity */
}

.carz .content .btn .fas { font-size: 10px; padding-left: 5px; }

.carz .content .foot .admin { color: var(--accent-green); font-size: 12px; } /* Changed from #1b9ce3 */
.carz:hover .content .foot .admin { color: #fff; }
.carz .content .foot .icon { font-size: 12px; }

/* This targets the div containing the "Read More" button and ensures it's at the bottom */
.carz .content > .d-flex.align-items-center.justify-content-between.mt-3.pb-3 {
    margin-top: auto !important; /* Pushes this element to the very bottom */
}

/* If you have admin buttons, apply similar logic if they aren't positioned absolutely */
.carz .content > .d-flex.justify-content-between.mt-3 {
    margin-top: auto !important; 
}


/* --- Merchandise Section --- */
.merchandise-section {
    padding: 1.5rem 0; /* Add some top/bottom padding for section */
    /* background-color: #f8f9fa; Light background for the section */
}

/* .merchandise-section h2 { */
    /* color: var(--accent-green); Changed from #28a745 */
    /* margin-bottom: 2.5rem; */
    /* font-size: 2.5rem; */
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); */
/* } */

.merchandise-section a {
    text-decoration: none; /* Keep this for links wrapping products/buttons */
}

/* Product Card Styling */
.product {
    background-color: #fff;
    border-radius: 10px; /* Slightly larger radius for a modern feel */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* More prominent shadow */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Important for consistent row height */
    text-align: left; /* Center content within card */
    margin: 0; /* Reset margin if inherited from previous rules */
}

.product:hover {
    transform: translateY(-5px); /* Lift on hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
}

/* Product Image */
.product-image { /* Changed from .merchandise-section img to be more specific */
    width: 100%; /* Occupy full width of the card */
    height: 200px; /* Fixed height for consistency */
    object-fit: cover; /* Crop to cover the area without distorting aspect ratio */
    border-radius: 5px 5px 0 0; /* Apply radius only to top corners */
    border-bottom: 1px solid #eee; /* Subtle separator */
}

/* Product Description */
.product-description {
    word-break: break-word;
    overflow-wrap: break-word;
    padding: 1rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows this section to take up available vertical space */
}

.product-description .info {
    padding: 0; /* Remove padding here, already handled by .product-description */
    color: #444;
    font-size: 0.9em; /* Slightly larger text */
    width: 100%;
    margin-bottom: 10px; /* Space below info block */
    text-align: left;
}

.product-description .info h1 {
    font-size: 1.4rem; /* Adjusted to rem for better scalability */
    margin-bottom: 0.5rem;
    font-weight: 700; /* Bootstrap's fw-bold is 700 */
    line-height: 1.3;
    color: #343a40; /* Darker for better contrast */
}

.product-description .info p {
    font-size: 0.9rem; /* Description text size */
    color: #6c757d;
    margin-bottom: 0; /* Remove default paragraph margin */
    text-align: left;
}

/* Star Rating */
.star-rating {
    color: #ffc107; /* Gold color for stars */
    font-size: 1rem; /* Standard size */
    margin-bottom: 0.75rem; /* Space below stars */
}

/* Price */
.price {
    width: 100%;
    color: var(--accent-green); /* Changed from #28a745 */
    font-size: 1.7em; /* More prominent price */
    font-weight: bold;
    text-align: center;
    margin-top: auto; /* Push to the bottom */
    margin-bottom: 1rem;
}

/* Buy Button */
.buy {
    background-color: rgb(98, 200, 55) !important; /* Changed from #007bff */
    color: white;
    padding: 0.8rem 1rem;
    border: none;
    border-radius: 0 0 10px 10px; /* Rounded corners only at the bottom */
    cursor: pointer;
    font-size: 1.1rem; /* Larger and more clickable */
    width: 100%;
    margin-top: 5px; /* Space above button */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Slightly more gap between icon and text */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.buy:hover {
    background-color: var(--accent-green-dark); /* Darker green on hover */
    transform: translateY(-2px); /* Slight lift on hover */
}

.buy i {
    font-size: 1.1rem; /* Match button text size */
}

/* RESPONSIVENESS for Merchandise */
@media (min-width: 1200px) { /* Extra large devices (desktops) */
    .product-image { height: 220px; }
    .product-description .info h1 { font-size: 1.6rem; }
    .price { font-size: 2em; }
    .buy { font-size: 1.2rem; }
}

@media (max-width: 1199.98px) { /* Large devices (desktops, 992px to 1199.98px) */
    .product-image { height: 180px; }
    .product-description .info h1 { font-size: 1.4rem; }
    .price { font-size: 1.6em; }
    .buy { font-size: 1rem; }
}

.pt-5 {
    padding-top: 1rem !important;
}

@media (max-width: 991.98px) { /* Medium devices (tablets, 768px to 991.98px) */
    .product-image { height: 160px; }
    .product-description .info h1 { font-size: 1.3rem; }
    .price { font-size: 1.5em; }
    .buy { padding: 0.7rem 0.8rem; font-size: 0.95rem; }



    .tex{ font-size: 10px !important;
            text-align: center !important;
        }

    .tex1{ font-size: 15px !important;}

    .two h1 span{
        font-size: 15px !important;
    }


     .two{
        margin-bottom: 50px !important;
    }

    .two h1 span{
        font-size: 9px !important;
        line-height:2em !important;
        letter-spacing:2px !important ;
    }

    .star-rating .fa {
        font-size: 9px !important;
    }

    .price {
        font-size: 1.2rem !important;
        margin-top: 10px !important;
        margin-bottom: 0px !important;
    }


    .product-description .info p {
       line-height: 1.3 !important;
       font-size: 13px !important;
       
    }


    .product-description .info {
        margin-bottom: -10px !important;}


    p, .paragraph {
        font-size: 12px !important;
    }



    .container {
    padding-top: 10px !important;
    }


    .my-5 {
        margin-top: 0rem !important;
        margin-bottom: 0rem !important;
           }

    .col-5 {
        max-height: 100px !important;
        width: 100% !important;
    }



    .py-5 {
    padding-top: 0rem !important;
    padding-bottom: 3rem !important;
    }


    /*.card-body {*/
    /*    overflow: hidden !important;*/
    /*    height: 150px !important;*/
    /*    }*/


    .two h1 {
    font-size: 16px !important;
    }

}

@media (max-width: 767.98px) { /* Small devices (landscape phones, 576px to 767.98px) */
    .merchandise-section h2 { font-size: 2rem; }
    .product-image { height: 180px; } /* Slightly larger for single column or two columns */
    .product-description .info h1 { font-size: 1.5rem; }
    .product-description .info p { font-size: 0.9rem; }
    .price { font-size: 1.7em; }
    .buy { font-size: 1.05rem; }
}

@media (max-width: 575.98px) { /* Extra small devices (portrait phones, less than 576px) */

input::placeholder, div, p, span {font-size: 11px !important;}
h6,h5, a{font-size: 10px !important;}
h4{font-size: 12px !important;}
h3{font-size: 13px !important;}
h2{font-size: 14px !important;}
h1{font-size: 15px !important;}



    .merchandise-section { padding: 2rem 0; }
    .merchandise-section h2 { font-size: 1.8rem; margin-bottom: 2rem; }
    .product-image { height: 150px; }
    .product-description .info h1 { font-size: 1.3rem; }
    .product-description .info p { font-size: 0.85rem; }
    .price { font-size: 1.5em; }
    .buy { font-size: 0.95rem; padding: 0.6rem 0.8rem; }
}

/* --- Blog Section --- */
/* Your Blog card styles here, ensure they are compatible with Bootstrap's .card */
.blog-card-img {
    height: 200px;
    object-fit: cover;
}

/* --- Events Section --- */
/* Specific styling for the H2 heading in events */
h2.text-center.mb-4.fw-bold.text-success {
    font-size: 2.5rem;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    color: var(--accent-green); /* Changed from #28a745 */
    margin-top: 3rem; /* Add top margin so it doesn't stick to the navbar */
}

/* Accordion Container Styling */
.accordion {
    --bs-accordion-border-color: rgba(0, 0, 0, 0.125);
    --bs-accordion-border-radius: 0.5rem;
    --bs-accordion-inner-border-radius: 0.45rem;
    --bs-accordion-active-bg: var(--accent-green-light); /* Light green for active header background */
    --bs-accordion-active-color: #000; /* Darker text for active header */
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(98, 200, 55, 0.25); /* Green focus ring */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-item {
    border: 1px solid var(--bs-accordion-border-color);
    margin-bottom: 1rem; /* Space between accordion items */
    border-radius: var(--bs-accordion-border-radius);
    overflow: hidden; /* Ensures rounded corners are visible */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
    transition: all 0.3s ease;
}

.accordion-item:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.accordion-header {
    background-color: #f8f9fa; /* Light background for headers */
    border-radius: var(--bs-accordion-border-radius);
    font-size: 13px;
    font-weight: 300;
}

.accordion-button {
    background-color: transparent; /* Override default button background */
    color: #343a40; /* Darker text for event titles */
    font-size: 1.25rem;
    font-weight: 600;
    padding: 1.2rem 1.5rem;
    transition: background-color 0.3s ease;
}

.accordion-button:not(.collapsed) {
    color: var(--bs-accordion-active-color);
    background-color: var(--bs-accordion-active-bg);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}

.accordion-button::after {
    background-size: 1.25rem;
    margin-left: 1rem;
}

.accordion-body {
    padding: 1.5rem;
    font-size: 1rem;
    color: #495057; /* Slightly darker text for content */
    line-height: 1.6;
    background-color: #fff; /* White background for body content */
    border-top: 1px solid var(--bs-accordion-border-color);
}

.accordion-body p {
    margin-bottom: 1rem;
}

/* Admin Controls Styling (Applies to all sections) */
.d-flex.justify-content-between.mt-3 {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem !important;
    padding-top: 1rem;
    border-top: 1px dashed #eee;
}

.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 0.3rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-warning:hover {
    background-color: #e0a800;
    border-color: #e0a800;
    transform: translateY(-1px);
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 0.3rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-primary{background-color: rgb(98, 200, 55) !important;
                border-color:rgb(98, 200, 55) !important ;}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
    transform: translateY(-1px);
}

/* Responsive Adjustments for Events Section */
@media (max-width: 991.98px) {
    h2.text-center.mb-4.fw-bold.text-success {
        font-size: 2.2rem;
    }
    .accordion-button {
        font-size: 1.15rem;
        padding: 1rem 1.2rem;
    }
    .accordion-body {
        padding: 1.2rem;
        font-size: 0.95rem;
    }
    .accordion-item {
        margin-bottom: 0.8rem;
    }
}


.two h1 {
    position: relative; /* Essential for :before positioning */
    padding: 0;
    margin: 0;
    font-family: "Raleway", sans-serif; /* Applied explicitly */
    font-weight: 300; /* Applied explicitly */
    font-size: 40px; /* Applied explicitly */
   color:rgb(98, 200, 55); /* Applied explicitly */
    text-transform: capitalize;
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.two h1:before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 2px;
    content: "";
    background-color: var(--accent-green);
}
.two h1 span {
    display: block; /* Explicitly set */       
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 4px;
    line-height: 3em;
    padding-left: 0.25em;
    color: rgba(0, 0, 0, 0.4);
    padding-bottom: 10px;
}
.two h1 em {
    font-style: normal;
    font-weight: 600;
}




.tex{color:rgba(98, 200, 55);
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  font-size: 18px;
    font-weight: 500;
  letter-spacing: 7px;
    line-height: 3em;}

.tex1{
    margin-top: 5px;
  font-family: "Raleway", sans-serif !important;
  color:rgb(98, 200, 55)!important;
  text-align: left;
  text-transform: capitalize !important;
  
}

.tex2{
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 500;
  /* letter-spacing: .5px; */
    line-height: 3em;
  color: rgba(0, 0, 0, 0.7);}


 .main{padding:1rem;  color: #28a745;}
 .main > .video-carousel-section {margin: -15px -16px;}
 
 
 @media (max-width: 768px) {
    /* More specific rules */
    .table thead {
        display: none;
    }

    .table, .table tbody, .table tr, .table td {
        display: block;
        width: 100%;
        font-size: 10px !important;
    }


    /* Actions column specificity */
    .table td.text-center {
        text-align: center;
    }

    .table td.text-center::before {
        display: none;
    }
    
    .phn{font-size: 10px !important;}
    
    button{font-size: 10px !important;}
}

/* In your CSS file or a <style> block */
#moreText {
    display: none; /* Hide the text by default */
}

#moreText.show {
    display: inline !important; /* Force the text to display when the 'show' class is present */
}

.grey-icon {
    color: grey; /* You can use a hex code like #808080 for a specific shade */
}