/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


* {
    box-sizing: border-box;
}

/*=============================================*/


html{

    color-scheme: dark;
}




body{

    background-color: #181D22;
    color: #DADADA;
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.5em;
    font-family: 'Outfit', sans-serif;
    font-family: 'Poppins', sans-serif;
}

/*Styling the header */

header{

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.0em;
}



 header p{

    font-size: 1.5em;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    letter-spacing: 0.4em;
    margin-top: 2.0em;
}



header p::first-letter{
    color: #FFC918;
 }




#wrapper{

    margin: 0 auto;
    width: 100%;
    
}

#wrapper p a{

  text-decoration: none;
  color: #DADADA;

}

/* styling navigation*/

nav ul{

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.8em;
}



nav ul li {

    font-size: 0.6em;
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-weight: 500;
    list-style: none;
    cursor: pointer;
}

nav ul li a{

  text-decoration: none;
  color: #DADADA;
}


/* Styling the links */


ul a:link{

  color: #DADADA;
}



ul a:visited{

color: #DADADA;
}




ul a:hover{

color: #FFC918;

}


ul a:active{

color:#ffffff;
}


ul a:focus{

color: #FFC918;
}



/* styling hero text*/

.hero-text{

  padding-left: 0.2em;
  padding-right: 0.2em;
}

.hero-text p:nth-of-type(1){

      font-size: 0.7em;
      font-family: 'Poppins', sans-serif;
      letter-spacing: 0.5em;
      text-transform: uppercase;
      color: #FFC918;
      margin-top: 3.0em;
      text-align: center;
}


.hero-text p:nth-of-type(2){

    font-size: 2.4em;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: #9FA1F6;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    text-align: center;
}


.hero-text p:nth-of-type(3){

    font-size: 0.7em;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.9em;
    text-transform: uppercase;
    color: #FFC918;
    text-align: center;
}


