/*
  Global stylesheet for the redesigned Freelance Project website.
  This file defines the core color palette, typography and reusable
  layout primitives used across every page. The goal of this re‑theme
  is to preserve the purple and lavender colour scheme of the
  original template while modernising the look and feel with more
  breathing room, subtle shadows and clear hierarchies. Inspired by
  high‑traffic small business sites, the design emphasises generous
  white space, clean typography and strong calls to action.
*/

/* Colour palette */
:root {
  --primary-color:  #2860af;   /* main Blue accent 152f5f   2860af; */
  --secondary: #2756ac;       /* Sapphire blue */
  --accent-color: #171f2c;          /* Darker sapphire */
  --background-color: #ffffff;      /* Very light for page bg */
  --light-color: #ffffffdc;     /* pure white for cards */
  --dark-text: #18356b;       /* dark navy for body text */
  --muted-text: #18356b;      /* muted lavender for secondary text */
  
  
}

/* Global typography and resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  background: var(--background-color);
  color: var(--dark-text);
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100vw;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;   /* prevents image inline whitespace */

}

/* Reusable container to constrain content width */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Navigation */
header {
  background: var(--light-color);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border-bottom: 2px solid var(--primary-color);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.logo a {
  display: flex;             /* Align image + text horizontally */
  align-items: center;       /* Vertically center them */
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--primary-color);
  letter-spacing: 1px;
  font-family: 'Montserrat', sans-serif; /* V1.7 */
  text-decoration: none;      /* Removes underline */
  gap: 1px; /* Controls space between image & text */
}

.logo-text {
  display: flex;
  flex-direction: column;
  margin-left: 0.5em; /* add spacing between image and text */
  margin-bottom: -5;      /* Removes space below ALTIUS */
}

.logo-sub {
  font-size: 0.7rem;
  color: var(--muted);     /* Light color from your palette */
  font-weight: 400;
  letter-spacing: 1px;
  margin-left: 0.38em; /* add spacing between image and text */
  margin-top: -.5em;
}

.logo img {
  height: 55px;              /* Adjust size to fit header */
  margin-right: 2px;          /* Space between logo and text */
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.6rem;
}

.nav-links a {
  position: relative;
  padding: 0.2rem 0;
  font-weight: 400;
  color: var(--dark-text);
  transition: color 0.2s;
  font-family: 'Raleway', sans-serif; /* V1.7 */

}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: width 0.25s;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--primary-color);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Hero section */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 80vh;
  color: #fff;
  background-size: cover;
  background-position: center;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(63, 61, 86, 0.65);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 1rem;
}

.hero-title {
  font-size: 3rem;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 0.04em;
}

.hero-subtitle {
  font-size: 1.4rem;
  margin-bottom: 2rem;
  font-weight: 400;
  color: #777e94;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  background: var(--primary-color);
  color: #fff;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s, transform 0.2s;
}

.pricing-btn {
  margin-top: auto;
  padding: 0.85rem 2.2rem;
  background: var(--primary-color);
  color: #fff;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s, transform 0.2s;
}

.btn:hover {
  background: var(--accent-color);
  transform: translateY(-3px);
}

/* Generic section */
.section {
  padding: 2rem 0;
  background: var(--background-color);
}

.section-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 1rem;
  text-align: center;
}

.section-subtitle {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  font-size: 1.1rem;
  color: var(--muted-text);
}

/* Cards */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.card {
  background: var(--light-color);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  flex: 1 1 280px;
  max-width: 360px;
  transition: transform 0.25s, box-shadow 0.25s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card-icon {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

/* Contact icons have a smaller size and inline spacing so they align neatly
   with text in the contact details. */
.contact-icon {
  font-size: 1.2rem;
  color: var(--primary-color);
  margin-right: 0.5rem;
}

.card-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 0.5rem;
}

.card-text {
  font-size: 1rem;
  color: var(--muted-text);
  line-height: 1.5;
}

/* Portfolio */
.portfolio-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.portfolio-item:hover img {
  transform: scale(1.05);
}

.portfolio-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  background: rgba(63, 61, 86, 0.7);
  color: #fff;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.3s;
}

.portfolio-item:hover .portfolio-overlay {
  transform: translateY(0);
}

/* About Page: Two column layout */
.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  align-items: center;
  justify-content: center;
}

