/* Extra small devices (portrait phones, <576px) */
@media (max-width: 575.98px) {
    .main-header .navbar .nav-item {
        display: flex;
        justify-content: start;
        align-items: start;
    }
    .main-header .navbar .nav-link {
        margin-left: 0px;
    }
    .banner-logo-bottom.d-flex.align-items-center.flex-wrap {
        justify-content: center; /* center logos + text */
    }
    .banner-logo-bottom.d-flex.align-items-center.flex-wrap span {
        flex-basis: 100%; /* move text below logos */
        text-align: center;
        margin-top: 8px;
    }
    .banner .banner-content h1 {
        font-size: 30px;
        line-height: 40px;
        letter-spacing: 1px;
    }
    .ordering-bundle .section-title {
        font-size: 32px;
        line-height: 40px; /* 125% */
        letter-spacing: -0.64px;
    }
    .ordering-bundle .bundle-card {
        min-height: 550px;
    }
    .epos-features .section-title,
    .epos-features .section-title span {
        font-size: 35px;
        line-height: 40px; /* 125% */
        letter-spacing: -0.64px;
    }
    .business-features .section-title {
        font-size: 32px;
        line-height: 40px; /* 125% */
        letter-spacing: -0.64px;
    }
    .about-section h1 {
        font-size: 35px;
        line-height: 45px;
        letter-spacing: 1px;
    }
    .services-section h2,
    .services-section h2 span {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: 1px;
        text-align: center;
    }
    .services-section h6 {
        text-align: center;
    }
    .setup-section h2 {
        font-size: 28px;
        line-height: 36px;
    }

    .setup-section p {
        font-size: 14px;
        line-height: 22px;
    }

    .timeline-steps .step h3 {
        font-size: 20px;
        line-height: 24px;
        font-weight: bold;
    }

    .timeline-steps .step p {
        font-size: 15px;
        line-height: 22px;
        font-weight: 600;
    }

    .timeline-steps .big-num {
        font-size: 80px;
        top: -40px;
        transform: translateX(-0%) !important;
    }
    .elipos-promo h2 {
        font-size: 45px;
        line-height: 1.2;
    }
    .elipos-promo h3 {
        font-size: 30px;
        line-height: 40px;
    }
    .pos-feature-grid h3 {
        font-size: 20px;
        line-height: 28px;
    }
    .pos-feature-grid h5 {
        font-size: 16px;
        line-height: 24px;
    }
    .payments-feature-grid h3 {
        font-size: 20px;
        line-height: 28px;
    }
    .payments-feature-grid p {
        font-size: 16px;
        line-height: 24px;
    }
    .ordering-promo .promo-title {
        font-size: 24px;
        line-height: 32px;
    }

    .ordering-promo .promo-description {
        font-size: 16px;
        line-height: 26px;
    }

    .ordering-promo .btn-success {
        font-size: 14px;
        padding: 8px 16px;
    }
    .elipos-app-showcase .app-title {
        font-size: 20px;
    }

    .elipos-app-showcase .app-description {
        font-size: 14px;
    }

    .elipos-app-showcase .phone-mockup {
        max-height: 250px;
    }

    .elipos-app-showcase .store-badge {
        max-height: 36px;
    }
    .epos-feature-section .step-title {
        font-size: 16px;
    }

    .epos-feature-section .step-desc {
        font-size: 13px;
    }

    .epos-feature-section .feature-card {
        text-align: center;
    }

    .epos-feature-section .feature-card .feature-icon {
        width: 60px;
        height: 60px;
        display: inline-flex;
    }

    .epos-feature-section .feature-card h5 {
        font-size: 15px;
    }

    .epos-feature-section .feature-card p {
        font-size: 12px;
    }
    .ordering-bundle .bundle-icon {
        width: auto;
        height: auto;
    }
    .promo-banner .promo-background h2 {
        font-size: 25px;
        line-height: 35px;
    }
    .services-section .right-Side .btn-contact {
        font-size: 18px;
    }
    .main-header .nav-pills .nav-link:hover {
        padding: 6px 10px !important;
    }
    .demo-banner .demo-title {
        font-size: 22px;
    }
}

/* Larger phones (iPhone Plus, some Android, 414px wide) */
@media only screen and (max-width: 414px) {
    .ordering-bundle .bundle-icon {
        width: auto;
        height: auto;
    }
}