.flicker-in-1 {
	-webkit-animation: flicker-in-1 2s linear both;
	        animation: flicker-in-1 2s linear both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-3-25 15:10:30
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * @animation flicker-in-1
 * ----------------------------------------
 */
 @-webkit-keyframes flicker-in-1 {
    0% {
      opacity: 0;
    }
    10% {
      opacity: 0;
    }
    10.1% {
      opacity: 1;
    }
    10.2% {
      opacity: 0;
    }
    20% {
      opacity: 0;
    }
    20.1% {
      opacity: 1;
    }
    20.6% {
      opacity: 0;
    }
    30% {
      opacity: 0;
    }
    30.1% {
      opacity: 1;
    }
    30.5% {
      opacity: 1;
    }
    30.6% {
      opacity: 0;
    }
    45% {
      opacity: 0;
    }
    45.1% {
      opacity: 1;
    }
    50% {
      opacity: 1;
    }
    55% {
      opacity: 1;
    }
    55.1% {
      opacity: 0;
    }
    57% {
      opacity: 0;
    }
    57.1% {
      opacity: 1;
    }
    60% {
      opacity: 1;
    }
    60.1% {
      opacity: 0;
    }
    65% {
      opacity: 0;
    }
    65.1% {
      opacity: 1;
    }
    75% {
      opacity: 1;
    }
    75.1% {
      opacity: 0;
    }
    77% {
      opacity: 0;
    }
    77.1% {
      opacity: 1;
    }
    85% {
      opacity: 1;
    }
    85.1% {
      opacity: 0;
    }
    86% {
      opacity: 0;
    }
    86.1% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes flicker-in-1 {
    0% {
      opacity: 0;
    }
    10% {
      opacity: 0;
    }
    10.1% {
      opacity: 1;
    }
    10.2% {
      opacity: 0;
    }
    20% {
      opacity: 0;
    }
    20.1% {
      opacity: 1;
    }
    20.6% {
      opacity: 0;
    }
    30% {
      opacity: 0;
    }
    30.1% {
      opacity: 1;
    }
    30.5% {
      opacity: 1;
    }
    30.6% {
      opacity: 0;
    }
    45% {
      opacity: 0;
    }
    45.1% {
      opacity: 1;
    }
    50% {
      opacity: 1;
    }
    55% {
      opacity: 1;
    }
    55.1% {
      opacity: 0;
    }
    57% {
      opacity: 0;
    }
    57.1% {
      opacity: 1;
    }
    60% {
      opacity: 1;
    }
    60.1% {
      opacity: 0;
    }
    65% {
      opacity: 0;
    }
    65.1% {
      opacity: 1;
    }
    75% {
      opacity: 1;
    }
    75.1% {
      opacity: 0;
    }
    77% {
      opacity: 0;
    }
    77.1% {
      opacity: 1;
    }
    85% {
      opacity: 1;
    }
    85.1% {
      opacity: 0;
    }
    86% {
      opacity: 0;
    }
    86.1% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  


/* styling hero section*/


.hero-section{

    margin-top: 3.0em;
    margin-bottom: 2.0em;
    display: flex;
    flex-direction: column;
    gap: 2.0em;
    padding-left: 2.0em;
    padding-right: 2.0em;
}


.hero-section div:nth-of-type(1) p{

    font-size: 0.6em;
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-weight: 500;
    color: #DADADA;
    margin-left: 0.2em;
    
}

.tracking-in-expand {
	-webkit-animation: tracking-in-expand 1.0s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 1.0s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-4-6 11:22:7
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
 @-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.8em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.8em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}



.hero-section img{

    width: 65%;
    height: auto;
    margin: 0 auto;
}



.wobble-hor-bottom:hover {
	-webkit-animation: wobble-hor-bottom 0.8s both;
	        animation: wobble-hor-bottom 0.8s both;
}


/* ----------------------------------------------
 * Generated by Animista on 2024-3-25 15:5:19
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation wobble-hor-bottom
 * ----------------------------------------
 */
 @-webkit-keyframes wobble-hor-bottom {
    0%,
    100% {
      -webkit-transform: translateX(0%);
              transform: translateX(0%);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
    }
    15% {
      -webkit-transform: translateX(-30px) rotate(-6deg);
              transform: translateX(-30px) rotate(-6deg);
    }
    30% {
      -webkit-transform: translateX(15px) rotate(6deg);
              transform: translateX(15px) rotate(6deg);
    }
    45% {
      -webkit-transform: translateX(-15px) rotate(-3.6deg);
              transform: translateX(-15px) rotate(-3.6deg);
    }
    60% {
      -webkit-transform: translateX(9px) rotate(2.4deg);
              transform: translateX(9px) rotate(2.4deg);
    }
    75% {
      -webkit-transform: translateX(-6px) rotate(-1.2deg);
              transform: translateX(-6px) rotate(-1.2deg);
    }
  }
  @keyframes wobble-hor-bottom {
    0%,
    100% {
      -webkit-transform: translateX(0%);
              transform: translateX(0%);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
    }
    15% {
      -webkit-transform: translateX(-30px) rotate(-6deg);
              transform: translateX(-30px) rotate(-6deg);
    }
    30% {
      -webkit-transform: translateX(15px) rotate(6deg);
              transform: translateX(15px) rotate(6deg);
    }
    45% {
      -webkit-transform: translateX(-15px) rotate(-3.6deg);
              transform: translateX(-15px) rotate(-3.6deg);
    }
    60% {
      -webkit-transform: translateX(9px) rotate(2.4deg);
              transform: translateX(9px) rotate(2.4deg);
    }
    75% {
      -webkit-transform: translateX(-6px) rotate(-1.2deg);
              transform: translateX(-6px) rotate(-1.2deg);
    }
  }
  




.hero-section div:nth-of-type(2) p:nth-of-type(1){

    font-size: 0.95em;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: #FFC918;
    text-align: center;


}


.hero-section div:nth-of-type(2) p:nth-of-type(2){

font-family: 'Outfit', sans-serif;
font-size: 0.8em;
margin-top:0.5em;
margin-left: 1.0em;
margin-bottom: 1.5em;

}


/* styling about me section*/

.about-hero{

  padding-left: 2.0em;
  padding-right: 2.0em;
  margin-bottom: 3.5em;
}


.about-hero p:nth-of-type(1){

  font-size: 0.8em;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0.5em;
  letter-spacing: 0.2em;
  margin-left: 0.9em;
}


.about-hero p:nth-of-type(2){

    font-size: 2.5em;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #9FA1F6;
    margin-bottom: 0.2em;
    line-height: 1.1em;
    font-weight: 600;
    padding-right: 4.0em;

}


.about-hero p:nth-of-type(3){

  font-family: 'Outfit', sans-serif;
  font-size: 0.8em;
  margin-top:0.5em;

}

.about-hero span a {

  font-family: 'Outfit', sans-serif;
  color: #FFC918;
  font-size: 0.9em;
  background-color: transparent;
  text-align: left;
  border-bottom: solid 1px #9FA1F6;
  cursor: pointer;
  text-decoration: none;
  

}


.my-works {

  background-color: #FFC918;
  padding: 2.0em;
}

.my-works div p:nth-of-type(1){

  color: #181D22;
  font-size: 0.8em;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0.5em;
  letter-spacing: 0.2em;


}


.my-works div p:nth-of-type(2){

    color: #181D22;
    font-size: 2.5em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.2em;
    line-height: 1.1em;
    font-weight: 600;
    padding-right: 4.0em;


}

.my-works div p:nth-of-type(3){

  font-family: 'Outfit', sans-serif;
  font-size: 0.8em;
  margin-top:0.5em;
  color:#181D22;

}

.my-works div span a {

  font-family: 'Outfit', sans-serif;
  color:#181D22;
  font-size: 0.9em;
  background-color: transparent;
  text-align: left;
  border-bottom: solid 1px #181D22;
  text-decoration: none;
  cursor: pointer;
  

}



.portfolio-image img {

  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}


.portfolio-gallery{

  display: none;
}


.portfolio-gallery a img {

  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}



.masters-showcase{

  padding-left: 2.0em;
  padding-right: 2.0em;
  margin-top: 3.5em;
  margin-bottom: 3.5em;
}

.masters-showcase p:nth-of-type(1){

  font-size: 0.8em;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0.5em;
  letter-spacing: 0.2em;
}


.masters-showcase p:nth-of-type(2){

    font-size: 2.5em;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #9FA1F6;
    margin-bottom: 0.2em;
    line-height: 1.1em;
    font-weight: 600;
    padding-right: 4.0em;

}


.masters-showcase p:nth-of-type(3){

  font-family: 'Outfit', sans-serif;
  font-size: 0.8em;
  margin-top:0.5em;

}

.masters-showcase span a {

  font-family: 'Outfit', sans-serif;
  color: #FFC918;
  font-size: 0.9em;
  background-color: transparent;
  text-align: left;
  border-bottom: solid 1px #9FA1F6;
  text-decoration: none;
  

}


footer{
  padding: 0;
  margin: 0;
  
}



.footer-info{

  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0.8);


}

.footer-info img{
  transform: scale(0.5);
}

.footer-info p{
  font-size: 1.2em;
  letter-spacing: 0.4em;
}

.footer-info p::first-letter{
  color: #FFC918;
}


.copyright{
  font-size: 0.6em;
  color: #fff;
  text-align: center;
  margin-bottom: 2.0em;
}


/*Styling the about page */

.about-header{
  background-color: #FFC918;
  padding: 1.2em;
  margin-top: 0.8em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-header p{

  font-size: 0.6em;
  color: #181D22;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  margin-bottom: 0.5em;
  letter-spacing: 0.2em;
  text-align: left;
  

  
}

.about-header h1{
  font-size: 1.5em;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #181D22;
  line-height: 1.1em;
  font-weight: 700;
  text-align: left;
  padding-left: 0.8em;
  padding-right: 0.8em;
     
}

.about-header img{

  width: 6%;
  height: auto;
  margin-left: 14.0em;
  margin-top: 1.0em;
  
}

/*Styling the about info */

.about-info{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 1.4em;
  padding-right: 1.4em;

}


.about-info img{
  width: 60%;
  height: auto;

}

.about-info div{
  padding: 0.4em;
  margin-top: 2.0em;
  margin-bottom: 2.0em;
}

.about-info div h2{
  font-size: 1.8em;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9FA1F6;
  margin-bottom: 0.2em;
  line-height: 1.1em;
  font-weight: 600;
  text-align: center;
  

}

.about-info div p:nth-of-type(1){
  margin-top: 1.5em;

}

.about-info div p{

  font-family: 'Outfit', sans-serif;
  font-size: 0.8em;
  margin-top: 0.8em;
  margin-bottom: 1.0em;

}

/*Styling the project page */

.project-welcome{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 1.4em;
  padding-right: 1.4em;
}


.project-welcome span{
  font-size: 1.2em;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: #9FA1F6;
  margin-top: 2.0em;
  line-height: 1.1em;
  text-align: left;
  
} 


.project-welcome p{

  font-family: 'Outfit', sans-serif;
  font-size: 0.8em;
  margin-top: 0.8em;
  margin-bottom: 1.0em;
  margin-top: 1.0em;
  
} 

/*Styling the about portfolio display section */

.uiux-portfolio{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 1.4em;
  padding-right: 1.4em;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  gap: 1.5em;
}


.portfolio-intro p:nth-of-type(1){

  font-size: 0.8em;
  color: #FFC918;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.2em;
}


.portfolio-intro p:nth-of-type(2){

  font-size: 1.8em;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9FA1F6;
  margin-bottom: 0.2em;
  line-height: 1.1em;
  font-weight: 600;

}


.portfolio-intro p:nth-of-type(3){

  font-family: 'Outfit', sans-serif;
  font-size: 0.8em;
  margin-top: 0.8em;
  margin-bottom: 1.0em;
  margin-top: 1.0em;
  
} 

.portfolio-images figure img{

  width: 80%;
  height: auto;
  margin: 0 auto;
  display: block;
}


.portfolio-images figure figcaption{

  font-family: 'Outfit', sans-serif;
  font-size: 0.8em;
  text-align: center;
  padding-left: 1.0em;
  padding-right: 1.0em;
  margin-top: 1.0em;
  margin-bottom: 1.5em;
}


.portfolio-images figure figcaption a{

  cursor: pointer;
  text-decoration: none;
  color:#DADADA


}

 /* styling the contact page*/

#contact-form {
  padding-left: 2.0em;
  padding-right: 2.0em;
  margin: 0 auto;
}

#contact-form label {
  display: block;
  font-size: 0.8em;
  margin-top: 1.5em;
  
}

#contact-form input, #contact-form textarea {
  width: 100%;
  padding: 0.6em;
  border: 1px solid #FFC918;
  box-sizing: border-box;
}


