* {
    font-family: Poppins,sans-serif
}

.top-header {
    background-color: #008c45
}

.top-header a {
    color: #f4f4f4
}

.main-header {
    justify-content: space-between;
    align-items: center
}

.main-header .row,.main-header .header-menu {
    display: flex;
    align-items: center
}

.main-header .header-menu .logo {
    width: 225px;
    cursor: pointer;
    margin-right: 25px
}

.main-header .header-menu .menu-items a {
    text-decoration: none;
    padding: 15px;
    font-weight: 600;
    color: #2c2c2c
}

.main-header .header-search .search {
    position: relative
}

.main-header .header-search .search input {
    padding: 10px 15px;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 5px;
    width: 100%
}

.main-header .header-search .search button {
    position: absolute;
    right: 4px;
    border: none;
    top: 4px;
    width: 37px;
    height: 37px;
    border-radius: 5px;
    background: #008c45;
    color: #fff
}

.main-header .navbar {
    padding: 0
}

.search-container {
    background-color: brown;
    background-position: center;
    background-size: cover
}

.search-container .inner-section {
    background: rgb(47,45,68);
    background: linear-gradient(180deg,rgba(47,45,68,0) 0%,rgba(47,45,68,.6195728291) 49%,rgb(47,45,68) 100%);
    padding: 100px 0
}

.search-container .info-section {
    color: #fff
}

.search-container .info-section .title {
    font-size: 22px;
    line-height: 1.5;
    font-weight: 700
}

.search-container .info-section .sub-title {
    font-size: 16px
}

.search-ctn {
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.search-ctn .search {
    width: 100%;
    position: relative;
    display: flex
}

.search-ctn .searchTerm {
    width: 100%;
    border: 3px solid #0d6efd;
    border-right: none;
    padding: 5px 20px;
    height: 55px;
    border-radius: 5px 0 0 5px;
    outline: none;
    color: #0d6efd
}

.search-ctn .searchTerm:focus {
    color: #0d6efd
}

.search-ctn .searchButton {
    width: 55px;
    height: 55px;
    border: 1px solid #0d6efd;
    background: #0d6efd;
    text-align: center;
    color: #fff;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 20px
}

.section-header {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #009246
}

.categories {
    padding-bottom: 10px
}

.categories .categories-grid {
    display: grid;
    grid-template-columns: repeat(10,1fr);
    grid-template-rows: repeat(1,1fr);
    grid-column-gap: 0;
    grid-row-gap: 0
}

.categories .categories-grid .category {
    padding: 20px 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    justify-content: flex-start;
    border: 1px solid #ededed;
    height: 136px;
    text-decoration: none;
    color: #000
}

.categories .categories-grid .category .icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 10px
}

.categories .categories-grid .category .title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    font-size: 12px
}

.custom-button-vetical {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #343a40;
    text-decoration: none;
    cursor: pointer
}

.custom-button-vetical i {
    font-size: 24px
}

.custom-button-vetical .label {
    font-size: 13px;
    margin-top: 5px;
    color: #2c2c2c
}

.main-banner .info-section {
    padding-right: 30px
}

.main-banner .info-section .big-title {
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 15px
}

.main-banner .info-section .small-title {
    font-size: 22px;
    color: #fff;
    margin-bottom: 25px
}

.main-banner .search-form {
    background-color: #fff;
    padding: 30px;
    border-radius: 5px
}

.main-banner .search-form .title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px
}

.main-banner .search-form .info {
    font-size: 14px;
    color: #343a40;
    margin-bottom: 15px
}

.main-banner .search-form .form {
    width: 100%;
    display: flex;
    margin-bottom: 15px
}

.main-banner .search-form .form input {
    width: 100%;
    padding: 10px
}

.main-banner .search-form .form button {
    padding: 10px 20px;
    width: 200px;
    margin-left: 10px;
    border: none;
    background: #198754;
    color: #fff
}

.main-banner .stats-section {
    display: flex;
    justify-content: space-between;
    margin-top: 30px
}

.main-banner .stats-section>.row {
    width: 100%;
    margin: 0
}

.main-banner .stats-section .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff
}

.main-banner .stats-section .stat .value {
    font-size: 24px;
    font-weight: 700
}

.main-banner .stats-section .stat .label {
    font-size: 14px
}

.brand-marquee {
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center
}

.marquee-inner {
    display: flex;
    width: 100%
}

.marquee-track {
    display: flex;
    gap: 50px;
    animation: marquee 100s linear infinite
}

.marquee-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center
}

.marquee-item img {
    width: 100px;
    height: 40px!important;
    object-fit: contain;
    height: auto;
    filter: grayscale(30%);
    cursor: pointer;
    transition: transform .3s ease-in-out
}

.marquee-item img:hover {
    filter: grayscale(0%);
    transform: scale(1.1)
}

