@media (max-width: 768px) {
    .top-header {
        padding: 1rem 0rem;
        height: auto;
        width: 100%;
    }
    .navbar {
        height: auto;  /* Allow navbar height to adjust based on content */
        padding: 0.6rem 1rem;  /* Reduce padding if needed */
        align-items: center;
        width: 100%;
        border-radius: 0px;
        top: 0px;
    }
    .navbar .logo {
        margin-bottom: 1rem;  /* Add space between logo and other items */
    }
    .header-left {
        flex-direction: row;  /* Stack items vertically */
        align-items: center; /* Center items vertically on mobile */
    }
    .header-left img {
        width: 120px;  /* Reduce image size on small screens */
        height: auto;  /* Maintain aspect ratio */
    }
    .hidden-header-right {
        display: none;  /* Show the hidden header section on mobile */
    }

    /* Adjust menu icon size on small screens */
    .menu-icon img {
        align-items: center;
        width: 40px;
        height: auto;
    }
    .exit img {
        width: 25px;  /* Reduce image size */
        height: 25px;
    }

    /* Adjust hidden menu width and position on smaller screens */
    .hidden-menu {
        width: 50%;  /* Increase width for small screens */
        top: 10px;   /* Add some top margin */
        right: 0px;
    }
    .menu-item {
        font-size: 0.9em;  /* Slightly reduce font size on mobile */
        padding: 0.8rem;   /* Reduce padding for smaller screens */
    }
    a {
        font-size: 1rem;
    }

    .hidden-menu ul {
        padding: 0.5rem;  /* Reduce padding on mobile */
    }
    .image-slider {
        width: 63%;  /* Increase width on small screens for better use of space */
        margin-top: 6rem;
    }
    .bg-gradient {
        margin: 11rem auto 2rem auto;
    }
    .heading {
        display: flex;
        flex-direction: column;
        width: 90%;  /* Increase width on smaller screens */
        padding: 1rem;  /* Adjust padding */
        margin:  auto ; 
        align-items: center;  /* Ensure horizontal centering */
        justify-content: center;  /* Ensure vertical centering */
    }

    .heading h1 {
        font-size: 2rem;  /* Reduce font size for mobile */
        flex-direction: column;
        row-gap: 10px;
    }
    .heading h1 div {
        font-size: 1.8rem;  /* Reduce font size for mobile */
        
    }

    .heading h2 {
        font-size: 2rem;  /* Reduce font size for h2 on mobile */
        row-gap: 10px;  /* Reduce column gap for better fit */
        flex-direction: column;
    }
    .TAGLINE-white {
      font-size: 1rem;
        text-align: left;
    }
    .TAGLINE-aqua{
        font-size: 1rem;
    }
    .intro{
        font-size: 1rem;
    }
    .intropara{
        font-size: 1rem;
        padding: 1rem ;
    }
    .at-glance {
        width: 90%;  /* Increase the width to 90% for smaller screens */
        padding: 1rem;  /* Add some padding around */
    }
    .at-glance h3{
        font-size: 1.5rem;
    }

    .stat {
        width: 90%;  /* Make the grid container take up more width */
        grid-template-columns: repeat(2, 1fr);  /* 2 columns for smaller screens */
        grid-template-rows: repeat(3, 1fr);  /* 3 rows for better fitting */
        gap: 2rem;  /* Smaller gap between grid items */
    }
    .stat-item {
        padding: 1rem 0.5rem;  /* Reduce padding on smaller screens */
        text-align: center;
        font-size: 0.8rem;  
    }

    .stats-number {
        font-size: 1.5rem;  /* Adjust font size for smaller screens */
    }

    /* Optional: Adjust hover effect size */
    .stat-item:hover {
        transform: scale(1.1);  /* Slightly smaller scale effect on mobile */
    }
    .stat-details {
        font-size: 0.8rem;
    }
    .header1{
        padding: 0rem;
    }
    .header1 h1 {
        width: 95%;  /* Increase width to take up more space on smaller screens */
        font-size: 2rem;  /* Adjust font size for readability */
        padding: 0.5rem;  /* Reduce padding for mobile */
        margin: 0.5rem;
    }
    .content-1 {
      margin: auto;
        width: 100%;  /* Full width for mobile */
    }

    /* Adjust .boxes-A grid layout for mobile */
    .boxes-A {
        grid-template-columns: repeat(1 , 1fr);  /* Stack grid items vertically */
        height: auto;  /* Let the height adjust dynamically */
        margin: 0.5rem;  /* Reduce margin for mobile */
        align-items: center;
        gap: 1rem;
    }
    .boxes-A p {
        font-size: 1rem;
        text-align: center;
    }

    .boxes-A .para  p {
        padding: 0.5rem;  /* Reduce padding inside boxes */
        font-size: 1.2rem;  /* Adjust font size */
    }

    /* Adjust the images for mobile */
    .image img {
        width: 65%;  /* Make image responsive */
        height: auto;  /* Keep the aspect ratio intact */
        max-width: 300px;  /* Set a max width for better scaling */
        border-radius: 24px;
    }

    .para h3 {
        font-size: 1.6rem;  /* Adjust font size for smaller screens */
    }
    .para p{
        text-align: center;
         font-size: 1rem;
    }
    .updates-container {
        margin: auto;
        padding: 0.5rem;
        font-size: 11px;
        font-weight: bold;
    }
    .logo {
        flex: 0 0 100%;
      }
    .footer-container {
       display: flex;
       flex-direction: column;  /* Stack items vertically */
       /* width: 500px; */
    }

    .about-stes,
    .robo-safar {
        align-items: center;
        gap: 1rem;
    }
    .footer-menu , .footer-policies ,.robo-safar-img img{
        display: none;
    }

    /* Adjust images in .about-stes and .robo-safar */
    .about-stes img
     {
        width: 55%;  /* Make images responsive */
        height: auto;  /* Maintain aspect ratio */
    }
    .about-stes p {
        font-size: 1.2rem;
        text-align: center;
    }
    

    /* Adjust buttons in .join-us-btn */
    .join-us-btn button {
        padding: 0.5rem 2rem;  /* Reduce padding for smaller screens */
        font-size: 0.9rem;  /* Make the button text smaller */
    }

    /* Adjust social media icons */
    .socials {
        flex-direction: row;  /* Stack social icons vertically */
        gap: 1rem;
        justify-content: center;
    }
    .socials img{
        width: 35px;
    }

    /* Adjust copyright text */
    .copyright {
       margin: auto;
        
    }
}

