/* your styles go here */


/* BODY DEFAULT */
html{
    scroll-behavior: smooth;
}
body {
    font-family: "Roboto", sans-serif !important;
    font-style: normal;
    font-weight: 400;
    overflow-x: hidden;
}

.selector-for-some-widget {
    box-sizing: content-box;
  }

.container, .container-fluid {
    /* max-width: 1610px; */
    position: relative;
}

.white-background {
    background: #FFF;
}

/* FONT STYLE AND SIZES */
h1, h2 {
    font-family: "Oswald", sans-serif !important;
}

.h1, .h2, .h3 {
    font-family: "Oswald", sans-serif !important;
    font-style: normal;
    font-weight: 500;
}

.h1 {
    font-size: 82px;
}

.h2 {
    font-size: 124px;
}

.h3 {
    font-size: 2rem;
}

.h4 {
    font-size: 1.25rem;
}

.h5 {
    font-size: 1rem;
}
.f20 {
    font-size: 20px;
}
.f16 {
    font-size: 16px;
}

.f26 {
    font-size: 26px;
}

.f30 {
    font-size: 30px;
}

.f50 {
    font-size: 50px;
}

.f40 {
    font-size: 40px;
}

.font-light {
    font-weight: 300;
}

.ubuntu {
    font-family: 'Ubuntu', sans-serif;
}


/* LINE HEIGHTS, LETTER SPACING AND FONT WEIGHTS*/
.list-inline-item{
    width: 33px;
}

.lh-1 {
    line-height: 250%;
}

.lh-2 {
    line-height: 150%;
}

.lh-3 {
    line-height: 90%;
}

.lh-100 {
    line-height: 100%;
}

.lh-90 {
    line-height: 90px;
}

.lh-120 {
    line-height: 120%;
}


.ls-1 {
    letter-spacing: 5px;
}

.ls-2 {
    letter-spacing: 1.5px;
}

.ls-3 {
    letter-spacing: 0.95px;
}

.fw-1 {
    font-weight: 700;
}

.fw-2, .h2 {
    font-weight: 300;
}

.medium {
    font-weight: 500;
}

.f31 {
    font-size: 31px;
}
.w500 {
    width: 500px;
}

.mt50 {
    margin-top: 50px;
}


.h2, .mb30 {
    margin-bottom: 30px;
}


.black {
    color: #000;
}

.gray3 {
   color: #7C7C7C
}

.gray2 {
    color: #7996A8
}

#service-1{
    border-right: 3px solid #40515A;
}

#service-2{
    border-left: 3px solid #40515A;
}

#service-3{
    border-right: 3px solid #40515A;
}

.uppercase {
    text-transform: uppercase;
}

/* TEXT COLORS */

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

.text-secondary {
    color: #AFB4BC !important;
}

.text-gray {
    color: #AFB4BC !important;
}

/* MARGINS AND PADDINGS */

.mt-5p {
    margin-top: 5rem !important;
} 
.mt-6 {
    margin-top: 6rem !important;
} 

.mt-8 {
    margin-top: 8rem !important;
}

.mt-10 {
    margin-top: 10rem !important;
}

.pt-10 {
    padding-top: 10rem !important;
}

.pl-8 {
    padding-left: 8rem;
}

.pr-6 {
    padding-right: 6rem !important;
}

.pr-8 {
    padding-right: 8rem;
}

.pl17 {
    padding-left: 17rem;
}

.mb-2, .my-2 {
    margin-bottom: 1rem !important;
}

.mb-5 {
    margin-bottom: 5rem;
}

.mb64 {
    margin-bottom: 64px;
}

/* SECTION BACKGROUNDS */

section {
    height: 100%;
    padding-bottom: 5rem !important;
}

.iframe-map {
    max-width: 100%;
    min-height: 450px;
    height: auto;
}

#home {
    background: url(../img/Vector4.png) no-repeat;
    background-size: 97% 94%;
    padding-bottom: 0rem !important;
}


#home .container-fluid,
#home .row {
    height: 100%;
}

#home img.home-banner {
    margin-top: 16rem;
    margin-left: 9rem;
}


#home img.banner-circle {
    position: absolute;
    right: -10rem;
    top: 4rem;
}

