body {
    margin     : 0px;
    position   : relative;
    padding    : 0px;
    box-sizing : border-box;
    font-family: Poppins, sans-serif;
    background : linear-gradient(rgb(0, 0, 0) 0%, rgb(8, 100, 137) 48.44%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
    color      : rgb(255, 255, 255);
}

.wrapper {
    position: relative;
}

header .navbar {
    transition: all .2s;
}

header .navbar.dark {
    background: #03202b;
}

.navbar-toggler {
    border-color: #FFF;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-link {
    font-size     : 1.1rem !important;
    color         : #FFF !important;
    text-transform: uppercase;
    font-weight   : 600;
    letter-spacing: 2px;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.2rem;
    padding-left : 1.2rem;
}

.hero {
    position       : relative;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    height         : 100vh;
    width          : 100%;
}

.hero__title {
    margin-bottom: 5rem;
}

.hero__title p {
    color         : rgb(255, 255, 255);
    margin        : 0px;
    text-transform: uppercase;
    font-size     : 3rem;
    text-align    : center;
    font-weight   : bold;
    z-index       : 999;
}

.hero__description p {
    color      : rgb(255, 255, 255);
    margin     : 0px;
    font-size  : 2rem;
    font-weight: bold;
    text-align : center;
}

.hero__description .btn-info {
    z-index         : 99999;
    color           : rgb(255, 255, 255);
    text-decoration : none;
    text-transform  : uppercase;
    font-weight     : 500;
    border-radius   : 50px;
    background-color: rgb(40, 182, 246);
    padding         : 8px 40px;
    letter-spacing  : 2px;
    border          : none;
    margin-top      : 40px;
}

.hero__description .btn-info:focus {
    box-shadow: none;
    outline   : none;
}


.hero canvas {
    display: block;
}

.hero #particles-js {
    position: absolute;
    width   : 100%;
    height  : 100vh;
    left    : 0px;
    top     : 0px;
    z-index : -1;
}


.services__background {
    background-image   : url('../images/background_service.png');
    background-position: center center;
    background-repeat  : no-repeat;
    background-size    : cover;
}

.services {
    display          : flex;
    -webkit-box-pack : center;
    justify-content  : center;
    -webkit-box-align: center;
    align-items      : center;
    flex-direction   : column;
    padding          : 80px 0;
}

.services__title h1 {
    font-size    : 4rem;
    font-weight  : 600;
    margin-bottom: 3rem;
}

.services__wrapper {
    display          : flex;
    -webkit-box-pack : center;
    justify-content  : center;
    -webkit-box-align: center;
    align-items      : center;
    flex-wrap        : wrap;
    gap              : 50px;
    max-width        : 1600px;
    width            : 100%;
}

.service__card {
    width        : 300px;
    height       : 350px;
    margin-bottom: 30px;
    position     : relative;
    cursor       : pointer;
}

.card-bg-wrapper {
    display   : block;
    overflow  : hidden;
    position  : absolute;
    top       : 0;
    left      : 0;
    bottom    : 0;
    right     : 0;
    box-sizing: border-box;
    margin    : 0;
}

.card-background {
    width        : 100%;
    height       : 100%;
    border-radius: 20px;
    transition   : all 0.3s ease 0s;
    opacity      : 0.5;
}

.service__card:hover .card-background {
    filter: blur(3px);
}


.card-title {
    opacity    : 1;
    position   : absolute;
    right      : 10%;
    margin-top : 100px;
    bottom     : 18%;
    text-align : center;
    font-weight: 600;
    font-size  : 25px;
}


.service__card:hover .card-title {
    animation  : 0.5s ease 0s 1 normal none running animation_title;
    transform  : translateY(-50%);
    position   : sticky;
    transition : all 0.5s ease 0s;
    text-align : center;
    font-weight: 500;
    font-size  : 25px;
}

.card-description {
    opacity    : 0;
    transform  : translateY(-10%);
    transition : all 0.5s ease 0s;
    text-align : center;
    line-height: 25px;
    font-weight: 400;
    font-size  : 18px;
}

