@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body{
  font-family: 'Poppins', sans-serif;
  line-height: 1.2; 
}

*{
  margin: 0px;
  padding: 0px;
}

::-webkit-scrollbar{
 width: 5px;
 height: 0px;
}
::-webkit-scrollbar-thumb{
  background-color: rgb(24, 23, 43);
  border-radius: 5px;
  
}
.col-xl-12 .col-md-12 .col-sm-12 .col-xxl-12 .col-12 .col-lg-12{
  overflow: hidden;
}
section{
overflow: hidden;
}
  :root{
      --light_text:hsl(0, 0%, 100%);
      --main_background_color:rgb(21, 20, 31);
    
      --heads_font_size:35px;
      --font_size_15px:15px;
      --main_font_size:20px;
      --media_font_size:13px;
     
  }

  .header{
    background-color: rgb(21, 20, 31);
  }


 
  
  .nav-item .nav-link {
      color: var(--light_text);
      font-size: var(--media_font_size);
  
  }
  .nav-item{
    color: var(--light_text);
    font-size: var(--media_font_size);
    margin-right: 10px;
    cursor: pointer;
  }
  
  .nav-item .nav-link:hover {
   
      border-bottom: 2px solid gray;
      -webkit-transition: .4s;
      transition: .4s;
      font-weight: var(--dark_font_weight);
  
  }
  
  .nav-link {
      color: var(--light_text);
      font-size: var(--font_size_15px);
      
      margin-left: 5px;
  }



.navbar-nav{
  background-color: rgb(255, 255, 255,0.3);
  border-radius: 5rem;
}
.btn-nav-bar{
  background-color: rgb(119, 112, 214);
  text-transform: capitalize;
  color: var(--light_text);
  font-size: var(--media_font_size);
}
.btn-nav-bar:hover{
  background-color: rgb(75, 71, 131);
  text-transform: capitalize;
  color: var(--light_text);
  font-size: var(--media_font_size);
}
.btn{
  background-color: rgb(67, 87, 204);
  text-transform: capitalize;
  color: var(--light_text);
  font-size: var(--media_font_size);
}

  @media (max-width:576px) {
    .navbar{
      border-bottom: 1px solid rgb(255, 255, 255,0.01);
    }
    #navbarSupportedContent{
      padding-top:10px;
      padding-bottom:10px;
      
    }
    .navbar-nav{
      background-color: rgb(255, 255, 255,0.1);
      border-radius: 1rem;
     
    }
    .btn-var{
      padding-top:10px;
    }
  
  }
    
  @media (min-width: 577px) and (max-width:1030px) {
   
    .navbar{
      border-bottom: 1px solid rgb(255, 255, 255,0.01);
    }
    #navbarSupportedContent{
      padding-top:10px;
      padding-bottom:10px;
      
    }
    .navbar-nav{
      background-color: rgb(255, 255, 255,0.1);
      border-radius: 1rem;
     
    }
    .btn-var{
      padding-top:10px;
    }
  }