@font-face { font-family: fontone; src: url(../fonts/Urbanist.ttf);}
@font-face { font-family: fonttwo; src: url(../fonts/Almarai-Regular.ttf);}

:root {
--blue: #00305C;
}

* {
overflow: hidden; box-sizing: border-box; text-decoration: none; background-color: transparent; border: none;
padding: 0%; margin: 0%; font-family: fontone;
}

button:active {
transform: scale(.97);
}
html {
font-size: 17px;
}
body {
width: 100vw; overflow-y: auto; height: 100vh; background-color: #FFFFFF !important; scroll-behavior: smooth;
}
#slidesearchput:focus {
border: solid 1px #F1F4F5 !important;
}
input:focus, textarea:focus{
outline: none !important; box-shadow: none;
}

/* header stying */
header {
width: 100%; height: 50px; display:flex; align-items:center; justify-content: space-between; padding: 3px 12px 0px 10px; background-color: var(--blue);
position: fixed; top: 0%; left: 0%; z-index: 999999;
}
#homeheader {
background-color: transparent;
}
#storelogo {
height: 45px; width: auto; margin: 5px;
}
#headerbox {
width: max-content; height: 100%; display: flex; align-items: center; justify-content: space-between;
}
#menubtn {
height: 35px; width:35px; display: flex; align-items: center; justify-content: center; padding: 5px;
}
#menubtn img {
height: 90%; width: auto;
}

/* slide styling */

.mainslide {
width: 60%; position: fixed; height: 100%; background-color: #FAFAFA; display: flex; flex-direction: column; max-width: 300px;
align-items: flex-start; justify-content: flex-start; padding: 12px; position: fixed; z-index: 9999; top: 0%; left: 0%;padding-top: 70px;
}
.mslnk {
width: 100%; height: max-content; padding: 12px 5px 12px 2px; border-bottom: solid 1px #E4E6E9; color: #000000 !important; 
font-size: 1rem; font-weight: 590;
}

/* main styling */
main {
width: 100%; height: max-content;
}
.mainscreenone {
width:100%; height: max-content; position: relative; display: flex; align-items: center; justify-content: center; max-height: 99vh;
}
.intromgone {
width: 100%; height: auto;
}
.msobottombox {
width: max-content; height: 70px; padding: 10px; padding-left: 30px; background-image: url(../png/Ellipse.png); background-position: 0%; background-size: 70px auto;
position: absolute; z-index: 95; bottom: 0%; left: 0%; background-repeat: no-repeat;  margin-left: 12px; margin-bottom: 20px;
}
.msobottombox p {
font-size: 1.2rem; padding-bottom: 5px; color: #FFFFFF !important; font-weight: 650;
}

#msointrotxt {
position: absolute; top: 1%; left: 0%; width: 100%; font-size: 2.8rem; width: 100%; height: max-content; color: #FFFFFF; font-weight: 580;
padding: 75px 12px 0px 12px; font-family: fonttwo;
}

.mainscreentwo {
background-color: var(--blue); width: 100%; height: max-content; padding: 12px; display: flex; flex-wrap: wrap; align-items: flex-start; 
justify-content: space-between;
}
.mstbox {
width: 100%; height: max-content; padding-top: 50px; padding-bottom: 50px;
}
.introp {
font-size: .9rem; font-weight: 600; padding-bottom: 5px; color: #FFFFFF; text-transform: uppercase;
}
.mstboxintrotext {
font-size: 1.4rem; font-weight: 600; padding-bottom: 15px; color: #FFFFFF; text-transform: uppercase;
}
.mstboxpara {
font-size: 1rem; font-weight: 400; padding-bottom: 10px; color: #FFFFFF;
}
.mstboxlnk {
margin-top: 20px; display: flex; align-items: center; justify-content: center; width: max-content;
}
.mstboxlnk span {
font-size: .9rem; font: 600; color: #FFFFFF !important; margin-right: 10px;
}
.mstboxlnk img {
height: 15px; width: auto;
}
#mstboxform { 
width: 100%; height: max-content; border-radius: 16px; background-color: #FFFFFF; padding: 15px 10px 15px 10px; display: flex; flex-wrap: wrap; align-items: center;
justify-content: flex-start;
}
#mstboxformintrop {
font-weight: 700; font-size: 1.2rem; color: #000000; margin-bottom: 40px; width: 100%; text-transform: uppercase;
}

