h1,
h2,
h3 {
    color: black;
    font-size: xx-large;
    text-align: center;
    padding: 2px 0px 20px 0px;
}

body {
    background-color: white;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    /* prevent horizontal scroll */
}

.hero p {
    font-size: clamp(15px, 2.5vw, 18px);
    line-height: 1.8;
}

.hero ul {
    font-size: clamp(15px, 2.5vw, 18px);
}



/*body {*/
/*    overflow: visible !important;*/
/*}*/


/*.hero-text {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    color: black;*/
/*    text-align: center;*/
/*    font-size: 3rem;*/
/*    font-family: 'Times New Roman', Times, serif;*/
    /* large and bold */
/*    border: 4px solid black;*/
    /* thick white border */
/*    padding: 50px 50px;*/
    /* spacious padding inside box */
    /*background: rgba(0, 0, 0, 0.2);*/
    /* optional soft dark background */
/*    max-width: 80%;*/
    /* responsive width */
/*    line-height: 1.3;*/
/*}*/

/*@media (max-width: 768px) {*/
/*    .hero-text {*/
/*        font-size: 1.3rem;*/
/*        border-width: 4px;*/
/*    }*/
/*}*/

.topnav {
    overflow: hidden;
    background-color: #267b95;
    top: 0;
    position: sticky;
    z-index: 10000; /* Higher */
}


.topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 24px 50px;
    margin: 0;
    text-decoration: none;
    font-size: 17px;
    gap: 80px;
}

.topnav img {}

.topnav a:hover {
    color: white;
}

.topnav a.active {
    color: white;
}

.topnav .icon {
    display: none;
}

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

pictures {

    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 100px;
    /* spacing between cards */
    flex-wrap: wrap;
    /* keeps layout responsive */

}




.pics {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    /* fixed width for uniformity */
}

.pics img {

    height: 250px;
    width: 100%;
    object-fit: cover;
    /* ensures uniform crop */
    border-radius: 8px;
}


.pics p {
    margin-top: 10px;
    text-align: center;
}

/* Hero Section Styles */
section.hero {
    /* padding: 40px 20px; */
    text-align: left;
}

/* About Section Styles */
section.about {
    text-align: left;
    /* padding: 40px 20px; */
}

/* Courses Section Styles */
section.courses {
    text-align: left;
    /* padding: 40px 20px; */
}

/* Faculty Section Styles */
section.faculty {
    text-align: left;
    /* padding: 40px 20px; */
}

/* Facilities Section Styles */
section.facilities {
    text-align: left;
    /* padding: 40px 20px; */
}

/* Contact Section Styles */
section.contact {
    text-align: left;
    /* padding: 40px 20px; */
}

/* YouTube Section Styles */
.youtube {
    background-color: white;
    width: 100%;
    text-align: center;
}

.youtube iframe {
    width: 100%;
    height: 400px;
    max-width: 900px;
    /* adjust height */
    border: 0;
    padding-bottom: 20px;
}

.youtube iframe {
    display: block;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .youtube iframe {
        height: 220px;
        /* smaller height on mobile */
        max-width: 100%;
    }
}


/* SEO Tags Section Styles */
.seo-tags {
    padding: 40px 20px;
    background-color: white;

}

.seo-tags h2{
    color:black;
}

.seo-tags p{
    color:black;
}

.seo-tags li{
    color:black;
}

li a {
    color: black;
    text-decoration: none;
}

li a:hover {
    color: #007896;
}

