/* hero-content */
.hero-section {
    position: relative;
    height: 100vh;
    /* background: url("hotel.jpg") center/cover no-repeat; */
  /* background: url("images/home.webp") center center/cover no-repeat; */
    background: url("images/aaaa.jpg") center center/cover no-repeat;


    display: flex;
    align-items: center;
    justify-content: center;
   
}
.title-icon {
  color: #fff;          /* icon color */
  margin-left: -10px;    /* text gap */
  font-size: 40px;      /* size adjust */
  vertical-align: end;
}

.hero-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.751);
    top: 0;
    left: 0;
}

.hero-content {
    position: relative;
    color: #fff;
    max-width: 900px;
    text-align: end;
}

.hero-title {
  color: #030fb9;
  font-weight: 700;
  font-size: 58px;
}

.hero-sub {
  color: #fff;
  font-size: 40px;
}

/* icon box */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;

  
}

/* icon */
.icon-box i {
  font-size: 110px;
  color: #fff;
margin-left: 70px;
margin-top: 40px;

}



/* Animation same */

/* MAIN TEXT */
.hero-title{
  font-size: 64px;
  font-weight: 700;
  position: relative;
  z-index: 2;
  color:#182acc;
  animation: textSlide 1s ease forwards;
}

.hero-sub{
  font-size: 32px;
  animation: textSlide 1.2s ease forwards;
}

/* GHOST BACK LETTERS */
.hero-title::after{
  content: "AGRANI COLLEGE";
  position: absolute;
  top:50px;
  left:0;
  font-size: 120px;
  font-weight: 800;
  color: rgba(207, 206, 206, 0.138);
  transform: translateX(200px);
  animation: ghostSlide 1.5s ease forwards;
  z-index:1;
  white-space: nowrap;
}

/* MAIN TEXT SLIDE */
@keyframes textSlide{
  from{
    opacity:0;
    transform: translateX(-80px);
  }
  to{
    opacity:1;
    transform: translateX(0);
  }
}

/* GHOST SLIDE */
@keyframes ghostSlide{
  from{
    opacity:0;
    transform: translateX(200px);
  }
  to{
    opacity:1;
    transform: translateX(40px);
  }
}
.reveal{
  opacity:0;
  transform:translateY(60px);
  transition:all .8s ease;
}
.reveal.active{
  opacity:1;
  transform:translateY(0);
}

.apply-btn {
  display: inline-block;
  margin-top: 20px;
  background: #fd0002;
  color: #fff;
  padding: 12px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: .3s;
}

.apply-btn:hover {
  background: #fd0002;
  color: #fff;
}
/* second section */
.about-section {
  padding: 60px 0;
  background: #f5f5f5;
}

/* background section */
.about-section {
  
  position:relative;
  min-height:100vh;

  background:
    linear-gradient(to right, rgba(0,0,0,0.1) 40%, rgba(8,25,70,0.9)),
    url("images/bg.jpg");

  background-size:cover;
  background-position:center;
  background-attachment: fixed;   /* ⭐ THIS IS MAIN */
}

/* overlay */
.second-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 253, 253, 0.897);
  top: 0;
  left: 0;
  z-index: 1;   /* overlay below content */
}

/* MAIN GRID */
.container-grid {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 2;   /* ⭐ MOST IMPORTANT FIX */
}

/* LEFT */
.section-title {
  color: #ff1f3d;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 20px;
}
.section-title span{
    color: gray;
}

.top-text {
  color: #444;
  line-height: 1.7;
  margin-bottom: 30px;
}

.tree-img {
  width: 100%;
  max-width: 400px;
}

/* RIGHT */
.student-img {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 20px;
}

.bottom-text {
  /* color: #444; */
  line-height: 1.7;
}
/* ACHIEVEMENTS *---------------------------------------------------------/
/* SECTION */


/* SECTION */
.achievements-section{
  position: relative;
  min-height: 80vh;

  /* ⭐ FIRST UNSPLASH TEST IMAGE USE CHEY */
  background-image: url("https://images.unsplash.com/photo-1523580846011-d3a5bc25702b");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  display:flex;
  align-items:center;
  justify-content:center;
}
.achievements-section{
  background-attachment: fixed;
  transform: translateZ(0);
}
/* OVERLAY */
.ach-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:1;
}


.ach-content{
  position:relative;
  z-index:2;
  text-align:center;
  width:90%;
  max-width:1200px;
}
.ach-box img{
  width: 90px;        /* size increase */
  height: 90px;
  object-fit: contain;
  margin-bottom: 12px;
  
 
}

/* TITLE */
.ach-title{
  color:#fff;
  font-size:42px;
  margin-bottom:40px;
  font-weight:700;
}

/* GRID */
.ach-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

/* BOX */
.ach-box{
  background:rgba(255,255,255,0.15);
  padding:35px 20px;
  border-radius:10px;
  backdrop-filter:blur(6px);
    border:1.5px solid rgba(255,255,255,0.4);
  transition:.3s;
}

/* TEXT */
.ach-box h3{
  color:#fff;
  font-size:36px;
}

