/* General Styles */
body {
    font-family: 'Open Sans', sans-serif; /* Changed font to Open Sans for the whole site */
    background-color: #f5f5f5; /* Light gray background for the body */
    color: #333;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevents any horizontal scrolling */
    
}



/* Header and Navigation */
header {
    
     padding: 3% 0; /* Closer to the top menu */
}



nav {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    justify-content: center;
    align-items: center;
}

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

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    text-decoration: none;
    font-size: 14px; /* Smaller font for the top menu */
    color: #4f4f4f; /* Dark gray color for the menu text */
    transition: color 0.5s ease; 
    /* border-bottom: 1px solid transparent; */
}

nav ul li a:hover {
    color: #f0b429; /* Mustard yellow on hover */
    text-decoration: none;
}







/* Logo */
.logo {
    height: 60px; /* Slightly larger logo */
    width: auto;
    margin-right: 20%; /* Way more space between the logo and the navigation menu */
}










/* Section Styles */
section {
    /* padding: 5%; */
    

}



/* Make the Home section take up a good height but not too stretched */
#home {
    /* height: auto;  500px Reduced height to balance the content */
    display: flex;
    flex-direction: column;
    margin-left: 18%; /* Adjust the value as needed */
    margin-right: 10%; 
    /* margin-top: 1%; */
       
}

#homeO {
    height: auto; /* 500px Reduced height to balance the content */
    min-height: 500px;
    display: flex;
    flex-direction: column;
    margin-left: 12%; /* Adjust the value as needed */
    /* margin-right: 5%; */
    /* margin-top: 5%; */
    margin-bottom: 4%;
}



 h1 {
    color: #C49102; /* Mustard yellow for the welcome title */
    font-size: 1.4em; /* Slightly smaller titles */
    font-weight: 300; /* Slightly thicker than body but still thinner */
    font-family: 'Poppins', sans-serif;  
}

 
 h2 {
    color: #000000; /* Dark gray */
    font-size: 1.7em; /* Slightly smaller titles */
    font-weight: 300; /* Slightly thicker than body but still thinner */
    font-family: 'Roboto', sans-serif;  
}

 h3 {
    color: #4f4f4f; /* L gray #838383 */
    font-size: 1.2em; /* Slightly smaller titles */
    font-weight: 300; /* Slightly thicker than body but still thinner */
    font-family: 'Calibri', sans-serif;  
}


p {
            font-size: 0.9em; /* Smaller font for body text */
        }

#home2 {
    
    
    margin-bottom: 4%;
    margin-left: 12%; /* Adjust the value as needed */
    
}


.container {
    display: flex; /* Enables Flexbox layout */
    justify-content: space-between; /* Distributes space evenly between divs */
    
}

/* Individual box styling */
.box1 {
    width: 50%; 
    line-height: 1.7;
    margin-top: 0%;
    overflow-y: auto; /* Adds scroll if content exceeds 500px */
}

.box2 {
    width: 50%; 
    margin-top: 0%;
}

.box5 {
    margin-top: 0%;
    width: 60%; 
    line-height: 1.4;
    text-align: justify;
    margin-left: 10%;
	border-radius: 5px; /* Rounded button borders */
	background-color: white;
  	padding: 4%;
    
}

.box6 {
    
    width: 60%; 
    line-height: 1.4;
    text-align: justify;
    margin-left: 10%;
    
	 border-radius: 5px;  /* Rounded button borders */
	 background-color: #4f4f4f; 
  	 padding: 4%;
}
    h4 {
    color: #d3d3d3;
    font-size: 1.3em; /* Slightly smaller titles */
    font-weight: 300; /* Slightly thicker than body but still thinner */
    font-family: 'Calibri', sans-serif;  
    }

 h5 {
    color: white; 
    font-size: 1.4em; /* Slightly smaller titles */
    font-weight: 300; /* Slightly thicker than body but still thinner */
    font-family: 'Poppins', sans-serif;  
    }



#homewhite {
    height: auto;  Reduced height to balance the content */
    display: block;
    margin-left: 10%; /* Adjust the value as needed */
    margin-top: 5%;   
    margin-bottom: 5%;
}


.box7 {
    margin-top: -4%;
    width: 60%; 
    overflow: visible;
    
    line-height: 1.4;
    text-align: justify;
    margin-left: 10%;
	border-radius: 5px; /* Rounded button borders */
	/* background-color: white; */
  	padding: 4%;
    
}

.box8 {
    margin-top: 1%;
    width: 60%; 
    text-align: justify;
    
    
}



/* Initially hide the text */
#fade-text {
    opacity: 0; /* Start fully transparent */
    animation: fadeInAnimation 2s ease-in forwards; /* Fade in over 2 seconds */
}

/* Keyframes for the fade-in effect */
@keyframes fadeInAnimation {
    from {
        opacity: 0; /* Start fully transparent */
    }
    to {
        opacity: 1; /* End fully visible */
    }
}


