a{
    text-decoration: none !important;
    cursor: pointer !important;
    color: white !important;
}

a:hover{
    color: var(--orange) !important;
}

/* CONNECT WITH US FOOTER */
h4{
    font-family: 'Ubuntu', serif !important;
    font-weight: bolder;
    font-size: 22px !important;
    color: white !important;
}

/* FOOTER LINKS */
h5{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-size: 16px !important;
    color: white !important;
    font-weight: lighter !important;
}

ul{
    position: relative;
    left: 30px;
    top: -14px;
}

li{
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    font-size: 16.5px !important;

}

body{
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
    background: #c4c4c4;
}

#logoButton{
    position: absolute;
    top: 13px;
    width: 170px;
    height: 50px;
    left: 0;
    z-index: 10;
}

#logo{
    width: 145px;
    height:60px;
    position: absolute; 
    left: 20px;
    top: -12px;
    font-size: 18px;
    color:rgb(61, 71, 85);
    z-index: 15;

}

#logoText{
    width: 180px;
    height:30px;
    position: absolute; 
    left: 70px;
    top: 2px;
    font-size: 28px;
    font-family: "Ubuntu", sans-serif;
    color:white;
    z-index: 16;
}


/* VERTICAL NAV BAR */

.vertNavBar .nav-links li:nth-of-type(5), .vertNavBar .nav-links li:nth-of-type(4), .vertNavBar .nav-links li:nth-of-type(3), .vertNavBar .nav-links li:nth-of-type(2), .vertNavBar .nav-links li:nth-of-type(1) {
    opacity: 0;
    transition: 0.3s ease-in all;
  }
  
  .vertNavBar .nav-links li:nth-of-type(5).nav-link-open, .vertNavBar .nav-links li:nth-of-type(4).nav-link-open, .vertNavBar .nav-links li:nth-of-type(3).nav-link-open, .vertNavBar .nav-links li:nth-of-type(2).nav-link-open, .vertNavBar .nav-links li:nth-of-type(1).nav-link-open {
    opacity: 1;
    transform: translateY(10px);
  }
  
  .vertNavBar .nav-links li a::after, .vertNavBar .nav-links li a::before {
    position: fixed;
    content: "";
    height: 4px;
    width: 0%;
    background-color: #2a3255;
    left: 0;
    border-radius: 2px;
    transition: 0.3s ease all;
    z-index: 14;
  }

  .burger {
    display: none;
  }
  .burger i:nth-of-type(1) {
    display: block;
  }
  .burger i:nth-of-type(2) {
    display: none;
  }
  .burger.burger-open {
    color: white;
    z-index: 99;
  }
  .burger.burger-open i:nth-of-type(1) {
    display: none;
  }
  .burger.burger-open i:nth-of-type(2) {
    display: block;
  }
  
  .vertNavBar {
      display: none;
  }
  .vertNavBar .nav-links {
    position: fixed;
    top: 22%;
    left: 87%;
    transform: translate(-50%, -50%);
  }


  .vertNavBar .nav-links li {
    list-style-type: none;
  }
  .vertNavBar .nav-links li:nth-of-type(1).nav-link-open {
    transition-delay: 0.25s;
  }
  .vertNavBar .nav-links li:nth-of-type(2).nav-link-open {
    transition-delay: 0.35s;
  }
  .vertNavBar .nav-links li:nth-of-type(3).nav-link-open {
    transition-delay: 0.45s;
  }
  .vertNavBar .nav-links li:nth-of-type(4).nav-link-open {
    transition-delay: 0.55s;
  }
 
  .vertNavBar .nav-links li a {
    text-decoration: none;
    color: white;
    font-size: 15px;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0;
  }
  .vertNavBar .nav-links li a::before {
    top: -2px;
  }
  .vertNavBar .nav-links li a::after {
    bottom: -5px;
  }
  .vertNavBar .nav-links li a:hover::before {
    width: 100%;
  }
  .vertNavBar .nav-links li a:hover::after {
    width: 100%;
  }
  .vertNavBar.nav-open {
    display: block;
    z-index: 14;
    clip-path: circle(100%);
  } 

  .nav-links{
    display: none;
        }


