/* Up to lg (Bootstrap breakpoint) */
@media (max-width: 991.98px) {

    /*HEADER START*/
    .yp-navbar {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }

    /* Dropdown menu background on mobile */
    .yp-nav-collapse {
        background-color: #ffffff;
        margin-top: 0.75rem;
        padding: 0.75rem 0.85rem 0.9rem;
        border-radius: 16px;
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    }

    .yp-nav-menu {
        align-items: flex-start !important;
    }

    .yp-nav-link {
        width: 100%;
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }

    .yp-lang-wrapper {
        width: 100%;
        margin-left: 0;
        margin-top: 0.4rem;
    }

    .yp-lang-select {
        width: 100%;
    }

    /* Underline slightly inward on small screens */
    .yp-nav-link::after {
        left: 0.4rem;
        right: 0.4rem;
    }
    /*HEADER END*/


    /*HERO SECTION START*/
    .yp-hero-section {
        padding: 41px 0 41px;
    }

    .yp-hero-content {
        text-align: center;
        margin: 0 auto 24px;
    }

    .yp-hero-actions {
        justify-content: center;
    }

    .yp-hero-tech-chips {
        justify-content: center;
    }

    .yp-hero-visual {
        max-width: 360px;
    }

    .yp-hero-floating-card-top {
        top: -16px;
        right: -8px;
    }

    .yp-hero-floating-card-bottom {
        bottom: -16px;
        left: -8px;
    }
    /*HERO SECTION END*/


    /*Previous works start*/
    .yp-projects-section {
        padding: 45px 0 45px;
    }

    .yp-section-title {
        font-size: 1.55rem;
    }

    .yp-projects-header-row {
        margin-bottom: 26px;
    }
    /*Previous work end*/



    /*About us section start*/
    .yp-about-section {
        padding: 33px 0 33px;
    }

    .yp-about-content {
        margin-left: 0;
    }

    .yp-about-title {
        font-size: 1.55rem;
    }

    .yp-about-chip-left {
        left: 4px;
    }

    .yp-about-chip-right {
        right: 4px;
    }
    /*About us section end*/



    /*SKILLS / TECH STACK SECTION START*/
    .yp-skills-intro {
        max-width: 100%;
    }
    /*SKILLS / TECH STACK SECTION END*/





    /*CONTACT / HIRE ME SECTION START*/
    .yp-contact-card,
    .yp-contact-side {
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
    }
    /*CONTACT / HIRE ME SECTION END*/



    /*MOBILE / TABLET BOTTOM NAV START*/
    body {
        padding-bottom: 70px; /* প্রয়োজন মনে করলে value একটু কম/বেশি করতে পারো */
    }
    /*MOBILE / TABLET BOTTOM NAV END*/



    /*FLOATING WHATSAPP BUTTON START*/
    .yp-whatsapp-float {
        bottom: 110px;  /* a bit higher to clear your bottom nav bar */
        right: 12px;
    }
    /*FLOATING WHATSAPP BUTTON END*/

    /*Facebook floating button start*/

    .yp-facebook-float {
        bottom: 110px; /* একটু উপরে যাতে mobile UI এর সাথে clash না করে */
        left: 12px;
    }
    /*Facebook floating button end*/




    /* ===================== SINGLE PROJECT PAGE STYLES START ===================== */
    .yp-single-project-hero {
        padding: 80px 0 40px;
    }

    .yp-single-project-title {
        font-size: 2rem;
    }

    .yp-single-project-subtitle {
        max-width: 100%;
    }

    .yp-project-hero-card {
        margin-top: 4px;
    }

    .yp-project-sidebar {
        position: static;
        margin-top: 8px;
    }
    /* ===================== SINGLE PROJECT PAGE STYLES END ===================== */





    /*CONTACT PAGE RESPONSIVE STYLES START*/
    .yp-contact-hero {
        padding: 80px 0 40px;
    }

    .yp-contact-title {
        font-size: 2rem;
    }

    .yp-contact-highlight-list {
        flex-direction: column;
        align-items: flex-start;
    }

    .yp-contact-main {
        padding: 28px 0 72px;
    }

    .yp-contact-form-card {
        padding: 18px 16px 16px;
    }

    .yp-contact-info-card {
        margin-top: 4px;
    }
    /*CONTACT PAGE RESPONSIVE STYLES START*/




    /*ABOUT PAGE START*/
    .yp-about-hero {
        padding: 80px 0 40px;
    }

    .yp-about-title {
        font-size: 2rem;
    }

    .yp-about-subtitle {
        max-width: 100%;
    }

    .yp-about-photo-card {
        margin-top: 4px;
    }

    .yp-about-main {
        padding: 32px 0 72px;
    }
    /*ABOUT PAGE END*/




    /*Term page start*/
    .yp-terms-hero {
        padding: 80px 0 40px;
    }

    .yp-terms-title {
        font-size: 2rem;
    }

    .yp-terms-subtitle {
        max-width: 100%;
    }

    .yp-terms-main {
        padding: 32px 0 72px;
    }

    .yp-terms-toc {
        position: static;
        margin-bottom: 4px;
    }
    /*Term page end*/



    /*Privacy page start*/
    .yp-privacy-hero {
        padding: 80px 0 40px;
    }

    .yp-privacy-title {
        font-size: 2rem;
    }

    .yp-privacy-subtitle {
        max-width: 100%;
    }

    .yp-privacy-main {
        padding: 32px 0 72px;
    }

    .yp-privacy-toc {
        position: static;
        margin-bottom: 4px;
    }
    /*Privacy page end*/



    /*ALL PROJECTS (LIST PAGE) START*/
    .yp-all-projects-section {
        padding: 90px 0 100px;
    }

    .yp-filter-chips {
        justify-content: flex-start;
    }

    .yp-all-search-row {
        row-gap: 12px;
    }
    /*ALL PROJECTS (LIST PAGE) END*/


    /*BLOG ARCHIVE START*/
    .yp-blog-section {
        padding: 90px 0 100px;
    }

    .yp-blog-search-row {
        margin-bottom: 24px;
    }

    .yp-blog-search-input {
        height: 44px;
    }
    /*BLOG ARCHIVE END*/



    /*BLOG SINGLE START*/
    .yp-blog-single-section {
        padding: 90px 0 100px;
    }

    .yp-blog-single-title {
        font-size: 1.6rem;
    }

    .yp-blog-single-card {
        padding: 22px 18px 22px;
    }

    .yp-blog-single-cover img {
        max-height: 300px;
    }
    /*BLOG SINGLE END*/
}

