@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: linear-gradient(319.5deg, #E6E6E6 0%, #FFFFFF 59%, #D2D2D2 100%);overflow: hidden;
            flex-direction: column;justify-content: center;align-content: center;align-items: center;}
.textHolder {font-size: 36px;color: rgba(54, 54, 53, 1);line-height: 50px;font-weight: 300;max-width: 512px;margin-top: 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: 212px;}

.graanulCircle {position: absolute;width: 104px; height: 104px;top:-20px;right: -70px;border:50px solid rgba(140, 110, 80, 1);border-radius: 50%;}

.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;}

/* 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: linear-gradient(320.05deg, rgba(37, 81, 69, 0) 0%, rgba(49, 93, 81, 0.5) 30.18%, #386559 58.19%, #406E62 97.71%), url('images/tehas.png');
    /*background-blend-mode: luminosity;*/background-size: cover;}
.rightHolder > .bgImage {width: 100%;min-height:100%;background: rgba(37, 81, 69, .9)}
.fibeMark {position: absolute;width:185px; height: 185px;background: url('images/fibonol_dot.svg') no-repeat;background-size: cover;top:0;right:0;}

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

.textHolder.right {color: rgba(204, 229, 212, 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;}

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

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

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

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

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

    .graanulCircle {width: 74px;height: 74px;border: 37px solid rgba(140, 110, 80, 1);top: -70px;}

    img.logo {width: 182px;}
    .fibeMark {width: 123px;height:123px;top: -25px;right: -30px;}
    img.fiboLogo {width: 183px;margin-top: 15px;}

    .contentHolder {padding-top: 60px;}
    .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;}
}

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

    .contentHolder {padding-left: 15px;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: 95%;font-size: 18px;line-height: 30px;}

    .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;}
}