/* Roboto  */


.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

	/* Playfair Display  */

.playfair-display-regular {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


.playfair-display-bold {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

	/* Body  */


p {font-size: 18px;}
h1 {font-family: "Playfair Display", serif;}
body {background-color: #F0EFEA;font-family: "Roboto", sans-serif;}
a {text-decoration: none;
	color: inherit;}
	
h2{font-family: "Playfair Display", serif; font-size:36px;color:#333333;}


input::placeholder {font-size:16px;padding:12px}
	/* Nav  */

.logo img {
	 width: 60px; height:auto;}

.nav{display:flex;
 position:sticky;
 top:0;
 background-color:#F0EFEA;
 justify-content:space-between;
 padding: 24px;
 color:#333333;
 align-items: center
 }
 .menu-nav {align-items: center;list-style-type: none; display:flex; gap:24px;}
.menu-nav ul {align-items: center;list-style-type: none; display:flex; gap:24px;}
.menu-nav li{padding:0; margin:0}
.menu-nav a{font-weight:bold;font-size:18px;}

 .dont-bttn { display:flex; width:100px; border: 0px;padding: 8px 24px;
	border-radius:8px;	background-color: #52B788; color:white; font-size:16px;}
	/* Home Starts */

.hero-background {
	background-image:url("../images/hero.jpg");
	background-size: cover;
	height: 60vh
}

#hero-text {
	position:relative;
	top:130px;
	left:100px;
	padding: 24px 24px;
		line-height: 1.6;

}
.hero{
	width: 35% ;
	margin: 0px 480px;
}
.hero h1{
	font-size:50px;
	margin:0px;
}
.white h1{
	color:white;
}

.white p{
	color:white;
}


.center-align{
 display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center
}

hr{margin:60px;
	border-color:#D3D3D3;
	}


.cta{
	width:100px;
	border-radius:8px;
	background-color: #52B788;
	padding: 18px;
	text-decoration: none;
	color: inherit;
	color:white;
	font-family:"Roboto",sans-serif;
}

.impact{
	color:#333333;
	width:50%;
	margin:0 auto;
	line-height: 1.6
}
.impact h2{ padding-bottom: 0px;
padding-top: 24px}

.impact p {padding-bottom: 24px}


	/* Home Ends */

	/* About us Starts */
	
	.about-us h1{ font-size:48px; margin-bottom:50px;color:#333333
	
}
		
	.about-us img{ width:100%;
			height:700px;}
	.about-us p {
		width:50%;
	margin:0 auto;
	line-height: 1.6;
	padding:40px;
	color:#333333;}
.reason{margin:50px;
display:flex ;	line-height: 1.6;
}
.reason img{width:50%}
.reason-text {color:#333333;margin:30px}

	/* Aboutt us Ends */
	
	/* Our mission Starts */

.our-mission{ width:50%;
	margin:0 auto;
	line-height: 1.6;
	padding:40px;
	color:#333333;}
.our-mission h1{ font-size:48px; margin-bottom:50px;}

.species{width:80%; margin: 0 auto; display:flex; color:#333333; padding-top:50px; padding-bottom:50px}
.species h2 {font-size:48px;margin:0}

.species h3 {font-size:24px;margin:0}

.species p {margin-top:24px; line-height: 1.6;margin-right:50px}
.animals {width:40%;}

.tree-background{ background-color:#D8F3DC}
.tree{width:80%; margin: 0 auto; display:flex; color:#333333; padding-top:50px; padding-bottom:50px }
.tree h2 {font-size:48px;margin:0; margin-left:50px}

.tree h3 {font-size:24px;margin:0; margin-left:50px}

.tree p {margin-top:24px; line-height: 1.6; margin-left:50px}
	/* Our mission Ends */
	
	/* Join us Starts */
	.join-us{width:50%;
	margin:0 auto;
	line-height: 1.6;	
	padding:40px;
	color:#333333;}
.our-mission h1{ font-size:48px; margin-bottom:50px;}

	/* Join us Ends */

/* Donate Starts */
.donation{display:flex; gap: 40px;color:#333333}
.donate{width:89%;margin:0 auto;color:#333333}
.box {width:400px;display:flex;gap:1px}
.donate-left {width:50%;padding-left:100px; padding-top:24px}
.donate-left p {width:90%;line-height: 1.6}
#don{font-weight:bold}
.video iframe {width:800px;height:450px}

.donate-right{display:flex;}
.form{width:500px;height:300px;border:1px solid #cccccc;border-radius:10px;
  padding: 90px;background-color:white;margin:21px
  }
  
.frecuency{display:flex;gap:12px}
.frecuency button{font-size:16px;width:50%;height:50px;border-radius:12px;color:#333333;background-color:white; border:2px #52B788 solid;}
.frecuency button:hover {background-color: #52B788; color:white}
.amount {display:flex;gap:12px}
.amount button {font-size:16px;width:33.33%;height:50px; margin-top:24px;border-radius:12px;color:#333333;background-color:white; border:2px #52B788 solid}
.amount button:hover {background-color: #52B788; color:white}
.other {width:98%;height:50px; margin-top:24px; margin-bottom:24px; border-radius:12px;background-color:white; border:2px #52B788 solid}
.submit{display:flex; width:200px;height:40px; border: 0px;
	border-radius:8px; display:block; margin:0 auto;
	background-color: #52B788; color:white; font-size:16px}
#right-line {width:100%; display:block; margin: 24px auto 24px auto;}
.underline {text-decoration: underline}
.bttn-link {font-size:13px;color:#667080;}
.gap{display:flex; gap:12px}
/* Donate Ends */

/* Footer */
.break{margin:0}
.footer {display:flex; margin-left: 50px; justify-content:space-between}
.footer img {width:150px; height:150px; margin:24px; align-items:center}
.social {padding: 24px; margin:24px;}
.social-icon img {margin:6px;width:20px; height:20px;}
.copyright p {font-size: 12px;}