/*Extra small devices (portrait phones, less than 576px)*/
@media (min-width: 320px) and (max-width: 575px) {
  html {
    font-size: 14px;
  }

  h1 {
    font-size: 2.25rem;
  }
  h2 {
    font-size: 1.7441em;
  }
  .mt--120 {
    margin-top: -50px;
  }
  .pt-150 {
    padding-top: 50px;
  }
  .ptb-150 {
    padding: 90px 0;
  }
  .hero-slider-content h1 {
    font-size: 2.25rem;
  }
  .action-btns a.btn,
  .app-download-list li {
    margin-bottom: 15px;
  }

  /* Header Mobile Height to Match Logo */
  #header-top-bar {
    padding: 2px 0 !important;
    font-size: 0.75rem !important;
  }

  .navbar {
    padding: 2px 0 !important;
    min-height: 50px !important; /* Slightly larger to accommodate logo */
  }

  .navbar .container {
    padding: 0 15px;
  }

  /* Logo sizing to match original header.php (width: 15%) with visibility fix */
  .hide-on-desktop {
    width: 15% !important;
    max-height: 50px !important;
    min-width: 60px !important; /* Prevent logo from becoming too small */
    height: auto !important;
  }

  .navbar-brand img,
  .navbar img {
    width: 15% !important;
    max-height: 50px !important;
    min-width: 60px !important;
    height: auto !important;
  }

  /* Remove excess body padding */
  body {
    padding-top: 0 !important;
  }

  /* Main content starts properly */
  .main {
    margin-top: 0 !important;
  }

  /* Breadcrumb Navigation Mobile Fix - Enhanced Visibility without Background */
  .breadcrumb {
    display: block !important; /* Ensure breadcrumb is visible */
    font-size: 1rem !important; /* Increased for readability */
    line-height: 1.6 !important;
    word-wrap: break-word;
    white-space: normal !important;
    color: #333 !important; /* Better contrast */
    margin-top: 15px !important; /* Increased spacing after header */
    margin-bottom: 15px !important;
    padding: 12px 0 !important; /* Increased padding for visibility */
    font-weight: 500 !important;
    z-index: 1000 !important; /* Prevent overlap by other elements */
    position: relative; /* Ensure proper layering */
  }

  .breadcrumb li {
    display: inline !important;
    font-size: 1rem !important;
    color: #333 !important;
  }

  .breadcrumb li a {
    color: #007bff !important;
    text-decoration: none;
    font-weight: 600 !important;
  }

  .breadcrumb li a:hover {
    text-decoration: underline;
  }

  /* Service Details Section Spacing */
  .service-details-section {
    padding-top: 30px !important;
  }

  /* Service Details Mobile Responsiveness */
  .service-details-wrap {
    padding: 0 10px;
  }

  .service-details-wrap h1 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
    text-align: center;
  }

  .service-details-wrap h2 {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    margin-bottom: 20px !important;
    text-align: center;
  }

  .service-details-wrap h3 {
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
    margin-top: 20px !important;
    text-align: center;
  }

  .service-details-wrap p,
  .service-details-wrap ul {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    text-align: left;
  }

  .service-details-wrap img {
    margin-bottom: 20px;
    margin-top: 10px;
  }

  .services-detail-content {
    text-align: center;
  }

  /* Trust Ribbon Mobile */
  .trust-ribbon > div {
    flex-direction: column !important;
  }

  .trust-ribbon > div > div {
    margin-bottom: 15px;
    width: 100% !important;
  }

  /* Sidebar Mobile Fix */
  .sidebar-right {
    padding-left: 0 !important;
    margin-top: 30px;
  }

  /* Accordion FAQ Mobile */
  .accordion-faq .card-header h6 {
    font-size: 0.9rem !important;
  }

  /* Contact Form Mobile */
  .contact-us-form h4 {
    font-size: 1.2rem !important;
    text-align: center;
  }

  /*ceo message*/
  .year-highlight-text h4 sub {
    top: -10px;
  }
  .year-highlight-text h4 span {
    font-size: 215px;
    line-height: 150px;
  }

  /*switchable block*/
  .core-idea-wrap.ptb-100 {
    padding-top: 15px;
  }

  /*portfolio*/
  .filter-btn {
    margin-bottom: 10px;
  }
  .portfolio-item,
  .gap {
    width: auto;
  }

  /*testimonial with counter*/
  .counter-wrap {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .counter-wrap li {
    padding: 15px;
  }

  .contact-us-form .form-group {
    margin-bottom: 0;
  }

  .arrow-indicator.owl-theme .owl-nav {
    position: relative;
  }

  /*blog*/
  .single-blog-card {
    margin-bottom: 0;
  }

  /*all col*/
  div[class*="col-"]:not(:last-of-type) {
    margin-bottom: 20px !important;
  }
  .row > div[class*="col-"]:last-of-type {
    margin-bottom: 0;
  }

  .footer-bottom .row > div[class*="col-"]:first-child {
    margin-bottom: 0 !important;
  }
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767px) {
  .mt--120 {
    margin-top: -50px;
  }
  .pt-150 {
    padding-top: 60px;
  }

  .action-btns a.btn {
    margin-bottom: 15px;
  }

  /* Header Small Device Height to Match Logo */
  #header-top-bar {
    padding: 2px 0 !important;
  }

  .navbar {
    padding: 3px 0 !important;
    min-height: 55px !important; /* Slightly larger to accommodate logo */
  }

  /* Logo sizing to match original header.php (width: 15%) */
  .hide-on-desktop {
    width: 15% !important;
    max-height: 55px !important;
    min-width: 70px !important; /* Prevent logo from becoming too small */
    height: auto !important;
  }

  .navbar-brand img,
  .navbar img {
    width: 15% !important;
    max-height: 55px !important;
    min-width: 70px !important;
    height: auto !important;
  }

  /* Breadcrumb Navigation Mobile Fix - Enhanced Visibility without Background */
  .breadcrumb {
    display: block !important; /* Ensure breadcrumb is visible */
    font-size: 1rem !important; /* Increased for readability */
    line-height: 1.6 !important;
    word-wrap: break-word;
    white-space: normal !important;
    color: #333 !important; /* Better contrast */
    margin-top: 15px !important; /* Increased spacing after header */
    margin-bottom: 15px !important;
    padding: 12px 0 !important; /* Increased padding for visibility */
    font-weight: 500 !important;
    z-index: 1000 !important; /* Prevent overlap by other elements */
    position: relative; /* Ensure proper layering */
  }

  .breadcrumb li {
    display: inline !important;
    font-size: 1rem !important;
    color: #333 !important;
  }

  .breadcrumb li a {
    color: #007bff !important;
    text-decoration: none;
    font-weight: 600 !important;
  }

  .breadcrumb li a:hover {
    text-decoration: underline;
  }

  /* Service Details Mobile Responsiveness */
  .service-details-wrap h1 {
    font-size: 1.9rem !important;
    text-align: center;
  }

  .service-details-wrap h2 {
    font-size: 1.1rem !important;
    text-align: center;
  }

  .service-details-wrap h3 {
    font-size: 1.4rem !important;
    text-align: center;
  }

  /* Trust Ribbon Mobile */
  .trust-ribbon > div {
    flex-direction: column !important;
  }

  .trust-ribbon > div > div {
    margin-bottom: 15px;
  }

  /* Sidebar Mobile Fix */
  .sidebar-right {
    padding-left: 0 !important;
    margin-top: 30px;
  }

  /*ceo message*/
  .year-highlight-text h4 sub {
    top: -10px;
  }
  .year-highlight-text h4 span {
    font-size: 215px;
    line-height: 150px;
  }

  /*switchable block*/
  .core-idea-wrap.ptb-100 {
    padding-top: 15px;
  }

  /*portfolio*/
  .filter-btn {
    margin-bottom: 10px;
  }
  .portfolio-item,
  .gap {
    width: auto;
  }

  /*testimonial with counter*/
  .counter-wrap {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  .counter-wrap li {
    padding: 15px;
  }

  .contact-us-form .form-group {
    margin-bottom: 0;
  }

  .arrow-indicator.owl-theme .owl-nav {
    position: relative;
  }

  /*blog*/
  .single-blog-card {
    margin-bottom: 0;
  }

  /*promo*/
  div[class*="col-"]:not(:last-of-type) {
    margin-bottom: 20px !important;
  }
  .row > div[class*="col-"]:last-of-type {
    margin-bottom: 0;
  }
  .footer-bottom .row > div[class*="col-"]:first-child {
    margin-bottom: 0 !important;
  }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991px) {
  .mt--120 {
    margin-top: -50px;
  }
  .action-btns a.btn {
    margin-bottom: 15px;
  }

  /* Header Tablet Height to Match Logo */
  #header-top-bar {
    padding: 3px 0 !important;
  }

  .navbar {
    padding: 4px 0 !important;
    min-height: 65px !important; /* Matches logo max-height */
  }

  /* Logo sizing to match original header.php (width: 17%) */
  .hide-on-mobile {
    width: 17% !important;
    max-height: 65px !important;
    min-width: 80px !important; /* Prevent logo from becoming too small */
    height: auto !important;
  }

  .navbar-brand img,
  .navbar img {
    width: 17% !important;
    max-height: 65px !important;
    min-width: 80px !important;
    height: auto !important;
  }

  /* Breadcrumb Navigation Tablet Fix */
  .breadcrumb {
    font-size: 0.95rem !important;
    color: #333 !important;
  }

  .breadcrumb li {
    color: #333 !important;
  }

  .breadcrumb li a {
    color: #007bff !important;
    text-decoration: none;
    font-weight: 500;
  }

  /* Service Details Tablet Responsiveness */
  .service-details-wrap h1 {
    font-size: 2rem !important;
    text-align: center;
  }

  .service-details-wrap h2 {
    font-size: 1.15rem !important;
    text-align: center;
  }

  /* Sidebar Tablet Fix */
  .sidebar-right {
    padding-left: 15px !important;
    margin-top: 30px;
  }
}

/*Large devices (desktops, 992px and up) - Height reduction for web/desktop*/
@media (min-width: 992px) {
  /* Header Desktop Height to Match Logo */
  #header-top-bar {
    padding: 3px 0 !important;
  }

  .navbar {
    padding: 4px 0 !important;
    min-height: 70px !important; /* Matches logo max-height */
  }

  /* Logo sizing to match original header.php (width: 17%) */
  .hide-on-mobile {
    width: 17% !important;
    max-height: 70px !important;
    min-width: 90px !important; /* Prevent logo from becoming too small */
    height: auto !important;
  }

  .navbar-brand img,
  .navbar img {
    width: 17% !important;
    max-height: 70px !important;
    min-width: 90px !important;
    height: auto !important;
  }
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  /* Maintain reduced height for larger desktops */
  #header-top-bar {
    padding: 3px 0 !important;
  }

  .navbar {
    padding: 4px 0 !important;
    min-height: 70px !important; /* Matches logo max-height */
  }

  /* Logo sizing to match original header.php (width: 17%) */
  .hide-on-mobile {
    width: 17% !important;
    max-height: 70px !important;
    min-width: 90px !important;
    height: auto !important;
  }
}