/*  ===== RESETS ===== */

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

/*  ===== ROOTS ===== */

:root {
  --background: hsl(194, 97%, 25%);
  --background-2: hsla(194, 96%, 30%, 1);
  --background-3: hsl(193, 69%, 20%);

  --text-color: hsl(0, 0%, 87%);
  --text-index: hsl(0, 0%, 13%);
  --font: 'Roboto Condensed', sans-serif;
  --text-size: 1.15rem;
  --title-size: 2rem;
  
  --header-height: 4rem;
  --margin: 1.5rem;

  --botton-color: hsl(33, 99%, 54%);
  --botton-color-hover: hsl(33, 100%, 44%);

}

/*  ===== BASE ===== */

html{
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  font: 300 var(--text-size) var(--font);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
}

#main{
  background-color: var(--text-color);
  color: var(--text-index);
}

.title {
  font: 700 var(--title-size) var(--font);
  -webkit-font-smoothing: auto;
}

.subtitle{
  font: 700 1.5rem var(--font);
  -webkit-font-smoothing: auto;
  margin-bottom: 1rem;
}

.subtitle1{
  font: 800 1.5rem var(--font);
}

img {
  width: 100%;
}

/*  ===== CABEÇALHO ===== */

#header{
  background-image:url('asstes/img/BG-MAPS-2.png'), linear-gradient(var(--background-3), var(--background),var(--background-3));
  background-position: center;
  background-size: 20%;
}

#headerhome{
  margin-bottom: 1rem;
  display: flex;

  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: var(--text-color);
  color: var(--background-3);
}

#headerhome.scroll{
  box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.1);
  background: var(--text-color);
  color: var(--background-3);
  transition: 0.3s;
}

/*  ===== LOGO ===== */

.logo{
  width: 16rem;
  padding: 1rem;
  margin-left: auto;
  margin-right: auto;
}

#headerhome .logo{
  width: 12rem;
  margin-left: -1rem;
}

#social{
  margin-bottom: -4rem;
  margin-top: 0.5rem;
}

#social .iconimg{
  width: 1rem;
}

#social .margin{
  margin: 0;
}


/*  ===== LAYOUT ===== */

.container{
  margin-left: var(--margin);
  margin-right: var(--margin);
}

.grid{
  display: grid;
  gap: 1.5625rem;
}

.section{
  padding: var(--header-height) 0;
}

.section .title{
  margin-bottom: 1.5rem;
}

.section header{
  margin-bottom: 4rem;
}

.viewer2{
  background-color: var(--background);
  color: var(--text-color);
}

.viewer2 header{
  text-align: center;
}

.text p{
  margin-top: 1rem;
  font-size: 1.15rem;
}

.headerland{
  text-align: center;
  margin-bottom: -1rem;
}

/*  ===== NAVEGATIONS ===== */

nav {
  height: 2.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

}

nav ul li{
  text-align: center;
}

nav ul li a{
  transition: 0.3s;
  color: var(--text-color);
}

nav ul li a:hover{
  color: var(--botton-color);
}

nav .menu{
  opacity: 0;
  visibility: hidden;
  top: -100vh;
  transition: 0.2s;
}

nav .menu ul{
  display: none;
}

nav.show .menu{
  opacity: 1;
  visibility: visible;

  background: var(--background-2);

  height: 100vh;
  width: 100vw;

  position: fixed;
  top: 0;
  left: 0;

  display: grid;
  place-content: center;
}

nav.show .menu ul{
  display: grid;
}

nav.show ul.grid{
  gap: 4rem;
}

nav .menu2{
  width: 5rem;
}

nav .menu .icon{
background-color: var(--background-2);
padding: 0.25rem;
color: var(--text-color);
margin: none;
}

.linkshome{
  margin-right: 1rem;
}

.linkshome .icon{
  color: var(--background);
  margin: 0.15rem;
  justify-content: stretch;
}

.linkshome .icon:hover{
  background-color: var(--text-color);
}


