@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*{
    box-sizing:border-box;
}

html,body{
    overflow-x:hidden;
    max-width:100%;
}

header.main-header {
    background: #284a8a;
    box-shadow: 0px 5px 6px #284a8a;
}
.header-container {
    padding: 1vh 2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header.main-header .logo, header.main-header .logo img {
    max-height: 65px;
}

.header-container nav.main-menu ul li {
    position: relative;
    float: left;
    margin-left: 2vw;
    transition: text-shadow 200ms;
    list-style: none;
}

.header-container nav.main-menu ul li:hover {
    text-shadow: 0 0 5px white;
}

.header-container nav.main-menu ul li::after {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 3px;
    background: white;
    top: 0;
    right: -1vw;
}

.header-container nav.main-menu ul li:last-child::after {
    content: unset;
}

.header-container nav.main-menu ul li a {
    color: white;
    font-size: 1.5rem;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
}


/****/

.site-content section#home {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 80vh;
}

.site-content section#home {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 90vh;
    position: relative;
}

.site-content section#home .home-bg {position: absolute;z-index: -1;display: flex;justify-content: center;align-items: center;overflow: hidden;width: 100%;height: 100%;}

.site-content section#home .home-title h1 {
    font-size: 13rem;
    color: white;
    font-weight: bold;
    font-family: 'Oswald';
    text-shadow: 0 0 5px black, 5px 5px 10px black;
    margin-bottom: -5px;
}

.site-content section#home .home-bg span {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #000000db 20%, #0000003d);
    width: 100%;
    height: 100%;
}

.site-content section#home .home-bg img {width: 100%;height: 100%;object-fit: cover;}

.site-content section#home .home-bottom {position: absolute;bottom: 0;left: 0;width: 100%;}

.site-content section#home .home-bottom img {
    width: 100%;
}
.home-title h1 span {
    color: #a31a1c;
}

.site-content section#home span.home-date {
    background: white;
    width: 100%;
    display: block;
    text-align: center;
    font-family: 'Poppins';
    font-style: italic;
    font-size: 2rem;
    color: #284a8a;
    border: 2px solid black;
}

.site-content section#home span.home-cr {
    color: white;
    width: 100%;
    text-align: center;
    display: block;
    font-size: 2rem;
    letter-spacing: .3rem;
}

.site-content section#home .home-apply {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 5vh;
}

.site-content section#home .home-apply a {
    font-size: 1.5rem;
    font-family: 'Poppins';
    font-weight: bold;
    color: white;
    text-decoration: none;
    background: #a31a1c;
    padding: 1vh 1vw;
    border-radius: 15px;
    transition: 300ms;
}

.site-content section#home .home-title {
    margin-top: -5vh;
}

.site-content section#home .home-apply a:hover {
    color: #ee999a;
}

.site-content  section#timer {
    background: #284a8a;
    padding: 10vh 0;
    text-align: center;
    position: relative;
}

section#timer div#date-timer {
    display: flex;
    justify-content: center;
    align-items: end;
    margin-top: 1vh;
}

section#timer div#date-timer .timer-box {background: black;color: white;font-size: 5rem;font-family: 'Oswald';padding: 15px 25px;margin: 10px;}

section#timer > span {
    font-size: 2.3rem;
    font-family: 'Roboto';
    font-weight: bold;
    color: white;
    z-index: 10;
}

section#timer div#date-timer span {
    font-size: 7rem;
    font-weight: bold;
    font-family: 'Poppins';
    font-style: italic;
    color: white;
}

section#timer div#date-timer span.days {
    font-size: 1.5rem;
    margin-right: 5px;
}

span#bubble1 {
    position: absolute;
    right: -15vw;
    width: 30vw;
    height: 30vw;
    background: #730406;
    bottom: -15vw;
    border-radius: 100%;
}

.site-content  section#apply {
    background: #284a8a;
    text-align: center;
    padding-bottom: 15vh;
    position: relative;
}

.line {
    height: 4px;
    width: 50vw;
    background: var(--clr);
    left: 25vw;
    position: relative;
}

