/* リセットと基本設定 */
:root {
    --primary: #004098; /* YNUブルー */
    --text: #333;
    --gray-bg: #f5f7fa;
    --white: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Noto Sans JP', "Helvetica Neue", sans-serif;
    color: var(--text);
    line-height: 1.8;
    background-color: var(--white);
    overflow-x: hidden;
    font-feature-settings: "palt";
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: bottom; }

/* ヘッダー */
header {
    display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 5%;
    background-color: rgba(255, 255, 255, 0.95); position: fixed; width: 100%; z-index: 1000;
    backdrop-filter: blur(10px); box-shadow: 0 1px 10px rgba(0,0,0,0.05);
}
.logo a { display: block; line-height: 1.2; }
.logo-sub { font-size: 0.75rem; color: #666; font-weight: 500; letter-spacing: 0.05em; }
.logo-main { font-size: 1.1rem; font-weight: 700; color: var(--primary); letter-spacing: 0.05em; }

.nav-links { display: flex; gap: 40px; }
.nav-links a { font-size: 0.9rem; font-weight: 500; color: #444; position: relative; letter-spacing: 0.05em; }
.nav-links a::after { content: ''; position: absolute; width: 0; height: 1px; background: var(--primary); bottom: -5px; left: 0; transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-links a:hover, .nav-links a.active { color: var(--primary); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

/* ハンバーガーメニュー */
.burger { display: none; cursor: pointer; z-index: 1001; }
.burger div { width: 25px; height: 2px; background-color: #333; margin: 6px; transition: all 0.3s ease; }

/* --------------------------------------------------
   トップページ：ヒーローセクション（一瞬の動き）
-------------------------------------------------- */
.hero {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center; text-align: center; color: white;
    background-color: #000; /* 画像ロード前の背景 */
}

/* 一瞬の動き：ロード時に少し拡大された状態から、スッと定位置に戻る（1.5秒） */
.hero-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('images/hero.jpg') no-repeat center center/cover;
    z-index: 0;
    opacity: 0;
    animation: quickReveal 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; /* キレのある動き */
}

/* 少しズームされた状態から100%に戻るアニメーション */
@keyframes quickReveal {
    0% { transform: scale(1.15); opacity: 0; filter: blur(10px); }
    20% { opacity: 1; }
    100% { transform: scale(1); opacity: 1; filter: blur(0); }
}

.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 20, 60, 0.3); z-index: 1; }

.hero-content {
    position: relative; z-index: 2; padding: 20px; max-width: 900px;
    opacity: 0;
    animation: textFadeIn 1s ease-out 0.8s forwards; /* 背景の後にテキスト表示 */
}

@keyframes textFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero h1 {
    font-size: 4.5rem; line-height: 1.1; margin-bottom: 25px; letter-spacing: 0.02em; font-weight: 700;
    text-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.hero p { font-size: 1.2rem; font-weight: 500; letter-spacing: 0.1em; margin-bottom: 40px; opacity: 0.9; }

.btn-hero {
    display: inline-block; padding: 15px 40px;
    background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white; border-radius: 50px; font-weight: 500; letter-spacing: 0.1em;
    transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-hero:hover { background: white; color: var(--primary); border-color: white; transform: scale(1.05); }


/* 共通セクション */
/*
.section { padding: 120px 5%; }
*/
.bg-gray { background-color: var(--gray-bg); }
/*
.container { max-width: 1200px; margin: 0 auto; }
*/
.section-heading { text-align: center; margin-bottom: 80px; }
.section-heading h3 { font-size: 2.5rem; color: var(--primary); margin-bottom: 15px; letter-spacing: 0.05em; }
.section-heading p { color: #888; font-size: 1rem; font-family: "Times New Roman", serif; font-style: italic; letter-spacing: 0.1em; }

/* ページヘッダー（下層ページ用） */
/* 1. ヘッダー自体の背景画像指定を削除・透明化 */
.page-header {
    height: 50vh;
    /* 背景画像は body 側に移すため削除またはnone */
    background-image: none !important; 
    position: relative;
    display: flex; align-items: center; justify-content: center; text-align: center; color: white;
}

/* ヘッダー文字を見やすくするための暗いカバーは維持 */
.page-header::before {
    content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
    background: rgba(0, 30, 80, 0.6); /* 必要に応じて濃さを調整 */
    z-index: 0;
}

/* --------------------------------------------------
   ヘッダータイトルのアニメーション設定
-------------------------------------------------- */

/* 1. アニメーションの動きを定義（キーフレーム） */

/* 左からふわっと現れる動き */
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-300px); /* 左に300pxずれた状態から */
        filter: blur(10px); /* 最初はぼかしておく */
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* 元の位置へ */
        filter: blur(0);
    }
}

/* 右からふわっと現れる動き */
@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(300px); /* 右に300pxずれた状態から */
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* 元の位置へ */
        filter: blur(0);
    }
}

