/* ==========================================================================
   Font Face Declarations
   ========================================================================== */

@font-face {
  font-display: swap;
  font-family: MuseoSlab;
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/MuseoSlab-300.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: MuseoSlab;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/MuseoSlab-500.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: MuseoSans;
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/MuseoSans-300.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: MuseoSans;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/MuseoSans-500.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: MuseoSans;
  font-style: normal;
  font-weight: 700;
  src: url("../fonts//MuseoSans-700.woff2") format("woff2");
}

/* ==========================================================================
   CSS Custom Properties (Variables)
   ========================================================================== */

:root {
  /* Colors */
  --black: #000000;
  --white: #ffffff;
  --dark: #16110b;
  --transparent: #ffffff00;
  --orange: #f4a04c;
  --danger: #dc3545;
  --success: #198754;
  
  /* Primary Colors */
  --primary: #015436;
  --secondary: #145c4a;
  --primary-dark: #0b4c3e;
  --accent: #d7f2e8;
  
  /* Text Colors */
  --text-primary: #333333;
  
  /* Background Colors */
  --gray-light: #f5f5f5;
  
  /* Border Colors */
  --border: #dddddd;
  --border-light: #66666666;
  
  /* Typography */
  --font-Raleway: "Raleway", sans-serif;
  --font-MuseoSans: "MuseoSans";
  --font-MuseoSlab: "MuseoSlab";
  
  /* Font Sizes */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */
  --font-size-h3: 3.75rem;      /* 60px */
  --font-size-h2: 4.375rem;     /* 70px */
  --font-size-h1: 5.625rem;     /* 90px */
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Spacing */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-2sm: 0.75rem;   /* 12px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 3rem;      /* 48px */
  --spacing-3xl: 4rem;      /* 64px */
  --spacing-4xl: 6rem;      /* 96px */
  
  /* Border Radius */
  --border-radius-sm: 0.25rem;    /* 4px */
  --border-radius-md: 0.5rem;     /* 8px */
  --border-radius-lg: 1rem;       /* 16px */
  --border-radius-xl: 1.5rem;     /* 24px */
  --border-radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  
  /* Container Widths */
  --container-xs: 414px;
  --container-sm: 576px;
  --container-md: 768px;
  --container-lg: 992px;
  --container-xl: 1200px;
  --container-xxl: 1400px;
  --container-xxxl: 1560px;
}

/* ==========================================================================
   Global Resets & Base Styles
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: 1.5 !important;
  letter-spacing: 0.4px !important;
  font-family: var(--font-MuseoSans) !important;
}

*:focus-visible {
  outline: none !important;
}

body {
  font-family: var(--font-MuseoSans) !important;
  font-size: 16px;
  line-height: 1.5 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-MuseoSlab) !important;
  font-weight: var(--font-weight-medium) !important;
}

a {
  text-decoration: none !important;
}

p {
  margin: 0;
}

.image-box img {
  width: 100%;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.elementor-flip-box__button,
.btn-white > a * {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  font-family: inherit !important;
}

.elementor-flip-box__button,
.btn-white > a {
  font-family: var(--font-MuseoSlab) !important;
  min-height: 40px !important;
  padding: 10px 20px !important;
  width: fit-content !important;
  margin: 0 !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  text-align: center !important;
  cursor: pointer !important;
  place-content: center !important;
  letter-spacing: 1.2px !important;
  border: 1px solid var(--white) !important;
  color: var(--e-global-color-primary) !important;
  background-color: var(--white) !important;
}

.elementor-flip-box__button.elementor-size-sm {
  min-height: 32px !important;
  padding: 6px 18px !important;
  font-size: 14px !important;
}

.elementor-flip-box__button:hover,
.btn-white > a:hover {
  background-color: var(--e-global-color-primary) !important;
  border-color: var(--e-global-color-primary) !important;
  color: var(--white) !important;
}

/* ==========================================================================
   Contact Form
   ========================================================================== */

.contact-form .row {
  --gutter-x: 1rem;
  --gutter-y: 1rem;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--gutter-y));
  margin-right: calc(-0.5 * var(--gutter-x));
  margin-left: calc(-0.5 * var(--gutter-x));
}

