.details,
.testimonials {
    --_c-text: #686868
}

.banner .container {
    max-width: 100%;
    padding: 0;
    text-align: center
}

.banner .slider {display: flex; align-items: center; overflow: hidden;}
.banner .slider-card {min-width: 100%;}
.banner .dots {display: none !important;}

.showcase {
    padding-block: 32px 50px;
    --_c-bg-light: #d9d9d91a
}

.showcase .head {
    margin-bottom: 46px;
    text-align: center
}

.showcase .head>:first-child {
    font-size: var(--fs-xl, 36px);
    font-weight: 600;
    margin-bottom: 12px
}

.showcase .head p {
    max-width: 975px;
    margin-inline: auto;
    height:75px;

}

.showcase .wrapper {
    display: grid;
    place-items: center;
    grid-template-columns: var(--showcase-columns, repeat(4, 1fr));
    gap: var(--showcase-gap, 40px 22px);
    margin-bottom: 43px
}

.showcase .product-item {
    width: 100%;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
    transition: var(--transition);
}

.showcase .product-item img {
    display: block;
    height: 282px;
    object-fit: cover;
    background-color: var(--_c-bg-light);
    margin: 0 auto 20px;
    border-radius: 15px;
    border: 1px solid #e5e5e5e5;
    transition: transform .4s;
}

.showcase .product-item:hover img {
    transform: scale(0.98);
}

.showcase .product-item :nth-child(2) {
    font-size: var(--fs-sm, 18px);
    font-weight: 600;
    text-transform: capitalize;
    color: #000;
    display: block
}

.showcase .product-item:hover :nth-child(2) {
    color: var(--c-primary)
}

.showcase .all-products a {
    width: 179px;
    margin-inline: auto
}

.services {
    padding-bottom: 40px
}

.services .head {
    margin-bottom: 40px;
    text-align: center
}

.services .head>:first-child {
    font-size: var(--fs-xl, 36px);
    font-weight: 600;
    line-height: var(--lh-df);
    margin-bottom: 11px
}

.services .head p {
    max-width: 995px;
    max-height: 52px;
    margin-inline: auto
}

.services .wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px
}

.services .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px
}

.services .content p {
    max-width: 325px
}

.brand .content li a:not(.button):hover+*,
.services .content:hover>svg {
    filter: var(--fl-primary)
}

.podcast {
    padding-block: 40px;
    --_c-border: #AEAEAE4D;
    --_c-light: #686868
}

.podcast .wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 135px
}

