* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #F6F8FA;
}

.container-company {
    display: flex;
    justify-content: center;
    align-items: flex-start; 
    margin-top: 6rem;
    width: 72%;
}

.content-company {
    margin-left: 5rem; 
    padding-bottom: 5rem;
}

.content-company h2 {
    padding-top: 2rem;
    padding-bottom: 0.4rem;
    color: #262b49;
    font-weight: 700;
}

.content-company p {
    font-size: 1rem;
    color: #707281;
}


















 .sidebar {
    width: 20rem;
    background-color: #fafafa;
    padding: 20px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); 
    margin-left: 17rem; 
}

.sidebar h3 {
    font-weight: 500; 
    color: #262B49; 
}

.sidebar ul {
    list-style-type: none;
    padding-left: 0;
}

.sidebar ul li {
    margin-bottom: 10px;
    white-space: nowrap;
    padding: 10px;
    padding-left: 0;
    border-bottom: 1px solid #ebebeb;
}

.sidebar ul li a {
    color: #333; 
    display: block; 
    transition: all 0.2s ease; 
}

.sidebar ul li a:hover {
    color: rgb(103, 154, 211);
    transform: translateX(0.5rem);
}

.sidebar ul li {
    color: #333;
} 




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

    .container-company{
        width:1234px;
    }

    .sidebar {
        position: relative; 
        margin-top: 20px; 
        margin-left: 0;
    }

    .content-company{
        margin-left: 40px;
        width: 1234px;
    }

} 


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

    .container-company{
        width:1156px;
        margin-left: 0px;
    }

    .sidebar {
        position: relative; 
        margin-top: 0px; 
    }

    .content-company{
        width: 1159px;
        margin-left: 0;
    }

} 

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

    .container-company{
        width:1156px;
        margin-left: 0px;
    }


    .sidebar {
        position: relative; 
        margin-top: 0.9rem; 
    }

    .content-company{
        padding: 1rem;
    }

} 


@media screen and (max-width:1084px){
    .container-company{
        width:1084px;
        margin-left: 0px;
    }

    .content-company{
        width: 790px;
        padding: 1rem;
    }

    .sidebar{
        width: 290px;
        margin-right: 1rem;
        top: 14px;
    }
}

@media screen and (max-width:988px){
    .container-company{
        width:988px;
        margin-left: 0px;
    }

    .content-company{
        width: 760px;
    }

    .sidebar{
        width: 200px;
        margin-right: 1rem;

    }

    
}


@media screen and (max-width: 940px) {
    .header{
        width:940px;
    }

    .menu{
        width:940px;
    }

    .sidebar {
        position: relative; 
        margin-top: 0px; 
    }

    .container-company{
        width: 940px;
    }

    .content-company{
        width: 900px;
    }

    .content-company img{
        width: 700px;
    }

   
} 


@media screen and (max-width: 820px) {
    .header{
        width:820px;
    }

    .menu{
        width: 820px;
    }
    .container-company {
        width: 818px;
        flex-direction: column;
        align-items: center;
    }

    .sidebar {
        width: 818px
    }
  

    .content-company{
        width: 818px;
        padding: 1rem;

    }
}


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

    .header{
        width:768px;
    }

    .menu{
        width:768px;
    }

    .sidebar{
        width: 768px;
    }

    .container-company {
        width: 768px;
        flex-direction: column;
        align-items: center;
    }

    .content-company{
        width: 768px;
        padding: 1rem;
    }
}



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

    .header{
        width:712px;
    }

    .menu{
        width: 712px;
    }
    
    .container-company {
        width: 712px;

    }

    .sidebar {
        width: 712px;
       margin-top: 0;
       padding-top: 0;
    }
  

    .content-company{
        width: 712px;
        margin-right: 0;
        padding: 1rem;
    }

    .content-company img{
        width: 680px;
    }
}



@media screen and (max-width: 646px) {
    .header{
        width:646px;
    }

    .menu{
        width: 646px;
    }

    .container-company {
        width:  646px;
    }
    .sidebar{
        width: 646px;
    }

    .content-company{
        width:  646px;
        margin-right: 0;
        margin-left: 0; 
        padding: 1rem;
    }

    .content-company img{
        width:  625px;
    }

}


