/* ::-webkit-scrollbar{
    display: none;
  }  */
/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: #d1495c;
    border-radius: none;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #d1495c;
    border-radius: 30px;
}

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

html {
    scroll-behavior: smooth;
}

@keyframes mymove {
    0% {
        transform: translate(0, 0px);
    }

    50% {
        transform: translate(0, 10px);
        opacity: 0.2;
    }

    100% {
        transform: translate(0, -0px);
    }

}

:root {
    --space-3xs: clamp(0.31rem, calc(0.31rem + 0vw), 0.31rem);
    --space-2xs: clamp(0.56rem, calc(0.54rem + 0.11vw), 0.63rem);
    --space-xs: clamp(0.88rem, calc(0.85rem + 0.11vw), 0.94rem);
    --space-s: clamp(1.13rem, calc(1.08rem + 0.21vw), 1.25rem);
    --space-m: clamp(1.69rem, calc(1.62rem + 0.32vw), 1.88rem);
    --space-l: clamp(2.25rem, calc(2.17rem + 0.42vw), 2.5rem);
    --space-xl: clamp(3.38rem, calc(3.25rem + 0.63vw), 3.75rem);
    --space-2xl: clamp(4.5rem, calc(4.33rem + 0.84vw), 5rem);
    --space-3xl: clamp(6.75rem, calc(6.5rem + 1.26vw), 7.5rem);
}

:root {
    --step--2: clamp(0.8rem, 0.9055rem + -0.1328vw, 0.8781rem);
    --step--1: clamp(0.9375rem, 0.9156rem + 0.1063vw, 1rem);
    --step-0: clamp(1rem, 0.9123rem + 0.4251vw, 1.25rem);
    --step-1: clamp(1.0669rem, 0.8931rem + 0.8427vw, 1.5625rem);
    --step-2: clamp(1.1388rem, 0.8532rem + 1.3847vw, 1.9531rem);
    --step-3: clamp(1.215rem, 0.785rem + 2.085vw, 2.4413rem);
    --step-4: clamp(1.2963rem, 0.6806rem + 2.9851vw, 3.0519rem);
    --step-5: clamp(1.3831rem, 0.5303rem + 4.135vw, 3.815rem);
}

:root {
    --red: #d1495c;
    --orange: #edad49;
    --blue3: #013d5b;
    --blue2: #31638e;
    --blue1: #00798b;
    --green: #03FCC9;
}

@font-face {
    font-family: Playfaire;
    src: url(/font/PlayfairDisplay-Bold.ttf);
    font-weight: bold;
}

@font-face {
    font-family: Playfaire;
    src: url(/font/PlayfairDisplay-Regular.ttf);
    font-weight: normal;
}

@font-face {
    font-family: Poppins-reg;
    src: url(/font/Poppins/Poppins-regular.ttf);
}

@font-face {
    font-family: Monst;
    src: url(/font/Montserrat/Montserrat-Bold.ttf);
    font-weight: light;
}

.hidden {
    display: none;
}

.body {
    min-height: 100vh;
    background: rgb(0, 121, 139);
    background: -moz-linear-gradient(157deg, rgba(0, 121, 139, 0.05663515406162467) 0%, rgba(3, 247, 198, 0.062237394957983194) 71%, rgba(1, 61, 91, 0.07904411764705888) 100%);
    background: -webkit-linear-gradient(157deg, rgba(0, 121, 139, 0.05663515406162467) 0%, rgba(3, 247, 198, 0.062237394957983194) 71%, rgba(1, 61, 91, 0.07904411764705888) 100%);
    background: linear-gradient(157deg, rgba(0, 121, 139, 0.05663515406162467) 0%, rgba(3, 247, 198, 0.062237394957983194) 71%, rgba(1, 61, 91, 0.07904411764705888) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00798b", endColorstr="#013d5b", GradientType=1);
}

p {
    font-family: poppins;
    font-size: var(--step-0);
    color: var(--blue3);
}

h1 {
    font-family: Playfaire;
    font-weight: bold;
    font-size: var(--step-0);
    color: var(--blue3);
    white-space: nowrap;
}

.nowrap {
    white-space: nowrap;
}

h2 {
    font-family: poppins;
    font-size: var(--step--1);
    color: var(--blue3);
}

nav {
    padding-left: clamp(var(--space-xs), 5%, var(--space-xl));
    padding-right: clamp(var(--space-xs), 5%, var(--space-xl));
    background-image: url(/img/svg/nav_top.svg);
    background-repeat: no-repeat;
    height: 20vh;
    min-width: 90vw;
    background-size: contain;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
}

.nav_container { 
    padding-top: var(--space-s);
    height: 20vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--blue3);
    font-family: Playfaire;
    
}

.nav_container_in {
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    cursor: pointer;
}

.nav_logo {
    height: clamp(var(--space-xs), 90%, var(--space-xl));
    margin-right: var(--space-s);
}

.nav_name {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-wrap: nowrap;
}

.MOB_menu {
    z-index: 2;
    position: absolute;
    width: 100%;
    padding-left: clamp(var(--space-xs), 5%, var(--space-xl));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: clamp(var(--space-xs), 5%, var(--space-xl));
}

