/* Choose */
.choose {background: var(--_c-grad-primary); padding-block: 2rem;}
.choose .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem;}
.choose .content > :first-child {font-size: var(--fs-xxl, 46px); text-transform: capitalize; margin-bottom: 1rem;}
.choose .content > :first-child * {display: inline-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);}
.qualities li:nth-of-type(2) .image img {width: 2rem; height: 2.5rem;}
.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 > :first-child * {display: block; font-size: var(--fs-base, 16px); font-weight: 500; margin-bottom: 0.5rem;}
.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);}
.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;}

/* Bathbomb */
.bathbomb {padding-block: 2rem;}
.bathbomb .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-bottom: 2rem;}
.bathbomb .wrapper img {width: 100%}
.bathbomb .content {max-width: 55.125rem; margin-bottom: 3rem;}
.bathbomb .content > :first-child {font-size: var(--fs-lg, 32px); margin-bottom: 1rem;}
.bathbomb .content > :first-child * {display: block; font-size: var(--fs-base, 16px); font-weight: 700; text-transform: none; margin-bottom: 0.5rem;}
.bathbomb .content :where(h2, h3, h4, h5, h6) {font-weight: 500; color: var(--c-heading); margin-bottom: 1.25rem;}
.bathbomb .content h2 {font-size: var(--fs-lg, 32px)}
.bathbomb .content h3 {font-size: calc(var(--fs-md, 24px) + 4px);}
.bathbomb .content h4 {font-size: var(--fs-sm, 24px)}
.bathbomb .content h5 {font-size: var(--fs-sm, 20px);}
.bathbomb .content h6 {font-size: var(--fs-base, 16px);}
.bathbomb .content :where(ul, ol) {padding-left: 2.5rem; margin-bottom: 1rem;}
.bathbomb .content :where(ul, ol) li {font-size: var(--fs-base, 16px); line-height: 1.5;}
.bathbomb .content ul li {list-style: disc;}
.bathbomb .content ol li {list-style: auto;}
.bathbomb .content li:not(:last-child) {margin-bottom: 0.25rem;}
.bathbomb .content p {font-size: var(--fs-base, 16x); padding-left: 0.75rem;}
.bathbomb .content p a {display: inline; font-size: var(--fs-base, 16px); color: var(--c-primary);}
.bathbomb .content p:not(:last-of-type) { margin-bottom: 1rem;}
.bathbomb .content p strong {font-size: var(--fs-base, 16px); text-transform: capitalize; color: var(--c-text);}
.bathbomb .btn__primary {position: relative; text-wrap: wrap; padding: 0.625rem 1.75rem; border-radius: 3px;}
.bathbomb .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;}

/* Bottom-description */
.bottom-description {padding-block: 2rem;}
.bottom-description .content {max-width: 55.125rem;}
.bottom-description .content :where(h2, h3, h4, h5, h6) {font-weight: 500; color: #000000; text-transform: capitalize; margin-bottom: 1.25rem;}
.bottom-description .content h2 {font-size: var(--fs-lg, 32px)}
.bottom-description .content h3 {font-size: calc(var(--fs-md, 24px) + 4px);}
.bottom-description .content h4 {font-size: var(--fs-sm, 24px)}
.bottom-description .content h5 {font-size: var(--fs-sm, 20px);}
.bottom-description .content h6 {font-size: var(--fs-base, 16px);}
.bottom-description .content :where(ul, ol) {padding-left: 2.5rem; margin-bottom: 1rem;}
.bottom-description .content :where(ul, ol) li {font-size: var(--fs-base, 16px); line-height: 1.5;}
.bottom-description .content ul li {list-style: disc;}
.bottom-description .content ol li {list-style: auto;}
.bottom-description .content li:not(:last-child) {margin-bottom: 0.25rem;}
.bottom-description .content p {font-size: var(--fs-base, 16x); padding-left: 0.75rem;}
.bottom-description .content p a {display: inline; font-size: var(--fs-base, 16px); color: var(--c-primary);}
.bottom-description .content p:not(:last-of-type) { margin-bottom: 1rem;}
.bottom-description .content p strong {font-size: var(--fs-base, 16px); text-transform: capitalize; color: var(--c-text);}
.bottom-description .btn__primary {position: relative; text-wrap: wrap; padding: 0.625rem 1.75rem; border-radius: 3px;}
.bottom-description .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;}

/* Start */
.start {padding-block: 2rem;}
.start .head {margin-bottom: 2rem;}
.start .head > :first-child {font-size: var(--fs-lg, 32px); text-transform: capitalize;}
.start ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding-inline: 1rem;}
.start li > :first-child {display: block; font-size: var(--fs-md, 24px); text-transform: capitalize; color: #000; margin-bottom: 1rem;}
.start li p {max-height: 10.5rem;}


@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);}
    /* Bathbomb */
    .bathbomb {padding-block: 1.25rem;}
    .bathbomb .head {margin-bottom: 1.75rem;}
    .bathbomb .head > :first-child {margin-bottom: 0.75rem;}
	.bathbomb .content {margin-bottom: 2rem;}
    .bathbomb .wrapper {gap: 1.25rem; margin-bottom: 1.75rem;}
    /* bottom-description */
    .bottom-description {padding-block: 1.25rem;}
    /* Start */
    .start {padding-block: 1.25rem;}
    .start .head  {margin-bottom: 1.25rem;}
    .start ul {grid-template-columns: repeat(2, 1fr); gap: 1.25rem;}
}
@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) {
    /* 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;}
    .popular .card {gap: 0.75rem;}
    .popular .card > :first-child {padding-bottom: 0.75rem;}
    .popular .card .btn__primary {padding: 0.375rem 0.5rem;}
    /* Bathbomb */
    .bathbomb {padding-block: 0.75rem;}
    .bathbomb .head {margin-bottom: 0.75rem;}
    .bathbomb .head > :first-child {margin-bottom: 0.5rem;}
    .bathbomb .head > :first-child * {margin-bottom: 0.25rem;}
    .bathbomb .wrapper  {gap: 0.5rem; margin-bottom: 0.75rem;}
    .bathbomb .content {margin-bottom: 0.75rem;}
    .bathbomb .content :is(h2, h3, h4, h5, h6) {margin-bottom: 0.5rem;}
    .bathbomb .content :where(ul, ol) {padding-left: 1.125rem; margin-bottom: 0.625rem;}
    .bathbomb .content p {padding-left: 0;}
    .bathbomb .content p:not(:last-of-type) {margin-bottom: 0.5rem;}
    .bathbomb .btn__primary {padding: 0.375rem 0.625rem;}
    .bathbomb .btn__primary::before {right: 3px; width: 0.25rem;}
    /* Bottom-description */
	.bottom-description {padding-block: 0.75rem;}
    .bottom-description .content :is(h2, h3, h4, h5, h6) {margin-bottom: 0.5rem;}
    .bottom-description .content :where(ul, ol) {padding-left: 1.125rem; margin-bottom: 0.625rem;}
    .bottom-description .content p {padding-left: 0;}
    .bottom-description .content p:not(:last-of-type) {margin-bottom: 0.5rem;}
    .bottom-description .btn__primary {padding: 0.375rem 0.625rem;}
    .bottom-description .btn__primary::before {right: 3px; width: 0.25rem;}
    /* Start */
    .start {padding-block: 0.75rem;}
    .start .head {margin-bottom: 0.75rem;}
    .start ul {grid-template-columns: 1fr; gap: 0.75rem; padding-inline: 0;}
    .start li > :first-child {margin-bottom: 0.625rem;}
}
@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;}
}