html,
body{
height:100%;
}
body{
display:flex;
flex-direction:column;
min-height:100vh;
}
main{
flex:1;
}
/*==================================================
FONT FACE
==================================================*/
/* ---------- Caudex ---------- */
@font-face {
font-family: "Caudex";
src: url("../font/Caudex-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Caudex";
src: url("../font/Caudex-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
/* ---------- Brandon ---------- */
@font-face {
font-family: "Brandon";
src: url("../font/HvDTrial_Brandon_Text_Thin.otf") format("opentype");
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: "Brandon";
src: url("../font/HvDTrial_Brandon_Text_Light.otf") format("opentype");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "Brandon";
src: url("../font/HvDTrial_Brandon_Text_Regular.otf") format("opentype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Brandon";
src: url("../font/HvDTrial_Brandon_Text_Medium.otf") format("opentype");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "Brandon";
src: url("../font/HvDTrial_Brandon_Text_Bold.otf") format("opentype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Brandon";
src: url("../font/HvDTrial_Brandon_Text_Black.otf") format("opentype");
font-weight: 900;
font-style: normal;
}
/*==================================================
RESET
==================================================*/
*,
*::before,
*::after{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:"Brandon Grotesque",sans-serif;
background:#fff;
color:#2F2D2D;
overflow-x:hidden;
line-height:1.5;
}
img{
width:100%;
display:block;
}
a{
text-decoration:none;
color:inherit;
}
ul{
list-style:none;
}
button{
border:none;
background:none;
cursor:pointer;
font-family:inherit;
}
input,
textarea{
font-family:inherit;
}
/*==================================================
ROOT VARIABLES
==================================================*/
:root{
--primary:#2D2D2D;
--secondary:#C0ED96;
--white:#F1F1F1;
--heading-font:"Caudex";
--body-font:"Brandon";
--transition:.35s ease;
--container:1320px;
}
/*==================================================
CONTAINER
==================================================*/
.container{
width:min(92%, var(--container));
margin:auto;
}
/*==================================================
HEADER
==================================================*/
.header{
position:fixed;
top:0;
left:0;
width:100%;
background:#F1F1F1;
z-index:9999;
transition:
transform .45s ease,
background .35s ease,
box-shadow .35s ease;
}
.header.hide{
transform:translateY(-100%);
}
.header.show{
transform:translateY(0);
}
.header-container{
height:88px;
display:flex;
justify-content:space-between;
align-items:center;
}
/*==================================================
LOGO
==================================================*/
.logo{
display:flex;
align-items:center;
flex-shrink:0;
}
.logo img{
width:170px;
transition:.35s;
}
.logo:hover img{
opacity:.8;
}
/*==================================================
DESKTOP NAVIGATION
==================================================*/
.navbar{
position:absolute;
left:50%;
transform:translateX(-50%);
}
.nav-links{
display:flex;
align-items:center;
gap:70px;
}
.nav-link{
position:relative;
font-family:var(--body-font);
font-size:16px;
font-weight:500;
letter-spacing:.03em;
transition:var(--transition);
padding-bottom:8px;
}
.nav-link::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:0;
height:2px;
background:var(--primary);
transition:.35s;
}
.nav-link:hover::after{
width:100%;
}
.nav-link.active{
font-weight:700;
}
.nav-link.active::after{
width:100%;
}
/*==================================================
SOCIAL ICONS
==================================================*/
.desktop-social{
display:flex;
align-items:center;
gap:24px;
}
.desktop-social a{
width:24px;
height:24px;
display:flex;
align-items:center;
justify-content:center;
}
.desktop-social img{
width:24px;
transition:.35s;
}
/* SVG icons */
/*
.desktop-social a:hover img{
filter: brightness(0) saturate(100%) invert(92%) sepia(17%) saturate(455%) hue-rotate(33deg) brightness(98%) contrast(94%);
}
*/
/*==================================================
MOBILE MENU BUTTON
==================================================*/
.menu-toggle{
display:none;
width:42px;
height:42px;
justify-content:center;
align-items:center;
}
.menu-toggle img{
width:28px;
}
/*==================================================
MOBILE MENU
==================================================*/
.mobile-menu{
position:fixed;
top:0; /* height of your mobile header */
left:0;
width:100%;
height:480px;
z-index:10000;
background:#2F2D2D;
/*z-index:9998;*/
padding:25px 24px 30px;
display:flex;
flex-direction:column;
justify-content:flex-start;
transform:translateY(-100%);
opacity:0;
visibility:hidden;
transition:.45s ease;
}
.mobile-menu.active{
transform:translateY(0);
opacity:1;
visibility:visible;
}
.mobile-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
}
.mobile-logo img{
width:110px;
}
.close-menu{
width:34px;
height:34px;
}
.close-menu img{
width:20px;
}
.mobile-nav{
display:flex;
justify-content:flex-end;
margin-top:45px;
}
.mobile-nav ul{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:34px;
}
.mobile-link{
position:relative;
color:#fff;
font-family:var(--heading-font);
font-size:16px;
transition:.3s;
}
.mobile-link:hover{
color:var(--secondary);
}
.mobile-link.active{
color:#fff;
}
.mobile-link::after{
content:"";
position:absolute;
left:0;
bottom:-8px;
width:0;
height:2px;
background:#fff;
transition:.35s;
}
.mobile-link.active::after{
width:100%;
}
.mobile-social{
display:flex;
gap:22px;
margin-top:60px;
}
.mobile-social img{
width:26px;
filter:brightness(0) invert(1);
transition:.35s;
}
.mobile-social img:hover{
filter: brightness(0) saturate(100%) invert(92%) sepia(17%) saturate(455%) hue-rotate(33deg) brightness(98%) contrast(94%);
}
/*==================================================
BODY LOCK
==================================================*/
body.menu-open{
overflow:hidden;
}
/*==================================================
HEADER SHADOW
==================================================*/
.header.scrolled{
box-shadow:0 8px 25px rgba(0,0,0,.06);
}
/*==================================================
DESKTOP HOVER EFFECT
==================================================*/
.desktop-social a{
transition:transform .35s ease;
}
.desktop-social a:hover{
transform:translateY(-3px);
}
.logo{
transition:transform .35s ease;
}
.logo:hover{
transform:scale(1.03);
}
/*==================================================
MOBILE ANIMATION
==================================================*/
.mobile-nav li{
opacity:0;
transform:translateX(40px);
transition:
opacity .45s ease,
transform .45s ease;
}
.mobile-menu.active .mobile-nav li{
opacity:1;
transform:translateX(0);
}
/* Stagger */
.mobile-menu.active li:nth-child(1){
transition-delay:.15s;
}
.mobile-menu.active li:nth-child(2){
transition-delay:.22s;
}
.mobile-menu.active li:nth-child(3){
transition-delay:.29s;
}
.mobile-menu.active li:nth-child(4){
transition-delay:.36s;
}
.mobile-menu.active li:nth-child(5){
transition-delay:.43s;
}
.mobile-social{
opacity:0;
transform:translateY(25px);
transition:
.5s ease;
}
.mobile-menu.active .mobile-social{
opacity:1;
transform:translateY(0);
transition-delay:.5s;
}
/*==================================================
SCROLLBAR
==================================================*/
::-webkit-scrollbar{
width:8px;
}
::-webkit-scrollbar-track{
background:#F4F4F4;
}
::-webkit-scrollbar-thumb{
background:#2F2D2D;
border-radius:100px;
}
::-webkit-scrollbar-thumb:hover{
background:#C0ED96;
}
/*==================================================
UTILITIES
==================================================*/
.section{
padding:120px 0;
}
.text-center{
text-align:center;
}
.d-flex{
display:flex;
}
.align-center{
align-items:center;
}
.justify-between{
justify-content:space-between;
}
/*==================================================
RESPONSIVE
==================================================*/
/*------------------------------
Large Desktop
------------------------------*/
@media(max-width:1600px){
.nav-links{
gap:60px;
}
}
/*------------------------------
Laptop
------------------------------*/
@media(max-width:1400px){
.header-container{
height:84px;
}
.logo img{
width:155px;
}
.nav-link{
font-size:16px;
}
}
/*------------------------------
1200
------------------------------*/
@media(max-width:1200px){
.container{
width:94%;
}
.nav-links{
gap:48px;
}
}
/*------------------------------
1024
------------------------------*/
@media(max-width:1024px){
.nav-link{
font-size:16px;
}
.desktop-social{
gap:18px;
}
}
/*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.navbar{
display:none;
}
.desktop-social{
display:none;
}
.menu-toggle{
display:flex;
}
.header-container{
height:80px;
}
.logo img{
width:145px;
}
}
/*==================================================
768
==================================================*/
@media(max-width:768px){
.mobile-link{
font-size:16px;
}
.mobile-nav ul{
gap:28px;
}
}
/*==================================================
576
==================================================*/
@media(max-width:576px){
.header-container{
height:72px;
}
.logo img{
width:120px;
}
.mobile-menu{
padding:28px 20px;
}
.mobile-link{
font-size:16px;
}
}
/*==================================================
430
==================================================*/
@media(max-width:430px){
.mobile-link{
font-size:16px;
}
}
/*==================================================
390
==================================================*/
@media(max-width:390px){
.mobile-link{
font-size:16px;
}
}
/*==================================================
360
==================================================*/
@media(max-width:360px){
.mobile-link{
font-size:16px;
}
}
/* Hide header when menu is open */
.header.menu-open{
opacity:0;
visibility:hidden;
pointer-events:none;
transition:.3s ease;
}
/*=============== FOOTER ============*/
/*==================================================
FOOTER
==================================================*/
.footer{
background:#FFF8E8;
padding:40px 0 50px;
}
.footer .container{
display:flex;
flex-direction:column;
align-items:center;
}
/*==============================
NAVIGATION
==============================*/
.footer-nav{
margin-bottom:24px;
}
.footer-nav ul{
display:flex;
align-items:center;
gap:40px;
}
.footer-nav a{
position:relative;
font-family:var(--body-font);
font-size:14px;
font-weight:500;
color:var(--primary);
transition:.35s;
letter-spacing:.02em;
}
/*
.footer-nav a:hover{
color:var(--secondary);
}*/
.footer-nav a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:var(--primary);
transition:.35s;
}
.footer-nav a:hover::after{
width:100%;
}
/*==============================
CONTACT
==============================*/
.footer-contact{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
margin-bottom:24px;
}
.footer-contact p{
font-family:var(--body-font);
font-size:14px;
line-height:1.7;
text-align:center;
max-width:520px;
}
.footer-contact a{
font-family:var(--body-font);
font-size:14px;
transition:.3s;
}
/*
.footer-contact a:hover{
color:var(--secondary);
}*/
/*==============================
SOCIAL
==============================*/
.footer-social{
display:flex;
gap:20px;
}
.footer-social a{
width:20px;
height:20px;
display:flex;
justify-content:center;
align-items:center;
transition:.35s;
}
.footer-social img{
width:20px;
transition:.35s;
}
.footer-social a:hover{
transform:translateY(-3px);
}
/*
.footer-social a:hover img{
filter:brightness(0) saturate(100%)
invert(92%) sepia(17%)
saturate(455%)
hue-rotate(33deg)
brightness(98%)
contrast(94%);
}*/
/*==================================================
FOOTER RESPONSIVE
==================================================*/
/*------------------------------
1200px
------------------------------*/
@media (max-width:1200px){
.footer{
padding:65px 0 45px;
}
.footer-nav ul{
gap:42px;
}
}
/*------------------------------
991px
------------------------------*/
@media (max-width:991px){
.footer{
padding:60px 0 45px;
}
.footer-nav ul{
gap:34px;
flex-wrap:wrap;
justify-content:center;
}
}
/*------------------------------
768px
------------------------------*/
@media (max-width:768px){
.footer{
padding:55px 0 40px;
}
.footer-nav{
margin-bottom:32px;
}
.footer-nav ul{
flex-direction:column;
gap:22px;
}
.footer-nav a{
font-size:16px;
font-weight:500;
}
.footer-contact{
gap:14px;
margin-bottom:30px;
}
.footer-contact p{
max-width:420px;
font-size:16px;
line-height:1.7;
}
.footer-contact a{
font-size:16px;
}
}
/*------------------------------
576px
------------------------------*/
@media (max-width:576px){
.footer{
padding:50px 0 35px;
}
.footer-nav{
margin-bottom:28px;
}
.footer-nav ul{
gap:20px;
}
.footer-nav a{
font-size:15px;
}
.footer-contact{
margin-bottom:28px;
gap:12px;
}
.footer-contact p{
max-width:330px;
font-size:15px;
line-height:1.8;
}
.footer-contact a{
font-size:15px;
}
.footer-social{
gap:18px;
}
.footer-social img{
width:26px;
}
}
/*------------------------------
430px
------------------------------*/
@media (max-width:430px){
.footer{
padding:45px 0 30px;
}
.footer-nav ul{
gap:18px;
}
.footer-nav a{
font-size:15px;
}
.footer-contact p{
max-width:300px;
font-size:15px;
}
}
/*------------------------------
390px
------------------------------*/
@media (max-width:390px){
.footer-nav a{
font-size:14px;
}
.footer-contact p{
font-size:14px;
}
.footer-contact a{
font-size:14px;
}
}
/*------------------------------
360px
------------------------------*/
@media (max-width:360px){
.footer{
padding:40px 0 28px;
}
.footer-nav ul{
gap:16px;
}
.footer-social{
gap:16px;
}
.footer-social img{
width:24px;
}
}