@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap");

html {
  scroll-behavior: smooth;
}

/* Header Section */
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 40px; /* reduced padding */
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Logo */
.LOGO {
  max-height: 45px; /* reduce logo size */
  height: auto;
  width: auto;
}

/* Navbar */
#navbar {
  display: flex;
  align-items: center;
  gap: 20px;
}

#navbar li {
  list-style: none;
}

#navbar a {
  text-decoration: none;
  font-size: 14px;
  padding: 8px 12px;
  color: #222;
  font-weight: 500;
  transition: 0.3s;
}


#navbar a:hover,
#navbar a.active {
  color: #088178;
}

/* Responsive Mobile Header */
#mobile i {
  font-size: 20px;
}

/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Spartan", sans-serif;
}

h1 {
  font-size: 50px;
  line-height: 64px;
  color: #00b3b0;
}

h2 {
  font-size: 46px;
  line-height: 54px;
  color: hwb(0 100% 0% / 0.816);
}

h4 {
  font-size: 20px;
  color: #571c46;
}

h6 {
  font-size: 12px;
  font-weight: 700;
}

p {
  font-size: 16px;
  color: #150616;
  margin: 15px 0 20px 0;
}

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

.section-m1 {
  padding: 40px 0;
}

body {
  width: 100%;
  font-family: inherit;
}

/* Hero Section */
#hero {
  background-image: url("https://img.freepik.com/free-photo/surprised-curly-woman-beret-looks-left-charming-lady-pink-sweater-sunglasses-green-skirt-holds-grey-handbag_197531-29645.jpg?ga=GA1.1.1352781117.1743869418&semt=ais_hybrid&w=740");
  height: 70vh;
  width: 100%;
  background-size: cover;
  background-position: top 25% right 0;
  
  padding: 0 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 1;
}

#hero h1 {
  color: #088178;
}

/* Shop Hero */
#shop-hero {
  background-image: url("https://img.freepik.com/premium-photo/abstract-pink-background_196038-20882.jpg?ga=GA1.1.1352781117.1743869418&semt=ais_hybrid&w=740");
  background-repeat: no-repeat; 
  width: 100%;
  height: 40vh;
}
#shop-hero.blog-header {
  background-image: url('https://img.freepik.com/premium-photo/abstract-pink-background_196038-20882.jpg?ga=GA1.1.1352781117.1743869418&semt=ais_hybrid&w=740'); /* replace with your own if needed */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 100px 20px;
  text-align: center;
   
  color: #ffffff;
  position: relative;
}
#shop-hero.blog-header h2,
#shop-hero.blog-header p {
    position: relative;
    z-index: 1;
    color: white;
}


#shop-hero.blog-header h2 {
  font-size: 3rem;
  color: #fff;
  font-family: 'Berkshire Swash', cursive;
  margin-bottom: 15px;
  letter-spacing: 2px;
}


#pagination {
  text-align: center;
}

#pagination a {
  text-decoration: none;
  background-color: #060b3a;
  padding: 15px 20px;
  border-radius: 4px;
  color: #ffffff;
  font-weight: 600;
}

/* Single Product Details */
#prodetails {
  display: flex;
  margin-top: 20px;
}

#prodetails .single-pro-image {
  width: 40%;
  margin-right: 50px;
}

.small-img-group {
  display: flex;
  justify-content: space-between;
}

.small-img-col {
  flex-basis: 24%;
  cursor: pointer;
}

#prodetails .single-pro-details {
  width: 50%;
  padding-top: 30px;
}

#prodetails .single-pro-details h6 {
  padding: 40px 0 20px 0;
}

#prodetails .single-pro-details h5 {
  font-size: 26px;
}

#prodetails .single-pro-details select {
  display: block;
  padding: 5px 10px;
  margin-bottom: 10px;
}

#prodetails .single-pro-details input {
  width: 50px;
  height: 47px;
  padding-left: 10px;
  font-size: 16px;
  margin-right: 10px;
}

