img#\31 0logo,
img#noiselogo,
img#amlogo {
    height: 55px;
    width: 55px;
    margin: 0 5px;
}
.certification-logos {
    position: absolute;
    bottom: 40px;
    right: 40px;
    display: flex;
    justify-content: center;
}
img#aqsr {
    border-radius: 30px;
}
.showcase-container {
    position: relative;
    width: 100%;
    margin-top: -2% !important;
}
.showcase-content-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    /* display: none; */
}
.showcase-image-container {
    position: relative;
    width: 100%;
}
.showcase-main-image {
    width: 100%;
    height: auto;
    display: block;
}
.product-dot {
    position: absolute;
    background-color: #00A7B5;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #fff;
    z-index: 1;
}
.product-dot::before {
    content: attr(data-product);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    color: #ffffff;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    margin-bottom: 8px;
    background: #333F48;
    border-radius: 12px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.product-dot::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #333F48;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    margin-bottom: 3.2px;
}
.product-dot:hover {
    transform: scale(1.5);
    background-color: #0590a6;
}
.product-dot:active {
    /* Make dots unclickable */
    pointer-events: none;
}
.product-dot:hover::before,
.product-dot:hover::after {
    opacity: 1;
    visibility: visible;
    z-index: 1001;
}
/* Dot positions */
#dot1 {
    top: 19.5%;
    left: 36.5%;
}
#dot2 {
    top: 28%;
    left: 39%;
}
#dot3 {
    top: 25.5%;
    left: 43%;
}
#dot4 {
    top: 19.5%;
    left: 43%;
}
#dot5 {
    top: 21%;
    left: 49%;
}
#dot6 {
    top: 17%;
    left: 51%;
}
#dot7 {
    top: 15%;
    left: 56%;
}
#dot8 {
    top: 34%;
    left: 35.5%;
}
#dot9 {
    top: 43%;
    left: 46%;
}
#dot10 {
    top: 33%;
    left: 58%;
}
#dot11 {
    top: 38%;
    left: 65%;
}
#dot12 {
    top: 48%;
    left: 62%;
}
#dot13 {
    top: 51%;
    left: 56%;
}
#dot14 {
    top: 59%;
    left: 70%;
}
#dot15 {
    top: 60%;
    left: 48%;
}
#dot16 {
    top: 68%;
    left: 58%;
}
#dot17 {
    top: 71%;
    left: 42.5%;
}
#dot18 {
    top: 60%;
    left: 37%;
}
#dot19 {
    top: 55%;
    left: 28%;
}
#dot20 {
    top: 43%;
    left: 26%;
}
#dot21 {
    top: 45%;
    left: 18.5%;
}
#dot22 {
    top: 52%;
    left: 16%;
}
.content-title {
    margin-bottom: 10px;
    font-weight: 700;
}
@media screen and (min-width: 1px) and (max-width: 900px) {
    .product-dot {
        visibility: hidden;
    }
}
@media screen and (min-width: 901px) and (max-width: 9000px) {
    .product-dot {
        visibility: visible;
    }
}
div#keyfeatures-content {
    display: flex;
    align-items: center;
    padding-top: 20px;
}
p#contentfeature {
    border-bottom: 1px solid #EBEBEE;
    border-top: 1px solid #EBEBEE;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    margin-bottom: 0;
}
p#contentfea {
    border-bottom: 1px solid #EBEBEE;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    margin-bottom: 0;
}
div#rhod-button {
    display: flex;
    justify-content: flex-end;
    position: relative;
}
button#title-render {
    background-color: #00A7B5;
    color: #fff;
    font-weight: 600;
    box-shadow: 7px 5px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}
button#title-render:hover {
    background-color: #94193b;
    cursor: pointer;
    transform: translateY(-3px);
}
#dot23 {
    top: 11.5%;
    left: 60%;
}
#dot24 {
    top: 22%;
    left: 42%;
}
#dot25 {
    top: 32%;
    left: 46.5%;
}
#dot26 {
    top: 36%;
    left: 85.5%;
}
#dot27 {
    top: 36%;
    left: 63%;
}
#dot28 {
    top: 48%;
    left: 71%;
}
#dot29 {
    top: 49%;
    left: 54%;
}
#dot30 {
    top: 61%;
    left: 50.5%;
}
#dot31 {
    top: 60%;
    left: 36%;
}
#dot32 {
    top: 67%;
    left: 25%;
}
#dot33 {
    top: 49%;
    left: 30%;
}
#dot34 {
    top: 39%;
    left: 33%;
}
#dot35 {
    top: 46.5%;
    left: 21%;
}
#dot36 {
    top: 42%;
    left: 14%;
}
#dot37 {
    top: 34.5%;
    left: 33%;
}
@media screen and (min-width: 1px) and (max-width: 1440px) {
    div#keyfeatures-content {
        flex-direction: column;
    }
    div#showcase-image2 {
        width: 100%;
        transform: scale(1);
    }
    .content-features {
        width: 100%;
        margin: auto;
    }
    div#rhod-button {
        top: -20px;
    }
    p#descriptionkf {
        font-size: 12px;
    }
    button#title-render {
        font-size: 14px;
        padding: 12px 22px;
    }
    #dot23,
    #dot24,
    #dot25,
    #dot26,
    #dot27,
    #dot28,
    #dot29,
    #dot30,
    #dot31,
    #dot32,
    #dot33,
    #dot34,
    #dot35,
    #dot36,
    #dot37 {
        visibility: hidden;
    }
}
@media screen and (min-width: 1441px) and (max-width: 9000px) {
    div#keyfeatures-content {
        flex-direction: row;
    }
    div#showcase-image2 {
        width: 60%;
        transform: scale(1.1);
    }
    .content-features {
        width: 40%;
        margin: auto;
    }
    div#rhod-button {
        top: -70px;
        right: 20px;
    }
    p#descriptionkf {
        font-size: 13px;
    }
    button#title-render {
        font-size: 16px;
        padding: 16px 24px;
    }
    #dot23,
    #dot24,
    #dot25,
    #dot26,
    #dot27,
    #dot28,
    #dot29,
    #dot30,
    #dot31,
    #dot32,
    #dot33,
    #dot34,
    #dot35,
    #dot36,
    #dot37 {
        visibility: visible;
    }
}
p#descriptionkf {
    width: 600px;
    text-align: end;
    font-style: italic;
    text-wrap-style: balance;
}
