/*
Theme Name: King Villarta
Theme URI: https://wordpress.org/themes/twentytwenty/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kingvillarta
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
@font-face {
  font-family: "TRTFlukeDemo-Medium";
  src: url("./font/TRTFlukeDemo-Medium.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./font/Inter-regular.ttf");
  font-display: swap;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "TRTFlukeDemo-Medium", sans-serif;
  background-color: #F8F8F8;
  cursor: none;
}

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

a,
p {
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  color: #000;
}

.highlight {
  color: #D9FF00;
}

.wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.wp-block-gallery img {
  width: 100%;
  height: auto;
  display: block;
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
}

/* Cursor Outline */
.cursor-outline {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1px solid white;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

/* Slight scale on hover */
.cursor-outline.is-hover {
  transform: translate(-50%, -50%) scale(1.6);
}

/* Magnetic CTA (optional styling helper) */
.magnetic {
  display: inline-block;
  position: relative;
}

.no-scroll {
  overflow: hidden;
  height: 100vh; /* prevents scroll jumps on mobile */
}

.hero {
  position: fixed;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  z-index: 999;
  background-color: #fff;
}
.hero .hero-overlay {
  position: absolute;
  width: 100%;
  height: 100svh;
  background-color: #1f1f1f;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  will-change: clip-path;
  z-index: 0;
}
.hero .hero-overlay .counter {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  color: #F8F8F8;
}
.hero .hero-overlay .counter span {
  font-size: 10rem;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .hero .hero-overlay .counter span {
    font-size: 5rem;
  }
}
.hero .hero-overlay .overlay-text-container {
  position: absolute;
  top: 3rem;
  left: 2rem;
  height: 4rem;
  overflow: hidden;
}
.hero .hero-overlay .overlay-text-container .overlay-text {
  display: flex;
  flex-direction: column;
  transform: translateY(4rem);
  will-change: transform;
}
.hero .hero-overlay .overlay-text-container .overlay-text p {
  color: #F8F8F8;
  height: 4rem;
  display: flex;
  align-items: center;
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  .hero .hero-overlay .overlay-text-container .overlay-text p {
    height: 4rem;
    font-size: 0.9rem;
  }
}
.hero .hero-images {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  padding: 0 2rem;
  display: flex;
  justify-content: center;
  gap: 10vw;
  will-change: gap;
  z-index: 2;
}
.hero .hero-images .img {
  width: 10vw;
  aspect-ratio: 5/7;
  transform: translateY(50%) scale(0.5);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  opacity: 0;
  will-change: opacity, transform, clip-path;
}
@media screen and (max-width: 767px) {
  .hero .hero-images .img {
    width: 30vw;
  }
}
.hero .hero-header {
  position: absolute;
  bottom: 2rem;
  width: 100%;
  z-index: -1;
}
.hero .hero-header h1 {
  text-transform: uppercase;
  text-align: center;
  font-size: 13vw;
  font-weight: 500;
  line-height: 0.85;
}
.hero .hero-header h1 h1 .word {
  transform: translateY(100%);
  will-change: transform;
}

@media (max-width: 1000px) {
  .hero-overlay .counter {
    right: 1rem;
    bottom: 1rem;
  }
  .hero-images {
    padding: 0 0.5rem;
    gap: 2.5vw;
  }
  .hero-images .img {
    width: 20vw;
  }
}
nav {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5em 2em;
  color: #F8F8F8;
  mix-blend-mode: difference;
  z-index: 999;
}

nav > div {
  flex: 1;
}

.logo {
  text-align: center;
  font-family: "Canopee";
}

.logo p {
  position: relative;
  top: 0.225em;
}

.logo a {
  text-decoration: none;
  font-size: 30px;
  color: #cdc6be;
  font-family: "TRTFlukeDemo-Medium", sans-serif;
}

.toggle-btn {
  display: flex;
  justify-content: flex-end;
}

.burger {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.75em 2em 1.5em 2em;
  background: #000;
  border-radius: 0.25em;
  outline: none;
  height: 20px;
  width: 28px;
  border: none;
  transition: all 250ms ease-out;
  cursor: pointer;
}

.burger:before,
.burger:after {
  content: "";
  width: 40px;
  height: 2px;
  position: absolute;
  background: #F8F8F8;
  transition: all 250ms ease-out;
  will-change: transform;
}

.burger:before {
  transform: translateY(-3px);
}

.burger:after {
  transform: translateY(3px);
}

.active.burger:before {
  transform: translateY(0) rotate(45deg);
}

.active.burger:after {
  transform: translateY(0) rotate(-45deg);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  background: #141412;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  will-change: transform;
  z-index: 3;
}

.overlay-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  gap: 1em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #F8F8F8;
}

