body{
    margin: 0;
    padding: 0;
}

/* Navbar */

#navbar .navbar{
    background:transparent;
    transition: 1s;
}
#navbar .navbar.scrolled{
    background: #09ff00 !important;
}

#navbar .vl{
    border-left: 0.8px solid rgb(96, 99, 96);
    height: 50px;
}
#navbar .navbar-brand{
    padding-left: 10%;
    color: #000;
    font-size: 30px;
    font-weight: normal;
}
#navbar .navbar-nav{
    padding-left: 10%;
}
#navbar .nav-item{
    margin-left: 6%;
} 
#navbar .nav-link{
    color: #000;
}
#navbar .navbar .dropdown-menu-end{ 
    right:0; left: auto;  
}
#navbar .navbar .nav-item .dropdown-menu
{  
    display:block; 
    opacity: 0;  
    visibility: hidden; 
    transition:.3s; 
    margin-top:0;  
}
#navbar .navbar .dropdown-menu.fade-down{ 
    top:80%; 
    transform: rotateX(-75deg); 
    transform-origin: 0% 0%;
}
#navbar .navbar .dropdown-menu.fade-up{ 
    top:180%;  
}
#navbar .navbar .nav-item:hover .dropdown-menu{ 
    transition: .3s; 
    opacity:1; 
    visibility:visible; 
    top:100%; 
    transform: rotateX(0deg); 
}

#navbar .social-icon{
    padding-top: 12px;
    padding-left: 27%;
    display: flex;
    list-style: none;
}
#navbar .icon-font{
    padding-left: 28%;
    font-size: 13px;
}
#navbar .vl2{
    margin-left: 26%;
    border-left: 0.8px solid rgb(96, 99, 96);
    height: 20px;
}

@media screen and (max-width: 750px){
    #navbar .navbar{
        background: #09ff00;
    }
    #navbar .vl{
        border-left: 0.8px solid rgb(96, 99, 96);
        height: 50px;
        margin-left: -35%;
    }
    #navbar .nav-bar-icon{
        color: #000;
        font-size: 27px;
    }
    #navbar .navbar-nav{
        padding-left: 0%;
        text-align: center;
    }
    #navbar .nav-item{
        margin-left: 0%;
        padding-top: 10px;
        font-size: 18px;
        font-weight: bolder;
    }
    #navbar .social-icon{
        padding-top: 30px;
        padding-left: 2%;
        display: flex;
        list-style: none;
    }
    #navbar .icon-font{
        padding-left: 8%;
        font-size: 20px;
    }
    #navbar .vl2{
        margin-left: 10%;
        border-left: 0.8px solid rgb(96, 99, 96);
        height: 20px;
    }
}

/* carousel- Slider */

#carousel .carousel-item::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #09ff00a8;
}
#carousel .carousel-caption{
    top: 20%;
    animation: moveup 1s linear;
    transition: ease-in;
}
@keyframes moveup{
    0%{
        transition: 0.1s;
        transform: translateY(260px);
        visibility: visible;
    }
    100%{
        transform: translateY(0px);
        visibility: visible;
    }
}
#carousel .carousel-caption h1{
    font-size: 80px;
    font-weight: 7;
    text-transform: uppercase;
    letter-spacing: -3px;
    color: #000;
}
#carousel .carousel-caption h2{
    font-size: 60px;
    font-weight: 800;
    text-transform: uppercase;
}
#carousel .carousel-caption .button1{
    border: 0.7px solid black;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 20px;
    color: black;
}
#carousel .carousel-caption .button2{
    margin-left: 2%;
    border: 0.7px solid black;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 20px;
    color: black;
    transition: 0.5s;
}
#carousel .carousel-caption .button2:hover{
    border: 0.7px solid rgb(0, 0, 0);
    background-color: chartreuse;
}
#carousel .carousel-control-next-icon{
    padding: 27px;
    transition: 0.8s;
}
#carousel .carousel-control-prev-icon{
    padding: 27px;
    transition: 0.8s;
}
#carousel .carousel-control-next-icon:hover{
    background-color: #3ca300ce;
    border-radius: 25px;
    padding: 27px;
}
#carousel .carousel-control-prev-icon:hover{
    background-color: #3ca300ce;
    border-radius: 25px;
    padding: 27px;
}

@media screen and (max-width: 750px){
    #carousel{
        margin-top: 19%;
    }
    #carousel .carousel-item img{
        height: 410px;
    }
    #carousel .carousel-caption{
        margin-top: -8%;
        animation: moveup 1s linear;
        transition: ease-in;
    }
    #carousel .carousel-caption h1{
        font-size: 30px;
        font-weight: 200;
    }
    #carousel .carousel-caption h2{
        font-size: 30px;
        font-weight: 700;
    }
    #carousel .carousel-caption .button1{
        margin-top: 5%;
    }
    #carousel .carousel-caption .button2{
        margin-top: 5%;
        margin-left: 0%;
    }
}


/* Description */

