.product-banner img,
.product-desc img{
    width: 100%;
    max-width: 100%;
}

.product-desc{
    text-align: center;
}

.product-desc-section{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10%;
    margin: 0 auto;
    width: 80%;
}

.product-desc-section .product-img{
    width: 45%;
}

.product-desc-section .product-img img{
    max-width: 100%;
}

.product-desc-section .product-desc{
    width: 45%;
    text-align: left;
    font-size: 1rem;
}

.highline{
    font-weight: bold;
}

.selling-point-section{
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    width: 80%;
    margin: 2rem auto;
    padding-bottom: 2rem;
}

.selling-point-section .point-item img{
    max-width: 80%;
}

.product-image-list{
    background: #000;
}

.product-image-list img{
    max-width: 100%;
}

.image-section-two .image-grid{
    display: flex;
    width: 80%;
    margin: 0 auto;
    justify-content: space-evenly;
    padding: 2rem 0;
}

.image-grid .left-img,
.image-grid .right-img{
    width: 45%;
    position: relative;
    border: solid 1px #fff;
    border-radius: 10%;
}

.image-grid .left-img .grid-title,
.image-grid .right-img .grid-title{
    position: absolute;
    top: 10%;
    left: 10%;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
}

.watt-list{
    position: absolute;
    top: 30%;
    left: 10%;
    color: #ffd766;
    font-size: 1rem;
    font-weight: bold;
}

.watt-list .watt-tag{
    font-size: 14px;
}


.flavors-section{
    margin: 2rem auto;
    padding-bottom: 2rem;
    text-align: center;
}

.flavors-section .flavors-title{
    font-size: 1.938rem;
    text-align: center;
    font-weight: bold;
    margin: 1rem auto;
}

.flavors-list{
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.flavor-box{
    display: -ms-flexbox;
    display: flex;
    width: calc(20% - 10px);
    min-width: 10rem;
    /* background-color: #00c65e; */
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: .2rem;
    transition: width 0.5s ease-in-out, scale 0.5s ease-in-out;
    position: relative;
    z-index: 1;
}

.flavor-box .product-img img{
    max-width: 100%;
    height: auto;
}

.flavor-box .flavor-name{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    text-align: center;
    height: 3rem;
    border-radius: 1rem;
}

@keyframes dropText {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.flavor-box .flavor-name{
    transform: translateY(0);
    transition: all .4s ease-in-out;
}

/*.flavor-box:hover {
    backdrop-filter: blur(10px);
    background-color: rgba(70, 62, 62, 0.3);
    align-items: center;
    cursor: pointer;
    background-size: 110%;
    !* color: #fff; *!
}*/

.flavor-box:hover {
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

/*.flavor-box:hover .flavor-name {
    animation: dropText 0.5s forwards;
    transform: scale(1.2);
    border-radius: 1rem;
}*/

/*.flavor-box:hover .product-img{
    transform: scale(1.2);
}*/

.summer-glacier {
    background: linear-gradient(to right, #f5ea90 0%,  #f8efb6 100%);
}

.super-mint {
    background: linear-gradient(to right, #7ede60 0%,  #ade79b 100%);
}

.miami-mint {
    background: linear-gradient(to right, #45fffe 0%, #90fcfe 100%);
}

.mango-bomb {
    background: linear-gradient(to right, #ff9700 0%,  #feb63e 100%);
}

.triple-berry {
    background: linear-gradient(to right, #f76dcd 0%,  #f8caef 100%);
}

.blue-razz-ice {
    background: linear-gradient(to right, #3688eb 0%,  #53b6f1 100%);
}

.grape-ice {
    background: linear-gradient(to right, #b069eb 0%,  #cb94f2 100%);
}

.strawberry-watermelon {
    background: linear-gradient(to right, #f65158 0%,  #f78096 100%);
}

.watermelon-ice {
    background: linear-gradient(to right, #f53e2e 0%, #f77b6f 100%);
}

.green-apple {
    background: linear-gradient(to right, #83f77c 0%,  #b1f8b4 100%);
}

.banana-taffy {
    background: linear-gradient(to right, #f5ea90 0%, #f7f0bc 100%);
}

.strawberry-cream {
    background: linear-gradient(to right, #f76dcd 0%, #f7a3c4 100%);
}

.tropical-gummy {
    background: linear-gradient(to right, #f53e2e 0%, #f36a22 100%);
}

.cherry-b-pop {
    background: linear-gradient(to right, #b05287 0%, #e181be 100%);
}

.white-strawberry {
    background: linear-gradient(to right, #fec7dc 0%, #fadce6 100%);
}

.specification-title{
    text-align: center;
    font-size: 1.938rem;
    font-weight: bold;
    padding: 2rem;
}

.specification-container{
    display: -ms-flexbox;
    display: flex;
    gap: 10%;
    width: 80%;
    margin: 2rem auto;
}

.specification-img,.specification-params{
    width: 30%;
}

.specification-img{
    text-align: center;
}

.specification-img img{
    max-width: 100%;
    max-height: 500px;
}

.specification-params:nth-child(1){
    text-align: right;
}

.specification-params:nth-child(1) .param-line{
    width: 100%;
    height: 1px;
    background-color: #c2bebe;
    opacity: .5;
}

.param-item{
    margin: 1rem auto;
}

.param-name{
    font-weight: bold;
}

.param-value{
    color: #c2bebe;
    margin: .6rem auto;
}

.param-line{
    width: 100%;
    height: 1px;
    background-color: #c2bebe;
    opacity: .5;
}


@media (max-width: 767px) {
    .selling-point-section{
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0 auto;
    }

    .point-item{
        -ms-flex: 1 1 calc(25% - 30px);
        flex: 1 1 calc(25% - 30px);
    }

    .product-desc-section{
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .product-desc-section .product-desc{
        width: 100%;
        font-size: 1.2rem;
    }

    .product-desc-section .product-img{
        width: 100%;
    }

    .flavor-box {
        width: calc(50% - 10px);
        min-width: auto;
    }

    .specification-container{
        width: 90%;
        margin: 0 auto;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .specification-img, .specification-params{
        width: 100%;
        text-align: center;
    }

    .specification-params:nth-child(1){
        order: 2;
        text-align: center;
    }

    .specification-img{
        width: 90%;
        margin: 0 auto;
    }

    .specification-img img{
        max-height: 340px;
    }

    .image-section-two .image-grid{
        width: 100%;
    }

    .image-grid .left-img .grid-title,
    .image-grid .right-img .grid-title{
        top: 6%;
        left: 6%;
        font-size: .75rem;
    }

    /*.watt-list{*/
    /*    top: 25%;*/
    /*}*/

    .watt-list p{
        font-size: 14px;
        line-height: 1.2;
        margin-bottom: 5px;
    }
}

@media screen and (min-width:359px) and (max-width:390px){
    .watt-list p{
        font-size: 12px;
        line-height: 1.2;
        margin-bottom: 0;
    }

    .watt-list .watt-tag{
        font-size: 10px;
    }
}