@media (max-width: 767.98px) {
    /*Previous work start*/
    .yp-projects-header-row {
        text-align: center;
    }

    .yp-section-subtitle,
    .yp-section-note {
        max-width: 100%;
    }

    .yp-section-note {
        margin-top: 10px;
    }

    .yp-project-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .yp-project-main-btn {
        width: 100%;
        justify-content: center;
    }

    .yp-project-live-links {
        width: 100%;
    }

    .yp-project-live-pill {
        flex: 1 1 auto;
        justify-content: center;
    }
    /*Previous work end*/


    /*About us section start*/
    .yp-about-section {
        padding-top: 10px;
    }

    .yp-about-photo-card {
        margin-bottom: 26px;
    }

    .yp-about-status-pill {
        bottom: -20px;
    }

    .yp-about-content {
        text-align: left;
    }
    /*About us section end*/


    /*Footer start*/
    .yp-footer-bottom-right {
        justify-content: flex-start;
    }
    /*Footer end*/



    /*ALL PROJECTS (LIST PAGE) START*/
    .yp-all-header-row {
        text-align: center;
    }

    .yp-all-search-row {
        text-align: left;
    }

    .yp-filter-chips {
        justify-content: flex-start;
    }

    .yp-search-input {
        height: 44px;
    }
    /*ALL PROJECTS (LIST PAGE) END*/



    /*BLOG ARCHIVE START*/
    .yp-blog-header-row {
        text-align: center;
    }

    .yp-section-subtitle {
        max-width: 100%;
    }

    .yp-blog-search-row {
        text-align: left;
    }

    .yp-blog-search-input {
        height: 42px;
    }
    /*BLOG ARCHIVE END*/


    /*BLOG SINGLE START*/
    .yp-blog-single-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .yp-comments-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .yp-comment {
        padding: 10px 9px;
    }

    .yp-comment-avatar {
        width: 34px;
        height: 34px;
    }

    .yp-comment-submit-btn {
        width: 100%;
        justify-content: center;
    }
    /*BLOG SINGLE END*/


    /*Facebook floating button start*/
    .yp-facebook-badge {
        display: none;
    }

    .yp-facebook-float {
        bottom: 110px; /* একটু উপরে যাতে mobile UI এর সাথে clash না করে */
        left: 12px;
    }
    /*Facebook floating button end*/
}