#contact-form input:nth-of-type(3){

  margin-top: 2.0em;
}


#contact-form button{

  font-family: 'Outfit', sans-serif;
  background: #FFC918;
  color: #181D22;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  padding: 10px 40px;
  outline: 0;
  cursor: pointer;
  display: block;
  margin: 30px auto 10px;
}


/* ---------------------------------------------------
MQs 
--------------------------------------------------- */


@media (min-width: 768px) {

  header{

    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 2.0em;
    padding-right: 2.0em;
  }

  header p{

    font-size: 1.4em;

  }


  nav ul{
  
    flex-direction: row;
    justify-content: space-around;
    margin-top: 3.0em;
    gap: 1.1em;
    

  }

  nav ul li{

    font-size: 0.7em;
  }

  /* styling hero text*/

  .hero-text{

    padding-left: 0.2em;
    padding-right: 0.2em;
    margin-top: 4.0em;
  }

  .hero-text p:nth-of-type(1){

    font-size: 1.0em;

  }

  .hero-text p:nth-of-type(2){

    font-size: 3.2em;
    letter-spacing: 0.2em;
    font-weight: 700;
    margin-top: 0.3em;
    margin-bottom: 0.3em;

  }


  .hero-text p:nth-of-type(3){

    font-size: 0.9em;
    letter-spacing: 1.2em;

  }


  /* styling hero section*/

  .hero-section div:nth-of-type(1) p{

    font-size: 0.7em;

  }

  .hero-section img{

    width: 40%;
    
}

.hero-section div:nth-of-type(2) p:nth-of-type(1){

  font-size: 1.1em;

}

.hero-section div:nth-of-type(2) p:nth-of-type(2){

  font-size: 0.9em;
  padding-left: 1.6em;
  padding-right: 1.6em;
  line-height: 2.0em;
  
  }


/* styling about me section*/

.about-hero{

  padding-left: 4.0em;
  padding-right: 4.0em;
  
}


.about-hero p:nth-of-type(1){

  font-size: 1.0em;

  
}


.about-hero p:nth-of-type(2){

    font-size: 2.7em;

}


.about-hero p:nth-of-type(3){

  font-size: 0.9em;
  margin-bottom: 1.0em;
  line-height: 2.0em;
  

}

.about-hero span a {

  font-size: 1.1em;
  

}

/* styling my works section*/

.my-works{

  padding-left: 4.0em;
  padding-right: 4.0em;
}


.my-works div p:nth-of-type(1){

  font-size: 1.0em;

  
}

.my-works div p:nth-of-type(2){

  font-size: 2.7em;

}

.my-works div p:nth-of-type(3){

  font-size: 0.9em;
  margin-bottom: 1.0em;
  line-height: 2.0em;

}

.my-works div span a {

  font-size: 1.1em;
  

}

.portfolio-image img{
  width: 60%;
  height: auto;
  margin-top: -4.0em;
  margin-left: 15.0em;
  margin-bottom: 3.0em;
}


.masters-showcase{

  padding-left: 4.0em;
  padding-right: 4.0em;

}

.masters-showcase p:nth-of-type(1){

  font-size: 1.0em;

  
}

.masters-showcase p:nth-of-type(2){

  font-size: 2.7em;

}

.masters-showcase p:nth-of-type(3){

  font-size: 0.9em;
  margin-bottom: 1.0em;
  line-height: 2.0em;

}

.masters-showcase span a {

  font-size: 1.1em;
  

}


/*Styling the about page */

.about-header{

  padding: 1.5em;
  margin-top: 1.0em;
}

.about-header p{

  font-size: 0.9em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  text-align: center;
  
  
}

.about-header h1{

  font-size: 1.8em;
  text-align: left;
  margin-left: 1.0em;
  
}

.about-header img{

  width: 4%;
}


/*Styling the about info */

.about-info{

  padding-left: 4.0em;
  padding-right: 4.0em;

}


.about-info img{

 display: none;

}

.about-info div h2{
  font-size: 2.4em;
  text-align: left;
  margin-top: 1.0em;
  

}


.about-info div p{

  font-size: 0.9em;
  margin-bottom: 1.0em;
  line-height: 2.0em;

}


.copyright{

  font-size: 0.7em;

}


/*Styling the project page */

.project-welcome{

  padding-left: 4.0em;
  padding-right: 4.0em;
}

.project-welcome span{
  font-size: 2.4em;
  margin-top: 2.0em;
  
} 


.project-welcome p{

  font-size: 0.9em;
  margin-bottom: 1.0em;
  line-height: 2.0em;
  
} 

/*Styling the UIUX projects */

.uiux-portfolio{

  padding-left: 4.0em;
  padding-right: 4.0em;
}

.portfolio-intro{
  margin-top: 2.0em;
}

.portfolio-intro p:nth-of-type(1){

  font-size: 0.9em;
  
}


.portfolio-intro p:nth-of-type(2){

  font-size: 2.4em;

}


.portfolio-intro p:nth-of-type(3){

  font-size: 0.9em;
  line-height: 2.0em;
} 

.portfolio-images{

  width: 83%;
}


/* styling the contact page*/

#contact-form {
  padding-left: 4.0em;
  padding-right: 4.0em;
  width: 70%;
 
}


