:root {
    --primary-color: #f6de28;
    --header-bg-color: rgba(0, 0, 0, 0.877);
    --hero-bg-color: white;
    --features-bg-color: #f6de28b7;
    --call-to-action-bg-color: white;

    --font-main: "Urbanist", sans-serif;
    --font-h1: 1.7rem;
    --font-h2: 1.4rem;
    --font-h3: 1.25rem;
    --font-general: 1.2rem;
    --font-btn: 1rem;

    --shadow-color: rgba(0, 0, 0, 0.8);
    --image-shadow: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.8));
}
html {
    font-family: "Urbanist", sans-serif;
    font-size: var(--font-general);
    font-weight: 300;
}

body {
    margin: 0;
    display: grid;
    line-height: 1.4;
}

.page-yellow-bg {
    background-color: var(--primary-color);
}

.content-container {
    padding: 1vh 4vw;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    
}

a.yellow-bg-link {
    /* color: black; */
    background-color: var(--header-bg-color);
    padding: 0 5px;
}

a:hover {
    text-decoration-line: underline;
    text-decoration-thickness: 3px;
}

h1 {
    margin: 0;
    font-size: var(--font-h1);
    font-weight: 100;
    
}

h2{
    margin:0;
    font-size: var(--font-h2);
    font-weight: 700;
}

h3 {
    font-size: var(--font-h3);
    font-weight: 700;
}

li {
    margin-bottom: 10px;
}

img {
    max-width: 100%;
}

.section-first {
    padding: 11vh 4vw 0 4vw;
}



#site-title {
    display: none;
}

#site-logo {
    max-height: 8vh;
    align-self: center;
}

.section-heading {
    align-self: center;
}

.page-heading {
    font-size: 2rem;
    font-weight: 800;
}

.find-out-more-btn {
    font-size: var(--font-btn);
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--header-bg-color);
    background-color: var(--primary-color);
    margin-top: 8px;
    margin-bottom: 10px;
}

.find-out-more-btn:hover {
    background-color: var(--header-bg-color);
    color: var(--primary-color);
    text-decoration: none;
}

.button {
    font-family: var(--font-main);
    font-size: var(--font-btn);
    font-weight: 300;
    color: var(--header-bg-color);
    background-color: var(--primary-color);
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.button:hover {
    background-color: var(--header-bg-color);
    color: var(--primary-color);
}

.btn-dark {
    background-color: var(--header-bg-color);
    color: var(--primary-color);
    font-size: var(--font-btn);
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 8px;
    margin-bottom: 10px;
    text-decoration: none;
}

.btn-dark:hover {
    color: var(--header-bg-color);
    background-color: var(--primary-color);
    text-decoration: none;
}





.feature-heading {
    text-align: center;
}

hr {
    margin: 30px 0;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}




#section-practice-questions {
    padding-bottom: 30px;
    display: grid;
}

#call-to-action {
    background-color: var(--call-to-action-bg-color);
    height: 70vh;
    display: grid;
    align-content:space-around;
}

.enrol-img {
    max-width: 70vw;
    justify-self: center;
    align-self: center;
}

.enrol-now {
    font-size: 2rem;
}

.enrol-text .button {
    margin-bottom: 5vh;
}



#section-product-list {
    display: grid;
    grid-template-areas: 
    "header"
    "card1" 
    "card2" 
    "card3";
    justify-content: space-evenly;
    justify-items: center;
    padding-top: 20px;
    padding-bottom: 40px;
}

#product-section-header {
    grid-area: header;
    font-size: 2rem;
    font-weight: 700;
    justify-self: center;
    margin-bottom: 20px;
    text-align: center;
}

.product-card {
    background-color: rgb(36, 36, 36);
    color: white;
    width: 80%;
    padding: 15px;
    margin-bottom: 20px;
    display: grid;
    grid-template-areas: 
    "card-header card-header"
    "flag flag" 
    "info info" 
    "price-std card-btn"
    "price-disc card-btn"
    "terms terms";
    justify-items: center;
    align-content: center;
    align-items: center;

}

.country-flag {
    max-width: 100px;
    grid-area: flag;
}

