 @media only screen and (max-width: 767px) {
html { font-size: 85%; }
.container { width: 90% !important; }
.container-flex { display: block; }
.logo img { width: 180px; }
.roc-title { font-size: 2.4em; }
.header .thi-but { color: #ffffff; border: solid 2px #000; background: #000; position: fixed; bottom: 3%; width: 90%; left: 50%; transform: translateX(-50%); text-align: center; }
.header .container-flex { display: flex; padding: 1em 1em; }
.banner,
 .our-story,
 .collections,
 .product-min,
 .footer { padding: 3.5em 0 3.5em 0; }
.banner .container-flex { flex-wrap: wrap; }
.about-banner img { height: 270px !important; }
.banner h2 { font-size: 3em; }
.banner h4 { font-size: 1.5em; }
.banner h3 { font-size: 1.6em; margin: 10px 0 15px 0; }
.banner span { font-size: 1.5em; margin: 10px 0 15px 0; }
.banner p { font-size: 1.2em; }
.our-story-img img { width: 260px; }
.our-story-content { margin-top: 30px; }
.our-story-content h3 { width: 100%; }
.our-story-content strong { font-size: 1.3em; width: 90%; }
.roc-about-content { padding: 4em 2em 3em 2em; }
.product-min .roc-title:before { display: none; }
.brand { padding: 3em 0 6em 0; }
.brand h3 { margin-bottom: 15px; }
.slick-prev,
.slick-next { top: auto; width: 30px; height: 30px; bottom: -30px; right: auto; left: 56%; transform: translateX(-50%); }
.slick-prev { left: 45%; transform: translateX(-50%); }
.slick-prev:before,
 .slick-next:before { font-size: 18px; }
.product-slider h3 { font-size: 1.5em; }
.product-min .slick-track { gap: 1em; }
.product-min .slick-list { margin: 0 -1em; }
.career-img img { height: 300px; }
.career-content { padding: 2em; }
.career ul.container-flex { display: flex; }
.career ul li { flex: 1 1 calc((100% / 1) - 1em); }
.footer-logo img { width: 260px; }
.offerings-content { width: 100%; }
.offerings-content h2 { font-size: 2em; width: 100%; }
.label-offerings { padding: 3em 0; }
.offerings-right { margin-top: 50px; }
.offerings-left h3 { font-size: 2em; }
.label-offerings .container-flex > div .container-flex { margin-top: 20px; }
.Offerings-grid { margin-bottom: 15px; }
.Offerings-grid figure { width: 17%; margin-right: 15px; }
.custom-categories { padding: 2em 0; }
ul.products { gap: 7px; }
ul.products li { flex: 1 1 calc((100% / 2) - 1em); margin: 0px !important; }
.contact-content { margin-top: 50px; }
.contact-us ul li input,
.contact-us ul li textarea { margin: 5px 0px; }
.about-banner-content { width: 90%; left: 20px; }
.about-banner-content .roc-title { font-size: 2em; margin-top: 17px; }
.about-us .roc-about-content span { font-size: 1.2em; }
.manufacturin .roc-about-img img { height: auto; }
.why-choose .Offerings-grid { justify-content: center; text-align: center; margin-bottom: 30px; }
.cta p { width: 100%; }
.about-us .roc-about-content { padding: 20px 0 0 0; }
.about-us { padding: 3em 0; }
}
 @media only screen and (max-width: 992px) {
.menu { margin-left: 0; background: #F14C38; background: -webkit-linear-gradient(90deg, rgba(241, 76, 56, 1) 0%, rgba(245, 158, 63, 1) 100%); background: -moz-linear-gradient(90deg, rgba(241, 76, 56, 1) 0%, rgba(245, 158, 63, 1) 100%); background: linear-gradient(90deg, rgba(241, 76, 56, 1) 0%, rgba(245, 158, 63, 1) 100%); position: fixed; left: -100%; top: 0; height: 100%; width: 100%; transition: 0.1s; }
.open-menu .menu { left: 0; z-index: 99; transition: 0.1s; }
.menu ul { margin-right: 0; margin-top: 3em; }
.menu ul li { display: inline-block; width: 100%; padding: 15px; border-bottom: solid 1px #eee; }
.main-wrapper .border-but { width: 90%; text-align: center; margin: 20px auto 0 auto; display: block; background: #f8cf27; border-color: #f8cf27; }
.menu ul li a { color: #ffffff; padding: 0; }
.toggle-menu { display: inline-block; margin-left: auto; z-index: 99; width: 30px; height: 20px; position: relative; }
.toggle-menu:before { content: ""; width: 100%; height: 20px; border: solid #000; border-width: 2px 0px; position: absolute; top: 0; left: 0; transition: 0.1s; }
.toggle-menu:after { content: ""; width: 100%; height: 2px; background: #000; position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: 0.1s; }
.open-menu .toggle-menu:after { background: #fff; }
.open-menu .toggle-menu { height: auto; position: absolute; right: 20px; top: 30px; }
.open-menu .toggle-menu:after { transform: translateY(-50%) rotate(45deg); transition: 0.1s; }
.open-menu .toggle-menu:before { content: ""; width: 100%; height: 2px; border: none; border-width: 2px 0px; position: absolute; top: 0; left: 0; background: #fff; transform: rotate(-45deg); transition: 0.1s; }
.slick-prev { right: 40px; }
}
 @media (min-width: 768px) and (max-width: 1023px) {
html { font-size: 80%; }
.container { width: 90% !important; }
.header .thi-but { margin-left: auto; }
.logo img { width: 220px; }
.banner .container-flex,
.our-story .container-flex { flex-wrap: wrap; }
.banner .container-flex > div img { width: 500px; }
.our-story-content { flex: 1 1 calc((100% / 1) - 2em); }
.our-story-img img { width: 300px; }
.collections ul.container-flex { gap: 1em; }
.collections ul li h3 { font-size: 1.8em; }
.collections ul li h3:after { width: 10px; height: 10px; border-width: 2px 2px 0 0; margin-left: 6px; }
.roc-about-content { padding-left: 2em; }
.roc-about-img img { height: 500px; object-fit: cover; }
.slick-prev,
.slick-next { top: -60px; width: 30px; height: 30px; }
.product-min .roc-title:before { width: 56%; }
.career .container-flex { gap: 2em; }
.career-content { padding-right: 1em; }
.career-img img { height: 480px; }
.career ul li textarea { height: 80px; }
.footer-logo img { width: 260px; }
ul.products { gap: 12px; }
ul.products li { margin: 0px !important; padding: 0px !important; }
.about-banner img { height: 280px !important; }
.about-banner-content { width: 72%; left: 10%; }
.why-choose .container-flex { gap: 1em; }
.cta p { width: 90%; }
}
 @media (min-width: 1024px) and (max-width: 1200px) {
html { font-size: 80%; }
p { font-size: 16px; }
.container { width: 90% !important; }
.logo img { width: 250px; }
.banner h2 { font-size: 3.8em; }
.banner span { font-size: 1.5em; margin: 10px 0 15px 0; }
.roc-about-content { padding-left: 5em; }
.product-min .roc-title:before { width: 62%; left: 55%; }
.slick-prev,
.slick-next { top: -62px; }
.career-content { padding-right: 5em; }
.career-img img { height: auto; }
ul.products { gap: 12px; }
ul.products li { margin: 0px !important; padding: 0px !important; }
.about-banner-content { width: 52%; left: 10%; }
.why-choose .container-flex { gap: 1em; }
}
 @media (min-width: 1201px) and (max-width: 1500px) {
html { font-size: 80%; }
p { font-size: 16px; }
.container { width: 1170px !important; }
.logo img { width: 250px; }
.banner h2 { font-size: 4em; }
.our-story-img img { width: 340px; }
.roc-about-content { padding-left: 8em; }
.career-content { padding-right: 9em; }
.about-banner-content { left: 10%; }
}
