@charset "UTF-8";

:root
{
--yellow:#ffdd4a;
--myellow:#ffdd4a;
--dyellow:#f1ca22;
--oldblue: #013E6C;
--blue:#02508C;
--mblue:#02508C;
--lblue:#0267B5;
--elblue: #0789EC;
--lightblue:#9CCFF7;
--grey: #b3b6b7;
--esmall:0.8rem;
--small:1rem;
--normal: 1.2rem;
--medium:1.4rem;
--large:3rem;
--elarge:4.4rem;
--slarge:6rem;
}



@font-face
{
    font-family:jost;
    src:url(../fonts/Jost-VariableFont_wght.ttf)
}

@font-face
{
    font-family:nan;
    src:url(../fonts/NanumGothic-ExtraBold.ttf)
}

@font-face
{
    font-family:mr;
    src:url(../fonts/Jost-VariableFont_wght.ttf);
}

@font-face
{
    font-family:mm;
    src:url(../fonts/MazzardL-Medium.woff2)
}

@font-face{
    font-family:mb;
    src:url(../fonts/MazzardL-Bold.woff2)
}

@font-face{
    font-family:mbb;
    src:url(../fonts/MazzardL-Black.woff2)
}

@font-face{
    font-family:ml;
    src:url(../fonts/MazzardL-Light.woff2)
}

.header::-webkit-scrollbar{
    width:0px;
    height:00px;
}

.header::-webkit-scrollbar-track{
    background-color:transparent;
    margin-top:60px;
}

.header::-webkit-scrollbar-thumb{
    background-color:var(--dyellow);
    border-radius:20px;
}

html{
    scroll-behavior: smooth;
    scroll-snap-type: proximity;
    scroll-snap-stop:always;
    overflow-x:hidden;
}


body
{
    padding:0;
    margin:0;
    border:0;
    font-family:jost;
    font-size:var(--normal);
    overflow-x:hidden;
    font-weight:300;
}

.load
{
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:100;
    background-color:var(--blue);
    display:flex;
    flex-flow:nowrap;
    align-items: center;
    justify-content: center;

}

.load img
{
    width:80px;
    opacity:0.1;
}

.up
{
    display:none;
    position:fixed;
    bottom:30px;
    right:20px;
    background-color:var(--elblue);
    z-index:22;
    box-shadow:1px 1px 20px 0px rgba(30,30,30,0.1);
    font-size:var(--normal);
    padding:20px;
    height:30px;
    width:30px;
    border-radius: 100px;
    cursor:pointer;
    transition:all 0.2s ease;
}

.up:active
{
    background-color:var(--blue);
    transform:scale(1.1);
}

.up img
{
    width:100%;
}


.landing-tint
{
    position:absolute;
    background-color:var(--blue);
    opacity:0.5;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:3;
    border:solid 5px rgba(255,255,255,0.4);
    border-radius:15px;
}

.landing-fade
{
    background:-webkit-linear-gradient(180deg,transparent,var(--blue));
    background:linear-gradient(180deg,transparent,var(--blue));
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
    height:30vh;
    z-index:0;
    border-radius: 0px 0px 15px 15px;

}

.landing
{
    position:absolute;
    top:80px;
    bottom:15px;
    left:15px;
    right:15px;
    border-radius: 15px;
    font-size:2rem;
    display:flex;
    flex-flow:column nowrap;
    align-items:space-between;
    justify-content:space-between;
    background: url(../img/land.jpg);
    background-size:cover;
    background-position: left;
}

video
{
    display:none;
    position:absolute;
    top:50px;
    left:0px;
    right:0px;
    bottom:0px;
    object-fit: cover;
    width:100%;
    height:100%;
    -webkit-mask:url(../img/logo1.svg);
    mask:url(../img/logo1.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size:110%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size:110%;
    mask-mode: alpha;
}

.landing-img
{
    background:url(../img/landing1.jpg);
    background-size:cover;
    background-position:center;
    display:none;
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:1;
}

.landing-head
{
    font-family:mr;
    position: relative;
    z-index:3;
    font-size:var(--small);
    background:url(../img/Meteor.svg);
    background-color:var(--yellow);
    display:flex;
    flex-flow:column nowrap;
    justify-content:space-between;
    align-items: center;
    padding:20px;
    color:var(--blue);
    gap:20px;
}

.landing-section
{
    z-index:3;
    position:relative;
}

.landing-section1
{
    z-index:4;
    position:relative;
}

.landing-content
{
    z-index:3;
    text-align:center;
    padding-inline:30px;
    position:relative;
}

.landing-footer{
    color:var(--lightblue);
    display:flex;
    flex-flow:row nowrap;
    justify-content: center;
    position: relative;
    padding:10px;
    gap:10px;
    font-size:var(--normal);
    -webkit-animation: scrolldown  2s ease-in-out infinite;
    animation: scrolldown  2s ease-in-out infinite;
}  

@keyframes scrolldown{
    0% {opacity:1.0; transform:translate(0px,0px); }
    50% {opacity:0.4; transform:translate(0px,5px);}
    100% {opacity:1.0; transform:translate(0px,0px);}
}

.landing-footer img{
    width:30px;
}

.landing-head span
{
    display:flex;
    flex-flow:row nowrap;
    gap:10px;
}

.landing-head span img
{
    width:20px;
}

.landing-head-links{
    display:flex;
    align-items: center;
    gap:20px;
}


.header
{
display:none;
color:var(--blue);
position:relative;
z-index:40;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
background:url(../img/Meteor.svg);
    background-color:var(--yellow);
overflow:auto;
padding-top:0px;
}

.header-section1{
    border-radius: 10px 10px 0px 0px;
    box-shadow:0px -1px 10px 0px rgba(40,40,40,0.2);
}

.header-icon{
    display:flex;
    align-items: center;
    gap:10px;
    font-size: var(--normal);
    padding-inline:10px;
    padding-block:10px;
    position:relative;
    -webkit-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
    color:var(--elblue);
    border-bottom:solid 1px #eaeaea;
    background-color: #ffffff;
    cursor:pointer;
}

.header-icon:hover{
    background-color:#f1f1f1;
}

.header-icon:nth-of-type(1){
    border-radius:10px 10px 0px 0px 
}

.header-icon:nth-last-of-type(1){
    border-radius: 0px 0px 10px 10px;
    border:none;
}

.header-icon img{
    width:25px;
    height:25px;
}



.llogo{
    display:flex;
    justify-content: flex-start;
    align-items: center;
    text-transform: uppercase;
    font-size:0.6rem;
    gap:3px;
    flex-flow: row nowrap;
    color:var(--elblue);
    line-height:5px;
    font-weight:400;
    margin-right:15px;
    cursor: pointer;
}



.llogo span{
    display:inline-block;
    color:var(--lightblue);
    line-height:8px;
    margin-top:4px;
    font-size:0.5rem;
}

.llogo div{
    display:grid;
    grid-template-columns: 1fr;
    gap:0px;
    margin-top:0px;
}

.logo{
    display:none;
}

.d-logo
{
width:50px;
}

#closemenu
{
    width:25px;
    height:25px;
padding:10px;
cursor:pointer;

}

.menu-header{
    position:sticky;
    top:0px;
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content: space-between;
    padding:10px;
    padding-inline:15px;
    z-index:2;
    background-color:var(--yellow);
    border-bottom: solid 1px #f1ca22;
    border-radius: 0px 0px 15px 15px;
}

.menu-header img{
    width:25px;
    height:25px;
    cursor:pointer;
}

#closemenu img{
    display:flex;
    flex-flow:row nowrap;
    align-items: center;
    justify-content: center;
    width:22px;
}


@keyframes menubar{
    0% {top:-100%;}
    100%{top:0px};
}

