/* --- FONTS --- */
body {
  font-family:'Poppins', sans-serif;
}

h1 {
  font-family:'Poppins', sans-serif;
  font-weight: 600;
}
h2 {
  font-family:'Poppins', sans-serif;
  font-weight: 500;
}
h3 {
  font-family:'Poppins', sans-serif;
  font-weight: 500;
}
p {
  font-family:'Poppins', sans-serif;
  margin:0;
}
a {
  color:#000;
  text-decoration:none;
  transition: 0.2s ease-in-out;
}
a:hover {
  transition: 0.2s ease-in-out;
  color:#1D566E;
}

/* --- FONT WEIGHT --- */
.fw-500 {
  font-weight:500;
}
.fw-600 {
  font-weight:600;
}

/* --- COLORS --- */
.color-lb {
  color:#21ABA5;
}
.color-db {
  color:#164153;
}
.color-white {
  color:#fff;
}

/* --- MAX WIDTH --- */
.mw-460 {
  max-width:460px;
  width:100%;
}
.mw-615 {
  max-width:615px;
  width:100%;
}

/* --- MARGIN -- */
.m-0 {
  margin:0;
}

/* --- PADDING --- */
.pt-0 {
  padding-top:0;
}
.pb-0 {
  padding-bottom:0;
}

/* --- POSITIONING --- */
.pr {
  position:relative;
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  background: #F9F9F9;
}
::-webkit-scrollbar-thumb {
  background:#2AB2A9;
}
::-webkit-scrollbar-thumb:hover {
  background:#6AEFCF;
}

/* --- BUTTONS --- */
.button-main {
  background: transparent linear-gradient(86deg, #4DBCB7 0%, #6AEFCF 100%) no-repeat padding-box;
  border:none;
  color:#fff;
  padding:10px 52px;
  border-radius: 22px;
  box-shadow: 0 5px 10px #00000029;
  margin-top:15px;
  margin-bottom:15px;
}


/* ARROW DOWN */
.arrow-down {
  text-align:center;
  font-size:2rem;
}
.arrow-dow .bi::before {
  font-weight:600 !important;
}

/* --- NAV BAR --- */
.nav-item {
  color:#000;
  font-weight:500;
  margin-right:40px;
}
.navbar-brand {
  font-size:2.5rem;
}
.nav-container {
  padding:1% 12.5%;
}
.navbar-nav {
  margin:auto;
}
.nav-background {
  width:1475px;
  background:#f2f2f2;
  height:480px;
  position: absolute;
  z-index: -1;
  right:0;
  top:-92px;
  border-radius: 0 0 0 100%;
  opacity:0.5;
}

/* --- IMAGES --- */
.tablet-top {
  width:100%;
  padding-top:40px;
}
.laptop-panel {
  width:100%;
}

/* --- SECTION CONTAINERS --- */
.sec-container {
  padding:50px 12.5% 50px 12.5%;
}
.arrow-container {
  padding:0 12.5% 0 12.5%;
}

/* --- SECTION 1 - Summary of service --- */


/* --- SECTION 2 - Additional information --- */
#section-2 {
  background:url('img/background/section-2-bg.svg') no-repeat;
  background-size:cover;
}
.sec-2-right-col {
  max-width: 600px;
}
.sec-2-col-right h2 {
  color:#fff;
}

/* --- SECTION 3 - Framework --- */
#section-3 {
  background:url('img/background/section-3-1-bg.svg') no-repeat;
  background-size:cover;
}
.framework-services {
  margin-top:50px;
}
.framework-img {
  width:100%;
  height:139px;
  max-width:137.15px;
  margin-bottom:20px;
}
.framework-content {
  max-width:350px;
  margin:auto;
}

/* --- SECTION 4 - Control Panel --- */
#section-4 {
  background:url('img/background/section-4-bg.svg') no-repeat;
  background-size:cover;
}

/* --- SECTION 5 - Using FleetyFly --- */
#section-5 {
  background:url('img/background/section-5-bg.svg') no-repeat;
  background-size:cover;
}

/* --- SECTION 6 - Follow us --- */
#section-6 {
  background:url('img/background/section-6.svg') no-repeat;
  background-size:cover;
  height:300px;
  color:#1D566E;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* --- SECTION 7 - Follow us --- */
