@import url(../css/theme.css);

/* Content Grid */
.content-grid {
    --padding-inline: 1rem;
    --content-max-width: 1440px;
    --content-col-max-width: 720px;
    --breakout-max-width: 100%;

    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

    display: grid;
    grid-template-columns:
        [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width)) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid> :not(.breakout, .full-width),
.full-width> :not(.breakout, .full-width) {
    grid-column: content;
}

.content-grid>.breakout {
    grid-column: breakout;
}

.content-grid>.full-width {
    grid-column: full-width;

    display: grid;
    grid-template-columns: inherit;
}

/* End Content Grid */

/* Common Elements */
.card {
    background: var(--Card-BG, radial-gradient(52.15% 80.07% at 47.19% -0.63%, #20334A 0%, #181F26 100%), linear-gradient(155deg, rgba(25, 43, 72, 0.70) 0%, rgba(24, 41, 69, 0.70) 49.53%, rgba(23, 38, 61, 0.70) 75.72%));
    /* border: 1px solid var(--accent-color); */
}

.hero-banner {
    background-image: url(../images/home/banner-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 66vh;
    padding-top: 90px;
}

.hero-banner .content {
    padding-left: 9vw;
}

.hero-banner .content h1 {
    width: 614px;
}

.hero-banner .content p {
    width: 421px;
}

.hero-banner .content .cta svg {
    padding-left: 8px;
}

.hero-banner .content .cta .explore-cta {
    min-width: 218px;
    margin-right: 24px;
}

.hero-banner .content .cta .explore-cta svg {
    stroke: var(--white);
}

.hero-banner .content .cta .advice-cta {
    min-width: 155px;
}

.hero-banner .content .cta .advice-cta {
    color: var(--white);
    text-decoration: none;
}

.section-2 {
    /* border: 1px solid red; */
    padding: 21px 0;
}

.section-2>.wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.section-2 .section {
    /* border: 1px solid white; */
    min-height: 537px;
}

.section-2>.wrapper .content-section {
    display: grid;
    align-items: center;
}

.section-2>.wrapper .content-section .wrapper {
    max-width: 525px;
    margin-left: 6vw;
}

.section-2>.wrapper .content-section .wrapper h2 {
    margin-bottom: 24px;
}

.section-2>.wrapper .content-section .wrapper p {
    margin-bottom: 24px;
}

.section-2>.wrapper .content-section .wrapper .cta a.explore-our-shop-cta {
    width: 213px;
}

.section-2>.wrapper .content-section .wrapper .cta a.explore-our-shop-cta svg {
    padding-left: 8px;
}

.section-2>.wrapper .img-section {
    background-image: url(../images/home/explore-our-shop-section.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.best-products {
    background-image: url(../images/home/explore-products.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 747px;
    padding: 58.5px 0;
}

.best-products .controls .pagination .item {
    background: var(--clr-secondary-100);
    border-radius: 8px;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    opacity: 0.5;

    transition: all 0.3s ease-in-out;
}

.best-products .controls .pagination .item.active {
    background: var(--clr-primary-100);
    width: 32px;
    opacity: 1;
}

.best-products .controls .arrows {
    margin-left: 32px;
}

.best-products .controls .arrows .arrow:first-child {
    margin-right: 16px;
}

.best-products .controls .arrows .arrow.prev.disabled svg path {
    stroke: #FBFBFB;
    opacity: 0.5;
}

.best-products .controls .arrows .arrow.prev:not(.disabled) svg path {
    stroke: #3E7BF6;
    opacity: 1;
}

.best-products .controls .arrows .arrow.next.disabled svg path {
    stroke: #FBFBFB;
    opacity: 0.5;
}

.best-products .controls .arrows .arrow.next:not(.disabled) svg path {
    stroke: #3E7BF6;
    opacity: 1;
}

.best-products .products {
    padding: 49px 0;
    /* padding-left: 24px; */
}

.best-products .products .product {
    background-image: url(../images/home/product-overlay.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid var(--accent-color);
    padding: 16px 15px 15px;
    margin-right: 24px;
    width: 309px;
    height: 440px;
}

.best-products .products .product:first-child {
    background: none;
    border: none;
    margin-right: 100px;
    padding: 0;
    width: calc(calc(100vw - min(100vw, 1440px) - 36px) / 2);
    height: 440px;
}

.best-products .products .product img {
    margin: 0 auto 31px;
}

.best-products .products .product .product-description {
    margin-bottom: 9px;
}

.best-products .products .product .more-info-cta svg {
    margin-left: 8px;
}

.best-products .cta {
    display: flex;
    justify-content: center;
    align-items: center;
}

.best-products .cta .view-all-cta {
    width: 144px;
}

.best-products .cta .view-all-cta svg {
    margin-left: 8px;
}

.benefits {
    padding: 76px 0;
}

.benefits .wrapper {
    grid-template-columns: repeat(4, 1fr);
}

.benefits .item img {
    margin-bottom: 23px;
}

@media (max-width: 1500px) {
    .best-products .products {
        /* padding-left: 24px; */
    }

    .best-products .products .product:first-child {
        display: none;
    }
}

@media (min-width: 375px) and (max-width: 767px) {

    #home-page .section-2.our-story .img-section {
        background-image: url(../images/moble-sec.png) !important;
        grid-column: unset !important;
    }

    .hero-banner.content-grid {
        background-image: url(../images/home-resp-bg.png);
        background-position: top 70px center;
        background-size: 100% auto;

        grid-column: full-width;

        display: grid;
        grid-template-columns: inherit;
    }

    .hero-banner .content {
        padding: 20px 24px;
        margin-top: 311px;
        /* background-image: url(../images/abou.png); */
    }

    .hero-banner .content h1,
    .hero-banner .content p,
    .hero-banner .content .cta a {
        width: 100%;
        text-align: center;
    }

    .hero-banner .content .cta {
        flex-direction: column;
    }

    .hero-banner .content .cta .explore-cta {
        margin-bottom: 24px;
    }

    .hero-banner .content .cta .advice-cta {
        height: 51px;
    }

    .section-2>.wrapper {
        grid-template-columns: auto;
    }

    .section-2>.wrapper .img-section {
        height: 311px;
        min-height: 311px;
        background-image: url(../images/resp-mobile-to-shop.png);
    }

    .section-2>.wrapper .content-section .wrapper {
        margin: 40px 24px !important;
    }

    .section-2>.wrapper .content-section .wrapper h2 {
        margin-bottom: 16px;
    }

    #aboutus .section-2.explore-shop>.wrapper .img-section {
        background-image: url(../images/section-2-mb.png) !important;
    }

    #home-page .best-products {
        padding: 48px 0;
    }

    #home-page .consultation-section .content-wrapper h1 {
        font-size: 28px !important;
    }

    #home-page .best-products .product-title,
    #home-page .best-products .product-price {
        font-size: 21px;
    }

    .section-2>.wrapper .content-section .wrapper h2,
    .section-2>.wrapper .content-section .wrapper p {
        text-align: center;
    }

    .section-2>.wrapper .content-section .wrapper .cta a.explore-our-shop-cta {
        width: 100%;
    }

    .best-products .title-section h2 {
        text-align: center;
    }

    .best-products .title-section .controls {
        display: none !important;
    }

    .best-products .controls {
        margin-bottom: 24px;
    }

    .best-products .products {
        padding: 24px 0 24px 24px;
    }

    .best-products .products .product {
        width: calc(100vw - 48px);
    }

    .benefits {
        padding: 40px 24px;
    }

    .benefits .wrapper {
        grid-template-columns: auto;
        grid-column: full-width;
    }

    .benefits .item {
        display: grid !important;
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: 135px 1fr;
        grid-template-areas:
            "benefits-img benefits-title"
            "benefits-img benefits-description";
        margin-bottom: 24px;
    }

    .benefits .item img {
        grid-area: benefits-img;
        object-fit: contain;
        width: 112px;
        height: 105px;
        margin-bottom: 0;
        padding-right: 16px;
    }

    .benefits .item h4 {
        grid-area: benefits-title;
        display: flex;
        align-items: flex-end;
        height: 56px;
    }

    .benefits .item .description {
        grid-area: benefits-description;
        display: flex;
        align-items: flex-start;
        height: 56px;
    }

    #consultation-advice .advice-form.content-grid,
    #product-page .product-info.content-grid {
        --breakout-size: none
    }

    #product-listing.listing-page.main-wrapper {
        background-image: url(../images/Register-bg.png);
        padding: 105px 0 40px;
    }

    #product-listing.listing-page .main-listing-section {
        background-image: url(../images/shop.png);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: top -58px center;
    }
}

