@charset "UTF-8";
/* CSS Document */


*{
    margin: 0;
    padding: 0;
}

body{
    background-color: white;
    font-family: "Roboto", sans-serif;
}

.hero-container {
    height: 90vh;
    width: 100%;
    position: relative;
/*    border: 2px solid red;*/
/*    background-color: darkgrey;*/
}

/*hero background video*/

.hero-clip {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
/*    border: 2px solid red;*/
}

/*hero background image*/

.hero-back {
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
/*    background-color: aqua;*/
    overflow: hidden;
/*    border: 2px solid red;*/
}

.hero-back img {
    width: 100%;
/*    height: 700px;*/
/*    height: 100%;*/
}


/*still have 90vh*/

/*7 + 8 + 65 +33*/

.hero-content {
    width: 100%;
    height: 62vh;
/*    border: 2px solid pink;*/
}

.hero-content1 {
    width: 86%;
    height: 100%;
    margin: auto;
/*    border: 2px solid cyan;*/
    display: flex;
    flex-direction: row;
}


.hero-bigcontent {
    width: 55%;
    height: 100%;
/*    border: 2px solid red;*/
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    animation-name: indexbigcon;
    animation-duration: 3s;
}

.hero-bigcontent h1{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 7.5vw;
    line-height: 90px;
    color: white;
    
}

.hero-bigcontent p{
    font-weight: 500;
    font-size: 1.4vw;
    color: white;
}



.hero-smallcontent {
    width: 45%;
    height: 100%;
/*    border: 2px solid red;*/
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
/*    align-items: flex-end;*/
}

.hero-smallcontent1 {
    width: 100%;
    height: 40vh;
/*    border: 2px solid orange;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.hero-smallcontent11 {
    animation-name: indexsmallcon;
    animation-duration: 2s;
}


.hero-smallcontent12 {
    margin-bottom: 20px;
    animation-name: indexsmallcon2;
    animation-duration: 4s;
/*    animation-delay: 0.2s;*/
}

.hero-smallcontent13 {
    margin-bottom: 40px;
    animation-name: indexsmallcon3;
    animation-duration: 6s;
/*    animation-delay: 0.3s;*/
}


.hero-smallcontent11 h1{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 7vw;
    color: white;
/*    line-height: 90px;*/
}

.hero-smallcontent12 h1{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 7vw;
    color: white;
}

.hero-smallcontent13 h1{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 7vw;
    color: white;
}

.hero-smallcontent11 p{
    font-weight: 600;
    font-size: 1.2vw;
    color: white;
}

.hero-smallcontent12 p{
    font-weight: 600;
    font-size: 1.2vw;
    color: white;
}

.hero-smallcontent13 p{
    font-weight: 600;
    font-size: 1.2vw;
    color: white;
}




/*hero button starts here*/

.hero-content-btn {
    padding: 15px 25px;
    margin-top: 30px;
    text-decoration: none;
    background-color: #f2c864;
    transition: 0.4s;
    border: none;
    outline: none;
    cursor: pointer;
    color: white;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 0.8vw;
}





/*png connector only*/

.hero-connect {
    width: 100%;
    height: 25vh;
/*    border: 2px solid orange;*/
    position: absolute;
    bottom: 0;
}

.hero-connect img {
    width: 100%;
    height: 250px;
    margin-top: 12px;
/*    border: 2px solid purple;*/
}





/*top 2 details*/


.hero-details {
    width: 100%;
    height: 12vh;
/*    border: 2px solid red;*/
}

.hero-details1 {
    width: 86%;
    height: 100%;
    border-bottom: 1px solid white;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin: auto;
    list-style: none;
    animation-name: indexnav1;
    animation-duration: 3s;
}

.hero-details1 li {
/*    padding-right: 40px;*/
    color: white;
}

.hero-details1 i{
    padding-right: 10px;
    color: white;
}

.hero-details11 {
    width: 16%;
/*    border: 3px solid yellow;*/
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    
}

.hero-details12 {
    width: 16%;
/*    border: 3px solid yellow;*/
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    
}






/*the navigation main bar*/

.main-hero{
    width: 100%;
    height: 8vh;
/*    border: 2px solid red;*/
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    transition: 0.6s;
    margin-top: 8px;
    animation-name: indexnav1;
    animation-duration: 3s;
}

