@media screen and (min-width: 992px) and (max-width: 1199px){
    .banner_img img{
        width: 100%;
    }
    .steps_main {
        margin: 3rem 0rem;
    }
    .Innovation_main {
        height: auto;
        margin-bottom: 15px;
    }
    .aim_main {
        height: auto;
        margin-bottom: 15px;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px){

    /* ===========HEADER========== */
    .nav_media{
        display: none;
    }
    #menuToggle{
        display: block !important;
        position: relative;
        top: 5px;
        right: 0rem;
        z-index: 999;
        
        -webkit-user-select: none;
        user-select: none;
        }
    
        #menuToggle input{
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;
        
        cursor: pointer;
        
        opacity: 0; /* hide this */
        z-index: 2; /* and place it over the hamburger */
        
        -webkit-touch-callout: none;
        }
    
        .inner_menu span{
            background: #000 !important;
        }
    #menuToggle span{
        display: block;
        width: 35px;
        height: 3px;
        margin-bottom: 9px;
        position: relative;
        
        background: rgb(0, 0, 0);
        border-radius: 3px;
        
        z-index: 1;
        
        transform-origin: 4px 0px;
        
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    opacity 0.55s ease;
        }
    
        #menuToggle span:first-child{
            transform-origin: 0% 0%;
        }
    
        #menuToggle span:nth-last-child(2){
            transform-origin: 0% 100%;
        }
    
        /* 
        * Transform all the slices of hamburger
        * into a crossmark.
        */
        #menuToggle input:checked ~ span{
            opacity: 1;
            transform: rotate(45deg) translate(-11px, -19px);
            background: #000000;
            margin-bottom: 4px;
        }
    
        /*
        * But let's hide the middle one.
        */
        #menuToggle input:checked ~ span:nth-last-child(3){
            opacity: 0;
            transform: rotate(0deg) scale(0.2, 0.2);
        }
    
        /*
        * Ohyeah and the last one should go the other direction
        */
        #menuToggle input:checked ~ span:nth-last-child(2){
            transform: rotate(-45deg) translate(0, 9px);
        }
    
        .header_bar #menuToggle span{
            background: #000;
        }

    .costum_nav{
        position: absolute;
        top: 0;
        height: 100vh;
        background-color: #ffffffe6;
        backdrop-filter: blur(20px);
        left: 0;
        right: 0;
        opacity: 0;
        visibility: hidden;
        transition: 0.4s all ease-in-out;
        transform: translateY(-100%);
    }
    .costum_nav.active{
        opacity: 1;
        visibility: visible;
        transition: 0.4s all ease-in-out;
        transform: translateY(0%);
    }
    .costum_nav ul {
        padding: 0;
        list-style: none;
        display: grid;
        gap: 27px;
        font-size: 23px;
        margin-bottom: 0;
        align-content: center;
        justify-content: center;
        height: 100%;
        text-align: center;
        font-weight: 600;
        font-family: 'Marcellus SC';
    }
    .mobile_menu_ftr{
        display: flex;
        position: absolute;
        bottom: 0;
        list-style: none;
        gap: 9px;
        left: 0;
        right: 0;
        justify-content: center;
        padding: 9px 1px;
        border-top: 1px solid #66666629;
    }

    /* ========================== */



    .banner_bg {
        display: block;
        align-items: normal;  
    }
    .banner_caption h1 {
        text-align: center;
    }
    .banner_img {
        text-align: center;
        margin-top: 2rem;
    }
    .round_item {
        left: 8rem;
    }
    .banner_cnt {
        margin-top: 3rem;
        text-align: center;
    }
    