#prodetails .single-pro-details button {
  background: #060b3a;
  color: #ffffff;
}

#prodetails .single-pro-details span {
  line-height: 25px;
}

#hero h2 {}

#hero h4 {
  padding-bottom: 15px;
}

#hero button {
  background-image: url(https://i.postimg.cc/528H2mmS/button.png);
  background-color: transparent;
  color: #088178;
  border: 0;
  padding: 14px 80px 14px 65px;
}

/* Feature Boxes */
#feature .fe-box {
  width: 180px;
  text-align: center;
  padding: 25px 15px;
  box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
  border: 1px solid #cce7d0;
  border-radius: 4px;
  margin: 15px 0;
}

#feature .fe-box:hover {
  box-shadow: 10px 10px 54px rgba(70, 62, 221, 0.1);
}

#feature .fe-box h6 {
  display: inline-block;
  padding: 9px 8px 6px 8px;
  line-height: 1;
  border-radius: 4px;
  color: #088178;
  background-color: #3b151e;
}

#feature .fe-box img {
  width: 100%;
  margin-bottom: 10px;
}

#feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Product Grid */
#product1 {
  text-align: center;
}

#product1 .pro-container {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  flex-wrap: wrap;
}

#product1 .pro {
  width: 23%;
  min-width: 250px;
  padding: 10px 12px;
  border: 1px solid #cce7d0;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
  margin: 15px 0;
  transition: 0.2s ease;
  position: relative;
}

#product1 .pro:hover {
  box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.06);
}

#product1 .pro img {
  width: 100%;
  border-radius: 20px;
}

#product1 .pro .des {
  text-align: start;
  padding: 10px 0;
}

#product1 .pro .des span {
  color: #606063;
  font-size: 12px;
}

#product1 .pro .des h5 {
  padding-top: 7px;
  color: #1a1a1a;
  font-size: 14px;
}

#product1 .pro .des i {
  font-size: 12px;
  color: rgb(243, 181, 25);
}

#product1 .pro .des h4 {
  font-size: 15px;
  padding-top: 7px;
  font-weight: 700;
  color: #088178;
}

#product1 .pro .cart {
  width: 40px;
  height: 40
}
/* General Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  background-color: #f4f4f4;
  color: #333;
}

/* Header */
#header {
  background-color: #333;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

#logo {
  width: 150px;
}

#navbar {
  list-style: none;
  padding: 0;
  text-align: center;
}

#navbar li {
  display: inline-block;
  margin: 0 15px;
}

#navbar a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
  display: inline-block;
}

#navbar a:hover, .active {
  background-color: #555;
  border-radius: 5px;
}

#mobile {
  display: none;
}

#lg-bag {
  font-size: 1.2rem;
}

#close {
  display: none;
}

/* About Section */
#about-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 10%;
}

#about-head img {
  width: 50%;
  border-radius: 10px;
}

#about-head div {
  width: 45%;
}

#about-head h2 {
  font-size: 2.5em;
  margin-bottom: 15px;
}

#about-head p {
  font-size: 1.2em;
  line-height: 1.6;
  color: #555;
}

#about-head abbr {
  font-style: italic;
  color: #777;
}

#about-head marquee {
  margin-top: 30px;
  font-size: 1.2em;
  color: #333;
}

/* Feature Section */
#feature {
  display: flex;
  justify-content: space-between;
  padding: 50px 10%;
}

.fe-box {
  text-align: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  flex: 1;
  margin: 10px;
  transition: transform 0.3s;
}

.fe-box:hover {
  transform: translateY(-5px);
}

.fe-box img {
  width: 50px;
  margin-bottom: 15px;
}

.fe-box h6 {
  font-size: 1.2em;
  color: #333;
}

/* Newsletter Section */
#newsletter {
  background-color: #333;
  color: #fff;
  padding: 50px 10%;
  text-align: center;
}

#newsletter h4 {
  font-size: 2em;
  margin-bottom: 20px;
}

