@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap');
:root{
     --orange:#93e4e4;
}

*::selection{
     background: var(--orange);
     color: #fff;
}

* {
     box-sizing: border-box;
     font-family:'Nunito',sans-serif;
     margin: 0;
     padding: 0;
     text-transform: capitalize;
     outline: none;
     border: none;
     text-decoration: none;
     transition: all .2s linear;
} 

html{
     font-size: 60%;
     overflow-x: hidden;
     scroll-padding-top: 6 rem;
     scroll-behavior: smooth;
}

section{
     padding: 2rem 9%;
}

.home{
     display: flex;
     align-items: center;
     justify-content: center;
     flex-flow: column;
     position: relative;
     z-index: 0;
     min-height: 100vh;
}

.home .content{
     text-align: center;
}

.home .content h2{
     font-size: 4.5rem;
     color:#ffffff;
     font-weight:bolder;
     text-transform: uppercase;
     text-shadow: 0 .3rem .5rem rgba(0,0,0,.1);
}
.home .content p{
     font-size: 2.5rem;
     color:#fff;
     padding: .5rem 0;
}

.btn{
     display: inline-block;
     margin-top: 1rem;
     background:#68c9d8;
     color: #fff;
     padding: .8rem 3rem;
     border: 2rem solid #68c9d8;
     font-size: 1.7rem;
     border-radius: 30px;
}

header{
    position:fixed;
    top:0; left:0 ; right :0;
     z-index: 1000;
     background: #1f3b4090;
     display:flex;
     align-items: center;
     justify-content: space-between;
     padding: 2rem 9% ;
}

header .logo{
     font-size: 2.5rem;
     font-weight: bolder;
     color: #fff;
     text-transform: uppercase;
}

header .logo span{
     color:#00f7ff;
}

header .navbar a{
     color:#fff;
     font-size: 2rem;
     margin:0 .8rem ;
}

header .navbar a:hover{
     color: #93e4e4;
 }

header .logo a:hover{
     color:#00f7ff;
}

header .icons i{
     font-size: 2.5rem;
     color:#fff;
     cursor: pointer;
     margin-right: 2rem;

}

header .icons i:hover{
     color:var(--orange);
}

header .search-bar{
     position:absolute;
     top:100%;left:0;right:0;
     padding:1.5rem 2rem;
     background: #22364086;
     border-top: .1rem solid rgba(255,255,255,.2);
     display: flex;
     align-items: center;
     z-index: 1001;
     clip-path: polygon(0 0,100% 0,100% 0,0 0);
}

header .search-bar.active{
     clip-path: polygon(0 0, 100% 0,100% 100%,0 100%);
}

header .search-bar #search-bar{
     width:100%;
     padding:1rem;
     text-transform: none;
     color:#333;
     font-size: 1.7rem;
     border-radius: .5rem;
}

header .search-bar label{
     color:#fff;
     cursor:pointer;
     font-size: 3rem;
     margin-left: 1.5rem;
}

header .search-bar label:hover{
     color:var(--orange);
}

#menu-bar{
     color: #fff;
     border: 1rem solid #fff;
     border-radius: .5rem;
     font-size: 3rem;
     padding:5rem 1.2rem;
     cursor: pointer;
     display: none;
}

.home .video-container video{
     position: absolute;
     top: 0;left: 0;
     z-index: -1;
     height: 100%;
     width: 100%;
     object-fit: cover;
}

.home .controls{
     padding: 1rem;
     border-radius: 5rem;
     background: rgba(0,0,0,.7);
     position: relative;
     top: 10rem;
}

.home .controls .vid-btn{
     height: 2rem;
     width: 2rem;
     display: inline-block;
     border-radius: 50%;
     background: #fff;
     cursor: pointer;
     margin: 0 .5rem;
}

.home .controls .vid-btn.active{
     background:var(--orange);

}