/* ==========================================
   LAPTOP (1366px)
========================================== */

@media (max-width:1366px){

    .navbar{
        padding:18px 40px;
    }

    .navbar-container{
        max-width:1200px;
    }

    .logo img{
        height:52px;
    }

    .logo-text{
        font-size:2rem;
    }

    .nav-links{
        gap:35px;
    }

    .nav-links a{
        font-size:17px;
    }

}
/* ==========================================
   TABLET (1024px)
========================================== */

@media (max-width:1024px){

    .navbar{

        padding:16px 30px;

    }

    .navbar-container{

        max-width:100%;

    }

    .logo img{

        height:46px;

    }

    .logo-text{

        font-size:1.8rem;

    }

    .nav-links{

        gap:22px;

    }

    .nav-links a{

        font-size:16px;

    }

}

/* ==========================================
   TABLET PORTRAIT (768px)
========================================== */

@media (max-width:768px){

    .navbar{

        padding:15px 20px;

    }

    .logo img{

        height:42px;

    }

    .logo-text{

        font-size:1.5rem;

    }

    .nav-links{

        position:fixed;

        top:80px;

        left:-100%;

        width:100%;

        background:#ffffff;

        flex-direction:column;

        align-items:center;

        gap:25px;

        padding:35px 0;

        transition:.4s;

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

        z-index:999;

    }

    .nav-links.active{

        left:0;

    }

    .nav-links a{

        font-size:18px;

    }

    .hamburger{

        display:flex;

        flex-direction:column;

        gap:6px;

        cursor:pointer;

    }

    .hamburger span{

        width:28px;

        height:3px;

        background:#222;

        border-radius:20px;

        transition:.3s;

    }

}

/* ==========================================
   MOBILE (576px)
========================================== */

@media (max-width:576px){

    .navbar{

        padding:14px 18px;

    }

    .logo{

        gap:10px;

    }

    .logo img{

        height:38px;

    }

    .logo-text{

        font-size:1.3rem;

    }

    .nav-links{

        top:74px;

    }

}

/* ==========================================
   SMALL MOBILE (480px)
========================================== */

@media (max-width:480px){

    .navbar{

        padding:12px 16px;

    }

    .logo img{

        height:34px;

    }

    .logo-text{

        font-size:1.15rem;

    }

    .nav-links{

        padding:30px 0;

    }

    .nav-links a{

        font-size:17px;

    }

}

/* ==========================================
   HERO SECTION RESPONSIVE
========================================== */

/* ------------------------------
   Laptop (1366px)
------------------------------ */
@media (max-width:1366px){

    .hero{
        min-height:90vh;
        padding:0 60px;
    }

    .hero-content{
        max-width:600px;
    }

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

    .hero-title{
        font-size:64px;
        line-height:1.1;
    }

    .hero-description{
        font-size:20px;
        max-width:520px;
    }

    .hero-buttons{
        gap:20px;
    }

}

/* ------------------------------
   Tablet (1024px)
------------------------------ */
@media (max-width:1024px){

    .hero{
        min-height:85vh;
        padding:0 40px;
    }

    .hero-content{
        max-width:550px;
    }

    .hero-title{
        font-size:52px;
    }

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

    .hero-buttons{
        gap:18px;
    }

    .hero-buttons a{
        padding:15px 28px;
        font-size:16px;
    }

}

/* ------------------------------
   Tablet Portrait (768px)
------------------------------ */
@media (max-width:768px){

    .hero{

        min-height:100vh;

        justify-content:center;

        align-items:center;

        text-align:center;

        padding:40px 25px;

    }

    .hero-content{

        max-width:100%;

        margin:auto;

    }

    .hero-subtitle{

        font-size:16px;

        letter-spacing:2px;

    }

    .hero-title{

        font-size:44px;

        line-height:1.15;

        margin-bottom:20px;

    }

    .hero-description{

        font-size:17px;

        line-height:1.7;

        margin:auto;

        max-width:500px;

    }

    .hero-buttons{

        justify-content:center;

        margin-top:35px;

    }

}

@media (max-width:576px){

    .hero{

        padding:35px 20px;

    }

    .hero-title{

        font-size:36px;

    }

    .hero-description{

        font-size:16px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:18px;

    }

    .hero-buttons a{

        width:250px;

        text-align:center;

        padding:16px 0;

    }

}

@media (max-width:480px){

    .hero{

        min-height:90vh;

        padding:30px 18px;

    }

    .hero-subtitle{

        font-size:14px;

    }

    .hero-title{

        font-size:30px;

    }

    .hero-description{

        font-size:15px;

        line-height:1.6;

    }

    .hero-buttons a{

        width:220px;

        font-size:15px;

    }

}

@media (max-width:360px){

    .hero-title{

        font-size:26px;

    }

    .hero-description{

        font-size:14px;

    }

    .hero-buttons a{

        width:200px;

        padding:14px 0;

    }

}

