/* Set the background color of the entire page to black */
body {
    background-color: black;
    color: white; /* Set the default text color to white for readability */
    margin: 0; /* Remove default margin */
    font-family: 'Arial', sans-serif; /* Set a default font family */
}

/* Styling for the header
.header {
    text-align: center;
    margin: 20px 0;
} */

.header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 9%;
    background: var(--bg-color);
    display:flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
  }
  

    
  .header.sticky {
    border-bottom: .1rem solid rgba(0,0,0,.2);
  }
  
  .logo {
    font-size: 2.5rem;
    color: #8a0303;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
  }
  
/* Add a new CSS class to style the X span */
.change-background {
    cursor: pointer;
}

/* Adjust the background color */
.white-bg {
    background-color: #FCF5E5;
}


  
  .navbar a {
    font-size: 1.7rem;
    color: var(--text-color);
    margin-right: 15rem;
    transition: .3s;
    text-decoration: none;
  
  }
  
  .navbar a:hover,
  .navbar a.active {
    color: var(--main-color);
  }


  #menu-icon {
    font-size: 3.6rem;
    color: #8a0303;
    display: none;
    cursor: pointer;
  
  }
/* Styling for the gallery container */
.gallery {
    text-align: center;
    padding: 20px;
    padding-top: 8rem; /* Adjust padding top to create space from the fixed header */
}

/* Styling for the content within the gallery */
.content {
    display: inline-block;
    text-decoration: none;
    color: white; /* Set text color to white for readability */
    font-size: 1.5rem; /* Adjust the font size as needed */
    font-family: 'Mortal Kombat', sans-serif;
    margin-bottom: 20px;
    margin-top: 2rem; /* Add margin-top to create space between the navbar and the content */
}

/* Styling for the paragraphs within the content */
.content p {
    margin: 10px 0;
    font-family: 'Mortal Kombat 4', sans-serif;
    color: #8a0303; /* Specific color for paragraph text */
}

/* Styling for the heading */
.heading {
    color: #8a0303; /* Specific color for the heading */
}

/* Styling for the image container */
.image-container {
    position: relative;
    display: inline-block;
}

/* Styling for the image */
.gallery img {
    display: block;
    margin: 0 auto;
    width: 100%; /* Set default width for mobile devices */
    max-width: 300px; /* Adjust the width as needed for mobile devices */
    height: auto; /* Maintain aspect ratio */
    border: 2px solid #8a0303; /* Change border color to white for better visibility */
    border-radius: 10px; /* Optional: Add rounded corners */
}

/* Adjusting font size of the paragraphs within the gallery links */
.content p {
    font-size: 2rem; /* Adjust the font size as needed */
}

/* Media query for larger screens (desktops) */
@media (min-width: 768px) {
    .gallery img {
        max-width: 800px; /* Increase max-width for desktop devices */
        width: 80%; /* Adjust the width as needed */
        height: auto; /* Maintain aspect ratio */
        object-fit: cover; /* Ensure the image covers the specified dimensions */
        

    }
    .navbar {
        display: flex; /* Ensure navbar is displayed on larger screens */
    }

    #menu-icon {
        display: none; /* Hide the menu icon on larger screens */
    }
}


/* Styling for the add to cart button */
.add-to-cart-6 {
    position: absolute;
    bottom: 20px;
    right: 100px;
    background-color: #8a0303;
    font-family: 'Mortal Kombat 4', sans-serif;
    color: black;
    border: none;
    border-radius: 25px; /* Oblong shape like a pill */
    padding: 10px 20px;
    font-size: 2.6rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 10px;
}

.add-to-cart-6:focus {
    outline: none;
}

.add-to-cart-6:active {
    background-color: #6a0202;
}

.free-shipping {
    color: skyblue;
}

.product-price {
    color: skyblue;
}

/* Responsive styles */
@media screen and (max-width: 768px) {
    .navbar {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        background-color: var(--bg-color);
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 99;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .navbar.active {
        display: flex;
    }

    .navbar a {
        font-size: 2.5rem; /* Adjust font size for smaller screens */
        margin: 1rem 0; /* Adjust margin for smaller screens */
    }

    #menu-icon {
        display: block; /* Show the menu icon on smaller screens */
    }

    .cart-container {
        width: 90%; /* Adjust width for smaller screens */
        padding: 10px; /* Adjust padding for smaller screens */
    }

    .cart-table th,
    .cart-table td {
        padding: 8px; /* Adjust padding for smaller screens */
        font-size: 14px; /* Adjust font size for smaller screens */
    }

    /* Adjust responsiveness for content within .gallery */
    .gallery .content {
        padding: 10px; /* Adjust padding for smaller screens */
        font-size: 1.2rem; /* Adjust font size for smaller screens */
    }

    .gallery .content p {
        font-size: 1.8rem; /* Adjust font size for smaller screens */
    }

    .gallery .image-container {
        margin-top: 20px; /* Adjust margin top for smaller screens */
    }

    .gallery .magnifying-glass {
        width: 300px; /* Adjust width for smaller screens */
        height: 300px; /* Adjust height for smaller screens */
    }

    .gallery .magnifying-glass img {
        transition: transform 0.3s ease;
    }
}