#section-7 {
  background:url('img/background/section-7.svg') no-repeat;
  height:300px;
  background-size:cover;
  background-color:#F6F6F6;
  color:#fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.social-media {
  padding-left:5px;
  position: relative;
  top: -7px;
}
.social-media a {
  padding-left:15px;
  padding-right:15px;
}
.subscribe .form-control {
  border:0;
  border-radius:30px;
  outline:none;
}
.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.to-top {
  padding:0;
  margin:0;
  width:50px;
  height:50px;
  border-radius:30px;
}
.to-top .bi-chevron-up {
  font-size:1.6em;
  font-weight:600;
}

/* --- --- --- MEDIA QUERIES - BOOTSTRAP BREAKPOINTS --- --- --- */
/* Extra small devices (390px) and up */
@media only screen and (min-width: 390px) {
  /* FONTS */
  .logo-home {
    font-size:1.875rem;
  }
  h1 {
    font-size: 1.8125rem;
  }
  h2 {
    font-size:1.4375rem;
  }
  h3 {
    font-size: 1.4375rem;
  }
  p {
    font-size: 1rem;
  }

  /* --- SECTION CONTAINERS --- */
  .sec-container {
    padding:50px 5% 50px 5%;
  }

  /* --- SECTION 1 - Summary of service --- */
  .tablet-top {
    max-width:240px;
    padding-top:40px;
  }

  /* --- SECTION 2 - Additional information --- */
  #section-2 {
    padding-top:185px;
    padding-bottom:195px;
    margin-top:-38px;
  }

  /* --- SECTION 3 - Framework --- */
  #section-3 {
    padding-top:280px;
    margin-top:-300px;
  }
  .scooter-top {
    max-width:240px;
    position: absolute;
    top:-290px;
    right:0px;
  }
  .framework-img {
    max-width:90px;
  }

  /* --- SECTION 4 - Control Panel --- */
  #section-4 {
    padding-top:420px;
    margin-top:-271px;
    padding-bottom:150px;
  }
  .laptop-panel {
    max-width:300px;
  }

  /* --- SECTION 5 - Using FleetyFly --- */
  #section-5 {
    padding-top:330px;
    margin-top:-342px;
  }

  /* --- SECTION 6 - Follow us --- */
  #section-6 {
    padding-top:0;
    margin-top:0;
    position: relative;
  }
  .scooter-bottom {
    max-width:180px;
    position: relative;
    top:-51px;
  }
}

/*Small devices (landscape phones, 576px) and up */
@media only screen and (min-width: 576px) {
  /* --- SECTION 2 - Additional information --- */
  #section-2 {
    padding-top:240px;
    padding-bottom:350px;
    margin-top:-68px;
  }

  /* --- SECTION 3 - Framework --- */
  #section-3 {
    padding-top:280px;
    margin-top:-420px;
  }
  .framework-img {
    max-width:unset;
  }

  /* --- SECTION 4 - Control Panel --- */
  #section-4 {
    padding-top:300px;
    margin-top:-180px;
    padding-bottom:150px;
  }
  .laptop-panel {
    max-width:400px;
  }

  /* --- SECTION 6 - Follow us --- */
  #section-6 {
    padding-top:100px;
    margin-top:-130px;
    position: relative;
  }
}

