@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
        body {
          font-family: 'Poppins', sans-serif;
          
          margin: 0;
          padding: 0;
          background: radial-gradient(circle at top left, #57aa4c, transparent 10%), 
                radial-gradient(circle at top right, #87cefa, transparent 15%), 
                radial-gradient(circle at bottom left, #87cefa, transparent 10%), 
                radial-gradient(circle at bottom right, #87cefa, transparent 10%);
    background-color: #ffffff; /* Fallback color */
         
        }
    
        
    
        nav {
          font-size: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px 30px;
          top: 0;
          width: 100%;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          box-sizing: border-box;
          position: fixed;
          z-index: 1000;
        

        }
        nav.fixed-nav {
          position: fixed;
          top: 0;
          left: 0;
          margin: 0;
        }
    
      
    
        .navlogo {
          border-radius: 50%;
          height: 50px;
          width: 50px;
          object-fit: cover;
        }
    
/* Menu button */
#menu-toggle {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    margin-left: auto; /* Push to the right end */
    display: block; /* Visible initially for mobile */
    padding-right: 15px; /* Added space between buttons */
}
    /* Theme toggle button */
#theme-toggle {
    z-index: 1000;
    position: fixed;
    left: 95%;
    top: 90%;
    background: none;
    border: none;
    font-size: 20px;
    background-color: green;
    color: white;
    border-radius: 10cqmax;
    cursor: pointer;
    padding: 5px 10px; /* Added padding for better spacing */
}
#theme-toggle:hover{
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

        nav .nav-links {
         
         
          display: none;
          flex-direction: column;
          position: absolute;
          top: 60px;
          left: 205px;
          padding: 10px;
          border-radius: 5px;
        }
    
        nav .nav-links a {
          margin: 0.5rem 0;
          padding: 0.5rem 1rem;
          text-decoration: none;
          transition: background-color 0.3s;
          font-weight: lighter;
          border-radius: 5px;
          
        }
    
        nav a:hover {
          font-weight: bolder;
        }
    
        @media (min-width: 768px) {
          #menu-toggle {
            display: none;
          }
    
          nav .nav-links { 
            display: flex;
            position: static;
            flex-direction: row;
            background: none;
            box-shadow: none;
            padding: 0;
          }
    
          nav .nav-links a {
            margin: 0 1rem;
          }
        }
     
       
        .whatsapp img{
    width: 45px; /* Set the width of the image */
  height: 45px; /* Set the height of the image */
 
  border-radius: 50%; /* Makes the image round */
 
}
.whatsapp{
    z-index: 1000;
    position: fixed;
    left: 95%;
    top: 80%;
    border-radius: 50%;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}
.whatsapp:hover{
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
        .collection-description {
          text-align: center;
          margin-bottom: 2rem;       
        }
    
        .product-card {
            width: 50%;
          border: 1px solid #ddd;
          height: 500px;
          border-radius: 1cqmax;
          overflow: hidden;
          text-align: center;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          transition: transform 0.2s, box-shadow 0.2s;
        }
.product-card img{ 
  width: 100%; /* Ensures the image takes up the full width of the parent div */
  height: 70%; /* Ensures the image takes up the full height of the parent div */
  object-fit: contain; /* Scales the image to cover the div while maintaining aspect ratio */
  display: block; /* Removes any extra space caused by inline elements */
}
        .product-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
    
        footer {
          background-color: #333;
          color: white;
          text-align: center;
          padding: 1rem;
          margin-top: 2rem;
        }
        h1{
          font-size: 50px;
        }
@media (max-width:470px) {
  h1{
    font-size: 30px;
  }
}

@media (max-width:470px) {
  .whatsapp{
    left: 87%;
  }
  #theme-toggle{
    left:87%;
  }
}
        .form {
            border-radius: 20px;
    box-shadow: 0 0 15px 1px rgba(95, 48, 48, 0.8); /* Use consistent RGBA for softer shadow */
    padding: 20px 20px 2em; /* Combined padding */
    
   width: 100%;
    height: auto; /* Remove fixed height for better responsiveness */
    
}

/* Input and textarea styling */
 input, textarea {
    border-radius: 5px;
    width: 50%;
    height: 30px;
    margin: 10px 0; /* Add vertical spacing */
    padding: 5px; /* Add padding inside the fields */
    color: white;
    background: linear-gradient(180deg, rgba(2, 2, 2, 0.9), rgba(21, 20, 20, 1));
    border: none; /* Remove default borders */
    outline: none; /* Remove focus outline */
}

textarea {
    height: 100px; /* Higher height for text areas */
    resize: vertical; /* Allow resizing only vertically */
}
.review{
  width: 99%;
  margin-top: 60px;
  text-align: center;
}
.review button{
  cursor: pointer;
  margin-top: 10px;
  padding: 10px;
  background-color:#2cbb3f;
  border: none;
  border-radius: 0.3cqmax;
  font-weight: bold;
}
.review button:hover{
  background-color: cornflowerblue;
}
@media (max-width:470px) {
  .form{
    width: 89%;
  }
}
/* Send button styling */
#Send {
    background-color: grey; /* Neutral grey */
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Added transform for interaction */
}