/* INVESTMENTS */
 .containerI {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* 2 columns */
            gap: 20px; /* space between the boxes */
            /* max-width: 500px;  limit container width */
            /* margin: auto; */
            min-height: 350px; 
            
        }

        .boxI {
            width: 100%; /* Let the box take full width of its grid cell */
            /* height: 180px; */
	    padding: 0%;
            background-color: #FAF9D0; /* era #f0f0f0 */
            border: 1px solid #ccc;
            border-radius: 5px;
            transition: box-shadow 0.3s ease;
            transition: background-color 0.5s ease;
            box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); /* No shadow initially */
        }

        /* Hover effect with shadow on the bottom and left */
        .boxI:hover {
            box-shadow: -8px 8px 15px rgba(0, 0, 0, 0.3);
            background-color: #F5DF68;
        }


        .boxII {
            width: 100%; /* Let the box take full width of its grid cell */
	    height: 100%;            
	    padding: 3%;
            box-sizing: border-box;
	    color: #4f4f4f;
            transition: color 0.5s ease;

                h8 {
                  color: #FAF9D0; /* esta invisible */
		  transition: color 0.5s ease;
                }


        }

        /* Hover effect with shadow on the bottom and left */
        .boxII:hover {
            color: white; /* APARECE */
            
		h8 {
                  color: #A47E1B;;
                }

        }



.white-papers {
            
            padding: 20px;
            margin: auto;
            font-size: 1.3em; /* Slightly smaller titles */
            line-height: 2.4;
            font-family: 'Calibri', sans-serif; 
            
        }
        
        .white-papers ul {
            list-style-type: none;
            padding: 0;
        }
        .white-papers ul li {
            margin: 10px 0;
        }
        .white-papers ul li a {
            text-decoration: none;
            color: #838383; /* L gray era #4f4f4f*/  
            transition: color 0.5s ease;
            font-weight: 300; /* Slightly thicker than body but still thinner */
        }
        .white-papers ul li a:hover {
            /* text-decoration: none; */
            color: #C49102; /* #C49102   */
        }



.container2 {
    display: flex; /* Enables Flexbox layout */
    justify-content: space-between; /* Distributes space evenly between divs */
    width: 90%; /* Adjust as needed */
    margin-top: 3%;
}

/* Individual box styling */
.box3 {
    width: 50%; 
    margin-top: 5%;
    
}

.box4 {
    width: 30%; 
    margin-top: 5%;
    margin-right: 20%;
}


/* Contact Section */
#contact {
    background-color: #4f4f4f; /* Dark gray background same as the footer */
    color: white;
    width: 100%; 
    min-height: 400px; 
    margin: 0 auto; /* Centers the content */
    display: flex;
    /* flex-wrap: wrap;   Ensures content wraps if it overflows */
    position: relative; 
}






#contact-info {
    display: block; 
    
    margin-left: 30%; 
    color: white;
    font-size: 16px; /* Slightly larger font size for email and address info */
    

}



#contact-info p {
    color: #f0b429; /* Mustard yellow for labels */
    margin-bottom: 10%; /* Small margin for labels */
}

#contact-info span {
    color: white; /* White for the actual email and address text */
    display: block;


}

#contact-info a {
    text-decoration: none;
    color: white;
    transition: color 0.5s ease;
}


#contact-info a:hover {
    color: gray;
}

#contact-info a:visited {
    color: white;
}

#contact-info a:active {
    color: white;
}

#contact-info a:focus {
    color: white;
}



/* Styling for the vertical menu */
.vertical-menu {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: left; 
    background-color: #4f4f4f;
    
}

/* Styling for the menu list */
.vertical-menu ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
   /* width: 100%;  Make sure the list spans full width */
}

/* Ensure list items are treated as block elements */
.vertical-menu li {
    display: block; /* Ensure each list item is a block element */
    margin: 14% 0; /* Space between menu items */
    /* width: 100%;  Full width for each list item */
    text-align: left; 
}

/* Menu links styling */
.vertical-menu a {
    text-decoration: none;
    color: #999999;
    font-size: 13px;
    display: block; /* Ensures link takes full width of parent li */
    /* padding: 10px; */
    /* width: 100%; */
}

.vertical-menu a:hover {
    color: #d3d3d3; /* Change color on hover */
}


/* Footer Section */
footer {
    background-color: #4f4f4f; /* Dark gray background for the bottom part */
    padding: 2%;
    font-size: 14px;
    color: #d3d3d3; /* Light gray font color for the footer */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative; /* Allows z-index to take effect */
    z-index: 10; /* Ensure it's higher than other elements */
    
}

footer a {
    color: #d3d3d3; /* Light gray color for links in the footer */
    text-decoration: none;
    transition: color 0.5s ease;
}

footer a:hover {
    color: gold;
}




button {
    background-color: #f0b429;
    color: #4f4f4f; /* Dark gray for Submit button text */
    border: none;
    padding: 20px 50px; /* Way larger Submit button */
    font-size: 14px; /* Slightly smaller font size for Submit button */
    cursor: pointer;
    text-transform: uppercase; /* Submit text in all caps */
    border-radius: 5px; /* Rounded button borders */
}

button:hover {
    background-color: #e1a525;
}