/* Tableti u pejzažnom režimu i manji desktop uređaji */
@media (min-width: 1280px) and (max-width: 1659px) {

    /* Stilovi za tablete i manji desktop uređaji (od 769px do 1024px širine) */
    /* Stilizovanje navigacije */
    .navbar {
        display: flex;
        justify-content: space-between;
        padding: 30px;
        align-items: center;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        transition: padding 0.8s ease, background-color 0.8s ease;
    }

    .navbar .right {
        display: flex;
        font-family: "Reem Kufi", serif;
        font-size: 11px;
        width: 42.6%;
        font-weight: 400;
        text-transform: uppercase;
        align-items: center;
        justify-content: space-between;
        margin-right: 56px;
    }




}


/* Tableti u pejzažnom režimu i manji desktop uređaji */
@media (min-width: 1080px) and (max-width: 1279px) {

    /* Stilizovanje navigacije */
    .navbar .right {
        width: 60%;
    }

    .text-container {
        margin-left: 85px;
        width: 640px;
    }

    .mobile {
        display: none;
    }

}

/* Tableti u pejzažnom režimu i manji desktop uređaji */
@media (min-width: 900px) and (max-width: 1079px) {

    /* Stilizovanje navigacije */
    .navbar .right {
        display: none;
    }


    /* Full-screen block */
    .full-screen-block {
        background-image: url('../images/intro-1024.png');
        /* Put the path to your image here */
        background-size: cover;

        background-position: center;
        width: 100%;
        height: 100vh;
        /* Full viewport height */
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #2c99a8;
        animation: fadeIn 2s forwards;
        /* Animacija za fadeIn */
    }

    .text-container {
        margin-left: 85px;
        width: 640px;
        position: absolute;
        bottom: 17%;

    }

    .font-effect {
        font-family: 'Red Hat Display', sans-serif;
        font-size: 56px;
        font-weight: 100;
        text-align: left;
        transition: font-weight 0.1s ease;
        color: #ffffff;
    }

    .mini-text {
        position: absolute;
        font-size: 1.2em;
        margin-top: 20px;
        width: 76%;
        animation: fadeInText 4s ease-out forwards;
    }

    /* Full-screen block styling-tipografija */
    .unique-block {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: left;
        text-align: left;
        background-image: url('../images/w-are.png');
        /* Zameni sa pravom slikom */
        background-size: cover;
        background-position: center;
        height: 100vh;
        /* Puna visina ekrana */
        padding: 20px;
        /* Dodatni prostor unutar bloka */
    }

    .block {
        display: none;
    }

    .block-mobile {
        display: block;
        position: absolute;
        width: auto;
        height: auto;
        top: 40px;
        left: 80px;


    }

    .unique-content {
        max-width: 830px;
        color: rgb(255, 255, 255);
        margin-left: 7%;
        position: absolute;
        bottom: 6%;
    }

    .bottom-right-title-one {
        bottom: 10px;
        right: 10px;
        display: flex;
        font-weight: 300;
        color: rgb(255, 255, 255);
        font-size: 64px;
        text-align: right;
        margin: 0;
        height: 68px;
        padding: 0;
        justify-content: flex-start;
    }

    .bottom-right-title-one {
        bottom: 10px;
        right: 10px;
        display: flex;
        font-weight: 300;
        color: rgb(255, 255, 255);
        font-size: 34px;
        text-align: right;
        margin: 0;
        height: 48px;
        padding: 0;
        justify-content: flex-start;
    }

    .bottom-right-title {
        font-weight: 700;
        bottom: 10px;
        right: 10px;
        font-size: 34px;
        color: rgb(255, 255, 255);
    }

    .desctop {
        display: none;
    }

    .mobile {
        display: block;
    }

    .new-bg-image {
        display: none;
    }

    .new-bg-image-mobile {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Make image cover the full space */
        z-index: -1;
        /* Image goes behind text */
    }

    .new-left-text {
        position: absolute;
        z-index: 1;
        padding: 20px;
        color: white;
        margin-left: 7%;
        bottom: 14%;
    }

    .custom-block {
        display: none;
    }

    .custom-block-mobile {
        display: block;
        background-color: #000000;
        text-align: center;
        display: flex;
        width: 100%;
        height: 100vh;
        align-content: center;
        align-items: center;
        justify-content: space-between;
    }

    .img-app {
        background-image: url('../images/app-1024.png');
        /* Put the path to your image here */
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100vh;
        /* Full viewport height */
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #2c99a8;
        animation: fadeIn 2s forwards;
        /* Animacija za fadeIn */
    }

    .app-container {

        position: absolute;
        z-index: 1;
        padding: 20px;
        color: white;
        text-align: left;
        width: 65%;
        bottom: 1%;
        margin: 7%;
    }

    .app-container h1 {

        font-size: 2.5em;
        font-weight: bold;
        margin-bottom: 15px;
        max-width: 560px;
    }

    .new-bg-image-mobile {
        display: block;
        width: 100%;
    }

    .final-main-container {
        display: none;
    }

    .desctop {
        display: none;
    }
}

