@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Kaushan+Script&family=Oswald:wght@400;700&family=Roboto+Slab:wght@300;400;700;900&family=Roboto:wght@300;700;900&family=Rochester&display=swap');

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/


/* Basic CSS Setup - for the website */
html{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

*, *:before, *:after{
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
}


body{
    font-family: "Roboto Slab", Georgia, 'Times New Roman', Times, serif;
    margin: 0;
    overflow-x: hidden;
    max-width: 100%;
    /* overflow: hidden; */
  }

button{
  font-family: "Roboto Slab", Georgia, 'Times New Roman', Times, serif;
  letter-spacing: 1px;
}

a{
    color: white;
}


.index-wrapper{
    max-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

/* .project-wrapper{
  position: relative;
  overscroll-behavior: contain;
} */

.cover{
    height:100vh;
    max-width:80%;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: center;
    /* background: rgba(0, 0, 0, 0.4); */
}

/* ========= HEADER ========== */

/* Video */

.girl{
    width: 100vw;
    height: 100vh;
    position: absolute;
    -o-object-fit: cover;
       object-fit: cover;
    top: 0;
    z-index: -1;
    /* -webkit-filter: grayscale(100%);
            filter: grayscale(100%); */
}


/* ==== hamburger menu ==== */
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 34px;
  height: 34px;
  cursor: pointer;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ffffff;
  border-radius: 4px;
}

.menu-trigger span:nth-of-type(1) {
    top: 0;
  }
.menu-trigger span:nth-of-type(2) {
    top: 15px;
  }
.menu-trigger span:nth-of-type(3) {
    bottom: 0;
  }

  /* ==== menu animation ==== */

  #menu07 span:nth-of-type(1) {
    -webkit-animation: menu07-bar01 .75s forwards;
    animation: menu07-bar01 .75s forwards;
  }
  @-webkit-keyframes menu07-bar01 {
    0% {
      -webkit-transform: translateY(15px) rotate(45deg);
    }
    50% {
      -webkit-transform: translateY(15px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(0) rotate(0);
    }
  }
  @keyframes menu07-bar01 {
    0% {
      -webkit-transform: translateY(15px) rotate(45deg);
              transform: translateY(15px) rotate(45deg);
    }
    50% {
      -webkit-transform: translateY(15px) rotate(0);
              transform: translateY(15px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(0) rotate(0);
              transform: translateY(0) rotate(0);
    }
  }
  #menu07 span:nth-of-type(2) {
    -webkit-transition: all .25s .25s;
    -o-transition: all .25s .25s;
    transition: all .25s .25s;
    opacity: 1;
  }
  #menu07 span:nth-of-type(3) {
    -webkit-animation: menu07-bar03 .75s forwards;
    animation: menu07-bar03 .75s forwards;
  }
  @-webkit-keyframes menu07-bar03 {
    0% {
      -webkit-transform: translateY(-15px) rotate(-45deg);
    }
    50% {
      -webkit-transform: translateY(-15px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(0) rotate(0);
    }
  }
  @keyframes menu07-bar03 {
    0% {
      -webkit-transform: translateY(-15px) rotate(-45deg);
              transform: translateY(-15px) rotate(-45deg);
    }
    50% {
      -webkit-transform: translateY(-15px) rotate(0);
              transform: translateY(-15px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(0) rotate(0);
              transform: translateY(0) rotate(0);
    }
  }
  #menu07.active span:nth-of-type(1) {
    -webkit-animation: active-menu07-bar01 .75s forwards;
    animation: active-menu07-bar01 .75s forwards;
  }
  @-webkit-keyframes active-menu07-bar01 {
    0% {
      -webkit-transform: translateY(0) rotate(0);
    }
    50% {
      -webkit-transform: translateY(15px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(15px) rotate(45deg);
    }
  }
  @keyframes active-menu07-bar01 {
    0% {
      -webkit-transform: translateY(0) rotate(0);
              transform: translateY(0) rotate(0);
    }
    50% {
      -webkit-transform: translateY(15px) rotate(0);
              transform: translateY(15px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(15px) rotate(45deg);
              transform: translateY(15px) rotate(45deg);
    }
  }
  #menu07.active span:nth-of-type(2) {
    opacity: 0;
  }
  #menu07.active span:nth-of-type(3) {
    -webkit-animation: active-menu07-bar03 .75s forwards;
    animation: active-menu07-bar03 .75s forwards;
  }
  @-webkit-keyframes active-menu07-bar03 {
    0% {
      -webkit-transform: translateY(0) rotate(0);
    }
    50% {
      -webkit-transform: translateY(-15px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(-15px) rotate(-45deg);
    }
  }
  @keyframes active-menu07-bar03 {
    0% {
      -webkit-transform: translateY(0) rotate(0);
              transform: translateY(0) rotate(0);
    }
    50% {
      -webkit-transform: translateY(-15px) rotate(0);
              transform: translateY(-15px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(-15px) rotate(-45deg);
              transform: translateY(-15px) rotate(-45deg);
    }
  }
  

/* Navigation */


#pages a, #social a{
    font-size: 3rem;
    color: #ffffff;
    font-size: 1.2rem;
    letter-spacing: 2px;
    text-decoration: none;
    padding: 5px 10px;
    margin-bottom: 15px;
    display: inline-block;
    width: 100%;
    text-align: center;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

#pages a:hover, #social a:hover{
  -webkit-text-decoration: line-through white solid;
          text-decoration: line-through white solid;
  text-decoration-thickness: 1.5px;
}

#pages{
    display: none;
}

#pages.open{
    display: inline-block;
    -webkit-animation: openNav .5s linear;
            animation: openNav .5s linear;
}