/* Small phones (iPhone SE 2nd/3rd gen, iPhone 6/7/8, 375px wide) */
@media only screen and (max-width: 375px) {
    .ordering-bundle .bundle-icon {
        width: auto;
        height: auto;
    }
}
/* Portrait and Landscape */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
    .banner .banner-content h1 {
        font-size: 25px;
        line-height: 35px;
        letter-spacing: 0.8px;
    }
}
/* Extra small devices (iPhone 5/SE 1st gen, 320px wide) */
@media only screen and (max-width: 320px) {
    .ordering-bundle .bundle-icon {
        width: auto;
        height: auto;
    }
    .banner .banner-content h1 {
        font-size: 20px;
        line-height: 25px;
        letter-spacing: 1px;
    }
    .banner .banner-content p {
        font-size: 14px;
        line-height: 20px;
    }
    .banner .btn-bottoms .text-primary {
        font-size: 14px;
        line-height: 20px;
        padding: 6px 12px !important;
    }
    .ordering-bundle .section-title {
        font-size: 25px;
        line-height: 30px;
    }
    .ordering-bundle .para-text {
        font-size: 14px;
        line-height: 20px;
    }
    .ordering-bundle .bundle-card h5 {
        font-size: 14px;
        line-height: 20px;
    }
    .ordering-bundle .bundle-card p {
        font-size: 12px;
        line-height: 18px;
    }
    .epos-features .section-title,
    .epos-features .section-title span {
        font-size: 20px;
        line-height: 25px;
    }
    .epos-features .feature-card {
        min-width: 0;
    }
    .epos-features .feature-card h5 {
        font-size: 14px;
        line-height: 20px;
    }
    .business-features .section-title {
        font-size: 20px;
        line-height: 25px;
    }
    .cta-title {
        font-size: 1rem !important;
        line-height: 30px !important;
    }
    .cta-subtext {
        font-size: 0.8rem;
    }
    .floating-right-ui .call-now-background {
        padding: 3px;
        gap: 3px;
    }
    #scrollTopBtn {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
    .epos-features .feature-video {
        width: 200px;
        height: 150px;
    }
    .cta-buttons .btn {
        font-size: 12px;
    }
    .social-media-icons a svg {
        width: 40px;
        height: 40px;
    }
    .main-footer h5 {
        font-size: 16px;
    }
    .main-footer ul li a {
        font-size: 14px;
        line-height: 20px;
    }
    .about-section h1 {
        font-size: 25px;
        line-height: 30px;
        letter-spacing: 1px;
    }
    .about-section p {
        font-size: 14px;
        line-height: 20px;
    }
    .services-section h6 {
        font-size: 18px;
    }
    .services-section h2,
    .services-section h2 span {
        font-size: 25px;
        line-height: 30px;
    }
    .services-section .right-Side p.lead {
        font-size: 14px;
        line-height: 20px;
    }
    .services-section .right-Side .btn-contact {
        font-size: 18px;
    }
    .services-section .service-card h5 {
        font-size: 18px;
        line-height: 100%;
    }
    .trusted-section h2 {
        font-size: 1rem;
    }
    .trusted-section p {
        font-size: 14px;
        line-height: 20px;
    }
    .setup-section-sm h2 {
        font-size: 18px;
        line-height: 25px;
    }
    .setup-section-sm p {
        font-size: 14px;
        line-height: 20px;
    }
    .setup-section-sm .btn-outline-primary {
        font-size: 14px;
        line-height: 20px;
    }
    .timeline-steps-sm h3 {
        font-size: 14px;
    }
    .promo-banner .promo-background h2 {
        font-size: 25px;
        line-height: 35px;
    }
    .promo-background .btn-demo {
        font-size: 14px;
        line-height: 20px;
    }
    .elipos-promo h2 {
        font-size: 20px;
        line-height: 1.1;
    }
    .elipos-promo h3 {
        font-size: 25px;
        line-height: 33px;
    }
    .elipos-promo p {
        font-size: 14px;
        line-height: 20px;
    }
    .pos-feature-grid h3 {
        font-size: 16px;
        line-height: 25px;
    }
    .pos-feature-grid h5 {
        font-size: 14px;
        line-height: 20px;
    }
    .pos-feature-grid .feature-card h3 {
        font-size: 16px;
        line-height: 25px;
    }
    .pos-feature-grid .feature-card p {
        font-size: 14px;
        line-height: 20px;
    }
    .payments-feature-grid h3 {
        font-size: 18px;
        line-height: 25px;
    }
    .payments-feature-grid p {
        font-size: 14px;
        line-height: 20px;
    }
    .payments-feature-grid .feature-card h3 {
        font-size: 18px;
        line-height: 25px;
    }
    .payments-feature-grid .feature-card p {
        font-size: 14px;
        line-height: 20px;
    }
    .ordering-promo .promo-title {
        font-size: 20px;
        line-height: 25px;
    }
    .ordering-promo .promo-description {
        font-size: 14px;
        line-height: 20px;
    }
    .elipos-app-showcase .app-title {
        font-size: 18px;
    }
    .elipos-app-showcase .app-description {
        font-size: 14px;
    }
    .demo-banner .demo-title {
        font-size: 18px;
        line-height: 25px;
    }
    .demo-banner .demo-description {
        font-size: 14px;
        line-height: 20px;
    }
    .pricing-section .col-sm-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .pricing-section .card {
        margin-bottom: 18px; /* card গুলোর মধ্যে spacing */
        border-radius: 14px; /* ছোট স্ক্রিনে smooth radius */
        padding: 12px; /* ভিতরে content একটু compact */
    }

    .price-text-p li {
        font-size: 12px; /* ছোট font */
        line-height: 18px;
        margin-bottom: 8px;
    }

    .price-plan-btn {
        font-size: 13px;
        padding: 8px 12px; /* button ছোট হবে */
        width: 100%; /* full width button */
    }

    /* Commercial Plan card glow adjust */
    .commercial-card {
        margin-top: 0; /* overlap বাদ */
    }
    .commercial-card::after {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 14px;
        background: #f8f9fa;
        box-shadow: 0 0 12px rgba(91, 126, 232, 0.4); /* subtle glow */
    }
    .toggle-box {
        padding: 5px !important;
    }
    .toggle-box .btn-primary {
        min-width: 115px !important;
    }
    #websiteModal ul li,
    #websiteModal p {
        font-size: 14px;
        line-height: 20px;
    }
    .pricing-banner .pricing-title,
    .pricing-banner span {
        font-size: 18px !important;
    }
    .pricing-banner .pricing-description {
        font-size: 14px !important;
    }
    .pricing-section h2 {
        font-size: 20px !important;
    }
    .pricing-section p {
        font-size: 14px !important;
    }
    .main-header .nav-pills .nav-link:hover {
        padding: 6px 10px !important;
    }
    .contact-banner .contact-title {
        font-size: 20px !important;
    }
    .contact-banner .contact-desc {
        font-size: 14px !important;
    }
    .contact-feature-grid .feature-card h3 {
        font-size: 18px !important;
    }
    .contact-feature-grid .feature-card p {
        font-size: 14px !important;
    }
    .contact-feature-grid .feature-card ul li {
        font-size: 14px !important;
    }
    .contact-info .contact-heading {
        font-size: 14px !important;
    }
    .contact-info .contact-grid a span {
        font-size: 16px !important;
    }
    .contact-info .contact-icon {
        font-size: 20px !important;
    }
    .terms-conditions h2 {
        font-size: 20px !important;
    }
    .terms-conditions p,
    .terms-conditions ul li {
        font-size: 14px;
    }
    .terms-conditions h3 {
        font-size: 18px;
    }
    .privacy-policy h2 {
        font-size: 20px;
    }
    .privacy-policy p,
    .privacy-policy ul li {
        font-size: 14px;
    }
    .privacy-policy h3 {
        font-size: 18px;
    }
    #posModal .modal-title,
    #appsModal .modal-title,
    #websiteModal .modal-title {
        font-size: 16px !important;
    }
    #posModal ul li,
    #appsModal ul li,
    #websiteModal ul li {
        font-size: 14px !important;
    }

    #posModal p,
    #appsModal p,
    #websiteModal p {
        font-size: 14px !important;
    }
}

