:root{
    --primary-color: rgba(20, 177, 177, 0.5);
    --overlay-color: rgba(24,39,51,0.85);
    --menu-speed: 0.75s;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'Helvetica Neue LT Pro';
    src: url('../fonts/HelveticaNeueLTPro-Ex.woff2') format('woff2'),
        url('../fonts/HelveticaNeueLTPro-Ex.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica Neue LT Pro';
    src: url('../fonts/HelveticaNeueLTPro-UltLt.woff2') format('woff2'),
        url('../fonts/HelveticaNeueLTPro-UltLt.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica Neue LT Pro';
    src: url('../fonts/HelveticaNeueLTPro-ThEx.woff2') format('woff2'),
        url('../fonts/HelveticaNeueLTPro-ThEx.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Himaliya FREE';
    src: url('../fonts/HimaliyaFREE.woff2') format('woff2'),
        url('../fonts/HimaliyaFREE.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Himaliya FREE';
    src: url('../fonts/HimaliyaFREE.woff2') format('woff2'),
        url('../fonts/HimaliyaFREE.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



a{color:#000;}

body{
    font-family: 'Helvetica Neue LT Pro';
    line-height: 1.4;
    
}
.container{
    max-width: 960px;
    margin: auto;
    overflow: hidden;
    padding: 0 3rem;
}
.showcase{
    /* background-color: var(--primary-color); */
    color: #fff;
    height: 100vh;
    position: relative;
}
.showcase:before{
    content: '';
    background: url('https://images.pexels.com/photos/37839/pexels-photo-37839.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat center center/cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.showcase .showcase-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}
.showcase h1{
    font-size: 4rem;
}
.showcase p{
    font-size: 1.3rem;
    font-family: 'Oswald', sans-serif;
}
.btnn{
    display: inline-block;
    border: none;
    background-color: var(--primary-color);
    color: #fff;
    padding: 0.75rem 1.5rem;
    margin-top: 1rem;
    text-decoration: none;
    transition: opacity 1s ease-in;
    border-radius: 2rem;
}
.btnn:hover{
    opacity: 0.7;
}
.contact-links{
    display: flex;
    justify-content: center;
    width: 200px;
    max-width: 980px;
    flex-wrap: wrap;
    margin-left: 54.5rem; 
    margin-top: -12rem;
}
.contact-details{
    font-size: 1rem;
    margin-bottom: 1rem;
    transition: transform 0.3s ease-out; 
  }
  .contact-details:hover{
    transform: translateY(5px);
  }
  .btn{
      display: inline-block;
        padding-right: 1rem;
        text-decoration: none;
        color: #fff;
  }
.menu-wrap{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}
.menu-wrap .toggler{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    cursor: pointer;
    width: 50px;
    height: 50px;
    opacity: 0;
}
.menu-wrap .hamburger{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 60px;
    height: 60px;
    padding: 1rem;
    /* background: var(--primary-color); */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Hamburger line */
.menu-wrap .hamburger >div {
    position: relative;
    width: 50%;
    height: 2px;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}
/* Top and bottom lines */
.menu-wrap .hamburger > div:before,
.menu-wrap .hamburger > div:after{
    content: '';
    position: absolute;
    z-index: 1;
    top: -10px;
    width: 200%;
    height: 2px;
    background: inherit;
}
/* Moves line down */
.menu-wrap .hamburger > div:after{
    top: 10px;
}
/* Toggler animate */
.menu-wrap .toggler:checked + .hamburger > div{
    transform: rotate(135deg);
}
/* Turn Lines into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after{
    top: 0;
    transform: rotate(90deg);
    width: 100%;
}
/* Rotate on hover when checked */
.menu-wrap .toggler:checked:hover + .hamburger > div{
    transform: rotate(225deg);
}
/* Show menu */
.menu-wrap .toggler:checked ~ .menu{
    visibility: visible;
}
.menu-wrap .toggler:checked ~ .menu > div{
    transform: scale(1);
    transition-duration: var(--menu-speed);
}
.menu-wrap .toggler:checked ~ .menu > div > div{
    opacity: 1;
    transition: opacity 0.4s ease;
}
.menu-wrap .menu{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     visibility: hidden; 
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-wrap .menu > div{
    background-color: var(--overlay-color);
    border-radius: 50%;
    width: 200vw;
    height: 200vw;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
     transform: scale(0); 
    transition: all 0.4s ease;
}
.menu-wrap .menu > div >div{
    text-align: center;
    max-width: 90vw;
    max-height: 100vh;
     opacity: 0; 
    transition: opacity 0.4s ease;
}
.menu-wrap .menu > div > div > ul > li {
    list-style: none;
    color: #fff;
    font-size: 1.5rem;
    padding: 1rem;
}

.menu-wrap .menu >div > div > ul > li > a{
    color: inherit;
    text-decoration: none;
    transition: color 0.4s ease;
}
.wrapper{width:100%; margin:auto; display: flex;}
.menu{width:4%;border-right: #eee 1px solid;}
.content-wrapper{width:96%;border-left: #eee 1px solid; }
h3{position: relative;}
.hline{position: relative;}
.hline:before {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background: #eee;
        left: 0;
        position: absolute;
    top: 15px;
      }
.slide-head {
  font-size: 10vw;
  line-height: 100%;
    font-weight: lighter;
}
.slide-head span{font-weight: lighter;line-height: 100%;font-size: 9vh;}
.slide-head-2{font-family: 'Himaliya FREE';margin-left: 20%;line-height: 140px; font-size: 12vw;margin-top: -25px;}
.wave-top {
  
  left: 0;
  width: 100%;
transform: rotate(180deg);
margin-top: -483px;
}
.wave-top-2{
transform: rotate(-180deg) !important;top: -97px;
}
.wave-top-3{
transform: rotate(-180deg) !important;top: -190px;
}
.grey-text{font-size: 2.5vh;color: #9a9a9a;line-height: 180%;}
.mr-top{margin-top: 180px;}
.v-box{width:315px; height: 315px; border-radius: 50%; background: #000;position: absolute;z-index: 1000;right: 14%;top: -409px;padding: 84px 20px;}
.v-box::before {content: ""; display: block; position: absolute;z-index: 1;left: 50%;top: 0; bottom: 0;border: 1px solid; height: 17%; border-width: 0 0 0 1px;}
.v-box::after {content: ""; display: block; position: absolute;z-index: 1;left: 50%;bottom: 0; bottom: 0;border: 1px solid; height: 17%; border-width: 0 0 0 1px;}
.wave-section{margin-top: 490px;}
.bg-black{background: #000;}
.v-head{writing-mode: vertical-rl;font-size: 7vw;white-space: nowrap;width: auto;color: #fff;transform: rotate(-180deg) !important;font-weight: lighter;}
.mt-m{margin-top:-10px;}
.grid-container {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 30px;}
.grid-item {}
.proj-btn{width: 150px;height: 150px;position: absolute;background: #000;border: #fff 2px solid;display: flex;align-items: center;justify-content: center;text-align: center;left: 0;right: 0;
bottom: -18px;margin: auto;}
.pt-40{padding-top: 40%;}
.grid-block {display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr;grid-gap: 30px; grid-gap: 30px;}
.box-img-1{border-bottom-left-radius: 50%; border-top-left-radius: 50%; border-top-right-radius: 50%; }
.box-img-2{border-bottom-left-radius: 0 !important;}
.box-img-4{border-top-right-radius: 0 !important;}
.box-img-5{border-top-left-radius: 0 !important;border-bottom-left-radius: 0 !important;}
.two{grid-column-start: 2; grid-column-end: 5;grid-row-start: 1;grid-row-end: 2;}
.three{grid-column-start: 5; grid-column-end: 6; grid-row-start: 1; grid-row-end: 4;}
.pop{grid-column-start: 4; grid-column-end: 5;grid-row-start: 1; grid-row-end: 2;}
.six{grid-column-start: 3; grid-column-end: 5;grid-row-start: 2; grid-row-end: 3;}
.box-img-3{border-top-right-radius: 200px; }
.box-img-6{border-bottom-right-radius: 0 !important; }
.p-all{width:100%; height: 100%; border-radius: 50%; background: #000;padding: 84px 20px;display: flex;align-items: center;justify-content: center;text-align: center;margin: auto;}
.p-all::before {content: ""; display: block; position: absolute;z-index: 1;left: 50%;top: 0; bottom: 0;border: 1px solid; height: 17%; border-width: 0 0 0 1px;}
.p-all::after {content: ""; display: block; position: absolute;z-index: 1;left: 50%;bottom: 0; bottom: 0;border: 1px solid; height: 17%; border-width: 0 0 0 1px;}
.in-cust{border: 0; border-bottom: #8e8e8e 2px solid; width:100%;padding-bottom: 16px;}
.form-head{font-size: 4vw;margin-bottom: 50px; font-weight: lighter;}
.p-50{padding: 50px;}
.box-img-3{border-top-right-radius: 120px;}
.grid-slide{display: grid; grid-template-columns: 1fr;}
.grid-img{grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;}
.grid-img-2{grid-column-start: 1; grid-column-end: 2;grid-row-start: 1; grid-row-end: 2;}
.grid-slide img{width:80%; margin: auto;}
.social{width:auto; transform: rotate(180deg);writing-mode: vertical-rl;position: fixed;top: 30%;}
.social ul{margin:0; padding: 0;}
.social ul li{list-style: none;display: inline-block;padding: 18px;font-size: 12px;}
/* image rotate animation */
.rotate {  -webkit-animation: rotateIt 11s linear infinite;  animation: rotation 11s infinite linear;}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* image rotate animation end */

/* our vision animation */
@keyframes bounce {
    0% { transform: translateY(-10px)  }
    50% { transform: translateY(40px) }
    100% { transform: translateY(-10px) }
}

#zio {
    
    -webkit-animation: bounce 3s infinite ease-in-out;
    -o-animation: bounce 3s infinite ease-in-out;
    -ms-animation: bounce 3s infinite ease-in-out; 
    -moz-animation: bounce 3s infinite ease-in-out; 
    animation: bounce 3s infinite ease-in-out;
}
/* our vision animation end */