:root {
    /* 1800*/
    --pad: clamp(15px, 9.6vw, 185px);
    --toppad: clamp(40px, 6vw, 115px);
    --botpad: clamp(40px, 6vw, 115px);
    --content-pad: clamp(20px, 3vw, 50px);
    --content-pad-right: clamp(20px, 7.8vw, 150px);
}



@media (max-width: 1500px){
    :root {
        --pad: clamp(15px, 8vw, 450px);
    }
}

@media (max-width: 1200px){
    :root {
        --pad: clamp(15px, 6vw, 450px);
    }
}

@media (max-width: 900px){
    :root {
        --pad: clamp(15px, 5vw, 450px);
    }
}

body{
    color: #06151A;
    background: #FFFFFF;
}



.container{

    animation: startopa 0.4s linear forwards;

    animation-direction: alternate;

    opacity: 0.01;

    position: relative;

    overflow: hidden;

}



@keyframes startopa {

    from {opacity: 0.01; }

    to { opacity: 1;}

}



.project-pads{

    padding-left: var(--pad);

    padding-right: var(--pad);   

}



.project-pads-left{

    padding-left: var(--pad);

}



.project-pads-right{

    padding-right: var(--pad);

}



.topbotpad{

    padding-top: var(--toppad);

    padding-bottom: var(--botpad);

}



.toppad{

    padding-top: var(--toppad); 

}



.botpad{

    padding-bottom: var(--botpad);

}



.content-pad{

    padding: var(--content-pad);

    padding-right: var(--content-pad-right);

}


h1, h2, h3, h4, h5, h6{
    font-family: "Passion One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

h1{
    font-size: var(--font46);
    margin-bottom: 20px;
    color: #12313D;
}

h2{
    font-size: var(--font42);
    margin-bottom: 20px;
    color: #12313D;
}

h3{
    font-size: var(--font36);
}

h4{
    font-size: var(--font28);
}

h5{
    font-size: var(--font24);
}

h6{
    font-size: var(--font19);
}

p{
    font-size: var(--font19);
    letter-spacing: 0.5px;
    padding-bottom: 1em;
    line-height: 1.35em;
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal; 
}

.p16 p{
    font-size: var(--font16);
}

a, li{
    font-size: var(--font19);
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal; 
}

.btn{
    font-size: var(--font20);
    font-style: normal;
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 30px;
    width: 275px;
    max-width: 100%;
    border-radius: 27px;
    padding: 10px 20px;
    color: #fff;
    text-transform: uppercase;
}



.btn.blue{

    background-color: #2D5463;

}



.btn.green{

    background-color: #6ABCA2;

}



.btn svg{

    align-self: center;

    height: var(--font18);

}



.btn:hover svg{

    animation: sarrow 0.3s infinite linear;

    animation-direction: alternate;

}



@keyframes sarrow {

    from {margin-right: 0px;}

    to {margin-left: 5px;}

}

    

.banner-content {
    -webkit-mask-size: cover, clamp(40px, 7.5vw, 145px) clamp(40px, 7.5vw, 145px);
    mask-size: cover, clamp(40px, 7.5vw, 145px) clamp(40px, 7.5vw, 145px);
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top-left-radius: 34px;
}



.plate-full{

    mask-image: linear-gradient(white), url(cornerwhitebot.svg), url(cornerwhite.svg);

    -webkit-mask-image: linear-gradient(white), url(cornerwhitebot.svg), url(cornerwhite.svg);

    -webkit-mask-repeat: no-repeat;

    mask-repeat: no-repeat;

    -webkit-mask-position: top left, bottom left, top right;

    mask-position: top left, bottom left, top right;

    mask-composite:  subtract, add;

    -webkit-mask-composite: subtract, add;

}



.plate{

    mask-image: linear-gradient(white), url(cornerwhite.svg);

    -webkit-mask-image: linear-gradient(white), url(cornerwhite.svg);

    -webkit-mask-repeat: no-repeat;

    mask-repeat: no-repeat;

    -webkit-mask-position: top left, top right;

    mask-position: top left, top right;

    mask-composite: subtract;

    -webkit-mask-composite: subtract;

}



.banner-content-helper{

    align-self: end;

}



.banner-content-content{

    max-width: 500px;

}



#banner-videocontent img, #banner-videocontent iframe{

    aspect-ratio: 16/9;

    width: 100%;

}



