img.icentro {

    margin: 0 auto;

    margin-top: 5px;

    margin-bottom: 5px;

    height: auto !important;

    width: auto !important;

    max-width: 75%;

    display: block;

}



img.ilato {

    float: left;

    margin-right: 5px;

    height: auto !important;

    width: auto !important;

    max-width: 40%;

    display: block;

}



/* Add these to your existing styles */



/* Make html and body full height for sticky footer */

html, body {

    height: 100%;

}



body {

    margin: 0;

    font-family: Manrope, Arial, sans-serif;

    background: #fff;

    color: #111;

    background-image: url('images/hero.jpg');

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    background-color: white;

    background-attachment: fixed;

    display: flex;

    flex-direction: column; /* Stack children vertically */

    min-height: 100vh; /* Ensure full viewport height */

}



/* Create a wrapper for scrollable content */

.main-content {

    flex: 1; /* Takes remaining space */

    overflow-y: auto; /* Enables scrolling */

    padding-top: 80px; /* Space for fixed topbar (adjust based on your topbar height) */

    padding-bottom: 20px; /* Optional: space above footer */

}



/* Update your topbar to have a z-index to stay on top */

.topbar {

    position: fixed;

    top: 0;

    width: 97%;

    padding: 20px 40px;

    display: flex;

    justify-content: space-between;

    background: white;

    border-bottom: 1px solid #eee;

    z-index: 1000; /* Ensure it stays above content */

}



/* Footer stays at bottom naturally */

.social-footer {

    background-color: #1a1a2e;

    color: #fff;

    /* padding: 2rem; */

    text-align: center;

    margin-top: auto; /* Pushes footer to bottom when content is short */

}



body::before {

    content: '';

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(255, 255, 255, 0.3); /* White overlay */

    z-index: -1;

}



/* TOP BAR */

.topbar a {

  margin-left: 20px;

  text-decoration: none;

  color: black;

  font-size: 20px;

}



.logo {

  font-size: 20px;

}



.description {

  font-size: 20px;

  padding-top: 50px;

}



.navmenu {

  margin-right: 20px;

}



/* HERO */

.hero {

  height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding-left: 80px;

}



.hero-about {

  display: flex;

  flex-direction: column;

  padding-left: 80px;

  font-size: 30px;

  margin-bottom: 40px;

}



.hero-about h1 {

  font-size: 70px;

  margin-top: 100px;

}



.hero-about p {

  margin: 10px;

  text-align: justify;

  margin-right: 70px;

}



.hero h1 {

  height: 7vh;

  font-size: 70px;

  margin: 0;

}



.hero p {

  font-size: 18px;

  opacity: 0.6;

}



/* BUTTON */

.btn {

  margin-top: 20px;

  display: inline-block;

  padding: 10px 20px;

  border: 1px solid black;

  text-decoration: none;

  color: black;

  width: fit-content;

}



.btn:hover {

  background: black;

  color: white;

}



.social-links {

  list-style: none;

  padding: 0;

  margin: 1rem 0;

  display: flex;

  justify-content: center;

  gap: 1.5rem;

  flex-wrap: wrap;

}



.social-links li {

  display: inline-block;

}



.social-links a:hover {

  transform: translateY(-3px);

}



/* Individual brand colors on hover */

.social-links a:hover .fa-facebook { color: #1877f2; }

.social-links a:hover .fa-twitter { color: #1da1f2; }

.social-links a:hover .fa-instagram { color: #e4405f; }

.social-links a:hover .fa-linkedin { color: #0077b5; }

.social-links a:hover .fa-youtube { color: #ff0000; }

.social-links a:hover .fa-tiktok { color: #000000; text-shadow: 0 0 3px #00f2ea; }

.social-links a:hover .fa-github { color: #333; }

.social-links a:hover .fa-pinterest { color: #bd081c; }

.social-links a:hover .fa-spotify { color: #1DB954; }    /* Spotify green */

.social-links a:hover .fa-soundcloud { color: #ff7700; } /* SoundCloud orange */



/* contact form */

/* Contact form styles */

.contact-section {

    max-width: 600px;

    margin: 0 auto;

    margin-top: 100px;

    padding: 20px;

    text-align: center;

}



.form-group {

    margin-bottom: 20px;

}



.form-group input,

.form-group textarea {

    width: 100%;

    padding: 10px;

    border: 1px solid #ddd;

    border-radius: 4px;

    font-size: 20px;

}



.form-group button {

    background: #9b5ad8;

    color: white;

    padding: 12px 30px;

    border: none;

    border-radius: 4px;

    cursor: pointer;

    font-size: 16px;

}



.form-group button:hover {

    background: #5a67d8;

}



.validation {

    color: red;

    font-size: 14px;

    margin-top: 5px;

}



.alert {

    padding: 15px;

    border-radius: 4px;

    margin-bottom: 20px;

    display: none;

}



.alert-success {

    background-color: #d4edda;

    color: #155724;

    border: 1px solid #c3e6cb;

}



.alert-danger {

    background-color: #f8d7da;

    color: #721c24;

    border: 1px solid #f5c6cb;

}



.horizontal-tile {

    padding-bottom: 20px;

    display: flex;

    flex-direction: row;  /* Horizontal layout */

    gap: 20px;            /* Space between items */

    flex-wrap: wrap;      /* Wrap to next line on small screens */

}



img {

    /* width: 300px; */

    height: 200px;

    

}



.social-footer {

    /* background: linear-gradient(to top, rgba(50, 50, 50, 0.85) 0%, rgba(200, 200, 200, 0.3) 40%, rgba(255, 255, 255, 0) 100%); */

    background: linear-gradient(to top, rgba(50, 50, 50, 0.85), rgba(255, 255, 255, 0) 80%);

    /* background: linear-gradient(to top, rgba(80, 80, 80, 0.9), rgba(255, 255, 255, 0)); */

    /* No backdrop-filter for complete transparency */

    color: #333; /* Dark text for readability on the lighter part */

    padding: 0rem 2rem 1.0rem; /* More padding at top for gradient transition */

    text-align: center;

    border-top: none;

}



/* Text color transitions to white at the bottom */

.social-footer h3 {

    color: #333;

    margin-bottom: 0.8rem;

    font-size: 1.2rem;

    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); /* Light shadow for readability */

}



.social-links {

    list-style: none;

    padding: 0;

    margin: 0.8rem 0;

    display: flex;

    justify-content: center;

    gap: 1.5rem;

    flex-wrap: wrap;

}



.social-links a {

    color: #444;

    text-decoration: none;

    font-size: 1.5rem;

    transition: transform 0.3s, color 0.3s;

    display: inline-block;

    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);

}



/* Icons become lighter towards the bottom */

.social-links li:last-child a,

.social-links li:nth-last-child(2) a {

    color: #555;

}



.copyright {

    font-size: 0.875rem;

    opacity: 0.8;

    margin-top: 0.8rem;

    color: #333; /* Light text for dark background area */

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

}