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

body, html {
    height: 100%;
    width: 100%;
    overflow: hidden !important; /* Prevent scrolling */
}

#main-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0; /* Change to any background */
    background: url("../img/bg.jpg") no-repeat center center;
    background-size: cover; /* Ensure the background image covers the entire view */
}

svg path {
  fill: transparent;
  stroke: #fff;
  stroke-width: 0.1;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: textAnimation 1.2s ease-in-out 1 forwards;
}

@keyframes textAnimation {
  0% {
    stroke-dashoffset: 50;
  }
  80% {
    fill: transparent;
  }
  100% {
    fill: #fff;
    stroke-dashoffset: 0;
  }
}

h2,h3 {
    margin:0;
    padding:0;
}

/* Container for the particle effect */
#particle-container {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 100% !important;
    height: 100%;
    overflow: hidden;
}

/* Particle style */
.particle {
    position: absolute;
    bottom: 0;
    background-color: #FFFD55;
    border-radius: 50%;
    opacity: 0;
    animation: fadeInOut linear forwards, scaleEffect linear forwards, floatUp linear forwards;
}

/* Fade in/out animation */
@keyframes fadeInOut {
    0% { opacity: 0; }
    20% { opacity: 0.2; }
    80% { opacity: 0.3; }
    100% { opacity: 0; }
}

/* Scale effect */
@keyframes scaleEffect {
    0% { transform: scale(0.75); }
    20% { transform: scale(1); }
    100% { transform: scale(1.2); }
}

/* Floating up animation using var for distance */
@keyframes floatUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(var(--dis)); }
}

#forest-container {
  top: 0;
  width: 100%;
  height: 100%;
  max-width: 100% !important;
  overflow: hidden;
}

/* Light ray styling */
.light-ray {
    position: absolute;
    width: 4vw; /* Thin ray width */
    height: 70%; /* Height of the light ray */
    background: rgba(255, 255, 200, 0.3); /* Soft yellow, semi-transparent */
    filter: blur(4vw); /* Blurring to give a diffused look */
    opacity: 0;
    animation: moveLightRay linear infinite;
}

/* Keyframes for the random motion of light rays */
@keyframes moveLightRay {
    0% {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateX(var(--random-x)) translateY(var(--random-y)) scale(var(--random-scale));
        opacity: 0;
    }
}

.msgbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 20px;
    border-radius: 5px;
    max-height: 98%;
    overflow: hidden;
}

.formBox {
  display: none;
  width: 95%;
  max-width: 480px;
}

.formBox h2, .formBox h3 {
    color: #f0ffbf;
}

img {
    width:95%;
}

.option-3s  {
    width:28%;
    margin-left: 1%;
    margin-right: 1%;
}

.option-2s {
    width:44%;
    margin-left: 1%;
    margin-right: 1%;
}

.option-1s {
    width:90%;
    /* height: 4vh; */
    margin: 1vh 5%;
}

#form08, #form02, #form05,.formBox {
    overflow-y: scroll; /* Keeps the content scrollable */
}

/* Hide scrollbar for WebKit browsers */
#form08::-webkit-scrollbar,
#form02::-webkit-scrollbar,
#form05::-webkit-scrollbar,
.formBox::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
}

/* Optional: For other browsers */
#form08, #form02, #form05,.formBox {
    scrollbar-width: none; /* Firefox-specific property */
    -ms-overflow-style: none; /* IE 10+ */
}

#tnc_info {
    background: white;
    width: 100%;
    color: black;
}