@charset "UTF-8";

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

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

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

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

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

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

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

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

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

.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:mr;
    font-size:var(--normal);
    overflow-x:hidden;
}

.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:20px;
    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:hover{
    background-color:var(--lblue);
    transform:scale(1.1);
}

.up img{
    width:100%;
}

#menu{
    display:none;
}


.landing-tint{
    position:absolute;
    background-color:var(--blue);
    opacity:0.5;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:3;
}

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

.landing{
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    font-size:4rem;
    display:flex;
    flex-flow:column nowrap;
    align-items:space-between;
    justify-content:space-between;
    background-color:#000000;
}

video{
    position:absolute;
    top:80px;
    left:0px;
    right:0px;
    bottom:100px;
    margin:auto;
    object-fit: cover;
    width:80%;
    height:auto;
    -webkit-mask:url(../img/logo1.svg);
    mask:url(../img/logo1.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size:90%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size:90%;
    mask-mode: alpha;
    filter:grayscale(100%)
}

.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:row nowrap;
    justify-content:space-between;
    padding:20px;
    color:var(--blue);
}

.landing-head-links{
    display:flex;
    align-items: center;
    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:50px;
    position:relative;
}

.landing-footer{
    color:var(--lightblue);
    display:flex;
    flex-flow:row nowrap;
    justify-content: flex-end;
    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;
}

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

.y-span1{
    background:-webkit-linear-gradient(90deg,var(--lblue),var(--elblue));
    font-family:mbb;
    font-size:var(--slarge);
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header{
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content: space-between;
    color:var(--grey);
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    padding-left:20px;
    background-color: transparent;
    z-index:10;
    -webkit-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}

.header-section{
    display:flex;
    align-items: center;
}

.header-section1{
    display:flex;
    align-items: center;
    gap:20px;
    padding-inline:15px;

}

.header-icon{
    display:flex;
    align-items: center;
    justify-content: center;
    width:30px;
    height:30px;
    border-radius:5px;
    position:relative;
    cursor:pointer;
    -webkit-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}

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

.header-icon:hover{
    
}

.header-icon:hover .icon-tooltip{
    display:inherit;
}

.header-icon:hover img{
    opacity:0.8;
}

.icon-tooltip{
    display:none;
    position:absolute;
    top:105%;
    right:-10px;
    padding-block:5px;
    padding-inline:7px;
    border-radius: 5px;
    font-size:var(--esmall);
    background-color:var(--elblue);
    color:#ffffff;
    white-space: nowrap;
    box-shadow: 0px 1px 10px 0px rgba(50,50,50,0.2)
}

.icon-tooltip img{
    width:15px;
    height:15px;
    position:absolute;
    top:-5px;
    right:20px;
}

.logo{
    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:600;
    margin-right:15px;
    cursor:pointer;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

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

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

.d-logo{
    width:50px;
}

.logo:hover{
    opacity:0.7;
}

.activeheader{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    background-color:#ffffff;
    box-shadow:0px 1px 10px 0px rgba(30,30,30,0.2);
    z-index:20;
    -webkit-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}

.activeheader .nav-link
{
    color:var(--blue);
}

.nav-link-container{
    display:flex;
    flex-flow:row nowrap;
    justify-content: flex-end;
    align-items:center;
    
}

.nav-link{
    position:relative;
    padding-inline:20px;
    padding-block: 20px;
    font-family:mm;
    letter-spacing: 2px;
    font-size:var(--small);
    user-select:none;
    cursor:default;
}

.sublink::after{
    /*content:' \2192'; */
}

.nav-link:hover{
    background-color:var(--yellow);
    color:var(--blue);
    border-radius: 10px 10px 0px 0px;
}

.nav-link:hover .sub-menu{
    display:inherit;
}

.sub-menu{
    display:none;
    position:absolute;
    left:0px;
    top:100%;
    padding:20px;
    padding-top:10px;
    background:url(../img/Meteor.svg);
    background-color:var(--yellow);
    font-size:var(--normal);
    font-family:mb;
    letter-spacing: 0px;
    box-shadow:0px 1px 10px 0px rgba(30,30,30,0.2);
    z-index:-1;
    max-width:400px;
    border-radius: 0px 10px 10px 10px;
   
}

.header .sub-menu:nth-child(2)
{
    width:400px;
}

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



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

.main-services
{
    position:relative;
 display:grid;
grid-template-columns: repeat(2,1fr);
    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(--normal);
    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:60px;
    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 400px 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);
    transform: rotateZ(5deg);
}

.show{
    transition: all 0.5s ease-in-out;
    transform: translate(0px,0px);
    transform: rotateZ(0deg);
   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%);
    -webkit-transition:transform 0.2s ease-in-out;
    -moz-transition:transform 0.2s ease-in-out;
    transition:transform 0.2s ease-in-out;
}

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

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

.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:300px;
}

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

