/*
Theme Name: Multiple2k23
Text Domain: Multiple2k23
Version: 1.0s
Description: Theme for Multiple2k23
Tag: responsive, custom, multiple
Author: Derek Dalton
Author URI: https://multipleinc.com/
*/
/* 
Global css 
*/

@import "./assets/styles/index.css";

:root {
  --primary-x-white: #fff;
  --primary-x-almost-white: #d9d9d9;
  --primary-x-extra-light-gray: #f7f7f7;
  --primary-x-light-gray: #9e9e9e;
  --primary-x-almost-black: #171717;
  --xBlack: #000;
  --navItem-fs: 1rem;
  --navItem-lh: 1.5rem;
  --navItemCopyright-fs: 0.7rem;
  --navItemCopyright-lh: 1rem;
}

/*---------------------------- Color Classes ----------------------------*/

.primary-x-white {
  color: var(--primary-x-white);
}

.primary-x-extra-light-gray {
  color: var(--primary-x-extra-light-gray);
}

.primary-x-light-gray {
  color: var(--primary-x-light-gray);
}

.primary-x-almost-black {
  color: var(--primary-x-almost-black);
}

.primary-x-white {
  color: var(--primary-x-white);
}

/*---------------------------- End Color Classes ----------------------------*/

/* 
* {
  font-family: "Suisse Int'l";
} 
@font-face {
  font-family: Suisse Int;
  src: url(wp-content/themes/multiple2k23/assets/SuisseIntl);
}*/

* {
  /* font-family: "azo-sans-local,Helvetica,Arial,sans-serif"; */
  font-family: "Suisse Int'l";
}

html {
  margin-top: 0 !important;
  /* TODO removed by NG */
  /* font-size: 125%; */
}

body {
  margin: 0;
  background: var(--primary-x-almost-black);
}

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

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

/*---------------------------- Font Styles ----------------------------*/

.heading-L {
  font-family: "Suisse Int'l";
  font-size: 48px;
  font-style: normal;
  font-weight: 300;
  line-height: 60px; /* 125% */
  letter-spacing: 0.48px;
  margin: 0;
}

.heading-M {
  font-family: "Suisse Int'l";
  font-size: 36px;
  font-style: normal;
  font-weight: 300;
  line-height: 50px; /* 138.889% */
  letter-spacing: 0.36px;
  margin: 0;
  margin-bottom: 18px;
}

.heading-S {
  font-family: "Suisse Int'l";
  font-size: 26px;
  font-style: normal;
  font-weight: 300;
  line-height: 36px; /* 138.462% */
  letter-spacing: 0.26px;
  margin: 0;
}

.body-L {
  font-family: "Suisse Int'l";
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  line-height: 30px; /* 150% */
  letter-spacing: 0.2px;
  margin: 0;
}
.body-L p {
  font-family: "Suisse Int'l";
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  line-height: 30px; /* 150% */
  letter-spacing: 0.2px;
  margin: 0;
}

.body-S {
  font-family: "Suisse Int'l";
  font-size: 14px;
  font-style: normal;
  font-weight: 450;
  line-height: 20px; /* 142.857% */
  letter-spacing: 0.14px;
  margin: 0;
}

/*---------------------------- End Font Styles ----------------------------*/

/* navbar */
.header {
  position: relative;
}
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--primary-x-almost-black);
}

.navbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: 0px 75px; */
  height: 100px;
}

.logo {
  margin-left: 2.7%;
}

.logo h3 {
  color: var(--primary-x-almost-white);
  text-align: right;
  font-family: "Suisse Int'l";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px; /* 200% */
  letter-spacing: 0.4px;
}

.navItems_wrap {
  display: flex;
  gap: 30px;
  height: auto;
  margin-right: 2.7%;
}

@media (max-width: 650px) {
  .logo {
    padding-bottom: 30px;
    margin-left: 20px;
    z-index: 1;
  }

  .navItems_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    align-self: stretch;
    width: 100%;
    height: 0px;
    overflow-y: hidden;
    transition: all 0.4s linear;
    text-align: center;
    padding: 0px 16px 0px 16px;
    margin-right: 0px;
    position: absolute;
    padding-top: 96px;
    left: 0;
    right: 0;
  }
  .navItems_wrap.open-nav {
    max-height: 100vh !important;
    background-color: var(--xBlack);
  }
}

.navItems_wrap a h3 {
  color: var(--primary-x-almost-white);
  text-align: right;
  font-family: "Suisse Int'l";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px; /* 200% */
  letter-spacing: 0.4px;
}

/* .body__wrap { */
/* background-color: #181818; */
/* padding: 0px 11.5%; */
/* } */

/* @media (max-width: 650px) {

  .navItems_wrap {
    padding: 0 20px;
  }

  .navItems_wrap h3 {
    font-size: 32px;
    margin: 45px 0;
  }
} */

