*{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
.c-margin{
    margin-top: 180px;

}
.c-margin2{
    margin-top: 50px;
}

.c-margin1{
    margin-top: 240px;
}
#header{
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.8);
   
    background: rgba(207, 177, 132, 0.87);
    position: relative;

}
#header a img{
    height: 76px;
    width: 75px;
    padding: 10px;
    margin-left: 10px;
    font-weight: 1000;
    font-size: 80px;
}
#navbar{
    display: flex;
    justify-content: center;
    align-items: center;
}
#navbar ul{
    list-style: none;
    display: flex;
    
    text-align: center;

}
#navbar ul li {
    list-style: none;
    padding: 0 5px;
    position: relative;
    margin-right: 50px;
}
#navbar ul a{
    font-size: 17px;
    color:  black;
    text-decoration: none;
    font-weight: 600;
    transition: 1s ease-in;
}
#navbar li a:hover,
    #navbar li a.active{
        color: rgb(153, 95, 24);
    }
     #navbar li a.active::after,
     #navbar li a:hover::after{
        content: "";
        width: 35%;
        height: 2px;
       background: rgb(153, 95, 24);
       position: absolute;
       bottom: -2px;
       left: 6px;
     }


     /* =========================
   MENU TOGGLE (MOBILE)
========================= */

#menu-toggle {
  display: none;
}

.menu-icon {
  display: none;
  font-size: 26px;
  cursor: pointer;
  color: #000;
}
.m-icon{
  display: none;
}

/* =========================
   MOBILE STYLES
========================= */
@media (max-width: 768px) {

  .menu-icon {
    display: block;
    
  }
  .menu-icon i{
    margin-left: -70px;
    font-size: 24px;
    cursor: pointer;
  }
 
#header{
  padding: 0;
} 
  #navbar {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;

    /* Smooth slide animation */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  }

  #navbar ul {
    flex-direction: column;
    width: 100%;
  }

  #navbar ul li {
    width: 100%;
  }

  #navbar ul li a {
    display: block;
    padding: 35px 25px;
    border-bottom: 1px solid #eee;
    font-size: 21px;
  }
   #navbar li a.active::after,
     #navbar li a:hover::after{ 
        width: 15%;
        height: 2px;
       left: 240px;
     }
  .m-icon {
    margin-left: 250px;
    padding: 0 10px;
    font-size: 18px;
    display: flex;
    gap: 10px;
  }
   .m-icon i{
     cursor: pointer;
   }
  .search-box,
  .header-icon {
    width: 100%;
    padding: 15px 25px;
    display: none;
  }

  /* SHOW MENU WHEN TOGGLED */
  #menu-toggle:checked + .menu-icon + #navbar {
    max-height: 500px; /* enough to fit content */
  }
}



.header-icon{
    padding: 2px;
    cursor: pointer;
    font-size: 20px;
}
.fa-solid{
    color: black;
}
#hero{
    display: flex;
    justify-content: space-between;
    padding: 40px;
    height: 450px;
    background: rgb(163, 151, 122);
}
.video-container{
    height: 70vh;
    width: 40%;
    overflow: hidden;
}
.video-container video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 30px;
}
.hero-text{
    margin-top: 13px;
}
#hero h1{
    font-size: 50px;
    margin-bottom: 10px;
}
#hero p{
    font-size: 20px;
    margin-bottom: 10px;
}
#hero p span{
    color: red;
}
#hero button{
    font-size: 20px;
    padding: 10px;
    margin-top: 13px;
    transition: transform 0.3s ease;
    cursor: pointer;
    background-color: blanchedalmond;
    font-weight: 550;
    border-radius: 8px;
}
#hero button:hover{
    transform: scale(1.1);
} 

