/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

html {
  scroll-behavior: smooth;
}

html, body {
  
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal scroll */
}


/* Main container */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  text-align: center;
  padding: 20px;
  position: relative;
  overflow-y: auto;
 
}


/* Navigation Bar */
nav {
  width: 100%;
  position: absolute;
  top: 10px;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px 20px;
}

/* Logo */
.logo {
  width: 120px;
  height: auto;
  border-radius: 10px;
  cursor: pointer;
}

/* Right Section (Holds Social Icons & Contact Info) */
.social-container {
  position: relative;
  top: 10px;
  right: 20px;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

}

/* Social Media Icons - Same Line */
.social-icons {
  display: flex;
  position: absolute;
  top: 10px;
  right: 20px;
  flex-direction: column;
  margin-bottom: 8px; /* Adds spacing between icons and contact info */
 
}

.social-icons a {
  display: inline-block;
}

.social-icons img {
  width: 25px;
  height: 25px;
  
  transition: transform 0.3s ease;
}

.social-icons img:hover {
  transform: scale(1.1);
}

/* Contact Info (Below Social Icons) */
.contact-info {
  color: #fff;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: nowrap;
}

/* Make phone and email clickable */
.contact-info a {
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact-info a:hover {
  color: #0d0e0e;
}

/* Responsive Design */
@media (max-width: 768px) {
  .logo {
      width: 100px;
  }

  .social-icons img {
      width: 22px;
      height: 22px;
  }

  .contact-info {
      font-size: 12px;
  }

  .container header {
    font-size: 40px;
  }

  .input-box {
    max-width: 350px;
  }

  .contact-input{
    width: 350px;
  }


}


@media (max-width: 300px) {
  nav {
      flex-direction: column;
      align-items: center;
      display: flex;
  }
  
  .logo {
      width: 70px;
  }

  .social-container {
      position: absolute;
      right: 10px;
      text-align: right;
    
  }

  .contact-info {
      font-size: 11px;
      padding: 5px;
      display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align to right */
    text-align: left;
    margin-bottom: 250px;
  }


}  

/* Background Image */
.container .image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  background-position: center;
  background-size: cover; /* Ensure it fits well */
  z-index: -1; /* Keep it in the background */
}


/* Header text */
.container header {
  font-size: 50px;
  color: #2c5395;
  font-weight: 600;
  margin-top: 120px; /* Prevent overlap */
}

/* Paragraph text */
.container p {
  font-size: 16px;
  font-weight: 400;
  color: #2c5395;
  max-width: 550px;
}

/* Subscription Box */
.email-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
  width: 100%;
}

.email-content p {
  font-size: 14px;
  color: #fff;
  margin-bottom: 30px;
  
}

/* Input and button container - Vertical layout */
.input-box {
  display: flex;
  flex-direction: column; /* Now in vertical column */
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 360px;
  margin-top: 20px auto;
  gap: 10px; /* Space between inputs */
}

/* Input fields and Textarea */
.contact-input {
  width: 350px;
  height: 40px;
  outline: none;
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.2);
  font-weight: 400;
  padding: 0 15px;
  color: #fff;
}

.contact-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* Textarea */
textarea.contact-input {
  height: 80px;
  resize: none;
  padding-top: 10px;
}

/* Button */
.input-box button {
  width: 100%;
  height: 40px;
  cursor: pointer;
  color: #fff;
  padding: 10px;
  transition: all 0.3s ease;
  background: #007bff;
  border: none;
  border-radius: 4px;
}

.input-box button:hover {
  background-color: #fff;
  color: #0d6a81;
}