*{
	box-sizing: border-box;
	--primary-color: #154360;
    --secondary-color: #60ce80;
    --accent-color: #f0f9ff; /*white*/
    --text-main: #1e293b;
    --text-light: #64748b;
    font-family: 'Poppins', sans-serif;
    scroll-padding-top: 5rem; 
}
/* ===== Typography System — Poppins ===== */

body{
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #1e293b;
  -webkit-font-smoothing: antialiased;
}

/* Headings */
h1, h2, h3, h4, h5, h6{
  font-family: 'Poppins', sans-serif;
  color: #154360;
  letter-spacing: 0.3px;
}

h1{
  font-size: 56px;
  font-weight: 700;
}

h2{
  font-size: 38px;
  font-weight: 600;
}

h3{
  font-size: 24px;
  font-weight: 600;
}

h4{
  font-size: 20px;
  font-weight: 500;
}

/* Paragraph */
p{
  font-size: 16px;
  font-weight: 400;
  color: #475569;
}

/* Navigation */
nav a{
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.5px;
}

/* Buttons */
.btn-primary,
.btn-secondary{
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 15px;
}

/* Card titles / section highlights */
.card,
.section h2{
  letter-spacing: 0.4px;
}


.btn-primary{
	display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    border-width: 1px;
    border-color: transparent;
    background-color: var(--secondary-color);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.btn-primary:hover{
	background-color: var(--secondary-color);
	background-color: #198754;
    border-color: #198754;
}
.btn-primary:focus{
	background-color: var(--secondary-color);
	background-color: #198754;
    border-color: #198754;
}
.btn:focus{
   box-shadow:none;
}
.whatsapp-button {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 20px;
    background-color: #25d366; /* Official WhatsApp color */
    color: white;
    border-radius: 50px; /* Makes it a circle */
    text-align: center;
    box-shadow: 2px 2px 3px #999;
    z-index: 500; /* Ensures it's above other elements */
    display: flex;
    align-items: center;
    justify-content: center;
}
.whatsapp-button:hover {
    color: white;
}


/* Nav bar */
.section_nav{
	  position: fixed;
	  z-index: 500;
	  display: block;
	  width: 100%;
}
.navbar{
	border-radius: 10px;
	background-color: #ffffff;
	border: 1px solid var( --secondary-color);
	box-shadow: 0px 3px 10px 0px rgba(31, 31, 31, 0.08);
}

/* Hero Banner */
.Hero_banner {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(90deg,rgba(21, 67, 96, 0.74) 100%, rgba(21, 67, 96, 1) 50%), url('/assets/images/banner.webp');

  /* Set a specific height */
  height: 100vh;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 200;
}
.Hero_banner p{
   color: var(--accent-color);
}
.Hero_banner h1{
   color: var(--accent-color);
}
.Hero_banner h1 span{
   color: var(--secondary-color);
}
/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.Our_impact h2{
   color: var(--secondary-color);
}

.why_Us_bg{
	background-color: var(--accent-color);
}
.why_Us i{
   font-size: 30px;
   color: var(--secondary-color);
}
.why_Us h6{
   font-weight: bold;
}
.why_Us p{
   font-size: 14px;
   line-height: 21px;
}

.content:hover{
-webkit-box-shadow: 5px 10px 15px 9px rgba(154,154,154,0.41); 
box-shadow: 5px 10px 15px 9px rgba(154,154,154,0.41);
transition: all 0.5s ease-in-out;

}
.Our_team h5{
   font-weight: 600;
}
.Our_team h6{
   color: var(--secondary-color);
}
.Our_team p{
   font-size: 14px;
   line-height: 21px;

}



/* about ud */
.about_us span{
   color: var(--secondary-color);
}





/* contact_us */
.contact_us{
	background-color: var(--accent-color);
}
.contact_us h4{
	margin: 3px;
	font-weight: 500;
}
.contact_us p{
	font-size: 14px;
	line-height: 21px;
}
.contact_us i{
    font-size: 30px;
    color: var(--secondary-color);
}
.error{
  color:red;
}
#contactForm input{
  color: var(--text-main);
} 
.contact_us label{
  font-size: 14px;
  margin-bottom: 3px;
  font-weight: 500;
  color: var(--primary-color);
}
input::placeholder{
   font-size: 14px;
}
.form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: none;
}
.contact_us .error{
  color: #f44;

}

.Our_Expertise h5{
   font-weight: 600;
} 
.Our_Expertise p{
  font-size: 14px;
  line-height: 21px;
} 

/* Footer */
.Footer{
	background-color: var(--primary-color);
}
.Footer p{
	color: var(--accent-color);
	font-size: 14px;
	line-height: 21px;
	font-weight: 300px;
}
.Footer i{
	font-size: 25px;
	color: var(--accent-color);
}

@media screen and (max-width: 600px) {
	h1, h2, h3, h4, h5, h6{
	  font-family: 'Poppins', sans-serif;
	  color: #154360;
	  letter-spacing: 0.3px;
	}

	h1{
	  font-size: 36px;
	  font-weight: 700;
	}

	h2{
	  font-size: 28px;
	  font-weight: 600;
	}

	h3{
	  font-size: 19px;
	  font-weight: 600;
	}

	h4{
	  font-size: 16px;
	  font-weight: 500;
	}

	/* Paragraph */
	p{
	  font-size: 14px;
	  font-weight: 400;
	  color: #475569;
	}

	/* Navigation */
	nav a{
	  font-weight: 500;
	  font-size: 14px;
	  letter-spacing: 0.5px;
	}

	/* Buttons */
	.btn-primary,
	.btn-secondary{
	  font-family: 'Poppins', sans-serif;
	  font-weight: 600;
	  letter-spacing: 0.5px;
	  font-size: 14px;
	}

	/* Card titles / section highlights */
	.card,
	.section h2{
	  letter-spacing: 0.4px;
	}
}