
.categories {padding-top: 30px; padding-bottom: 70px; --fs-xl: 30px;}
.categories .container {text-align: center;}
.categories .head {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 {height: 100%; max-height: 285px; display: flex; align-items: center; justify-content: center; padding: 24px; background-color: #F0EFEB; margin-bottom: 15px;}
.categories .box img {max-width: 218px; object-fit: contain;    height: auto;}
.categories .product-box > h3 {font-size: var(--fs-500); font-weight: var(--fw-bold); color: #878787;}
.categories .box:hover {background-color: #fcf6dd;}
.categories .product-box > h3 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;}

.quote {padding-bottom: 70px;}
.quote .container > .title {text-align: center; margin-bottom: 48px;}
.quote .title :first-child {font-size: var(--fs-xl); color: var(--clr-primary); margin-bottom: 12px;}
.quote .title :first-child span {color: var(--clr-secondary);}
.quote .title p {font-size: var(--fs-400); color: var(--clr-light-300);}
.quote .content {display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;}
.quote .info {max-width: 535px;     align-content: center;}
.quote .info li { background-image: url(https://www.ybyboxes.com.au/wp-content/themes/ybyboxesca/assets/images//icons/info-icon-2.png);background-repeat: no-repeat; background-position: left top;
padding-left: 80px;position: relative;margin-bottom: 40px; font-size: var(--fs-400); font-weight: var(--fw-regular); line-height: 160%; color: var(--clr-light-300);}
.quote .info li:first-child { background-image: url(https://www.ybyboxes.com.au/wp-content/themes/ybyboxesca/assets/images/icons/info-icon-1.png);}
.quote .info li:nth-last-of-type(1) { background-image: url(https://www.ybyboxes.com.au/wp-content/themes/ybyboxesca/assets/images/icons/more-perks.webp);}
.quote .info li img {width: 50px;}
.quote .info li strong{color: black; ;font-size: var(--fs-600); font-weight: var(--fw-semi-bold); display: block; margin-bottom: 6px; }
/* .quote .info li  {padding-left: 42px;} */
.quote .info li  p { font-size: var(--fs-400); font-weight: var(--fw-regular); line-height: 160%; color: var(--clr-light-300);}
.quote .info .custom__btn-primary {margin-left: auto;}


@media only screen and (width < 1400px) {
.banner {height: 500px;}

}
@media only screen and (width < 1200px) {
.banner {height: 480px;}
.categories, .quote, .offer, .printing, .shipping, .our-work, .information,.testimonials, .faq{height:auto}
.offer .images img {width: 240px;}
.printing .reason {padding: 0;}
.printing .reason h4 {height: 48px;}
.shipping .columns {grid-template-columns: 55% 1fr; gap: 30px;}
.our-work .content {padding: 0;}
.faq .image img {max-width: 350px}
}
@media only screen and (width < 991px) {
.banner{height:400px}
.categories .head h2 {max-width: 65%;}
.categories .products {grid-template-columns: repeat(3, 1fr);} 
.quote .content {grid-template-columns: 1fr;}
.quote .info ul {text-align: start;}
.quote .quote-form {margin-inline: auto; max-width: 535px;}
.offer .columns {grid-template-columns: 1fr;}
.offer .images {justify-content: center;}
.printing .columns:first-child {grid-template-columns: 1fr;}
.printing .images:nth-child(1) {display: block;}
.printing .images:nth-child(1) img {margin-inline: auto;}
.printing .images:nth-child(3) {display: none;}
.printing .columns:nth-child(2) {grid-template-columns: repeat(2, 1fr);}
.printing .reason h4 {height: auto;}
.shipping .columns {grid-template-columns: 1fr;}
.shipping .image img {margin-inline: auto;}
.our-work .columns {grid-template-columns: 1fr;}
.our-work .images:nth-child(1) {display: block;}
.our-work .images:nth-child(3) {display: none;}
.our-work .content h2 {max-width: 100%;}
.testimonials .columns {grid-template-columns: repeat(2, 1fr);}
.faq .columns {grid-template-columns: 55% 1fr;}
}  
@media only screen and (width < 767px) {
.banner {height: 310px}
.custom__h3 {font-size:24px}
.categories {padding-block: 36px 48px;}
.categories .head h2 {max-width: 100%;}
.categories .head p {max-width: 100%;}
.categories .products {grid-template-columns: repeat(2, 1fr);} 
.printing {--fs-500: 16px;}
.printing .reason {--fs-400: 15px;}
.information .columns {grid-template-columns: 1fr;}
.information .content {max-width: 100%;}
.information .content:nth-child(1) > img {display: none;}
.information .content p {max-height: 130px;}
.testimonials .columns {grid-template-columns: 1fr;}
.testimonials .review {padding-bottom: 52px;}
.testimonials .review p {max-height: 78px;}
.testimonials .review::before {width: 36px; height: 26px;}
.faq .columns {grid-template-columns: 1fr;}
.faq .image:nth-child(1) {display: block;}
.faq .image:nth-child(3) {display: none;}
.faq .accordions {max-width: 500px;}
}
@media only screen and (width < 575px) {
.banner {height: 230px}
.categories .head {margin-bottom: 28px;}
.categories .products {grid-template-columns: repeat(1, 1fr); gap: 20px;} 
.categories .box h3 {text-align: center;}
.quote .info li div {padding-left: 24px;}
.quote form {padding-inline: 32px;}
.offer .images img {width: 200px;}
.printing .reason h4 {height: 44px;}
.information .content p {padding-right: 15px; max-height: 102px;}
.testimonials .review p {max-height: 100px;}
}
@media only screen and (width < 475px) {
.banner  {height: 188px;}
.categories .head h2 {margin-bottom: 12px; font-size: var(--fs-600);}
.quote .info h2 { font-size: var(--fs-600);}
.quote .info li h3, .offer .content h3 { font-size: var(--fs-600);}
.printing .content h3 , .shipping .content h3,.our-work .content h3 { font-size: var(--fs-600);}
.information .content h4 { font-size: var(--fs-400);}
.testimonials .head h3, .faq .head h2 { font-size: var(--fs-600);}
.testimonials .client-name strong { font-size: var(--fs-400);}
.custom__btn-primary{ font-size: var(--fs-400);}
.quote {--fs-300: 12px;}
.quote .info li {margin-bottom: 32px;}
.quote .info li img {width: 40px;}
.quote .info li div {padding-left: 18px;}
.quote .info li div h3 {margin-bottom: 15px;}
.offer .images {gap: 12px;}
.offer .images img {width: 150px;}
.printing .columns:nth-child(2) {grid-template-columns: 1fr;}
.printing .reason h4 {height: auto;}
.testimonials .review p {padding-right: 10px;}
}