.desktop-only {
  display: inline-block;
}

.mobile-only {
  display: none;
}

.mobile-menu {
  display: none;
}

@media (max-width: 1000px) {
  .row {
    gap: 25px;
    flex-wrap: wrap;
  }
  section .row {
    flex-direction: column;
    gap: 50px;
  }
  .middle-col {
    width: 75%;
    margin: auto;
  }
  .section-bg-top {
    top: -15%;
  }
  .desktop-only {
    display: none !important;
  }
  .mobile-only {
    display: block !important;
  }
  nav {
    width: 95%;
    padding: 10px 30px 10px 10px;
  }
  nav ul > li {
    flex: auto;
  }
  nav .btn {
    width: 175px;
    display: inline-flex;
    justify-content: center;
  }
  .mobile-menu li {
    text-align: center;
  }
  .mobile-menu li:last-child {
    display: none;
  }
  .mobile-menu a {
    font-size: 21px;
  }
  nav.fixed-nav {
    width: 95%;
  }
  .right-col img {
    display: none;
  }
  .event-left-col-4 {
    padding-top: 50px;
  }
  .footer-col-2 {
    flex: 0 0 auto;
    width: 100%;
  }
  footer .container {
    max-width: 95%;
  }
  footer .section-bg-bottom {
    height: 250px;
    margin-top: 50px;
  }
}

@media (max-width: 858px) {
  .desktop-only {
    display: none !important;
  }
  .mobile-only {
    display: block !important;
  }
  nav {
    bottom: 10px;
  }
  nav ul {
    gap: 25px;
  }
  nav .btn {
    display: none;
  }
  .mobile-menu ul {
    flex-direction: column;
  }
  .mobile-menu li:last-child {
    display: block !important;
  }
  .mobile-menu li:last-child .btn {
    display: block;
    width: auto;
  }
  nav.fixed-nav .btn {
    width: 166px;
    display: none;
  }
  .event-right-col {
    flex-direction: column;
  }
  main section {
    padding: 50px 0;
  }
  .middle-col {
    width: 100%;
  }
  h2 {
    font-size: 32px;
  }
  p {
    font-size: 21px;
  }
  .pb-extra {
    padding-bottom: 75px;
  }
  .pt-extra {
    padding-top: 75px;
  }
  .s-03 .content {
    padding: 0;
  }
  .box {
    padding: 10px;
    margin: 50px 0 75px 0;
  }
  .box-info {
    flex-direction: column;
  }
  .s-03 {
    padding-bottom: 0;
  }
  .event {
    flex-direction: column;
  }
  .event-left-col-3 {
    max-width: 100%;
    padding-left: 0;
    padding-top: 25px;
  }
  .event-soon .event-left-col-1, .event-soon .event-left-col-2, .event-soon .event-left-col-3, .event-soon .event-left-col-4 {
    padding-top: 50px;
  }
  .event-soon .event-left-col-2 {
    border-right: none;
  }
  .event-soon {
    border-bottom: 1px solid;
    border-radius: 0;
  }
  .event-soon .event-left-col-4 {
    padding-bottom: 50px;
  }
  footer ul {
    padding-left: 0;
  }
}