/* Used by buttons and accents below; were never defined */
:root{
    --primary-color:#741b2a;
    --primary-dark:#5b1420;
}

#hero{
    position: relative;
    height: 100vh;
    background: url("../images/hero-banner.jpg") center center/cover no-repeat;
}

.hero-overlay{
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,.65);

    display: flex;

    justify-content: center;

    align-items: center;
}

.hero-content{

display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    max-width:900px;
    margin:0;

}
.hero-content h1{

    font-family: "Playfair Display", serif;

    font-size: 76px;

    font-weight: 700;

    color: #ffffff;

    white-space: nowrap;

    margin-bottom: 25px;

    text-shadow: 0 5px 18px rgba(0,0,0,.5);

    transform: translateX(-20px);

}
.hero-content p{

    max-width: 750px;

    font-size: 22px;

    line-height: 1.7;

    color: #ffffff;

    text-shadow: 0 3px 10px rgba(0,0,0,.5);

    margin: 0 auto 45px;

    position: relative;

    left: 35px;

}

.hero-btn{

    display:inline-block;

    background:#741b2a;

    color:#fff;

    padding:18px 45px;

    border-radius:40px;

    text-transform:uppercase;

    font-weight:700;

    letter-spacing:1px;

    text-decoration:none;

    transition:.3s;
}

.hero-btn:hover{

    background:#5b1522;

}

.hero-btn:hover{

    background: #5a1521;

}
.hero-btn:hover{

    background: #5b1522;

    transform: translateY(-3px);

}
/* ==========================================
   HOW WE SERVE
========================================== */

.services{

    position:relative;
    overflow:hidden;
    padding:140px 0;

     background:#FCF8F3;
    180deg,
    #ffffff 0%,
    #faf8f6 100%);
.services::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(116,27,42,.04);

    top:-220px;

    right:-160px;

}

.services::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(201,154,59,.05);

    bottom:-120px;

    left:-100px;

}
}

/* Header */

.section-header{

    text-align:center;

    max-width:850px;

    margin:0 auto 90px;

}

.section-tag{

    display:inline-block;

    color:#c99a3b;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.section-header h2{

    font-size:3.3rem;

    font-weight:800;

    line-height:1.2;

    margin:20px 0 30px;

    color:var(--primary-color);

}

.section-header p{

 max-width:760px;

    margin:auto;

    font-size:1.08rem;

    line-height:2;

    color:#666;

}

/* Grid */

.services-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

/* Cards */

.service-card{

    position:relative;

    background:#fff;

    padding:55px;

    border-radius:22px;

    overflow:hidden;

    transition:.35s;

    border:1px solid #eee;

    box-shadow:0 20px 45px rgba(0,0,0,.05);

}

/* Top Maroon Line */

.service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:#741b2a;

}

/* Large Number */

.service-number{

    display:block;

    font-size:4rem;

    font-family:"Playfair Display", serif;

    color:#e8d9dc;

    margin-bottom:15px;

    font-weight:700;

}

/* Heading */

.service-card h3{

    font-family:"Playfair Display", serif;

    color:#741b2a;

    font-size:2rem;

    margin-bottom:10px;

}

/* Subtitle */

.service-card h4{

    color:#a8842d;

    font-size:1rem;

    font-weight:600;

    margin-bottom:22px;

    text-transform:uppercase;

    letter-spacing:1px;

}

/* Paragraph */

.service-card p{

    color:#666;

    line-height:1.9;

    margin-bottom:35px;

}

/* Learn More */

.service-link{

    color:#741b2a;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.service-link:hover{

    color:#c99a3b;

    letter-spacing:1px;

}

/* Hover */

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:0 35px 70px rgba(0,0,0,.12);

}

/* Responsive */

@media(max-width:992px){

.services-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.section-header h2{

font-size:2.5rem;

}

.service-card{

padding:40px;

}

}
/* ==========================================
   AG GRAMMAR SCHOOL
========================================== */

.education-section{

    padding:140px 0;

    background:#ffffff;

}

.education-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

/* IMAGE */

