/*========================================
    D-40 AV Responsive Styles
========================================*/


/*-------------------------------
Large Screens
--------------------------------*/

@media (max-width:1400px){

.hero h1{
    font-size:6rem;
}

section{
    padding:90px 7%;
}

}


/*-------------------------------
Laptop
--------------------------------*/

@media (max-width:1200px){

.hero h1{
    font-size:5rem;
}

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

.navbar{
    padding:18px 6%;
}

section{
    padding:80px 6%;
}

.package-grid,
.service-grid,
.event-grid{
    gap:25px;
}

}


/*-------------------------------
Tablet
--------------------------------*/

@media (max-width:991px){

.menu-btn{
    display:block;
    color:white;
}

.nav-links{

    position:fixed;

    top:95px;

    right:-100%;

    width:280px;

    height:calc(100vh - 95px);

    background:#111;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    padding-top:50px;

    transition:.4s;

    gap:30px;

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

}

.nav-links.active{

    right:0;

}

.hero{

    padding:0 40px;

}

.hero h1{

    font-size:4.5rem;

}

.hero p{

    font-size:18px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.hero-buttons a{

    width:240px;

}

.stats{

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

}

.package-grid{

    grid-template-columns:1fr;

}

.package-card.featured{

    transform:none;

}

.gallery-grid{

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

}

.footer-links{

    gap:20px;

}

}


/*-------------------------------
Large Phones
--------------------------------*/

@media (max-width:768px){

.logo img{

    height:60px;

}

section{

    padding:70px 25px;

}

.hero{

    height:auto;

    min-height:100vh;

    padding-top:140px;

    padding-bottom:80px;

}

.hero h1{

    font-size:3.5rem;

}

.hero p{

    font-size:16px;

}

section h2{

    font-size:2.8rem;

}

.service-grid{

    grid-template-columns:1fr;

}

.stats{

    grid-template-columns:1fr;

}

.event-grid{

    grid-template-columns:1fr;

}

.gallery-grid{

    grid-template-columns:1fr;

}

.gallery-grid img{

    height:260px;

}

.footer-links{

    flex-direction:column;

}

.socials{

    flex-wrap:wrap;

}

.card{

    padding:30px;

}

.package-card{

    padding:35px;

}

.contact-form input,
.contact-form textarea,
.contact-form select{

    padding:15px;

}

}


/*-------------------------------
Phones
--------------------------------*/

@media (max-width:576px){

.hero h1{

    font-size:2.8rem;

}

.hero p{

    font-size:15px;

}

.hero-buttons{

    width:100%;

}

.hero-buttons a{

    width:100%;

}

.btn-primary,
.btn-secondary{

    text-align:center;

}

section h2{

    font-size:2.3rem;

}

.stat h2{

    font-size:3rem;

}

.package-price{

    font-size:3rem;

}

.card h3{

    font-size:2rem;

}

.event-card{

    height:220px;

}

.event-card h3{

    font-size:2rem;

}

.cta h2{

    font-size:2.4rem;

}

.review-card{

    padding:25px;

}

.footer-logo img{

    width:150px;

}

}


/*-------------------------------
Small Phones
--------------------------------*/

@media (max-width:400px){

.hero{

    padding-left:20px;
    padding-right:20px;

}

.hero h1{

    font-size:2.3rem;

}

.hero p{

    font-size:14px;

}

.btn-primary,
.btn-secondary{

    padding:14px 22px;

    font-size:14px;

}

.logo img{

    height:50px;

}

.navbar{

    padding:15px 20px;

}

.card{

    padding:22px;

}

.package-card{

    padding:25px;

}

}


/*-------------------------------
Ultra-Wide Monitors
--------------------------------*/

@media (min-width:1800px){

.container{

    max-width:1700px;

}

.hero h1{

    font-size:8rem;

}

.hero p{

    font-size:24px;

}

section{

    padding:120px 12%;

}

}


/*-------------------------------
Landscape Phones
--------------------------------*/

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

.hero{

    min-height:700px;

}

.nav-links{

    overflow-y:auto;

}

}


/*-------------------------------
Reduce Motion
--------------------------------*/

@media (prefers-reduced-motion:reduce){

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}