/* =====================================================
   SLTIET RESPONSIVE STYLES
   Responsive view for all resolutions (desktop + mobile)
   WITHOUT changing any existing design/CSS
   ===================================================== */

/* =====================================================
   MOBILE MENU TOGGLE BUTTON STYLES
   ===================================================== */
.mobile-menu-toggle {
  display: none;
  background: #e36e0f;
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 5px;
  margin-right: 10px;
  float: right;
}

.mobile-menu-toggle:focus {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}

.mobile-menu-toggle:active {
  background: #c55a0d;
}

/* Mobile menu default hidden state - overridden by JS */
/* Use ID selector for higher specificity */
#navContainer {
  display: flex !important;
}

@media (max-width: 991px) {
  .mobile-menu-toggle {
    display: block !important;
  }
  
  #navContainer {
    display: none !important;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #f8f9fa;
    border-bottom: 2px solid #e36e0f;
    flex-wrap: wrap !important;
    padding: 10px 0;
    z-index: 999;
  }
  
#navContainer.mobile-open {
    display: flex !important;
  }
  
.nav-link {
    width: 100%;
    border-right: none !important;
    border-bottom: 1px solid #ddd;
    padding: 15px 18px !important;
    font-size: 18px !important;
  }
  
  .menu-submenu .submenu-link {
    padding: 14px 18px !important;
    font-size: 17px !important;
  }
  
  .menu-sub-submenu .submenu-link {
    padding: 12px 16px !important;
    font-size: 16px !important;
  }
  
  /* Mobile submenu - hide by default */
  .menu-submenu {
    display: none !important;
    position: static;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Mobile submenu - show when parent has class */
  .nav-item > .menu-submenu.show-submenu {
    display: block !important;
  }
  
  /* Mobile sub-submenu - hide by default */
  .menu-sub-submenu {
    display: none !important;
    position: static;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Mobile sub-submenu - show when parent has class */
  .submenu-item > .menu-sub-submenu.show-submenu {
    display: block !important;
  }
  
  /* Mobile menu item with submenu indicator */
  .nav-item a .fa-chevron-down,
  .submenu-link .fa-chevron-right {
    float: right;
    margin-top: 5px;
    transition: transform 0.3s ease;
  }
  
  .nav-item > a .fa-chevron-down.rotate,
  .submenu-link > .fa-chevron-right.rotate {
    transform: rotate(180deg);
  }
  
  /* Make nav properly positioned */
  .ajax-nav {
    position: relative !important;
  }
}

/* Hide hamburger on desktop */
@media (min-width: 992px) {
  .mobile-menu-toggle {
    display: none !important;
  }
  
  #navContainer {
    display: flex !important;
  }
}

/* =====================================================
   BASE RESPONSIVE - Apply to all sizes  
   NOTE: Only apply box-sizing, no image changes to preserve design
   ===================================================== */
* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body, html {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* NOTE: No img rule here - preserves original slider and all image styles */

/* =====================================================
   LARGE DESKTOP - 1400px and above
   ===================================================== */
@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
  }
}

/* =====================================================
   ZOOM/INCREASED VIEWPORT HANDLING
   Fixes header layout when user zooms with Ctrl+
   ===================================================== */
