@use '../utils' as *;

/*============= MOBILE MENU CSS AREA ===============*/
.mobile-header.mobile-haeder1 {
  background: var(--ztc-text-text-2);
  position: fixed;
  .mobile-nav-icon {
      color: var(--ztc-text-text-1);
  }
}
.mobile-sidebar.mobile-sidebar1{
  background: var(--ztc-text-text-2);
  overflow-y: scroll;
  .menu-close {
      color: var(--ztc-text-text-1);
  }
  .mobile-nav.mobile-nav1{
    .mobile-nav-list.nav-list1{
      span.submenu-button:before {
          background: var(--ztc-text-text-1);
        }
        span.submenu-button::after {
          background: var(--ztc-text-text-1);
        }
      li{
        a{
          font-weight: var(--ztc-weight-medium);
          color: var(--ztc-text-text-1);
        }
        ul{
          li{
            a{
              li{
                a{
                    font-family: var(--ztc-family-font1) !important;
                    font-size: var(--ztc-font-size-font-s18);
                    font-weight: var(--ztc-weight-medium) !important;
                    line-height: var(--ztc-font-size-font-s18);
                    color: var(--ztc-text-text-1);
                    display: inline-block;
                }
            }
            }
          }
        }
      }
    }  
    .header-btn1{
      margin-top: 20px;
      margin-bottom: 30px;
      width: 100%;
      text-align: center;
    }
    h3{
      font-family: var(--ztc-family-font1);
      font-size: var(--ztc-font-size-font-s24);
      line-height: var(--ztc-font-size-font-s24);
      font-weight: var(--ztc-weight-semibold);
      color: var(--ztc-text-text-1);
      margin-bottom: 20px;
    }
  }
  .footer1-contact-info{
      .contact-info-single{
          display: flex;
          margin-bottom: 16px;
          i {
              color: var(--ztc-text-text-1);
              filter: brightness(0) invert(1);
          }
          .contact-info-text{
              a{
              font-family: var(--ztc-family-font1);
              font-size: var(--ztc-font-size-font-s16);
              font-weight: var(--ztc-weight-medium);
              color: var(--ztc-text-text-1);
              line-height: var(--ztc-font-size-font-s24);
              margin-left: 6px;
              display: inline-block;
              }

          }
      }
      .social-links-mobile-menu{
        margin-bottom: 50px;
        ul{
          li{
            display: inline-block;
            line-height: 30px;
            a{
              height: 40px;
              width: 40px;
              display: inline-block;
              text-align: center;
              background: var(--ztc-text-text-1);
              border: 1px solid var(--ztc-text-text-1);
              border-radius: 50%;
              padding: 0;
              line-height: 42px;
              transition: $trans;
              color: var(--ztc-text-text-3);
              &:hover{
                background: var(--ztc-text-text-3);
                transition: $trans;
                transform: translateY(-3px);
                color: var(--ztc-text-text-1);
                border: 1px solid var(--ztc-text-text-3);
              }
            }
          }
        }
      }
  }
}


