* {
    margin: 0 ;
    font-family: sans-serif;
}

header img {
    width: 100%;
    padding: 0;
}

nav li{
    text-decoration: none;
    background-color: white;
    gap: 3px;
    margin-right: 20px;
    list-style-type: none;
    color: rgb(44, 44, 102);
    padding-bottom: 20px;
    padding-top: 20px;
}

nav {
    display: flex;
    justify-content: center;
    align-content: center;
    align-self: center;
}

nav ul {
    text-decoration: none;
}

nav a {
    text-decoration: none;
    color: #275070;
    font-weight: bolder;
    transition: 0.3s text-decoration;
}

nav a:hover {
    text-decoration: underline;
}

section {
    background-color: #d1e2ef;
    border-top: 1px solid #3b79a9;
}


.mreza1 {
    display: grid;
      
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 0.5fr 2fr 1fr;
    
    height: 500px;
      
}

.dio1 {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    padding-left: 50px;
}

.dio1 a {
    text-decoration: none;
    color: #79a93b;
    transition: 0.3s text-decoration;
}

.dio1 a:hover {
    text-decoration: underline;
}
.aside1 {
    grid-column: 5 / 6;
    grid-row: 1 / 5;
    background-color: #3b79a9;
    height: 500px;
}

.img1 {
   grid-column: 4 / 5;
   grid-row: 1 / 3;
   width: 300px;
   justify-self: end;
   padding: 60px;
   transition: 0.3s width;
}

.img1:hover {
    width: 350px;
}

.naslov1 {
    padding-left: 50px;
    grid-row: 1 / 3;
    grid-column: 1 / 3;
    padding-top: 30px;
    font-size: 20px;
    color: #275070;
}

h2 {
    padding-bottom: 20px;
    color: #275070;
}

.aside1 ul {
    flex-direction: column;
    background-color: #3b79a9;
}

.aside1 ul li {
    background-color: #3b79a9;
}


.aside1 h2  {
    text-align: center;
    padding-top: 10px;
    color: white;
}

footer {
    background-color: #275070;
    text-align: center;
    padding: 17.5px;
    color: white;
}

footer a {
    color: #79a93b;
    text-decoration: none;
    transition: 0.3s text-decoration;
}

footer a:hover {
    text-decoration: underline;
}
/* karte */ 

.mreza2 {
    display: grid;
    grid-template-columns: 1fr 3fr; 
    gap: 20px; 
    align-items: start;
}

.aside2 {
    grid-column: 1 / 2; 
    grid-row: 1 / 5;
    background-color: #3b79a9;
    padding: 20px;
}

.article2 {
    grid-column: 2 / 3; 
    display: flex;
    flex-direction: column; 
    gap: 20px; 
}


.slike {
    display: flex; 
    gap: 20px; 
}

.slike img {
    width: 340px; 
    height: 340px;
    padding-top: 30px;
    transition: 0.3s width;
}

.slike img:hover {
    width: 450px;
}

.aside2 {
    background-color: #3b79a9;
    height: 530px;
}

.aside2 ul li {
    background-color: #3b79a9;
}

.aside2 h2  {
    text-align: center;
    padding-top: 10px;
    color: white;
}

.naslov2 {
    font-size: 25px;
    padding-top: 20px;
    padding-left: 20px;
    color: #275070;
}

.article2 h2 {
    color: #275070;
    padding-left: 20px;
}

nav {
    position: relative;
}

.menu-btn {
    display: none; 
    font-size: 30px;
    color: #275070;
    cursor: pointer;
    padding: 10px;
    position: absolute;
    top: 10px;
    left: 10px;
}

#toggle {
    display: none; 
}

.linkovi {
    display: flex;
    list-style-type: none;
    gap: 20px;
    justify-content: center;
}

@media (max-width: 900px) {
    .menu-btn {
        display: block; 
    }

    .linkovi {
        display: none;
        flex-direction: column; 
        gap: 10px;
        background-color: #d1e2ef;
        width: 100%;
        padding: 10px;
        position: absolute;
        top: 50px;
        left: 0;
        z-index: 10;
    }

    #toggle:checked + .menu-btn + .linkovi {
        display: flex; 
    }


        .naslov1 {
            font-size: 24px;
            color: #275070;
            text-align: center;
            padding: 20px;
        }
    
        .mreza1 {
            display: flex;
            flex-direction: column;
            height: auto;
        }

        .img1 {
            width: 300px; 
            height: auto; 
            display: block; 
            margin: 0 auto;
        }
    
        .dio1 {
            padding: 10px;
            text-align: center; 
        }
    
        .dio1 p {
            font-size: 16px;
            color: #333;
            margin-bottom: 20px; 
        }
    
        .aside1 {
            display: block; 
            width: auto; 
            background-color: #3b79a9;
            color: white;
            padding: 10px;
            text-align: center;
            height: auto;
        }
    
        .aside1 ul {
            padding: 0;
            list-style-type: none;
            text-align: center;
        }
    
        .aside1 h2 {
            color: white;
            padding-bottom: 10px;
        }
    
        footer {
            background-color: #275070;
            color: white;
            text-align: center;
            padding: 15px;
        }
    
        footer a {
            color: #79a93b;
            text-decoration: none;
        }

        .mreza2 {
            display: block; 
            padding: 0px;
        }
    
        .aside2 {
            height: auto;
            padding: 30px;
        }
    
        .aside2 ul {
            padding: 0;
            list-style: none;
            text-align: center;
        }
    
        .aside2 h2 {
            color: #fff;
            text-align: center;
            margin-bottom: 5px;
        }
    
        .article2 {
            height: 1300px; 
        }
    
        .naslov2 {
            color: #275070;
            margin-bottom: 20px;
        }
    
        .slike {
            width: 250px;
            height: 250px;
            margin-top: 10px;
            margin-left: auto;
            margin-right: auto;
            display: block;
            padding: 0;
        }
    
        footer {
            text-align: center;
            padding: 15px;
            background-color: #275070;
            color: white;
        }
    
        footer a {
            color: #79a93b;
        }
}