*{
    margin: 0;
    padding: o;
    font-family: 'Unica One', cursive;
    box-sizing: border-box;
}


.header{
    min-height: 100vh;
    width: 100%;
    background-image: url(images/008-1-scaled.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.header svg{
    position: absolute;
    width: 100%;
    left: 0;
    margin-top: 400px;
}
nav{
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}



.header-menu{
    flex: 1;
    text-align: right;
    
}
.header-menu ul li{
    list-style: none;
    display: inline-block;
    padding: 5px 6px;
    position:relative;
}
.header-menu ul li a{
    text-decoration: none;
	
}
.header-menu ul li::after{
    content: '';
    width: 0%;
    height: 2px;
    display: block;
    margin: auto;
    transition: 0.5s;
}
.header-menu ul li:hover::after{
     width: 100%;
}
nav:hover{
    background-color: #fff;
}
.menu-2{
    color: #FF7BAC;
    margin-right: 50px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
	
}
.menu-1{
    background-color: #FF7BAC;
    color: #fff;
	
}


.text-box h6{
    padding-left: 80px;
    padding-top: 5px;
    font-size: 20px;
    font-family: sans-serif;
}
.text-box h1{
    padding-left: 80px;
    padding-top: 5px;
    font-size: 70px;
}
.text-box p{
    padding-left: 80px;
    padding-top: 5px;
    font-size: 18px;
    font-family: sans-serif;
}

nav .fa{
    display: none;
}

@media(max-width: 700px){
    .text-box h1{
        font-size: 20px;
        margin-left: -70px;
    
    }
    .text-box h6{
        font-size: 13px;
        margin-left: -70px;
        
    }
    .text-box p{
        font-size: 10px;
        margin-left: -70px;
    }
    .header-menu ul li{
        display: block;
    }
    .header-menu{
        position: absolute;
        background: #fff;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;
      }
    nav .fa{
        display: block;
        color: #000;
        font-size: 22px;
        cursor: pointer;
    }
    .header-menu ul{
        padding: 30px;

    }
	.header svg{
        margin-top: 250px;
    }
    
}

/*------ 3 box ------*/

.row{
    display: flex;
    justify-content: space-between;
    background-color: #000;
    position: absolute;
    z-index: 2;
}
.box-col{
    flex-basis: 31%;
    color: #fff;
    background: #404040;
    border-radius: 10px;
    margin-bottom: 5%;
    box-sizing: border-box;
    text-align: left;
    margin-left: 20px;
    margin-right: 20px;
    padding: 20px 12px;
    margin-top: -180px;

    
}
.box-col i{
    font-size: 50px;
}
.box-col h1{
    margin-top: 20px;
}

@media(max-width: 700px){
    .row{
        display: block;
        margin-top: -450px;
    }
    .box-col{
        margin-top: 2px;
    }
}


/*------ marketing ------*/
.marketing{
    padding: 100px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-color:#000 ;
}
.marketing-left-col h1{
    margin-left: 20px;
    font-size: 50px;
    margin-top: -20px;
    color: #0000FF;
    
}
.marketing-left-col p{
    margin-top: 20px;
    margin-left: 20px;
    color: #fff;
    
}
.marketing-right-col img{
    margin-left: 650px;
    margin-top: -400px;
    width: 653px;
}

@media(max-width: 700px){
    .marketing{
        display: block;
    }
    .marketing-left-col h1{
        margin-top: 500px;
        font-size: 10px;
    }

    .marketing-right-col img{
        width: 250px;
		height: 250px;
        margin-top: 50px;
		margin-left: 50px;
		
      
    }
}

/*------ challenge ------*/
.challenge{
    background-color: #000;
    
}
.challenge-left-col{
    background-image: url(images/1620739931129.jpg);
    background-position: center;
    background-size: cover;
    position: absolute;
    width: 1200px;
    height: 450px;
    border-radius: 20px;
    margin-left: 80px;
    margin-top: 25px;
    
}
.challenge-left-col h1{
    font-size: 40px;
    margin-left: 50px;
    margin-top: 20px;
    color: #fff;
        
}
.button{
     display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background-color: #FF7BAC;
    position: absolute;
    cursor: pointer;
    margin-left: 50px;
    margin-top: 50px;
}

@media(max-width: 700px){
    .challenge-left-col h1{
        font-size: 20px;
    }
    .challenge-left-col{
        width: 210px;
    }


}

/*------ weight ------*/
.weight{
    margin-top: 500px;
    text-align: center;
    background-color: #000;
}
.weight h4{
    font-size: 30px;
    color: #FFFF00;
    
}
.weight p{
    margin-top: 20px;
    color: #fff;
    font-family: sans-serif;
}

/*------ footer ------*/
.footer{
    width: 100%;
    background: #000;
    color: #fff;
    display: flex;
    padding: 100px 10%;
}
.footer div{
    text-align: left;
}

.footer-col-1{
    margin-right: 80px;
}
.footer-col-1 p{
    font-family: sans-serif;
}
.footer-col-2{
    margin-left: 10px;
}
.footer-col-2 p{
    font-family: sans-serif;
}
.footer div h3{
    font-weight: 300;
    margin-bottom: 30px;
    letter-spacing: 1px;
} 
.footer-col-3{
    margin-left: 100px;
}
.footer-col-3 a{
    text-decoration: none;
    display: block;
    color: #fff;
    font-family: sans-serif;
    
}

.footer-col-4{
    margin-left: 100px;
}
.footer-col-4 p{
    font-family: sans-serif;
}

@media(max-width: 700px){
    .footer{
        display: block;
        }
    .footer-col-1 p{
        font-size: 15px;
    }
    .footer-col-2 h3{
        margin-top: 30px;
        margin-left: -15px;
    }
    .footer-col-2 p{
        margin-left: -15px;
        font-size: 15px;
    }
    .footer-col-3 h3{
        margin-top: 30px;
        margin-left: -100px;
    }
    .footer-col-3 a{
        margin-left: -100px;
        font-size: 15px;
    }
    .footer-col-4 h3{
        margin-top: 30px;
        margin-left: -100px;
    }
    .footer-col-4 p{
        margin-left: -100px;
        font-size: 15px;
    }


}

/*------ About us page -------*/
.container{
    text-align: center;
    margin-top: 30px;
    font-size: 40px;
}

/*------ carousal ------*/
/* (A) OUTER CONTAINER */
.hwrap {
    /* (A1) DIMENSIONS */
    width: 100%;
    height: 150px; /* OPTIONAL */
  
    /* (A2) COSMETICS */
      height: 250px;
    background: #fffdea;
    margin-top: 30px;
    overflow: hidden; /* HIDE SCROLLBARS */
  }
  
  /* (B) MIDDLE CONTAINER - FLEX LAYOUT */
  .hmove {
    display: flex;
    position: relative;
    top: 0; right: 0;
  }
  
  /* (C) SLIDES - FORCE INTO ONE LONG HORIZONTAL ROW */
  .hslide {
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 5px;
    text-align: center;
    
  }

  /*------ strategy ------*/
.strategy-section-1{
    margin-top: 50px;
    margin-left: 380px;
}
.strategy-section-1 h3{
    font-size: 22px;
}
.strategy-section-1 p{
    margin-top: 20px;
    font-family: sans-serif;
    color: #808080;
}
.strategy-section-2{
    display: flex;
    text-align: left;
    margin-top: 30px;
    margin-left: 370px;
}
.strategy-col-1{
    padding: 15px 15px
}
.strategy-col-1 h5{
    color:#AA336A ;
    font-style: bold;
    font-size: 16px;
    font-family: sans-serif;
}
.strategy-col-1 p{
    margin-top: 10px;
    font-family: sans-serif;
    color:  #808080;
}

@media(max-width: 700px){
    .strategy-section-1{
        margin-left: -0px;
    }
    .strategy-section-1 h3{
        font-size: 15px;
    }
    .strategy-section-1 p{
        font-size: 15px;
    }
    .strategy-section-2{
        display: block;
        margin-left: -0px;
    }
    .mySlides{
      margin-left: 0px !important;
    }
}
  
  /* (D) SLIDE ANIMATION */
  @keyframes slideh {
    /* (D0) THE IDEA - USE KEYFRAMES TO SHIFT SLIDES *
    0% { right: 0; }
    33% { right: 100%; }
    66% { right: 200%; }
    100% { right: 0; }
   
    /* (D1) BUT THE ABOVE WILL SHIFT NON-STOP */
    /* SO WE ADD PAUSES BETWEEN EACH SLIDE */
    0% { right: 0; }
    30% { right: 0; }
    33% { right: 100%; }
    63% { right: 100%; }
    66% { right: 200%; }
    97% { right: 200%; }
    100% { right: 0; }
  }
  .hmove { animation: slideh linear 15s infinite; }
  .hmove:hover { animation-play-state: paused; }
  
  .hslide h3{
      font-family: sans-serif;
      margin-top: 50px;
  }
  .hslide h5{
      font-family: sans-serif;
      margin-top: 15px;
  }
  .hslide p{
      font-family: sans-serif;
      margin-top: 15px;
      color:#808080;
  }
  

/*------ slide image ------*/





/*------ Contact us page ------*/
.contact{
    position: relative;
    min-height: 100vh;
    padding: 50px 100px;
    display: flex;
    flex-direction: column;
    background-color: #000;
    color: #fff;
}
.verticle-line{
    height: 2px;
    width: 40vh;
    background: #fff;
    margin: 30px 0 10px;
}
.contact-left-col{
    max-width: 800px;
    text-align: left;
}
.contact-left-col h3{
    margin-top: 50px;
}
.contact-left-col p{
    margin-top: 30px;
}
.contact-right-col{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 100px;
    margin-top: -500px;

}
.inputbox{
    position: relative;
    width: 100%;
    margin-top: 10px;
    
}
.inputbox input{
    width: 100%;
    padding: 5px 0;
    margin: 10px 0;
    border: none;
    border-bottom: 1px solid #000;
    outline: none;
    resize: none;
}

.inputbox input[type="submit"]
{
    width: 100px;
    background: #f44336;
    border: none;
    cursor: pointer;
    padding: 10px;
    color: #fff;
}
.label-1{
    display: block;
  padding-left: 15px;
  text-indent: -15px;
}



.inputbox input[type="checkbox"]
{
    width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -2px;
  *overflow: hidden;
}
.inputbox input[type="submit"]:hover{
    background-color: #AA336A;
}

@media(max-width: 700px){
    .contact{
        display: block;
        margin-left: -90px;
      }
      .contact-right-col{
        margin-top: 100px;
        margin-left: -5px;
      }

}

/*------ final round ------*/
.selected{
    text-align: center;
    margin-top: 30px;
    font-size: 30px;
}
.interview-form{
    margin-top: 50px;
    margin-bottom: 30px;
    margin-left:  30px;
    margin-right: 30px;
    

}

.interview-form form{
    width: 50%;
    margin: auto;
    display: block;
}
.input-row input{
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 0 0 12px;
    margin-bottom: 27px;
    color: #1f1f1f;
    font-size: 14px;
    font-weight: 400;
    background: none;
    max-width: 100%;
    outline: 0;
    font-family: inherit;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.input-row textarea{
    outline: none;
    width: 100%;
    min-height: 162px;
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 38px, rgba(0,0,0,0.15) 39px);
    line-height: 40px;
    resize: none;
    border: 0;
    padding: 0
}
.input-row label{
    font-size: 18px;
    display: block;
    clear: left;
    color: #1f1f1f;
    margin: 0 0 10px;
    font-weight: 400;
    
}
.input-row input[type="submit"]{
    display: inline-flex;
    align-items: center;
    height: 44px;
    background: #1f1f1f;
    color: #fff;
    padding: 0 40px;
   max-width: 30%;
    font-size: 14px;
    border: 0;
    outline: 0;
    cursor: pointer;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-top: 30px;
}
.input-row input[type="submit"]:hover{
    border: 1px solid #FF7BAC;
    background: #FF7BAC;
    transition: 1s;
}

.input-row input[type="button"] {
    display: inline-flex;
    align-items: center;
    height: 44px;
    background: #1f1f1f;
    color: #fff;
    padding: 0 40px;
    max-width: 30%;
    font-size: 14px;
    border: 0;
    outline: 0;
    cursor: pointer;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-top: 30px;
}

.input-row input[type="button"]:hover {
    border: 1px solid #FF7BAC;
    background: #FF7BAC;
    transition: 1s;
}

@media (max-width: 768px){
    .interview-form form{
        width: 100%;
    }
        .input-row input[type="submit"]{
       max-width: 50%;
    }
}