/*==================================
  RESET
  ==================================*/

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


body{

  font-family:Arial,sans-serif;

  background:#F8FAFC;

  color:#334155;

  overflow-x:hidden;

  line-height:1.6;

}


img{

  width:100%;

  display:block;

  border-radius:15px;

}


a{

  text-decoration:none;

}




/*==================================
CONTAINER
==================================*/


.container{

  width:100%;

  max-width:1280px;

  margin:auto;

  padding:0 20px;

}




/*==================================
HEADER
==================================*/

.header{


  position:fixed;

  top:0;

  left:0;

  width:100%;

  height:80px;


  z-index:9999;


  background:rgba(15,23,42,.95);


  backdrop-filter:blur(10px);


}



.header .container{


  display:flex;


  align-items:center;


  justify-content:space-between;


  height:80px;


}



.logo{


  font-size:28px;


  font-weight:700;


  color:white;

}


.logo span{


  color:#10B981;

}



.navbar{


  display:flex;


  gap:30px;


  align-items:center;

}



.navbar a{


  color:white;


  font-size:15px;

}


.btn{


  padding:12px 25px;


  border-radius:30px;


  background:#10B981;


  color:white;

}




.menu-btn{


  display:none;


  border:none;


  background:none;


  font-size:30px;


  color:white;


  cursor:pointer;

}




/*==================================
HERO
==================================*/


.hero{


  padding-top:140px;


  min-height:100vh;


  background:


    linear-gradient(
      135deg,
      #0F172A,
      #10B981);


  color:white;


  display:flex;


  align-items:center;


}



.hero-grid{


  display:grid;


  grid-template-columns:1fr 1fr;


  gap:60px;


  align-items:center;

}



.hero h1{


  font-size:60px;


  line-height:1.1;


  margin-bottom:20px;

}


.hero p{


  font-size:20px;


  margin-bottom:30px;

}


.hero-btn{


  padding:15px 35px;


  border-radius:40px;


  background:white;


  color:#0F172A;


  display:inline-block;

}




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


.about-preview{


  padding:100px 0;

}



.grid-2{


  display:grid;


  grid-template-columns:1fr 1fr;


  gap:60px;


  align-items:center;

}




/*==================================
SERVICES
==================================*/


.services{


  padding:100px 0;


  background:white;

}


.services h2{


  text-align:center;


  margin-bottom:60px;

}



.cards{


  display:grid;


  grid-template-columns:
repeat(3,1fr);


  gap:30px;

}




.card{


  padding:35px;


  border-radius:20px;


  background:white;


  text-align:center;


  box-shadow:
    0 10px 30px rgba(0,0,0,.08);

}



.card i{


  font-size:40px;


  margin-bottom:20px;


  color:#10B981;

}




/*==================================
STATS
==================================*/


.stats{


  padding:100px 0;


  background:#0F172A;


  color:white;

}


.stat-grid{


  display:grid;


  grid-template-columns:
repeat(4,1fr);


  text-align:center;


  gap:30px;

}



.stat-grid h2{


  font-size:50px;

}




/*==================================
PROJECTS
==================================*/


.projects{


  padding:100px 0;

}



.project-card{


  background:white;


  border-radius:20px;


  overflow:hidden;


  box-shadow:
    0 10px 30px rgba(0,0,0,.08);

}



.project-card h3{


  padding:20px;

}




/*==================================
CTA
==================================*/


.cta{


  padding:100px 0;


  background:#10B981;


  text-align:center;


  color:white;

}




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


footer{


  padding:40px;


  background:#0F172A;


  color:white;


  text-align:center;

}





/*==================================
FLOAT BUTTONS
==================================*/


.wa-btn{


  position:fixed;


  right:25px;


  bottom:90px;


  width:60px;


  height:60px;


  border-radius:50%;


  background:#25D366;


  display:flex;


  align-items:center;


  justify-content:center;


  color:white;


  font-size:28px;

}




.call-btn{


  position:fixed;


  right:25px;


  bottom:20px;


  width:60px;


  height:60px;


  border-radius:50%;


  background:#2563EB;


  display:flex;


  align-items:center;


  justify-content:center;


  color:white;

}




#topBtn{


  position:fixed;


  left:25px;


  bottom:25px;


  width:50px;


  height:50px;


  border:none;


  border-radius:50%;


  background:#10B981;


  color:white;


  cursor:pointer;

}




/*==================================
TABLET
==================================*/


@media(max-width:992px){


  .hero-grid{

    grid-template-columns:1fr;

  }


  .grid-2{

    grid-template-columns:1fr;

  }


  .cards{

    grid-template-columns:1fr 1fr;

  }


  .stat-grid{

    grid-template-columns:1fr 1fr;

  }



  .menu-btn{

    display:block;

  }


  .navbar{


    position:fixed;


    top:80px;


    left:-100%;


    width:100%;


    height:100vh;


    background:#0F172A;


    flex-direction:column;


    padding-top:50px;


    transition:.4s;

  }


  .navbar.active{

    left:0;

  }

}




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


@media(max-width:576px){


  .logo{

    font-size:22px;

  }



  .hero h1{

    font-size:38px;

  }



  .hero p{

    font-size:16px;

  }



  .cards{

    grid-template-columns:1fr;

  }


  .stat-grid{

    grid-template-columns:1fr;

  }


  .container{

    padding:0 15px;

  }
  .card,
  .project-card,
  .grid-2{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

  }



  .show{

    opacity:1;

    transform:none;

  }



  #topBtn{

    display:none;

    align-items:center;

    justify-content:center;

  }

}