/* GLOBAL STYLES */
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #e7e7e7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  text-align: left;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 100%;
  color: #84a0ca;
}

img {
  max-width: 100%;
}

h1 {
  font-size: 35px;
  color: #0b408a;
  font-family: Montserrat, Helvetica, sans-serif;
  font-weight: 600;
  line-height: 1.4;
  padding: 0;
  margin: 0;
}

h2 {
  font-size: 20px;
  line-height: 1.4;
  color: #0b408a;
  font-family: Montserrat, Helvetica, sans-serif;
  font-weight: 400;
  padding: 0;
  margin: 0;
}

p {
  font-size: 16px;
  color: #333;
  font-family: Montserrat, Helvetica, sans-serif;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

small {
  font-size: 16px;
  color: #0b408a;
  font-family: Montserrat, Helvetica, sans-serif;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

a {
  font-family: Montserrat, Helvetica, sans-serif;
  font-weight: 400;
  text-decoration: none;
  color: #777;
  transition: 0.3s;
}

/* EDIT DESCRIPTION LINK COLOR */
a:hover {
  color: #326b94;
}

/* SECTION */
.section {
  width: 90%;
  max-width: 600px;
  position: relative;
  margin: 0 auto;
  background: #fff;
}

/* BUTTON AND ICON STYLES */
#green {
  background: #34a853;
}

#greenSpo {
  background: #2ad164;
  color: #000;
}

#deezer {
  background: linear-gradient(
    45deg,
    #ff0000,
    #ffed00,
    #ff0092,
    #c2ff00,
    #00c7f2,
    #c1f1fc
  );
}

#greenSpo:hover {
  background: #30e66f;
}

#green:hover {
  background: #3dc461;
}

#red {
  background: #c92e1c;
}

#blue {
  background: #032266;
 
}

#blue:hover
{

  background:rgb(22, 65, 182);
}

#red-prep {
  background: #c92e1c;
}

#red:hover {
  background: #e73723;
}

#pink {
  background: #f09433;
  background: -moz-linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  background: -webkit-linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}

#pink:hover {
  background: #f09433;
  background: -moz-linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  background: -webkit-linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );

}
.section img {
  border-radius: 100%;
  width: 8rem;
}

.social-spacing {
  margin-left: 16px;
  margin-right: 16px;
  white-space: nowrap;
  line-height: 1.5;
  color: #0b408a;
}

.clear {
  clear: both;
}

.avy {
  opacity: 0.95;
  width: 150px;
  margin: 20px 0;
}

.avy:hover {
  opacity: 1;
}

.round {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%; /* future proofing */
  -khtml-border-radius: 50%; /* for old Konqueror browsers */
  -webkit-appearance: none;
}

/* EDIT LINK UNDERLINE COLOR */
.underline:hover {
  border-bottom: 1px solid #0b408a;
}

.preul {
  border-bottom: 1px solid #eee;
}

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

.white {
  color: #fff;
}

.light-grey {
  color: #0b408a;
  padding: 20px 0;
}

.divider {
  border-bottom: 1px solid #eee;
}

/* BUTTON STYLES */
.button {
  background: red;
  padding: 20px;
  margin: 20px auto;
  transition: 0.3s;
}

.button:hover {
  opacity: 1;
  background: #0f52af;
}

.padding-top-50 {
  padding-top: 10px;
  background: #e7e7e7;
}
.padding-bottom-50 {
  padding-bottom: 1px;
  background-color: #e7e7e7;
}
.padding-bottom-100 {
  padding-top: 0px;
  background-color: #e7e7e7;
}
.padding-top-25 {
  padding-top: 25px;
}
.padding-top-15 {
  padding-top: 7px;
  background-color: #e7e7e7;
}

/* DROPDOWN STYLES */
/* DROPDOWN STYLES */
.dropdown {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
}

.dropbtn {
  background-color: #0b408a; /* Cor do botão */
  color: white;
  padding: 16px 20px;
  margin-bottom: 8px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: 5px; /* Borda arredondada */
  transition: background-color 0.3s ease; /* Transição suave */
  display: inline-flex;
  align-items: center; /* Centraliza o conteúdo dentro do botão */
}

.dropbtn i {
  margin-right: 8px; /* Adiciona espaçamento entre o ícone e o texto */
}

.dropdown-content {
  display: none; /* Esconde o dropdown inicialmente */
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000; /* Aumentei o z-index para garantir que o conteúdo do dropdown fique sobre outros elementos */
  border-radius: 5px; /* Borda arredondada */
  padding: 10px 0;
  visibility: hidden; /* Inicia invisível */
  opacity: 0; /* Opacidade zero para o efeito de transição */
  transition: opacity 0.3s ease, visibility 0s 0.3s; /* Transição para suavizar a exibição */
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: background-color 0.3s ease;
}

.dropdown-content a:hover {
  background-color: #ddd; /* Cor de hover no item do menu */
}

/* Estilo do botão "pink" */
#pink {
  padding: 16px;
  color: white;
  font-size: 16px;
  border-radius: 5px;
  text-align: center;
}

.white {
  color: white;
}

/* Estilo do botão dentro do dropdown */
.button {
  padding: 16px 20px;
  margin: 8px 0;
  text-align: center;
  color: white;
  font-size: 16px;
  border-radius: 5px; /* Bordas arredondadas */
  transition: background-color 0.3s ease;
}

/* Dropdown Button */
.dropdown {
  position: relative;
  display: inline-block;
  width: 100%; /* Largura 100% para manter o padrão */
  text-align: center; /* Centraliza o conteúdo */
}

.dropbtn {
  color: #fff; /* Cor do texto */
  padding: 20px; /* Espaçamento para garantir o tamanho adequado */
  margin: 0 auto; /* Centraliza o botão */
  font-size: 16px; /* Tamanho de fonte ajustado */
  width: 100%; /* Largura total do botão */
  border: none; /* Remove bordas do botão */
  cursor: pointer;
  text-align: center; /* Centraliza o texto */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease; /* Transição suave para o hover */
}

.dropbtn i {
  margin-right: 10px; /* Espaçamento entre o ícone e o texto */
}

.dropbtn i.fa-chevron-down {
  margin-left: 10px; /* Espaçamento entre o texto e a seta */
}

/* Ajustando o comportamento do dropdown quando é clicado ou hover */
.dropdown:hover .dropdown-content {
  display: block;
  visibility: visible; /* Torna o dropdown visível ao passar o mouse */
  opacity: 1; /* Altera opacidade para visível */
  transition: opacity 0.3s ease, visibility 0s; /* Faz a transição de opacidade e visibilidade de forma suave */
}

/* Controlando a visibilidade dos dropdowns */
.dropdown:hover .dropdown-content {
  display: block;
  visibility: visible; /* Torna visível ao hover */
  opacity: 1; /* Torna o conteúdo visível */
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 100%; /* Largura igual ao botão */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra suave */
  z-index: 1000; /* Garantindo que o dropdown fique em frente aos outros elementos */
}