*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Lora,serif;color:#333}
p, .btn, .btn-desktop-btn, .nav-links a, .dropbtn, ul{font-family:Open Sans,sans-serif;color:#333}

.topbar {
    background: linear-gradient(
        to right,
        #457776,
        #a3b79b
    );
  color: white;
  display: flex;
    align-items:center;
  justify-content: space-between;
  padding: 20px 20px;
}

.topbar p{
	color:#fff;
	font-weight:bold;
	font-size:20px;
	}

.navbar {
  background-color: white;
  border-bottom: 7px solid #e9c46a;
  display: flex;
  justify-content: center; /* centers everything horizontally */
  padding: 15.5px 0;
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.topbar img{max-height:150px;}

.nav-links{
	display:flex;
	gap:2rem;
	list-style:none}

.nav-links a{
	padding:20px;
	text-decoration:none;
	color:#59430d;
	font-weight:bold;
	}
	
	a:hover{
		padding:20px;
	text-decoration:none;
	color:#e9c46a}

.dropdown {
	padding-right:20px;
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;
    font-weight:bold;
    border: none;
    outline: none;
    color: #59430d;
    background-color: #fff;
    cursor: pointer;
}

.dropdown:hover .dropbtn {
	display:block;
	    outline: none;
    color: #e9c46a;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: #59430d;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #e9c46a;
}

@media (min-width:901px){
    .dropdown:hover .dropdown-content {
        display: block;
    }
}

.btn{
	background:#457776;
	color:#fff;
	font-weight:bold;
	padding:.9rem 1.5rem;
	border-radius:50px;
	text-decoration:none;
	border:2px solid #fff;
	}
.btn:hover{
	background:#a3b79b;
	color:#335756;
	font-weight:bold;
	padding:.9rem 1.5rem;
	border-radius:50px;
	text-decoration:none;
	border:2px solid #335756;
	}
	
	.btn-desktop-btn{
	background:#457776;
	color:#fff;
	font-weight:bold;
	padding:.9rem 1.5rem;
	border-radius:50px;
	text-decoration:none;
	border:2px solid #fff;
	}
	
.btn-desktop-btn:hover{
	background:#a3b79b;
	color:#335756;
	font-weight:bold;
	padding:.9rem 1.5rem;
	border-radius:50px;
	text-decoration:none;
	border:2px solid #335756;
	}

.hero{
	background:
	linear-gradient(
            rgba(0,0,0,0.5),
            rgba(0,0,0,0.5)
        ),
        url("images/acorns.webp");
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	min-height:700px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:2rem
	}

.hero p{
	color:#e9c46a;
	font-weight:bold;
	font-size:20px;
	}

.hero h1{
	color:#e9c46a;
	font-size:65px;
	}

.hero-buttons{
	display:flex;gap:1rem;justify-content:center;margin-top:1rem
	}
	
	/*About Us*/
	
	.about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;      /* Vertically centers the text */
    gap: 2rem;                /* Space between image and text */

}

.about img {
    width: 100%;
    max-width: 900px;
    height: auto;
}

.about-text {
    flex: 1;                  /* Allows text to fill remaining space */
}

.about h1{
	display:flex;
	align-items: center;      /* Vertical center */
    justify-content: center;  /* Horizontal center */
	box-sizing:border-box;
	color:#254140;
	font-size:65px;
	}
	
.about h1::before, 
.about h1::after {
    content: "";
    display: block;
    width: 50px;          /* Length of underline */
    height: 5px;          /* Thickness */
    background: #457776;  /* Your accent colour */
    border-radius: 2px;
    margin:10px;
}

	
.mission-content{
padding:25px 100px 25px 100px;
}

.mission-content::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("images/woodgrain.webp");
    background-size: cover;
    background-position: center;
    opacity: 0.35;
    z-index: -1;
}	

.mission-content p{  
	font-size:20px;
line-height:30px;
text-align:center;
color:#386160;
}
.philosophy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;      /* Vertically centers the text */
    gap: 2rem;                /* Space between image and text */

}

.philosophy img {
    width: 100%;
    max-width: 900px;
    height: auto;
}

.philosophy-text {
    flex: 1;                  /* Allows text to fill remaining space */
}

.philosophy h1{
	display:flex;
	align-items: center;      /* Vertical center */
    justify-content: center;  /* Horizontal center */
	box-sizing:border-box;
	color:#59430d;
	font-size:65px;
	}
	
.philosophy h1::before, 
.philosophy h1::after {
    content: "";
    display: block;
    width: 50px;          /* Length of underline */
    height: 5px;          /* Thickness */
    background: #e9c46a;  /* Your accent colour */
    border-radius: 2px;
    margin:10px;
}

.philosophy-content2{
background:#f8edd3;
padding:100px 50px 100px 50px;
}