/* End Common Elements */

/* Home Page Section */
#home-page {
    min-height: 30vh;
}

#home-page .section-2.our-story>.wrapper .img-section {
    background-image: url(../images/home/our-story-section.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    grid-row: 1;
    grid-column: 2;
}

#home-page .section-2.our-story>.wrapper .content-section {
    justify-content: flex-end;
}

#home-page .section-2.our-story>.wrapper .content-section .wrapper {
    margin-left: 0;
    margin-right: 6vw;
}

#home-page .consultation-section {
    background-image: url(../images/home/consultation-section-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 813px;
}

#home-page .consultation-section>div {
    height: 100%;
    justify-content: center;
    align-items: center;
}

#home-page .consultation-section .content {
    background: radial-gradient(#8B898919, #00000033);
    backdrop-filter: blur(15px);
    border: 1px solid var(--black-bg);
    width: 1258px;
    height: 691px;
    padding: 79px 76px;
    grid-template-columns: repeat(2, 1fr);
    gap: 99px;
}

#home-page .consultation-section .content .content-wrapper h1 {
    margin-bottom: 16px;
}

#home-page .consultation-section .content .content-wrapper p {
    margin-bottom: 24px;
}

#home-page .consultation-section .content .content-wrapper .cta {
    margin-top: 8px;
}

