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

.hero {
padding-top: var(--spacing-16);
padding-bottom: var(--spacing-16);
}

.hero__container {
display: grid;

grid-template-columns:
    1fr
    1fr;

align-items: center;

gap: var(--spacing-12);

}

.hero__content {
max-width: 100%;
}

.hero__eyebrow {
margin-bottom: var(--spacing-3);

color: var(--color-primary);

font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.08em;

}


.hero__title {
  margin-bottom: var(--spacing-6);

  font-family: var(--font-family-heading);

  font-weight: 100;
  line-height: var(--line-height-tight);
  text-align: center;

  z-index: 10;
}

.htitle {
  width: 100%;
  left: 0;
  bottom: 460px;
  font-size: var(--font-size-4xl);
  color: var(--color-surface);
text-shadow: 5px 5px 10px black;

}

.hdescription {
width: 100%;
left: 10%;
bottom: 220px;
}

.bannertitle {
    position: absolute
} 

.hero__title span {
    
color: var(--color-primary);
}

.hero__description {

text-align: center;
text-shadow: 5px 5px 10px black;

max-width: 80%;

margin-bottom: var(--spacing-8);

color: var(--color-surface);

font-size: var(--font-size-2xl);
line-height: var(--line-height-relaxed);


}

.hero__actions {
display: flex;
align-items: center;

gap: var(--spacing-4);

}

.hero__image-wrapper {
width: 100%;
}

.hero__image {
display: block;

width: 100%;
height: 660px;

object-fit: cover;

}

/* ========================================
INTRO
======================================== */

.home-intro {
background-color: #e0fde1;
}

.home-intro__container {
display: flex;
justify-content: center;
}

/* ========================================
SECTION HEADING
======================================== */

.section-heading {
max-width: 720px;
}

.random {
    position: relative;
    left: -220px;
}

.section-heading__eyebrow {
margin-bottom: var(--spacing-3);

color: var(--color-primary);

font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.08em;
padding-top: 20px;

}

.section-heading__title {
margin-bottom: var(--spacing-4);

color: var(--color-text);

font-family: var(--font-family-heading);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);

}

.section-heading__description {
color: var(--color-text-secondary);

font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
padding-bottom: 10px;
}

/* ========================================
TOPICS
======================================== */

.home-topics {
background-color: var(--color-background);
}

.home-topics .section-heading {
margin-bottom: var(--spacing-10);
}

.home-topics__grid {
display: grid;

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

gap: var(--spacing-6);

}

/* ========================================
TOPIC CARD
======================================== */

.topic-card {
min-height: 320px;

padding: var(--spacing-8);

background-color: var(--color-background);

border:
    var(--border-width)
    var(--border-style)
    var(--color-border);

border-radius: var(--radius-lg);

transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);

}

.topic-card:hover {
transform: translateY(-4px);

box-shadow: var(--shadow-md);

}

.topic-card__content {
height: 100%;

display: flex;
flex-direction: column;

}

.topic-card__number {
margin-bottom: var(--spacing-6);

color: var(--color-primary);

font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);

}

.topic-card__title {
margin-bottom: var(--spacing-4);

color: var(--color-text);

font-family: var(--font-family-heading);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold);

}

.topic-card__description {
margin-bottom: var(--spacing-6);

color: var(--color-text-secondary);

line-height: var(--line-height-relaxed);

}

.topic-card__link {
margin-top: auto;

color: var(--color-primary);

font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);

transition:
    color var(--transition-normal);

}

.topic-card__link:hover {
color: var(--color-primary-hover);
}

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

.home-cta {
background-color: var(--color-background-secondary);
}

.home-cta__content {
max-width: 720px;

margin: 0 auto;

text-align: center;

margin-top: 15px;

padding-bottom: 15px;

}

.home-cta__eyebrow {
margin-bottom: var(--spacing-3);

color: var(--color-primary);

font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.08em;
padding-top: 5px;

}

.home-cta__title {
margin-bottom: var(--spacing-4);

color: var(--color-text);

font-family: var(--font-family-heading);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);

}

.home-cta__description {
margin-bottom: var(--spacing-8);

color: var(--color-text-secondary);

font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);

}

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

@media (max-width: 900px) {

.hero__container {
    grid-template-columns: 1fr;
}

.hero__content {
    max-width: 100%;
}

.hero__image {
    height: 400px;
}

.home-topics__grid {
    grid-template-columns: 1fr;
}


}

@media (max-width: 600px) {

.hero {
    padding-top: var(--spacing-10);
    padding-bottom: var(--spacing-10);
}

.hero__title {
    font-size: var(--font-size-4xl);
}

.hero__actions {
    flex-direction: column;
    align-items: stretch;
}

.hero__actions .button {
    width: 100%;
}

.hero__image {
    height: 300px;
}


}

.button {
    background-color: var(--color-primary);
    color: var(--color-surface);
    padding: 10px;
}

.button:hover {
    background-color: var(--color-primary-hover);
        color: var(--color-surface);

}

.hbutton {
    bottom: 150px;
    left: 46%;
}

.t2 { 
    font-size: var(--font-size-4xl);
    width: 100%;
    position: absolute;
    bottom: -100px;
    left: -260px;
    color: var(--color-primary);
}