@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
/*!--------- TEMA -------------*/
:root {
  --body-bg: #f2f2f2;
  ---cor-texto: #262626;
  ---body-color: #a6a6a6;
  ---link-color: #b9bf0f;
  ---link-color-hover: #d2d904;

  ---destaque: #262626;
  ---nav-bk: #b9bf0f;

  ---img-footer: url('../imagens/footer-lg.jpg');

  ---on: url('../icons/on.png');
  ---off: url('../icons/off.png');

}

.dark-mode:root {
  --body-bg: #1d1d1d;
  ---cor-texto: #f2f2f2;
  ---body-color: #a6a6a6;
  ---link-color: #d2d904;
  ---link-color-hover: #b9bf0f;

  ---destaque: #d2d904;
  ---nav-bk: #1f1f1f;

  ---img-footer: url('../imagens/footer.jpg');
}

/* Color Theme Swatches in Hex */
.Type_Collection-1-hex {
  color: #d2d904;
}
.Type_Collection-2-hex {
  color: #b9bf0f;
}
.Type_Collection-3-hex {
  color: #f2f2f2;
}
.Type_Collection-4-hex {
  color: #a6a6a6;
}
.Type_Collection-5-hex {
  color: #262626;
}

/*!---------- CONF ------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav ul li {
  display: inline-block;
}

nav ul li,
nav ul li a {
  color: var(---link-color);
}

li {
  list-style-type: none;
}

*,
.principal-ft a,
a,
a:hover,
nav ul li a {
  text-decoration: none var(---link-color-hover);
}

html {
  scroll-behavior: smooth;

}

body {
  padding-top: 0;
}

/*!-------------------- MIDIA ------------*/
@media screen and (max-width: 967px) {
  .header-texto h1{
    font-size: 50px;
  }
}

@media screen and (min-width: 968px) {
  .header-texto h1{
    font-size: 100px;
  }
}

@media screen and (min-width: 1024px) {
  .header-texto h1{
    font-size: 100px;
  }
}

h2,h3{
  font-family: "Dancing Script", cursive;
  
}

/*!--------------------- HEAD -------------*/
.header-section {
  width: 100%;
  height: 85vh;
  padding: 15px;
  background: url(../imagens/banner.png) no-repeat center;
  background-size: cover;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  align-items: center;
  /*  align-content: flex-; */

}

.header-texto {
  /* background-color: #863e9e1c; */
  border-radius: 20px;
  justify-content: center;
  align-content: center;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 20px;
  width: 400px;
  font-family: "Oswald", sans-serif;
  /* backdrop-filter: blur(3px); */

}

.header-texto h1 {

  /* font-size: 90px; */
   color: var(---destaque);
   font-family: "Rubik Mono One", monospace;
  text-shadow: 0.02em 0.02em 0.01em var(--body-bg);

}

.header-icon-dw {
  margin-top: 60px;
  width: 100%;


}

.header-icon-dw svg {
  color: var(---destaque);
  width: 100%;
  position: absolute;
  top: 80%;
  right: 0;
  height: 50px;
}

.header-formulario {
  padding: 10px;
  display: flex;
  width: 300px;
}

.adds{  
  position: absolute;
  top: 60%; 
  margin-top: 15px;
  
  text-align: center;  
  color:black;
}
.lead {
  font-size: 1.3rem;
  color: black;

}

#menu {
  background-color: transparent !important;
  padding: 1.5rem 1rem;
  transition: all 500ms linear;
}

#menu.ativo {
  background-color: var(---nav-bk) !important;
  padding: 0 1rem;
}

.cabeçalho {
  background-color: #2aa4d800;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
}

.cabeçalho-imagem img {
  height: 30px;
  margin-right: 1px;
}

.cabeçalho-texto {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
}

.cabeçalho-redes-icon {
  height: 40px;
  padding: 5px;
}

.cabeçalho-redes {
  color: #fff;
  gap: 10px;
  display: flex;
  flex-direction: row;

  align-items: center;
  justify-items: center;
  align-content: center;
}

/*!------------------- BOTÕES ------------*/


.btn {
  border: 1px solid rgb(255, 255, 255);
  background: #ffae0000;
  color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  font-size: 14px;
  padding: 2px;
  transition: 0.2s;
  border-radius: 5px;
  width: 100px;
  height: 25px;
}


.btn:hover {
  background: var(---destaque);
  border: 0;
  transform: translateY(-2px);
  color: var(--body-bg);
}

hr{

  border-top: 1px solid var(---destaque);
}
/*!-------------------- FOOTER ------------*/
/* .footer {
  background: url(../imagens/working-at-desk.jpg) no-repeat center;
  background-size: cover;
} */

.principal-ft {
  /* border-top: 5px solid rgba(20, 20, 20, 0.5);
  background: url(../imagens/footer.jpg) no-repeat center;
  background-size: cover; */

  font-family: Arial, Helvetica, sans-serif;

  height: 100%;
  color: #e7e7e7;
  padding: 25px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: space-around;
}

.principal-ft a {
  color: var(---link-color);
}

.principal-ft a:hover {
  color: var(---link-color-hover);
}

.principal-ft img {
  width: 60px;
  height: auto;
}

