/* Author: Arquimedes Aguirre
Filename:styles.css
Date: 11/22/2024 */

/*The universal selector was used to format the website in general.*/
* {
  box-sizing: border-box;
}
/*The background color design for the body of the website is created*/
body {
  width: 100%;
  height: 100%;
  color: black;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: azure;
  background-image: url(/images/placeholder-images/tripBG.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; 
}
/*The style of the titles was set in that tag*/ 
h1 {
  color: blueviolet;
  font-family: "Times New Roman", Times, serif;
  font-weight: 300;
  font-size: 5rem;
  line-height: 0.85;
  text-align: center;
}
/* Added hamburger bottom to format the website menu*/
.hamburguer, .close {
  padding: 1rem;
  font-size: 2em;
  color: blue;
  text-decoration: none;
}

/*The header selector is added to format the main header of the page.*/
header {
  display: flex;
  justify-content: space-between; 
  align-items: center; 
}

/*The menu bar style was created with different properties and values*/
nav {
  border-top: 2px solid gray;
  border-bottom: 2px solid black;
  margin: 0 auto;
  background-color: purple;
  background-image: url(https://assets.codepen.io/296057/lil-graydots.png);
  font-family: "Times New Roman", Times, serif;
  font-size: 1.5rem;
  padding: 1rem;
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 15vh;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translateY(-100%);
  transition: transform 0.2s ease;
}
/*A pseudoclass was created so that the menu window would open and close.*/
nav:target {
  transform: translateY(0);
}
/*The unordered list was given style.*/
nav ul {
  margin: 0px;
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  width: 100%;
  font-size: 1.5rem;
}
/*The internal design of the bar menu was formatted and styled.*/
nav li:first-child {
  margin-top: 0;
}

nav a { 
  padding: 0.5rem 1rem;
  margin-bottom: 1%;
  display: flex;
  flex-direction: row;
  justify-items: center;
  text-decoration: none;
  font-weight: 600;
  color: blueviolet;
  border-top: 5px solid #00bff3;
  border-bottom: 5px solid #00bff3;
}

/*A pseudoclass was created so that the menu bar, had a focus effect.*/
nav a:focus,
nav a:hover {
  color: black;
  background-color: greenyellow;
  background-image: url(https://assets.codepen.io/296057/lil-bluedots.png);
  
}
.close:hover { 
  background-image: none; 
  background-color: transparent; 
}
/* style for the imagen logo placed in the website*/
#logo {
  top: 5px; /* Move it further down */
  right: -45px; /* Align it to the right edge */
  position: relative;
  display: flex;
  align-items: center;
}
#logo img {
  width: auto;
  height: 60px; /* Adjust the height as needed */
  margin-top: 20px; /* Consistent margin */
  margin-bottom: 5px;
  margin-right: 5em;
  margin-left: 1em;
}
.logo {
  width: 200px; /* Default for large screen */
  max-width: 60%;
  min-height: 30%;
  margin: 1em;
  padding: 1px;
}
@keyframes slideme {
  from { 
    margin-left: 100%;
    width: 300%;  
  }
  50%  {  
    margin-left: 50%;
    font-size: 250%; 
  }
  to   {
    font-size: 500%;
    margin-left: 0%;
    width: 100%; 
    }
  }
/* Styles for the header container */
.header {
  display: flex; 
  justify-content: center; /* Center the content horizontally */ 
  align-items: center; /* Center the content vertically */ 
  padding: 80px 20px 20px 20px; /* Add top padding to create space */ 
  background-color: #f8f9fa; /* Light background color */ 
  border-bottom: 2px solid #ddd; /* Border at the bottom */
  background-image: url(/images/placeholder-images/bg-sunset-ocean.jpg);
  background-repeat: no-repeat;
  background-position: right;
  background-size: cover; /* use Either 'auto' or 'cover' */
  max-width: 1200px; /* Match the max-width with other containers */ 
  margin: 0 auto; /* Center the header horizontally */ 
  padding: 20px; /* Consistent padding */ 
  border-radius: 10px; /* Optional: for a consistent look */ 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: for a consistent look */
}
.grid.header h1 { 
  animation-duration: 5s;
  animation-name: slideme;
  animation-fill-mode: forwards;
  animation-timing-function: linear;		 
}
/* Styles for the h1 element */
.grid.header h1 { 
    font-size: 5rem; 
    margin: 0; 
    color: #333; /* Text color */ 
}
/* Styles for the link */ 
.grid.header h1 a {
    text-decoration: none; /* Remove underline */ 
    color: inherit; /* Inherit color from the parent */ 
    transition: color 0.3s; /* Smooth transition on hover */
}

/* Styles for the link on hover */ 
.grid.header h1 a:hover { 
    color: #007bff; /* Change color on hover */ 
}

/*Main container using grid layout*/
.main-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two-column layout*/
  grid-template-rows: auto; /* Add rows, can specify more precisely if needed */
  grid-gap: 20px; /* Consistent gap*/
  padding: 20px; /* Consistent padding */
  max-width: 1200px;
  margin: 0 auto;
}
/*Adjusting the grid for specific sections*/
.grid-hero .grid-sidebar {
  grid-column: span 1; /*Each takes up one columns*/ 
  grid-row: auto; /*Auto height based on content*/
}
.grid.content {
  display: flex; /*Use flexbox layout */
  flex-direction: column; /* Arrange items vertically */
  justify-content: center; /* Center items vertically */
  align-content: center; /* Center items horizontally */
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 10px;
  border: 1px solid #007bff;
  min-height: 100px; /* Ensure the container has some height */
  max-height: fit-content; /* Allow it to grow based on content */
  margin: 0 auto; /* Center the content horizontally */
  width: 100%; /* Full width of the container */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: for a consistent look */
  text-align: center; /* Ensure text is centered */
}
.grid.content {
  grid-column: span 2; /*Each takes up two columns */
  grid-row: 500px; /* Auto height based on content */
}
.grid.content .section .narrow-paragraph {
  max-width: 1000px; /* Limit the width for narrow paragraphs */
  margin: 0 auto; /* Center the content horizontally */
  text-align: justify; /* Justify text for better readability */
} 
/* Styling the table container */
.table-container {
  width: 90%;
  margin: 30px auto 30px auto;
  overflow-x: auto;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 8px;
}
/*Styling the table */
table {
  margin: auto;
  width: 100%;
}
/* Styling the table headers */
th {
  background-color: #007bff;
  color: white;
  padding: 12px;
  font-weight: bold;
}
/* Styling the table cells */
td {
  padding: 10px;
  border: 1px solid #ddd; /* Light Border */
  text-align: center;
}
/* Adding alternate row colors for better readability */
tr:nth-child(even) {
  background-color: #f2f2f2;
}
/* Styling the image wrapper */
.image-wrapper {
  display: flex; /* Use flexbox to control alignment */
  justify-content: center; /* Center the image horizontally */
  align-items: center; /* Center the image vertically */
  margin: 15px 0; /* Add some vertical margin for spacing */
  padding: 10px; /* Add padding around the image */
  background-color: #f0f0f0; /* Light background color */
  border-radius: 10px; /* Consistent border radius */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
  max-width: 100%; /* Ensure the wrapper does not exceed the container width */
} 
/* Ensure existing .the-image styles are maintained */
.image-wrapper .the-image {
  width: 100%;
  max-width: 500%; 
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}
.main-layout-container  {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
} 
.content-title {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  justify-self: center;
  align-items: center;
  padding: 20px; /* Consistent padding */
  background-color: #f8f9fa; /* Conssitent secondary background color */
  border-radius: 10px; /* Conssitent primary color border */
  border: 1px solid #007bff; /*Consistent primary color border*/
}
.content-title h2 {
  color: #ff5722;
  text-align: center;
}  
.content-title h3 {
color: #ff5722;
}

