/* mobile responsiveness design */
@media screen and (max-width: 990px) {
  .contact-panel {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 1130px) {
  .menu-btn {
    display: block;
  }

  .navbar {
    padding: 12px 16px;
    flex-wrap: wrap;
  }

  .logo {
    position: absolute;
    top: 18px;
    left: 52px;
    padding: 0;
    font-size: clamp(1rem, 4vw, 1.5rem);
    letter-spacing: 0.18rem;
  }

  .nav-links {
    position: absolute;
    top: 70px;
    left: 0;
    flex-direction: column;
    width: 100%;
    max-height: calc(100dvh - 70px);
    height: auto;
    overflow-y: auto;
    justify-content: center;
    background: #484872;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  }

  .mobile-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    border-bottom-right-radius: 30%;
  }

  .nav-links li {
    margin: 30px auto;
  }
}

@media screen and (max-width: 1440px) {
	 .containerx {
	  top: 40%;
	  bottom: 40%;
	  transform-style: preserve-3d;
	}
	
	#about_us div {
		padding: 10px;
		display: block;
		align-items: normal;
	}
	
	.cards {
		position: relative;
		width: 90vw;
		height: 100%;
	}
	
	#about-quad {
		display: none;
	}
}

@media only screen and (max-width: 850px) {
  /*events*/
  .row {
    flex-direction: column;
  }

  .row .col {
    margin: 20px auto;
  }

  .col img {
    max-width: 90%;
  }

  /*explore*/
  .explore-content {
    width: 100%;
  }

  /*tours*/
  .tours {
    width: 100%;
  }

  .tours-table {
    font-size: 0.9rem;
    min-width: 520px;
    white-space: normal;
  }

  #tours .tours-table {
    min-width: 0;
  }

  #tours .tours-table th,
  #tours .tours-table td {
    min-width: 0;
    padding: 8px 5px;
  }

  .tours-table th,
  .tours-table td {
    padding: 10px;
    min-width: 120px;
  }

  .tours-table th:nth-child(3),
  .tours-table td:nth-child(3) {
    min-width: 100px;
  }

  .tours-table .book-btn {
    padding: 8px 16px;
    font-size: 0.85rem;
    min-width: 70px;
  }

  /*footer*/
  .footer {
    padding: 10px;
  }
  .content-col {
    width: 100%;
  }

  .account-grid {
    grid-template-columns: 1fr;
  }

  .profile-panel {
    width: 100%;
  }
  #about_us p {
    width: min(85%, 65ch);
  }
}

@media screen and (max-width: 770px) {
  #about_us p {
    width: min(92%, 65ch);
    padding-top: 3rem;
    margin: auto;
  }
  form {
    width: 90%;
  }
  .ctn {
    margin: auto;
  }

  .explore-content {
    margin: 0 auto;
    text-align: center;
    width: 80%;
  }

  .auth-actions {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .auth-actions span {
    flex: 1 1 100%;
    padding: 0;
  }

  .auth-submit {
    width: 100%;
  }

  .explore-content .ctn {
    margin: 40px auto;
  }
}
@media screen and (max-width: 600px) {
  #about_us p {
    margin: auto;
  }
}
@media screen and (max-width: 470px) {
  .ctn {
    padding: 13px 25px;
  }

  .logo {
    font-size: 1rem;
    letter-spacing: 0.1rem;
  }

  .header-content {
    padding: 2rem 1rem;
    margin-bottom: 5vh;
  }

  .social {
    width: 100%;
  }
}
@media screen and (max-width: 400px) {
  .ctn {
    padding: 13px 25px;
  }
  .c_boxx a p {
    font-size: 16px;
  }
}

@media (max-width: 850px) {
  .content-col {
    text-align: center;
  }
  .content-col .line {
    margin: 0.5rem auto;
  }
  .content-col .ctn {
    margin: 0 auto;
    position: inherit;
  }
  .content-col p {
    max-width: 75%;
    text-align: justify;
  }
}