:root {
    --primary-color: #ef5122;
    --light-orenge-color: #fff2ef;
    --secondry-color: #101828;
    --text-color: #202020;
    --text-color-second: #344054;
    --border-color: #d0d5dd;
    --gray-color: #9d9d9d;
    --gray-second-color: #667085;
    --bg-color: #fafafa;
    --table-bg-color: #eaecf0;
    --table-bg2-color: #f9fafb;
}

body {
    background-color: #ffff;
    font-size: 16px;
}

.sec-title {
    margin-bottom: 30px;
}

    .sec-title h2 {
        font-weight: 700;
        font-size: 1.6rem;
    }

    .sec-title p {
        font-weight: 400;
        font-size: 0.9rem;
        color: var(--gray-second-color);
    }

header {
    background-color: var(--text-color);
    padding: 12px 0px;
}

    header .top-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        header .top-header nav ul {
            display: flex;
            align-items: center;
            column-gap: 28px;
            padding-left: 0px;
            margin-bottom: 0px;
        }

            header .top-header nav ul li {
                list-style: none;
            }

        header .top-header a {
            text-decoration: none;
            color: #fff;
            font-size: 0.9rem;
        }

.hero-sec {
    height: 100vh;
    background-image: url(../img/banner-source-one.jpg);
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
}

    .hero-sec::after {
        content: "";
        position: absolute;
        bottom: 0px;
        right: 0px;
        width: 100%;
        height: 100%;
        background-image: url(../img/overlay-2.png);
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 1;
    }

