* {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video {
    max-width: 100%;
    height: auto;
}

@media (max-width: 1199px) {
    .hero_section-container { width: 92%; }
    .hero_section-container .hero_img-box video { width: 100%; }
    .service-slide p { max-width: 86%; }
    .tools_grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
    .header_section { padding: 0; }
    nav.navbar.navbar-expand-lg { border-radius: 0; }
    .navbar-collapse { padding: 18px 0 20px 0; }
    .custom_nav-container .navbar-collapse>div {
        display: flex !important;
    }
    .custom_nav-container .navbar-nav {
        align-items: center;
    }
    .custom_nav-container.navbar-expand-lg .navbar-nav .nav-link { padding: 12px 10px; }
    .nav_action-buttons { justify-content: center; flex-wrap: wrap; margin-top: 14px; }
    .hero_section-container { width: 94%; align-items: flex-start; }
    .hero_section-container .hero_img-box { width: 38%; margin-top: 0; }
    .hero_section-container .hero_detail-box { width: 62%; }
    .hero_section-container .hero_detail-box .hero_detail-container { margin-left: 0; padding-left: 0; }
    .service-slide { min-height: 430px; padding: 32px 28px; }
    .service-slide h1 { font-size: 34px; }
    .business_heading h3, .payment_heading h3, .welcome_container h3 { font-size: 36px; }
    .tools_grid { grid-template-columns: repeat(2, 1fr); }
    .payment_cards { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
    .demo_image-box { width: 78%; margin: 20px auto 40px auto; }
    .welcome_container { padding: 70px 0 30px 0; text-align: center; }
    .welcome_container .d-flex { justify-content: center !important; }
    .info_section .col-md-4 { padding: 24px 18px; text-align: center; }
    .footer_content-row .info_logo {
        text-align: center;
        max-width: 100%;
    }
    .footer_details-column {
        justify-content: center;
        margin-top: 20px;
    }
    .footer_social-column {
        justify-content: center;
        margin-top: 26px;
    }
    .info_news input { width: 100%; }
}

@media (max-width: 768px) {
    .layout_padding { padding: 55px 0; }
    .scanner-panel { width: 360px; }
    .scanner-frame h2 { font-size: 34px; }
    .navbar-brand, .navbar-brand:hover { font-size: 28px; }
    .hero_section-container { flex-direction: column; }
    .hero_section-container .hero_img-box, .hero_section-container .hero_detail-box { width: 100%; }
    .hero_section-container .hero_img-box { order: 2; width: 78%; margin: 24px auto 0 auto; }
    .hero_section-container .hero_img-box video {
        width: 100%;
        max-width: 100%;
    }
    .hero_section-container .hero_detail-box { order: 1; }
    .hero_section-container .hero_detail-box .hero_detail-container { margin-left: 0; padding-left: 0; padding-top: 18px; }
    .service-slide { min-height: auto; padding: 30px 24px 84px 24px; text-align: center; }
    .service-visual {
        opacity: 0.25;
        transform: scale(0.85);
    }
    .service-slide p { max-width: 100%; }
    .service-features { justify-content: center; flex-wrap: wrap; }
    .carousel-control-prev { left: auto; right: 76px; }
    .carousel-control-next { left: auto; right: 24px; }
    .carousel-control-prev,
    .carousel-control-next {
        bottom: 22px;
    }
    .business_heading h3, .payment_heading h3, .welcome_container h3 { font-size: 32px; }
    .business_heading p, .payment_heading p { padding: 0 10px; }
    .tools_marquee { margin-bottom: 34px; }
    .tools_grid { grid-template-columns: 1fr; }
    .tool_card, .payment_card { min-height: auto; }
    .info_section { padding-top: 60px; }
}

@media (max-width: 576px) {
    .container { padding-left: 18px; padding-right: 18px; }
    .header_section { padding: 0; }
    nav.navbar.navbar-expand-lg { min-height: 66px; border-radius: 0; }
    .custom_nav-container { padding: 10px 10px; }
    .navbar-brand, .navbar-brand:hover { font-size: 25px; }
    .nav_action-buttons { gap: 10px; }
    .nav_action-buttons a { min-height: 42px; padding: 0 18px; font-size: 14px; }
    .nav_action-buttons {
        width: 100%;
    }
    .scanner-panel { width: 92%; }
    .scanner-frame { min-height: 220px; }
    .scanner-frame h2 { font-size: 30px; }
    .scanner-frame p { letter-spacing: 2px; font-size: 10px; }
    .hero_section-container { width: 92%; }
    .hero_section-container .hero_img-box { width: 92%; }
    .hero_section-container .hero_img-box video {
        width: 100%;
        max-width: 100%;
    }
    .service-slide { padding: 26px 18px 82px 18px; border-radius: 22px; }
    .service-slide h1 { font-size: 28px; }
    .service-slide p { font-size: 14px; }
    .carousel-control-prev { left: auto; right: 72px; }
    .carousel-control-next { left: auto; right: 20px; }
    .carousel-control-prev,
    .carousel-control-next {
        bottom: 20px;
    }
    .business_heading h3, .payment_heading h3, .welcome_container h3 { font-size: 28px; }
    .tools_track span { padding: 11px 16px; font-size: 13px; }
    .tool_card { padding: 24px 18px; }
    .payment_card { padding: 30px 22px; }
    .payment_card ul {
        margin-bottom: 24px;
    }
    .popular_tag { font-size: 10px; padding: 8px 14px; }
    .demo_image-box { width: 100%; }
    .welcome_container { padding: 50px 0 20px 0; }
    .floating_contact {
        right: 16px;
        bottom: 18px;
        gap: 10px;
    }
    .floating_actions {
        gap: 10px;
    }
    .floating_btn {
        width: 54px;
        height: 54px;
        font-size: 22px;
    }
    .close_float_btn {
        width: auto;
        min-width: 132px;
        height: 50px;
        font-size: 14px;
    }
    .chatbot_panel {
        left: 14px;
        right: 14px;
        bottom: 86px;
        width: auto;
        max-width: none;
        border-radius: 22px;
    }
    .chat_messages {
        height: 220px;
    }
    .chat_input_area {
        flex-direction: column;
    }
    .chat_input_area button {
        width: 100%;
        padding: 12px 16px;
    }
}

@media (max-width: 400px) {
    .navbar-brand, .navbar-brand:hover { font-size: 22px; }
    .hero_section-container .hero_img-box {
        width: 100%;
    }
    .nav_action-buttons a { width: 100%; }
    .service-slide h1 { font-size: 24px; }
    .business_heading h3, .payment_heading h3, .welcome_container h3 { font-size: 25px; }
    .payment_top { flex-wrap: wrap; }
}

@media (min-width: 1200px) {
    .container { max-width: 1170px; }
}