@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

:root {
    --primary-color: #252B42;
    --secondary-dark-color: #0B0D13;
    --secondary-light-color: #F6AD2C;
    --accent-color-1: #f7f7f7;
    --accent-color-2: #45DDD7;
}

html,
body {
    background-color: #fff;
    font-family: 'Roboto';
}

header .navbar-nav .nav-link.active,
header .nav-item .nav-link {
    font-size: 16px;
    line-height: 17px;
    letter-spacing: 0em;
    padding: 0.5rem 1.5rem;
    text-align: center;
    color: #FFFFFF;
}

.decoration-none {
    text-decoration: none;
}

body {
    font-family: 'Roboto';
}


.no-shadaow {
    box-shadow: none !important;
}

.logo-size {
    width: 60px !important;
}

.btn.btn-main {
    background: var(--secondary-light-color) !important;
    border-radius: 30px !important;
    color: #fff !important;
    font-size: 16px !important;
    user-select: auto !important;
    cursor: pointer;
}

.btn.btn-primary {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    border-radius: 30px !important;
    color: #fff !important;
    font-size: 16px !important;
    user-select: auto !important;
    cursor: pointer;
}


.btn-round {
    border-radius: 50px;
}

.btn-padding {
    padding: .75rem 3rem;
}

#landing-back {
    min-height: 100vh;
    background-image: url(../../img/landing-back.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}


.triangle-left {
    width: 0;
    border-left: 0px solid transparent;
    border-right: 50vw solid transparent;
    border-bottom: 40vh solid #fff;
    position: absolute;
    bottom: 0px;
}

