* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy/Gilroy-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy/Gilroy-Bold.ttf') format('truetype');
    font-weight: 700;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy/Gilroy-Light.ttf') format('truetype');
    font-weight: 300;
}

.sub-heading{
    font-family: 'Gilroy', sans-serif;
}
.container {
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    margin: 0 auto;
}

@media (max-width: 1700px) {
    .container {
        max-width: 100%;
    }
}

/* Body styles */
body {
     font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    overflow-x: hidden;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}

h1,h2{
     font-family: 'Sansita Swashed', cursive;
    font-weight: 700;
}

h3,
h4,
h5,
h6 {
    font-family: 'Gilroy', sans-serif;
    font-weight: 600;
}

html, body {
    overflow-x: hidden;
    scroll-behavior: smooth;
}


.feature-card, .product-card, .menu-card, .stat-card, .cta-box {
    visibility: visible;
}

.slide {
    transition: opacity 0.8s ease-in-out !important;
}
label {
    display: inline-block;
    font-weight: normal;
    margin-bottom: 5px;
    max-width: 100%;
}

a,
.btn,
button {
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    outline: medium none;
    font-weight: 600;
}

a img,
iframe {
    border: none;
}

p {
    color: #031D44;
    line-height: 28px;
    margin: 0 0 15px;
    text-transform: none;
    font-weight: 400;
}

hr {
    margin-top: 0;
    margin-bottom: 0;
    border: 0;
    border-top: 1px solid #eee;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: inherit;
}

ul {
    margin: 0;
    list-style-type: none;
}

a,
a:hover {
    outline: none;
    text-decoration: none;
    color: #232323;
}

a:hover {
    color: #232323;
}

.pdd-sec {
    padding: 80px 0;
}

.bg-back {
    background-color: #f2f3f7;
}

/* Main content */
main {
    padding: 0 !important;
}

/* Footer */
footer {
    width: 100%;
}

.custom-fluid {
    padding-left: 50px;
    padding-right: 50px;
}


/* --- Header Styles --- */
.main-header {
    width: 100%;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: relative;
    top: 0;
    z-index: 1000;
}

/* যখন স্ক্রল করা হবে তখন এই স্টাইলটি কাজ করবে */
header.sticky {
    background: #ffffff; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    position: fixed;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo img {
    max-height: 80px;
    display: block;
}

/* Navigation Links & Hovers */
.nav-menu ul {
    display: flex;
    list-style: none;
    gap: 20px;
}

.nav-menu ul li a {
    text-decoration: none;
    color: #444;
    font-size: 15px;
    font-weight: 500;
    position: relative;
    padding: 4px 0;
    transition: color 0.3s ease;
}



/* Hover Red Underline */
.nav-menu ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #ed1c24;
    transition: width 0.3s ease;
}

.nav-menu ul li a:hover::after,
.nav-menu ul li a.active::after {
    width: 100%;
}

.nav-menu ul li a:hover {
    color: #ed1c24;
}
.nav-menu ul {
    display: flex;
    list-style: none;
    gap: 30px;
    padding: 0;
    margin: 0;
}

.nav-menu ul li a {
    text-decoration: none;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #111111; 
    display: inline-block;
    overflow: hidden; 
}


.word {
    display: inline-flex;
    position: relative;
}

/* প্রতিটি অক্ষরের স্টাইল ও ট্রানজিশন ইফেক্ট */
.word span {
    display: inline-block;
    position: relative;
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    transition-delay: calc(var(--i) * 0.02s); 
}

/* হোভার করলে যে কালারটি নিচ থেকে স্ক্রল হয়ে উঠবে */
.word span::before {
    content: attr(data-letter);
    position: absolute;
    top: 100%; 
    left: 0;
    color: #ed1c24; 
}

/* ---- HOVER ANIMATION ---- */

.nav-menu ul li a:hover .word span {
    transform: translateY(-100%);
}
/* Search Box */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box input {
    background-color: #f1f1f1;
    border: none;
    padding: 10px 15px 10px 40px;
    border-radius: 25px;
    font-size: 14px;
    outline: none;
    width: 220px;
    transition: width 0.4s ease, background-color 0.3s;
}

.search-box input:focus {
    width: 260px;
    background-color: #e8e8e8;
}

.search-icon {
    position: absolute;
    left: 15px;
    color: #777;
    font-size: 14px;
}

/* Mobile Menu Toggle button */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
}

/* --- Banner / Hero Slider Styles --- */
/* Swiper এর জন্য বেসিক সেটআপ */
.hero-slider {
    position: relative;
    width: 100%;
    min-height: 550px;
    padding: 100px 0 60px;
    background: radial-gradient(circle at 10% 20%, rgba(255, 212, 0, 0.05) 0%, rgba(255, 255, 255, 1) 90%);
    overflow: hidden;
}

.mainSwiper {
    width: 100%;
    height: 100%;
    padding: 20px 0 50px;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    /* opacity: 0 বাদ দেওয়া হয়েছে যাতে সাধারণ স্লাইড মুভমেন্ট দেখা যায় */
}

/* স্লাইড টাইটেল আলাদা কালার (প্রথম স্লাইডের জন্য) */
.swiper-slide:first-child .slide-title {
    color: #ed1c24;
}

.slide-content {
    flex: 1;
    max-width: 50%;
}

.slide-title {
    font-family: 'Sansita Swashed', cursive;
    font-size: 70px;
    color: #18488d;
    line-height: 1.2;
    margin-bottom: 30px;
}

.slide-image {
    flex: 1;
    max-width: 50%;
    display: flex;
    justify-content: center;
}

.slide-image img {
    width: 100%;
    max-width: 520px;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Swiper Navigation Customization */
.slider-arrow {
    background: #ffffff !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    color: #18488d !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.slider-arrow:after {
    font-size: 20px !important;
    font-weight: bold;
}

.slider-arrow:hover {
    background: #ed1c24 !important;
    color: #fff !important;
}
.hero-slider .slide-content{padding-left: 50px;}
/* --- SWIPER PAGINATION CUSTOMIZATION --- */

/* --- Sub Menu Styles (Desktop) --- */
.nav-menu ul li {
    position: relative; /* সাব-মেনু পজিশন ঠিক রাখার জন্য */
}

.nav-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    min-width: 180px;
    flex-direction: column; /* ডেস্কটপে লম্বালম্বি দেখানোর জন্য */
    gap: 0 !important;
    padding: 10px 0 !important;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 999;
}

.nav-menu .sub-menu li a {
   padding: 3px 20px 4px !important;
    display: block;
    font-size: 14px;
    color: #000;
    overflow: hidden;
    margin-bottom: 10px;
    line-height: 1.5;
}

/* হোভার করলে সাব-মেনু দেখাবে */
.nav-menu ul li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* সাব-মেনুর ভেতরের লিংকে হোভার করলে যাতে অক্ষরগুলো স্ক্রোল আপ হয় */
.nav-menu .sub-menu li a:hover .word span {
    transform: translateY(-100%);
}

/* সাব-মেনুর ভেতরের স্প্যানগুলোর কালার এবং লেআউট ঠিক রাখার জন্য */
.nav-menu .sub-menu li a .word span::before {
    color: #ed1c24; /* হোভার কালার লাল */
}

.nav-menu .sub-menu li a .word {
    display: inline-flex;
    position: relative;
}
/* --- RESPONSIVE SETTINGS --- */
@media (max-width: 991px) {
    .swiper-slide {
        flex-direction: column-reverse;
        text-align: center;
        gap: 30px;
    }
    .slide-content, .slide-image {
        max-width: 100%;
    }
    .hero-slider {
        padding-top: 60px;
    }
}

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 1200px) {
.nav-menu ul {
    gap: 14px;
}
.search-box input{width: 150px;}
}
@media (max-width: 1023px) {
    .menu-toggle {
        display: block;
        order: 2;
    }
    
    .logo { order: 1; }

    .search-box {
        order: 3;
        margin-right: 15px;
    }

    .search-box input { width: 160px; }
    .search-box input:focus { width: 180px; }

    /* Mobile Navigation Drawer */
    .nav-menu {
        position: fixed;
        top: 85px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 85px);
        background-color: #ffffff;
        transition: 0.4s ease;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        order: 4;
    }

    .nav-menu.active { left: 0; }
    .nav-menu ul {
        flex-direction: column;
        padding: 30px;
        gap: 25px;
    }

    .nav-menu ul li a {
        font-size: 18px;
        display: block;
    }

    /* Slider Layout Collapse */
    .slide {
        flex-direction: column-reverse;
        gap: 20px;
    }

    .slide-content, .slide-image {
        max-width: 100%;
        width: 100%;
        text-align: center;
    }

    .slide-title { font-size: 30px; }
    
    .slider-arrow {
        font-size: 28px;
        top: 30%; /* Align with the top image position on mobile */
    }
    .prev-arrow { left: 0px; }
    .next-arrow { right: 0px; }
    /* --- Mobile Sub Menu --- */
.nav-menu .sub-menu {
    position: static; /* ডেস্কটপের absolute পজিশন বাতিল করার জন্য */
    box-shadow: none;
    background-color: #f9f9f9;
    padding-left: 15px !important;
    padding-top: 10px !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* যখন সাব-মেনু ওপেন হবে */
.nav-menu .sub-menu.open {
    max-height: 500px; /* একটি আনুমানিক বড় হাইট */
    opacity: 1;
    visibility: visible;
}
}

@media (max-width: 480px) {
    .search-box { display: none; }
    .slide-title { font-size: 24px; }
}

/* --- Excellence Section Styles --- */
/* Section Styling */
.excellence-section {
    width: 100%;
    padding: 60px 0;
    text-align: center;
    background-color: #f9f9f9; /* হালকা ব্যাকগ্রাউন্ড যেন কার্ডগুলো ফুটে ওঠে */
}

/* Main Section Heading */
.section-main-title {
    font-size: 40px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 60px;
}

/* 4-Column Grid System */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1200px; /* কন্টেইনারের উইডথ ঠিক রাখার জন্য */
    margin: 0 auto;
    padding: 0 15px;
}

/* --------------------------------------------------
   FLIP CARD CORE STYLES (3D Effect)
-------------------------------------------------- */

/* Outer Container */
.feature-card {
    background-color: transparent;
    height: 280px; 
    perspective: 1000px; 
}

/* Inner Wrapper (যা আসলে ঘুরবে) */
.feature-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* স্মুথ টার্নিং */
    transform-style: preserve-3d;
    cursor: pointer;
}

/* Hover করলে Y-Axis বরাবর ১৮০ ডিগ্রি ঘুরবে */
.feature-card:hover .feature-card-inner {
    transform: rotateY(180deg);
}

/* Front & Back Common Styles */
.feature-card-front, 
.feature-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

/* --- FRONT SIDE STYLING --- */
.feature-card-front {
    background: #ffffff;
    border: 1px solid #eef2f5;
}

/* Icons Styling */
.icon-box {
    font-size: 40px;
    color: #18488d; /* Brand Blue */
    margin-bottom: 20px;
    height: 80px;
    width: 80px;
    border: 2px solid #18488d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feature-card-front .icon-box {height: 80px;
    width: 80px;}
.feature-card-front  .icon-box i{color: #18488d; }
/* Feature Titles */
.feature-title {
    font-family: 'Gilroy', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #18488d;
    letter-spacing: 0.5px;
    margin: 0;
}

/* --- BACK SIDE STYLING --- */
.feature-card-back {
    background-color: #ffd400; /* Brand Yellow */
    color: #ed1c24; /* Brand Blue text */
    transform: rotateY(180deg); /* এটি আগে থেকেই উল্টো হয়ে থাকবে */
    border: 1px solid #ed1c24; /* Brand Red Border */
}

/* Feature Descriptions */
.feature-desc {
    font-size: 14px;
    color: #ed1c24; 
    line-height: 1.6;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}

/* Responsive (Mobile Friendly) */
@media (max-width: 992px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* ট্যাবলেটে ২টি করে দেখাবে */
    }
}

@media (max-width: 576px) {
    .features-grid {
        grid-template-columns: 1fr; /* মোবাইলে ১টি করে দেখাবে */
    }
}


/* --- RESPONSIVE MEDIA QUERIES --- */