#home-page .consultation-section .content .content-wrapper .cta a {
    width: 187px;
}

#home-page .consultation-section .content .content-wrapper .cta a svg {
    margin-left: 8px;
}

#home-page .consultation-section .content img {
    object-fit: cover;
    height: 100%;
}

/* Mobile Responsive */
@media (min-width: 375px) and (max-width: 767px) {
    #home-page .consultation-section {
        height: auto;
    }

    #home-page .consultation-section .content {
        background: none;
        backdrop-filter: none;
        border: none;
        height: auto;
        padding: 0;
        grid-template-columns: auto;
        gap: 0;
    }

    #home-page .consultation-section .content .content-wrapper {
        padding: 40px 24px;
    }

    #home-page .consultation-section .content .content-wrapper h1,
    #home-page .consultation-section .content .content-wrapper p {
        text-align: center;
    }

    #home-page .consultation-section .content .content-wrapper .cta a {
        width: 100%;
    }

    #home-page .consultation-section .content img {
        grid-row: 1;
        width: 100%;
    }
}

/* End Home Page Section */

/* Consultation Advice */
#consultation-advice .hero-banner {
    background-image: url(../images/consultation/banner-bg.png);
}

#consultation-advice .section-2.advice-service>.wrapper .img-section {
    background-image: url(../images/consultation/advice-service.png);
}

#consultation-advice .advice-form {
    min-height: 670px;
}

#consultation-advice .advice-form .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}

#consultation-advice .advice-form .content .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#consultation-advice .advice-form .content .content-wrapper h1 {
    margin-bottom: 24px;
}

#consultation-advice .form-input {
    width: 100%;
}

#consultation-advice .form-wrapper .request-form {
    border: 1px solid var(--Fields, #343F4D);
    background: var(--Card-BG, radial-gradient(52.15% 80.07% at 47.19% -0.63%, #20334A 0%, #181F26 100%), linear-gradient(155deg, rgba(25, 43, 72, 0.70) 0%, rgba(24, 41, 69, 0.70) 49.53%, rgba(23, 38, 61, 0.70) 75.72%));
    padding: 39px;
}

#consultation-advice .form-wrapper .request-form .form-input textarea {
    min-height: 125px;
}

@media (min-width: 375px) and (max-width: 767px) {
    #consultation-advice .hero-banner {
        background-image: url(../images/advice-mb-bg.png);
    }

    #consultation-advice .advice-form .content {
        grid-template-columns: auto;
    }

    #consultation-advice .request-form .text-input {
        flex-direction: column;
    }

    #consultation-advice input[type="checkbox"] {
        -webkit-appearance: unset;
        height: 17px;
        width: 30px;
        border: 1px solid #656565;
        position: relative;
    }

    #consultation-advice input[type="checkbox"]:checked:before {
        content: '✓';
        color: var(--clr-primary-100);
        background-color: var(--accent-color);
        height: 15px;
        width: 16px;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #consultation-advice .advice-form .content .content-wrapper h1 {
        text-align: center;
    }

    #consultation-advice .section-2 {
        padding-top: 0;
        padding-bottom: 0;
    }

    #consultation-advice .content p {
        margin-bottom: 0;
    }

    .section-2>.wrapper .content-section .wrapper p {
        margin-bottom: 32px;
        color: var(--gray-400) !important;
    }

    #consultation-advice .advice-form .content .content-wrapper {
        padding-bottom: 40px;
        padding: 0 24px 40px;
        text-align: center;
    }
}


/* End Consultation Advice */

/* About Us Page */
#aboutus .hero-banner {
    background-image: url(../images/aboutus/banner-bg.png);
}

