:root {
  --header-bg: rgba(173, 216, 230, 0.3);
  --text: #434F60;
  --accent: #74D4FF;
  --max-width: 1200px;
  font-family: Arial, Helvetica, sans-serif;
}

/* Reset */
* {box-sizing:border-box; margin:0; padding:0;}
body {color:var(--text); background:#fff; line-height:1.5;}

/* Header */
header {
  position:fixed;
  top:0; left:0; right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 22px;
  background:var(--header-bg);
  backdrop-filter: blur(6px);
  z-index:100;
}
.brand {font-weight:bold; font-size:1.2rem;}
nav ul {list-style:none; display:flex; gap:15px;}
nav a, nav label {
  text-decoration:none;
  color:var(--text);
  padding:8px 10px;
  border-radius:6px;
  font-weight:600;
}
nav a:hover, nav label:hover {background:rgba(255,255,255,0.4);}

/* Dropdown */
.dropdown {position:relative;}
.submenu {
  position:absolute;
  left:0; top:120%;
  background:#fff;
  border-radius:8px;
  box-shadow:0 4px 20px rgba(0,0,0,0.15);
  display:none;
  flex-direction:column;
  min-width:160px;
}
.submenu a {padding:10px; display:block;}
.submenu a:hover {background:#e0f4ff;}
.dropdown:hover .submenu {display:flex;}

/* Hamburger */
.hamburger {display:none; cursor:pointer; width:40px; height:40px; justify-content:center; align-items:center;}
.hamburger span {width:24px; height:2px; background:var(--text); position:relative; display:block;}
.hamburger span::before, .hamburger span::after {
  content:""; position:absolute; width:24px; height:2px; background:var(--text);
}
.hamburger span::before {top:-7px;}
.hamburger span::after {bottom:-7px;}
#nav-toggle {display:none;}

/* Section double-box */
.double-box {
  max-width: 1200px;
  margin: 120px auto 60px auto; 
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 0 20px;
}

.box {
  flex: 1 1 500px;
  max-width: 550px;
  background: #D7E2EE;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  text-align: center;
}

.box img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
  border: 2px solid #74D4FF;
}

.box h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
  color: #003366;
}
.box p {
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.drone-logo {
  text-align: center;
  margin-top: 140px;
}
.drone-logo img {
  width: 220px;
  height: auto;
  display: inline-block;
  border: none;
}

.box video {
  width: 100%;
  border-radius: 8px;
  border: 2px solid var(--accent);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Section single-video */
.single-video {
  max-width: var(--max-width);
  margin: 40px auto 80px auto;
  text-align: center;
  padding: 0 20px;
}
.single-video h3 {
  margin-bottom: 20px;
  font-size: 1.3rem;
  color: #003366;
}
.single-video video {
  width: 100%;
  max-width: 1020px;
  border-radius: 10px;
  border: 2px solid var(--accent);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* Footer */
footer {
  background: var(--accent);
  text-align:center;
  padding:20px;
}
.footer-top, .footer-middle, .footer-bottom {margin:10px 0;}
footer a {color:var(--text); font-weight:bold;}

/* Responsive */
@media (max-width:768px) {
  nav {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20px;
    text-align: center;
  }
  header nav ul {
    flex-direction: column;
    gap: 15px;
  }
  .hamburger {display:flex;}
  #nav-toggle:checked ~ header nav {
    display: block;
  }
}