@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: normal;
    src: local('Heebo Regular'), url('./heebo/hwoff/Heebo-Regular.woff') format('woff');
    src: local('Heebo Regular'), url('./heebo/httf/Heebo-Regular.ttf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
}

body {
  font-family: 'Heebo', sans-serif;
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}

header {
  height: 70px;
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
  width: 100%;
  z-index: 2;
}

.bolded {
    font-weight: bold;
}

.nav-up {
  top: -80px;
}

.navbar {
  width: 100%;
  height: 70px;
  float: left;
  overflow: hidden;
  background: var(--White, #FFF);
  box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.10);
}

.navborder {
  height: 70px;
  padding: 4px;
  background: linear-gradient(to right, #E5D0FA, #BBD6FF);
}

.logo {
  float: left;
  text-align: center;
  padding: 20px;
}

nav .fa{
  display: none;
}

@media(max-width: 932px){
  .navoptions ul li{
      display: block;
      margin-top: -30px;
  }
  
  .navoptions {
      position: absolute;
      background: white;
      border: 3px #BBD6FF solid;
      height: auto;
      width: 190px;
      top: 0;
      right: -300px;
      text-align: right;
      z-index: 2;
      transition: 1s;
  }
  
  nav .fa {
      float: right;
      display: block;
      color: black;
      margin-top: 20px;
      margin-right: 20px;
      font-size: 22px;
      cursor: pointer;
  }

  .navoptions ul{
      padding: 30px;
  }
}

/* Links inside the navbar */
.navoptions ul li{
  list-style-type: none;
  float: right;
  font-family: 'Heebo', sans-serif;
  font-size: 16px;
  text-align: right;
  padding: 25px;
}

.navoptions ul li a{
  color: black;
  text-decoration: none;
  font-size: 13px;
}

.navoptions ul li::after{
  content: '';
  width: 0%;
  height: 2px;
  background: #BBD6FF;
  display: block;
  margin: auto;
  transition: 0.3s;
}

.navoptions ul li:hover::after{
  width: 100%;
}

/* Button & Other Common */
.ptext p, .dstext p, .wtext p, .raiitext p, .hangtext p, .troltext p  {
  margin-top: 5px;
}

.ptext li, .dstext li, .wtext li, .raiitext li, .hangtext li, .troltext li  {
  margin-left: 20px;
  margin-top: 5px;
}

.ptext a, .dstext a, .wtext a, .raiitext a, .hangtext a, .troltext a {
  margin-top: 10%;

  /*button design*/
  padding-left: 14px; 
  padding-right: 14px; 
  padding-top: 10px; 
  padding-bottom: 10px; 
  background: white; 
  border-radius: 25px; 
  overflow: hidden; 
  border: 2px #BBD6FF solid; 
  justify-content: center; 
  text-align: center; 
  gap: 10px; 
  display: inline-flex;

  /*download text*/
  text-decoration: none;
  color: #BBD6FF;
}

.trolunder, .hangunder, .raiiunder, .wunder, .dstunder {
  border-bottom: solid;
}

.ptext h2, .dstext h2, .hangtext h2, .raiitext h2, .wtext h2, .troltext h2 {
  padding-bottom: 1%;
}

.portfolio, .web, .hang {
  display: flex;
  width: 100%;
  color: #344274;
}

.pimg, .wimg, .hangimg {
  margin-left: 5%;
  position: relative;
}

.dimg, .trolimg, .raiiimg {
  display: flex;
  position: relative;
}

.dstext, .troltext, .raiitext  {
  position: relative;
  margin-top: 5%;
  padding-left: 5%;
}

.pcontent, .wcontent, .raiicontent, .hangcontent, .trolcontent, .dstcontent {
  display: flex;
  color: #344274;
}

.raiicontent, .trolcontent, .dstcontent  {
  margin-left: -10%;
}

.artun, .laptop {
  margin-left: 35%;
  margin-top: 35%;
  position: absolute;
  z-index: 1;
}

.ptext, .wtext, .hangtext {
  margin-top: 10%;
  margin-left: 10%;
}

@media(max-width: 1366px){
  .pcontent, .wcontent {
    margin-right: 20px;
    margin-left: -30px;
  }

  .dstcontent, .raiicontent, .trolcontent {
    margin-right: 20px;
    margin-left: -15%;
  }

  .phex img, .dstcontent img, .whex img, .raiicontent img, .himg img, .trolcontent img {
    width: 400px;
    height: 400px;
  }

  .dst img {
    width: 300px;
    height: 150px;
  }

  .raiinet img {
    width: 150px;
    height: 250px;
  }
  
  .hangman img {
    margin-top: 10%;
    width: 250px;
    height: 150px;
  }

  .trolley img {
    width: 250px;
    height: 200px;
    margin-top: -7%;
  }

  .laptop {
    margin-left: 30%;
  }
}

/* Portfolio Section */
.portfolio {
  margin-top: 10%;
}

.pnoblob {
  display: flex;
  flex-direction: column;
}

.portblob {
  margin-top: -20%;
}

.ptext {
  width: 500px;
}

.ptext h2 {
  border-bottom: solid;
}

/* DST */
.dst {
  margin-left: 12%;
  margin-top: 30%;
  z-index: 1;
  position: absolute;
}

.dhexas {
  display: flex;
}

/* Web Design */

.wtext {
  width: 550px;
}


/* RAIInet */
.raiinet {
  margin-top: 20%;
  margin-left: 30%;
  z-index: 1;
  position: absolute;
}

/* Hangman */
.hangman {
  margin-left: 20%;
  margin-top: 30%;
  position: absolute;
  z-index: 1;
}

.hangtext {
  width: 500px;
}


/* Trolley */
.trol {
  margin-bottom: 150px;
}

.trolley {
  margin-top: 30%;
  margin-left: 20%;
  z-index: 1;
  position: absolute;
}


@media(max-width: 932px) {
  .pcontent, .wcontent, .hangcontent {
    transform: scale(0.8);
  }

  .pcontent {
    margin-left: -15%;
  }

  .ptext, .wtext, .hangtext {
    margin-left: 1%;
    width: 300px;
  }

  .dstcontent {
    transform: scale(0.8);
    display: flex;
    margin-top: -80px;
    margin-left: -10%;
  }

  .dstext, .raiitext {
    padding-left: 1%;
    width: 600px;
  }

  .emptydh img, .rpoly img, .trolpoly img {
    display: none;
  }

  .wcontent {
    margin-top: -15px;
    margin-left: -12%;
  }

  .raiicontent, .trolcontent {
    transform: scale(0.8);
    display: flex;
    margin-top: -20px;
    margin-left: -10%;
  }

  .hangcontent {
    margin-top: -20px;
    margin-left: -11%;
  }

  .troltext {
    padding-left: 1%;
  }
}

@media(max-width: 600px) {
  .pcontent, .dstcontent, .hangcontent, .wcontent, .trolcontent, .raiicontent {
    display: block;
    margin-left: -5%;
  }

  .dstext, .troltext, .raiitext {
    margin-left: 5%;
    width: 400px;
  }

  .ptext, .wtext, .hangtext {
    margin-left: 10%;
    width: 350px;
  }

  .trol {
    margin-bottom: 200px;
  }

  .raiinet img {
    margin-top: -10px;
  }

  .trolley img {
    margin-top: -15px;
    margin-left: -5px;
  }
}

@media(max-width: 300px) {
  .pcontent, .hangcontent, .wcontent {
    transform: scale(0.6);
    display: block;
    margin-left: -25%;
  }

  .dstcontent, .trolcontent, .raiicontent {
    transform: scale(0.6);
    display: block;
    margin-left: -15%;
    margin-top: -200px;
  }

  .hangcontent, .wcontent {
    margin-top: -200px;
  }

  .dstext, .troltext, .raiitext {
    margin-left: 5%;
    width: 400px;
  }

  .ptext, .wtext, .hangtext {
    margin-left: 10%;
    width: 350px;
  }

  .trol {
    margin-bottom: 200px;
  }

  .artun img {
    margin-left: -30px;
    margin-top: -30px;
  }

  .raiinet img {
    margin-top: 10px;
    margin-left: 20px;
  }

  .trolley img {
    margin-top: 10px;
    margin-left: 10px;
  }
}