// HOMEPGAE 02 //
.mobile-header.mobile-haeder2 {
  background: var(--ztc-text-text-1);
  position: fixed;
  .mobile-nav-icon {
      color: var(--ztc-text-text-7);
  }
}
.mobile-sidebar.mobile-sidebar2{
  background: var(--ztc-text-text-1);
  overflow-y: scroll;
  .menu-close {
      color: var(--ztc-text-text-7);
  }
  .mobile-nav.mobile-nav1{
    .mobile-nav-list.nav-list1{
      span.submenu-button:before {
          background: var(--ztc-text-text-7);
        }
        span.submenu-button::after {
          background: var(--ztc-text-text-7);
        }
      li{
        a{
          font-weight: var(--ztc-weight-medium);
          color: var(--ztc-text-text-7);
          font-size: var(--ztc-font-size-font-s18) !important;
        }
        font-family: var(--ztc-family-font1) !important;
        ul{
          li{
            a{
              li{
                a{
                    font-family: var(--ztc-family-font1) !important;
                    font-size: var(--ztc-font-size-font-s18);
                    font-weight: var(--ztc-weight-medium) !important;
                    line-height: var(--ztc-font-size-font-s18);
                    color: var(--ztc-text-text-7);
                    display: inline-block;
                }
            }
            }
          }
        }
      }
    }  
    .header-btn3{
      margin-top: 20px;
      margin-bottom: 30px;
      width: 100%;
      text-align: center;
    }
    h3{
      font-family: var(--ztc-family-font1);
      font-size: var(--ztc-font-size-font-s24);
      line-height: var(--ztc-font-size-font-s24);
      font-weight: var(--ztc-weight-semibold);
      color: var(--ztc-text-text-7);
      margin-bottom: 20px;
    }
  }
  .footer1-contact-info{
      .contact-info-single{
          display: flex;
          margin-bottom: 16px;
          i {
              color: var(--ztc-text-text-7);
          }
          .contact-info-text{
              a{
              font-family: var(--ztc-family-font1);
              font-size: var(--ztc-font-size-font-s16);
              font-weight: var(--ztc-weight-medium);
              color: var(--ztc-text-text-7);
              line-height: var(--ztc-font-size-font-s24);
              margin-left: 6px;
              display: inline-block;
              }

          }
      }
      .social-links-mobile-menu{
        margin-bottom: 50px;
        ul{
          li{
            display: inline-block;
            line-height: 30px;
            a{
              height: 40px;
              width: 40px;
              display: inline-block;
              text-align: center;
              background: var(--ztc-text-text-1);
              border: 1px solid var(--ztc-text-text-7);
              border-radius: 50%;
              padding: 0;
              line-height: 42px;
              transition: $trans;
              color: var(--ztc-text-text-7);
              &:hover{
                background: var(--ztc-bg-bg-7);
                transition: $trans;
                transform: translateY(-3px);
                color: var(--ztc-text-text-1);
                border: 1px solid var(--ztc-text-text-3);
              }
            }
          }
        }
      }
  }
}

// HOMEPGAE 03 //
.mobile-header.mobile-haeder3 {
  background: var(--ztc-text-text-10);
  position: fixed;
  .mobile-nav-icon {
      color: var(--ztc-text-text-1);
  }
}
.mobile-sidebar.mobile-sidebar3{
  background: var(--ztc-text-text-10);
  overflow-y: scroll;
  .menu-close {
      color: var(--ztc-text-text-1);
  }
  .mobile-nav.mobile-nav1{
    .mobile-nav-list.nav-list1{
      span.submenu-button:before {
          background: var(--ztc-text-text-1);
        }
        span.submenu-button::after {
          background: var(--ztc-text-text-1);
        }
      li{
        a{
          font-weight: var(--ztc-weight-medium);
          color: var(--ztc-text-text-1);
          font-size: var(--ztc-font-size-font-s18) !important;
        }
        font-family: var(--ztc-family-font1) !important;
        ul{
          li{
            a{
              li{
                a{
                    font-family: var(--ztc-family-font1) !important;
                    font-size: var(--ztc-font-size-font-s18);
                    font-weight: var(--ztc-weight-medium) !important;
                    line-height: var(--ztc-font-size-font-s18);
                    color: var(--ztc-text-text-1);
                    display: inline-block;
                }
            }
            }
          }
        }
      }
    }  
    .header-btn4{
      margin-top: 20px;
      margin-bottom: 30px;
      width: 100%;
      text-align: center;
    }
    h3{
      font-family: var(--ztc-family-font1);
      font-size: var(--ztc-font-size-font-s24);
      line-height: var(--ztc-font-size-font-s24);
      font-weight: var(--ztc-weight-semibold);
      color: var(--ztc-text-text-1);
      margin-bottom: 20px;
    }
  }
  .footer1-contact-info{
      .contact-info-single{
          display: flex;
          margin-bottom: 16px;
          i {
              color: var(--ztc-text-text-1);
          }
          .contact-info-text{
              a{
              font-family: var(--ztc-family-font1);
              font-size: var(--ztc-font-size-font-s16);
              font-weight: var(--ztc-weight-medium);
              color: var(--ztc-text-text-1);
              line-height: var(--ztc-font-size-font-s24);
              margin-left: 6px;
              display: inline-block;
              }

          }
      }
      .social-links-mobile-menu{
        margin-bottom: 50px;
        ul{
          li{
            display: inline-block;
            line-height: 30px;
            a{
              height: 40px;
              width: 40px;
              display: inline-block;
              text-align: center;
              background: var(--ztc-text-text-1);
              border: 1px solid var(--ztc-text-text-7);
              border-radius: 50%;
              padding: 0;
              line-height: 42px;
              transition: $trans;
              color: var(--ztc-text-text-10);
              &:hover{
                background: var(--ztc-bg-bg-11);
                transition: $trans;
                transform: translateY(-3px);
                color: var(--ztc-text-text-1);
                border: 1px solid var(--ztc-text-text-9);
              }
            }
          }
        }
      }
  }
}

