/* Snazil jsem se pojmenovavat tridami ktere nejlepe specifikuji kde na strance jsou */
/* css pro celou stranku */

body {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f8f8;
}

.navbar:hover {
    transition: all 0.3s;
    background-color: #c62538 !important;
}


.content {
    width: 100%;
}

/* CSS PRO PRVNI sekci */
.landing {
    width: 100%;
    height: 750px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    z-index: 5;
    background-image: url(../imgs/pozadiback.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.LandingLeft {
    width: 50%;
    height: 100%;
    color: white;
    padding-top: 400px;
    padding-left: 50px;
}


.LandingLeft h1 {
    font-family: Staatliches, Arial, Helvetica, sans-serif;
    font-size: 100px;
}


.LandingLeft p {
    font-family: Poppins, Arial, Helvetica, sans-serif;
    font-size: 20px;
    padding-bottom: 20px;
}

.landing1 {
    background-color: rgb(112, 19, 19);
    color: white;
    font-family: Poppins, Arial, Helvetica, sans-serif;
    font-size: 20px;
    padding: 10px 25px 10px 25px;
}

.landing1:hover {
    background-color: rgb(165, 47, 47);
}


.landing2 {
    border: 1px snow solid;
    color: snow;
    font-family: Poppins, Arial, Helvetica, sans-serif;
    font-size: 20px;
    padding: 10px 25px 10px 25px;
    margin-left: 10px;
}

.landing2:hover {
    background-color: rgb(37, 37, 37);
    color: white;
    border: 1px snow solid;
}



.landingRight {
    width: 50%;
    height: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* animace v landing sekci */
.landingRight img {
    animation: bounce2 2s ease infinite;
}
  @keyframes bounce2 {
      0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
      40% {transform: translateY(-30px);}
      60% {transform: translateY(-30px);}
}


/* nastaveni sirky pro rozliseni vyssi nez 1920 - lze odzoomnout bez niceni elementu*/
.width90 {
    width: 90%;
    max-width: 1800px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-self: center;
    justify-self: center;
    z-index: 2;
}

/*css pro druhou sekci popis*/

.popis {
    height: 600px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popisLeft {
    background: #e9e0dc;
    flex: 2 1;
    height: 100%;
    margin-right: 5px;
    z-index: 2;
    border-radius: 0 0 0 20px;
    box-shadow: 0px 15px 40px rgb(240, 240, 240);
}

.popisLeftUp {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.popisUpBorderBottom {
    border-bottom: 1px solid #3d3d3d ;
    width: 95%;
    align-self: center;
    justify-self: center;
    margin-top: -10px;
}

.popisLeftUp p:nth-of-type(1) {
    font-size: 50px;
    font-family: Staatliches, Arial, Helvetica, sans-serif;
    margin: 0;
    margin-left: 20px;
    color: rgb(27, 27, 27);
}

.popisLeftUp p:nth-of-type(2) {
    font-size: 25px;
    font-family: Poppins, Arial, Helvetica, sans-serif;
    margin: 0;
    margin-left: 50px;
    color: green;
    font-weight: bold;
}

.popisLeftDown {
    padding-top: 30px;
    width: 100%;
    height: 430px;
}

.popisLeftDown p {
    font-family: Poppins, Arial, Helvetica, sans-serif;
    padding-left: 25px;
    padding-right: 100px;
    font-size: 20px;
}

.popisLeftButton {
    width: 100%;
    height: 70px;
}

.popisLeftButton button {
    background-color: rgb(19, 179, 32);
    color: rgb(255, 255, 255);
    font-family: Poppins, Arial, Helvetica, sans-serif;
    font-size: 20px;
    padding: 10px 25px 10px 25px;
    border-radius: 40px;
    border: none;
    transition: all 0.3s ease;
    float: right;
    margin-right: 50px;
}

/* css pro microsekci - pozadavky */
.popisRight {
    background: #e9e0dc;
    flex: 1 1;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 20px 0;
}

.popisPointNadpis {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
}

.popisPointNadpis p {
    font-size: 50px;
    align-items: center;
    font-family: Staatliches, Arial, Helvetica, sans-serif;
    margin: 0;
    padding-left: 20px;
    margin-top: 10px;
}

.popisPoint {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 20px;
}

.popisPoint img {
    user-select: none;
}

.popisPoint p {
    font-family: Poppins, Arial, Helvetica, sans-serif;
    margin: 0;
    margin-left: 10px;
    font-size: 20px;
}

/* css pro sekci 3 - cards */

.cards {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 600px;
    width: 100%;
    padding: 0 80px 0 80px;
}


.card {
    background-color: white;
    height: 500px;
    width: 350px;
    box-shadow: 0px 0px 15px rgb(121, 121, 121);
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    transition: all 0.5s ease;
}

.cardTopText {
    width: 100%;
    padding: 20px;
    height: 100px;
    font-family: Staatliches, Arial, Helvetica, sans-serif;
}

.card img {
    position: absolute;
    top: 3%;
    left: 75%;
}

.cardTopText h2 {
    font-size: 40px;
}

.cardBottomText {
    margin-left: 20px;
    margin-right: 20px;
    height: 400px;
}

.cardBottomText p {
    font-size: 25px;
    font-family: Poppins, Arial, Helvetica, sans-serif;
}

/* animace highlight na kartickach */
.card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(0deg,
            transparent,
            transparent 30%,
            rgba(0, 0, 0, 0.1));
    transform: rotate(-45deg);
    transition: all 0.8s ease;
    opacity: 0;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(83, 83, 83, 0.5);
}

.card:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(100%);
}

/* css pro sekci 4 - nase prace */

.nasePrace {
    width: 100%;
    height: 400px;
    margin-bottom: 30px;
}

.nasePraceUp {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nasePraceUp h2 {
    font-size: 40px;
    font-family: Staatliches, Arial, Helvetica, sans-serif;
    margin: 0;
}

.nasePraceDown {
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
}

.nasePraceDown div {
    position: relative;
}

.praceCard1 {
    position: relative;
    height: 300px;
    width: 500px;
    background-image: url(../imgs/naseprace/ukazkaeshopu.png);
    background-repeat: no-repeat;
    background-size: cover;
    font-family: Staatliches, Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: brightness(0.3);
    transition: 0.5s;
}

.praceCardNadpis {
    font-family: Staatliches, Arial, Helvetica, sans-serif;
    position: absolute;
    top: 0;
    padding-top: 100px;
    z-index: 1;
    font-size: 60px;
    -webkit-text-stroke: 1px black;
    -webkit-text-fill-color: white;
    width: 100%;
    height: 100%;
    text-align: center;
    margin-top: auto;
    pointer-events: none;
}


.praceCard2 {
    position: relative;
    height: 300px;
    width: 500px;
    background-image: url(../imgs/naseprace/ukazkawebu.png);
    background-repeat: no-repeat;
    background-size: cover;
    font-family: Staatliches, Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: brightness(0.3);
    transition: 0.5s;
}


.praceCard3 {
    position: relative;
    height: 300px;
    width: 500px;
    background-image: url(../imgs/naseprace/tymy.png);
    background-repeat: no-repeat;
    background-size: cover;
    font-family: Staatliches, Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: brightness(0.3);
    transition: 0.5s;
}

.praceCard1:hover,
.praceCard2:hover,
.praceCard3:hover {
    filter: brightness(0.8);
    transition: 0.5s;
}


/* css pro sekci 5 - formular */

.form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 90%;
    padding-bottom: 40px;
    border-radius: 40px;
    background-color: #e9e0dc;
    margin-bottom: 50px;
    box-shadow: 0px 15px 40px rgb(240, 240, 240);
}


.formNadpis {
    font-family: Staatliches, Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: rgb(27, 27, 27);
    padding-top: 20px;
    width: 100%;
    padding-left: 50px;
}

.formNadpis p {
    font-family: Poppins, Arial, Helvetica, sans-serif;
}

.formContent {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.formUpRow {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    height: 50px;
    margin-left: 50px;
}

.formUpRow input:nth-of-type(2),
.formUpRow input:nth-of-type(3) {
    margin-left: 20px;
}

.formUpRow input {
    width: 400px;
    height: 40px;
    border: 5px solid rgb(218, 97, 107);
    border-radius: 40px;
    background-color: unset;
    color: white;
    font-family: Poppins, Arial, Helvetica, sans-serif;
    transition: 0.3s;
    padding: 20px;
}

.formUpRow input:hover {
    border-color: rgb(114, 33, 40);
    transition: 0.3s;
    color: white;
}

.formDownRow {
    padding-top: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.formDownRow textarea {
    margin-left: 50px;
    margin-right: 50px;
    width: 100%;
    height: 500px;
    border: 5px solid rgb(218, 97, 107);
    border-radius: 40px;
    background-color: unset;
    color: rgb(15, 15, 15);
    font-family: Poppins, Arial, Helvetica, sans-serif;
    transition: border-color 0.3s;
    padding: 20px;
}

.formDownRow textarea:hover {
    border-color: rgb(114, 33, 40);
    transition: border-color 0.3s;
    color: white;
}

.form textarea::placeholder,
.form input::placeholder {
    color: rgb(80, 78, 78);
    font-family: Poppins, Arial, Helvetica, sans-serif;
    font-size: 20px;
}

.form button {
    margin-top: 20px;
    background-color: rgb(153, 40, 40);
    color: rgb(255, 255, 255);
    font-family: Poppins, Arial, Helvetica, sans-serif;
    font-size: 20px;
    padding: 10px 25px 10px 25px;
    border-radius: 40px;
    border: none;
    transition: all 0.3s ease;
    float: right;
    margin-right: 50px;
}

.form button:hover {
    background-color: rgb(14, 146, 91);
    color: rgb(255, 255, 255);
    box-shadow: 0 0 20px rgba(10, 116, 75, 0.5);
    transition: all 0.3s ease;
}

/* ---------------------------------------------------- RESPONTIVITA --------------------------------------- */
/* Odstraneni boku w90 od 1200px */
@media (max-width: 1200px) {
    .width90 {
        width: 100%;
    }
}

/* Responzivita sekce - Landing */

@media (max-width: 1620px) {
    .LandingLeft h1 {
    font-size: 80px;
}
}

@media (max-width: 1300px) {
    .landingRight {
        display: none;
    }

    .LandingLeft {
        width: 100%;
    }
}

@media (max-width: 800px) {
    .LandingLeft {
        padding-left: 0;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .landingLeft p {
        font-size: 15px;
    }
}

@media (max-width: 680px) {
    .LandingLeft h1 {
        font-size: 60px;
    }
}

@media (max-width: 400px) {
    .landing1,
    .landing2 {
        font-size: 15px;
    }
}

/* Responzivita sekce - popis */

@media (max-width: 1300px) {
    .popisLeftUp p:nth-of-type(1) {
        font-size: 40px;
    }
    .popisLeftUp p:nth-of-type(2) {
        font-size: 20px;
    }
}

@media (max-width: 1200px) {
    .popis {
        flex-direction: column;
        height: auto;
    }

    .popisLeft {
        margin: 0;
        border-radius: 0px;
    }

    .popisRight {
        border-radius: 0px;
        width: 100%;
        padding-bottom: 20px;
    }
}

@media (max-width: 700px) {
    .popisLeftDown p {
    font-family: Poppins, Arial, Helvetica, sans-serif;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 20px;
}
}

@media (max-width: 640px) {
    .popisLeftUp p:nth-of-type(1) {
        font-size: 30px;
    }
    .popisLeftUp p:nth-of-type(2) {
        font-size: 15px;
    }
}

@media (max-width: 600px) {
    .popisLeftDown p {
        font-family: Poppins, Arial, Helvetica, sans-serif;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 17px;
    }
}

@media (max-width: 550px) {
    .popisPointNadpis {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .popisLeftButton {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .popisLeftButton button {
        margin: 0;
    }
}

@media (max-width: 500px) {
    .popisLeftUp p:nth-of-type(1) {
        font-size: 25px;
    }
    .popisLeftUp p:nth-of-type(2) {
        font-size: 13px;
        margin-left: 10px;
    }

    .popisPointNadpis p {
        font-size: 30px;
    }
}

@media (max-width: 440px) {
    .popisPoint p {
        font-size: 16px;
    }

    .popisLeftDown p {
        font-family: Poppins, Arial, Helvetica, sans-serif;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 14px;
    }

    .popisLeftUp{
        flex-direction: column;
    }

    .popisLeftUp p:nth-of-type(1) {
        font-size: 25px;
        margin-top: 20px;
    }
}

/* Responzivita sekce Cards */

@media (max-width: 1800px) {
    .cards {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 600px;
        width: 100%;
        padding: 0 0px 0 0px;
    }

    .card {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media (max-width: 1450px) {
    .cardBottomText p {
        font-size: 20px;
    }
}

@media (max-width: 960px) {
    .cards {
        flex-direction: column;
        height: auto;
    }
    .card {
        height: 250px;
        width: 80%;
        margin-top: 20px;
    }
}

@media (max-width: 600px) {
    .card {
        height: 300px;
    }
}

@media (max-width: 500px) {
    .card {
        height: 400px;
    }
}

/* Responzivita sekce nase prace */

@media (max-width: 1700px) {
    .nasePraceDown {
        justify-content: center;
        flex-direction: column;
        height: auto;
    }

    .nasePraceDown a {
        margin-top: 10px;
    }

    .nasePrace {
        height: auto;
        margin-top: 20px;
    }
}

@media (max-width: 600px) {
    .nasePraceDown a {
    width: 90%;
    }
}

/* responzivita sekce Formular */

@media (max-width: 1040px) {
    .formUpRow input {
        width: auto;
    }
}

@media (max-width: 700px) {
    .formUpRow {
        flex-direction: column;
        height: auto;
        margin: 0;
        margin-top: 20px;
    }

    .formUpRow input {
        margin: 0;
        margin-top: 10px;
    }

    #email {
        margin-top: 20px;
    }

    .formUpRow input:nth-of-type(2) { 
        margin: 0;
    }
}


@media (max-width: 370px) {
    .formDownRow textarea {
        margin-left: 20px;
        margin-right: 20px;
    }
}