.ab-badge,
.ab-sub-heading {
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 800
}

#ab-cta,
#ab-hero,
.ab-floating-year,
.ab-mission-card,
.ab-section-header {
   text-align: center
}

#ab-cta h2,
.ab-banner-text h3,
.ab-floating-year h3,
.ab-hero-content h1,
.ab-mission-card h3,
.ab-section-header h2,
.ab-stat-item h2,
.ab-who-text h2,
.ab-why-card h4 {
   font-family: Montserrat, sans-serif
}

:root {
   --ab-sun: #ea580c;
   --ab-sky: #0284c7;
   --ab-slate: #0f172a;
   --ab-text: #475569;
   --ab-bg: #f8fafc;
   --ab-surface: #ffffff
}

body {
   padding-top: 80px;
   color: #333;
   line-height: 1.6;
   background: var(--soft-grad-white);
   overflow-x: hidden
}

#ab-hero,
#ab-team,
#ab-vision-mission,
#ab-who-we-are,
#ab-why-choose {
   padding: 80px 5%;
   overflow: hidden
}

.ab-section-header {
   max-width: 800px;
   margin: 0 auto 50px
}

.ab-section-header h2 {
   font-size: 2.8rem;
   color: var(--ab-slate);
   margin-bottom: 15px
}

.ab-section-header p {
   font-size: 1.15rem;
   color: var(--ab-text)
}

@keyframes ab-scaleIn {
   from {
      opacity: 0;
      transform: scale(.5)
   }

   to {
      opacity: 1;
      transform: scale(1)
   }
}

@keyframes ab-slideLeft {
   from {
      opacity: 0;
      transform: translateX(-100px)
   }

   to {
      opacity: 1;
      transform: translateX(0)
   }
}

@keyframes ab-slideRight {
   from {
      opacity: 0;
      transform: translateX(100px)
   }

   to {
      opacity: 1;
      transform: translateX(0)
   }
}

.ab-hero-content h1 {
   opacity: 0;
   animation: .8s ease-out .3s forwards ab-slideLeft;
   font-size: 3.5rem;
   line-height: 1.2;
   margin-bottom: 20px;
   color: #fff;
   text-shadow: 0 4px 15px rgba(0, 0, 0, .9)
}

.ab-highlight {
   color: var(--ab-sun);
   static-glow: none
}

.ab-hero-content p {
   opacity: 0;
   animation: .8s ease-out .6s forwards ab-slideRight;
   font-size: 1.2rem;
   color: #fff;
   opacity: 1;
   font-weight: 600
}

#ab-hero {
   background: linear-gradient(rgba(15, 23, 42, .5), rgba(15, 23, 42, .65)), url('../images/solar-team.webp') center/cover no-repeat;
   min-height: 70vh;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff
}

.ab-hero-content {
   max-width: 800px;
   text-shadow: 0 2px 10px rgba(0, 0, 0, .8)
}

.ab-badge {
   opacity: 0;
   animation: .8s ease-out forwards ab-scaleIn;
   background: var(--ab-sun);
   color: #fff;
   padding: 5px 15px;
   border-radius: 4px;
   display: inline-block;
   margin-bottom: 20px
}

.ab-container {
   max-width: 1250px;
   margin: 0 auto;
   width: 100%
}

.ab-grid-lock {
   display: grid;
   grid-template-columns: 45% 50%;
   justify-content: space-between;
   align-items: center;
   gap: 5%
}

.ab-who-text,
.ab-who-visual {
   min-width: 0;
   width: 100%
}

.ab-who-visual {
   position: relative
}

.ab-who-visual img {
   width: 100%;
   border-radius: 20px;
   box-shadow: 0 20px 40px rgba(0, 0, 0, .15)
}

.ab-floating-year {
   position: absolute;
   bottom: 30px;
   right: -30px;
   background: #fff;
   padding: 20px 30px;
   border-radius: 15px;
   box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
   border-bottom: 5px solid var(--ab-sun);
   animation: 3s ease-in-out infinite float
}

.ab-floating-year h3 {
   font-size: 2.5rem;
   color: var(--ab-sky);
   margin-bottom: 5px
}

.ab-floating-year span {
   font-weight: 700;
   color: var(--ab-text)
}

@keyframes float {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-15px)
   }
}

.ab-who-text h2 {
   font-size: 2.8rem;
   color: var(--ab-slate);
   margin-bottom: 10px
}

.ab-sub-heading {
   color: var(--ab-sky);
   font-size: 1.2rem;
   margin-bottom: 20px
}

.ab-who-text p {
   font-size: 1.1rem;
   color: var(--ab-text);
   line-height: 1.7;
   margin-bottom: 20px
}

.ab-feature-list {
   display: flex;
   gap: 30px;
   margin-top: 30px;
   border-top: 1px solid #e2e8f0;
   padding-top: 20px
}

.ab-feature-item {
   font-weight: 700;
   color: var(--ab-slate);
   display: flex;
   align-items: center;
   gap: 10px
}

.ab-feature-item i {
   color: var(--ab-sun);
   font-size: 1.2rem
}

#ab-team,
#ab-vision-mission {
   background: var(--ab-bg)
}

.ab-mission-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   max-width: 1000px;
   margin: 0 auto
}

.ab-mission-card {
   background: var(--ab-surface);
   padding: 50px 40px;
   border-radius: 20px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .03);
   border-top: 5px solid var(--ab-sky);
   transition: .3s
}

