@charset "utf-8";
        .hero {
            height: 600px;
            display: flex;
            align-items: center;      
            justify-content: center;   
            color: black;
            position: relative;
            overflow: hidden;
            background-color: #000; 
            opacity: 0.85;
        }

        .hero-slider {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .slide.active { opacity: 1; }

        .slide::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .hero-wave {
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 100%;
            line-height: 0;
            z-index: 5;
        }

        .hero-wave svg {
            display: block;
            width: 100%;
            height: 270px; 
            fill: #e3e3db;
        }

        .hero-content {
            position: relative;
            z-index: 10;
            max-width: 800px;
            text-align: center;
            width: 100%;
            padding: 0 20px;
        }

        .hero-content h1 {
            font-family: 'Lora', serif;
            font-weight: 700;
            font-style: italic;
            font-size: clamp(2.5rem, 6vw, 4rem);
            line-height: 1.2;
            margin: 0;
            margin-bottom: 88px;
        }

        .job-section {
            background-color: #e3e3db;
            padding: 80px 10%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center; 
        }

        .job-info {
            text-align: left;
        }

        .job-info h2 {
            font-family: 'Lora', serif;
            font-weight: 700;
            font-style: italic;
            font-size: 45px;
            margin-bottom: 20px;
            color: #000;
        }

        .job-info p {
            font-family: 'Alegreya', serif;
            font-weight: 400;
            font-size: 23px;
            line-height: 1.6;
            color: #000;
        }

        .apply-form-container {
            background-color: #050A30; 
            padding: 40px;
            border-radius: 4px;
            color: #F5F3F5;
            text-align: center;
            position: relative; 
        }

        .form-group {
            margin-bottom: 20px;
            text-align: left;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-family: 'Gentium Plus', serif;
            font-weight: 700;
            font-style: italic;
        }

        .form-group input {
            width: 100%;
            padding: 12px;
            border: none;
            outline: none;
            font-size: 1rem;
            box-sizing: border-box;
        }

        .file-upload {
            background: white;
            color: #000000;
            padding: 10px 20px;
            display: inline-block;
            cursor: pointer;
            font-size: 0.85rem;
            border: none;
            border-radius: 4px;
            margin-top: 5px;
            width: 32%;
            text-align: center;
            font-weight: bold;
            transition: background 0.3s;
        }
        
        .file-upload:hover {
            background: #E3E3DB;
            color: #36168F;
        }

        .submit-btn {
            background-color: #36168F; 
            color: white;
            border: none;
            padding: 12px 0;
            width: 40%;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.3s;
            margin-top: 50px;
            font-family: 'Gentium Plus', serif;
            font-weight: 700;
            font-style: italic;
            display: inline-block;
        }

        .submit-btn:hover {
            background-color: #E3E3DB;
            color: #36168F;
        }

        .submit-btn:disabled {
            background-color: #666;
            cursor: not-allowed;
        }

        #thankYouMessage {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #F5F3F5;
            color: #050A30;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            z-index: 100;
            width: 80%;
            font-family: 'Lora', serif;
        }

        #thankYouMessage h3 {
            margin-top: 0;
            font-style: italic;
        }

        #thankYouMessage button {
            background-color: #36168F;
            color: white;
            border: none;
            padding: 10px 20px;
            margin-top: 15px;
            cursor: pointer;
            border-radius: 4px;
            font-weight: bold;
        }

        #thankYouMessage button:hover {
            background-color: #050A30;
        }

        @media (max-width: 768px) {
            .job-section {
                grid-template-columns: 1fr;
            }
            .submit-btn, .file-upload {
                width: 100%;
            }
        }


@media (max-width: 1024px) {
    .job-section {
        grid-template-columns: 1fr; 
        padding: 50px 5%;
        text-align: center;
    }

    .job-info {
        text-align: center;
        margin-bottom: 30px;
    }

    .job-info h2 { font-size: 32px; }
    .job-info p { font-size: 18px; }
}

@media (max-width: 768px) {
    .hero { height: 400px; }
    .hero-content h1 { font-size: 2rem; }

    .apply-form-container {
        padding: 25px 15px;
    }

    .file-upload {
        width: 100% !important;
        margin-top: 10px;
    }

    .submit-btn {
        width: 100% !important;
        margin-top: 30px;
    }

    #thankYouMessage {
        width: 90%;
        padding: 20px;
    }
}


.job-info {
    text-align: left;
    padding-right: 20px;
}

.main-join-heading {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 52px;       
    color: #36168F;       
    line-height: 0.9;      
    margin-bottom: 25px;
    letter-spacing: -1px;  
}

.join-description {
    font-family: 'Alegreya', serif;
    font-size: 22px;
    line-height: 1.4;
    color: #333;
    margin-bottom: 30px;
}

.requirements-box h3 {
    font-family: 'Lora', serif;
    font-size: 24px;
    font-style: italic;
    margin-bottom: 10px;
    color: #000;
}

.requirements-box p {
    font-family: 'Alegreya', serif;
    font-size: 17px;
    line-height: 1.5;
    color: #555;
}

@media (max-width: 768px) {
    .main-join-heading { 
        font-size: 36px; 
        line-height: 1.0; 
    }
}