/* ============================================================ LIVESKILLS INDEX PAGE — RESPONSIVE CSS (SAFE VERSION) Har rule SIRF media query ke andar hai. Desktop (>1199px) ka existing design 100% waisa hi rahega — koi global/unconditional override nahi hai. Ise me sabse LAST me add karo. ============================================================ */ /* ============================================================ TABLET (max-width: 991px) ============================================================ */ @media (max-width: 991px) { .menutogglebtn, .mob-navclosebtn { display: flex !important; } /* Employee/Admin Sign In - keep visible on all devices, just shrink to fit */ .desktop_login { display: flex !important; margin-left: auto; margin-right: 8px; } .desktop_login .imlog { flex-wrap: nowrap; } .desktop_login .sign { font-size: 12px; white-space: nowrap; padding: 0 8px !important; } .banner-section .row { flex-direction: column; text-align: center; } .bannerleft_side h1 { font-size: 26px; } .community-section .row.flex-nowrap.scroll-row, .trend .row.flex-nowrap.scroll-row { overflow-x: auto; padding: 15px 0; -webkit-overflow-scrolling: touch; } html body .mobile_navigation { width: 300px; max-width: 80vw; position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; background: #fff; z-index: 1060; box-shadow: 2px 0 12px rgba(0,0,0,.15); } } /* ============================================================ MOBILE LANDSCAPE (max-width: 767px) ============================================================ */ @media (max-width: 767px) { .bannerleft_side h1 { font-size: 22px; margin-bottom: 10px; } .bannerleft_side p { font-size: 14px; } .community-section .info-card { min-width: 200px; } .trend .trendingcourse_card { min-width: 180px; } .certification-section h3 { font-size: 18px; } .certification-section p { font-size: 13px; } .faq-section h3 { font-size: 18px; } .modal-dialog.ddr .row.g-4.data { row-gap: 10px !important; } } /* ============================================================ MOBILE PORTRAIT (max-width: 575px) ============================================================ */ @media (max-width: 575px) { .nav_logo img { max-width: 90px; } .desktop_login .sign { font-size: 10.5px; padding: 0 5px !important; } .bannerleft_side h1 { font-size: 20px; } .bannerleft_side p { font-size: 13px; } .community-header h3 { font-size: 17px; } .community-header p { font-size: 13px; } .community-section .info-card { min-width: 170px; } .info-text h5 { font-size: 13px; } .info-text small { font-size: 11px; } .CompanyTitle h3 { font-size: 17px; } .trend .trendingcourse_card { min-width: 160px; } .trend .trendingcourse_card .card-title h5 { font-size: 13px; } .certification-section { padding: 20px 10px; } .certification-section h3 { font-size: 16px; } .step-card h4 { font-size: 14px; } .faq-section { padding: 15px 10px; } .accordion-button { font-size: 13px; } .accordion-body { font-size: 12px; } .footerNew .foot-left-pane, .footerNew .foot-right-pane { font-size: 11px !important; } #HyperLink19 { margin-left: 0px; } .krishnav { padding: 5px 3px; } }