*{
    user-select: none;
   padding: 0;
   margin: 0; 
   border: 0;
   outline: 0;
   font-size: 100%;
   background: transparent;
   vertical-align: baseline;
   overflow-x: 0;
}
html{
    scroll-behavior: smooth;
}
.main{
    display: block;
}
#product > h1{
    text-align: center;
    margin-top: 20px;
}

.nav{
    background: #0F1111;
    height: 80px;
    width: 100vw;
    max-width: 100%;
    position: fixed;
    top: 0%;
    z-index: 999;
}

.menubar{
    position: absolute;
    right: 10%;
    top: 30%;
    word-spacing:94px;
    display: inline;
    font-size: 130%;
}

.img{
    position: absolute;
    top: 30%;
    left: 10%;
    right:90%
}

.menubar a{
    color:rgb(255, 255, 255);
    font-style: none;
}

.menubar a:hover{
    color: white;
    text-decoration-line:underline;
    text-decoration-style:solid;
    text-underline-offset: 15px;
    text-decoration-color:rgb(255, 0, 0) ;
    text-decoration-thickness: 5px;
}


section{
    height: 100vh;
    width: 100vw;
    max-width:100%;
    max-height: 100%;
    scroll-margin-top: 80px;
}

#home{
    background-image: url("cover-main.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;

}

.home{
    position: relative;
    z-index:1;
    color: rgb(255, 255, 255);
    text-align: center;
    position: relative;
    top:30%;
}

.home h1{
    font-size: 8vh;
    margin: .5%;
}

.home h6{
    font-size: 200%;    
}
.home button{
    font-size: 150%;
    font-weight: 900;
    background: #ff0a0a;
    color: rgb(255, 255, 255);
    padding: 19px 40px 19px 40px;
    border-radius: 8px;
    margin-top: 20px;
}

.black{
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.81) 100%);
    height: 100vh;
    width: 100vw;
    max-width: 100%;
    position: absolute;
    z-index: 0;

}

.carousel{
    height: calc(100vh - 80px);
    width: 100vw;
    max-width: 100%;
}

.text-center{
    top: 0;
    height: calc(100vh - 80px);
    max-width: 100%!important;
    overflow: hidden!important;

}

.carousel-inner{
    overflow: visible!important;
    transform: translate(0px, 80%);

    top: 0;
    max-width: 100%!important;

}

.carousel-inner img{
    width: 300px;
    aspect-ratio: 1/1;
    transition: all linear 100ms;
    background-image: url(stroke.png);
    background-repeat: no-repeat;
    background-position:center;
}

#mainimg{
    position: relative;
    margin: auto;
}
#im12{
    position: absolute;
    margin-left: -30%;
}
#im11{
    position: absolute;
    margin-right: 45%;

}

.carousel-indicators {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
}

#feature{
    background: rgb(255, 255, 255);

}

#feature h1{
    position: absolute;
    margin-top: 20px;
    text-align:center;
    width: 100%;

}

#carouselExampleIndicators{
    position: relative;

}

