/* RK-RESPONSIVE-VERSION-4 */
@charset "utf-8";
/* =================================================================
   RK EXTRACTIONS  -  responsive.css
   -----------------------------------------------------------------
   ही file सगळ्यात शेवटी load होते, त्यामुळे इथले नियम जुन्या CSS वर
   चालतात. जुन्या कोणत्याही file मध्ये बदल केलेला नाही.
   काही चुकलं तर फक्त page मधली या file ची <link> ओळ काढा —
   site पूर्वीसारखी होईल.

   क्रम :
     1. Global safety
     2. Big screens          (1600px आणि पुढे)
     3. Laptop               (1180px पर्यंत)
     4. Tablet               (1024px पर्यंत)
     5. Large mobile         (767px पर्यंत)
     6. Small mobile         (480px पर्यंत)
   ================================================================= */


/* ============ 1. GLOBAL SAFETY ============ */

html, body{
  overflow-x:hidden;          /* आडवा scroll बंद */
  max-width:100%;
}

img{
  max-width:100%;
  height:auto;
}

iframe{
  max-width:100%;
}

table{
  max-width:100%;
}


/* ============ 2. BIG SCREENS - 1600px आणि पुढे ============ */

@media only screen and (min-width:1600px){

  .wrapper{
    max-width:1400px;
  }

  .product_info_content p,
  .soya_oil_two p,
  .about_rk p{
    font-size:16.5px;
    line-height:32px;
  }

  .product_info_content h1,
  .about_main_content h1{
    font-size:34px;
  }

  .soya_oil_two h1{
    font-size:23px;
  }

  .product_info_content h3{
    font-size:16px;
  }

  .footer_contact h3{
    font-size:15px;
  }

}


@media only screen and (min-width:1900px){

  .wrapper{
    max-width:1520px;
  }

}


/* ============ 3. LAPTOP - 1180px पर्यंत ============ */

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

  .wrapper{
    max-width:100%;
    padding-left:18px;
    padding-right:18px;
    box-sizing:border-box;
  }

}


/* ============ 4. TABLET - 1024px पर्यंत ============ */

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

  /* ---- product / oil pages ---- */

  .soya_oil_one,
  .soya_oil_two{
    width:100%;
  }

  .soya_oil_one{
    text-align:center;
    padding-bottom:18px;
  }

  .soya_oil_one img{
    float:none;
    display:inline-block;
  }

  .nutrition_info_content{
    width:100%;
    max-width:100%;
  }

  .nutri_info_one{
    width:100%;
    padding-left:0;
    padding-top:22px;
  }

  .soyabean_doc_content_one{
    width:100%;
    padding-left:0;
  }

  /* ---- index / product listing ---- */

  .rk_product_one,
  .rk_product_two{
    width:100%;
  }

  .rk_product_one{
    min-height:180px;
    background-size:contain;
  }

  .vison_and_mission_content{
    width:100%;
  }

  .industries_one_content{
    width:50%;
  }

  /* images पूर्ण रुंदी घेतील, उजवीकडे gap राहणार नाही */
  .industries_one_content img{
    width:100%;
    display:block;
  }

  /* Read More button - आडवा, मध्यभागी */
  .about_rk a{
    float:none;
    display:table;
    width:auto;
    margin:16px auto 8px;
    padding:11px 26px;
    text-align:center;
    white-space:nowrap;
  }

  .about_rk .onearrow{
    padding-top:0;
    font-size:15px;
  }

  .grid figure{
    max-width:46%;
    margin:6px 2%;
  }

  /* ---- contact / enquiry ---- */

  .contact_details,
  .contact_page_content2{
    width:100%;
    padding-left:0;
  }

  /* ---- footer ---- */

  .footer_number{
    width:22%;
    padding:2% 0 0 0;
  }

  .footer_menu{
    width:26%;
    padding-left:2%;
  }

  .footer_contact{
    width:48%;
  }

  .footer_map{
    width:100%;
    margin-top:22px;
  }

  /* ---- banners ---- */

  .about_banner_content,
  .soya_content_banner,
  .soyabean_banner,
  .soyabean_doc_banner,
  .product_banner_land,
  .product_banner_content,
  .contact_banner{
    background-size:cover;
    background-position:center center;
  }

  .soya_content_banner{
    height:170px;
  }

}


