::-webkit-scrollbar{
  width: 1vh;
  height: px;
  background-color: rgb(236, 227, 227);
  border-radius: 30px;
  scroll-behavior: smooth;
}
::-webkit-scrollbar-track{
  background: hsl(0, 2%, 11%);
  border-radius: 100vh;
}
::-webkit-scrollbar-thumb{
 width: 20vh;
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(rgb(80, 78, 78),rgba(246, 246, 247, 0.229));
}

.policyinformation{
    width: 80%;
    padding: 5%;
    margin: 5%;
    backdrop-filter: blur(8px);
    border-radius: 15px;
    height: 65vh;
    background: rgba(255, 255, 255, 0.456);
}


.policyinformation p {

    width: 100%;
    height: 40vh;
}

.policyinformation h1{
    font-size: 1em;
}
.policyinformation h2{
    font-size: 0.5em;
    height: 5vh;
    overflow: scroll;
}
.policyinformation h3{
    width: 50%;
    height: 10vh;
    padding-left: 25%;

}

.logo{
  position: fixed;
  width: 5vh;
  height: 10vh;
  top: -15;
  left: 40%;
  margin: 0;
  z-index: 1000000000;
  align-items: center;
  justify-content: space-between;
}
.logo h1{ 
font-size: 0.5em;
}
.logo img{
  width: 100%;
  height: 100%;
}
.contact-us-gif{
  position: fixed;
  top: 10;
  left: 80%;
  margin: 0;
  z-index: 1000000000;
  align-items: center;
  justify-content: space-between;
}
.contact-us-gif h1{ 
font-size: 0.5em;
}
.contact-us-gif img{
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
}
.desk-top-website{
        display: ;
        position: fixed;
        top: 0;
        margin: 0;
        padding: 0;
        z-index: ;
        width: 100%;
        height: 100vh;
        background-color: black;
}
.background{ 
    background-image: url(images/2_20230216_091353_0001.png);
    width: 100%; height: 170vh;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(8px);
    z-index: 1000000;
}

.music {
    position: absolute;
    width: 90%;
    height: 10vh;
    padding: 5%;
    top: 310;
    left: 0;
    overflow: scroll;
  }
  .music .music-container{
      width: 20vh;
      height: 5vh;
      padding: 10%;
      background: blue;
    }
    .music .music-container audio{
       
}
.heade{
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 21vh;
     z-index: 20;
     background: rgba(255, 255, 255, 0.549);
}

.heade img{
     position: fixed;
     width: 100%; 
     top: -100;
     left: 0;
     border-bottom-right-radius: 30px;
     border-bottom-left-radius: 30px;
     box-shadow: -10px -10px 15px rgb(255, 255, 255),
                 10px 10px 15px rgb(255, 255, 255)  ;
    border: none;
}
.heade H1{
  position: absolute;
  top: 40%;
  left: 10%;
  text-align: center;
  z-index: 21;
  color: white;
}
a{
    text-decoration: none;
    text-decoration-style: none;
  }
  .dropdown{
  position: fixed;
  top: -65;
  left: 0;
  z-index: 101;
  background: rgba(255, 255, 255, 0.478);
  width: 50%;
  height: 80vh;
  background: none;
  overflow: scroll;
  clip-path: circle(10% at 10% 90%);
  -webkit-clip-path:circle(9% at 10% 15%);
  transition:  all 3s ease-in-out;
  }
  
  .dropdown .cover-backgrounds{
    top: 90;
    left: 10;
  }
  
  .dropdown .dropdown-icon img{
     height: 100%;
     margin: 2vh;
    }
  
    .dropdown .dropdown-icon {
     width: 15vh;
     height: 10vh;
     position: relative;
     top: 120;
     left: 10;

     padding-bottom: 8vh;
     justify-content: space-between;
    }
  
    .dropdown .dropdown-icon1 {
      width: 5%;
      height: 5%;
      position: relative;
      top: 80;
      left: 10;
      display: flex;
      padding-bottom: 4vh;
      justify-content: space-between;
     }
    .dropdown .dropdown-icon h1{
      font-size: 0.7em;
      width: 100%;
      text-transform: capitalize;
      color: rgb(255, 255, 255);
      background: rgba(0, 0, 0, 0);
      padding: 5px;
      border-radius: 20px;
      object-position: center;
      justify-content: space-between;
      position: relative;
      left: 10%;
      top: -25%;
      text-align: center;
       }
  
  .dropdown:hover{
    background: rgba(255, 255, 255, 0.522);
    border-radius: 30px;
    clip-path: circle(1000% at 10% 90% );
    -webkit-clip-path:circle(1000% at 10% 90% );
  }