#newsletter p {
  font-size: 1.2em;
  line-height: 1.6;
  margin-bottom: 20px;
}

#newsletter .form input {
  padding: 10px;
  font-size: 1em;
  width: 60%;
  margin-right: 10px;
  border-radius: 5px;
  border: none;
}

#newsletter .btn {
  padding: 10px 20px;
  font-size: 1em;
  background-color: #e74c3c;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#newsletter .btn:hover {
  background-color: #c0392b;
}

/* Footer Section */
footer {
  background-color: #333;
  color: #fff;
  padding: 50px 10%;
  text-align: center;
}

footer .col {
  margin-bottom: 20px;
}

footer .col h4 {
  font-size: 1.5em;
  margin-bottom: 15px;
}

footer .col a {
  display: block;
  color: #fff;
  text-decoration: none;
  margin: 5px 0;
}

footer .col a:hover {
  text-decoration: underline;
}

footer .follow {
  margin-top: 20px;
}

footer .follow i {
  font-size: 1.5em;
  margin: 0 10px;
  cursor: pointer;
}

footer .follow i:hover {
  color: #e74c3c;
}

footer img {
  width: 100%;
  margin-top: 30px;
}

/* Media Queries */
@media (max-width: 768px) {
  #about-head {
      flex-direction: column;
      align-items: center;
  }

  #about-head img {
      width: 80%;
  }

  #about-head div {
      width: 80%;
      text-align: center;
  }

  #feature {
      flex-direction: column;
      align-items: center;
  }

  #newsletter .form {
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  #newsletter .form input {
      width: 80%;
      margin-bottom: 15px;
  }

  #navbar {
      display: none;
  }

  #mobile {
      display: block;
  }
}

@media (max-width: 480px) {
  #header {
      padding: 15px 0;
  }

  #about-head {
      padding: 20px 5%;
  }

  footer {
      padding: 30px 5%;
  }
}
#newsletter  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background-image: url(https://i.postimg.cc/R0Bs4qqt/b14.png);
    background-repeat: no-repeat;
    background-position: 20% 30%;
  background-color: #041e42;
}

#newsletter h4{
  color: #fff;
  font-weight: 700;
  font-size: 22px;
}

#newsletter p{
  color: #818ea0;
  font-weight: 600;
  font-size: 14px;
}

#newsletter p span{
  color: #ffbd27;
  }

#newsletter input{
  height: 3.125rem;
  width: 100%;
  font-size: 14px;
  padding: 0 1.25em;
  border: 1px solid transparent;
  border-radius: 4px;
  outline: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#newsletter button{
  background-color: #088178;
  color: #fff;
  white-space: nowrap;
  border-left-right-radius: 0;
  border-left-right-radius: 0; 
}

#newsletter .form{
  display: flex;
  width: 40%;
  
}
#

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}


footer .col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
  margin-left: 50px

}

footer .sec{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  
}

footer .logo{
  margin-bottom: 20px;
}

footer h4{
  font-size: 14px;
  padding-bottom: 20px
}

footer p{
  font-size: 13px;
  margin: 0 0 8px 0;
}


footer a{
  font-size: 13px;
  text-decoration: none;
  color: #222;
  margin-bottom: 10px;
}

footer .follow{
  margin-top: 20px
}

footer .follow i{
  color: #465b52;
  padding-right: 5px;
  cursor: pointer;
  
}

footer .follow i:hover, footer a:hover {
  color: #088178;
 
}

footer .install .row img{
  border: 1px solid #088178; 
  border-radius: 6px;
    
}

footer .install img{
  margin: 10px 0 15px 0
}


footer .copyright{
  width: 100%;
  text-align: center
   
}


/* Example for section with background */
.blog-header {
  background-image: url('https://img.freepik.com/free-photo/purchase-sale-discount-fashion-style_53876-15282.jpg?ga=GA1.1.1352781117.1743869418&semt=ais_hybrid&w=740'); /* Replace with actual image if needed */
  background-size: cover;        /* Makes the image cover the section */
  background-position: center;   /* Centers the image */
  background-repeat: no-repeat;  /* Prevents repeating */
  height: 40vh;                  /* Adjust as needed */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;                   /* Text color for contrast */
  text-align: center;
}





