/*==================================================
RESPONSIVE.CSS
MOBIS HAIR
==================================================*/


/*=========================================
REVEAL ANIMATIONS
=========================================*/

.hidden{

    opacity:0;

    transform:translateY(70px);

    transition:
        opacity .9s ease,
        transform .9s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}



/*=========================================
ACTIVE NAVIGATION
=========================================*/

.nav-links a.active{

    color:var(--champagne);

}



/*=========================================
SCROLL PROGRESS BAR
=========================================*/

#scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:3px;

    background:var(--champagne);

    z-index:99999;

}



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

@media (max-width:1100px){

.section-heading h2{

    font-size:3rem;

}

.hero-content h1{

    font-size:4.8rem;

}

.about-grid,

.packaging-wrapper,

.experience-grid,

.contact-grid,

.testimonial-wrapper{

    grid-template-columns:1fr;

}

.collection-grid,

.services-grid,

.why-grid{

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

}

.footer-top{

    grid-template-columns:1fr 1fr;

}

.about-image img,

.experience-image img{

    height:550px;

}

.packaging-gallery{

    margin-top:40px;

}

}



/*=========================================
MOBILE
=========================================*/

@media (max-width:768px){

section{

    padding:80px 0;

}

nav{

    height:80px;

}

.logo img{

    width:95px;

}

.menu-btn{

    display:block;

    font-size:1.6rem;

    cursor:pointer;

    z-index:1001;

}

.social-icons{

    display:none;

}

.nav-links{

    position:fixed;

    top:80px;

    left:-100%;

    width:100%;

    height:calc(100vh - 80px);

    background:#fff;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:35px;

    transition:.45s;

}

.nav-links.open{

    left:0;

}

.hero-content{

    width:92%;

}

.hero-content h1{

    font-size:3.3rem;

}

.hero-description{

    font-size:1rem;

}

.hero-buttons{

    flex-direction:column;

}

.btn-primary,

.btn-secondary{

    width:100%;

}

.section-heading h2{

    font-size:2.4rem;

}

.about-content h3,

.packaging-text h2,

.experience-content h2,

.instagram-box h2,

.contact-info h2,

.contact-card h3{

    font-size:2.3rem;

}

.collection-grid,

.services-grid,

.why-grid,

.about-cards{

    grid-template-columns:1fr;

}

.packaging-gallery{

    grid-template-columns:1fr;

}

.packaging-gallery img{

    margin-top:0 !important;

    height:260px;

}

.instagram-box{

    padding:50px 30px;

}

.contact-card{

    padding:40px 30px;

}

.footer-top{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-logo p{

    margin:auto;

}

.footer-social .social-icons{

    justify-content:center;

    display:flex;

}

.floating-whatsapp{

    width:60px;

    height:60px;

    right:18px;

    bottom:18px;

}

#backToTop{

    width:52px;

    height:52px;

    right:22px;

    bottom:95px;

}

}



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

@media (max-width:480px){

.hero-content h1{

    font-size:2.8rem;

}

.section-heading h2{

    font-size:2rem;

}

.hero-description{

    font-size:.95rem;

}

.section-tag{

    font-size:.72rem;

    letter-spacing:2px;

}

.collection-content,

.service-box,

.mini-card{

    padding:28px;

}

.contact-card{

    padding:28px;

}

}