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

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

a{
  text-decoration:none;
} /* ================= HERO SECTION ================= */

    .hero{
      min-height:100vh;
      width:100%;
      background:
      linear-gradient(to right, rgba(255,255,255,0.95), rgba(255,255,255,0.65)),
      url('../Images/security-bg.png');
      background-size:cover;
      background-position:center;
      padding:40px 8%;
      position:relative;
      overflow:hidden;
    }

    .navbar{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:70px;
    }

    .logo-box{
      display:flex;
      align-items:center;
      gap:15px;
    }
    .logo-img{
    width:90px;
    height:90px;
    object-fit:contain;
    }

    .logo-circle{
      width:60px;
      height:60px;
      border-radius:50%;
      background:#003b8f;
      position:relative;
    }

    .logo-circle::before{
      content:'';
      position:absolute;
      width:40px;
      height:4px;
      background:#fff;
      top:18px;
      left:10px;
      box-shadow:
      0 10px 0 #fff,
      0 20px 0 #fff;
      border-radius:10px;
    }

    .logo-text h2{
      font-size:34px;
      line-height:40px;
      color:#061c54;
    }

    .logo-text span{
      color:#444;
      font-size:16px;
    }

    .nav-links{
      display:flex;
      gap:30px;
    }
    /* ================= DROPDOWN ================= */

.dropdown{
  position:relative;
}

.drop-btn{
  color:#061c54;
  font-weight:600;
  transition:0.3s;
}

.drop-btn:hover{
  color:#0aa6df;
}

.dropdown-content{
  position:absolute;
  top:35px;
  left:0;
  min-width:240px;
  background:#fff;
  border-radius:12px;
  padding:10px 0;
  box-shadow:0 10px 25px rgba(0,0,0,0.12);

  opacity:0;
  visibility:hidden;
  transform:translateY(10px);

  transition:0.3s;
  z-index:999;
}

.dropdown-content a{
  display:block;
  padding:12px 20px;
  color:#061c54;
  font-weight:500;
  transition:0.3s;
}

.dropdown-content a:hover{
  background:#f4f8ff;
  color:#08a6df;
  padding-left:28px;
}

.dropdown:hover .dropdown-content{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
/* Sub Dropdown */

.sub-dropdown{
  position:relative;
}

.sub-btn{
  display:block;
  padding:12px 20px;
  color:#061c54;
  font-weight:500;
}

.sub-dropdown-content{
  position:absolute;
  top:0;
  right:100%;
  min-width:220px;
  background:#fff;
  border-radius:12px;
  padding:10px 0;
  box-shadow:0 10px 25px rgba(0,0,0,0.12);

  opacity:0;
  visibility:hidden;
  transform:translateX(10px);
  transition:0.3s;
}

.sub-dropdown-content a{
  display:block;
  padding:12px 20px;
  color:#061c54;
  font-weight:500;
}

.sub-dropdown-content a:hover{
  background:#f4f8ff;
  color:#08a6df;
}

.sub-dropdown:hover .sub-dropdown-content{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}

    .nav-links a{
      color:#061c54;
      font-weight:600;
      transition:0.3s;
    }

    .nav-links a:hover{
      color:#0aa6df;
    }

    .hero-content{
      display:grid;
      grid-template-columns:1fr 1fr;
      align-items:center;
      gap:50px;
    }

    .left h1{
      font-size:70px;
      line-height:80px;
      color:#08276d;
      margin-bottom:20px;
    }

    .left h1 span{
      color:#08a6df;
    }

    .left p{
      font-size:22px;
      color:#333;
      margin-bottom:30px;
    }

    .btn{
      display:inline-block;
      background:#08276d;
      color:#fff;
      padding:15px 35px;
      border-radius:50px;
      font-weight:600;
      transition:0.3s;
    }

    .btn:hover{
      background:#08a6df;
      transform:translateY(-3px);
    }

    .right{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:20px;
      flex-wrap:wrap;
    }

    .card{
      width:180px;
      background:#fff;
      padding:20px;
      border-radius:20px;
      text-align:center;
      box-shadow:0 10px 30px rgba(0,0,0,0.08);
      transition:0.3s;
    }

    .card:hover{
      transform:translateY(-10px);
    }

    .card img{
      width:80px;
      margin-bottom:15px;
    }

    .card h3{
      color:#08276d;
      margin-bottom:8px;
    }

    /* ================= ABOUT ================= */

    .about{
      padding:90px 8%;
      background:#fff;
    }

    .section-title{
      font-size:42px;
      color:#08276d;
      margin-bottom:20px;
    }

    .about p{
      max-width:1000px;
      line-height:32px;
      color:#444;
      font-size:18px;
      margin-bottom:20px;
    }

    .services{
      margin-top:40px;
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:25px;
    }

    .service-box{
      background:#f4f8ff;
      padding:30px;
      border-radius:18px;
      border-left:5px solid #08a6df;
      transition:0.3s;
    }

    .service-box:hover{
      transform:translateY(-8px);
      background:#08276d;
      color:#fff;
    }

    .service-box h3{
      margin-bottom:10px;
    }

    /* ================= BRANDS ================= */

    .brands{
      padding:90px 8%;
      background:#eef4fb;
    }

    .brand-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:25px;
      margin-top:50px;
    }

    .brand-card{
      background:#fff;
      border-radius:18px;
      padding:30px;
      text-align:center;
      box-shadow:0 8px 20px rgba(0,0,0,0.08);
      transition:0.3s;
    }

    .brand-card:hover{
      transform:scale(1.05);
    }

    .brand-card img{
      width:120px;
      height:70px;
      object-fit:contain;
      margin-bottom:15px;
    }

    .brand-card h4{
      color:#08276d;
      margin-bottom:10px;
    }

    /* ================= FOOTER ================= */

    footer{
      background:#061c54;
      color:#fff;
      padding:50px 8%;
    }

    .footer-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
      gap:30px;
    }

    footer h3{
      margin-bottom:20px;
      color:#08a6df;
    }

    footer p{
      margin-bottom:10px;
      line-height:28px;
    }

    .footer-bottom{
      margin-top:40px;
      text-align:center;
      border-top:1px solid rgba(255,255,255,0.2);
      padding-top:20px;
      color:#ccc;
    }

    /* ================= MOBILE ================= */

    @media(max-width:900px){

      .hero-content{
        grid-template-columns:1fr;
      }

      .left h1{
      font-size:42px;
      line-height:52px;
}

      .navbar{
        flex-direction:column;
        gap:20px;
      }

      .nav-links{
        flex-wrap:wrap;
        justify-content:center;
      }

    }