﻿/*desktop view*/
@media only screen and (min-width: 1025px) {

    .main-layout {
        margin-top: -13px;
    }

    .justify-center {
        justify-content: center;
    }

    .desktop-main-header {
        display: flex !important;
    }

    .mobile-main-header {
        display: none !important;
    }

    .home-carousel-content-layout-grid {
        grid-template-columns: 1fr 1fr;
        width: 1200px;
    }

    .home-carousel-content-layout {
        justify-content: center;
    }

    .top-main-infos-header {
        height: 35px;
    }

    .contact-infos-header {
        height: 100%;
        width: 1200px;
        grid-template-columns: 1fr 1fr;
    }

    .home-carousel-container {
        height: 900px;
    }

    .home-featured-work-layout {
        width: 1200px;
    }

    .featured-project-list {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .home-carousel-text-cont .main-text {
        width: 450px;
    }

    .latest-news-layout {
        width: 1200px;
    }

    .latest-news-container {
        justify-content: center;
    }

    .latest-news-card-container {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .about-us-container {
    }

    .about-us-layout, .project-layout {
        justify-content: center;
    }

    .about-us-main-container, .project-main-container {
        grid-template-columns: 1fr 1fr;
    }

    .about-us-cont, .project-cont {
        width: 100%;
    }

    .project-wrapper1 {
        height: 300px !important;
    }

    .project-layout{
        justify-content:center;
    }

    .project-wrapper-cont {
        grid-template-columns: 1fr 1fr;
        width: 1200px;
    }

    .project-card-container {
        grid-template-columns: 1fr 1fr;
    }

    .project-details-wrapper {
        width: 1400px;
        grid-template-columns: 4fr 1fr;
    }

    .project-active-img {
        height: 800px;
    }

    .project-img-container {
        flex-direction: column;
    }

    .project-details-span{
        width:1108px;
    }

    .project-detail-img-wrapper {
        height: 195px;
    }

    .contact-us-container {
        justify-content: center;
    }

    .contact-us-layout {
        width: 1400px;
        grid-template-columns: 1fr 1fr;
    }

    .career-main-cont {
        width: 1200px;
    }


    #selectWrapper {
        height: 35px;
        grid-template-columns: 1fr 1fr;
    }

    .available-position {
        justify-content: flex-end;
    }

    .table-wrapper {
        height: 550px;
        grid-template-rows: 45px 1fr;
    }

    .table-tbody-wrapper {
        height: 500px;
        overflow-y: scroll;
        flex-direction: column;
    }

    .table-tr {
        height: 50px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        align-items: center;
    }
}

/*mobile view*/
@media only screen and (max-width: 767px) {
    .desktop-main-header {
        display: none !important;
    }

    .mobile-main-header {
        display: grid !important;
        padding: 0 10px;
    }

    .home-carousel-content-layout-grid {
        grid-template-rows: 250px 1fr;
        width: 100%;
    }

    .top-main-header{
        top:2%!important;
    }

    .top-main-infos-header {
        height: 85px;
    }

    .contact-infos-header {
        height:100px;
        width: 100%;
        grid-template-rows:50px 30px;
    }

    .contact-infos-header .email-mobile-cont{
       height: 50px;
    }

    .home-carousel-content-layout{
        padding:15px!important;
        top:20%;
        height:auto!important;
    }

    .home-carousel-container {
        height: 1200px;
    }

    .social-media-section{
        justify-content:flex-start!important;
    }


    .featured-project-list {
        grid-template-rows: 1fr 1fr 1fr;
    }

    .home-carousel-text-cont .main-text {
        width: 100%;
    }

    .home-cards-infos {
      justify-content:start!important;
       align-items:center;
    }

    .home-featured-work-layout{
        grid-template-rows: 100px 1fr 100px!important;
        padding: 0 10px;
    }

    .home-featured-work-container {
        height: auto;
    }

    .home-featured-work-container{
       
    }

    .featured-project-card{
        width:350px!important;
        height:350px!important;
    }

    .view-more-project{
        display:inline-block!important;
        padding:0 10px;
        text-align:center;
    }

    footer {
        margin-top: 25%;
    }

    .latest-news-layout {
        width: 100%;
        padding: 15px;
    }

    .latest-news-container {
      
        height:800px!important;
        margin-top:15%;
    }

    .latest-news-card-container {
        grid-template-rows: 1fr 1fr 1fr 1fr;
    }

    .about-us-layout {
     
    }

    .about-us-cont, .project-cont{
        width:100%;
        margin-top:30%!important;
        padding:15px 26px;
    }

    .about-us-wrapper1-text, .project-wrapper1-text {
        width: 100% !important;
        left: 0 !important;
        padding: 10px;
        top: 20% !important;
    }

    .career-wrapper-text {
        width: 100% !important;
        left: 0 !important;
        padding: 10px;
        top: 43% !important;
    }

    .about-us-main-div, .project-main-div {
        padding: 0 !important;
    }

    .about-us-main-div:first-child, .project-main-div:first-child{
        border:none!important;
    }

    .about-us-main-container, .project-main-container{
        grid-template-rows: 1fr 1fr!important;
        gap:40px;
    }

    .about-us-wrapper1, .project-wrapper1 {
        top:15%!important;
        height:500px!important;
    }

 

    #headerMainTextWrapper{
        width:100%!important;
    }

    #headerMainTextWrapper ul{
        padding: 0 10px!important;
    }

    .project-layout {
       padding: 0 15px;
    }

    .project-wrapper-cont {
        grid-template-rows: 1fr 1fr;
        width: 100%;
    }

    .project-card-container {
        grid-template-rows: 1fr 1fr;
    }

    .project-details-container {
        justify-content: unset!important;
        padding: 15px 26px;
    }

    .project-details-wrapper{
        grid-template-rows:4fr 1fr!important;
        width:100%;
    }

    .project-active-img {
        height: 500px;
    }

    .project-img-container {
        flex-direction: row;
    }

    .project-detail-img-wrapper{
        height:65px;
    }

    .project-details-span {
        width: 100%;
        bottom: 0 !important;
        background-color: unset !important;
        color:#000!important;
    }

    .contact-us-layout {
        width: 100%;
        grid-template-rows: 1fr 1fr;
    }

    .career-main-cont {
        width: 100%;
    }

    #selectWrapper {
        grid-template-rows: 50px 35px;
    }

    .available-position {
        justify-content: flex-start;
    }

    .table-wrapper {
        height: auto;
        border: none !important;
    }

    .table-header {
        display:none!important;
    }

    .table-tbody-wrapper {
        height: 100%;
        flex-direction: column;
        gap: 20px;
        background-color: #fff!important;
     
    }

    .table-tr {
        height: 100%;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        align-items: center;
        padding: 15px !important;
        padding-left: 25px !important;
        border: 1px solid #DCDCDC;
        box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
        border-radius: 5px;
    }

    .table-td {
        justify-content: flex-start!important;
    }

    .urgent-badge{
        left:unset!important;
        right: 35%;
        top: unset!important;
        bottom: 10%;
    }

    .available-position{
        margin-left: 5px;
    }

    .career-main-wrapper{
        padding:0 15px;
    }

}

