.main-image-container {
    position: relative;
    text-align: center;
    overflow: hidden;
}
.cenWidth {
    width: 100vw;
}
.main-image {
    max-width: 100%;
    height: auto;
    transition: transform 0.5s ease;
    display: block;
}

.main-image.slide-out-left {
    transform: translateX(-100%);
}

.main-image.slide-out-right {
    transform: translateX(100%);
}

.main-image.slide-in-left {
    transform: translateX(-100%);
}

.main-image.slide-in-right {
    transform: translateX(100%);
}

.main-image.slide-in-center {
    transform: translateX(0);
}

.color-name {
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-family: Helvetica, sans-serif;
}

.color-name.active {
    opacity: 1;
}

.selector-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    background: rgba(0, 0, 0, 0.7);
    padding: 1rem;
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.color-selector {
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    opacity: 0.7;
}

.color-selector:hover {
    transform: scale(1.1);
    opacity: 1;
}

.color-selector.active {
    border-color: #fff;
    opacity: 1;
    transform: scale(1.5);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.cenConCol {
    padding: 1.95vw 13.8vw 1.8vw 13.8vw;
    text-align: center;
    color: #000;
}

.cenColDis {
    display: flex;
    justify-content: center;
    column-gap: 3.46vw;
    margin: 1.43vw 0 1.35vw 0;
}

.cenColGrid {
    display: grid;
    gap: 0.28vw;
    justify-items: center;
}

.cenConDis {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.14vw 0.85vw
}

@media (max-width: 768px) {
    .color-name {
        font-size: 1.2rem;
        bottom: 60px;
        left: 12%;
    }
    .color-selector.active {
        transform: scale(1.2);
    }
    .selector-grid {
        gap: 0.5rem;
        padding: 0.5rem;
        bottom: 10px;
        left: 0;
    }
}

.cenMin {
    padding: 9.323vw 11.615vw 9.375vw 10.26vw;
    background-color: #000;
    color: #fff;
    font-family: Helvetica;
}
.cenMinFlex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.cenMinGrid {
    display: grid;
    font-size: 1.146vw;
    line-height: 1.302vw;
    white-space: wrap;
    width: 8.229vw;
    gap: 1.979vw;
}
.cenMinGrid img {
    transition: transform 0.3s ease;
}
.cenMinGrid:hover img {
    cursor: pointer;
    transform: translateY(-15px);
}
.cenMinCon {
    font-size: 1.198vw;
    line-height: 1.875vw;
    margin-top: 6.354vw;
    text-align: justify;
    word-break: break-all;
}
.cenMun {
    background: url(/wp-content/uploads/2023/10/cenM200_003.webp) no-repeat top center;
    background-size: cover;
    padding: 5.625vw 0 13.281vw 10.885vw;
    font-family: Helvetica;
    color: #fff;
}
.cenMunTit {
    font-size: 2.5vw;
    line-height: 2.5vw;
    font-weight: bold;
    white-space: wrap;
}
.cenMunWid {
    width: 15.208vw;
}
.cenMunSubTit {
    font-size: 1.146vw;
    line-height: 1.6vw;
    text-align: justify;
    margin: 2.292vw 0 3.958vw 0;
}
.cenMunWid {
    width: 34.635vw;
}
.cenMunFlex {
    width: 29.828vw;
    background: #3c3a93;
    padding: 1.458vw 1.302vw 0.9375vw 1.615vw;
    display: flex;
    column-gap: 1.51vw;
    justify-content: space-between;
    border-radius: 15px;
    align-items: flex-start;
    font-size: 0.833vw;
    line-height: 1.302vw;
    text-align: justify;
}
.cenMunFlex img {
    width: 0.677vw;
    margin-top: 0.3125vw;
}
.cenMfea {
    background: url(/wp-content/uploads/2023/10/cenM200_004.webp) no-repeat top center;
    background-size: cover;
    padding: 13.542vw 0 14.583vw 10.9375vw;
    font-family: Helvetica;
    color: #fff;
}
.cenMfeaWid {
    width: 23.209vw;
}
.cenMsea {
    background: url(/wp-content/uploads/2023/10/cenM200_006.webp) no-repeat top center;
    background-size: cover;
    padding: 18.75vw 0 17.083vw 10.677vw;
    font-family: Helvetica;
    color: #fff;
}
.cenMseaWid {
    width: 19.875vw;
}
.cenMseaSubWid {
    width: 37.875vw;
}
.cenMmm {
    background: url(/wp-content/uploads/2023/10/cenM200_007.webp) no-repeat top center;
    background-size: cover;
    padding: 7.083vw 52.083vw 4.479vw 10.833vw;
    font-family: Helvetica;
    color: #fff;
}
.cenMmmWid {
    width: 16.85vw;
}
.cenMmmSubWid {
    width: 37.06vw;
    margin: 2.5vw 0 4.427vw 0;
}
.cenMmmFlex {
    display: flex;
    column-gap: 7.03vw;
}
.cenMmmGrid {
    display: grid;
    font-size: 1.25vw;
    line-height: 1.875vw;
    white-space: nowrap;
    gap: 1.5625vw;
    justify-items: center;
}
.cenMon {
    background: url(/wp-content/uploads/2023/10/cenM200_008.webp) no-repeat top center;
    background-size: cover;
    padding: 9.635vw 0 21.354vw 10.781vw;
    font-family: Helvetica;
    color: #fff;
}
.cenMonWid {
    width: 17.25vw;
}
.cenMonSubWid {
    width: 29.86vw;
}
.cenMspe {
    background: url(/wp-content/uploads/2023/10/cenM200_009.webp) no-repeat top center;
    background-size: cover;
    padding : 11.979vw 0 8.59375vw 10.677vw;
    font-family: Helvetica;
    color: #fff;
}
.cenMspeSubWid {
    width: 26.109vw;
    font-size: 1.146vw;
    line-height: 2.34375vw;
}
.main-selector {
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;
    display: grid;
    gap: 1vw;
    justify-items: center;
    z-index: 10;
}
@media only screen and (max-width: 768px) {
    .cenMin {
        padding: 5.323vw 3.15vw 4.375vw 3.15vw
    }
    .cenMinFlex {
        gap: 3vw 4vw;
        justify-content: flex-start;
    }
    .cenMinGrid {
        font-size: 3.146vw;
        line-height: 3.302vw;
        width: 20vw;
    }
    .cenMinCon {
        font-size: 3.198vw;
        line-height: 3.875vw;
    }
    .cenMun {
        padding: 5.625vw 0 13.281vw 3.15vw;
    }
    .cenMunTit {
        font-size: 5.5vw;
        line-height: 5.5vw;
    }
    .cenMunSubTit {
        font-size: 3.146vw;
        line-height: 3.6vw;
    }
    .cenMunWid {
        width: 46.95vw;
    }
    .cenMfea {
        padding : 13.542vw 0 14.583vw 3.15vw;
    }
    .cenMfeaWid {
        width: 47.209vw;
    }
    .cenMsea {
        padding: 18.75vw 0 17.083vw 3.15vw;
    }
    .cenMseaWid {
        width: 43.875vw;
    }
    .cenMseaSubWid {
        width: 55.875vw;
    }
    .cenMmm {
        padding: 7.083vw 52.083vw 4.479vw 3.15vw;
    }
    .cenMmmWid {
        width: 40.85vw;
    }
    .cenMmmSubWid {
        width: 51.06vw;
    }
    .cenMmmGrid {
        font-size: 2.05vw;
    }
    .cenMon {
        padding: 9.635vw 0 21.354vw 3.15vw;
    }
    .cenMonWid {
        width: 38.25vw;
    }
    .cenMonSubWid {
        width: 49.86vw;
    }
    .cenMspe {
        background: url(/wp-content/uploads/2023/10/mCenM200_009.webp) no-repeat top center;
        background-size: cover;
        padding: 10.979vw 0 42.59vw 3.15vw;
    }
    .cenMlimTit {
        font-size: 4.5vw;
        line-height: 4.5vw;
    }
    .cenMspeSubWid {
        width: 44.109vw;
    }
    .cenMunFlex img {
        width: 1.677vw;
        margin-top: 0.5vw;
    }
    .cenMunFlex {
        width: 47.828vw;
        font-size: 2.833vw;
        line-height: 3.302vw;
    }
    .main-selector {
        left: 5%;
        top: 80%;
    }
    .cenConCol {
        padding: 7.9vw 4.8vw 5.8vw 4.8vw;
    }
    .cenColDis {
        margin: 3.5vw 0;
    }
    .cenConDis {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5vw 2.85vw;
    }
}