@import url('./animacoes.css');

/* Base Styles */
.app {
  width: 100%;
  height: 100vh;
}

button {
  background: none;
  border: none;
}

span {
  background: none;
}

/* Header Styles */
.cabeca {
  background: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

.cabeca > .btnNavDrop {
  background: white;
  border: none;
  position: relative;
  padding: 20px 4px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

/* Dropdown Menu Styles */
.btnNavDropFilho {
  animation-name: aparecerSub;
  animation-duration: 0.3s;
  box-shadow: 0px 40px 100px #000000b5;
  position: absolute;
  left: 0px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: white;
  width: max-content;
  list-style: none;
  border-radius: 10px;
  margin-top: 24px;
  border: solid 1px #8080801f;
  gap: 1px;
  cursor: pointer;
  z-index: 9000;
}

.btnNavDropFilho > .fi-rr-caret-up {
  color: white;
  position: absolute;
  top: -16px;
  font-size: 20pt;
}

.btnNavDropFilho > li {
  background: none;
  border-radius: 6px;
  padding: 4px;
  text-align: left;
  width: 100%;
}
.btnNavDropFilho > a {
  background: none;
  border-radius: 6px;
  padding: 4px;
  text-align: left;
  width: 100%;
  text-decoration: none;
  color: initial;
}
.btnNavDropFilho > a > li {
  background: none;
}

.btnNavDropFilho > a:hover{
  background: #0073e6;
  color: white;
}

.btnNavDropFilho > li > span,
.btnNavDropFilho > li > a {
  background: none;
}

.btnNavDropFilho > li > a {
  text-decoration: none;
  color: initial;
}

/* Hover States */
:hover.btnNavDrop .btnNavDropFilho {
  display: flex;
}

.btnNavDropFilho > li:hover {
  background: rgb(1, 114, 240);
  color: white;
}

.btnNavDropFilho > li > a:hover {
  color: white;
}

/* Call Button Styles */
.btnTelefonar {
  transition: all 0.3s linear;
  background: linear-gradient(45deg, #0073e6 15%, #222 10%);
  padding: 10px 10px;
  border-radius: 20px;
  text-decoration: none;
  cursor: pointer;
}

.btnTelefonar > button {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btnTelefonar > button > span {
  color: white;
}

.fi-rr-call-outgoing {
  background: none;
  color: white;
  transform: translateY(2px);
}

:hover.btnTelefonar {
  background: linear-gradient(45deg, #0073e6 100%, #222 0%);
}

/* Media Query for larger screens */
@media screen and (min-width: 800px) {
  .cabeca > .btnNavDrop {
    padding: 20px 10px;
    text-align: center;
  }
  
  .btnTelefonar {
    padding: 10px 20px;
  }
  .btnNavDropFilho{
    left: initial;
  }
}