/*
Theme Name: Shabaily
Author: Matthew Shabaily
Version: 4.0
*/

/* ============ Variables ============ */

/* ============ Globals ============ */

body {
  font-family: "Inter";
  overflow-x: hidden;
}

/* ============ Containers ============ */

.flex-row {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.grid {
  display: grid;
}

/* ============ Scrollbar ============ */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ============ Effects ============ */

.light-effect {
  transition: filter 02s;
}

.pan-effect {
  transition: transform 0.2s;
}

.dim-effect {
  transition: opacity 0.2s;
}

.dim-effect:hover {
  opacity: 0.6;
}

.pan-effect:hover {
  filter: brightness(1.2);
  transform: translate(1px);
}

.light-effect:hover {
  filter: brightness(1.2);
}

/* ============ Utils ============ */

.hidden {
  opacity: 0;
  z-index: -1 !important;
}

/* ============ Text ============ */

h1 {
  font-weight: 800;
  font-size: 55px;
}

h2 {
  font-weight: 100;
  font-size: 45px;
}

h3 {
  font-size: 30px;
  font-weight: 400;
}

p {
  font-size: 16px;
  line-height: 35px;
}

/* ============ CTAs ============ */

.cta {
  padding-inline: 40px;
  padding-block: 10px;
  background-color: #d9d9d9;
  font-size: 18px;
  width: fit-content;
  border-radius: 30px;
}

/* ============ 404 ============ */

.error-404 {
  align-items: center;
  height: 500px;
}

.error-404 .text {
  width: 85%;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 50px;
  height: 100%;
}

.error-404 .text h1 {
  color: var(--primary);
  font-size: 100px;
}

/* ============ Header ============ */

header {
  position: relative;
  align-items: center;
  width: 100%;
  gap: 40px;
  padding-top: 50px;
  padding-bottom: 40px;
  margin-bottom: 100px;
}

header::after {
  position: absolute;
  content: "";
  bottom: -50px;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: #c4c197;
}

header .wrapper {
  width: 90%;
  justify-content: space-between;
  align-items: center;
}

header .contacts {
  display: flex;
  gap: 15px;
}

header .contacts img {
  height: 30px;
}

header h1 {
  font-weight: 600;
  font-size: 55px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0px);
  text-align: center;
}

header h2 {
  width: 100%;
  text-align: center;
}

header .menu {
  display: flex;
  gap: 30px;
}

header .menu a {
  font-size: 18px;
  transition: opacity 0.3s;
}

header .menu a:hover {
  opacity: 0.6;
}

body:has(header + .showreel) header {
  margin-bottom: 50px;
}

body:has(#burger.rotated) {
  overflow-y: hidden;
}

#burger {
  display: none;
  position: absolute;
  right: 50px;
  top: 25px;
  flex-direction: column;
  justify-content: space-evenly;
  height: 50px;
  width: 50px;
  cursor: pointer;
  z-index: 200;
}

#burger rect {
  display: block;
  width: 100%;
  height: 10%;
  border-radius: 100px;
  background-color: #c4c197;
  transition: transform 0.5s;
}

#burger.rotated rect:nth-child(1) {
  transform: translate(0, 270%) rotate(45deg);
  background-color: black;
}

#burger.rotated rect:nth-child(2) {
  opacity: 0;
  background-color: black;
}

#burger.rotated rect:nth-child(3) {
  transform: translate(0, -260%) rotate(-45deg);
  background-color: black;
}

.burger-menu {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
}

.burger-menu:not(.hidden) {
  z-index: 100;
}

.burger-menu .wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.burger-menu .main-nav {
  position: absolute;
  top: 62%;
  left: 10%;
  transform: translate(0%, -50%);
  height: 80%;
}

.burger-menu .header-menu {
  display: flex;
  flex-direction: column;
  height: 80%;
  justify-content: space-evenly;
}

.burger-menu h1 {
  position: absolute;
  left: 10%;
  top: 13%;
}

.burger-menu .main-nav a {
  font-size: 30px !important;
}