#aboutus .hero-banner .content {
    padding-left: 3vw;
}

#aboutus .hero-banner .content h1 {
    width: 560px;
}

#aboutus .hero-banner .content p {
    width: 533px;
}

#aboutus .section-2.explore-shop>.wrapper .img-section {
    background-image: url(../images/aboutus/section-2.png);
}

#aboutus .benefits .item {
    margin-bottom: 80px;
}

@media (min-width: 375px) and (max-width: 767px) {
    #aboutus .hero-banner {
        background-image: url(../images/about-img.png);
    }

    #aboutus .hero-banner .content h1,
    #aboutus .hero-banner .content p {
        width: 100%;
    }

    #aboutus .advice-form .content {
        grid-template-columns: auto;
    }

}

/* End About Us Page */

/* Login Page */

#register .login-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 64px;
    max-width: 1108px;
    margin: 0 auto;
}

#register.login-form {
    background-image: url(../images/Register-bg.png);
    background-repeat: no-repeat;
    background-size: 100% 119%;
}

#register .login-section {
    background-image: url(../images/Form-login.png);
    background-repeat: no-repeat;
    padding: 39px;
    /* width: 27vw; */
    background-size: 100% 100%;
}

#register .login-row .left-sec,
#register .login-row .right-sec {
    width: 100%;
}

#register #exampleModal1 .modal-body {
    padding: 0 50px 43px;
}

#register .register-section {
    background-image: url(../images/Form-register.png);
    background-repeat: no-repeat;
    padding: 39px;
    /* width: 27vw; */
    background-size: 100% 100%;
}

#register .form-title h2 {
    text-align: center;
    color: var(--white);
}

#register .forgetpassword {
    text-decoration: none;
    cursor: pointer;
}

#register.login-form.main-wrapper {
    padding: 178px 0 78px;
    min-height: 94vh;
}

#tnc.terms-conditions {
    background-image: url(../images/terms-condition-bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#tnc.terms-conditions .terms-wrapper {
    background-image: url(../images/terms-condition.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#tnc.terms-conditions .terms-wrapper {
    padding: 39px 64px;
}

/* ERROR PAGE */

#error.error-page {
    background-image: url(../images/404-bg.png);
    background-repeat: no-repeat;
    width: 100%;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    padding: 20px 0 112px;
}

#error.error-page .error-content {
    background-image: url(../images/404-frame.png);
    background-repeat: no-repeat;
    width: 32vw;
    background-size: 100% 100%;
    padding: 40px;
}


#error.error-page h1 {
    font-size: 128px !important;
    font-family: var(--heading-01-font);
    text-align: center;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 153.6px */
    text-transform: uppercase;
}

/* ERROR PAGE */



/* MODAL*/

#register .modal-content {
    border-radius: 4px;
    border: 1px solid var(--accent-color);
    background: var(--Card-BG, radial-gradient(52.15% 80.07% at 47.19% -0.63%, #20334A 0%, #181F26 100%), linear-gradient(155deg, rgba(25, 43, 72, 0.70) 0%, rgba(24, 41, 69, 0.70) 49.53%, rgba(23, 38, 61, 0.70) 75.72%));
}


.modal-header .btn-close {
    background-image: url(../images/modal-cross.svg);
    height: 24px;
    width: 24px;
}


#register .modal-header,
#register .modal-footer {
    border: unset;
}


#register .modal-header {
    border: unset;
    flex-direction: column-reverse;
    padding-bottom: 0;
}

#register .modal-body {
    padding: 0 130px 43px;
}

#register .modal-dialog {
    display: flex;
    align-items: center;
    height: 100%;
    max-width: 100%;
    width: 36%;
}

/* MODAL END */

/* RESET PASSWORD */

#reset-password.reset-wrapper {
    background-image: url(../images/Register-bg.png);
    background-repeat: no-repeat;
    min-height: 82vh;
    padding: 178px 0 78px;
}

#reset-password .resetpassword-section {
    background-image: url(../images/reset-password-frame.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 39px;
    width: 522px;
    margin: 0 auto;
}


/* RESET PASSWORD */


/* DASHBOARD */

#dashboard.main-wrapper {
    padding: 178px 0 78px;
    min-height: 80vh;
}

#dashboard .nav-sidebar {
    background-image: url(../images/dashboard-sidebar.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 20px 0 0 0;
    height: 435px;
    width: 300px;
    justify-content: space-between;

}

#dashboard .dashboard-wrapper {
    width: 22vw;
    margin-left: 140px;
}

