.modalOverlay {
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 999999;
    position: fixed;
    padding-top: 20px;
    align-items: center;
    justify-content: center !important;
    background-color: rgba(0, 0, 0, 0.9);
}

.SlideModalBottom{
    gap:10px;
    height: 100%;
    display: flex;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 20px;
    flex-direction: column;
}

.modalHeader{
    width:1200px;
    display: flex;
    padding:20px 20px;
    align-items: start;
    border-radius: 10px;
    background-color: #f1f6ff;
    justify-content: space-between;
}

.modalContent{
    gap:10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}

.sectionOneContentContainer,
.sectionTwoContentContainer{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
}

.sectionTwoContentContainer{
    gap:10px;
    justify-content: start;
}

.sectionOneLeftContentContainer{
    gap:15px;
    width:595px;
    display:flex;
    min-height:182px;
    padding:20px 20px;
    align-items: start;
    border-radius: 10px;
    flex-direction: column;
    justify-content: start;
    background-color: #ffffff;
}

.sectionOneRightContentContainer{
    gap:10px;
    width:595px;
    display:flex;
    flex-wrap: wrap;
    min-height: 130px;
    align-items: start;
    justify-content: center;
}

.innerSectionOneRightContentContainer{
    gap:5px;
    width:250px;
    display: flex;
    min-height: 65px;
    padding:20px 20px;
    align-items: start;
    border-radius: 10px;
    flex-direction: column;
    justify-content: start;
    background-color: #ffffff;
}

.innerSectionTwoContentContainer{
    width:262px;
    display:flex;
    height:200px;
    padding:20px 20px;
    align-items: start;
    border-radius: 10px;
    flex-direction: column;
    justify-content: start;
    background-color: #ffffff;
}

.headerLeft{
    gap:10px;
    display: flex;
    align-items: center;
    justify-content: start;
}

.headerImageContainer{
    width:130px;
    height:130px;
    display: flex;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 8px #000000;
}

.headerImageContainer img{
    width: 100%;
    height: 100%;
    display: flex;
    border-radius: 10px;
}

.headerLeftContentContainer{
    gap:10px;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
}

.projectName{
    font-size: 25px;
    color: #345090;
    font-weight: 600;
}

.projectLocation{
    gap:5px;
    display: flex;
    color:#000000;
    font-size: 16px;
    font-weight: 500;
    align-items: center;
    justify-content: start;
}

.modalBadges{
    gap:5px;
    display: flex;
    align-items: center;
    justify-content: start;
}

.headerRight{
    display: flex;
    align-items: end;
    flex-direction: column;
    justify-content: start;
}

.modalClose{
    width: 40px;
    height: 40px;
    display: flex;
    color:#ffffff;
    cursor: pointer;
    border-radius: 50px;
    align-items: center;
    justify-content: center;
    background-color: #000000;
}

.modalClose:hover{
    transition: 0.5s all;
    transform: rotate(45deg);
    background-color:#345090;
}

#scheduleTime{
    gap:5px;
    color:#000000;
}

.sectionTitle{
    gap: 10px;
    font-size: 20px;
    color:#000000;
    font-weight: 600;
    position: relative;
}

.sectionDescription,
.innerSectionTwoContentContainer p{
    font-size: 15px;
    margin-top: 5px;
    color:#515151;
    font-weight: 500;
}

.innerSectionTwoContentContainer p{
    height:150px;
    margin-top: 10px;
    overflow-y: auto;
}

.phasesContainer{
    gap:10px;
    width:100%;
    display: flex;
    margin-top: 10px;
    align-items: center;
    justify-content: space-evenly;
}

.phasesContentContainer{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: start;
}

.phasesContentContainer .sectionDescription{
    width:400px;
    height:110px;
    text-align: center;
}

@media screen and (max-width: 1025px) {
    .modalOverlay {
        align-items: start;
        justify-content: start;
    }
    .SlideModalBottom{
        height: 100vh;
        padding:0px 30px;
        justify-content: start;
    }
    .modalHeader{
        width:920px;
    }
    .sectionOneLeftContentContainer{
        width:400px;
    }
    .sectionOneRightContentContainer{
        width:510px;
    }
    .innerSectionOneRightContentContainer{
        width:210px;
        min-height: 66px;
    }
    .innerSectionTwoContentContainer{
        width:193px;
    }
    .sectionTitle{
        font-size: 17px;
    }   
    .sectionDescription,
    .innerSectionTwoContentContainer p{
        font-size: 14px;
    }
    .separator{
        display: none !important;
    }
}

@media screen and (max-width: 915px) {
    .modalOverlay{
        width:100% !important;
    }
    .SlideModalBottom{
        height: 95%;
        padding:0px 10px;
    }
    .modalHeader{
        gap:10px;
        width:820px;
    }
    .sectionOneLeftContentContainer{
        width:300px;
    }
}

@media screen and (max-width: 854px) {
    .modalHeader{
        width:672px;
    }
    .SlideModalBottom{
        height: 95%;
    }
    .sectionOneContentContainer{
        gap:10px;
        align-items: center;
        flex-direction: column;
    }
    .sectionOneLeftContentContainer{
        width:672px;
        min-height:fit-content;
    }
    .sectionOneRightContentContainer{
        width:710px;
    }
    .sectionTwoContentContainer{
        gap:10px;
        width:710px;
        align-items: start;
        justify-content: center;
    }
    .innerSectionOneRightContentContainer{
        width:310px;
        min-height: 50px;
    }
    .innerSectionTwoContentContainer{
        width:43.5%;
    }
    .sectionPhase{
        width:668px !important;
    }
    .innerSectionTwoContentContainer p{
        width:300px !important;
        height: 120px !important;
    }
}