/*  ===== TOGGLE ===== */

.toggle{
  color: var(--text-color);
  font-size: 1.5rem;
  cursor: pointer;
}

nav .icon-icon-menu{
  color: var(--background-2);
}

nav .icon-icon-close{
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 1.5rem;

  top: -1.5rem;
  transition: 0.2s;
}

nav.show div.icon-icon-close{
  visibility: visible;
  opacity: 1;
  top: 1.5rem;
}

/*  ===== HOME INDEX ===== */

#homeindex{
  background-color: var(--text-color);
  color: var(--background-2);
  text-align: center;
}

#homeindex p{
  margin-bottom: 2rem;
}

/*  ===== HOME ===== */

#home{
  background-image: url('asstes/img/SITE-BG-IMG.png');
  background-position: center;
  background-size: cover;
}

#home .iconimg{
  margin-bottom: 3rem;
}

.video{
  text-align: center;
}

.video iframe{
  width: auto;
  height: auto;
}

.social{
  margin-top: 2rem;
  text-align: center;
}

.social2{
  text-align: center;}

.social .icon{
  padding: 1.25rem;
  border-radius: 5rem;
  margin: 0 0.75rem;
  background-color: var(--botton-color);
  color: var(--text-color);
  font-size: 1rem;
  font-weight: 800;
  transition: background 0.3s;
}

/*  ===== SOCIAL MEDIA ===== */

.icon-icon-facebook:hover{
  background-color: #3b5998;
}

.icon-icon-instagram:hover{
  background-color: #C13584;
}

.icon-icon-tiktok:hover{
  background-color: #25F4EE;
}

.icon-icon-youtube:hover{
  background-color: #c4302b;
}



.linkshome .icon-icon-facebook:hover{
  color: #3b5998;
}

.linkshome .icon-icon-instagram:hover{
  color: #C13584;
}

.linkshome .icon-icon-tiktok:hover{
  color: #25F4EE;
}

.linkshome .icon-icon-youtube:hover{
  color: #c4302b;
}

/*  ===== BOTTONS ===== */

#bottons{
  background-color: var(--background-2);
  text-align: center;
  background-image:url('asstes/img/BG-MAPS-2.png'), linear-gradient(var(--background-3), var(--background-2),var(--background-2),var(--background-3));
  background-position: center;
  background-size: 20%;
}

#bottons .text{
  margin-bottom: 3rem;
}

#bottons .button{
  margin-top: 2rem;
}

.button{
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-color);
  background-color: var(--botton-color);
  padding: 1rem;
  border-radius: 3rem;
  margin-bottom: -2rem;
}

.button:hover{
  background-color: var(--botton-color-hover);
}

.bar{
  background-color: var(--background);
  margin-top: 4rem;
}

.barborder{
  border: 1px var(--text-color) solid;
  border-radius: 10px;
  margin: 2rem;
  padding: 1rem;
}

.barborder .button{
  margin-top: 1rem;
}

.barborder .button a{
  color: var(--text-color);
}


/*  ===== ABOUNT INDEX ===== */

#aboutindex{
  color: var(--background-2);
}

#aboutindex .cards{
  margin-top: 2.5rem;
  margin-left: calc(var(--margin) * 2);
  margin-right: calc(var(--margin) * 2);
  align-items: center;
  position: relative;
}

.card-about{
  background: var(--text-color);
  padding: 2rem;
  text-align: center;
  border-radius: 0.25rem;
  position: relative;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
}

#aboutindex .cards::before {
  content: '';
  height: 50%;
  width: 90%;
  background: var(--botton-color);
  left: 1rem;
  position: absolute;
  z-index: 0;
}


/*  ===== ABOUNT ===== */

#abount{
  background-image: url('asstes/img/site-bg-img-2.png');
  background-position: center;
  background-size: cover;
}

#abount .title,
#abount p {
  text-align: center;
}