#Send:hover {
    background-color: #6e6e6e; /* Slightly lighter grey */
    color: white;
    transform: scale(1.02); /* Small scale effect on hover */
}

#Send:active {
    background-color: #1e1e1e; /* Darker grey for active state */
    transform: scale(0.98); /* Pressed effect */
}

/* Optional: Link styling */
.send-button {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color */
    
}

/* Contact Section */


#contact h2 {
    margin-bottom: 30px;
    text-align: center;
}
.review{
    display: flex;
    margin-left: 7px;
}
@media (max-width:468px ) {
    .review{
      
        display: contents;
    }
}
.CONTACT {
    
    justify-content: space-between;
    flex-wrap: wrap;
    
}

.CONTACT .office {
    flex: 1;
    min-width: 300px;
}

.office a:hover{
    font-weight: bolder;
}

.office{
    text-align: left;
}

.social-icon {
   height: 3%;
   width: 3%;
}

.social-icon:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
  @media (max-width:470px) {
    .social-icon{
      height: 40px;
   width:auto ;
    }
  }    
     
      
      .pricing {
        text-align: center;
        padding: 40px 20px;
      }
      
      .pricing-table {
        display: flex;
        justify-content: center;
        gap: 20px;
      }
      
      .plan {
        
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        width: 250px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      
      .plan h3 {
        margin-bottom: 10px;
        font-size: 1.5rem;
      }
      
      .plan p {
        font-size: 1.2rem;
        margin: 10px 0;
      }
      
      .plan ul {
        list-style: none;
        padding: 0;
        margin-bottom: 20px;
      }
      
      .plan li {
        margin: 5px 0;
      }
      
      .plan button {
        background: #4a90e2;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s ease;
      }
      
      .plan button:hover {
        background: #9013fe;
      }
      
      
      

     
/* Dark mode */
:root {
    --background-color: #e4eef5;
    --text-color: #000000; /* Set text color to black for light mode */
    --nav-bg-color: #e4eef5;
    --card-bg-color: #333;
    --card-text-color: #e0e0e0;
    --footer-bg-color: #333;
    --footer-text-color: #eee3e3;
    
}

.dark-mode {
    --background-color: #333;
    --text-color: #e0e0e0;
    --nav-bg-color: #333;
    --card-bg-color: #e4eef5;
    --card-text-color: #000000;
    --footer-bg-color: #333;
    --footer-text-color: #e0e0e0;
    
}

body {
    background-color: var(--background-color);
    color: var( --text-color);
}
.menu-toggle{
    color:var(--text-color);
}
.Custom-Dropshipping{
  background-color: var(--background-color);
  color: var(  --text-color);
}
.plan{
  background-color: var( --card-bg-color);
  color: var(--card-text-color);
}
nav {
    background-color: var(--nav-bg-color);
    color: var(--text-color);
}
.nav-links a{
    color: var(--text-color);
    
}
 nav .nav-links{
      background-color: var(--background-color);
 }
#menu-toggle{
    color:var(--text-color);
}

#search-btn{
    background-color: var(--background-color);
    color: var(--text-color);
}