@-webkit-keyframes menubar{
    0% {top:-100%;}
    100%{top:0px};
}

.nav-link{
    position:relative;
    padding-inline:30px;
    padding-block: 15px;
    font-family:mm;
    font-weight:700;
    font-size:var(--medium);
    letter-spacing: 2px;
    user-select:none;
}

.separator{
    position: relative;
    margin-top:20px;
}

.sub-menu{
    padding-block:5px;
    font-size:var(--normal);
    font-family:mm;
    letter-spacing: 0px;
    z-index:-1;
}

.sub-menu-small{
    font-size:var(--small);
}

.sub-menu li{
    font-family:mr;
    letter-spacing:0px;
    font-size:var(--normal);
}

.column-sect{
    column-count:2;
    column-gap:5px;
    column-rule: solid 1px var(--dyellow);
    column-fill:balance;
    padding-bottom:10px;
}

.header img{
    width:50px;
}

.main-section{
    position:absolute;
    top:100%;
    width:100%;
}

.main-services
{
    position:relative;
 display:grid;
grid-template-columns: 1fr;
 justify-content: center;
 align-content:start;
    gap:20px;
 
}

.main-services-column
{
    display:grid;
    grid-template-columns: 1fr;
    align-content:start;
    gap:20px;
}

.main-services-column img
{
width:100%;
border-radius:15px;
box-shadow:1px 1px 20px 0px rgba(30,30,30,0.1);
}

.main-service-title
{
    font-family:mb;
    font-size:var(--medium);
    letter-spacing: 5px;
    margin-bottom:20px;
    position:relative;
}

.main-service-title::after
{
    content:'';
position:absolute;
top:-10px;
left:-10px;
width:100px;
height:5px;
background-color:var(--elblue);
}

.main-service
{

 
    padding-block:20px;
    padding-bottom:40px;
    padding-inline:40px;

    position:relative;
}

.main-service:nth-of-type(1):before
{
content:'';
position:absolute;
left:0px;
right:0px;
top:-10px;
bottom:-10px;
margin:auto;
transform:skewY(5deg);
background-color:#ffffff;
border-right:solid 150px var(--yellow);
transform: skewY(3deg);
z-index:0;
box-shadow:1px 1px 20px 0px rgba(30,30,30,0.1);
border-radius:15px;
}

.main-service:nth-of-type(2):before
{
content:'';
position:absolute;
left:0px;
right:0px;
top:-10px;
bottom:-10px;
margin:auto;
transform:skewY(5deg);
background:-webkit-linear-gradient(45deg,var(--mblue),var(--elblue)); 
border-top:solid 5px var(--yellow);
border-left:solid 5px var(--yellow);
transform: skewY(3deg);
z-index:0;
box-shadow:1px 1px 20px 0px rgba(30,30,30,0.1);
border-radius:15px;
}

.main-service div
{
    position:relative;
    z-index:1;
    color:#ffffff;
}

.main-service span
{
    display:block;
    position:relative;
    z-index:1;
    color:var(--blue);
    margin-bottom:10px;
}

.main-service span span{
    display:block;
    position:relative;
    z-index:1;
    color:#000000;
    font-size:var(--small);
}

.main-service span::before
{
    content:'  ';
    position:absolute;
    left:-10px;
    top:7px;
    margin:auto;
    width:4px;
    height:10px;
    z-index:0;
    border-radius:10px;
    background-color: var(--myellow);
}

.main-service span span::before{
    content:'  ';
    position:relative;
}

.main-other
{
    position:relative;
    line-height:25px;
}


.hide
{
    transition: all 0.3s ease-in-out;
    opacity:0;
    transform: translate(0px,50px);
    
}

.show
{
    transition: all 0.5s ease-in-out;
    transform: translate(0px,0px);
   opacity:1.0 !important;
}

.img-color
{
    width:150px;
    margin:auto;
    filter: invert(7%) sepia(39%) saturate(5691%) hue-rotate(221deg) brightness(98%) contrast(92%);
}

.blue-svg
{
    filter: invert(7%) sepia(39%) saturate(5691%) hue-rotate(221deg) brightness(98%) contrast(92%);
    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}

.lblue-svg
{
    filter: invert(48%) sepia(17%) saturate(817%) hue-rotate(189deg) brightness(91%) contrast(92%);
}

.yellow-svg
{
    filter: invert(84%) sepia(96%) saturate(438%) hue-rotate(328deg) brightness(100%) contrast(101%);
}

.white-svg
{
    filter: invert(96%) sepia(92%) saturate(32%) hue-rotate(61deg) brightness(107%) contrast(108%);
}

.yellow-color
{
    color:var(--dyellow);
}

.black-color
{
    color:var(--lblue);
    font-family:mm;
}

.lblue-svg:hover
{
    filter: invert(96%) sepia(92%) saturate(32%) hue-rotate(61deg) brightness(107%) contrast(108%);
    cursor:pointer;
}

.blue-svg:hover
{
    opacity:0.7;
    cursor:pointer;
}

.story
{
    display:flex;
    flex-flow:row nowrap;
    position:relative;
    justify-content: center;
    gap:0px;
    align-items:center;
    background:url(../img/construction1.jpg);
    background-size:cover;
    background-position:bottom;
    font-family:mm;
    font-size:var(--large);
    color:#ffffff;
    padding-top:200px;
    padding-bottom:200px;
}

.story-content
{
    position:relative;
    z-index:2;
    text-align: center;
    line-height: 50px;
}

.story-buttons
{
    display:flex;
    flex-flow:column nowrap;
    align-items:center;
    justify-content: center;
    gap:10px;
    margin-top:20px;
}

.shapes
{
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    background:linear-gradient(180deg,var(--blue),rgba(16, 30, 74, 0.5));

}

.story-content span:nth-of-type(1)
{
    display:inline-block;
    font-size:var(--slarge);
    color:var(--yellow);
    font-family:mbb;
    letter-spacing: 4px;
    margin-top:20px;
}

.story-content span:nth-of-type(2)
{
    display:block;
    font-size:var(--large);
    color:#ffffff;
    font-family:mm;
}

.story img
{
    max-width:50%;
}

.section1{
    position:relative;
    display:flex;
    flex-flow:row wrap;
    justify-content: center;
    color:var(--blue);
    padding-inline: 20px;
    gap:100px;
    z-index:3;
    top:-30px;
    margin-bottom: -60px;
}

