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

body{
  background:#ffffff;
  overflow-x: hidden;
}

/* ================= NAVBAR ================= */
header{
  position:fixed;
  top:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 60px;
  z-index:1000;
}

nav a{
  color:white;
  margin:0 15px;
  text-decoration:none;
}

/* ================= BASE BUTTON ================= */
.btn{
  padding:12px 25px;
  border:none;
  border-radius:30px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s ease;
}

/* NAV BUTTON */
.nav-btn{
  background:linear-gradient(45deg,#ff9a00,#ff3c00);
  color:black;
  border-radius:20px;
  position:relative;
  overflow:hidden;
  transition:all 0.3s ease;
}

/* Hover Effect */
.nav-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(255,60,0,0.4);
  color:#fff;
}

/* Shine Animation */
.nav-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  transition:0.5s;
}

.nav-btn:hover::before{
  left:100%;
}

/* HERO PRIMARY BUTTON */
.primary{
  background:linear-gradient(45deg,#ff9a00,#ff3c00);
  color:white;
  box-shadow:0 5px 15px rgba(255,60,0,0.4);
}

.primary:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(255,60,0,0.6);
}

.primary:active{
  transform:scale(0.95);
}


/* ================= HERO ================= */
.hero{
  height:150vh;
  background:url("image/1x/Asset 2.png") no-repeat center/cover;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  padding-bottom:120px;
}

.container{
  width:90%;
  max-width:1400px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:100px;
}

/* LEFT IMAGE */
.hero-left{
  position:relative;
  margin-left: 200px;
}

