/*stick footer to bottom */
html,
body{
height:100%;
}
body{
display:flex;
flex-direction:column;
min-height:100vh;
}
main{
flex:1;
}
.footer{
margin-top:auto;
}
/*==============================
FONTS
==============================
@font-face {
font-family: Monument;
src: url("../assets/fonts/MonumentExtended-Regular.otf");
}
@font-face {
font-family: DMSans;
src: url("../assets/fonts/DMSans-Regular.ttf");
}
*/
@font-face{
font-family:"Monument";
src:url("fonts/MonumentExtended-Regular.otf") format("opentype");
}
@font-face{
font-family:"DM Sans";
src:url("fonts/DMSans-Regular.ttf") format("truetype");
}
/*==============================
RESET
==============================*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
background:#fff;
font-family:"DM Sans", sans-serif;
overflow-x:hidden;
}
/*==============================
CONTAINER
==============================*/
.container{
width:90%;
max-width:1400px;
margin:auto;
}
/*==============================
HEADER
==============================*/
.header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
padding:28px 0;
transition:transform .35s ease;
}
/* Hide Header */
.header.hide{
transform:translateY(-100%);
}
.header .container{
display:flex;
justify-content:space-between;
align-items:center;
}
.logo img{
width:130px;
}
/*==============================
HAMBURGER
==============================*/
/*==============================
HAMBURGER
==============================*/
.menu-btn{
width:58px;
height:58px;
border:none;
background:none;
cursor:pointer;
position:relative;
display:flex;
justify-content:center;
align-items:center;
flex-shrink:0;
}
.menu-btn .line{
position:absolute;
right:0;
height:5px;
border-radius:50px;
background:#1A1617;
/*transition:
transform .45s cubic-bezier(.25,.8,.25,1),
width .45s cubic-bezier(.25,.8,.25,1),
top .45s cubic-bezier(.25,.8,.25,1);*/
transition:all .4s ease;
}
/* Closed */
.line1{
width:42px;
top:14px;
}
.line2{
width:34px;
top:26px;
}
.line3{
width:50px;
top:38px;
}
/* Open */
.menu-btn.active .line1{
width:50px;
top:14px;
transform:translateX(-6px);
}
.menu-btn.active .line2{
width:42px;
top:26px;
transform:translateX(-14px);
}
.menu-btn.active .line3{
width:34px;
top:38px;
transform:translateX(-22px);
}
/*==============================
OVERLAY
==============================*/
.overlay{
position:fixed;
width:100%;
height:100%;
left:0;
top:0;
background:rgba(0,0,0,.45);
opacity:0;
visibility:hidden;
transition:.4s;
z-index:999;
}
.overlay.show{
opacity:1;
visibility:visible;
}
/*==============================
MENU
==============================*/
.side-menu{
position:fixed;
top:0;
right:-550px;
width:520px;
height:100vh;
background:#fff;
z-index:1001;
transition:.6s cubic-bezier(.76,.01,.18,1);
padding:40px 60px;
overflow:auto;
}
.side-menu.show{
right:0;
}
/*==============================
TOP
==============================*/
.menu-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:70px;
}
.menu-top img{
width:110px;
}
/*==============================
MENU
==============================*/
nav ul{
list-style:none;
}
nav li{
margin-bottom:30px;
}
nav a{
text-decoration:none;
color:#1A1617;
font-size:36px;
font-family:"Monument", sans-serif;
font-weight: 400;
display:flex;
align-items:center;
gap:18px;
}
.square{
width:22px;
height:22px;
background:#81C341;
border-radius:4px;
}
.active{
color:#0B7EDC;
}
/*==============================
ABOUT
==============================*/
/*
.dropdown-head{
display:flex;
justify-content:space-between;
align-items:center;
}
.dropdown-btn{
background:none;
border:none;
cursor:pointer;
padding:0;
}
.dropdown-btn svg{
width:30px;
height:30px;
transition:transform .35s ease;
}
.dropdown.open .dropdown-btn svg{
transform:rotate(180deg);
}
.dropdown-btn svg{
width:35px;
height:35px;
}
.dropdown.open .dropdown-btn{
transform:rotate(180deg);
}
.submenu{
max-height:0;
overflow:hidden;
transition:.4s;
margin-left:6px;
}
.dropdown.open .submenu{
max-height:200px;
margin-top:15px;
}
.submenu li{
margin-bottom:10px;
}
.submenu a{
font-size:15px;
font-family:"Monument", sans-serif;
font-weight: 400;
}
*/
/*====================================
DROPDOWN
====================================*/
.dropdown-head{
display:flex;
justify-content:space-between;
align-items:center;
}
.dropdown-btn{
width:40px;
height:40px;
display:flex;
justify-content:center;
align-items:center;
background:none;
border:none;
cursor:pointer;
padding:0;
}
.dropdown-icon{
width:26px;
height:26px;
transition:transform .3s ease;
}
.dropdown.open .dropdown-icon{
transform:rotate(180deg);
}
.submenu{
max-height:0;
overflow:hidden;
transition:max-height .35s ease;
margin-left:20px;
}
.dropdown.open .submenu{
max-height:250px;
margin-top:15px;
}
.submenu li{
margin-bottom:10px;
}
.submenu a{
font-size:15px;
font-family:"Monument", sans-serif;
font-weight:400;
}
/*==============================
MOBILE
==============================*/
@media(max-width:991px){
.side-menu{
width:100%;
right:-100%;
padding:28px;
}
.menu-top{
margin-bottom:55px;
}
.logo img,
.menu-top img{
width:95px;
}
nav a{
font-size:24px;
}
.submenu a{
font-size:13px;
}
.header{
padding:18px 0;
}
}
/*==============================
FOOTER
==============================*/
.footer{
background:#1A1617;
color:#fff;
padding:80px 0 35px;
}
.footer-top{
display:flex;
justify-content:space-between;
gap:120px;
}
.footer-left{
max-width:470px;
}
.footer-logo{
width:170px;
margin-bottom:28px;
}
.footer-left p{
font-family:"DM Sans", sans-serif;
font-size:17px;
line-height:1.7;
color:#E2E2E2;
margin-bottom:30px;
}
.linkedin{
display:inline-flex;
}
.linkedin svg{
width:34px;
height:34px;
transition:.3s;
}
.linkedin:hover svg{
transform:translateY(-4px);
}
.footer-right{
display:flex;
gap:120px;
}
.footer-column h4{
font-family:"DM Sans", sans-serif;
font-size:22px;
margin-bottom:18px;
}
.footer-column p{
font-family:"DM Sans", sans-serif;
font-size:18px;
line-height:1.8;
color:#D8D8D8;
}
.contact-title{
margin-top:40px;
}
.footer-column ul{
list-style:none;
}
.footer-column li{
margin-bottom:16px;
}
.footer-column a{
color:#D8D8D8;
text-decoration:none;
font-size:18px;
transition:.3s;
}
.footer-column a:hover{
color:#81C341;
}
.footer-line{
width:100%;
height:1px;
background:#81C341;
margin:70px 0 28px;
}
.footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
}
.footer-bottom p{
font-size:16px;
color:#CFCFCF;
}
.footer-policy{
display:flex;
gap:40px;
}
.footer-policy a{
text-decoration:none;
color:#CFCFCF;
transition:.3s;
}
.footer-policy a:hover{
color:#81C341;
}
/*==============================
TABLET
==============================*/
@media(max-width:991px){
.footer{
padding:60px 0 30px;
}
.footer-top{
flex-direction:column;
gap:55px;
}
.footer-right{
justify-content:space-between;
gap:40px;
}
.footer-bottom{
flex-direction:column-reverse;
gap:24px;
}
}
/*==============================
MOBILE
==============================*/
@media(max-width:768px){
.footer{
padding:45px 0 25px;
}
.footer-logo{
width:110px;
}
.footer-left p{
font-size:16px;
}
.footer-right{
display:grid;
grid-template-columns:1fr 1fr;
gap:35px;
}
.footer-column h4{
font-size:24px;
margin-bottom:15px;
}
.footer-column p,
.footer-column a{
font-size:17px;
}
.footer-policy{
width:100%;
justify-content:center;
gap:45px;
flex-wrap:wrap;
}
.footer-bottom{
text-align:center;
}
.footer-line{
margin:45px 0 35px;
}
}
/*==============================
CUSTOM CURSOR
==============================*/
/*==============================
CUSTOM CURSOR
==============================*/
body{
cursor:none;
}
a,
button,
input,
textarea,
select{
cursor:none;
}
/* Hide custom cursor on touch devices */
@media (hover:none){
.cursor-outline,
.cursor-fill{
display:none;
}
body{
cursor:auto;
}
}
.cursor-outline{
position:fixed;
width:52px;
height:52px;
border:2px solid #81C341;
border-radius:10px;
pointer-events:none;
left:0;
top:0;
transform:translate(-50%,-50%);
z-index:99999;
transition:
width .25s,
height .25s,
border-radius .25s;
}
.cursor-fill{
position:fixed;
width:18px;
height:18px;
background:#0073BC;
border-radius:4px;
pointer-events:none;
left:0;
top:0;
transform:translate(-50%,-50%);
z-index:100000;
transition:
width .25s,
height .25s,
border-radius .25s;
}
/* Hover */
.cursor-outline.hover{
width:64px;
height:64px;
}
.cursor-fill.hover{
width:24px;
height:24px;
}
/*====================================
PAGE TRANSITION
====================================*/
.page-transition{
position:fixed;
inset:0;
background:#1A1617;
display:flex;
justify-content:center;
align-items:center;
z-index:999999;
opacity:1;
visibility:visible;
transition:
opacity .8s ease,
visibility .8s ease;
}
.page-transition.hide{
opacity:0;
visibility:hidden;
}
.transition-logo{
width:180px;
transform:scale(.7);
opacity:0;
will-change:transform, opacity;
backface-visibility:hidden;
}
/*.page-transition.show .transition-logo{
animation:logoReveal 1s cubic-bezier(.22,1,.36,1) forwards;
}*/
.transition-logo.animate{
animation:logoReveal 1s cubic-bezier(.22,1,.36,1) forwards;
}
.page-transition.hide{
opacity:0;
visibility:hidden;
pointer-events:none;
}
@keyframes logoReveal{
0%{
opacity:0;
transform:scale(.7);
}
100%{
opacity:1;
transform:scale(1.18);
}
}
/*====================================
TABLET
====================================*/
@media(max-width:991px){
.transition-logo{
width:140px;
}
}
/*====================================
MOBILE
====================================*/
@media(max-width:768px){
.transition-logo{
width:110px;
}
}