/* banner */
.banner_slider {position: relative;overflow: hidden;width: 100%;height: auto;}
.banner_slider .banner_slide {display: none;width: 100%;height: 100%;}
.banner_slider img {width:100%}
.banner_slider .banner_slide.active { display: block; }
.banner_slider button { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0); color: white; font-size: 2rem; padding: 10px; border: none; cursor: pointer; z-index: 20; }
.banner_slider button.prev {left: 10px;}
.banner_slider button.next {right: 10px;}
.banner_slider button:hover { background-color: rgba(0, 0, 0, 0.8);}
@media (max-width: 991px) { 
.banner_slider button.prev {top:150px; left:10px;}
.banner_slider button.next {top:150px; right:10px;}
}@media (max-width: 575px) { 
.banner_slider button.prev {top:150px; left:10px;}
.banner_slider button.next {top:150px; right:10px;}
}


/* Top Content */
.top-content {padding-block: 40px 10px; --_c-light-text: #878787;}
.top-content .head {margin-inline: auto; text-align: center; margin-bottom: 24px;}
.top-content .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;}
.top-content .head p {color: var(--c-text); height:74px;}

/* Products */
.products {padding-block: 30px; --_c-light-text: #878787;}
.products .head { margin-bottom: 16px;}
.products .head > :first-child {font-family: var(--ff-primary); font-size:22px; font-weight: 700; color: #6B6B6B; margin-bottom: 0.5rem;}
.products .head p {color: var(--c-text);}
.products .cards {display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px 20px;}
.products .cards a {text-align: center;}
.products .cards a :nth-child(2) {text-transform: capitalize; font-size: var(--fs-base, 16px); color: #747474;} 
.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; padding:16px;}
.products .image img {width: 100%; height: 237px; object-fit: contain;}

/* 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; grid-template-columns: repeat(5, 1fr); 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;}
.customization .head {max-width: 1110px; text-align: center; margin-inline: auto; margin-bottom: 32px;}
.customization .head > :first-child {font-size: var(--fs-lg, 30px); color: var(--c-primary);}
.customization .wrapper {display: grid; grid-template-columns: minmax(512px, 704px) minmax(360px, 545px); align-items: center; gap: 50px;}
.customization .text {max-height: 564px; overflow-y: auto; padding-right: 10px;}
.customization .text > div {background-color: #F0F7FE; padding: 25px 32px; border-top-right-radius: 50px; border-bottom-left-radius: 50px;}
.customization .text > div > :first-child {font-size: var(--fs-base, 16px); color: #6E6E6E; margin-bottom: 14px;}
.customization .text :where(ul, ol) {padding-inline-start: 38px;} 
.customization .text li {font-size: 14px; color: #6E6E6E}
.customization .text li:not(:last-of-type) {margin-bottom: 2px;}
.customization .text ol li {list-style: auto;}
.customization .text ul li {list-style: disc;}
.customization .text > div:not(:last-child) {margin-bottom: 24px;}
.customization .image {margin-inline: auto;}
  
/* Quality */
.quality { padding-block: 20px 25px; --_c-lght-blue: #F0F7FE; --_c-text: #666666; }
.quality .wrapper { background-color: var(--_c-lght-blue); padding: 38px 24px; border-top-right-radius: 80px; border-bottom-left-radius: 80px; }
.quality .head { margin-bottom: 32px; }
.quality .head :first-child { font-size: var(--fs-lg, 30px); color: var(--c-primary); text-align: center;}
.quality .features .feature-item {display: flex; flex-direction: column;}
.quality .features .feature-item :first-child {margin-bottom: 20px; filter: var(--fltr-secondary);}
.quality .features .feature-item :nth-child(2) {font-size: var(--fs-base, 16px); margin-bottom: 8px;}
.quality .features .feature-item p {max-height: 106px; overflow-y: auto; line-height: 1.8; font-size: var(--fs-xs, 14px); color: #666; padding-right: 14px;}
.features-slider-wrapper {position: relative;overflow: hidden;}
.features-slider {display: flex;gap: 16px;transition: transform 0.4s ease-in-out;will-change: transform;}
.feature-item {min-width: calc(50% - 8px);box-sizing: border-box;}
.features-dots {display: flex;justify-content: center;gap: 8px;margin-top: 16px;}
.features-dots button {width: 20px;height: 20px;background-color: #fff;border-radius: 50%;border: none;cursor: pointer;}
.features-dots button.active {width: 30px;background-color: #FEC600;border-radius: 20px;}
.visually-hidden {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap;border: 0;}

@media (max-width: 767px) {
	.feature-item {min-width: 100%;}
}


/* 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 {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');}

/* 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; overflow-y: auto; padding-right: 20px;}
.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-bottom:12px; }
.boxes .content h3 {font-size: calc(var(--fs-md, 28px) - 7px);}
.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: var(--c-text); margin-bottom: 10px;}
.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-bottom: 12px;}
.boxes .content ul li {list-style: disc; color: var(--c-text);}
.boxes .content ol li {list-style: auto; color: var(--c-text);}

/* 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;}
}
@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;}
    /* 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) {
	.features-slider-wrapper {padding-bottom: 15px;}
    /* 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 .head > :first-child { font-size:18px; }
.top-content .head p {height:98px;}
    /* Products */
    .products {padding-bottom: 15px;}
    .products .cards a {width: 100%; margin-inline: auto;}
    .products .image {margin-bottom: 10px;}
	.products .cards {grid-template-columns:1fr;}
    /* 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: 1fr;}
    .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;}
}