.philosophy-content2 p{
	font-size:20px;
line-height:30px;
text-align:center;
color:#59430d;
padding:10px;
}

.waldorf {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;      /* Vertically centers the text */
    gap: 2rem;                /* Space between image and text */

}

.waldorf img {
    width: 100%;
    max-width: 900px;
    height: auto;
}

.waldorf-text {
    flex: 1;                  /* Allows text to fill remaining space */
}

.waldorf h1{
	display:flex;
	align-items: center;      /* Vertical center */
    justify-content: center;  /* Horizontal center */
	box-sizing:border-box;
	color:#475940;
	font-size:50px;
	}
	.waldorf h2{
	display:flex;
	align-items: center;      /* Vertical center */
    justify-content: center;  /* Horizontal center */
	box-sizing:border-box;
	color:#475940;
	font-size:50px;
	}
	.waldorf3 h1{
	padding:25px 0 20px 50px;
	color:#77946b;
	font-size:30px;
	}
	
.waldorf h1::before, 
.waldorf h1::after {
    content: "";
    display: block;
    width: 50px;          /* Length of underline */
    height: 5px;          /* Thickness */
    background: #a3b79b;  /* Your accent colour */
    border-radius: 2px;
    margin:10px;
}
	
.waldorf2-content{
	background:
        linear-gradient(
            rgba(47,59,43,0.7),
            rgba(47,59,43,0.7)
        ),
        url("images/rocktexture.webp");
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;

padding:100px 50px 100px 50px;
}

.waldorf2-content p{
font-size:20px;
line-height:30px;
text-align:center;
color:#fff;
}

.waldorf3 ul {
	display:grid;

    list-style-type: disc;
    color:#475940;
}

.waldorf3 ul li {
	font-size:20px;
	margin:15px 15px;
    line-height: 1.6;
}

.waldorf3 .two-column-list {
	padding:0 0 50px 150px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:0px 40px;
}

	/*Locations*/
	
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 250px);
  gap: 20px;
  justify-content:center;
  margin:40px auto;
}

.gallery img {
	width:250px;
  height: 250px;
  object-fit: cover;
  border: 7px solid white;
  box-sizing: border-box;
}	

.title-content h1{
	display:flex;
	align-items: center;      /* Vertical center */
    justify-content: center;  /* Horizontal center */
	box-sizing:border-box;
	color:#254140;
	font-size:65px;
	padding-bottom:10px;
	padding-top:50px;
	}
	
	.title-content h2{
	display:flex;
	align-items: center;      /* Vertical center */
    justify-content: center;  /* Horizontal center */
	box-sizing:border-box;
	color:#457776;
	font-size:30px;
	}
	
	.title2-content h1{
	display:flex;
	align-items: center;      /* Vertical center */
    justify-content: center;  /* Horizontal center */
	box-sizing:border-box;
	color:#2c2107;
	font-size:65px;
	padding-bottom:10px;
	padding-top:50px;
	}
	
	.title2-content h2{
	display:flex;
	align-items: center;      /* Vertical center */
    justify-content: center;  /* Horizontal center */
	box-sizing:border-box;
	color:#856414;
	font-size:30px;
	}
	
.title-content h1::before, 
.title-content h1::after {
    content: "";
    display: block;
    width: 50px;          /* Length of underline */
    height: 5px;          /* Thickness */
    background: #457776;  /* Your accent colour */
    border-radius: 2px;
    margin:10px;
}

.title2-content h1::before, 
.title2-content h1::after {
    content: "";
    display: block;
    width: 50px;          /* Length of underline */
    height: 5px;          /* Thickness */
    background: #856414;  /* Your accent colour */
    border-radius: 2px;
    margin:10px;
}

.title-content::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
	linear-gradient(
            rgba(255,255,255,0.1),
            rgba(255,255,255,0.1)
        ),
        url("images/woodgrain.webp");
    background-size: cover;
    background-position: center;
    z-index: -1;
}	

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 200px);
    gap: 10px;
    padding: 10px;
  }

  .gallery img {
    width: 200px;
    height: 200px;
  }
  
  .title-content h1{
text-align:center;  
  }
  
  .title-content h1::before, 
.title-content h1::after {
text-align:center;
}
}

.program-hours{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;

    background-color:#457776;
    padding:30px 100px 30px 100px;
}

.program{
    text-align:center;
}

.program h3{
	color:#fff;
    margin-bottom:10px;
}

.program h4{
    color:#e9c46a;
    margin-bottom:20px;
}

.program ul{
    list-style:none;
    padding:0;
}

.program li{
	color:#fff;
    margin:10px 0;
}

/*Programs*/