.contentslider{
  width: 100%;
  height: 0%;
   align-items: center;
}

.contentslider1{
  width: 100%;
  height: 0%;
   align-items: center;
}

.contentslider2{
  width: 100%;
  height: 0%;
   align-items: center;
}

.contentslider3{
  width: 100%;
  height: 0%;
   align-items: center;
}

.contentslider4{
  width: 100%;
  height: 0%;
   align-items: center;
}
.contentslider h1{
  position: relative;
  top: -348;
  left: 213;
  width: 30%;
  background: white;
  border-radius: 15px;
  font-size: 1em;
  padding: 4%;
}

.contentslider1 h1{
  position: relative;
  top: -420;
  left: 13;
  width: 30%;
  background: white;
  border-radius: 15px;
  font-size: 1em;
  padding: 4%;
}

.contentslider2 h1{
  position: relative;
  top: -400;
  left: 13;
  width: 30%;
  background: white;
  border-radius: 15px;
  font-size: 1em;
  padding: 4%;
}

.contentslider3 h1{
  position: relative;
  top: -350;
  left: 13;
  width: 30%;
  background: white;
  border-radius: 15px;
  font-size: 1em;
  padding: 4%;
}

.contentslider4 h1{
  position: relative;
  top: -318;
  left: 13;
  width: 30%;
  background: white;
  border-radius: 15px;
  font-size: 1em;
  padding: 4%;
}

.imageslides{
  position: relative;
  top: 8;
  left: 3;
  width: 100%;
  overflow: scroll;
  display: flex;
}
.imageslides .products{
  position: relative;
  top: 8;
  left: 3;
  margin: 1vh;
  width: 30vh;
}
.imageslides .products img{
  width: 30vh;
  height: 30vh;
  border-radius: 30px;
}


.SEOintro {
    width: 100vh;
    height: 30vh;
    padding: 5vh;
    margin: 5vh;
    display: flex;
}

.SEOintro p{
    width: 100vh;
    height: 30vh;
    margin: 2vh;
    overflow: scroll;
    z-index: 5;
}

.socialmedia {
    width: 100vh;
    height: 50vh;
    padding: 5vh;
    margin: 5vh;
    display: flex;
}


.SEOintro2 p .see {
    width: 50vh;
    height: 50vh;
}

.buynow{
  width: 40vh;
  height: 10vh;
  background: rgba(255, 255, 255, 0.722);
  font-size: 2em;
  border: 1px solid ;
  align-items: center;
  padding: 5vh;
  border-radius: 30px;
  position: relative;
  top: -340;
  left: 70;
}
.pargraph{
    position: relative;
    top: -460;
    right: -120;
    width: 100vh;
    height: 50vh;
    overflow: scroll;
}
.shopnow{
  width: 80vh;
  height: 10vh;
  align-items: center;
  border-radius: 30px;
  position: relative;
  top: -310;
  left: 220;
}

.buynow:hover{
  width: 45vh;
  height: 10vh;
  background: rgb(255, 255, 255);
}

.buy {
  width: 100vh;
  height: 0vh;
  position: relative;
  top: -250;
}

.buynow img{
  width: 100vh;
  height: 10vh;
}


.SEOintro2 {
    height: 30vh;
    padding: 5vh;
    margin: 5vh;
    display: flex;
}

.SEOintro2 p{
    width: 100vh;
    height: 30vh;
    margin: 2vh;
    overflow: scroll;
    z-index: 5;
}
.SEOintro2 p img{
    width: 30vh;
    height: 30vh;
}


@supports(scrollbar-color){
 *{
  scrollbar-color: red, blue;
 }
}
body{
  scroll-behavior: smooth;
}
.logo{
  position: fixed;
  top: 10;
  left: 40%;
  margin: 0;
  z-index: 1000000000;
  align-items: center;
  justify-content: space-between;
}
.logo h1{ 
font-size: 0.5em;
}
.logo img{
  width: 5vh;
  height: 7vh;
  border-radius: 50%;
}
.contact-us-gif{
  position: fixed;
  top: 10;
  left: 80%;
  margin: 0;
  z-index: 1000000000;
  align-items: center;
  justify-content: space-between;
}
.contact-us-gif h1{ 
font-size: 0.5em;
}
.contact-us-gif img{
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
}
.desk-top-website{
        display: ;
        position: fixed;
        top: 0;
        margin: 0;
        padding: 0;
        z-index: ;
        width: 100%;
        height: 100vh;
        background-color: black;
}
.background{ 
    background-image: url(images/2_20230216_091353_0001.png);
    width: 100%; height: 170vh;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(8px);
    z-index: 1000000;
}

