#nav {
    display: flex;
    padding-top: var(--gap-m, 1rem);
    padding-bottom: var(--gap-m, 1rem);
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.navigation {
    display: flex;
    gap: var(--gap-l);
}

.menu {
    display: flex;
    align-items: center;
    gap: var(--gap-l);
}

.menuItem {
    display: flex;
    padding: var(--gap-m);
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 1.5rem */

    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

a .menuItem:hover {
    color: var(--greenLight);
}

.menuItemSpecial {
    display: flex;
    padding: var(--gap-m);
    justify-content: center;
    align-items: center;
    gap: 0.625rem;

    border-radius: var(--radisu-m);
    background: var(--white200);

    color: var(--greenLight);
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 1.5rem */
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

a .menuItemSpecial:hover {
    color: var(--white);
    background-color: var(--white200hover);
}

.flagContainer {
    display: flex;
    width: var(--itemHeight-s, 3rem);
    height: var(--itemHeight-s, 3rem);
    justify-content: center;
    align-items: center;
    gap: 0.625rem;

}

.hamburger {
    display: none;
    cursor: pointer;
}

.topMapContainer {
    display: flex;
    padding-bottom: var(--gap-xxl, 2.5rem);
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    flex: 1 0 0;
    align-self: stretch;
}

.topMap {
    display: flex;
    max-width: 115rem;
    padding-top: 10rem;
    padding-bottom: 10rem;
    justify-content: center;
    align-items: center;
    align-self: stretch;

    border-radius: var(--Radius-radisu-l, 2rem);
    background-image: linear-gradient(270deg, rgba(2, 19, 21, 0.92), rgba(2, 19, 21, 0.50)), url(imgs/topMap.webp);
    background-size: cover;
    background-position: center;
}

.topMapText {
    display: flex;
    max-width: 32.5rem;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.textContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xxl, 2.5rem);
    flex: 1 0 0;
    justify-content: center;
}

.textContainerLeft {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--gap-xxl, 2.5rem);
    flex: 1 0 0;
    max-width: 37.5rem;
    align-self: auto;
}

.topMapContent {
    display: flex;
    max-width: 77.5rem;
    justify-content: center;
    align-items: center;
    gap: 7.5rem;
    flex: 1 0 0;
    
}

.topMap .l {
    color: var(--white400);
}

.img{
    max-width: 37.5rem;
    max-height: 40.25rem;
    width: 100%;
    height: auto;
}


.topBtns {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 1rem var(--gap-m, 1rem);
    align-self: stretch;
    flex-wrap: wrap;
}

.btnPrimary {
    display: flex;
    padding: var(--Gaps-gap-l, 1.5rem);
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: var(--radisu-m, 1rem);
    background: var(--Colors-green, #2F8178);
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

a .btnPrimary:hover {
    background-color: #47A399;
}

.btnSecondary {
    display: flex;
    color: var(--green);
    padding: var(--gap-l, 1.5rem);
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: var(--Radius-radisu-m, 1rem);
    background: var(--Colors-white-500, #FFF);
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

a .btnSecondary:hover {
    background-color: #D7F2EF;
}

/*-----------------------Listen-----------------------*/

#listen {
    gap: var(--gap-big);
    display: flex;
    flex-direction: column;
}

.storiesCenter {
    margin: 0 auto;
}

.listenScrollArea {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-big, 4rem);
    align-self: stretch;
    overflow: auto;
    padding-bottom: var(--gap-l);
}

.listenText {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap-m, 1rem);
    align-self: stretch;
    text-align: center;
}

.listenText p {
    color: var(--greenLight);
}

audio {
    width: 100%;
    display: block;
}

.listenStories {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-xl, 2rem);
}

.storyCard {
    display: flex;
    width: 26.125rem;
    height: 40.125rem;
    padding: var(--gap-l, 1.5rem);
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    border-radius: var(--radisu-l, 2rem);
}

.storyCardImg1 {
    background: linear-gradient(0deg, rgba(2, 19, 21, 0.90) 0%, rgba(2, 19, 21, 0.00) 73.36%), url(stories/story1.webp), lightgray 50%;
    background-position: center;
    background-size: cover;
}