.product-card-heading {
    grid-area: card-header;
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 10px;
}

.product-card-description {
    grid-area: info;
    margin-top: 0;
    margin-bottom: 10px;
    justify-self: start;
}

.price-now {
    grid-area: price-disc;
    color: var(--primary-color);
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 5px;
    justify-self: start;
}

.price-before-discount {
    grid-area: price-std;
    text-decoration-line: line-through;
    /* font-weight: 500; */
    text-decoration-color: red;
    text-decoration-thickness: 2px;
    margin-bottom: 0;
    justify-self: start;
}

.card-btn {
    grid-area: card-btn;
    align-self: center;
}

.card-btn:hover {
    text-decoration: none;
}

.pricing-condition {
    grid-area: terms;
    font-size: 0.8rem;
    margin-top: 10px;
    margin-bottom: 0;
    justify-self: start;
}


.privacy-policy {
    margin-top: 10vh;
}

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

.iframe-container > :first-child {
    margin-top: 9vh;
    width: 100%;
    height: 100vh;
}

@media (orientation:landscape) {

    #call-to-action {
        height: 100vh;
        grid-template-columns: 1fr 2fr;
        grid-template-areas: 
        "pic txt";
    }

    .enrol-img {
        grid-area: pic;
        max-width: 40vw;
        align-self: center;
    }

    .enrol-text {
        margin-top: 10vh;
        grid-area: txt;
    }

    #call-to-action .button {
        margin-bottom: 5vh;
    }

    #section-product-list {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 
    "header header header"
    "card1 card2 card3";
    justify-content: space-around;
}
}

@media (min-width: 500px) {

    #what-you-get {
        padding-top: 8vh;
    }
}

@media (min-width: 700px) and (min-height: 500px) {

    #call-to-action {
        padding-top: 0;
        grid-template-columns: 1fr 2fr;
    }

    .enrol-img {
        max-width: 50vw;
        justify-self: center;
        padding-right: 4vw;
    }
}

@media (min-width: 1000px) {

    .product-feature {
        padding: 10px;
    }

    #call-to-action {
        grid-template-areas: 
        "pic txt";
        height: 100vh;
    }

    .enrol-img {
        max-width: 50vw;
    }
}

@media (min-width: 1300px) {
    #syllabus {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    #section-practice-questions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
        "heading heading"
        "photo text";
        grid-column-gap: 30px;
        justify-content: center;
    }

    #practice-questions {
        grid-area: heading;
    }

    #section-practice-questions .feature-image {
        grid-area: photo;
        max-width: 40vw;
    }

    #section-practice-questions.info-text {
        grid-area: text;
        align-self: start;
    }

    #section-practice-questions.info-text {
        grid-area: text;
        align-self: start;
    }
}

@media (min-width: 1500px) {

    #call-to-action {
        height: 80vh;
    }
}

@media (min-width: 1600px) {
    

    #hero {
        padding-top: 2vh;
        grid-template-areas: 
        "txt1 pic"
        "txt2 pic"
        "txt2 pic"
        "btn pic";
    }

    .hero-heading {
        font-size: 4rem;
    }

    .hero-text {
        align-self: start;
        margin-top: 0;
    }
    
    .hero-image {
        max-height: 60vh;
        align-self: center;
    }

    .find-out-more-btn {
        font-size: 1.5rem;
        align-self:flex-start;
        margin-bottom: 20vh;
        justify-self: start;
        margin-left: 4vw;
    }

    #call-to-action {
        height: 100vh;
    }
    .enrol-now {
        font-size: 3rem;
    }

    .enrol-img {
        max-height: 70vh;
        padding-top: 0;
    }
}
.faq-card {
    background-color: black;
    color: white;
    padding: 1rem;
}

.faq-answer {
    font-size: var(--font-general);
}

footer {
    background-color: rgba(0, 0, 0, 0.877);
    color: white;
}

footer h2 {
    margin-top: 1vh;
}

address {
    font-style: normal;
}
header {
    background-color: var(--header-bg-color);
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-content: center;
    width: 100%;
    position: fixed;
    line-height: 1.2;
    font-size: 0.78rem;
}

header li {
    margin-bottom: 0;
}


