@import "tailwindcss";

:root {
    --color1: #FEFAE0;  /* Cornsilk */
    --color2: #283618; /* Pakistan Green */
    --color3: #606C38; /* Dark Moss Green */
    --color4: #DDA15E; /* Earth Yellow */
    --color5: #BC6C25; /* Tiger’s Eye */
    --white: #fff;
    --black: #000;
  }

body{
  background-color: var(--color1);
  height: 100%;
  width: 100vw;
  overflow-x: hidden;
}

.whatsapp-button-float { /* New CSS class for fixed positioning */
  position: fixed;      /* Make it fixed relative to the viewport */
  bottom: 15px;          /* 5px from the bottom edge */
  right: 15px;           /* 5px from the right edge */
  z-index: 200;         /* Ensure it's above other content (adjust z-index if needed) */
}

  .body2{
    height:500vh;
    width: 100%;
    padding-top: 15px;
    background-color:var(--color3);
  }



/*HEADER STYLING*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 0;
  z-index: 100;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  opacity: 1;
  visibility: visible;
  display: flex;
  align-items: center; /* Vertically center */
  justify-content: center; /* Horizontally center */
}

.header-hidden {
  opacity: 0;
  visibility: hidden;
}

.header-logo {
  /* No need for display: flex or justify-content here */
  align-items: center; /* Keep vertical alignment if needed within .header-logo */
}

.header-logo a {
  display: block; /* Ensures the logo link fills its container */
}

.header-logo img {
  display: block;
  max-width: 100%; /* Crucial for responsiveness: allows image to shrink */
  height: auto;     /* Maintain aspect ratio */
  max-height: 40px; /* Sets a maximum height, preventing overly large logos */
  scale:1.4;
}


.fade-in-element {
  opacity: 0; /* Initially hidden */
  transform: translateY(20px); /* Optional: slight slide up effect */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
}

.fade-in-element.is-visible {
  opacity: 1; /* Fade in to fully visible */
  transform: translateY(0); /* Optional: slide up to original position */
}