/* Do not delete the following files */
@import url('page-loading.css');
@import url('scroll-to-top.css');
@import url('templateExtras.css');

:root {
    --header-height: 3rem;
  
    /*========== Colors ==========*/
    --hue: 174;
    --sat: 63%;
    --first-color: hsl(var(--hue), var(--sat), 40%);
    --first-color-alt: hsl(var(--hue), var(--sat), 36%);
    --title-color: #fff;;
    --text-color: hsl(var(--hue), 8%, 35%);
    --body-color: hsl(var(--hue), 100%, 99%);
    --container-color: #6366f1;
  
    /*========== Font and typography ==========*/
    --body-font: 'Open Sans', sans-serif;
    --h1-font-size: 1.5rem;
    --normal-font-size: .938rem;
    --tiny-font-size: .625rem;
  
    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
  }
  
  @media screen and (min-width: 968px) {
    :root {
      --h1-font-size: 2.25rem;
      --normal-font-size: 1rem;
    }
  }
/*=============== HEADER ===============*/
.mobile-app-menu-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--container-color);
    z-index: var(--z-fixed);
    transition: .4s;
    list-style: none !important;
  }
  
  /*=============== NAV ===============*/
  .mobile-app-menu-header .nav {
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .mobile-app-menu-header .nav__img {
    width: 32px;
    border-radius: 50%;
  }
  
  .mobile-app-menu-header .nav__logo {
    color: var(--title-color);
    font-weight: 600;
    padding: 10px;
  }
  
  @media screen and (max-width: 767px) {
    .mobile-app-menu-header .nav__menu {
      position: fixed;
      bottom: 0;
      left: 0;
      background-color: var(--container-color);
      box-shadow: 0 -1px 12px hsla(var(--hue), var(--sat), 15%, 0.15);
      width: 100%;
      height: 4rem;
      padding: 0 1rem;
      display: grid;
      align-content: center;
      border-radius: 1.25rem 1.25rem 0 0;
      transition: .4s;
    }
  }
  .mobile-app-menu-header .nav__item {
    list-style: none;
    margin:5px;
  }

  .mobile-app-menu-header .nav__list {
    /* margin: 5px 0 0 0; */
  }

  .mobile-app-menu-header .nav__list, 
  .mobile-app-menu-header .nav__link {
    display: flex;
  }
  
  .mobile-app-menu-header .nav__link {
    flex-direction: column;
    align-items: center;
    row-gap: 4px;
    color: var(--title-color);
    font-weight: 600;
  }
  
  .mobile-app-menu-header .nav__list {
    margin: 5px 5px 0 -10px;
    justify-content: space-around;
  }
  
  .mobile-app-menu-header .nav__name {
    font-size: var(--tiny-font-size);
    /* display: none;*/ /* Minimalist design, hidden labels */
  }
  
  .mobile-app-menu-header .nav__icon {
    font-size: 1.5rem;
  }
  
  /*Active link*/
  .mobile-app-menu-header .active-link {
    position: relative;
    
    font-weight: bold;
    transition: .3s;
  }
  
  /* Minimalist design, active link */
  /* .active-link::before{
    content: '';
    position: absolute;
    bottom: -.5rem;
    width: 4px;
    height: 4px;
    background-color: var(--first-color);
    border-radius: 50%;
  } */
  
  /* Change background header */
  .mobile-app-menu-header .scroll-header {
    box-shadow: 0 1px 12px hsla(var(--hue), var(--sat), 15%, 0.15);
  }
  
  /*=============== MEDIA QUERIES ===============*/
  /* For small devices */
  /* Remove if you choose, the minimalist design */
  @media screen and (max-width: 320px) {
    .mobile-app-menu-header .nav__name {
      display: none;
    }
  }
  
  /* For medium devices */
  @media screen and (min-width: 576px) {
    .mobile-app-menu-header .nav__list {
      justify-content: center;
      column-gap: 3rem;
    }
  }
  
  @media screen and (min-width: 767px) {
    .mobile-app-menu-header .section {
      padding: 7rem 0 2rem;
    }
    .mobile-app-menu-header .nav {
      height: calc(var(--header-height) + 1.5rem); /* 4.5rem */
    }
    .mobile-app-menu-header .nav__img {
      display: none;
    }
    .mobile-app-menu-header .nav__icon {
      display: none;
    }
    .mobile-app-menu-header .nav__name {
      font-size: var(--normal-font-size);
      /* display: block; */ /* Minimalist design, visible labels */
    }
    .mobile-app-menu-header .nav__link:hover {
      color: var(--first-color);
    }
  
    /* First design, remove if you choose the minimalist design */
    .mobile-app-menu-header  .active-link::before {
      content: '';
      position: absolute;
      bottom: -.75rem;
      width: 4px;
      height: 4px;
      background-color: var(--first-color);
      border-radius: 50%;
    }
  
    /* Minimalist design */
    /* .active-link::before{
        bottom: -.75rem;
    } */
  }
  
  /* For large devices */
  @media screen and (min-width: 1024px) {
    .mobile-app-menu-header .container {
      margin-left: auto;
      margin-right: auto;
    }
  }
  

#navigation-list li,
#navigation-list p,
#navigation-list ul {
   margin: 0;
   padding: 0;
}

#navigation-list ul {
   list-style: none;
}

#navigation-list aside {
   display: block;
}

a {
   color: #485fc7;
   cursor: pointer;
   text-decoration: none;
}

#navigation-list a:hover {
   color: #363636;
}

#navigation-list .menu {
   font-size: 1rem;
}

#navigation-list .menu-list {
   line-height: 1.25;
}

#navigation-list .menu-list a {
   border-radius: 2px;
   color: #4a4a4a;
   display: block;
   padding: .5em .75em;
}

#navigation-list .menu-list a:hover {
   background-color: #f5f5f5;
   color: #363636;
}

#navigation-list .menu-list a.is-active {
   /* background-color: #6366f1; */
   font-weight:bold;
   color: #6366f1;
}

#navigation-list .menu-list li ul {
   border-left: 1px solid #dbdbdb;
   margin: .75em;
   padding-left: .75em;
}

#navigation-list .menu-label {
   color: #7a7a7a;
   font-size: .75em;
   letter-spacing: .1em;
   text-transform: uppercase;
}

#navigation-list .menu-label:not(:first-child) {
   margin-top: 1em;
}

#navigation-list .menu-label:not(:last-child) {
   margin-bottom: 1em;
}

.device-xs .website-list-card {
  display: grid !important
}
.device-xs .website-list-card .btn {
  margin-bottom:10px;
}

.device-sm .website-list-card {
  display: grid !important
}
.device-sm .website-list-card .btn {
  margin-bottom:10px;
}

.device-md .website-list-card {
  display: grid !important
}
.device-md .website-list-card .btn {
  margin-bottom:10px;
}