* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Arial', system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
}

/* LOADER BASE */
.loader {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #0a0a0a, #000);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  overflow: hidden;

  transition: opacity 0.8s ease, transform 0.8s ease;
}

.loader.hide {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}

/* CORE */
.loader-core {
  position: relative;
  width: 140px;
  height: 140px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* TEXT */
.loader-text {
  position: absolute;
  color: #d1d5db;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.8;
}

/* RINGS */
.ring {
  position: absolute;
  border-radius: 50%;
  inset: 0;
  filter: drop-shadow(0 0 12px rgba(59,130,246,0.4));
}

/* RING 1 */
.ring-1 {
  border: 3px solid transparent;
  border-top: 3px solid #3b82f6;
  border-right: 3px solid #06b6d4;

  animation: spin 1.4s linear infinite;
}

/* RING 2 */
.ring-2 {
  inset: 10px;
  border: 2px solid transparent;
  border-bottom: 2px solid #22d3ee;
  border-left: 2px solid #3b82f6;

  animation: spinReverse 2s linear infinite;
}

/* RING 3 */
.ring-3 {
  inset: 22px;
  border: 2px solid transparent;
  border-top: 2px solid rgba(59,130,246,0.6);

  animation: spin 2.8s linear infinite;
}

/* ANIMATIONS */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes spinReverse {
  to { transform: rotate(-360deg); }
}

/* AMBIENT PARTICLES (premium subtle) */
.ambient {
  position: absolute;
  width: 100%;
  height: 100%;
}

.ambient span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(59,130,246,0.2);
  border-radius: 50%;
  filter: blur(1px);

  animation: floatUp linear infinite;
}

@keyframes floatUp {
  from {
    transform: translateY(100vh);
    opacity: 0;
  }
  50% {
    opacity: 0.4;
  }
  to {
    transform: translateY(-10vh);
    opacity: 0;
  }
}

.feedback-popup{

  position:fixed;

  top:50%;
  left:50%;

  transform:
  translate(-50%, -50%)
  scale(.9);

  width:50%;
  max-width:95%;

  background:#1c1c1c;
  backdrop-filter: blur(2em);

  border:1px solid #2e2e2e;
  border-radius:3px;

  padding:25px;

  z-index:99999;

  opacity:0;
  visibility:hidden;

  transition:.35s ease;

  box-shadow:
  0 25px 50px rgba(0,0,0,.45);

  overflow:hidden;
}

.feedback-popup.active{

  opacity:1;
  visibility:visible;

  transform:
  translate(-50%, -50%)
  scale(1);
}

.feedback-popup-header{

  display:flex;
  justify-content:space-between;
  align-items:center;
}

.feedback-popup-icon{

  width:55px;
  height:55px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:22px;
}

.feedback-popup.success
.feedback-popup-icon{

  background:
  rgba(72,187,120,.15);

  color:#48bb78;
}

.feedback-popup.error
.feedback-popup-icon{

  background:
  rgba(245,101,101,.15);

  color:#f56565;
}

.feedback-popup.warning
.feedback-popup-icon{

  background:
  rgba(237,137,54,.15);

  color:#ed8936;
}

.feedback-popup-title{

  color:#fff;

  margin-top:15px;
  margin-bottom:10px;

  font-size:24px;
}

.feedback-popup-message{

  color:#fff;
  line-height:1.7;
}

.feedback-popup-close{

  width:40px;
  height:40px;

  border:none;

  border-radius:50%;

  background:#111;

  color:#fff;

  cursor:pointer;

  transition:.3s;
}

.feedback-popup-close:hover{

  background:#c6aa92;
  color:#111;
}

.feedback-popup-timer{

  position:absolute;

  bottom:0;
  left:0;

  width:100%;
  height:4px;

  background:#c6aa92;

  transform-origin:left;
}

.feedback-popup.active
.feedback-popup-timer{

  animation:
  popupCountdown
  linear forwards;
}

#feedbackStatus{
    padding:8px 16px;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
}

#feedbackStatus[data-status="Approved"]{
    background:rgba(72,187,120,.15);
    color:#48bb78;
}

#feedbackStatus[data-status="Pending"]{
    background:rgba(246,173,85,.15);
    color:#f6ad55;
}

#feedbackStatus[data-status="Rejected"]{
    background:rgba(245,101,101,.15);
    color:#f56565;
}

#feedbackStatus[data-status="Hidden"]{
    background:rgba(160,174,192,.15);
    color:#a0aec0;
}

@keyframes popupCountdown{

  from{
      width:100%;
  }

  to{
      width:0%;
  }

}

/* ========== NAVBAR ========== */
.navbar {
  position: fixed;
  width: 100%;
  z-index: 20;
  top: 0;
  left: 0;
}

.navbar-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 48px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  color: white;

  /* BASE FALLBACK (works everywhere) */
  background: rgba(0, 0, 0, 0.6);

  /* BORDER for glass feel */
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mobile-nav{
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* APPLY BLUR ONLY IF SUPPORTED */
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  .navbar-inner {
    background: rgba(0, 0, 0, 0.2);

    -webkit-backdrop-filter: blur(5px); /* Safari */
    backdrop-filter: blur(5px);
  }
}

.logo {
  width: 160px;
  height: 100px;
}

.logo img{
  width: 100%;
  height: 100%;
  border-radius: 5px;
  cursor: pointer;
}

#scrollTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;

  width: 50px;
  height: 50px;

  border: 1px solid #fff;
  border-radius: 50%;

  background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
  color: #fff;
  font-size: 18px;

  cursor: pointer;
  z-index: 999;

  opacity: 0;
  transform: translateY(20px);
  transition: 0.3s ease;

  box-shadow: 
    0 5px 15px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

/* SHOW BUTTON */
#scrollTopBtn.show {
  opacity: 1;
  transform: translateY(0);
}

/* HOVER */
#scrollTopBtn:hover {
  transform: translateY(-3px) scale(1.05);
}

.nav-links {
  display: flex;
  gap: 48px;
  list-style: none;
}

/* LINKS */
.nav-links a {
  position: relative;
  text-transform: uppercase;
  font-size: 15px;
  color: white;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 3px;
  opacity: 0.8;

  transition: opacity 0.3s ease;
}

/* UNDERLINE */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;

  width: 100%;
  height: 4px;

  background: linear-gradient(90deg, #ffffff, #d3d3d3); /* premium gradient */

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.35s ease;
}

/* HOVER */
.nav-links a:hover {
  opacity: 1;
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

.nav-btn {
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  padding: 8px 22px;
  margin: 0 3px;
  background: transparent;
  color: white;
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.nav-btn:hover {
  background: white;
  color: black;
}

.slider {
  position: relative;
  height: 100dvh;
  overflow: hidden;
}

.bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.05);
  will-change: transform, opacity;
  transition: opacity 1.2s cubic-bezier(0.2, 0.9, 0.4, 1.1),
              transform 1.8s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.bg-slide.active {
  opacity: 1;
  transform: scale(1);
}

.bg-slide.exit {
  opacity: 0;
  transform: scale(1.08);
}

/* ========== TEXT CONTENT – FASTER PARALLEL ANIMATIONS ========== */
.content{
  position:absolute;
  left:8%;
  top:38%;
  max-width:50%;
  padding:10px;
  color: #fff;
  border-radius:3px;
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(10rem);
  -webkit-backdrop-filter:blur(10rem);
  border:1px solid rgba(255,255,255,.08);
  z-index: 1;
}

.content h1,
.content p {
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.4s ease;
  text-shadow:
0 3px 6px rgba(0,0,0,.7),
0 10px 30px rgba(0,0,0,.55);
}

/* Exit animations (old text) */
.content.hide h1 {
  animation: outUpFast 0.3s forwards;
}
.content.hide p {
  animation: outDownFast 0.3s forwards;
}

/* Entry animations (new text) */
.content.show h1 {
  animation: slideLeftFast 0.4s forwards;
}
.content.show p {
  animation: slideRightFast 0.45s forwards;
  animation-delay: 0.05s;
}

@keyframes slideLeftFast {
  0% { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes slideRightFast {
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes outUpFast {
  100% { opacity: 0; transform: translateY(-25px); }
}
@keyframes outDownFast {
  100% { opacity: 0; transform: translateY(25px); }
}

.content h1 {
  font-size: 4.2rem;
  margin-bottom: 1.2rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.content p {
  font-size: 1.4rem;
  opacity: 0.9;
  line-height: 1.4;
}

/* ========== VERTICAL TIMELINE ========== */
.timeline {
  position: absolute;
  left: 36px;
  top: 50%;
  transform: translateY(-50%);
  height: 320px;
  width: 40px;
  z-index: 18;
}

.line {
  position: absolute;
  left: 50%;
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  transform: translateX(-50%);
  border-radius: 2px;
}

.dots-wrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.4, 1.2);
}

.dot {
  width: 10px;
  height: 10px;
  margin: 28px auto;
  border-radius: 50%;
  background: white;
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.25s;
}

.dot:hover {
  opacity: 1;
  transform: scale(1.3);
}

.indicator {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background: white;
  color: #111;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
  z-index: 2;
}

/* ========== THUMBNAILS ========== */
.thumbs {
  position: absolute;
  right: 3%;
  bottom: 10%;
  display: flex;
  gap: 14px;
  z-index: 18;
}

.thumb {
  width: 85px;
  height: 120px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.25s;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  border: none;
}

.thumb:hover {
  transform: scale(1.05);
  border-color: white;
}

/* ========== CONTROL BUTTONS ========== */
.controls {
  position: absolute;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
  z-index: 18;
}

.controls button {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: white;
  font-size: 1.8rem;
  width: 56px;
  height: 56px;
  border-radius: 60px;
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
}

.controls button:hover {
  background: white;
  color: black;
  border-color: white;
}

/* ========== PROGRESS BAR ========== */
.progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 20;
}

.progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: white;
  transition: width 6s linear;
}

/* PREMIUM CHARCOAL SECTION */
.testimonial-section {
  width: 100%;
  height: auto;
  background: #1c1c1c;
  padding: 3.5rem 3rem;
  box-shadow: 0 30px 45px -15px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.04);
  border: 1px solid #2e2e2e;
  transition: all 0.2s;
}

.section-grid {
  display: flex;
  gap: 2.5rem;
  align-items: stretch;
}

/* LEFT CONTENT — with initial hidden state for animation */
.left-content {
  flex: 1 1 38%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.testimonial-section.in-view .left-content {
  opacity: 1;
  transform: translateX(0);
}

.left-content h2 {
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 1.8rem;
  text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.left-content .highlight-text {
  font-size: 1.15rem;
  line-height: 1.6;
  color: #c6c1ba;
  margin-bottom: 1.2rem;
  font-weight: 350;
}

.left-content .helper-text {
  color: #a6a09a;
  margin-bottom: 2.5rem;
  font-size: 1rem;
  font-weight: 350;
  border-left: 3px solid #4a3f36;
  padding-left: 1.3rem;
}

.rate_service {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1.5px solid #4f4942;
  color: #e8e2da;
  padding: 0.9rem 2.2rem;
  border-radius: 3px;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.3px;
  text-decoration: none;
  width: fit-content;
  transition: all 0.25s;
  backdrop-filter: blur(4px);
  background: rgba(28, 28, 28, 0.5);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  cursor: pointer;
}

.rate_service:hover {
  background: #3a3530;
  border-color: #7a7168;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}

.rate_service-arrow {
  font-size: 1.3rem;
  line-height: 0;
  margin-left: 4px;
}

/* RIGHT AREA — carousel + vertical indicator */
.right-carousel-area {
  flex: 1 1 58%;
  display: flex;
  gap: 0.8rem;
  min-width: 0;
}

/* Carousel wrapper */
.carousel-wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.slides-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
  cursor: grab;
}

.slide {
  flex: 0 0 100%;
  display: flex;
  gap: 1.5rem;
  padding: 0.2rem 0.1rem;
}

  /* MAIN SLIDER */
.news-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #1c1c1c;
  padding: 5% 0;
}

/* TRACK */
.news-track {
  display: flex;
  transition: transform 0.6s ease;
}

/* SLIDE */
.news-slide {
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

.news-label{
  width: 100%;
  color: #fff;
  margin-bottom: 3%;
  margin-left: 6%;
  font-size: 3em;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 600;
}

.news-headline{
    color: #fff;

    margin-left: 6%;
    margin-bottom: 18px;

    font-size: 1.5em;

    font-weight: 600;

    line-height: 1.1;

    letter-spacing: -1px;

    max-width: 900px;

    text-shadow:
        0 2px 8px rgba(0,0,0,.35),
        0 10px 30px rgba(0,0,0,.25);

    position: relative;

    z-index: 2;
}

.latest-news{
  padding: 5%;
}

.news-meta{
  margin-left: 6%;
  color: #fff;
}

/* IMAGE */
.news-image img {
  width: 600px;
  border-radius: 5px;
}

/* ARROWS */
.news-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 1px solid #444;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.6rem 1rem;
  z-index: 10;
}

.news-prev { left: 20px; }
.news-next { right: 20px; }

.news-nav:hover {
  border-color: #fff;
  color: #fff;
}

/* MARKERS (dots alternative naming) */
.news-markers {
  display: flex;
  gap: 10px;
  margin-top: 2rem;
  justify-content: center;
}

.news-marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #141414;
  cursor: pointer;
}

.news-marker.active {
  background: #1c1c1c;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .news-slide {
    flex-direction: column;
    text-align: center;
  }

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

