.pink-white {
  color: rgb(255, 220, 244);
}

.pink-white:hover {
  color: white;
}

.white-pink {
  color: white;
}

.white-pink:hover {
  color: rgb(255, 220, 244);
}

.pink-pink {
  color: #f07bb2;
}

.pink-pink:hover {
  color: rgb(255, 220, 244);
}

html {
  margin: 0px 0px;
  padding: 0px 0px;
  color: white;
  font-family: "Michroma", serif;
  font-weight: 400;
  font-style: normal;
}

body {
  margin: 0px;
  background-color: black;
}

.hidden {
  display: none;
}

.michroma-regular {
  font-family: "Michroma", serif;
  font-weight: 400;
  font-style: normal;
}

.wallpoet-regular {
  font-family: "Wallpoet", serif;
  font-weight: 400;
  font-style: normal;
}

.portfolio-title-con {
  display: flex;
  justify-content: center;
}

h4 {
  color: rgb(255, 183, 228);
}

#Case-study-jump {
  margin-bottom: 50px;
}

.study-page-text-1 {
  margin: 10px;
  font-size: 40px;
}

.study-page-text-2 {
  margin: 10px;
  color: rgb(255, 183, 228);
}

/* --- contact --- */
h3 {
  font-size: 40px;
}

#contact-hero-form form {
  display: flex;
  flex-direction: column;
}

#contact-hero-form .boxshadow, textarea {
  padding: 20px;
  border: 1px solid white;
  box-shadow: white 5px 5px;
  background-color: rgb(0, 0, 0);
  margin-bottom: 0px;
  width: auto;
  transition: all 0.2s ease;
  color: rgb(255, 183, 228);
}

#contact-hero-form .boxshadow:hover, textarea:hover {
  color: rgb(255, 183, 228);
  border: 1px solid rgb(255, 183, 228);
  box-shadow: 2px 2px rgb(255, 183, 228);
  transform: translate(3px, 3px);
}

#contact-hero-form textarea {
  height: 200px;
}

/* --send button-- */
#button {
  padding: 12px 28px;
  background: rgb(0, 0, 0);
  color: white;
  border: 1px solid white;
  box-shadow: white 5px 5px;
  width: 150px;
  align-self: flex-end;
  transition: all 0.2s ease;
}

#button:hover {
  color: rgb(255, 183, 228);
  border: 1px solid rgb(255, 183, 228);
  box-shadow: 2px 2px rgb(255, 183, 228);
  transform: translate(3px, 3px);
  text-shadow: rgba(251, 233, 245, 0.452) 0px 0px 16px;
}

#hero {
  height: 20px;
  align-items: center;
}

.line-top {
  background-color: rgb(122, 121, 121);
  height: 1px;
}

.line {
  background-color: rgb(122, 121, 121);
  height: 1px;
  margin-top: 100px;
  margin-bottom: 50px;
}

#hero img {
  width: 100%;
}

#hero-text {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  font-size: x-small;
  margin-top: 10px;
}

#hero-text div:first-child {
  justify-self: start;
}

#hero-text div:last-child {
  justify-self: end;
}

#hero-designer {
  display: flex;
  justify-content: center;
}

#hero-designer p {
  font-size: 13vw;
  font-weight: bold;
  margin: 0;
  padding: 0;
  text-decoration: line-through 0.5px;
}

#heart {
  display: flex;
  justify-content: center;
  width: 90%;
}

#heart img {
  width: 20%;
  margin-bottom: 50px;
}

header {
  padding: 10px;
  background: hsla(0, 0%, 83%, 0);
  display: flex;
  justify-content: flex-end;
  margin-bottom: 40px;
}

header h1 {
  position: absolute;
  left: 20px;
  top: 0px;
  font-size: 35px;
  z-index: 0;
}

#hamburger {
  z-index: 1;
}

#hamburger:hover {
  text-shadow: rgba(251, 233, 245, 0.452) 0px 0px 16px;
}

