:root{
  --bg: #0b0f19;
  --surface: #0f1525;
  --muted: #9aa3b2;
  --text: #e6e9ef;
  --primary: #6ee7ff;
  --primary-2: #a78bfa;
  --accent: #22d3ee;
  --card: #101828;
  --ring: rgba(110,231,255,.25);
  --success: #34d399;
  --warning: #f59e0b;
  --danger: #f87171;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(110,231,255,.06), transparent),
              radial-gradient(800px 600px at 90% 110%, rgba(167,139,250,.06), transparent),
              var(--bg);
  color: var(--text);
  line-height: 1.6;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1100px, 92%);margin-inline:auto}
.section-head{margin-bottom: 1.2rem}
.section-head h2{font-size: clamp(1.6rem, 3vw, 2rem);margin:0 0 .2rem}
.section-head p{margin:0}

.site-header{
  position: sticky; top:0; z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(11,15,25,.6); border-bottom: 1px solid rgba(255,255,255,.06);
}
.site-header .nav{display:flex;align-items:center;gap:1rem; padding: .75rem 0;}
.brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: 1.5rem; /* increase this value as needed */
}

.brand .logo{width:40px;height:40px}
.main-nav{display:flex;gap:1rem;margin-left:auto}
.main-nav a{opacity:.9}
.cta{margin-left:.5rem}
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.4rem}
@media (max-width: 860px){
  .main-nav{display:none}
  .nav-toggle{display:block;margin-left:auto}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1rem;border-radius: var(--radius); border:1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow); font-weight:600; cursor:pointer
}
.btn.small{padding:.55rem .8rem;font-size:.9rem}
.btn.block{display:flex;width:100%}
.btn-primary{background: linear-gradient(90deg, var(--primary), var(--primary-2)); color:#0b0f19; border-color: transparent}
.btn-pr{background: linear-gradient(90deg, var(--primary), var(--primary-2)); color:#0b0f19; border-color: transparent}
.btn-outline{background: transparent; border-color: rgba(255,255,255,.25)}
.btn-ghost{background: rgba(255,255,255,.06)}
.form-btn {
  text-align: center; /* centers button */
  margin-top: 15px;
}

.muted{color: var(--muted)}
.tiny{font-size:.85rem}
.eyebrow{font-size:.9rem;color:var(--accent);font-weight:700;letter-spacing:.04em;text-transform:uppercase}

.hero{padding: 3rem 0 1rem;border-bottom:1px solid rgba(255,255,255,.06)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center}
.hero h1{font-size: clamp(2rem, 5vw, 3rem); line-height:1.15; margin: .3rem 0 1rem}
.hero .gradient{background: linear-gradient(90deg, var(--primary), var(--primary-2)); -webkit-background-clip:text; background-clip:text; color: transparent}
.hero-card .card{padding:1.2rem;border-radius: var(--radius); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1)}
.checklist{list-style:none;margin:.8rem 0 1rem;padding-left:0}
.checklist li{position:relative;padding-left:1.4rem;margin:.2rem 0}
.checklist li:before{content:"✓";position:absolute;left:0;top:0;color:var(--success);font-weight:800}

.trust{display:flex;gap:.6rem;opacity:.85;margin-top:1rem;flex-wrap:wrap }
.media-section {
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.media-section .container {
  display: flex;
  gap: 20px;
}

.media-item {
  flex: 1; /* makes each take 50% width */
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-item img,
.media-item video {
  width: 100%;
  height: 300px; /* adjust as needed */
  object-fit: cover;
  border-radius: 8px; /* optional */
}
.highlights {
  padding: 2rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* News ticker container */
.news-ticker {
  overflow: hidden;
  white-space: nowrap;
  background: rgba(110,231,255,.1);
  border: 1px solid rgba(21, 21, 21, 0.3);
  border-radius: 8px;
  color: var(--primary);
  font-weight: 600;
  padding: 0.6rem 0;
  margin-bottom: 1rem;
  position: relative;
}

/* Animate ticker content */
.news-ticker span {
  display: inline-block;
  padding-right: 2rem;
  animation: ticker 25s linear infinite;
}

/* Keyframes for scrolling effect */
@keyframes ticker {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.about-highlight {
  padding: 2rem 0;
  background: rgba(255, 255, 255, 0.03); /* subtle lighter background */
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Make heading color same as hero section's gradient */
.about-highlight h2 {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1rem;
  line-height: 1.3;
}

/* Paragraph styling */
.about-highlight p {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.6;
}

.image-text-section {
  padding: 2rem 0;
  background-color: rgba(255, 255, 255, 0.03); /* Light gray background (change if needed) */
  border-radius: 8px; /* Optional: rounded corners for a cleaner look */
}


.image-text-section .container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

/* Left column (images) */
.image-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.image-column .top-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
}

.bottom-images {
  display: flex;
  gap: 1rem;
}

.bottom-images img {
  flex: 1;
  width:50%;
  height: 190px;
  object-fit: cover;
  border-radius: 8px;
}

/* Right column (text) */
.text-column {
  flex: 1;
}

.text-column h2 {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1rem;
}

.text-column p {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.6;
}
.center-button {
  text-align: center;
  margin: 2rem 0;
}

.center-button .btn{background: linear-gradient(90deg, var(--primary), var(--primary-2)); color:#0b0f19; border-color: transparent}
  


.center-button .btn:hover {
  background-color: #062047; /* darker shade on hover */
}
.about-nexora {
  background-color: rgba(255, 255, 255, 0.03); /* dark gray */
  color: #fff;
  padding: 3rem 1rem;
}

.about-nexora h2 {
  text-align: center;
  color: var(--primary);
  font-size: 2rem;
  margin-bottom: 1rem;
}
.about-item h3 {
  font-size: 1.25rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
  transition: transform 0.3s ease, color 0.3s ease;
  display: inline-block;
}

.about-nexora .about-item h3:hover {
  transform: translateY(-5px) scale(1.05);
  color: #fff; /* changes color on hover */
}

.media-showcase {
  background-color: rgba(255, 255, 255, 0.03); /* slightly different dark tone */
  padding: 3rem 1rem;
  color: #fff;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  align-items: center;
}

.media-video video {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.media-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
}

.media-images img:first-child {
  grid-column: span 2; /* top image full width */
}

.media-images img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

.media-images img:hover {
  transform: scale(1.05);
}




.row{display:flex;gap:2.2rem}
.wrap{flex-wrap:wrap}
.center{justify-content:center;align-items:center}
.card-img {
  width: 20%;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem;
}

/* Centered oval button */
.link-arrow {
  display: inline-block;
  margin-top: 1rem;
  margin-left: 5rem;
  padding: 0.6rem 1.8rem;
  background: linear-gradient(90deg, #0a2463, #5c67f2);
  color: #fff;
  border-radius: 999px; /* Makes it oval */
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition:  0.3s ease, transform 0.3s ease;
}

.link-arrow:hover {
  background: linear-gradient(90deg, #5c67f2, #0a2463);
  transform: scale(1.05);
}
.cards{gap:1rem}
.card{padding:1rem;border-radius:var(--radius);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08)}
.card.link{transition: transform .2s ease, border-color .2s ease}
.card.link:hover{transform: translateY(-2px); border-color: rgba(110,231,255,.5)}
.tag{display:inline-block;font-size:.75rem;padding:.22rem .48rem;border-radius:999px;background:rgba(110,231,255,.15);border:1px solid rgba(110,231,255,.4); margin-bottom:.6rem; color: var(--primary)}

.services{padding:2.5rem 0;background:rgba(255, 255, 255, 0.03)}
.services p{
  font-size: 1rem;
  color: var(--text);
  line-height: 1.6;
}
.services h2 {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1rem;
  text-align: center;
}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}

.link{color: var(--text)}
.link-arrow{display:inline-block;margin-top:.4rem;opacity:.8}
.process{padding:2.5rem 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.steps .step{padding:1rem;border-radius:var(--radius);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.steps .num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;background:rgba(167,139,250,.2);border:1px solid rgba(167,139,250,.5); color:#fff; font-weight:800; margin-bottom:.4rem}

.case-studies{padding:2.5rem 0}
/*.testimonials{padding:2.5rem 0;border-top:1px solid rgba(255,255,255,.06)}*/
.slider{display:grid;grid-auto-flow:column;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory}
.slide{scroll-snap-align:start;min-width:300px;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:1rem;background:rgba(255,255,255,.04)}
.quote{font-size:1.05rem;font-weight:600}
.testimonials {
  background-color:rgba(255, 255, 255, 0.03);
  padding: 4rem 1rem;
  overflow: hidden;
}

.section-head h2 {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1rem;
  line-height: 1.3;
}
.section-head {
  text-align: center;
  margin-bottom: 2rem;
}

.marquee-track {
  display: flex;
  gap: 2rem;
  animation: scroll 30s linear infinite;
}
.reviews-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex;
  gap: 2rem;
  animation: scroll 30s linear infinite;
  align-items: flex-start; /* ensures top alignment */
}

.review-card {
  width: 280px; /* fixed width */
  background:rgba(255, 255, 255, 0.03) ;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  text-align: center;
  flex-shrink: 0; /* prevents shrinking */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.review-card p {
  font-style: italic;
  color: white;
  line-height: 1.4;
}

.review-card span {
  display: block;
  margin-top: 0.8rem;
  font-weight: bold;
  color: #555;
}





@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.cta{padding:2.4rem 0}
.cta-inner{display:grid;place-items:center;text-align:center;gap:.6rem;border-radius:var(--radius);
  background: radial-gradient(900px 400px at 10% 10%, rgba(110,231,255,.08), transparent),
              radial-gradient(800px 400px at 90% 90%, rgba(167,139,250,.08), transparent),
              linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); padding:2rem
}

.page-hero{padding:2rem 0;border-bottom:1px solid rgba(255,255,255,.06)}
.service-sections{padding:1.8rem 0}
.service-block{padding:1rem;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);background:rgba(255,255,255,.03);margin: 0 0 1rem}
.bullets{padding-left:1.1rem}

.two-col{display:grid;grid-template-columns:1.2fr .8fr; gap:1rem; align-items:start; margin:2rem auto}
.accordion details{border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:.8rem;background:rgba(255,255,255,.03);margin:.6rem 0}
.accordion summary{cursor:pointer}

.contact-grid{display:grid;grid-template-columns:1.1fr .9fr; gap:1rem; margin:2rem auto}
.field{display:grid;gap:.25rem}
input, textarea, select{
  background:#0b1324;color:var(--text);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:.8rem; outline:none; box-shadow: 0 0 0 0 var(--ring);
}
input:focus, textarea:focus, select:focus{border-color:var(--accent); box-shadow: 0 0 0 6px var(--ring)}
.map-placeholder .map{height:200px;border-radius:12px;border:1px dashed rgba(255,255,255,.2);display:grid;place-items:center;color:var(--muted)}

.site-footer{padding:2rem 0;border-top:1px solid rgba(255,255,255,.06); margin-top:2rem; background: rgba(255,255,255,.02)}
.site-footer .grid-3{display:grid;grid-template-columns:1.1fr .9fr .9fr; gap:1rem}
.brand-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.brand-text{font-size:1.1rem;font-weight:800}
.socials{display:flex;gap:.6rem;margin:.6rem 0}
.socials a{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.2)}

.list{list-style:none;padding-left:0;margin:.2rem 0}
.list li{margin:.2rem 0}


.ready-section {
  background: rgba(255, 255, 255, 0.01); /* Dark gray */
  color: #fff;
  padding: 60px 20px;
}

.ready-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.left-content h2 {
  font-size: 32px;
  margin-bottom: 15px;
  color: var(--primary);
}

.left-content p {
  color: #d1d5db;
  margin-bottom: 20px;
}

.images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.images img {
  width: 100%;
  border-radius: 10px;
}

.faqs .faq {
  background: #374151;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
}

.faqs .faq h4 {
  margin: 0;
  font-size: 18px;
}

.faqs .faq p {
  margin-top: 10px;
  display: none;
  color: #d1d5db;
}

.form-container {
  background: #fff;
  color: #111;
  padding: 30px;
  border-radius: 10px;
}

.form-container h3 {
  margin-bottom: 20px;
  font-size: 24px;
}

.form-container input,
.form-container textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.form-container button {
  width: 100%;
  padding: 12px;
  background:linear-gradient(90deg, var(--primary), var(--primary-2));
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.form-container button:hover {
  background: #4338ca;
}

.hidden {
  display: none;
}

.our-team {
  margin-top: 25px;
  padding: 15px;
  background:rgba(255, 255, 255, 0.03);  /* light background to separate it */
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: #444;
}

.our-team h3 {
  margin-bottom: 10px;
  font-size: 40px;
  color: #0a2463;
}
.about-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background: linear-gradient(90deg, #0a2463, #3f72af);
  color: #fff;
  text-decoration: none;
  border-radius: 25px;
  font-size: 14px;
  transition: all 0.3s ease;
  
  
}

.about-btn:hover {
  background: linear-gradient(90deg, #3f72af, #0a2463);
  transform: translateY(-2px);
}


.our-team .team-image {
  margin-top: 20px;
}

.our-team .team-image img {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
}


/* Dropdown specific styles */
  .nav-item-with-dropdown {
    position: relative;
  }
  
  .nav-item-with-dropdown > a {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .dropdown-arrow {
    font-size: 12px;
    transition: transform 0.3s ease;
  }
  
  .nav-item-with-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
  }
  
  .nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 1rem;
    min-width: 220px;
    z-index: 1000;
    margin-top: 10px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  .nav-item-with-dropdown:hover .nav-dropdown {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }
  
  .nav-dropdown a {
    display: block;
    padding: 0.6rem 1rem;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s ease;
    font-size: 1rem;
  }
  
  .nav-dropdown a:hover {
    background: #f5f5f5;
  }
  
  /* Mobile dropdown adjustments */
  @media (max-width: 768px) {
    .nav-item-with-dropdown {
      width: 100%;
    }
    
    .nav-dropdown {
      position: static;
      box-shadow: none;
      margin-top: 0;
      padding: 0.5rem 0 0.5rem 2rem;
      display: none;
      opacity: 1;
      transform: none;
    }
    
    .nav-item-with-dropdown.active .nav-dropdown {
      display: block;
    }
    
    .nav-item-with-dropdown.active .dropdown-arrow {
      transform: rotate(180deg);
    }
  }

 
/* ======================================================
   RESPONSIVE ENHANCEMENTS — Mobile First
   ====================================================== */

/* Ensure nav toggle works */
.nav-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.6rem; cursor: pointer; margin-left: auto; }

@media (max-width: 860px) {
  .nav-toggle { display: block !important; }
  .cta.small  { display: none; }
  .main-nav {
    display: none;
    flex-direction: column !important;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: rgba(11,15,25,.97);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    z-index: 999;
    gap: .5rem !important;
  }
  .main-nav.open { display: flex !important; }
  .hero-card { display: none; }
  .hero-grid  { grid-template-columns: 1fr !important; }
  .grid-3     { grid-template-columns: 1fr !important; }
  .grid-4     { grid-template-columns: repeat(2,1fr) !important; }
  .grid-2     { grid-template-columns: 1fr !important; }
  .two-col    { grid-template-columns: 1fr !important; }
  .contact-grid { grid-template-columns: 1fr !important; margin: 1rem auto; }
  .ready-section .container { grid-template-columns: 1fr !important; }
  .media-section .container { flex-direction: column !important; }
  .media-grid  { grid-template-columns: 1fr !important; }
  .image-text-section .container { flex-direction: column !important; }
  .site-footer .grid-3 { grid-template-columns: 1fr !important; }
  .image-column, .text-column { width: 100% !important; }
  .bottom-images { flex-direction: column !important; }
  .bottom-images img { width: 100% !important; height: 160px !important; }
  .page-hero h1 { font-size: 2rem !important; }
  .page-hero p  { padding-left: 1rem !important; padding-right: 1rem !important; font-size: 1rem !important; }
  .images { grid-template-columns: 1fr !important; }
  .media-images { grid-template-columns: 1fr !important; }
  .media-images img:first-child { grid-column: span 1 !important; }
  .dev-services { grid-template-columns: 1fr !important; }
  .portfolio-gallery { grid-template-columns: 1fr !important; }
  .actions { flex-wrap: wrap; }
  .actions .btn { flex: 1 1 160px; text-align: center; justify-content: center; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 1.7rem !important; }
  .section-head h2 { font-size: 1.4rem !important; }
  .brand span { font-size: 1.1rem !important; }
  .grid-4 { grid-template-columns: 1fr !important; }
  .review-card { width: 220px !important; }
  .link-arrow { margin-left: 0 !important; display: block; text-align: center; }
  .cta-inner h2 { font-size: 1.8rem !important; }
  .news-ticker span { animation: ticker 15s linear infinite !important; }
  .form-container { padding: 20px !important; }
  .about-nexora .about-grid { grid-template-columns: 1fr; }
  .media-item img, .media-item video { height: 200px !important; }
  .hero-text h1 { font-size: 1.5rem !important; }
  body { font-size: .97rem; }
}

/* Fix ticker on small screens */
@media (max-width: 600px) {
  .news-ticker { font-size: .85rem; }
  .about-nexora { padding: 2rem .5rem; }
}

/* Smooth transitions */
.main-nav a { transition: color .2s ease; }
.main-nav a:hover { color: var(--primary); }
.btn { transition: opacity .2s ease, transform .2s ease; }
.btn:hover { opacity: .88; transform: translateY(-1px); }

/* ============================================================
   NEXORA V2 — LOGO, ANIMATIONS, BOOKING MODAL
   ============================================================ */

/* ---- LOGO ---- */
.logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 8px rgba(110,231,255,0.35));
  transition: filter 0.3s ease, transform 0.3s ease;
}
.logo-img:hover { filter: drop-shadow(0 0 16px rgba(110,231,255,0.7)); transform: scale(1.05); }
.footer-logo { height: 52px; margin-bottom: .6rem; }
.brand { display:flex; align-items:center; }
/* Remove old .brand span since we use image-only logo */
.brand span { display:none; }
.brand-text { display:none; }

/* ---- SCROLL ANIMATIONS ---- */
.nx-animate {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(.4,0,.2,1), transform 0.6s cubic-bezier(.4,0,.2,1);
}
.nx-animate.nx-visible {
  opacity: 1;
  transform: translateY(0);
}
.card.nx-animate { transition-delay: calc(var(--i,0) * 80ms); }
.step.nx-animate { transition-delay: calc(var(--i,0) * 100ms); }
/* Stagger children */
.grid-3 .card:nth-child(1) { --i:1; }
.grid-3 .card:nth-child(2) { --i:2; }
.grid-3 .card:nth-child(3) { --i:3; }
.grid-3 .card:nth-child(4) { --i:4; }
.grid-3 .card:nth-child(5) { --i:5; }
.grid-3 .card:nth-child(6) { --i:6; }
.grid-4 .step:nth-child(1) { --i:1; }
.grid-4 .step:nth-child(2) { --i:2; }
.grid-4 .step:nth-child(3) { --i:3; }
.grid-4 .step:nth-child(4) { --i:4; }

/* Hero text fly-in */
.hero-text h1 { animation: heroIn 0.9s cubic-bezier(.4,0,.2,1) both; }
.hero-text p  { animation: heroIn 1.1s cubic-bezier(.4,0,.2,1) both; }
.hero-text .actions { animation: heroIn 1.3s cubic-bezier(.4,0,.2,1) both; }
@keyframes heroIn {
  from { opacity:0; transform: translateY(32px); }
  to   { opacity:1; transform: translateY(0); }
}

/* Glowing gradient text pulse */
.gradient {
  background: linear-gradient(90deg, var(--primary), var(--primary-2), #a78bfa, var(--primary));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 4s ease infinite;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Card hover glow */
.card.link:hover {
  border-color: rgba(110,231,255,.6);
  box-shadow: 0 8px 32px rgba(110,231,255,.15);
  transform: translateY(-5px);
}
.card {
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

/* Section fade-up on scroll for non-card elements */
.section-head, .about-item, .process .step, .review-card {
  transition: opacity 0.55s ease, transform 0.55s ease;
}

/* CTA section pulse ring */
.cta-inner {
  position: relative;
  overflow: hidden;
}
.cta-inner::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--primary-2), var(--primary));
  background-size: 200% 200%;
  animation: borderGlow 3s linear infinite;
  z-index: -1;
  opacity: .5;
}
@keyframes borderGlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Stats ticker enhanced */
.news-ticker {
  background: linear-gradient(90deg, rgba(110,231,255,.08), rgba(167,139,250,.08));
  border: 1px solid rgba(110,231,255,.25);
}

/* Nav link hover underline */
.main-nav > a, .main-nav .nav-item-with-dropdown > a {
  position: relative;
}
.main-nav > a::after, .main-nav .nav-item-with-dropdown > a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  transform: scaleX(0);
  transition: transform 0.25s ease;
  border-radius: 2px;
}
.main-nav > a:hover::after, .main-nav .nav-item-with-dropdown > a:hover::after { transform: scaleX(1); }

/* Floating particles bg on hero */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110,231,255,.06) 0%, transparent 70%);
  top: -200px; right: -150px;
  animation: floatBlob 8s ease-in-out infinite;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,.07) 0%, transparent 70%);
  bottom: -100px; left: -100px;
  animation: floatBlob 10s ease-in-out infinite reverse;
  pointer-events: none;
}
@keyframes floatBlob {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(20px,-30px) scale(1.05); }
  66%      { transform: translate(-15px,20px) scale(0.97); }
}

