/* =====================================================
   COMPREHENSIVE MOBILE & TABLET FIXES
   For both index.html and about.html
   ===================================================== */

/* =====================================================
   1. TOUCH DEVICE BUTTON FIXES
   Fix sticky hover states on mobile/iPad
   ===================================================== */

/* Remove hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    /* Reset all button hover states for touch devices */
    .bd-gradient-btn:hover,
    .btn:hover,
    button:hover,
    a:hover {
        transform: none !important;
    }
    
    /* Keep active state for tap feedback */
    .bd-gradient-btn:active,
    .btn:active,
    button:active {
        transform: scale(0.98) !important;
        opacity: 0.9;
    }
    
    /* Fix sticky hover on navigation links */
    .main-menu ul li a:hover,
    .onepage-menu li a:hover {
        color: inherit;
    }
    
    .main-menu ul li a.active,
    .onepage-menu li a.active {
        color: #00F5A0 !important;
    }
    
    /* Fix cards hover state */
    .feature-box:hover,
    .our-values__item:hover,
    .revolution__item:hover,
    .working__step-content:hover {
        transform: none !important;
        box-shadow: inherit;
    }
    
    /* Fix team flip cards on touch */
    .team-flip-card:hover .team-flip-inner {
        transform: none;
    }
    
    /* Use tap to flip instead */
    .team-flip-card.flipped .team-flip-inner {
        transform: rotateY(180deg);
    }
}

/* Better tap targets for mobile */
@media (max-width: 768px) {
    .bd-gradient-btn,
    .btn,
    button,
    .main-menu ul li a,
    .onepage-menu li a {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Increase touch target size */
    .footer__social a {
        width: 48px;
        height: 48px;
    }
    
    .common__slider-button-prev,
    .common__slider-button-next {
        width: 48px;
        height: 48px;
    }
}

/* =====================================================
   2. ABOUT PAGE - SECTION FIXES
   ===================================================== */

/* Mission section orbit responsiveness */
.mission__area {
    background: #121225 !important;
    padding: 60px 0 !important;
}

@media (max-width: 992px) {
    .mission__area .row {
        flex-direction: column-reverse;
    }
    
    .mission__area .col-xxl-6,
    .mission__area .col-xl-6,
    .mission__area .col-lg-6 {
        width: 100%;
        max-width: 100%;
    }
    
    .mission__content {
        text-align: center;
        margin-bottom: 40px;
    }
}

/* Orbit section mobile fixes */
@media (max-width: 768px) {
    .orbit-section {
        width: 100% !important;
        max-width: 320px !important;
        height: 320px !important;
        margin: 0 auto 30px auto !important;
    }
    
    .orbit-center {
        width: 90px !important;
        height: 90px !important;
    }
    
    .orbit-center img {
        width: 70px !important;
    }
    
    .orbit-circle {
        font-size: 0.65rem !important;
    }
    
    .orbit1 { width: 55px !important; height: 55px !important; }
    .orbit2 { width: 50px !important; height: 50px !important; }
    .orbit3 { width: 65px !important; height: 65px !important; }
    .orbit4 { width: 45px !important; height: 45px !important; }
    .orbit5 { width: 60px !important; height: 60px !important; }
    .orbit6 { width: 50px !important; height: 50px !important; }
    .orbit7 { width: 62px !important; height: 62px !important; }
    .orbit8 { width: 50px !important; height: 50px !important; }
    
    .orbit-label {
        font-size: 0.6rem !important;
        padding: 0 4px !important;
    }
    
    .orbit-price {
        font-size: 0.55rem !important;
        padding: 1px 4px !important;
    }
}

/* Our Values section - About page */
.our-values__area {
    background: #1a1d29 !important;
    border-radius: 20px !important;
    margin: 20px !important;
    padding: 40px 20px !important;
}

.our-values__item {
    background: rgba(30, 35, 50, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 24px 20px !important;
    transition: all 0.3s ease !important;
}

.our-values__item:hover {
    border-color: rgba(0, 245, 160, 0.3) !important;
}

.our-values__icon span {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 245, 160, 0.1), rgba(0, 217, 245, 0.1));
    border-radius: 50%;
    margin-bottom: 15px;
}

.our-values__icon span i {
    font-size: 1.5rem;
    color: #00F5A0;
}

.our-values__item.is-mainly-red .our-values__icon span i {
    color: #FF6B6B;
}

.our-values__item.is-mainly-pink .our-values__icon span i {
    color: #E040FB;
}

.our-values__item.is-mainly-blue .our-values__icon span i {
    color: #00D9F5;
}

.our-values__content h3 {
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 8px;
}

.our-values__content p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

