/* ==========================================
   HUNAIN DIGITAL STUDIO
   RESPONSIVE.CSS
========================================== */


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

@media (max-width: 1200px){

.container{
    width:90%;
}

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

}


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

@media (max-width: 992px){

/* NAVBAR */

.nav-container{
    gap:20px;
}

.navbar ul{
    gap:15px;
}

/* HERO */

.hero-container{
    flex-direction:column;
    text-align:center;
}

.hero-content{
    max-width:100%;
}

.hero-image{
    width:100%;
}

.hero-image img{
    width:100%;
    max-width:600px;
}

/* SERVICES */

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

/* PRICING */

.pricing-grid{
    grid-template-columns:1fr;
}

.pricing-card.featured{
    transform:none;
}

.pricing-card.featured:hover{
    transform:translateY(-10px);
}

/* TEAM */

.team-grid{
    grid-template-columns:1fr;
}

/* FOOTER */

.footer{
    text-align:center;
}

.footer-socials{
    justify-content:center;
}

}


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

@media (max-width: 768px){

.section{
    padding:70px 0;
}

/* HEADER */

.header{
    padding:15px 0;
}

.logo img{
    height:50px;
}

.logo-text h2{
    font-size:22px;
}

.logo-text span{
    font-size:11px;
}

/* NAVIGATION */

.navbar ul{
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

.navbar ul li a{
    font-size:14px;
}

/* HERO */

.hero-content h1{
    font-size:36px;
    line-height:1.3;
}

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

.hero-buttons,
.hero-btns{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
}

.btn-primary{
    width:100%;
    max-width:300px;
    text-align:center;
}

/* SECTION TITLES */

.section-title h2{
    font-size:32px;
}

.section-title span{
    font-size:14px;
}

/* SERVICES */

.services-grid{
    grid-template-columns:1fr;
}

.service-card{
    padding:25px;
}

/* ABOUT */

.about-content{
    text-align:center;
}

/* PRICING TABS */

.pricing-tabs{
    justify-content:center;
}

.pricing-tab{
    width:100%;
    max-width:300px;
    text-align:center;
}

/* PRICING */

.price{
    font-size:42px;
}

.pricing-card{
    padding:25px;
}

/* TEAM */

.team-grid{
    grid-template-columns:1fr;
}

/* CONTACT */

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

.contact-card{
    padding:25px;
}

/* PORTFOLIO */

.portfolio-grid{
    grid-template-columns:1fr;
}

/* FOOTER */

.footer h2{
    font-size:24px;
}

.footer-socials{
    display:flex;
    justify-content:center;
    gap:15px;
}

.footer-socials a{
    font-size:22px;
}

}


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

@media (max-width: 576px){

.container{
    width:95%;
}

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

.section-title h2{
    font-size:28px;
}

.btn-primary{
    width:100%;
}

.service-card{
    padding:20px;
}

.pricing-card{
    padding:20px;
}

.price{
    font-size:36px;
}

}


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

@media (max-width: 400px){

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

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

.section-title h2{
    font-size:24px;
}

.logo-text h2{
    font-size:18px;
}

.logo-text span{
    font-size:10px;
}

.price{
    font-size:32px;
}

}