@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
body, html {
  padding: 0;
  margin: 0;
  font-family: 'Poppins', sans-serif;
}
a {
  text-decoration: none;
}
h1, h2, h3 {
  padding: 0;
  margin: 0
}
#header {
  -webkit-box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.25);
box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.25);
}
 #header .header{

   display: flex;
   width: 75%;
   margin: 0 auto;
   justify-content: space-between;
   align-items: center

 }

 #header .header .logo  {
   padding: 10px

 }

 #header .header ul {
   display: flex;
   list-style: none;
   color:black
 }
 #header .header ul li a {
    text-decoration: none;
   color:black;
   display: block;
   padding: 10px
 }
 .section {
   width: 85%;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
   padding: 50px;
  align-items: center;
  gap:150px;

 }

 .section, .info {
   box-sizing: border-box;

 }

 .section img {
   width: 100% !important
 }

 .content {
   display: flex;
   flex-direction: column;
  font-size: 1.1em;
flex-wrap: wrap;
background: white;

position: relative;
 }


  .content h3 {
    color: rgba(41,160,152,1);
  }
  .content h2 {
    font-size: 4em
  }

 .buton {

  width:260px;
  padding: 15px 50px;
  background: rgb(41,160,152);
  background: linear-gradient(90deg, rgba(41,160,152,1) 35%, rgba(42,169,111,1) 100%);
  color:white;
  text-transform: uppercase;
  text-align: center;
  border:2px solid rgba(41,160,152,1);
  transition: all 300ms

 }
 .buton:hover {
   background: white;
   color: rgba(41,160,152,1)

 }

 #footer {
   background: rgb(41,160,152);
   background: linear-gradient(90deg, rgba(41,160,152,1) 35%, rgba(42,169,111,1) 100%);
 }
 .footer {
   width: 75%;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 25px 0px;
   font-size: 18px
 }

 .footer ul {
   display:flex;
   list-style: none;
   padding: 0;
   margin: 0
 }
 .footer ul li a {
   display:flex;
   padding: 10px;
   color: white;
   font-size: 18px;
 }

 .info {
   width: 75%;
   margin: 0 auto;
   display: grid;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
   padding: 80px 0px;
   gap:80px
 }

.info ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.info a {
  color : rgba(41,160,152,1)
}
.info h3 {
margin-bottom: 15px
}

@media screen and (max-width: 1200px) {
  #header .header ul {
     display: none
   }

  .section {
    gap: 15px
  }

   .content h2 {
     font-size: 2em
   }

}

@media screen and (max-width: 600px) {

  .footer, .info, .section {
    width:100%;
    padding: 12px;
    gap:30px !important
  }



  .secdtion {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    gap: 15px
  }

 #header .header ul {
    display: none
  }

  .section img {
    width: 100%
  }

  .info {
    grid-template-columns: 1fr;
    padding: 15px;
    gap:15px
  }

  .content h2 {
    font-size: 1em
  }

  .info-box {
    text-align: center;
  }
  .footer {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

}