.MOB_menu_list {
    z-index: 5;
    position: fixed;
    width: 100%;
    height: 120vh;
    top: 0px;
    right: 0px;
    background: rgba(255, 255, 255, 0.931);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding-left: clamp(var(--space-xs), 5%, var(--space-xl));
    padding-right: clamp(var(--space-xs), 5%, var(--space-xl));
    padding-top: clamp(var(--space-xs), 5%, var(--space-xl));
}

.habmurger {
    margin-right: clamp(var(--space-xs), 5%, var(--space-xl));
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    width: 55px;
    height: 10px;
    cursor: pointer;
    z-index: 2;
}

.line {
    width: 100%;
    height: 3px;
    border-radius: 60px;
    background-color: var(--orange);
    transition: all 0.8s;
}

.line:nth-child(1) {
    width: 45px;
}

.line:nth-child(2) {
    position: relative;

    width: 15px;
}

/*MENU IN*/
.habmurger_in {
    margin-right: clamp(var(--space-xs), 5%, var(--space-xl));
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 2;
    margin-top: var(--space-xs);
}

.line2 {
    width: 100%;
    height: 3px;
    border-radius: 60px;
    background-color: var(--orange);
    transition: all 0.8s;
}

.line2:nth-child(1) {
    width: 30px;
    transform: rotate(45deg) translate(2px);
}

.line2:nth-child(2) {
    position: relative;
    width: 30px;
    transform: rotate(-45deg)translate(2px);
}

