/* ============================================================
   GROUP 1: FILE INFO
   ============================================================
   FILE NAME: custom-nav.css
   KAAM: Saint Paul High School ki navbar (top menu bar) ki
         custom styling. Logo size, school name color, menu
         hover/active highlight, dropdown submenu styling.
   ============================================================ */


/* ============================================================
   GROUP 2: LOGO + SCHOOL NAME (Navbar ka left side)
   ============================================================ */

/* Navbar ka "brand" hissa (logo + school name wala link/box) */
.navbar-brand {
  display: flex !important;          /* logo aur naam ek line mein side-by-side aayen */
  align-items: center !important;    /* logo aur naam vertically center mein align hon */
  font-size: 22px !important;        /* school name ka text size */
  font-weight: 800 !important;       /* school name bold (mota) ho */
  color: #1565d8 !important;         /* school name ka color = BLUE */
  letter-spacing: 0.3px;             /* letters ke darmiyan thori si spacing */
  background: transparent !important;/* peeche koi background color/box na ho */
  padding-left: 30px;
}

/* Jab page scroll ho jaye (navbar chota ho jata hai) to bhi naam blue rahe */
.ftco_navbar.scrolled .navbar-brand,
.ftco-navbar-light.scrolled .navbar-brand {
  color: #1565d8 !important;         /* scroll ke baad bhi BLUE color */
}

/* Logo ki image (jo navbar mein dikhti hai) */
.navbar-brand img,
.navbar-brand img.img-fluid {
  width: 50px !important;            /* logo ki WIDTH (chorai) yahan set hoti hai */
  height: 50px !important;           /* logo ki HEIGHT (lambai) yahan set hoti hai */
  margin-right: 20px !important;     /* logo aur school name ke darmiyan gap */
  border-radius: 6px;                /* logo ke corners thore gol */
  object-fit: cover;                 /* image crop ho kar box mein fit ho, kharaab na ho */
  flex-shrink: 0;                    /* logo kabhi chota na ho jab space kam ho */
  background: transparent !important;/* logo ke peeche koi white/colored box na ho */
  box-shadow: none !important;       /* logo par koi shadow na ho */
  border: none !important;           /* logo ke around koi border line na ho */
  transform: scale(1.5);             /* logo ko visually 1.5 GUNA BARA dikhata hai (box badhaye bagair) */
  transform-origin: center;          /* zoom hamesha center se ho, kisi taraf na khisके */
  
}


/* ============================================================
   GROUP 3: MAIN MENU ITEMS (Home, About, Faculty, Courses...)
   ============================================================ */

/* Har menu item (link) ki basic shape/spacing */
.ftco_navbar .navbar-nav > .nav-item > .nav-link {
  position: relative;                          /* andar ke elements sahi jagah set hon */
  border-radius: 6px;                          /* menu item ke corners thore gol */
  transition: background-color .18s ease, color .18s ease; /* color change smooth (achanak nahi) ho */
  padding-left: 10px !important;                /* menu item ke left mein khaali jagah */
  padding-right: 10px !important;               /* menu item ke right mein khaali jagah */
  margin: 0 0px;                                /* do menu items ke darmiyan thora gap */
}

/* Menu link ke andar text ko flex layout dena (highlight span ke liye zaroori) */
.ftco_navbar .navbar-nav > .nav-item > .nav-link {
  display: flex !important;          /* text ko theek se center mein rakhne ke liye */
  align-items: center;               /* text vertically center ho */
}

/* HOVER STATE: jab mouse kisi menu item ke UPAR ho (lekin click nahi kiya) */
.ftco_navbar .navbar-nav > .nav-item > .nav-link:hover,
.ftco_navbar .navbar-nav > .nav-item.dropdown:hover > .nav-link {
  color: #1565d8 !important;         /* hover hote hi text ka color BLUE ho jaye */
}
.ftco_navbar .navbar-nav > .nav-item > .nav-link:hover span.nav-highlight,
.ftco_navbar .navbar-nav > .nav-item.dropdown:hover > .nav-link span.nav-highlight {
  background-color: rgba(21, 101, 216, 0.12); /* halka transparent blue background (hover wala highlight) */
}

