html, body {
font-family: Poppins, sans-serif;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
scroll-behavior: smooth;
user-select: none;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
outline: none;
transition: all 0.3s ease-in;
}
header {
background: #027148;
border-bottom: 1px solid #111;
height: 40px;
width: 100%;
position: fixed;
z-index: 1000000;
overflow: hidden;
}
.logo {
position: absolute;
left: 38px;
font-size: 19px;
top: -1px;
font-family: "Open Sans";
font-weight: bold;
color: white;
}
.gold {
font-size: 25px;
color: #ffe67c;
}
.topnav{
position: absolute;
left: 9px;
cursor: pointer;
z-index: 10000;
outline: none;
font-size: 19px;
top: 3px;
font-weight: bolder;
color: white;
}
.topnav a{
color: white;
}
.shopcart {
position: absolute;
top: 5px;
right: 11px;
cursor: pointer;
z-index: 10000;
outline: none;
color: white;
}
.shopcart i{
font-size: 24px;
}
.cartitem{
background: #ffe67c;
border-radius: 50%;
height: 18px;
width: 18px;
position: absolute;
right: 4px;
top: 14px;
display: flex;
justify-content: center;
align-items: center;
padding: 3px;
z-index: 20000;
outline: 1px solid #027148;
cursor: pointer;
color: #027148;
}
#menu {
z-index: 500000;
width: 100%;
background: #ffffff;
text-align: center;
display: none;
transition: 5s;
transition-duration: 10s;
transition-delay: 10s;
cursor: pointer;
}
#menu ul{
padding: 0;
margin: 0;
list-style-type: none;
z-index: 500000;
}
#menu li{
display: block;
padding: 6px 0;
border-bottom: #dddddd solid 1px;
z-index: 500000;
}
#menu a:hover, .fakelink:hover, #menu li:hover, .menulist li:hover {
color: #000000;
text-decoration: underline;
text-decoration-color: #027148;
}
#menu a, .fakelink, #menu li {
color: #027148;
z-index: 100000;
}
.menulist {
padding: 0;
margin: 0;
list-style-type: none;
right: 50px;
position: absolute;
display: none;
}
.menulist li {
display: block;
color: white;
float: left;
padding: 8px;
font-weight: 500;
}
.menulist li:hover {
text-decoration: none;
}
.move {
position: relative;
left: 20px; 
}
.nextorder{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
gap: 20px;
margin-top: 29px;
margin-bottom: 20px;
}
.show {
background-color: #ffffff;
color: #027148;
padding: 10px;
width: 50px fit-content;
-moz-width: 50px fit-content;
-ms-width: 50px fit-content;
font-size: 12px;
border-radius: 4px;
text-align: center;
display: flex;
height: 36px;
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.show:hover{
border-left: 1px solid #027148;
}
.show:first-child {
animation-name: float;
animation-duration: 4s;
}
#block, #block2 {
display: none;
}
@keyframes float {
0% {right: 300px;}
25% { right: 0px;}
}
.show:last-child {
animation-name: sink;
animation-duration: 4s;
}
@keyframes sink {
0% {left: 300px;}
25% { left: 0px;}
}
.sshow {
width: 260px;
}
.slider {
margin: 4px;
padding: 1px;
height: auto;
text-align: center;
display: none;
}
.news {
margin-bottom: 16px;
margin-top: 14px;
text-align: center;
color: #027148;
padding: 0;
}
.category {
height: 150px;
width: 290px auto;
object-fit: cover;
background-size: cover;
object-position: center;
background-repeat: none;
margin-left: -14px;
margin-right: auto;
text-align: center;
overflow: hidden;
vertical-align: auto;
}
.showcat {
position: relative;
top: -29px;
font-size: 20px;
background-color: #00000098;
overflow: hidden;
width: 225px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.showcat a {
color: #bbb;
}
.prev, .next {
font-weight: bolder;
font-size: 28px;
color:#027148;
text-align: center;
padding: auto;
cursor: pointer;
position: relative;
user-select: none;
display: block;
}
.prev{
float: left;
left: 0px;
top: 44px;
}
.next {
float: right;
right: 0px;
top: -140px;
}
.ton {
height: 320px;
object-fit: cover;
background-size: cover;
object-position: center;
display: block;
width: 100%;
}
.slide {
margin-left: 30px;
margin-right: 30px;
display: grid;
gap: 0.4rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.cap{
position: relative;
top: -38px;
left: 10px;
font-size: 21px;
color:#ffffff;
}
.container{
position: relative;
width: 100%;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #00000098;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
cursor: pointer;
}
.container:hover .overlay {
width: 100%;
}
.word{
color: #ffffff;
font-size: 15px;
position: absolute;
top: 50%;
left:40%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.title {
position: absolute;
top: 52px;
left: 38px;
}
.first {
font-size: 12px;
font-weight: 400;
}
.bold {
font-size: 34px;
line-height: 40px;
font-weight: 500;
}
.second{
color: white;
}
.third{
color: #027148;
text-shadow: 2px 5px 4px rgba(0, 0, 0, 0.95);
}
.shop{
border: none;
background-color: #027148;
padding: 9px 19px;
margin-top: 25px;
color: white;
font-size: 12px;
cursor: pointer;
border-radius: 4px;
}
.find{
border: 2px solid #027148;
background-color: #ffffff;
padding: 8px 19px;
margin-top: 25px;
font-size: 12px;
cursor: pointer;
color: #027148;
border-radius: 4px;
}
.protect{
width: 100%;
background-repeat: no-repeat;
height: 280px;
object-fit: cover;
background-size: cover;
object-position: center;
position: relative;
}
.nav-btn{
text-align: center;
position: relative;
}
.dot {
cursor: pointer;
height: 10px;
width: 10px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
.active{
background-color: #027148;
}
.first-icons{
font-size: 19px;
color: #027148;
padding-right: 10px;
font-weight: bolder;
display: block;
}
.intro {
font-size: 22px;
color: #027148; 
text-align: center;
}
.jt{
border: none;
background-color: #027148;
padding: 8px 15px;
color: white;
font-size: 12px;
margin-right: 10px;
position: relative;
top: -57px;
border-radius: 4px;
}
.jt a{
color: white;
font-weight: bold;
}
.cart{
border: 2px solid #027148;
background-color: #ffffff;
padding: 7px 4px;
font-size: 12px;
color: #027148;
margin-right: -none;
margin-left: -10px;
position: relative;
top: -56px;
border-radius: 4px;
cursor: pointer;
}
.cart a{
color: #027148;
font-weight: bold;
padding: auto;
position: relative;
top: 8px;
}
h3, h2{
color: inherit;
text-decoration: overline;
text-align: center;
text-decoration-color: #027148;
}
.link {
font-size: 15px;
text-decoration: underline;
text-decoration-color: #027148;
color: #027148;
}
.tutor{
font-size: 10.8px;
text-align: right;
color: #bbb;
}
.mySlides{
display: none;
position: relative;
overflow: hidden;
}
img {
vertical-align: middle;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4;}
to {opacity: 1;}
}
.lades {
animation-name: lades;
animation-duration: 1.5s;
}
@keyframes lades {
from {left: -0}
to {right: 0}
}
.about{
background-image: url("istockphoto-1145304782-612x612.jpg");
height: 302px;
object-fit: cover;
background-size: cover;
object-position: center;
background-repeat: none;
}
.writeup {
background-color: #000000a8;
color: white;
padding: 17px;
position: relative;
margin: 30px;
top: 10px;
}
.heading {
color: #027148;
font-size: 21px;
line-height: 24px;
}
.aboutplus {
display: flex;
flex-direction: column;
gap: 20px;
}
footer {
text-align: center;
}
.last{
font-size: 14px;
color: #027148;
}
footer a{
color: black;
}
footer a:hover {
color: #027148;
text-decoration: underline;
}
footer i{
color: #027148;
}
#bod{
border-top: 1px solid #000000;
padding-top: 20px;
}
.down {
padding-top: 4px;
padding-bottom: 4px;
overflow: hidden;
border-bottom: 1px solid #bbb;
color: #027148;
}
.down-2 {
padding-top: 4px;
padding-bottom: 4px;
overflow: hidden;
font-size: 15px;
border-bottom: 1px solid #bbb;
}
summary {
padding-top: 1px;
padding-bottom: 2px;
cursor: pointer;
transition: 0.4s;
text-align: left;
display: block;
margin-bottom: -1px;
width: 100%;
text-decoration-color: #027148;
text-decoration: wavy;
}
summary:active {
background-color: #bbb;
}
summary i {
position: relative;
top: 7px
}
summary i:hover {
color: #027148;
}
summary:hover {
background-color: #bbb;
}
details{
padding-bottom: 1px;
padding-top: 0px;
}
details p, details article {
margin-left: 30px;
font-size: 12px;
}
details a{
margin-left: 10px;
font-size: 20px;
}
.summary::after{
background-color: #bbb;
}
.headed {
color: #027148;
font-size: 20px;
line-height: -10px;
padding-left: 30px;
margin-top: -10px;
border-bottom: 1px solid #000000;
}
.headed p {
top: 4px;
position: relative;
}
.cartheader {
color: #027148;
border-bottom: 1px solid #000000;
font-size: 23px;
margin-bottom: 10px;
text-align: center;
}
.bill {
text-align: center;
}
.leftArrow {
color: black;
float: left;
font-size: 25px;
cursor: pointer;
}
.menu{
font-weight: bold;
color: #027148;
font-size: 21px;
}
.denu{
font-size: 17px;
margin-left: 9px;
}
.menu-image {
margin-top: 5px;
height: 50px;
width: 50px;
margin-left: 5px;
object-fit: cover;
background-size: cover;
object-position: center;
}
.menu-head {
background-image: url("istockphoto-1185840421-612x612.jpg");
height: 200px;
object-fit: cover;
background-size: cover;
object-position: center;
background-repeat: none;
color: #027148;
font-size: 20px;
line-height: -10px;
padding-left: 30px;
margin-top: -10px;
border-bottom: 1px solid #000000;
}
.wrap {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.menu-pic {
object-fit: cover;
background-size: cover;
object-position: center;
height: 60px;
width: 60px;
margin-right: 10px;
}
.process-head {
background-image: url("istockphoto-1130116246-612x612.jpg");
height: 208px;
object-fit: cover;
background-size: cover;
object-position: center;
background-repeat: none;
color: #027148;
font-size: 20px;
line-height: -10px;
padding-left: 30px;
margin-top: -10px;
border-bottom: 1px solid #000000;
width: 100%;
}
.add {
margin-left: 15px;
}
.more {
font-size: 14px;
}
.more a{
text-decoration: underline;
color: #027148;
}
.byte{
color: #000000;
}
.header {
position: absolute;
top: none;
left: 25px;
}
.headers {
position: static;
top: none;
left: 25px;
}
.type {
color: #ffffff;
}
.circle-1, .circle-2, .circle-3, .circle-4, .cirlce-5 {
background-color: #027148;
border-radius: 50%;
height: 130px;
width: 130px;
padding: auto;
}
.circle-2, .circle-4 {
position: relative;
float: right;
}
.circle-2 {
top: -60px;
}
.circle-4{
top: -48px;
}
.first-head1, .first-head2, .first-head3, .first-head4, .first-head5 {
position: relative;
text-align: center;
width: 148px;
font-size: 12px;
line-height: 15px;
}
.first-head1{
top: -110px;
left: 155px;
}
.first-head2 {
top: -39px;
margin-right: 20px;
float: right;
}
.first-head3{
top: -107px;
left: 155px;
}
.first-head4 {
top: -24px;
margin-right: 20px;
float: right;
}
.adjust {
margin-bottom: 120px;
}
.head-top{
color: #027148;
font-size: 14px;
font-weight: bold;
}
.holder {
cursor: pointer;
margin-left: 10px;
margin-right: 10px;
}
.journey-pic {
height: 130px;
width: 130px;
border-radius: 50%;
padding: 8px;
object-fit: cover;
background-size: cover;
object-position: center;
background-repeat: none;
display: flex;
justify-content: center;
align-items: center;
}
.cartpage{
position: absolute;
z-index: 10000;
top: 40px;
margin-left: auto;
margin-right: auto;
display: none;
background-color: white;
width: 90%;
padding: 10px;
overflow: auto;
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
transform: translateY(-100);
transition: .4s;
}
.cartCover {
display: flex;
justify-content: center;
align-items: center;
}
.cartimg {
width: 140px;
height: 140px;
object-fit: cover;
background-size: cover;
object-position: center;
background-repeat: none;
}
.ans {
float: right;
color: black;
}
.bans {
float: right;
color: black;
}
.name {
float: right;
color: black;
}    
.cartfirst {
text-align: center;
margin-bottom: 10px;
}
.myitems {
margin-bottom: 80px;
}
.date{
height: 90px;
font-size: 14px;
font-weight: 700;
}
.spaces {
padding: 8px;
border-bottom: 1px solid #000000;
}
.spaces:first-child {
border-top: 1px solid #000000;
}
.remove{
background-color: #027148;
padding: 8px 15px;
color: white;
margin-top: 10px;
font-size: 12px;
border-radius: 4px;
text-align: center;
width: 140px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.added{
background-color: #027148;
border: none;
padding: 5px 12px;
color: white;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
user-select: none;
cursor: pointer;
}
.added:hover, .sub:hover{
color: #000000;
}
.sub{
background-color: #027148;
border: none;
padding: 5px 12px;
color: white;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
user-select: none;
cursor: pointer;
}
.amount {
color: #000000;
margin: -1px;
border: none;
padding: 5px 12px;
}
.amount:hover {
color: #000000;
}
.checkout{
background-color: #027148;
padding: 8px 13px;
color: white;
margin-top: 10px;
font-size: 12px;
border-radius: 4px;
text-align: center;
width: 140px;
}
.homearrow {
font-size: 16px;
color: black;
}
.homearrow a{
color: #027148;
}
.checkoutarrow {
position: relative;
top: 6px;
font-size: 21px;
color: #000000;
}
.bigcheck {
font-size: 26px;
}
.inform {
font-size: 12px;
border-top: 2px solid #027148; 
background-color: #bbb;
padding: 15px;
}
.control {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: 15px;
margin-right: 15px; 
gap: 10px;
}
.optional {
height: 70px;
font-size: 14px;
}
.optional2 {
font-size: 11px;
color: #027148
}    
form {
display: flex;
flex-direction: column;
margin-left: 15px;
margin-right: 15px;
}
input {
width: 100%;
padding: 4px;
}
label {
float: left;
text-align: left;
margin-top: -35px;
}
label:first-child {
margin-top: auto;
}
.productXquantity, .tableHeader {
display: flex;
flex-direction: row;
background-color: #bbb;
padding: 10px;
}
.productHead, .quantityHead {
font-size: 18px;
}
.productz, .productHead {
font-size: 13px;
width: 60%;
float: left;
text-align: left;
}
.quantitiz, .quantityHead {
font-size: 13px;
width: 20%;
}
.quantityHead {
width: 30%
}
.yourOrder {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
background-color: #bbb;
color: black;
}
#wrong {
margin-top: -3px;
color: tomato;
font-size: 13px;
}
.yourPay {
border: none;
color: black;
margin: 0;
margin-top: 1px;
background-color: #bbb;
text-align: center;
font-size: 14px;
}
.rip {
background-color: #027148;
}
.quantitiz, .productz {
height: 100px;
background-color: #bbb;
border: none;
margin: 0;
font-size: 16px;
overflow: auto;
}
.total{
border: 2px solid #027148;
background-color: #ffffff;
padding: 7px 10px;
font-size: 12px;
margin-top: 10px;
color: #027148;
border-radius: 4px;
width: 140px;
}
.notice {
font-size: 12px;
margin-bottom: 1px;
}
.sumbit {
border: none;
background-color: #027148;
padding: 10px 15px;
color: white;
font-size: 14px;
border-radius: 4px; 
text-align: center;
width: 140px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
font-weight: bold;
}
.end {
display: flex;
flex-direction: row;
gap: 10px;
margin-left: auto;
margin-right: auto;
justify-content: center;
align-items: center;
}
@media screen and (min-width: 600px){
.protect{
height: 520px;
}
.process-head {
height: 562px;
}
.menu-head {
height: 562px;
}
.tutor{
display: none;
}
.nextorder{
display: flex;
flex-direction: row;
}   
}
@media screen and (min-width: 1024px){
.menulist {
display: block;
}
.topnav {
display: none;
}
}