.section1::before{
    content:'';
    position:absolute;
    background:url(../img/house1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position:bottom;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    transform:skewY(3deg);
    border-radius: 15px;
    z-index: -1;
}

.sect1
{
    position:relative;
    padding:50px;
    max-width:300px;
    display:grid;
    grid-template-columns: 1fr;
    gap:20px;
    
}

.sect1::before{
    content:'';
    position:absolute;
    top:-30px;
    bottom:-30px;
    left:0px;
    right:0px;
    background-color:#ffffff;
    transform:skew(0deg,-5deg);
    border:solid 1px #eaeaea;
    z-index:-1;
    box-shadow:0px 1px 15px 0px rgba(40,40,40,0.1);
    border-radius: 15px;
}



.sect1-title{
    text-align:center;
    font-family:mb;
    color:var(--elblue);
    font-size:var(--large);
    line-height:3rem;
}


.section3{
    padding-inline:30px;
    padding-top: 50px;
    display:flex;
    flex-flow:column nowrap;
    justify-content: center;
    background:url(../img/valley.svg);
    background-repeat:no-repeat;
    align-items:center;
    font-size:var(--elarge);
    line-height: var(--elarge);
    font-family:mb;
    color:var(--mblue);
    text-align:center;
    padding-bottom:100px;
    position:relative;
    z-index:1;
}

.section4{
    display:flex;
    flex-flow:column nowrap;
    justify-content: center;
    background:url(../img/valley.svg);
    background-repeat:no-repeat;
    align-items:center;
    font-size:var(--elarge);
    font-family:mb;
    color:var(--mblue);
    text-align:center;
    padding-top:100px;
    padding-bottom:100px;
}

.section5{
    position: relative;
    padding-top:100px;
    padding-bottom:120px;
    color:#000000;
    padding-inline:0px;
    height:400px;
    color:#ffffff;
    margin-top:-30px;
}

.section5 .section-title{
    text-align: left;
    font-size:var(--elarge);
}

 .section-title:nth-child(2){
    position:relative;
display:flex;
flex-flow:row nowrap;
justify-content: flex-end;
}

.section5::before{
    content:'';
    position:absolute;
    background:url(../img/kitchen1.jpg);
    background-position:bottom;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    opacity:0.5;
    transform:skewY(3deg);
    border-radius: 15px;
}

.section6{
    display:flex;
    flex-flow:column nowrap;
    justify-content: center;
    background:url(../img/wave2.svg);
    background-repeat:no-repeat;
    background-size:100% 100%;
    align-items:center;
    font-size:var(--medium);
    font-family:mr;
    color:#ffffff;
    text-align:center;
    padding-inline:20px;
    padding-block:200px;
    padding-bottom:80px;
}

.section6-title{
    color:var(--yellow);
    font-size:var(--large);
    font-family:mm;
}

.section6 div span{
    font-family:mr;
}

.section-title{
    position:relative;
    font-size:var(--large);
    font-family:mb;
    z-index:2;
    padding:20px;
    color:var(--mblue);
}

.section5 .section-title{
    padding-bottom:0px;
}

.services{
   position:relative;
    margin:auto;
    overflow:hidden;
  padding-top:80px;
    
}

@keyframes ticker
{
    0% { transform:translate(0%,0)}
    100% {transform:translate(-100%,0)}
}


.service-watermark
{
    opacity:0.4;
    position:absolute;
    z-index:0;
    bottom:20px;
    right:20px;
    width:20%;
}

.service{
    position:relative;
    color:#ffffff;
    font-size:var(--small);
    font-family:mr;
    opacity:0.9;
    display:flex;
    flex-flow:row nowrap;
    margin-bottom:20px;
    gap:20px;
}


.service-span-wrapper{
    background-color:var(--myellow);
    padding-inline:20px;
    padding-block:5px;
    white-space: nowrap;
    border-radius:50px;
    color:var(--blue);
    position:relative;
    cursor:pointer;
    -webkit-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}

.service-span-wrapper:hover{
    transform: scale(1.05);
}

.service-span{
    display:none;
    position:absolute;
    bottom:105%;
    left:-10%;
    right:-10%;
    z-index:1;
    background-color: #ffffff;
    padding:5px;
    font-size:var(--small);
    border-radius: 5px;
    text-align:center;
    white-space:wrap;
}

.service-span-wrapper:hover .service-span{
    display:inherit;
}

.service:nth-child(1){
    animation: ticker 60s linear infinite;
}

.service:nth-child(2){
    animation: ticker 80s linear reverse infinite;
}

.service:nth-child(3){
    animation: ticker 120s linear infinite;
}

.prev-arrow{
    position:absolute;
    top:0px;
    margin:auto;
    left:20px;
    width:70px;
    height:70px;
    background-color:var(--myellow);
    border-radius: 100px;
    cursor:pointer;
    z-index:3;
    border:none;
    outline:none;
    display:flex;
    flex-flow:column nowrap;
    justify-content: center;
    align-items: center;
    box-shadow:1px 1px 10px 0px rgba(30,30,30,0.1);
    -webkit-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
    user-select: none;
}

.prev-arrow img, .next-arrow img{
    width:30px; 
}

.next-arrow{
    position:absolute;
    top:0px;
    margin:auto;
    right:20px;
    width:70px;
    height:70px;
    background-color:var(--myellow);
    border-radius: 100px;
    cursor:pointer;
    z-index:3;
    border:none;
    outline:none;
    display:flex;
    flex-flow:column nowrap;
    justify-content: center;
    align-items: center;
    box-shadow:1px 1px 10px 0px rgba(30,30,30,0.1);
    -webkit-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
    user-select: none;
}

.next-arrow:hover, .prev-arrow:hover{
    transform:translate(0px,5px);
}

.section3-content{
    position:relative;
    font-family:mr;
    font-size:var(--normal);
    max-width:500px;
    line-height:35px;
    margin-top: 20px;
    display:grid;
    text-align:center;
    grid-template-columns: 1fr;
    gap:20px;  
}

.section3-img{
width:250px;
margin:auto;
margin-top:20px;
}

.section3-content .section3-img{
    -webkit-filter:grayscale(100%);
    filter:grayscale(100%);
    opacity:0.6;
}

#subtype{
    height:80px;
   font-family:mr;
   color:#ffffff;
   font-size:var(--medium);
}

#subtype span{
    color:var(--yellow);
    font-family:mb;
    letter-spacing: 2px;
}

.reg-no{
    font-family:mr;
    font-size:var(--medium);
    color:var(--lblue);
    line-height:45px;
    font-weight: 400;
}

.section2{
    position:relative;
}

.section2-mask{
    padding-top:200px;
    padding-bottom:0px;
    height:350px;
    position:relative;
    background:url(../img/ker2.jpg);
    background-size:cover;
    background-position:right;
    -webkit-mask:url(../img/logo1.svg);
    -webkit-mask-size: 450px;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask:url(../img/logo1.svg);
    mask-size: 450px;
    mask-position: center;
    mask-repeat: no-repeat;
}

@media screen and (max-width:520px){
    .section2-mask{
        mask-size: 90%;
        -webkit-mask-size: 90%;
    }
}

.dash-table tr{
    cursor:context-menu;
}

.dash-table tr:nth-child(even){
    background-color:#f5f5f5;
}

.dash-table tr:hover{
    background-color:#eaeaea;
}

.table-span-holder{
    display:flex;
    flex-flow:row wrap;
    gap:10px;
}

