/* global CSS  */
html, body { height: 100%; background: black;}

*{margin: 0px; padding: 0px;}

@font-face {
    font-family: jost;
    src: url(Jost-VariableFont_wght.ttf);
  }

h1{ font-size: 56px; font-weight: normal;}
p{ font-size: 36px; font-weight:100;}

/* wrapper*/
.wrapper { font-family: jost; width: 100%; justify-content: space-around; align-items: center; background-color: black; }
.center { padding: 0px 40px; margin: 0 auto; overflow: hidden;  }

/* home container */
.homecontainer { width: 100%; height: 100%; background:url(../images/line_background.png); }

/* header */
header { width: 100%; overflow: hidden; height: 110px; }
header h1 { float: left; }
header h1 a { display: block; }

/* nav */
nav { padding: 32px 30px 0px 0px;  float: right; }
nav ul { list-style: none; }
nav ul li { padding: 0px 20px; line-height: 45px; font-size: 14px; text-transform: uppercase; float: left;  }
nav ul li a { color: #8F8F8F; text-decoration: none; }
nav ul li a:hover { color: #ffffff; }
nav ul li.select a { color: #ffffff; font-weight: bold; }
.menuIcon { display: none; margin: 50px 0px 0px 10px; width: 32px; height: 16px; background: red; float: right; background:url(../images/humnergarmenu.png); cursor: pointer;}
.mobilemenu {display: none; width: 100%; position: absolute; top: 110px; left: 0px; background:#2B2B2B; z-index: 1;}
.mobilemenu ul { list-style: none;}
.mobilemenu ul li { font-size: 14px; text-transform: uppercase; border-bottom: 1px solid #494949;}
.mobilemenu ul li a { padding: 10px 20px; display: inline-block; color: #8F8F8F; text-decoration: none; }
.mobilemenu ul li a:hover { color: #FFFFFF;}

/* banner box */
.bannerBox { width: 100%; overflow: hidden;}
.bannerBox .left{ padding: 120px 0px 0px 30px; float: left; width: 45%;}
.bannerBox .left h1{ color: #717171; font-size: 36px; font-weight:400;}
.bannerBox .left h1 span.small {color:#6C6C6C; display: block; font-weight: 300; font-size: 24px;}
.bannerBox .left h1 span.firtname{ color: #FFFFFF; }
.bannerBox .left h2{ color: #ffffff; font-size: 68px; line-height: 60px; font-weight:bold; text-transform: uppercase;}
.bannerBox .left h2 span{ color: #E84040;}
.bannerBox .right{ float: right; width: 50%;}

@keyframes rotate-full {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  & .infinite {
    animation-iteration-count: infinite;
  }
}

.rotate {
  animation: rotation-full 5s infinite linear;
}

.rotate-full {
  animation: infinite-spinning 8s infinite linear;
}
.bannerBox .right .picture{  position: relative; background:url(../images/picture.png) no-repeat; background-size: contain; height: 506px; display: block;}
.bannerBox .right .picture ul { width: auto; list-style: none;}
.bannerBox .right .picture ul li { width: auto;}
.bannerBox .right .picture ul li a { padding: 5px; line-height: 10px; border-radius: 30px; background:#E84040; border: 2px solid #FFFFFF; text-decoration: none; color: #FFFFFF; }
.bannerBox .right .picture ul li.pointfirst a{ position: absolute; top: 190px; left: 68px;}
.bannerBox .right .picture ul li.pointsecond a{ position: absolute; top: 350px; left: 10px;}
.bannerBox .right .picture ul li.pointthird a{ position: absolute; top: 165px; right: 96px;}
.bannerBox .right .picture ul li.pointfour a{position: absolute; top: 318px; right: 20px;}
.bannerBox .right .picture ul li p{ display: none; padding: 5px 10px; font-size: 14px; font-weight: 300; border-radius: 6px; color: black; width: 100px; background: white;}
.bannerBox .right .picture ul li.pointfirst p { position: absolute; top: 190px; left: 105px; }
.bannerBox .right .picture ul li.pointsecond p{ padding: 5px 10px; position: absolute; top: 352px; left: 46px; }
.bannerBox .right .picture ul li.pointthird p{ padding: 5px 10px; position: absolute; top: 165px; right: 132px; }
.bannerBox .right .picture ul li.pointfour p{ padding: 5px 10px; position: absolute; top: 318px; right: 55px; }
.bannerBox .right .picture ul li p span{ position: absolute; left: -7px; color: white; width: 11px; height: 14px; background:url(../images/leftarrow.png) left top no-repeat;}
.bannerBox .right .picture ul li.pointfour p span, .bannerBox .right .picture ul li.pointthird p span { position: absolute; left: 116px; background:url(../images/rightarrow.png) right top no-repeat;}
.bannerBox .right .picture ul li:hover a { cursor: pointer; transform: rotate(30deg);}
.bannerBox .right .picture ul li:hover p{  display: block;}

/* client box */

.clientBox {margin-top: -36px; color: #ffffff; position: relative; padding: 20px 30px;; height: 80px; overflow: hidden; border-radius: 20px; background: white;}
.clientBox .left { width: 20%; float: left; padding-right: 20px; vertical-align:middle; border-right: 1px solid #8F8F8F; color: #5C5C5C; font-size: 32px; font-weight: bold; text-transform: uppercase;}
.clientBox .left p{ padding: 6px 0px; font-size: 30px; font-weight:500; line-height: 32px;}
.clientBox .right { width: 70%; float: right; padding-right: 30px;}


/* aboutme box */
.aboutmeBox { padding:  40px 30px 60px 30px; display: block; overflow: hidden; color: white;}
.aboutmeBox h1 { padding-bottom: 20px; line-height: 60px;}
.aboutmeBox h1 span{ color: #F73C08;}
.aboutmeBox p { font-weight: 200;}

/* philosophy box */
.PhilosophyBox { padding:  50px 30px 60px 30px;  display: block; overflow: hidden; color: #1B1B1B; background-color: #FFFFFF;}
.PhilosophyBox h1 { padding-bottom: 20px; width: 85%; line-height: 60px; }
.PhilosophyBox h1 span{ color: #F73C08;}
.PhilosophyBox p { font-weight: 200;}
.PhilosophyBox p before{ padding-right: 15px;  font-weight: bold;}
.PhilosophyBox p after { padding-left: 15px;  font-weight: bold;}

/* brand box */
.brandBox { padding:  50px 30px 60px 30px; display: block; overflow: hidden; color: white;}
.brandBox h1 { padding-bottom: 20px; width: 85%; line-height: 60px; }
.brandBox h1 span{ color: #F73C08;}
.brandBox ul { list-style: none; overflow: hidden; margin-top: 20px;}
.brandBox ul li { width: 23%; height: 128px; display: block; text-align: center; margin-left: 2% ; border: 1px solid #494949; border-radius: 8px; float: left;}
.brandBox ul li:first-child { margin-left: 0px;}
.brandBox ul li a { display: inline-block; }
.brandBox ul li a.iyogi { margin-top: 11px; width: 147px; height: 104px; background:url(../images/yogiG.png) no-repeat; }
.brandBox ul li a.iyogi:hover { background:url(../images/yogiC.png) no-repeat;}
.brandBox ul li a.bhaskar { margin-top: 15px; margin-left: 10px; width: 230px; height: 100px; background:url(../images/bhaskar.png) no-repeat; background-size: contain; }
.brandBox ul li a.bhaskar:hover { background:url(../images/bhaskarC.png) no-repeat; background-size: contain;}
.brandBox ul li a.airtel { margin-top: 22px; width: 176px; height: 79px; background:url(../images/airtelG.png) no-repeat; background-size: contain; }
.brandBox ul li a.airtel:hover { background:url(../images/airtelC.png) no-repeat; background-size: contain; }
.brandBox ul li a.sevengeneration { margin-top: 18px; width: 186px; height: 83px; background:url(../images/sevenG.png) no-repeat; background-size: contain; }
.brandBox ul li a.sevengeneration:hover { background:url(../images/sevenC.png) no-repeat; background-size: contain; }
.brandBox ul li a.eic { margin-top: 13px; width: 214px; height: 103px; background:url(../images/eicG.png) no-repeat; background-size: contain; }
.brandBox ul li a.eic:hover { background:url(../images/eicC.png) no-repeat; background-size: contain; }
.brandBox ul li a.sourcefuse { margin-top: 25px; width: 269px; height: 78px; background:url(../images/sourcefuseG.png) no-repeat; background-size: contain; }
.brandBox ul li a.sourcefuse:hover { height: 78px; background:url(../images/sourcefuseC.png) no-repeat;  background-size: contain;}
.brandBox ul li a.wfx { margin-top: 20px; width: 187px; height: 75px; background:url(../images/wfxG.png) no-repeat; background-size: contain; }
.brandBox ul li a.wfx:hover { background:url(../images/wfxC.png) no-repeat; background-size: contain; }
.brandBox ul li a.threekt { margin-top: 10px; width: 195px; height: 98px; background:url(../images/3ktG.png) no-repeat; background-size: contain;  }
.brandBox ul li a.threekt:hover { background:url(../images/3ktC.png) no-repeat; background-size: contain;  }

/* whatido box */
.whatidoBox { padding:  50px 30px 60px 30px; display: block; overflow: hidden; background: #ffffff;}
.whatidoBox h1 { padding-bottom: 20px; width: 85%; line-height: 60px; }
.whatidoBox h1 span{ color: #F73C08;}
.whatidoBox ul { list-style: none; overflow: hidden; }
.whatidoBox ul li {padding: 20px 0px; font-size: 36px; font-weight:200; border-top:  1px solid #8F8F8F;}
.whatidoBox ul li:first-child { border: none; }
.whatidoBox ul li span{ font-weight: 400;}
.whatidoBox .resume {margin: 30px 0px 0px 43px; padding: 20px 30px; width: 30%; text-align:  center; border: 1px solid #8F8F8F; border-radius: 100px; font-size: 36px; font-weight:600; }
.whatidoBox .resume a{ text-decoration: none; color: #1B1B1B;}
.whatidoBox .resume:hover, .whatidoBox .resume:hover a { color: #FFFFFF;  background: #E84040; text-decoration: none;}

/* letstalk box */
.letstalkBox { padding:  50px 30px 60px 30px; text-align: center; display: block; overflow: hidden; color: white; border-bottom: 1px solid #232222; border-top: 1px solid #232222;}
.letstalkBox h1 { padding-bottom: 20px; }
.letstalkBox h1 span{ color: #F73C08;}
.letstalkBox p { font-size: 30px;}
.letstalkBox p a { text-decoration: none; font-weight: 200; color: #FFFFFF; }
.letstalkBox p a:hover { color: #F73C08; }
.letstalkBox ul { padding-top: 30px; width: 100%; list-style: none;}
.letstalkBox ul li { text-align: center; display: inline-block;}
.letstalkBox ul li a { padding-left: 50px; margin-left: 30px; font-size: 30px; text-decoration: none; color: #ffffff; font-weight: 400;}
.letstalkBox ul li a.instagram {  background: url(../images/instagram.png) left center no-repeat;}
.letstalkBox ul li a.behance { padding-left: 60px;  background: url(../images/behance.png) left center no-repeat;}
.letstalkBox ul li a.linkedin {  background: url(../images/linkedin.png) left center no-repeat;}

/* portfolio box */

.portfolioBox { padding:  40px 30px 60px 30px; display: block; overflow: hidden; color: white;}
.portfolioBox h1 { padding-bottom: 20px; line-height: 60px;}
.portfolioBox h1 span{ color: #F73C08;}
.portfolioBox h2 { margin-bottom: 50px; font-size: 36px; font-weight: 300;}
.portfolioBox ul { list-style: none;}
.portfolioBox ul li { margin:0px 30px 30px 0px; width: 520px; height: 500px; border-radius: 30px; float: left; }
.portfolioBox ul li.innerkey { background: url(../images/renewable.png); background-repeat: no-repeat; background-size:contain;}
.portfolioBox ul li.mynutrition { background: url(../images/mynutritionP.png); background-repeat: no-repeat; background-size:contain;}
.portfolioBox ul li.renewable { background: url(../images/renewable.png); background-repeat: no-repeat; background-size:contain;}
.portfolioBox ul li.viziapp { background: url(../images/viziapp.png); background-repeat: no-repeat; background-size:contain;}
.portfolioBox ul li.acmeP { background: url(../images/acmeP.png); background-repeat: no-repeat; background-size:contain;}
.portfolioBox ul li.oblingo { background: url(../images/oblingo.png); background-repeat: no-repeat; background-size:contain;}
.portfolioBox ul li.threektP { background: url(../images/3ktP.png); background-repeat: no-repeat; background-size:contain;}
.portfolioBox ul li.innerkey { background: url(../images/innerkey.png); background-repeat: no-repeat; background-size:contain;}
.portfolioBox ul li.beautycraftP { background: url(../images/beautycraftP.png); background-repeat: no-repeat; background-size:contain;}
.portfolioBox p { padding: 376px 0px 12px 30px; font-size: 36px; font-weight: 500;}
.portfolioBox ul li a {padding: 5px 45px 5px 25px; margin-left: 30px; font-size: 20px; font-weight: 300; text-decoration: none; color: #FFFFFF; border: 1px solid #ffffff; border-radius:100px; background: url(../images/veiwarrow.png) 137px center no-repeat; }
.portfolioBox ul li a:hover { font-weight: 300; border: 3px solid #FFFFFF; }

/* work box */

.workBox { padding-top: 50px; width: 100%; }
.workBox h1 { margin-bottom: 30px; font-size:  60px; line-height: 48px; }
.workBox h1 { color: #FFFFFF;}
.workBox h1 span { padding: 0px 35px; line-height: 24px; border: 1px solid #FFFFFF; border-radius: 100px;  float: right; display: inline-block;}
.workBox h1 span a { padding-left:35px; display: inline-block; margin-bottom: 10px;  font-size: 24px; color: #FFFFFF; text-decoration: none;  background: url(../images/backarrow.png) left center no-repeat;}
.workBox h1 span:hover { border: 3px solid #FFFFFF; }
.workBox .corner{ border-radius: 50px; background: #717171; display: block; overflow: hidden ;}
.workBox .corner img {padding: 0px; margin: 0px; float: left; width: 100%;}

/* footer box */
footer { padding: 20px 0px 20px 0px; display: block; overflow: hidden; text-align: center; color: #8F8F8F;}
footer p { color: white; font-size: 16px; font-weight: 200;}
footer p a { color: white; text-decoration: none;}
footer.footerBox { padding: 30px 0px 30px 0px; }

/* contact box */
.contactBox { padding:  40px 30px 60px 30px; display: block; overflow: hidden; color: white;}
.contactBox h1 { padding-bottom: 20px; line-height: 60px;}
.contactBox h1 span{ color: #F73C08;}
.contactBox p { font-weight: 200; font-size: 32px;}
.contactBox form {padding-top: 50px; font-size: 24px; }
.contactBox form input, .contactBox form textarea { margin-bottom: 20px; padding: 20px; font-size: 16px; font-weight: 100; color: #FFFFFF; border: 1px solid #2B2B2B; border-radius: 6px; width: 50%; background: #000000; }
.contactBox form input:focus { border: 1px solid #E84040; color: #FFFFFF;}
.contactBox form textarea { resize: none; min-height: 100px; color: #FFFFFF;}
.contactBox input.button { color: #FFFFFF; font-weight: 600; font-size: 16px; width: 220px; text-transform: uppercase;  cursor: pointer;}
.contactBox input.button:hover { background:#F73C08; color: #FFFFFF; }


/* smaller than 1000 start */
@media only screen and (max-width : 1000px) {

  .bannerBox .left h1 { font-size: 30px;}
  .bannerBox .left h2 { font-size: 48px; line-height: 44px;}
  .clientBox { margin-top: -340px; display: none;}
  .bannerBox .right .picture ul { display: none;}
  .clientBox .left { padding-right: 10px;}
  .clientBox .left p { font-size: 24px;}

  .brandBox ul li a.bhaskar, .brandBox ul li a.bhaskar:hover { width:  176px;}

  .brandBox ul li a.eic { width: 186px; margin-top: 21px;}
  .brandBox ul li a.sourcefuse { width: 190px; margin-top: 36px;}
  .whatidoBox .resume { width: 36%;}

  .portfolioBox ul li { width: 390px;}
  .portfolioBox p { padding: 274px 0px 7px 30px; font-size: 28px;}
  .portfolioBox ul li a { padding: 2px 45px 5px 25px;}
  .bannerBox .right .picture { height: 304px;}

}
/* smaller than 1000 end */


/* smaller than 768 start */
@media only screen and (max-width : 768px) {

  .center {padding:0px 20px;}
  nav ul li { padding: 0px 14px;}
  .bannerBox .left { width: 100%; padding: 50px 0px 0px 30px; float: none;}
  .bannerBox .right { float: none; margin-top: 30px;}
  .clientBox .left p { font-size: 14px; line-height: 32px;}
  .clientBox { margin-top: -478px; display: none;}
  .contactBox form input, .contactBox form textarea { width: 90%;}
  .letstalkBox ul li a { font-size: 26px;}
  .whatidoBox .resume { width: 80%;}
  .brandBox ul { margin: 0px ;}
  .brandBox ul li { width: 45%; margin: 0px 10px 10px 0px;}
  .portfolioBox ul li { width: 536px;}
  .portfolioBox p { padding: 380px 0px 7px 30px;}
  .bannerBox .left {width: 90%; padding: 50px 0px 0px 0px;}
  .bannerBox .left h2 { font-size: 58px; line-height: 56px; }
  .bannerBox .right { padding: 0px; width: 75%; margin: 50px auto 0 auto;}
  .clientBox { padding: 10px 20px; margin-top: -350px;}
  .clientBox .right { padding-right: 20px;}
  .clientBox .left p { padding: 20px 0px; line-height: 19px;}
  .bannerBox .right .picture { height: 304px;}

}
/* smaller than 768 end */

/* smaller than 320 start */
@media only screen and (max-width : 400px) {

  header h1 { margin-left: -20px;}
  .menuIcon { display: block;}
  .mobilemenu {display: none;}
  nav{ display: none;}
  h1 { font-size: 46px;}
  p { font-size: 26px;}
  .whatidoBox ul li { font-size: 26px; }
  .whatidoBox .resume { margin: 30px 0px 0px 20px; padding: 15px 20px; font-size: 26px;}
  .letstalkBox ul li { margin-bottom: 20px;}
  .letstalkBox { padding: 50px 30px 30px 30px;}
  .brandBox ul li { width: 90%;}
  .bannerBox .left h2 { font-size: 52px;}
  .bannerBox .right .picture { height: 215px;}
  .portfolioBox h2 { font-size: 36px;}
  .aboutmeBox, .PhilosophyBox, .brandBox, .whatidoBox, .portfolioBox { padding: 40px 10px 40px 10px;}
  .portfolioBox ul li { width: 340px;  height: 330px;}
  .portfolioBox p { padding: 230px 0px 7px 30px; font-size: 26px;}

}
/* smaller than 320 end */