/* SECTION */
.about{
  width: 100%;
  height: 80dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* LEFT SIDE */
.about .items:nth-child(1){
  width: 20%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* LINE (TOP → DOWN) */
.about .items:nth-child(1) span{
  width: 3px;
  height: 150px;
  background: #141414;
  margin: 20% 0;

  opacity: 0;
  transform: translateY(-60px) scaleY(0.6);
  transform-origin: top;
  transition: all 0.7s ease;
}

/* TEXT (BOTTOM → UP) */
.about .items:nth-child(1) h5{
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 3px;

  opacity: 0;
  transform: translateY(60px) rotate(90deg);
  transition: all 0.7s ease;
  transition-delay: 0.2s;
}

/* RIGHT SIDE */
.about .items:nth-child(2){
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* HEADING */
.about .items:nth-child(2) h1{
  width: 70%;
  font-size: 3em;
  text-transform: uppercase;
  letter-spacing: 5px;

  opacity: 0;
  transform: translateY(60px);
  transition: all 0.8s ease;
}

/* PARAGRAPH */
.about .items:nth-child(2) p{
  font-size: 18px;
  width: 70%;
  margin: 2% 0;

  opacity: 0;
  transform: translateY(60px);
  transition: all 0.8s ease;
  transition-delay: 0.2s;
}

/* BUTTON WRAPPER */
.about .btns{
  display: flex;
}

/* BUTTONS */
.about .btns button{
  min-width: 200px;
  border: 2px solid #141414;
  color: #141414;
  font-size: 18px;
  margin-right: 10px;
  padding: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: #fff;
  cursor: pointer;
  transition: .3s ease-in-out;

  opacity: 0;
  transform: translateX(60px);
}

/* BUTTON DELAYS */
.about .btns button:nth-child(1){
  transition-delay: 0.4s;
}

.about .btns button:nth-child(2){
  transition-delay: 0.6s;
  background: #141414;
  color: #fff;
}

/* HOVER */
.about .btns button:hover{
  background: #141414;
  color: #fff;
  box-shadow: 0 20px 30px -12px rgba(0,0,0,0.5);
}

/* ACTIVE STATE */
.about.in-view .items:nth-child(1) span{
  opacity: 1;
  transform: translateY(0) scaleY(1);
}

.about.in-view .items:nth-child(1) h5{
  opacity: 1;
  transform: translateY(0) rotate(90deg);
}

.about.in-view .items:nth-child(2) h1{
  opacity: 1;
  transform: translateY(0);
}

.about.in-view .items:nth-child(2) p{
  opacity: 1;
  transform: translateY(0);
}

.about.in-view .btns button{
  opacity: 1;
  transform: translateX(0);
}

/* RESPONSIVE */
@media (max-width: 768px){
  .about{
    flex-direction: column;
    height: auto;
    padding: 2rem 1rem;
  }

  .about .items:nth-child(1){
    width: 100%;
    flex-direction: row;
  }

  .about .items:nth-child(1) h5{
    transform: rotate(0);
  }

  .about .items:nth-child(2) h1,
  .about .items:nth-child(2) p{
    width: 100%;
  }
}

/* testimonial card — with staggered fade+slide animation */
.testimonial-card {
  background: #262524;
  border-radius: 3px;
  padding: 1.8rem 1.6rem;
  flex: 1;
  box-shadow: 0 20px 30px -12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  border-bottom: 2px solid #3f3a35;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s, opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1), transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
  transform: translateY(30px);
}

/* when section is in view, animate cards with staggered delays */
.testimonial-section.in-view .testimonial-card {
  opacity: 1;
  transform: translateY(0);
}

/* stagger delays for cards */
.testimonial-section.in-view .slide .testimonial-card:nth-child(1) {
  transition-delay: 0.1s;
}
.testimonial-section.in-view .slide .testimonial-card:nth-child(2) {
  transition-delay: 0.25s;
}
.testimonial-section.in-view .slide .testimonial-card:nth-child(3) {
  transition-delay: 0.4s;
}

/* for slides beyond the first (when sliding) we want them to already be visible if in-view,
    but since they are created dynamically, we need to apply classes after creation */
.testimonial-card:hover {
  border-bottom-color: #b9a898;
  background: #2b2a28;
  transform: translateY(-3px);
}

.quote-icon {
  color: #8f847a;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 0.8rem;
  opacity: 0.7;
}

.testimonial-text {
  color: #e0d9d1;
  font-size: 1.05rem;
  line-height: 1.5;
  font-weight: 380;
  margin-bottom: 1.8rem;
  flex: 1;
}

.testimonial-author {
  color: #f0e9e0;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.testimonial-author::before {
  content: "—";
  color: #a99e94;
  font-weight: 300;
  margin-right: 0.3rem;
}

/* VERTICAL INDICATOR — fade in from right */
.vertical-indicator {
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.3s, transform 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.3s;
}

.testimonial-section.in-view .vertical-indicator {
  opacity: 1;
  transform: translateX(0);
}

.indicator-line-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-height: 240px;
  justify-content: center;
}

.line {
  position: absolute;
  width: 2px;
  height: 70%;
  background: linear-gradient(to bottom, #3f3a35, #5f554b, #3f3a35);
  border-radius: 2px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.7;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

.dots-container {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  z-index: 3;
  position: relative;
  padding: 0.8rem 0;
}

.indicator-dot {
  width: 10px;
  height: 10px;
  background: #4d4540;
  border-radius: 30px;
  border: 1.5px solid #70675f;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
  position: relative;
}

.indicator-dot:hover {
  background: #9b9086;
  border-color: #c6bcb2;
  transform: scale(1.4);
}

.indicator-dot.active {
  background: #e5d9cf;
  border-color: #f0e7de;
  width: 12px;
  height: 12px;
  box-shadow: 0 0 14px #b9aa9d88, 0 0 0 2px rgba(220, 200, 180, 0.2);
  transform: scale(1.2);
}

/* SECTION */
.team{
  width: 100%;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3rem;
  background: #fff;
  overflow: hidden;
}

/* ORBIT CONTAINER */
.team-orbit{
  position: relative;
  width: 400px;
  height: 400px;
}

/* CENTER PLANET */
.orbit-center{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  border: none;
  z-index: 2;
}

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

/* ORBIT RING */
.orbit-ring{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: orbitRotate 80s linear infinite;
}

/* EACH ORBIT ITEM */
.orbit-item{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  transform-origin: -100px center; /* distance from center */
}

/* IMAGE STYLE */
.orbit-item img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* DISTRIBUTE ITEMS AROUND */
.orbit-item:nth-child(1){ transform: rotate(0deg) translateX(160px); }
.orbit-item:nth-child(2){ transform: rotate(90deg) translateX(160px); }
.orbit-item:nth-child(3){ transform: rotate(180deg) translateX(160px); }
.orbit-item:nth-child(4){ transform: rotate(270deg) translateX(160px); }

/* ORBIT ANIMATION */
@keyframes orbitRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* RIGHT SIDE */
.team-content{
  width: 45%;
}

.team-content h2{
  text-transform: uppercase;
  font-size: 3rem;
  color: #1c1c1c;
}

.team-content span{
  display: flex;
  width: 40%;
  background: #141414;
  height: 3px;
  margin-bottom: 2rem;
}

.team-member{
  margin-bottom: 2rem;
}

.team-member h3{
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: #141414;
}

.team-member p{
  color: #aaa;
  line-height: 1.6;
}

/* PANELS CONTAINER */
.team-panels{
  position: relative;
  height: 140px;
  overflow: hidden;
}

/* EACH PANEL */
.team-panel{
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease;
}

/* ACTIVE PANEL */
.team-panel.is-active{
  opacity: 1;
  transform: translateY(0);
  position: relative;
}

/* SWITCHES (indicators) */
.team-switches{
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

/* EACH SWITCH */
.team-switch{
  width: 35px;
  height: 6px;
  background: #535252;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* ACTIVE SWITCH */
.team-switch.is-active{
  background: #000;
  width: 55px;
}

/* SECTION BACKGROUND */
.newsletter{
  width: 100%;
  padding: 6rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f9f9f9;
}

/* CARD */
.newsletter-card{
  position: relative;
  width: 900px;
  max-width: 100%;
  padding: 4rem 3rem;
  border-radius: 5px;
  background: #1c1c1c;
  text-align: center;
  overflow: hidden;

  border: 1px solid #2e2e2e;
  box-shadow:
    0 30px 50px -20px rgba(0,0,0,0.8),
    inset 0 1px 1px rgba(255,255,255,0.03);
}

/* ACCENT SHAPE (premium instead of bright green) */
.newsletter-accent{
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  border-radius: 50%;

  background: radial-gradient(
    circle,#141414,
    transparent 70%
  );
}

/* TITLE */
.newsletter-card h2{
  font-size: 2.2rem;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

/* TEXT */
.newsletter-card p{
  color: #a8a29e;
  max-width: 600px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

/* FORM */
.newsletter-form{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  max-width: 500px;
  margin: auto;
  border-radius: 2px;
  overflow: hidden;
  background: #111;
  border: 1px solid #2a2a2a;
}

/* INPUT */
.newsletter-form input{
  flex: 1;
  padding: 1rem 1.2rem;
  border: none;
  outline: none;
  background: transparent;
  color: #e8e2da;
  font-size: 0.95rem;
}

/* BUTTON */
.newsletter-form button{
  padding: 1rem 1.8rem;
  border: none;
  background: #fff;
  color: #111;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

/* HOVER */
.newsletter-form button:hover{
  background: #eaeaea;
}

/* FOCUS EFFECT */
.newsletter-form input:focus{
  background: rgba(255,255,255,0.02);
}
/* MODAL BACKDROP */
.rate-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;

  transition: 0.4s ease;
  z-index: 9999;
}

/* SHOW */
.rate-modal.show {
  opacity: 1;
  visibility: visible;
}

/* BOX */
.rate-box {
  width: 90%;
  max-width: 600px;

  background: linear-gradient(145deg, #111, #1a1a1a);
  padding: 40px;
  border-radius: 3px;

  color: #fff;
  position: relative;

  transform: translateY(30px) scale(0.95);
  transition: 0.4s ease;

  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}

/* ANIMATION */
.rate-modal.show .rate-box {
  transform: translateY(0) scale(1);
}

/* CLOSE BUTTON */
.close-rate {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 22px;
  cursor: pointer;
  opacity: 0.6;
}

.close-rate:hover {
  opacity: 1;
}

/* INPUTS */
.input-group {
  margin-bottom: 20px;
}

.input-group label {
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
  color: #aaa;
}

.input-group input,
.input-group textarea {
  width: 100%;
  padding: 12px;
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  color: #fff;
  border-radius: 3px;
  outline: none;
}

.input-group textarea {
  min-height: 100px;
}

.stars {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  font-size: 5em;
  cursor: pointer;
}

.stars span {
  color: #444;
  transition: 0.2s;
}

/* Active stars */
.stars span.active {
  color: gold;
}

/* Hover effect */
.stars span.hover {
  color: gold;
}

/* BUTTON */
.submit-btn {
  width: 100%;
  padding: 15px;
  background: #fff;
  color: #111;
  border: none;
  border-radius: 3px;
  cursor: pointer;

  transition: 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
}

.footer{
  width: 100%;
  overflow: hidden !important;
  z-index: 1 !important;
}

.footer-section {
  position: relative;
  background: var(--footer-color);
  min-height: 200px; 
  margin-top: 15rem; 
  width: 100%;
  background: #2B2B2B;
}

.gooey-animations {
  position: absolute;
  bottom: 97%;
  width: 200%;
  left: -100%;
  
  background: var(--footer-color);
  transform: translateY(-100%); 
  z-index: 0;
  filter: url('#liquid-effect');

  overflow: visible; 
  pointer-events: none;
}

.contact-popup{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  transition:.35s ease;
  z-index:9999;
}

.contact-popup.active{
  opacity:1;
  visibility:visible;
}

.contact-popup-card{
  width:100%;
  max-width:60%;
  max-height:90vh;
  overflow-y:auto;
  background:
  linear-gradient(
      145deg,
      rgba(28,28,28,.98),
      rgba(15,15,15,.98)
  );
  border:1px solid rgba(198,170,146,.2);
  border-radius:3px;
  padding:35px;
  position:relative;
  box-shadow:
      0 15px 40px rgba(0,0,0,.5),
      0 0 0 1px rgba(198,170,146,.08);
  transform:translateY(30px) scale(.95);
  transition:.35s ease;
}

.contact-popup.active
.contact-popup-card{
    transform:translateY(0) scale(1);
}

.contact-popup-card h2{
  color:#f7f2eb;

  font-size:2rem;

  margin:0 0 25px;

  font-weight:700;

  letter-spacing:.5px;

  position:relative;
}

.contact-popup-card h2::after{
  content:'';
  display:block;
  width:80px;
  height:3px;
  margin-top:12px;
  border-radius:999px;
  background:#c6aa92;
}

.contact-popup-close{
  position:absolute;
  top:18px;
  right:18px;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  color:#fff;
  background:rgba(255,255,255,.06);
  transition:.25s;
}

.contact-popup-close:hover{
  background:#c6aa92;
  color:#111;
}

.contact-item{
  padding:18px 0;
   border-bottom:1px solid rgba(255,255,255,.08);
}

.contact-item:last-child{
  border-bottom:none;
}

.contact-item h4{
  margin:0 0 8px;

  color:#fff;

  font-size:1rem;

  font-weight:600;
}

.contact-item p{
  margin:0 0 15px;

  color:#b8b8b8;

  line-height:1.6;

  font-size:.95rem;
}

.contact-item a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:12px 22px;

  text-decoration:none;

  border-radius:3px;

  background:#c6aa92;

  color:#111;

  font-weight:600;

  transition:.25s;
}

.contact-item a:hover{
    transform:translateY(-2px);

    box-shadow:
        0 10px 20px rgba(198,170,146,.25);
}

.contact-popup-card::-webkit-scrollbar{
    width:8px;
}

.contact-popup-card::-webkit-scrollbar-track{
    background:transparent;
}

.contact-popup-card::-webkit-scrollbar-thumb{
    background:#c6aa92;
    border-radius:999px;
}

/* SECTION */
.services{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ALTERNATING */
.services:nth-child(even){
  flex-direction: row-reverse;
  background: #e4e4e4;
}

/* ITEMS */
.services .items{
  display: flex;
  align-items: center;
  height: 100%;
}

/* LEFT SIDE */
.services .items:nth-child(1){
  width: 80px;
  flex-direction: column;
  justify-content: space-evenly;
}

/* PROGRESS LINE */
.services .items:nth-child(1) span{
  width: 3px;
  height: 0%;
  background: #141414;
  transition: height 0.4s ease;
}

.services .items:nth-child(1) p{
  transform: rotate(-90deg); /* more natural reading direction */
  transform-origin: center;
  text-transform: uppercase;
  color: #1c1c1c;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 4px;
  white-space: nowrap;
}

/* ACTIVE LINE */
.services.active .items:nth-child(1) span{
  height: 60%;
}

.services .items:nth-child(2) h1{
  font-size: 2em;
  color: #141414;
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* ROTATED LABEL */
.services .items:nth-child(1) p{
  transform: rotate(-90deg);
  letter-spacing: 4px;
  font-size: 1rem;
  white-space: nowrap;
}

/* TEXT */
.services .items:nth-child(2){
  width: 40%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  margin: 0 1%;
}

.services:nth-child(even) .items:nth-child(2){
  align-items: flex-end;
  text-align: right;
}

/* IMAGE */
.services .items:nth-child(3){
  width: 40%;
}

.services .items:nth-child(3) img{
  width: 100%;
  height: 70%;
  object-fit: cover;
  border-radius: 5px;
}

/* ================= */
/* ANIMATIONS */
/* ================= */
/* BASE */
.services .items:nth-child(2),
.services .items:nth-child(3){
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ADD DELAYS */
.services .items:nth-child(2){
  transform: translateX(-80px);
  transition-delay: 0.15s; /* text comes first */
}

.services .items:nth-child(3){
  transform: translateX(80px);
  transition-delay: 0.35s; /* image follows */
}

/* EVEN FLIP */
.services:nth-child(even) .items:nth-child(2){
  transform: translateX(80px);
}

.services:nth-child(even) .items:nth-child(3){
  transform: translateX(-80px);
}

/* ACTIVE */
.services.active .items:nth-child(2),
.services.active .items:nth-child(3){
  opacity: 1;
  transform: translateX(0);
}
/* PARENT */
.hero {
  display: flex;
  height: 90dvh;
  width: 100%;
  overflow: hidden;
}

/* LEFT SIDE */
.hero-left {
  flex: 1.5;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* EDGE FADE OVERLAY */
.hero-left::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;

  background: 
    linear-gradient(to bottom, rgba(255,255,255,0.9), transparent 10%),
    linear-gradient(to left, rgba(255,255,255,0.9), transparent 10%);
}

.hero-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end; 
  justify-content: center;
  text-align: right;
  padding: 10px 20px !important;
  overflow: hidden;
}

.hero-right h1{
  font-size: 2em;
  color: #141414;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  border-right: 2px solid #1e1e1e;
  padding-right: 5px;
}

/* INITIAL STATE */
.hero-right .items {
  width: 100%;
  display: flex;
  margin: 5px 0;
  padding-right: 5px;
  align-self: center;
  justify-content: space-between;
  opacity: 0;
  transform: translateX(40px);
  transition: 
    opacity 0.6s ease,
    transform 0.6s ease;
  box-shadow: 
  0 2px 6px rgba(0,0,0,0.04),
  0 6px 14px rgba(0,0,0,0.06),
  0 12px 24px rgba(0,0,0,0.05);
}

/* ACTIVE STATE */
.hero-right .items.show {
  opacity: 1;
  transform: translateX(0);
}

.hero-right .items p{
  font-size: 14px;
}

.hero-right .items img{
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  height: 120px;
  object-fit: cover;
  margin-right: 10px;
  flex-shrink: 0;
  border: 1px solid #141414;
}

.hero-right .items .description{
  display: flex;
  flex-direction: column;
  height: 120px; /* same height as image */
  justify-content: space-between;
}

.hero-right .items .description h3{
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #1a1a1a;
}

/* BUTTON BASE */
.hero-right .items button {
  width: 100%;
  padding: 14px 20px;

  background: #ffffff;
  color: #111;
  border: none;
  border-radius: 3px;

  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;

  cursor: pointer;
  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  transition: 
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
  
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.04);
}

.part-whatsapp-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  width: 100%;
  padding: 5px;
  margin: 3px;
  background:#25D366;
  color:#fff;
  text-decoration:none;
  border-radius:3px;
  font-weight:600;
  transition:.25s;
}

.part-whatsapp-btn:hover{
  background:#1ebc57;
}

.find-more-parts-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  width:100%;

  padding:15px 20px;

  border:none;
  border-radius:4px;

  background:#25D366;
  color:#fff;

  text-decoration:none;

  font-weight:600;
  font-size:16px;

  cursor:pointer;

  transition:.25s;
}

.find-more-parts-btn:hover{
  background:#1EBE5A;
  transform:translateY(-2px);
}

.find-more-parts-btn:disabled{
  background:#888;
  cursor:not-allowed;
}

/* ARROW */
.hero-right .items button span {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* HOVER EFFECT */
.hero-right .items button:hover {
  box-shadow: 
    0 8px 20px rgba(0,0,0,0.10),
    0 20px 40px rgba(0,0,0,0.08);
  color: #fff;

  background: #141414;
}

/* ARROW SLIDE */
.hero-right .items button:hover span {
  transform: translateX(6px);
}

/* CLICK (PRESS FEEDBACK) */
.hero-right .items button:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

/* SCENE (for perspective) */
.iso-scene {
  perspective: 1200px;
  width: 140%;
  height: 140%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* WRAPPER (UPDATED) */
.iso-wrapper {
  display: grid;
  grid-template-columns: repeat(6, 180px);
  grid-auto-rows: 120px; /* base height */
  gap: 25px;

  transform: rotate(-25deg) rotateX(20deg);
  transform-style: preserve-3d;

  transition: transform 0.2s ease-out;
}

/* CARD */
.card {
  border-radius: 10px;
  overflow: hidden;

  transform-style: preserve-3d;
  opacity: 0;
  transform: translateY(80px) scale(0.9);

  transition: 
    transform 0.8s cubic-bezier(.2,.8,.2,1),
    opacity 0.8s ease;
}

/* IMAGE */
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ACTIVE (scroll reveal) */
.card.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* SECTION */
.faq-section {
  background: linear-gradient(180deg, #111111, #1a1a1a);
  padding: 100px 5%;
  color: #e5e5e5;
}

/* CONTAINER */
.faq-container {
  max-width: 100%;
  margin: auto;
}

/* HEADER */
.faq-header {
  text-align: center;
  margin-bottom: 60px;
}

.faq-header h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: #ffffff;
  text-transform: uppercase;
}

.faq-header span{
  width: 200px;
  height: 3px;
  background: #fff;
}

.faq-header p {
  color: #9ca3af;
}

/* GRID */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

/* CARD */
.faq-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  padding: 25px;

  backdrop-filter: blur(10px);

  opacity: 0;
  transform: translateY(40px);

  transition: 
    transform 0.6s ease,
    opacity 0.6s ease,
    box-shadow 0.3s ease,
    border 0.3s ease;
}

/* SHOW ANIMATION */
.faq-card.show {
  opacity: 1;
  transform: translateY(0);
}

/* HOVER */
.faq-card:hover {
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 
    0 10px 30px rgba(0,0,0,0.6),
    0 0 20px rgba(255,255,255,0.05);
}

/* TEXT */
.faq-card h3 {
  margin-bottom: 10px;
  color: #ffffff;
}

.faq-card p {
  color: #9ca3af;
  font-size: 0.95rem;
  line-height: 1.5;
}

.dashboard_nav{
  width: 100%;
  padding: 5px 10px;
}

.dashboard_nav .items{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-radius: 3px;
  margin-top: 1.5%;
  box-shadow:
  0 4px 10px rgba(0, 0, 0, 0.15),
  0 0 20px rgba(0, 0, 0, 0.1);
}

.dashboard_nav .items h2{
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #d47513;
  text-transform: uppercase;
}

.dashboard_nav .items h1{
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 600;
  color: #0d0d0d;
  text-transform: uppercase;
}

.dashboard_nav .items button{
  font-size: 18px;
  border: 2px solid #0d0d0d;
  outline: none;
  background: #fff;
  text-transform: uppercase;
  padding: 5px 10px;
  margin-top: 5px;
  border-radius: 3px;
  cursor: pointer;
}

.dashboard_nav .items button:hover{
  background: #141414;
  color: #fff;
}

.dashboard_boxes{
  width: 100%;
}

.customizables{
  width: 100%;
  padding: 5px 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 10px;
}

.customizables_txt{
  font-size: 2em;
  text-transform: uppercase;
  color: #d47513;
  letter-spacing: 3px;
  margin: 50px 10px 10px 10px;
  border-left: 3px solid #d47513;
  padding-left: 5px;
}

.customizables a{
  text-decoration: none;
}

.customizables .boxes{
  padding: 20px;
  border-radius: 3px;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.15),
    0 0 20px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: .1s ease;
  border-bottom: 4px solid #fff;
}

.customizables .boxes:hover{
  border-bottom: 4px solid #0d0d0d;
}

.customizables .boxes i{
  font-size: 2em;
  color: #d47513;
}

.customizables .boxes h3{
  font-size: 15px;
  color: #161616 !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 15px 0;
  font-weight: 400;
}

.customizables .boxes:hover + .customizables .boxes h3{
  color: #0d0d0d;
}

.customizables .boxes span i{
  font-size: 20px;
}

.overview{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.overview .header{
  width: 100%;
  padding: 10px 0;
}

.overview .header h1{
  font-size: 18px;
  color: #d47513;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-left: 3px solid #d47513;
  padding-left: 5px;
}

.overview .overview_items{
  width: 99%;
  display: flex;
  align-items: center;
  padding: 20px 0;
  justify-content: space-between;
}

.overview .overview_items .items{
  width: 70%;
  padding: 10px;
  margin: 5px 10px 5px 0;
  box-shadow:
  0 4px 10px rgba(0, 0, 0, 0.15),
  0 0 20px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.overview .overview_items .items:nth-child(2){
  width: 30%;
}

.overview .overview_items .items .logs_items{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 5px;
  border-top: 1px solid #111111;
}

.overview .overview_items .items .logs_items p{
  font-size: 14px;
  color: #0d0d0d;
  font-style: italic
}

.dashboard-quick-actions{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:25px;
}

.dashboard-quick-actions button{
    border:none;
    padding:14px 22px;
    border-radius:4px;
    cursor:pointer;
    background:#111;
    color:#fff;
    font-weight:600;
    transition:.25s;
}

.dashboard-quick-actions button:hover{
    transform:translateY(-2px);
}

.quick-link-btn{
    border:none;
    background:#d4af37;
    color:#111;
    padding:8px 16px;
    border-radius:3px;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
}

.admin-slideshow{
  width: 100%;
  background: #fff;
  padding: 30px;
  box-shadow:
  0 30px 50px -20px rgba(0,0,0,.1);
}

.admin-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.admin-header h2{
  color: #111010;
  font-size: 28px;
  font-weight: 600;
  text-transform: uppercase;
}

.admin-header p{
  color: #000;
  margin-top: 5px;
}

.add-slide-btn{
  background: #c6aa92;
  color: #111;
  border: none;
  padding: 14px 22px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
  transition: .3s ease;
}

.add-slide-btn:hover{
  transform: translateY(-3px);
  background: #e1c7af;
}

.slide-table-wrap{
  overflow-x: auto;
}

.slide-table{
  width: 100%;
  border-collapse: collapse;
}

.slide-table thead{
  background: #161616;
}

.slide-table th{
  color: #fff;
  text-align: left;
  padding: 18px;
  border-bottom: 1px solid #2e2e2e;
}

.slide-table td{
  padding: 18px 5px;
  border-bottom: 1px solid #2e2e2e;
  color: #000;
}

.slide-table img{
  width: 120px;
  height: 70px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid #2e2e2e;
}

.slide-status{
  padding: 8px 14px;
  border-radius: 50px;
  font-size: 13px;
}

.slide-status.active{
  background: #2cef32;
  color: #fff;
}

.action-btn{
  width: 42px;
  height: 42px;
  border-radius: 3px;
  cursor: pointer;
  margin: 8px;
  transition: .3s ease;
  border: 1px solid #2e2e2e;
  background: #fff;
  color: #2e2e2e;
}

.edit-btn{
  color: #c6aa92;
}

.preview-btn{
  color: #fff;
}

.delete-btn{
  color: #ff6767;
}

.action-btn:hover{
  transform: translateY(-3px);
  border-color: #c6aa92;
}

.slide-pagination{
  display: flex;
  justify-content: flex-end;
  margin-top: 25px;
  gap: 10px;
}

.page-btn{
  width: 42px;
  height: 42px;
  border-radius: 3px;
  border: 1px solid #2e2e2e;
  background: #111;
  color: #fff;
  cursor: pointer;
  transition: .3s ease;
}

.page-btn.active{
  background: #c6aa92;
  color: #111;
  border-color: #c6aa92;
}

.page-btn:hover{
  border-color: #c6aa92;
}

.slide-editor{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: .35s ease;
}

.slide-editor.active{
  display: flex;
  opacity: 1;
}

.slide-editor-card{
  width: 90%;
  max-width: 1400px;

  background: #1c1c1c;

  border-radius: 3px;

  padding:  10px 30px;

  position: relative;
}

.slide-editor-grid{
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 30px;
}

.slide-editor h3{
  color: #fff;
  margin-bottom: 20px;
}

.field{
  margin-bottom: 5px;
}

.field label{
  display:block;
  color:#c6aa92;
  margin-bottom:8px;
}

.field input,
.field textarea,
.field select{
  width:100%;
  padding:14px;

  background:#111;
  border:1px solid #2e2e2e;
  border-radius:3px;

  color:#fff;
}

.field textarea{
  height:120px;
  resize:none;
}

.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

.preview-card{
  position:relative;
  height:500px;
  overflow:hidden;
  border-radius: 3px;
}

.preview-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.preview-overlay{
  position:absolute;
  inset:0;

  background:rgba(0,0,0,.4);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;
}

.preview-overlay h2{
  color:#fff;
  font-size:3rem;
}

.preview-overlay p{
  color:#ddd;
  margin:15px 0;
}

.preview-overlay button{
  background:#c6aa92;
  color:#111;

  border:none;

  padding:12px 30px;

  border-radius:50px;
}

.slide-editor-actions{
  display:flex;
  justify-content:flex-end;
  gap:15px;

  margin-top:25px;
}

.cancel-slide,
.save-slide{
  padding:14px 28px;
  border-radius: 3px;
  cursor:pointer;
}

.cancel-slide{
  background:#111;
  border:1px solid #2e2e2e;
  color:#fff;
}

.save-slide{
  background:#c6aa92;
  color:#111;
  border:none;
}

.slide-editor-close{
  position:absolute;
  right:20px;
  top: 5px;

  width:42px;
  height:42px;

  border-radius:50%;

  border:none;

  background:#111;
  color:#fff;

  cursor:pointer;
}

.admin-about{
  width:100%;
  padding:30px;
}

.add-about-btn{
  background:#d47513;
  color:#111;
  border:none;
  padding:14px 22px;
  border-radius:3px;
  cursor:pointer;
}

.about-table{
  width:100%;
  border-collapse:collapse;
}

.about-table th{
  text-align:left;
  padding:18px;
  color:#000;
  border-bottom:1px solid #2e2e2e;
}

.about-table td{
  padding:18px;
  color:#000;
  border-bottom:1px solid #2e2e2e;
}

.about-status{
  padding:8px 14px;
  border-radius:50px;
}

.about-status.active{
  background:#2cef32;
  color:#000;
}

/* FORM */
.about-editor{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,.75);
  backdrop-filter:blur(10px);

  display:none;
  align-items:center;
  justify-content:center;

  z-index:9999;
}

.about-editor-card{
  width:700px;
  max-width:95%;

  background:#1c1c1c;

  border-radius:3px;

  padding:30px;

  border:1px solid #2e2e2e;

  position:relative;
}

.about-editor-card h2{
  color:#fff;
  margin-bottom:25px;
}

.about-editor-close{
  position:absolute;
  right:20px;
  top:20px;

  width:42px;
  height:42px;

  border:none;

  border-radius:50%;

  background:#111;
  color:#fff;

  cursor:pointer;
}

.about-editor-actions{
  display:flex;
  justify-content:flex-end;
  gap:15px;
  margin-top:25px;
}

.cancel-about{
  background:#111;
  border:1px solid #2e2e2e;
  color:#fff;

  padding:14px 25px;
  border-radius:12px;
}

.save-about{
  background:#c6aa92;
  color:#111;

  border:none;

  padding:14px 25px;
  border-radius:12px;
}

.admin-services{
  width:100%;
  padding:30px;
  margin-top:30px;
}

.add-service-btn{
  background:#d47513;
  color:#111;
  border:none;
  padding:14px 22px;
  border-radius:3px;
  cursor:pointer;
}

.services-table{
  width:100%;
  border-collapse:collapse;
}

.services-table th{
  text-align:left;
  padding:18px;
  color:#000;
  border-bottom:1px solid #2e2e2e;
}

.services-table td{
  padding:18px;
  color:#000;
  border-bottom:1px solid #2e2e2e;
}

.service-status{
  padding:8px 14px;
  border-radius:50px;
}

.service-status.active{
  background:#2cef32;
  color:#fff;
}

/* MODAL */
.service-editor{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,.75);
  backdrop-filter:blur(10px);

  display:none;
  align-items:center;
  justify-content:center;

  z-index:9999;
}

.service-editor-card{
  width:700px;
  max-width:95%;

  background:#1c1c1c;
  border:1px solid #2e2e2e;

  border-radius:3px;
  padding:30px;

  position:relative;
}

.service-editor-card h2{
  color:#fff;
  margin-bottom:25px;
}

.service-editor-close{
  position:absolute;
  right:20px;
  top:20px;

  width:42px;
  height:42px;

  border:none;
  border-radius:50%;

  background:#111;
  color:#fff;

  cursor:pointer;
}

.service-editor-actions{
  display:flex;
  justify-content:flex-end;
  gap:15px;
  margin-top:25px;
}

.cancel-service{
  background:#111;
  border:1px solid #2e2e2e;
  color:#fff;

  padding:14px 25px;
  border-radius:3px;
  cursor: pointer;
}

.save-service{
  background:#c6aa92;
  color:#111;

  border:none;

  padding:14px 25px;
  border-radius:3px;
  cursor: pointer;
}

.admin-feedback{
  width:100%;
  padding:30px;
  margin-top:30px;
}

.feedback-table{
  width:100%;
  border-collapse:collapse;
}

.feedback-table th{
  text-align:left;
  padding:18px;
  color:#000;
  border-bottom:1px solid #2e2e2e;
}

.feedback-table td{
  padding:18px;
  color:#000;
  border-bottom:1px solid #2e2e2e;
}

.feedback-stars{
  color:#2cef32;
  font-size:18px;
  letter-spacing:2px;
}

.view-feedback-btn{
  color:#c6aa92;
}

/* VIEW MODAL */
.feedback-viewer{
  position:fixed;
  inset:0;

  display:none;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.75);
  backdrop-filter:blur(10px);

  z-index:9999;
}

.feedback-viewer-card{
  width: 70%;
  max-width:95%;

  background:#1c1c1c;

  border-radius:3px;

  padding:30px;

  position:relative;
}

.feedback-viewer-card h2{
  color:#fff;
  margin-bottom:25px;
}

.feedback-viewer-close{
  position:absolute;
  top:20px;
  right:20px;

  width:42px;
  height:42px;

  border:none;
  border-radius:50%;

  background:#111;
  color:#fff;

  cursor:pointer;
}

.feedback-row{
  margin-bottom:5px;
  color:#d7d1cb;
}

.feedback-row strong{
  color:#c6aa92;
}

.feedback-message{
  margin-top:20px;
  padding:5px;

  background:#111;
  border:1px solid #2e2e2e;
  border-radius:3px;

  color:#d7d1cb;
}

.feedback-actions{
  position:relative;
  display:inline-block;
}

.feedback-actions-btn{
  background:#1c1c1c;
  color:#fff;
  border:1px solid #2e2e2e;
  padding:10px 16px;
  border-radius:3px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
}

.feedback-actions-menu{
  position:absolute;
  right:0;
  top:110%;

  min-width:220px;

  background:#1c1c1c;

  border:1px solid #2e2e2e;

  border-radius:14px;

  overflow:hidden;

  display:none;

  z-index:999;
}

.feedback-actions.active
.feedback-actions-menu{
  display:block;
}

.feedback-action-form{
    display:flex;
    flex-direction:column;
}

.feedback-actions-menu button{
  width:100%;

  background:none;
  border:none;

  color:#fff;

  text-align:left;

  padding:14px 16px;

  cursor:pointer;

  display:flex;
  align-items:center;
  gap:12px;

  transition:.2s;
}

.feedback-actions-menu button:hover{
  background:#2a2a2a;
}

.feedback-actions-menu .approve-btn:hover{
  color:#48bb78;
}

.feedback-actions-menu .hide-btn:hover{
  color:#a0aec0;
}

.feedback-actions-menu .reject-btn:hover{
  color:#f6ad55;
}

.feedback-actions-menu .delete-btn:hover{
  color:#f56565;
}

.admin-team{
  width:100%;
  padding:30px;
  margin-top:30px;
}

.add-team-btn{
  background:#d47513;
  color:#111;
  border:none;
  padding:14px 22px;
  border-radius:3px;
  cursor:pointer;
}

.team-table{
  width:100%;
  border-collapse:collapse;
}

.team-table th{
  text-align:left;
  padding:18px;
  color:#000;
  border-bottom:1px solid #2e2e2e;
}

.team-table td{
  padding:18px;
  color:#000;
  border-bottom:1px solid #2e2e2e;
}

.team-thumb{
  width:65px;
  height:65px;
  border-radius:50%;
  object-fit:cover;
}

.team-status{
  padding:8px 14px;
  border-radius:50px;
}

.team-status.active{
  background:#2cef32;
  color:#000;
}

/* MODAL */
.team-editor{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,.75);
  backdrop-filter:blur(10px);

  display:none;
  align-items:center;
  justify-content:center;

  z-index:9999;
}

.team-editor-card{
  width:700px;
  max-width:95%;

  background:#1c1c1c;
  border:1px solid #2e2e2e;

  border-radius:3px;
  padding:30px;

  position:relative;
}

.team-editor-card h2{
  color:#fff;
  margin-bottom:25px;
}

.team-editor-close{
  position:absolute;
  top:20px;
  right:20px;

  width:42px;
  height:42px;

  border:none;
  border-radius:50%;

  background:#111;
  color:#fff;

  cursor:pointer;
}

.team-editor-actions{
  display:flex;
  justify-content:flex-end;
  gap:15px;
  margin-top:25px;
}

.cancel-team{
  background:#111;
  border:1px solid #2e2e2e;
  color:#fff;

  padding:14px 25px;
  border-radius:3px;
  cursor: pointer;
}

.save-team{
  background:#c6aa92;
  color:#111;

  border:none;

  padding:14px 25px;
  border-radius:3px;
  cursor: pointer;
}

.admin-parts{
  width:100%;
  padding:30px;
  margin-top:30px;
}

.add-part-btn{
  background:#c6aa92;
  color:#111;
  border:none;
  padding:14px 22px;
  border-radius:3px;
  cursor:pointer;
}

.parts-table{
  width:100%;
  border-collapse:collapse;
}

.parts-table th{
  text-align:left;
  padding:18px;
  color:#000;
  border-bottom:1px solid #2e2e2e;
}

.parts-table td{
  padding:18px;
  color:#000;
  border-bottom:1px solid #2e2e2e;
}

.part-thumb{
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:3px;
}

.part-status{
  padding:8px 14px;
  border-radius:50px;
}

.part-status.active{
  background:#2cef32;
  color:#fff;
}

/* MODAL */
.part-editor{
  position:fixed;
  inset:0;

  display:none;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.75);
  backdrop-filter:blur(10px);

  z-index:9999;
}

.part-editor-card{
  width:700px;
  max-width:95%;

  background:#1c1c1c;
  border:1px solid #2e2e2e;

  border-radius:3px;
  padding:30px;

  position:relative;
}

.part-editor-card h2{
  color:#fff;
  margin-bottom:25px;
}

.part-editor-close{
  position:absolute;
  top:20px;
  right:20px;

  width:42px;
  height:42px;

  border:none;
  border-radius:50%;

  background:#111;
  color:#fff;

  cursor:pointer;
}

.part-editor-actions{
  display:flex;
  justify-content:flex-end;
  gap:15px;
  margin-top:25px;
}

.cancel-part{
  background:#111;
  border:1px solid #2e2e2e;
  color:#fff;

  padding:14px 25px;
  border-radius:3px;
  cursor: pointer;
}

.save-part{
  background:#c6aa92;
  color:#111;

  border:none;

  padding:14px 25px;
  border-radius:3px;
  cursor: pointer;
}

.admin-news{
  width:100%;
  padding:30px;
  margin-top:30px;
}

.add-news-btn{
  background:#d47513;
  color:#111;
  border:none;
  padding:14px 22px;
  border-radius:3px;
  cursor:pointer;
}

.news-table{
  width: 100%;
  border-collapse: collapse;
}

.news-table th{
  text-align: left;
  padding: 18px;
  color: #000;
  border-bottom: 1px solid #2e2e2e;
}

.news-table td{
  padding:18px;
  color:#000;
  border-bottom:1px solid #2e2e2e;
}

.news-thumb{
  width:100px;
  height:70px;
  object-fit:cover;
  border-radius:3px;
}

.news-status{
  padding:8px 14px;
  border-radius:50px;
}

.news-status.active{
  background:#2cef32;
  color:#fff;
}

/* MODAL */
.news-editor{
  position:fixed;
  inset:0;

  display:none;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.75);
  backdrop-filter:blur(10px);

  z-index:9999;
}

.news-editor-card{
  width:900px;
  max-width:95%;
  max-height:90vh;
  overflow-y:auto;

  background:#1c1c1c;

  border:1px solid #2e2e2e;
  border-radius:3px;

  padding:30px;

  position:relative;
}

.news-editor-card h2{
  color:#fff;
  margin-bottom:25px;
}

.news-content{
  min-height:250px;
}

.news-editor-close{
  position:absolute;
  right:20px;
  top:20px;

  width:42px;
  height:42px;

  border:none;
  border-radius:50%;

  background:#111;
  color:#fff;

  cursor:pointer;
}

.news-editor-actions{
  display:flex;
  justify-content:flex-end;
  gap:15px;
  margin-top:25px;
}

.cancel-news{
  background:#111;
  color:#fff;
  border: none;
  outline: none;
  padding:14px 25px;
  border-radius: 3px;
  cursor: pointer;
}

.save-news{
  background:#fff;
  color:#111;
  border: none;
  outline: none;
  padding:14px 25px;
  border-radius:3px;
  cursor: pointer;
}

.admin-faq{
  width:100%;
  padding:30px;
  margin-top:30px;
}

.add-faq-btn{
  background:#d47513;
  color:#111;
  border:none;
  padding:14px 22px;
  border-radius:3px;
  cursor:pointer;
}

.faq-table{
  width:100%;
  border-collapse:collapse;
}

.faq-table th{
  text-align:left;
  padding:18px;
  color:#000;
  border-bottom:1px solid #2e2e2e;
}

.faq-table td{
  padding:18px;
  color:#000;
  border-bottom:1px solid #2e2e2e;
}

.faq-status{
  padding:8px 14px;
  border-radius:50px;
}

.faq-status.active{
  background:#2cef32;
  color:#fff;
}

/* MODAL */
.faq-editor{
  position:fixed;
  inset:0;

  display:none;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.75);
  backdrop-filter:blur(10px);

  z-index:9999;
}

.faq-editor-card{
  width:700px;
  max-width:95%;

  background:#1c1c1c;
  border:1px solid #2e2e2e;

  border-radius:3px;
  padding:30px;

  position:relative;
}

.faq-editor-card h2{
  color:#fff;
  margin-bottom:25px;
}

.faq-editor-close{
  position:absolute;
  right:20px;
  top:20px;

  width:42px;
  height:42px;

  border:none;
  border-radius:50%;

  background:#111;
  color:#fff;

  cursor:pointer;
}

.faq-editor-actions{
  display:flex;
  justify-content:flex-end;
  gap:15px;
  margin-top:25px;
}

.cancel-faq{
  background:#111;
  border:1px solid #2e2e2e;
  color:#fff;

  padding:14px 25px;
  border-radius:3px;
  cursor: pointer;
}

.save-faq{
  background:#c6aa92;
  color:#111;

  border:none;

  padding:14px 25px;
  border-radius:3px;
  cursor: pointer;
}

.admin-contacts{
  width:100%;
  padding:30px;
  margin-top:30px;
}

.add-contact-btn{
  background:#d47513;
  color:#111;
  border:none;
  padding:14px 22px;
  border-radius:3px;
  cursor:pointer;
}

.contacts-table{
  width:100%;
  border-collapse:collapse;
}

.contacts-table th{
  text-align:left;
  padding:18px;
  color:#000;
  border-bottom:1px solid #2e2e2e;
}

.contacts-table td{
  padding:18px;
  color:#000;
  border-bottom:1px solid #2e2e2e;
}

.contact-status{
  padding:8px 14px;
  border-radius:50px;
}

.contact-status.active{
  background:#2cef32;
  color:#fff;
}

/* MODAL */
.contact-editor{
  position:fixed;
  inset:0;

  display:none;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.75);
  backdrop-filter:blur(10px);

  z-index:9999;
}

.contact-editor-card{
  width:700px;
  max-width:95%;

  background:#1c1c1c;
  border:1px solid #2e2e2e;

  border-radius:3px;
  padding:30px;

  position:relative;
}

.contact-editor-card h2{
  color:#fff;
  margin-bottom:25px;
}

.contact-editor-close{
  position:absolute;
  right:20px;
  top:20px;

  width:42px;
  height:42px;

  border:none;
  border-radius:50%;

  background:#111;
  color:#fff;

  cursor:pointer;
}

.contact-editor-actions{
  display:flex;
  justify-content:flex-end;
  gap:15px;
  margin-top:25px;
}

.cancel-contact{
  background:#111;
  border:1px solid #2e2e2e;
  color:#fff;

  padding:14px 25px;
  border-radius:3px;
}

.save-contact{
  background:#c6aa92;
  color:#111;

  border:none;

  padding:14px 25px;
  border-radius:3px;
}

.marketing-center{
  width:100%;
  padding: 10px 20px;
}

.marketing-btn{
  background:#d47513;
  color:#111;
  border:none;
  padding:14px 22px;
  border-radius:3px;
  cursor:pointer;
}

.marketing-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:25px;
}