@media screen and (max-width: 542px) {
    .header{
        width:542px;
    }

    .menu{
        width: 542px;
    }

    .sidebar{
        width: 542px;
    }

    .container-company {
        width:  542px;
        flex-direction: column;
        align-items: center;
    }

    .content-company{
        width:  542px;
        margin-right: 0;
        margin-left: 0; 
        padding: 1rem;
    }

    .content-company img{
        width:  500px;
    }

}



@media screen and (max-width: 519px) {
    .header{
        width:519px;
    }

    .menu{
        width: 519px;
    }

    .sidebar{
        width: 519px;
    }

    .container-company {
        width:  519px;
        flex-direction: column;
        align-items: center;
    }

    .content-company{
        width:  519px;
        margin-right: 0;
        margin-left: 0; 
        padding: 1rem;
    }

    .content-company img{
        width:  500px;
    }

}



@media screen and (max-width: 490px) {
    .header{
        width:491px;
    }

    .menu{
        width:491px;
    }

    .sidebar{
        width:490px;
    }

    .container-company {
        width: 490px;
        flex-direction: column;
        align-items: center;
    }

    .content-company{
        width: 490px;
        margin-right: 0;
        margin-left: 0; 
        padding: 1rem;
    }

    .content-company img{
        width: 475px;
    }

}


@media screen and (max-width: 472px) {
    .header{
        width:472px;
    }

    .menu{
        width:472px;
    }

    .sidebar{
        width:472px;
    }

    .container-company {
        width: 472px;
    }

    .content-company{
        width: 472px;
        margin-right: 0;
        margin-left: 0; 
        padding: 1rem;
    }

    .content-company img{
        width: 450px;
    }

}


@media screen and (max-width: 444px) {
    .header{
        width:444px;
    }

    .menu{
        width:444px;
    }

    .sidebar{
        width:444px;
    }

    .container-company {
        width: 444px;
    }

    .content-company{
        width: 444px; 
        padding: 1rem;
    }

    .content-company img{
        width: 435px;
    }

}


@media screen and (max-width: 430px) {
    .header{
        width:430px;
    }

    .menu{
        width:430px;
    }

    .sidebar{
        width:430px;
    }

    .container-company {
        width: 430px;
    }

    .content-company{
        width: 430px; 
        padding: 1rem;
    }

    .content-company img{
        width: 410px;
    }

}

@media screen and (max-width: 414px) {
    .header{
        width:414px;
    }

    .menu{
        width:414px;
    }

    .sidebar{
        width:414px;
    }

    .container-company {
        width: 414px;
    }

    .content-company{
        width: 414px; 
        padding: 1rem;
    }

    .content-company img{
        width: 390px;
    }

    .megamenu{
        flex-direction: column;
        position: static;
        box-shadow: none;
        border-radius: 0;
        height: 0;
        max-width: 300px;
        overflow: hidden;
       }  
   
       .dropdown:hover .megamenu{
           height: 100%;
       }
   
       .nav_list{
           position: absolute;
           height: 100vh;
           width: 300px;
           left: -100%;
           max-width: 300px;
       }
   
       .toggle_menu,
       .close_menu{
           display: block;
       }
   
       .toggle_menu i :hover{
           color: #3c85c0;
       }
   
       .close_menu{
           margin: 1rem 1rem 1rem auto;
           background-color: #252f38;
           border-radius: 50%;
           width: 32px;
           height: 32px;
           text-align: center;
       }
   
       .close_menu:hover{
           color: #252f38;
       }
   
       .close_menu i{
           line-height: 32px;
           color: white;
           font-size: 22px;
       }
   
       .show_menu{
           left: 0;
       }



}

@media screen and (max-width: 390px) {
    .header{
        width:390px;
    }

    .menu{
        width:390px;
    }

    .sidebar{
        width:390px;
    }

    .container-company {
        width: 390px;
    }

    .content-company{
        width: 390px; 
        padding: 1rem;
    }

    .content-company img{
        width: 370px;
    }

}

@media screen and (max-width: 375px) {
    .header{
        width:375px;
    }

    .menu{
        width:375px;
    }

    .sidebar{
        width:375px;
    }

    .container-company {
        width: 375px;
    }

    .content-company{
        width: 375px; 
        padding: 1rem;
    }

    .content-company img{
        width: 350px;
    }

}


@media screen and (max-width: 320px) {
    .header{
        width:320px;
    }

    .menu{
        width:320px;
    }

    .sidebar{
        width:320px;
    }

    .container-company {
        width: 320px;
    }

    .content-company{
        width: 320px; 
        padding: 1rem;
    }

    .content-company img{
        width: 300px;
    }

}