@font-face {
    font-family: orbitron;
    src: url("Orbitron-Black.ttf");
}
@font-face {
    font-family: arvo;
    src: url("Arvo-Regular.ttf");
}

html {
    scroll-behavior: smooth;
}
body {
    margin: 0px;
    padding: 0px;
    
}



    .okvirZaglavlje {
     
     max-width: 1500px;
     margin: 0px auto;
        height: 250px;
        background-image: linear-gradient( rgba(70, 185, 179, 0.637), rgba(0, 1, 2, 0.7)), url("kodiranje2.jpg");
         background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        
        
    }

    .logo {
        width: 300px;
        height:200px;
        
    }

/* OSNOVNI DIO STRANICE */

.sekcijaOpcenito {
    margin: 30px 0px;
    padding: 20px 0px;
   
    max-width: 1500px;
     margin: 0px auto;
   background-color: rgba(128, 128, 128, 0.137);
}
.okvirNaslovaSekcije {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
}
.naslovSekcije {
    font-family: orbitron;
   color: green;

   font-size: 20px;
   
}
.crtaIspodNaslovaSekcije {
    height: 1px;
    border: none;
    background-color: red;
    width: 155px;
    margin-top: -5px;
}
.okvirPrviRed {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  
    align-items: center;
    
}
.okvirPrviElement {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
   
}
.prviElementSlika {
    width: 350px;
    height: 250px;
    background-image: linear-gradient( rgba(70, 185, 179, 0.637), rgba(0, 1, 2, 0.7)), url("domena2.jpg");
    background-position: top center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    border-radius: 10px;
    margin-top: 50px;
}
.drugiElementSlika {
    
    background-image: linear-gradient( rgba(70, 185, 179, 0.637), rgba(0, 1, 2, 0.7)), url("hosting.jpg");
  
}
.treciElementSlika{
    background-image: linear-gradient( rgba(70, 185, 179, 0.637), rgba(0, 1, 2, 0.7)), url("kodiranje3.jpg");
}
.cetvrtiElementSlika{
    background-image: linear-gradient( rgba(70, 185, 179, 0.637), rgba(0, 1, 2, 0.7)), url("vrijeme.jpg");
}
.naslovSlike {
    color: white;
    letter-spacing: 5px;
    padding-bottom: 10px;
    font-size: 18px;
}
.paragraf {
    font-family: arvo;
   font-style: italic;
    
    max-width: 1500px;
     margin: 30px auto 0px auto;
    padding: 15px;
    text-align: justify;
    
    font-size: 14px;
}
/* CJENIK */
.okvirCjenikaUsluga {
    /* width: 50vw;*/
     max-width: 1500px;
     margin: 50px auto;
     background-color: rgba(0, 255, 255, 0.246);
     
 }
 
 
 .naslovCjenikUsluga {
     font-family: arvo;
     margin-top: 5rem;
     text-align: center;
     text-decoration:  underline;
 }
 .naslovCjenikUsluga {
    font-size: 20px;
 }
 .okvirElementCjenik {    
     display: flex;
     justify-content: space-around;
     
 }
 .okvirElementCjenik:nth-child(even){
     background-color: rgba(0, 0, 255, 0.082);
 }
 .elementCjenikNaziv, .elementCjenikCijena {
     font-family: arvo;
     width: 250px;
     text-align: center;
     margin: 15px 0px;
     font-size: 15px;
     font-weight: bold;
     font-style: italic;
 }
/* KONTAKT */
.okvirPrviRedKontakt {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
   
}
.okvirDrugiElementKontakt {
    margin-top: 100px;
    display: flex;
    text-align: center;
}

.okvirAdresaKontakt {
    padding-left: 15vw;
}
.ikonaMail, .ikonaAdresa {
    padding-bottom: 10px;
    width: 50px;
    height: auto;
}

.poveznicaMailKontakt {
    text-decoration: none;
    color: #000;
    font-size: 16px;
}

.poveznicaMailKontakt:hover {
    color: blue;
    
}
.tekstOpisKontaktAdresa {
    font-size: 16px;
}
.karta {
    width: 350px;
    height: 250px;
}
/* PODNOŽJE */
.glavniOkvirPodnozja {
   
    max-width: 1500px;
     margin: 0px auto;
    height: 250px;
    

    
    background-image: linear-gradient( rgba(70, 185, 179, 0.812), rgba(0, 1, 2, 0.891));
   
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 14px;
}
.okvirPrvogElementaPodnozja {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    
    text-align: justify;
}
.tekstElementaPodnozje {
    margin-bottom: 6px;
}
.poveznicaPodnozje {
    text-decoration: none;
    color: white;
    
}
.okvirBivart {
    text-align: center;
   /* display: flex;
    flex-direction: column;*/
}
.mailPodnozjePoveznica {
    text-decoration: none;
    color: white;
}























@media screen and (min-width: 650px){
    .logo {
        
        
        width: 350px;
        height:250px;
       
    }
       

         /* OSNOVNI DIO STRANICE */
         .naslovSekcije {
            
           font-size: 25px;
           
        }
        .crtaIspodNaslovaSekcije {
            
            width: 250px;
            
        }
        .prviElementSlika {
            width: 450px;
            height: 350px;
            
           /* margin-top: -150px;*/
        }
        
        .paragraf {
                      
            font-size: 16px;
        }
        .naslovCjenikUsluga {
            font-size: 25px;
         }
         .elementCjenikNaziv, .elementCjenikCijena {
            
            font-size: 17px;
            
        }
        .karta {
            width: 450px;
            height: 350px;
        }
        .ikonaMail, .ikonaAdresa {
            
            width: 70px;
            
        }
        .glavniOkvirPodnozja {
               
           
            font-size: 16px;
        }

}

@media screen and (min-width: 1200px){

    .okvirZaglavlje {
            
           height: 350px;
      
           
       }
    .logo {
        
        
        width: 450px;
        height:300px;
       
    }
    

         /* OSNOVNI DIO STRANICE */
         .naslovSekcije {
            margin-top: 150px;
           font-size: 35px;
           
        }
        .crtaIspodNaslovaSekcije {
            margin: 10px 0px 100px 0px;
            width: 450px;
            
        }
        .okvirPrviRed {
            margin-top: 50px;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
            
        }
        .prviElementSlika {
            margin-top: 50px;
        }
        .paragraf {
            padding: 25px;         
            font-size: 20px;
           
            
           
        }
        .okvirPrviElement{
            justify-content: flex-start;
           height: 900px;
        }
        .naslovCjenikUsluga {
            font-size: 30px;
         }
         .elementCjenikNaziv, .elementCjenikCijena {
            width: 300px;
            font-size: 22px;
            
        }
        .karta {
            width: 850px;
            height: 550px;
        }
        .ikonaMail, .ikonaAdresa {
            
            width: 100px;
            
        }
        .poveznicaMailKontakt {
            
            font-size: 20px;
        }
        .tekstOpisKontaktAdresa {
            font-size: 20px;
        }
        .glavniOkvirPodnozja {
               
           
            font-size: 20px;
        }

}