.marketing-stat-card{
  background:#1c1c1c;
  border:1px solid #2e2e2e;
  border-radius:3px;
  padding:25px 10px;
}

.marketing-stat-card span{
  color:#fff;
  border-bottom: 1px solid #fff;
}

.marketing-stat-card h3{
  color:#fff;
  margin-top:10px;
  font-size:2rem;
}

.marketing-table-wrap{
  margin-top:25px;
  overflow-x:auto;
}

.marketing-table{
  width:100%;
  border-collapse:collapse;
}

.marketing-table th{
  color:#fff;
  text-align:left;
  padding:18px;
  background:#1c1c1c;
  border-bottom:1px solid #2e2e2e;
}

.marketing-table td{
  background:#111010;
  color:#fff;
  padding:18px;
  border-bottom:1px solid #2e2e2e;
}

.source-tag{
  padding:6px 12px;
  border-radius:30px;
  font-size:12px;
  font-weight:600;
}

.source-tag.contact{
    background:#eef6ff;
    color:#0066cc;
}

.source-tag.booking{
    background:#f7f2e8;
    color:#b8860b;
}

.source-tag.feedback{
    background:#edf8ef;
    color:#198754;
}

.source-tag.newsletter{
    background:#fff0f0;
    color:#dc3545;
}