.story-buttons{
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content: center;
    gap:30px;
    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:inline-block;
    font-size:var(--slarge);
    color:var(--yellow);
    font-family:mm;

    margin-top:20px;
}

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

.section1{
    position:relative;
    display:flex;
    flex-flow:row nowrap;
    justify-content: center;
    color:var(--blue);
    gap:50px;
    padding-inline:20px;
    margin-top:-20px;
    padding-bottom:100px;
}

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

.sect1{
    position:relative;
    padding:50px;
    max-width:400px;
    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;
    border-radius: 10px;
    box-shadow:0px 1px 15px 0px rgba(40,40,40,0.1);
}

.sect1:nth-child(2)::before{
    background-color: var(--yellow);
    border:solid 1px var(--dyellow) ;

}

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

.sect1-title:nth-child(1){
    color:var(--mblue);
}

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

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

.section5{
    position: relative;
    padding-block:100px;
    color:#000000;
    padding-inline:0px;
    height:500px;
    color:#ffffff;
}

.section5 .section-title{
    text-align: left;
}

 .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-size:cover;
    background-position:bottom;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    border-radius: 15px;
    transform:skewY(2deg)
}

.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(--large);
    font-family:mr;
    color:#ffffff;
    text-align:center;
    padding-inline:100px;
    padding-block:200px;
    padding-bottom:80px;
}

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

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

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

.services{
    position:relative;
    margin:auto;
    overflow:hidden; 
    z-index:3;  
    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%;
}

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

.service{
    position:relative;
    color:#ffffff;
    font-size:var(--normal);
    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 40s linear reverse infinite;
}

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



.prev-arrow{
    position:absolute;
    bottom: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;
    bottom: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;
    display:grid;
    text-align:center;
    grid-template-columns: 1fr;
    gap:20px;  
}

.section3-img{
    width:350px;
    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(--large);
}

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

.reg-no{
    font-family:mr;
    font-weight: 400;
    font-size:var(--large);
    color:var(--lblue);
}

.section2{
    position:relative;
}

.section2-mask{
    padding-top:100px;
    height:600px;
    position:relative;
    background:url(../img/ker2.jpg);
    background-size:cover;
    background-position:right;
    -webkit-mask:url(../img/logo1.svg);
    -webkit-mask-size: 750px;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask:url(../img/logo1.svg);
    mask-size: 750px;
    mask-position: center;
    mask-repeat: no-repeat; 
}

.dash-table t{
    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;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.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;
    cursor:pointer;
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content: center;
    text-transform: capitalize;
    letter-spacing: 1px;
    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(--yellow);

}

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

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




.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;
    height:30px !important;
    filter: invert(84%) sepia(96%) saturate(438%) hue-rotate(328deg) brightness(100%) contrast(101%) !important;
}

.button5 img{
    transition: all 0.3s ease-in-out;
    margin-top:8px;
    width:30px !important;
    height:30px !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);
    white-space: nowrap;
    color:#ffffff;
    border-radius:7px;
    font-family:mr;
    font-size: var(--normal);
    border:none;
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    gap:10px;
    cursor:pointer;
    transition: all 0.2s ease-in-out;
}

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

.button4 img{
    width:20px;
}

.login-wrapper h2{
    color:var(--mblue);
    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.2);
    max-width:500px;
    min-height:300px;
    border-radius: 10px;
}

.swiper-slide:nth-child(even){
    background-color: var(--mblue);
    color:#ffffff;
}

.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:0px;
    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;
    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-weight:400;
    font-size:var(--medium);
}

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

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

::-webkit-file-upload-button{
    background-color:var(--mblue);
    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;

}


/* PAGE TEMPLATE */

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


.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(--mblue);
    font-size:var(--medium);
    letter-spacing: 2px;
}

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

.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;
    background-size: cover;
    display:flex;
    flex-flow:row nowrap;
    align-items:flex-start;
    justify-content: flex-start;
    position:relative;
    padding-top:50px;
}

.page-main-section-form{
    display:flex;
    flex-flow:row nowrap;
    align-items:flex-start;
    justify-content: flex-start;
    position:relative;
    padding-top:50px;
}



.page-content, .page-content4{
    position:relative;
    padding-inline:20px;
    padding-block:50px;
    max-width:1000px;
    margin:auto;
    line-height:35px;
    color:#000000;
    -webkit-animation: fadein 0.5s ease-in-out ;
    -moz-animation: fadein 0.5s ease-in-out ;
    animation: fadein 0.5s ease-in-out ;
    font-family:mr;
}


.page-content::before{
    content:' ';
    display:block;
    position:absolute;
    width:70%;
    height:70%;
    border: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;
}

p{
    font-family:mr;
}

.page-content2{
    position:relative;
    padding-block:50px;
    padding-inline:20px;
    display:grid;
    max-width: 1200px;
    margin:auto;
    gap:40px;
    -webkit-animation: fadein 0.5s ease-in-out ;
    animation: fadein 0.5s ease-in-out ;
}

