/* ============================================================
   Create Value Xperts - Main Stylesheet
   White Theme, Colorful & Professional
   ============================================================ */

:root {
  --primary: #1a3c6e;
  --primary-light: #2563a8;
  --accent: #e85d26;
  --accent2: #f5a623;
  --green: #27ae60;
  --blue: #2980b9;
  --purple: #8e44ad;
  --white: #ffffff;
  --off-white: #f8f9fc;
  --light-grey: #f1f4f8;
  --border: #e5e9f0;
  --text-dark: #1a1f2e;
  --text-mid: #4a5568;
  --text-light: #718096;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.1);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.14);
  --radius: 12px;
  --radius-lg: 20px;
  --font: 'Plus Jakarta Sans', sans-serif;
  --font-display: 'Fraunces', serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font); background:var(--white); color:var(--text-dark); overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; }
button { font-family:var(--font); }
input, select, textarea { font-family:var(--font); }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#f1f1f1; }
::-webkit-scrollbar-thumb { background:var(--primary); border-radius:3px; }

/* ============================================================
   NAVBAR
   ============================================================ */
#navbar { position:fixed; top:0; left:0; right:0; z-index:1000; }

.nav-top-bar {
  background:var(--primary);
  padding:7px 0;
}
.nav-top-inner {
  max-width:1400px; margin:0 auto; padding:0 40px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-top-left {
  display:flex; align-items:center; gap:24px;
  font-size:12.5px; color:rgba(255,255,255,0.85);
}
.nav-top-left span { display:flex; align-items:center; gap:6px; }
.nav-top-left i { color:var(--accent2); }
.nav-top-right { display:flex; align-items:center; gap:14px; }
.nav-top-right a {
  color:rgba(255,255,255,0.7); font-size:13px; transition:color 0.2s;
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,0.1);
}
.nav-top-right a:hover { color:var(--white); background:rgba(255,255,255,0.2); }

.nav-main {
  background:var(--white);
  box-shadow:var(--shadow-md);
  border-bottom:3px solid var(--accent);
}
.nav-inner {
  max-width:1400px; margin:0 auto; padding:0 40px;
  display:flex; align-items:center; justify-content:space-between;
  height:70px;
}

.nav-logo { display:flex; align-items:center; gap:12px; }
.logo-icon {
  width:44px; height:44px;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:white; font-weight:800; font-size:13px;
  letter-spacing:0.5px;
}
.logo-icon.small { width:34px; height:34px; font-size:11px; }
.logo-text { display:flex; flex-direction:column; line-height:1.15; }
.logo-main { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--primary); }
.logo-sub { font-size:10px; color:var(--text-light); letter-spacing:1.5px; text-transform:uppercase; }

.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links > a, .nav-dropdown > a {
  padding:8px 16px; border-radius:8px;
  font-size:14px; font-weight:600; color:var(--text-mid);
  transition:all 0.2s; cursor:pointer; white-space:nowrap;
}
.nav-links > a:hover, .nav-links > a.active,
.nav-dropdown > a:hover, .nav-dropdown > a.active {
  color:var(--primary); background:rgba(26,60,110,0.07);
}

.nav-dropdown { position:relative; }
.dropdown-menu {
  position:absolute; top:calc(100% + 8px); left:50%;
  transform:translateX(-50%);
  background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); border:1px solid var(--border);
  padding:8px; min-width:200px;
  opacity:0; pointer-events:none; transition:all 0.2s;
  z-index:100;
}
.nav-dropdown:hover .dropdown-menu { opacity:1; pointer-events:all; }
.dropdown-menu a {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px; font-size:14px;
  color:var(--text-mid); transition:all 0.2s;
}
.dropdown-menu a:hover { background:var(--off-white); color:var(--primary); }
.dropdown-menu a i { width:16px; color:var(--accent); }

.nav-actions { display:flex; align-items:center; gap:10px; }

.btn-nav-login {
  padding:8px 20px; border:2px solid var(--primary);
  border-radius:8px; color:var(--primary); font-size:13.5px; font-weight:600;
  background:transparent; cursor:pointer; transition:all 0.2s;
  display:flex; align-items:center; gap:7px;
}
.btn-nav-login:hover { background:var(--primary); color:white; }

.btn-nav-register {
  padding:8px 22px;
  background:linear-gradient(135deg, var(--accent), #f07850);
  border:none; border-radius:8px; color:white;
  font-size:13.5px; font-weight:600; cursor:pointer; transition:all 0.2s;
}
.btn-nav-register:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(232,93,38,0.4); }

.btn-whatsapp {
  width:38px; height:38px; border-radius:50%;
  background:#25D366; color:white; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
}
.btn-whatsapp:hover { transform:scale(1.1); box-shadow:0 4px 14px rgba(37,211,102,0.4); }