.sticky {
/*    background-color: #0b4251;*/
    background-color: rgba(11,66,81,0.4);
    backdrop-filter: blur(15px);
    top: 0;
    height: 10vh;
    margin-top: 0px;
    will-change: transform;
    /*border: 2px solid red;*/
    /*box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);

}


.top-nav {
  display: flex;
  width: 86%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
/*  background-color: #00BAF0;*/
/*  background: linear-gradient(to left, #f46b45, #eea849);*/
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #FFF;
  height: 100%;
  padding: 3px 0px;
/*  margin-top: 15px;*/
}

.hero-logo img{
    width: 139px;
    height: 58px;
}

.menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
/*  border: 2px solid black;*/
  height: 100%;
    
}



.menu a:not(.active):not(.hero-btn){
    color: #C3C3C3;
    text-decoration: none;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 1.3vw;
    position: relative;
    transition: 0.3s;
/*    border: 2px solid orange;*/
}

li a:after {
    content: '';
    position: absolute;
    background-color: #f2c864;
    height: 2px;
    width: 0;
    left: 0;
    bottom: -7px;
    transition: 0.3s ease;
}

.active {
    color: white;
    text-decoration: none;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 1.3vw;
    position: relative;
    transition: 0.3s;
/*    border: 2px solid orange;*/
}

.hero-free{
/*    border: 2px solid yellow;*/
    border: 2px solid white;
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
   
}

.hero-btn{
    padding: 0px 25px;
    text-decoration: none;
/*    background-color: #f2c864;*/
   
    transition: 0.4s;
    border: none;
    outline: none;
    cursor: pointer;
    color: white;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 0.8vw;
}




.menu > li {
  margin: 0 1rem;
/*  overflow: hidden;*/
}

.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #f2c864;
  position: absolute;
  height: 2px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}


/*hover start here*/

.menu a:hover:not(.active) {
    color: white;
/*    border: 3px solid red;*/
}

.active:after,
.menu li a:hover:after {
    width: 100%;
}

.hero-free:hover {
    background-color: #f2c864;
    border: 2px solid #f2c864;
}

.hero-content-btn:hover{
    box-shadow: 0 0 5px #f2e064,
                0 0 15px #f2e064,
                0 0 30px #f2e064,
                0 0 60px #f2e064,
                0 0 120px #f2e064;
    border: 0.8px solid white;
}

/*keyframes start here*/


@keyframes indexnav1{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
}

