/* Media Queries for Responsive Design */
@media (max-width: 768px) {
    .top-bar, .navbar {
        flex-direction: column;
        text-align: center;
    }

    .navbar ul {
        flex-direction: column;
    }

    .hero {
        flex-direction: column;
        text-align: center;
    }

    .about-content {
        flex-direction: column;
    }

    .service-boxes {
        flex-direction: column;
        align-items: center;
    }

    .service-box {
        width: 100%;
        margin: 10px 0;
    }
}

@media (max-width: 480px) {
    .hero-text h1 {
        font-size: 1.8rem;
    }

    .hero-text p {
        font-size: 0.9rem;
    }

    .about-content .about-text {
        margin-right: 0;
    }
}
/* Mobile View */
@media (max-width: 768px) {
    .navbar,
    .sub-navbar {
      display: none; 
      
    }
  
}
   
  
  
  
   
  
   

  
@media (max-width: 992px) {
  #portfolioTabs {
    width: 70%;
  }
}

@media (max-width: 768px) {
  #portfolioTabs {
    width: 90%;
  }
}

@media (max-width: 576px) {
  #portfolioTabs {
    width: 100%;
    padding: 10px;
  }
}

/* banner-section home */
/* Responsive adjustments */
@media (max-width: 768px) {
  .banner-section .content h1 {
    font-size: 2rem; /* Smaller heading for mobile */
  }

  .banner-section .content p {
    font-size: 1rem; /* Smaller paragraph for mobile */
  }
}

@media (max-width: 576px) {
  .banner-section {
    height: auto; /* Allow height to adjust */
    padding: 20px; /* Add padding for smaller screens */
  }
}


/* footer  */
/* Responsive adjustments */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column; 
    padding: 0 20px; 
  }

  .left-column, .middle-column, .right-column {
    width: 100%; /* Full width for each column */
    margin: 10px 0; /* Space between stacked columns */
  }

  .map {
    width: 100%; /* Full width for the map */
    max-width: none; /* Remove max width on small screens */
  }
}