.source-tag{
  padding:8px 5px;
  border-radius:3px;
  font-size:13px;
  background: none;
}

/* MODAL */

.campaign-modal{
  position:fixed;
  inset:0;

  display:none;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.75);
  backdrop-filter:blur(10px);

  z-index:9999;
}

.campaign-modal-card{
  width:900px;
  max-width:95%;
  max-height:90vh;

  overflow-y:auto;

  background:#1c1c1c;
  border:1px solid #2e2e2e;

  border-radius:3px;

  padding:30px;

  position:relative;
}

.campaign-modal-card h2{
  color:#fff;
  margin-bottom:25px;
}

.campaign-close-btn{
  position:absolute;
  right:20px;
  top:20px;

  width:42px;
  height:42px;

  border:none;
  border-radius:50%;

  background:#111;
  color:#fff;

  cursor:pointer;
}

.campaign-options{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.campaign-options label{
  display:flex;
  align-items:center;
  gap:10px;

  background:#111;
  border:1px solid #2e2e2e;

  border-radius:3px;

  padding:14px;

  color:#d7d1cb;
}

.large-textarea{
  min-height:180px;
}

.campaign-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;

  margin-top:25px;
}

.summary-card{
  background:#111;
  border:1px solid #2e2e2e;
  border-radius:15px;
  padding:18px;
}

