.imgtext-wrap { display: flex;  flex-direction: column; gap: 60px; } .fb-badge.green, .fb-badge.yellow { font-size: 14px;line-height: 1.2; } .fb-badge { padding: 5px; } .hero-container::after { content: ''; position: absolute;top: -40px;bottom: -100px;width: 670px;background: url('https://appshopo.com/wp-content/uploads/2026/01/directory-website.webp') no-repeat right center / contain;pointer-events: none;right: -120px;} .banner-devices img { display: none;} .wp-mb-app .hero-container::after { display:none; } .wp-mb-app.hero-section { padding: 50px 0 0; } .wp-mb-app .hero-container { align-items: end; } .wp-mb-app .hero-content { padding-bottom: 40px; } .wp-mb-app .banner-device { position: absolute;right: -55%;bottom: 0;max-width: 850px;margin: 0 auto;transform: translate(-40%, 0); } .why-different-cards-wrapper { align-content: center;} .why-different-card { height: 100%;} .why-different-phones-container { height: 510px;margin: 0 auto;} .why-different-mockup-wrapper { padding: 0px; } .hero-container { grid-template-columns: 7fr 4fr; }

/* Native Features */
.native-header h2 { font-size: clamp(1.75rem, 4vw, 2.75rem);line-height: 1.25;color: #00652F; margin-bottom: 5px;font-weight: 600;} .native-header p { color: #6b7280;font-size: 1.125rem;} .native-header { text-align: center;margin-bottom: 30px;} .native-feature-grid { display: grid;grid-template-columns: repeat(3, 1fr);gap: 24px;} .native-feature-box { background: linear-gradient(45deg, #00652F 75%, #FFCF18 75%);border: 2px solid #00652F;border-radius: 16px;padding: 40px 20px;height: 100%;display: flex;flex-direction: column;justify-content: space-between;transition: transform 0.3s ease;} .native-feature-head { display: flex;align-items: center;gap: 12px;margin-bottom: 5px;flex-direction: row-reverse;justify-content: space-between;} .native-feature-icon { width: 32px;height: 32px;flex-shrink: 0;} .native-feature-title { font-size: 18px;font-weight: 700;color: #FFCF18;margin: 0;padding-right: 40px;} .native-feature-desc { font-size: 14px;color: #ffffff;margin: 0;line-height: 1.5;padding-right: 35px;} .native-feature-box:hover { transform: translateY(-5px); } 

/* wp to app reasons */
.wp-to-app-grid { display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;} .wp-to-app-box { border: 2px solid #FFC107;border-radius: 14px;padding: 28px 24px;text-align: center;transition: all 0.3s ease;} .wp-to-app-box h3 { color: #0E7A43;font-weight: 700;margin-bottom: 10px;font-size: 20px;} .wp-to-app-box:hover { transform: translateY(-6px);box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);} .wp-to-app-box p { color: #4A5565;font-size: 15px;line-height: 1.4;}
@media (max-width: 1024px) {
    .native-feature-grid { grid-template-columns: repeat(2, 1fr); } .hero-section:before { width: 0; } .hero-container::after { top: 0;bottom: -200px;width: 560px; } .hero-container { padding: 0 20px; } .wp-mb-app .banner-device {  max-width: 750px; } .why-different-container { padding: 0 20px; }
}

@media (max-width:991px) {
    .banner-devices img { display: block;} .hero-container::after{ display: none;} .hero-container { grid-template-columns: 1fr; } .banner-devices { margin-right: -25px; } .hero-section { padding: 50px 0 0; } .wp-mb-app .banner-device { position: unset;right: 0;max-width: 100%;transform: unset; } .hero-container { grid-template-columns: 1fr; }
}

@media (max-width:768px) {
    .hero-section { padding: 30px 20px 0; } .banner-devices { margin-right: 0; } .wp-to-app-grid { grid-template-columns: repeat(2, 1fr);} .wp-mb-app .hero-content { padding-bottom: 0; } .why-different-phones-container { height: 100%; } .why-different-container { padding: 0; }
}

@media (max-width: 640px) {
    .native-feature-grid,.wp-to-app-grid { grid-template-columns: 1fr; } .iwt-left h2,.iwt-desc { margin-bottom: 5px;} .order-2 { order: 2 !important;} .imgtext-wrap .iwt-wrap .iwt-left { order: unset; } .imgtext-wrap .iwt-wrap .iwt-right { order: unset; } .imgtext-wrap { gap: 30px; } .mob-mb-0 { margin-bottom: 0;}
}

@media (max-width: 480px) {
    .image-with-text.mb-10 { margin-bottom: 12px !important; } .native-feature-box { padding: 30px 20px; } .native-feature { margin-bottom: 0; }
}