@media screen and (max-width: 541px) {
    .projectName{
        width: 100%;
        font-size: 20px;
    }
    .SlideModalBottom{
        height: 100vh;
        padding:0px 10px;
    }
    .modalHeader{
        gap:10px;
        width:480px;
        align-items: center;
        flex-direction: column-reverse;
    }
    .headerLeft{
        gap:10px;
        align-items: center;
        flex-direction: column;
    }
    .sectionOneContentContainer{
        gap:10px;
        align-items: start;
    }
    .headerLeftContentContainer{
        gap:10px;
        text-align: center;
        align-items: center;
        justify-content: center;
    }
    .headerImageContainer{
        width:300px;
        height:180px;
    }
    .headerRight{
        gap: 10px;
        align-items: center;
    }
    .sectionOneLeftContentContainer{
        width:480px;
        text-align: center;
        align-items: center;
    }
    .sectionOneRightContentContainer{
        flex-direction: column;
    }
    .innerSectionOneRightContentContainer{
        width:480px;
        align-items: center;
    }
    .sectionTwoContentContainer{
        gap:10px;
        width:100%;
        flex-direction: column;
    }
    .innerSectionTwoContentContainer{
        width:480px;
        height: fit-content;
        align-items: center;
        justify-content: center;
    }
    .innerSectionTwoContentContainer p{
        text-align: center;
        height: auto !important;
    }
    .sectionPhase{
        width:480px !important;
    }
    .phasesContainer{
        flex-direction: column;
    }
    .hSeparator{
        display: none;
    }
    .separator{
        display: flex;
    }
    .phaseTitle{
        font-size: 18px;
    }
}

@media screen and (max-width: 431px) {
    .projectName{
        width: 100%;
        font-size: 20px;
    }
    .SlideModalBottom{
        height: 95%;
        padding:0px 10px;
    }
    .modalHeader{
        gap:10px;
        width:365px;
        align-items: center;
        flex-direction: column-reverse;
    }
    .headerLeft{
        gap:10px;
        align-items: center;
        flex-direction: column;
    }
    .sectionOneContentContainer{
        gap:10px;
        align-items: start;
    }
    .headerLeftContentContainer{
        gap:10px;
        text-align: center;
        align-items: center;
        justify-content: center;
    }
    .headerImageContainer{
        width:300px;
        height:180px;
    }
    .headerRight{
        gap: 10px;
        align-items: center;
    }
    .sectionOneLeftContentContainer{
        width:365px;
        text-align: center;
        align-items: center;
    }
    .sectionOneRightContentContainer{
        flex-direction: column;
    }
    .innerSectionOneRightContentContainer{
        width:365px;
        align-items: center;
    }
    .sectionTwoContentContainer{
        gap:10px;
        width:100%;
        flex-direction: column;
    }
    .innerSectionTwoContentContainer{
        width:365px;
        height: fit-content;
        align-items: center;
        justify-content: center;
    }
    .innerSectionTwoContentContainer p{
        text-align: center;
        height: auto !important;
    }
    .sectionPhase{
        width:365px !important;
    }
    .phasesContainer{
        flex-direction: column;
    }
    .hSeparator{
        display: none;
    }
    .separator{
        display: flex;
    }
    .phaseTitle{
        font-size: 18px;
    }
}

@media screen and (max-width: 426px) {
    .modalHeader,
    .sectionOneLeftContentContainer,
    .innerSectionOneRightContentContainer,
    .innerSectionTwoContentContainer,
    .sectionPhase{    
        width:355px !important;
    }
}

@media screen and (max-width: 415px) {
    .SlideModalBottom{
        height: 100vh;
    }
}

@media screen and (max-width: 391px){
    .modalHeader,
    .sectionOneLeftContentContainer,
    .innerSectionOneRightContentContainer,
    .innerSectionTwoContentContainer,
    .sectionPhase{    
        width:316px !important;
    }
}

@media screen and (max-width: 376px) {
    .modalHeader,
    .sectionOneLeftContentContainer,
    .innerSectionOneRightContentContainer,
    .innerSectionTwoContentContainer,
    .sectionPhase{    
        width:314px !important;
    }
}

@media screen and (max-width: 361px){
    .SlideModalBottom{
        height: 100vh !important;
    }
    .modalHeader,
    .sectionOneLeftContentContainer,
    .innerSectionOneRightContentContainer,
    .innerSectionTwoContentContainer,
    .sectionPhase{    
        width:300px !important;
    }
}

@media screen and (max-width: 345px) {
    .headerImageContainer{
        width:220px;
        height:150px;
    }
    .phasesContentContainer .sectionDescription{
        width:250px !important;
        font-size:13px;
    }
    .modalHeader,
    .sectionOneLeftContentContainer,
    .innerSectionOneRightContentContainer,
    .innerSectionTwoContentContainer,
    .sectionPhase{    
        width:255px !important;
    }
}