:root {

--bg-color: #f3ecde;
--card-bg: #f3ecde;

--primary-black: #183451;
--secondary-gray: #494747;

--accent-color: #a9501c;

--transition: all 0.3s ease;

}

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

body{

font-family: Inter, sans-serif;

background:var(--bg-color);

color:var(--primary-black);

line-height:1.8;

}

/* ---------------- */
/* NAVBAR */
/* ---------------- */

.navbar{

width:calc(100% - 20px);

height:60px;

margin:10px;

background:#183451;
border-radius:45px;

display:flex;

justify-content:center;

align-items:center;

position:sticky;

top:10px;
z-index:1000;

}

.nav-links{

display:flex;

gap:70px;

}

.nav-links a{

text-decoration:none;

color:white;

font-weight:600;

transition:var(--transition);

}

.nav-links a:hover{

color:#fad60c;

}

/* ---------------- */
/* MOBILE MENU */
/* ---------------- */

.menu-btn{

display:none;

width:30px;

height:30px;

border:none;

background:url("more.png") center/contain no-repeat;

cursor:pointer;

}

.dropdown{

width:100%;

display:flex;

justify-content:center;

position:relative;

}

.dropdown-content{

display:none;

position:center;

top:5px;

width:370px;

background:black;

padding:20px;

border-radius:45px;

text-align:center;

z-index:999;

}

.dropdown-content a{

display:block;

padding:15px;

text-decoration:none;

color:white;

}

.dropdown-content.show{

display:block;

animation:growDown .4s ease forwards;

}

/* ---------------- */
/* HERO */
/* ---------------- */

.hero-carousel{

width:calc(100% - 20px);

height:600px;

margin:20px auto;

border-radius:90px;

overflow:hidden;

}

.carousel-track{

display:flex;

width:300%;

height:100%;

animation:slideShow 18s infinite;

}

.hero-slide{

flex:1;

display:flex;

justify-content:center;

align-items:center;

}

.hero-slide h1{

    background: rgba(0, 0, 0, 0.5); /* black at 50% opacity */

color: white;

padding: 10px 20px;

border-radius: 8px;

display: inline-block;

font-size:2rem;

font-weight:800;

letter-spacing:-2px;

position:center;

}

.hero-slide:nth-child(1){
    background-color: #183451;
background-image: url('camp1.jpeg');
background-size: cover;
}

.hero-slide:nth-child(2){
background-image: url('camp2.jpeg');
background-size: cover;
}

.hero-slide:nth-child(3){
background-image: url('camp3.jpeg');
background-size: cover;
}

/* ---------------- */
/* TYPOGRAPHY */
/* ---------------- */

.intro,
.content-section{

max-width:900px;

margin:80px auto;

padding:25px 25px;
}

h2{

font-size:3rem;

margin-bottom:20px;
display:flex;

align-items:center;

}

h2::before{

content:"";

width:4px;

height:25px;

background:var(--accent-color);

margin-right:15px;

}

p{

font-size:1.1rem;

color:var(--secondary-gray);

}

/* ---------------- */
/* MOVING BOXES */
/* ---------------- */

.container{

display:flex;

gap:10px;

padding:10px;
}

.box{

flex:1;

height:450px;

border-radius:90px;

background:#a9501c;

display:flex;

justify-content:center;
align-items:center;

font-size:1rem;

font-weight:700;

transition:.4s ease;

cursor:pointer;

}

.box:nth-child(2){

background:#a9501c;

}

.box:nth-child(3){

background:#a9501c;

}

.box:hover{

transform:translateY(-15px);

}

/* ---------------- */
/* FOOTER */
/* ---------------- */

.footer{

margin:100px auto 30px;

width:calc(100% - 20px);

padding:50px;

border-radius:60px;

background:#183451;

text-align:center;

}

/* ---------------- */
/* RESPONSIVE */
/* ---------------- */

@media(max-width:1000px){

.container{
flex-direction:column;
}

.box{
height:250px;
}

}

@media(max-width:600px){

.nav-links{
display:none;
}

.menu-btn{
display:block;
}

.hero-slide h1{
font-size:2.5rem;
}

.hero-carousel{
height:400px;
}

}

/* ---------------- */
/* ANIMATIONS */
/* ---------------- */

@keyframes growDown {

0%{
transform:translateX(-50%) scaleY(0);
}

100%{
transform:translateX(-50%) scaleY(1);
}

}

@keyframes slideShow {

0%,30%{
transform:translateX(0);
}

33%,63%{
transform:translateX(-33.333%);
}

66%,96%{
transform:translateX(-66.666%);
}

100%{
transform:translateX(0);
}

}