body {
    font-family:'Bitter', Times, serif;
    color: #1a1b1f;
    font-size: 16px;
    line-height: 28px;
    font-weight: 400;
    margin: 0;
    background-color: #121114;/* #131319; */

  }
 
.hero-container{
  /*display: flex;
  flex-direction: column;*/

border-radius: 12px;
background: #292A2E;

}
.hero-text{
  width: 100%;

display: flex;

justify-content: space-around;
padding-top: 80px ;

padding-left: 16px;

}
.hero-links{
  display: flex;
  flex-direction: row;
  padding-left: 32px;
  padding-right: 32px;
}

.hero-image{
  width: 100%;

}
  #about-page{
    background-color: #FAF0E3; 
    color: #1a1b1f !important;
    
  }
  #about-maincontainer{
    display: flex;
    flex-direction: column;
   align-items: center;
  }
  #about-page p, #about-page h4 {
    color: #1a1b1f ;
  }
  #section-0 {
   height: 100%;
    align-items: center;
  }
  marquee{
    height: 10%;
    position: absolute;
  }
  .section-02-text h4{

    color: #BFBFBF;
    padding-left: 64px;
  }
  
#animated-text{
  display: flex;
  flex-direction: column;
  gap:32px;
}
  .preloader-wrap {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0; 
    bottom: 0;
    background: rgba(0,0,0,1);
    z-index : 2; 
  }
  
  .percentage{
color: #E5B66B;
font-weight: 400;
font-size: 32px;
position: absolute;
  bottom: 120px;
  right: 120px;
  }
  
 
  
  
  @keyframes animation {
    10% {
      opacity: 0.9;
    }
    30% {
      opacity: 0.86;
    }
    60% {
      opacity: 0.8;
    }
    80% {
      opacity: 0.75;
    }
  }





  h2{

font-size: 40px;
font-family: Gabriela;
font-style: normal;
font-weight: 400;
line-height: 52px;
  }
  h3{

/* Heading / X Large (36\44) */
font-size: 36px;
font-family: Bitter;
font-style: normal;
font-weight: 500;
line-height: 44px;
margin: 0 ;
  }

h4{
  color:#BFBFBF;
font-weight: 400;
font-size: 32px;
margin:2px;
}
h5{
  color: #e5b66b;
/* Heading/X Small (20\28) */
font-size: 20px;
font-family: Bitter;
font-style: normal;
font-weight: 500;
line-height: 28px;
margin:0px;
}

h6{

font-weight: 400;
font-size: 18px;
margin:2px;
}
/* 1 {
  font-family:'iceberg';
    margin-top: 16px;
    margin-bottom: 15px;
    font-size: 44px;
    line-height: 62px;
    font-weight: 400;
  }
  
  h2 {
    font-family:'iceberg';
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 36px;
    line-height: 50px;
    font-weight: 400;
  }
  
  h3 {
    font-family:'iceberg';
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 30px;
    line-height: 46px;
    font-weight: 400;
  }
  
  h4 {
    font-family:'iceberg';
    font-family:'iceberg';
    margin-top: 8px;
    margin-bottom: 10px;
    font-size: 24px;
    line-height: 38px;
    font-weight: 400;
  }
  
  h5 {
    font-family:'iceberg';
    margin-top: 8px;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 34px;
    font-weight: 500;
  }
  
  h6 {
    margin-top: 8px;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
  } */
  
  p {
    margin: 4px 0px;
    font-size: 16px;
  }
   a{
    text-decoration: none;
   }
   .summary-header .helper-text, .image-title-footer p,.margin{
    color: #BFBFBF;
   }
.margin{
  margin: 0 24px;
}
  #the-product,.summary-header,.image-title-footer,#evaluating ,#userstory,#userflow,
  #paper-sketch,#wireframes,#test,#rectangle,.footer-left,  .active-project-section-title
  {
    padding: 16px 24px ;  
  }

 .button{
  display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 12px;
background: #730073;
padding: 8px;
margin:16px 0px;
  }
/* page navigation*/


#navigation-bar{

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

 .sticky {
  position: sticky;
 z-index: 3;
 right:0;
  top: 0;
  left: 0;
  background-color:#515255
}
#content{
  padding-top: 4vh;
}


.show_sidebar{
top:0;
position: fixed;
left: 0;
overflow-x: hidden;

transition: 0.5s;
background-color: #131319;
height: 100% !important;
display: flex !important;
flex-direction: column;
gap: 64px;
width: 100% !important;
z-index: 999999;
left: 0px !important;
}
.side .top,#side-socials{
  padding: 60px !important;
}
#side-socials a{
  padding-left: 16px;
}
.hide_sidebar{
  display:none;
 }
.side{
  width: 0;
  height: 0;
position: fixed;
left: -1020px;
}
#open{
  display: block;
  color:#ffffff;
}
.close-icon{
 left: 64px;;
  top:0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 24px 64px 24px 64px;;

}


