.banner {
    padding-block: 3.125rem 1.25rem;
}

.banner .content {
    position: relative;
    background-position: right;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 3.125rem;
    border-radius: 12px;
    z-index: 1;
}

.banner .content::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 68%;
    height: 100%;
    background: linear-gradient(90deg,rgba(187, 31, 54, 1) 0%, rgba(187, 31, 54, 1) 90%, rgba(255, 255, 255, 0) 100%);;
    z-index: -1;
    border-radius: 12px;
}

.banner .text {
    max-width: 434px;
    position: relative;
    z-index: 5;
}

.banner .text * {
    color: #fff;
}

.banner .text *::selection {
    background-color: #fff;
    color: var(--c-primary);
}

.banner .text > :first-child {
    font-size: calc(var(--fs-lg, 30px) + 2px);
    line-height: 1.3;
    margin-bottom: 0.375rem;
}

.banner .text p {
    font-size: calc(var(--fs-xs, 14px) - 2px);
    margin-bottom: 0.875rem;
}

.banner .btns {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.banner .btns a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1.125rem;
    border-radius: 1.875rem;
}

.banner .btns a > :nth-child(2) {
    font-size: calc(var(--fs-xs, 14px) - 2px);
    text-transform: capitalize;
}

.banner .btns > :first-child {
    background-color: #fff;
    border: 2px solid transparent;
}

.banner .btns > :first-child:hover {
    background-color: transparent;
    border-color: #fff;
}

.banner .btns > :first-child * {
    color: var(--c-primary);
}

.banner .btns > :first-child:hover * {
    color: #fff;
}

.banner .btns > :first-child:hover img {
    filter: brightness(0) invert(1);
}

.banner .btns > :nth-child(2) {
    background-color: #9C122A;
    border: 2px solid transparent;
}

.banner .btns > :nth-child(2):hover {
    border-color: #fff;
} 

@media only screen and (max-width: 991px) {
    .banner {
        padding-block: 2rem 1.25rem;
    }

    .banner .content {
        padding: 2.25rem;
    }

    .banner .text > :first-child {
        font-size: var(--fs-md);
    }
}

@media only screen and (max-width: 767px) {
    .banner .content::before {
        width: 100%;
        background: linear-gradient(90deg,rgba(187, 31, 54, 1) 0%, rgba(187, 31, 54, 1) 40%, rgba(255, 255, 255, 0) 100%);
    }

    .banner .text {
        text-align: center;
        margin-inline: auto;
    }

    .banner .btns {
        justify-content: center;
    }
}

@media only screen and (max-width: 575px) {
    .banner {
        padding-block: 1rem;
    }

    .banner .content {
        padding: 1rem 1.25rem;
    }
}

.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
  position: relative;
  margin: 10% auto;
  padding: 0;
  width: 80%;
  max-width: 800px;
}

.close {
  position: absolute;
  top: -40px;
  right: -10px;
  color: white;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}

.modal iframe {
  width: 100%;
  height: 450px;
}

.videos {padding-bottom: 52px;}
.videos .wrapper {display: grid; grid-template-columns: minmax(640px, 830px) minmax(305px, 344px); gap: 32px 14px;}
.videos .cards {display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 14px;}
.videos .image {position: relative; border-radius: 12px; margin-bottom: 10px; overflow: hidden;}
.videos .image img {width: 100%; border-radius: 12px;}
.videos .image::before {position: absolute; inset: auto auto 12px 14px; width: 50px; height: 50px; background: no-repeat center/cover url('https://www.kolaxopackaging.com/theme/website/images/icons/play-video.png'); content: '';
z-index: 2;}
.videos .video > :nth-child(2) {font-size: calc(var(--fs-sm, 18px) - 1px); color: #1E1E1E;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;
} 
.videos .video > :nth-child(3) {font-size: calc(var(--fs-xs, 14px) - 5px); font-weight: 600; color: var(--c-primary);}
.videos .video:hover .image img {transform: scale(1.1); transition: var(--transition);}
.videos .video:hover> :nth-child(2) {color: var(--c-primary);}
.pagination {grid-column: 1 / -1; text-align: center; padding-inline:15px;margin-top: 20px}
.pagination li {display: inline-flex;}
.pagination li * {font-size: var(--fs-base, 16px); color: var(--c-primary); padding: 4px 10px;}
.pagination li :is(a.active,:hover) {background-color: var(--c-primary); color: #fff; border-radius: 4px;}
@media only screen and (max-width: 991px) {
    .videos {padding-bottom: 40px;}
    .videos .wrapper {grid-template-columns: 1fr;}
    .videos .cards {gap: 20px 14px;}
    .pagination {text-align: end;}
}
@media only screen and (max-width: 575px) {
    .videos {padding-bottom: 20px;}
    .videos .cards {grid-template-columns: 1fr; gap: 14px;}
    .videos .video {margin-inline: auto;}
}