/* General Responsive Styles */
@media (max-width: 991.98px) {
  .ftco-section {
    padding: 3em 0;
  }

  .ftco-navbar-light .container {
    display: flex;
    justify-content: space-between; /* Distribute items */
    align-items: center;
    padding: 0 10px; /* Reduced padding */
  }

  .ftco-navbar-light .profile-pic {
    order: 1; /* Logo first */
  }

  .ftco-navbar-light .profile-pic .logo-img {
    width: 40px; /* Smaller logo */
    height: 40px;
    margin-right: 5px; /* Reduced space */
  }

  .ftco-navbar-light .navbar-brand {
    order: 2; /* Brand name after logo */
    margin-left: 5px; /* Reduced space */
    margin-right: auto; /* Push brand and logo to the left, toggler to the right */
    font-size: 20px; /* Smaller font size for brand */
  }

  .ftco-navbar-light .navbar-toggler {
    order: 3; /* Toggler last */
    margin-left: 5px; /* Reduced space */
  }

  .ftco-navbar-light .navbar-collapse {
    position: absolute;
    top: 100%; /* Position below the navbar */
    left: 0;
    right: 0; /* Take full width */
    width: 100%; /* Ensure full width */
    background: #000; /* Background for the menu */
    padding: 1rem 0; /* Adjusted padding */
    box-shadow: none; /* Removed box-shadow */
    z-index: 1000;
    display: none; /* Hide by default */
    text-align: center; /* Center the menu content */
  }

  .ftco-navbar-light .navbar-collapse.show {
    display: block !important; /* Show when active, override Bootstrap's default */
  }

  .ftco-navbar-light .navbar-nav {
    flex-direction: column; /* Stack nav items vertically */
    width: 100%;
    align-items: center; /* Center the nav items */
  }

  .ftco-navbar-light .navbar-nav .nav-item {
    width: 100%;
    text-align: center; /* Center align menu items */
  }

  .ftco-navbar-light .navbar-nav .nav-item .nav-link {
    padding: 0.5rem 0;
    color: #fff; /* Ensure text is visible */
  }

  .heading-section h2 {
    font-size: 36px;
  }
}
/* Hero Section */
@media (max-width: 991.98px) {
  .owl-carousel.home-slider,
  .owl-carousel.home-slider .slider-item {
    height: auto;
  }

  .owl-carousel.home-slider .slider-item .slider-text {
    height: auto;
    padding: 6em 0;
    text-align: center;
  }

  .owl-carousel.home-slider .slider-item .slider-text .row {
    flex-direction: column;
    align-items: center;
  }

  .owl-carousel.home-slider .slider-item .slider-text .one-third.js-fullheight.order-md-last {
    order: 1 !important;
    width: 100%;
    height: auto !important;
    margin-bottom: 2rem;
  }

  .owl-carousel.home-slider .slider-item .slider-text .one-forth {
    order: 2 !important;
    width: 100%;
    position: static !important;
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    padding: 0 15px;
  }

  .hero-img-container img {
    width: 250px !important;
    height: 250px !important;
  }
}

/* About, Skills, Projects */
@media (max-width: 767.98px) {
  .ftco-about .row {
    flex-direction: column;
    align-items: center;
  }

  .ftco-about .profile-pic-wrapper {
    margin-bottom: 2rem;
  }

  .ftco-project .col-md-4,
  .ftco-project .col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Contact and Footer */
@media (max-width: 991.98px) {
  .ftco-section.contact-section {
    padding: 2em 0; /* Reduce padding for contact section on tablets and smaller */
  }
}

@media (max-width: 767.98px) {
  .contact-section .box {
    margin-bottom: 1rem; /* Reduced margin for a tighter look */
    width: 100%; /* Let Bootstrap handle column width */
  }

  .contact-section .box .icon {
    font-size: 2.5rem; /* Adjust icon size for tablets and smaller */
  }

  .ftco-footer .col-md {
    margin-bottom: 30px;
  }
}

/* Mobile Specific Styles */
@media (max-width: 575.98px) {
  .contact-section .box {
    padding: 1.5rem; /* Adjust padding for smaller boxes */
  }
  .contact-section .box .icon {
    font-size: 2rem; /* Further adjust icon size for mobile phones */
    margin-bottom: 1em; /* Adjust icon margin */
  }
  .contact-section .row.d-flex.contact-info.mb-5 {
    margin-left: -5px; /* Adjust row margins for better spacing */
    margin-right: -5px;
  }
  .contact-section .row.d-flex.contact-info.mb-5 > [class*="col-"] {
    padding-left: 5px; /* Adjust column padding for better spacing */
    padding-right: 5px;
  }
}

/* Mobile Specific Styles */
@media (max-width: 575.98px) {
  .heading-section h2 {
    font-size: 28px; /* Slightly smaller heading */
  }

  .hero .slider-text h1 {
    font-size: 24px; /* Smaller hero title */
  }

  .hero-img-container img {
    width: 160px !important; /* Smaller hero image */
    height: 160px !important;
  }

  .ftco-about .profile-pic {
    width: 140px; /* Smaller about profile pic */
    height: 140px;
  }

  .project {
    height: 180px; /* Smaller project card height */
  }

  /* Adjust general text sizes for better readability on small screens */
  body {
    font-size: 14px;
  }

  p {
    font-size: 14px;
  }

  .ftco-navbar-light .navbar-brand {
    font-size: 18px; /* Further reduce brand font size */
  }

  .ftco-navbar-light .navbar-nav .nav-item .nav-link {
    font-size: 14px; /* Smaller nav link font size */
  }

  .ftco-footer .ftco-footer-widget h2 {
    font-size: 18px; /* Smaller footer heading */
  }

  .ftco-footer p, .ftco-footer a {
    font-size: 13px; /* Smaller footer text */
  }

  .contact-section .box h3 {
    font-size: 15px; /* Smaller contact box heading */
  }
}