#desc .heading{
    padding-top: 25%;
    animation: moveleft 0.5s linear;
}
@keyframes moveleft{
    0%{
        transform: translateX(-100px);
        visibility: visible;
    }
    100%{
        transform: translateX(0px);
        visibility: visible;
    }
}
#desc  h1{
    font-size: 80px;
    font-weight: lighter;
    letter-spacing: -1px;
    font-family: sans-serif;
}
#desc .heading h2{
    padding-left: 1%;
    font-size: 50px;
    font-family: sans-serif;
    color: #53ba00; 
    font-weight: 700;
}
#desc .heading p{
    padding-left: 1%;
    font-size: 20px;
}
#desc .bg-img img{
    padding-top: 20%;
    width: 480px;
    margin-left: -26%;
}

@media screen and (max-width: 750px){
    #desc .heading{
        padding-top: 6%;
    }
    #desc  h1{
        font-size: 39px;
    }
    #desc .heading h2{
        padding-left: 1%;
        font-size: 33px;
    }
    #desc .heading p{
        font-size: 22px;
        text-align: justify;
    }
    #desc .bg-img img{
        padding-top: 5%;
        padding-left: 21%;
        width: 454px;
    }
}

/* List of Service */

#list .container{
    margin-top: 5%;
}
#list .heading h1{
    padding-top: 3%;
    font-size: 50px;
    font-weight: 7;
    letter-spacing: -1px;
    line-height: 30px;
}
#list .heading h2{
    font-size: 40px;
    padding-left: 1%;
    font-weight: 600;
    color: #53ba00;
}
#list .heading p{
    padding-left: 1%;
    font-size: 20px;
}
#list .head-icon{
    padding-left: 10%;
    padding-top: 13%;
    text-align: center;
}
#list .head-icon i{
    font-size: 38px;
    color: #53ba00;
}
#list .head-icon h3{
    padding-top: 5%;
    font-size: 20px;
    font-weight: 500;
}
#list .head-icon p{
    font-size: 15px;
}

#list .new-text p{
    padding-top: 10%;
    font-size: 18px;
}

#list .button1{
    margin-top: 7%;
    margin-left: 15%;
    border: 0.7px solid rgb(112, 112, 112);
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 20px;
    color: rgb(255, 255, 255);
    font-weight: 700;
    background-color: #53ba00;
}
#list .button2{
    margin-top: 7%;
    margin-left: 2%;
    border: 0.7px solid rgb(112, 112, 112);
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 20px;
    color: rgb(255, 255, 255);
    font-weight: 700;
    background-color: #53ba00;
}
#list .list-img img{
    padding-left: 18%;
    width: 100%;
}

@media screen and (max-width: 750px) {
    #list .container{
        margin-top: 11%;
    }
    #list .heading h1{
        font-size: 41px;
    }
    #list .heading h2{
        font-size: 33px;
    }
    #list .heading p{
        padding-left: 0%;
        text-align: justify;
    }
    #list .head-icon{
        padding-left: 0%;
        padding-top: 13%;
        text-align: center;
    }
    #list .head-icon p{
        font-size: 15px;
    }
    #list .new-text p{
        padding-left: 5%;
    }
    #list .button1{
        margin-top: 7%;
        margin-left: 21%;  
    }
    #list .button2{
        margin-top: 7%;
        margin-left: 24%;
    }
}

/* brands */

#brand .bgimg{
    width: 100%;
    height: 40%;
    position:relative;
    background-image: url('../img/brandbg.jpg');
    background-size: cover;
}
#brand .heading{
    padding-top: 10%;
    text-align: center;
}
#brand .heading h2{
    font-size: 40px;
    color: #fff;
    font-weight: 7;
}
#brand .heading .color-text{
    color: #a6e72a;
    font-weight: 600;
    font-size: 37px;
}
#brand .heading .col-sm-8{
    padding-top: 2%;
    margin-left: 10%;
}
#brand .heading p{
    padding-left: 20%;
    color: #fff;
    text-align: center;
    font-size: 20px;
}
#brand .brand-image{
    margin-top: 7%;
    padding-bottom: 8%;
}
#brand .brand-image img{
    width: 141px;
}

@media screen and (max-width:750px) {
    #brand{
        margin-top: 13%;
    }
    #brand .heading h2{
        font-size: 36px;
        font-weight: 7;
    }
    #brand .heading .col-sm-8{
        padding-top: 2%;
        margin-left: 0%;
    }
    #brand .heading p{
        margin-left: -20%;
        color: #fff;
        text-align: justify;
        font-size: 20px;
    }
    #brand .brand-image{
        margin-top: 5%;
        margin-left: 17%;
        padding-bottom: 18%;
    }
    #brand .brand-image img{
        margin-top: 26%;
        width: 162px;
    }
}

/* Reviews  */