.podcast .content {
    max-width: 570px;
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.podcast .content>:first-child * {
    position: relative;
    display: block;
    font-size: var(--fs-base, 16px);
    color: var(--c-primary);
    font-weight: 500;
    line-height: 1;
    padding-left: 35px;
    margin-bottom: 24px
}

.podcast .content>:first-child ::before {
    position: absolute;
    top: 2px;
    left: 9px;
    width: 14px;
    height: 14px;
    background: url('https://www.kolaxopackaging.com/theme/website/images/icons/diamond.png') center/cover no-repeat;
    content: ''
}

.podcast .content>:first-child {
    font-size: var(--fs-xl, 36px);
    font-weight: 700;
    line-height: var(--lh-df);
    margin-block: 15px
}

.podcast .content>p {
    max-height: 84px;
    font-size: var(--fs-sm, 18px)
}

.podcast .content p:has(br) {
    display: none
}

.podcast .content :where(ul, ol) {
    position: relative;
    width: 50%;
    border-left: 1px dotted var(--_c-border);
    padding-left: 16px;
    margin-top: 25px
}

.podcast .content :where(ul, ol)::before {
    position: absolute;
    top: 40px;
    left: -3px;
    width: 5px;
    height: 23px;
    background-color: var(--c-primary);
    content: ''
}

.podcast .content :where(ul, ol) :first-of-type * {
    display: block;
    font-size: calc(var(--fs-md, 24px) - 2px);
    font-weight: 700;
    color: #000
}

.podcast .content :where(ul, ol) :nth-child(2) * {
    display: block;
    font-size: var(--fs-sm, 18px);
    font-weight: 600;
    color: #000
}

.podcast .content li {
    color: var(--c-light)
}

.podcast .content li:not(:last-of-type) {
    margin-bottom: 12px
}

.podcast .content li * {
    line-height: 1
}

.podcast  .scroll-p > :where(ol, ul) > :last-child {overflow-y: auto; padding-right: 7px; height: 50px;}
.podcast  .scroll-p > :where(ol, ul) > :last-child::-webkit-scrollbar {width: 8px;}
.podcast  .scroll-p > :where(ol, ul) > :last-child::-webkit-scrollbar-track {width: 10px; border-radius: 8px; background-color: #efefef; visibility: hidden;}
.podcast  .scroll-p > :where(ol, ul) > :last-child::-webkit-scrollbar-thumb {border-radius: 8px; background-color: var(--c-scroll); visibility: hidden;}
.podcast  .scroll-p > :where(ol, ul) > :last-child:hover::-webkit-scrollbar-track {visibility: visible;}
.podcast  .scroll-p > :where(ol, ul) > :last-child:hover::-webkit-scrollbar-thumb {visibility: visible;}
@supports not selector(::-webkit-scrollbar) {
	.podcast  .scroll-p > :where(ol, ul) > :last-child {overflow-y: auto; scrollbar-width: thin; scrollbar-color: transparent transparent;}
	.podcast  .scroll-p > :where(ol, ul) > :last-child:hover { scrollbar-color: var(--c-scroll) #efefef; }
}



.advisory {
    padding-block: 40px 75px
}

.brand,
.details,
.ideas {
    padding-block: 35px
}

.advisory .wrapper {
    display: grid;
    grid-template-columns: minmax(400px, 509px) minmax(420px, 570px);
    gap: 100px;
    align-items: center
}

.advisory .content>:first-child * {
    display: block;
    width: fit-content;
    color: var(--c-primary);
    background-color: var(--c-bg);
    font-size: var(--fs-base, 16px);
    font-weight: 500;
    line-height: 1;
    padding: 10px
}

.advisory .content>:first-child {
    font-size: var(--fs-xl, 36px);
    font-weight: 700;
    line-height: var(--lh-df);
    margin-bottom: 10px
}

.advisory .content p {
    max-height: 58px;
    font-size: var(--fs-sm, 18px)
}

.advisory .content :where(ol, ul) {
    margin-block: 30px 55px
}

.advisory .content li {
    position: relative;
    font-size: var(--fs-base, 16px);
    height: 30px;
    margin-bottom: 10px;
    padding-left: 40px;
    display: flex;
    align-items: center
}

.advisory .content li:last-child {
    margin: 0
}

.advisory .content li::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background: url('https://www.kolaxopackaging.com/theme/website/images/icons/tick-solid.svg') center/30px no-repeat;
    content: ''
}

.advisory .content>a.button {
    width: 141px;
    float: right
}

.advisory .advisory-image {
    position: relative
}

.advisory .advisory-image::before {
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 100%;
    max-width: 495px;
    height: 100%;
    max-height: 530px;
    background-color: var(--c-bg);
    border-radius: 10px;
    z-index: -1;
    content: ''
}

.advisory .advisory-image img {
    width: 100%;
    max-width: 509px;
    max-height: 533px;
    object-fit: cover;
    border-radius: 10px
}

.brand {
    --_c-primary-lt: #BB1F36CC;
    --_c-shadow: #0000001A
}

.brand .wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 72px;
    align-items: center
}

.brand .content {
    max-width: 440px
}

.brand .content>:first-child {
    font-size: var(--fs-xl, 36px);
    font-weight: 700;
    line-height: var(--lh-xs);
    margin-bottom: 15px
}

.brand .content p {
    max-height: 48px
}

.brand .content :where(ul, ol) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px 28px;
    margin-top: 30px
}

.brand .content li {
    display: inline-flex;
    align-items: center;
    gap: 10px
}

.brand .content li a.button {
    width: 221px
}

.brand .content li a:not(.button) {
    color: #000;
    font-size: var(--fs-base, 16px);
    font-weight: 700
}

.brand .steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 54px;
    margin-top: 52px
}

.brand .steps li {
    max-width: 241px;
    display: flex;
    align-items: center;
    gap: 19px;
    font-size: var(--fs-sm, 18px);
    font-weight: 600;
    line-height: var(--lh-df)
}