.line::before, .line::after {
    content: '';
    position: absolute;
    left: 0;
    top: -5px;
    height: 14px;
    width: 3px;
    background: var(--clr);
}

.line::after {
    right: 0;
    left: unset;
}

.site-content section#apply h2 {
    color: white;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    margin-top: 10vh;
    font-size: 4rem;
}


.site-content section#apply .apply-forms {
    position: relative;
    margin: 5vh 0 10vh;
}

.site-content section#apply .applications {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 10px;
}

.site-content section#apply .apply-over {
    width: ;
}

.site-content section#apply .apply-bg {
    opacity: .3;
}

.site-content section#apply .apply-bg .apply-bg-img {
    height: 30vh;
}

.site-content section#apply .apply-bg .apply-bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.site-content section#apply .applications .apply-form {
    background: #fef1e3a1;
    width: 35%;
    height: 80%;
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 5px 0px black;
}

.site-content section#apply .applications .apply-form span {
    color: #284a8a;
    font-weight: bold;
    font-family: 'Roboto';
    font-size: 1.2rem;
}

.site-content section#apply .applications .apply-form h3 {
    font-size: 4rem;
    font-weight: bold;
    font-family: 'Poppins';
    font-style: italic;
    color: white;
    text-shadow: 5px 3px 0px #A31A1C, 2px 2px 5px #a31a1c, 5px 3px 0px #A31A1C, 0px 0px 4px #a31a1c;
    text-transform: uppercase;
}

span#bubble2 {
    position: absolute;
    left: -15vw;
    width: 20vw;
    height: 20vw;
    background: #730406;
    top: 14vw;
    border-radius: 100%;
}

section#timer div#date-timer .timer-box.month-timer, section#timer div#date-timer .timer-box.day-timer {
    font-size: 3rem;
}

.site-content section#timer > span:first-child {
    margin-bottom: 3vh;
    display: block;
}

section#committees {
    background: #fef1e3;
    padding: 10vh 0;
    text-align: center;
}

section#committees h2 {
    font-family: 'Poppins';
    font-weight: bold;
    color: black;
    font-size: 4rem;
}

section#committees .committe {
    display:flex;
    align-items:stretch; /* önemli */
    margin: 5vh 10vw;
    justify-content: space-between;
calc(10vw): -;
    margin-right: calc(10vw + 5px);
}

section#committees .committe .com-img {
    width: 20vw;
}

section#committees .committe .com-img img {
    width:100%;
    height:100%;
    object-fit:cover;
}

section#committees .committe .com-about {
    width: 55vw;
    background: white;
    padding: 2%;
}

section#committees .committe .com-about .com-top {
    display: flex;
    justify-content: space-between;
}

section#committees .committe .com-about .com-content {
    text-align: left;
    font-family: 'poppins';
}

section#committees .committe .com-about .com-people {
    display: flex;
    margin-top: 3vh;
}

section#committees .committe .com-about .com-people .com-u {
    display: flex;
    align-items: center;
    margin-right: 3vw;
}

section#committees .committe .com-about .com-people .com-u .com-u-img {
    width: 3vw;
    overflow: hidden;
    height: 3vw;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid black;
}

section#committees .committe .com-about .com-people .com-u .com-u-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section#committees .committe .com-about .com-people .com-u .com-u-about {
    text-align: left;
    margin-left: 1vw;
}

section#committees .committe .com-about .com-people .com-u .com-u-about h6.com-u-title {
    margin: 0;
    font-weight: bold;
    font-family: 'Poppins';
}

section#committees .committe .com-about .com-top h3.com-title {
    font-size: 4rem;
    font-weight: bold;
    font-family: 'Oswald';
    color: black;
}

section#committees .committe .com-img, section#committees .committe .com-about {
    box-shadow: 5px 5px 0 5px black;
}

section#committees .committe .com-about .com-top .study-guide-button a {
    background: #730406;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Poppins';
    padding: 1vh 2vh;
    border-radius: 20px;
}

section#sponsors {
    height: 23vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    padding: 4vh 0;
}