#blog{
  padding: 150px 150px 0 150px ;
}
#blog .blog-box{
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  padding-bottom: 90px; ;
}
#blog .blogimg{
  width: 50%;
  margin-right: 40px;
}
#blog img{
  width: 100%;
 height 300px;
  object-fit: cover;
}
#blog .blog-details{
  width: 70%;
 
} 
#blog .blog-details a{
 text-decoration: none;
 font-size: 11px;
 color: #000;
 font-weight: 700;
 position: relative;
}

#blog .blog-details a::after{
 content:"" ;
 width: 50px;
 height: 1px;
 background-color: #000;
 position: absolute;
 top: 4px;
 right: -60px;
}

#blog .blog-details a:hover::after {
 background-color: #088178;
}
#blog .blog-box h1{
  position: absolute;
  top: -40px;
  left: 0;
  font-size: 70px;
  font-weight: 700;
  color: #c9cbce;
  z-index: -9;
}

/*----------------------about page ----------*/
#shop-hero .about-header{
 background-image: url("https://img.freepik.com/premium-photo/composition-with-smartphone-used-digital-shopping-online-ordering_23-2151380462.jpg?ga=GA1.1.1352781117.1743869418&semt=ais_hybrid&w=740");
 background-repeat: no-repeat;  /* Prevents repeating */
}

