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

html{
   scroll-behavior:smooth;
}

:root{
   --primary:#0F172A;
   --secondary:#1E293B;
   --accent:#F59E0B;
   --light:#F8FAFC;
   --white:#FFFFFF;
}

body{
   background:var(--light);
   color:#1F2937;
}

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

header{
   background:var(--primary);
   position:sticky;
   top:0;
   z-index:1000;
}

.navbar{
   display:flex;
   justify-content:space-between;
   align-items:center;
   padding:20px 5%;
}

.logo{
   display:flex;
   align-items:center;
   gap:10px;
}

.logo img{
   width:50px;
}

.logo span{
   color:white;
   font-size:1.4rem;
   font-weight:700;
}

.nav-links{
   display:flex;
   gap:30px;
   list-style:none;
}

.nav-links a{
   color:white;
   text-decoration:none;
}

.menu-btn{
   display:none;
}

/*  HERO SECTION */
#hero{
   background:linear-gradient(
   135deg,
   #0F172A,
   #1E293B);
   min-height:100vh;
   display:flex;
   /* align-items: center; */
   padding: 0% 5%;
}

.hero-content{
   width:90%;
   /* max-width:1200px; */
   margin:auto;
   display:flex;
   flex-direction:row;
   justify-content:space-between;
   align-items: center;
   gap:60px;
   /* align-items:center; */
}
.hero-text{
   width:600px;
}

.hero-text h1{
   color:white;
   font-size:5rem;
   margin-bottom:20px;
   font-family:"Potta One", system-ui;
}

.hero-text p{
   color:#d1d5db;
   line-height:1.8;
}

.hero-buttons{
   margin-top:30px;
   display:flex;
   gap:20px;
}

.btn-primary{
   background:var(--accent);
   color:white;
   padding:15px 25px;
   text-decoration:none;
   border-radius:8px;
   text-transform:uppercase;
   font-weight:600;
}

.btn-secondary{
   border:2px solid white;
   color:white;
   padding:15px 25px;
   text-decoration:none;
   border-radius:8px;
   text-transform:uppercase;
   font-weight:600;
}

.hero-image img{
   width:100%;
   max-width:450px;
}

.hero-stats{
   display:flex;
   gap:40px;
   margin-top:50px;
}

.hero-stats h3{
   color:var(--accent);
   font-size:1.5rem;
}

.hero-stats p{
   color:white;
}

section{
   padding:100px 0;
}

h2{
   text-align:center;
   margin-bottom:60px;
   font-size:3rem;
   /* background-color: red; */
}
h2::before{
   content:'';
   display:block;
   width: 30%;
   height:2px;
   background: linear-gradient(90deg, transparent, var(--accent), transparent);
   margin:20px auto;
   border-radius:50%;
}

/*  WHY CHOOSE US */
.why-us{
   max-width: 100%;

}
.cards{
   display:grid;
   grid-template-columns:repeat(4,1fr);
   gap:25px;
}

.card{
   background:white;
   padding:50px 30px ;
   border-radius:15px;
   box-shadow:0 5px 20px rgba(0,0,0,.08);
   transition: transform 0.2s ease-in-out;
}
.card:hover{
   box-shadow:0 5px 30px rgba(0, 0, 0, 0.185);
   transform: translateY(-10px);
}
.card i{
   color: var(--accent);
   font-size: 50px;
   margin-bottom: 15px;
}


/*  TESTIMONIALS */
#testimonials{
   background:white;
}

.testimonial-grid{
   display:grid;
   grid-template-columns:repeat(3,1fr);
   gap:25px;
}

.testimonial{
   background:#f5f5f5;
   padding:30px;
   border-radius:15px;
}

.testimonial h4{
   margin-top:20px;
   color:var(--accent);
}
/* CONTACT SECTION */
.error {
   border: 2px solid red !important;
   outline: none !important;
   box-shadow: 0 0 5px red !important;
}
form{
   background:white;
   padding:40px;
   border-radius:20px;
   max-width:800px;
   margin:auto;
   box-shadow:0 5px 20px rgba(0,0,0,.08);
}

form>label{
   font-weight: 600;
}
form>input,
form .chat,
form textarea{
   width:100%;
   padding:15px;
   margin-top: 10px;
   margin-bottom:20px;
   border:1px solid #ddd;
   border-radius:8px;
   resize: vertical;
}

form>input:focus{
   border: 1px solid var(--primary);
}
form input[type='radio']{
   accent-color: var(--primary);
   height: 18px;
   width: 18px;
}

form .chat>div{
   margin-block: 10px;
   display: flex;
   align-items: center;
   gap: 10px;
}

form button{
   width:100%;
   padding:15px;
   border:none;
   background:var(--accent);
   color:white;
   font-size:1rem;
   cursor:pointer;
   border-radius:8px;
}

footer{
   background:var(--primary);
   color:white;
   text-align:center;
   padding:40px 20px;
}

.footer-content p{
   margin-top:10px;
   font-size: 14px;
}
@media (max-width: 1024px) {
   .hero-image{
      display:none;
   }
}
@media(max-width:768px){

   .nav-links{
      display:none;
   }

   .menu-btn{
      display:block;
      background:none;
      border:none;
      color:white;
      font-size:2rem;
      cursor:pointer;
   }

  
   .hero-content{
      grid-template-columns:1fr;
      align-items:center;
      text-align:center;
   }
   .hero-text h1{
      font-size:2.2rem;
   }
    .hero-buttons{
      justify-content:center;
   }

   .hero-image{
      display:none;
   }
   
   .hero-stats{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:20px;
      margin-top:50px;
   }

   

   h2::before{
   width: 50%;
   }
   .cards{
      grid-template-columns:1fr;
   }
   .card{
      padding:30px 20px ;
   }
   .card:hover{
      box-shadow:0 5px 30px rgba(0, 0, 0, 0.185);
      transform: translateY(-10px);
   }

   .testimonial{
      padding:20px;
   }
   .testimonial-grid{
      grid-template-columns:1fr;
   }

   form{
      padding:40px 15px;
   }
}