@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
@import "variable.css";
@import "themes.css";

* {
  margin: var(--space-0);
  box-sizing: border-box;
}

::selection {
  background-color: var(--selection-background);
  color: var(--selection-color);
}

::-moz-selection {
  background-color: var(--selection-background);
  color: var(--selection-color);
}

html {
  cursor: url('../assets/images/illustrations/mouse.svg'), auto;
}

button:hover,
a:hover,
.hamburgerIcon:hover {
  cursor: url('../assets/images/illustrations/mousePointer.svg'), pointer;
}

button {
  /* Safari */
  -webkit-user-select: none;
  /* IE 10 and 11 */
  -ms-user-select: none;
  /* Standard syntax */
  user-select: none;
}

html,
body {
  margin: var(--space-0);
  padding: var(--space-0);
  font-family: var(--ff-base);
  font-optical-sizing: auto;
  font-style: normal;
  color: var(--text-light);
  scroll-behavior: smooth;
}

body {
  width: var(--p-100);
  overflow: hidden;
}

.bg-video-control {
  position: absolute;
  top: var(--space-0);
  right: var(--space-0);
  height: var(--space-6);
  width: var(--space-6);
  border: var(--px-2) solid var(--cb-accent-ocean-green-transparent);
  z-index: var(--bg-video-control-button);
}

.bg-video {
  position: fixed;
  inset: var(--space-0);
  z-index: var(--bg-video);
}

.bg-video video {
  height: var(--p-100);
  width: var(--p-100);
  object-fit: cover;
  transform: translateZ(var(--px-1000));
  backface-visibility: hidden;
  perspective: var(--px-1000);
}

.bg-overlay {
  position: absolute;
  inset: 1;
  top: var(--space-0);
  right: var(--space-0);
  height: var(--p-100);
  width: var(--p-100);
  background-color: var(--video-background-overlay);
}

/* ====================================================
  Menu bar CSS START
=======================================================*/

.menuBar {
  position: fixed;
  margin: auto var(--space-0);
  bottom: var(--p-7);
  left: var(--p-50);
  transform: translate(var(--p-neg-50), var(--p-0));
  padding: var(--space-0) var(--space-4);
  background: var(--menubar-background);
  border-radius: var(--px-10);
  border: var(--px-4) solid var(--glass-card-border);
  box-shadow: var(--cb-menuBar-shadow);
  opacity: var(--dc-1);
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and 11 */
  user-select: none;
  /* Standard syntax */
}

.menuBarContainer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 2rem;
}

.menuItem {
  width: 120px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(var(--space-4), 2vw, 1.1rem);
  color: var(--text-primary-accent);
  font-weight: var(--fw-medium);
  font-family: var(--ff-heading);
  text-shadow: var(--text-primary-shadow);
  text-transform: uppercase;
  letter-spacing: var(--px-2);
  border-radius: var(--px-5);
  background: var(--transparent);
  z-index: 1;
  border: none;
}

.menuActive {
  box-shadow: var(--cb-menu-active);
}

.menuItem:hover {}

.menuItem:focus {}

.menuSlider {
  height: var(--p-170);
  width: var(--px-120);
  background: var(--menuSlider-background);
  position: absolute;
  top: var(--p-50);
  left: 304px;
  transform: translateY(var(--p-neg-50));
  border: none;
  box-shadow: 0px 0px 12px 3px #011822;
  border-radius: var(--px-5);
  z-index: var(--menuSlider);
  transition: left 0.5s ease, background 0.25s ease-in;
  will-change: transform;
}

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

/* ====================================================
  Menu bar CSS START
=======================================================*/

.hamburgerIcon {
  position: absolute;
  top: var(--px-10);
  left: var(--px-10);
  width: var(--space-9);
  height: var(--space-8);
  border-radius: var(--px-5);
  background: var(--menuSlider-background);
  z-index: var(--hamburgerIcon);
  display: none;
}

.line {
  position: absolute;
  left: var(--p-50);
  height: var(--px-4);
  width: var(--p-60);
  transition: transform 0.2s ease-in-out, background 0.5s ease;
  background: var(--hamburger-icon-line);
}

.l-up {
  top: var(--space-0);
  transform: translate(var(--p-neg-50), var(--p-300));
}

.l-mid {
  position: absolute;
  top: var(--p-50);
  transform: translate(var(--p-neg-50), var(--p-neg-50));
}

.l-dw {
  position: absolute;
  bottom: var(--space-0);
  transform: translate(var(--p-neg-50), var(--p-neg-300));
}

.hamburgerIcon-active .l-up {
  transform: translate(var(--px-neg-16), var(--px-20)) rotateZ(var(--deg-45));
}

.hamburgerIcon-active .l-mid {
  transform: translate(var(--p-neg-50), var(--p-neg-50)) rotateZ(var(--deg-neg-45));
  background: var(--accent);
}

