/* =========================
   M&N AGENCY
   MAIN STYLES
========================= */

:root {

  --navy: #101828;
  --blue: #1d4ed8;
  --orange: #ff7849;
  --light-orange: #fff3ed;
  --light: #f7f9fc;
  --white: #ffffff;
  --text: #263247;
  --muted: #667085;
  --border: #e6eaf0;

}


/* =========================
   RESET
========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color: var(--text);

  line-height: 1.6;

  background: var(--white);

}


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


img {
  max-width: 100%;
}


/* =========================
   HEADER
========================= */

header {

  position: sticky;

  top: 0;

  z-index: 1000;

  background:
    rgba(255,255,255,0.95);

  backdrop-filter: blur(15px);

  border-bottom:
    1px solid var(--border);

}


.navbar {

  width: 92%;

  max-width: 1150px;

  margin: auto;

  height: 75px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}


.logo {

  font-size: 1.5rem;

  font-weight: 800;

  letter-spacing: -1px;

}


.logo span {

  color: var(--orange);

}


.nav-links {

  display: flex;

  gap: 28px;

  align-items: center;

}


.nav-links a {

  font-size: 0.9rem;

  font-weight: 600;

  color: #344054;

}


.nav-links a:hover {

  color: var(--orange);

}


.menu-button {

  display: none;

  background: none;

  border: none;

  font-size: 1.8rem;

  cursor: pointer;

}


/* =========================
   HERO
========================= */

.hero {

  padding:
    100px 5% 90px;

  background:

    radial-gradient(
      circle at 90% 10%,
      #fff0e8,
      transparent 35%
    ),

    linear-gradient(
      180deg,
      #ffffff,
      #f9fbff
    );

}


.hero-content {

  max-width: 1150px;

  margin: auto;

  display: grid;

  grid-template-columns:
    1.15fr 0.85fr;

  gap: 70px;

  align-items: center;

}


.small-title {

  color: var(--orange);

  font-size: 0.75rem;

  letter-spacing: 2px;

  font-weight: 800;

  margin-bottom: 15px;

}


.hero h1 {

  font-size:
    clamp(2.8rem, 6vw, 5rem);

  line-height: 1.02;

  letter-spacing: -3px;

  color: var(--navy);

}


.hero h1 span {

  color: var(--orange);

}


.hero-description {

  max-width: 650px;

  margin:
    25px 0;

  font-size: 1.1rem;

  color: var(--muted);

}


.hero-buttons {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

}


.button {

  display: inline-flex;

  justify-content: center;

  align-items: center;

  padding:
    13px 21px;

  border-radius: 10px;

  font-weight: 800;

  border: 1px solid transparent;

  transition: 0.2s;

}


.button:hover {

  transform:
    translateY(-2px);

}


.primary {

  background:
    var(--orange);

  color:
    white;

  box-shadow:
    0 10px 25px
    rgba(255,120,73,.2);

}


.secondary {

  background:
    white;

  border-color:
    var(--border);

}


.dark {

  background:
    var(--navy);

  color:
    white;

}


.white {

  background:
    white;

  color:
    var(--navy);

}


/* HERO CARD */

.hero-card {

  background:
    var(--navy);

  color:
    white;

  padding:
    45px;

  border-radius:
    30px;

  min-height:
    450px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-end;

  box-shadow:
    0 25px 60px
    rgba(16,24,40,.2);

}


.hero-card > p {

  color:
    #b8c1d1;

  font-size:
    .75rem;

  letter-spacing:
    2px;

  position:
    absolute;

  margin-top:
    -360px;

}


.hero-card h2 {

  font-size:
    2.5rem;

  line-height:
    1.1;

  margin-bottom:
    30px;

}


.hero-card-item {

  padding:
    15px 0;

  border-top:
    1px solid
    rgba(255,255,255,.15);

  display:
    flex;

  gap:
    15px;

}


.hero-card-item strong {

  color:
    #ffad87;

}


/* =========================
   SECTIONS
========================= */

.section {

  padding:
    100px 5%;

}


