* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  /* scroll bar */
  /* width */
  ::-webkit-scrollbar {
    width: 0.2vw;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: black;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #ff3131;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #ff3131;
    width: 0.5vw;
  }
}

body {
  font-family: "Courier Prime", "Roboto Mono", "Space Grotesk", sans-serif;
}

/* POP UP SECTION  */

.popup {
  height: 90vh;
  width: 95vw;
  margin: auto;
  /*background-color: rgba(247, 247, 247, 0.987); 
  background: radial-gradient(rgb(0, 0, 0), rgb(0, 0, 0), rgba(0, 0, 0, 0.976), rgb(0, 0, 0), rgba(0, 18, 50, 0.79));*/
  background: radial-gradient(white, white, rgba(247, 247, 247, 0.987), rgba(247, 247, 247, 0.987), rgba(211, 211, 211, 0.785)); 
  z-index: 99;
  position: absolute;
  position: fixed;
  left: 2.5vw;
  top: 2.5vh;
  border-radius: 2.5vw;
  box-shadow: 2px 2px 20px #004aad;
  border: 1px solid #ababab5e;
  display: block;
}

.popupwelcome {
  color: rgba(255, 255, 255, 0.168);
  font-family: "Roboto Mono", sans-serif;
  font-weight: 100;
  font-size: 5vh;
  text-align: left;
  padding-top: 6vh;
  padding-left: 2.2vw;
}

.popupinner {
  height: 77vh;
  width: 90vw;
  margin: auto;
  display: inline;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  z-index: 2;
}

.popupheading {
  font-family: "Courier Prime", serif;
  font-weight: 100;
  width: 30vw;
  color: #757575;
  font-size: 2vh;
}

.textlogo {
  height: 5vh;
  width: 10vw;
}

.puheading {
  color: #b4b4b4;
  font-weight: 500;
  font-size: 3vh;
}

.popupgrid {
  width: 85vw;
  height: 55vh;
  margin: auto;
  display: inline;
  display: flex;
  margin-top: 9vh;
  justify-content: space-evenly;
}

.gridshape {
  height: 44vh;
  width: 14vw;
  cursor: pointer;
  display: inline;
  display: flex;
}

.wip {
  opacity: 0.3;
}

.popupoverlay {
  height: 44vh;
  width: 14vw;
  margin: auto;
  display: inline;
  position: absolute;
  z-index: 1;
  background: linear-gradient(rgba(0, 0, 0, 0.59), rgba(0, 0, 0, 0.59), black);
  transform-style: preserve-3d;
}

.popupoverlay:hover {
  height: 44vh;
  width: 14vw;
  margin: auto;
  position: absolute;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.323);
  transform-style: preserve-3d;
  transition: 0.6s ease-in-out;
}

.popup2overlay {
  height: 44vh;
  width: 14vw;
  margin: auto;
  display: inline;
  position: absolute;
  z-index: 1;
  background: linear-gradient(rgba(0, 0, 0, 0.59), rgba(0, 0, 0, 0.59), black);
  transform-style: preserve-3d;
}

.popup2overlay:hover {
  height: 44vh;
  width: 14vw;
  margin: auto;
  position: absolute;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.298);
  transform-style: preserve-3d;
  transition: 0.6s ease-in-out;
}

.popup3overlay {
  height: 44vh;
  width: 14vw;
  margin: auto;
  display: inline;
  position: absolute;
  z-index: 1;
  background: linear-gradient(rgba(0, 0, 0, 0.59), rgba(0, 0, 0, 0.59), black);
  transform-style: preserve-3d;
}

.popup3overlay:hover {
  height: 44vh;
  width: 14vw;
  margin: auto;
  position: absolute;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.343);
  transform-style: preserve-3d;
  transition: 0.6s ease-in-out;
}

.popup4overlay {
  height: 44vh;
  width: 14vw;
  margin: auto;
  display: inline;
  position: absolute;
  z-index: 1;
  background: linear-gradient(rgba(0, 0, 0, 0.59), rgba(0, 0, 0, 0.59), black);
  transform-style: preserve-3d;
}

.popup4overlay:hover {
  height: 44vh;
  width: 14vw;
  margin: auto;
  position: absolute;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.326);
  transform-style: preserve-3d;
  transition: 0.6s ease-in-out;
}