.MOB_sluzby {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.MOB_sluzby_nadpis {
    color: #edad49;
    margin-top: var(--space-s);
   
    font-size: var(--step-5);
}

.MOB_sluzby_margin {
    padding-block: clamp(var(--space-xs), 5%, var(--space-xl));
}

.instagram_menu_in {
    width: 10%;
    cursor: pointer;
}




@media only screen and (min-width: 0px) and (max-width: 330px) and (orientation: portrait) {
    .menu_container {
        display: none;
    }

    nav {
        padding-left: clamp(var(--space-xs), 5%, var(--space-xl));
        padding-right: clamp(var(--space-xs), 5%, var(--space-xl));
        background-image: url(/img/svg/nav_top_mob.svg);
        background-repeat: no-repeat;
        height: 100px;
        background-size: contain;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        text-wrap: nowrap;
    }

    .nav_container {
        padding-top: var(--space-2xs);
        height: 90px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

    .nav_container img {
        height: var(--space-xl);

    }

}

@media only screen and (min-width: 0px) and (max-width: 570px) and (orientation: landscape) {
    .menu_container {
        display: none;
    }
.MOB_menu {
    z-index: 100;
    position: fixed;
    width: auto;
    right: 0px;
    display: flex;
    top: var(--space-s);
    flex-direction: column;
    align-items: flex-end;
    margin-right: clamp(var(--space-xs), 5%, var(--space-xl));
}
    nav {
        padding-left: clamp(var(--space-xs), 5%, var(--space-xl));
        padding-right: clamp(var(--space-xs), 5%, var(--space-xl));
        background-image: url(/img/svg/nav_top.svg);
        background-repeat: no-repeat;
        height: 90px;
        background-size: contain;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        text-wrap: nowrap;
    }

    .nav_container {
        padding-top: var(--space-2xs);
        height: 90px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

    .nav_container img {
        height: var(--space-xl);

    }
        .MOB_menu_list{
            padding-top: 0px;
        }
    .MOB_sluzby_row {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-evenly;
    }
.MOB_sluzby_margin{
    padding-block: clamp(var(--space-2xs), 1%, var(--space-l));
}
    h1 {
        font-family: Playfaire;
        font-weight: bold;
        font-size: auto;
        color: var(--blue3);
        white-space: nowrap;
    }

    h2 {
        font-family: poppins;
        font-size: auto;
        color: var(--blue3);
    }
}

@media only screen and (min-width: 331px) and (max-width: 450px) and (orientation: portrait) {
    .menu_container {
        display: none;
    }
.MOB_menu {
    z-index: 100;
    position: fixed;
    width: auto;
    right: 0px;
    display: flex;
    top: var(--space-s);
    flex-direction: column;
    align-items: flex-end;
    margin-right: clamp(var(--space-xs), 5%, var(--space-xl));
}
    nav {
        z-index: 100;
        position: fixed;
        padding-left: clamp(var(--space-xs), 5%, var(--space-xl));
        padding-right: clamp(var(--space-xs), 5%, var(--space-xl));
        background-image: url(/img/svg/nav_top_mob.svg);
        background-repeat: no-repeat;
        height: 150px;
        width: 100%;
        top: 0px;
        background-size: contain;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        white-space: nowrap;
    }

    .nav_container {
        padding-top: var(--space-2xs);
        height: 140px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        white-space: nowrap;
    }

    .nav_container img {
        height: var(--space-xl);

    }
    .section1{
        margin-top: var(--space-3xl);
    }
}

@media only screen and (min-width: 571px) and (max-width: 950px) and (orientation: landscape) {
    .menu_container {
        display: none;
    }
.MOB_menu {
    z-index: 100;
    position: fixed;
    width: auto;
    right: 0px;
    display: flex;
    top: var(--space-s);
    flex-direction: column;
    align-items: flex-end;
    margin-right: clamp(var(--space-xs), 5%, var(--space-xl));
}
    nav {
        padding-left: clamp(var(--space-xs), 5%, var(--space-xl));
        padding-right: clamp(var(--space-xs), 5%, var(--space-xl));
        background-image: url(/img/svg/nav_top.svg);
        background-repeat: no-repeat;
        height: 150px;
        min-width: 90vw;
        background-size: contain;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        text-wrap: nowrap;
    }

    .nav_container {
        padding-top: var(--space-2xs);
        height: 140px;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        text-wrap: nowrap;
    }

    .nav_container img {
        height: var(--space-xl);

    }

    .MOB_sluzby_row {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    h1 {
        font-family: Playfaire;
        font-weight: bold;
        font-size: auto;
        color: var(--blue3);
        text-wrap: nowrap;
    }

    h2 {
        font-family: poppins;
        font-size: auto;
        color: var(--blue3);
    }
        .MOB_menu_list {
            padding-top: 0px;
        }
}

@media only screen and (min-width: 451px) and (max-width: 900px) and (orientation: portrait) {
    .menu_container {
        display: none;
    }
.MOB_menu {
    z-index: 100;
    position: fixed;
    width: auto;
    right: 0px;
    display: flex;
    top: var(--space-s);
    flex-direction: column;
    align-items: flex-end;
    margin-right: clamp(var(--space-xs), 5%, var(--space-xl));
}
    nav {
        z-index: 5;
        position: fixed;
        padding-left: clamp(var(--space-xs), 5%, var(--space-xl));
        padding-right: clamp(var(--space-xs), 5%, var(--space-xl));
        background-image: url(/img/svg/nav_top_mob.svg);
        background-repeat: no-repeat;
        height: 150px;
        top: 0px;
        background-size: cover;
        background-position-y: -10vh;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        text-wrap: nowrap;
    }

    .nav_container {
        padding-top: var(--space-2xs);
        height: 140px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

    .nav_container img {
        height: var(--space-xl);

    }
}

@media only screen and (min-width: 951px) and (max-width: 1270px) and (orientation: landscape) {
    .menu_container {
        display: none;
    }
.MOB_menu {
    z-index: 100;
    position: fixed;
    width: auto;
    right: 0px;
    display: flex;
    top: var(--space-s);
    flex-direction: column;
    align-items: flex-end;
    margin-right: clamp(var(--space-xs), 5%, var(--space-xl));
}
    nav {
        z-index: 99;
        position: fixed;
        top: 0px;
        padding-left: clamp(var(--space-xs), 5%, var(--space-xl));
        padding-right: clamp(var(--space-xs), 5%, var(--space-xl));
        background-image: url(/img/svg/nav_top.svg);
        background-repeat: no-repeat;
        height: 150px;
        background-size: contain;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        text-wrap: nowrap;
    }

    .nav_container {
        padding-top: var(--space-2xs);
        height: 140px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

    .nav_container img {
        height: var(--space-xl);
    }

    .MOB_sluzby_row {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }
}

@media only screen and (min-width: 1271px) {
    .MOB_menu {
        display: none;
    }
    nav{
        top: 0px;
        height: 20vh;
    width: 100%;
        position: fixed;
    z-index: 100;
    }
    .menu_container {
        position: absolute;
        top: var(--space-l);
        right: clamp(var(--space-xs), 5%, var(--space-xl));
        width: auto;
        height: auto;
        background: rgba(255, 255, 255, 0.413);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
        border: 1px solid var(--green);
        border-radius: var(--space-s);
    }

    .nav_container img {
        max-height: var(--space-xl);

    }

    .PC_menu {
        height: var(--space-xl);
        display: flex;
        flex-direction: row;
        align-items: center;
        transition: 0.5s;
    }

    .PC_menu p {
        font-size: var(--step--3);
    }

    .PC_menu_sluzby {
        height: var(--space-xl);
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .PC_menu_sluzby p {
        color: var(--blue3);
        font-family: Poppins;
        transition: 0.5s;
        margin-left: var(--space-xs);
        margin-right: var(--space-2xs);
        cursor: pointer;
        font-size: var(--step--3);
    }

    .PC_menu_sluzby p:hover {
        color: var(--orange);
    }

    .PC_menu_sluzby img {
        height: 40%;
        cursor: pointer;
    }

    .PC_menu_sluzby_on_menu {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        margin-bottom: var(--space-xs);
        transition: 0.5s;
    }

    .PC_menu_sluzby_on_menu p:hover {
        color: var(--orange);
        transition: 0.5s;
    }

    .PC_menu a {
        text-decoration: none;
        color: var(--blue3);
        font-family: Poppins;
        transition: 0.5s;
        margin-inline: var(--space-xs);
    }

    .PC_menu p:hover {
        color: var(--orange);
        transition: 0.5s;
    }
}