/* =========================
GLOBAL
========================= */

header{
display:flex;
font-size: 18px;
align-items:center;
justify-content:space-between;
padding:10px 20px;
border-bottom:1px solid #ddd;
background:#1db0b897;
z-index:1000;
position: sticky;
top:0;

}





*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: "Segoe UI", Arial, sans-serif;
}

:root{
--primary:#003366;
--light:#f5f7fb;
--text:#222;
--hover:#e6eef7;
}

body{
background:white;
color:var(--text);
line-height:1.6;
}

/* =========================
HEADER
========================= */
/* LOGO AREA */


.dept{
font-size:25px;
font-weight:600;
}

.inst{
font-size:16px;
color:#555;
}

/* MOBILE HEADER FIX */

@media(max-width:900px){

.inst{
display:none;
}

.dept{
font-size:30px;
}
}

@media(max-width:650px){

.inst{
display:none;
}

.dept{
font-size:16px;
}
}

/* Logo */

.logo{
display:flex;
align-items:center;
gap:10px;
/* background:rgb(137, 184, 192); */
}

.logo img{
width:82px;
}

.logo-text{
font-size:13px;
font-weight:500;
line-height:1.2;
}

/* =========================
MENU
========================= */

nav ul{
list-style:none;
display:flex;
}

nav ul li{
position:relative;
}

nav ul li a{
display:block;
padding:14px 13px;
text-decoration:none;
color:var(--text);
font-weight:500;
transition:0.3s;
/* margin-right: 20px; */
}

nav ul li a:hover{
background:var(--hover);
border-radius:4px;
}

/* dropdown */

nav ul li ul{
display:none;
position:absolute;
top:56px;
left:-50px;
background:#8ddde1ea;
border:1px solid #ddd;
min-width:220px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
flex-direction:column;
border-radius: 6px;
}

nav ul li ul li a{
padding:12px;
}

nav ul li:hover ul{
display:block;
}

/* =========================
MOBILE MENU
========================= */


.menu-toggle{
display:none;
font-size:26px;
cursor:pointer;
}
@media(max-width:900px){

header{
flex-wrap:wrap;
}

.menu-toggle{
display:block;
}

.inst{
display:none;
}

nav{
width:100%;
display:none;
}

nav.active{
display:block;
}

nav ul{
flex-direction:column;
}

nav ul li ul{
position:static;
border:none;
box-shadow:none;
}

}










/* =========================
FOOTER
========================= */









/* =========================
FOOTER
========================= */

footer {
  background: #12161e;
  color: #bbb;
  margin-top: 60px;
  font-size: 25px;
}

/* --- quick links top bar --- */
.footer-quicklinks {
  background: #0d1117;
  padding: 14px 48px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid #1c2333;
}

.footer-quicklinks-label {
  color: #87d3e8;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 6px;
  white-space: nowrap;
}

.footer-quicklinks a {
  color: #c9d4e0;
  text-decoration: none;
  font-size: 15px;
  padding: 4px 14px;
  border: 1px solid #2a3a52;
  border-radius: 20px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.footer-quicklinks a:hover {
  background: #87d3e8;
  border-color: #87d3e8;
  color: #fff;
}

/* --- mid section (contact + map) --- */
.footer-mid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
}

/* --- contact column --- */
.footer-contact {
  padding: 40px 48px;
  border-right: 1px solid #1c2333;
}

.footer-contact h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 22px;
}

.footer-contact h4::after {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: #0056b3;
  margin-top: 7px;
}

.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.footer-contact-row .fc-icon {
  color: #0056b3;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.footer-contact-row span,
.footer-contact-row a {
  color: #9aacbd;
  font-size: 16px;
  line-height: 1.65;
  text-decoration: none;
}

.footer-contact-row a:hover {
  color: #87d3e8;
  text-decoration: underline;
}

.iit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0056b3;
  color: #fff;
  padding: 8px 18px;
  text-decoration: none;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  margin-top: 10px;
  transition: background 0.2s;
}

.iit-btn:hover {
  background: #0069d9;
}

/* --- map column --- */
.footer-map {
  padding: 40px 48px 40px 40px;
}

.footer-map h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 22px;
}

.footer-map h4::after {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: #0056b3;
  margin-top: 7px;
}

.footer-map iframe {
  width: 100%;
  height: 210px;
  border: 0;
  border-radius: 6px;
  display: block;
}

/* --- bottom bar --- */
.footer-bottom {
  background: #0a0d13;
  border-top: 1px solid #1c2333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 48px;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.footer-social a {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #8a9bb0;
  text-decoration: none;
  font-size: 13px;
  padding: 6px 13px;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.footer-social a i {
  font-size: 16px;
}

.footer-social a:hover {
  background: #1c2333;
  color: #fff;
}

.footer-social a.social-linkedin:hover { color: #0a66c2; }
.footer-social a.social-facebook:hover { color: #1877f2; }
.footer-social a.social-instagram:hover { color: #e1306c; }
.footer-social a.social-optica:hover   { color: #d4a017; }
.footer-social a.social-aayam:hover    { color: #4fc3f7; }

.footer-copy {
  font-size: 12px;
  color: #3d4f63;
}

/* --- responsive --- */
@media(max-width: 860px) {
  .footer-mid {
    grid-template-columns: 1fr;
  }
  .footer-contact {
    border-right: none;
    border-bottom: 1px solid #1c2333;
    padding: 32px 32px;
  }
  .footer-map {
    padding: 32px 32px;
  }
  .footer-quicklinks {
    padding: 14px 32px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 32px;
  }
}

@media(max-width: 560px) {
  .footer-quicklinks {
    padding: 12px 20px;
  }
  .footer-contact,
  .footer-map {
    padding: 28px 20px;
  }
  .footer-bottom {
    padding: 14px 20px;
  }
}











/* ==================== Main container=============== */
.container-body{
max-width:1200px;
margin:auto;
padding-left:10px;
padding-right:10px;
}

/* ==================== Main container=============== */

/* ==================== Main Hade =============== */
.container-hade{
max-width:2400px;
margin:auto;
padding-left:10px;
padding-right:10px;
}

/* ==================== Main container=============== */