#main-header {
    z-index: 3;
    margin-top: 80px;
    padding: 40px 16px 40px;
    display: flex;
    position: relative;
}

#main-header h1 {
    color: #1D1E1F;
    font-family: Mardoto;
    font-size: 56px;
    font-weight: 700;
    line-height: 68px;
    letter-spacing: -3px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none
}

/* #main-header h1 { max-width: 730px; } */
#main-header .headSubTitle {
    color: #6E7073;
    font-family: Mardoto;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
#main-header .calendar-button { 
    display: flex;
    align-items: center;
    border: 1px solid #E5E7EA;
    border-radius: 8px;
    padding: 16px;
    max-width: 270px;
    cursor: pointer
}

#main-header .calendar-button.margin {
    margin-right: 20px;
    margin-left: 20px
}

#main-header .calendar-button:hover {
    background-color: #f0f5ff;
}
#main-header .calendar-button img { width: 24px}
#main-header .calendar-title {
    font-family: Mardoto;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #1D1E1F
}

.head-sub-actions {  padding-bottom: 20px;}
/* #main-header .head-sub-content {
    display: flex;
} */

#main-header .head-sub-right { margin-bottom: 20px }

#main-header .head-sub {
    /* width: 50%; */
    display: flex;
    align-items: center 
}
#main-header .students_count { margin-left: 18px }
#main-header .students_count p{
    font-family: Mardoto;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #6E7073;
    margin-bottom: 0
}
#main-header .students_count p:first-child{ color: #1D1E1F }
#main-header .studentImg img { 
    width: 48px; 
    border-radius: 100%;
    border: 2px solid #ffffff
}
#main-header .studentImg { margin-left: -15px }
#main-header .studentImg:first-child { margin-left: 0 }
#main-header .students_images { display: flex }
#main-header .howToRegister:hover { color:#1D1E1F }
#main-header .howToRegister { 
    font-family: Mardoto;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #1D1E1F;
    align-self: center
}
.openRegisterPopup { text-align: center }

.homePage .contest-card img { border-radius: 24px }
.homePage .contest-card { box-shadow: unset }
.homePage .contest-card .div-block-7 p { height: unset }
.homePage .contest-card, .homePage .div-block-7 { align-items: flex-start;text-align: left }
.homePage .div-block-7 { padding: 20px 13px 20px 0 }
.homePage .card-subtitle { 
    color:#AEAFB2;
    font-family: Mardoto;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none
}
.homePage .card-title { 
    font-size: 24px;
    line-height: 30px
}

.homePage .card-subtitle{ 
    text-transform: none;
    font-size: 14px
}

