/* ===================================
   MOBILE RESPONSIVE
   SSG Foods Private Limited
   Width : 0px - 767px
=================================== */

.top-announcement{
    margin:0 !important;
    padding:0 !important;
}

.main-header{
    margin-top:0 !important;
}

body,
header{
    margin:0;
    padding:0;
}

@media screen and (max-width:767px){
/* ===================================
   HEADER
=================================== */

.top-announcement{
    height:40px;
    font-size:13px;
}

.announcement-track{
    animation-duration:20s;
}

.main-header{
    width:100%;
    height:78px;
    padding:0 !important;
    margin:0 !important;
    display:flex;
    align-items:center;

    transform: translateY(-35px);
}
header,
.main-header,
.header-container,
.header-top,
.header-left,
.header-right{
    margin:0 !important;
    padding-top:0 !important;
}

.top-announcement + *{
    margin-top:10 !important;
}

.header-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    height:130%;
    padding:0 12px;
    margin:0;
}

.header-left{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    margin-left:-8px;

    margin-right:0 !important;
}

.logo1 img{
    width:95px !important;
    height:95px !important;
    display:block;
    transform:translateX(-45px);
}

.header-right{
    margin-left:auto !important;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;

    flex-wrap:nowrap;
    white-space:nowrap;

    width:auto;
    flex:0 0 auto;

    transform:none !important;

    padding-right:12px !important;
    position:relative;
    right:-18px;
}

/* Hamburger */

.menu-toggle{
    order:3 !important;
    position:static !important;
    flex-shrink:0;
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    color:#980000;
    font-size:32px;
    margin:0;
    padding:0;
}

/* Navigation */

#mainNav{
    position:absolute;
    top:100px;
    right:10px;
    width:180px;

    background:#fff;
    border-radius:10px;
    box-shadow:0 8px 20px rgba(0,0,0,.15);

    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);

    transition:.3s;
    z-index:9999;
}

#mainNav.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

#mainNav ul{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:8px 0;
    margin:0;
    list-style:none;
}

#mainNav ul li{
    width:100%;
}

#mainNav ul li a{
    display:block;
    padding:14px 18px;
    font-size:16px;
    font-weight:600;
    color:#980000;
    text-decoration:none;
    border-bottom:1px solid #eee;
}

#mainNav ul li:last-child a{
    border-bottom:none;
}

#mainNav ul li a:hover{
    background:#f8f8f8;
}

/* Order Button */

/*==================================
      HEADER BUTTONS
==================================*/

.order-menu{
    order:2;
    display:flex;
    align-items:center;

    flex-shrink:0;      /* ADD THIS */
}

.advance-payment-btn,
.order-btn{

    order:1;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;
}

.advance-payment-btn img,
.order-btn img{

    width:100px;

    height:auto;

    display:block;

    object-fit:contain;
}
.order-grid{
    display:grid !important;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    justify-items:center;
    align-items:center;
}

.order-card{
    width:70px;
    height:70px;
}

.order-card img{
    width:42px;
    height:42px;
    object-fit:contain;
}
}
/* ===================================
   HERO SECTION - MOBILE
=================================== */

.hero{
    width:100%;
    margin:0 !important;
    padding:0 !important;
    transform: translateY(-25px);
}

.hero img{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    object-fit:cover;
}

.hero-container{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:20px;
}

.hero-left,
.hero-right{
    width:100% !important;
}

.hero-left{
    order:1;
}

.hero-right{
    order:2;
}

.hero-right img{
    width:100%;
    max-width:320px;
    height:auto;
    display:block;
    margin:auto;
}

.hero-title{
    font-size:34px !important;
    line-height:1.2;
}

.hero-subtitle{
    font-size:18px !important;
}

.hero-description{
    font-size:15px !important;
    line-height:1.7;
}
/* ===================================
   BULK ORDER FORM - MOBILE
=================================== */

.bulk-order-section{
    padding:20px 12px;
}
#bulkOrderForm{
    position:fixed !important;
    inset:0 !important;

    display:none;

    justify-content:center;
    align-items:flex-start;

    padding:10px 12px 20px !important;
    overflow-y:auto;

    z-index:99999;

    box-sizing:border-box;
}
.bulk-container{
    width:100%;
    max-width:400px;
    margin:-5px auto 0 !important;
}
.mega-order-menu{
    margin-top:-25px !important;
    padding-top:0 !important;
}

.bulk-container{
    width:100%;
    max-width:100%;
    padding:20px;
    border-radius:18px;
    box-sizing:border-box;

    margin:0 auto !important;
}

.bulk-container h2{
    font-size:25px;
    text-align:center;
    line-height:1.2;
}

.bulk-subtitle{
    font-size:16px;
    text-align:center;
    line-height:1.6;
}

.form-row{
    display:flex;
    flex-direction:column;
    gap:0;
}

.form-group{
    margin-bottom:8px !important;
}

.form-group label{
    margin-bottom:4px !important;
}

.form-group input,
.form-group textarea,
.form-group select{
    width:100%;
    font-size:16px;
    box-sizing:border-box;
}

.checkbox-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.submit-btn{
    width:100%;
    height:52px;
    font-size:18px;
}

.close-popup{
    width:42px;
    height:42px;
    font-size:22px;
    top:15px;
    right:15px;
}
/* ===================================
   PRODUCTS SECTION - MOBILE
=================================== */

