.topbar {
    background-color: #51A2D9;
}

.topbar-list {
    list-style-type: none;
    padding: 0;
    float: right;
    margin: 1.5%;
}

.top-list-icon {
    padding-right: 7px;
}

.topbar-list li {
    display: inline-block;
    margin-left: 6px;
}

.topbar-link {
    color: white;
    text-decoration: none;
    font-family: 'Poppins';
    font-size: 14px;
}

.navbar-nav {
    margin-right: 20px;
}

.nav-link {
    color: #51A2D9;
    font-family: 'Poppins';
    font-weight: 500;
    font-size: 14px;
}

.logo {
    width: 70%;
}

.nav-btn {
    background: #4FBA6F;
    padding: 4% 20%;
    border-radius: 100px;
    width: 190px;
    color: white;
    border: none;
    font-size: 14px;
    font-family: 'Poppins';
    transition: .5s;
}

.nav-btn:hover {
    background-color: #101010;
}

.banner-sec {
    background-image: url(images/banner-img.png);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 10% 0;
}

.banner-title {
    text-align: center;
    color: white;
    font-size: 65px;
    font-family: 'Poppins';
    margin-bottom: 4%;
}

.banner-desc {
    color: white;
    text-align: center;
    font-family: 'Poppins';
    font-weight: 400;
}

.carousel-sec {
    padding: 5% 0% 5% 5%;
}

.carousel-head-box {
    display: flex;
}

.carousel-sec-title {
    color: #51A2D9;
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 50px;
}

.carousel-box {
    background-color: #f3f3f3;
    padding: 8%;
    transition: .5s;
}

.carousel-btn {
    background: transparent;
    border: none;
    position: absolute;
    right: 10px;
}

.car-icon {
    width: 30% !important;
}

.carousel-arrow {
    width: 60% !important;
}

.carousel-box-title {
    font-family: 'Poppins';
    font-weight: 300;
    margin-top: 25%;
    font-size: 23px;
}

.carousel-box:hover {
    background-color: #51A2D9;
}

.carousel-box:hover .carousel-box-title {
    color: white;
    font-weight: 600;
}

.hover-icon {
    transform: rotate(-50deg);
}

.carousel-box:hover .hover-icon {
    fill: white;
    font-weight: 600;
}

.owl-nav button {
    border: 1px solid #51A2D9 !important;
    width: 70px;
    height: 70px;
    border-radius: 100px;
    position: relative;
    margin: 0 6px;
}

.owl-nav button span {
    font-size: 46px;
    position: absolute;
    top: -6px;
    left: 26px;
    color: #51A2D9;
}

.owl-carousel .owl-nav {
    position: absolute;
    right: 0;
    top: -130px;
    right: 4%;
}

.buttons-section {
    padding: 1% 0 4%;
}

.detail-btn {
    width: 100%;
    justify-content: space-between;
    display: flex;
    align-items: center;
}

.detail-btn {
    width: 100%;
    justify-content: space-between;
    display: flex;
    align-items: center;
    padding: 1% 4%;
    border: 2px dashed #51a2d945;
    font-family: 'Poppins';
    font-weight: 500;
    transition: .5s;
    margin-bottom: 2%;
}

.detail-btn:hover {
    background-color: #51A2D9;
    color: white;
}

.detail-btn-link {
    text-decoration: none;
}

.btn-arrow {
    width: 10%;
}

.buttons-box {
    padding: 20px 20px 20px 0;
}

.btn-sec-img-box {
    text-align: center;
    padding: 30px;
}

.btn-sec-img {
    width: 95%;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.quote-box {
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    background-color: white;
    padding: 2% 4%;
    width: 60%;
    margin: 0 auto;
    border-left: 1px solid #51A2D9;
    border-right: 1px solid #51A2D9;
    border-bottom: 2px solid #51A2D9;
    border-radius: 4px;
}

.quote-box-desc {
    font-family: 'Poppins';
    font-size: 14px;
    text-align: center;
    margin: 0;
}

.chart-sec {
    padding: 5% 0;
}

.chart-img-box {
    text-align: center;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    border-left: 1px solid #51A2D9;
    border-right: 1px solid #51A2D9;
    border-bottom: 4px solid #51A2D9;
    padding: 5%;
    border-radius: 1%;
}

.chart-title {
    text-align: center;
    color: #51A2D9;
    font-family: 'Poppins';
    font-weight: 500;
    font-size: 50px;
}

.chart-range {
    padding: 10px;
    background: #F6871F;
    width: fit-content;
    text-align: center;
    margin: 20px auto;
    color: white;
    font-family: 'Poppins';
    font-size: 14px;
}

.chart-img {
    width: 70%;
}

.performing-sec {
    padding: 5% 0;
}

.perform-img {
    width: 90%
}

.perform-sec-title {
    font-size: 50px;
    color: #51A2D9;
    font-family: 'Poppins';
}

.perform-sec-subtitle {
    font-family: 'Poppins';
    font-size: 23px;
    margin: 3% 0;
}

.perform-sec-desc {
    font-family: 'Poppins';
    font-size: 15px;
    margin-bottom: 5%;
}

.perform-btn {
    background: #4FBA6F;
    padding: 2% 6%;
    border-radius: 100px;
    color: white;
    border: none;
    font-size: 14px;
    font-family: 'Poppins';
    transition: .5s;
}

.perform-btn:hover {
    background-color: #101010;
}

.call-sec {
    padding: 5% 0 13%;
    background-image: url(images/call-sec-bg.png);
    background-size: cover;
    background-attachment: fixed;
}

.call-sec-title {
    color: white;
    font-family: 'Poppins';
    font-size: 60px;
}

.call-sec-desc {
    color: white;
    font-family: 'Poppins';
    margin-top: 3%;
    width: 50%;
}

.call-sec-desc-2 {
    color: white;
    font-family: 'Poppins';
    margin-top: 60px;
}

.call-sec-btn {
    background: #4FBA6F;
    padding: 1% 3%;
    border-radius: 100px;
    color: white;
    border: none;
    font-size: 14px;
    font-family: 'Poppins';
    transition: .5s;
}

.call-sec-btn:hover {
    background-color: #101010;
}

.ft-section {
    padding: 2% 0;
}

.subscribe-title {
    color: #51A2D9;
    font-family: 'Poppins';
    text-align: center;
    font-size: 45px;
}

.form-box {
    text-align: center !important;
    width: 65%;
    margin: 3% auto 0;
}

::placeholder {
    font-family: 'Poppins';
    font-size: 14px;
}

#inputPassword2 {
    border-radius: 100px;
}

