/*
Theme Name: KTV Creations
Theme URI: http://example.com/ktvcreations
Author: VAOne Agency
Author URI: http://vaoneagency.com
Description: A custom WordPress theme for KTV Creations with Elementor support
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ktvcreations
Tags: responsive, mobile-first, elementor, custom
*/
/* --- ANNOUNCEMENT BAR --- */
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-menu {
  display: flex;
  gap: 2em;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-menu > li > a {
  color: var(--color-header-menu, #fff);
  font-family: var(--font-accent);
  font-size: 1.15rem;
  text-decoration: none;
  padding: 0.5em 0.7em;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}
.main-menu > li > a:hover, .main-menu > li.current-menu-item > a {
  background: var(--color-primary, #ffb300);
  color: #222;
}
.header-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.user-avatar-link {
  display: flex;
  align-items: center;
  color: var(--color-header-menu, #fff);
  text-decoration: none;
}
.user-avatar img,
.user-avatar .dashicons {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: #eee;
  color: #888;
  display: block;
}
@media (max-width: 900px) {
  .header-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 0.7em 1em;
    gap: 0.5em;
  }
  .main-menu {
    gap: 1em;
  }
}
/* --- POLYGON BUTTON SYSTEM --- */
.polygon-btn {
  position: relative;
  display: inline-block;
  padding: 1.1em 2.2em 1.2em 2.2em;
  font-family: var(--font-accent);
  font-size: 1.5rem;
  color: #fff;
  background: linear-gradient(135deg, #ff3c3c 60%, #ffb300 100%);
  border: none;
  cursor: pointer;
  outline: none;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  box-shadow: 0 4px 24px rgba(0,0,0,0.13);
  transition: transform 0.18s cubic-bezier(.4,0,.2,1), box-shadow 0.18s, background 0.18s;
  overflow: hidden;
}
.polygon-btn:hover, .polygon-btn:focus {
  transform: translateY(-4px) scale(1.04) rotate(-1deg);
  box-shadow: 0 8px 32px rgba(255,60,60,0.18);
  background: linear-gradient(135deg, #ffb300 60%, #ff3c3c 100%);
}
.polygon-btn .shine {
  content: '';
  position: absolute;
  top: -60%;
  left: -60%;
  width: 220%;
  height: 220%;
  background: linear-gradient(120deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 2;
}
.polygon-btn:hover .shine, .polygon-btn:focus .shine {
  opacity: 1;
  animation: shine-move 0.7s linear;
}
@keyframes shine-move {
  0% { transform: translateX(-80%) rotate(15deg); opacity: 0.2; }
  60% { opacity: 0.5; }
  100% { transform: translateX(120%) rotate(15deg); opacity: 0; }
}
.polygon-btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.5s linear;
  background: rgba(255,255,255,0.35);
  pointer-events: none;
  z-index: 1;
}
@keyframes ripple {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}
/* --- MODERN ART GALLERY TYPOGRAPHY --- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=DM+Sans:wght@400;500;700&display=swap');
:root {
  --font-main: 'DM Sans', sans-serif;
  --font-accent: 'Cinzel', serif;
}

/* Typography Utility Classes */
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

/* --- HERO SLIDESHOW FULLSCREEN & RESPONSIVE --- */
.hero-slider {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  max-width: 100vw;
  margin: 0;
  overflow: hidden;
  border-radius: 0 0 60px 60px/0 0 30px 30px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  background: #111;
}
.hero-slider .slides {
  display: flex;
  transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
  height: 100vh;
}
.hero-slider .slide {
  min-width: 100vw;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-slider .slide-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 0;
  background: linear-gradient(180deg,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.7) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.2rem 2rem 1.2rem;
}
.hero-slider .slide-overlay h2 {
  font-family: var(--font-heading);
  font-size: 3.2rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 16px #0008;
}
.hero-slider .slide-overlay .slide-content {
  font-size: 1.5rem;
  font-family: var(--font-main);
  margin-bottom: 1.2rem;
  color: #fff;
  text-shadow: 0 1px 8px #0006;
}

/* --- TRIANGLE NAV DOTS --- */
.hero-slider .slider-nav {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  display: flex;
  gap: 1.2rem;
}
.hero-slider .slider-dot {
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 24px solid #fff8;
  background: none;
  border-radius: 0;
  cursor: pointer;
  transition: border-bottom-color 0.3s;
  padding: 0;
}
.hero-slider .slider-dot.active {

/* --- MODERN ARROW NAVIGATION --- */
.hero-slider .slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.2rem;
  height: 3.2rem;
  background: linear-gradient(135deg, #fff 60%, #e0e0e0 100%);
  border: none;
  font-family: 'Bebas Neue', 'Arial Black', sans-serif;
  font-size: 2.2rem;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  box-shadow: 0 2px 16px rgba(0,0,0,0.13);
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, outline 0.2s;
  outline: none;
}
.hero-slider .slider-arrow.left {
  left: 2vw;
  transform: translateY(-50%) scaleX(-1); /* Flip left arrow */
}
.hero-slider .slider-arrow.right {
  right: 2vw;
}
.hero-slider .slider-arrow:hover, .hero-slider .slider-arrow:focus {
  background: linear-gradient(135deg, #222 60%, #444 100%);
  color: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,0.22);
  outline: 2px solid #ff3c3c;
}
.hero-slider .slider-arrow:active {
  background: #ff3c3c;
  color: #fff;
}

@media (max-width: 600px) {
  .hero-slider .slider-arrow {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.3rem;
    left: 1vw;
    right: 1vw;
  }
}

@media (max-width: 900px) {
  .hero-slider, .hero-slider .slide, .hero-slider .slides { min-height: 60vw; height: 60vw; }
  .hero-slider .slide-overlay h2 { font-size: 2rem; }
  .hero-slider .slide-overlay .slide-content { font-size: 1.1rem; }
}
/* --- HERO SLIDESHOW WITH OVERLAY TEXT --- */
.hero-slider {
  position: relative;
  width: 100vw;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
  min-height: 420px;
  background: #111;
  border-radius: 0 0 60px 60px/0 0 30px 30px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.hero-slider .slides {
  display: flex;
  transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
.hero-slider .slide {
  min-width: 100vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-slider .slide-image img {
  width: 100vw;
  height: 60vw;
  object-fit: cover;
  display: block;
  filter: grayscale(10%) contrast(1.1) brightness(0.95);
}
.hero-slider .slide-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 0;
  background: linear-gradient(180deg,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.7) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.2rem 2rem 1.2rem;
}
.hero-slider .slide-overlay h2 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 0.7rem;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 16px #0008;
}
.hero-slider .slide-overlay .slide-content {
  font-size: 1.3rem;
  font-family: var(--font-main);
  margin-bottom: 1.2rem;
  color: #fff;
  text-shadow: 0 1px 8px #0006;
}
.hero-slider .slide-overlay {
  position: absolute;
  top: 247px;
  left: 29px;
  width: 216px;
  height: 110px;
  background: transparent url('img/Black hair is a crown, not a compromise..png') 0% 0% no-repeat padding-box;
  opacity: 1;
}
.hero-slider .slide-overlay h2 {
  color: #FFFFFF;
  font-family: 'Cinzel', serif;
  font-size: 24px;
  line-height: 1.4;
  margin: 0;
}

/* --- POLYGON (TRIANGLE) BUTTONS --- */
.polygon-btn {
  display: inline-block;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  position: relative;
  width: 120px;
  height: 60px;
  margin: 1rem auto;
}
.polygon-btn svg {
  width: 100%;
  height: 100%;
  display: block;
}
.polygon-btn polygon {
  fill: none;
  stroke: var(--color-primary, #ffb300);
  stroke-width: 3;
  transition: stroke 0.2s;
}
.polygon-btn span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-primary, #ffb300);
  pointer-events: none;
  letter-spacing: 0.03em;
}
.polygon-btn:active polygon,
.polygon-btn:focus polygon {
  stroke: #222;
}

/* --- ARTISTIC SHAPES --- */
.shape-blob {
  width: 180px;
  height: 120px;
  background: linear-gradient(135deg, #ffb300 60%, #fff 100%);
  border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  filter: blur(2px) opacity(0.7);
  position: absolute;
  z-index: 0;
  top: -40px;
  left: -60px;
}
.shape-polygon {
  width: 120px;
  height: 120px;
  background: none;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: linear-gradient(120deg, #fff 0%, #ffb300 100%);
  opacity: 0.5;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
}
/* Footer Branding Styles */
.site-footer {
  background: var(--color-header-bg, #000);
  color: var(--color-header-text, #E6EAEF);
  padding: 2rem 0 1rem 0;
  text-align: center;
}
.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.footer-branding {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.footer-logo {
  height: 36px;
  width: auto;
  border-radius: 6px;
  background: #fff;
  padding: 2px 6px;
}
.footer-company-name {
  font-weight: bold;
  font-size: 1.1rem;
}
.footer-text {
  font-size: 0.98rem;
  opacity: 0.8;
  margin-top: 0.5rem;
}
/* Hero Quote Styles */
.hero-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: none;
}
.hero-quote blockquote {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
}
.hero-quote-text {
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.3;
  display: block;
}
.hero-quote-author {
  margin-top: 1rem;
  font-size: 1.1rem;
  opacity: 0.7;
  font-family: var(--font-main);
}
/* Blog Desktop Container for Blog Template */
.blog-desktop-container {
  max-width: 1440px;
  min-height: 600px;
  margin: 0 auto;
  padding: 50px;
  box-sizing: border-box;
}
@media (max-width: 1200px) {
  .blog-desktop-container {
    padding: 24px;
    min-height: 400px;
  }
}
/* Polygon Outline Button for Desktop */
.polygon-btn {
  display: inline-block;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}
.polygon-btn .polygon-shape {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 60px;
  clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
  border: 2px solid var(--color-primary, #ffb300);
  background: transparent;
  color: var(--color-primary, #ffb300);
  font-family: var(--font-heading, 'Montserrat', 'Segoe UI', Arial, sans-serif);
  font-size: 1.3rem;
  font-weight: bold;
  transition: border-color 0.2s, color 0.2s;
}
.polygon-btn:hover .polygon-shape {
  border-color: var(--color-header-bg, #000);
  color: var(--color-header-bg, #000);
}
@media (min-width: 1200px) {
  .polygon-btn .polygon-shape {
    width: 320px;
    height: 80px;
    font-size: 1.7rem;
  }
}
/* Mobile Product Card */
.mobile-product-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: 1.5rem;
  padding: 1rem 1rem 1.2rem 1rem;
}
.mobile-product-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.mobile-product-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #5A0000;
  margin-bottom: 0.3rem;
}
.mobile-product-desc {
  font-size: 1rem;
  color: #444;
  margin-bottom: 0.7rem;
}
.mobile-product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-product-icon {
  font-size: 1.3rem;
  color: #5A0000;
}
.mobile-product-price-btn {
  background: #5A0000;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.5em 1.2em;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
.mobile-product-price-btn:active, .mobile-product-price-btn:focus {
  background: #7a1a1a;
}

/* Mobile Course Card */
.mobile-course-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: 1.5rem;
  padding: 1rem 1rem 1.2rem 1rem;
}
.mobile-course-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #5A0000;
  margin-bottom: 0.3rem;
}
.mobile-course-desc {
  font-size: 1rem;
  color: #444;
  margin-bottom: 0.7rem;
}
.mobile-course-deadline {
  font-size: 0.95rem;
  color: #b00;
  font-weight: 500;
  margin-top: 0.5rem;
}
/* Mobile Home Template Styles */
.mobile-home {
  background: var(--color-bg);
  color: var(--color-text);
}
.hero-section {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
}
.hero-overlay {
  width: 100%;
  padding: 2.5rem 1.2rem 2rem 1.2rem;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-headline {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #fff;
}
.hero-subtitle {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
  color: #fff;
}
.hero-reveal {
  font-size: 1.1rem;
  font-style: italic;
  color: #fff;
}
.hero-btn {
  margin-top: 0.5rem;
  font-weight: bold;
  font-size: 1.1rem;
}
.shop-art-section, .new-releases-section {
  padding: 1.5rem 1rem 1rem 1rem;
}
.shop-art-section h2, .new-releases-section h2 {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
.shop-art-grid, .new-releases-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.shop-art-item, .new-release-item {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
  text-align: center;
  padding: 0.5rem 0.2rem 0.8rem 0.2rem;
}
.shop-art-item img, .new-release-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}
.shop-art-title, .new-release-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  margin-top: 0.2rem;
}
@media (min-width: 600px) {
  .shop-art-grid, .new-releases-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .hero-section {
    min-height: 520px;
  }
}
/*
Theme Name: KTV Creations
Theme URI: http://example.com/ktvcreations
Author: VAOne Agency
Author URI: http://vaoneagency.com
Description: A custom WordPress theme for KTV Creations
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ktvcreations
Tags: responsive, mobile-first
*/

 :root {
  --color-bg: #fff;
  --color-text: #222;
  --color-primary: #ffb300;
  --color-header-bg: #000;
  --color-header-text: #E6EAEF;
  --color-header-menu: #fff;
  --color-header-avatar-bg: #222;
  --color-header-avatar: #E6EAEF;
  --color-mobile-btn-bg: #5A0000;
  --color-mobile-btn-text: #fff;
}

/* Named Colors for Consistency */
:root {
  --color-white-transparent: #FFFFFFFC;
  --color-light-transparent: #91747400;
  --color-border-gray: #A1A1A1;
}

/* Mobile-first base styles */
/* Mobile Header Styles */
.mobile-header {
  background: var(--color-header-bg);
  color: var(--color-header-text);
  border-bottom: 1px solid #222;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.mobile-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}
.menu-toggle {
  background: var(--color-mobile-btn-bg);
  border: none;
  font-size: 2rem;
  color: var(--color-mobile-btn-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 6px;
  padding: 0.25em 0.75em;
  transition: background 0.2s, color 0.2s;
}
.menu-toggle:active, .menu-toggle:focus {
  outline: none;
  background: #7a1a1a;
}
/* Mobile Button Component */
.mobile-btn {
  background: var(--color-mobile-btn-bg);
  color: var(--color-mobile-btn-text);
  border: none;
  border-radius: 6px;
  padding: 0.5em 1.2em;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.mobile-btn:active, .mobile-btn:focus {
  outline: none;
  background: #7a1a1a;
}
.header-center {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-bg);
  color: var(--color-text);
  height: 32px;
  width: auto;
  display: block;
}
.site-title a {
  color: inherit;
  text-decoration: none;
}
.user-avatar-link {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
  color: var(--color-header-menu);
}
.user-avatar img,
.user-avatar .dashicons {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: #eee;
  color: #888;
  display: block;
}
@media (min-width: 600px) {
  .mobile-header-inner {
    max-width: 900px;
    margin: 0 auto;
  }
}
  background: #fff;
  color: #222;
}

@media (min-width: 600px) {
  /* removed duplicate body selector */
}

/* Hero Slider Styles */
.mobile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 600px) {
  .mobile-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.hero-slider {
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}
.hero-slider .slides {
  display: flex;
  transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
.hero-slider .slide {
  min-width: 100vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-slider .slide-image img {
  width: 100vw;
  height: 60vw;
  object-fit: cover;
  display: block;
}
.hero-slider .slide-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 0;
  background: rgba(0,0,0,0.4);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.hero-slider .slider-nav {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}
.hero-slider .slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff8;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}
.hero-slider .slider-dot.active {
  background: #fff;
}

@media (min-width: 900px) {
  .hero-slider .slide-image img {
    height: 400px;
  }
}

/* Adding Cinzel font for headings */
@import url('https://use.typekit.net/ffo3mpp.css');

:root {
    --font-heading: 'Cinzel', sans-serif;
}

/* Applying Cinzel font to headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 400;
}

/* Example for bold headings */
h1.bold, h2.bold, h3.bold, h4.bold, h5.bold, h6.bold {
    font-weight: 700;
}

/* Adding DM Sans font for body text */
@import url('https://use.typekit.net/ffo3mpp.css');

:root {
    --font-body: 'DM Sans', sans-serif;
}

/* Applying DM Sans font to body text */
body {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
}

/* Example for italic body text */
body.italic {
    font-style: italic;
}

/* Example for bold body text */
body.bold {
    font-weight: 700;
}

/* Example for bold italic body text */
body.bold-italic {
    font-weight: 700;
    font-style: italic;
}

/* Additional font sizes for DM Sans */
body.small-text {
    font-family: 'DM Sans-18pt', sans-serif;
}

body.medium-text {
    font-family: 'DM Sans-24pt', sans-serif;
}

body.large-text {
    font-family: 'DM Sans-36pt', sans-serif;
}

/* Mobile Menu Styling */
.ktv-mobile-menu {
    background-color: #000; /* Black background */
    color: #fff; /* White font */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow-y: auto;
    display: none;
}

.ktv-mobile-menu a {
    color: #fff; /* White font for links */
    text-decoration: none;
    display: block;
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ktv-mobile-menu a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Slight hover effect */
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}
.mobile-menu-button {
  position: absolute;
  top: 36px;
  left: 319px;
  width: 30px;
  height: 14px;
  font: normal normal normal 10px/15px Cinzel, serif;
  letter-spacing: 0px;
  color: var(--color-white-transparent);
  text-align: left;
  opacity: 1;
}

.mobile-menu-button-icon {
  position: absolute;
  top: 9px;
  left: 297px;
  width: 60px;
  height: 63px;
  background: transparent url('img/Menu Button.png') 0% 0% no-repeat padding-box;
  opacity: 1;
}

.mobile-menu-button-transform {
  position: absolute;
  top: 9px;
  left: 297px;
  width: 60px;
  height: 63px;
  transform: matrix(-0.52, -0.86, 0.86, -0.52, 0, 0);
  background: var(--color-light-transparent) 0% 0% no-repeat padding-box;
  border: 1px solid var(--color-border-gray);
  opacity: 1;
}

@media (max-width: 768px) {
  .hero-slider {
    top: 0px;
    left: 0px;
    width: 375px;
    height: 557px;
    background: transparent url('img/overlay.png') 0% 0% no-repeat padding-box;
    opacity: 1;
  }
  .hero-slider .slide:nth-child(1) {
    top: 0px;
    left: 0px;
    width: 375px;
    height: 557px;
    background: transparent url('img/Main.png') 0% 0% no-repeat padding-box;
    opacity: 1;
  }
}

/* Mobile Primary Button */
.mobile-primary-button {
  position: absolute;
  top: 397px;
  left: 112px;
  width: 151px;
  height: 40px;
  background: var(--color-button-bg, #5A000000) 0% 0% no-repeat padding-box;
  border: 1px solid var(--color-button-border, #EF0A0A);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mobile-primary-button span {
  font: normal normal normal 14px/25px 'DM Sans', sans-serif;
  letter-spacing: 0px;
  color: var(--color-button-text, #5A000000);
  opacity: 1;
}

/* Large Desktop Home Page */
.large-desktop-homepage {
  position: absolute;
  top: -470px;
  left: 0;
  width: 1920px;
  height: 2880px;
  background: transparent url('img/four-headed.png') 0% 0% no-repeat padding-box;
  opacity: 1;
}

.large-desktop-homepage .slider-overlay {
  position: absolute;
  top: -470px;
  left: 0;
  width: 1920px;
  height: 2880px;
  background: transparent url('img/BG.png') 0% 0% no-repeat padding-box;
  opacity: 1;
}

.large-desktop-homepage .bg-overlay {
  position: absolute;
  top: -15px;
  left: 0;
  width: 1920px;
  height: 1095px;
  background: transparent url('img/BG Overlay.png') 0% 0% no-repeat padding-box;
  opacity: 1;
}

/* Desktop Header */
.desktop-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 202px;
  opacity: 1;
}

.desktop-header .promo-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 47px;
  opacity: 1;
}

.desktop-header .logo {
  position: absolute;
  top: 78px;
  left: 1483px;
  width: 400px;
  height: 124px;
  background: transparent url('img/Initals Logo@0.75x.png') 0% 0% no-repeat padding-box;
  opacity: 1;
}

.desktop-header .menu-icon {
  position: absolute;
  top: 58px;
  left: 28px;
  width: 33px;
  height: 29px;
  background: var(--unnamed-color-fefeff, #FEFEFF) 0% 0% no-repeat padding-box;
  opacity: 1;
}

.promo-header-text {
  font: bold 14pt 'DM Sans', sans-serif;
  text-align: center;
  letter-spacing: 2.37px;
  line-height: 23px;
  opacity: 1;
}

/* Coming Soon Page Specific Styles */
.page-template-coming-soon {
  background: url('assets/images/four-headed.jpg') center center / cover no-repeat fixed;
  min-height: 100vh;
}

.page-template-coming-soon .site-header {
  background: transparent;
}

.page-template-coming-soon .site-logo {
  display: none;
}

.coming-soon-page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.coming-soon-header {
  margin-bottom: 2rem;
}

.coming-soon-logo {
  max-width: 300px;
  height: auto;
}

.coming-soon-content-wrapper {
  width: 100%;
  max-width: 1200px;
  padding: 2rem;
}

/* Header Background Styling */
.site-header {
  background: transparent url('assets/images/header-bg.png') 0% 0% no-repeat padding-box;
  background-size: cover;
}

/* Homepage Intro Fallback */
.homepage-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 2rem;
}

.homepage-intro h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.homepage-intro p {
  font-size: 1.25rem;
  max-width: 600px;
}

/* Services Slider */
:root {
  --services-slider-bg: var(--color-bg, #fff);
  --services-slider-title: var(--color-text, #222);
  --services-slider-badge: var(--color-accent, #ffb400);
  --services-slider-price: var(--color-success, #66DC71);
  --services-slider-sale: var(--color-danger, #e74c3c);
  --services-slider-meta: var(--color-muted, #888);
}
.services-template {
  background: var(--services-slider-bg);
  padding: 3em 0;
}
.services-slider__header h2 {
  color: var(--services-slider-title);
  font-size: 2.2em;
  margin-bottom: 0.2em;
}
.services-slider__header p {
  color: var(--services-slider-meta);
  font-size: 1.1em;
}
.services-slider {
  width: 100%;
  padding-bottom: 2em;
}
.services-slider-item {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  overflow: hidden;
  max-width: 340px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.services-slider-item__img-wrap {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 66%;
  overflow: hidden;
}
.services-slider-item__img-wrap img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: 12px 12px 0 0;
}
.services-slider-item__badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--services-slider-badge);
  color: #fff;
  font-size: 0.9em;
  padding: 0.3em 0.8em;
  border-radius: 8px;
  font-weight: 600;
  z-index: 2;
}
.services-slider-item__content {
  padding: 1.2em 1em 1em 1em;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.services-slider-item__title {
  color: var(--services-slider-title);
  font-size: 1.2em;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 0.3em;
}
.services-slider-item__desc {
  color: var(--services-slider-meta);
  font-size: 1em;
  margin-bottom: 0.7em;
}
.services-slider-item__meta {
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: 1em;
}
.services-slider-item__price {
  color: var(--services-slider-price);
  font-weight: 700;
  font-size: 1.1em;
}
.services-slider-item__price--sale {
  color: var(--services-slider-sale);
  font-weight: 700;
  font-size: 1.1em;
  margin-right: 0.5em;
}
.services-slider-item__price--orig {
  color: var(--services-slider-meta);
  text-decoration: line-through;
  font-size: 1em;
}
.services-slider-item__author {
  color: var(--services-slider-meta);
  font-size: 0.95em;
}
@media (max-width: 900px) {
  .services-slider-item { max-width: 90vw; }
}
@media (max-width: 600px) {
  .services-template { padding: 1.5em 0; }
  .services-slider__header h2 { font-size: 1.4em; }
  .services-slider-item__content { padding: 1em 0.7em 0.7em 0.7em; }
}