/*feature product*/
.feature-container{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    
}
#feature-div h1{
    text-align: center;
    font-size: 37px;
    margin-top: 70px;
    margin-bottom: 10px;
}
#feature-div .para {
    text-align: center;
    font-size: 19px;
    margin-bottom: 10px;
}
.feature {
    width: 260px;
    height: 300px;

}
.feature img{
    width: 300px;
    height: 320px;
    border-radius: 10px;
}
.feature p{
    font-size: 16px;
    margin-bottom: 3px;
}
.feature h4{
    margin-bottom: 7px;
}
.fa-cart{
    font-size: 19px;
    border: 1px solid;
    border-radius: 10px;
    text-align: center;
    padding: 10px;
    margin-top: 10px;
    width: 100%;
    cursor: pointer;
    background: rgb(146, 146, 113);
}
.fa-cart a{
    text-decoration: none;
    color: black;
    font-weight: 550;
}
.view-container{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
   
}    
.view{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border: 1px solid;
    width: 600px;
    height: 350px;
     background: rgb(153, 126, 89);
}

.view-img img{
    width: 330px;
    height: 370px;
    margin-left: -50px;
}
.view-img {
    display: flex;
    justify-content: space-around;
    gap: 2px;
}

.view-more {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.view-more a{
    font-size: 20px;
    color: black;
}
.pro-container{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    
}
.pro-display{
    border: none;
    transition: transform 0.2s ease;
}
.pro-display img{
    height: 300px;
    width: 300px;
}
.pro-icon{
    position: relative;
    font-size: 12px;
    
}
.pro-display h3{
    margin-bottom: 15px;
}
.pro-display:hover{
    transform: scale(1.09);
}
#c-margin2 h1{
    font-size: 38px;
    margin-left: 25px;
}
.newsletter-container{
    background: rgb(185, 165, 123);
    height: 200px;
    width: 100%;
    text-align: center;
}
.newsletter-container h1{
    font-size: 55px;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.newsletter-container input{
    width: 50%;
    height: 40px;
    margin-top: 30px;
    border-radius: 8px;
    border: none;

}
.newsletter-container button{
    font-size: 20px;
    height: 44px;
    margin-top: 15px;
    padding: 10px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.newsletter-container button:hover {
   background: #33333354;
   transform: scale(1.1);
}

.img-container{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.img-displayer img{
    height: 670px;
    width: 600px;
}
.tesimonial{
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;

}
#test-cont h1{
    text-align: center;
    font-size: 45px;
    font-weight: 700;
}
.testimonial-container{
    box-shadow: 0 7px 20px rgba(0, 0, 0.7, 0.8);
    border-radius: 15px;
    padding: 4px;
    transition: transform 0.3s ease;
}
.testimonial-container:hover {
    transform: scale(1.03);
  }

.testimonial-container h3 {
    margin-top: 10px;
}
.testimonial-container h5 {
    margin-top: 10px;
    font-size: 19px;
}
.testimonial-container img{
    height: 300px;
    width: 335px;
    border-radius: 15px;
}
.footer-container{
    display: flex;
    justify-content: center;
    gap: 85px;
}
#footer{
    background: rgb(36, 36, 58);
    padding: 20px;
    color: white;
}
.foot-cont p{
    text-align: justify;
}
.foot-cont ul li{
    list-style: none;
}
.foot-cont ul li a{
    text-decoration: none;
    color: white;
}
.foot-cont ul li a:hover{
    font-weight: bold;
}
.foot-cont h1{
    margin-bottom: 15px;
}
.cont-details{
    display: flex;
    justify-content: center;
    gap: 150px;
    margin-top: 16px;
    margin-bottom: 15px;
}
.details a{
    color: white;
    text-decoration: none;
}
.details i {
    color: white;
}
.reserved{
    text-align: center;
    padding: 10px;
    font-weight: 600;
    margin-top: 12px;
}
.see-more {
  display: none;
  color: #f5c16c;
  cursor: pointer;
  font-size: 14px;
  margin-top: 6px;
}





/*About pages tyling*/
.abt-hero{
    height: 300px;
    width: 100%;
    background: rgb(201, 192, 141);
}
.abt-hero h1{
    text-align: center;
    font-size: 55px;
    font-weight: 700;
    padding-top: 80px;
}
.abt-hero h3{
    font-size: 17px;
    padding-left: 560px;
    margin-top: 8px;
}
.abt-display-container{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    
}
.abt-single-image{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.abt-img img{
    height: 190px;
    width: 170px;
}
.abt-single h1{
    font-size: 45px;
    margin-bottom: 20px;
    font-weight: 700;
}
.abt-single h3{
    font-size: 35px;
    margin-bottom: 10px;
}
.abt-single p{
    font-size: 18px;
    text-align: justify;
    line-height: 25px;
}
.abt-icon-container{
    display: flex;
    justify-content: center;
    gap: 150px;
    margin-top: 80px;
    background: rgb(212, 200, 166);
    height: 100px;
   
    padding: 70px;
}
.abt-icon{
    text-align: center;
}
.abt-icon i {
    font-size: 45px;
}
.abt-choose-cont{
    padding: 14px;
    border: none;
    width: 50%;
    text-align: center;
    margin-left: 360px;
}
.abt-choose-cont h1{
    font-size: 50px;
}
.abt-choose-cont h2{
    font-size: 27px;
    margin-bottom: 10px;
    text-align: center;

}
.abt-choose-cont p{
    text-align: center;
    font-size: 19px;
}
.abt img {
    height: 650px;
    width: 540px;
}
.cnt-hero{
    width: 100%;
    height: 300px;
    background: burlywood;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 30px;
}
.cnt-form-container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
    gap: 50px;
    padding: 40px;
}
.cnt-form{
    height: 400px;
    width: 600px;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
.cnt-form h2{
    font-size: 40px;
    margin-bottom: 15px;
}
.cnt-form input, .cnt-form textarea{
    width: 95%;
    margin-bottom: 15px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid;
    padding: 12px;
} 
.cnt-form button{
    width: 100%;
    height: 50px;
    font-size: 20px;  
    font-weight: 550;
    border-radius: 10px;
    border: none;
    background: blanchedalmond;
}  
.cnt-form button:hover{
    transition:  0.3s ease-in;
    background: rgba(224, 175, 102, 0.979);
}
.cnt-form h3{
    text-align: center;
    font-size: 35px;
    margin-bottom: 15px;
}
.cnt-form p{
    
    font-size: 18px;
    margin-bottom: 15px;
}
.cnt-info-container{
    display: flex;
    flex-direction: row;
    gap: 50px;
    flex-wrap: wrap;
    padding: 10px;
    
}
.cnt-info{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 10px;
    width: 200px;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
}
.cnt-info i{
    text-align: center;
    font-size: 25px;
}
.cnt-display-cont{
    height: 300px;
    width: 60%;
    margin-left: 260px;
    background: rgba(207, 176, 113, 0.315);
    box-shadow: 2px 10px 15px rgba(146, 84, 12, 8);
    margin-bottom: 50px;
}
.cnt-display{
    padding-top: 20px;
}
.cnt-display h2{
    text-align: center;
    font-size: 40px;
    padding: 15px;
    margin-top: 50px;
}
.cnt-display p{
    text-align: center;
    font-size: 20px;
    padding: 5px;
}
.cnt-display button{
    text-align: center;
    font-size: 20px;
    padding: 12px;
    align-items: center;
    margin-left: 350px;
    margin-top: 25px;
    background: none;
    border-radius: 10px;
    border-color: white;
    font-weight: 560;
    color: #000;
    cursor: pointer;
    transition: transform 0.3s ease;

}
.cnt-display button:hover{
    transform: scale(1.1);
    background: blanchedalmond;
}
.cnt-img-displayer{
    display: flex;
    justify-content: center;
    gap: 50px;
}
.cnt-img-displayer img{
    height: 700px;
    width: 600px;
    border-radius: 19px;
    margin-bottom: 40px;
}
.cnt-map{
    width: 80%;
    height: 500px;
    margin-left: 150px;
    border:0; 
    border-radius:12px;
    margin-bottom: -80px;
}


/*shop page*/

body {
  background: #f9f9f9;
}
.shop {
    text-align: center;
    background: burlywood;
    width: 100%;
    height: 300px;
}
.shop h1{
    margin-top: 250px;
    font-size: 60px;
    font-weight: 580;
}

.search {
  padding: 8px;
  width: 250px;

}
.search-box input{
    border-radius: 7px;
    height: 25px;
    background: rgb(255, 239, 217);
    color: black;
}

.header-icons i {
  margin-left: 15px;
  cursor: pointer;
}

.cart-count {
  background: red;
  padding: 2px 6px;
  border-radius: 50%;
  font-size: 12px;
}

/* Breadcrumb */
.breadcrumb {
  padding: 15px 30px;
  background: #eee;
}

/* Layout */
.shop-container {
  display: flex;
  padding: 20px;
}

/* Sidebar */
.sidebashop-sidebar {
  width: 250px;
  background: #fff;
  padding: 20px;
}

.shop-sidebar h3 {
  margin-bottom: 10px;
}

.shop-sidebar ul {
  list-style: none;
  margin-bottom: 20px;
}

.shop-sidebar button {
  width: 100%;
  padding: 10px;
  margin-bottom: 18px;
  border: none;
  background: #eee;
  cursor: pointer;
}

/* Products */
.products-area {
  flex: 1;
  padding: 0 20px;
}

.sortSelect {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.product-card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.product-card {
  background: #fff;
  padding: 15px;
  text-align: center;
  border-radius: 5px;
}
.product-card h4{
    text-align: left;
}
.product-card img {
  width: 100%;
  height: 280px;
}

.price {
  font-weight: bold;
  margin-bottom: -10px;
  margin-top: -10px;
  text-align: left;

}

.product-card button {
  padding: 10px;
  width: 100%;
  background: #111;
  color: #fff;
  border: none;
  cursor: pointer;
}

/* Pagination */
.pagination {
  margin-top: 30px;
  text-align: center;
}

.pagination button {
  padding: 8px 12px;
  margin: 0 5px;
}

/* ================= BASE STYLES ================= */
.shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
  padding: 2rem;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

/* ================= TABLET (≤ 992px) ================= */
@media (max-width: 992px) {
  .shop-layout {
    grid-template-columns: 220px 1fr;
    padding: 1.5rem;
  }

  .site-header .header-inner {
    gap: 1rem;
  }

  .search-box {
    max-width: 220px;
  }
}

/* ================= SMALL TABLET & MOBILE (≤ 768px) ================= */
@media (max-width: 768px) {
  .shop-layout {
    grid-template-columns: 1fr;
  }

  .shop-sidebar {
    order: 2;
  }

  .shop-products {
    order: 1;
  }
  .shop-toolbar{
    margin-top: -60px;
    font-size: 19px;
  }

  .site-header .header-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .search-box {
    width: 100%;
  }

  .header-actions {
    justify-content: space-between;
  }
}

/* ================= MOBILE (≤ 480px) ================= */
@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: 1fr;
  }

  .breadcrumb {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }

  .product-card h4 {
    font-size: 1rem;
  }

  .price {
    font-size: 0.95rem;
  }

  .pagination button {
    padding: 0.4rem 0.7rem;
  }
}


/* FOOTER TEXT EXPAND/CONTRACT */

/* Hidden toggle by default (desktop) */
.see-toggle {
  display: none;
  color: #c28b4e;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
}

/* SMALL SCREENS ONLY */
@media (max-width: 768px) {
  .footer-text {
    max-height: 48px; /* about 2–3 lines */
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .footer-text.expanded {
    max-height: 500px;
  }

  .see-toggle {
    display: inline-block;
    margin-top: 6px;
  }
}

/*animations*/


.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.product-card {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 40px;
}

.pagination button {
  padding: 8px 16px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.pagination button:disabled {
  background: #aaa;
  cursor: not-allowed;
}

#pageInfo {
  font-weight: bold;
}
.options input{
    width: 60%;
    margin-top: 10px;

}

.add-btn:hover{
  background:#333;
}

/* CART ICON */
.cart-link{
  position:fixed;
  top:20px;
  right:20px;
  background:#25D366;
  color:#fff;
  padding:12px 16px;
  border-radius:50px;
  text-decoration:none;
  font-size:14px;
}




/*responsiveness*/
/*home page*/

    
@media (max-width: 768px) {
 /* ---------- GENERAL ---------- */
  body {
   
    width: 100%;
  }
#header{
    width: 100%;
}
  section {
    padding: 40px 16px;
  }

  h1 {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  p {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  

  /* ---------- HERO ---------- */
  
  .hero-text h1 {
    font-size: 2rem;
  }


  .hero-text button {
    padding: 12px 28px;
  }

  .video-container video {
    display: none;
  }

  #hero{
    height: 500px;
 
    flex-direction: column;
    text-align: center;
    gap: 30px;
}
#hero p {
    font-size: 18px;
}
#feature-div h1 {
    font-size: 37px;
    margin-top: 20px;
}
.feature-container {
    display: flex;
    flex-direction: column;
    gap: 190px;
}
.feature {
    width: 400px;
    height: 510px;
    
}
.pro-display h3 {
  margin-top: 10px;
  margin-bottom: 35px;
}
.feature img {
    width: 400px;
    height: 500px;
    border-radius: 10px;
    gap: 150px;
}
.view-container {
    display: flex;
    flex-direction: column;
    margin-top: -120px;
    gap: 25px;
    width: 100%;
    align-items: center;
}
.view-img img {
    width: 330px;
    height: 370px;
    margin-left: -1px;
}
.view {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border: 1px solid;
    width: 89%;
    height: 330px;
     background: rgb(153, 126, 89);
  
    margin-left: -50px;
}
#c-margin2 h1 {
    font-size: 3.1rem;
    text-align: center;
    margin-top: -80px;
    margin-bottom: 10px;
}
.pro-container {
    display: flex;
    flex-direction: column;
    
}
.img-displayer img {
    height: 670px;
    width: 450px;
    margin-top: -15px;
    padding: 10px;
}
.pro-display img {
    height: 500px;
    width: 400px;
  }
  .newsletter-container {
    background: rgb(185, 165, 123);
    height: 300px;
   margin-top: -150px;
}
.newsletter-container input {
    width: 95%;
    margin-top: 20px;
}
.newsletter-container button {
   transition: transform 0.3s ease;
}
.newsletter-container button:hover {
   background: #33333354;
   transform: scale(1.1);
}
.img-container {
    flex-direction: column;
    gap: 20px;
  }
