:root {
        --color1: rgba(10,36,45,1);
        --color1transparent: rgba(66, 66, 66, 0.99);
        --color2: rgba(10,36,45,1);
        --color3: rgba(207,52,118,1);
        --color4: rgba(10,36,45,1);
        --themefont: 'Permanent Marker', sans-serif !important;
        --themefontbutton: 'Permanent Marker', sans-serif !important;
      }
	  
	  
	  .gradient-text {
        color: var(--color4);
      }

      .font-custom {
        font-family: var(--themefont) !important;
        letter-spacing: -1px !important;
      }
	  
	  .h1menu {
        font-weight: 309 !important;
        padding-bottom: 0.69rem !important;
        color: var(--color2);
      }
	  
	  .h3product {
        font-family: var(--themefont) !important;
        letter-spacing: 0px !important;
        font-size: 1rem !important;
        font-weight: 609 !important;
        padding-top: 0.33rem !important;
      }

      .btn-apple {
        color: rgb(255, 255, 255);
        font-family: var(--themefontbutton) !important;
        font-size: 0.9rem;
      }

      #myBtn {
        background-color: var(--color1transparent) !important;
      }
	  
	  /*buttons colors*/
      .bgcategory1 {
        background-color: var(--color3);
        color: rgb(255, 255, 255) !important;
      }

      .mainmenubutton {
        padding: 0.66rem 0.66rem;
        font-weight: 609;
        font-size: 0.90rem;
        margin-bottom: 0.6rem !important;
        font-family: 'Poppins', sans-serif !important;
        letter-spacing: 0px;
      }

      img {
        
        width: auto;
      }

      .product-cards {
        min-height: 633px !important;
      }
	  .fw200 {
        font-weight: 200;
      }

      .h3custom {
        padding: 0rem;
        font-size: 0.81rem !important;
        color: #6c757d !important
      }

      .h2custom {
        padding: 1.2rem;
        font-size: 2.7rem !important;
      }

      .h2main {
        padding: 0.66rem;
        font-size: 0.90rem !important;
      }

      .h1custom {
        padding-bottom: 0.33rem !important;
        margin-bottom: 0rem !important
      }
	  
	  .float-h2-h3 {
        float: left;
        width: 50%;
      }

      .float-img {
        float: right;
        width: 50%;
        border-radius: 6px;
        box-shadow: 0px 0px 8px #c98efb;
      }
      
	  .sub-heading , .heading{
      color: rgb(0,0,0) !important;
	  text-align: center;
     }
	 
	 
	 

     .amz-button {
      background-color: rgba(207,52,118,1); color: white; border: none; border-radius: 9px; 
	  padding: 10px 20px; display: inline-block; font-size: 1.2rem; 
	  font-family: 'Permanent Marker', cursive !important; 
	  text-align: center; text-decoration: none; transition: all 0.3s ease;
     }
	 
	 .images-main {
     
      border-radius: 9px;
    }
	
	
	h2 {
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 0rem;
  text-align: center;
}

h1 {
  font-size: 3.9rem;
  font-weight: 600;
  margin-bottom: 0rem;
  text-align: center;
}


   .product-name { font-size: 3.9rem;}
   
   .additional-h2 {font-size:1.5rem !important}
   
   .row {margin-bottom: 5rem !important;}
   
    .custom-image {
    max-width: 81%;
    height: auto;
  }
  
  
  .hidden-xs {
    display: block; /* By default, show the element */
  }

  /* Media query for screens smaller than 768px (typical phone size) */
  @media (max-width: 767px) {
    .hidden-xs {
      display: none; /* Hide the element on smaller screens */
    }
  }
  
  @media (max-width: 767px) {
  .custom-image {
    margin: 0 auto; /* Center the image horizontally */
    display: block; /* Ensure it's treated as a block element */
  }
}

@media (max-width: 767px) {
  .custom-image {
    width: 100%; /* Set width to 100% on smaller screens */
    max-width: none; /* Remove the max-width restriction */
  }
}

.product-name {
    /* Your existing styles for the product name here */
  }

  /* Media query for screens smaller than 767px (typical phone size) */
  @media (max-width: 767px) {
    .product-name {
      font-size: 1.8rem; /* Adjust the font size for phone screens */
      padding-top: 1.2rem; /* Add top padding */
      padding-bottom: 1.2rem; /* Add bottom padding */
    }
  }

@media (min-width: 768px) {
    .large-screen-h1 {
      font-size: 3.9rem !important; /* Adjust the font size for larger screens */
      text-align: center !important; /* Center the text on larger screens */
    }
  }
  
  @media (max-width: 768px) {
    .large-screen-h1 {
      font-size: 3.6rem !important; /* Adjust the font size for larger screens */
      text-align: center !important; /* Center the text on larger screens */
	  margin-top: 6rem !important;
    }
  }
  
  .parag {
    font-size: 1.5rem; /* Default font size for all screens */
	text-align: center;
  }
  
   @media (min-width: 768px) {
    .parag {
      font-size: 1rem !important; /* Adjust the font size for larger screens */
    }
  }
  
  @media (max-width: 768px) {
    .parag {
      font-size: 1.5rem !important; /* Adjust the font size for larger screens */
    }
  }
  
@media (min-width: 768px) and (max-width: 991px) {
    .row {
      display: flex;
      align-items: center;
    }

    .custom-image {
      display: block; /* Ensure it's treated as a block element */
      max-width: 100%; /* Set max-width to 100% */
      margin: 0 auto; /* Center the image horizontally */
    }
  }
  
  .white {color:rgb(231,231,231);}
  
  h1 {margin-top: 1rem !important;}
  
  
.custom-image-container {
  position: relative;
  width: 100%;
  height: auto; /* Set the height to occupy the full height of the column */
  overflow: hidden; /* Ensure the overflow is hidden */
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-image-container img {
  object-fit: contain; /* Maintain aspect ratio and fit within the container */
  width: 100%; /* Make the image take up 100% of the container's width */
  height: 100%; /* Make the image take up 100% of the container's height */
  display: block; /* Remove any extra spacing below the image */
  margin: 0 auto; /* Center the image horizontally */
}

.row {
  height: 100%; /* Ensure the row takes the full height of the parent container */
}

.parent-container {
  height: 100vh; /* Set the height of the parent container, adjust as needed */
}

.logo {width: 111px; height: auto;}

.category-child {
  background-size: cover; /* Cover the entire container */
  background-position: center center; /* Center the background image */
  height: 300px; /* Set a fixed height for the container, adjust as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* Center text content horizontally */
}

.category-child a {
  text-decoration: none;
  color: #fff; /* Set the text color to white or your preferred color */
}

.category-child h1,
.category-child h3 {
  margin: 0; /* Remove default margin for h1 and h3 */
}

/* Media query for normal computer screens */
@media only screen and (min-width: 768px) {
  .sub-heading {
    font-size: 1rem !important;
  }
}