#hero-01{
    background-image:url("/assets/images/kamay1.jpg");
    background-position:top;
    background-repeat:no-repeat;
    background-size:cover;
    height: fit-content;
    overflow: hidden;
    padding-top:94px;
    position: relative;
}
#hero-01 .cont-hero{
    position: relative;
    z-index: 2;
}#section-02{
    background-color: #fff;
}

#section-02 .col-custom-left{
    padding-right: 0;
}
#section-02 .col-custom-right{
    padding-left: 5rem;
}
#section-02 hr{
    margin: 2rem 0;
}

#section-03{
    background: rgb(2,2,8);
    background: linear-gradient(0deg, rgba(2,2,8,1) 0%, rgba(27,50,106,1) 100%);
    overflow: hidden;
    position: relative;
}

#section-03 .container{
    position: relative;
    z-index: 2;
}

#section-03:after{
    background-image:url("/assets/images/blur.png");
    background-position: center;
    background-size: cover;
    bottom: 0; 
    content: "";
    display: block;
    display: block;
    opacity: .7;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
}

#section-03 p{
    text-align: center;
}

#section-03 .splide-cards{
    margin-bottom: 5rem;
    margin-top: 3rem;
}

#section-03 .splide .splide__pagination{
    display: none;
}

#section-03 .splide .splide__slide figure{
    background-size: cover;
    border-radius: 2.2rem;
    height: 300px;
    position: relative;
    transition: all .3s ease;
    transform: scale(.8);
}

#section-03 .splide .splide__slide.clone-is-active figure,
#section-03 .splide .splide__slide.is-active figure{
    transform: scale(1);
}

#section-03 .splide .splide__slide figure:before{
    background: linear-gradient(0deg, rgba(2,2,8,1) 0%, rgba(2,2,8,0) 100%);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 2rem;
}

#section-03 .splide .splide__slide figure figcaption{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    padding: 1rem;
    z-index: 2;
}

#section-03 .splide .splide__slide figure figcaption strong{
    display: block;
    margin-bottom: .8rem;
    position: relative;
}

#section-03 .splide .splide__slide figure figcaption span{
    display: block;
    font-size: .9rem;
    position: relative;
    bottom: -1rem;
    opacity: 0;
    visibility: hidden;
    height: 0;
    transition: opacity .3s ease, bottom .3s ease;
}

#section-03 .splide .splide__slide.clone-is-active figure figcaption strong,
#section-03 .splide .splide__slide.is-active figure figcaption strong{
    opacity: 1 !important; 
    transition: all .3s ease;
}

#section-03 .splide .splide__slide.clone-is-active figure figcaption span,
#section-03 .splide .splide__slide.is-active figure figcaption span{
    bottom: 0;
    opacity: 1;
    visibility: visible;
    height: auto;
}

#section-03 .splide .splide__arrows button{
    background: transparent;
    opacity: 1;
    width: 2.5rem;
    height: 2.5rem;
}

#section-03 .splide .splide__arrows button.splide__arrow--prev {
    left: -2rem;
}

#section-03 .splide .splide__arrows button.splide__arrow--next {
    right: -2rem;
}

#section-03 .splide .splide__arrows button svg{
    fill: #fff;
    height: 2.5rem;
    width: 2.5rem;
}

#section-03 .splide .splide__arrows button svg path{
   fill: #fff;
}

#section-04{
    background-color: #fff;
}
#section-04 h2{
    margin-bottom: 5rem;
}
#section-04 .col-portfolio{
    margin-bottom: 2rem;
}
#section-04 .col-portfolio a{
    text-align: center;
    display: block;
}
#section-04 .col-portfolio a .cont-portfolio-figure{
    height: 220px;
    width: 220px;
    border-radius: 90px;
    overflow: hidden;
    margin: auto;
    will-change: transform;
}
#section-04 .col-portfolio a .cont-portfolio-figure figure{
    width: 100%;
    height: 100%;
    transition: transform .6s ease;
}
#section-04 .col-portfolio a:hover .cont-portfolio-figure figure{
    transform: scale(1.1);
}
#section-04 .col-portfolio a img{
    height: 60px;
    margin-top: 2rem;
}
#section-04 figure.portfolio{
    background-position: center;
    background-size: cover;
}

#section-05{
    background-color: #020205;
    background-image: url(/assets/images/newsletterBg.jpg);
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    padding-bottom: 20rem;
}

#section-05 p{
    text-align: center;
    margin-bottom: 3rem;
}

#section-05 form{
    margin-bottom: 1rem;
}

#section-05 form input.has-error{
    border-color: #ff7a7a;
    background-color: rgba(255, 122, 122, .4) !important;
}

#section-05 #response-form{
    line-height: 1.2rem;
    opacity: 0;
    text-transform: uppercase;
    transition: opacity .6s ease;
}

#section-05 #response-form.has-response{
    opacity: 1;
}

#section-05 #response-form span{
    display: block;
    font-weight: 600;
}

#section-05 #response-form span.error{
    color: #ff7a7a;
}

#section-05 #response-form span.success{
    color: #ffffff;
    font-size: 1.4rem;
    line-height: 1.6rem;
}

/*MEDIA*/
@media (max-width: 575.98px){
    #section-05{
        padding-bottom: 5rem;
    }
    #section-05 h2{
        line-height: 1.8rem;    
    }
    #section-05 p{
        line-height: 1.6rem;
    }
    form.single-form fieldset{
        text-align: center;
    }
    form.single-form fieldset input{
        padding-right: 1.4rem;
    }
    form.single-form fieldset button{
        margin-top: 1rem;
        position: initial;
    }
}
@media (max-width: 640px) {
    h1{
        font-size: 1.4rem;
    }
    h1 span{
        padding-bottom: .4rem;
    }
    #section-03 .splide .splide__pagination{
        display: block;
        bottom: -2rem;
        text-align: center;
    }
    
    #section-03 .splide .splide__arrows{
        display: none;
    }
}
@media (max-width: 991.98px) {
    #section-02 .col-custom-left,
    #section-02 .col-custom-right{
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}