@media only screen and (max-width: 912px) {
    
    .dropdown-content {
        right: -50%;
    }

    .item .info-item p {
        color: #000;
    }

    #contact {
        min-height: 100vh;
        justify-content: start;
    }

    #contact p, #contact h4 {
        text-wrap: wrap;
        word-wrap: break-word;
    }

    #contact_content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .img-box img, .img-box h2, .img-box h3 {
        display: none;
    }

    #full_service .service {
        grid-template-columns: 100%;
    }

    #full_service .full_service .text_container {
        justify-content: start;
    }

    .service img {
        /* filter: opacity(40%); */
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-end-start-radius: 0px;
        height: 100%;
        width: 100%;
    }

    #menu {
        display: flex;
    }

    #nav2_ul {
        display: none;
    }

    #nav_mobile ul {
        flex-direction: column;
    }

    #nav_mobile li,
    #nav_mobile .dropbtn {
        font-size: 26px;
    }

    #nav_mobile {
        height: calc(100vh + env(safe-area-inset-bottom));
        background-color: rgba(0, 0, 0, 0.90);
    }

    #logo {
        display: none;
    }

    #cta_btn {
        font-size: 30px;
        padding: 20px 40px;
        border-radius: 50px;
    }

    #project_logos {
        display: grid;
        grid-template-columns: 30% 30% 30%;
        grid-template-rows: 90px;
        row-gap: 40px;
        place-items: center;
        width: 100%;
    }

    .item16 {
        grid-column: 1 / 2;
    }

    .item17 {
        grid-column: 2 / 3;
    }

    .item18 {
        grid-column: 3 / 4;
    }

    #list_of_services {
        display: grid;
        grid-template-columns: auto;
        place-items: center;
        width: 90%;
        gap: 20px;
    }

    #list_of_services .service {
        font-size: 26px;
        width: 100%;
        text-align: center;
    }

    #full_service .special_light {
        text-align: center;
    }

    #full_service {
        width: 90%;

    }

    #full_service .service {
        width: 100%;
    }

    #full_service .text {
        font-size: 22px;
    }

    #full_service h3 {
        font-size: 32px;
    }

    #services {
        height: auto;
    }

    #cross {
        position: absolute;
        top: 40px;
        left: 40px;
        width: 20px;
        height: 20px;
        z-index: 1;
    }

    #work_done {
        height: auto;
    }

    #projects {
        height: 160vh;
    }

    #project_logos {
        display: grid;
        grid-template-columns: 30% 30% 30%;
        grid-template-rows: 90px;
        row-gap: 40px;
        place-items: center;
        width: 100%;
    }

    .item6 {
        grid-column: 1 / 4;
    }

    .item13 {
        grid-column: 1 / 4;
    }

    .item16 {
        grid-column: 1 / 2;
    }

    .item17 {
        grid-column: 2 / 3;
    }

    .item18 {
        grid-column: 3 / 4;
    }

    #who {
        grid-template-columns: 100%;
        overflow-y: scroll;
    }

    #who .img {
        z-index: -1;
    }

    #who img {}

    #who_text {
        align-items: center;
        margin-top: 20px;
        padding-bottom: 20px;
    }

    .who_text,
    #who_header {
        text-align: center;
        width: 90%;
    }

    .who_text {
        font-size: 1rem;
    }

    #team_body {
        height: calc(100vh + env(safe-area-inset-bottom));
        overflow: hidden;
    }

    #team {
        height: calc(100vh + env(safe-area-inset-bottom));
        overflow: hidden;
        padding: 0px;
        padding-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        background-size: cover;
    }

    #team .carousel {
        height: calc(100vh + env(safe-area-inset-bottom));
        overflow: hidden;
        overflow-x: scroll;
        /* background: linear-gradient(to top, #000, transparent); */
    }

    .thumb {
        display: grid;
        place-items: center;
        grid-template-columns: auto auto auto auto;
        transform: translateY(0%);
        overflow: hidden;
        width: fit-content;
        position: inherit;
        height: 150px;
        margin: 0px;
        width: 100%;
        overflow-x: scroll;
    }

    #team .item .img-box img {
        transform: translate(0%, -190%);
        height: 30%;
    }

    /* #team .item .info-box {
        overflow: visible;
    } */

    .img-box img {
        transform: translate(0%, -190%);
        height: 30%;
    }

    .info-slider .info-item {
        height: 100%;
        transform: translateY(0%);
    }

    .info-slider .info-item {
        height: 25rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff;
        /* transform: translateY(calc(var(--i) * 50%)); */
        transform: translateY(0%);
        transition: 0.2s;
    }

    .info-slider {
        width: 90%;
        height: 100%;
    }

    .item .info-box {
        position: absolute;
        /* transform: translateY(-80%); */
        width: 50vw;
        height: 25rem;
        z-index: 1;
        overflow: hidden;
        display: flex;
        justify-content: start;
        align-items: center;
        padding-left: 2.5rem;
        height: 100%;
        width: 100%;
    }

    .item {
        display: flex;
        justify-content: center;
        align-items: center;

    }

    #back i {
        font-size: 36px;
    }

    .info-item {
        padding: 0px 20px;
        transform: translateY(-12vh);
    }

    .info-slider .info-item {
        width: 100%;
        /* transform: translateY(calc(var(--i)* 100%)); */
        height: 100%;
        transform: translateY(0%);
    }

    #projects {
        height: 110vh;
    }

    /* 
    .info-item {
        width: 70vw;
    }
    .info-item p {
        font-size: 26px;
    } */

    /* .item {
        width: 100%;
    }

    .info-box {
        width: 100%;
    }
    .info-item {
        width: 100%;
    } */

    .active {
        transform: translateY(0%);
    }

    .hideDivs {
        display: none;
        transform: translateY(calc(var(--i) * -100%));
    }

    #placeholder_div {
        padding: 10px;
        padding-bottom: 2rem;
        justify-content: start;
        align-items: start;
    }

    #placeholder_div .contact_details {
        /* min-width: 419px; */
        width: 95%;
        justify-content: space-around;
    }

    #placeholder_div .side2 {
        flex-direction: column;
        gap: 20px;

    }
    #placeholder_div h4 {
        text-wrap: wrap;
        width: 70%;
    }

    #contact_content {
        padding: 0px 0rem;
    }

    /* #contact_content div {
        width: 100%;
    } */

    #contact_content p {
        width: 100%;
        font-size: 10px;
    }

    #contact_content .black_text {
        width: 100%;
        font-size: 14px;
    }

}

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

    #partners {
        bottom: -230px;
    }

    .special {
        font-size: 32px;
    }

    #team .carousel {
        height: calc(100vh - env(safe-area-inset-bottom));
    }

    #hero,
    #team .carousel {
        height: calc((100vh - 86px) - env(safe-area-inset-bottom));
    }

    #work_done {
        height: auto;
    }

    #partners {
        width: 95%;
    }

    #nav_mobile li,
    #nav_mobile .dropbtn {
        font-size: 26px;
        text-wrap: nowrap;
    }

    #cta_btn {
        font-size: 20px;
    }

    #project_logos {
        display: grid;
        grid-template-columns: 30% 30% 30%;
        grid-template-rows: 90px;
        row-gap: 40px;
        place-items: center;
        width: 100%;
    }

    .item6 {
        grid-column: 1 / 4;
    }

    .item13 {
        grid-column: 1 / 4;
    }

    .item16 {
        grid-column: 1 / 2;
    }

    .item17 {
        grid-column: 2 / 3;
    }

    .item18 {
        grid-column: 3 / 4;
    }

    #list_of_services {
        display: grid;
        grid-template-columns: auto;
        place-items: center;
        width: 90%;
        gap: 20px;
    }

    #list_of_services .service {
        font-size: 20px;
    }

    #full_service {
        width: 90%;
    }

    #full_service .text {
        font-size: 22px;
    }

    #full_service h3 {
        font-size: 32px;
    }

    #team .special {
        font-size: 46px;
    }

    #partners .special,
    #work_done .special,
    #services .special {
        font-size: 66px;
        text-align: center;
    }

    #team h2 {
        font-size: 26px;
    }
    #team .sub_header {
        font-size: 26px;
        text-align: center;
    }

    #hero_content {
        width: 100%;
        padding-left: 20px;
    }

    #CTA {
        font-size: 16px;
    }

    #CTA .important {
        font-size: 46px;
    }

    #projects {
        height: 200vh;
    }

    .bg-custom-green {
        background-color: #1c4d38;
    }

    .full_service {
        /* background-color: transparent;
        box-shadow: none;
        padding: 20px 0px; */
        position: fixed;
        top: 100px;
        left: 1rem;
        max-height: 70vh;
        overflow-y: scroll;
        display: flex;
        justify-content: start;
        align-items: center;
    }

    #full_service .full_service {
        width: 92%;
    }

    .item .info-box {
        /* transform: translateY(10vh); */
        width: 100%;
        transform: translateY(0%);
    }

    .item .info-slider {
        height: 100%;
        width: 100%;
    }

    .item .info-item {
        /* height: auto; */
        height: 100%;
        justify-content: flex-start;
        padding-left: 1rem;
        padding-top: 2rem;
        overflow-y: scroll;
        /* transform: translateY(8rem); */
    }

    .item .info-item p {
        padding-bottom: 8rem;
    }

    .item .info-box {
        padding-left: 1rem;
        /* padding-top: 2rem; */
    }

    .thumb {

        /* display: flex;
        justify-content: center;
        align-items: center;
        height: 9.37rem; 
        margin-bottom: 20px;*/
    }

    .thumb img {
        width: 80px;
        height: 80px;
    }

    .hideDivs {
        display: none;
    }

    .hideDiv {
        visibility: hidden;
    }

}