/* ==========================================
   CENIT PRODUCTS PAGE
========================================== */

body {
    font-family: 'Poppins', sans-serif;
    background: #f8f9fa;
    color: #333;
}

/* ==========================================
   NAVBAR
========================================== */

.navbar {
    padding: 15px 0;
}

.navbar .nav-link {
    font-weight: 500;
    margin: 0 10px;
    transition: .3s;
}

.navbar .nav-link:hover {
    color: #0b8734 !important;
}

.navbar .nav-link.active {
    color: #0b8734 !important;
    font-weight: 600;
}

/* ==========================================
   HERO BANNER
========================================== */

.product-banner {

    background: linear-gradient(135deg, #0b8734, #1aa54b);

    color: #fff;

    padding: 90px 0;

    overflow: hidden;

}

.product-banner h1 {

    font-size: 60px;

    font-weight: 800;

    margin-bottom: 20px;

}

.product-banner h5 {

    color: #ffd54f;

    letter-spacing: 2px;

    font-weight: 700;

}

.product-banner p {

    font-size: 18px;

    line-height: 1.8;

}

.product-banner img {

    animation: float 5s ease-in-out infinite;

}

@keyframes float {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0);
    }

}

/* ==========================================
   SECTION
========================================== */

.product-section {

    padding: 90px 0;

}

.product-section h2 {

    color: #0b8734;

    font-weight: 700;

}

.product-section h3 {

    font-weight: 600;

}

/* ==========================================
   CATEGORY CARD
========================================== */

.category-card {

    background: #fff;

    border-radius: 20px;

    padding: 35px;

    text-align: center;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);

    transition: .35s;

    height: 100%;

}

.category-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .15);

}

.category-card img {
    width: 100%;
    max-width: 220px;
    height: 180px;
    object-fit: contain;
    margin-bottom: 25px;
    display:inline !important
}

.category-card h3 {

    font-size: 26px;

    margin-bottom: 15px;

}

.category-card p {

    color: #666;

    min-height: 55px;

}

/* ==========================================
   PRODUCT IMAGE
========================================== */

.product-section img {

    transition: .4s;

}

.product-section img:hover {

    transform: scale(1.04);

}

/* ==========================================
   CARD
========================================== */

.card {

    border: none;

    transition: .35s;

}

.card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .15) !important;

}

/* ==========================================
   LIST GROUP
========================================== */

.list-group-item {

    border: none;

    padding: 14px 0;

    font-size: 16px;

}

/* ==========================================
   FEATURE BOX
========================================== */

.feature-box {

    background: #fff;

    padding: 30px 15px;

    border-radius: 15px;

    transition: .35s;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .06);

    height: 100%;

}

.feature-box:hover {

    transform: translateY(-8px);

    background: #0b8734;

    color: #fff;

}

.feature-box:hover i {

    color: #fff !important;

}

.feature-box i {

    transition: .3s;

}

.feature-box:hover i {

    transform: scale(1.2);

}

/* ==========================================
   BADGES
========================================== */

.badge {

    border-radius: 50px;

    padding: 10px 16px;

    font-size: 14px;

}

/* ==========================================
   BUTTONS
========================================== */

.btn {

    border-radius: 8px;

    transition: .3s;

    font-weight: 500;

}

.btn:hover {

    transform: translateY(-2px);

}

/* ==========================================
   CTA
========================================== */

section:last-of-type .btn {

    margin-top: 10px;

}

/* ==========================================
   FOOTER
========================================== */

footer {

    background: #111;

}

footer h5 {

    margin-bottom: 20px;

    font-weight: 600;

}

footer p,
footer li {

    color: #d6d6d6;

    line-height: 1.9;

}

footer a {

    color: #fff;

    text-decoration: none;

    transition: .3s;

}

footer a:hover {

    color: #ffc107;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:992px) {

    .product-banner {

        text-align: center;

        padding: 70px 0;

    }

    .product-banner h1 {

        font-size: 45px;

    }

    .category-card {

        margin-bottom: 25px;

    }

}

@media(max-width:768px) {

    .product-banner h1 {

        font-size: 34px;

    }

    .product-banner p {

        font-size: 16px;

    }

    .product-section {

        padding: 60px 0;

    }

    .category-card img {

        max-width: 170px;

        height: 150px;

    }

    .feature-box {

        margin-bottom: 20px;

    }

}

@media(max-width:576px) {

    .product-banner {

        padding: 50px 0;

    }

    .product-banner h1 {

        font-size: 30px;

    }

    .category-card {

        padding: 25px;

    }

    .category-card h3 {

        font-size: 22px;

    }

}