/* BANNER */
.banner {height: 43.313rem; background-repeat: no-repeat; background-position: center; background-size: cover; padding-block: 7.5rem 12.063rem; transition: var(--trans-6);}
.banner .container {height: 100%;}
.banner .title {max-width: 31rem; height: calc(100% - 4.375rem); transition: var(--trans-4);}
.banner .title > :first-child {font-size: calc(var(--fs-xl, 36px) + 14px); font-weight: 700; margin-bottom: 10px;}
.banner .title > :first-child * {display: block; font-size: var(--fs-base, 16px); color: var(--c-secondary);}
.banner .title p {font-weight: 500; margin-bottom: 2.125rem; color: var(--c-tertiary); height: 14rem;}
.banner .title .custom__btn {margin-left: auto;}

/* PRODUCTS */
.products {padding-block: 3.5rem;}
.products .content {text-align: center;}
.products .content :first-child {font-size: calc(var(--fs-xl , 36px) - 4px); color: var(--c-tertiary); margin-bottom: 1.563rem;}
.products .content p {margin-bottom: 2.563rem; height: 2.7rem;}
.products .wrapper {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center;}
.products .wrapper a img {width: 100%; margin-bottom: 0.3rem;}
.products a :last-child {color: var(--c-tertiary); font-size: calc(var(--fs-md, 24px) - 2px);}
.products a:hover :last-child {color: var(--c-secondary);}

/* PRODUCTS 2 */
.variety {padding-block: 3.5rem;}
.variety .content {text-align: center;}
.variety .content :first-child {font-size: calc(var(--fs-xl , 32px) - 4px); color: var(--c-tertiary); margin-bottom: 1.563rem;}
.variety .content p {margin-bottom: 2.563rem; height: 1.5rem;}
.variety .wrapper {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; text-align: center;}
.variety .wrapper a img {width: 100%; margin-bottom: 0.3rem;}
.variety a :last-child {color: var(--c-tertiary); font-size: calc(var(--fs-md, 24px) - 2px); font-weight: 600;}
.variety a:hover :last-child {color: var(--c-secondary);}

