/*mobile*/
p{
    font-size: large;
}
.project-hero-section{
    margin-top: 4%;
    
}
@media screen and (max-width: 480px ){

     .project-details-top{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 2rem;
    }
    .project-info-desc{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2rem;
    }
    /*
    .project-info-desc div::before{
        content: " | ";
        padding: 1rem;
        display: block;
        float: left;
    }*/
    .project-info-desc div{
        padding-left: 1rem;
        border-left: 3px solid var(--darkpurple);
    }
     .project-info-desc h4{
        font-weight: 500;
        font-size: medium;
     }
     .project-info-desc h2{
        font-weight: 800;
        letter-spacing: 1px;
     }
     .project-details-top img{
        height: 100%;
        width: 100%;
        border-radius: 5px;
     }
     .project-details-top a{
        font-weight: 600;
        letter-spacing: 1px;
     }
     .details-right{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2rem;
     }
     .details-right .details-badge{
        width: 45%;
        text-align: center;
        box-shadow: 4px 4px 8px grey;
     }


    .about-project-container{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1%;
    }
    .about-project-container img{
    width: 100%;
    height: 50vh;
    object-fit: cover;
    object-position: center;
    border-radius: 5px;
    }


    .project-goal-details div{
        background-color: var(--secondary);
        border-radius: 5px;
        padding: 4%;
        box-shadow: 8px 8px 12px grey;
    }

    .process-goal-details ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0.8rem;
    }
     .process-goal-details ul li{
        padding: 0.8rem;
        border-radius: 3px;
        background-color: var(--secondary);
     }
    .process-goal-details ul::before{
        width: 20px;
        height: 20px;
        float: left;
        margin: 0 6px 0 0;
        padding-left: 0.5rem;
    }

    .project-results-metrics-card{
        background-color: var(--secondary);
        border-radius: 5px;
        padding: 4%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2rem !important;
    }
    .project-images-more div{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }
    .project-images-more div img{
        height: 80vw;
        width: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 8px;
        box-shadow: 8px 8px 12px gray;
    }




}






/*Extra Small Devices*/
@media screen and (min-width: 481px) and (max-width: 767px) {
    .project-details-top{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }
    .project-info-desc{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2rem;
    }
    /*
    .project-info-desc div::before{
        content: " | ";
        padding: 1rem;
        display: block;
        float: left;
    }*/
    .project-info-desc div{
        padding-left: 1rem;
        border-left: 3px solid var(--darkpurple);
    }
     .project-info-desc h4{
        font-weight: 500;
        font-size: medium;
     }
     .project-info-desc h2{
        font-weight: 800;
        letter-spacing: 1px;
     }
     .project-details-top img{
        height: 100%;
        width: 100%;
        border-radius: 5px;
     }
     .project-details-top a{
        font-weight: 600;
        letter-spacing: 1px;
     }
     .details-right{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2rem;
     }
     .details-right .details-badge{
        width: 45%;
        text-align: center;
        box-shadow: 4px 4px 8px grey;
     }


    .about-project-container{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1%;
    }
    .about-project-container img{
    width: 100%;
    height: 50vh;
    object-fit: cover;
    object-position: center;
    border-radius: 5px;
    }


    .project-goal-details div{
        background-color: var(--secondary);
        border-radius: 5px;
        padding: 4%;
        box-shadow: 8px 8px 12px grey;
    }

    .process-goal-details ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0.8rem;
    }
     .process-goal-details ul li{
        padding: 0.8rem;
        border-radius: 3px;
        background-color: var(--secondary);
     }
    .process-goal-details ul::before{
        content: " ";
        display: block;

        width: 20px;
        height: 20px;
        float: left;
        margin: 0 6px 0 0;
        padding-left: 0.5rem;
    }

    .project-results-metrics-card{
        background-color: var(--secondary);
        border-radius: 5px;
        padding: 4%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2rem !important;
    }
    .project-images-more div{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }
    .project-images-more div img{
        height: 80vw;
        width: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 8px;
        box-shadow: 8px 8px 12px gray;
    }



}













