html, body {
  max-width: 100%;
  overflow-x: hidden !important;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: manta_style;
    src: url(../fonts/MANTA\ STYLE\ SCRIPT\ DEMO.TTF);
  }
  
html{font-size: 100%;}
body{font-size: 100%;font-family: 'Montserrat', sans-serif;overflow-x: hidden;box-sizing: border-box;padding: 0;margin: 0;line-height: 1.5;}
section{position: relative;padding: 50px 0;}
h1,h2{font-size: 28px; color: #024aa3; font-weight: 700;text-transform: capitalize;}
h3,h4{font-size: 20px; color: #024aa3; font-weight: 600;text-transform: capitalize;}
h5,h6{font-size: 18px; color: #024aa3; font-weight: 500;text-transform: capitalize;}
p{color: #404040;font-size: 15px;}
a{text-decoration: none;color: #024aa3;}
.btn{background-color: #024aa3;color: #fff; padding: 5px 15px;border-radius: 50px;}
.add_to_cart_button{background-color: #024aa3 !important;color: #fff !important; padding: 12px 20px !important;border-radius: 50px !important;}
.btn:hover{background-color: #a0cf26;color: #024aa3;transition: all 0.4s;}
.img-responsive{width: 100%;height: auto;}
ul li{list-style: none;}
ul{padding-left: 0;margin-bottom: 0;}
/*ol li{*/
/*    list-style:disc;*/
/*}*/

.siteorigin-widget-tinymce ul{
    padding-left:15px;
}
.siteorigin-widget-tinymce ul li{
    list-style:disc;
}

/* header style  */
/* ================================
   GLOBAL RESET & SCROLL FIX
================================ */

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

html, body {
  width: 100%;
  height: auto;
}

body {
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;   /* horizontal scroll band */
  overflow-y: auto;     /* vertical scroll allow */
  background: #f8fafc;
}
/* ==========================================
   1. TOP BAR (DESKTOP ONLY)
   ========================================== */
/* 1. Main Top Bar Container */
/* 1. सिर्फ टॉप बार को नीला रखें */
.top-bar {
    width: 100%;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    padding: 6px 0;
    position: relative;
    z-index: 1000;
}

/* 2. लोगो और मेनू वाले हिस्से को सफ़ेद करें */
.site-header {
    background-color: #ffffff !important; /* इसे सफ़ेद रखने के लिए */
}

/* 3. टॉप बार के अंदर के बटन्स की सेटिंग */
.top-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.top-link-btn {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 13px;
    margin-right: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: 0.3s;
}

.top-link-btn:hover {
    background: #ffffff;
    color: #1e40af;
}

/* 4. Get Location Button */
.location-btn {
    background: #ffcc00;
    color: #1e40af;
    border: none;
    padding: 6px 15px;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
    animation: simple-glow 2s infinite;
}

@keyframes simple-glow {
    0% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(255, 204, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0); }
}
/* ==========================================
   2. DESKTOP STYLES (992px and larger)
   ========================================== */
/* --- 1. GENERAL HEADER STYLES --- */
.site-header { background: #fff; position: sticky; top: 0; z-index: 1000; width: 100%; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.nav-container { display: flex; align-items: center; justify-content: space-between; padding: 10px 5%; max-width: 1200px; margin: 0 auto; }

/* --- 2. LOGO SIZE FIX --- */
.logo img { height: 60px !important; width: auto !important; display: block; }

/* --- 3. DESKTOP MENU (Laptops/PC) --- */
@media (min-width: 992px) {
    .menu-toggle, .mobile-sidebar, .overlay { display: none !important; } /* Hide mobile stuff on PC */
    .desktop-menu-wrapper { display: block !important; }
    .desktop-menu-wrapper ul { display: flex; list-style: none; gap: 20px; margin: 0; padding: 0; }
    .desktop-menu-wrapper a { text-decoration: none; color: #333; font-weight: 500; font-size: 15px; }
    
    /* Sub-menu styling for PC */
    .desktop-menu-wrapper li { position: relative; }
    .desktop-menu-wrapper .sub-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); padding: 10px; min-width: 180px; }
    .desktop-menu-wrapper li:hover > .sub-menu { display: block; }
}

/* --- 4. MOBILE MENU (Phones/Tablets) --- */
@media (max-width: 991px) {
    .top-bar, .desktop-menu-wrapper { display: none !important; } /* Hide PC menu on Phone */
    
    .logo img { height: 45px !important; } /* Smaller logo on Phone */
    
    .menu-toggle { display: block !important; font-size: 28px; cursor: pointer; color: #1e40af; }
    
    /* Sidebar Position (Hidden on right) */
    .mobile-sidebar { position: fixed; top: 0; right: -300px; width: 280px; height: 100vh; background: #fff; z-index: 1001; transition: 0.4s ease; padding: 50px 20px; overflow-y: auto; }
    .mobile-sidebar.active { right: 0; } /* Slide in when active */
    
    /* Dark Overlay behind sidebar */
    .overlay.active { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; }
    
    .mobile-nav ul { list-style: none; padding: 0; }
    .mobile-nav li { border-bottom: 1px solid #eee; }
    .mobile-nav a { display: block; padding: 12px 0; text-decoration: none; color: #333; font-weight: 500; }
    
    /* Hidden sub-menus in sidebar */
    .mobile-nav .sub-menu { display: none; background: #f9f9f9; padding-left: 20px; }
}

/* Second section of home page video scroll css Start */

<style>
/* CSS Essentials */
@media (max-width: 768px) { 
    .video-card { flex: 0 0 80%; } /* इसे 70% करने से ज्यादा हिस्सा अगले कार्ड का दिखेगा */
}
.auto-video-section { padding: 40px 0; background: #fdfdfd; overflow: hidden; font-family: sans-serif; }
.section-title-wrapper h2 { text-align: center; color: #1e40af; margin-bottom: 25px; }
.video-scroll-container { display: flex; overflow-x: auto; gap: 15px; padding: 10px 20px; scrollbar-width: none; }
.video-scroll-container::-webkit-scrollbar { display: none; }
.video-card { flex: 0 0 280px; background: #fff; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); overflow: hidden; display: flex; flex-direction: column; }
.video-wrapper { width: 100%; height: 380px; background: #000; }
.video-wrapper video { width: 100%; height: 100%; object-fit: cover; }
.video-info { padding: 15px; text-align: center; }
.enquiry-btn { background: #2563eb; color: #fff; border: none; padding: 12px; width: 100%; font-weight: bold; border-radius: 6px; cursor: pointer; }

/* Popup CSS */
.popup-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:999999; display:none; backdrop-filter: blur(4px); }
.popup-box { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; padding:25px; width:90%; max-width:400px; border-radius:15px; text-align:center; }
.popup-box input, .popup-box textarea { width:100%; padding:10px; margin:8px 0; border:1px solid #ddd; border-radius:5px; box-sizing: border-box; }
.submit-btn { background:#1e40af; color:white; width:100%; padding:12px; border:none; border-radius:5px; font-weight:bold; cursor:pointer; }
.close-btn { position:absolute; top:10px; right:15px; font-size:30px; cursor:pointer; color:#999; }

@media (max-width: 768px) { .video-card { flex: 0 0 80%; } .video-wrapper { height: 420px; } }

.video-info {
    padding: 20px 15px; /* ऊपर-नीचे की पैडिंग बढ़ाई गई है */
    text-align: center;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px; /* टाइटल और बटन के बीच गैप सुनिश्चित करने के लिए */
}
</style>
/* Second section Finish */

/* home page style  */

.carousel-caption {
    position: absolute;
    right: 11%;
    bottom: 1.25rem;
    left: unset;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: left;
    top: 0;
}
.home_about p{
    text-align:justify;
}
.bold_yellow_text h2{font-size: 100px;    color: #c4da4c;    padding-left: 88px;    line-height: 1;}
.bold_yellow_text{position: relative;}
.yellow_bottle{position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
.yellow_cup{position: absolute;right: 7%;top: 90%;transform: translateY(-50%);}
.bold_yellow_text a{margin-left: 70px;}
.relative_box{position: relative;}
.pd_box{position: absolute;top: 8%;left: 50%;transform: translateX(-50%);width: 100%;}
.orangebox{background-color: #facb99;padding: 30px 25px;}
.orangebox_detail h3{font-weight: 800;color: #dc7842;font-size: 25px;margin-bottom: 0;}
.orangebox_detail{margin-top: -30px;}
.skyblue{background-color: #61bee4;padding: 12px 15px;}
.pinkbox{background-color: #f7dad7;padding: 26px 15px;}
.pinkbox_detail{margin-top: -35px;}
.pinkbox_detail h3{color: #ec698b;font-weight: 900;font-size: 25px;}
.fa{vertical-align: middle;}
.blox_box{padding: 15px;}
.owl-item{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.owl-carousel.owl-drag .owl-item{padding: 10px;}
.owl-dots{display: none;}
.owl-carousel .owl-stage{margin: 20px 0;}
.slider_arrow{font-size: 40px;color: #9ac134;}
.owl-next{position: absolute;top: 50%;right: -20px;transform: translateY(-50%);}
.owl-prev{position: absolute;top: 50%;left: -20px;transform: translateY(-50%);}
.btn-check:focus+.btn, .btn:focus{box-shadow: none !important;}
.woocommerce a.added_to_cart {
    /* padding-top: 0.5em; */
    display: inline-block;
    background: #024aa3;
    color: #fff;
    padding: 5px 10px;
    border-radius: 50px;
    margin-left: 5px;
    font-weight: 500;
}
a.added_to_cart.wc-forward {
    display: inline-block;
    background: #024aa3;
    color: #fff;
    padding: 5px 10px;
    border-radius: 50px;
    margin-left: 5px;
    font-weight: 500;
}
.curds_caption{
    right:20%;
}
.iso_logo{
    background-color:#F0F0F0;
    padding:20px;
    text-align:center;
}

/* footer style  */

.footer_bg{background-color: #024aa3;}
.social_links a{color: #fff;margin: 10px;font-size: 25px;}
.f_menu ul li a{text-transform: uppercase;color: #fff;}
/* .f_menu ul li{padding: 5px 0;} */
.f_menu h3{color: #33a4dc; text-transform: uppercase;}
.copyright p{color: #535353;font-weight: 500;}


/* about us page style  */
.bluebigtext{font-size: 62px;color: #33a4dc;}
.sow-headline{color: #33a4dc;}
.blueheading h2{color: #024aa3;}
.decoration{display: none;}
/* product page style  */
.product_caption{
    position: absolute;
    right:unset;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: left;
    top: 4%;
}
.product_caption h1{color: #9ac134;text-align: center;}
.product_top_heading h2{
    font-family: 'Mukta', sans-serif;
    text-transform: uppercase;
}
.porduct_item  {
    box-shadow: none !important;
    background-color: #f0f0f0 !important;
    padding: 15px;
    border-radius: 10px;
}
.product_item{
    box-shadow: none !important;
    background-color: #f0f0f0 !important;
    padding: 15px;
    border-radius: 10px;
}
/* .product_page img{width: 150px;height: 150px;} */
.product .owl-item{box-shadow:none !important;background-color: #f0f0f0;padding:15px;border-radius: 10px;}
.product_page{padding:15px 30px;}
.product_title{color: #6d6d6d;font-size: 16px; text-transform: uppercase;}
.price_box span bdi{color: #6d6d6d !important;font-weight: 600 !important;}
span bdi{color: #6d6d6d !important;font-weight: 600 !important;}
.gray_text{color: #b8b8b8;text-transform: uppercase;}

/* csr page style  */
.crs_cont p strong{color: #57ad19;}
.greentext{color: #a0cf26;font-weight: 900;text-transform: uppercase;font-size:35px;}

.blog_caption{
    position: absolute;
    right: unset;
    bottom: 1.25rem;
    left: 60%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: left;
    top: 50%;
}
.blog_caption h1{font-size: 75px; font-weight: 900;color: #fff;text-transform: uppercase;}
.blog_page h3{color: #57ad19;}
.top_border{border-top: 3px solid #7c4275;}
.contact_form{position: absolute;top: 50%;right: 5%; transform: translateY(-50%);}
.contact_form input{border-radius: 50px;}
.contact_form textarea{border-radius: 20px;}
.contact_form h3{font-size: 35px;padding-bottom: 20px;}
.submit_btn{padding: 5px 30px;background-color: #ff6b88;}
.contact_bx p a{color:#404040 !important;}

.woocommerce-product-details__short-description .btn{margin-bottom: 10px;}

.vission_bg h2{color: #a0cf26;font-size: 35px;}
.vission_bg{
    position:relative;
}
.vission_front{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:90%;
}
.mission_content h2{
    color:#024aa3;
}
.mission_vission_sec ul{
    padding-left:30px;
}
.mission_vission_sec ul li{
    list-style:disc;
}

.career_caption{
    position: absolute;
    right: unset;
    bottom: 1.25rem;
    left: 50%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: left;
    top: 10%;
    transform: translateX(-50%);
}
.career_page_form p{font-size: 29px;}
.gray_bg{background-color: #f4f4f4;}
.input-group-text{background-color: #57ad19;}
.dropdown-toggle{border-top-left-radius: unset;border-bottom-left-radius: unset;}
.iti{width: 100%;}
.iti--separate-dial-code .iti__selected-flag{background-color: #57ad19;}
.btn_upload{background-color: #024aa3; padding: 8px 15px;color: #fff;cursor: pointer;border-radius: 5px;}
.btn_submit{background-color: #024aa3; padding: 5px 25px;color: #fff;cursor: pointer;border-radius:5px;float: right;}
.form_box h5{color: #404040;}

/* woocommerce styel  */

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt{background-color: #024aa3; padding: 10px 15px;color: #fff;}
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover{background-color: #9ac134; transition: ease-in-out 0.4s;color: #024aa3;}
.woocommerce .quantity .qty{
    padding: 4px 0;
}
.woocommerce .woocommerce-breadcrumb{color: #024aa3;font-weight: 500;}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{background-color: #024aa3; padding: 10px 15px;color: #fff;}
.woocommerce-message{border-top-color: #024aa3;}
.woocommerce-message::before{color: #024aa3;}
.woocommerce #content table.cart td.actions .input-text, .woocommerce table.cart td.actions .input-text, .woocommerce-page #content table.cart td.actions .input-text, .woocommerce-page table.cart td.actions .input-text{width: 50%;}
.woocommerce-tabs .panel{border: none;}
.product_box img{width: 220px !important; height: 220px !important;}
.price span bdi{color:#000 !important}
/* HS Code */
.woocommerce div.product form.cart .variations select {
    max-width: 100%;
    min-width: 31%;
    display: inline-block;
    margin-right: 1em;
    padding: 10px;
}
/* HS Code End */
.single_pro_img{width: 70%;margin: auto;}
.woocommerce div.product div.images.woocommerce-product-gallery{background-color: #f0f0f0;}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea{
    line-height:2.5;
    width:100%;
}
.woocommerce form .form-row{
    width:50%;
}
table td{border: 1px solid; padding:10px}
tr:nth-child(even) {background-color: #f2f2f2;}

.select2-container .select2-selection--single{
 height: 44px !important;
    border: 1px solid rgb(118, 118, 118);
    border-radius: 2px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height:2.5;
}
.woocommerce-billing-fields__field-wrapper{
    display:flex;
    flex-wrap:wrap;
}
.form-row.place-order {
    width: 100% !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    top:50%;
    transform: translateY(-50%);
}
p#account_password_field {
    width: 100%;
}
p#account_username_field {
    width: 100%;
}
p#billing_email_field {
    width: 100%;
}
/*form.woocommerce-form.woocommerce-form-login.login {*/
/*    width: 50%;*/
/*}*/
.add_to_cart_button:hover{
    background-color:#a0cf26 !important;
    color: #024aa3 !important;
    transition: all 0.4s;
}
.form-row {
    width: 100% !important;
}
.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme{
    display:block;
}



.our_plants p{
    text-align:justify;
}

.flip_container{
    width: 250px;
    height: 250px;
    margin:auto;
}

.flip_container:hover .flip{      
    -webkit-transform: rotateY(180deg);
   transform: rotateY(180deg);
}
.flip {
    -webkit-transition: 0.5s;
    transition: 0.5s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}

.flip_front, .flip_back {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.flip_front {
   -webkit-transform: rotateY(0deg);
   transform: rotateY(0deg);
}

.flip_back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

@media (max-width:768px){
    .sec_bg_image{height: 800px;}
    .owl-prev{left: 0;}
    .owl-next{right: 0;}
    .top_bar ul{justify-content: center;}
    .logo_img {
        width: 280px;
    }
    .contact_us_bg_img{height: 600px;object-fit: cover;}
    .career_slider_img{height: 720px;object-fit: cover;}
    .mobile_image_view{
        display:none;
        
    }
    .vission_bg{
        border:2px solid #0249A2;
    }
    .vission_front{
        position:unset;
        left:unset;
        right:unset;
        transform:translate(0,0);
        width:100%;
    }
    .icon_img img{
        width:100%;
    }
}
@media (max-width:576px){
    .slider-margin{margin-top: 3rem!important;}
    .logo_img {
        width: 100px;
    }
    .career_slider_img{height: auto;}
    .top_bar ul li{width: 100%;}
    .top_bar ul {
        display: block;
        text-align: center;
    }
    .left_radius {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }
    .right_radius {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    .bold_yellow_text h2{font-size: 44px;}
    .yellow_bottle{top: 80%;}
    .yellow_cup{top: 90%;}

    .yellow_cup {
        right: 0% !important;
    }
    .bold_yellow_text a {
        margin-left: 83px;
    }
    .sec_bg_image {
        height: 1050px;
    }
    .pd_box{
        top:0;
    }
    .product_box{
        margin-bottom: 15px;
    }
    .orangebox_detail{
        margin-top:0;
    }
    .orange_box_img img{width: 100%;}
    .orangebox {
        padding: 30px 15px;
    }
    .bluebigtext{font-size: 60px;}
    .f_menu ul{padding-left: 0 !important;}
    .product_page {
        text-align: center;
    }
    .mob_res{width: 100%;}
    .col-1{display: none;}
    .contact_form{right: 0;}
    .mission h6{font-size: 28px;}
}


/*  Product Page*/


.product-single-box .owl-carousel .owl-item img {
    display: block;
    width: 100%;
    height: auto;
}


.product-gallery ul li {
    float: left;
    width: 19%;
    background: #f3f3f3;
    margin: 5px 10px 5px 10px;
    padding: 10px;
}


/* Drop Down Menu */
nav div {
   
    display: none;
  
  }
  
  nav ul {
  
    position: relative;
  }
  
  nav ul li {
    display: inline-block;
  }
  
  nav ul li a {
    padding: 15px;
    color: #292929;
    text-decoration: none;
    display: block;
  }
  
  nav ul li:hover {
    background: lightgrey;
  }
  
  nav ul ul {
    position: absolute;
    min-width: auto;
    background: lightgrey;
    display: none;
    z-index: 3;
  }
  
  nav ul ul li {
    display: block;
    background: #e3e3e3;
  }
  
  ul li:hover ul {
    display: block;
  }
  
  @media (max-width: 768px) {
    nav div {
      display: block;
    }
    nav ul {
      display: none;
      position: static;
    }
    nav ul li {
      display: block;
    }
    nav ul ul {
      position: static;
      background: #e3e3e3;
    }
  }
/* Drop Down Menu */
/* REciepe */
.Recipes .owl-item {background: transparent !important;}

/* Categories Products */
.productcat img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}


.boxshadowcat{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .process p strong {color: #a0cf26;font-size: 20px;} 

     /* highlight col-* */
.row [class*='product_title'] {
   
    min-height: 50px;
    margin-bottom: 3px;
  }


  /* Medai query */
  /* (320x480) iPhone (Original, 3G, 3GS) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* insert styles here */
}
 
/* (320x480) Smartphone, Portrait */
@media only screen and (device-width: 320px) and (orientation: portrait) {
    /* insert styles here */
}
 
/* (320x480) Smartphone, Landscape */
@media only screen and (device-width: 480px) and (orientation: landscape) {
    /* insert styles here */
}
 
/* (480x800) Android */
@media only screen and (min-device-width: 480px) and (max-device-width: 800px) {
    /* insert styles here */
    .yellow_bottle {
        top: 45%;
    }.bold_yellow_text h2 {
        font-size: 39px;
        color: #c4da4c;
        padding-left: 88px
    px
    ;
        line-height: 1;
    }
}
 
/* (640x960) iPhone 4 & 4S */
@media only screen and (min-device-width: 640px) and (max-device-width: 960px) {
    /* insert styles here */
}
 
/* (720x1280) Galaxy Nexus, WXGA */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
    /* insert styles here */
}
 
/* (720x1280) Galaxy Nexus, Landscape */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (orientation: landscape) {
    /* insert styles here */
}
 
/* (1024x768) iPad 1 & 2, XGA */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* insert styles here */
}
 
/* (768x1024) iPad 1 & 2, Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* insert styles here */
}
 
/* (1024x768) iPad 1 & 2, Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* insert styles here */
}
 
/* (2048x1536) iPad 3 */
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) {
    /* insert styles here */
}
 
/* (1280x720) Galaxy Note 2, WXGA */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
    /* insert styles here */
}
 
/* (1366x768) WXGA Display */
@media  screen and (max-width: 1366px) {

    /* insert styles here */
    body{font-size: 0.875rem;}
    html{font-size: 0.875rem;}
    .yellow_cup{right:% !important;}
    .yellow_cup {
        top: 102%;
        width: 36%;
    }
    .logo_img {        width: 66%;    }
    .bold_yellow_text h2 {        font-size: 60px;        color: #c4da4c;        padding-left: 88px;        line-height: 1;    }
}
.bold_yellow_text a {
    margin-left: calc(100% - 73%);
    margin-top:32% ;
    position: relative;
    z-index: 99;
    
}
 
@media (max-width:576px){
    .sec_bg_image {
        height: 1414px;
    }
    .yellow_bottle {
        top: 80%;
        width: 25%;
    }
    .yellow_cup {
        top: 106%;
        width: 31%;
    }
    .yellow_cup {
        position: absolute;
        right: -3%;
        top: 111%;
        transform: translateY(-50%);
    }
    
    
    .bold_yellow_text h2 {
        font-size: 39px !important;

}}
/* (1280x1024) SXGA Display */
@media  screen and (max-width: 1280px) {
    /* insert styles here */
}
 
/* (1440x900) WXGA+ Display */
@media  screen and (max-width: 1440px) {
    /* insert styles here */
  
    .yellow_cup {
        right: -11%;
        margin-top: 1%;
    }
}
 
/* (1680x1050) WSXGA+ Display */
@media  screen and (max-width: 1680px) {
    .bold_yellow_text h2 {font-size: 77px;}
    .yellow_cup {
        right: 3%;
        margin-top: 1%;
    }
}
 
/* (1920x1080) Full HD Display */
@media  screen and (max-width: 1920px) {
    .bold_yellow_text h2 {
        font-size: 85px;
    }
    .yellow_cup {
        position: absolute;
        right: 18%;
        top: 94%;
        transform: translateY(-50%);
    }
 
	
	/* Banner css code Start */
	@media (max-width: 768px) {
    /* 1. Header ko thoda bada karne ke liye */
    .nav-container {
        padding-top: 12px !important;    /* 5px se badha kar 12px kiya */
        padding-bottom: 12px !important; /* Isse header bada dikhega */
        height: auto !important;
    }

    /* 2. Logo size ko pehle jaisa (ya thoda chota) rakhein */
    .logo img {
        height: 60px !important; /* 45px se badha kar 60px kiya */
        width: auto !important;
    }

    /* 3. Negative margin ko adjust karein taaki gap na bane */
    .slider-margin {
        margin-top: -1px !important; /* Agar gap dikhe toh ise -5px ya -10px kar sakte hain */
        padding-top: 0 !important;
    }

    /* 4. Banner Height */
    .h_slider_img {
        height: 500px !important;
        object-fit: cover !important;
    }
}

/* Banner css code end */

	
/* ================================
   Product Category Section 5 Css Start
================================ */
/* Desktop: 3 Columns Grid */
/* --- 1. Desktop Grid Setup --- */
/* --- 1. Desktop Grid Setup (3 Columns) --- */
/* --- Desktop: 3 Columns (Wahi rahega) --- */
#product-display {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    padding: 20px 0 !important;
}

/* --- Mobile Fix: 1 Column for BIG Products --- */
@media (max-width: 767px) {
    #product-display {
        grid-template-columns: repeat(1, 1fr) !important; /* 1 Product per row for BIG view */
        gap: 20px !important;
        padding: 15px !important;
    }

    .product-card {
        border-radius: 24px !important; /* Bada card, zyada rounding */
        padding: 10px !important;
    }

    /* Mobile Text & Heading Adjustment for Big View */
    .product-card h3 {
        font-size: 1.25rem !important; /* Heading thodi badi */
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
        height: auto !important; /* Text poora dikhega */
    }

    /* Big Image for Mobile */
    .product-card img {
        max-height: 200px !important; /* Image ki height badha di gayi hai */
        width: auto !important;
        margin: 0 auto !important;
    }

    /* Buttons optimized for Big Mobile View */
    .product-card button, 
    .product-card a {
        padding: 12px 6px !important;
        font-size: 14px !important; /* Button text bhi bada aur readable */
        border-radius: 12px !important;
    }
}

/* Category Slider Styling (Same as before) */
#category-container {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
}
#category-container::-webkit-scrollbar { display: none; }
.category-btn.active { background-color: #2563eb !important; color: white !important; }
/* ================================
   Product Category Section 5 End
================================ */

/* ================================
   Recipes Section 6 Start CSS
================================ */

	/* Container Spacing */
.Recipes {
    padding: 20px 0;
}

/* Card Styling */
.recipe-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Ensures equal height in the carousel */
    display: flex;
    flex-direction: column;
    margin: 10px; /* Space for box-shadow */
}

.recipe-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Image Handling */
.recipe-image img {
    width: 100%;
    height: 220px;
    object-fit: cover; /* Keeps images from looking squished */
    display: block;
}

/* Content Area */
.recipe-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
}

.recipe-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
}

.recipe-title a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

.recipe-title a:hover {
    color: #007bff; /* Or your brand color */
}

/* Button Styling */
.btn-know-more {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.3s;
}

.btn-know-more:hover {
    background-color: #0056b3;
    color: #fff;
}
	
	
/* ================================
   Recipes Section 6 End CSS
================================ */

/* ================================
3rd section about us page css start
================================ */

/* --- Global & Desktop Alignment --- */
.shiva-about-section {
    overflow: hidden;
}

.home_about {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
}

.yellow_bottle {
    max-width: 280px; /* Limits size on desktop */
    transition: transform 0.3s ease;
}

.section-heading {
    font-weight: 700;
    color: #004a99; /* Branding Blue */
}

.highlight-title {
    font-weight: 800;
    color: #004a99;
}

/* --- Mobile Mode Optimization (991px and below) --- */
@media (max-width: 991px) {
    .shiva-about-section {
        padding: 40px 15px !important; /* Prevents text hitting screen edges */
    }

    .home_about {
        text-align: center !important; /* Better readability on mobile */
        margin-top: 30px;
    }

    .bold_yellow_text {
        margin-bottom: 20px;
    }

    .yellow_bottle {
        max-width: 180px; /* Prevents image from being overwhelming */
        margin: 0 auto;
    }

    .section-heading {
        font-size: 1.5rem;
    }

    .custom-btn {
        width: 80%; /* Larger tap target for mobile */
        display: inline-block;
    }
}

/* ================================
3th section about us page css End
================================ */
/* ================================
6th section Our Certifications css Started
================================ */
/* Using the same logic as "Our Presence" for consistency */
.certifications-section .state-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}

.certifications-section .state-card img {
    /* Making images larger and ensuring they sit in a uniform "box" */
    height: 120px; 
    width: auto;
    max-width: 100%;
    object-fit: contain; /* Keeps logos from stretching */
    margin-bottom: 20px;
}

/* Reusing the White Font on Blue Background style */
.certifications-section .btn-blue {
    background-color: #004a99; 
    color: #ffffff !important; 
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 5px;
    width: 100%;
    text-align: center;
    margin-top: auto; /* Pushes the label to the bottom so they all align */
}

/* Mobile Adjustments */
@media (max-width: 767px) {
    .certifications-section .state-card img {
        height: 80px; /* Scaled for mobile grid */
    }
    
    .certifications-section .btn-blue {
        font-size: 12px;
        padding: 8px 5px;
    }
}

/* ================================
6th section Our Certifications css End
================================ */

	
/* ================================
7th section Our Presence css Start
================================ */
/* Styling for the State Cards */
/* --- Presence Section Styling --- */
.presence-card {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers items horizontally */
    justify-content: space-between; /* Ensures even spacing between map and label */
    text-align: center;
    height: 100%; /* Keeps all boxes equal height */
}

.presence-card img {
    width: 100%;
    max-width: 140px; /* Adjust this to make images bigger/smaller */
    height: auto;
    margin-bottom: 20px;
    object-fit: contain; /* Keeps maps from distorting */
}

/* --- Label Styling --- */
.btn-blue {
    background-color: #004a99; /* Blue background */
    color: #ffffff !important; /* White text */
    font-size: 14px;
    font-weight: 600;
    padding: 10px 5px;
    border-radius: 5px;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45px; /* Ensures all labels are the same height */
}

/* --- Mobile Specific Fixes --- */
@media (max-width: 767px) {
    .presence-card img {
        max-width: 110px; /* Slightly smaller for mobile grid */
    }

    .btn-blue {
        font-size: 12px;
        min-height: 40px;
    }
    
    .section-title {
        text-align: center;
    }
}
/* ================================
7th section Our Presence css End
================================ */
/* --- Shiva Dairy Professional CSS --- */
.shiva-footer { background: #001f3f; color: #ffffff; font-family: 'Poppins', sans-serif; }
.footer-main { background: linear-gradient(180deg, #001f3f 0%, #000a14 100%); padding: 40px 0 20px 0; }

.footer-logo { max-width: 250px !important; margin-bottom: 25px !important; }
.footer-desc { font-size: 13px; line-height: 1.6; color: #a0aec0; margin-bottom: 25px; }

/* Headers Styling */
.shiva-footer h3, .shiva-footer h4 { 
    font-size: 14px !important; font-weight: 700 !important; 
    margin-bottom: 18px !important; color: #FFD700 !important; 
    text-transform: uppercase !important; letter-spacing: 1px; 
}

/* Menu Spacing */
.footer-menu, .footer-contact { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.footer-menu li { margin-bottom: 6px !important; line-height: 1.2; }
.footer-menu li a, .footer-contact li a { color: #cbd5e0 !important; text-decoration: none !important; font-size: 13px !important; }

/* Social Icons (Brand Colors) */
.social-links a { 
    display: inline-block; width: 42px !important; height: 42px !important; 
    line-height: 42px !important; text-align: center; border-radius: 50%; 
    color: #fff !important; font-size: 20px !important; margin-right: 10px; 
}
.social-links a.insta { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-links a.fb { background: #1877F2; }
.social-links a.yt { background: #FF0000; }

/* QR Box */
.qr-box { display: flex; align-items: center; background: rgba(255, 255, 255, 0.03); padding: 10px; border-radius: 8px; }
.qr-box img { background: #fff; padding: 5px; border-radius: 4px; width: 80px; }
.qr-text { font-size: 11px; color: #cbd5e0; }

/* Copyright Bar */
.footer-bottom { background: #000a14; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.1); }

/* --- Mobile Accordion Fix --- */
@media (max-width: 767px) {
    .shiva-footer .footer-accordion { border-bottom: 1px solid rgba(255,255,255,0.1); padding: 10px 0; }
    .shiva-footer .toggle-title { 
        display: flex; justify-content: space-between; align-items: center; 
        margin-bottom: 0 !important; cursor: pointer; padding: 5px 15px; 
    }
    .shiva-footer .footer-menu-wrapper { display: none; padding: 10px 15px; } /* Mobile par default hidden */
    .shiva-footer .footer-accordion.active .fa-plus::before { content: "\f068"; } /* Minus icon code */
    .footer-logo { margin: 0 auto 20px auto !important; }
}