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

body { overflow-x: hidden; }

@-moz-document url-prefix() {
    html {
        scrollbar-width: thin;
        scrollbar-color: #D5D5D5 #F1F1F1;
    }
}

html::-webkit-scrollbar {
    width: 5px; 
}

html::-webkit-scrollbar-thumb {
    background: #E6E6E6; 
    height: 87px;
    border-radius: 3px;
}

:root {
    --primary-color: #5FB87E;
    --secondary-color: #1D293D; 
    --tertiary-color: #E8F0F7;
    --hover-color: #4FA66D;
}

.Container {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 20px;
}

.content, .content1 {
    display: flex;
    width: 100%;
    max-width: 1166px; 
}

.content1 { flex-direction: column; }

header {
    background: var(--secondary-color);
    height: 100px;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 1000;
}

.header-content { align-items: center; }
.logos {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    img { object-fit: contain; }
    a:first-child img { width: 156px; }
}

.menu {
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 0 auto;
}

.menu-item {
    cursor: pointer;
    height: 100%;
    position: relative;
    transition: all 0.3s ease;
    > a {
        color: white;
        font: 16px 'Campton Medium', "Helvetica Medium";
        line-height: 21px;
        text-decoration: none;
        padding: 20px 0 40px;
        transition: all 0.3s ease;
    }
}

.menu-item:hover {
    > a { color: var(--primary-color); }
    ul { display: flex; }
}
.menu-item.active > a { color: var(--primary-color); }