.img-displayer img {
    height: 670px;
    width: 450px;
}
#test-cont h1 {
    margin-top: -80px;
}
.tesimonial {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .testimonial-container {
    text-align: center;
    width: 75%;
    transition: transform 0.3s ease;
  }
  .testimonial-container:hover {
    transform: scale(1.03);
  }
  .testimonial-container img{
    text-align: center;
    width: 100%;
}
  #footer{
    margin-top: -10px;
    width: 100%;
  }
.footer-container {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px 55px;
    text-align: left;
   
  }
  
  .foot-cont h1 img{
    width: 70px;
    height: 70px;
  }
   .foot-cont h1{
    text-align: center;
    font-size: 22px;
   }
  .foot-cont p {
    font-size: 14px;
    line-height: 1.3;
    padding: 20px;
    margin-top: -15px;
    text-align: left;
}

  .foot-cont ul {
    padding: 0;
  }

  .cont-details {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .reserved p {
    font-size: 0.85rem;
  }

   .footer-text {
    max-height: 3.2em; /* ~2 lines */
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .footer-text.expanded {
    max-height: 1000px; /* 🔥 MUST be large */
  }

  .see-more {
    display: inline-block;
    color: #f5c16c;
    cursor: pointer;
    margin-top: 6px;
    margin-left: 18px;
  }
  

/*media query for  about page*/
.abt-hero {
  margin-top: -25px;
  
}
.abt-hero h1 {
   display: flex;
   align-items: center;
   text-align: center;
   justify-content: center;
}
.abt-hero h3 {
   display: flex;
   align-items: center;
   text-align: center;
   justify-content: center;
   font-size: 16px;
   margin-left: -690px;
   margin-top: -7px;
}
.abt-display-container {
    gap: 30px;
    flex-direction: column;
    margin-top: -110px;
}
.abt-single h1 {
    font-size: 40px;
    font-weight: 650;
}
.abt-single-image {
    gap: 12px;
}
.abt-img img {
    height: 210px;
    width: 150px;
}
.abt-single h3 {
    font-size: 39px;
    margin-bottom: 12px;
    text-align: center;
}
.abt-single p {
    font-size: 17px;
    text-align: center;
    line-height: 22px;
}
.abt-icon-container {
    gap: 50px;
    margin-top: 80px;
    height: 80px;
    padding: 60px;
    margin-top: -80px;
}
.abt-icon i {
    font-size: 30px;
}
.abt-choose-cont {
    margin-top: -110px;
    width: 70%;
    text-align: center;
    margin-left: 60px;
}
.img-container {
    margin-top: -80px;
}
.abt img {
    height: 650px;
    width: 470px;
    padding: 0 15px;
}


/*media query for contact page*/
.cnt-hero {
    margin-top: -25px;
}
.cnt-form-container {
    display: flex;
    flex-direction: column;
    margin-top: -80px;
    margin-bottom: 50px;
    gap: 30px;
    padding: 50px;
   
}
.cnt-form {
    height: 400px;
    width: 400px;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
.cnt-form p {
    font-size: 15px;
    margin-bottom: 15px;
}
.cnt-info-container {
    display: flex;
    flex-direction: row;
    gap: 30px;
    flex-wrap: wrap;
    padding: 0 40px;
}
.cnt-info {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 10px;
    width: 130px;
    padding-left: 10px;
}
.cnt-form p {
    font-size: 13px;
    margin-bottom: 15px;
}
.cnt-form p {
    text-align: center;
}
.cnt-display-cont {
    height: 280px;
    width: 85%;
   margin-left: 20px;
    margin-bottom: 50px;
    margin-top: -90px;

}
.cnt-display h2 {
    text-align: center;
    font-size: 40px;
    padding: 15px;
    margin-top: 50px;
}
.cnt-display button {
    font-size: 18px;
    margin-left: 150px;
    
}
.cnt-display h2 {
    margin-top: 10px;
}
.cnt-img-displayer {
    flex-direction: column;
    justify-content: center;
    margin-top: -55px;
    gap: 10px;
}
.cnt-img-displayer img {
    height: 700px;
    width: 450px;
    border-radius: 28px;
   padding: 0 15px;
}
.cnt-map {
    width: 90%;
    height: 500px;
    margin-left: 25px;
    border: 0;
    border-radius: 12px;
    margin-bottom: -90px;
    margin-top: -70px;
}

.fa-cart {
    font-size: 18px;
    width: 90%;
}

/*shop page*/

}

@media screen and (min-width: 300px) and (max-width: 650px) {
  body{
    width: 100%;
  }
  /* ================= HEADER ================= */
  #header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: relative;
    width: 100%;
  }


  #header a img {
    width: 100%;
    margin-left: -20px;
  }

  /* Hide desktop navbar */
  #navbar {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    flex-direction: column;
    padding: 16px;
    display: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    z-index: 999;
  }

  /* Show navbar when menu is checked */
  #menu-toggle:checked ~ #navbar {
    display: flex;
  }

  #navbar ul {
    flex-direction: column;
    width: 100%;
    gap: 14px;
  }

  #navbar ul li a {
    font-size: 15px;
    padding: 10px 0;
    display: block;
  }

  /* Search box inside menu */
  .search-box {
    width: 100%;
    margin: 15px 0;
  }

  .search-box input {
    width: 100%;
    padding: 10px;
    font-size: 14px;
  }

  /* Header icons inside menu */
  .header-icon {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 10px;
  }

  /* Mobile icons */
  .m-icon {
    display: flex;
    gap: 10px;
    font-size: 18px;
  }

  /* Hamburger */
  
  .menu-icon i {
    margin-left: -15px;
    font-size: 24px;
    cursor: pointer;
}

  /* Hide desktop header icons */
  .header-icon {
    display: none;
  }

  /* ================= HERO ================= */
  #hero {
    flex-direction: column;
    padding: 30px 20px;
    text-align: center;
    width: 100%;
    height: 550px;
  }

  .hero-text h1 {
    font-size: 22px;
    line-height: 1.3;
  }

  .hero-text p {
    font-size: 14px;
    line-height: 1.6;
    margin: 14px 0;
  }

  .hero-text span {
    display: block;
  }

  .hero-text button {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    border-radius: 6px;
  }

  /* Video */
  .video-container {
    width: 100%;
    margin-top: 20px;
    display: none;
  }

  .video-container video {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: none;
  }

  #feature-div {
    margin-left: 30px; 
}
.view-img img {
    width: 250px;
    height: 350px;
    margin-left: -1px;
}
.view {
    width: 120%;
    height: 320px;
    background: rgb(153, 126, 89);
    margin-left: 10px;
}
.pro-container {
    margin-left: 15px;
}
.newsletter-container {
    margin-left: 15px;
}
.img-displayer {
    margin-left: 35px;
}
.img-displayer img {
    height: 670px;
    width: 420px;
}
.hero-text button {
    width: 50%;
    padding: 12px;
    font-size: 14px;
    border-radius: 6px;
}