.mstboxformputbox {
width: 100%; margin-bottom: 30px; display: flex; flex-direction: column; justify-content: flex-start;
}
.mstboxformput {
padding: 5px 5px 10px 5px; border-bottom: solid 1px #000000; font-size: 1rem; width: 100%; height: max-content;
}
.mstboxformputdate {
width: max-content; height: max-content; border: #000000 solid 1px; border-radius: 16px; padding: 4px 10px 4px 10px ; color: #000000;
margin-top: 4px; font-size: 1rem;
}
#mstboxformbtn {
width: 100%; border-radius: 26px; height: 35px; background-color: #000000; color: #FFFFFF; font-size: 1rem; font-weight: 600; margin-top: 10px;
}
#mstdatelbl {
font-size: .9rem; padding-bottom: 5px;color: #808080; }

.mainscreenfour {
width: 100%; height: max-content; padding: 50px 12px 50px 12px;
}
.msfintrotext {
border-left: solid 3px #FEE01E; padding-left: 5px; font-size: 2rem; text-transform: uppercase; font-weight: 600; max-width: 500px; margin-bottom: 30px;
}
.msfscrollbox {
width: 100%; height: max-content; overflow-x: auto; margin-bottom: 50px;
}
.msfscroll {
width: max-content; height: max-content; display: flex; align-items: center; justify-content: flex-start;
}
.msfscrollitem {
width: 320px; height: 200px; padding: 10px; border-radius: 16px; border: solid 2px #E4E6E9; margin-right: 20px;
}
.msfscrollitemtop {
width: 100%; height: max-content; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 12px;
}
.msfsitmgbox {
width: 65px; height: 65px; display: flex; align-items: center; justify-content: center; background-color: var(--blue);
border-radius: 100%; margin-right: 12px;
}
.msfsitmgbox img {
height: 45%; width: auto;
}
.msfsitintrotext {
font-size: 1.2rem; font-weight: 700; color: #000000; text-transform: uppercase;
}
.msfsitintrotext span {
font-size: 1.2rem; font-weight: 700; color: #FEE01E; text-transform: uppercase;
}
.msfsitpara {
font-size: 1rem; font-weight: 500;
}
#mstref h4 {
color: #EA062A; padding: 3px 8px 3px 8px; border-radius: 12px; margin-bottom: 15px; background-color: #FAF1F5; font-size: .8rem;
width: 100%; height: max-content; max-width: 100%; font-weight: 500;
}
#mstref {
width: 100%; height: max-content;
}
#mstref h6 {
color: #458362; padding: 3px 8px 3px 8px; border-radius: 12px; margin-bottom: 15px; background-color: #EDF3EC; font-size: .8rem;
width: 100%; height: max-content; max-width: 100%; font-weight: 500;
}

#aboutuspara {
font-size: 1rem; font-weight: 500; max-width: 500px; padding-bottom: 20px;
}
#aboutuslnk {
display: flex; align-items: center; width: max-content; height: max-content;
}
#aboutuslnk span {
font-size: .9rem; color: #000000 !important; text-transform: uppercase; margin-right: 6px; font-weight: 600;
}

#aboutuslnk img {
height: 12px; width: auto;
}

.mainscreensix {
width: 100%; padding: 40px 12px 40px 12px; background-color: var(--blue);
}
#msscrollbox {
width: 100%; overflow-x: auto; height: max-content; padding-top: 10px;
}
#msscroll {
width: max-content; height: max-content; display: flex; align-items: center;
}
.msscrollitem {
width: 320px; height: 450px; background-color: #FFFFFF; margin-right: 20px; position: relative; border-radius: 2px;
}
.msscrollitema {
position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; z-index: 95;
}
.msscrollitemmg {
width: auto; height: 55%; margin-bottom: 12px;
}

