.mySlides {
display: none;
}
.mySlides img {
vertical-align: middle;
width: 100%;
max-height: 800px;
} .slideshow-container {
position: relative;
margin: auto;
} .text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
} .dot {
cursor: pointer;
height: 100px;
width: 100px;
background-color: transparent;
display: inline-block;
transition: background-color 0.6s ease;
width: 24%;
height: 100%;
color: var(--custom-color-4);
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
padding: 55px 30px;
}
.dot span {
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
display: inline-block;
}
.dot a {
pointer-events: none;
padding-left: 45px;
}
.dot a button {
text-transform: uppercase;
font-family: var(--global-font-family-manrope);
font-weight: 400;
font-size: 12px;
line-height: 15px;
border: none;
background-color: var(--custom-color-5);
padding: 8px 35px;
color: #fff;
letter-spacing: 1px; }
.dot a button:hover {
background-color: var(--custom-color-7);
}
.dot a button span {
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
display: inline-block;
}
.active { */
background-color: transparent;
}
.active a {
pointer-events: all;
}
.active button {
cursor: pointer;
border: 1px solid #fff!important;
background-color: var(--custom-color-5);
padding: 8px 35px;
}
.first-dot {
background: var(--custom-color-5)!important;
width: 45%;
padding-left: 20%;
}
.hero-tabs .dot:nth-child(2) {
position: relative;
right: 5px;
}
.hero-tabs .dot:nth-child(3) {
position: relative;
right: 15px;
}
.green-area {
width: 100px;
height: 200px;
background-color: var(--custom-color-5);
position: absolute;
top: 0;
left: -10px;
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
display: inline-block;
}
.first-dot a {
pointer-events: all;
}
.first-dot button {
cursor: pointer;
border: 1px solid #fff!important;
} .transparent {
background-color: transparent; }
.part-1 {
text-transform: uppercase;
font-family: var(--global-font-family-manrope);
font-weight: 500;
font-size: 20px;
line-height: 27px;
}
.part-2 {
font-family: var(--global-font-family-manrope);
font-weight: 300;
font-size: 20px;
line-height: 27px;
padding-left: 15px;
width: 265px;
}
.home-tender-cards {
max-width: 1190px;
display: flex;
padding: 0 10%;
gap: 100px;
margin-top: 100px;
margin-bottom: 80px;
position: relative;
left: 50%;
transform: translate(-50%);
justify-content: center;
}
.home-tender-cards-title {
flex: 0 0 30%;
}
.home-tender-cards-title h2 {
font-family: var(--global-font-family-manrope);
font-weight: 300;
font-size: 45px;
line-height: 61px;
letter-spacing: 5px;
color: #000;
margin-top: 0;
margin-bottom: 10px;
}
.home-tender-cards-title p {
font-family: var(--global-font-family-manrope);
font-weight: 300;
font-size: 12px;
line-height: 16px;
letter-spacing: 5px;
color: #000;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 105px;
display: flex;
}
.home-tender-cards-title .img-dots {
width: 216px;
}
.home-tender-cards-cards {
flex: 0 0 70%;
}
.form-collection {
display: flex;
justify-content: center;
position: relative;
width: 847px;
height: 392px;
}
.card {
font-family: "Open Sans", sans-serif;
background: #fff;
width: 300px;
position: absolute;
top: 0;
-webkit-transition: none;
transition: none;
width: 602px;
height: 392px;
border-radius: 10px;
box-shadow: 3px 0 15px rgba(0, 0, 0, 0.15); } .log-in-card {
z-index: 1;
left: 0px;
background-color: #fff;
cursor: pointer;
} .sign-up-card {
z-index: 2;
left: 250px;
background-color: #fff;
cursor: pointer;
}
.card-body {
padding: 20px; height: 100%;
padding-left: 42px;
padding-top: 220px;
}
.card-body h3 {
font-family: var(--global-font-family-manrope);
font-weight: 700;
font-size: 60px;
line-height: 82px;
color: var(--custom-color-5);
margin: 0;
}
.card-body img {
position: absolute;
left: 0;
top: 0;
}
.card-body button {
position: absolute;
right: 42px;
bottom: 45px;
background-color: #053A40;
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
}
.card-body button span {
color: #E4DACC;
font-family: var(--global-font-family-manrope);
font-weight: 300;
font-size: 12px;
line-height: 100%;
letter-spacing: 5%;
text-transform: uppercase;
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
display: inline-block;
vertical-align: top;
}
.card-body p {
margin: 30px 0 0 0;
font-family: var(--global-font-family-manrope);
font-weight: 300;
font-size: 20px;
line-height: 27px;
max-width: 260px;
color: #000;
}
.input-group {
border: 2px solid #eee;
background: #eee;
margin: 25px 0;
padding: 10px;
border-radius: 2px;
overflow: hidden;
}
.input-group input {
border: none;
background: transparent;
width: 100%;
outline: none;
font-weight: 500;
font-family: "Open Sans", sans-serif;
font-size: 16px;
}
.home-suggestion-box {
max-width: 1024px;
margin: auto;
background-image: url(//srsm.rs/wp-content/uploads/2024/11/slika-min.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
text-align: center;
border-radius: 10px;
height: 330px;
padding-top: 110px;
position: relative;
z-index: 2;
}
.home-suggestion-box h2 {
margin-top: 0;
margin-bottom: 10px;
font-family: var(--global-font-family-manrope);
font-weight: 300;
font-size: 45px;
line-height: 61px;
letter-spacing: 5px;
color: var(--custom-color-4);
}
.home-suggestion-box span {
font-family: var(--global-font-family-manrope);
font-weight: 400;
font-size: 12px;
line-height: 15px;
color: var(--custom-color-7);
text-transform: uppercase;
}
.home-suggestion-box a {
text-decoration: none;
}
.home-hero-carousel {
position: relative;
}
.home-hero-carousel .hero-tabs {
position: absolute;
bottom: 0;
max-height: 240px;
height: 100%;
width: 95%;
margin-bottom: -25px;
}
.home-card-and-slider {
padding: 0 10%;
margin-top: 60px;
margin-bottom: 95px;
}
.card-area {
background-color: #f7f3ee;
padding: 63px 82px 112px 268px;
display: flex;
border-radius: 10px;
align-items: center;
gap: 260px;
}
.card-area-img {
width: 180px;
height: 144px;
}
.card-area h2 {
font-family: var(--global-font-family-manrope);
font-weight: 400;
font-size: 35px;
line-height: 40px;
letter-spacing: 5px;
color: #201E1F;
}
.card-area p {
font-family: var(--global-font-family-manrope);
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #797979;
margin-bottom: 0;
}
.card-area .card-view-all {
font-family: var(--global-font-family-manrope);
font-weight: 400;
font-size: 12px;
line-height: 15px;
color: #000;
margin-top: 0;
} .carousel {
background: transparent;
}
.carousel-cell {
width: 24%;
height: 215px;
margin-right: 10px;
background: #A1A1A1;
border-radius: 5px;
counter-increment: carousel-cell;
padding: 30px 17px 18px 40px;
}
.carousel-cell p:not(.fl-date) {
font-family: var(--global-font-family-manrope);
font-weight: 400;
font-size: 14px;
line-height: 18px;
color: #fff;
width: 175px;
}
.carousel-cell .fl-date {
font-family: var(--global-font-family-manrope);
font-weight: 400;
font-size: 12px;
line-height: 15px;
color: #fff;
}
.carousel-cell .fl-car-btm {
display: flex;
justify-content: space-between;
align-items: center;
}
.carousel-cell .fl-car-btm button {
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
padding: 8px 30px;
cursor: pointer;
}
.carousel-cell .fl-car-btm button span {
font-family: var(--global-font-family-manrope);
font-weight: 300;
font-size: 10px;
line-height: 14px;
letter-spacing: 1px;
color: #4a4a4a;
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
display: inline-block;
text-transform: uppercase;
}
.slider-area {
width: 105%;
position: relative;
margin-top: -70px;
}
.slider-area .flickity-viewport {
background: transparent;
}
.slider-area .flickity-viewport .flickity-slider {
left: -14%!important;
}
.slider-area .flickity-prev-next-button {
z-index: 3;
visibility: hidden;
}
.white-box {
background-color: #fff;
height: 216px;
position: absolute;
width: 24%;
left: -1px;
z-index: 2;
}
.white-box h2 {
font-family: var(--global-font-family-manrope);
font-weight: 500;
font-size: 24px;
line-height: 28px;
letter-spacing: 2px;
position: absolute;
left: 57px;
bottom: 30%;
}
.colored-box {
width: 100%;
height: 32%;
background-color: #f7f3ee;
position: absolute;
left: 1px;
border-radius: 0 0 0 10px;
}
.slider-area .flickity-prev-next-button.previous:after {
content: url(//srsm.rs/wp-content/uploads/2024/12/Group-1000001817.svg);
visibility: visible;
}
.slider-area .flickity-prev-next-button.next:after {
content: url(//srsm.rs/wp-content/uploads/2024/12/Group-1000001818.svg);
visibility: visible;
}
.slider-area .flickity-prev-next-button.next {
right: 82%;
top: 85%;
}
.slider-area .flickity-prev-next-button.previous {
top: 85%;
left: 37px;
}
.home-map-section {
position: relative; background: url(//srsm.rs/wp-content/uploads/2025/05/pozadina-1.png);
display: flex;
margin-top: -100px;
margin-bottom: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.home-map-section img {
width: 864px;
position: relative;
left: 25%;
margin-top: 0;
transition: opacity 0.3s ease;
display: block;
}
.home-map-section-map img.second-img {
display: none;
}
.home-map-section-map:hover img.first-img {
display: none;
}
.home-map-section-map:hover img.second-img {
display: block;
}
.home-map-section-list {
width: 380px;
height: 270px;
position: relative;
top: 300px;
left: 100px;
}
.home-map-section-list h2 {
font-family: var(--global-font-family-manrope);
font-weight: 300;
font-size: 35px;
line-height: 100%;
text-transform: uppercase;
color: #E4DACC;
}
.home-map-section-list p:first-of-type {
font-family: var(--global-font-family-manrope);
font-weight: 300;
font-size: 20px;
line-height: 100%;
color: #E4DACC;
margin-bottom: 0;
width: fit-content;
}
.home-map-section-list p:last-child {
font-family: var(--global-font-family-manrope);
font-weight: 400;
font-size: 16px;
line-height: 20px;
color: #E4DACC;
margin-top: 0;
}
@media only screen and (min-width: 1441px) {
.home-map-section img {
margin-top: 0;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1440px) {
.card-body p {
font-size: 16px;
line-height: 25px;
}
} 
@media only screen and (min-width: 1700px) {
.home-tender-cards {
gap: 245px;
}
}
@media only screen and (min-width: 2000px) {
.home-map-section {
justify-content: center;
}
}