.education-image{

    overflow:hidden;

    border-radius:25px;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.education-image img{

    width:100%;

    display:block;

    transition:.5s;

}

.education-image:hover img{

    transform:scale(1.05);

}

/* CONTENT */

.education-content{

    max-width:600px;

}

.education-content h2{

    font-family:"Playfair Display", serif;

    color:#741b2a;

    font-size:3rem;

    margin:20px 0;

}

.education-content h3{

    color:#c99a3b;

    font-size:1.4rem;

    margin-bottom:25px;

    font-weight:600;

}

.education-content p{

    color:#666;

    line-height:2;

    margin-bottom:40px;

}

/* HIGHLIGHTS */

.education-highlights{

    display:flex;

    gap:40px;

    margin-bottom:45px;

}

.education-highlights div{

    display:flex;

    flex-direction:column;

}

.education-highlights strong{

    color:#741b2a;

    font-size:1.4rem;

}

.education-highlights span{

    color:#777;

    font-size:.9rem;

}

/* BUTTONS */

.education-buttons{

    display:flex;

    gap:20px;

}

.btn-sponsor{

    background:#741b2a;

    color:#fff;

    padding:18px 35px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.btn-sponsor:hover{

    background:#5d1523;

}

.btn-donate{

    background:#c99a3b;

    color:#fff;

    padding:18px 35px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.btn-donate:hover{

    background:#b4892f;

}

/* RESPONSIVE */

@media(max-width:992px){

.education-grid{

grid-template-columns:1fr;

}

.education-content{

max-width:100%;

}

.education-buttons{

flex-direction:column;

}

.education-highlights{

flex-direction:column;

gap:20px;

}

}
/*==========================================
THEMATIC AREAS
==========================================*/

.thematic-areas{
    position:relative;
    overflow:hidden;
    padding:140px 0;
    background:linear-gradient(
        180deg,
        #FCF8F3 0%,
        #F7F0E8 100%
    );
    .thematic-areas::before{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(116,27,42,.03);

    left:-180px;

    top:40px;

}

.thematic-areas::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

    background:rgba(201,154,59,.04);

    right:-120px;

    bottom:-100px;

}

}

.thematic-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
    margin-top:70px;

}

.theme-card{

    position:relative;
    background:#fff;
    border-radius:20px;
    padding:35px 28px;
    text-align:center;

    border:1px solid #ececec;

    transition:.35s;

}

.theme-card:hover{

    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.theme-number{

    position:absolute;

    top:18px;
    right:18px;

    font-size:3rem;
    font-weight:800;

    color:rgba(116,27,42,.08);

}

.theme-icon{

    width:85px;
    height:85px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#faf4f4;

    display:flex;
    justify-content:center;
    align-items:center;

}

.theme-icon i{

    font-size:2.2rem;
    color:var(--primary-color);

}

.theme-card h3{

    color:var(--primary-color);

    margin-bottom:15px;

    font-size:1.35rem;

    font-weight:700;

}

.theme-card p{

    color:#666;

    line-height:1.8;

    font-size:.95rem;

}

/* Hover */

.theme-card:hover .theme-icon{

    background:var(--primary-color);

}

.theme-card:hover .theme-icon i{

    color:#fff;

}

@media(max-width:1100px){

.thematic-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.thematic-grid{

grid-template-columns:1fr;

}

}
/* ==========================================
   IMPACT IN NUMBERS
========================================== */

.impact-section{

    padding:140px 0;

    background:linear-gradient(
135deg,
#741B2A,
#5D1622
);

}

.impact-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-top:70px;

}

.impact-card{

    background:#fff;

    padding:35px 20px;

    border-radius:18px;

    text-align:center;

    border-top:5px solid #741b2a;

    box-shadow:0 12px 30px rgba(0,0,0,.05);

    transition:.35s ease;

}


.impact-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.impact-card h3{

    font-family:"Playfair Display", serif;

    font-size:4rem;

    color:#741b2a;

    margin-bottom:15px;

    line-height:1;

}

.impact-card p{

    font-size:1.05rem;

    font-weight:700;

    color:#555;

    text-transform:uppercase;

    letter-spacing:1px;

}

/* Responsive */

@media(max-width:768px){

    .impact-grid{

        grid-template-columns:1fr;

    }

    .impact-card{

        padding:45px 25px;

    }

    .impact-card h3{

        font-size:3.2rem;

    }

}
/*========================================
            IMPACT HEADING
========================================*/

.impact-section .section-header{

    text-align:center;
    max-width:800px;
    margin:0 auto;

}

.impact-section .section-tag{

    color:#C99A3B;
    font-size:.9rem;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;

}

.impact-section .section-header h2{

    color:#ffffff;
    margin:20px 0;
    font-size:3.5rem;
    font-family:"Playfair Display", serif;

}

.impact-section .section-header p{

    color:rgba(255,255,255,.85);
    font-size:1.15rem;
    line-height:1.8;
    max-width:700px;
    margin:0 auto;

}
.cta-cards{

display:flex;
justify-content:center;
gap:35px;
flex-wrap:wrap;

}

.cta-card{

    position: relative;
    width: 220px;          /* was around 260px */
    height: 85px;          /* was around 100px */
    padding: 22px 28px;
    border-radius: 18px;
    background: linear-gradient(135deg, #8b1e2d 0%, #741b2a 55%, #5b1420 100%);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
    text-decoration: none;
    overflow: visible;
    transition: .35s ease;

}

.cta-card:hover{

transform:translateY(-8px);

box-shadow:0 28px 60px rgba(0,0,0,.18);

}

.cta-card h4{

    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0;

}

.cta-card-content p{

color:#f5f5f5;

font-size:.95rem;

}

.cta-icon{

position:absolute;

top:18px;
right:-22px;

width:74px;
height:74px;

background:#fff;

border-radius:50%;

display:flex;
justify-content:center;
align-items:center;

box-shadow:0 10px 25px rgba(0,0,0,.18);

}

.cta-icon img{

width:38px;

height:38px;

object-fit:contain;

}
/*==========================================
TESTIMONIALS
==========================================*/

.testimonials{

    padding:140px 0;

    background:#FCF8F3;

}

.testimonials-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.testimonials-text h2{

    font-size:3rem;

    color:var(--primary-color);

    margin:18px 0;

    line-height:1.2;

}

.testimonials-text p{

    font-size:1.08rem;

    color:#666;

    line-height:1.9;

    max-width:550px;

    margin-bottom:35px;

}

/* Buttons */

.testimonial-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

/* Primary Button */

.btn-primary{

    background:var(--primary-color);

    color:#fff;

    padding:15px 34px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

/* Outline Button */

.btn-outline{

    border:2px solid var(--primary-color);

    color:var(--primary-color);

    padding:15px 34px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.btn-outline:hover{

    background:var(--primary-color);

    color:#fff;

}

/* Video Card */

.video-card{

    height:380px;

    border-radius:22px;

    background:linear-gradient(
    135deg,
    #741b2a,
    #5b1420
    );

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#fff;

    box-shadow:0 25px 60px rgba(0,0,0,.18);

    transition:.35s;

}

.video-card:hover{

    transform:translateY(-8px);

}

.play-button{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#fff;

    color:var(--primary-color);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2.5rem;

    margin-bottom:25px;

    box-shadow:0 12px 30px rgba(0,0,0,.18);

}

.video-card h3{

    font-size:2rem;

    margin-bottom:10px;

}

.video-card p{

    color:rgba(255,255,255,.85);

}

/* Responsive */

@media(max-width:992px){

.testimonials-content{

grid-template-columns:1fr;

}

.video-card{

margin-top:40px;

}

}
/*==========================================
            OUR PARTNERS
==========================================*/

.partners{
    position:relative;
    overflow:hidden;
    padding:140px 0;
    background:#FFFDF9;
    overflow:hidden;
.partners::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(116,27,42,.03);

    top:-140px;

    left:-120px;

}
}

/* Slider */

.partners-slider{

    position:relative;
    overflow:hidden;
    margin-top:70px;

}

/* Fade Effect */

.partners-slider::before,
.partners-slider::after{

    content:"";
    position:absolute;
    top:0;
    width:120px;
    height:100%;
    z-index:2;

}

.partners-slider::before{

    left:0;
    background:linear-gradient(to right,#fff,transparent);

}

.partners-slider::after{

    right:0;
    background:linear-gradient(to left,#fff,transparent);

}

/* Track */

.partners-track{

    display:flex;
    align-items:center;
    gap:80px;
    width:max-content;

    animation:scrollPartners 28s linear infinite;

}

.partners:hover .partners-track{

    animation-play-state:paused;

}

/* Logos */

.partners-track img{

    width:160px;
    height:85px;

    object-fit:contain;

    filter:grayscale(100%);
    opacity:.65;

    transition:.4s ease;

}

.partners-track img:hover{

    filter:none;
    opacity:1;

    transform:translateY(-8px) scale(1.08);

}

/* Bottom Text */

.partners-text{

    text-align:center;
    max-width:750px;
    margin:60px auto 0;

}

.partners-text p{

    color:#666;
    line-height:1.8;
    font-size:1.05rem;

}

/* Animation */

@keyframes scrollPartners{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}
@media(max-width:768px){

.partners{

padding:90px 0;

}

.partners-track{

gap:40px;

}

.partners-track img{

width:100px;

height:60px;

}

.partners-slider::before,
.partners-slider::after{

width:50px;

}

}
.site-footer {
  background: linear-gradient(180deg, #5A0F0F 0%, #3D0808 100%); /* AUR DARK KIYA */
  color: #fff;
  font-family: 'Poppins', sans-serif;
  padding: 50px 0 20px;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ========== TOP SECTION ========== */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* IMPORTANT: upar se align */
  gap: 60px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* LEFT SIDE */
.footer-brand {
  flex: 2;
}

.brand-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.brand-header img {
  width: 110px; /* LOGO BARA */
  height: 110px;
  object-fit: contain;
  flex-shrink: 0; /* logo squeeze na ho */
}

.brand-title h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fffffd;
}

.brand-title span {
  font-size: 13px;
  color: #FFD700;
  font-weight: 500;
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.9;
  text-align: left;
  color: #ffffff;
}

/* RIGHT SIDE - YEHI THEEK KARNA THA */
.footer-connect {
  flex: 1;
  display: flex;
  flex-direction: column; /* social upar newsletter neeche */
  gap: 35px;
  text-align: left;
  min-width: 300px; /* taake squeeze na ho */
}

.social-area h3,
.newsletter h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.social-icons {
  display: flex; /* ROW ME RAHE */
  flex-direction: row; /* IMPORTANT */
  justify-content: flex-start;
  gap: 12px;
}

.social-icons a {
  width: 38px;
  height: 38px;
  background: #fff;
  color: #5A0F0F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: 0.3s;
  flex-shrink: 0;
}

.social-icons a:hover {
  background: #FFD700;
  transform: translateY(-3px);
}

.newsletter p {
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.9;
  margin-bottom: 15px;
}

.newsletter form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.newsletter input {
  width: 100%;
  max-width: 280px;
  padding: 11px 16px;
  border-radius: 25px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  color: #fff;
  outline: none;
}

.newsletter button {
  padding: 11px 28px;
  border-radius: 25px;
  border: none;
  background: #FFD700;
  color: #5A0F0F;
  font-weight: 700;
  cursor: pointer;
}

/* ========== MIDDLE ========== */
.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 40px 0;
  text-align: left;
}

.footer-links h4 {
  margin-bottom: 18px;
  font-size: 16px;
  font-weight: 600;
  color: #FFD700;
}

.contact-list li {
  display: flex;
  gap: 10px;
  opacity: 0.9;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* ========== BOTTOM ========== */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .footer-top {
    flex-direction: column;
    text-align: center;
  }
  .brand-header {
    justify-content: center;
  }
  .footer-connect {
    text-align: center;
  }
  .social-icons {
    justify-content: center;
  }
  .newsletter form {
    align-items: center;
  }
}