/* Quote */
.quote-sec {padding-block: 47px 35px; --_c-lght-blue: #F0F7FE;}
.quote-sec .wrapper {width: 100%; display: grid; grid-template-columns: minmax(580px, 744px) minmax(350px, 1fr); align-items: end; gap: 23px;}
.quote-sec .head {margin-bottom: 14px;}
.quote-sec .head > :first-child {font-family: var(--ff-primary); font-size: var(--fs-xl, 34px); font-weight: 700; color: var(--c-md-heading); margin-bottom: 0.375rem;}
.quote-sec .head > div {display: flex; align-items: center; gap: 12px;}
.quote-sec .head > div :nth-child(2) {font-size: var(--fs-xs, 14px); color: var(--c-text);}
.quote-sec .head ul {display: flex; align-items: center; gap: 4px; margin-bottom: 0;}
.quote-sec .head li {line-height: 1;}
.quote-sec button {width: 100%;}
.quote-sec .carousel {margin-bottom: 20px;}
.quote-sec .carousel button {height: 480px; display: flex; justify-content: center; align-items: center; background-color: var(--_c-lght-blue); outline: none;}
.quote-sec .carousel button img {width: 100%; height: 100%; object-fit: contain;}
.quote-sec .images {display: flex; justify-content: center; align-items: center; gap: 24px;}
.quote-sec .thumb {width: 100%; height: 100%; max-height: 170px; background-color: var(--_c-lght-blue); outline: none;}
.quote-sec .thumb img {width: 100%; height: 170px; object-fit: contain;}
.quote-form-m {padding: 0;}

/* Products */
.products {padding-block: 40px; --_c-light-text: #878787;}
.products .head {margin-inline: auto; text-align: center; margin-bottom: 20px;}
.products .head > :first-child {font-family: var(--ff-primary); font-size: var(--fs-lg, 30px); font-weight: 700; color: var(--c-primary); margin-bottom: 0.5rem;}
.products .head p {color: #747474; margin-bottom: 1rem;}
.products .scroll__p p {max-height: 76px;}
.products .head .scroll {max-height: 50px;}
.products .head .scroll > :last-child {margin: 0;}
.products .cards {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 27px;}
.products .cards a {text-align: center;}
.products .cards a :nth-child(2) {text-transform: capitalize; font-size: var(--fs-base, 16px); color: #666666;} 
.products .cards a:hover :nth-child(2) {color: var(--c-primary);}
.products .image {display: flex; justify-content: center; align-items: center; background-color: var(--c-bg); margin-bottom: 14px;}
.products .image img {width: 100%; height: 300px; object-fit: contain;}

.pagination {width: fit-content; display: flex; align-items: center; gap: 8px; margin: 30px 0 0 auto;}
.pagination > * {flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background-color: var(--c-primary); color: #fff;}
.pagination a:hover,
.pagination span.current {background-color: var(--c-secondary); color: var(--c-primary);}

/* Ideas */
.ideas {padding-block: 30px 20px; --_c-gray: #4A4A4A;}
.ideas .content {background-color: var(--c-secondary); padding: 65px 15px; border-top-right-radius: 80px; border-bottom-left-radius: 80px;}
.ideas .head {max-width: 1110px; text-align: center; margin-inline: auto; margin-bottom: 34px;}
.ideas .head > :first-child {font-size: var(--fs-lg, 30px); color: var(--c-heading);}
.ideas .items {display: grid; gap: 25px;}
.ideas .items > div {display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;}
.ideas .items > div * {display: block; font-size: var(--fs-xs, 14px); color: var(--_c-gray);}
.ideas .items > div > :nth-child(2) {height: 48px; font-size: var(--fs-base); font-weight: 600; text-transform: capitalize;}

/* Customization */ 
.customization {padding-block: 20px; --_c-light-heading: #6E6E6E; --_c-light-bg: #F5F5F5;}
.customization .head {max-width: 1110px; text-align: center; margin-inline: auto; margin-bottom: 33px;}
.customization .head > :first-child {font-size: var(--fs-lg, 30px); color: var(--c-primary);}
.customization .wrapper {display: grid; grid-template-columns: minmax(450px, 623px) minmax(430px,578px); align-items: center; gap: 82px;}
.customization .content {position: relative;}
.customization .content .scroll {max-height: 530px; padding-right: 12px;}
.customization .content::before {position: absolute; inset:85px -46px auto auto; width: 38px; height: 283px; background: no-repeat center/cover url('https://www.ybyboxes.com/wp-content/themes/ybyboxes-new/assets//icons/customization-icon.svg'); content: '';}
.customization .content .scroll > h3 {font-family: "OpenSans-Regular" !important; font-size: var(--fs-base, 16px); font-weight: 400; color: var(--_c-light-heading); margin-block: 30px 10px;}
.customization .content :where(ol, ul) {padding-inline-start: 36px; margin-block: 0.375rem;}
.customization .content li {font-size: 14px; color: var(--_c-light-heading); margin-bottom: 6px;}
.customization .content li * {text-transform: capitalize; color: var(--_c-light-heading);}
.customization .content ul li {list-style: disc;}
.customization .content ol li {list-style: decimal;}
.customization .content .scroll > :not(:last-child) {margin-bottom: 10px;}
.customization .content :last-child {margin-bottom: 0; color: var(--_c-light-heading);}
.customization .image {height: 100%; margin-inline: auto;}
.customization .image img {height: 100%;}

/* Quality */
.quality {padding-block: 20px 25px; --_c-border: #D2D2D280; --_c-gray: #4A4A4A;}
.quality .heading {display: flex; justify-content: center; align-items: center; background: no-repeat center/cover url('https://www.ybyboxes.com/wp-content/themes/ybyboxes-new/assets/images/quality-image.webp'); padding-inline: 16px;}
.quality .heading :first-child {font-size: var(--fs-md, 28px); font-weight: 700; line-height: 1.55; text-align: center; color: var(--_c-gray); padding: 10px;}
.quality .wrapper {display: grid; grid-template-columns: minmax(300px, 415px) minmax(640px, 1fr); gap: 20px;}
.quality .features {display: grid; grid-template-columns: repeat(2, 1fr);}
.quality .features > :nth-child(1) {padding: 0 13px 32px 0; border-right: 1px solid var(--_c-border); border-bottom: 1px solid var(--_c-border);}
.quality .features > :nth-child(2) {padding: 0 32px 0 13px; border-bottom: 1px solid var(--_c-border);}  
.quality .features > :nth-child(3) {padding: 13px 16px 0 0; border-right: 1px solid var(--_c-border);}
.quality .features > :nth-child(4) {padding: 13px 0 0 16px;}
.quality .features > div {display: flex; flex-direction: column;}
.quality .features > div :first-child {margin-bottom: 20px;}
.quality .features > div :nth-child(2) {font-size: var(--fs-sm, 20px); color: #747474; margin-bottom: 8px;}
.quality .features > div p {max-height: 168px; overflow-y: auto; font-size: var(--fs-xs, 14px); line-height: 1.6; padding-right: 12px;}

/* FAQ */
.faq {padding-block: 26px 20px; --_c-heading: #747474;}
.faq .head {max-width: 1028px; margin-inline: auto; text-align: center; margin-bottom: 50px;}
.faq .head :first-child {font-size: var(--fs-lg, 30px); color: var(--c-primary); margin-bottom: 6px;}
.faq .head p {color: var(--c-text);}
.faq .wrapper {display: grid; grid-template-columns: minmax(516px, 672px) minmax(400px, 1fr); align-items: center; gap: 44px;}
.faq .accordian {width: 100%; max-height: 440px; padding-right: 20px;}
.faq .acc-item {position: relative;}
.faq .acc-item::before {position: absolute; inset: 0 auto; width: 23px; height: 23px; background: no-repeat center/cover url('https://www.ybyboxes.com/wp-content/themes/ybyboxes-new/assets/images/faq-icon.webp'); content: '';}
.faq .acc-btn {position: relative; width: 100%; color: #000; text-align: start; font-size: var(--fs-base, 16px); font-weight: 600; padding-inline: 36px 20px; padding-bottom: 32px; outline: none;}
.faq .acc-btn::before {position: absolute; inset: auto auto 0 0; width: 100%; height: 10px; background: no-repeat center/cover url('https://www.ybyboxes.com/wp-content/themes/ybyboxes-new/assets/images/faq-border.webp'); content: ''}
.faq .acc-btn::after {position: absolute; inset: 2px 2px auto auto; width: 12px; height: 12px; background: no-repeat center/cover url('https://www.ybyboxes.com/wp-content/themes/ybyboxes-new/assets/icons/plus-solid.svg'); content: ''; filter: var(--fltr-primary);}
.faq .panel {max-width: 668px; padding-inline: 30px; display: none;}
.faq .panel p {font-size: var(--fs-xs, 14px); line-height: 1.5; color: var(--_c-heading);}
.faq .acc-item:not(:last-child) {margin-bottom: 20px;}
.faq .acc-btn.active + .panel {display: block; } 
.faq .acc-btn.active + .panel ul li {list-style: list-item; list-style-type: disc;  color: #747474;}
.faq .acc-btn.active {color: var(--c-primary); margin-bottom: 12px;}
.faq .acc-btn.active::after {background-image: url('https://www.ybyboxes.com/wp-content/themes/ybyboxes-new/assets/icons/minus-solid.svg');}
.faq .acc-btn.active + .panel table {border-collapse: collapse; width: 100%; margin: 1em 0; font-family: sans-serif;}
.faq .acc-btn.active + .panel th {color:#00529f}
.faq .acc-btn.active + .panel td {color:var(--_c-heading)}
.faq .acc-btn.active + .panel th, td {border: 1px solid #00529f; padding: 8px 12px; text-align: left;}
.faq .acc-btn.active + .panel thead {background-color: #FDD228;}

/* Boxes */
.boxes {padding-block: 20px 30px;}
.boxes .wrapper {display: grid; grid-template-columns: minmax(630px, 839px) minmax(275px, 370px); gap: 50px; align-items:center;}
.boxes .content {max-height: 315px; padding-right: 20px; color:#595959; }
.boxes .content :where(h2, h3, h4, h5, h6) {color: var(--_c-md-heading); margin-bottom: 6px;}
.boxes .content h2 {font-size: calc(var(--fs-md, 28px) - 6px); color:#595959; margin-block:12px; }
.boxes .content h3 {font-size: 20px;  color:#595959; margin-block:12px;  }
.boxes .content h4 {font-size: var(--fs-sm, 20px);}
.boxes .content h5 {font-size: calc(var(--fs-sm, 20px) - 2px);}
.boxes .content h6 {font-size: var(--fs-base, 16px);}
.boxes .content p {color: #595959; font-size:14px;  margin-bottom: 14px;}
.boxes .content p a {display: inline-block; color: var(--c-primary); text-decoration: underline;}
.boxes .content p strong {color: var(--_c-md-heading);}
.boxes .content :where(ul, ol) {padding-inline-start: 26px; color: var(--c-text); margin-block: 12px;}
.boxes .content ul li {list-style: disc; color:#595959; margin-bottom:6px; font-size:16px;  }
.boxes .content ol li {list-style: color:#595959; margin-bottom:6px; font-size:16px; }

/* TESTIMONIALS */
.testimonial {padding-top: 20px; background-color: #f0f7fe; padding-block: 60px; --_c-md-text: #747474;}
.testimonial .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
.testimonial .head {max-width: 460px; display: flex; flex-direction: column;}
.testimonial .head :first-child {display: block; color:#666666; text-transform: capitalize; margin-bottom: 24px;}
.testimonial .head :nth-child(2) {color: var(--c-primary); font-size: calc(var(--fs-xl, 34px) + 2px); line-height: 1.5; text-transform: capitalize; margin-bottom: 50px;} 
.testimonial .head a {width: fit-content; color: #fff; background-color: var(--_c-btn); text-transform: uppercase; padding: 16px 81px; border-radius: 5px;}
.testimonial .head a:hover {background-color: var(--c-secondary); color: var(--c-primary); text-decoration: underline; transition: var(--trans-4);}
.testimonial .review {text-align: center;}
.testimonial .review ul {margin-bottom: 30px; display: flex; justify-content: center; align-items: center; gap: 20px;}
.testimonial .review li {width: 130px; height: 130px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--c-secondary); border-radius: 100%;}
.testimonial .review li img {width: 70%;}
.testimonial .review p {font-size: calc(var(--fs-sm, 20px) - 2px); line-height: 1.6; color:#666666; margin-bottom: 34px;}
.testimonial .review > :nth-child(3) {display: block; text-transform: capitalize; margin-bottom: 14px;}
.testimonial .head a {background-color: var(--c-primary); font-weight: 700;}
.testimonial .head a:hover {text-decoration: none;}
  
/* Media Queries */
@media only screen and (max-width: 1200px) {
    /* Products */
    .products .cards {grid-template-columns: repeat(3, 1fr);}
    /* Ideas */
    .ideas .items {grid-template-columns: repeat(3, 1fr); gap: 20px;}
	.customization .content::before { inset:85px 0 auto auto; }
}
@media only screen and (max-width: 991px) {
    /* Quote */
    .quote-sec {padding-block: 37px 30px;}
    .quote-sec .wrapper {grid-template-columns: 1fr;}
    .quote-sec .images {gap: 15px;}
    .quote-sec .thumb {width: 100%; height: auto;}
	.quote-sec .thumb img {height: 130px;}
    /* Ideas */
    .ideas .items > div {gap: 15px;}
    .ideas .content {padding-block: 45px;}
    .ideas .head {margin-bottom: 24px;}
.ideas .items { grid-template-columns: repeat(2, 1fr) !important; }
/* Customization */
    .customization .head {margin-bottom: 25px;}
    .customization .wrapper {grid-template-columns: 1fr; gap: 25px;}
    .customization .content {max-width: 680px; margin-inline: auto;}
	.customization .content .scroll {max-height: 475px;}
    .customization .content::before {display: none;}
    /* Quality */
    .quality .wrapper {grid-template-columns: 1fr;}
    /* FAQ */
    .faq .head {margin-bottom: 20px;}
    .faq .wrapper {grid-template-columns: 1fr; gap: 10px;}
    .faq .accordian {max-height: 400px; overflow-y: auto; padding: 5px 20px 0 0; margin-inline: auto;}
    .faq .image {margin-inline: auto;}
    .faq .image img {width: 400px;}
	/* Boxes */
    .boxes .wrapper {grid-template-columns: 1fr; gap: 20px;}
    .boxes .image {order: 1; margin-inline: auto;}
    .boxes .content {order: 2;}
	/* Testimonial */
    .testimonial {padding-block: 40px;}
    .testimonial .wrapper {grid-template-columns: 1fr;}
    .testimonial .head {text-align: center; margin-inline: auto;}
    .testimonial .head a {margin-inline: auto; padding-inline: 60px;}
    .testimonial .head :nth-child(2) {margin-bottom: 26px; font-size: var(--fs-xl, 34px);}
    .testimonial .review {max-width: 628px; margin-inline: auto;}
    .testimonial .review li {width: 100px; height: 100px;}
    .testimonial .review p {margin-bottom: 20px;}
}   
@media only screen and (max-width: 767px) {
    /* Products */
    .products .cards {grid-template-columns: repeat(2, 1fr);}
    /* Ideas */
    .ideas .items {grid-template-columns: repeat(2, 1fr);}
    .ideas .items > div {gap: 10px;}
    /* Quality */
    .quality .features {grid-template-columns: 1fr; max-width: 680px; margin-inline: auto;}
    .quality .features > :nth-child(1) {padding: 0 0 15px 0; border-right: none; margin-bottom: 15px;}
    .quality .features > :nth-child(2) {padding: 0 0 15px 0; border-bottom: 1px solid var(--c-border); margin-bottom: 15px;}  
    .quality .features > :nth-child(3) {padding: 0 0 15px 0; border-right: none; border-bottom: 1px solid var(--c-border); margin-bottom: 15px;}
    .quality .features > :nth-child(4) {padding: 0;}
}
@media only screen and (max-width: 575px) {

.products .cards {grid-template-columns:1fr;}
    /* Products */
    .products {padding-bottom: 15px;}
    .products .cards a {width: 100%; margin: 0;}
    .products .image {margin-bottom: 10px;}
    /* Quote */
    .quote-sec {padding-block: 25px;}
    .quote-sec .wrapper {gap: 15px;}
	.quote-sec .carousel button {height: 350px;}
	.quote-sec .images {gap: 8px;}
	.quote-sec .thumb img {height: 100px;}
    /* Ideas */
    .ideas {padding-block: 15px;}
    .ideas .content {padding-block: 25px; border-radius: 0 50px 0 50px;}
    .ideas .head {margin-bottom: 15px;}
    .ideas .items {  grid-template-columns: repeat(1, 1fr) !important; }
    .ideas .items > div {width: 100%; max-width: 400px; margin-inline: auto;}
    .ideas .items > div img {width: 30px;}
	.ideas .items > div > :nth-child(2) {height: auto;}
    /* Customization */
    .customization {padding-block: 15px;}
    .customization .head {margin-bottom: 15px;}
    .customization .wrapper {gap: 10px;}
    .customization .content ul li {padding-left: 0;}
	.customization .content .scroll > h3 {margin-block: 15px 8px;}
    /* Quality */
    .quality {padding-bottom: 15px;}
    .quality .features > div :first-child {margin-bottom: 10px;}
    /* FAQ */
    .faq {padding-block: 15px 20px;}
    .faq .head {margin-bottom: 10px;}
	/* Boxes */
    .boxes {padding-block: 16px;}
	/* Testimonial */
    .testimonial {padding-block: 16px;}
    .testimonial .head :first-child {font-size: var(--fs-xs, 14px); margin-bottom: 6px;}
    .testimonial .head :nth-child(2) {margin-bottom: 10px;}
    .testimonial .wrapper{gap: 20px;}
    .testimonial .review li {width: 70px; height: 70px;}
    .testimonial .review li img {width: 46px;}
    .testimonial .head a {font-size: var(--fs-xs, 14px); padding: 10px 26px; }
    .testimonial .review p {margin-bottom: 8px;}
    .testimonial .review > :nth-child(3) {margin-bottom: 4px;}
    .testimonial .review > :nth-child(4) {width: 80px;}
}

@media only screen and (max-width: 475px) {
    /* Testimonial */
    .testimonial .review li {width: 50px; height: 50px;}
    .testimonial .review li img {width: 35px;}
}