.menu-item ul {
    background: white;
    border-radius: 10px;
    display: none;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 60px;
    left: -20px;
    z-index: 1000;
    width: 175px;

    li { display: flex; }
    li:first-child a { border-radius: 10px 10px 0 0; }
    li:last-child a { border-radius: 0 0 10px 10px; }
    a {
        color: var(--secondary-color);
        text-decoration: none;
        display: flex;
        align-items: center;
        font: 12px 'Campton Medium', "Helvetica Medium";
        line-height: 16px;
        height: 45px;
        padding-left: 30px;
        padding-right: 20px;
        width: 100%;
        transition: all 0.3s ease;
        &:hover { background: #EEF7F2; }
    }
}

.language-change {
    display: flex;
    align-items: center;
    gap: 10px;
    > span:first-of-type {
        color: white;
        font: 12px 'Campton Medium';
        line-height: 18px;
        min-width: 28px;
    }
}

.switch {
    position: relative;
    display: inline-block;
    width: 31px;
    height: 18px;
    input { opacity: 0; width: 0; height: 0; }
}
  
.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: white;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
  
.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 3px;
    background: var(--primary-color);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
  
input:checked + .slider:before {
    -webkit-transform: translateX(12px);
    -ms-transform: translateX(12px);
    transform: translateX(12px);
}

.slider.round { 
    border-radius: 34px; 
    &::before { border-radius: 50%; }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 40px;
}

.search {
    position: relative;
    input {
        background: #343F51;
        border: none;
        border-radius: 10px;
        color: white;
        font: 12px 'Campton Light', 'Helvetica Light';
        line-height: 16px;
        padding: 0 10px 0 45px;
        width: 245px; height: 40px;
        &:focus { outline: none; }
    }
    button {
        background: transparent;
        border: none;
        position: absolute;
        left: 20px; top: 5px;
    }
}

#menu-toggle-button { display: none; }

.dropdownMenu {
    background: white;
    color: white;
    padding: 0 30px;
    position: absolute;
    top: 100px;
    width: 100%;
    height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transition: height 0.5s ease;
}
  
.dropdownMenu.visible, .dropdownMenu.active { height: calc(100vh - 80px); }

.mobile-nav {
    border-bottom: 1px solid var(--secondary-color);
    i { transition: transform 0.3s ease; }
}

.mobile-nav ul {
    list-style: none;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.3s ease;

    li { display: flex; }
    a {
        color: var(--secondary-color);
        text-decoration: none;
        display: flex;
        align-items: center;
        font: 14px 'Campton Medium', 'Helvetica Roman';
        line-height: 14px;
        padding: 5px 0 5px 10px;
        width: 100%;
    }
    li:last-child a { padding-bottom: 30px; }

}

.mobile-nav.active {
    ul { max-height: 1000px; }
    i { transform: rotate(180deg); }
}

.mobile-nav-head {
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    font: 16px 'Campton Medium', 'Helvetica Roman';
    line-height: 22px;
    i { color: var(--secondary-color); font-size: 12px; }
}

.mobile-nav > a {
    color: var(--secondary-color);
    text-decoration: none;
    display: flex;
    font: 16px 'Campton Medium', 'Helvetica Roman';
    line-height: 22px;
    padding: 15px 0;
}

.mobile-search {
    margin: 30px 0 20px;
    position: relative;
    width: 100%;
    input {
        border: 1px solid var(--secondary-color);
        border-radius: 10px;
        color: var(--secondary-color);
        font: 14px 'Campton Medium', 'Helvetica Roman';
        line-height: 19px;
        padding: 0 45px 0 20px;
        width: 100%; height: 45px;
        &:focus { outline: none; }
    }
    button {
        background: var(--secondary-color);
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 20px; top: 7px;
        width: 30px; height: 30px;
    }
}

.banner { 
    position: relative; 
    height: 550px;
}

.banner-slide {
    position: relative;
    img {
        width: 100%; height: 550px;
        object-fit: cover;
    }
    p { 
        color: white; position: absolute; 
        z-index: 2; margin: 0; width: 100%; 
        padding: 0 20px;
        text-align: center;
    }
    p:first-of-type {
        font: 70px 'Campton Medium', 'Gilroy GEO';
        line-height: 80px;
        top: 220px;
    }
    p:last-child {
        font: 20px 'Campton', 'Helvetica Roman';
        line-height: 26px;
        top: 310px;
    }
    &::after {
        content: '';
        background: rgba(29, 41, 61, 0.69);
        position: absolute;
        inset: 0;
        z-index: 1;
    }
}

.banner-slide1 {
    img { height: 350px; }
    p:first-of-type { top: 100px; }
    p:last-child { top: 200px; }

}

.banner-next, .banner-prev {
    background: var(--primary-color);
    border-radius: 50%;
    color: white;
    display: flex;
    font-size: 12px;
    width: 50px; height: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    transition: all 0.3s ease;
    &:hover { background: var(--hover-color); }
}

.banner-next { right: 50px; }
.banner-prev { left: 50px; }

.swiper1 .swiper-pagination-bullet {
    background: var(--tertiary-color);
    border-radius: 5px;
    color: white;
    width: 10px;
    height: 10px;
    opacity: 1;
}
.swiper1 .swiper-pagination-bullet-active { 
    background: var(--primary-color); 
    width: 34px;
}

.about-us-prev { 
    padding: 50px 20px 70px; 
    .content1 {
        color: black;
        align-items: center;
    }
}

.prev-text { 
    font: 18px 'Poppins Light', 'Helvetica Medium';
    line-height: 27px;
    max-width: 900px; 
    text-align: center; 
    margin-bottom: 50px;
}

.page-title, .page-title1 {
    color: black;
    font: 40px 'Campton Medium', 'Helvetica Medium';
    line-height: 50px;
    position: relative;
    text-align: center;
    margin-bottom: 30px;
    div {
        background: var(--primary-color);
        position: absolute;
        left: 50%; transform: translateX(-50%);
        width: 75px; height: 5px; bottom: -10px;
    }
}

.page-title1 {
    text-align: unset;
    font-size: 30px;
    line-height: 40px;
    div { left: 0; transform: unset; }
}

.info-blocks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    margin-bottom: 60px;
}

.info-blocks > div {
    background: var(--tertiary-color);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 10px 10px;
    min-height: 245px;
    transition: all 0.3s ease;
    img { 
        width: 52px; height: 37px;
        object-fit: contain;
        margin-bottom: 30px;
        transition: all 0.3s ease;
    }
    p {
        font: 40px 'Campton Medium';
        line-height: 50px;
        margin-bottom: 20px;
    }
    span {
        color: #5B5B5B;
        font: 18px 'Poppins Light', 'Helvetica Roman';
        line-height: 24px;
        transition: all 0.3s ease;
    }
    &:hover { 
        background: var(--primary-color); 
        color: white;
        img { filter: brightness(0) invert(1); }
        span { color: white; }
    }
}