header.content-container {
    padding: 0.6vh 3vw;
}


nav {
    padding: 1% 0;
    grid-column-start: 2;
    grid-row-start: 1;
}

nav ul {
    padding-right: 20px;
    padding-left: 30px;
    height: 100%;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (min-width: 500px) {
    nav {
        margin-right: 20px;
    }

    nav ul {
        padding-left: 0;
        width: 100%;
        flex-direction: row;
        align-items: flex-end;
    }

    nav ul li {
    margin-right: 20px;
    }
}


@media (min-width: 700px) and (min-height: 500px) {
    header {
        grid-template-columns: 3fr 1fr;
    }
    nav {
    padding-right: 100px;
    }
}

@media (min-width: 1000px) {
    nav {
        padding-right: 40px;
    }
}

@media (min-width: 1500px) {
    header {
        grid-template-columns: 3fr 1fr;
    }
}

@media (min-width: 1600px) {
    header {
        grid-template-columns: 4fr 1fr;
    }
}

#lightbox {
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    display: none
}

#lightbox.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

#lightbox-image-placeholder {
    max-height: 90%;
    max-width: 90%;
    border-radius: 5px;
}

.lightbox-image {
    max-width: 300px;
    max-height: 300px;
    cursor: pointer;
    border-radius: 5px;
}

.lightbox-image:hover {
    transform: scale(1.05);
    transition: transform 0.5s;
}


#page-about-us {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 2vh;
    justify-items: center;
    text-align: center;
}

#page-about-us section.content-container {
    margin-top: 1vh;
}

#page-about-us {
    padding-bottom: 5vh;
}

@media (min-width: 1000px) {
    #page-about-us {
        margin: 0 10vw;
    }
}

@media (min-width: 1300px) {
    #page-about-us {
        margin: 0 5vw;
    }
}
#page-courses {
    margin: 10vh 3vw 0 3vw;
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 2vh;
    justify-items: center;
    text-align: center;
}



@media (min-width: 1300px) {
    #page-courses {
        margin: 0 5vw 0 5vw;
    }

    .section-info-text{
        margin: 0 15vw;
    }
}
#live-tuition-header {
    margin-top: 10vh;
    display: grid;
}

.page-heading {
    justify-self: center;
}

#live-tuition-header .feature-image {
    max-height: 70vh;
}


.tutor-profile {
    font-size: 1rem;
    padding: 2vh 0;
    margin-bottom: 30px;
    display: grid;
    grid-template-areas: 
    "photo"
    "name"
    "quals"
    "exp";
}

.profile-photo {
    grid-area: photo;
    max-width: 100px;
    border-radius: 50%;
    border: solid;
    border-width: 5px;
    border-color: white;
    justify-self: center;
}

.tutor-profile-name {
    grid-area: name;
    margin: 10px 0 0 0;
    justify-self: center;
}


.quals {
    grid-area: quals;
}

.exp {
    grid-area: exp;
}

.tutor-profile ul {
    margin: 0;
}
.tutor-profile ul li {
    margin: 5px 0;
}

.tutor-profile p {
    margin: 0;
}

.tutor-profile-subheading {
    margin: 10px 0 5px 0;
}

#section-live-sessions {
    display: grid;
    grid-template-areas: 
    "header"
    "tutors-header"
    "tutors";
}

#section-live-session-header {
    grid-area: header;
    display: grid;
}

#section-our-tutors-header {
    grid-area: tutors-header;
    justify-self: center;
}

#section-tutor-profiles {
    grid-area: tutors;
}

@media (orientation: landscape) {
    .tutor-profile {
        grid-template-columns: 1fr 3fr;
        grid-template-areas: 
        "photo quals"
        "name quals"
        "exp exp";
        grid-column-gap: 15px;
        align-items: center;
        justify-items: start;
        padding-top: 20px;
        margin-bottom: 30px;
    }
    
    .exp {
        margin-top: 10px;
    }
}


