/* ========================================
   Mobile Responsive Styles - Enhanced
   ======================================== */

/* Mobile Menu Authentication Buttons */
.mobile-auth-buttons .th-btn {
  font-size: 15px !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

.mobile-auth-buttons .th-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(13, 94, 244, 0.3);
}

.mobile-user-section a,
.mobile-user-section button {
  transition: all 0.3s ease;
  font-size: 14px;
}

.mobile-user-section a:hover,
.mobile-user-section button:hover {
  transform: translateX(-3px);
  background: rgba(255,255,255,0.35) !important;
}

/* ========================================
   Mobile Menu Slide Animation Fix
   ======================================== */

/* Ensure menu slides from right perfectly */
@media (max-width: 991px) {
  .th-menu-wrapper {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    pointer-events: none;
  }
  
  .th-menu-wrapper.show,
  .th-menu-wrapper.th-body-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
  }
  
  .th-menu-area {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 85% !important;
    max-width: 350px !important;
    background: #fff !important;
    transform: translateX(100%) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: -5px 0 25px rgba(0,0,0,0.2) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .th-menu-wrapper.show .th-menu-area,
  .th-menu-wrapper.th-body-visible .th-menu-area {
    transform: translateX(0) !important;
  }
  
  /* Close button positioning */
  .th-menu-area > .th-menu-toggle {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    right: auto !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 1000 !important;
  }
}

/* ========================================
   Header Responsive Improvements
   ======================================== */

/* Hide header-top on mobile for cleaner look */
@media (max-width: 991px) {
  .header-layout1 .header-top {
    display: none !important;
  }
  
  .header-layout1 .menu-area {
    background-color: var(--white-color) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 10px 15px !important;
  }
  
  .header-layout1 .menu-area .container {
    padding: 0 !important;
  }
  
  .header-logo {
    max-width: 150px !important;
    padding: 8px 0 !important;
  }
  
  .header-logo img {
    max-height: 45px;
    width: auto;
  }
}

/* Mobile header buttons alignment */
@media (max-width: 991px) {
  .menu-area .row {
    margin: 0 !important;
    width: 100%;
  }
  
  .menu-area .col-auto {
    padding: 0 5px !important;
  }
  
  .th-menu-toggle {
    background: var(--theme-color) !important;
    color: white !important;
    border: none;
    padding: 10px 15px !important;
    border-radius: 8px;
    font-size: 20px;        line-height: 2;
    transition: all 0.3s ease;
  }
  
  .th-menu-toggle:hover {
    background: var(--title-color) !important;
    transform: scale(1.05);
  }
  
  .icon-btn {
    width: 42px;
    height: 42px;
    line-height: 42px !important;
    font-size: 18px !important;
    padding: 0 !important;
  }
  
  .icon-btn .badge {
    top: -5px;
    right: -8px;
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
  }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 991px) {
  .header-logo {
    max-width: 180px !important;
  }
  
  .header-logo img {
    max-height: 50px;
  }
  
  .icon-btn {
    width: 45px;
    height: 45px;
    line-height: 45px !important;
  }
}

/* ========================================
   Hero Slider Responsive
   ======================================== */