#about-head{
  display: flex;
  align-items: center;
}
#about-head img{
  width: 50%;
  height: auto;
}
#about-head div{
 padding-left: 40px;

}
#contact-details{
  display: flex; 
  align-items: center;
  justify-content: space-between;
 }
 #contact-details .details{
   width: 40%;
 }
 #contact-details .details span,
 #form-details form span{
  font-size: 12px;
 }
 #contact-details .details h2,
 #form-details form h2{
   font-size: 26px ;
   line-height: 35px;
   padding: 20px 0;
 }
 #contact-details .details h3{
   font-size: 16px ;
   padding-bottom: 15px;
 }
 #contact-details .details li{
   list-style: none;
   display: flex;
   padding: 10px 0;
 }
 #contact-details .details li i{
   font-size: 14px ;
  padding-right: 22px;
 }
 #contact-details .details li p{
  margin: 0;
  font-size: 14px;
 }
 #contact-details .map{
   width: 55%;
   height: 400px;
 }
 #contact-details .map iframe{ 
   width: 100%;
   height: 350px;
 }
 
 
 
 
 #form-details form{
   width: 65%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 
 }
 
 #form-details form input,
 #form-details form textarea{
   width: 100%;
   padding: 12px 15px;
   outline: none;
   margin-bottom: 20px;
   border:  1px solid #e1e1e1;
 }
 
 #form-details form button{
   background-color: #38023d;
   color: #fff;
 }
 #form-details .people div {
    padding-bottom: 25px;
    display: flex;
    align-items: flex-start;
 }
 
 #form-details .people div img{
   width:65px;
   height: 65px;
   object-fit: cover;
   margin-right: 15px;
 }
 #form-details .people div p{
  margin: 0; 
  font-size: 13px;
   line-height:25px;
 
 }
 #form-details .people div p span{
   display: block;
   font-size: 16px;
   font-weight: 600;
   color: #000;
 }
 #cart table{
   width:100%;
   border-collapse: collapse;
   table-layout: fixed;
   white-space: nowrap;
 
 }
 #cart table img{
  width: 70px ;
 }
 #cart table td:nth-child(1){
  width: 100px;
  text-align: center ;
 }
 #cart table td:nth-child(2)
 {
   width: 100px;
   text-align: center;
 }
 #cart table td:nth-child(3)
 {
   width: 250px;
   text-align: center;
 }
 #cart table td:nth-child(4),
 #cart table td:nth-child(5),
 #cart table td:nth-child(6)
 {
   width: 150px;
   text-align: center;
 }
 #cart table td:nth-child(5) input{
   width: 70px;
  padding:10px 5px 10px 15px;
 }
 #cart table thead{
   border: 1px solid #e2e9e1;
  border-left: none;
    border-right: none;
 }
 #cart table thead td{
   font-weight:700;
   text-transform: uppercase;
   font-size: 13px;
   padding:18px 0;
 }
 #cart table  tbody td{
   font-size: 13px;
 }
 #Cart-add{
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
 
 }
 #coupon {
   width: 50%;
  margin-bottom:30px ;
 }
 
 #coupon h3{
   padding-bottom: 15px ;
 }
 #coupon h3{
   padding: 10px 20px;
   outline: none;
   width: 60%;
  margin-right: 10px ;
  border: 1px solid #e2e9e1;
 }
 
 /* Checkout Form Styling */
 #checkout-form {
   max-width: 500px;
   margin: 50px auto;
   padding: 30px;
   border-radius: 12px;
   box-shadow: 0 0 15px rgba(0,0,0,0.1);
   background-color: #ffffff;
   display: flex;
   flex-direction: column;
   gap: 20px;
 }
 
 #checkout-form input {
   padding: 14px;
   border: 1px solid #ccc;
   border-radius: 8px;
   font-size: 16px;
   transition: border-color 0.3s ease;
 }
 
 #checkout-form input:focus {
   border-color: #7b68ee;
   outline: none;
 }
 
 #checkout-form button {
   padding: 14px;
   font-size: 16px;
   border: none;
   background-color: #7b68ee;
   color: white;
   border-radius: 8px;
   cursor: pointer;
   transition: background-color 0.3s ease;
 }
 
 #checkout-form button:hover {
   background-color: #5a4cd6;
 }
 h2 {
   text-align: center;
   margin-top: 30px;
   font-size: 28px;
   color: #333;
 }
 
 /*style of check-out file*/
 {
     /* Reset & base */
     * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
 
     body {
       background-color: #f8f8fb;
       color: #333;
     }
 
     h2 {
       text-align: center;
       margin-top: 40px;
       font-size: 32px;
       color: #222;
     }
 
     /* Form container */
     #checkout-form {
       max-width: 500px;
       background: #fff;
       margin: 40px auto;
       padding: 30px 35px;
       border-radius: 16px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
       display: flex;
       flex-direction: column;
       gap: 20px;
       animation: slideIn 0.4s ease-out;
     }
 
     #checkout-form input {
       padding: 14px;
       border: 1px solid #ccc;
       border-radius: 10px;
       font-size: 16px;
       transition: all 0.3s ease;
     }
 
     #checkout-form input:focus {
       border-color: #7b68ee;
       box-shadow: 0 0 0 3px rgba(123, 104, 238, 0.2);
       outline: none;
     }
 
     #checkout-form button {
       padding: 14px;
       font-size: 16px;
       border: none;
       background-color: #7b68ee;
       color: white;
       border-radius: 10px;
       cursor: pointer;
       transition: background-color 0.3s ease;
     }
 
     #checkout-form button:hover {
       background-color: #6a5acd;
     }
 
     /* Responsive */
     @media (max-width: 600px) {
       #checkout-form {
         margin: 20px;
         padding: 25px;
       }
 
       h2 {
         font-size: 26px;
       }
     }
 
     /* Animation */
     @keyframes slideIn {
       from {
         opacity: 0;
         transform: translateY(30px);
       }
       to {
         opacity: 1;
         transform: translateY(0);
       }
     }
  
   }
 /*auth paages*/
.auth-container {
  max-width: 400px;
  margin: 80px auto;
  padding: 30px;
  background: #fefefe;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  border-radius: 12px;
  text-align: center;
}

.auth-container h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #222;
}

.auth-container form {
  display: flex;
  flex-direction: column;
}

.auth-container input {
  padding: 12px;
  margin: 8px 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
}