.form-btn {
    background: #4FBA6F;
    padding: 5% 15%;
    border-radius: 100px;
    color: white;
    border: none;
    font-size: 14px;
    font-family: 'Poppins';
    transition: .5s;
}

.subscribe-row {
    padding: 5% 0;
    border-bottom: 1px solid #51A2D9;
    margin-top: -10%;
    background: white;
}

.ft-logo {
    width: 55%;
}

.ft-logo-desc {
    color: #787878;
    font-family: 'Poppins';
    font-size: 13px;
}

.ft-link-box-head {
    color: #51A2D9;
    font-family: 'Poppins';
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6%;
}

.ft-box-links {
    list-style-type: none;
    padding: 0;
}

.ft-box-links li {
    margin-bottom: 5%;
}

.ft-links {
    color: #787878;
    text-decoration: none;
    font-family: 'Poppins';
    font-size: 14px;
    transition: .3s;
}

.ft-links:hover {
    color: #51A2D9;
    font-weight: 600;
}

.links-row {
    padding: 3% 0;
    border-bottom: 1px solid #51A2D9;
    background: white;
}

.ft-bottom-desc {
    color: #787878;
    font-family: 'Poppins';
    font-size: 15px;
}


/*---- MOBILE CSS -----*/
@media only screen and (max-width:576px) {

    .topbar-list {
        text-align: center;
    }

    .navbar-nav {
        margin: 6% 0;
    }

    .nav-btn {
        padding: 3% 5%;
        width: 100%;
    }

    .banner-sec {
        padding: 14% 2%;
    }

    .banner-title {
        font-size: 35px;
    }

    .banner-desc {
        font-size: 14px;
    }

    .carousel-sec {
        padding: 14% 6% 2%;
    }

    .carousel-sec-title {
        font-size: 35px;
        text-align: center;
    }

    .owl-carousel {
        margin-top: 20%;
    }

    .owl-nav button {
        border: 1px solid #51A2D9 !important;
        width: 62px;
        height: 62px;
        margin: 0 6px;
    }

    .owl-nav button span {
        font-size: 46px;
        position: absolute;
        top: -10px;
        left: 23px;
        color: #51A2D9;
    }

    .owl-carousel .owl-nav {
        position: absolute;
        right: 0;
        top: -90px;
        right: 25%;
    }

    .carousel-box {
        position: relative;
    }

    .carousel-btn {
        background: transparent;
        border: none;
        position: absolute;
        right: 40px;
    }

    .buttons-section {
        padding: 1% 3% 4%;
    }

    .detail-btn {
        width: 100%;
        padding: 3% 4%;
    }

    .buttons-box {
        padding: 0;
    }

    .btn-sec-img-box {
        text-align: center;
        padding: 0;
        margin-top: 10%;
    }

    .quote-box {
        padding: 7% 4%;
        width: 100%;
    }

    .chart-sec {
        padding: 10% 3%;
    }

    .chart-title {
        font-size: 35px;
    }

    .chart-img {
        width: 100%;
    }

    .chart-img-box {
        margin-bottom: 10%;
    }

    .performing-sec {
        padding: 0% 6% 10%;
    }

    .perform-row {
        flex-direction: column-reverse;
    }

    .perform-sec-title {
        font-size: 35px;
        text-align: center;
    }

    .perform-sec-subtitle {
        font-size: 19px;
        margin: 7% 0;
        text-align: center;
    }

    .perform-sec-desc {
        font-size: 14px;
        margin-bottom: 5%;
        text-align: center;
    }

    .perform-sec-textbox {
        text-align: center;
        margin-bottom: 10%;
    }

    .perform-img {
        width: 100%;
    }

    .call-sec {
        padding: 15% 4%;
    }

    .call-sec-title {
        font-size: 35px;
        text-align: center;
    }

    .call-sec-desc {
        margin-top: 7%;
        width: 100%;
    }

    .call-sec-textbox {
        text-align: center;
    }

    .call-sec-btn {
        padding: 3% 10%;
    }

    .call-sec-desc-2 {
        margin-top: 30px;
        font-size: 14px;
    }

    .ft-section {
        padding: 5%;
    }

    .subscribe-title {
        font-size: 30px;
        margin-bottom: 7%;
    }

    .subscribe-row {
        padding: 11% 0;
        border-bottom: 1px solid #51A2D9;
        margin-top: -13%;
        background: white;
    }

    .form-box {
        width: 100%;
        margin: 3% auto 0;
    }

    .form-btn {
        padding: 3% 10%;
        margin-top: 5%;
    }

    .ft-logo {
        width: 38%;
    }

    .links-row {
        padding: 3% 0;
        margin-top: 2% !important;
    }

    .ft-logo-desc {
        margin-top: 2%;
    }

    .ft-box-links li {
        margin-bottom: 2%;
    }

    .ft-bottom-desc {
        font-size: 14px;
        text-align: center;
    }


}