
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  scroll-behavior:smooth;
}

body{
font-family:'Plus Jakarta Sans',sans-serif;
background:#ffffff;
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
font-family:'Manrope',sans-serif;
}

/* =========================
   ABOUT SECTION
========================= */

.about-section{
  position:relative;
  padding:120px 20px;
  background:#ffffff;
  overflow:hidden;
}

.container{
  max-width:1300px;
  margin:auto;
}

/* =========================
   TOP
========================= */

.about-top h1{
  max-width:950px;
  margin:0 auto 90px;
  text-align:center;

  animation:fadeUp 1s ease-in-out;
}

.about-badge{
  display:inline-block;
  padding:12px 22px;
  border-radius:100px;
  background:#fff5f5;
  border:1px solid rgba(255,0,0,0.10);
  color:#d40000;
  font-size:15px;
  font-weight:600;
  margin-bottom:25px;

  transition:all .45s ease-in-out;
}

.about-badge:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 25px rgba(255,0,0,0.08);
}

.about-top h2{
  font-size:clamp(42px,6vw,72px);
  line-height:1.1;
  font-weight:800;
  color:#111111;
  margin-bottom:25px;
}

.about-top h1 span{
  background:linear-gradient(90deg,#d40000,#ff3b3b);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.about-top p{
  font-size:19px;
  color:#555555;
  line-height:1.9;
}

/* =========================
   GRID
========================= */

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  margin-bottom:120px;
}

/* =========================
   IMAGE
========================= */

.about-image-box{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;

  animation:fadeLeft 1s ease-in-out;
}

.about-image-box img{
  width:100%;
  max-width:460px;
  border-radius:35px;
  position:relative;
  z-index:2;
  padding:18px;
  background:#fff;

  box-shadow:
  0 25px 60px rgba(255,0,0,0.12);

  transition:
  transform .6s ease-in-out,
  box-shadow .6s ease-in-out;
}

.about-image-box img:hover{
  transform:
  translateY(-10px)
  scale(1.02);

  box-shadow:
  0 35px 80px rgba(255,0,0,0.18);
}

.glow-circle{
  position:absolute;
  width:430px;
  height:430px;
  border-radius:50%;

  background:
  radial-gradient(circle,
  rgba(255,0,0,0.12),
  transparent 70%);

  filter:blur(40px);

  animation:pulseGlow 4s ease-in-out infinite;
}

/* =========================
   CONTENT
========================= */

.about-content{
  display:flex;
  flex-direction:column;
  gap:25px;

  animation:fadeRight 1s ease-in-out;
}

.about-card{
  display:flex;
  gap:20px;
  padding:30px;
  border-radius:28px;

  background:#ffffff;
  border:1px solid rgba(0,0,0,0.08);

  box-shadow:
  0 10px 30px rgba(0,0,0,0.05);

  transition:
  all .5s ease-in-out;
}

.about-card:hover{
  transform:translateY(-10px);

  border-color:rgba(255,0,0,0.25);

  box-shadow:
  0 25px 55px rgba(255,0,0,0.12);
}

.about-icon{
  min-width:70px;
  height:70px;

  display:flex;
  justify-content:center;
  align-items:center;

  border-radius:20px;

  background:
  linear-gradient(135deg,#ff1e1e,#8b0000);

  font-size:30px;

  transition:
  transform .45s ease-in-out;
}

.about-card:hover .about-icon{
  transform:
  rotate(8deg)
  scale(1.08);
}

.about-card h3{
  font-size:26px;
  color:#111111;
  margin-bottom:12px;
}

.about-card p{
  color:#666666;
  line-height:1.9;
  font-size:17px;
}

/* =========================
   FOUNDER SECTION
========================= */

.founder-section{
  margin-top:80px;
  padding:70px;
  border-radius:35px;

  background:
  linear-gradient(
    135deg,
    #fff5f5,
    #ffffff
  );

  border:1px solid rgba(255,0,0,0.08);

  box-shadow:
  0 15px 40px rgba(0,0,0,0.05);

  animation:fadeUp 1.1s ease-in-out;
}

.founder-section h2{
  font-size:48px;
  margin-bottom:25px;
  color:#111111;
}

.founder-section p{
  font-size:18px;
  line-height:2;
  color:#555555;
  margin-bottom:22px;
}

/* =========================
   EXPERTISE
========================= */

.expertise-section{
  margin-top:100px;
}

.expertise-title{
  text-align:center;
  margin-bottom:60px;
}

.expertise-title h2{
  font-size:56px;
  color:#111111;
  margin-bottom:15px;
}

.expertise-title p{
  color:#666666;
  font-size:18px;
}

.expertise-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
}

.expertise-card{
  padding:35px;
  border-radius:30px;

  background:#ffffff;

  border:1px solid rgba(0,0,0,0.08);

  box-shadow:
  0 10px 30px rgba(0,0,0,0.05);

  transition:
  all .5s ease-in-out;
}

.expertise-card:hover{
  transform:translateY(-10px);

  border-color:rgba(255,0,0,0.25);

  box-shadow:
  0 20px 55px rgba(255,0,0,0.10);
}

