/* Reset & base styles */
* {box-sizing: border-box;margin: 0;padding: 0;}
body {font-family: 'Open Sans', Roboto, sans-serif;line-height: 1.4;color: #1f2937;transition: background 0.4s ease, color 0.4s ease;}

/* CSS VARIABLES – makes dark mode super clean */
:root {
    --body-bg: #fefefe;
    --text-color: #1f2937;
    --card-bg: #efefef;
    --card-border: #eeeeee;
    --nav-bg: #ffffff;
    --nav-text: #374151;
    --light-bg: #fefefe;
    --light-text: #1f2937;
    --light-p: #4b5563;
    --light-line: #cccccc;
    --dark-bg: #231f20;
    --dark-text: #ffffff;
    --dark-p: #d1d5db;
    --bg: #111111;
    --card: #1A1A1A;
    --border: #2A2A2A;
    --text: #E5E5E5;
    --text-inverse: #151515;
    --accent: #F5C04A;
    --white: #FeFeFe;
    --white-inverse: #2e2e2e;
    --plight-bg: #ffffff;
    --plight-text: #1f2937;
    --plight-p: #4b5563;
    --page-lnk-text: #1f2937;
    --page-text: #fefefe;
    --page-bg: #333333;
}

body.dark {
    --body-bg: #333333;
    --text-color: #e2e8f0;
    --card-bg: #2f2f2f;
    --card-border: #4f4f4f;
    --nav-bg: #000000;
    --nav-text: #e5e7eb;
    --light-bg: #333333;
    --light-text: #ffffff;
    --light-p: #d1d5db;
    --light-line: #555555;
    --dark-bg: #231f20;
    --dark-text: #ffffff;
    --dark-p: #FFFFFF;
    --bg: #111111;
    --card: #1A1A1A;
    --border: #2A2A2A;
    --text: #E5E5E5;
    --text-inverse: #E5E5E5;
    --accent: #F5C04A;
    --white: #FeFeFe;
    --white-inverse: #FeFeFe;
    --plight-bg: #231f20;
    --plight-text: #ffffff;
    --plight-p: #4b5563;
    --page-lnk-text: #1f2937;
    --page-text: #fefefe;
    --page-bg: #333333;
}

body {
  background-color: var(--body-bg);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}
/* FIXED NAV BAR */
nav {position: fixed;top: 0;left: 0;right: 0;background: var(--nav-bg);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);z-index: 50;transition: background 0.4s ease;}
.nav-inner {max-width: 1152px;margin: 0 auto;padding: 1.25rem 1.5rem;display: flex;justify-content: space-between;align-items: center;height: 5rem;}
.logo-area {display: flex;align-items: center;gap: 0.75rem;text-decoration: none;color: var(--nav-text);}
.logo-img {height: 3.75rem;width: auto;transition: transform 0.3s ease;flex-shrink: 0;}
.logo-img:hover {transform: scale(1.05);}
.site-name {font-size: 1.875rem;font-weight: 500;letter-spacing: -0.025em;}
.right-side {display: flex;align-items: center;gap: 2rem;}
.menus {display: flex;flex-direction: column;align-items: center;gap: 0.2rem;}
.menu {display: flex;gap: 2rem;font-size: 1.3rem;}
.sub-menu {display: flex;gap: 1.6rem;font-size: 0.9rem;}
.nav-link {color: var(--nav-text);text-decoration: none;transition: color 0.3s ease;}
.nav-link:hover {color: #2563eb;}
/* THEME TOGGLE BUTTON */
#theme-toggle1 {background: none;border: none;font-size: 1.75rem;cursor: pointer;padding: 0.5rem;border-radius: 9999px;transition: transform 0.3s ease, background 0.3s ease;}
#theme-toggle1:hover {background: rgba(0, 0, 0, 0.05);transform: rotate(20deg);}
body.dark #theme-toggle1:hover {background: rgba(255, 255, 255, 0.1);}
/* THEME TOGGLE BUTTON */
#theme-toggle2 {background: none;border: none;font-size: 1.75rem;cursor: pointer;padding: 0.5rem;border-radius: 9999px;transition: transform 0.3s ease, background 0.3s ease;}
#theme-toggle2:hover {background: rgba(0, 0, 0, 0.05);transform: rotate(20deg);}
body.dark #theme-toggle2:hover {background: rgba(255, 255, 255, 0.1);}
/* MAIN CONTENT */
main {padding-top: 5rem;}
.section {min-height: 100vh;display: flex;align-items: center;}
.section_thin {min-height: 55vh;display: flex;align-items: center;}
.section_title {min-height: 1vh;margin-bottom:-5rem;text-align: left;}
.container {max-width: 1440px;margin: 0 auto;padding: 3rem 1.5rem;}
/* HERO BACKGROUND FADER */
#slideshow {height: 55vh;background-size: cover;background-position: center;background-repeat: no-repeat;transition: background-image 2s ease;}
/* PANEL CONTENT */
.panel-content {display: flex;gap: 3rem;align-items: center;flex-wrap: wrap;}
.reverse {flex-direction: row-reverse;}
.image-side {flex: 1;min-width: 280px;}
.image-side img {width: 100%;border-radius: 1.5rem;box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);display: block;}
.text-side {flex: 1;min-width: 280px;}
.text-side h2 {font-size: 2rem;font-weight: 300;letter-spacing: -0.05em;line-height: 1.1;margin-bottom: 1.1rem;}
.text-side h3 {font-size: 1.3rem;font-weight: 400;letter-spacing: -0.05em;line-height: 1.1;margin-bottom: 0.1rem;}
.text-side p {font-size: 1rem;margin-bottom: 1.5rem;}
/* TITLE */
.title {font-weight: 400;font-size: 3rem;line-height: 1.1;text-align: center;margin-bottom: 0rem;}
@media (max-width: 768px) {
    .title {font-size: 2.5rem;}
}
@media (max-width: 480px) {
    .title {font-size: 2rem;}
}
/* Map */
#map {
z-index: 45;width: 100%;height: 600px;border: 1px solid var(--border);border-radius: 24px;box-shadow: 0 4px 6px -1px var(--shadow);}
.map-link {display: inline-block;margin: 10px 5px;padding: 8px 12px;background: #707070;color: white;text-decoration: none;border-radius: 24px;}
.map-link:hover {background: #505050;}

/* News */
.news-container {margin: 0 auto;display: flex;gap: 1rem;align-items: flex-start;}
.news-text {flex: 1;background: white;padding: 1rem;border-radius: 12px;}
.news-image {flex-shrink: 0;width:220px;background: white;padding: 1rem;border-radius: 12px;text-align: center;}
.news-image img {width:180px;height: auto;border-radius: 8px;}
@media (orientation: landscape) {
  .news-container {flex-direction: row;}
  .news-image img {width:180px;flex: 0;} 
}
@media (orientation: portrait) {
  .news-container {flex-direction: column;}
  .news-image img {width:auto;flex: 1;} 
}

/* 3 CARDS */
.cards {display: grid;grid-template-columns: 1fr;gap: 2rem;}
@media (min-width: 768px) {
    .cards {grid-template-columns: repeat(3, 1fr);}
}
.card {background-color: var(--card);border-radius: 28px;padding: 2.75rem 2.5rem 2.5rem;position: relative;border: 1px solid var(--border);transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);overflow: hidden;}
.card:hover {transform: translateY(-12px);}
.card-content {position: relative;z-index: 2;padding-top: 1.25rem;}
.card-content p {font-size: 1.0625rem;line-height: 1.65;color: var(--text);}
.signature {margin-top: 3rem;}
.signature-name {font-weight: 600;font-size: 1.35rem;color: #ffffff;line-height: 1.2;}
.signature-role {font-size: 0.875rem;color: #A3A3A3;margin-top: 0.25rem;}
/* TEAM GALLERY AND MISSION */
.main-content {display: flex;gap: 4rem;align-items: start;}
@media (max-width: 1440px) {
    .main-content {flex-direction: column;}
}
/* === PEOPLE GRID === */
.people-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 2.25rem;flex: 1;}
@media (max-width: 768px) {
    .people-grid {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 480px) {
    .people-grid {grid-template-columns: 1fr;}
}
.person {text-align: center;}
.person img {width: 100%;max-width: 100%;height: 320px;object-fit: cover;border-radius: 24px;border: 2px solid var(--border);box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);}
.person:hover img {transform: scale(1.04);}
.person-name {margin-top: 1.25rem;font-size: 1.25rem;font-weight: 600;line-height: 1.3;}
.person-role {font-size: 0.95rem;margin-top: 0.25rem;line-height: 1.4;}
/* === VISION GRID === */
.vision-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 2rem;flex: 1;}
@media (max-width: 640px) {
    .vision-grid {grid-template-columns: 1fr;}
}
.vision-card {background-color: var(--card);border-radius: 28px;padding: 2.5rem 2rem;border: 1px solid var(--border);transition: transform 0.3s ease;}
.vision-card:hover {transform: translateY(-8px);}
.vision-number {font-size: 4.25rem;line-height: 1;font-weight: 700;color: var(--accent);margin-bottom: 0.5rem;display: block;}
.vision-title {font-size: 1.65rem;font-weight: 700;color: var(--white);margin-bottom: 1rem;line-height: 1.2;}
.vision-text {font-size: 1.05rem;line-height: 1.65;color: var(--text);}
/* MAIN RESPONSIVE CONTAINER2 - 50/50 split */
.container2 {max-width: 1440px;padding: 2rem 1.5rem;margin: 0 auto;display: grid;grid-template-columns: 1fr 1fr;gap: 40px;align-items: center;}
/* LEFT SIDE - Image Gallery */
.image-section {width: 100%;}
/* MAIN IMAGE */
.main-image {margin-bottom: 20px;}
.main-image img {width: 100%;height: auto;display: block;border-radius: 12px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);object-fit: cover;}
/* THUMBNAILS - 3-COLUMN ROW */
.thumbnails {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;}
.thumb {position: relative;overflow: hidden;border-radius: 12px;box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease, box-shadow 0.3s ease;}
.thumb:hover {transform: translateY(-6px);box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);}
.thumb img {width: 100%;height: auto;display: block;object-fit: cover;aspect-ratio: 4 / 3;}
/* RIGHT SIDE - Text Content */
.text-section h2 {font-size: 2rem;font-weight: 300;letter-spacing: -0.05em;line-height: 1.1;margin-bottom: 1.1rem;}
.text-section h3 {font-size: 1.3rem;font-weight: 400;letter-spacing: -0.05em;line-height: 1.1;margin-bottom: 0.1rem;}
.text-section p {font-size: 1rem;margin-bottom: 1.5rem;}
/* Light panels */
.seclight {background: var(--light-bg);color: var(--light-text);}
.seclight .text-side p {color: var(--light-p);}
.seclight .text-section h2 {color: var(--light-text);}
.seclight .text-section p {color: var(--light-p);}
/* Dark panels */
.secdark {background: var(--dark-bg);color: var(--dark-text);}
.secdark .text-side p {color: var(--dark-p);}
.secdark .text-section h2 {color: var(--dark-text);}
.secdark .text-section p {color: var(--dark-p);}
/* Full-width background image panel */
.bg-image {background-image: url('/images/hero/hero.jpg');background-size: cover;background-position: center;position: relative;}
.secdark .bg-image { opacity: 0.7; }
.seclight .bg-image { opacity: 0.8; }
.bg-image::before {content: '';position: absolute;inset: 0;background: rgba(0, 0, 0, 0.45);z-index: 1;}
.bg-image .container {position: relative;z-index: 2;}
/* Buttons */
.btn {display: inline-block;padding: 1rem 2rem;border-radius: 9999px;font-size: 1.125rem;font-weight: 500;text-decoration: none;transition: all 0.3s ease;}
.seclight .btn {background: #c7a357;color: #111827;}
.seclight .btn:hover {background: #c5cad3;}
.secdark .btn {background: #c7a357;color: #111827;}
.secdark .btn:hover {background: #f3f4f6;}
/* In dark mode, ALL buttons become the light-style button */
body.light .btn {background: #c7a357;color: #111827;}
body.light .btn:hover {background: #f3f4f6;}
body.dark .btn {background: #c7a357;color: #111827;}
body.dark .btn:hover {background: #f3f4f6;}
/* CONTACT Form */
.contact-container {background-color: #ffffff;width: 100%;margin-top:3rem;padding: 15px 40px;border-radius: 25px;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);}
.contact-container h2 {text-align: center;font-size: 2.2rem;margin-bottom: 6px;color: var(--card);}
.contact-container h3 {text-align: center;font-size: 1rem;margin-bottom: 6px;color: var(--border);}
.ssubtitle {text-align: center;color: var(--border);font-size: 1.05rem;margin-bottom: 35px;}
form {display: grid;gap: 12px;}
.form-group {display: flex;flex-direction: column;}
label {font-size: 0.95rem;font-weight: 600;color: #222222;margin-bottom: 4px;}
input, textarea {padding: 14px 10px;font-size: 1rem;border: 2px solid #e0e0e0;border-radius: 10px;transition: all 0.3s ease;background-color: #ffffff;}
input:focus, textarea:focus {outline: none;border-color: #000000;box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);}
textarea {min-height: 160px;resize: vertical;}
.submit-btn {background-color: #000000;color: #ffffff;font-size: 1.1rem;font-weight: 600;padding: 16px;border: none;border-radius: 10px;cursor: pointer;transition: all 0.3s ease;margin-top: 10px;}
.submit-btn:hover {background-color: #333333;transform: translateY(-2px);}
/* CONTACT Responsive */
@media (max-width: 480px) {
    .contact-container {padding: 35px 25px;}
    .contact-container h2 {font-size: 1.9rem;}
}
/* Container Popup */
.panel_popup {font-size:95%;color:#202020;background:#ffc966;text-align:left;margin:5px 0px 0px 0px;padding:3px 10px 3px 10px;border-radius:15px;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);}
.panel_popup_h2 {font-weight:bold;padding-left:5px;padding-bottom:5px;color:#313131;font-size:160%;}
.panel_popup_h3 {font-weight:bold;padding-top:0px;padding-bottom:4px;color:#212121;font-size:130%;}
.panel_popup a{color:#EF3D43;font-size:105%;text-decoration:none;font-weight:normal;}
.panel_popup a:hover{color:#FFFFFF;background:#313131;font-size:105%;text-decoration:none;}
/* Container Light */
.panel_light {font-size:100%;color:var(--plight-text);background:var(--plight-bg);text-align:left;margin:auto 0px 20px 0px;padding:1px 6px 6px 6px;border-radius:15px;margin-right:5px;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);}
.panel_light_h2 {font-weight:bold;padding-left:5px;padding-top:3px;padding-bottom:0px;color:#000000;font-size:160%;}
.panel_light a{font-size:95%;color:#000000;text-decoration:none;font-weight:normal;}
.panel_light a:hover{font-size:95%;color:#2563eb;text-decoration:none;font-weight:normal;}
/* Paging */
#pg {width:99%;text-align:center;font-size:100%;margin-bottom:15px;padding:0px;margin-top:0px;}
#pg a{font-size:100%;text-decoration:none;color:var(--page-lnk-text);background-color:#d8d8d8;padding:5px 7px 7px 7px;border-radius:15px;}
#pg a:hover{font-size:100%;text-decoration:none;color:var(--page-lnk-text);background-color:#2563eb;padding:5px 7px 7px 7px;}
#pg a.current{font-size:100%;text-decoration:none;font-weight:bold;color:var(--page-text);background-color:var(--page-bg);padding:5px 7px 7px 7px;}
#pg span.disabled{font-size:100%;text-decoration:none;color:#FF0000;background-color:white;padding:5px 7px 7px 7px;}
/* Texts */
.text_body{font-size:100%;padding:3px 3px 0px 3px;vertical-align:middle;font-weight:normal;}
.text_body_bold{font-size:100%;padding:3px 3px 0px 3px;vertical-align:middle;font-weight:bold;}
.text_body_small{color:#959595;font-size:85%;padding:0px 3px 0px 3px;vertical-align:middle;}
a.closebtn{color:#2563eb;font-weight:bold;font-size:40px;font-family:"Open Sans", Impact, Tahoma, Geneva, sans-serif;}
a.closebtn:hover{color:#f1f1f1;}
/* Left Sidenav */
.left_sidenav {text-align:left;height:100%;width:0;position:fixed;z-index:19;top:0px;left:0px;background-color:#e5e5e5;overflow-x:hidden;transition:0.2s;padding-top:60px;}
.left_sidenav a {padding:8px 8px 8px 2px;text-decoration:none;color:#FFFFFF;transition:0.1s;}
.left_sidenav a:hover {color:#969696;}
.left_sidenav .left_closebtn {color:#606060;font-weight:bold;position:absolute;top:0px;right:25px;font-size:40px;margin-left:50px;font-family:"Open Sans", Impact, Tahoma, Geneva, sans-serif;}
.left_sidenav .left_title {color:#202020;font-weight:bold;position:absolute;top:12px;left:12px;font-size:30px;margin-left:0px;}
/* Right Sidenav */
.right_sidenav {text-align:left;height:100%;width:0;position:fixed;z-index:19;top:0px;right:0px;background-color:#e5e5e5;overflow-x:hidden;transition:0.2s;padding-top:60px;}
.right_sidenav a {padding:8px 8px 8px 2px;text-decoration:none;color:#FFFFFF;transition:0.1s;}
.right_sidenav a:hover {color:#969696;}
.right_sidenav .right_closebtn {color:#606060;font-weight:bold;position:absolute;top:0px;right:25px;font-size:40px;margin-left:50px;font-family:"Open Sans", Impact, Tahoma, Geneva, sans-serif;}
.right_sidenav .right_title {color:#202020;font-weight:bold;position:absolute;top:12px;left:12px;font-size:30px;margin-left:0px;}
/* Calendar */
.calendar-container {margin: 0px 5px 0px 0px;background: white;padding: 10px;border-radius: 15px;}
table.cal {width: 100%;margin-top: 10px;border-radius: 15px;}
th.days {background: var(--purple);color: white;padding: 12px;font-weight: bold;border-radius: 15px;}
td.std {background: #efefef; padding: 5px;height: 70px;font-size: 1.1rem;vertical-align: top;border-radius: 15px;}
td.today {background: #fff3cd; padding: 5px;font-weight: bold;font-size: 1.1rem;vertical-align: top;border-radius: 15px;}
td.other-month {color: #aaa;}
.controls {margin: 15px 0;display: flex;justify-content: center;flex-wrap: wrap;gap: 10px;}
.cal_input {color:#000000;background:#dfdfdf;border:1px solid #bbbbbb;font-size:100%;padding:3px;border-radius:10px;}

/* FOOTER */
.footer {background-color: #000000;color: #ffffff;padding: 60px 20px 40px;}
.footer-container {max-width: 1440px;margin: 0 auto;display: grid;grid-template-columns: repeat(3, 1fr);gap: 40px;}
.footer-column h3 {font-size: 1.4rem;margin-bottom: 20px;color: #ffffff;position: relative;}
.footer-column h3::after {content: '';position: absolute;bottom: -6px;left: 0;width: 40px;height: 2px;background-color: #ffffff;}
.footer-column p {font-size: 0.95rem;opacity: 0.9;margin-bottom: 15px;}
.footer-column ul {list-style: none;}
.footer-column ul li {margin-bottom: 10px;}
.footer-column ul li a {color: #ffffff;text-decoration: none;font-size: 0.95rem;transition: all 0.3s ease;}
.footer-column ul li a:hover {color: #cccccc;padding-left: 5px;}
/* FOOTER Bottom bar */
.footer-bottom {max-width: 1440px;margin: 50px auto 0;padding-top: 25px;border-top: 1px solid rgba(255, 255, 255, 0.15);text-align: center;font-size: 0.85rem;opacity: 0.8;}
/* FOOTER Responsive */
@media (max-width: 992px) {
    .footer-container {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 576px) {
    .footer-container {grid-template-columns: 1fr;}
}
/* General Responsive */
@media (max-width: 768px) {
    #theme-toggle {font-size: 1.5rem;}
    .panel-content, .reverse {flex-direction: column !important;}
    .text-side h2 {font-size: 2.75rem;}
    .menu {gap: 1.25rem;font-size: 1rem;}
    .sub-menu {gap: 0.9rem;font-size: 0.7rem;}
    .nav-inner {height: auto;padding: 1rem 1.5rem;}
    .logo-img {height: 3rem;}
    .container2 {grid-template-columns: 1fr;gap: 30px;}
    .thumbnails {gap: 18px;}
    .main-image {margin-bottom: 25px;}
    .text-section h2 {font-size: 1.9rem;}
}
@media (max-width: 480px) {
    .thumbnails {gap: 12px;}
    body {padding: 12px;}
}
/* Smooth scrolling */
html { scroll-behavior: smooth; }

@media (orientation: landscape){
    .top_menu {height:5rem;}
    #toggle_wide {display:flex;}
    #toggle_narrow {display:none;}
}
@media (orientation: portrait){
    .top_menu {display:flow-root;height:auto;}
    #toggle_wide {display:none;}
    #toggle_narrow {display:table;}
}