.txtimgvid-content-right img{
    -webkit-mask-size: cover, clamp(30px, 6.3vw, 120px) clamp(30px, 6.3vw, 120px), clamp(30px, 6.3vw, 120px) clamp(30px, 6.3vw, 120px);
    mask-size: cover, clamp(30px, 6.3vw, 120px) clamp(30px, 6.3vw, 120px), clamp(30px, 6.3vw, 120px) clamp(30px, 6.3vw, 120px);
    border-top-left-radius: 34px;
    border-bottom-right-radius: 34px;
    margin-bottom: 30px;
}



.txtimgvid-imgplate{
    -webkit-mask-size: cover, clamp(30px, 6.3vw, 120px) clamp(30px, 6.3vw, 120px), clamp(30px, 6.3vw, 120px) clamp(30px, 6.3vw, 120px);
    mask-size: cover, clamp(30px, 6.3vw, 120px) clamp(30px, 6.3vw, 120px), clamp(30px, 6.3vw, 120px) clamp(30px, 6.3vw, 120px);
    background-color: #6ABCA2;
    height: inherit;
    border-top-left-radius: 34px;
    border-bottom-right-radius: 34px;
    margin-left: -20px;
    margin-top: clamp(20px, 3vw, 50px);
    width: calc(100% - clamp(30px, 5.2vw, 120px));
}



.swap .content-pad{

    padding-left: var(--content-pad-right);

    padding-right: clamp(20px, 3vw, 50px);

}



.videoframe{

    aspect-ratio: 16/9;

    width: 100%;

}



.fullwimgtxt-content{

    grid-template-columns: 1fr 1fr;

    grid-template-rows: 1fr 200px auto;

}



.fullwimgtxt-content-image{

    grid-column: 1/3;

    grid-row: 1/3;

}



.fullwimgtxt-content-content{

    grid-column: 2;

    grid-row: 2/4;

    justify-self: end;

    align-self: end;

}



.fullwimgtxt-content-content{
    -webkit-mask-size: cover, clamp(30px, 6.3vw, 120px) clamp(30px, 6.3vw, 120px);
    mask-size: cover, clamp(30px, 6.3vw, 120px) clamp(30px, 6.3vw, 120px);
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top-left-radius: 34px;
}



.widebcgimgtxt-plate{

    -webkit-mask-size: cover, clamp(30px, 6.3vw, 120px) clamp(30px, 6.3vw, 120px), clamp(30px, 6.3vw, 120px) clamp(30px, 6.3vw, 120px);

    mask-size: cover, clamp(30px, 6.3vw, 120px) clamp(30px, 6.3vw, 120px), clamp(30px, 6.3vw, 120px) clamp(30px, 6.3vw, 120px);

    background-color: #6ABCA2;

    width: 100%;

    height: 100%;

    border-top-left-radius: 34px;

    border-bottom-right-radius: 34px;

    grid-column: 2;

    grid-row: 1/4;

}



.widebcgimgtxt-plate.green{

    background-color: #6ABCA2;

}



.widebcgimgtxt-plate.light-green{

    background-color: #C3E4DA;

}



.widebcgimgtxt-content{

    grid-template-columns: 100px auto;

    grid-template-rows: 30px 1fr 40px;

}



.widebcgimgtxt-content-helper{

    grid-column: 1/3;

    grid-row: 2;

    z-index: 1;

}



