* { margin:0; padding:0; border:0; outline:0; text-decoration:none; list-style:none; box-sizing:border-box; }

:root{
  --dark-color: #100f3e;
  --color-primary: #C6C4F3; /* light violet header background */
  --color-green: #6A1B9A;   /* Verbara violet */
  --color-yellow: #F8E71C;
  --color-orange: #f49000;
  --color-white: #fff;
  --color-text: #333333;
  --color-blue:#2b70c9;

  --color-bg: #F7F7F7;
  --color-bg1: #2e3267;
  --color-bg2: #424890;

  --line: rgba(0,0,0,.08);
  --soft: rgba(0,0,0,.04);

  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --transition: all 400ms ease;
}

body{
  font-family:"Nunito",Arial,sans-serif;
  line-height:1.7;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x:hidden;
  padding-top: 5rem; /* fixed nav height */
}

.container{
  width: min(1180px, 92%);
  margin: 0 auto;
}


   /* ===== NAV ===== */
nav{
  background: transparent;
  width: 100vw;
  height: 5rem;
  position: fixed;
  top: 0;
  z-index: 999;
}

.nav__container{
  height:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    /* Remove underline if needed */
}




nav button {
    display: none;
}

/* menu links */
.nav__menu{
  display:flex;
  align-items:center;
  gap: clamp(0.5rem, 2vw, 4rem);
}

.nav__menu a{
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  transition: var(--transition);
}
/*change navbar styles on scroll using javascript*/
.window-scroll{
  background: var(--color-green);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.2);
}
.window-scroll .nav__menu a{ color: var(--color-bg); }
.window-scroll .nav__menu a:hover{ color: var(--color-primary); }
.window-scroll .nav__menu a.active{
  color: var(--color-green);
  background: #fff;
  border-radius: 10px;
}

/* contact icon rules like main site */
.nav-icon{ transition: filter .3s ease; }
.nav__menu a:hover .nav-icon{
  filter: brightness(0) saturate(100%) invert(39%) sepia(91%)
          saturate(1429%) hue-rotate(99deg) brightness(95%) contrast(98%);
}
.window-scroll .nav__menu a .nav-icon{ filter: invert(1); }

.nav-text{ display:none; margin-left:.35rem; font-weight:600; }

.nav__menu a:hover{ color: var(--color-green); }

.nav__menu a.active{
  color: var(--color-green);
  background: var(--color-bg);
  padding: 6px 6px;
  border-radius: 10px;
}
.nav__menu li a {
    white-space: nowrap;
}



/* ===== Hamburger (mobile) ===== */
.hamburger{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition: var(--transition);
}
.hamburger:hover{ background: rgba(255,255,255,.07); }

.hamburger div{
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,.92);
  border-radius: 2px;
}

.hero{
  background: var(--color-primary);   /* full-width */
  padding: 2.2rem 0;
  margin-top: 0;
}

/* this makes the two columns */
.hero__container{
  display: grid;
  grid-template-columns: 1.5fr 1fr;   /* left bigger, right smaller */
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

/* typography like Verbara */
.hero-left h1{
  margin: 1rem 0;
  font-size: 3.4rem;
  line-height: 1.25;
  color: var(--color-green);
}

.hero-left p{
  margin: 1.2rem 0;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--color-blue);
}

