/* Replace Navbar */

.sc-main-menu>ul>li.current-menu-item a {
    padding: 0;
    width: 100px;
    text-align: center;
}

.sc-main-menu>ul>li.current-menu-item .active {
    color: #12C364;
    background-color: white;
    padding: 5px 10px;
    border-radius: 100px;
}

.sc-main-menu>ul>li.current-menu-item a:hover {
    color: #12C364;
    background-color: white;
    padding: 5px 10px;
    border-radius: 100px;
}

/* Replace Primary Button 2 */

.primary-btn2 {
    background-color: white;
}

.primary-btn2 span {
    color: #12C364;
    position: relative;
    z-index: 2;
}

.primary-btn2::before,
.primary-btn2::after {
    position: absolute;
    top: 50%;
    content: "";
    width: 20px;
    height: 20px;
    background-color: #12C364;
    border-radius: 50%;
    color: #ffffff;
}

.primary-btn2::before {
    left: -20px;
    transform: translate(-50%, -50%);
}

.primary-btn2::after {
    right: -20px;
    transform: translate(50%, -50%);
}

.primary-btn2:hover {
    color: #12C364;
    border: 1px solid white;
}

.primary-btn2:hover::before {
    animation: criss-cross-left 0.8s both;
    animation-direction: alternate;
}

.primary-btn2:hover::after {
    animation: criss-cross-right 0.8s both;
    animation-direction: alternate;
}

.primary-btn2::before,
.primary-btn2::after {
    background-color: #12C364;
}

.primary-btn2:hover span {
    color: white;
}

/* Floating */

.floating {
    position: fixed;
    bottom: 15vh;
    right: 2vh;
    z-index: 9999;
}

/* Responsive */

@media only screen and (max-width: 480px) { 

    .logo-area img {
        width: 20px;
    }

    .sc-header-section .container-fluid  .row {
        display: flex;
        justify-content: space-between;
    }

    .header-btn-area  {
        position: absolute;
        right: 0;
        top: 20px;
    }

    .sc-main-logo  {
        text-align: left !important;
    }
}

body {
    font-family: 'nexa' !important;
}

.text-primary {
    color: #0DB45A !important;
}

.text-justify {
    text-align: justify !important;

}

p {
    font-weight: lighter;
}

h1 {
    height: fit-content;
}

#jumbotron {
    height: 100vh;
}


.banner-shape {
    position: absolute;
    right: 0;
    top: 0;
    width: 40vw;
    height: 100vh;
    background-color: #0DB45A;
    border-radius: 50px 0 0 50px;
}

.banner-shape .hero {
    position: absolute;
    bottom: 0;
    height: 90vh;
    width: 90vw;
    right: 20vh;
    z-index: 10;
}

.banner-shape .arrow {
    width: 5vw;
    position: absolute;
    bottom: 0;
    right: 42vw;
    top: 50vh;
}

.banner-shape .logo {
    width: 15vw;
    position: absolute;
    right: 8vw;
    top: 5vh;
}