#dashboard .dashboard-section h1 {
    margin-left: 140px !important;
}

#dashboard .logout {
    border: 1px solid var(--black-bg);
    background: var(--accent-color);
}

#dashboard .logout button {
    padding: 16px;
}

#dashboard .orders-detail {
    border: 1px solid var(--accent-color);
    background: var(--Card-BG, radial-gradient(52.15% 80.07% at 47.19% -0.63%, #20334A 0%, #181F26 100%), linear-gradient(155deg, rgba(25, 43, 72, 0.70) 0%, rgba(24, 41, 69, 0.70) 49.53%, rgba(23, 38, 61, 0.70) 75.72%));
    width: 43vw;
}

#dashboard .orders-detail .order-table thead th {
    padding: 11px 31px 10px 0;
}

#dashboard .orders-detail .order-table thead th:first-child {
    padding: 11px 31px 10px 31px;
}

#dashboard .orders-detail .order-table tbody td:first-child {
    padding-left: 31px;
}

#dashboard .orders-detail .order-table tbody td:last-child {
    padding-right: 31px;
}

#dashboard .tab-content .address-maintitle {
    margin-left: 68px;
}

.nav-pills .nav-link {
    border-left: 4px solid transparent;
    border-radius: 0;
}

#dashboard .orders-detail .order-table tbody td {
    padding: 24px 0;
    border: none;
    border-spacing: unset;
}

#dashboard .orders-detail .order-table tbody tr {
    border: none;
}

#dashboard .orders-detail .order-table tbody tr:nth-child(2n-1) {
    background-color: var(--accent-color);
}

#dashboard .nav-sidebar {
    margin-top: 95px;
}

#dashboard .tab-title {
    margin-left: 140px;
}

#dashboard table.order-table {
    width: 100%;
}

#dashboard .orders-detail {
    margin-left: 68px;
}

#dashboard .address-wrapper {
    margin-left: 68px;
}

#dashboard .billing-address,
#dashboard .shipping-address {
    border: 1px solid var(--accent-color);
    background: var(--Card-BG, radial-gradient(52.15% 80.07% at 47.19% -0.63%, #20334A 0%, #181F26 100%), linear-gradient(155deg, rgba(25, 43, 72, 0.70) 0%, rgba(24, 41, 69, 0.70) 49.53%, rgba(23, 38, 61, 0.70) 75.72%));
}

#dashboard .address-title {
    padding: 24px;
}

#dashboard .address-content {
    padding: 24px;
    border-top: 1px solid var(--accent-color);
}

#dashboard .address-content p:last-child {
    width: 14vw;
}


#dashboard .main-account .register-section {
    border: 1px solid var(--Stroke, #262F35);
    background: var(--Card-BG, radial-gradient(52.15% 80.07% at 47.19% -0.63%, #20334A 0%, #181F26 100%), linear-gradient(155deg, rgba(25, 43, 72, 0.70) 0%, rgba(24, 41, 69, 0.70) 49.53%, rgba(23, 38, 61, 0.70) 75.72%));
    padding: 39px;
    margin-left: 68px;
    width: 522px;
}

/* DASHBOARD */


/* PRODUCT LISTING */

#product-listing.main-wrapper {
    background-image: url(../images/product-listing-bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 178px 0 40px;
}

#product-listing .products-list .product-item {
    border: 1px solid var(--accent-color);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    background: var(--Card-BG, radial-gradient(52.15% 80.07% at 47.19% -0.63%, #20334A 0%, #181F26 100%), linear-gradient(155deg, rgba(25, 43, 72, 0.70) 0%, rgba(24, 41, 69, 0.70) 49.53%, rgba(23, 38, 61, 0.70) 75.72%));
    margin-bottom: 32px;
    /* filter: blur(21px);
    backdrop-filter: blur(4.875px); */
}

#product-listing .products-list .product-item .product-image {
    padding: 16px;
    display: flex;
    justify-content: center;
}

#product-listing .products-list .product-item .product-content {
    padding: 15px;
}

#product-listing .pagination .page-link {
    background-color: var(--accent-color);
    padding: 8px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: unset;
}

#product-listing .main-select {
    padding: 16px 24px;
    background: rgba(62, 123, 246, 0.20);
}

#product-listing .active>.page-link,
#product-listing.page-link.active {
    background-color: var(--clr-primary-100) !important;
}