.info-prev {
    display: flex;
    gap: 20px;
    > div { width: calc(50% - 10px); }
    p {
        color: black;
        font: 30px 'Campton Medium', 'Helvetica Medium';
        line-height: 32px;
        margin-bottom: 15px;
    }
    div {
        color: #747474;
        font: 18px 'Poppins Light', 'Helvetica Roman';
        line-height: 24px;
    }
}

.prod-prev {
    background: var(--tertiary-color);
    padding: 50px 20px 70px;
    .content1 { align-items: center; }
}

.products {
    display: flex;
    gap: 20px;
    margin-bottom: 50px;
}

.prod-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    gap: 25px;
    padding: 50px 55px 50px 40px;
    position: relative; top: 0;
    width: calc(50% - 10px);
    transition: all 0.3s ease;
    &:hover { top: -20px; }
}

.prod-info {
    width: calc(100% - 210px);
    > p {
        color: black;
        font: 40px 'Campton Medium', 'Helvetica Medium';
        line-height: 50px;
        margin-bottom: 20px;
    }
    > div:nth-child(2) {
        color: black;
        display: -webkit-box;
        font: 18px 'Poppins Light', 'Helvetica Light';
        line-height: 27px;
        margin-bottom: 27px;
        height: 108px;
        line-clamp: 4;
        -webkit-line-clamp: 4;
        overflow: hidden;
        -webkit-box-orient: vertical;
    }
}

.learn-more, .cat-link, .tag, .proj-tag {
    background: var(--primary-color);
    border-radius: 23px;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 14px 'Poppins Light', 'Helvetica Light';
    line-height: 21px;
    width: 150px; height: 45px;
    transition: all 0.3s ease;
    &:hover { background: var(--hover-color); }
}

.cat-link { width: 285px; }

.prod-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 180px; height: 245px;
    div {
        position: absolute;
        bottom: 0;
        border-radius: 50%;
        width: 100%; height: 72px;
    }
    img {
        position: absolute;
        bottom: 20px;
        width: 124px; height: 214px;
        object-fit: contain;
        z-index: 2 ;
    }
}

.prod-img1 {
    width: 260px; height: 350px;
    div { height: 102px; }
    img { width: 180px; height: 305px; }
}

#prod-ostati .prod-img div { background: rgba(228, 79, 21, 0.25); }
#prod-universali .prod-img div { background: rgba(117, 24, 124, 0.25); }
#prod-Hydro .prod-img div { background: rgba(79, 90, 105, 0.25); }
#prod-expert .prod-img div { background: rgba(157, 59, 72, 0.25); }

.proj-prev {
    padding: 60px 20px 40px;
    .content1 { align-items: center; }
}

.proj-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 30px;
    margin-bottom: 50px;
}

.proj-card {
    border-radius: 20px;
    color: white;
    position: relative;
    overflow: hidden;
    filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.16));
    width: 100%;
    height: 425px;
    img {
        border-radius: 20px;
        width: 100%; height: 100%;
        object-fit: cover;
        transition: all 0.3s ease;
    }
    > div:last-child {
        position: absolute; z-index: 2;
        left: 30px; right: 30px; top: 290px;
        margin: 0;
        line-height: 26px;
    }
    .name { font: 20px 'Poppins Medium', 'Helvetica Medium'; }
    .location { font: 20px 'Campton Light', 'Helvetica Light'; }
    &::after {
        content: '';
        background: linear-gradient(180deg,  rgba(0,0,0,0) 0.00%, 
        rgba(29,41,61,0.62) 100.00%);
        border-radius: 20px;
        position: absolute;
        inset: 0;
        z-index: 1;
        transition: all 0.3s ease;
    }
}

.tag {
    position: absolute;
    bottom: 145px; left: 30px;
    z-index: 2;
    opacity: 0;
    transition: all 0.3s ease;
}

.proj-card:hover {
    img { transform: scale(1.1); }
    .tag { opacity: 1; }
    &::after { background: linear-gradient(180deg,  rgba(0,0,0,0) 0.00%,  rgba(29,41,61,1) 100.00%); }
}

.contact-cont {
    padding: 50px 20px 90px;
    .content1 { align-items: center; }
}

.contact-page {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    max-width: 996px; width: 100%;
}

