/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*End of CSS reset*/
/*main {
    padding-top: 60px; /* Adjust the padding-top to match the height of your navigation bar */
/*} */ 

body {
    background-color:#8CB0AE;
    margin: 0;
    padding: 1%;
    font-family: Arial, sans-serif;
    min-height: 100%;
    overflow-y:scroll;
    overflow-x: hidden;
    
}

#bgimag{
    position:absolute;
    background-image:url('../resources/dxreadyBg.png');
    left:0px;
    background-size: 100vw 100vh; 
    background-repeat: no-repeat;
    background-position-y:15px;
    background-position-x:center;
    background-attachment: fixed;
    height:98%;
    width:100%; 
    z-index: -1;
}
.content {
    min-height: calc(100vh-10px);
}
header {
    position:fixed;
    left:0px;
    top:0px;
    height:10%;
    min-height: 10%;
    width:100%;
    /*padding: 5px; /*ver si es necesario ponerle*/
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index:10;
  
}

label.logo {
    position: fixed;
    margin-left:0.5%;
    height: 10%; /* Adjust the height as needed */
    min-height: 1em;
    width:7%;
    min-width:100px;
    padding: 0.5%;
    background-image: url('https://www.stealthsimulation.com/wp-content/uploads/2018/04/logoSS-top.png');/*puse www 2/25/25*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;    
    overflow:hidden;
 
}

.fixed-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    padding: 10px; /* Add padding to improve readability */
    z-index: 10; /* Ensure the navigation bar is above other content */
  
}

nav ul {
    margin:0;
    padding: 0; 
    position: fixed;
    top:0;
    right:0; 
    display: flex;
    justify-content:right; /* Center items horizontally */
    align-items: center;     /* Center items vertically */
    list-style-type: none;    /* Remove default list bullet points */
    background-color:white;     
    height:10%;
    width:80%;     /* Remove default padding */
}

nav li {
    margin: 0 20px; /* Adjust horizontal spacing between items */
    width: calc(min-content + 100px);
    background-color:white;     
    height:15%; 
    height: 2rem;
}

nav a img {
  width: 50px; 
  height: 50px;
  width: 5rem; 
  height: 2rem;
  vertical-align: top;
  justify-content: center;
}

nav ul li a{
    margin-top: 1%;
    float: left;
    display: block;
    text-decoration: none;
    color:#448B84;
    background-color:white;
    font-size: 20px;/*1rem;*/
    text-align: center;    
}

nav ul  li a:hover{
      color:#8CB0AE;
}

.toggle_btn{
    position:fixed;
    right:1rem;
    width: 3rem;
    aspect-ratio: 1;
    background-image:url('../resources/menubars.png');
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    z-index: 20;
    display:none; 
       

}

.changeimage{
  
    position:absolute;
    top:0.9rem;
    right:1.5rem;
    width: 3.5rem;
    height: 1.5rem;
    background-image:url('../resources/closeIcon.png');
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    display:none;
  
}

.dropdown-menu{
    display:none;
    position:absolute;
    right:0.2rem;
    top:0.5rem;
    width:15rem;
    height: 0rem;
    background-color:white ;/*#8ae0d7 */    
    border-radius: 1rem;
    overflow:hidden;
    margin:20px;
    transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   
}

.dropdown-menu.open{
    height:22rem;
}

.dropdown-menu li{
    padding: 0.7rem;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    margin: 0 3px; /* Adjust horizontal spacing between items */
    z-index: 10;
    width: calc(min-content + 1rem);
}

.dropdown-menu ul li a{
    margin-top: 1%;
    float: left;
    display: block;
    text-decoration: none;
    color:#448B84;
    background-color:transparent;
    font-size: 20px;
    text-align: center; 
    z-index: 10;   
}

.dropdown-menu a img {
    width: 5rem; 
}

#back-to-top {
    display: none; 
    position: fixed;
    bottom: 20px;
    right: 1%;	
    background-color:#448B84;
    color: white;
    font-size:15px; 
    border-radius:8px;
    width: fit-content;
    padding: 4px;
    z-index: 20; 
    
}

#back-to-top:hover {
    background-color: white;
    color: #7A787A;
}

footer {
    position:fixed;
    height:10px;
    text-align:center;
    justify-content:center;
    bottom: 4px;
    width:100%;
    padding: 4px;
    
}
 
@media (max-width:45em){
    nav ul{
       display: none;
       /* padding: min(30vh,10rem) 2em;*/
    }
    .toggle_btn, .changeimage{
        display:block;
        z-index: 20;
           
    }

   .dropdown-menu {
        display: block;
        z-index: 10;
       
    }
}