#hamburger, #close {
  font-size: 32px;
  background: none;
  border: none;
  color: rgb(255, 220, 244);
  cursor: pointer;
}

#hamburger, #close:hover {
  text-shadow: rgba(251, 233, 245, 0.452) 0px 0px 16px;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #000;
  color: rgb(255, 220, 244);
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.overlay.open {
  display: flex;
}

#close {
  position: absolute;
  top: 20px;
  right: 20px;
}

.overlay ul {
  list-style-type: none;
  text-align: center;
}

.overlay li {
  margin: 40px 0px;
}

.overlay a {
  color: rgb(255, 220, 244);
  text-decoration: none;
  font-size: 40px;
}

.overlay a:hover {
  color: white;
  text-shadow: rgba(251, 233, 245, 0.452) 0px 0px 16px;
}

#serviceCon {
  margin-top: 1200px;
  margin-bottom: 500px;
}

.backto {
  height: 100px;
}

.backto a {
  text-decoration: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.gallery {
  margin-top: 10px;
  text-align: center;
  columns: 1;
  gap: 25px;
  margin-left: 50px;
  margin-right: 50px;
}

.gallery .gal-div {
  padding-top: 5px;
}

.gallery .gal-img {
  display: block;
  width: 100%;
  margin-bottom: 25px;
}

.designer-img {
  width: 100%;
}

.thumbnail {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 30px;
}

.project-con {
  margin: 100px 0px 150px 200px;
}

.portfolio-image {
  margin-right: 20px;
  border: 5px solid #000;
}

.box-1-case-study {
  padding: 10px;
  align-content: center;
}

.case-study-main {
  width: 100%;
  display: block;
}

.CS-thumb {
  border: solid 1px rgba(33, 33, 33, 0.311);
  background-color: rgba(33, 33, 33, 0.482);
  border-radius: 25px;
  margin: 5px;
  padding: 5px;
  margin-bottom: 15px;
}

.CS-thumb:hover {
  background-color: rgba(251, 233, 245, 0.144);
  box-shadow: rgba(251, 233, 245, 0.452) 0px 0px 16px;
}

#social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  gap: 30px;
}

.social-icon {
  font-size: x-large;
}

footer {
  margin-top: 20px;
  background-color: rgba(33, 33, 33, 0.482);
}

.disigner-text p {
  line-height: 2;
}

#hello-world {
  width: 100%;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  background: #000;
  color: rgb(255, 183, 228);
  margin-top: 80px;
  z-index: 1;
}

#hello-world .hw-scroll {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: fit-content;
  white-space: nowrap;
  animation: loop 40s linear infinite;
  z-index: 1;
}

@keyframes loop {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
.hw-item {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 60px;
}

#about-me {
  width: 100%;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  background: #000;
  color: #f07bb2;
  margin-bottom: 100px;
  z-index: 1;
}

#about-me .am-scroll {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: fit-content;
  white-space: nowrap;
  animation: loop2 40s linear infinite;
  z-index: 1;
}

@keyframes loop2 {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}
.am-item {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 60px;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-container {
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  position: relative;
  margin-bottom: 80px;
  border: 1px solid rgba(255, 255, 255, 0.1921568627);
  background-color: rgb(0, 0, 0);
  width: 100%;
  max-width: 100%;
}

.video-container video {
  width: 100%;
  height: auto;
}

.video-controls.hidden {
  display: none;
}

.video-controls {
  justify-content: center;
  align-items: center;
  width: 50%;
}

.video-controls.hide {
  opacity: 0;
  pointer-events: none;
}

button {
  padding: 10px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: #ffffff;
  font-size: 20px;
}

button:hover {
  scale: 1.3;
}

.fa, .fa-solid {
  color: rgb(255, 227, 249);
  font-size: 24px;
  margin-left: 10px;
}

.fa-pause {
  margin-right: 10px;
}

.fa-volume-up {
  margin-left: auto;
}

/*********** Baseline, reset styles ***********/
input[type=range] {
  width: 120px;
  margin: 0 10px;
}

/* Removes default focus */
input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  background-color: rgb(255, 227, 249);
  border-radius: 0.5rem;
  height: 0.5rem;
}

