/* dodano */

.spacing {
    margin-top: 6vmin;
    color: #00000000;
}

/* pru odstavk more met en "lepX" k ni večji od 100%, drugac ne preskoc u drugo vrstico k se ekran zmansa */
.lep1 {
    font-weight: bold;
    color: #00ADEF;

}
.lep2 {
    font-size: 110%;
    font-weight: bold;
    font-style: italic;
    color: #85014e;

}
.lep3 {  /* Na meji da boli gledat, za RES pomembn shit */ 
    font-size: 110%;
    font-weight: bold;
    color: black;
    background-color: #fef100;

}
.lep4 {
    font-size: 110%;
    text-decoration: underline;
    color: #cfc500;
}
.logo {
    width: 100%; /* Ensure the image scales with the parent element */
    max-width: 40vmin; /* Set a maximum width */
    height: auto; /* Maintain aspect ratio */
    min-width: 10vmin; /* Set a minimum width */
    margin: 0;
    padding: 0;
}


/* univerzalno (body, header, footer */
header{
    background: linear-gradient(30deg, #85014e, #780c8d, #00b7ff);
    width: 98vw;
    height: 30vmin;
    flex-direction: column;
}
body{
    font-family: 'Oswald', sans-serif;
    margin: 0;
    background-attachment: fixed;
    background-image: url("./slike/BG.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 150%;
    color: black;
    display: flex;
    flex-direction: column;
    /* default velikost besedila */
    font-size: 4vmin;
}
a{
    text-decoration: none;
    color: black;
    font-weight: bold;
}
a:visited{
    color: black;
}
.naslov_strani{
    /* font-size: 7vmin; */
    /* text-align: left; */
    margin-left: 5vw;
    /* margin-bottom: 1vmin; */
}
@keyframes fleks {
    0% {color: #026288;}
    50% {color: #00ADEF;}
    100% {color: #026288;}
  }

#fleks{
    font-size: 3vmin;
    margin: 1vmin;
    padding: 1vmin;
    float: right;
    background-color: black;
    color: #cc0202;
    border-radius: .9vmin;
    animation-name: fleks;
    animation-duration: 2s;
    animation-direction: reverse;
    animation-iteration-count: infinite;
}

/* animacije za gife ig */
#gif1 {
    background-image: url('./slike/home_spritesheet.png');
}
#gif2 {
    background-image: url('./slike/handshake_spritesheet.png');
}
#gif3 {
    background-image: url('./slike/speech_bubble_spritesheet.png');
}
#gif4 {
    background-image: url('./slike/phone_contact_spritesheet.png');
    
}

@keyframes animiran_gumb {
    0% { background-position: 0 0; }
    100% { background-position: -500% -500%; }
}

#gif1, #gif2, #gif3, #gif4 {
    background-size: 500%; /* Adjusts to show one frame at a time */
    background-position: 0 0;
    overflow: hidden;
    animation: animiran_gumb 1.0s steps(5) infinite;
    height: 10vmin;
    width: 10vmin;
    animation-play-state: paused;
    display: flex;
    margin: auto;
}


#text1, #text2, #text3, #text4{
    margin-left: 1vw;
    font-size: 5vmin;
}


#header_table{
    font-size: 4vmin;
    width: 95vw;
    text-align: center;
}

footer {
    padding-top: 1vmin;
    padding-bottom: 1vmin;
    background-color: #00abefc9;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 5;
}
.footer-menu{
    list-style-type: none; /* Remove bullet points */
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default padding */
    text-align: center; /* Center the list items horizontally */
}

.footer-menu li {
    display: inline-block; /* Display list items in a single line */
    margin: 0 10px; /* Add some spacing between the list items */
}

.footer-menu a {
    text-decoration: none; /* Remove underline from links */
    color: black; /* Set the text color */
    background-color: #00000000;
}

.footer-menu a:hover {
    color: #00ADEF; /* Change color on hover */
    background-color: #a40fc2da;
}
.absolute_chad{
    font-style: italic;
    font-size: 1.5vmin;
    color: #cacacac0;
    background-color: #00000000;
}
.absolute_chad:hover{
    font-size: 1.5vmin;
    color: #cacacac0;
    background-color: #00000000;
}

/* Domov stran. Za pozicioniranje raj upras klepeta, on bo bl znou... pa BACKUP!!! */
.besedilo{
    color: white;
    flex: 1; /* Allow the text div to take full width when wrapped */
    box-sizing: border-box;
}

