@import './property.css';
@import './global.css';

/*==================== Hero ============================*/

.hero {
    position: relative;
    animation: fadeIn 1s;
}

.hero a {
    display: grid;
}

.hero a img,
.hero a video {
    height: 35rem;
    width: 100%;
    object-fit: cover;
}

/* .hero .swiper-slide img {
    height: 35rem;
    width: 100%;
    object-fit: cover;
}

.hero__block {
    position: absolute;
    inset: 0;
    background-color: rgb(0, 0, 0, .5);
    display: grid;
    align-items: center;
}

.hero h1 {
    font-family: var(--ff-2);
    font-size: var(--fs-3);
    font-weight: 400;
    line-height: 1.3;
    color: var(--white);
    text-transform: capitalize;
    margin-bottom: 1rem;
    max-width: 35rem;
} */

.hero .swiper-slide-active h1 {
    animation: fadeInUp 1s;
}

.hero .swiper-slide-active .btn {
    animation: fadeInRight 1s;
}

.hero .swiper-footer {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 999;
}

.sub-hero {
    animation: fadeIn 1s;
    position: relative;
}

.sub-hero>img {
    height: 20rem;
    width: 100%;
    object-fit: cover;
}

.sub-hero>video {
    height: 20rem;
    width: 100%;
    object-fit: cover;
    display: block;
}

.sub-hero__block {
    position: absolute;
    inset: 0;
    background-color: rgb(0, 0, 0, .5);
    display: grid;
    align-items: center;
}

.sub-hero__block h1 {
    font-family: var(--ff-2);
    font-size: var(--fs-3);
    font-weight: 400;
    text-align: center;
    animation: fadeInUp 1s;
    color: var(--white);
    text-transform: capitalize;
}

/*==================== Others ============================*/

.border {
    border: 1px solid greenyellow;
}

.text-center {
    text-align: center;
}

:is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    font-weight: 600;
}

p,
li {
    margin-block: .75rem;
}

p,
ul,
ol,
article {
    color: rgb(48, 48, 48);
    line-height: 1.5;
}

.swiper-footer {
    padding-block: .75rem;
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.swiper-footer>span {
    display: grid;
    place-content: center;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--white);
    line-height: 1;
    font-size: 1.25rem;
    color: var(--primary);
    cursor: pointer;
    outline: none;
}

.swiper-footer .swiper-pagination-bullet {
    height: .5rem;
    width: .5rem;
    border-radius: 1rem;
    background-color: var(--white);
    transition: .5s;
}

.swiper-footer.primary .swiper-pagination-bullet {
    background-color: var(--primary);
}

.swiper-footer.primary .swiper-pagination-bullet {
    background-color: var(--primary);
}

.swiper-footer .swiper-pagination-bullet-active {
    width: 2rem;
}

.btn {
    outline: none;
    color: var(--white);
    background-color: var(--primary);
    display: inline-grid;
    padding: .5rem 1.5rem;
    text-transform: capitalize;
    transition: .5s;
    box-shadow: var(--sd-1);
    font-weight: 500;
    cursor: pointer;
    border-radius: .25rem;
}

.btn:has(i) {
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.btn:hover {
    opacity: .75;
}

.title {
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1rem;
}

.title span {
    display: block;
    font-size: var(--fs-2);
    font-weight: 400;
    text-transform: uppercase;
}

.title::after {
    content: '';
    display: block;
    height: .25rem;
    width: 6rem;
    background-color: var(--accent);
    margin-inline: auto;
    margin-top: .5rem;
}

.title.start,
.title.start::after {
    text-align: start;
    margin-inline: unset;
}

.second-sec {
    padding-block: var(--s-2);
    background: var(--gd-2), url('../images/Bring_you_best.webp');
    background-size: cover;
    background-position: bottom;
    min-height: 30rem;
}

.second-sec h1 {
    font-size: var(--fs-3);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--primary);
}

.products-card {
    overflow: hidden;
    box-shadow: var(--sd-2);
    transition: .5s !important;
    text-transform: uppercase;
    border-radius: .5rem;
}

.products-card:hover {
    translate: 0 -.5rem;
}

.products-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    position: relative;
}