/* Medium devices (tablets, 768px lower) */
@media only screen and (max-width: 768px) {
  /* ADDITIONS up to 768px only */
  .content-sm-center {
    text-align:center;
  }
  .d-none-sm {
    display:none;
  }
  .d-block-sm {
    display:block;
  }
  .small-heading {
    font-size:1rem;
  }

  /* --- SECTION 2 - Additional information --- */
  #section-2 {
    background:url('img/background/section-2-small-bg.svg') no-repeat;
    background-size:cover;
  }

  /* --- SECTION 3 - Framework --- */
  #section-3 {
    background:url('img/background/section-3-small-bg.svg') no-repeat;
    background-size:cover;
  }
  .framework-img {
    height:100px;
    }
  .framework-services {
    margin-top:0;
  }
  .service {
    margin-top:60px;
  }

  /* --- SECTION 4 - Control Panel --- */
  #section-4 {
    background:url('img/background/section-4-small-bg.svg') no-repeat;
    background-size:cover;
  }
  .laptop-panel {
    padding:20px 0 40px 0;
  }
  .cp-list {
    margin-bottom:60px;
  }
  .uf-list {
    margin-bottom:60px;
  }

  /* --- SECTION 5 - Using FleetyFly --- */
  #section-5 {
    background:url('img/background/section-5-small-bg.svg') no-repeat;
    background-size:cover;
  }
  .heading-sec-5 {
    margin-bottom:60px;
    text-align:center;
  }
  .bi-check-square {
    font-size:1.7rem;
  }

  /* --- SECTION 6 - Follow us --- */
  #section-6 {
    background:url('img/background/section-6-small-bg.svg') no-repeat;
    background-size:cover;
    text-align:center;
    height:unset;
  }
  .subscribe input {
    margin: 30px 0 30px 0;
    box-shadow: 0 3px 6px #00000029;
    text-align:center;
  }
  .subscribe {
    margin-bottom:80px;
  }
  .scooter-bottom {
    transform:rotate(352deg);
  }

  /* --- SECTION 7 - Footer --- */
  #section-7 {
    background:url('img/background/section-7-small-bg.svg') no-repeat;
    background-size:cover;
    background-color:#F6F6F6;
    position:relative;
  }
  .social-media {
    margin:20px 0 60px 0;
  }
  .to-top {
    position:absolute;
    top:50px;
    left:45%;
  }
  .nav-button .nav-link {
    padding-left:0;
  }

}

/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) {

  /* --- SECTION 1 - Summary of service --- */
  .tablet-top {
    max-width:320px;
  }
   .sec-1-left-col {
     max-width:unset;
   }

  /* --- SECTION 2 - Additional information --- */
  #section-2 {
    padding-top:295px;
    padding-bottom:290px;
    margin-top:-106px;
  }
  .scooter-top {
    max-width:320px;
    position: absolute;
    top:-364px;
    right:0;
  }
  /* --- SECTION 4 - Control Panel --- */
  .laptop-panel {
    max-width:400px;
  }

  /* --- SECTION 6 - Follow us --- */
  #section-6 {
    padding-top:460px;
    margin-top:-200px;
    position: relative;
  }
  .scooter-bottom {
    max-width:180px;
    position: absolute;
    top:-510px;
    right:255px;
  }
  .social-media img {
    max-width:30px;
  }

  /* --- SECTION 7 - Footer --- */
  #section-7 {
    height:360px;
  }
  .subscribe input {
    max-width:400px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* Large devices (desktops, 992px and up)*/
@media only screen and (min-width: 992px) {
  /* --- FONTS --- */
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.3rem;
  }
  .logo-home {
    font-size:2.3rem;
  }

  /* --- NAV BUTTON --- */
  .button-main-sm {
    background: transparent linear-gradient(86deg, #4DBCB7 0%, #6AEFCF 100%) no-repeat padding-box;
    border:none;
    color:#fff;
    padding:7px 48px;
    border-radius: 22px;
    box-shadow: 0 5px 10px #00000029;
    margin:0;
  }

  /* --- NAV CONTAINER --- */
  .nav-container {
    padding:1% 6%;
  }
  .sec-1-left-col {
    max-width: 600px;
  }

  /* --- SECTION CONTAINERS --- */
  .sec-container {
    padding:50px 5% 50px 5%;
  }

  /* --- SECTION 1 - Summary of service --- */
  #section-1 {
    margin-top:50px;
  }
  .tablet-top {
    max-width:300px;
    padding-top:0;
  }

  /* --- SECTION 2 - Additional information --- */
  #section-2 {
    padding-top:250px;
    padding-bottom:350px;
    margin-top:-110px;
  }
  .scooter-top {
    max-width:300px;
    position: absolute;
    top:-400px;
    right:-33px;
  }

  /* --- SECTION 3 - Framework --- */
  #section-3 {
    padding-top:480px;
    margin-top:-700px;
  }

  /* --- SECTION 4 - Control Panel --- */
  #section-4 {
    padding-top:350px;
    padding-bottom:400px;
    margin-top:-270px;
  }
  .sec-4-col-right {
    margin-top:80px;
  }
  .bullet-list {
    padding-bottom:25px;
  }

  /* --- SECTION 5 - Using FleetyFly --- */
  #section-5 {
    padding-top:187px;
    margin-top:-435px;
  }
  .bi-check-square {
    font-size:2.375rem;
  }
  .check {
    padding-bottom:25px;
  }
  .sec-5-col-left {
    margin-top:80px;
  }

  /* --- SECTION 6 - Follow us --- */
  #section-6 {
    padding-top:unset;;
    margin-top:unset;
    position: unset;
  }
  .scooter-bottom {
    max-width:332px;
    position: absolute;
    top:-564px;
    right:0;
  }

  /* --- SECTION 7 - Footer --- */
  #section-7 {
    height:300px;
    background-position: 50%;
  }
}

