/* OVERALL STYLES */

:root {
    --page-max-width: 1242px;
    --content-max-width: 1170px;
    --surface-radius: 20px;
    --section-gap: 72px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    background-color: #FAFAFA;
    color: #4D4D4D;
}

.neomorph {
    border-radius: var(--surface-radius);
    background: linear-gradient(138deg, #F0F0F3 0%, #FAFAFA 100%);
    box-shadow: -10px -10px 30px 0 #FFF, 10px 10px 30px 0 rgba(174, 174, 192, 0.40);
}

h1 {
    color: #4D4D4D;
    font-family: Montserrat, sans-serif;
    font-size: clamp(2rem, 1.55rem + 1.4vw, 2.5rem);
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
}

h3 {
    color: #4D4D4D;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
}

p {
    margin-bottom: 12px;
    color: #4D4D4D;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.textbold {
    color: #4D4D4D;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.caption {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    color: #909090;
}

.insidepic {
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: auto;
}

a {
    color: #4D4D4D;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* HEADER STYLES */

header,
main,
footer {
    width: min(calc(100% - 32px), var(--page-max-width));
    margin-left: auto;
    margin-right: auto;
}

header {
    padding-top: 24px;
}

#nav {
    min-height: 84px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

#nav ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 16px 28px;
    list-style: none;
}

li.nav {
    margin: 0;
    color: #4D4D4D;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
}

.navlogo {
    width: 200px;
    height: auto;
    flex-shrink: 0;
}

/* MAIN / SECTION STYLES */

main {
    overflow: visible;
}

section {
    width: min(100%, var(--content-max-width));
    margin: var(--section-gap) auto;
    overflow: visible;
}

/* LANDING STYLES */

.seclanding {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
}

.landingtext {
    width: min(100%, 366px);
    min-width: 0;
}

.landinglogo {
    width: min(100%, 263px);
    margin: 24px 0 0;
}

.landingtitle {
    width: 100%;
    margin-top: 48px;
}

#landingbutton {
    display: inline-block;
    margin-top: 48px;
    width: fit-content;
    height: fit-content;
    padding: 18px 36px 16px;
}

#landingpic {
    flex: 1 1 520px;
    width: 100%;
    min-height: 520px;
    background-image: url("../links/landingpic.cc236c4c2477.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    overflow: visible;
}

/* BIO STYLES */

#biodash {
    display: flex;
    align-items: stretch;
    gap: 36px;
    margin-top: 48px;
}

#biomain,
.formgroups {
    flex: 1 1 0;
    min-width: 0;
}

#biomain {
    min-height: 480px;
    padding: 33px 36px 36px;
}

#prepod {
    width: min(100%, 300px);
    margin-top: 36px;
}

#avatar {
    display: inline-block;
    width: 72px;
    height: 72px;
    vertical-align: middle;
    margin-right: 20px;
    background-image: url("../links/avatar_prepod.d9dda276f306.png");
    background-repeat: no-repeat;
    background-size: contain;
}

#prepodname {
    display: inline-block;
    width: calc(100% - 96px);
    vertical-align: middle;
}

#prepodcaption {
    margin-top: 12px;
}

.formgroups {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

#form,
#groups {
    min-height: 216px;
    padding: 33px 36px 36px;
    overflow: hidden;
}

#formttl,
#groupsttl {
    width: 157px;
}

#formpic {
    width: min(100%, 486px);
    height: 324px;
    top: -100px;
    left: min(30%, 180px);
    background-image: url("../links/form.2678e947ad1b.png");
}

#groupspic {
    width: min(100%, 515px);
    height: 407px;
    top: -80px;
    left: min(16%, 70px);
    background-image: url("../links/groups.b19dd3b2647d.png");
}

/* AGE STYLES */

.learnfit {
    margin: 60px 0;
}

.learnfit > h1 {
    max-width: 780px;
}

.ages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    margin: 48px auto 0;
}

.agetags {
    margin: 18px 0;
}

.tag {
    width: fit-content;
    padding: 0 12px 1px;
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 24px;
    font-weight: 600;
    border-radius: 20px;
}

p#textgreen {
    border: 1px solid #42A240;
    outline: 1px solid rgba(66, 162, 64, 0.50);
    color: #42A240;
}

p#textred {
    border: 1px solid #EF3E2D;
    outline: 1px solid rgba(239, 62, 45, 0.50);
    color: #EF3E2D;
}

p#textviolet {
    border: 1px solid #662D91;
    outline: 1px solid rgba(102, 45, 145, 0.50);
    color: #662D91;
}

p#textblue {
    border: 1px solid #008FCA;
    outline: 1px solid rgba(0, 143, 202, 0.50);
    color: #008FCA;
}

p#textyellow {
    border: 1px solid #FEBE10;
    outline: 1px solid rgba(254, 190, 16, 0.50);
    color: #FEBE10;
}

#child,
#school,
#adult {
    min-height: 228px;
    padding: 33px 36px 36px;
    overflow: hidden;
}

#childpic {
    width: 105px;
    height: 187px;
    top: -160px;
    left: clamp(110px, 38%, 125px);
    background-image: url("../links/child.93a30df46e59.png");
}

#schoolpic {
    width: 126px;
    height: 373px;
    top: -160px;
    left: clamp(96px, 34%, 110px);
    background-image: url("../links/school.e8c03409cdce.png");
}

#adultpic {
    width: 172px;
    height: 555px;
    top: -200px;
    left: clamp(72px, 28%, 100px);
    background-image: url("../links/adult.58e419c5e4e4.png");
}