/* Tableti u pejzažnom režimu i manji desktop uređaji */
@media (min-width: 600px) and (max-width: 899px) {
    .full-screen-block {
        background-image: url('../images/intro-1024.png');
        /* Put the path to your image here */
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100vh;
        /* Full viewport height */
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #2c99a8;
        animation: fadeIn 2s forwards;
        /* Animacija za fadeIn */
    }

    .text-container {
        padding: 85px;
        padding-top: 85px;
        padding-right: 85px;
        padding-bottom: 0px;
        padding-left: 36px;
        width: 100%;
        margin-left: 0px;
        position: absolute;
        bottom: 17%;
    }

    .font-effect {
        font-family: 'Red Hat Display', sans-serif;
        font-size: 56px;
        font-weight: 100;
        text-align: left;
        transition: font-weight 0.1s ease;
        color: #ffffff;
    }

    .mini-text {
        position: absolute;
        font-size: 1.2em;
        margin-top: 20px;
        width: 76%;
        animation: fadeInText 4s ease-out forwards;
    }

    /* Full-screen block styling-tipografija */
    .unique-block {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: left;
        text-align: left;
        background-image: url('../images/w-are.png');
        /* Zameni sa pravom slikom */
        background-size: cover;
        background-position: center;
        height: 100vh;
        /* Puna visina ekrana */
        padding: 20px;
        /* Dodatni prostor unutar bloka */
    }

    .block {
        display: none;
    }

    .block-mobile {
        display: block;
        position: absolute;
        width: auto;
        height: auto;
        top: 40px;
        left: 80px;
    }

    .unique-content {
        max-width: 830px;
        color: rgb(255, 255, 255);
        margin-left: 3%;
        position: absolute;
        bottom: 0%;
    }

    .bottom-right-title-one {
        bottom: 10px;
        right: 10px;
        display: flex;
        font-weight: 300;
        color: rgb(255, 255, 255);
        font-size: 64px;
        text-align: right;
        margin: 0;
        height: 68px;
        padding: 0;
        justify-content: flex-start;
    }

    .bottom-right-title-one {
        bottom: 10px;
        right: 10px;
        display: flex;
        font-weight: 300;
        color: rgb(255, 255, 255);
        font-size: 34px;
        text-align: right;
        margin: 0;
        height: 48px;
        padding: 0;
        justify-content: flex-start;
    }

    .bottom-right-title {
        font-weight: 700;
        bottom: 10px;
        right: 10px;
        font-size: 34px;
        color: rgb(255, 255, 255);
    }

    .new-left-text {
        position: absolute;
        z-index: 1;
        padding: 20px;
        color: white;
        margin-left: 3%;
        bottom: 6%;
    }


    /* Stilizovanje navigacije */
    .navbar .right {
        display: none;
    }

    .navbar .left {
        display: flex;
        align-items: center;
        margin-left: 6px;
        position: relative;
    }

    .new-bg-image-mobile {
        display: block;
        width: 100%;
    }

    .final-main-container {
        display: none;
    }


    .font-mobile {
        display: block;
        width: 100%;
        height: 100vh;
        /* Full viewport height */
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #2c99a8;
        animation: fadeIn 2s forwards;
        /* Animacija za fadeIn */
    }


    .left-text-font-mobile {
        position: absolute;
        z-index: 1;
        padding: 20px;
        color: white;
        margin-left: 3%;
        bottom: 7%;

    }

    .background-font-mobile {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .left-text-font-mobile h1 {

        font-size: 2.5em;
        font-weight: bold;
        margin-bottom: 15px;
        max-width: 560px;
    }

    .header-block p {
        font-size: 16px;
        text-align: center;
        width: 100%;
    }

    .header-block h1 {
        font-size: 3rem;
        text-align: center;
        margin-bottom: 10px;
    }

    .small-black-block h2 {
        font-size: 1.8rem;
        font-weight: 300;
        margin: 0;
    }

    .small-black-block {
        background-color: black;
        color: white;
        padding: 20% 17%;
        font-weight: 300;
        background: url(../images/B.png) no-repeat center left / cover;
        text-align: center;
    }

    .contact-section {
        padding: 48px 50px;
        background-color: #05242d;
        text-align: center;
        color: #cdebf0;
        /* DISPLAY: flex; */
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;
        flex-direction: column;
    }

    .contact-section h1 {
        font-size: 24px;
        margin-bottom: 50px;
        font-weight: 300;
    }

    .contact-section p {
        font-size: 14px;
        font-weight: 300;
        margin: 0;
        margin-bottom: 14px;
    }

    .social {
        width: 30%;
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        text-align: center;
    }

    .social h1 {
        font-size: 14px;
        margin-bottom: 0px;
        margin-top: 12px;
        padding: 0;
        width: 100%;
    }

    .desctop {
        display: none;
    }

    .new-bg-image {
        display: none;
    }

    .mobile {
        display: block;
    }

    .custom-block {
        display: none;
    }

}

@media (min-width: 320px) and (max-width: 599px) {
    .full-screen-block {
        background-image: url('../images/intro-1024.png');
        /* Put the path to your image here */
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100vh;
        /* Full viewport height */
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #2c99a8;
        animation: fadeIn 2s forwards;
        /* Animacija za fadeIn */
    }

    .text-container {
        padding: 85px;
        padding-top: 85px;
        padding-right: 85px;
        padding-bottom: 0px;
        padding-left: 32px;
        width: 100%;
        margin-left: 0px;
        position: absolute;
        bottom: 26%;
    }

    .font-effect {
        font-family: 'Red Hat Display', sans-serif;
        font-size: 36px;
        font-weight: 100;
        text-align: left;
        transition: font-weight 0.1s ease;
        color: #ffffff;
    }

    .mini-text {

        position: absolute;
        font-size: 1em;
        margin-top: 20px;
        color: white;
        width: 76%;
        animation: fadeInText 4s ease-out forwards;

    }

    /* Full-screen block styling-tipografija */
    .unique-block {
        display: flex;
        position: relative;
        align-items: center;
        background-position: center -100px;
        justify-content: left;
        text-align: left;
        background-image: url(../images/w-are.png);
        background-size: cover;
        /* background-position: center; */
        background-repeat: no-repeat;
        /* height: 100%; */
        padding: 20px;
    }

    .block {
        display: none;
    }

    .block-mobile {
        display: block;
        position: absolute;
        width: auto;
        height: auto;
        top: 40px;
        left: 80px;
    }

    .unique-content {
        max-width: 830px;
        color: rgb(255, 255, 255);
        margin-left: 3%;
        position: absolute;
        bottom: 4%;
    }

    .unique-main-title {
        font-size: 1.6rem;
        font-weight: 700;
    }

    .unique-description {
        font-size: 14px;
        width: 95%;
        margin-top: 25px;
        line-height: 1.4;
    }

    .zoom-in-smooth.visible {
        opacity: 1;
        transform: none;
    }

    .bottom-right-title-one {
        bottom: 10px;
        right: 10px;
        display: flex;
        font-weight: 300;
        color: rgb(255, 255, 255);
        font-size: 64px;
        text-align: right;
        margin: 0;
        height: 68px;
        padding: 0;
        justify-content: flex-start;
    }

    .bottom-right-title-one {
        bottom: 10px;
        right: 10px;
        display: flex;
        font-weight: 300;
        color: rgb(255, 255, 255);
        font-size: 34px;
        text-align: right;
        margin: 0;
        height: 48px;
        padding: 0;
        justify-content: flex-start;
    }

    .bottom-right-title {
        font-weight: 700;
        bottom: 10px;
        right: 10px;
        font-size: 34px;
        color: rgb(255, 255, 255);
    }

    .new-left-text {
        position: absolute;
        z-index: 1;
        padding: 20px;
        color: white;
        margin-left: 3%;
        bottom: 6%;
    }


    /* Stilizovanje navigacije */
    .navbar .right {
        display: none;
    }

    .navbar .left {
        display: flex;
        align-items: center;
        margin-left: 6px;
        position: relative;
    }

    .new-bg-image-mobile {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;

        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
    }

    .final-main-container {
        display: none;
    }

    .new-left-text p {
        font-size: 14px;
        max-width: 460px;
    }

    .custom-block-mobile-app {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .new-main-container-mobile {
        display: block;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .font-mobile {
        display: block;
        width: 100%;
        height: 100vh;
        /* Full viewport height */
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #2c99a8;
        animation: fadeIn 2s forwards;
        /* Animacija za fadeIn */
    }


    .left-text-font-mobile {
        position: absolute;
        z-index: 1;
        padding: 20px;
        color: white;
        margin-left: 3%;
        bottom: 7%;

    }

    .background-font-mobile {
        display: block;;
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .left-text-font-mobile h1 {

        font-size: 2.5em;
        font-weight: bold;
        margin-bottom: 15px;
        max-width: 560px;
    }

    .header-block p {

        font-size: 14px;
        text-align: center;
        width: 100%;
    }

    .header-block h1 {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 10px;
    }

    .small-black-block h2 {
        font-size: 1.8rem;
        font-weight: 300;
        margin: 0;
    }

    .small-black-block {
        background-color: black;
        color: white;
        padding: 17% 7%;
        font-weight: 300;
        background: url(../images/B.png) no-repeat center left / cover;
        text-align: center;

    }

    .contact-section {
        padding: 48px 50px;
        background-color: #05242d;
        text-align: center;
        color: #cdebf0;
        /* DISPLAY: flex; */
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;
        flex-direction: column;
    }

    .contact-section h1 {
        font-size: 24px;
        margin-bottom: 50px;
        font-weight: 300;
    }

    .contact-section p {
        font-size: 14px;
        font-weight: 300;
        margin: 0;
        margin-bottom: 14px;
    }

    .new-left-text h1 {
        font-size: 1.8em;
        font-weight: bold;
        margin-bottom: 15px;
        max-width: 100%;
    }

    .main-section {
        padding: 25px;
        padding-top: 35px;
        padding-right: 25px;
        padding-bottom: 25px;
        padding-left: 25px;
    }

    .left-text-font-mobile p{
       font-size: 14px;
    }

    .left-text-font-mobile h1 {
        font-size: 1.8em;
        font-weight: bold;
        margin-bottom: 15px;
        max-width: 560px;
    }

    .social {
        width: 50%;
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        text-align: center;
    }

    .social h1 {
        font-size: 14px;
        margin-bottom: 0px;
        margin-top: 12px;
        padding: 0;
        width: 100%;
    }

    .desctop {
        display: none;
    }

    .new-bg-image {
        display: none;
    }

    .mobile {
        display: block;
    }

    .custom-block {
        display: none;
    }

    a{
        text-decoration: none; /* Uklanja podcrtavanje */
        color: inherit;   
      }
  

}