/* ===================================================================
 *  01. webfonts and iconfonts - (_document-setup)
 *
 * ------------------------------------------------------------------- */
    
    @import url("./fonts.css");
    /* =============================================================== */
    /* iocn Color :  #39b54a; */
    /* background-color: #39b54a;
    border-color: #39b54a; */
    /* =============================================================== */
    
    body {
        color: #767676;
        background-color: white;
        font-size: 18px;
        line-height: 1.875;
    }
    
    a {
        color: #39b54a;
        text-decoration: none;
        background-color: transparent;
    }
    
    a:hover {
        color: #39b54a;
    }
    
    .mt-100 {
        padding-top: 100px;
    }
    
    .mb-100 {
        padding-bottom: 100px;
    }
    
    .mx-100 {
        padding: 0 100px;
    }
    
    .my-100 {
        padding: 100px 0;
    }
    
    .mt-150 {
        padding-top: 150px;
    }
    
    .mb-150 {
        padding-bottom: 150px;
    }
    
    .mx-150 {
        padding: 0 150px;
    }
    
    .my-150 {
        padding: 150px 0;
    }
    
    .pt-100 {
        padding-top: 100px;
    }
    
    .pb-100 {
        padding-bottom: 100px;
    }
    
    .px-100 {
        padding: 0 100px;
    }
    
    .py-100 {
        padding: 100px 0;
    }
    
    .pt-150 {
        padding-top: 150px;
    }
    
    .pb-150 {
        padding-bottom: 150px;
    }
    
    .px-150 {
        padding: 0 150px;
    }
    
    .py-150 {
        padding: 150px 0;
    }
    
    .section-block {
        padding: 60px 0;
    }
    /* ====================================================================== */
    
    .hero-banner {
        background-color: #39b54a;
        padding: 200px 0px;
        height: 100%;
        background-color: #08AEEA;
        background-image: url("../img/banner/hero-bg.jpg");
        background-position: center center;
        background-size: cover;
    }
    
    .hero-banner__content {
        z-index: 99;
        color: aliceblue;
    }
    
    .hero-banner__content h1 {
        font-size: 60px;
    }
    /*====  NavBar dropdown-men   =================================================*/
    
    @media (min-width: 992px) {
        .navbar-expand-lg .navbar-nav .nav-link {
            padding-right: 1rem;
            padding-left: 1rem;
        }
    }
    
    .navbar-dark .navbar-nav .active>.nav-link {
        color: #40e857;
    }
    
    .custom-dropdown .dropdown-menu {
        width: 650px;
        left: -100px;
        background-color: #f8f9fa;
        padding: 0px;
    }
    
    .custom-dropdown .dropdown-menu .dropdown-item {
        color: #6d6e71;
        letter-spacing: 0.8px;
        font-family: 'Montserrat', sans-serif;
    }
    
    .custom-dropdown .dropdown-menu .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #39b54a;
    }
    
    .custom-dropdown .dropdown-menu h6 {
        color: #39b54a;
        font-family: 'Montserrat', sans-serif;
    }
    
    @media(max-width: 767px) {
        .custom-dropdown .dropdown-menu {
            width: 320px;
            height: 350px;
            overflow: auto;
        }
    }
    /*=====================================================*/
    
    .carousel-item img {
        height: 800px;
        width: 100%;
    }
    
    .carousel-caption {
        position: absolute;
        right: 15%;
        top: 30%;
        left: 15%;
    }
    
    .carousel-caption h1 {
        font-weight: 700;
        margin-bottom: 20px;
        margin-top: 0;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #fff;
        font-size: 54px;
        line-height: 50px;
        color: #fff;
    }
    
    .carousel-caption p {
        max-width: 700px;
        margin: auto;
        font-size: 24px;
        line-height: 30px;
        font-weight: 100;
        color: white;
    }
    
    @media(max-width: 1029px) {
        .carousel-item img {
            height: 600px;
            width: 100%;
        }
        .carousel-caption h1 {
            font-weight: 700;
            text-transform: uppercase;
            color: #fff;
            font-size: 32px;
            color: #fff;
        }
    }
    
    @media(max-width: 767px) {
        .carousel-item img {
            height: 600px;
            width: 100%;
        }
        .carousel-caption h1 {
            font-weight: 700;
            text-transform: uppercase;
            color: #fff;
            font-size: 34px;
            color: #fff;
        }
        .carousel-caption p {
            max-width: 600px;
            margin: auto;
            font-size: 18px;
            font-weight: 100;
            color: white;
        }
    }
    
    @media(max-width: 576px) {
        .carousel-caption h1 {
            font-weight: 700;
            text-transform: uppercase;
            color: #fff;
            font-size: 26px;
            color: #fff;
        }
        .carousel-caption p {
            max-width: 600px;
            margin: auto;
            font-size: 18px;
            font-weight: 100;
            line-height: 30px;
            color: white;
        }
    }
    /* ============================================================= */
    
    .about-title {
        color: #151515;
        font-family: "montserrat-regular", sans-serif;
        line-height: 2;
    }
    
    .about-title::after {
        display: block;
        content: "";
        height: 2px;
        width: 70px;
        background-color: #39b54a;
        left: 0;
        bottom: 0;
    }
    
    @media screen and (max-width: 767px) {
        .about-title {
            text-align: center;
        }
        .about-title::after {
            margin: auto;
        }
        .about-info {
            font-weight: 400;
            font-size: 20px;
            padding: 15px 15px;
        }
    }
    
    .about-info {
        font-weight: 400;
        font-size: 20px;
    }
    
    h2.section-intro__title {
        font-family: "montserrat-regular", sans-serif;
        color: #151515;
        position: relative;
        padding-bottom: 2.6rem;
        text-align: center;
        line-height: 2;
    }
    
    h2.section-intro__title::after {
        display: block;
        content: "";
        height: 2px;
        width: 70px;
        background-color: #39b54a;
        left: 0;
        bottom: 0;
        margin: auto;
    }
    /* ============================================== */
    
    .start-btn {
        background-color: transparent;
        color: whitesmoke;
        border: 2px solid #e7e7e7;
    }
    
    .start-btn:hover {
        background-color: #e7e7e7;
    }
    /* ============================================== */
    
    .card-services {
        border: 1px solid white;
    }
    
    @media screen and (max-width: 767px) {
        .card-services {
            text-align: center;
        }
    }
    
    .card-services:hover {
        /* box-shadow: 0px 10px 20px 0px rgba(53, 125, 213, 0.16); */
        box-shadow: 0px 10px 20px 0px rgba(117, 203, 129, 0.21);
        border: 1px solid #39b54a;
    }
    
    .card-services h5 {
        font-family: "montserrat-regular", sans-serif;
        color: #151515;
        font-style: normal;
        color: #151515;
    }
    /* ========================================== */
    
    .footer-section {
        padding: 170px 15px 120px 15px;
        background: #ebebeb;
    }
    
    footer {
        color: whitesmoke;
        padding: 24px 15px;
        /* background-color: #dee2e6; */
        background-color: #141515;
        margin: auto;
    }
    
    footer .nav a {
        color: rgba(255, 255, 255, 0.48);
    }
    
    footer .nav a:hover {
        color: whitesmoke;
    }