/* HORIZONTAL NAV BAR */

#navBar{
    display: flex;
    flex-flow: row wrap;
    position: fixed;
padding-top: 10px;
    width: 100%;
    z-index: 35;
    transition: background-color 0.7s ease-out;
    font-family: "Montserrat", sans-serif;
    scroll-behavior: smooth;
}

#navCopy{
    position: fixed;
    top: 0px;
    width: 100%;
    height: 60px;
    z-index: 0;
    background:rgba(32, 32, 32, 0.8) !important;
}

#anchor{
    position: absolute;
    display: block;
z-index: 0;
top: 0;
color: white;
}

#links{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    transition: background-color 0.7s ease-out;
        justify-content: flex-end;
        width: 100%;
        z-index: 5;
}

.link{
    font-family: inherit;
    text-decoration: none;
    font-size: 14px;
    color: white !important;
    margin-right:50px;
    margin-left: 50px;
    margin-top: 10px;
    z-index: 10;
}

.link:hover{
    color: rgb(255, 196, 0);
}

#langs{
    display: flex;
    flex-flow: row wrap;
    transition: background-color 0.7s ease-out;
        justify-content: flex-end;
        width: 30%;
        z-index: 1;
        position: relative;
        left: -20px;

}

.lang{
    text-decoration: none;
    color: white !important;
    font-size: 12px;
}

.lang:hover{
    color: rgb(255, 196, 0);
}

#kor{
    color: rgb(255, 196, 0) !important;
    font-weight: lighter;
}

/* WRAPPER */
#wrapper{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    height: auto;
    width: 100vw;
    background: #e9e9e9;

}

/* COVER */
video{
    object-fit: cover;
    filter: brightness(65%);
    
}

#coverPhoto{

min-width: 100vw;
width: 100vw;
min-height: 100vh;
height: 110vh;

}

#titles{
position: relative;
top: -580px;
margin-left: 80px;
}

.animate__delay-1s{
    --animate-delay: 0.3s !important;
}


#pageTitle{
    text-align: left;
    z-index: 1 !important;
    position: relative;
    font-family: 'Zilla Slab', serif !important;
    font-size: 46px !important;
    color: white !important;

}

#pageSubtitle{
    font-size: 70px !important;
    font-weight: bolder !important;
    text-align: left;
    z-index: 1 !important;
    position: relative;
    font-family: 'Zilla Slab', serif !important;
    color: white !important;
    

}

#left, #right {
    width: 50px;
    height: 50px;
}

#left:hover, #right:hover {
    background: rgba(253, 253, 253, 0.30);
    transform: scale(0.95, 0.95) !important;
}



/* BUTTON STYLING */

.buttonstyle {
    background-color: #dd861b !important;
    border-radius: 0 !important;
    padding-top: 13px;
    width: 260px;
    border: none !important;
    transition: background-color 0.4s ease-in-out;
    text-align: center;
    font-size: 16px !important;
    font-family: "Ubuntu", sans-serif;
}

.buttonstyle:hover{
    background-color: #fcce96 !important;
    color: black !important;
}

.buttonstyle2{
    background-color: rgba(253, 253, 253, 0.90) !important;
    border-radius: 0 !important;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 200px;
    border: none !important;
    transition: background-color 0.4s ease-in-out; 
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    font-size: 17px;

}

.buttonstyle2:hover{
    background-color: rgba(253, 253, 253, 1) !important;
    transform: scale(0.97, 0.97) !important;
}

#up{
    position: fixed;
width: 30px;
height: 30px;
    right: 25px;
    bottom: 25px;
    opacity: 0.6;
    z-index: 4;
}
  


/*-----------------------*/
/*------WHERE IT BEGAN---*/
/*-----------------------*/
.boldTitle{
    font-family: "Josefin Sans", sans-serif;
    font-weight: 700 !important;
    font-size: 3.4vw !important;
    color: #3f3f3f !important;
    line-height: 28px;
}

