@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');

:root{
	--primary-color: #3685fb;
    --primary-color-dark: #2f73d9;
    --secondary-color: #fafcff;
    --text-dark: #0d213f;
    --text-light: #767268;
    --extra-light: #ffffff;
    --max-widht: 1200px;
}

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

.section__container{
    max-width: var(--max-widht);
    margin: auto;
    padding: 5rem 1rem;
}

.section__header{ 
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 4rem; 
}
.section__title{ 
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
}
.section__subtitle{ 
    padding: 0.5%;
    position: center;
    font-size: 1.2rem;
    color: var(--text-dark);
    max-width: calc(var(--max-widht) / 2);
}
.btn{ 
   padding: 0.4rem 1rem;
   outline: none;
   border: none;
   font-size: 1rem;
   color: var(--extra-light);
   background-color: var(--primary-color);
   border-radius: 5rem;
   cursor: pointer;
   transition: .3s;
}
.btn1{ 
    padding: 0.4rem 1rem;
    outline: none;
    border: none;
    font-size: 1rem;
    color: rgb(246, 244, 242);
    background-color: rgb(4, 168, 4);
    border-radius: 5rem;
    cursor: pointer;
    transition: .3s;
 }
.btn:hover{ 
   background-color: var(--primary-color-dark) ;  
}

a{ 
   text-decoration: none;
}

img{ 
   width: 100%;
   display: block;
}


body{ 
    font-family: "Poppins", sans-serif;  
}

nav{
    padding: 2rem;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--max-widht);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav__logo{ 
   font-size: 1.2rem;
   font-weight: 600;
   color: var(--text-dark);
   cursor: pointer;
}

.nav__logo span{ 
   color: var(--primary-color);
}

.nav__links{ 
   list-style: none;  
   display: flex;
   align-items: center;
   gap: 1rem;
}

.link  a{ 
   padding: 0.2rem;
   color: var(--text-dark);
   transition: 0.3s;
}

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


/* SLIDER*/
.slider {
margin: 0 auto;
width: 800;
height: 400;
overflow: hidden;
}

.slides {
width: 400%;
height: 400px;
display: flex;
}

.slides input{
display: none;
}

.slide {
width: 25%;
position: center;
transition: 1s;
}

.slide img {
width: 100%;
}
.manual-navigation{
position: absolute;
width: 800px;
margin-top: -40px;
display: flex;
justify-content: center;
}
 
.manual-btn{
border: 2px solid #fff;
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 2s;
}
.manual-btn:not(:last-child) {
margin-right: 40px;
}
.manual-btn:hover {
background-color: #2f73d9;
}
#radio1:checked ~ .first {
margin-left: 0;
}
#radio2:checked ~ .first {
margin-left: -25%;
}
#radio3:checked ~ .first {
margin-left: -50%;
}
#radio4:checked ~ .first {
margin-left: -75%;
}
.navigation-auto div{
border: 2px solid #2f73d9;
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}

.navigation-auto{
position: absolute;
width: 800px;
margin-top: 360px;
display: flex;
justify-content: center;
}
.navigation-auto div:not(:last-child){
margin-right: 40px;
}

#radio1:checked ~ .navegation-auto .auto-btn1{
background-color: #fff;
}
#radio2:checked ~ .navegation-auto .auto-btn2{
    background-color: #fff;
}
#radio3:checked ~ .navegation-auto .auto-btn3{
    background-color: #fff;
}
#radio4:checked ~ .navegation-auto .auto-btn4{
    background-color: #fff;
}







/* THE AND SLIDER WEB TECH836*/


header{ 
   background-color: var(--secondary-color);  
}

.header__container { 
    min-height: 100vh; 
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.header__image{ 
    position: relative;
}

.header__image img{
    position: absolute;
    top: 50%;
    left: 50%;
    border: 0.5rem solid var(--extra-light);
    border-radius: 2rem;
    box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1); 
}

.header__image img:nth-child(1){ 
    max-width: 350px; 
    transform: translate(-75% , -50%);
}

.header__image img:nth-child(2){ 
    max-width: 300px; 
    transform: translate(0%, -5%);
}

.header__content{ 
   display: flex;
   align-items: center; 
   justify-content: center;   
}


.header__content > div {
    max-width: 400px;
    display: grid; 
    gap: 1rem;
}

.sub__header{
    font-size: 9rem;
    padding: 15%;
    font-size: 1rem;
    font-weight: 800;
    color: var(--primary-color); 
}

.sub__header h1{ 
   font-size: 3rem;
   line-height: 4rem;
   font-weight: 800;
   color: var(--text-dark);
}

.header__content .action__btns{
   display: flex;
   align-items: center;
   gap: 2rem;
   margin-top: 1rem;  
}

.video__image{ 
   position: relative;
}
.video__image img{ 
    width: 60px;
    height: 60px;
    border-radius: 100%;
    box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1);
}

.video__image span{ 
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);
}