.hamburgerIcon-active .l-dw {
  transform: translate(var(--px-neg-20), var(--px-neg-20)) rotateZ(var(--deg-45));
}

.hamburgerMenu {
  z-index: var(--hamburgerMenu);
  position: absolute;
  top: var(--space-0);
  left: var(--space-0);
  height: var(--p-100);
  width: var(--p-100);
  background-color: var(--dark-transparent);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease-out;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and 11 */
  user-select: none;
  /* Standard syntax */
}

.hamburgerMenuContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-5);
}

.hamburgerMenuItem {
  font-size: clamp(var(--space-4), 2vw, 1.1rem);
  color: var(--text-primary-accent);
  font-weight: var(--fw-medium);
  font-family: var(--ff-heading);
  text-shadow: var(--text-primary-shadow);
  text-transform: uppercase;
  letter-spacing: var(--px-2);
  border-radius: var(--px-5);
  padding: var(--space-4);
  border: 1px solid var(--accent);
  box-shadow: var(--hamburger-menuItems-shadow);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  width: 150px;
  text-align: center;
  background: var(--transparent);
}

.hamburgerMenuItem:hover {
  box-shadow: var(--hamburger-menuItems-hover);
  transform: translateY(var(--px-neg-4));
}

.hamburgerMenuItem:active {
  box-shadow: var(--hamburger-menuItems-active);
  transform: translate(2px, 2px);
}

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

/* ====================================================
  Main CSS START
=======================================================*/

.rootContainer {
  width: var(--p-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: var(--p-85);
  position: fixed;
  inset: var(--space-0);
  transform: scale(1);
  opacity: 1;
  transition: transform 0.5s ease-out;
}

.view {
  position: absolute;
  inset: var(--space-0);
  transform: scale(0.1);
  opacity: var(--space-0);
  transition: transform 0.5s ease-out;
  will-change: transform;
  z-index: 1;
}

/* ====================================================
  Hero Section
=======================================================*/

.header {
  height: var(--p-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.headerWrapper {
  height: var(--p-100);
  max-width: var(--p-80);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.headerContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: var(--p-70);
  min-width: 23rem;
  position: relative;
  gap: var(--space-4);
  padding: clamp(var(--space-5), var(--vw-4), var(--space-9)) !important;
}

.headerTitle {
  padding: var(--space-4) var(--space-0);
  text-align: center;
  line-height: var(--space-6);
}

.headerTag {}

.headerDescription {
  max-width: 95%;
  text-align: center;
}

.headerViewWorkButton {
  font-size: clamp(var(--space-4), 6vw, var(--space-5));
  font-weight: var(--fw-semibold);
  margin-top: var(--space-2);
}

.headerImage {
  position: absolute;
  right: var(--space-0);
  bottom: var(--space-0);
}

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

/* ====================================================
  Project Section
=======================================================*/

/* -- project section start -- */
.projectSection {
  width: var(--p-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.projectSectionContainer {
  max-width: 80%;
  overflow: hidden;
  gap: 0rem !important;
}

.projectHeader {}

.projectSliderWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-0);
}

.navButtons {
  width: clamp(100%, 500px, 112%);
  position: absolute;
  top: var(--p-50);
  left: var(--p-50);
  transform: translate(var(--p-neg-50), var(--p-50));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: var(--navButtons);
}

.navButton {
  border: none;
  height: 3rem;
  width: 3rem;
  z-index: 20;
  background: url('../assets/images/illustrations/navIcon.svg') no-repeat center/contain;
  background-size: 4rem;
  transform: translate(0, 0);
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.5s ease;
}

.navButton:hover {
  background: url('../assets/images/illustrations/navIcon.svg') no-repeat center/contain;
  opacity: 0.7;
  transition: transform 0.2s ease opacity 0.5s ease;
  background-size: 4rem;
}

.leftNav:hover {
  transform: translate(1px, 1px);
}

.rightNav {
  transform: translate(0px, 0px) rotate(180deg);
}

.rightNav:hover {
  transform: translate(-1px, 1px) rotate(180deg);
}

.projectGrid {
  position: relative;
  height: 440px;
  width: clamp(375px, 60vw, 500px);
  width: clamp(375px, 60vw, 682px);
  margin: 1rem 2.5rem 0 2.5rem;
}

.projectBoxWrapper {
  position: absolute;
  top: var(--p-50);
  left: var(--p-50);
  width: clamp(60%, 390px, 86%);
  transform: translate(var(--p-neg-50), var(--p-neg-50));
  transform-style: preserve-3d;
  color: #c5c5c5;
  border: 1px solid #2f1902;
  padding: var(--space-5);
  border-radius: 10px;
  background: var(--projectBoxWrapper-background);
  box-shadow: var(--projectBoxWrapper-shadow);
  will-change: transform;
}

.projectWrapperRow1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-4);
  padding: 1.2rem 2rem 1rem 2rem;
  text-align: center;
}

.number-card {
  color: var(--accent-secondary-transparent);
  font-family: var(--ff-heading);
  font-weight: var(--fw-medium);
  text-shadow: var(--text-primary-shadow);
  font-size: var(--space-5);
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: var(--space-6);
  right: -5px;
  border-radius: 10px 0 0 10px;
  box-shadow: inset 4px 4px 0 0 #106f6ad9, 10px 3px 7px 1px #07151b, 0px 7px 8px 0 #156083;

}

.projectNumber {
  height: 92%;
  width: 78%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.3rem 0.5rem 0 0.5rem;
  position: relative;
  top: 2px;
  right: -6px;
  background: var(--projectNumber-background);
  border-radius: 10px 0 0 10px;

}

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

.projectTitle {}

.projectWrapperRow2 {
  line-height: 1.6;
  opacity: 0.9;
  text-align: center;
  padding: var(--space-4);
}

.projectWrapperRow3 {
  margin-bottom: var(--space-5);
  padding-top: var(--space-4);
  text-align: center;
}

.projectMadeWithBox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
}