/* =============================================== */

    .indexabt_img img {
        width: 100%;
    }
    .abt_round_item {
        right: 5rem;
    }
    .indexabt_cnt {
        margin: 38px 7px 0px 7px;
    }

    /* ======================================== */

    .history_img {
        text-align: center;
    }
    .history_img img {
        width: 100%;
    }
    .history_headline {
        bottom: -47px;
        right: 11.5rem;
    }
    .history_cnt{
        margin-top: 65px;
    }

    /* =================================== */

    .divisions {
        height: 205px;
    }

    /* =================================== */

    .team_details {
        padding: 6px 2px;
        transform: translateY(80%);
    }
    .team_details h6 {
        font-size: 14px;
        margin-bottom: 14px;
    }
    .team_details p {
        font-size: 11px;
        padding: 0px 5px;
    }


    .project_cnt h5 {
        padding: 11px 11px;
    }

    .ftr_navs ul {
        gap: 11px;
        font-size: 11px;
    }
    .ftr_cnt img{
        width: 190px;
    }
    .ftr_cnt p {
        font-size: 11px;
    }

    /* ======================================= */

    .steps_main {
        margin: 3rem 0rem;
    }
    .Innovation_main {
        height: auto;
        margin-bottom: 15px;
    }
    .aim_main {
        height: auto;
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 767px){

    .nav_media{
        display: none;
    }

    #menuToggle{
        display: block !important;
        position: relative;
        top: 5px;
        right: 0rem;
        z-index: 999;
        
        -webkit-user-select: none;
        user-select: none;
        }
    
        #menuToggle input{
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;
        
        cursor: pointer;
        
        opacity: 0; /* hide this */
        z-index: 2; /* and place it over the hamburger */
        
        -webkit-touch-callout: none;
        }
    
        .inner_menu span{
            background: #000 !important;
        }
    #menuToggle span{
        display: block;
        width: 35px;
        height: 3px;
        margin-bottom: 9px;
        position: relative;
        
        background: rgb(0, 0, 0);
        border-radius: 3px;
        
        z-index: 1;
        
        transform-origin: 4px 0px;
        
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    opacity 0.55s ease;
        }
    
        #menuToggle span:first-child{
            transform-origin: 0% 0%;
        }
    
        #menuToggle span:nth-last-child(2){
            transform-origin: 0% 100%;
        }
    
        /* 
        * Transform all the slices of hamburger
        * into a crossmark.
        */
        #menuToggle input:checked ~ span{
            opacity: 1;
            transform: rotate(45deg) translate(-11px, -19px);
            background: #000000;
            margin-bottom: 4px;
        }
    
        /*
        * But let's hide the middle one.
        */
        #menuToggle input:checked ~ span:nth-last-child(3){
            opacity: 0;
            transform: rotate(0deg) scale(0.2, 0.2);
        }
    
        /*
        * Ohyeah and the last one should go the other direction
        */
        #menuToggle input:checked ~ span:nth-last-child(2){
            transform: rotate(-45deg) translate(0, 9px);
        }
    
        .header_bar #menuToggle span{
            background: #000;
        }

    .costum_nav{
        position: absolute;
        top: 0;
        height: 100vh;
        background-color: #ffffffe6;
        backdrop-filter: blur(20px);
        left: 0;
        right: 0;
        opacity: 0;
        visibility: hidden;
        transition: 0.5s all ease-in-out;
        transform: translateX(100%);
    }
    .costum_nav.active{
        opacity: 1;
        visibility: visible;
        transition: 0.5s all ease-in-out;
        transform: translateX(0%);
    }
    .costum_nav ul {
        padding: 0;
        list-style: none;
        display: grid;
        gap: 27px;
        font-size: 23px;
        margin-bottom: 0;
        align-content: center;
        justify-content: center;
        height: 100%;
        text-align: center;
        font-weight: 600;
        font-family: 'Marcellus SC';
    }
    .mobile_menu_ftr{
        display: flex;
        position: absolute;
        bottom: 3rem;
        list-style: none;
        gap: 9px;
        left: 0;
        right: 0;
        justify-content: center;
        padding: 9px 1px;
        border-top: 1px solid #66666629;
    }

    .banner_bg::after{
        display: none;
    }
    .banner_bg {
        display: block;
        align-items: normal; 
        height: auto; 
        padding-bottom: 2rem;
    }
    .banner_caption h1 {
        text-align: center;
        font-size: 2.1rem;
    }
    .banner_img {
        text-align: center;
        margin-top: 2rem;
    }
    .banner_img img{
        width: 100%;
        max-width: 280px;
    }
    .round_item img{
        width: auto;
    }
    .round_item {
        left: 0rem;
    }
    .banner_cnt {
        margin-top: 3rem;
        text-align: center;
    }

    .book_modal_item {
        width: 90%;
    }

    /* ===================================== */

    .indexabt_main {
        margin-top: 50px;
    }
    .indexabt_img img {
        width: 100%;
        border-radius: 20px;
    }
    .abt_round_item {
        right: 5rem;
        display: none;
    }
    .indexabt_cnt {
        margin: 20px 7px 0px 7px;
    }

    /* =============================== */

    .divi_cnt h5 {
        font-size: 16px;
        padding: 27px 10px;
        height: 110px;
    }
    .hover_clr {
        transform: translate(0,-58%);
        border-radius: 0;
    }
    .divi_img{
        text-align: center;
    }

    /* ============================= */

    .history_img img {
        width: 100%;
        border-radius: 20px;
    }
    .history_headline {
        bottom: 0rem;
        right: 0;
        left: 0px;
        text-align: center;
        margin: 29px;
    }
    .history_cnt h1 {
        font-size: 2.7rem;
        margin-top: 1.5rem;
    }
    .history_headline h1 {
        font-size: 43px;
    }

    /* ========================== */

    .team_item_main {
        margin-bottom: 1.5rem;
    }
    .main_team h3::before {
        width: 21px;
        margin-left: -1.7rem;
    }
    .main_team h3::after {
        width: 21px;
        margin-left: 0.5rem;
    }
    .assist_team h3::before{
        width: 21px;
        margin-left: -1.7rem;
    }
    .assist_team h3::after{
        width: 21px;
        margin-left: 0.5rem;
    }
    .assist_team h3 {
        font-size: calc(25px + 16 * ((143vw - 600px) / 600));
    }

    .team_details {
        padding: 20px 14px;
    }
    .team_details h6 {
        margin-bottom: 25px;
        font-size: 21px;
    }
    .team_details p{
        font-size: 20px;
    }


    /* ============================ */

    .ftr_navs{
        text-align: center;
    }
    .ftr_media{
        text-align: center;
    }
    .cpright p{
        text-align: center;
    }
    .design p{
        text-align: center;
    }

    /* ------------------------------------- */

    .sub_banner::before {
        opacity: .3;
    }
    .sub_banner::after {
        opacity: .3;
    }
    .steps_main {
        margin: 3rem 0rem;
    }
    .Innovation_main {
        height: auto;
        margin-bottom: 15px;
    }
    .aim_main {
        height: auto;
        margin-bottom: 15px;
    }

    .map_main {
        margin: 0rem 0rem 3rem;
    }
    .inner_history_cnt {
        margin: 2rem 0rem;
    }

