@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;700&display=swap');
html {  scroll-behavior: smooth;}
body{ font-family: 'Mulish', sans-serif; background: #000}
ul{ margin:0; padding: 0; list-style-type: none}
h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0}
.material-icons{ vertical-align: middle;}

.bg-dark{ background: #000 !important}

.img_box{ background-size:cover !important;}
.bg-transparent{ background:rgba(0,0,0,0.8) !important}

.btn-danger{ background:#f8a403; border-color:#f8a403; color: #fff; }
.btn-danger:hover{ background:#f8a403; border-color:#f8a403; color: #fff; }
h4{ color:#fff; font-size: 60px;}

.nav{ position: fixed; top: 50%; left: 10px; transform: translateY(-50%); z-index: 9; display:block}
.nav li a{ display:block; background: rgba(0,0,0,0.8); border-radius: 20px; padding: 6px 25px  6px 25px; margin-bottom: 4px; color: #fff; }
.nav li{ position:relative; transform: scale(1); transition: all 0.3s ease}
.nav li:before{ content: ''; position:absolute; left:10px; top:50%; width: 10px; height: 10px; border-radius: 5px; background: #ddd; transform: translateY(-50%); transition:all 0.3s ease}
.nav li.active::before{ background: #f8a403}
.nav li:hover::before{ background: #f8a403}
.nav li:hover{ transform: scale(1.1)}

.nav-hidden{ left:-310px;}

.list li{ position:relative; transform: scale(1); transition: all 0.3s ease; padding:6px 20px; font-size: 1.15rem}
.list li:before{ content: ''; position:absolute; left:0px; top:15px; width: 10px; height: 10px; border-radius: 5px; background: #f8a403; transition:all 0.3s ease}

.slide1 h1 { font-size: 40px; color: #fff; font-weight: bold; text-shadow: 0 0 16px #000; line-height: 60px;}
.slide1 h1>small{ display:block; font-size: 24px; color:#f8a403; font-weight: bold}
.slide1 a{ color:#fff}
.slide1 a:hover{ color:#f8a403}

.grey{ filter:grayscale(0%);}

[data-toggle="collapse"]{ color: #f8a403}