:root { --black: #000; --bg-black: #000; --white: #fff; --bg-white: #fff; --theme-color: #868f5a; --secondery-color: #fff6cf }
@font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-ExtraBold.eot'); src: url('../fonts/Rubik-ExtraBold.eot?#iefix') format('embedded-opentype'), url('../fonts/Rubik-ExtraBold.woff2') format('woff2'), url('../fonts/Rubik-ExtraBold.woff') format('woff'), url('../fonts/Rubik-ExtraBold.ttf') format('truetype'), url('../fonts/Rubik-ExtraBold.svg#Rubik-ExtraBold') format('svg'); font-weight: bold; font-style: normal; font-display: swap }
@font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-Black.eot'); src: url('../fonts/Rubik-Black.eot?#iefix') format('embedded-opentype'), url('../fonts/Rubik-Black.woff2') format('woff2'), url('../fonts/Rubik-Black.woff') format('woff'), url('../fonts/Rubik-Black.ttf') format('truetype'), url('../fonts/Rubik-Black.svg#Rubik-Black') format('svg'); font-weight: 900; font-style: normal; font-display: swap }
@font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-Bold.eot'); src: url('../fonts/Rubik-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Rubik-Bold.woff2') format('woff2'), url('../fonts/Rubik-Bold.woff') format('woff'), url('../fonts/Rubik-Bold.ttf') format('truetype'), url('../fonts/Rubik-Bold.svg#Rubik-Bold') format('svg'); font-weight: bold; font-style: normal; font-display: swap }
@font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-Medium.eot'); src: url('../fonts/Rubik-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/Rubik-Medium.woff2') format('woff2'), url('../fonts/Rubik-Medium.woff') format('woff'), url('../fonts/Rubik-Medium.ttf') format('truetype'), url('../fonts/Rubik-Medium.svg#Rubik-Medium') format('svg'); font-weight: 500; font-style: normal; font-display: swap }
@font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-SemiBold.eot'); src: url('../fonts/Rubik-SemiBold.eot?#iefix') format('embedded-opentype'), url('../fonts/Rubik-SemiBold.woff2') format('woff2'), url('../fonts/Rubik-SemiBold.woff') format('woff'), url('../fonts/Rubik-SemiBold.ttf') format('truetype'), url('../fonts/Rubik-SemiBold.svg#Rubik-SemiBold') format('svg'); font-weight: 600; font-style: normal; font-display: swap }
@font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-Regular.eot'); src: url('../fonts/Rubik-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Rubik-Regular.woff2') format('woff2'), url('../fonts/Rubik-Regular.woff') format('woff'), url('../fonts/Rubik-Regular.ttf') format('truetype'), url('../fonts/Rubik-Regular.svg#Rubik-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap }
* { box-sizing: border-box }
.container { transition: .4s ease }
body { padding: 0; margin: 0; font-size: 16px; font-family: 'Rubik'; position: relative; scroll-behavior: smooth }
ul { list-style: none; padding: 0; margin: 0 }
a { text-decoration: none }
img { max-width: 100%; height: auto }
#r5 { font-size: 16px; color: #fff; position: absolute; top: 4px; right: 4px; line-height: 1.8; padding-inline: 1lh; padding-bottom: .5rem; border-image: conic-gradient(#0008 0 0) 51%/.5rem; clip-path: polygon(100% calc(100% - .5rem), 100% 100%, calc(100% - .5rem) calc(100% - .5rem), .5rem calc(100% - .5rem), 0 100%, 0 calc(100% - .5rem), 999px calc(100% - .5rem - 999px), calc(100% - 999px) calc(100% - .5rem - 999px)); transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg); transform-origin: 0% 100%; background-color: var(--theme-color) }
.main-item-container { background: #f9fff2 }
.mbshado.show { overflow: hidden }
.header-section { background: #e3ff52 }
.brand { z-index: 1 }
.nav-wrapper { background: var(--theme-color); padding: 10px 0 }
.nav-menu .nav-item { margin-right: 35px }
.nav-menu .nav-item:last-child { margin-right: 0 }
.nav-menu .nav-link { color: var(--white); font-size: 18px }
.nav-menu .nav-link.active { color: #d6ff00 }
.nav-menu .nav-link:hover { color: #d6ff00 }
.heador-content { text-align: center; flex: 1; padding: 35px 0 }
.heador-content h1 { font-size: 42px }
h2.hed-in { font-size: 30px; color: var(--theme-color); font-weight: bold }
.hamburger .bar { display: block; width: 25px; height: 3px; margin: 5px auto; background: #000; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out }
h3.card-titel { color: #9bb903; font-weight: 600; margin-bottom: 15px }
.contant-phone a { font-size: 18px; color: #000; font-weight: 600; border-left: 3px solid; padding-left: 10px }
.contant-phone ul li img { max-width: 33px }
.brand  img { max-width: 200px }
.card-titel ul { display: flex; gap: 0 20px; justify-content: space-between }
.card-titel ul li { background: #9bb903; color: #fff; padding: 0 25px; height: 50px; line-height: 50px; text-transform: uppercase; border-radius: 39px; width: 31.5%; text-align: center; font-size: 18px }
.banner-heading-wrapper { z-index: 3; top: 50%; left: 50%; bottom: auto; right: auto; margin: auto; color: #fff; transform: translate(-50%, -50%); padding: 40px 15px; background: rgb(150 159 103); border-radius: 20px; max-width: 1200px; width: 100% }
.banner-heading-wrapper h2 { font-weight: normal }
.banner-heading-wrapper .img-colm { max-width: 31%; flex: 0 0 31% }
.banner-heading-wrapper .top-content { max-width: 62%; flex: 0 0 62%; text-align: left }
.banner-heading { display: block; margin-bottom: 20px; line-height: 27px; font-size: 16px }
.banner-heading-wrapper h2 a { color: #e3ff52; text-decoration: underline }
.banner-heading:last-child { margin-bottom: 0 }
.card-heading { transition: all .4s ease .0s; background: var(--theme-color); min-height: 76px; display: flex; justify-content: center; align-items: center }
.card-heading a { color: #fff; font-size: 16px }
.subtext { font-size: 16px; line-height: 26px; color: #000 }
.card-wrapper .card { transition: all 0.4s ease 0s; overflow: hidden; border: 1px solid #969f67; border-radius: 10px }
.card-wrapper .card .figure-box { height: 290px }
.card-details { padding: 0 15px }
.card-details a { color: #000; font-size: 18px; font-weight: 500; display: block; margin-bottom: 15px }
.card-details p.price { color: #9bb903; font-weight: 500 }
.card-wrapper .card:hover { z-index: 9; scale: 1.01 }
.card-wrapper .card:hover .card-heading { background: #000; color: #fff }
.item-modal li { font-size: 16px; padding: 10px; border-top: 1px solid var(--theme-color) }
.main-footer { background: var(--theme-color) }
.f_titel { font-size: 24px; letter-spacing: 1px }
.f_link, .f-text { font-size: 16px; color: var(--white); transition: .2s }
.payment-icon li img { border: 1px solid #f3f3f3; padding: 8px }
.contact-details .icon-box { margin-bottom: 12px }
.contact-details .icon-box:last-child { margin-bottom: 0 }
.contact-details .icon-box a:hover { color: var(--secondery-color) }
.icon-box img { padding-right: 10px }
.icon-box.address img { padding-top: 10px }
.address { line-height: 35px; display: flex; align-items: flex-start; margin-bottom: 0 }
.footer-logo { height: 150px; width: 150px; display: flex; justify-content: center; align-items: center; border: 1px solid #fff; background: #fff; border-radius: 100% }
.banner-sections .owl-nav { margin: 0 }
.banner-sections .owl-nav button.owl-prev { left: 20px; height: 50px; width: 50px; position: absolute; top: 0; bottom: 0; margin: auto; color: #fff; border: 1px solid #fff }
.banner-sections .owl-nav button.owl-next { right: 20px; height: 50px; width: 50px; position: absolute; top: 0; bottom: 0; margin: auto; color: #fff; border: 1px solid #fff }
.banner-sections .owl-nav button span { font-size: 30px; line-height: 30px }
.banner-sections .owl-theme .owl-nav button:hover { background: #d6ff00; color: #000; text-decoration: none; border-color: #d6ff00 }
.owl-dots { display: none }
.select-image-box p { font-size: 14px }
.banner-sections .owl-carousel .owl-item img { min-height: 240px; height: 100% }
section.main-item-container .image-head button span { font-size: 24px; padding: 5px 0 }
section.main-item-container .image-head .owl-carousel button:hover { background: none; color: #000 }
.image-head { background: #fff; border: 1px solid #f1f1f1; position: relative; transition: all .4s ease 0s }
.image-head:hover { scale: 1.02; border-color: var(--theme-color) }
.order-heading { font-size: 20px; margin-bottom: 1rem; color: #000 }
.form-wrapper { border: 2px dashed #ccc; padding: 1rem .6rem }
.cart-box { box-shadow: 0px 0px 3px 3px #f1f1f1; padding: 15px; margin-top: 25px; overflow: hidden }
table { width: 100% }
table tr td { border: 1px solid #ccc; padding: 10px; text-align: center }
ul.ul-row li { flex: 0 0 50%; max-width: 50%; margin-bottom: 15px; list-style: disc }
ul.disc-row li::after { content: ""; position: absolute; left: 4px; top: 15px; height: 8px; width: 2px; background: #a1a87d }
ul.disc-row li::before { content: ""; position: absolute; background: #9bb903; height: 10px; width: 10px; top: 5px; left: 0; rotate: 45deg }
ul.disc-row li { margin-bottom: 14px; color: #656565; padding-left: 20px; position: relative }
.ul-row { padding-left: 15px }
.footer-logo img { max-width: 115px }
.contact-page ul { display: flex; flex-wrap: wrap; justify-content: space-between; overflow: hidden }
.contact-page ul li { border-radius: 10px; transition: .4s all; text-align: center; position: relative; z-index: 1; border: 1px solid var(--theme-color); width: 23%; margin-top: 60px; font-size: 18px; padding: 60px 15px 10px }
.contact-page ul li span { display: block; font-size: 20px; font-weight: 600; color: var(--theme-color); margin-bottom: 5px; line-height: 30px }
.contact-page ul li img.hover_img { display: none }
.contact-page ul li:hover img.hover_img { display: block; margin: 0 auto }
.contact-page ul li:hover img { display: none }
.contact-page ul li a { color: #000; word-break: break-all }
.contact-page ul li:hover a { color: #9bb903 }
.contact-page ul li figure { position: absolute; top: -40px; right: 0; left: 0; background: #fff; border: 1px solid var(--theme-color); width: fit-content; margin: auto; padding: 20px; border-radius: 50%; transition: .4s ease }
.contact-page ul li:hover figure { background: var(--theme-color) }
@media (min-width:1251px) and (max-width:1430px) {
    .banner-heading-wrapper { padding: 20px 15px; max-width: 1100px }
    .banner-heading { margin-bottom: 8px; line-height: 22px; font-size: 15px }
    .banner-heading-wrapper img { max-width: 160px }
}
@media (min-width:769px) and (max-width:1250px) {
    .banner-heading-wrapper { padding: 15px 10px; max-width: 820px }
    .banner-heading { margin-bottom: 0; font-size: 13px }
    .banner-heading-wrapper .img-colm { max-width: 14%; flex: 0 0 14% }
    .banner-heading-wrapper .img-colm img { max-width: 100px }
    .banner-heading-wrapper .top-content { max-width: 82%; flex: 0 0 82%; text-align: left }
    .banner-sections .owl-carousel .owl-item img { min-height: 400px }
}
@media (max-width:1199px) {
    .container { max-width: 100% }
    .nav-menu .nav-link { letter-spacing: normal }
    .nav-menu .nav-item { margin-right: 20px }
}
@media (max-width:991px) {
    .brand { max-width: 166px }
    .mbshado.show .bg-shado { background: rgba(0, 0, 0, .6); height: 100%; width: 100%; position: absolute; top: 0; bottom: 0; z-index: 998; transition: .7s }
    .nav-menu { position: fixed; right: -100%; top: 0px; flex-direction: column; width: 240px; border-radius: 0; transition: 0.3s; background: var(--bg-white); z-index: 999; bottom: auto; height: 100%; padding-top: 66px }
    .nav-menu.show { right: 0px }
    .nav-menu .nav-link { font-size: 16px; color: var(--black) }
    .nav-menu .nav-item { border-top: 1px solid #7d7f7f; width: 100%; padding: 15px 10px; text-align: left }
    .nav-menu .nav-item:last-child { border-bottom: 1px solid #7d7f7f; margin-right: auto }
    .hamburger { cursor: pointer; z-index: 9999; transition: 0.3s; padding: 3px; border-radius: 4px; position: absolute; right: 15px; top: 45px }
    .hamburger.show { top: 15px; right: 15px }
    .contant-phone { display: none }
    .hamburger.show { transition: 0.3s }
    .hamburger.show .bar { background: #000 }
    .hamburger.show .bar:nth-child(2) { opacity: 0 }
    .hamburger.show .bar:nth-child(1) { transform: translateY(8px) rotate(45deg) }
    .hamburger.show .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg) }
    .nav-menu .nav-link.active { color: var(--theme-color) }
    .contact-page ul li { width: 47% }
    .nav-wrapper { padding: 0 }
    h4.inner-titel { font-size: 20px }
}
@media (max-width:767px) {
    .card-titel ul { flex-wrap: wrap }
    .card-titel ul li { width: 100%; margin-top: 20px }
    .owl-carousel.banner-slider { display: none }
    .banner-heading-wrapper { width: 100%; flex-wrap: wrap; position: static !important; transform: inherit; border-radius: 0 }
    .banner-heading-wrapper h2 { font-weight: normal; flex-wrap: wrap }
    .banner-heading-wrapper .top-content { max-width: 100%; flex: 100% }
    .banner-heading-wrapper .img-colm { max-width: 100%; flex: 100% }
}
@media (max-width:575px) {
    .contact-page ul li { width: 100%; font-size: 16px }
    .heador-content h1 { display: none }
    ul.ul-row li { flex: 100%; max-width: 100% }
}
.fade-in-left { animation: fade-in-left .5s ease }
@keyframes fade-in-left {
    0% { opacity: 0; transform: translateX(-20px) }
    100% { opacity: 1; transform: translateX(0) }
}
.grow { animation: grow 1s ease }
@keyframes grow {
    from { transform: scale(0) }
    to { transform: scale(1) }
}
.fade-in { animation: fadeIn ease 5s  infinite; -webkit-animation: fadeIn ease 5s infinite; -moz-animation: fadeIn ease 5s infinite; -o-animation: fadeIn ease 5s infinite; -ms-animation: fadeIn ease 5s infinite }
@keyframes fadeIn {
    0% { opacity: 0 }
    50% { opacity: .5 }
    100% { opacity: 1 }
}
@-moz-keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}
@-webkit-keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}
@-o-keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}
@-ms-keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}