/*==================
Tablet Layout
===================*/
@media only screen and (min-width:200px) and (max-width:991px) {    
    .siteHeader {
        height: 3.8rem;
    }
    
    #main_menu {
        display: flex;
    }

    .inner_menu {
        min-height: auto;
        padding: 5px;
        flex-direction: column;
        flex: 1;
    }

    .logo_area {
        max-width: 100px;
    }

    .menu_area {
        display: none;
        justify-content: flex-start;
        padding-top: 10px;
    }

    .menu_items {
        display: flex;
        flex-direction: column;
        align-items: baseline;
        max-height: 40vh;
        overflow: hidden auto;
    }

    #main_menu ul li {
        margin: 0 0 0 20px;
        padding: 0px;
        line-height: 2em;
    }

    #main_menu ul li a {
        text-align: left;
    }

    #main_menu ul ul li {
        margin-left: 20px;
    }

    #main_menu ul li:nth-child(5) a,#main_menu ul li:nth-child(6) a {
        display: none;
    }

    #main_menu ul ul li:nth-child(5) a,#main_menu ul ul li:nth-child(6) a {
        display: block;
    }

    .dropdown {
        position: initial;
    }

    #check{
        position: absolute;
        margin: 0;
        top: 1em;
        right: 1em;   
        width: 2rem;
        height: 2rem;
        cursor: pointer;
        opacity: 0;
        display: block;
    }

    .hamburger-menu-container {
        display: flex;
        padding: 5px;
        align-items: center;
        justify-content: flex-end;
    }

    .envelope-icon a, .cell-phone-icon a {
        display: flex;
        text-decoration: none;
    }
    
    .envelope-icon i,.cell-phone-icon i{
        font-size: 22px;
        color: rgb(237, 75, 83);
    }
    
    .cell-phone-icon i{
        font-size: 17px;
        margin-right: 15px;
    }
    
    .hamburger-menu{
        width: 3rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hamburger-menu div {
        width: 22px;
        height: 2px;
        border-radius: 5px;
        background-color: rgb(237,75,83);
        position: relative;
        transition: .5s;
    }
    
    .hamburger-menu div:before,
    .hamburger-menu div:after {
        content: '';
        position: absolute;
        width: inherit;
        height: inherit;
        background-color: rgb(237, 75, 83);
        border-radius: 5px;
        transition: .5s;
    }
    
    .hamburger-menu div:before {
        transform: translateY(-5px);
    }
    
    .hamburger-menu div:after {
        transform: translateY(5px);
    }
    
    #check:checked ~ .hamburger-menu-container .hamburger-menu div {
        background-color: transparent;
    }
    
    #check:checked ~ .hamburger-menu-container .hamburger-menu div:before {
        transform: translateY(0) rotate(45deg);
    }
    
    #check:checked ~ .hamburger-menu-container .hamburger-menu div:after {
        transform: translateY(0) rotate(-45deg);
    }    

    #check:checked ~ .inner_menu .menu_area {
        display: flex;
    }

    #check:checked ~ .hamburger-menu-container {
        align-items: normal;
    } 

    #check:checked ~ .hamburger-menu-container .envelope-icon {
        padding-top: 14px;
    }

    #check:checked ~ .hamburger-menu-container .cell-phone-icon {
        padding-top: 17px;
    }

    .site_container {
        width: 85%;
    }

    .inner_area_1 {
        padding: 3rem 0px 0px 0px;
    }

    .media_query_ia1 {
        padding: 3rem 0px;
    }

    .inner_area_2 {
        padding: 3rem 0px;
    }

    .content_area_1 {
        flex-direction: column;
        justify-content: center;
    }

    .description_area {
        padding-bottom: 2rem;
    }

    .content_area_2 .description_area {
        padding-bottom: 0px;
    }

    .area_title_navyblue, .area_title_white {
        font-size: 1.8rem;
    }

    .area_paragraph {
        font-size: 0.8rem;
        line-height: 1.57;
    }

    .image_area {
        padding-left: 0px;
    }

    .video_description_area {
        top: 1rem;
        left: 2rem;
    }

    .video_description_paragraph {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    .video_description_paragraph i {
        font-size: 1rem;
    }

    .video_hover_text {
        font-size: 0.6rem;
    }

    .area_matrials_what_we_do {
        grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
    }

    .display_flex {
        flex-direction: column;
    }

    .meet_experts_abstract {
        margin: 0px 0px 2rem;
        width: auto;
    }

    .meet_experts_abstract h2 {
        margin: 0px 0px 0.8rem;
    }

    .meet_experts_slideshow {
        width: 100%;
    }

    .meet_experts_slideshow_leftimage {
        bottom: -1rem;
        left: -3rem;
    }

    .bg_video {
        display: none;
    }

    .bg_video_area {
        padding: 4.5rem 0px;
    }

    .bg_video_area img {
        display: block;
        mix-blend-mode: overlay;
    }

    .bg_video_section_h1style {
        margin: 0px 0px 0.8rem;
    }
}

/*==================
Mobile Layout
===================*/
@media only screen and (min-width:200px) and (max-width:480px) {
    .bg_video_section {
        background: rgb(29, 30, 43);
    }

    .bg_video_area_heading {
        width: 100%;
    }

    .area_materials_watch_our_videos {
        grid-template-columns: repeat(2, minmax(0px, 1fr));
        gap: 1rem;
    }

    .area_matrials_what_we_do {
        gap: 2rem;
    }

    .media_query_amwwd {
        grid-template-columns: minmax(0px, 1fr);
    }

    .media_query_sc1 {
        width: 100%;
    }

    .meet_experts_abstract {
        margin: 0px 2rem 1.5rem;
    }

    .meet_experts_slideshow_leftimage,
    .meet_experts_slideshow_rightimage {
        display: none;
    }

    .slideshow_area {
        padding: 2rem;
    }

    .slideshow_area::before {
        width: 100%;
        height: calc(100% - 2rem);
        margin-top: 80px;
    }

    .owl-stage-outer {
        margin-top: -40px;
    }

    .owl_carousel_materials {
        flex-direction: column;
        align-items: center;
    }

    .owl_carousel_materials_description {
        padding: 3rem 0px 0px;
    }

    .owl-theme .owl-dots {
        transform: translateX(-50%);
    }
}