#contact-form button{

  font-family: 'Outfit', sans-serif;
  background: #FFC918;
  color: #181D22;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  padding: 10px 40px;
  outline: 0;
  cursor: pointer;
  display: block;
  margin: 30px auto 10px;
}

  
}


/*------------------------------------------ */

@media (min-width: 1024px) {

  nav ul li{

    font-size: 0.75em;
  }  



 header{
    width: 95%;
    margin: 0 auto;
}

/* styling hero text*/


.hero-text{

  margin-top: 4.0em;
}



.hero-text p:nth-of-type(2){

  font-size: 3.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;

}


.hero-text p:nth-of-type(3){

  font-size: 1.0em;
  letter-spacing: 1.15em;

}


.hero-section{

  flex-direction: row;
  justify-content: center;
  gap: 0.5;
  
}


.hero-section img{
  
  width: 30%;
  height: 30%;
 
}

.hero-section div:nth-of-type(1){
 
  width: 10%;
  padding: 0;

}

.hero-section div:nth-of-type(2){
 
  width: 40%;
  margin-top: 7.5em;
  margin-left: -6.0em;

}

.hero-section div:nth-of-type(2) p:nth-of-type(1){

  font-size: 1.0em;
  letter-spacing: 0.4em;
  
  
}
 



/* styling about me section*/

.about-hero{

  width: 50%;
  margin-left: 18.0em;
}

/* styling my works section*/


.my-works{

  flex-direction: row;
  justify-content: space-between;
  
}

.my-works div:nth-of-type(1){

  width: 50%;
}


.portfolio-image img{

  width: 35%;
  margin-left: 32.0em;
  margin-top: -12.0em;
  
}

.portfolio-gallery{
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin-top: 2.0em;
  margin-left: 2.4em;
  justify-content: center;
 
  
}

.portfolio-gallery a{

  width: 30%;
  height: auto;
  
}

/* styling masters program showcase section*/

.masters-showcase{

  width: 50%;
  margin-left: 26.0em;
  margin-top: 4.0em;
}


/*Styling the about page */

.about-header{

  padding: 2.0em;
}

.about-header p{

  font-size: 1.1em;
  
  
}

.about-header h1{

  font-size: 2.2em;
  
}



/*Styling the about info */

.about-info{

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 3.0em;

}


.about-info img{

 display: block;
 width: 38%;
 height: auto;
 margin-top: -26.0em;

}


.about-info div{

  width: 60%;
}

.about-info div h2{
  font-size: 2.4em;

}


/*Styling the project page */

.project-welcome{

  padding-left: 4.0em;
  padding-right: 4.0em;
}


.project-welcome p{

  padding-left: 4.0em;
  padding-right: 4.0em;
  
} 

/*Styling the UIUX projects */

.uiux-portfolio{

  flex-direction: row;
  justify-content: space-between;
  margin: 0 auto;
  align-items: center;
  gap: 2.0em;
  padding-top: 3.0em;

}

.portfolio-intro{
  margin-top: 2.0em;
  width: 40%;
}


.portfolio-images{

  width: 60%;
  display: flex;
  flex-direction: row;
  margin-top: 3.0em;
  
}


.portfolio-images figure img{

  width: 90%;
  margin: 0;
}


/*Styling the footer section */


footer{

  margin-top: 3.0em;
}


/* styling the contact page*/

.project-welcome span{

  text-align: center;
}


.project-welcome p{

  text-align: center;
}


#contact-form {
  padding-left: 2.0em;
  padding-right: 2.0em;
  width: 60%;
 
}

}

