.homeIllu {
    width: 100%;
    height: 100%;
    display: block;
}

.titleContainer {
    padding-top: 150px;
    padding-bottom: 80px;
}

.title {
    font-family: 'Satoshi-Black';
    color: #023047;
}

.titleDetailsLink {
    color: #023047;
    font-family: 'Satoshi-Bold';
    text-decoration: none;
}

.titleDetails {
    font-family: 'Satoshi-Medium';
    color: #4E6E7E;
}

.projectsContainer {
    display: flex;
    gap: 40px;
}

.projects {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 150px;
    flex: 1 0 0;
    align-self: stretch;
}

.projectBlue {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.projectBlue:hover img {
    box-shadow: 3px 3px 3px 1px rgba(33, 158, 188, 0.60);
    border-radius: 5px; 
}

.projectBlue:hover .img__description{
    visibility: visible;
    opacity: 1;
}

.projectBlue:hover .projectTitle {
    text-decoration: underline;
}

.projectBlueTemp {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.projectBlueTemp:hover .img__description{
    visibility: visible;
    opacity: 1;
}

.projectBlueTemp:hover .projectTitle {
    text-decoration: underline;
}

.img__description{
    position: absolute;
    color: red;
    transition: opacity .2s, visibility .2s;
}



.projectYellow {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.projectYellow:hover img {
    box-shadow: 3px 3px 3px 1px rgba(255, 183, 3, 0.60);
    border-radius: 5px;
}

.projectYellow:hover .projectTitle {
    text-decoration: underline;
}

.projectYellowTemp {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.projectYellowTemp:hover .img__description{
    visibility: visible;
    opacity: 1;
}

.projectYellowTemp:hover .projectTitle {
    text-decoration: underline;
}

.projectPurple {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.projectPurple:hover img {
    /* box-shadow: 3px 3px 3px 1px rgba(179, 140, 180, 0.60); */
    border-radius: 5px;
}

.projectPurple:hover .projectTitle {
    text-decoration: underline;
}


.projectImage {
    margin-bottom: 20px;
    transition: all 0.2s ease;
}

.projectDetails {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
}

.projectTitle {
    color: #023047;
    font-family: 'Satoshi-Bold';
    line-height: 140%;
    transition: all 0.3s ease;
}

.projectDescription {
    color: #023047;
    font-family: 'Satoshi-Regular';
    line-height: 140%;
}

.textItalic{
    font-family: Satoshi-Italic;
    font-style: italic;
}


.tag {
    width: fit-content;
    border-radius: 6px;
    padding: 6px 10px;
    background-color: #E6EAED;
    color: #023047;
    font-family: 'Satoshi-Medium';
}