/*==================================================
  TENNESSEE SUNSET FARM
  RESPONSIVE STYLESHEET
==================================================*/

/*==================================================
  LARGE DESKTOPS
==================================================*/

@media (max-width:1400px){

    .container{

        width:min(94%,1200px);

    }

}

/*==================================================
  LAPTOPS
==================================================*/

@media (max-width:1200px){

    .hero h1{

        font-size:4.5rem;

    }

    .welcome-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .welcome-image{

        order:-1;

    }

    .welcome-image img{

        min-height:520px;

    }

    .experience-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .animal-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .gallery-grid{

        grid-template-columns:repeat(3,1fr);

    }

    .visit-card-grid{

        grid-template-columns:repeat(3,1fr);

        gap:25px;

    }

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

/*==================================================
  TABLETS
==================================================*/

@media (max-width:992px){

    .section{

        padding:90px 0;

    }

    .header .container{

        height:85px;

    }

    .navigation{

        position:fixed;

        top:85px;

        left:-100%;

        width:100%;

        background:#E9E0D3;

        transition:.35s ease;

        box-shadow:0 10px 25px rgba(0,0,0,.08);

    }

    .navigation.active{

        left:0;

    }

    .navigation ul{

        flex-direction:column;

        padding:30px;

        gap:25px;

    }

    .navigation a,
.header.scrolled .navigation a{

    color:var(--primary);

}

    .mobile-menu{

        display:block;

    }

    .header.scrolled .mobile-menu span{

        color:#666666;

    }

    .hero{

        min-height:90vh;

    }

    .hero-content{

        max-width:100%;

        text-align:center;

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero h1{

        font-size:3.8rem;

    }

    .experience-grid{

        grid-template-columns:1fr 1fr;

    }

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .review-grid{

        grid-template-columns:1fr;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    .contact-map iframe{

        min-height:450px;

    }

}
/*==================================================
  LARGE PHONES
==================================================*/

@media (max-width:768px){

    .section{

        padding:75px 0;

    }

    .hero{

        min-height:100vh;

    }

    .hero-content{

        padding:40px 30px 55px;

        margin:20px;

    }

    .hero h1{

        font-size:3rem;

        line-height:1.1;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:18px;

    }

    .btn{

        width:260px;

    }

    .section-heading{

        margin-bottom:50px;

    }

    .section-heading h2{

        font-size:2.4rem;

    }

    .experience-grid{

        grid-template-columns:1fr;

    }

    .visit-card-grid{

        grid-template-columns:1fr;

    }

    .animal-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

        gap:16px;

    }

    .gallery-item img{

        height:220px;

    }

    .feature-image img{

        height:420px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:50px;

        text-align:center;

    }

    .footer-logo{

        margin:0 auto 25px;

    }

    .social-links{

        justify-content:center;

    }

}

/*==================================================
  SMALL PHONES
==================================================*/

@media (max-width:576px){

    .container{

        width:92%;

    }

    .header .container{

        height:80px;

    }

    .logo img{

        width:150px;

    }

    .hero-content{

        text-align:center;

    }

    .hero h1{

        font-size:2.4rem;

    }

    .hero-subtitle{

        font-size:.8rem;

    }

    .hero p{

        font-size:.95rem;

    }

    .btn{

        width:100%;

        padding:16px 20px;

    }

    .welcome-grid{

        gap:40px;

    }

    .welcome-image img{

        min-height:360px;

        border-radius:24px;

    }

    .experience-card{

        padding:35px 25px;

    }

    .visit-card{

        padding:35px 25px;

    }

    .review-card{

        padding:30px;

    }

    .animal-card img{

        height:260px;

    }

    .animal-content{

        padding:24px;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-item img{

        height:260px;

    }

    .contact-form-wrapper{

        padding:30px;

    }

    .contact-map iframe{

        min-height:320px;

    }

    .back-to-top{

        width:48px;

        height:48px;

        right:20px;

        bottom:20px;

    }

}

/*==================================================
  EXTRA SMALL DEVICES
==================================================*/

@media (max-width:400px){

    .hero h1{

        font-size:2rem;

    }

    .section-heading h2{

        font-size:2rem;

    }

    .hero-buttons{

        gap:14px;

    }

    .experience-card,

    .visit-card,

    .review-card,

    .contact-form-wrapper{

        border-radius:24px;

    }

}

/*==================================================
  LANDSCAPE PHONES
==================================================*/

@media (max-height:600px) and (orientation:landscape){

    .hero{

        min-height:700px;

    }

    .hero-content{

        padding-top:90px;

    }

    .scroll-down{

        display:none;

    }

}

/*==================================================
  IMAGE SAFETY
==================================================*/

img{

    max-width:100%;

    height:auto;

}

/*==================================================
  IFRAME SAFETY
==================================================*/

iframe{

    max-width:100%;

}

/*==================================================
  END OF RESPONSIVE STYLESHEET
==================================================*/