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


/* Reset some default styles */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;

}

/* Variables */
:root{
  --bg-color: #000000;
  --primary-color: #000000;
  --second-color: #FF0000;
  --hover-bg-color: #FF0000;
  --shadow-1: 0px 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-2: 0px 2px 10px rgba(26, 112, 224, 0.4);
  --nav-height: 80px; 
}

/* Body */
body{
  background-color: #000000;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

/* Reusable css */
a{
  text-decoration: none;
  color: white;
  font-weight: 500;
}

ul{
  list-style-type: none;

}

/* Naviagtion Bar */
.nav{
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vw 10.4vw;
  height: 70px;
  width: 100%;
  background: var(--bg-color);
  color: var(--primary-color);
  z-index: 9999;    
}

nav:hover #nav-bottom{
  height: 100%;
  bottom: -100%;
}

#nav-bottom{
 /* background-color: red;*/
  height: 0%;
  position: absolute;
  width: 79%;
  transition: all ease 0.65s;
  bottom: 0%;
  border-bottom: 2px solid #dadada;
}




.nav h1 {
  color: white;
  font-weight: 600;
  line-height: 1;      /* FIXES VERTICAL SPACING */
  font-size: 22px;     /* PERFECT NAV SIZE */
  margin: 0;           /* Removes default margin */
}


.nav-main-menu {
    display: flex;
    align-items: center;
    gap: 0.5px;   /* adjust gap size */
}


.nav-main-menu li {
    margin: 0 18px;   /* adjust the gap value (recommended: 16–22px) */
}

.nav-link {
    display: flex;
    align-items: center;
}

.nav-link:hover{
  color: var(--second-color);
}

.nav span{
  margin-right: 5px;
}

.fa-chevron-down, .fa-chevron-right{
  font-size: 12px;
  transition: .3s;
}

.dropdown:hover .fa-chevron-down, .sub-dropdown:hover .fa-chevron-right{
  transform: rotate(180deg);
}

.dropdown:hover .nav-link{
  color: var(--second-color);
}

/* Dropdown */
.dropdown{
  position: relative;
}

.nav-main-menu .dropdown-content{
  display: none;
  position: absolute;
  top: 46px;
  left: 0;
  background: var(--bg-color);
  min-width: 240px;
  border-top: 3px solid #ccc;
  border-radius: 0 0 3px 3px;
  animation: slideUp .3s;
}

.dropdown-content li{
  padding: 20px;
}

.dropdown-content li:hover{
  background: var(--hover-bg-color);
}

.dropdown:hover .dropdown-content{
  display: block;
}

/* Sub-Dropdown */
.nav-main-menu .sub-dropdown-content{
  position: absolute;
  top: 34%;
  left: 100%;
  background: var(--bg-color);
  min-width: 240px;
  border-top: 3px solid #ccc;
  border-radius: 3px;
  animation: slideUp .3s;
  box-shadow: var(--shadow-1);
}

@keyframes slideUp{
  from{
    margin-top: 20px;
  }
  to{
    margin-top: 0;
  }
}

.dropdown-link{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sub-dropdown:hover .sub-dropdown-content{
  display: block;
}

.btn{
  font-size: 15px;
  background-color: var(--second-color);
  color: var(--bg-color);
  border: none;
  padding: 10px 24px;
  border-radius: 30px;
  box-shadow: var(--shadow-2);
  cursor: pointer;
  transition: .3s;

}

nav .btn {
    position: relative;
    top: -6px;   /* moves upward */
}


.btn:hover{
  opacity: 0.9;

}

/* ============================
   CLEAN HERO CONTAINER LAYOUT
   ============================ */

#page1 {
    height: 100vh;
    width: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 8vw;
    padding-top: 80px; /* for navbar spacing */
    position: relative;
    z-index: 1;
}

/* Main container that centers hero */
.hero-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

/* HERO FLEX LAYOUT */
.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    position: relative;
    z-index: 1;
}

/* LEFT SECTION */
.hero-left {
    flex: 1;
    color: white;
}

.hero-left h1 {
    font-size: clamp(2.5rem, 5vw, 6rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 25px;
}

.hero-left h1 span {
    color: var(--second-color);
    text-shadow: 0 0 18px rgba(255, 0, 0, 0.6);
}

.hero-left p {
    text-align: justify;
    text-justify: inter-word;   /* improves spacing */
    max-width: 600px;           /* keeps lines readable */
    line-height: 1.6;           /* cleaner spacing */
    margin-bottom: 25px;
}


/* BUTTONS */
.hero-buttons {
    display: flex;
    gap: 20px;
    margin-top: 35px;
}

.hero-btn-primary {
    background: var(--second-color);
    color: #000;
    padding: 14px 32px;
    border-radius: 30px;
    font-size: 16px;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
}

.hero-btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid var(--second-color);
    padding: 14px 32px;
    border-radius: 30px;
    font-size: 16px;
    transition: 0.3s;
}

.hero-btn-secondary:hover {
    background: var(--second-color);
    color: #000;
}

/* RIGHT IMAGE */
.hero-right {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hero-right img {
    width: 100%;
    max-width: 500px;
    filter: drop-shadow(0 0 25px rgba(255, 0, 0, 0.3));
    animation: float 4s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

/* floating animation */
@keyframes float {
    0%, 100% { transform: translateY(0);}
    50% { transform: translateY(-12px);}
}

/* MOBILE RESPONSIVE */
@media (max-width: 900px) {
    .hero {
        flex-direction: column;
        text-align: center;
    }

    .hero-right img {
        max-width: 380px;
        margin-top: 40px;
    }

    .hero-left p {
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .hero-buttons {
        justify-content: center;
    }
}

/* Page 2 */
#page2{
    height: 100vh;
    width: 100%;
    background-color: #000000;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#page2 h1{
    font-size: clamp(2rem, 4vw, 5rem);
    text-transform: uppercase;
    font-weight: 900;
    line-height: 1.2;
}

#page2 p{
    text-align: center;
    font-weight: 400;
    margin-top: 5vh;
}

/* Page 3 */
#page3{
    height: 100vh;
    width: 100%;
    background-color: #000000;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#page3 h1{
    font-size: clamp(2rem, 4vw, 5rem);
    text-transform: uppercase;
    font-weight: 900;
    line-height: 1.2;
}