/* 2. 要素にアニメーションを適用 */

.page-header h2 {
    font-size: 4rem; 
    font-weight: 700; 
    margin-bottom: 15px;
    z-index: 1;
    position: relative;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.1em;

    /* ▼▼▼ アニメーション適用 ▼▼▼ */
    /* アニメーション名: slideInLeft */
    /* 所要時間: 2秒 */
    /* 動きのカーブ: cubic-bezier(...) で少し溜めのあるリッチな動きに */
    /* forwards: アニメーション終了時の状態を維持 */
    animation: slideInLeft 2s cubic-bezier(0.5, 1, 0.36, 1) forwards;
}

.page-header p {
    font-size: 1.4rem; 
    font-family: serif; 
    font-style: italic; 
    color: #eee; 
    z-index: 1;
    position: relative;
    letter-spacing: 0.05em;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);

    /* ▼▼▼ アニメーション適用（右から） ▼▼▼ */
    /* opacity: 0 を初期値にしておき、アニメーション開始まで隠す */
    opacity: 0; 
    
    /* 0.3秒遅らせて（delay）スタートさせると、時間差が出ておしゃれです */
    animation: slideInRight 2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

/* スマホで見た時に大きすぎないよう調整 */
@media screen and (max-width: 768px) {
    .page-header h2 {
        font-size: 2.5rem; /* スマホでは少し控えめに */
    }
}

/* 2. ボディ（ページ全体）に背景画像を設定し、固定(fixed)する */

