#home {
    background: url(/static/images/noise.svg), linear-gradient(to bottom, rgba(60, 136, 168, 1), rgb(38, 109, 140));
    background-blend-mode: color-burn;
    height: 100vh;
    width: 100%;
}

.home-page { display: flex; height: 100vh; }
.home-container {
    display: grid; align-items: center; justify-content: center;
    grid-template-rows: 80px 1fr auto; width: 100%; height: 100%; gap: 10px;
    position: relative;
}

.arrow-down-home { 
    position: absolute; 
    bottom: 2rem; 
    right: 4rem; 
    text-align: right; 
}
.arrow-down-home img { width: 2rem; height: auto; transition: transform 0.3s; }
.arrow-down-home img:hover { transform: translateY(5px); }
.top-row { background-color: #f0f0f0; }
.content-row {
    display: flex; justify-content: center; align-items: center; gap: 4rem;
    padding-top: auto; max-width: 1200px; margin: 0 auto; width: 100%;
}

.photo { text-align: right; display: flex; align-items: center; justify-content: flex-end; }
.photo img { width: auto; height: auto; max-height: 18rem; object-fit: contain; }

.intro-text { max-width: 600px; padding-right: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.intro-text h1 { line-height: 0; font-size: 1.5rem !important; }
.name-highlight { line-height: 0.5; color: rgba(38, 30, 48, 0.9); }
.degree-highlight { color: rgb(230, 119, 72); }
.intro-text p { line-height: 1.5; font-size: 1rem !important; color: white; }

.intro-text button {
    border: none; border-radius: 0; background-color: rgb(230, 119, 72);
    color: white; padding: 0.5rem 1rem; font-size: 1.5rem !important;
    cursor: pointer; outline: none; display: inline-flex;
    align-items: center; text-align: center; line-height: normal; letter-spacing: 2px;
}
.button-icon {
    height: 1em; margin-right: 0.5rem; filter: invert(100%); transform: translateY(0.1em);
}
.intro-text button:focus { outline: none; }
.intro-text button:active { transform: scale(0.98); }

/* Responsive Styles */
@media (max-width: 1400px) {
    .photo img {
        max-height: 14rem;
    }
}

@media (max-width: 1200px) {
    .intro-text h1 { font-size: 2vw; }
    .intro-text p { font-size: 1.5vw; }
    .intro-text button { font-size: 2vw; }
    .photo img { max-width: 60%; }
    .info-box { padding-left: 8%; padding-left: 8%; }
}

@media (max-width: 1024px) {
    #home, .home-page {
        min-height: calc(100vh - 80px);
        height: auto;
        padding-bottom: 2rem;
        box-sizing: border-box;
    }
    
    .home-container {
        height: auto;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 100px;
    }

    .content-row {
        display: flex;
        flex-direction: column;
        padding: 0 2rem;
        box-sizing: border-box;
        text-align: left;
        gap: 2rem;
        width: 100%;
    }

    .photo {
        justify-content: center;
        width: 100%;
    }

    .intro-text {
        width: 100%;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .photo img {
        max-height: 24rem; 
        max-width: 100%;
    }
    
    .arrow-down-home {
        right: 2rem;
        bottom: 2rem;
    }
}

@media (max-width: 800px) {
    #home { height: auto; }
    .home-content { margin: 8%; height: auto; }
     
    .intro-text h1 { font-size: 1.2rem !important; line-height: 1; }
    .intro-text p { font-size: 1.5vw; }
    .intro-text button { font-size: 1.2rem !important; }  
    .photo { text-align: center; }
    .photo img { max-width: 40%; }
    
    .arrow-down { text-align: right; padding-right: 4%; padding-bottom: 4%; }
    .arrow-down img { width: 1.5rem; height: auto; }
}

@media (max-width: 600px) {
    .photo img {
        max-height: 14rem;
    }
    
    .arrow-down-home {
        right: 1rem;
        bottom: 0.5rem;
    }
}