#page3 p{
    text-align: center;
    font-weight: 400;
    margin-top: 5vh;
}

/* Page 4 */
#page4{
    height: 100vh;
    width: 100%;
   background-color: #000000;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#page4 h1{
    font-size: clamp(2rem, 4vw, 5rem);
    text-transform: uppercase;
    font-weight: 900;
    line-height: 1.2;
}

#page4 p{
    text-align: center;
    font-weight: 400;
    margin-top: 5vh;
}

/* Page 5 */
#page5{
    height: 100vh;
    width: 100%;
   background-color: #000000;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#page5 h1{
    font-size: clamp(2rem, 4vw, 5rem);
    text-transform: uppercase;
    font-weight: 900;
    line-height: 1.2;
}

#page5 p{
    text-align: center;
    font-weight: 400;
    margin-top: 5vh;
}

/* Page 6 */
#page6{
    height: 100vh;
    width: 100%;
   background-color: #000000;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#page6 h1{
    font-size: clamp(2rem, 4vw, 5rem);
    text-transform: uppercase;
    font-weight: 900;
    line-height: 1.2;
}

#page6 p{
    text-align: center;
    font-weight: 400;
    margin-top: 5vh;
}

/* Page 7 */
#page7{
    height: 100vh;
    width: 100%;
    background-color: #000000;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#page7 h1{
    font-size: clamp(2rem, 4vw, 5rem);
    text-transform: uppercase;
    font-weight: 900;
    line-height: 1.2;
}

#page7 p{
    text-align: center;
    font-weight: 400;
    margin-top: 5vh;
}

#page8{
    height: 100vh;
    width: 100%;
    background-image: url(images/DSS.png) ;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 10vw;
}


/* ================================
   MEGA DROPDOWN MENU (DSS THEME)
   ================================ */

.mega-wrapper {
    position: relative;
}

/* Trigger Hover */
.mega-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 26px 10px;
    margin-inline: 10px;
    transition: 0.3s;
    color: white;
}

.mega-trigger:hover {
    color: var(--second-color);
}

.mega-trigger i {
    margin-left: 6px;
    transition: 0.3s;
}

.mega-wrapper:hover .mega-trigger i {
    transform: rotate(180deg);
}

/* Dropdown Panel */
.mega-dropdown {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    background: #000;
    border: 1px solid #222;
    border-top: 3px solid var(--second-color);
    border-radius: 5px;
    box-shadow: 0px 15px 40px rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.35s ease;
    z-index: 999;
}

.mega-wrapper:hover .mega-dropdown {
    opacity: 1;
    visibility: visible;
    top: 60px;
}

/* Mega Menu Container */
.mega-container {
    padding: 20px 30px;
}

/* Grid layout */
.mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Column */
.mega-col {
    display: flex;
    flex-direction: column;
}

.mega-title {
    color: var(--second-color);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

/* Mega Items */
.mega-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 12px;
    border-radius: 5px;
    transition: 0.25s ease;
    color: white;
}

.mega-item:hover {
    background: var(--hover-bg-color);
    color: black;
}

.mega-icon {
    font-size: 20px;
    color: var(--second-color);
}

/* Text */
.mega-item-title {
    font-size: 15px;
    font-weight: 600;
}

.mega-item-desc {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 3px;
}

/* Footer */
.mega-footer {
    margin-top: 25px;
    padding: 15px;
    border-top: 1px solid #222;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mega-footer p {
    font-size: 14px;
    color: #999;
}

.mega-btn {
    background: var(--second-color);
    border: none;
    padding: 8px 18px;
    border-radius: 4px;
    color: black;
    cursor: pointer;
    transition: 0.3s ease;
    font-weight: 600;
}

.mega-btn:hover {
    opacity: 0.85;
}

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

@media (max-width: 1024px){
    .mega-dropdown {
        width: 760px;
    }
}