@media (min-width: 1200px) {
  /* Header flex wrap when zoomed */
  .header-content {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
  }
  
  .logo-section {
    text-align: center;
  }
  
  .logo-section img {
    height: 100px !important;
    max-width: 100%;
  }
  
  .right-section {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
  }
  
  .social-icons {
    justify-content: center !important;
  }
  
  .social-icons a {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
  
  .theme-selector {
    margin-top: 5px;
  }
  
  /* Ensure navbar fits */
  .ajax-nav {
    overflow-x: visible !important;
  }
  
  .nav-container {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 5px !important;
  }
}

/* Extra handling for very zoomed state (1250px effective width) */
@media (min-width: 1250px) and (max-width: 1399px) {
  .banner-header .container {
    padding: 10px !important;
  }
  
  .header-content {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  
  .logo-section img {
    height: 90px !important;
  }
  
  .right-section {
    gap: 12px !important;
  }
  
  .social-icons a {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }
}

/* =====================================================
   LAPTOP/SMALL DESKTOP - 1200px to 1399px
   ===================================================== */
@media (max-width: 1399px) {
  .container {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* =====================================================
   TABLET LANDSCAPE - 992px to 1199px  
   ===================================================== */
@media (max-width: 1199px) {
  /* Main 3-column layout adjustments */
  .white-wrapper > div,
  section.white-wrapper > div,
  [style*="display: flex"] {
    flex-wrap: wrap;
  }
  
  /* 3 columns become 2 + 1 */
  .white-wrapper > div > div:first-child,
  .white-wrapper > div > div:nth-child(2),
  .white-wrapper > div > div:last-child,
  [style*="display: flex"] > div:first-child,
  [style*="display: flex"] > div:nth-child(2),
  [style*="display: flex"] > div:last-child {
    width: 50% !important;
  }
  
  /* Make sidebars full width on tablet */
  .white-wrapper > div > div:last-child {
    width: 100% !important;
  }
  
  /* Course cards - reduce fixed sizes */
  .glass-card {
    max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
    min-height: 150px;
  }
  
  .glass-card h3 {
    font-size: 14px !important;
  }
  
  .glass-card i {
    font-size: 32px !important;
  }
}

/* =====================================================
   TABLET PORTRAIT - 768px to 991px
   ===================================================== */
@media (max-width: 991px) {
  /* Stack all columns vertically */
  .white-wrapper > div,
  section.white-wrapper > div,
  [style*="display: flex"],
  div[style*="display: flex"],
  .banner-header .container > div {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  
  /* Each column becomes full width */
  .white-wrapper > div > div,
  [style*="display: flex"] > div,
  section.white-wrapper > div > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin-bottom: 15px;
    padding: 10px;
  }
  
  /* Quick View and News sidebars */
  .quick-view-widget,
  .news-sidebar,
  .widget {
    width: 100%;
    margin-bottom: 20px;
  }
  
  /* Header adjustments */
  .banner-header {
    padding: 10px 0 !important;
  }
  
  .banner-header .container {
    padding: 0 10px !important;
  }
  
  .header-content {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .logo-section img {
    height: 80px !important;
  }
  
  .right-section {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  .social-icons {
    justify-content: center !important;
  }
  
  /* Course cards become grid */
  .row.padding-top,
  div.row,
  .row {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  
  .col-xs-3,
  .col-sm-3,
  .col-sm-6,
  .col-md-3,
  .col-lg-3 {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin-bottom: 15px;
  }
  
  /* Footer multi-column to single */
  #footer-style-2 .container > div {
    width: 100% !important;
    margin-bottom: 30px;
  }
  
  /* Copyright section */
  #copyrights .container > div {
    width: 100% !important;
    text-align: center !important;
  }
  
  #copyrights .footer-menu ul {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
  }
  
  /* Nav menu adjustments */
  .nav-container {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  .nav-link {
    padding: 10px 8px !important;
    font-size: 12px !important;
  }
  
  /* Marquee adjustments */
  .modern-marquee {
    padding: 10px 0 !important;
  }
  
  .marquee-content {
    font-size: 12px !important;
  }
  
  /* News carousel */
  .shop_carousel {
    min-width: 250px;
  }
  
  .shop_carousel img {
    height: 180px !important;
  }
}

/* =====================================================
   LARGE MOBILE - 576px to 767px
   ===================================================== */
@media (max-width: 767px) {
  /* Full stack layout */
  body {
    padding-top: 160px !important;
  }
  
  /* Sticky header mobile */
  #sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
  }
  
  /* Header mobile */
  .banner-header {
    padding: 5px 0 !important;
  }
  
  .logo-section img {
    height: 50px !important;
    display: block;
    margin: 0 auto;
  }
  
  .right-section {
    flex-direction: row !important;
    gap: 5px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  
  .social-icons {
    gap: 5px !important;
  }
  
  .social-icons a {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
  }
  
  .theme-selector {
    display: none !important; /* Hide theme selector on mobile */
  }
  
  /* Navigation - MOBILE MENU STYLE */
  .ajax-nav {
    padding: 3px 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  .nav-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: max-content !important;
    min-width: 100%;
  }
  
.nav-link {
    padding: 8px 6px !important;
    font-size: 16px !important;
    white-space: nowrap !important;
    border-right: 1px solid #ddd !important;
    flex-shrink: 0 !important;
  }
  
  /* Main content sections */
  section {
    padding: 15px 10px !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  .white-wrapper {
    padding: 15px 10px !important;
  }
  
  /* News sections - full column */
  .white-wrapper > div > div,
  [style*="display: flex"] > div {
    width: 100% !important;
    margin-bottom: 15px;
    padding: 10px;
  }
  
  /* Course cards - 2 per row */
  .col-xs-3,
  .col-sm-3,
  .col-sm-6,
  .entry {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  
  .glass-card {
    padding: 15px !important;
    min-height: 120px;
  }
  
  .glass-card i {
    font-size: 28px !important;
    margin-bottom: 8px !important;
  }
  
  .glass-card h3 {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }
  
  /* Latest news horizontal */
  .latest-news-horizontal {
    padding: 15px 0 !important;
  }
  
  .latest-news-horizontal h2 {
    font-size: 1.5em !important;
  }
  
  .shop_carousel {
    min-width: 200px;
    max-width: 100%;
  }
  
  .shop_carousel img {
    height: 150px !important;
  }
  
  /* Footer */
  #footer-style-2 {
    padding: 30px 10px 20px !important;
  }
  
  #footer-style-2 .widget {
    padding-right: 0 !important;
  }
  
  #footer-style-2 .title h3 {
    font-size: 18px !important;
  }
  
  .footer-menu ul {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
  
  /* Title sizes */
  h2 {
    font-size: 1.4em !important;
  }
  
  .general-title h2 {
    font-size: 1.3em !important;
  }
  
  /* Buttons */
  a[style*="display: inline-block"],
  a[style*="background"] {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }
  
  /* Scroll to top button */
  .dmtop {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 16px !important;
    bottom: 15px !important;
    right: 15px !important;
  }
}

/* =====================================================
   SMALL MOBILE - 400px to 575px
   ===================================================== */
@media (max-width: 575px) {
  body {
    padding-top: 200px !important;
  }
  
  /* Single column course cards */
  .col-xs-3,
  .col-sm-3,
  .col-sm-6,
  .entry,
  .row.padding-top > div {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  .glass-card {
    min-height: 100px;
  }
  
  .glass-card i {
    font-size: 24px !important;
    margin-bottom: 5px !important;
  }
  
  .glass-card h3 {
    font-size: 11px !important;
  }
  
  /* Header elements */
  .logo-section img {
    height: 50px !important;
  }
  
  .banner-header .container {
    padding: 0 8px !important;
  }
  
  /* Sidebar news */
  .marquee-content {
    font-size: 11px !important;
  }
  
  /* News cards */
  .shop_carousel {
    min-width: 180px;
  }
  
  .shop_carousel img {
    height: 120px !important;
  }
  
  .shop_carousel p {
    font-size: 10px !important;
  }
  
  /* Footer */
  #footer-style-2 {
    padding: 20px 8px 15px !important;
  }
  
  #footer-style-2 .widget p {
    font-size: 13px !important;
  }
  
  /* Contact info */
  .widget ul li {
    font-size: 12px !important;
  }
  
  /* Buttons resize */
  a[style*="display: inline-block"],
  a[style*="background"] {
    padding: 8px 15px !important;
    font-size: 12px !important;
  }
}

/* =====================================================
   EXTRA SMALL MOBILE - Below 400px
   ===================================================== */
@media (max-width: 400px) {
  body {
    padding-top: 180px !important;
  }
  
  /* Logo further reduce */
  .logo-section img {
    height: 45px !important;
  }
  
/* Nav link minimal */
  .nav-link {
    padding: 6px 4px !important;
    font-size: 14px !important;
  }
  
  /* Titles */
  h2 {
    font-size: 1.1em !important;
  }
  
  .general-title h2 {
    font-size: 1em !important;
  }
  
  /* News cards minimal */
  .shop_carousel {
    min-width: 150px;
  }
  
  .shop_carousel img {
    height: 100px !important;
  }
  
  /* Marquee text */
  .marquee-content a {
    font-size: 10px !important;
    padding: 5px 8px !important;
  }
  
  /* Footer text */
  #footer-style-2 .widget p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  
  #copyrights {
    padding: 15px 0 !important;
    font-size: 12px !important;
  }
  
  /* Social icons reduce */
  .social-icons a {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
  }
}

/* =====================================================
   TOUCH DEVICE OPTIMIZATIONS
   ===================================================== */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets for mobile */
  .nav-link {
    padding: 12px 10px !important;
  }
  
  .social-icons a {
    min-width: 44px;
    min-height: 44px;
  }
  
  a[style*="display: inline-block"],
  button {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Remove hover effects on touch */
  .nav-link:hover {
    background: transparent !important;
  }
}

/* =====================================================
   ORIENTATION CHANGE HANDLING
   ===================================================== */
/* Landscape mobile */
@media (max-width: 767px) and (orientation: landscape) {
  body {
    padding-top: 160px !important;
  }
  
  .logo-section img {
    height: 50px !important;
  }
  
  .banner-header {
    padding: 5px 0 !important;
  }
  
  .right-section {
    flex-direction: row !important;
  }
  
  /* Course cards 4 per row in landscape */
  .col-xs-3,
  .col-sm-3 {
    width: 25% !important;
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}

/* =====================================================
   PRINT STYLES (if needed)
   ===================================================== */
@media print {
  .ajax-nav,
  .modern-marquee,
  .dmtop {
    display: none !important;
  }
  
  body {
    padding-top: 0 !important;
  }
  
  .white-wrapper > div,
  section.white-wrapper > div {
    flex-direction: column !important;
  }
  
  .white-wrapper > div > div {
    width: 100% !important;
    page-break-inside: avoid;
  }
}