@media (orientation: landscape){
    .uvodnaOnama{
        height: 100vh;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%), lightgray 50% / cover no-repeat;
        background-position: center;
    }

    .title p{ /* Ovo bi trebalo u style.css ali tu sam stavio za sad pa ti dodaj */
        color: #FFF
    }
}

@media (orientation: portrait){
    .uvodnaOnama{
        height: 100vh;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%), url("/img/KontaktHero.JPG"), lightgray 50% / cover no-repeat;
        background-position: center;
        background-size: cover;
    }

    .title h2{
        color:#FFF;
    }
    
    .title p{ /* Ovo bi trebalo u style.css ali tu sam stavio za sad pa ti dodaj */
        color: #FFF;
    }
}

@media(orientation: landscape){
    h2{
        margin-top: 5vw;
        font-size: 4vw;
        color: #29434E;
        text-align: center;
        font-family: Montserrat;
    }
    
    p{
        font-family: Karla;
        font-size: 2.5vw;
        font-weight: 300;
        margin: 0 10vw;
        text-align: center;
    }
    
    .ikone{
        display: flex;
        width: 100%;
        height: 40vw;
        margin: auto auto;  
        background-color: #7b9eb5;
        margin-top: 5vh;
        margin-bottom: 5vh;
        padding: 0 10vw;
        padding-bottom: 5vw;
    }
    
    .ikone div{
        position: relative;
        border-radius: 50%;
        background-color: #DCC4A9;
        height: 15vw;
        width: 15vw;
        margin: auto;
    }
    
    .ikone img{
        position: absolute;
        top: 3.5vw;
        left: 3.5vw;
        margin: auto;
        width: 8vw;
        height: 8vw;
    }
    
    .ikone h3{
        position: absolute;
        font-size: 2vw;
        font-family: Montserrat;
        text-transform: capitalize;
        color: #FFF;
        top: 17vw;
        width: 100%;
        text-align: center;
    }
    
    .gallery{
        position: relative;
        width: 100%;
        height: 40vw;
        margin: auto auto;
        margin-top: 5vh;
        margin-bottom: 5vh;
    }

    .track{
        display: flex;
        flex-direction: row;
        gap: 10vw;
        width: 765vw;
        position: absolute;
        left: 25vw;
        height: 35vw;

    }

    .track img{
        width: 50vw;
        height: 33.33vw;
        object-fit: cover;
        object-position: center;
    }

    .sliderSS{
        position: absolute;
        top: 38vw;
        left: 20vw;
        width: 60vw;
        height: 1vw;
        margin: auto;
        background-color: #8198A1;
        border-radius: 0.5vw;
    }

    .sliderSS div{
        position: absolute;
        top: 0;
        left: 0vw;
        width: 12vw;
        height: 1vw;
        background-color: #2A444F;
        border-radius: 0.5vw;
        z-index: 1;
    }
  
    .sobe{
        width: 100%;
        height: 40vw;
        margin: auto auto;  
        margin-top: 5vh;
        margin-bottom: 5vh;
    }
    /**/
    .sobe-container{
        border-radius: 5vw;
        background-color: #F0DBC4;
        width: 90%;
        height: 40vw;
        margin: auto;
        padding: 5vw;
    }

    .room img{
        border-radius: 3vw;
        margin: auto auto;
        height: 20vw;
        width: auto;
        margin: 5vw 0;
    }

    .svgB svg{
        height: 4vw;
        width: 4vw;
    }

    .room h3{
        color: #29434E;
        font-weight: 600;
    }

    .h31{
        margin-top: 8vw;
    }

    .h32{
        margin-top: 4vw;
    }

    .h33{
        margin-top: 8vw;
    }

    .room li{
        font-weight: 300;
        list-style-type: none;
        color: #29434E;
        font-size: 1.5vw;
        font-family: Karla;
    }
    
    .wellness{
        margin-top: 10vh;
    }

    .wellness img{
        width: 58.33vw;
    }
    
    .wellness p{
        margin: 0 5vw;
    }
    
    .onamabutton{
        margin: auto;
        margin-top: 5vh;
        width: 15vw;
        height: 7.5vh;
        background-color: #dcc4a9;
        border-radius: 70px;
        border: 4px solid;
        border-color: #29434e;
        font-family: "Montserrat-Medium", Helvetica;
        font-weight: 300;
        color: #29434e;
        font-size: 1.5vw;
    }
    
    .onamabutton:active{
        transform: scale(0.95);
    }
}