/* Aboutページ */
body.page-about {
    background-image: url("images/about-header.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}

/* Activitiesページ */
body.page-activities {
    background-image: url("images/activities-header.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}

/* Facultyページ */
body.page-faculty {
    background-image: url("images/faculty-header.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}

/* 3. コンテンツエリアを「浮いている」ように見せる加工 */

/* セクション自体の背景色は透明にする（背景画像を見せるため） */
.section {
    background-color: transparent; 
    max-width: 1400px !important;
    margin: 0 auto;
    padding: 80px 5% 0 5%; /* 上下左右の余白 */

}

/* コンテンツが入る箱のデザイン */
.section .container {
    /* 背景色：白ですが、少し透けさせます */
    background-color: rgba(255, 255, 255, 0.7);
    
    /* すりガラス効果 */
    /* 背景の写真をぼかすことで、手前の箱が浮いている感を強調します */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari用 */

    /* 内側の余白：少し広めにとって窮屈さをなくします */
    padding: 40px;
    
    /* 角丸：大きめに丸めて柔らかい印象に */
    border-radius: 20px;
    
    /* 横方向0, 下方向20px, ぼかし40px, 色は黒の20% */
    box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.8);
    
    /* 枠線：うっすらと白線を入れると輪郭が際立ちます */
    border: 1px solid rgba(255, 255, 255, 0.6);

    /* 幅の設定 */
    margin: 0 auto;
}

/* --------------------------------------------------
   ボックスのジグザグ配置（PC画面のみ）
-------------------------------------------------- */
@media screen and (min-width: 769px) {

    /* 左に寄せる */
.lft {
    padding: 80px 5% 0 0 !important; /* 上下左右の余白 */
}

    /* 右に寄せる */
.rit {
    padding: 80px 0 0 5% !important; /* 上下左右の余白 */
}
}



/* スマホでは余白を少し減らす調整 */
@media screen and (max-width: 768px) {
    .section .container {
        padding: 30px 20px;
        border-radius: 15px;
    }
}



/* --------------------------------------------------
   活動概要：スタイリッシュな交互レイアウト (Zig-Zag)
-------------------------------------------------- */
.feature-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 10px;
}
/* 偶数番目の要素は左右反転 */
.feature-row.reverse { flex-direction: row-reverse; }
.feature-img {
    flex: 1.2;
    position: relative; /* これが重要：子要素の絶対配置の基準点になります */
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* 下になるベース画像のスタイル（既存のものを少し調整） */
.feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 【新規追加】重ねる画像のスタイル */
.feature-img img:nth-child(2) { 
    position: absolute; /* 絶対配置にする */
    top: 0;             /* 上端を合わせる */
    left: 0;            /* 左端を合わせる */
    width: 100%;        /* 幅を親要素に合わせる */
    height: 100%;       /* 高さを親要素に合わせる */
    object-fit: cover;  /* 枠に合わせてトリミング */
    opacity: 0.7;       /* (任意) 少し透明にして下の画像となじませる場合 */
    z-index: 2;         /* 手前に表示する */
    /* mix-blend-mode: overlay; */ /* (任意) Photoshopのような描画モードで重ねる場合 */
}

/* 少し強めにズームして、左上方向へ移動させる */
.feature-row:hover .feature-img img:first-child {
    /* scale(倍率) translate(X方向の移動量, Y方向の移動量) */
    transform: scale(1.1) translate(-10px, -5px);
}

/*控えめにズームして、右下方向へ移動させる（逆の動きでずれ感を強調） */
.feature-row:hover .feature-img img:nth-child(2) {
    /* scale(倍率) translate(X方向の移動量, Y方向の移動量) */
    transform: scale(1.05) translate(10px, 5px);
}

.feature-text {
    flex: 1;
    padding: 40px; /* 文字周りの余白を少し広げて見やすくします */
    
    background-color: #ffffff; /* 背景を真っ白に設定 */
    box-shadow: 0 15px 40px rgba(0,0,0,0.1); /* 周りにうっすらと暗い影を落とす */
    border-radius: 15px; /* 角を丸くして柔らかな印象に */
    position: relative; /* 重なり順の指定のために必要 */
    z-index: 2; /* 画像よりも少し手前に表示して目立たせる */
}

.feature-num {
    font-size: 4rem; color: #eee; font-weight: 900; line-height: 1;
    margin-bottom: -20px; position: relative; z-index: 0; font-family: "Helvetica Neue", sans-serif;
}
.feature-text h3 {
    font-size: 2rem; margin-bottom: 25px; color: var(--text);
    position: relative; z-index: 1;
}
.feature-text p {
    font-size: 1rem; color: #666; margin-bottom: 30px; line-height: 2;
    text-align: justify;
}
.tag {
    display: inline-block; font-size: 0.75rem; padding: 5px 15px; border: 1px solid #ddd;
    border-radius: 20px; color: #888; margin-right: 5px; background: white;
}


/* トップページ用グリッド（シンプル版） */
.top-topics {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.topic-card {
    position: relative; height: 350px; overflow: hidden; border-radius: 8px;
    color: white; text-align: left;
}
.topic-card img {
    width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease;
}
.topic-card:hover img { transform: scale(1.1); }
.topic-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 30px;
}
.topic-overlay h4 { font-size: 1.3rem; margin-bottom: 5px; }
.topic-overlay p { font-size: 0.9rem; opacity: 0.9; }

/*研究者紹介用*/
.leadership-wrapper {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin: 40px 0 60px;
            flex-wrap: wrap;
}
 .leadership-card {
            background: #fff;
            border-top: 4px solid #004098; /* 大学カラー */
            border-bottom: 4px solid #c5a059; /* 金色アクセント */
            padding: 40px 30px;
            width: 45%;
            min-width: 320px;
            box-shadow: 0 15px 30px rgba(0,0,0,0.08);
            text-align: center;
            position: relative;
            transition: transform 0.3s ease;
}
.leadership-card:hover {
            transform: translateY(-5px);
}
.leadership-card .role {
            color: #004098;
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 15px;
            letter-spacing: 0.1em;
}
.leadership-card .name {
            font-size: 1.8rem;
            font-weight: 500;
            border-bottom: 1px solid #eee;
            padding-bottom: 20px;
            margin-bottom: 20px;
}
.leadership-desc {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.6;
}
/* 部門説明文のスタイル */
.dept-description {
            margin-bottom: 30px;
            line-height: 1.8;
            color: #444;
            font-size: 0.95rem;
            background-color: #f9f9f9;
            padding: 20px;
            border-left: 4px solid #ccc;
}

/* --- 学内情報セキュリティ体制との連携セクション --- */

/* 全体のラッパー（既存のページ幅に馴染むように余白のみ設定） */
.security-cooperation-wrapper {
  margin: 40px 0;
  color: #333;
  line-height: 1.6;
}

/* タイトル下の説明文 */
.security-description {
  margin-bottom: 30px;
  text-align: justify;
}

/* 左右ブロックを横並びにするためのFlexbox設定 */
.cooperation-blocks {
  display: flex;
  gap: 30px; /* 左右ブロック間の余白 */
  justify-content: space-between;
}

/* 各ブロックの装飾 */
.block-item {
  flex: 1; /* 左右の幅を均等（50:50）にする */
  background-color: #f9f9fb; /* 既存ページの白背景に浮き立たせるための薄いグレー */
  padding: 25px;
  border-radius: 8px; /* 角丸 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 軽い影 */
  border-top: 5px solid #004098; /* アクセントライン */
}

/* ブロック内の小見出し */
.block-title {
  font-size: 18px;
  color: #004098;
  margin-top: 0;
  margin-bottom: 15px;
  border-bottom: 2px solid #eef2f6;
  padding-bottom: 10px;
}

/* ブロック内のテキスト */
.block-text {
  font-size: 15px;
  color: #444;
  margin-bottom: 0;
}

/* スマホ・タブレット等の幅が狭い画面向けのレスポンシブ対応（縦並び） */
@media (max-width: 768px) {
  .cooperation-blocks {
    flex-direction: column;
    gap: 20px;
  }
}

/* --- AI生成画像に関する注記（フッター追加用） --- */
.ai-generation-notice {
  font-size: 10px;                 /* 既存テキストより少し小さくして控えめに */
  color: rgba(255, 255, 255, 0.5); /* 暗い背景に馴染む半透明の白（50%の濃さ） */
  text-align: center;              /* 中央揃え（左寄せが良い場合は left に変更してください） */
  margin: 10px 0;                  /* 上下の余白で窮屈さをなくす */
  letter-spacing: 0.05em;          /* 文字間隔を少し広げて上品に */
  transition: color 0.3s ease;     /* マウスを乗せた際のフワッとした変化の準備 */
}

/* マウスカーソルが乗った時に少し明るくして読みやすくする */
.ai-generation-notice:hover {
  color: rgba(255, 255, 255, 0.9);
}



/* =========================================
   CISO挨拶セクション用スタイル（再修正版）
========================================= */
.custom-ciso-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 30px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.custom-ciso-image {
  flex: 0 0 250px !important;
  max-width: 100% !important;
}

.custom-ciso-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: 4px !important;
}

/* ▼ 修正ポイント：背景色、内側の余白、角丸を設定 */
.custom-ciso-text {
  flex: 1 1 300px !important;
  min-width: 0 !important;
  background-color: #ffffff !important; 
  padding: 30px !important; /* ①内側の余白（広すぎる場合は 20px などに調整してください） */
  border-radius: 8px !important; /* ③背景の角を丸くする（数字を大きくするとより丸くなります） */
  box-sizing: border-box !important; /* 余白がはみ出さないようにする設定 */
}

/* タイトル・サブタイトルの色と余白（フォント設定はサイト本体に任せるため削除） */
.custom-ciso-text h3 {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  color: #333333 !important;
}

.custom-ciso-text h4 {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  color: #333333 !important;
}

/* ▼ 修正ポイント：挨拶文のフォントをサイト本体（機構長挨拶）に完全に合わせる */
.custom-ciso-text p {
  margin-bottom: 1.2em !important;
  text-align: justify !important;
  color: #333333 !important;
  /* font-familyやfont-sizeなどの指定を削除し、サイト標準のスタイルを適用させます */
}

/* 名前の部分（右寄せ・フォントはサイト本体に合わせる） */
.custom-ciso-signature {
  text-align: right !important;
  margin-top: 30px !important;
  color: #333333 !important;
}

/* スマホ表示用のレスポンシブ対応 */
@media screen and (max-width: 768px) {
  .custom-ciso-wrapper {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .custom-ciso-image {
    flex: 0 0 auto !important;
    width: 60% !important;
    margin: 0 auto !important;
  }
  .custom-ciso-text {
    padding: 20px !important; /* スマホ閲覧時は余白を少し狭くして見やすくします */
  }
}


/* ▼ 修正ポイント：ブロック全体を右に寄せつつ、文字は左揃えにする */
.custom-ciociso-signature {
  width: fit-content !important; /* ブロックの幅を文字の長さに合わせる */
  margin-top: 30px !important;
  margin-left: auto !important;  /* 左側の余白を自動にして、右端に押しやる */
  text-align: left !important;   /* ブロックの中の文字は左揃えにする */
}


/* その他（About, Facultyなどの既存スタイル維持用） */
.about-grid { display: grid; grid-template-columns: 0.4fr 0.6fr; gap: 60px; align-items: flex-start; margin-bottom: 10px; }
.director-card { background: white; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.director-img-wrapper { width: 100%; height: 350px; }
.director-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.director-message { padding: 30px; }
.message-body { font-size: 0.95rem; margin-bottom: 20px; font-style: italic; color: #555; line-height: 1.8; }
.director-name { text-align: right; font-weight: bold; }
.about-text h3 { font-size: 1.8rem; color: #004098; margin-bottom: 20px; }
.mission-box { margin-top: 25px; padding: 25px; border-left: 5px solid #004098; background: #f0f4ff; }
.mission-box h4 { color: #004098; margin-bottom: 10px; }
.mission-box ul li { margin-bottom: 8px; list-style: disc; margin-left: 20px; }
.org-chart-section { text-align: center; margin-top: 80px; padding: 40px; background: #fff; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.org-chart-img { width: 100%; border: none; }
.faculty-simple-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.faculty-card { background: white; border: 1px solid #e0e0e0; border-left: 5px solid #004098; padding: 30px 25px; width: 300px; border-radius: 5px; transition: 0.3s; box-shadow: 0 5px 10px rgba(0,0,0,0.05); }
.faculty-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.faculty-card .role { font-size: 0.85rem; color: #004098; font-weight: bold; margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; }
.faculty-card .name { font-size: 1.4rem; font-weight: 700; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.faculty-card .role-desc { font-size: 0.9rem; color: #666; line-height: 1.6; }


/* Footer */
footer { background-color: #111; color: #888; padding: 80px 0 40px; text-align: center; }
.footer-info h4 { color: white; margin-bottom: 15px; font-size: 1.1rem; letter-spacing: 0.1em; }
.copyright { margin-top: 50px; font-size: 0.7rem; border-top: 1px solid #333; padding-top: 30px; letter-spacing: 0.05em; }

/* --- スクロールアニメーション用の設定 --- */

/* ゆっくり、ふわっとさせる設定 */
.animate-on-scroll {
    opacity: 0;
    /* 移動距離を少し大きくして、ふんわり感を強調 */
    transform: translateY(50px); 
    /* 時間を1.5秒に延ばし、より柔らかい動きのカーブに変更 */
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1), transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 画面内に入った時の状態（見えるようにする） */
.animate-on-scroll.is-visible {
    opacity: 1; /* 不透明にする */
    transform: translateY(0); /* 元の位置に戻す */
}

/* 順番に表示させるための遅延設定（任意） */
/* 複数の要素に適用する場合、少しずつタイミングをずらすと綺麗です */
.delay-1 { transition-delay: 0.3s; }
.delay-2 { transition-delay: 0.6s; }
.delay-3 { transition-delay: 0.9s; }

/* =========================================
   ページ内リンク（アンカーリンク）の位置調整
========================================= */

/* id属性を持つすべての要素に対して、スクロール時の上部余白を設定 */
*[id] {
    scroll-margin-top: 150px;
}


/* スマホ対応 */
@media screen and (max-width: 768px) {
    .nav-links { position: absolute; right: 0; height: 100vh; top: 0; background-color: rgba(255, 255, 255, 0.98); display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70%; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: -2px 0 5px rgba(0,0,0,0.1); }
    .nav-links li { opacity: 0; margin: 15px 0; }
    .burger { display: block; }
    .nav-active { transform: translateX(0%); }
    @keyframes navLinkFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .nav-active li { animation: navLinkFade 0.5s ease forwards 0.2s; }
    .hero h1 { font-size: 2.5rem; }
    .feature-row, .feature-row.reverse { flex-direction: column; gap: 20px; margin-bottom: 80px; }
    .top-topics { grid-template-columns: 1fr; }
    .about-grid { grid-template-columns: 1fr; }
    .director-img-wrapper { height: 250px; }
    .toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); }
    .toggle .line2 { opacity: 0; }
    .toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); }
}