/* ============ 5. LARGE MOBILE - 767px पर्यंत ============ */

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

  .wrapper{
    padding-left:14px;
    padding-right:14px;
  }

  /* ---- banners ---- */

  .about_banner_content,
  .soya_content_banner,
  .soyabean_banner,
  .soyabean_doc_banner,
  .product_banner_land,
  .product_banner_content,
  .contact_banner{
    height:auto;
    min-height:110px;
    background-size:cover;
  }

  .soya_content_banner{
    height:110px;
  }

  .about_main_content{
    padding:0;
  }

  .about_main_content h1{
    width:100%;
    font-size:21px;
    padding:34px 0 30px 0;
  }

  /* ---- product content ---- */

  .product_info_content h1,
  .soya_oil_two h1{
    font-size:20px;
    padding:20px 0 10px 0;
    text-align:center;
  }

  .product_info_content h2,
  .soyabean_doc_content h2{
    font-size:16px;
  }

  .product_info_content p,
  .soya_oil_two p,
  .about_rk p{
    width:100%;
    font-size:14.5px;
    line-height:26px;
    text-align:left;
  }

  .product_info_content > h3{
    width:100%;
    font-size:14px;
    line-height:24px;
  }

  /* nutrition table मोबाईलवर आडवी scroll होईल, तुटणार नाही */
  .nutrition_info_content{
    width:100%;
    max-width:100%;
    overflow-x:auto;
  }

  .nutri_info_one img{
    max-width:44%;
  }

  .soyabean_doc_content_one h3,
  .soyabean_doc_content_one h4{
    font-size:14px;
  }

  /* ---- index page ---- */

  .industries_one_content{
    width:50%;
  }

  .industries_one_content img{
    width:100%;
  }

  .about_rk a{
    padding:11px 22px;
    font-size:13.5px;
  }

  .grid figure{
    max-width:100%;
    width:100%;
    margin:8px 0;
    float:none;
  }

  .leading_one_content{
    padding-bottom:18px;
  }

  /* ---- forms ---- */

  .inputbox,
  .inputboxT,
  .iinput{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  .button,
  .resettab{
    width:auto;
    min-width:130px;
  }

  /* ---- footer ---- */

  .footer_number,
  .footer_menu,
  .footer_contact,
  .footer_map{
    width:100%;
    padding-left:0;
    padding-right:0;
  }

  .footer_number{
    text-align:center;
    padding:24px 0 10px 0;
  }

  .footer_number img{
    display:inline-block;
    float:none;
    max-width:110px;
  }

  .footer_menu{
    padding-top:10px;
  }

  .footer_contact{
    padding-top:16px;
  }

  .footer_map{
    margin-top:18px;
  }

  .footer_map iframe{
    height:200px;
  }

  .footer_end{
    text-align:center;
  }

  .copyright_content,
  .design_content{
    width:100%;
    float:none;
    text-align:center;
    font-size:12px;
    line-height:20px;
  }

}


/* ============ 6. SMALL MOBILE - 480px पर्यंत ============ */

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

  .wrapper{
    padding-left:12px;
    padding-right:12px;
  }

  .about_main_content h1{
    font-size:18px;
    padding:26px 0 24px 0;
  }

  .product_info_content h1,
  .soya_oil_two h1{
    font-size:18px;
  }

  .product_info_content p,
  .soya_oil_two p{
    font-size:14px;
    line-height:25px;
  }

  .industries_one_content{
    width:100%;
  }

  .industries_one_content img{
    width:100%;
  }

  .nutri_info_one img{
    max-width:46%;
  }

  .footer_map iframe{
    height:170px;
  }

}


