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

html {
  scroll-behavior: smooth;
}

body{
  background:#000;
  color:white;
}

.blog-header{
  max-width:1200px;
  margin:40px auto;
}

.blog-header h1{
  font-size:60px;
  font-weight:700;
  letter-spacing:2px;
  margin-top:100px;
}


.blog-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px;
}

.blog-card{
  position:relative;
}

.blog-label{
  display:inline-block;
  background:#facc15;
  color:black;
  font-weight:700;
  padding:6px 15px;
  font-size:14px;
  margin-bottom:15px;
  transform:skewX(-15deg);

  opacity:0;
  animation: fadeUp 0.8s ease forwards;
}

.blog-card:nth-child(1) .blog-label { animation-delay: 0.2s; }
.blog-card:nth-child(2) .blog-label { animation-delay: 0.4s; }
.blog-card:nth-child(3) .blog-label { animation-delay: 0.6s; }
.blog-card:nth-child(4) .blog-label { animation-delay: 0.8s; }
.blog-card:nth-child(5) .blog-label { animation-delay: 1s; }

.blog-label span{
  display:inline-block;
  transform:skewX(15deg);
}

.blog-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  margin-bottom:15px;
}

.blog-card p{
  font-size:13px;
  line-height:1.6;
  color:#d1d5db;
  margin-bottom:20px;
  text-align: justify;
}

.read-more{
  display:inline-block;
  background:#22c55e;
  padding:6px 18px;
  font-size:12px;
  font-weight:700;
  color:white;
  text-decoration:none;
}

.line{
  height:2px;
  background:white;
  margin-top:15px;
  width:100%;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px) skewX(-15deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) skewX(-15deg);
  }
}

@media(max-width:900px){
  .blog-container{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:600px){
  .blog-container{
    grid-template-columns:1fr;
  }
}

.detail-modern{
  width:100%;
  max-width: 1200px;
  margin: 0 auto;
  background:#000;
  display:flex;
  align-items:center;
  padding:120px 0;
  scroll-margin-top:100px;
}

.detail-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:80px;
  width:100%;
}

.detail-text{
  flex:1;
  max-width:600px;
}

.detail-text h2{
  font-size:48px;
  font-weight:700;
  font-style:italic;
  letter-spacing:3px;
  color:#2dd4bf;
  margin-bottom:30px;
}

.detail-text p{
  color:#d1d5db;
  line-height:1.9;
  font-size:15px;
  margin-bottom:25px;
  text-align:justify;
}

.detail-image-wrapper{
  position:relative;
  width:380px;
  height:380px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.detail-image-wrapper img{
  width:350px;
  height:350px;
  object-fit:cover;
  border-radius:50%;
  position:relative;
  z-index:2;
}

.custom-list {
  margin: 20px 0;
  padding-left: 20px;
  color: #d1d5db;
  font-size: 15px;
  line-height: 1.9;
}

.custom-list li {
  margin-bottom: 12px;
  text-align: justify;
}

.circle-bg{
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  background: radial-gradient(circle at center, 
              rgba(34,197,94,0.4) 0%, 
              rgba(0,0,0,0) 70%);
  z-index:1;
  filter:blur(30px);
}

.circle-bg {
  z-index: 1;
}

.detail-image-wrapper{
  position: relative;
  width: 380px;
  height: 380px;
}

.bg-layer{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 1;
}

.bg-layer img{
  position:absolute;
  width:520px;
  height:520px;
  object-fit:contain;
  transform: rotate(15deg);
  opacity:0.9;
}

.circle-bg{
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  background: radial-gradient(circle at center, 
              rgba(34,197,94,0.4) 0%, 
              rgba(0,0,0,0) 70%);
  filter:blur(30px);
}

.main-image{
  position: relative;
  width:350px;
  height:350px;
  object-fit:cover;
  border-radius:50%;
  z-index: 2;
}

@media(max-width:900px){
  .detail-content{
    flex-direction:column;
    text-align:center;
  }
}

@media (max-width:768px){

.blog-header h1{
  font-size:36px;
  text-align:center;
  margin-top:110px;
}

.blog-container{
  grid-template-columns:1fr;
  gap:40px;
}

.blog-card img{
  height:180px;
}

.detail-modern{
  padding:90px 20px;
}

.detail-content{
  flex-direction:column;
  text-align:center;
  gap:40px;
}

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

.detail-text p{
  font-size:14px;
}

.detail-image-wrapper{
  width:220px;
  height:220px;
  margin:auto;
}

.bg-layer img{
  width:330px;
  height:auto;
  transform:rotate(10deg);
  opacity:0.9;
}

.detail-image-wrapper img{
  width:120%;
  height:120%;
  object-fit:cover;
  border-radius:50%;
}

.circle-bg{
  width:300px;
  height:300px;
}

  .footer-dpi{
    padding:40px 20px 20px;
  }

  .footer-container{
    gap:20px;
  }

  .footer-logo img{
    width:70px;
    margin-bottom:10px;
  }

  .footer-logo h3{
    font-size:18px;
    letter-spacing:1px;
  }

  .footer-logo p{
    font-size:14px;
  }

  .footer-social{
    gap:12px;
    margin:5px 0;
  }

  .footer-social a{
    width:38px;
    height:38px;
    font-size:16px;
  }

  .footer-bottom{
    font-size:12px;
    line-height:1.6;
    margin-top:15px;
    padding-top:15px;
  }

}

@media (max-width: 1535px) {
  .detail-modern {
    padding-right: 6rem;
  }
}

@media (max-width: 1279px){
  .blog-container, .detail-modern, .blog-header {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .bg-layer img {
    width: 360px;
    height: 360px;
  }

  .detail-image-wrapper .main-image {
    width: 250px;
    height: 250px;
  }
}

@media (max-width: 639px) {
  .bg-layer img {
    width: 320px;
    height: 320px;
  }

  .detail-image-wrapper .main-image {
    width: 230px;
    height: 230px;
  }
}