body { 
  margin:0; 
  font-family: Arial, sans-serif; 
}

/* Header */
.header {
  display:flex; justify-content:space-between; align-items:center;
  background:#0066cc; padding:10px 20px; color:#fff;
}
.header .logo { font-size:20px; font-weight:bold; }
.header .auth { display:flex; gap:15px; align-items:center; }
.header .auth a { color:#fff; text-decoration:none; font-weight:bold; }
.header .auth a:hover { text-decoration:underline; }
.header .auth img { width:35px; height:35px; border-radius:50%; }

/* Main Menu */
nav {
  background:#004080;
  overflow-x:auto;
}
nav ul {
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:nowrap; justify-content:center;
}
nav ul li { flex:0 0 auto; }
nav ul li a {
  display:block; padding:12px 20px; color:#fff; text-decoration:none;
  white-space:nowrap;
}
nav ul li:hover { background:#0059b3; }

/* Slider */
.slider {
  position:relative; overflow:hidden;
  max-width:100%; height:450px;
}
.slides {
  display:flex; transition:transform 0.5s ease-in-out;
}
.slide {
  min-width:100%; box-sizing:border-box; position:relative;
}
.slide img {
  width:100%; height:450px; object-fit:cover; cursor:pointer;
}
.caption {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%);
  background:rgba(0,0,0,0.6);
  color:#fff; padding:20px; border-radius:8px;
  text-align:center;
}
.caption h3 { margin:0 0 10px; font-size:20px; }
.caption a {
  display:inline-block; padding:10px 20px;
  background:#0066cc; color:#fff; text-decoration:none;
  border-radius:5px; font-weight:bold;
}
.caption a:hover { background:#0059b3; }

/* Subscribe */
.subscribe { background:#f2f2f2; padding:20px; text-align:center; }
.subscribe input[type=email] { padding:10px; width:250px; max-width:80%; }
.subscribe button { padding:10px 20px; background:#0066cc; color:#fff; border:none; cursor:pointer; }

/* Middle Container */
.middle {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;   /* ✅ children height autoగా ఉండటానికి */
  padding: 20px;
}

.middle .left {
  flex: 2;                  /* width proportion */
  min-width: 300px;
  padding: 15px;
  box-sizing: border-box;
  background: #e6f2ff;
  height: auto;             /* ✅ content ఆధారంగా height */
  align-self: flex-start;   /* ✅ force auto height */
}

.middle .right {
  flex: 1;
  min-width: 200px;
  padding: 15px;
  box-sizing: border-box;
  background: #f9f9f9;
}

/* Signup Form */
.signup-form {
  display:flex; flex-direction:column; gap:12px;
  background:#fff; padding:20px; border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}
.signup-form label {
  font-weight:bold; color:#333;
}
.signup-form input,
.signup-form select {
  padding:10px; border:1px solid #ccc; border-radius:6px;
  font-size:14px;
}
.signup-form .terms {
  display:flex; align-items:center; gap:8px;
}
.signup-form button {
  padding:12px; background:#0066cc; color:#fff;
  border:none; border-radius:6px; font-size:16px; cursor:pointer;
}
.signup-form button:hover { background:#004d99; }

/* Footer */
.footer { background:#004080; color:#fff; padding:40px 20px; }
.footer-container {
  display:flex; flex-wrap:wrap; justify-content:space-between;
  max-width:1200px; margin:auto;
}
.footer-col { flex:1; min-width:220px; margin:15px; }
.footer-col h3 {
  margin-bottom:15px; font-size:18px; border-bottom:2px solid #0066cc; padding-bottom:5px;
}
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col ul li { margin-bottom:8px; }
.footer-col ul li a { color:#fff; text-decoration:none; }
.footer-col ul li a:hover { text-decoration:underline; }
.footer-col p { font-size:14px; line-height:1.5; }
.footer-bottom {
  text-align:center; margin-top:20px; border-top:1px solid #0066cc; padding-top:10px;
  font-size:14px;
}

/* Responsive */
@media (max-width:768px) {
  .middle { flex-direction:column; }

  /* Mobileలో left hide అవ్వాలి */
  .middle .left { display:none; }

  /* Mobileలో right full widthలో show అవ్వాలి */
  .middle .right { 
    display:block; 
    width:100%; 
    padding:15px; 
    box-sizing:border-box; 
  }

  .signup-form { padding:15px; }
  .signup-form button { font-size:14px; }

  .footer-container { flex-direction:column; align-items:flex-start; }
  .footer-col { width:100%; }
}