@media screen and (max-width:1536px) {
   /* font */
@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&family=Abril+Fatface&family=Anton&family=Arizonia&family=Bebas+Neue&family=Cinzel:wght@400..900&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Esteban&family=Great+Vibes&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kaushan+Script&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&family=Raleway:ital,wght@0,100..900;1,100..900&family=Rouge+Script&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* Montserrat font */

.montserrat-normal {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/* popping for star */
.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}

/* shared style */
.box{
    width: 163px;
    height: 33px;
    border-radius: 100px;
    background-color: white;

}
/* button styles */
.btn-primary{
   padding: 14px 20px;
   background-color: #FF6600;
   color: white;
   border: none;
   border-radius:100px ;
}
.btn-primary:hover{
    background-color: #6B2B00;
    transform: scale(1.1);
}

/* navigation bar */

.navigation-bar{
    background-color: white;
}


/* header */
.banner{
     background-image: url('../images/7ce2691f10514a66adfb63f38260c10a\ 1@2x-1.png');
     background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 100%;
    height: 720px;
    align-items: center;
}
header nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0, 120px;
    padding-left: 120px;
    padding-right: 120px;
}
nav ul{
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
}
ul li{
    list-style: none;
}
ul li a{
    text-decoration: none;
    color: #070707;
}
li:hover{
    transform: scale(1.2);
}
/* banner */
.banner{
  display: grid;
  padding-top: 122px;
  padding-left: 112px;
  align-items: center;
  margin-bottom: 93px;
}
.banner-container-text{
    font-size: 4rem;
    color: white;
    width: 474px;

}
.banner-container-detail{
    color: white;
}

/* banner upper img section */
.banner-images {
    position: relative; 
    width: 42px; 
    height: 42px;
    z-index: 2;
}

.banner-images img {
    position: absolute;      
    border-radius: 50%;  
}

.banner-images img:nth-child(1) {
    top: 0;            
    left: 0;
}

.banner-images img:nth-child(2) {
    top: 0;   
    left: 60%;     
}

.banner-images img:nth-child(3) {
    top: 0;   
    left: 120%;     
}
.banner-imgg-text{
    padding-left:85px;
    z-index: 1;
}
.banner-img-text{
    font-size: 12px;
    font-weight: 500;
    color: black;
    text-align: center;
    padding-top: 13px;
}


/* main */
/* product section */


.product-container {
    display: flex;
    justify-content: space-between;
    margin: 40px;
    background-color: white;
    border-radius: 8px;
    padding: 20px;
}

/* Product Image Section */
.product-image-section {
    flex: 1;
    text-align: center;
}

#main-product-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.thumbnail-images {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
}

.thumbnail {
    width: 131px;
    height: 122px;
    margin: 0 5px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: border 0.3s ease;
}

.thumbnail:hover {
    border: 2px solid black;
    transform: scale(1.1);
}

/* Product Info Section */
.product-info {
    flex: 1.5;
    padding-left: 20px;
}

.product-rating {
    margin-bottom: 10px;
}

.product-rating i {
    color: #FFD700;
}

.product-rating span {
    font-size: 14px;
    margin-left: 10px;
    color: #888;
}

.product-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #12151A;
}

.product-price {
    margin-top: 0px;
    display: flex;
    align-items: center;
    
}

.current-price {
    font-size: 48px;
    color: #6B2B00;
    font-weight: bold;
}

.old-price {
    text-decoration: line-through;
    font-size: 18px;
    color: #999;
    margin-left: 10px;
}
.discount-box{
    height: 15px;
    background-color: #FF6600;
    border: none;
    border-radius: 10px;
}

.discount {
    font-size: 16px;
    color: white;
    margin-left: 10px;
    padding: 10px 16px;
}
.pro-description{
    font-size: 2rem;
    font-weight: bold;
}

.product-description {
    font-size: 16px;
    color: #333;
    margin-top: 20px;
}
.product-features {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: center;
}
/* Button */
.btn-add-to-cart {
    width: 100%;
    background-color: #FF6600;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 16px;
    border-radius: 50px;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}
.btn-add-to-cart:hover{
    background-color: #6B2B00;
    transform: scale(1.01);
}

.btn-add-to-cart:hover {
    background-color: #e65c00;
}

/* Payment methods icons */
.payment-methods {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content:space-around;
}

.payment-methods i {
    font-size: 24px;
    margin-right: 15px;
    color: #333;
}

.payment-methods i:hover {
    color: #FF6600;
    transform: scale(1.3);
    border: 2px solid black;
    padding: 12px 9px;
}

/* Dropdown */
.dropdown-m{
    display: grid;
}
.dropdown {
    position: relative;
    display: inline-block;
    margin-top: 20px;
}
.take{
    margin-left: 520px;
}
hr{
    border: 1px solid #FFD0B0;
}
/* footer */ 
    
}