.locations{
	background:
	linear-gradient(
            rgba(0,0,0,0.5),
            rgba(0,0,0,0.5)
        ),
        url("images/house6.webp");
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	min-height:600px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:2rem
	}
	
	.locations2{
	background:
	linear-gradient(
            rgba(0,0,0,0.5),
            rgba(0,0,0,0.5)
        ),
        url("images/cap4.webp");
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	min-height:600px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:2rem
	}

.locations h1{
	color:#e9c46a;
	font-size:65px;
	}
	
	.locations2 h1{
	color:#fff;
	font-size:65px;
	}
	
	.downtown h1{
	color:#77946b;
	font-size:65px;
	padding-bottom:20px;
	}
	
	.locations h2{
	color:#e9c46a;
	font-size:30px;
	font-family:Open Sans, sans-serif;
	padding-bottom:20px;
	}
	
	.locations2 h2{
	color:#fff;
	font-size:30px;
	font-family:Open Sans, sans-serif;
	padding-bottom:20px;
	}
	
	.downtown-content{
	background-color:#fff;
padding:50px 100px 50px 100px;
}

.downtown-content p{  
	font-size:20px;
line-height:30px;
text-align:left;
color:#666;
}

.card-container {
  display: flex;
  gap: 50px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top:50px;
}

.circle-card {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 10px solid #856414;
  background: #e9c46a;
  color: white;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  transition: transform 0.2s ease;
}

.circle-card h3 {
font-size:25px;
color:#856414;
}

.circle-card h4 {
font-size:15px;
color:#2c2107;
}

.circle-card2 {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 10px solid #2f3b2b;
  background: #77946b;
  color: white;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  transition: transform 0.2s ease;
}

.circle-card2 h3 {
font-size:25px;
color:#fff;
}

.circle-card2 h4 {
font-size:15px;
color:#2f3b2b;
}

	.divider-content{
	background-color:#856414;
padding:20px 100px 20px 100px;
}

/*Contacts*/

.contact-section{
    max-width:1200px;
    margin:40px auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:80px;
    padding:40px;
}

.contact-section::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
	linear-gradient(
            rgba(94,161,160,0.3),
            rgba(94,161,160,0.3)
        ),
        url("images/woodgrain.webp");
    background-size: cover;
    background-position: center;
    z-index: -1;
}	

.contact-info{
    flex:1;
}

.contact-info h1{
    font-size:4rem;
    margin-bottom:20px;
    color:#254140;
}

.contact-form{
    flex:1;
    background:white;
    padding:35px;
    border-radius:3px;
    box-shadow: 8px 8px 5px rgba(0, 0, 0, 0.4);
}

.row{
    display:flex;
    gap:20px;
}

.input-group{
    display:flex;
    flex-direction:column;
    margin-bottom:20px;
    width:100%;
}

label{
	color:#254140;
    margin-bottom:8px;
    font-weight:600;
}

.contact-form input,
select,
textarea{
    width:100%;
    padding:14px;
    border:1px solid #457776;
    margin-bottom:10px;
    border-radius:3px;
    font-size:16px;
}

textarea{
	height:200px;
    resize:vertical;
}

.contact-form button{
    background:#457776;
    color:white;
    border:none;
    padding:14px 28px;
    border-radius:3px;
    cursor:pointer;
    font-size:16px;
    font-weight:bold;
    transition:.3s;
}

.contact-form button:hover{
    background:#dea721;
}
	
footer {
    border-top: 5px solid #e9c46a;
    padding: 20px;
    background: #203736;
    text-align:center;
}

.footer-content p {
	font-size:12px;
    color: #fff;
}

.razenet {
color:#fff;
}

.razenet:hover {
color:#e9c46a;
padding:0;
}