@-webkit-keyframes openNav {
    0% {
        opacity: 0;     
    }
    50% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
  }


@keyframes openNav {
    0% {
        opacity: 0;     
    }
    50% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
  }


.intro img{
    max-width: 38%;
    height: auto;
    border-radius: 50%;
    border-top-left-radius: 0;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    /* border: 3px solid #dc2430; */
    background-image: -webkit-gradient(linear, left top, left bottom, from(#7b4397), to(#dc2430));
    background-image: -o-linear-gradient(top, #7b4397 0%, #dc2430 100%);
    background-image: linear-gradient(180deg, #7b4397 0%, #dc2430 100%);
    padding: 10px;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5 );
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5 );
}

h1{
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 7.5rem;
    margin: 0;
    padding: 0;
    line-height: 1;
}

h2{
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 3rem;
    text-transform: uppercase;
    background: -webkit-linear-gradient(0deg, #7b4397 0%, #dc2430 50%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
    margin: 0;
    padding: 0;
}

h3{
  font-family: "Roboto Slab", Georgia, 'Times New Roman', Times, serif;
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: capitalize;
  padding: 0;
  margin-left: 1rem;
}

.project-icon{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.box {
    width: 10px;
    height: 10px;
    background: #fff;
    margin: 2px 2px;
    display: inline-block;
  }

.project-icon div{
    width: 60px;
    height: 60px;
    padding: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    cursor: pointer;
    border: 1px solid white;
    border-radius: 50%;
}

.project-icon:hover{
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}
/* Flexbox Starts here */
.cover{
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* flex-direction: column; */
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}



.flex-nav{
    min-height: 100vh;
    position: fixed; /* Set the navbar to fixed position */
    left: 0; /* Position the navbar at the top of the page */
    padding: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#7b4397), to(#dc2430));
    background-image: -o-linear-gradient(top, #7b4397 0%, #dc2430 100%);
    background-image: linear-gradient(180deg, #7b4397 0%, #dc2430 100%);
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5 );
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5 );
    z-index: 100;
}


/* Flex Container */
.flex-nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    /* border: 2px solid red; */
}

.main-introduction{
    display: -webkit-box;
    display: -ms-flexbox;
    padding-left: 200px;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.intro{
    width:95%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    color: white;
    padding: 2rem 0;
}

.hello{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.hello-blocks{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 2rem;
}


.name{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-transform: translate(0, 30px);
        -ms-transform: translate(0, 30px);
            transform: translate(0, 30px);
}

.name h1{
  font-family: "Kaushan Script", cursive;
  font-weight: 400;
  font-size: 8rem;
  /* line-height: 1; */
  padding: 0;
  margin: 0;
  text-transform: capitalize;
}


.name p{
    padding-top: 2.5rem;
    font-size: 1.3rem;
    letter-spacing: 7px;
    text-transform: uppercase;
}

.about-link button{
    background-image: -webkit-gradient(linear, left top, right top, from(#7b4397), to(#dc2430));
    background-image: -o-linear-gradient(left, #7b4397 0%, #dc2430 100%);
    background-image: linear-gradient(90deg, #7b4397 0%, #dc2430 100%);
    border-radius: 5px;
    border: none;
    text-decoration: none;
    text-align: center;
    padding: 15px 20px;
    margin: 1rem 0;
    color: #ffffff;
    font-size: 1.2rem;
    -webkit-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
    cursor: pointer;
}

.about-link button:hover{
    -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
            transform: translateY(-5px);
}

.move-down{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: white;
}

#para{
    opacity: 0;
    -webkit-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
            transform: translateX(-100px);
    font-size: 1rem;
    letter-spacing: 1px;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    padding: 0 2rem;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;  
}

.move-down:hover #para{
    opacity: 1;
    -webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
            transform: translateX(0px);
}



#hello{
    width: 110px;
    height: 110px;
    border: 3px solid #7b4397;
    border-radius: 50%;
    border-bottom-left-radius: 0%;
    padding: .5rem;
    color: #000000;
    font-size: 1.5rem;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: white;
}

#i-am{
    width: 80px;
    height: 80px;
    border: 3px solid #7b4397;
    border-radius: 50%;
    border-bottom-right-radius: 0%;
    padding: .5rem;
    color: #000000;
    font-size: 1.5rem;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: white;
    -webkit-transform: translate(30px, -40px);
        -ms-transform: translate(30px, -40px);
            transform: translate(30px, -40px);
}


/* Flex Item */ 
.flex-nav li {
  -webkit-box-flex:3;
      -ms-flex:3;
          flex:3;
}

.flex-nav .social {
    -webkit-box-flex:1;
        -ms-flex:1;
            flex:1;
}

/* ========= ABOUT ME ========== */

.headings{
  padding: 0;
  margin: 0;
  font-size: 5.5rem;
  opacity: .5;
  color: #dcdcdc;
  -webkit-transform: translateY(30px);
      -ms-transform: translateY(30px);
          transform: translateY(30px);
  z-index: -1;
}

.about{
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
}

.about-wrap{
  width: 75%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}


.details-wrap{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap-reverse;
      flex-wrap: wrap-reverse;
}

.about-para{
  margin: 2rem 0;
  color: grey;
  font-size: 1rem;
  line-height: 1.5;
}


.details{
    width: 45%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.about-image{
  width: 50%;
}

.about img{
    max-width: 100%;
}


.resume-buttons button{
    background: #E8505B;
    border-radius: 5px;
    border: none;
    text-decoration: none;
    text-align: center;
    padding: 15px 20px;
    margin: 2px;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
}

/* ========= EXPERTISE ========== */

.skills-wrap, .contact{
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.skills-sub-wrap, .job-study-wrap, .contact-wrap{
  width: 75%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.head-wrap{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.skills{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 2rem;
}

.skills i{
  font-size: 3.2rem;
  color: #E8505B;
}

.skills p{
  font-size: 1rem;
  color: grey;
}
.skills div{
  width: 45%;
  margin: 2rem 0;
  padding: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  border-radius: 5px;
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.2 );
          box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.2 );
  -webkit-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}

.skills div:hover{
  background-color: rgba(220,220,220, 0.3);
}

/* ========= SKILL-SET ========== */
.skill-set{
    width: 100%;
    min-height: 95vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 3rem;
}

.skills-set-wrap{
  width: 75%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* justify-content: space-between; */
}

.tools, .package{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 4rem;
}

.development, .designing{
  width: 45%;

}

.tools-name{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.adobe{
  font-family: Arial, Helvetica, sans-serif;
  background-color: grey;
  color: #ffffff;
  font-size: 1.2rem;
  border-radius: 4px;
  padding: .3rem;
}

.tools-name h4, p{
  font-size: 1.2rem;
  padding: 0;
  margin: 0;
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.tools-name i{
  font-size: 2rem;
  color: grey;
}
.outer{
	width: 100%;
	height: 10px;
  background-color: #dcdcdc;
  border-radius: 15px;
  margin-top: .5rem;;
  margin-bottom: 2rem;
}

.revealOnScroll{
  /* opacity: 0%; */
  width: 0%;
  height: 10px;
  border-radius: 15px;
  background: -webkit-gradient(linear, left top, right top, from(#7b4397), to(#dc2430));
  background: -o-linear-gradient(left, #7b4397 0%, #dc2430 100%);
  background: linear-gradient(90deg, #7b4397 0%, #dc2430 100%);
}
 /*animation*/

 .animated-one{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
 .animated-one.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
 .animated-one.hinge{-webkit-animation-duration:2s;animation-duration:2s}
 
.inner1{
  width: 100%;
  -webkit-animation: inc100 5s ease-out 1;
          animation: inc100 5s ease-out 1;
}

@-webkit-keyframes inc100 {
  0% {
      width: 10%; 
  }
  100% {
    
      width: 100%; 
  }
}

@keyframes inc100 {
  0% {
      width: 10%; 
  }
  100% {
    
      width: 100%; 
  }
}

.inner2{
width: 90%;
-webkit-animation: inc90 5s ease-out 1;
        animation: inc90 5s ease-out 1;
}

@-webkit-keyframes inc90 {
  0% {
      width: 10%; 
  }
  100% {
      width: 90%; 
  }
}

@keyframes inc90 {
  0% {
      width: 10%; 
  }
  100% {
      width: 90%; 
  }
}

.inner3{
width: 80%;
-webkit-animation: inc80 5s ease-out 1;
        animation: inc80 5s ease-out 1;
}

@-webkit-keyframes inc80 {
  0% {
      width: 10%; 
  }
  100% {
      width: 80%; 
  }
}

@keyframes inc80 {
  0% {
      width: 10%; 
  }
  100% {
      width: 80%; 
  }
}

.inner4{
width: 75%;
-webkit-animation: inc75 5s ease-out 1;
        animation: inc75 5s ease-out 1;
}

@-webkit-keyframes inc75 {
  0% {
      width: 10%; 
  }
  100% {
      width: 75%; 
  }
}

@keyframes inc75 {
  0% {
      width: 10%; 
  }
  100% {
      width: 75%; 
  }
}

.inner5{
width: 70%;
-webkit-animation: inc70 5s ease-out 1;
        animation: inc70 5s ease-out 1;
}

@-webkit-keyframes inc70 {
  0% {
      width: 10%; 
  }
  100% {
      width: 70%; 
  }
}

@keyframes inc70 {
  0% {
      width: 10%; 
  }
  100% {
      width: 70%; 
  }
}

.inner6{
width: 60%;
-webkit-animation: inc60 5s ease-out 1;
        animation: inc60 5s ease-out 1;
}

@-webkit-keyframes inc60 {
  0% {
      width: 10%; 
  }
  100% {
      width: 60%; 
  }
}

@keyframes inc60 {
  0% {
      width: 10%; 
  }
  100% {
      width: 60%; 
  }
}


/* ========= EXPERIENCE ========= */

.job-study{
  width: 100%;
  /* height: 100vh; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 2rem;
}

.job, .study{
  width: 45%;
}

.job ul, .study ul{
  padding-left: 2rem;
  margin-left: 1rem;
  margin-top: 2rem;
  border-left: 1px solid #dcdcdc;
  
}

.job h3, .study h3{
  font-size: 2rem;
  margin: 0;
  padding: 0;
}

.job h4, .study h4{
  font-size: 1.3rem;
  margin: .5rem 0;
  padding: 0;
}

.year{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}


.package li{
  list-style-type: none;
  margin-bottom: 2rem;
  position: relative;
}

.inner-job i{
    font-size: 2rem;
    color: #E8505B;
    position: absolute;
    top: 0;
    left: -3.1rem;
}

.inner-job p{
  padding: .3rem 0;
  font-size: 1.1rem;
  color: grey;
}

/* ========= PORTFOLIO ========== */

.portfolio{
  background: url('./images/apple-bc.jpg') no-repeat 100% 100%;
  background-size: cover;
  width: 100%;
}

.bg-color{
  width: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 2rem 0;
}

.portfolio h1{
  padding: 0;
  margin: 0;
  font-size: 6rem;
  opacity: .2;
  color: white;
  -webkit-transform: translateY(30px);
      -ms-transform: translateY(30px);
          transform: translateY(30px);
  z-index: -1;
}



.portfolio-wrap, .projects-wrap{
max-width: 75%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
/* justify-content: space-between; */
}

.projects-wrap{
  margin: 3rem 0;
}


.gallery{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-between;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
	margin-top: 2rem;
	margin-bottom: 1rem;
}

figure{
  margin: 0 0 1rem 0;
  padding: 0;
  width: 32%;
	display: block;
	-webkit-transition: -webkit-transform .5s;
	transition: -webkit-transform .5s;
	-o-transition: transform .5s;
	transition: transform .5s;
	transition: transform .5s, -webkit-transform .5s;
  position: relative;
  border-radius: 20px;
  /* background-color: black; */
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5 ); */
}


figure:hover{
	-webkit-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	        transform: scale(1.1);
  z-index: 100;
  -webkit-filter: none;
          filter: none;
}

figure img{
  width: 100%;
  height: 260px;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5), 0 2px 4px 0 rgba(0, 0, 0, 0.5 );
          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5), 0 2px 4px 0 rgba(0, 0, 0, 0.5 );
}




figcaption{
	text-align: center;
	color: #ffffff;
	padding: 10px;
  font-size: 1rem;
  background-color: #7b4397;
  border-radius: 5px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.view-more {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.view-more button{
  background: none;
  border: 1px solid #fff;
  color: #fff;
  border-radius: 10px;
  font-size: 1.2rem;
  padding: .5rem;
  width: 160px;
  height: 50px;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.view-more button:hover{
  -webkit-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
          transform: translateY(-10px);
  cursor: pointer;
}

/* ========= CONTACT ========== */

.contact-info{
  margin: 2rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}


.contact-details{
  -webkit-box-flex: 1;
      -ms-flex: 1 2 30%;
          flex: 1 2 30%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  padding: 1.5rem;
  border-radius: 15px;
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.2 );
          box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.2 );
}

.contact-details img{
  width: 100%;
  border-radius: 15px;
}

.contact-details p{
  font-size: 1rem;
  color: grey;
  line-height: 1.5;
  letter-spacing: .3px;
}


.icons{
  margin-top: 1rem;
}

.icons a{
  color: #E8505B;
  padding: 1rem;
  font-size: 1.3rem;
}

.contact-details h4{
  margin: 1rem 0 0.2rem 0;
  font-size: 1.3rem;
}

.contact-form{
  -webkit-box-flex: 2;
      -ms-flex: 2 1 50%;
          flex: 2 1 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin: 0 0 0 2rem;
  /* justify-content: center; */
  /* border: 1px solid red; */
}

.form-wrap{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.form-wrap h3{
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 2rem;
  color: #E8505B;
  padding: 0;
  margin: 0 0 1rem 0;
}


.inquire{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	    -ms-flex-direction:column;
	        flex-direction:column;
}

.form-name, .form-message{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	    -ms-flex-direction:column;
	        flex-direction:column;
}

.form-name input[type="text"]{
width: 600px;
height: 50px;
padding: 4px;
margin-bottom: 1rem;
border: 1px solid #7b4397;
border-radius: 7px;
}
.form-message input[type="textarea"]{
	width: 600px;
	height: 130px;
	margin-bottom: 1rem;
  padding: 4px;
  border: 1px solid #7b4397;
  border-radius: 7px;
}


.form-message input[type="submit"] {
background: -webkit-gradient(linear, left top, right top, from(#7b4397), to(#dc2430));
background: -o-linear-gradient(left, #7b4397 0%, #dc2430 100%);
background: linear-gradient(90deg, #7b4397 0%, #dc2430 100%);
color:white;
width:600px;
height:50px;
border: none;
font-size: 1.2rem;
font-weight: bold;
border-radius: 7px;

-webkit-transition:all 1s linear;

-o-transition:all 1s linear;

transition:all 1s linear;
}

.form-message input[type="submit"]:hover{
  background: #7b4397;
  -webkit-transform: translateY(-5px);
      -ms-transform: translateY(-5px);
          transform: translateY(-5px);
}

.map{
  margin-top: 2rem;
}

.map iframe{
  border-radius: 10px;
  width:600px;
  height:200px;
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.2 );
          box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.2 );
}


/* ======== PROJECT PAGE ======= */

.project-intro{
  width: 100%;
  background: url('./images/portfolio-bc.jpg') center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  /* position: relative;
  overscroll-behavior: contain; */
}

.project-intro h1{
  font-family: "Kaushan Script", cursive;
  font-weight: 400;
  font-size: 8rem;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: capitalize;
}

.project-intro p{
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.project-intro-wrap{
  width: 80%;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.sticky{
  position: fixed;
  top: 5px;
  z-index: 1;
}


.project-links{
  background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
}


.project-links ul{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.project-links li{
  margin: .5rem;
  padding: .75rem;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #7b4397;
  border-radius: 5px;
  -webkit-box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.project-links a{
  text-decoration: none;
  cursor: pointer;
}


.project-links h2{
  font-size: 1.5rem;
  margin: 0;
  cursor: pointer;
}


#my{
  background: -webkit-linear-gradient(270deg, #7b4397 0%, #dc2430 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 1rem;
  -webkit-animation: move1 2s ease-out;
          animation: move1 2s ease-out;  
}

@-webkit-keyframes move1{
0%{
  opacity: 0;
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
}
100%{
  opacity: 1;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}
}

@keyframes move1{
0%{
  opacity: 0;
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
}
100%{
  opacity: 1;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}
}

#portfolio{
  background: -webkit-linear-gradient(270deg, #7b4397 0%, #dc2430 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 1rem;
  -webkit-animation: move2 2s ease-out;
          animation: move2 2s ease-out;  
}

@-webkit-keyframes move2{
0%{
opacity: 0;
-webkit-transform: translateX(300px);
        transform: translateX(300px);
}

100%{
opacity: 1;
-webkit-transform: translateX(0px);
        transform: translateX(0px);
}
}

@keyframes move2{
0%{
opacity: 0;
-webkit-transform: translateX(300px);
        transform: translateX(300px);
}

100%{
opacity: 1;
-webkit-transform: translateX(0px);
        transform: translateX(0px);
}
}

.websites, .logos, .illustration, .graphics, .ux-design{
  width: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.logos-wrap, .illustration-wrap, .graphics-wrap, .ux-wrap{
  margin: 3rem 0;
  max-width: 75%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.logo-gallery, .illustration-gallery{
  margin: 3rem 0;
}

.rectagle-wrap{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.main-rectangle{
  margin: 1rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
}

.horizontal:nth-child(1){
  position: absolute;
  top: 10%;
  border-top: 2px solid #7b4397;
  width: 85%;
  -webkit-animation: line1 6s ease-out 1s alternate infinite;
          animation: line1 6s ease-out 1s alternate infinite;
}

.horizontal:nth-child(3){
  position: absolute;
  bottom: 10%;
  border-top: 2px solid #7b4397;
  width: 85%;
  -webkit-animation: line1 6s ease-out 1s alternate infinite;
          animation: line1 6s ease-out 1s alternate infinite;
}

.vertical{
  width: 0;
  height: 45vh;
  border-right: 2px solid #7b4397;
  -webkit-animation: line2 6s ease-out 1s alternate infinite;
          animation: line2 6s ease-out 1s alternate infinite;
}

@-webkit-keyframes line1{
  0%{
    width: 0;
  }
  100%{
    width: 85%;
  }
}

@keyframes line1{
  0%{
    width: 0;
  }
  100%{
    width: 85%;
  }
}

@-webkit-keyframes line2{
  0%{
    height: 0;
  }
  100%{
    height: 45vh;
  }
}

@keyframes line2{
  0%{
    height: 0;
  }
  100%{
    height: 45vh;
  }
}

.rectagle-wrap{
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.sub-rectangle{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 25%;
  min-height: 45vh;
}



.sub-rectangle img{
  width: 90%;
  height: auto;
}


.main-animation{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* align-content: space-between; */
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.sub-animation{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 1rem 0 2rem;
}


.sub-animation:nth-child(odd) img{
  /* flex: 1; */
  width: 30%;
  height: auto;
  -webkit-animation: ani1 3s ease-out;
          animation: ani1 3s ease-out;
}
.sub-animation:nth-child(even) img{
  /* flex: 2; */
  width: 50%;
  height: auto;
  -webkit-animation: ani2 3s ease-out;
          animation: ani2 3s ease-out;
}

/* .sub-animation img{
  width: 30%;
  height: auto;
} */

.ani-text{
  width: 40%;
  padding: 2rem;
  border-radius: 15px;
  border: 2px dashed #E8505B;
}

.ani-text h3{
  margin: 2px 0 15px;
  color: #E8505B;
}

.ani-text p{
  font-size: 1.2rem;
  color: grey;
}

@-webkit-keyframes ani1{
  0%{
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  100%{
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes ani1{
  0%{
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  100%{
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@-webkit-keyframes ani2{
  0%{
    opacity: 0;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
  100%{
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes ani2{
  0%{
    opacity: 0;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
  100%{
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

/* graphic design */

.graphic-gallery{
  /* display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
   */
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, 350px);
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
  -webkit-column-gap: 5px;
     -moz-column-gap: 5px;
          column-gap: 5px;
  row-gap: 5px;
  margin: 3rem 0;
}

.drawings{
  /* display: flex;
  align-items: center;
  justify-content: center;
  width: 24%;
  min-height: 45vh;
  border: 1px solid #7b4397;
  margin-bottom: 1rem; */
  overflow: hidden;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1;
  grid-template-columns: 1;
  -ms-grid-rows: 1;
  grid-template-rows: 1;
  /* border-radius: 10px; */
}

.drawings > *:nth-child(1){
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.item1{
  -ms-grid-column-span: 2;
  grid-column: span 2;
  -ms-grid-row-span:2;
  grid-row:span 2;
}
.item2{
  -ms-grid-column-span: 2;
  grid-column: span 2;
  -ms-grid-row-span: 2;
  grid-row: span 2;
}

.item3{
  -ms-grid-column-span: 1;
  grid-column: span 1;
  -ms-grid-row-span: 3;
  grid-row: span 3;
}

.item4{
  -ms-grid-column-span: 2;
  grid-column: span 2;
  -ms-grid-row-span: 2;
  grid-row: span 2;
}

.item5{
  -ms-grid-column-span: 1;
  grid-column: span 1;
  -ms-grid-row-span: 1;
  grid-row: span 1;
}

.item6{
  -ms-grid-column-span: 1;
  grid-column: span 1;
  -ms-grid-row-span: 1;
  grid-row: span 1;
}

.item7{
  -ms-grid-column-span: 1;
  grid-column: span 1;
  -ms-grid-row-span: 2;
  grid-row: span 2;
}

.item8{
  -ms-grid-column-span: 1;
  grid-column: span 1;
  -ms-grid-row-span: 1;
  grid-row: span 1;
}

.item9{
  -ms-grid-column-span: 1;
  grid-column: span 1;
  -ms-grid-row-span: 1;
  grid-row: span 1;
}

.item10{
  -ms-grid-column-span: 1;
  grid-column: span 1;
  -ms-grid-row-span: 1;
  grid-row: span 1;
}

.drawings img{
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.item__overlay {
  background: rgba(0, 0, 0, 0.4);
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  position: relative;
  display: -ms-grid;
  display: grid;
  justify-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: 0.5s linear;
  -o-transition: 0.5s linear;
  transition: 0.5s linear;
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
}

.item__overlay button {
  background: none;
  border: none;
  /* border-radius: 5px; */
  font-size: 2.5rem;
  color: white;
  text-transform: uppercase;
  /* background: rgba(0, 0, 0, 0.8); */
  padding: 15px;
}

.drawings:hover .item__overlay {
  -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
          transform: translateY(0px);
}


/* overlay */
.overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  overflow-y: scroll;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  z-index: 2;
}

.overlay.open {
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
}

.overlay-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: white;
  width: 700px;
  padding: 20px;
}

.overlay-inner button{
  -ms-flex-item-align: end;
      align-self: flex-end;
  background: none;
  border: none;
  font-size: 1.5rem;
  padding-bottom: .5rem;
}

.overlay img {
  width: 100%;
}

/* ====== UX Design ======= */

.ux-projects{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 2rem 0;
}

.ux-projects p{
  color: grey;
  font-size: 1rem;
}

.ux-projects h2{
  font-size: 2rem;
}

.ux-projects h3{
  color: #E8505B;
  font-size: 1.2rem;
  padding: 0;
  margin: 15px 0 5px;
}

.ux-done{
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ux-image{
  width: 40%;
  height: 90vh;
  /* border: 1.5px solid #7b4397; */
  padding: 5px;
  border-radius: 15px;
  -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5), 0 4px 4px 0 rgba(0, 0, 0, 0.5 );
          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5), 0 4px 4px 0 rgba(0, 0, 0, 0.5 );
}

.ux-image img{
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
}

.ux-details{
  width: 50%;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  padding-left: 1rem;
}

.ux-des{
  margin-top: 3rem;
}

/* ======= FOOTER ======= */

footer{
  background: #dc2430;
  color: #ffffff;
  margin-top: 2rem;
  text-align: center;
  padding: 1rem;
  width: 100%;
}


/* ====== MEDIA QUERIES ======= */

@media only screen and (max-width: 1200px){

  p{
    font-size: 1rem;
  }

  h2{
    font-size: 2rem;
    font-weight: 400;
  }
  
  h3{
    font-size: 1.3rem;
  }

  .headings{
    font-size: 5.5rem;
  }

  .portfolio-head h1{
    font-size: 5.5rem;
  }

  .name h1{
    font-size: 6.5rem;
    letter-spacing: -2px;
  }

  .name p{
    padding-top: 1.7rem;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.about-link button{
    padding: 12px 17px;
    margin: 1rem 0;
    font-size: 1.1rem;
}

.move-down{
    font-size: 1.5rem;
}

#hello{
  width: 90px;
  height: 90px;
  font-size: 1.3rem;
}

#i-am{
  width: 60px;
  height: 60px;
  font-size: 1.3rem;
  -webkit-transform: translate(30px, -30px);
      -ms-transform: translate(30px, -30px);
          transform: translate(30px, -30px);
}

.project-icon div{
  width: 50px;
  height: 50px;
  padding: 12px;
}

.box {
  width: 8px;
  height: 8px;
  margin: 1px 1px;
}

/* about */

.about-wrap{
  width: 80%;
}


.details{
  width: 50%;
}




/* skills */

.skills-sub-wrap, .skills-set-wrap, .portfolio-wrap, .projects-wrap, .job-study-wrap, .contact-wrap{
  width: 78%;
}

/* tools */

.tools-name h4, p{
  font-size: 1.1rem;
}

/* projects */

figure{
  margin: 0 0 2.5rem 0;
  width: 49%;
}

figure img{
  height: 260px;
}


/* experience */


/* contact */


.contact-form{
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.form-name input[type="text"],
.form-message input[type="textarea"],
.form-message input[type="submit"] {
  width:460px;
  }
  
  .map iframe{
    width:460px;
  }


  /* portfolio */
  .project-main h1{
    font-size: 6.5rem;
  }

  .project-links ul{
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

  .project-links h2{
    font-size: 1.2rem;
  }

  .sub-rectangle{
    width: 31%;
  }
  .graphic-gallery{
    grid-template-columns: repeat(auto-fill, 250px);
    grid-auto-rows: 180px;
  }

  .ux-done{
    width: 100%;
    margin: 2rem 0;
  }

}


@media only screen and (max-width: 900px){

  h3{
    font-size: 1.2rem;
    margin: 0 .5rem;
  }
  /* navigation */
  .flex-nav{
    padding: 1rem .5rem;
  }

  /* details */
  .details{
    width: 100%;
  }

  .about-image{
    width: 100%;
  }

  /* skill-set */


  .skills div{
    width: 48%;
    margin: 1rem 0;
    padding: 1.3rem;
  }

  .skills i{
    font-size: 2rem;
    color: #E8505B;
  }

  .skills p{
    margin-top: .5rem;
  }


  /* tools and experience */
  .development, .designing, .job, .study{
    width: 100%;
  }

  /* projects */

  .gallery{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
  }
  figure{
    width: 80%;
  }
  
  figure img{
    height: 300px;
  }
  

  /* contact */

  .form-wrap{
    margin-top: 4rem;
  }
  .contact-form{
    margin: 0;
  }


    /* portfolio */

    .project-links{
      width: 80%;
    }

    .project-links li{
      margin: .2rem;
      padding: .5rem;
    }

    .graphic-gallery{
      display: -ms-grid;
      display: grid;
      grid-template-columns: repeat(auto-fill, 230px);
      grid-auto-rows: 120px;
    }
    
    .sub-animation:nth-child(odd) img{
      width: 50%;
    }
    .sub-animation:nth-child(even) img{
      width: 50%;
    }

    .ani-text{
      width: 60%;
      padding: .5rem;
    }

}

@media only screen and (max-width: 650px){


  h2, .portfolio-head h2{
    font-size: 1.7rem;
  }

  p{
    font-size: .9rem;
  }


  .intro img{
    max-width: 60%;
    padding: 5px;
  }

  .name h1{
    font-size: 6rem;
  }

  .project-intro-wrap{
    width: 70%;
  }
  
  .hello-blocks{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .headings, .portfolio-head h1{
    padding-bottom: .7rem;
    font-size: 4rem;
  }


    /* about */

    .about{
      padding: 0 2rem;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }

    .resume-buttons button{
      padding: 10px 15px;
      font-size: 1.1rem;
  }

  /* services */
.skills-sub-wrap, .skills-set-wrap, .portfolio-wrap, .job-study-wrap, .contact-wrap{
    width: 80%;
    padding: 0 2rem;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }


  figure img{
    height: 220px;
  }

  .skills div{
    width: 100%;
  }

  /* wraps */
  


  /* tools and experience */
  .development, .designing, .job, .study{
    width: 100%;
  }

  .job h3, .study h3{
    font-size: 1.2rem;
  }

  .inner-job p{
    font-size: .9rem;
  }
  
  .job h4, .study h4{
    font-size: 1rem;
  }

  /* projects */
  figure{
    width: 100%;
  }
  
/* contact */

.contact-info{
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.contact-form{
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.form-name input[type="text"],
.form-message input[type="textarea"],
.form-message input[type="submit"] {
  width:400px;
  }
  
  .map iframe{
    width:400px;
  }

  .form-wrap h3{
    font-size: 1.5rem;
  }



  /* portfolio */

  .projects-wrap, .logos-wrap, .illustration-wrap, .graphics-wrap, .ux-wrap{
    max-width: 80%;
    padding: 0 2rem;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .project-main h1{
    font-size: 5.5rem;
  }

  .project-links h2{
    font-size: .9rem;
  }


  .logo-gallery, .illustration-gallery{
    margin: 1rem 0;
  }

  .sub-rectangle{
    width: 70%;
    min-height: auto;
  }

  .horizontal:nth-child(1){
    border-top: none;
    -webkit-animation: none;
            animation: none;
  }
  
  .horizontal:nth-child(3){
    border-top: none;
    -webkit-animation: none;
            animation: none;
  }
  
  .vertical{
    border-right: none;
    -webkit-animation: none;
            animation: none;
    height: 5vh;
  }

  .sub-animation{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
    text-align: center;
  }

  .sub-animation:nth-child(odd) img{
    width: 60%;
    padding-bottom: 1rem;
  }
  .sub-animation:nth-child(even) img{
    width: 100%;
    padding-bottom: 1rem;
  }
  .sub-animation:nth-child(even){
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }

  .ani-text{
    width: 90%;
    padding: .75rem;
  }
  
  .ani-text h3{
    font-size: 1.3rem;
  }
  
  .ani-text p{
    font-size: 1.1rem;
  }

  /* overlay images */
  .overlay-inner {
    width: 400px;
    padding: 7px;
  }

  /* ux-design */
  .ux-done{
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  
  .ux-image{
    width: 40%;
    height: 60vh;
  }
  
  .ux-details{
    width: 60%;
    padding-left: .7rem;
  }

  .ux-projects{
    margin: 1rem 0;
  }
  
  .ux-projects p{
    font-size: 1rem;
  }
  
  .ux-projects h2{
    font-size: 1.5rem;
  }
  
  .ux-projects h3{
    font-size: 1.1rem;
  }
  
}

@media only screen and (max-width: 450px){



  .hello-blocks{
    padding: 0 0 0 1rem;
  }

  #hello{
    width: 80px;
    height: 80px;
    font-size: 1.1rem;
  }
  
  #i-am{
    width: 50px;
    height: 50px;
    font-size: 1.1rem;
    -webkit-transform: translate(30px, -30px);
        -ms-transform: translate(30px, -30px);
            transform: translate(30px, -30px);
  }
  
  .name h1{
    font-size: 5.2rem;
  }

  .name p{
    padding-top: 1.7rem;
    font-size: 1.1rem;
    letter-spacing: 1.5px;
}

/* about */
.about-wrap{
  width: 95%;
  padding-left: 2rem;
}

/* skills */
.skills-sub-wrap, .skills-set-wrap, .portfolio-wrap, .projects-wrap, .job-study-wrap, .contact-wrap{
  margin-left: 2rem;
  width: 90%;
}


.portfolio-wrap{
  padding: 0;
}


/* contact */

.contact-form{
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.form-name input[type="text"],
.form-message input[type="textarea"],
.form-message input[type="submit"] {
  width:320px;
  }
  
  .map iframe{
    width:320px;
  }


  /* portfolio */
  .projects-wrap, .logos-wrap, .illustration-wrap, .graphics-wrap, .ux-wrap{
    max-width: 90%;
    padding-left: 2rem;
    margin-left: 1.5rem;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }

  .ux-projects h2{
    font-size: 1.4rem;
  }
  

}