@import url('https://fonts.googleapis.com/css2?family=Overlock:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Overlock:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');
html{margin:0px; padding:0px;}
body{margin:0px; padding:0px;}
#bgbk{background:#000000b5; height:0vw;}
#topheader{height:auto; width:100%; margin:0vw auto; position:absolute; top:0vw;left:0vw; border-top:1vw solid #fff;}
.topheaderone{}
.topheadertwo{background:#ffffff6b; 	display:flex; flex-direction:row;  justify-content:space-between; padding:0vw; align-items: center;}
.headerlogo{display:flex; flex-direction:row;  padding:1vw;}
.headerlogorsp{width:78%; padding-left:1vw;}
.headercontact{}
.headersocial{display:block}
.headerbtncol{	display:flex; flex-direction:row;  justify-content:space-around;}
.headerbtnone{text-decoration:none; color:#fff; padding:1.5vw 1vw; font-size:1vw;   font-family: "Josefin Sans", sans-serif; font-weight: 400; font-style: normal; text-transform:uppercase; background:#009dff; display:block; margin:1vw 1vw 1vw 0vw;}
.headerbtnone:hover{text-decoration:none; color:#000; padding:1.5vw 1vw; font-size:1vw;   font-family: "Josefin Sans", sans-serif; font-weight: 400; font-style: normal; text-transform:uppercase; background:yellow;}

.headerbtnt{text-decoration:none; color:#fff; padding:1.5vw 1.4vw; font-size:1.2vw;   font-family: "Josefin Sans", sans-serif; font-weight: 400; font-style: normal; text-transform:uppercase;  background:#009dff;  display:block; margin:1vw 1vw 1vw 0vw;}
.headerbtnt:hover{text-decoration:none; color:#000; padding:1.5vw 1.4vw; font-size:1.2vw; margin:1vw 1vw 1vw 0vw;  font-family:"Josefin Sans", sans-serif; font-weight: 400; font-style: normal; text-transform:uppercase;  background:yellow;}
.topheaderthree{background:#ffffff00; display:flex; flex-direction:row;  justify-content:start; border-top:.0vh solid #eee; padding-left:1vw;}
.topheaderthree a{text-decoration:none; color:#666666; padding:1vw; font-size:1vw;   font-family:"Josefin Sans", sans-serif; font-weight: 900; font-style: normal; text-transform:uppercase;} 
.topheaderthree a:hover{text-decoration:none; color:#006ccc; padding:1vw; font-size:1vw;   font-family:"Josefin Sans", sans-serif; font-weight: 900; font-style: normal; text-transform:uppercase;}
.activebtn{background:#006ccc;}

#silder{width:100%; height:auto;}
.silderrsp{width:100%;}


.silderbtn{}
.heding{text-decoration:none; color:#f3f3f3; padding:1vw 2vw; font-size:2vw;   font-family: "Josefin Sans", sans-serif; font-weight: 500; font-style: normal; text-transform:uppercase; background:#5a69bf; text-align:center;}

/*

.overlock-regular {
  font-family: "Overlock", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.overlock-bold {
  font-family: "Overlock", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.overlock-black {
  font-family: "Overlock", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.overlock-regular-italic {
  font-family: "Overlock", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.overlock-bold-italic {
  font-family: "Overlock", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.overlock-black-italic {
  font-family: "Overlock", sans-serif;
  font-weight: 900;
  font-style: italic;
}

*/

.josefin-sans-regular {
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.sidebarbox{display:none;}
.boxbar{display:none;}
.boxclosed{display:none;}
.sidebarbar{display:none;}
.mlogosection{display:none;}
#mbox{display:none;}
.whatsappicon{display:block;position:fixed; bottom:1vw; right:2vw; rotate: -90deg;}
.whatsappicon i{font-size:3vw; padding:.5vw; background:#25D366; border-radius:10%; color:#fff;}
.whatsappicon i:hover{background:#009dff; color:#000;}
.dropbtn {
  background-color: transparent;
  color: #666666;
  padding: 1vw;
  font-family:"Josefin Sans", sans-serif;
  font-size: 1vw;
  border: none;
    font-weight: 700;
    text-transform: uppercase;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: yellow;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 1vw 1.5vw;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {color: #006ccc;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color:transparent; color: #006ccc;}



#card {
  width: 20vw;
  height: auto;
  right: 14vw;
  position: absolute;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  -o-transition: -o-transform 0.4s;
  transition: transform 0.4;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

figure {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.front {background: red;}

.back {
font-size:2vw!important;
  background: yellow;
  text-align:center;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}
#card:hover {transform:rotateY(180deg);}


#card1 {
  width: 20vw;
  height: auto;
  right: 0vw;
  top:0vw;
  position: absolute;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  -o-transition: -o-transform 0.4s;
  transition: transform 0.4;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

figure {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.front1 {background: red;}

.back1 {
font-size:2vw!important;
  background: yellow;
  text-align:center;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}
#1card:hover {transform:rotateY(180deg);}
  

@media screen and (max-width:600px){
#bgbk{background:#000; height:31vw;}
#silder{}
.heding{padding: 2vw 1vw; font-size: 2.5vw;}
#topheader{height:0vw; width:100%; margin:0vw auto; position:relative; top:0vw;left:0vw; border-bottom:0vw solid transparent;}
.topheadertwo{background:transparent;	display:none; flex-direction:column;  justify-content:space-between; padding:1vw 1vw; align-items: center;}
.headersocial{display:none;}
.headerbtncol{	display:flex; flex-direction:row;  justify-content:space-around;}
.headerbtnone{text-decoration:none; color:#fff; padding:2vw 4vw; font-size:3vw;   font-family: "Overlock", sans-serif; font-weight: 500; font-style: normal; text-transform:uppercase; background:#666666; display:block;}
.headerbtnone:hover{text-decoration:none; color:#000; padding:2vw 4vw; font-size:3vw;   font-family: "Overlock", sans-serif; font-weight: 500; font-style: normal; text-transform:uppercase; background:yellow;}

.headerbtnt{text-decoration:none; color:#fff; padding:2vw 4vw; font-size:3vw;   font-family: "Overlock", sans-serif; font-weight: 500; font-style: normal; text-transform:uppercase;  background:#666666; display:block;}
.headerbtnt:hover{text-decoration:none; color:#000; padding:2vw 4vw; font-size:3vw;   font-family: "Overlock", sans-serif; font-weight: 500; font-style: normal; text-transform:uppercase;  background:yellow;}
.headerlogorsp{width:100%;}

.topheaderthree{background:#fff; display:none; flex-direction:row;  justify-content:start; padding:0.2vw 1vw; align-items: center; border-top:.2vh solid #eee;}

.sidebarbox{position:fixed; top:30vw; right:0vw; background-color:#fff;  display:none;  align-self:center; height:90vh; flex-direction:column; z-index:999; width:35%; backdrop-filter: blur(1vw); border-top:2vw solid black;}
.sidebarbox a{display:block; text-align:center; font-size:3vw; margin:3vw auto; padding:2vw; background:transparent;  text-transform: uppercase; color:#000; text-decoration:none; font-weight:700;} 
.sidebarbox a:hover{background:#000; color:#fff;}
.sidebarbar{display:flex; align-items:flex-start; justify-content:start; align-self:center; flex-direction:column; }

.boxbar{display:block; align-self:center; z-index:999;}
.boxbar i{font-size:7vw; color:#000; font-weight:900;}
.boxclosed{display:block; position:fixed; top:2vw; left:2vw; align-self:center; z-index:999;}
.boxclosed i{font-size:10vw; color:#000; font-weight:900;}
#mbox{position:fixed; top:0vw; right:0vw; width:100%; text-align:center; align-self:center; height:30vw; border-bottom:2vw solid black;display:block; background:#fff; padding-bottom:5vw;}
#mbox img{width:66%; padding:2vw 0vw;}
.mlogosection{ display:flex; align-items:flex-start; justify-content:space-around; align-self:center;}
.mboxbtno{text-decoration: none; color: #fff; padding: 1vw 2vw; font-size: 4vw; font-family: "Overlock", sans-serif; font-weight: 500; font-style: normal; text-transform: uppercase; background: #666666; display: block;}
.mboxbtnt{text-decoration: none; color: #fff; padding: 1vw 2vw; font-size: 4vw; font-family: "Overlock", sans-serif; font-weight: 500; font-style: normal; text-transform: uppercase; background: #666666; display: block;}
.whatsappicon{display:block;position:fixed; bottom:3vw; right:3vw; rotate: -90deg;}
.whatsappicon i{font-size:10vw; padding:2vw; background:#25D366; border-radius:10%; color:#fff;}
.whatsappicon i:hover{background:#009dff; color:#000;}



}