.music {
    position: absolute;
    width: 90%;
    height: 10vh;
    padding: 5%;
    top: 310;
    left: 0;
    overflow: scroll;
  }
  .music .music-container{
      width: 20vh;
      height: 5vh;
      padding: 10%;
      background: blue;
    }
    .music .music-container audio{
       
}
.heade{
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 21vh;
     z-index: 20;
     background: rgba(255, 255, 255, 0.549);
}

.heade img{
     position: fixed;
     width: 100%; 
     top: -100;
     left: 0;
     border-bottom-right-radius: 30px;
     border-bottom-left-radius: 30px;
     box-shadow: -10px -10px 15px rgb(255, 255, 255),
                 10px 10px 15px rgb(255, 255, 255)  ;
    border: none;
}
.heade H1{
  position: absolute;
  top: 40%;
  left: 10%;
  text-align: center;
  z-index: 21;
  color: white;
}
a{
    text-decoration: none;
    text-decoration-style: none;
  }
  .dropdown{
  position: fixed;
  top: -65;
  left: 0;
  z-index: 101;
  background: rgba(255, 255, 255, 0.478);
  width: 50%;
  height: 80vh;
  background: none;
  overflow: scroll;
  clip-path: circle(10% at 10% 90%);
  -webkit-clip-path:circle(9% at 10% 15%);
  transition:  all 3s ease-in-out;
  }
  
  .dropdown .cover-backgrounds{
    top: 90;
    left: 10;
  }
  
  .dropdown .dropdown-icon img{
     height: 100%;
     margin: 2vh;
    }
  
    .dropdown .dropdown-icon {
     width: 15%;
     height: 15%;
     position: relative;
     top: 120;
     left: 10;
     padding-bottom: 8vh;
     justify-content: space-between;
    }
  
    .dropdown .dropdown-icon1 {
      width: 5%;
      height: 5%;
      position: relative;
      top: 80;
      left: 10;
      display: flex;
      padding-bottom: 4vh;
      justify-content: space-between;
     }
    .dropdown .dropdown-icon h1{
      font-size: 1.1em;
      width: 100;
      margin: 2vh;
      text-transform: capitalize;
      color: black;
       }
  
  .dropdown:hover{
    background: rgba(255, 255, 255, 0.522);
    border-radius: 30px;
    clip-path: circle(1000% at 10% 90% );
    -webkit-clip-path:circle(1000% at 10% 90% );
  }

  .content{
    position: fixed;
    width: 100%;
    height: 100vh;
    padding-top: 10vh;
    margin-bottom: 145vh;
    background: rgba(255, 255, 255, 0.679);
    background-blend-mode: multiply;
    backdrop-filter: blur(8px);
    top: 0;
    left: 0;
    z-index: 25;
    overflow: scroll;
  }
  .content img{
    width: 100%;
    height: 100%;
    border-radius: 15px;
  }
  .content video{
    width: 100%;
    height: 100%;
  }
  .content .bannerimg img{
    width: 100%;
    height: 50%;
  }
  .content .bannerimg video{
    width: 100%;
    height: 100%;
  }
  .slide-wrap{
    display: flex;
    justify-content: space-between;
    transition: .5s ease-in-out;
    width: 100%;
    height: 35vh;
    overflow: scroll;
  }
  

  .slider{
    background: url('images/2_20230216_091353_0001.png') #ff0909dc;
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
    padding: 12vh;
    margin: 1vh;
  color: aliceblue;
  border-radius: 15px;
  }
  
  .slider img:hover{
    transform: scale(1.1);
   }



   .food-wrap{
    display: flex;
    justify-content: space-between;
    transition: .5s ease-in-out;
    width: 100%;
    height: 35vh;
    overflow: scroll;
  }
  

  .food{
    width: 50vh;
    padding: 3%;
  }
  .food img{
    width: 20vh;
    border-radius: 15px;
    box-shadow: -10px -10px 15px rgba(255, 255, 255, 0.5),
    10px 10px 15px rgba(70, 70, 70, 0.12)  ;
    transition: 1s ease-in-out;
  }
  .food img:hover{
    transform: scale(1.1);
   }
  .block-wrap{
    display: flex;
    justify-content: space-between;
    transition: .5s ease-in-out;
    animation: block-move 4s;
    margin-bottom: 7vh;
  }

  @keyframes block-move{
    0%{
   transform:translatex(-30%);
    }
    100%{
      transform: translateY(0%);
    }
  }
  .block-wrap:hover{
   transform: scale(1.1);
  }

  .block{
    width: 40vh;
    height: 20vh;
    padding: 3%;
    background: url('images/1_20230216_091353_0000.png') #290303d8;
    background-position: center;
    background-size: cover;
    /*background-blend-mode: multiply;*/
    padding: 5%;
    margin: 1vh;
    margin-bottom: 5vh;
  color: aliceblue;
  border-radius: 15px;
  animation: block-mov 4s;
}
.block .button-info{
  position: relative;
  top: 35%;
  display: flex;
  background: rgba(242, 240, 240, 0.909);
   background-blend-mode: multiply;
   backdrop-filter: blur(8px);
  width: 100%;
  padding: 1vh;
  border-radius: 15px;
  align-items: center;
}
.block .button-info .button-text{
  width: 70%;
}
.block .button-info .button-text h1{
  font-size: 0.5em;
  color: black;
  text-transform: capitalize;
}
.block .button-info .button-text p{
  font-size: 0.5em;
  width: 60%;
  color: black;
}
.block .button-info button{
  position: relative;
  left: 0%;
  color: rgb(252, 252, 252);
  width: 100%;
  font-size: 0.9em;
  background-blend-mode: multiply;
  backdrop-filter: blur(8px);
  text-transform: capitalize;
  background: rgba(24, 23, 23, 0.9);
  padding: 1vh;
  border-radius: 15px;
  border: none;
}