/* ACTIVE / SELECTED / CLICKED STATE: jo page abhi khula hai uska menu item */
.ftco_navbar .navbar-nav > .nav-item.active > .nav-link,
.ftco_navbar .navbar-nav > .nav-item > .nav-link.active,
.ftco_navbar .navbar-nav > .nav-item > .nav-link:active {
  color: #ffffff !important;         /* active item ka text color WHITE ho */
}

/* Blue highlight box ka apna size — navbar ki badi height se ALAG/independent,
   isliye navbar ki overall height par koi farak nahi padta */
.ftco_navbar .navbar-nav > .nav-item > .nav-link span.nav-highlight {
  display: inline-block;             /* span ko box ki tarah behave karaye */
  padding: 6px 14px;                 /* <<< YAHAN SE BLUE HIGHLIGHT KI HEIGHT/WIDTH CONTROL HOTI HAI */
  border-radius: 6px;                /* highlight box ke corners gol */
  transition: background-color .18s ease; /* color change smooth ho */
}

/* Active item ke highlight span ka solid BLUE background */
.ftco_navbar .navbar-nav > .nav-item.active > .nav-link span.nav-highlight,
.ftco_navbar .navbar-nav > .nav-item > .nav-link.active span.nav-highlight,
.ftco_navbar .navbar-nav > .nav-item > .nav-link:active span.nav-highlight {
  background-color: #1565d8;         /* <<< ACTIVE MENU KA BACKGROUND COLOR (BLUE) YAHAN SE BADLEIN */
}


/* ============================================================
   GROUP 4: DROPDOWN / SUBMENU (jaise "Admission" ke neeche
   "Admission Policy" aur "Admission Form")
   ============================================================ */

/* Poora dropdown box (jo neeche khulta hai) */
.dropdown-menu {
  border-radius: 8px !important;     /* dropdown box ke corners gol */
  overflow: hidden;                  /* andar ke items box se bahar na nikle */
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; /* dropdown ke neeche halka shadow */
  padding: 6px !important;           /* dropdown box ke andar chaaron taraf khaali jagah */
  border: none !important;           /* dropdown ke around koi border line na ho */
}

/* Dropdown ke andar har individual item (row) ki shape */
.dropdown-menu .dropdown-item {
  border-radius: 6px;                /* har submenu item ke corners gol */
  padding: 10px 16px !important;     /* <<< SUBMENU ITEM KI HEIGHT/WIDTH YAHAN SE CONTROL HOTI HAI */
  font-size: 14px;                   /* submenu item ka text size */
  transition: background-color .15s ease, color .15s ease; /* color change smooth ho */
}

/* HOVER STATE: jab mouse submenu ke kisi row ke UPAR ho */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: rgba(21, 101, 216, 0.12) !important; /* halka transparent blue (hover highlight) */
  color: #1565d8 !important;         /* hover hote hi text BLUE ho */
}

/* ACTIVE / SELECTED STATE: jo submenu item abhi khula/select hai */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background-color: #1565d8 !important; /* <<< ACTIVE SUBMENU KA BACKGROUND COLOR (BLUE) YAHAN SE BADLEIN */
  color: #ffffff !important;         /* active submenu ka text WHITE ho */
}

/* "Admission" / "Campuses" jaisa parent dropdown toggle hover par bhi blue ho */
.ftco_navbar .nav-item.dropdown:hover .dropdown-toggle {
  color: #1565d8 !important;         /* dropdown ka parent text bhi hover par BLUE ho */
}

/* ============================================================
   GROUP: MOBILE / TABLET FIX — Logo + School Name flush-left
   (padding-left:30px above was pushing logo away from the
   screen edge on small screens; this brings it back to the
   left with just a small breathing gap, plus a smaller gap
   between the logo image and the school name text)
   ============================================================ */
@media (max-width: 991px){
  .navbar-brand{
    padding-left: 8px !important;
  }
  .navbar-brand img,
  .navbar-brand img.img-fluid{
    margin-right: 10px !important;
    transform: scale(1);            /* remove the 1.5x zoom on small screens so it doesn't eat extra space */
  }
}

@media (max-width: 991px){
  .navbar > .container-fluid{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}