/*Author: Alvaro Manrique
  Date:   Spring Session B */


/*Navigation Section*/

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #303633; 
  padding: 15px;
  /*Color to use Black = #303633, Yellow= FBC91B*/
  border: 5px solid #fbc91B;
}


/*Dynamic buttoms*/
a {
position: relative;
display: block;
color: #fff; /* Change font color to white */
text-align: center;
text-decoration: none;
padding: 10px;
font-size: 18px;
font-weight: bold;
}

a:hover {
color: #fbc91B; /* Change font color to yellow */
}

a:hover::before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
height: 10px;
background-color: #fbc91B; /* Change background color to yellow */
}



/*Banner*/

.banner {
  position: relative;
  height: 45vh;
  margin-bottom: 50px;
  
}

.banner img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
border: 0.0.10px solid #d9aa17; 
}


/* .banner {
  padding-bottom: 50px;
} */




ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  margin-right: 2px;
}



a {
  display: block;
  color: #fff; 
  text-align: center;
  text-decoration: none;
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
}

/*Text*/

h1 {
  font-size: 36px;
  text-align: center;
  margin-top: 50px;
}

p {
  font-size: 18px;
  text-align: center;
  margin-top: 20px;
}

 /*Last Updates Title*/

 h1 {
  margin-bottom: 100px;
}


h1 {
  font-size: 36px;
  text-align: center;
  margin-top: 50px;
  -webkit-text-stroke: 0.25px #fbc91B;
  text-stroke: 1px #fbc91B;
}

/*Scrollbar*/

/* For Chrome, Edge, and Safari */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #fbc91B;
  border-radius: 20px;
  border: 5px solid #f1f1f1;
}

/* For Firefox */
scrollbar-color: #fbc91B #f1f1f1;


/*Containers on the Index page*/
.container-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin: 0;
max-width: 960px;
padding: 0 50px;
}

.container {
width: calc(33.33% - 3px);
/*
background-color: #fbc91B;
*/
padding: 10px;
box-sizing: border-box;
display: inline-block;
height: 400px;
margin-bottom: 100px;
position: relative;
}

.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
}




body {
margin: 30px;
}


  
/*Footer*/
footer {
  background-color: #fbc91B;
  padding: 0.05px;
  text-align: center;
  color: black;
  font-size: 14px;
  font-weight: bold;
  width: 100%;
  display: flex;
  justify-content: center;
}
footer {
  text-align: center;
}






/*Text*/

body {
  font-family: Arial, sans-serif;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

h1 {
  margin: 0;
}

#bio {
  margin: 20px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

h2 {
  margin-top: 0;
}

p {
  line-height: 1.5;
}

#bio p {
  margin: 0.5em;
}



.banner2 {
text-align: center; 
height: auto; 
margin-bottom: 50px;
}

.banner2 img {
width: 50%; 
height: auto;
max-width: 100%; 
}



/* Banner2 borders */
.banner2 img {
width: 50%; 
height: auto;
max-width: 100%; 
border-radius: 10px; 
border: 2px solid #fbc91B; 
}


/*Banner Bottom*/


.banner2 {
text-align: center; 
height: auto;
margin-bottom: 50px;
position: relative; 
}

.banner2 img {
width: 50%; 
height: auto;
max-width: 100%; 
border-radius: 10px; 
}


.banner2-content {
display: inline-block;
position: relative;
}


/*email form */


.email-form input {
padding: 10px 15px; 
font-size: 16px;
border-radius: 5px;
border: 2px solid #fbc91B;
background-color: #f5f5f5; 
color: #333; 
outline: none;
}

.email-form {
display: inline-flex;
position: absolute;
bottom: 190px; 
left: 40%; 
transform: translateX(-50%);
gap: 10px;
}




.email-form input::placeholder {
color: #888; 
}





.email-form button {
background-color: #fbc91B; 
border: none;
color: black;
font-size: 16px;
font-weight: bold;
padding: 10px 15px;
cursor: pointer;
border-radius: 5px;
}

.email-form button:hover {
background-color: #fbc91B; 
}



/*Visited Countries*/

.visited-countries-img {
width: 700px !important; 
height: 400px !important; 
max-width: none !important; 
object-fit: cover; 
margin: 0 auto; 
display: block;
border-radius: 5px;
border: 2px solid #fbc91B; 
}



/*flags of visited countries*/

.grid-container {
display: flex;
flex-wrap: wrap;
justify-content: center; 
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
}

.grid-item {
text-align: center;
padding: 10px;
box-sizing: border-box;
flex: 0 0 calc(25% - 20px); 
margin: 0 10px 20px; 
}

.grid-item img {
width: 150px; 
height: 100px; 
object-fit: cover; 
border-radius: 5px;
border: 2px solid #fbc91B; 
}





.grid-item p {
margin-top: 10px;
}



/*about */



.roraima-img {
width: 700px; 
height: 400px; 
object-fit: cover; 
border-radius: 5px;
border: 0.5px solid #fbc91B; 
}







/*Story tales Puerto Rico*/

body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}

.article-container {
background-color: #fff;
padding: 20px;
margin: 20px auto;
max-width: 1200px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.article-title {
font-size: 24px;
margin-bottom: 20px;
}

.article-image {
max-width: 50%;
height: auto;
display: block;
margin: 0 auto 20px;
border-radius: 5px;
border: 2px solid #fbc91B; 
}

.article-content {
text-align: justify;
}



/*Contact*/


.contact-container {
background-color: #fff;
padding: 20px;
margin: 20px auto;
max-width: 800px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}

.contact {
font-size: 24px;
margin-bottom: 20px;
}

.email-list {
list-style-type: none;
padding: 0;
}

.email-list li {
display: inline-block;
margin: 0 10px;
}

.email-list a {
text-decoration: none;
color: #3498db;
font-size: 18px;
}

.email-list a:hover {
color: #fbc91B;
}

/*Center Titles*/

.center-title {
text-align: center;
}


/*Under $50*/
/* Article Container 2 and Article Content */
.article-container2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 50px;
}

.article-content {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
  margin-bottom: 40px;
}



/*List Containr*/


.list-container {
  display: flex;
  flex-direction: column; /* add this line */
}

.list-container ul {
  margin-left: 40px;
  font-size: 18px;
}

.list-container li {
  margin-top: 10px;
}






/*  class bullet-points */
ul.bullet-points {
  list-style-type: disc;
  padding-left: 40px;
  margin-top: 20px;
}



/*Submit bottom*/

input[type="submit"] {
  background-color: #fbc91B;
  color: black;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;


}




/*form*/