.box {
    position: relative;
    left: 50%;
    transform: translate(-50%, 130px);
    width: 90vw;
    padding: 10px;
    border-radius: 18px;
    background: radial-gradient(50% 50% at 50% 50%, #ffdb0d 0%, #ffdb0d 100%);
    text-align: left;
    text-align: left;

}

.text{
    text-align: left;
    margin-right: 440px;

}

.picbox {
    position: absolute;
    right: 2%;
    top: -22vh;
}

.box2 {
    position: relative;
    left: 50%;
    padding: 10px;
    transform: translate(-50%, 205px);
    top: 50px;
    width: 90vw;
    border-radius: 18px;
    text-align: left;
    margin-bottom:50px;

    background: radial-gradient(50% 50% at 50% 50%, hsl(209, 100%, 72%) 0%, #62b3ff 100%);
}

.text2 {
    text-align: left;
    margin-left: 441px;
}

.picbox2 {
    position: absolute;
    top: -17vh;
}

#menuToggle{
    display: none;
}
 @media only screen and (max-width:779px){
    #navmenu{
        display: none!important;
        
    }
    .img{
        width: 100%;
        display: flex;
        justify-content: center;
        left: 0;
    }
    .nav{
        display: flex;
        place-items: center;
    }
    #menuToggle
    {
      margin-left: 25px;  
      display: block;
      position: relative;
      transform:scale(1.3) ;
      
      z-index: 1;
      
      -webkit-user-select: none;
      user-select: none;
    }
    
    #menuToggle a
    {
      text-decoration: none;
      color: #232323;
      
      transition: color 0.3s ease;
    }
    
    #menuToggle a:hover
    {
      color: rgb(114, 255, 71);
    }
    
    
    #menuToggle input
    {
      display: block;
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;
      
      cursor: pointer;
      
      opacity: 0; 
      z-index: 2; 
      
      -webkit-touch-callout: none;
    }

    #menuToggle span
    {
      display: block;
      width: 33px;
      height: 3px;
      margin-bottom: 5px;
      position: relative;
      margin-left: 2vw;
      background: #c71515;
      border-radius: 3px;
      
      z-index: 1;
      
      transform-origin: 4px 0px;
      
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  opacity 0.55s ease;
    }
    
    #menuToggle span:first-child
    {
      transform-origin: 0% 0%;
    }
    
    #menuToggle span:nth-last-child(2)
    {
      transform-origin: 0% 100%;
    }
    
 
  #menuToggle input:checked ~ span
    {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
    }
    

    #menuToggle input:checked ~ span:nth-last-child(3)
    {
      opacity: 0;
      transform: rotate(0deg) scale(0.2, 0.2);
    }
    
   
    #menuToggle input:checked ~ span:nth-last-child(2)
    {
      transform: rotate(-45deg) translate(0, -1px);
    }

    #nav2
    {
        display: flex;
        place-items: center;
        justify-content: center;
      position: absolute;
      width: 100vw;
      height: 100vh;
      margin: -100px 0 0 -50px;     
      background: #f50000b2;
      list-style-type: none;
      -webkit-font-smoothing: antialiased;
      
      transform-origin: 0% 0%;
      transform: translate(-100%, 0);
      
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
      backdrop-filter: blur(10px);
    }
    #nav2 a{
        display: block;
    }
    
    #nav2 li
    {
      padding: 10px 0;
      font-size: 40px;
      color: rgb(7, 0, 0);
    }
    #nav2::before{
        content:"";
        left: 0;
        position: absolute;
        display: block;
        background: black;
        height: 100vh;
        width:110px;
    }
    .nav211{
        margin-top: -50px;
    }
    #menuToggle input:checked ~ ul
    {
      transform: none;
    }

    #menuToggle a{
        color: black!important;
    }
 
    #nav2 li:active{
        color: black!important;
    }

    #nav2 li:active + #nav2{
        transform: translate(-100%, 0)!important;
    }


    .picbox >img ,.picbox2 > img{
        width: 200px;
    }
    .picbox {
        position: absolute;
        right: 10vw;
        top: -11vh;
    }
    .text {
        text-align: center;
        margin-right: 0;
        margin-top: 15vh;
    }
    .box {
        position: relative;
        left: 50%;
        transform: translate(-50%, 130px);
        width: 81vw;
        height: 55vh;
        padding: 10px;
        border-radius: 18px;
        background: radial-gradient(50% 50% at 50% 50%, #f38383 0%, #0c0101 100%);
        text-align: left;
        text-align: left;
    }
    .box2 {
        position: relative;
        left: 50%;
        padding: 10px;
        transform: translate(-50%, 205px);
        top: 50px;
        width: 82vw;
        height: 52vh;
        border-radius: 18px;
        background: radial-gradient(50% 50% at 50% 50%, #fffb0f 0%, #fffb2c 100%);
    }
    .picbox2 {
        position: absolute;
        right: 13vh;
        top: -11vh;
    }

     .text2 {
        margin-top: 13vh;
        text-align: center;
        margin-left: 0px;
    }
    .p {
        margin-top: 0;
        margin-bottom: 0;
    }
 }

@media only screen and (max-width:376px) and (max-height:741px) {
    p {
        margin-top: 0;
        margin-bottom: 0!important;

    }
    .text2 {
        margin-top: 9vh;
        text-align: center;
        margin-left: 0px;
    }
    .text {
        text-align: center;
        margin-right: 0;
        margin-top: 11vh;
    }
}

#home1{
    font-style: bold;
}

#home1:hover{
  font-family:  'Helvetica Neue', 'Arial Narrow Bold', sans-serif;
  border-color: black;
  color: white;
  text-shadow: 0 0 3px #ffffff, 0 0 5px #000000;

}
.home>h6:hover{ 
    font-family: 'Helvetica Neue', 'Arial Narrow Bold', sans-serif;
    color: rgb(255, 255, 255);
    text-shadow: 0 0 3px #ffffff, 0 0 5px #000000;
}
.home button:hover{
    color: rgb(255, 255, 255);
    text-shadow: 0 0 3px #ffffff, 0 0 5px #000000;
}
.slide>h1{
    color:rgb(36, 34, 34);
    font-style:oblique;
}
.menubar>a:active{
    color: rgb(255, 0, 0);
}

#mainimg:hover{
    transform: scale3d(1.25,1.25,2);
}
#im12:hover,#im11:hover{
    transform: scale(1.05);
}
#mainimg{
    position: relative;
    
    margin: auto;
}
#im12{
    position: absolute;
    margin-left: -30%;
    transform: scale(.75);
}
#im11{
    position: absolute;
    margin-left: 15%;
    transform: scale(.75);
}

.carousel-item {
    position: relative;
    top: -150px;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .6s ease-in-out;
    transition: transform .6s ease-in-out;
    transition: transform .6s ease-in-out,-webkit-transform .6s ease-in-out;}
    

    
@media only screen and (max-width: 1210px) {
    #im12,#im11{
            display: none!important;
    }
}