.auth-container button {
  padding: 12px;
  margin-top: 12px;
  background-color: #000;
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.auth-container button:hover {
  background-color: #444;
}

.auth-container p {
  margin-top: 15px;
  font-size: 14px;
}

.auth-container a {
  color: #007BFF;
  text-decoration: none;
}

.auth-container a:hover {
  text-decoration: underline;
}
 /* Form container */
 #checkout-form {
  max-width: 500px;
  background: #fff;
  margin: 40px auto;
  padding: 30px 35px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: slideIn 0.4s ease-out;
}
/* Horizontally aligned product section */
.shop-container {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  padding: 20px 0;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

/* Product Card Styling */
.product-card {
  flex: 0 0 auto;
  width: 250px;
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  scroll-snap-align: start;
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Optional: Smooth scrollbar */
.shop-container::-webkit-scrollbar {
  height: 8px;
}
.shop-container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}
.shop-container::-webkit-scrollbar-track {
  background: #eee;
}
.product-card button {
  background-color: #ff5c5c; /* Soft red */
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.product-card button:hover {
  background-color: #e04b4b;
  transform: scale(1.05);
}
#cart-container {
  padding: 30px;
  background: #f9f9f9;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}

#cart-summary {
  text-align: right;
  margin-top: 20px;
}

.checkout-btn {
  background-color: #27ae60;
  color: white;
  padding: 12px 25px;
  border: none;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.checkout-btn:hover {
  background-color: #219150;
}
.checkout-section {
  padding: 40px;
  max-width: 1200px;
  margin: auto;
}

.checkout-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.checkout-form, .cart-summary {
  flex: 1;
  min-width: 300px;
  background: #f8f8f8;
  padding: 20px;
  border-radius: 12px;
}

.checkout-form input {
  width: 100%;
  margin-bottom: 15px;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.checkout-btn {
  background-color: #27ae60;
  color: white;
  padding: 12px 25px;
  border: none;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.checkout-btn:hover {
  background-color: #219150;
}
.product-card img {
  width: 200px; /* or try 150px */
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
}
.product-card {
  width: 220px;
  padding: 15px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin: 10px;
  border-radius: 12px;
  transition: transform 0.2s;
}

.product-card:hover {
  transform: scale(1.03);
}

 
 /* Tips Section */
#tips {
  padding: 40px 80px;
  background-color: #fff;
}

#tips .tip-box {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
}

.tip-item {
  flex: 1 1 30%;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.tip-item:hover {
  transform: translateY(-5px);
}

.tip-item img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
}

.tip-item h3 {
  font-size: 18px;
  color: #088178;
  margin-bottom: 10px;
}

.tip-item p {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}
.cart-section {
  padding: 40px;
  max-width: 1000px;
  margin: auto;
  font-family: 'Lexend Deca', sans-serif;
}

.cart-section h2 {
  font-size: 28px;
  margin-bottom: 20px;
  text-align: center;
}

.cart-item {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s;
}

.cart-item:hover {
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

.cart-item img {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
  margin-right: 20px;
}

.item-details {
  flex: 1;
}

.item-details h4 {
  font-size: 20px;
  margin: 0;
  font-weight: 600;
}

.item-details p {
  margin: 8px 0;
  color: #555;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}

.quantity-control button {
  width: 32px;
  height: 32px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
}

.quantity-control input {
  width: 40px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px;
}

.remove-item {
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 10px;
}

.remove-item:hover {
  background-color: #e03e3e;
}

#cart-summary {
  text-align: right;
  margin-top: 30px;
}

#cart-summary h3 {
  font-size: 22px;
  margin-bottom: 15px;
}

.checkout-btn {
  padding: 12px 24px;
  background-color: #2b7a78;
  color: white;
  border: none;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
}

.checkout-btn:hover {
  background-color: #205f5d;
}
.remove-item {
  background-color: #e74c3c;
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.remove-item:hover {
  background-color: #c0392b;
}
.checkout-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding: 12px 0;
  font-family: 'Lexend Deca', sans-serif;
}

.checkout-qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkout-qty button {
  background-color: #222;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.checkout-qty button:hover {
  background-color: #444;
}
.empty-cart-btn {
  background-color: #ff4444;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  margin-top: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.empty-cart-btn:hover {
  background-color: #cc0000;
}
.quantity-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quantity-control button {
  padding: 4px 8px;
  font-size: 18px;
  cursor: pointer;
}

.quantity-control input {
  width: 40px;
  text-align: center;
  border: none;
  background: #f2f2f2;
}
.cart-section {
  padding: 40px;
  background-color: #f9f9f9;
}

.cart-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.cart-box, .checkout-form-box {
  background: #fff;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  flex: 1 1 400px;
  max-width: 500px;
}

.cart-title {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #333;
}

.cart-items .cart-item {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.cart-item img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  margin-right: 15px;
}

.item-details {
  flex: 1;
}

.item-details h4 {
  font-size: 1rem;
  margin-bottom: 5px;
}

.item-details p {
  margin: 4px 0;
  color: #555;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.quantity-control button {
  background-color: #ddd;
  border: none;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
}

.quantity-control input {
  width: 40px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.remove-item {
  margin-top: 10px;
  background: #ff5c5c;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}

.cart-summary {
  margin-top: 20px;
  text-align: right;
}

.cart-summary h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.checkout-btn {
  padding: 10px 20px;
  background-color: #222;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
}

.checkout-form-box h3 {
  margin-bottom: 20px;
  font-size: 1.5rem;
}

.checkout-form-box form input {
  width: 100%;
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.checkout-form-box form button {
  width: 100%;
  background-color: #007bff;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.tips-section {
  padding: 4rem 2rem;
  background-color: #f9f9f9;
}

.tips-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  max-width: 1200px;
  margin: auto;
}

.tips-image img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.tips-content {
  flex: 1;
  min-width: 300px;
}

.tips-content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #333;
}

.tips-content ul {
  list-style: disc;
  padding-left: 1.5rem;
  color: #555;
  font-size: 1.1rem;
  line-height: 1.7;
}
#blog .blog-box{
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  padding-bottom: 90px; ;
}
#blog .blogimg{
  width: 50%;
  margin-right: 40px;
}
#blog img{
  width: 100%;
 height 300px;
  object-fit: cover;
}
#blog .blog-details{
  width: 70%;
 
} 
#blog .blog-details a{
 text-decoration: none;
 font-size: 11px;
 color: #000;
 font-weight: 700;
 position: relative;
}

