/* Media Querries */

/* Desktop version */

@media (max-width: 1600px) {

    .offers {
        width: 100%;
        padding: 20px 20px;
    }

    .offers div {
        padding: 20px 20px;
    }

    #offers-title {
        margin-top: 40px;
    }

    .feature-box {
        margin: 10px 20px;
        padding: 20px 10px; 
        width: 170px;
        height: 170px;
    }

    .feature-box img {
        width: 50%;
    }

    .deals {
        display: flex; 
        justify-content: center;
        flex-wrap: nowrap;
        gap: 50px;
        width: 100%;
        margin-bottom: 40px;
    }

    .deals h2 {
        text-align: start;
        font-size: 36px;
    }

/* Shop page */

.cards-container {
    display: flex;
    flex-wrap: wrap; 
    align-items: flex-start; 
    justify-content: flex-start; 
}

.product-card {
    width: 20%;
    min-width: 270px;
    min-height: 700px;
        
}

.product-card img {
    height: 450px;
}


/* Single product */

.cards-container {
    display: flex;
    flex-wrap: wrap; 
    align-items: flex-start;
    justify-content: flex-start; 
    gap: 10px; 

}

.product-card {
    width: 30%;
    min-width: 270px;
    height: 600px;
        
}

/* Blog page */

.blog-details {
    padding-right: 100px;
}

/* About us */

.about-details {
    height: 80vh;
    padding: 40px 40px;
    
    
}

.about-img img {
    min-height: 80vh;
}

/* Cart Page */

#cart {
    background-position: 0% 90%;
}

#cart h2 {
    font-size: 34px;
    right: 270px;
    top: -10px;
}

}

/* Tablet version */

@media (max-width:799px) {
    .nav-bar {
        display: flex;
        flex-direction: column;
        justify-items: flex-start;
        align-content: flex-start;
        position: fixed;
        top: 0;
        right:-300px;
        height: 100vh;
        width: 300px;
        background-color: #e8e4bb;
        box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
        padding: 80px 0 0 10px;
        transition: all 0.5s;
        
    }
    
    .nav-bar.active {
        right: 0px;
    }

    .nav-bar li{
        margin-bottom: 25px;
    }

    .hamb-icon {
        display: flex;
        align-items: center;
    }

    .hamb-icon i {
        color: #473022;
        font-size: 24px;
        padding-left: 20px;
    }

    .close {
        display: initial;
        position: absolute;
        top: 30px;
        left: 30px;
        color: #473022;
        font-size: 24px;

    }

    .bag {
        display: none;
    }

    .logo {
        height: 100px;
        width: 100px;
        top: 45px;
    }

    .hero {
       
       padding: 0 80px;
       background-position: top 30px right 30%;
     
    }

    .cards-container {
        justify-content: center;
    }

    .feature-box {
        margin: 30px 40px;
        padding: 25px 15px; 
    }

    .most-popular h1 {
        color: #ed9a07;
        text-align: center;
        font-size: 42px;
    }

    .product-card {
        width: 23%;
        min-width: 270px;
        min-height: 450px;
        margin-left: 0;
        margin-right: 10px;
         
    }

    .product-card h3 {
        font-size: 18px;
    }

    .product-card img {
        max-height: 300px;
    }

    .summer-camp {
        min-height: 20vh;
    }

    .summer-camp button {
        width: 200px;
        position: absolute;
        top: 60%;
    }

    .deals {
        display: flex;
        flex-direction: column;
    }

    .explore {
       
        margin-bottom: 40px;
    }

    .offers {
        position: relative;
    }

    .offers::after {
        content: "";
        position: absolute;
        bottom: 40px;
        left: 15%;
        height: 2px;
        width: 70%;
        background-color: #fff;

    }

    .offers h2 {
        font-size: 36px;
    }

    .photo {  
        background-image: url(/assets/book-img.jpg);
       
    }

    .collections {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        background-color: #e8e4bb;

    }

    .col-card {
        width: 100%;
        margin-bottom: 40px;
    }
  

    .newsletter input {
        height: 42px;
        margin-top: 20px;
    }

    #form-btn {
        margin-top: 20px;
        height: 42px;
    }

    footer {
        display: grid;
        justify-content: center;
        text-align: center;
       
    }

    .fo-sec {
        margin-bottom: 40px;
    }

