html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.lead-head, span{font-size: 30%;}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

.lead-p{
  text-transform: uppercase ;
}

body {
  font-family: "Montserrat", sans-serif;
  background: #181818;
  color: #fff;
}

.site-wrapper {
  overflow-x: hidden;
}

::-webkit-scrollbar {
  display: none;
}

.contact-body,
.career-body {
  overflow-x: hidden;
}

p {
  font-size: 1.5rem;
  font-weight: 200;
}

a,
a:hover,
a:visited,
a:active {
  color: rgb(143, 143, 231);
}

ul li {
  list-style: none;
  display: inline;
  padding: 1rem;
}

ul {
  margin-top: 4rem;
}

.mini {
  font-size: 1.1rem;
}

section {
  margin: 10rem 0;
}

/* UTILITIES */
.sub-heading {
  font-size: 6rem;
  font-weight: 700;
}

#about p,
#details p,
#showcase p,
#showcase2 p,
#showcase3 p {
  line-height: 4rem;
}

.design-head-ultra {
  font-size: 5rem;
  font-weight: 100;
  letter-spacing: 5px;
}

.design-head {
  font-size: 13rem;
  font-weight: 700;
}

.design-head2 {
  font-size: 8rem;
  font-weight: 200;
  letter-spacing: 3px;
}

.project-details {
  display: none; /* Hidden by default */
  background-color: #282828; /* Optional: Change background color */
  padding: 10px; /* Optional: Add padding */
  margin-top: 10px; /* Optional: Add margin */
  border-radius: 5px; /* Optional: Add rounded corners */
}


.design-head3 {
  font-size: 5rem;
  font-weight: 200;
  letter-spacing: 3px;
}

/* NAVBAR */

.navbar-brand {
  font-size: 2rem;
  padding-top: 2rem;
}

.navbar-brand {
  font-weight: 200;
  text-transform: uppercase;
}

.nav-link {
  font-weight: 300;
  text-transform: uppercase;
  font-size: 2rem;
text-decoration:none;
}

/* HEADER */

.header {
  background:
    url("/img/210216_wip-F0001-0150_1.gif") no-repeat center center/cover;
  background: linear-gradient(rgba(0, 0, 0, 0.349), rgba(0, 0, 0, 0.349)),
    url("/img/210216_wip-F0001-0150_1.gif") no-repeat center center/cover;
  height: 100vh;
}

.lead-head {
  text-transform: uppercase;
  font-size: 13rem;
  font-weight: 700;
  border-bottom: 0.4px solid rgba(255, 255, 255, 0.418);
  
}

.design {
  margin-top: 7.5rem;
  border: 3px solid #fff;
}

.lead-p {
  font-size: 2rem;
  font-weight: 100;
}

/* ABOUT  */
.ione {
  background: url("../img/design.png") no-repeat center center/cover;
  height: 50vh;
}

/* SHOWCASES */

.video {
  width: 100%;
}

.video1 {
  width: 90%;
}


.video2 {
  width: 60%;
}

.video3 {
  width: 40%;
}


.logo {
  -webkit-filter: invert(100%);
          filter: invert(100%);
}

/* DESIGN */

#design {
  margin: auto;
}

.jr {
  font-size: 1.1rem;
}

.jr2 {
  font-size: 1.3rem;
}

/* CLIENTS */

#client .sub-heading {
  text-align: center;
}

#client .clientlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#client .clientlist .col-md-3 {
  flex: 0 0 33.33%;
  max-width: 33.33%;
  padding: 0 15px;
}

#client .client {
  width: 30%;
}

#client .logo1 {
  width: 30%;
}

#client .logo2 {
  width: 30%;
}




/* FOOTER */
#footer {
  margin-top: 30rem;
}

.footer {
  text-align: center;
}

/* AWARDS */

#awards .design-head {
  font-size: 10rem;
  font-weight: 600;
}

#awards ul li {
  display: block;
  font-size: 2.3rem;
}

/* CONTACTS PAGE */
.contact-header {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.363)), to(rgba(0, 0, 0, 0.363))),
    url("../img/210216_wip-f0001-0150_1.gif") no-repeat center center/cover;
  background: linear-gradient(rgba(0, 0, 0, 0.363), rgba(0, 0, 0, 0.363)),
    url("../img/210216_wip-f0001-0150_1.gif") no-repeat center center/cover;
  height: 100vh;
}

/* CAREERS PAGE */
.career-header {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.363)), to(rgba(0, 0, 0, 0.363))),
    url("../img/210216_wip-f0001-0150_1.gif") no-repeat center center/cover;
  background: linear-gradient(rgba(0, 0, 0, 0.363), rgba(0, 0, 0, 0.363)),
    url("../img/mila.jpeg") no-repeat center center/cover;
  height: 100vh;
}

/* CAREERS PAGE */
.career-header {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.363)), to(rgba(0, 0, 0, 0.363))),
    url("../img/210216_wip-f0001-0150_1.gif") no-repeat center center/cover;
  background: linear-gradient(rgba(0, 0, 0, 0.363), rgba(0, 0, 0, 0.363)),
    url("../img/210216_wip-f0001-0150_1.gif") no-repeat center center/cover;
  height: 100vh;
}