#abount .text{
  background-color: var(--background);
  padding:  1rem 2rem 2rem 2rem;
  border-radius: 1.5rem;
}

/*  ===== SERVICES INDEX ===== */

#servicesindex{
  background-color: var(--background-2);
  color: var(--text-color);
}

#servicesindex header{
  margin-bottom: 2rem;
  text-align: center;
}

.card{
  border: solid 1px;
  border-radius: 1rem;
  padding: var(--margin);
  background-color: var(--background);
}

.viewer2 .card{
  background-color: var(--background-2);
  padding: 2rem;
}

.arrow,
.arrow a{
  text-align: right;
  padding-top: 1rem;
  color: var(--text-color);
}

/*  ===== EBOOKS ===== */

#ebooks{
  background-color: var(--background-2);
  color: var(--text-color);
}

.books{
  text-align: center;
}

.books .button{
  margin-bottom: 0;
}

#ebooks i,
#bottons i,
#servicesindex i{
  margin-right: 5px;
}

/*  ===== CONTACT END FORM ===== */

#form{
  background:var(--background-3);
  color: var(--text-color);
}

#form .title{
  color: var(--base-color);
}

#form .grid{
  gap: 4rem;
}

#form ul.grid{
  gap: 2rem;
  margin-top: 2rem;
}

#form ul li i{
  font-size: 1.25rem;
  margin-right: 0.625rem;
  color: var(--base-color);
}

.form{
  margin-bottom: 4rem;
}

#form label,
#form input,
#form textarea,
#form button{
    display: block;
    width: 100%;
}

#form label{
    text-align: left;
    margin-bottom: 0.5rem;
    line-height: 1;
    font-weight: 600;
}


#form input,
#form textarea{
    font: inherit;
    margin-bottom: 1rem;
    padding: 0.75rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: border-color, box-shadow 0.2s;
    background-color: var(--text-color);
}

#form textarea{
    min-height: 10rem;
    resize: vertical;
}

#form input:hover,
#form input:focus,
#form textarea:hover,
#form textarea:focus{
    outline: none;
    border-color: var(--botton-color-hover);
    box-shadow: 0 0 0 2px var(--botton-color-hover);
}

#form button{
    display: block;
    padding: 1rem;
    background: var(--botton-color);
    color: var(--background-3);
    font: inherit;
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}


#form button:hover,
#form button:focus{
    outline-style: none;
    background: var(--botton-color-hover);
}


/*  ===== EXTRA ===== */

.card ul{
  margin-top: 4rem;
}

.card ul li{
  margin-bottom: 2rem;

}

.list{
  color: var(--text-color);
  margin-bottom: 0.25rem;
}


/*  ===== FOOTER ===== */

#footer{
  background: #252525;
  padding: 0.5rem 0rem;
}

#footerindex .iconimg,
#footerland .iconimg,
#home .iconimg{
  width: 4.5rem;
  margin-top: -2rem;
}

.margin{
  margin: 0 2rem;
}

#footerland{
  background-color: var(--background-2);
  text-align: center;
  background-image:url('asstes/img/BG-MAPS-2.png'), linear-gradient(var(--background-3), var(--background-2),var(--background-2),var(--background-3));
  background-position: center;
  background-size: 20%;

}

#footer .brand p{
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/*  ===== BACK TO TOP ===== */

.back{
  background: #34af23  ;
  position: fixed;
  right: 1rem;
  bottom: 5rem;
  padding: 1.05rem;
  clip-path: circle();
  font-size: 1.5rem;
  line-height: 0;
  color: var(--text-color);

  transition: 0.3s;

  transform: translateY(100%);
}

.back2{
  background: var(--botton-color);
  position: fixed;
  right: 1rem;
  bottom: 5rem;
  padding: 1rem;
  border-radius: 5px;
  font-size: 1rem;
  line-height: 0;
  color: var(--text-color);

  transition: 0.3s;

  transform: translateY(100%);
}




/*  ===== CONFIG DEVICES ===== */

