a{text-decoration:none;color:#00cc45}
a:hover{color:rgba(255,255,255,1);text-decoration:none}
h1{position:absolute;top:-12px;left:50%;margin-right:-50%;transform:translate(-50%,-50%);font-family:'Open Sans Condensed',sans-serif}

#header{border-radius:40px;width:150px;position:fixed;top:57px;left:0;z-index:100;transition:all .5s;overflow-y:auto;background-color: rgba(255, 255, 255, .5);padding:20px 20px 100vh}
.nav-menu *{width:150px;margin:80 auto;padding:0;list-style:none}
.nav-menu > ul > li{position:relative;white-space:nowrap}
.nav-menu a{display:flex;align-items:center;color:red;padding-left:8px;margin-bottom:8px;transition:.3s;font-size:15px;border-radius:50px;background:#f2f3f5;height:46px;width:100%;overflow:hidden;transition:.3s}
.nav-menu a i{font-size:16px}
.nav-menu a span{padding:0 5px 0 7px;color:red}
.nav-menu li:hover > a{color:#fff;background:#00cc45}
.nav-menu li:hover > a span{color:#fff}

.mobile-nav-toggle{
position:fixed;right:15px;
top:5px;
z-index:99;
border:0;
background:#222;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
padding:5px;
font-size:32px;
transition:all .4s;
outline:none!important;
line-height:1;
cursor:pointer;
text-align:right}

.mobile-nav-toggle i{color:#ff0000}
.mobile-nav-active {overflow:hidden}
.mobile-nav-active #header{left:0}
.mobile-nav-active .mobile-nav-toggle i{color:#ff0000}

#player {margin-top:0;width:100%;height:100%;bottom:0;}

.background_hora{width:196px;height:46px;background-color:#00cc45;position:absolute;right:20px;bottom:100px;border-radius:50px}

.relogio{ 
background-color: #ff0000; /* Vermelho do YouTube */
color: white;
padding: 15px;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
z-index: 1000;
display: flex;
align-items: center;
margin-top:-18%;
position:absolute;
margin-left:70%;
margin-bottom:0;
font-size:20px;
font-family:"Poppins",sans-serif;
    
}

#header2{border-radius:40px;display:none;position:relative;width:150px;top:57px;left:0;z-index:100;transition:all .5s;overflow-y:auto;background-color: rgba(255, 255, 255, .1);padding:20px 20px 100vh}
.nav-menu *{width:150px;margin:80 auto;padding:0;list-style:none}
.nav-menu > ul > li{position:relative;white-space:nowrap}
.nav-menu a{display:flex;align-items:center;color:red;padding-left:8px;margin-bottom:8px;transition:.3s;font-size:15px;border-radius:50px;background:#f2f3f5;height:46px;width:100%;overflow:hidden;transition:.3s}
.nav-menu a i{font-size:24px}
.nav-menu a span{padding:0 5px 0 7px;color:red}
.nav-menu li:hover > a{color:#fff;background:#00cc45}

@media (min-width: 992px) {
.mobile-nav-toggle{display:none}
}

@media (max-width: 991px) {
#header{width:auto;background-color: rgba(255, 255, 255, .5);border-right:1px solid #e6e9ec;left:-300px;padding:20px 30px 100vh 10px;}
}
@media (max-width: 991px) {
#header2{position:relative;width:150px;left:0;z-index:100;transition:all .5s;overflow-y:auto;background-color: rgba(255, 255, 255, .5);padding:20px 20px 100vh}
.nav-menu *{width:150px;margin:0;padding:0;list-style:none}
.nav-menu > ul > li{position:relative;white-space:nowrap}
.nav-menu a{display:flex;align-items:center;color:red;padding-left:8px;margin-bottom:8px;transition:.3s;font-size:15px;border-radius:50px;background:#f2f3f5;height:46px;width:100%;overflow:hidden;transition:.3s}
.nav-menu a i{font-size:24px}
.nav-menu a span{padding:0 5px 0 7px;color:red}
.nav-menu li:hover > a{color:#fff;background:#00cc45}

}

@media only screen and (max-width: 768px) {
#player{width:100%;height:100%;}
.background_hora{display:none}


/* Estilo do botão flutuante */
.floating-btn {
  position: fixed;
  bottom: 220px;
  right: 20px;
  background-color: #ff0000; /* Vermelho do YouTube */
  color: white;
  padding: 15px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: flex;
  align-items: center;
}

.floating-btn span {
  margin-left: 8px;
}

/* Estilo do modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.9);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.modal-content {
  width: 100%;
  height: 100%;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255, 255, 255, 0.3);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
}

.video-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-container iframe {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}