:root {

    --red-rgb-color: 211, 50, 57;
    /* font-size: 10px; */
}


/*--- main-product-section-start ---*/

main .main-product {
    /* width: 100%; */
    max-width: 1920px;
    margin: 0 auto;
    /* border: 4px solid blue; */
    padding: 10px 70px;
    display: flex;
    justify-content: space-between;
    align-items: start;
}

/*--- product-img-start ---*/

main .main-product .product-img {
    /* border: 3px solid rgba(0, 0, 0, .3); */
    padding-top: 20px;
    /* box-shadow: 1px 3px 7px rgb(46, 46, 46); */
    border-radius: 30px;
    width: 700px;
    /* padding: 30px 5px; */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

main .main-product .product-img .main-img {
    /* border: 5px solid var(--secondary-color); */
    box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.531), -1px 0px 5px rgba(0, 0, 0, 0.531);
    width: 550px;
    margin: 0 auto;
    height: 550px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
}

main .main-product .product-img .main-img .slider {
    position: relative;
    width: 300px;
    /* Set your desired width */
    overflow: hidden;
    max-height: 100%;
    width: 100%;
    overflow: hidden;
}

main .main-product .product-img .main-img .slider #imageSlider {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    transition: transform 0.5s ease;
}

main .main-product .product-img .main-img .slider #imageSlider li {
    min-width: 100%;
    /* Each image takes full width of the slider */
}

main .main-product .product-img .main-img .slider #imageSlider li img {
    max-height: 100%;
    width: 100%;
    display: block;
    object-fit: cover;
}


main .main-product .product-img .arrows {
    /* border: 2px solid darkgreen; */
    background-color: var(--primary-color);
    box-shadow: 0px 1px 8px black;
    border-radius: 40px;
    width: 250px;
    height: 70px;
    position: absolute;
    left: 50%;
    bottom: 100px;
    /* top: 50%; */
    transform: translate(-50%, 0%);
}

main .main-product .product-img .arrows button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* background-color: rgba(0, 0, 0, 0.7); */
    border-radius: 50px;
    border: none;
    cursor: pointer;
    padding: 20px;
    transition: .3s;
}

main .main-product .product-img .arrows button:hover {
    box-shadow: 0px 0px 3px var(--secondary-color), inset 1px 0px 5px var(--primary-color);

}

#prevBtn {
    left: 10px;
    background-color: var(--accent-color);

}

#prevBtn i {
    color: var(--primary-color);
    font-size: 15px;
    transition: .3s;
}

#prevBtn:hover i {
    color: var(--secondary-color);
}

#nextBtn {
    right: 10px;
    background-color: var(--secondary-color);
}

#nextBtn i {
    color: var(--primary-color);
    font-size: 15px;
    transition: .3s;
}

#nextBtn:hover i {
    color: var(--accent-color);
}