.contact-form .row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--gutter-x) * 0.5);
  padding-left: calc(var(--gutter-x) * 0.5);
  margin-top: var(--gutter-y);
}

.contact-form .col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.contact-form .col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.contact-form label {
  margin-bottom: 0.5rem;
  text-transform: capitalize;
  font-size: var(--font-size-lg);
}

.contact-form select,
.contact-form input,
.contact-form textarea {
  padding: 0.625rem 1rem;
  box-shadow: none;
  transition: ease 0.3s all;
  display: block;
  width: 100%;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--white);
  background-clip: padding-box;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
}

.contact-form select::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-primary);
  transition: ease 0.3s all;
  opacity: 0.5;
  text-transform: capitalize;
}

.contact-form select:focus::placeholder,
.contact-form input:focus::placeholder,
.contact-form textarea:focus::placeholder {
  color: var(--orange);
}

.contact-form select:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  box-shadow: none;
  border-color: var(--orange);
}

.contact-form textarea {
  resize: none;
  min-height: 10rem;
}

.contact-form input::-webkit-inner-spin-button {
  display: none;
}

.contact-form input[type="submit"] {
  background: var(--orange);
  color: var(--white);
  font-weight: 500;
  width: auto;
  padding: 0.625rem 2rem;
  border-radius: 0.375rem;
}

.contact-form .required {
  color: var(--danger) !important;
}

.contact-form .wpcf7-spinner {
  display: none !important;
}

.wpcf7-not-valid-tip {
  color: var(--danger) !important;
}

.wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  border-radius: 8px;
  padding: 10px 18px;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output {
  border-color: var(--danger) !important;
  background: var(--danger) !important;
  color: var(--white);
}

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

.gallery-images-wrap .gallery-card {
  overflow: hidden !important;
  position: relative !important;
}

.gallery-images-wrap .gallery-card::after {
  content: "";
  color: var(--white);
  font-size: var(--font-size-4xl);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'><path d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z'/><path d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0'/></svg>") no-repeat center;
  background-size: 32px;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: ease-in 0.3s all;
  opacity: 0;
  visibility: hidden;
}

.gallery-images-wrap .gallery-card:hover::after {
  opacity: 1;
  visibility: visible;
}

.gallery-images-wrap .gallery-card .card-title {
  background: var(--orange);
  padding: 1rem;
  transition: ease-in 0.2s all;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);
  z-index: 1;
  border-radius: 0 0 12px 12px;
}

.gallery-images-wrap .gallery-card:hover .card-title {
  transform: translateY(0);
}

/* ==========================================================================
   Hero Section Slider
   ========================================================================== */

.hero-sec-slider {
  margin: 0 !important;
}

.hero-sec-slider .slide-box {
  min-height: 80vh !important;
  display: grid !important;
  place-content: center !important;
}

.hero-sec-slider .slide-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 4px;
  background-color: var(--orange);
  transition: ease-in 5s;
}

.hero-sec-slider .slide-box.slick-current::after {
  width: 100%;
}

/* Hero Slider Dots */
.hero-sec-slider .slick-dots {
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.hero-sec-slider .slick-dots li {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border-radius: 16px;
}

.hero-sec-slider .slick-dots li button {
  padding: 0;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  opacity: 1;
  background: rgba(255, 255, 255, 0.4);
}

.hero-sec-slider .slick-dots li.slick-active button {
  background: var(--white);
}

.hero-sec-slider .slick-dots li button::before {
  display: none;
}

.hero-sec-slider .slick-dots li.slick-active button::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Hero Slider Arrows */
.hero-sec-slider .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 9;
}

.hero-sec-slider .slick-arrow:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
  box-shadow: var(--shadow-lg);
}

.hero-sec-slider .slick-arrow.slick-prev {
  left: 24px;
}

.hero-sec-slider .slick-arrow.slick-prev::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>") no-repeat center;
  background-size: contain;
}

.hero-sec-slider .slick-arrow.slick-next {
  right: 24px;
}

.hero-sec-slider .slick-arrow.slick-next::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>") no-repeat center;
  background-size: contain;
}

/* ==========================================================================
   Product List Slider
   ========================================================================== */

.product-list-slider .slide-box {
  margin-right: 16px;
}

