/* Choose */
.choose {background: var(--_c-grad-primary); padding-block: 2rem;}
.choose .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 4rem;}
.choose .content > :first-child {font-size: var(--fs-xxl, 46px); text-transform: capitalize; margin-bottom: 1rem;}
.choose .content > :first-child * {display: block; font-size: calc(var(--fs-base, 16px) + 2px); font-weight: 500; margin-bottom: 0.5rem;}
.choose .content p:not(:last-of-type) {margin-bottom: 1.5rem;}
.choose .image img {margin: auto;}

/* Qualities */
.qualities {padding-block: 2rem;}
.qualities ul {display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; padding-bottom: 2rem; border-bottom: 1px solid var(--_c-lgt-gray);}
.qualities li {display: flex; flex-direction: column; align-items: center; gap: 1.125rem; font-size: var(--fs-base, 16px); text-align: center; text-transform: capitalize; color: #000;}
.qualities .image {width: 3.125rem; height: 3.125rem;}
.qualities .image img {filter: var(--filter-primary); height:46px; }
.qualities li > :nth-child(2) {font-weight: 500; color: var(--c-heading);}

/* Popular */
.popular {padding-block: 1rem 2rem;}
.popular .head {margin-bottom: 2rem;}
.popular .head > :first-child {font-size: var(--fs-lg, 32px); text-transform: capitalize; margin-bottom: 0.75rem;}
.popular .head p {font-size: var(--fs-base, 16px); color: var(--c-text);}
.popular .wrapper {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; padding-bottom: 2rem; border-bottom: 1px solid var(--_c-lgt-gray); margin-bottom: 2rem;}
.popular .card {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; padding: 0.875rem 0.625rem; border-radius: 10px; box-shadow: var(--_shdw-black);}
.popular .card > :first-child {width: 100%; text-align: center; text-transform: capitalize; padding-bottom: 1rem; border-bottom: 1px solid var(--_c-lgt-gray);}
.popular .card > :nth-child(5) {align-self: flex-start;}
.popular .card .btn__primary {padding: 0.625rem 1.375rem; border-radius: 5px;}
.popular .text {text-align: center;}
.popular .text p {max-width: 56rem; max-height: 5.375rem; font-size: calc(var(--fs-sm, 20px) + 2px); margin-inline: auto; margin-bottom: 1.5rem;}
.popular .text .btn__primary {position: relative; text-wrap: wrap; padding: 0.625rem 1.75rem; border-radius: 3px; margin-inline: auto;}
.popular .text .btn__primary::before {position: absolute; inset: 0 12px 0 auto; width: 0.375rem; height: 0.625rem; background: no-repeat center/cover url('https://customcosmeticboxes.com/wp-content/themes/customcosmeticboxes/assets/images/images/icons/chevron-right.svg'); content: ''; margin-block: auto;}

/* Media Queries */
@media only screen and (max-width: 1200px) {
    /* Choose */
    .choose .wrapper {gap: 2rem;}
}
@media only screen and (max-width: 991px) {
    /* Choose */
    .choose {padding-block: 1.5rem;}
    .choose .wrapper {grid-template-columns: 1fr; gap: 1.5rem;}
    .choose .content > :first-child {margin-bottom: 0.75rem;}
    .choose .content p:not(:last-of-type) {margin-bottom: 1rem;}
    /* Qualities */
    .qualities {padding-block: 1.5rem;}
     /* Popular */
    .popular {padding-block: 1rem 1.5rem;}
    .popular .head {margin-bottom: 1.5rem;}
    .popular .wrapper {grid-template-columns: repeat(3, 1fr);}
    .popular .text .btn__primary {padding: 0.5rem 1.25rem;}
    .popular .text .btn__primary::before {right: 8px;}
}
@media only screen and (max-width: 767px) {
     /* Qualities */
     .qualities ul {grid-template-columns: repeat(3, 1fr); padding-bottom: 1.5rem;}
     /* Popular */
    .popular .wrapper {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and (max-width: 575px) {
    /* Choose */
    .choose {padding-block: 1rem;}
    .choose .wrapper {margin-bottom: 1rem;}
    .choose .content > :first-child {margin-bottom: 0.5rem;}
    .choose .content > :first-child * {margin-bottom: 0.25rem;}
    .choose .content p:not(:last-of-type) {margin-bottom: 0.5rem;}
     /* Quality */
    .qualities {padding-block: 1rem;}
    .qualities li:nth-child(2) .image img {width: 1.125rem;}
    .qualities .image {width: 2.5rem; height: 2.5rem;}
    .qualities .image img {width: 1.75rem;}
      /* Popular */
    .popular {padding-block: 0 1rem;}
    .popular .head {margin-bottom: 0.75rem;}
    .popular .head > :first-child {margin-bottom: 0.375rem;}
    .popular .wrapper {padding-bottom: 1.25rem; margin-bottom: 1rem;}
    .popular .card {gap: 0.75rem;}
    .popular .card > :first-child {padding-bottom: 0.75rem;}
    .popular .card .btn__primary {padding: 0.375rem 0.5rem;}
    .popular .text p {margin-bottom: 0.5rem;}
    .popular .text .btn__primary {padding: 0.375rem 0.625rem;}
    .popular .text .btn__primary::before {right: 3px; width: 0.25rem;}
}
@media only screen and (max-width: 475px) {
    /* Qualities */
    .qualities ul {grid-template-columns: repeat(2, 1fr); padding-bottom: 1rem;}
    .qualities li {gap: 0.5rem;}
     /* Popular */
    .popular .wrapper {grid-template-columns: 1fr;}
    .popular .card {max-width: 16.375rem; margin-inline: auto;}
}
@media only screen and (max-width: 360px) {
    /* Qualities */
    .qualities ul {grid-template-columns: 1fr;}
}