body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #333;
  background-color: #eef2f6; /* Light background for the page */
}

h1,
h2,
h3 {
  font-family: "Montserrat", sans-serif;
  color: #0056b3;
  line-height: 1.2;
  /* 15D text effect */
  text-shadow:
    1px 1px 0px rgba(0, 0, 0, 0.05),
    2px 2px 0px rgba(0, 0, 0, 0.05),
    3px 3px 0px rgba(0, 0, 0, 0.05),
    4px 4px 0px rgba(0, 0, 0, 0.05),
    5px 5px 0px rgba(0, 0, 0, 0.05),
    6px 6px 0px rgba(0, 0, 0, 0.05),
    7px 7px 0px rgba(0, 0, 0, 0.05),
    8px 8px 0px rgba(0, 0, 0, 0.05),
    9px 9px 0px rgba(0, 0, 0, 0.05),
    10px 10px 0px rgba(0, 0, 0, 0.05),
    11px 11px 0px rgba(0, 0, 0, 0.05),
    12px 12px 0px rgba(0, 0, 0, 0.05),
    13px 13px 0px rgba(0, 0, 0, 0.05),
    14px 14px 0px rgba(0, 0, 0, 0.05),
    15px 15px 0px rgba(0, 0, 0, 0.02); /* 15D depth */
}

header {
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 1rem 0;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo img {
  height: 50px; /* Set a fixed height */
  width: 50px; /* Set a fixed width to make it square */
  border-radius: 50%; /* Make it circular */
  display: block; /* Ensures image behaves like a block element */
}

.logo {
  /* Remove text-specific styles for image logo */
  text-shadow: none;
  user-select: none;
  -webkit-user-select: none;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center; /* Vertically align items */
}

nav ul li {
  margin-left: 35px; /* Increased spacing */
}

nav ul li a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
  font-size: 1.05rem; /* Slightly larger nav links */
  transition:
    color 0.3s ease,
    transform 0.2s ease;
  display: flex; /* Enable flexbox for icon and text */
  flex-direction: column; /* Stack icon and text vertically */
  align-items: center; /* Center icon and text */
}

nav ul li a img {
  width: 28px; /* Icon size */
  height: 28px; /* Icon size */
  margin-bottom: 5px; /* Space between icon and text */
}

nav ul li a:hover {
  color: #0056b3;
  transform: translateY(-2px);
}

.hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("https://github.com/RemoteRuler/Website/blob/main/Background/5a6ba053-8c93-46c6-afc7-ccad0e98867c.png?raw=true")
      no-repeat center center/cover; /* New background image */
  color: #ffffff;
  text-align: center;
  padding: 180px 20px; /* More vertical padding */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin-top: 70px; /* Adjust for fixed header */
}

.hero-content h1 {
  font-size: 4.2rem; /* Larger hero heading */
  margin-bottom: 25px;
  color: #ffffff;
  font-weight: 700;
  text-shadow:
    1px 1px 0px rgba(0, 0, 0, 0.2),
    2px 2px 0px rgba(0, 0, 0, 0.2),
    3px 3px 0px rgba(0, 0, 0, 0.2),
    4px 4px 0px rgba(0, 0, 0, 0.1); /* Stronger shadow for hero h1 */
}

#typing-text {
  border-right: 0.15em solid orange; /* The typing cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  overflow: hidden; /* Hides the text until it's typed */
  animation: blink-caret 0.75s step-end infinite; /* Blinking cursor animation */
}

/* The typing effect */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}

.hero-content p {
  font-size: 1.6rem; /* Larger hero paragraph */
  margin-bottom: 40px;
  font-weight: 400;
}