/* User menu */
.user-menu { position:relative; }
.user-avatar-btn {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:6px 14px; border-radius:24px;
  background:var(--off-white); border:2px solid var(--border);
  transition:all 0.2s; font-size:14px; font-weight:600;
}
.user-avatar-btn:hover { border-color:var(--primary); background:rgba(26,60,110,0.05); }
.user-avatar-btn span:first-child {
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  color:white; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}
.user-avatar-btn img { width:30px; height:30px; border-radius:50%; object-fit:cover; }
.user-name { color:var(--text-dark); }
.user-dropdown {
  position:absolute; top:calc(100% + 10px); right:0;
  background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); border:1px solid var(--border);
  padding:8px; min-width:210px;
  opacity:0; pointer-events:none; transition:all 0.2s; z-index:100;
  margin-top:-11px;
}
.user-menu:hover .user-dropdown { opacity:1; pointer-events:all; }
.user-dropdown a {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px; font-size:14px;
  color:var(--text-mid); transition:all 0.2s;
}
.user-dropdown a:hover { background:var(--off-white); color:var(--primary); }
.user-dropdown a i { width:16px; color:var(--primary); }
.dropdown-divider { height:1px; background:var(--border); margin:6px 0; }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:5px; background:none; border:none; }
.hamburger span { display:block; width:24px; height:2px; background:var(--text-dark); border-radius:2px; transition:all 0.3s; }

/* ============================================================
   AUTH MODAL
   ============================================================ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(10,20,40,0.7);
  backdrop-filter:blur(8px);
  z-index:2000; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:all 0.3s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.auth-modal {
  background:var(--white); border-radius:var(--radius-lg);
  padding:40px; width:100%; max-width:430px;
  box-shadow:var(--shadow-lg); position:relative;
  transform:translateY(20px); transition:transform 0.3s;
}
.modal-overlay.open .auth-modal { transform:translateY(0); }
.modal-close {
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--border); background:var(--light-grey);
  color:var(--text-light); font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all 0.2s;
}
.modal-close:hover { background:var(--border); color:var(--text-dark); }
.auth-modal-logo {
  display:flex; align-items:center; gap:10px; margin-bottom:24px;
  font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--primary);
}
.auth-tabs {
  display:flex; background:var(--light-grey); border-radius:10px;
  padding:4px; margin-bottom:24px;
}
.auth-tab {
  flex:1; padding:10px; border-radius:8px;
  text-align:center; cursor:pointer; font-size:14px; font-weight:600;
  color:var(--text-light); transition:all 0.2s;
  border:none; background:transparent;
}
.auth-tab.active { background:var(--primary); color:white; }
.auth-title { font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--primary); margin-bottom:4px; }
.auth-sub { color:var(--text-light); font-size:14px; margin-bottom:20px; }
.auth-form { display:flex; flex-direction:column; gap:14px; }
.input-group {
  position:relative;
}
.input-group i {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--text-light); font-size:14px; pointer-events:none; z-index:1;
}
.input-group input {
  width:100%; padding:13px 14px 13px 42px;
  border:2px solid var(--border); border-radius:10px;
  font-size:14px; color:var(--text-dark);
  background:var(--off-white); transition:border-color 0.2s;
}
.input-group input:focus { outline:none; border-color:var(--primary); background:white; }
.btn-auth-submit {
  padding:14px; width:100%;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  border:none; border-radius:10px; color:white;
  font-size:15px; font-weight:600; cursor:pointer; transition:all 0.2s;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-auth-submit:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(26,60,110,0.3); }
.auth-switch { text-align:center; font-size:13px; color:var(--text-light); }
.auth-switch span { color:var(--primary); cursor:pointer; font-weight:600; }
.auth-error { background:#fff0f0; border:1px solid #fecaca; border-radius:8px; padding:10px 14px; color:#dc2626; font-size:13px; }

/* ============================================================
   HERO / SLIDER
   ============================================================ */
.hero-slider {
  margin-top:106px; /* navbar height */
  position:relative; overflow:hidden; height:85vh; min-height:520px;
}
.slider-track { display:flex; transition:transform 0.6s cubic-bezier(0.4,0,0.2,1); height:100%; }
.slide {
  min-width:100%; height:100%; position:relative; overflow:hidden;
  display:flex; align-items:center;
}
.slide-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transform:scale(1.05); transition:transform 6s ease-out;
}
.slide.active .slide-bg { transform:scale(1); }
.slide-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(10,20,50,0.75) 0%, rgba(10,20,50,0.35) 60%, transparent 100%);
}
.slide-content {
  position:relative; z-index:2;
  padding:0 80px; max-width:750px;
  opacity:0; transform:translateY(30px);
  transition:all 0.7s ease 0.3s;
}
.slide.active .slide-content { opacity:1; transform:translateY(0); }
.slide-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(245,166,35,0.2); border:1px solid rgba(245,166,35,0.5);
  border-radius:50px; padding:6px 16px; margin-bottom:20px;
  color:var(--accent2); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:2px;
}
.slide-title {
  font-family:var(--font-display);
  font-size:clamp(36px, 5.5vw, 78px); font-weight:700;
  color:white; line-height:1.1; margin-bottom:16px;
}
.slide-title em { font-style:italic; color:var(--accent2); }
.slide-subtitle { font-size:17px; color:rgba(255,255,255,0.8); max-width:480px; line-height:1.7; margin-bottom:32px; }
.slide-btns { display:flex; gap:14px; flex-wrap:wrap; }