.orangeTitle{
font-family: "Josefin Sans", sans-serif;
position: relative;
top: 5px;
color: #ED8D12 !important;
font-weight: 400 !important;
}

#modern{
font-size: 2.3vw !important;
opacity: 0;
}

#professional{
font-size: 1.7vw !important;
}


#whereTitle{
opacity: 0;
}

.whereText{
display: flex;
flex-flow: column nowrap;
justify-content: center;
width: 40vw;
height: 100%;
font-family: "Poppins", sans-serif;
font-size: 1.45vw;
font-weight: 300;
position: relative;
top: 15px;
}

#text3{
position: relative;
top: 20px;

}

#world{
position: relative;
left: -20px;
}


#whereItBegan{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
width: 100vw;
height: 610px;
top: -130px;
}

#whereWrapper{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
width: 100%;
}


.whereDiv{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-start;
opacity: 0;
}

.svgContainer{
height: 13vw;
width: 13vw;
margin-top: 20px;
margin-bottom: 20px;
}


/*----------------------*/
/*-------WHO WE ARE-----*/
/*----------------------*/
/* TORONTO PICTURE */
#buttonsWrapper{
    background-image: url('../Images/toronto.webp');
    background-attachment: scroll;
    background-repeat: no-repeat; 
  background-size: cover; 
  width: 100vw;
  height: 650px;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  border: ridge rgb(255, 255, 255) 27px;

}

#whoWeAre{
    text-align: left;
    width: 45vw;
    position: relative;
background: rgba(253, 253, 253, 0.90);
padding:60px;
z-index: 99;

}

#whoWeAreText{
    font-size: 1.5vw;
    font-family: "poppins", sans-serif;
    font-weight: 300;
    margin-top: 30px;
}



#cornerLogo{
    display: none;
}


/*-------------------------------*/
/*--------PANEL SECTION----------*/
/*-------------------------------*/

#buttonsWrapper2 {
    background-image: url('../Images/city-min.webp');
    background-attachment: fixed;
    background-repeat: no-repeat;

    background-size: cover;
    width: 100vw;
    height: 450px;
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

}

#buttons {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    top: 250px;

}


.buttonTitle {
    color: white !important;
    font-family: "Ubuntu", sans-serif;
    font-weight: 400 !important;
    font-size: 23px !important;
    margin-bottom: 20px;
    margin-top: 20px;
}



#quoteButton1, #quoteButton2 {
    position: relative;
    width: 250px;
    height: 50px;
    color: white !important;
    font-weight: bold;
    margin-bottom: 30px;
    z-index: 99 !important;
    text-align: center;
}



#quoteSection, #contactSection {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    background: rgba(26, 26, 26, 0.8);
    width: 25vw;
    min-width: 300px;
    height: 300px;
    opacity: 0;
z-index: 4;
}

#quoteSection {
    margin-right: 50px;
}

#contactSection {
    margin-left: 50px;
}


#boy {
    position: relative;
    top: -55px;
    left: -470px;

}


/*----------------------*/
/*-------FOOTER--------*/
/*----------------------*/
#footer{
    display: flex;
    flex-flow: column nowrap;
    width: 100vw;
    height: 300px;
    font-family: 'Ruda', sans-serif;
    color: #ffffff;
    text-decoration: none;
    font-size: 10px;
    justify-content: center;
    align-items: center;
    background: #2b2b2b;
    position: relative;
    z-index: 0;
}

#topFooter{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    width: 100vw;
    align-items: flex-start;
    margin-top: 50px;
    margin-bottom: 35px;
}

#footerLogo{
    height: 180px;
    width: 230px;
    position: relative;
    top: -25px;

}

#connect{
    position: relative;
    left: -15px;
}

#navigation{
    position: relative;
}



#horLine{
    border-bottom: 0.7px solid white;
  width: 140px;
  margin-bottom: 10px;
}

#bottomFooter{
    text-align: center;
    margin-bottom: 10px;
}

#Jenny{
    color: rgba(253, 253, 253, 0.60) !important;
}

