/* ================================
   Responsive Fixes for Mobile View
   ================================ */

/* --- Navbar Fix --- */
@media (max-width: 991px) {
  .navbar .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin-top: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }
  .navbar .btn-primary {
    margin-top: 10px;
    width: 100%;
  }
}

/* --- Topbar for Mobile --- */
@media (max-width: 1199px) {
  .topbar {
    display: block !important;
    text-align: center;
    padding: 8px 5px;
    font-size: 14px;
  }
  .topbar a {
    margin: 0 8px;
    display: inline-block;
    font-size: 14px;
  }
}
/* ==========================
   Responsive Topbar Settings
   ========================== */

/* Default - Show Desktop Topbar / Hide Mobile */
.topbar.desktop-topbar {
    display: block;
	background: linear-gradient(135deg,#ff5e15, #ffb347, #ffcc33, #ff5e15 );
}

.text-muted {
	color:black !important;
}

.topbar.mobile-topbar {
    display: none;
	background: linear-gradient(135deg,#ff5e15, #ffb347, #ffcc33, #ff5e15 );
}

/* Mobile & Tablet (up to 1199px) */
@media (max-width: 1199.98px) {
    .topbar.desktop-topbar {
        display: none !important;
    }
    .topbar.mobile-topbar {
        display: block !important;
    }
}




/* --- Carousel Captions --- */
@media (max-width: 768px) {
  .carousel-caption h1 {
    font-size: 1.8rem !important; /* smaller heading */
    line-height: 1.2;
  }
  .carousel-caption p {
    font-size: 1rem !important;
  }
  .carousel-caption .btn {
    padding: 8px 16px !important;
    font-size: 0.9rem !important;
  }
}

/* --- Project Section --- */
@media (max-width: 576px) {
  .project-content p,
  .project-content a.h4 {
    font-size: 0.95rem !important;
  }
  .project-img img {
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* --- General Typography Scaling --- */
@media (max-width: 480px) {
  h1, .display-1, .display-2 {
    font-size: 1.5rem !important;
  }
  h2, h3 {
    font-size: 1.25rem !important;
  }
  p {
    font-size: 0.95rem !important;
  }
}

/* --- custom image height --- */
.custom-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 500px; /* desktop */
}

@media (max-width: 768px) {
  .custom-img {
    max-height: 300px; /* mobile smaller */
  }
}