@media (max-width: 650px) {
  .hamburger_wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    width: 36px;
    height: 16px;
    cursor: pointer;
    z-index: 1000;
  }
  .line {
    width: 100%;
    height: 2px;
    background-color: var(--primary-x-white);
    transition: all 0.3s ease;
  }

  .open-nav .line1 {
    transform: rotate(45deg) translate(6px, 4px);
  }

  .open-nav .line2 {
    transform: rotate(-45deg) translate(6px, -4px);
  }
  /* .navItems_wrap div{
    padding-top : 100px;
    width : 100%;
  } */
  .navItems_wrap a h3 {
    color: #fff;
    text-align: right;
    font-family: "Suisse Int'l";
    font-size: 40px;
    font-style: normal;
    font-weight: 300;
    line-height: 40px; /* 100% */
  }
}

.main-wrapper {
  margin-top: 100px;
}

/* footer */
.footer {
  padding: 75px 5.2% 25px;
}

.footerWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.footerItem {
  display: flex;
  flex-direction: column;
  width: 300px;
}

.footerItem__header {
  font-size: var(--navItem-fs);
  line-height: var(--navItem-lh);
  font-weight: 700;
  letter-spacing: 0.2px;
  margin-bottom: 40px;
  color: var(--primary-x-white);
}
.footerItem__detail {
  font-size: var(--navItem-fs);
  line-height: var(--navItem-lh);
  font-weight: 300;
  letter-spacing: 0.2px;
  margin-bottom: 0;
  color: var(--primary-x-white);
}

.footerItem__aDetail {
  font-size: var(--navItem-fs);
  line-height: var(--navItem-lh);
  font-weight: 300;
  letter-spacing: 0.2px;
  text-decoration: underline;
  color: var(--primary-x-white);
}

.footerItem__copyrightWrap {
  margin-top: 75px;
}

.footerItem__copyright {
  font-size: var(--navItemCopyright-fs);
  line-height: var(--navItemCopyright-lh);
  font-weight: 500;
  letter-spacing: 0.14px;
  font-family: "Suisse Int'l";
}

.footerItem__break {
  height: 15px;
}

.footerItem__copyright2Wrap {
  padding: 20px 5.2% 60px;
}

.footerItem__copyright__aItem {
  color: var(--primary-x-white);
  text-decoration: underline;
}

@media (max-width: 1050px) {
  .footerWrap {
    gap: 40px;
  }
  .footerItem__header {
    margin-bottom: 10px;
  }
  .footerItem__copyrightWrap {
    margin-top: 35px;
  }
  .footerItem__copyright {
    margin-bottom: 0;
  }
}

@media (max-width: 450px) {
  .footerItem__copyright2Wrap {
    padding: 20px 20px 40px;
  }
}

/* ------------------------ Alt Page Header ------------------------*/

.alt__header {
  padding: 75px;
}

.jobContainer span {
  transition: bottom 0.3s ease, opacity 0.3s ease;
  position: absolute;
  bottom: 0px;
  left: 30px;
  opacity: 0;
  color: var(--primary-x-white);
}
.alt__header h1,
.alt__header p {
  margin-top: 18px;
  max-width: 959px;
}

.eyebrow {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 18px;
}
.superscript {
  font-size: 0.8em;
  vertical-align: super;
  line-height: 0.8;
}
.eyebrow p {
  display: inline-block;
}

@media (max-width: 768px) {
  .alt__header {
    padding: 50px 20px;
  }
}
/* ------------------------ End Alt Page Header ------------------------*/

/* ------------------------ Client Portfolio Page ------------------------*/

.porfolioContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.jobContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 405px;
}

.jobContainer img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
  transition: 0.5s;
}

.jobContainer img:hover {
  filter: brightness(50%);
}

.jobContainer h3 {
  position: absolute;
  bottom: 30px;
  left: 30px;
  color: #fff;
  transition: bottom 0.3s ease; /* Add a smooth transition effect */
}
.jobContainer img:hover + h3 {
  bottom: 60px; /* Adjusted position of h3 on img hover */
}

.jobContainer:hover span {
  bottom: 30px; /* Adjusted position of .tag-line (span) on container hover */
  opacity: 1;
}

.largePortfolioImage {
  grid-row: 1/3;
  height: 810px;
}