/* Small devices (landscape phones, ≥576px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .step-section-sm .timeline-steps-sm .step {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        padding: 1rem;
        border: 1px solid #eee;
        border-radius: 8px;
        background: #fff;
    }

    .step-section-sm .timeline-steps-sm .step-3 {
        margin-top: 1.5rem;
        margin-bottom: 2.5rem;
    }

    .setup-section-sm .container {
        padding-bottom: 3rem;
    }
    .ordering-bundle .bundle-icon {
        width: auto;
        height: auto;
    }
    .contact-banner .contact-title {
        font-size: 22px;
    }

    .contact-banner .contact-desc {
        font-size: 14px;
    }

    .contact-banner .contact-button {
        padding: 8px 20px;
        font-size: 14px;
    }
}

@media (max-width: 991px) {
    .main-header .navbar-brand img {
        max-height: 40px;
    }
}

/* Medium devices (tablets, ≥768px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .setup-section {
        height: auto; /* allow section to grow naturally */
        padding-bottom: 80px;
    }

    .timeline-steps .step {
        position: relative !important;
        margin-bottom: 60px;
        max-width: 100%;
        text-align: center;
    }

    .timeline-steps .big-num {
        font-size: 120px;
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
    }

    .setup-section .svg-connector,
    .setup-section .step-circle,
    .setup-section .animated-dot {
        display: none;
    }
    .contact-banner .contact-title {
        font-size: 28px;
    }

    .contact-banner .contact-desc {
        font-size: 16px;
    }

    .contact-banner .contact-button {
        padding: 10px 24px;
        font-size: 15px;
    }

    .contact-feature-grid {
        flex-direction: column;
        align-items: center;
    }

    .contact-feature-grid .feature-card {
        width: 100%;
        max-width: 500px;
    }

    .contact-info .contact-heading {
        font-size: 20px;
    }

    .contact-info .contact-card {
        flex: 1 1 100%;
        /* stack one per line on mobile */
        max-width: 100%;
    }
}
/* Portrait and Landscape */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
    .floating-right-ui .social-icons {
        flex-direction: column;
        gap: 10px;
    }
    .floating-right-ui {
        top: 20% !important;
    }
    .timeline-steps-ipad .step {
        max-width: 100% !important;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .floating-right-ui {
        right: 12px;
        top: 40%;
    }
    .floating-right-ui .call-now-background {
        gap: 10px;
        padding: 8px;
    }
    .floating-right-ui .social-bar {
        padding: 6px;
    }
    .floating-right-ui .social-icons img {
        width: 22px;
        height: 22px;
    }
    .main-header .nav-pills .nav-link {
        display: flex;
        justify-content: left;
        align-items: flex-start;
    }
}
@media (min-width: 1025px) {
    .floating-right-ui {
        right: 15px;
        top: 30%;
    }
    .floating-right-ui .social-bar {
        display: flex;
        flex-direction: row;
        align-items: center; /* center vertical alignment */
        justify-content: center;
        gap: 6px;
        padding: 5px;
        opacity: 0;
        transform: translateX(100%);
        animation: slideInRight 0.8s ease forwards;
    }
    .floating-right-ui .social-icons {
        flex-direction: column;
        gap: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .floating-right-ui .follow-label {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 14px;
        font-weight: bold;
        color: #ffd700;
        text-shadow:
            0 0 4px #000,
            0 0 8px #000;
        margin: 0;
        align-self: center;
        transition:
            color 0.4s ease,
            text-shadow 0.4s ease;
    }

    /* Brand-specific gradient glow for Follow Us text */
    .floating-right-ui .social-icons a[href*="facebook"]:hover ~ .follow-label {
        color: #3b5998;
        text-shadow:
            0 0 12px rgba(59, 89, 152, 0.8),
            0 0 20px rgba(100, 149, 237, 0.6);
        animation: glowFade 1.2s ease forwards;
    }
    .floating-right-ui .social-icons a[href*="linkedin"]:hover ~ .follow-label {
        color: #0077b5;
        text-shadow:
            0 0 12px rgba(0, 119, 181, 0.8),
            0 0 20px rgba(30, 144, 255, 0.6);
        animation: glowFade 1.2s ease forwards;
    }
    .floating-right-ui
        .social-icons
        a[href*="instagram"]:hover
        ~ .follow-label {
        color: #c13584;
        text-shadow:
            0 0 12px rgba(193, 53, 132, 0.8),
            0 0 20px rgba(255, 140, 0, 0.6); /* pink→orange gradient glow */
        animation: glowFade 1.2s ease forwards;
    }
    .floating-right-ui .social-icons a[href*="x.com"]:hover ~ .follow-label {
        color: #5a5a5a;
        text-shadow:
            0 0 12px rgba(90, 90, 90, 0.8),
            0 0 20px rgba(200, 200, 200, 0.6); /* grey→white gradient glow */
        animation: glowFade 1.2s ease forwards;
    }
}
@media only screen and (min-width: 712px) and (max-width: 712px) and (orientation: portrait) {
    .main-header .nav-pills .nav-link {
        justify-content: left;
        align-items: flex-start;
    }
}

@media only screen and (min-width: 1138px) and (max-width: 1138px) and (orientation: landscape) {
    .main-header .nav-pills .nav-link {
        justify-content: left;
        align-items: flex-start;
    }
}
/* Extra large devices (large desktops, ≥1200px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* large desktop styles */
}

/* Extra extra large devices (≥1400px) */
@media (min-width: 1400px) {
    /* very large screen styles */
}