.links {

display: flex;
flex-direction: column;
gap:16px;

}

.links a,#side-socials a,.close-icon{
  color: #FFFFFF !important;
}

/* end of top menu navigation*/


#resume-container{
width: 100%; 
height: 100%;
 padding-bottom: 2px; 
 justify-content: center; 
 align-items: center;
  display: inline-flex;
}

#resume-circle{
  width: 70px; 
  height: 70px; 
  top: 24px; 
  left:22px;
  position: absolute; 
  background: #BFBFBF; 
  border-radius: 9999px; 
}
.watch-circle{
  border-radius: 100px;
}
.resume-text:hover{
  color:#9091D8;
}
#resume-circle:hover, .watch-circle:hover{
  background: #E5B66B

}
.view-icon{
  fill:#ffff;
}
.view-icon:hover{
 fill:#E5B66B
}
.resume-icon{
  stroke:#292A2E;
}
.resume-icon:hover, .watch-circle:hover{
  stroke: #ffff;
}
.header-top-img{
  border-radius: 32px;
 /* width: -webkit-fill-available;*/
}

  /*project start*/
.main-container{
    position:relative;
    margin-bottom: 24px;
  }
  #hero-top {
    position: relative;
  }
  .row{
    display: flex;
    gap: 16px;
    flex-direction: row;
    width: -webkit-fill-available;
  }
  .row-links, .hero-socials{
    display: flex;
    flex-direction: row;
    gap: 32px;
  }
  .hero-socials{
    width: 33.3%;
    align-items: center;
    justify-content: center;
  }
  .column{
    display: flex;
    flex-direction: column;
    width: -webkit-fill-available;
  }
   /*start of projectheader*/

 
   .project-overview-header{
    background: #ffc65c0f;
   }
   
   .header-top{
    border-radius: 12px;
    border: 1px solid #000;
   
   }
  .project-overview-header, .header-top{
  
    /*height: 252px;*/
    left: 0px;
    width:-webkit-fill-available;

    font-style: normal;
    font-weight: 500;
    /*padding:24px;*/
    display:flex;
    justify-content: center;
    flex-direction: column;
    }
    .heading-mobile{
    font-size: 24px;
    line-height: 32px;
    }
    .sub-text{
    color:#808089;
    font-size: 12px;
    line-height: 16px;
    }
  
    /*start of project menu*/
  .project-menu{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
    z-index: 1;
    padding:16px 0px 24px 24px;
    margin: 16px 0px;
    background-color: #fff;
    position: fixed;
    right: 0;
  }
  .scroll{
  
  /*width: 50%;
  height: 40px;*/
  left: 25px;
  top: 9px;
  overflow-x: scroll;
  
  }
  .hide_menu{
    display: none;
  }
  /* Auto layout scroll content */
  
  .scroll-content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
 /* width: 458px;*/
  padding: 8px;
  left: 0px;
  top: 0px;
  
  }
  .scroll-content a{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  color:#808089;
  }

    
  .active-project-section-title{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
 .project-section-title{
    padding:8px 16px;
    background: #E5DBD3;
    border-radius: 25px 0px 0px 25px;
  width: 23%;

   }
   .active-project-section-title{
    background-color: #E5B66B;
   }
   .active-project-section-title .content {
    text-transform: uppercase;
    font-weight: 700;
    color: #242529;
    font-family: 'Iceberg'!important;
   }
   .stickyProj {
    position: fixed;
    z-index: 2;
    width: 100%;
    top: 70px;
    background-color: #fff !important;
  }
/*end of project menu*/
  
  /*project*/

  html {
    scroll-behavior: smooth;
  }
  .proj-container{
    margin: 24px 0px ;

 
  }
.image-container ul, .project-title-heading-container, .image-container  {
  color:#BFBFBF;

}
  .project-title-heading-container{
    display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;

  height: 62px;

  background: #242529;
  box-shadow: -18px 0px 0px -17px rgba(0, 0, 0, 0.06);
  
  }
  .summary-text{
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .project-title-heading-container, .summary-text{
    padding: 16px  0px  ;
    color:#BFBFBF;
  
  }
 
  .tools{
 display: flex;
flex-direction: row;
align-items: flex-start;
padding: 8px 16px;
gap:24px;
  }
  .tool-group{
    display: flex;
flex-direction: row;
gap: 8px; 
align-items:center;
color: #BFBFBF;
  }


 .the-product-card{
 display: flex;
flex-direction: column;
align-items: flex-start;
padding: 24px;
background: #FFFFFF;

left: 16px;
top: 1130px;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
border-radius: 16px;
 }

 .the-product-card p, .the-product-card h4, #evaluating p, #evaluating h4,#usability-test h4, #usability-test p,#usability-test ul, 
 #take-away h4, #take-away p, #take-away ul, #other-project ul, #footer-card p{
 color: #1a1b1f;
 }
 .helper-text{
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
 }
 .image-title-footer p{
    text-transform: uppercase;  
 }
 .summary-header h4{
    font-weight: 500;
    font-size: 28px;
text-transform: uppercase; 
}
.summary-header p,.summary-header h4{
margin-top: 0px;
}
#quotes{
  margin:16px 0px;   
}