.table-span{
    background-color:var(--yellow);
    padding-inline:20px;
    padding-block:2px;
    font-size:var(--small);
    font-family:mr;
    cursor:pointer;
    border-radius: 30px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

.table-span:hover{
    background-color:var(--dyellow);
}

.dt-buttons{
    padding:10px;
}

.dataTables_filter{
    padding:10px !important;
}

.dataTables_info{
    padding:10px !important;
}

.dataTables_filter input{
    background-color:#eaeaea !important;
    border:none !important;
    border-radius: 50px !important;
    height:35px !important;
    outline:none !important;
    padding-left:20px !important;
    font-size:var(--small) !important;
    font-family:mr !important;
}

.paginate_button{
    border:none !important;
    background-color:#eaeaea !important;
    font-size:var(--small) !important;
}

.dataTables_filter input:focus{
    background-color:#dadada !important;
}

.dt-buttons .dt-button {
    font-family:mr;
    font-size:var(--small) !important;
    background-color:#000000 !important;
    color:#ffffff !important;
    border:none !important;
    border-radius:20px !important;
    padding-block:2px !important;
    padding-inline:20px !important;
}

.dt-buttons .dt-button:hover{
    background-color:var(--mblue) !important;
}

.button1{
    border:none;
    background-color:var(--mblue);
    color:var(--yellow);
    font-family:jost;
    font-size:var(--normal);
    font-weight: 400 !important;
    padding-block:10px;
    padding-inline:30px;
    cursor:pointer;
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content: center;
    gap:10px;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    border-radius: 10px;
}

.button1:hover{
    background-color:#000000;
    color:#ffffff;
}

.button2{
    border:none;
    background-color:transparent;
    color:var(--yellow);
    font-family:mb;
    font-size:var(--small);
    padding-block:10px;
    padding-inline:0px;
    letter-spacing: 1px;
    cursor:pointer;
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content: center;
    gap:10px;
    text-align:left;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    position:relative;
}

.button2::after{
    content:'';
    position:absolute;
    bottom:0px;
    left:0px;
    height:3px;
    width:0px;
    transition:all 0.2s ease-in-out;
    background-color:var(--myellow);
}

.button2:hover::after{
    width:80%;
}

.button2:hover img, .button1:hover img, .button3:hover img{
    transform: translate(4px,0px);  
}

.button3{
    border:none;
    background-color:transparent;
    color:var(--yellow);
    font-family:mr;
    font-weight:400;
    font-size:var(--normal);
    padding-block:10px;
    padding-inline:0px;
    cursor:pointer;
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content: center;
    gap:10px;
    text-align:left;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    position:relative;
}

.button3::after{
    content:'';
    position:absolute;
    bottom:0px;
    left:0px;
    height:3px;
    width:0px;
    transition:all 0.2s ease-in-out;
    background-color:var(--myellow);
}

.button3:hover::after{
    width:80%;
}

.button2:hover img, .button1:hover img, .button3:hover img, .button5:hover img{
    transform: translate(4px,0px);  
}

.button1 img, .button2 img, .button3 img{
    transition: all 0.3s ease-in-out;
    width:30px !important;
    filter: invert(84%) sepia(96%) saturate(438%) hue-rotate(328deg) brightness(100%) contrast(101%) !important;
}


.button1 img, .button2 img{
    transition: all 0.3s ease-in-out;
    width:30px !important;
    height:30px !important;
    filter: invert(84%) sepia(96%) saturate(438%) hue-rotate(328deg) brightness(100%) contrast(101%) !important;
}

.button1:hover img{
    filter: invert(96%) sepia(92%) saturate(32%) hue-rotate(61deg) brightness(107%) contrast(108%) !important;
}

.button4{
    height:40px;
    padding-inline:15px;
    background-color:var(--mblue);
    color:#ffffff;
    border-radius:7px;
    font-family:mr;
    font-size: var(--normal);
    border:none;
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    text-align: center;
    gap:10px;
    font-weight:400 !important;
    cursor:pointer;
    transition: all 0.2s ease-in-out;
}

.button4:hover{
    background-color:var(--lblue);
}

.button4 img{
    width:20px;
    filter:invert(1);
}


.button5{
    border:none;
    background-color:transparent;
    color:var(--elblue);
    font-family:mb;
    font-size:var(--normal);
    padding-inline:0px;
    cursor:pointer;
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content: center;
    text-transform: capitalize;
    letter-spacing: 1px;
    gap:10px;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    position:relative;
}


.button5 img{
    transition: all 0.3s ease-in-out;
    margin-top:8px;
    width:30px !important;
    height:30px !important;
}


.login-wrapper h2{
    color:var(--blue);
    margin:0px;
    text-align:center;
}

.login-wrapper{
    width:300px;
    margin:auto;
    margin-top:20%;
}

.login-wrapper input{
    background-color:#eaeaea;
    border:none;
    padding:10px;
    height:40px;
    font-family:mr;
    font-size:var(--normal);
    outline:none;
    transition: all 0.2s ease-in-out;
}

.login-wrapper input::placeholder{
    font-style: normal;
}

.big-text{
    font-size:var(--large);
}

.swiper{
    width:100%;
}

.swiper-wrapper{
   padding-block:50px;
   padding-left:30px;
}

.swiper-slide{
    
    background-color: #ffffff;
    text-align:left;
    box-shadow: 0px 1px 5px 0px rgba(50,50,50,0.1);
    max-width:300px;
    min-height:300px;
    border-radius: 10px;
}

.project-wrapper{
    position:relative;
    background-color:#ffffff;
    border-radius: 15px;
    box-shadow: 0px -1px 10px 0px rgba(50,50,50,0.2);
   
}

.project-img{
    position:absolute;
    top:0px;
    bottom:25px;
    left:0px;
    right:0px;
    transform: rotate(3deg);
    box-shadow: -1px -1px 10px 0px rgba(50,50,50,0.2);
    border-radius: 10px 10px 0px 0px;
}

.project-tint{
    background: linear-gradient(45deg,rgba(2, 103, 181, 0.6),rgba(7, 137, 236, 0.6));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position:absolute;
    top:100px;
    bottom:10px;
    left:0px;
    right:0px;
    border-radius: 15px;
    box-shadow: 0px -1px 15px 0px rgba(30,30,30,0.2);
}

.project-tint-border{
    border:solid 3px var(--mblue);
    border-radius: 15px;
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    opacity:0.2;
}

.project-tint img{
    position:absolute;
    top:20px;
    right:20px;
    width:100px;
    opacity:0.6;
}


.project-content{
    position:relative;
    padding:30px;
    height:400px;
    z-index:2;
    border-radius: 15px;
    display:flex;
    flex-flow:column nowrap;
    justify-content: flex-end;
    align-items: flex-start;
}

.placeholder{
    border-radius: 10px;
    object-fit: cover;
    max-height:150px;
    width:100%;
    filter: grayscale(100%);
}

.project-title{
    font-family:mr;
    
    font-size:var(--medium);
}

.project-desc{
    font-family:mr;
    font-weight:300;

    font-size:var(--normal);
}

.project-location{
    font-size:var(--small);
    font-family:mr;
}

.project-img img{
    position:absolute;
    top:20px;
    right:20px;
    width:100px;
    opacity:0.2;
}

/* PAGE TEMPLATE */

.page-brand{
    position:absolute;
    top:70px;
    right:20px;
    width:100px;
    opacity:0.1;
    left:20px;
    margin:auto;
display:none;
}

.tint{
    position:absolute;
    background:-webkit-linear-gradient(45deg,var(--dyellow),var(--myellow));
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    opacity:0.5;
    z-index:-1;
}

.blue-tint{
    position:absolute;
    background:-webkit-linear-gradient(45deg,var(--blue),var(--lblue));
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    opacity:0.5;
    z-index:-1;
}

.black-tint{
    position:absolute;
    background:-webkit-linear-gradient(45deg,var(--blue),#000000);
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    opacity:0.4;
    z-index:-1;
}

.page1-title{
    font-family:mb;
    color:var(--blue);
    font-size:var(--medium);
    letter-spacing: 2px;

}

.page1-subtitle{
    font-family:mr;
    color:#fff;
    font-size:var(--normal);
    text-align: left;
}

.page-subtitle{
    font-size:var(--small);
    line-height:0.5rem;
    margin-top:10px;
}

.page-main-section{
    background:url(../img/valley.svg);
    background-repeat:no-repeat;
    display:grid;
    grid-template-columns:1fr;
    align-items:start;
    padding-top:0px;
}

.page-main-section-form{
    display:grid;
    grid-template-columns:1fr;
    align-items:start;
}

.page-main-section-form h2{
    text-align:center;
}

.form-notice:nth-of-type(1){
    text-align: center;
}

.page-sidepanel{
    position:relative; 
}

.page-sidepanel::before{
    content:'';
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    background-color:#ffffff;
    transform:skewY(3deg);
    border-radius:0px 0px 15px 15px;
    box-shadow:0px 1px 15px 0px rgba(50,50,50,0.2);

}

.y-span{
    color:var(--yellow);
    font-family:mbb;
    font-size:10rem;
}

.y-span1{
    color:var(--elblue);
    font-family:mb;
    font-size:var(--large);
    margin-bottom: -10px;
}

.page-content, .page-content4{
    position:relative;
    padding-inline:20px;
    padding-top:20px;
    padding-bottom:50px;
    line-height:35px;
    color:#000000;
    -webkit-animation: fadein 0.5s ease-in-out ;
    animation: fadein 0.5s ease-in-out ;
}

.page-content::before{
    content:' ';
    display:block;
    position:absolute;
    width:70%;
    height:70%;
    border-right:solid 50px var(--myellow);
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
    margin:auto;
    -webkit-transform:rotate(5deg);
    -moz-transform:rotate(5deg);
    transform:rotate(10deg);
    opacity:0.2;
    z-index:-1;
}

.page-content2{
    position:relative;
    padding-inline:20px;
    padding-top:0px;
    padding-bottom:50px;
    display:grid;
    gap:40px;
    -webkit-animation: fadein 0.5s ease-in-out ;
    animation: fadein 0.5s ease-in-out ;
}

.page-content2  p{
    text-align: center;
    
}

@-webkit-keyframes fadein{
    0% {opacity:0; transform: translate(-10px,0px); }
    70% {opacity:0.8; transform: translate(10px,0px); }
    100% {opacity:1; transform: translate(0px,0px); }
}

@keyframes fadein{
    0% {opacity:0; transform: translate(-10px,0px); }
    70% {opacity:0.8; transform: translate(10px,0px); }
    100% {opacity:1; transform: translate(0px,0px); }
}

.page-content3{
    position:relative;
    padding-inline:20px;
    padding-block:50px;
    display:grid;
    gap:40px;
    -webkit-animation: fadein 0.5s ease-in-out ;
    animation: fadein 0.5s ease-in-out ;
}

.page-content3  p{
    text-align: center;
    
}

#menu{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding-inline:20px;
    padding-block:10px;
    z-index:30;
    background-color:#ffffff;
    box-shadow: 1px 1px 20px 0px rgba(30,30,30,0.1);
    border-radius: 0px 0px 15px 15px;
}

.menu{
    width:45px;
    height:45px;
    cursor:pointer;
    transition:all 0.2s ease-in-out;
}

#up{
    display:none;
    position:fixed;
    bottom:20px;
    right:20px;
    border-radius:100px;
    background-color:var(--blue);
    padding:10px;
    width:30px;
    height:30px;
    z-index:22;
    box-shadow:1px 1px 20px 0px rgba(30,30,30,0.1);
}

