/* Hero section */
@media (min-width: 960px)  {
    .hero-content-container {
        min-height: 50vh;
    }
}

@media (min-width: 600px) and (max-width: 959px) {
    .hero-content-container {
        min-height: 60vh;
    }
}

@media (min-width: 361px) and (max-width: 599px) {
    .hero-content-container {
        min-height: 47vh;
    }
}

@media (max-width: 361px) {
    .hero-content-container {
        min-height: 60vh;
    }
}

.hero-pile-container {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--spacing-4) var(--spacing-4);
    align-self: stretch;
    flex-wrap: wrap;
}

.hero-sub-title {
    color: var(--dev-blue-50);
    font-family: var(--font-family-main-1);
    font-size: var(--font-size-6);
    line-height: var(--line-height-6); 
}

@media (max-width: 599px) {
    .hero-sub-title {
        font-size: var(--font-size-3);
        line-height: var(--line-height-3); 
    }

    .hero-image-container img {
        width: 315px;
    }

    .hero-pile-container {
        gap: var(--spacing-2) var(--spacing-2);
    }
}

/* Case study content */
.case-study-content-container {
    width: 75vw;
    margin: auto;
}

.case-study-title {
    color: white;
    font-family: var(--font-family-main-2);
    font-size: 26px;
    font-weight: bold;
    line-height: 34px;
    margin-bottom: var(--spacing-5);
}

.case-study-description {
    color: var(--dev-blue-200);
    font-family: var(--font-family-main-1);
    font-size: var(--font-size-4);
    line-height: var(--line-height-4);
    margin-bottom: var(--spacing-10);
}

.case-study-highlighted-box {
    display: flex;
    padding: var(--spacing-7);
    align-items: flex-start;
    flex-direction: column;
    gap: var(--spacing-7);
    align-self: stretch;
    border-radius: 20px;
    border: 1px solid #494A7F;
    background: #242446;
    backdrop-filter: blur(25px);
    margin-bottom: var(--spacing-8);
}

.case-study-highlighted-box .title {
    color: var(--dev-blue-200);
    font-family: var(--font-family-main-1);
    font-size: var(--font-size-4);
    font-weight: bold;;
}

.case-study-highlighted-box ul li {
    color: var(--dev-blue-200);
    font-family: var(--font-family-main-1);
    font-size: var(--font-size-3);
    line-height: var(--line-height-4);
}

.case-study-highlighted-box ul li:not(:last-child) {
    margin-bottom: var(--spacing-8);
}