/*.video__image span i{ 
    padding: 5rem;
    font-size: 2rem;
    color: red;
    background-color: var(--extra-light);
    border-radius: 100%;
    box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1); 
} */
    
.story > span{
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark); 
}

.destino__nav{
    display: flex;
    gap: 1rem;
}

.destino__nav span{
   width: 30px;
   height: 30px;
   display: grid;
   place-content: center;
   color: var(--primary-color);
   border: 1px solid var(--primary-color);
   border-radius: 100%;
   font-size: 1.5rem;
   cursor: pointer;
   transition: 0.3s;
}

.destino__nav span:hover{
    color: var(--extra-light);
    background-color: var(--primary-color);
}

.destino__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem; 
}

.destino__card {
    overflow: hidden;
    position: relative;
    isolation: isolate;
    cursor: pointer;
}

.destino__card img{
    border-radius: 1rem;
}

.destino__detalhe{
    position: absolute;
    width: calc(100% - 2rem);
    padding: 1rem;
    bottom: -6rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: var(--extra-light);
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    border-radius: 10px;
    z-index: 1;
    transition: 0.3s;
}

.destino__card:hover .destino__detalhe{
     bottom: 1rem;   
}

.destino__title{
   font-size: .9rem;
   margin-bottom: .5rem;
}

.destino__subtitle{
    font-size: 1rem;
    font-weight: 600;
}

.trip{
    background-color: var(--secondary-color);
}

.trip__container :is(.section__title, .section__subtitle, .view__all){
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}

.trip__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 4rem 0;
}

.trip__card{
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1);
}

.trip__detalhe{
    padding: 1rem;
    display: grid;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    background-color: var(--extra-light);
    cursor: pointer;
}

.rating{
   color: goldenrod;
}

.booking__price{
   display: flex;
   align-items: center;
   justify-content: space-between;   
}

.price span{
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--text-light);
}

.book__now {
    padding: 0.5rem 1.5rem;
    color: var(--primary-color);
    outline: none;
    border: 1px solid var(--primary-color);
    border-radius: 5rem;
    background-color: transparent;
    cursor: pointer;
    transition: 0.3s;
}

.book__now:hover{
   color: var(--extra-light);
   background-color: var(--primary-color);
}

.galeria__container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.image__galeria{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.galeria__col{
    display: grid;
    place-content: center;
    gap: 1rem;
}

.galeria__col img{
    border-radius: 1rem;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
}

.galeria__content{
    display: grid;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.galeria__content > div{
    max-width: 600px;
}

.galeria__content .section__subtitle{
    margin-bottom: 2rem;
}

.subscribe{
    background-color: var(--secondary-color);
}

.subscribe__container{
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 2rem;
}

.subscribe__form{
   display: flex;
   align-items: center;
   justify-content: center;
}

.subscribe__form form{
   width: 100%;
   max-width: 400px;
   display: flex;
   background-color: var(--extra-light);
   box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1);
   border-radius: 5rem;
}

.subscribe__form input{
   width: 100%;
   padding: 1rem;
   outline: none;
   border: none;
   border-radius: 5rem;
   font-size: 1rem;
}

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

.footer__container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5rem;
    color: var(--secondary-color);
 }


 .footer__col h3{
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
}


 .footer__col h3 span{
    color: var(--primary-color);
}


.footer__col p{
    font-size: 0.8rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: 0.3s;
}


.footer__col p span{
    font-weight: 600;
}


.footer__col h4{
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 2rem;
}


.footer__bar{
    max-width: var(--max-widht);
    margin: auto;
    padding: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--secondary-color);
    border-top: 1px solid var(--text-light);
}


/*Icone*/

.sci{
    margin: 20px;
    display: flex;
}
 .sci li{
   list-style: none;
}
 .sci li a{
    display: inline-block; 
    width: 40px; 
    height: 40px;
    background: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px ;
    text-decoration: none;
    border-radius: 4px;
    transition: .5s;
}

 .sci li a:hover{
      background: rgba(77, 228, 255);
}
 .sci li a .bx{
     color: #fff;
     font-size: 20px;
}

/*fim */


/*RESPONSIVO--*/
@media (width < 1200px){
    .header__image img:nth-child(1){
    max-width: 300px;
}

    .header__image img:nth-child(2){
    max-width: 200px;
}
}


@media (width < 900px){
  .nav__links{
    display: none;
 }


  .header__container{
    grid-template-columns: repeat(1, 1fr);
}

 .header__image{
    min-height: 500px;
}

 .destino__grid{
    gap: 1rem;
}

 .trip__grid{
    grid-template-columns: repeat(2, 1fr);
}
}


@media (width < 600px){
    .destino__grid{
    grid-template-columns: repeat(2, 1fr);
}

    .trip__grid{
    grid-template-columns: repeat(1, 1fr);
}

   .galeria__container{
    grid-template-columns: repeat(1, 1fr);
}

  .subscribe__container{
    grid-template-columns: repeat(1, 1fr);
}

.footer__container{
    grid-template-columns: repeat(2, 1fr);
}
}