.products-card__img img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.products-card__img label {
    position: absolute;
    inset: .5rem .5rem auto auto;
    background-color: var(--white);
    color: var(--accent);
    font-size: 1.25rem;
    height: 2.5rem;
    width: 2.5rem;
    display: grid;
    place-content: center;
    border-radius: .25rem;
    z-index: 1;
}

.products-card__img input {
    display: none;
}

.products-card__img label::after {
    content: '\F417';
    font-family: var(--ff-bi);
}

.products-card__img input:checked+label::after {
    content: '\F415';
}

.products-card__box {
    padding: calc(.25rem + 1vw);
    text-align: center;
    background-color: var(--white);
}

.products-card h3 {
    color: var(--accent);
    margin-bottom: .5rem;
    font-size: var(--fs-1);
}

.products-card__price {
    display: grid;
    gap: .5rem;
    padding-bottom: .5rem;
    font-weight: 500;
}

.products-card__action {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.products-card__link {
    display: inline-block;
    padding: .5rem;
    border: 1px solid var(--primary);
    outline: none;
    color: var(--white);
    background-color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    transition: .5s;
    font-size: .85rem;
    text-transform: inherit;
    border-radius: .25rem;
}

.products-card__link:hover:not(select.products-card__link) {
    opacity: .75;
}

select.products-card__link {
    color: var(--primary);
    background-color: var(--white);
}

@media (max-width: 767px) {}

.home-products-sec {
    padding-block: var(--s-2);
    background: var(--gd-1), url('../images/Product-Categories_background.webp');
    background-size: cover;
}

.home-specification-sec {
    padding-block: var(--s-2);
    background: url('../images/Specifications_bg.webp');
    background-size: cover;
}

.home-specification-sec .title {
    color: var(--white);
}

.spec-round {
    display: grid;
    justify-items: center;
    gap: .5rem;
    color: var(--white);
    text-align: center;
    font-size: var(--fs-2);
    text-transform: capitalize;
    margin: .5rem;
    transition: .5s;
}

.spec-round:hover {
    translate: 0 -.5rem;
}

.spec-round span {
    display: grid;
    place-content: center;
    height: calc(3vw + 5rem);
    width: calc(3vw + 5rem);
    border: .25rem solid var(--white);
    border-radius: 50%;
    background-color: var(--accent);
}

.spec-round span img {
    max-height: 3rem;
}

.box-1 {
    padding: 1.5rem;
    font-weight: 500;
    font-size: var(--fs-2);
    text-transform: capitalize;
    text-align: center;
}

.testimonials-block {
    text-align: center;
}

.testimonials-block h2 {
    color: var(--primary);
    font-weight: 500;
    text-transform: uppercase;
    font-size: var(--fs-2);
}

.cat {
    white-space: nowrap;
    overflow: auto;
    text-align: center;
}

.cat-box {
    display: inline-grid;
    gap: .15rem;
    margin: .25rem;
    transition: .5s;
}

.cat-box:hover {
    translate: .25rem 0;
}

.cat-box img {
    max-height: 6rem;
}

.cat-box span {
    color: var(--primary);
    text-transform: capitalize;
    text-align: center;
    font-style: italic;
    font-weight: 600;
}

.eqp-box {
    border: 1px solid var(--primary);
    position: relative;
    aspect-ratio: 1.5;
    display: block;
    box-shadow: var(--sd-2);
    transition: .5s;
    overflow: hidden;
}

.eqp-box:hover {
    translate: .5rem 0;
}

.eqp-box img {
    margin: auto;
}

.eqp-box__block {
    background-color: rgb(184, 84, 60, .75);
    backdrop-filter: blur(.5rem);
    position: absolute;
    inset: 0;
    padding: 1rem;
    display: grid;
    align-items: center;
    text-align: center;
    font-size: var(--fs-2);
    color: var(--white);
    scale: 1 0;
    opacity: 0;
    transition: .35s;
    text-transform: capitalize;
}

.eqp-box:hover .eqp-box__block {
    scale: 1;
    opacity: 1;
}

.bc-nav {
    padding-block: .5rem;
    animation: fadeInLeft 1s;
}

.bc-nav .container {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.bc-nav__link {
    text-transform: capitalize;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bc-nav__link:last-child {
    color: var(--primary);
}

/* contact */

.contact h3 {
    font-weight: 500;
    margin-top: 1rem;
    border-bottom: 1px solid var(--primary);
    max-width: 15rem;
    color: var(--primary);
    display: flex;
    gap: .5rem;
}

.contact a {
    display: block;
    padding-block: .5rem;
    transition: .5s;
}

.contact a:hover {
    opacity: .8;
}

.contact error {
    display: block;
    color: var(--red);
    margin-top: .35rem;
}

.contact success {
    display: block;
    text-align: center;
    color: #026002;
    text-transform: capitalize;
}

.contact__map {
    border: none;
    width: 100%;
    height: 25rem;
    display: block;
}

/* products page */

.products-filter-btn {
    border: 1px solid var(--primary);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--primary);
    padding: .5rem 1rem;
    cursor: pointer;
}

.products-filter {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(100%, 25rem);
    background-color: var(--white);
    z-index: 999;
    padding: 1rem;
    box-shadow: var(--sd-2);
    overflow: auto;
    scale: 0 1;
    opacity: 0;
    transform-origin: top left;
    transition: .5s;
}

.products-filter.exp {
    scale: 1;
    opacity: 1;
}

.products-filter close {
    display: flex;
    align-items: center;
    justify-content: end;
    font-size: 1.4rem;
}

.products-filter h2 {
    text-transform: uppercase;
    color: var(--primary);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .5rem;
    padding-block: .5rem;
}

.products-filter h2::after {
    content: '';
    height: 1px;
    background-color: var(--primary);
}

.products-filter .accordion-item {
    background-color: transparent;
}

.products-filter button {
    width: 100%;
}

/* Products Details */

.grid {
    /* display: flex;
    grid-template-columns: 1fr 1fr; */
}

.products-details {
    padding: .5rem;
    display: grid;
    gap: .75rem;
    position: relative;
}

.products-details .title-text {
    font-weight: 700;
    color: var(--primary);
}

.products-details__star {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-transform: capitalize;
    font-weight: 500;
    font-size: .85rem;
    padding-top: .5rem;
}

.products-details__price {
    color: var(--primary);
    font-size: var(--fs-5);
    padding-block: .5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.products-details__price s {
    color: var(--gray);
}

.products-details__price span {
    color: var(--white);
    background-color: var(--primary);
    padding: .25rem .5rem;
    border-radius: .25rem;
    font-size: var(--fs-1);
    text-transform: uppercase;
    font-weight: 400;
}

.products-details .tap-box {
    box-shadow: var(--sd-2);
    display: grid;
    gap: .5rem;
    font-size: .75rem;
    text-align: center;
    text-transform: capitalize;
    font-weight: 500;
    padding: .75rem;
    color: var(--accent);
    cursor: pointer;
}

.radio-input:checked+.tap-box {
    background-color: var(--secondary);
}

.products-details .radio-input {
    display: none;
}

.products-details .icon-wrapper {
    white-space: nowrap;
    padding-block: .75rem;
    overflow: auto;
}

.products-details .icon-box {
    display: inline-block;
}

.products-details .icon-box img {
    max-height: 8rem;
}

.products-details .offer {
    max-width: 30rem;
    background: linear-gradient(to right, var(--accent), rgb(138, 33, 6, .5));
    padding: 1rem var(--s-1);
    border-radius: .75rem;
    position: relative;
    margin-bottom: 1rem;
}

.products-details .offer::after,
.products-details .offer::before {
    content: '';
    height: 1.5rem;
    width: 1.5rem;
    background-color: var(--white);
    position: absolute;
    border-radius: 50%;
}

.products-details .offer::after {
    inset: auto 0 50% auto;
    translate: 50% 50%;
}

.products-details .offer::before {
    inset: auto auto 50% 0;
    translate: -50% 50%;
}

.products-details .offer article {
    color: var(--white);
}

.products-details .offer article:nth-of-type(odd) {
    text-transform: uppercase;
    color: var(--smoke);
    font-size: var(--fs-1);
}

.products-details__sticky {
    position: sticky;
    inset: auto 0 0 0;
    background-color: var(--white);
    padding-block: .75rem;
}

.products-details__btn {
    padding: .75rem;
    font-size: 1rem;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: .5rem;
    border: 1px solid var(--accent);
    text-transform: uppercase;
    color: var(--white);
    cursor: pointer;
    transition: .5s;
    background-color: var(--accent);
    font-weight: 500;
    border-radius: .25rem;
}

.products-details__btn:hover {
    opacity: .75;
}

.products-details__btn.green {
    border: 1px solid var(--primary);
    background-color: var(--white);
    color: var(--primary);
}

@media (max-width: 767px) {
    .products-details__btn:has(span) {
        gap: 0;
    }

    .products-details__btn span {
        display: none;
    }

    .products-details__sticky {
        padding: .5rem;
        position: fixed;
        inset: auto 0 0 0;
        z-index: 999;
    }
}


.products-details__quantity {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem;
    border: 1px solid var(--primary);
    color: var(--primary);
    cursor: pointer;
    font-weight: 600;
    border-radius: .25rem;
    font-size: 1rem;
}

.products-details__quantity input {
    border: none;
    background: none;
    outline: none;
    text-align: center;
    font-size: inherit;
    color: inherit;
    padding: unset;
    -moz-appearance: textfield;
}

.products-details__quantity input::-webkit-outer-spin-button,
.products-details__quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.products-video {
    display: none;
    position: fixed;
    inset: auto auto 1rem 1rem;
    z-index: 999;
    border-radius: .75rem;
    overflow: auto;
    box-shadow: var(--sd-1);
    scale: 0;
    transition: .5s;
}

.products-video[open] {
    scale: 1;
}

.products-video a {
    position: relative;
}

.products-video video {
    height: 10rem;
    width: 5rem;
    object-fit: cover;
    display: block;
}

.products-video .close {
    position: absolute;
    inset: .5rem .5rem auto auto;
    color: var(--white);
    font-size: 1rem;
}

.products-video .play {
    position: absolute;
    inset: 50% 50% auto auto;
    color: var(--white);
    font-size: 2rem;
    translate: 50% -50%;
}

@media (max-width: 767px) {
    .products-video {
        display: grid;
    }
}

/* Video Card */

.video-card {
    display: block;
    position: relative;
    padding-bottom: 2rem;
}

.video-card video {
    display: grid;
    width: 100%;
    aspect-ratio: .75;
    object-fit: cover;
    transition: .5s;
    border-radius: .75rem;
}

.video-card:hover>a>video {
    scale: 1.1;
}

.video-card__box {
    padding: .5rem;
    display: grid;
    grid-template-columns: .5fr 1fr;
    align-items: center;
    gap: .5rem;
    position: absolute;
    inset: auto .5rem 0 .5rem;
    background-color: var(--white);
    box-shadow: var(--sd-2);
    transition: .5s;
    border-radius: .5rem;
}

.video-card:hover .video-card__box {
    translate: 0 -.5rem;
}

.video-card__box img {
    border-radius: .25rem;
}

.video-card__box span {
    display: grid;
    gap: .25rem;
}

.video-card__box span b {
    color: var(--primary);
    width: 100%;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-card__box span a:has(b) {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .5rem;
    color: var(--primary);
}

.video-card__box span a:has(b) i {
    height: 2rem;
    width: 2rem;
    background-color: rgb(0, 0, 0, .1);
    display: grid;
    place-content: center;
    border-radius: .5rem;
}

.video-card__box span b:nth-of-type(2) {
    color: var(--black);
}

.video-card__action {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem;
}

.video-card__action .btn {
    text-transform: uppercase;
    font-size: .75rem;
    padding-inline: .75rem;
    text-align: center;
}

.video-card__action .btn {
    gap: 0;
}

/* ----------------------------------------- */

#video-wrapper-display {
    display: none;
    width: 100vw;
    background-color: transparent;
}

#video-wrapper-display :is(.swiper-button-next, .swiper-button-prev) {
    color: var(--white);
}

.video-wrapper {
    scale: .75;
    transition: .5s;
}

.swiper-slide-active .video-wrapper {
    scale: 1;
}

.video-wrapper__box {
    padding: .5rem;
    background-color: var(--white);
    border-radius: 0 .5rem .5rem 0;
}

.video-wrapper__box img {
    max-height: 100%;
    max-width: 100%;
    display: block;
    border-radius: .5rem;
}

.video-wrapper__box h3 {
    color: var(--primary);
    text-transform: uppercase;
    margin-top: .5rem;
}

.video-wrapper .col-md-6:has(.video-wrapper__box) {
    display: none;
}

.swiper-slide-active .video-wrapper .col-md-6:has(.video-wrapper__box) {
    display: block;
    animation: fadeIn 1s;
}

/* Blog */

.blog-card {
    display: block;
    transition: .5s;
    margin: .5rem;
}

.blog-card:hover {
    translate: 0 -.5rem;
}

.blog-card>img {
    height: 15rem;
    width: 100%;
    object-fit: cover;
    margin-bottom: .5rem;
    box-shadow: var(--sd-2);
}

.blog-card h2 {
    text-transform: capitalize;
}

.blog-card p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-card>span {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--primary);
    text-transform: capitalize;
    font-style: italic;
    white-space: nowrap;
}

.blog-card>span::after {
    content: '';
    height: 1px;
    width: 100%;
    background-color: var(--primary);
}

.services-wrapper {
    padding-block: var(--s-2);
}

.services-wrapper h1 {
    color: var(--primary);
    border-bottom: 1px solid var(--smoke);
    padding-block: .25rem;
    margin: 1.5rem 0 .5rem 0;
    text-transform: uppercase;
}

.services-wrapper h3 {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-weight: 500;
    text-transform: capitalize;
}

.services-wrapper h3::before {
    content: '';
    height: .75rem;
    width: .75rem;
    background-color: var(--primary);
    border-radius: 50%;
}

.services-contact {
    padding-block: var(--s-2);
    background-color: var(--primary);
}

.services-contact :is(h1, p) {
    color: var(--white);
    text-align: center;
}

.services-contact a {
    background-color: var(--white);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: .5rem;
    color: var(--accent);
    font-size: 2rem;
    border-radius: 4rem;
    transition: .5s;
    box-shadow: var(--sd-2);
    cursor: pointer;
}

.services-contact a:hover {
    background-color: var(--accent);
    color: var(--white);
}

.services-contact a i {
    color: var(--primary);
    height: 3.25rem;
    width: 3.25rem;
    border-radius: 50%;
    font-size: 1.5rem;
    border: 1px solid var(--primary);
    display: grid;
    place-content: center;
}

/* products inner */

.img-slider {
    position: relative;
}

.img-slider label {
    position: absolute;
    inset: 1rem 1rem auto auto;
    background-color: var(--white);
    color: var(--accent);
    font-size: 1.25rem;
    height: 2.5rem;
    width: 2.5rem;
    display: grid;
    place-content: center;
    border-radius: .25rem;
    z-index: 1;
}

.img-slider input {
    display: none;
}

.img-slider label::after {
    content: '\F417';
    font-family: var(--ff-bi);
}

.img-slider input:checked+label::after {
    content: '\F415';
}

.img-thumb {
    /* border: 1px solid black; */
}

.img-thumb .swiper-slide {
    height: auto !important;
}

.img-slider img,
.img-thumb img {
    border-radius: .25rem;
}

/* accordion */

.accordion {
    overflow: hidden;
}

.accordion-item {
    border-bottom: 1px solid rgb(184, 84, 60, .5);
}

.accordion-header {}

.accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    transition: .5s;
    padding: 1rem;
    color: var(--primary);
}