.page-content2  p{
    text-align: left;
    font-family:mr;  
}

.page-content2 h2:first-child, form h2:first-child{
    margin-top:0px;
}

@-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-block:50px;
    padding-inline:20px;
    display:grid;
    gap:40px;
    -webkit-animation: fadein 0.5s ease-in-out ;
    animation: fadein 0.5s ease-in-out ;
}

.page-content3  p{
    text-align: left;
    font-family:mr;  
}


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

.page-content p:first-child, h2:first-child{
    margin-top:0px !important;
}

.page-content h2{
    margin-top:20px !important;
}

.page-content1{
    position:relative;
    padding-inline:20px;
    padding-top:60px;
    padding-bottom:20px;
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:20px;
    -webkit-animation: fadein 0.5s ease-in-out finite;
    -moz-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:180%;
    margin-top:-50px;
}

.page-placeholder p{
    margin-top:-80px;
}

.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);
    height:450px;
}

.page-sect1 .project-wrapper{
    display:flex;
    flex-flow:column nowrap;
    align-items: space-between;
}

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

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

.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;
    font-size:var(--normal);
    text-align:center;
    height:500px;
    border-radius: 15px;
}

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

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

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

.page-sidepanel{
    position:sticky;
    top:0px;
}


.page-sidepanel-sect
{
    position:relative;
    padding-top:60px;
    width:100px;
    padding-bottom:50px;
    padding-inline:50px;
}

.page-sidepanel h1
{
    position:relative;
    font-size:var(--slarge);
    text-align:center;
    z-index:2;
    font-family:mb;
    margin:0;
    writing-mode: vertical-lr;
    text-shadow: 1px 1px 20px  rgba(30,30,30,0.1);
}

.page-title
{
    position:relative;
    font-size:var(--slarge);
    text-align:center;
    z-index:2;
    font-family:mb;
    margin:0;
    writing-mode: vertical-lr;
    text-shadow: 1px 1px 20px  rgba(30,30,30,0.1);
}

.page-title img
{
    width:115px;
    transform:rotate(90deg);
    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;
}

.menu-header{
    display:none;
}

/* 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-top:0px;
    display:flex;
    flex-flow:column nowrap;
    align-items: center;
    justify-content: center;
}

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

.footer-text-section2{
    position:absolute;
    padding:30px;
    text-align:center;
    font-family:mm;
    color:var(--blue);
    font-weight:400;
    font-size:var(--elarge);
    bottom:20px;
    left:0px;
    right:0px;
    z-index:3;
    letter-spacing: 20px;
}

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

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


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

.copy{
    color:var(--lightblue);
    margin-bottom:10px;
}

.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:50px;
}

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

.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 1fr;
    gap:20px;
}


.form-section{
    display:grid;
    grid-template-columns: 1fr;
    position:relative;
    transition: all 0.2s ease-in-out;
}



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)
}

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

.form-subsection1{
    display:grid;
    grid-template-columns: 2fr 1fr;
    gap:20px;
    margin-top:20px;
    font-size:var(--small);
    line-height:25px;
    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;
    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 #dadada;
    height:50px;
    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);
    white-space:nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

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

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

.form-section textarea{
    background-color:#ffffff;
    border:solid 1px #dadada;
    height:50px;
    font-size:var(--normal);
    font-family:mr;
    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;
    font-weight:300;

}

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:flex;
    flex-flow:row wrap;
    gap:10px;
}

.opt input
{
    display:none;
}

.opt-label
{
    max-width:220px;
    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;
    padding-inline:10px;
}

.time-loader
{
    width:100px;
    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 25px 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 25px 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:800px;
    margin:auto;
    gap:5px;
    display:grid;
    grid-template-columns: 1fr;
}

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

#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:flex;
    align-items: center;
    gap: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{
    font-weight: 400 !important;
    position:relative;
    color:var(--mblue);
}

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

.page-main-section h2::after{
    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:400;
    text-decoration: none;
    white-space:nowrap;
}

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

/* MODALS */

.new-modal
{
    position:fixed;
    top:10px;
    bottom:0px;
    right:10px;
    left:10px;
    margin:auto;
    max-width:700px;
    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:10px;
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content:space-between;
    z-index:100;
    background-color:#ffffff;
    border-bottom: solid 1px #eaeaea;
}

.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-inline:20px;
    padding-bottom:0px;
}

.modal-backdrop{
    z-index:17 !important;
}

#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: 450px 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
{
    min-height:600px;
    max-height:800px;
    overflow:auto;
    padding-inline:20px;
    padding-bottom:20px;
    border-left:solid 1px #dadada;

}

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

.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);
    line-height:20px;
    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{

  }

  @media screen and (max-width:1100px){
    .page-content1{
        grid-template-columns: 1fr;
    }

    .page-sect-wide{
        grid-column: auto;
    }
  }