*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html
{
    font-size: 1vw;
    color: white;
    font-family: "Lexend", sans-serif;
    background-color: #0D0D0D;
    }
body
{
    display: flex;
    flex-direction: column;
    background-color: #0D0D0D;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}
body::-webkit-scrollbar
{
    cursor: pointer;
    width:.6rem;
    height: 0;
}
body::-webkit-scrollbar-track
{
    margin: .4rem 0rem;
}
body::-webkit-scrollbar-thumb
{
    background: #218C03;
    border-radius: .5rem;
    cursor: pointer;
}
body::-webkit-scrollbar-thumb:hover
{
    background: #2CBF04;
}
header
{
    position:relative;
    overflow: hidden;
}
.headerNav
{
    display: flex;
    justify-content: center;
}
.headerNav>ul
{
    z-index: 3;
    width:100%;
    list-style-type: none;
    background: linear-gradient(90deg,#0d0d0d 0%,rgba(0, 0, 0, 0) 45%);
    display: flex;
    font-size: 2rem;
    justify-content: center;
    gap:5rem;
    padding: .5rem 0;
    opacity: 0;
    transition: all 2s ease;
}
.headerNavDisplay
{
    opacity: 1 !important;
}
.headerNav>ul>li
{
    font-size: 1.7rem;
    font-weight: 700;
    color: rgb(150, 150, 150);
    cursor: pointer;
}
.headerNav>ul>li:hover
{
    color: #2CBF04;
}
.headerContainer
{
    display: flex;
}
.description
{
    z-index: 2;
    width:45%;
    background: linear-gradient(90deg,#0d0d0d,rgba(0, 0, 0, 0));
    display: flex;
    flex-direction: column;
    gap:2rem;
    align-items: center;
    justify-content: center;
    padding: 0 5rem;
    opacity: 0;
    transition: opacity 1s ease;
}
.descriptionDisplay
{
    opacity: 1;
}
.descriptionHeader
{
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:1rem;
}
.hLine1
{
    font-family: "Comic Relief", system-ui;
    font-size: 1.8rem;
    font-weight: 900;
}
.hLine2
{
    font-family: "Arimo", sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: #2CBF04;
    height: 2.5rem;
    text-shadow: 0 0 .8rem #2CBF04;
    -webkit-text-stroke-width: .08rem;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: #2CBF04;
}
.descriptionContent
{
    opacity: 0;
    transition: opacity 1.5s ease;
    display: flex;
    flex-direction: column;
    gap:1rem;
}
.descriptionBold
{
    font-weight: 900;
}
.descriptionContent>p
{
    text-align: center;
}
.descriptionPDisplay
{
    opacity: 1 !important;
}
.headerContact
{
    width:100%;
    display: flex;
    justify-content: center;
    gap:1rem;
    align-items: center;
    opacity: 0;
    transition: all 1s ease;
    transform: scale(0);
}
.headerContactDisplay
{
    opacity: 1;
    transform: scale(1);
}
.headerContactItem
{
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:.5rem;
}
.headerContactLine
{
    width:.25rem;
    height: 100%;
    background-color: grey;
    border-radius: 10px;
}
.headerContactItemSVG
{
    width:1rem;
    height: 1rem;
}
.fbSvg
{
    width:2rem;
    height: 2rem;
    fill: white;
    transition: all .3s ease;
    cursor: pointer;
}
.fbSvg:hover
{
    fill: #00f;
    transform: scale(1.1);
}
.imageContainer
{
    width:55%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    align-items: flex-end;
    padding-top: 6rem;
    overflow: hidden;
}
.myImg
{
    width:35rem;
    height:35rem;
    z-index: 4;
    opacity: 0;
    transition: opacity .5s linear;
    filter:saturate(1.2);
}
.myImgPc
{
    display: block;
}
.myImgDisplay
{
   opacity: 1;
}
.myImgResponsiveContainer
{
    display: none;
}
.orCodeImg
{
    position: absolute;
    top:15%;
    left:50%;
    width:41.6rem;
    height: 7.8rem;
    translate: -50% -50%;
    z-index: 2;
    background-color: #0d0d0d3c;
    border-radius: 2.5rem;
    box-shadow: 0 0 1.5rem 1.5rem #0d0d0d3c;
    transform: scale(0,0);
    transition: transform .5s ease;
}
.orCodeImgDisplay
{
    transform: scale(1,1);
}
.backgroundVideo
{
    position: absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index: 1;
    filter:grayscale(0.3) brightness(0.35);
    opacity: 0;
    transition: opacity 1s linear;
}
.backgroundVideoDisplay
{
    opacity: 1;
}
.headerH
{
    position: absolute;
    font-size: 3rem;
    text-shadow: -.25rem .2rem .2rem #2CBF04;
    font-family: "Comic Relief", system-ui;
    z-index: 3;
}
.h21
{
    top:50%;
    left:16%;
    transform: translate(110%,0);
    opacity: 0;
    transition: all .5s ease;
}
.h22
{
    top:60%;
    left:26%;
    transform: translate(120%,0);
    opacity: 0;
    transition: all .5s ease;
}
.h23
{
    top:70%;
    left:10%;
    transform: translate(110%,0);
    opacity: 0;
    transition: all .5s ease;
}
.hDisplay
{
    transform: translate(0,0);
    opacity: 1;
}
.bottomShadow
{
    position: absolute;
    bottom: 0;
    left:0;
    right: 0;
    z-index: 4;
    height: 0px;
    box-shadow: 0 0 3rem 4rem #0d0d0d;
}
.nav
{
    width:100%;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top:-100%;
    z-index: 10;
    padding: .5rem 1rem .8rem 1rem;
    background-color: #0d0d0d;
    transition: all .5s ease;
}
.navDisplay
{
    top:0%;
}
.nav>ul
{
    list-style-type: none;
    display: flex;
    font-size: 2rem;
    justify-content: center;
    gap:2.5rem;
    align-items: center;
    position: relative;
}
.navBar
{
    position: absolute;
    bottom: -.5rem;
    left:0;
    height: .3rem;
    background:linear-gradient(90deg,#218C03,#38F205);
    background: #218C03;
    border-radius: 1rem;
    will-change: left, width;
    transition: all .3s ease-out;
}
.navBar1
{
   left:0;
   width:6.3rem;
}
.navBar2
{
    left:8.5rem;
    width:6rem;
}
.navBar3
{
    left:16.5rem;
    width:9rem;
}
.navBar4
{
    left:28rem;
    width:10.5rem;
}
.navBar5
{
    left:41rem;
    width:7rem;
}
.nav>ul>li
{
    font-size: 1.7rem;
    font-weight: 700;
    color: rgb(150, 150, 150);
    cursor: pointer;
}
.nav>ul>li:hover
{
    color: #2CBF04;
}
.logo
{
    width:10.6rem;
    height: 2rem;
    scale: 0;
    opacity: 0;
    transition: all 1s ease;
    cursor: pointer;
}
.logo:hover
{
    transform: scale(1.05);
}
.logoDisplay
{
    opacity: 1;
    scale: 1;
}
.about
{
    display: grid;
    gap:4rem 2rem;
    padding: 0 5rem;
    justify-items: center;
    align-items: center;
    grid-template-columns: 2fr 2fr;
    overflow: hidden;
}
.sectionHeader
{
    font-size: 3rem;
    width:100%;
    text-align: center;
    text-shadow: -.2rem .15rem 0 #2CBF04;
    grid-column: 1/3;
    opacity: 0;
    transition: all .5s ease;
}
.sectionHeaderDisplay
{
    opacity: 1;
}
.about>p
{
    text-align: center;
    transition: transform .5s ease;
}
.aboutP1
{
    transform: translate(-50rem,0);
}
.aboutP2
{
    transform: translate(50rem,0);
}
.aboutPDisplay
{
    transform: translate(0,0);
}
.userImg
{
    width:20rem;
    height: 20rem;
    position: relative;
    overflow: hidden;
}
.userImg>img
{
    width:100%;
    height: 100%;
    z-index: 3 !important;
    position: absolute;
    top:0;
    left:0;
    bottom: 0;
    right: 0;
}
.imgColor
{
    position: absolute;
    bottom: -18%;
    left:-18%;
    top:-18%;
    right: -18%;
    background: #acacac;
    border-radius: 50%;
    z-index: 2;
    transition: all 2s ease;
    scale: 0;
    translate: 0 -100%;
}
.spinner
{
    grid-column: 1/3;
    width: 100%;
    height: 55rem;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1s ease;
}
.spinnerDisplay
{
    opacity: 1;
}
.bgVideo
{
    position: absolute;
    top:0;
    left:0;
    width:150%;
    z-index: 1;
    filter:brightness(0.4);
}
.spinnerShadow
{
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    box-shadow: 0 0 5rem 5rem #0d0d0d;
}
.spinnerTopShadow
{
    top:0;
}
.spinnerBottomShadow
{
    bottom:0;
}
.arrow
{
    position: absolute;
    top:50%;
    translate: 0 -50%;
    width:3rem;
    height: 3rem;
    cursor: pointer;
    z-index: 4;
}
.leftArrow
{
    left:0;
}
.rightArrow
{
    right:0;
}
.arrowSVG
{
     width:100%;
    height: 100%;
    fill: white;
    transition: all .3s ease;
}
.leftArrowSVG
{
    rotate: 180deg;
}
.leftArrow:hover>.arrowSVG,
.rightArrow:hover>.arrowSVG
{
    fill: #218C03;
}
.spinnerHorizontalShadow
{
    position: absolute;
    top:0;
    bottom: 0;
    box-shadow: 0 0 4rem 4rem #0d0d0d;
    z-index: 3;
}
.rightShadow
{
    right: 0;
}
.leftShadow
{
    left: 0;
}
.spinnerCard
{
    height: 26rem;
    width:18rem;
    position:absolute;
    top:50%;
    translate: -50% -50%;
    background: rgba(0, 0, 0, 0.535);
    border-radius: 2rem;
    will-change: left,z-index,opacity,filter;
    transition: all 1s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:1rem;
    justify-items: center;
    align-items: center;
    padding: 1rem 1.5rem;
    cursor: default;
}
.spinnerCard::selection
{
    background: none;
}
.spinnerCard>img
{
    width:7rem;
    height: 7rem;
}
.spinner>h3
{
    position: absolute;
    top:1rem;
    left:50%;
    translate: -50% 0;
    font-size: 3.5rem;
    z-index: 5;
    font-family: "Comic Relief", system-ui;
    -webkit-text-stroke-width: .15rem;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: white;
}
.spinnerCard>h4
{
    font-family: "Comic Relief", system-ui;
    font-weight: 900;
    font-size: 1.5rem;
}
.spinnerCard>p
{
    font-size: .8rem;
    text-align: center;
}
.gitImgContainer
{
    width:100%;
    height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:2rem;
}
.gitImgContainer>img
{
    width:6rem;
    height: 6rem;
}
.link
{
    text-decoration: underline #218C03;
    color: #218C03;
    font-weight: 700;
}
.link:hover
{
     color: #2CBF04;
     text-decoration: underline #2CBF04;
}
.positionMain
{
    left:50%;
    z-index: 4;
    opacity: 0.9;
    filter:brightness(1) saturate(100%) !important;
    transform: scale(1.4);
    color: white;
}
.position-1
{
    left:24%;
    z-index: 3;
    opacity: 0.5;
    transform: perspective(50rem) rotateY(-10deg) scale(1.2);
    filter:brightness(0.5) saturate(0%);
}
.position-2
{
    left:4%;
    z-index: 2;
    opacity: 0.8;
    transform: perspective(50rem) rotateY(-40deg) scale(1);
    filter:brightness(0.3) saturate(0%);
}
.position-3
{
    left:-20%;
    z-index: 1;
    opacity: 0;
    filter:brightness(0) saturate(0%);
    transform: perspective(50rem) rotateY(-90deg) scale(0);
}
.position1
{
    left:76%;
    z-index: 3;
    opacity: 0.85;
    filter:brightness(0.5) saturate(0%);
    transform: perspective(50rem) rotateY(10deg) scale(1.2);
}
.position2
{
    left:96%;
    z-index: 2;
    opacity: 0.7;
    filter:brightness(0.3) saturate(0%);
    transform: perspective(50rem) rotateY(40deg) scale(1);
}
.position3
{
    left:110%;
    z-index: 1;
    opacity: 0;
     filter:brightness(0) saturate(0%);
    transform: perspective(50rem) rotateY(90deg) scale(0);
}
.position4
{
    left:130%;
    z-index: 1;
    opacity: 0;
    filter:brightness(0) saturate(0%);
    transform: perspective(50rem) rotateY(90deg) scale(0);
}
.card1
{
    background-color: #6b2719;
    border: .3rem dashed #f05133;
}
.card2
{
    background-color: #6c3615;
    border: .3rem dashed #e2722c;
}
.card3
{
    background-color: #24471d;
    border: .3rem dashed #539e43;
}
.card4
{
    background-color: #632212;
    border: .3rem dashed #e44d26;
}
.card5
{
    background-color: #112369;
    border: .3rem dashed #264de4;
}
.card6
{
    background-color: #675d10;
    border: .3rem dashed #f7df1e;
}
.card7
{
    background-color: #275b69;
    border: .3rem dashed #61dafb;
}
.card8
{
    background-color: #083b1d;
    border: .3rem dashed #13aa52;
}


.offer
{
    display: flex;
    flex-direction: column;
    gap:5rem;
    align-items: center;
}
.offerItem
{
    display: grid;
    grid-template-columns: 4fr 2fr 4fr;
    position: relative;
    width:100%;
    padding: 5rem 0;
    overflow: hidden;
}
.textContainer
{
    grid-column: 2/4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:2rem;
    z-index: 3;
    padding: 0 4rem;
    transform: translate(60rem,0);
    will-change: transform;
    transition: transform 1s ease;
}
.textContainer>h3
{
    font-size: 3rem;
}
.textContainer>p
{
    text-align: center;
}
.elImg
{
    position: absolute;
    top:50%;
    translate: 0 -50%;
    bottom: 0;
    left:0;
    grid-column: 1/3;
    width:100%;
    z-index: 1;
    transform: translate(-100rem,0);
    will-change: transform;
    transition: transform 1s ease;
}
.textContainerReverse
{
    grid-column: 1/3;
    transform: translate(-70rem,0);
}
.elImgReverse
{
    grid-column: 2/4;
    left:20%;
    transform: translate(70rem,0);
}
.elImgDisplay
{
    transform: translate(0,0);
}
.textContainerDisplay
{
    transform: translate(0,0);
}
.imgShadow
{
    grid-column: 1/3;
    position: absolute;
    top:0;
    bottom: 0;
    left:0;
    width:100%;
    background:linear-gradient(90deg,#0d0d0d00 0%,#0d0d0d 80%);
    z-index: 2;
}

.imgShadowReverse
{
    grid-column: 2/4;
    rotate: 180deg;;
}
.projects
{
    display: flex;
    gap:3rem;
    flex-direction: column;
    align-items: center;
    padding: 3rem 0;

}
.projectContainer
{
    width:100%;
    height: 53rem;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1s ease;
}
.projectsContainerDisplay
{
    opacity: 1;
}
.projectShadow
{
    position: absolute;

    left:0;
    right: 0;
    box-shadow: 0 0 5rem 5rem #0d0d0d;
    z-index: 2;
}
.projectTopShadow
{
    top:0;
}
.projectBottomShadow
{
    bottom:0;
}
.projectVideo
{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    z-index: 1;
}

.projectItem>img
{
    position: absolute;
    top:50%;
    translate: 0 -50%;
    bottom: 0;
    left:0;
    max-width:60%;
    height: 100%;
}
.projectDescription
{
    position: absolute;
    top:10%;
    bottom: 10%;
    height: 80%;
    left:48%;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:2rem;
}
.projectDescription>h3
{
    font-size: 2rem;
    font-family: "Comic Relief", system-ui;
    text-shadow: -.15rem .1rem 1rem #2CBF04;
}
.projectDescription>p
{
    text-align: center;
}
.projectDescription>a
{
    width: 100%;
    font-size: 1.3rem;
    padding: .5rem;
    outline: none;
    border-radius: 1rem;
    background: #0d0d0d;
    color: white;
    border: .3rem solid #218C03;
    cursor: pointer;
    transition: all .3s ease;
    font-weight: 900;
    display: flex;
    justify-content: center;
    text-decoration: none;
}
.projectDescription>a:hover
{
    background: #218C03;
}
.imgProjectShadow
{
    position: absolute;
    top:0;
    bottom: 0;
    left:0;
    width:60%;
    background:linear-gradient(90deg,rgba(0, 0, 0, 0),#0d0d0d)
}
.projectItem
{
    position: absolute;
    height: 21rem;
    width:80rem;
    top:27rem;
    border: .5rem double rgb(173, 173, 173);
    border-radius: 3rem;
    background: #0d0d0d;
    transform: perspective(90rem) rotateY(70deg) rotateX(10deg) scale(0.6) rotateZ(-5deg);
    filter:grayscale(1) brightness(0.7) blur(.2rem);
    opacity: 0.9;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 3fr 1fr;
    align-items: center;
    gap:2rem;
    overflow: hidden;
    will-change: left, top, opacity, filter, transform;
    transition: all 1s ease;
    cursor: pointer;
    z-index: 2;
}
.projectItem:hover
{
    transform: perspective(90rem) rotateY(70deg) rotateX(10deg) scale(0.6) rotateZ(-5deg) translate(-5rem,0rem);
    filter:grayscale(0) brightness(0.7) blur(0rem);
}
.ppMain
{
    transform: perspective(90rem) translateY(0);
    top:5rem;
    left: 10rem !important;
    cursor: default !important;
    opacity: 1;
    filter:grayscale(0) brightness(1) blur(0);
}
.ppMain:hover
{
    transform: perspective(90rem) translateY(0) !important;
    filter:grayscale(0) brightness(1) blur(0) !important;
}
.projectArrow
{
    position: absolute;
    top:32%;
    translate: 0 -50%;
    width:3rem;
    height: 3rem;
    cursor: pointer;
    z-index: 2;
}
.projectsLeftArrow
{
    left:3rem;
}
.projectsRightArrow
{
    right:3rem;
}
.projectArrow:hover>.arrowSVG
{
    fill: #2CBF04;
}
.pp1
{
    left:-18%;
    z-index: 1;
}
.pp2
{
    left:-10%;
    z-index: 2;
}
.pp3
{
    left:-2%;
    z-index: 3;
}
.pp4
{
    left:6%;
    z-index: 4;
}
.pp5
{
    left:14%;
    z-index: 5;
}
.pp6
{
    left:22%;
    z-index: 6;
}
.pp7
{
    left:30%;
    z-index: 7;
}
.pp8
{
    left:38%;
    z-index: 8;
}
.pp9
{
    left:46%;
    z-index: 9;
}
.cooperation
{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url('/media/img/bg0.png');
    background-size:contain;
    position: relative;
    overflow: hidden;
}
.cooperationShadow
{
    position: absolute;
    left: 0;
    right: 0;
    box-shadow: 0 0 5rem 5rem #0d0d0d;
    z-index: 1;
}
.cooperationTopShadow
{
    top:0;
}
.cooperationBottomShadow
{
    bottom:0;
}
.cooperation>h2
{
    z-index: 3;
}
.road
{
    width:95vw;
    position: relative;
    height: 120rem;
}
.bgImg
{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 120rem;
    opacity: 0;
    transition: opacity 5s ease;
}
.bgImgDisplay
{
    opacity: 1;
}
.roadCard
{
    position:absolute;
    width:15.6rem;
    height: 23.6rem;
    border-radius: 2.5rem;
    border: .3rem dashed grey;
    background-color: rgba(99, 99, 99, 0.236);
    backdrop-filter: blur(.2rem);
    z-index: 2;
    padding:1rem .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:.8rem;
    justify-content:center;
    transition: all .3s ease;
    cursor: default;
    will-change: border;
    opacity: 0;
}
.roadCardDisplay
{
    opacity: 1;
}
.roadCard:hover>p
{
    color: rgb(199, 199, 199);
}
.roadCard:hover
{
    transform: translate(0,-.5rem);
    border:.3rem dashed #2CBF04;
}
.roadCard>img
{
    width:12rem;
    height: 8.4rem;
}
.roadCard>h3
{
    width:100%;
    text-align: center;
    font-size: 1rem;
    font-family: "Public Sans", sans-serif;
    font-weight: 900;
}
.roadCard>p
{
    text-align: center;
    font-size: .9rem;
    color: grey;
    transition: all .3s ease;
}
.roadCard1
{
    top:1.8rem;
    left:4.1rem;
}
.roadCard2
{
    top:6.1rem;
    left:28.3rem;
}
.roadCard3
{
    top:8.9rem;
    right:28.5rem;
}
.roadCard4
{
    top:14.3rem;
    right:4.8rem;
}
.roadCard5
{
    top:40.8rem;
    right: 20.9rem;
}
.roadCard6
{
    top:48.2rem;
    right:43.4rem;
}
.roadCard7
{
    top:53.6rem;
    left:11.8rem;
}
.roadCard8
{
    top:81.1rem;
    left:28.4rem;
}
.roadCard9
{
    top:86.7rem;
    left:50.8rem;
}
.roadCard10
{
    top:92.3rem;
    right:4.7rem;
}
.contact
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #0d0d0d;
    justify-items: center;
    gap:3rem;
    padding: 0 4rem 2rem 4rem;
    overflow: hidden;
}
.contactDescription
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:2.5rem;
    transform: translate(-50rem,0);
    transition: transform 1s ease;
}
.contactDescriptionDisplay
{
    transform: translate(0,0);
}
.contactDescription>h3
{
    font-size: 2.5rem;
    -webkit-text-stroke-width: .1rem;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: #38F205;
    font-family: "Public Sans", sans-serif;
    text-shadow: 0 0 .8rem #2CBF04;
}
.contactDescription>p
{
    text-align: center;
    width:90%;
    color: rgb(187, 187, 187);
}
.contactMethods
{
    display: flex;
    justify-content: center;
    gap:1rem;
    opacity: 0;
    transition: all 2s ease;
}
.contactMethodsDisplay
{
    opacity: 1;
}
.contactMethodsItem
{
    display: flex;
    align-items: center;
    gap:.5rem;
    font-size: 1rem;
    font-weight: 900;
}
.contactMethodsLine
{
    width:.3rem;
    height: 100%;
    border-radius: 10px;
    background-color: grey;
}
.contactForm
{
    width:100%;
    display: flex;
    flex-direction: column;
    gap:.5rem;
    transform: translate(50rem,0);
    transition: transform 1s ease;
}
.contactFormDisplay
{
    transform: translate(0,0);
}
.inputContainer
{
    position: relative;
    height: 3.5rem;
}
.inputContainer>input
{
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    font-size: 1.5rem;
    outline: none;
    border: .3rem solid #218C03;
    border-radius: 1rem;
    background: none;
    padding: .3rem .5rem;
    color: white;
    cursor: pointer;
    transition: all .3s ease;
    font-family: "Arimo", sans-serif;
}
.inputContainer>input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #0d0d0d inset !important;
  -webkit-text-fill-color: white !important;
}
.inputContainer>input:focus
{
    cursor: text;
    border: .3rem solid #2CBf04;
}
.inputPlaceholder
{
    position: absolute;
    top:50%;
    translate: 0 -50%;
    left:.5rem;
    background-color: #0d0d0d;
    color: grey;
    font-size: 1.5rem;
    padding: 0 1rem;
    transition: all .3s ease;
    cursor: pointer;
    font-family: "Arimo", sans-serif;
    font-weight: 700;
}
.inputPlaceholderColor
{
    color: rgb(209, 209, 209);
}
.inputFocusedPlaceholder
{
    transform: scale(0.8) translate(1.5rem,-2.1rem);
    cursor: default;
}
.send
{
    width:100%;
    font-size: 1.5rem;
    height: 3rem;
    color: white;
    outline: none;
    font-weight: 900;
    letter-spacing: .1rem;
    border-radius: 1rem;
    padding: .5rem;
    background: #0F4001;
    border: .3rem solid #218C03;
    transition: all .3s ease;
    cursor: pointer;
    font-family: "Arimo", sans-serif;
}
.send:hover
{
    background: #2CBF04;
    border: .3rem solid #2CBF04;
}
.message
{
    width:100%;
    height: 8rem;
    outline: none;
    background: none;
    border:.3rem solid #218C03;
    border-radius: 1rem;
    transition: all .3s ease;
    cursor: pointer;
    resize: none;
    padding: .5rem;
    color: white;
    font-size: 1.2rem;
    font-family: "Arimo", sans-serif;
    overflow:scroll;
}
.message::placeholder
{
    font-weight: 700;
    color: grey;
}
.message:focus
{
    border:.3rem solid #2CBF04;
    cursor: text;
}
.message::-webkit-scrollbar
{
    border-radius: 5rem;
    cursor: pointer;
    width:.8rem;
    height: 0;
}
.message::-webkit-scrollbar-track
{
    margin: .4rem 2rem;
}
.message::-webkit-scrollbar-thumb
{
    background: #0F4001;
    border-radius: 1rem;
    cursor: pointer;
}
.message::-webkit-scrollbar-thumb:hover
{
    background: #218C03;
}
.error
{
    font-weight: 700;
    font-size: 1rem;
    color: red;
    text-align: center;
    height: 1.3rem;
}
.agreement
{
    width: 100%;
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap:.8rem;
    align-items: center;
    justify-items: center;
    margin-bottom: 1.8rem;
    cursor: pointer;
}
.checkbox
{
    width:2rem;
    height: 2rem;
    border:.3rem solid #218C03;
    background: rgb(0, 0, 0);
    border-radius: .6rem;
    cursor: pointer;
}
.checkboxChecked
{
    border:.3rem solid #2CBF04;
    background-color: #0F4001;
}
.agreementError
{
    border: .3rem solid red !important;
}
.agreement>p
{
    font-size: .8rem;
}
.agreement>p::selection
{
    background: none;
}
footer
{
    width:100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap:1rem 7rem;
    padding: 2rem 0;
}
.copyrights
{
    width: 100%;
    font-size: .8rem;
    color: grey;
    text-align: center;
    opacity: 0;
    transition: all 2s ease;
}
.copyrightsShow
{
    opacity: 1;
}
.footerLogo
{
    width:50%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:1rem;
    transform: scale(0);
    transition: all 2s ease;
    opacity: 0;
}

.footerLogo>img
{
    width:9rem;
    height: 9rem;
}
.footerLogo>h2
{
    font-size: 5rem;
        font-family: "Comic Relief", system-ui;
}
.rules
{
     font-size: 1.2rem;
     color: grey;
     text-align: center;
     display: flex;
     gap:7rem;
     font-weight: 700;
     justify-content: center;
}
.ruleItem
{
    transform: scale(0);
    transition: all 1s ease, color .3s ease;
    opacity: 0;
    cursor: pointer;
}
.ruleItem:hover
{
    color: white;
}
.footerDisplay
{
    transform: scale(1);
    opacity: 1;
}
.loading
{
    position: fixed;
    top:0;
    left:0;
    bottom: 0;
    right: 0;
    background-color: #0d0d0d;
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:2rem;
    transition: all .5s linear;
}
.loadingImg
{
    position: absolute;
    top:40%;
    right:50%;
    translate: 50% -50%;
    width:32rem;
    height: 6rem;
    opacity: 0;
    transform: scale(0);
    transition: all 1s ease
}
.loadingImgDisplay
{
    transform: scale(1);
    opacity: 1;
}
.loadingImgPosition
{
    top:9.3rem;
    right:27.2rem;
    transform: scale(1.3);
}
.loadingProgressContainer
{
    width:20rem;
    height: .5rem;
    background-color: #1b1b1b;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transition: all 1s ease;
}
.loadingProgressContainerDisplay
{
    opacity: 1;
}
.loadingProgress
{
    position: absolute;
    background-color: #2CBF04;
    top:0;
    bottom: 0;
    left:0;
    width:0%;
    transition: width 1.5s linear;
    border-radius: 1rem;
}
.btnDisabled
{
    background: rgb(88, 88, 88) !important;
    border: .3rem solid grey !important;
    cursor: default;
    display: flex;
    justify-content: center;
    padding: .1rem;
    align-items: center;
}
.notification
{
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width:27rem;
    background-color: #323232;
    z-index: 10;
    display: grid;
    grid-template-columns: 2rem 1fr 1.5rem;
    grid-template-rows: 1fr 1fr;
    gap:0rem .5rem;
    align-items: center;
    justify-items: center;
    padding:.7rem 1rem;
    border-radius: 1rem;
    overflow: hidden;
    transform:translate(150%,0);
    transition: all 1s cubic-bezier(0.09, 0.74, 0.58, 1);
}
.notificationSent
{
    transform: translate(0,0);
}
.notification>h2
{
    font-size: 1.1rem;
    font-family: "Comic Relief", system-ui;
}
.notification>h3
{
    font-size: .8rem;
    font-family: "Arimo", sans-serif;
    color: rgb(167, 167, 167);
}
.svgClose
{
    width:1rem;
    height: 1rem;
    fill: rgb(167, 167, 167);
    grid-column: 3/4;
    grid-row: 1/3;
    cursor: pointer;
}
.svgClose:hover
{
    fill: red;
}
.progressContainer
{
    position: absolute;
    bottom: 0;
    left:0;
    right: 0;
    height: .2rem;
}
.progress
{
    position: absolute;
    top:0;
    bottom: 0;
    left:0;
    right:0;
    width:0%;
    border-radius: 1rem;
    background:linear-gradient(90deg,#218C03,#38F205);
    transition: width 3s linear;
}
.progressFulled
{
    width:100%;
}
.sentSvg
{
    grid-column: 1/2;
    grid-row: 1/3;
    width:2rem;
    height: 2rem;
    fill: #2CBF04;
}
.spinnerBlocks
{
    display: none;
}
.bottomResponsiveShadow
{
    display: none;
}
.number
{
    display: none;
}
.policyContainer
{
    position: fixed;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    z-index: 15;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}
.policy
{
    max-height: 85vh;
    width: 55vw;
    background-color: #0d0d0d;
    padding: 0 3rem 5rem 3rem;
    overflow: scroll;
    border: .4rem solid #218C03;
    border-radius: 2rem;
    opacity: 0;
    transition: opacity 1s ease;
}
.policyLink
{
    font-size: 1.2rem;
    color: rgb(185, 185, 185);
    text-decoration: underline;
    cursor: pointer;
}
.policyLink:hover
{
    color: #2CBF04;
}
.policyShow
{
    opacity: 1;
}
.policy::-webkit-scrollbar
{
    height: 0;
    width: .6rem;
}
.policy::-webkit-scrollbar-button
{
    width: 1.5rem;
    height: 1.5rem;
}
.policy::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: #0F4001;
}
.policy::-webkit-scrollbar-thumb:hover
{
    background-color: #2CBF04;
}
.policy>h2
{
    width:100%;
    text-align: center;
    position: sticky;
    top:0;
    font-size: 3rem;
    padding: 1.5rem 0;
    background-color: #0d0d0d;

}
.policyList
{
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap:3.5rem;
    margin-top: 2rem;
}
.policyList>li
{
    display: flex;
    flex-direction: column;
    gap:1rem;
}
.policyList>li>h3
{
    font-size: 1.5rem;
}
.policyList>li>p
{
    font-size: 1.2rem;
    margin-left: 1rem;
    color: rgb(185, 185, 185);
}
.policyList>li>ul
{
    margin-left:3rem;
    display: flex;
    flex-direction: column;
    gap:.8rem;
    font-size: 1.2rem;
    color: rgb(185, 185, 185);
}
.cancelPolicySVG
{
    position: absolute;
    top: 50%;
    right: 0;
    translate: 0 -50%;
    width: 2rem;
    height: 2rem;
    fill: rgb(163, 163, 163);
    cursor: pointer;
}
.cancelPolicySVG:hover
{
    fill: rgb(177, 4, 4);
}
@media(max-width:425px)
{
    html
    {
        font-size: 2vw;
    }
    header
    {
        width: 100%;
        height: max-content;
        padding-bottom: 3rem;
    }
    .backgroundVideo
    {
        height: 100%;
        width: auto;
    }
    .headerContainer
    {
        flex-direction: column-reverse;
        justify-content: space-between;
    }
    .imageContainer
    {
        height: 40rem;
        width:100% !important;
    }
    .myImgPc
    {
        display: none;
    }
    .myImgResponsiveContainer
    {
        display: block;
        position: relative;
    }
    .myImg
    {
        position: relative;
        left:5%;
        width:30rem;
        height: 30rem;
    }
    .headerH
    {
        font-size: 3.5rem;
        text-shadow: -.3rem .2rem .2rem #2CBF04;
    }
    .h21
    {
        top:40%;
        left:12%;
    }
    .h22
    {
        top:55%;
        left:21%;
    }
    .h23
    {
        left:10%;
    }
    .myImgShadow
    {
        position: absolute;
        left:25%;
        right:20%;
        bottom: 0;
        z-index: 6;
        box-shadow: 0 0 8rem 6rem rgb(0, 0, 0);
    }
    .description
    {
        width:100%;
        background:none;
        justify-content:space-around;
        padding: 2rem 3rem 3rem 3rem;
        gap:3rem;
    }
    .descriptionHeader
    {
        gap:3rem;
    }
    .hLine1
    {
        font-size: 3.5rem;
        text-align: center;
        background: #0d0d0da4;
        box-shadow: 0 0 .5em .5rem #0d0d0da4;
    }
    .hLine2
    {
        font-size: 3rem;
        height: 4rem;
        text-shadow: 0 0 1.5rem #2dbf0475;
        -webkit-text-stroke-width: .2rem;
        letter-spacing: .3rem;
        background: #0d0d0da4;
        box-shadow: 0 0 .5em .5rem #0d0d0da4;
    }
    .descriptionContent
    {
        gap:2rem;
    }
    .descriptionContent>p
    {
        font-size: 1.5rem;
        background: #0d0d0da4;
        box-shadow: 0 0 .5em .5rem #0d0d0da4;
    }
    .headerContact
    {
        gap:1.5rem;
    }
    .headerContactItem
    {
        font-size: 1.4rem;
    }
    .headerContactItemSVG
    {
        width:1.5rem;
        height: 1.5rem;
    }
    .fbSvg
    {
        width:3rem;
        height: 3rem;
        padding-top: .2rem;
    }
    .headerNav
    {
        width:100%;
        height: 5rem;
        align-items: center;
    }
    .headerNav>ul
    {
        justify-content: space-evenly;
        gap:0;
        background: none;
    }
    .headerNav>ul>li
    {
        font-size: 1.7rem;
    }
    .headerNav>ul>li:hover
    {
        color: rgb(150, 150, 150);
    }
    .bottomShadow
    {
        box-shadow: 0 0 3vh 3vh #0d0d0d;
    }
    .headerContactLine
    {
        height: 2rem;
    }
    .sectionHeader
    {
        font-size: 5rem;
        text-shadow: -.3rem .3rem 0 #2CBF04;
    }
    .about
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap:6rem 0;
        padding: 0;
    }
    .aboutSectionHeader
    {
        order: 1;
    }
    .userImg
    {
        order: 2;
    }
    .aboutP1
    {
        order:3;        
    }
    .about>p
    {
        font-size: 1.5rem;
        padding: 0 5rem;
    }
    .userImg2
    {
        order:4;
    }
    .aboutP2
    {
        order: 5;
    }
    .spinner
    {
        order:6;
        height: 60rem;
        background-color: yellow;
        width:100%;
    }
    .spinner>h3
    {
        width:100%;
        text-align: center;
        top:2rem;
        font-size: 4rem;
    }
    .bgVideo
    {
        height: 100%;
        width: auto;
        filter:brightness(0.6);
    }
    .spinnerCard
    {
        height: 32rem;
        top:55%;
    }
    .spinnerCard>img
    {
        width:7.5rem;
        height: 7.5rem;
    }
    .spinnerCard>h4
    {
        font-size: 2rem;
    }
    .spinnerCard>p
    {
        font-size: .9rem;
    }
    .position-1
    {
        left:10%;
        transform: perspective(50rem) rotateY(-30deg) scale(1.1);

    }
    .position-2
    {
        left:-20%;
    }
    .position1
    {
        left:90%;
        transform: perspective(50rem) rotateY(30deg) scale(1.1);
    }
    .position2
    {
        left:110%;
    }
    .leftArrow
    {
        display: none;
    }
    .rightArrow
    {
        display: none;
    }
    .spinnerHorizontalShadow
    {
        box-shadow: 0 0 6rem 6rem #0d0d0d;
        z-index: 6;
    }
    .spinnerShadow
    {
        box-shadow: 0 0 6rem 6rem #0d0d0d;
    }
    .offer
    {
        gap:0;
        position: relative;
        overflow: hidden;
    }
    .offerHeader
    {
        margin: 3rem 0 4rem;
    }
    .offerItem
    {
        height: max-content;
        display: flex;
    }
    .elImg
    {
        top:0%;
        left:0% !important;
        bottom: 0%;
        height: 100%;
        translate: 0% 0%;
        width: auto;
    }
    .imgShadow
    {
        display: none;
    }
    .textContainer
    {
        padding: 4rem 3rem;
    }
    .elImgReverse
    {
        translate: -18% 0;
        scale: 1.2;
    }
    .textContainer>h3
    {
        background-color: #0d0d0dc8;
        box-shadow: 0 0 2rem 2rem #0d0d0dc8;
        border-top-left-radius: 3rem;
        border-top-right-radius: 3rem;
        padding: 1rem 2rem 0 2rem;
        font-size:3rem;
        text-align: center;
    }
    .textContainer>p
    {
        background-color: #0d0d0dc8;
        box-shadow: 0 0 2rem 2rem #0d0d0dc8;
        font-size: 1.5rem;
    }
    .projects
    {
        gap:6rem;
    }
    .projectArrow
    {
        z-index: 4;
    }
    .projectArrow
    {
        top:auto;
        bottom: -1rem;
        width:2rem;
        height: 2rem;
        rotate: 180deg;
    }
    .projectsLeftArrow
    {
        right:2rem;
        left: auto;
        
    }
    .projectsRightArrow
    {
        left:2rem;
        right: auto;
    }
     .projectArrow>.arrowSVG
     {
        fill: grey;
     }
    .projectArrow:hover>.arrowSVG
    {
        fill: grey;
    }
    .projectContainer
    {
        height: 67rem;
    }
    .projectVideo
    {
        display: none;
    }
    .projectItem
    {
        position: absolute;
        top:0 !important;
        left:0;
        right:0;
        bottom: 0;
        width:100%;
        height: 64rem;
        transform: none;
        filter:none;
        border: none;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        opacity: 1;
        overflow: hidden;
    }
    .meteoAppDesc
    {
        padding-bottom: 4rem !important;
    }
    .projectItem:hover
    {
         transform: none;
        filter:none;
    }
    .projectItem>img
    {
        translate: 0;
        top:0%;
        left:0%;
        width:100vw;
        height: 60vw;
        max-width:200%;
    }
    .projectDescription
    {
        width:100%;
        top:40%;
        height: 37rem;
        left: 0;
        padding: 0 5rem;
        font-size: 1.5rem;
        justify-content: flex-end;
    }
    .projectDescription>a
    {
        font-size: 2rem;
        background: #218C03;
        border-radius: 1.5rem;
        margin-top: 1rem;
    }
    .projectDescription>h3
    {
        font-size: 4rem;
        text-shadow: -.2rem .15rem 1rem #2CBF04;
    }
    .imgProjectShadow
    {
        width:100%;
        background:linear-gradient(180deg,rgba(0, 0, 0, 0),#0d0d0d);
        bottom: 32rem;
    }
    .projectShadow
    {
        display: none;
    }
    .pp1
    {
        left:-100% !important;
        opacity: 0;
        z-index: 1;
    }
    .pp2
    {
        left:-100% !important;
        opacity: 0;
        z-index: 1;
    }
    .pp3
    {
        left:-100% !important;
        opacity: 0;
        z-index: 1;
    }
    .pp4
    {
        left: -100% !important;
        opacity: 1;
        z-index: 2;
    }
    .pp5
    {
        left:0% !important;
        z-index: 3;
        opacity: 1;
    }
    .pp6
    {
        left:100% !important;
        z-index: 2;
        opacity: 1;
    }
    .pp7
    {
        left:100% !important;
        opacity: 0;
        z-index: 1;
    }
    .pp8
    {
        left:100% !important;
        opacity: 0;
        z-index: 1;
    }
    .pp9
    {
        left:100% !important;
        opacity: 0;
        z-index: 1;
    }
    .spinnerBlocks
    {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
        height: 2rem;
        position: absolute;
        bottom: 0;
        left:0;
        right:0;
        gap:1.3rem;
    }
    .block
    {
        width:6vw;
        height: 1rem;
        border-radius: .5rem;
        background-color: grey;
        transition: all 1s ease;
    }
    .currentBlock
    {
        transform: scale(1.3);
        background-color: #2CBF04;
    }
    .bottomResponsiveShadow
    {
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        box-shadow: 0 0 4rem 8rem #0d0d0d;  
    }
    .cooperation
    {
        padding: 3rem 0 0 0;
    }
    .road
    {
        width:100%;
        height: max-content;
        display: grid;
        grid-template-columns: 3fr 5fr 3fr;
        gap:5rem 2rem;
        justify-items: center;
        align-items: center;
        padding: 5rem 2rem;
    }
    .bgImg
    {
        display: none;
    }
    .number
    {
        font-size: 4rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width:10rem;
        font-weight: 900;
        height: 10rem;
        grid-column: 1/2;
        border-radius: 50%;
        color: #2CBF04;
        border:.5rem dashed #2CBF04;
        font-family: "Public Sans", sans-serif;
        opacity:0;
        transition: opacity 1s ease .2s;
    }
    .numberDisplay
    {
        opacity: 1;
    }
    .numberReverse
    {
        grid-column: 3/4;
    }
    .roadCard
    {
        position: static;
        height: max-content;
        width: 100%;
        border-radius: 0;
        border: 0;
        backdrop-filter: none;
        background: none;
        grid-column: 2/4;
        gap:1.5rem;
    }
    .roadCardReverse
    {
        grid-column: 1/3;
    }
    .roadCard>img
    {
        width:30rem;
        height: 21rem;
        border-radius: 2rem;
        border:.8rem double grey;
    }
    .roadCard>h3
    {
        font-size: 2.5rem;
    }
    .roadCard>p
    {
        font-size: 1.5rem;
        color: rgb(183, 183, 183);
    }
    .roadCard:hover
    {
        transform: none;
        border: 0;
    }
    .contact
    {

        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2rem;
        gap:5rem;
    }
    .contactDescription
    {
        gap:5rem;
    }
    .contactDescription>h3
    {
        display: none;
    }
    .contactDescription>p
    {
        width: 100%;
        font-size: 1.5rem;
    }
    .contactMethods
    {
        width:100%;
        align-items: center;
        gap:1.2rem;
    }
    .contactMethodsItem
    {
        font-size: 1.3rem;
    }
    .contactMethodsItem>svg
    {
        width:1.5rem;
        height: 1.5rem;
    }
    .contactMethodsLine
    {
        height: 3rem;
    }
    .contactForm
    {
        padding: 0 2rem;
    }
    .inputContainer
    {
        height: 6rem;
    }
    .inputContainer>input
    {
        font-size: 3rem;
        border: .5rem solid #218C03;
        border-radius: 1.5rem;
        padding: 0 1rem;
    }
    .inputPlaceholder
    {
        font-size: 2.5rem;
        padding: 0 1.5rem;
    }
    .inputFocusedPlaceholder
    {
        transform: scale(0.7) translate(.5rem,-4rem);
    }
    .inputContainer>input:focus
    {
        border: .5rem solid #2CBf04;
    }
    .message
    {
        font-size: 2rem;
        height: 16rem;
        border:.5rem solid #218C03;
        border-radius: 1.5rem;
        padding: 1rem;
    }
    .message:focus
    {
        border:.5rem solid #218C03;
    }
    .send
    {
        font-size: 3rem;
        height: max-content;
        border: .5rem solid #218C03;
        border-radius: 1.5rem;
    }
    .send:hover
    {
        background: #0F4001;
        border: .5rem solid #2CBF04;
    }
    .error
    {
        font-size: 2rem;
        height: 3rem;
    }
    footer
    {
        padding: 3rem 0 5rem 0;
        flex-direction: column;
        gap:2rem;
    }
    .footerLogo
    {
        width:100%;
        gap:1.5rem;
    }
    .footerLogo>img
    { 
        width:8rem;
        height: 8rem;
    }
    .footerLogo>h2
    {
        font-size: 4rem;
    }
    .rules
    {
        width: 100%;
        font-size: 1.8rem;
    }
    .ruleItem:hover
    {
             color: grey;
    }
    .btnDisabled
    {
        border: .5rem solid grey !important;
    }
    .send>svg
    {
        width:4.2rem;
        height: 4.2rem;
    }
    .notification
    {
        right:0;
        left:0;
        bottom: 0;
        width:100%;
        border-radius: 0;
        grid-template-columns: 4rem 1fr 2rem;
        padding: 1rem 2rem;
        border-top-left-radius: 1.5rem;
        border-top-right-radius: 1.5rem;
        transform:translate(0%,100%);
        opacity: 0;
    }
    .notificationSent
    {
        transform: translate(0,0) !important;
        opacity: 1;
    }
    .sentSvg
    {
        width:4rem;
        height: 4rem;
    }
    .notification>h2
    {
        font-size: 2rem;
    }
    .notification>h3
    {
        font-size: 1.4rem;
    }
    .svgClose
    {
        width:2rem;
        height: 2rem;
    }
    .progressContainer
    {
        height: .5rem;
    }
    .nav
    {
        flex-direction: column;
        align-items: center;
        gap:1rem;
        padding: .5rem 1rem 1.5rem 1rem;
    }
    .logo
    {
        display: none;
    }
    .nav>ul>li
    {
        font-size: 1.6rem;
    }
    .nav>ul>li:hover
    {
        color: rgb(150, 150, 150);
    }
    .navBar
    {
        height: .5rem;
        bottom: -.8rem;
    }
    .navBar2
    {
        left:8rem;
    }
    .navBar3
    {
        left:16rem;
        width:8.5rem;
    }
    .navBar4
    {
        left:27rem;
        width:9.8rem;
    }
    .navBar5
    {
        left:39rem;
        width:6.8rem;
    }
    .loading
    {
        gap:0;
    }
    .loadingImg
    {
        width:32rem;
        height: 6rem;
        top:43%;
    }
    .loadingProgressContainer
    {
        width:50%;
        height: .8rem;   
    }
    .loadingImgPosition
    {
        top:11rem;
        right:50% !important;
    }
    .agreement
    {
        grid-template-columns: 4rem 1fr;
        margin-bottom: 3rem;
    }
    .agreementError
    {
        border: .5rem solid red !important;
    }
    .checkboxChecked
    {
        border:.5rem solid #2CBF04;
    }
    .agreement>p
    {
        font-size: 1.1rem;
    }
    .checkbox
    {
        width: 3.5rem;
        height: 3.5rem;
        border:.5rem solid #218C03;
        border-radius: 1rem;
    }
    .policy
    {
        width: 95vw;
        height: 85vh;
        border: .8rem solid #218C03;
        border-radius: 3rem;
    }
    .policy>h2
    {
        font-size: 4rem;
        padding: 1.5rem 3rem;
    }
    .policyList
    {
        gap:5rem;
        margin-top: 3rem;
    }
    .policyList>li
    {
        gap:3rem;
    }
    .policyList>li>h3
    {
        font-size: 2.5rem;
    }
    .policyList>li>p
    {
        font-size: 2rem;
        margin-left: 2rem;
    }
    .policyList>li>ul
    {
        font-size: 2rem;
        margin-left: 4rem;
        gap:2rem;
    }
    .cancelPolicySVG
    {
        width:3.5rem;
        height: 3.5rem;
    }
    .cancelPolicySVG:hover
    {
        fill: rgb(163, 163, 163);
    }
    .policyLink:hover
    {
        color: rgb(185, 185, 185);
    }
    .policyLink
    {
        font-size: 2rem;
    }
    .copyrights
    {
        font-size: 1rem;
        padding: 0 2rem;
        margin-top: 2rem;
    }
}