.separation-ab1{
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("images/sustainability/2.jpg")
}


.separation-ab1{

    display: flex;
    flex-direction: column;
    align-items:center;
    padding-top: 57px;
    gap: 10px;
   width: 100%;
    height: 250px;
    margin-bottom: 30px;
}

.separation-ab1 .sepABNaslov{

    color: var(--text-color);
    font-size: 55px;
}

.separation-ab1 p{
    color: rgb(219, 219, 219);
   margin-top: 13px;
   font-size: 20px;
   
}






.activities{

  
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 30px;
    padding: 20px ;
    
    



}

.activity1{
    
    width: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #f9f9f9;
    padding: 20px;
   
}

.image-container{

      width: 100%;
     
      
}

.image-container img{
   max-width:100%;
   border-radius: 10px;
   
   
}

.activity-container-content{

    margin-top: 20px;



}

.activity-container-content h3{

    font-size: 25px;
    color: var(--text-color);


}
.activity-container-content p{
    color: var(--text-color);
    font-size: 18px;
}

.image-container .activity-slika2{

    height: 580px;

}

.image-container .activity-slika4{

    height: 575px;

}
.image-container .activity-slika5{

    width: 100%;
    height: 480px;


}
.image-container .activity-slika6{

     height: 480px;

}
.image-container .activity-slika7{

    height: 430px;
    

}

@media screen and (max-width:1440px) {

    .image-container .activity-slika4{
        height: 50vh;
        width: 100%;
    }
    .image-container .activity-slika2{
        height: 50vh;
    }
    .image-container .activity-slika5{
        width: 100%;
        height: 50vh;
    }
    .image-container .activity-slika6{
        height: 50vh;
   }
   .image-container .activity-slika7{
    height: 50vh;
     }
    .image-container .activity-slika8{
    height: 50vh;
     }
     
    
}

@media screen and (max-width:1024px) {
    
    .image-container .activity-slika4{
        height: 35vh;
    }
    .image-container .activity-slika2{
        height: 35vh;
    }
    .image-container .activity-slika5{
        width: 100%;
        height: 40vh;
    }
    .image-container .activity-slika6{
        height: 40vh;
   }
   .image-container .activity-slika7{
    height: 40vh;
     }
    .image-container .activity-slika8{
    height: 40vh;
     }

     .activity-container-content p{
    color: var(--text-color);
    font-size: 17px;
      }
    .activity-container-content h3{
    font-size: 25px;
    color: var(--text-color);
    }

    .separation-ab1 .sepABNaslov{
    color: var(--text-color);
    font-size: 55px;
     }

   .separation-ab1 p{
    color: rgb(219, 219, 219);
   margin-top: 13px;
   font-size: 15px;
   }   
 
}


@media only screen and (max-width: 768px){
    .activities{
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }
}

@media screen and (max-width:480px) {    
    .activities{
        grid-template-columns: repeat(1,1fr);
    }
    
     .image-container .activity-slika4{
            height: 35vh;
       }
     .image-container .activity-slika2{
            height: 34vh;
        }
     .image-container .activity-slika5{
            width: 100%;
            height: 35vh;
       }
    .image-container .activity-slika6{
            height: 35vh;
       }
    .image-container .activity-slika7{
        height: 35vh;
       }
     .image-container .activity-slika8{
        height: 35vh;
       }
     .activity-container-content p{
        color: var(--text-color);
        font-size: 15px;
       }
     .activity-container-content h3{
        font-size: 25px;
        color: var(--text-color);
       }
    
    .separation-ab1 .sepABNaslov{
        color: var(--text-color);
        font-size: 55px;
    }
    
    .separation-ab1 p{
        color: rgb(219, 219, 219);
       margin-top: 13px;
       font-size: 15px;
    }
}


@media only screen and (min-device-width: 390px) and (max-device-width: 393px) and (orientation: portrait){
     @supports (-webkit-touch-callout: none) {
   
    .image-container .activity-slika4{
        height: 30svh; 
    }
    .image-container .activity-slika2{
        height: 30svh;
    }
    .image-container .activity-slika5{
        width: 100%;
        height: 30svh;
    }
    .image-container .activity-slika6{
        height: 30svh;
    }
    .image-container .activity-slika7{
        height: 30svh;
    }
    .image-container .activity-slika8{
        height: 30svh;
    }
}
}