@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
    background-color: white; /* Set the white background */
    background-image: url('res/dots_vector.svg'); /* Path to your PNG */
    background-repeat: repeat; /* Repeats the dots background */
    background-size:30%; /* Keep the default size of the PNG */
    background-position: center; /* Centers the PNG pattern */
    font-family: 'Roboto', sans-serif;
}



/* Make sure the body takes the full height of the viewport */
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}

/* Styling for the top half of the screen */
.half-screen {
    background-color: #89cbd9; /* Blue background color */
    height: 70vh; /* 50% of the viewport height (vh) */
    color: white; /* White text color for contrast */
    display: flex; /* Flexbox to center content */
    justify-content: center; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
}

svg text {
    fill: white;
    stroke: none;
  }

.logo {
    min-height: 50vh;
    max-width: 100%;
    margin-bottom: 2vh;

}

.icon {
    height: 8vh;
    margin-bottom: 1vh;
}

.content-wrapper {
    display: flex;
    flex-direction: column; /* Stack logo and address vertically */
    align-items: center; /* Center horizontally */
}

/* Address section styling */
.address {
    display: flex; 
    flex-direction: column;/* Place icon and text side-by-side */
    align-items: center; /* Align icon and text vertically */
    color: white; /* Text color for the address */
    font-weight: 700;
}

.address span {
    font-size: 3.5vh; /* Adjust text size for address */
    color: white; /* Ensure text is visible on blue background */
}




.bumper {
    height: 5vh;
}

.container-header-blue {
    background-color: #89cbd9;
    height: 80vh;
    color: white;
}

.container-footer {
    background-color: #89cbd9;
    height: 50vh;
    color: white;

}

.container-opis {
    background-color: #e0faff; /* Background color of the text box */
    width:fit-content;
    align-items: center;
    text-align: center;
    padding: 4vh 20vw;

}

.container-opis-mini {
    background-color: #e0faff; /* Background color of the text box */
    width:fit-content;
    align-items: center;
    text-align: center;
    padding: 2vh 20vw;

}

.container-opis h4 {
    color: #0b8fac; /* Text color */
    margin: 0; /* Remove margin for the heading */
    font-weight: 500;
    padding: 1vh 1vw; /* Add padding inside the text box for spacing */

}

.container-opis h3 {
    color: #0b8fac; /* Text color */
    margin: 0; /* Remove margin for the heading */
    font-weight: 500;
    padding: 1vh 3vw; /* Add padding inside the text box for spacing */

}

.container-opis h5 { 
    font-weight: 300;
    padding: 1vh 3vw; /* Add padding inside the text box for spacing */
    text-align: center;

}

.container-white {
    background-color: white;
}

.container-white h5{
    line-height: 1.5;

}

.container-bumper {
    height: 3vh;
}

.container-mini-bumper {
    height: 1vh;
}

.my-map{
    height: 30vh;
    width: 70vw;
}

.nav-item{
    color:#0b8fac;
    font-size: 2vh;
    text-decoration: none;
}

.container-podlaga{
    background-color: white;
}

.container-podlaga-mini{
    background-color: white;
    height: 5.5vh;
}

.btn.btn-default:hover{
    background-color: #89cbd9;
    color:white;
}

.nav a {
    font-size: 1.2rem; /* Increase font size */
    transition: color 0.3s ease; /* Smooth hover effect */
  }

.nav a:hover {
    color: #001f54; /* Deep blue hover color */
    transform: scale(1.05);
  }



.service-box {
    opacity: 0; 
    transform: translateY(5vh);
    transition: opacity 2s ease-out, transform 0.5s ease-out;
    flex: 1;
    min-height: 20vh;
    background-color: white;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 3vh 2vw;
    background-image: url('res/dots_vector.svg');
    background-size:50%;
}

.service-box.show {
    opacity: 1;
    transform: translateY(0);
}

.service-box:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);

}

.service-description {
    padding: 2vh 2vw;
    background-color: white;
    text-align: center;
}

.service-title{
    font-size: 2.5vh;
    font-weight: 450;
    color: #0b8fac;
}

.service-title:hover{
    font-weight: 600;
}

.inner-title{
    font-weight: 450;
    font-size: 2.5vh;
    color: #0b8fac;
}


.container-opis h4 a {
    color: #0b8fac; /* Text color */
    margin: 0; /* Remove margin for the heading */
    font-weight: 500;
    padding: 1vh 1vw; /* Add padding inside the text box for spacing */
    text-decoration: none;

}

.cenik-row:hover{
    transform: scale(1.02);
    font-weight: 500;


}

.test {
    background-color:#001f54;
    height: 20vh;
}

.price-description {
    font-size: large;
}

.smallimg {
    max-width: 80vw;
}