#blog .blog-details a::after{
 content:"" ;
 width: 50px;
 height: 1px;
 background-color: #000;
 position: absolute;
 top: 4px;
 right: -60px;
}

#blog .blog-details a:hover::after {
 background-color: #088178;
}
#blog .blog-box h1{
  position: absolute;
  top: -40px;
  left: 0;
  font-size: 70px;
  font-weight: 700;
  color: #c9cbce;
  z-index: -9;
}
/* Base Styles */
.tips-section {
  padding: 40px 20px;
  background-color: #f9f9f9;
  transition: background-color 0.3s, padding 0.3s;
}

.tips-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.tips-image img {
  width: 250px;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s;
}

.tips-content h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 15px;
  font-family: 'Arial', sans-serif;
}

.tips-content ul {
  list-style-type: disc;
  padding-left: 20px;
  color: #555;
}

.tips-content li {
  margin: 10px 0;
  font-size: 16px;
}

/* Hover Effects */
.tips-image img:hover {
  transform: scale(1.05);
}

.tips-section:hover {
  background-color: #e6e6e6;
}

/* Light Theme */
.light-theme .tips-section {
  background-color: #fff;
  color: #000;
}

.light-theme .tips-content h2 {
  color: #222;
}

/* Dark Theme */
.dark-theme .tips-section {
  background-color: #333;
  color: #fff;
}

