@media (max-width: 768px) {
   .service-title {
      width: 100%;
      text-align: left;
   }
   .service-title img {
      height: 60px;
   }
   .service-title h2 {
      font-size: var(--font-size-lg) !important;
      font-weight: 700;
      margin: 0 0 20px 10px;
   }
   .faq-question {
      width: 100%;
      padding: 5px;
      font-size: 0.9rem;
      font-weight: 600;
   }
   .about-cards,
   .why-us {
      flex-direction: column;
      gap: 20px !important;
   }
   .why-us .card {
      height: 190px;
      border-radius: 20px;
   }
   .about-cards .card {
      height: 230px;
      border-radius: 20px;
   }
   .services-container {
      flex-direction: column;
      justify-content: start;
      padding: 0 10px;
   }
   .service-type {
      width: 100%;
   }
   .about-list {
      display: flex;
      flex-direction: column;
      gap: 15px;
      width: 100%;
   }
   .about-list li {
      font-size: 15px;
      font-weight: 400;
   }
   .hero-mobile {
      display: block;
   }
   .hero-container img {
      height: 100%;
   }
   .hero-container.about {
      background-image: linear-gradient(rgba(29, 53, 87, 0.7), rgba(29, 53, 87, 0.7)), url(../img/banners/hero_about.png) !important;
   }
   .hero-desktop {
      display: none;
   }
   .btn {
      font-size: 15px !important;
      padding: 10px 20px !important;
   }
   .hero-btns a {
      width: 140px;
      font-weight: 700;
   }
   h1 {
      font-size: var(--font-size-2xl) !important;
      line-height: 1.2 !important;
   }
   section h2 {
      font-size: var(--font-size-xl) !important;
      font-weight: 700 !important;
   }
   section p {
      font-size: 15px !important;
   }
   .header {
      margin-bottom: 20px !important;
      box-shadow: var(--shadow-lg);
   }
   .header .container {
      flex-direction: column;
      gap: var(--spacing-md);
   }
   .navbar {
      flex-direction: column;
      gap: var(--spacing-md);
      width: 100%;
   }
   .navbar a {
      display: block;
      text-align: center;
   }
   .navbar-toggler {
      padding: 0 0.5rem !important;
   }
   .navbar-toggler:focus {
      box-shadow: none !important;
   }
   .navbar-toggler-icon {
      width: 1.7rem !important;
      height: 1.7rem !important;
      font-weight: 700;
   }
   .logo-icon img {
      width: 50px;
   }
   .nav-container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
   }
   .navbar {
      padding: 5px !important;
   }
   .nav-item {
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .nav-item:first-child {
      margin-top: 8px;
   }
   .nav-item:last-child {
      margin: 15px 0;
   }
   .navbar-collapse {
      margin-top: 10px;
      border-top: 1px solid #f1f1f1;
   }
   .hero-carousel {
      height: 50vh !important;
   }
   .hero-content {
      padding: var(--spacing-lg);
   }
   .hero-content p {
      min-height: 45px;
   }
   .hero h1 {
      font-size: 2rem;
   }
   .services-grid {
      flex-direction: column;
   }
   .service-card {
      width: 100%;
   }
   .section {
      padding: var(--spacing-2xl) 5px;
   }
   .contact-form {
      padding: 20px;
   }
   .contact-section {
      display: flex;
      flex-direction: column;
      margin-top: 60px;
   }
   .contact-grid {
      flex-direction: column;
   }
   .contact-form-wrapper,
   .contact-info {
      width: 100%;
   }
   .contact-detail {
      display: inline-flex;
      flex-direction: row;
      justify-items: center;
      align-items: center;
   }
   .contact-detail h3 {
      display: flex;
      margin-right: 5px;
   }
   .contact-form-wrapper h2 {
      font-size: var(--font-size-xl);
      font-weight: 900;
      margin-bottom: var(--spacing-xl);
   }
   .about {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
   }
   .about img {
      width: 100%;
      border-radius: 10px;
   }
   .page-header h1 {
      font-size: 2rem;
   }
   .footer-content,
   .grid-2 {
      grid-template-columns: 1fr;
   }
   .grid-3 {
      grid-template-columns: 1fr !important;
   }
   .grid-4 {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-sm);
   }
   ul {
      gap: 0;
   }
   #footer .footer-bottom {
      padding: 20px;
   }
}
@media (min-width: 769px) and (max-width: 1024px) {
   .hero h1 {
      font-size: 3rem;
   }
   .services-grid {
      flex-wrap: wrap;
   }
   .contact-grid {
      grid-template-columns: 1fr 1fr;
   }
   .grid-3,
   .grid-4 {
      grid-template-columns: repeat(2, 1fr);
   }
}
@media (min-width: 1025px) {
   .grid-3,
   .services-grid {
      grid-template-columns: repeat(3, 1fr);
   }
   .grid-4 {
      grid-template-columns: repeat(4, 1fr);
   }
}
@media (prefers-reduced-motion: reduce) {
   * {
      animation-duration: 0s !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0s !important;
   }
}
@media (prefers-color-scheme: dark) {
   body {
      background-color: var(--color-white);
      color: var(--color-gray-dark);
   }
   .header {
      background: var(--color-white);
      border-bottom-color: var(--color-gray-light);
   }
   .card,
   .info-card,
   .service-card {
      background: var(--color-gray-light);
   }
}
@media print {
   .btn,
   .cta,
   .footer,
   .header {
      display: none;
   }
   body {
      font-size: 12pt;
      line-height: 1.5;
   }
   .container {
      max-width: 100%;
   }
}