/* COURSE STYLES */

#course1,
#course2,
#course3,
#course4 {
    width: 100%;
    min-height: 420px;
    padding: 36px;
}

.courses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-top: 48px;
}

#courseabout {
    margin: 36px 0;
    color: #909090;
}

.coursetags {
    width: 100%;
    max-width: 360px;
}

.tag2 {
    display: inline-block;
    vertical-align: top;
    width: fit-content;
    padding: 0 12px 1px;
    margin: 0 8px 12px 0;
    font-size: 12px;
    line-height: 24px;
    font-weight: 400;
    color: #FAFAFA;
    border-radius: 20px;
}

#tagred { background-color: #EF3E2D; }
#taggreen { background-color: #42A240; }
#tagblue { background-color: #008FCA; }
#tagviolet { background-color: #662D91; }
#tagyellow { background-color: #FEBE10; }

#thintext {
    font-weight: 500;
}

#course1pic,
#course2pic,
#course3pic,
#course4pic {
    top: -100px;
}

#course1pic {
    width: 152px;
    height: 111px;
    left: clamp(120px, 42%, 170px);
    background-image: url("../links/course1.a54ce46d75dc.svg");
}

#course2pic {
    width: 113px;
    height: 113px;
    left: clamp(140px, 44%, 180px);
    background-image: url("../links/course2.b1460a24436a.svg");
}

#course3pic {
    width: 113px;
    height: 113px;
    left: clamp(140px, 44%, 185px);
    background-image: url("../links/course3.197ebc84d115.png");
}

#course4pic {
    width: 130px;
    height: 119px;
    left: clamp(140px, 44%, 185px);
    background-image: url("../links/course4.830592369712.svg");
}

/* CONTACT STYLES */

#seccontact {
    display: flex;
    align-items: stretch;
    gap: 36px;
}

#map,
.contactinfo {
    flex: 1 1 0;
    min-width: 0;
}

#map {
    min-height: 564px;
    padding: 36px;
}

.contactinfo {
    min-height: 564px;
}

#map h1 {
    margin-bottom: 24px;
}

#map iframe {
    width: 100%;
    max-width: 100%;
    min-height: 340px;
    margin-top: 24px;
    border: 0;
    border-radius: 20px;
}

#contactabout {
    margin: 24px 0;
    color: #909090;
}

#phone,
#telegram,
#whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 24px 0 0;
    padding: 10px 14px;
    width: fit-content;
    height: fit-content;
}

.contactinfo h3 {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0;
}

.contactinfo .insidepic {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    min-height: 24px;
    margin: 0;
}

#phonepic {
    background-image: url("../links/phonepic.9e299bb39242.png");
}

#telegrampic {
    background-image: url("../links/telegrampic.779aaea241df.svg");
}

#whatsapppic {
    background-image: url("../links/whatsapppic.2399955ffd1f.svg");
}

/* FOOTER STYLES */

footer {
    min-height: 144px;
    margin: 72px auto 0;
    border-radius: 20px 20px 0 0;
    padding: 36px;
    background: #909090;
}

#footerlogo {
    width: 107px;
    height: 61px;
    background-image: url("../links/footerlogo.686fd6662d1a.svg");
}

/* TABLET */

@media (max-width: 1024px) {
    #nav {
        padding: 20px 24px;
    }

    .seclanding,
    #biodash,
    #seccontact {
        flex-direction: column;
    }

    .landingtext,
    #biomain,
    .formgroups,
    #map,
    .contactinfo {
        width: 100%;
    }

    #landingpic {
        min-height: 420px;
    }

    .ages,
    .courses {
        grid-template-columns: 1fr;
    }
}

/* MOBILE */

@media (max-width: 720px) {
    :root {
        --section-gap: 56px;
    }

    header,
    main,
    footer {
        width: min(calc(100% - 20px), var(--page-max-width));
    }

    #nav {
        padding: 18px 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    #nav ul {
        width: 100%;
        justify-content: flex-start;
        gap: 12px 18px;
    }

    li.nav {
        font-size: 14px;
        line-height: 20px;
    }

    section {
        width: 100%;
    }

    .landinglogo {
        margin-top: 8px;
    }

    .landingtitle,
    #landingbutton {
        margin-top: 32px;
    }

    #landingbutton {
        padding: 16px 20px 14px;
    }

    #landingpic {
        min-height: 280px;
    }

    #biomain,
    #form,
    #groups,
    #child,
    #school,
    #adult,
    #course1,
    #course2,
    #course3,
    #course4,
    #map {
        min-height: auto;
        padding: 24px 20px;
    }

    .formgroups {
        gap: 24px;
    }

    .learnfit {
        margin: 48px 0 0;
    }

    .ages,
    .courses {
        margin-top: 32px;
        gap: 20px;
    }

    #formttl,
    #groupsttl,
    .coursetags {
        max-width: 100%;
        width: 100%;
    }

    #formpic,
    #groupspic,
    #childpic,
    #schoolpic,
    #adultpic,
    #course1pic,
    #course2pic,
    #course3pic,
    #course4pic {
        position: static;
        width: 100%;
        max-width: 220px;
        height: 160px;
        margin: 20px auto 0;
    }

    #childpic,
    #schoolpic,
    #adultpic {
        height: 180px;
    }

    #map iframe {
        min-height: 280px;
    }

    .contactinfo {
        min-height: auto;
    }

    .contactinfo h3 {
        font-size: 14px;
        line-height: 20px;
    }

    footer {
        min-height: auto;
        padding: 28px 20px;
    }
}