@media (max-width: 850px){
    .mega-grid {
        grid-template-columns: 1fr 1fr;
    }

    .mega-dropdown {
        width: 90vw;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 600px){
    .mega-grid {
        grid-template-columns: 1fr;
    }

    .mega-dropdown {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        transform: none;
        border-radius: 0;
    }
}

/* Your existing CSS... */
/* mega menu css */
/* hero css */
/* all your current styles... */

/* 🔥 ADD RESPONSIVE CSS BELOW THIS COMMENT — AT THE END OF THE FILE */

@media (max-width: 600px) {
    /* mobile styles here */
    @media (max-width: 600px) {

    #page1 {
        height: auto;
        padding: 120px 20px 60px 20px;
        text-align: center;
    }

    .hero {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .hero-left {
        align-items: center;
    }

    .hero-left h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    .hero-left p {
        max-width: 95%;
        font-size: 14px;
        text-align: justify;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-right img {
        width: 80%;
        max-width: 260px;
    }
}

}

@media (min-width: 600px) and (max-width: 900px) {
    /* tablet styles here */
    @media (min-width: 600px) and (max-width: 900px) {

    #page1 {
        height: auto;
        padding: 140px 40px 70px 40px;
    }

    .hero {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .hero-left h1 {
        font-size: 2.8rem;
    }

    .hero-left p {
        max-width: 80%;
        margin: 0 auto;
        text-align: justify;
    }

    .hero-right img {
        max-width: 350px;
    }
}

}

@media (min-width: 900px) and (max-width: 1200px) {
    /* laptop styles here */
    @media (min-width: 900px) and (max-width: 1200px) {

    #page1 {
        padding-top: 110px;
    }

    .hero-left h1 {
        font-size: 3.5rem;
    }
    
    .hero-left p {
        max-width: 500px;
    }

    .hero-right img {
        max-width: 420px;
    }
}

}

@media (min-width: 1200px) and (max-width: 1600px) {
    /* desktop styles */
    @media (min-width: 1200px) and (max-width: 1600px) {

    .hero-container {
        max-width: 1300px;
    }

    .hero-left h1 {
        font-size: 4.2rem;
    }
}

}

@media (min-width: 1600px) {
    /* large screen styles */
    @media (min-width: 1600px) {

    .hero-container {
        max-width: 1600px;
    }

    .hero-left h1 {
        font-size: 5rem;
    }

    .hero-left p {
        max-width: 650px;
    }

    .hero-right img {
        max-width: 550px;
    }
}

}

/* -------------------------
      MOBILE NAV RESET
-------------------------- */

.mobile-menu-icon {
    display: none;
    position: absolute;
    right: 25px;
    font-size: 26px;
    color: white;
    cursor: pointer;
    z-index: 10000;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 70px;
    width: 100%;
    background: #000;
    padding: 20px;
    border-top: 2px solid #FF0000;
    z-index: 9999;
}

.mobile-menu ul {
    list-style: none;
}

.mobile-menu ul li {
    margin-bottom: 15px;
}

.mobile-menu a {
    color: white;
    font-size: 18px;
    display: block;
    padding: 8px 0;
}

/* Dropdown inside mobile */
.mobile-dropdown i {
    float: right;
    transition: 0.3s;
}

.mobile-submenu {
    display: none;
    padding-left: 15px;
    border-left: 2px solid #FF0000;
}

/* -------------------------
       MEDIA QUERIES
-------------------------- */

@media (max-width: 900px) {

    /* Hide desktop menu */
    .nav-main-menu {
        display: none;
    }

    /* Show hamburger icon */
    .mobile-menu-icon {
        display: block;
    }

    /* Adjust nav padding */
    .nav {
        padding: 20px;
    }

    /* Center brand name */
    .nav h1 {
        font-size: 20px;
    }
}

/* MOBILE */
@media (max-width: 600px) {
    nav .btn {
        position: absolute;
        right: 70px;
        top: 15px;
        z-index: 9999;
        padding: 12px 20px;
        font-size: 15px;
    }
}

/* TABLETS */
@media (min-width: 600px) and (max-width: 900px) {
    nav .btn {
        padding: 12px 28px;
        font-size: 15px;
        margin-left: 10px;
    }
}

/* SMALL LAPTOP */
@media (min-width: 900px) and (max-width: 1200px) {
    nav .btn {
        padding: 10px 26px;
        font-size: 14px;
    }
}

/* LARGE DESKTOP */
@media (min-width: 1200px) and (max-width: 1600px) {
    nav .btn {
        padding: 12px 28px;
        font-size: 15px;
    }
}

/* ==============================
   FLOATING WHATSAPP BUTTON
   ============================== */
.whatsapp-float {
    position: fixed;
    width: 55px;
    height: 55px;
    bottom: 25px;
    right: 25px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    text-align: center;
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
    z-index: 99999;
    transition: 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.12);
    background-color: #1ebe5c;
}

/* ================================
   FLOATING CALL ICON + HOVER MENU
   ================================ */
.call-container {
    position: fixed;
    top: 14px; /* perfect alignment with navbar elements */
    right: 25px;
    z-index: 99999;
    height: 40px; /* makes alignment cleaner */
}


.call-icon {
    width: 40px;
    height: 40px;
    background: #ff0000;
    color: #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
    transition: 0.3s;
}

.call-icon:hover {
    transform: scale(1.12);
}

/* Hidden by default */
.call-dropdown {
    position: absolute;
    top: 60px;
    right: 0;
    background: #0d0d0d;
    border: 1px solid #333;
    border-top: 2px solid #ff0000;
    border-radius: 6px;
    padding: 15px 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.35s ease;

    /* 🔥 Auto width based on content */
    width: max-content;
    max-width: 320px; /* safe limit */
    white-space: nowrap; /* prevents email from breaking into next line */
}

/* SHOW on hover (same behavior as nav mega menus) */
.call-container:hover .call-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Text Styles */
.call-title {
    color: #ff0000;
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 600;
}

.call-heading {
    color: #fff;
    font-size: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid #333;
    padding-bottom: 6px;
}

.call-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s ease;
}

.call-option i {
    color: #ff0000;
    font-size: 16px;
}

.call-option:hover {
    color: #ff0000;
}

/* ============ SECTION TEMPLATE ============ */
.section-content {
    width: 80%;
    max-width: 1300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

.section-left {
    flex: 1;
    color: white;
}

.section-left h2 {
    font-size: 3rem;
    font-weight: 800;
}

.section-left h2 span {
    color: var(--second-color);
}

.section-left p {
    margin-top: 20px;
    line-height: 1.6;
    opacity: 0.9;
    width: 90%;
}

.section-right {
    flex: 1;
}

.section-right img {
    width: 100%;
    filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.25));
}

/* ======================
   COURSE SLIDER
   ====================== */
#page5 {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

/* TITLE */
.courses-title {
    text-align: center;
    color: #fff;
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 40px;
}

.courses-title span {
    color: #FF0000;
    text-shadow: 0 0 12px rgba(255,0,0,0.5);
}

/* SLIDER WRAPPER */
.course-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
}

/* TRACK */
.course-track {
    display: flex;
    gap: 50px;
    width: max-content;
    animation: slideCourses 22s linear infinite;
}

/* EACH BOX */
.course-box {
    background: #0d0d0d;
    padding: 20px 25px;
    border-radius: 12px;
    border: 1px solid #1a1a1a;
    min-width: 180px;
    text-align: center;
    transition: 0.3s;
}

.course-box:hover {
    border-color: #FF0000;
    box-shadow: 0 0 20px rgba(255,0,0,0.3);
    transform: translateY(-6px);
}

/* IMAGES */
.course-box img {
    width: 70px;
    filter: drop-shadow(0 0 8px rgba(255,0,0,0.4));
    margin-bottom: 10px;
}

/* TEXT */
.course-box p {
    color: white;
    font-size: 1rem;
    opacity: 0.9;
}

/* SMOOTH INFINITE SCROLL */
@keyframes slideCourses {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
/* ======================
   TEAM SECTION
   ====================== */
#page6 {
    height: 100vh;
    text-align: center;
    padding-top: 80px;
}

.team-title {
    font-size: 3rem;
    color: white;
}

.team-title span {
    color: var(--second-color);
}

.team-grid {
    width: 80%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 30px;
    margin: 50px auto 0;
}

.team-box img {
    width: 160px;
    border-radius: 50%;
    border: 3px solid #ff0000;
}

.team-box h3 {
    color: white;
    margin-top: 12px;
}

.team-box p {
    color: #aaa;
    font-size: 14px;
}

/* ============================
   INTERNSHIP SECTION (PAGE 2)
   ============================ */