#review .wrapper_outer{
    height: 100vh;
    overflow: hidden;
}
#review .wrapper{
    height: 100%;
    perspective: 1px;
}
#review .parallax_section{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transform-style: preserve-3d;
}
#review .parallax_bg{
    position: absolute;
    left: 0;
    right: 0;
    background-size: cover;
    background-position: center center;
    z-index: -1;
    min-height: 100%;
    transform: translate3d(0,0,-1px) scale(2);
}
#review .heading{
    margin-top: 3%;
}
#review .heading h2{
    text-align: center;
    font-size: 40px;
    color: rgb(0, 0, 0);
    font-weight: 7;
}
#review .heading .color-text{
    color: #75ac10;
    font-weight: 700;
    font-size: 42px;
}
#review .heading .col-sm-8{
    padding-top: 2%;
    margin-left: 10%;
}
#review .heading p{
    padding-left: 20%;
    color: rgb(0, 0, 0);
    text-align: center;
    font-size: 20px;
}
#review .testimoni{
    margin-top: 10%;
}
#review .slick-next{
    background-color: #137a0f93;
    padding-top: 26px;
    padding-bottom: 41px;
    padding-left: 22px;
    padding-right: 42px;
    border-radius: 32px;
}
#review .slick-prev{
    background-color: #137a0f93;
    padding-top: 26px;
    padding-bottom: 41px;
    padding-left: 22px;
    padding-right: 42px;
    border-radius: 32px;
}
#review .card{
    width: 45rem;
    height: 100%;
    margin-top: 0%;
    background-color: #f1f1f1;
    margin-left: 18%;
    border: none;
} 
#review .circle{
    margin-left: 28%;
    margin-top: 13%;
    width: 124px;
    height: 124px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 70px;
    background: #8CD9EC;
    transition: 1s;
}
#review .circle:hover{
    background: #97CF01;
}
#review img{
    margin-left: 5.4%;
    margin-top: 6%;
    border-radius: 68px;
}
#review .card-title{
    text-align: left;
    font-family: Perpetua;
    font-size: 28px;
    font-weight: bold;
    color: #62676B;
}


@media screen and (max-width: 750px) {
    #review .heading{
        margin-top: 14%;
    }
    #review .heading p{
        margin-left: -30%;
        text-align: justify;
    }
    #review .card{
        width: 24rem;
        height: 100%;
        margin-left: 1%;
    }
    #review .circle{
        margin-left: 32%;
        margin-top: 0%;
    }
    #review .card-body{
        margin-right: 5%;
    }
    #review .card-title{
        text-align: center;
    }
    #review .card-text{
        text-align: justify;
    }
}

/* Our Section = what we stands for */

#stand .heading{
    margin-top: 10%;
}
#stand .heading h2{
    text-align: center;
    font-size: 40px;
    color: rgb(0, 0, 0);
    font-weight: 7;
}
#stand .heading .color-text{
    color: #75ac10;
    font-weight: 700;
    font-size: 42px;
}
#stand hr{
    margin-top: 3%;
}
#stand .icons-text{
    display: flex;
    margin-left: 4%;
    margin-top: 5%;
    padding-bottom: 8%;
}
#stand i{
    padding-top: 25%;
    padding-left: 28%;
    color: #53ba00;
    font-size: 65px;
}
#stand p{
    font-size: 15px;
}
#stand .text{
    padding-left: 4%;
}

@media screen and (max-width: 750px){
    #stand .icons-text{
        display: inline;
    }
    #stand i{
        padding-top: 8%;
        padding-left: 44%;
        font-size: 65px;
    }
    #stand h3{
        padding-top: 3%;
        text-align: center;
    }
    #stand p{
        text-align: center;
    }
}


/* Team */
#team{
    background-color: #f1f1f1;
    margin-top: 4%;
    padding-bottom: 9%;
}
#team .container{
    padding-top: 6%;
    margin-left: 15%;
}
#team .crd1{
    border-radius: 0px;
    max-width: 85%;
    padding: 10px;
}
#team .crd3{
    margin-left: 2%;
}
#team .crd1 img{
    height: 420px;
}
#team .card-body p{
    border-bottom: 2px solid;
    border-color: #53ba00;
}
#team .sml-card{
    border-radius: 0px;
    margin-top: 10%;
    margin-left: 1%;
    padding: 10px;
}
#team .colno-snd{
    margin-left: -6%;
}
#team .heading{
    visibility: hidden;
}
#team .heading1{
    visibility: visible;
    padding-top: 24%;
    padding-left: 29%;
    padding-bottom: 16%;
}

#team h2{
    font-size: 40px;
    font-weight: 700;
    color: #75ac10;
}

@media screen and (max-width: 750px){
    #team .container{
        margin-left: 0%;
    }
    #team .heading{
        visibility: visible;
        padding-top: 24%;
        padding-left: 29%;
        padding-bottom: 16%;
    }
    #team .heading1{
        visibility: hidden;
    }
    #team .crd1{
        max-width: 100%;
    }
    #team .crd3{
        margin-left: 0%;
    }
    #team .crd1 img{
        height: 290px;
    }
    #team .sml-card{
        border-radius: 0px;
        margin-top: 10%;
        margin-left: 1%;
        padding: 10px;
    }
    #team .colno-snd{
        margin-top: -42%;
        margin-left: 0%;
    }
    
}