.contact-form {
    width: calc(50% - 15px);
    > div { margin-bottom: 20px; }
    label {
        color: black;
        font: 14px 'Poppins Light', 'Helvetica Light';
        line-height: 19px;
        margin-bottom: 15px;
    }
    input, textarea {
        border: 1px solid #E1E1E1;
        border-radius: 10px;
        color: #95A5B5;
        font: 16px 'Poppins Light', 'Helvetica Light';
        line-height: 22px;
        padding-left: 20px;
        width: 100%; height: 50px;
        &:focus {
            box-shadow: 0 0 0 .25rem rgba(95, 184, 126, 0.25);
            border-color: var(--primary-color);
        }
    }
    textarea {
        height: 170px;
        resize: none;
    }
}

.contact-form button, .get-in-touch a,
.product-left > a {
    background: var(--primary-color);
    border: none;
    border-radius: 10px;
    color: white;
    font: 14px 'Poppins Light', 'Helvetica Light';
    line-height: 21px;
    width: 100%; height: 45px;
    transition: all 0.3s ease;
    &:hover { background: var(--hover-color); }
}

.contact-right { 
    width: calc(50% - 15px);
    iframe {
        border-radius: 10px;
        width: 100%;
        height: 260px;
    }
}

.contact-info {
    background: var(--tertiary-color);
    border-radius: 10px;
    color: black;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 20px;
    padding-left: 30px;
    margin-bottom: 10px;
    width: 100%; height: 90px;
    transition: all 0.3s ease;
    &:hover {
        background: var(--primary-color);
        color: white;
    }
}

.icon {
    background: var(--primary-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    transition: all 0.3s ease;
    img {
        filter: brightness(0) invert(1);
        transition: all 0.3s ease;
    }
    path:first-child { fill: white; transition: all 0.3s ease; }
    path:last-child { fill: var(--primary-color); transition: all 0.3s ease; }
}

.contact-info > div:last-child, .footer-contact a > div:last-child {
    display: flex;
    flex-direction: column;
    width: calc(100% - 82px);
    span:first-child {
        font: 16px 'Campton Medium', 'Helvetica Medium';
        line-height: 21px;
    }
    span:last-child {
        font: 14px 'Campton Light', 'Helvetica Light';
        line-height: 18px;
    }
}

.contact-info:hover .icon {
    background: white;
    img { filter: unset; }
    path:first-child { fill: var(--primary-color); }
    path:last-child { fill: white; }
}

footer {
    background: var(--secondary-color);
    padding: 80px 20px 40px !important;
}

.footer-content > hr {
    border-color: rgba(255, 255, 255, 0.2);
    margin: 80px 0 40px;
    opacity: 1;
}

.footer-top, .footer-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.footer-logo {
    max-width: 275px;
    > p {
        color: rgba(255, 255, 255, 0.75);
        font: 16px 'Campton Light', 'Helvetica Light';
        line-height: 21px;
        margin-bottom: 30px;
    }
}

.logo {
    display: block;
    margin-bottom: 35px;
    img { width: 212px; }
}

.socials {
    display: flex;
    gap: 10px;
    > a {
        background: rgba(213,213,213,0.16);
        border-radius: 50%;
        color: var(--primary-color);
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        width: 35px; height: 35px;
        transition: all 0.3s ease;
        img { transition: all 0.3s ease; }
        &:hover { 
            background: var(--primary-color); 
            color: white;
            img { filter: brightness(0) invert(1); }
        }
    }
}

.footer-menu {
    display: flex;
    flex-direction: column;
    a {
        color: white;
        text-decoration: none;
        font: 16px 'Campton Light', 'Helvetica Light';
        line-height: 21px;
        margin-bottom: 17px;
        transition: all 0.3s ease;
        &:hover { color: var(--hover-color); }
        &:last-child { margin: 0; }
    }
}

.footer-menu, .footer-contact {
    > p:first-child {
        color: white;
        font: 18px 'Campton Medium', 'Helvetica Medium';
        line-height: 23px;
        margin-bottom: 23px;
    }
}

.footer-contact a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    > div:first-child {
        background: var(--primary-color);
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 29px; height: 29px;
        img { 
            filter: brightness(0) invert(1); 
            width: 10px;
        }
    }
    > div:last-child { width: 125px; }
    &:last-child { margin-bottom: 0; }
}