#levi_napis{
    float: left;
    height: auto;
    background-color: #fef1009d;
    color: white;
    font-size: 3.3vmin;
    margin-top: 4vmin;
    padding: 1.5vmin;
    margin-right: 2vmin;
    flex: 0 0 20vmin;
}

#container{
    background-color: #000000b9;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0;
    margin-top: 2vmin;
    padding: 2vmin;
}


#content2, .drugi_odstavki{
    text-align: center;
    color: white;
    background-color: #000000b9;
    margin-top: 0;
}

.drugi_odstavki{
    padding-bottom: 7vmin;
}


#pixel-density-measure {
    width: 1cm;
    height: 1cm;
    position: absolute;
    top: -100%;
    left: -100%;
    visibility: hidden;
}


/* Ponudba */
#ponudba{
    margin-left: 1vmin;
    margin-right: 1vmin;
    text-align: center;
    font-size: 2.9vmin;
    border: 0.1em dashed #00ADEF;
    background-color: #000000e5;
    color: white;
}

.ime_izdelka{
    font-style: italic; /* Da vidmo */
    margin: 0;
    padding: 0;
    margin-top: 2.5vmin;
    color: white;
    font-size: 7vmin;
}

/* Povpraševanje */

form{
    margin-top: 2vmin;
    padding-top: 2vmin;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20%;
    padding-right: 20%;
    background-color: #000000b9;
    color: white;
    text-align: center;
}
label{
    font-size: 3.5vmin;
}

input[type="text"], input[type="email"], input[type="password"], textarea {
    border: 0.1em dashed #00ADEF;
    background-color: black; /* Set the background color to black */
    color: white; /* Set the text color to white */
    font-size: 3.3vmin; /* Change the font size */
    padding: 5vmin; /* Add some padding for better spacing */
    margin-bottom: 10px; /* Add some space between inputs */
    width: 100%; /* Make the input fields take the full width of the container */
    box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}
input[type="email"] {
    font-size: 3vmin;
}
input[type="submit"]{
    width: 35vmin;
    height: 20vmin;
    font-size: 8vmin;
    background-color: #00abef88;
    color: white;
}
textarea {
    text-align: justify;
    vertical-align: top;
    font-size: 2.6vmin;
    padding: 1.5vmin;
    padding-top: 10vmin;
    padding-bottom: 10vmin;
    margin-bottom: 6vmin;
    resize: vertical;
}



/* Kontakt */
.kontakt_besedilo {
    text-align: center;
    margin-top: 2vmin;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10vmin;
    padding-right: 10vmin;
    padding-top: 6vmin;
    padding-bottom: 20%;
    color: white;
    font-size: 4.5vmin;
    background-color: #000000b9;
}

.telefon_kontakt{
    color: white;
}

.telefon_kontakt:visited{
    color: #00ADEF;
}

.email_kontakt{
    color: white;
}

.email_kontakt:visited{
    color: #00ADEF;
}

.spletna_stran_kontakt{
    color: white;
}  

.spletna_stran_kontakt:visited{
    color: #00ADEF;
}  

.ime_kontakt{
    color: white;
    font-size: 5.5vmin;
    font-weight: bolder;
}


/* swiper (slike carousel stvar) */
.napis_nad_sliko{
    background-color: #fef1009d;
    color: white;
    text-align: center;
    padding-top: 8%;
    padding-bottom: 1%;
}


.carousel-container {
    /* float: right; */
    width: 40vmin; /* Set the desired width */
    height: 40vmin; /* Set the desired height */
    /* margin: auto;  Center the carousel on the page */
    margin-right: 2%;
    margin-top: 7%;

    /* padding-top: 6%; */
    border: 1px solid #ccc; /* Optional: for visual aid */
    position: relative;
    overflow: hidden; /* Ensure overflow is hidden */
}

.swiper-container {
    width: 100%;
    height: 100%; /* Make Swiper container fill the defined box */
}
.swiper-wrapper {
    display: flex;
    height: 100%;
}
.swiper-slide {
    flex: 0 0 40vmin;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.swiper-slide img {
    width: 100%; /* Adjust as needed */
    height: 100%;
    max-height: 100%; /* Adjust as needed */
    object-fit: contain;
}
.swiper-slide p {
    margin-top: 10px;
}
.swiper-pagination {
    position: absolute;
    bottom: 10px; /* Adjust as needed */
    width: 100%;
    text-align: center;
}
.swiper-button-next, .swiper-button-prev {
    color: #000;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}
.swiper-button-next {
    right: 2%; /* Adjust as needed */
}
.swiper-button-prev {
    left: 2%; /* Adjust as needed */
}