*{
   margin:0;
   padding:0;
   box-sizing:border-box;
   scroll-behavior:smooth;
 }

 body {
   font-family: 'Poppins', sans-serif;
   background-color: linear-gradient(135deg, #0f172a, #1e293b);
   margin: 0;
   overflow-x:hidden;
 }
 header{
   position:fixed;
   width:100%;
   top:0;
   background:rgba(15,23,42,0.9);
   backdrop-filter:blur(8px);
   padding:15px 8%;
   display:flex;
   justify-content:space-between;
   align-items:center;
   z-index:1000;
 }

 .logo{
   color:#fff;
   font-weight:700;
   font-size:1rem;
   cursor: pointer;
   text-decoration: none;
 }

 nav a{
   color:#fff;
   margin-left:25px;
   text-decoration:none;
   font-weight:500;
   transition:0.3s;
 }

 nav a:hover{
   color:#3b82f6;
 }
 /* MAIN CENTERING */
 main {
   min-height: 100vh;


   justify-content: center;
   align-items: center;
   padding: 0;
   background: linear-gradient(135deg, #0f172a, #1e293b);
   animation:fadeUp 1.2s ease forwards
 }

 h1 {
   font-size:1.5rem;
   color: #f8fafc;
   text-align: center;
   padding: 4rem 2rem;
   margin-top: auto;
 }
 h2 {
   color: #f8fafc;
   text-align: center;
 }
 h3 {
   color: #f8fafc;
   text-align: center;
 }
 p {
   color:#fff;
   padding:0 15px;
   text-align: justify;
 }
 .list{
   padding:0 30px;
   }
 .areas {
 padding: 10px 50px;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 gap: 15px;
 }

 .areas a {
 display: block;
 padding: 15px 20px;
 background: #f5f5f5;
 border-radius: 8px;
 text-decoration: none;
 color: #333;
 font-weight: 600;
 text-align: center;
 transition: all 0.25s ease;
 border: 1px solid #e0e0e0;
 }

 .areas a:hover {
 background: #0077ff;
 color: white;
 transform: translateY(-3px);
 box-shadow: 0 8px 20px rgba(0,0,0,0.1);
 }

 @keyframes fadeUp{
   from{transform:translateY(40px);opacity:0;}
   to{transform:translateY(0);opacity:1;}
 }
 footer{
   background:#0f172a;
   color:#94a3b8;
   text-align:center;
   padding:30px 10px;
 /*  margin-top:20px; - to remove wite gap between footer and main change or remove this */
   font-size:0.9rem;
 }
 /* social css*/
 .social
 {
   position: inherit;
   z-index: 10;
   bottom: 1px;
   display: flex;
   justify-content: center;
   align-items: center;
   animation:fadeUp 1.2s ease forwards;

 }
 .social li
 {
   list-style: none;
 }
 .social li a
 {
   display: inline-block;
   margin-right: 30px;
   filter: invert(1);
   transform: scale(0.5);
   transition: 0.5s;
 }
 .social li a:hover
 {
   transform: scale(0.5) translateY(-15px);
 }
 /* van areas decorations */
 .services{
   display:grid;
   grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
   gap:10px;
   padding:100px 8%;
   margin-top: -80px;
   margin-bottom: -80px;
 }
 .card{
   background:#fff;
   padding:5px;
   border-radius:20px;
   box-shadow:0 10px 30px rgba(0,0,0,0.05);
   transition:0.4s;
 }

 .card:hover{
   transform:translateY(-10px);
   box-shadow:0 20px 40px rgba(0,0,0,0.1);
 }
 .content p {
   text-align: justify;
   margin-top: 0px;

 }
 .card a {
   text-decoration: none;
   display: block;
   text-align: center;
   width: 100%;
   color:#1d2c52;
   cursor: pointer;
 }
 .card a:hover {
   color:#3b82f6;
 }
 ul {
    list-style-type: disc;
    color: white;
    padding: 0px 90px;
 }
 .btn {
   background: linear-gradient(135deg,#2563eb,#3b82f6);
   color: #fff;
   padding: 12px 28px;
   border-radius: 30px;
   text-decoration: none;
   font-weight: 600;
   transition: 0.4s;
   box-shadow: 0 8px 20px rgba(37,99,235,0.3);

   /* FIXED: Changed from 'block' to 'inline-block' */
   display: inline-block;
   text-align: center;
 }

 .btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 25px rgba(37,99,235,0.5);
 }
 .btn-container {
   text-align: center; /* Centers inline-block elements inside it */
   margin: 24px 0;    /* Adds space above and below the button */
 }
 why {
   background: #fff;
   padding:30px 80px;
 }
 why h3{
   text-align: left;
   font-size:1rem;
 }
 why p{
   text-align:justify;
 }
  img {
    width: 100%;             /* Allows the image to be responsive */
      max-width: 500px;        /* FIXED: Restricts the image from getting too big */
      height: auto;            /* Maintains your original image proportions */
      border-radius: 16px;     /* Smooths out sharp corners */
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); /* Soft, professional shadow */
      display: flex;
   justify-content: center; /* Centers the image horizontally */
   margin: 40px auto;       /* Adds space above/below and keeps container centered */
   padding: 0 20px;         /* Prevents touching screen edges on mobile */
 }

 /* Responsive adjustment for mobile screens */
 @media (max-width: 768px) {
   .intro-section {
     flex-direction: column-reverse; /* Puts image below text on mobile */
     padding: 40px 20px;
   }
 }