.creator, .copyright {
    color: rgba(255, 255, 255, 0.75);
    font: 14px 'Campton Light', 'Helvetica Light';
    line-height: 18px;
    a {
        color: var(--primary-color);
        text-decoration: none;
    }
}

.footer-bottom div {
    display: flex;
    align-items: center;
    gap: 20px;
    a {
        color: white;
        text-decoration: none;
        font: 14px 'Campton Light', 'Helvetica Light';
        line-height: 18px;
    }
}

.about-intro {
    padding: 60px 20px;
    .content1 { align-items: center; }
}

.about-us {
    display: flex;
    align-items: flex-start;
    gap: 35px;
    margin-bottom: 55px;
    > div { width: calc(100% - 570px); }
    > img {
        border-radius: 10px;
        width: 540px; height: 325px;
        object-fit: cover;
        margin-top: 50px;
    }
    .text {
        color: black;
        font: 14px 'Poppins Light', 'Helvetica Light';
        line-height: 19px;
        strong, b { font-size: 12px; }
        * { font-family: 'Poppins Light', 'Helvetica Light' !important; }
    }
}

.about-company .page-title {
    font-size: 30px;
    line-height: 40px;
}

.about-intro1 {
    background: var(--tertiary-color);
    padding: 75px 20px;
    .content { gap: 50px; }
}

.about-intro2 { 
    padding: 50px 20px 40px; 
    .text {
        color: black;
        font: 16px 'Poppins Light', 'Helvetica Light';
        line-height: 21px;
        margin-bottom: 40px;
        max-width: 990px;
    }
    hr {
        border-color: var(--tertiary-color);
        margin: 0 0 20px;
        opacity: 1;
    } 
}
 
.about-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    padding: 35px 25px 40px 40px;
    width: calc(50% - 25px);
    .icon { margin-bottom: 15px; }
    .name {
        color: black;
        font: 30px 'Campton Medium', 'Helvetica Medium';
        line-height: 32px;
        margin-bottom: 15px;
    }
    .text {
        color: #747474;
        font: 16px 'Poppins Light', 'Helvetica Roman';
        line-height: 25px;
        display: -webkit-box;
        height: 150px;
        line-clamp: 6;
        -webkit-line-clamp: 6;
        overflow: hidden;
        -webkit-box-orient: vertical;
        margin-bottom: 20px;
    }
}

.checkpoints {
    color: #747474;
    font: 18px 'Poppins Light', 'Helvetica Roman';
    line-height: 22px;
    div {
        display: flex;
        align-items: center;
        gap: 17px;
        margin-bottom: 8px;
        &:last-child { margin-bottom: 0; }
    }
}

.about-quote {
    background: var(--tertiary-color);
    font: 30px 'Poppins Medium', 'Helvetica Roman';
    line-height: 36px;
    padding: 0 20px;
    height: 200px;
    p {
        max-width: 950px;
        text-align: center;
        margin: 0;
        span { color: var(--primary-color); }
    }
}

.project-filter-cont, .project-filter-cont1 {
    background: white;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    height: 110px;
    position: sticky;
    position: -webkit-sticky;
    top: 100px;
    z-index: 999;
    margin-bottom: 50px;
}

.project-filter-cont1 { 
    margin: 0;
    .project-filter { justify-content: center; }
}

.project-filter {
    align-items: center;
    gap: 20px;
}

.proj-filter-card input { display: none; }
.proj-filter-card label, .project-filter > a {
    background: var(--tertiary-color);
    border-radius: 10px;
    color: black;
    cursor: pointer;
    text-decoration: none;
    font: 16px 'Campton Medium', 'Helvetica Roman';
    padding: 15px 35px;
    transition: all 0.3s ease;
    &:hover { 
        background: #EEF7F2; 
        color: black;
    }
}

.proj-filter-card.active label, .proj-filter-card.active:hover label,
.project-filter > a.active {
    background: var(--primary-color);
    color: white; 
}

.pagination {
    display: flex;
    gap: 5px;
    & button {
        background: white;
        border: 1px solid #E8F0F7;
        border-radius: 5px;
        color: #7A92A8;
        font: 13px 'Campton Medium';
        line-height: normal;
        line-height: 18px;
        width: 50px;
        height: 50px;
        transition: all 0.3s ease;
        &.active, &:hover { 
            background: var(--primary-color); 
            border-color: var(--primary-color);
            color: white;
        }
    }
}