/* Tablets / Medium Screen (2 Columns Display) */
@media (max-width: 991px) {
    .section-main-title {
        font-size: 38px;
        margin-bottom: 40px;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

/* Mobile Screen (1 Column Full Width Display) */
@media (max-width: 576px) {
    .section-main-title {
        font-size: 30px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .feature-card {
        padding: 25px 15px;
    }
}

.kitchen-needs-section {
    padding: 60px 0;
}

/* Section Title (Figma Match) */
.section-title {
    font-size: 40px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 40px;
    text-align: left; /* Image alignment matches left */
}

/* 3-Column Grid System (No container class used) */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Product Card Box Structure */
.product-card {
    background: #ffffff;
    border: 1px solid #eef0f2; /* Subtle card border border */
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

/* Image Container with Zoom effect setup */
.product-image-box {
    width: 100%;
    height: 380px; /* Adjust height according to layout needs */
    overflow: hidden;
    background-color: #e0e0e0; /* Gray fallback background matching Figma placeholder */
}

.product-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Card Content Area styling */
.product-info {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-name {
    font-family: 'Gilroy', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #18488d;
    margin-bottom: 12px;
}

.product-desc {
    font-size: 14px;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1; /* Pushes the view link to stay perfectly aligned at bottom */
}

/* View Products Action Link with underline effect */
.view-link {
    display: inline-block;
    align-self: flex-start;
    text-decoration: none;
    color: #000000;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.3s ease;
}

/* Underline Animation (Milkana Red Theme) */
.view-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px; /* Initial blocky underline width as seen in layout image */
    height: 2px;
    background-color: #000000;
    transition: width 0.3s ease, background-color 0.3s ease;
}


/* --- HOVER EFFECTS --- */

/* 1. Overall Card Shadow Popup */
.product-card:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

/* 2. Image Zoom Transition */
.product-card:hover .product-image-box img {
    transform: scale(1.06);
}

/* 3. Link Red Color & Underline Expand */
.product-card:hover .view-link {
    color: #ed1c24; /* Changes to Milkana Brand Red */
}

.product-card:hover .view-link::after {
    width: 100%;
    background-color: #ed1c24;
}


/* --- RESPONSIVE MEDIA QUERIES --- */

/* Tablet Screens (Collapses into 2 Columns) */
@media (max-width: 991px) {
    .section-title {
        font-size: 34px;
        margin-bottom: 30px;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .product-image-box {
        height: 320px;
    }
}

/* Mobile Screens (Collapses into Single Stacked Column) */
@media (max-width: 650px) {
    .section-title {
        font-size: 28px;
        text-align: center; /* Center aligns title layout text for cleaner mobile flow */
    }

    .product-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .product-image-box {
        height: 340px;
    }
    
    .product-info {
        padding: 20px;
    }
}


.banner-image-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 600; /* Maintains the exact desktop aspect ratio dynamically */
    background-color: #cccccc; /* Default gray color matching your image placeholder */
    border-radius: 4px;        /* Soft corner finish */
    overflow: hidden;          /* Keeps the image zoom inside the boundary */
    cursor: pointer;
}

/* Main Banner Image Styling */
.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Ultra smooth ease transition */
}

/* Subtle Dark Overlay on Hover for premium look */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0); /* Invisible by default */
    transition: background-color 0.4s ease;
    pointer-events: none; /* Allows click to pass through to image if linked */
}


/* --- HOVER EFFECTS --- */

/* 1. Image Zoom Effect */
.banner-image-wrapper:hover .banner-img {
    transform: scale(1.03); /* Safe and modern zoom depth */
}

/* 2. Overlay Activation */
.banner-image-wrapper:hover .banner-overlay {
    background: rgba(0, 0, 0, 0.05); /* Very gentle shadow layer overlay on hover */
}


/* --- RESPONSIVE MEDIA QUERIES --- */

/* Tablet & Mobile Screens Adjustment */
@media (max-width: 768px) {
    .full-banner-section {
        margin: 25px auto;
        padding: 0 15px; /* Slightly tighter padding for smaller mobile views */
    }
    
    .banner-image-wrapper {
        /* Changes aspect-ratio slightly for mobile so the image content stays taller and clearer */
        aspect-ratio: 16 / 7; 
    }
}

@media (max-width: 480px) {
    .banner-image-wrapper {
        aspect-ratio: 4 / 2.2; 
    }
}

.section-script-title {
    font-size: 40px;
    font-weight: 700;
    color: #222222;
    line-height: 1.2;
}

.about-section {
    width: 100%;
    padding: 80px 0;
    background-color: #fdfdfd; 
    position: relative;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px; 
    align-items: start; 
}


.about-title-box {
    position: relative;
}

.about-title-box .section-script-title {
    font-size: 40px;
    color: #222222; 
    margin-bottom: 15px;
    line-height: 1.1;
}


.about-content-box {
    border-left: 3px solid rgba(24, 72, 141, 0.1); 
    padding-left: 40px;
}


.about-content-box p.lead-text {
    font-size: 18px;
    font-weight: 600;
    color: #18488d;
    line-height: 1.6;
    margin-bottom: 20px;
}

.about-content-box p {
    font-size: 14px;
    line-height: 1.7;
    color: #4a4a4a; 
    margin-bottom: 0;
}

.about-content-box p + p {
    margin-top: 15px;
}

/* --- RESPONSIVE SETTINGS --- */
@media (max-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr; 
        gap: 30px;
    }
    
    .section-script-title {
        font-size: 40px;
    }
    
    .about-content-box {
        border-left: none; 
        border-top: 2px solid rgba(24, 72, 141, 0.1); 
        padding-left: 0;
        padding-top: 20px;
    }
}
/* --- MENU POSSIBILITIES SECTION STYLES --- */
.menu-possibilities-section {
    width: 100%;
    padding: 60px 0;
    background-color: #f9f9f9;
}

/* Header arrangement */
.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 35px;
    gap: 20px;
}

.view-more-link {
    text-decoration: none;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 2px;
    border-bottom: 1px solid #000000;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.view-more-link i {
    transition: transform 0.3s ease;
}

/* View More Hover */
.view-more-link:hover {
    color: #ed1c24; /* Changes to brand red */
    border-color: #ed1c24;
}

.view-more-link:hover i {
    transform: translateX(5px);
}

/* 3-Column Cards Grid Grid */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Individual Card setup Setup */
.menu-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.menu-image-box {
    width: 100%;
    height: 230px;
    overflow: hidden;
    background-color: #e2e8f0;
}

.menu-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Content Area inside Cards */
.menu-info {
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
}

.menu-item-title {
    font-size: 22px;
    font-weight: 700;
    color: #18488d;
    margin-bottom: 12px;
}

.menu-item-desc {
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
    flex-grow: 1;
}

/* Bottom Arrow Button */
.card-arrow-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #000000;
    cursor: pointer;
    align-self: flex-start;
    transition: color 0.3s ease, transform 0.3s ease;
    padding: 5px 0;
}


/* --- HOVER EFFECTS --- */

/* Card Popup and Zoom Details */
.menu-card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.06);
    transform: translateY(-3px);
    /* background-color: #18488d;
    color: #ffffff; */
}
/* .menu-card:hover .menu-item-title{
    color: #ffffff;
}
.menu-card:hover .menu-item-desc{
    color: #ffffff;
} */
.menu-card:hover .card-arrow-btn{
    box-shadow: 0 10px 20px rgba(0,0,0,0.06);
    transform: translateY(-3px);
    /* background-color: #18488d;
    color: #ffffff; */
}

.menu-card:hover .menu-image-box img {
    transform: scale(1.04);
}

/* Arrow turns red and shifts slightly */
.menu-card:hover .card-arrow-btn {
    color: #ed1c24;
    transform: translateX(6px);
}


/* --- RESPONSIVE MEDIA QUERIES --- */

/* Tablets Screens Display */
@media (max-width: 991px) {
    .about-grid {
        grid-template-columns: 1fr; /* Stack about section text on tablet */
        gap: 20px;
    }

    .menu-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .menu-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns display for cards */
        gap: 20px;
    }
}

/* Mobile Screens Display */
@media (max-width: 600px) {
    .section-script-title {
        font-size: 30px;
    }

    .menu-grid {
        grid-template-columns: 1fr; /* Full width stacked card view */
        gap: 25px;
    }

    .menu-image-box {
        height: 210px;
    }
}

/* --- Featured Slider Section Styles --- */
.featured-slider-section {
    position: relative;
    width: 100%;
    padding: 60px 0; /* Space for arrow navigation padding */
}

/* Swiper Core Class Optimization */
.featuredSwiper {
    width: 100%;
    height: auto;
}

/* Individual Slide Grid Configuration */
.featured-slide {
    display: grid !important; /* Forces layout stability inside Swiper */
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
    background: #ffffff;
}

/* Left Image Box Setup */
.featured-image-box {
    width: 100%;
    height: 440px;
    overflow: hidden;
    background-color: #e2e8f0;
    border-radius: 4px;
}

.featured-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Right Content Box Typography */
.featured-content-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.sub-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #000000;
    margin-bottom: 15px;
}

.main-title {
    font-size: 40px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 30px;
}

/* Features Bullet List */
.features-list {
    list-style: none;
    margin-bottom: 40px;
    width: 100%;
}

.features-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font-size: 15px;
    color: #333333;
    line-height: 1.5;
}

.features-list li:last-child {
    margin-bottom: 0;
}

/* Check Icons */
.check-icon {
    font-size: 18px;
    color: #000000;
    margin-top: 2px;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Explore Button Styling */
.btn-explore {
    display: inline-block;
    background-color: #000000;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 4px;
    border: 1px solid #000000;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    text-transform: uppercase;
}


/* --- HOVER EFFECTS --- */

/* Image Zoom on Slide Hover */
.featured-slide:hover .featured-image-box img {
    transform: scale(1.04);
}

/* Checkmarks transform into Milkana Red on Hover */
.featured-slide:hover .check-icon {
    color: #ed1c24;
    transform: scale(1.1);
}

/* Explore Button Hover */
.btn-explore:hover {
     background-color: #ffd400; 
    color: #ed1c24;
    border-color: #ffd400;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(237, 28, 36, 0.2);
}


/* --- CUSTOM SWIPER NAVIGATION ARROWS --- */
.feat-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 32px;
    color: #222222;
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s ease, transform 0.2s;
    padding: 10px;
}

.prev-feat-arrow { left: 0px; }
.next-feat-arrow { right: 0px; }

