:root{
    --white: #f9f9f9;
    --black: #0d0d0d;
    --gray:  #85888C;
    --gold:  #FBC439;
} /* variables*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Malgun Gothic', sans-serif;
}

.home-layout{
   width: 100%;
   height: 100vh;
   background-image:linear-gradient(rgba(12,3,51,0.15), rgba(12,3,51,0.15));
   position: relative;
   padding: 0;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
}

.home-layout video{
   position: absolute;
   width: auto;
   height: auto;
   min-width: 100%;
   min-height: 100%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: -1;
}

nav{
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   padding: 0;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   z-index: 1;
}

nav .logo{
   width: 150px;
}

/*  menu icon */
.hamb{
    cursor: pointer;
    float: right;
    margin: 20% 10% 0 0;
}/* Style label tag */

.hamb-line {
    background: var(--gold);
    display: block;
    height: 3px;
    position: relative;
    width: 40px;

} /* Style span tag */

.hamb-line::before,
.hamb-line::after{
    background: var(--gold);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.hamb-line::before{
    top: 10px;
}
.hamb-line::after{
    top: -10px;
}

.side-menu {
    display: none;
} /* Hide checkbox */



/* menu contents design */
.subnav{
    margin-left: 65%;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    background-color: var(--black);
    max-height: 0;
    transition: max-height .5s ease-out;
}


.subnav ul li{
   list-style: none;
   display: block;
   padding: 15px 15px;
}

.subnav ul li a{
   text-decoration: none;
   color: #FBC439;
   font-size: min(3em, 4vw);
}

.subnav ul li a:hover {
  color: #FEF4DB;
  font-size: min(3.5em, 4.5vw);  
}
 

/* Toggle menu icon */
.side-menu:checked ~ subnav{
    max-height: 100%;
}
.side-menu:checked ~ .hamb .hamb-line {
    background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
    transform: rotate(-45deg);
    top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
    transform: rotate(45deg);
    top:0;
}

.side-menu:checked ~ .hamb{
    margin-right: 35%;
    margin-top: 50px;
}


/* home page content design */
content{
   text-align: center;
   position: absolute;
   top: 0;
   margin-top: 10%;
}

content h1{
   font-size: min(13em, 15vw);
   color: #FEF4DB;
   font-family: 'Goudy Old Style', sans-serif;
   margin-top: 150px;
   font-weight: 400;
   transition: 0.5s;
}

content h2{
   font-size: min(4em, 6vw);
   color: #FBC439;
   font-weight: lighter;
   margin-top: 10px;
   transition: 0.5s;
}

/* visit us link */
visit{
   text-align: center;
   position: absolute;
   margin-top: 60%;
   z-index: 2;
}

visit a{
   text-decoration: none;
   display: inline-block;
   color: #FBC439;
   font-size: min(5em, 7vw);
   border: 2px solid #FBC439;
   padding: 14px 50px;
   border-radius: 50px;
   margin-top: 100px; 
}

visit a:hover {
  color: #FEF4DB;
  font-size: min(5.5em, 7.5vw);  
  border: 3px solid #FEF4DB;
}


.about{
   position: relative;
   background-image:linear-gradient(rgba(12,12,12,1), rgba(12,12,12,1));
   color: #FEF4DB;
   padding: 5% 5%;
   display: flex;
   align-items: center;
   justify-content: center;   
}

#about-us h2{
   position: absolute;
   top: 8%;
   color: #FBC439;
}

#about-us .details{
   position: relative;
   margin-top: 50%;
}

.career{
   position: relative;
   height: 100vh;
   background-image:linear-gradient(rgba(12,12,12,1), rgba(12,12,12,1));
   color: #FEF4DB;
   padding: 5% 5%;
   display: flex;
   align-items: center;
   justify-content: center;
}

#careers h2{
   position: absolute;
   top: 35%;
   color: #FBC439;
}

/* Job openings */
jobs{
   text-align: center;
   position: absolute;
   margin-top: 1%;
   z-index: 2;
}

jobs a{
   display: inline-block;
   color: #FEF4DB;
   font-size: min(4em, 5vw);
}

.contact-details{
   position: relative;
   height: 125vh;
   background-image:linear-gradient(rgba(12,12,12,1), rgba(12,12,12,1));
   color: #FEF4DB;
   padding: 5% 5%;
   display: flex;
   align-items: center;
   justify-content: center;
}

#contact-us h3{
   position: absolute;
   top: 17%;
   left: 4%;
   color: #FBC439;
}

#contact-us .address{
   position: absolute;
   top: 21%;
   left: 4%;
   color: #FEF4DB;
}

#contact-us #col2{
   position: absolute;
   top: 28%;
   left: 4%;
   color: #FBC439;
}

#contact-us #col2 .phone, .email{
   color: #FEF4DB;
}
 
map{
   text-align: center;
   position: absolute;
   top: 40%;
   z-index: 2;
}


footer{
   width: 100%;
   height: 5vh;
   position: relative;
   background-image:linear-gradient(rgba(12,12,12,1), rgba(12,12,12,1));
}

footer .copyright{
   position: absolute;
   left: 1%;
   color: #FBC439;
}


/* Responsiveness - for non-phone/non-small screen displays */
@media (min-width: 600px) {

  nav .logo{
      width: 180px;
   }

  .hamb{
      display: none;
  }
  
  .subnav{
      margin-left: 65%;
      margin-top: 4%; 
      background-color: transparent;
      max-height: none;
   }
   
   .subnav ul li{
      list-style: none;
      display: block;
      padding: 1% 1%;
   }

    
    .subnav ul li a{
       font-size: min(1em, 1vw);
    }
    
    .subnav ul li a:hover {
      font-size: min(1.25em, 1.25vw);  
    }
        
    .menu li{
        float: left;
    }
        
    content h1{
       font-size: min(6em, 6vw);
       margin-top: 25%;
    }
    
    content h2{
       font-size: min(1.75em, 1.75vw);
    }
    
    visit{
       margin-top: 40%;
    }
        
    visit a{
       font-size: min(1.5em, 1.5vw);
       margin-top: 30%; 
    }
    
    visit a:hover {
      font-size: min(1.75em, 1.75vw);  
    }
    
    .about{     
       padding: 10% 10%;     
    }
    
    #about-us h2{
       top: 14%;
    }
    
    #about-us .details{
       margin-top: 6%;
    }
        
     #careers h2{
       top: 40%;
     }
            
     jobs a{
       font-size: min(1.5em, 1.5vw); 
     }

     iframe{
        width: 1150px;
        height: 450px;
        overflow: auto;        
    }
    
    .contact-details{
       height: 90vh;
    }
          
    #contact-us h3{
       top: 21%;
       left: 15%;
    }
    
    #contact-us .address{
       top: 24%;
       left: 15%;
    }
    
    #contact-us #col2{
       top: 21%;
       left: 65%
    }
     
    map{
       top: 30%;
    }
    
    footer .copyright{
	font-size: min(0.75em, 0.75vw);
	left: 45%;
    }
}