#Jenny:hover{
    color: white !important;
}



/* ------------------------------------------ */
/* -----------RESPONSIVE SCREEN --------------*/
/* ------------------------------------------ */
@media only screen and (min-width: 628px) and (max-width: 992px){

    .svgContainer{
        height: 110px;
        width: 110px;
        }
        

    .whereText{
        font-size: 16px;
    }

    #whoWeAreText{
        font-size: 15px !important;
    }

    #whoWeAre{
        min-width: 376px;
    
    }

    .boldTitle{
        font-size: 33px !important;
    }

    .orangeTitle{
       font-size: 23px !important;
    }

    #who{
        font-size: 28px !important;   
}

#professional{
    font-size: 20px !important;
}
   
    #cornerLogo{
        display: block;
        position: absolute;
        left: 20px;
        top: 5px;
        z-index: 200;
        width: 80px;
        height:65px;
    
    }
    
    #connect{
        position: relative;
        font-family: "Ubuntu", sans-serif;
        font-size: 25px !important;
        left: 2px;
    }

    a{
        font-family: "Ubuntu", sans-serif !important;
        font-weight: lighter !important;
        font-size: 17px !important;
    }


    #pageTitle{
        font-size: 28px !important;
    }

    #pageSubtitle {
        font-size: 45px !important;
    }

    .icon{
        width: 30px;
        height: 30px;
    }
    
        .burger{
            position: fixed;
            font-size: 40px;
            top: 25px;
            right: 25px;
            color: white;
            cursor: pointer;
            z-index: 15;
            display: flex;
        }
        
    

    
    .vertNavBar{
        display: block; 
        position: fixed;
        top: 0;
        right: 0;
        height: 50%;
        width: 20%;
        background-color: rgba(22, 22, 43, 0.5);
        clip-path: circle(0px at 250px 0px);
        transition: 0.5s ease all;
        z-index: 16 !important;
    }

    #langs{
		flex-flow: row nowrap;
		justify-content: flex-end;
		align-items: center;
		width: 110px;
		z-index: 1;
		position: relative;
		left: -16px;
		top: 10px;
		}

		.vertLink {
			font-size: 14px!important;
			font-weight: 300;
		}
	
		#kor{	color: rgb(255, 196, 0) !important;
			font-size: 10px !important;
			font-weight: normal;
		}
	
		#eng{
			font-weight: lighter;
			font-size: 10px !important;
			margin-left: 5px;
		}

    
    .nav-links{
        display: block;
            }
    
    #navBar{
        display: none;
    }
    
    #coverPhoto{
        background-attachment: scroll;
        }


        #buttonsWrapper{
          border: ridge rgb(255, 255, 255) 17px;
        }


  #buttons {
    flex-flow: column nowrap;
    width: 90%;
    min-width: 250px;
    position: relative;
    top: 0;
}

.buttonTitle{
        font-size: 18px !important;
        text-align: center;
}

#boy{
    display: none;
}

#quoteButton1, #quoteButton2 {
    width: 160px;
    font-size: 13px !important;
    font-family: "Ubuntu", sans-serif;
}

#quoteSection, #contactSection {
    width: 16vw;
    min-width: 250px;
    height: 270px;
}

#contactSection {
    margin-left: 0px;
    margin-bottom: 50px;
}

#quoteSection {
    margin-right: 0px;
    margin-bottom: 7px;
    margin-top: 50px;
}

    /* CONNECT WITH US FOOTER */
    h4 {
        font-size: 20px !important;
    }
    

       #topFooter{
           display: none;
       }
    

       #footer{
        height: 120px;
    }

    #Jenny{
        color: rgba(253, 253, 253, 0.60) !important;
        font-size: 11px !important;
        position: relative;
        top: 0px;
        left: 0px;
    }
    
    #Jenny:hover{
        color: white !important;
        font-size: 12px !important;
    }


    }





