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

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Header */
/*

header {
    text-align: center;
    padding: 1.5rem;
    background-color: #f7f0e6;
}

header h1 {
    font-size: 2.5rem;
    color: #b33f62;
}

header nav a {
    margin: 0 1rem;
    color: #b33f62;
    text-decoration: none;
    font-weight: bold;
}

header nav a:hover {
    color: #a13858;
}

/* Section Styles */
/*
section {
    padding: 2rem 1rem;
    margin: 0 auto;
    max-width: 900px;
}
#Delavci{
    width: 300px;
    margin-left: 80%;
    margin-top: -5%;

}
#Delavci a{
    margin: 0 1rem;
    font-size:large;
    color: #b33f62;
    text-decoration: none;
    font-weight: bold;
}
#slika img{
    width: 80%;
    height: 90%;
    margin-left: 110%;
    margin-top: -20%;
}
#Slika2 img{
    width: 100%;
    height: 100%;
    margin-top: -500%;
    
}
section h2 {
    font-size: 2rem;
    color: #b33f62;
    text-align: center;
    margin-bottom: 1rem;
}

/* About Us Section */
/*
#about p {
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.5;
}

/* Product Gallery */
/*
.product-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.product {
    width: 180px;
    text-align: center;
}

.product img {
    width: 100%;
    border-radius: 8px;
}

.product p {
    margin-top: 0.5rem;
    color: #555;
    font-weight: bold;
}

/* Contact Section */
/*
#contact form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-width: 400px;
    margin: 0 auto;
}

#contact label {
    font-weight: bold;
}

#contact input, 
#contact textarea {
    padding: 0.6rem;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#contact button {
    padding: 0.7rem;
    color: #fff;
    background-color: #b33f62;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#contact button:hover {
    background-color: #a13858;
}

/* Footer */
/*
footer {
    text-align: center;
    padding: 1rem;
    background-color: #f7f0e6;
    font-size: 0.9rem;
    color: #777;
}
#opis{
    width: 70%;
    margin: 0px;
    
}
/*
Erika marko stran css
*/
/*
#marko{
    margin-left: 5vw;
    margin-top: 2vh;
    max-width: 90%;
    height: 50vh;
    border: 1px solid black;
}
#erika{
    max-width: 90%;
    margin-left: 5vw;
    max-width: 90%;
    height: 50vh;
    margin-top: 2vh;
    margin-bottom: 2vh;
    border: 1px solid black;
}
.inner{
    max-width: 50%;
    height: 60%;
    /*border: 1px solid black;*/   
    /*
}
.inner-bot{
    max-width: 50%;
    height: 40%;
    /*border: 1px solid black;  */ 
    /*
}
div h2{
    font-size: 2rem;
    color: #b33f62;
    text-align: center;
    margin-bottom: 1rem;
}
div p{
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.5;
}
#markoPredstavitev{
    height: 100%;
    
}
#marko #predstavitev{
    width: 40%;
    height: 100%;
    border: 1px solid black;
    margin-left: 55%;
    margin-top: -54%;
}
#predstavitev img{
   width: 100%;
}
*//* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

body, html {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Header */
header {
    text-align: center;
    padding: 1.5rem;
    background-color: #f7f0e6;
}

header h1 {
    font-size: 2.5rem;
    color: #b33f62;
}

header nav a {
    margin: 0 1rem;
    color: #b33f62;
    text-decoration: none;
    font-weight: bold;
}

header nav a:hover {
    color: #a13858;
}

/* Section Styles */
section {
    padding: 1rem 1rem;
    margin: 0 auto;
    max-width: 1200px;
}

