/*
Theme Name: Enaya
Theme URI: https://yourwebsite.com/enaya
Author: Your Name
Author URI: https://yourwebsite.com
Description: Enaya - A modern, clean and fully customizable WordPress theme built from scratch.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: enaya
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, blog, one-column, two-columns

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Enaya is based on starter theme and starter content is available.
*/

/* ==========================================================================
   CSS Variables / Custom Properties
   ========================================================================== */
/* ==========================================================================
   Typography / Fonts
   ========================================================================== */
@font-face {
  font-family: "Dubai";
  src: url("assets/fonts/dubai/DUBAI-REGULAR.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Dubai";
  src: url("assets/fonts/dubai/DUBAI-MEDIUM.TTF") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Dubai";
  src: url("assets/fonts/dubai/DUBAI-BOLD.TTF") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Lexend";
  src: url("assets/fonts/lexend/Lexend-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Lexend";
  src: url("assets/fonts/lexend/Lexend-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("assets/fonts/avenir-lt-pro/AvenirLTProLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("assets/fonts/avenir-lt-pro/AvenirLTProRoman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("assets/fonts/avenir-lt-pro/AvenirLTProMedium.otf")
    format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("assets/fonts/avenir-lt-pro/AvenirLTProHeavy.otf") format("opentype");
  font-weight: 800; /* Using Heavy as 800 or Bold */
  font-style: normal;
}
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("assets/fonts/avenir-lt-pro/AvenirLTProBlack.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
}

:root {
  /* Variables are now in assets/css/colors.css */
}

/* ==========================================================================
   Base
   ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  /* 
   * 1rem = 16px at 1920px width (0.833333vw).
   * scales up linearly for >1920px screens.
   * scales down for <1920px, but clamp ensures min size.
   */
  font-size: 0.833333vw;
}

@media (max-width: 1400px) {
  html {
    /* Lock to standard 16px on smaller screens if desired, or let it scale.
        User wanted 1920px design to scale up. 
        Usually on desktop < 1920 we might want fixed 16px or clamp.
        Let's give a robust clamp.
      */
    font-size: clamp(12px, 0.833333vw, 100px);
  }
}

body {
  font-size: 1rem;
}

body {
  margin: 0;
  font-family: var(--enaya-font-primary);
  color: var(--enaya-gray-900);
  background-color: var(--enaya-white);
}

img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--enaya-container-max);
  margin: 0 auto;
  padding-left: var(--enaya-container-padding);
  padding-right: var(--enaya-container-padding);
}

/* Simplified Layout Structure: Header, Main, Footer */
.site-header {
  background-color: var(--enaya-white);
  /* Add basic header styles here if needed later */
}

.site-main {
  min-height: 50vh;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  background: linear-gradient(
    90deg,
    #00818d -13.84%,
    #0b828d 3.25%,
    #288790 33.49%,
    #588e94 72.94%,
    #97989a 117.64%
  );
  border-radius: 1rem; /* 16px */
  font-family: "Lexend";
  font-style: normal;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.375rem; /* 22px */
  text-align: left;
  letter-spacing: -0.05em;
  text-transform: capitalize;
  color: #ffffff;
  padding-top: 0.75rem; /* 12px */
  padding-bottom: 0.75rem; /* 12px */
  padding-left: 1.0625rem; /* 17px */
  padding-right: 1.0625rem; /* 17px */
  text-decoration: none;
  transition: background 0.3s ease;
  border: 0;
}

.btn:hover {
  background: linear-gradient(
    90deg,
    #00818d -13.84%,
    #0b828d -0.84%,
    #288790 22.15%,
    #588e94 52.15%,
    #97989a 86.15%
  );
}
.btn > span {
  padding-right: 0.75rem; /* 12px */
}
.btn-icon {
  width: 1.875rem; /* 30px */
  height: 1.875rem; /* 30px */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn > .btn-icon > .dot {
  border: 1px solid #ffff;
  height: 0.5rem; /* 8px */
  position: absolute;
  width: 0.5rem; /* 8px */
  border-radius: 100%;
  background-color: #fff;
  /* Zoom Out / Return: Smooth, no bounce */
  transition: all 0.6s ease-in-out;
  transform: scale(1);
  opacity: 1;
}

.btn-icon svg {
  /* Zoom Out / Return: Smooth, no bounce */
  transition: all 0.6s ease-in-out;
  transform: scale(0);
  opacity: 0;
  width: 1.875rem; /* 30px */
  height: 1.875rem; /* 30px */
}

.btn:hover .btn-icon .dot {
  /* Zoom In (Hide): Bounce/Pop */
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: scale(0);
  opacity: 0;
}

/* Secondary Button (White) */
.btn.btn-white {
  background: #ffffff;
  color: #000000;
}
.btn.btn-black {
  background: #000000;
  color: #ffffff;
}

.btn.btn-black svg circle {
  fill: white;
}
.btn.btn-black svg path {
  fill: black;
}

/* Secondary Button Arrow/Dot styling */
/* The SVG fill is handled by the SVG file content (black arrow), but the dot is HTML */
.btn-white > .btn-icon > .dot {
  background-color: #000000;
  border: 1px solid #000000;
}

.btn:hover .btn-icon svg {
  /* Zoom In (Show): Bounce/Pop */
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: scale(1);
  opacity: 1;
}

.btn-download-icon {
  margin-right: 0.5625rem; /* 9px */
}

button.btn[type="submit"] {
  cursor: pointer;
}

/* ==========================================================================
   Typography Rules
   ========================================================================== */
h1 {
  font-family: "Lexend", sans-serif;
  letter-spacing: -0.0625rem; /* -1px */
  font-weight: 400;
  font-size: 4.375rem; /* 70px */
  line-height: 4.375rem; /* 70px */
  text-transform: uppercase;
}
h2 {
  font-family: "Lexend", sans-serif;
  letter-spacing: -0.0625rem; /* -1px */
  font-weight: 400;
  font-size: 3.125rem; /* 50px */
  line-height: 4.625rem; /* 74px */
}
h3 {
  font-family: "Lexend", sans-serif;
  letter-spacing: -0.0625rem; /* -1px */
  font-weight: 400;
  font-size: 2.5rem; /* 40px */
  line-height: 3.125rem; /* 50px */
}
h4 {
  font-family: "Dubai", sans-serif;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 1.875rem; /* 30px */
  line-height: 3.4375rem; /* 55px */
}
h5 {
  font-family: "Lexend", sans-serif;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 1.5rem; /* 24px */
  line-height: normal;
}
h6 {
  font-family: "Lexend", sans-serif;
  letter-spacing: 0.4375rem; /* 7px */
  font-weight: 400;
  font-size: 1rem; /* 16px */
  line-height: 1rem; /* 16px */
  text-transform: uppercase;
}

/* Helper classes for paragraphs */
.text-large,
p {
  font-family: "Dubai", sans-serif;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 1.375rem; /* 22px */
  line-height: 1.875rem; /* 30px */
}
.text-medium {
  font-family: "Dubai", sans-serif;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.25rem; /* 20px */
}
.text-small {
  font-family: "Dubai", sans-serif;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 1rem; /* 16px */
  line-height: 1.625rem; /* 26px */
}

.pum-theme-52153 .pum-container,
.pum-theme-lightbox .pum-container {
  border-image: var(--enaya-gradient);
  border-radius: 1.125rem;
  border: 8px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(--enaya-gradient) border-box;
}
/* .pum-theme-52153 .pum-content + .pum-close,
.pum-theme-lightbox .pum-content + .pum-close {
  background: var(--enaya-gradient);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 129, 141, 0.6);
  transition: all 0.3s ease;
}

.pum-theme-52153 .pum-content + .pum-close:hover,
.pum-theme-lightbox .pum-content + .pum-close:hover {
  transform: scale(1.1);
  box-shadow: 0 0 25px rgba(0, 129, 141, 0.9);
} */
.pum-theme-52143 .pum-title, .pum-theme-lightbox .pum-title {
	margin-bottom: 0;
    padding: 50px 0;
}
/* ==========================================================================
   Button Responsive Styles
   ========================================================================== */

/* Tablet (max-width: 992px) */
@media (max-width: 992px) {
  .btn {
    font-size: 1rem; /* 16px */
    line-height: 1.25rem; /* 20px */
    padding: 0.625rem 0.875rem; /* 10px 14px */
    border-radius: 0.875rem; /* 14px */
  }

  .btn-icon {
    width: 1.625rem; /* 26px */
    height: 1.625rem; /* 26px */
  }

  .btn > .btn-icon > .dot {
    width: 0.4375rem; /* 7px */
    height: 0.4375rem; /* 7px */
  }

  .btn > span {
    padding-right: 0.625rem; /* 10px */
  }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
  .btn {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.125rem; /* 18px */
    padding: 0.625rem 0.75rem; /* 10px 12px */
    border-radius: 0.75rem; /* 12px */
  }

  .btn-icon {
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
  }

  .btn > .btn-icon > .dot {
    width: 0.375rem; /* 6px */
    height: 0.375rem; /* 6px */
  }

  .btn > span {
    padding-right: 0.5rem; /* 8px */
  }

  .btn-icon svg {
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
  }
}

/* Small Mobile (max-width: 576px) */
@media (max-width: 576px) {
  .btn {
    font-size: 0.875rem; /* 14px */
    line-height: 1rem; /* 16px */
    padding: 0.5rem 0.625rem; /* 8px 10px */
    border-radius: 0.625rem; /* 10px */
  }

  .btn-icon {
    width: 1.375rem; /* 22px */
    height: 1.375rem; /* 22px */
  }

  .btn > .btn-icon > .dot {
    width: 0.3125rem; /* 5px */
    height: 0.3125rem; /* 5px */
  }

  .btn > span {
    padding-right: 0.375rem; /* 6px */
  }

  .btn-icon svg {
    width: 0.875rem; /* 14px */
    height: 0.875rem; /* 14px */
  }
}