/* RESET */
* {margin:0;padding:0;box-sizing:border-box;}
body {
  font-family:'Mako',sans-serif;
  background:#f9f9f9;
  color:#222;
  line-height:1.8;
}

/* HEADER */
.header {
  position:fixed;
  top:0;
  width:100%;
  background:#ffffff;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  z-index:1000;
}
.header-inner {
  max-width:1200px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 25px;
}
.logo-text {
  font-family:'Bebas Neue',sans-serif;
  font-size:38px;
  color:#111;
  text-decoration:none;
}
.socials img {
  width:30px;
  margin-left:12px;
  transition:transform 0.2s;
}
.socials img:hover {transform:scale(1.1);}
body {padding-top:95px;}

/* INTRO SECTION */
.intro-section {
  text-align:center;
  background:#007bff;
  color:white;
  padding:70px 20px;
}
.page-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:54px;
  margin-bottom:15px;
}
.intro {
  font-size:20px;
  max-width:800px;
  margin:auto;
  color:#f0f0f0;
}

/* CONTENT */
.content {
  max-width:1200px;
  margin:auto;
  padding:40px 25px;
}

/* ALTERNATING SECTIONS */
.section {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  margin-bottom:80px;
  opacity:0;
  transform:translateY(30px);
  transition:all 0.7s ease-out;
  padding:40px 20px;
  border-radius:12px;
}
.section.active {opacity:1;transform:translateY(0);}
.section.reverse {flex-direction:row-reverse;}
.section.light {background:#fff;}
.section.dark {background:#f1f3f6;}
.section .image {flex:1;}
.section .text {flex:1;}
.section h2 {
  font-family:'Bebas Neue',sans-serif;
  font-size:32px;
  margin-bottom:15px;
}
.section p {font-size:19px;color:#333;}
img {max-width:100%;border-radius:10px;display:block;}

/* FEATURE SECTIONS */
.feature {
  text-align:center;
  margin:100px 0;
  padding:60px 20px;
  opacity:0;
  transform:translateY(30px);
  transition:all 0.7s ease-out;
}
.feature.active {opacity:1;transform:translateY(0);}
.feature h2 {
  font-family:'Bebas Neue',sans-serif;
  font-size:38px;
  margin-bottom:15px;
}
.feature p {
  max-width:900px;
  margin:auto;
  font-size:19px;
  color:#333;
}
.feature.highlight {
  background:#007bff;
  color:white;
  border-radius:15px;
}

/* CTA */
.cta {
  text-align:center;
  background:#111;
  color:white;
  padding:80px 25px;
  border-radius:12px;
  margin:80px 0;
  opacity:0;
  transform:translateY(30px);
  transition:all 0.7s ease-out;
}
.cta.active {opacity:1;transform:translateY(0);}
.cta-btn {
  background:white;
  color:#111;
  padding:15px 35px;
  border-radius:5px;
  text-decoration:none;
  font-weight:bold;
  font-size:18px;
  display:inline-block;
  margin-top:25px;
}

/* RELATED ARTICLES */
.related {
  text-align:center;
  margin:100px 0;
}
.related h2 {
  font-family:'Bebas Neue',sans-serif;
  font-size:44px;
  margin-bottom:40px;
}
.card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:30px;
}
.card {
  background:#fff;
  border-radius:15px;
  box-shadow:0 3px 10px rgba(0,0,0,0.1);
  overflow:hidden;
  transition:transform 0.3s ease,box-shadow 0.3s ease;
}
.card:hover {
  transform:translateY(-5px);
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
}
.card img {width:100%;height:220px;object-fit:cover;}
.card-content {padding:20px;}
.card-content h3 {
  font-family:'Bebas Neue',sans-serif;
  font-size:26px;
  margin-bottom:10px;
}
.card-content p {
  font-size:16px;
  color:#555;
  margin-bottom:15px;
}
.card-btn {
  background:#007bff;
  color:white;
  text-decoration:none;
  padding:10px 20px;
  border-radius:5px;
  font-weight:bold;
  transition:background 0.2s;
}
.card-btn:hover {background:#005dc3;}

/* FOOTER */
.site-footer {
  background:#222;
  color:#f0f0f0;
  text-align:center;
  padding:30px 15px;
}
.footer-links {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  margin-bottom:15px;
}
.footer-links a {
  color:#f0f0f0;
  text-decoration:none;
  font-size:16px;
}
.footer-links a:hover {color:#4CAF50;}

/* RESPONSIVE */
@media(max-width:900px){
  .header-inner{flex-direction:column;gap:10px;}
  .page-title{font-size:38px;}
  .intro{font-size:17px;}
  .section{flex-direction:column;text-align:center;}
  .section.reverse{flex-direction:column;}
  .feature h2{font-size:32px;}
  .related h2{font-size:36px;}
}

.blogs {
  display: inline-block;
  text-decoration: none;
  color: #007bff;
  font-size: 18px;
  transition: color 0.2s ease;
}
.blogs:hover {
  color: #0056b3;
  text-decoration: underline;
}
td p {
  margin: 10px 0;
}