.hamburger{display:none;background:none;border:none;cursor:pointer;z-index:20}
.hamburger span{display:block;width:28px;height:3px;background:#333;margin:5px 0;transition:.3s}

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

/* ============================
   Tablet & below (<=1024px)
   ============================ */
@media (max-width:1024px){

    .topbar{padding:15px 20px}
    .topbar img{max-height:100px}

    .hero{min-height:500px}
    .hero h1{font-size:48px}
    .hero p{font-size:18px}

    .about h1,
    .programs h1{font-size:48px}

    .philosophy h1{font-size:48px}

    .waldorf h1, .waldorf h2{font-size:36px}

    .programs h3, .programs h5{font-size:42px}

    .locations h1, .downtown h1{font-size:48px}

    .mission-content{padding:25px 50px}
    .philosophy-content2{padding:60px 40px}
    .waldorf2-content{padding:60px 40px}
    .baby-content, .toddler-content, .kids-content{padding:40px 60px}
    .downtown-content{padding:40px 60px}

    .waldorf3 .two-column-list{padding-left:50px;padding-right:20px}

    .contact-section{gap:40px;padding:30px}
    .contact-info h1{font-size:3rem}
}

/* ============================
   Mobile navigation (<=900px)
   ============================ */
@media (max-width:900px){
    .hamburger{display:block}
    .desktop-btn{display:none}

    .navbar{position:relative;padding:12px 20px;justify-content:space-between}

    .navbar .nav-links{
        display:none;
        flex-direction:column;
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#fff;
        padding:.5rem 0;
        box-shadow:0 10px 20px rgba(0,0,0,.08);
        gap:0;
        z-index:15;
    }

    .navbar .nav-links.active{
        display:flex;
    }

    .nav-links li{width:100%}

    .nav-links a{
        display:block;
        padding:16px 20px;
        border-bottom:1px solid #f2f2f2;
    }

    .dropdown{
        float:none;
        width:100%;
        padding-right:0;
    }

    .dropdown .dropbtn{
        width:100%;
        text-align:left;
        padding:16px 20px;
        border-bottom:1px solid #f2f2f2;
    }

    .dropdown-content{
        display:none;
        position:static;
        box-shadow:none;
        width:100%;
        background:#faf6ea;
    }

    .dropdown-content.show{
        display:block;
    }

    .dropdown-content a{
        padding:12px 20px 12px 35px;
    }
}

/* ============================
   Small tablets / large phones (<=768px)
   ============================ */
@media (max-width:768px){

    .about, .philosophy, .waldorf, .programs{
        grid-template-columns:1fr;
        gap:1rem;
        text-align:center;
    }

    .about img, .philosophy img, .waldorf img, .programs img, .kids img{
        max-width:400px;
        margin:0 auto;
    }

    .program-hours{
        grid-template-columns:1fr 1fr;
        padding:30px 40px;
    }

    .contact-section{
        flex-direction:column;
        padding:20px;
        margin:20px auto;
    }

    .contact-info{text-align:center}

    .row{flex-direction:column;gap:0}
}

/* ============================
   Phones (<=600px)
   ============================ */
@media (max-width:600px){

    .topbar{
        padding:12px 15px;
        flex-wrap:wrap;
        gap:10px;
        
        text-align:center;
    }
    .topbar img{max-height:70px; align-content:left;}
    .topbar p{font-size:16px}

    .btn-desktop-btn, .btn{
        padding:.7rem 1.1rem;
        font-size:14px;
    }

    .hero{min-height:600px;padding:1.5rem}
    .hero h1{font-size:32px;line-height:1.2}
    .hero p{font-size:16px}
    .hero-buttons{flex-direction:column;width:100%;max-width:280px;margin-left:auto;margin-right:auto}
    .hero-buttons .btn{text-align:center}

    .about h1, .programs h1, .philosophy h1{
        font-size:34px;
    }
    .about h1::before, .about h1::after,
    .philosophy h1::before, .philosophy h1::after,
    .waldorf h1::before, .waldorf h1::after,
    .programs h1::before, .programs h1::after,
    .programs h3::before, .programs h3::after,
    .programs h5::before, .programs h5::after{
        width:30px;
    }
    
    .about img, .philosophy img, .waldorf img{max-width:600px}

    .waldorf h1, .waldorf h2{font-size:26px}
    .waldorf3 h1{padding:20px 20px;font-size:24px;text-align:center}
    .waldorf3 ul{padding:0 20px}

    .programs h3, .programs h5{font-size:32px}
    .programs h2, .programs h4, .programs h6{font-size:22px}
    .programs h2, .programs h6{padding-bottom:20px}
    .programs h4{padding-top:20px}
    .programs img{padding-top:20px;padding-bottom:20px}

    .mission-content{padding:20px 20px}
    .mission-content p{font-size:16px;line-height:24px}

    .philosophy-content2{padding:40px 20px}
    .philosophy-content2 p{font-size:16px;line-height:24px;padding:5px}
    
    .waldorf2{padding-top:20px;}
    .waldorf2-content{padding:40px 20px}
    .waldorf2-content p{font-size:16px;line-height:24px}

    .waldorf3 .two-column-list{
        grid-template-columns:1fr;
        padding:0 20px 30px 20px;
    }
    .waldorf3 ul li{font-size:16px}

    .baby-content, .toddler-content, .kids-content{padding:30px 20px}
    .baby-content p, .toddler-content p, .kids-content p{font-size:16px;line-height:24px}

    .program-hours{
        grid-template-columns:1fr;
        padding:30px 20px;
        gap:25px;
    }

    .locations, .locations2{min-height:280px;padding:1.5rem}
    .locations h1, .downtown h1{font-size:32px}
    .locations h2{font-size:20px}

    .downtown-content{padding:30px 20px}
    .downtown-content p{font-size:16px;line-height:24px}

    .divider-content{padding:15px 20px}

    .contact-info h1{font-size:2.2rem}
    .contact-form{padding:20px}

    footer{padding:15px}
}