.section.light {

  background:
    var(--light);

}


.two-column {

  max-width:
    1100px;

  margin:
    auto;

  display:
    grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap:
    90px;

}


.section h2 {

  color:
    var(--navy);

  font-size:
    clamp(2rem,4vw,3.3rem);

  line-height:
    1.1;

  letter-spacing:
    -2px;

}


.about-text {

  color:
    var(--muted);

  font-size:
    1.05rem;

}


.about-text p {

  margin-bottom:
    18px;

}


/* =========================
   SERVICES
========================= */

.section-heading {

  text-align:
    center;

  max-width:
    720px;

  margin:
    auto auto 50px;

}


.section-heading > p:last-child {

  color:
    var(--muted);

}


.service-grid {

  max-width:
    1100px;

  margin:
    auto;

  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    22px;

}


.service-card {

  background:
    white;

  border:
    1px solid
    var(--border);

  padding:
    32px;

  border-radius:
    22px;

  transition:
    .2s;

}


.service-card:hover {

  transform:
    translateY(-5px);

  box-shadow:
    0 20px 45px
    rgba(16,24,40,.08);

}


.service-icon {

  font-size:
    2.3rem;

  margin-bottom:
    20px;

}


.service-card h3 {

  color:
    var(--navy);

  font-size:
    1.4rem;

  margin-bottom:
    10px;

}


.service-card p {

  color:
    var(--muted);

  font-size:
    .95rem;

}


.service-card ul {

  list-style:
    none;

  margin:
    20px 0;

}


.service-card li {

  margin:
    8px 0;

}


.service-card li::before {

  content:
    "✓";

  color:
    var(--orange);

  font-weight:
    900;

  margin-right:
    8px;

}


.service-card > a {

  color:
    var(--orange);

  font-weight:
    800;

}


/* =========================
   AUDIENCE
========================= */

.audience {

  max-width:
    1100px;

  margin:
    auto;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    70px;

  align-items:
    center;

}


.audience.reverse {

  grid-template-columns:
    1fr 1fr;

}


.audience-content > p:not(.small-title) {

  color:
    var(--muted);

  margin:
    18px 0;

}


.check-list {

  list-style:
    none;

  margin:
    25px 0;

}


.check-list li {

  margin:
    12px 0;

}


.check-list li::first-letter {

  color:
    var(--orange);

}


.dark-card {

  background:
    var(--navy);

  color:
    white;

  border-radius:
    28px;

  padding:
    45px;

  min-height:
    350px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    18px;

}


.dark-card span {

  letter-spacing:
    2px;

  color:
    #c3ccda;

}


.dark-card strong {

  color:
    #ffad87;

  font-size:
    2rem;

}


/* PARENT CARD */

.parent-card {

  background:
    var(--light-orange);

  border:
    1px solid
    #ffd9c7;

  padding:
    40px;

  border-radius:
    28px;

}


.parent-card div {

  display:
    flex;

  align-items:
    center;

  gap:
    20px;

  padding:
    22px 0;

  border-bottom:
    1px solid
    #ffd9c7;

}


.parent-card strong {

  font-size:
    2.4rem;

  color:
    var(--orange);

}


.parent-card span {

  font-weight:
    700;

}


/* =========================
   BUSINESS
========================= */

.business-grid {

  max-width:
    1100px;

  margin:
    auto;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    80px;

}


.business-description {

  color:
    var(--muted);

  margin:
    20px 0;

}


.offer-card {

  margin-top:
    30px;

  padding:
    30px;

  border-radius:
    23px;

  background:
    var(--light-orange);

  border:
    1px solid
    #ffd9c7;

}


.offer-label {

  color:
    var(--orange);

  font-weight:
    900;

  letter-spacing:
    1.5px;

  font-size:
    .75rem;

}


.offer-card h3 {

  font-size:
    1.9rem;

  margin:
    10px 0;

  color:
    var(--navy);

}


.offer-card p {

  color:
    var(--muted);

}


