/* Add this to your Tailwind CSS or a separate stylesheet */

body {
    font-family: Space Mono, Roboto Mono, monospace;
    background-color: white; 
   
    transition: background-color 0.5s ease, color 0.5s ease;
}


.logo {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 50px;
    text-align: center;
}
#menu:not(.hidden) ~ .overflow-hidden {
    display: none;
}

#about:hover {
    color: #4295ce; /* Darker blue on hover */
}

/* li{
    font-size: 2.5rem;
font-weight: 700;
letter-spacing: .2em;
line-height: 50px;
text-align: center;
} */
a svg{

    margin-left:20px;
    color: #002244;
}

/* header a{

    margin-left:20px;
    color: #002244;
} */
p {
    color: #002244; /* Turquoise for links */
    transition: color 0.5s ease;
}
footer a{
    
    margin-left:10px;
    margin-right:10px;
    color:#002244;
  
}

body.dark  footer a{
    color:white ;
  
}
footerimg{
    box-shadow: 4px 4px 2px #4295ce;
}
.text{
     padding-bottom: 0px;
    padding-top: .15em;
    color: #002244;
    text-decoration: none;
    font-family: Montserrat, sans-serif;
    font-size: 1.5rem;
    transition: background-color 0.2s ease-in-out;
        background: linear-gradient(180deg, #4295ce 0, #4295ce);
        background-position: 0 100%;
        background-repeat: repeat-x;
        background-size: .12em .12em;
        padding-bottom: .15em;
        padding-top: .15em;
        margin-top: 0.5%;
        
}
.text:hover{
   background-color: #4295ce;
   color: grey; 
}
.styled-content {
    font-size: 1.5rem;
    line-height: 2em;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    font-weight: 300;
    margin: 0 auto;
    max-width: 900px;
    padding: 0 2em;
  }
  .styled-heading{
    margin: 0 auto;
    max-width: 900px;
    padding: 1em;

  }
  a:hover{
    color:gray;
    
  }

  main.pb-7{
    padding-bottom: 0px;
  }
  h1{ font-size:  2em !important;
font-weight: bold !important; }
  h2 { 
    font-size: 24px !important;
    font-weight: bold !important;
  }
  h3{ font-size: 1.17em !important;
    font-weight: bold !important;
color: #002244}
body.dark h3{ 
color:white}
  h4{ font-size: 1em !important;
    font-weight: bold !important;}
  h5{ font-size: 0.83em !important;
    font-weight: bold !important;}
  
  /* Default Light Mode */
 header, footer {
      background-color:#b2f5ea;
    color: #002244;
      transition: background-color 0.5s ease;
  }

/* Dark Mode */
body.dark {
    background-color: #002244;  /* Dark Blue */
    color: white  /* Turquoise */
}
body.dark  #dark-mode-icon{
    fill: white;
}


/* Header and Footer in Dark Mode */
body.dark header, 
body.dark footer {
    background-color: #00172d;
    transition: background-color 0.5s ease;
}

/* Link Styling */
body.dark a{
    color:white; /* Turquoise for links */
    transition: color 0.5s ease;
}
body.dark p{
    color: white;/* Turquoise for links */
    transition: color 0.5s ease;
}

body.dark a:hover {
    color: lightgrey; /* Lighter turquoise */
}

/* Button & Interactive Elements */
body.dark .text:hover {
    background-color: #4295ce;
    color: white;
}

/* Shadow Effect on Images */
body.dark .footerimg {
    box-shadow: 4px 4px 2px  white; /* Adjusted to match turquoise theme */
}
/* Default Light Mode Button */
.contact button {
    background-color: #002244; /* Dark blue in dark mode */
    color: white;

}
#menu-toggle svg {
    stroke: #002244; /* Dark blue in light mode */
    transition: stroke 0.5s ease;
}

/* Dark Mode */
body.dark #menu-toggle svg {
    stroke: white; /* Turquoise in dark mode */
}

.contact button:hover {
    background-color: #4a5568;
    color:white;
}
input{
    background-color: #002244 ;
    color: #b2f5ea;
}
body.dark input{
    background-color: white ;
    color: black;
}
textarea{
    background-color: #002244 ;
    color: #b2f5ea;
}
body.dark textarea{
    background-color: white ;
    color: black;
}


.country{
    background-color: #002244 ;
    color: #b2f5ea;
}
body.dark .country{
    background-color: white;
    color: black;
}