.projectMadeWithItems {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.label-highlight {
  border: 1px solid var(--label-highlight-border);
  border-radius: 5px;
  padding: 0.1rem 0.5rem;
  color: var(--label-highlight-color);
  font-family: var(--ff-base);
  font-size: 0.8rem;
  letter-spacing: 1px;
}



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

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

/* ====================================================
  Project details Section
=======================================================*/

.projectDetailsSection {
  width: var(--p-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.projectDetailsContainer {
  max-width: 80%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0rem;
  gap: 0rem !important;
}

.projectDetailsCancel {
  background: none;
  border: none;
  height: 40px;
  width: 40px;
  padding: var(--space-0);
  position: absolute;
  right: var(--px-20);
  top: var(--px-20);
}

.projectDetailsCancelImg {}

.projectDetailsWrapper {
  height: 390px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  padding: var(--space-4);
}

.detailsTabsContainer {
  height: var(--p-100);
  min-width: 230px;
  max-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-4);
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-4);
}

.detailsTabWrapper {
  border-radius: var(--px-3);
  border: 1px solid var(--accent-transparent);
  box-shadow: var(--hamburger-menuItems-shadow);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  background: var(--transparent);
  height: 50px;
  width: var(--p-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.detailsTabWrapper:hover {
  box-shadow: var(--hamburger-menuItems-hover);
  transform: translate(-2px, -2px);
}

.detailsTabWrapper:active {
  box-shadow: var(--hamburger-menuItems-active);
  transform: translate(2px, 2px);
}

.detailsTabIcon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
  height: 50px;
  width: 50px;
  border: none;
}

.TabIconDisplay {
  display: none;
}

.detailsTabText {
  font-size: clamp(0.8rem, 2vw, 0.9rem);
  color: var(--text-primary-accent);
  font-weight: var(--fw-medium);
  font-family: var(--ff-heading);
  text-shadow: var(--text-primary-shadow);
  text-transform: uppercase;
  letter-spacing: var(--px-2);
  background: #33333300;
  border: none;
  height: var(--p-100);
  width: var(--p-100);
  display: block;
}

.detailsContentContainer {
  height: var(--p-100);
  width: 600px;
  position: relative;
}

.detailsContentContainerWrapper {
  height: var(--p-100);
  width: var(--p-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: var(--space-0);
  position: absolute;
  top: var(--space-0);
  left: var(--space-0);
  z-index: var(--space-0);
  padding: var(--space-4);
}

.detailsTitle {
  height: 50px;
  width: var(--p-100);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
  margin-right: 1.5rem;
}

.detailsContent {
  height: var(--p-100);
  width: var(--p-100);
  overflow-y: auto;
  scrollbar-gutter: stable;
  pointer-events: all;
  box-shadow: inset 0px 0px var(--px-20) 0px #145f81;
  border-radius: 5px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding: var(--space-5) var(--space-4);
}

.plainListWrapper {
  margin-bottom: var(--space-4);
  padding: 0 var(--space-4);
}

.plainListBulletIcon {
  background: url('../assets/images/icons/plainListBullet3.svg') center / contain no-repeat;
  height: var(--space-4);
  width: var(--space-4);
  margin: 0px 3px 0 var(--space-0);
  transform: translateY(3px);
  display: inline-block;
}

.plainListWrapper .primaryText {}

.largeIconTextBoxContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  width: var(--p-100);
}

.largeIconTextBoxWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 5px;
  min-width: 110px;
  padding: 0.5rem;
  background: #00000000;
  box-shadow: inset 3px 4px var(--px-20) 0px #125e80ab, 3px 2px 5px 0px #16686b;
}

.largeIcon {
  height: 60px;
  width: 60px;
}

.iconText {}

.imageGallerySmallView {
  height: var(--p-100);
  width: var(--p-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem var(--space-4);
}

.imageGallerySmallViewWrapper {
  width: 40%;
  height: var(--p-50);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.imageGallerySrc {
  width: var(--p-100);
  height: var(--p-100);
  border-radius: 5px;
  box-shadow: inset 3px 3px 7px 0px #125e80ab, inset -3px -3px var(--px-20) 0px #106f6a;
  cursor: url('../assets/images/illustrations/mousePointer.svg'), pointer;
}

.imageGalleryLabel {}

.imageGalleryLargeView {
  z-index: 101;
  height: 90%;
  width: 80%;
  position: absolute;
  top: var(--p-50);
  left: var(--p-50);
  transform: translate(var(--p-neg-50), var(--p-neg-50)) scale(1);
  background-color: var(--darker-transparent);
  box-shadow: inset 3px 3px 7px 0px #125e80ab, inset -3px -3px var(--px-20) 0px #106f6a;
  border-radius: var(--space-4);
  transition: transform 0.5s ease;
}

.imageGalleryLargeViewCancel {
  position: absolute;
  top: var(--space-4);
  right: 2rem;
}

.linksViewContrainer {
  width: var(--p-100);
  height: var(--p-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-4);
}

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

/* ====================================================
  About Section
=======================================================*/

.aboutMeSection {
  width: var(--p-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aboutMeContainer {
  width: clamp(40%, 800px, 80%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0rem;
}

.aboutContent {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-4);
}

.aboutSummeryContent {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-4);
}

.creditsLink {
  margin-top: 0.5rem;
}

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

/* ====================================================
  Technical skill Section
=======================================================*/

.techSkillSection {
  width: var(--p-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.techSkillContainer {
  width: clamp(60%, 1000px, 80%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0rem;
  gap: var(--space-5) !important;
}

.techSkillContent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0rem;
  width: var(--p-100);
}

.skillGroup {
  width: var(--p-100);
}

.skillGroupWrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  width: var(--p-100);
  border: 1px solid #002839;
  border-left: none;
  border-right: none;
  padding: 0.7rem 0.5rem;
}

.skillCategory {
  min-width: 175px;
  transform: translateY(6px);
  color: var(--accent) !important;
}

.skillPartition {
  padding: 0 var(--space-4);
  transform: translateY(6px);
}

.skillTags {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.skillTag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: var(--p-100);
}

.skillTagWrapper {
  border-radius: 5px;
  padding: 0.5rem var(--space-4);
  text-wrap: nowrap;
  box-shadow: inset 0px 0px 10px 0px #135f81, 3px 2px 0px 0px #28cdc574;
  transform: translate(0px, 0px);
  transition: all 0.5s ease;
}

.skillTagWrapper:hover {
  box-shadow: inset 0px 0px 10px 0px #135f81, 0px 0px 0px 0px #28cdc574;
  transform: translate(3px, 2px);
  transition: all 0.5s ease;
}

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

/* ====================================================
  Contact skill Section
=======================================================*/

.contactSection {
  width: var(--p-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contactSectionContainer {
  width: clamp(40%, 800px, 80%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0rem;
}

.creditDetailsCancel {
  background: none;
  border: none;
  height: 40px;
  width: 40px;
  padding: var(--space-0);
  position: absolute;
  right: var(--px-20);
  top: var(--px-20);
}

.contactContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.contactDescriptionWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-5);
}


/* ======================================== */
/* ====================================================
  Credit skill Section
=======================================================*/

.creditDetails {
  width: var(--p-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.creditDetailsContainer {
  width: clamp(var(--p-50), 800px, 80%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0rem;
  gap: 1.1rem !important;
}

.creditDetailsContent {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-4);
}

.creditDetailsContentWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-4);
}

.creditPlainTextWrapper {
  width: var(--p-100);
}

.creditLinksWrapper {
  width: var(--p-100);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  gap: 0.5rem;
  padding-top: var(--space-4);
}

.creditSectionContent {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.creditSectionContentWrapper {
  width: fit-content;
}

.creditPlainTextBulletIcon {
  background: url('../assets/images/icons/plainListBullet3.svg') center / contain no-repeat;
  height: var(--space-4);
  width: var(--space-4);
  margin: 0px 3px 0 var(--space-0);
  transform: translateY(3px);
  display: inline-block;
}

.creditSectionLabel {
  transform: translateY(3px);
  padding-right: 0.5rem;
  min-width: 88px;
}

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