* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* mian image */
  .slogan{
    font-weight: 600;
    font-size: large;
    letter-spacing: 10px;    
  }  
    .padd{
      top: 50px;
      position: relative;
    }
    .main_div div{

      height: 33.33%;
    }
    
  .main-img img{
    height: 100px;
    width: 500px;
  }
  
  .main-img{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
    .div1 {
    background: #a7c8f9;
    font-size: 25px;
    }
    
    .div2 {
    background: #ffcbdc;
    font-size: 25px;
    }
    
    .div3{
    background: #564740;
    font-size: 25px;
    }
   
  
  
    .my-product-details {
      text-align: left;
      }
      
      
      /* //cat 1 icon */
      
      .btn-icon {
      background-color: white;
      border: 1px solid #dee2e6;
      border-radius: 50%;
      margin-left: 8px;
      margin: 0 20px;
      }
      
      .btn-rounded {
      border-radius: 20px;
      
      }
      
  /* head text */
  .head-text{
    font-size: 30px;
    background: black;
  }
  
  nav {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    z-index: 100;
    }
    
    nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    }
    
    nav ul li {
    margin: 0 15px;
    }
    
    nav ul li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 18px;
    }
  /* styles.css */
  
  .navbar-nav .nav-link i {
    color: black;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    padding: 8px;
    border: 1px solid gray;
  }
  
  .go-to-collection a.btn {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid black;
    color: black; /* Button text color */
    text-decoration: none;
    border-radius: 5px;
    transition: color 0.3s ease-in-out;
    background-color: lightslategray;
   
  }
  
  .go-to-collection a.btn:hover {
   /* Button background color on hover */
   color: white;
  }
  
  .pasimage{
    filter: grayscale(100%) brightness(100%) invert(100%) sepia(0%) saturate(100%) hue-rotate(0deg);
  }
  
  
  h1 {
    font-family: monospace;
    font-weight: 25px;
  
  }
  
  h4 {
    font-family: monospace;
  }
  
  h5 {
    font-family: 'Courier New', monospace;
    color: black;
  }
  
  h6 {
    font-family: 'Courier New', monospace;
    color: black;
  }
  
  .card:hover {
    box-shadow: 0 4px 8px rgba(15, 14, 14, 0.9);
    /* Adjust the values as needed */
    transition: box-shadow 0.3s ease;
    /* Optional: Add a smooth transition effect */
  }
  
  .card {
    border-radius: 10px;
    /* Set border radius for the card */
    overflow: hidden;
    /* Ensure the card doesn't show content outside the border radius */
  }
  
  .social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    /* Adjust the margin as needed */
  }
  
  .social-icons i {
    margin: 0 10px;
    /* Adjust the margin between icons as needed */
    font-size: 34px;
    /* Adjust the font size as needed */
    cursor: pointer;
  }
  
  /* Add color styles for each social media icon */
  .social-icons .fab.fa-facebook {
    color: #1877f2;
    /* Facebook blue color */
  }
  
  .social-icons .fab.fa-instagram {
    color: #bc2a8d;
    /* Instagram pink color */
  }
  
  .social-icons .fab.fa-twitter {
    color: #1da1f2;
    /* Twitter blue color */
  }
  
  .social-icons .fab.fa-telegram {
    color: #0088cc;
    /* Telegram blue color */
  }
  
  .social-icons .fab.fa-pinterest {
    color: #bd081c;
    /* Pinterest red color */
  }
  
  .social-icons .fab.fa-linkedin-in {
    color: #0077b5;
    /* LinkedIn blue color */
  }
  
  /* Custom styles for search button and newsletter button */
  
  .fcontainer {
    width: 100% !important;
  }
  
  /* Add this style to your existing style.css or in the head of your HTML document */
  .card-details {
    padding: 15px;
    /* Add padding to the card details for better spacing */
  }
  
  .card-title {
    margin-bottom: 5px;
    /* Adjust the margin between product name and star rating */
  }
  
  .star-rating {
    margin-bottom: 10px;
    /* Adjust the margin between star rating and price */
  }
  
  .price {
    font-size: 18px;
    /* Adjust the font size of the price */
  }
  
  /* Adjust the margin between price and cart icon */
  .d-flex.align-items-center:last-child {
    margin-bottom: 0;
  }
  
  .card {
    border: 1px solid black;
  }
  
  /* cart icon */
  .cart-icon {
    background-color: #e8f6ea;
    color: black !important;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    /* Optional: Add padding for better visual appearance */
  }
  
  /* contact us part  */
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form input[type="number"],
  .contact-form textarea {
    border-radius: 10px;
    background-color: #e6f7ff;
    border: 1px solid #b3d9ff;
    padding: 8px;
    margin-bottom: 16px;
    width: 100%;
    padding-left: 24px;
    /* Adjust this value to make space for the icon */
    box-sizing: border-box;
  }
  
  .contact-form textarea {
    resize: vertical;
    /* Allow vertical resizing of the textarea */
  }
  
  .contact-form button {
    background-color: #e6f7ff;
    color: black;
    padding: 10px 15px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    margin-top: 10px;
    width: 30%;
    border: 1px solid gray;
    transition: 0.3s ease-in;
  }
  
  .contact-form button:hover {
    color: black;
    border: 1px solid black;
  }
  
  .contact-form label {
    display: none;
    /* Hide the labels */
  }
  
  .contact-form input[type="text"]::placeholder,
  .contact-form input[type="email"]::placeholder,
  .contact-form textarea::placeholder {
    color: #666;
    /* Placeholder text color */
  }
  
  .contact-form i {
    position: absolute;
    left: 5px;
    /* Adjust this value to align the icon */
    top: 40%;
    transform: translateY(-50%);
    color: #666;
  }
  
  /* login and singin form  */
  .login-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 850px;
    width: 100%;
    background: #fff;
    padding: 40px 30px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    perspective: 2700px;
  }
  
  
  .login-container .cover {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 50%;
    z-index: 98;
    transition: all 1s ease;
    transform-origin: left;
    transform-style: preserve-3d;
  }
  
  .login-container #flip:checked~.cover {
    transform: rotateY(-180deg);
  }
  
  .login-container .cover .front,
  .login-container .cover .back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  
  .login-container .cover .back {
    transform: rotateY(180deg);
    backface-visibility: hidden;
  }
  
  .login-container .cover::before,
  .login-container .cover::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    z-index: 12;
  }
  
  .login-container .cover::after {
    opacity: 0.3;
    transform: rotateY(180deg);
    backface-visibility: hidden;
  }
  
  .login-container .cover img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 10;
  }
  
  .login-container .cover .text {
    position: absolute;
    z-index: 130;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .login-container .cover .text .text-1,
  .login-container .cover .text .text-2 {
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    text-align: center;
  }
  
  .login-container .cover .text .text-2 {
    font-size: 15px;
    font-weight: 500;
  }
  
  .login-container .forms {
    height: 100%;
    width: 100%;
    background: #fff;
  }
  
  .login-container .form-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .login-container .form-content .login-form,
  .login-container .form-content .signup-form {
    width: calc(100% / 2 - 25px);
  }
  
  .login-container .forms .form-content .title {
    position: relative;
    font-size: 24px;
    font-weight: 500;
    color: #333;
  }
  
  .login-container .forms .form-content .title:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 25px;
    background: black;
  }
  
  .login-container .forms .signup-form .title:before {
    width: 20px;
  }
  
  .login-container .forms .form-content .input-boxes {
    margin-top: 30px;
  }
  
  .login-container .forms .form-content .input-box {
    display: flex;
    align-items: center;
    height: 50px;
    width: 100%;
    margin: 10px 0;
    position: relative;
  }
  
  .login-container .form-content .input-box input {
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    padding: 0 30px;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
  }
  
  .login-container .form-content .input-box input:focus,
  .login-container .form-content .input-box input:valid {
    border-color: black;
  }
  
  .login-container .form-content .input-box i {
    position: absolute;
    color: gray;
    font-size: 17px;
  }
  
  .login-container .forms .form-content .text {
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }
  
  .login-container .forms .form-content .text a {
    color: black;
    text-decoration: none;
  }
  
  .login-container .forms .form-content .text a:hover {
    text-decoration: underline;
  }
  
  .login-container .forms .form-content .button {
    color: #fff;
    margin-top: 40px;
  
  }
  
  .login-container .forms .form-content .button input {
    color: #fff;
    background: darkcyan;
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    transition: all 0.4s ease;
    border: 1px solid black;
  }
  
  .login-container .forms .form-content .button input:hover {
    background: white;
    color: black;
  }
  
  .login-container .forms .form-content label {
    color: black;
    cursor: pointer;
  }
  
  .login-container .forms .form-content label:hover {
    text-decoration: underline;
  }
  
  .login-container .forms .form-content .login-text,
  .login-container .forms .form-content .sign-up-text {
    text-align: center;
    margin-top: 25px;
  }
  
  .login-container #flip {
    display: none;
  }
  
  @media (max-width: 730px) {
    .login-container .cover {
      display: none;
  
    }
  
    .login-container .form-content .login-form,
    .login-container .form-content .signup-form {
      width: 100%;
    }
  
    .login-container .form-content .signup-form {
      display: none;
    }
  
    .login-container #flip:checked~.forms .signup-form {
      display: block;
    }
  
    .login-container #flip:checked~.forms .login-form {
      display: none;
    }
  }
  
  
  /* 
  remove icon part of the cart */
  th i {
    color: black;
    cursor: pointer;
    transition: color 0.3s ease;
  }
  
  /* Hover effect for the icon */
  th:hover i {
    color: red;
    /* Change the color to your desired hover color */
  }
  
  .movable-table-container {
    overflow-x: auto;
    margin-top: 5px;
    /* Adjust as needed */
  }
  
  /* Optional: Adjust the styling of the table header for better visibility */
  .movable-table-container table thead {
    position: sticky;
    top: 0;
    /* Example background color */
  }
  
  /* cart btn design */
  .cart-button {
    border: 1px solid rgb(226, 212, 212);
  }
  
  .cart-button:hover {
    border: 1px solid black;
  }
  
  /* login button style navbar */
  .login-button {
    border: 1px solid rgb(226, 212, 212) !important;
    color: black;
  }
  
  .login-button:hover {
    border: 1px solid black !important;
    transition: 0.5s ease-in;
  }
  
  .justified-text {
    text-align: justify;
  }
  
  /* footer section */
  
  /* 
  product detail sectons */
  
  
  .product-detail {
    display: flex;
    margin-top: 100px;
  }
  
  
  .size-table {
    border-collapse: collapse;
    width: 100%;
  }
  
  .size-table th,
  .size-table td {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 8px;
  }
  
  .size-table th {
    background-color: #f2f2f2;
  }
  
  
  
  
  .color-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  
  .color-option {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
  }
  
  .color-option:hover {
    border-width: 3px;
  }
  
  /* Define your color options */
  .color-option.red {
    background-color: #ff0000;
  }
  
  .color-option.blue {
    background-color: #0000ff;
  }
  
  .color-option.green {
    background-color: #00ff00;
  }
  
  .color-option.yellow {
    background-color: #ffff00;
  }
  
  .color-option.orange {
    background-color: #ffA500;
  }
  
  
  /* heading background */
  .heading-back {
    background-color: lightgray;
    height: 40px;
  }
  
  
  
  .main-card {
    flex: 1;
    margin-bottom: 20px;
  }
  
  
  .side-cards {
    flex: 0 0 48%;
    margin-left: 4%;
    margin-bottom: 20px;
    /* Add margin-bottom to create space between stacked cards */
  }
  
  
  .card-img-text {
    display: flex;
    align-items: center;
  }
  
  .card-img-text img {
    margin-right: 15px;
  }
  
  
  /* Add this to your style.css file */
  .smileys {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    width: 100%;
  
  }
  
  .smiley {
    width: 80px;
    /* Adjust the width as needed */
    height: 80px;
    /* Adjust the height as needed */
    margin: 0 5px;
    /* Adjust the margin between smileys as needed */
    border-radius: 50%;
    cursor: pointer;
  }
  
  .card-image img {
    margin: 0 20px;
    border-radius: 20px;
  }
   
  /* product detail btn */
  .detail-btns{
    background-color: #a7c8f9;
    border: 1px solid black;
  }
  
  
  /* Add this to your existing styles */
  .search-container {
    position: relative;
  }
  
  .search-input {
    display: none;
    position: absolute;
    width: 240px;
    padding: 5px;
    transition: all 0.3s ease;
  }
  
  .search-container.active .search-input {
    display: block;
  }
  
  /* payment parts */
  .payment-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px;

  }

  .payment-container form {
    width: 700px;
    padding: 20px;
    background: #fff;
    box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
  }

  .payment-container form .row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }

  .payment-container form .row .col {
    flex: 1 1 250px;
  }

  .col .title {
    font-size: 20px;
    color: #5e8f94;
    padding-bottom: 5px;
  }

  .col .inputBox {
    margin: 15px 0;
  }

  .col .inputBox label {
    margin-bottom: 10px;
    display: block;
  }

  .col .inputBox input,
  .col .inputBox select {
    width: 100%;
    border: 1px solid #ccc;
    padding: 10px 15px;
    font-size: 15px;
  }

  .col .inputBox input:focus,
  .col .inputBox select:focus {
    border: 1px solid #000;
  }

  .col .flex {
    display: flex;
    gap: 15px;
  }

  .col .flex .inputBox {
    flex: 1 1;
    margin-top: 5px;
  }

  .col .inputBox img {
    height: 34px;
    margin-top: 5px;
    filter: drop-shadow(0 0 1px #000);
  }

  .payment-container form .submit_btn {
    width: 100%;
    padding: 12px;
    font-size: 17px;
    background: #a7c8f9;
    color:black;
    margin-top: 5px;
    cursor: pointer;
    letter-spacing: 1px;
    border: 1px solid black;
  }

  .payment-container form .submit_btn:hover {
    background: #8dbaff;
  }

  input::-webkit-inner-spin-button,
  input::-webkit-outer-spin-button {
    display: none;
  }
.toast-part{
  background-color: darkcyan;
}