/* ==========================
   TABLET
========================== */

@media(max-width:900px){

/* NAVIGATION */

.menu-toggle{
display:flex;
}

.btn-nav{
display:none;
}

.nav-links{
position:fixed;
top:0;
right:-100%;
width:280px;
height:100vh;
background:#0f6f73;
flex-direction:column;
padding-top:120px;
align-items:center;
transition:.5s;
display:flex;
}

.nav-links.active{
right:0;
}

.nav-links li{
margin:25px 0;
}


/* HERO */

.hero-content h1{
font-size:48px;
}

.hero-content p{
font-size:18px;
}


/* REVIEWS */

.reviews-container{
grid-template-columns:1fr;
}

.review-animal{
display:none;
}

.review-title h2{
font-size:45px;
}


/* FOOTER */

.pre-footer{
grid-template-columns:1fr;
text-align:center;
}

.contact-item{
justify-content:center;
}


/* ITINERARY */

.day-card{
flex-direction:column;
}

.included-section{
grid-template-columns:1fr;
}

.itinerary-header h2{
font-size:45px;
}


/* CONTACT */

.contact-page{
grid-template-columns:1fr;
}

.contact-form h2{
font-size:45px;
}


/* CTA */

.safari-cta h2{
font-size:42px;
}

}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:768px){

.itinerary{
width:92%;
margin:80px auto;
}

.itinerary-header h1{
font-size:42px;
}

.day-card{
flex-direction:column;
padding:25px;
}

.day-number{
width:80px;
height:80px;
font-size:24px;
}

.day-content h2{
font-size:24px;
}

.gallery-track{
grid-template-columns:1fr;
}

.gallery-track img{
height:220px;
}

}

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

@media(max-width:900px){

.plus-section{
grid-template-columns:1fr;
}

.plus-left{
height:550px;
}

.img{
width:250px;
}

.plus-right h2{
font-size:38px;
}

.reviews-container{
grid-template-columns:1fr;
}

.review-animal{
display:none;
}

.review-title h2{
font-size:45px;
}

.pre-footer{
grid-template-columns:1fr;
text-align:center;
}

.contact-item{
justify-content:center;
}

}
@media(max-width:768px){

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

.home-pirlo-header h2{
font-size:30px;
}

.home-pirlo-circle{
position:relative;
overflow:hidden;
}

.home-pirlo-circle .letter{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:120px;
font-weight:900;
color:#d88a4a;
z-index:1;
display:block;
line-height:1;
}
.home-pirlo-circle img{
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
width:95px;
z-index:2;
}
}
@media(max-width:900px){
.contact-container{
grid-template-columns:1fr;
}
}
/* MOBILE */
@media(max-width:900px){
.about-hero{
grid-template-columns:1fr;
}
.about-text h1{
font-size:50px;
}
.team-grid{
grid-template-columns:1fr;
}
.values-section{
grid-template-columns:1fr;
}
.team-title h2{
font-size:45px;
}
}
@media(max-width:900px){
.day-card{
flex-direction:column;
padding:25px;
}
.day-number{
width:80px;
height:80px;
font-size:28px;
}
.itinerary-header h1{
font-size:42px;
}
.gallery-track{
grid-template-columns:1fr;
}
}
@media(max-width:900px){
.hero-container{
grid-template-columns:1fr;
}
.hero-right{
display:none;
}
.hero-left h1{
font-size:70px;
}
}
@media(max-width:900px){
    .why-grid{
        grid-template-columns:1fr;
    }
    .safari-hero h1{
        font-size:45px;
    }
    .safari-hero p{
        font-size:18px;
    }
    .why-pirlo h2{
        font-size:40px;
    }
}
@media(max-width:900px){
    .safari-cta h2{
        font-size:42px;
    }
    .safari-cta p{
        font-size:18px;
    }
}
@media(max-width:768px){
.safari-gallery{
grid-template-columns:1fr;
}
.safari-gallery img{
height:220px;
}
}
@media(max-width:768px){

    .dropdown-menu{
        position:static;
        width:100%;
        box-shadow:none;
        border-radius:0;
        background:#f7f7f7;
    }

    .dropdown-menu li a{
        padding:12px 25px;
    }

}
@media(max-width:768px){

    .experience-card{
        grid-template-columns:1fr;
    }

    .local-hero h1{
        font-size:45px;
    }

    .experience-slider{
        height:280px;
    }

}
@media(max-width:768px){

.group-gallery{
    grid-template-columns:1fr;
}

.group-gallery img{
    height:250px;
}

}