/*ipdad view*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .desktop-main-header {
        display: none !important;
    }

    .mobile-main-header {
        display: grid !important;
        padding: 0 10px;
    }

    .home-carousel-content-layout-grid {
        grid-template-rows: auto 1fr !important;
        width: 100%;
    }

    .top-main-infos-header {
        justify-content: unset !important;
        padding: 0 15px !important;
    }

    .top-main-header {
        top: 1% !important;
    }

    .top-main-infos-header {
        height: 85px;
    }

    .contact-infos-header {
        height: 100px;
        width: 100%;
        grid-template-columns: 1fr 1fr;
    }

        .contact-infos-header .email-mobile-cont {
            height: 100%;
        }

    .home-carousel-content-layout {
        padding: 0 35px !important;
        top: 20%;
        height: auto !important;
    }

    .home-carousel-container {
        height: 1200px;
    }

    .social-media-section {
        justify-content: flex-end !important;
    }


    .featured-project-list {
        grid-template-rows: 1fr 1fr 1fr;
    }

    .home-carousel-text-cont .main-text {
        width: 100%;
    }

    .home-cards-infos {
        justify-content: start !important;
        align-items: center;
        margin-top: 10% !important;
    }

    .construction-card-infos {
        width: 500px !important;
        padding: 25px !important;
    }

    .home-featured-work-layout {
        grid-template-rows: 100px 1fr 100px !important;
        padding: 0 10px;
    }

    .home-featured-work-container {
        height: auto;
    }

    .home-featured-work-container {
    }

    .featured-project-card {
        width: 100% !important;
        height: 100% !important;
    }

    .view-more-project {
        display: inline-block !important;
        padding: 0 10px;
        text-align: center;
    }

    footer {
        margin-top: 25%;
    }

    .latest-news-layout {
        width: 100%;
        padding: 15px;
    }

    .latest-news-container {
        height: 800px !important;
        margin-top: 15%;
    }

    .latest-news-card-container {
        grid-template-rows: 1fr 1fr 1fr 1fr;
    }

    .about-us-layout {
    }

    .about-us-cont, .project-cont {
        width: 100%;
        margin-top: 85px !important;
        padding: 15px 25px;
    }

    .about-us-wrapper1-text, .project-wrapper1-text {
        width: 100% !important;
        left: 0 !important;
        padding: 10px;
        top: 15%!important;
    }

    .about-us-main-div, .project-main-div {
        padding: 0 !important;
    }

        .about-us-main-div:first-child, .project-main-div:first-child {
            border: none !important;
        }

    .about-us-main-container, .project-main-container {
        grid-template-rows: 1fr 1fr !important;
        gap: 40px;
    }

    .about-us-wrapper1, .project-wrapper1{
        top: 15% !important;
    }



    #headerMainTextWrapper {
        width: 100% !important;
    }

    .project-card-container {
        grid-template-columns: 1fr 1fr;
    }

    .project-layout {
        padding: 0 25px;
    }

    .project-wrapper-cont {
        grid-template-rows: 1fr 1fr;
        width: 100%;
    }

    .project-details-container {
        justify-content: unset !important;
        padding: 15px 26px;
    }

    .project-details-wrapper {
        grid-template-rows: 4fr 1fr !important;
        width: 100%;
    }

    .project-active-img {
        height: 500px;
    }

    .project-img-container {
        flex-direction: row;
    }

    .project-detail-img-wrapper {
        height: 100px;
    }

    .project-details-span {
        width: 100%;
        bottom: -35px !important;
        background-color: unset !important;
        color: #000 !important;
    }

    .contact-us-layout {
        width: 100%;
        grid-template-rows: 1fr 1fr;
       
    }

    .career-wrapper-text {
        width: 100% !important;
        left:  0 !important;
        padding: 10px;
        top: 45%!important;
    }

    .career-main-cont {
        width: 100%;
    }

    .career-main-wrapper{
        padding:10px 15px!important;
    }

    .career-wrapper {
        top: 15% !important;
    }


    #selectWrapper {
        height: 35px;
        grid-template-columns: 1fr 1fr;
    }

    .available-position {
        justify-content: flex-end;
    }

    .table-wrapper {
        height: auto;
        border: none !important;
    }

    .table-header {
        display: none !important;
    }

    .table-tbody-wrapper {
        height: auto;
        flex-direction: column;
        justify-content:center;
        align-items:center;
        gap: 20px;
        background-color: #fff !important;
        margin-top: 25px!important;
        overflow-y:visible!important;
    }

    .table-tr {
        height: 100%;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        align-items: center;
        padding: 15px !important;
        padding-left: 25px !important;
        border: 1px solid #DCDCDC;
        box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        width: 500px!important;
    }

    .table-td {
        justify-content: flex-start !important;
    }

    .urgent-badge {
        left: unset !important;
        right: 5%;
        top: unset !important;
        bottom: 10%;
    }

    .available-position {
        margin-left: 5px;
    }
}