/* ============ 7. MOBILE HEADER + MENU ============
   Logo डावीकडे, menu icon त्याच ओळीत उजवीकडे.
   Menu strip रुंद, logo च्या खाली उजव्या बाजूला उघडतो.
   ================================================= */

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

  .header_main{
    position:relative;
    z-index:900;
  }

  /* logo + menu एकाच ओळीत */
  .header_main .wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    /* वरचा लाल पट्टा .header_main च्या background मध्ये आहे आणि तो
       top padding मध्येच बसतो. म्हणून bottom थोडं कमी ठेवलं, तेव्हा
       दोन्ही बाजू सारख्या दिसतात. */
    padding-top:12px;
    padding-bottom:7px;
    box-sizing:border-box;
  }

  .logo{
    width:auto;
    flex:1 1 auto;
    float:none;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0;
    min-width:0;
  }

  .logo a{
    flex:0 0 auto;
    line-height:0;
  }

  .logo img{
    float:none;
    max-width:52px;
    width:52px;
  }

  .logo h1{
    float:none;
    width:auto;
    margin:0;
    padding:0;
    font-size:13.5px;
    line-height:18px;
    min-width:0;
    display:flex;
    align-items:center;
  }

  /* menu icon */
  .menu_content{
    width:auto;
    flex:0 0 auto;
    float:none;
    padding:0;
    margin:0;
    position:relative;
  }

  #cssmenu{
    width:auto;
    float:none;
    padding:0;
    margin:0;
  }

  /* hamburger icon - मोठा आणि उभा मध्यभागी */
  #cssmenu #menu-button{
    position:relative;
    display:block;
    width:48px;
    height:44px;
    padding:0;
    margin:0;
  }

  #cssmenu #menu-button::after{
    top:12px;
    right:10px;
    width:28px;
    height:3px;
  }

  #cssmenu #menu-button::before{
    top:21px;
    right:10px;
    width:28px;
    height:5px;
    border-top:3px solid #000000;
    border-bottom:3px solid #000000;
  }

  /* उघडणारा menu strip - रुंद */
  #cssmenu > ul{
    width:70vw;
    max-width:300px;
    min-width:210px;
    position:absolute;
    right:0;
    top:100%;
    z-index:950;
    box-shadow:0 10px 26px rgba(0,0,0,.20);
  }

  #cssmenu ul ul{
    width:100%;
    position:static;
    box-shadow:none;
  }

  /* ---- desktop dropdown सारखेच रंग ---- */

  #cssmenu > ul,
  #cssmenu ul{
    background:#a22b2c;
  }

  #cssmenu ul li,
  #cssmenu ul ul li,
  #cssmenu ul li:hover > ul > li{
    border-top:1px solid rgba(255,255,255,.20);
  }

  #cssmenu > ul > li:first-child{
    border-top:none;
  }

  #cssmenu ul li a,
  #cssmenu ul ul li a{
    background:#a22b2c;
    color:#ffffff;
    padding:15px 16px;
    font-size:14px;
    line-height:20px;
    font-weight:700;
    text-transform:uppercase;
  }

  #cssmenu ul li a:hover,
  #cssmenu ul li:hover > a,
  #cssmenu ul li.active > a,
  #cssmenu ul ul li a:hover,
  #cssmenu ul ul li:hover > a{
    background:#e83236;
    color:#ffffff;
  }

  /* submenu (COOKING OIL च्या आतले) थोडे गडद */
  #cssmenu ul ul li a{
    background:#8b2324;
    padding:13px 16px 13px 30px;
    font-size:13px;
    font-weight:400;
  }

  #cssmenu ul ul ul li a{
    background:#7a1e1f;
    padding-left:44px;
  }

  /* + चिन्हाची पट्टी */
  #cssmenu .submenu-button{
    border-left:1px solid rgba(255,255,255,.22);
  }

  #cssmenu .submenu-button::after,
  #cssmenu .submenu-button::before{
    background:#ffffff;
  }

}


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

  .header_main .wrapper{
    padding-top:8px;
    padding-bottom:8px;
  }

  .logo{
    gap:9px;
    padding:0;
  }

  .logo img{
    max-width:46px;
    width:46px;
  }

  .logo h1{
    font-size:12.5px;
    line-height:17px;
  }

  #cssmenu #menu-button{
    width:44px;
    height:40px;
  }

  #cssmenu #menu-button::after{
    top:11px;
    right:8px;
    width:26px;
  }

  #cssmenu #menu-button::before{
    top:19px;
    right:8px;
    width:26px;
  }

  #cssmenu > ul{
    width:78vw;
    max-width:270px;
  }

}


/* ============ 8. HEADING खालची divider रेषा ============ */

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

  .about_rk_line,
  .lading_way_line,
  .product_info_line{
    float:none;
    clear:both;
    display:block;
    width:56px;
    height:3px;
    margin:12px auto 6px;
  }

  /* PRODUCT RANGE चा लाल box - मजकूर अचूक मध्यभागी.
     मूळ CSS मध्ये h1 ला padding:41% आणि line ला margin-bottom:36.7%
     आहे. ही टक्केवारी box च्या रुंदीवर मोजली जाते, त्यामुळे
     मोबाईलवर box रुंद झाल्यावर मजकूर खाली सरकत होता. */
  .rk_product_one{
    display:flex !important;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-height:280px;
    padding:30px 14px !important;
    box-sizing:border-box;
  }

  .rk_product_content .rk_product_one h1,
  .rk_product_one h1{
    float:none !important;
    width:100%;
    padding:0 !important;   /* मूळ 41% padding रद्द */
    margin:0 !important;
    font-size:34px !important;
    line-height:1.18;
    text-align:center;
  }

  .rk_product_content .rk_product_line,
  .rk_product_line{
    float:none !important;
    display:block;
    width:56px !important;
    height:3px;
    margin:16px auto 0 !important;   /* मूळ margin-bottom:36.7% रद्द */
  }

}