/* QUOTE */
.quote {padding-block: 3.5rem; position: relative; --_c-blue-100: #f4f9ff; --_fs-mega: 170px;}
.quote::before {position: absolute; bottom: 140px; left: -170px; font-size: var(--_fs-mega); font-weight: 700; line-height: 200px; color: var(--_c-blue-100); transform: rotate(-90deg); z-index: -1; content: 'Custom';}
.quote::after {position: absolute; top: 120px; right: -100px; font-size: var(--_fs-mega); font-weight: 700; line-height: 200px; color: var(--_c-blue-100); transform: rotate(-90deg); z-index: -1; content: 'Quote';}

/* FEATURES */
.features {padding-block: 40px; --_c-light-400: #a0a0a0; --_c-dark-700: #646464;}
.features .wrapper {background: no-repeat center/cover url(https://www.emenacpackaging.co.nz/theme/website/assets/images/abstract-bg.webp); border-radius: 10px; padding: 50px;}
.features .content {text-align: center;}
.features .content > :first-child {font-size: calc(var(--fs-lg, 36px) + 2px); margin-bottom: 20px;}
.features .content p {height: 72px; color: var(--_c-dark-700); margin-bottom: 60px;}
.features ul {display: flex; align-content: center; justify-content: space-between; gap: 10px;}
.features li {display: inline-flex; align-items: center; gap: 10px;}
.features li div * {display: block;}
.features li div :first-child {font-size: var(--fs-md, 24px); line-height: 1; margin-bottom: 5px;}
.features li div :nth-child(2) {color: var(--_c-light-400);}
:where(.features, .features :where(.wrapper, .content, .content *, ul, ul *)) {transition: var(--transition);}

/* GALLERY */
.gallery {padding-block: 25px 15px;}
.gallery .head {margin-bottom: 40px; text-align: center;}
.gallery .head :first-child {font-size: var(--fs-xl, 36px); margin-bottom: 20px;}
.gallery .head p {max-height: 75px;}
.gallery .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
.gallery .box {position:relative;}
.gallery .box > img {width: 100%;}
.gallery .box:nth-of-type(1) {grid-row: 1/3; grid-column: 1/3;}
.gallery .box > a {position:absolute ; bottom:0; left:0; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #FFFFFFE5; width:100%; max-width:277px;  border-top-right-radius:15px;  padding-block:13px 15px;}
.gallery .box > a:hover  {background-color: #F5F5F5; transition:var(--transition);}
.gallery .box > a:hover :nth-child(2)   {color:var(--c-secondary);}
.gallery .box:nth-of-type(1) > a {padding-block: 24px;}
.gallery .box > a :first-child {position: relative; font-size: var(--fs-sm); font-weight:700;  margin-bottom: 14px; color:#000;}
.gallery .box > a :first-child::before {position: absolute; inset: 30px 0 0; width: 98px; height: 1px; background-color: #EF233CCC; margin-inline: auto; content: '';}
.gallery .box > a:nth-child(2) {color: #0A489B;  font-weight: 700; font-size:var(--fs-xs);} 
.gallery .box > a button:hover {text-decoration: underline;}

/* DESCRIPTION */
.description {padding-block: 3.75rem;}
.description .wrapper {display: grid; grid-template-columns: minmax(20rem, 23.125rem) 1fr; gap: 1.875rem;}
.description .additional {display: flex; gap: 0.938rem 1.875rem; max-height: 9.125rem;}
.description .additional p:nth-of-type(-n+2) {width: calc(50% - 2%);}
.description .title :first-child {font-size: calc(var(--fs-md, 24px) + 2px)}

/* IDEAS */
.ideas {padding-block: 6.37rem; background: no-repeat center/cover url(https://www.emenacpackaging.co.nz/theme/website/assets/images/ideas-bg.webp); background-color: var(--c-secondary);}
.ideas .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;}
.ideas .item {display: flex; align-items: flex-start; gap: 1.8rem; color: #fff;}
.ideas .item div :first-child {display: block; font-size: var(--fs-lg, 30px); font-weight: 600; margin-bottom: 0.625rem;}
.ideas .item p {color: #fff; padding-right: 0.625rem;}
:where(.ideas, .ideas :where(.wrapper .item, .item div *)) {transition: var(--transition);}

/* BRAND */
.brand {padding-block: 3.75rem 2.5rem; --_c-dark-700: #646464;}
.brand .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 1.8rem;}
.brand .content > :first-child {font-size: calc(var(--fs-xl, 36px) + 2px); color: var(--c-tertiary); margin-bottom: 1.25rem;}
.brand .content > :first-child * {display: block; font-size: var(--fs-base, 16px); font-weight: 600; color: var(--c-secondary); margin-bottom: 1.25rem;}
.brand .content p {color: var(--_c-dark-700); margin-bottom: 2.1rem;}
.brand .content ul:nth-of-type(1) {display: flex; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 40px;}
.brand .content ul:nth-of-type(1) li {position: relative; width: calc(50% - 15px); padding-left: 1.5rem;}
.brand .content ul:nth-of-type(1) li::before {position: absolute; top: 6px; left: 0; width: 15px; height: 11px; background: no-repeat center/cover url(https://www.emenacpackaging.co.nz/theme/website/assets/images/icons/arrow-right.svg); content: '';}
.brand .content ul:nth-of-type(2) {display: flex; align-items: center; gap: 1rem;}
.brand .content ul:nth-of-type(2) li {display: flex; align-items: center; gap: 0.625rem; font-size: calc(var(--fs-sm, 18px) + 2px); font-weight: 600; color: var(--c-tertiary); line-height: 1.4;}
.brand .content ul:nth-of-type(2) li img {height: 53px;}
.brand .image {width: fit-content; margin-left: auto;}
:where(.brand, .brand :where(.wrapper, .content, .content *, .image)) {transition: var(--transition);}

/* DISCOUNTS */
.discounts {padding-block: 2.5rem; --_c-dark-700: #646464; --_c-dark-800: #555555; background: no-repeat center/contain url(https://www.emenacpackaging.co.nz/theme/website/assets/images/bgperfect.webp); } 
.discounts .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 1.8rem;}
.discounts .content > :first-child {font-size: calc(var(--fs-xl, 36px) + 2px); margin-bottom: 1.82rem;}
.discounts .content p {margin-bottom: 1.5rem;}
.discounts .content ul:nth-of-type(1) li {margin-bottom: 0.625rem; list-style-position: inside; position: relative; padding-left: 1.5rem;}
.discounts .content ul:nth-of-type(1) li::before {position: absolute; top: 3px; left: 0; width: 18px; height: 18px; background: no-repeat center/cover url(https://www.emenacpackaging.co.nz/theme/website/assets/images/icons/tick-sm-round.svg); content: '';}
.discounts .content :where(p, li) {color: var(--_c-dark-700);}
.discounts .content ul:nth-of-type(2) {display: flex; align-items: center; justify-content: space-between; text-align: center; padding-inline: 1.8rem; margin-block: 2.1rem 1.25rem;}
.discounts .content ul:nth-of-type(2) li :first-child {display: block; font-size: calc(var(--fs-xl, 36px) - 2px); color: var(--_c-dark-800);}
.discounts .content > a {font-size: var(--fs-base, 16px); font-weight: 600; border-radius: 5px; padding: 0.8rem 1.1rem; float: right; text-align: center;}
:where(.discounts, .discounts :where(.wrapper, .content *)) {transition: var(--transition);}

/* TESTIMONIALS */
.testimonials {padding-block: 40px 55px; background: no-repeat center/cover url(https://www.emenacpackaging.co.nz/theme/website/assets/images//testimonials-bg.webp); --_c-light-300: #bababa; --_c-light-500:#747474;}
.testimonials .head {display: grid; grid-template-columns: minmax(300px, 360px) minmax(450px, 540px) auto; align-items: center; gap: 30px; margin-bottom: 32px;}
.testimonials .head :first-child {font-size: calc(var(--fs-xl, 36px) - 2px); line-height: 52px;}
.testimonials .head p {font-size: var(--fs-sm, 18px); color: var(--_c-light-500);}
.testimonials .head a {width: 160px; height: fit-content; font-family: var(--ff-secondary); font-size: var(--fs-base, 16px); font-weight: 700; color: var(--_c-light-500); background-color: #fff; text-align: center; border: 1px solid var(--_c-light-300); border-radius: 5px; padding-block: 10.5px; justify-self: end;}
.testimonials .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px;}
.testimonials .review {display: flex; flex-direction: column; justify-content: space-between; background-color: #fff; border: 1px solid #bdbdbd80; border-radius: 5px; padding: 50px 12px 25px 32px;}
.testimonials .review p {max-height: 222px; color: var(--_c-light-500); border-bottom: 1px solid #0000000D; padding-bottom: 15px; margin-bottom: 20px;}
.testimonials .review > div {text-align: end;}
.testimonials .review > div * {display: block; font-family: var(--ff-secondary);}
.testimonials .review > div :first-child {font-size: calc(var(--fs-sm, 18px) + 2px); font-weight: 600;}
.testimonials .review > div :nth-child(2) {font-size: var(--fs-xs, 14px); color: var(--_c-light-500);}
.testimonials .review ul {display: flex; align-items: center; justify-content: end; padding-block:8px;}
.testimonials .review ul li {padding-right: 3px;}

/* ( MEDIA QUERIES ) */
@media only screen and (max-width: 1200px) {
    /* Banner */
    .banner {max-height: 37rem; background-position: 45% top;  padding-block: 5rem} 
    .banner .title :first-child {font-size: calc(var(--fs-xl, 44px) + 8px); }
    /* PRODUCTS */
    .products {padding-block: 3rem;}
    /* Products 2 */
    .variety {padding-block: 3rem;}
    /* Quote */
    .quote {padding-block: 3rem;}
    /* (Ideas) */
    .ideas :is(.wrapper, .item) {gap: 1.25rem;}
    /* (Brand) */
    .brand .content ul:nth-of-type(2) {align-items: flex-start; flex-direction: column;}
    /* (Discounts) */
    .discounts .content ul:nth-of-type(2) {padding-inline: 0;}
    /* (Testimonials) */
    .testimonials .wrapper {gap: 1.25rem;}
}

@media only screen and (max-width: 991px) {
    /* Banner */
    .banner { background-position: 30% top; max-height: 32rem; }
    /* PRODUCTS */
    .products {padding-block: 2.5rem;}
    .products .wrapper {grid-template-columns: repeat(3, 1fr);}
    /* PRODUCTS 2 */
    .variety {padding-block: 2.5rem;}
    .variety .wrapper {grid-template-columns: repeat(3, 1fr);}
    /* Quote */
    .quote {padding-block: 2.5rem;}
    .quote::before,
    .quote::after {content: none;}
    /* (Features) */
    .features {padding-block: 1.5rem;}
    .features .wrapper {padding: 0.9rem;}
    /* (Gallery) */
    .gallery .box > a {max-width: 212px; padding-block: 12px;}
    .gallery .box:nth-of-type(1) {grid-row: 1/1; grid-column: 1/1;}
    .gallery .box:nth-of-type(1) > a {max-width:212px; padding-block: 12px;}
    /* (Description) */
    .description .additional {display: block;}
    .description .additional p:nth-of-type(-n+2) {width: 100%;}
    /* (Ideas) */
    .ideas .wrapper {grid-template-columns: repeat(2, 1fr); row-gap: 3.1rem;}
    /* (Brand) */
    .brand .wrapper {grid-template-columns: 1fr; gap: 3.1rem;}
    .brand .content ul:nth-of-type(2) {flex-direction: row; gap: 1.8rem;}
    .brand .image {order: -1; max-width: 25rem; margin-inline: auto;}
    /* (Discounts) */
    .discounts .wrapper {grid-template-columns: 1fr; gap: 3.1rem;}
    .discounts .image {max-width: 28.1rem; margin-inline: auto;}
    .discounts .content ul:nth-of-type(2) {padding-inline: 3.1rem;}
    /* (Testimonials) */
    .testimonials .head {grid-template-columns: 1fr; gap: 15px;}
    .testimonials .head :first-child {line-height: 1;}
    .testimonials .wrapper {grid-template-columns: repeat(2, 1fr);}
}

@media only screen and (max-width: 767px) {
    /* Banner */
    .banner {max-height: 26rem; padding-block: 3rem; background-position: left;}
    .banner .title :first-child {font-size: var(--fs-xl, 36px); }
    .banner .title {height: calc(100% - 3.375rem);}
    .banner .title p {margin-bottom: 2rem;}
    /* PRODUCTS */
    .products {padding-block: 2rem;}
    .products .wrapper {grid-template-columns: repeat(2, 1fr);}
    /* PRODUCTS 2 */
    .variety {padding-block: 2rem;}
    .variety .wrapper {grid-template-columns: repeat(2, 1fr);}
    /* Quote */
    .quote {padding-block: 2rem;}
    /* (Features) */
    .features ul {flex-wrap: wrap; row-gap: 1.25rem;}
    .features li {width: calc(50% - 20px);}
    /* (Gallery) */
    .gallery .wrapper {grid-template-columns: repeat(2, 1fr);}
    .gallery .box > a {max-width:220px; padding-block:10px;}
    .gallery .box:nth-of-type(1) > a {max-width:220px; padding-block:10px;}
    .gallery .box > a :first-child::before {inset : 30px 0 0;}
    /* description */
    .description {padding-block: 1.563rem;}
    .description .wrapper {grid-template-columns: 1fr;}
    /* (Ideas) */
    .ideas {padding-block: 4rem;}
    /* (Brand) */
    .brand {padding-block: 1.25rem;}   .brand .wrapper {grid-template-columns: 1fr; gap: 3.1rem;}
    .brand .content ul:nth-of-type(2) {flex-direction: row; gap: 1.8rem;}
    .brand .image {order: -1; max-width: 25rem; margin-inline: auto;}
    /* (Discounts) */
    .discounts {padding-block: 1.25rem;}
    .discounts .content ul:nth-of-type(2) {padding-inline: 0;}
    /* (Testimonials) */
    .testimonials {padding-block: 30px;}
    .testimonials .wrapper {gap: 10px;}
    .testimonials .review {padding: 35px 18px 15px 18px;}
}

@media only screen and (max-width: 575px) {
    /* Banner */
    .banner {padding: 2rem; background-position: right;}
    .banner .title {height: calc(100% - 0.5rem); margin-inline: auto; background: rgba(0, 0, 0, 0.25); padding: 1rem;}
    .banner .title p {margin-bottom: 1.5rem; color: #fff; height: 11.5rem;}
    .banner .title * {color: #fff;}
    /* PRODUCTS */
    .products .content :first-child {margin-bottom: 1rem;}
    .products .content p {margin-bottom: 1rem;}
    /* product2 */
    .variety .content :first-child {margin-bottom: 1rem;}
    .variety .content p {margin-bottom: 1rem;}
    /* description */
    .description {padding-block: 1rem;}
    /* (Ideas) */
    .ideas .wrapper {grid-template-columns: 1fr;}
    /* (Brand) */
    .brand .content ul:nth-of-type(1) li {width: 100%;}
    .brand .content ul:nth-of-type(2) {flex-direction: column; gap: 0.625rem;}
    /* (Gallery) */
    .gallery .box > a {max-width:188px; padding-block:8px;}
    .gallery .box:nth-of-type(1) > a {max-width:188px; padding-block:8px;}
    /* (Testimonials) */
    .testimonials .wrapper {grid-template-columns: 1fr;}
}

@media only screen and (max-width: 475px) {
    /* Banner */
    .banner {padding: 3rem 1.5rem;}
    .banner .title p {margin-bottom: 1rem;}
    .banner .title :first-child {margin-bottom: 2px;}
    /* PRODUCTS */
    .products {padding-block: 1rem;}
    .products .wrapper {grid-template-columns: 1fr;}
    .products a {margin-inline: auto;}
    /* PRODUCTS 2 */
    .variety {padding-block: 1rem;}
    .variety .wrapper {grid-template-columns: 1fr;}
    .variety a {margin-inline: auto;}
    /* Quote */
    .quote {padding-block: 1rem;}
    /* (Features) */
    .features .content > :first-child {margin-bottom: 10px;}
    .features .content p {margin-bottom: 30px;}
    .features ul {gap: 20px;}
    .features li {width: 100%;}
    /* (Gallery) */
    .gallery .head {margin-bottom: 20px;}
    .gallery .head :first-child {margin-bottom: 10px;}
    .gallery .wrapper {grid-template-columns: 1fr;}
    .gallery .box img {width: 100%;}
    /* (Description) */
    .description .additional {max-height: 180px;}
    /* (Ideas) */
    .ideas .wrapper {gap: 1.8rem;}
    /* (Brand) */
    .brand .wrapper {gap: 1.8rem;}
    .brand .content > :is(:first-child, :nth-child(2)) {margin-bottom: 0.625rem;}
    .brand .content p {margin-bottom: 1.25rem;}
    .brand .content ul:nth-of-type(1) {gap: 0.625rem; margin-bottom: 1.25rem;}
    /* (Discounts) */
    .discounts .wrapper {gap: 1.85rem;}
    .discounts .content > :is(:first-child, p) {margin-bottom: 1rem;}
    .discounts .content ul:nth-of-type(2) {flex-wrap: wrap; gap: 1.25rem; margin-block: 1.5rem 0.75rem;}
    .discounts .content ul:nth-of-type(2) li {width: calc(50% - 20px);}
    .discounts .content > a {padding: 0.625rem;}
    /* (Testimonials) */
    .testimonials .head {margin-bottom: 20px;}
    .testimonials .head a {width: 140px; padding-block: 8px;}
    .testimonials .review {padding: 25px 12px 12px 12px;}
    .testimonials .review p {max-height: 184px; padding-bottom: 7px; margin-bottom: 10px;}
}

@media only screen and (max-width: 360px) {
    /* banner */
    .banner {padding: 3rem 0.5rem;}
    .banner .title {height: calc(100% - -0.5rem);}
    .banner .title p {height: 11rem;}
}