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

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

button:active {
transform: scale(.97);
}
body {
width: 100vw; overflow-y: auto; height: 100vh; background-color: #FFFFFF !important; scroll-behavior: smooth; max-width: 1600px;
}
input:focus, textarea:focus{
outline: none !important;
border-bottom: solid 1px #00568B !important;
}

/* header styling */

header {
width: 100%; height: 50px; background-color: #001428; padding: 8px 10px 5px 10px; display: flex; align-items: center; justify-content: space-between;
position: fixed; z-index: 99999;
}

#storelogo {
height: max-content; width: max-content; display: flex; align-items: center; justify-content: center;
}
#storelogo img {
height: 35px; width: auto; 
}

.hdrlnkbox {
width: max-content; height: max-content; display: flex; align-items: center; justify-content: center;
}
.hdrlnkbox a {
color: #FFFFFF !important; font-size: 1rem; margin-right: 30px; width: max-content; height: max-content;
}

/* main styling */
.mainscreenone {
width: 100%; height: max-content; display: flex; align-items: center; justify-content: center; max-height: 100vh; padding-top: 47px;
}
#introbanner {
width: 100%; height: auto;
}
.mainscreentwo {
width: 100%; height: max-content; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding-top: 25px;
}

.introboxtext {
font-size: 1.6rem; width: 100%; font-weight: 800; text-align: center; padding-bottom: 25px; font-family: fonttwo;
}

.mstboxone {
width: 100%; height: max-content; display: flex; align-items: center; justify-content: center; padding: 20px;
}

#mstboxoneban {
width: 100%; height: max-content; border: solid 1px #E4E6E9; box-shadow: 1px 1px 6px 2px #FAFAFA; border-radius: 16px;
display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px;
}

.mstboxonebansect {
width: 100%; height: max-content; padding: 20px 12px 20px 12px; border-bottom: solid 1px #E4E6E9; display: flex; align-items: center; 
justify-content: space-between;
}
.mstboxonebansect p {
font-size: 1rem; font-weight: 600; text-transform: uppercase; width: 170px;
}
.mstboxonebansect img {
height: 24px; width: auto; padding-right: 50px;
}
.mstboxoneii {
padding: 25px;
}
.mstboxonebansectlst {
border: none;
}

#mstban {
width: 90%; height: auto; max-width: 380px;
}

.mainscreenthree {
margin-top: 50px; background-color: #001428; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
}
.msvboxone {
width: 100%; padding: 15px;
}

#msvintrotext {
color: #FFFFFF; font-size: 2.5rem; font-family: fonttwo; padding-bottom: 30px;
}
#msvpara {
color: #FFFFFF; max-width: 550px; padding-bottom: 30px;
}
#msvlink {
background-color: #F6851F; width: max-content; height: max-content; width: 110px; height: 110px;  border-radius: 100%; position: relative;
display: flex; align-items: center; justify-content: center;
}
#msvlink span {
color: #FFFFFF !important; font-size: 1rem; 
}
#msvlink a {
width: 100%; height: 100%; position: absolute; z-index: 9;
}
.msvboxtwo {
width: 100%; height: 100%;
}
.msvboxtwo img{
height: auto; width: 100%;
}

.mainscreentwoii {
background-color: #FAFAFA; align-items: flex-start;
}
#contactform {
background-color: #FFFFFF; padding: 25px 15px 15px 15px; width: 100%; height: max-content; border: solid 1px #E4E6E9; border-radius: 16px;
max-width: 600px;
}
.cfputbox {
width: 100%; height: max-content; max-width: 600px; padding-bottom: 20px; display: flex; flex-direction: column;
 align-items: flex-start; justify-content: flex-start;
}
.reachput {
width: 100%; height: 45px; padding: 8px 5px 6px 4px; font-size: 1rem; border-bottom: #001428 solid 1px;
}
#contactformintro {
width: 100%; padding-bottom: 35px;
}
#contactformintro span {
font-size: 1.2rem; font-weight: 600;
}
#contactformintro img {
height: 20px; width: auto;
}
.cfputbox label {
width: 100%;
}
#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;
}