section h2 {
    font-size: 2rem;
    color: rgb(17, 191, 218);
    text-align: center;
    margin-bottom: 1rem;
    text-shadow: 
    0.09em 0 black,
    0 0.07em black,
    -0.07em 0 black,
    0 -0.07em black;;
    filter: drop-shadow(.08em .05em black);

}
.marko h2{
    font-size: 2rem;
    color: rgb(17, 191, 218);
    text-align: center;
    margin-bottom: 1rem;
    text-shadow: 
    0.09em 0 black,
    0 0.07em black,
    -0.07em 0 black,
    0 -0.07em black;;
    filter: drop-shadow(.08em .05em black);

    
}
.marko p{
    
    font-size: 1.5rem;
    color: rgb(17, 191, 218);
    text-align: center;
    margin-bottom: 0.5rem;
    text-shadow: 
    0.09em 0 black,
    0 0.07em black,
    -0.07em 0 black,
    0 -0.07em black;;
    filter: drop-shadow(.12em .14em black);
}
.erika h2{
    font-size: 2rem;
    color: rgb(17, 191, 218);
    text-align: center;
    margin-bottom: 0.5rem;
    text-shadow: 
    0.09em 0 black,
    0 0.07em black,
    -0.07em 0 black,
    0 -0.07em black;;
    filter: drop-shadow(.08em .05em black);

    
}
.erika p{
    font-size: 1.5rem;
    color: rgb(17, 191, 218);
    text-align: center;
    margin-bottom: 0.5rem;
    text-shadow: 
    0.09em 0 black,
    0 0.07em black,
    -0.07em 0 black,
    0 -0.07em black;
    text-wrap:pretty;
    filter: drop-shadow(.12em .11em black);
}

/* Erika and Marko Sections - Flexbox Layout */
.marko, .erika {
    display: flex;
    flex-direction: row;   /* Align text and right image side-by-side */
    justify-content: space-between;
    align-items: flex-start;
    margin-left: 5vw;
    margin-top: 0vh;
    max-width: 90%;
    height: auto;
    border: 0px solid black;
    padding: 1rem;
}

.inner {
    width: 55%;  /* Text takes up 55% of the container */
    padding: 1rem;
}

/* Image to the right of text */
.predstavitev, .marko .predstavitev {
    width: 40%;  /* Right image takes 40% of the container */
    height: auto;
    margin-left: 2%;
}

.predstavitev img {
    width: 100%;
    height: auto;  /* Maintain aspect ratio for the image on the right */
}

/* Image below text (minimize space) */
.image-below {
    margin-top: 0.5rem;  /* Reduce space between text and the image below */
    width: 100%;  /* Full width of the text block */
    display: block;
    max-width: 100%;  /* Ensure it uses full width */
    margin: 0 auto;  /* Center the image */
    height: auto;  /* Allow dynamic height based on aspect ratio */
}

.image-below img {
    width: 100%;  /* Fill the container width */
    height: auto;  /* Maintain aspect ratio */
    max-height: 600px;  /* Allow the image to fill more vertical space */
    object-fit: contain;  /* Prevent cropping while using available space */
    margin-bottom: 0;  /* Remove any margin below the image */
}

/* Responsive layout using Flexbox */
.marko, .erika {
    display: flex;
    flex-wrap: wrap;
}

/* Media Queries for Smaller Screens */
@media (max-width: 768px) {
    .marko, .erika {
        flex-direction: column;
        align-items: center;
        padding: 1rem;
    }

    .marko img, .erika img {
        width: 80%;
        height: auto;
    }

    .predstavitev {
        width: 80%;
        margin: 0 auto;
    }

    .inner {
        width: 100%;
        text-align: center;
    }

    .image-below {
        width: 100%;  /* Full width on smaller screens */
        max-height: 300px;  /* Smaller height on mobile */
    }
}
/* backgrounds*/
#background{
    background-image: url(slike/ozadjeErika.jpeg);
    background-size: 100%;
    background-blend-mode: difference;
    margin-top: 0px;
   
}
#background img{
    width: 110%;
}
#background2{
    background-image: url(slike/markoErikaAboutOzadje.jpeg);
    background-size: 100%;
    background-blend-mode:difference;
    text-shadow: black 1px 1px 1px;
}
#background3{
    background-image: url(slike/erikaMarkoAboutOzadje2.jpeg);
    background-size: 100%;
    opacity: 94%;
    width: 110%;
}
.background4{
    background-image: url(slike/Background4.jpeg);
    opacity: 94%;
    background-blend-mode: difference;
    background-size: cover;
    height: auto;
    min-height: max-content;
    border: 0.5px solid black;
}
.background4 section{
    min-height: 100vh;
    padding: 8em;
}
.about-container {
    display: flex;
    flex-direction: row;   /* Align text and right image side-by-side */
    justify-content: space-between;
    align-items: flex-start;
    margin-left: 5vw;
    margin-top: 2vh;
    max-width: 100%;
    height: auto;
    border: 0px solid black;
    padding: 1rem;
    flex-wrap: nowrap;
}
.product-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.product {
    width: 14vw;
    text-align: center;
}

