* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

/* ===== SKELETON LOADING (PREVENTS FLASH) ===== */
#navbar {
  min-height: 80px;
  background-color: #d5d2d2;
  display: block;
}

#footer {
  min-height: 200px;
  background-color: #4b4f55;
}

.custom-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: 10rem;
  background-color: #d5d2d2;
  z-index: 1000;
}

.custom-logo img {
  height: 48px;
  width: auto;
}

.custom-nav-routes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  padding: 0px 5rem;
}

.custom-left-routes {
  display: flex;
  gap: 20px;
}

.custom-right-routes {
  margin-left: auto;
}

.custom-left-routes a,
.custom-right-routes a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

.custom-hamburger {
  display: none;
  font-size: 28px;
  cursor: pointer;
}

/* ===== DROPDOWN ===== */
.custom-dropdown {
  position: relative;
}

.custom-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: rgb(228, 225, 225);
  min-width: 180px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 6px;
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  z-index: 2000;
}

.custom-dropdown:hover .custom-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.custom-dropdown-menu a {
  display: block;
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}

.custom-dropdown-menu a:hover {
  background: #f5f5f5;
}

/* ===== ABOUT US ===== */
.about-us {
  padding: 1rem;
  background-color: #f9f9f9;
  border: 2px solid black;
}

.about-us h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}

/* ===== FEATURES GRID ===== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 40px;
  background-color: #f9f9f9;
}

.feature-card {
  background: #fff;
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  background-color: #ffd9b3;
}

.feature-card.orange-bg {
  background-color: #ffd9b3;
}

.icon {
  font-size: 40px;
  color: #ff7a00;
  margin-bottom: 15px;
}

.feature-card h3 {
  font-family: sans-serif;
  color: #1a3a52;
  margin-bottom: 10px;
  font-size: 1.2rem;
  font-weight: 700;
}

.feature-card p {
  font-family: sans-serif;
  color: #555;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* ===== IMPACT SECTION ===== */
.impact-section h2 {
  text-align: center;
  font-size: 48px;
  color: #1a3a52;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 40px 0 20px;
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0 2rem;
}

.impact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px;
}

.impact-icon {
  font-size: 56px;
  margin-bottom: 10px;
}

.impact-number {
  font-size: 48px;
  font-weight: 700;
  color: #1a3a52;
}

.impact-label {
  text-align: center;
  font-size: 14px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

/* ===== OFFERINGS SECTION ===== */


.offerings-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  border: 3px solid #333;
  padding: 20px 60px;
  background: white;
}

.offering-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.offering-image {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.offering-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.offering-card h3 {
  font-size: 18px;
  color: #1a3a52;
  font-weight: 700;
  line-height: 1.3;
}

.offering-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* ===== HINDI SECTION ===== */


.hindi-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  border: 3px solid #333;
  padding: 40px 20px;
  background: white;
}

