/* ============================================
   Correction / Bug Fixes – KDSCoder 2025
   ============================================ */

/* Fix road-map overflow on mobile */
.road_map_sec {
  flex-wrap: wrap;
}

.left_road_map,
.right_road_map {
  min-width: 0;
}

/* Fix blog section left-right btn positioning */
.blog .left_right_btn {
  position: absolute;
  display: inline-block;
  display: flex;
  align-items: center;
}

/* Fix card link duplication (two class attrs in old HTML) */
.recent_head_btn .tutorial_links {
  margin-left: auto;
}

/* Fix swiper height */
.swiper.sample-slider .swiper-slide img {
  object-fit: contain;
}

/* Fix profile_bx overflow hidden (prevents input showing) */
.profile_bx form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Fix flash box initial state */
.flash_bx {
  display: none;
}

.flash_bx.flash_bx_show {
  display: block;
}

/* Fix contact form grid columns on small screens */
@media (max-width: 600px) {
  .contact_sec form {
    grid-template-columns: 1fr !important;
  }

  .card_cont textarea,
  .card_cont input[type="submit"] {
    grid-column: span 1 !important;
  }
}

/* Fix hero content_bx wordbreak on mobile */
.content_bx p {
  word-break: break-word;
}

/* AOS fade-in fix – prevent FOUC */
[data-aos] {
  opacity: 0;
}

[data-aos].aos-animate {
  opacity: 1;
}

/* Fix .w-50 on mobile */
@media (max-width: 768px) {
  .w-50 {
    width: 100% !important;
  }
}

/* Fix nav a text-decoration conflict */
header nav .left_side ul li a {
  text-decoration: none !important;
}

/* Card padding fix inside recent_tutorial */
.recent_tutorial .card {
  padding: 0;
}

/* Font Awesome shims - not needed with FA6 */
/* removed v4-shims import */

/* Ensure tools section spacing is consistent */
.tools_section .tools_grid {
  padding-top: 0;
}

/* Fix footer h1 → h2 semantic */
.foot_bx h2 {
  font-size: 14px;
}

.foot_bx h1 {
  font-size: 14px;
}

/* backward compat */

/* ============================================
   Additional Mobile / Responsive Bug Fixes
   ============================================ */

/* Prevent auth modals from ever overflowing the viewport */
.login_signup_bx {
  max-width: min(400px, 95vw);
  box-sizing: border-box;
}

/* Global safety: images/media never overflow their container */
img, video, svg, iframe, canvas, embed, object {
  max-width: 100%;
  height: auto;
}

/* Prevent long words/URLs from causing horizontal scroll */
p, h1, h2, h3, h4, h5, h6, li, span, label {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Prevent tables from overflowing */
table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* Profile box: never go off-screen on small screens */
@media (max-width: 480px) {
  .profile_bx {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 80px;
    width: 94%;
    max-width: 330px;
  }
  .profile_bx_active {
    transform: translateX(-50%) !important;
  }
}

/* Fix footer grid on very small screens */
@media (max-width: 400px) {
  .footer_top {
    grid-template-columns: 1fr !important;
  }
  .foot_brand {
    grid-column: span 1 !important;
  }
}

/* Fix stats on single column at 360px */
@media (max-width: 360px) {
  .stats_grid {
    grid-template-columns: 1fr !important;
  }
}

/* Roadmap tabs scrollable on mobile */
.roadmap_tabs {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.roadmap_tabs::-webkit-scrollbar {
  display: none;
}

/* Swiper: prevent overflowing the viewport */
.swiper.sample-slider {
  overflow: hidden;
}

/* Fix search bar data dropdown overflow on mobile */
@media (max-width: 480px) {
  .search_bx_data {
    width: 290px;
  }
}

/* Make the contact form grid reliable */
.contact_sec form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .contact_sec form {
    grid-template-columns: 1fr !important;
  }
  .card_cont[style*="grid-column"] {
    grid-column: span 1 !important;
  }
}

/* Ensure hire me section doesn't break layout */
.hire_me_sec {
  box-sizing: border-box;
}

/* Tools grid: always full width on mobile */
@media (max-width: 600px) {
  .tools_grid {
    grid-template-columns: 1fr !important;
  }
}

/* Video iframe always 100% width and responsive ratio */
.vs_player_wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;  /* 16:9 ratio */
}
.vs_player_wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
}