:root{
      --bg: linear-gradient(135deg,#ff6a88 0%,#ff99ac 20%,#7f7fd5 50%,#91eae4 100%);
      --link: #ffffff;
      --link-muted: #e9f6ff;
      --hover: rgba(255,255,255,.15);
      --accent: #00ffd1;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      padding: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      background: #0f1220;
      min-height:100vh;
    }

    .conts{
      height: 25px;
      position:sticky; top:0; z-index:1000;
      backdrop-filter: saturate(140%) blur(8px);
      background: linear-gradient(135deg, #434343, #000000);
      color: var(--link);
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }
    .conts p{
      padding-right: 10px;
      text-align: right;
    }

    /* Navbar shell */
    .nav{
      position:sticky; top:0; z-index:1000;
      backdrop-filter: saturate(140%) blur(8px);
      background: var(--bg);
      color: var(--link);
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }

    .nav__inner{
      max-width: 1100px;
      margin: 0 auto;
      padding: .75rem 1rem;
      display:flex;
      align-items:center;
      gap: .75rem;
    }
    .tradename{
      font-size: 2rem;
    }

    /* Brand */
    .brand{
      display:flex; align-items:center; gap:.6rem;
      font-weight:700; letter-spacing:.3px;
      color: var(--link);
      text-decoration:none;
      white-space:nowrap;
    }
    .brand__logo{
      width: 50px;; height: 50px;;
      /* background-image: url(sameerlogo.bmp); */
      /* background: conic-gradient(from 180deg,#00ffd1,#ff6a88,#ffd166,#00ffd1); */
      /* box-shadow: 0 6px 18px rgba(0,0,0,.25); */
    }
    .logo{
      width:50px; height:50px;border-radius: 50%;
      
    }

    /* Links */
    .links{
      display:flex; align-items:center; gap:.25rem;
      margin-left:auto;
    }
    .link{
      position:relative;
      display:inline-flex; align-items:center;
      padding:.6rem .9rem;
      border-radius:10px;
      color: var(--link);
      text-decoration:none;
      transition: transform .18s ease, background .18s ease, color .18s ease;
    }
    .link:hover{ background: var(--hover); transform: translateY(-1px); }
    .link:active{ transform: translateY(0); }

    /* Animated underline */
    .link::after{
      content:"";
      position:absolute; left:12px; right:12px; bottom:6px;
      height:2px; border-radius:2px;
      background: linear-gradient(90deg,#ffd166,#00ffd1,#ff6a88);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .25s ease;
      opacity:.9;
    }
    .link:hover::after{ transform: scaleX(1); }

    /* CTA button */
    .cta{
      margin-left:.25rem;
      background: rgba(255,255,255,.18);
      color:#06131a;
      font-weight:700;
      border:1px solid rgba(255,255,255,.35);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 6px 16px rgba(0,0,0,.25);
      backdrop-filter: blur(6px);
    }
    .cta:hover{ background: rgba(255,255,255,.28); }

    /* Mobile toggle */
    .toggle{
      display:none;
      margin-left:auto;
      width:42px; height:42px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.35);
      background: rgba(255,255,255,.12);
      color: var(--link);
      align-items:center; justify-content:center;
      cursor:pointer;
      transition: background .18s ease, transform .18s ease;
    }
    .toggle:hover{ background: rgba(255,255,255,.2); transform: translateY(-1px); }

    .toggle__bar, .toggle__bar::before, .toggle__bar::after{
      content:"";
      display:block; width:20px; height:2px; border-radius:2px;
      background: var(--link);
      position:relative;
      transition: transform .25s ease, opacity .25s ease;
    }
    .toggle__bar::before{ position:absolute; top:-6px; }
    .toggle__bar::after{ position:absolute; top:6px; }

    /* Responsive */
    @media (max-width: 820px){
      .links{ display:none; flex-direction:column; width:100%; margin: .5rem 0 0; }
      .links.open{ display:flex; }
      .link{ width:100%; border-radius:12px; }
      .toggle{ display:flex; }
      .nav__inner{ flex-wrap:wrap; }
    }

    /* Active page indicator */
    .link.active{
      background: rgba(255,255,255,.22);
      color: var(--link-muted);
    }

    .home {
  padding: 3rem 1rem;
  background: linear-gradient(135deg, #ffecd2, #fcb69f);
  color: #2c2c2c;
  text-align: center;
}

.home__content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #333;
}

.home__content p {
  max-width: 600px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.product-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  padding: 1.5rem;
  width: 220px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.product-card h3 {
  color: #ff6a88;
  margin-bottom: 0.5rem;
}
.about {
  padding: 3rem 1rem;
  background: linear-gradient(135deg, #d4fc79, #96e6a1);
  color: #2c2c2c;
  text-align: center;
}

.about__content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #333;
}

.about__content p {
  max-width: 700px;
  margin: 0 auto 1rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

.about__highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.highlight-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  padding: 1.5rem;
  width: 220px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.highlight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.highlight-card h3 {
  color: #2c7a7b;
  margin-bottom: 0.5rem;
}
.services {
  padding: 3rem 1rem;
  background: linear-gradient(135deg, #89f7fe, #66a6ff);
  color: #2c2c2c;
  text-align: center;
}

.services__content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #333;
}

.services__content p {
  max-width: 700px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

.service-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.service-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  padding: 1.5rem;
  width: 240px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.service-card h3 {
  color: #005bea;
  margin-bottom: 0.5rem;
}
.contact {
  padding: 3rem 1rem;
  background: linear-gradient(135deg, #fddb92, #d1fdff);
  color: #2c2c2c;
  text-align: center;
}

.contact__content h2 {
  font-size: rem;
  margin-bottom: 1rem;
  color: #333;
}

.contact__content p {
  max-width: 700px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

.contact__details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.detail-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  padding: 1.5rem;
  width: 260px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.detail-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.detail-card h3 {
  color: #ff6a00;
  margin-bottom: 0.5rem;
}
.detail-card ul li{
  padding-bottom: 20px;
  
}

.detail-card a {
  color: #0077cc;
  text-decoration: none;
}

.detail-card a:hover {
  text-decoration: underline;
}
.footer {
  background: linear-gradient(135deg, #434343, #000000);
  color: #f1f1f1;
  text-align: center;
  padding: 1rem 1rem;
  /* margin-top: 2rem; */
}

.footer__content p {
  margin: 0.3rem 0;
  font-size: 0.95rem;
}

.footer__content p:first-child {
  font-weight: 600;
}