.hindi-card {
  text-align: center;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.hindi-icon {
  font-size: 48px;
  line-height: 1;
}

.hindi-card h3 {
  font-size: 16px;
  color: #1a3a52;
  font-weight: 700;
  line-height: 1.3;
}

.hindi-card p {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

.scroll-link {
  display: inline-block;
  color: #ff8c42;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
  margin-top: auto;
}

.scroll-link:hover {
  color: #e07a2f;
  text-decoration: underline;
}


/* ===== TABLET (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  .mobile-only { display: none; }

  .custom-nav {
    padding: 10px 20px;
  }

  .custom-hamburger {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .custom-left-routes {
    display: none;
  }

  .custom-left-routes.active {
    display: flex;
    flex-direction: column;
    background: #d5d2d2;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    padding: 20px;
    z-index: 1500;
  }

  .custom-left-routes a {
    display: block;
    padding: 10px 0;
  }
}

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

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

  /* Navbar */
  .custom-nav {
    gap: 0;
    padding: 0 15px;
  }

  .custom-logo { order: 1; }

  .custom-hamburger {
    display: block;
    order: 2;
  }

  .custom-nav-routes {
    display: contents;
  }

  .custom-left-routes {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    background: #d5d2d2;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    display: none;
    z-index: 1500;
  }

  .custom-left-routes.active {
    display: flex;
  }

  .custom-right-routes {
    display: none;
  }

  /* About Us */
  .about-us h3 {
    font-size: 1.5rem;
  }

  /* Features */
  .features-grid {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 15px;
  }

  .feature-card h3 {
    font-size: 1rem;
  }

  .feature-card p {
    font-size: 0.9rem;
  }

  /* Impact */
  .impact-section h2 {
    font-size: 32px;
    padding: 30px 15px 15px;
  }

  .impact-grid {
    grid-template-columns: 1fr;
    margin: 0 1rem;
    gap: 15px;
  }

  .impact-number {
    font-size: 36px;
  }

  .impact-icon {
    font-size: 40px;
  }

  .impact-label {
    font-size: 12px;
  }

  /* Offerings */
  /* .offerings-section {
    margin: 30px 0;
  } */

  .offerings-container {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 20px;
    border: 2px solid #333;
  }

  .offering-image {
    height: 160px;
  }

  .offering-card h3 {
    font-size: 16px;
  }

  .offering-card p {
    font-size: 13px;
  }

  /* Hindi */
  /* .hindi-section {
    margin: 30px 0;
  } */

  .hindi-container {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
    border: 2px solid #333;
  }

  .hindi-card {
    padding: 15px;
  }

  .hindi-icon {
    font-size: 40px;
  }

  .hindi-card h3 {
    font-size: 14px;
  }

  .hindi-card p {
    font-size: 12px;
  }
}









/* ===== WHY CHOOSE TREECAMPUS SECTION ===== */
.why-choose-section {
  max-width: 100%;
  padding: 40px 40px 20px 40px;
  background-color: white;
  border-top: 3px solid #333;
  
  position: relative;
}

.why-choose-section h2 {
  text-align: center;
  font-size: 2.5rem;
  color: #1a3a52;
  font-weight: 700;
  margin-bottom: 30px;
}

.why-choose-section p {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  font-weight: 500;
}

.why-choose-section a {
  color: #ff8c42;
  text-decoration: underline;
  font-weight: 600;
}

.wave-divider {
  position: absolute;
  bottom: -60px;
  left: 0;
  width: 100%;
  height: 60px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 60" preserveAspectRatio="none"><defs><linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:%23ff8c42;stop-opacity:1" /><stop offset="50%" style="stop-color:%23ff9f52;stop-opacity:1" /><stop offset="100%" style="stop-color:%23ffb366;stop-opacity:1" /></linearGradient></defs><path d="M0,40 Q150,60 300,40 T600,40 T900,40 T1200,40 L1200,0 L0,0 Z" fill="url(%23grad)"/></svg>') repeat-x;
  background-size: 300px 60px;
}

@media (max-width: 768px) {
  .why-choose-section {
    padding: 30px 20px 30px 20px;
    
  }

  .why-choose-section h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  .why-choose-section p {
    font-size: 0.9rem;
  }

  .wave-divider {
    height: 50px;
    bottom: -30px;
  }
}

@media (max-width: 480px) {
  .why-choose-section {
    padding: 30px 15px 60px 15px;
  }

  .why-choose-section h2 {
    font-size: 1.5rem;
  }

  .why-choose-section p {
    font-size: 0.85rem;
  }

  .wave-divider {
    height: 40px;
    bottom: -20px;
  }
}








/* ===== GALLERY SECTION ===== */
.gallery-section {
  max-width: 100%;
  padding: 0px 40px;
  background-color: #f9f9f9;
  margin: 60px 0;
}

.gallery-section h2 {
  text-align: center;
  font-size: 2.5rem;
  color: #1a3a52;
  font-weight: 700;
  margin-bottom: 50px;
  letter-spacing: 2px;
}

.gallery-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  grid-auto-flow: row;
  grid-template-rows: repeat(3, auto);
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== TABLET (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  .gallery-section {
    padding: 50px 20px;
  }

  .gallery-section h2 {
    font-size: 2rem;
    margin-bottom: 40px;
  }

  .gallery-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 0;
    grid-auto-flow: row;
    grid-template-rows: repeat(3, auto);
  }

  .gallery-item {
    aspect-ratio: 4 / 3;
  }
}

/* ===== MOBILE (max 768px) ===== */
@media (max-width: 768px) {
  .gallery-section {
    padding: 40px 20px;
    margin: 40px 0;
  }

  .gallery-section h2 {
    font-size: 1.8rem;
    margin-bottom: 30px;
  }

  .gallery-container {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 0;
    grid-auto-flow: row;
    grid-template-rows: auto;
  }

  .gallery-item {
    aspect-ratio: 4 / 3;
  }
}






/* ===== VERY SMALL MOBILE (max 480px) ===== */
@media (max-width: 480px) {
  .gallery-section {
    padding: 30px 15px;
  }

  .gallery-section h2 {
    font-size: 1.5rem;
    margin-bottom: 25px;
  }

  .gallery-container {
    gap: 12px;
  }
}





/* NEWS            */
.news-heading{
  text-align: center;
  font-size: 2.5rem;
  color: #1a3a52;
  font-weight: 700;
  margin-bottom: 50px;
  letter-spacing: 2px;
}


.carousel2 {
  margin: 40px auto;
  position: relative;
  width: 90%;
  max-width: 1000px;
}

.carousel-track-wrapper {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease;
  gap: 20px;
}

.card {
  flex: 0 0 100%;
  
}

.card img {
  width: 100%;
  border-radius: 0px;
  display: block;
}

/* Tablet: 2 images */
@media (min-width: 600px) {
  .card {
    flex: 0 0 50%;
  }
}

/* Desktop: 3 images */
@media (min-width: 900px) {
  .card {
    flex: 0 0 33.3333%;
  }
}

/* Buttons */
.navigation {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  background: #000;
  color: #fff;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 2;
}

.prev { left: -10px; }
.next { right: -10px; }

/* Dots */
.dots {
  text-align: center;
  margin-top: 15px;
}

