.cairo-<uniquifier> {
  font-family: "Cairo", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
}
/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

.waterimage {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 4.5rem);
  background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("../img/water/w19.jpeg");
    background-position-x: 0%, 0%;
    background-position-y: 0%, 0%;
    background-repeat: repeat, repeat;
    background-attachment: scroll, scroll;
    background-size: auto, auto;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}
.waterimage2 {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 4.5rem);
  background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("../img/water/w12.jpeg");
    background-position-x: 0%, 0%;
    background-position-y: 0%, 0%;
    background-repeat: repeat, repeat;
    background-attachment: scroll, scroll;
    background-size: auto, auto;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}

body {
  font-family: "Cairo", sans-serif;
  font-weight: 400;
  line-height: 28px;
  color: #6a6a6a !important;
  font-size: 14px;
  background-color: #eff2f1;
}
.tranzitzone-logo {
  max-width: 120px;
  width: 100%;
}

.transit-project {
  color: #198754;
  font-weight: 700;
  font-size: 14px;
  padding: 6px 18px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease-out;
  border: solid #3b5d50 2px;
}
.transit-project:hover {
  background-color: #3b5d50;
  border: solid #3b5d50 2px;
  color: #fff;
}
.offcanvas-header button{
  background-color: #fff;
  border: 0;
  box-shadow: none;
  outline: none;
}
.navbar-toggler, .bi-x-lg{
  border: 0;
  font-size: 2rem;
}
.navbar-toggler:focus, .bi-x-lg{
  box-shadow: none;
  outline: none;
}

.nav-link {
  color: #666777;
  font-weight: 700;
  position: relative;
}
.nav-link:hover, .nav-link.active{
  color: #154839;
}

@media (min-width: 991px) {
  .nav-link::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #198754;
    visibility: hidden;
    transition: 0.3s ease-in-out;

    }
    .nav-link:hover::before, .nav-link.active::before{
      width: 100%;
      visibility: visible;
    }
    .dropdown>.dropdown-menu, .dropend>.dropdown-menu{
      visibility: hidden;
      opacity: 0;
      to: 100%;
      display: block;
      transition: all 0.1s ease-out;
    }
    .dropdown:hover>.dropdown-menu, .dropend:hover>.dropdown-menu{

        display: block;
        visibility: visible;
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }
    .dropend>.dropdown-menu{
      position: absolute;
      top: 0;
      right: 100%;
    }

}
.dropdown>.dropdown-menu li a:hover, .dropdown>.dropdown-menu li a.active{
  background-color: #00CC99;
  border-radius: 8px;
}