#about {
    background: url(../img/Vector5.jpg) no-repeat;
    background-size: 122% 72%;
    padding-bottom: 0rem !important;
}

#about .vector {
    position: absolute;
    right: -311px;
    top: 186px;
}

#about .about-paragraph {
    width: 844px;
    float: right;
    max-width: 100%;
}

#services {
    background: url(../img/ServicesVector.jpg) no-repeat;
    background-size: auto 100% !important;
    background-position: 0% 100%;
}
#services h2 {
    min-height: 100px;
    margin-bottom: 10px !important;
}

#benefits img {
    margin-top: -12rem;
}


#portfolio, #home, #about, #benefits, #contact, #services, #footer-background {
    color: #7996A8;
    font-size: 24px;
    /* margin-bottom: 5rem; */
    padding-top: 12rem;
    padding-bottom: 10rem;
}

#portfolio .can-explore {
    margin-bottom: 3rem !important;
    margin-left: -2rem;   
}

#portfolio .img-fluid{
    width:8rem;
}

#portfolio  .list-item {
    list-style-image: url(../img/check.png);
    font-size: 24px;
    line-height: 30px;
    color: #7996A8;
    font-family: 'Rubik', sans-serif;
    padding-left: 2rem;
    margin-bottom: 10px;
}

#services .image-sign {
    height: 9rem;
}

#blog {
    background: url(../img/Vector6.jpg) no-repeat;
    background-size: auto 91% !important;
    background-position: 14% 144px;
}

#pages > .container-fluid img {
    margin-top: -215px;
}

#blog .row-flex {
    height: 35rem;
}

#blog .vector {
    position: absolute;
    right: -311px;
    top: 186px;
}

#footer-background {
    background: url(../img/Vector7.jpg) no-repeat;
    background-size: initial;
    background-position: 46% 0 !important;
}

#footer-background .img-fluid {
    text-align: center;
    height: 12rem;
}


footer, .footer-link, #blog h3 {
    color: #40515A;
}

#footer-background .footer-brand > img {
    height: auto;
}

.rubik {
    font-family: 'Rubik', sans-serif;
}

/* NAVBAR  AND BUTTON */

header.header > .navbar-light .navbar-nav .nav-link {
    color: #110239;
}

.navbar {
    padding: 1rem 0rem;
    top: 0 !important;
}

.navbar-default {
    transition: 500ms ease;
    background: transparent;
}

.navbar-default.scrolled {
    box-shadow: 1px 1px 10px grey !important;
    background: #FFFFFF; 
}

.navbar-brand img {
    height: auto;
    width: 480px;
}

.navbar-toggler,
.navbar-toggler:focus {
    outline: none;
    border: 0px;
    box-shadow: none !important;
}

.nav-item {
    cursor: pointer !important;
    text-align: right;
    padding-left: 3rem;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 500;

}
.nav-item > a:hover {
    color: #E0A4AB !important;
}

.nav-link.active {
    color: #E0A4AB !important;
    font-weight: bold;
}


.nav-link {
    font-size: 20px;
    text-transform: uppercase;
    color: #110239;
    font-family: "Oswald", sans-serif !important;
}