.msscrollitemtpc {
font-size: 1.3rem; font-weight: 650; color: #000000 !important; padding: 0px 8px 12px 8px;
max-height: 3.1rem; 
}
.msscrollitemp {
font-size: 1rem; font-weight: 500; color: #000000 !important; padding: 0px 8px 12px 8px;
max-height: 7.5rem;
}

.maingallshowmg {
height: 220px; width: auto; margin-right: 15px;
}


/*bottom styling */

.bottomcont {
width: 100vw; height:max-content; display: flex;flex-wrap: wrap; flex-direction: row; background: #F1F4F5; padding: 30px 10px 20px 10px; align-items: flex-start;
}
.bottomcontbox {
width: max-content; height: max-content; display: flex; flex-direction: column; margin-right: 50px; margin-bottom: 12px;
}
.bottomcontbox h4 {
color: 1.3rem; width: 100%; color: #000000; padding-bottom: 15px; font-weight: 600;
}
.viewbottom {
padding-bottom: 20px;
}
#bottomclk{
width: max-content; padding-bottom:12px; color: #000000 !important; font-size: .9rem; font-weight: 500;
}
.bottompaytrick {
display: flex; align-items: center; justify-content: center; width: 100%; height: 30px;margin-bottom: 30px;
}
.bottompaytrick img{
margin-right: 10px; width: auto; height: 100%;
}
.bottomsocialbox {
width: 100%; height: max-content; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: center;
}
.bottomsocial {
height: 30px; padding: 2px; width: max-content; display: flex; align-items: center; justify-content: center; padding-right: 10px;
}
.bottomsocial img {
height: 98%; width: auto; 
}
.payngs {
height: 55% !important;
}
.maphold {
width: 100%; max-width: 380px; max-height: max-content; position: relative; display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.maphold img {
width: 100%; height: auto;
}
.maphold a {
position: absolute; top: 0%; left: 0%; z-index: 95; width: 100%; height: 100%;
}
     
#pyrexanchdiv {
width: 100%; background-color: #F1F4F5;  padding: 5px; display: flex; justify-content: center; height: max-content; border-top: solid #FFFFFF 1px;
}
          
#pyrexanchdiv a {
color: #000000 !important; width: max-content; height: max-content; font-size: .7rem;
}
#pyrexanchdiv a span {
text-decoration: underline;
}
#bottomcp {
font-size: .9rem; color: #808080; width: 100%; padding-top: 5px;
}

#lgnmain {
display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 99vh;
}
#lgnmain h1 {
font-size: 2rem;
}
#lgnmain p {
font-size: .9rem; color: #808080; 
}
.putbox,.signputbox {
width: 100%; height: 60px; margin-top: 10px;border-radius: 10px;
display: flex; justify-content: center;align-items: center; position: relative;
}
#loginform,#signupform {
width: 100%; height:max-content;padding: 10px; padding-top: 10vh;
}

.loginformput,.signupformput {
width: 100%; height: 100%; border: #A8BAC1 solid 1px; border-radius: 10px; padding: 10px; font-size: .9rem;
}
#loginformbtn,#signupformbtn {
width: 100%; height: 60px; color: #FFFFFF !important; background-color: #000000; font-size: .9rem;
border-radius: 10px; margin-bottom: 20px; margin-top: 30px;
}
.passeyebox {
position: absolute; width: max-content; height: max-content;right: 3%; display: flex; 
justify-content: center; align-items: center; z-index: 9; padding: 2px;
}
.passeyebox:active{
transform: scale(.96);
}
.passeyebox img {
width: auto; height: 24px;
}

#recoverpass {
width: 100%; text-align: end; color: #808080 !important; font-size: .9rem; font-weight: 590;
padding: 4px;
}
     
#tosignup span{
color: #098551 !important; text-decoration: underline; font-weight: 900;
} 
#tosignup {
width: 100%; color: #000000 !important; font-size: .9rem; padding: 4px;
}
     
.ls-box {
width: 100%; height: max-content; display: flex; border-radius: 16px; background-color: #FCEBEC;
 }