/* Filter image */
.box-menu{
}
.box-menu ul{
  text-align: center;
  padding: 0;
  margin: 0;
  list-style: none;
}
.box-menu ul li{
  color: #6a6a6a;
  text-transform: uppercase;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  background-color: #FFF;
  padding: 8px 16px;
  display: inline-block;
  border: 2px solid #FFF;
  margin: 0 4px;
}
.box-menu ul li.mixitup-control-active{
  background-color: #fff;
  color: #000;
  border: 2px solid #3b5d50;
}
.tgreen{background-color: #154839;}
.text-transit{text-color: #154839;}
/* Hero stats */
.ve-hero-stats { display:flex; align-items:center; gap:24px; }
.ve-stat strong { display:block; font-size:28px; color:#fff; font-family:'Nunito',sans-serif; font-weight:900; }
.ve-stat span { font-size:12px; color:rgba(fff,fff,fff,fff.5); text-transform:uppercase; letter-spacing:1px; }
.ve-stat-divider { width:1px; height:40px; background:rgba(fff,fff,fff,fff.15); }/* Hero right */
.transitborser{
  border-bottom: 2px solid #154839;
}
.fw-semibold{
  font-weight: 600;
}

.feature-1-wrap {
  position: relative; }

.feature-1 {
  padding: 30px;
  background: rgba(26, 55, 77, 0.05);
  border-radius: 20px;
  min-height: calc(50% - 15px);
  top: 0;
  margin-bottom: 30px !important; }
  @media (max-width: 991.98px) {
    .feature-1 {
      display: block !important; } }
      @media (max-width: 991.98px) {
        .counter-wrap {
          margin-bottom: 30px; } }

      .counter-wrap .caption {
        color: #1A374D;
        font-weight: bold; }

      .counter-wrap .counter {
        font-size: 3rem; }
        .counter-wrap .counter span {
          color: #1A374D; }
        @media (max-width: 991.98px) {
          .counter-wrap .counter {
            font-size: 2.5rem; } }
            .quick-contact-item [class*="bi-"] {
              font-size: 2rem;
              display: inline-block;
              width: 80px;
              height: 80px;
              -webkit-box-flex: 0;
              -ms-flex: 0 0 80px;
              flex: 0 0 80px;
              margin-right: 30px;
              border-radius: 50%;
              border: 2px solid #f8f9fa;
              text-align: center;
              position: relative; }
              .quick-contact-item [class*="bi-"]:before {
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%); }

            .quick-contact-item .text {
              font-size: 20px; }


              /*

              TemplateMo 584 Pod Talk

              https://templatemo.com/tm-584-pod-talk

              */



              /*---------------------------------------
                CUSTOM PROPERTIES ( VARIABLES )
              -----------------------------------------*/
              :root {
                --white-color:                  #ffffff;
                --primary-color:                #3b5d50; /* #00CC99; */
                --secondary-color:              #0066CC;
                --section-bg-color:             #f0f8ff;
                --custom-btn-bg-color:          #0066CC;
                --custom-btn-bg-hover-color:    #00CC99;
                --dark-color:                   #000000;
                --p-color:                      #717275;
                --border-color:                 #7fffd4;
                --link-hover-color:             #0066CC;


                --border-radius-large:          100px;
                --border-radius-medium:         20px;
                --border-radius-small:          10px;

                --font-weight-light:            300;
                --font-weight-normal:           400;
                --font-weight-medium:           500;
                --font-weight-semibold:         600;
                --font-weight-bold:             700;
              }




              /*---------------------------------------
                SECTION
              -----------------------------------------*/
              .section-title-wrap {
                position: relative;
              }

              .section-title-wrap::after {
                content: "";
                background: #fff;
                width: 100%;
                height: 2px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                pointer-events: none;
              }

              .section-title {
                background: #fff;
                border-radius: var(--border-radius-large);
                display: inline-block;
                position: relative;
                z-index: 2;
                margin-bottom: 0;
                padding: 10px 25px;
              }

              .section-padding {
                padding-top: 100px;
                padding-bottom: 100px;
              }

              .section-bg {
                background-color: var(--section-bg-color);
              }

              .section-overlay {
                background-color: var(--primary-color);
                position: absolute;
                top: 0;
                left: 0;
                pointer-events: none;
                width: 100%;
                height: 100%;
                opacity: 0.85;
              }

              .section-overlay + .container {
                position: relative;
              }





              /*---------------------------------------
                SITE HEADER
              -----------------------------------------*/
              .site-header {
                background-image: url('../images/templatemo-wave-header.jpg'), linear-gradient(#348CD2, #FFFFFF);;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                min-height: 480px;
                position: relative;
              }

              .site-header h2 {
                color: var(--white-color);
              }



              /*---------------------------------------
                CUSTOM BLOCK
              -----------------------------------------*/
              .custom-block {
                border: 2px solid var(--primary-color);
                border-radius: var(--border-radius-medium);
                position: relative;
                overflow: hidden;
                padding: 16px;
                transition: all 0.3s ease;
              }

              .custom-block:hover {
                background: var(--white-color);
                box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
                border-color: transparent;
                transform: translateY(-3px);
              }

              .custom-block-info {
                display: block;
                padding: 10px 20px;
                padding-bottom: 0;
              }

              .custom-block-image-wrap {
                position: relative;
                display: block;
                height: 100%;
              }

              .custom-block-image-wrap > a {
                display: block;
              }

              .custom-block-image {
                border-radius: var(--border-radius-medium);
                display: block;
                width: 112px;
                height: 112px;
                object-fit: cover;
              }

              .custom-block-image-detail-page .custom-block-image {
                width: 100%;
                height: 212px;
              }

              .custom-block .custom-block-icon {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }

              .custom-block-icon-wrap {
                border-radius: var(--border-radius-medium);
                position: relative;
                overflow: hidden;
              }

              .custom-block-icon-wrap .section-overlay {
                opacity: 0.25;
              }

              .custom-block-btn-group {
                position: absolute;
                bottom: 0;
                right: 0;
                left: 0;
                margin: 20px;
              }

              .custom-block-btn-group .custom-block-icon {
                position: relative;
                top: 0;
                left: 0;
                transform: none;
              }

              .custom-block-icon {
                background: var(--primary-color);
                border-radius: var(--border-radius-medium);
                font-size: var(--p-font-size);
                color: var(--white-color);
                text-align: center;
                width: 32.5px;
                height: 32.5px;
                line-height: 32.5px;
                transition: all 0.3s;
              }

              .custom-block-icon:hover {
                background: var(--secondary-color);
                color: var(--white-color);
              }

              .custom-block .custom-btn {
                font-size: var(--menu-font-size);
                padding: 7px 15px;
              }

              .custom-block .custom-block-info + div .badge {
                background-color: var(--dark-color);
                color: var(--white-color);
                border-radius: 50px !important;
                font-size: var(--menu-font-size);
                display: flex;
                justify-content: center;
                text-align: center;
                width: 40px;
                height: 40px;
                line-height: 30px;
                margin-top: 5px;
                margin-bottom: 5px;
              }

              .custom-block .custom-block-info + div .badge:hover {
                background-color: var(--secondary-color);
              }

              .custom-block-full {
                background-color: var(--section-bg-color);
                border-color: transparent;
              }

              .custom-block-full:hover {
                border-color: var(--primary-color);
              }

              .custom-block-full .custom-block-info {
                padding: 20px;
                padding-bottom: 0;
              }

              .custom-block-full .custom-block-image {
                width: 100%;
                height: 210px;
              }

              .custom-block-full .social-share {
                position: absolute;
                top: 0;
                right: 0;
                margin: 50px;
              }

              .custom-block-top small {
                color: var(--p-color);
                font-family: var(--title-font-family);
              }

              .custom-block-top .badge {
                background-color: var(--secondary-color);
                color: var(--white-color);
                display: inline-block;
                vertical-align: middle;
                height: 26.64px;
                line-height: 20px;
              }

              .custom-block-bottom a:hover span {
                color: var(--primary-color);
              }

              .custom-block-bottom a span {
                font-family: var(--title-font-family);
                color: var(--p-color);
                text-transform: uppercase;
                margin-left: 3px;
              }

              .custom-block-overlay {
                border-color: transparent;
                padding: 0;
              }

              .custom-block-overlay .custom-block-image {
                margin: auto;
                width: 100%;
                height: 210px;
                transition: all 0.3s;
              }

              .custom-block-overlay:hover .custom-block-image {
                padding: 15px;
                padding-bottom: 0;
              }

              .custom-block-overlay-info {
                padding: 15px 20px 20px 20px;
              }


              /*---------------------------------------
                PROIFLE BLOCK
              -----------------------------------------*/
              .profile-block {
                margin-top: 10px;
              }

              .profile-block-image {
                border-radius: var(--border-radius-large);
                width: 50px;
                height: 50px;
                object-fit: cover;
                margin-right: 10px;
              }

              .profile-block p strong {
                display: block;
                font-family: var(--title-font-family);
              }

              .profile-detail-block {
                border: 1px solid #dee2e6;
                border-radius: var(--border-radius-large);
                padding: 25px 35px;
              }

              .profile-detail-block p {
                margin-bottom: 0;
              }