@media (min-width: 500px) {
        .tutor-profile {
    grid-template-columns: 1fr 3fr;
    grid-template-areas: 
    "photo quals"
    "name quals"
    "exp exp";
    grid-column-gap: 15px;
    align-items: center;
    padding-top: 20px;
    margin-bottom: 30px;
    }
    
    .profile-photo {
        justify-self: center;
    }

    .tutor-profile-name {
        justify-self: center;
    }

    .exp {
        margin-top: 10px;
    }
}

@media (min-width: 800px) {
    #live-tuition-overview-txt {
        margin: 0 8vw;
    }
}

@media (min-width: 1000px) {

    #live-tuition-header {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "header header"
            "img txt";
        grid-column-gap: 5vh;
        grid-row-gap: 2vh;
    }

    #live-tuition {
        grid-area: header;
    }

    #live-tuition-header .feature-image {
        grid-area: img;
        max-height: 80vh;
        align-self: center;
    }

    #live-tuition-overview-txt {
        grid-area: txt;
    }

    #live-tuition-overview-txt {
        margin: 0 0;
    }



    #section-tutor-profiles {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        grid-column-gap: 80px;
    }

    .tutor-profile {
        grid-template-columns: 1fr;
        grid-template-areas: 
        "photo"
        "name"
        "quals"
        "exp";
        align-items: center;
        padding-top: 20px;
        margin-bottom: 30px;
    }
}

@media (min-width: 1300px) {
    #live-tuition-header {
        margin-top: 0;
    }

    #live-tuition-header.section-first {
        padding-top: 12vh;
    }

        #live-tuition-overview-txt {
        width: 80%;
    }

    #live-tuition-header .feature-image {
        justify-self: end;
    }

}
#page-practice-questions {
    margin-top: 12vh;
    display: grid;
    justify-content: center;
    grid-row-gap: 2vh;
    text-align: center;
}

#page-practice-questions .lightbox-image {
    justify-self: center;
    max-width: 400px;
    max-height: 400px;
}

@media (min-width: 1000px) {
    
    #page-practice-questions {
        grid-template-areas:
            "header"
            "cover"
            "txt"
            "q1"
            "q2"
            "q3" 
            "q4";
        grid-gap: 2vh 5vw;
        justify-items: center;
    }

    #page-practice-questions .page-heading {
        grid-area: header;
    }

    #page-practice-questions .feature-image:nth-of-type(1) {
        grid-area: cover;
    }

    #page-practice-questions p:nth-of-type(1) {
        grid-area: txt;
        max-width: 60vw;
        justify-self: center;
    }

    #q1 {
        grid-area: q1;
    }

    #q2 {
        grid-area: q2;
    }

    #q3 {
        grid-area: q3;
    }

    #q4 {
        grid-area: q4;
    }

    #q1 .lightbox-image {
        justify-self: center;
    }
}

@media (min-width: 1300px) {
    #page-practice-questions {
        margin-top: 0;
    }
}
.product-page {
    margin: 0 5vw 0 5vw;
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 2vh;
}

.product-page .product-card {
    max-width: 600px;
}

@media (min-width: 1000px) {
    .product-page {
        margin: 0 15vw 0 15vw;
    }
}

@media (min-width: 1300px) {
    .product-page {
        margin: 0 23vw 0 23vw;
    }
}
#page-video-lessons {
    margin-top: 12vh;
    display: grid;
    grid-row-gap: 2vh;
}

@media (min-width: 1000px) {
    #page-video-lessons {
        margin: 12vh 10vw;
    }
}


@media (min-width: 1300px) {
    #page-video-lessons {
        margin: 0 10vw;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "header header"
            "img1 info1"
            "info2 img2"
            "info3 info3";
            grid-gap: 4vh 5vw;
    }

    #page-video-lessons .feature-image {
        align-self: center;
    }

    #video-lessons {
        grid-area: header;
    }

    #info-area-1 {
        grid-area: info1;
    }

    #info-area-2 {
        grid-area: info2;
    }

    #info-area-3 {
        grid-area: info3;
        justify-self: center;
    }

    #page-video-lessons .feature-image:nth-of-type(1) {
        grid-area: img1;
    }

    #page-video-lessons .feature-image:nth-of-type(2) {
        grid-area: img2;
    }

}
#section-faq {
    padding-top: 10vh;
    background-color: var(--primary-color);
}