.menu-item {
  display: flex;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.menu-item span {
  position: relative;
  text-align: center;
  font-family: "Canopee";
  font-size: 7vw;
  line-height: 80%;
  will-change: transform;
  transition: letter-spacing 0.3s;
}

.menu-item span:hover {
  letter-spacing: 0.075em;
}

.menu-item span#active::after {
  content: "";
  position: absolute;
  top: 55%;
  left: 0;
  transform: translateY(-50%);
  background: #D9FF00;
  width: 100%;
  height: 12px;
}
@media screen and (max-width: 768px) {
  .menu-item span#active::after {
    top: 40%;
    height: 5px;
  }
}

.menu-item a {
  color: #F8F8F8;
  text-decoration: none;
  font-size: 7vw;
  font-family: "TRTFlukeDemo-Medium", sans-serif;
  line-height: 1.2em;
}
@media screen and (max-width: 768px) {
  .menu-item a {
    font-size: 13vw;
  }
}

.sub-nav {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5em;
  opacity: 0;
}

.sub-nav p {
  font-family: "Canopee";
  font-size: 20px;
  color: #F8F8F8;
}

@media (max-width: 900px) {
  .logo-main img {
    display: none;
  }
}
@media (max-width: 900px) {
  .logo a {
    font-size: 20px;
  }
}
h2 {
  font-size: 2vw;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.5rem;
}
@media screen and (max-width: 768px) {
  h4 {
    font-size: 1.2rem;
  }
}

ul {
  margin: 0;
  padding-left: 1rem;
}
ul li {
  font-weight: 500;
  line-height: 1.4em;
}

.featured-work {
  padding: 0rem 5rem 10rem 5rem;
  background-color: #1f1f1f;
  color: #F8F8F8;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .featured-work {
    padding: 0rem 1rem 7rem 1rem;
  }
}
.featured-work .featured {
  font-size: 2rem;
  width: -moz-fit-content;
  width: fit-content;
}
.featured-work .featured:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #D9FF00;
  width: 100%;
  height: 3px;
}

.featured-list {
  width: 100%;
  margin: 0;
  padding: 0;
}

.list-item {
  display: inline-block;
  width: 100%;
  padding: 2rem 0 2rem 0rem;
  position: relative;
  border-bottom: 2px solid #F8F8F8;
}
@media screen and (max-width: 768px) {
  .list-item {
    padding: 1rem 0 1rem 0rem;
  }
}
.list-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #D9FF00;
  transition: width 0.5s ease, height 0.3s ease;
}
.list-item:hover h3 {
  letter-spacing: 0.075em;
  color: #D9FF00;
  transition: all 0.3s;
}
.list-item:hover::after {
  width: 100%;
  height: 4px;
}

.list-item img.swipeimage {
  position: fixed;
  top: 0;
  left: 0;
  width: 350px;
  height: 350px;
  -o-object-fit: cover;
     object-fit: cover;
  transform: translateX(-50%) translateY(-50%);
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 1024px) {
  .list-item img.swipeimage {
    position: static;
    transform: none;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    width: 100%;
    max-width: 350px;
    margin: 1rem 0 1rem 0;
  }
}

.about-me {
  position: relative;
  width: 100%;
  height: 100svh;
}

.about-me-section {
  padding: 10rem 0rem;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #1f1f1f;
}
@media screen and (max-width: 768px) {
  .about-me-section {
    padding: 7rem 0rem;
  }
}

.about-copy {
  position: relative;
  width: 100%;
  padding: 0 0 4rem 0rem;
  display: flex;
  width: 85%;
  margin: auto;
  max-width: 1000px;
}

.copy-block {
  flex: 1;
  padding: 0 2rem;
}

