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

.navbar {
  background-color:#FAFAFA;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-radius: 30px;
  width: 100%;
}

.logo img {
  height: 25px;
  width: auto;
}

.center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.links {
  display: flex;
  gap: 25px;
  padding: 10px 20px;
  border-radius: 25px;
  background-color: #FEFEFF;
  align-items: center;
}

.links li {
  list-style: none;
}

.links li a {
  text-decoration: none;
  color: black;
  font-weight: 500;
}
.other a{
    display: flex;
    text-decoration: none;
    list-style: none;
    font-weight:500;
    color: black;
}
.contact-btn a {
 
  color: black;
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  border: none;
  outline: none;
  box-shadow: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-btn a:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.icon{
  align-items: center;
  justify-content: center;
  display: flex;
}
.icon2{
  display: none;
}
 /* smaller samrt phones */
 @media screen and (min-width:0px) and (max-width:480px) {
  .links{
    display: none;
  }
  .contact-btn{
    display: none;
  }
  .other{
    display: none;
  }
  .icon{
    display: none;
  }
  .icon2{
    display: flex;
    justify-content: flex-end;
  }
 }
 /* tablets */
 @media  screen and (min-width:481px) and (max-width:768px) {
  .links{
    display: none;
  }
  .icon{
    display: none;
  }
  .icon2{
    display: flex;
    justify-content: flex-end;
  }
 }
 /* hero section */
.herosection{
  background-image:url(images/Rectangle\ 14.png) ;
 background-size: cover;
 background-position: center;
 flex-wrap: wrap;
 height: 617px;
 width: 1380;
 border-radius: 15px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 50px 100px;
 box-sizing: border-box;
}
.text1{
  text-align:start;
  display: flex;
  flex: 1;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}
.text1 h1{
  font-size: 65px;
  font-weight: bold;
}
.text1 h4{
  font-size: 25px;
}
.button{
  background-color: white;
  border-radius: 40px;
  width: 438px;
  height: 60px;
  justify-content: space-between;
  text-align: end;
  align-items: center;
  display: flex;
}
.hero-btn{
background-color: black;
color: white;
border-radius: 40px;
width: 147px;
height: 60px;

}
.button h3{
  text-align: start;
  display: flex;
  margin-left: 20PX;
}
.img1{
  width: 785px;
  height: 667px;
  display: flex;
}
/* media quiries */
/* mobile */
@media  screen and (min-width:0px) and (max-width:480px) {
  *{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
  }
  .herosection{
    display: flex;
    flex-direction: column-reverse;
    background-image: url(images/Rectangle\ 14.png);
    
  }
  .img1{
    display: flex; 
    width: 50px;
    height: 25px;
  }
}
/* main */
.container1{
  margin-top: 75px;
}
.text2{
  text-align: center;
}
.text2 h1{
 font-size: 50px;
}
.text2 h4{
  font-size: 25px;
}
.cardwrap{
  display: flex;
  justify-content: space-between;
  margin-left: 75px;
  margin-right: 75px;
  margin-top: 50px;
}
.card1{
  height: 225px;
  width: 329px;
  flex-grow: 1;
}
.card1 i{
width: 75px;
height: 75px;
color: rgb(170, 229, 170);
font-size: 70px;
}
.card1 h1{
  font-size: 40px;

}
.card1 p{
  font-size: 20px;
  margin-top: 20px;
}
.card2{
  height: 225px;
  width: 329px;
  flex-grow: 1;
}
.card2 i{
width: 75px;
height: 75px;
color: black;
font-size: 70px;
}
.card2 h1{
  font-size: 40px;

}
.card2 p{
  font-size: 20px;
  margin-top: 20px;
}
.card3{
  height: 225px;
  width: 329px;
  flex-grow: 1;
}
.card3 i{
width: 75px;
height: 75px;
color: rgb(61, 141, 210);
font-size: 70px;
}
.card3 h1{
  font-size: 40px;

}
.card3 p{
  font-size: 20px;
  margin-top: 20px;
}
/* media quiries */
/* mobile */
@media  screen and (min-width:0px) and (max-width:480px){
  .cardwrap{
    display: flex;
    flex-direction: column;
  }
}
/* projects */
.container2{
  margin-top: 50px;
}


.text3 {
  margin-left: 150px;
}
.container2 p{
font-size: 25px;
margin-left: 15px;
}
.container2 h1{
  font-size: 50px;
  margin-left: 15px;
}
.cardwrap2{
  display: flex;
  margin-left: 160px;
  margin-right: 75px;
  margin-top: 50px;
  justify-content: space-between;
}

.card4 img{
  width: 400px;

}
.card4 h1{
  font-size: 30px;
  margin-top: 20px;
}
.card4 p{
  font-size: 20px;
  margin-top: 20px;
}

.card5 img{
  width: 400px;
}
.card5 h1{
  font-size: 30px;
  margin-top: 20px;
}
.card5 p{
  font-size: 20px;
  margin-top: 20px;
}
.card6 img{
  height: 400px;
  width: 400px;
}
.card6 h1{
  font-size: 30px;
  margin-top: 20px;
}
.card6 p{
  font-size: 20px;
  margin-top: 20px;
  text-align: start;
}
.rate img{
  height: 20px;
  width: 180px;
  margin-left: 20px;
}
/* media quiries */
@media  screen and (min-width:0px) and (max-width:480px){
  .cardwrap2{
    display: flex;
    flex-direction: column;
  }
}
/* tranfer */
.container3{
  margin-top: 75px;
}
.heading{
  text-align: center;
  font-size: 50px;
}
.box{
  display: flex;
  width: 1245px;
height: 577px;
border-width: 1px;
margin-top: 50px;
justify-content: space-evenly;
margin-left: 300px;
}
.left{
width: 500px;
margin-top: 25px;
}
.left h1{
  font-size: 38px;
}
.left p{
  font-size: 20px;
  margin-top: 25px;
}
.white{
  width: 153;
height: 60;;
opacity: 1;
top: 2502px;
left: 98px;
border-radius: 40px;
padding-top: 15px;
padding-right: 35px;
padding-bottom: 15px;
padding-left: 35px;
gap: 10px;
margin-top: 25px;
background-color: black;
color: white;
}
.black{
  width: 153;
height: 60;
opacity: 1;
top: 2502px;
left: 98px;
border-radius: 40px;
padding-top: 15px;
padding-right: 35px;
padding-bottom: 15px;
padding-left: 35px;
gap: 10px;

}
 
.stats-container {
  display: flex;
  justify-content: center;
  gap: 60px; /* Space between numbers */
  margin: 40px 0;
  
}

.stat-box h2 {
  font-size: 55px;
  color: #000;
  margin: 0;
}

.stat-box p {
  font-size: 16px;
  color: #666;
  margin-top: 8px;
}
/* media quiries */
@media  screen and (min-width:0px) and (max-width:480px){
  .box{
    display: flex;
    flex-direction: column-reverse;
    margin-left: 0%;
  }
}
/* subscribe */
.container4{
  background-image: url(images/Rectangle\ 14.png);
  width: 1380px;
  height: 457px;
  display: flex;
  margin-top: 75px;
  margin-left: 275px;
  
}
.image2 img{
  width: 606px;
height: 557px;
top: 2893px;
left: 809px;

}

.text2 h1{
  margin-top: 75px;
  font-size: 50px;

}
.text2 p{
  margin-top: 35px;
  font-size: 20px;
  margin-left: 50px;
}
.button2{
  background-color: rgb(255, 255, 255);
  border-radius: 40px;
  width: 438px;
  height: 60px;
  justify-content: space-between;
  text-align: end;
  align-items: center;
  display: flex;
  margin-left: 180px;
  margin-top: 50px;
  border-radius: 15px;
}
.hero-btn{
background-color: black;
color: white;
border-radius: 40px;
width: 147px;
height: 60px;

}
.button2 h3{
  text-align: start;
  display: flex;
  margin-left: 20PX;
}
@media  screen and (min-width:0px) and (max-width:480px){
  .container4{
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    height: 100%;
    justify-content: end;
    text-align: end;
    align-items: baseline;
    margin-top: 800px;
    margin-left: 0%;
    margin-right: 0%;
  }
}