body, html{
height: 100vh;
width: 100%;
margin: 0;
font-size: 1em;
font-weight: 300;
font-family: 'Lato',  sans-serif;
color: white;
background-color: #b1532b ;
line-height: 2em;
}

hr{
  color:yellow;
}

h2{
line-height: 1.8vh;
font-weight: 500;
color:  	white;
padding: 15px;
}

h3 {

line-height: 1.4;
font-weight: 500;
color:  	white;
}



h4{

line-height: 1.4;
font-weight: 500;
color:  	white;
}

a {
color:yellow;
}
img{
  width: 100%;
  height:auto;
}
.wrapper{
display: grid;
grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
grid-template-areas:
/* STACKED **/ 
"header"
"hero"
"main"
"guide"
"footer"

;
}
/*MOBILE END */



/*LARGER SCREENS ONLY*/
@media  only screen and (min-width: 1281px){
.wrapper{
display: grid;
grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
grid-template-areas:
" header header  header  header "
" hero  hero  hero   hero  "
" . main  main  . "
" . guide  guide  . "
"footer  footer  footer  footer"

;
}
}


.hero{
 grid-area: hero;
 background-image:  linear-gradient(rgba(7, 7, 7, 0.3) 100%, rgba(7, 7, 7, 0.6) 100%, rgba(7, 7, 8, 0.6) 100%),  url(../shayne-3.webp);
background-repeat: no-repeat;
background-position: center center;
background-size:cover; 
min-height: 550px;
padding: 20px;
margin-top: 0px;
text-align: center;
background-attachment: fixed;
}
.hero h1{
 font-size: 3vw;
}
main{
 grid-area: main;
 justify-self: center;
 justify-content: center;
 padding: 20px;
}







/* Buttons (uses your earlier palette) */
.btn {
background-color:	#00bfa5;
color: black;
font-size: clamp(0.8em, 1em, 1em); /* Responsive font size */
font-weight: 300;
padding: 10px 10px   10px ; /* Scales with font size */
text-decoration: none;
cursor: pointer;
border-radius: 8px;
border: none;
display: inline-block;
margin: 10px;
transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
background-color: 	#4fc3f7; /* Slightly lighter on hover */
transform: scale(1.03); /* Gentle hover effect */
color: black !important;
}


.guide{
 grid-area: guide;
 margin: 80px 10px;
}
/* Pricing Section */
.pricing {
  text-align: center;
  padding: 3rem 1rem;
  background: #f8f9fa;
}

.pricing h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #333;
}

.pricing-intro {
  max-width: 700px;
  margin: 0 auto 2.5rem auto;
  color: #555;
}

/* Pricing Table Layout */
.pricing-table {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.pricing-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  padding: 2rem;
  width: 300px;
  transition: transform 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-6px);
}

.pricing-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: #b1532b; /* Deep Rust */
}

.price {
  font-size: 2rem;
  font-weight: bold;
  margin: 1rem 0;
  color: #333;
}

.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  text-align: left;
  color: #555;
}

.pricing-card ul li {
  margin-bottom: 0.6rem;
}

/* CTA Button */
.btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  margin-top: 1rem;
  background: #4cafef; /* CTA Blue */
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.btn:hover {
  background: #3a94d9;
}

/* Featured Package */
.featured {
  border: 2px solid #b1532b;
  transform: scale(1.05);
}

.featured-btn {
  background: #b1532b;
}

.featured-btn:hover {
  background: #933d21;
}

/* Responsive */
@media (max-width: 900px) {
  .pricing-table {
    flex-direction: column;
    align-items: center;
  }
}



/* WHATSAPP */
.whatsapp{
position: fixed;
width: 40px;
bottom: 20px;
right: 20px;
z-index: 999;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 50%;
}
.whatsapp-float:hover {
transform: scale(1.1);
}


/* ENDS */


header{
grid-area: header;
min-height: 90px;
margin: 0;
}

/*NAVIGATION*/


/* Base styles */
.navbar {
background-color: #303030;
color: white;
padding: 10px 20px;
position: fixed;
width: 100%;
z-index: 999;
}

.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: auto;
max-height: 80px;
}

.logo {
max-width: 80px;
}

/* Hamburger styles */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: white;
  margin: 4px 40px;
  transition: 0.4s;
}

/* Nav links */
.nav-links {
  display: flex;
  list-style: none;
  gap: 20px;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 300;
}

/* Mobile styles */
#menu-toggle {
  display: none;
}

@media (max-width: 768px) {
.hamburger {
display: flex;
}

.nav-links {
position: absolute;
top: 60px;
left: 0;
background-color: #303030;
width: 100%;
flex-direction: column;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-in-out;

}

#menu-toggle:checked ~ .nav-links {
max-height: 1000px;
}

.nav-links li {
padding: 15px;
text-align: center;
}
}

/* ENDS */


footer {
  grid-area: footer;
  background-color: rgb(76, 79, 75);
  color: white;
  padding: 2em 1em;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: auto;
  gap: 2em;
}

.footer-section {
  flex: 1 1 250px;
  min-width: 200px;
}

.footer-section h4 {
  font-size: 1.1em;
  margin-bottom: 0.5em;
  color: #a6a1a1;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section ul li {
  margin-bottom: 0.4em;
}

.footer-section a {
  color: white;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-section a:hover {
  color: #ccc;
}

.footer-bottom {
  text-align: center;
  margin-top: 2em;
  font-size: 0.9em;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 1em;
}

.web-logo{
width: 150px;
height: auto;
display: block;
margin-bottom: 20px;
}


/* EXTRA SMALL DEVICES (phones, less than 480px) */
@media only screen and (max-width: 479px) {

.hero h1{
 font-size: 8vw;
}

h2{
 line-height: 1.4;
}





}