.slider-controls {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; z-index:10;
}
.slider-dot {
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,0.4); cursor:pointer; transition:all 0.3s;
  border:none;
}
.slider-dot.active { background:var(--accent2); width:28px; border-radius:5px; }

.slider-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,0.15); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.3); color:white; font-size:18px;
  cursor:pointer; z-index:10; transition:all 0.3s;
  display:flex; align-items:center; justify-content:center;
}
.slider-arrow:hover { background:var(--accent); border-color:var(--accent); }
.slider-prev { left:28px; }
.slider-next { right:28px; }

/* ============================================================
   SEARCH BAR
   ============================================================ */
.search-section {
  background:white; padding:0 40px;
  position:relative; z-index:100;
}
.search-box-wrap {
  max-width:1400px; margin:0 auto;
  background:white; border-radius:var(--radius-lg);
  box-shadow:0 -4px 0 var(--primary), var(--shadow-lg);
  padding:28px 32px;
  margin-top:-80px; position:relative;
}
.search-tabs { display:flex; gap:4px; margin-bottom:20px; }
.search-tab {
  padding:8px 24px; border-radius:8px;
  font-size:14px; font-weight:600; cursor:pointer;
  color:var(--text-light); transition:all 0.2s;
  border:2px solid var(--border); background:white;
}
.search-tab.active { background:var(--primary); color:white; border-color:var(--primary); }
.search-tab:hover:not(.active) { border-color:var(--primary); color:var(--primary); }
.search-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr auto; gap:14px; align-items:end; }
.search-field { display:flex; flex-direction:column; gap:6px; }
.search-field label { font-size:11px; color:var(--text-light); text-transform:uppercase; letter-spacing:1.5px; font-weight:600; }
.search-field input, .search-field select {
  padding:12px 16px; border:2px solid var(--border); border-radius:10px;
  font-size:14px; color:var(--text-dark); background:var(--off-white);
  transition:border-color 0.2s; -webkit-appearance:none;
}
.search-field input:focus, .search-field select:focus {
  outline:none; border-color:var(--primary); background:white;
}
.btn-search {
  padding:12px 28px;
  background:linear-gradient(135deg, var(--accent), #f07850);
  border:none; border-radius:10px; color:white;
  font-size:15px; font-weight:700; cursor:pointer; transition:all 0.2s;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.btn-search:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(232,93,38,0.4); }

/* ============================================================
   SECTION STYLES
   ============================================================ */
.container { max-width:1400px; margin:0 auto; padding:0 40px; }
.section { padding:80px 0; }
.section.bg-grey { background:var(--off-white); }
.section.bg-dark { background:var(--primary); color:white; }

.section-label {
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; color:var(--accent); font-weight:700;
  text-transform:uppercase; letter-spacing:3px; margin-bottom:12px;
}
.section-label::before { content:''; width:28px; height:2px; background:var(--accent); }
.section-title {
  font-family:var(--font-display);
  font-size:clamp(26px, 3.5vw, 44px); font-weight:700;
  color:var(--primary); line-height:1.2; margin-bottom:12px;
}
.section-title em { font-style:italic; color:var(--accent); }
.section-title.white { color:white; }
.section-desc { font-size:16px; color:var(--text-mid); max-width:580px; line-height:1.7; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  padding:14px 32px;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  border:none; border-radius:10px; color:white;
  font-size:14px; font-weight:600; cursor:pointer;
  transition:all 0.3s; display:inline-flex; align-items:center; gap:8px;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,60,110,0.3); }

.btn-accent {
  padding:14px 32px;
  background:linear-gradient(135deg, var(--accent), #f07850);
  border:none; border-radius:10px; color:white;
  font-size:14px; font-weight:600; cursor:pointer;
  transition:all 0.3s; display:inline-flex; align-items:center; gap:8px;
}
.btn-accent:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(232,93,38,0.35); }

.btn-outline {
  padding:13px 30px;
  background:transparent;
  border:2px solid var(--primary); border-radius:10px; color:var(--primary);
  font-size:14px; font-weight:600; cursor:pointer;
  transition:all 0.3s; display:inline-flex; align-items:center; gap:8px;
}
.btn-outline:hover { background:var(--primary); color:white; }

.btn-outline-white {
  padding:13px 30px;
  background:transparent;
  border:2px solid white; border-radius:10px; color:white;
  font-size:14px; font-weight:600; cursor:pointer;
  transition:all 0.3s; display:inline-flex; align-items:center; gap:8px;
}
.btn-outline-white:hover { background:white; color:var(--primary); }

