.imgtext-wrap { display: flex;  flex-direction: column; gap: 40px; } .fb-badge.green, .fb-badge.yellow { font-size: 14px;line-height: 1.2; } .fb-badge { padding: 5px 0; } .banner-devices img { height: 520px;margin: 0 auto;} .why-different-section { overflow: hidden;padding-bottom: 60px !important;} .website-to-app { padding-top: 45px;padding-bottom: 45px; }

/* 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); } 

/* Website to App */
.website-to-app-steps { display: grid;grid-template-columns: repeat(3,1fr);gap: 65px;max-width: 78%;margin: 0 auto;z-index: 0;} .website-step { margin: 0 auto;max-width: 120px;height: 120px; background: #FFCF18;border-radius: 50%; display: flex;justify-content: center;align-items: center; border: 10px solid #fff; z-index: 2;position: relative;} .website-step span { color: #00652F;font-size: 36px;font-weight: 600;} .website-step-content { text-align: center;border-left: 3px solid #00652F;border-right: 3px solid #00652F;border-bottom: 3px solid #00652F;border-radius: 0 0 20px 20px;padding: 20px;max-width: 260px;margin: 0 auto;} .website-step-content h3 { color: #00652F;font-size: 22px;font-weight: 600;margin-bottom: 5px;} .website-step-content p { color: #4A5565;font-size: 14px;line-height: 1.5;} .website-app-wrapper:after { position: absolute; content: ''; width: 100%; height: 100%;background: url('https://appshopo.com/wp-content/uploads/2026/01/ribbon.webp'); background-size: contain;background-position: center center;background-repeat: no-repeat;top: 8px;} .website-app-wrapper { position: relative;} .website-steps-outer { max-width: 245px;margin: 0 auto;} .website-steps-outer.rv .website-step-content { background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(270deg, #FFCF18 0%, #00652F 100%) border-box;border-style: solid;border-width: 3px 3px 0 3px; border-color: transparent;border-radius: 12px 12px 0 0;} .website-step.rv { background: linear-gradient(90deg, #00652F 0%, #FFCF18 100%);} .website-step.rv span { color: #fff;}
@media (max-width: 1024px) {
    .native-feature-grid { grid-template-columns: repeat(2, 1fr); } .website-app-wrapper:after { display: none;} .website-to-app-steps { gap: 20px;max-width: 100%;} .website-steps-outer { max-width: 100%;border: 3px solid #00652F;border-radius: 20px;padding: 20px;} .website-step-content { border: unset;max-width: 100%;padding: 0;} .website-steps-outer.rv .website-step-content { background: unset;}  .website-step.rv { background: #FFCF18;} .website-step.rv span { color: #00652F;} .website-steps-outer.rv { display: flex;flex-direction: column-reverse;} .website-step { max-width: 50px;height: 50px;border: unset;margin-bottom: 10px;} .website-step span { font-size: 20px; } .banner-devices img { height: 100%; margin: 0 auto; }}
@media (max-width: 640px) {
    .native-feature-grid { grid-template-columns: 1fr; } .website-to-app-steps { grid-template-columns: repeat(2,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;} .website-to-app { padding-top: 35px; padding-bottom: 30px;}
}

@media (max-width: 480px) {
    .website-to-app-steps { grid-template-columns: 1fr; } .image-with-text.mb-10 { margin-bottom: 12px !important; } .website-to-app { margin-bottom: 10px; } .native-feature-box { padding: 30px 20px; } 
}