/* MOBILE SIZE */
@media only screen and (max-width: 628px) {

#coverPhoto{
    display: none;
}

    #coverImage{
        background-image: url("../Images/cityscape-min.webp");
        background-attachment: scroll;
        background-size: cover;
        display: block;
        position: relative;
        right: 0;
        bottom: 0;
        min-width: 100vw;
        width: 100vw;
        height: 133vh;
        z-index: 0;
        
    }

    #whereItBegan{
     padding-top: 50px;
    }

    .whereText{
        font-size: 16px;
        min-width: 180px;
        margin-bottom: 50px;
    }

    .svgContainer{
    display: none;
    }

    #world{
        left: -5px;
    }

    #whoWeAreText{
        font-size: 13px !important;
    }

    #whoWeAre{
        min-width: 200px;
        width: 70vw;
        padding: 5px;
    
    }

    .boldTitle, #who{
        font-size: 25px !important;
    }

    .orangeTitle{
       font-size: 19px !important;
    }

    #modern{
        font-size: 19px !important;
    }

    #who{
        font-size: 20px !important;   
}

#professional{
    font-size: 15px !important;
}



#pageTitle{
        font-size: 20px !important;
    }

    #titles{
        margin-left: 10px;
    }

    #pageSubtitle {
        font-size: 28px !important;
    }

    #coverPhoto{
        background-attachment: scroll;
        }

 

    #cornerLogo{
        display: block;
        position: absolute;
        left: 20px;
        top: 5px;
        z-index: 200;
        width: 80px;
        height:65px;
    
    }

  #navBar{
    display: none;
}

  .vertNavBar{
    display: block; 
    position: fixed;
    top: 0;
    right: 0;
    height: 50%;
    width: 33%;
    background-color: rgba(22, 22, 43, 0.5);
    clip-path: circle(0px at 250px 0px);
    transition: 0.5s ease all;
    z-index: 16 !important;
  }

  #langs{
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    width: 110px;
    z-index: 1;
    position: relative;
    left: -16px;
    top: 10px;
    }

    .vertLink {
        font-size: 14px!important;
        font-weight: 300;
    }

    #kor{	color: rgb(255, 196, 0) !important;
        font-size: 10px !important;
        font-weight: normal;
    }

    #eng{
        font-weight: lighter;
        font-size: 10px !important;
        margin-left: 5px;
    }


  .nav-links {
    display: block;
    position: fixed;
    left: 77%!important
}
.vertLink {
    font-size: 15px!important
}


  .burger{
    position: fixed;
    font-size: 40px;
    top: 25px;
    right: 25px;
    color: white;
    cursor: pointer;
    z-index: 15;
    display: flex;
}



#buttonsWrapper{
    border: ridge rgb(255, 255, 255) 16px;
  }

  #buttons {
    flex-flow: column nowrap;
    width: 90%;
    min-width: 250px;
    position: relative;
    top: 0;
}


.buttonTitle{
    font-size: 18px !important;
    text-align: center;
}

#boy{
    display: none;
}

#quoteButton1, #quoteButton2 {
    width: 160px;
    font-size: 13px !important;
    font-family: "Ubuntu", sans-serif;
}

#quoteSection, #contactSection {
    width: 16vw;
    min-width: 250px;
    height: 270px;
}

#contactSection {
    margin-left: 0px;
    margin-bottom: 50px;
}

#quoteSection {
    margin-right: 0px;
    margin-bottom: 7px;
    margin-top: 50px;
}

/* MOBILE: FOOTER */
#topFooter{
display: none;
}

#bottomFooter{
    padding-right: 30px;
    padding-left: 30px;
    text-align: center;
}

#footer{
    height: 120px;
}

#Jenny{
    color: rgba(253, 253, 253, 0.60) !important;
    font-size: 11px !important;
    position: relative;
    top: 0px;
    left: 0px;
}

#Jenny:hover{
    color: white !important;
    font-size: 12px !important;
}


}



/* LOADING */
#loading {
    position: fixed;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    opacity: 0.95;
    background-color: rgb(46, 45, 45);
    z-index: 99;
  }


#loading-image {
    position: absolute;
margin: auto;

    z-index: 100;
  }