/* Styles outside media queries */
.image-container {
    position: relative;
    display: inline-block;
}

.magnifying-glass {
    width: 400px; /* Adjust as needed */
    height: 400px; /* Adjust as needed */
    overflow: hidden;
    position: relative;
}

.magnifying-glass img {
    display: block;
    width: 100%;
    height: auto;
}

.image-container:hover .magnifying-glass img {
    transform: scale(1.6); /* Adjust magnification level */
}

.crypto-payment-wrapper {
    display: flex;
    align-items: center;
    justify-content: center; /* Align items horizontally at the center */
    margin-top: 3px;
}

.crypto-icon {
    font-size: 20px; 
    margin: 0 5px; /* Reduce the margin for closer spacing */
}

.crypto-payment-button {
    padding: 10px 15px;
    font-size: 18px; 
    background-color: #8a0303; 
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.crypto-payment-button:hover {
    background-color: #6a0202; 
}

.crypto-payment-wrapper img {
    width: 30px; 
}

#or-crypto {
    font-size: 40px;
    margin: 20px;
}

/* Media Query for Small Devices (Mobile Phones) */
@media only screen and (max-width: 600px) {
    .crypto-icon {
        font-size: 16px; /* Decrease font size for smaller screens */
        margin: 33px 23px; /* Reduce the margin for closer spacing */
    }
   
}

/* Media Query for Medium Devices (Tablets) */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    .crypto-icon {
        font-size: 18px; /* Adjust font size for tablets */
        margin: 3px 104px; /* Adjust margin for tablets */
    }
    .crypto-payment-button {
    
        margin: 30px 53px;
    }
}

/* Media Query for Large Devices (Desktops) */
@media only screen and (min-width: 1025px) {
    .crypto-payment-wrapper {
        justify-content: center; /* Align items horizontally at the center for desktops */

    }

    .crypto-icon {
        font-size: 20px; /* Reset font size for desktops */
        margin: 76px 5px; /* Reset margin for desktops */
    }

    .crypto-payment-button {
    
        margin: 25px 553px;

    }
}



/* Footer */
.footer {
    position: relative;
    color: #8a0303;
    text-align: center;
    padding: 20px;
    width: 100%;
    bottom: 0;
    overflow-x: hidden;
  }
  
  .footer-text {
    flex: 1;
    margin-bottom: -3px;

  
  }
  .footer-text p {
      font-size: 1.9rem;
      text-align: center !important;
  }
  
  .footer-iconTop {
    position: absolute;
    bottom: 10px;
    right: 5px;
  }
  
  .footer-iconTop a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: .3rem;
    background: var(--main-color);
    border-radius: .8rem;
    transition: .5s ease;
  }
  
  
  .footer-iconTop a i {
    font-size: 2.4rem;
    color: var(--second-bg-color);
  }
  
  .footer-iconTop:hover a {
    box-shadow: 0 0 1rem var(--main-color);
  }
  
   
    
    .footer-iconTop a {
      display: inline-flex;
      justify-content: center;
      align-items: right;
      padding: .3rem;
      background: var(--main-color);
      border-radius: .8rem;
      transition: .5s ease;
    }
    
    
    .footer-iconTop:hover a {
      box-shadow: 0 0 1rem var(--main-color);
    }
    
    .footer-iconTop a i {
      font-size: 2.4rem;
      color: var(--second-bg-color);
      align-items: right;
    
    }
    
    
  
    .number-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 1rem;
    }
  
  
    .chirpx {
      display: flex;
      justify-content: center;
    }
    
    .chirpx .char {
      font-size: 2.8rem;
      color: #8a0303;
      background-color: #000;
      margin: 0 0.2rem;
    }
    
    .chirpx .char.x {
      font-size: 3rem;
    }
    
    .phone-number {
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
    }
  .number {
    display: inline-block; /* Ensure inline display for proper positioning */
    position: relative;
  }
  
  .number span {
    display: inline-block; /* Ensure inline display for proper positioning */
  }
  
  .number .char {
    position: absolute;
    top: -1em; 
    font-size: 2.8rem;
    color: #8a0303;
    background-color: #000;
  }
  
  .number .char.c {
    left: 10.6em;
    top: -1.2em;
  }
  
  .number .char.h {
    left: 10.9em;
    top: -1.2em;

  }
  
  .number .char.i {
    left: 11.5em; 
    top: -1.2em;

  }
  
  .number .char.r {
    left: 11.8em; 
    top: -1.2em;

  }
  
  .number .char.p {
    left: 12.3em; 
    top: -1.2em;

  }
  

  .number .char.x {
    font-size: 3rem;
    left: 12em; 
    top: -1.1em;

  }