.ls-box  img {
width: 20px; height: 20px; margin: 5px;
}
.ls-box p {
font-size: .4rem; color: #FF0000 !important; padding: 5px;
 }

#adminmain {
padding: 80px 12px 50px 12px; min-height: 99vh;
}
.controltop {
width: 100%; height: max-content; display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px #000000 solid;
}
.controltop h3 {
font-size: .9rem;
}
.controltop h4 {
font-size: 2rem;
}
.controlbox { 
width: 100%; height: max-content;
}
#additemform {
width: 100%; height: max-content; display: flex; flex-wrap: wrap; align-items: center;
}
.addformbox {
width: max-content; height: max-content; width: 100%; max-width: 410px; margin-bottom: 10px;
}
.addformbox label {
font-size: .8rem;
}
.addformput,#pchecksel {
width: 100%; max-width: 410px; height: 50px; border: solid #A8BAC1 1px; padding: 10px; border-radius: 4px; font-size: .8rem;
}
#promoalertest {
font-size: .7rem; color: #ACD0A0; border: 1px solid #ACD0A0; width: max-content; height: max-content; padding: 5px 10px 5px 10px;
margin-bottom: 10px;
}
.addformtext {
width: 100%; height: 200px; border: solid #A8BAC1 1px; padding: 10px; border-radius: 4px; font-size: .8rem;
}
#addformbtn{
width: 100%; height: 50px; border-radius: 4px; color: #FFFFFF !important; background-color: #000000; max-width: 410px;
}
#addformmg {
width: 100%; border-radius: 4px; max-width: 360px;display: flex; padding: 12px ; margin-bottom: 10px;  height: 50px;
border: solid #A8BAC1 1px;
}
#controlalert {
width: max-content; max-width: 100%; padding: 4px; display: flex; align-items: center;
border: solid 1px #FF0000; background-color: #EF8F8F; margin: 2px;
}
#controlalert img {
width: 18px; height: 18px; margin-right: 10px;
}
#controlalert span {
font-size: .8rem; 
}

/* color control */
.clrcntrlreflct,#clrcntrlform {
width: 100%; height: max-content; display: flex; flex-wrap: wrap; 
}
#clrcntrlform {
margin-bottom: 20px; border-bottom: #F1F4F5 1px solid;
}
     
.clrcntrlreflct {
margin-bottom: 10px; padding-bottom: 10px; 
}
.clrshowbox {
width: max-content; height: max-content; border:  1px solid; display: flex; padding: 10px; align-items: center;
margin-bottom: 10px; margin-right: 10px;
}
.colorshowimg {
width: 40px; height: 40px; margin-right: 12px;
}
.clrshowbox h3 {
font-size: .9rem;
}
.clrshowbox a {
display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 100%; border: #000000 1px dashed;
 margin-left: 10px;
}
.delclrimg {
width: 90%; height: auto;
}
     
.clrformbox {
width: 100%; height: max-content; display: flex; flex-direction: column; max-width: 410px; margin-top: 10px;
}
     
.clrformbox input {
width: 100%; height: 45px; border: solid 1px #A8BAC1; font-size: .8rem;
}
.clrformbtn {
width: 100%; max-width: 410px; height: 45px; color: #FFFFFF; background-color: #000000; 
}
#clrmgput {
padding: 10px; 
}
.clrformlnk {
width: 100%; max-width: 360px; height: 45px; color: #000000 !important; background-color: #FFFFFF; border:solid 2px #000000;
display: flex; align-items: center; justify-content: center; margin-top: 10px;
}

