/* // X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
    .navbar-px {
        padding-left: 0.1rem;
        padding-right: 0.1rem;
    }
    
    .section-title {
        font-size: 10px;
        margin: 1rem;
    
    }


    .hero::before {
        background-position: left top;

    }

    .article-section {
        /* font-size: 0.7rem; */
        /* margin-left: 0.5rem; */
        padding: 1rem;
    }
    /* body .article-section ol, ul {
        margin-left: 0.5rem;
    } */

.about-the-scheme-article-section-container .about-the-scheme-article-section {
    /* padding-left: 1.5rem; */
    padding: 1rem;
}
.about-the-scheme-article-section-container .about-the-scheme-article-section  ul {
    padding-left: 0.5rem;
}

/* ABOUT THE SCHEME SECTION */
    .about-the-scheme-section {
        padding: 0%;
    }

    /* .about-nysc-brief {
        margin: 20px;
        padding-left: 30px;
    } */

    .about-the-scheme-container {
        flex-direction: column;
    }
    
    .about-nysc-brief {
        margin: 0;
        padding-left: 0 !important;
        
    }

    body main .interactive-map-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .map-container {
        width: 100% !important;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .map-brief {
        width: 100% !important;
    }
/* MEET THE DG SECTION */
    .meet-dg-content {
        display: flex;
        flex-direction: column;
    }
    
    .meet-dg-content .meet-dg-brief {
        border-left: none;
        padding: 5px;
    }

    
/* KEYLINKS SECTION */
    .keylinks-container {
        flex-direction: column;
        align-items: center;
    }

    /* Modal Styling */
    .modal-content {
        position: relative;
        background-color: #fff;
        padding: 10px;
        border-radius: 25px;
        max-width: 900px; 
        margin: 100px auto;
        display: grid;
        place-items: center;
      }

/* OBJECTIVES SECTION */
    .objectives-content-container {
        flex-direction: column;

    }

    .objectives-content-container .objectives-contents {
        width: 100%;
        padding: 5px;

    }

    .objectives-content-container .objectives-section-img {
        width: 100%;
        margin: 1rem;

    }
    
/* MAIN FOOTER */

}



 /* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {     
        body .navbar-px {
            padding-left: 0.1rem;
            padding-right: 0.1rem;
        }
        
        body .navbar .navbar-nav {
            text-align: center;
        }
        
        body .navbar .navbar-nav .nav-item .dropdown-departments {
            font-size: 0.8rem;
        }


        
        .section-title {
            font-size: 10px;
            margin: 1rem;
        
        }

        .article-section-container {
            padding: 1rem !important;

        }
        
        .article-section-container .article-section {
            padding: 1rem !important;
            margin: 0% !important;

        }


        /* .hero::before { background-size: calc(100vw) calc(100vh) !important; } */
    /* ABOUT THE SCHEME SECTION */
        .about-the-scheme-section {
            padding: 0%;
        }
    
        .about-the-scheme-container {
            flex-direction: column;
            align-items: center !important;
        }
        
        .col {
            flex: none;
        }
        
        body .hm-card-container {
            margin: 1rem auto;
            width: 100%;
            /* flex-direction: column; */
            
        }

        body main .interactive-map-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
        }
        .map-container {
            width: 100% !important;
            flex-direction: column;
        }

        .map-brief {
            width: 100% !important;
        }
    /* MEET THE DG SECTION */
        .meet-dg-content, .about-nysc-content {
            display: flex;
            flex-direction: column;
            text-align: center;
            align-items: center;
        }

        body .meet-dg-content img, .about-nysc-content img {
            max-height: 350px;
            max-width: 350px;
        }
        
        .meet-dg-content .meet-dg-brief {
            border-left: none;
            padding: 5px;
        }
    
        
    /* KEYLINKS SECTION */
        .keylinks-container {
            flex-direction: column;
            align-items: center;
        }

        /* Modal Styles */
/* Basic modal styling */
.modal {
    display: none; /* Hide initially */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center horizontally and vertically */
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
  }
  
  .modal-content {
    position: relative;
    background-color: #fff;
    padding: 10px;
    border-radius: 25px;
    max-width: 900px; 
    margin: 15% auto;
    display: grid;
    place-items: center;
  }
  
  /* Grid for clickable anchor tags */
  .flex-container {
    flex-wrap: nowrap;
    justify-content: center;
  }
  
  body .modal-flex-item {
    flex-direction: column;
    display: flex;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 900;
    overflow: hidden;
    
    
  }
    
/* OBJECTIVES SECTION */
        .objectives-content-container {
            flex-direction: column;
    
        }
    
        .objectives-content-container .objectives-contents {
            width: 100%;
            padding: 5px;
    
        }
    
        .objectives-content-container .objectives-section-img {
            width: 100%;
            margin: 1rem;
    
        }

        .objectives-section-img {
            display: none;
        }

 /* FOOTER CONTENT */
        #main-footer .footer-content-container {
            display: flex !important;
            flex-direction: column;

        }

        .copyright-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        
/***************** ABOUT THE SCHEME PAGE MOBILE VIEW STYLES **************************************/
        /* ABOUT THE SCHEME HERO CONTENTS */
        .about-title, .mission-title, .dg-office-title, .objective-title, .directorate-title, .camps-title { font-size: 4rem; }
        .structure-title, .service-year-title, .project-title { font-size: 3.5rem; }

        .secretariat-title, .review-charges-title, .management-title { font-size: 3.2rem; }
        .certificate-cns-title, .certificate-exp-title, .payments-title, .foreign-mob-title, .mobreg-title { font-size: 2.1rem; }
        .foreign-mob-title, .privacy-title { font-size: 1.6rem; }
        .cbo-title { font-size: 1.5rem; }
        
        .about-the-scheme-article-section-container, .article-section-container {
            padding: 1rem;
            width: 98%;
        }


        
/***************** TOP MANAGEMENT PAGE MOBILE VIEW STYLES **************************************/
        .dg-card-container .card .card-back {
            align-content: center;
            justify-content: center;
        }
        
        /* Styles for the card container and card */
        .card-container {
           flex-direction: column;
           justify-content: center;
           align-items: center;
        }
        

        

        

        

        


        

        
  

    
}

@media (min-width: 600px) and (max-width: 1024px) {
    /* Tablet-specific styles */
    body .navbar .navbar-nav {
        text-align: center;
    }
    
    .about-nysc-content {
        flex-wrap: wrap;
        align-items: center !important;
        text-align: center;
        justify-content: center;
    }

    body main .interactive-map-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
    .map-container {
    width: 100% !important;
    flex-direction: column;
    }

    .map-brief {
    width: 100% !important;
    }

    .meet-dg-content {
        flex-direction: column;
    }

    .meet-dg-brief {
        border: none !important;

    }

    .keylinks-container {
        flex-direction: column;
        justify-content: center;
        justify-content: center;
        flex-wrap: wrap;
        align-content: center;
    }

    .objectives-content-container {
        flex-direction: column;
    }
    
    .objectives-contents {
        width: 100% !important;
    }

    .objectives-section-img {
        display: none;
    }

    .news-and-updates-content {
        padding: 0;
        justify-content: space-evenly !important;
    }
    
    .news-and-updates-content .card {
        margin: 0.2rem !important;
    }

    #main-footer .footer-content-container {
        display: flex !important;
        flex-direction: column;
    
    }

    .copyright-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    
}


/* Large devices (desktops, 992px and up) */


/* X-Large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) { ... }

/* XX-Large devices (larger desktops, 1400px and up) */
@media (max-width: 1400px) { ... }