.summary-card span{
  color:#8e857d;
}

.summary-card h3{
  color:#c6aa92;
  margin-top:8px;
}

.campaign-actions{
  display:flex;
  justify-content:flex-end;
  gap:15px;
  margin-top:25px;
}

.cancel-campaign-btn{
  background:#111;
  color:#fff;
  border:1px solid #2e2e2e;
  padding:14px 25px;
  border-radius:3px;
  cursor: pointer;
}

.send-campaign-btn{
  background:#c6aa92;
  color:#111;
  border:none;
  padding:14px 25px;
  border-radius:3px;
  cursor: pointer;
}

@media(max-width:768px){

    .marketing-stats{
        grid-template-columns:1fr;
    }

    .campaign-options{
        grid-template-columns:1fr;
    }

    .campaign-summary{
        grid-template-columns:1fr;
    }

}

/* ===============================
   CONTROL PANEL
================================= */

.admin-control-panel,
.admin-reports{
  width:100%;
  background:#1c1c1c;
  padding:30px;
  margin-top:30px;
}

.admin-control-panel .admin-header h2{
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  text-transform: uppercase;
}

.admin-control-panel .admin-header p{
  color: #fff;
  margin-top: 5px;
}

.admin-reports .admin-header h2{
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  text-transform: uppercase;
}

.admin-reports .admin-header p{
  color: #fff;
  margin-top: 5px;
}

.control-table-wrap{
  overflow-x:auto;
}

.control-table{
  width:100%;
  border-collapse:collapse;
}

.control-table th{
  text-align:left;
  padding:18px;
  color:#fff;
  border-bottom:1px solid #2e2e2e;
}

.control-table td{
  padding:18px;
  color:#fff;
  border-bottom:1px solid #2e2e2e;
}

.control-status{
  padding:8px 14px;
  border-radius:50px;
  font-size:13px;
}

.control-status.active{
  background:#d47513;
  color:#fff;
}

/* ===============================
   ACTION BUTTONS
================================= */
.action-btn{
  width:42px;
  height:42px;
  border-radius:3px;
  border:1px none;
  background:#111;
  cursor:pointer;
  margin-right:6px;
  transition:.3s ease;
}

.action-btn:hover{
  transform:translateY(-3px);
}

.logs-btn{
  color:#7fb4ff;
}

.permission-btn{
  color:#c6aa92;
}

.edit-btn{
  color:#8effb1;
}

.delete-btn{
  color:#ff6b6b;
}

/* ===============================
   ADD USER BUTTON
================================= */
.add-user-btn{
  background:#d47513;
  color:#fff;
  border:none;
  padding:14px 24px;
  border-radius:3px;
  cursor:pointer;
  font-weight:600;
}

/* ===============================
   COMMON MODALS
================================= */

.user-editor,
.permission-editor,
.logs-viewer{
  position:fixed;
  inset:0;

  display:none;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.75);
  backdrop-filter:blur(10px);

  z-index:9999;
}

.user-editor.active,
.permission-editor.active,
.logs-viewer.active{
  display:flex;
}

.user-editor-card,
.permission-editor-card,
.logs-viewer-card{
  width:800px;
  max-width:95%;
  max-height:90vh;

  overflow-y:auto;

  background:#1c1c1c;
  border:1px solid #2e2e2e;
  border-radius:3px;

  padding:30px;

  position:relative;
}

.user-editor-card,
.permission-editor-card,
.logs-viewer-card h2{
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  text-transform: uppercase;
}

.user-editor-card,
.permission-editor-card,
.logs-viewer-card p{
  color: #fff;
  margin-top: 5px;

}

/* ===============================
   CLOSE BUTTONS
================================= */

.user-editor-close,
.permission-close,
.logs-close{
  position:absolute;
  top:20px;
  right:20px;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:#111;
  color:#fff;
  cursor:pointer;
  transition:.3s;
}

.user-editor-close:hover,
.permission-close:hover,
.logs-close:hover{
  background:#fd3c36;
  color:#fff;
  transform:rotate(90deg);
}

/* ===============================
   FORMS
================================= */

.field{
  margin-bottom:18px;
}

.field label{
  display:block;
  color:#d47513;
  margin-bottom:8px;
  font-size: 16px;
}

.user-editor .field input,
.field select,
.field textarea{
  width:100%;
  padding:14px;
  background:#111;
  border: none;
  border-radius:3px;
  color:#fff;
}

.user-editor .field textarea{
  resize:none;
  min-height:120px;
}

.user-editor .field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:#fff;
}

/* ===============================
   PERMISSIONS
================================= */

.permission-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
  margin-top:20px;
}

.permission-grid label{
  display:flex;
  gap:10px;
  align-items:center;
  font-size: 15px;
  background:#111;
  border:1px solid #2e2e2e;
  text-transform: capitalize;
  border-radius:3px;
  padding:15px;
  cursor: pointer;
  color:#d7d1cb;
}

/* ===============================
   SAVE BUTTONS
================================= */

.user-actions,
.permission-actions{
  display:flex;
  justify-content:flex-end;
  gap:15px;
  margin-top:25px;
}

.save-user,
.save-permissions{
  background:#d47513;
  color:#111;
  border:none;
  padding:14px 25px;
  border-radius:3px;
  cursor:pointer;
}

.cancel-user{
  background:#111;
  color:#fff;
  border:1px solid #2e2e2e;
  padding:14px 25px;
  border-radius:3px;
  cursor:pointer;
}

/* ===============================
   LOGS TABLE
================================= */

.logs-table{
  width:100%;
  border-collapse:collapse;
}

.logs-table th{
  color:#ffff;
  text-align:left;
  padding:15px;
  border-bottom:1px solid #2e2e2e;
}

.logs-table td{
  color:#fff;
  padding:15px;
  border-bottom:1px solid #2e2e2e;
}

/* ===============================
   REPORTS
================================= */

.report-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}

.report-card{
  background:#111;
  border:1px solid #2e2e2e;
  border-radius:3px;
  padding:25px;
}

.report-card h3{
  color:#fff !important;
}

.report-card p{
  color:#fff;
  margin:15px 0;
}

.report-card button{
  background:#d47513;
  color:#111;
  border:none;
  padding:12px 20px;
  border-radius:3px;
  cursor:pointer;
}

@media(max-width:768px){

  .permission-grid{
    grid-template-columns:1fr;
  }

}

.booking-actions{
    position:relative;
}

.booking-actions-btn{
    background:#1e1e1e;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:10px 18px;
    cursor:pointer;
}

.booking-actions-menu{
    position:absolute;
    right:0;
    top:110%;
    min-width:240px;
    background:#1c1c1c;
    border:1px solid #2f2f2f;
    border-radius:14px;
    overflow:hidden;
    display:none;
    z-index:999;
}

.booking-actions.active
.booking-actions-menu{
    display:block;
}

.booking-actions-menu button{
    width:100%;
    border:none;
    background:none;
    color:#f5f5f5;
    text-align:left;
    padding:14px 18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:12px;
}

.booking-actions-menu button:hover{
    background:#2a2a2a;
}

.booking-status{
    padding:8px 12px;
    border-radius:50px;
    font-size:12px;
    font-weight:600;
}

.booking-status.pending{
    background:#fff7db;
    color:#c58f00;
}

.booking-status.confirmed{
    background:#e8fff0;
    color:#26a65b;
}

.booking-status.completed{
    background:#edf7ff;
    color:#2f80ed;
}

.booking-status.cancelled{
    background:#fff0f0;
    color:#d63031;
}

/* ==========================================
   BOOKING MODAL OVERLAY
========================================== */

.booking-modal{
    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:30px;

    background:rgba(0,0,0,.75);
    backdrop-filter:blur(10px);

    z-index:9;

    animation:bookingFadeIn .25s ease;
}

/* ==========================================
   MODAL CARD
========================================== */

.booking-modal-card{
  width:80%;
  max-height: auto;
  overflow-y:auto;
  overflow-x: hidden;
  background:linear-gradient(
      145deg,
      #1a1a1a,
      #111111
  );
  border-radius:3px;
  padding:35px;
  box-shadow:
      0 15px 50px rgba(0,0,0,.55),
      0 0 0 1px rgba(212,175,55,.08);
  position:relative;
  animation:bookingCardIn .3s ease;
}

/* ==========================================
   CLOSE BUTTON
========================================== */

.booking-modal-close{
  position:absolute;
  right:20px;
  top:40px;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:#222;
  color:#d4af37;
  cursor:pointer;
  transition:.25s;
}

.booking-modal-close:hover{
    background:#d4af37;
    color:#111;
    transform:rotate(90deg);
}

/* ==========================================
   TITLE
========================================== */

.booking-modal-card h2{
    margin:0 0 25px;

    color:#fff;

    font-size:32px;

    font-weight:700;

    letter-spacing:.5px;

    padding-bottom:15px;

    border-bottom:1px solid rgba(255,255,255,.08);
}

/* ==========================================
   DETAILS GRID
========================================== */

.booking-modal-content{
  width: 100%;
  display:grid;

  grid-template-columns:
  repeat(
      auto-fit,
      minmax(260px,1fr)
  );

  gap:18px;
}

/* ==========================================
   DETAIL CARDS
========================================== */

.booking-detail{
  background:#191919;

  border:1px solid rgba(255,255,255,.05);

  border-radius:3px;

  padding:8px;

  display:flex;
  flex-direction:column;
  gap:8px;

  transition:.25s;
}

.booking-detail:hover{
  transform:translateY(-3px);
}

.booking-detail strong{
  color:#a3a3a3;

  font-size:12px;

  letter-spacing:1px;

  text-transform:uppercase;
}

.booking-detail span{
  color:#fff;

  font-size:16px;

  font-weight:600;

  word-break:break-word;
}

/* ==========================================
   STATUS
========================================== */

.booking-status-display{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    width: max-content !important;

    padding:8px 14px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    background:
    rgba(212,175,55,.15);

    color:#d4af37;
}

/* ==========================================
   NOTES
========================================== */

.booking-notes{
    grid-column:1 / -1;

    margin-top:10px;

    background:#191919;

    border:1px solid rgba(212,175,55,.15);

    border-radius:3px;

    padding:25px;
}

.booking-notes strong{
    display:block;

    color:#d4af37;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:12px;
}

.booking-notes p{
  margin:0;

  color:#e5e5e5;

  line-height:1.8;

  font-size:15px;
}

/* ==========================================
   SCROLLBAR
========================================== */

.booking-modal-card::-webkit-scrollbar{
    width:8px;
}

.booking-modal-card::-webkit-scrollbar-track{
    background:#111;
}

.booking-modal-card::-webkit-scrollbar-thumb{
    background:#444;
    border-radius:20px;
}

.booking-modal-card::-webkit-scrollbar-thumb:hover{
    background:#666;
}

.booking-modal-actions{
  width: 100% !important;
  margin-top:30px;
}

