/* Resetando alguns estilos padrões */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    font-family: Arial, sans-serif;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

.main-container {
    display: flex;
    padding: 20px;
}

.sidebar {
    width: 240px;
    background-color: #f1f1f1;
    padding: 20px;
}

.sidebar ul {
    list-style-type: none;
}

.sidebar li {
    margin: 15px 0;
}

.content {
    flex: 1;
    padding-right: 20px;
}

.video-player {
    margin-bottom: 20px;
}

.video-title {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
}

.video-description p {
    font-size: 16px;
    color: #ffffff;
}

.subscribe-btn {
    padding: 10px 20px;
    background-color: red;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Lateral direita para vídeos recomendados */
.right-sidebar {
    width: 450px;  /* Aumentei a largura da sidebar para mais espaço */
    padding-left: 0px;  /* Removendo qualquer preenchimento extra */
    position: absolute;  /* Removendo a restrição de posicionamento */
    left: 760px;  /* Coloca a sidebar exatamente na borda esquerda */
    top: 82px;  /* Alinha a sidebar com o topo do conteúdo principal */
    bottom: 0;
}


.video-card {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 8px;
    text-align: left;
}

/* Responsividade: para telas menores */
@media (max-width: 780px) {
    .main-container {
        flex-direction: column;
    }


   /* Ajuste para os vídeos recomendados */
.recommended-videos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0px;
    padding-left: 0;  /* Retirando o padding à esquerda */
    margin-left: 0;   /* Retirando qualquer margem à esquerda */
    width: 100%; /* Garantir que os vídeos ocupem toda a largura disponível */
}

}

/* Estilos adicionais para o cabeçalho */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
}

.search-bar {
    display: flex;
    align-items: center;
    background-color: #f1f1f1;
    padding: 5px;
    border-radius: 5px;
    width: 300px;
}

.search-bar input {
    border: none;
    padding: 5px;
    width: 80%;
    border-radius: 5px;
}

.search-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.search-icon {
    width: 20px;
    height: auto;
}

.header-icons {
    display: flex;
    align-items: center;
    gap: 20px;  /* Espaço entre as imagens */
}

.header-icon {
    width: 35px;  /* Ajuste o tamanho das imagens */
    height: auto;
    cursor: pointer; /* Para indicar que as imagens são interativas */
}

.header-icon {
    width: 30px;  /* Tamanho da imagem */
    height: 30px; /* Tamanho da imagem */
    border-radius: 50%;  /* Faz a imagem ficar arredondada */
    object-fit: cover;  /* Garante que a imagem se ajuste corretamente ao círculo */
    cursor: pointer;
}

/* Estilo para o texto em negrito da descrição */
.video-description strong {
    font-weight: bold;
    color: black; /* Define a cor preta */
}

.video-description p {
    color: black; /* Define a cor preta para o parágrafo */
}

/* Estilos para os links dos vídeos recomendados */
.recommended-videos a {
    text-decoration: none;  /* Remove o sublinhado */
    color: #1a0dab;  /* Cor padrão de links do YouTube */
    font-weight: bold;
}

.recommended-videos a:hover {
    text-decoration: underline;  /* Adiciona o sublinhado ao passar o mouse */
    
}

/* Estilo dos cartões de vídeo recomendados */
.recommended-videos .video-card {
    display: flex;
    flex-direction: row;  /* Miniatura ao lado do título e descrição */
    align-items: flex-start;  /* Alinha os itens ao topo */
    gap: 6px;  /* Espaço entre miniatura, título e descrição */
    margin-bottom: -2px;  /* Espaço entre os vídeos */
    width: 100%;  /* Garantindo que os vídeos ocupem a largura inteira */
}


/* Estilo das miniaturas dos vídeos */
.video-thumbnail {
    width: 180px;  /* Tamanho da miniatura do vídeo */
    height: 110px;  /* Ajuste da altura da miniatura */
    object-fit: cover;  /* Garante que a imagem se ajuste bem */
    border-radius: 5px;  /* Bordas arredondadas */
}

