/**
 * Mobile Responsive Fixes for ANG Solutions
 * Comprehensive mobile optimization for all sections
 * Last Updated: January 2026
 */

/* ========================================
   GLOBAL MOBILE FIXES
   ======================================== */

/* Better text sizing on mobile */
@media (max-width: 768px) {
  html {
    font-size: 16px;
  }
  
  body {
    overflow-x: hidden;
  }
}

/* ========================================
   HERO SECTION - Mobile Optimization
   ======================================== */
@media (max-width: 768px) {
  .home .main-banner-1 {
    min-height: auto !important;
    padding: 100px 0 60px 0 !important;
  }
  
  .home .main-banner-1 .container {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  
  .home .main-banner-1 .banner-content {
    text-align: center !important;
  }
  
  .home .main-banner-1 .banner-content h2 {
    font-size: 2rem !important;
    text-align: center !important;
    margin-bottom: 16px !important;
  }
  
  .home .main-banner-1 .banner-content .lead {
    font-size: 1rem !important;
    text-align: center !important;
    margin-bottom: 24px !important;
  }
  
  .home .main-banner-1 .banner-content .badge {
    display: inline-flex !important;
    margin: 0 auto 16px !important;
  }
  
  /* Center tech pills */
  .home .tech-pills {
    justify-content: center !important;
    margin-bottom: 24px !important;
  }
  
  /* Center and stack CTAs */
  .home .main-banner-1 .d-flex.gap-3 {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  
  .home .main-banner-1 .btn {
    width: 100% !important;
    max-width: 280px !important;
    justify-content: center !important;
  }
  
  .home .main-banner-1 .d-flex.gap-4.mt-4 > div {
    border-left: none !important;
    padding-left: 0 !important;
    text-align: center !important;
  }
}

/* ========================================
   SERVICE CARDS - Domain Details Centering
   ======================================== */
@media (max-width: 768px) {
  /* Full width cards on tablet and mobile */
  .home #services .col-lg-4,
  .home #services .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  /* Card spacing */
  .home #services .row.g-4 {
    row-gap: 1.5rem !important;
  }
  
  /* Center service card titles */
  .home .service-card-enhanced .service-card-header {
    text-align: center !important;
  }
  
  .home .service-icon-wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
  }
  
  .home .service-card-enhanced .service-title {
    text-align: center !important;
  }
  
  /* Center service descriptions and features */
  .home .service-card-body {
    text-align: center !important;
  }
  
  .home .service-desc {
    text-align: center !important;
    margin-bottom: 16px !important;
  }
  
  .home .service-features {
    text-align: left !important;
    display: inline-block !important;
    max-width: 100% !important;
  }
  
  .home .service-features li {
    justify-content: flex-start !important;
  }
  
  .home .service-tech-tags {
    justify-content: center !important;
    margin-top: 16px !important;
  }
  
  /* Center CTA buttons in service cards */
  .home .service-card-footer {
    text-align: center !important;
  }
  
  .home .service-card-footer .btn {
    margin: 0 auto !important;
    display: inline-block !important;
  }
  
  /* Highlight badge positioning */
  .home .service-highlight-badge {
    top: 16px !important;
    right: 16px !important;
  }
}

/* ========================================
   TRAINING SECTION - CTA Centering
   ======================================== */