.booking-modal-actions form{
  width: 100% !important;
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.booking-modal-actions form .booking-action-btn{
  border:none;
  width: 100% !important;
  padding: 14px 30px;
  font-size: 18px;
  border-radius:3px;
  cursor:pointer;
  display:flex;
  align-items:center;
  margin: 0 5px;
  font-weight:600;
  transition:.25s;
  color:#fff;
  background:#222;
}

.booking-modal-actions form .booking-action-btn i{
  margin: 0 5px;
}

.booking-modal-actions form .booking-action-btn:hover{
  transform:
  translateY(-2px);
}

.booking-modal-actions form .booking-action-btn.approve{
  background:#1f5134;
}

.booking-modal-actions form .booking-action-btn.approve:hover{
  background:#2a6d46;
}

.booking-modal-actions form .booking-action-btn.reschedule{
  background:#7c5a00;
}

.booking-modal-actions form .booking-action-btn.reschedule:hover{
    background:#9f7400;
}

.booking-modal-actions form .booking-action-btn.progress{
    background:#0d4b68;
}

.booking-modal-actions form .booking-action-btn.progress:hover{
    background:#136182;
}

.booking-modal-actions form .booking-action-btn.complete{
    background:#2c7a3f;
}

.booking-modal-actions form .booking-action-btn.complete:hover{
    background:#36944d;
}

.booking-modal-actions form .booking-action-btn.cancel{
    background:#8c5a00;
}

.booking-modal-actions form .booking-action-btn.cancel:hover{
    background:#b87700;
}

.booking-modal-actions form .booking-action-btn.delete{
    background:#8b1f1f;
}

.booking-modal-actions form .booking-action-btn.delete:hover{
    background:#b12727;
}

/* ==========================================
   ANIMATIONS
========================================== */

@keyframes bookingFadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

@keyframes bookingCardIn{

    from{
        opacity:0;
        transform:translateY(25px) scale(.97);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

.reschedule-modal{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(10px);

    display:none;
    align-items:center;
    justify-content:center;

    padding:20px;

    z-index:999999;
}

.reschedule-modal.active{
    display:flex;
}

.reschedule-modal-card{
    width:100%;
    max-width:650px;

    background:#141414;

    border:1px solid rgba(212,175,55,.2);

    border-radius:3px;

    padding:35px;

    position:relative;

    box-shadow:
    0 20px 60px rgba(0,0,0,.45);
}

.reschedule-modal-card h2{
    color:#fff;
    margin:0 0 10px;
}

.reschedule-subtitle{
    color:#999;
    margin-bottom:25px;
}

.reschedule-modal-close{
    position:absolute;
    right:20px;
    top:20px;

    width:40px;
    height:40px;

    border:none;
    border-radius:50%;

    background:#222;

    color:#d4af37;

    cursor:pointer;
}

.reschedule-modal .field{
    margin-bottom:18px;
}

.reschedule-modal label{
    display:block;
    margin-bottom:8px;

    color:#ddd;
}

.reschedule-modal input,
.reschedule-modal select,
.reschedule-modal textarea{
    width:100%;

    background:#1d1d1d;

    border:1px solid #333;

    color:#fff;

    border-radius:3px;

    padding:14px;
}

.reschedule-modal textarea{
    min-height:140px;
    resize:vertical;
}

.reschedule-actions{
    display:flex;
    gap:12px;
    justify-content:flex-end;
    margin-top:25px;
}

.cancel-reschedule{
    background:#2a2a2a;
    color:#fff;
}

.confirm-reschedule{
    background:#d4af37;
    color:#111;
}

.cancel-reschedule,
.confirm-reschedule{
    border:none;
    border-radius:12px;
    padding:14px 24px;
    cursor:pointer;
    font-weight:600;
}

.footer-section .items{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #fff;
  z-index: 2;
}

.footer-section .items .columns_items{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1%;
  padding: 0 20px;
}

.footer-section .items .columns_items .contacts_btns{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.footer-section .items .columns_items .contacts_btns button {
  position: relative;
  width: 200px;
  border: 2px solid #2B2B2B;
  color: #2B2B2B;
  background: #fff;
  outline: none;
  border-radius: 3px;
  padding: 20px;
  transition: color 0.3s ease;
  margin: 0 10px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;

  overflow: hidden;   /* IMPORTANT */
  z-index: 0;         /* IMPORTANT */
}

.footer-section .items .columns_items .contacts_btns button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #2B2B2B;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(.77,0,.18,1);
  z-index: -1;
}

.footer-section .items .columns_items .contacts_btns button:hover::before {
  transform: scaleX(1);
}

.footer-section .items .columns_items .contacts_btns button:hover {
  color: #fff;
  border: 2px solid #fff;
  box-shadow:
  0 4px 10px rgba(0, 0, 0, 0.15),
  0 0 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.footer-section .items .columns_items form{
  width: 40%;
  transition: all 0.3s ease;
  margin: 20px 0;
  padding-left: 10px;
}

.footer-section .items .columns_items form p{
  font-size: 20px;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #fff;
  text-transform: uppercase;
}

.footer-section .items .columns_items form input{
  width: 100%;
  outline: none;
  font-size: 16px;
  color: #fff;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: none;
  padding: 10px 5px;
  margin-bottom: 2%;
}

.footer-section .items .columns_items form input::placeholder,
.footer-section .items .columns_items form textarea::placeholder {
  color: gray;
  opacity: 1;
}

.footer-section .items .columns_items form textarea{
  width: 100%;
  height: 100px;
  border: none;
  outline: none;
  font-size: 16px;
  color: #fff;
  border-bottom: 1px solid #fff;
  outline: none;
  background: none;
  padding: 10px 5px;
}

.footer-section .items .columns_items form button{
  position: relative;
  outline: none;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 3px;
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 20px;
  padding: 10px 20px;
  transition: color 0.3s ease;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}

.footer-section .items .columns_items form button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(.77,0,.18,1);    
  box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.15),
      0 0 20px rgba(0, 0, 0, 0.1);
  z-index: -1;
}

.footer-section .items .columns_items form button:hover::before {
  transform: scaleX(1);
}

.footer-section .items .columns_items form button:hover {
  color: #2B2B2B;
}

.footer-section .items .columns_items form button i{
    font-size: 25px;
}

.footer-section .items .columns_items .info{
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.footer-section .items .columns_items .info h1{
  font-size: 3em;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fff;
  border-bottom: 1px solid #fff;
}

.footer-section .items .columns_items .info p{
  font-size: 15px;
  color: #fff;
  text-transform: uppercase;
  margin-top: 10px;
}

.particle {
  position: absolute;
  background: var(--footer-color);
  border-radius: 50%;
  top: 50%;
  left: var(--pos-x, 50%);
  width: var(--dim, 5rem);
  height: var(--dim, 5rem);
  transform: translate(-50%, -50%);
  
  background: #2B2B2B;
  z-index: 1;
  animation: float-up var(--dur, 4s) ease-in infinite;
  animation-delay: var(--delay, 0s);
}

/* MAIN SECTION */
.lux-auth{
  width: 100%;
  min-height: 100dvh;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 1 rem;

  opacity: 0;
  pointer-events: none;
  transition: 0.4s ease;

  background:
    radial-gradient(circle at top left, rgba(198,170,146,0.08), transparent 10%),
    #0d0d0d;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

/* CARD */
.lux-auth-card{
  width: 1000px;
  max-width: 100%;

  display: flex;
  overflow: hidden;

  border-radius: 3px;

  background: #161616;

  border: 1px solid #2a2a2a;

  box-shadow:
    0 40px 60px -25px rgba(0,0,0,0.8),
    inset 0 1px 1px rgba(255,255,255,0.03);

  transform: scale(0.9);
  opacity: 0;
  transition: 0.4s ease;
}

/* LEFT SIDE */
.lux-auth-side{
  width: 45%;
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #1b1b1b,
      #23201d,
      #2f2924
    );

  display: flex;
  justify-content: center;
  align-items: center;
}

/* GLOW */
.lux-auth-glow{
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.glow-one{
  width: 300px;
  height: 300px;
  background: rgba(198,170,146,0.18);
  top: -100px;
  left: -100px;
}

.glow-two{
  width: 250px;
  height: 250px;
  background: rgba(255,255,255,0.04);
  bottom: -100px;
  right: -100px;
}

/* BRAND */
.lux-auth-brand{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
}

.lux-auth-brand h4{
  color: #d6cdc5;
  font-weight: 400;
  margin-bottom: 2rem;
}

.lux-auth-logo{
  width: 90px;
  height: 90px;
  border-radius: 50%;

  margin: auto;
  margin-bottom: 1.5rem;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(255,255,255,0.08);

  border: 1px solid rgba(255,255,255,0.08);

  color: #fff;
  font-size: 2rem;
  font-weight: bold;

  backdrop-filter: blur(10px);
}

.lux-auth-brand h2{
  color: #fff;
  font-size: 2rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.lux-auth-brand p{
  color: #b8b1aa;
  line-height: 1.7;
  font-size: 0.95rem;
  max-width: 300px;
  margin: auto;
}

/* RIGHT SIDE */
.lux-auth-form-side{
  width: 55%;
  background: #1c1c1c;

  padding: 4rem;
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* CLOSE */
.lux-auth-close{
  position: absolute;
  top: 20px;
  right: 20px;

  width: 40px;
  height: 40px;

  border-radius: 50%;
  border: 1px solid #333;

  background: transparent;
  color: #fff;

  font-size: 1.3rem;
  cursor: pointer;

  transition: 0.3s ease;
}

.lux-auth-close:hover{
  background: #c6aa92;
  color: #111;
  transform: rotate(90deg);
}

/* TITLE */
.lux-auth-form-side h2{
  color: #fff;
  margin-bottom: 2rem;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  border-left: 3px solid #fff;
  padding-left: 10px;
}

/* INPUT GROUP */
.lux-auth-input{
  margin-bottom: 1.5rem;
}

.lux-auth-input label{
  display: block;
  color: #fff;
  margin-bottom: 0.5rem;
  font-size: 18px;
}

.lux-auth-input input{
  width: 100%;
  padding: 1rem;

  background: #111;
  border: 1px solid #2a2a2a;

  border-radius: 3px;
  font-size: 14px;

  color: #fff;
  outline: none;

  transition: 0.3s ease;
}

.lux-auth-input input:focus{
  border-color: #c6aa92;
  box-shadow: 0 0 0 4px rgba(198,170,146,0.08);
}

/* BUTTONS */
.lux-auth-actions{
  display: flex;
  gap: 1rem;
}

/* PRIMARY BUTTON */
.lux-primary-btn{
  flex: 1;
  padding: 1rem;
  border: none;
  border-radius: 3px;
  background: #c6aa92;
  color: #111;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s ease;
}

.lux-primary-btn:hover{
  background: #e0c4aa;
  transform: translateY(-2px);
}

/* SECONDARY BUTTON */
.lux-secondary-btn{
  flex: 1;
  padding: 1rem;

  border-radius: 3px;

  background: transparent;
  border: 1px solid #3a3a3a;

  color: #d9d1ca;
  font-weight: 600;
  font-size: 14px;

  cursor: pointer;
  transition: 0.3s ease;
}

.lux-secondary-btn:hover{
  border-color: #c6aa92;
  color: #fff;
}

.password-wrapper{
  position:relative;
}

.password-wrapper input{
  width:100%;
  padding-right:45px;
}

.toggle-password{
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  color:#888;
}

.toggle-password:hover{
  color:#111;
}

.forgot-link{
  margin-top:10px;
  text-align:right;
}

.forgot-link a{
  text-decoration:none;
  color:#666;
  font-size:14px;
}

.forgot-link a:hover{
  color:#000;
}

.reset-description{
  color:#777;
  font-size:14px;
  margin-bottom:20px;
}

@keyframes float-up {
    0% {
        top: 50%;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        top: calc(var(--uplift) * -1); 
        transform: translate(-50%, -50%) scale(0);
    }
}

/* Overlay background */
.booking-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.booking-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Form container – clean charcoal card */
.booking-form-container {
  background: #1e1e1e;
  padding: 2.5rem 2.2rem;
  width: 100%;
  max-width: 60%;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 0 1px #3a3530;
  transform: scale(0.98);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

.booking-overlay.active .booking-form-container {
  transform: scale(1);
  opacity: 1;
}

.booking-form-container h2 {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #f0e9e2;
  margin-bottom: 0.5rem;
}

.booking-form-container .subhead {
  color: #b2a89e;
  font-size: 0.95rem;
  margin-bottom: 2rem;
  font-weight: 350;
  border-left: 3px solid #7a6e64;
  padding-left: 1rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  color: #ccc3b9;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.form-group input,
.form-group select {
  width: 100%;
  background: #141414;
  border: 1.5px solid #3a3530;
  border-radius: 1px;
  padding: 14px 16px;
  color: #f2e9e0;
  font-size: 1rem;
  font-family: "Inter", sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #a58e7c;
  box-shadow: 0 0 0 3px rgba(165, 142, 124, 0.15);
}

.form-group input::placeholder {
  color: #7a736b;
  font-weight: 300;
}

.form-group select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23a58e7c" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  cursor: pointer;
}

.form-row {
  display: flex;
  gap: 1rem;
}

.form-row .form-group {
  flex: 1;
}

.btn-submit {
  background: #2c2824;
  border: 1.5px solid #6e635a;
  color: #f0e7de;
  padding: 15px 24px;
  font-weight: 500;
  font-size: 1.1rem;
  width: 100%;
  cursor: pointer;
  margin-top: 0.8rem;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
  letter-spacing: 0.5px;
}

.btn-submit:hover {
  background: #3f3934;
  border-color: #b09b8a;
  transform: scale(1.01);
}

.btn-submit:active {
  transform: scale(0.99);
}

.close-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: #a79a8f;
  font-size: 2rem;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  transition: background 0.2s, color 0.2s;
}

.close-btn:hover {
  background: rgba(255,255,255,0.05);
  color: #e5dbd1;
}

/* Demo trigger button (for standalone preview) */
.demo-trigger {
  background: #1c1c1c;
  border: 1px solid #4a3f36;
  color: #e8e2da;
  padding: 12px 28px;
  border-radius: 40px;
  font-size: 1rem;
  cursor: pointer;
  font-family: "Inter", sans-serif;
}

.mobile-menu-btn,
.mobile-close,
.mobile-overlay{

  display: none;

}
    
/*=========================================================
  RESPONSIVE - LARGE LAPTOPS / SMALL DESKTOPS
  SCREEN: 1200px and below
=========================================================*/

@media screen and (max-width:1200px){

    /*=========================
      GENERAL
    =========================*/

    html{
        font-size:95%;
    }

    body{
        overflow-x:hidden;
    }

    section{
        overflow:hidden;
    }

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

    h1{
        font-size:clamp(2.2rem,4vw,3.6rem);
    }

    h2{
        font-size:clamp(1.8rem,3vw,2.8rem);
    }

    h3{
        font-size:clamp(1.2rem,2vw,1.6rem);
    }

    p{
        font-size:clamp(.95rem,1.2vw,1.05rem);
        line-height:1.7;
    }


    /*=========================
      NAVBAR
    =========================*/

    .navbar-inner{
        padding:0 30px;
    }

    .nav-links{
        gap:25px;
    }

    .nav-links a{
        font-size:13px;
        letter-spacing:2px;
    }

    .logo{
        width:140px;
        height:90px;
    }


    /*=========================
      HOME SLIDER
    =========================*/

    .content{
        left:6%;
        max-width:500px;
    }

    .content h1{
        font-size:clamp(2.6rem,5vw,3.8rem);
    }

    .content p{
        font-size:1.1rem;
    }

    .thumbs{
        right:25px;
        bottom:8%;
        gap:10px;
    }

    .thumb{
        width:70px;
        height:100px;
    }

    .controls{
        bottom:25px;
    }

    .controls button{
        width:50px;
        height:50px;
        font-size:1.5rem;
    }


    /*=========================
      ABOUT
    =========================*/

    .about{
        padding:70px 5%;
    }

    .about .items:nth-child(2) h1{
        width:90%;
    }

    .about .items:nth-child(2) p{
        width:90%;
    }


    /*=========================
      SERVICES
    =========================*/

    .services{

        padding:60px 4%;
    }

    .services .items:nth-child(2){

        width:45%;
    }

    .services .items:nth-child(3){

        width:45%;
    }

    .services .items:nth-child(2) h1{

        font-size:2rem;
    }


    /*=========================
      TEAM
    =========================*/

    .team{

        padding:60px 4%;
    }

    .team-orbit{

        width:340px;
        height:340px;
    }

    .orbit-item{

        width:80px;
        height:80px;
    }

    .orbit-item:nth-child(1){
        transform:rotate(0deg) translateX(135px);
    }

    .orbit-item:nth-child(2){
        transform:rotate(90deg) translateX(135px);
    }

    .orbit-item:nth-child(3){
        transform:rotate(180deg) translateX(135px);
    }

    .orbit-item:nth-child(4){
        transform:rotate(270deg) translateX(135px);
    }

    .team-content{

        width:50%;
    }

    .team-content h2{

        font-size:2.5rem;
    }


    /*=========================
      HERO
    =========================*/

    .hero{

        gap:30px;
    }

    .hero-right{

        padding:20px !important;
    }

    .hero-right h1{

        font-size:1.8rem;
    }

    .hero-right .items img{

        width:120px;
        min-width:120px;
        max-width:120px;
        height:100px;
    }

    .hero-right .items .description{

        height:100px;
    }


    /*=========================
      NEWS
    =========================*/

    .news-slide{

        gap:40px;
    }

    .news-image img{

        width:450px;
    }

    .news-label{

        font-size:2.4rem;
    }

    .news-headline{

        font-size:1.4rem;
    }


    /*=========================
      TESTIMONIAL
    =========================*/

    .section-grid{

        gap:30px;
    }

    .left-content h2{

        font-size:2.4rem;
    }

    .testimonial-card{

        padding:24px;
    }


    /*=========================
      NEWSLETTER
    =========================*/

    .newsletter-card{

        width:100%;
    }


    /*=========================
      DASHBOARD
    =========================*/

    .customizables{

        grid-template-columns:
        repeat(auto-fill,minmax(300px,1fr));
    }

    .overview .overview_items{

        gap:20px;
    }


    /*=========================
      ADMIN
    =========================*/

    .slide-editor-grid{

        grid-template-columns:
        350px 1fr;
    }

    .preview-card{

        height:430px;
    }

}

/*=========================================================
  RESPONSIVE - TABLETS / SMALL LAPTOPS
  SCREEN: 992px and below
=========================================================*/

@media screen and (max-width:992px){

    /*=========================
      GENERAL
    =========================*/

    html{
        font-size:90%;
    }

    body{
        overflow-x:hidden;
    }

    section{
        overflow:hidden;
    }

    h1{
        font-size:clamp(2rem,5vw,3rem);
    }

    h2{
        font-size:clamp(1.8rem,4vw,2.5rem);
    }

    p{
        font-size:1rem;
        line-height:1.8;
    }


    /*=========================
      NAVBAR
    =========================*/

    .navbar-inner{
        padding:0 20px;
    }

    .logo{
        width:120px;
        height:75px;
    }

    .nav-links{
        gap:15px;
    }

    .nav-links a{
        font-size:12px;
        letter-spacing:1px;
    }

    .nav-btn{
        padding:8px 16px;
        font-size:12px;
    }


    /*=========================
      HOME SLIDER
    =========================*/

    .content{

        left:50%;
        bottom:70px;
        top:auto;

        transform:translateX(-50%);

        width:90%;
        max-width:700px;

        text-align:center;

        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .content h1{

        font-size:clamp(2.2rem,5vw,3rem);
        margin-bottom:15px;
    }

    .content p{

        font-size:1rem;
        max-width:90%;
    }


    /*=========================
      HOME SLIDER THUMBNAILS
    =========================*/

    .thumbs{

        right:15px;
        bottom:50%;
        transform:translateY(50%);

        display:flex;
        flex-direction:column;

        gap:10px;
    }

    .thumb{

        width:60px;
        height:85px;
    }


    /*=========================
      TIMELINE
    =========================*/

    .timeline{

        left:15px;
        height:220px;
    }


    /*=========================
      ABOUT
    =========================*/

    .about{

        flex-direction:column;
        height:auto;

        padding:80px 30px;

        text-align:center;
    }

    .about .items:nth-child(1){

        width:100%;
        margin-bottom:30px;

        flex-direction:row;
        justify-content:center;
    }

    .about .items:nth-child(1) span{

        display:none;
    }

    .about .items:nth-child(1) h5{

        transform:none !important;
    }

    .about .items:nth-child(2){

        align-items:center;
    }

    .about .items:nth-child(2) h1{

        width:100%;
        text-align:center;
        letter-spacing:2px;
    }

    .about .items:nth-child(2) p{

        width:100%;
        text-align:center;
    }

    .about .btns{

        width:100%;

        justify-content:center;

        flex-wrap:wrap;

        gap:15px;
    }


    /*=========================
      SERVICES
    =========================*/

    .services{

        flex-direction:column !important;

        height:auto;

        padding:70px 30px;
    }

    .services:nth-child(even){

        flex-direction:column !important;
    }

    .services .items:nth-child(1){

        display:none;
    }

    .services .items:nth-child(2){

        width:100%;

        margin-bottom:40px;

        align-items:center !important;

        text-align:center !important;
    }

    .services:nth-child(even)
    .items:nth-child(2){

        align-items:center;

        text-align:center;
    }

    .services .items:nth-child(3){

        width:100%;

        justify-content:center;
    }

    .services .items:nth-child(3) img{

        width:100%;
        max-width:700px;
        height:auto;
    }


    /*=========================
      TESTIMONIALS
    =========================*/

    .section-grid{

        flex-direction:column;
    }

    .left-content{

        text-align:center;
        align-items:center;
    }

    .right-carousel-area{

        width:100%;
    }

    .slide{

        flex-direction:column;
    }

    .testimonial-card{

        width:100%;
    }

    .vertical-indicator{

        display:none;
    }


    /*=========================
      NEWS
    =========================*/

    .news-slide{

        flex-direction:column;

        text-align:center;
    }

    .latest-news{

        width:100%;
    }

    .news-label,
    .news-headline,
    .news-meta{

        margin-left:0;
        text-align:center;
    }

    .news-image{

        width:100%;

        display:flex;
        justify-content:center;
    }

    .news-image img{

        width:100%;
        max-width:650px;
    }


    /*=========================
      TEAM
    =========================*/

    .team{

        flex-direction:column;

        text-align:center;

        padding:80px 30px;
    }

    .team-orbit{

        margin-bottom:50px;
    }

    .team-content{

        width:100%;
    }

    .team-content span{

        margin:auto;
        margin-bottom:30px;
    }


    /*=========================
      HERO
    =========================*/

    .hero{

        flex-direction:column;

        height:auto;
    }

    .hero-left{

        width:100%;
        min-height:500px;
    }

    .hero-right{

        width:100%;

        align-items:center;

        text-align:center;

        padding:40px 25px !important;
    }

    .hero-right h1{

        border:none;
        padding:0;
    }

    .hero-right .items{

        width:100%;

        text-align:left;
    }


    /*=========================
      FAQ
    =========================*/

    .faq-grid{

        grid-template-columns:1fr 1fr;
    }


    /*=========================
      NEWSLETTER
    =========================*/

    .newsletter-card{

        padding:50px 30px;
    }

    .newsletter-form{

        flex-direction:column;
    }

    .newsletter-form input,
    .newsletter-form button{

        width:100%;
    }


    /*=========================
      CONTACT POPUP
    =========================*/

    .contact-popup-card{

        max-width:95%;
    }


    /*=========================
      DASHBOARD
    =========================*/

    .dashboard_nav .items{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;
    }

    .overview .overview_items{

        flex-direction:column;
    }

    .overview .overview_items .items{

        width:100% !important;
    }

    .customizables{

        grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    }


    /*=========================
      ADMIN TABLES
    =========================*/

    .slide-table-wrap,
    .about-table,
    .services-table{

        overflow-x:auto;
    }

    .slide-editor-grid{

        grid-template-columns:1fr;
    }

    .preview-card{

        height:350px;
    }

    .field-row{

        grid-template-columns:1fr;
    }


    /*=========================
      MODALS
    =========================*/

    .feedback-popup,
    .rate-box,
    .about-editor-card,
    .service-editor-card,
    .contact-popup-card{

        width:95%;
        max-width:95%;
    }

}



/*=========================================================
  RESPONSIVE - TABLETS / LARGE PHONES
  SCREEN: 768px and below
=========================================================*/

@media screen and (max-width:768px){

    /*==================================
      GENERAL
    ==================================*/

    html{
        font-size:87.5%;
    }

    body{
        overflow-x:hidden;
    }

    h1{
        font-size:clamp(1.8rem,7vw,2.5rem);
    }

    h2{
        font-size:clamp(1.5rem,6vw,2.2rem);
    }

    h3{
        font-size:clamp(1.1rem,5vw,1.5rem);
    }

    p{
        font-size:.95rem;
        line-height:1.8;
    }

    section{
        padding-left:20px;
        padding-right:20px;
    }

    .mobile-menu-btn{

      display:flex;

      width:48px;
      height:48px;

      border:none;

      background:none;

      color:#fff;

      justify-content:center;

      align-items:center;

      cursor:pointer;

      font-size:24px;

  }

  .mobile-nav{

    position:fixed;

    top:0;
    left:-320px;

    width:300px;

    max-width:85%;

    height:100vh;

    background:#111;

    z-index:99999999 !important;

    transition:.45s cubic-bezier(.19,1,.22,1);

    padding:40px 30px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    box-shadow:
    20px 0 40px rgba(0,0,0,.45);

  }

  .mobile-nav.active{

    left:0;

  }

  .mobile-close{

    border:none;

    background:none;

    color:#d4af37;

    font-size:30px;

    align-self:flex-end;

    cursor:pointer;

    margin-bottom:35px;

  }

  .mobile-nav .nav-links{

    display:flex;

    flex-direction:column;

    width:100%;

  }

  .mobile-nav .nav-links li{

    list-style:none;

    margin:7px 0;

    opacity:0;

    transform:translateX(-35px);

  }

  .mobile-nav.active .nav-links li{

    animation:mobileFade .5s forwards;

  }

  .mobile-nav.active .nav-links li:nth-child(1){

    animation-delay:.08s;

  }

  .mobile-nav.active .nav-links li:nth-child(2){

    animation-delay:.16s;

  }

  .mobile-nav.active .nav-links li:nth-child(3){

    animation-delay:.24s;

  }

  .mobile-nav.active .nav-links li:nth-child(4){

    animation-delay:.32s;

  }

  .mobile-nav.active .nav-links li:nth-child(5){

    animation-delay:.40s;

  }

  .mobile-nav.active .nav-links li:nth-child(6){

    animation-delay:.48s;

  }

  .mobile-nav .nav-links a{

    color:#fff;

    text-decoration:none;

    font-size:20px;

    font-weight:500;

    transition:.3s;

  }

  .mobile-nav .nav-links a:hover{

    color:#d4af37;

    padding-left:12px;

  }

  .mobile-nav .btn{

    margin-top:40px;

    display:flex;

    flex-direction:column;

    gap:15px;

  }

  .mobile-nav .btn button{

    width:100%;

  }

  .mobile-close{

    display: flex;

  }

  .mobile-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index: 9999999 !important;

  }

  .mobile-overlay.active{

    opacity:1;

    visibility:visible;

  }

  body.menu-open{

    overflow:hidden;

  }

  @keyframes mobileFade{

    to{

      opacity:1;

      transform:translateX(0);

    }

  }

  /* Hide desktop navigation */

  .navbar-inner>.nav-links,

  .navbar-inner>.btn{

    display:none;

  }


  /*==================================
    HOME SLIDER
  ==================================*/

  .slider{
  
    height:100vh;
    height:100dvh;
    overflow:hidden;
  
  }

  .bg-slide{
    background-position:center;
  }

  .content{

    width:92%;

    left:50%;
    bottom:30px;

    top:auto;

    transform:translateX(-50%);

    text-align:center;

    align-items:center;

    display:flex;
    flex-direction:column;
    justify-content:center;

    max-width:100%;
    z-index: 1 !important;
  }

  .content h1{

    width:100%;

    font-size:2rem;

    letter-spacing:1px;

    margin-bottom:12px;
  }

  .content p{

    width:100%;

    font-size:.95rem;

    line-height:1.7;
  }


  /*==================================
    THUMBNAILS
  ==================================*/

  .thumbs{

    right:12px;

    top:50%;

    bottom:auto;

    transform:translateY(-50%);

    flex-direction:column;

    gap:8px;
  }

  .thumb{

    width:55px;
    height:75px;
  }


  /*==================================
    CONTROLS
  ==================================*/

  .controls{
  display:none;
    bottom:15px;
  }

  .controls button{

    width:45px;
    height:45px;

  }


  /*==================================
    ABOUT
  ==================================*/

  .about{

      padding:70px 25px;

      text-align:center;
  }

  .about .items:nth-child(2){

      align-items:center;
  }

  .about .items:nth-child(2) h1{

      width:100%;

      font-size:2rem;

      text-align:center;
  }

  .about .items:nth-child(2) p{

      width:100%;

      text-align:center;
  }

  .about .btns{

      flex-direction:column;

      align-items:center;
  }

  .about .btns button{

      width:100%;

      max-width:320px;

      margin:0;
  }


  /*==================================
    SERVICES
  ==================================*/

  .services{

      flex-direction:column !important;

      height:auto;

      padding:60px 20px;
  }

  .services:nth-child(even){

      flex-direction:column !important;
  }

  .services .items:nth-child(1){

      display:none;
  }

  .services .items:nth-child(2){

      width:100%;

      margin-bottom:30px;

      text-align:center !important;

      align-items:center !important;
  }

  .services:nth-child(even) .items:nth-child(2){

      text-align:center !important;

      align-items:center !important;
  }

  .services .items:nth-child(2) h1{

      font-size:2rem;
  }

  .services .items:nth-child(3){

      width:100%;
  }

  .services .items:nth-child(3) img{

      width:100%;

      height:auto;

      border-radius:5px;
  }


  /*==================================
    TESTIMONIALS
  ==================================*/

  .testimonial-section{

      padding:60px 20px;
  }

  .section-grid{

      flex-direction:column;
  }

  .left-content{

      align-items:center;

      text-align:center;
  }

  .right-carousel-area{

      width:100%;
  }

  .slide{

      flex-direction:column;
  }

  .testimonial-card{

      width:100%;
  }

  .vertical-indicator{

    display:none;
  }


    /*==================================
      NEWS
    ==================================*/

    .news-slide{

        flex-direction:column;

        text-align:center;
    }

    .latest-news{

        width:100%;
    }

    .news-label,
    .news-headline,
    .news-meta{

        margin-left:0;

        text-align:center;
    }

    .news-image{

        width:100%;
    }

    .news-image img{

        width:100%;
    }


    /*==================================
      TEAM
    ==================================*/

    .team{

        flex-direction:column;

        padding:60px 20px;

        text-align:center;
    }

    .team-orbit{

        width:300px;
        height:300px;

        margin-bottom:40px;
    }

    .team-content{

        width:100%;
    }

    .team-content span{

        margin:auto;

        margin-bottom:25px;
    }


    /*==================================
      HERO
    ==================================*/

    .hero{

        flex-direction:column;

        height:auto;
    }

    .hero-left{

        min-height:420px;
    }

    .hero-right{

        width:100%;

        align-items:center;

        text-align:center;
    }

    .hero-right h1{

        border:none;

        padding:0;
    }

    .hero-right .items{

        flex-direction:column;

        align-items:center;

        text-align:center;

        padding:15px;
    }

    .hero-right .items img{

        width:100%;

        max-width:320px;

        height:auto;

        margin:0 0 15px 0;
    }

    .hero-right .items .description{

        width:100%;

        height:auto;

        align-items:center;
    }

    .hero-right .items button{

        margin-top:15px;
    }


    /*==================================
      FAQ
    ==================================*/

    .faq-grid{

        grid-template-columns:1fr;
    }


    /*==================================
      NEWSLETTER
    ==================================*/

    .newsletter{

        padding:60px 20px;
    }

    .newsletter-card{

        padding:40px 20px;
    }

    .newsletter-form{

        flex-direction:column;
    }

    .newsletter-form input{

        width:100%;
    }

    .newsletter-form button{

        width:100%;
    }


    /*==================================
      CONTACT
    ==================================*/

    .contact-popup-card{

        width:100%;

        padding:25px;
    }


    /*==================================
      DASHBOARD
    ==================================*/

    .dashboard_nav .items{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;
    }

    .customizables{

        grid-template-columns:1fr;
    }

    .overview .overview_items{

        flex-direction:column;
    }

    .overview .overview_items .items{

        width:100% !important;
    }


    /*==================================
      ADMIN TABLES
      (Cards instead of squeezed rows)
    ==================================*/

    .slide-table,
    .about-table,
    .services-table{

        border:0;
    }

    .slide-table thead,
    .about-table thead,
    .services-table thead{

        display:none;
    }

    .slide-table tr,
    .about-table tr,
    .services-table tr{

        display:block;

        margin-bottom:20px;

        border:1px solid #ddd;

        border-radius:5px;

        padding:10px;

        background:#fff;
    }

    .slide-table td,
    .about-table td,
    .services-table td{

        display:flex;

        justify-content:space-between;

        align-items:center;

        width:100%;

        padding:12px 8px;

        border:none;

        border-bottom:1px solid #eee;
    }

    .slide-table td:last-child,
    .about-table td:last-child,
    .services-table td:last-child{

        border-bottom:none;
    }

    .slide-table td::before,
    .about-table td::before,
    .services-table td::before{

        content:attr(data-label);

        font-weight:700;

        color:#222;

        padding-right:20px;
    }


    /*==================================
      EDITORS
    ==================================*/

    .slide-editor-grid{

        grid-template-columns:1fr;
    }

    .field-row{

        grid-template-columns:1fr;
    }

    .preview-card{

        height:300px;
    }


    /*==================================
      POPUPS
    ==================================*/

    .feedback-popup,
    .rate-box,
    .slide-editor-card,
    .about-editor-card,
    .service-editor-card,
    .contact-popup-card{

        width:96%;

        max-width:96%;
    }

  .footer-section .items .columns_items{
    flex-direction: column;
  }

  .footer-section .items .columns_items .contacts_btns button {
    width: 100%;
    padding: 10px;
    margin: 0 5px;
    font-size: 14px;
  }
  
  .footer-section .items .columns_items form{
    width: 100%;
  }

  .footer-section .items .columns_items form p{
    font-size: 15px;
    letter-spacing: unset;
    font-weight: 400;
  }

  .footer-section .items .columns_items form input{
    font-size: 14px;
    padding: 8px 5px;
    margin-bottom: 2%;
  }

  .footer-section .items .columns_items form button{
    width: 100%;
    background: #fff;
    color: #111;
    font-size: 15px;
    margin-top: 15px;
  }

  .footer-section .items .columns_items .info{
    width: 100%;
  }

.footer-section .items .columns_items .info h1{
  font-size: 1.5em;
  letter-spacing: 2px;
}

.footer-section .items .columns_items .info p{
  font-size: 13px;
}

#scrollTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;

  width: 45px;
  height: 45px;
  font-size: 13px;
}

/*==================================================
    LUXURY LOGIN
==================================================*/

.lux-auth{
    padding:20px;
    align-items:center;
    justify-content:center;
}

.lux-auth-card{

    width:100%;
    max-width:100%;

    flex-direction:column;

    border-radius:8px;

    max-height:95vh;

    overflow-y:auto;

}

.lux-auth-side{

    width:100%;

    min-height:250px;

    padding:40px 25px;

}

.lux-auth-logo{

    width:70px;
    height:70px;

    font-size:1.6rem;

}

.lux-auth-brand{

    padding:0;

}

.lux-auth-brand h2{

    font-size:1.6rem;

    letter-spacing:1px;

}

.lux-auth-brand h4{

    font-size:15px;

    margin-bottom:20px;

}

.lux-auth-brand p{

    max-width:100%;

    font-size:14px;

    line-height:1.8;

}

.lux-auth-form-side{

    width:100%;

    padding:35px 25px;

}

.lux-auth-form-side h2{

    font-size:1.5rem;

    margin-bottom:25px;

}

.lux-auth-input{

    margin-bottom:18px;

}

.lux-auth-input label{

    font-size:15px;

}

.lux-auth-input input{

    padding:15px;

    font-size:15px;

}

.lux-auth-actions{

    flex-direction:column;

}

.lux-primary-btn,
.lux-secondary-btn{

    width:100%;

}

.lux-auth-close{

    top:15px;
    right:15px;

}

/*==================================================
    PASSWORD
==================================================*/

.password-wrapper input{

    padding-right:50px;

}

.toggle-password{

    right:15px;

    font-size:18px;

}

/*==================================================
    FORGOT PASSWORD
==================================================*/

.forgot-link{

    text-align:center;

    margin-top:15px;

}

/*==================================================
    BOOKING MODAL
==================================================*/

.booking-overlay{

    padding:20px;

    align-items:flex-start;

    overflow-y:auto;

}

.booking-form-container{

    width:100%;

    max-width:100%;

    margin:40px auto;

    padding:30px 22px;

}

.booking-form-container h2{

    font-size:1.7rem;

}

.booking-form-container .subhead{

    font-size:14px;

    margin-bottom:25px;

}

/*==================================================
    FORM ROWS
==================================================*/

.form-row{

    flex-direction:column;

    gap:0;

}

.form-row .form-group{

    width:100%;

}

/*==================================================
    INPUTS
==================================================*/

.form-group{

    margin-bottom:18px;

}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    font-size:15px;

    padding:15px;

    box-sizing:border-box;

}

/*==================================================
    BUTTON
==================================================*/

.btn-submit{

    width:100%;

    font-size:17px;

}

/*==================================================
    CLOSE BUTTON
==================================================*/

.close-btn{

    top:10px;

    right:10px;

}

/*==================================================
    REMOVE EXTRA SPACING
==================================================*/

.booking-form-container *{

    box-sizing:border-box;

}

}

/*=========================================================
  RESPONSIVE - PHONES
  SCREEN: 576px and below
=========================================================*/

@media screen and (max-width:576px){

  /*==================================
    GENERAL
  ==================================*/

  html{
      font-size:81.25%;
  }

  body{
      overflow-x:hidden;
  }

  section{
      padding-left:15px;
      padding-right:15px;
  }

  h1{
      font-size:clamp(1.5rem,8vw,2.1rem);
      line-height:1.25;
      letter-spacing:0;
  }

  h2{
      font-size:clamp(1.35rem,7vw,1.8rem);
      line-height:1.3;
  }

  h3{
      font-size:1.1rem;
  }

  p{
      font-size:.9rem;
      line-height:1.75;
  }

  button,
  .nav-btn,
  .submit-btn{
      min-height:48px;
  }


  /*==================================
    NAVBAR
  ==================================*/

  .navbar-inner{
      padding:0 12px;
  }

  .logo{
      width:85px;
      height:55px;
  }

  .nav-btn{
      padding:8px 14px;
      font-size:11px;
  }


  /*==================================
    HOME SLIDER
  ==================================*/

  .slider{
      height:100vh;
  }

  .content{

      width:100%;

      bottom:20px;

      left:50%;

      transform:translateX(-50%);

      text-align:center;
  }

  .content h1{

      font-size:1.8rem;

      margin-bottom:10px;
  }

  .content p{

      font-size:.9rem;

      width:100%;
  }


  /*==================================
    SLIDER THUMBNAILS
  ==================================*/

  .thumbs{

      right:8px;

      top:50%;

      transform:translateY(-50%);

      gap:6px;
      display: none;
  }

  .thumb{

      width:45px;
      height:60px;
  }


  /*==================================
    CONTROLS
  ==================================*/

  .controls{

      bottom:10px;

      gap:10px;
  }

  .controls button{

      width:40px;
      height:40px;

      font-size:1rem;
  }


  /*==================================
    ABOUT
  ==================================*/

  .about{

      padding:50px 15px;
  }

  .about .items:nth-child(2) h1{

      font-size:1.8rem;
  }

  .about .btns{

      width:100%;
  }

  .about .btns button{

      width:100%;
  }


  /*==================================
    SERVICES
  ==================================*/

  .services{

      padding:50px 15px;
  }

  .services .items:nth-child(2) h1{

      font-size:1.7rem;
  }

  .services .items:nth-child(3) img{

      border-radius:3px;
  }


  /*==================================
    TESTIMONIALS
  ==================================*/

  .testimonial-section{

      padding:50px 15px;
  }

  .left-content h2{

      font-size:1.8rem;
  }

  .testimonial-card{

      padding:20px;
  }


  /*==================================
    NEWS
  ==================================*/

  .news-slider{

      padding:50px 0;
  }

  .news-label{

      font-size:1.7rem;
  }

  .news-headline{

      font-size:1.2rem;
  }

  .news-nav{

      display:none;
  }


  /*==================================
    TEAM
  ==================================*/

  .team{

      padding:50px 15px;
  }

  .team-orbit{

      width:240px;
      height:240px;
  }

  .orbit-center{

      width:90px;
      height:90px;
  }

  .orbit-item{

      width:55px;
      height:55px;
  }

  .orbit-item:nth-child(1){
      transform:rotate(0deg) translateX(95px);
  }

  .orbit-item:nth-child(2){
      transform:rotate(90deg) translateX(95px);
  }

  .orbit-item:nth-child(3){
      transform:rotate(180deg) translateX(95px);
  }

  .orbit-item:nth-child(4){
      transform:rotate(270deg) translateX(95px);
  }

  .team-content h2{

      font-size:1.8rem;
  }


  /*==================================
    HERO
  ==================================*/

  .hero-left{

      min-height:300px;
  }

  .hero-right{

      padding:30px 15px !important;
  }

  .hero-right h1{

      font-size:1.6rem;
  }

  .hero-right .items{

      padding:12px;
  }

  .hero-right .items img{

      max-width:100%;
  }

  .hero-right .items .description h3{

      font-size:1rem;
  }

  .hero-right .items button{

      font-size:14px;
  }


  /*==================================
    FAQ
  ==================================*/

  .faq-section{

      padding:60px 15px;
  }

  .faq-header h2{

      font-size:1.8rem;
  }

  .faq-card{

      padding:20px;
  }


  /*==================================
    NEWSLETTER
  ==================================*/

  .newsletter{

      padding:50px 15px;
  }

  .newsletter-card{

      padding:30px 20px;
  }

  .newsletter-card h2{

      font-size:1.6rem;
  }

  .newsletter-form{

      gap:10px;

      background:none;

      border:none;
  }

  .newsletter-form input{

      border:1px solid #333;
  }

  .newsletter-form button{

      width:100%;
  }


  /*==================================
    CONTACT POPUP
  ==================================*/

  .contact-popup{

      padding:10px;
  }

  .contact-popup-card{

      padding:20px;
  }


  /*==================================
    DASHBOARD
  ==================================*/

  .dashboard_nav{

      padding:10px;
  }

  .dashboard_nav .items{

      padding:15px;
  }

  .dashboard_nav .items h2{

      font-size:15px;
  }

  .customizables{

      grid-template-columns:1fr;

      gap:15px;
  }

  .customizables .boxes{

      padding:18px;
  }


  /*==================================
    TABLES
  ==================================*/

  .slide-table td,
  .about-table td,
  .services-table td{

      flex-direction:column;

      align-items:flex-start;

      gap:5px;

      padding:12px;
  }

  .slide-table td::before,
  .about-table td::before,
  .services-table td::before{

      margin-bottom:4px;
  }


  /*==================================
    EDITORS
  ==================================*/

  .slide-editor-card,
  .about-editor-card,
  .service-editor-card{

      padding:20px 15px;
  }

  .preview-card{

      height:220px;
  }

  .slide-editor-actions,
  .about-editor-actions{

      flex-direction:column;
  }

  .slide-editor-actions button,
  .about-editor-actions button{

      width:100%;
  }


  /*==================================
    POPUPS
  ==================================*/

  .feedback-popup{

      width:95%;

      padding:20px;
  }

  .feedback-popup-title{

      font-size:20px;
  }

  .feedback-popup-message{

      font-size:14px;
  }

  .rate-box{

      padding:25px 20px;
  }

  .stars{

      font-size:2.8rem;

      gap:8px;
  }


  /*==================================
    FOOTER
  ==================================*/

  .footer-section{

    margin-top:8rem;
  }

  .lux-auth{

    padding:10px;

  }

  .lux-auth-side{

      min-height:220px;

      padding:30px 20px;

  }

  .lux-auth-brand h2{

      font-size:1rem;

  }

  .lux-auth-form-side{

      padding:25px 18px;

  }

  .lux-auth-form-side h2{

      font-size:1rem;

  }

  .booking-overlay{

      padding:10px;

  }

  .booking-form-container{

      margin:20px auto;

      padding:25px 18px;

  }

  .booking-form-container h2{

      font-size:1rem;

  }

  .form-group input,
  .form-group select,
  .form-group textarea{

      padding:14px;

      font-size:14px;

  }

  .btn-submit{

      padding:15px;

      font-size:16px;

  }

}