.accordion-button::after {
    content: '\F282';
    font-family: var(--ff-bi);
    color: var(--primary);
    transition: .5s;
}

.accordion-button.active {
    background: var(--primary);
    color: var(--white);
}

.form .accordion-button.active {
    background: transparent;
    color: var(--primary);
}

.accordion-button.active::after {
    color: var(--white);
    rotate: 180deg;
}

.form .accordion-button.active::after {
    color: var(--primary);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-body {
    padding: 1rem;
}

.accordion-body li::marker {
    color: var(--primary);
}

/* Authentication */

.auth-container {
    width: min(100%, 35rem);
    display: none;
}

.auth-container__block {
    padding: 1rem;
}

.auth-container__block form {
    display: grid;
    gap: 1rem;
}

.auth-container__block a {
    display: block;
    padding-top: 1rem;
}

.auth-container__block a:hover {
    text-decoration: underline !important;
}

/* Tabs */

.tab-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 1rem;
    overflow: hidden;
    width: min(100%, 20rem);
    margin-inline: auto;
    border-radius: 4rem;
    background-color: var(--secondary);
}

.tab-button {
    padding: .75rem;
    cursor: pointer;
    font-family: var(--ff-1) !important;
    transition: .5s;
    text-align: center;
    border-radius: 4rem;
}

