/* =========================
   🔥 CREATIVE HERO SECTION
========================= */
.about-hero{
  position:relative;
  min-height:50vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;

  background:linear-gradient(135deg,#0a3d91,#00c896);
  color:#fff;
}

/* 🔥 Animated Gradient */
.about-hero::before{
  content:"";
  position:absolute;
  width:200%;
  height:200%;
  background:linear-gradient(45deg,#1b4f9c,#00b894,#1b4f9c);
  animation:gradientMove 8s linear infinite;
  opacity:0.2;
}

@keyframes gradientMove{
  0%{transform:translate(0,0);}
  50%{transform:translate(-25%,-25%);}
  100%{transform:translate(0,0);}
}

/* CONTENT */
.hero-content{
  position:relative;
  z-index:2;
  max-width:800px;
  padding:20px;
  animation:fadeUp 1s ease;
}

/* TAG */
.hero-tag{
  display:inline-block;
  background:rgba(255,255,255,0.2);
  padding:8px 18px;
  border-radius:30px;
  font-size:12px;
  margin-bottom:20px;
  letter-spacing:1px;
}

/* TITLE 🔥 */
.hero-content h1{
  font-size:52px;
  font-weight:700;
  margin-bottom:20px;
  line-height:1.2;
}

/* TEXT */
.hero-content p{
  font-size:18px;
  opacity:0.9;
  margin-bottom:30px;
}

/* BUTTON 🔥 */
.hero-btn{
  display:inline-block;
  background:#fff;
  color:#0a3d91;
  padding:14px 32px;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
  box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

.hero-btn:hover{
  transform:translateY(-5px) scale(1.05);
  box-shadow:0 15px 40px rgba(0,0,0,0.3);
}

/* 🔥 Glow Circle */
.hero-bg-shape{
  position:absolute;
  width:600px;
  height:600px;
  background:rgba(255,255,255,0.15);
  border-radius:50%;
  top:-150px;
  right:-150px;
  filter:blur(100px);
  animation:float 6s ease-in-out infinite;
}

/* FLOAT ANIMATION */
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(30px);}
}

/* TEXT ANIMATION */
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(40px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================
   📱 MOBILE RESPONSIVE
========================= */
@media(max-width:768px){

  .about-hero{
    min-height:70vh;
    padding:40px 20px;
  }

  .hero-content h1{
    font-size:30px;
  }

  .hero-content p{
    font-size:15px;
  }

  .hero-btn{
    padding:12px 24px;
    font-size:14px;
  }

  .hero-bg-shape{
    width:300px;
    height:300px;
    top:-100px;
    right:-100px;
  }
}



/* =========================
   🔥 PREMIUM ABOUT SECTION
========================= */
.about-modern{
  padding:120px 20px;
  background:linear-gradient(135deg,#f8fbff,#ffffff);
  position:relative;
  overflow:hidden;
}

/* Glow background */
.about-modern::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:rgba(0,184,148,0.15);
  filter:blur(120px);
  border-radius:50%;
  top:-150px;
  left:-150px;
}

/* WRAPPER */
.about-wrapper{
  max-width:1200px;
  margin:auto;
  display:flex;
  gap:80px;
  align-items:center;
  flex-wrap:wrap;
}

/* ================= IMAGE SIDE ================= */
.about-images{
  flex:1;
  position:relative;
}

/* MAIN IMAGE */
.img-main{
  width:100%;
  border-radius:20px;
  box-shadow:0 25px 60px rgba(0,0,0,0.1);
  transition:0.5s;
}

/* FLOAT EFFECT */
.img-main:hover{
  transform:translateY(-12px) scale(1.02);
}

/* OVERLAY IMAGE */
.img-overlay{
  position:absolute;
  bottom:-50px;
  right:-50px;
  width:65%;
  border-radius:20px;
  border:6px solid #fff;
  box-shadow:0 20px 50px rgba(0,0,0,0.2);
  transition:0.5s;
}

.img-overlay:hover{
  transform:scale(1.08);
}

/* DOT DESIGN */
.dots{
  position:absolute;
  top:-30px;
  right:-70px;
  width:140px;
  height:140px;
  background-image: radial-gradient(#00b894 2px, transparent 2px);
  background-size:15px 15px;
  opacity:0.3;
}

/* ================= CONTENT ================= */
.about-content{
  flex:1;
}

/* TAG */
.about-tag{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  color:#1b4f9c;
  background:#eaf1ff;
  padding:8px 18px;
  border-radius:30px;
  letter-spacing:1px;
}

/* TITLE 🔥 */
.about-content h2{
  font-size:42px;
  margin:20px 0;
  color:#1b4f9c;
  line-height:1.3;
}

/* TEXT */
.about-content p{
  color:#555;
  line-height:1.7;
  margin-bottom:15px;
}

/* LIST */
.about-list{
  margin-top:20px;
}

.about-list li{
  margin-bottom:12px;
  font-weight:500;
  display:flex;
  align-items:center;
}

.about-list i{
  color:#00b894;
  margin-right:12px;
  font-size:18px;
}

/* BUTTON 🔥 */
.about-btn{
  display:inline-block;
  margin-top:25px;
  background:linear-gradient(90deg,#1b4f9c,#00b894);
  color:#fff;
  padding:14px 32px;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.about-btn:hover{
  transform:translateY(-6px) scale(1.05);
  box-shadow:0 15px 40px rgba(0,0,0,0.25);
}

/* =========================
   ✨ SCROLL ANIMATION
========================= */
.about-content,
.about-images{
  opacity:0;
  transform:translateY(40px);
  animation:fadeUp 1s ease forwards;
}

.about-images{
  animation-delay:0.2s;
}

.about-content{
  animation-delay:0.4s;
}

@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================
   📱 MOBILE RESPONSIVE
========================= */
@media(max-width:768px){

  .about-wrapper{
    flex-direction:column;
    gap:40px;
  }

  .img-overlay{
    position:relative;
    width:100%;
    right:0;
    bottom:0;
    margin-top:15px;
  }

  .dots{
    display:none;
  }

  .about-content h2{
    font-size:28px;
  }

  .about-content p{
    font-size:14px;
  }

  .about-btn{
    width:100%;
    text-align:center;
  }
}
/* =========================
   🔥 PREMIUM MV SECTION
========================= */
.mv-section{
  padding:120px 20px;
  background:linear-gradient(135deg,#0a3d91,#00c896);
  color:#fff;
  position:relative;
  overflow:hidden;
}

/* Glow background */
.mv-section::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:rgba(255,255,255,0.1);
  filter:blur(120px);
  border-radius:50%;
  top:-150px;
  left:-150px;
}

/* CONTAINER */
.mv-container{
  max-width:1200px;
  margin:auto;
  display:flex;
  gap:80px;
  flex-wrap:wrap;
  align-items:center;
}

/* ================= LEFT ================= */
.mv-left{
  flex:1;
  position:relative;
}

/* BACKGROUND TEXT */
.bg-text{
  font-size:120px;
  font-weight:800;
  position:absolute;
  opacity:0.05;
  top:-40px;
  left:0;
}

.bg-text.vision{
  top:120px;
  left:40px;
}

/* CARD */
.mv-card{
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(12px);
  padding:30px;
  border-radius:20px;
  margin-bottom:20px;
  border:1px solid rgba(255,255,255,0.2);
  transition:0.4s;
  position:relative;
  z-index:2;
}

/* HOVER EFFECT 🔥 */
.mv-card:hover{
  transform:translateY(-10px) scale(1.03);
  background:rgba(255,255,255,0.25);
}

/* TEXT */
.mv-card p{
  line-height:1.7;
  font-size:15px;
}

/* ================= RIGHT ================= */
.mv-right{
  flex:1;
}

/* TITLE */
.mv-right h2{
  font-size:36px;
  margin-bottom:20px;
}

/* LIST */
.mv-list{
  list-style:none;
}

.mv-list li{
  margin-bottom:15px;
  font-size:15px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  position:relative;
  padding-left:30px;
}

/* ICON STYLE */
.mv-list li::before{
  content:"✔";
  position:absolute;
  left:0;
  top:0;
  color:#00ffb3;
  font-weight:bold;
}

/* ================= ANIMATION ================= */
.mv-left,
.mv-right{
  opacity:0;
  transform:translateY(40px);
  animation:fadeUp 1s ease forwards;
}

.mv-left{ animation-delay:0.2s; }
.mv-right{ animation-delay:0.4s; }

@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ================= MOBILE ================= */
@media(max-width:768px){

  .mv-container{
    flex-direction:column;
    gap:40px;
  }

  .bg-text{
    display:none;
  }

  .mv-right h2{
    font-size:26px;
  }

  .mv-card{
    padding:20px;
  }
}
/* =========================
   🔥 BELIEF SECTION (CREATIVE)
========================= */
.belief-section{
  padding:120px 20px;
  background:linear-gradient(135deg,#f5faff,#ffffff);
  text-align:center;
  position:relative;
  overflow:hidden;
}

/* SOFT GLOW BACKGROUND */
.belief-section::before{
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  background:rgba(0,184,148,0.1);
  filter:blur(100px);
  top:-100px;
  left:-100px;
}

/* TITLE */
.belief-title{
  font-size:36px;
  color:#1b4f9c;
  margin-bottom:60px;
  position:relative;
}

/* UNDERLINE */
.belief-title::after{
  content:"";
  width:60px;
  height:4px;
  background:linear-gradient(90deg,#1b4f9c,#00b894);
  display:block;
  margin:10px auto 0;
  border-radius:5px;
}

/* CONTAINER */
.belief-container{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
}

/* CARD */
.belief-card{
  background:#fff;
  padding:30px;
  border-radius:18px;
  text-align:left;

  box-shadow:0 15px 40px rgba(0,0,0,0.06);
  transition:0.4s;
  position:relative;
  overflow:hidden;
}

/* GRADIENT BORDER EFFECT */
.belief-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  padding:1px;
  background:linear-gradient(135deg,#1b4f9c,#00b894);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

/* ICON BOX */
.belief-card .icon{
  width:55px;
  height:55px;
  border-radius:12px;
  background:linear-gradient(135deg,#1b4f9c,#00b894);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
  margin-bottom:15px;
  transition:0.4s;
}

/* TITLE */
.belief-card h3{
  font-size:18px;
  margin-bottom:10px;
  color:#1b4f9c;
}

/* TEXT */
.belief-card p{
  font-size:14px;
  color:#555;
  line-height:1.6;
}

/* HOVER 🔥 */
.belief-card:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 25px 60px rgba(0,0,0,0.1);
}

/* ICON ANIMATION */
.belief-card:hover .icon{
  transform:rotate(10deg) scale(1.1);
}

/* =========================
   📱 TABLET
========================= */
@media(max-width:992px){
  .belief-container{
    grid-template-columns:1fr 1fr;
  }
}

/* =========================
   📱 MOBILE
========================= */
@media(max-width:600px){

  .belief-container{
    grid-template-columns:1fr;
    gap:20px;
  }

  .belief-title{
    font-size:26px;
  }

  .belief-card{
    text-align:center;
  }

  .belief-card .icon{
    margin:auto;
    margin-bottom:15px;
  }
}
/* CARD CENTER ALIGN */
.belief-card{
  text-align:center;
}

/* ICON CENTER */
.belief-card .icon{
  margin:0 auto 15px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* TITLE CENTER */
.belief-card h3{
  text-align:center;
}

/* TEXT CENTER */
.belief-card p{
  text-align:center;
}


/* 🔥 MOBILE ONLY RIBBON */
@media(max-width:768px){

  /* hide bg big text */
  .bg-text{
    display:none;
  }

  /* add left ribbon using pseudo */
  .mv-card{
    position:relative;
    padding-left:20px;
    border-left:4px solid #00ffb3;
  }

  /* Mission Ribbon */
  .mv-card.top::before{
    content:"Mission";
    position:absolute;
    left:-5px;
    top:-12px;
    background:#00ffb3;
    color:#000;
    padding:5px 14px;
    font-size:11px;
    font-weight:600;
    border-radius:20px;
  }

  /* Vision Ribbon */
  .mv-card.bottom{
    border-left:4px solid #ffd166;
  }

  .mv-card.bottom::before{
    content:"Vision";
    position:absolute;
    left:-5px;
    top:-12px;
    background:#ffd166;
    color:#000;
    padding:5px 14px;
    font-size:11px;
    font-weight:600;
    border-radius:20px;
  }

}



@media(max-width:768px){

  /* SECTION BACKGROUND */
  .mv-section{
    background:#0f172a; /* dark blue */
  }

  .mv-right h2{
    text-align:center;
    margin-bottom:25px;
    color:#fff;
  }

  /* RESET OLD STYLE */
  .values-list{
    padding-left:0;
  }

  .values-list::before{
    display:none;
  }

  /* CARD STYLE */
  .values-list li{
    background:#ffffff;
    color:#333;
    padding:15px 15px 15px 50px;
    border-radius:12px;
    margin-bottom:15px;
    position:relative;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
  }

  /* LEFT ICON CIRCLE */
  .values-list li::before{
    content:"✔";
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    width:28px;
    height:28px;
    background:#00b894;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:bold;
  }

  /* TEXT STYLE */
  .values-list li b{
    display:block;
    color:#0a3d91;
    margin-bottom:3px;
  }

}