#up img{
    width:100%;
}

.menu img{
    width:100%;
}

.menu:active{
    transform:scale(1.05);
}

.page-content p span{
    font-size:8.2rem;
    font-family:mr;
    display:block;
    float:left;
    line-height:6.5rem;
}

.page-content1{
    position:relative;
    padding-inline:20px;
    padding-top:30px;
    padding-bottom:20px;
    display:grid;
    grid-template-columns: 1fr;
    gap:20px;
    -webkit-animation: fadein 0.5s ease-in-out finite;
    animation: fadein 0.5s ease-in-out finite;
}

.page-placeholder{

    display:flex;
    flex-flow:column nowrap;
    align-items: center;
    text-align: center;
}

.page-placeholder-content{
    display: grid;
    gap:5px;
    margin-bottom: 20px;
}

.page-placeholder-content h2::after{
    background-color: transparent !important;
}

.page-placeholder-img{
    opacity:0.5;
    width:100%;
    margin-top: 30px;
    margin-bottom: -30px;
}

.page-section{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:30px;
}

.page-sect1{
    background:-webkit-linear-gradient(45deg,var(--elblue),var(--lblue));
    background:linear-gradient(45deg,var(--elblue),var(--lblue));
    box-shadow: 0px 1px 10px 0px rgba(30,30,30,0.1);
    padding:0px;
    font-size:var(--normal);
    text-align:center;
}

.page-sect1 img{
    width:100%;
    border-radius: 10px 10px 0px 0px;
    box-shadow:0px -1px 10px 0px rgba(10,10,10,0.1);
    object-fit: cover;
    height:200px;
}

.page-sect1 .project-content{
    display:block;
}

.page-sect1::after, .page-sect::after{
    content:'';
    position:absolute;
    top:0px;
    left:15px;
    width:10px;
    height:0px;
    transition:all 0.2s ease-in-out;
    background-color:var(--yellow); 
}

.icon-tooltip img{
    display:none;
}

.page-sect1::before, .page-sect::before{
    content:'';
    position:absolute;
    top:15px;
    left:0px;
    width:0px;
    height:10px;
    transition:all 0.2s ease-in-out;
    background-color:var(--yellow);
    
}

.page-sect1:hover::before, .page-sect:hover::before{
    width:100%;
}

.page-sect1:hover::after, .page-sect:hover::after{
    height:100%;
}

.page-sect1 .page1-title{
    text-align:left;
    color:#ffffff;
}

.page-sect{
    background-color:#ffffff;
    box-shadow: 0px 1px 10px 0px rgba(30,30,30,0.1);
    display:grid;
    grid-template-columns: 1fr;
    align-content:end;
    gap:10px;
    border-radius: 15px;
    font-size:var(--normal);
    text-align:center;
    height:500px;
}

.page-sect-wide{
    background-color:#ffffff;
    box-shadow: 0px 1px 10px 0px rgba(30,30,30,0.1);
    padding:20px;
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
    border-radius: 15px;
    font-size:var(--normal);
    text-align:center;
}

.page-tint{
    padding-block:30px;
    padding-inline:40px;
    background-color:#ffffff;
    display:flex;
    flex-flow:column nowrap;
    align-items:center;
    z-index:2;
    margin-bottom: 10px;
    margin-inline: -5px;
    box-shadow: 0px -1px 15px 0px rgba(30,30,30,0.2);
    border-radius: 15px;
    height:200px;
    border-bottom:solid 5px var(--mblue);
    border-left:solid 5px var(--mblue);
}

.page-tint img{
    width:50px;
    margin-bottom:10px;
}

.page-sidepanel-sect{
    position:relative;
    padding-top:80px;
    padding-bottom:20px;
}

.page-title{
    position:relative;
    font-size:var(--large);
    text-align:center;
    z-index:2;
    font-family:mb;
    margin:0;
}

.page-title img{
    position:relative;
    width:50px;
    margin-bottom:20px;
    opacity:0.2;
}

.blue-back{
    background-color:var(--blue);
    color:#ffffff;
}

.yellow-back{
    background-color:var(--yellow);
}

.contact-card-back{
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:-2;
    border-radius: 15px;
}

.call-back{
    background:url(../img/call.jpg);
    background-size:cover;
    background-position:center;
}

.visit-back{
    background:url(../img/visit.jpg);
    background-size:cover;
    background-position:center;
}

.service-back{
    background:url(../img/service.jpg);
    background-size:cover;
    background-position:center;
}

.client-back{
    background:url(../img/client-portal.jpg);
    background-size:cover;
    background-position:center;
}

.message-back{
    background:url(../img/message.jpg);
    background-size:cover;
    background-position:center;
}

.email-back{
    background:url(../img/email.jpg);
    background-size:cover;
    background-position:center;
}

/* FOOTER */

.footer-back{
    background:url(../img/Meteor.svg);
    background-color:var(--yellow);
}

footer{
    position:relative;
    font-size:var(--small);
    color:#000000;
    background-color:var(--mblue);
    padding:50px;
    padding-inline:0px;
    padding-top:0px;
    display:flex;
    flex-flow:column nowrap;
    align-items: center;
    justify-content: center;
}

.footer{
    position:relative;
    padding-inline:20px;
    background-color:transparent;
    z-index:1;
    opacity:1.0;
    color:#ffffff;
}

.footer-text-section2{
    position:absolute;
    padding:30px;
    text-align:center;
    font-family:mr;
    color:var(--blue);
    font-size:var(--normal);
    bottom:calc(10vh);
    left:0px;
    right:0px;
    z-index:3;
    display:none;
}

