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


html,body{}

html.smooth{ scroll-behavior: smooth;}
body{ font-family: 'Amiri', serif;}

.hidden{ display: none !important;}

[data-scene]{ transition: all .2s ease;}
[data-scene]:not(.active){ opacity: 0; pointer-events: none;}

.container{ transition: all .2s ease; display: flex; flex-direction: column; overflow: hidden;}
.container.hide{ opacity: 0; pointer-events: none; transition: all .2s ease;}
.container > div{ --w: 430px; display: flex;}
.container > div .left{ transition: all .1s ease; overflow: hidden; padding: 20px; height: 100dvh; position: fixed; top: 0; left: 0; width: calc(100% - var(--w));}
.container > div .left.sheep{ background-color: #63a2c7;}
.container > div .left > div:not(.fw){ position: absolute; inset: 20px; display: flex; align-items: center;}
.container > div .left > div:not(:has(.active)){ pointer-events: none;}
.container > div .left > .fw{ position: absolute; left: 0; display: flex; align-items: center; width: 100%; height: 100%;}
.container > div .left > .fw img{ width: 120%;}
.container > div .left > div .img{ max-width: 750px; display: flex; align-items: center; overflow: hidden; justify-content: center;}
.container > div .left > div .img > img{ width: 100%; height: 100%; object-fit: cover;}
.container > div .left > div .abstract{ position: absolute; z-index: 100;}
.container > div .left > div .abstract .btn-1{ cursor: pointer; background-color: white; border: 1px solid #B6B9BF; border-radius: 10px; gap: 10px; padding: 0 20px; height: 35px; width: fit-content; display: flex; align-items: center; justify-content: center; transition: all .2s ease;}
.container > div .left > div .abstract .btn-1 img{ transition: all .2s ease;}
.container > div .left > div .abstract .btn-1:hover{ background-color: black; color: #fff;}
.container > div .left > div .abstract .btn-1:hover img{ filter: invert(1);}
.container > div .left > div .abstract .scale{ background-color: #fff; border: 1px solid #B6B9BF; border-radius: 10px; overflow: hidden; width: 35px; display: flex; flex-direction: column;}
.container > div .left > div .abstract .scale button{ cursor: pointer; position: relative; width: 100%; background-color: #fff; aspect-ratio: 1; border: none; outline: none; transition: all .2s ease;}
.container > div .left > div .abstract .scale button:hover{ background-color: #000;}
.container > div .left > div .abstract .scale button svg :where(path, rect){  transition: all .2s ease;}
.container > div .left > div .abstract .scale button:hover svg :where(path, rect){  fill: white;}
.container > div .left > div .abstract .scale button .minus{ transform: translateY(-2px);}
.container > div .left > div .abstract .scale button:first-child{}
.container > div .left > div .abstract .scale button:first-child::before{ content: ''; display: inline-block; width: calc(100% - 10px); top: 100%; left: 50%; transform: translateX(-50%); height: 1px; z-index: 2; background-color: #B6B9BF; position: absolute;}
.container > div .left > div .top-left{ top: 0; left: 0;}
.container > div .left > div .bottom-left{ bottom: 0; left: 0;}
.container > div .left > div > *:not(.abstract):not(.bido){ opacity: 0; pointer-events: none; transition: all .2s ease; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; max-height: 100%;}
.container > div .left > div > *:not(.abstract):not(.bido).active{ opacity: 1; pointer-events: all;}
.container > div .right{ margin-left: auto; width: var(--w); min-width: var(--w); border-left: 5px solid #f7f7f7; line-height: 1.4;}
.container > div .right .txt-area{ width: 100%; display: flex; flex-direction: column; padding: 50px 100px 50px 50px;}
.container > div .right .txt-area h1{ font-weight: 600; font-size: 50px; line-height: 1.2;}
.container > div .right .txt-area p{ font-size: 20px; font-weight: 500; color: #122a3e;}
.container > div .right .steps{ position: fixed; right: 0; top: 0; height: 100%; width: 50px; border-left: 5px solid #f7f7f7; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px;}
.container > div .right .steps > div{ pointer-events: none; --size: 10px; width: var(--size); height: var(--size); min-width: var(--size); border-radius: 50%; background-color: #f0f0f0; border: 1px solid #ccc; cursor: pointer; transition: all .2s ease;}
.container > div .right .steps > div:hover{ border-color: #122a3e;}
.container > div .right .steps > div.active{ border-color: #122a3e; background-color: #63a2c7;}

.container > div .right .trigger{ opacity: 0; pointer-events: none; position: fixed; right: 0; bottom: 100px; height: 2px; background-color: red; width: var(--w);}

.mask-1{ width: 100px; height: 50px; position: absolute; right: 0; z-index: 100; bottom: 0; background-color: #fff;}


.fl-layout-inner{ display: none !important;}


::-webkit-scrollbar{ border-radius: 15px; width: 12px; background-color: #333b43; padding: 2px; border: 2px green;}
::-webkit-scrollbar-thumb{ border-radius: 15px; background-color: #6daed5;}


.intro-container { position: fixed; inset: 0; z-index: 101; background: radial-gradient(#63a2c7,#1b5373); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: all .5s ease;}
.intro-container.hide{ opacity: 0; pointer-events: none;}
.intro-container img{ width: 200px; transform: scale(1); transition: transform 1.5s; pointer-events: none;}
.intro-container .bar{ background-color: #d2d9dc; width: 80%; max-width: 600px; height: 5px; box-shadow: inset 0 0 3px 0 rgb(7, 71, 119); display: flex; position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); border-radius: 100px;}
.intro-container .bar > div{ background: linear-gradient(90deg, #074a81, #122a3e) ; height: 100%; border-radius: 100px; width: 0%;}



footer{ pointer-events: none; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;}
footer > div{ transition: all .2s ease; opacity: 0; transform: translateY(50px); font-size: 16px; display: flex; flex-direction: column; align-items: center;}
footer.active{ pointer-events: all;}
footer.active > div{ opacity: 1; transform: translateY(0);}
footer > div > div{ display: flex; align-items: center; gap: 7px;}
footer > div a{ text-decoration: none; color: inherit;}
footer > div a:hover{ text-decoration: underline; text-decoration-color: #999;}
footer > div img{ height: 50px; margin-bottom: 20px;}
footer > div strong{ font-size: 18px; font-weight: 900;}


.scaled-img-wrapper{ overflow: visible !important;}
.scaled-img-wrapper > img{ }


@media screen and (max-width: 998px){
    .container > div{ --w: 350px;}
    .container > div .right .txt-area h1{ font-size: 40px;}
    .container > div .right .txt-area p{ font-size: 18px;}
}

@media screen and (max-width: 668px){
    .container > div{ min-height: 100dvh; padding-top: 50dvh;}
    .container > div .left{ width: calc(100% - 50px); height: 50dvh; background-color: #fff;}
    .container > div .right{ height:  fit-content; margin-top: auto;}
    .container > div .right{ width: 100%; min-width: unset;}
    .container > div .right .steps{ background-color: #fff;}
    .container > div .right .txt-area{ padding: 50px 80px 50px 30px;}
}






















.mb-0 { padding-bottom: 0; }
.mb-px { padding-bottom: 1px; }
.mb-1 { padding-bottom: 2px; }
.mb-2 { padding-bottom: 4px; }
.mb-3 { padding-bottom: 6px; }
.mb-4 { padding-bottom: 8px; }
.mb-5 { padding-bottom: 10px; }
.mb-6 { padding-bottom: 12px; }
.mb-7 { padding-bottom: 14px; }
.mb-8 { padding-bottom: 16px; }
.mb-9 { padding-bottom: 18px; }
.mb-10 { padding-bottom: 20px; }
.mb-11 { padding-bottom: 22px; }
.mb-12 { padding-bottom: 24px; }
.mb-13 { padding-bottom: 26px; }
.mb-14 { padding-bottom: 28px; }
.mb-15 { padding-bottom: 30px; }
.mb-16 { padding-bottom: 32px; }
.mb-17 { padding-bottom: 34px; }
.mb-18 { padding-bottom: 36px; }
.mb-19 { padding-bottom: 38px; }
.mb-20 { padding-bottom: 40px; }
.mb-21 { padding-bottom: 42px; }
.mb-22 { padding-bottom: 44px; }
.mb-23 { padding-bottom: 46px; }
.mb-24 { padding-bottom: 48px; }
.mb-25 { padding-bottom: 50px; }
.mb-26 { padding-bottom: 52px; }
.mb-27 { padding-bottom: 54px; }
.mb-28 { padding-bottom: 56px; }
.mb-29 { padding-bottom: 58px; }
.mb-30 { padding-bottom: 60px; }
.mb-31 { padding-bottom: 62px; }
.mb-32 { padding-bottom: 64px; }
.mb-33 { padding-bottom: 66px; }
.mb-34 { padding-bottom: 68px; }
.mb-35 { padding-bottom: 70px; }
.mb-36 { padding-bottom: 72px; }
.mb-37 { padding-bottom: 74px; }
.mb-38 { padding-bottom: 76px; }
.mb-39 { padding-bottom: 78px; }
.mb-40 { padding-bottom: 80px; }
.mb-41 { padding-bottom: 82px; }
.mb-42 { padding-bottom: 84px; }
.mb-43 { padding-bottom: 86px; }
.mb-44 { padding-bottom: 88px; }
.mb-45 { padding-bottom: 90px; }
.mb-46 { padding-bottom: 92px; }
.mb-47 { padding-bottom: 94px; }
.mb-48 { padding-bottom: 96px; }
.mb-49 { padding-bottom: 98px; }
.mb-50 { padding-bottom: 100px; }
.mb-75 { padding-bottom: 150px; }
.mb-100 { padding-bottom: 100px; }
.mb-125 { padding-bottom: 250px; }
.mb-150 { padding-bottom: 300px; }
.mb-175 { padding-bottom: 350px; }
.mb-200 { padding-bottom: 400px; }
.mb-225 { padding-bottom: 450px; }
.mb-250 { padding-bottom: 500px; }
.mb-275 { padding-bottom: 550px; }
.mb-300 { padding-bottom: 600px; }
.mb-325 { padding-bottom: 650px; }
.mb-350 { padding-bottom: 700px; }
.mb-400 { padding-bottom: 750px; }