@media (max-width: 768px) {
  .home .training-card {
    text-align: center !important;
    padding: 20px !important;
  }
  
  .home .training-badge {
    justify-content: center !important;
  }
  
  .home .training-title {
    text-align: center !important;
  }
  
  .home .training-desc {
    text-align: center !important;
  }
  
  .home .training-highlights {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }
  
  .home .training-tracks {
    text-align: center !important;
  }
  
  .home .track-tags {
    justify-content: center !important;
  }
  
  /* Center training CTAs */
  .home .training-cta {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  
  .home .training-cta .btn {
    width: 100% !important;
    max-width: 200px !important;
  }
  
  .home .training-info {
    text-align: center !important;
  }
  
  /* Training stats bar */
  .home .training-stats-bar {
    /* flex-direction: column !important; */
    gap: 20px !important;
  }
  
  .home .stat-item {
    flex: 1 !important;
    text-align: center !important;
  }
}

/* ========================================
   TESTIMONIALS - Mobile UI Fixes
   ======================================== */
@media (max-width: 768px) {
  .home .testimonial-section {
    padding: 40px 0 !important;
  }
  
  .home .testimonial-wrapper.testimonial-style-2 {
    padding: 20px !important;
    margin: 10px !important;
  }
  
  .home .testimonial-ratings {
    font-size: 0.9rem !important;
    margin-bottom: 12px !important;
    text-align: center !important;
  }
  
  .home .testimonial-content {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin: 12px 0 !important;
    text-align: center !important;
  }
  
  .home .testimonial-author {
    margin-top: 16px !important;
    text-align: center !important;
  }
  
  .home .testimonial-author .author-name {
    font-size: 1rem !important;
  }
  
  .home .testimonial-author .author-position {
    font-size: 0.85rem !important;
  }
  
  /* Quote mark styling */
  .home .testimonial-wrapper.testimonial-style-2::after {
    font-size: 3.5rem !important;
    opacity: 0.08 !important;
  }
  
  /* Owl carousel navigation arrows - hide on mobile if overlapping */
  .home .owl-carousel .owl-nav {
    margin-top: 20px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  
  .home .owl-carousel .owl-nav button {
    width: 40px !important;
    height: 40px !important;
    background: var(--ang-bg-secondary) !important;
    border: 1px solid var(--ang-border-color) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    color: var(--ang-text-primary) !important;
    transition: all 0.2s ease !important;
  }
  
  .home .owl-carousel .owl-nav button:hover {
    background: var(--ang-primary) !important;
    border-color: var(--ang-primary) !important;
    color: #fff !important;
  }
  
  .home .owl-carousel .owl-nav button.owl-prev,
  .home .owl-carousel .owl-nav button.owl-next {
    position: static !important;
    transform: none !important;
  }
}

/* ========================================
   HOW WE WORK / PROCESS TIMELINE - Mobile Fixes
   ======================================== */
@media (max-width: 991px) {
  .home .process-timeline {
    flex-direction: column !important;
    gap: 24px !important;
    align-items: stretch !important;
  }
  
  .home .process-timeline::before {
    display: none !important;
  }
  
  .home .process-step {
    max-width: 100% !important;
    flex: 1 !important;
  }
  
  .home .process-number {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: inline-block !important;
    margin-bottom: 12px !important;
  }
  
  .home .process-content {
    margin-top: 0 !important;
    padding: 20px !important;
  }
  
  .home .process-icon {
    margin-bottom: 16px !important;
  }
  
  .home .process-content h5 {
    font-size: 1.05rem !important;
    margin-bottom: 10px !important;
  }
  
  .home .process-content p {
    font-size: 0.9rem !important;
  }
}

@media (max-width: 768px) {
  .home .process-section {
    padding: 40px 0 !important;
  }
  
  .home .process-step {
    text-align: center !important;
  }
  
  .home .process-content {
    text-align: center !important;
  }
}

/* ========================================
   CTA SECTION - Mobile Centering
   ======================================== */
@media (max-width: 768px) {
  .home .cta-box {
    padding: 30px 20px !important;
    text-align: center !important;
  }
  
  .home .cta-badge {
    margin: 0 auto 16px !important;
  }
  
  .home .cta-box h3 {
    font-size: 1.5rem !important;
    margin-bottom: 12px !important;
  }
  
  .home .cta-box p {
    font-size: 0.95rem !important;
    margin-bottom: 20px !important;
  }
  
  .home .cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  
  .home .cta-buttons .btn {
    width: 100% !important;
    max-width: 250px !important;
  }
}

/* ========================================
   FAQ SECTION - Mobile Improvements
   ======================================== */
@media (max-width: 768px) {
  .home .faq-section {
    padding: 40px 0 !important;
  }
  
  .home .accordion-button {
    font-size: 0.95rem !important;
    padding: 16px 44px 16px 16px !important;
    text-align: left !important;
  }
  
  .home .accordion-button::after {
    right: 16px !important;
  }
  
  .home .accordion-body {
    font-size: 0.9rem !important;
    padding: 16px !important;
    line-height: 1.6 !important;
  }
  
  .home .accordion-item {
    margin-bottom: 12px !important;
  }
}

/* ========================================
   WHY CHOOSE US - Mobile Layout
   ======================================== */
@media (max-width: 768px) {
  .home .why-choose-section {
    padding: 40px 0 !important;
  }
  
  .home .why-choose-card {
    text-align: center !important;
    padding: 24px !important;
  }
  
  .home .why-choose-icon {
    margin: 0 auto 16px !important;
  }
  
  .home .why-choose-card h5 {
    font-size: 1.1rem !important;
    margin-bottom: 10px !important;
  }
  
  .home .why-choose-card p {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }
}

/* ========================================
   FOOTER - Mobile Optimization
   ======================================== */
@media (max-width: 768px) {
  .home .site-footer .footer-main {
    padding: 40px 0 30px 0 !important;
  }
  
  .home .site-footer .footer-widget {
    margin-bottom: 30px !important;
  }
  
  .home .site-footer .footer-widget:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Footer bottom - stack on mobile */
  .home .footer-bottom-content {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }
  
  .home .footer-copyright {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
  
  .home .footer-copyright-divider {
    display: none !important;
  }
  
  .home .footer-bottom-links {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  
  /* Social links */
  .home .footer-social-links {
    justify-content: center !important;
  }
  
  /* Footer company info */
  .home .footer-company-desc {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }
  
  .home .footer-logo {
    display: block !important;
    text-align: center !important;
    margin-bottom: 16px !important;
  }
}

/* ========================================
   SECTION SPACING - Mobile Adjustments
   ======================================== */
@media (max-width: 768px) {
  .home .space-small-ptb,
  .home #services,
  .home .why-choose-section,
  .home .training-section {
    padding: 50px 0 !important;
  }
  
  .home .section-title {
    margin-bottom: 30px !important;
  }
  
  .home .section-title .title {
    font-size: 1.75rem !important;
    margin-bottom: 10px !important;
  }
  
  .home .section-title .sub-title {
    font-size: 0.875rem !important;
  }
  
  .home .section-title p {
    font-size: 0.95rem !important;
  }
}

/* ========================================
   GENERAL MOBILE IMPROVEMENTS
   ======================================== */
@media (max-width: 768px) {
  /* Row gutters */
  .home .row.g-4 {
    --bs-gutter-x: 1rem !important;
    --bs-gutter-y: 1.5rem !important;
  }
  
  /* Button sizing */
  .home .btn {
    padding: 12px 24px !important;
    font-size: 0.95rem !important;
  }
  
  .home .btn-sm {
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
  }
  
  /* Card spacing */
  .home .service-card-enhanced,
  .home .why-choose-card,
  .home .training-card {
    margin-bottom: 20px !important;
  }
  
  /* Remove hover effects on touch devices */
  @media (hover: none) {
    .home .service-card-enhanced:hover,
    .home .why-choose-card:hover,
    .home .training-card:hover,
    .home .process-step:hover .process-content {
      transform: none !important;
    }
  }
}

/* ========================================
   VERY SMALL DEVICES (< 576px)
   ======================================== */
@media (max-width: 576px) {
  .home .main-banner-1 .banner-content h2 {
    font-size: 1.75rem !important;
  }
  
  .home .section-title .title {
    font-size: 1.5rem !important;
  }
  
  .home .tech-pill {
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
  }
  
  /* Container padding reduction */
  .home .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Service cards even more compact on very small screens */
  .home .service-card-enhanced {
    padding: 0 !important;
  }
  
  .home .service-card-header {
    padding: 20px 16px 16px !important;
  }
  
  .home .service-card-body {
    padding: 16px !important;
  }
  
  .home .service-card-footer {
    padding: 16px !important;
  }
  
  .home .service-icon-wrapper {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 12px !important;
  }
  
  .home .service-icon-wrapper i {
    font-size: 1.15rem !important;
  }
  
  .home .service-card-enhanced .service-title {
    font-size: 1rem !important;
  }
  
  .home .service-desc {
    font-size: 0.85rem !important;
  }
  
  .home .service-features li {
    font-size: 0.75rem !important;
    margin-bottom: 6px !important;
  }
  
  .home .service-tech-tags span {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
  }
  
  .home .service-card-footer .btn {
    font-size: 0.8rem !important;
    padding: 8px 16px !important;
  }
  
  /* Training cards compact */
  .home .training-card {
    padding: 16px !important;
  }
  
  /* Stats bar vertical */
  .home .training-stats-bar {
    padding: 20px 15px !important;
  }
  
  /* Process content more compact */
  .home .process-content {
    padding: 16px !important;
  }
  
  /* CTA box more compact */
  .home .cta-box {
    padding: 24px 16px !important;
    border-radius: 12px !important;
  }
  
  .home .cta-box h3 {
    font-size: 1.35rem !important;
  }
}

/* ========================================
   LANDSCAPE MOBILE ORIENTATION
   ======================================== */
@media (max-width: 768px) and (orientation: landscape) {
  .home .main-banner-1 {
    min-height: auto !important;
    padding: 80px 0 50px 0 !important;
  }
  
  .home .main-banner-1 .banner-content h2 {
    font-size: 1.75rem !important;
  }
  
  .home .space-small-ptb {
    padding: 40px 0 !important;
  }
}

/* ========================================
   ALIGNMENT FIXES - Center All CTAs
   ======================================== */
@media (max-width: 768px) {
  /* Global CTA centering */
  .home .btn-wrapper,
  .home .button-group,
  .home [class*="btn-"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  /* Training overview tracks */
  .home .track-overview-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .home .track-overview-item {
    text-align: center !important;
  }
  
  /* About features grid */
  .home .about-features {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
  
  .home .about-feature-item {
    justify-content: center !important;
  }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATIONS
   ======================================== */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .home .btn {
    min-height: 44px !important;
  }
  
  .home .accordion-button {
    min-height: 48px !important;
  }
  
  /* Remove hover-dependent features */
  .home .service-card-enhanced:hover,
  .home .why-choose-card:hover {
    transform: none !important;
  }
}

/* ========================================
   PRINT STYLES (Bonus)
   ======================================== */
@media print {
  .home .header,
  .home .site-footer,
  .home .back-to-top,
  .home .theme-toggle-header,
  .home .hamburger {
    display: none !important;
  }
  
  .home .main-banner-1 {
    padding: 20px 0 !important;
  }
}

/* ========================================
   ADDITIONAL ALIGNMENT & MARGIN FIXES
   ======================================== */

/* Better section margins on all devices */
@media (max-width: 992px) {
  .home section {
    margin-bottom: 0 !important;
  }
  
  .home .container {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Ensure proper spacing between sections */
@media (max-width: 768px) {
  .home .content-wrapper > section {
    margin-bottom: 0 !important;
  }
  
  .home .content-wrapper > section + section {
    margin-top: 0 !important;
  }
  
  /* Better padding for all sections */
  .home section.space-small-ptb {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  
  /* Reduce excessive whitespace */
  .home .row {
    margin-bottom: 0 !important;
  }
  
  .home .col-12,
  .home [class*="col-"] {
    padding-bottom: 0 !important;
  }
}

/* Fix service card grid alignment */
@media (max-width: 768px) {
  .home #services .row.g-4 {
    margin-top: 0 !important;
  }
  
  .home #services .col-lg-4,
  .home #services .col-md-6 {
    margin-bottom: 20px !important;
  }
  
  .home #services .col-lg-4:last-child,
  .home #services .col-md-6:last-child {
    margin-bottom: 0 !important;
  }
}

/* Training section grid fixes */
@media (max-width: 768px) {
  .home .training-section .row {
    margin-top: 0 !important;
  }
  
  .home .training-section .col-lg-6 {
    margin-bottom: 20px !important;
  }
  
  .home .training-section .col-lg-6:last-child {
    margin-bottom: 0 !important;
  }
}

/* Why choose cards alignment */
@media (max-width: 768px) {
  .home .why-choose-section .row.g-4 {
    margin-top: 0 !important;
  }
  
  .home .why-choose-section .col-lg-4,
  .home .why-choose-section .col-md-6 {
    margin-bottom: 20px !important;
  }
}

/* Better testimonial section spacing */
@media (max-width: 768px) {
  .home .testimonial-section .section-title {
    margin-bottom: 24px !important;
  }
  
  .home .testimonial-section .owl-stage-outer {
    padding: 10px 0 !important;
  }
}

/* FAQ section improvements */
@media (max-width: 768px) {
  .home .faq-section .col-lg-6 {
    margin-bottom: 20px !important;
  }
  
  .home .faq-section .col-lg-6:last-child {
    margin-bottom: 0 !important;
  }
}

/* Process section better spacing */
@media (max-width: 768px) {
  .home .process-section .section-title {
    margin-bottom: 30px !important;
  }
  
  .home .process-timeline {
    padding: 10px 0 !important;
  }
}

/* About section image wrapper */
@media (max-width: 768px) {
  .home .about-image-wrapper {
    margin-top: 30px !important;
    text-align: center !important;
  }
  
  .home .about-experience-badge {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    display: inline-block !important;
    margin-top: 20px !important;
  }
}

/* Marquee section */
@media (max-width: 768px) {
  .home .marquee-wrapper {
    padding: 10px 0 !important;
  }
  
  .home .space-xs-ptb {
    padding: 20px 0 !important;
  }
}

/* CTA section proper centering */
@media (max-width: 768px) {
  .home .cta-box {
    margin: 0 auto !important;
    max-width: 100% !important;
  }
}

/* Training tracks overview on mobile */
@media (max-width: 768px) {
  .home .training-tracks-overview {
    padding: 20px 15px !important;
    margin-bottom: 30px !important;
  }
  
  .home .track-overview-title {
    font-size: 1rem !important;
    margin-bottom: 16px !important;
  }
  
  .home .track-overview-item {
    padding: 12px !important;
  }
  
  .home .track-overview-item i {
    font-size: 1.25rem !important;
  }
  
  .home .track-overview-item span {
    font-size: 0.9rem !important;
  }
  
  .home .track-overview-item small {
    font-size: 0.75rem !important;
  }
}

/* Fix button text wrapping */
@media (max-width: 768px) {
  .home .btn {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* Ensure buttons don't break layout */
  .home .btn-wrapper {
    width: 100% !important;
  }
}

/* Footer contact list on mobile */
@media (max-width: 768px) {
  .home .footer-contact-list {
    gap: 20px !important;
  }
  
  .home .footer-contact-item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  .home .footer-services-grid {
    grid-template-columns: 1fr !important;
  }
  
  .home .footer-service-item {
    justify-content: center !important;
  }
}

/* Better hero stats alignment */
@media (max-width: 768px) {
  .home .main-banner-1 .d-flex.gap-4 > div {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .home .main-banner-1 .counter-stat {
    display: inline-block !important;
  }
}

/* Service features list better mobile layout */
@media (max-width: 768px) {
  .home .service-features {
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Training highlights better layout */
@media (max-width: 768px) {
  .home .training-highlights {
    max-width: 350px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}