@keyframes indexbigcon{
    0%{
        transform: translateX(-40%);
        opacity: 0;
    }
    50%{
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes indexsmallcon{
    0%{
        transform: translateY(40%);
        opacity: 0;
    }
    25%{
        transform: translateY(0);
        opacity: 1;
    }
}


@keyframes indexsmallcon2{
    0%{
         transform: translateY(40%);
        opacity: 0;
    }
    25%{
        transform: translateY(0);
        opacity: 1;
    }
}


@keyframes indexsmallcon3{
    0%{
        transform: translateY(40%);
        opacity: 0;
    }
    25%{
        transform: translateY(0);
        opacity: 1;
    }
}



/*video media*/

@media (min-aspect-ratio:16/9) {
    .hero-clip {
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio:16/9) {
    .hero-clip {
        width: auto;
        height: 100%;
    }
}






/*media tablets start here*/

@media (max-width: 1194px) {
    
  
  .menu-button-container {
    display: flex;
  }
    
  .main-hero {
        z-index: 2;
  }
    
  .menu {
    position: absolute;
    top: 0;
    margin-top: 58px;
    left: 0;
    flex-direction: column;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    z-index: 1;
    background-color: rgba(11,66,81,0.9);
/*    backdrop-filter: blur(15px);*/
  }
    
/*after sticky java*/
    
  .sticky {
    /*height: 9vh;*/
    height: 67.5px;
}
    
    
.stickymedia {
      backdrop-filter: blur(15px) !important;  
      -webkit-backdrop-filter: blur(15px) !important; /* for Safari */
      background-color: rgba(11,66,81,0.9) !important;
      margin-top: 63px;
      will-change: transform;
    }
    
    
    
  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
/*    border: 2px solid red;*/
  }
    
  #menu-toggle:checked ~ .menu li {
/*    border: 1px solid pink;*/
    height: 2.5em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    align-items: center;
/*    border: 2px solid aqua;*/
  }
    
  .menu > li {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: white;
    overflow: hidden;
/*    background-color: pink;*/
  }
    
  .menu > li:not(:last-child) {
    border-bottom: 1px solid #444;
  }
    
    
.hero-free{
    display: none;
}

.menu a:not(.active):not(.hero-btn){
    font-size: 2vw;
    /*color: red;*/
}
    
.active {
    font-size: 2vw;
}
    

    
    
    
/*hero details*/
    
.hero-details {
    width: 100%;
    /*height: 8vh;*/
    height: 60px;
/*    border: 2px solid red;*/
}
    
  
.hero-details1 {
    justify-content: space-around;
/*    border: 2px solid red;*/
}
    
.hero-details1 li {
    padding-right: 0px;
}

.hero-details1 i{
    padding-right: 8px;
}

.hero-details11 {
    width: auto;
/*    border: 3px solid yellow;*/
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.hero-details12 {
    width: auto;
/*    border: 3px solid yellow;*/
    display: flex;
    align-items: center;
    justify-content: center;
    
}
    
    
/*hero 2 top details*/
    


.hero-details1 li {
    font-size: 1.2vw;
    text-decoration: none !important;
    color: white !important;
}

.hero-details1 i {
    font-size: 1.2vw;
    text-decoration: none !important;
    color: white !important;
}
    

    
/*hero button*/
    
    
 
/*.hero-content-btn {*/
/*    padding: 10px 20px;*/
/*    margin-top: 15px;*/
/*    text-decoration: none;*/
/*    background-color: #f2c864;*/
/*    transition: 0.4s;*/
/*    border: none;*/
/*    outline: none;*/
/*    cursor: pointer;*/
/*    color: white;*/
/*    font-weight: 600;*/
/*    letter-spacing: 2px;*/
/*    font-size: 2.2vw;*/
/*}*/


    
/*hero video background*/

    
.hero-clip {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
/*    border: 2px solid red;*/
}
    
/* hero background image*/
    
.hero-back {
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
/*    background-color: aqua;*/
    overflow: hidden;
/*    border: 2px solid red;*/
}

.hero-back img {
    width: 112%;
    height: auto;
    /*transform: translateX(-5%);*/
/*    height: 700px;*/
/*    height: 100%;*/
    /*border: 2px solid red;*/
}
    
/*hero connector png*/
    
    
.hero-connect {
    width: 100%;
    /*height: 37vh;*/
    height: 277.5px;
    position: absolute;
    bottom: 0;
    margin-bottom: -5px;
    overflow-x: hidden;
    overflow-y: hidden;
    /*border: 2px solid yellow;*/
}

.hero-connect img {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    margin-bottom: -12px;
/*    left: 30%;*/
/*    object-fit: cover;*/
/*    object-position: center;*/
    /*transform: translateX(-18%);*/
    /*border: 2px solid purple;*/
}
    
    
    
/*hero big and small content*/
    
/*minus out 18 of height*/
/*    minus again 18 & 14 & 24*/
    
.hero-container {
    /*height: 68vh;*/
    height: 590px;
    width: 100%;
    position: relative;
/*    overflow: hidden;*/
    /*border: 3px solid cyan;*/
/*    background-color: darkgrey;*/
}
    

.hero-content {
    width: 100%;
    /*height: 48vh;*/
    height: 410px;
    /*border: 2px solid pink;*/
}

.hero-content1 {
    width: 86%;
    height: 100%;
    margin: auto;
/*    border: 2px solid cyan;*/
    display: flex;
    flex-direction: row;
    position: relative;
}
    
    

.hero-bigcontent {
    width: 70%;
    height: 100%;
    position: absolute;
/*    border: 2px solid red;*/
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.hero-bigcontent h1{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 8vw;
    line-height: 60px;
    color: white;
    /*color: red;*/
    
}

.hero-bigcontent p{
    font-weight: 500;
    font-size: 2vw;
    color: white;
    /*color: red;*/
}
    

.hero-smallcontent {
    width: 55%;
    height: 100%;
    position: absolute;
    right: 0;
/*    border: 2px solid green;*/
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
/*    align-items: flex-end;*/
}

.hero-smallcontent1 {
    width: 100%;
    /*height: 40vh;*/
    height: 300px;
/*    border: 2px solid orange;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}


/*.hero-smallcontent12 {*/
/*    margin-bottom: 20px;*/
/*}*/

/*.hero-smallcontent13 {*/
/*    margin-bottom: 40px;*/
/*}*/


/*.hero-smallcontent11 h1{*/
/*    font-size: 10vw;*/
/*}*/

/*.hero-smallcontent12 h1{*/
/*    font-size: 10vw;*/
/*}*/

/*.hero-smallcontent13 h1{*/
/*    font-size: 10vw;*/
/*}*/

/*.hero-smallcontent11 p{*/
/*    font-size: 1.6vw;*/
/*}*/

/*.hero-smallcontent12 p{*/
/*    font-size: 1.6vw;*/
/*}*/

/*.hero-smallcontent13 p{*/
/*    font-size: 1.6vw;*/
/*}*/

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
  
    
    
    
/*    media 1194px end here*/
}






/*media portrait tablets start here*/


@media (max-width: 920px){
    


.hero-back img {
    width: auto;
    height: 112%;
    /*border: 2px solid red;*/
}






    
    
    
}


/*media 920px end here*/
















/*media start here*/

@media (max-width: 600px) {
  .menu-button-container {
    display: flex;
  }
    
  .main-hero {
        z-index: 2;
  }
    
  .menu {
    position: absolute;
    top: 0;
    margin-top: 58px;
    left: 0;
    flex-direction: column;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    z-index: 1;
    background-color: rgba(11,66,81,0.9);
/*    backdrop-filter: blur(15px);*/
  }
    
/*after sticky java*/
    
  .sticky {
    /*height: 9vh;*/
    height: 67.5px;
}
    
    
.stickymedia {
      backdrop-filter: blur(15px) !important;  
      -webkit-backdrop-filter: blur(15px) !important; /* for Safari */
      background-color: rgba(11,66,81,0.9) !important;
      margin-top: 63px;
      will-change: transform;
    }
    
    
    
  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
/*    border: 2px solid red;*/
  }
    
  #menu-toggle:checked ~ .menu li {
/*    border: 1px solid pink;*/
    height: 2.5em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    align-items: center;
/*    border: 2px solid aqua;*/
  }
    
  .menu > li {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: white;
    overflow: hidden;
/*    background-color: pink;*/
  }
    
  .menu > li:not(:last-child) {
    border-bottom: 1px solid #444;
  }
    
    
.hero-free{
    display: none;
}

.menu a:not(.active):not(.hero-btn){
    font-size: 4.5vw;
}
    
.active {
    font-size: 4.5vw;
}
    

    
    
    
/*hero details*/
    
.hero-details {
    width: 100%;
    /*height: 8vh;*/
    height: 60px;
/*    border: 2px solid red;*/
}
    
  
.hero-details1 {
    justify-content: space-around;
/*    border: 2px solid red;*/
}
    
.hero-details1 li {
    padding-right: 0px;
}

.hero-details1 i{
    padding-right: 8px;
}

.hero-details11 {
    width: auto;
/*    border: 3px solid yellow;*/
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.hero-details12 {
    width: auto;
/*    border: 3px solid yellow;*/
    display: flex;
    align-items: center;
    justify-content: center;
    
}
    
    
/*hero 2 top details*/
    


.hero-details1 li {
    font-size: 2.6vw;
    text-decoration: none !important;
    color: white !important;
}

.hero-details1 i {
    font-size: 2.6vw;
    text-decoration: none !important;
    color: white !important;
}
    

    
/*hero button*/
    
    
 
.hero-content-btn {
    padding: 10px 20px;
    margin-top: 15px;
    text-decoration: none;
    background-color: #f2c864;
    transition: 0.4s;
    border: none;
    outline: none;
    cursor: pointer;
    color: white;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 2.2vw;
}
    
/*hero video background*/

    
.hero-clip {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
/*    border: 2px solid red;*/
}
    
/* hero background image*/
    
.hero-back {
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
/*    background-color: aqua;*/
    overflow: hidden;
/*    border: 2px solid red;*/
}

.hero-back img {
    width: auto;
    height: 100%;
    transform: translateX(-5%);
/*    height: 700px;*/
/*    height: 100%;*/
}
    
/*hero connector png*/
    
    
.hero-connect {
    width: 100%;
    /*height: 37vh;*/
    height: 277.5px;
    position: absolute;
    bottom: 0;
    margin-bottom: -5px;
    overflow-x: hidden;
    overflow-y: hidden;
    /*border: 2px solid yellow;*/
}

.hero-connect img {
    width: auto;
    height: 80%;
    position: absolute;
    bottom: 0;
    margin-bottom: -2px;
/*    left: 30%;*/
/*    object-fit: cover;*/
/*    object-position: center;*/
    transform: translateX(-18%);
    /*border: 2px solid purple;*/
}
    
    
    
/*hero big and small content*/
    
/*minus out 18 of height*/
/*    minus again 18 & 14 & 24*/
    
.hero-container {
    /*height: 68vh;*/
    height: 510px;
    width: 100%;
    position: relative;
/*    overflow: hidden;*/
/*    border: 3px solid cyan;*/
/*    background-color: darkgrey;*/
}
    

.hero-content {
    width: 100%;
    /*height: 48vh;*/
    height: 360px;
/*    border: 2px solid pink;*/
}

.hero-content1 {
    width: 86%;
    height: 100%;
    margin: auto;
/*    border: 2px solid cyan;*/
    display: flex;
    flex-direction: row;
    position: relative;
}
    
    

.hero-bigcontent {
    width: 70%;
    height: 100%;
    position: absolute;
/*    border: 2px solid red;*/
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.hero-bigcontent h1{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 12vw;
    line-height: 60px;
    color: white;
    /*color: red;*/
    
}

.hero-bigcontent p{
    font-weight: 500;
    font-size: 3.4vw;
    color: white;
    /*color: red;*/
}
    

.hero-smallcontent {
    width: 55%;
    height: 100%;
    position: absolute;
    right: 0;
/*    border: 2px solid green;*/
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
/*    align-items: flex-end;*/
}

.hero-smallcontent1 {
    width: 100%;
    /*height: 40vh;*/
    height: 300px;
/*    border: 2px solid orange;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}


.hero-smallcontent12 {
    margin-bottom: 20px;
}

.hero-smallcontent13 {
    margin-bottom: 40px;
}


.hero-smallcontent11 h1{
    font-size: 10vw;
}

.hero-smallcontent12 h1{
    font-size: 10vw;
}

.hero-smallcontent13 h1{
    font-size: 10vw;
}

.hero-smallcontent11 p{
    font-size: 1.6vw;
}

.hero-smallcontent12 p{
    font-size: 1.6vw;
}

.hero-smallcontent13 p{
    font-size: 1.6vw;
}

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
/*    media 600px end here*/
}






/*media 550px for resize logo*/

@media (max-width: 550px){
    
    
.hero-logo img{
    width: 131px;
    height: 55px;
    /*border: 2px solid red;*/
}


    
    
}

/*media 550px end here*/












/*media start here*/

@media (max-width: 428px) {
  .menu-button-container {
    display: flex;
  }
    
  .main-hero {
        z-index: 2;
  }
    
  .menu {
    position: absolute;
    top: 0;
    margin-top: 58px;
    left: 0;
    flex-direction: column;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    z-index: 1;
    background-color: rgba(11,66,81,0.9);
/*    backdrop-filter: blur(15px);*/
  }
    
/*after sticky java*/
    
  .sticky {
    /*height: 9vh;*/
    height: 70.2px;
}

    
.stickymedia {
      backdrop-filter: blur(15px) !important;  
      -webkit-backdrop-filter: blur(15px) !important; /* for Safari */
      background-color: rgba(11,66,81,0.9) !important;
      margin-top: 63px;
      will-change: transform;
    }
    
    
    
  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
/*    border: 2px solid red;*/
  }
    
  #menu-toggle:checked ~ .menu li {
/*    border: 1px solid pink;*/
    height: 2.5em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    align-items: center;
/*    border: 2px solid aqua;*/
  }
    
  .menu > li {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: white;
    overflow: hidden;
/*    background-color: pink;*/
  }
    
  .menu > li:not(:last-child) {
    border-bottom: 1px solid #444;
  }
    
    
.hero-free{
    display: none;
}

.menu a:not(.active):not(.hero-btn){
    font-size: 4.5vw;
}
    
.active {
    font-size: 4.5vw;
}
    

    
    
    
/*hero details*/
    
.hero-details {
    width: 100%;
    /*height: 8vh;*/
    height: 62.4px;
/*    border: 2px solid red;*/
}
    
  
.hero-details1 {
    justify-content: space-around;
/*    border: 2px solid red;*/
}
    
.hero-details1 li {
    padding-right: 0px;
}

.hero-details1 i{
    padding-right: 8px;
}

.hero-details11 {
    width: auto;
/*    border: 3px solid yellow;*/
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.hero-details12 {
    width: auto;
/*    border: 3px solid yellow;*/
    display: flex;
    align-items: center;
    justify-content: center;
    
}
    
    
/*hero 2 top details*/
    


.hero-details1 li {
    font-size: 2.6vw;
    text-decoration: none !important;
    color: white !important;
}

.hero-details1 i {
    font-size: 2.6vw;
    text-decoration: none !important;
    color: white !important;
}
    

    
/*hero button*/
    
    
 
.hero-content-btn {
    padding: 10px 20px;
    margin-top: 15px;
    text-decoration: none;
    background-color: #f2c864;
    transition: 0.4s;
    border: none;
    outline: none;
    cursor: pointer;
    color: white;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 2.2vw;
}
    
/*hero video background*/

    
.hero-clip {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
/*    border: 2px solid red;*/
}
    
/* hero background image*/
    
.hero-back {
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
/*    background-color: aqua;*/
    overflow: hidden;
/*    border: 2px solid red;*/
}

.hero-back img {
    width: auto;
    height: 100%;
    transform: translateX(-5%);
/*    height: 700px;*/
/*    height: 100%;*/
}
    
/*hero connector png*/
    
    
.hero-connect {
    width: 100%;
    /*height: 37vh;*/
    height: 288.6px;
    position: absolute;
    bottom: 0;
    margin-bottom: -5px;
    overflow-x: hidden;
    overflow-y: hidden;
    /*border: 2px solid yellow;*/
}

.hero-connect img {
    width: auto;
    height: 80%;
    position: absolute;
    bottom: 0;
    margin-bottom: -2px;
/*    left: 30%;*/
/*    object-fit: cover;*/
/*    object-position: center;*/
    transform: translateX(-18%);
    /*border: 2px solid purple;*/
}
    
    
    
/*hero big and small content*/
    
/*minus out 18 of height*/
/*    minus again 18 & 14 & 24*/
    
.hero-container {
    /*height: 68vh;*/
    height: 530.4px;
    width: 100%;
    position: relative;
/*    overflow: hidden;*/
/*    border: 3px solid cyan;*/
/*    background-color: darkgrey;*/
}
    

.hero-content {
    width: 100%;
    /*height: 48vh;*/
    height: 374.4px;
/*    border: 2px solid pink;*/
}

.hero-content1 {
    width: 86%;
    height: 100%;
    margin: auto;
/*    border: 2px solid cyan;*/
    display: flex;
    flex-direction: row;
    position: relative;
}
    
    

.hero-bigcontent {
    width: 70%;
    height: 100%;
    position: absolute;
/*    border: 2px solid red;*/
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.hero-bigcontent h1{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 14vw;
    line-height: 60px;
    color: white;
    
}

.hero-bigcontent p{
    font-weight: 500;
    font-size: 3.6vw;
    color: white;
}
    

.hero-smallcontent {
    width: 55%;
    height: 100%;
    position: absolute;
    right: 0;
/*    border: 2px solid green;*/
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
/*    align-items: flex-end;*/
}

.hero-smallcontent1 {
    width: 100%;
    /*height: 40vh;*/
    height: 312px;
/*    border: 2px solid orange;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}


.hero-smallcontent12 {
    margin-bottom: 20px;
}

.hero-smallcontent13 {
    margin-bottom: 40px;
}


.hero-smallcontent11 h1{
    font-size: 10vw;
}

.hero-smallcontent12 h1{
    font-size: 10vw;
}

.hero-smallcontent13 h1{
    font-size: 10vw;
}

.hero-smallcontent11 p{
    font-size: 1.6vw;
}

.hero-smallcontent12 p{
    font-size: 1.6vw;
}

.hero-smallcontent13 p{
    font-size: 1.6vw;
}

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
/*    media 428px end here*/
}





/*media desktop start here*/

@media (min-width: 1600px){
    
    


.hero-details {
    width: 100%;
    /*height: 8vh;*/
    height: 90px;
    /*border: 2px solid red;*/
}
    
    

.hero-logo img{
    width: 163px;
    height: 68px;
    /*border: 2px solid red;*/
}

    
    

    
    
    
    
}

/*media desktop ends here*/



/*media gaming laptop start here*/

@media (min-width: 1445px) and (min-height: 864px) and (max-width: 1599px){
    

.hero-back img {
    width: 102%;
}


    
    
    
    
}


/*media gaming laptop end here*/