/* Button shimmer effect */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: skewX(-20deg);
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { left: -100%; }
  60%,100% { left: 150%; }
}

/* FAQ enhanced */
.faq {
  transition: background 0.25s ease;
  border-left: 3px solid transparent;
}
.faq:hover { background: #3f4a5a !important; }
.faq-open {
  border-left: 3px solid var(--primary) !important;
  background: #2d3748 !important;
}
.faq h4::before { content: '+ '; color: var(--primary); font-weight:800; }
.faq-open h4::before { content: '− '; }

/* ============================================================
   BOOKING MODAL
   ============================================================ */
.booking-modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  padding: 1rem;
}
.booking-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
}
.booking-box {
  position: relative;
  background: #0f1525;
  border: 1px solid rgba(110,231,255,.25);
  border-radius: 20px;
  padding: 2rem;
  width: 100%; max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 60px rgba(110,231,255,.08);
  animation: modalIn .35s cubic-bezier(.4,0,.2,1) both;
  z-index: 1;
}
@keyframes modalIn {
  from { opacity:0; transform: scale(.92) translateY(20px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}
.booking-close {
  position: absolute; top:14px; right:16px;
  background: rgba(255,255,255,.08); border: none;
  color: #fff; font-size:1.1rem; width:32px; height:32px;
  border-radius: 50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background .2s;
}
.booking-close:hover { background: rgba(255,255,255,.2); }
.booking-title { font-size:1.6rem; font-weight:800; margin:0 0 .3rem; color:var(--text); }
.booking-sub { color:var(--muted); margin:0 0 1.2rem; font-size:.95rem; }

/* Calendar */
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
.cal-header button { background:rgba(255,255,255,.08); border:none; color:#fff; width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:1.2rem; transition:background .2s; }
.cal-header button:hover { background:rgba(110,231,255,.2); }
.cal-header span { font-weight:700; font-size:1rem; }
.cal-weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.cal-weekdays span { text-align:center; font-size:.75rem; color:var(--muted); padding:.3rem 0; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-day { text-align:center; padding:.5rem .2rem; border-radius:8px; font-size:.9rem; cursor:pointer; transition:background .18s, color .18s; }
.cal-day:not(.cal-disabled):hover { background:rgba(110,231,255,.18); color:var(--primary); }
.cal-selected { background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important; color:#0b0f19 !important; font-weight:800; }
.cal-disabled { color:rgba(255,255,255,.22); cursor:default; }

/* Time slots */
.time-label { font-size:.85rem; color:var(--muted); margin:1rem 0 .5rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.time-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.time-btn { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:var(--text); padding:.6rem .4rem; border-radius:10px; cursor:pointer; font-size:.88rem; transition:all .2s; }
.time-btn:hover { background:rgba(110,231,255,.15); border-color:var(--primary); color:var(--primary); }
.time-selected { background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important; color:#0b0f19 !important; border-color:transparent !important; font-weight:700; }

/* Booking step 2 fields */
.booking-fields { display:flex; flex-direction:column; gap:.9rem; }
.bfield label { display:block; font-size:.85rem; color:var(--muted); margin-bottom:.3rem; font-weight:600; }
.bfield input, .bfield select {
  width:100%; background:#0b1324; color:var(--text); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:.75rem 1rem; font-size:.95rem;
  transition: border-color .2s, box-shadow .2s;
}
.bfield input:focus, .bfield select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(110,231,255,.15); }
.booking-next { width:100%; margin-top:1rem; padding:.85rem; font-size:1rem; border:none; cursor:pointer; }
.booking-next:disabled { opacity:.4; cursor:not-allowed; }

/* Step 3 success */
.booking-success { text-align:center; padding:1rem 0; }
.success-icon { font-size:3.5rem; margin-bottom:.8rem; animation: popIn .5s cubic-bezier(.4,0,.2,1) both; }
@keyframes popIn { from{transform:scale(0)} to{transform:scale(1)} }
.booking-success h2 { font-size:1.8rem; margin:0 0 .5rem; }
.booking-success p { color:var(--text); font-size:1rem; }

/* ---- RESPONSIVE UPDATES ---- */
@media (max-width: 860px) {
  .logo-img { height: 42px; }
  .main-nav {
    display: none !important;
    flex-direction: column !important;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(11,15,25,.98);
    padding: 1rem 1.5rem; border-bottom:1px solid rgba(255,255,255,.08); z-index:999;
  }
  .main-nav.open { display: flex !important; }
  .booking-box { padding: 1.4rem; }
  .time-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:480px) {
  .logo-img { height: 36px; }
  .booking-title { font-size:1.3rem; }
  .time-grid { grid-template-columns: repeat(2,1fr); }
  .cal-day { font-size:.8rem; padding:.4rem .1rem; }
}
/* Booking textarea focus */
#bDesc:focus { outline:none; border-color:var(--primary) !important; box-shadow:0 0 0 3px rgba(110,231,255,.15) !important; }


/* ── Global smooth scroll ── */
html { scroll-behavior: smooth; }

/* ── WhatsApp nav button ── */
.btn-whatsapp {
  background: #25D366 !important;
  color: #fff !important;
  border: none !important;
}
.btn-whatsapp:hover { background: #128C7E !important; }

/* ── Mobile nav open state ── */
@media (max-width: 900px) {
  .main-nav { display: none; flex-direction: column; }
  .main-nav.open { display: flex !important; }
  .nav-item-with-dropdown .nav-dropdown { position: static; display: none; box-shadow: none; }
  .nav-item-with-dropdown.active .nav-dropdown { display: flex; flex-direction: column; }
}

/* ============================================================
   NEXORA V3 — ADVANCED DESIGN UPGRADE
   ============================================================ */

/* Force smooth scroll via JS (see main.js) — keep this too */
html { scroll-behavior: smooth; }

/* ── Hero Particles ── */
.hero-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--primary);
  pointer-events: none;
  animation: particleFloat linear infinite;
  z-index: 0;
}
@keyframes particleFloat {
  0%,100% { transform: translateY(0) scale(1); opacity:.3; }
  50%      { transform: translateY(-40px) scale(1.3); opacity:.7; }
}
.hero .container { position: relative; z-index: 1; }

/* ── Stats Bar ── */
.stats-bar {
  display: flex;
  justify-content: center;
  gap: 3rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  flex-wrap: wrap;
}
.stat-item {
  text-align: center;
}
.stat-num {
  display: block;
  font-size: 2.4rem;
  font-weight: 900;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}
.stat-label {
  font-size: .82rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  margin-top: .25rem;
}

/* ── Advanced Card Glassmorphism ── */
.card {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.09);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.card.link:hover {
  transform: translateY(-6px);
  border-color: rgba(110,231,255,.5);
  box-shadow: 0 12px 40px rgba(110,231,255,.12);
}

/* ── Service Card Icon Upgrade ── */
.services .card i {
  font-size: 1.6rem !important;
  background: linear-gradient(135deg, rgba(110,231,255,.15), rgba(167,139,250,.15)) !important;
  border: 1px solid rgba(110,231,255,.2) !important;
}
.services .card:hover i {
  background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
  color: #0b0f19 !important;
  box-shadow: 0 0 20px rgba(110,231,255,.4) !important;
}

/* ── Form Upgrade ── */
.form-container {
  background: rgba(15,21,37,.9) !important;
  color: var(--text) !important;
  border: 1px solid rgba(110,231,255,.15) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.4) !important;
}
.form-container h3 { color: var(--primary) !important; font-size: 1.5rem !important; }
.form-container input,
.form-container textarea {
  background: rgba(11,19,36,.8) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 10px !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.form-container input:focus,
.form-container textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(110,231,255,.15) !important;
  outline: none !important;
}
.form-container input::placeholder,
.form-container textarea::placeholder { color: rgba(154,163,178,.5) !important; }
.form-container button {
  background: linear-gradient(90deg, var(--primary), var(--primary-2)) !important;
  color: #0b0f19 !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  border-radius: 10px !important;
  transition: transform .2s, box-shadow .2s !important;
}
.form-container button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(110,231,255,.35) !important;
  background: linear-gradient(90deg, var(--primary-2), var(--primary)) !important;
}

/* ── Hero CTA Buttons upgrade ── */
.hero .actions { margin-top: 1.4rem; display: flex; gap: .8rem; flex-wrap: wrap; }
.hero .btn-primary {
  font-size: 1.05rem;
  padding: .9rem 2rem;
  box-shadow: 0 0 0 0 rgba(110,231,255,.4);
  animation: ctaPulse 2.5s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(110,231,255,.4); }
  50%      { box-shadow: 0 0 0 12px rgba(110,231,255,.0); }
}

/* ── About Grid Cards ── */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  margin-top: 1.5rem;
}
.about-item {
  padding: 1.5rem;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .25s, border-color .25s, background .25s;
}
.about-item:hover {
  transform: translateY(-4px);
  border-color: rgba(110,231,255,.3);
  background: rgba(110,231,255,.04);
}

/* ── Testimonial cards upgrade ── */
.review-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  padding: 1.4rem !important;
  transition: border-color .25s !important;
}
.review-card:hover { border-color: rgba(110,231,255,.3) !important; }
.review-card p { color: var(--text) !important; }
.review-card span { color: var(--primary) !important; font-size: .85rem !important; }