/*Extra large devices (large desktops, 1200px and up)*/
@media only screen and (min-width: 1200px) {
  /* --- CONTAINERS --- */
  .container {
    max-width:1380px;
  }
  .container-nav {
    max-width:1440px;
    margin: auto;
  }

  /* --- NAV CONTAINER --- */
  .nav-container {
    padding:1% 12.5%;
  }

  /* --- FONTS --- */
  h1 {
    font-size: 3rem;
  }
  h2 {
    font-size: 2.1875rem;
  }
  h3 {
    font-size: 1.5625rem;
  }
  .logo-home {
    font-size:2.3rem;
  }

  /* --- SECTION CONTAINERS --- */
  .sec-container {
    padding:50px 5% 50px 5%;
  }

  /* --- SECTION 1 - Summary of service --- */
  .tablet-top {
    max-width:380px;
    margin:auto;
  }
  .sec-1-left-col {
    padding-top: 50px;
  }

  /* --- SECTION 2 - Additional information --- */
  #section-2 {
    padding-top:280px;
    padding-bottom:350px;
    margin-top:-110px;
  }
  .scooter-top {
    max-width:400px;
    position: absolute;
    top:-470px;
    right:-55px;
  }

  /* --- SECTION 3 - Framework --- */
  #section-3 {
    padding-top:500px;
    margin-top:-700px;
  }

  /* --- SECTION 4 - Control Panel --- */
  #section-4 {
    padding-top:300px;
    padding-bottom:400px;
    margin-top:-100px;
  }
  .laptop-panel {
    max-width:615px;
  }

  /* --- SECTION 5 - Using FleetyFly --- */
  #section-5 {
    padding-top:300px;
    margin-top:-400px;
  }

  /* --- SECTION 6 - Follow us --- */
  .scooter-bottom {
    max-width:450px;
    position: absolute;
    top:-713px;
    right:-10px;
  }

  /* --- SECTION 7 - Footer --- */
  .subscribe {
    margin-top:30px;
    width:100%;
    padding:10px 14px;
    background:#fff;
    border-radius:30px;
    box-shadow: 0 3px 6px #00000029;
  }
}

/*Extra large devices (large desktops, 1400px and up)*/
@media only screen and (min-width: 1400px) {
  /* --- SECTION CONTAINERS --- */
  .sec-container {
    padding:50px 12.5% 50px 12.5%;
  }
  /* --- SECTION 1 - Summary of service --- */
  .arrow-one {
    position:relative;
    top:20px;
  }
  .tablet-top {
    max-width:420px;
    margin:auto;
  }
  /* --- SECTION 2 - Additional information --- */
  #section-2 {
    padding-top:247px;
    padding-bottom:375px;
    margin-top:-110px;
  }
  .scooter-top {
    max-width:400px;
    position: absolute;
    top:-430px;
    right:-125px;
  }
}

/*Extra large devices (large desktops, 1920px and up)*/
@media only screen and (min-width: 1920px) {
  /* --- SECTION 1 - Summary of service --- */
  .arrow-one {
    position:relative;
    top:50px;
  }
  .tablet-top {
    max-width:460px;
    margin:auto;
  }
  .sec-1-left-col {
    padding-top: 90px;
  }

  /* --- SECTION 2 - Additional information --- */
  #section-2 {
    padding-top:350px;
    padding-bottom:350px;
    margin-top:-110px;
  }
  .scooter-top {
    max-width:460px;
    position: absolute;
    top:-584px;
    right:-74px;
  }
}