.dark-theme .tips-content h2 {
  color: #ddd;
}
/* Base Styles */
.tips-section {
  padding: 40px 20px;
  background-color: #f9f9f9;
  transition: background-color 0.3s, padding 0.3s;
}

.tips-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.tips-image img {
  width: 250px;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s;
}

.tips-content h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 15px;
  font-family: 'Arial', sans-serif;
}

.tips-content ul {
  list-style-type: disc;
  padding-left: 20px;
  color: var(--text-color, #555); /* Default text color */
}

.tips-content li {
  margin: 10px 0;
  font-size: 16px;
  font-family: var(--font-family, 'Arial', sans-serif); /* Default font family */
}

/* Hover Effects */
.tips-image img:hover {
  transform: scale(1.05);
}

.tips-section:hover {
  background-color: #e6e6e6;
}

/* Light Theme */
.light-theme .tips-section {
  background-color: #fff;
  color: #000;
}
/* Example for section with background */
/* Tips Section */
.tips-section {
  background-color: #f9f9f9;
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}

.tips-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.tips-image {
  flex: 1 1 400px;
}

.tips-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tips-content {
  flex: 1 1 400px;
  padding: 30px;
}

.tips-content h2 {
  font-size: 28px;
  margin-bottom: 20px;
  font-family: 'Lexend Deca', sans-serif;
}

.tips-content ul {
  list-style-type: square;
  padding-left: 20px;
  font-size: 16px;
  color: #333;
}

/* General Tip Box Styles */
.tip-box {
  display: flex;
  flex-direction: row;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  margin: 20px auto;
  max-width: 1000px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  gap: 20px;
  align-items: center;
}

.tip-image img {
  width: 250px;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

.blog-details, .tip-text {
  flex: 1;
}

.read-more,
.continue-reading {
  color: #4b0082;
  font-weight: bold;
  margin-top: 10px;
  text-decoration: none;
  display: inline-block;
}

/* About Hero */
.about-hero {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 300px;
}

/* Cart Section */
.cart-section {
  padding: 40px 5%;
  background: #f9f9f9;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cart-item {
  display: flex;
  flex-direction: row;
  gap: 20px;
  background: #fff;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.cart-item img {
  width: 100px;
  height: auto;
  border-radius: 8px;
}

.item-details {
  flex-grow: 1;
}

.qty-controls,
.quantity-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Buttons */
.empty-cart-btn,
.checkout-btn,
.place-order-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  margin-top: 10px;
  display: inline-block;
}

.empty-cart-btn {
  background: #eee;
  color: #333;
}

.empty-cart-btn:hover {
  background: #ccc;
}

.checkout-btn {
  background: #222;
  color: white;
}

.checkout-btn:hover {
  background: #444;
}

.place-order-btn {
  background-color: #28a745;
  color: white;
  transition: background-color 0.3s ease;
}

.place-order-btn:hover {
  background-color: #218838;
}

/* Responsive for Tablets */
@media screen and (max-width: 768px) {
  .tip-box,
  .cart-item,
  .tips-container {
    flex-direction: column;
    text-align: center;
  }

  .tip-image,
  .tip-image img,
  .cart-item img {
    width: 100%;
    height: auto;
    margin-right: 0;
  }

  .tip-text,
  .blog-details,
  .item-details {
    padding: 0 10px;
    text-align: center;
  }

  h2, h3, h4 {
    font-size: 1.2rem;
  }

  p {
    font-size: 1rem;
  }

  .qty-controls,
  .quantity-controls {
    justify-content: center;
  }

  .empty-cart-btn,
  .checkout-btn {
    width: 100%;
  }
}

/* Mobile - Extra Small Devices */
@media screen and (max-width: 480px) {
  .cart-section, .tips-section {
    padding: 20px 10px;
  }

  .form input,
  .form button {
    width: 100%;
    margin-bottom: 10px;
  }

  .read-more,
  .continue-reading {
    font-size: 0.9rem;
  }

  h2, h3, h4 {
    font-size: 1rem;
  }
}