/* Variables */
* {
  --colorBlue1: rgb(99, 177, 255);
  --colorBlue2: rgb(50, 150, 255);
  --colorBlue3: rgb(0, 127, 255);
  --colorBlue4: rgb(0, 115, 245);
  --colorBlue5: rgb(0, 95, 215);
}



/* General Styles */
body {
  font-family: Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  background-color: #f8f9fa;
  color: #333;
}

h3 {
  font-size: 1.75rem; /* Default for headings */
}

h5 {
  font-size: 1.2rem; /* Default for headings */
  margin-top: 35px;
  margin-bottom: 15px;
}

h6 {
  font-size: 0.9rem; /* Default for headings */
  margin-top: 15px;
  margin-bottom: 10px;
}

p {
  font-size: 0.95rem; /* Default for paragraphs */
  /* line-height: 20px; */
  margin-left: 5px;
  margin-bottom: 3px;
}


header {
  background-color: var(--colorBlue4);
  width: 100%;
  margin: 0 auto;
  padding: 10px 0;
  border-bottom: 8px solid var(--colorBlue1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav {
  width: 100%;
}


.text-feature {
  text-decoration: none;
  color: var(--colorBlue3);
}

footer .container {
  flex-direction: column;
  text-align: right;
}


main a:hover {
  color: var(--colorBlue4);
}


.logo1 {
  height: 75px;
  width: 350px;
  margin-top: 8px;
  margin-top: 5px;
}


/* Buttons */
.btn-primary {
  margin: 5px;
  padding: auto;
  background-color: var(--colorBlue2);
  /* width: 110px; */
  width: 25%;
  max-width: 120px;
  min-width: 90px;
  border-radius: 5px;
  color: white;
  /* font-size: 1em; */
}
.btn-primary:hover {
  background-color: var(--colorBlue1);
  border: none;
}


/* Buttons */
.btn-button {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  font: 1em sans-serif;
  background-color: var(--colorBlue3);
  width: 150px; 
  height: 45px; 
  border-radius: 5px;
  color: white;
  text-align: center;
}

.btn-button:hover {
  background-color: var(--colorBlue5);
  color: white;
}


/* Images */
.img-responsive {
  max-width: 85%;
  height: auto;
  margin: 15px;
}


/* .img-screen  {
  min-width: 50%; 
  min-height: fit-content; 
  max-width: 95%; 
  max-height: 95%; 
  position: fixed; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%,-50%);
} */


.img-layout {
  max-width: 95%;
  height: auto;
  margin: 15px;
}


/* Lines */
.line-title {
  margin: auto;
  border-top: 5px solid;
  color: var(--colorBlue2);
  width: 100%;
}

.line {
  margin-top: 35px;
  margin-bottom: 25px;
  border-top: 2px solid;
  color: var(--colorBlue1);
  width: 100%;
}





/* Responsive Design */
@media (max-width: 768px) {
  header nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }

  .logo1 {
    height: fit-content;
    width: 60%;
  }

  .btn-primary {
    margin: 5px;
    padding: auto;
    /* width: 100px; */
    /* max-width: 90px; */
    font-size: 0.95em;
    /* font-weight: bold; */
  }

  footer .container {
      flex-direction: column;
      text-align: center;
  }

  body {
      font-size: 14px;
  }

  h3 {
      font-size: 1.5rem;
  }

  h5 {
    font-size: 1rem;
  }

  p {
      font-size: 0.8rem;
  }

  table, td, th {
    font-size: 0.5rem;
  }

}