/* BANNER */
.banner {background-position: center; background-size: cover; background-repeat: no-repeat; padding: 8.125rem 0 4.375rem; margin-top: -6rem;}
.banner .content {width: 50%;}
.banner .content > :first-child {font-size: var(--fs-xl); font-weight: 700; color: var(--c-heading); margin-bottom: 1.25rem; line-height: 1.3;}
.banner .content > :first-child * {display: block; color: var(--c-primary); font-size: var(--fs-base, 16px); margin-bottom: 10px; font-family: var(--ff-secondary); font-weight: 400;}
.banner :where(ul, ol) {padding-left: 0; margin-bottom: 1.5rem;}
.banner li {position: relative; padding-left: 1.7rem; color: #6E6E6E;}
.banner li:not(:last-child) {margin-bottom: 0.63rem;}
.banner li::before {position: absolute; width: 18px; height: 18px; inset: 3px 0 0; background: no-repeat center/cover url('https://www.thedisplayboxes.com/theme/website/assets/images/icons/check-icon.png'); content: '';}
.banner .content:nth-last-child(2) {margin-bottom: 2.87rem;}
.banner .btn {display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 3rem;} 
.banner .btn * {padding: 0.625rem 1.75rem; border-radius: 5px;}

/* FEATURES */
.feature {padding-block: 3.13rem 3rem;}
.feature .title {text-align: center; margin-bottom: 1.87rem;}
.feature .title p {height: 4.37rem; overflow-y: auto; padding-right: 10px;}
.feature ul {display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 3rem; padding-left: 0;}
.feature li {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.75rem;}
.feature li:not(:last-of-type)::before {position: absolute; inset: 0 -24px 0 auto; width: 1px; height: 100%; background-color: var(--_c-ft-brdr); content: '';}
.feature li * {display: block; text-align: center;}
.feature li > :nth-child(2) {font-size: calc( var(--fs-sm) + 3px);}
.feature li > :last-child {color: var(--c-lite-text); font-size: var(--fs-2xs);} 

/* SOLUTIONS */
.solutions {padding-block: 2.5rem;}
.solutions .title {text-align: center; margin-bottom: 2.7rem;}
.solutions .head > :first-child {font-size: var(--fs-sm); font-weight: 700; margin-bottom: 1.25rem;}
.solutions .title p {max-height: 4.37rem;}
.solutions .designing {padding: 3.25rem 1.87rem 2.93rem; box-shadow: var(--shdw-lght); border-radius: 10px; margin: 0.625rem;}  
.solutions .head {text-align: center;  border-bottom: 1px solid var(--c-border); margin-bottom: 1rem;}
.solutions .head p {max-height: 120px; margin-bottom: 1rem;}
.solutions ul {padding-left: 0;}
.solutions .slick-list li {position: relative; padding-left: 1.5rem; margin-bottom: 10px;}
.solutions .slick-list li::before {position: absolute; width: 21px; height: 19px; inset: 2px 0; background-image: url(https://www.thedisplayboxes.com/theme/website/assets/images/icons/solution-check.png); content: ''; background-repeat: no-repeat;}
.solutions .slick-dots {display: flex; justify-content: center; gap: 10px;}
.solutions .slick-dots button {color: transparent; width: 25px; height: 3px; background-color: var(--c-border);}
.solutions .slick-active button {background-color: var(--c-primary);}
.solutions .slick-dots button:hover{background-color: var(--c-primary); transition: var(--trans-3);}
.solutions .slick-slide:hover {box-shadow:var(--_shdw-sol); transition: var(--trans-3);}

/* PRODUCTS */
.products {padding-block: 2.5rem;}
.products .title {text-align: center; margin-bottom: 1.5rem;}
.products .title p {height: 4.37rem; overflow-y: auto; padding-right: 10px;}
.products .item {border-radius: 0.62rem; background: no-repeat -15px 0px / 110% url(https://www.thedisplayboxes.com/theme/website/assets/images/card-effect.webp); box-shadow: var(--_shdw-lgt); margin-inline: 10px; margin-bottom: 2.5rem;}
.products .image {display: flex; justify-content: center; border-bottom: 1px solid var(--c-border); padding: 2.31rem 0px 1.87rem;}
.products .card {padding: 1.25rem 1rem;}
.products .head {text-align: center; border-bottom: 1px solid var(--c-border); margin-bottom: 1rem;}
.products .head :first-child {height: 66px; font-size: var(--fs-sm); font-weight: 700; font-family: var(--ff-secondary); margin-bottom: 1.25rem;}
.products .head p {color: var(--_c-pd-lght); margin-bottom: 1rem;}
.products .card :where(ul, ol) {padding-left: 0; margin-bottom: 1rem;}
.products .card li {position: relative; padding-left: 1.5rem; color: var(--_c-pd-lght); font-size: var(--fs-2xs);}
.products .card li:not(:last-of-type) {margin-bottom: 0.625rem;}
.products .card li::before {position: absolute; width: 13px; height: 13px; inset: 4px 0; background: no-repeat center / cover url('https://www.thedisplayboxes.com/theme/website/assets/images/icons/check-icon.png'); content: '';}
.products .card > :last-child {color: var(--c-primary); display: block; text-align: right; font-weight: 500;}
.products .slick-dots {display: flex; justify-content: center; gap: 0.62rem;}
.products .slick-dots button {color: transparent; width: 1.56rem; height: 3px; background-color: var(--c-border);}
.products .slick-active button {background-color: var(--c-primary);}
.products .slick-dots button:hover{background-color: var(--c-primary); transition: var(--trans-3);}
.products .slick-slide:hover {box-shadow: var(--_shdw-pd); transition: var(--trans-3);}
.products .slick-track {padding-top: 0.63rem;}
.products .slick-slide img {height: 240px; object-fit: contain;}

/* FORM */
.form {background: no-repeat center / cover url('https://www.thedisplayboxes.com/theme/website/assets/images/form-background.webp'); background-attachment: fixed; padding: 3.62rem 0px 4.56rem;}
.form .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;}
.form .head {padding: 1.25rem 1.87rem;}
.form .head h3 {font-size: var(--fs-md); margin-bottom: 1.25rem; color: #fff; font-weight: 700; font-family: var(--ff-secondary);}
.form .head p {color: #fff; font-size: var(--fs-2xs); margin-bottom: 2rem;}
.form ul {color: #fff; margin-bottom: 3rem; padding-inline: 1.875rem;}
.form li {position: relative; padding-left: 4.06rem;}
.form li:not(:last-of-type) {margin-bottom: 1.875rem;}
.form li > :first-child {font-size: calc(var(--fs-sm) - 2px); display: block; font-family: var(--ff-secondary); margin-bottom: 10px;}
.form li > :last-child {font-size: var(--fs-2xs);}
.form li::before {position: absolute; width: 2.56rem; height: 2.56rem; left: 0; top: 7px; background: no-repeat center/cover url('https://www.thedisplayboxes.com/theme/website/assets/images/icons/form-check.png'); content: '';}
.form .content .btn__primary {gap: 0.75rem; padding-inline: 1.25rem; margin-left: auto;}

/* REPAIR */
.repair {padding-block: 3.75rem 7.5rem;}
.repair .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.87rem;}
.repair .content > :first-child {margin-bottom: 1.87rem;}
.repair .content > :nth-last-child(2) {margin-bottom: 2.19rem;}
.repair .content > :last-child {border-left: 5px solid var(--c-primary); padding-left: 2.19rem; display: inline-block; font-size: var(--fs-base);}
.repair .image {text-align: right; margin-block: auto;}

/* CLIENT */
.client ul {background-color: var(--_c-bg-gray); padding: 3.125rem 2.15rem; margin-bottom: 5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem; text-align: center;}
.client li div * {display: block;}
.client li div :nth-last-child(2) {font-size: var(--fs-md); font-weight: 700; font-family: var(--ff-primary);}
.client li div :last-child {font-size: var(--fs-2xs); font-weight: 700; color: var(--c-lite-text);} 

/* CUSTOMIZATION */
.customization {padding-block: 2.5rem;}
.customization .wrapper {display: grid; grid-template-columns: minmax(509px, 668px) minmax(389px, 491px); gap: 3rem;}
.customization .content > :first-child {font-size: var(--fs-md);}
.customization .content > :nth-last-child(3) {max-height: 4.37rem; border-left: 5px solid var(--c-primary); padding-left: 2.19rem; overflow: auto;}
.customization .content p {margin-bottom: 1rem;}
.customization .list {display: grid; grid-template-columns: minmax(313px, 401px) minmax(217px, 286px); gap: 2rem;}
.customization ul {padding-left: 0;}
.customization li {margin-bottom: 1.25rem; position: relative; padding-left: 2.19rem;}
.customization li::before {position: absolute; width: 1.56rem; height: 1.56rem; inset: 0; background: no-repeat center/cover url('https://www.thedisplayboxes.com/theme/website/assets/images/icons/about-check-icon.svg'); content: '';}
.customization li:hover::before {background-image: url('https://www.thedisplayboxes.com/theme/website/assets/images/icons/list-hover.svg');}
.customization .btn__primary {padding-inline: 1.56rem; border-radius: 5px;}
.customization .gallery {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;}
.customization .box {width: 100%;}
.customization .box:nth-of-type(3) {grid-column: 1/3;}
.customization .box img {height: 15.4rem; object-fit: cover; width: 100%; border-radius: 5px;} 

/* POPULAR */
.popular {padding-block: 2.5rem;}
.popular .head {text-align: center; margin-bottom: 3.43rem;}
.popular .head :last-child {max-height: 4.37rem; overflow-y: auto;  padding-right: 0.62rem;}
.popular .wrapper {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;}
.popular .image {padding: 23px 18px; background-color: var(--_c-bg-blue); inset: 0; border-radius: 0.62rem; position: absolute; width: fit-content; height: fit-content;}
.popular .card {box-shadow: var(--shdw-dark); padding: 1.25rem; border-radius: 0.62rem; position: relative;} 
.popular .card:hover {box-shadow: var(--shdw-hvr); transition: var(--trans-3);}
.popular .card :nth-last-child(2) {font-size: calc(var(--fs-sm) - 2px); font-family: var(--ff-secondary); font-weight: 700; margin-left: 4.375rem;}
.popular .card :nth-last-child(2) * {font-size: calc(var(--fs-md) - 7px); display: block; color: var(--_c-lite-brwn); font-weight: 500}
.popular .card p {font-size: var(--fs-2xs); margin-top: 10px; max-height: 5.31rem; overflow-y: auto;}

/* UNBOX */
.unbox {padding-block: 2.5rem; background: no-repeat center top/ contain url('https://www.thedisplayboxes.com/theme/website/assets/images/unbox-back.webp');}
.unbox .head {margin-bottom: 1.87rem;}
.unbox .wrapper {display: grid; grid-template-columns: minmax(300px, 467px) minmax(427px, 664px); gap: 1.5rem; align-items: center;}
.unbox ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding-left: 0;}
.unbox li {position: relative; padding-left: 2.19rem;}
.unbox li::before {position: absolute; width: 1.37rem; height: 1.37rem; inset: 0; background: no-repeat center/ cover url(https://www.thedisplayboxes.com/theme/website/assets/images/icons/unbox-tick-icon.svg); content: '';}

/* ORDER */
.order {padding-block: 3rem;}
.order .head {text-align: center; margin-bottom: 5rem;}
.order ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding: 0; margin-bottom: 2rem;}
.order li {text-align: center; padding: 2.5rem 1.25rem; border-radius: 3.12rem 0px 3.12rem 0px;}
.order li:hover {box-shadow: var(--shdw-dark); transition: var(--trans-3);}
.order li > :first-child {margin-bottom: 1.25rem;}
.order li > :last-child {font-size: var(--fs-sm); font-weight: 500;}
.order .btn__primary {margin-inline: auto;}

/* TESTIMONIAL */
.testimonial {padding-block: 2.5rem; --_c-primary-drk: #0068d7;}
.testimonial .head {text-align: center; margin-bottom: 3.12rem;}
.testimonial .wrapper {display: flex; align-items: center; gap: 50px;}
.testimonial .review-slider {width: 50%; box-shadow: var(--shdw-lght); border-radius: 10px; padding: 0 40px; text-align: center; position: relative;}
.testimonial .slick-next {position: absolute; right: 4%; top: 50%; z-index: 999; transform: translateY(-50%); filter: brightness(0) saturate(100%) invert(88%) sepia(4%) saturate(9%) hue-rotate(315deg) brightness(93%) contrast(78%); background: no-repeat center/cover url('https://www.thedisplayboxes.com/theme/website/assets/images/icons/angle-right-solid.svg'); color: transparent; width: 10px;}
.testimonial .slick-prev {position: absolute; left: 4%; top: 50%; z-index: 999; transform: translateY(-50%); filter: brightness(0) saturate(100%) invert(88%) sepia(4%) saturate(9%) hue-rotate(315deg) brightness(93%) contrast(78%); background: no-repeat center/cover url('https://www.thedisplayboxes.com/theme/website/assets/images/icons/angle-left-solid.svg'); color: transparent; width: 10px;}
.testimonial .review {padding-block: 2.5rem;}
.testimonial .review > :first-child {font-size: calc(var(--fs-sm) - 4px); font-weight: 600; margin-bottom: 1.25rem; font-family: var(--ff-secondary);}
.testimonial .review p {padding-bottom: 1rem;}
.testimonial .review > :nth-last-child(2) {font-size: calc(var(--fs-sm) - 4px); font-weight: 700; margin-bottom: 0.93rem; display: block; position: relative; padding-top: 7px;}
.testimonial .review > :nth-last-child(2)::before {position: absolute; width: 50%; height: 1px; inset: 0 25%; content: ''; background-color: var(--c-border);}
.testimonial .rating {display: flex; align-items: center; justify-content: center; gap: 3px;}
.testimonial .rating > :first-child {height: 25px; display: flex; align-items: center; transform: skewX(333deg); font-family: var(--ff-primary); background-color: var(--_c-primary-drk); line-height: 1; padding: 0px 0.93rem; z-index: 99; color: #fff; font-size: var(--fs-2xs);}
.testimonial ul {display: flex; justify-content: center; padding-left: 0; height: 25px; transform: skewX(333deg); border: 1px solid var(--c-border); padding: 5px 10px;
margin-top: 3px; margin-left: -6px; line-height: 1.37rem;}
.testimonial li {transform: skewX(-333deg); margin-right: 3px;}
.testimonial li > img {filter: brightness(0) saturate(100%) invert(60%) sepia(31%) saturate(6609%) hue-rotate(191deg) brightness(102%) contrast(103%);}

/* FAQ */
.faq {padding-block: 3rem; background-image:url('https://www.thedisplayboxes.com/theme/website/assets/images/faq-back.webp'); background-repeat: no-repeat; background-position: bottom;}
.faq .head {text-align: center; margin-bottom: 3.12rem;}
.faq .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;}
.faq .image {margin: auto;}
.faq .accordian {max-height: 460px; padding: 1px 0.93rem;}
.faq .acc-item {margin-bottom: 1.87rem; padding: 1.5rem 1.25rem; box-shadow: var(--shdw-lght);}
.faq .acc-item:first-of-type {border-top-left-radius: .25rem; border-top-right-radius: .25rem;}
.faq .acc-btn {color: #000; position: relative; width: 100%; text-align: start; padding-right: 1.87rem;}
.faq .acc-btn::before {transition: var(--trans-3); position: absolute; width: 0.93rem; height: 10px; right: 11px; top: 5px; background: no-repeat center/cover url('https://www.thedisplayboxes.com/theme/website/assets/images/icons/arrow-up.png'); content: '';}
.faq .acc-btn.active::before {transform: rotate(180deg);}
.faq .panel {padding-top: 1.87rem; display: none;}
.faq .panel[data-collapse='false'] {display: block;}

/* MEDIA QUERIES */ 
@media only screen and (max-width: 1200px) {
    /* CUSTOMIZATION */
    .customization .wrapper {gap: 2rem;}
    .customization .list {grid-template-columns: repeat(2, 1fr); gap: 1rem;}
    /* POPULAR */
    .popular .card {padding: 0.6rem;}
    .popular .card p {margin-top: 1.25rem;}
    .popular .card :nth-last-child(2) {margin-left: 5rem;}
}
@media only screen and (max-width: 991px) {
    /* BANNER */
    .banner .btn {margin-top: 2rem;}
    /* FEATURE */
    .feature ul {gap: 1.5rem;}
    .feature li:not(:last-of-type)::before {right: -12px;}
    /* FORM */
    .form .wrapper {grid-template-columns: 1fr;}
    /* REPAIR */
    .repair {padding-block: 3rem 5.5rem;}
    /* CLIENT */
    .client ul {margin-bottom: 3.125rem; grid-template-columns: repeat(3, 1fr); padding: 2rem;}
    /* CUSTOMIZATION */
    .customization .wrapper {grid-template-columns: 1fr;}
    .customization .gallery {grid-template-columns: repeat(3, 1fr)}
    .customization .box:nth-of-type(3) {grid-column: auto;}
    .customization .btn__primary {margin-inline: auto;}
    /* POPULAR */
    .popular .wrapper {grid-template-columns: repeat(3, 1fr);}
    /* TESTIMONIAL */
    .testimonial .wrapper {display: block;}
    .testimonial .review-slider {width: 100%;}
    .testimonial .image {margin-inline: auto; margin-bottom: 2rem; text-align: center;}
    /* FAQ */
    .faq .accordian {max-height: 26.25rem;}
}
@media only screen and (max-width: 767px) {
    /* BANNER */
    .banner {background-position: unset; padding-bottom: 3rem;}
    .banner .content {width: 80%;}
    /* FEATURE */
    .feature {padding-block: 2rem;}
    .feature ul {grid-template-columns: repeat(2, 1fr);}
    .feature li {padding-bottom: 1.25rem;}
    .feature li:nth-of-type(2n+2):before {content: none;}
    /* SOLUTIONS */
    .solutions {padding-block: 1.5rem;}
    .solutions .title {margin-bottom: 1.87rem;}
    /* PRODUCTS */
    .products {padding-block: 1.5rem;}
    .form .head {padding: 0px;}
    .form ul {margin-bottom: 2.5rem;}
    .form .content .btn__primary {margin-inline: auto;}
    /* REPAIR */
    .repair {padding-block: 2.5rem 3.5rem;}
    .repair .wrapper {grid-template-columns: 1fr;}
    .repair .content {order: 2;}
    .repair .image {order: 1; text-align: center;}
    /* CLIENT */
    .client ul {grid-template-columns: repeat(2, 1fr); margin-bottom: 1rem;}
    /* CUSTOMIZATION */
    .customization {padding-block: 1.5rem;}
    .customization .list {grid-template-columns: 1fr; gap: .5rem;}
    .customization .gallery {grid-template-columns: repeat(2, 1fr);}
    .customization .box:nth-of-type(3) {grid-column: 1/3;}
    .customization li {margin-bottom: 0.93rem;}
    /* POPULAR */
    .popular {padding-block: 1.5rem;}
    .popular .wrapper {grid-template-columns: repeat(2, 1fr);}
    .popular .card p {margin-top: 1.87rem;}
    .popular .head {margin-bottom: 2rem;}
    .popular .image {padding: 1.12rem;}
    .popular .image img{width: 2.3rem;}
    /* UNBOX */
    .unbox {padding-block: 0 1.5rem;}
    .unbox .wrapper {grid-template-columns: 1fr;}
    .unbox .image {margin-inline: auto;}
    .unbox .head {text-align: center;}
    /* ORDER */
    .order {padding-block: 1.5rem;}
    .order ul {grid-template-columns: repeat(2, 1fr); margin-bottom: 1.25rem;}
    .order li {padding: 1.25rem 1rem;}
    .order .image img {width: 3.7rem;}
    /* TESTIMONIAL */
    .testimonial {padding-block: 1.5rem;}
    .testimonial .head {margin-bottom: 1.87rem;}
    .testimonial .wrapper {grid-template-columns: 1fr;}
    .testimonial .image {margin-inline: auto;}
    /* FAQ */
    .faq {padding-block: 1.5rem;}
    .faq .head {margin-bottom: 1.87rem;}
    .faq .wrapper {grid-template-columns: 1fr; gap: 0.62rem;}
    .faq .accordian {max-height: 460px; order: 1;}
    .faq .panel {padding-top: 1.25rem;}
    .faq .acc-item {margin-bottom: 1.25rem;}
    .faq .image {order: 2;}
}
@media only screen and (max-width: 575px) {
    /* BANNER */
    .banner{ padding-bottom: 1.37rem;}
    .banner .content {width: 100%; text-align: center;}
    .banner li {padding-left: 1.125rem;}
    .banner li::before {width: 0.875rem; height: 0.875rem;}
    .banner .btn {justify-content: center; margin-top: 1.5rem;}
    .banner .btn * {padding: 0.5rem 1rem;}
    /* FEATURES */
    .feature {padding-block: 2rem 1.5rem;}
    .feature title {margin-bottom: 0.5rem;}
    .feature ul {grid-template-columns: 1fr;}
    .feature li:nth-of-type(-n+3):before {content: ''; inset: auto 0 -12px; width: 100%; height: 1px;}
    .feature li img {width: 3.125rem;}
    /* SOLUTIONS */
    .solutions {padding-block: 1rem;}
    /* PRODUCTS */
    .products {padding-block: 1rem;}
    /* FORM */
    .form {padding: 2.5rem 0;}
    .form ul {padding-left: 0; margin-bottom: 1.5rem;}
    .form .head p {margin-bottom: 1.5rem;}
    .form li::before {width: 2rem; height: 2rem; top: 5px;}
    .form li {padding-left: 3rem;}
    .form li:not(:last-of-type) {margin-bottom: 1rem;} 
    .form .content .btn__primary {padding: 0.5rem 1.25rem;}
    .form .content .btn__primary img {width: 1.125rem;}
    /* REPAIR */
    .repair {padding-block: 2.5rem;}
    .repair .content > :first-child {margin-bottom: 1rem;}
    .repair .content > :nth-last-child(2) {margin-bottom: 1rem;}
    .repair .content > :last-child {padding-left: 1.5rem;}
    /* CLIENT */
    .client ul {padding: 1.87rem 1.25rem;grid-template-columns: 1fr; gap: 1.5rem;}
    /* CUSTOMIZATION */
    .customization {padding-block: 1rem;}
    .customization .content > :first-child {margin-bottom: 0.5rem;}
    .customization .gallery {grid-template-columns: 1fr;}
    .customization .box:nth-of-type(3) {grid-column: auto;}
    /* POPULAR */
    .popular {padding-block: 1.5rem;}
    .popular .wrapper {grid-template-columns: 1fr;}
    .popular .image {padding: 1rem;}
    .popular .image img {width: 1.87rem;}
    .popular .card :nth-last-child(2) {margin-left: 4rem;}
    /* UNBOX */
    .unbox {padding-block: 1.5rem;}
    .unbox .head {margin-bottom: 1.25rem;}
    .unbox ul {grid-template-columns: 1fr;}
    /* ORDER */
    .order {padding-block: 1.5rem;}
    .order .head {margin-bottom: 2rem;}
    .order ul {grid-template-columns: 1fr; gap: 0.63rem;}
    .order li {padding: 1rem}
    .order .image img {width: 3rem;}
    /* FAQ */
    .faq {padding-block: 1rem;}
    .faq .acc-item {padding: 1rem;}
    .faq .acc-btn {padding-right: 0.75rem;}
    .faq .acc-btn::before {width: 0.625rem; height: 0.375rem; right: 0;}
}
@media only screen and (max-width: 475px) {
    .feature ul {gap: 1rem;}
    .feature li {padding-bottom: 1rem;}
    /* POPULAR */
    .popular .image {position: static; margin: 0 auto 0.75rem;}
    .popular .card {text-align: center;}
    .popular .card :nth-last-child(2) {margin: 0;}
    .popular .card p {margin: 0;}
    /* UNBOX */
    .unbox ul {gap: 0.87rem;}
}