#career a {
  font-size: 1.3rem;
}

/* WORK PAGE  */

.work-header .project-title h1 {
  font-size: 5rem;
  font-weight: 300;
  @font-face {
    font-family: 'Redaction';
    src: url('font/Redaction-bold.otf')format('otf');
  }
}

.project-categ {
  font-weight: 100;
  font-size: 2rem;
  text-decoration: none;
}

.cursor {
  position: absolute;
  width: 60rem;
  height: 40rem;
  top: 50%;
  left: 50%;
  -webkit-transform: scale(0.1);
          transform: scale(0.1);
  opacity: 0;
  margin: -100px 0 0 -100px;
  background-size: cover;
  z-index: 1;
}

.project {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-preferred-size: 1;
      flex-basis: 1;
  position: relative;
  z-index: 2;
  color: white;
  mix-blend-mode: difference;

}

a,
a:hover,
a:visited,
a:active {
  color: rgb(143, 143, 231);
}

.project a:link{
  text-decoration: none;
}

.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}


/* -----------------------
MEDIA QUERIES
----------------------- */

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  .lead-head {
    font-size: 5rem;
    padding-bottom: 3rem;
  }

  p {
    font-size: 1.3rem;
  }

  .sub-heading {
    font-size: 2.5rem;
  }

  .design-head {
    font-size: 3.3rem;
  }

  .design-head2,
  .design-head3 {
    font-size: 1.5rem;
  }

  #awards .design-head {
    font-size: 3.3rem;
  }

  .work-header .project-title h1 {
    font-size: 3rem;
    font-weight: 300;
  }

  .cursor {
    width: 30rem;
    height: 20rem;
  }
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  .lead-head {
    font-size: 5rem;
    padding-bottom: 3rem;
  }

  p {
    font-size: 1.3rem;
  }

  .sub-heading {
    font-size: 2.5rem;
  }

  .design-head {
    font-size: 3.3rem;
  }

  .design-head2,
  .design-head3 {
    font-size: 1.5rem;
  }

  #awards .design-head {
    font-size: 3.3rem;
  }

  .work-header .project-title h1 {
    font-size: 3rem;
    font-weight: 300;
  }

  .cursor {
    width: 30rem;
    height: 20rem;
  }
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1023px) {
  .lead-head {
    font-size: 5.5rem;
    padding-bottom: 3rem;
  }

  p {
    font-size: 1.3rem;
  }

  .sub-heading {
    font-size: 2.5rem;
  }

  .design-head {
    font-size: 3.3rem;
  }

  .design-head2,
  .design-head3 {
    font-size: 1.5rem;
  }

  #awards .design-head {
    font-size: 3.3rem;
  }

  .work-header .project-title h1 {
    font-size: 3rem;
    font-weight: 300;
  }

  .cursor {
    width: 30rem;
    height: 20rem;
  }
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  .lead-head {
    font-size: 5.5rem;
    padding-bottom: 3rem;
  }

  p {
    font-size: 1.3rem;
  }

  .sub-heading {
    font-size: 2.5rem;
  }

  .design-head {
    font-size: 3.3rem;
  }

  .design-head2,
  .design-head3 {
    font-size: 1.5rem;
  }

  #awards .design-head {
    font-size: 3.3rem;
  }

  .work-header .project-title h1 {
    font-size: 3rem;
    font-weight: 300;
  }

  .cursor {
    width: 30rem;
    height: 20rem;
  }
}

@media only screen and (max-width: 812px) and (max-height: 375px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
  .lead-head {
    font-size: 5rem;
    padding-bottom: 3rem;
  }

  p {
    font-size: 1.3rem;
  }

  .sub-heading {
    font-size: 2.5rem;
  }

  .design-head {
    font-size: 3.3rem;
  }

  .design-head2,
  .design-head3 {
    font-size: 1.5rem;
  }

  #awards .design-head {
    font-size: 3.3rem;
  }

  .work-header .project-title h1 {
    font-size: 3rem;
    font-weight: 300;
  }

  .cursor {
    width: 30rem;
    height: 20rem;
  }

  .career-header {
    height: 110vh;
  }

  .contact-header {
    height: 130vh;
  }
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1024px) and (max-width: 1280px) {
  .lead-head {
    font-size: 5.5rem;
    padding-bottom: 3rem;
  }

  p {
    font-size: 1.3rem;
  }

  .sub-heading {
    font-size: 2.5rem;
  }

  .design-head {
    font-size: 3.3rem;
  }

  .design-head2,
  .design-head3 {
    font-size: 1.5rem;
  }

  #awards .design-head {
    font-size: 3.3rem;
  }

  .work-header .project-title h1 {
    font-size: 3rem;
    font-weight: 300;
  }

  .cursor {
    width: 30rem;
    height: 20rem;
  }
}

/* Landscape for Ipad Pro*/

@media only screen and (min-width: 1366px) and (max-height: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
}

/* 
  ##Device = Desktops
  ##Screen = 1441px to higher resolution desktops
*/

@media (min-width: 1441px) {
}