/* Shop page */

.shop-title h2 {
    font-size: 36px;
    margin-left: 65%;   
    
}

.shop-title h3 {
    font-size: 16px;
    text-align: start;
    position: absolute;
    bottom: 5%;
    left: 5%;
    
}

/* Blog page */

.blog-section {
    max-width: 100%;
}

.blog {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 20px;

}

.blog h1 {
    left: 280px;
}

.blog-image {
    padding-left: 0px;
    margin-bottom: 30px;
}

.blog img {
    max-width: 350px;
}

.blog-details {
    align-items: center;
    padding-right: 160px;
    padding-left: 180px;
    justify-content: center;
 
}

.blog-details h2 {
    font-size: 32px;
}

/* About us section */

#about-hero {
    height: 150px;
}

.about-us {
    flex-direction: column;
   
}

.about-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%; 
    margin: 20px 0; 
    height: 350px;
    margin-top: 40px;
    
}

.about-img img {
    width: 80%; 
    object-fit: fill; 
}

.about-details {
    width: 60%;
    height: 550px;
}

.video-section h2 {
    font-size: 34px;
    margin-top: 40px;
}

/* Contacts page */

.contact-section {
    flex-direction: column;
}

.contact-details {
    width: 100%;
    margin-bottom: 40px;
}

.form-details {
    width: 50%;
}

.form-details h2 {
    font-size: 32px;
}

/* Cart Page */

#cart {
    height: 150px;
}

#cart h2 {
font-size: 22px;
right: 100px;
top: 2px;
}

.coupon {
    width: 100%;
    flex-direction: column;
    
}

.cart-summary {
    width: 100%;
}

.add-coupon {
    width: 100%;
    margin-bottom: 40px;
} 

}

/* Mobile version */