.tab-button.active {
    background-color: var(--primary);
    color: var(--white);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Quick Form */

.quick-form-toggle {
    position: fixed;
    inset: calc(50% - 1.5rem) 0 auto auto;
    height: 3rem;
    width: 2.5rem;
    font-size: 1.25rem;
    display: grid;
    place-content: center;
    background-color: var(--primary);
    color: var(--white);
    border-radius: 1rem 0 0 1rem;
    cursor: pointer;
    transition: .5s;
    z-index: 99;
}

.quick-form-toggle:hover {
    opacity: .75;
}

.quick-form {
    width: min(100%, 35rem);
    display: none;
    padding: 1rem;
}

.quick-form error {
    display: block;
    color: var(--red);
    margin-top: .35rem;
}

.quick-form success {
    display: block;
    text-align: center;
    color: #026002;
    text-transform: capitalize;
}

/* Reviews */

.reviews {
    border: 1px solid var(--primary);
    padding: var(--s-1);
}

.reviews-total {
    padding: var(--s-1);
    background-color: var(--secondary);
}

.reviews-total__pop {
    display: none;
    width: min(100%, 35rem);
    text-align: center;
}

#reviews-rating-textarea {
    display: none;
}

.reviews-box {
    padding-block: 1rem;
    border-bottom: 1px solid var(--smoke);
}

