.product {padding-block: 50px 30px; --clr-light-bg: #F0EFEB; --clr-para: #878787;}
.product .columns {display: grid; grid-template-columns: 56% 1fr; gap: 30px; align-items: end;}
.product .about > :first-child { margin-bottom: 12px;font-size: var(--fs-700); font-weight: var(--fw-semi-bold); line-height: 160%; color: var(--clr-primary); margin-bottom: 16px;}
.product .about > :first-child * {color: var(--clr-secondary);}
.product .about p {padding-right: 20px;height: 105px; overflow-y: hidden; line-height: 170%; margin-bottom: 32px;font-size: var(--fs-400); font-weight: var(--fw-regular); line-height: 160%; color: var(--clr-light-300);}
.product .about p:hover::-webkit-scrollbar-track,
.product .about p:hover::-webkit-scrollbar-thumb {visibility: visible;}
.product .about p{overflow-y:auto; color:#747474;   }
.product .about p::-webkit-scrollbar{width:6px}
.product .about p::-webkit-scrollbar-track{background-color:#f1f1f1;border-radius:10px}
.product .about p::-webkit-scrollbar-thumb {background-color:var(--clr-secondary); border-radius:10px}	
.product .image {background-color: var(--clr-light-bg);}
.product .image img {object-fit: contain; height: auto; max-height: 490px;}
.product .quote {padding-bottom: 0 !important; height: 100%;}
.product .quote form {padding: 20px 32px;}
.quote .quote-form {position: sticky; top: 90px;}
.product .quote :where(.group input, .group:nth-child(4) textarea) {padding-block: 9px;}
.product .quote .group:nth-child(4) textarea {height: 90px;}

.categories {padding-bottom: 50px; --fs-xl: 30px;     min-height: auto;}
.categories .container {text-align: center;}
.categories .head {max-height:200px;overflow-y:hidden;margin-right:20px}
.categories .head:has(> *) {margin-bottom: 48px}
.categories .head h2 {font-weight: var(--fw-bold); color: #000; margin-inline: auto;font-size: var(--fs-xl); font-weight: var(--fw-semi-bold); line-height: 160%; color: var(--clr-primary); margin-bottom: 16px;}
.categories .head h2 span{color: var(--clr-secondary);}
.categories .head p {color: #686868;font-size: var(--fs-400); font-weight: var(--fw-regular); line-height: 160%; color: var(--clr-light-300);}
.categories .products {display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 20px; margin-bottom: 56px;}
.categories .box {display: flex; align-items: center; justify-content: center; width: 100%; height: fit-content; padding: 18px; background-color: #F0EFEB; margin-bottom: 15px;}
.categories .box img {height: 268px; }
.categories .product-box > strong {font-size: var(--fs-500); font-weight: var(--fw-bold); color: #747474;}
.categories .box:hover {background-color: #fcf6dd;}
.categories .product-box > span a:hover {color: #000;}
.pagination {float:right;margin-top:10px}
.page-numbers{    background-color: var(--clr-primary); color:#FAFAFA; padding: 11px 12px; border: 1px solid #dee2e6;}
.pagination .current{    background-color: var(--clr-secondary); color: var(--clr-primary); padding: 11px 12px; border: 1px solid #dee2e6;}
.pagination.loop-pagination {text-align:right;padding: 20px 0px;}


.brief {padding-block: 40px 20px;}
.brief .columns {display: grid; grid-template-columns: 1fr 30%; gap: 20px; align-items: center;}
/*     .brief .content {max-width: 820px;} */
.brief .content h2 {max-width: 97%; margin-bottom: 20px;font-size: var(--fs-700); font-weight: var(--fw-bold); line-height: 140%; color: #000; margin-bottom: 16px;}
.brief .content ul {margin-bottom: 20px;}
.brief .content li {list-style: disc; list-style-position: inside; margin-bottom: 5px;}
.brief .content div {height: 100%; max-height: 255px;}
.brief .content p {margin-bottom: 20px; padding-right: 20px; font-size: var(--fs-400); font-weight: var(--fw-regular); line-height: 160%; color: #747474;}
.brief .content p:last-child {margin: 0;}
.brief .image img {max-width: 370px; margin-inline: auto;}

.packaging {padding-bottom: 70px; --clr-primary-bg: #F2F9FF;}
.packaging .content {background-color: var(--clr-primary-bg); padding: 36px; border-radius: 28px;}
.packaging .columns {display: flex; align-items: center; justify-content: space-between;}
.packaging .images:nth-child(1) {display: none;}
.packaging .images img {max-width: 406px; margin-left: auto;}
.packaging .info {border: solid;border-color: #0061BC;max-width: 82%;border-width: 0 1px 0 0;padding-right: 20px;}
.packaging .info h2 {font-size: var(--fs-700); color: #000; font-weight: var(--fw-semi-bold); line-height: 160%; margin-bottom: 16px;}
.packaging .info p {font-size: var(--fs-400); font-weight: var(--fw-regular); line-height: 160%; color: #000;}
.packaging .contact a {padding: 13.5px 17px; border-radius: 5px; font-size: var(--fs-500); font-weight: var(--fw-semi-bold);background-color: var(--clr-secondary); border-radius: 5px; line-height:28.8px;}
.packaging .contact {text-align:center;max-width: 18%;display:flex; flex-direction:column}
.packaging label {margin-bottom: 20px;font-size: 18px;color: var(--clr-primary);font-weight: 700;line-height:28.8px;}
.packaging .contact a:hover {background-color: var(--clr-primary); color: #fff;}

.expert {padding-bottom: 88px;}
.expert .columns {display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px; align-items: center;}
<!--     .expert .images:nth-child(1) {display: none;} -->
.expert .content {margin-right:20px;}
.expert .content h2 {font-size: var(--fs-xl); line-height: 160%;font-size: var(--fs-700); font-weight: var(--fw-bold); line-height: 140%; color: #000; margin-bottom: 16px;}
.expert .content p {margin-bottom: 38px;font-size: var(--fs-400); font-weight: var(--fw-regular); line-height: 160%; color: #747474;}
.expert .content ul li {position: relative; font-size: var(--fs-400); color: #747474; margin-bottom: 20px; padding-left: 27px;}
.expert .content ul li:last-child {margin: 0;}
.expert .content ul li::before {position: absolute; top: 4px; left: 0; width: 15px; height: 15px; background: no-repeat center/cover url(https://www.ybyboxes.com.au/wp-content/themes/ybyboxesca/assets/images/icons/tick-icon-2.webp); content: '';}
.expert .images img {width: 590px; margin-inline: auto;}

.customize {padding-bottom: 70px;}
.customize .columns {display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;}
.customize .images {gap: 20px; place-items: center;}
.customize .content {margin-right:20px;}
.customize .content h2 {font-size: var(--fs-700); font-weight: var(--fw-bold); line-height: 140%; color: #000; margin-bottom: 16px;}
.customize .content p {margin-bottom: 36px; font-size: var(--fs-400); font-weight: var(--fw-regular); line-height: 160%; color: #747474;}
.customize .content h3 {font-weight: var(--fw-semi-bold); font-size: var(--fs-600); margin-bottom: 16px;}
.customize .content ul {padding-left: 20px;}
.customize .content ul li {font-size: var(--fs-400); color: #747474; margin-bottom: 10px; list-style: disc;}

.design {padding-bottom: 88px;}
.design .columns {display: grid; grid-template-columns: 55% 1fr; gap: 44px; align-items: center;}
.design .content {margin-right:30px;}
.design .content h2 > small {margin-bottom: 15px;font-size: var(--fs-300); font-weight: var(--fw-semi-bold); line-height: 160%; color: #0061bc;}
.design .content > h2 {color: #000; font-weight: var(--fw-bold); line-height: 140%;font-size: var(--fs-xl); font-weight: var(--fw-semi-bold); line-height: 160%; margin-bottom: 16px;}
.design .content > p {margin-bottom: 30px; font-size: var(--fs-400); font-weight: var(--fw-regular); line-height: 160%; color:#747474; margin-right:20px;overflow-y:hidden;}
.design .content > :first-child {margin-bottom: 0;}
.design .content ul {display: flex; align-items: center; gap: 70px;}
.design .content ul p br {display: none;}
.design .content li {max-width: 255px;font-size: var(--fs-400); font-weight: var(--fw-regular); line-height: 160%; color: var(--clr-light-300);}
.design .content li:first-child {background-image:url(https://www.ybyboxes.com.au/wp-content/themes/ybyboxesca/assets/images/icons/special-finishing-options.svg);background-repeat:no-repeat;padding-top: 30px;}
.design .content li:last-child {background-image:url(https://www.ybyboxes.com.au/wp-content/themes/ybyboxesca/assets/images/icons/lamination-options.svg);background-repeat:no-repeat;padding-top: 30px;}
.design .content li strong {font-size: var(--fs-600);font-weight: var(--fw-semi-bold);margin-block: 20px;color: #000;line-height: 160%;margin-bottom: 16px; display: block;}
.design .content li p{font-size: var(--fs-400); font-weight: var(--fw-regular); line-height: 160%; color: #747474;}
.design .images:nth-child(1) {display: none;}
.design .images img {max-width: 488px; margin-inline: auto;}

.types {padding-bottom: 83px;}
.types .columns {display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: center;}
.types .images img {height: auto; margin-inline: auto;}
.types .content {margin-right:20px; }
.types .content h2{font-size: var(--fs-700); font-weight: var(--fw-bold); line-height: 140%; color: #000; margin-bottom: 16px;}
.types .content p{font-size: var(--fs-400); font-weight: var(--fw-regular); line-height: 160%; color: #747474; margin-right:20px;overflow-y:hidden;}
.types .content p:nth-child(3) {margin-block: 38px 32px;}

@media only screen and (width < 1200px) {
.product .columns {grid-template-columns: repeat(2, 1fr);}
.expert .images img {width: 100%; max-width: 500px;}
.types .images img {width: 100%; max-width: 628px;}
}
@media only screen and (width < 991px) {
:root {
--fs-700: 22px;
--fs-600: 18px;
}

.packaging .contact{max-width:25%;}
.packaging .info{max-width:75%;}
.product .columns {grid-template-columns: 1fr;}
.categories {--fs-xl: 26px;}
.categories .products {grid-template-columns: repeat(3, 1fr);} 

.expert .columns {grid-template-columns: 1fr;}
/*        .expert .images:nth-child(1) {display: block;} 
.expert .images:nth-child(3) {display: none;} */
.customize .columns {grid-template-columns: repeat(1, 1fr)} 
.customize .images {max-width: 585px; margin-inline: auto;}
.packaging .content {padding: 20px 30px 20px;}
.types .columns {grid-template-columns: 1fr; gap: 44px;}
.design .columns {grid-template-columns: 1fr; gap: 44px;}
.design .images:nth-child(1) {display: block}
.design .images:nth-child(3) {display: none;}
.brief .columns {grid-template-columns: 1fr;}
.categories .box img { height:auto; }
}
@media only screen and (width < 767px) {
:root {
--fs-700: 20px;
--fs-600: 17px;
}
.packaging .columns{flex-direction:column}
.packaging .info{border:none;max-width:100%; padding-bottom:20px}
.packaging .contact{max-width:100%}
.categories {padding-block: 0 30px; --fs-xl: 22px;}
.categories .head h2 {max-width: 100%;}
.categories .head p {max-width: 100%;}
.categories .products {grid-template-columns: repeat(2, 1fr);}
.packaging .columns {grid-template-columns: 1fr;}
.packaging .images:nth-child(1) {display: block;}
.packaging .images:nth-child(3) {display: none;}
.packaging .images img {margin-inline: auto;}
.types .content p:nth-child(3) {margin-block: 24px;}
.brief .content div {max-height: 160px;}
.brief .content p {padding-right: 16px;}
}
@media only screen and (width < 575px) {
.categories .head {margin-bottom: 28px;}
.categories .products {grid-template-columns: repeat(1, 1fr); gap: 20px;} 
}
@media only screen and (width < 475px) {
.custom__btn-primary-lt {width: 110px;}
:root {
--fs-700: 18px;
--fs-600: 16px;
}
.categories {--fs-xl: 20px;}
.categories .head h2 {margin-bottom: 12px;}
.design .content ul {flex-wrap: wrap; gap: 30px; justify-content: left; text-align: left;}
.design .content ul img {margin-inline: auto;}
.brief .content div {max-height: 150px;}
.brief .content p {padding: 0;}
.expert {padding-bottom:40px;}	
.design {padding-bottom:40px;}										  
}