.block-wrap:hover{
 transform: scale(1.1);
}
.block img{
  position: relative;
  top: -30%;
  left: 75%;
  width: 8vh;
  height: 8vh;
  border-radius: 50%;
}
 /*desktop website*/

 .tabs{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.tabs__label{
  width: 10%;
  height: 4vh;
  border-radius: 15px;
  margin: 3%;
  display: flex;
  align-items: center;
  transition: 0.7s;
}
.tabs__label img{
width: 60%;
height: 60%;
padding: 15%;
}

.tabs__radio{
  display: none;
}

.tabs__content{
  order: 1;
  width: 100%;
  height: 30vh;
  margin-left: auto;
  margin-right: auto;
  display: none;
  transition: 2s ease-in;  
}


.tabs__content h1{
font-size: 1em;
}

.tabs__radio:checked+.tabs__label{
  font-weight: bold;
  color: #397569;
  width: 15%;
  height: 10vh;
  background: white;
  border-radius: 15px;
  box-shadow: 0 15px 25px white;
  transform: translate(calc(70px * 0));
  align-items: center;
  text-align: center;
}
.tabs__radio:checked+.tabs__label+.tabs__content{
  display: initial;
} 
#press{
margin-top: 1vh;
width: 8vh;
height: 8vh;
}
.cover{
display: flex;
 width: 100%; 
 height: 40vh;
 background: url(images/1d6e932999cb4d7eba7fb8b7da580fcc.jpg);
overflow: hidden;
}

.cover img{
width: 50%; 
height: 40vh;
}

.cover h1{
font-size: 2em;
text-transform: uppercase;
}
.cover h1 span{
font-size: 2em;
color: orange;
text-transform: capitalize;
}
.infromation-wrap{
  display: flex;
  width: 100%;
  margin-bottom: 10vh;
  overflow: scroll;
}
.infromation{
width: 80vh;
margin-bottom: 15vh;
transition: 1s; 
padding: 10%;
}

.infromation .slider-scroll{
height: 25vh;
overflow: scroll;
}
.image-container{
width: 100%;
height: 50vh;
}
.image-container img{
  width: 100%;
  height: 100%;
}

.infromation h1{
position: relative;
z-index: 2;
width: 35vh;
color: rgb(253, 251, 251);
font-size: 2em;
text-transform: capitalize;
}
.infromation h1 span{
width: 80%;
color: orange;
font-size: 0.8em;
text-transform: uppercase;
}
.infromation p{
color: white;
font-size: 1em;
}

.infromation ul li{
color: white;
font-size: 1em;
}

.slider-image{
  height: 5vh;
}

.social-media h5{
font: 1em;
width: 60%;
text-align: center;
background: orange;
color: white;
padding: 4%;
margin-top: 15vh;
border-radius: 15px;
}

