/*--------------------------------------------------------------
# General Styling & Shared Classes - Mobile Specific
--------------------------------------------------------------*/
@media (max-width: 767px) {
    /* Disable aos animation delay on mobile devices */
    [data-aos-delay] {
      transition-delay: 0 !important;
    }
  
    /* Adjustments for sections on mobile */
    section,
    .section {
      scroll-margin-top: 58px;
    }
    li.btnquote {
      display: none;
    }
    i.mobile-nav-toggle.d-xl-none.bi.bi-x::before
    {
        position: absolute;
        top: -47px;
        right: -12px;
        border: 1px solid;
    }
      body.index-page.mobile-nav-active .navmenu li {
        width: 80%;
        margin: auto;
        margin-bottom: 13px;
    }
    i.icon-right {
      display: block;
    }
    i.icon-left {
      display: none !important;
    }
    a.navnav.btn001.btn-get-started.abtnquote {
      display: block;
      position: absolute;
      right: 1%;
    }
    .col-lg-3 {
      width: 100%;
    }
  }
  
  /*--------------------------------------------------------------
  # Navigation Menu - Mobile Specific
  --------------------------------------------------------------*/
  @media (max-width: 1199px) { /* This rule from original main.css also applies to tablets, so it's duplicated in tablet.css if needed for subtle differences */
    .mobile-nav-toggle {
      color: var(--nav-color);
      font-size: 28px;
      line-height: 0;
      margin-right: 10px;
      cursor: pointer;
      transition: color 0.3s;
    }
  
    .navmenu {
      padding: 0;
      z-index: 9997;
    }
  
    .navmenu ul {
      display: none;
      list-style: none;
      position: absolute;
      inset: 60px 20px 20px 20px;
      padding: 10px 0;
      margin: 0;
      border-radius: 6px;
      background-color: var(--nav-mobile-background-color);
      overflow-y: auto;
      transition: 0.3s;
      z-index: 9998;
      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    }
  
    .navmenu a,
    .navmenu a:focus {
      color: var(--nav-dropdown-color);
      padding: 10px 20px;
      font-family: var(--nav-font);
      font-size: 17px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: space-between;
      white-space: nowrap;
      transition: 0.3s;
    }
  
    .navmenu a i,
    .navmenu a:focus i {
      font-size: 12px;
      line-height: 0;
      margin-left: 5px;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: 0.3s;
      background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    }
  
    .navmenu a i:hover,
    .navmenu a:focus i:hover {
      background-color: var(--accent-color);
      color: var(--contrast-color);
    }
  

  
  
    .navmenu .dropdown ul {
      position: static;
      display: none;
      z-index: 99;
      padding: 10px 0;
      margin: 10px 20px;
      background-color: var(--nav-dropdown-background-color);
      border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
      box-shadow: none;
      transition: all 0.5s ease-in-out;
    }
  
    .navmenu .dropdown ul ul {
      background-color: rgba(33, 37, 41, 0.1);
    }
  
    .navmenu .dropdown>.dropdown-active {
      display: block;
      background-color: rgba(33, 37, 41, 0.03);
    }
  
    .mobile-nav-active {
      overflow: hidden;
    }
  
    .mobile-nav-active .mobile-nav-toggle {
      color: #fff;
      position: absolute;
      font-size: 32px;
      top: 15px;
      right: 15px;
      margin-right: 0;
      z-index: 9999;
    }
  
    .mobile-nav-active .navmenu {
      position: fixed;
      overflow: hidden;
      inset: 0;
      background: rgba(33, 37, 41, 0.8);
      transition: 0.3s;
    }
  
    .mobile-nav-active .navmenu>ul {
      display: block;
    }
    li.btnquote {
      display: none;
    }
    i.mobile-nav-toggle.d-xl-none.bi.bi-x::before
    {
        position: absolute;
        top: -47px;
        right: -12px;
        border: 1px solid;
    }
      body.index-page.mobile-nav-active .navmenu li {
        width: 80%;
        margin: auto;
        margin-bottom: 13px;
    }
    i.icon-right {
      display: block;
    }
    i.icon-left {
      display: none !important;
    }
    a.navnav.btn001.btn-get-started.abtnquote {
      display: block;
      position: absolute;
      right: 1%;
    }
    .col-lg-3 {
      width: 100%;
    }
  }
  
  /*--------------------------------------------------------------
  # Hero Section - Mobile Specific
  --------------------------------------------------------------*/
  @media (max-width: 640px) {
    .hero h1 {
      font-size: 28px;
      line-height: 36px;
    }
  
    .hero p {
      font-size: 18px;
      line-height: 24px;
      margin-bottom: 30px;
    }
  
    .hero .btn-get-started,
    .hero .btn-watch-video {
      font-size: 13px;
    }
    li.btnquote {
      display: none;
    }
    i.mobile-nav-toggle.d-xl-none.bi.bi-x::before
    {
        position: absolute;
        top: -47px;
        right: -12px;
        border: 1px solid;
    }
      body.index-page.mobile-nav-active .navmenu li {
        width: 80%;
        margin: auto;
        margin-bottom: 13px;
    }
    i.icon-right {
      display: block;
    }
    i.icon-left {
      display: none !important;
    }
    a.navnav.btn001.btn-get-started.abtnquote {
      display: block;
      position: absolute;
      right: 1%;
    }
    .col-lg-3 {
      width: 100%;
    }
  }
  
  /*--------------------------------------------------------------
  # Features Section - Mobile Specific
  --------------------------------------------------------------*/
  @media (max-width: 640px) {
    .features .features-item+.features-item {
      margin-top: 40px;
    }
    li.btnquote {
      display: none;
    }
    i.mobile-nav-toggle.d-xl-none.bi.bi-x::before
    {
        position: absolute;
        top: -47px;
        right: -12px;
        border: 1px solid;
    }
      body.index-page.mobile-nav-active .navmenu li {
        width: 80%;
        margin: auto;
        margin-bottom: 13px;
    }
    i.icon-right {
      display: block;
    }
    i.icon-left {
      display: none !important;
    }
    a.navnav.btn001.btn-get-started.abtnquote {
      display: block;
      position: absolute;
      right: 1%;
    }
    .col-lg-3 {
      width: 100%;
    }
  }
  
  /*--------------------------------------------------------------
  # Portfolio Section - Mobile Specific
  --------------------------------------------------------------*/
  @media (max-width: 575px) {
    .portfolio .portfolio-filters li {
      font-size: 14px;
      margin: 0 5px;
    }
    li.btnquote {
      display: none;
    }
    i.mobile-nav-toggle.d-xl-none.bi.bi-x::before
    {
        position: absolute;
        top: -47px;
        right: -12px;
        border: 1px solid;
    }
      body.index-page.mobile-nav-active .navmenu li {
        width: 80%;
        margin: auto;
        margin-bottom: 13px;
    }
    i.icon-right {
      display: block;
    }
    i.icon-left {
      display: none !important;
    }
    a.navnav.btn001.btn-get-started.abtnquote {
      display: block;
      position: absolute;
      right: 1%;
    }
    .col-lg-3 {
      width: 100%;
    }
  }
  
  /*--------------------------------------------------------------
  # Clients Section - Mobile Specific
  --------------------------------------------------------------*/
  @media (max-width: 640px) {
    .clients .client-logo img {
      padding: 30px;
      max-width: 50%;
    }
    li.btnquote {
      display: none;
    }
    i.mobile-nav-toggle.d-xl-none.bi.bi-x::before
    {
        position: absolute;
        top: -47px;
        right: -12px;
        border: 1px solid;
    }
      body.index-page.mobile-nav-active .navmenu li {
        width: 80%;
        margin: auto;
        margin-bottom: 13px;
    }
    i.icon-right {
      display: block;
    }
    i.icon-left {
      display: none !important;
    }
    a.navnav.btn001.btn-get-started.abtnquote {
      display: none;
      position: absolute;
      right: 1%;
    }
    .col-lg-3 {
      width: 100%;
    }
  }