/* HERO */

.about-hero{
background:url("https://images.unsplash.com/photo-1581594693702-fbdc51b2763b") center/cover;
height:380px;
position:relative;
}

.about-hero-overlay{
background:linear-gradient(rgba(15,76,129,0.9), rgba(15,76,129,0.85));
height:100%;
display:flex;
align-items:center;
justify-content:center;
}

.about-hero-content{
text-align:center;
color:#fff;
max-width:700px;
}

.about-hero h1{
font-size:46px;
margin-bottom:10px;
}

.about-hero p{
font-size:16px;
opacity:0.9;
}

/* SECTION */

.about-section{
  padding:100px 0;
}

.about-section.light{
  background:#f7fbff;
}

.about-container{
  width:90%;
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center; /* ⭐ perfect vertical alignment */
}

/* REVERSE OPTION */

.about-container.reverse{
  direction:rtl;
}

.about-container.reverse .about-content{
  direction:ltr;
}

/* IMAGE */

.about-image{
  overflow:hidden;
  border-radius:18px;
  box-shadow:0 15px 45px rgba(0,0,0,0.12);
}

.about-image img{
  width:100%;
  height:100%;
  max-height:600px;
  object-fit:cover; /* ❌ aapka 'fit' galat tha → fixed */
  transition:0.4s ease;
}

.about-image:hover img{
  transform:scale(1.05);
}

/* CONTENT */

.about-content h2{
  font-size:34px;
  color:#0f4c81;
  margin-bottom:20px;
  position:relative;
}

.about-content h2::after{
  content:'';
  width:60px;
  height:3px;
  background:#1fb6a6;
  display:block;
  margin-top:10px;
}

.about-content p{
  color:#555;
  line-height:1.8;
  margin-bottom:16px;
  font-size:16px;
}

/* RESPONSIVE */

@media(max-width:768px){
  .about-container{
    grid-template-columns:1fr;
    gap:40px;
  }

  .about-content{
    text-align:center;
  }

  .about-content h2::after{
    margin:10px auto 0;
  }
}
/* LIST */

.about-list{
list-style:none;
padding:0;
margin-top:15px;
}

.about-list li{
margin-bottom:10px;
padding-left:28px;
position:relative;
color:#444;
}

.about-list li::before{
content:"\f058";
font-family:"Font Awesome 6 Free";
font-weight:900;
position:absolute;
left:0;
top:2px;
color:#1fb6a6;
}

/* CENTER */

.about-center{
text-align:center;
max-width:950px;
margin:auto;
}

.about-sub{
margin-bottom:40px;
color:#666;
}

/* GRID */

.about-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-top:40px;
}

.about-grid.small{
grid-template-columns:repeat(3,1fr);
}

.about-card{
background:#fff;
padding:30px;
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:0.3s;
}

.about-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

.about-card h3{
color:#0f4c81;
margin-bottom:10px;
}

/* CTA */

.about-cta{
background:#0f4c81;
color:#fff;
padding:100px 0;
text-align:center;
}

.about-cta h2{
font-size:34px;
margin-bottom:10px;
}

.about-cta a{
background:#1fb6a6;
padding:14px 30px;
border-radius:30px;
color:#fff;
text-decoration:none;
transition:0.3s;
}

.about-cta a:hover{
background:#17a398;
transform:translateY(-2px);
}

/* RESPONSIVE */

@media(max-width:900px){

.about-container{
grid-template-columns:1fr;
text-align:center;
}

.about-container.reverse{
direction:ltr;
}

.about-grid{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:600px){

.about-grid{
grid-template-columns:1fr;
}

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

}
    
    
    
    
    /* SPECIAL SECTION */

.special-section{
background:#f7fbff;
padding:110px 0;
}

/* GRID */

.special-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-top:50px;
}

/* CARD */

.special-card{
background:rgba(255,255,255,0.7);
backdrop-filter:blur(12px);
padding:35px 25px;
border-radius:20px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:0.4s;
position:relative;
overflow:hidden;
}

/* ICON */

.special-card i{
font-size:32px;
color:#1fb6a6;
margin-bottom:15px;
transition:0.3s;
}

/* TITLE */

.special-card h3{
color:#0f4c81;
margin-bottom:10px;
font-size:20px;
}

/* TEXT */

.special-card p{
color:#555;
font-size:14px;
line-height:1.7;
}

/* HOVER EFFECT */

.special-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 60px rgba(0,0,0,0.15);
}

.special-card:hover i{
transform:scale(1.2);
color:#0f4c81;
}

/* TOP BORDER ANIMATION */

.special-card::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:linear-gradient(90deg,#1fb6a6,#0f4c81);
transform:scaleX(0);
transition:0.4s;
}

.special-card:hover::before{
transform:scaleX(1);
}

/* RESPONSIVE */

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

@media(max-width:600px){
.special-grid{
grid-template-columns:1fr;
}
}
    
    
    
    
    
    /* MEMBERSHIP SECTION */

.membership-section{
background:#f7fbff;
padding:110px 0;
}

/* GRID */

.membership-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:50px;
}

/* CARD */

.membership-card{
background:rgba(255,255,255,0.7);
backdrop-filter:blur(12px);
padding:35px 25px;
border-radius:20px;
text-align:center;
position:relative;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:0.4s;
}

/* ICON */

.membership-card .icon{
width:60px;
height:60px;
margin:auto;
border-radius:50%;
background:linear-gradient(135deg,#1fb6a6,#0f4c81);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:15px;
}

.membership-card i{
color:#fff;
font-size:22px;
}

/* TEXT */

.membership-card h3{
color:#0f4c81;
margin-bottom:10px;
}

.membership-card p{
color:#555;
font-size:14px;
line-height:1.7;
}

/* HOVER */

.membership-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 60px rgba(0,0,0,0.15);
}

/* BORDER GLOW */

.membership-card::before{
content:'';
position:absolute;
inset:0;
border-radius:20px;
padding:1px;
background:linear-gradient(135deg,#1fb6a6,#0f4c81);
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
opacity:0;
transition:0.4s;
}

.membership-card:hover::before{
opacity:1;
}

/* RESPONSIVE */

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

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