.content-mission {
  flex-basis: calc(100% / 3);
  width: 90%;
  margin:2.5%;
  background: red;
  /* to see text against darker background */
  color: white;
}

.content-vision {
  flex-basis: calc(100% / 3);
  width: 90%;
  margin:2.5%;
  background: red;
	/* to see text against darker background */
  color: white;
}


/* .content-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
}
.content-split div {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
}
#container1 > .content {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  flex: 1 1 100px;
  padding: 10px;
}
.container  {
  display: inline-block;
  justify-content: center;
  text-align: justify;
  padding: 20px;
} */

.linkinterest, .linkrelated, .linkadditional, .boxd, .boxe,  .finiquito1, .finiquito2 {
  grid-column: span 1; /*Each takes up one columns */
  grid-row: auto; /* Auto height based on content */
}
.finiquito3 {
  grid-column: span 2; /* Each takes up two columns */
  grid-row: auto; /* Auto height based on content */
}
/* Sections using flexbox layout */
.linkinterest,
.linkrelated,
.linkadditional,
.boxd,
.boxe,
.finiquito1,
.finiquito2,
.finiquito3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px; /* Consistent padding */
  background-color: #f8f9fa; /* Conssitent secondary background color */
  border-radius: 10px; /* Conssitent primary color border */
  border: 1px solid #007bff; /*Consistent primary color border */
}
/* Style buttons */
.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 20px;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: RoyalBlue;
}
/* Section title styling for contrast */
.section h2,
.section h3 {
  font-size: 1.5rem; /* Consistent font size for large text */
  color: #ff5722; /* Consistent accent color */
  margin-bottom: 20px; /* Consistent gap */
  text-align: center;
}
/* Paragraph and list styling for readability */
.section p,
.section ul {
  font-size: 1rem; /* Consistent font size for medium text */
  color: #333; /* Consistent text color */
  line-height: 1.6;
  margin-bottom: 20px; /* Consistent gap */
  text-align: justify;
}
/* List item styling */
.section ul {
  padding-left: 20px;
  list-style-type: disc;
}
.section ul li {
  margin-bottom: 15px; /* Consistent padding */
}
/*Image styling */
.the-image {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 10px; /* Consistent border radius */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 20px; /* Consistent gap */ 
  margin-bottom: 5%;     
}
/* Video styling to apply styling */
video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px; /* Consistent border radius */
  margin-top: -8%; /* Consistent gap */
  overflow: auto;
}
/* styles applied to the sidebar of the website*/
/* .grid.sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 10px;
  border: 1px solid #007bff;
  min-height: 100vh;
} */
.grid.sidebar .section {
  width: 100%;
  max-width: 600px;
  padding: 15px;
  background-color: #fff;
  border-radius: 5px;
  margin-top: -40px;
  margin-bottom: 15px;
}
.grid.sidebar .section h2 {
  font-size: 1.5rem;
  color: #ff5722;
  margin-bottom: 20px;
  text-align: center;
}
.grid.sidebar .section ul {
  padding-left: 20px;
  list-style-type: disc;
}
.grid.sidebar .section ul li {
  margin-bottom: 15px;
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
  text-align: justify;
}
.grid.sidebar .section p {
  margin-top: 50px;
  margin-bottom: 20px;
  text-align: justify;
}
/* a.hamburguer {
  margin-left: 5px;
} */


