@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* ================= NAVBAR ================= */
.nav-head{
    background-color: aliceblue;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    flex-wrap: wrap;

    /* FIX: navbar must stay above hero */
    position: relative;
    z-index: 9999;
}

.logo-section{
    display: flex;
    align-items: center;
    color: blue;
}

.logo-section img{
    width: 75px;
    height: 75px;
    object-fit: contain;
}

.logo-section h2{
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

ul.nav-links1{
    list-style: none;
    display: flex;
    gap: 20px;
}

ul.nav-links1 li a{
    color: navy;
    text-decoration: none;
    padding: 8px 12px;
    font-size: 16px;
    border-radius: 4px;
    transition: background-color .3s ease;
}

ul.nav-links1 li a:hover{
    background-color: darkcyan;
    color: #fff;
}

.login-btn{
    color: navy;
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 5px;
    text-decoration: none;
    transition: .3s ease;
}

.login-btn:hover{
    background-color: darkcyan;
    color: #fff;
}

.login-mobile{ display: none; }
.login-desktop{ display: block; }

/* Hamburger */
.hamburger{
    font-size: 28px;
    display: none;
    cursor: pointer;

    /* FIX: keep hamburger above hero */
    position: relative;
    z-index: 99999;
}
.logo-link {
    text-decoration: none;   /* removes underline */
    color: inherit;          /* keeps text color same */
}

.logo-link:hover,
.logo-link:focus {
    text-decoration: none;   /* ensures no underline on hover */
}


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

    .hamburger{ display: block; }
    .login-desktop{ display: none; }
    .login-mobile{ display: block; }

    .nav-links1{
        position: fixed;
        top: 90px;          /* FIXED — matches navbar height */
        left: -100%;
        width: 100%;
        background: blue;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 25px 0;
        transition: .3s ease;

        /* FIX: keep mobile menu on top */
        z-index: 9999;
    }

    .nav-links1.open{
        left: 0;
    }

    .nav-links1 a{
        color: white !important;
        font-size: 18px;
    }

    .login-btn{
        width: 140px;
        text-align: center;
    }
}

/* Extra adjustments */
@media (max-width:428px){
    .logo-section h2{ font-size: 15px; }
}

@media (max-width:323px){
    .logo-section h2{ font-size: 13px; }
}





/* ===== HERO WITH ONLY BACKGROUND IMAGE ===== */
.hero {
  width: 100%;
  height: 85vh; /* Adjust height */
  background: url("./Assets/Homepage/hero.jpg") center/cover no-repeat;
  position: relative;
}

/* ===== RESPONSIVE ===== */

/* Tablets */
@media (max-width: 992px) {
  .hero {
    height: 70vh;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .hero {
    height: 60vh;
    background-position: center;
  }
}




/* Scholarship Apply Section */
.scholar-apply {
  background: #f7f9fc;
  padding: 60px 20px;
  text-align: center;
  font-family: "Poppins", sans-serif;
}

.scholar-container {
  max-width: 800px;
  margin: auto;
}

.scholar-title {
  font-size: 2.2rem;
  margin-bottom: 15px;
  font-weight: 600;
  color: #00BFFF; /* Crimson */
}

.scholar-text {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 25px;
  color: #333;
}

.scholar-btn {
  display: inline-block;
  padding: 12px 32px;
  background: #00BFFF;
  color: #fff;
  font-size: 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s ease;
}

.scholar-btn:hover {
  background: #7a0000;
  box-shadow: 0 4px 12px rgba(179, 0, 0, 0.3);
}

/* Responsive */
@media (max-width: 480px) {
  .scholar-title {
    font-size: 1.8rem;
  }
  .scholar-text {
    font-size: 0.95rem;
  }
}


/* ================================
   OUR PROJECTS – CORPORATE STYLE
================================ */
.projects-corporate {
  padding: 80px 0;
  background: #f5f9ff;
}

.corporate-title {
  text-align: center;
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 45px;
  color: #00BFFF;
  letter-spacing: 1px;
}

/* Responsive Grid */
.corporate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Desktop – 3 cards */
  gap: 35px;
  max-width: 1300px;
  margin: 0 auto;
}

/* Card */
.corp-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  padding-bottom: 25px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 64, 147, 0.12);
  text-align: center;
}

.corp-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 18px 35px rgba(0,0,0,0.15);
}

.corp-img img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.corp-card h3 {
  margin: 18px 0 12px;
  font-size: 22px;
  color: #00BFFF;
  font-weight: 600;
}

.corp-card p {
  font-size: 15px;
  color: #444;
  padding: 0 20px;
  line-height: 1.6;
}

.corp-btn {
  display: inline-block;
  padding: 12px 26px;
  background: #00BFFF;
  color: #fff;
  border-radius: 50px;
  margin-top: 18px;
  font-size: 15px;
  font-weight: 600;
  transition: 0.3s ease;
}

.corp-btn:hover {
  background: #003c94;
}

/* ================================
        RESPONSIVE FIXES
================================ */

/* Large Tablet (2 cards) */
@media (max-width: 992px) {
  .corporate-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  .corp-img img {
    height: 230px;
  }
  .corporate-title {
    font-size: 32px;
  }
}

/* Small Tablet (2 cards + reduce padding) */
@media (max-width: 768px) {
  .projects-corporate {
    padding: 60px 20px;
  }
  .corporate-grid {
    gap: 25px;
  }
}

/* Mobile (1 card) */
@media (max-width: 576px) {
  .corporate-grid {
    grid-template-columns: 1fr;
  }
  .corporate-title {
    font-size: 26px;
  }
  .corp-card {
    border-radius: 16px;
  }
  .corp-img img {
    height: 200px;
  }
}

/* Extra Small Phones (perfect scaling) */
@media (max-width: 400px) {
  .corp-card h3 {
    font-size: 20px;
  }
  .corp-card p {
    font-size: 14px;
  }
  .corp-btn {
    padding: 10px 22px;
    font-size: 14px;
  }
}