.btn-primary {
    font-size: 20px;
    color: #000;
    border-color: transparent;
    border-radius: 50px !important;
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;

    background-image: linear-gradient(to right, #ED2027 0%, #FFF 51%, #FFF 100%);
}

.btn-primary:hover {
    border-color: transparent;
    color: #000;
    background-color: #40515A !important;
    border-radius: 50px !important;
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
    background-position: right center;

}


.btn {
    margin: 10px;
    font-family: 'Oswald', sans-serif;
    font-size: 23px;
    padding: 15px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    border-radius: 10px;
    width: 200px;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    cursor: pointer;
    display: inline-block;
    border-radius: 25px;
    border: none;
    border-color: transparent;
}

.btn-secondary {
    color: #000;
    background-image: linear-gradient(to right, #FFF 0%, #AFB4BC 51%, #AFB4BC 100%)
}

.btn-secondary:hover {
    color: #000;
    background-position: right center;
}

.welcome {
    padding-right: 600px;
    margin: 0;
}

.navbar.active {
    background: #fff;
    padding: 0;
    box-shadow: 0 1px 5px rgb(0 0 0 / 10%);
}

.navbar {
    transition: all 0.3s;
}

.home-paragraph {
    width: 470px;
}


@media only screen and (max-width:320px) {
    #home {
        background-size: 215% 82%;
    }
    #home img.banner-circle {
        right: 0;
    }

    #portfolio, #home, #about, #benefits, #contact, #services {
        height: 100%;
    }

    #portfolio, #home, #about, #benefits, #contact, #services {
        margin-bottom: 6rem !important;
    }

    #home .text-secondary,
    #about .text-secondary,
    #pages .text-secondary,
    #services .text-primary,
    #portfolio .text-primary,
    #blog .col-md-12 .text-primary {
        font-size: 12vw !important;
        letter-spacing: 2px;
    }
    .text-lg-w {
        font-size: 4.5vw !important;
    }

    .display-none, #about .vector, #home img.banner-circle  {
       display: none;
    }

    .navbar {
        padding: 1rem 0rem;
    }

    .navbar-brand img {
        height: auto;
        width: 200px;
    }

    .w500, #about .vector, .home-paragraph, #about .about-paragraph,
    .map   {
        width: 100%;
    }

    .pl-8 {
        padding-left: 1rem;
    }
    .pr-8 {
        padding-right: 1rem;
    }

    .mt-5, .my-5 {
        margin-top: 10px;
    }

    .f30 {
        font-size: 25px;
    }
    
    .lh-90 {
        line-height: 70px;
    }

    .h2 {
        font-size: 50px;
    }

    .nav-item {
        text-align: center;
    }

    .f31 {
        font-size: 18px;
    }

    .h1 {
        font-size: 45px;
    }
    .f40 {
        font-size: 20px;
    }
    .lh-90 {
        line-height: 50px;
    }

    #portfolio, #home, #about, #benefits, #contact, #services {
        font-size: 18px;
    }

    #portfolio, #home, #about, #benefits, #contact, #services {
        margin-bottom: 2rem !important;
        padding-top: 100px;
    }

    #services .image-sign {
        height: 5rem;
    }

    #services img {
        max-width: 21%;
        height: auto;
    }

    #services .services-list {
        margin-bottom: 2rem;
    }

    #footer-background {
        height: 100%;
    }

    #benefits img {
        margin-top: 0;
    }

    .pl-8 {
        padding-left: 1.5rem;
    }

    .pr-6, .pr-8 {
        padding-right: 1.5rem;
    }
 
}

@media only screen and (min-width : 321px) and (max-width:375px) {
    #home {
        background-size: 215% 82%;
    }
    #home img.banner-circle {
        right: 0;
    }
    #benefits img {
        margin-top: 0;
    }
    #portfolio, #home, #about, #benefits, #contact, #services {
        height: 100%;
    }

    #portfolio, #home, #about, #benefits, #contact, #services {
        padding-bottom: 6rem !important;
        padding-top: 6rem;
    }

    #home .text-secondary,
    #about .text-secondary,
    #pages .text-secondary,
    #services .text-primary,
    #portfolio .text-primary,
    #blog .col-md-12 .text-primary {
        font-size: 12vw !important;
        letter-spacing: 2px;
    }
    .text-lg-w {
        font-size: 4.5vw !important;
    }

    .display-none, #about .vector, #home img.banner-circle  {
       display: none;
    }

    .navbar {
        padding: 1rem 0rem;
    }

    .navbar-brand img {
        height: auto;
        width: 225px;
    }

    .w500, #about .vector, .home-paragraph, #about .about-paragraph,
    .map   {
        width: 100%;
    }

    .pl-8 {
        padding-left: 1rem;
    }
    .pr-8 {
        padding-right: 1rem;
    }

    .mt-5, .my-5 {
        margin-top: 10px;
    }

    .f30 {
        font-size: 25px;
    }
    
    .lh-90 {
        line-height: 70px;
    }

    .h2 {
        font-size: 50px;
    }

    .nav-item {
        text-align: center;
        padding: 0;
    }

    .f31 {
        font-size: 18px;
    }

    .h1 {
        font-size: 45px;
    }
    .f40 {
        font-size: 20px;
    }
    .lh-90 {
        line-height: 50px;
    }

    #portfolio, #home, #about, #benefits, #contact, #services {
        font-size: 18px;
    }

    #services .image-sign {
        height: 5rem;
    }

    #services img {
        max-width: 21%;
        height: auto;
    }

    #services .services-list {
        margin-bottom: 2rem;
    }
 
}

