/* https://www.frontendmentor.io/ */


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

body {
    font-family: "Anta", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    border: none;
    background-color: #3e3e3e;
}


.slika1 {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100px;
    width: 100vw;
    background-color: orange;
    color: #303030;
    padding-left: 0.5rem;
    text-align: center;
    background-image: url("./img/crta2.png");
    background-repeat: repeat-x;
    z-index: 100;
}


.jurilica {
    display: inline-block;
    margin-left: 4rem;
    padding-top: 1rem;
    z-index: 10;
    opacity: 0;
}

.jurilica img {
    filter:drop-shadow(10px 6px 8px white);
}

.carlito {
    text-align: center;
    text-wrap: nowrap;
    font-family: "Anta", sans-serif;
    font-size: 4rem;
    justify-self: center;
    padding-left: 1rem;
    place-self: center;
    opacity: 0;
}

.telefon {
    transform: translateY(-1.5rem);
    margin: 0 auto;
    padding-left: 1rem;
    opacity: 0;
}
.slogan {
    position:fixed;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    background-color: #303030;
    color: orange;
    font-size: 0.8rem;
    text-align: center;
    margin: 0 auto;
    padding: 0 auto 1rem auto;
    z-index: 90;
    background: rgb(48,48,48);
    background: linear-gradient(180deg, rgba(48,48,48,1) 0%, rgba(48,48,48,0.4822129535407913) 100%); 
}
.slika2 {
    height: 65px;
    width: 100vw;
    background-color: orange;
    color: #303030;
    text-align: center;
    background-image: url("./img/crta2.png");
    background-repeat: repeat-x;
    background-position: bottom;
    z-index: 100;
}


.istaka {
    color: #fff;
    filter: drop-shadow(3px 3px 3px orange);
}


.kontejner {
    width: 100vw;
}

.wrapko {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    width: 100vw;
    background-color: #3e3e3e;
    gap: 0.5rem;
    padding-top: 0.5rem;
    margin: 1rem auto 1rem auto;
}

.wrapko1 {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    width: 100vw;
    background-color: #3e3e3e;
    height: 100%;
    padding-bottom: 1rem;
}

.wrapko2 {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    width: 100vw;
    height: 100%;
    padding-bottom: 1rem;
}

.kucica {
    background-color: #303030;
    width: 100%;
    min-width: 300px;
    margin: 1rem auto;
    color: #fff;
    border: 1px solid orange;
    border-top: none;
    border-bottom: none;
    border-radius: 1.5rem;
    font-family: "Anta", sans-serif;
    font-size: large;
}

.kucica1, .kucica2, .kucica3 {
    width: 90vw;
    margin-bottom: 2rem;
}

.kucica1, .kucica2 {
    height: 95%;
}

.kucica4 {
    display: grid;
    grid-template-columns: 1fr;
    background-color: #303030;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    color: #fff;
    font-family: "Anta", sans-serif;
    font-size: large;

}

.kucica .kuca-naslov {
    width: 90%;
    text-align: center;
    margin: 1.5rem auto;
    align-self: flex-start;
}


.kuca-naslov h1{

    font-size: 2.5rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
    margin-top: 1rem;
    filter: drop-shadow(3px 3px 3px orange);
    
}

.kuca-text {
    width: 60%;
    padding: 1.5rem;
    color: orange;
    background-color: #303030;
    border: 1px solid orange;
    font-size: 1.2rem;
    text-align: left;
    border-radius: 0.5rem;
    margin: 1.8rem auto;
    box-shadow: 1px 1px 13px silver;
    min-width: 250px;
    align-self: flex-start;
}

.kucica4 .kuca-text {
    width: 90%;
    text-align: center;
    margin: 1.8rem auto;
    min-width: 250px;
}


.kuca-more {
    width: 80%;
    margin: 1.5rem auto;
    font-size: 2rem;
    text-align: center;
    align-self: flex-start;
}


.noviBot {
    
    font-family: "Anta", sans-serif; 
    font-size: 2rem;
    padding: 0.5rem 0.8rem;
    color: orange;
    border-radius: 1rem;
    margin: 2rem auto;
    
}

.noviBot a {
    width: 100vw;
    height: 100%;
    padding: 0.5rem 0.8rem;
    font-size: 1.7rem;
    color: silver;
    border: 2px solid #e3e3e3;
    border-right: 2px solid #979797;
    border-bottom: 2px solid #979797;
    border-radius: 1.1rem;

}

.noviBot a:link {
    text-decoration: none;
}