.image-container{
    /* background: #EEEEEE; */
 display: flex;
flex-direction:column;

gap: 4px;
}

#image-summary{
    padding: 16px  32px  ;
  }
#evaluating,#usability-test, #take-away{
    background: #EEEEEE;  
}

#other-project{
  padding-top: 64px;
  padding-bottom: 64px;
  color: #BFBFBF;
}
.space-btwn{
  gap: 32px;
  
}
.highfi-gif{
  max-height: 600px;
} 
  /*end of project*/




/*start of footer*/
.col-12 {
  display: flex;
  flex-direction: row;
  /*justify-content: space-between;*/
gap:16px;
  padding-top: 16px ;
  padding-bottom: 16px ;
}


.w-col-6, .w-col-4, .w-col-3, .socials{
  display: flex;
  flex-direction: column;
  padding-top: 16px ;
  padding-bottom: 16px ;
}
 .socials{
  gap:24px;
}
.w-col-8{
  width:75%;
}
.w-col-6{
  width:50%; 
}
.w-col-4{
  width:33.3%;
  
 
}
.w-col-3{
  width:25%;

}

.nav-links{
  display: none;
}

.pry-icon{
 color: #E5B66B;
 font-size: 24px;
}
.sec-icon{
 color: #131319;
 font-size: 24px;
}
.pry-button{
  border: 0px;
  padding: 14px 16px;
  background: #E5B66B;
  color: #131319 !important;
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  max-width: 200px;
  text-align: center;
}
.pry-button:hover {
  background-color: transparent;
  border: solid #E5B66B;
  color: #E5B66B !important;
  transition: background-color 400ms ease, opacity 400ms ease, color 400ms ease;
}


.sec-button{
display: flex;
  text-align: center;
  border: 0px;
  padding: 14px 16px;
  background: #ffffff;
  color: #131319 !important;
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  width: 300px;
}
.sec-button:hover{
  border: 2px solid #ffffff;
  color: #ffffff !important;;
  background: transparent;
}
.sec-button:hover .sec-icon{
  color: #ffffff !important;; 
}
.tetairy-button{
  display: flex;
  text-align: center;
  border: 0px;
  padding: 14px 16px;
  color: #E5B66B;
  background:#131319;
  justify-content: center;
}
.tetairy-button:hover{
  border:2px solid #131319;
  background: transparent;
  color: #131319;
}
.sec-button label{
  display: flex;
    width: 95%;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.titles{
font-family: 'Gabriela';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 40px;
color: #FFFFFF;
margin: 2px;;
}
.nav-links a, .useful-links a, #footer-section i{
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: #BFBFBF; 
}
 a{
  color: #fff;

}
a:active, .active , .links a:active{
  color: #E5B66B !important;
  font-weight: 700;
  text-decoration: underline #E5B66B;
  text-transform: uppercase !important;
}
a:focus, a:hover{
  color: #E5B66B;
}
.centre{
  justify-content: center;
  align-items: center;
 }
 .end{
  align-items: flex-end;
}


.logo{
width: 100%;
max-width: 200px;
}



#hero-card{
  border-radius:32px;
  margin: 0px 16px;
}
#card-img{
  display: block;
  width: 100%;
  max-height: 450px;
}
#desktop-card-img{
  display:none;
  
}
#hero-content{
position: absolute;
top: 16px;
padding:16px ;
height:-webkit-fill-available;
width: -webkit-fill-available;

}

#hero-headline{
  font-family: Gabriela;
  font-size: 24px;
  font-weight: 400;

  letter-spacing: 0px;
  text-align: left;
  color: #ffffff;
  
  }
  #hero-content p {
  font-family: Bitter;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  margin: 0px;
  /* identical to box height, or 156% */
  
  color: #BFBFBF;
}
#hero-card .socials{
  align-items: center;
}
#hero-card #resume{
  width: 120px;
 }


#hero-bottom{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px 0px 32px;
  gap: 16px;
}
#values h3{
 color: #BFBFBF;
}
#category-scroll{
display: flex;
width: 75%;
gap: 8px;
align-items: center;
overflow-x: scroll;
padding: 16px 0px;
/* Inside auto layout */

