/* Replace with your exact cyan color code */

:root { --primary-cyan: #92cee6; / Placeholder cyan */ --white: #ffffff; --text-dark: #1a1a1a; }

body { margin: 0; font-family: Arial, sans-serif; background-color: var(--white); color: var(--text-dark); }

.main-header { background-color: var(--white); padding: 20px 0; text-align: center; border-bottom: 2px solid var(--primary-cyan); }

.logo-container { display: flex; align-items: center; justify-content: center; gap: 10px; }

.logo { height: 50px; width: auto; }

.company-name { font-size: 2rem; color: var(--primary-cyan); margin: 0; }

.main-nav ul { list-style: none; padding: 0; margin: 10px 0 0 0; display: flex; justify-content: center; gap: 30px; }

.main-nav a { text-decoration: none; color: var(--text-dark); font-weight: bold; padding: 8px 16px; border-radius: 4px; transition: background-color 0.3s; }

.main-nav a:hover, .main-nav a.active { background-color: var(--primary-cyan); color: var(--white); }

.homepage-content { padding: 40px 20px; text-align: center; }

.intro h2 { font-size: 2.5rem; color: var(--primary-cyan); }

.intro p { font-size: 1.2rem; max-width: 600px; margin: 20px auto; }

.main-footer { background-color: var(--white); border-top: 1px solid #ccc; text-align: center; padding: 15px 0; font-size: 0.9rem; margin-top: 40px; }

.about-content { padding: 40px 20px; max-width: 800px; margin: 0 auto; text-align: left; }

.about-section h2 { font-size: 2.2rem; color: var(--primary-cyan); margin-bottom: 20px; }

.about-section p { font-size: 1.1rem; line-height: 1.6; margin-bottom: 15px; }

.projects-content { padding: 40px 20px; max-width: 800px; margin: 0 auto; }

.project { margin-bottom: 40px; }

.project h2 { color: var(--primary-cyan); font-size: 2rem; margin-bottom: 12px; }

.project p { font-size: 1.1rem; line-height: 1.5; }

.contact-content { padding: 40px 20px; max-width: 600px; margin: 0 auto; text-align: left; }

.contact-section h2 { color: var(--primary-cyan); font-size: 2rem; margin-bottom: 0px; }

.contact-form { display: flex; flex-direction: column; gap: 15px; }

.contact-form label { font-weight: bold; margin-bottom: 5px; }

.contact-form input, .contact-form textarea { padding: 10px; border: 1.5px solid var(--primary-cyan); border-radius: 5px; font-size: 1rem; resize: vertical; font-family: inherit; }

.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: #008b8b; /* a darker cyan for focus */ box-shadow: 0 0 5px #008b8b; }

.contact-form button { background-color: var(--primary-cyan); color: var(--white); border: none; padding: 12px; font-size: 1.1rem; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; }

.contact-form button:hover { background-color: #008b8b; /* a darker cyan on hover */ }

/* J.A.M.A.L dark theme */ body.jamal-theme { background-color: #121212; color: #f4f4f4; transition: background-color 0.5s ease, color 0.5s ease; }

body.jamal-theme .main-header, body.jamal-theme .main-footer { background-color: #1e1e1e; border-color: #ff6a00; transition: background-color 0.5s ease, border-color 0.5s ease; }

body.jamal-theme .company-name { color: #ff6a00; }

body.jamal-theme .main-nav a { color: #f4f4f4; }

body.jamal-theme .main-nav a:hover, body.jamal-theme .main-nav a.active { background-color: #ff6a00; color: #121212; }

body.jamal-theme .project h2 { color: #ff6a00; }

.contact-intro {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-top: 0px;
  margin-bottom: 35px;
  color: var(--text-dark);
}
.main-footer a {
  color: var(--primary-cyan);
  text-decoration: none;
}

.main-footer a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .main-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0;
  }

  .main-nav a {
    display: block;
    width: 100%;
    max-width: 300px;
    text-align: center;
    border: 1px solid var(--primary-cyan);
    border-radius: 5px;
  }
}