* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif
    }

    body {
      background: #f4f6fb;
      color: #111
    }

    .container {
      width: 90%;
      max-width: 1200px;
      margin: auto
    }

    /* NAVBAR */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0
    }

    .logo {
      font-weight: 600
    }

    .nav-links a {
      margin: 0 10px;
      text-decoration: none;
      color: #333;
      font-size: 14px
    }
    .nakularchGroup {
        height: 75px !important;
        width: 137px !important;
    }
    /* HERO */
    .hero {
      height: 100vh;
      background: linear-gradient(rgba(10, 20, 50, .8), rgba(10, 20, 50, .8)), url('images/photo-1492724441997-5dc865305da7.jpg');
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      color: #fff
    }

    .hero h1 {
      font-size: 60px;
      font-weight: 700
    }

    .hero span {
      background: linear-gradient(90deg, #4facfe, #00f2fe);
      -webkit-background-clip: text;
      color: transparent
    }

    .hero p {
      margin: 20px 0;
      max-width: 500px;
      color: #ccc
    }

    .btn {
      padding: 12px 22px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      margin-right: 10px
    }

    .btn-primary {
      background: #4f6cff;
      color: #fff
    }

    .btn-outline {
      background: transparent;
      border: 1px solid #aaa;
      color: #fff
    }

    /* STATS */
    .stats {
      display: flex;
      justify-content: space-around;
      padding: 40px 0;
      background: #fff;
      text-align: center
    }

    .stats span {
      font-size: 32px;
      color: #4f6cff;
      font-weight: 600
    }

    /* TITLE */
    .title {
      text-align: center;
      margin: 60px 0 20px
    }

    .title small {
      color: #4f6cff
    }

    .title h2 {
      font-size: 32px;
      margin-top: 10px
    }

    .title p {
      color: #666;
      font-size: 14px
    }

    /* CARDS */
    .cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 25px
    }

    .card {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      color: #fff;
      min-height: 260px;
      padding: 30px;
      cursor: pointer;
      transition: all .4s ease;
    }

    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform .6s ease;
      z-index: 0;
    }

    .card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
      z-index: 1;
    }

    .card * {
      position: relative;
      z-index: 2
    }

    /* BACKGROUND IMAGES */
    .card1::before {
      background-image: url('images/Scarica Vettori, Immagini, Foto e Video Gratuiti.jpg')
    }

    .card2::before {
      background-image: url('images/photo-1576765608535-5f04d1e3f289.jpg')
    }

    .card3::before {
      background-image: url('images/photo-1503387762-592deb58ef4e.jpg')
    }

    .card4::before {
      background-image: url('images/photo-1522202176988-66273c2fd55f.jpg')
    }

    /* GRADIENT OVERLAY COLORS */
    .card1::after {
      background: linear-gradient(135deg, #00c6ffcc, #0072ffcc)
    }

    .card2::after {
      background: linear-gradient(135deg, #a18cd1cc, #6a11cbcc)
    }

    .card3::after {
      background: linear-gradient(135deg, #ff416ccc, #ff4b2bcc)
    }

    .card4::after {
      background: linear-gradient(135deg, #f7971ecc, #ffd200cc)
    }

    /* HOVER ZOOM EFFECT */
    .card:hover::before {
      transform: scale(1.15);
    }

    .card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    }

    .card small {
      background: rgba(255, 255, 255, .2);
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      display: inline-block;
    }

    .card h3 {
      margin: 15px 0;
      font-size: 22px
    }

    .card p {
      font-size: 14px;
      color: #eee
    }

    /* WHY */
    .why {
      display: flex;
      gap: 40px;
      margin: 80px 0
    }

    .why-left {
      flex: 1
    }

    .why-right {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .why-right img {
      width: 100%;
      border-radius: 12px
    }

    /* CTA */
    .cta {
      background: linear-gradient(90deg, #3a7bd5, #8e44ad);
      color: #fff;
      text-align: center;
      padding: 70px 20px
    }

    /* FOOTER */
    .footer {
      background: #0d1b2a;
      color: #aaa;
      padding: 40px 0;
      margin-top: 40px
    }

    .footer .grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 20px
    }

    .footer h4 {
      color: #fff;
      margin-bottom: 10px
    }

    .footer p,
    .footer a {
      font-size: 13px;
      color: #aaa;
      text-decoration: none;
      display: block;
      margin: 5px 0
    }

    .copy {
      text-align: center;
      margin-top: 20px;
      font-size: 12px
    }

    /* RESPONSIVE */
    @media(max-width:768px) {
      .cards {
        grid-template-columns: 1fr
      }

      .why {
        flex-direction: column
      }

      .footer .grid {
        grid-template-columns: 1fr
      }

      .hero h1 {
        font-size: 40px
      }
    }