.storyCardImg2 {
    background: linear-gradient(0deg, rgba(2, 19, 21, 0.90) 0%, rgba(2, 19, 21, 0.00) 73.36%), url(stories/story2.webp), lightgray 50%;
    background-position: center;
    background-size: cover;
}

.storyCardImg3 {
    background: linear-gradient(0deg, rgba(2, 19, 21, 0.90) 0%, rgba(2, 19, 21, 0.00) 73.36%), url(stories/story3.webp), lightgray 50%;
    background-position: center;
    background-size: cover;
}

.storyCardImg4 {
    background: linear-gradient(0deg, rgba(2, 19, 21, 0.90) 0%, rgba(2, 19, 21, 0.00) 73.36%), url(stories/story4.webp), lightgray 50%;
    background-position: center;
    background-size: cover;
}

.storyContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-xl, 2rem);
    align-self: stretch;
    overflow: visible;
}

/*-----------------------About-----------------------*/

#about .m {
    color: var(--white400);
}

.aboutBox {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7.5rem;
    align-self: stretch;
}

.aboutBoxContent {
    display: flex;
    max-width: 82.5rem;
    justify-content: center;
    align-items: center;
    gap: 7.5rem;
    flex: 1 0 0;
}

/*-----------------------Footer-----------------------*/

#footer {
    background-color: var(--bcg-light);
}

#download {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap-big, 4rem);
    align-self: stretch;
}

.appIcon {
    width: 7.5rem;
    height: 7.5rem;
}

.downloadText {
    display: flex;
    padding: 0rem 1.125rem;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xs, 0.5rem);
    align-self: stretch;
    text-align: center;
}

.downloadText .m {
    color: var(--white400);
}

.storeBtns {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 1rem var(--gap-m, 1rem);
    align-self: stretch;
    flex-wrap: wrap;
}

.footerContainer {
    display: flex;
    padding-top: var(--gap-xxl, 2.5rem);
    padding-bottom: var(--gap-xxl, 2.5rem);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
}

#footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    border-radius: var(--radisu-l, 2rem);
}

.textContainerFoot {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xxl);
}

#contact {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7.5rem;
    align-self: stretch;
}

.contactContent {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0;
    gap: var(--gap-s);
}

.mail {
    display: flex;
    align-items: center;
    gap: var(--Gaps-gap-m, 1rem);
}

#contact a{
    color: var(--greenLight);
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

#contact a:hover{
    color: var(--white500);
}

.socials {
    display: flex;
    align-items: center;
    gap: var(--gap-m, 1rem);
}

.socialIcon {
    display: flex;
    padding: var(--gap-xxl, 2.5rem);
    align-items: center;
    border-radius: var(--Radius-radisu-l, 2rem);
    background: var(--Colors-white-200, rgba(255, 255, 255, 0.12));
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

a .socialIcon:hover {
    background-color: var(--white200hover);
}

.copy {
    display: flex;
    padding-top: var(--gap-xxl, 2.5rem);
    padding-bottom: var(--gap-xxl, 2.5rem);
    align-items: center;
    align-self: stretch;
    border-top: 1px solid var(--white100, rgba(255, 255, 255, 0.06));
}

.lawLink {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--gap-xxl, 2.5rem);
    flex: 1 0 0;
    color: var(--greenLight);
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

.lawLink a{
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

.lawLink :hover {
    color: var(--white500);
}

/*-----------------------StoreBtn-----------------------*/

.storeBtnText {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: -0.375rem;
}

.textStoreBtnSmall {
    color: var(--white-500, #FFF);
    font-family: Poppins;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 1.125rem */
}

.textStoreBtnBig {
    color: var(--white-500, #FFF);
    font-family: Poppins;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 2.2rem */
}

.storeBtn {
    padding: 0;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    width: 14.75rem;
}

/*-----------------------Martasova animace-----------------------*/

.scrollAnim {
    opacity: 0;
    transition: all 0.6s ease-in-out;
    transform: translateY(60px);
}

.scrollAnim-show {
    opacity: 1;
    transform: translateY(0);
}

.scrollAnimImg {
    opacity: 0;
    transition: all 0.6s ease-in-out;
    transition-delay: 400ms;
    scale: 80%;
}

.scrollAnimImg-show {
    opacity: 1;
    scale: 100%;
}