.service__card:hover .card-description {
    opacity  : 1;
    transform: translateY(0px);
}

.icon-img {
    overflow  : hidden;
    box-sizing: border-box;
    display   : inline-block;
    position  : relative;
    width     : 50px;
    height    : 50px;
}

.card-icon {
    opacity          : 1;
    transform        : translateX(-10%);
    transition       : all 0.5s ease 0s;
    display          : flex;
    -webkit-box-pack : center;
    justify-content  : center;
    -webkit-box-align: center;
    align-items      : center;
    position         : absolute;
    border-radius    : 50px;
    bottom           : -10%;
    left             : 10%;
    background-color : rgb(40, 182, 246);
    box-shadow       : rgb(40 182 246) -1px -1px 20px;
    padding          : 20px;
}


.card-icon img {
    position  : absolute;
    top       : 0;
    left      : 0;
    bottom    : 0;
    right     : 0;
    box-sizing: border-box;
    padding   : 0;
    border    : none;
    margin    : auto;
    display   : block;
    width     : 0;
    height    : 0;
    min-width : 100%;
    max-width : 100%;
    min-height: 100%;
    max-height: 100%;
    object-fit: contain;
}


.clients__footer {
    display          : flex;
    -webkit-box-pack : center;
    justify-content  : center;
    -webkit-box-align: center;
    align-items      : center;
    flex-direction   : column;
    margin           : 40px auto;
}

.clients__footer .btn-clients {
    text-decoration : none;
    border-radius   : 20px;
    background-color: rgb(255, 255, 255);
    padding         : 8px 20px;
    color           : rgb(0, 0, 0);
    filter          : drop-shadow(rgba(60, 190, 243, 0.25) 0px 4px 4px);
}

.clients__footer h3 {
    text-transform: uppercase;
    font-weight   : 700;
    font-size     : 27px;
}


.portfolio {
    background-image   : url('../images/background_portfolio.png');
    background-position: center top;
    background-size    : 100% 50%;
    background-repeat  : no-repeat;
    overflow           : hidden;
    display            : flex;
    -webkit-box-pack   : center;
    justify-content    : center;
    -webkit-box-align  : center;
    align-items        : center;
    flex-direction     : column;
    padding-top        : 50px;
    padding-bottom     : 50px;
}

.portfolio__title h1 {
    font-weight   : 600;
    text-transform: uppercase;
    font-size     : 50px;
    margin-bottom : 30px;
}

.portfolio__wrapper {
    position  : relative;
    padding   : 1rem 0;
    max-width : 1200px;
    max-height: 800px;
    width     : 100%;
    margin    : auto;
}

.slide-container {
    width  : 100%;
    display: inline-block;
}

.slide__line1 {
    padding         : 15px;
    display         : flex;
    -webkit-box-pack: justify;
    justify-content : space-between;
    align-items     : flex-start;
    gap             : 20px;
}

.slide__line2 {
    transform       : translateY(-40%);
    display         : flex;
    -webkit-box-pack: justify;
    justify-content : space-between;
    align-items     : flex-end;
    padding         : 15px;
}

.slide_col_1,
.slide_col_2 {
    max-width: 50%;
}

.slide__title {
    font-weight   : 600;
    margin        : 0px;
    padding       : 0px;
    text-transform: uppercase;
    font-size     : 35px;
}

.slide__service {
    font-weight   : 600;
    text-transform: initial;
    font-size     : 25px;
}

.slide__description {
    font-size    : 20px;
    margin-bottom: 0px;
    font-weight  : 300;
    margin-top   : 40px;
    padding      : 0px;
}

.slide-image-wrapper {
    display   : inline-block;
    max-width : 100%;
    overflow  : hidden;
    position  : relative;
    box-sizing: border-box;
    margin    : 0;
    padding   : 0 1rem;
}

.slide__image {
    width : 100%;
    height: 100%;
}

.slide__video iframe {
    border-radius: 15px;
}