.reviews-box:first-of-type {
    border-block: 1px solid var(--smoke);
}

.reviews-box h3 {
    display: flex;
    gap: .5rem;
    font-weight: 500;
    font-size: 1rem;
}

.reviews-box article {
    font-size: .85rem;
}

/* Form section */

::placeholder {
    color: var(--gray);
}

input,
textarea,
select {
    display: block;
    padding: .75rem;
    width: 100%;
    font-size: inherit;
    font-family: inherit;
    border: 1px solid var(--primary);
    outline: none;
    border-radius: .25rem;
}

button {
    outline: none;
    border: 1px solid var(--primary);
    padding: .75rem;
    background-color: var(--primary);
    color: var(--white);
    transition: .5s;
    font-size: inherit;
    font-family: inherit;
    border-radius: .25rem;
}

button:hover {
    opacity: .75;
}

.address-picker {
    border: 1px solid var(--primary);
    border-radius: .25rem;
    overflow: hidden;
}

.address-picker label {
    display: grid;
    gap: .5rem;
    font-size: .75rem;
    text-transform: capitalize;
    padding: .75rem;
    cursor: pointer;
    color: var(--gray);
    font-size: inherit;
}

.address-picker input {
    display: none;
}

.address-picker input:checked+label {
    background-color: var(--secondary);
}

/* Training Card */

.training-card {
    display: block;
    color: inherit;
    box-shadow: var(--sd-2);
    transition: .5s
}

.training-card:hover {
    translate: 0 -.5rem;
}

.training-card>img {
    aspect-ratio: 1.5;
    width: 100%;
    object-fit: cover;
}

.training-card__box {
    padding: 1rem;
}

.training-card__box h2 {
    color: var(--primary);
    text-transform: capitalize;
}

.training-card__box p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-line-clamp: 3;
}

.training-card__action {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.training-card__action .btn {
    text-transform: uppercase;
}

.reg-form {
    display: none;
    width: min(100%, 50rem);
}

.reg-form__title {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    color: var(--accent);
}

.reg-form__title article {
    font-size: var(--fs-5);
    font-weight: 600;
    text-transform: uppercase;
}

.reg-form__title span {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.reg-form p {
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* switch */

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background-color: var(--secondary);
    transition: .5s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--white);
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--primary);
    color: var(--white);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--primary);
    color: var(--white);
}

input:checked+.slider:before {
    transform: translateX(26px);
}

.pd-card {
    border: 1px solid black;
    display: block;
    color: inherit;
}

.pd-card__box {
    position: relative;
}