#product-listing .card.card-body {
    border: 1px solid var(--accent-color);
    background: var(--Card-BG, radial-gradient(52.15% 80.07% at 47.19% -0.63%, #20334A 0%, #181F26 100%), linear-gradient(155deg, rgba(25, 43, 72, 0.70) 0%, rgba(24, 41, 69, 0.70) 49.53%, rgba(23, 38, 61, 0.70) 75.72%));
    padding: 39px;
}


#product-listing .filter-btn {
    border: unset;
}

#product-listing .product-category-filter {
    border-right: 1px solid var(--accent-color);
    border-left: 1px solid var(--accent-color);
    padding-left: 70px;
    padding-right: 70px;
}

#product-listing .filter-type {
    padding-right: 70px;
}

#product-listing .buttons-filter {
    padding-left: 70px;
}

#product-listing .product-category-filter .row {
    gap: 70px;
}

/* PRODUCT LISTING */

/* ORDER SUCCESSFUL */

#order-successful.order-detail.main-wrapper {
    background-image: url(../images/Payment-successful-bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 178px 0 0px;
}

#order-successful.order-detail .order-image {
    padding-right: 33px;
}

#order-successful .order-summary-detail {
    border: 1px solid var(--accent-color);
    background: var(--Card-BG, radial-gradient(52.15% 80.07% at 47.19% -0.63%, #20334A 0%, #181F26 100%), linear-gradient(155deg, rgba(25, 43, 72, 0.70) 0%, rgba(24, 41, 69, 0.70) 49.53%, rgba(23, 38, 61, 0.70) 75.72%));
    /* width: 50%; */
    /* margin: 0 auto; */
    padding: 24px 0;
    /* float: right; */
}

#order-successful .order-summary {
    display: flex;
    gap: 40px;
    justify-content: flex-end;
    padding: 25px 0 24px 0;
    /* grid-template-columns: repeat(2, 50%); */
}

#order-successful table th,
#order-successful table tr td,
#order-successful .total-section {
    padding: 24px;
}

#order-successful .order-summary-detail .borderline {
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 24px;
}

#order-successful .total-section {
    border-top: 1px solid var(--accent-color);
}

#order-successful .order-image img {
    height: 100%;
    width: 100%;
}

/* ORDER SUCCESSFUL */

/* CHECKOUT PAGE */

#checkout .checkout-details {
    border: 1px solid var(--accent-color);
    background: var(--Card-BG, radial-gradient(52.15% 80.07% at 47.19% -0.63%, #20334A 0%, #181F26 100%), linear-gradient(155deg, rgba(25, 43, 72, 0.70) 0%, rgba(24, 41, 69, 0.70) 49.53%, rgba(23, 38, 61, 0.70) 75.72%));
    padding: 39px;
}

#checkout .form-input {
    width: 100%;
}

#checkout.secure-checkout {
    background-image: url(../images/Secure-checkout-bg.png);
    background-size: cover;
}

#checkout #order-successful table th,
#checkout #order-successful table tr td,
#checkout #order-successful .total-section,
#checkout .coupon-section,
#checkout .card-payment,
#checkout .final-total {
    padding: 24px 36px;
}

#checkout .coupon-input input {
    padding: 10px 14px;
    width: 100%;
}

#checkout .total-section,
#checkout .coupon-section {
    border-bottom: 1px solid var(--accent-color);
}

#checkout .coupon-code p {
    width: 50%;
}

#checkout .left-section {
    padding-right: 120px;
}

#checkout .right-section {
    padding-left: 58px;
}

#checkout .modal-content {
    border-radius: 4px;
    border: 1px solid var(--Fields, #343F4D);
    background: var(--Card-BG, radial-gradient(52.15% 80.07% at 47.19% -0.63%, #20334A 0%, #181F26 100%), linear-gradient(155deg, rgba(25, 43, 72, 0.70) 0%, rgba(24, 41, 69, 0.70) 49.53%, rgba(23, 38, 61, 0.70) 75.72%));
}

#checkout .modal-header {
    border: unset;
}

#checkout .modal.show .modal-dialog {
    display: flex;
    align-items: center;
    height: 100%;
}

#checkout .modal-body {
    padding-top: 0;
}

#checkout .modal-body .primary-button {
    padding-bottom: 67px;
}

/* CHECKOUT PAGE */

/* Shopping-cart */

#shopping-cart.main-wrapper {
    background-image: url(../images/Secure-checkout-bg.png);
    background-size: 100%;
    padding-bottom: 75px;
    min-height: auto;
}

#shopping-cart #checkout .checkout-details {
    padding: 18px 0 0px;
}

#shopping-cart #order-successful .total-section {
    border-top: unset;
    padding-top: 0;
}