#page2 {
    width: 100%;
    min-height: 100vh;
    padding: 100px 8vw;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.internship-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    width: 100%;
    max-width: 1500px;
}

/* LEFT IMAGE */
.internship-image img {
    width: 500px;
    max-width: 100%;
    filter: drop-shadow(0 0 25px rgba(255,0,0,0.3));
    border-radius: 10px;
}

/* RIGHT CONTENT */
.internship-content {
    flex: 1;
    color: white;
}

.internship-content h2 {
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 25px;
}

.internship-content span {
    color: #FF0000;
    text-shadow: 0 0 18px rgba(255, 0, 0, 0.6);
}

.internship-content p {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 650px;
    margin-bottom: 18px;
    opacity: 0.9;
}

/* Bullet points */
.internship-points {
    margin: 20px 0;
}

.internship-points li {
    margin-bottom: 12px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.9;
}

.internship-points i {
    color: #FF0000;
    font-size: 1.2rem;
}

/* Button */
.internship-btn {
    margin-top: 20px;
    padding: 14px 34px;
    font-size: 16px;
}

/* PAGE 2 LAYOUT */
#page2 {
    width: 100%;
    padding: 120px 8vw;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    max-width: 1500px;
    width: 100%;
}

/* IMAGE LEFT */
.section-left img {
    width: 100%;
    max-width: 520px;
    filter: drop-shadow(0 0 20px rgba(255,0,0,0.3));
}

/* TEXT RIGHT SIDE ALIGNMENT */
.section-right {
    flex: 1;
    color: white;

    display: flex;
    flex-direction: column;
    justify-content: center;     /* vertically centers like hero section */
    align-items: flex-start;      /* aligns heading & paragraph to the LEFT (clean) */
    padding-left: 60px;           /* pushes text further to the right neatly */
}


.section-right h2 {
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    text-align: left;
    width: 100%;
}

.section-right h2 span {
    color: #FF0000;
    text-shadow: 0 0 12px rgba(255,0,0,0.5);
}

.section-right p {
    line-height: 1.8;
    font-size: 1.1rem;
    opacity: 0.92;
    max-width: 650px;

    text-align: justify;          /* Justify left + right */
      /* text-justify: inter-word;   Smooth spacing between words */
    width: 100%;
    letter-spacing: 0.2px;        /* Slightly cleaner text */
}


/* RESPONSIVE */
@media (max-width: 900px) {
    .section-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .section-left img {
        max-width: 360px;
    }

    .section-right p {
        margin: 0 auto;
        text-align: center;
    }
}

/* Internship Cards Container */
.internship-cards {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

/* Single Card */
.intern-card {
    background: #0d0d0d;
    border: 1px solid #1a1a1a;
    padding: 22px;
    border-radius: 10px;
    transition: 0.3s ease;
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.15);
}

.intern-card:hover {
    border-color: #FF0000;
    box-shadow: 0 0 25px rgba(255,0,0,0.3);
    transform: translateY(-6px);
}

/* Title */
.intern-card h3 {
    color: #FF0000;
    font-size: 1.25rem;
    margin-bottom: 8px;
    font-weight: 700;
    text-shadow: 0 0 12px rgba(255,0,0,0.4);
}

/* Description */
.intern-card p {
    color: #ccc;
    line-height: 1.55;
    opacity: 0.9;
    font-size: 0.95rem;
}

/* RIGHT SIDE CARDS WRAPPER */
.section-right-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
    justify-content: center;
}

/* CYBER CARDS */
.cs-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #0d0d0d;
    padding: 18px 24px;
    border: 1px solid #1a1a1a;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(255,0,0,0.1);
    transition: 0.3s ease;
}

.cs-card:hover {
    border-color: #FF0000;
    box-shadow: 0 0 25px rgba(255,0,0,0.35);
    transform: translateX(6px);
}

/* ICON STYLE */
.cs-icon {
    width: 42px;
    height: 42px;
    background: #FF0000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 12px rgba(255,0,0,0.4);
}

.cs-icon i {
    color: black;
    font-size: 20px;
    font-weight: 900;
}

/* CARD TITLE */
.cs-card h3 {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
}

#page4 {
    width: 100%;
    min-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 8vw;
    background: #000;
}

.section-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    width: 100%;
}

/* LEFT IMAGE */
.section-left img {
    width: 100%;
    max-width: 450px;
    filter: drop-shadow(0 0 20px rgba(255,0,0,0.35));
}

/* RIGHT TEXT */
.section-right {
    flex: 1;
    text-align: left;
    color: white;
}

.section-right h2 {
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.section-right h2 span {
    color: #FF0000;
    text-shadow: 0 0 12px rgba(255,0,0,0.5);
}

.section-right p {
    font-size: 1.1rem;
    line-height: 1.8;
    opacity: 0.92;
    max-width: 650px;
    text-align: justify;
    text-justify: inter-word;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .section-content {
        flex-direction: column;
        text-align: center;
    }

    .section-right h2 {
        text-align: center;
    }

    .section-right p {
        text-align: justify;
        margin: 0 auto;
    }

    .section-left img {
        max-width: 320px;
    }
}

/* DSS THEME CARDS */
.dss-cards {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.dss-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #0d0d0d;
    border: 1px solid #1a1a1a;
    padding: 18px 22px;
    border-radius: 10px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.15);
    transition: 0.3s ease;
}

.dss-card:hover {
    border-color: #FF0000;
    box-shadow: 0 0 22px rgba(255, 0, 0, 0.25);
    transform: translateX(6px);
}

.dss-icon {
    width: 45px;
    height: 45px;
    background: #FF0000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dss-icon i {
    color: #0d0d0d;
    font-size: 20px;
}

.dss-card p {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 600;
    margin: 0;
}

/* Responsive: center cards on mobile */
@media (max-width: 900px) {
    .section-content {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .dss-cards {
        align-items: center;
    }

    .dss-card {
        max-width: 90%;
    }
}

/* ================================
   AWESOME PEOPLE SECTION (DSS THEME)
================================ */

#awesome-people {
    width: 100%;
    background: #000;
    padding: 120px 8vw;
    text-align: center;
}

.ap-title {
    color: white;
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 60px;
}

.ap-title span {
    color: var(--second-color);
    text-shadow: 0 0 12px rgba(255,0,0,0.5);
}