order: 1;
flex-grow: 0;
}
.catg-card{
background: radial-gradient(111.99% 111.99% at 50% 0%, #121314 0%, #292A2E 100%);
border-radius: 12px;
padding: 16px;

}
.card-light{
  background: linear-gradient(180deg, #CCCCCC 0%, rgba(166, 166, 166, 0) 104.08%);
}
.catg-card h6{
  color: #BFBFBF;
}
.avatar{
position: absolute;
width: 116px;
height: 116px;
left: 80px;
top: -32px;
border-radius: 100%;
}
#hero-row-02{
  min-height: 332px;
  padding: 0 32px;;
}
.section-02{
  display:flex;
  justify-content: center;
  padding: 40px 0px;
  margin-bottom: 80px;
  position: relative;
}
.section-02 img{
  position: absolute;
  opacity:0.6 ;
  
}
.preloader-img{
    position: absolute;
    opacity: 0.2;
    height: 220px;
    width: 220px;
    
}

.preloader-wrap-img{
  position: absolute;
  opacity:0.2 ;
  top: -12px;
  padding-left: 200px;
}
.section-02-text p{

color: #BFBFBF;
font-size: 18px;
font-family: Bitter;
font-style: normal;
font-weight: 400;
line-height: 28px;
padding-left: 64px;
}
.section-02-text .display{
color: var(--primary-white, #FFF);
font-size: 44px;
font-family: Gabriela;
font-style: normal;
font-weight: 400;
line-height: 52px;


}


.section-03{

  padding: 120px 0px 40px 0px;
  position: relative;
}
.display{
  color: #FFF;
font-size: 96px;
font-family: Gabriela;
font-style: normal;
font-weight: 400;
line-height: 112px;
margin: 0;
}
#skills{
  min-height: 70vh;
  padding-top: 120px;
  padding-bottom: 120px;
}
#skills h2{
  font-size: 64px;

}

.section-03 .title-bg{
  position: absolute;
    top: 32px;
    left: -32px;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
#proj-01, #proj-03{
  animation: 1s ease-in 0s 1 slideInFromRight;
}
#proj-02{
  animation: 1s ease-out 0s 1 slideInFromLeft;
}
.projects{
  
  margin-top: 60px;
  margin-bottom: 60px;
  color: #BFBFBF;
}
.projects .heading{
  text-align: center;
  padding-left:24px;
  padding-right:24px;
  gap:4px;
  }
  .proj-content{
    justify-content: center;
    margin-top: 38px;
  }
  .projects .heading h3{
    color: #E5B66B;
  }
.mockup,.proj-bg-image{
  position: relative;
}
.proj-image-banner{
height: 208px;
  border-radius: 12px;
  
}
.proj-bg-image{
  width: 360px;
  justify-content: flex-end;
}

#img-positioning-proj{
  position: absolute;
left: 24px;
}
#img-txt{
  position: absolute;
right: 24px;
bottom:32px;
}

.proj-video{

height: 255px;
transform: rotate(-8.48deg);
position:absolute;
left: 26px;
top:16px;
}


.proj-summary{
  color: #BFBFBF;
  /*padding-left: 24px;
  padding-right: 24px;*/
justify-content: flex-end;
width: 360px;

}
.project-mockup-bgOverlay{
  position: absolute;
  border-radius: 12px;
  border: 1px solid #000;
  background: rgba(41, 42, 46, 0.70);
height: 208px;
width:360px;
}
.mockup-bgOverlay{
  position: absolute;
  border-radius: 32px;
  background: rgba(41, 42, 46, 0.70);
 height: 100%;
  width: 100%;
}










/*section04--starts-here--*/

.section-04-featured{
  position: relative;
 width: 836px;
height: 966px;
gap: 0px;
background: url('/assets/images/Topology-2.png') no-repeat;
}

.section-04 img{
  width: 232.841px;
  height: 494.151px; 
  opacity: 0.6000000238418579;
}


#rec-left{
  position: absolute;
  left:0px;
  top:95px;

  width: 400px;
height: 630.987px;
transform: rotate(347deg);
flex-shrink: 0;
border-radius: 12px;
background: radial-gradient(111.99% 111.99% at 50.00% 0.00%, #242529 0%, #242529 0.01%, rgba(57, 58, 64, 0.78) 100%);
}
#rec-centred{
  position: absolute;
  left:239px;
  top:95px;

  width: 400px;
  height: 630.987px;
  transform: rotate(-0.139deg);
  flex-shrink: 0;
  border-radius: 12px;
background: radial-gradient(111.99% 111.99% at 50.00% 0.00%, #242529 0%, #393A40 100%);
}
#rec-right{
  position: absolute;
  right:0px;
  top:95px;

  width: 400px;
  height: 630.987px;
  transform: rotate(13.808deg);
  flex-shrink: 0;
  border-radius: 12px;
  background: radial-gradient(111.99% 111.99% at 50.00% 0.00%, #242529 0%, #242529 0.01%, rgba(57, 58, 64, 0.78) 100%);
  }
  #left-video{
    position: absolute;
    left:56px;
    top:152px;
  transform: rotate(-11.88deg);
  opacity: 0.6000000238418579;
  }
#centred-video{
  position: absolute;
  top:142px;