.feat-arrow:hover { color: #ed1c24; }
.prev-feat-arrow:active { transform: translateY(-50%) scale(0.9); }
.next-feat-arrow:active { transform: translateY(-50%) scale(0.9); }


/* --- RESPONSIVE MEDIA QUERIES --- */

/* Tablet View Adjustments */
@media (max-width: 991px) {
    .featured-slider-section {
        padding: 0 20px;
    }
    
    .featured-slide {
        grid-template-columns: 1fr; /* Stacks layout vertically */
        gap: 35px;
    }

    .featured-image-box {
        height: 360px;
    }

    .main-title {
        font-size: 36px;
        margin-bottom: 25px;
    }
    
    /* Reposition custom arrows closer for mobile viewport */
    .feat-arrow {
        top: 30%; /* Centers arrow relative to top image box layout */
        font-size: 28px;
    }
    .prev-feat-arrow { left: -5px; }
    .next-feat-arrow { right: -5px; }
}

/* Mobile View adjustments */
@media (max-width: 576px) {
    .featured-image-box {
        height: 280px;
    }

    .main-title {
        font-size: 30px;
    }

    .features-list li {
        font-size: 14px;
    }

    .btn-explore {
        width: 100%;
        text-align: center;
    }
}

/* --- Expertise Section Styles --- */
.expertise-section {
    padding: 60px 0;
    text-align: center;
    background-color: #f9f9f9;
}

/* Section Main Title (Figma Match) */
.expertise-main-title {
    font-size: 40px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 50px;
}

/* 4-Column Responsive Grid System */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* Individual Info Card Styling */
.expertise-card {
    background: #ffffff;
    border: 1px solid #dcdcdc; /* Thin gray outline as seen in image */
    padding: 40px 25px;
    text-align: left; /* Text alignment inside cards is left-aligned */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 250px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Icon Wrap Container */
.exp-icon-box {
    font-size: 26px;
    color: #18488d; /* Default black as per layout image */
    margin-bottom: 25px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #18488d;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Card Heading Details */
.exp-card-title {
    font-size: 22px;
    font-weight: 700;
    color: #18488d;
    margin-bottom: 15px;
    line-height: 1.3;
}

/* Card Body Description text */
.exp-card-desc {
    font-size: 14px;
    color: #555555;
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 0;
}


/* --- HOVER EFFECTS --- */

/* Card Border Fade & Smooth Dynamic Shadow Elevation */
.expertise-card:hover {
    border-color: transparent;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

/* Icon shifts slightly and switches to Milkana Brand Red */
.expertise-card:hover .exp-icon-box {
    color: #fff; 
    background-color: #18488d;
    transform: scale(1.08);
}


/* --- RESPONSIVE MEDIA QUERIES --- */

/* Tablet Screens (Collapses to 2 Columns Layout) */
@media (max-width: 991px) {
    .expertise-main-title {
        font-size: 36px;
        margin-bottom: 40px;
    }

    .expertise-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .expertise-card {
        padding: 30px 20px;
        min-height: auto;
    }
}

/* Mobile Phone Screens (Full-Width 1 Column Layout) */
@media (max-width: 576px) {
    .expertise-main-title {
        font-size: 30px;
        line-height: 1.3;
    }

    .expertise-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .expertise-card {
        padding: 35px 25px;
    }
}

/* Top Visual Layout */
.stats-container{padding: 60px 0;}
.visual-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 40px;
    gap: 30px;
}

.visual-row .icon-box-img {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}
.visual-row .icon-box-img img{height: 200px; object-fit: cover;}
/* Pure CSS Shield Shape (Left) */



/* Divider Line */
.divider-line {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, #e0e0e0, transparent);
    margin-bottom: 30px;
}

/* Bottom Stats Layout */
.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
}

.stat-card {
    flex: 1;
    min-width: 200px;
    text-align: center;
    padding: 20px 10px;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Vertical Divider for Cards (Except Last) */
.stat-card:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background-color: #e0e0e0;
}

/* Typography & Colors */
.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #18488d; /* Core Blue */
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.stat-text {
    font-size: 0.8rem;
    font-weight: 700;
    color: #555555;
    letter-spacing: 1px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

/* Stat Card Hover Effects */
.stat-card:hover {
    transform: translateY(-5px);
}

.stat-card:hover .stat-number {
    color: #ed1c24; /* Changes to Red on Hover */
}

.stat-card:hover .stat-text {
    color: #ffd400; /* Text highlights with Yellow */
    text-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}

/* -------------------------------------------
   Responsive Design (Media Queries)
------------------------------------------- */

/* Tablets and Small Laptops */
@media (max-width: 768px) {
    .stats-row {
        justify-content: center;
    }
    
    .stat-card {
        flex: 50% 1; /* 2 items per row */
        margin-bottom: 20px;
    }

    /* Remove vertical dividers on mobile layout */
    .stat-card:not(:last-child)::after {
        display: none;
    }
}

/* Mobile Devices */
@media (max-width: 480px) {
    .visual-row {
        flex-direction: column;
        gap: 50px;
    }

    .stat-card {
        flex: 100% 1; /* 1 item per row */
    }
    
    .stat-number {
        font-size: 2rem;
    }
}

.testimonial-section {
    width: 100%;
    padding: 60px 0;
    background-color: #f9f9f9;
}

.section-title {
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 50px;
}


.testimonial-slider .swiper-slide {
    height: auto !important; 
    display: flex;
    padding: 10px 0 100px 0;
}

.testimonial-slider .testimonial-card {
    width: 100%;
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 35px 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.testimonial-card:active {
    cursor: grabbing;
}

/* Quote Icon Structure */
.quote-icon {
    font-size: 5rem;
    color: #e2e2e2;
    line-height: 1;
    position: absolute;
    top: 5px;
    left: 30px;
    font-family: sans-serif;
    transform: rotate(180deg); /* Reversing for traditional open quote look */
    pointer-events: none;
    transition: color 0.4s ease;
}

.quote-text {
    font-size: 1.1rem;
    color: #444444;
    line-height: 1.6;
    font-style: italic;
    margin-top: 40px;
    margin-bottom: 40px;
    z-index: 2;
}

/* User Info Layout */
.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.avatar-placeholder {
    width: 50px;
    height: 50px;
    background-color: #cccccc;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 0.4s ease;
}

.user-name {
    font-size: 1rem;
    font-weight: 700;
    color: #18488d;
    margin-bottom: 3px;
}

.user-designation {
    font-size: 0.8rem;
    color: #777777;
    margin-bottom: 0;
}

/* -------------------------------------------
   Hover & Interactive Effects
------------------------------------------- */
.testimonial-card:hover {
    transform: translateY(-8px);
    border-color: #e0e0e0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
}

/* Subtle accent highlight on hover */
.testimonial-card:hover .quote-icon {
    color: #b0b0b0; 
}

.testimonial-card:hover .avatar-placeholder {
    background-color: #999999; /* Interactive state for avatar */
}

/* Customize Swiper Pagination Dots */
.swiper-pagination-bullet {
    background: #cccccc !important;
    opacity: 1 !important;
}

.swiper-pagination-bullet-active {
    background: #444444 !important;
    width: 18px !important; /* Elegant elongated dot for active state */
    border-radius: 4px !important;
}

/* -------------------------------------------
   Responsive Typography adjustments
------------------------------------------- */
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    
    .testimonial-card {
        padding: 30px 25px;
    }
}

/* CTA Section Styling */
.cta-section {
    padding: 60px 0;
}


/* মূল ব্ল্যাক/ডার্ক ব্লু বক্সটি */
.cta-box {
    background-color: #18488d; /* আপনার দেওয়া নীল রঙটি বেস হিসেবে ব্যবহার করা হয়েছে */
    border-radius: 40px; /* ইমেজের মতো রাউন্ডেড কর্নার */
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(24, 72, 141, 0.15);
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* টাইটেল স্টাইল (Sansita Swashed বা Serif ফিল আনার জন্য) */
.cta-title {
    font-size: 40px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.cta-desc {
    font-size: 1.1rem;
    color: #e0e8f5; /* হালকা নীলচে সাদা */
    max-width: 650px;
    margin: 0 auto 35px auto;
    line-height: 1.6;
    font-weight: 300;
}

/* কন্টাক্ট বাটন */
.cta-btn {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #18488d; 
    background-color: #ffffff; 
    padding: 15px 40px;
    border-radius: 50px; 
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* -------------------------------------------
   Hover Effects (লাল ও হলুদ কালারের ব্যবহার)
------------------------------------------- */

/* পুরো বক্সের ওপর হালকা ইন্টারঅ্যাক্টিভ ইফেক্ট */
.cta-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(24, 72, 141, 0.25);
}

/* বাটনের হোভার ইফেক্ট */
.cta-btn:hover {
    background-color: #ffd400; 
    color: #ed1c24;            
    transform: scale(1.05);    
    box-shadow: 0 8px 25px rgba(255, 212, 0, 0.35);
}

/* -------------------------------------------
   Responsive Design (Media Queries)
------------------------------------------- */

/* ট্যাবলেট এবং ছোট স্ক্রিন */
@media (max-width: 768px) {
    .cta-box {
        padding: 45px 25px;
        border-radius: 30px; /* মোবাইলে কর্নার রেডিয়াস কিছুটা কম */
    }

    .cta-title {
        font-size: 2rem; /* স্ক্রিন অনুযায়ী ফন্ট সাইজ ছোট করা হয়েছে */
        margin-bottom: 15px;
    }

    .cta-desc {
        font-size: 1rem;
        margin-bottom: 25px;
    }

    .cta-btn {
        padding: 12px 30px;
        font-size: 0.9rem;
    }
}

/* মোবাইল ডিভাইস */
@media (max-width: 480px) {
    .cta-box {
        padding: 40px 15px;
        border-radius: 20px;
    }

    .cta-title {
        font-size: 1.6rem;
        line-height: 1.3;
    }
    
    .cta-btn {
        width: 100%; /* মোবাইলে বাটনটি ফুল উইডথ হয়ে যাবে */
        box-sizing: border-box;
    }
}

/* ==========================================================================
   Footer Base Styles
   ========================================================================== */
.main-footer-section {
    background-color: #f9f9f9;
    color: #555555;
    padding-top: 60px;
    border-top: 1px solid #f0f0f0;
}

/* Footer Grid Layout */
.footer-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    padding-bottom: 50px;
}

.footer-col {
    flex: 1;
    min-width: 160px;
}

.footer-col.col-about {
    flex: 2;
    min-width: 250px;
}

/* About Column Elements */
.footer-logo img {
    max-width: 160px;
    height: auto;
    margin-bottom: 20px;
}

.about-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #666666;
    margin-bottom: 25px;
    max-width: 320px;
}

/* Social Icons (Square Rounded Wireframes as image) */
.footer-socials {
    display: flex;
    gap: 12px;
}

.footer-socials a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #333333;
    border-radius: 50%;
    color: #333333;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

/* Links Columns Navigation */
.footer-title {
    font-size: 18px;
    font-weight: 600;
    color: #222222;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links li a {
    font-size: 15px;
    color: #18488d;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

/* ==========================================================================
   Hover States (Using Primary Blue #18488d and Red #ed1c24)
   ========================================================================== */
.footer-links li a:hover {
    color: #ed1c24; /* Hover করলে আপনার দেওয়া নীল কালার হবে */
    transform: translateX(3px); /* হালকা ডানদিকে মুভমেন্ট */
}

.footer-socials a:hover {
    color: #fff; /* আইকন হোভারে লাল কালার */
    background-color: #18488d;
    transform: translateY(-3px);
}

/* ==========================================================================
   Middle & Bottom Footer Areas
   ========================================================================== */

/* Middle Info Row */
.footer-middle {
    text-align: center;
    padding: 30px 20px;
    border-top: 1px solid #f2f2f2;
}

.brand-note {
    font-size: 0.9rem;
    font-style: italic;
    color: #444444;
    margin-bottom: 8px;
}

.copyright-center {
    font-size: 0.75rem;
    color: #aaaaaa;
    letter-spacing: 0.5px;
}

/* Absolute Bottom Row */
.footer-bottom {
    background-color: #f7f7f7;
    padding: 20px 0;
    border-top: 1px solid #eaeaea;
}

.bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.copyright-left {
    font-size: 0.8rem;
    color: #666666;
    font-weight: 500;
}

.bottom-right-links {
    display: flex;
    gap: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #333333;
    letter-spacing: 0.5px;
}

.lang-selector {
    cursor: pointer;
    transition: color 0.3s ease;
}

.lang-selector:hover {
    color: #18488d;
}

/* ==========================================================================
   Responsive Design Breakpoints
   ========================================================================== */

@media (max-width: 991px) {
    .footer-col {
        flex: 33.33% 1; /* ট্যাবলেটে ৩ কলাম করে দেখাবে */
    }
    .footer-col.col-about {
        flex: 100% 1; /* প্রথম কলাম ফুল উইডথ হবে */
        margin-bottom: 20px;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        flex-direction: column;
        gap: 35px;
    }
    
    .footer-col {
        width: 100%;
    }

    .footer-title {
        margin-bottom: 15px;
    }

    .bottom-inner {
        flex-direction: column;
        text-align: center;
    }

    .bottom-right-links {
        flex-direction: column;
        gap: 10px;
    }
}

.btn-anim {
    text-decoration: none;
    display: inline-flex !important;
    align-items: center;
    overflow: hidden;
    vertical-align: middle;
}

/* বাটনের ভেতরের টেক্সট কন্টেইনার */
.btn-anim .btn-text,
.btn-anim .word {
    display: inline-flex;
    position: relative;
    align-items: center;
}

/* প্রতিটি অক্ষরের স্টাইল */
.btn-anim .word span {
    display: inline-block;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
    transition-delay: calc(var(--i) * 0.02s);
    transform-style: preserve-3d; /* অ্যানিমেশন স্মুথ রাখার জন্য */
}

/* নিচ থেকে যে ডুপ্লিকেট টেক্সট উঠবে তার স্টাইল */
.btn-anim .word span::before {
    content: attr(data-letter);
    position: absolute;
    top: 100%; /* মেইন অক্ষরের ঠিক নিচে থাকবে */
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* হোভার করলে অক্ষরের পজিশন পরিবর্তন */
.btn-anim:hover .word span {
    transform: translateY(-100%);
}

/* স্পেস বা ফাঁকা জায়গার জন্য উইডথ ফিক্স */
.btn-anim .word span.space {
    width: 0.25em; /* স্ক্রিন সাইজ অনুযায়ী পারফেক্ট স্পেসিং */
    display: inline-block;
}

.swiper-pagination-bullet {
    background-color: #cccccc !important; /* হালকা গ্রে কালার */
    opacity: 0.7;
    width: 6px;
    height: 6px;
    transition: all 0.3s ease;
}

/* ২. শুধুমাত্র অ্যাক্টিভ ডটের কালার (#18488d) এবং সাইজ */
.swiper-pagination-bullet-active {
    background-color: #18488d !important; /* আপনার কাঙ্ক্ষিত নীল কালার */
    opacity: 1 !important;
    width: 25px !important; /* অ্যাক্টিভ হলে ডটটি একটু চ্যাপ্টা বা বড় দেখাবে, যা দেখতে সুন্দর লাগে */
    border-radius: 5px !important;
}
.avatar-placeholder img{width: 50px; height: 50px; border-radius: 50%; object-fit: cover;}


/* indivisual page */

.category-banner {
    width: 100%;
    min-height: 600px; 
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.category-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0) 100%
);
 
    z-index: 1;
    transition: background 0.4s ease;
}


.category-banner .inner-banner-block {
    max-width: 750px; 
    position: relative;
    z-index: 1;
}


.category-banner .breadcrumb ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 25px;
}

.category-banner .breadcrumb ul li {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #555;
}

.category-banner .breadcrumb ul li:not(:last-child)::after {
    content: '/';
    margin-left: 8px;
    color: #fff;
}

.category-banner .breadcrumb ul li a {
    text-decoration: none;
    color: #fff;
    transition: color 0.3s ease;
}

.category-banner .breadcrumb ul li a:hover {
    color: #ed1c24;
}

.category-banner .breadcrumb ul li:last-child a,
.category-banner .breadcrumb ul li:last-child {
    color: #ed1c24;
    pointer-events: none; 
}

.category-banner .banner-title {
    font-size: 70px; 
    color: #fff;
    line-height: 1.2;
    margin-bottom: 30px;
    display: inline-block;
}

.category-banner .banner-subtitle {
    font-size: 1.15rem;
    color: #fff;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.2px;
    transition: color 0.3s ease;
}

@media (max-width: 1024px) {
    .category-banner {
        min-height: 460px;
    }
    .category-banner .banner-title {
        font-size: 50px;
    }
}

@media (max-width: 768px) {
    .category-banner {
        min-height: 420px;
        background-position: 100% center !important; 
    }
   
    /* .category-banner::before {
        background: rgba(255, 255, 255, 0.75);
    } */
    /* .category-banner:hover::before {
        background: rgba(255, 255, 255, 0.8);
    } */
    .category-banner .inner-banner-block {
        max-width: 100%;
    }
    .category-banner .banner-title {
         font-size: 40px;
        margin-bottom: 20px;
    }
    .category-banner .banner-subtitle {
        font-size: 1rem;
    }
    .category-banner .breadcrumb ul {
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .category-banner {
        min-height: 360px;
    }

    .category-banner .banner-subtitle {
        font-size: 0.95rem;
    }
    .category-banner .breadcrumb ul li {
        font-size: 11px;
    }
}


.features-section {
    padding: 80px 0;
    overflow: hidden;
    background-color: #f9f9f9;
}

.features-section .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}


.section-header {
    max-width: 700px;
    margin-bottom: 60px;
}

.section-subtitle {
    font-size: 22px;
    color: #666;
    font-weight: 500;
    margin-bottom: 20px;
}
.features-section .section-title{ margin-bottom: 10px; text-align: left;}
.section-desc {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    font-weight: 400;
}

.features-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.timeline-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 45px;
    padding-left: 20px;
}

/* .timeline-line {
    position: absolute;
    left: 45px;
    top: 25px;
    bottom: 25px;
    width: 2px;
    background: #cbd5e1;
    z-index: 1;
} */
.timeline-line {
    position: absolute;
    left: 45px;
    top: 25px;
    bottom: 25px;
    width: 8%;
    height: 100%;
    background-image: url('../images/long-line.png');
    /* background-size: cover; */
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}
.timeline-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 25px;
    z-index: 2;
    transition: transform 0.3s ease;
}