.btn-sm {
  padding:8px 18px; font-size:13px; border-radius:8px;
  font-weight:600; cursor:pointer; transition:all 0.2s;
  display:inline-flex; align-items:center; gap:6px; border:none;
}
.btn-sm-primary { background:rgba(26,60,110,0.08); color:var(--primary); }
.btn-sm-primary:hover { background:var(--primary); color:white; }
.btn-sm-accent { background:rgba(232,93,38,0.1); color:var(--accent); }
.btn-sm-accent:hover { background:var(--accent); color:white; }
.btn-sm-red { background:rgba(231,76,60,0.1); color:#e74c3c; }
.btn-sm-red:hover { background:#e74c3c; color:white; }

/* ============================================================
   PROPERTY CARDS
   ============================================================ */
.props-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
  gap:24px;
}
.property-card {
  background:white; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); border:1px solid var(--border);
  overflow:hidden; transition:all 0.3s; cursor:pointer;
}
.property-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:var(--primary);
}
.prop-img {
  position:relative; height:220px; overflow:hidden;
  background:var(--light-grey);
}
.prop-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.property-card:hover .prop-img img { transform:scale(1.06); }
.prop-img-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--text-light);
  background:linear-gradient(135deg, #e8eef6, #d4e0f0);
}
.prop-img-placeholder i { font-size:40px; color:rgba(26,60,110,0.2); }