.burger-menu .logo {
  width: 200px;
  filter: invert(1);
  position: absolute;
  top: 24px;
  left: 35px;
}

/* ============ Showreel ============ */

.showreel {
  height: 550px;
}

.showreel video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============ Info Blocks ============ */

.info-blocks {
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 880px;
}

.info-blocks .background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center;
}

.info-blocks .wrapper {
  grid-template-columns: 1fr 1fr;
  width: 100%;
  row-gap: 80px;
  z-index: 2;
  place-items: center;
}

.info-blocks .block {
  position: relative;
  height: 100%;
  width: 479px;
  padding-block: 20px;
}

.info-blocks .block .background {
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.25;
  z-index: 3;
  border-radius: 30px;
}

.info-blocks .block .text {
  position: relative;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  color: white;
  z-index: 3;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info-blocks .block .text p {
  width: 80%;
}

/* ============ Projects Grid ============ */

.projects-grid {
  position: relative;
  align-items: center;
  gap: 50px;
  margin-top: 30px;
}

.projects-grid::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 40px;
  background-color: #c4c197;
  z-index: -1;
}

.projects-grid .wrapper {
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  width: 85%;
}

.projects-grid .project {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 424px;
}

.projects-grid video {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  top: 0;
  left: 0;
  z-index: 1;
}

.projects-grid .overlay-top {
  display: grid;
  place-items: center;
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 50px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: black;
  opacity: 0.2;
}

.projects-grid .overlay-bottom {
  display: grid;
  place-items: center;
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: black;
  opacity: 0.2;
  border-radius: 15px;
}

.project .bottom-container {
  width: 100%;
  height: 50px;
}

.projects-grid .project h3 {
  color: white;
  z-index: 2;
  position: relative;
  text-align: center;
  margin-top: 10px;
}

.projects-grid .project p {
  color: white;
  line-height: 19px;
  text-align: center;
  z-index: 2;
  position: absolute;
  bottom: 0;
  margin-bottom: 2%;
  width: 100%;
}

/* ============ Products ============ */

.site-main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.woocommerce-breadcrumb {
  display: none;
}

ul.products {
  width: 85%;
}

.products.grid {
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
}

.products .product-item img {
  width: 422px;
  margin-bottom: 10px;
  height: 501px;
  border-radius: 15px;
  object-fit: cover;
}

.products-form {
  align-items: center;
  margin-top: 50px;
}

.products-form .wrapper {
  width: 80%;
}

.product-item .details {
  gap: 5px;
}

.products-form .gform_wrapper {
  width: 100%;
}

.gform_wrapper input[type="text"],
.gform_wrapper textarea {
  border: none;
  border-bottom: 1px solid black;
}

.gform_wrapper input[type="submit"] {
  padding-inline: 40px;
  padding-block: 10px;
  background-color: #d9d9d9;
  font-size: 18px;
  width: fit-content;
  border-radius: 30px;
  border: none;
}

.gform_title {
  display: none;
}

.products-form .title {
  width: 80%;
  margin-bottom: 30px;
}

.gform_wrapper .gfield:has(input) {
  margin-block: 20px;
}

.gform_wrapper textarea {
  height: 150px !important;
}

/* ============ Contact From ============ */

.contact-form {
  align-items: center;
  margin-bottom: 50px;
}

.contact-form .wrapper {
  justify-content: space-between;
  width: 85%;
}

.contact-form .wrapper img {
  width: 619px;
  height: 459px;
  object-fit: cover;
  border-radius: 15px;
}

.contact-form .wrapper .gform_wrapper {
  width: 55%;
}

/* ============ Gallery ============ */

.gallery {
  align-items: center;
  margin-bottom: 50px;
}

.gallery .wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 85%;
  column-gap: 30px;
  overflow: hidden;
  row-gap: 30px;
}

.gallery a:has(img.wide) {
  grid-column: span 2;
}

.gallery a {
  height: 400px;
  width: 100%;
}

.gallery img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* ============ Text Section ============ */

.text-section {
  align-items: center;
  margin-block: 50px;
}

.text-section .wrapper {
  width: 45%;
  text-align: center;
  align-items: center;
}