/* blog styling */
.blogmain {
width: 100%; height: max-content; padding-bottom: 60px;
}
.blogmainscreen{
width: 100%; height: max-content; padding: 12px;
}
.blogtop {
width: 100%; display: flex; align-items: center; justify-content: center; height: 300px; margin-bottom: 10px;
}
.blogtop img {
width: 100%; height: auto; min-height: 100%;
}
.blogtittle {
font-family: fonttwo; font-size: 1.8rem; padding-bottom: 20px;
}
.blog-introduction {
     font-size: .9rem;  max-width: 1000px;
     }
     .bloghold {
     display: flex; align-items: flex-start; justify-content: space-between; padding-top: 40px; max-width: 1000px;
     }
     .blogp {
     font-size: .9rem; font-weight: 500; width: 93%;
     }
     .blognum,.blogtopic {
     font-size: 1.2rem; font-weight: 600; margin-bottom: 20px;
     }
     
     .blogbottom {
     width: 100%; border-top: 1px #E4E6E9 solid; height: max-content; padding: 30px 12px 100px 12px; margin-top: 40px; display: flex;
     flex-wrap: wrap; align-items: center; justify-content: center;
     }
     #blogbottomtext {
     font-size: 1.4rem; font-family: fonttwo; padding-bottom: 25px; width: 100%;
     }
     .blogbottombox {
     position: relative; width: 100%; display: flex; align-items: center; justify-content: center; max-width: 400px; margin-bottom: 30px;
     border-radius: 5px;
     }
     .blogbottombox a {
     position: absolute; z-index: 9; width: 100%; height: 100%; background-color: #808080; opacity: .3; top: 0%; left: 0%;
     }
     .blogbottombox p {
     width: 90%; position: absolute; padding: 10px; bottom: 0%; left: 0%; height: max-content; color: #FFFFFF !important; font-weight: 600;
     font-size: 1.1rem; 
     }
     .blogbottombox img {
     height: 100%; width: auto; min-width: 100%;
     }

     .bloglisthold {
     display:flex; flex-direction: column; align-items: flex-start;
     }
.bloglist {
padding-left: 7%; padding-top: 7px; width: 100%;
}
.bloglist span,#blogoutro span {
font-weight: 600;
}
#blogoutro {
padding-top: 12px;
}

@media (max-width: 700px) {
::-webkit-scrollbar,.deskinclude{
display: none !important; 
}
}

@media (min-width: 700px) {
/* control styling */
.addformbox {
width: 24%; min-width: 340px;  margin-right: 10px; margin-bottom: 30px;
}
.addformput,#addformbtn {
height: 45px;
}
#addformbtn {
width: 320px; margin-top: .8rem;
}
.addformtext {
height: 150px;
}
.textformbox {
max-width: 500px; width: 30%;
}
#addformmg {
margin-right: 10px; height: 45px;
}
     
/* color control */
.clrformbox, .clrformbtn,.clrformlnk {
max-width: 340px; margin: 0px 10px 10px 0px;
}

/* login stylin */
#loginform,#signupform  {
width: 30%; min-width: 380px; max-width: 400px;
}
#signupform {
display: flex; flex-wrap: wrap;width: 50%; min-width: 600px; max-width: 700px;
}
#signupformbtn {
width: 45%; margin-top: 20px;
}
.signputbox {
width: 45%; margin: 10px 10px 0px 0px; height: 56px;
}
.putbox,#loginformbtn,#signupformbtn {
height: 56px;
}
.ls-box {
width: max-content; height: max-content; display: flex; align-items: center; border-radius: 16px; background-color: #F1F4F5;
min-width: 80%;
}
.ls-box  img {
width: 16px; height: 16px; margin: 5px;
}
.ls-box p {
font-size: .6rem; color: #000000 !important; padding: 5px;
}
/* main styling */

.mobinclude {
display: none !important; 
}
::-webkit-scrollbar {
width: 8px; 
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #F1F4F5;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--blue);
} 
#msointrotxt {
font-size: 3.8rem;
}
}

@media (min-width: 800px) {
/* main styling */
.mainscreentwo {
flex-direction: row-reverse;
}
.mstbox {
width: 50%; padding: 50px 30px 50px 20px;
} 
}

@media (min-width: 1000px) {
/* main styling */
.mstboxi {
width: 48%;
} 

#msointrotxt {
font-size: 4.8rem;
}

}

@media (min-width: 1100px) {
/* main styling */
.mstboxformputbox {
width: 45%; margin-right: 5%;
} 
}