.hero-cover {
    position: relative;
    z-index: 2;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.hero-content-wapper {
    /*    position: absolute;*/
    /* bottom: 250px; */
    width: 100%;
    /*    height: 100%;*/
    top: 50%;
    left: 50%;
    /*    transform: translate(-50px, -50px);*/
}

    .hero-content-wapper .inActive {
        background-color: transparent !important;
    }

.hero-cover .content {
    color: #fff;
    text-align: center;
    max-width: 805px;
    margin: auto;
}

    .hero-cover .content h1 {
        color: #fff;
        font-size: 2.3rem;
        font-weight: 700;
    }

    .hero-cover .content p {
        color: #fff;
        font-size: 0.9rem;
        font-weight: 400;
        margin-bottom: 30px;
    }

.hero-cover .search-box {
    /*  display: flex;*/
    width: 100%;
    /*  align-items: center;*/
    column-gap: 10px;
    max-width: 805px;
    background: linear-gradient( 90deg, rgba(24, 24, 24, 1) 50%, rgba(79, 97, 103, 1) 100% );
    border: 1px solid #6a6a6a;
    padding: 20px;
    border-radius: 10px;
    margin: auto;
}

    .hero-cover .search-box .search-bar {
        display: flex;
        width: 100%;
        align-items: center;
        border-radius: 6px;
    }

        .hero-cover .search-box .search-bar img {
            height: 25px;
            width: 25px;
        }

        .hero-cover .search-box .search-bar input {
            border: unset;
            padding: 0px 0px 20px 0px;
            border: unset !important;
            background-color: transparent !important;
            color: #616161 !important;
        }

            .hero-cover .search-box .search-bar input::placeholder {
                color: #616161 !important;
            }

.hero-cover .top-search-list li button {
    background: unset;
    border: 1px solid;
}

.hero-cover .search-btn-grps {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.count-list {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 805px;
    margin: 0px auto;
    justify-content: space-between;
    margin-top: 16px;
}


    .count-list .count-box {
    }

        .count-list .count-box .count-no {
            font-size: 1.8rem;
            font-weight: 600;
        }

        .count-list .count-box .count-des {
            font-size: 0.9rem;
            font-weight: 400;
        }

.how-work-sec {
    background-color: var(--table-bg2-color);
    padding: 60px 0px;
}

.how-work-img {
    margin-top: 24px;
}

    .how-work-img img {
        width: 100%;
    }

.action-sourceOne-img {
    max-width: 800px;
    margin: auto;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

    .action-sourceOne-img::after {
        content: "";
        position: absolute;
        bottom: 0px;
        right: 0px;
        width: 100%;
        height: 100%;
        background-image: url(../img/overlay-img.png);
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 2;
    }

    .action-sourceOne-img img.action-img {
        width: 100%;
    }

    .action-sourceOne-img img.action-play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
        width: 54px;
        height: 54px;
        z-index: 4;
    }

.Why-choose-SourceOne-sec {
    background-color: var(--table-bg2-color);
    padding: 60px 0px;
}

.box {
    padding: 10px;
}

    .box img {
    }

    .box h3 {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-color);
        margin: 0px;
        margin: 14px 0px 10px;
    }

    .box p {
        font-size: 0.88rem;
        font-weight: 400;
        color: var(--gray-second-color);
    }

.faq-area {
    max-width: 900px;
    margin: auto;
}

    .faq-area .accordion-item {
        border: unset;
        padding: 12px 0px;
    }

        .faq-area .accordion-item:not(:last-child) {
            border-bottom: 1px solid var(--table-bg-color);
        }

    .faq-area .accordion-button:not(.collapsed) {
        color: var(--text-color);
        background-color: unset;
        box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
    }

    .faq-area .accordion-button:focus {
        z-index: 3;
        border-color: var(--bs-accordion-btn-focus-border-color);
        outline: 0;
        box-shadow: unset;
    }

    .faq-area .accordion-header button {
        font-size: 0.96rem;
        font-weight: 500;
        color: var(--text-color);
    }

    .faq-area .accordion-body p {
        font-size: 0.9rem;
        color: var(--gray-second-color);
    }

.cta-box {
    background-color: var(--table-bg2-color);
    padding: 30px 0px;
    max-width: 1100px;
    border-radius: 8px;
    margin: auto;
}

footer {
    background-color: var(--text-color);
    padding: 28px 0px;
    color: #fff;
}

.footer-cover {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .footer-cover ul {
        display: flex;
        align-items: center;
        padding-left: 0px;
        margin-bottom: 0px;
        column-gap: 28px;
    }

        .footer-cover ul li {
            list-style: none;
        }

            .footer-cover ul li a {
                color: #fff;
                font-size: 0.9rem;
                text-decoration: none;
            }

.footer-cover-bottom {
    font-size: 0.9rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .footer-cover-bottom span {
        font-weight: 400;
        color: var(--border-color);
    }

    .footer-cover-bottom ul {
        display: flex;
        align-items: center;
        padding-left: 0px;
        margin-bottom: 0px;
        column-gap: 28px;
    }

        .footer-cover-bottom ul li {
            list-style: none;
        }

            .footer-cover-bottom ul li a {
                text-decoration: none;
                color: var(--border-color);
                font-weight: 400;
            }


.heder-modal .heade {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}


    .heder-modal .heade button {
        height: 10px;
        width: 3px;
    }

.heder-modal h1 {
    font-size: 1rem !important;
    font-weight: 600;
}

.heder-modal p {
    font-size: .8rem !important;
}

.product-catalog {
    padding: 60px 0px;
    min-height: calc(100vh - 170px);
}

.product-Filter {
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    border-radius: 10px;
    background: #fff;
}

    .product-Filter .custom-btn {
        width: 100%;
    }

.product-Card-box {
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 60px;
}


    .product-Card-box .product-Card-header span {
        cursor: pointer;
        font-size: 1.4rem;
        position: absolute;
        top: 10px;
        right: 16px;
    }
.product-Filter-button {
    font-size: .9rem;
    border: unset;
    background: unset;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    column-gap: 5px;
    font-weight: 500;
    cursor:text !important;
}
    .product-Filter-button img {
        width: 16px;
    }

.product-Card-box .product-Card-header h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 2px;
    margin-right: 16px;
}

    .product-Card-box p {
        font-size: .8rem;
        font-weight: 500;
        color: var(--gray-second-color);
    }

    .product-Card-box .product-des {
        margin-bottom: 20px;
    }

        .product-Card-box .product-des p {
            color: #000;
            font-size: .8rem;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            margin-bottom: 2px;
            column-gap: 28px;
        }

.product-Card-box button {
    width: 90%;
    background: #545454 !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 22px;
}

.product-wapper {
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    border-radius: 10px;
    background: #fff;
}

    .product-wapper .breadcrumb-item + .breadcrumb-item::before {
        content: "/"
    }

    .product-wapper .breadcrumb {
        font-size: .8rem;
    }


        .product-wapper .breadcrumb .breadcrumb-item a {
            color: var(--primary-color) !important;
            text-decoration: none;
        }



.product-details-context .product-name {
    font-size: 1.6rem;
    font-weight: 800;
}

.product-details-context .cash-no {
}

    .product-details-context .cash-no ul {
        display: flex;
        align-items: center;
        column-gap: 40px;
        padding-left: 0px;
        margin: 14px 0px;
    }


        .product-details-context .cash-no ul li {
            list-style: none;
        }

            .product-details-context .cash-no ul li .subtitledata {
                font-size: .8rem;
                background: #ef51220f;
                padding: 10px 20px;
            }

.product-details-context .table-responsive table {
}

    .product-details-context .table-responsive table td {
        font-size: .8rem;
        font-weight: 500;
    }

    .product-details-context .table-responsive table .textbold {
        font-weight: 700;
    }



.footer-bottom-logo {
    text-align: center;
}

    .footer-bottom-logo .logo-text {
        margin: 40px 0px;
        text-align: center;
        font-size: 5rem;
        font-weight: 800;
        color: #3c3c3cb8;
    }

@media (max-width:992px) {
    body {
        font-size: 14px;
    }

    header .top-header nav {
        display: none;
    }

    .hero-sec {
        background-position-x: right;
    }
    .footer-bottom-logo .logo-text {
        font-size: 4rem;
    }
}

@media (max-width:768px) {
    body {
        font-size: 12px;
    }

    .cta-box {
        padding: 30px;
    }
    .footer-bottom-logo .logo-text {
        font-size: 3rem;
    }
}

@media (max-width:576px) {
    .footer-cover {
        flex-direction: column;
        gap: 16px;
    }
    .footer-bottom-logo .logo-text {
        font-size: 2rem;
    }

    .footer-cover-bottom {
        flex-direction: column;
        gap: 16px;
    }
}