.slide{
    width: 100%;
    height: 40vh;
    overflow: scroll;
    display: flex;
}
.slide .img{
    width: 100%;
    height: 50vh;
}

.product h1{
    align-items: center;
    text-align: center;
    padding: 2%;
    width: 40%;
    height: 3vh;
    font-size: 1em;
    border-radius: 5px;
    color: white;
    text-transform: uppercase;
    background: orange;
}

.price-list{
    width: 90%;
    margin-top: 4vh;
    margin-bottom: 20vh;
    margin-right: auto;
    margin-left: auto;
}
.list{
    display: flex;
}
.price-list h5{
    width: 90%;
    padding: 3%;
    margin: auto;
    border-radius: 5px;
    color: white;
    text-transform: uppercase;
    background: orange;
    font-size: 2em;
}
.price-list h1{
    width: 70%;  
    font-size: 1em;
    text-transform: uppercase;
}
.price-list h4{
    width: 20%;
    font-size: 1em;
    padding: 1%;
    border-radius: 5px;
    color: white;
    text-transform: uppercase;
    background: orange;
    margin: auto;
}

.main {
  width: 80%;
  margin: auto;
  height: 40vh;
  grid-auto-flow: dense;
  display: grid;
  grid-template-columns:  auto auto;
  grid-gap:2%;
  margin-top: 2vh;
 }
 
 .main .image{
     height: 100%;
     width: 100%;
     border-radius: 30px;
     background-size: cover;
 }
 
 
 .main .image img{
     height: 100%;
     width: 100%;
     border-radius: 15px;
     object-fit: cover;
     filter:brightness(0.5) grayscale(50%);
     transition: 1s ease-in-out;
 }
 .main .image:hover img{
     filter:brightness(1) grayscale(0%);
     transform: scale(1.1);
     border-radius: 0px;
     z-index: 2;
 }
 .main .image img:hover {
     filter:brightness(1) grayscale(0);
     transform: scale(1.1);
 }
 
 .desk-top-website {
  
}
 .desk-top-website .tabs{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
 
}

.desk-top-website .tabs__label{
  width: 10%;
  height: 4vh;
  text-transform: capitalize;
  border-radius: 15px;
  margin: 3%;
  display: flex;
  align-items: center;
  transition: 0.7s;
}
.desk-top-website .tabs__label img{
width: 60%;
height: 60%;
padding: 15%;
}

.desk-top-website .tabs__radio{
  display: none;
}

.desk-top-website .tabs__content{
  order: 1;
  width: 100%;
  height: 30vh;
  margin-left: auto;
  margin-right: auto;
  display: none;
  transition: 2s ease-in;  
}


.desk-top-website  .tabs__content h1{
font-size: 1em;
}

.desk-top-website .tabs__radio:checked+.tabs__label{
  font-weight: bold;
  color: #397569;
  width: 15%;
  height: 10vh;
  background: white;
  border-radius: 15px;
  box-shadow: 0 15px 25px white;
  transform: translate(calc(70px * 0));
  align-items: center;
  text-align: center;
}
.desk-top-website .tabs__radio:checked+.tabs__label+.tabs__content{
  display: initial;
} 
.desk-top-website #press{
margin-top: 15vh;
width: 8vh;
height: 8vh;
}
.desk-top-website.cover{
display: flex;
 width: 100%; 
 height: 40vh;
 background: url(images/1d6e932999cb4d7eba7fb8b7da580fcc.jpg);
overflow: hidden;
}

.desk-top-website .cover img{
width: 50%; 
height: 40vh;
}



 
 
 /*video*/
 .mainvid {
     width: 100%;
     height: auto;
     display: grid;
     grid-template-columns:  auto auto;
     grid-auto-flow: dense;
     grid-gap:0.2%;
     
 }
 
 .mainvid .video{
     height: 100%;
     width: 100%;
     overflow: hidden;
 }
 .mainvid .video video{
     height: 100%;
     width: 100%;
     object-fit: cover;
     filter:brightness(0.5) grayscale(50%);
     transition: 1s ease-in-out;
 }
 .mainvid .video:hover video{
     filter:brightness(1) grayscale(0%);
 }

 .form-holder{
  width: 50%;
  height: 70vh;
  margin: auto;
}
.from-div{
   width: 100%;
   align-items: center;
}
.from-div label{
color: white;  
}

