/* reset */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#D8CFC5;color:#222;line-height:1.6;min-height:100vh;padding-bottom:60px}
h1,h2,h3{font-weight:500;text-align:center}
p{font-weight:300}
a{text-decoration:none;color:inherit}

/* header */
header{position:fixed;top:0;width:100%;height:60px;background:rgba(0,0,0,.6);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:1000}
#headerLogo{height:55px;width:auto;object-fit:contain;margin-left:-20px}
#menu-toggle{background:none;border:none;color:#fff;font-size:32px;cursor:pointer;padding:8px;margin-left:auto}

/* nav */
#Nav-Links{list-style:none;padding:0;display:none}
#Nav-Links.open{display:block!important;position:absolute;top:60px;right:0;
  background:#ddd;border-radius:16px;padding:10px 0;max-width:100vw;z-index:1001}
#Nav-Links.open li{width:100%;padding:8px 0}
#Nav-Links.open li a{display:block;width:100%;padding:16px 32px;font-size:1.1rem;color:#000}
#Nav-Links.open li:hover{background:#fff}
#Nav-Links.open li:hover a{color:#8C5E3C}

/* footer */
.sticky-footer{position:fixed;left:0;bottom:0;width:100%;height:60px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#fff;text-align:center;padding:10px 0;z-index:100}
footer{background:#5B3A29;color:#fff;height:60px;display:flex;
  justify-content:center;align-items:center;font-size:.9rem;margin-top:60px}

/* side borders */
.side-crow-border{position:fixed;top:0;bottom:60px;z-index:1000;width:2vw;overflow:hidden}
.left-border{left:0}
.right-border{right:0}
.side-crow-border img{display:block;width:100%;height:100%;object-fit:cover}
.right-border img{transform:scaleX(-1)}

/* title */
.titlecontainer{width:100%;height:120vh;position:relative}
.titleimage{width:100%;height:100%;object-fit:cover;filter:brightness(75%)}
.title{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);
  font-size:3.5rem;color:#fff;font-weight:600;letter-spacing:2px;text-align:center}

/* intro */
.firstInfo{padding:80px 20px;max-width:900px;margin:auto;text-align:center}
.firstInfo h1{margin-bottom:20px;font-size:2rem}
.firstInfo p{font-size:1.05rem}
.firstInfo.outlined{background:#fff;border:2px solid #8C5E3C;border-radius:10px;
  padding:60px 40px;box-shadow:0 4px 8px rgba(0,0,0,.1)}
.firstInfo.outlined h1{margin-bottom:30px}
.firstInfo.outlined p{margin-top:20px}
.firstInfo.learn-intro{background:#fff;border-left:6px solid #8C5E3C;border-radius:8px;
  padding:60px 40px 30px;box-shadow:0 2px 10px rgba(0,0,0,.05);margin-bottom:0}
.firstInfo.learn-intro h1{font-size:2.2rem;color:#8C5E3C}
.firstInfo.learn-intro p{font-style:italic;color:#444}

/* mission windows */
.mission-windows{display:flex;flex-wrap:wrap;justify-content:center;
  width:100vw;margin:-300px auto 40px;position:relative;z-index:10;padding:0 20px}
.mission-window{position:relative;flex:1 1 400px;min-height:450px;
  background:rgba(255,255,255,.95);border:1px solid #ccc;border-radius:8px;padding:40px}
.mission-window textarea{width:100%;height:400px;border:none;resize:vertical;
  font-family:inherit;font-size:1rem}
.mission-window textarea:focus{outline:2px solid #8C5E3C}
.image-window{padding:0}
.image-window img{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px}
.quote-bubble{position:absolute;top:10px;left:50%;transform:translateX(-50%);
  background:rgba(255,255,255,.3);color:#2a2a2a;padding:12px 20px;border-radius:18px;
  font-size:1rem;font-style:italic;font-weight:500;line-height:1.4;max-width:70%;
  text-align:center;box-shadow:0 4px 10px rgba(0,0,0,.15);border:1px solid rgba(0,0,0,.1);
  backdrop-filter:blur(4px);z-index:20}
.quote-bubble::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  border-width:8px 8px 0;border-style:solid;border-color:rgba(255,255,255,.3) transparent transparent}
.mission-windows .mission-window:nth-child(3) .quote-bubble{color:#fff}

/* rows */
.row{display:flex;height:450px;width:100%}
.img-div,.text{flex:1}
.img-div img{width:100%;height:100%;object-fit:cover}
.text{display:flex;flex-direction:column;justify-content:center;padding:40px;
  background:#E8E2DA;transition:background .3s}
.text:hover{background:#D8CFC5}
.text h1{margin-bottom:15px}
.text p{max-width:400px;margin:0 auto;text-align:center}

/* language */
#information{padding:60px 20px}
#question-boxes{max-width:1100px;margin:auto;display:flex;flex-wrap:wrap;gap:40px;justify-content:center}
.question{width:45%;background:#fff;padding:25px;border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);text-align:center}
.question h1{margin-bottom:10px;font-size:1.3rem}
.question p{font-size:.95rem}

/* contact */
#contactboxes{display:flex;justify-content:center;gap:40px;padding:60px 20px;flex-wrap:wrap}
#phone,#location,#email{width:300px;height:220px;background:#fff;border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px}
#phone-img,#location-img,#email-img{width:45px;height:45px}
#phone-img img,#location-img img,#email-img img{width:100%;height:100%}

/* responsive */
@media(max-width:900px){
  .side-crow-border{display:none}
  .row{flex-direction:column;height:auto}
  .question{width:90%}
  #Nav-Links li a{padding:30px 10px;font-size:.8rem}
  .title{font-size:2.2rem}
  .title.overlay-title{top:30%!important}
}