.mockup {

  background:
    white;

  border:
    1px dashed
    var(--orange);

  padding:
    18px;

  border-radius:
    12px;

  margin:
    20px 0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

}


.mockup strong {

  color:
    var(--orange);

}


.mockup span {

  color:
    var(--muted);

  font-size:
    .9rem;

}


.process-card {

  border:
    1px solid
    var(--border);

  border-radius:
    25px;

  padding:
    30px;

}


.process-card > h3 {

  font-size:
    1.5rem;

  margin-bottom:
    10px;

}


.process {

  display:
    flex;

  gap:
    20px;

  padding:
    20px 0;

  border-bottom:
    1px solid
    var(--border);

}


.process strong {

  color:
    var(--orange);

}


.process h4 {

  color:
    var(--navy);

}


.process p {

  color:
    var(--muted);

  font-size:
    .9rem;

}


/* =========================
   CTA
========================= */

.cta {

  padding:
    75px 5%;

  background:
    var(--navy);

  color:
    white;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    30px;

}


.cta > div {

  max-width:
    750px;

}


.cta h2 {

  color:
    white;

  font-size:
    clamp(2rem,4vw,3.2rem);

}


.cta p:not(.small-title) {

  color:
    #b9c2d0;

  margin-top:
    10px;

}


/* =========================
   CONTACT
========================= */

.contact-grid {

  max-width:
    1100px;

  margin:
    auto;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    80px;

}


.contact-description {

  color:
    var(--muted);

  margin:
    20px 0;

}


.contact-details {

  display:
    grid;

  gap:
    15px;

  margin-top:
    25px;

}


.contact-details a {

  display:
    flex;

  gap:
    15px;

  align-items:
    center;

  padding:
    15px;

  border:
    1px solid
    var(--border);

  border-radius:
    12px;

}


.contact-details a:hover {

  border-color:
    var(--orange);

}


.contact-details span {

  display:
    flex;

  flex-direction:
    column;

}


.contact-details strong {

  color:
    var(--navy);

}


/* CONTACT FORM */

.contact-form {

  background:
    var(--light);

  padding:
    30px;

  border-radius:
    25px;

}


.contact-form h3 {

  font-size:
    1.5rem;

  margin-bottom:
    20px;

}


.contact-form label {

  display:
    block;

  font-weight:
    700;

  margin-bottom:
    17px;

}


.contact-form input,
.contact-form select,
.contact-form textarea {

  width:
    100%;

  margin-top:
    7px;

  padding:
    13px;

  border:
    1px solid
    var(--border);

  border-radius:
    10px;

  background:
    white;

  font-family:
    inherit;

  font-size:
    1rem;

}


.contact-form textarea {

  resize:
    vertical;

}


/* =========================
   FOOTER
========================= */

footer {

  border-top:
    1px solid
    var(--border);

  padding:
    35px 5%;

}


.footer-content {

  max-width:
    1100px;

  margin:
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

}


.footer-content p {

  color:
    var(--muted);

  font-size:
    .85rem;

}


.footer-links {

  display:
    flex;

  gap:
    20px;

  font-size:
    .9rem;

}


.footer-links a:hover {

  color:
    var(--orange);

}


/* =========================
   MOBILE
========================= */

@media(max-width:850px) {


  .menu-button {

    display:
      block;

  }


  .nav-links {

    display:
      none;

    position:
      absolute;

    top:
      75px;

    left:
      0;

    right:
      0;

    background:
      white;

    padding:
      20px 5%;

    border-bottom:
      1px solid
      var(--border);

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .nav-links.active {

    display:
      flex;

  }


  .hero-content,
  .two-column,
  .audience,
  .audience.reverse,
  .business-grid,
  .contact-grid {

    grid-template-columns:
      1fr;

  }


  .hero {

    padding-top:
      70px;

  }


  .hero-card {

    min-height:
      380px;

  }


  .service-grid {

    grid-template-columns:
      1fr;

  }


  .section {

    padding:
      70px 5%;

  }


  .cta {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .footer-content {

    flex-direction:
      column;

    align-items:
      flex-start;

  }

}