.hero-right{
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-right img{
  width: 100%;
  max-width: 520px;
  height: auto;
  object-fit: contain;
}
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.05);
      color:rgba(255,255,255,.9);
      font-weight:700;
      font-size:14px;
      cursor:pointer;
      transition:.18s ease;
      user-select:none;
    }
    .btn:hover{transform: translateY(-1px); background:rgba(255,255,255,.08)}
    .btn.primary{
      border-color: rgba(106,27,154,.55);
      background: linear-gradient(135deg, rgba(106,27,154,.95), rgba(142,59,197,.95));
      box-shadow: 0 14px 34px rgba(106,27,154,.35);
    }
    .btn.primary:hover{filter:brightness(1.05)}
    .btn.ghost{background:transparent}
    .pill-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
    .pill{
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      color:rgba(255,255,255,.78);
    }

 
    .stat{
      display:flex; align-items:flex-start; justify-content:space-between;
      padding:12px 12px;
      border-radius:14px;
      background: rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
    }
    .stat b{font-size:16px}
    .stat span{color:rgba(255,255,255,.72); font-size:13px}
    .stat small{display:block; color:rgba(255,255,255,.55); margin-top:2px}

  .section{
  margin-top: 22px;
 
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
  padding: 16px;
}
    .section-head{
      display:flex; align-items:center; justify-content:space-between;
      gap:10px; flex-wrap:wrap;
      margin-bottom:12px;
    }
    .section-title{
      display:flex; align-items:center; gap:10px;
    }
  .dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--color-green);
  box-shadow: 0 0 0 4px rgba(106,27,154,.15);
}
    .section h2{
      margin:0;
      font-size:18px;
      letter-spacing:-.2px;
     
  color: var(--color-green);

    }

    /* Filters */
    .filters{
      display:grid;
      grid-template-columns: 1.5fr repeat(4, 1fr);
      gap:10px;
    }
 .field{
  border:1px solid var(--line);
  background: #fff;
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.field input, .field select{
  width:100%;
  background:transparent;
  border:0;
  outline:none;
  color: var(--color-text);
  font-size:14px;
}
.field select option{
  background:#fff;
  color: var(--color-text);
}
    .field select option{
  background: #120A22;          /* dark panel */
  color: rgba(255,255,255,.92); /* light text */
}

    /* Cards */
  .grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
.card{
  border-radius:18px;
  border:1px solid var(--line);
  background:#fff;
  overflow:hidden;
  position:relative;
  transition: var(--transition);
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(106,27,154,.25);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

.card h3{ color: var(--dark-color); }    
.thumb{
  height:152px;
  position:relative;
  overflow:hidden;
}

.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


    .badge-row{
      position:absolute; left:12px; top:12px;
      display:flex; gap:6px; flex-wrap:wrap;
    }
.badge{
  font-size:11px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.88);
  color: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
}

.badge.good{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
}
   .badge.warn{
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.12);
}
.badge.info{
  border-color: rgba(96,165,250,.35);
  background: rgba(96,165,250,.12);
}

    .card-body{padding:12px 12px 14px}
    .card h3{
      margin:4px 0 6px;
      font-size:16px;
      letter-spacing:-.2px;
      line-height:1.25;
    }
    .meta{
      display:flex; gap:10px; flex-wrap:wrap;
  color: rgba(0,0,0,.55);
      font-size:12px;
      margin-bottom:10px;
    }
    .meta span{
      padding:4px 8px;
      border-radius:999px;
        background: rgba(106,27,154,.06);
  border: 1px solid rgba(106,27,154,.12);
  color: rgba(0,0,0,.65);
    }

    .card-footer{
      display:flex; align-items:center; justify-content:space-between;
      gap:10px; flex-wrap:wrap;
      margin-top:10px;
      padding-top:10px;
      border-top:1px solid rgba(255,255,255,.06);
    }
    .price{
      font-weight:900;
      letter-spacing:-.2px;
    }
    .small{
      color:rgba(255,255,255,.62);
      font-size:12px;
    }
    .cta{
      display:flex; gap:8px;
    }
    .mini{
      padding:9px 10px;
      border-radius:12px;
      font-size:13px;
      font-weight:800;
    }

    .empty{
      padding:18px;
      border-radius:16px;
      border:1px dashed rgba(255,255,255,.18);
      color:rgba(255,255,255,.7);
      text-align:center;
    }

    /* Featured row */
    .featured{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:14px;
    }
    .feature-big{
      border-radius:18px;
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(420px 220px at 20% 20%, rgba(106,27,154,.55), transparent 60%),
        linear-gradient(180deg, rgba(17,18,26,.75), rgba(17,18,26,.35));
      padding:16px;
      overflow:hidden;
      position:relative;
    }
    .feature-big h3{margin:0 0 8px; font-size:20px}
    .feature-big p{margin:0 0 12px; color:rgba(255,255,255,.72)}
    .feature-big .meta{margin:0 0 12px}
    .feature-small{
      display:grid; gap:10px;
    }
    .feature-tile{
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      padding:12px;
    }
    .feature-tile b{display:block; margin-bottom:4px}
    .feature-tile span{color:rgba(255,255,255,.65); font-size:12px}

    /* Footer */
 /*===================Footer================*/