/*------------------------------------------ */

@media (min-width: 1200px) {

/* styling hero text*/

nav ul li{

  font-size: 0.8em;
}


header{
    width: 95%;
    margin: 0 auto;
}

.hero-text{

  margin-top: 4.5em;

}


.hero-text p:nth-of-type(1){


  font-size: 1.2em;


}

.hero-text p:nth-of-type(2){

  font-size: 3.8em;

}


.hero-text p:nth-of-type(3){

  font-size: 1.1em;

}

.hero-section{

  width: 95%;
  margin: 0 auto;
  padding-top: 3.0em;
  
}


.hero-section img{
  
  width: 22%;
  height: aut0;
 
}

.hero-section div:nth-of-type(1){
 
  margin-top: 1.0em;

}

.hero-section div:nth-of-type(1) p{

  font-size: 0.8em;
}

.hero-section div:nth-of-type(2){
 
  margin-top: 7.5em;
  margin-left: -6.0em;

}


.hero-section div:nth-of-type(2) p:nth-of-type(1){

  font-size: 1.1em;
  letter-spacing: 0.51em;
  margin-left: 0.4em;
  
  
}


/* styling about me section*/

.about-hero{

  margin-top: 4.0em;
  margin-left: 22.0em;
}

.about-hero p:nth-of-type(2){

  font-size: 3.2em;
}

/* styling my works section*/


.my-works{

  flex-direction: row;
  justify-content: space-between;
  margin: 0 auto;
  
}

.my-works div:nth-of-type(1){

  width: 40%;
}

.my-works div:nth-of-type(1) p:nth-of-type(2){

  font-size: 3.2em;
}

.portfolio-image img{

  width: 40%;
  margin-left: 32.0em;
  margin-top: -15.0em;
  
}

.portfolio-gallery{
 
  margin-top: 6.0em;
 
  
}

.portfolio-gallery a{

  width: 30%;
  height: auto;
  
}

/* styling masters program showcase section*/

.masters-showcase{

  margin-left: 28.0em;
  margin-top: 6.0em;
  
}

.masters-showcase p:nth-of-type(2){

  font-size: 3.2em;
}


/*Styling the about page */

header{

  margin-bottom: 0.8em;
}

.about-header{

  padding: 2.0em;
  margin: 0 auto;
}

.about-header p{

  font-size: 1.1em;
  
  
}

.about-header h1{

  font-size: 2.2em;
  
}



/*Styling the about info */


.about-info{

  margin-top: -3.0em;


}
.about-info img{

 width: 32%;
 height: auto;
 margin-top: -45.0em;

}


.about-info div{

  width: 60%;
}

.about-info div h2{
  font-size: 3.2em;

}

/*Styling the project page */

.project-welcome{

  padding-left: 8.0em;
  padding-right: 8.0em;
}





}