.ap-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
    max-width: 1300px;
    margin: 0 auto;
}

/* LEFT IMAGE CARD */
.ap-left img {
    width: 420px;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(255,0,0,0.35);
    border: 2px solid #111;
}

/* RIGHT SIDE */
.ap-right {
    flex: 1;
    text-align: left;
    color: white;
}

/* ROLE TAG */
.ap-role {
    background: #ff0000;
    color: black;
    padding: 6px 16px;
    display: inline-block;
    border-radius: 20px;
    font-size: 14px;
    margin-bottom: 18px;
    font-weight: 700;
}

/* NAME */
.ap-name {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 18px;
}

/* DESCRIPTION */
.ap-desc {
    opacity: 0.9;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* TAGS */
.ap-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

.ap-tags span {
    background: #0d0d0d;
    border: 1px solid #1a1a1a;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    transition: 0.3s;
}

.ap-tags span:hover {
    border-color: #ff0000;
    box-shadow: 0 0 15px rgba(255,0,0,0.3);
}

/* BUTTON */
.ap-btn {
    display: inline-block;
    background: #ff0000;
    color: black;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 700;
    transition: 0.3s;
}

.ap-btn:hover {
    opacity: 0.85;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .ap-container {
        flex-direction: column;
        text-align: center;
    }

    .ap-right {
        text-align: center;
    }

    .ap-left img {
        width: 280px;
    }

    .ap-tags {
        justify-content: center;
    }
}

/* ======================================
   PAGE 9 — CONTACT + FOOTER SECTION
====================================== */

#page9 {
    width: 100%;
    background: url(images/binary-bg.png);
    background-size: cover;
    background-position: center;
    padding: 100px 8vw 40px 8vw;
    color: white;
}

/* TOP CONTENT WRAPPER */
.contact-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

/* LEFT SIDE */
.cw-left {
    flex: 1.3;
}

.cw-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 25px;
}

/* FORM */
.cw-form {
    display: flex;
    gap: 12px;
    margin-bottom: 40px;
}

.cw-form input {
    background: #0d0d0d;
    border: 1px solid #222;
    padding: 12px 16px;
    border-radius: 6px;
    width: 200px;
    color: white;
}

.cw-btn {
    background: white;
    color: black;
    border: none;
    padding: 12px 22px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.cw-btn:hover {
    background: #ff0000;
    color: white;
}

/* DSS ABOUT TEXT */
.dss-red {
    color: #ff0000;
}

.dss-white {
    color: white;
}

.cw-about p {
    opacity: 0.8;
    margin-top: 10px;
    max-width: 500px;
}

.cw-address {
    margin-top: 15px;
    color: #ff0000;
    font-weight: 600;
}

.cw-address i {
    margin-right: 8px;
}

/* RIGHT SIDE IMAGE */
.cw-right img {
    width: 420px;
    filter: drop-shadow(0 0 15px rgba(255,0,0,0.4));
}

/* FOOTER LINKS SECTION */
.footer-links {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
    border-top: 1px solid #222;
    padding-top: 40px;
}

.footer-col h3 {
    color: white;
    margin-bottom: 12px;
    font-size: 1.3rem;
}

.footer-col a {
    display: block;
    color: #ccc;
    margin-bottom: 8px;
    transition: 0.3s;
}

.footer-col a:hover {
    color: #ff0000;
}

.footer-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: #ccc;
}

.footer-contact i {
    color: #ff0000;
}

/* FOOTER BOTTOM */
.footer-bottom {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    opacity: 0.7;
}

.footer-socials i {
    font-size: 20px;
    margin-left: 15px;
    cursor: pointer;
    transition: 0.3s;
}

.footer-socials i:hover {
    color: #ff0000;
}

/* RESPONSIVE */
@media (max-width: 900px) {

    .contact-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .cw-form {
        justify-content: center;
        flex-wrap: wrap;
    }

    .cw-right img {
        width: 260px;
        margin: 0 auto;
    }

    .footer-links {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
    }
}

/* Keep full-size mega menu always inside screen */
.mega-wrapper:hover .mega-dropdown {
    left: 50% !important;             /* center horizontally under menu */
    transform: translateX(-50%) !important;
    max-width: 100vw;                 /* keep full screen available */
}

/* Shift Internship mega dropdown slightly right */
.nav-main-menu li:nth-child(2) .mega-dropdown {
    margin-left: 80px !important; /* adjust the value until it fits perfectly */
}

.brand-line {
    height: 3px;
    background: #ff0000;
    margin-top: 3px;
    border-radius: 2px;
}

/* MOBILE MENU (hidden by default) */
.mobile-menu {
    display: none;
    background: #000;
    width: 100%;
    border-top: 2px solid red;
    padding: 15px 20px;
}

/* SHOW WHEN ACTIVE */
.mobile-menu.active {
    display: block;
}

/* SUBMENU HIDDEN BY DEFAULT */
.mobile-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 15px;
}

/* SHOW SUBMENU WHEN ACTIVE */
.mobile-submenu.active {
    max-height: 400px;
}

/* Rotate caret */
.toggle-submenu .fa-chevron-down {
    transition: transform 0.3s ease;
}

.toggle-submenu.open .fa-chevron-down {
    transform: rotate(180deg);
}

/* Show hamburger ONLY on mobile */
#hamburgerBtn {
    display: block;
}

/* Hide hamburger on desktop */
@media (min-width: 768px) {
    #hamburgerBtn {
        display: none !important;
    }
}




nav.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    background: #000; /* ensures navbar stays visible */
}

nav.nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--nav-height) !important;
  display: flex !important;
  align-items: center !important;
  z-index: 99999 !important;
  background: #000000 !important; /* keeps contrast; change if needed */
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* ensure no parent rules (like transforms) clip the fixed nav */
html, body {
  height: auto;
  -webkit-transform: none !important;
  transform: none !important;
}

/* align children properly inside fixed nav (optional) */
nav.nav .nav-main-menu,
nav.nav .d-flex {
  align-items: center;
}

/* make mobile hamburger remain visible */
#hamburgerBtn { z-index: 100000; }

/* Safe content spacing so the navbar doesn't overlap page content.
   We'll also set this via JS to match exact nav height (keeps it robust). */