/* Contact Form Section Styles */
.contact-form {
    background-color: white;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.contact-form iframe {
    width: 100%;
    height: 300px;
    /* adjust height */
    border: 0;
}


/* Location Map Section Styles */
.location-map {
    background-color: white;
    width: 100%;
    max-width: 100%;
    height: auto;
    text-align: center;
}

.location-map iframe {
    width: 100%;
    height: 300px;
    /* adjust height */
    border: 0;
    padding: 0px 20px 20px 20px;
}

.frame {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

@media (max-width: 768px) {
    .frame iframe {
        height: 200px;
    }
}


@media (max-width: 768px) {
    .topnav {
        display: none !important;
    }
}



/* HEADER BACKGROUND */
.header {
    background-color: #007896;
    padding: 8px 0;
    position: sticky;
    top: 0;
    z-index: 9999;
}


/* FLEX CONTAINER */
.header-inner {
    max-width: 1300px;
    margin: auto;
    padding: 0 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    /* PERFECT ALIGNMENT */
}

/* LOGO */
.logo img {
    height: 50px;
    display: block;
}

/* DESKTOP MENU */
.nav-links {
    display: flex;
    gap: 35px;
}

.nav-links a {
    color: black;
    text-decoration: none;
    font-size: 18px;
    line-height: 50px;
    /* PERFECT vertical alignment with logo */
}

.nav-links a:hover {
    color: white;
}

/* HAMBURGER HIDDEN ON DESKTOP */
.hamburger {
    display: none;
    font-size: 28px;
    color: white;
}

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

    /* HAMBURGER SHOWS */
    .hamburger {
        display: block;
    }

    /* MENU GOES HIDDEN FIRST */
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #007896;
        margin-top: 10px;
    }

    /* WHEN TOGGLED */
    .nav-links.show {
        display: flex;
        padding-bottom: 40px;
    }

    /* MOBILE MENU ITEMS */
    .nav-links a {
        line-height: normal;
        padding: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }
}

@media (max-width: 768px) {

    .header-inner {
        position: relative;
        /* Needed for hamburger absolute positioning */
    }

    .hamburger {
        display: block;
        position: absolute;
        right: 20px;
        top: 10px;
        /* Adjust vertically as you like */
        z-index: 9999;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 60px;
        /* below header */
        left: 0;
        width: 100%;
        background-color: #007896;
        flex-direction: column;
        padding-bottom: 40px;
    }

    .nav-links.show {
        display: flex;
    }
}

/* Social Media Section Styles */
.social-media {
    background-color: #f2f2f2;
    padding: 20px 20px;
    text-align: center;
}

/* Ensure icons appear on a new line and centered */
.social-media div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    max-width: 500px;
    margin: 0 auto; /* space below heading */
}

.social-media a img {
    width: 30px;
    margin: 0 8px;
}

@media (min-width: 1024px) {
    .social-media a img {
        width: 25px;
    }
}

.icon {
    margin: 0 0; /* Remove large margin breaking alignment */
}

/* Base style (mobile first) */
.icon img {
    width: 40px;
    height: auto;
    transition: transform 0.2s ease;
}

/* Desktop view — smaller logo */
@media (min-width: 1024px) {
    .icon img {
        width: 25px;
    }
}

/* Optional: hover effect for a nice touch */
.icon img:hover {
    transform: scale(1.5);
}

/* Footer Styles */
footer {
    background-color: lightslategray;
    padding: 20px;
    text-align: center;
}


html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}


/*body {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/

.main-content {
    flex: 1; /* Push footer to bottom */
}
/* FORCE NEW HEADER TO BE STICKY ON ALL DEVICES */
.header {
    position: sticky !important;
    top: 0 !important;
    z-index: 999999 !important;
}

/* FIX MOBILE ISSUES WHERE ABSOLUTE MENU BREAKS STICKY BEHAVIOR */
@media (max-width: 768px) {
    .header {
        position: fixed !important;
        width: 100%;
        left: 0;
    }

    /* Push content down so it doesn't hide under fixed header */
    body {
        padding-top: 70px !important;
    }
}

section {
    padding: 0 40px;   /* Left–right gap on desktop */
}

@media (max-width: 768px) {
    section {
        padding: 0 20px;  /* smaller gap on mobile */
    }
}
.carousel-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  height:350px;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
  margin-top: 20px;
}

.carousel {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;     /* REQUIRED FIX */
    text-align: center;
    padding: 20px 0;
}

.slide img {
    width: 100%;
    height: 100%;         /* fill container height */
    object-fit: contain;  /* show entire image */
    display: block;
    background: #fff;     /* optional: white background behind image */
}


/*.slide {*/
/*  min-width: 100%;*/
/*  height: 100%;*/
/*}*/

/*.slide img {
 width: 100%;
  height: 100%;
  object-fit: cover;   IMPORTANT: fixes fast shift issue 
  display: block;
}*/

/* Navigation Buttons */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /*background: rgba(0, 0, 0, 0.5);*/
  color: white;
  padding: 10px grey;
  cursor: pointer;
  border-radius: 50%;
  font-size: 22px;
  user-select: none;
}

.left { left: 10px; color: black;}
.right { right: 10px; color: black;  }
.carousel-btn:hover { background: grey; }