.from-div input{
  width: 100%;
  height: 5vh;
  margin: 3%;
  border: 3px solid orange;
  border-radius: 15px;
  border-top: none;
  border-left: none;
  border-right: none;
  transition: 1s;

}

.form-button{
  width: 100%;
  height: 5vh;
  margin-top: 3vh;
  border: none;
  background: orange;
  color: white;
}

.downloads{
width: 90%;
display: flex;
margin: 4%;
}

.downloads h1{
width: 60%;
font-size: 2em;
color: orange;
margin: 4%;
text-transform: capitalize;
}

.downloads p{
font: 1em;
text-transform: uppercase;
width: 30%;
text-align: center;
background: orange;
color: white;
padding: 2%;
border-radius: 15px;
}
/*nav bar*/
.navbar{
    position: fixed;
    background: rgba(255, 255, 255, 0.689);
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
     backdrop-filter: blur(8px);
     width: 80%;
     bottom: 0;
     right: 0;
     left: 0;
     display: flex;
     padding-left: 10%;
     padding-right: 10%;
     z-index: 101;
     justify-content: space-between;
   }
   .nav-logo .nav-logo{
     width: 30%;
   }
   .nav-logo h1{
     font-size: 0.6em;
    color: white;
    text-transform: uppercase;
  }
  .nav-logo h1 span{
    color: orange;
    text-transform: capitalize;
  }
  
   .navbar .nav-contant{
     align-items: center;
     justify-content: center;
     display: flex;
     flex-wrap: wrap;
   }
  
  .navbar .nav-contant a{
   text-decoration: none;
   font-size: 0.5em;
   padding: 1vh;
   color: rgb(33, 32, 31);
   padding: 3%;
   transition: 0.5s;
 }

 .navbar .nav-contant a:hover{
  font-size: 1.4em;
  border-bottom: 3px solid orange;
}
  .navbar .nav-contant img{
    height: 4vh;
    z-index: 7;
  }
  .navbar .nav-contant .menu img{
    position: relative;
    top: -40;
    background: rgba(167, 56, 132, 0.701);
    padding: 2vh;
    border-radius: 50%;
    z-index: 7;
    height: 5vh;
  }
   
   
   
   @media screen and (min-width: 768px){
      .navbar{
        display: content;
          position: fixed;
          left: 0;
          border-bottom: 1px solid rgba(146, 127, 127, 0.534);
          border-radius: 1px;
      }

      .buynow img{
        width: 100vh;
        height: 10vh;
      }

      #tasks-container {
        position: relative;
        top: -170;
        display: flex;
        width: 90vh;
        max-width: ;
        overflow: scroll;
      }
      .holder .content-wrap{
        display: flex;
        width: 50vh;
        overflow: scroll;
      }
        .content-wrap{
          width: 40vh;
          height: 20vh;
          margin: 5vh;
          padding: 1vh;
          border: 1px solid black;
          border-radius: 15px;
          overflow: scroll;
       }
     
       .content-wrap button{
        width: 10px;
        height: 0px;
        display: block;
        position: relative;
        top: -70;
        z-index: -3;
      }
     
       .content-wrap .top{

       }
       
       .content-wrap .top:hover{
       transform: scale(1.1);
       }
       
       .content-wrap .top img{
        width: 0px;
       }
       
       .content-wrap .top .list {
        color: white;
        font-size: 1em;
        text-transform: uppercase;
       }
       
       .content-wrap .top .list h1 {

       }
       
       .content-wrap .top .list h2 {
         font-size: 2em;
         padding: 5%;
       }

       .content-wrap  .loremi {
        height: 30vh;
        padding: 3vh;
        border-radius: 15px
       }
       
      .block-wrap{
        display: flex;
        justify-content: space-between;
        transition: .5s ease-in-out;
        animation: block-move 4s;
        margin-bottom: 7vh;
      }
    
      @keyframes block-move{
        0%{
       transform:translatex(-30%);
        }
        100%{
          transform: translateY(0%);
        }
      }
      .block-wrap:hover{
       transform: scale(1.1);
      }
      .holder{
        display: flex;
      }
      .block{
        width: 40vh;
        height: 20vh;
        padding: 3%;
        background: url('images/pexels-pixabay-257736.jpg') #290303d8;
        background-position: center;
        background-size: cover;
        /*background-blend-mode: multiply;*/
        padding: 5%;
        margin: 1vh;
        margin-bottom: 5vh;
      color: aliceblue;
      border-radius: 15px;
      animation: block-mov 4s;
    }
    .block1{
      width: 70vh;
      margin: 10%;
      height: 50vh;
      padding: 10%;
      background: url(images/20230216_0912281_1.gif) #290303d8;
      background-position: center;
      background-size: cover;
      background-blend-mode: multiply;
      padding: 5%;
      margin: 10vh;
      color: aliceblue;
      border-radius: 15px;
      border: 5px solid white;
      animation: block-mov 4s;
  }
    .block .button-info{
      position: relative;
      top: 35%;
      display: flex;
      background: rgba(242, 240, 240, 0.909);
       background-blend-mode: multiply;
       backdrop-filter: blur(8px);
      width: 100%;
      padding: 1vh;
      border-radius: 15px;
      align-items: center;
    }
    .block .button-info .button-text{
      width: 70%;
    }
    .block .button-info .button-text h1{
      font-size: 0.5em;
      color: black;
      text-transform: capitalize;
    }
    .block .button-info .button-text p{
      font-size: 0.5em;
      width: 60%;
      color: black;
    }
    .block .button-info button{
      position: relative;
      left: 0%;
      color: rgb(252, 252, 252);
      width: 100%;
      font-size: 0.9em;
      background-blend-mode: multiply;
      backdrop-filter: blur(8px);
      text-transform: capitalize;
      background: rgba(24, 23, 23, 0.9);
      padding: 1vh;
      border-radius: 15px;
      border: none;
    }
    .block1  button{
      position: relative;
      left: 0%;
      color: rgb(252, 252, 252);
      width: 100%;
      font-size: 0.9em;
      background-blend-mode: multiply;
      backdrop-filter: blur(8px);
      text-transform: capitalize;
      background: rgba(24, 23, 23, 0.9);
      padding: 1vh;
      border-radius: 15px;
      border: none;
    }
    .block2  button{
      position: relative;
      left: 0%;
      color: rgb(252, 252, 252);
      width: 100%;
      font-size: 0.9em;
      background-blend-mode: multiply;
      backdrop-filter: blur(8px);
      text-transform: capitalize;
      background: rgba(24, 23, 23, 0.9);
      padding: 1vh;
      border-radius: 15px;
      border: none;
    }
    
    .block-wrap:hover{
     transform: scale(1.1);
    }
    .block img{
      position: relative;
      top: -30%;
      left: 75%;
      width: 8vh;
      height: 8vh;
      border-radius: 50%;
    }
      .layer{
        display: content;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000000000000000;
        width: 100%;
        height: 100vh;
        background: url(images/world-environment-mother-earth-day-concept-with-globe-eco-friendly-environment_597582-455.jpg);
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
         backdrop-filter: blur(68px);
      }
      .desk-top-website{
        display: content;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000000000000000;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.696);
      }
      .desk-top-website nav{
        display: flex;
      }
      .desk-top-website nav li{
        color:wheat;
        font-size: 1em;
      }
      .desk-top-website .tabs{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        overflow: scroll;
    }
   
    .desk-top-website .tabs__label{
        width: 10%;
        height: 4vh;
        border-radius: 15px;
        margin: 3%;
        display: flex;
        align-items: center;
        transition: 0.7s;
    }
    .desk-top-website .tabs__label img{
      width: 15vh;
      height: 15vh;
      border-radius: 50%;
      padding: 15%;
  }
   .cover{
      display: flex;
      width: 100%;
      height: auto ;

   }
   .cover .content-side{
    width: 30%;
    height: 50vh;
    
   }
   .cover .content-side p{
    margin: 1vh;
  }
  .cover h1 span {
    font-size: 2em;
    color: red;
    text-transform: capitalize;
}
   .cover .animated-logo{
      width: 70%;
   }

   .cover .animated-logo{
    width: 100%;
    height: auto;
    overflow: scroll;
    scrollbar-width: 3vh;
    position: relative;
    align-items: center;
    object-fit: cover;
    top: 0;
   }