/* Estilo dos links de título dos vídeos */
.video-card a {
    font-size: 10px;  /* Ajustando o tamanho do título */
    font-weight: bold;
    color: #000000;
    text-decoration: none;
    text-align: left;  /* Alinha o título à esquerda */
    flex-grow: flex;  /* Faz o título ocupar o espaço disponível */
}

.video-card a:hover {
    color: #1a0dab;  /* Cor do título ao passar o mouse */
}


/* Ajuste para o contêiner do vídeo principal (player) */
.video-player {
    display: flex;
    flex-direction: column;  /* Mudando para coluna para organizar título, vídeo e descrição */
    justify-content: space-evenly;  /* Centraliza o conteúdo */
    margin-left: 60px;  /* Move o vídeo para a direita */
    margin-bottom: 30px;
    width: calc(100% - 50px);  /* Garantir que o vídeo ocupe o restante da largura */
    border-radius: 10px;
}

/* Ajuste para o iframe do vídeo principal */
.video-player iframe {
    width: 100%;               /* Ajusta a largura do vídeo */
    max-width: 670px;         /* Limita a largura do vídeo */
    height: 400px;            /* Define uma altura menor para o vídeo */
    border-radius: 10px;
}

/* Ajuste para o título do vídeo */
.video-title {
    font-size: 50px;          /* Ajusta o tamanho da fonte */
    font-weight: bold;
    margin-top: 10px;
}



/* Ajuste para a descrição do vídeo */
.video-description {
    font-size: 12px;  /* Ajustando o tamanho da descrição */
    color: #070606;
    text-align: left;  /* Alinha o texto da descrição à esquerda */
    margin-top: 0px;
    padding: 0px;
    background-color: #ffffff;
    border-radius: 0px;
    width: 700px;  /* Ajusta para ocupar o espaço restante da largura */
    white-space: wrap   ;  /* Permite o texto quebrar para a próxima linha */

}

/* Estilo para o container do botão e logo */
/* Estilo para o container do botão e logo */
.subscribe-container {
    display: flex;  /* Coloca a logo e o título na mesma linha */
    align-items: center;  /* Alinha os itens verticalmente */
    gap: 15px;  /* Espaço entre a logo e o botão */
    position: relative;
}

.dio-logo {
    display: flex;
    align-items: center;  /* Alinha a logo e o texto verticalmente */
}

.logo-dio {
    width: 40px;  /* Tamanho fixo da logo */
    height: 40px; /* Tamanho fixo da logo */
}

.title-and-description {
    display: flex;
    flex-direction: column;  /* Organiza o título e descrição verticalmente */
    gap: 0px;  /* Espaçamento entre o título e a descrição */
}

.title {
    font-size: 14px;  /* Tamanho do título */
    font-weight: bold;
    color: #000000;
}

#description {
    font-size: 2%;  /* Diminui o tamanho da fonte */
    color: #000000;  /* Cor da descrição */
}

.button-container {
    display: flex;
    align-items: center;  /* Alinha os itens verticalmente */
    justify-content: space-between; /* Espaço entre a palavra DIO e o botão */
}

.buttons-container {
    display: flex;
    align-items: center;
    gap: 10px;  /* Espaço entre os botões */
}

.subscribe-btn {
    margin-left: 5px;
    padding: 5px 10px;  /* Diminui o padding para tornar o botão menor */
    font-size: 14px;     /* Ajusta o tamanho da fonte */
    background-color: red;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.action-buttons {
    display: flex;
    gap: 10px;
}

.action-btn {
    margin-left: 8%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: transparent;
    border: none;
    color: #333;
    font-size: 14px;
    cursor: pointer;
}

.action-btn i {
    margin-right: 5px; /* Espaço entre o ícone e o texto */
}

.action-btn:hover {
    color: #1a0dab; /* Cor ao passar o mouse */
}

.search-bar {
    display: flex;
    align-items: center;
    background-color: #f1f1f1;
    padding: 5px;
    border-radius: 5px;
    width: 300px;
}

.search-bar input {
    border: none;
    padding: 5px;
    width: 92%;
    border-radius: 5px;
}

.search-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin-left: 5px; /* Alinha o botão à direita do campo de texto */
}

.search-icon {
    width: 20px;
    height: auto;
}