.triangle-right {
    width: 0;
    border-left: 50vw solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 40vh solid #fff;
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.hero-wrapper {
    background-color: #252B42cc;
    height: 100%;
    width: 100%;
    min-height: 100vh;
}

.hero-logo {
    width: 200px;
}

.hero-bottom {
    clip-path: polygon(50% 100%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
    position: absolute;
    bottom: 0px;
    left: 0;
    height: 30vh;
    width: 100%;
    background-color: #fff;
}

.hero-title {
    font-size: 4rem;
}

.section-about {
    background-color: #fff;
}

.section-about .about-img {
    border-radius: 20px;
}

.section-about p {
    color: #2b2b2b;
    font-size: 20px;
    /* line-height: 40px;
    letter-spacing: 0.2px; */
}

.section-about h3 {
    color: #252B42;
    font-size: 48px;
    line-height: 55px;
    letter-spacing: 0.2px;
    font-weight: 400;

}

section.spaces-x {
    padding-left: 60px;
    padding-right: 60px;
}

section.spaces-y {
    padding-top: 120px;
    padding-bottom: 120px;
}

.section-values {
    background-color: #fff;
}

.section-values .values-img {
    border-radius: 20px;
}

.section-values p {
    color: #2b2b2b;
    font-size: 16px;
    line-height: 26px;
}

.section-values h3 {
    color: #252B42;
    font-size: 48px;
    line-height: 55px;
    letter-spacing: 0.2px;
    font-weight: 400;

}

.home-timeline .timeline-step {
    height: 72px;
    width: 72px;
    border-radius: 50px;
    background-color: #F4F5F7;
    color: var(--secondary-light-color);
    font-size: 36px;
}

.home-timeline .timeline-block:not(:last-of-type) {
    margin-bottom: 3rem;
}

.home-timeline .timeline-content {
    margin-left: 5rem;
    top: 0;
}

.section-services {
    background-color: #FFFFFF;
}

.section-services h3 {
    color: #252B42;
    font-size: 48px;
    line-height: 55px;
    letter-spacing: 0.2px;
    font-weight: 400;

}

.section-services .subtitle {
    font-size: 20px;
    line-height: 40px;
}

.service-item i {
    font-size: 32px;
    color: var(--primary-color);
}

.section-fastest {
    background: #ffffff;
}

.section-fastest h3 {
    color: #252B42;
    font-size: 48px;
    line-height: 55px;
    letter-spacing: 0.2px;
    font-weight: 400;
}

.section-fastest p {
    color: #374754;
    font-size: 28px;
    line-height: 40px;
    letter-spacing: 0.2px;
    font-weight: 400;

}

.section-partenaires .partenaires img {
    filter: grayscale(100%);
    transition: ease-in-out .27s;
    border: 1px solid #D8D8D8;
}

.section-partenaires .partenaires img:hover {
    filter: grayscale(0%);
}


.section-partenaires {
    background-color: #fff;
}

.section-partenaires p {
    color: #2b2b2b;
    font-size: 16px;
    line-height: 26px;
}

.section-partenaires h3 {
    color: #252B42;
    font-size: 48px;
    line-height: 55px;
    letter-spacing: 0.2px;
    font-weight: 400;

}

.section-feedback {
    background-color: #fff;
}

.section-feedback h3 {
    color: #252B42;
    font-size: 48px;
    line-height: 55px;
    letter-spacing: 0.2px;
    font-weight: 400;

}

.section-feedback .feedback-item .feedback-image {
    width: 80px;
    height: 80px;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.section-feedback .feedback-item .feedback-image img {
    width: 100%;
    height: auto;
}

.section-feedback .feedback-item .feedback-user {
    color: #374754;
    font-size: 16px;
}

.section-feedback .feedback-item .feedback-content {
    color: #374754;
    font-size: 28px;
}

.section-feedback .nav-slider {
    color: var(--secondary-light-color);
    font-size: 44px;
}

.section-article .more-articles {
    height: 100%;
}

.section-article .more-articles .article-item:not(:last-of-type) {
    margin-bottom: 25px;
}

.section-article .article-item img {
    border-radius: 10px;
}

.section-article .article-item h4 {
    font-size: 20px;
    color: var(--secondary-dark-color);
}

.section-article .more-articles .article-item h5 {
    font-size: 20px;
    color: var(--secondary-dark-color);
}

.section-article .article-item p {
    font-size: 16px;
    color: #64607D;
}

.section-contact .contact-card {
    border: 1px solid #DDDDDD;
    box-shadow: 0px 13px 19px rgba(0, 0, 0, 0.07);
}

.section-contact .contact-card input {
    background: #F5F5F5;
    border: 1px solid #E8E8E8;
    color: #18171D;
    border-radius: 50px !important;
}

.section-contact .contact-card textarea {
    background: #F5F5F5;
    border: 1px solid #E8E8E8;
    color: #18171D;
}

.section-contact .contact-card textarea::placeholder,
.section-contact .contact-card input::placeholder {
    color: #18171D;
}

.section-contact .contact-details i {
    color: var(--primary-color);
    font-size: 26px;
}

.section-contact .contact-social i {
    color: var(--primary-color);
    font-size: 32px;
}


.section-contact .heading p {
    color: #2b2b2b;
    font-size: 28px;
    line-height: 40px;
    letter-spacing: 0.2px;
}

.section-contact .heading h3 {
    color: #252B42;
    font-size: 48px;
    line-height: 55px;
    letter-spacing: 0.2px;
    font-weight: 400;

}

footer {
    background: var(--primary-color);
    color: #ffffff;
}

footer h4 {
    color: #ffffff;
}

.newsletter-control {
    border-radius: 50px !important;
    color: #0B0D13;
}

.newsletter-control::placeholder {
    color: #0B0D13;
}


header.scrolled{
    background-color: var(--primary-color);
}


.navbar-collapse.fade:not(.show){
    opacity: 1;
        
}
@media only screen and (min-width: 768px) {

    .show-mobile {
        display: none !important;
    }

    .show-desktop {
        display: block !important;
    }

    .hero-title {
        font-size: 4rem;
    }

}

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

    .show-mobile {
        display: block !important;
    }

    .show-desktop {
        display: none !important;
    }

    header{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }

    .hero-wrapper{
        padding-top: 90px;
    }

    .hero-logo {
        width: 160px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-bottom {
        height: 15vh;
    }

    section.spaces-y {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    section.spaces-x {
        padding-left: 15px;
        padding-right: 15px;
    }

    .section-contact .heading h3,
    .section-feedback h3,
    .section-partenaires h3,
    .section-fastest h3,
    .section-services h3,
    .section-values h3,
    .section-about h3 {
        font-size: 32px;
        text-align: center;
    }

    .section-contact .heading p,
    .section-feedback p,
    .section-partenaires p,
    .section-fastest p,
    .section-services p,
    .section-values p,
    .section-about p {
        font-size: 22px;
        text-align: center;
    }
    
    .section-values .timeline-content p{
        text-align: left;
        font-size: 18px;
    }

    .section-services .subtitle{
        font-size: 22px;
    }

    .section-services .service-item:not(:last-of-type){
        margin-bottom: 20px;
    }

    .section-services .service-item p{
        font-size: 18px;
    }

    .section-feedback .feedback-item .feedback-content{
        font-size: 20px;
        padding: 0px 15px;
    }

    .section-article .more-articles{
        margin-top: 20px
    }

    .section-article h3{
        font-size: 32px;
        text-align: center;
    }

    header .navbar-collapse{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100vh;
        z-index: 9999;
        background: var(--primary-color);
        padding: 60px 20px;
    }
    header .navbar-collapse .navbar-collapse-close{
        position: absolute;
        top: 15px;
        right: 20px;
        color: #fff;
        font-size: 26px;
        background-color: transparent;
        border: none;
        outline: none;
    }

}