.widebcgimgtxt-content-image img{

    -webkit-mask-size: cover, clamp(30px, 6.3vw, 120px) clamp(30px, 6.3vw, 120px), clamp(30px, 6.3vw, 120px) clamp(30px, 6.3vw, 120px);

    mask-size: cover, clamp(30px, 6.3vw, 120px) clamp(30px, 6.3vw, 120px), clamp(30px, 6.3vw, 120px) clamp(30px, 6.3vw, 120px);

    border-top-left-radius: 34px;

    border-bottom-right-radius: 34px;

}



.widebcgimgtxt-content-image{

    padding-right: clamp(20px, 3vw, 50px);

}



.txtimgvid-content-right.ratio12 img{

    border-top-left-radius: unset;

    border-bottom-right-radius: unset;

}



.ibudtabs{

    display: flex;

    flex-wrap: wrap;

}



.ibudtab{
    background-color: #fff;
    padding: 15px 70px 15px 50px;
}

.ibudtab.active{
    background-color: #88C9B5;
}

.ibudtab, .ibudtab-helper{
    -webkit-mask-size: cover, clamp(20px, 2.1vw, 40px) clamp(20px, 2.1vw, 40px);
    mask-size: cover, clamp(20px, 2.1vw, 40px) clamp(20px, 2.1vw, 40px);
}

.ibudtab-helper{
    background-color: #88C9B5;
    padding: 1px;
    padding-bottom: 0px;
    margin-left: -1px;
}



.ibudcard{

    z-index: -1;

}



.ibudcard.active{

    z-index: 1;

}



.ibudtabs{

    border-bottom: 1px solid #88C9B5;

}



.imggallery{

    padding-top: 20px;

}



.staff-card{

    grid-template-columns: 190px 1fr;

    gap: 20px;

}



.company-card img{

    max-height: 52px;

    object-fit: contain;

}



.companies-cards{

    display: grid;

    gap: 100px;

}



.company-card-staff{

    gap: 50px 20px;

}



.company-card{

    border-bottom: 1px solid #88C9B5;

    padding-bottom: 20px;

}



.company-card-staff{

    margin-top: 60px;

}



.staff-card-right a{

    color: #44AE8C;

}



.staff-card-left img{

    aspect-ratio: 1/1;

    width: 190px;

    border-radius: 50%;

}



#txtbanner{

    background-color: #88C9B5;

}



#txtbanner h1{

    align-self: end;

    margin-bottom: 30px;

}



footer{

    background-color: #2D5463;

    border: 1px solid #707070;

    color: #8AABB8;

}



.footer-content{

    grid-template-columns: 1fr max-content 1fr;

    gap: clamp(30px, 6vw, 115px);

}



.footer-content-left-text{

    max-width: 380px;

}



.footer-content-center{

    display: grid;

    height: 100%;

    grid-template-rows: 1fr 50px 1fr;

    gap: 20px;

}



.footerline{

    background-color: #527C8D;

    width: 1px;

    height: 100%;

    justify-self: center;

}



.footer-content-left, .footer-content-right-part1, .footer-content-right-part2{

    padding-top: 60px;

    padding-bottom: 90px;

}



.footer-content-center svg{

    height: 50px;

}



.footer-content-right{

    display: grid;

    grid-template-columns: 250px 2fr;

}



footer h5{

    color: #fff;

    margin-top: 10px;

    font-size: 24px;

}



#footer-logo{

    height: 50px;

    width: auto;

    padding-bottom: 30px;

}



#nav-basic, #txtbanner-helper, .companies-cards-helper{

    padding-left: 50px;

    padding-right: 50px;

}



#txtbanner-helper{

    display: grid;

    min-height: 184px;

}

.footer-content-right-part1-links{
    margin-top: 45px;
}

.staff-card-right h5{
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    color: #12313D;
    margin-bottom: 10px;
}



.staff-card-right a{

    color: #286854; 

}



#nav-basic{
    padding-top: 10px;
    padding-bottom: 10px;
}

