/* 
Theme Name: Second Child Theme
Theme URI:
Description: My second child theme!
Author: hlindner
Textdomain: hlin-second
Author URI:
Template: highstarter-master
Tags: responsive-layout, custom-colors, custom-fonts, modern-design, typography-focused, light-theme, minimalist, elegant, shadow-effects, hover-effects, center-aligned, pastel-colors
Version: 1.0
*/
body {
    background-color: #49176E !important;
    color: #2b2b2b !important;
    margin-top: auto !important
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #FFF;
  display: flex;
  justify-content: center;
  width: 100%;
}

ul li a {
  display: block;
  color: #000;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
  opacity: 75%;
  color: #404040;
}


/* Limit logo size */
ul img {
    max-width: 60px;   /* adjust as needed */
    height: auto;
    padding-bottom: 10px;
}


div.site-header-wrapper::after {
    display: none;
}

/* Ensure full page height for vertical centering */
body, html {
    height: 100% !important;
    margin: 0 !important;
}


 div.container {
    margin: 0 auto;
    max-width: 1200px; /* Adjust as needed */
    padding: 15px;
    padding-bottom: 100px;
    box-sizing: border-box;
}

.skip-link {
  background-color: #49176E !important;
  color: #FFFEFA !important;
}


body.archive.category .container {
    margin: 0 auto;
}

/* main {
    margin-left: 10vh !important;
} */

.students-container {
    display: flex;
    gap: 20px; /* Space between images */
    justify-content: center; /* Optional: centers the images */
    align-items: center; /* Optional: aligns images vertically */
}

.students {
    height: auto;
    width: 50%;
}

body h1, h2, h3, h4, h5, h6 {
    font-family: acumin-pro, sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    color: #fff;
}

nav {
    font-family: acumin-pro, sans-serif !important;
    font-weight: 700 !important;
    font-style: italic !important;
    font-size: 22px !important;
    
}

.fa-solid, .fa-brands {
    color: #A29061;
    font-size: 40px;
    
}

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

.icons {
    display: flex;
    justify-content: center;
    gap: 10px;
    /* margin-bottom: 10px; */
}

.footer-center .icons {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.footer-center p {
    margin: 5px 0;
    text-align: center;
    width: 100%;
}


iframe {
display: block;
margin: 0 auto;
width: 1000px; 
height: 450px;

}

h3 {
    font-size: 45px !important;
    text-align: center !important;
}

h1 {
    font-size: 70px !important;
}

h2 {
    font-size: 65px !important;
}

h2.mb-4 {
  color: #2b2b2b !important;
}

p, .footer-credits a, ol, li {
    font-family: source-sans-pro, sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 20px !important;
    color: #404040 !important;
}

header {
    background-color: #FFFEFA !important;
}

/* Updated footer styles */
footer {
    background-color: #FFF !important;
    width: 100% !important;
    height: auto;
    margin: 0 !important;
    padding: 15px 0 !important;
    box-sizing: border-box;
    text-align: center;
}

footer .container {
    max-width: 1200px; /* Match your main container */
    margin: 0 auto;
    padding: 10px 15px; /* Smaller padding */
}

footer .row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px; /* Reduce gap between elements */
    margin-bottom: 0 !important; /* Remove the mb-5 spacing */
}

.social-links {
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
}

/* .fa-brands {
    color: #2b2b2b;
    font-size: 30px !important; 
    margin-right: 0; 
} */

.theme, .copyright {
    font-size: 16px !important; /* Smaller text */
    margin: 0 !important; /* Remove default margins */
    padding: 2px 0; /* Minimal padding */
}

.theme {
    text-align: center;
    color: #404040;
}

.purple {
    color: #773AF5;
    font-style: italic;
}

.purple-border {
    border: 4px solid #773AF5;
}

div.block {
    background-color: #fff;
    height: auto;
    width: 75%;
    margin-right: 50px;
    border: 5px solid #A29061;
    margin: 0 auto; /* Centers the block */
    max-width: 800px; /* Adjust this width as needed */
    padding: 20px;
    box-sizing: border-box;
}

footer .row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.author {
    flex: 1;
    max-width: 40%;
    margin-right: 50px;
    border-radius: 55px;
    box-shadow: 25px 0px #DEDBCD;
}


.social-links {
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
}

.theme {
    text-align: center;
    color: #404040;
    margin-top: 5px;
}


