/* header styling */
#storename {
font-family: fontthree; color: #000000 !important; font-size: 1rem; text-transform: capitalise; font-weight: 600; display: flex;
align-items: center; width: max-content; height: max-content; padding-top: 2px;
}
#storelogo {
height: 40px; width: auto; padding: 4px;
}

/* home slideshow */

.slider {
width: 100%; height: max-content;
}
.slide {
width: 500%; height: max-content; display: flex;
}
.slide input {
display: none;
}
.st {
width: 20%; transition: 2s; height: max-content;
}
.st img {
width: 100%; height: auto;
}
 
#radio1:checked ~ .first {
margin-left: 0;
}
#radio2:checked ~ .first {
margin-left: -20%;
}
#radio3:checked ~ .first {
margin-left: -40%;
}
#radio4:checked ~ .first {
margin-left: -60%;
}


/* main styling */
#maintopsearchsect {
width: 100%; height: max-content; background-color: #FFFFFF; display: flex; align-items: center; justify-content: center; 
padding: 15px 10px 15px 10px;
}
.maintopsearch {
width: 100%; max-width: 500px; height: 40px; background-color: #F1F1F1; border-radius: 26px; position: relative; display: flex; align-items: center;
}
.maintopsearch input {
width: 100%; height: 100%;background-color: #F1F1F1; border-radius: 26px; font-size: .85rem; padding: 10px; padding-left: 15px; color: #808080;
border: 2px solid #F1F1F1; padding-right: 64px;font-weight: 500;
}
.maintopsearch input::placeholder {
color: #808080; font-weight: 500;
}
.maintopsearch input:focus {
background-color: #FAFAFA; border: solid 2px #E4E6E9 !important;
}
.maintopsearch button {
position: absolute; z-index: 8; margin-right: 2.2px; width: 60px; height: 90%; right: 0%; background-color: #F1F1F1;display: flex; align-items: center; justify-content: center;
border-radius: 26px;
}
.maintopsearch button img {
height: 60%; width: auto;
}

.maintopsect {
width: 100%; height: max-content; background-color: #FF0000; overflow-x:auto;
}
.maintopsectscroll {
width: max-content; height: max-content; display: flex; align-items: center; justify-content: center; padding: 10px;  min-width: 99vw;
}
.maintoplink {
color: #E4E6E9 !important; font-size: .9rem; font-weight: 600; margin-right: 20px;
}

#homelandmain {
padding: 0%; padding-top: 56px;
}
.mainscreenone {
width: 100%; height: max-content; background-color: #FAFAFA; position: relative; max-height: 600px; display: flex; align-items: center;
justify-content: center; margin-bottom: 10px;
}
.mainscreenone  img {
width: 100%; height: auto;
}
.mainscreenoneboxone {
width: 100%; height: max-content; position: absolute; z-index: 99; bottom: 0%; left: 0%;  padding: 12px;  padding-bottom: 15px;
}
.mainsointrotext {
font-size: .9rem;color: #FFFFFF; padding-bottom: 15px; max-width: 100%; font-weight: 700; text-transform: uppercase; text-align: center;
}
.mainsointrolink {
padding: 10px; background-color: #000000; border-radius: 5px; width: 100px; height: 100px;display: flex; align-items: center; justify-content: center;
color: #FFFFFF !important;  border-radius: 100%;
}
.mainsointrolink span {
color: #FFFFFF !important; font-size: .9rem; font-weight: 550;
}

.lnkboxmain {
padding: 10px 20px 10px 20px; color: #000000 !important; background-color: #FFFFFF; border-radius: 26px; font-size: 1rem;
}

.mainscreenfour {
width: 100%; height: max-content; padding: 10px; display: flex; flex-wrap: wrap; align-items: center; border-top: solid 1px #000000;
border-bottom: solid 1px #000000; justify-content: space-evenly; margin-top: 50px; margin-bottom: 50px;
}


.mainscreenfour {
justify-content: center; border: none;
}
.mainscreenfourscrollbox {
width: 100%; height: max-content; overflow-x: auto;
}
.mainsreenfourscroll {
width: max-content; height: max-content; display: flex; align-items: center; justify-content: center;
}
     
.mainscreenfour h5 {
width: 100%; font-size: 1.2rem; text-align: center; font-family: fonttwo; font-weight: 500;
}
.wswubox {
width: 300px; height: 300px; margin: 10px;padding: 10px; background-color: #F1F4F5; border-radius: 4px;
}
.wswubox img {
margin-bottom: 20px; width: 60px; height: 60px; padding: 10px; background-color: #FFFFFF;
}
.wswubox h4 {
font-size: 1.1rem; margin-bottom: 10px;  font-family: fontthree; font-weight: 600;
}
.wswubox h6 {
font-size: .9rem; color: #808080; font-weight: 500; text-transform: capitalize;
}

