@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

body, html {padding: 0;margin: 0;font-family: "Inter", serif;overscroll-behavior: contain;}

a {color: black;}

.mainWrapper {display: flex;flex-direction: row;height: 100vh;width: 100%;}

.leftHolder {position: relative;display: flex;width: 50%;height: 100%;background: rgba(216, 198, 178, 1);overflow: hidden;
    flex-direction: column;justify-content: center;align-content: center;align-items: center;}
.textHolder {font-size: 18px;color: rgba(54, 54, 53, 1);line-height: 26px;font-weight: 400;max-width: 512px;margin-top: 45px;margin-bottom: 45px;}
.textHolder > span {text-decoration: underline;text-decoration-thickness: 3%;text-underline-offset: 30%;text-underline-position: from-font;text-decoration-skip-ink: auto;}
img.logo {width: 217px;}

.oksLeft {position: absolute;width: 356px; height: 170px;top:-20px;left: -70px;transform: rotate(45deg);
    background-color: rgba(216, 198, 178, 1);background-image: url("images/oks.png");mix-blend-mode: multiply;background-size: cover;z-index: 2;}
.oksRight {position: absolute;width: 356px; height: 170px;bottom:-40px;right: -100px;transform: rotate(225deg);
    background-color: rgba(216, 198, 178, 1);background-image: url("images/oks.png");background-blend-mode: multiply;background-size: cover;z-index: 0;}
.mainImageHolder {width: 429px;max-width: 95%;}
.mainImageHolder > img {position: relative;width: 100%;border: 10px solid rgba(241, 231, 220, 1);z-index: 1;}

.customButton {display: inline-flex;text-transform: uppercase;padding: 21px 24px;border-radius: 97px;margin-top: 95px;font-weight: 800;font-size: 16px;letter-spacing: 0.03em;gap: 15px;align-items: center;
    cursor: pointer;}
.customButton > .text {height: 17px;}
.customButton.brown {color: white;background: rgba(140, 110, 80, 1);box-shadow: 0 2px 0 0 rgba(131, 103, 74, 1);}
.customButton.brown:hover {background: rgb(97, 76, 55);transition: .4s;}

.brownArrow {width:31px;height: 31px;background: url('images/arrow_brown.svg');background-size: cover;}

.mainImage {position: relative;max-height: 85vh;border: 10px solid rgba(241, 231, 220, 1);z-index: 1;}

/* Language */

.languageHolder {display: flex;position: absolute;top: 10px;right: 20px;background: rgba(255,255,255, 0.6);z-index: 2;gap: 12px;height: 35px;align-items: center;border-radius: 17px;padding:0 8px;}
.flag {width:25px;height: 25px;}
.flag.eng {background: url('images/uk.svg');background-size: cover;}
.flag.est {background: url('images/ee.svg');background-size: cover;}

/* Fibenol */

.rightHolder {position: relative;width: 50%;height:100%;background: rgba(241, 231, 220, 1);}

.rightHolder > .bgImage > .contentHolder {display: flex;flex-direction: column;justify-content: center;width: 100%;height: 100vh;}
.contentPadding {padding-left: 118px;}

.textHolder.right {color: rgba(0, 0, 0, 1);width:100%;}

.customButton.green {color: rgba(51, 94, 83, 1);background: rgba(204, 229, 212, 1)}
.customButton.green:hover {background: rgb(164, 184, 170);transition: .4s;}
.greenArrow {width:31px;height: 31px;background: url('images/green_arrow.svg');background-size: cover;}

.linkHolder {display: flex;align-items: center;gap: 10px;}

@media all and (max-width: 1200px) {
    .contentPadding {padding-left: 50px;}
    .leftHolder {}
}

@media all and (max-width: 800px) {

    body, html {margin:0;padding:0;overflow: hidden;height: 100%;}

    .mainWrapper {flex-direction: column-reverse;overflow: hidden;max-height: 100svh;justify-content: center;}
    .leftHolder {flex: 1;width: 100svw;overflow: unset;padding-bottom: 2vh; height:50svh;}
    .rightHolder {flex: 1;width: 100svw;}

    .contentPadding {display: flex;flex-direction: column;justify-content: center;padding-left: 66px;padding-top: 5vh;}

    .contentHolder {}
    .leftHolder > .contentHolder {padding-left: 0 !important;}
    .rightHolder > .bgImage > .contentHolder {position: relative;overflow: hidden;padding-bottom: 60px;height: auto;}

    .textHolder {font-size: 24px;line-height: 33px;font-weight: 400;margin-top: 4vh;}
    .textHolder > span {text-decoration-line: underline;text-decoration-style: solid;text-underline-position: from-font;text-decoration-skip-ink: auto;text-underline-offset: 10%;    }

    .customButton {font-size: 16px;padding:10px 15px;margin-top: 54px;}

    .languageHolder {right:5px;}

    .oksLeft {width: 230px;height: 110px;}

    .mainImage {height: 40vh;margin-top: 3vh;}

    img.logo {width: 156px;}
}

@media all and (max-width: 510px) {

    .contentHolder {padding-left: 35px;padding-top: 0;padding-bottom: 0; }
    .contentHolder.first {padding-top:0;}
    .contentPadding {padding-left: 0;}
    .rightHolder > .bgImage > .contentHolder {display: flex;flex-direction: column;padding-bottom: 0;justify-content: center;}

    .textHolder {max-width: 295px;font-size: 18px;line-height: 26px;width: 95%;}

    .customButton {padding: 10px 15px;}
}

@media all and (max-width: 340px) {

}

/*@media (max-width: 800px) and (orientation: landscape) {
    .mainWrapper {
        flex-direction: row;
        width: 100svw;
        height: 100vh;
        margin:0;
    }

    .leftHolder, .rightHolder {
        flex: 1;
    }

    .contentPadding {padding-left: 15px;padding-top:0;}
    .contentHolder {padding-top: 0;}
    img.fiboLogo {margin-bottom: 40px;margin-top: 15px;}

    .rightHolder > .bgImage > .contentHolder {height: 100vh;}
    .textHolder.right {margin-top: 0;}
}