width: 232.841px;
height: 494.151px;
opacity: 0.6000000238418579;
}

#right-video{
  position: absolute;
  right:46px;
  top:140px;

width: 232.841px;
height: 494.151px;
opacity: 0.6000000238418579;
transform: rotate(13.81deg);
}

.section-04 .card{
position: absolute;
width: 531px;
bottom: 300px;
border-radius: 12px;
color: #131319;
padding:24px ;
background: #ffffff9e;
display:flex;
flex-direction: column;
gap:32px;

}
/*====section-04 ---ends--here====*/
.section-05-animation{
  position: relative;
}
.section-05-animation img{
  max-width:743px;

}





/*======About page =====*/

header {
	display: grid;
	place-content: center;
	height: 90vh;
	height: 90dvh;
	margin-bottom: 10vh;
	margin-bottom: 10dvh;
	gap: 2.5vmin;

}
#philosophy{
  background-color: #EFECEA;
  padding-top: 64px;
  padding-bottom: 64px;
}


root {
	--card-height: 40vw;
	--card-margin: 4vw;
	--card-top-offset: 1em;
	--outline-width: 0px;
}

#about-page #cards {
	/* Make place at bottom, as items will slide to that position*/
	padding-bottom: calc(var(--numcards) * var(--card-top-offset));
	/* Don't include the --card-margin in padding, as that will affect the scroll-timeline*/
	margin-bottom: var(--card-margin);
  max-width: 650px;
}

#about-page  #card_1 {
	--index: 1;
}
#about-page 
#card_2 {
	--index: 2;
}

#about-page #card_3 {
	--index: 3;
}

#about-page #card_4 {
	--index: 4;
}

#about-page .card {
	position: sticky;
	top: 0;
	padding-top: calc(var(--index) * var(--card-top-offset));
}

#about-page .card__content {
	transform-origin: 50% 0%;
	will-change: transform;
}

#about-page  #cards {
	list-style: none;
	outline: calc(var(--outline-width) * 10) solid hotpink;

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(var(--numcards), var(--card-height));
	gap: var(--card-margin);
}

#about-page .card {
	outline: var(--outline-width) solid #E5B66B;
}

#about-page .card__content {
	box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1);
	background: rgb(255, 255, 255);
	color: rgb(10, 5, 7);
	border-radius: 1em;
	overflow: hidden;

	display: flex;
  flex-direction: column;


	align-items: stretch;
	outline: var(--outline-width) solid #E5B66B;;
}

#about-page .card__content > div {
	grid-area: text;
	width: 80%;
	place-self: center;
	text-align: left;

	display: grid;
	gap: 1em;
	place-items: start;
}

#about-page .card__content > figure {
	grid-area: img;
	overflow: hidden;
}

#about-page .card__content > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#about-page main{
  display: flex;
  justify-content: center;
  margin-bottom: -120px;

}
#about-page main h1 {
	font-weight: 300;
	font-size: 3.5em;
}

#about-page main h2 {
	font-weight: 300;
	font-size: 2.5em;
}

#about-page main p {
	font-family: sans-serif;
	font-weight: 300;
	line-height: 1.42;
}

#about-page main .btn {
	background: rgb(188 87 36);
	color: rgb(255 255 255);
	text-decoration: none;
	display: inline-block;
	padding: 0.5em;
	border-radius: 0.25em;
}
.aside-wrapper{
  background-color: #fff;
  padding-top: 120px;
  padding-bottom: 64px;
}
 aside {
	width: 60vw;
	margin: 0 auto;
	text-align: left;
}

aside p {
	margin-bottom: 1em;
}
#meet-me{
 padding: 24px;
background-color: #ffffffc2;
}
.fixedelement{
  max-width: 600px;
  opacity: 50%;
  }


.animate-on-scroll {
	opacity: 0;
	transform: translate(-300px, 0);
	transition: all 0.4s ease-out;
	transition-delay: 0.2s;
}

.animate-top-down {
	opacity: 0;
	transform: translate(0, -300px);
	transition: all 0.4s ease-out;
	transition-delay: 0.2s;
}

.animate {
	opacity: 1;
	transform: translate(0, 0);
}
.boxes {
	display: flex;
  flex-wrap: wrap;
  justify-content: center;
align-items: center;
width: 100%;

}

.box {
  padding: 16px;
	background-color: #fff;
	margin: 0px 16px;
  width: 250px;
  border-radius: 8px;
}
.box h5{
  color:#1a1b1f;
}
.box ul{
  list-style: square;
  color: #757575;
}
.box:nth-child(1){
  margin: 32px 0;
}
.box:nth-child(2) {
	transition-delay: 0.4s;
  background-color: #121114;

  
}
.box:nth-child(2) h5{
  color: #ffff;
}