#main {
  padding-top: calc(var(--nav-height) + 10px); /* fallback */
}

/* FINAL NAVBAR FIX — DO NOT REMOVE */
nav.nav {
    height: 115px !important; 
}

#page1 {
    padding-top: 0px !important;
}

/* DSS THEME HOVER EFFECT FOR SIGN IN BUTTON (DESKTOP + MOBILE) */
.btn {
    background: var(--second-color); /* red */
    color: #000;                    /* black text */
    border: 2px solid var(--second-color);
    transition: 0.3s ease-in-out;
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.45);
}

.btn:hover {
    background: #000 !important;          /* black bg */
    color: #fff !important;               /* white text */
    border-color: var(--second-color);    /* red border */
    box-shadow: 0 0 18px rgba(255, 0, 0, 0.7); /* DSS glow */
    transform: translateY(-2px);
}

/* Fix hero going behind navbar on mobile */
@media (max-width: 768px) {
    #page1 {
        padding-top: 90px !important; /* adjust if your navbar is taller */
    }
}

/* =====================================================
   PAGE 6 — MOBILE VIEW ONLY (Desktop remains unchanged)
===================================================== */
@media (max-width: 768px) {

    /* Make image appear FIRST on mobile */
    #awesome-people .ap-left {
        order: 1 !important;
        margin-bottom: 20px;
    }

    #awesome-people .ap-right {
        order: 2 !important;
    }

    /* Center image properly */
    #awesome-people .ap-left img {
        width: 100%;
        max-width: 380px;
        border-radius: 12px;
    }

    /* Add mobile spacing */
    #awesome-people .ap-right {
        text-align: center !important;
        padding: 20px 10px;
    }

    /* Name & role alignment */
    .ap-role {
        text-align: center !important;
    }

    .ap-name {
        text-align: center !important;
    }

    .ap-desc {
        text-align: center !important;
        line-height: 1.7 !important;
    }

    /* Tag pills */
    .ap-tags span {
        background: #1a1a1a;
        border: 1px solid #ff0048;
        padding: 6px 12px;
        border-radius: 18px;
        font-size: 0.85rem;
        display: inline-block;
    }

    /* Center LinkedIn button on mobile */
    .ap-btn {
        display: inline-block !important;
        margin: 10px auto 0 auto !important;
    }
}



/* ============================================
   PAGE 9 — MOBILE RESPONSIVE ONLY
   Desktop view remains unchanged
===============================================*/
@media (max-width: 768px) {

    /* CONTACT WRAPPER STACK (column on mobile) */
    .contact-wrapper {
        display: flex;
        flex-direction: column;
        gap: 25px;
        text-align: center;
        padding: 0 20px;
    }

    /* Left section full width */
    .cw-left {
        width: 100% !important;
    }

    .cw-title {
        font-size: 1.5rem;
        line-height: 1.4;
        text-align: center !important;
        margin-bottom: 20px;
    }

    /* FORM FIELDS */
    .cw-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
        width: 100%;
    }

    .cw-form input {
        width: 100%;
        max-width: 320px;
        padding: 10px;
        border-radius: 6px;
    }

    .cw-btn {
        width: 100%;
        max-width: 320px;
        padding: 12px;
        border-radius: 8px;
    }

    /* ABOUT DSS */
    .cw-about {
        margin-top: 20px;
        text-align: center;
        padding: 0 10px;
    }

    .cw-address {
        margin-top: 10px;
        font-size: 0.9rem;
    }

    /* RIGHT SIDE IMAGE — moves below content */
    .cw-right {
        order: 3 !important;
        width: 100%;
        text-align: center;
    }

    .cw-right img {
        width: 100%;
        max-width: 350px;
        border-radius: 10px;
    }

    /* FOOTER LINK COLUMNS — stack vertically */
    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 25px;
        padding: 20px;
        text-align: center;
    }

    .footer-col a,
    .footer-col h3 {
        text-align: center;
    }

    /* CONTACT INFO CENTER */
    .footer-contact {
        justify-content: center !important;
    }

    /* COPYRIGHT SECTION */
    .footer-bottom {
        text-align: center !important;
        flex-direction: column !important;
        gap: 10px;
        padding-bottom: 20px;
    }

    .footer-socials {
        justify-content: center !important;
    }
}

@media (max-width: 768px) {
    #page1 .section-right p {
        text-align: justify !important;
    }
}

@media (max-width: 768px) {
    #page1 .section-left p {
        text-align: justify !important;
    }
}

/* =====================================================
   MOBILE VIEW — JUSTIFY PARAGRAPHS IN PAGE 6 & PAGE 9
   Desktop view remains unchanged
=====================================================*/
@media (max-width: 768px) {

    /* PAGE 6 paragraph justify */
    #awesome-people .ap-desc {
        text-align: justify !important;
    }

    /* PAGE 9 About DSS paragraph justify */
    #page9 .cw-about p {
        text-align: justify !important;
    }

    /* PAGE 9 Address paragraph justify */
    #page9 .cw-address {
        text-align: justify !important;
    }
}

/* ----------------------------------------
      MOBILE DROPDOWN NAV (DSS THEME)
----------------------------------------- */
.mobile-menu {
    display: none;
    background: #000;
    padding: 20px;
    border-top: 2px solid #ff0000;
}

.mobile-menu.active {
    display: block;
}

.mobile-menu ul li {
    margin-bottom: 12px;
}

