body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('icons/bg.jpg'); 
    background-size: cover; 
    background-position: center;
}

a{
    color: black;
    text-decoration: none;
}

@media (max-width: 768px) {
    nav {
        scale: 0.8;
        flex-direction: column;
        text-align: center;
    }

    .nav-left {
        flex-direction: row;
        justify-content: center;
    }

    .nav-left a {
        margin-right: 0;
    }

    .nav-right {
        padding-bottom: 20px;
    }

    #product-items{
        display: flex;
        flex-direction: column; 
        align-items: center;
        justify-content: center;
        margin: auto;
        max-width: 90% !important;
    }

    .gallery-container{
        padding-bottom : 20px;
        max-width: 70%;
    }
    #main-image, #main-video {
        max-width: 100%; 
        border-radius: 15px;
        box-shadow: 0 0 100px 5px rgba(255, 144, 222, 0.409); 
        transition: box-shadow 0.3s ease-in-out;
        align-items: center;
        justify-content: center;
        display: flex;
        margin: auto;
    }

    #thumbnail-container {
        max-width: 170px !important;
        margin-left: 10px;
    }

    .thumbnail {
        max-width: 32px; 
        transition: transform 0.3s ease-in-out;
        border-radius: 5px;
    }

    #prev-btn, #next-btn {
        font-size: 0px;
    }

    .gallery-desc{
        width: 78%;
        text-align: center;
    }

    .gallery-desc h1{
        font-size: 22px;

        width: 100% !important;
    }

    .price-container{
        display: flex;
        flex-direction: column;
    }

    .price-container h1{
        font-size: 30px;
        color: rgb(0, 69, 23);
    }

    .prod-h{
        display: flex;
        flex-direction: row;
        width: 90%;
        align-items: center;
        justify-content: center;
        padding-left: 14px;
    }

    .prod-h img{
        max-height: 50px;
        margin: 0;
    }

    .ship-box{
        margin-left: 150px;
    }

    #product-details{
        width: 90% !important;
    }
    
    .quote{
        font-size: 18px !important;
        width: 100% !important;
    }
    
    .description{
        width: 94% !important;
        font-size: 15px !important;
    }

    .note{
        font-weight: 500;
        font-size: 15px !important;
        width: 90% !important;
    }

    .quote p{
        font-size: 30px;
    }
    .b-o{
        flex-direction: column !important;
        max-width: 175px !important;
    }

    .buy1{
        padding: 0  !important;
        margin-bottom: 10px !important;
    }

    .buybtn{
        scale: 1 !important; 
        padding: 0 !important;  
    }
    
    .buybtn1 button {
        width: 150px !important;
        height: 35px !important;
    }
    
    .buybtn1 button:hover {
        background-color: #e76161e5;
    }

    .more-items{
        max-width: 74% !important;
    }
    
    .similar-products{
        flex-direction: column !important;
        padding-top: 0 !important;
        width: 160px;
    }

    .pro-m{
        scale: 0.95 !important;
    }

    .s-btn{
        flex-direction: column !important;
    }

    .s-btn img{
        padding: 20px;
        max-width: 200px;
        transition: transform 0.4s ease-in-out;
    }

    .footer{
        font-size: 12px !important;
    }
    
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 12%;
    padding-right: 12%;
    margin-top: 20px;
}

.nav-left {
    display: flex;
}

.nav-right {
    display: flex;
    margin-top: 20px;
}

.nav-right img {
    max-height: 40px;
    opacity: 0.85;
    transition: transform 0.3s ease-in-out;
}
.nav-right img:hover {
    transform: scale(1.01);
}

.nav-left a {
    background-color: rgba(255, 0, 98, 0.521);
    border-radius: 50px;
    width: 100px;
    height: 40px;
    margin-right: 10px;
    border: 0.5px solid pink;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    color: rgb(255, 255, 255);
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    transition: background-color 0.3s ease-in-out;
}

.nav-left a:hover{
    background-color: #ff002b;
}


#product-items{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2%;

}

.gallery-desc{
    padding: 0px 30px 20px 40px;
}

.gallery-container {
    padding-left: 10%;
}


#prev-btn,
#next-btn {
    font-size: 24px;
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
}

#gallery-preview {
    margin-bottom: 20px;
}

#main-image {
    width: 500px; 
    border-radius: 15px;
    box-shadow: 0 0 100px 5px rgba(255, 144, 222, 0.409); 
    transition: box-shadow 0.3s ease-in-out;
}

#main-image:hover{
    box-shadow: 0 0 10px 5px rgba(255, 144, 222, 0.6);
}

#main-video {
    width: 500px; 
    border-radius: 15px;
    box-shadow: 0 0 10px 5px rgba(255, 144, 222, 0.226); 
    transition: box-shadow 0.3s ease-in-out;
}

#main-video:hover{
    box-shadow: 0 0 10px 5px rgba(255, 144, 222, 0.6);
}

.thumbnail {
    width: 50px; 
    cursor: pointer;
    margin-right: 10px;
    transition: transform 0.3s ease-in-out;
    border-radius: 5px;
}

.thumbnail:hover{
    transform: scale(1.1);
}

.thumbnail.highlight {
    border: 3px solid #e100ffb0; 
}

#thumbnail-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#next-btn {
    align-self: flex-end;
}