/*Footer a flex display was created to format the footer section of the website*/
footer {
  display: grid;
  grid-template-columns: 1fr; /* Single column layout for smaller screens */
  grid-template-rows: 250px;
  place-items: center;
  background-color: gray;
  padding: 20px;
  margin-top: 10px;
  text-align: center;
  color: #ffffff;
}
.footer-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Align items vertically*/
  align-items: center; /* Center items horizontally */
  padding: 10px;
  width: 100%; /* Full width */ 
}
/* Ensure the logo is positioned on the left*/
.footer-logo {
  position: relative;
  top: 5em;
  left: -5em;
}
.logo-footer {
  margin-right: 100%;
}
img {
  display: block;
  width: 30%;
  height: auto;
}
.element-information {
  display:flex;
  flex-direction: column;
  align-items: center;
  margin-left: 30%;
  margin-top: -5%;
  padding: 1px;
}

/* Text and link styles */
footer p, footer a {
  margin: 1px 0; /* Proximity: space elements evenly*/
  margin-top: 30px;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease; /* Smooth transition*/
}
footer a:hover {
  color: #ffeb3b; /* High contrast for hover*/
} 
/*A class was created to format the socialnetwork of the website*/
.socials {
  list-style-type: none;
  padding: 0;
  margin: 5px 0;
  margin-top: -10px;
  margin-right: -30%;
  display: flex;
  justify-content: center;
  gap: 15px; /* Proximity: equal spacing between items */
}
.socials li {
  display: flex;
  align-items: center;
}
.socials img {
  width: 40px;
  height: auto; /* Maintain aspect ratio*/
  transition: opacity 0.3s ease; /* Smooth transition*/
}
.socials img:hover {
  opacity: 0.5;
}
div .section {
  height: 100%;
}
div .section-one h2 {
  text-align: center;
  margin-bottom: 5%;
}
div .content-item p  {
  width: 90%;
  max-width: 90%;
  text-align: justify;
  justify-self: center;
}
div .content-item video {
  width: 70%;
  height: 100%;
  margin-right: 25%;
  margin-left: 15%;
}
div .table-container {
  margin-top: 40px;
  margin-bottom: 40px;
}
div#main-layout-container {
  width: 100%;
  height: 100%;
  padding: 30px;
  border-radius: 20px;
  margin: 0;
}
div#content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
div#content .content-mission {
  min-width: 40%;
}
div section.content-mission {
  width: 100%;
  max-width: 100%;
  height: 100%;
  padding: 20px;
  border-radius: 20px;
  margin: 0;
}
section.content-mission h3 {
  text-align: center;
}
section.content-mission p {
  width: 90%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  text-align: justify;
}
div#content .content-vision {
  min-width: 40%;
}
div section.content-vision {
  width: 100%;
  max-width: 100%;
  height: 100%;
  padding: 20px;
  border-radius: 20px;
  margin: 0;
}
section.content-vision h3 {
  text-align: center;
}
section.content-vision p {
  width: 90%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  text-align: justify;
}
/*Strategic Planning layout*/ 
#content { 
display: flex; 
justify-content: center; 
gap: 50px; /*SPACE between blocks*/ 
flex-wrap: wrap; 
margin-top: 40px; 
}
/* Mission, Vision, Values blocks */ 
.content-mission, .content-vision { 
  background-color: lightskyblue; 
  color: white; 
  width: 300px; 
  padding: 25px; 
  border-radius: 20px; 
  text-align: center; 
}
/*Headings inside blocks*/ 
.content-mission h3, .content-vision h3 { 
  margin-bottom: 15px; 
}
/*Link Section Website*/
#fourlayout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two Columns */
  gap: 30px;
  margin: 40px;
}
div.linkinterest {
  width: 40vw;
  height: 50vh;
  margin: 30px;
}
div.linkrelated {
  width: 40vw;
  height: 50vh;
  margin: 30px;
}
div.finiquito3 {
  grid-column-start: 2;
  grid-column-end: 3;
}
div.linkadditional {
  width: 40vw;
  height: 50vh;
  margin: 30px;
}
div.boxd {
  width: 40vw;
  height: 50vh;
  margin: 30px;
}
div.boxe {
  width: 40vw;
  height: 50vh;
  margin: 30px;
}
div.finiquito1 {
  width: 40vw;
  height: 50vh;
  margin: 30px;
}
div.finiquito2 {
  width: 40vw;
  height: 50vh;
  margin: 30px;
}
div.finiquito3 {
  width: 40vw;
  height: 50vh;
  margin: 30px;
}
div#fourlayout {
  gap: 10px;
  margin-top: 5px;
}
div#content {
  width: 100%;
  height: 100%;
  padding: 10px;
  margin: 30px;
  margin-top: 40px;
}
div.content-title h2 {
  margin-top: 40px;
}
a.hamburguer{
  margin-top: 10px;
  margin-left: 1em;
}
.grid.header{
  margin-top: 15px;
}
html, body {
  overflow-x: hidden;
}