@font-face {
    font-family: 'Questrial';
    src: url('../fonts/Questrial-Regular.woff2') format('woff2'),
        url('../fonts/Questrial-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


* {margin: 0;padding: 0;text-decoration: none;list-style: none;box-sizing:border-box;}
button,a {cursor: pointer;color: inherit;}
input,button,select,textarea{outline: none;border: none;appearance: none;-webkit-appearance: none;appearance: none;}
strong,em {font-weight: 700;}
a:hover {text-decoration: none;cursor: pointer;}
a:focus,input:focus {outline: none;list-style: none;}
html,body {font-family: 'Questrial', sans-serif,-apple-system, BlinkMacSystemFont, Segoe UI, segoe ui, SegoeUI, Segoe, Helvetica, Arial, sans-serif; color: #000000; position: relative; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; -webkit-overflow-scrolling: touch; font-size:62.5%;-webkit-text-size-adjust:100%; font-weight: 400; height: 100%; }
::-webkit-scrollbar {width: 0px; }
span.text-2 {min-width: 272px; }
header{width: calc(100% - 6rem); margin: auto; left: 0; right: 0; padding: 2rem 0; font-size: 2.4rem; position: fixed; z-index: 1}
.container{margin:0 10rem; width:calc(100% - 16rem);padding:0rem 8rem;}
.container{margin:0 auto; max-width:1100px;padding:0rem 8rem; height: 100%;}
.d-flex{display:flex;}
.flex-wrap{flex-wrap:wrap;}
.align-center{align-items:center;}
.align-end{align-items:flex-end;}
.justify-center{justify-content:center;}
.justify-content-between{justify-content:space-between;}
.flex-column{flex-direction:column !important;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.h-100{height: 100%;}
.img-responsive{width: 100%;}
.dark-section{background-color: #121212;color: #fff;}
.title {color: #95989a; font-size: 18px; text-transform: uppercase; opacity: .5; }
.heading {font-size: 100px; padding: 70px 0 50px; font-weight: 500;position: relative;}
.description{font-size: 1.4rem;color: #95989a;margin-bottom: 30px; line-height: 1.5}
.row{margin: 0 -4rem; }
.col-2{padding: 0 4rem; width: 50%; }
.scroll {position: absolute; bottom: 6%; left: 0; right: 0; text-align: center; font-size: 1.2rem; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; display: block; width: max-content; margin: auto; }
.text-2{margin-right: 20px;}
.home .container{border-color: transparent; }
.home .heading{padding: 50px 0 30px; font-size: 120px; opacity: 1}
.home .description{color: #95989a; text-transform: uppercase; line-height: 1.5rem; letter-spacing: .22rem; font-size: 1.8rem; opacity: .5; }

/*2. About me*/
.col-10 {width: 75%; margin-left: auto; }
.col-3 {width: 33.33%; }
.wrapper{width: 50%; margin-left:5rem; margin-right:5rem; }
.about-me .am-img{ width: 100%; max-width: 350px; filter: grayscale(1);}
.about-me .am-img:hover{ filter: grayscale(0);}
.about-me,.p-relative{position: relative;height: 100%;}
.about-nav {position: fixed; height: calc(100vh - 150px); left: 50%; padding: 100px 10px 50px; font-size: 1rem; top: calc(50% - 50vh + 100px); display: flex; justify-content: start; letter-spacing: 1px; flex-direction: column; justify-content: space-between; margin-left: calc(-550px - 84px); }
.nav-items {transform: rotate(-90deg); opacity: .3; text-transform: uppercase; }
.nav-items.active{opacity: 1 !important;}
.about-me .col-wrap-2{counter-reset: counter;}
.col-wrap-2 .wrapper{width: calc(50% - 16rem); position: relative; margin: 0 8rem 5rem; }
.col-wrap-2 .wrapper .title-2,.title-2{font-size: 1.2rem; font-weight: 800; text-transform: uppercase; margin-bottom: 20px; letter-spacing: 1px; } 
.about-me .col-wrap-2 .wrapper .title-2::before {font-weight: 800; counter-increment: counter; position: absolute; font-size: 1.2rem; left: -7rem; content: "0" counter(counter) ". "; }
#education,#about-me,#experience{min-height: 100vh;    display: flex; flex-direction: column; justify-content: center;} /*3. Project*/
.projects .img-wrap {filter: grayscale(0.5); overflow: hidden;}
.projects .img-wrap.top-bottom {transform: rotateX(-180deg);}
.projects .img-wrap.left-right {transform: rotateY(-180deg);}
.projects .img-wrap img {opacity: 0}
.projects .img-wrap:hover {filter: grayscale(0); }
.projects .col-wrap-2 .wrapper {flex: 0 0 50%; margin-bottom: 2rem;margin-left: 0;overflow: hidden;}
/*.projects .col-wrap-2 .wrapper:nth-child(odd) {margin-left: auto;margin-right: 0; }*/
.projects .col-wrap-2 .wrapper {margin: auto; }
.projects .title-2{margin-top: 2rem;}
.projects {margin-top: 50px;position: relative;}
.projects > .container {min-height: 100vh}
.projects .col-wrap-2{padding-bottom: 50px;}

.col-wrap-2 .wrapper .title-2, .title-2{text-align: left;line-height: 2}

/*4. Contact us*/
.mb-6{margin-bottom: 6rem;}
.btn-primary {font-weight: 500; font-size: 1.6rem; padding: 16px;background-color: transparent;border-bottom: 1px solid #fff; background-image: linear-gradient(to top, #111 50%, #fff 50%), linear-gradient(to top, #fff 50%, transparent 50%); -webkit-background-clip: text,padding-box; background-clip: text,padding-box; -webkit-text-fill-color: transparent; color: transparent; background-size: 100% 200%; background-position: top; transition: background-position 0.5s ease-in-out; }
.btn-primary:hover {color: #fff; padding: 16px;background-position: bottom;}
.social-wrap .social-items{padding-right: 10px;margin-right: 10px;}
.social-wrap .social-items:not(:last-child){border-right:1px solid;}
/*.contact-us{top: -100vh;position: relative;}*/

.go-prev, .go-next {position:absolute; cursor: pointer; top:50%; }
.go-next {left:calc(100% - 32px) }
nav {position: absolute; bottom: 0%; left: 50%; width: 240px; z-index: 100; visibility: hidden; }
nav ul {margin: 0; padding: 0; }
nav ul li {position: relative; display: block; width: 14px; height: 13px; margin: 7px 2px 2px 40px; background-color: transparent !important; float: left; }
nav ul li:first-child {margin-left: 0; }
nav span {border-radius: 50%; position: absolute; z-index: 1; height: 4px; width: 4px; border: 0; background: black; left: 50%; top: 50%; margin: -2px 0 0 -2px; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
nav li span.active {height: 16px; width: 16px; margin: -9px 0 0 -9px; border-radius: 100%; }
ul li:hover  span {height: 20px; width: 20px; margin: -13px 0 0 -9px; border-radius: 100%; }
.slides-container {position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 10; }
.slide {position: relative; width: 100%; height: 100%; overflow: hidden; }


/*------- 1st fold ---------*/

.home .heading{color: #fff; padding-bottom: 0; display: flex; position: fixed; bottom: calc(50vh - 99px); } 
.home .title{color: #ffffff75; opacity: 1; letter-spacing: 2px; padding-left: 10px; } 
.home .title.skills-title{letter-spacing: 3.2px; } 
.text-wrap{position: relative;} 
.text-wrap .index-1{display: flex; flex-direction: column; justify-content: space-between; height: 209px; margin-top: 94px; } 
.full-stop {position: absolute; bottom: calc(50% - 145px/2); right: 25vw; width: 10px; height: 10px; background: #111; } 
.index-1{position: relative; z-index: 1; } 
.scroll{color: #222; transform: rotateZ(90deg); transform: translate(-50%,-50%); } 
.scroll span:nth-child(2) {animation-delay: -0.2s; } 
.scroll span:nth-child(3) {animation-delay: -0.4s; } 
.scroll span {display: block; width: 12px; height: 12px; border-bottom: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); margin: -10px; animation: animate 2s infinite; } @keyframes animate {0% {opacity: 0; transform: rotate(45deg) translate(-20px,-20px); } 50% {opacity: 1; } 100% {opacity: 0; transform: rotate(45deg) translate(20px,20px); } } 
.scroll:after{background: #fff; display: none; } 
.hv-left {position: absolute; left: 0; height: 100%; width: 1px; background: #95989a; top: 0; } 
.hv-right {position: absolute; right: 0; height: 100%; width: 1px; background: #95989a; top: 0; } 
.heading,.wrapper{opacity: 1; text-align: justify; } 
.social{position: absolute; bottom: -88vh; right: calc(50% - 550px - 48px); width: 16px; text-align: center; } 
.social .social-item{margin-bottom: 10px; } 
.social svg path{fill:#fff; } 
.social svg{width: 14px; } 
/*-----------------------------------------*/ 
.home-2{top: 0!important; } 
.about-me .container{background: #fff; } 
.description.list {margin-top: 24px; } 
.list li{list-style: disc; margin-bottom: 6px; } 
.title-3 {font-size: 1.2rem; text-transform: uppercase; margin-top: 8px; } 
#experience .title-2{font-size: 1.4rem; margin-bottom: 16px; }
.d-sm-block{display: none;}
.img-wrap {overflow: hidden; }

/*Modal*/
#preloader {position: fixed; width: 100%; height: 100%; z-index: 100; display: flex; align-items: center; justify-content: center; background: #111; }
.loader {display: inline-block; width: 30px; height: 30px; position: relative; border: 4px solid #Fff; top: 0; animation: loader 2s infinite ease; } 
.loader-inner {vertical-align: top; display: inline-block; width: 100%; background-color: #fff; animation: loader-inner 2s infinite ease-in; } 
@keyframes loader {0% {transform: rotate(0deg); } 25% {transform: rotate(180deg); } 50% {transform: rotate(180deg); } 75% {transform: rotate(360deg); } 100% {transform: rotate(360deg); } } 
@keyframes loader-inner {0% {height: 0%; } 25% {height: 0%; } 50% {height: 100%; } 75% {height: 100%; } 100% {height: 0%; } }

@media (max-width: 1100px){
  .heading{font-size: 80px;}
  .about-me .col-wrap-2 .wrapper {width: calc(50%); margin: 0 8rem 5rem; }
  .about-me .col-wrap-2 .wrapper:nth-child(even){margin-left:auto;margin-right: 0; }
  .add-wrap{padding-top: 120px;}
  .contact-us .heading{font-size: 69px; text-align: left;}
  .contact-us .description{display: flex;}
  .contact-us .social-wrap{    margin-right: 0; width: 50%}
  .home .title.skills-title {letter-spacing: 1px; }
  .about-me .am-img{max-width: 400px}
  .wrapper {width: 100%; }
  .about-nav {margin-left: -50%;padding: 0 10px;height: calc(100vh - 200px);}
  .about-me .col-wrap-2 .wrapper .title-2::before{    left: -4rem;}
  .about-me .col-wrap-2 .wrapper {width: calc(50% - 8rem); margin: 0 4rem 5rem; }
  .social{right: 0;}
}
@media (max-width: 1024px){
  .col-wrap-2 .wrapper .title-2, .title-2{    margin-bottom: 10px;}
  .about-me .col-wrap-2 .wrapper {width: calc(50% - 6rem); margin: 0 5rem 2rem; }
  .container{padding: 0 4rem;}
}
@media (max-width: 950px){
  .contact-us .heading {font-size: 50px; text-align: left; }
  .contact-us .col-2{width: 100%;}
  .contact-us .col-wraper{flex-direction: column;}
  .add-wrap {padding-top: 0; display: flex; justify-content: space-between; }
}
@media (max-width: 768px){
  .add-wrap,.d-mb-col{flex-direction: column;}
  .order-mb-2{order:2;}
  .contact-us .social-wrap{padding: 0 4rem}
  .add-wrap .mb-6{margin-bottom: 0}
  .contact-us .heading{padding-top: 20px;}
  .home .heading{padding-bottom: 30px;}
  .container{padding: 0rem 4rem;}
  .home .title{line-height: 1.4}
  .wrapper{margin: 0;}
}
@media (max-width: 767px){
  .container{width: calc(100% - 12rem);}
  .about-nav{width: 60px;}
  .social{right: -6px;}
  .about-me .col-wrap-2 .wrapper:nth-child(even),
  .about-me .col-wrap-2 .wrapper {width: 100%; margin: 0 0 2rem 5rem;}
  .title-3{display: inline-block;}
  #experience .title-3:nth-child(3){    float: right;}
  #experience .title-2{margin-bottom: 0;}
  .contact-us .social-wrap,.contact-us .col-2{padding: 0;}
}
@media (max-width: 599px){
  .heading {font-size: 4.5rem; padding-bottom: 20px}
  .d-sm-block{display: block;}
  .contact-us .heading{font-size: 30px;}
  .home .title {line-height: 1.4; font-size: 16px; } 
  #experience .title-3:nth-child(3),.title-3{display: block;float: none;}
  .container {padding: 0rem 2rem; }
  .heading, .wrapper{text-align: left;}
  .about-me .col-wrap-2 .wrapper:nth-child(even), .about-me .col-wrap-2 .wrapper{margin-bottom: 0;}
  .home .heading{font-size: 5rem; bottom: calc(50% + 150px/2 - 40px);padding: 0}
  .text-wrap .index-1 {height: 250px; margin-top: 0; position: fixed; bottom:calc(50% - 150px/2); width: 100%; left: 30px; width: 100vw;} 
  .hv-left,.hv-right{opacity: 0.3;}
  .projects .col-wrap-2 .wrapper {margin: 0 auto 20px; flex: 0 0 100%;}
  .social{right: 0;}
  .about-nav{height: calc(100vh - 300px);top: calc(50% - 50vh + 150px);}
  .skills-title span{display: block;margin-bottom: 10px}
  span.text-2 {min-width: 120px; margin-right: 5px;}
  .row{margin:0 auto;}
  .heading {font-size: 4rem;}
}
@media (max-width: 320px){
  .home .heading{font-size: 4rem;     bottom: calc(50vh - 50px);}
  .container {width: 100%; padding: 0 2.8rem }  
  .social {display: none;} 
}