.ach-box p{
  color:#eee;
  font-size: 20px;
}
/* ====================================================================== */

/* SECTION */
.enroll-section{
  position:relative;
  min-height:100vh;
  background:url("images/form-contact.webp");
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
}

/* overlay */
.enroll-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
}

/* container */
.enroll-container{
  position:relative;
  z-index:2;
  width:90%;
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 420px;
  gap:60px;
  align-items:center;
}

/* LEFT */
.small-text{
  color:#fff;
  font-size:22px;
  margin-bottom:15px;
  animation:fadeUp 1s ease forwards;
}

.big-text{
  color:#fff;
  font-size:58px;
  font-weight:700;
  line-height:1.2;
  animation:fadeUp 1.4s ease forwards;
}

/* RIGHT FORM */
.enroll-right{
  background:#fff;
  padding:35px;
  border-radius:10px;
  box-shadow:0 20px 40px rgba(0,0,0,0.2);
animation:slideFromLeft 1s ease forwards;}

.enroll-right h3{
  margin-bottom:20px;
}

.enroll-right input{
  width:100%;
  padding:14px;
  margin-bottom:15px;
  border:1px solid #ddd;
  border-radius:4px;
}

.enroll-right button{
  width:100%;
  padding:15px;
  border:none;
  background:linear-gradient(45deg,#5b6cff,#6c7cff);
  color:#fff;
  border-radius:30px;
  font-weight:600;
}
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(800px);
  }
  to{
    opacity:1;
    transform:translateY(90);
  }
}

@keyframes slideFromLeft{
  from{
    opacity:0;
    transform:translateX(-80px);   /* ⭐ left side */
  }
  to{
    opacity:1;
    transform:translateX(0);       /* ⭐ final */
  }
}

/* popular-cources */
.courses-grid{
  width:90%;
  max-width:1200px;
  /* margin:auto; */
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  margin: 80px auto;   /* top bottom gap + center */

}

/* .course-card{
  background:#fff;
  padding:5px;
  border-radius:20px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
} */

.course-card{
  position:relative;
  background:#f4f4f4;
  padding:5px;
  border-radius:10px;
  overflow:hidden;
}

/* ⭐ SHAPE */
.card-shape{
  position:absolute;
  top:-40px;
  right:-40px;
  width:100px;
  height:100px;
  background:#ff0033;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  
}
/* animation */
@keyframes lineGrow{
  to{
    transform:scaleX(1);
  }
}

/* ICON */
.card-shape i{
  color:#fff;
  font-size:36px;
  margin-top:35px;
  margin-left:-15px;
}

.line {
  width: 50%;
  height: 4px;
  background: #e21d1d;
  margin: 20px 0;
  margin-left: 12px;
  transform:scaleX(0);
  transform-origin:left;
  animation:lineGrow 1s ease forwards;
}

/* ⭐ Scroll visible ayyaka animation run */
.line.active{
  animation:lineGrow 1s ease forwards;
}

/* KEYFRAME */
@keyframes lineGrow{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}
/* ⭐ IMAGE CARD */
.course-card img{
 width:100%;
  height:220px;
  object-fit:cover;
  border-radius:10px;
  animation:slideFromLeft 1s ease forwards;
}
.course-card h2.reveal.active{
  animation:fadeUp .6s ease forwards;
}

/* ⭐ TEXT CARD */
.course-card h2{
    margin-top: 20px;
  font-size:22px;
  font-weight: 600;
  margin-left: 10px;
  margin-bottom:10px;
}

.course-card p{
  color:#666;
  line-height:1.6;
    margin-left: 10px;

}








@media(max-width:750px){
    .container-grid{
    grid-template-columns:1fr;
    gap:30px;
    text-align:center;
  }

  .tree-img{
    margin:auto;
  }
    .ach-grid{
    grid-template-columns:1fr;
  }
  .enroll-container{
    grid-template-columns:1fr;   /* ⭐ MAIN */
    text-align:center;
  }

  .enroll-right{
    max-width:450px;
    margin:auto;
  }


  /* TEXT CENTER */
  .hero-title,
  .hero-sub{
    text-align:center;
  }

  /* TITLE SIZE */
  .hero-title{
    font-size:34px;
  }

  .hero-sub{
    font-size:22px;
  }

  /* ICON FIX */
  .title-icon{
    margin-left:-50px;
    font-size:8px;
    vertical-align:middle;
        display: inline-flex;
    align-items: start;
    justify-content: right;
  }
  .icon-box i {
    margin-right:90px ;
  }

  /* BUTTON CENTER */
  .apply-btn{
    display:block;
    width:max-content;
    margin:20px auto 0;
   
  }
  .big-text{
  color:#fff;
  font-size:28px;}
  .ach-box img{
    width: 56px;
    height: 70px
    ;
  }
  .ach-box{
    padding: 5px;
    margin-bottom: 30px;
  }
   /* .courses-grid{
    grid-template-columns:1fr;
  } */
   .courses-grid{
    grid-template-columns:1fr;
  }

  /* card center feel */
  .course-card{
    text-align:center;
  }

  /* image height adjust */
  .course-card img{
    height:200px;
  }

}