.expertise-card h3{
  font-size:28px;
  margin-bottom:18px;
  color:#111111;
}

.expertise-card ul{
  padding-left:20px;
}

.expertise-card ul li{
  margin-bottom:14px;
  color:#555555;
  line-height:1.8;
}

/* =========================
   STATS
========================= */

.about-stats{
  margin-top:100px;

  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
}

.stat-box{
  padding:35px 25px;
  border-radius:25px;
  text-align:center;

  background:#ffffff;

  border:1px solid rgba(0,0,0,0.08);

  box-shadow:
  0 10px 30px rgba(0,0,0,0.05);

  transition:
  all .45s ease-in-out;
}

.stat-box:hover{
  transform:
  translateY(-10px)
  scale(1.02);

  border-color:rgba(255,0,0,0.25);

  box-shadow:
  0 20px 55px rgba(255,0,0,0.10);
}

.stat-box h3{
  font-size:42px;
  color:#d40000;
  margin-bottom:12px;
}

.stat-box p{
  color:#666666;
}

/* =========================
   ANIMATION
========================= */

@keyframes fadeUp{

  from{
    opacity:0;
    transform:translateY(40px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}

@keyframes fadeLeft{

  from{
    opacity:0;
    transform:translateX(-60px);
  }

  to{
    opacity:1;
    transform:translateX(0);
  }

}

@keyframes fadeRight{

  from{
    opacity:0;
    transform:translateX(60px);
  }

  to{
    opacity:1;
    transform:translateX(0);
  }

}

@keyframes pulseGlow{

  0%{
    transform:scale(1);
    opacity:.7;
  }

  50%{
    transform:scale(1.08);
    opacity:1;
  }

  100%{
    transform:scale(1);
    opacity:.7;
  }

}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:992px){

  .about-grid,
  .expertise-grid{
    grid-template-columns:1fr;
  }

  .about-image-box{
    order:-1;
  }

  .about-stats{
    grid-template-columns:repeat(2,1fr);
  }

  .founder-section{
    padding:40px;
  }

}

@media(max-width:768px){

  .about-section{
    padding:90px 18px;
  }

  .about-top h2{
    font-size:44px;
  }

  .expertise-title h2{
    font-size:40px;
  }

  .founder-section h2{
    font-size:36px;
  }

  .about-card{
    flex-direction:column;
  }

  .about-stats{
    grid-template-columns:1fr;
  }

}

/* =========================
   SECTION TITLE
========================= */

.section-title{
  text-align:center;
  margin-bottom:40px;
}

.section-title h2{
  font-size:52px;
  color:#111;
}

/* =========================
   WHO WE ARE
========================= */

.who-we-are{
  margin-top:100px;
  text-align:center;
}

.who-we-are p{
  font-size:18px;
  line-height:2;
  color:#555;
  max-width:1000px;
  margin:0 auto 25px;
}

/* =========================
   WHY CHOOSE
========================= */

.why-choose{
  margin-top:120px;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
}

.why-card{
  padding:35px;
  border-radius:30px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);

  box-shadow:
  0 10px 30px rgba(0,0,0,0.05);

  transition:.4s;
}

.why-card:hover{
  transform:translateY(-10px);

  box-shadow:
  0 20px 50px rgba(255,0,0,0.10);
}

.why-card h3{
  margin-bottom:15px;
  font-size:26px;
}

.why-card p{
  line-height:1.9;
  color:#666;
}

/* =========================
   VISION MISSION
========================= */

.vision-mission{
  margin-top:120px;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

.vision-box,
.mission-box{
  padding:50px;
  border-radius:35px;

  background:
  linear-gradient(135deg,#fff5f5,#ffffff);

  border:1px solid rgba(255,0,0,0.08);

  box-shadow:
  0 10px 35px rgba(0,0,0,0.05);
}

.vision-box h2,
.mission-box h2{
  margin-bottom:20px;
  font-size:38px;
}

.vision-box p,
.mission-box p{
  line-height:2;
  color:#555;
}

/* =========================
   CTA
========================= */

.about-cta{
  margin-top:120px;
  padding:80px 40px;
  border-radius:40px;
  text-align:center;
margin-bottom:10px;
  background:
  linear-gradient(135deg,#ff1e1e,#8b0000);

  color:#fff;
}

.about-cta h2{
  font-size:58px;
  margin-bottom:20px;
}

.about-cta p{
  max-width:850px;
  margin:auto;
  line-height:2;
  font-size:18px;
}

.cta-btn{
  display:inline-block;
  margin-top:35px;
  padding:18px 40px;
  border-radius:100px;

  background:#fff;
  color:#d40000;

  font-weight:700;
  text-decoration:none;

  transition:.4s;
}

.cta-btn:hover{
  transform:translateY(-5px);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

  .why-grid,
  .vision-mission{
    grid-template-columns:1fr;
  }

  .section-title h2{
    font-size:38px;
  }

  .about-cta h2{
    font-size:40px;
  }

}