.prop-badges { position:absolute; top:14px; left:14px; display:flex; gap:6px; flex-wrap:wrap; }
.badge {
  padding:4px 12px; border-radius:20px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
}
.badge-featured { background:linear-gradient(135deg, #f5a623, #f7c25e); color:#7a4f00; }
.badge-luxury { background:linear-gradient(135deg, #8e44ad, #a855f7); color:white; }
.badge-new { background:linear-gradient(135deg, #27ae60, #2ecc71); color:white; }
.badge-sale { background:linear-gradient(135deg, #e74c3c, #f56565); color:white; }

.prop-wishlist {
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; border-radius:50%;
  background:white; box-shadow:0 2px 8px rgba(0,0,0,0.15);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:15px; border:none;
  color:var(--text-light); transition:all 0.2s;
}
.prop-wishlist:hover, .prop-wishlist.active { color:#e74c3c; transform:scale(1.1); }

.prop-body { padding:20px; }
.prop-type {
  font-size:11px; color:var(--primary); text-transform:uppercase;
  letter-spacing:2px; font-weight:700; margin-bottom:6px;
}
.prop-name {
  font-family:var(--font-display); font-size:18px; font-weight:700;
  color:var(--text-dark); margin-bottom:8px; line-height:1.3;
}
.prop-location {
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--text-light); margin-bottom:12px;
}
.prop-location i { color:var(--accent); font-size:12px; }
.prop-price {
  font-family:var(--font-display); font-size:22px; font-weight:700;
  color:var(--primary); margin-bottom:14px;
}
.prop-features {
  display:flex; gap:14px; flex-wrap:wrap; padding-top:14px;
  border-top:1px solid var(--border);
}
.prop-feat { display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--text-mid); }
.prop-feat i { color:var(--primary); font-size:12px; }
.prop-status { position:absolute; bottom:14px; right:14px; }
.prop-status-tag {
  padding:4px 10px; border-radius:6px; font-size:11px; font-weight:600;
}
.status-sale { background:#dcfce7; color:#166534; }
.status-rent { background:#dbeafe; color:#1e40af; }
.status-sold { background:#fee2e2; color:#991b1b; }
.status-construction { background:#fef3c7; color:#92400e; }

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar {
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  padding:40px 0;
}
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.stat-item {
  text-align:center; padding:20px;
  border-right:1px solid rgba(255,255,255,0.1);
}
.stat-item:last-child { border-right:none; }
.stat-num {
  font-family:var(--font-display); font-size:44px; font-weight:700;
  color:var(--accent2); line-height:1;
}
.stat-label { font-size:14px; color:rgba(255,255,255,0.75); margin-top:6px; text-transform:uppercase; letter-spacing:1.5px; }

/* ============================================================
   FEATURES / WHY US
   ============================================================ */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature-card {
  background:white; border-radius:var(--radius-lg);
  padding:32px; border:1px solid var(--border);
  transition:all 0.3s; position:relative; overflow:hidden;
}
.feature-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  opacity:0; transition:opacity 0.3s;
}
.feature-card:nth-child(1)::before { background:linear-gradient(90deg, var(--primary), var(--primary-light)); }
.feature-card:nth-child(2)::before { background:linear-gradient(90deg, var(--accent), #f07850); }
.feature-card:nth-child(3)::before { background:linear-gradient(90deg, var(--green), #2ecc71); }
.feature-card:nth-child(4)::before { background:linear-gradient(90deg, var(--purple), #9b59b6); }
.feature-card:nth-child(5)::before { background:linear-gradient(90deg, #e67e22, #f39c12); }
.feature-card:nth-child(6)::before { background:linear-gradient(90deg, var(--blue), #3498db); }
.feature-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent; }
.feature-card:hover::before { opacity:1; }
.feature-icon {
  width:60px; height:60px; border-radius:16px;
  background:var(--off-white); display:flex; align-items:center; justify-content:center;
  font-size:26px; margin-bottom:20px; transition:all 0.3s;
}
.feature-card:nth-child(1) .feature-icon { background:rgba(26,60,110,0.08); color:var(--primary); }
.feature-card:nth-child(2) .feature-icon { background:rgba(232,93,38,0.08); color:var(--accent); }
.feature-card:nth-child(3) .feature-icon { background:rgba(39,174,96,0.08); color:var(--green); }
.feature-card:nth-child(4) .feature-icon { background:rgba(142,68,173,0.08); color:var(--purple); }
.feature-card:nth-child(5) .feature-icon { background:rgba(230,126,34,0.08); color:#e67e22; }
.feature-card:nth-child(6) .feature-icon { background:rgba(41,128,185,0.08); color:var(--blue); }
.feature-card:hover .feature-icon { transform:scale(1.1); }
.feature-title { font-size:18px; font-weight:700; color:var(--text-dark); margin-bottom:10px; }
.feature-desc { font-size:14px; color:var(--text-mid); line-height:1.7; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testimonial-card {
  background:white; border-radius:var(--radius-lg);
  padding:28px; border:1px solid var(--border);
  transition:all 0.3s; position:relative;
}
.testimonial-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.testimonial-quote {
  font-size:48px; color:var(--accent2); line-height:1;
  font-family:Georgia,serif; margin-bottom:8px;
}
.testimonial-stars { color:#f5a623; font-size:15px; letter-spacing:2px; margin-bottom:14px; }
.testimonial-text {
  font-size:15px; color:var(--text-mid); line-height:1.75;
  margin-bottom:20px; font-style:italic;
}
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-av {
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; color:white; flex-shrink:0;
}
.testimonial-av img { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.testimonial-info h5 { font-size:15px; font-weight:700; color:var(--text-dark); margin-bottom:2px; }
.testimonial-info p { font-size:12px; color:var(--text-light); }
.testimonial-property {
  font-size:11px; color:var(--primary); font-weight:600;
  text-transform:uppercase; letter-spacing:1px;
  background:rgba(26,60,110,0.06); padding:3px 10px; border-radius:4px;
  display:inline-flex; margin-top:6px;
}

/* ============================================================
   BLOG CARDS
   ============================================================ */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:28px; }
.blog-card {
  background:white; border-radius:var(--radius-lg);
  border:1px solid var(--border); overflow:hidden;
  transition:all 0.3s; cursor:pointer;
}
.blog-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--primary); }
.blog-img { height:210px; overflow:hidden; background:var(--light-grey); }
.blog-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.blog-card:hover .blog-img img { transform:scale(1.06); }
.blog-body { padding:24px; }
.blog-cat {
  display:inline-flex; padding:4px 12px;
  background:rgba(26,60,110,0.08); color:var(--primary);
  border-radius:6px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:1px; margin-bottom:12px;
}
.blog-title {
  font-family:var(--font-display); font-size:19px; font-weight:700;
  color:var(--text-dark); margin-bottom:10px; line-height:1.35;
}
.blog-meta {
  display:flex; gap:16px; font-size:12px; color:var(--text-light); margin-bottom:10px;
}
.blog-meta span { display:flex; align-items:center; gap:5px; }
.blog-excerpt { font-size:14px; color:var(--text-mid); line-height:1.65; }
.blog-read-more {
  display:inline-flex; align-items:center; gap:6px;
  color:var(--primary); font-size:13px; font-weight:600;
  margin-top:14px; transition:gap 0.2s;
}
.blog-card:hover .blog-read-more { gap:10px; }

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  background:linear-gradient(135deg, var(--primary) 0%, #0f2851 50%, var(--primary) 100%);
  padding:80px 0; text-align:center; position:relative; overflow:hidden;
}
.cta-section::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle at 30% 50%, rgba(245,166,35,0.08) 0%, transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(232,93,38,0.08) 0%, transparent 50%);
}
.cta-section > * { position:relative; }
.cta-title {
  font-family:var(--font-display); font-size:clamp(28px,4vw,50px);
  font-weight:700; color:white; margin-bottom:16px;
}
.cta-title em { color:var(--accent2); font-style:italic; }
.cta-desc { color:rgba(255,255,255,0.75); font-size:17px; max-width:500px; margin:0 auto 36px; line-height:1.7; }
.cta-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   PAGE HERO
   ============================================================ */
.page-hero {
  margin-top:106px;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  padding:60px 0 80px; position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-hero-content { position:relative; z-index:2; }
.breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:rgba(255,255,255,0.7); margin-bottom:16px;
}
.breadcrumb a { color:var(--accent2); transition:color 0.2s; }
.breadcrumb a:hover { color:white; }
.breadcrumb i { font-size:10px; }
.page-title {
  font-family:var(--font-display); font-size:clamp(34px,5vw,64px);
  font-weight:700; color:white; line-height:1.1; margin-bottom:14px;
}
.page-title em { color:var(--accent2); font-style:italic; }
.page-subtitle { color:rgba(255,255,255,0.8); font-size:17px; max-width:500px; line-height:1.65; }

/* ============================================================
   TEAM CARDS
   ============================================================ */
.team-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:24px; }
.team-card {
  background:white; border-radius:var(--radius-lg);
  padding:28px 20px; text-align:center;
  border:1px solid var(--border); transition:all 0.3s; overflow:hidden;
  position:relative;
}
.team-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
}
.team-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.team-avatar {
  width:86px; height:86px; border-radius:50%; margin:0 auto 16px;
  border:4px solid var(--off-white);
  box-shadow:0 4px 14px rgba(0,0,0,0.1); overflow:hidden;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:30px; font-weight:700; color:white;
}
.team-avatar img { width:100%; height:100%; object-fit:cover; }
.team-name { font-family:var(--font-display); font-size:19px; font-weight:700; margin-bottom:4px; color:var(--text-dark); }
.team-role { color:var(--accent); font-size:13px; font-weight:600; margin-bottom:12px; text-transform:uppercase; letter-spacing:1px; }
.team-bio { font-size:13px; color:var(--text-light); line-height:1.65; margin-bottom:16px; }
.team-contacts { display:flex; justify-content:center; gap:10px; }
.team-contact-btn {
  width:34px; height:34px; border-radius:50%;
  background:var(--off-white); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--primary); transition:all 0.2s;
}
.team-contact-btn:hover { background:var(--primary); color:white; border-color:var(--primary); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:1fr 1.8fr; gap:36px; align-items:start; }
.contact-cards { display:flex; flex-direction:column; gap:16px; }
.contact-card {
  background:white; border-radius:var(--radius);
  padding:22px; border:1px solid var(--border);
  display:flex; align-items:flex-start; gap:16px;
  transition:all 0.2s;
}
.contact-card:hover { border-color:var(--primary); box-shadow:var(--shadow-sm); }
.contact-icon {
  width:50px; height:50px; min-width:50px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
}
.contact-icon.blue { background:rgba(26,60,110,0.08); color:var(--primary); }
.contact-icon.orange { background:rgba(232,93,38,0.08); color:var(--accent); }
.contact-icon.green { background:rgba(39,174,96,0.08); color:var(--green); }
.contact-icon.purple { background:rgba(142,68,173,0.08); color:var(--purple); }
.contact-details h4 { font-size:15px; font-weight:700; color:var(--text-dark); margin-bottom:4px; }
.contact-details p, .contact-details a { color:var(--text-light); font-size:14px; line-height:1.6; }

.contact-form-card {
  background:white; border-radius:var(--radius-lg);
  padding:40px; border:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:7px; }
.form-group.full { grid-column:1/-1; }
.form-group label { font-size:12px; color:var(--text-light); text-transform:uppercase; letter-spacing:1.5px; font-weight:600; }
.form-group input, .form-group select, .form-group textarea {
  padding:13px 16px; border:2px solid var(--border); border-radius:10px;
  font-size:14px; color:var(--text-dark); background:var(--off-white);
  transition:border-color 0.2s; font-family:var(--font); resize:none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline:none; border-color:var(--primary); background:white;
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.profile-layout { display:grid; grid-template-columns:280px 1fr; gap:28px; align-items:start; }
.profile-sidebar {
  background:white; border-radius:var(--radius-lg);
  border:1px solid var(--border); overflow:hidden;
  position:sticky; top:120px;
}
.profile-banner {
  height:80px;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
}
.profile-info { padding:0 24px 24px; text-align:center; }
.profile-avatar-wrap {
  width:90px; height:90px; border-radius:50%;
  border:4px solid white; box-shadow:0 4px 14px rgba(0,0,0,0.1);
  margin:-45px auto 14px; overflow:hidden;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:34px; font-weight:700; color:white;
}
.profile-avatar-wrap img { width:100%; height:100%; object-fit:cover; }
.profile-name { font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--text-dark); }
.profile-email { font-size:13px; color:var(--text-light); margin-bottom:20px; }
.profile-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.profile-stat { background:var(--off-white); border-radius:10px; padding:14px; text-align:center; }
.profile-stat-num { font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--primary); }
.profile-stat-label { font-size:11px; color:var(--text-light); text-transform:uppercase; letter-spacing:1px; }
.profile-nav { border-top:1px solid var(--border); padding:12px; }
.profile-nav-item {
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:10px; font-size:14px; font-weight:600;
  color:var(--text-mid); cursor:pointer; transition:all 0.2s;
}
.profile-nav-item:hover { background:var(--off-white); color:var(--primary); }
.profile-nav-item.active { background:rgba(26,60,110,0.08); color:var(--primary); }
.profile-nav-item i { width:18px; color:var(--primary); }

/* ============================================================
   TOAST
   ============================================================ */
.toast-container { position:fixed; bottom:28px; right:28px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.toast {
  background:white; border-radius:12px;
  padding:14px 20px; box-shadow:var(--shadow-lg); border-left:4px solid;
  display:flex; align-items:center; gap:12px;
  transform:translateX(120%); transition:transform 0.3s;
  min-width:280px; max-width:360px;
}
.toast.show { transform:translateX(0); }
.toast.success { border-color:var(--green); }
.toast.error { border-color:#e74c3c; }
.toast.info { border-color:var(--blue); }
.toast i { font-size:18px; flex-shrink:0; }
.toast.success i { color:var(--green); }
.toast.error i { color:#e74c3c; }
.toast.info i { color:var(--blue); }
.toast span { font-size:14px; font-weight:500; color:var(--text-dark); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background:#43656f; color:white; }
.footer-top { padding:70px 0 50px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:50px; }
.footer-desc { color:rgba(255,255,255,0.65); font-size:14px; line-height:1.75; max-width:280px; margin:16px 0 20px; }
.footer-contact-quick { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.footer-contact-quick a {
  display:flex; align-items:center; gap:8px;
  color:rgba(255,255,255,0.8); font-size:14px; transition:color 0.2s;
}
.footer-contact-quick a:hover { color:var(--accent2); }
.footer-contact-quick i { color:var(--accent2); width:16px; }
.footer-socials { display:flex; gap:10px; margin-top:4px; }
.social-btn {
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:rgba(255,255,255,0.7); transition:all 0.2s;
  border:1px solid rgba(255,255,255,0.15);
}
.social-btn:hover { transform:translateY(-2px); color:white; }
.social-btn.fb:hover { background:#1877f2; border-color:#1877f2; }
.social-btn.ig:hover { background:linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-color:transparent; }
.social-btn.li:hover { background:#0077b5; border-color:#0077b5; }
.social-btn.yt:hover { background:#ff0000; border-color:#ff0000; }
.social-btn.wa:hover { background:#25D366; border-color:#25D366; }

.footer-heading {
  font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:2px; margin-bottom:20px; color:white; position:relative;
}
.footer-heading span { position:relative; }
.footer-heading span::after {
  content:''; position:absolute; bottom:-6px; left:0;
  width:28px; height:2px; background:var(--accent);
}
.footer-links-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-links-col ul li a {
  display:flex; align-items:center; gap:8px;
  color:rgba(255,255,255,0.65); font-size:14px; transition:all 0.2s;
}
.footer-links-col ul li a:hover { color:var(--accent2); padding-left:4px; }
.footer-links-col ul li a i { font-size:10px; color:var(--accent); }

.footer-contact-list { display:flex; flex-direction:column; gap:14px; }
.footer-contact-item {
  display:flex; align-items:flex-start; gap:12px;
  font-size:14px; color:rgba(255,255,255,0.65);
}
.footer-contact-item i { color:var(--accent2); width:16px; flex-shrink:0; margin-top:2px; }
.footer-contact-item a { color:rgba(255,255,255,0.65); transition:color 0.2s; }
.footer-contact-item a:hover { color:var(--accent2); }

.btn-footer-cta {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; background:var(--accent);
  border-radius:10px; color:white; font-size:14px; font-weight:600;
  transition:all 0.2s;
}
.btn-footer-cta:hover { background:#d44e1a; transform:translateY(-2px); }

.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.08);
  padding:22px 0;
}
.footer-bottom-inner {
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:rgba(255,255,255,0.5);
}
.footer-bottom-links { display:flex; gap:20px; }
.footer-bottom-links a { color:rgba(255,255,255,0.5); transition:color 0.2s; }
.footer-bottom-links a:hover { color:var(--accent2); }

/* ============================================================
   FLOATING BUTTONS
   ============================================================ */
.whatsapp-float {
  position:fixed; bottom:28px; left:28px; z-index:1000;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:white; font-size:26px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(37,211,102,0.4);
  transition:all 0.3s;
}
.whatsapp-float:hover { transform:scale(1.12); box-shadow:0 10px 28px rgba(37,211,102,0.5); }

.scroll-top {
  position:fixed; bottom:28px; right:28px; z-index:1000;
  width:44px; height:44px; border-radius:50%;
  background:var(--primary); color:white; font-size:16px;
  border:none; cursor:pointer; box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:all 0.3s; transform:translateY(10px);
}
.scroll-top.visible { opacity:1; transform:translateY(0); }
.scroll-top:hover { background:var(--accent); transform:translateY(-2px); }

/* ============================================================
   ADMIN STYLES
   ============================================================ */
.admin-tag {
  padding:3px 10px; border-radius:5px; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.5px; display:inline-flex;
}
.tag-green { background:#dcfce7; color:#166534; }
.tag-red { background:#fee2e2; color:#991b1b; }
.tag-blue { background:#dbeafe; color:#1e40af; }
.tag-orange { background:#fef3c7; color:#92400e; }
.tag-purple { background:#f3e8ff; color:#7e22ce; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1200px) {
  .nav-top-bar { display:none; }
  .hero-slider, .page-hero { margin-top:70px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .features-grid { grid-template-columns:1fr 1fr; }
  .testimonials-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px; }
  .contact-grid { grid-template-columns:1fr; }
  .profile-layout { grid-template-columns:1fr; }
  .profile-sidebar { position:static; }
}
@media(max-width:900px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .nav-actions .btn-nav-login { display:none; }
  .search-grid { grid-template-columns:1fr 1fr; }
  .search-grid > button { grid-column:1/-1; }
  .props-grid { grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); }
}
@media(max-width:640px) {
  .container { padding:0 20px; }
  .section { padding:50px 0; }
  .search-grid { grid-template-columns:1fr; }
  .form-grid, .form-row { grid-template-columns:1fr; }
  .features-grid, .testimonials-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .slide-content { padding:0 24px; }
  .hero-slider { height:70vh; }
  .footer-bottom-inner { flex-direction:column; gap:12px; text-align:center; }
  .search-box-wrap { margin-top:-40px; padding:20px; }
}

/* Mobile Nav Menu */
.nav-mobile {
  display:none; position:fixed; top:70px; left:0; right:0;
  background:white; box-shadow:var(--shadow-lg);
  padding:16px; z-index:999; border-top:3px solid var(--primary);
  flex-direction:column; gap:4px;
}
.nav-mobile.open { display:flex; }
.nav-mobile a {
  padding:12px 16px; border-radius:8px; font-size:14px; font-weight:600;
  color:var(--text-mid); display:flex; align-items:center; gap:10px;
  transition:all 0.2s;
}
.nav-mobile a:hover, .nav-mobile a.active { background:rgba(26,60,110,0.07); color:var(--primary); }

.auth-modal-logo{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo-icon.small{
    width:100%;
    height:50px;
    border-radius:10px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
}

.logo-icon.small img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.auth-modal-logo span{
    font-size:20px;
    font-weight:700;
    color:#111;
}

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

.admin-logo{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.admin-logo-icon{
    width:70px;
    height:70px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.admin-logo-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.admin-logo-sub{
    font-size:16px;
    font-weight:700;
    color:#fff;
    text-align:center;
    line-height:1.2;
}

.sidebar-toggle-btn{
    width:40px;
    height:40px;
    border:none;
    border-radius:10px;
    background:rgba(255,255,255,0.1);
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.3s;
}

.sidebar-toggle-btn:hover{
    background:rgba(255,255,255,0.2);
}

/* ===== FIXED BLINK POPUP ===== */
.side-popup{
    position:absolute; /* FIXED SAME PLACE */
    right:0;
    top:10%;

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

    padding:16px 28px;

    background:linear-gradient(135deg,#0f172a,#1e3a5f,#64748b);

    color:#ffffff;
    font-size:18px;
    font-weight:700;
    text-decoration:none;

    border-left:4px solid #cbd5e1;
    border-radius:60px 0 0 60px;

    z-index:1;
    overflow:hidden;

    transition:0.3s ease;

    /* ONLY GLOW BLINK */
    animation:popupGlow 1.5s infinite;
}

/* SHINE EFFECT */
.side-popup::before{
    content:'';
    position:absolute;
    top:0;
    left:-120%;
    width:100%;
    height:100%;

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

    transform:skewX(-25deg);

    animation:shine 2.5s infinite;
}

/* ICON */
.side-popup i{
    font-size:20px;
    color:#e2e8f0;

    animation:blinkIcon 1s infinite;
}

/* HOVER */
.side-popup:hover{
    color:#fff;

    box-shadow:0 15px 45px rgba(30,58,95,0.65);

    animation-play-state:paused;
}

/* STOP ANIMATION */
.side-popup:hover::before{
    animation-play-state:paused;
}

.side-popup:hover i{
    animation-play-state:paused;
}

/* GLOW BLINK */
@keyframes popupGlow{

    0%{
        box-shadow:0 0 10px rgba(100,116,139,0.5);
    }

    50%{
        box-shadow:0 0 28px rgba(203,213,225,0.9);
    }

    100%{
        box-shadow:0 0 10px rgba(100,116,139,0.5);
    }
}

/* SHINE */
@keyframes shine{

    0%{
        left:-120%;
    }

    100%{
        left:150%;
    }
}

/* ICON BLINK */
@keyframes blinkIcon{

    0%{
        color:#ffffff;
    }

    50%{
        color:#cbd5e1;
    }

    100%{
        color:#ffffff;
    }
}

/* MOBILE */
@media(max-width:768px){

    .side-popup{
        font-size:14px;
        padding:12px 18px;
        max-width:280px;
        top:5%;
    }

}


/* startnew===== DISCOUNT MARQUEE ===== */
.discount-marquee{
    width:100%;
    overflow:hidden;

    background:linear-gradient(90deg,#0f172a,#1e3a5f,#64748b);

    padding:14px 0;

    border-top:2px solid rgba(255,255,255,0.1);
    border-bottom:2px solid rgba(255,255,255,0.1);

    position:relative;
}

.discount-marquee a{
    text-decoration:none;
    display:block;
    white-space:nowrap;
}

.discount-marquee span{
    display:inline-block;

    color:#ffffff;
    font-size:18px;
    font-weight:700;
    letter-spacing:0.5px;

    padding-left:100%;

    animation:marqueeMove 18s linear infinite;
}

/* HOVER PE STOP */
.discount-marquee:hover span{
    animation-play-state:paused;
    color:#e2e8f0;
}

/* MARQUEE ANIMATION */
@keyframes marqueeMove{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-100%);
    }
}

/* MOBILE */
@media(max-width:768px){

    .discount-marquee span{
        font-size:14px;
    }

}