@media (max-width: 767px) {
  .th-hero-wrapper {
    min-height: 450px !important;
  }
  
  .hero-inner {
    padding: 40px 0 !important;
  }
  
  .hero-title {
    font-size: 28px !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
  }
  
  .hero-text {
    font-size: 14px !important;
    margin-bottom: 20px !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .th-btn {
    font-size: 14px !important;
    padding: 12px 24px !important;
  }
  
  .hero-img img {
    max-height: 250px;
    width: auto;
    margin: 0 auto;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hero-title {
    font-size: 36px !important;
  }
  
  .hero-text {
    font-size: 15px !important;
  }
}

/* ========================================
   Category Slider Responsive
   ======================================== */

@media (max-width: 767px) {
  .category-slider .category-card {
    padding: 20px 15px !important;
    margin: 0 5px;
  }
  
  .category-card .category-icon {
    width: 60px !important;
    height: 60px !important;
    font-size: 28px !important;
  }
  
  .category-card h3 {
    font-size: 16px !important;
    margin-top: 12px !important;
  }
  
  .category-card p {
    font-size: 13px !important;
  }
}

/* ========================================
   Section Spacing Mobile
   ======================================== */

@media (max-width: 767px) {
  .space {
    padding: 60px 0 !important;
  }
  
  .space-top {
    padding-top: 60px !important;
  }
  
  .space-bottom {
    padding-bottom: 60px !important;
  }
  
  .title-area {
    margin-bottom: 30px !important;
  }
  
  .sec-title {
    font-size: 26px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }
  
  .sec-text {
    font-size: 14px !important;
  }
  
  .sub-title {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }
}

/* ========================================
   About Section Responsive
   ======================================== */

@media (max-width: 767px) {
  .about-img {
    margin-bottom: 30px !important;
  }
  
  .about-img img {
    width: 100% !important;
    height: auto !important;
  }
  
  .about-content {
    text-align: center;
  }
  
  .about-feature {
    flex-direction: column;
    text-align: center;
    padding: 20px !important;
  }
  
  .about-feature-icon {
    margin-bottom: 15px;
    margin-left: 0 !important;
  }
}

/* ========================================
   Products Grid Responsive
   ======================================== */

@media (max-width: 767px) {
  .course-box,
  .product-card {
    margin-bottom: 25px !important;
  }
  
  .course-img,
  .product-img {
    height: 200px !important;
    object-fit: cover;
  }
  
  .course-content,
  .product-content {
    padding: 20px 15px !important;
  }
  
  .course-title,
  .product-title {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }
  
  .course-meta,
  .product-meta {
    font-size: 13px !important;
  }
  
  .course-price,
  .product-price {
    font-size: 20px !important;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .row.gy-4 > [class*='col-'] {
    width: 50% !important;
  }
}

@media (max-width: 575px) {
  .row.gy-4 > [class*='col-'] {
    width: 100% !important;
  }
}

/* ========================================
   Counter Section Responsive
   ======================================== */

@media (max-width: 767px) {
  .counter-card {
    margin-bottom: 30px !important;
    padding: 25px 15px !important;
    text-align: center;
  }
  
  .counter-number {
    font-size: 36px !important;
  }
  
  .counter-title {
    font-size: 15px !important;
  }
}

/* ========================================
   CTA Sections Responsive
   ======================================== */

@media (max-width: 767px) {
  .cta-wrap,
  .offer-card {
    padding: 35px 25px !important;
    text-align: center !important;
  }
  
  .cta-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
  }
  
  .cta-text {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }
  
  .cta-img {
    display: none;
  }
}

/* ========================================
   Team/Experts Section Responsive
   ======================================== */

@media (max-width: 767px) {
  .team-card,
  .expert-card {
    margin-bottom: 25px !important;
  }
  
  .team-img,
  .expert-img {
    height: 280px !important;
    object-fit: cover;
  }
  
  .team-content,
  .expert-content {
    padding: 20px 15px !important;
  }
  
  .team-title,
  .expert-title {
    font-size: 18px !important;
  }
  
  .team-desig,
  .expert-desig {
    font-size: 13px !important;
  }
}

/* ========================================
   Blog Section Responsive
   ======================================== */

@media (max-width: 767px) {
  .blog-box,
  .blog-card {
    margin-bottom: 30px !important;
  }
  
  .blog-img {
    height: 220px !important;
    object-fit: cover;
  }
  
  .blog-content {
    padding: 25px 20px !important;
  }
  
  .blog-title {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
  }
  
  .blog-meta {
    font-size: 12px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .blog-text {
    font-size: 14px !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ========================================
   Testimonials Responsive
   ======================================== */

@media (max-width: 767px) {
  .testi-box,
  .testimonial-card {
    padding: 25px 20px !important;
    margin: 0 10px;
  }
  
  .testi-text,
  .testimonial-text {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
  }
  
  .testi-author,
  .testimonial-author {
    flex-direction: column;
    text-align: center;
  }
  
  .testi-author-img,
  .testimonial-author-img {
    margin-bottom: 12px;
    margin-left: 0 !important;
  }
  
  .testi-author-name,
  .testimonial-author-name {
    font-size: 16px !important;
  }
}

/* ========================================
   Events Section Responsive
   ======================================== */

@media (max-width: 767px) {
  .event-card {
    flex-direction: column;
    margin-bottom: 25px !important;
  }
  
  .event-date {
    width: 100% !important;
    max-width: 100px;
    margin: 0 auto 15px !important;
    padding: 15px !important;
  }
  
  .event-content {
    padding: 20px !important;
    text-align: center;
  }
  
  .event-title {
    font-size: 18px !important;
  }
  
  .event-meta {
    font-size: 13px !important;
    justify-content: center;
  }
}

/* ========================================
   Partners/Logos Section Responsive
   ======================================== */

@media (max-width: 767px) {
  .partner-logo,
  .brand-logo {
    padding: 15px !important;
  }
  
  .partner-logo img,
  .brand-logo img {
    max-width: 100px !important;
    max-height: 50px !important;
  }
}

/* ========================================
   Footer Responsive
   ======================================== */

@media (max-width: 767px) {
  .footer-widget {
    margin-bottom: 35px !important;
    text-align: center;
  }
  
  .widget-title {
    font-size: 18px !important;
    margin-bottom: 20px !important;
  }
  
  .footer-text {
    font-size: 14px !important;
  }
  
  .footer-link {
    text-align: center;
  }
  
  .footer-social {
    justify-content: center !important;
  }
  
  .copyright-wrap {
    text-align: center;
    flex-direction: column;
    gap: 15px;
  }
}

/* ========================================
   Mobile Navigation Improvements
   ======================================== */

@media (max-width: 991px) {
  .th-menu-wrapper {
    z-index: 9999 !important;
  }
  
  .th-menu-area {
    max-width: 90%;
    margin: 0;
    background: #fff;
    height: 100vh;
    overflow-y: auto;
    box-shadow: -5px 0 20px rgba(0,0,0,0.1);
  }
  
  .th-mobile-menu {
    padding-bottom: 60px !important;
  }
  
  .th-mobile-menu ul li a {
    font-size: 15px !important;
    padding: 14px 0 !important;
  }
  
  .th-mobile-menu ul li ul li a {
    font-size: 14px !important;
    padding: 12px 0 !important;
  }
}

/* ========================================
   Utilities for Mobile
   ======================================== */

@media (max-width: 767px) {
  /* Hide on mobile */
  .d-mobile-none {
    display: none !important;
  }
  
  /* Full width buttons on mobile */
  .btn-mobile-full {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
  }
  
  /* Reduce margins on mobile */
  .mt-mobile-20 {
    margin-top: 20px !important;
  }
  
  .mb-mobile-20 {
    margin-bottom: 20px !important;
  }
  
  /* Center text on mobile */
  .text-mobile-center {
    text-align: center !important;
  }
  
  /* Smaller padding on mobile */
  .p-mobile-20 {
    padding: 20px !important;
  }
}

/* ========================================
   Landscape Mobile Optimizations
   ======================================== */

@media (max-width: 767px) and (orientation: landscape) {
  .th-hero-wrapper {
    min-height: 350px !important;
  }
  
  .hero-inner {
    padding: 30px 0 !important;
  }
  
  .hero-title {
    font-size: 24px !important;
  }
}

/* ========================================
   Small Mobile (< 375px)
   ======================================== */

@media (max-width: 374px) {
  .hero-title {
    font-size: 24px !important;
  }
  
  .sec-title {
    font-size: 22px !important;
  }
  
  .th-btn {
    font-size: 13px !important;
    padding: 10px 20px !important;
  }
  
  .icon-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }
}

/* ========================================
   Performance Optimizations
   ======================================== */

@media (max-width: 991px) {
  /* Reduce animations on mobile for better performance */
  * {
    animation-duration: 0.5s !important;
    transition-duration: 0.3s !important;
  }
  
  /* Optimize images */
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ========================================
   Touch Improvements
   ======================================== */

@media (max-width: 991px) {
  /* Larger touch targets */
  a, button, .clickable {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Prevent text selection on double tap */
  .th-btn, .icon-btn, button {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}