.mobile-toggle {
    width: 100%;
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-toggle i {
    transition: 0.3s;
}

/* Submenu behaviour */
.mobile-submenu {
    max-height: 0;
    overflow: hidden;
    border-left: 2px solid #ff0000;
    margin-left: 10px;
    transition: max-height 0.3s ease;
}

.mobile-submenu a {
    display: block;
    padding: 8px 0 8px 10px;
    font-size: 16px;
    color: #ccc;
}

.mobile-submenu a:hover {
    color: #ff0000;
}

.mobile-submenu.open {
    max-height: 800px;
}

.mobile-toggle.open i {
    transform: rotate(180deg);
}

/* ===============================
   FINAL MOBILE MENU NAVBAR FIX
   =============================== */

@media (max-width: 900px) {

  .mobile-menu {
      position: fixed;
      top: 115px; /* MUST MATCH nav height */
      left: 0;
      width: 100%;
      height: calc(100vh - 115px);
      overflow-y: auto;
      background: #000;
      z-index: 99998;
      padding: 20px;
  }

}

/* ===============================
   FIX LONG MOBILE DROPDOWN LIST
   =============================== */

.mobile-submenu {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

/* When submenu opens */
.mobile-submenu.open {
    max-height: 70vh;          /* allow large height */
    overflow-y: auto;          /* enable scrolling */
}

/* Smooth mobile scrolling */
.mobile-submenu {
    -webkit-overflow-scrolling: touch;
}

/* =====================================================
   TABLET VIEW FIX (768px – 1024px)
   DOES NOT AFFECT MOBILE OR DESKTOP
===================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* ---------------- NAVBAR ---------------- */
  nav.nav {
    height: 95px !important;
    padding: 0 40px !important;
  }

  .nav h1 {
    font-size: 22px;
  }

  .nav-main-menu li {
    margin: 0 12px;
  }

  nav .btn {
    padding: 10px 22px;
    font-size: 14px;
  }

  /* ---------------- MEGA MENU ---------------- */
  .mega-dropdown {
    width: 85vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .mega-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  /* ---------------- HERO SECTION ---------------- */
  #page1 {
    height: auto !important;
    padding: 140px 40px 80px 40px !important;
  }

  .hero {
    flex-direction: column;
    gap: 45px;
    text-align: center;
  }

  .hero-left h1 {
    font-size: 3rem;
  }

  .hero-left p {
    max-width: 85%;
    margin: 0 auto;
    text-align: justify;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-right img {
    max-width: 420px;
  }

  /* ---------------- SECTION TEMPLATE ---------------- */
  .section-content {
    flex-direction: column;
    gap: 40px;
    text-align: center;
    width: 90%;
  }

  .section-right,
  .section-left {
    padding: 0 !important;
    text-align: center;
  }

  .section-right p,
  .section-left p {
    max-width: 85%;
    margin: 0 auto;
    text-align: justify;
  }

  /* ---------------- INTERNSHIP CARDS ---------------- */
  .internship-cards {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  /* ---------------- COURSE SLIDER ---------------- */
  #page5 {
    height: auto;
    padding: 80px 0;
  }

  .course-track {
    gap: 35px;
  }

  /* ---------------- AWESOME PEOPLE ---------------- */
  #awesome-people {
    padding: 100px 40px;
  }

  .ap-container {
    flex-direction: column;
    text-align: center;
  }

  .ap-right {
    text-align: center;
  }

  .ap-desc {
    text-align: justify;
    max-width: 85%;
    margin: 0 auto;
  }

  .ap-tags {
    justify-content: center;
  }

  /* ---------------- CONTACT + FOOTER ---------------- */
  #page9 {
    padding: 90px 40px 40px;
  }

  .contact-wrapper {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }

  .cw-form {
    justify-content: center;
    flex-wrap: wrap;
  }

  .cw-right img {
    max-width: 360px;
    margin: 0 auto;
  }

  .footer-links {
    flex-direction: column;
    gap: 25px;
    text-align: center;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
  }
}

/* =========================================
   FIX SIGN-IN BUTTON — TABLET ONLY
   (Does NOT affect mobile or desktop)
========================================= */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Ensure Sign In button is visible */
  nav.nav .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    margin-left: 12px;
    padding: 10px 22px;
    font-size: 14px;
    z-index: 100000;
  }

  /* Keep menu + button on same row */
  .nav-main-menu {
    display: flex !important;
    align-items: center;
  }
}

/* ===================================================
   TABLET VIEW — SIGN IN BUTTON
   FORCE DESKTOP STYLING (NO VISUAL CHANGE)
=================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

  nav.nav .btn {
    /* Reset any tablet/mobile overrides */
    position: relative !important;
    top: 0 !important;
    right: 0 !important;

    /* EXACT desktop button look */
    background: var(--second-color) !important;
    color: #000 !important;
    border: 2px solid var(--second-color) !important;

    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: 600;

    border-radius: 30px !important;
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.45) !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    margin-left: 16px;
    z-index: 100000;
  }

  /* Hover effect SAME as desktop */
  nav.nav .btn:hover {
    background: #000 !important;
    color: #fff !important;
    border-color: var(--second-color) !important;
    box-shadow: 0 0 18px rgba(255, 0, 0, 0.7) !important;
    transform: translateY(-2px);
  }
}

/* =====================================================
   TABLETS & FOLDABLE DEVICES RESPONSIVE FIX
   Covers iPad, Surface, Galaxy Fold, Zenbook Fold
===================================================== */

/* -------------------------
   SMALL FOLDS (Surface Duo)
   540px – 600px
-------------------------- */
@media (min-width: 540px) and (max-width: 600px) {

  .hero-left h1 {
    font-size: 2.4rem;
  }

  .hero-right img {
    max-width: 300px;
  }

  .internship-cards {
    grid-template-columns: 1fr;
  }
}

/* -------------------------
   FOLDABLES / MINI TABLETS
   Galaxy Z Fold, iPad Mini
   600px – 767px
-------------------------- */
@media (min-width: 600px) and (max-width: 767px) {

  #page1 {
    padding: 120px 30px 70px;
  }

  .hero-left h1 {
    font-size: 2.6rem;
  }

  .internship-cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* -------------------------
   STANDARD TABLETS
   iPad Mini, iPad Air
   768px – 820px
-------------------------- */
@media (min-width: 768px) and (max-width: 820px) {

  nav.nav {
    padding: 0 30px;
  }

  .hero-left h1 {
    font-size: 2.9rem;
  }

  .hero-right img {
    max-width: 380px;
  }

  .section-content {
    width: 90%;
  }
}

/* -------------------------
   LARGE TABLETS
   iPad Pro 11", Surface Pro
   821px – 912px
-------------------------- */
@media (min-width: 821px) and (max-width: 912px) {

  .hero-left h1 {
    font-size: 3.2rem;
  }

  .hero-right img {
    max-width: 420px;
  }

  .mega-dropdown {
    width: 88vw;
  }
}

/* -------------------------
   EXTRA LARGE TABLETS
   iPad Pro 12.9", Zenbook Fold
   913px – 1024px
-------------------------- */
@media (min-width: 913px) and (max-width: 1024px) {

  nav.nav {
    padding: 0 45px;
  }

  .hero-left h1 {
    font-size: 3.6rem;
  }

  .hero-right img {
    max-width: 460px;
  }

  .mega-dropdown {
    width: 900px;
  }
}