.hero video,
.hero-video{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* ==========================
   Tablet Landscape (1024px)
========================== */

@media (max-width:1024px){

    .hero-carousel{
        padding:0 35px;
        margin:40px auto;
    }

    .hero-carousel-slide{

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

        gap:22px;

    }

    .hero-carousel-card{

        min-height:340px;

    }

    .hero-carousel-card img{

        height:200px;

    }

    .hero-carousel-card h3{

        font-size:18px;

    }

    .hero-carousel-card p{

        font-size:14px;

    }

}

/* ==========================
   Tablet Portrait (768px)
========================== */

@media (max-width:768px){

    .hero-carousel{

        width:100%;

        padding:0 25px;

        margin:35px auto;

    }

    .hero-carousel-slide{

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

        gap:18px;

    }

    .hero-carousel-card{

        min-height:320px;

        padding:14px;

    }

    .hero-carousel-card img{

        height:180px;

    }

    .hero-carousel-prev,

    .hero-carousel-next{

        width:40px;

        height:40px;

        font-size:18px;

    }

    .hero-carousel-prev{

        left:5px;

    }

    .hero-carousel-next{

        right:5px;

    }

}

/* ==========================
   Large Mobile (576px)
========================== */

@media (max-width:576px){

    .hero-carousel{

        padding:0 20px;

    }

    .hero-carousel-slide{

        grid-template-columns:1fr;

        gap:16px;

    }

    .hero-carousel-card{

        min-height:300px;

    }

    .hero-carousel-card img{

        height:180px;

    }

    .hero-carousel-card h3{

        font-size:18px;

    }

    .hero-carousel-card p{

        font-size:14px;

    }

    .hero-carousel-prev,

    .hero-carousel-next{

        width:36px;

        height:36px;

        font-size:16px;

    }

}

/* ==========================
   Mobile (480px)
========================== */

@media (max-width:480px){

    .hero-carousel{

        padding:0 15px;

    }

    .hero-carousel-card{

        min-height:280px;

        padding:12px;

    }

    .hero-carousel-card img{

        height:160px;

    }

    .hero-carousel-card h3{

        font-size:17px;

    }

    .hero-carousel-card p{

        font-size:13px;

    }

}

/* ==========================
   Small Mobile (360px)
========================== */

@media (max-width:360px){

    .hero-carousel{

        padding:0 12px;

    }

    .hero-carousel-card{

        min-height:260px;

    }

    .hero-carousel-card img{

        height:150px;

    }

    .hero-carousel-card h3{

        font-size:16px;

    }

}


/* ==========================
   Tablet (1024px)
========================== */

@media (max-width:1024px){

    .products{

        padding:70px 30px;

    }

    .product-grid{

        display:grid;

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

        gap:25px;

    }

    .product-card{

        width:100%;

    }

    .product-card img{

        height:240px;

    }

}

/* =====================================================
   FEATURED PRODUCTS RESPONSIVE
===================================================== */


/* ==========================
   Tablet Portrait (768px)
========================== */

@media (max-width:768px){

    .products{

        padding:60px 25px;

    }

    .section-title h2{

        font-size:34px;

    }

    .product-grid{

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

        gap:20px;

    }

    .product-card{

        padding:18px;

    }

    .product-card img{

        height:220px;

    }

    .product-card h3{

        font-size:20px;

    }

    .product-card p{

        font-size:15px;

    }

}

/* ==========================
   Large Mobile (576px)
========================== */

@media (max-width:576px){

    .products{

        padding:55px 20px;

    }

    .section-title h2{

        font-size:30px;

    }

    .product-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .product-card{

        max-width:420px;

        margin:auto;

    }

    .product-card img{

        height:240px;

    }

}

/* ==========================
   Mobile (480px)
========================== */

@media (max-width:480px){

    .products{

        padding:50px 15px;

    }

    .section-title h2{

        font-size:28px;

    }

    .section-title p{

        font-size:14px;

    }

    .product-card{

        padding:16px;

    }

    .product-card img{

        height:210px;

    }

    .product-card h3{

        font-size:18px;

    }

    .product-card p{

        font-size:14px;

    }

}

/* ==========================
   Small Mobile (360px)
========================== */

@media (max-width:360px){

    .products{

        padding:40px 12px;

    }

    .product-card{

        padding:14px;

    }

    .product-card img{

        height:180px;

    }

    .product-card h3{

        font-size:17px;

    }

    .product-card p{

        font-size:13px;

    }

}

/* =====================================================
   ABOUT SECTION RESPONSIVE
===================================================== */
@media (max-width:576px){

    .about-section{

        padding:60px 20px;

    }

    .section-heading h1{

        font-size:30px;

    }

    .about-container{

        gap:30px;

    }

    .about-left{

        width:100%;

    }

    .about-left .slider-container{

        width:100%;

    }

    .about-right{

        width:100%;

    }

    .about-right .about-text{

        font-size:15px;

        line-height:1.8;

        text-align:left;

    }

}

@media (max-width:480px){

    .about-section{

        padding:50px 15px;

    }

    .section-heading h1{

        font-size:26px;

    }

    .about-small{

        font-size:13px;

    }

    .about-right .about-text{

        font-size:15px;

        line-height:1.7;

    }

    .slider-btn{

        width:36px;

        height:36px;

        font-size:16px;

    }

}

@media (max-width:360px){

    .about-section{

        padding:40px 12px;

    }

    .section-heading h1{

        font-size:22px;

    }

    .about-right .about-text{

        font-size:14px;

        line-height:1.6;

    }

}

.about-carousel-slide img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.slider-container{

    width:100%;

    overflow:hidden;

    border-radius:18px;

}