.price-container {
    display: flex;
    align-items: center;
}

.price-container small{
    margin-top: 15px;
    margin-left: 20px;
}

.prod-h img{
    max-width: 80px;
    padding-right: 18px;
    transition: transform 0.3s ease-in-out;
}

.prod-h img:hover{
    transform: scale(1.05);
}

.variations.variations1{
    padding-left: 10px;
}
.variations img{
    margin-right: 12px;
    border-radius: 100px;
}

.variations1 img{
    margin-right: 10px;
}
.variant{
    max-width: 80px;
    transition: box-shadow 0.2s ease-in-out;
}
.variant:hover{
    box-shadow: 0 0 5px #cf8d0073, 0 0 7px #df007b8a, 0 0 9px #ffa4a44f;
}

.ship-box{
    min-width: 250px;
    margin-right: 150px;
    background-color: #e4e4e425;
    border-radius: 20px;
    box-shadow: 
        3px 3px 5px #888888cb, 
        -3px -3px 5px #ffffffbd; 
    padding: 10px;
}

.shipping-input-container{
    display: flex;
    align-items: center;
    justify-content: center;
}

#freed{
    font-weight: 500;
    font-size: 24px;
    text-align: center;
    color: #0051ff; 
    text-shadow: 0 0 10px #ffc74e, 0 0 20px #ffb8df, 0 0 30px #ffffff79;
}

#pincode {
    max-width: 100px;
    padding: 8px;
    border: 1px solid #fff3fa3f;
    border-radius: 20px 0 0 20px;
    font-size: 16px;
    outline: none;
    text-align: center;
}

#pincode::placeholder {
    color: #aaa;
    text-align: center;
}

#pinbtn{
    text-align: center;
    padding: 8px;
    padding-right: 12px;
    background-color: #292dff9c;
    color: #fff;
    border: none;
    border-radius: 0 20px 20px 0;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease-in-out;
}

#pinbtn:hover {
    background-color: #0056b3;
}


.stock{
    font-weight: 500;
    color: green;
    font-size: 25px;
    text-align: center;
}

.quantity-container {
    display: flex;
    align-items: center;
    justify-content: center;
}


#qtybtn{
    text-align: center;
    padding: 8px;
    padding-right: 12px;
    background-color: #292dff9c;
    color: #fff;
    border: none;
    border-radius: 20px 0 0 20px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease-in-out;
}
select {
    max-width: 100px;
    padding: 8px;
    border: 1px solid #ffe9fa91;
    border-radius: 0 20px 20px 0;
    font-size: 16px;
    outline: none;
}

select:hover {
    border-color: #5900ff69;
}

#product-price{
    font-size: 30px;
    text-align: center;
    padding-top: 12px;
}

.bmsm{
    text-align: center;
    font-size: 14px;
}

.sharebox {
    text-align: center;
    padding: 10px;
}

#sharebtn {
    width: 100%;
    height: 40px;
    background-color: #1900ff73;
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease-in-out;
}

#sharebtn:hover {
    background-color: #0300b391;
}

.buybtn {
    text-align: center;
    padding: 10px;
}

.buybtn button {
    width: 100%;
    height: 40px;
    background-color: #ff0000c0;
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease-in-out;
}

.buybtn button:hover {
    background-color: #ff4c2d;
}

.buybtn1 button {
    width: 150px;
    height: 35px;
    background-color: #ff5e00;
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s ease-in-out;
}

.buybtn1 button:hover {
    background-color: #e76161e5;
}

#product-details{

    width: 80%;
    justify-content: center;
    display: flex;
    align-items: center;
    margin: auto;
    flex-direction: column;
}

.quote{
   
    width: 70%;
    font-size: 25px;
    text-align: center;
    padding: 20px 0 10px 0;
}

.description{
    width: 90%;
    justify-self: center;
    align-items: center;
    font-size: 19px;
}

.description li{
    padding: 2px 0 2px 0;
}

.note{
    font-weight: 800;
    text-align: center;
    font-size: 24px;
    width: 80%;
}
.b-o{
    padding: 40px 0 40px 0;
    display: flex;
    flex-direction: row;
    scale: 2;
}

.buy1{
    padding: 0 50px 0 50px;
}
.more-items{
    width: 70%;
    display: flex;
    margin: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.similar-products{
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 40px;
    padding: 10px 100px 0 100px;
    
}

.pro-m{
    border-radius: 40px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px 10px 0 10px;
    background: rgba(255, 178, 255, 0.103);
    transition: box-shadow 0.4s ease-in-out;
}

.pro-m:hover{
    box-shadow: 0 0 10px #cf530010, 0 0 20px #59df001f, 0 0 30px #53ebff1e;
}

.pro-m img{
    width: 270px;
    border-radius: 40px;
    transition: transform 0.4s ease-in-out;
}
.pro-m img:hover{
    transform: scale(1.02);
}

.pro-m p{
    padding: 10px;
}

.connect{
    padding-top: 20px;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    flex-direction: column;
}

.s-btn{
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    flex-direction: row;
}

.s-btn img{
    padding: 20px;
    width: 300px;
    transition: transform 0.4s ease-in-out;
}

.s-btn img:hover{
    transform: scale(1.05);
}

.footer{
    margin-top: 70px;
    background: rgba(255, 0, 0, 0.062);
    height: 70px;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
}