/* ==========================================
   ABOUT PAGE - CENIT
========================================== */

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

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

.about-banner {
    background: linear-gradient(135deg, #0b8734, #169c45);
    padding: 90px 0;
    overflow: hidden;
}

.about-banner h1 {
    font-size: 65px;
    font-weight: 800;
}

.about-banner h5 {
    letter-spacing: 2px;
}

.about-banner p {
    font-size: 20px;
}

.about-banner img {
    animation: float 5s ease-in-out infinite;
}

@keyframes float {

    0% {
        transform: translateY(0px);
    }

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

    100% {
        transform: translateY(0px);
    }

}

/*=========================
      COMPANY
=========================*/

#company img {

    border-radius: 20px;

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

}

#company h2 {

    font-weight: 700;

    color: #0b8734;

}

#company p {

    font-size: 17px;

    line-height: 1.9;

    color: #666;

}

/*=========================
      ICON BOX
=========================*/

.icon-box {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 40px;

}

/*=========================
      CARDS
=========================*/

.card {

    border: none;

    transition: .4s;

    overflow: hidden;

}

.card:hover {

    transform: translateY(-10px);

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

}

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

.card i {

    transition: .3s;

}

.card:hover i {

    transform: scale(1.2);

}

/*=========================
    LEADERSHIP TEAM
=========================*/

.team-card {

    border-radius: 20px;

    overflow: hidden;

    transition: .4s;

    background: #fff;

}

.team-card img {

    height: 340px;

    object-fit: cover;

}

.team-card:hover {

    transform: translateY(-12px);

}

.team-card .badge {

    font-size: 14px;

    padding: 8px 18px;

    border-radius: 50px;

}

.team-card h4 {

    font-weight: 700;

    margin-top: 10px;

}

.team-card p {

    font-size: 15px;

    color: #666;

    line-height: 1.8;

}

.team-card a {

    transition: .3s;

}

.team-card a:hover {

    transform: scale(1.2);

}

/*=========================
      STATISTICS
=========================*/

.shadow {

    transition: .4s;

}

.shadow:hover {

    transform: translateY(-8px);

}

.display-4 {

    font-weight: 700;

}

/*=========================
      VALUES
=========================*/

.card h4 {

    font-weight: 600;

}

.card p {

    font-size: 15px;

}

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

.btn-warning {

    font-weight: 600;

    padding: 14px 35px;

}

.btn-warning:hover {

    background: #ffc107;

    transform: translateY(-3px);

}

.btn-outline-light:hover {

    transform: translateY(-3px);

}

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

footer {

    background: #111;

}

footer h5 {

    margin-bottom: 20px;

    font-weight: 600;

}

footer p,
footer li {

    color: #cccccc;

    font-size: 15px;

    line-height: 1.9;

}

footer a {

    transition: .3s;

}

footer a:hover {

    color: #ffc107 !important;

}

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

.navbar {

    padding: 15px 0;

}

.navbar .nav-link {

    font-weight: 500;

    margin: 0 10px;

    transition: .3s;

}

.navbar .nav-link:hover {

    color: #0b8734 !important;

}

.navbar-brand img {

    transition: .3s;

}

.navbar-brand img:hover {

    transform: scale(1.05);

}

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

section h6 {

    font-size: 15px;

    letter-spacing: 2px;

    text-transform: uppercase;

}

section h2 {

    font-weight: 700;

    margin-bottom: 20px;

}

section {

    padding-top: 80px;

    padding-bottom: 80px;

}

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

.btn {

    border-radius: 10px;

    transition: .3s;

}

.btn:hover {

    transform: translateY(-2px);

}

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

@media(max-width:991px) {

    .about-banner {

        text-align: center;

    }

    .about-banner h1 {

        font-size: 48px;

    }

    .team-card img {

        height: 300px;

    }

}

@media(max-width:767px) {

    .about-banner {

        padding: 60px 0;

    }

    .about-banner h1 {

        font-size: 38px;

    }

    .about-banner p {

        font-size: 17px;

    }

    section {

        padding: 60px 0;

    }

    .team-card img {

        height: 280px;

    }

    .display-5 {

        font-size: 34px;

    }

}

@media(max-width:576px) {

    .about-banner h1 {

        font-size: 32px;

    }

    .icon-box {

        width: 70px;

        height: 70px;

        font-size: 28px;

    }

    .team-card img {

        height: 240px;

    }

}