:root {
--orange: #FF8A3D;
--pink: #FF6B8B;
--mint: #5CEB9B;
--violet: #8B4CFE;
--aqua: #4CDFFF;
}


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


body {
  font-family: "Montserrat", sans-serif;
  background: #ffffff;
  color: black;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, .logo span {
  font-family: "Poppins", sans-serif;
}

h1 {
  font-weight: 700;
}

h2 {
  font-weight: 600;
}

img {
max-width: 100%;
height: auto;
}


.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 40px;
background: #ffffff;
position: sticky;
top: 0;
z-index: 10;
}


@media (max-width: 768px) {
.navbar {
flex-direction: column;
gap: 12px;
padding: 16px 20px;
}


.navbar nav a {
margin: 0 12px;
}
}


.logo {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
}


.logo img {
height: 40px;
}

.navbar nav a {
margin-left: 24px;
text-decoration: none;
color: black;
font-weight: 500;
}

.navbar nav a:hover {
color: var(--orange);
}


.section {
max-width: 900px;
margin: 0 auto;
padding: 80px 20px;
}

@media (max-width: 768px) {
.section {
padding: 60px 16px;
}
}


.hero h1 {
font-size: 2.8rem;
color: var(--orange);
}


@media (max-width: 768px) {
.hero h1 {
font-size: 2rem;
}
}

.hero p {
max-width: 600px;
margin-top: 16px;
font-size: 1.1rem;
}


h2 {
font-size: 2rem;
margin-bottom: 20px;
color: var(--violet);
}

.shape {
position: absolute;
opacity: 0.18;
z-index: -1;
}


.circle {
width: 200px;
height: 200px;
border-radius: 50%;
}


.square {
width: 160px;
height: 160px;
}


.triangle {
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 140px solid var(--orange);
}


.aqua { background: var(--aqua); top: 120px; left: -60px; }
.mint { background: var(--mint); bottom: 150px; right: -40px; }
.pink { background: var(--pink); top: 420px; right: 60px; }
.orange { top: 700px; left: 100px; }


@media (max-width: 768px) {
.shape {
opacity: 0.12;
transform: scale(0.7);
}
}