@media (max-width: 640px) {
  .porfolioContainer {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* ------------------------ End Client Portfolio Page ------------------------*/

/* ------------------------ Project Portfolio Header ------------------------*/

.project_next_container {
  display: flex;
  padding: 75px;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.project_portfolio_container-small-text,
.project_next_container-small-text {
  color: var(--xGray);
  font-size: 14px;
  font-weight: 450;
  line-height: 20px; /* 142.857% */
  letter-spacing: 0.14px;
}

.external_link-btn {
  display: flex;
  padding: 5px 15px;
  align-items: flex-start;
  gap: 10px;
  font-family: "Suisse Int'l";
  width: fit-content;
  border: 1px solid var(--primary-x-almost-black);
  color: var(--primary-x-almost-black);
  font-size: 14px;
  font-weight: 450;
  line-height: 20px; /* 142.857% */
  letter-spacing: 0.14px;
  border-radius: 40px;
  text-decoration: none;
}

.external_link-btn:hover {
  text-decoration: none;
  color: var(--primary-x-almost-black);
}

.img-only {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
}

.img-only-container {
  flex: 1;
  overflow: hidden;
}

.text-only {
  width: 100%;
}

.text-only-inner {
  /* 60px 75px  > top/bottom, left/right */
  padding: 60px 75px; /* top, right, bottom, left */
  display: flex;
  flex-direction: row;
  gap: 30px;
}

.text-only-container {
  flex: 1;
}

@media (min-width: 768px) {
  /* If we only have one child */
  .text-only-container:first-child:nth-last-child(1) {
    padding-left: 110px;
    max-width: 850px;
  }

  /* If we two children */
  .text-only-container:first-child:nth-last-child(2),
  .text-only-container:first-child:nth-last-child(2) ~ .text-only-container {
    padding-left: 220px;
    max-width: 410px;
  }

  .text-only-container:first-child:nth-last-child(2),
  .text-only-container:first-child:nth-last-child(2)
    ~ .text-only-container:first-child {
    padding-left: 110px;
  }

  .text-content.textLeft .text-content-p,
  .text-content.textRight .text-content-p {
    width: 50%;
  }

  .text-content-img {
    width: 50%;
  }
}

.img-only img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .text-only-inner {
    padding: 40px 16px;
    flex-direction: column;
  }
}

.both_img_and_text-container {
  width: 100%;
  margin: 0 auto; /* Center the container horizontally */
}

.text-content {
  display: flex;
  /*gap: 125px;*/
}

.text-content.textLeft {
  flex-direction: row-reverse; /* Change to row-reverse for textLeft */
}

.text-content.textRight {
  flex-direction: row; /* Change to row for textRight */
}

/* Additional styles for left and right alignment */
.text-content.textLeft .text-content-p div {
  padding: 40px 125px 40px 185px;
}

.text-content.textRight .text-content-p div {
  padding: 40px 110px 40px 125px;
}

.text-content div img {
  width: 100%;
  height: 100%; /* Set height to auto to maintain aspect ratio */
  max-width: 100%; /* Limit the maximum width to 100% of the container width */
  object-fit: cover;
}
/* Media Query for smaller screens */
@media (max-width: 768px) {
  .both_img_and_text-container {
    /* width: 390px; */
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .text-content {
    flex-direction: column; /* Stack items vertically on smaller screens */
    gap: 30px;
    padding: 40px 16px;
  }

  .text-content.textLeft,
  .text-content.textRight {
    flex-direction: column; /* Adjust flex-direction for textLeft and textRight on smaller screens if needed */
  }

  .text-content.textLeft {
    flex-direction: column-reverse;
  }

  .text-content div {
    width: 100%; /* Adjust width for smaller screens */
  }

  .text-content div img {
    max-width: 100%; /* Adjust max-width for smaller screens */
    height: auto;
  }

  .text-content.textLeft .text-content-p div,
  .text-content.textRight .text-content-p div {
    padding: 0; /* Adjust padding for smaller screens */
  }

  .img-only {
    flex-direction: column;
  }

  .project_next_container {
    padding: 50px 20px;
  }
}
/* ------------------------ Client Project Overwrites ------------------------*/
/*?  Client Project */

.project_next_container p {
  color: #434343;
  /* Desktop/body-L */
  font-family: "Suisse Int'l";
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  line-height: 30px; /* 150% */
  letter-spacing: 0.2px;
}
/* ------------------------ End Client Projec Overwrites ------------------------*/

/* ------------------------ Light Mode Overwrites ------------------------*/

.lightMode {
  background: var(--primary-x-white);
  color: var(--primary-x-almost-black);
}

.lightMode .navbar {
  background-color: var(--primary-x-white);
}

.lightMode .logo h3 {
  color: var(--primary-x-almost-black);
}

.lightMode h1 {
  color: var(--primary-x-almost-black);
}

.lightMode p {
  color: var(--primary-x-almost-black);
}

.lightMode .eyebrow p {
  color: var(--primary-x-light-gray);
}

.lightMode .line {
  background-color: var(--primary-x-almost-black);
}

.lightMode .navItems_wrap {
  background-color: var(--primary-x-white);
}
.lightMode .navItems_wrap a h3 {
  color: var(--primary-x-almost-black);
}

/* ------------------------ End Light Mode Overwrites ------------------------*/