.ab-mission-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 15px 40px rgba(2, 132, 199, .1);
   border-color: var(--ab-sun)
}

.ab-icon-circle {
   width: 80px;
   height: 80px;
   background: #fff7ed;
   color: var(--ab-sun);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2.2rem;
   margin: 0 auto 20px
}

.ab-team-banner,
.ab-why-card {
   background: var(--ab-surface)
}

.ab-mission-card h3 {
   font-size: 1.8rem;
   color: var(--ab-slate);
   margin-bottom: 15px
}

.ab-mission-card p {
   color: var(--ab-text);
   font-size: 1.1rem;
   line-height: 1.6
}

#ab-stats {
   background: var(--ab-slate);
   padding: 60px 5%;
   color: #fff
}

.ab-stats-container {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
   max-width: 1200px;
   margin: 0 auto;
   gap: 30px;
   text-align: center
}

.ab-stat-item i {
   font-size: 3rem;
   color: var(--ab-sky);
   margin-bottom: 15px
}

.ab-stat-item h2 {
   font-size: 3rem;
   margin-bottom: 5px;
   color: var(--ab-sun);
   text-shadow: none
}

.ab-stat-item p {
   font-size: 1.1rem;
   font-weight: 600;
   opacity: .9;
   color: #e2e8f0;
   text-shadow: none
}

.ab-why-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 25px;
   max-width: 1250px;
   margin: 0 auto
}

.ab-why-card {
   padding: 40px 25px;
   border-radius: 15px;
   border: 1px solid #e2e8f0;
   transition: .3s
}

.ab-why-card:hover {
   border-color: var(--ab-sun);
   box-shadow: 0 15px 30px rgba(234, 88, 12, .08);
   transform: translateY(-5px)
}

.ab-why-card i {
   font-size: 2.5rem;
   color: var(--ab-sky);
   margin-bottom: 20px
}

.ab-why-card h4 {
   font-size: 1.3rem;
   color: var(--ab-slate);
   margin-bottom: 15px
}

.ab-why-card p {
   color: var(--ab-text);
   line-height: 1.6;
   font-size: .95rem
}

.ab-team-banner {
   max-width: 1000px;
   margin: 0 auto;
   padding: 40px 50px;
   border-radius: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
   border-left: 8px solid var(--ab-sun)
}

.ab-banner-text h3 {
   font-size: 1.8rem;
   color: var(--ab-slate);
   margin-bottom: 10px
}

.ab-banner-text p {
   color: var(--ab-text);
   font-size: 1.1rem
}

.ab-btn-outline {
   border: 2px solid #5a005a; /* Thoda dark purple */
   color: #5a005a; /* Blue ki jagah Purple hi rakhein taaki contrast achha rahe */
   padding: 12px 30px;
   border-radius: 50px;
   font-weight: 800;
   display: inline-block; /* Mobile responsiveness ke liye zaroori */
   transition: .3s;
}

.ab-btn-outline:hover {
   background: #800080;
   color: #fff;
   border-color: var(--ab-sky)
}

#ab-cta {
  background: #0077b6; /* Pehle wale sky blue se thoda dark blue (Better Contrast) */
    color: #ffffff;
    padding: 80px 5%;
    text-align: center;
}

#ab-cta h2 {
  font-size: 2.8rem;
    color: #ffffff;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -0.5px; /* Padhne mein aasaan hoga */
}

#ab-cta p {
 font-size: 1.25rem;
    margin-bottom: 35px;
    color: #f0f9ff; /* Lightest blue/white mix (High Contrast) */
    font-weight: 500;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.ab-btn-primary {
   background: #0f172a; /* Isse dark Navy Blue kijiye (Lighthouse friendly) */
   color: #ffffff !important;
   padding: 18px 45px;
   min-width: 250px; /* Mobile par tap karne mein aasani hogi */
   text-decoration: none;
   display: inline-block;
}

.ab-btn-primary:hover {
   background: var(--ab-slate);
   transform: translateY(-3px);
   box-shadow: 0 10px 25px rgba(15, 23, 42, .4)
}

@media (max-width:1024px) {
   .ab-why-grid {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media (max-width:850px) {

   #ab-hero,
   .ab-hero,
   body {
      margin-top: 0 !important
   }

   body {
      padding-top: 0 !important
   }

   #ab-hero,
   .ab-hero {
      padding-top: 135px !important;
      padding-bottom: 50px !important;
      text-align: center !important;
      min-height: auto !important;
      background-attachment: scroll !important
   }

   .ab-grid-lock {
      grid-template-columns: 1fr !important;
      text-align: center;
      gap: 50px
   }

   .ab-floating-year {
      right: 50%;
      transform: translateX(50%);
      bottom: -20px
   }

   .ab-feature-list {
      justify-content: center;
      flex-direction: column;
      gap: 15px
   }

   .ab-mission-grid {
      grid-template-columns: 1fr
   }

   .ab-team-banner {
      flex-direction: column;
      text-align: center;
      gap: 30px
   }
}

@media (max-width:600px) {
   .ab-hero-content h1 {
      font-size: 2.5rem
   }

   .ab-why-grid {
      grid-template-columns: 1fr
   }
}
/* Mobile responsive fix */
@media (max-width: 768px) {
   .ab-team-banner {
       flex-direction: column; /* Mobile mein ek ke niche ek dikhega */
       text-align: center;
       padding: 30px 20px;
   }
   .ab-banner-text {
       margin-bottom: 20px;
   }
}