/* =========================
   GLOBAL RESET & VARIABLES
========================= */

:root {
  --bg-dark: #212421;
  --bg-light: #fef6e6;
  --primary: #f1a63b;
  --text-main: #fef6c6;
  --text-muted: #d9d1a5;
  --card-bg: #d4c5a1;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --transition: 0.3s ease;
}

* {
  box-sizing: border-box;
}

body {
  /* margin: 0; */
  font-family: "Roboto Flex", sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-main);
  line-height: 1.6;

}

img {
  max-width: 100%;
  display: block;
}

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

button {
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
  background-color: var(--primary);
  color: #000;
  transition: var(--transition);
}

button:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* =========================
   NAVBAR
========================= */

nav {
  height: 90px;
  display: flex;
  align-items: center;
}

nav ul {
  width: 90%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  list-style: none;
    @media (max-width:600px) {
    font-size: 12px;
    gap: 10px;
    
  }
}

nav ul li {
  font-size: 18px;
  @media (max-width:600px) {
    font-size: 10px;
    gap: 6px;
    
  }
}

#logo a {
  font-size: 36px;
  font-family: "DM Serif Display", serif;
    @media (max-width:600px) {
    font-size: 30px;
    gap: 5px;
    
  }
  /* margin-right: auto; */
}

nav span {
  margin-left: 20px;
  font-size: 14px;
  cursor: pointer;
}

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

header {
  width: 90%;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 80px 0;
 
}

#header-txt span {
  color: var(--primary);
  letter-spacing: 2px;
}

#header-txt h1 {
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.2;
}

#arrow {
  font-size: 32px;
  margin-top: 20px;
  cursor: pointer;
  transition: var(--transition);
}

#arrow:hover {
  transform: translateY(6px);
}

.header-img img {
  border-radius: var(--radius-lg);
}

/* =========================
   ABOUT
========================= */

#about {
  width: 85%;
  margin: 120px auto;
  display: flex;
  gap: 80px;

  
  
}

#st-about span {
  color: var(--primary);
  letter-spacing: 3px;
}

#st-about p {
  font-size: clamp(32px, 4vw, 64px);
  font-family: "DM Serif Display", serif;
}

#nd-about p {
  font-size: 18px;
  color: var(--text-muted);
}

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

#three {
  padding: 120px 8%;
   /* display: flex;
 @media (max-width:600px) {
    flex-direction: column;
    
  }  */
}

#three-st span {
  color: var(--primary);
  letter-spacing: 3px;
}


#three-st span {
  color: var(--primary);
  letter-spacing: 3px;
}

#three-st h2 {
  font-size: 48px;
  @media (max-width:600px) {
    font-size: 38px;
    
  }
}

#three-nd {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  margin-top: 60px;
   @media (max-width:600px) {
    grid-template-columns: repeat(1, 1fr);
    
  } 

}

#three-nd div {
  background-color: #1b1d1b;
  padding: 30px;
  border-radius: var(--radius-md);
}

#three-nd h3 {
  font-size: 24px;
  margin-top: 10px;
}

/* =========================
   CLIENTS
========================= */

#four {
  padding: 120px 8%;
}

#four-st span {
  color: var(--primary);
}

#four-st h2 {
  font-size: 48px;
  @media (max-width:600px) {
    font-size: 35px;
    
  }}

.contain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 40px;
  margin-top: 60px;
  align-items: center;
  background-color: #fef6c6;
  
  
}

/* =========================
   TESTIMONIALS
========================= */

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

.person {
  background-color: var(--card-bg);
  color: #000;
  padding: 30px;
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.person:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.person img {
  width: 60px;
  border-radius: 50%;
}

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

.fifth {
  padding: 120px 10%;
  text-align: center;
  background-color: #1b1d1b;
}

.fifth div {
  font-size: 36px;
  font-family: "DM Serif Display", serif;
  margin-bottom: 20px;
}

.fifth p {
  max-width: 700px;
  margin: auto;
  color: var(--text-muted);
}

/* =========================
   FOOTER (ENHANCED)
========================= */

footer {
  background-color: #000;
  color: var(--text-main);
  padding: 80px 10%;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  
}
li{
    list-style: none;
}

footer .one {
  font-family: "DM Serif Display", serif;
  font-size: 32px;
}

footer .two {
  font-size: 16px;
  color: var(--text-muted);
}

footer .links a {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
}

footer .social i {
  font-size: 22px;
  margin-right: 15px;
  cursor: pointer;
  transition: var(--transition);
  
}

footer .social i:hover {
  color: var(--primary);
}

footer .copy {
  grid-column: 1 / -1;
  margin-top: 40px;
  font-size: 14px;
  color: #777;
  text-align: center;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {
  header,
  #about {
    flex-direction: column;

  }

  footer {
    grid-template-columns: 1fr;
    text-align: center;
  }
}