.copy-block p {
  font-size: 1.75rem;
  font-weight: 450;
  letter-spacing: -0.025rem;
  line-height: 1.25;
  text-transform: unset;
  color: #F8F8F8;
  text-align: center;
  transition: all 0.3s;
}
@media screen and (max-width: 767px) {
  .copy-block p {
    font-size: 0.9rem;
  }
}

.scroll-indicator {
  position: absolute;
  width: 10rem;
  height: 0.1rem;
  top: 3rem;
  right: 2rem;
  background-color: #1f1f1f;
}

.scroll-indicator::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #F8F8F8;
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
  will-change: transform;
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.marquee-track {
  display: flex;
  gap: 0.75rem;
  will-change: transform;
  width: -moz-max-content;
  width: max-content;
}

.marquee-item {
  width: 15rem;
  height: 6rem;
  border-radius: 0.25rem;
  overflow: hidden;
  display: block;
}
@media screen and (max-width: 768px) {
  .marquee-item {
    width: 8rem;
  }
}

.wrapper {
  background-color: #222;
  overflow: hidden;
}
.wrapper .gallery {
  position: relative;
  width: 100%;
  height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1f1f1f;
  overflow: hidden;
}
.wrapper .gallery::after {
  content: "";
  position: absolute;
  inset: 0; /* covers entire gallery */
  background-color: rgba(0, 0, 0, 0.3); /* adjust darkness */
  z-index: 0; /* sits behind everything */
}
.wrapper .gallery h2.gallery-heading {
  width: 45%;
  text-align: center;
  will-change: opacity;
  z-index: 2;
  color: #F8F8F8;
  text-shadow: 0 1px 1px rgb(0, 0, 0), 0 4px 12px rgb(0, 0, 0);
  font-size: clamp(2rem, 5vw, 7vw);
  font-weight: 500;
  line-height: 1em;
  letter-spacing: -0.025rem;
  font-family: "Inter", sans-serif;
  position: relative; /* make heading above overlay */
  z-index: 1;
}

.card {
  position: absolute;
  width: 250px;
  height: 300px;
  border-radius: 1rem;
  border: 0.5rem solid var(--base-200);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
  will-change: transform;
  overflow: hidden;
}

.card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.5rem;
}

@media (max-width: 1000px) {
  section h1 {
    width: 100%;
    padding: 2rem;
  }
}
.contact {
  background-color: #1f1f1f;
  position: relative;
  overflow: hidden;
  padding: 10rem 0rem;
}
@media screen and (max-width: 768px) {
  .contact {
    padding: 7rem 0rem;
  }
}
.contact .contact-marquee {
  overflow: hidden;
  width: 100%;
}
.contact .contact-marquee .contact-marquee-track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
}
.contact .contact-marquee .contact-marquee-track .contact-heading {
  text-transform: uppercase;
  text-align: center;
  font-size: 7vw;
  font-weight: 500;
  line-height: 0.85;
  color: #F8F8F8;
  white-space: nowrap;
  padding-right: 4rem;
}
@media screen and (max-width: 767px) {
  .contact .contact-marquee .contact-marquee-track .contact-heading {
    font-size: 15vw;
  }
}
.contact .content {
  display: flex;
  padding: 0 5rem;
  margin-top: 5rem;
}
@media screen and (max-width: 768px) {
  .contact .content {
    flex-direction: column;
    gap: 60px;
    padding: 0 1rem;
  }
}
.contact .content .content-left {
  flex: 1;
}
.contact .content .content-left .contact-sub-head {
  font-size: 48px !important;
  color: #fff !important;
  max-width: 35vw;
}
@media screen and (max-width: 768px) {
  .contact .content .content-left .contact-sub-head {
    font-size: 24px !important;
    max-width: 100%;
  }
}
.contact .content .content-left .get-in-touch span {
  margin-top: 3rem;
  font-size: 24px;
  font-family: "Inter", sans-serif;
  color: #F8F8F8;
}
@media screen and (max-width: 768px) {
  .contact .content .content-left .get-in-touch span {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  .contact .content .content-left .get-in-touch .icons svg {
    max-width: 40px;
  }
}
.contact .content .content-right {
  flex: 1;
}
.contact .content .content-right .contact-form form p {
  color: #F8F8F8;
  font-size: 24px;
  font-family: "TRTFlukeDemo-Medium", sans-serif;
}
.contact .content .content-right .contact-form form p label {
  width: 100%;
}
.contact .content .content-right .contact-form form p label input {
  color: #F8F8F8;
  width: 100%;
  background-color: transparent;
  border-bottom: solid 1px #F8F8F8;
  border-right: none;
  border-top: none;
  border-left: none;
}
.contact .content .content-right .contact-form form p label input:focus {
  outline: none;
}
.contact .content .content-right .contact-form form p label input:-webkit-autofill, .contact .content .content-right .contact-form form p label input:-webkit-autofill:hover, .contact .content .content-right .contact-form form p label input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  -webkit-text-fill-color: #F8F8F8 !important;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}
.contact .content .content-right .contact-form form p label textarea {
  width: 100%;
  border: solid 1px #F8F8F8;
  background-color: transparent;
  color: #F8F8F8;
  padding: 0.5rem;
}
.contact .content .content-right .contact-form form p .wpcf7-submit {
  background-color: transparent;
  color: #F8F8F8;
  border: none;
  text-align: center;
  text-transform: uppercase;
  float: right;
  font-size: 48px;
  font-family: "TRTFlukeDemo-Medium", sans-serif;
  border-bottom: solid 3px #fff;
  transition: letter-spacing 0.3s;
}
@media screen and (max-width: 768px) {
  .contact .content .content-right .contact-form form p .wpcf7-submit {
    font-size: 32px;
  }
}
.contact .content .content-right .contact-form form p .wpcf7-submit:hover {
  letter-spacing: 0.075em;
}

.wpcf7 form.sent .wpcf7-response-output {
  color: #fff;
  border: none;
}

.hero_gallery-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #1f1f1f;
}
.hero_gallery-wrap .hero_gallery {
  position: relative;
  width: 100%;
  height: 100%;
  flex: none;
}
.hero_gallery-wrap .hero_gallery__item {
  background-position: 50% 50%;
  background-size: cover;
  flex: none;
  position: relative;
}
.hero_gallery-wrap .hero_gallery__item img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  border: solid 1px #545454;
}