.footer-contact-wrapper{
    position:relative;
    display:flex;
    flex-flow:row wrap;
    justify-content: center;
    gap:40px;
    padding-inline:20px;
}

.footer-contact{
    display:grid;
    gap:5px;
    align-content: start;

}

hr{
    border:0;
    margin-block:20px;
}

.copy{
    color:#ffffff;
    margin-bottom:10px;
    font-size:var(--small);
    color:var(--lightblue);
}

.copy:nth-last-child(1){
    font-size:var(--esmall);
}

.footer button{
    margin:auto;
}

.footer div{
    text-align:center;
}

.footer-socials{
    display:flex;
    flex-flow:row nowrap;
    gap:20px;
    justify-content: center;
}

.footer-socials img{
    width:40px;
}

.socials{
    position:relative;
    display:flex;
    flex-flow:row nowrap;
    justify-content: flex-start;
    align-items:center;
    padding-block:20px;
    gap:10px;
}

.socials img{
    width:40px;
    filter: invert(7%) sepia(39%) saturate(5691%) hue-rotate(221deg) brightness(98%) contrast(92%);
}

.form-group{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
}

.form-section{
    display:grid;
    grid-template-columns: 1fr;  
}

.form-subsection{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
    font-size:var(--small);
    line-height:25px;
    margin-top:20px;
}

.form-subsection1{
    display:grid;
    grid-template-columns: 2fr 1fr;
    gap:10px;
    font-size:var(--small);
    line-height:25px;
    margin-top:20px;
    align-content: center;
}

.switch-input-wrapper{
    display:grid;
    grid-template-columns: 70px 1fr;
    align-content: center;
    gap:10px;
}

.switch-input-wrapper1{
    display:grid;
    grid-template-columns: 1fr;
    align-content: center;
    justify-items: end;
    gap:10px;
}

.form-notice{
    color:var(--elblue); 
    font-size:var(--small); 
    line-height:25px; 
    margin-block:20px;
    position:relative;
}

.form-notice img{
    display:inline-block;
    position:relative;
    width:20px;
    margin-bottom:-2px;
}

.form-section input{
    background-color:#ffffff;
    border:solid 1px #eaeaea;
    height:40px;
    font-size:var(--normal);
    font-family:mr;
    font-weight:300;
    border-radius:8px;
    outline:none;
    position:relative;
    padding-inline:10px;
    display:block;
    width:calc(100% - 20px);
}

.form-section input:disabled{
    background-color:#eaeaea !important;
}

.form-section select{
    background-color:#ffffff;
    border:solid 1px #eaeaea;
    height:50px;
    font-size:var(--normal);
    font-weight: 300;
    font-family:mr;
    border-radius:8px;
    outline:none;
    position:relative;
    padding-inline:10px;
    display:block;
    width:calc(100% - 0px);
}

.form-section textarea{
    background-color:#ffffff;
    border:solid 1px #eaeaea;
    height:50px;
    font-size:var(--normal);
    font-family:mr;
    font-weight:300;
    border-radius:8px;
    outline:none;
    position:relative;
    padding-inline:10px;
    padding-block:10px;
    resize:none;
    height:100px;
    display:block;
    position:relative;
    width:calc(100% - 20px);
}

.form-section input:focus, .form-section textarea:focus{
    background-color:#f9f9f9;
}

.form-section input:focus + .high::after, .form-section textarea:focus + .high::after{
    width:calc(100% - 10px);
    
}

.high{
    position:relative;
    display:block;
    transition:all 0.5s ease-in-out; 
}

.high::after{
    display:block;
    content:'';
    background-color:var(--elblue);
    position:absolute;
    top:2px;
    height:3px;
    left:5px;
    border-radius:5px;
    width:0px;
    transition:all 0.5s ease-in-out; 
}

.form-section label{
    position:relative;
    font-size:var(--small);
    margin-left:5px;
    margin-top:10px;
    z-index:1;
}

::placeholder{
    color:#cacaca;

}

input:read-only{
    color:#dadada;
}

.formsection input, select{
    background-color:transparent;
    border:none;
    height:40px;
    font-size:var(--normal);
    font-family:mr;
    outline:none;  
    padding:10px;
}

.formsection textarea
{
    font-size:var(--normal);
    font-family:mr;
    outline:none;
    resize:none;
    border:none;
    padding:10px;
}

.formsection label
{
    font-size:var(--small);
    color:var(--elblue);
    padding-inline:10px;
    padding-block:5px;
    background-color:var(--blue);
    border-left:solid 100px #ffffff;
    border-top:solid 5px var(--myellow);
   
}

.time-options-wrapper
{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
}

.opt input
{
    display:none;
}

.opt-label
{
    height:50px;
    display:flex;
    flex-flow:row nowrap;
    justify-content:center;
    align-items:center;
    border:solid 1px #dadada;
    border-radius:5px;
    user-select: none;
    cursor: pointer;
}

.time-loader
{
    height:50px;
    display:flex;
    flex-flow:row nowrap;
    justify-content:center;
    align-items:center;
    border:solid 1px #dadada;
    border-radius:5px;
    user-select: none;
    background-color:#cacaca;
    animation: timeloader 2s ease-in-out infinite;
}

@keyframes timeloader{
    0% {opacity:0.3;}
    50% {opacity:0.9;}
    100% {opacity:0.3;}
}

@-webkit-keyframes timeloader{
    0% {opacity:0.3;}
    50% {opacity:0.9;}
    100% {opacity:0.3;}
}

.opt-label:hover{
    outline: dashed 3px #dadada;
    outline-offset: 2px;
}

.opt-input{
    display:none;
}

.opt-input:checked + .opt-label{
    outline:solid 3px var(--elblue);
    color:var(--elblue);
    outline-offset: 2px;
}

.form-section input:required, .form-section textarea:required{
    background: url(../img/warning.svg);
    background-position: right 15px center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-blend-mode: lighten;
}

.form-section input[type="date"]:required{
    background: url(../img/warning.svg);
    background-position: right 40px center;
    background-size: 20px 20px;
    background-repeat: no-repeat;

}

.form-section input[type="number"]:required, .form-section select:required{
    background: url(../img/warning.svg);
    background-position: right 20px center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
}

.form-section input:valid, .form-section textarea:valid, .form-section select:valid{
    outline: solid 2px rgba(3, 201, 169,0.5);
    outline-offset: 2px;
    background: url(../img/verify.svg);
    background-position: right 15px center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
}

.form-section input[type="number"]:valid{
    outline: solid 2px rgba(3, 201, 169,0.5);
    outline-offset: 2px;
    background: url(../img/verify.svg);
    background-position: right 20px center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
}

.form-section input[type="date"]:valid{
    outline: solid 2px rgba(3, 201, 169,0.5);
    outline-offset: 2px;
    background: url(../img/verify.svg);
    background-position: right 35px center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
}

form{
    max-width:500px;
    margin:auto;
    gap:10px;
    display:grid;
    grid-template-columns: 1fr;
}

.register-form{
    max-width:500px;
    margin:auto;
    gap:5px;
    display:grid;
    grid-template-columns: 1fr;
}

fieldset{
    position:relative;
    border:solid 1px #eaeaea;
    width:calc(100% - 30px);
    margin:auto;
    gap:5px;
    display:grid;
    grid-template-columns: 1fr;
    border-radius:10px;
}

fieldset textarea{
    width:100%;
}

legend{
    font-size:var(--small);
    color:var(--elblue)
}

#resume-form{
    max-width:600px;
    display:none;
    padding-inline:30px;
    padding-bottom:30px;
    border:solid 1px #eaeaea;
    border-radius:10px;
}

.button-wrapper{
    margin-top:20px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
}

fieldset .button-wrapper{
 grid-template-columns: 1fr;
}