.product img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.product p {
    margin-top: 0.2rem;
    color: rgb(17, 191, 218);
    font-weight: bold;
    text-shadow: 
    0.09em 0 black,
    0 0.07em black,
    -0.07em 0 black,
    0 -0.07em black;;
    filter: drop-shadow(.09em .08em black);
}


.about-inner {
    width: 55%;  /* Text takes up 55% of the container */
    padding: 1rem;
}
.about-inner p{/*tle je use kr je glede p v about us*/
    font-size: 1.4rem;
    color: rgb(17, 191, 218);
    text-align: center;
    margin-bottom: 0.2rem;
    
    text-shadow: 
        0.07em 0 black,
        0 0.07em black,
        -0.07em 0 black,
        0 -0.07em black;;
    filter: drop-shadow(.09em .08em black);
}
.about-inner h2{
    font-size: 1.6rem;
    color: rgb(17, 191, 218);
    text-align: center;
    margin-bottom: 0.2rem;
    text-shadow: 
    0.07em 0 black,
        0 0.07em black,
        -0.07em 0 black,
        0 -0.07em black;
        
        filter: drop-shadow(.08em .05em black);
    
}

/* Image to the right of text */
.about-predstavitev {
    width: 40%;  /* Increase width from 40% to 45% */
    height: auto;
    margin-left: 2%;
}

.about-predstavitev img {
    width: 100%;  /* Make the image fill its container */
    height: auto;  /* Maintain aspect ratio for the image on the right */
    max-height: 500px;  /* Increase the max height to make the image larger */
}

/* Image below text (increase size) */
.about-image-below {
    margin-top: 1rem;  /* Space between text and the image below */
    width: 100%;  /* Full width of the text block */
    display: block;
    max-width: 100%;
    max-height: 80%;  /* Ensure it uses full width */
    margin: 0 auto;
    height:auto;  /* Allow dynamic height based on aspect ratio */
}

.about-image-below img {
    width: 100%;  /* Make the image fill the container */
    height: auto;  /* Maintain aspect ratio */
    max-height: 800px;  /* Increase the max height to make it bigger */
    object-fit: contain;  /* Prevent cropping */
    margin-top: 3vh;
    margin-bottom: 0;  /* Remove any margin below the image */
    margin-left: -5em;
}

/* Responsive layout using Flexbox */

@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
        align-items: center;
        padding: 1rem;
    }

    .about-predstavitev {
        width: 80%;
        margin: 0 auto;
    }

    .about-inner {
        width: 100%;
        text-align: center;
    }

    .about-image-below {
        width: 100%;  /* Full width on smaller screens */
        max-height: 300px;  /* Smaller height on mobile */
    }
}
@media (max-width: 768px) {
    header h1 {
        font-size: 2rem;
    }

    section {
        padding: 1rem;
    }

    .product {
        width: 140px;
    }
    

    header nav a {
        font-size: 0.9rem;
    }
    .background4{
        background-size: cover;
    }
}

/* Footer */
footer {
    text-align: center;
    padding: 1rem;
    background-color: #f7f0e6;
    font-size: 0.9rem;
    color: #777;
}
#contHtml{
    height: 100%;
    font-family: Arial, sans-serif;
    background: url('slike/IndexSlike/SlikaCvetlicarne.jpeg') no-repeat center center fixed;
    background-size: cover;
    color: #333;
}
/* Contact Section */
#contact {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 2rem;
    margin: 2rem auto;
    max-width: 600px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

#contact h2 {
    text-align: center;
    color: #b33f62;
    margin-bottom: 1rem;
}

#contact p {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #555;
}

#contact label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

#contact input, 
#contact textarea {
    width: 100%;
    padding: 0.7rem;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
}

#contact button {
    display: block;
    width: 100%;
    padding: 0.7rem;
    background-color: #b33f62;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
}

#contact button:hover {
    background-color: #a13858;
}

/* Footer */
footer {
    text-align: center;
    padding: 1rem;
    background-color: rgba(247, 240, 230, 0.9);
    font-size: 0.9rem;
    color: #777;
}

/* Responsive Design */
@media (max-width: 768px) {
    header h1 {
        font-size: 2rem;
    }

    #contact {
        padding: 1rem;
        margin: 1rem;
    }

    #contact h2 {
        font-size: 1.5rem;
    }

    #contact button {
        font-size: 1rem;
    }
}