/* --- THE CARD SECTION CONTAINER --- */
.card-section {
    width: 94%;              /* CHANGED from 85%: Spreads the row wider toward the screen edges */
    max-width: 1400px;       /* Increased maximum width to allow for larger images */
    margin: 60px auto;
    
    /* CHANGED TO GRID: Grid is much superior to flexbox for locking 3 exact columns */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns that automatically stretch */
    gap: 30px;               /* Keeps a clean 30px gap between the columns */
    
    box-sizing: border-box;
}

/* --- THE SKY-BLUE OUTLINE CARD --- */
.sky-outline-card {
    background: #ffffff;
    width: 100%;             /* CHANGED: Forces the card to scale to 100% of its grid track */
    max-width: 100%;         /* CHANGED: Removes the 380px restriction so it can stretch more */
    
    padding: 25px;           /* Slightly increased internal padding for a premium feel */
    border-radius: 20px;
    border-top: 4px solid #87CEEB;
    border-right: 4px solid #87CEEB;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.1);
    box-sizing: border-box; 
    text-align: center;
}
/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 992px) {  /* Adjusted breakpoint slightly to account for wider cards */
    .card-section {
        grid-template-columns: 1fr; /* Drops down to a vertical list on smaller tablets and mobile */
        width: 90%;
        gap: 25px;
    }
       .sky-outline-card {
        width: 100%; /* Card takes full width of the 95% container */
        max-width: 100%;
    }
}


/* Hover effect to make it feel premium */
.sky-outline-card:hover {
    transform: translateY(-5px);
    box-shadow: 20px 20px 40px rgba(135, 206, 235, 0.2); /* Shadow turns slightly blue on hover */
}

/* --- IMAGE STYLING --- */
.card-image {
    width: 100%;
    height: 250px;           /* CHANGED from 200px: Making it taller since the cards are now wider */
    object-fit: cover;       /* CHANGED from contain: 'cover' ensures the image stretches completely to fill the box without empty borders */
    border-radius: 12px;
    margin-bottom: 15px;
    display: block;
}
/* --- TEXT STYLING --- */
.card-title {
    color: #660000; /* Your Wine Red for the title */
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 8px;
}

.card-desc {
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}
/* The Text Container Control */
.brand-story-box {
    width: 90% !important;                /* Uses 85% of the browser width as requested */
    margin: 20px auto;
    padding: 10px;              /* Internal spacing so text doesn't touch the box edges */
    background-color: #ffffff;  /* White background makes it pop against lightgreen */
    border-radius: 10px;        /* Soft rounded corners for a modern feel */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    
    /* Text Styling */
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    text-align: center;         /* Centers the text inside the box */
}

.highlight-text {
    display: block;
    margin-top: 20px;
    font-weight: 700;
    color: #1b5e20;             /* Deep green for a tea-brand feel */
    font-size: 22px;
}




.icon-nav {
  display: flex;
flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
padding: 10px;
  width: 100%;
  box-sizing: border-box;
background-color: #c1fabb;
}

.icon-card {
  width: 200px;
  height: 200px; /* Thoda height badha diya text ke liye */
  background-color: #ffffff !important;
  border-radius: 25px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center;
  align-items: center;
  padding: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  flex-shrink: 0;
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

/* --- IMAGE FIX START --- */
.img-box {
  width: 190px;               /* Sabhi icons ki width fix */
  height: 190px;              /* Sabhi icons ki height fix */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  overflow: hidden;          /* Extra image part ko cut kar dega */
}

.img-box img {
  width: 100%;               /* Force image to 70px width */
  height: 100%;              /* Force image to 70px height */
  object-fit: contain;       /* Image stretch nahi hogi, box ke andar set rahegi */
}
/* --- IMAGE FIX END --- */

.icon-label {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
  text-align: center;
  display: block;
}

@media (max-width: 850px) {
  .icon-nav {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .icon-card {
    width: 220px;
    height: auto;
    min-height: 160px;
  }
}

body { 
        margin: 0px;
        padding: 0px !important; 
        overflow-x: hidden !important; 
        background-color: lightgreen; 
        font-family: 'Inter', sans-serif;
    }

    /* 2. The Frame Station - Controls the 50% height */
.video-container {
    position: relative;
    width: 100%;
    height: 400px; /* Reduced from 50vh to make it 'shorter' and less stretched */
    overflow: hidden;
 margin: 0;
        padding: 0;
    background-color: #000;
        background-color: #000;
        line-height: 0;

}
    
    /* 3. The Video Station - Controls the Stretching */
    .hero-video {
        width: 100% !important;
        height: 100% !important;
        display: block;
        object-fit: fill;      /* This stretches the video to fill the 50vh exactly */
        pointer-events: none;  /* Makes video 'untouchable' */
    }

    /* 4. The Shield Station - Prevents Right-Click */
    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        background: transparent;
    }