/* Dark Mode Button */
body.dark .contact button {
    
    background-color: white;
    color: #002244;
    transition: background-color 0.5s ease, color 0.5s ease;
}

body.dark .contact button:hover {
    background-color: gainsboro; /* Darker blue on hover */
}


/* Dark Mode */
body.dark #more-button {
    color: white;
}
h1 {
    color:  #002244;
}
body.dark h1 {
    color:  white;
}
 h2 {
    color:  #002244;
}
body.dark h2 {
    color:  white;
}
/* Dropdown Menu */
#dropdown-menu {
    background-color: white; /* Light Gray */
    transition: background-color 0.3s ease;
     width: auto; /* Auto width based on content */
  
}

/* Ensure links take full width */
#dropdown-menu a {
    display: block; /* Full width */
    width: 100%; /* Ensure it covers the full width */
    padding: 10px 15px; /* Padding for better spacing */
    text-align: left; /* Align text to the left */
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap; /* Prevent text wrapping */
    color: #002244;
}

/* Light Mode Hover */
#dropdown-menu a:hover {
    background-color: #b2f5ea;
    color: #002244;
}

/* Dark Mode */
body.dark #dropdown-menu {
    background-color: white; /* Dark Blue */
}

body.dark #dropdown-menu a {
    color: #002244;
}

/* Dark Mode Hover */
body.dark #dropdown-menu a:hover {
    background-color: #002244;
    color: white;
}

/* Active (Selected) State */
#dropdown-menu a:active,
#dropdown-menu a:focus {
    background-color: #b2f5ea; /* Darker Blue */
    color: white !important;
}

/* Dark Mode Active (Selected) State */
body.dark #dropdown-menu a:active,
body.dark #dropdown-menu a:focus {
    background-color: white; /* Turquoise */
    color: #002244 !important;
}
/* Dropdown Menu */
#language-dropdown {
    background-color:white;
    
    transition: background-color 0.3s ease;
    min-width: 150px;
    width: auto; /* Auto width based on content */
   
}

/* Dark Mode */
body.dark #language-dropdown {
    background-color: white;
}

/* Ensure links take full width */
#language-dropdown a {
    display: block; /* Full width */
    width: 100%; /* Fill the dropdown width */
    padding: 8px 12px;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap; /* Prevent wrapping */
    color: #002244;
    text-align: left; /* Align text properly */
}

/* Dark Mode Links */
body.dark #language-dropdown a {
    color: #002244;
}

/* Light Mode Hover */
#language-dropdown a:hover {
    background-color: #b2f5ea;
    color: #002244;
}

/* Dark Mode Hover */
body.dark #language-dropdown a:hover {
    background-color: #002244;
    color: white !important;
}

/* Language Button in Dark Mode */
body.dark #language-button {
    color: white;
}

.resume-container{
    background-color:#002244 ;
   
}
.resume{
    
    border-left: 4px solid #002244 ;

}
body.dark .resume-container{
    background-color:white ;
   
}
body.dark .resume{
    
    border-left: 4px solid white ;

}

.vision{
    background-color: #e2e8f0;
}
body.dark .vision{
    background-color: #4a5568;
}
.values{
    background-color: #b2f5ea;
}
body.dark .values{
    background-color: #00172d ;
}
.my-values{
    background-color: white;
}
body.dark .my-values{
    background-color:  #002244;

}
.aboutme-quote{

    border-left: 4px solid #002244 ;
    color:#002244 ;
}
body.dark .aboutme-quote{

    border-left: 4px solid white ;
    color:white ;
}
.service{
    background-color: #b2f5ea;
}
body.dark .service{
    background-color: #00172d;
}
.faq{
    background-color: #b2f5ea;
}
body.dark .faq{
    background-color: #00172d;
}
.references{
    background-color: #b2f5ea;
}
body.dark .references{
    background-color: #00172d;
}

.scroll-container {
    display: flex;
    animation: scroll 5s linear infinite;
    min-width: max-content; /* Ensures all elements fit properly */
}

@keyframes scroll {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

        .group:hover {
            animation-play-state: paused;
        }

        .imprint{

            background-color: #b2f5ea;
        }
        body.dark .imprint{

            background-color: #00172d;
        }

        .privacy{
            background-color: #b2f5ea;
        }
        body.dark .privacy{

            background-color: #00172d;
        }

        .mobile-more{
            color:white !important;
        }
        .mobile-nav{
            color:white !important;
        }