.btn {
  background-color: #0056b3;
  color: #ffffff;
  padding: 14px 30px; /* Larger button */
  border: none;
  border-radius: 8px; /* More rounded corners */
  font-size: 1.2rem;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn:hover {
  background-color: #004085;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

section {
  padding: 100px 20px; /* More vertical padding for sections */
  max-width: 1200px;
  margin: 0 auto;
}

h2 {
  font-size: 2.8rem; /* Larger section headings */
  margin-bottom: 60px; /* More space below headings */
  font-weight: 700;
  position: relative;
  display: inline-block;
}

h2::after {
  content: "";
  width: 80px;
  height: 4px;
  background-color: #0056b3;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -15px;
  border-radius: 2px;
}

.services {
  background-color: #eef2f6;
  text-align: center;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 35px; /* Increased gap */
  margin-top: 40px;
}

.service-item {
  background-color: #ffffff;
  padding: 35px; /* More padding */
  border-radius: 12px; /* More rounded corners */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* Softer shadow */
  text-align: left;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  border: 1px solid #e0e0e0; /* Subtle border */
}

.service-item:hover {
  transform: translateY(-12px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.service-item h3 {
  font-size: 2rem; /* Larger service item heading */
  margin-bottom: 18px;
  color: #0056b3;
  display: flex;
  align-items: center;
}

/* Removed .service-item .service-icon styles */

.service-item p {
  font-size: 1.05rem;
  line-height: 1.6;
}

.about {
  text-align: center;
}

.about p {
  font-size: 1.15rem;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
}

.contact {
  background-color: #eef2f6;
  text-align: center;
  padding-bottom: 100px; /* Ensure enough space below icons */
}

.contact-icons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px; /* Spacing between icons */
  margin-top: 20px;
}

.contact-icons-container a img {
  width: 48px; /* Consistent icon size */
  height: 48px; /* Consistent icon size */
  transition: transform 0.2s ease;
}

.contact-icons-container a img:hover {
  transform: scale(1.1);
}

.tools {
  background-color: #eef2f6;
  text-align: center;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 35px; /* Increased gap */
  margin-top: 40px;
}

.tool-item {
  background-color: #ffffff;
  padding: 35px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  text-align: left;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  border: 1px solid #e0e0e0; /* Subtle border */
}

.tool-item:hover {
  transform: translateY(-12px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.tool-item h3 {
  font-size: 2rem;
  margin-bottom: 18px;
  color: #0056b3;
  display: flex;
  align-items: center;
}

.tool-item h3 img {
  margin-left: 10px;
}

.tool-item p {
  font-size: 1.05rem;
  line-height: 1.6;
}

.tool-item p img {
  vertical-align: middle;
  margin-right: 8px;
}

.ai {
  background-color: #eef2f6;
  text-align: center;
}

.ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 35px;
  margin-top: 40px;
}

.ai-item {
  background-color: #ffffff;
  padding: 35px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  text-align: left;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  border: 1px solid #e0e0e0;
}

.ai-item:hover {
  transform: translateY(-12px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.ai-item h3 {
  font-size: 2rem;
  margin-bottom: 18px;
  color: #0056b3;
  display: flex;
  align-items: center;
  justify-content: center; /* Center content horizontally */
}

.ai-item h3 img {
  margin-right: 10px; /* Space between icon and text */
  margin-left: 0; /* Reset margin-left */
  vertical-align: -0.2em; /* Move icon up by 0.2em */
}

.ai-item p {
  font-size: 1.05rem;
  line-height: 1.6;
}

footer {
  background-color: #333;
  color: #ffffff;
  text-align: center;
  padding: 25px 0; /* More padding */
  font-size: 1rem; /* Slightly larger font */
}

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

  nav ul {
    margin-top: 15px;
  }

  nav ul li {
    margin: 0 15px;
  }

  .hero-content h1 {
    font-size: 3rem;
  }

  .hero-content p {
    font-size: 1.3rem;
  }

  h2 {
    font-size: 2.2rem;
    margin-bottom: 40px;
  }

  section {
    padding: 80px 15px;
  }

  .service-grid,
  .tools-grid,
  .ai-grid,
  .video-grid {
    grid-template-columns: 1fr;
    gap: 20px; /* Slightly reduced gap for mobile */
  }

  .service-item,
  .tool-item,
  .ai-item {
    padding: 25px;
  }

  .service-item h3,
  .tool-item h3,
  .ai-item h3 {
    font-size: 1.7rem;
  }

  .contact-icons-container a img {
    width: 40px;
    height: 40px;
  }

  .video-item {
    /* Responsive video container */
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
  }

  .video-item iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-content p {
    font-size: 1.1rem;
  }

  h2 {
    font-size: 1.8rem;
  }

  .logo {
    font-size: 1.5rem;
  }

  nav ul li {
    margin: 0 10px;
  }

  .btn {
    padding: 10px 20px;
    font-size: 1rem;
  }

  .service-item h3,
  .tool-item h3,
  .ai-item h3 {
    font-size: 1.5rem;
  }

  .service-item p,
  .tool-item p,
  .about p,
  .ai-item p {
    font-size: 0.95rem;
  }
}

/* General video grid styling */
.video-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(280px, 1fr)
  ); /* Adjusted minmax for better mobile fit */
  gap: 35px;
  margin-top: 40px;
}

.video-item {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio (height / width = 9 / 16 = 0.5625) */
  height: 0;
  overflow: hidden;
  background-color: #000; /* Placeholder background */
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.video-item iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* New styles for responsive navigation */
.menu-toggle {
  display: none; /* Hidden by default on larger screens */
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 25px;
  cursor: pointer;
  z-index: 1001; /* Ensure it's above other content */
}

.menu-toggle .bar {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 768px) {
  nav {
    flex-direction: row; /* Keep logo and toggle on one line */
    justify-content: space-between;
  }

  .nav-links {
    display: none; /* Hide by default on small screens */
    flex-direction: column;
    width: 100%;
    background-color: #ffffff;
    position: absolute;
    top: 70px; /* Below the header */
    left: 0;
    padding: 20px 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    z-index: 999;
    text-align: center;
  }

  .nav-links.active {
    display: flex; /* Show when active */
  }

  .nav-links li {
    margin: 15px 0; /* Vertical spacing for menu items */
  }

  .menu-toggle {
    display: flex; /* Show hamburger on small screens */
  }

  /* Animation for hamburger icon */
  .menu-toggle.active .bar:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
  }

  .menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
  }
}