.reachsecbox {
width: 100%; max-width: 480px;
}
.rsbmgbox {
height: 60px; width: 60px; border-radius: 100%; background-color: #FFFFFF; display: flex; align-items: center; justify-content: center;
margin-top: 25px; margin-bottom: 15px;
}
.rsbcontact {
color: #001428 !important; font-size: 1.2rem; margin-bottom: 30px; max-width: 480px;
}
.mstboxtwoii {
width: 100%; height: max-content; padding: 20px;
}
#cfselopt {
width: 250px; border: solid 1px #001428; font-size: .9rem; border-radius: 8px; padding: 10px; height: 40px; margin-top: 10px;
}
#cfputsubbtn {
height: 40px; width: 100%; background-color: #001428; font-size: 1rem; color: #FFFFFF !important; padding: 10px;
margin-top: 20px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
}
#msfintrotext {
font-size: 3rem; font-weight: 900; color: #FFFFFF; margin-bottom: 36px;
}
#msfintrotext span {
color: #F6851F; font-size: 3rem; font-weight: 900; 
}
#msfpara {
color: #FFFFFF; font-size: 1rem; margin-bottom: 30px; max-width: 500px;
}
#msfpara span {
color: #FFFFFF; font-size: 1rem; font-weight: 600;
}

/* about us */

.mstboxonev {
align-items: flex-start; justify-content: flex-start; padding-top: 0px;
}
.abtmidscreen {
background-image: url(../png/abtmidmg.png); background-position: center; background-repeat: no-repeat; background-size: auto 100%;
padding-bottom: 100px; align-items: flex-start;
}

.abtmidintro {
color: #F6851F; font-size: 1.2rem; font-weight: 600; margin-bottom: 20px;
}
.abtmidpara {
color: #FFFFFF; font-size: 1rem; margin-bottom: 40px; max-width: 450px;
}
.abtmstboxone {
flex-direction: column; align-items: flex-start; padding-top: 0px;
}
.abtmidlist {
color: #FFFFFF; font-size: 1rem; 
}
.abtmidseclist {
font-size: 1rem; margin-bottom: 8px;
}
.tstmainscreentwo {
align-items: flex-start; padding: 40px 15px 40px 15px;
}

.abtmidlistpnt {
width: 100%; height: max-content; display: flex; align-items: flex-start; justify-content: flex-start; padding-bottom: 5px;
}
.abtmidlistpnt img {
width: 7px; height: auto; margin-right: 11px; margin-top: 7px;
}
.abtmidlistpnt span {
width: 96%; height:max-content;
}
.pntyt {
color: #FFFFFF;
}
.abtmidlistpnti {
margin-bottom: 15px;
}
/* footer sty;ing */

footer {
width: 100%; height: max-content; padding: 30px 10px 30px 10px; background-color: #001428; display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; border-top: 4px #FFFFFF solid;
}
#footerlogo {
height: 30px; width: auto; margin-bottom: 15px;
}
#footertxt {
width: max-content; font-size: .9rem; color: #E4E6E9;
}
/* 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;
     }

/* bottom */
.bottom {
width: 100%; height: max-content; padding: 5px; display: flex; align-items: center; justify-content: center; background-color: #001428;
border-top: 1px solid #e4e6e9;
}
.bottom a {
width: max-content; height: max-content; color: #FFFFFF !important; font-size: .8rem;
}
@media (max-width: 700px) {
::-webkit-scrollbar,.deskinclude {
display: none !important; 
}  
}

@media (min-width: 700px) {
.mobinclude,#menubtn {
display: none;
}

::-webkit-scrollbar {
width: 4px; 
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #F1F4F5;
}
::-webkit-scrollbar-thumb:hover {
background-color: #02315C;
}
          
/* DESK MAIN */

.mstboxone {
width: 50%;
}
.mstboxonebansect p {
font-size: 1.8rem; font-weight: 600; text-transform: uppercase;
}
#mstban {
width: 80%; height: auto;
}
.msvboxone {
width: 60%;
}
.msvboxtwo {
width:40%;
}
.introboxtext {
font-size: 2.6rem;
}

.mstboxtwoii {
width: 40%; max-width: 520px; padding: 0px 10px 20px 30px;
}
.mstboxoneiii{
width: 60%; max-width: 520px;
}
.mainscreentwoii {
background-color: #FAFAFA; align-items: flex-start; justify-content: flex-start; padding: 50px;
}
#contactform {
margin-right: 40px;
}

#footerlogo {
margin-bottom: 0px;
}

.abtmidscreen {
background-size: 100% auto; padding-top: 50px;
}

}