section#sponsors .sponsor-img {
    height: 100%;
}

section#sponsors .sponsor-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

section#location {
    background: #284a8a;
    padding: 10vh 5vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

section#location .location-about .location-title .line {
    left: 0;
    width: unset;
}

section#location .location-about .location-title h3 {
    font-family: 'Poppins';
    font-size: 5rem;
    font-weight: bold;
    color: white;
}

section#location .location-content {
    margin-top: 5vh;
    color: white;
}

section#location .location-content .location-item {
    font-size: 1.5rem;
}

section#location .location-content .location-item i {
    margin-right: 1vw;
}

section#location .location-map {
    border: 5px solid white;
    border-radius: 10px;
    overflow: hidden;
}

footer.main-footer {
    background: #284a8a;
    color: white;
    padding-top: 10vh;
    text-align: center;
}

footer.main-footer .footer-top, footer.main-footer .footer-about {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 2vh 5vw;
}

footer.main-footer .footer-top h5 {
    font-size: 4rem;
    font-family: 'Poppins';
    font-weight: bold;
}

footer.main-footer .footer-top i {
    font-size: 3rem;
    font-family: 'Poppins';
}

footer.main-footer .footer-about .footer-logo {
    max-width: 30%;
}

footer.main-footer .footer-about .footer-logo img {
    width: 100%;
}

footer.main-footer .footer-about .footer-social {
    font-size: 2.5rem;
    font-family: 'Roboto';
    text-align: left;
}

footer.main-footer .footer-bottom {
    background: white;
    color: black;
    font-family: 'Poppins';
    padding: 15px 0;
    margin-top: 5vh;
}

section#faq {
    background: #fef1e3;
    padding: 10vh 10vw;
}

section#faq .faq-q .q-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 2vh 2vw;
    font-family: 'Poppins';
}

section#faq .faq-q .q-title h3 {
    margin: 0;
    font-weight: bold;
    font-size: 2.5rem;
    color: #284a8a;
}

section#faq .faq-q .q-title span {
    font-size: 3rem;
    color: #284a8a;
}

section#faq .faq-q .q-content {
    font-family: 'Poppins';
    background: #284a8a;
    color: white;
    padding: 0vh 2vw;
    max-height: 0;
    overflow:hidden;
    transition: 0.35s ease;
}

section#faq .faq-q {
    box-shadow: 4px 4px 0 4px #284a8a;
    margin-bottom: 4vh;
}

section#faq .faq-q.active .q-content {
 max-height: 500px;
 padding: 2vh 2vw;
}

section#timer div#date-timer .timer-box {
    background-color: #0d2445b5;
    color: #dec7b9;
    width: 120px;
    height: auto;
    border-radius: 50px;
    font-family: sans-serif;
}

.site-content section#apply h2 {
    font-style: italic;
}

.q-title span i{
    transition:transform 0.3s ease;
}

.faq-q.active .q-title span i{
    transform:rotate(90deg);
}