.box:nth-child(3) {
	transition-delay: 0.6s;
  margin: 32px 0;
}
#goals{
  padding: 24px;
  background-color: #9596E0;
  border-radius: 4px;
}
#goals p{
  width:274px;
}
.interest-wrapper{
  display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 64px;
padding-top: 32px;
padding-bottom: 32px;
}
#hobbies ul{
  list-style: none;

}
#hobbies li{
  padding-bottom: 32px;
}
#hobbies img {
  padding-right: 8px;
}

#testimonials{

  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: scroll;
  padding: 16px 24px;


}
#testimonial-container{
  
  display: flex;
  flex-direction: row;
  gap: 16px;
}
/*testimonial section*/
#home-testimonial-section .display{
  font-size: 64px;
  line-height: 64px;
  margin: 32px;
  color: #E5B66B;

text-align: center;
}

#home-testimonial-section{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 120px 0;
}

#home-testimonial-container{
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px 0;
}
.home-testimonial-card{
  display: flex;
  padding: 16px;
  border-radius: 12px;
 flex-direction: column; 
 justify-content: flex-start; 
 min-height: 336px;

}



.testimonial-card-wrap{
  display: flex;
  flex-direction: row;
  gap:32px;
  justify-content: center;
}
.testimonial-card-wrap h4{
  color: #ffff;
}
.home-testimonial-card-right{
padding-left: 32px;
}
.home-testimonial-card-left{
  padding-right: 32px;
}
#home-testimonial-container .right{
  background:url('/assets/images/testimonial-bg-right.png') no-repeat;
 
}
#home-testimonial-container .left{
  background:url('/assets/images/testimonial-bg-left.png') no-repeat;  
}
.home-testimonial-card .row1{
  display: flex;
  flex-direction: row;
  gap:16px;
 max-width: 418px;
 padding-right: 16px ;

  }

.testimonials-card{
  display: flex;
padding: 24px 16px;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
border-radius: 12px;
background: #D9D9D9;
width: 450px;
}
.testimonials-card:nth-child(2){
  background: #EDA888;
}
.testimonials-card:nth-child(3){
background: #9091D8;
}
.testimonials-card:nth-child(4){
  background: #ffffff;
  }
  .testimonials-card:nth-child(5){
    background: #111117;
    }
   
.testimonials-card .row1{
display: flex;
flex-direction: row;
gap:16px;
}


.testimonials-card img,.home-testimonial-card img{
  width: 64px;
  height: 64px;
  border-radius: 100px;
}
#cert-scroll{

  overflow-x: scroll;

}
#cert-container{
  display: flex;
  flex-direction: row;
  gap: 16px;
}
#cert-container img{
  width: 90%;
}
#hobbies img{
  width: 64px;
}

/*====project page===*/
/* Three column layout */
.columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  width: 100%;
  max-width: 80em;
  margin: 0 auto;
  position: relative;
}
/* Shift entire column up, but not so much that it goes out of view */
.column-reverse {
	transform: translateY(calc(-100% + 100vh));
}
/* As we're about to shift content out of .columns, we need it to hide its overflow */
.columns {
	overflow-y: hidden;
}

/* Flip item order in reversed columns */
.column-reverse {
	flex-direction: column-reverse;
}
/* Inside one column, lay out all items in column direction */
.column {
  --column-offset: 10vh;
  display: flex;
  flex-direction: column;
  padding: var(--column-offset) 0;
}

/* Limit site of the images */
.column__item-imgwrap img {
  border-radius: 1em;
  width: 100%;
  height: auto;
  aspect-ratio: 0.75;
  object-fit: cover;
}

.column__item-caption {
  text-align: center;
  color: #BFBFBF;
}


/* Set up Animation */
@keyframes adjust-position {
	/* Start position: shift entire column up, but not so that it goes out of view */
	from {
		transform: translateY(calc(-100% + 100vh));
	}

	/* End position: shift entire column down, but not so that it goes out of view */
	to {
		transform: translateY(calc(100% - 100vh));
	}
}
/* Hook our animation with the timeline to our columns */
.column-reverse {
	animation: adjust-position linear forwards;
	animation-timeline: scroll(root block);
}






/*footer--starts-here--*/




#footer-section{
  background: #292A2E;
  border-radius: 32px 32px 0px 0px;

}

#footer-card{
   width: 535px;
   height: 230px;
    padding: 32px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    
    background:url('/assets/images/footer-card-bg.png') no-repeat #E2E2E2;
}
#footer-card-bg{
  background:url('/assets/images/footer-card-bg.png') no-repeat;
position: absolute;
align-self: center;
width: 600px;
height: 300px;
left: 0;
top:0;
border-radius: 12px;
}
/*footer--ends-here--*/





/*mobile devices*/


/* ----------- iPhone 6, 6S, 7 and 8 ----------- */




