@media (max-width: 767px) {
    section{
        padding:20px 0px 20px !important;
    }
    section.csr{
        padding : 0px 0px 20px !important;
    }
    section.fleets > .container{
        left:unset;
    }
    section.fleets > .container > .page-title h1{
        width: 100% !important;
    }
    .header-style1 > .navbar-default{
        position: absolute;
        width: 100%;
    }
    .navbar-default{
        box-shadow: none;
        -webkit-box-shadow:none;
    }
    .header-style2 .navbar-brand > img{
        max-height: 60px;
    }
    .sub-menu.open > .active > a{
        font-weight: 600;
    }
    .menu_area-light .navbar-nav > li > a,
    .header-style2 .navbar-nav > li > a{
        color: #626783;
        letter-spacing:normal;
        font-weight: 500;
    }
    .navbar-nav .has-sub > ul > li > a{
        font-size: 14px;
    }
    .header-style2 .navbar-nav li.current > a,
    .header-style2 .navbar-nav li.active > a{
        font-weight: 600;
        color:#0A2258;
    }
    .mtop-30{
        margin-top:30px;
    }
    footer{
        padding:40px 10px 0;
        padding-top:40px;
    }
    .footer-logo-container{
        margin-top:20px;
    }
    .footer-menu-container{
        margin-top:5px;
    }
    .footer-menu{
        display: flex;
        gap:10px;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top:10px;
    }
    .footer-menu > a{
        width: 45%;
    }
    .header-style1 .navbar-default{
        border-bottom:none;
    }

    .top-position1{
        margin-top:0px;
    }
    .contact-info-box{
        margin-top:50px;
    }
    .career-input{
        padding: 20px 16px;
    }
    .custom-file-input{
        display: flex;
        padding:10px 5px;
    }
    .file-name{
        bottom:0;
    }
    .sustain-detail{
        flex-wrap: wrap;
    }

    .pagination > .prev, .pagination > .next, .pagination > ul > li > a{
        width: 36px;
        height: 36px;
        padding: 6px;
    }
    .news-header-content{
        padding:50px 20px 10px;
    }
    .news-header-content h1{
        font-size: 20px !important;
        line-height: 28px;
        font-weight: 500;
    }
    .news-header-tag > p{
        margin:0;
    }
    .news-header-tag{
        margin-bottom:10px;
    }
    .news-header{
        min-height: 220px !important;
    }
    .news-header-content{
        min-height: 220px;
    }
    .projects > .card-footer > .capacity,
    .projects > .card-footer > .contract{
        flex-direction: column;
    }
    .project-headline{
        width: auto;
        flex-direction: column;
        align-items: unset;
        padding: 20px;
        margin-bottom:20px
    }
    .project-headline-det {
        justify-content: space-between;
        align-items: flex-end;
        flex-direction: row-reverse;
        line-height: 18px;
    }
    .project-headline-det > h1{
        font-size: 32px;
    }

    .progess{
        display: flex;
        flex-direction: column !important;
        padding:48px 30px !important;
        gap:30px;
      }
    .mission{
        padding:60px 15px !important;
    }
    .mission .dot-banner {
        top: 57% !important;
        right: 5% !important;
        width: 15%;
    }
    .mis-detail .box{
        margin-bottom:30px;
    }

    .visible-desktop{
        display: none !important;
    }
    .visible-mobile{
        display: block !important;
    }
    .home-page .box-info > h1{
        font-size: 26px !important;
        width: auto !important;
        z-index: 1;
    }
    .home-page .box-info > p{
        font-size: 12px !important;
        line-height: 16px;
        margin:15px 0 5px;
        width: 80%;
    }
    .home-page .vector{
       bottom:60px !important;
    }
    .home-page .box-info{
        padding:15px;
    }
    .home-page .dot-banner {
        position: absolute;
        bottom: 12%;
        right: 25px;
        width: 15%;
    }
    .home-page > .box-white-home{
        display: none;
    }

    .home-info{
        width:100%
    }
    .home-image .home-image-detail{
        width:100%;
        height:350px;
    }

    .news-content{
        padding:20px 16px !important;
        margin-top:0px !important;
    }
    .news-content > h4{
        font-size: 24px !important;
    }
    .news-content p,
    .news-content ul li {
        font-size: 14px !important;
        font-weight: 400;
    }
    .news-content blockquote{
        font-size: 18px !important;
    }
    .news-header-tag > p{
        font-weight: 400 !important;
    }
    .breadcrumb a{
        font-weight: 400;
    }
    .sustain-card{
        margin-bottom:15px;
    }
    .sustain .page-content{
        margin-top:30px !important;
    }
    .sustain-card > .card-content-2{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .sustain-card > .card-content-2 > h4{
        font-weight: 500;
    }
    .sustain-card > .card-content-2 > a{
        width:auto !important;
    }
    .page-title h1{
        line-height: 1.2 !important;
    }
    .navbar-nav li{
        border: none;
    }
    .card-image-cont{
        display: flex;
        flex-direction: column;
        gap:20px;
    }
    .card-image-box{
        width: auto;
    }
    .hidden-content{
        bottom: -20px;
    }
    .csr .csr-text{
        width: auto !important;
    }
    .card-lg{
        min-height: 328px;
    }
    .culture .page-title{
        text-align: left !important;
        margin-top:10px;
    }
    .culture .page-title > h3{
        font-size: 30px !important;
    }
    .custom-box{
        display: flex;
        flex-direction: column-reverse !important;
    }
    .custom-box > .custom-box-item.img{
        height: 250px;
        border-radius:40px 40px 0 0 !important;
    }
    .custom-box > .custom-box-item{
        border-radius:0 0 40px 40px !important;
        padding: 24px;
        width: 100%;
    }
    .custom-box > .custom-box-item > .item-content > h3{
        font-size: 28px;
    }
    .custom-box > .custom-box-item > .item-content > p{
        font-size: 15px;
    }
    section .page-title > h1{
        font-size:26px !important;
    }
    section .page-title > p{
        width: auto !important;
    }
    .business-detail{
        display: flex;
        flex-direction: column;
        gap:5px !important;
    }
    .no-padding-mobile{
        padding:0px !important
    }
    .no-padding-bottom-mobile{
        padding-bottom: 0px !important;
    }
    .section-padding{
        padding: 0px 20px !important;
    }
    .section-content{
        gap:30px;
    }
    .section-custom-icon{
        padding:0 30px;
    }
    .section-custom-icon .col-lg-4{
        padding:0 20px;
        width: 50%;
    }
    .custom-section{
        padding: 80px 0px !important;
    }
    .custom-mum-card{
        padding: 0 5px;
        display: flex;
        align-items: center;
        margin-bottom:20px;
    }
    .history{
        display: flex;
        flex-direction: column-reverse;
    }
    .history-pagination{
        display: flex !important;
        flex-direction: row-reverse !important;
        justify-content: center;
    }
    .card-culture{
        padding:0px;
    }
    .img-all.structure-item{
        height: 200px !important;
    }
    .img-all.structure-item > .box{
        bottom: -70%;
        top:unset;
        left: 6%;
    }
    .structure .col-lg-12{
        margin-bottom:30px !important;
    }
    .structure .col-lg-12 > img{
        bottom:40% !important;
        float: right !important;
    }
    .img-person{
        height:450px;
        width: 350px;
        max-height: max-content;
    }
    .structure .person{
        right: -25px;
        padding:15px 20px;
    }
    .structure .col-lg-4 > img{
        right: -2% !important;
    }
    section.fleets{
        padding-bottom: 0px !important;
    }
    section.fleets .page-content .fleets{
        margin-bottom: 0px !important;
        min-height: 90vh !important;
    }
    .fleets .page-content > .vector{
        margin-top:200px !important;
    }
    .fleets > .container{
        left: unset;
    }
    .fleets > .container .info-bottom{
        margin-top:0px !important;
    }
    .fleets-container{
        width: auto !important;
    }
    .fleets-content{
        display: flex;
        flex-direction: column !important;
        gap:50px;
    }
    .fleets-information .vector-diamond{
        display: none !important;
    }
    .fleets-pagination{
        width: auto !important;
    }
    .fleets-pagination > .number{
        display: flex;
        gap: 10px !important;
        margin-right: 10px !important;
    }
    .vector-diamond{
        bottom:22% !important;
        right: 5% !important;
        width: 20%;
    }
    .fleets-image > .image > img {
        width: auto !important;
        position: unset !important;
        top: unset !important;
    }
    .fleets-image > h1{
        font-size: 40px;
        margin-top:20px !important;
        align-self: flex-start !important;
    }
    .card-forecast{
        margin-bottom:10px;
    }
    .card-forecast .revenue{
        flex-direction: column;
    }
    .navbar-nav > li.visible-mobile{
        padding:0 20px;
    }
    .custom-mum-card > .thumbnail, .custom-mum-card-2 > .thumbnail{
        width: auto;
        height: auto;
    }
    .custom-mum-card > .title-description{
        width: auto;
    }
    .history .thumbnail img{
        height: 300px;
    }
    .business-activity .custom-box-item{
        border-radius: 0 0 12px 12px !important;
    }
    .business-activity .custom-box-item.img{
        border-radius: 12px 12px 0 0 !important;
    }

}

@media screen and (min-width: 1200px) {
    .fleets > .container{
        left: 4%;
    }
    .custom-mum-card > .thumbnail,
    .custom-mum-card-2 > .thumbnail{
        position: relative;
        width: auto;
        height: 180px;
        z-index: 1;
    }
    .custom-mum-card > .title-description{
        width: auto;
    }
}

@media screen and (min-width: 1920px) {
    .fleets > .container{
        left: 3%;
    }
    .fleets-image > .image > img {
        width: 55% !important;
    }
    .fleets-pagination{
        width: 380% !important;
    }
    .mission {
      min-height: 800px; /* Set the width to 1920 pixels or adjust as needed */
    }
    .navbar-nav > li{
        margin-left:30px;
    }
    .custom-mum-card > .thumbnail,
    .custom-mum-card-2 > .thumbnail{
    position: relative;
    width: auto;
    height: auto;
    z-index: 1;
    }
    .custom-mum-card > .title-description{
        width: auto;
    }
  }