.product-list-slider .slick-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  bottom: -40px;
}

.product-list-slider .slick-dots li {
  height: 10px;
  width: 10px;
  position: relative;
  overflow: hidden;
  border-radius: 50px;
  margin: 0;
  padding: 0;
  transition: ease-in 0.3s all;
  background-color: var(--border-light);
}

.product-list-slider .slick-dots li.slick-active {
  width: 38px;
  background-color: var(--primary);
}

.product-list-slider .slick-dots li button:hover,
.product-list-slider .slick-dots li button:focus {
  background-color: var(--primary);
}

.product-list-slider .slick-dots li button {
  padding: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}

.product-list-slider .slick-dots li button::before {
  content: none;
}

.pop-details-filter-wrap {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

.pop-details-filter-wrap .table-card,
.pop-details-filter-wrap .selection-card {
    background-color: var(--white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pop-details-filter-wrap .card-title {
    font-size: 38px;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.pop-details-filter-wrap .selection-form {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.pop-details-filter-wrap .form-button,
.pop-details-filter-wrap .form-group {
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1;
    min-width: 200px;
}

.pop-details-filter-wrap .form-button {
    flex: unset;
    flex-shrink: 0;
    min-width: 140px;
}

.pop-details-filter-wrap .form-button label,
.pop-details-filter-wrap .form-group label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.pop-details-filter-wrap .form-button label {
    opacity: 0;
    visibility: hidden;
}

.pop-details-filter-wrap .select-wrapper {
    position: relative;
}

.pop-details-filter-wrap .select-wrapper::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #666;
    pointer-events: none;
}

.pop-details-filter-wrap .form-group select {
    padding: 8px 32px 6px 16px;
    font-size: 14px;
    border: 1px solid var(--border);
    background-color: var(--white);
    cursor: pointer;
    transition: border-color 0.3s;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 36px;
    border-radius: 0.375rem;
    line-height: 1 !important;
}

.pop-details-filter-wrap .form-group select:focus {
    outline: none;
    border-color: var(--orange);
}

.pop-details-filter-wrap .form-group select:focus+.select-wrapper::after {
    border-top-color: var(--orange);
}

.pop-details-filter-wrap .btn-find {
    background: var(--orange);
    color: var(--white);
    font-weight: 500;
    width: auto;
    padding: 4px 16px;
    border-radius: 0.375rem;
    cursor: pointer;
    border: none;
    height: 36px;
    transition: ease 0.3s all;
}

.pop-details-filter-wrap .btn-find:hover {
    background-color: #e89039;
}

.pop-details-filter-wrap .btn-find:active {
    transform: scale(0.98);
}

.pop-details-filter-wrap .responsive-pop-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pop-details-filter-wrap .pop-details-table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    font-size: 10px;
    margin-bottom: 0 !important;
}

.pop-details-filter-wrap .pop-details-table .base-cell {
    padding: 6px;
    text-align: left;
    vertical-align: middle;
    background-color: var(--white);
    font-size: 10px;
}

.pop-details-filter-wrap .pop-details-table .border-full {
    border: 1px solid var(--border);
}

.pop-details-filter-wrap .pop-details-table .border-no-top {
    border: 1px solid var(--border);
    border-top: none;
}

.pop-details-filter-wrap .pop-details-table .border-no-bottom {
    border: 1px solid var(--border);
    border-bottom: none;
}

.pop-details-filter-wrap .pop-details-table .border-top-bottom {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-left: none;
    border-right: none;
}

.pop-details-filter-wrap .pop-details-table .border-no-left {
    border: 1px solid var(--border);
    border-left: none;
}

.pop-details-filter-wrap .pop-details-table .text-bold {
    font-weight: bold;
    background-color: #f4f4f4;
}

.pop-details-filter-wrap .pop-details-table .left-column {
    width: 40%;
    padding: 0;
    vertical-align: top;
}

.pop-details-filter-wrap .pop-details-table .right-column {
    width: 60%;
    padding: 0;
    vertical-align: top;
    background-color: var(--white);
}

.pop-details-filter-wrap .pop-details-table .nested-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
    margin: 0 !important;
}

.pop-details-filter-wrap .pop-details-table .table-img {
    width: 100%;
    height: auto;
    display: block;
}