/* ── CTA Section Upgrade ── */
.cta { padding: 3rem 0; }
.cta-inner {
  background: linear-gradient(135deg,
    rgba(110,231,255,.08) 0%,
    rgba(167,139,250,.1) 50%,
    rgba(110,231,255,.06) 100%) !important;
  border: 1px solid rgba(110,231,255,.2) !important;
  border-radius: 24px !important;
  padding: 3rem 2rem !important;
}
.cta-inner h2 { font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 900; }
.cta-inner p { font-size: 1.1rem; color: var(--muted); }

/* ── Footer upgrade ── */
.site-footer {
  background: linear-gradient(180deg, rgba(11,15,25,0) 0%, rgba(7,10,18,.95) 100%) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.site-footer h4 { color: var(--primary); font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .8rem; }
.socials a {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  transition: background .2s, border-color .2s, transform .2s;
  font-weight: 700;
  font-size: .85rem;
}
.socials a:hover { background: rgba(110,231,255,.15); border-color: var(--primary); transform: translateY(-2px); color: var(--primary); }

/* ── Process Steps Upgrade ── */
.steps .step {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  transition: transform .25s, border-color .25s, background .25s;
  position: relative;
  overflow: hidden;
}
.steps .step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.steps .step:hover::before { transform: scaleX(1); }
.steps .step:hover { transform: translateY(-4px); border-color: rgba(110,231,255,.25); }

/* ── Scroll-to-top button ── */
#scrollTopBtn {
  position: fixed;
  bottom: 130px;
  right: 22px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(110,231,255,.15);
  border: 1px solid rgba(110,231,255,.3);
  color: var(--primary);
  font-size: 1.2rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  transition: background .2s, transform .2s;
  backdrop-filter: blur(10px);
}
#scrollTopBtn.show { display: flex; }
#scrollTopBtn:hover { background: rgba(110,231,255,.3); transform: translateY(-2px); }