@keyframes marquee {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-50%)
    }
}

.info-section-white .big-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px
}

.info-section-white .medium-title {
    font-size: 18px;
    margin-bottom: 15px
}

.info-section-white .paragraph {
    font-size: 16px
}

.glassed {
    box-shadow: 0 4px 30px #0000001a;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 5px;
    padding: 30px;
    margin-left: 0!important;
    margin-right: 0!important;
    margin-top: 40px!important
}

.page-title {
    background-color: #e7e7e7
}

.page-title .container {
    min-height: 150px;
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center
}

.page-title .container .title {
    font-size: 32px;
    font-weight: 700;
    text-align: center
}

.page-title .container .brand_logo {
    height: 50px;
    width: auto
}

.page-title .container .description {
    margin-top: 20px;
    padding: 0 20px
}

.breadcrumbs-ctn {
    background-color: #f8f9fa
}

.breadcrumbs-ctn .breadcrumbs {
    display: flex;
    align-items: center
}

.breadcrumbs-ctn .breadcrumbs .path {
    padding: 15px;
    text-decoration: none;
    color: #2c2c2c
}

.breadcrumbs-ctn .breadcrumbs .path:first-child {
    padding: 15px 15px 15px 0
}

.breadcrumbs-ctn .breadcrumbs .path.inactive {
    color: #a9a9a9
}

.products-ctn {
    padding: 20px 0
}

.products-ctn .products-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-column-gap: 20px;
    grid-row-gap: 40px
}

.products-ctn .products-grid .product a {
    text-decoration: none
}

.products-ctn .products-grid .product img.card-img-top {
    width: 100%;
    height: 200px;
    padding: 20px;
    object-fit: contain;
    box-shadow: inset 0 0 0 1px #1116261a;
    -webkit-border-radius: 0 10px 0 0;
    -moz-border-radius: 0 10px 0 0;
    border-radius: 0 10px 0 0
}

.products-ctn .products-grid .product .info {
    margin-top: 10px
}

.products-ctn .products-grid .product .info .brand-name {
    color: #6c757d
}

.products-ctn .products-grid .product .info img {
    height: 15px;
    margin-bottom: 10px
}

.products-ctn .products-grid .product .info .title {
    font-size: 16px;
    text-decoration: none;
    color: #2c2c2c
}

.products-ctn .products-grid .product .info .price {
    font-size: 14px;
    font-weight: 700;
    color: #198754;
    display: none
}

.product-details {
    margin-top: 30px;
    color: #022d62
}

.product-details img {
    width: 100%;
    height: 500px;
    object-fit: contain;
    border: 1px solid #dee2e6
}

.product-details .info .sku {
    font-size: 16px;
    color: #a9a9a9;
    margin-bottom: 10px
}

.product-details .info .sku span {
    font-weight: 700
}

.product-details .info .product_name {
    display: block;
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: -1px;
    white-space: break-spaces;
    line-height: 1.3;
    font-weight: 800;
    color: #022d62
}

.product-details .info .info-text {
    padding: 3px 0
}

.product-details .info .info-text span {
    font-weight: 700
}

.product-details .submit-button {
    width: 100%;
    display: block;
    padding: 15px 20px;
    background-color: #0d6efd;
    color: #fff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 3px
}

.product-details .submit-button i {
    margin-right: 10px
}

.product-details .specifications-table {
    width: 100%
}

.product-details .specifications-table tr:nth-child(odd) {
    background-color: #faebd7
}

.product-details .specifications-table tr:nth-child(2n) {
    background-color: #f4f2ef
}

.product-details .hr {
    margin: 20px 0;
    border: 0;
    height: 2px;
    background: #e0e0e0
}

.product-details .info-cards {
    margin-top: 20px
}

.product-details .info-cards .card {
    padding: 30px 20px;
    background-color: #673ab721;
    border-radius: 5px;
    text-align: center;
    border: none
}

.product-details .info-cards .card i {
    font-size: 32px;
    margin-bottom: 15px;
    color: #673ab7
}

.product-details .info-cards .card .title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #673ab7
}

.product-details .info-cards .card .text {
    font-size: 16px;
    color: #673ab7ba
}

.products-placeholder img {
    max-width: 600px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto
}

.container {
    max-width: 1420px!important
}

.contact-section {
    background-color: brown;
    color: #fff;
    padding: 50px 0
}

.contact-section .small-container {
    max-width: 1200px!important
}

.contact-section .contact-form {
    padding-left: 40px!important
}

.contact-section .contact-info {
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    padding: 50px 20px;
    border-radius: 5px
}

.contact-section .contact-info .logo img {
    width: 150px;
    margin-bottom: 10px
}

.contact-section .contact-form {
    color: #000;
    padding: 30px;
    background-color: #fff
}

