body {
    background-color: #ffffff;
}

.product-flex-outer-container {
    display: flex;
    flex-direction: column;
    gap: 5%;
    padding: 8% 3% 0 3%;
    margin-bottom: 2%;
    /* min-height: 100vh; */
}

.product-flex-outer-container h1 {
    font-size: 3vw;
    color: #dc2827;
}

.product-flex-outer-container p {
    width: 50%;
    margin: 1% 0;
}

.product-flex-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* flex: 1; */
    margin-top: 2%;
}


.product-left-container {
    flex: 1.5;
}

.product-right-container {
    flex: 1;
    height: -webkit-fill-available;
    height: -moz-available;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.product-features-details {
    display: flex;
    flex-direction: column;
}

.product-feature-row {
    display: flex;
    align-items: center;
    width: 90%;
    margin-top: 2%;
    padding: 2% 0 0 0;
    border-top: 1px solid #ccc;
}

.product-feature-type {
    font-weight: bold;
    color: #792d2d;
    ;
}

.product-feature-row>div {
    flex: 1;
}

.product-image {
    background-color: #ffffff;
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.product-image img {
    height: auto;
    width: 100%;
    object-fit: cover;
}

.color-flex-container {
    display: flex;
    height: 100%;
    gap: 2%;
}

.color-flex-container>div {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    cursor: pointer;
    outline: 2px solid transparent;
    transition: all .3s ease-in-out;
}

.color-flex-container>div.active {
    outline: 2px solid #dc2827;
}

.color-flex-container .black {
    background-color: #000;
    border: 1px solid #000;
}

.color-flex-container .white {
    background-color: #fff;
    border: 1px solid #000;
}

.color-flex-container .transparent {
    background-color: transparent;
    border: 1px solid #000;
}

.color-flex-container .red {
    background-color: #FF0004;
    border: 1px solid #FF0004;
}

.color-flex-container .golden {
    background-color: #f5c22c;
    border: 1px solid #f5c22c;
}

.color-flex-container .green {
    background-color: #465E39;
    border: 1px solid #465E39;
}

.color-flex-container .wireframe {
    background-color: transparent;
    border: 1px solid #000;
}

@media screen and (max-width: 991px) {

    .product-flex-outer-container h1 {
        text-align: center;
        font-size: 5vw;
    }

    .product-flex-outer-container {
        padding: 15% 3% 0 3%;
    }

    .product-flex-outer-container p {
        width: 100%;
        padding: 2% 4%;
        margin: unset;
    }

    .product-flex-container {
        flex-direction: column-reverse;
        width: 90%;
        margin: 3% auto;
        gap: 5vw;
    }

    .product-features-details {
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .product-left-container {
        flex: 1;
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .product-flex-outer-container h1 {
        text-align: left;
        font-size: 5.75vw;
        margin-top: 2.5rem;
        padding: 0 5%;
    }

    .color-flex-container {
        gap: 5%;
    }

    .product-flex-outer-container p {
        width: 100%;
        padding: 2% 5%;
        margin: 4% 0;
        font-size: 3.25vw;
        text-align: justify;
    }
}

/************************************************************************************ product features  ******************************************************/

.pro-features-main-section {
    width: 100%;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.pro-features-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.pro-features-column {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.pro-features-heading {
    font-size: 2rem;
    font-weight: 700;
    color: #c62828;
    display: inline-block;
    margin: 0 auto;
    padding-bottom: 16px;
    width: fit-content;
    border-bottom: 3px solid #c62828;
}

.pro-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pro-features-item {
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s ease;
}

.pro-features-item:hover {
    transform: translateX(8px);
}

/* Icon Wrapper - Rounded Square Container */
.pro-features-icon-wrapper {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pro-features-icon {
    width: 36px;
    height: 36px;
    transition: transform 0.3s ease;
}

.pro-features-content {
    flex: 1;
    display: flex;
    align-items: center;
}

.pro-features-text {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #000000;
    font-weight: 400;
    margin-top: -.25vw;
}

/* ============================================ */
/* COLORFUL GRADIENT BACKGROUNDS */
/* ============================================ */

.pro-features-bg-green {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

.pro-features-bg-blue {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
}

.pro-features-bg-orange {
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
}

.pro-features-bg-pink {
    background: linear-gradient(135deg, #ed64a6 0%, #d53f8c 100%);
}

.pro-features-bg-purple {
    background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%);
}

.pro-features-bg-teal {
    background: linear-gradient(135deg, #38b2ac 0%, #319795 100%);
}

.pro-features-bg-yellow {
    background: linear-gradient(135deg, #ecc94b 0%, #d69e2e 100%);
}

.pro-features-bg-red {
    background: linear-gradient(135deg, #fc8181 0%, #f56565 100%);
}

.pro-features-bg-gray {
    background: linear-gradient(135deg, #718096 0%, #4a5568 100%);
}

/* ============================================ */
/* ICON ANIMATIONS */
/* ============================================ */

.pro-features-item:hover .pro-features-icon-wrapper {
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.pro-features-item:hover .pro-features-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Shield pulse */
@keyframes shield-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

.pro-features-bg-green .pro-features-icon {
    animation: shield-pulse 2s ease-in-out infinite;
}

/* Lock swing */
@keyframes lock-swing {

    0%,
    100% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(3deg);
    }

    20% {
        transform: rotate(-3deg);
    }

    30% {
        transform: rotate(2deg);
    }

    40% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(0deg);
    }
}

.pro-features-bg-blue .pro-features-icon {
    animation: lock-swing 3s ease-in-out infinite;
}

/* Temperature wave */
@keyframes temp-wave {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-3px);
    }
}

.pro-features-bg-orange .pro-features-icon {
    animation: temp-wave 2.5s ease-in-out infinite;
}

/* Stack float */
@keyframes stack-float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-4px);
    }
}

.pro-features-bg-pink .pro-features-icon {
    animation: stack-float 2.5s ease-in-out infinite;
}

/* Resize breathe */
@keyframes resize-breathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.pro-features-bg-purple .pro-features-icon {
    animation: resize-breathe 2s ease-in-out infinite;
}

/* Utensils wiggle */
@keyframes utensils-wiggle {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(4deg);
    }

    75% {
        transform: rotate(-4deg);
    }
}

.pro-features-bg-teal .pro-features-icon {
    animation: utensils-wiggle 2.5s ease-in-out infinite;
}

/* Sparkle twinkle */
@keyframes sparkle-twinkle {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: scale(1.12) rotate(45deg);
        opacity: 0.85;
    }
}

.pro-features-bg-yellow .pro-features-icon {
    animation: sparkle-twinkle 2s ease-in-out infinite;
}

/* Temperature pulse */
@keyframes thermo-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

.pro-features-bg-red .pro-features-icon {
    animation: thermo-pulse 2s ease-in-out infinite;
}

/* Store bounce */
@keyframes store-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.pro-features-bg-gray .pro-features-icon {
    animation: store-bounce 2.5s ease-in-out infinite;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .pro-features-container {
        gap: 60px;
    }

    .pro-features-heading {
        font-size: 1.75rem;
    }

    .pro-features-text {
        font-size: 1rem;
    }

    .pro-features-icon-wrapper {
        width: 58px;
        height: 58px;
    }

    .pro-features-icon {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 768px) {
    .pro-features-main-section {
        padding: 60px 16px;
    }

    .pro-features-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .pro-features-heading {
        font-size: 1.5rem;
    }

    .pro-features-list {
        gap: 20px;
    }

    .pro-features-icon-wrapper {
        width: 54px;
        height: 54px;
    }

    .pro-features-icon {
        width: 30px;
        height: 30px;
    }

    .pro-features-text {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .pro-features-main-section {
        padding: 40px 16px;
    }

    .pro-features-heading {
        font-size: 1.375rem;
    }

    .pro-features-item {
        gap: 16px;
    }

    .pro-features-icon-wrapper {
        width: 50px;
        height: 50px;
    }

    .pro-features-icon {
        width: 28px;
        height: 28px;
    }

    .pro-features-text {
        font-size: 0.9rem;
    }
}