/* slider thumb */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -4px;
  background-color: rgb(255, 227, 249);
  border-radius: 0.5rem;
  height: 1rem;
  width: 1rem;
}

input[type=range]:focus::-webkit-slider-thumb {
  outline: 3px solid rgb(0, 0, 0);
}

/* ---Utility Classes--- */
.hidden {
  display: none;
}

h3 {
  font-size: 40px;
}

.hw-item {
  font-size: 40px;
}

.grid-con {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-column-gap: 30px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

.col-span-full {
  grid-column: 1/-1;
}

.col-span-1 {
  grid-column: span 1/span 1;
}

.col-span-2 {
  grid-column: span 2/span 2;
}

.col-span-3 {
  grid-column: span 3/span 3;
}

.col-span-4 {
  grid-column: span 4/span 4;
}

.col-start-1 {
  grid-column-start: 1;
}

.col-start-2 {
  grid-column-start: 2;
}

.col-start-3 {
  grid-column-start: 3;
}

.col-start-4 {
  grid-column-start: 4;
}

.col-end-1 {
  grid-column-end: 1;
}

.col-end-2 {
  grid-column-end: 2;
}

.col-end-3 {
  grid-column-end: 3;
}

.col-end-4 {
  grid-column-end: 4;
}

.col-end-5 {
  grid-column-end: 5;
}

/* 3. ---Tablet Library Grid Styles--- */
@media screen and (min-width: 768px) {
  .grid-con {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .m-col-auto {
    grid-column: auto;
  }
  .m-col-span-1 {
    grid-column: span 1/span 1;
  }
  .m-col-span-2 {
    grid-column: span 2/span 2;
  }
  .m-col-span-3 {
    grid-column: span 3/span 3;
  }
  .m-col-span-4 {
    grid-column: span 4/span 4;
  }
  .m-col-span-5 {
    grid-column: span 5/span 5;
  }
  .m-col-span-6 {
    grid-column: span 6/span 6;
  }
  .m-col-span-7 {
    grid-column: span 7/span 7;
  }
  .m-col-span-8 {
    grid-column: span 8/span 8;
  }
  .m-col-span-9 {
    grid-column: span 9/span 9;
  }
  .m-col-span-10 {
    grid-column: span 10/span 10;
  }
  .m-col-span-11 {
    grid-column: span 11/span 11;
  }
  .m-col-span-12 {
    grid-column: span 12/span 12;
  }
  .m-col-span-full {
    grid-column: 1/-1;
  }
  .m-col-span-full {
    grid-column: 1/-1;
  }
  .m-col-start-1 {
    grid-column-start: 1;
  }
  .m-col-start-2 {
    grid-column-start: 2;
  }
  .m-col-start-3 {
    grid-column-start: 3;
  }
  .m-col-start-4 {
    grid-column-start: 4;
  }
  .m-col-start-5 {
    grid-column-start: 5;
  }
  .m-col-start-6 {
    grid-column-start: 6;
  }
  .m-col-start-7 {
    grid-column-start: 7;
  }
  .m-col-start-8 {
    grid-column-start: 8;
  }
  .m-col-start-9 {
    grid-column-start: 9;
  }
  .m-col-start-10 {
    grid-column-start: 10;
  }
  .m-col-start-11 {
    grid-column-start: 11;
  }
  .m-col-start-12 {
    grid-column-start: 12;
  }
  .m-col-start-13 {
    grid-column-start: 13;
  }
  .m-col-end-1 {
    grid-column-end: 1;
  }
  .m-col-end-2 {
    grid-column-end: 2;
  }
  .m-col-end-3 {
    grid-column-end: 3;
  }
  .m-col-end-4 {
    grid-column-end: 4;
  }
  .m-col-end-5 {
    grid-column-end: 5;
  }
  .m-col-end-6 {
    grid-column-end: 6;
  }
  .m-col-end-7 {
    grid-column-end: 7;
  }
  .m-col-end-8 {
    grid-column-end: 8;
  }
  .m-col-end-9 {
    grid-column-end: 9;
  }
  .m-col-end-10 {
    grid-column-end: 10;
  }
  .m-col-end-11 {
    grid-column-end: 11;
  }
  .m-col-end-12 {
    grid-column-end: 12;
  }
  .m-col-end-13 {
    grid-column-end: 13;
  }
  .gallery {
    columns: 2;
  }
  h3 {
    font-size: 60px;
  }
  .hw-item {
    font-size: 60px;
  }
  header h1 {
    position: absolute;
    left: 20px;
    top: 0px;
    font-size: xx-large;
  }
}
/* 4. ---Desktop Library Grid Styles--- */
@media screen and (min-width: 1200px) {
  .grid-con {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .l-col-auto {
    grid-column: auto;
  }
  .l-col-span-1 {
    grid-column: span 1/span 1;
  }
  .l-col-span-2 {
    grid-column: span 2/span 2;
  }
  .l-col-span-3 {
    grid-column: span 3/span 3;
  }
  .l-col-span-4 {
    grid-column: span 4/span 4;
  }
  .l-col-span-5 {
    grid-column: span 5/span 5;
  }
  .l-col-span-6 {
    grid-column: span 6/span 6;
  }
  .l-col-span-7 {
    grid-column: span 7/span 7;
  }
  .l-col-span-8 {
    grid-column: span 8/span 8;
  }
  .l-col-span-9 {
    grid-column: span 9/span 9;
  }
  .l-col-span-10 {
    grid-column: span 10/span 10;
  }
  .l-col-span-11 {
    grid-column: span 11/span 11;
  }
  .l-col-span-12 {
    grid-column: span 12/span 12;
  }
  .l-col-span-full {
    grid-column: 1/-1;
  }
  .l-col-span-full {
    grid-column: 1/-1;
  }
  .l-col-start-1 {
    grid-column-start: 1;
  }
  .l-col-start-2 {
    grid-column-start: 2;
  }
  .l-col-start-3 {
    grid-column-start: 3;
  }
  .l-col-start-4 {
    grid-column-start: 4;
  }
  .l-col-start-5 {
    grid-column-start: 5;
  }
  .l-col-start-6 {
    grid-column-start: 6;
  }
  .l-col-start-7 {
    grid-column-start: 7;
  }
  .l-col-start-8 {
    grid-column-start: 8;
  }
  .l-col-start-9 {
    grid-column-start: 9;
  }
  .l-col-start-10 {
    grid-column-start: 10;
  }
  .l-col-start-11 {
    grid-column-start: 11;
  }
  .l-col-start-12 {
    grid-column-start: 12;
  }
  .l-col-start-13 {
    grid-column-start: 13;
  }
  .l-col-end-1 {
    grid-column-end: 1;
  }
  .l-col-end-2 {
    grid-column-end: 2;
  }
  .l-col-end-3 {
    grid-column-end: 3;
  }
  .l-col-end-4 {
    grid-column-end: 4;
  }
  .l-col-end-5 {
    grid-column-end: 5;
  }
  .l-col-end-6 {
    grid-column-end: 6;
  }
  .l-col-end-7 {
    grid-column-end: 7;
  }
  .l-col-end-8 {
    grid-column-end: 8;
  }
  .l-col-end-9 {
    grid-column-end: 9;
  }
  .l-col-end-10 {
    grid-column-end: 10;
  }
  .l-col-end-11 {
    grid-column-end: 11;
  }
  .l-col-end-12 {
    grid-column-end: 12;
  }
  .l-col-end-13 {
    grid-column-end: 13;
  }
  .gallery {
    columns: 3;
  }
  h3 {
    font-size: 60px;
  }
  .hw-item {
    font-size: 60px;
  }
  .box-1-case-study {
    padding: 30px;
    align-content: center;
  }
  .study-page-text-1 {
    margin: 10px;
    font-size: 40px;
    padding-left: 15px;
  }
  .study-page-text-2 {
    margin: 10px;
    color: rgb(255, 183, 228);
    padding-left: 15px;
  }
  header h1 {
    position: absolute;
    left: 20px;
    top: 0px;
    font-size: 60px;
  }
}
/* 5. ---X-Large Desktop Library Grid Styles--- */
@media screen and (min-width: 1920px) {
  .grid-con {
    grid-column-gap: 34px;
    padding-left: 17px;
    padding-right: 17px;
  }
  .xl-col-auto {
    grid-column: auto;
  }
  .xl-col-span-1 {
    grid-column: span 1/span 1;
  }
  .xl-col-span-2 {
    grid-column: span 2/span 2;
  }
  .xl-col-span-3 {
    grid-column: span 3/span 3;
  }
  .xl-col-span-4 {
    grid-column: span 4/span 4;
  }
  .xl-col-span-5 {
    grid-column: span 5/span 5;
  }
  .xl-col-span-6 {
    grid-column: span 6/span 6;
  }
  .xl-col-span-7 {
    grid-column: span 7/span 7;
  }
  .xl-col-span-8 {
    grid-column: span 8/span 8;
  }
  .xl-col-span-9 {
    grid-column: span 9/span 9;
  }
  .xl-col-span-10 {
    grid-column: span 10/span 10;
  }
  .xl-col-span-11 {
    grid-column: span 11/span 11;
  }
  .xl-col-span-12 {
    grid-column: span 12/span 12;
  }
  .xl-col-span-full {
    grid-column: 1/-1;
  }
  .xl-col-start-1 {
    grid-column-start: 1;
  }
  .xl-col-start-2 {
    grid-column-start: 2;
  }
  .xl-col-start-3 {
    grid-column-start: 3;
  }
  .xl-col-start-4 {
    grid-column-start: 4;
  }
  .xl-col-start-5 {
    grid-column-start: 5;
  }
  .xl-col-start-6 {
    grid-column-start: 6;
  }
  .xl-col-start-7 {
    grid-column-start: 7;
  }
  .xl-col-start-8 {
    grid-column-start: 8;
  }
  .xl-col-start-9 {
    grid-column-start: 9;
  }
  .xl-col-start-10 {
    grid-column-start: 10;
  }
  .xl-col-start-11 {
    grid-column-start: 11;
  }
  .xl-col-start-12 {
    grid-column-start: 12;
  }
  .xl-col-start-13 {
    grid-column-start: 13;
  }
  .xl-col-start-auto {
    grid-column-start: auto;
  }
  .xl-col-end-1 {
    grid-column-end: 1;
  }
  .xl-col-end-2 {
    grid-column-end: 2;
  }
  .xl-col-end-3 {
    grid-column-end: 3;
  }
  .xl-col-end-4 {
    grid-column-end: 4;
  }
  .xl-col-end-5 {
    grid-column-end: 5;
  }
  .xl-col-end-6 {
    grid-column-end: 6;
  }
  .xl-col-end-7 {
    grid-column-end: 7;
  }
  .xl-col-end-8 {
    grid-column-end: 8;
  }
  .xl-col-end-9 {
    grid-column-end: 9;
  }
  .xl-col-end-10 {
    grid-column-end: 10;
  }
  .xl-col-end-11 {
    grid-column-end: 11;
  }
  .xl-col-end-12 {
    grid-column-end: 12;
  }
  .xl-col-end-13 {
    grid-column-end: 13;
  }
  .xl-col-end-auto {
    grid-column-end: auto;
  }
  .gallery {
    columns: 3;
  }
  h3 {
    font-size: 60px;
  }
  .hw-item {
    font-size: 60px;
  }
  header h1 {
    position: absolute;
    left: 20px;
    top: 0px;
    font-size: 60px;
  }
}
video::-webkit-media-controls {
  display: block !important;
}