@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

@import url("Variables.css");
@import url("Nav.css");
@import url("Footer.css");

@import url("AboutSRY.css");
@import url("Course.css");
@import url("Contact.css");

body {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--main_bg_color);
    margin: 0;
}

h1 {
    
    font-family: "MuseoModerno", sans-serif;
    
/* 
    font-family: "Raleway", serif;
    font-weight: 800;
 */
}
h2 {
    
    font-family: "MuseoModerno", sans-serif;
    
/* 
    font-family: "Raleway", serif;
    font-weight: 700;
*/
}
p {
    font-family: "Raleway", serif;
}
.mobile {
    display: hide;
}

.landing_img {
    /* background-image: url("../Public/Images/SRY_Landing1.png"); */
    width: 100%;
    min-height: 100vh;
}

.landing_img > img {
    object-fit: cover;
    /* height: 100vh; */
    width: 100%;
}

.container {
    width: 70%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.sry_summery {
    display: flex;
    justify-content: center;
    width: 80%;
    margin-top: 2em;
    border-radius: 1em;
    background-color: var(--btn_hover);
    border-bottom: 2px solid var(--contrast_color);
    border-top: 2px solid var(--contrast_color);
}

.sry_summery > div {
    width: 80%;
    text-align: center;
}

.sry_summery > div > p{
    font-family: "Montaga", serif;
    font-size: 1.5em;
    font-weight: 400;
}

.headerContainer{
    width: 100%;
    margin-top: 6em;
    background-color: var(--secondary_color);
    text-align: center;

    border:solid 5px transparent;
    border-radius: 2em;
    background-image:   
        linear-gradient(var(--secondary_color), var(--secondary_color)),
        linear-gradient(360deg, var(--contrast_color) 5%, var(--secondary_color) 20%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.headerContainer > h1 {
    color: var(--main_bg_color);
    font-size: 3em;
}

/* Classes for the corse cards */
/*******************************************************************/
.course_container {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 2em;
}

.course_container > a {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 30%;
    height: 40em;
    border-radius: 2em;
    background-color: var(--secondary_color);
    text-decoration: none;
    color: var(--main_bg_color);
}

.course_container > a:hover {
    filter: drop-shadow(5px 10px 3px var(--contrast_color));
}

.course_header {
    width: 90%;
    border-bottom: 1px solid var(--contrast_color);
    text-align: center;
    padding-top: 1em;
}

.course_header > h1 {
    font-size: 2em;
    margin-bottom: 0.3em;
}

.course_items {
    padding: 0;
    margin: 0;
}
.course_items > li {
    font-family: "Raleway", serif;
    list-style-type: none;
    text-align: center;
    font-size: 1.3em;
    margin: 1.2em;
}

.course_btn {
    width: 20%;
    text-align: center;
    position: absolute;
    bottom: 2em;

    border: double 1px transparent;
    border-radius: 0.5em;
    background-image:   
        linear-gradient(var(--secondary_color), var(--secondary_color)),
        linear-gradient(360deg, var(--contrast_color) 5%, var(--secondary_color) 30%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.course_btn > p {
    margin: 0;
}
/*******************************************************************/


/* Classes for the staff "carusel" */
/*******************************************************************/
.staff_container {
    display: flex;
    /* justify-content: space-between; */
    width: 80%;
    margin-top: 5em;
}

.staff_img > img {
    object-fit: fill;
    height: 20em;
    border-radius: 0.5em;
}

.staff_info {
    width: 60%;
    margin-left: 2em;
}

.staff_info > div {
    border-bottom: 1px solid var(--contrast_color);
}

.staff_info > div > h1 {
    font-size: 2.5em;
    margin-bottom: 0;
}

.staff_info > h2 {
    font-size: 1.5em;
}

.staff_info > p {
    font-size: 1.3em;
}
/*******************************************************************/

@media (min-width:800px){
    .mobile {
        display:none!important
    }
}

@media only screen and (max-width: 800px) {
    /* body {
        width: 100%;
        background-image: url("../Public/Images/SRY_Landing1.png");
        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center;
    } */
    .desktop {
        display:none!important
    }

    
    .landing_img {
        background-image: url("../Public/Images/SRY_Landing1.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        min-height: 90vh;
    }

    .landing_img > img {
        display: none;
    }
    .container {
        width: 100%;
        margin-top: 0;
        /* margin-top: 10vh; */
        background-color: var(--main_bg_color);
    }

    .m_landing_title {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-top: 65vh;
        min-height: 3em;
        width: 80%;
        border-radius: 3em;
        border-bottom: 2px solid var(--contrast_color);
        background-color: var(--m_title_bg);
    }
    .m_landing_title > h2 {
        color: var(--main_bg_color);
        margin: 0;
        font-size: 1.3em;
        font-weight: 300;
    }
    .m_scroll_pointer {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10vh;
        margin-bottom: 9vh;
        width: 2.5em;
        height: 2.5em;
        background-color: var(--m_title_bg);
        border-radius: 100%;
        border-bottom: 2px solid var(--contrast_color);
    }

    .sry_summery{
        width: 100%;
        border-radius: 0;
        margin-top: 0;
    }

    .course_container {
        z-index: 0;
        flex-direction: column;
        align-items: center;
        margin-top: 0em;
    }
    
    .course_container > a {
        z-index: 0;
        width: 95%;
        height: auto;
        padding-bottom: 5em;
        margin-top: 1em;
    }

    .course_btn {
        width: 70%;
    }

    .course_container > a:hover {
        filter: drop-shadow(0px 0px 0px var(--contrast_color));
    }
    
    .staff_container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 95%;
        margin-top: 2em;
    }

    .staff_span {
        width: 100%;
        height: 1px;
        background-color: var(--contrast_color);
    }
    
    .staff_img > img {
        max-width:100%;
        margin-top: 1em;
        margin-bottom: 1em;
    }
    
    .staff_info {
        width: 100%;
        margin: 0;
    }
    
    .staff_info > div {
        border-bottom: none;
    }

    .headerContainer{
        width: 100%;
        margin-top: 4em;
        background-color: var(--secondary_color);
        text-align: center;
    
        border: none;
        border-bottom: solid 1px var(--contrast_color);
        border-radius: 0;
        background-image: none;
        background-origin: none;
        background-clip: none;
    }
    
    .headerContainer > h1 {
        color: var(--main_bg_color);
        font-size: 2em;
    }
    
}