#shopping-cart .icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

#shopping-cart .checkout-details tbody tr:nth-child(2),
#shopping-cart .checkout-details tbody tr:nth-child(4),
#shopping-cart .checkout-details thead tr:nth-child(1) {
    /* border-top: 1px solid var(--accent-color); */
    border-bottom: 1px solid var(--accent-color);
}

#shopping-cart .checkout-details tbody tr:nth-child(2) td,
#shopping-cart .checkout-details tbody tr:nth-child(4) td {
    padding-bottom: 25px;
}

#shopping-cart .checkout-details tbody td #shopping-cart .checkout-details tr:last-child td {
    border-bottom: unset;
}

#shopping-cart .checkout-details table thead tr th:first-child,
#shopping-cart .checkout-details table tbody tr td:first-child {
    padding-left: 39px;
    padding-top: 25px;
}

#shopping-cart .checkout-details table thead tr th:last-child,
#shopping-cart .checkout-details table tbody tr td:last-child {
    padding-right: 39px;
}

#shopping-cart .checkout-details table thead tr th {
    padding-bottom: 25px;
    padding-top: 25px;
}

#shopping-cart .checkout-details table thead tr th:nth-child(1) {
    width: 40%;
}

#shopping-cart .checkout-details table thead tr th:nth-child(2) {
    width: 15%;
}

#shopping-cart .checkout-details table thead tr th:nth-child(3) {
    width: 10%;
}

#shopping-cart .checkout-details table thead tr th:nth-child(4) {
    width: 20%;
}

#shopping-cart #checkout .coupon-code p {
    width: 55%;
}

#shopping-cart #checkout .left-section {
    padding-right: 70px;
}

#shopping-cart .icons {
    cursor: pointer;
}

/* CONTACT-US PAGE */

#contact-us.main-wrapper {
    background-image: url(../images/contact-us.png);
    background-repeat: no-repeat;
    background-size: 100% 140%;
    padding: 178px 0 0px;
}

#contact-us .contact-section {
    display: flex;
    justify-content: center;
    padding: 64px 0px;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
}

#contact-us .contact-item {
    width: 265px;
    padding: 0px 24px;
}

#contact-us .image-div {
    width: 122px;
    height: 122px;
}

#contact-us .contact-item p {
    padding-top: 8px;
}

#contact-us .login-section {
    background-image: url(../images/Form-login.png);
    background-repeat: no-repeat;
    padding: 39px;
    width: 34vw;
    background-size: 100% 100%;
}

#contact-us .contact-form {
    display: flex;
    padding: 0px 331px 64px 331px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#contact-us .form-input {
    width: 100%;
}

#contact-us .captcha img {
    width: 230px;
    height: 58px;
}

#contact-us .primary-button button {
    height: 58px;
}

/* CONTACT-US PAGE */

/* ABOUT US PAGE */
#about-us.main-wrapper {
    background-image: url(../images/About-us.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: 200px;

}

#about-us .banner-content {
    width: 29vm;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 200px;

}

#about-us .section-2-left {
    background-image: url(../images/about-us-left.png);
    background-repeat: no-repeat;
    height: 496px;
}

#about-us .learn-with-us {
    width: 32vw;
    padding-left: 116px;
}

#about-us .learn-with-us button {
    width: 211px
}

#about-us .section-3 {
    /* gap: 57px; */
}

/* ABOUT US PAGE */

/* Product-page */
#product-page .product-info {
    padding-top: 100px;
}

#product-page .product-info .content .img-section {
    width: 32.3vw;
    padding-right: 58px;
}

#product-page .product-info .content .img-section img {
    width: 478px;
    height: 525px;
    object-fit: contain;
}

#product-page .product-info .content .info-section {
    width: 42.7vw;
    height: 806px;
    padding-top: 4.5vw;
    padding-left: 5.7vw;
    padding-bottom: 4.5vw;
}

#product-page .product-info .content .info-section .wrapper {
    width: 530px;
}

#product-page .product-info .content .info-section .product-type {
    margin-bottom: 16px;
}

#product-page .product-info .content .info-section h2 {
    margin-bottom: 16px;
}

#product-page .product-info .content .info-section .tagline {
    margin-bottom: 16px;
}

#product-page .product-info .content .info-section .description:first-child {
    margin-bottom: 24px;
}

#product-page .product-info .content .info-section .cta {
    margin-top: 16px;
    margin-bottom: 51px;
}

#product-page .product-info .content .info-section .cta a {
    text-decoration: none;
}

