/* ==========================================
   CENIT CONTACT 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,
.navbar .nav-link.active {
    color: #0b8734 !important;
}

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

.contact-banner {

    background: linear-gradient(135deg, #0b8734, #18a74d);

    padding: 90px 0;

    color: #fff;

    overflow: hidden;

}

.contact-banner h1 {

    font-size: 60px;

    font-weight: 800;

}

.contact-banner p {

    font-size: 18px;

    line-height: 1.8;

}

.contact-banner img {

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

}

@keyframes float {

    0% {
        transform: translateY(0);
    }

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

    100% {
        transform: translateY(0);
    }

}

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

.contact-card {

    background: #fff;

    border-radius: 18px;

    padding: 35px;

    text-align: center;

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

    transition: .35s;

    height: 100%;

}

.contact-card:hover {

    transform: translateY(-10px);

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

}

.contact-card .icon {

    width: 80px;

    height: 80px;

    background: #0b8734;

    color: #fff;

    margin: auto;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 34px;

    margin-bottom: 20px;

}

.contact-card h4 {

    font-weight: 700;

    margin-bottom: 15px;

}

.contact-card p {

    color: #666;

    line-height: 1.8;

}

/* ==========================================
   FORM
========================================== */

.card {

    border: none;

    transition: .35s;

}

.card:hover {

    transform: translateY(-5px);

}

.form-control,
.form-select {

    height: 50px;

    border-radius: 10px;

    border: 1px solid #ddd;

}

textarea.form-control {

    height: auto;

}

.form-control:focus,
.form-select:focus {

    border-color: #0b8734;

    box-shadow: 0 0 0 .2rem rgba(11, 135, 52, .15);

}

.form-label {

    font-weight: 600;

}

.btn {

    border-radius: 8px;

    transition: .3s;

}

.btn:hover {

    transform: translateY(-2px);

}

/* ==========================================
   BUSINESS HOURS
========================================== */

.list-group-item {

    border: none;

    padding: 15px 0;

}

/* ==========================================
   GOOGLE MAP
========================================== */

.ratio {

    border-radius: 20px;

    overflow: hidden;

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

}

/* ==========================================
   FAQ
========================================== */

.accordion-item {

    border: none;

    margin-bottom: 15px;

    border-radius: 12px !important;

    overflow: hidden;

    box-shadow: 0 5px 20px rgba(0, 0, 0, .08);

}

.accordion-button {

    font-weight: 600;

    padding: 18px;

}

.accordion-button:not(.collapsed) {

    background: #0b8734;

    color: #fff;

}

.accordion-button:focus {

    box-shadow: none;

}

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

.btn-warning {

    font-weight: 600;

}

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

footer {

    background: #111;

}

footer h5 {

    margin-bottom: 20px;

    font-weight: 600;

}

footer p,
footer li {

    color: #ccc;

    line-height: 1.8;

}

footer a {

    color: #fff;

    text-decoration: none;

    transition: .3s;

}

footer a:hover {

    color: #ffc107;

}

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

.rounded-circle {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

}

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

@media(max-width:992px) {

    .contact-banner {

        text-align: center;

        padding: 70px 0;

    }

    .contact-banner h1 {

        font-size: 44px;

    }

    .contact-card {

        margin-bottom: 25px;

    }

}

@media(max-width:768px) {

    .contact-banner h1 {

        font-size: 34px;

    }

    .contact-banner p {

        font-size: 16px;

    }

    .contact-card {

        padding: 25px;

    }

    .contact-card .icon {

        width: 65px;

        height: 65px;

        font-size: 28px;

    }

}

@media(max-width:576px) {

    .contact-banner {

        padding: 50px 0;

    }

    .contact-banner h1 {

        font-size: 30px;

    }

    .btn-lg {

        width: 100%;

        margin-bottom: 10px;

    }

}