/* =====================================================
   TABLET VIEW = MOBILE LAYOUT (POLISHED)
   768px – 1024px ONLY
===================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* ---------------- NAVBAR ---------------- */

  /* Hide desktop menu */
  .nav-main-menu {
    display: none !important;
  }

  /* Show hamburger */
  #hamburgerBtn {
    display: block !important;
  }

  nav.nav {
    height: 100px !important;
    padding: 0 28px !important;
  }

  /* Brand sizing */
  .nav h1 {
    font-size: 24px;
  }

  /* ---------------- MOBILE MENU ---------------- */

  .mobile-menu {
    top: 100px;
    padding: 28px;
    font-size: 18px;
  }

  .mobile-menu ul li {
    margin-bottom: 18px;
  }

  .mobile-toggle {
    font-size: 20px;
    padding: 14px 0;
  }

  .mobile-submenu a {
    font-size: 17px;
    padding: 10px 0 10px 14px;
  }

  /* ---------------- HERO SECTION ---------------- */

  #page1 {
    padding: 140px 40px 80px !important;
    height: auto;
  }

  .hero {
    flex-direction: column;
    gap: 50px;
    text-align: center;
  }

  .hero-left h1 {
    font-size: 3rem;
  }

  .hero-left p {
    max-width: 90%;
    margin: 0 auto;
    text-align: justify;
  }

  .hero-buttons {
    justify-content: center;
    gap: 16px;
  }

  .hero-right img {
    max-width: 420px;
  }

  /* ---------------- SECTIONS ---------------- */

  .section-content {
    flex-direction: column;
    text-align: center;
    gap: 45px;
  }

  .section-right,
  .section-left {
    padding: 0 !important;
  }

  .section-right p,
  .section-left p {
    max-width: 90%;
    margin: 0 auto;
    text-align: justify;
  }

  /* ---------------- CARDS ---------------- */

  .internship-cards {
    grid-template-columns: 1fr 1fr;
  }

  .dss-card,
  .cs-card {
    max-width: 100%;
  }

  /* ---------------- AWESOME PEOPLE ---------------- */

  .ap-container {
    flex-direction: column;
    text-align: center;
  }

  .ap-desc {
    max-width: 90%;
    margin: 0 auto;
    text-align: justify;
  }

  .ap-tags {
    justify-content: center;
  }

  /* ---------------- FOOTER ---------------- */

  .contact-wrapper,
  .footer-links,
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 22px;
  }
}

/* ===============================
   CLICK-BASED HAMBURGER MENU
=============================== */

/* hidden by default */
.mobile-menu {
  display: none;
}

/* show on click */
.mobile-menu.active {
  display: block;
}

/* tablet + mobile layout */
@media (max-width: 1024px) {

  .nav-main-menu {
    display: none !important;
  }

  #hamburgerBtn {
    display: block !important;
    cursor: pointer;
  }

  .mobile-menu {
    position: fixed;
    top: 115px;              /* same as navbar */
    left: 0;
    width: 100%;
    height: calc(100vh - 115px);
    background: #000;
    overflow-y: auto;
    z-index: 99998;
    padding: 20px;
  }

  .mobile-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .mobile-submenu.open {
    max-height: 80vh;
  }

  .mobile-toggle.open i {
    transform: rotate(180deg);
  }
}

/* =========================================
   HAMBURGER CLICK FIX (FINAL)
========================================= */

/* Hide desktop menu on tablet + mobile */
@media (max-width: 1024px) {

  .nav-main-menu {
    display: none !important;
  }

  /* Show hamburger */
  #hamburgerBtn {
    display: block !important;
    cursor: pointer;
    z-index: 100001;
  }

  /* Mobile menu hidden */
  .mobile-menu {
    display: none;
    position: fixed;
    top: 115px; /* navbar height */
    left: 0;
    width: 100%;
    height: calc(100vh - 115px);
    background: #000;
    overflow-y: auto;
    z-index: 100000;
    padding: 20px;
  }

  /* Show on click */
  .mobile-menu.active {
    display: block;
  }

  /* Submenu animation */
  .mobile-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .mobile-submenu.open {
    max-height: 1000px;
  }
}

.settings-dropdown {
  position: absolute;
  top: 45px;
  right: 0;
  background: #0d0d0d;
  border: 1px solid #ff0000;
  padding: 10px;
  display: none;
  z-index: 9999;
  min-width: 120px;
}

.settings-dropdown.show {
  display: block;
}

.settings-dropdown .logout-btn {
  background: transparent;
  border: 1px solid #ff0000;
  color: #ff0000;
  padding: 6px 12px;
  width: 100%;
  cursor: pointer;
}

.settings-dropdown .logout-btn:hover {
  background: #ff0000;
  color: #fff;
}

/* =========================
   CONTACT DROPDOWN (DSS)
========================= */

.contact-dropdown {
  position: relative;
}

.contact-menu {
  position: absolute;
  top: 42px;
  left: 0;
  background: #0d0d0d;
  border: 1px solid #ff0000;
  padding: 12px 16px;
  min-width: 220px;
  display: none;
  z-index: 9999;
}

.contact-menu p {
  color: #ffffff;
  font-size: 14px;
  margin: 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-menu i {
  color: #ff0000;
}

/* Show on hover (desktop) */
.contact-dropdown:hover .contact-menu {
  display: block;
}

/* Mobile safe */
@media (max-width: 768px) {
  .contact-menu {
    position: static;
    border: none;
    background: transparent;
    padding: 8px 0;
  }
}

.buy-link {
    text-decoration: none;
}

/* Universal Buy Button */
.buy-btn {
    background: red;
    color: white;
    border: none;
    padding: 14px 36px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s ease;
}

/* Hover (Desktop) */
.buy-btn:hover {
    background: #cc0000;
    transform: translateY(-2px);
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .buy-btn {
        width: 100%;
        padding: 16px;
        font-size: 18px;
        border-radius: 10px;
    }
}

.ap-desc {
    text-align: justify;
}

.section-right p {
    text-align: justify;
}

html {
    scroll-behavior: smooth;
}