.mainscreenfive {
margin-bottom: 30px;
}
.mainsffirsttext {
width: 90%; font-size: .8rem; color: #808080; padding:8px; padding-bottom: 2px; font-weight: 500;
}
.msfboxone {
width: 100%; height: max-content; overflow-x: auto;
}

.msfboxone::-webkit-scrollbar {
height: 3px; display: inline !important;
}
.msfboxone::-webkit-scrollbar-track {
background-color: #F1F4F5;
}
.msfboxone::-webkit-scrollbar-thumb {
background-color: #76808F;
}

.msfboxonescroll {
width: max-content; height: max-content;  display: flex; align-items: center; padding: 10px;
}
#naitemslnk {
display: flex; align-items: center; color: #000000 !important; font-size: 1.4rem; padding-bottom: 5px; font-weight: 900; text-transform: uppercase;
padding-left: 10px; width: 100%; height: max-content; font-family: fontone;
}

.mainscreenmid {
width: 100%; height: max-content; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
}
.msmidboxhold {
width: 100%; display: flex; align-items: center; justify-content: center; position: relative; height: max-content;
}
.msmidbox {
width: 100%; height: max-content; margin: 1vw;
}
.msmidbox img {
width: 100%; height: auto;
}
.msmidboxbox {
padding-bottom: 14px; position: absolute; width: 100%; height: max-content; z-index: 99; bottom: 0%;left: 0%; display: flex; flex-direction: column;
align-items: center;
}
.msmidboxtoptest {
font-family: fontthree; font-size: 1.1rem; padding-bottom: 5px; font-weight: 600;
}

.wapop {
position: fixed; z-index: 999; bottom: 1%; right: 1%; width: max-content; height: max-content; display: flex; align-items: center;
justify-content: center;
}
#wapopmg {
height: 60px; width: auto; background-color:#4E9F3D; padding: 10px; border-radius: 100%;
}
#wapoptest {
font-size: .9rem; font-weight: 450; padding: 6px; border-radius: 5px; background-color: #F1F4F5; margin-right: 6px; border: solid 1px #76808F;
}
#wapoptest span {
font-weight: 590;
}

#mainscreentwo {
width: 100%; margin-bottom: 20px;
}
.mainscreentwosect {
width: 100%; height: max-content; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
}
.mainscreentwosectboxone,.mainscreentwosectboxtwo {
width: 48vw; margin: 1vw; height: max-content; position: relative;
}
.mainscreentwosectboxtwo {
width: 98vw;height:61vw ; 
}
.mainscreentwosectboxone img,.mainscreentwosectboxtwo img {
width: 100%; height: auto;
}
.mainscreentwosectsec {
flex-direction: row-reverse !important;
}
.mstsblnk {
position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; z-index: 95;
}
.mstsbtext {
position: absolute; top: 0%; left: 0%; width: 100%; height: max-content ; z-index: 9; color: #FFFFFF; font-size: 1rem; padding: 10px; padding-top: 12px;
max-width: 80%;
}

.mainscreensvn {
width: 100%; height: max-content; background-color: #FAFAFA; padding: 50px 10px 50px 10px;
}
#mainscreensvntext {
font-size: 1.2rem; color: #000000; padding-bottom: 20px;
}
#mainscreensvnpara {
font-size: 1rem; width: 90%; max-width: 340px; color: #808080; padding-bottom: 30px;
}
#mainscreensvnlnk {
width: max-content; height: max-content; border-radius: 26px; background-color: #FFFFFF; border: #000000 solid 1px; padding: 5px 10px 5px 10px;
display: flex; align-items: center; justify-content: center; margin-bottom: 40px;
}
#mainscreensvnlnk span {
color: #000000 !important;font-size: .9rem;
}
.mainscreensvnmgbox {
width: 320px; height: max-content; display: flex; align-items: center; justify-content: center; margin-right: 12px;
}
.mainscreensvnmgbox img {
width: 100%; height: auto;
}

@media (min-width: 700px) {
/* main styling */
.maintopsearch  {
height: 36px;
}
#homelandmain {
padding-top: 50px;
}
.mainscreenmid {
justify-content: space-evenly;
}
.msmidbox {
width: 50%; margin: 0%; margin-bottom: 5px;
}
.mainscreentwosectscroll {
max-width:100%;
}

.mainscreentwosectboxone {
width: 24%; margin: 5px; 
}
.mainscreentwosectboxtwo {
width: 49%; margin: 5px; height: 30vw;
}
.mainscreentwosect {
flex-wrap: nowrap; align-items: center;
}

}