main .main-product .product-img .option {
    /* border: 3px solid darkviolet; */
    width: 80%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

main .main-product .product-img .option ul {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

main .main-product .product-img .option ul li {
    width: 70px;
    height: 70px;
    border: 2px solid rgba(0, 0, 0, .5);
    overflow: hidden;
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: .3s;
}

main .main-product .product-img .option ul li:hover {
    box-shadow: 0px 2px 6px black;
}

main .main-product .product-img .option ul li img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

/* .active {
    border: 2px solid blue;
    opacity: 1; 
    transition: border 0.3s ease;
    box-shadow: 5px 5px 5px black;
} */

/*--- product-img-end ---*/

main .main-product .product-info {
    /* border: 3px solid darkorange; */
    width: 55%;
    padding: 20px 20px;
    background-color: var(--secondary-color);
    /* box-shadow: 0px 1px 7px rgba(247, 247, 247, 0.668); */
    display: flex;
    flex-direction: column;
    border-radius: 30px;
    gap: 30px;
}

main .main-product .product-info .product-name {
    font-family: bold;
    font-size: 4.2rem;
    font-weight: 800;
    color: var(--primary-color);
}

main .main-product .product-info .price {
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* border: 2px solid red; */
    font-family: medium;
}

main .main-product .product-info .price h2 {
    font-family: medium;
    font-size: 3.2rem;
    color: var(--primary-color);
}

main .main-product .product-info .price .price-cat {
    /* border: 2px solid red; */
    display: flex;
    gap: 10px;
    align-items: center;
}

main .main-product .product-info .price .org-price {
    font-size: 2rem;
    color: var(--accent-color);
    text-decoration: line-through;
}

main .main-product .product-info .price .dis-price {
    font-size: 3rem;
    color: var(--primary-color);
    font-family: medium;
    letter-spacing: 1px;
}

main .main-product .product-info .about-product p {
    /* border: 2px solid green; */
    font-family: light;
    font-size: 20px;
    font-weight: 800px;
    color: var(--primary-color);
}

main .main-product .product-info .size {
    /* border: 2px solid darkgoldenrod; */
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--primary-color);
}

/* 
main .main-product .product-info .size h2{
    font-family: medium;
    font-size:3rem;
}

main .main-product .product-info .size .size-btn{
    display: flex;
    gap: 10px;
    border: 2px solid red;
    justify-content: start;
}

main .main-product .product-info .size .size-btn li button{
    padding: 15px 25px;
    border-radius: 45%;
    border: 2px solid var(--primary-color);
    color: var(--secondary-color);
    font-size: 17px;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.5),inset .5px .5px 2px rgba(0, 0, 0, 0.5);
    transition: .3s;
}

main .main-product .product-info .size .size-btn li button:hover{
    background-color: var(--secondary-color);
    color: var(--primary-color);
    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.5),inset -1px -1px 3px rgba(255, 255, 255, 0.5);
    border: 2px solid var(--primary-color);
} */

label:focus {
    outline: 0;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px var(--accent-color);
}

.size .SizeSelector {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.size .SizeSelector h2 {
    font-size: 3.2rem;
    font-family: medium;
}

.Sizes div {
    display: flex;
    justify-content: start;
}

.Sizes input[type="radio"] {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.Sizes input[type="radio"]:checked+span {
    box-shadow: 0 0 0 0.6px var(--secondary-color);
    background-color: var(--accent-color);
    z-index: 1;
    color: var(--primary-color);
}

.Sizes label span {
    display: block;
    cursor: pointer;
    background-color: var(--primary-color);
    padding: 5px 10px;
    position: relative;
    box-shadow: 0 0 0 0.6px var(--secondary-color);
    letter-spacing: 0.55px;
    color: var(--secondary-color);
    text-align: center;
    transition: background-color 0.5s ease;
    font-size: 2rem;
    font-family: medium;
}

.Sizes label:first-child>span {
    border-radius: 5px 0 0 5px;
}

.Sizes label:last-child>span {
    border-radius: 0 5px 5px 0;
}

/*--- color-start ---*/


main .main-product .product-info .color {
    /* border: 2px solid rgb(0, 68, 150); */
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--primary-color);
}

/* 
main .main-product .product-info .color h2{
    font-family: medium;
    font-size:3rem;
}

main .main-product .product-info .color .color-box{
    display: flex;
    border: 2px solid red;
    gap: 10px;
} 

main .main-product .product-info .color .color-box input{
    width: 5%;
    height: 20px;
}

main .main-product .product-info .color .color-box input:nth-child(1){
    accent-color: black;
}

main .main-product .product-info .color .color-box input:nth-child(2){
    accent-color: red;
}

main .main-product .product-info .color .color-box input:nth-child(3){
    accent-color: var(--primary-color);
}

main .main-product .product-info .color .color-box input:nth-child(4){
    accent-color: rgb(0, 0, 173);
}

main .main-product .product-info .color .color-box input:nth-child(1):checked{
    border: 2px solid red;
} */


.ColorSelector .Colors,
.SizeSelector .Sizes {
    display: flex;
    align-items: center;
    column-gap: 10px;
    /* Increased gap for better spacing */
}

main .main-product .product-info .color h2 {
    font-family: medium;
    font-size: 3rem;
}

.ColorSelector .color-option {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    /* Make the label circular */
    overflow: hidden;
    /* Ensure the content fits within the circle */
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.6);
    /* Add shadow for better visibility */
}

.ColorSelector .color-option:hover {
    transform: scale(1.3);
    box-shadow: 2px 2px 5px 0 transparent;
    /* Add shadow for better visibility */
}

.ColorSelector .color-option input {
    display: none;
    /* Hide the default radio button */
}

.ColorSelector .color-box {
    border-radius: 50%;
    /* Make the color box circular */
    width: 100%;
    height: 100%;
    display: inline-block;
    transition: border 0.3s;
    /* Smooth transition for border change */
    /* pointer-events: none; */
}

.ColorSelector .Colors .color-option input:checked + .color-box {
    border: 5px solid rgb(0, 243, 0);
    /* transform: scale(1.8); */
    /* box-shadow: 2px 2px solid white; */
    /* Change border color when selected */
}

/* main .main-product .product-info .color .color-box input:nth-child(1){
    background-color: red;
}  */

/*--- color-end ---*/

main .main-product .product-info .add-btn {
    /* border: 2px solid black; */
    display: flex;
    justify-content: left;
    gap: 50px;
    padding: 5px 5px;
}

main .main-product .product-info .add-btn button:nth-child(1) {
    padding: 10px 25px;
    width: 250px;
    background-color: var(--accent-color);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-family: medium;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 1px 1px 5px black;
    transition: .4s;
}

main .main-product .product-info .add-btn button:nth-child(1):hover {
    background-color: rgb(255, 23, 23);
    box-shadow: 1px 1px 5px transparent;
}


main .main-product .product-info .add-btn button:nth-child(2) {
    padding: 10px 25px;
    width: 250px;
    background-color: var(--secondary-color);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-family: medium;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 1px 1px 5px black;
    transition: .4s;
}

main .main-product .product-info .add-btn button:nth-child(2):hover {
    background-color:var(--primary-color);
    color:var(--secondary-color);
    box-shadow: 1px 1px 5px transparent;
}

/* main .main-product .product-info .size .size-btn li button{
    padding: 10px 25px;
    border-radius: 20px;
} */

/* khud ko aaine me dekha to darr ggya..
mere sarr se jeene ka fitoor utar gya.
naa jaane kis qadr tanha raha hoga wo shaqs...
khud ko gale se lagate hi bikhar gya.
or ek shaqs aaya to tha mujhe sametne ke khaatir..
aaya...
do pal thehra.. 
or firr nikal gya.
or wo parinda jo subakk ke rehta hai kone me kahi..
kiya gaya hai ghayal harr baar udhkar jidhar gya.
or aaj haal puchte ho parinde ka tum..
to suno..
lahu thuka hai pinjare ki teergi pe usne..
or fir aazad hote hi marr gya.
ruh fadfdaati hai aaj bhi pinjre me uski..
baaki jism ka pta nhi kon nigal gya. */