.column {
  flex: 1 1 400px;
  min-width: 280px;
}
.about-card {
  display: flex;
  flex-direction: column;
  background: var(--light-color);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  flex: 1 1 280px;
  max-width: 360px;
  min-height: 500px;
  transition: transform 0.25s, box-shadow 0.25s;
  /* Remove height: 100%; */
}

.about-contact-icon {
  font-size: 1.2rem;
  color: var(--primary-color);
  margin-right: 0.5rem;
  min-height: 1000px; /* or whatever size you want */

}

.about-card-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 0.5rem;
}

.pricing-format {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 0.5rem;
  margin-top: auto;           /* 👈 pushes it to the bottom in a flex column parent */
}

.about-card-features {
  list-style: none;
  padding: 0;
  margin: 1em 0 1.2em 0;
}

.about-card-features li {
  display: flex;
  justify-content: space-between;   /* Text left, icon right */
  align-items: center;
  padding: 0.5em 0;                /* Vertical spacing between lines */
  border-bottom: 1px solid #eee;   /* Optional: light divider */
}

.feature-text {
  flex: 1;
}

.feature-icon {
  font-size: 1.2em;
  margin-left: 10px;
}


.about-card-text {
  font-size: 1rem;
  color: var(--muted-text);
  line-height: 1.5;
}

/* Contact section */
.contact-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.contact-info,
.contact-form,
.contact-result {
  background: var(--light-color);
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  padding: 2rem;
  flex: 1 1 320px;
  min-width: 280px;
}

.contact-info h3 {
  color: var(--accent-color);
  margin-bottom: 1rem;
}

.contact-info p {
  margin-bottom: 0.8rem;
  color: var(--muted-text);
  font-size: 0.95rem;
}

.contact-info a {
  color: var(--primary-color);
  font-weight: 500;
}

.contact-form label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--accent-color);
  font-weight: 500;
  font-size: 0.95rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e0ddf2;
  border-radius: 0.5rem;
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--dark-text);
  background: #faf8ff;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  background: #fff;
}

.contact-form button {
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 2rem;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s, transform 0.2s;
}

.contact-form button:hover {
  background: var(--accent-color);
  transform: translateY(-3px);
}

.contact-result {
  text-align: center;
  color: var(--accent-color);
  font-size: 1.1rem;
}

/* Footer */
footer {
  background: var(--light-color);
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--muted-text);
  font-size: 0.9rem;
  border-top: 2px solid var(--primary-color);
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .navbar {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    height: 70px;
    padding: 0;
  }
  .hero {
    height: 60vh;
  }
  .hero-title {
    font-size: 2.3rem;
  }
  .hero-subtitle {
    font-size: 1.1rem;
  }
}

@media (max-width: 600px) {
  .hero-title {
    font-size: 1.8rem;
  }
  .section-title {
    font-size: 1.6rem;
  }
  .card {
    padding: 1.5rem;
  }
}

/* Default (desktop) */
.hamburger {
  display: none;           /* Hidden by default (for desktop) */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 100;
  transition: all 0.2s;
  margin-left: auto;
}

.hamburger span {
  display: block;
  width: 26px;
  height: 4px;
  margin: 4px 0;
  background: var(--primary-color, #152f5f);
  border-radius: 2px;
  transition: all 0.35s cubic-bezier(.72,.08,.58,1);
  position: relative;
}

/* Hamburger animation for 'X' */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(2px, 2px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(2px, -2px);
}

/* Mobile View */
@media (max-width: 768px) {
  .nav-links {
    display: flex;
    flex-direction: column;
    background: var(--light-color);
    position: absolute;
    top: 70px;
    right: 0;
    width: 200px;  /*was 220 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateX(0px);  /*was 220 */
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(.72,.08,.58,1), opacity 0.25s;
    z-index: 101;
  }
  .nav-links.active {
    transform: translateX(0);       /* Slide in to view */
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links li {
    text-align: right;
    padding: 1rem;
  }
  .hamburger {
    display: flex; 
    margin-left: auto;  /*  Show hamburger on small screens */
  }
  .navbar {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    height: 70px;
    padding: 0;
  }
  .logo {
    margin-left: 10px; /* Slightly nudge logo left */
  }

  .nav-links li {
    text-align: right;
    padding: 1rem;
  }
}