/* Media query for medium screens (e.g., tablets) */
@media (min-width: 769px) and (max-width: 1025px) {
    .top-header {
        padding: 1.2rem 0rem;
        height: 117px;
    }
    .navbar {
        flex-direction: row;  /* Keep items in a row for tablet-sized screens */
        height: auto;  /* Reduce height for medium screens */
        align-items: center;
    }
    .header-left{
        align-items: center;
    }
    .header-left img {
        margin: 1rem 1rem;
        width: 180px;  /* Slightly reduce the image size for tablets */
        height: auto;  /* Maintain aspect ratio */
    }
    .menu-icon img {
        margin: 1.5rem 0rem;
        width: 38px;  /* Slightly larger than mobile but smaller than desktop */
        height: 38px;
    }
    .exit img {
        width: 28px;  /* Slightly smaller than desktop size */
        height: 28px;
    }

    .hidden-menu {
        width: 40%;  /* Adjust width for tablet-sized screens */
        top: 5px;    /* Adjust position for better fit */
    }
    .menu-item {
        font-size: 1em;  /* Set font size to 1em for tablets */
        padding: 0.9rem;  /* Adjust padding slightly */
    }
    a {
        font-size: 1rem;

    }

    .hidden-menu ul {
        padding: 0.8rem;  /* Slightly reduce padding for tablets */
    }
    .image-slider {
        width: 85%;  /* Slightly reduce width for medium screens */
        margin-top: 8rem;
    }
    .heading h1 {
        font-size: 2rem;  /* Reduce font size for mobile */
    }

    .heading h2 {
        font-size: 1rem;  /* Reduce font size for h2 on mobile */
        column-gap: 2px;  /* Reduce column gap for better fit */
    }
    .TAGLINE-white {
      /* font-size: large; */
        text-align: left;
    }
    .at-glance {
        width: 85%;  /* Slightly reduce width on tablets */
    }
    .at-glance h3{
        font-size: 1rem;
    }

    .stat {
        width: 80%;  /* Adjust the width for tablet view */
        grid-template-columns: repeat(3, 1fr);  /* 3 columns */
        grid-template-rows: repeat(2, 1fr);  /* 2 rows */
        gap: 2.5rem;  /* Adjust gap */
    }   
    .stat-item {
        padding: 1.5rem 1rem;  /* Adjust padding for tablets */
        text-align: center;
    }

    .stats-number {
        font-size: 1.8rem;  /* Slightly smaller font size */
    }

    .stat-item:hover {
        transform: scale(1.1);  /* Slightly smaller scale effect */
    }
    .stat-details {
        font-size: 0.8rem;
    }
    .header1 {
        margin: 3rem auto;
        padding: 1rem;
    }
    .header1 h1 {
        width: 90%;  /* Increase width slightly for tablet screens */
        font-size: 2rem;  /* Adjust font size for medium screens */
        margin: 1.2rem auto;
    }
    .content-1 {
        margin-left: 2rem;  /* Adjust left margin for tablet */
        width: 90%;  /* Maintain width for tablets */
        gap: 5rem;
    }

    /* Adjust .boxes-A grid layout for tablets */
    .boxes-A {
        grid-template-columns: repeat(2, 1fr);  /* 2 equal columns */
    }
    .boxes-A p {
        font-size: 0.5rem;
        text-align: center;
    }

    .boxes-A .para p {
        font-size: 1rem;
        text-align: justify;
    }

    /* Adjust the images for tablet */
    .image img {
        height: auto;  /* Keep aspect ratio */
        max-width: 371px;  /* Set max-width for tablet screens */
    }

    .para h3 {
        font-size: 1.5rem;  /* Adjust font size for tablet screens */
    }
    .para p{
        text-align: center;
         font-size: 1rem;
    }

    .logo {
        flex: 0 0 33.33%;
      }

    .about-stes,
    .footer-menu,
    .footer-policies,
    .robo-safar {
        padding: 1.5rem;  /* Increase padding for readability */
    }

    /* Adjust images in .about-stes and .robo-safar */
    .about-stes img,
    .robo-safar-img img {
        width: 80%;  /* Reduce image width on tablet */
        height: auto;
    }

    /* Adjust button padding */
    .join-us-btn button {
        padding: 0.5rem 3rem;  /* Adjust padding for medium screens */
        font-size: 1rem;  /* Keep font size moderate */
    }

    /* Stack social media icons */
    .socials {
        flex-direction: row;  /* Arrange social icons in row for tablets */
        gap: 1.5rem;
    }

    /* Adjust copyright text */
    .copyright {
        text-align: center;
        font-size: small;
    }
}