.cover .animated-logo video{
 width: 100%;
 position: relative;
}
.cover .animated-logo img{
  width: 100%;
  height: 100vh;
  margin: 1vh;
  position: relative;
 }
 .cover .animated-logo .shopessentials{
  width: 100%;
  height: 80vh;
  margin: 1vh;
  position: relative;
  display: flex;
 }
 .cover .animated-logo .shopessentials .cardholder{
  width: 30vh;
  height: 80vh;
  padding: 5vh;
  margin: 5vh;
 }
 .cover .animated-logo .shopessentials .cardholder img{
  width: 40vh;
  height: 40vh;
 }
 .cover .animated-logo .shopessentials .cardholder .buttonvisit{
  width: 100%;
  height: 10vh;
  margin: 1vh;
 }
 .cover .animated-logo .shopessentials .cardholder .buttonvisit img{
  height: 20vh;
 }

 .cover .animated-logo img{
  width: 100%;
  height: 100vh;
  margin: 1vh;
  position: relative;
 }
 .cover .animated-logo .animation-1 img{
  width: 40%;
  position: absolute;
  left: 550px;
  height: 50vh;
  border-radius: 15px;
}
.cover .animated-logo .animation-2 img{
  width: 50%;
  position:relative;
  top: -;
  left: 330;
  border-radius: 30px;
  z-index: -2;
}
.cover .animated-logo .animation-3 img{
  width: 5%;
  height: 10%;
  position: absolute;
  top: 232px;
  left: 656px;
}
  .updates-firebase{
    position: relative;
    top: -30;
   width: 90%;
   margin: 5%;
   display: flex;
   overflow: scroll;
}
 .updates-firebase .update-post{
  width: 40vh;
  font-size: 0.6em;
  margin: 2vh;
}
.updates-firebase .update-post p{
  width: 30vh;
  font-size: 1em;
  margin: 2vh;
}
  .desk-top-website .tabs__radio{
        display: none;
    }
    
    .desk-top-website .tabs__content{
        order: 1;
        width: 100%;
        height: 100vh;
        overflow: ;
        margin-left: auto;
        margin-right: auto;
        display: none;
        transition: 2s ease-in;  
    }
  
      
    .desk-top-website  .tabs__content h1{
      font-size: 1em;
  }
    
  .desk-top-website .tabs__radio:checked+.tabs__label{
        font-weight: bold;
        color: #397569;
        width: 15%;
        height: 10vh;
        background: white;
        border-radius: 15px;
        box-shadow: 0 15px 25px white;
        transform: translate(calc(70px * 0));
        align-items: center;
        text-align: center;
    }
    .desk-top-website .tabs__radio:checked+.tabs__label+.tabs__content{
        display: initial;
    } 
    .desk-top-website #press{
      display: block;
      margin-top: 1vh;
      width: 15vh;
      height: 0.2vh;
      color: rgb(45, 43, 43);
      font-size: 0.5em;
      text-transform: uppercase;
    }
    .desk-top-website.cover{
      display: flex;
       width: 100%; 
       height: 40vh;
       background: url(images/1d6e932999cb4d7eba7fb8b7da580fcc.jpg);
      overflow: hidden;
    }
  
    .desk-top-website .animation-1 .cover img{
      position:relative;
      top:100;
      width: 20%; 
      height: 40vh;
      border-radius: 115px;
      padding: 5vh;
   }
   .desk-top-website .animation-2 .cover img{
    position:relative;
    top:600;
    width: 50%; 
    height: 40vh;
    border-radius: 115px;
    padding: 5vh;
 }
 .desk-top-website .animation-3 .cover img{
  position:relative;
  top:100;
  width: 50%; 
  height: 40vh;
  border-radius: 115px;
  padding: 5vh;
}
      .block-wrap{
         display: contents;
      }
      .first{
        width: 90%;
        padding: 3%;
        margin: 4%;
        display: grid;
        grid-template-columns:  auto auto;
        grid-auto-flow: dense;
        grid-gap:0.2%;
      }
      .first:first-child{
    grid-column-start: span 2;
    grid-row-end: span 1;
     }
      .block{
        width: 50vh;
        padding: 3%;
        margin: 4%;
      }
      .block2{
        width: 50vh;
        padding: 3%;
        margin: 4%;
      }
      .content{
        position: absolute;
        width: 90%;
        padding: 5%;
        background: rgba(255, 255, 255, 0.679);
        background-blend-mode: multiply;
        backdrop-filter: blur(8px);
        top: 5;
        left: 0;
        z-index: 25;
        border-radius: 40px;
        overflow: scroll;

      }
      .dropdown{
        position: fixed;
        top: -65;
        left: 0;
        z-index: 101;
        background: white;
        width: 30%;
        height: 150vh;
        background: none;
        overflow: scroll;
        clip-path: circle(10% at 10% 90%);
        -webkit-clip-path:circle(9% at 10% 15%);
        transition:  all 3s ease-in-out;
        }
   
  }
}
   
   @media screen and (min-width: 280px){
     /*media query for social media icons*/

   }