img{width:auto;}
:where(.custom__scroll, .custom__scroll-p > p) {overflow-y: auto; padding-right: 15px;}
:where(.custom__scroll, .custom__scroll-p > p)::-webkit-scrollbar {width: 6px;}
:where(.custom__scroll, .custom__scroll-p > p)::-webkit-scrollbar-track {border-radius: 6px; background-color: #f5f5f5; visibility: hidden;}
:where(.custom__scroll, .custom__scroll-p > p)::-webkit-scrollbar-thumb {border-radius: 6px; background-color:#EF233C80; visibility: hidden;}
:where(.custom__scroll, .custom__scroll-p > p):hover::-webkit-scrollbar-track {visibility: visible;}
:where(.custom__scroll, .custom__scroll-p > p):hover::-webkit-scrollbar-thumb {visibility: visible;}
@supports not selector(::-webkit-scrollbar) {
    :where(.custom__scroll, .custom__scroll-p > p) {overflow-y: auto; scrollbar-width: thin; scrollbar-color: transparent transparent;}
    :where(.custom__scroll, .custom__scroll-p > p):hover {scrollbar-color: #EF233C80 #f5f5f5;}
}

/* banner */
.banner { background-repeat: no-repeat; background-size: cover; background-position: center; --_fs-xxl:calc(var(--fs-xl) + 14px ); padding-block:120px 193px; position: relative;}
.banner .content {max-width: 500px;}
.banner .content > :first-child { color: #ef233c; }
.banner .content > :nth-child(2) { color: var(--c-tertiary); font-weight: 700; margin-bottom: 10px;padding-block:14px;font-size: var(--fs-36);}
.banner .content > :nth-child(3) { color: var(--c-tertiary); font-weight: 500;}
.banner .content > a {margin-top: 50px; margin-left: auto; padding-inline: 20px;display:block;inline-size:max-content}

/* popular style */
.popular-style {padding-top: 80px;}
.popular-style .content {text-align: center;}
.popular-style .content > :first-child {line-height: 38px; color: var(--c-tertiary); font-weight: 700; margin-bottom: 25px;}
.popular-style .content > :nth-child(2)  {color: var(--c-tertiary); font-weight: 500; margin-bottom: 41px;}
.popular-style .wrapper {display: grid; grid-template-columns: repeat(4, 1fr);gap:20px}
.popular-style .wrapper a {background-color: #fff; color: var(--c-tertiary);}
.popular-style .wrapper a strong { display: block; text-align: center; font-size:-fs-20; font-weight: 600; line-height: 26px;}
.popular-style .wrapper a img {width:100%;}


/* ideal styles */
.ideal-style {padding-top: 80px;}
.ideal-style .content {text-align: center;}
.ideal-style .content > :first-child {line-height: 38px; color: var(--c-tertiary); font-weight: 700; margin-bottom: 25px;}
.ideal-style .content > :nth-child(2)  {font-size: var(--fs-base); color: var(--c-tertiary); font-weight: 500; margin-bottom: 41px;}
.ideal-style .wrapper {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.ideal-style .wrapper a {background-color: #fff; color: var(--c-tertiary);}
.ideal-style .wrapper img {border-radius: 50px;width:100%}
.ideal-style  .wrapper a strong { display: block; text-align: center; font-size:-fs-20; font-weight: 600; line-height: 26px;}  

/* quote */
.quoute {padding-block: 60px; position: relative; --_fs-mega: 170px;  --_c-blue-100: #f4f9ff; --_c-light-500:#888888;}
.quoute::before { position: absolute; top:300px; left: -52px; font-size: var(--_fs-mega); font-weight: 700; line-height: 200px; color: var(--_c-blue-100); transform: rotate(-90deg);z-index: -1;content: 'Custom';}
.quoute .container::after {position: absolute; top: 300px; right: 0px; 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://emenacpackaging.ca/wp-content/themes/epca_new/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); 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 .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
.gallery .box {position: relative; overflow-y: hidden;}
.gallery .box:hover > a {top: 0;}
.gallery .box:nth-of-type(1) {grid-row: 1/3; grid-column: 1/3;}
.gallery .box > a {position: absolute; top: -100%; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgba(0 0 0 / 0.5); }
.gallery .box > a :first-child {position: relative; font-size: var(--fs-md); margin-bottom: 10px;color:white}
.gallery .box > a :first-child::before {position: absolute; inset: -15px 0 auto; width: 45px; height: 3px; background-color: var(--c-secondary); margin-inline: auto; content: '';}
.gallery .box > a span:hover {text-decoration: underline;}
.gallery .box > a span{color:white}
.gallery :where(.head, .head *, .wrapper, .box, .box *) {transition: var(--transition);}
.gallery img{width:100%;}

/* description */
.description {padding-block: 60px; --_c-light-500: #7a7a7a;}
.description .wrapper {display: grid; grid-template-columns: minmax(260px, 370px) minmax(450px, 766px); justify-content:space-between;}
.description .title :first-child {font-size: calc(var(--fs-md, 24px) + 2px);}
.description .additional {height: 146px; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 15px 30px;}
.description .additional > div {flex: calc(50% - 30px);}
.description .additional > div:nth-of-type(3) {flex: 100%;}
.description .additional :where(h3, h4) {font-size: var(--fs-md, 24px); font-weight: 500; margin-bottom: 8px;}
.description .additional :where(h5, h6) {font-size: var(--fs-sm, 18px); font-weight: 500; margin-bottom: 8px;}
.description .additional :where(p, li) {color: var(--_c-light-500);}
.description .additional ul {margin-block: 8px;}
.description .additional li {list-style: disc; list-style-position: inside;}
:where(.description, .description :where(.wrapper, .title *, .additional, .additional *)) {transition: var(--transition);}

/* ideas */

.ideas {padding-block: 102px; background: no-repeat center/cover url(https://emenacpackaging.ca/wp-content/themes/epca_new/assets/images//icons/ideas-bg.webp); background-color: var(--c-secondary);}
.ideas .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.ideas .item {display: flex; align-items: flex-start; gap: 30px; color: #fff;}
.ideas .item div :first-child {display: block; font-size: var(--fs-lg, 30px); font-weight: 600; margin-bottom: 10px;}
.ideas .item p {color: #fff; padding-right: 10px;}
:where(.ideas, .ideas :where(.wrapper .item, .item div *)) {transition: var(--transition);}

/* branding */
.brand {padding-block: 60px 40px; --_c-dark-700: #646464;}
.brand .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 30px;}
.brand .content > :first-child {font-size: calc(var(--fs-xl, 36px) + 2px); color: var(--c-tertiary); margin-bottom: 20px;}
.brand .content > :first-child * {display: block; font-size: var(--fs-base, 16px); font-weight: 600; color: var(--c-secondary); margin-bottom: 20px;}
.brand .content p {color: var(--_c-dark-700); margin-bottom: 35px;}
.brand .content ul:nth-of-type(1) {display: flex; align-items: flex-start; flex-wrap: wrap; gap: 15px; margin-bottom: 40px;}
.brand .content ul:nth-of-type(1) li {position: relative; width: calc(50% - 15px); padding-left: 25px;}
.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://emenacpackaging.ca/wp-content/themes/epca_new/assets/images//icons/arrow-right.svg); content: '';}
.brand .content ul:nth-of-type(2) {display: flex; align-items: center; gap: 15px;}
.brand .content ul:nth-of-type(2) li {display: flex; align-items: center; gap: 10px; font-size: var(--fs-18); font-weight: 600; color: var(--c-tertiary); line-height: 1.4;}
.brand .content ul:nth-of-type(2) li img {height: 53px;}
.brand .image img { width:100%; }
:where(.brand, .brand :where(.wrapper, .content, .content *, .image)) {transition: var(--transition);}

/* discount */
.discounts {padding-block: 40px; --_c-dark-700: #646464; --_c-dark-800: #555555; background: no-repeat center/contain url(https://emenacpackaging.ca/wp-content/themes/epca_new/assets/images//bgperfect.webp); } 
.discounts .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 30px;}
.discounts .content > :first-child {font-size: calc(var(--fs-xl, 36px) + 2px); margin-bottom: 30px;}
.discounts .content p {margin-bottom: 25px;}
.discounts .content ul:nth-of-type(1) li {margin-bottom: 10px; list-style-image: url(https://emenacpackaging.ca/wp-content/themes/epca_new/assets/images//icons/tick-sm-round.svg); list-style-position: inside;}
.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: 30px; margin-block: 35px 20px;}
.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: 13px 18px; float: right; text-align: center;}
:where(.discounts, .discounts :where(.wrapper, .content *)) {transition: var(--transition);}
.discounts .image img{ width:100%; }
/* testimonials */
.testimonials {padding-block: 40px 55px; background: no-repeat center/cover url(https://emenacpackaging.ca/wp-content/themes/epca_new/assets/images//testimonial-bg.webp); --_c-light-300: #bababa; --_c-light-500: #898989;}
.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 {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 {float: right;}
.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-300); float: right;}


/* media quries */
@media only screen and (max-width: 1200px) {
.banner {background-position: 80% 100%;}
.banner::before{position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 30%); z-index: -1; content: '';}
.banner .content *:nth-child(n+1) {color: #fff;}
.banner .content {max-width: 50%; padding: 15px; background: rgba(0, 0, 0, 0.25); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);}
.popular-style .wrapper {column-gap: 20px;}
.ideal-style .wrapper {column-gap: 20px;}
.ideas :is(.wrapper, .item) {gap: 20px;}
.brand .content ul:nth-of-type(2) {align-items: flex-start; flex-direction: column;}
.discounts .content ul:nth-of-type(2) {padding-inline: 0;}
.testimonials .wrapper {gap: 20px;}
}

@media only screen and (max-width: 991px) {
.banner {background-position: 90% 100%;}
.banner .content {max-width: 60%;}
.popular-style .wrapper {grid-template-columns: repeat(2, 1fr);}
.ideal-style .wrapper {grid-template-columns: repeat(2, 1fr);}
.features {padding-block: 25px;}
.features .wrapper {padding: 15px;}
.gallery .box:nth-of-type(1) {grid-row: 1/1; grid-column: 1/1;}
.description .wrapper {gap: 20px;}
.ideas .wrapper {grid-template-columns: repeat(2, 1fr); row-gap: 50px;}
.brand .wrapper {grid-template-columns: 1fr; gap: 50px;}
.brand .content ul:nth-of-type(2) {flex-direction: row; gap: 30px;}
.brand .image {order: -1; max-width: 400px; margin-inline: auto;}
.discounts .wrapper {grid-template-columns: 1fr; gap: 50px;}
.discounts .image {max-width: 450px; margin-inline: auto;}
.discounts .content ul:nth-of-type(2) {padding-inline: 50px;}
.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 {padding-block:80px 123px; background-position: right;}
.banner .content {max-width: 100%;}
.features ul {flex-wrap: wrap; row-gap: 20px;}
.features li {width: calc(50% - 20px);}
.gallery .wrapper {grid-template-columns: repeat(2, 1fr);}
.description {padding-block: 25px;}
.description .wrapper {grid-template-columns: 1fr;}
.ideas {padding-block: 65px;}
.brand {padding-block: 20px;}   .brand .wrapper {grid-template-columns: 1fr; gap: 50px;}
.brand .content ul:nth-of-type(2) {flex-direction: row; gap: 30px;}
.brand .image {order: -1; max-width: 400px; margin-inline: auto;}
.discounts {padding-block: 20px;}
.discounts .content ul:nth-of-type(2) {padding-inline: 0;}
.testimonials {padding-block: 30px;}
.testimonials .wrapper {gap: 10px;}
.testimonials .review {padding: 35px 18px 15px 18px;}
}

@media only screen and (max-width: 575px) {
.popular-style .wrapper {grid-template-columns: repeat(1, 1fr); place-items:center;}
.ideal-style .wrapper {grid-template-columns: repeat(1, 1fr); place-items:center;}
.description .wrapper {gap: 10px;}
.description .additional > div {flex: 100%;}
.ideas .wrapper {grid-template-columns: 1fr;}
.brand .content ul:nth-of-type(1) li {width: 100%;}
.brand .content ul:nth-of-type(2) {flex-direction: column; gap: 10px;}
.testimonials .wrapper {grid-template-columns: 1fr;}
}

@media only screen and (max-width: 475px) {
.banner .content > :last-child {margin-top: 30px;}
.popular-style {padding-top: 40px;}
.popular-style .wrapper {grid-template-columns: 1fr; justify-items: center;}
.popular-style .wrapper img {width: 100%;}  
.ideal-style .wrapper {grid-template-columns: 1fr; justify-items: center;}
.ideal-style .wrapper img {width: 100%;}  
.features .content > :first-child {margin-bottom: 10px;}
.features .content p {margin-bottom: 30px;}
.features ul {gap: 20px;}
.features li {width: 100%;}
.gallery .head {margin-bottom: 20px;}
.gallery .head :first-child {margin-bottom: 10px;}
.gallery .wrapper {grid-template-columns: 1fr;}
.gallery .box img {width: 100%;}
.description .additional {height: 137px;}
.ideas .wrapper {gap: 30px;}
.brand .wrapper {gap: 30px;}
.brand .content > :is(:first-child, :nth-child(2)) {margin-bottom: 10px;}
.brand .content p {margin-bottom: 20px;}
.brand .content ul:nth-of-type(1) {gap: 10px; margin-bottom: 20px;}
.discounts .wrapper {gap: 30px;}
.discounts .content > :is(:first-child, p) {margin-bottom: 15px;}
.discounts .content ul:nth-of-type(2) {flex-wrap: wrap; gap: 20px; margin-block: 25px 10px;}
.discounts .content ul:nth-of-type(2) li {width: calc(50% - 20px);}
.discounts .content > a {padding: 10px;}
.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;}
}