@media screen and (max-width:767px){

/* Products Section */

.products{
    padding:30px 12px !important;
    transform: translateY(-25px);
}

/* Section Heading */

.section-title h2{
    font-size:28px !important;
    line-height:1.3;
    text-align:center;
}

.section-title p{
    font-size:15px !important;
    line-height:1.6;
    text-align:center;
    padding:0 10px;
}

/* Product Filter Buttons */

.product-filter{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin:20px 0 25px;
}

.filter-btn{
    font-size:14px;
    padding:10px 14px;
    border-radius:25px;
}

/* ===========================
   Product Grid
=========================== */

.product-grid{
    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;

    column-gap:5px !important;   /* left-right gap */
    row-gap:5px !important;      /* upar-niche gap */

    width:100% !important;
    padding:0 15px !important;
    box-sizing:border-box;

    justify-items:center !important;
    align-items:start;
}

.product-card{
    width:100% !important;
    max-width:160px !important;
    margin:0 auto !important;
}
.product-grid .product-card:only-child{
    grid-column:1 / -1;
    justify-self:center;
}

/* Product Image */

.product-card img{
    display:block;
    width:120px;
    height:120px;
    object-fit:contain;
    margin:0 auto 10px;
}

/* Product Name */

.product-card h3{
    font-size:16px;
    line-height:1.4;
    text-align:center;
    min-height:45px;
}

/* Product Description */

.product-card p{
    font-size:13px;
    line-height:1.5;
    text-align:center;
    min-height:60px;
}

/* Button */

.product-btn{
    display:block;
    width:100%;
    padding:10px 0;
    font-size:14px;
    text-align:center;
    border-radius:8px;
    margin-top:10px;
}
.product-grid.single-product{
    grid-template-columns:1fr !important;
    justify-items:center !important;
}

.product-grid.single-product .product-card{
    max-width:160px !important;
    margin:0 auto !important;
}
}
/* ===================================
   WHY CHOOSE - MOBILE
=================================== */

.why-choose{
    display:flex !important;
    flex-direction:column !important;
    gap:18px;
    padding:25px 15px;
}

.feature-box{
    width:100%;
    max-width:100%;
    margin:0 auto;
    display:block !important;
}

.feature-content{
    display:flex !important;
    flex-direction:row !important;
    align-items:center;
    gap:15px;
}

.feature-icon{
    width:65px;
    height:65px;
    min-width:65px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 !important;
    flex-shrink:0;
}

.feature-icon i{
    font-size:38px;
}

.feature-icon span{
    font-size:38px;
    font-weight:700;
    line-height:1;
}

.feature-text{
    display:block !important;
    text-align:left !important;
    margin-top:0 !important;
    margin-left:0 !important;
    flex:1;
}

.feature-text h3{
    text-align:left !important;
    margin:0 0 6px 0;
    font-size:18px;
    font-weight:700;
    line-height:1.3;
    color:#8B0000;
}

.feature-text p{
    text-align:left !important;
    white-space:normal !important;
    font-size:14px;
    line-height:1.5;
    color:#222;
    margin:0;
}

.feature-box:nth-child(4) .feature-text p{
    margin-left:0 !important;
}
/* ===================================
   ABOUT US - MOBILE
=================================== */

@media screen and (max-width:767px){

.about{
    padding:30px 15px;
}

.about-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:20px;
}

.about-image{
    width:100%;
    max-width:300px;
    margin:0 auto;
}

.about-image img{
    width:100%;
    height:auto;
    display:block;
}

.about-content{
    width:100%;
}

.about-content h2{
    font-size:32px;
    margin-bottom:15px;
    text-align:center;
}

.about-content p{
    font-size:16px;
    line-height:1.8;
    text-align:justify;
}

.about-btn{
    margin-top:20px;
    padding:12px 24px;
    font-size:16px;
}

/* ================= ABOUT FEATURES ================= */

.about-features{
    display:grid;
    grid-template-columns:1fr;
    gap:25px;
    margin-top:35px;
}

.feature-item{
    width:100%;
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    text-align:left;
    gap:15px;
}

.about-features .feature-icon{
    width:65px;
    height:65px;
    min-width:65px;
    font-size:38px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.about-feature-text{
    margin-top:10;
    font-size:20px;
    font-weight:600;
    line-height:1.5;
    flex:1;
}
.about-feature-text h3,
.about-feature-text{
    text-align:left !important;
}
}
/* ===================================
   CONTACT US - MOBILE
   Width : 0px - 767px
=================================== */

@media screen and (max-width:767px){

.footer-container{
    display:flex !important;
    flex-direction:column !important;
    gap:30px;
    align-items:center;
}

.company,
.quick-links,
.contact-us,
.whatsapp{
    width:100% !important;
    max-width:100% !important;

    border:none !important;
    margin:0 !important;
    padding:0 !important;

    text-align:center;
}

.company-content{
    display:flex !important;
    flex-direction:column !important;
    align-items:center;
    gap:1px;
}

.footer-logo{
    width:160px;
    height:160px;
}

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

.social-icons{
    justify-content:center;
    margin:20px 0 0;
    gap:20px;
}

.quick-links ul{
    padding:0;
}

.contact-item{
    justify-content:center;
    text-align:left;
    margin-bottom:12px;
}

.whatsapp{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.whatsapp-btn{
    max-width:220px;
    width:100%;
}

.whatsapp-number{
    max-width:220px;
    text-align:center;
}
}
/* ===================================
   COPYRIGHT - MOBILE
=================================== */

@media screen and (max-width:767px){

.copyright{
    padding:15px 10px;
}

.copyright-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.designer-name{
    position:static !important;
    order:2;
    text-align:center;
    font-size:13px;
}

.copyright-text{
    order:1;
    text-align:center;
    font-size:14px;
    line-height:1.6;
}

}