@media only screen and (min-width:0px) and (max-width:1024px)
{


/* responsive header css*/


    .header_responsive i
    {
    display:block !important;
    color:black;
    font-size:2rem;
    }


    .header_responsive 
    {
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:92%;
    padding:0rem;
    }

    
    .header_responsive h1
    {
   padding-left:0.5rem;
    }


    #navbar {
        width: 0;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background-color:rgb(23, 21, 21);
        overflow-x: hidden;
        transition:all 0.5s ease;
        z-index: 1;
        white-space:nowrap;
    }
    
    #navbar.open {
        width: 80%;
    }
    
    ul.ul_list {
        list-style-type: none;
        padding: 0;
        display:block !important;
        position:absolute;
        top:2rem ;
        margin:0rem !important;




    }
    
    ul.ul_list li {
        display:block !important;
        padding-top:2rem;
        height:auto;
        border:none !important;
        text-align: left; /* Align text to the left */


    }
    
    ul.ul_list li a {
        color: white;
        text-decoration: none;
    }
    
    .fa-bars {
        cursor: pointer;
    }
    





    #overlay {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(76, 96, 247, 0.5);
        z-index: 1;
    }




/* hero section css */

.hero_section
{
    height:auto;

    
}

.hero_section_child_left
{
    height:20rem !important;
}

.hero_section_child_right
{
    border-radius:0rem !important;
    margin:2rem 0 2rem 0 !important;
}



/* about content section css */

.about_section
{
    height:auto;

}

.about_section_child_card
{
    margin-left:0rem !important;
    margin-top:1rem !important;
}




/* footer section res css */

.footer
{
   display:flex;
   flex-direction: column;
   padding-left:1rem;
   box-sizing: border-box;
}



/* subfooter section css */

.subfooter
{
  
    
    width:100% !important;
    
}

.subfooter_child1
{
    display:flex;
    flex-direction:column;
}

.subfooter_child1 h1
{
    font-size:2rem;
}





}