.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: 30%;
height: 77%;
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 25px;
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: var(--custom-color-5); }
.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: 35%;
padding-left: 10%;
}
.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;
} .transparent {
background-color: transparent; }
.part-1 {
text-transform: uppercase;
font-family: var(--global-font-family-manrope);
font-weight: 500;
font-size: 17px;
line-height: 21px;
}
.part-2 {
font-family: var(--global-font-family-manrope);
font-weight: 300;
font-size: 14px;
line-height: 20px;
padding-left: 15px;
width: 265px;
}
.home-tender-cards {
max-width: 95%;
display: flex;
padding: 0 10%;
gap: 20px;
margin-top: 100px;
margin-bottom: 80px;
flex-direction: column;
position: relative;
left: 50%;
transform: translate(-50%);
justify-content: center;
}
.home-tender-cards-title {
flex: 0 0 100%;
margin-bottom: 20px;
}
.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: 20px;
display: flex;
}
.home-tender-cards-title .img-dots {
display: none;
}
.home-tender-cards-cards {
flex: 0 0 100%;
}
.form-collection {
display: flex;
justify-content: center;
position: relative;
width: unset;
height: 392px;
}
.card {
font-family: "Open Sans", sans-serif;
background: #fff;
width: 300px;
position: absolute;
top: 0;
-webkit-transition: none;
transition: none;
width: 380px;
height: 392px;
border-radius: 10px;
border: 0.5px solid #bfbfbf;
} .log-in-card {
z-index: 1;
left: 0px;
background-color: #E4E4E4;
cursor: pointer;
} .sign-up-card {
z-index: 2;
left: 250px;
background-color: #D3D3D3;
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: 40px;
line-height: 62px;
color: var(--custom-color-5);
margin: 0;
}
.card-body p {
margin: 0;
font-family: var(--global-font-family-manrope);
font-weight: 300;
font-size: 16px;
line-height: 20px;
max-width: 180px;
}
.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: 95%;
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: 280px;
padding-top: 80px;
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: -45px;
}
.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;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.home-map-section img {
position: relative;
}
.home-map-section-list {
width: 300px;
height: 250px;
position: relative;
top: 300px;
left: -40px;
}
.home-map-section-list h2 {
font-family: var(--global-font-family-manrope);
font-weight: 300;
font-size: 18px;
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: 16px;
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: 10px;
line-height: 15px;
color: #E4DACC;
margin-top: 0;
} @media only screen and (max-width: 767px) {
.first-img {
display: none;
}
.home-map-section-list {
top: unset;
width: 400px;
}
.home-map-section {
margin-top: 30px;
padding-top: 15px;
}
.home-map-section-list h2 {
font-size: 16px;
}
.home-map-section-list p:first-of-type {
font-size: 14px;
}
.home-suggestion-box h2 {
font-size: 24px;
line-height: 29px;
}
.home-suggestion-box {
height: 150px;
padding-top: 40px;
}
.card-body {
padding-left: 22px;
padding-top: 50px;
height: 280px!important;
}
.card {
position: relative;
max-width: 95%;
margin: auto;
}
.form-collection {
flex-direction: column;
gap: 15px;
}
.card-body p {
font-size: 14px;
line-height: 16px;
margin-bottom: 10px;
}
.sign-up-card {
left: 0;
}
.home-tender-cards {
gap: 65px;
margin-top: 90px;
margin-bottom: 100px;
}
.part-2 {
display: none!important;
}
.home-hero-carousel .hero-tabs {
height: 50%;
}
.green-area {
height: 50px;
width: 25px;
}
.part-1 {
font-size: 12px;
line-height: 16px;
}
.part-1:lang(en-US) {
font-size: 10px!important;
}
.dot {
padding: 25px 10px 25px 25px;
}
.hero-tabs .dot:nth-child(2), .hero-tabs .dot:nth-child(3) {
padding-left: 10px;
}
.dot a button {
font-size: 10px;
line-height: 12px;
padding: 4px 10px;
}
.mySlides img {
max-height: 250px;
min-height: 250px;
}
.nomob {
display: none;
}
.dot a {
padding-left: 10px;
}
}