footer a{
    font-size: var(--font16);
}

.ibudtab h4{
    color: #12313D;
}

#banner img{
    height: 100%;
}

#nav-section.nav-over-content{
    position: absolute;
    width: 100%;
}

#nav-section.nav-over-content #header-nav{
    background: rgba(255,255,255, 0.91);
    backdrop-filter: blur(7px);
}

@media (max-width: 1500px){
    .staff-card {
        grid-template-columns: 1fr;
        width: fit-content;
        margin: 0 auto;
    }

    .staff-card-left img {
        margin: 0 auto;
    }
}

@media (max-width: 1400px){
    .footer-content-right {
        display: grid;
        grid-template-columns: 200px 2fr;
    }

    #txtbanner-helper {
        display: grid;
    }
}

@media (max-width: 1200px){
    .ibudtab {
        padding: 13px 60px 10px 40px;
    }
}

@media (max-width: 1000px){
    .ibudtabs {
        border-bottom: unset;
    }

    .ibudtab-helper {
        padding-bottom: 1px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-content-left, .footer-content-right-part1, .footer-content-right-part2 {
        padding-top: 00px;
        padding-bottom: 0px;
    }

    .footer-content-center {
        grid-template-rows: 1fr;
        gap: 20px;
        grid-template-columns: 1fr 50px 1fr;
    }

    .footerline {
        width: 100%;
        height: 1px;
        justify-self: center;
        align-self: center;
    }

    footer{
        padding-top: 50px;
        padding-bottom: 70px;
    }

    .footer-content-right{
        grid-template-columns: 1fr 50px 1fr;
        gap: 20px;
    }

    .footer-content-right-part2{
        grid-column: 3;
    }

    .footer-content-right-part1-links {
        margin-top: 10px;
    }
}

@media (max-width: 900px){
    .txtimgvid-content.ugrid12{
        grid-template-columns: 1fr;
    }

    .txtimgvid-content.ugrid12 .txtimgvid-content-left{
        order: 2;
    }

    .txtimgvid-content.ugrid12 .txtimgvid-content-right{
        order: 1;
    }
}

@media (max-width: 800px){
    #banner{
        display: block;
    }

    .banner-content-helper.ugrid2{
        grid-template-columns: 1fr;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .txtimgvid-content.col-2 {
        grid-template-columns: 1fr;
    }

    .txtimgvid-content-left{
        order: 2;
    }

    .txtimgvid-content-right{
        order: 1;
    }

    .fullwimgtxt-content {
        grid-template-rows: 1fr 100px auto;
    }

    .fullwimgtxt-content-content {
        grid-column: 1/3;
    }

    .widebcgimgtxt-content {
        grid-template-columns: 30px auto;
        grid-template-rows: auto 50px 1fr;
    }

    .widebcgimgtxt-plate{
        grid-column: 1/3;
        grid-row: 1/4;
    }

    .widebcgimgtxt-content-helper {
        grid-column: 1/3;
        grid-row: 1/3;
    }

    .widebcgimgtxt-content-helper.ugrid2{
        grid-template-columns: 1fr;
    }

    .widebcgimgtxt-content-content{
        padding-bottom: 50px;
    }

    #txtbanner-helper {
        min-height: 110px;
    }
}

@media (max-width: 600px){
    .fullwimgtxt-content {
        grid-template-rows: 1fr 50px auto;
    }

    #nav-basic, #txtbanner-helper, .companies-cards-helper {
        padding-left: 0px;
        padding-right: 0px;
    }

    #nav-burger-navpart {
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .nav-burger-navpartul{
        margin: 0 auto;
    }
}

@media (max-width: 500px){
    .btn {
        width: 100%;
        max-width: 210px;
        padding: 8px 15px;
    }

    .footer-content-right {
        grid-template-columns: 1fr;
    }

    .footer-content-right-part2 {
        grid-column: unset;
    }
}