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

/* ==========================================
   CLEANED MOBILE RESPONSIVE STYLES (768px)
   ========================================== */
@media (max-width: 768px) {
    /* Global Elements */
    nav {
        padding: 0.8rem 0;
    }
     nav.scrolled{
        width: 96%;
        border-radius: 100px;
    }
     .nav-container{
        width: 94%;
    }
    .logo{
        gap: 10px;
    }
    .logo-text {
        font-size: 1.8rem;
    }
    .hi-logo {
        width: 45px;
        height: 45px;
    }
    /* Hide desktop menu */
    .nav-links{
        display: none;
    }
    /* Show hamburger */
    .mobile-menu-btn{
        display: flex !important;
        width: 42px;
        height: 42px;
    }
    .mobile-menu-btn span{
        width: 20px;
    }
    .mobile-nav {
        top: 70px;
    }
    
    /* HERO SECTION */
    .hero {
        padding: 120px 1.2rem 60px;
        text-align: center;
    }
    .photo-hero {
        margin-top: 60px;
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }
    .hero-content {
        align-items: center;
        text-align: center;
    }
   .hero-content h1 {
         font-size: 55px !important;
    }
    .hero-content .subtitle {
        font-size: 22px;
        margin-bottom: 15px;
        width: 100%;
    }
    .hero-content p {
        font-size: 15px;
        font-weight: bold;
        line-height: 1.6rem;
        width: 100%;
        margin-bottom: 25px;
    }
    /* CTA BUTTONS */
    .cta-buttons {
        justify-content: center;
        margin-bottom: 5px;
    }
    /* STATS */
    .stats-section {
        justify-content: center;
        gap: 0.5rem;
        margin-bottom: 0;
    }
    .stat-card {
        min-width: 110px;
        padding: 15px !important;
        margin-bottom: 0;
    }
    .download{
        margin-bottom: 0;
        width: 100%;
    }

    .img1 img
     {
        max-width: 500px;
        width: 100%;
    }
    .social-media{
        width: 100%;
        margin-top: -40px;
        gap: 22px;
    }

    .social-media a {
        width: 50px;
        height: 50px;

    }
    .social-media-logoo{
        width: 55px;
    }
    .section-subtitle{
        line-height: 1.4;
    }
    
    .os-layout-wrapper,
    .os-layout-wrapper.reverse{
        flex-direction: column;
        gap: 30px;
    }
    .ido-conatainer h1 {
        font-size: 30px;
        margin-bottom: 15px;
        margin-top: 45px; 
        padding: 15px;
    }
    .all-logo-box{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
         
    }
    .logo-bg-shape img{
        width: 90px; 
        height: 90px;
        
    }
    .services-image-box {
        width: 105%;
        max-width: 600px; /* Image ka size control karne ke liye */
        margin-top: 0px;
    }
    


    .footer-bottom {
        flex-direction: column; 
        text-align: center;
        justify-content: center;
        align-items: center; /* Elements ko horizontally center karne ke liye */
        gap: 15px; /* Spacing thodi tight ki */
        width: 100%;
    }

    
}