// HOMEPGAE 03 //
.mobile-header.mobile-haeder4 {
  background: var(--ztc-text-text-1);
  position: fixed;
  .mobile-nav-icon {
      color: var(--ztc-text-text-11);
  }
}
.mobile-sidebar.mobile-sidebar4{
  background: var(--ztc-text-text-1);
  overflow-y: scroll;
  .menu-close {
      color: var(--ztc-text-text-11);
  }
  .mobile-nav.mobile-nav1{
    .mobile-nav-list.nav-list1{
      span.submenu-button:before {
          background: var(--ztc-text-text-11);
        }
        span.submenu-button::after {
          background: var(--ztc-text-text-11);
        }
      li{
        a{
          font-weight: var(--ztc-weight-medium);
          color: var(--ztc-text-text-11);
          font-size: var(--ztc-font-size-font-s18) !important;
        }
        font-family: var(--ztc-family-font1) !important;
        ul{
          li{
            a{
              li{
                a{
                    font-family: var(--ztc-family-font1) !important;
                    font-size: var(--ztc-font-size-font-s18);
                    font-weight: var(--ztc-weight-medium) !important;
                    line-height: var(--ztc-font-size-font-s18);
                    color: var(--ztc-text-text-11);
                    display: inline-block;
                }
            }
            }
          }
        }
      }
    }  
    .header-btn5{
      margin-top: 20px;
      margin-bottom: 30px;
      width: 100%;
      text-align: center;
    }
    h3{
      font-family: var(--ztc-family-font1);
      font-size: var(--ztc-font-size-font-s24);
      line-height: var(--ztc-font-size-font-s24);
      font-weight: var(--ztc-weight-semibold);
      color: var(--ztc-text-text-11);
      margin-bottom: 20px;
    }
  }
  .footer1-contact-info{
      .contact-info-single{
          display: flex;
          margin-bottom: 16px;
          i {
              color: var(--ztc-text-text-11);
          }
          .contact-info-text{
              a{
              font-family: var(--ztc-family-font1);
              font-size: var(--ztc-font-size-font-s16);
              font-weight: var(--ztc-weight-medium);
              color: var(--ztc-text-text-12);
              line-height: var(--ztc-font-size-font-s24);
              margin-left: 6px;
              display: inline-block;
              }

          }
      }
      .social-links-mobile-menu{
        margin-bottom: 50px;
        ul{
          li{
            display: inline-block;
            line-height: 30px;
            a{
              height: 40px;
              width: 40px;
              display: inline-block;
              text-align: center;
              background: var(--ztc-text-text-1);
              border: 1px solid var(--ztc-text-text-11);
              border-radius: 50%;
              padding: 0;
              line-height: 42px;
              transition: $trans;
              color: var(--ztc-text-text-11);
              &:hover{
                background: var(--ztc-text-text-13);
                transition: $trans;
                transform: translateY(-3px);
                color: var(--ztc-text-text-1);
                border: 1px solid var(--ztc-text-text-13);
              }
            }
          }
        }
      }
  }
}

.reveal{
  position:relative;
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  visibility:hidden;
  overflow:hidden
}
.reveal img{
  height:100%;
  width:100%;
  display: inline-block;
  -o-object-fit:cover;
  object-fit:cover;
  -webkit-transform-origin:left;
  transform-origin:left
}
/*============= MOBILE MENU CSS AREA ===============*/