.pugrid1 {
  transform-style: preserve-3d;
  transform: perspective(8cm) rotateX(-10deg) rotateY(30deg);
  z-index: 0;
  background-image: url("images/IMG_4507.PNG");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position-x: 100%;
  background-position-y: 100%;
  background-size: cover;
  background-origin: padding-box;
  height: 44vh;
  width: 14vw;
  object-fit: cover;
  object-position: 100% 100%;
  display: inline;
}

.pugrid1:hover {
  background-color: rgba(0, 0, 0, 0.301);
  transform-style: preserve-3d;
  transform: scale(1.2, 1.2);
  transition: 0.6s ease-in-out;
}

.pugrid2 {
  transform-style: preserve-3d;
  transform: perspective(8cm) rotateX(-10deg) rotateY(30deg);
  z-index: 0;
  background-image: url("images/IMG_7259.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position-x: 100%;
  background-position-y: 100%;
  background-size: cover;
  background-origin: padding-box;
  height: 44vh;
  width: 14vw;
  object-fit: cover;
  object-position: 100% 100%;
  display: inline;
}

.pugrid2:hover {
  background-color: rgba(0, 0, 0, 0.33);
  transform-style: preserve-3d;
  transform: scale(1.2, 1.2);
  transition: 0.6s ease-in-out;
}

.pugrid3 {
  transform-style: preserve-3d;
  transform: perspective(8cm) rotateX(-10deg) rotateY(30deg);
  z-index: 0;
  background-image: url("images/top-view-hands-typing-keyboard.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position-x: 10%;
  background-position-y: 100%;
  background-size: cover;
  background-origin: padding-box;
  height: 44vh;
  width: 14vw;
  object-fit: cover;
  object-position: 100% 100%;
  display: inline;
}

.pugrid3:hover {
  background-color: rgba(0, 0, 0, 0.301);
  transform-style: preserve-3d;
  transform: scale(1.2, 1.2);
  transition: 0.6s ease-in-out;
}

.pugrid4 {
  transform-style: preserve-3d;
  transform: perspective(8cm) rotateX(-10deg) rotateY(30deg);
  z-index: 0;
  background-image: url("images/@seincollective\ -\ 9.PNG");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position-x: 60%;
  background-position-y: 100%;
  background-size: cover;
  background-origin: padding-box;
  height: 44vh;
  width: 14vw;
  object-fit: cover;
  object-position: 100% 100%;
  display: inline;
}

.pugrid4:hover {
  background-color: rgba(0, 0, 0, 0.301);
  transform-style: preserve-3d;
  transform: scale(1.2, 1.2);
  transition: 0.6s ease-in-out;
  animation-name: popupani;
  animation-duration: 4s;
  animation-delay: 0s;
  animation-iteration-count: 5;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes popupani {
  /*
  0% {left: 5vw; right: 0vw;}
  25% {left: 0vw; right: 5vw;}
  50% {left: 5vw; right: 0vw;}
  75% {left: 0vw; right: 5vw;}
  100% {left: 5vw; right: 0vw;}
  
  0% {bottom: 10; top:20px;}
  25% {bottom: 10px; top:0px;}
  50% {bottom: 0; top:10px;}
  75% {bottom: 10px; top:0px;}
  100% {bottom: 0; top:10px;} */
}

.popupsubheading {
  transform: rotate(-90deg);
  font-size: 3.5vh;
  font-family: "Boldonse", system-ui;
  display: inline;
  color: white;
  height: 8vh;
  width: 15vw;
  position: relative;
  letter-spacing: 0.1vw;
  top: 22.2vh;
  right: 4vw;
  position: absolute;
  z-index: 3;
}

.popupsubheading2 {
  transform: rotate(-90deg);
  font-size: 3.5vh;
  font-family: "Boldonse", system-ui;
  display: inline;
  color: white;
  height: 11vh;
  width: 14vw;
  position: relative;
  letter-spacing: 0.1vw;
  top: 21.5vh;
  right: 3.6vw;
  line-height: 5vh;
  position: absolute;
  z-index: 3;
}

a.Alink-vers:link, a.Alink-vers:visited {
  font-family: "Roboto Mono", sans-serif;
  color: white;
  font-size: 1.4vh;
  text-decoration: none;
  position: absolute;
  z-index: 4;
  display: inline;
  display: flex;
  border: 1px solid white;
  border-radius: 1vw;
  background-color: black;
  width: 9vw;
  height: 7vh;
  top: 33vh;
  left: 7vw;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

a.Alink-vers:hover, a.Alink-vers:active {
  color: black;
  font-size: 1.5vh;
  left: 5.8vw;
  border: 1px solid black;
  background-color: white;
  transition: 0.8s ease-in-out;
  transform: scale(1.1,1.1);
}

.gohome {
  display: inline;
  display: flex;
  height: 8vh;
  width: 30vw;
  margin: auto;
  align-items: center;
  justify-content: center;
}

a.Alink-gohome:link, a.Alink-gohome:visited {
  text-decoration: none;
  color: #8e8e8e;
  font-size: 3vh;
  padding: 1vw;
}

a.Alink-gohome:hover, a.Alink-gohome:active {
  color: #004aad;
}

.header-background {
  background-image: url("images/Marketing\ Portfolio\ and\ Resume\ Website\ in\ Black\ and\ White\ Neon\ Green\ Professional\ Style.png\ \(2\).png");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position-x: 100%;
  background-position-y: -26%;
  background-size: contain;
  background-origin: padding-box;
  z-index: 0;
  height: 200vh;
  object-fit: cover;
  object-position: 100% 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.header-background-inner {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  margin: auto;
  height: 12vh; /* adjust this for the space above the nav */
  width: 95vw;
  z-index: 2;
  position: relative;
}

.logobox1 {
  display: flex;
  flex-direction: column;
  height: 35vh;
  width: 20vw;
  margin: auto;
  top: 53vh;
  left: 0vw;
  position: absolute;
  z-index: 99;
  align-items: center;
  justify-content: center;
  
  /*
  box-shadow: 2px 2px 50px #004aad; */
}

.logobox1a {
  display: inline-block;
  margin-top: 1vh;
  padding-left: 0vw;
}

.logobox1b {
  display: block;
  margin-top: 0vh;
}

.logo1a {
  height: 10vh;
  margin-left: -5vh;
}

.logo1b {
  height: 19vh;
  margin-top: -1vh;
}

.fa-brands {
  color: black;
  font-size: 3vh;
}

.navbox {
  height: 12vh;
  width: 40vw;
  margin-top:0vh;
  margin-left:2vw;
  align-content: center;
  padding-top: 3vh;
  
}

.navul {
  list-style: none;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: auto;
}

.navli {
  font-family: "Roboto Mono", serif;
  font-optical-sizing: auto;
  font-style: normal;
  text-decoration: none;
  font-size: 2vh;
  font-weight: 300;
  text-align: left;
  line-height: 10vh;
}

.navlid {
  font-family: "Roboto Mono", serif;
  font-optical-sizing: auto;
  font-style: normal;
  text-decoration: none;
  text-decoration: none;
  font-size: 2vh;
  text-align: left;
  line-height: 3vh;
}

a.Alink-nav:link,
a.Alink-nav:visited {
  text-decoration: none;
  color: black;
  font-size: 2vh;
  font-weight: 400;
}

a.Alink-nav:hover,
a.Alink-nav:active {
  color: #ff3131;
  font-size: 2.4vh;
  font-weight: 300;
  transition: 0.5s ease-out;
}

/*
.iconsbox {
  display: flex;
  justify-content: space-between;
  width: 6vw;
}*/

.bagicon {
  display: flex;
}

.searchicon {
  display: flex;
}

.barsicon {
  display: none;
}

.fa-solid {
  color: black;
  size: 2vh;
}

header {
  height: 80vh;
}

.headercontainer {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

.biotextimgbox {
  display: flex;
  justify-content: space-between;
  height: 77vh;
  width: 98vw;
  margin: auto;
}

.biotb-title {
  display: inline;
  width: 50vw;
  height: 15vh;
  text-align: left;
  padding-top: 3.3vh;
  margin-top: 60vh;
}

.imgtitles {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 45vw;
}
 
.biotb-img {
  display: inline;
  margin-top: -15vh;
  margin-right: 1.8vw;
  position: relative;
  animation-name: myani;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-iteration-count: 5;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  width: 7.3vw;
  height: 33.4vh;
  align-self: flex-end;
}

.biotb-image {
  width: 7.3vw;
  height: 33vh;
  box-shadow: 2px 2px 7px black;
}

@keyframes myani {
  0% {border-bottom: 2px solid #ff3131; right:0px; top:0px;}
  25% {border-bottom: 2px solid #004aad; right:500px; top:0px;}
  50% {border-bottom: 2px solid #757575; right:500px; top:0px;}
  75% {border-bottom: 2px solid #ff3131; right:0px; top:0px;}
  100% {border-bottom: 2px solid #004aad; right:0px; top:0px;}
}

.bioheading {
  color: black;
  font-family: "Boldonse", system-ui;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 7.6vh;
  line-height: 9vh;
  letter-spacing: 0vw;
  font-weight: 100;
  display: none;
}

.biosup {
  font-family: "Roboto Mono", sans-serif;
  font-size: 3vh;
  font-weight: 500;
  color: #004aad;
}

.folio-txt {
  padding-left: 0vw;
}

.biopara {
  color: black;
  font-family: "Roboto Mono", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-size: 2vh;
  letter-spacing: 0.3rem;
  line-height: 4vh;
}

.bannerbkg {
  height: 105vh;
  width: 95vw;
  margin-left: 2vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
}

.logobox2 {
  margin-top: 0vh;
}

.logo2 {
  height: 88vh;
}

.logobkg {
  height: 35vh;
  position: absolute;
  left: 5vw;
  top: 105vh;
  opacity: 1;

}

.titles {
  display: inline;
  width: 44vw;
  height: 14vh;
  padding-top: 0vh;
  margin-top: 14vh;
  margin-left: 0vw;
  text-align: right;
}

.titles-txt {
  font-family: "Roboto Mono", serif;
  font-optical-sizing: auto;
  font-style: normal;
  text-align: right;
  line-height: 4vh;
  display: inline;
  font-size: 2vh;
  font-weight: 300;
  color: black;
}

a.Alink-title:link,
a.Alink-title:visited {
  font-size: 2vh;
  color: black;
  text-decoration: none;
  font-weight: 400;
}

a.Alink-title:hover,
a.Alink-title:active {
  color: #ff3131;
  font-size: 2.2vh;
  font-weight: 400;
  letter-spacing: 0.2rem;
  transition: 0.5s ease-out;
}

.about-section {
  display: flex;
  flex-direction: row;
  width: 15vw;
  height: 35vh;
  justify-content: space-between;
  margin-top: 0vh;
  margin-left: 57vw;
}

.about-sec-img {
  margin-left: 15.3vw;
  margin-top: 0.3vh;
  /*
  background-image: url("images/IMG_6009.DNG");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position-x: 100%;
  background-position-y: 77%;
  background-size: 100%;
  background-origin: padding-box;
  height: 20vh;
  object-fit: cover;
  object-position: 100% 100%; */
}
 /*
.about-img {
  height: 15vh;
  transition: height 17vh;
 
}*/

.about-img:hover {
  height: 17vh;
  transition: height 1s;
}

.about-sec-title {
  display: inline;
  width: 80vw;
  height: 35vh;
  margin-left: -40vw;
  margin-top: 0vh;
}

.about-sec-title-txt {
  font-family: "Courier Prime", serif;
  font-weight: 100;
  font-size: 14vh;
  color: black;
  text-align: right;
  line-height: 11vh;
  padding-top: 0vh;
}

.really {
  font-family: "Courier Prime", serif;
  font-weight: 100;
  font-size: 5vh;
  color: #757575;
  text-align: center;
}

.about-sec-txt {
  position: absolute;
  top: 120vh;
  left: 25.2vw;
  width: 10vw;
  height: 10vh;
  line-height: 5vh;
  padding-top: 3vh;
 }

.about-sec-txt-txt {
  font-size: 6vh;
  color: #4d4d4d;
  text-align: left;
  font-family: "Roboto Mono", serif;
  font-optical-sizing: auto;
  font-style: normal;
  line-height: 4vh;
  letter-spacing: 0.2rem;
  display: inline;
}

.bio-sect {
  height: 64vh;
  width: 72vw;
  /* background: linear-gradient(
    180deg,
    black,
    #880000 
  );
  background-image: url("images/david\ ero\ bkg.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position-x: 100%;
  background-position-y: 77%;
  background-size: cover;
  background-origin: padding-box;
  object-fit: cover;
  object-position: 100% 100%;*/
  z-index: 0;
  position: relative;
  top: -3vw;
}

.bio-sect-overlay {
  height: 60vh;
  background-color: white;
  /*
  background: linear-gradient(
    180deg,
      #ffffff,
      #fafafa,
      #f5f5f5,
      #e5e5e5,
      #d4d4d4);*/
  position: relative;
  z-index: 1;
}

.bio-sect-box {
  margin: auto;
  width: 69vw;
  height: 54vh;
  align-self: center;
  padding-top: 4vh;
  z-index: 2;
  position: absolute;
  top: 0vh;
  left: 2.5vw;
}

.bio-sect-txt {
  font-size: 2.2vh;
  color: black;
  text-align: justify;
  font-family: "Roboto Mono", serif;
  font-optical-sizing: auto;
  font-style: normal;
  line-height: 4.8vh;
  letter-spacing: 0.1rem;
  display: inline;
  z-index: 3;
 
}

.skills-spec {
  background: linear-gradient(
    180deg,
    white,
    white,
    white,
    #d6c09f
  );
  height: 105vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.skills-spec-box {
  height: 20vh;
  width: 50vw;
  margin-top: 8vh;
  padding-left: 2.2vw;
  padding-top: 2vh;
  display: flex;
  justify-content: space-between;
}

.skills-spec-txt {
  color: black;
  font-size: 13vh;
  text-align: left;
  line-height: 6vh;
  display: block;
  font-family: "Courier Prime", serif;
  line-height: 12vh;
  font-weight: 200;
  top: 10vh;
  position: sticky;
  z-index: 0;
  letter-spacing: -0.5vw;
  padding-top: 4vh;
}

.certificates {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 30vh;
  margin: auto;
  align-items: center;
  margin-top: 0vh;
}

.cert1 {
  height: 20vh;
}

.cert1:hover {
  height: 25vh;
  transition: 1s ease-in-out;
  transform: scale(1.1,1.1)
}

.cert2 {
  height: 20vh;
}

.cert2:hover {
  height: 25vh;
  transition: 1s ease-in-out;
  transform: scale(1.1,1.1)
}

.areas-of-practice {
  display: flex;
  width: 93vw;
  margin: auto;
  justify-content: space-between;
  margin-top: -3vh;
}

.area1box, .area2box, .area3box, .area4box {
  width: 28vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.arealine {
  border-right: 1.5px solid #be0032;
}

.fa-solid {
  color: #8e8e8e;
  font-size: 2.5vh;
  padding-bottom: 2vh;
}

.areaheading {
  font-size: 2.5vh;
  color: black;
  font-weight: 500;
  font-family: "Roboto Mono", serif;
  font-optical-sizing: auto;
  font-style: normal;
  line-height: 3vh;
  letter-spacing: 0.1rem;
}

.areaul {
  list-style-type: square;
  padding-top: 2.5vh;
}

.areali {
  color: black;
  font-weight: 400;
  font-size: 1.9vh;
  font-family: "Roboto Mono", serif;
  font-optical-sizing: auto;
  font-style: normal;
  line-height: 4vh;
}

/*
.todolist {
  background-image: url("images/bkg\ 2.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position-x: 100%;
  background-position-y: 77%;
  background-size: 100%;
  background-origin: padding-box;
  height: 100vh;
  object-fit: cover;
  object-position: 100% 100%;
  width: 100%;
}*/


.create {
  background-color: black;
  height: 121vh;
}

.create-heading {
  height: 40vh;
  width: 95vw;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-top: 3vh;
}

.create-head {
  width: 40vw;
  height: 30vh;
  align-self: self-end;
  margin-top: 4vh;
}

.create-head1 {
  font-family: "Courier Prime", serif;
  font-weight: 100;
  font-size: 9vh;
  font-optical-sizing: auto;
  font-style: normal;
  color: white;
  padding-top: 5vh;
}

.create-head2 {
  font-family: "Courier Prime", serif;
  font-weight: 100;
  font-size: 15vh;
  color: #9e8461;
  margin-left: 10vw;
  margin-top: -3vh;
  text-align: right;
}

.create-subhead {
  display: inline-block;
  width: 40vw;
}

.create-subhead-txt {
  font-family: "Roboto Mono", serif;
  color: white;
  font-size: 3vh;
  font-weight: 200;
  font-optical-sizing: auto;
  font-style: normal;
}

.create-body {
  height: 75vh;
  margin-top: 5vh;
  display: flex;
}

.create-img {

}

.create-pic {
  height: 74.8vh;
  margin-left: 2.5vw;
}

.create-logo {
  display: inline;
  padding-top: 12vh;
  margin-left: -3vw;
}

.create-logo-img {
  height: 60vh;
}

.create-contentbox {
  background: linear-gradient(
    180deg,
    #880000,
    black 
  );
  height: 70vh;
  width: 70vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-left: -4vw;
  padding-top: 4vh;
}

.create-content1, .create-content3 {
  width: 17.6vw;
  height: 38vh;
}

.create-content1-img, .create-content3-img {
  height: 38vh;
}

.create-content2 {
  width: 30vh;
  height: 38vh;
}

.create-content2-img {
  height: 38vh;
}

a.Alink-create-content:link, a.Alink-create-content:visited {
  height: 38vh;
  display: block;
  transition: 0.7s ease-in-out;
}

a.Alink-create-content:hover, a.Alink-create-content:active {
  height: 38vh;
  transform: scale(1.1, 1.1);
  box-shadow: 2px 2px 10px black;
}

.create-content-heading {
  font-family: "Roboto Mono", serif;
  font-size: 2vh;
  color: white;
  text-align: left;
  margin-top: 2vh;
  padding-bottom: 1vh;
}

.create-content-para {
  font-family: "Roboto Mono", serif;
  font-size: 1.6vh;
  font-weight: 300;
  color: white;
  text-align: justify;
}

.create-link {
  width: 10vw;
  height: 10vh;
  position: relative;
  top: -8vh;
  left: 88vw;
  display: inline;
}

a.Alink-creations:link, a.Alink-creations:visited {
  color: white;
  font-family: "Roboto Mono", serif;
  font-size: 2.6vh;
  font-weight: 300;
  text-decoration: none;
}

a.Alink-creations:hover, a.Alink-creations:active {
  font-family: "Roboto Mono", serif;
  font-size: 3vh;
  font-weight: 400;
  color: white;
  text-shadow: 2px 2px 5px #be0032;
  transition: .5s ease;
}

.logos-created {
  background-color: black;
  height: 30vh;
  padding-top: 6vh;
}

.logos-inner {
  height: 22vh;
  width: 94vw;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.logos-heading {
  font-family: "Courier Prime", serif;
  color: white;
  font-size: 3vh;
  font-weight: 300;
  text-align: center;
}

.logos-headbold {
  color: #9e8461;
  letter-spacing: 0.03rem;
  font-size: 4vh;
}

.logos-box {
  display: flex;
  height: 12vh;
  justify-content: space-between;
  margin-top: 5vh;
}

.logos {

}

.logo-img {
  height: 5vh;
}

.alonglogo {
  height: 7vh;
}

.adlogo {
  height: 6vh;
}

.pairedlogo {
  height: 5vh;
}

.yatilogo {
  height: 8vh;
}

.cclogo {
  height: 4vh;
}

.fklogo {
  height: 5vh;
}

.lawyer {
  height: 100vh;
  background: linear-gradient(
      180deg,
      black,
      #2f0c08 
    );
  padding-top: 2vh;
}

.lawyerinner {
  height: 95vh;
  margin: auto;
  width: 95vw;
  background-color: white;
  background-image: url("images/IMG_7259.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-x: 100%;
  background-position-y: 30%;
  background-size: contain;
  background-origin: padding-box;
  object-fit: cover;
  object-position: 100% 100%;
  border-radius: 3vw;
  align-content: center;
}

.lawyertextbox {
  border: 2px solid red;
  height: 70vh;
  width: 50vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ltbheadbox {
  width: 30vw;
  border: 2px solid orange;
}

.ltbheading {
  font-family: "Courier Prime", serif;
  font-weight: 100;
  font-size: 9vh;
  font-optical-sizing: auto;
  font-style: normal;
  color: black;
  padding-top: 5vh;
}

.ltbheading2 {
  font-family: "Courier Prime", serif;
  font-weight: 100;
  font-size: 15vh;
  color: #2f0c08;
  margin-left: 10vw;
  margin-top: -3vh;
  text-align: right;
}

.ltbparabox {

}

.ltbpara {

}

.collab {
  height: 102vh;
  background-image: url("images/david\ ero.png.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-x: 100%;
  background-position-y: 30%;
  background-size: cover;
  background-origin: padding-box;
  object-fit: cover;
  object-position: 100% 100%;
}

.collabbkg {
  height: 100vh;
  width: 100%;
}

.companiestxt {
  color: #880000;
  position: absolute;
  font-size: 3.8vh;
  font-weight: 500;
  text-align: center;
  width: 60vw;
  display: block;
  margin: auto;
  left: 20vw;
  padding-top: 8vh;
}

.companieslogobox {
  height: 8vh;
  width: 95vw;
  top: 87vh;
  position: relative;
  margin: auto;
  display: flex;
  justify-content: space-between;
}

.companieslogo {
  height: 4vh;
}

.companieslogo-ps {
  height: 5vh;
}

.companieslogo-dd {
  height: 7vh;
  margin-top: -2vh;
}

.companieslogo-glo {
  height: 6vh;
  clip-path: circle(40%);
}

.projects {
  height: 402.6vh;
  display: flex;
  flex-direction: column;
  background-image: url("images/IMG_2669.JPG");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-x: 100%;
  background-position-y: 40%;
  background-size: cover;
  background-origin: padding-box;
  object-fit: cover;
  object-position: 100% 100%;
}

.projects1 {
  height: 401vh;
  padding-top: 4vh;
}

.projects-heading-bold {
  color: black;
  font-size: 15vh;
  font-weight: 200;
  position: relative;
  top: 35vh;
  margin-left: 3vw;
  position: sticky;
  z-index: 0;
  letter-spacing: -0.3vw;
}

.projects-heading-para {
  color: #be0032;
  font-size: 2vh;
  text-align: left;
  position: relative;
  position: sticky;
  top: 50vh;
  margin-left: 4vw;
}

.projects-logo {
  height: 15vh;
  position: relative;
  margin-top: 10vh;
  position: sticky;
  z-index: 0;
  margin-left: 89vw;
  top: 75vh;
}

.projects2 {
  height: 354.1vh;
  z-index: 2;
  background: linear-gradient(rgba(255, 255, 255, 0.108),#d6c09f5f, #d6c09fcd);
  position: relative;
  bottom: 0vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 0vh;
}

.project1, .project2, .project3, .project4, .project5, .project6, .project7, .project8 {
  width: 34.9vw;
  height: 32.9vh;
  margin: auto;
  position: relative;
  box-shadow: 1px 1px 4px black;
}

.project1:hover, .project2:hover, .project3:hover, .project4:hover, .project5:hover, .project6:hover, .project7:hover, .project8:hover {
  width: 34.9vw;
  height: 32.9vh;
  margin: auto;
  position: relative;
  transition: 0.7s ease-in-out;
  transform: scale(1.2,1.2);
}

/* image */
.code-grid-i1, .code-grid-i2, .code-grid-i3, .code-grid-i4, .code-grid-i5, .code-grid-i6, .code-grid-i7, .code-grid-i8 {
  opacity: 1;
  display: block;
  height: 32.9vh;
  width: 34.9vw;
  transition: .5s ease;
  backface-visibility: hidden;
}

/* what happens when the div and image are hovered */
.project1:hover, .code-grid-i1, .project2:hover, .code-grid-i2, .project3:hover, .code-grid-i3, .project4:hover, .code-grid-i4, .project5:hover, .code-grid-i5, .project6:hover, .code-grid-i6, .project7:hover, .code-grid-i7, .project8:hover, .code-grid-i8 {
  opacity: 0.9;
  box-shadow: 5px 10px 10px black;
}

/* to show the text when the div is hovered */
.project1:hover .code-grid-img-txt, .project2:hover .code-grid-img-txt, .project3:hover .code-grid-img-txt, .project4:hover .code-grid-img-txt, .project5:hover .code-grid-img-txt, .project6:hover .code-grid-img-txt, .project7:hover .code-grid-img-txt, .project8:hover .code-grid-img-txt {
  opacity: 1;
}

/*
a.Alink-grid:link, a.Alink-grid:visited {}
a.Alink-grid:hover, a.Alink-grid:active {} */

.code-grid-img-txt /* text div*/ {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.cgi-txt {
  font-size: 7vh;
  color: white;
  text-shadow: 2px 2px 10px black;
}

.fa-brands {
  font-size: 3vh;
  color: #be0032;
}

.shiftright {
  left: 13vw;
}

.shiftleft {
  right: 18vw;
}

.moreprojectslink {
  height: 5vh;
  width: 15vw;
  position: relative;
  left: 70vw;
  bottom: 7vh;
}

a.Alink-moreprojects:link, a.Alink-moreprojects:visited {
  font-size: 2.8vh;
  text-decoration: none;
  color: #be0032;
}

a.Alink-moreprojects:hover, a.Alink-moreprojects:active {
  font-size: 2.8vh;
  text-decoration: none;
  color: #880000;
}

.services {
  height: 100vh;
  background: linear-gradient(#d6c09fcd, #d6c09f, #9e8461, #9e8461);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.serv-heading {
  text-align: center;
  font-size: 6vh;
  font-weight: 500;
  color: black;
  padding-top: 10vh;
}

.serv-parting {
  height: 7vh;
  width: 30vw;
  margin: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 7vh;
}

.serv-label {
  font-size: 2.2vh;
  color: black;
  font-weight: 300;
  background-color: white;
  padding: 1vw;
  border-radius: 2vw;
  width: 8vw;
  text-align: center;
  transform: rotate(-5deg);
  animation-name: serv-ani;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-iteration-count: 15;
  animation-direction: normal;
  animation-timing-function: ease-in-out;
  cursor: pointer;
}

@keyframes serv-ani {
  0% {transform: rotate(-5deg)}
  25% {transform: rotate(0deg)}
  50% {transform: rotate(5deg)}
  75% {transform: rotate(0deg)}
  100% {transform: rotate(-5deg)}
}

.line {
  color: #be0032;
  size: 2px;
  margin-top: 1.8vh;
}

.serv-grid {
  height: 40vh;
  width: 80vw;
  margin: auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15vh;
}

.serv1, .serv2, .serv3 {
  width: 23vw;
  height: 35vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: black;
  padding: 3vh;
  border-radius: 1vh;
  cursor: pointer;
}

.serv1:hover, .serv2:hover, .serv3:hover {
  width: 23vw;
  height: 33vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(rgba(0, 0, 0, 0.479), black);
  padding: 3vh;
  border-radius: 1vh;
  cursor: pointer;
  transform: scale(1.1, 1.1);
  transition: 0.5s ease-in-out;
}

.serv-title {
  font-size: 3.3vh;
  color: white;
  font-weight: 700;
}

.serv-para {
  font-size: 2.2vh;
  color: white;
  text-align: left;
  padding-bottom: 2vh;
}

.fa-solid {
  font-size: 4vh;
  color: #880000;
  padding-top: 1vh;
}

.connect {
  height: 90vh;
  width: 100%;
  background-color: #9e8461;
  z-index: -1;
  position: relative;
}

.connect-inner {
  height: 90vh;
  background-image: url("images/IMG_1805.JPG");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-x: 100%;
  background-position-y: 5%;
  background-size: cover;
  background-origin: padding-box;
  object-fit: cover;
  object-position: 100% 100%;
  display: flex;
  flex-direction: column;
  border-top-left-radius: 10vw;
  border-top-right-radius: 10vw;
}

.connect-overlay {
  height: 90vh;
  width: 99.8vw;
  z-index: 1;
  background: linear-gradient(rgba(0, 0, 0, 0.955), rgba(0, 0, 0, 0.419), rgba(0, 0, 0, 0.583), black);
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 10vw;
  border-top-right-radius: 10vw;
}

.connect-inner-cta {
  position: relative;
  height: 40vh;
  width: 60vw;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 3;
  align-items: center;
  margin-top: 15vh;
}

.solid2 {
  color: white;
  font-size: 10vh;
  padding-left: 3vw;
}

.cic-heading {
  color: #d6c09f;
  font-size: 6vh;
  text-align: center;
  font-weight: 500;
  line-height: 7vh;
  text-shadow: 2px 2px 6px black;
}

.cic-buttons {
  height: 10vh;
  width: 35vw;
  display: flex;
  justify-content: space-around;
  z-index: 4;
  position: relative;
}

a.cic-email:link, a.cic-email:visited {
  height: 8vh;
  width: 12vw;
  text-decoration: none;
  display: flex;
  align-items: center;
  text-align: center;
  background-color: white;
  border-bottom: 1.5px solid black;
  cursor: pointer;
  color: black;
  font-weight: 300;
  font-size: 2.3vh;
  justify-content: center;
  z-index: 4;
}

a.cic-email:hover, a.cic-email:active {
  background-color: #d6c09f;
  height: 8vh;
  width: 15vw;
  text-decoration: none;
}

a.cic-WA:link, a.cic-WA:visited {
  background-color: black;
  border-bottom: 1.5px solid white;
  height: 8vh;
  width: 12vw;
  text-decoration: none;
  display: flex;
  align-items: center;
  text-align: center;
  cursor: pointer;
  color: white;
  font-weight: 300;
  font-size: 2.3vh;
  justify-content: center;
}

a.cic-WA:hover, a.cic-WA:active {
  width: 15vw;
  background-color: green;
}

.connect-inner-socials {
  width: 90vw;
  height: 4vh;
  margin: auto;
  display: flex;
  justify-content: space-between;
  z-index: 3;
}

.cis1 {

}

.cis1-para {
  color: white;
  font-size: 1.7vh;
  font-weight: 200;
}

.cis2 {

}

a.Alink-socials:link, a.Alink-socials:active {
  font-size: 1.7vh;
  color: white;
  text-decoration: none;
  cursor: pointer;
}

a.Alink-socials:hover, a.Alink-socials:visited {
  color: #be0032;
}