.section-heading {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
}
#features-and-benefits {
    background-color: var(--features-bg-color);
}

#features-and-benefits h2 {
    font-size: 2rem;
}

.feature-image {
    border-radius: 5px;
    justify-self: center;

}

#what-you-get {
    padding-top: 3vh;
    justify-self: center;
}


@media (min-width: 1300px) {
        #section-live-session-header {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
        "heading heading"
        "photo text";
        grid-column-gap: 30px;
        justify-content: center;
        margin-bottom: 30px;
    }

    #section-our-tutors-header {
        max-width: 50vw;
        text-align: center;
    }

    #live-tuition-sessions {
        grid-area: heading;
    }

    #section-live-session-header .feature-image {
        grid-area: photo;
        max-width: 40vw;
        align-self: center;
    }

    #video-lesson-library {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
        "heading heading"
        "photo text";
        grid-column-gap: 30px;
        justify-content: center;
        margin-bottom: 30px;
    }

    #section-video-library {
        grid-area: heading;
    }

    #video-lesson-library.feature-image {
        grid-area: photo;
    }

    #video-lesson-library.info-txt {
        grid-area: text;
}
#hero {
    background-color: var(--hero-bg-color);
    display: grid;
    align-content:space-around;
    justify-items: center;
    margin-top: 14vh;
}



.hero-heading {
    text-align: center;
    font-size: var(--font-h1);
}

.hero-text {
    justify-self: start;
    margin-left: 4vw;
}

.hero-text ul {
    font-weight: 300;
}

.hero-info {
    margin-bottom: 0;
    font-weight: 300;
    font-size: 1.2rem;
}

.hero-discount {
    color: red;
    font-weight: 900;
}

.hero-image {
    padding-bottom: 5vh;
}



.hero-image {
    max-height: 60vw;
}

@media (orientation: landscape) {
    #hero {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "txt1 txt2" 
        "pic txt2"
        "pic txt2"
        "pic btn";
        align-items: space-around;
    }

    .hero-heading {
        margin-top: 10vh;
        grid-area: txt1;
    }

    .hero-text {
        margin-top: 15vh;
        grid-area: txt2;
    }

    .hero-image {
        grid-area: pic;
        max-width: 40vw;
    }

    .find-out-more-btn {
        grid-area: btn;
        align-self: start;
        margin-bottom: 15vh;
    }

}

@media (min-width: 500px) {
    #hero {
    margin-top: 10vh;
    }
}


@media (min-width: 700px) and (min-height: 500px) {
    #hero {
    padding-top: 2vh;
    grid-template-areas: 
    "txt1 txt2"
    "btn txt2"
    "pic pic";
    }

    .hero-heading {
        grid-area: txt1;
        font-size: 3rem;
    }

    .hero-text {
        margin-top: 10vh;
        grid-area: txt2;
        align-self: center;
    }

    .hero-image {
        grid-area: pic;
    }

    .find-out-more-btn {
        grid-area: btn;
        align-self: start;
        margin-bottom: 0;
    }
}

@media (min-width: 1000px) {
    #hero {
        margin-top: 1vh;
    }

    .hero-heading {
    padding: 0;
    }

    .hero-text {
        align-self: center;
        justify-self: center;
    }

    .find-out-more-btn {
        justify-self: center;
    }

}
.section-first {
    padding-top: 15vh;
}

h2.section-heading{
    font-size: 1.8rem;
}

.section-welcome {
    background-color: var(--primary-color);
    display: grid;
    justify-content: center;
    text-align: center;
}

.section-welcome img{
    justify-self: center;
    align-self: center;
}


#section-welcome ol {
    list-style-type: none;
    text-align: left;
}

#section-welcome ul {
    text-align: left;
}

#section-welcome li {
    text-align: left;
}


