html, body {
position: relative;
}
body {
overflow-x: hidden;
}
.srb:lang(en-US) {
display: none;
}
.eng:lang(sr-RS) {
display: none;
}
.hero-section {
background-image: 
linear-gradient(173.09deg, rgba(0, 0, 0, 0.85) 23.41%, rgba(174, 174, 174, 0) 90%),
url(//srsm.rs/wp-content/uploads/2024/12/shutterstock_1278764785-1-min.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 486px;
}
.hero-section h1 {
color: #fff;
font-family: var(--global-font-family-manrope);
font-weight: 300;
font-size: 45px;
line-height: 61px;
text-align: center;
margin: unset;
padding-top: 212px;
letter-spacing: 2px;
} .accordion-section {
max-width: 1140px;
margin: auto;
padding-top: 40px;
padding-bottom: 190px;
}
.accordion-section h2 {
color: #053A40;
font-family: var(--global-font-family-manrope);
font-weight: 500;
font-size: 24px;
line-height: 28px;
letter-spacing: 5%;
}
.accordion-section h2 span {
opacity: 0.5;
}
.page-template-projects .accordion-section h2 span.activic, .page-template-projects .accordion-section h2 span.activicc, .page-template-projects .accordion-section h2 span.activiccc {
opacity: 1;
}
.accordion-section h3 {
color: #053A40;
font-family: var(--global-font-family-manrope);
font-weight: 300;
font-size: 45px;
line-height: 100%;
}
.accordion-inner-section {
background: #FFFAF5;
border-radius: 24px 24px 0 0;
}
.page-template-projects .accordion-inner-section {
display: none;
}
.page-template-projects .accordion-inner-section.activic, .page-template-projects .accordion-inner-section.activicc, .page-template-projects .accordion-inner-section.activiccc {
display: block;
}
.accordion {
background-color: transparent;
color: #AEA292;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-family: var(--global-font-family-manrope);
font-weight: 500;
font-size: 20px;
line-height: 100%;
transition: 0.4s;
border-radius: 0;
border-bottom: 1px solid;
}
.sub-accordion {
padding-left: 58px!important;
border-bottom: 1px solid #797979;
}
.sub-sub-accordion {
padding-left: 108px!important;
border-bottom: 1px solid #797979;
}
.active, .accordion:hover {
background-color: transparent; 
} .accordion:after {
content: url(//srsm.rs/wp-content/uploads/2024/12/Vector-39-1.svg);
color: #777;
font-weight: bold;
float: right;
width: 16px;
height: 8px;
}
.active:after {
content: url(//srsm.rs/wp-content/uploads/2024/12/Vector-39.svg);
width: 16px;
height: 8px;
}
.panel {
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.panel p {
color: #053A40;
font-family: var(--global-font-family-manrope);
font-weight: 400;
font-size: 20px;
line-height: 27px;
border-bottom: 1px solid #cbcbcb;
margin: 0;
padding: 16px 0 16px 60px;
}
.sub-accordion + .panel p {
padding-left: 108px!important;
}
.sub-sub-accordion + .panel p {
padding-left: 152px!important;
} .tabs-container {
display: flex;
font-family: sans-serif;
}
.tab {
flex: 1;
text-align: center;
padding: 70px 20px 60px 20px;
font-size: 18px;
font-weight: bold;
cursor: pointer; transition: background-color 0.3s;
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
}
.tab span {
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
display: inline-block;
color: #053A40;
font-family: var(--global-font-family-manrope);
font-weight: 400;
font-size: 35px;
line-height: 40px;
}
.tab[data-tab="phase3"] span {
color: #C2D7E0;
}
.tab[data-tab="phase1"] {
background-color: #cbd9df;
margin-left: -45px;
}
.tab[data-tab="phase2"] {
background-color: #ded1bf;
margin-right: -45px;
}
.tab[data-tab="phase3"] {
background-color: #053A40;
margin-right: -45px;
}
.tab[data-tab="phase1"].active {
box-shadow: 14px 0 8px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.tab[data-tab="phase2"].active {
box-shadow: -10px -4px 8px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.tab[data-tab="phase3"].active {
box-shadow: -10px -4px 8px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.tab-content {
display: none;
padding: 20px;
background-color: #fff;
border-radius: 0 0 8px 8px;
}
.tab-content.active {
display: block;
}
.tab-content.active:after, .tab.active:after {
display: none!important;
}
.tabic, .tabicc, .tabiccc, .accordion-section h2 {
cursor: pointer;
}