.proj-page { padding-bottom: 70px; }
.go-back-cont {
    background: var(--tertiary-color);
    align-items: center;
    height: 80px;
    margin-bottom: 50px;
    a {
        color: var(--secondary-color);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 15px;
        font: 16px 'Campton Medium', 'Helvetica Roman';
        line-height: 21px;
        transition: all 0.3s ease;
        i { font-size: 12px; }
        &:hover { color: var(--primary-color); }
    }
}

.proj-tag { margin-bottom: 30px; }
.proj-name {
    color: var(--secondary-color);
    font: 50px 'Poppins Medium', 'Helvetica Medium';
    line-height: 60px;
    margin-bottom: 15px;
}

.proj-type {
    color: var(--secondary-color);
    font: 20px 'Campton Lignt', 'Helvetica Light';
    line-height: 24px;
    margin-bottom: 35px;
}

.proj-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
}

.proj-block {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    div {
        display: flex;
        flex-direction: column;
    }
    span:first-child {
        color: #95A5B5;
        font: 14px 'Campton Light', 'Helvetica Light';
        line-height: 19px;   
    }
    span:last-child {
        color: black;
        font: 16px 'Campton Light', 'Helvetica Light';
        line-height: 21px;
    }
}

.project-images {
    display: flex;
    flex-direction: column;
    gap: 20px; 
    > div { width: 100%; }
}

.product-slide {
    border-radius: 20px;
    display: flex !important;
    width: 100%; height: 670px !important;
}

.project-img-button {
    border-radius: 20px;
    cursor: pointer;
    display: flex !important;
    width: 375px !important; 
    height: 215px !important;
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 20px;
        border: 0px solid transparent;
        pointer-events: none;
        transition: all 0.3s ease;
    }
}

.project-img-button.active::after, 
.project-img-button:hover::after {
    border-color: var(--primary-color);
    border-width: 5px;
}

.product-slide img, .project-img-button img {
    border-radius: 20px;
    width: 100%; height: 100%;
    object-fit: cover;
}

.proj-info1 {
    background: var(--tertiary-color);
    padding: 65px 20px;
    .content {
        justify-content: space-between;
        gap: 20px;
    }
}

.proj-block1 {
    background: white;
    border-radius: 20px;
    width: calc((100% - 40px) / 3);
    min-height: 215px;
    padding: 35px 10px 40px 40px;
    &:nth-child(3) img { width: 21px; }

    img { margin-bottom: 10px; } 
    p:first-of-type {
        color: #5B5B5B;
        font: 18px 'Poppins Light', 'Helvetica Light';
        line-height: 24px ;
        margin-bottom: 5px;
    }
    p:last-child {
        color: black;
        font: 40px 'Campton Medium', 'Helvetica Medium';
        line-height: 50px;
        margin-bottom: 0;
    }
}

.share-links {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    span {
        color: var(--secondary-color);
        font: 12px 'Campton Medium', 'Helvetica Regular';
        line-height: 16px;
    }
    div {
        background: var(--tertiary-color);
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        width: 35px; height: 35px;
        transition: all 0.3s ease;
        img { width: 7px; filter: brightness(0) invert(0); transition: all 0.3s ease; }
        &:hover {
            background: var(--primary-color);
            color: white;
            img { filter: brightness(0) invert(1); }
        }
    }
}
.copy-link.copied { transform: scale(1.2); }

.get-in-touch {
    background: var(--secondary-color);
    border-bottom: 1px solid rgba(232, 240, 247, 0.27);
    padding: 45px 20px 60px;
    .content1 { align-items: center; }
    p:first-child {
        color: white;
        text-align: center;
        font: 40px 'Campton Medium', 'Helvetica Roman';
        line-height: 50px;
        margin-bottom: 25px;
    }
    p:nth-child(2) {
        color: white;
        text-align: center;
        font: 20px 'Campton Light', 'Helvetica Light';
        line-height: 27px;
        margin-bottom: 35px;
    }
    a {
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        width: 160px;
    }
}