/*------------------------------------------ */

@media (min-width: 1400px) {

/* styling hero text*/

nav ul li{

  font-size: 0.85em;
}


.hero-text{

  margin-top: 4.5em;
}


.hero-text p:nth-of-type(1){

  
  font-size: 1.3em;


}

.hero-section{

  width: 98%;
  margin: 0 auto;
  padding-top: 4.0em;
  justify-content: center;
  gap: 0;
  
}


.hero-section img{
  
  width: 23%;
  height: auto;
 
}

.hero-section div:nth-of-type(1){
 
  margin-top: 1.0em;

}


.hero-section div:nth-of-type(2){
 
  margin-top: 8.5em;
  margin-left: -6.0em;
  width: 35%;

}


.hero-section div:nth-of-type(2) p:nth-of-type(1){

  letter-spacing: 0.6em;
  margin-left: 0.4em;
  
}

/* styling about me section*/

.about-hero{

  margin-left: 27.0em;
}

/* styling my works section*/



.portfolio-image img{

  width: 30%;
  margin-left: 40.0em;
  margin-top: -12.0em;
  
}

.portfolio-gallery a{

  width: 30%;
  height: auto;
  
}


.portfolio-gallery{
  
  margin: 0 auto;
  padding-top: 4.0em;
  justify-content: center;
 
  
}


/* styling masters program showcase section*/

.masters-showcase{

  width: 50%;
  margin-left: 35.0em;
  margin-top: 6.0em;
}


/*Styling the about page */

/*Styling the about info */


.about-info{

  margin-top: -3.0em;



}
.about-info img{

 width: 28%;
 height: auto;
 margin-top: -35.0em;

}


/* styling the contact page*/

.project-welcome span{

  text-align: center;
  width: 80%;
}

.project-welcome p{

  width: 80%;
}


#contact-form {
  padding-left: 2.0em;
  padding-right: 2.0em;
  width: 50%;
 
}