/* Very small screens */
@media (max-width: 575.98px) {
    /*HEADER START*/
    .yp-logo-text {
        font-size: 0.95rem;
        letter-spacing: 0.1em;
    }

    .yp-logo-mark {
        width: 34px;
        height: 34px;
        font-size: 0.85rem;
    }
    /*HEADER END*/



    /*HERO SECTION START*/
    .yp-hero-section {
        padding: 35px 0 35px;
    }

    .yp-hero-title {
        font-size: 2.0rem;
    }

    .yp-hero-visual {
        max-width: 320px;
    }

    .yp-hero-floating-card-top,
    .yp-hero-floating-card-bottom {
        display: none; /* চাইলে মোবাইলে হাইড করো, ক্লীন থাকবে */
    }

    .yp-hero-tech-chips span {
        font-size: 0.76rem;
    }
    /*HERO SECTION END*/


    /*SKILLS / TECH STACK SECTION START*/
    .yp-skills-section {
        padding: 50px 0 50px;
    }
    /*SKILLS / TECH STACK SECTION END*/



    /*TESTIMONIAL SECTION START*/
    .yp-testimonials-section {
        padding: 50px 0 50px;
    }
    /*TESTIMONIAL SECTION END*/




    /*CONTACT / HIRE ME SECTION START*/
    .yp-contact-section {
        padding: 50px 0 50px;
    }

    .yp-contact-card {
        padding: 18px 14px 16px;
    }
    /*CONTACT / HIRE ME SECTION END*/



    /*Footer start*/
    .yp-footer {
        padding: 40px 0 24px;
    }

    .yp-footer-brand,
    .yp-footer-contact {
        max-width: 100%;
    }
    /*Footer end*/




    /* ===================== SINGLE PROJECT PAGE STYLES START ===================== */
    .yp-back-link {
        margin-bottom: 12px;
    }

    .yp-project-meta {
        flex-direction: column;
        gap: 6px;
    }

    .yp-feature-list li {
        padding: 10px 10px;
    }
    /* ===================== SINGLE PROJECT PAGE STYLES END ===================== */




    /*CONTACT PAGE RESPONSIVE STYLES START*/
    .yp-contact-hero {
        padding-top: 72px;
    }

    .yp-contact-title {
        font-size: 1.75rem;
    }

    .yp-contact-highlight-list li {
        width: 100%;
    }

    .yp-contact-side-card {
        padding: 16px 14px 12px;
    }

    .yp-contact-form-card {
        padding: 16px 14px 14px;
    }
    /*CONTACT PAGE RESPONSIVE STYLES END*/





    /*ABOUT PAGE START*/
    .yp-about-hero {
        padding-top: 72px;
    }

    .yp-about-title {
        font-size: 1.75rem;
    }

    .yp-about-highlights {
        flex-direction: column;
        align-items: flex-start;
    }

    .yp-about-photo-card {
        padding: 16px 14px 12px;
    }

    .yp-about-side-card {
        padding: 16px 14px 12px;
    }

    .yp-about-service-card {
        padding: 14px 13px 12px;
    }

    .yp-about-skill-card {
        padding: 10px 11px;
    }

    .yp-timeline {
        padding-left: 14px;
    }

    .yp-timeline::before {
        left: 4px;
    }

    .yp-timeline .dot {
        left: -4px;
    }
    /*ABOUT PAGE END*/




    /*Term page start*/
    .yp-terms-hero {
        padding-top: 72px;
    }

    .yp-terms-title {
        font-size: 1.75rem;
    }

    .yp-terms-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .yp-terms-content {
        padding: 16px 14px 14px;
    }
    /*Term page end*/





    /*Privacy page start*/
    .yp-privacy-hero {
        padding-top: 72px;
    }

    .yp-privacy-title {
        font-size: 1.75rem;
    }

    .yp-privacy-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .yp-privacy-content {
        padding: 16px 14px 14px;
    }
    /*Privacy page end*/
}