/* Portrait and Landscape Monile*/
@media (width <= 600px), 
screen and ( width = 414px)
and (height =736px)
and (-webkit-device-pixel-ratio >= 2) {


      #heroo {
          display: none;
        }
     
        #hero-card {
          margin: 0px;
        }
      
        .hero-socials {
          width: 100%;
        }
      
        #hero-contact {
      
          padding-bottom: 24px;
        }
      
        .watch-brief {
          position: absolute;
          top: 60px;
          right: 60px;
        }
      
      
        #navbar,
        #hero-content,
        #hero-bottom,
        .section-02,
        .section-03,
        #footer-section,
        .main-container section,
        main,
        aside,
        #hero-contact {
          padding-left: 24px;
          padding-right: 24px;
        }
      
        .boxes {
          flex-direction: column;
          gap: 32px;
      
        }
      
        .section-02-text,
        .section-02-text {
          width: -webkit-fill-available;
        }
      
        #rec-left,
        #rec-centred,
        #rec-right,
        #left-video,
        #right-video,
        #centred-video {
          display: none;
        }
      
        #img-positioning-proj {
          position: absolute;
      
        }
      
        .project-mockup-bgOverlay {
          height: 87%;
          width: 100%;
        }
      
        #section3 {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
      
        .section-03 {
          width: -webkit-fill-available;
        }
      
        .section-04-featured {
          position: relative;
          width: 360px;
          height: 360px;
          gap: 0px;
          background: url("/assets/images/section-o4-bg-mobile.png") no-repeat;
        }
      
        .section-04 .card {
          width: 300px;
          bottom: 60px;
        }
      
        .section-05-animation img {
          max-width: 320px;
      
        }
      
        .m-col-12,
        .m-col-8,
        .m-col-4 {
          display: flex;
          flex-direction: column;
          gap: 16px;
          padding-top: 16px;
          padding-bottom: 16px;
          width: -webkit-fill-available;
      
        }
      
        .m-col {
          display: flex;
          flex-direction: column;
          width: -webkit-fill-available;
        }
      
        .m-col-8 {
          width: 80%;
          ;
        }
      
        .m-col-4 {
          width: 20%;
          ;
        }
      
        .logo {
      
          width: 180px;
      
        }
      
        #about-page main h2 {
          font-size: 1em;
        }
      
        h3 {
      
          font-weight: 400;
          font-size: 24px;
          margin: 2px;
        }
      
        #space {
          display: none;
        }
      
        #hero-top .pry-icon {
          color: #E5B66B;
          font-size: 16px;
        }
      
        #hero-top .w-col-4,
        #hero-top .socials {
          gap: 8px;
      
        }
      
        #hero-card #resume {
          width: 64px;
        }
      
        .hireme #hire {
          width: 200px;
        }
      
        .avatar {
          width: 64px;
          height: 64px;
          left: 28px;
      
        }
      
        .section-02-text .display {
          font-size: 32px;
        }
      
        .section-03 .display {
          font-size: 48px;
          line-height: 60px;
        }
      
        .title-bg {
          width: 220px;
          ;
        }
      
        .section-02-text p {
          padding-left: 32px;
          ;
        }
      
        .section-03 .mockup {
          bottom: 64px;
          left: -24px;
        }
      
        h4 {
          font-size: 28px;
        }
      
        .intro {
          right: 16px;
          bottom: 120px
        }
        .proj-summary {
        
          width: auto;
          max-width: 300px;
          padding: 16px;
      }
        .proj-img {
          margin-top: 32px;
        }
      
        .project-title-heading-container {
          padding-left: 24px;
        }
      
        header #logo {
      
          top: 70%;
      
          width: 100%;
        }
      
        #home-testimonial-container {
          width: 100%;
        }
      
        #home-testimonial-section .display {
          font-size: 40px;
          line-height: 40px;
          margin: 32px;
        }
      
        .home-testimonial-card {
          min-height: 563px;
        }
      
        .testimonial-card-wrap {
          display: flex;
          flex-direction: column;
          gap: 32px;
          justify-content: center;
          align-items: center;
        }
      
        .home-testimonial-card .row1 {
          display: flex;
          flex-direction: column;
          max-width: 260px;
      
        }
      
        #home-testimonial-container .right {
          background: url('/assets/images/testimonial-bg-right-mob.png') no-repeat;
      
        }
      
        #home-testimonial-container .left {
          background: url('/assets/images/testimonial-bg-left-mob.png') no-repeat;
        }
      
      .proj-content{
        padding-left:24px;
        padding-right:24px;
        justify-content: center;
        align-items: center;
      }
      
        /*---about--*/
        .fixedelement {
          width: -webkit-fill-available;
      
        }
      
        .goal {
          display: none;
        }
      
        #skills h2 {
          font-size: 32px;
        }
      
        aside {
          width: 60vw;
      
        }
      
        .testimonials-card {
          width: 300px;
        }
      
        #testimonials {
          gap: 4px;
          padding: 16px;
        }
        .proj-bg-image {
          max-width: 360px;
        }
        .useful-links{
          display: flex;
          gap:16px;
          flex-direction: column;
          } 
          .columns {
            display:flex;
          }
          .column-reverse {
            transform: translateY(calc(0vh)); 
            animation: adjust-position none;
        
          }
          @keyframes adjust-position {
            /* Start position: shift entire column up, but not so that it goes out of view */
            from {
              transform: translateY(calc(0vh));
            }
          
            /* End position: shift entire column down, but not so that it goes out of view */
            to {
              transform: translateY(calc(0vh));
            }
    
    }

  }



    @media (width > 600px )
    and (width <= 1024px) {
      .project-overview-header,.active-project-section-title,.summary-header, .image-title-footer,.margin, #rectangl, .main-container section,main, aside{
        padding-left: 40px;
        padding-right: 40px;
      }
      #navbar,#hero-content,#hero-bottom,.section-02,.section-03, #footer-section, .project-title-heading-container, .hero-contact{
        padding-left: 40px;
        padding-right: 40px;
      }
      .watch-brief{
        position: absolute;
       top: 120px;
        right: 120px;
       }
      #heroo {
        display: none;
    }
    #hero-headline {
      font-size: 40px;
  }
    #proj-01, #proj-02, #proj-03{
      padding-left: 24px;
      padding-right: 24px;
    }  
    .the-product-card{
      width: 40%;
    }
    #desktop-card-img{
      display:none;
      
    }
    #navigation-bar{
      padding-left: 40px;
      padding-right: 40px;
    }
    #hero-contact{
      padding-left: 40px;
      padding-right: 40px;
     
      justify-content: space-between;
     }

     .nav-links{
      display: none;
     }
     #open {
      display: block
      }

      header #logo{
        top: 75%;
        max-width:760px
      }


      /*about Page */
   
    header #logo {
      top: 65%;
      width: 100%;
      max-width:600px
    }
   
    .fixedelement{
      max-width: 600px;
      opacity: 50%;
      }
      .goal{
        padding-left: 64px;
        padding-right: 64px;
        width: 25%;
        border-radius: 8px;
      }
      #meet-me{
       
        width: 50%;
      }

  #hero-content p {
    font-family: 'Bitter';
    font-style: normal;
    font-weight: 200;
    font-size: 24px;
    line-height: 28px;
    /* identical to box height, or 156% */
    margin: 4px 0;
    color: #BFBFBF;
  }
  .useful-links{
    display: flex;
    gap:16px;
    flex-direction: column;
    } 
    #home-testimonial-container{
   
      width: 80%;
    }
    .home-testimonial-card {
      min-width: 515px;
    }
    #hero-headline{
      font-size: 40px;
      line-height: 40px;
     }

   

    }












    @media (width > 1024px)
    {
      .project-overview-header,.active-project-section-title,.summary-header, .image-title-footer,.margin, #rectangl, .main-container section,main, aside{
        padding-left: 64px;
        padding-right: 64px;
      }
      #navbar,#hero-content,#hero-bottom,.section-02,.section-03, #footer-section,.project-title-heading-container,#hero-contact{
        padding-left: 80px;
        padding-right: 80px;
      }
      .watch-brief{
        position: absolute;
       top: 120px;
        right: 120px;
       }
       .the-product-card{
        width: 40%;
      }
      .hero-text{
        flex-direction: column;
        width: 30%;
   
      }
      .hero-image{
        width: 70%;
     
      }
      .hero-row{
        flex-direction: row;
        display: flex;
        padding-left: 80px;
        padding-right: 80px;
      }
      .nav-links{

        display: flex;
        flex-direction: row; 
        gap:30px;
        padding: 16px 0;
        align-items: center;
        justify-content: flex-end;
      
      }
      #open{
        display: none;
      }
      #navbar,#hero-content,#hero-bottom,.section-02,.section-03, #footer-section{
        padding-left: 80px;
        padding-right: 80px;
      }

      #projectNav{
        top: 50%;
      }
      /* About Page */
      header #logo{
        top: 90%;
        max-width:760px
      }
      .fixedelement{
        max-width: 600px;
        opacity: 50%;
        }
        .goal{
          padding-left: 64px;
          padding-right: 64px;
          width: 25%;
          border-radius: 8px;
        }
        #meet-me{
         
          width: 50%;
        }

  #hero-content p {
    font-family: 'Bitter';
    font-style: normal;
    font-weight: 200;
    font-size: 24px;
    line-height: 28px;
    /* identical to box height, or 156% */
    margin: 4px 0;
    color: #BFBFBF;
  }
  .useful-links{
    display: flex;
    gap:16px;
    flex-direction: column;
    } 
  
    #home-testimonial-container{
   
      width: 80%;
    }
    .home-testimonial-card {
      min-width: 515px;
    }
    #hero-headline{
      font-size: 48px;
      line-height: 48px;
     }

     
    }