/* ── Image hover effects ── */
.media-item img, .bottom-images img, .top-img, .media-images img {
  transition: transform .35s ease, box-shadow .35s ease;
}
.media-item img:hover, .bottom-images img:hover, .top-img:hover, .media-images img:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}

/* ── Nav dropdown dark theme fix ── */
.nav-dropdown {
  background: rgba(11,15,25,.97) !important;
  border: 1px solid rgba(110,231,255,.15) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.5) !important;
  backdrop-filter: blur(20px) !important;
}
.nav-dropdown a {
  color: var(--text) !important;
  border-radius: 8px !important;
  transition: background .2s, color .2s, padding-left .2s !important;
}
.nav-dropdown a:hover {
  background: rgba(110,231,255,.1) !important;
  color: var(--primary) !important;
  padding-left: 1.3rem !important;
}

/* ── Readysection form dark styling ── */
#contactForm {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
#contactForm input, #contactForm textarea {
  background: rgba(11,19,36,.8);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: .85rem 1rem;
  font-size: .95rem;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
#contactForm input::placeholder, #contactForm textarea::placeholder { color: rgba(154,163,178,.5); }
#contactForm input:focus, #contactForm textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(110,231,255,.15);
  outline: none;
}
#contactForm button {
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  color: #0b0f19;
  font-weight: 800;
  border: none;
  border-radius: 10px;
  padding: .9rem;
  cursor: pointer;
  font-size: 1rem;
  transition: transform .2s, box-shadow .2s;
  width: 100%;
}
#contactForm button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(110,231,255,.35);
}

/* ── Hero card glassmorphism ── */
.hero-card .card {
  background: linear-gradient(135deg, rgba(110,231,255,.06), rgba(167,139,250,.06)) !important;
  border: 1px solid rgba(110,231,255,.2) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ── Ticker upgrade ── */
.news-ticker {
  font-size: .9rem;
  padding: .5rem 0 !important;
}

/* ── Gradient badge ── */
.gradient-badge {
  display: inline-block;
  background: linear-gradient(90deg, rgba(110,231,255,.15), rgba(167,139,250,.15));
  border: 1px solid rgba(110,231,255,.3);
  color: var(--primary);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .35rem .9rem;
  border-radius: 999px;
  margin-bottom: .8rem;
  display: inline-block;
}

@media (max-width: 600px) {
  .stats-bar { gap: 1.5rem; padding: 1.5rem 1rem; }
  .stat-num { font-size: 1.8rem; }
  .form-container { padding: 1.2rem !important; }
}