@media (min-width: 376px) and (max-width: 575.98px) {
    #blog .row-flex {
        height: 60rem !important;
        padding-bottom: 0rem !important;
    }

    #home {
        background-size: 215% 82%;
    }
    #home img.banner-circle {
        right: 0;
    }

    .text-lg-w {
        font-size: 4.5vw !important;
    }

    .display-none, #about .vector, #home img.banner-circle  {
       display: none;
    }

    .navbar {
        padding: 1rem 0rem;
    }

    .navbar-brand img {
        height: auto;
        width: 325px;
    }


    .w500, #about .vector, .home-paragraph, #about .about-paragraph, #contact iframe {
        width: 100%;
    }

    .pl-8 {
        padding-left: 1rem;
    }
    .pr-8 {
        padding-right: 1rem;
    }

    .mt-5, .my-5 {
        margin-top: 10px;
    }

    .f30 {
        font-size: 25px;
    }
    
    .lh-90 {
        line-height: 70px;
    }

    #portfolio, #about, #benefits, #contact, #services {
        padding-top: 50px;
    }
    

    #portfolio, #home, #about, #benefits, #contact, #services {
        height: 100%;
    }

    #portfolio, #home, #about, #benefits, #contact, #services {
        margin-bottom: 10rem;
        
    }
    .h1 {
        font-size: 57px;
    }
    .f31 {
        font-size: 17px;
    }
    .h2 {
        font-size: 90px;
        line-height: 90px;
    }

    .nav-item {
        text-align: center;
        padding: 0;
    }
    .navbar-brand img {
        height: auto;
        width: 295px;
    }

    #benefits img {
        margin-top: -3rem
    }

    .row {
        margin-left: auto;
        margin-right: auto;
    }
    
    .iframe-map {
        height: 500px;
    }

    .pr-8 {
        padding-right: 1rem !important;
    }

    .pl-8 {
        padding-left: 1rem !important;
    }
    

}