.footer {
    background-color: #2c2c2c;
    color: #fff;
    text-align: center
}

.footer .footer-row {
    padding: 20px 0
}

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

.footer .footer-row .logo {
    height: 70px
}

.footer .footer-row .social {
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column
}

.footer .footer-row .social .social-icons {
    display: flex;
    align-items: center;
    justify-content: center
}

.footer .footer-row .social .social-icons a {
    margin: 0 5px;
    color: #fff;
    font-size: 20px
}

.footer .footer-row .hr {
    margin: 20px 0;
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right,#ccc,#333,#ccc)
}

.footer .footer-row .links {
    display: flex;
    align-items: center;
    justify-content: center
}

.footer .footer-row .links a {
    color: #fff;
    padding: 10px 15px;
    text-decoration: none;
    margin: 0 10px
}

.footer .copyright {
    padding: 15px 0;
    font-size: 14px;
    text-align: center
}

.brands-page {
    padding: 30px 0
}

.brands-page .brand-filter {
    display: flex;
    justify-content: space-between
}

.brands-page .brand-filter a {
    width: 100px;
    color: #2c2c2c;
    border-color: #2c2c2c
}

.brands-page .brand-filter a:hover {
    color: #fff;
    background-color: #2c2c2c
}

.brands-page .brands-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(auto,1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px
}

.brands-page .brands-grid .brand {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ededed;
    height: 60px;
    padding: 15px
}

.brands-page .brands-grid .brand a {
    text-align: center;
    text-decoration: none
}

.brands-page .brands-grid .brand img {
    max-height: 55px;
    object-fit: contain
}

.brands-page .letter-section {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 15px;
    background-color: #f8f9fa;
    margin-top: 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px
}

.categories-page {
    padding: 30px 0
}

.categories-page .categories-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(auto,1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px
}

.categories-page .categories-grid .category {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid #ededed;
    min-height: 100px;
    padding: 20px;
    text-decoration: none;
    color: #000;
    text-align: center
}

.categories-page .categories-grid .category img.category-image {
    max-height: 40px;
    object-fit: contain
}

.categories-page .categories-grid .category .text {
    margin-top: 10px
}

.form label {
    position: absolute;
    font-size: 12px;
    margin-left: 6px;
    margin-top: -8px;
    background: white;
    padding: 0 5px
}

.form input {
    border-radius: 3px;
    padding-top: 15px
}

.tab-container {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden
}

.tab-menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f5f5f5
}

.tab-menu li {
    padding: 10px 20px;
    cursor: pointer;
    flex: 1;
    text-align: center;
    border-bottom: 2px solid transparent
}

.tab-menu li.active {
    border-bottom: 2px solid #007bff;
    font-weight: 700
}

.tab-content {
    padding: 20px;
    background: #fff
}

.tab-pane {
    display: none
}

.tab-pane.active {
    display: block
}

.header-search {
    padding-right: 0!important
}

.section-title {
    font-size: 14px;
    margin-bottom: 10px
}

.full-container .container {
    padding: 30px 0
}

@media only screen and (max-width: 1470px) {
    .full-container .container {
        padding:30px 15px
    }

    .search-container .inner-section {
        padding: 50px 0
    }

    .main-banner .info-section {
        text-align: center;
        padding-right: 0
    }
}

@media only screen and (max-width: 1200px) {
    .products-grid {
        display:grid;
        grid-template-columns: repeat(2,1fr)!important;
        grid-column-gap: 20px;
        grid-row-gap: 40px
    }

    .products-grid .product a {
        text-decoration: none
    }

    .products-grid .product img.card-img-top {
        width: 100%;
        height: 200px;
        padding: 20px;
        object-fit: contain;
        box-shadow: inset 0 0 0 1px #1116261a;
        -webkit-border-radius: 0 10px 0 0;
        -moz-border-radius: 0 10px 0 0;
        border-radius: 0 10px 0 0
    }

    .products-grid .product .info {
        margin-top: 10px
    }

    .products-grid .product .info .brand-name {
        color: #6c757d
    }

    .products-grid .product .info img {
        height: 15px;
        margin-bottom: 10px
    }

    .products-grid .product .info .title {
        font-size: 16px;
        text-decoration: none;
        color: #2c2c2c
    }

    .products-grid .product .info .price {
        font-size: 14px;
        font-weight: 700;
        color: #198754;
        display: none
    }

    .categories .categories-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .header-search {
        padding-right: 12px!important
    }

    .footer .footer-row .links {
        flex-direction: column
    }

    .top-header .nav-link span {
        display: none
    }

    .big-title {
        font-size: 28px!important
    }

    .small-title {
        font-size: 18px!important
    }
}

@media only screen and (max-width: 993px) {
    .search {
        padding-bottom:15px
    }
}