.slide__social {
    display         : flex;
    -webkit-box-pack: end;
    justify-content : flex-end;
    align-items     : flex-end;
    flex-direction  : column;
}

.slide__author {
    font-weight: 600;
    font-size  : 20px;
}

.slide__medias {
    display          : flex;
    -webkit-box-pack : center;
    justify-content  : center;
    -webkit-box-align: center;
    align-items      : center;
    gap              : 15px;
}

.slide__medias a {
    color          : rgb(255, 255, 255);
    text-decoration: none;
}


.about {
    display          : flex;
    -webkit-box-pack : center;
    justify-content  : center;
    -webkit-box-align: center;
    align-items      : center;
    flex-direction   : column;
    margin           : 50px 0px;
    background-image : url('../images/background_about.png');
    background-repeat: no-repeat;
    background-size  : 100% 100%;
}

.about__title {
    margin: 50px 0;
}

.about__title h1 {
    font-weight   : 600;
    text-transform: uppercase;
    font-size     : 50px;
}

.about__wrapper {
    display         : flex;
    -webkit-box-pack: center;
    justify-content : center;
    align-items     : end;
    flex-wrap       : wrap;
    gap             : 20px;
    max-width       : 1200px;
}

.about__textarea {
    max-width: 50%;
}

.about__textarea p {
    margin     : 0px;
    font-weight: 300;
    font-size  : 20px;
}

.about__video iframe {
    border-radius: 20px;
}

.about__image img {
    max-width: 75%;
}

.contact {
    display          : flex;
    -webkit-box-pack : center;
    justify-content  : center;
    -webkit-box-align: center;
    align-items      : center;
    max-width        : 1200px;
    margin           : 80px auto;
}

.contact__image {
    position: relative;
}

.contact__description {
    display          : flex;
    -webkit-box-pack : center;
    justify-content  : center;
    -webkit-box-align: center;
    align-items      : center;
    flex-direction   : column;
}

.contact__description p {
    text-transform: uppercase;
    font-size     : 35px;
    font-weight   : 700;
    text-align    : center;
    margin        : 0px;
    letter-spacing: 2px;
}

.contact__title {
    font-weight: 600;
    font-size  : 37px;
    color      : #28b6f6;
}

.contact__description a {
    margin-top      : 40px;
    text-transform  : uppercase;
    font-weight     : 600;
    border-radius   : 50px;
    background-color: rgb(40, 182, 246);
    filter          : drop-shadow(rgba(60, 190, 243, 0.5) 0px 4px 4px);
    color           : rgb(255, 255, 255);
    padding         : 8px 20px;
    text-decoration : none;
}

@keyframe sanimation_title {
    0% {
        opacity  : 0;
        transform: translateY(0px);
    }

    ,
    100% {
        opacity  : 1;
        transform: translateY(-50%);
    }
}

.about__textarea p {
    margin-bottom: 1rem;
}

.slick-slider .slick-prev,
.slick-slider .slick-next {
    transform: scale(2);
}


@media (max-width: 800px) {

    header .navbar {
        background: #03202b;
    }

    .navbar-brand img {
        max-width: 70%;
    }

    .hero__title p {
        font-size: 1.5rem;
    }

    .hero__description p {
        font-size: 1.3rem;
    }

    .services__title h1 {
        font-size: 2rem;
    }

    .clients__footer h3 {
        text-align   : center;
        font-size    : 1.2rem;
        margin-bottom: 1rem;
    }

    .portfolio__title h1 {
        font-size: 2rem;
    }

    .slide_col_1,
    .slide_col_2 {
        max-width: 100%;
    }

    .slide__line1 {
        flex-direction: column-reverse;
    }

    .slick-prev {
        left: 10px;
    }

    .slick-next {
        right: 10px;
    }

    .slide__description {
        padding: 0px 2rem;
    }

    .about__title h1 {
        font-size: 2rem;
    }

    .about__textarea {
        max-width: 100%;
        padding  : 0px 1.3rem;
    }

    .contact__description {
        padding: 0 1rem;
    }

    .contact__description p {
        font-size: 1.2rem;
    }
}