.homePage .mobie-game {
    background: linear-gradient(96.26deg, #50DFFF 0%, #4A6FFF 50%, #F100D1 100%)
}

.homePage .game-wrapper .split-2 h2 {
    color: #ffffff;
    font-family: Mardoto;
    font-size: 40px;
    font-weight: 700;
    line-height: 50px;
    letter-spacing: -0.02em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none
}

.homePage .game-wrapper { align-items: center }
.homePage .metrics { background-color: #ffffff }
.homePage .metrics-wrapper { color: #0033FF; margin-bottom: 50px }

.homePage .iframe-container {
    position: relative;
    width: 100%;
    /* Maintain a 16:9 aspect ratio (height is 9 / 16 = 56.25%) */
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 24px
}

.homePage .iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.homePage .our-mission { padding: 60px 16px 60px 16px }
.homePage .mission-grid .youtube {border-radius: 24px}
.homePage .testimonials {
    background-color: #ffffff;
    padding: 60px 16px;
    position: relative;
}
.homePage .testimonial-block p {
    margin: 16px 0;
    font-family: Mardoto;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #1D1E1F
}
.homePage .testimonial-block { 
    justify-content: space-between;
    background-color: #EFF6F6;
    border-radius: 24px;
    box-shadow: none
}
.homePage .author { margin-bottom: 0}
.homePage .testimonial-image {
    width: 48px;
    height: 48px;
}
.homePage  .author .p-heading {
    font-family: Mardoto;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #1D1E1F
}

.homePage .author .p-smaller {
    font-family: Mardoto;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #6E7073
}

.homePage .how-to-join h2{text-align: left}
.homePage .step-image { 
    width: 80px;
    height: auto
}
.homePage .steps-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 17px;
    grid-row-gap: 40px
}
.homePage .how-to-join .step .div-block p {
    font-family: Mardoto;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #1D1E1F
}
.homePage .how-to-join .step .p-heading {
    font-family: Mardoto;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;    
    color: #1D1E1F
}

.homePage .how-to-join {
    padding: 60px 16px;
}

.homePage .modalCalendar{
    left: unset;
    right: 0;
    top: 0
}

.medium-title {
    font-family: Mardoto;
    font-size: 40px;
    font-weight: 700;
    line-height: 50px;
    letter-spacing: -0.02em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #1D1E1F
}
.medium-p{
    font-family: Mardoto;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #6E7073
}
.small-title {
    font-family: Mardoto;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #1D1E1F;
}
.tiny-title {
    font-family: Mardoto;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #1D1E1F;
}
.tiny-p {
    font-family: Mardoto;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #6E7073;
}

.subjective-tests { align-self: center }

.loggedIn #main-header .calendar-button { margin-left: 0}

@media (max-width: 992px) {
    .openRegisterPopup { height: auto; padding: 12px 18px; }
    /* #main-header .head-sub-content { flex-direction: column } */
    #main-header .head-sub-left { margin-bottom: 17px }
    #main-header .head-sub { width: 100% }
    #main-header h1 { 
        font-size: 50px;
        line-height: 65px
    }
    #main-header .headSubTitle {
        font-size: 18px;
        line-height: 28px
    }
    .homePage .steps-grid { grid-template-columns: 1fr }
    .homePage .step { align-items: center }
    .homePage .how-to-join .step .div-block p{ margin-bottom: 0 }
    .contest-stack { margin-top: 0 }
    .homePage .contest-card {  margin-top: 10px }
    .homePage .div-block-7 { padding: 20px 13px 6px 0 }
}

@media (max-width: 600px) {

    .navbar-expand-lg .navbar-nav .nav-link { margin: 0 4px}

    #main-header h1 {
        font-size: 36px;
        line-height: 48px;
        letter-spacing: -1px;
    }

    .homePage .game-wrapper .split-2 h2 {
        font-size: 31px;
        line-height: 42px
    }

    .homePage .store-badges {
        margin-bottom: 0;
        margin-top: 20px;
    }
    .homePage .how-to-join h2 { text-align: center }
    .homePage .our-mission { padding: 30px 16px 30px 16px }
    .homePage .how-to-join, .homePage .testimonials { padding: 30px 16px }
}

@media (max-width: 493px) {
    .head-sub-actions {  text-align: center }
    #main-header .calendar-button { 
        margin-left: 0;
        margin-top: 0
    }
    #main-header .headSubTitle {
        font-size: 16px;
        line-height: 24px;
    }
    .button-group {margin-top: 12px}
    #main-header .head-sub-right { flex-direction: column }
    .homePage .contest-card .button-primary { width: 100%;text-align: center }
    #main-header .calendar-button{ margin-right: 0 }
    .homePage .how-to-join .step .p-heading, .homePage .how-to-join .step .div-block p {text-align: center}
}

@media (max-width: 420px) {
    #main-header h1 {
        font-size: 30px;
        line-height: 40px
    }
    #main-header .head-sub-left { flex-direction: column }
    #main-header .students_images { margin-bottom: 6px }
    #main-header .headSubTitle {
        font-size: 14px;
        line-height: 21px;
    }

    .homePage .game-wrapper .split-2 h2 {
        font-size: 25px;
        line-height: 37px;
    }
}

@media (max-width: 395px) {
    #main-header h1 {
        font-size: 27px;
        line-height: 37px
    }
}