.text-section .text {
  gap: 40px;
}

.text-section .wrapper .cta {
  margin-top: 25px;
}

/* ============ Showreel ============ */

.image-links a {
  position: relative;
  width: 25%;
}

.image-links .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: black;
  opacity: 20%;
}

.image-links img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
}

.image-links .title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 18px;
  font-weight: 800;
}

/* ============ Testimonials ============ */

.testimonials {
  position: relative;
  margin-block: 100px;
}

.testimonial {
  width: 836px !important;
  height: 320px !important;
  margin-inline: 15px;
  border-radius: 30px;
  background-color: #4c4c4c;
  color: white;
}

.testimonial .details {
  margin: 30px;
}

.testimonial .text p {
  margin-inline: 75px;
  margin-top: 50px;
  text-align: center;
}

.slick-arrow.prev {
  transform: translateY(-50%) rotate(180deg) !important;
}

.slick-arrow.prev,
.slick-arrow.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #c4c197; /* Matching color */
  border-radius: 10px;
  z-index: 10;
  padding: 10px;
}

/* Positioning */
.slick-arrow.prev {
  left: calc(50% - 456px); /* Adjust based on slider width */
}

.slick-arrow.next {
  right: calc(50% - 456px);
}

/* Media Queries for Responsiveness */
@media (max-width: 1024px) {
  .slick-prev {
    left: calc(50% - 150px);
  }

  .slick-next {
    right: calc(50% - 150px);
  }
}

@media (max-width: 768px) {
  .slick-prev {
    left: calc(50% - 100px);
  }

  .slick-next {
    right: calc(50% - 100px);
  }
}

/* ============ Woo-Commerce ============ */

.default {
  align-items: center;
}

.default > div {
  width: 80%;
}

.wc-block-cart__empty-cart__title.with-empty-cart-icon:before {
  display: none !important;
}

.wp-block-woocommerce-empty-cart-block .wp-block-separator {
  display: none !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid {
  display: none !important;
}

body:not(:has(.wp-block-woocommerce-empty-cart-block))
  .wp-block-button__link.wp-element-button {
  display: none !important;
}

.editor-styles-wrapper .wc-block-cart__empty-cart__title,
.wc-block-cart__empty-cart__title {
  font-size: 35px !important;
}

body:has(.wp-block-woocommerce-empty-cart-block) .is-layout-flex {
  justify-content: center !important;
  margin-block: 50px !important;
}

.wp-block-heading:not(.with-empty-cart-icon) {
  display: none !important;
}
/* ============ Projects ============ */

.projects {
  align-items: center;
}

.projects .wrapper {
  width: 85%;
  gap: 50px;
}

.projects .project {
  align-items: center;
  justify-content: space-between;
}

.projects .project img {
  width: 946px;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  flex-basis: auto;
}

.projects .project .text {
  width: 38%;
  gap: 40px;
  justify-content: center;
}

.projects .get-in-touch {
  align-self: center;
  align-items: center;
  gap: 20px;
  margin-block: 40px;
}

.projects .socials {
  gap: 50px;
}

.project .socials p {
  font-size: 18px;
}

.projects .socials img {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

.video::-webkit-media-controls {
  display: none !important;
}

body:has(.showreel) header {
  margin-bottom: 50px;
}

/* ============ Footer ============ */

footer {
  position: relative;
  align-items: center;
  padding-block: 40px;
}

footer .wrapper {
  width: 90%;
  justify-content: space-between;
}

footer .logos {
  margin-top: 50px;
  margin-bottom: 20px;
  justify-content: space-between;
}

footer .logos img {
  width: 100%;
}

footer .links {
  justify-content: space-between;
}

footer .notices a {
  line-height: 35px;
}

footer .policies {
  gap: 30px;
}

footer nav ul {
  gap: 30px;
}

footer .notices {
  gap: 30px;
}

footer .socials {
  gap: 10px;
  margin-top: 10px;
  align-items: center;
}

footer .socials img {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

footer::before {
  position: absolute;
  content: "";
  top: -3px;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: #c4c197;
}