.item-ft {
  flex: 1 1 150px;
  align-content: flex-start;
}

.item-ft img {
  width: auto;
  height: 40px;
}

.up svg {
  width: 30px;
  color: var(---destaque);
}

/*? ------------------ GALERIA -----------------------*/

.photo-gallery {
  background-color: var(--body-bg);
}

.photo-gallery p {
  color: var(---cor-texto);
}

.photo-gallery h2 {
  font-weight: 700;
  padding-top: 40px;
  color: var(---destaque);
}

@media (max-width: 767px) {
  .photo-gallery h2 {
    margin-bottom: 25px;
    padding-top: 25px;
    font-size: 24px;
  }
}

.photo-gallery .intro {
  font-size: 16px;
  max-width: 500px;
  margin: 0 auto 40px;
  color: var(---cor-texto);
}

.photo-gallery .intro p {
  margin-bottom: 0;
}

.photo-gallery .photos {
  padding-bottom: 20px;
}

.photo-gallery .item {
  padding-bottom: 30px;
}

/*?------------ BOTAO TROCA DE TEMA---------------------*/
.switch {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

.switch + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}

.switch--shadow + label {
  padding: 2px;
  width: 40px;
  height: 20px;
  background-color: #999999c2;
  border-radius: 30px;
}

.switch--shadow + label:before,
.switch--shadow + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
.switch--shadow + label:before {
  right: 1px;
  background-color: #f1f1f19c;
  border-radius: 30px;
  transition: all 0.4s;


}
.switch--shadow + label:after {
  width: 18px;
  background-color: rgb(255, 255, 255);
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: all 0.4s;
  content: "ON";
  font-size: 11px;
  color: #1d1d1d;
}
.switch--shadow:checked + label:before {
  background-color: var(---destaque);

}
.switch--shadow:checked + label:after {
  transform: translateX(20px);

}
/* .switch__container{
  position: absolute;
  top: 5;
  right: 2%;

} */

footer{
	margin:0;
	padding:0;

    background: var(---img-footer) repeat 0 0;
	-webkit-animation: 10s linear 0s normal none infinite animate;
	-moz-animation: 10s linear 0s normal none infinite animate;
	-ms-animation: 10s linear 0s normal none infinite animate;
	-o-animation: 10s linear 0s normal none infinite animate;
	animation: 20s linear 0s normal none infinite animate;

}

 @-webkit-keyframes animate {
	from {background-position:0 0;}
	to {background-position: 200px 0;}
}

@-moz-keyframes animate {
	from {background-position:0 0;}
	to {background-position: 200px 0;}
}

@-ms-keyframes animate {
	from {background-position:0 0;}
	to {background-position: 200px 0;}
}

@-o-keyframes animate {
	from {background-position:0 0;}
	to {background-position: 200px 0;}
}

@keyframes animate {
	from {background-position:0 0;}
	to {background-position: 200px 0;}
} 

.switch-holder {
 
  display: flex;
  padding: 1px 0px;
  border-radius: 10px;
  /* box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.7),
    10px 10px 10px rgba(0, 0, 0, 0.2),
    inset 8px 8px 15px rgba(255, 255, 255, 0.7),
    inset 10px 10px 10px rgba(0, 0, 0, 0.2); */
  justify-content: space-between;
  align-items: center;
  justify-content: center;
}
span{
  font-family: "Dancing Script", cursive;
}
.switch-label {
  padding: 0 5px 0 5px;
}
.switch-label i {
  margin-right: 0px;
}
.switch-toggle {
  height: 18px;
}
.switch-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -2;
}
.switch-toggle input[type="checkbox"] + label {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 22px;
  border-radius: 20px;
  margin: 0;
  cursor: pointer;
  box-shadow: inset -4px -4px 8px rgba(20, 20, 20, 0.6),
    inset 0px 10px 10px rgba(0, 0, 0, 0.849);
}
.switch-toggle input[type="checkbox"] + label::before {
  position: absolute;
  content: 'OFF';
  color:black;
  font-size: 13px;
  text-align: center;
  line-height: 20px;
  top: 1px;
  left: 1px;
  width: 35px;
  height: 20px;
  border-radius: 20px;
  background-color: #eeeeee;
  /* box-shadow: -3px -3px 5px rgba(255, 255, 255, 0.5),
    3px 3px 5px rgba(0, 0, 0, 0.25); */
  transition: 0.3s ease-in-out;
}
.switch-toggle input[type="checkbox"]:checked + label::before {
  left: 40%;  
  content: "ON";
  color:var(---nav-bk);
  background-color: var(---link-color-hover);
   box-shadow: -1px -1px 3px rgba(255, 255, 255, 0.63), 1px 1px 3px #d2d904; 
}


.container3 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30vh;
  background-color: var(--body-bg);
}

.card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  width: 300px;
}

.card h3 {
  margin-bottom: 15px;
  color: #333;
}

.card p {
  font-size: 18px;
  color: #25D366; /* Cor típica do WhatsApp */
  font-weight: bold;
}

.card a {
  text-decoration: none;
  color: #25D366;
}
.card img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.new{
  background-color:#b9bf0f;
}