/* ================= MOBILE ================= */

@media (max-width: 960px) {

  body,
  html {
    min-width: 100%;
    overflow-x: hidden;
  }

  /* HERO */
  .hero {
    min-height: auto;
    padding: 28vw 0 12vw;
  }

  .hero-text {
    padding: 5vw 6%;
    margin-top: 0;
  }

  .hero-text h1 {
    font-size: 9vw;
    width: 100%;
  }

  .hero-text p {
    font-size: 3.8vw;
    max-width: 100%;
  }

  /* NAVBAR */
  .hero-navbar {
    top: 5vw;
    padding: 0 5%;
  }

  .hero-navbar .navbar {
    padding: 2vw 4vw 4vw;
    border-radius: 4vw;
  }

  .navbar-brand img {
    height: 16vw;
  }

  .hero-navbar .nav-link {
    font-size: 4vw;
    padding: 2vw 0;
  }

  .hero-navbar .btn-warning {
    width: 60%;
    text-align: center;
    margin-top: 3vw;
    font-size: 3.5vw;
    padding: 3vw;
  }

  .navbar-collapse {
    margin-top: 4vw;
  }

  /* HERO FEATURES */
  .hero-features {
    margin-left: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4vw;
    margin-top: 8vw;
  }

  .hero-feature {
    font-size: 4vw;
  }

  .hero-feature i,
  .hero-feature span {
    font-size: 5vw;
  }

  /* ABOUT */

  .experience-badge p {
    margin: 0;
    font-size: 0.8vw;
    font-weight: 600;
    line-height: 1.2;
    color: #0d3b66;
}
  .about-section {
    padding: 15vw 5%;
  }

  .about-images {
    min-height: auto;
    margin-bottom: 10vw;
  }

  .small-img,
  .large-img {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
  }

  .large-img {
    margin-top: 5vw;
  }

  .experience-badge {
    position: relative;
    top: 0;
    right: 0;
    margin-bottom: 5vw;
  }

  .section-title {
    font-size: 8vw;
  }

  .section-text,
  .section-desc {
    font-size: 4vw;
    max-width: 100%;
  }

  /* SERVICES */
  .services-wrapper {
    grid-template-columns: 1fr;
  }

  .services-left {
    padding: 12vw 5%;
  }

  .services-left h2 {
    font-size: 8vw;
  }

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

  .service-card {
    min-height: auto;
    padding: 5vw;
  }

  .service-card h4 {
    font-size: 4.5vw;
  }

  .service-card ul {
    font-size: 3.5vw;
  }

  /* PRODUCTS */
  .ps-wrapper,
  .ps-header {
    grid-template-columns: 1fr;
  }

  .ps-title {
    font-size: 8vw;
  }

  .ps-desc {
    font-size: 4vw;
  }

  .ps-image img {
    height: auto;
  }

  /* FOOTER */
  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-main-logo {
    width: 35vw;
  }

  .footer-col h4 {
    font-size: 5vw;
  }

  .footer-col ul li a,
  .footer-contact p {
    font-size: 4vw;
  }

  .footer-contact .material-symbols-outlined {
    font-size: 5vw;
  }


  .footer-certifications {
    justify-content: center;
    margin: 0;
    gap: 3vw;
  }

  .footer-cert-logo {
    width: 18vw;
    height: 12vw;
    min-width: auto;
    padding: 1vw;
    border-radius: 1.5vw;
  }


  .col-lg-6 p {
    font-size: 4vw;
    line-height: 1.7;
  }

  /* ALL BUTTONS */
  .hero-btn,
  .ps-view-btn,
  .message-btn,
  .contact-btn-1,
  .footer-btn-1 {
    padding: 0.8vw;
    border-radius: 3vw;
    width: fit-content;
    max-width: 100%;
  }

  /* BUTTON TEXT */
  .hero-btn .btn-text,
  .ps-view-text,
  .message-text-1,
  .contact-text-1,
  .footer-btn-1 .footer-btn {
    font-size: 3.1vw;
    padding: 3vw 5vw;
    border-radius: 2vw;
    white-space: nowrap;
  }

  /* BUTTON ICONS */
  .hero-btn .btn-icon,
  .ps-view-icon,
  .message-icon-1,
  .contact-icon-1,
  .footer-btn-1 .footer-icon-1 {
    width: auto;
    height: auto;
    padding: 0 4vw;
    font-size: 3.1vw;
  }
}

/* ================= DESKTOP ONLY ================= */
@media (min-width: 992px) {

  .hero-navbar .navbar {
    display: flex;
    align-items: center;
  }

  .navbar-collapse {
    display: flex !important;
    align-items: center;
    width: 100%;
  }

  /* CENTER MENU */
  .navbar-nav {
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5vw;
  }

  /* RIGHT BUTTON */
  .hero-navbar .btn-warning {
    margin-left: auto;
  }
}


/* ================= MOBILE ================= */
@media (max-width: 991px) {

  /* IMPORTANT */
  .navbar-collapse {
    display: none;
  }

  .navbar-collapse.show {
    display: block;
  }

  .navbar-nav {
    align-items: center;
    /* text-align: center; */
    margin-left: 3vw;
  }

  .hero-navbar .btn-warning {
    margin: 4vw auto 0;
    display: block;
    width: fit-content;
    border-radius: 2vw;
  }
}