.heading-text {
    margin-top: 20px;
    text-align: center;   
}

.link-ex {
    font-weight: 700;
    color: #404040;
}

.link-ex:hover {
    color: #773AF5;
    text-decoration: underline;
    
}

button {
    font-family: acumin-pro, sans-serif !important;
     background-color: #49176E !important;
     color: #FFFEFA !important;
     width: 100% !important;
     border-radius: 55px !important;
    font-weight: 700;
}

button:hover {
    opacity: 0.7 !important; 
}

.search-form {
    align-content: center;
}

.search-form input[type="search"]:active, .search-form input[type="search"]:focus, .search-form input[type="search"]:focus-visible {
    
            box-shadow: 0 0 0 1px #49176E !important;
            border: #49176E solid 2px !important;
            outline: none;
}

.search-form input[type="submit"] {
    background-color: #49176E;
}



.full-width {
    max-width: 100%;
    /* margin-left: 10vh; */
}

article {
    border: 5px solid #A29061;

}

.error {
  display: flex;
  justify-content: center;
}

.shadow-radius {
    border-radius: 55px;
    box-shadow: 25px 0px #DEDBCD;
    
}
.darkpurple {
    color: #6c3082;
}

.margin-right {
    margin-right: 50px;
}

.project-images {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Initial style */
}

.project-images:hover {
    transform: scale(1.05); /* Grows image by 5% */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); /* Adds shadow */
}

.expandable {
    cursor: pointer;
    transition: transform 0.3s ease;
}
.expandable:active {
    transform: scale(3.5);
    z-index: 1;
}

.bck-to-home {
    margin-top: 20px;
}

button.menu-toggle {
    width: 3.9rem !important;
}

@media (max-width: 768px) {
  iframe {
    width: 100%;
    height: calc(100vw * 0.45); /* 450 / 1200 = 0.375 */
  }
}

@media (max-width: 768px) {
  ul {
    flex-wrap: wrap; /* Allow navigation items to wrap */
    padding: 5px 0;
  }
  
  ul li a {
    padding: 10px 12px; /* Reduce padding on smaller screens */
    font-size: 18px; /* Slightly smaller font */
  }
  
  nav {
    font-size: 18px !important; /* Reduce nav font size */
  }
  
  div.container {
    padding: 10px; /* Reduce container padding */
  }

  footer {
    overflow-x: hidden;
    padding: 10px 0 !important;
  }
  
  footer .container {
    padding: 10px;
    max-width: 100%;
  }
  
  .fa-solid, .fa-brands {
    font-size: 25px; /* Smaller icons */
  }
  
  .social-links {
    gap: 8px;
  }
}

@media (max-width: 500px) {

  .students-container {
    flex-direction: column;
  }

  .students {
    height: auto;
    width: 100%;
}
}

/* For small mobile screens (375px and below) */
@media (max-width: 375px) {
  ul {
    overflow-x: hidden; /* Prevent horizontal overflow */
  }
  
  ul li a {
    padding: 8px 8px; /* Further reduce padding */
    font-size: 16px;
  }
  
  nav {
    font-size: 16px !important;
  }
  
  ul img {
    max-width: 45px; /* Smaller logo */
    padding-bottom: 5px;
  }
  
  body {
    overflow-x: hidden; /* Prevent horizontal scroll */
  }
  
  header {
    overflow-x: hidden;
  }

  footer {
    overflow-x: hidden;
    width: 100vw !important; /* Force full viewport width */
    max-width: 100vw;
  }
  
  footer .container {
    padding: 8px 10px;
    max-width: 100%;
    width: 100%;
  }
  
  .theme, .copyright {
    font-size: 14px !important;
  }
  
  .fa-solid, .fa-brands {
    font-size: 22px;
  }
  
  .social-links {
    gap: 6px;
  }
}

/* For very small screens (320px) */
@media (max-width: 320px) {
  ul li a {
    padding: 6px 5px;
    font-size: 14px;
  }
  
  ul img {
    max-width: 40px;
  }

  @media (max-width: 320px) {
  .theme, .copyright {
    font-size: 12px !important;
    padding: 1px 0;
  }
  
  .fa-solid, .fa-brands {
    font-size: 20px;
  }
  
  .social-links {
    gap: 5px;
  }
  
  footer .container {
    padding: 5px 8px;
  }
}
}