@media (max-width: 1200px) {
  .siteNavigation .menu ul li a {
    padding: 20px 10px;
    font-size: 13px;
  }

  .homeFeture span {
    font-size: 14px;
  }
}

@media (max-width: 1100px) {
  .siteNavigation .menu ul li a {
    padding: 20px 10px;
    font-size: 12px;
  }
}

@media (max-width: 1023px) {
  .preloader-text {
    font-size: 60px;
  }

  .headerLogo {
    position: absolute;
  }

  .siteNavigation {
    float: left;
    width: 100%;
    position: static;
  }

  .siteNavigation .navbar {
    display: block;
    float: left;
    width: 100%;
  }

  .siteNavigation .menuDrawer {
    display: none;
    width: 100%;
    overflow: hidden;
    overflow-y: visible;
    position: relative;
    z-index: 9999;
    max-height: 480px;
    overflow-y: auto;
    position: absolute;
    top: 100%;
    background: #2a1454;
    left: 0;
    right: 0;
    text-align: left;
  }

  .siteNavigation .menuDrawer ul li {
    padding: 0;
    float: left;
    width: 100%;
    display: block;
  }

  .siteNavigation .menuDrawer ul li a {
    padding: 7px 15px;
    text-align: left;
    font-size: 14px;
    border-right: 1px dashed transparent;
    color: #fff;
    border-bottom: 1px solid #371e66;
    display: block;
  }
  .siteNavigation .menuDrawer ul li.active a,
  .siteNavigation .menuDrawer ul li:hover a {
    color: var(--theme);
    background-color: transparent;
    border-radius: 0;
  }
}

@media (max-width: 768px) {
  .float-bob-x {
    display: none;
  }
  .hero-content {
    position: relative;
    z-index: 99;
  }
  .tj-hero-5-thumb-shape-4-text-animed h2 {
    font-size: 460px;
  }
  .tj-hero-5-thumb-shape-4-text-animed h2 {
    -webkit-transform: translate(-3%, -90%);
    -ms-transform: translate(-3%, -90%);
    transform: translate(-3%, -90%);
  }
  .hero-1 .hero-content h1 {
    font-size: 24px;
    line-height: 30px;
  }
  .hero-1 .hero-content h1 strong {
    font-size: 32px;
  }
  .theme-btn {
    height: 45px;
    line-height: 45px;
    color: #fff;
    padding: 0 25px;
    margin-bottom: 15px;
  }
  .hero-1 .hero-content p {
    font-size: 18px;
    color: #fff;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: initial;
    margin-bottom: 10px;
    line-height: 1.5;
  }
  .works-section.style-2 .works-wrapper {
    display: block;
  }
  .works-content-item {
    width: 100%;
  }

  .experienceText {
    right: 3rem;
  }
  .aboutSection {
    padding: 70px 0;
  }
  .aboutMeText {
    padding: 0;
    margin-top: 0;
  }
  .imageBox {
    margin-top: 60px;
  }
  .funfact-item {
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-bottom: 15px;
  }
  .funfact-item .number {
    font-size: 54px;
  }
  .works-content-item .title {
    font-size: 30px;
  }
  .footer-content-area {
    display: block;
  }
  .footer-content-area .line {
    height: 0;
  }
  .marquee-section {
    transform: none;
  }
  .portfolio-box .portfolio-item {
    width: 100%;
  }
  .skills-widget {
    gap: 15px;
  }
  .skills-widget .skill-item {
    max-width: 155px;
  }
  .contact_wrapper_5 {
    display: block;
  }
  .contact-box .contact-info-list {
    padding: 15px 15px 20px;
  }
  .contact-box .contact-info-list li .text-box a {
    font-size: 16px;
  }
  .contact-form-box {
    margin-bottom: 30px;
    padding: 20px;
  }
  .footer-widget.widget_nav_menu ul {
    display: block;
  }
  .footer-widget.widget_nav_menu ul li a {
    padding: 0 15px;
  }
  .skills-section,
  .portfolio-section,
  .service-section,
  .works-section.style-2,
  .contactSection {
    padding: 40px 0;
  }
}

@media (max-width: 480px) {
}