.faq-section{
  background-color: var( --card-bg-color);
  color: var(--card-text-color);
}
footer {
    background-color: var(--footer-bg-color);
    color: var(--footer-text-color);
}
.how-it-works{
  background-color: var( --card-bg-color);
  color: var(--card-text-color);
}
.centered-box {
          margin-top:30px ;
            text-align: center;
            padding: 20px;
            
           
           overflow: hidden;
           height: 75vh;
           
           animation: fadeIn 2s ease-out forwards; /* 'forwards' keeps the final state */
            opacity: 0;
            
           
           
        }
        .centered-box h1 {
          font-size: 3.3rem;
            margin-bottom: 10px;
            line-height: 1.4;
            animation: slideIn 1.5s ease-out forwards;
        }
        .centered-box p {
          font-size: 1.3rem;
            line-height: 1.8;
            margin: 0;
            animation: slideIn 1.5s ease-out 0.5s forwards; /* Add delay with 'forwards' */
        }
        
        
        @keyframes fadeIn {
            0% {
                opacity: 0;
                transform: scale(0.9);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes slideIn {
            0% {
                opacity: 0;
                transform: translateY(30px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @media (max-width:470px) {
         
          .centered-box h1{
            font-size: 30px;
          }
         
        }
        .vertical-line {
            width: 1px; /* Line thickness */
            height: 80px; /* Line height */
            background-color: #000; /* Line color */
            margin: 0 auto; /* Center the line */
        }
        .how-it-works {
          text-align: justify;
            max-width: 1200px;
            margin: 50px auto;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 20px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .how-it-works img {
            width: 50%;
            border-radius: 12px 0 0 12px;
        }

        .how-it-works-content {
            padding: 20px;
            max-width: 50%;
        }

        .how-it-works-content h2 {
            font-size: 2rem;
            color: #4facfe;
            margin-bottom: 15px;
        }

        .how-it-works-content p {
            font-size: 1.2rem;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .how-it-works-content button {
         
            padding: 10px 20px;
            font-size: 1rem;
            background: #4facfe;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .how-it-works-content button:hover {
            background: #00c6ff;
        }
        @media (max-width:470px) {
          .how-it-works{
            flex-direction: column;
            text-align: center;
            max-width: 470px;
            padding: 0%;
          }
          .how-it-works-content{
            padding: none;
          }
      }
      
    .custom-dropshipping {
      display: flex;
        text-align: center;
        padding: 20px auto;
        border: px solid #ddd;
        border-radius: 20px;
        width: 100%;
       
        margin: 5% auto;
        

    }
    .Custom-Dropshipping{
      margin-left: 10%;
     
      border-radius: 1cqmax;
      padding: 2px 30px;
     box-shadow:0 0 3px #2cbb3f;
    }
    .discounted-price {
        color: blue;
        font-weight: bold;
    }
    .limited-offer {
        color: #ff0000;
        font-weight: bold;
    }
    select, .buy-button {
        display: block;
        width: 100%;
        margin: 10px 0;
        padding: 10px;
        border-radius: 10px;
        border: 1px solid #ccc;
    }
    .buy-button {
        background-color: #2cbb3f;
        color: white;
        font-size: 16px;
        cursor: pointer;
    }
    .buy-button:hover {
        background-color: #4facfe;
    }

    .Swiper-Container{
      margin-left: 120px;
    }
    .swiper-container {
         width: 100%;
  max-width: 800px; /* Adjust as needed */
  margin: auto;
   
}
.swiper-wrapper{
  display: flex;
}

.swiper-slide img {
    width: 100%;
    height: auto;
}
.swiper-thumbs {
    margin-top: 10px;
    
}

.swiper-thumbs .swiper-slide img {
    width: 100%;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
}
.swiper-thumbs .swiper-slide-thumb-active img {
    opacity: 1;
    border: 2px solid #000;
}  

.swiper-slide img {
  width: 100%; /* Ensures images take up full slide width */
  height: 400px; /* Set a fixed height for consistency */
  object-fit: cover; /* Ensures images maintain aspect ratio and fill the space */
}

.swiper-thumbs .swiper-slide img {
    border-radius: 1cqmax;
    border: 1px  solid black;
  width: 100%;
  height: 100px; /* Adjust thumbnail height */
  object-fit: cover;
}
.swiper-button-next,
.swiper-button-prev {
  color: #fff; /* Change arrow color if needed */
}

.thumbs-next,
.thumbs-prev {
  color: #000; /* Different color for thumbnail navigation */
}
@media (max-width:470px) {
    .Swiper-Container{
        margin: 0px;
    }
      .swiper-container {
    width: 300px;
    height: auto;
    
}
.swiper-slide img {
  width: 90%; /* Ensures images take up full slide width */
  height: 200px; /* Set a fixed height for consistency */
  object-fit: cover; /* Ensures images maintain aspect ratio and fill the space */
}
}
@media (max-width:470px) {
  .custom-dropshipping{
    flex-direction: column;
  }

        .Custom-Dropshipping{
      margin-left: 0%;
      margin: 50px 0;
    }
}

        .faq-section {
         
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: transparent;
    border-radius: 12px;
    
}

.faq-header {
  font-weight: bold;
    font-size: 2rem;
    color: #4facfe;
    text-align: center;
    margin-bottom: 20px;
}

.faq-item {
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

.faq-question {
  background-color: #2d3133;
    padding: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    color: wheat;
    cursor: pointer;
    position: relative;
}

.faq-question:hover {
    background: #f1f1f1;
    color: #000;
}

.faq-answer {
  border-left:4px solid #4facfe;
    text-align: justify;
    padding: 0 15px 15px 15px;
    font-size: 1rem;
    display: none;
    color: #000;
    animation: faq-answer 0.3s ease-in-out forwards;
}

@keyframes faq-answer {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.faq-question::after {
    content: '+';
    position: absolute;
    right: 20px;
    font-size: 1.5rem;
    color: #0b0b0c;
}

.faq-item.active .faq-question::after {
    content: '-';
}

.faq-item.active .faq-answer {
    display: block;
}

     
        .mobile-frame, .laptop-frame {
            width: 250px;
            height: 500px;
            margin: auto;
            border-radius: 40px;
            border: 10px solid black;
            overflow: hidden;
            position: relative;
            background-color: white;
        }
        .laptop-frame {
            width: 600px;
            height: 500px;
            border-radius: 20px;
        }
        .image-container {
            width: 100%;
            height: 800px;
            position: absolute;
            top: 0;
            transition: transform 3s ease-in-out;
        }
        .mobile-frame:hover .image-container, .laptop-frame:hover .image-container {
            transform: translateY(-88%);
        }
        .mobile-frame:hover .image-container {
            transform: translateY(-200%);
        }
        .image-container img {
            width: 100%;
            display: block;
        }
        .demo-accounts{
        display: flex;
        
      }
        @media (max-width:470px) {
          .demo-accounts{
            flex-direction: column;
          }
          .mobile-frame, .laptop-frame {
            width: 200px;
            height: 350px;
            margin: auto;
            border-radius: 3cqmax;
            border: 5px solid black;
            overflow: hidden;
            position: relative;
            background-color: white;
        }
        .laptop-frame {
            width: 300px;
            height: 350px;
            border-radius: 20px;
        }
        .mobile-frame:hover .image-container, .laptop-frame:hover .image-container {
            transform: translateY(-32%);
        }
        .mobile-frame:hover .image-container {
            transform: translateY(-168%);
        }
        }
#overview{
  padding:70px 100px;
}
@media (max-width:470px) {
  #overview{
    padding: 12%;
    text-align: center;
  }
}
.overview1{
  display: flex;
}
.overview1 img{
  height: 25vw;
  width: auto;
}
@media (max-width:470px) {
  .overview1{
    flex-direction: column;
  }
  .overview1 img{
    height:200px;
    width: auto;
  }
}
.overview2{
  display: flex;
}
.overview2 img{
  height: 25vw;
  width: auto;
}
@media (max-width:470px) {
  .overview2{
    flex-direction: column-reverse;
  }
  .overview2 img{
    height:200px;
    width: auto;
  }
}
.overview3{
  display: flex;
}
.overview3 img{
  height: 25vw;
  width: auto;
}
@media (max-width:470px) {
  .overview3{
    flex-direction: column;
  }
  .overview3 img{
    height:200px;
    width: auto;
  }
}
.overview4{
  display: flex;
}
.overview4 img{
  height: 25vw;
  width: auto;
}
@media (max-width:470px) {
  .overview4{
    flex-direction: column-reverse;
  }
  .overview4 img{
    height:200px;
    width: auto;
  }
}
.store{
  position: fixed;
  left: 43%;
  top: 90%;
  z-index: 1000;
  background-color: #2cbb3f;
  border: none;
  padding: 10px;
  font-weight: bolder;
  font-size: 20px;
  border-radius: 0.6cqmax;
  cursor: pointer;
}
.store:hover{
  background-color: #4facfe;
  transform:translateY(-6%);
}
@media (max-width:470px) {
  .store{
    left: 25%;
    padding: 8px;
  }
}



.form {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
    margin-left: 55px;
}
@media (max-width:470px){
    .form {
        width: 90%;
    margin-left: 0px;
}
}
input, textarea {
    width: 90%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.form button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    width: 100%;
}

.form button:hover {
    background-color: #0056b3;
}

   .stars {
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-end;
        }
        .stars input {
            display: none;
        }
        
          .stars label {
            font-size: 25px;
            color: gray;
            cursor: pointer;
            transition: color 0.3s;
        }
        .stars input:checked ~ label,
        .stars label:hover,
        .stars label:hover ~ label {
            color: gold;
        }
#reviewsContainer {
    width: 100%;
    max-width: 500px;
}

.review-item {
  
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    
    display: none;
}

.review-item.visible {
    display: block;
}

.deleteBtn {
    background-color: red;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.deleteBtn:hover {
    background-color: darkred;
}

#seeMoreBtn {
    margin-left: 38px;
    background-color: #28a745;
    color: white;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 10px;
    width: 100%;
    max-width: 500px;
}

#seeMoreBtn:hover {
    background-color: #218838;
}