.noviBot a img {
    transform: translateY(2px);
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.noviBot a:hover {
background-color: #252525;
}
/* Form ----------------------------------------------- */
form{
    margin: 15px 5px;

  }

form label{
    display: block;
    margin-bottom: 0;
    margin-top: 1rem;
}

form button {
    display: block;
    margin-top: 2rem;
    margin-bottom: 2rem;
    background-color:#333;
    font-size: 90%;
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: white;
    cursor: pointer;
}


form button:hover, form button:focus{
    background-image: url(img/wappIco40.png);
    background-repeat: no-repeat;
    background-position: 100%;
    
}

  form input, form textarea{
    width: 100%;
    padding: 5px;
    margin-bottom: 10px;
    box-sizing: border-box;
    resize: vertical;
    font-size: 1.2rem;
    background-color: #333;
    color: orange;
    font-family: inherit;
  }

  form .ifAirport {
    font-size: 75%;
  }


/* Form ------------KRAJ ------ */
.fromairport {
    color: orange;
    text-align: center;
    font-size: 1.2rem;
    background-color: #575151;
    width: 80%;
    margin: 0 auto;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.cijene {
    width: 100vw;
    margin: 1rem auto;
}

.cijene table {
    width: 90vw;
    margin: 0 auto;
    padding: 2rem;
    font-size: large;
    border: 1px solid orange;
    border-radius: 0.5rem;
    color: orange;
}

.tablehead {
    color: orange;
    background-color: #303030;
}
.cijene table td {
    padding: 0.5rem;
    padding-left: 1rem;
}

.redred:hover {
    background-color: #303030;

}

.carlito2 {
    font-size: 1rem;
}

.spektar {
    display: none;
    color: silver; 
    font-size: 36px; 
}
.boja1 {
    background-color: #FEB062;
    color: #303030;
}
.boja2 {
    background-color: #575151;
}
.boja3 {
    background-color: #2B2B2B;
}
.boja4 {
    background-color: #131313;
}

/*    ---------------------------------------------  media queries  ----------------------------------------------------------------   */

@media only screen and (min-width: 1200px) { 
    .wrapko {
        grid-template-columns: 1fr 1fr;
    } 
    
    .kucica1, .kucica2, .kucica3 {
        width: 90%;
        font-size: medium;
        align-items: start;
    }

    .kucica3 {
        width: 95%;
    }
    .red{
        grid-column: 3 / 4;
    }
    .kucica4 {
        grid-template-columns: 1fr;
        font-size: medium;
    }
    .kucica4 .kuca-text {
        width: 95%;
    }

}


@media only screen and (min-width: 1000px) and (max-width: 1200px) { /* ------ min 800 max 1200  -------   */

    .wrapko {
        grid-template-columns: 1fr 1fr;
        justify-content: center;
    } 
    .kucica1, .kucica2 {
        width: 90%;
    }
    .kucica3 {
        width: 95%;
    }
    .kucica4 {
        width: 100%;
    }
    .red{
        grid-column: 1 / 3;
    }
    .kucica4 {
        grid-template-columns: 1fr;
        padding-right: 1.5rem;
    }
    .cijene table {
        width: 95vw;
    }
}

@media only screen and (min-width: 530px) { /* ------ min 530  -------   */
    .telefon {
        font-size: 130%;
        transform: translateY(-1.6rem);
    }



}


@media only screen and (max-width: 530px) { /* ------ max 530  -------   */
    .carlito {
            font-size: 3rem;
    }
    .jurilica {
        margin-left: 3rem;
    }


}

@media only screen and (max-width: 440px) { /* ------ max 440  -------   */

    .jurilica {
        transform: translate( -20px);
    }
    .cijene table td {
        padding: 0;
        padding-left: 0.5rem;
        font-size: 80%;
    }
    .cijene table {
        width: 100vw;
        padding: 0.5rem;
    }

}
@media only screen and (max-width: 380px) { /* ------ max 380  -------   */

    .jurilica {
        transform: translateX(-30px);
        
    }
    .cijene table {
        width: 100vw;
     }
     .kuca-naslov h1 {
        font-size: 2rem;
    }
}

@media only screen and (max-width: 320px) { /* ------ max 320  -------   */

    .slika1 {
        display: grid;
        grid-template-columns: 1fr;
        padding-left: 0;
    }
    .telefon {
        margin: 0.5rem auto;
    }
    
    .kucica {
        place-content: center;
    } 

    .kucica .kuca-naslov{

        margin: 0 auto;
    }

    .kucica .kuca-text {
  
        margin: 1.5rem auto;
    }

    .kucica .kuca-more {

        margin: 1rem auto;
    }

    .jurilica {
        display: none;   
    }

}
/*    ---------------------------------------------  media queries  KRAJ ----------------------   */