.dot {
  height: 10px;
  width: 10px;
  margin: 0 5px;
  background: #bbb;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

.dot.active {
  background: #333;
}

.wave-divider-2 {
  margin-bottom: 20px;
  position: absolute;
  bottom: -80px;
  left: 0;
  width: 100%;
  height: 60px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 60" preserveAspectRatio="none"><defs><linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:%23F5F5F5;stop-opacity:1" /><stop offset="50%" style="stop-color:%23F0F0F0;stop-opacity:1" /><stop offset="100%" style="stop-color:%23E8E8E8;stop-opacity:1" /></linearGradient></defs><path d="M0,40 Q150,60 300,40 T600,40 T900,40 T1200,40 L1200,0 L0,0 Z" fill="url(%23grad)"/></svg>') repeat-x;
  background-size: 300px 60px;
}

.why-treecampus{
  margin-top: 100px;
}
.why-treecampus h3{
  text-align: center;
  font-size:2rem;
  color:white;
 padding: 20px 50px;
  font-weight:700;
  background-color:#ff8c42 ;
  
  margin: 0px;
  
  
}

.why-treecampus p{
  margin: 0 20%;
  border: 4px solid #ff8c42;
  padding: 20px 50px;
  font: 600;
  font-size: large;
}

.treecampus-features {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0px 100px;
}

/* Mobile view */
.image-content{
  width: 50vw;
}
.image-content img {
    width: 100%;
    max-width: 2000px;
    margin-top: 20px;
}



.certifications{
  border: 1px solid black;
  margin-bottom: 40px;
  margin-top: 50px;
}
.certifications h3{
  text-align: center;
  font-size:2rem;
  color:#1a3a52;
  margin-bottom:15px;
  margin-top: 5px;
  font-weight:700;
  
  
}
.certifications-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 20rem;
 
}

@media (max-width: 768px) {
  .certifications-list {
    grid-template-columns: 1fr;
    margin: 0px;

    
  }

  .treecampus-features{
    flex-direction: column;
    margin: 0px 8px;
  }

  .image-content img {
    width: 100%;
    max-width: 300px;
    margin-top: 20px;
  }


}

/* ===== FREE APP SECTION ===== */
.free-app{
  background:#f1f1f1;
  
  padding:40px 20px;
  border-top:3px solid #333;
}

.free-app h2{
  text-align: center;
  font-size:2rem;
  color:#1a3a52;
  margin-bottom:15px;
  font-weight:700;
}

.free-app p{
  font-weight: 500;
  max-width:900px;
  margin:auto;
  color:#333;
  line-height:1.7;
  font-size:15px;
}


/* ===== AI LEARNING SECTION ===== */
.ai-learning{
  display:flex;
  gap:40px;
  align-items:center;
  padding:50px 60px;
  background:white;
  border-top:3px solid #333;
}

.ai-left{
  flex:1;
}

.ai-left h2{
  font-size:1.8rem;
  color:#1a3a52;
  margin-bottom:20px;
  font-weight:700;
}

.ai-left p{
  margin-bottom:15px;
  color:#333;
  line-height:1.7;
  font-size:15px;
}

.ai-left .cta{
  font-weight:700;
}

.ai-right{
  flex:1;
  display:flex;
  justify-content:center;
}

.ai-right img{
  max-width:280px;
}


/* ===== LIVE CLASSES ===== */
.live-classes{
  text-align:center;
  padding:40px 20px;
  background:#f1f1f1;
  border-top:3px solid #333;
}

.live-classes h2{
  font-size:2rem;
  color:#1a3a52;
  margin-bottom:15px;
  font-weight:700;
}

.live-classes p{
  max-width:900px;
  margin:auto;
  font-size:15px;
  line-height:1.7;
  color:#333;
}


/* ===== FOOTER ===== */
.footer{
  background:#4b4f55;
  color:#fff;
  padding:40px 20px 20px;
}

.footer-container{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:30px;
  max-width:1200px;
  margin:auto;
}

.footer-left img{
  width:70px;
  margin-bottom:10px;
}

.footer-left p{
  font-size:14px;
  max-width:150px;
}

.footer-links,
.footer-contact,
.footer-social{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.social-icons a{
  border:1px solid #fff;
  padding:5px;
  border-radius:50%;
  margin-right: 5px;
  
}

.footer h4{
  margin-bottom:10px;
  font-weight:700;
}

.footer a{
  text-decoration:none;
  color:#fff;
  font-size:14px;
}

.social-icons span{
  font-size:22px;
  margin-right:10px;
  cursor:pointer;
}

.copyright{
  text-align:center;
  margin-top:20px;
  border-top:1px solid #777;
  padding-top:10px;
  font-size:13px;
}


/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .why-treecampus p{
    margin: 0 20%;
    border: 4px solid #ff8c42;
    padding: 20px 50px;
    font: 600;
    font-size: large;
  }
  .certifications-list{
    margin : 0px 5rem;
  }
  .ai-learning{
    flex-direction:column;
    text-align:center;
    padding:40px 20px;
  }

  .ai-right img{
    max-width:200px;
  }

  .footer-container{
    flex-direction:column;
   
  }
}