@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');
*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: "Poppins", sans-serif;
}


@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-50px); 
  }
  100% {
    opacity: 1;
    transform: translateY(0); 
  }
}

body{
 height: 100vh;
 background-image: url(wp1.jpg);
}
.h1{
color: rgb(red, green, blue);
}
.bergerak{
color:rgb(151, 151, 151);
}
.container{
 position: relative;
 height: 100%;
background: rgba(225, 255, 255, .1);
border: 2px solid rgba(225, 255, 255, .2);
border-radius: 100px;
backdrop-filter: blur(30px);
}

header{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 padding: 25px 5%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 z-index: 100;
}
.Logo{
 font-size: 25px;
 color: #fff;
 text-decoration: none;
 font-weight: 600;
}

.navbar a {
 font-size: 18px;
 color: #fff;
  text-decoration: none;
 font-weight: 500;
 margin-left: 35px;
 border-bottom: 2px solid transparent;
 transition: .5s;
}

.navbar a:hover,
.navbar a.active {
 border-color: #fff;

}
.social-icons a {
 display: inline-flex;
 justify-content: center;
 align-items: center;
 width: 45px; 
 height: 45px;
 background: transparent; 
 border-radius: 50%; 
 box-shadow: 0 0 10px #fff;
 color: #333; 
 font-size: 20px;
 text-decoration: none;
 margin-right: 12px;
 transition: 0.3s;
}
.home {
 display: flex;
 justify-content: space-between;
 align-items: center;
 height: 100%;
 gap: 50px;
 padding: 50px 5% 0;
 color: #fff;
 animation-delay: 1.5s;
}

.home-detail {
 flex: 1; 
  animation: slideDown 1s ease-out forwards;
  opacity: 0; 
}
.home-detail h1 {
 font-size: 55px;
 line-height: 1;
}

.home-detail h2 {
 font-size: 32px;
}

.home-detail p {
 margin: 10px 0 20px;
}
.download-social {
 margin-top: 20px;
}
.home-detail .download-social {
 display: flex;
 align-items: center;
 gap: 25px;
 margin-top: 20px;
 margin-bottom: 20px;
}
.btn {
 display: inline-block;
 padding: 10px 30px;
 background: #fff;
 border: 2px solid #fff;
 border-radius: 40px;
 box-shadow: 0 0 10px #fff;
color: #333;
 text-decoration: none;
 font-weight: 500;
 margin-right: 50px;
 transition: .5s;
 font-size: 18px;
}

.btn:hover {
 background: transparent;
 color: #fff;
 box-shadow: none;
}

.home-detail .social-icons{
 margin-left: 20px;
}


.home-detail .social-icons a {
 display: inline-flex;
padding: 8px;
border: #fff;
border-radius: 50%;
font-size: 20px;
color: #fff;
text-decoration: none;
margin: 0 8px;
transition: .5s;
} 

 .home-detail .social-icons a:hover {
 background: #fff;
 color: #333;
 box-shadow: 0 0 10px #fff;
 }

 .home-img {
 flex-shrink: 0; 
 margin-right: 40px;
}
.home-img .img-box {
 position: relative;
 width: 250px;
 height: 250px;
 border: 2px solid #fff;
 border-radius: 50%;
 box-shadow: 0 0 20px #fff;
 overflow: hidden;
}

 .home-img .img-box img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}