#product-page .product-info .content .info-section .cart-cta {
    grid-template-columns: repeat(3, 1fr);
}

#product-page .product-info .content .info-section .cart-cta .quantity-info span {
    font-family: Quicksand;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
    margin-right: 10px;
}

#product-page .product-info .content .info-section .cart-cta .quantity-info .quantity {
    background: var(--black-bg);
    border: 1px solid var(--accent-color);
}

#product-page .product-info .content .info-section .cart-cta .quantity-info .quantity button {
    width: 32px;
    height: 32px;
    padding: 0;
}

#product-page .product-info .content .info-section .cart-cta .quantity-info .quantity span {
    text-align: center;
}

#product-page .faq-section h2.title {
    padding: 40px 0 39px 0;
}

#product-page .accordion-item .accordion-button {
    padding: 20px 40px 24px;
    border-radius: 8px;
}

#product-page .accordion-item .accordion-body {
    padding: 0 40px 20px;
}

#product-page .accordion-item .accordion-button.collapsed {
    background: var(--accent-color);
}

#product-page .accordion-item {
    background-color: transparent;
    border: unset;
    padding-bottom: 24px;
    padding-top: 24px;
    border-bottom: 1px solid var(--accent-color);
}

#product-page .accordion-item:first-child {
    padding-top: unset;
}

#product-page .accordion-item:last-child {
    border-bottom: unset;
}


#product-page .accordion-item .accordion-body {
    border-radius: 0 0 8px 8px;
    border: unset;
    background: transparent;
    box-shadow: unset;
    border: unset;
    padding: 20px 40px;
}

#product-page .accordion-button:not(.collapsed) {
    border-radius: 8px 8px 0 0;
    border: unset;
    background: transparent;
    box-shadow: unset;
    border: unset;
}

#product-page .accordion-section {
    width: 890px;
    margin: 0 auto;
}

#product-page .accordion-button:not(.collapsed)::after {
    background-image: url(../images/down-arrow.svg);
}

#product-page .accordion-button::after {
    background-image: url(../images/down-arrow.svg);
}

#product-page .accordion-item.active {
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--accent-color);
    background: var(--Card-BG, radial-gradient(52.15% 80.07% at 47.19% -0.63%, #20334A 0%, #181F26 100%), linear-gradient(155deg, rgba(25, 43, 72, 0.70) 0%, rgba(24, 41, 69, 0.70) 49.53%, rgba(23, 38, 61, 0.70) 75.72%));
}

#product-page .modal-dialog .modal-content {
    border-radius: 4px;
    border: 1px solid var(--Fields, #343F4D);
    background: var(--Card-BG, radial-gradient(52.15% 80.07% at 47.19% -0.63%, #20334A 0%, #181F26 100%), linear-gradient(155deg, rgba(25, 43, 72, 0.70) 0%, rgba(24, 41, 69, 0.70) 49.53%, rgba(23, 38, 61, 0.70) 75.72%));
}

#product-page .modal-dialog .modal-header {
    border: unset;
}

#product-page .modal-dialog {
    display: flex;
    align-items: center;
    height: 100%;
    width: 43%;
    max-width: 50%;
}

#product-page .modal-dialog .modal-body {
    padding: 0 69px 56px;
}

@media (min-width: 375px) and (max-width: 767px) {
    #product-page .product-info .content {
        flex-direction: column;
    }

    #product-page .product-info .content .img-section {
        width: 263px;
        height: 263px;
        padding: 0;
        margin: 24px auto;
    }

    #product-page .product-info .content .info-section {
        width: 100%;
        height: auto;
        padding: 32px 24px;
    }

    #product-page .product-info .content .info-section .wrapper {
        width: 100%;
    }

    #product-page .product-info .content .info-section .cart-cta {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 8px;
    }

    #product-page .product-info .content .info-section .cart-cta button.add-to-cart {
        grid-row: 2;
        grid-column-start: 1;
        grid-column-end: 3;
    }

    #product-page .product-info .content .info-section .cart-cta .quantity-info {
        justify-content: flex-end !important;
    }

    #product-page .product-title.txt-large.white,
    #product-page .product-price.txt-large.white {
        font-size: 21px !important;
    }
}


@media (min-width: 1251px) and (max-width: 1400px) {

    #home-page .best-products .products,
    .best-products .products {
        margin-left: 0 !important;
    }

    #home-page .best-products,
    .best-products {
        padding: 58.5px 70px;
    }
}

/* EndProduct-page */

/* Slider */

.best-products .products {
    margin-left: 17vw;
}

/* Slider */