/* Reset some default styles */
body, h1, p, button {
  margin: 0;
  padding: 0;
}

/* Set the body as a flex container to make the footer sticky at the bottom */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Sticky header styles */
.sticky-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: green;
  /* Logo animation */
  animation: fadeIn 1s ease-in-out;
	 z-index: 998; /* Ensure the header stays on top of other content */
}

.logo {
  font-weight: bold;
	padding-left: 20px;
}

.subscribe-btn2 {
  /* Background color set to green (change it to your desired color) */
  background-color: green;
  border: 2px solid white;
  color: white;
  padding: 12px 20px; /* Increase padding for a bigger button */
  border-radius: 30px; /* Increase the border radius for a more rounded button */
  cursor: pointer;
  transition: background-color 0.3s ease; /* Add transition effect for smooth hover */
  /* Button animation */
  animation: scaleIn 1s ease-in-out;
	padding-right: 20px;
}

/* Change button color on hover */
.subscribe-btn2:hover {
  background-color: white;
  color: green;
}

/* Main content styles */
main {
  flex: 1; /* Allow main to take up the remaining space */
  padding: 20px;
  background-image: url('islamic-ornament.png');
  background-color: rgba(255, 255, 255, 0);
  background-blend-mode: overlay;
  border-radius: 8px;
  max-width: 100%;
  text-align: center;
  font-family: Arial, sans-serif;
  /* Main section animation */
  animation: fadeIn 1s ease-in-out;
 padding-bottom: 30px;
}


h1 {
  font-size: 28px;
}

     .hadis-info {
            font-size: 2vw; /* Use viewport width for scalable font size */
            font-weight: bold;
            margin-bottom: 10px;
        }

        .hadis-text {
            font-size: 1.5vw; /* Use viewport width for scalable font size */
            line-height: 1.6;
            text-align: left;
            padding: 2vw; /* Use viewport width for scalable padding */
            position: relative;
        }

/* Responsive font size for mobile and desktop devices using vw scaling */
.sticky-footer {
  position: sticky;
  bottom: 0;
  background-color: green;
  padding: 10px;
  text-align: center;
	font-family: Arial;
	align-content: 
  font-size: 1vw; /* Use viewport width (vw) scaling for font size */
  /* Footer animation */
  animation: fadeInUp 1s ease-in-out;
	 z-index: 998; /* Ensure the header stays on top of other content */
	
	 /* Footer gradient */
  background: linear-gradient(to bottom, transparent, green);
  /* For older browser support */
  background: -webkit-linear-gradient(to bottom, transparent, green);

}

/* Responsive font size for mobile and desktop devices using vw scaling */
@media (max-width: 768px) {
  
	
	h1 {
    font-size: 6vw; /* Example font size for mobile devices */
  }

  .sticky-footer {
    font-size: 2vw; /* Example font size for mobile devices */
  }
	  .hadis-info {
            font-size: 4vw; /* Use viewport width for scalable font size */
            font-weight: bold;
            margin-bottom: 10px;
        }
	 .hadis-text {
            font-size: 5vw; /* Use viewport width for scalable font size */
            text-align: left;
            position: relative;
        }
	
	 }

/* Keyframes for fadeIn animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Keyframes for fadeInUp animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Keyframes for scaleIn animation */
@keyframes scaleIn {
  from {
    transform: scale(0.8);
  }
  to {
    transform: scale(1);
  }
}

/* Sticky section styles */
.sticky-section {
  position: sticky;
  top: 90px; /* Distance from the top of the viewport */
  background-color: green;
  padding: 10px;
	font-family: Arial;
	text-align: center;
		 z-index: 998; /* Ensure the header stays on top of other content */
}

.animated-text {
  animation: fadeInUp 1s ease-in-out; /* Apply the animation to the text */
	 z-index: 998; /* Ensure the header stays on top of other content */
}

/* Keyframes for fadeInUp animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



 /* Tooltip styles */
        .tooltip {
            position: relative;
            cursor: pointer;
            color: darkgreen;
            text-decoration: underline;
        }
        .tooltip::after {
            content: attr(data-manasi);
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            padding: 1vw; /* Use viewport width for scalable padding */
            background-color: green;
            color: #fff;
            border-radius: 5px;
            white-space: pre-wrap; /* Preserve newlines and wrap long text */
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s, visibility 0.3s;
            z-index: 999; /* Ensure the tooltip is above other content */
            /*max-width: 100vw; /* Use viewport width for scalable max-width */
        }
        .tooltip[data-active="true"]::after {
            visibility: visible;
            opacity: 1;
			
		}	
			


			
/* SUBSCRIPTION FORM */

/* Center the subscription form horizontally and vertically */
.subscription-form {
  background-image: url('islamic-ornament.png');
  background-color: rgba(255, 255, 255, 0);
	  background-blend-mode: overlay;
	display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  /* Remove the background-blend-mode property */
  /* height: 100vh; */ /* You can choose to keep or remove this height property */
  padding: 20px;
  font-family: Arial;
	min-height: 50vh;
}

.form-group {
  margin-bottom: 10px;
  display: flex; /* Use flexbox to align items horizontally */
  align-items: center; /* Align items vertically within the form-group */
}

.form-group label {
  flex: 1; /* Allow the label to take up the remaining available space */
  
}

.form-group input[type="text"],
.form-group input[type="email"] {
  flex: 2; /* Allow input fields to take up twice the space of the label */
  padding: 8px;
}

.form-group .checkbox-container {
  flex: 1; /* Allow the checkbox container to take up the remaining space */
  margin-right: 10px; /* Add spacing between checkbox and label */
}

.subscription-button {
  display: block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: green;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
  border-radius: 22px;
  /* align-content: center; */ /* This property is not needed */
}