/* extra large devices: 1200 > */
@media (min-width: 1200px) {
  :root{
    --title-size: 2.875rem;
    --text-size: 1.25rem;
    --subtitle-font-size: 2.25rem;
  }

  .container{
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  .logo{
    width: 20rem;
  }
  
  .arrow{
    justify-content: end;
    margin-top: 1rem;
  }

  #social{
    margin-left: 30rem;
    margin-top: 0.7rem;
    opacity: 1;
  }

  #social .iconimg{
    width: 2rem;
  }

  #header{
    background-size: 5%;
  }

  #headerhome .logo{
    margin-right: 2rem;
  }

  #home .social2{
    margin-top: -1rem;
  }

  #home .container{
    gap: 6rem;
    margin-top: -2rem;
  }

  #home .text{
    margin-top: 3rem;
  }

  #home .text{
    max-width: 500px;
  }

  #home .subtitle{
    font-size: var(--subtitle-font-size);
    font-weight: 400;
  }

  .linkshome{
    margin-right: 2rem;
    width: 30rem;
  }

  #homeindex .img{
    width: 80%;
  }

  #homeindex .text{
    margin-left: -5rem;
  }

  #homeindex .title{
    font-size: 3rem;
  }

  #bottons,
  #footerland{
    background-size: 5%;
  }

  #bottons .title{
    max-width: 300px;
    margin-right: 4rem;
  }

  #bottons .button{
    padding: 1rem 2rem;
  }

  #abount img{
    width: 20rem;
  }

  #form .text{
    text-align: left;
    margin-right: 8rem;
  }

  #servicesindex .cards{
    padding: 0 4rem  ;
  }

  .viewer2 .cards

  #servicesindex .subtitle1{
    font-size: calc(var(--text-size)*2);
  }

  #footerindex .img,
  #footerland .img{
    margin-right: 10rem;
    width: 15rem;
  }

  #footerindex .iconimg,
  #footerland .iconimg{
    width: 5rem;
  }

}
/* large devices: 1023 > */
@media (min-width: 1023px){
}

/* large devices: 992 > */
@media (min-width: 992px) {
  :root{
    --header-height: 1rem;
    --margin: 5rem;
  }

  nav .menu{
    opacity: 1;
    visibility: visible;
    top: 0;
  }

  nav .menu ul{
    display: flex;
    gap: 2rem;
  }

  nav .menu ul li a.title{
    font: 200 1rem var(--font);
    color: var(--background-2);
  }

  nav .menu ul li a.title:hover{
    font-weight: 400;
    color: var(--background-3);
  }

  nav .icon-icon-menu{
    display: none;
  }

  .section {
    padding: calc(var(--header-height) + 5rem) 0;
  }

  .container{
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
  }

  .text{
    max-width: 25rem;
    text-align: center;
  }

  .video iframe{
    width: 500px;
    height: 300px;
    margin: 2rem;
  }

  #home .text{
    margin-bottom: 4rem;
  }

  #homeindex .container{
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
  }

  #homeindex .img{
    width: 30rem;
    margin-right: calc(var(--margin)*2);
  }

  #homeindex .text{
    max-width: 50rem;
  }

  #ebooks .text{
    margin-top: 1.5rem;
  }
  
  #abount .container{
    margin-top: 4rem;
  }

  #aboutindex .container{
    grid-auto-flow: column;
    gap: 6rem;
    margin-bottom: 6rem;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  #aboutindex .text{
    max-width: 40rem;

  }

  #abount .img{
    margin-right: 4rem;
  }

  #aboutindex .cards{
    grid-auto-flow: column;
    justify-items: center;
    gap: 2.5rem;
  }

  #servicesindex .cards{
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
  }

  .viewer2 .cards{
    gap: 2rem;
    grid-template-columns: 1fr 1fr 1fr;
  }

  #servicesindex .card{
    padding: 3.75rem;
  }
}
/* medium devices: 767 > */