.gallery--bento {
  display: grid;
  gap: 1vh;
  grid-template-columns: repeat(3, 32.5vw);
  grid-template-rows: repeat(4, 23vh);
  justify-content: center;
  align-content: center;
}

.gallery--final.gallery--bento {
  grid-template-columns: repeat(3, 100vw);
  grid-template-rows: repeat(4, 49.5vh);
  gap: 1vh;
}

.gallery--bento .hero_gallery__item:nth-child(1) {
  grid-area: 1/1/3/2;
}

.gallery--bento .hero_gallery__item:nth-child(2) {
  grid-area: 1/2/2/3;
}

.gallery--bento .hero_gallery__item:nth-child(3) {
  grid-area: 2/2/4/3;
}

.gallery--bento .hero_gallery__item:nth-child(4) {
  grid-area: 1/3/3/3;
}

.gallery--bento .hero_gallery__item:nth-child(5) {
  grid-area: 3/1/3/2;
}

.gallery--bento .hero_gallery__item:nth-child(6) {
  grid-area: 3/3/5/4;
}

.gallery--bento .hero_gallery__item:nth-child(7) {
  grid-area: 4/1/5/2;
}

.gallery--bento .hero_gallery__item:nth-child(8) {
  grid-area: 4/2/5/3;
}

.single-content .content {
  padding: 8rem 3rem;
  display: flex;
  gap: 60px;
  max-width: 90%;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .single-content .content {
    flex-direction: column;
    max-width: 100%;
    padding: 6rem 1rem;
  }
}
.single-content .content ul li {
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
}
.single-content .content .left {
  flex: 1;
}
.single-content .content .left .content-heading {
  margin-bottom: 60px;
}
.single-content .content .left p {
  font-size: 0.9rem;
  font-family: "Inter", sans-serif;
  text-transform: none;
  font-family: "Inter", sans-serif;
}
.single-content .content .left h2 {
  border-bottom: solid 1px #1f1f1f;
}
@media screen and (max-width: 768px) {
  .single-content .content .left h2 {
    font-size: 2rem;
    margin-bottom: 30px;
  }
}
.single-content .content .right {
  flex: 0 0 20vw;
}
.single-content .content .right button {
  border: solid 1px #1f1f1f;
  border-radius: 5px;
  padding: 2rem 1rem;
}/*# sourceMappingURL=style.css.map */