/*=========================================
        LARGE DEVICES
=========================================*/

@media (max-width:1200px){

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

.hero-model{
    max-width:450px;
}

.navbar-nav{
    gap:8px;
}

.nav-link{
    font-size:14px;
}

}



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

@media (max-width:991px){

/* Navbar */

.navbar{

padding:12px 0;

}

.navbar .container{

display:flex;
justify-content:space-between;
align-items:center;

}

.navbar-collapse{

background:#0b6b33;

margin-top:15px;

padding:20px;

border-radius:15px;

}

.navbar-nav{

gap:5px;

}

.nav-link{

padding:12px 0 !important;

display:block;

}

.nav-icons{

margin-left:auto;

margin-right:15px;

}


/* Hero */

.hero-slide{

min-height:700px;

text-align:center;

padding:60px 0;

}

.hero-content{

margin:auto;

}

.hero-content h1{

font-size:46px;

}

.hero-content p{

font-size:16px;

}

.hero-model{

max-width:380px;

margin:40px auto 0;

}

.hero-btn{

padding:14px 34px;

}


/* Categories */

.categories{

padding:70px 0;

}

.section-title h2{

font-size:34px;

}

.category-card{

padding:30px 15px;

}

.category-card i{

width:75px;
height:75px;
font-size:28px;

}


/* Footer */

footer{

text-align:center;

}

.social-icons{

justify-content:center;

}

}



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

@media (max-width:767px){

/* Announcement */

.top-bar{

height:40px;

}

.announcement-track{

font-size:13px;

gap:28px;

animation:mobileMarquee 12s linear infinite;

}

@keyframes mobileMarquee{

0%{

transform:translateX(100%);

}

100%{

transform:translateX(-100%);

}

}

.countdown div{

width:24px;

height:24px;

font-size:11px;

}


/* Navbar */

.navbar{

padding:10px 0;

}

.navbar-brand img{

height:30px;

}

.nav-icons{

gap:16px;

font-size:18px;

}


/* Hero */

.hero-section{

padding-top:4px;

}

.hero-slide{

min-height:20px;

padding:40px 20px;

}

.hero-content{

text-align:center;

}



.hero-content h1{

font-size:34px;

line-height:1.25;

}

.hero-content p{

font-size:15px;

line-height:1.7;

margin-bottom:25px;

}

.hero-btn{

font-size:15px;

padding:13px 30px;

}

.hero-model{

max-width:270px;

margin-top:35px;

}

.carousel-control-prev,
.carousel-control-next{

display:none;

}


/* Categories */

.section-title{

margin-bottom:35px;

}

.section-title h2{

font-size:28px;

}

.category-card{

padding:25px 15px;

border-radius:16px;

}

.category-card i{

width:65px;
height:65px;
font-size:24px;
margin-bottom:18px;

}

.category-card h5{

font-size:15px;

}


/* Product */

.product-content{

padding:16px;

}

.product-title{

font-size:16px;

}

.product-price{

font-size:20px;

}

.product-btn{

padding:10px;

font-size:14px;

}

}



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

@media (max-width:400px){

.container{

padding-left:16px;

padding-right:16px;

}

.hero-slide{

min-height:60px;

}

.hero-content h1{

font-size:30px;

}

.hero-model{

max-width:230px;

}

.hero-btn{

width:100%;

}
.hero-bg{
    width: 400px;
    height: 200px;
}



.section-title h2{

font-size:24px;

}

.category-card{

padding:20px 10px;

}

.category-card h5{

font-size:14px;

}

.footer-title{

margin-top:30px;

}

}



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

@media (max-width:400px){

.hero-content h1{

font-size:26px;

}

.hero-content p{

font-size:14px;

}

.hero-model{

max-width:190px;

}

.hero-btn{

padding:12px;

font-size:14px;

}

.countdown{

gap:3px;

}

.countdown div{

width:100px;
height:20px;
font-size:15px;

}

.nav-icons{

gap:12px;

font-size:17px;

}

.category-card{

padding:18px 8px;

}

.category-card i{

width:55px;
height:55px;
font-size:20px;

}

.section-title h2{

font-size:22px;

}

}



/*=========================================
      LARGE DESKTOP (1400+)
=========================================*/

@media (min-width:1400px){

.hero-slide{

min-height:720px;

}

.hero-content h1{

font-size:72px;

}

.hero-model{

max-width:620px;

}

.container{

max-width:1380px;

}

}
/*==============================
      OFFER BANNER
===============================*/

@media(max-width:991px){

.offer-banner{

padding:25px 0;

}

}

@media(max-width:768px){

.offer-banner{

padding:18px 0;

}

.offer-banner img{

border-radius:15px;

}

}