@media (max-width: 768px) {
    .header-container nav.main-menu ul {
        position: absolute;
        top: 100%;
        left: 0;
        background: #284a8a;
        z-index: 1000;
        width: 100%;
        padding: 0;
        margin: 0;
        text-align: center;
        transform: scaleY(0);
        transition: 300ms;
        transform-origin: top;
    }

    .header-container nav.main-menu ul li {
        float: none;
        margin: 0;
    }

    .header-container nav.main-menu ul li:first-child a {
        border-top: 0;
    }

    .site-content section#home .home-title h1 {
        font-size: 5rem;
    }

    .site-content section#home span.home-date {
        font-size: 1.3rem;
    }

    .site-content section#home span.home-cr {
        font-size: .8rem;
        letter-spacing: .1rem;
    }

    .site-content section#home .home-apply a {
        font-size: 1rem;
        padding: 2vh 4vw;
        border-radius: 10px;
    }

    section#timer div#date-timer .timer-box.month-timer, section#timer div#date-timer .timer-box.day-timer {
        font-size: 2rem;
    }

    section#timer div#date-timer .timer-box {
        font-size: 2.5rem;
        padding: 5px 12px;
        margin: 3px;
    }

    section#timer div#date-timer span.days {
        font-size: 1rem;
        margin-right: 2px;
    }

    section#timer div#date-timer span {
        font-size: 3rem;
    }

    .site-content section#home {
        height: 50vh;
    }

    .site-content section#apply .applications .apply-form h3 {
        font-size: 1.5REM;
    }

    section#committees h2 {
        font-size: 3rem;
    }

    section#location .location-about .location-title h3 {
        font-size: 3rem;
    }

    footer.main-footer .footer-top h5 {
        font-size: 2rem;
    }

    footer.main-footer .footer-top i {
        font-size: 1.6rem;
    }

    section#committees .committe .com-about .com-people {
        flex-direction: column;
    }

    section#committees .committe .com-about .com-top h3.com-title {
        font-size: 2.2em;
    }

    section#committees h2 {
        font-size: 2.5rem;
    }

    section#committees .committe {
        flex-direction: column;
        margin: 5vh 5vw;
        margin-right: calc(5vw - 5px);
    }

    section#committees .committe .com-img {
        width: calc(90vw - 5px);
        margin-bottom: 4vh;
    }

    section#committees .committe .com-about {
        width: calc(90vw - 5px);
        padding: 5%;
    }

    .site-content section#apply .applications {
        flex-direction: column;
    }

    .site-content section#apply .applications .apply-form {
        width: 90%;
        margin: 2vh 0;
    }

    .site-content section#apply .apply-bg .apply-bg-img {
        min-height: 35vh;
    }

    h2 {}

    .site-content section#apply h2 {
        font-size: 2.5rem;
    }

    .line {
        width: 80vw;
        left: 10vw;
        z-index: 500;
    }

    .site-content section#timer {
    }

    .site-content section#timer > span:first-child {
        line-height: 2.3rem;
    }

    section#location {
        flex-direction: column;
        padding: 5vh 5vw;
    }

    section#faq .faq-q .q-title h3 {
        font-size: 1.3rem;
    }

    section#faq .faq-q {
        margin.bottom: bottom;
        margin-bottom: 3vh;
    }

    section#faq {
        padding: 5vh 4vw;
    }

    footer.main-footer .footer-about .footer-social {
        font-size: 1.25rem;
    }

    footer.main-footer .footer-top, footer.main-footer .footer-about {
        flex-direction: column;
    }

    section#committees .committe .com-about .com-people .com-u {
        margin-top: 2vh;
    }

    section#committees .committe .com-about .com-people .com-u .com-u-img {
        width: 15vw;
        height: 15vw;
    }

    section#committees .committe .com-about .com-people .com-u .com-u-about {
        margin-left: 5vw;
    }

    section#committees .committe:nth-child(even) .com-about {
        order: 2;
    }

    section#sponsors .sponsor-img {
        width: 45%;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    section#sponsors {
        padding: 2vh 6vw;
        flex-wrap: wrap;
        min-height: 23vh;
        height: auto;
    }

    section#sponsors .sponsor-img img {
        width: 80%;
        height: 80%;
    }

    section#location .location-map {
        width: 100%;
        margin-top: 5vh;
    }

    section#faq .faq-q .q-title span {
        font-size: 2rem;
    }

    section#faq .faq-q .q-title {
        padding: 1vh 4vw;
    }

    section#faq .faq-q.active .q-content {
        padding: 2vh 4vw;
        font-size: .8rem;
    }

    footer.main-footer .footer-about .footer-logo {
        max-width: 50%;
        margin-bottom: 3vh;
    }

    footer.main-footer {
        padding-top: 2vh;
    }

    footer.main-footer .footer-about .footer-social .footer-social-item i {
        margin-right: 5vw;
    }

    footer.main-footer .footer-bottom {
        font-size: .8rem;
        padding: 10px 20px;
        line-height: .9rem;
    }
    .site-content section#apply {
        padding-bottom: 5vh;
    }
}