footer {
    background: var(--color-green);
    padding-top: 1rem;
    font-size: 0.9rem;
    color: var(--color-bg);

}

.footer__container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5rem;


}

.footer__container>div h4 {
    margin: 0;
    color: var(--color-bg);


}



.footer__1 p {
    margin: 0 0 0rem;
    color: var(--color-bg);


}

footer ul li {
    margin-bottom: 0.5rem;
    color: #ffffff;

}

footer ul li a {
    margin-bottom: 0.5rem;
    color: #ffffff;

}

footer ul li a:hover {
    text-decoration: underline;

}

.footer__socials {
    display: flex;
    gap: 1rem;
    font-size: 1.2rem;
    margin-top: 2rem;
    color: var(--color-bg);

}

.footer__copyright {
    text-align: center;
    margin-top: 4rem;
    padding: 1.2rem 0;
    border-top: 1px solid var(--color-bg2);
}

.footer__logo {
    display: flex;
    align-items: center;
    /* Aligns logo and text vertically */
    gap: 0.5rem;
    /* Adjusts space between logo and text */
    margin-bottom: 1.2rem;
}

.footer__logo img {
    height: 40px;
    /* Ensure the logo height is as desired */
    max-height: 100%;
    /* Prevents the image from overflowing its container */
    width: auto;
   }

   #all{
  background: var(--color-primary);
  padding: 2rem 0 3rem;
}

/* keep content centered */
#all .container{
  width: min(1180px, 92%);
  margin: 0 auto;
}
   
@media (max-width: 900px){

   /* open menu */
  #nav_check:checked ~ .nav__menu{
    right: 5%;
    visibility: visible;
    opacity: 1;
  }

  .hamburger{
    display: block;
    z-index: 1000;
  }

  .hamburger div{
    width: 30px;
    height: 2px;
    margin: 6px 0;
    background: #212526;
  }

  .nav__menu{
    position: fixed;
    top: 5rem;
    right: -100%;
    height: fit-content;
    width: 15rem;
    flex-direction: column;
    gap: 0;
    background: var(--color-green); /* purple */
    box-shadow: -4rem 6rem 10rem rgba(0, 0, 0, 0.6);
    padding: 1rem;
    transition: right 0.3s ease-in-out;
    visibility: hidden;
    opacity: 0;
  }

  .nav__menu li{
    width: 100%;
    height: 4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  .nav__menu li:last-child{
    border-bottom: none;
  }

  .nav__menu li a{
    background: var(--color-green);
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--color-bg); /* white-ish */
    
  }


  .nav__menu li a:hover{
    background: #8E24AA;
    color: var(--color-white);
  }
  .nav__menu li a.active{
    background: #ffffff;
    color: var(--color-green);
    border-radius: 0;   /* THIS removes rounded corners */
}

  /* contact icon/text behavior like original */
  .nav-icon{ display: none; }
  .nav-text{
    display: inline;
    font-size: 1rem;
    color: var(--color-bg);
  }
 
}

 
    @media (max-width: 600px){
      .hero h1{font-size:32px}
      .filters{grid-template-columns: 1fr}
      .grid{grid-template-columns: 1fr}
   .nav__menu{ right: 3%; }
     /*===================footer================*/
    .footer__container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .footer__1 p {
        margin: 1rem auto;
    }

    .footer__socials {
        justify-content: center;
    }

      
    }