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

body{
   font-family:'Poppins', sans-serif;
   background-color:#A1937E;
   color:#170704;
   line-height:1.6;
}

/* ===== NAVIGATION ===== */

header{
   background:#301413;
   padding:20px 8%;
   position:sticky;
   top:0;
   z-index:1000;
}

nav{
   display:flex;
   justify-content:space-between;
   align-items:center;
   flex-wrap:wrap;
}

.logo{
   font-family:'Caveat', cursive;
   font-size:2.5rem;
   color:#A1937E;
   overflow:hidden;
   white-space:nowrap;
   border-right:3px solid #A1937E;
   width:max-content;

   animation:
   typing 4s steps(30,end),
   blink .8s infinite;
}

@keyframes typing{
   from{
      width:0;
   }

   to{
      width:100%;
   }
}

@keyframes blink{
   50%{
      border-color:transparent;
   }
}

nav ul{
   display:flex;
   list-style:none;
   gap:30px;
   flex-wrap:wrap;
}

nav a{
   text-decoration:none;
   color:#A1937E;
   transition:0.3s;
}

nav a:hover{
   color:#4D1519;
}

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

.hero{
   height:90vh;
   display:flex;
   justify-content:center;
   align-items:center;
   text-align:center;

   background:
   linear-gradient(
       rgba(23,7,4,0.55),
       rgba(23,7,4,0.55)
   ),
   url("../images/hero.jpg");

   background-size:cover;
   background-position:center;

   color:white;
}

.hero-content h1{
   font-size:4rem;
   margin-bottom:15px;
   text-transform:uppercase;
   letter-spacing:4px;
}

.hero-content p{
   font-size:1.2rem;
   max-width:700px;
   margin:auto;
}

.btn{
   display:inline-block;
   margin-top:30px;
   padding:15px 40px;
   background:#4D1519;
   color:white;
   text-decoration:none;
   transition:0.3s;
   border-radius:8px;
}

.btn:hover{
   background:#594836;
   transform:scale(1.05);
}

/* ===== SLIDER ===== */

.slider-section{
   padding:100px 10%;
   background:#f5f1eb;
   text-align:center;
}

.slider-section h2{
   font-size:2.8rem;
   color:#301413;
   margin-bottom:40px;
}

.slider{
   position:relative;
   max-width:1000px;
   margin:auto;
   overflow:hidden;
   border-radius:15px;
}

.slide{
   display:none;
   width:100%;
}

.slide.active{
   display:block;
}

.prev,
.next{
   position:absolute;
   top:50%;
   transform:translateY(-50%);
   background:rgba(0,0,0,.5);
   color:white;
   border:none;
   padding:15px;
   cursor:pointer;
   font-size:1.2rem;
}

.prev{
   left:10px;
}

.next{
   right:10px;
}

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

.intro{
   background:#f5f1eb;
   padding:100px 10%;
   text-align:center;
}

.intro h2{
   font-size:2.8rem;
   color:#301413;
   margin-bottom:15px;
}

.intro p{
   max-width:800px;
   margin:auto;
   color:#594836;
}

/* ===== QUICK LINKS ===== */

.quick-links{
   padding:100px 10%;
   background:#A1937E;
}

.quick-links h2{
   text-align:center;
   margin-bottom:50px;
   color:#301413;
   font-size:2.8rem;
}

/* ===== CARDS ===== */

.cards{
   display:grid;
   grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
   gap:30px;
}

.card{
   background:white;
   padding:30px;
   border-radius:12px;
   transition:0.4s;
}

.card:hover{
   transform:translateY(-10px);
   box-shadow:0 10px 25px rgba(23,7,4,0.15);
}

.card img{
   width:90%;
   height:200px;
   object-fit:cover;
   border-radius:10px;
   margin-bottom:15px;
}

.card h3{
   color:#4D1519;
   margin-bottom:15px;
}

.card p{
   color:#594836;
}

.card a{
   display:inline-block;
   margin-top:15px;
   text-decoration:none;
   color:#4D1519;
   font-weight:600;
}

.card a:hover{
   color:#301413;
}

/* ===== PARALLAX ===== */

.parallax{
   height:500px;

   background:
   linear-gradient(
       rgba(77,21,25,0.45),
       rgba(77,21,25,0.45)
   ),
   url("../images/parallax.jpg");

   background-attachment:fixed;
   background-size:cover;
   background-position:center;
}

/* ===== BANNER ===== */

.banner{
   background:#4D1519;
   color:white;
   text-align:center;
   padding:120px 10%;
}

.banner h2{
   font-size:3rem;
}

/* ===== VIDEO ===== */

.video-section{
   padding:100px 10%;
   background:#f5f1eb;
   text-align:center;
}

.video-section h2{
   color:#301413;
   margin-bottom:30px;
   font-size:2.8rem;
}

.video-section iframe{
   border:none;
   border-radius:15px;
   box-shadow:0 10px 25px rgba(0,0,0,.15);
}

/* ===== NEWSLETTER ===== */

.newsletter{
   padding:100px 10%;
   text-align:center;
   background:#A1937E;
}

.newsletter h2{
   margin-bottom:30px;
}

.newsletter form{
   display:flex;
   justify-content:center;
   flex-wrap:wrap;
   gap:15px;
}

.newsletter input{
   padding:15px;
   width:280px;
   border:none;
}

.newsletter button{
   padding:15px 35px;
   background:#301413;
   color:white;
   border:none;
   cursor:pointer;
}

/* ===== FOOTER ===== */

footer{
   background:#170704;
   color:#A1937E;
   text-align:center;
   padding:30px;
}

.footer-container{
   display:flex;
   justify-content:space-around;
   align-items:flex-start;
   flex-wrap:wrap;
   gap:30px;
   margin-bottom:20px;
}

.footer-container h3{
   margin-bottom:10px;
}

.footer-container a{
   color:#A1937E;
   text-decoration:none;
}

footer a{
   color:#A1937E;
   text-decoration:none;
   margin:0 10px;
}

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

@media(max-width:900px){

   .hero-content h1{
      font-size:2.8rem;
   }

   nav{
      flex-direction:column;
      gap:20px;
   }

   nav ul{
      justify-content:center;
   }

   .footer-container{
      flex-direction:column;
      text-align:center;
   }

}

@media(max-width:600px){

   .hero-content h1{
      font-size:2rem;
   }

   .hero-content p{
      font-size:1rem;
   }

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

}
.form-container{
    max-width:600px;
    margin:50px auto;
    padding:35px;
    background:#ffffff;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
    font-family:'Segoe UI', sans-serif;
}

.form-container h2{
    text-align:center;
    margin-bottom:25px;
    color:#333;
}

.input-group{
    margin-bottom:20px;
}

.input-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:#444;
}

.input-group input,
.input-group textarea{
    width:100%;
    padding:12px 15px;
    border:2px solid #ddd;
    border-radius:10px;
    font-size:16px;
    transition:0.3s;
    box-sizing:border-box;
}

.input-group input:focus,
.input-group textarea:focus{
    border-color:#ff6b00;
    outline:none;
    box-shadow:0 0 10px rgba(255,107,0,0.3);
}

button{
    width:100%;
    padding:14px;
    border:none;
    border-radius:10px;
    background:#ff6b00;
    color:white;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
}

button:hover{
    background:#e85f00;
    transform:translateY(-2px);
}

#message{
    margin-top:20px;
    text-align:center;
    font-weight:bold;
    color:green;
}