@media (max-width: 768px) {
    .our-values__area {
        margin: 10px !important;
        padding: 30px 15px !important;
    }
    
    .our-values__cards {
        grid-template-columns: 1fr !important;
    }
    
    .our-values__item {
        padding: 20px 15px !important;
        min-height: auto !important;
    }
}

/* Team section fixes */
.team__area {
    background: #121225 !important;
    padding: 60px 0 !important;
}

.team-flip-card {
    height: 380px !important;
    margin: 0 auto 20px auto !important;
}

.team-flip-front,
.team-flip-back {
    background: rgba(30, 35, 50, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

@media (max-width: 768px) {
    .team-flip-card {
        height: 340px !important;
        max-width: 280px !important;
    }
    
    .team__thumb {
        width: 100px !important;
        height: 100px !important;
    }
    
    .team__contenrt h3 {
        font-size: 1.1rem !important;
    }
    
    .team__contenrt span {
        font-size: 0.9rem !important;
    }
    
    .team-desc {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    
    .team-flip-front,
    .team-flip-back {
        padding: 20px 15px !important;
    }
}

/* Founder's note card */
.founder-note-card {
    background: rgba(30, 35, 50, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    max-width: 900px !important;
    margin: 40px auto !important;
    padding: 40px 30px !important;
}

.founder-note-card:hover {
    border-color: rgba(0, 245, 160, 0.3) !important;
    box-shadow: 0 10px 40px rgba(0, 245, 160, 0.1) !important;
}

.founder-note-card h2 {
    color: #00F5A0 !important;
    font-size: 1.8rem !important;
}

.founder-note-card .founder-name {
    color: #00D9F5 !important;
}

@media (max-width: 768px) {
    .founder-note-card {
        margin: 20px 15px !important;
        padding: 25px 20px !important;
    }
    
    .founder-note-card h2 {
        font-size: 1.4rem !important;
    }
}

/* Breadcrumb section - About page */
.breadcrumb__area {
    background: linear-gradient(135deg, #121225 0%, #1a1d29 100%) !important;
    padding: 120px 0 60px !important;
}

.breadcrumb__title {
    font-size: clamp(1.8rem, 5vw, 3rem) !important;
}

.gradient-text-3 {
    background: linear-gradient(135deg, #00F5A0 0%, #00D9F5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 768px) {
    .breadcrumb__area {
        padding: 100px 0 40px !important;
    }
    
    .breadcrumb__title br {
        display: none;
    }
}

/* =====================================================
   3. INDEX PAGE - RESPONSIVE FIXES
   ===================================================== */

/* Banner section mobile */
@media (max-width: 992px) {
    .banner__area {
        padding-top: 100px !important;
    }
    
    .banner__content-2 {
        text-align: center;
    }
    
    .banner__btn-group {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .banner__content-2 h2 {
        font-size: 2rem !important;
        line-height: 1.3 !important;
    }
    
    .banner__sbutitle-2 {
        font-size: 0.75rem !important;
        padding: 6px 12px !important;
    }
}

/* Financial Innovation section mobile */
@media (max-width: 768px) {
    .about__area.theme-bg-5 .feature-box {
        padding: 1.5rem !important;
        min-height: auto !important;
    }
    
    .about__area.theme-bg-5 .feature-box h4 {
        font-size: 1.1rem !important;
        white-space: normal !important;
    }
    
    .about__area.theme-bg-5 .feature-box p {
        font-size: 0.9rem !important;
    }
    
    .about__area.theme-bg-5 .feature-icon-wrap {
        width: 60px !important;
        height: 60px !important;
    }
}

/* Revolution section tablet/mobile */
@media (max-width: 1199px) {
    .revolution__wrapper {
        padding: 40px 25px !important;
    }
    
    .revolution__item {
        flex: 0 0 calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
    }
}

@media (max-width: 768px) {
    .revolution__wrapper {
        padding: 30px 20px !important;
        border-radius: 20px !important;
    }
    
    .revolution__item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .revolution__item .revolution__content {
        padding: 25px 15px !important;
    }
    
    .revolution__number h2 {
        font-size: 2.5rem !important;
    }
    
    .revolution__intro h3 {
        font-size: 2rem !important;
    }
    
    .revolution__intro h3 .text-paragraph {
        font-size: 1.3rem !important;
    }
}

/* How IMVEST Works - mobile */
@media (max-width: 992px) {
    .work__steps-main-3 .row::before {
        display: none !important;
    }
    
    .working__step-item {
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .working__step-round {
        width: 60px !important;
        height: 60px !important;
    }
    
    .working__step-round span {
        font-size: 1.2rem !important;
    }
    
    .working__step-content {
        padding: 20px 15px !important;
    }
    
    .working__step-content h5 {
        font-size: 1rem !important;
    }
    
    .working__step-content p {
        font-size: 0.85rem !important;
    }
}

/* Investment visualization - tablet/mobile */
@media (max-width: 992px) {
    .investment-visualization {
        padding: 1.5rem !important;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 576px) {
    .investment-visualization {
        padding: 1rem !important;
    }
    
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    .stat-card {
        padding: 15px !important;
    }
    
    .chart-container {
        height: 300px !important;
        padding: 15px !important;
    }
    
    .investment-controls .row {
        flex-direction: column;
    }
    
    .investment-controls .col-md-4,
    .investment-controls .col-md-6 {
        width: 100%;
        margin-bottom: 15px;
    }
}

/* Protection section - mobile */
@media (max-width: 768px) {
    .protection__area {
        padding: 40px 0 60px !important;
    }
    
    .protection__area .brand__thumb img {
        max-height: 30px !important;
    }
}

/* Subscribe section - mobile */
@media (max-width: 768px) {
    .subcribe__area {
        padding: 50px 0 70px !important;
    }
    
    .subcribe__wrapper {
        padding: 2rem 1.5rem !important;
    }
    
    .subcribe__input {
        flex-direction: column !important;
        padding: 12px !important;
        border-radius: 20px !important;
    }
    
    .subcribe__input input {
        width: 100% !important;
        padding: 0 20px !important;
        text-align: center !important;
        border-radius: 30px !important;
        margin-bottom: 10px;
    }
    
    .subcribe__input .bd-gradient-btn {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
    }
}

/* =====================================================
   4. HEADER & NAVIGATION - MOBILE FIXES
   ===================================================== */

/* Mobile menu improvements */
@media (max-width: 992px) {
    .header__area {
        padding: 15px 0;
    }
    
    .header__logo img {
        max-height: 40px;
    }
    
    /* Mobile hamburger button */
    .sidebar__toggle .bar-icon span {
        background: #ffffff;
        height: 2px;
        width: 25px;
        display: block;
        margin: 5px 0;
    }
    
    /* Offcanvas menu styling */
    .offcanvas__area {
        background: #121225 !important;
        max-width: 300px;
    }
    
    .offcanvas__content {
        padding: 20px;
    }
    
    .mobile-menu ul li a {
        color: #ffffff;
        padding: 12px 0;
        display: block;
        font-size: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .mobile-menu ul li a.active {
        color: #00F5A0;
    }
}

/* =====================================================
   5. FOOTER - MOBILE FIXES
   ===================================================== */

@media (max-width: 768px) {
    .footer__bottom-2 {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .footer__social {
        order: -1;
    }
    
    .footer__social a {
        margin: 0 8px;
    }
}

/* =====================================================
   6. GENERAL RESPONSIVE UTILITIES
   ===================================================== */

/* Section titles responsive */
.section__title {
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
    line-height: 1.3 !important;
}

.section__subtitle-7 {
    font-size: clamp(0.7rem, 2vw, 0.85rem) !important;
    padding: 6px 16px !important;
}

/* Consistent spacing on mobile */
@media (max-width: 768px) {
    .section-space {
        padding: 50px 0 !important;
    }
    
    .section__title-space {
        margin-bottom: 30px !important;
    }
    
    /* Hide unnecessary decorative elements on mobile */
    .round__shape,
    .glow-1,
    .glow-2,
    .body__color-glow {
        display: none !important;
    }
}

/* iPad specific fixes */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        max-width: 720px;
    }
    
    .revolution__item {
        flex: 0 0 calc(50% - 16px) !important;
        max-width: calc(50% - 16px) !important;
    }
    
    .about__area.theme-bg-5 .col-lg-4 {
        width: 50%;
    }
    
    .our-values__cards {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* iPad Pro specific */
@media (min-width: 1024px) and (max-width: 1366px) {
    .revolution__item {
        flex: 0 0 calc(25% - 18px) !important;
        max-width: calc(25% - 18px) !important;
    }
}

/* Landscape mode fixes */
@media (max-height: 500px) and (orientation: landscape) {
    .banner__area {
        min-height: auto !important;
        padding: 80px 0 40px !important;
    }
    
    .breadcrumb__area {
        padding: 80px 0 40px !important;
    }
}

/* =====================================================
   7. ACCESSIBILITY IMPROVEMENTS
   ===================================================== */

/* Focus states for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #00F5A0 !important;
    outline-offset: 2px !important;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .orbit-circle,
    .orbit-section {
        animation: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .feature-box,
    .our-values__item,
    .revolution__item .revolution__content,
    .working__step-content {
        border-width: 2px !important;
    }
}