.brand .steps li :first-child {
    color: var(--_c-primary-lt);
    background-color: var(--c-bg);
    font-size: calc(var(--fs-xl, 36px) - 2px);
    font-weight: 800;
    font-style: italic;
    padding: 10px;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0 0 10px 4px var(--_c-shadow)
}

.brand .steps li:hover :first-child {
    background-color: var(--c-primary);
    color: #fff
}

.ideas .wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 48px;
    place-items: center
}

.ideas .content {
    max-width: 557px
}

.ideas .content>:first-child * {
    display: block;
    width: fit-content;
    color: var(--c-primary);
    background-color: var(--c-bg);
    font-size: var(--fs-base, 16px);
    font-weight: 500;
    line-height: 1;
    padding: 10px
}

.ideas .content>:first-child {
    font-size: var(--fs-xl, 36px);
    font-weight: 700;
    line-height: var(--lh-df);
    margin-block: 15px 35px
}

.ideas .content :where(ul, ol) {
    margin-bottom: 42px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 33px
}

.ideas .content li {
    max-width: 262px
}

.ideas .content li>:first-child {
    position: relative;
    height: 38px;
    display: flex;
    align-items: center;
    font-size: var(--fs-sm, 18px);
    font-weight: 600;
    margin-bottom: 10px;
    padding-left: 62px
}

.ideas .content li>:first-child::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 38px;
    height: 38px;
    content: ''
}

.ideas .content li:first-child>:first-child::before {
    background: url('https://www.kolaxopackaging.com/theme/website/images/icons/fonts-t.svg') center/cover no-repeat
}

.ideas .content li:nth-child(2)>:first-child::before {
    background: url('https://www.kolaxopackaging.com/theme/website/images/icons/design-rectengular-2.svg') center/cover no-repeat
}

.ideas .content li:nth-child(3)>:first-child::before {
    background: url('https://www.kolaxopackaging.com/theme/website/images/icons/diamond-round-2.svg') center/cover no-repeat
}

.ideas .content li:nth-child(4)>:first-child::before {
    background: url('https://www.kolaxopackaging.com/theme/website/images/icons/image-2.svg') center/cover no-repeat
}

.ideas .content>a.button-lt {
    width: 157px
}

.details .wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    background-color: var(--c-bg);
    padding-top: 60px;
    border-radius: 30px
}

.details .content {
    padding: 0 15px 15px;
    max-height: 440px
}

.details .content h2 {
    font-size: var(--fs-md, 24px);
    font-weight: 700;
    line-height: var(--lh-df);
    margin-block: 20px 15px
}

.details .content :where(h3, h4) {
    font-size: 20px;
    font-weight: 700;
    line-height: var(--lh-df);
    margin-block: 20px 15px
}

.details .content :where(h2, h3, h4):first-child {
    margin-top: 0
}

.details .content p {
    color: var(--_c-text);
    line-height: var(--lh-xl);
    margin-bottom: 15px
}

.details .content :where(ul, ol) {
    margin-bottom: 10px
}

.details .content :where(ul, ol) li {
    list-style: disc inside
}

.details .content ol li {
    list-style: decimal inside
}

.details .content li:not(:last-of-type) {
    color: var(--_c-text);
    margin-bottom: 5px
}

.details .details-image img {
    max-height: 489px;
    object-fit: contain;
    border-radius: 50px 0 0
}

.testimonials {
    padding-block: 35px 65px
}

.testimonials .title {
    margin-bottom: 35px;
    text-align: center
}

.testimonials .title :first-child {
    font-size: calc(var(--fs-xl, 36px) + 6px);
    font-weight: 600;
    line-height: var(--lh-xl)
}

.testimonials .wrapper {
    overflow-x: hidden;
    display: flex;
    align-items: flex-start;
    gap: 27px
}

.testimonials .slider-card {
    min-width: calc(33.3333% - 19px)
}

.testimonials .review {
    background-color: var(--c-bg);
    border-radius: 20px;
    padding: 26px
}

.testimonials .review>:first-child {
    display: block;
    font-size: var(--fs-base, 16px);
    font-weight: 700;
    line-height: var(--lh-xl)
}