.img1{
  width:220px;
  transform: translateX(-100px);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.img2{
  width:250px;
  position:absolute;
  bottom:-40px;
  right:-200px;
  transition: transform 0.6s ease, opacity 0.6s ease;
}



/* RIGHT TEXT */
.hero-right{
  transform: translateX(-40px);
}

.hero-right h1{
  font-size:30px;
  margin-bottom:15px;
}

.hero-right p{
  color:#ddd;
  margin-bottom:20px;
}

.hero-btn {
  background: #2f80ed;
  color: #fff;
  padding: 12px 26px;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Hover Effect */
.hero-btn:hover {
  background: #1b5fd1;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(47, 128, 237, 0.3);
}

/* Smooth shine animation */
.hero-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  transition: 0.5s;
}

.hero-btn:hover::after {
  left: 100%;
}

/* BADGE */
.badge{
  margin-top:20px;
  background:#00c6ff;
  padding:6px 12px;
  border-radius:20px;
  display:inline-block;
}



/* ================= SERVICES ================= */
.services{
  margin-top:-220px;
  padding:0 60px;
  position:relative;
  z-index:10;
}

.section-title{
  color:white;
  font-size:32px;
  margin-bottom:10px;
  text-align:center;
}

.section-p{
  color:white;
  font-size:12px;
  margin-bottom:45px;
  text-align:center;
}

/* GRID */
.service-box{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
  align-items:stretch; /* ⭐ FIX */
}

/* CARD FIX */
.card{
  padding:20px;
  border-radius:10px;
  transition:all 0.3s ease;

  /* ⭐ IMPORTANT FIX FOR ALIGNMENT */
  display:flex;
  flex-direction:column;
  height:100%;
}

/* ⭐ HOVER EFFECT */
.card:hover{
  transform:translateY(-12px);
  box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

/* IMAGE */
.card img{
  width:80%;
  margin-bottom:10px;
}

/* TITLE FIX */
.card h3{
  margin-bottom:10px;
  min-height:45px; /* keeps same height */
}

/* TEXT FIX */
.card p{
  color:#666;
  font-size:13px;
  margin-bottom:20px;
  min-height:40px;
}



/* ================= FEATURED ================= */
.featured {
  padding: 80px 20px;
 
}

.featured-content {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
 
  margin-bottom: 50px;
}

.featured-text {
  margin-left: 100px;
  margin-bottom: 20px;
}

.featured-text .sub-title {
  margin-bottom: 20px;
}

.featured-text h2{
  font-size:32px;
  margin-bottom:15px;
}

.featured-text .desc {
  margin-bottom:10px;
}


.featured-text li{
  margin-bottom:15px;
  margin-left: 40px;
}

.featured-image img{
  width:100%;
  max-width:540px;
  border-radius:12px;
}

/* ================= CHATBOT ================= */
.chatbot {
  padding:80px 120px;
  background:linear-gradient(to right,#3266f3,#10254c);
  color:#fff;
}

.chatbot-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:170px;
  
}

.chatbot .container{
  margin: 10px;
}

.chatbot-text{
  margin-left: 50px;
}

.chatbot-text .sub-title{
  margin-bottom: 10px;
}

.chatbot-text .desc{
  margin-bottom: 10px;
}

.chatbot-text ul{
  margin-left: 30px;
  margin-bottom: 15px;
}
.chatbot-image img{
  width:100%;
  max-width:490px;
}

.chatbot-text h2{
  font-size: 35px;
  margin-bottom:15px;
}



/* ================= WHY SECTION ================= */
.why{
  padding:80px 20px;
  background:#f7f8fa;
  text-align:center;
}

.why-title{
  font-size:28px;
  margin-bottom:50px;
}

.why-wrapper{
  display:flex;
  justify-content:space-between;
  gap:120px;
  margin-left: 400px;
}

.why-col{
  display:flex;
  flex-direction:column;
  gap:25px;
}

.why-item{
  display:flex;
  align-items:center;
  gap:12px;
}

.why-item span{
  width:22px;
  height:22px;
  background:#2f80ed;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
}

/* How it Work? sectio  */

.how-works{
  height: 45vh;
  background:linear-gradient(90deg,#3a7bd5,#0c1020);
  padding:100px 0 120px;
  text-align:center;
  position:relative;
  margin-bottom: 30px;
}

/* TITLE */
.title-area h2{
  color:#ffb3b3;
  font-size:20px;
  letter-spacing:2px;
  position:relative;
  display:inline-block;
  margin-bottom:20px;
}

/* side lines */
.title-area h2::before,
.title-area h2::after{
  content:"";
  width:120px;
  height:2px;
  background:white;
  position:absolute;
  top:50%;
}

.title-area h2::before{
  right:110%;
}

.title-area h2::after{
  left:110%;
}

.title-area p{
  color:#ddd;
  font-size:12px;
  margin-bottom:60px;
}

/* CARD CONTAINER */
.how-container{
  width:90%;
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

/* CARD */
.how-card{
  background:#eaeaea;
  padding:30px 20px;
  border-radius:10px;
  text-align:left;
  position:relative;
  margin-top:50px;
}

/* ICON CIRCLE (top overlap) */
.icon-circle{
  width:80px;
  height:80px;
  border:3px solid #555;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:white;
  position:absolute;
  top:-40px;
  left:20px;
}

.icon-circle img{
  width:40px;
}

/* TEXT */
.how-card h3{
  margin-top:50px;
  color:#333;
  margin-bottom: 10px;
}

.how-card p{
  font-size:12px;
  color:#555;
  margin-bottom: 70px;
}


/* Says Section  */

.says-btn button{
  background:linear-gradient(90deg,#3a7bd5,#0c1020);
  padding: 10px 70px;
  margin-left: 509px;
  border: none;
  border-radius: 10px;
  margin-bottom: 40px;
  transition: 0.3s ease;
  margin-top: 400px;
}

.says-btn button p{
  color: #fff;
  font-size: 26px;
}

.stars{
  display:flex;
  justify-content:center; /* 🔥 center alignment */
  align-items:center;
  gap:6px;
  color:#ff9a00;
  font-size:20px;
  margin-bottom: 20px;
}

.says-btn p{
  justify-content: center;
  text-align: center;
  font-size: 16px;
  
}

/* Contact Section  */

/* SECTION BACKGROUND */
.contact-section{
  margin-top: 60px;
  height: 80vh;
  background:linear-gradient(90deg,#3a7bd5,#0c1020);
  padding:120px 0 150px;
  position:relative;
}

/* WRAPPER */
.contact-wrapper{
  margin-top: 40px;
  width:90%;
  max-width:1200px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

/* LEFT TEXT */
.contact-left{
  flex:1;
}

.contact-left h2{
  font-size:22px;
  color:white;
  line-height:1.5;
  max-width:400px;
  padding-top: 40px;
}

/* RIGHT FORM CARD */
.contact-form{
  flex:1;
  background:#eaeaea;
  padding:30px;
  border-radius:15px;
  position:relative;
  margin-top:60px;
  /* blue border */
  border:4px solid #2a7de1;
}

/* TITLE */
.contact-form h3{
  text-align:center;
  margin-bottom:20px;
  background:#ffb3b3;
  display:inline-block;
  padding:5px 15px;
  border-radius:5px;
}

/* FORM */
.contact-form form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* LABEL */
.contact-form label{
  font-size:12px;
  color:#333;
}

/* INPUT */
.contact-form input,
.contact-form textarea{
  padding:8px;
  border:1px solid #ccc;
  border-radius:5px;
  outline:none;
}

/* TEXTAREA */
.contact-form textarea{
  height:80px;
  resize:none;
}

/* BUTTON */
.contact-form button{
  margin-top:10px;
  align-self:flex-end;
  padding:6px 15px;
  border:none;
  background:linear-gradient(45deg,#3a7bd5,#ff3c00);
  color:white;
  border-radius:5px;
  cursor:pointer;
}

.contact-title {
  text-align: center;
  justify-content: center;
  margin-top: 76px;
}

.sys {
  align-items: center;
  margin-left: 600px;
  margin-top: 15px;
  margin-bottom: 40px;
}


/* Contact Section  */

/* ================= FOOTER CONTACT ================= */
.footer-contact {
  margin-top: 400px;
  background: #020617;
  color: #fff;
  padding: 60px 20px 20px;
}

.footer-contact .container {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

/* LEFT */
.footer-contact .logo {
  font-size: 26px;
  letter-spacing: 2px;
  margin-left: 60px;
}

.footer-contact .logo span {
  color: #fca5a5;
  margin-left: 60px;
}

.footer-contact .description {
  margin-top: 20px;
  max-width: 400px;
  line-height: 1.6;
  color: #cbd5f5;
  margin-left: 60px;
}

.footer-contact .socials {
  margin-top: 25px;
}

.footer-contact .socials i {
  margin-right: 12px;
  cursor: pointer;
  transition: 0.3s;
  margin-left: 60px;
}

.footer-contact .socials i:hover {
  color: #fca5a5;
}

/* RIGHT */
.footer-contact .right h3 {
  margin-bottom: 20px;
  margin-left: 40px;
}

.footer-contact .contact-item {
  display: flex;
  align-items: right;
  justify-content: right;
  margin-bottom: 10px;
}

.footer-contact .contact-item span {
  background: #fca5a5;
  color: #000;
  padding: 4px 8px;
  font-size: 13px;
  margin-right: 10px;
}

/* FOOTER */
.footer-contact .footer {
  border-top: 1px solid #1e293b;
  margin-top: 40px;
  padding-top: 15px;
  text-align: center;
  font-size: 13px;
  color: #94a3b8;
}

/* Mobile Toggole  */
/* ================= MOBILE NAV ================= */
.menu-toggle {
  display: none;
  font-size: 22px;
  color: #fff;
  cursor: pointer;
  transition: 0.3s ease;
}

.menu-toggle:hover{
  background-color: #00c6ff;
}

/* NAV LINK HOVER */
nav a {
  position: relative;
  transition: 0.3s;
}

/* underline animation */
nav a::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  background: #ff3c00;
  left: 0;
  bottom: -5px;
  transition: 0.3s;
}

nav a:hover::after {
  width: 100%;
}

nav a:hover {
  color: #ff9a00;
}



@media (max-width: 768px) {

  .menu-toggle {
    display: block;
  }

  nav {
    position: absolute;
    top: 80px;
    right: 0;
    width: 100%;
    background: #020617;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    display: none;
  }

  nav a {
    display: block;
    margin: 15px 0;
    font-size: 16px;
  }

  nav .nav-btn {
    margin-top: 10px;
  }

  nav.active {
    display: flex;
  }

  .container {
    margin-left: 90px;
  }

  .hero-left .img2 {
    margin-top: -360px;
    margin-left: 320px;
  }

 .services {
  margin-top: 1px;
 }

 .service-box {
  justify-content: center;
  align-items: center;
  margin-left: 20px;
  margin-top: -100px;
 }

 .card .hero-btn {
  width: 220px;
 }

 .featured {
  margin-right: 100px;
  align-items: center;
  padding: 0 5px;
  margin-top: 30px;
 }

 .featured-text h2{
  font-size: 20px;


 }

 .why-item {
  margin-right: 50px;
 }

 .says {
  margin-top: 900px;
 }

 .contact-form {
  margin-left: 100px;
 }

 .footer-contact {
  margin-top: 500px;
 }

 .container .left{
  margin-left: -100px;
 }
}



/* ================= RESPONSIVE ================= */

/* TABLET */
@media (max-width: 992px) {

  .container {
    flex-direction: column;
    gap: 40px;
  }

  .hero {
    height: auto;
    padding: 120px 20px;
    text-align: center;
  }

  .hero-left {
    margin-left: 0;
  }

  .img1, .img2 {
    position: static;
    transform: none;
    width: 180px;
  }

  .service-box {
    grid-template-columns: repeat(2, 1fr);
  }

  .featured-content,
  .chatbot-content {
    flex-direction: column;
    text-align: center;
  }

  .why-wrapper {
    flex-direction: column;
    margin-left: 0;
    gap: 40px;
  }

  .how-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-wrapper {
    flex-direction: column;
    gap: 30px;
  }

  .sys {
    margin-left: 0;
    text-align: center;
  }
}

/* MOBILE */
@media (max-width: 600px) {

  header {
    padding: 15px 20px;
  }

  nav {
    display: none;
  }

  nav.active {
    display: flex;
  }

  .service-box {
    grid-template-columns: 1fr;
  }

  .how-container {
    grid-template-columns: 1fr;
  }

  .hero-right h1 {
    font-size: 22px;
  }

  .featured-text {
    margin-left: 0;
  }

  .chatbot {
    padding: 60px 20px;
  }

  .chatbot-content {
    gap: 40px;
  }

  .says-btn button {
    margin-left: 0;
    width: 100%;
  }

  .sys {
    margin-left: 0;
  }

  .contact-left h2 {
    font-size: 18px;
  }
}