.timeline-item:hover {
    transform: translateX(10px);
}
.individual-category-timeline .timeline-item {
    width: 70%;
}
.individual-category-timeline .timeline-text {
    font-size: 1.05rem;
    color: #18488d;
    font-weight: 400;
    transition: color 0.3s ease;
    width: 60%;
}
.individual-category-timeline .icon-box {font-size: 30px; color: #18488d;}
.icon-box {
    width: 54px;
    height: 54px;
    background: #ffffff;
    border: 1px dashed #94a3b8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 1.1rem;
    box-shadow: 0 0 0 6px #f8fafc;
    transition: all 0.3s ease;
}

.timeline-item:hover .icon-box {
    border-color: #222;
    color: #000;
    box-shadow: 0 0 0 8px #f1f5f9;
    transform: rotate(15deg);
}


.timeline-text {
    font-size: 1.05rem;
    color: #4a5568;
    font-weight: 400;
    transition: color 0.3s ease;
}

.timeline-item:hover .timeline-text {
    color: #000;
    font-weight: 500;
}

.image-block {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.feature-image {
    width: 100%;
    max-width: 500px;
    height: 480px;
    background-color: #d6d6d6; 
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

.feature-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}


/* --- Responsive Media Queries --- */

@media (max-width: 992px) {
    .features-content {
        flex-direction: column-reverse; 
        gap: 60px;
    }
    
    .image-block {
        justify-content: center;
        width: 100%;
    }

    .feature-image {
        max-width: 100%;
        height: 400px;
    }

    .timeline-wrapper {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .features-section {
        padding: 50px 0;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .section-subtitle {
        font-size: 1rem;
    }

    .timeline-line {
        left: 35px;
    }

    .icon-box {
        width: 44px;
        height: 44px;
        font-size: 1rem;
        box-shadow: 0 0 0 4px #f8fafc;
    }

    .timeline-text {
        font-size: 0.95rem;
    }
    
    .feature-image {
        height: 300px;
    }
}

.product-section {
    padding: 80px 0;
}
.product-section .section-script-title{padding-bottom: 45px;}
/* --- Filter & Sort Bar --- */
.filter-sort-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
    gap: 15px;
}

.filter-tabs {
    display: flex;
    background: #ffd400;
    padding: 5px;
    border-radius: 8px;
}

.tab-btn {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    color: #555;
}


.tab-btn.active {
    background-color: #ed1c24; 
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(237, 28, 36, 0.2);
}

.tab-btn:hover:not(.active) {
    color: #ed1c24;
}

/* Dropdown */
.sort-dropdown select {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 10px 15px;
    border: 1px solid #18488d; /* নীল কালার বর্ডার */
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    outline: none;
    transition: border-color 0.3s;
    color: #1a1a1a;
}

.sort-dropdown select:hover {
    border-color: #ed1c24;
}

/* --- Product Grid --- */
.product-grid-block {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

/* --- Product Card --- */
.product-card-col {
    background: #ffffff; /* সলিড ব্যাকগ্রাউন্ড */
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
}

/* কার্ড হোভার ইফেক্ট */
.product-card-col:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(24, 72, 141, 0.1); /* হালকা নীল শ্যাডো */
    border-color: rgba(24, 72, 141, 0.15);
}

/* Image Box */
.product-card-col .image-box img {
    width: 100%;
    height: 250px;
    overflow: hidden;
    position: relative;
    transition: background-color 0.3s;
}

.product-card-col:hover .image-box {
    background-color: #c5c9d1; /* হোভার করলে ব্যাকগ্রাউন্ড একটু ডার্ক হবে */
}

/* NEW Badge (হলুদ ব্যাকগ্রাউন্ড কালার ব্যবহার করা হয়েছে) */
.badge-new {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background-color: #ffd400; /* হলুদ কালার */
    color: #000;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    letter-spacing: 0.5px;
}

/* Card Content */
.card-content {
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-card-col .product-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #18488d;
    margin-bottom: 25px;
    line-height: 1.4;
}
.product-card-col .image-box{position: relative;}
/* Buttons */
.card-actions {
    display: flex;
    gap: 12px;
    margin-top: auto;
}

.product-card-col .btn {
    flex: 1;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    padding: 11px 0;
    border-radius: 6px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* Details Button (নীল থিম বর্ডার ও ব্যাকগ্রাউন্ড) */
.btn-details {
    background-color: #18488d; /* নীল কালার */
    color: #ffffff;
    border: 1px solid #18488d;
}

.btn-details:hover {
    background-color: #ffffff;
    color: #18488d;
}

/* Enquire Button (লাল থিম ব্যাকগ্রাউন্ড) */
.btn-enquire {
    background-color: #ed1c24; /* লাল কালার */
    color: #ffffff;
    border: 1px solid #ed1c24;
}

.btn-enquire:hover {
    background-color: #b81016; /* ডার্ক রেড হোভার */
    border-color: #b81016;
    box-shadow: 0 4px 12px rgba(237, 28, 36, 0.2);
}

/* জাভাস্ক্রিপ্ট লোড মোডের জন্য হিডেন ক্লাস */
.hidden-product {
    display: none !important;
}

/* --- Load More Button --- */
.load-more-container {
    text-align: center;
}

.load-more-btn {
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.load-more-btn:hover {
    border-color: #18488d; 
    color: #18488d;
    background-color: #fafbfc;
    transform: translateY(-2px);
}


/* --- Responsive Media Queries --- */

@media (max-width: 1150px) {
    .product-grid-block {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 850px) {
    .product-grid-block {
        grid-template-columns: repeat(2, 1fr);
    }
    .section-heading {
        font-size: 1.7rem;
    }
}

@media (max-width: 550px) {
    .filter-sort-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .filter-tabs, .tab-btn {
        width: 100%;
    }
    .sort-dropdown {
        width: 100%;
    }
    .sort-dropdown select {
        width: 100%;
    }
    .product-grid-block {
        grid-template-columns: 1fr; /* মোবাইলে সিঙ্গেল কলাম */
    }
    .image-box {
        height: 220px;
    }
}
/* Section Header Styles */
.ideal-for-section {
    width: 100%;
}

.ideal-for-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 15px;
}

.view-all-btn {
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    color: #111;
    letter-spacing: 1px;
    padding-bottom: 4px;
    border-bottom: 2px solid #111;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.view-all-btn:hover {
    color: #555;
    border-color: #555;
}

/* Cards Grid Layout (Responsive CSS Grid) */
.ideal-for-section .cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Individual Card Styles */
.category-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 380px; /* Card এর উচ্চতা */
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

/* Image Wrapper and Image */
.card-image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Gradient Overlay matching your design (Dark bottom) */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
}

/* Typography on Card */
.card-title {
    position: absolute;
    bottom: 25px;
    left: 25px;
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 600;
    z-index: 2;
    letter-spacing: 0.5px;
}

/* Hover Effects */
.category-card:hover {
    transform: translateY(-8px); /* কার্ডটি কিছুটা উপরে উঠবে */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.category-card:hover .card-img {
    transform: scale(1.08); /* ইমেজটি হালকা জুম হবে */
}

/* Responsive Media Queries */

/* Tablet View (2 Columns) */
@media (max-width: 992px) {
    .ideal-for-section .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .section-title {
        font-size: 2.2rem;
    }
}

/* Mobile View (1 Column) */
@media (max-width: 576px) {
   
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .ideal-for-section .cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .category-card {
        height: 320px;
    }
}

.cheesydips-row .banner-title{font-size: 70px;
    color: #222222;
    line-height: 1.2;
    margin-bottom: 30px;
    display: inline-block;}
    .cheesydips-row .banner-subtitle{ font-size: 18px;}
    .our-selection{font-size: 18px;}
.cheesydips-row {
            
            padding: 60px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between; 
            gap: 40px; 
        }

        /* Responsive Text Section */
        .cheesydips-row .inner-banner-block {
            flex: 1; 
            max-width: 50%; 
        }
.image-section {
            flex: 1; 
            display: flex;
            justify-content: center; 
        }

        
        .img-container {
            width: 100%; 
            max-width: 500px;
            height: auto; 
            border-radius: 20px; 
            overflow: hidden; 
            position: relative; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
            transition: all 0.3s ease-in-out; 
        }

        .img-container img {
            width: 100%; 
            height: auto; 
            display: block; 
            transition: transform 0.3s ease-in-out; 
        }

        .img-container:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
            transform: translateY(-5px); 
        }

        .img-container:hover img {
            transform: scale(1.05); 
        }
        .cheesy-grid-item{display: grid;
    grid-template-columns: repeat(3, 1fr);
   }

   .banner-buttons-block{display:flex; gap: 20px; margin-top: 30px;}
   .btn-resume{background: transparent; border: 2px solid #fff; color: #fff;}

   /* Section & Container Setup */
.culture-section {
    padding: 80px 0;
}

/* Flexbox Layout Wrapper */
.culture-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
}

/* --- Left Side: Gallery Layout --- */
.culture-gallery {
    flex: 1;
    display: flex;
    gap: 20px;
}

.gallery-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

/* Adjusting heights to match the image layout */
.left-col {
    justify-content: space-between;
}

.right-col {
    justify-content: center;
}

/* Image Box Container for Hover Effect */
.img-box {
    position: relative;
    overflow: hidden;
    border-radius: 12px; /* Smooth rounded corners like the image */
    background-color: #e0e0e0; /* Fallback gray background */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: all 0.4s ease-in-out;
}

/* Aspect Ratios for Grid */
.square-top {
    aspect-ratio: 1 / 1.05;
}

.square-bottom {
    aspect-ratio: 1 / 1;
}

.rectangle-tall {
    aspect-ratio: 1 / 1.4;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, filter 0.5s ease;
}

/* --- Hover Effects --- */
.img-box:hover {
    transform: translateY(-5px); 
    box-shadow: 0 12px 24px rgba(0,0,0,0.15); 
}

.img-box:hover img {
    transform: scale(1.08); 
    filter: brightness(0.9); 
}


/* --- Right Side: Content Styling --- */
.culture-content {
    flex: 1;
    max-width: 500px;
}

/* Cursive/Stylish Serif Title */
.culture-title {

    font-size: 40px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 25px;
    line-height: 1.2;
}

.culture-text-bold {
    font-size: 18px;
    font-weight: 600;
    color: #18488d;
    line-height: 1.6;
    margin-bottom: 20px;
}

.culture-description {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Button & Arrow Link Styling */
.culture-btn {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    font-weight: bold;
    color: #111;
    text-decoration: none;
    position: relative;
    padding-bottom: 4px;
}

.culture-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #111;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}

.culture-btn:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.btn-arrow {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.culture-btn:hover .btn-arrow {
    transform: translateX(6px); 
}


/* --- Responsive Media Queries --- */

@media (max-width: 992px) {
    .culture-wrapper {
        gap: 30px;
    }
    .culture-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .culture-wrapper {
        flex-direction: column; 
        gap: 40px;
    }
    
    .culture-content {
        max-width: 100%;
        text-align: left;
    }
    
    .culture-gallery {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .culture-gallery {
        gap: 10px;
    }
    .gallery-column {
        gap: 10px;
    }
    .culture-title {
        font-size: 1.75rem;
    }
}

/* Base Styles */
.career-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
}


/* Header Section */
.career-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.career-header .title {
    font-size: 40px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 10px 0;
}

.career-header.subtitle {
    color: #666;
    font-size: 1.1rem;
    margin: 0;
}

.filter-select {
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 14px;
}

/* Job Card Styling */
.job-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.job-card {
    background: #fff;
    padding: 25px 40px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border-left: 0px solid #18488d; /* Initial state */
}

/* Hover Effect: Side Border & Movement */
.job-card:hover {
    transform: translateX(8px);
    border-left: 6px solid #18488d; /* Blue color from your list */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.job-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
}

.job-meta {
    display: flex;
    gap: 25px;
    color: #777;
    font-size: 0.9rem;
}

/* Font Awesome Icon Color */
.job-meta i {
    margin-right: 6px;
    color: #18488d; /* Icons also use the blue color */
}

/* Apply Now Button */
.apply-btn {
    background-color: #000;
    color: #fff;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

/* Button Hover: Using Red and Yellow from your request */
.job-card:hover .apply-btn {
    background-color: #ed1c24; /* Red color */
    box-shadow: 0 4px 10px rgba(237, 28, 36, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .career-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .job-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 20px;
    }
    
    .job-action {
        width: 100%;
    }
    
    .apply-btn {
        width: 100%;
        display: block;
        text-align: center;
    }
}

/* General Styles */
.journey-section {
    padding: 80px 0;
    background-color: #ffffff;
    text-align: center;
}



/* Header Styling */
.journey-title {
    font-size: 40px;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
}

.journey-subtitle {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 60px;
}

/* Steps Layout */
.journey-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    gap: 20px;
}

/* Connecting Line */
.step-line {
    position: absolute;
    top: 35px; /* Centers the line with the circles */
    left: 5%;
    right: 5%;
    height: 2px;
    background-color: #e0e0e0;
    z-index: 1;
}

/* Individual Step Item */
.step-item {
    flex: 1;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.step-number {
    width: 70px;
    height: 70px;
    background-color: #18488d;
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: 0 auto 25px;
    transition: all 0.4s ease;
    border: 4px solid #fff;
}

.step-heading {
    font-size: 22px;
    font-weight: 700;
    color: #18488d;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.step-desc {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    max-width: 250px;
    margin: 0 auto;
}

/* --- Hover Effects Using Your Colors --- */

.step-item:hover {
    transform: translateY(-10px);
}

/* Step 1 Hover - Red (#ed1c24) */
.step-item:nth-child(2):hover .step-number {
    background-color: #ed1c24;
    box-shadow: 0 0 20px rgba(237, 28, 36, 0.4);
}

/* Step 2 Hover - Yellow (#ffd400) */
.step-item:nth-child(3):hover .step-number {
    background-color: #ffd400;
    color: #000; /* Dark text for better contrast on yellow */
    box-shadow: 0 0 20px rgba(255, 212, 0, 0.4);
}

/* Step 3 Hover - Blue (#18488d) */
.step-item:nth-child(4):hover .step-number {
    background-color: #000;
    box-shadow: 0 0 20px rgba(24, 72, 141, 0.4);
}

/* Step 4 Hover - Mix/Red */
.step-item:nth-child(5):hover .step-number {
    background-color: #ed1c24;
    box-shadow: 0 0 20px rgba(237, 28, 36, 0.4);
}

/* --- Responsive Media Queries --- */

@media (max-width: 992px) {
    .journey-title { font-size: 30px }
}

@media (max-width: 768px) {
    .journey-steps {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    
    .step-line {
        display: none; /* Hide horizontal line on mobile */
    }
    
    .step-item {
        width: 100%;
    }

    .step-desc {
        max-width: 100%;
    }
}

.apply-section {
    padding: 80px 20px;
    background-color: #f4f4f4;

}

.form-container {
    max-width: 850px;
    margin: 0 auto;
    background: #fff;
    padding: 60px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.form-header {
    text-align: center;
    margin-bottom: 40px;
}

.form-title {
    font-size: 40px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 10px;
}

.form-subtitle {
    color: #666;
    font-size: 1rem;
}

/* Form Layout */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.full-width {
    grid-column: span 2;
}

.form-container label {
    font-size: 11px;
    font-weight: 700;
    color: #333;
    letter-spacing: 0.5px;
}

.form-container input, .form-container select, .form-container textarea {
    padding: 14px 18px;
    background-color: #f0f0f0;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    transition: all 0.3s ease;
    outline: none;
}

/* Hover & Focus Effects with your colors */
.form-container input:hover, .form-container select:hover, .form-container textarea:hover {
    background-color: #e8e8e8;
}

.form-container input:focus, .form-container select:focus, .form-container textarea:focus {
    background-color: #fff;
    border-color: #18488d; /* Blue color */
    box-shadow: 0 0 8px rgba(24, 72, 141, 0.1);
}

/* File Upload Box */
.file-upload-box {
    border: 2px dashed #ccc;
    padding: 40px;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.file-upload-box:hover {
    border-color: #ffd400; /* Yellow color */
    background-color: #fffef0;
}

.upload-icon {
    font-size: 30px;
    color: #666;
    margin-bottom: 15px;
}

.file-label {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    text-decoration: underline;
    cursor: pointer;
}

.file-label:hover {
    color: #ed1c24; /* Red color */
}

/* Submit Button */
.submit-btn {
    width: 100%;
    padding: 18px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    background-color: #ed1c24; /* Red color */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(237, 28, 36, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .form-container {
        padding: 30px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .full-width {
        grid-column: span 1;
    }
    
    .form-title {
        font-size: 1.6rem;
    }
}
.team-say-section {
    padding: 80px 0;
    background-color: #fcfcfc;
    text-align: center;
}


.section-title {
    font-size: 40px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 50px;
}

/* Card Styling */
.testimonial-card {
    background: transparent;
    padding: 20px 40px;
    text-align: left;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: 0.5s ease;
}
.user-img img{width: 50px;height: 50px;border-radius: 50%;object-fit: cover;}
/* Vertical Border Line */
.quote-border {
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 4px;
    background-color: #18488d; 
    transition: background-color 0.3s ease;
    
}

.testimonial-card:hover .quote-border {
    background-color: #ed1c24;
    transition: 0.5s ease;
}

.testimonial-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 25px;
}

/* User Info */
.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #18488d;
    margin: 0;
}

.user-role {
    font-size: 0.85rem;
    color: #777;
    margin: 0;
}

/* --- Swiper Custom Pagination (Image 41a794 style) --- */
.team-swiper {
    padding-bottom: 60px !important;
}

.team-pagination.swiper-pagination-bullets {
    bottom: 0 !important;
}

.team-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: #ccc;
    opacity: 1;
    transition: all 0.3s ease;
}

.team-pagination .swiper-pagination-bullet-active {
    width: 30px; /* Long active bullet as per image_41a794 */
    border-radius: 5px;
    background: #18488d !important; /* Blue color */
}

/* Responsive */
@media (max-width: 768px) {
    .section-title { font-size: 2rem; }
    .testimonial-card { padding: 20px 25px; }
}
.counter-section {
    padding: 60px 0;
    background-color: #f9f9f9;

}

.counter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.counter-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: default;
}

.counter-number {
    font-size: 40px;
    color: #18488d;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.counter-label {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.4;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hover Effects with your colors */
.counter-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.counter-card:nth-child(1):hover { border-color: #18488d; }
.counter-card:nth-child(1):hover .counter-number { color: #18488d; }

.counter-card:nth-child(2):hover { border-color: #ffd400; }
.counter-card:nth-child(2):hover .counter-number { color: #ffd400; }

.counter-card:nth-child(3):hover { border-color: #ed1c24; }
.counter-card:nth-child(3):hover .counter-number { color: #ed1c24; }

.counter-card:nth-child(4):hover { border-color: #18488d; }
.counter-card:nth-child(4):hover .counter-number { color: #18488d; }

/* Responsive */
@media (max-width: 992px) {
    .counter-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .counter-grid {
        grid-template-columns: 1fr;
    }
    .counter-number {
        font-size: 2rem;
    }
}
/* Base Layout Setup */
.export-features-section {
    padding: 80px;
    background-color: #ffffff;
}

/* Header Styling */
.export-header {
    text-align: center;
    margin: 0 0 55px 0;
}

.export-title {
    font-size: 50px;
    color: #000;
    margin-bottom: 15px;
    line-height: 1.2;
}

.export-subtitle {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

/* Grid Layout */
.export-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Individual Card Styling */
.export-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 35px;
    text-align: left;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    top: 0;
}

/* Icon Styling */
.icon-box {
    font-size: 38px;
    color: #222;
    margin-bottom: 25px;
    transition: color 0.3s ease;
}

.export-card .card-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #18488d;
    margin-bottom: 15px;
    position: static;
}

.export-card .card-desc {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0;
}

.export-card:hover {
    top: -8px; 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.export-card.feature-blue:hover {
    border-color: #18488d;
}
.export-card.feature-blue:hover .icon-box {
    color: #18488d;
}

.export-card.feature-yellow:hover {
    border-color: #ffd400;
}
.export-card.feature-yellow:hover .icon-box {
    color: #ffd400;
}

.export-card.feature-red:hover {
    border-color: #ed1c24;
}
.export-card.feature-red:hover .icon-box {
    color: #ed1c24;
}


@media (max-width: 992px) {
    .export-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
    .export-title {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .export-features-section {
        padding: 50px 15px;
    }
    .export-grid {
        grid-template-columns: 1fr; 
    }
    .export-card {
        padding: 35px 25px;
    }
}
/* Base Section Setup */
.export-journey-section {
    padding: 80px 20px;
    background-color: #f9f9f9;

}


/* Header Styling */
.journey-header {
    text-align: center;
    margin: 0 0 60px;
}

.journey-title {
    font-size: 40px;
    color: #000;
    margin-bottom: 12px;
}

.journey-subtitle {
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
}

/* Timeline Wrapper */
.timeline-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 40px 0;
}

/* Center Vertical Line */
.main-timeline-line {
    position: absolute;
    width: 2px;
    background-color: #e2e8f0;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

/* Individual Timeline Item Block */
.timeline-item {
    display: flex;
    position: relative;
    margin-bottom: 50px;
    width: 50%;
    z-index: 2;
}

/* Alignment logic for Left and Right items */
.timeline-item.left-item {
    left: 0;
    justify-content: flex-end;
    padding-right: 45px;
    text-align: right;
}

.timeline-item.right-item {
    left: 50%;
    justify-content: flex-start;
    padding-left: 45px;
    text-align: left;
}

/* Center Dots styling */
.timeline-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #000;
    top: 35px; /* Aligns dot with the top text layout of card */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.timeline-item.left-item .timeline-dot {
    right: -6px; /* Positioned precisely on the center line */
}

.timeline-item.right-item .timeline-dot {
    left: -6px;
}

/* Timeline Card */
.timeline-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px 35px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.timeline-year {
    font-size: 0.9rem;
    font-weight: 700;
    color: #a0aec0;
    display: block;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.card-heading {
    font-size: 1.3rem;
    font-weight: 700;
    color: #18488d;
    margin-bottom: 12px;
}

.card-text {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

/* --- Color Based Hover Effects --- */

.timeline-item:hover .timeline-card {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08);
}

/* Blue Item Hover (#18488d) */
.item-blue:hover .timeline-card { border-color: #18488d; }
.item-blue:hover .timeline-dot { background-color: #18488d; border-color: #18488d; scale: 1.3; }
.item-blue:hover .timeline-year { color: #18488d; }

/* Yellow Item Hover (#ffd400) */
.item-yellow:hover .timeline-card { border-color: #ffd400; }
.item-yellow:hover .timeline-dot { background-color: #ffd400; border-color: #ffd400; scale: 1.3; }
.item-yellow:hover .timeline-year { color: #ffd400; }

/* Red Item Hover (#ed1c24) */
.item-red:hover .timeline-card { border-color: #ed1c24; }
.item-red:hover .timeline-dot { background-color: #ed1c24; border-color: #ed1c24; scale: 1.3; }
.item-red:hover .timeline-year { color: #ed1c24; }


/* --- Responsive Media Queries --- */

@media (max-width: 768px) {
    .journey-title {
        font-size: 30px;
    }
    
    /* Move Vertical Line to Left on mobile screen */
    .main-timeline-line {
        left: 20px;
    }

    .timeline-item {
        width: 100%;
        margin-bottom: 35px;
    }

    .timeline-item.left-item, 
    .timeline-item.right-item {
        left: 0;
        padding-left: 45px;
        padding-right: 0;
        justify-content: flex-start;
        text-align: left;
    }

    /* Reposition all dots to align with the left line */
    .timeline-item.left-item .timeline-dot,
    .timeline-item.right-item .timeline-dot {
        left: 14px;
        right: auto;
    }
    
    .timeline-card {
        max-width: 100%;
    }
}

/* Base Resets & Global Styles */
.product-range-section {
    padding: 80px 20px;
    background-color: #f9f9f9;
}

/* Header Styling */
.range-header {
    text-align: center;
    margin-bottom: 70px;
}

.range-main-title {
    font-size: 40px;
    color: #222222;
    margin-bottom: 12px;
}

.range-main-subtitle {
    font-size: 1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Master Row Layout */
.product-row {
    display: flex;
    gap: 40px;
    margin-bottom: 100px;
    align-items: stretch;
}

.row-normal {
    flex-direction: row;
}

.row-reverse {
    flex-direction: row-reverse;
}

.product-left-content {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.cream-cheese-item .product-left-content {
    justify-content: center;
}
/* Large Banner Container */
.product-right-banner {
    flex: 1;
    min-height: 550px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Banner Text Overlay */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%);
    display: flex;
    align-items: flex-end;
    padding: 40px;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    transition: background-color 0.4s ease;
}

/* Category Grid Setup */
.category-info {
    margin-bottom: 30px;
}

.category-title {
    font-family: 'Sansita Swashed', cursive;
    font-size: 1.8rem;
    color: #18488d;
    margin-bottom: 15px;
}

.category-desc {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    max-width: 520px;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 35px;
}
.cheesy-dips-ideal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 35px;
}

/* Small Card Image Box */
.product-small-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eaeaea;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.product-small-card .img-box {
    height: 160px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    position: relative;
    background-color: #eee;
}

.product-small-card .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.4s ease;
}

.card-details {
    padding: 20px;
    background: #ffffff;
}

.card-details h4 {
    font-size: 22px;
    font-weight: 700;
    color: #18488d;
    margin-bottom: 6px;
}

.card-details p {
    font-size: 0.85rem;
    color: #777;
    margin: 0;
}

/* Pill Shape Buttons */
.explore-btn {
    display: inline-block;
    align-self: flex-start;
    padding: 14px 35px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 0.5px;
    background: transparent;
    border: 2px solid #000;
    color: #000;
    transition: all 0.3s ease;
}

/* --- Hover Effects with Your Requested Colors --- */

.product-small-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

.product-small-card:hover img {
    transform: scale(1.08);
}

/* Row 1 (Liquid Cheese) Hover -> Blue (#18488d) */
.row-normal:first-of-type .product-small-card:hover { border-color: #18488d; }
.banner-blue:hover .banner-overlay { background-color: rgba(24, 72, 141, 0.4); } /* Blue transparent overlay */
.banner-blue:hover .banner-img { transform: scale(1.05); }
.btn-blue:hover { background-color: #18488d; border-color: #18488d; color: #fff; }

/* Row 2 (Breaded Cheese) Hover -> Yellow (#ffd400) */
.row-reverse .product-small-card:hover { border-color: #ffd400; }
.banner-yellow:hover .banner-overlay { background-color: rgba(255, 212, 0, 0.3); color: #000; } /* Yellow transparent overlay */
.banner-yellow:hover .banner-img { transform: scale(1.05); }
.btn-yellow:hover { background-color: #ffd400; border-color: #ffd400; color: #000; }

/* Row 3 (Cream Cheese) Hover -> Red (#ed1c24) */
.product-row:last-child .product-small-card:hover { border-color: #ed1c24; }
.banner-red:hover .banner-overlay { background-color: rgba(237, 28, 36, 0.4); } /* Red transparent overlay */
.banner-red:hover .banner-img { transform: scale(1.05); }
.btn-red:hover { background-color: #ed1c24; border-color: #ed1c24; color: #fff; }

.cta-buttons-block {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    justify-content: center;
}
.cta-request{background-color: transparent; border: 1px solid #fff; color: #fff;}
.cta-request:hover{ border: 1px solid #ffd400;}
.product-row:last-child{margin-bottom: 0;}
/* --- Responsive Engineering --- */

@media (max-width: 992px) {
    .product-row { gap: 30px; }
    .range-main-title { font-size: 2.2rem; }
}

@media (max-width: 768px) {
    .product-row, .row-reverse {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 60px;
    }
    
    .product-right-banner {
        min-height: 350px;
        order: -1; /* Banner goes on top of grid on mobile */
    }
    
    .explore-btn {
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }
}

@media (max-width: 480px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
}


.product-detailes-section{padding: 60px 0 20px 0; background-color: #f9f9f9;}
.technical-block-section{padding: 60px 0; background-color: #ffffff;}
.product-essential img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Product Layout --- */
.product-essential { 
    display: flex; 
    gap: 50px; 
    margin-bottom: 60px; 
    flex-wrap: wrap; 
}

.product-essential .product-gallery { 
    flex: 1; 
    min-width: 320px; 
}

.main-image { 
    aspect-ratio: 1/1; 
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 15px; 
    background: #ccc;
    height: 514px;
    width: 100%;
}

.thumbnail-grid { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 10px; 
}

.product-essential .thumb { 
    aspect-ratio: 1/1; 
    cursor: pointer; 
    border-radius: 6px; 
    overflow: hidden; 
    border: 2px solid transparent; 
    position: relative;
    background: #ccc;
}

.product-essential .thumb.active { 
    border-color: #18488d; 
}

/* Zoom Hover Overlay Effect */
.product-essential .thumb.zoom-hover img {
    filter: brightness(0.7);
}
.zoom-overlay, .video-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.2rem;
}
.product-essential .thumb.zoom-hover .zoom-overlay {
    background: rgba(237, 28, 36, 0.85); /* #ed1c24 opacityসহ */
}

/* --- Product Info Content --- */
.product-info { 
    flex: 1; 
    min-width: 320px; 
}

.product-essential .product-title { 
    font-size: 2.8rem; 
    color: #18488d; 
    margin-bottom: 15px; 
}

.product-essential .product-desc-main { 
    color: #555; 
    line-height: 1.6; 
    margin-bottom: 30px; 
    font-size: 1.05rem;
}

/* Optimized For Section */
.optimized-section h3 {
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 15px;
}
.opt-icons { 
    display: flex; 
    gap: 25px; 
    border-bottom: 1px solid #e2e8f0; 
    padding-bottom: 25px; 
    margin-bottom: 25px; 
}
.opt-item { 
    text-align: center; 
    font-size: 0.75rem; 
    font-weight: bold; 
    color: #666; 
}
.product-essential .icon-box { 
    width: 42px; 
    height: 42px; 
    border-radius: 50%; 
    background: #e9eff6; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.1rem; 
    color: #18488d;
    margin-bottom: 8px; 
    transition: 0.3s ease; 
}
.opt-item.active .icon-box, .opt-item:hover .icon-box { 
    background: #ed1c24; 
    color: #fff; 
}
.opt-item.active span, .opt-item:hover span { 
    color: #ed1c24; 
}

/* Meta Labels & Values */
.meta-row { 
    display: flex; 
    gap: 50px; 
    border-bottom: 1px solid #e2e8f0; 
    padding-bottom: 25px; 
    margin-bottom: 35px; 
}
.meta-col small {
    font-size: 0.75rem;
    color: #999;
    letter-spacing: 0.5px;
}
.meta-col p { 
    font-weight: 600; 
    font-size: 1.1rem;
    color: #18488d; 
    margin-top: 5px; 
}

/* Inquire / Download CTA Buttons */
.action-buttons { 
    display: flex; 
    align-items: center; 
    gap: 25px; 
}
.btn-inquire { 
    background: linear-gradient(to right, #18488d 75%, #ed1c24); 
    color: white; 
    border: none; 
    padding: 14px 40px; 
    border-radius: 6px; 
    font-weight: 600; 
    font-size: 1rem;
    cursor: pointer; 
    transition: 0.3s;
}
.btn-inquire:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(237, 28, 36, 0.25);
}
.btn-download { 
    color: #ed1c24; 
    text-decoration: none; 
    font-weight: 700; 
    font-size: 0.9rem; 
    letter-spacing: 0.5px;
}
.btn-download:hover {
    color: #18488d;
}

/* --- Technical Details & Accordion --- */
.technical-row { 
    display: flex; 
    gap: 50px; 
    margin-bottom: 70px; 
    flex-wrap: wrap; 
}
.tech-content { 
    flex: 1; 
}
.tech-content h2 {
    font-size: 40px;
    margin-bottom: 15px;
    color: #222222;
}
.tech-content p {
    color: #555;
    line-height: 1.6;
    font-size: 0.95rem;
}
.accordion-list { 
    flex: 1.9; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}
.acc-item { 
    background: white; 
    border: 1px solid #e2e8f0; 
    border-radius: 6px; 
    overflow: hidden; 
}
.acc-header { 
    padding: 16px 20px; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    font-weight: 500; 
    color: #18488d;
    font-size: 20px;
}
.acc-header i {
    color: #18488d;
    transition: 0.3s;
}
.acc-body { 
    padding: 0 20px; 
    max-height: 0; 
    overflow: hidden; 
    transition: all 0.3s ease-out; 
}
.acc-body p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
}
.acc-item.active .acc-body { 
    padding: 0 20px 20px 20px; 
    max-height: 150px; 
}
.acc-item.active .acc-header i { 
    color: #ffd400; 
}

/* --- Applications Slider --- */
.apps-section {
    margin-bottom: 40px;
}
.apps-title { 
    text-align: center; 
    font-size: 2.4rem; 
    color: #222222; 
    margin-bottom: 35px; 
}
.appsSlider {
    padding: 10px 10px 45px 10px !important;
}
.app-card { 
    background: white; 
    border-radius: 12px; 
    overflow: hidden; 
    transition: 0.3s ease; 
    height: 100%; 
    border: 2px solid #18488d;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.card-img { 
    background: #ccc; 
    aspect-ratio: 4/3; 
    overflow: hidden;
}
.card-text { 
    padding: 20px; 
}
.card-text h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.card-text p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
}

/* Exact Highlighted State for Pasta Card / Hover Effect */
.app-card:hover { 
    border-color: #ed1c24; 
    box-shadow: 0 12px 25px rgba(24, 72, 141, 0.15); 
    transform: translateY(-4px);
}
.app-card:hover h3 { 
    color: #ffd400; 
}

/* Swiper Pagination Bullet */
.swiper-pagination-bullet-active { 
    background: #18488d !important; 
}



/* --- Responsive Layout Breakpoints --- */
@media (max-width: 992px) {
    .product-essential, .technical-row { 
        flex-direction: column; 
        gap: 30px;
    }
}
@media (max-width: 576px) {
    .product-essential .product-title { font-size: 2.2rem; }
    .action-buttons { flex-direction: column; align-items: flex-start; gap: 15px; }
    .btn-inquire { width: 100%; text-align: center; }
}

.stats {
    background-color: #f9f9f9;
    padding: 60px 0;
}

/* Section Wrapper */
.foodservice-section {
    padding: 80px 20px;
   
}

.foodservice-container {
    display: grid;
    grid-template-columns: 1.1fr 1.2fr;
    gap: 50px;
    align-items: center;
    width: 100%;
}

/* --- Left Side Content --- */
.content-box {
    padding-right: 20px;
}

.main-title {
    font-size: 40px;
    color: #222222;
    line-height: 1.3;
    margin-bottom: 25px;
    font-weight: 700;
}

.desc-text {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.7;
}

/* --- Right Side 4 Boxes Grid --- */
.grid-box-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Card Flipping & Hover Setup */
.service-card {
    background-color: transparent;
    width: 100%;
    height: 180px; 
    perspective: 1000px; 
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}


.service-card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Front View: Default State (White Background) */
.card-front {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #555;
}

.icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px dashed #cccccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #1a2b4c;
    margin-bottom: 15px;
}

.foodservice-container .card-front h3 {
    font-size: 26px;
    font-weight: 600;
    color: #18488d;
}


.card-back {
    background-color: #ffd400; 
    border: 1px solid #ffd400;
    color: #ed1c24; 
    transform: rotateY(180deg);
}

.card-back p {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Responsive Layout Media Queries --- */

@media (max-width: 992px) {
    .foodservice-container {
        grid-template-columns: 1fr; 
        gap: 40px;
    }
    
    .content-box {
        padding-right: 0;
        text-align: center;
    }
    
    .main-title {
        font-size: 30px;
    }
}


@media (max-width: 576px) {
   
    .main-title {
        font-size: 1.8rem;
    }

    .grid-box-container {
        grid-template-columns: 1fr; 
    }

    .service-card {
        height: 160px;
    }
}

/* Custom Container */

.display-title {
    text-align: center;
    font-size: 40px;
    color: #222222;
    margin-bottom: 50px;
    font-weight: 700;
}

/* --- Services Grid --- */
.milkana-services-area {
    padding: 80px 0;
    background-color: #fafafa;
}

.services-grid-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.service-info-card {
    background: #fff;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.service-icon-wrap {
    width: 50px;
    height: 50px;
    background: #f0f4f8;
    color: #18488d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: 8px;
    margin-bottom: 20px;
    transition: 0.3s;
}

.service-card-heading {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #18488d;
}

.service-card-text {
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Services Hover */
.service-info-card:hover {
    transform: translateY(-5px);
    border-color: #ffd400;
    box-shadow: 0 10px 25px rgba(24, 72, 141, 0.1);
}

.service-info-card:hover .service-icon-wrap {
    background: #18488d;
    color: #fff;
}

/* --- Timeline History --- */
.milkana-history-track {
    padding: 80px 0;
    overflow: hidden;
}

.history-main-line {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.vertical-divider {
    position: absolute;
    width: 2px;
    background: #18488d;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.history-step {
    position: relative;
    width: 50%;
    padding: 20px 40px;
}

.step-left { left: 0; text-align: right; }
.step-right { left: 50%; text-align: left; }

.step-marker-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    background: #555;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 25px;
    z-index: 2;
    transition: 0.3s;
}

.step-left .step-marker-icon { right: -20px; }
.step-right .step-marker-icon { left: -20px; }

.step-details-box {
    background: #18488d;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.step-title { font-size: 1.2rem; color: #fff; margin-bottom: 10px; }
.step-details-box .step-desc { font-size: 0.9rem; max-width: 100%; width: 100%; color: #fff; line-height: 1.5; margin: 0; }

/* Status Highlights */
.step-status-active .step-marker-icon { background: #18488d; }
.status-highlight { border: 2px solid #18488d; }

/* Hover Effects */
.history-step:hover .step-marker-icon {
    background: #ffd400;
    color: #18488d;
    transform: scale(1.2);
}
.history-step:hover .step-details-box {
    background: #ffd400;
    color: #18488d;
    transform: scale(1.1);
}
.history-step:hover .step-title {  color: #ed1c24; }
.history-step:hover .step-details-box .step-desc {  color: #ed1c24; }
.step-status-active:hover .step-marker-icon {
    background: #ed1c24;
    color: #fff;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .services-grid-layout { grid-template-columns: 1fr; }
    
    .vertical-divider { left: 20px; }
    .history-step { width: 100%; text-align: left !important; padding-left: 60px; }
    .step-right { left: 0; }
    .step-left .step-marker-icon, .step-right .step-marker-icon { left: 0; }
    .display-title { font-size: 2rem; }
}

.presence-section {
  width: 100%;
  padding: 80px 0;
  background-color: #f9f9f9;
}

.presence-container {

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}

/* Left Content Column */
.presence-content {
  flex: 1;
}

.presence-heading {
  font-weight: 700;
  font-size: 40px;
  color: #222222;
  margin-bottom: 20px;
  line-height: 1.2;
}

.presence-description {
  font-size: 1.05rem;
  color: #444444;
  line-height: 1.6;
  margin-bottom: 40px;
  font-weight: 400;
}

/* Feature List Styling */
.presence-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.presence-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Light gray rounded borders around the icons */
.presence-item .icon-box {
  background-color: #ffd400;
  border-radius: 12px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ed1c24;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  margin-bottom: 0;
}

.presence-item .icon-box svg {
  width: 20px;
  height: 20px;
}

.item-text {
  font-size: 1.1rem;
  font-weight: 500;
  color: #222222;
}

/* Right Map Container */
.presence-map-wrapper {
  flex: 1;
  justify-content: flex-end;
    display: flex;
}

.presence-map-img {
  max-width: 100%;
  height: auto;
  object-fit: contain;

}

/* Responsive Overrides */
@media (max-width: 992px) {
  .presence-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
  }

  .presence-map-wrapper {
    width: 100%;
    justify-content: center;
  }

  .presence-map-img {
    border-left: none;
    padding-left: 0;
    max-height: 500px;
  }
}

@media (max-width: 576px) {
  .presence-section {
    padding: 60px 4%;
  }
}
/* Section Colors: #ed1c24 (Red), #ffd400 (Yellow), #18488d (Blue) */

.csr-impact-section {
    padding: 80px 0;
    background-color: #ffffff;
    overflow: hidden;
}

.csr-container {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

/* Left Content Styling */
.csr-intro-content {
    flex: 1;
    min-width: 350px;
}

.csr-main-title {
    font-size: 40px;
    color: #222122;
    line-height: 1.2;
    margin-bottom: 25px;
}

.csr-description {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 35px;
}

.csr-explore-btn {
    background-color: #000;
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.csr-explore-btn:hover {
    background-color: #18488d;
}

/* Right Grid Styling */
.csr-cards-grid {
    flex: 1.2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Flip Card Core */
.csr-flip-card {
    background-color: transparent;
    height: 250px;
    perspective: 1000px; /* 3D effect */
}

.csr-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.csr-flip-card:hover .csr-card-inner {
    transform: rotateY(180deg);
}

.csr-card-front, .csr-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Front View Styling */
.csr-card-front {
    background-color: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
}

.csr-icon-wrapper {
    width: 45px;
    height: 45px;
    background-color: #e9eff6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #18488d;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.csr-category {
    font-size: 0.75rem;
    font-weight: bold;
    color: #777;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.csr-card-front h3 {
    font-size: 1.4rem;
    color: #18488d;
    margin-bottom: 10px;
}

.csr-card-front p {
    font-size: 0.9rem;
    color: #666;
}

/* Back View Styling (Yellow Theme from image_57bd64.png) */
.csr-card-back {
    background-color: #ffd400;
    color: #ed1c24; /* Red text on Yellow bg */
    transform: rotateY(180deg);
    text-align: center;
    font-weight: bold;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .csr-container {
        flex-direction: column;
        text-align: center;
    }
    .csr-main-title { font-size: 2.5rem; }
    .csr-intro-content { padding-right: 0; }
}

@media (max-width: 600px) {
    .csr-cards-grid {
        grid-template-columns: 1fr;
    }
    .csr-flip-card { height: 220px; }
}
/* .gsap-fade-up, .gsap-scale-pop { opacity: 0; visibility: hidden; } */

/* ---- Grid Layout ---- */
.industries-section{padding: 80px 0; background-color: #f9f9f9;}
.industries-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* ---- Card Styles ---- */
.industry-card {
    background-color: #ffffff;
    border: 1px solid #e4e4e4;
    padding: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 320px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
}

/* Top Border Hover Setup */
.industry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

/* Card Number */
.card-number {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 0.9rem;
    color: #999;
    font-weight: 600;
}

/* Icon */
.card-icon {
    font-size: 2rem;
    color: #333;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

/* Headings */
.card-heading {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #18488d;
}

/* Features List */
.card-features {
    list-style: none;
    margin-bottom: 20px;
    flex-grow: 1;
}

.card-features li {
    font-size: 1rem;
    color: #666;
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px;
}

.card-features li::before {
    content: '■';
    position: absolute;
    left: 0;
    font-size: 0.7rem;
    top: 2px;
    color: #888;
}

/* View More Link */
.card-features .view-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    color: #333;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.card-features .view-more i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}


/* ---- Dynamic Hover Effects & Colors ---- */

/* Card 1 & 4 Hover: Red (#ed1c24) */
.card-bapa::before, .card-oem::before {
    background-color: #ed1c24;
}
.card-bapa:hover .card-icon, .card-oem:hover .card-icon,
.card-bapa:hover .view-more, .card-oem:hover .view-more {
    color: #ed1c24;
}

/* Card 2 Hover: Blue (#18488d) */
.card-qsr::before {
    background-color: #18488d;
}
.card-qsr:hover .card-icon, .card-qsr:hover .view-more {
    color: #18488d;
}

/* Card 3 Hover: Yellow/Gold (#ffd400) */
.card-horeca::before {
    background-color: #ffd400;
}
/* Yellow এর ওপর টেক্সট ক্লিয়ার রাখার জন্য একটু ডার্ক টোন বা বর্ডার ইফেক্ট */
.card-horeca:hover .card-icon, .card-horeca:hover .view-more {
    color: #d4b000; 
}

/* Global Hover Triggers */
.industry-card:hover {
    border-color: transparent;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

.industry-card:hover::before {
    transform: scaleX(1);
}

.industry-card:hover .view-more i {
    transform: translateX(5px);
}


/* ---- Responsive Breakpoints ---- */

/* Tablets & Smaller Desktops */
@media (max-width: 992px) {
    .industry-card {
        padding: 30px;
    }
    .card-heading {
        font-size: 1.4rem;
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
   
    .industries-grid {
        grid-template-columns: 1fr; /* Single column layout for mobile */
        gap: 20px;
    }
    .industry-card {
        min-height: auto;
    }
}


/* Swiper Slide Styling */
.logo-slider-section {
    padding: 80px 0;
    background-color: #ffffff;
}
.clint-logo-slider .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}

.clint-logo-slider .swiper-slide img {
    max-width: 140px;
    height: auto;
    transition: all 0.3s ease;
}
/* .clint-logo-slider .swiper-slide img {
    max-width: 140px;
    height: auto;
    opacity: 0.6; 
    filter: grayscale(100%); 
    transition: all 0.3s ease;
}
.clint-logo-slider .swiper-slide img:hover {
    opacity: 1;
    filter: grayscale(0%); 
}  */

/* Optional: Smooth transition for autoplay */
.clint-logo-slider .swiper-wrapper {
    transition-timing-function: linear !important;
}

.milkana-benefits-sec {
    width: 100%;
    padding: 80px 0;
    background-color: #f9f9f9;
}

.benefits-container-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* ---- Card Base Styling ---- */
.benefit-item-card {
    background-color: transparent;
    padding: 10px 10px 20px 25px;
    border-left: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Card Elements ---- */
.card-icon {
    font-size: 1.5rem;
    color: #000000;
    transition: color 0.3s ease, transform 0.3s ease;
}

.benefit-item-heading {
    font-size: 1.6rem;
    font-weight: 600;
    color: #18488d;
    letter-spacing: -0.5px;
    transition: color 0.3s ease;
}

.benefit-item-paragraph {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555555;
    font-weight: 400;
}

/* ---- Dynamic Hover & Color Mapping ---- */

/* Card 1: Red (#ed1c24) */
.benefit-item-card.color-red:hover {
    border-left: 2px solid #ed1c24;
}
.benefit-item-card.color-red:hover .card-icon,
.benefit-item-card.color-red:hover .benefit-item-heading {
    color: #ed1c24;
}

/* Card 2: Blue (#18488d) */
.benefit-item-card.color-blue:hover {
    border-left: 2px solid #18488d;
}
.benefit-item-card.color-blue:hover .card-icon,
.benefit-item-card.color-blue:hover .benefit-item-heading {
    color: #18488d;
}

/* Card 3: Yellow (#ffd400) */
.benefit-item-card.color-yellow:hover {
    border-left: 2px solid #ffd400;
}
.benefit-item-card.color-yellow:hover .card-icon,
.benefit-item-card.color-yellow:hover .benefit-item-heading {
    color: #d4b000; 
}

/* Card 4: Red Alternative (#ed1c24) */
.benefit-item-card.color-red-alt:hover {
    border-left: 2px solid #ed1c24;
}
.benefit-item-card.color-red-alt:hover .card-icon,
.benefit-item-card.color-red-alt:hover .benefit-item-heading {
    color: #ed1c24;
}

/* Global Card Hover Interaction */
.benefit-item-card:hover {
    transform: translateX(4px);
}
.benefit-item-card .exp-icon-box {
    margin-bottom: 0;;
}
.benefit-item-card:hover .exp-icon-box {
    color: #fff;
    background-color: #18488d;
    transform: scale(1.08);
}

/* ---- Responsive Breakpoints ---- */

/* Large Tablets & Small Desktops */
@media (max-width: 1024px) {
    .benefits-container-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 30px;
    }
    .benefit-item-heading {
        font-size: 1.6rem;
    }
}

/* Mobile Devices */
@media (max-width: 600px) {
    .benefits-container-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .benefit-item-card {
        padding: 5px 10px 15px 20px;
    }
}

/* ---- Section Header ---- */
.recipes-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
    border-bottom: 1px solid #222;
    padding-bottom: 25px;
}

.recipes-subtitle {
    font-size: 0.75rem;
    color: #888888;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.recipes-main-heading {
    font-size: 2.8rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -1px;
}

.browse-all-link {
    color: #18488d;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.3s ease;
    padding-bottom: 5px;
}

.browse-all-link i {
    font-size: 0.75rem;
    color: #18488d;
}



/* ---- Grid Layout ---- */
.milkana-recipes-sec {
    padding: 80px 0;
    background-color: #ffffff;
}
.recipes-container-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* ---- Card Base Styling ---- */
.recipe-item-card {
    background-color: #111111;
    border: 1px solid #2a2a2a;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 0.4s ease, transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Image Wrapper with Zoom Setup */
.recipe-image-holder {
    width: 100%;
    height: 260px;
    background-color: #333;
    overflow: hidden; /* Ensures image zoom stays inside card limits */
    position: relative;
}

.recipe-image-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease; /* Smooth image zoom transition */
}

/* Card Body Content */
.recipe-content-box {
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Tag Box */
.recipe-tag {
    align-self: flex-start;
    font-size: 0.65rem;
    color: #888888;
    border: 1px solid #444444;
    padding: 4px 8px;
    letter-spacing: 1px;
    margin-bottom: 25px;
    font-weight: 500;
}

.recipe-heading {
    font-size: 1.6rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 20px;
}

.recipe-paragraph {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #8c8c8c;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* Action Button/Link */
.recipe-action-btn {
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
    margin-top: auto;
}

.recipe-action-btn i {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.recipe-content-box .view-link{color: #fff;}
.recipe-item-card:hover .recipe-content-box .view-link {
    color: #ed1c24;
}
.recipe-content-box .view-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background-color: #fff;
    transition: width 0.3s ease, background-color 0.3s ease;
}
.recipe-item-card:hover .recipe-content-box .view-link::after {
    width: 100%;
    background-color: #ed1c24;
}
.recipe-item-card:hover .recipe-tag{background-color: #ffd400; transition: width 0.3s ease, background-color 0.3s ease; border-color: #ed1c24; color: #ed1c24;}
/* ---- Dynamic Hover & Color Mapping ---- */

/* Card 1: Red Theme (#ed1c24) */
.recipe-item-card.theme-red:hover {
    border-color: #ed1c24;
}
.recipe-item-card.theme-red:hover .recipe-action-btn {
    color: #ed1c24;
}

/* Card 2: Blue Theme (#18488d) */
.recipe-item-card.theme-blue:hover {
    border-color: #18488d;
}
.recipe-item-card.theme-blue:hover .recipe-action-btn {
    color: #18488d;
}

/* Card 3: Yellow Theme (#ffd400) */
.recipe-item-card.theme-yellow:hover {
    border-color: #ffd400;
}
.recipe-item-card.theme-yellow:hover .recipe-action-btn {
    color: #ffd400;
}

/* Global Card Hover Interaction */
.recipe-item-card:hover {
    transform: translateY(-5px);
}

.recipe-item-card:hover .recipe-image-holder img {
    transform: scale(1.06); /* Adds a subtle image scale on hover */
}

.recipe-item-card:hover .recipe-action-btn i {
    transform: translateX(4px);
}
.recipes-header .main-title{
    margin-bottom: 0;
}

/* ---- Responsive Breakpoints ---- */

/* Tablets & Small Laptops */
@media (max-width: 992px) {
    .recipes-container-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    .recipes-main-heading {
        font-size: 2.3rem;
    }
}

/* Mobile Devices */
@media (max-width: 650px) {
    .recipes-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .recipes-container-grid {
        grid-template-columns: 1fr;
    }
    .recipe-image-holder {
        height: 220px;
    }
    .recipe-content-box {
        padding: 25px 20px;
    }
    .recipe-heading {
        font-size: 1.5rem;
    }
}

/* ==========================================
   UPPER SECTION: WHY CHOOSE US
   ========================================== */
.milkana-choose-sec {
    background-color: #ffffff;
    padding: 20px 0 80px 0;
    text-align: center;
}

.choose-header {
    margin-bottom: 50px;
}

.choose-main-heading {
    font-size: 2.6rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.choose-subtext {
    font-size: 1.05rem;
    color: #666666;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Grid Layout for Cards */
.choose-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Card Styling */
.choose-card {
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    padding: 40px 25px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

/* Top Border Setup for Hover Line */
.choose-card::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.choose-card-icon {
    font-size: 1.4rem;
    color: #333333;
    transition: color 0.3s ease;
}

.choose-card-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: #111111;
}

.choose-card-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555555;
}

/* ---- Card Hover Rules with Requested Brand Colors ---- */

/* Card 1 & 4 Hover: Red (#ed1c24) */
.choose-card.theme-red::after, .choose-card.theme-red-alt::after {
    background-color: #ed1c24;
}
.choose-card.theme-red:hover .choose-card-icon, 
.choose-card.theme-red-alt:hover .choose-card-icon {
    color: #ed1c24;
}

/* Card 2 Hover: Blue (#18488d) */
.choose-card.theme-blue::after {
    background-color: #18488d;
}
.choose-card.theme-blue:hover .choose-card-icon {
    color: #18488d;
}

/* Card 3 Hover: Yellow (#ffd400) */
.choose-card.theme-yellow::after {
    background-color: #ffd400;
}
.choose-card.theme-yellow:hover .choose-card-icon {
    color: #d4b000; /* Darker yellow/gold for visible contrast */
}

/* Global Card Hover Effect */
.choose-card:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
    transform: translateY(-4px);
    border-color: #dcdcdc;
}

.choose-card:hover::after {
    transform: scaleX(1);
}


/* ==========================================
   BOTTOM SECTION: COUNTER STATS
   ========================================== */
.milkana-stats-sec {
    background-color: #e6e6e6; /* Matte Grey background like image */
    padding: 80px 0;
    text-align: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stat-icon {
    font-size: 2.2rem;
    color: #a0a0a0; /* Subtle grey icons as per template image */
    margin-bottom: 15px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.stat-number-wrapper {
    font-size: 3.5rem;
    font-weight: 700;
    color: #000000;
    line-height: 1.1;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #555555;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Stats Hover Effect */
.stat-item:hover .stat-icon {
    transform: scale(1.1);
    color: #18488d; /* Subtle dynamic interaction color on hover */
}
.choose-cards-grid .exp-icon-box{margin-bottom: 0;}
.choose-card:hover .exp-icon-box{color: #fff;
    background-color: #18488d;
    transform: scale(1.08);
}
.stat-item:hover .exp-icon-box{color: #fff;
    background-color: #18488d;
    transform: scale(1.08);
}
.exp-icon-box img{border-radius: 50%; width: 45px; height: 45px;}
/* ==========================================
   RESPONSIVE BREAKPOINTS
   ========================================== */

/* Tablet and Smaller Laptops */
@media (max-width: 1024px) {
    .choose-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    .choose-main-heading {
        font-size: 2.2rem;
    }
}

/* Mobile Devices */
@media (max-width: 600px) {
    .choose-cards-grid, .stats-grid {
        grid-template-columns: 1fr; /* Stack into 1 column on mobile */
    }
    .choose-main-heading {
        font-size: 1.8rem;
    }
    .choose-card {
        padding: 30px 20px;
    }
    .stat-number-wrapper {
        font-size: 2.8rem;
    }
}