@media(max-width: 477px){

    .section-margin {
        margin: 0px 0px 20px 0px;
        }

    .section-padding {
            padding: 40px 80px;
        }

    .header {
       
        padding: 25px 20px;
       
    }
  
    .logo {
          height: 80px;
          width: 80px;
          top: 40px; 
    }

    .hero {
            padding: 0 0px;
    }

    .hero h2 {
        font-size: 28px
    }

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

    .main-title {
        font-size: 34px;
        line-height: 1;
    }

    
    .hero button {
        height: 100px;
         width: 100px;
        padding-bottom: 40px;
        font-size: 14px;
    }

    .nav-bar.active {
         right: -100px;
         font-size: 16px; 
    }

    .nav-bar li a {
        font-size: 20px;      
    }
    
    .nav-bar li a.active::before,
    .nav-bar li a:hover::before  {
 
        top: 30px;
        width: 35px;
        height: 3px;
    }

    .features {
        justify-content: space-around;
        margin-top: 40px;
    }

    .feature-box {
        margin: 0 0 15px 0;
        padding: 6px;
        width: 160px;
        height: 160px;
    
    }

    .anime {
        height: 100px;
        width: 100px;
    }

    .most-popular {
        margin-bottom: 0;
    }

    .most-popular h1 {
        font-size: 28px;
        line-height: 1.2;
    }

    h3 {
        font-size: 18px;
    }

    .cards-container {
       margin-right: 20px;
    }

    .product-card {
        height: 550px;
        margin-left: 35px;
    }

    .summer-camp button {
        width: 90px;
        font-size: 10px;
        top: 55%;
        padding: 5px;
    }

    #price {
        font-size: 20px;
    }

    .deals {
        display: flex;
        flex-direction: column;
    }

    .offers {
        width: 100%;
        padding: 20px 20px;
    }

    
    .offers h2 {
        font-size: 20px;
        line-height: 1;
        text-align: left;
    }

    #offers-title {
        font-size: 26px;
        text-align: center;
        margin-top: 40px;
    }

    .offers button {
        padding: 4px;
        font-size: 12px;
    }

    .explore {
        width: 100%;
        max-width: 800px;
        min-height: 40vh;
        padding-left: 20px;
        background-position: right;
    }

    .collections {
        padding: 20px 20px;
    }

    .collections h2 {
        font-size: 32px;
    }

    .collections h3 {
        font-size: 18px;
    }
    .newsletter  {
      background-position: left 20%;
    }
    

    .newsletter h2 {
        font-size: 32px;
        line-height: 1.2;
    }

    footer {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .copy {
        font-size: 14px;
        margin: 0 20px 20px 20px;
    }

/* Shop page */

    .shop-hero {
        position: relative;
    }
    
    .shop-title {
        justify-content: end;
    }

    .shop-title h2 {
        font-size: 20px;
        margin-left: 65%;   
        
    }

    .shop-title h3 {
        font-size: 12px;
        text-align: start;
        position: absolute;
        bottom: 5%;
        left: 5%;
        
    }

/* Product details */

    .product-info {
        display: flex;
        flex-direction: column;
    }

    .product-img {
        width: 100%;
        margin-right: 50px;
        margin-bottom: 20px;
    }

    .product-desc {
       
        gap: 20px;
        width: 100%;
    }

    .featured h2 {
        text-align: center;
        font-size: 36px;
        line-height: 1;
    }

    .featured h3 {
        text-align: center;
    }

    .card-assets h3 {
        text-align: start;
    }

/* Blog page */

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

    .blog-title h3 {
        font-size: 16px;
    }
    
    .blog {
      max-width: 290px;
    }

    .blog h1 {
        font-size: 28px;
        left: 15px;
        top: 90px;
    }

    .blog-image {
        margin-right: 220px;
    }


    .blog img {
        max-width: 250px;
        
    }

    .blog-details {
       padding: 0;
    }

    .blog-details h2 {
        font-size: 26px;
        line-height: 1;
    }

    .blog-section {
        margin: 0;
        padding: 0;
    }

    .blog-image {
        width: 50px;
        padding-left: 0;
    }

    /* About us Section */

    #about-hero {
        height: 100px;
        padding-bottom: 40px;  
    }

    #about-hero h2 {
        font-size: 26px;
        margin: 0px;
        margin-top: 40px;
    }

    #about-hero h3 {
        font-size: 16px;
        margin: 0;
        padding: 0;
    }

    .about-img {
        height: 100px;
    }

    .about-details {
        width: 100%;
        padding-top: 10px;
    }

    .about-details h2 {
        font-size: 28px;
        padding-top: 0px;
    }

    .video-section h2 {
        font-size: 26px;
    }

    /* Contact Page */

    #contact-hero {
        margin-bottom: 0;
    }

    #contact-hero h2 {
        font-size: 32px;
    }

    #contact-hero h3 {
        font-size: 16px;
    }
    
    .contact-section {
        flex-direction: column;
    }


    .map iframe {
        width: 200px;
        height: 200px;
        margin-right: 20px;
    }
    

    .form-section {
        flex-direction: column;
        width: 100%;
        border-radius: 0;
        align-items: start;
    }

    .form-details input,
    .form-details textarea {
        width: 250px;
        float: left;
    }

    .form-details button {
        margin-bottom: 60px;
    }


    .form-details h4 {
        font-size: 14px;
    }
    
    .form-details h2 {
        font-size: 20px;
        line-height: 1.2;
        padding: 0;
    }

    /* Cart Page */

    #cart {
        height: 70px;
    }

    #cart h2 {
        font-size: 10px;
        right: 50px;
        top: -25px;
    }

    .cart-body {
        padding: 0;
    }

    .cart-body table {
        width: 600px;
    }

    .cart-body {
        overflow-x:scroll;
    }

    .cart-summary {
        width: 300px;
    }

    .add-coupon {
        width: 300px;
    }
    
}