/* Typography and font styling */
body {
    font-family: 'Manrope', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Bebas Neue', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

h1 {
    font-size: 3.5rem;
}

h2 {
    font-size: 3.3rem;
}

h3 {
    font-size: 2.3rem;
}

/* Responsive headings */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2.2rem;
    }

    h3 {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    h3 {
        font-size: 1.5rem;
    }
}

/* Hero Section */
.hero-section {
    background-image: url('https://public.readdy.ai/ai/img_res/6532f5b1c93489e86b81aeae51acf0e5.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100%;
}

.hero-overlay {
    background: linear-gradient(90deg, rgba(1, 17, 32, 0.76) 0%, rgba(1, 29, 56, 0.76) 50%, rgba(1, 17, 32, 0.76) 100%);
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* Logo Size */
.logosize {
    width: 100%;
    height: 4.5rem;
}

@media (min-width: 600px) {
    .logosize {
        height: 5rem;
    }
}

/* Icon Font */
:where([class^="ri-"])::before {
    content: "\f3c2";
}

/* Program card transition */
.program-card {
    transition: opacity 0.3s ease;
}

/* Headings in hero or sections */
.head {
    color: white;
    font-size: 5vw;
}

@media (max-width: 1200px), (max-width: 500px) {
    .mt {
        padding-top: 10rem;
    }

    .head {
        font-size: 10vw;
    }
}