.testimonials .review :where(ul, ol) {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 23px
}

.testimonials .review>:nth-child(3) {
    display: block;
    font-size: calc(var(--fs-sm, 18px) + 2px);
    font-weight: 600;
    line-height: var(--lh-df);
    margin-bottom: 10px;
    max-width: 300px
}

.testimonials .review>p {
    height: 174px;
    color: var(--_c-text)
}

@media only screen and (width <=1200px) {
    .podcast .wrapper {
        gap: 80px
    }

    .advisory .wrapper {
        gap: 70px
    }

    .brand .steps {
        column-gap: 0
    }

    .ideas .content {
        max-width: 460px
    }

    .details .wrapper {
        align-items: flex-end
    }

    .testimonials {
        --fs-md: 22px
    }
}

@media only screen and (width <=991px) {
    .services .wrapper {
        grid-template-columns: repeat(3, 1fr)
    }

    .advisory .wrapper,
    .brand .wrapper,
    .podcast .wrapper {
        grid-template-columns: 1fr
    }

    .podcast .wrapper {
        gap: 30px;
        padding: 0
    }

    .advisory .content,
    .brand .content,
    .ideas .content,
    .podcast .content {
        max-width: 100%
    }

    .details .details-image,
    .ideas .ideas-image,
    .podcast .podcast-image {
        order: -1;
        margin-inline: auto
    }

    .advisory .advisory-image {
        width: fit-content;
        margin-inline: auto
    }

    .brand .wrapper {
        gap: 30px
    }

    .brand .brand-image {
        max-width: 480px;
        margin-inline: auto
    }

    .brand .steps {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px
    }

    .ideas .wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
        place-items: unset
    }

    .details .wrapper {
        grid-template-columns: 1fr;
        padding: 0
    }

    .details .content {
        max-height: 456px
    }
}

@media only screen and (width <=767px) {
    .showcase .product-item img {
        max-height: 230px;
        margin-bottom: 15px
    }

    .services {
        padding-bottom: 30px
    }

    .services .wrapper {
        grid-template-columns: repeat(2, 1fr)
    }

    .podcast {
        padding-block: 20px
    }

    .podcast .content>p {
        max-height: 98px
    }

    .advisory {
        padding-block: 20px 30px
    }

    .advisory .wrapper {
        gap: 50px
    }

    .advisory .content p,
    .brand .content p {
        max-height: 74px
    }

    .advisory .advisory-image::before {
        bottom: -30px;
        right: -30px
    }

    .testimonials {
        --fs-md: 20px
    }

    .testimonials .wrapper {
        gap: 20px
    }

    .testimonials .review {
        padding: 20px
    }

    .testimonials .slider-card {
        min-width: calc(50% - 14.5px)
    }
}

@media only screen and (width <=575px) {
    .podcast .content {
        display: block
    }

    .podcast .content :where(ul, ol, li) {
        width: 100%;
        max-width: 100%
    }

    .advisory .wrapper {
        gap: 20px
    }

    .advisory .advisory-image::before {
        content: none
    }

    .testimonials {
        --fs-xl: 26px;
        --fs-md: 18px
    }

    .testimonials .slider-card {
        min-width: calc(100% - 1px)
    }

    .testimonials .review>:nth-child(3) {
        max-width: 100%
    }

    .testimonials .review>p {
        height: 96px
    }
}

@media only screen and (width <=475px) {
    .showcase .head {
        margin-bottom: 30px
    }

    .showcase .product-item img {
        height: auto;
        max-height: 100%
    }

    .showcase .product-item :nth-child(2) {
        text-align: center
    }

    .services .wrapper {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .services .content {
        gap: 8px;
        place-items: center;
        text-align: center
    }

    .podcast .content :where(ul, ol) {
        gap: 15px
    }

    .brand .steps {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 30px
    }

    .brand .steps li :first-child {
        width: 48px;
        height: 48px
    }

    .ideas .wrapper {
        padding: 0
    }

    .ideas .content :where(ul, ol) {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .ideas .content>a.button-lt {
        margin-inline: auto
    }

    .testimonials {
        --fs-xl: 22px
    }
}