@media (min-width: 1000px) {
    #welcome-course-content {
        padding: 0 15vw;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "heading heading"
            "p1 i1"
            "p2 i2"
            "p3 i3"
            "g1 g1"
            "p4 i4";
        row-gap: 30px;
        column-gap: 30px;
        justify-content: center;
    }

    #welcome-course-content p {
    justify-self: end;
    width: 90%;
    }

    #welcome-course-content .group p {
        width: 100%;
    }

    #welcome-course-content img {
    justify-self: center;
    }



    #welcome-course-content h2 {
        grid-area: heading;
    }

    #welcome-course-content p:nth-of-type(1) {
        grid-area: p1;
    }

    #welcome-course-content p:nth-of-type(2) {
        grid-area: p2;
    }

    #welcome-course-content p:nth-of-type(3) {
        grid-area: p3;
    }

    #welcome-course-content div.group:nth-of-type(1) {
        grid-area: g1;
    }

    #welcome-course-content p:nth-of-type(4) {
        grid-area: p4;
}

@media (min-width: 1500px) {
    #welcome-course-content {
        padding: 0 20vw;
        column-gap: 0px;
    }

    #welcome-course-content p {
    width: 70%;
    }

    #welcome-course-content img {
    /* justify-self: start; */
    }
}
@media (min-width: 900px) {
    #welcome-dashboard {
        grid-template-areas:
        "heading heading"
        "p1 p2"
        "i1 i2";
        row-gap: 10px;
        column-gap: 10px;
    }

    #welcome-dashboard p {
    justify-self: center;
    width: 90%;
    }

    #welcome-dashboard h2 {
        grid-area: heading;
    }

    #welcome-dashboard p:nth-of-type(1) {
        grid-area: p1;
    }

    #welcome-dashboard p:nth-of-type(2) {
        grid-area: p2;
    }
}

@media (min-width: 1500px) {
        #welcome-dashboard p {
        justify-self: center;
        width: 70%;
    }
}
@media (min-width: 800px) {

    #welcome-first-login {
        grid-template-areas:
        "heading heading"
        "txt image";
        row-gap: 30px;
        column-gap: 30px;
        align-items: center;
    }

    #welcome-first-login h2 {
        grid-area: heading;
    }

    #welcome-first-login p {
        text-align: left;
    }

}


@media (min-width: 1000px) {

    #welcome-first-login {
        grid-template-areas:
        "heading heading heading"
        "p1 p2 p3"
        "i1 i2 i3";
        row-gap: 10px;
        column-gap: 30px;
    }

    #welcome-first-login p {
        text-align: center;
    }

    #welcome-first-login .p1 {
        grid-area: p1;
    }

    #welcome-first-login .p2 {
        grid-area: p2;
    }

    #welcome-first-login .p3 {
        grid-area: p3;
    }

    #welcome-first-login .i1 {
        grid-area: i1;
    }

    #welcome-first-login .i2 {
        grid-area: i2;
    }

    #welcome-first-login .i3 {
        grid-area: i3;
    }

}



#welcome-guidelines ol {
        padding-left: 0;
        text-align: left;
    }

#welcome-guidelines li {
        text-align: left;
    }

@media (min-width: 1000px){
    #welcome-guidelines {
        padding: 0 15vw;
    }
    
}

@media (min-width: 1500px){
    #welcome-guidelines {
        padding: 0 20vw;
    }
    
}
section.section-welcome[id='welcome-learning-process'] {
    text-align: left;
    padding: inherit 10vw;
}


@media (min-width: 1000px){
    #welcome-timetable {
        padding: 0 20vw;
    }
}

@media (min-width: 1500px) {
    #welcome-timetable {
        padding: 0 20vw;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "heading heading"
            "p1 i1"
            "p2 i2"
            "p3 i3"
            "g1 g1";
        row-gap: 30px;
        column-gap: 30px;
        justify-content: center;
    }

    #welcome-timetable h2 {
        grid-area: heading;
    }

    #welcome-timetable p {
    justify-self: end;
    width: 90%;
    }

    #welcome-timetable p:nth-of-type(1) {
        grid-area: p1;
    }

    #welcome-timetable p:nth-of-type(2) {
        grid-area: p2;
    }

    #welcome-timetable p:nth-of-type(3) {
        grid-area: p3;
    }

    #welcome-timetable .group {
        grid-area: g1;
        justify-self: center;
        width: 70%
    }

    #welcome-timetable .group p {
        width: 100%;
    }

}
.video-container {
    max-width: 80vw;
    height: 500px;
}