@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@500;600;700&display=swap');
:root{
    --Dark-Gray: hsl(0, 0%, 63%);
--Black: hsl(0, 0%, 0%);
--White: hsl(0, 0%, 100%);
--Very-Dark-Gray: hsl(0, 0%, 27%);
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.top{
    width: 100%;
    height:700px;
    
    display: flex;
}
.topimg{width: 60%;
    min-width: 500px;
    background-image: url("/images/desktop-image-hero-1.jpg");
    height: 700px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position:right;
}
.topimg.page2{
    background-image: url("/images/desktop-image-hero-2.jpg");

}
.topimg.page3{
    background-image: url("/images/desktop-image-hero-3.jpg");

}
.toptxt{
width: 40%;
  height: 200px;
  display: flex;
  flex-direction: column;
  padding: 100px;
  position: relative;
 
}
.toptxt h1{
    margin:   50px 0;
    width: 500px;
    font-size: 50px;
  font-family: 'League Spartan';
  font-weight: 800;
}
.toptxt p{
    
    height: auto;
    width: 600px;
    font-size: 20px;
    font-family: 'League Spartan';
    line-height:25px;
    color: var(--Dark-Gray);
}.toptxt a{
    margin-top: 50px;
    width: 300px;
    font-size: 30px;
    font-family: 'League Spartan';
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--Black);
  
}
.toptxt a img{
    margin-left: 30px;
}
.bottom{

    height: 300px;
    width: 100%;
    display: flex;
}
.img1,.img2,.txt1{
    width: 33%;
    height: 250px;
  
}
.img1{
    background-image: url("/images/image-about-dark.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.txt1{
    padding: 50px;
    overflow: hidden;
}
.txt1 h1{
    margin-bottom: 30px;
    font-size: 25px;
    font-family: 'League Spartan';
    text-transform: uppercase;
}
.txt1 p{
    
    font-size: 20px;
    font-family: 'League Spartan';
   color: var(  --Dark-Gray);
  
}

.img2{
    background-image: url("/images/image-about-light.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.buttons{
    position: absolute;
    width: 160px;
    height: 60px;
    display: flex;
   
    top: 640px;
    left:0;
}
.left,.right{
    width: 80px;
    height: 60px;
   
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.left:hover{
    background-color: gray;
}
.right:hover{
    background-color: gray;
}
nav{
    position: absolute;
    top:0;
    width: 100%;
    height: 100px;
    display: flex;
   padding: 0 100px;
    align-items: center;
    
}
.logo{
margin-right: 50px;
}
.navlinks{
    display: flex;
}
.navlinks a{
    text-decoration: none;
    color: var(--White);
    font-size: 25px;
    font-family: 'League Spartan';
    margin: 0 30px;
}
@media(max-width:600px){
    .navlinks{
        display: none;
    }
    .top{
        width: auto;
        height:900px;
        flex-direction: column;
        justify-content: space-between;
    }
    .bottom{
        height: 900px;
        flex-direction: column;
        margin-top: 350px;
    }
    .img1,.img2,.txt1{
        width: 100%;
        height: 500px;
      
    }
    .topimg{
        height: 600px;
        background-image: url("/images/mobile-image-hero-1.jpg");
        margin-bottom:100px ;
    }
   
     .topimg.page2{
    background-image: url("/images/mobile-image-hero-2.jpg");

 }
   .topimg.page3{
    background-image: url("/images/mobile-image-hero-3.jpg");

}
    .toptxt{
       
      
        padding: 0 50px;
    }
    .toptxt p{
        
        width: 400px;
    }
    .buttons{
     top:-160px;
     left:325px;
    }
    .nav{
       
        width: 500px;
        height: 100px;
        padding: 0 20px;
      justify-content:center;
      z-index: 1;
   
    
    }
    .ham{
        position: absolute;
        top: 25px;
        left: 5px;
        cursor: pointer;
        height:50px;
        width: 50px;
        background-image: url("/images/icon-hamburger.svg");
        background-repeat: no-repeat;
        background-position: center;
        margin-right: 10px;
    }
    .logo.none{
        display: none;
    }
    .nav.back{
        background-color:var(--White);
    }
    .navlinks.flex{
       
        display: flex;
    }
    .navlinks a{
        color: black;
        margin: 0 20px;
    }
    .ham.cross{
        background-image: url("/images/icon-close.svg");
    }
  
}
.layer.active{
    height: 2150px;
    width: 100%;
    background-color: black;
    position: absolute;
    top: 0;
    opacity: .5;
}