/* ___ Addon ___ */
.addon { padding-top: 60px;}
.addon .head > :first-child { font-size: var(--fs-xl, 42px); font-weight: 800; text-align: center;}
.addon .head > :first-child span { color : var(--c-primary);}
.addon ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 30px;}
.addon li { font-size: calc(var(--fs-base, 16px) + 2px); font-weight: bold; line-height: 1.4; background-color: var(--_c-gray); display: flex; align-items: center; padding: 19px 18px; padding-left: 43px; border: 1px solid #000; border-radius: 12px; position: relative; transition: .4s ease;} 
.addon li:hover {background-color: var(--c-primary); color: #fff; border-color: var(--c-primary);}
.addon li::before { position: absolute; top: 50%; left: 16px; height: 20px; width: 20px; background: no-repeat center / cover url("https://www.partyenergizers.com/theme/website/images/icons/black-tick.png"); content: ""; transform: translateY(-50%);}
.addon li:hover::before {filter: invert(1);}

/* ___ TYPES ___ */
.types {padding-top: 60px;}
.types .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 20px;}
.types .content> :first-child{ font-size: var(--fs-xl, 42px); font-weight: 800; line-height: 1.3; text-align: center; margin-bottom: 6px;}
.types .content> :first-child span { color : var(--c-primary);}
.types .content ul {max-height: 630px; display: flex; flex-direction: column; gap: 14px; margin-top: 20px;}
.types .content li { font-size: calc(var(--fs-base, 16px) + 2px); font-weight: bold; line-height: 1.4; background-color: var(--_c-gray); padding: 19px 18px; padding-left: 43px; border: 1px solid #000; border-radius: 12px; cursor: pointer; position: relative;}
.types .content li:hover{ background: var(--c-primary); color: #fff; border: 1px solid var(--c-primary); }
.types .content li::before { position: absolute; top: 50%; left: 16px; height: 20px; width: 20px; background: no-repeat center / cover url("https://www.partyenergizers.com/theme/website/images/icons/black-tick.png"); content: ""; transform: translateY(-50%);}
.types .content li:hover::before {filter: invert(1);}
.types .images img {width: 100%; height: 680px; object-fit: cover; border-radius: 20px;}
.types .content li.active { background-color: var(--c-primary); color: #fff; border: 1px solid var(--c-primary);}
.types .content li.active::before { filter: invert(1);}

@media only screen and (max-width: 1200px) {
    /* Addon */
    .addon li {padding: 14px; padding-left: 43px;}
    /* Types */
    .types .content ul {max-height: 470px;}
    .types .images img {height: 530px;}
}

@media only screen and (max-width : 991px) {
    /* Addon */
    .addon {padding-top: 50px;}
    /* Types */
    .types {padding-top: 50px;}
    .types .wrapper {grid-template-columns: 1fr;}
    .types .images {max-width: 500px; margin-inline: auto;}
    .types .images img {height: 450px;}
}

@media only screen and (max-width: 575px) {
    /* Addon */
    .addon {padding-top: 40px;}
    .addon ul {grid-template-columns: 1fr; margin-top: 20px;}
    /* Types */
    .types {padding-top: 40px;}
    .types .content ul {max-height: 460px;}
    .types .content li {padding-left: 38px;}
    .types .content li::before {width: 18px; height: 18px; top: 32px; left: 12px;}
    .types .images {max-width: 100%;;}
    .types .images img {height: 350px;}
}

@media only screen and (max-width: 475px) {
    /* Addon */
    .addon li { padding: 10px; padding-left: 35px; }
    .addon li::before {height: 15px; width: 15px; left: 11px;}
}