.abt-hero {
    height: 300px;
    width: 110%;
    background: rgb(201, 192, 141);
}
.abt-single h1 {
    margin-left: 30px;
}
.abt-single-image {
    margin-left: 40px;
}
.abt-single p {
    font-size: 14px;
    line-height: 19px;
    margin-left: 20px;

}
.abt-choose-cont h1 {
    font-size: 35px;
}
.abt-choose-cont p {
    font-size: 15px;
}
.abt img {
    height: 620px;
    width: 410px;
    margin-left: 40px;
}
}

@media screen and (min-width: 768px) and (max-width: 1024px){
  #header {
    width: 150%;
}
#hero {
    width: 140%;
}
#feature-div h1{
  margin-left: 260px;
}
#feature-div .para {
    margin-left: 240px;
}
.feature-container {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 140%;
    flex-direction: row;
    gap: 12px;
  
}
.fa-cart {
    width: 70%;
   margin-top: 20px;
}
.feature {
    width: 280px;
    height: 280px;
    display: flex;
    flex-wrap: wrap;
      height: 350px;
   
}
.view-container {
    margin-left: 200px;
}
.pro-display img {
    height: 400px;
    width: 370px;
   
}
.pro-display {
  gap: 25px;
}
.pro-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    
  

}
#test-cont h1 {
    margin-left: 350px;
}
.img-displayer img {
    height: 690px;
    width: 530px;
}
.img-container {
    margin-left: 380px;
}
.tesimonial {
    margin-left: 380px;
}
#footer {
    width: 145%;
}

}