.form-button-wrapper{
    display:grid;
    grid-template-columns: 1fr;
}

::-webkit-file-upload-button{
    background-color:var(--blue);
    color:#ffffff;
    font-family:mr;
    font-size:var(--normal);
    border:none;
    padding-block:5px;
    padding-inline:10px;
    border-radius:7px;
    cursor:pointer;
}
    
::-webkit-file-upload-button:hover{
    background-color:var(--lblue);
}
    
    input[type="file"]{
    background-color:transparent !important;
    padding-top:10px;
    padding-bottom: 10px;
    
    }

a{
    display:inline-block;
    position:relative;
    transition:all 0.2s ease-in-out;
}

a::before{
    display:inline-block;
    content:'';
    position:absolute;
    left:0px;
    right:0px;
    bottom:-3px;
    height:2px;
    width:0px;
    background-color:var(--elblue);
    transition:all 0.2s ease-in-out;
}

a:hover::before{
    width:100%; 
}

h2,h1,h3 {
    position:relative;
    font-weight: 400 !important;
    color:var(--mblue);
}

strong, b{
    font-weight: 400 !important;
}

.page-main-section h2::after{
    display:block;
    content:'';
    position:absolute;
    bottom:-7px;
    left:0px;
    height:3px;
    border-radius:10px;
    width:100px;
    background-color:var(--myellow);
}

a:link, a:active, a:visited{
    color:var(--blue);
    text-decoration: none;
}

a:hover{
    color:var(--eblue);
    text-decoration: none;
}

a.flinks:link, a.flinks:active, a.flinks:visited{
    color:var(--lightblue);
    text-decoration: none;
    font-family:mr;
}

a.flinks:hover{
    color:#ffffff;
    text-decoration: none;
    font-family:mr;
}

a.plinks:link, a.plinks:active, a.plinks:visited{
    color:var(--lblue);
    text-decoration: none;
    font-family:mr;
}

a.plinks:hover{
    color:var(--elblue);
    text-decoration: none;
    font-family:mr;
}

a.wlinks:link, a.wlinks:active, a.wlinks:visited{
    color:#ffffff;
    text-decoration: none;
    font-family:mr;
}

a.wlinks:hover{
    color:var(--lightblue);
    text-decoration: none;
    font-family:mr;
}

a.sublink:link, a.sublink:active, a.sublink:visited{
    color:var(--blue);
    font-family:mr;
    font-weight:300;
    font-size:var(--normal);
    text-decoration: none;
}

a.sublink:hover{
    color:var(--lblue);
    text-decoration: none;
}

a.menu:link, a.menu:active, a.menu:visited{
    color:var(--blue);
    text-decoration: none;
}

a.menu:hover{
    color:var(--dyellow);
    text-decoration: none;
}

.bold{
    font-family:mm;
}

.timeline{
    position:relative;
    margin-block:30px;
    padding-block:50px;
    display:grid;
    grid-template-columns: 1fr;
    gap:20px;
}

.t-description{
    display:inline-block; 
    color:#707070; 
    margin-top:10px; 
    font-size:0.8rem; 
    line-height:1rem;
}

.timeline + button{
    margin:auto;
}

.timeline::before{
    content:'';
    display:block;
    position:absolute;
    width:5px;
    background-color:var(--elblue);
    border-radius: 10px;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    margin:auto;
}

.tl:nth-child(odd){
    position:relative;
    display:flex;
    flex-flow:row nowrap;
    justify-content: flex-start;
  
}

.tl:nth-child(odd)::after{
    content:' ';
    display:block;
    position:absolute;
    width:20px;
    height:20px;
    border: solid 5px var(--myellow);
    background-color: var(--elblue);
    box-shadow:0px 1px 5px 0px rgba(30,30,30,0.1);
    border-radius: 40px;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    margin:auto;
}

.tl:nth-child(even)::after{
    content:' ';
    display:block;
    position:absolute;
    width:20px;
    height:20px;
    border: solid 5px var(--myellow);
    box-shadow:0px 1px 5px 0px rgba(30,30,30,0.1);
    background-color: var(--elblue);
    border-radius: 40px;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    margin:auto;
}

.tl:nth-child(odd) div, .tl:nth-child(even) div{
    position:relative;
    padding:20px;
    width:calc(50% - 60px);
    border-radius:15px;
    background-color:#ffffff;
    font-size:var(--small);
    line-height:25px;
    box-shadow:1px 1px 20px 0px rgba(30,30,30,0.1);
}

.timeline h3{
    margin-block:5px;
}

.timeline h2{
    text-align: center;
}

.tl:nth-child(odd) h3{
    text-align: right;
}

.tl:nth-child(even) h3{
    text-align: left;
}

.tl:nth-child(even){
    position:relative;
    display:flex;
    flex-flow:row nowrap;
    justify-content: flex-end;
}


/* DASHBOARD */

.dash-window
{
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    display:grid;
    grid-template-columns:80px 200px 1fr;
}

.dash-sidebar
{
    position:relative;
    top:0px;
    bottom:0px;
    background-color:var(--blue);
    box-shadow: 1px 0px 10px 0px rgba(30,30,30,0.2);
}

.dash-sidebar-small
{
    position:relative;
    top:0px;
    bottom:0px;
    display:flex;
    flex-flow:column nowrap;
    align-items:center;
}

.submenu-item
{
    padding:28px;
    cursor:pointer;

}

.submenu-item:hover
{
    background-color:#eaeaea;
}

.submenu-item img
{
    width:100%;
}

.dash-body
{
    position:relative;
    top:0px;
    bottom:0px;
    overflow:auto;
}

.dash-header
{
    position:sticky;
    top:0px;
    padding:20px;
    font-family:mr;
    font-size:var(--normal);
    background-color:#ffffff;
    z-index:2;
    display:flex;
    flex-flow:row nowrap;
    justify-content: space-between;

}

.dash-title
{
    position:relative;
    font-size:var(--large);
    font-family:mb;
    padding-inline:20px;
}

.dash-subtitle
{
    position:sticky;
    top:50px;
    font-size:var(--medium);
    font-family:mb;
    padding-inline:20px;
    padding-block:10px;
    background-color:#ffffff;
    z-index:3;
}

.dash-subtitle span
{
   
    font-family:ml;
    font-size:var(--normal);
}

.dash-content
{
   position:relative; 
}

.dash-item
{
    padding:20px;
    border-bottom:dashed 1px #dadada;
    display:flex;
    flex-flow:row nowrap;
    justify-content: space-between;
    gap:20px;
    user-select:none;
    transition: all 0.2s ease-in-out;
}

.status-ind
{
    width:10px;
    height:10px;
    margin-top:10px;
    border-radius:20px;
    background-color:#eaeaea;
}

.dash-message
{
    padding:20px;
    font-size:var(--small);
}

.dash-item:hover
{
background-color:#f1f1f1;
}

.dash-address
{
    font-size:var(--small);
    color:var(--blue);
}

.dash-section
{
    display:flex;
    flex-flow:row nowrap;
    align-items:flex-start;
    justify-content: flex-start;
gap:20px;
}

.dash-status
{
    display:flex;
    flex-flow:column nowrap;
    align-items:flex-end;
    justify-content:center;
    gap:10px;
}

.dash-status-item
{
    padding-inline:15px;
    padding-block:5px;
    color:#ffffff;
    font-size:var(--small);
    border-radius:20px;
    
}

.dash-status-item:nth-child(1)
{
    background-color: var(--mblue);
}

.dash-status-item:nth-child(2)
{
    background-color: var(--elblue);
}

.dash-status-item:nth-child(3)
{
    background-color: var(--dyellow);
}

.dash-img1
{
    width:30px;
}

.dash-item:nth-last-child(1)
{
    border-bottom:0;
}