/*small tablets*/
@media screen and (min-width: 768px) and (max-width: 991px) { 
   .project-details-top{
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        gap: 2rem;
    }
    .project-info-desc{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2rem;
    }
    
    /*
    .project-info-desc div::before{
        content: " | ";
        padding: 1rem;
        display: block;
        float: left;
    }*/
    .project-info-desc div{
        padding-left: 1rem;
        border-left: 3px solid var(--darkpurple);
    }
     .project-info-desc h4{
        font-weight: 500;
        font-size: medium;
     }
     .project-info-desc h2{
        font-weight: 700;
        letter-spacing: 1px;
     }
     .project-details-top img{
        height: 50vh;
        width: 100%;
        border-radius: 5px;
        object-fit: cover;
        object-position: center;
     }
     .project-details-top a{
        font-weight: 600;
        letter-spacing: 1px;
     }
     .details-right{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2rem;
     }
     .details-right .details-badge{
        width: 25%;
        text-align: center;
        box-shadow: 4px 4px 8px grey;
     }


    .about-project-container{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1%;
    }
    .about-project-container img{
    width: 100%;
    height: 50vh;
    object-fit: cover;
    object-position: center;
    border-radius: 5px;
    }


    .project-goal-details div{
        background-color: var(--secondary);
        border-radius: 5px;
        padding: 4%;
        box-shadow: 8px 8px 12px grey;
    }

    .process-goal-details ul {
        list-style:decimal;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.8rem;
    }
     .process-goal-details ul li{
        padding: 0.8rem;
        border-radius: 3px;
        background-color: var(--secondary);
     }
   

    .project-results-metrics-card{
        background-color: var(--secondary);
        border-radius: 5px;
        padding: 4%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2rem !important;
    }
    .project-images-more div{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .project-images-more div img{
        height: 30vw;
        width: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 8px;
        box-shadow: 8px 8px 12px gray;
    }


}















/* Large Tablets Laptops*/
@media screen and (min-width: 992px) and (max-width: 1199px) {
     .project-details-top{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        margin-top: 5rem;
    }
    .project-info-desc{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 1.5rem;
    }
    
    /*
    .project-info-desc div::before{
        content: " | ";
        padding: 1rem;
        display: block;
        float: left;
    }*/
    .project-info-desc div{
        padding-left: 1rem;
        border-left: 3px solid var(--darkpurple);
    }
     .project-info-desc h4{
        font-weight: 500;
        font-size: medium;
     }
     .project-info-desc h2{
        font-weight: 700;
        letter-spacing: 0px;
     }
     .project-details-top img{
        height: 40vh;
        width: 50vw;
        border-radius: 5px;
        object-fit: cover;
        object-position: center;
     }
     .project-details-top a{
        font-weight: 600;
        letter-spacing: 1px;
     }
     .details-right{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 2rem;
     }
     .details-right .details-badge{
        width: 65%;
        text-align: center;
        box-shadow: 4px 4px 8px grey;
        margin-bottom: 0.22rem;
        margin-top: 0.5rem;
     }



    .about-project-container{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 1%;
    }
    .about-project-container img{
        width: 45vw;
        height: 50vh;
        object-fit: cover;
        object-position: center;
        border-radius: 5px;
        box-shadow: 8px 8px 12px gainsboro;
    }


    .project-goal-details div{
        background-color: var(--secondary);
        border-radius: 5px;
        padding: 4%;
        box-shadow: 8px 8px 12px grey;
    }

    .process-goal-details ul {
        list-style:decimal;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.8rem;
    }
     .process-goal-details ul li{
        padding: 0.8rem;
        border-radius: 3px;
        background-color: var(--secondary);
     }
   

    .project-results-metrics-card{
        background-color: var(--secondary);
        border-radius: 5px;
        padding: 4%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2rem !important;
    }
    .project-images-more div{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .project-images-more div img{
        height: 30vw;
        width: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 8px;
        box-shadow: 8px 8px 12px gray;
    }
}








/*Desktops*/
@media (min-width:1200px) and (max-width: 1919px) {
    .project-details-top{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        margin-top: 0rem;
    }
    .project-info-desc{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 2rem;
    }
    
    /*
    .project-info-desc div::before{
        content: " | ";
        padding: 1rem;
        display: block;
        float: left;
    }*/
    .project-info-desc div{
        padding-left: 1rem;
        border-left: 3px solid var(--darkpurple);
    }
     .project-info-desc h4{
        font-weight: 500;
        font-size: medium;
     }
     .project-info-desc h2{
        font-weight: 700;
        letter-spacing: 0px;
     }
     .project-details-top img{
        height: 65vh;
        width: 40vw;
        border-radius: 5px;
        object-fit: cover;
        object-position: center;
     }
     .project-details-top a{
        font-weight: 600;
        letter-spacing: 1px;
     }
     .details-right{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 2rem;
     }
     .details-right .details-badge{
        width: 65%;
        text-align: center;
        box-shadow: 4px 4px 8px grey;
        margin-bottom: 0.22rem;
        margin-top: 0.5rem;
     }


    .about-project-container{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 1%;
    }
    .about-project-container img{
        width: 45vw;
        height: 50vh;
        object-fit: cover;
        object-position: center;
        border-radius: 5px;
        box-shadow: 8px 8px 12px gainsboro;
    }


    .project-goal-details div{
        background-color: var(--secondary);
        border-radius: 5px;
        padding: 4%;
        box-shadow: 8px 8px 12px grey;
    }

    .process-goal-details ul {
        list-style:decimal;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.8rem;
    }
     .process-goal-details ul li{
        padding: 0.8rem;
        border-radius: 3px;
        background-color: var(--secondary);
     }
   

    .project-results-metrics-card{
        background-color: var(--secondary);
        border-radius: 5px;
        padding: 4%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2rem !important;
    }
    .project-images-more div{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .project-images-more div img{
        height: 30vw;
        width: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 8px;
        box-shadow: 8px 8px 12px gray;
    }


}








/*Extra Large Screens.*/
@media (min-width: 1920px) {
     .project-details-top{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        margin-top: 0rem;
    }
    .project-info-desc{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 2rem;
    }
    
    /*
    .project-info-desc div::before{
        content: " | ";
        padding: 1rem;
        display: block;
        float: left;
    }*/
    .project-info-desc div{
        padding-left: 1rem;
        border-left: 3px solid var(--darkpurple);
    }
     .project-info-desc h4{
        font-weight: 500;
        font-size: medium;
     }
     .project-info-desc h2{
        font-weight: 700;
        letter-spacing: 0px;
     }
     .project-details-top img{
        height: 45vh;
        width: 30vw;
        border-radius: 5px;
        object-fit: cover;
        object-position: center;
     }
     .project-details-top a{
        font-weight: 600;
        letter-spacing: 1px;
     }
     .details-right{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 2rem;
     }
     .details-right .details-badge{
        width: 65%;
        text-align: center;
        box-shadow: 4px 4px 8px grey;
        margin-bottom: 0.22rem;
     }


    .about-project-container{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 3%;
    }
    .about-project-container img{
        width: 45vw;
        height: 50vh;
        object-fit: cover;
        object-position: center;
        border-radius: 5px;
        box-shadow: 8px 8px 12px gainsboro;
    }


    .project-goal-details div{
        background-color: var(--secondary);
        border-radius: 5px;
        padding: 4%;
        box-shadow: 8px 8px 12px grey;
    }

    .process-goal-details ul {
        list-style:decimal;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.8rem;
    }
     .process-goal-details ul li{
        padding: 0.8rem;
        border-radius: 3px;
        background-color: var(--secondary);
     }
   

    .project-results-metrics-card{
        background-color: var(--secondary);
        border-radius: 5px;
        padding: 4%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2rem !important;
    }
    .project-images-more div{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .project-images-more div img{
        height: 30vw;
        width: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 8px;
        box-shadow: 8px 8px 12px gray;
    }

}