@media(orientation: portrait){
    h2{
        font-family: Montserrat;
        color: #29434E;
        font-size: 5vw;
        text-align: center;
        margin-top: 5vw;
    }
    
    p{
        font-family: Karla;
        font-size: 3.5vw;
        font-weight: 300;
        margin: 0 10vw;
        text-align: center;
    }
    
    .ikone{
        display: flex;
        width: 100%;
        height: 40vw;
        margin: auto auto;  
        background-color: #7b9eb5;
        margin-top: 5vh;
        margin-bottom: 5vh;
        padding: 0 10vw;
        padding-bottom: 5vw;
    }
    
    .ikone div{
        position: relative;
        border-radius: 50%;
        background-color: #DCC4A9;
        height: 15vw;
        width: 15vw;
        margin: auto;
    }
    
    .ikone img{
        position: absolute;
        top: 3.5vw;
        left: 3.5vw;
        margin: auto;
        width: 8vw;
        height: 8vw;
    }
    
    .ikone h3{
        position: absolute;
        width: 100%;
        font-size: 2vw;
        font-family: Montserrat;
        text-transform: capitalize;
        color: #FFF;
        top: 17vw;
        text-align: center;
    }
    
    .gallery{
        position: relative;
        width: 100%;
        height: 40vw;
        margin: auto auto;  
        margin-top: 5vh;
        margin-bottom: 5vh;
    }

    .track{
        display: flex;
        flex-direction: row;
        gap: 10vw;
        width: 765vw;
        position: absolute;
        left: 25vw;
        height: 35vw;

    }

    .track img{
        width: 50vw;
        height: 33.33vw;
        object-fit: cover;
        object-position: center;
    }

    .sliderSS{
        position: absolute;
        top: 38vw;
        left: 20vw;
        width: 60vw;
        height: 1vw;
        margin: auto;
        background-color: #8198A1;
        border-radius: 0.5vw;
    }

    .sliderSS div{
        position: absolute;
        top: 0;
        left: 0vw;
        width: 12vw;
        height: 1vw;
        background-color: #2A444F;
        border-radius: 0.5vw;
        z-index: 1;
    }
    
    .sobe{
        width: 100%;
        height: 40vw;
        margin: auto auto;  
        margin-top: 5vh;
        margin-bottom: 5vh;
    }

    .sobe-container{
        background-color: #F0DBC4;
        width: 100%;
        height: 40vw;
        margin: auto;
        padding: 5vw;
    }

    .room img{
        border-radius: 3vw;
        margin: auto auto;
        height: 25vw;
        width: auto;
        margin: 5vw 0;
    }

    .svgB svg{
        height: 4vw;
        width: 4vw;
    }

    .room h3{
        color: #29434E;
        font-weight: 600;
        font-size: 3vw;
    }

    .h31{
        margin-top: 8vw;
    }

    .h32{
        margin-top: 0;
    }

    .h33{
        margin: 4vw;
    }

    .room li{
        font-weight: 300;
        line-height: normal;
        list-style-type: none;
        color: #29434E;
        font-size: 2.5vw;
        font-family: Karla;
    }

    .wellness{
        margin-top: 5vh;
    }
    
    .wellness img{
        width: 58.33vw;
    }
    
    .wellness p{
        margin: 0 2vw;
        font-size: 3vw;
    }
    
    .onamabutton{
        margin: auto;
        margin-top: 5vh;
        width: 35vw;
        height: 12vw;
        background-color: #dcc4a9;
        border-radius: 70px;
        border: 4px solid;
        border-color: #29434e;
        font-family: "Montserrat-Medium", Helvetica;
        font-weight: 300;
        color: #29434e;
        font-size: 4vw;
    }
    
    .onamabutton:active{
        transform: scale(0.95);
    }
}