.dash-sidebar-logo
{
    position:relative;
    filter:invert(1.0);
    display:flex;
    flex-flow: row nowrap;
    justify-content:center;
}

.dash-sidebar-logo img
{
    opacity:0.2;
    width:150px;
    padding:20px;
}

.dash-footer
{
    font-size:var(--small);
    color:#dadada;
    padding:20px;
}

.dash-menu-item
{
    padding-block:15px;
    padding-inline:20px;
    color:#ffffff;
    font-family:mr;
    cursor:pointer;
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content: space-between;
    cursor:pointer;
    user-select:none;
}

.dash-menu-item:hover
{
background-color:var(--lblue)
}

.red-back
{
    background-color:red !important;
}

.yellow-back
{
    background-color:var(--myellow) !important;
}

.green-back
{
    background-color:green !important;
}

/* DETAILS */

.details-heading
{ 
    font-family:mb;
    font-size:var(--large);
}

.details-subheading
{
    position:relative;
    display:flex;
    flex-flow:row nowrap;
    gap:10px;
}

.details-small
{
    display:flex;
    flex-flow:row nowrap;
    gap:10px;
    font-size:var(--small);
}

.details-subheading img
{
    width:var(--normal);
}

.details-small img
{
    width:var(--small)
}

.details-dateinfo
{
    position:relative;
    display:grid;
    grid-template-columns: 1fr 1fr;
gap:10px;
padding-block:20px;

}

.details-dateinfo span
{
    font-size:var(--small);
    color:#999999;
}

.details-dateinfo div
{
    position:relative;
    padding:20px;
    font-family:mr;
    font-size:var(--small);
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    gap:10px;
    border-radius:10px;
    border:dashed 2px #eaeaea;
}

.details-dateinfo div input
{
    border:none;
    outline:none;
    font-family:mr;
    font-size:var(--normal);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}

.details-dateinfo img
{
width:20px;
}

.details-button
{
    height:50px;
    width:200px;
    background-color:var(--myellow);
    font-family:mr;
    font-size:var(--normal);
    border:none;
    cursor:pointer;
}

.details-button:hover
{
    background-color:var(--dyellow);
}

.details-footer
{
   position:relative;
   bottom:0px;
   left:0px;
   right:0px;
   padding:20px;
   background-color:var(--lblue);
   z-index:4;
}

/* MODALS */

.new-modal
{
    position:fixed;
    top:0px;
    bottom:0px;
    right:0px;
    width:600px;
    z-index:20;
    background-color:#ffffff;
    box-shadow:-2px 2px 20px 0px rgba(30,30,30,0.1);
    display:none;
    overflow:auto;

}

.new-modal-header
{
    position:sticky;
    top:0px;
    padding:20px;
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content:space-between;
    z-index:3;
    background-color:#ffffff;
}

.new-modal-header #close
{
    padding:5px;
    cursor:pointer;
    transition: all 0.2s ease-in-out;
}

.new-modal-header img
{
    width:20px;
    
}

.new-modal-header #close:hover
{
    transform:scale(1.2);
}

.new-modal-content
{
    position:relative;
    padding:20px;
    padding-bottom:0px;

}

#confirm{
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    background-color:#ffffff;
    display:flex;
    flex-flow:column nowrap;
    justify-content: center;
    align-items:center;
    text-align: center;
    z-index:20;
    gap:10px;
    display:none;
}

.confirm{
position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    margin:auto;
    display:flex;
    flex-flow:column nowrap;
    justify-content: center;
    align-items:center;
    text-align: center;
    z-index:20;
    gap:10px;
}

.confirm img
{
    width:300px;

}

#messagecontainer
{
    position:fixed;
    bottom:10px;
    right:10px;
    z-index:100;
}

.message
{
    opacity:0.9;
    background-color:#ffffff;
    border:solid 1px #eaeaea;
    box-shadow:1px 1px 10px 0px rgba(40,40,40,0.2);
    border-radius:10px;
    width:300px;
    padding:10px;
    margin-top:10px;
}

.message div
{
    display:flex;
    flex-flow:row nowrap;
    justify-content: flex-end;
    border-bottom: solid 1px #eaeaea;
}


#back
{
    position:fixed;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
    background-color:#dadada;
    opacity:0.7;
    z-index:19;
    display:none;
    
}


/* HTML: <div class="loader"></div> */
.loader {
    margin:auto;
    width: 60px;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side,#000 90%,#0000);
    background: 
      var(--_g) 0%   50%,
      var(--_g) 50%  50%,
      var(--_g) 100% 50%;
    background-size: calc(100%/3) 50%;
    -webkit-animation: l3 1s infinite linear;
    -moz-animation: l3 1s infinite linear;
    animation: l3 1s infinite linear;
  }
  @keyframes l3 {
      20%{background-position:0%   0%, 50%  50%,100%  50%}
      40%{background-position:0% 100%, 50%   0%,100%  50%}
      60%{background-position:0%  50%, 50% 100%,100%   0%}
      80%{background-position:0%  50%, 50%  50%,100% 100%}
  }


/* RADIO BUTTON STYLING */

.cf
{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:10px;
    padding-block:20px;
}

.plan input{
	display: none;
}

.plan label{
	position: relative;
	color: #000000;
	background-color: #ffffff;
	font-size: var(--normal);
	text-align: center;
	height: 70px;
    padding:15px;
	display: block;
	cursor: pointer;
    user-select:none;
    border-radius:10px;
    display:flex;
    flex-flow:row nowrap;
    justify-content: center;
    align-items:center;
    border:dashed 2px #eaeaea;
}

.plan input:checked + label {
	
	background-color: var(--lblue);
    color:#ffffff;
    font-family:mm;
    border:solid 2px var(--lblue);
}

.plan input:checked + label:after{
	content: "";
	width: 20px;
	height: 20px;
	line-height: 40px;
	border-radius: 100%;
    border:solid 5px #ffffff;
	background-color: var(--elblue);
	z-index: 999;
	position: absolute;
	top: -10px;
    right:-10px;
    margin:auto;
}

.job-wrapper
{
    display:grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap:20px;
    border-bottom:solid 1px #dadada;
}

.job-content
{
    position:sticky;
    top:0px;
    display:grid;
    gap:10px;
    align-content: start;
}

#jobdetails::-webkit-scrollbar{
    width:5px;
    height:5px;
}

#jobdetails::-webkit-scrollbar-thumb
{
    border-radius:10px;
    background-color:#dadada;
}

#job-details::-webkit-scrollbar-track{
    background-color:transparent !important;
}

#jobdetails
{
    padding-inline:20px;
    padding-bottom:20px;

}

#jobdetails h1{
    text-align:center;
}

#jobdetails p, ol
{
    margin-block: 0 !important;
    line-height: 30px !important;
    display:block;
    gap:0px;
}

#jobdetails p{
    display:grid;
    grid-template-columns: 1fr;
}

#jobdetails p button{
    display:grid;
    grid-template-columns: 1fr;
    text-align: center;
}

.joblist
{
position:relative;
border:solid 1px #dadada;
border-radius: 5px;
transition:all 0.2s ease-in-out;
line-height:0.5em !important;
cursor:pointer;
padding-inline:10px;
outline: solid 3px transparent;
user-select:none;
}

.joblist h3
{
    margin-block:10px;
}

.joblist-active
{
    outline:3px solid var(--lblue) !important;
}

.joblist:hover
{
    outline: solid 3px #dadada;
}



.job-summary{
    font-size:var(--small);
    color:#808080;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  .no-page{
    max-width:300px;
    margin-inline:auto;
    margin-top:20vh;
    text-align:center;
    display:grid;
    gap:10px;
  }

  .no-page-title{
    font-size:6rem;
    font-weight:600;
  }

  .no-page-desc{

  }