@media only screen and (max-width: 3840px) {
  .poster {
    min-height: 420px;
  }
}
@media only screen and (max-width: 1440px) {
  .poster {
    min-height: 380px;
  }
}
@media only screen and (max-width: 1024px) {
  .innerBanner .hero-title {
    font-size: 48px;
  }

  .testiBox {
    min-height: 472px;
  }

  .stellarnav ul > li > a {
    font-size: 23px;
    padding: 15px 19px;
  }
}

@media only screen and (max-width: 991px) {
  .testiBox {
    min-height: 396px;
  }

  .testiBox h3 {
    font-size: 23px;
  }

  .stellarnav ul > li > a {
    font-size: 17px;
    padding: 15px 8px;
  }

  header .social {
    margin-top: 36px;
  }

  header .social-icon i {
    font-size: 24px;
  }

  .hero-title {
    font-size: 37px;
  }

  .modal .btn-close {
    top: 0px;
    right: 2px;
    z-index: 9;
  }

  .modal img {
    height: 100%;
  }

  .modal .content-modal {
    height: 334px;
    padding: 29px 29px;
    text-align: center;
  }

  .media-slider img {
    height: 400px;
  }

  .media-slider ul {
    justify-content: center;
  }

  .innerBanner.hero-section {
    height: 41vh;
  }

  .hero-section .item {
    height: 67vh;
  }

  .hero-section .item::before {
    bottom: -3px;
  }

  .contact-section,
  .grid-section,
  .content-section {
    padding: 40px 0;
  }

  .instagram-slider .content-modal {
    height: 296px !important;
    margin-top: 0;
  }

  .media-slider .content-modal {
    height: auto;
    padding: 29px 29px 12px;
  }
  .track-outline {
    top: 80px;
  }
}

@media only screen and (max-width: 767px) {
  #header .logo {
    margin: 0 auto;
    position: absolute;
    left: 0;
    transform: translate(0, 0);
  }

  #header .logo img {
    width: 151px;
  }

  #header .hamburger-text {
    display: none;
  }

  .modal .content-modal {
    padding: 29px 10px;
  }

  .countdown-section {
    padding: 0;
  }

  .instagram-slider .content-modal {
    margin-top: 0;
  }

  header .mb-logo {
    margin-bottom: 82px;
    text-align: start !important;
    margin-top: 9px;
  }

  .stellarnav ul {
    padding-left: 0;
  }

  .countdown-display {
    gap: 4px;
  }

  .stellarnav ul > li > a {
    font-size: 20px;
    padding: 15px 19px 2px;
  }

  header .social {
    margin-top: 34px;
    display: flex;
    padding-left: 0;
    gap: 0;
    justify-content: center;
  }

  header .social li {
    width: 42px !important;
    flex: 0 0 42px !important;
  }

  .countdown-title {
    margin-bottom: 8px;
  }

  .content-title {
    font-size: 27px;
  }

  .btn-content {
    margin-top: 6px;
  }

  .footer-nav a {
    font-size: 17px;
  }

  .social-icons,
  .footer-nav {
    gap: 7px;
    margin-bottom: 25px;
  }

  .social-icon {
    font-size: 19px;
  }

  .footer-nav {
    gap: 12px;
  }

  .footer-bottom {
    gap: 11px;
  }

  .footer {
    padding: 31px 0 17px;
  }

  .hero-title {
    font-size: 28px;
  }

  .innerBanner.hero-section {
    height: 32vh;
    background-position: center !important;
    background-size: cover !important;
  }

  .innerBanner .hero-title {
    font-size: 27px;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .innerBanner.hero-section {
    align-items: center;
  }

  .modal .tags {
    justify-content: center;
  }

  .tags .bg-light {
    margin-right: 12px;
    font-size: 14px;
  }

  .section-subtitle {
    margin: 1rem 0;
  }

  .content-image {
    height: 265px;
    margin: 10px 0;
  }

  .social-section h4 {
    font-size: 22px;
    margin-bottom: -5px;
  }

  .social-link {
    gap: 9px;
    margin: 17px 0 0;
  }

  .form-section {
    padding: 24px 0;
  }

  .section-subtitle {
    font-size: 18px;
  }

  .services-section {
    padding: 18px 0;
  }

  .contact-section,
  .grid-section,
  .content-section {
    padding: 15px 0;
  }

  .content-block {
    padding-top: 1rem !important;
  }

  .case-study-card {
    position: relative;
    height: 208px;

    margin-bottom: 8px;
  }

  .services-sections {
    padding: 27px 0;
  }

  .hero-section .item {
    height: 73vh;
  }

  .content-panel {
    padding: 23px 16px;
  }

  .btn-content {
    padding: 9px 18px;
    font-size: 13px;
  }

  .countdown-number {
    font-size: 18px;
  }

  #header .offcanvas-body .logo {
    left: 15px;
    top: 21px;
  }

  .subtitle {
    text-align: center;
  }

  .section-title {
    text-align: center;
  }
}
@media only screen and (max-width: 575px) {
  .poster {
    min-height: 465px;
  }
}
@media only screen and (max-width: 480px) {
  .footer-nav a {
    font-size: 15px;
  }

  .countdown-subtitle {
    font-size: 18px;
  }

  .social-icon {
    font-size: 15px;
  }

  .social-icons {
    gap: 0;
    margin-bottom: 15px;
  }

  .footer-nav {
    gap: 8px;
  }

  .case-study-title {
    font-size: 13px;
    padding: 0 15px;
  }
}

@media only screen and (max-width: 380px) {
  .countdown-subtitle {
    font-size: 15px;
  }

  .footer-nav a {
    font-size: 12px;
  }
  .poster {
    min-height: 420px;
  }
}

@media only screen and (max-width: 320px) {
  .copyright {
    font-size: 9px;
  }

  .innerBanner .hero-title {
    font-size: 21px;
  }

  .countdown-subtitle {
    font-size: 13px;
  }

  .subtitle {
    font-size: 22px;
  }

  .countdown-number {
    font-size: 14px;
  }

  p {
    font-size: 13px;
  }

  #header .logo img {
    width: 134px;
  }

  .footer-nav a {
    font-size: 10px;
  }

  .stellarnav ul > li > a {
    font-size: 16px;
    padding: 15px 19px 0;
  }

  header .mb-logo {
    margin-bottom: 56px;
  }

  header .social a {
    padding: 0 !important;
    margin: 0 !important;
  }

  header .hamburger-text {
    font-size: 15px;
  }

  header .is-active .hamburger-lines {
    margin-top: -2px;
  }

  .hamburger .line {
    margin: 3px auto;
  }

  #hamburger-1.is-active .line:nth-child(3) {
    -webkit-transform: translateY(-2px) rotate(-45deg);
    -ms-transform: translateY(-2px) rotate(-45deg);
    -o-transform: translateY(-2px) rotate(-45deg);
    transform: translateY(-2px) rotate(-45deg);
  }

  .hero-title {
    font-size: 19px;
  }

  .location {
    font-size: 14px;
  }
  .poster {
    min-height: 390px;
  }
}