#contact-form button{

  font-family: 'Outfit', sans-serif;
  background: #FFC918;
  color: #181D22;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  padding: 10px 40px;
  outline: 0;
  cursor: pointer;
  display: block;
  margin: 30px auto 10px;
  font-size: 1.0em;
}





}

/*------------------------------------------ */

@media (min-width: 1920px) {

  /* styling hero text*/

  header{
    padding-left: 4.0em;
    padding-right: 4.0em;
  }

  header p{

    font-size: 1.6em;
  }

  nav ul li{

    font-size: 0.95em;
  }

  .hero-text{

    margin-top: 6.0em;
  
  }

  .hero-text p:nth-of-type(1){

  
    font-size: 1.5em;
  
  
  }

  .hero-text p:nth-of-type(2){

    font-size: 4.1em;
  
  }
  
  
  .hero-text p:nth-of-type(3){
  
    font-size: 1.2em;
  
  }

  .hero-text{

    margin-bottom: 4.0em;
  
  }

  .hero-section{

    padding-left: 4.0em;
    padding-right: 4.0em;
  }


  .hero-section img{
  
    width: 23%;
    height: auto;
   
  }

  .hero-section div:nth-of-type(1) p{
 
    font-size: 0.9em;
  
  }


  .hero-section div:nth-of-type(2) p:nth-of-type(1){

    font-size: 1.3em;
    letter-spacing: 0.8em;
     
  }

  .hero-section div:nth-of-type(2) p:nth-of-type(2){

    font-size: 1.1em;
    margin-top: 1.0em;

  }


  /* styling about me section*/


  .about-hero {
    margin-left: 36.0em;
   }



   .about-hero p:nth-of-type(1) {
    font-size: 1.2em;
   }


   .about-hero p:nth-of-type(2) {
    font-size: 3.4em;
    margin-left: 0.2em;
    }

    .about-hero p:nth-of-type(3) {

      font-size: 1.0em;
      margin-left: 0.3em;
  
    }

    .about-hero span a {
      font-size: 1.2em;
  }


  /* styling my works section*/



.portfolio-image img{

  width: 35%;
  margin-left: 54.0em;
  margin-top: -12.0em;
  
}

.portfolio-gallery a{

  width: 30%;
  height: auto;
  
}

.my-works div{

  padding-left: 2.0em;
  padding-top: 1.0em;
  padding-bottom: 1.0em;
 
  
}


.my-works div p:nth-of-type(1) {
  font-size: 1.2em;
}

.my-works div:nth-of-type(1) p:nth-of-type(2) {

  font-size: 3.4em;
}

.my-works div p:nth-of-type(3) {

  font-size: 1.0em;
}

.my-works div span a {
  font-size: 1.2em;
}

/* styling masters program showcase section*/

.masters-showcase p:nth-of-type(1) {
  font-size: 1.2em;
}

.masters-showcase p:nth-of-type(2) {
  font-size: 3.4em;
}

.masters-showcase p:nth-of-type(3) {

  font-size: 1.0em;
  
}

.masters-showcase span a {
  font-size: 1.2em;
}


/*Styling the about page */

.about-header p {

  font-size: 1.2em;
}

.about-header h1 {

  font-size: 3.4em;
}

.about-info div h2 {
  font-size: 3.4em;
}

.about-info div p {

  font-size: 1.0em;
  padding-right: 2.0em;
  
}

/*Styling the project page */

.project-welcome span {

  font-size: 2.7em;
}

.project-welcome p {

  font-size: 1.1em;
  
}

.portfolio-intro p:nth-of-type(1) {
  font-size: 1.1em;
}

.portfolio-intro p:nth-of-type(2) {
  font-size: 2.7em;
}

.portfolio-intro p:nth-of-type(3) {
        font-size: 1.0em;
    }


 /*Styling the contact page */   

  #contact-form label {
  
      font-size: 1.0em;
  }

  #contact-form button{

    font-size: 1.0em;
  }

  #contact-form input, #contact-form textarea {
    width: 100%;
    padding: 0.6em;
    border: 1px solid #FFC918;
    box-sizing: border-box;
    font-size: 0.9em;
}



























}