.get-in-touch div {
    display: flex;
    gap: 20px;
    a:last-child {
        background: transparent;
        border: 1px solid white;
        &:hover {
            background: white;
            color: black;
        }
    }
}

.curr-product-cont {
    background: #FCFCFC;
    padding: 100px 20px;
}

.curr-product {
    display: flex;
    gap: 100px;
}

.product-left {
    padding-top: 20px;
    max-width: 680px;
    .name {
        color: black;
        font: 50px 'Campton Medium', 'Helvetica Medium';
        line-height: 60px;
        margin-bottom: 20px;
    }
    .desc {
        color: var(--primary-color);
        font: 20px 'Poppins Regular', 'Helvetica Roman';
        line-height: 24px;
        margin-bottom: 30px;
    }
    .text {
        color: black;
        font: 16px 'Poppins Light', 'Helvetica Light';
        line-height: 25px;
        margin-bottom: 40px;
        * { font-family: 'Poppins Light', 'Helvetica Light' !important; }
    }
    > a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        text-decoration: none;
        width: 255px;
    }
}

.tech-specic {
    background: var(--tertiary-color);
    padding: 50px 20px 70px;
}

.prod-table {
    --bs-table-striped-bg: var(--tertiary-color) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16) !important;
    border-radius: 0 0 10px 10px !important;
    margin: 0 !important;
}

.prod-table > tbody > tr:nth-child(2n) { border-color: white !important; }
.prod-table > tbody > tr:nth-child(2n + 1) { border-color: var(--tertiary-color) !important; }
.prod-table > tbody > tr:last-child { border-color: transparent !important; }

.prod-table th {
    background: var(--secondary-color) !important;
    color: white !important;
    font: 20px 'Campton Medium', 'Helvetica Roman';
    line-height: 24px;
    padding: 22px 0 !important;
    text-align: center;
    &:first-child { 
        border-radius: 10px 0 0 0 !important;
        padding: 25px 0 25px 50px !important; 
        text-align: start;
    }
    &:last-child { 
        border-radius: 0 10px 0 0 !important;
        padding: 25px 50px 25px 0 !important; 
    }
}

.prod-table td {
    font: 18px 'Poppins Light', 'Helvetica Light';
    line-height: 24px;
    padding: 22px 0 !important;
    text-align: center;
    &:first-child { padding: 22px 0 22px 50px !important; text-align: start; }
    &:last-child { padding: 22px 50px 22px 0 !important; }
}

.prod-table tr:nth-child(2n) td { color: #7A92A8 !important; }
.prod-table tr:nth-child(2n + 1) td { color: var(--secondary-color) !important; }

.prod-table tr:last-child td:first-child { border-radius: 0 0 0 10px !important; }
.prod-table tr:last-child td:last-child { border-radius: 0 0 10px 0 !important; }

.prod-table > tbody > tr:hover { border-color: #EEF7F2 !important; }
.prod-table > tbody > tr > * { transition: all 0.3s ease !important; }
.prod-table > tbody > tr:hover > * { --bs-table-bg-type: #EEF7F2 !important; }

.benefits-cont { padding: 80px 20px 100px; }
.benefits {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 90px;
    > div {
        background: var(--tertiary-color);
        border-radius: 20px;
        flex-direction: column;
        gap: 5px;
        padding: 0 10px;
        width: calc(25% - 15px);
        min-height: 245px;
        transition: all 0.3s ease;
        > * { transition: all 0.3s ease; }
        &:hover { 
            background: var(--primary-color);
            > * { color: white; }
        }
        p {
            color: black;
            font: 20px 'Campton Medium', 'Helvetica Roman';
            line-height: 24px;
            margin: 0;
            text-align: center;
        }
        span {
            color: #5B5B5B;
            text-align: center;
            max-width: 200px;
        }
    }
}

#prod5 { gap: 35px; }
.concrete-img {
    width: calc(100% - 715px);
    height: 355px;
    position: relative;
    img:first-child {
        border-radius: 20px;
        width: 100%; height: 100%;
        object-fit: cover;
    }
    img:last-child {
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }
    &::after {
        content: '';
        background: rgba(29, 41, 61, 0.2);
        border-radius: 20px;
        position: absolute;
        inset: 0;
        z-index: 1;
    }
}

.custom-select { display: none; }