/* ----------------gallery---------------------- */

    .gallery-container img {
        height: 250px;
    }

/* ----------------footer---------------------- */
    .ftr_navs ul {
        justify-content: center;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        display: inline-flex;
        gap: 15px;
        font-family: 'Poppins-Regular';
        font-size: 13px;
        color: #fff;
        margin-top: 25px;
    }
    .powerdby {
        text-align: center;
    }
}
@media screen and (max-width:375px){
    /* .gallery-container div img{
        height: 170px;
        border-radius: 5px;
      }
} */}
@media screen and (max-width:450px){
    /* .gallery-container div img{
        height: 220px;
        border-radius: 5px;
      } */
}
@media screen and (max-width:530px){
    .appointment_item{
        flex-direction: column;
        text-align: center;
    }
    /* .gallery-container div img{
        height: 240px;
        border-radius: 5px;
      } */
}
@media screen and (max-width:992px){
    .banner_head{
        padding: 1rem 3rem !important;
        flex-direction: column !important;
    }
    .banner_head h4{
        width: 100%;
        text-align: center;
        margin-top: 15px;
        font-weight: 200;
    }
    .banner_bg {
        display: block;
        align-items: normal; 
        height: auto; 
        padding-bottom: 2rem;
    }
}


/* ----------------team---------------------- */
@media screen and (min-width:1024px){
    .teampadding{
        margin: 1.5rem;
    }
    .team_details p{
        font-size: 14px;
    }
}
@media screen and (min-width:1024px){
    .teampadding{
        margin: 1.5rem;
    }
    .team_details p{
        font-size: 14px;
    }
}
@media screen and (min-width:1400px){
    .teampadding{
        margin: 2.5rem;
    }
}
/* @media screen and (min-width:992px){
    .team_item_main{
        margin: 3rem;
    }
} */

/* ----------------gallery---------------------- */

@media screen and (max-width:1400px){
    .gallery-container img {
        height: 190px;
    }
}
@media screen and (max-width:1200px){
    .indexabt_cnt {
        margin: 38px 0px 0px 0px;
    }
}
@media screen and (max-width:1024px){
    .gallery-container img {
        height: 180px;
    }
}
@media screen and (max-width:992px){
    .gallery-container img {
        height: 180px;
    }
}
@media screen and (max-width:767px){
    .gallery-container img {
        height: 250px;
    }
}
@media screen and (max-width:475px){
    .gallery-container img {
        height: 250px;
    }
}
@media screen and (max-width:425px){
    .gallery-container img {
        height: 200px;
    }
}
@media screen and (max-width:425px){
    .gallery-container img {
        height: 180px;
    }
}
@media screen and (max-width:320px){
    .gallery-container img {
        height: 150px;
    }
}
@media screen and (max-width:768px){
    .teampadding{
        margin: 1.5rem;
    }
    .team_details p{
        font-size: 15px;
    }
}