/* ============ 9. CONTACT US page - mobile ============ */

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

  .contact_page_content,
  .contact_page_two{
    width:100%;
    float:none;
  }

  .contact_details h1,
  .contact_page_two h1{
    width:100%;
    font-size:18px;
  }

  .contact_details h2{
    width:100%;
    font-size:16.5px;
    line-height:24px;
  }

  .contact_details h3{
    width:100%;
    font-size:13.5px;
    line-height:22px;
    padding:4px 0;
  }

  /* नकाशा पूर्ण रुंदीचा */
  .map_content{
    width:100%;
    height:260px;
  }

  .map_content iframe{
    width:100%;
    height:100%;
    display:block;
  }

  .contact_page_three{
    margin-top:18px;
    margin-bottom:18px;
  }

}


/* ============ 10. ENQUIRY form - mobile ============ */

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

  .contact_main{
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:34px 0 40px 0;   /* वर-खाली मोकळी जागा */
    box-sizing:border-box;
  }

  .contact_main #contact-form{
    padding-top:0;
  }

  /* मूळ CSS मध्ये #contact-form हा ID आहे, म्हणून इथेही ID वापरला
     आहे - नाहीतर हे नियम लागू होत नाहीत */

  #contact-form{
    padding-left:0;
    padding-right:0;
    width:100%;
    box-sizing:border-box;
  }

  #contact-form p,
  #contact-form .onenew{
    width:100%;
    float:none;
    margin-right:0;
    padding:6px 0;
    box-sizing:border-box;
  }

  #contact-form label{
    width:100%;
  }

  #contact-form input[type="text"],
  #contact-form input[type="email"],
  #contact-form input[type="tel"],
  #contact-form input[type="url"],
  #contact-form textarea{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding:13px 14px;
    margin:0 0 10px 0;
    font-size:15px;
  }

  #contact-form textarea{
    height:120px;
  }

  .inputbox,
  .inputboxT,
  .iinput{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  .button,
  .resettab{
    display:inline-block;
    width:auto;
    min-width:132px;
    margin:6px 8px 6px 0;
    padding:12px 26px;
    box-sizing:border-box;
  }

}


/* ============ 11. SOYABEAN DOC - दोन column table ============ */

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

  .soyabean_doc_content h2{
    width:100%;
    margin-left:0;
    font-size:14.5px;
    padding:9px 8px;
    box-sizing:border-box;
  }

  .soyabean_doc_content_one{
    width:100%;
    padding-left:0;
  }

  /* label डावीकडे, value उजवीकडे - desktop सारखं */
  .soyabean_doc_content_one h3{
    float:left;
    width:56%;
    margin-right:2%;
    margin-top:6px;
    font-size:13.5px;
    padding:9px 6px;
    text-align:center;
    box-sizing:border-box;
  }

  .soyabean_doc_content_one h4{
    float:left;
    width:42%;
    margin-right:0;
    margin-top:6px;
    font-size:13.5px;
    padding:9px 6px;
    text-align:center;
    box-sizing:border-box;
  }

}


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

  .soyabean_doc_content_one h3,
  .soyabean_doc_content_one h4{
    font-size:12.5px;
    padding:8px 4px;
  }

  .map_content{
    height:230px;
  }

}


/* ============ 12. CONTACT US - Send Your Feedback ============ */

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

  .contact_page_three{
    width:100%;
    box-sizing:border-box;
    padding:18px 16px 22px;
  }

  .contact_page_three h1{
    width:100%;
    text-align:center;
    padding:6px 0 12px;
  }

  .contact_page_three #contact-form{
    padding-left:0;
    padding-right:0;
    margin:0 auto;
    float:none;
  }

}


/* ============ 13. PRODUCT images - डावी बाजू कापणं थांबवा ============
   image-over-effect.css मध्ये figure.effect-lily img ला
   width:calc(100% + 50px) आणि translate3d(-40px,0,0) आहे.
   Desktop वर hover effect साठी ते ठीक, पण मोबाईलवर image
   डावीकडे बाहेर जाते आणि नाव कापलं जातं.
   ================================================================= */

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

  .grid figure{
    overflow:hidden;
  }

  .grid figure.effect-lily img{
    width:100%;
    max-width:100%;
    -webkit-transform:none;
    transform:none;
    opacity:1;
  }

  .grid figure.effect-lily figcaption{
    text-align:center;
  }

  .grid figure figcaption > div{
    height:auto;
    padding:8px 10px;
  }

  .grid figure h2{
    width:100%;
    padding:0;
    margin:0;
    text-align:center;
    font-size:17px;
    line-height:24px;
    -webkit-transform:none;
    transform:none;
  }

  .grid figure p{
    display:none;
  }

}


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

  .grid figure h2{
    font-size:15px;
    line-height:22px;
  }

}