@media (min-width: 576px) and (max-width: 767.98px) {
    #home .text-primary,
    #about .text-primary {
        letter-spacing: 2px;
        padding-top: 2rem;
    }
    #about .vector {
        right: 0;
    }
    #pages {
        background-size: 140% auto !important;
    }
    #pages .col-md-4 {
        text-align: center;
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }
    #home .col-md-7 {
        margin-top: 4rem !important;
        margin-bottom: 4rem !important;
    }
    #home img.home-banner {
        height: auto;
        width: 472px;
    }
    #services {
        background-position: center center;
    }
    #services .col-md-4 .h3 {
        margin-top: 4rem !important;
    }
    #services h2 {
        min-height: 90px;
        margin-bottom: 10px !important;
    }
    #pages .col-md-8,
    #services .col-md-4 .mt-5 {
        margin-top: 2rem !important;
    }
    #services .img-fluid {
        height: 5rem !important
    }

    #services .text-gray{
        text-align: center !important;
        margin-left:1rem !important;
        margin-right: 1rem !important;
        margin-top: 2rem !important;        
    }
    #services .image-sign {
        height: 5rem;
    }
    #services .services-list {
        margin-bottom: 2rem;
    }
    .reverse{
        display: flex;
        flex-direction: column-reverse;
    }

    #service-1, #service-2, #service-3{
        border:none !important;
    }
    #portfolio .col-md-11 {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
    #portfolio,
    #footer-background {
        text-align: center;
    }
    #footer-background .h4,
    #footer-background .col-lg-12 .text-secondary {
        padding-top: 3rem !important;
    }
    #services .mt-5,
    #footer-background .col-md-7 .row .mt-8 {
        margin-top: 0rem !important;
    }

    #footer-background .footer-brand > img, #about .about-paragraph {
        width: 100%;
    }
    #home {
        padding-top: 100px;
    }
    #portfolio, #home, #about, #benefits, #contact, #services {
        height: 100%;
    }


    #benefits img {
        margin-top: -8rem;
    }
    #blog .row-flex {
        height: 30rem;
        padding-bottom: 0rem !important;
    }

    
    #home img.banner-circle {
        display: none;
    }
    .navbar {
        padding: 0;
        top: 0 !important;
    }
    .nav-item {
        text-align: center !important;
        padding-left: 0rem !important;
    }
    .mt-10 {
        margin-top: 3rem !important;
    }

    .h1, .h2 {
        font-size: 6.5rem;
    }
    .lh-1 {
        line-height: 200%;
    }
    
    .pl-8 {
        padding-left: 0;
    }
    .pr-8 {
        padding-right: 0;
    }

    .navbar-brand img {
        width: 280px;
        height: auto !important;
    }

    .iframe-map {
        width: 100%;
        height: 400px;
    }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    
    #home {
        height: 125vh;
    }

    #home img.home-banner {
        width: 75%;
        height: auto;
        margin: 0;
        float: right;
    }

    #home img.banner-circle {
        position: absolute;
        right: 20rem;
        top: 26rem;
    }

    #about .vector {
        right: 0;
        height: 1000px;
    }

    #footer-background .col-lg-12 .text-secondary {
        padding-top: 1rem;
    }
    #footer-background .pt-10 {
        padding-top: 2rem !important;
    }

    .navbar-light .navbar-nav .nav-link {
        color: rgba(0,0,0,.5);
        text-align: center;
    }
    .navbar-brand img {
        width: 480px;
        height: auto !important;
    }
    .nav-item {
        padding-left: 1rem;
        text-align: right;
        font-size: 1.2rem;
    }

    .d-none {
        display: none;
    }
    .mapouter {
        padding: 1rem !important;
        border-radius: 25px !important;
    }

    .pl-8 {
        padding-left: 1.1rem;
    }

    .pr-8 {
        padding-right: 1.1rem;
    }

    .navbar {
        padding: 0rem 0rem;
    }
    
    .h1 {
        font-size: 5rem;
    }

    .f30 {
        font-size: 2rem;
    }

    #about .about-paragraph {
        width: 100%;
    }

    #services h2 {
        min-height: 155px;
        margin-bottom: 10px !important;
    }

    
}

@media(max-width: 1086px){

    .pr-6, .pr-8  {
        padding-right: 2rem;
    }

    .pl-8 {
        padding-left: 2rem;
    }
}

@media (min-width: 992px) and (max-width: 1024.98px) {
  
    #about,
    #pages,
    #services,
    #portfolio,
    #blog {
        height: 100%;
        padding-bottom: 2rem !important;
    }
    #blog {
        text-align: center;
    }
    #blog .col-md-5 .mt-8 {
        padding-top: 3rem !important;
    }
    #blog .img-fluid,
    #blog .ls-3 {
        padding-top: 1rem !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    #blog .mt-4,
    #blog .mt-8 {
        margin-top: 0rem !important;
    }
    #blog .row-flex {
        height: 30rem;
    }
    
    #about .vector{
        right: 0;

    }
    .navbar-brand img {
        width: 380px;
    }

    #footer-background {
        background-size: cover !important;
        background-position: 0% 0% !important;
    }
    
    .pt-10 {
        padding-top: 8rem !important;
    }
    .home-paragraph {
        width: 385px;
    }

    #home img.home-banner {
        margin: 0;
    }

    #home img.home-banner {
        width: 552px;
        height: auto;
        margin-top: 35rem;
    }

    .nav-item {
        padding-left: 1rem;
    }


}

@media (min-width: 1024px) and (max-width: 1255px) {
    #about img {
        margin-bottom: 15rem;
    width: 85%;
    }
    .navbar-brand img {
        width: 440px;
    }
    .nav-item {
        font-size: .8rem !important;
        padding-left: 1.6rem;
    }
    .pl-8{
        padding-left: 1rem;
    }
    .pr-6 {
        padding-right: 3rem !important;
    }
}