*{
    padding: 0px ;
    margin: 0px ;
transition: 500ms ;
scroll-behavior: smooth;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
   

 @keyframes rotate360 {
   from {
       transform: rotate(0deg);
   }
   to {
       transform: rotate(360deg);
   }
}

@keyframes appear {
   from{
       opacity: 0;
    transform: scale(0);

   }
   to{
       opacity: 1;
      transform: scale(1);
   }
}


.apear{
   animation:  appear linear;
   animation-timeline: view();
   animation-range: entry 7%;
}

.apear2{
   animation:  appear linear;
   animation-timeline: view();
   animation-range: entry 1%;
}
 
.head-q{
   color: blue;
   font-weight: bold;
   font-size: 21px;
}
 
 body{
   background: #000;
   overflow-x: hidden;
   background-image: url(./assets/stars.jpg);
   background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
 
padding-left: 20px;
padding-right: 20px;

}
button{
   background: transparent;
   font-size: 20px;
   border: none;
   margin-right: 16px;
   cursor: pointer;
}

 .header{
   display: flex;
   justify-content: center;
 }
 header {
    background: rgb(255, 255, 255);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
    position: fixed;
    border-radius:0 0 20px 20px;
   padding: 10px 0px;
   margin: auto;
   width: 100%;
 }
 
.icon-area{
   display: flex;
   align-items: center ;
   cursor: pointer;
    margin-left: 10px;
}
.icon-img{
 height: 40px;
  
 display: inline;
}
.icon-text{
   font-size: 28px ;
   font-weight: 200;
   color: rgb(33, 55, 252);
}

.buttons-area{
   display: flex;
   align-items: center;
 
   
}
.buttons-header{
   background: transparent;
   font-size: 20px;
   border: none;
   margin-right: 16px;
   cursor: pointer;
}
.buttons-header:hover{
   color: rgb(33, 55, 252);

}
 
/* background img */
.bg{
   position: absolute;
   top: 0;
   left: 0px;
   width: 100vw;
   height: 100vh;
    
   overflow: hidden;
   
   display: flex;
   align-items: center ;
   z-index: -29;
}

.earth-main{
   animation: rotate360 200s infinite linear;

   width: 100vw;
   position: relative;
   left: 50% ;
   top: 10%;
  
   border-radius: 100%;

}

/* main */
.main{
   height: 80vh;
   padding-top:100px ;
   display: flex;
  align-items: center;
overflow-x: hidden;
 padding: 20px;
   
}
.main-text{
max-width: 800px;
background: rgb(255, 255, 255);
border-radius: 20px;
padding: 20px;
}

.main-text>h1{
   color: blue;
   font-size: 25px;
  
}
.main-text>p{
   font-size: 17px;
}



/* about team */

.about-section{
   margin-top: 100px;
}
.about-h1{
width: 100%;
text-align: center;
font-size: 70px;
color: white;
margin-bottom: 20px;
}

 .profile-side{
   display: flex;
   align-items: center;
   justify-content:  center;
   flex-wrap: wrap;
   flex-direction: column;
margin: auto;
 }

 .member{
   display: flex;
   align-items: center;
   justify-content:  center;
   flex-direction: column;
 

 }

 .profile{
   position: relative;
   overflow: hidden;
   margin: 10px;
   background: rgb(255, 255, 255);
   border-radius: 100%;
   width: 300px;
   height: 300px;
   display: flex;
   align-items: center;
   justify-content:  center;
   flex-direction: column; 
 }

 

 .profile>img {
   width: 200px;
   height: 200px;
   border-radius: 100%;
   position: relative;
  
 }

/* start page */


.start-page {
height: 100vh;
display: flex;
align-items: center;
}

.content-start-page{
background-color: white;
height: 50%;
width:100%; 
margin: auto;
border-radius: 20px ;
transform: scale(0.9);
 display:flex;
align-items: center;
justify-content: center;
max-width: 700px;


}
.content-start-page:hover{
transform: scale(1);
}
.content-start-page .content{
   text-align: center;
 
}
.content-start-page .content h1{
margin: 16px;
font-size: 30px ;
}

.content-start-page>.content>a>button{
  color: blue;
   padding:  10px;
   border-radius: 20px;
   border: 1px solid blue ;
}
.content-start-page>.content>a>button:hover{
   background-color: blue;
   color: white;
}

 .start-img{
   /* img */
   background-image: url(./assets/island2.jpg);
   background-position:center;
   background-repeat: no-repeat;
   background-size: cover;
   width: 80%;
   height: 100%;
   border-radius: 20px;

   border-left: #000 solid 1px;

   /* text */
   display: flex;
   align-items: center;
   justify-content: center;
   color: black;
   font-size: 30px;

 }
 .start-img:hover{
   font-size: 35px;
   font-weight: 400;
 }

 @media screen and (min-width:768px)  {
   .earth-main{
      left:60% ;
      top: -30%;
   }
   
 
   .about-project{
      margin-left: 10px;
      margin-right: 10px;
      width: 66.6%;
   }
   .about-project h1{
      font-size: 1.5rem /* 24px */;
      line-height: 2rem /* 32px */;
 
   }
   .about-project p{
      font-size: 1.125rem /* 18px */;
      line-height: 1.75rem /* 28px */;
   }

   .about-section{
      flex-direction: row;
   } 
  
 

   .about-text{
      margin-left: 20px;
   }

   .about-text h1{
      font-size: 24px;
      }
      .about-text p{
      font-size: 18px;
      }


      .member{
      flex-wrap: wrap;
      flex-direction: row;
   } 
 
 }
   
 

 


 @media screen and (min-width:1024px) {
   

   header{
      width: 66.6%;
      align-items: center;
      padding: 16px;
      
   }

   .main-text>h1{
      color: blue;
      font-size: 40px;
     
   }
   .main-text>p{
      font-size: 25px;
   }
   
   .about-project{
      width: 50%;
      margin-left: 3%;
   }

   .about-project h1{
      font-size: 2.25rem /* 36px */;
      line-height: 2.5rem /* 40px */;
       
   }
   .about-project p{
      font-size: 1.5rem /* 24px */;
      line-height: 2rem /* 32px */;
   }
   .earth-photo{
      margin-right: 20px;
      width: 500px;
      height: 500px;
   }
.about-section-team{
   padding: 80px;
   justify-content: space-between;
} 
.img-about-team{
   display: block;
}
.img-about-team:hover{
   transform: scale(1);
}
.about-text{
   width: 80%;
}

.about-text h1{
font-size: 30px;
}
.about-text p{
font-size: 20px;
}






 /* animation hover */
 
 .profile:hover img{
   width: 360px;
   height: 400px;
  
   
 }
 


 
}