* {
      padding: 0;
      margin: 0;
      box-sizing:border-box;
      font-family: sans-serif;
    }

    header {
      height: 10vh;
      background: rgb(10, 20, 47);
      color: white;
      top: 0;
      z-index: 1000;
      position: fixed;
      /* alinha logo e menu */
      display:flex;
      justify-content: space-between;
      align-items: center;
      width:100%
    }

    .espace{
        height: 10vh;
        width:100%
    }

    .custom-form label {
    color: white; /* Substitua pela cor desejada */
}

.help-text {
    color: white; /* Define a cor do texto como branco */
    font-style: italic; /* Opcional: deixa o texto em itálico */
    margin-top: 4px; /* Adiciona espaço entre o campo e o texto */
}


    header nav {
      display:flex;
      justify-content: flex-end;
    }

    nav {
      height: 100%;
    }

    nav a {
      padding: 0 2.5em;
      text-decoration: none;
      color: lightgray;
      overflow: hidden;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .subnav a {
      padding: 0 4em;
      text-decoration: none;
      font-size: 1rem;
      color: lightgray;
      overflow: hidden;
      height: 100%;
    }


    .subnational {
      text-decoration: none;
      font-size: 1rem;
      color: lightgray;
      overflow: hidden;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .subnav-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
      z-index: 10;
      margin-top: -22px;
      margin-left: 10px;
      margin-right: 10px;
      max-height: 600px;
      overflow-y: auto;

    }

    .subnav-content a {
      color: black;
      padding: 12px 20px;
      text-decoration: none;
      display: block;
      font-size: 14px;

    }

    .subnav-content a:hover {
      background-color: #0A142FFF;
      color: lightgray;
    }
    .subnavbtn {
        z-index: 2;
    }


    .subnav:hover .subnav-content,
    .subnav-content:hover {
        display: block;
    }
    main {
      display: flex;
      margin: auto;
      flex-direction: column;
      min-height: 95vh;
      background-color:white;
      box-sizing: border-box;
       padding: 0px; /* Espaçamento interno */
      width:100%;

    }

    .subnav-content::-webkit-scrollbar {
        width: 10px;
    }

    .subnav-content::-webkit-scrollbar-thumb {
        background-color: #0A142FFF;
        border-radius: 1px;
    }

    .conteudo {
        width: 100%;
        max-width: 1200px; /* Limita a largura máxima */
        margin:auto;
        padding : 10px;
    }

    button {
        background: rgb(10, 20, 47);
        border-radius: 4px;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 100px;
        cursor: pointer;
    }

    .loginb{
        background: white;
        color: rgb(10, 20, 47);
        padding: 14px 30px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 7px 15px;
        cursor: pointer;
    }

    .loginb:hover{
        background-color: rgb(	211,211,211);

    }


    button a{
        color: rgb(10, 20, 47);
        text-align: center;
        text-decoration: none;
    }

.form-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f5f5f5;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        font-family: Arial, sans-serif;
    }

.form-row .form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #aaa;
    border-radius: 5px;
    font-size: 16px;
    gap:10px;
}

.form-row .form-group input:focus {
    border-color: #0056b3;
    box-shadow: 0 0 5px rgba(0, 86, 179, 0.5);
}

  .form-row {
        display: flex;
        gap: 20px;
        margin-bottom: 50px;
  }

    /* Styling for each form group */
    .form-group {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px; /* Altere o valor para o espaçamento desejado */

    }

    .form-actions {
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }
    .btn {
        text-decoration: none;
        padding: 10px 20px;
        border-radius: 5px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        transition: background-color 0.3s ease;
        cursor: pointer;
    }

    .btn-cancel {
        background-color: #d9534f;
        color: #fff;
    }

    .btn-cancel:hover {
        background-color: #c9302c;
    }

    .btn-save {
        background-color: #5cb85c;
        color: #fff;
        border: none;
    }

    .btn-save:hover {
        background-color: #4cae4c;
    }

    .btn-delete {
        background-color: #f0ad4e;
        color: #fff;
    }

    .btn-delete:hover {
        background-color: #ec971f;
    }

.toast-container {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1055;
}

.modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }
    .modal.hidden {
        display: none;
    }
    .modal-content {
        background: white;
        padding: 20px;
        border-radius: 8px;
        text-align: center;
    }
    .modal-actions button {
        margin: 5px;
    }

.toast-static {
    padding: 10px;
    margin-bottom: 10px;
    background-color: #d4edda; /* Verde claro para sucesso */
    border: 1px solid #c3e6cb;
    border-radius: 5px;
    color: #155724;
    font-family: Arial, sans-serif;
    opacity: 1; /* Mensagem inicialmente visível */
    animation: fadeOut 3s ease-in forwards; /* Aplica a animação de fade-out */
}

@keyframes fadeOut {
    0% {
        opacity: 1; /* Totalmente visível */
    }
    100% {
        opacity: 0; /* Totalmente invisível */
                visibility: hidden; /* Para ocultar completamente */

    }
}

.fade-out {
    animation: fadeOut 3s ease-in forwards; /* Garantir que a animação seja aplicada */
}



    #mecanico{
      float:right;
    }

    .entrada{
      font-size: 22px;
    }



    .outro{
    text-align: center;
    padding: 20px;
    }

    footer {
      position: relative;
      height: auto;
      display: flex;
      flex-direction:column;
      justify-content: flex-end;
      align-items: center;
      background: #0A142FFF;
      color: white;
      text-align: center;
      padding: 20px 0;
      bottom: 0;
      width: 100%;
      box-sizing: border-box;
    }

    footer .creditos {
        background: #0A142FFF;
        width: 100%;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.24px;
        color: #ffffff;
        padding: 20px 0;
        margin: 0;
    }

    footer .creditos .container {
        display: flex;
        flex-wrap: wrap;
    }

    .container, .container-fluid {
        position: relative;
        width: 100%;
        padding: 0 20px;
    }


    footer .creditos .container div {
        text-align: right;
    }

    footer .rightsubmenu {
        color: white;
        font-size: 15px;
        margin-left: 200px;
    }


    .leftsubmenu{
        padding-left: 10px; /* Reduza este valor para mover mais para a esquerda */
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
        display: flex;
    }

    footer ul {
        padding-left: 180px;
        list-style: none;
        text-align: left;
    }

    footer .creditos a{
        color:#B5B5B9;
    }

    footer .creditos a:hover{
        transition: all ease-in-out .2s;
        -moz-transition: all ease-in-out .2s;
        -webkit-transition: all ease-in-out .2s;
        text-decoration: none;
        cursor: pointer;
        color: currentColor;
    }

    footer .creditos ul {
        font-size: 12px;
    }

    .sub-menu a {
        color: white;
        text-decoration: none;
    }

    p {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    footer .social {
        font-size: 0;
        padding: 5px 0;
        text-align: right;
        margin-top: -10px; /* Ajuste o valor conforme necessário */

    }

    .fa{
        padding: 6px;
    }



    .Serviços {
        padding-left: 240px;
        padding-right: 210px;
        padding-bottom: 20px;
    }

    .Serviços h2{
        font-size: 1.5rem;
        font-weight: 800;
        color: black;
        font-style: italic;
        line-height: 1.46;
        margin: 0.75em 0;
    }

    .Serviços p{
        font-size: 1.125rem;
        font-weight: 300;
        line-height: 1.56;
        color: #5d5c5c;
        margin: 1em 0;
    }

    .SMALL{
        font-size: 1.125rem;
        font-weight: 300;
        line-height: 1.56;
        color: #5d5c5c;
        margin: 1em 0;
    }

    .BIG {
        display: inline-block;
        font-size: 1.25rem;
        font-weight: bold;
        font-style: normal;
        color:black;
        line-height: 1.75;
        padding: 0.5em 0 0.5em 40px;
        position: relative;
    }

    div.h2{
        color: black;
        margin-left: auto;
        margin-right: auto;
    }

    .title{
        font-size: 3rem;
        font-weight: 835;
        font-stretch: normal;
        font-style: italic;
        line-height: 1.2;
        text-align: center;
        font-family: inherit;
        padding: 40px;
    }

    .title2{
        font-size: 3rem;
        font-weight: 835;
        font-stretch: normal;
        font-style: italic;
        line-height: 1.2;
        text-align: center;
        font-family: inherit;
        padding: 30px;
    }

    * {box-sizing:border-box}

    .slideshow-container {
      position: relative;
      margin: auto;
    }

    /* Hide the images by default */
    .mySlides {
      display: none;
    }
    .imagem{
        width: 100%;
        height: 600px;
        border-radius:10px;
        position:center;
    }


    /* Next & previous buttons */
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -22px;
      padding: 16px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
    background-color: rgba(0, 0, 0, 0.5); /* Preto translúcido com 50% de opacidade */
    }

    /* Position the "next button" to the right */
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
      background-color: rgba(0,0,0,0.8);
    }

    /* Caption text */
    .text {
      color: #f2f2f2;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
    }

    /* Number text (1/3 etc) */
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .active, .dot:hover {
      background-color: #717171;
    }

.profile-container {
    max-width: 800px;
    margin: 50px auto;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.form-section {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #007bff;
}
.profile-form h2 {
 text-align: center;
    color: black;
    font-size: 1.5rem;
    margin-bottom: 10px;
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
}

.profile-form input[type="submit"],
.profile-form .btn-cancel {
    font-size: 1rem;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
}


.profile-form input[type="submit"] {
    background-color: #4caf50;
    color: #fff;
    border: none;
}

.profile-form .btn-cancel {
    background-color: #ff5722;
    color: #fff;
}

.profile-form input[type="submit"]:hover {
    background-color: #45a049;
}

.profile-form .btn-cancel:hover {
    background-color: #e64a19;
}
/* Inputs e Select */
.form-section input,
.form-section select,
.form-section textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

.no-marcacoes{
font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh; /* Faz com que o elemento ocupe a altura total da janela */
    text-align: center; /* Garante que o texto seja centralizado em múltiplas linhas */
    margin: 0;
}

    /* Fading animation */
    .fade {
      animation-name: fade;
      animation-duration: 1.5s;
    }

    @keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
    }

    .promo {
        display: flex;
    }

    .promo > div {
        align-content: space-between;
        padding: 40px;
        text-align: center;
    }

    .promoimg {
        width: 100%;
        padding-bottom: 35px;
    }

    .comprido{
        padding-left: 40px;
        padding-right: 40px;
    }

    .cabeçalho1{
    background-image:url('../images/invernocarro.jpg');
    background-size: cover;
    background-position: center;
    height: 45vh;
    width:100%;
    min-height: 200px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    }

    .cabeçalho2{
    background-image:url('../images/bomba.jpg');
    background-size: cover;
    background-position: center;
    height: 40vh;
    width:100%;
    min-height: 200px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    }

    .cabeçalho3{
    background-image:url('../images/viagemcarro.jpg');
    background-size: cover;
    background-position: center;
    height: 40vh;
    width:100%;
    min-height: 200px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    }


    .cabeçalho4{
    background-image:url('../images/oleoo.jpg');
    background-size: cover;
    background-position: center;
    height: 40vh;
    width:100%;
    min-height: 200px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    }

    .cabeçalho5{
    background-image:url('../images/cliente.jpg');
    background-size: cover;
    background-position: center;
    height: 40vh;
    width:100%;
    min-height: 200px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    }

    .cabeçalho6{
    background-image:url('../images/agendamento.png');
    background-size: cover;
    background-position: center;
    height: 40vh;
    width:100%;
    min-height: 200px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    }

    .cabeçalho7{
    background-image:url('../images/foraauto.jpg');
    background-size: cover;
    background-position: center;
    height: 45vh;
    width:100%;
    min-height: 200px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    }

    .cabeçalho8{
    background-image:url('../images/pintura.jpg');
    background-size: cover;
    background-position: center;
    height: 45vh;
    width:100%;
    min-height: 200px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    }

    .cabeçalho9{
    background-image:url('../images/instala.jpg');
    background-size: cover;
    background-position: center;
    height: 45vh;
    width:100%;
    min-height: 200px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    }

    .cabeçalho10{
    background-image:url('../images/oficina2.jpg');
    background-size: cover;
    background-position: center;
    height: 45vh;
    width:100%;
    min-height: 200px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    }


    .textoM {
    height: 220px;
    padding-top:100px;
    padding-left:300px;
    padding-right:330px;
    padding-bottom:300px;
    box-sizing:border-box;
    }

    .textoM1 {
    height: 190px;
    padding-top:20px;
    padding-left:190px;
    padding-right:380px;
    }

    .textmenu{
        font-size: 15px;
        color: white;
        font-weight: 550;
        letter-spacing: normal;
        text-transform: uppercase;
        text-align: center;
        position: relative;
        font-style: italic;
    }

    .cabeçalho{
    background-image: url('../images/servico.png');
    background-size: cover;
    background-position: center;
    height: 30vh;
    width:100%;
    }

    .texto{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        color: white;
        padding-left: 40px;
        padding-right: 10px;
        padding-top: 187px;
        font-size: 20px;
     }

    .loginblock{
        padding: 10px;
        border-radius: 0.5rem;
        text-align: center;
        color:white;
        width: 100%;
        max-width: 600px;
        margin-top:120px;
        display: block;
    }

    .subblock {
        margin-left: 250px;
         border-radius: 0.5rem;
        margin-right: 10px;
        width: 60%;
        max-width: 400rem;
        box-sizing: border-box;
        height: 350px;
        display: flex;
         background-color: #0A142FFF;
         justify-content: space-between;
         margin-top:30px;
    }

    .loginblockConta {
        padding: 10px;
        margin-top:10px;
        width: 100%;
        display: block;
        text-align: center;
    }
    .loginblockConta input[type="text"],
    .loginblockConta input[type="password"] {
        padding: 10px;
        border-radius: 2px;
        background-color: white;
        color: #333;
        width:200px;
        font-size: 14px;
        border: 2px solid white;
    }
    loginblockConta input[type="text"]:focus,
    .loginblockConta input[type="password"]:focus {
        box-shadow: 0 0 5px #3a80f0; /* Efeito ao focar no campo */
    }

    .submit{
        background: white;
        color: rgb(10, 20, 47);
        padding: 7px 30px;
        text-align: center;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        border:white;
        cursor: pointer;
        margin-top: -50px;
        border-radius: 4px;

    }
    .loginblock2{
        padding: 6rem;
        border-radius: 0.25rem;
        text-align: center;
        background-color: #0A142FFF;
        color:white;
    }

    .subblock2 {
        padding:50px;
        margin-left: auto;
        margin-right: auto;
        max-width: 70rem;
    }

    .containerrr {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
    }

    .texttt {
        flex: 1;
        padding: 50px;
        color: #0A142FFF;
    }

    .map {
        flex: 1;
        padding: 10px;
    }

    iframe {
        width: 100%;
        height: 450px;
        padding-top: 30px;
    }

    ul.horario {
        list-style: none;
        padding: 0;
    }

    ul.horario li {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .contactos{
        padding-top:30px;
    }

    .contact-info {
        flex: 1;
    }

     .linha {
        display: flex;
        gap: 20px;
        margin-bottom: 10px;
    }
    .linha div {
        flex: 1;
    }
    .mensagem textarea {
        width: 100%;

     }

 .container-contacto {
    width: 800px;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #ccc;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
    padding: 20px;
    background-color: #fff;
      margin-bottom:65px;          /* Centraliza a div horizontalmente */

 }

 .container-contacto h2 {
    text-align: center;
    margin-bottom: 20px; /* Espaçamento abaixo do título */
}

.container-contacto button {
    display: block;
    margin: 20px auto 0; /* Centraliza o botão e dá um espaço acima */
    padding: 10px 20px; /* Aumenta o tamanho do botão */
    border: 2px solid #ccc; /* Mantém o estilo da borda */
    border-radius: 5px; /* Arredonda um pouco os cantos */
    background-color: rgb(10, 20, 47);
    color: white; /* Texto branco */
    font-size: 16px; /* Tamanho do texto */
    cursor: pointer; /* Altera o cursor ao passar por cima */
    transition: 0.3s; /* Suaviza o efeito ao passar o mouse */
}

/* Efeito de hover no botão */
.container-contacto button:hover {
    background-color: #0056b3; /* Azul mais escuro ao passar o mouse */
}

.marcacoes-container {
   background-color: #f8f9fa;
    padding: 20px;
    margin: 0 auto;
    height:auto;
    max-width: 800px;
    box-shadow: 0 4px 8px rgb(10, 20, 47);
    border-radius:10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

}


    .form-group-container {
    display: flex;       /* Usa o Flexbox para organizar os elementos */
    justify-content: space-between; /* Cria o espaçamento entre os elementos */
    }

     .marcacoes-container h2 {
        font-size: 1.5rem;
        color: #333;
        margin-bottom: 10px;
        border-bottom: 2px solid #007bff;
        padding-bottom: 4px;
        margin-bottom: 10px;
     }


   .form-control {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 5px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
}
textarea.form-control {
    resize: vertical;
    min-height: 100px;
}



.marca-modelo-container {
        display: flex;
        gap: 15px; /* Espaçamento horizontal entre os campos */
        margin-bottom: 15px; /* Espaçamento abaixo do contêiner */
        margin-left: 30px;
        justify-content:center;
        align-items:center;
    }

    /* Contêiner Kms, Matrícula e Ano */
.kms-ano-matricula-container {
        display: flex;
        gap: 100px; /* Espaçamento horizontal entre os campos */
        margin-bottom: 15px; /* Espaçamento abaixo do contêiner */
         justify-content:center;
        align-items:center;
        margin-left:30px;

    }

.marcacao-layout {
    display: flex;
    justify-content: center;
    align-items:center;
    gap: 5rem; /* Espaçamento entre as colunas */
}

.left-column, .right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Espaçamento entre os campos dentro de cada coluna */
}

.left-column {
    align-items: flex-start; /* Alinha os itens da esquerda ao início */
    margin-left:50px;
}

.right-column {
    align-items: flex-start; /* Alinha os itens da direita ao início */
    margin-left: 90px;
}

label {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    display: block; /* Garante alinhamento vertical */
    color: #333; /* Cinza escuro */
}


/* Estilo para os inputs */
input[type="text"],
input[type="date"],
input[type="time"],
textarea,
select {
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        width: 100%;  /* Garante que o input ocupe 100% da largura disponível */

}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #007bff; /* Azul para foco */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Glow para foco */
    background-color: #ffffff; /* Mais claro ao focar */
        width: 100%;  /* Garante que o input ocupe 100% da largura disponível */

}


.buttonmarc {
    display: inline-block;
    background-color: rgb(10, 20, 66);
    color: #ffffff;
    text-align: center;
    padding: 10px 20px;
    margin: 20px 5px;
    margin-bottom:50px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.buttonmarc:hover {
background-color: #0056b3;
    transform: scale(1.05);
   }

    form {
        margin: 20px 0;
    }

    table {
        width: 100%;
        border-collapse: collapse;

    }


 select, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    background: #fff;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s;
}

    table td, table th {
        padding: 10px;
        border: 1px solid #ccc;
    }


    /* Estilos do botão */
  .buttonmarc {
    background-color: rgb(10, 20, 66);
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    font-weight: bold;

    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: block;
    margin: 0 auto;
        text-align: center;

}

.buttonmarc:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

.containermarc {
    position: relative; /* Garante que o elemento siga o fluxo normal */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* Centraliza o contêiner */

}


/* Estilo geral da seção de marcações */
.marcacoesSection {
    background-color: #f8f9fa; /* Fundo claro para contraste */
    padding: 20px;
    margin: 0 auto;
    max-width: 700px; /* Limita a largura da seção */
    box-shadow: 0 4px 8px rgb(10, 20, 47); /* Sombra com o tom especificado */
    transition: transform 0.3s ease, box-shadow 0.3s ease;

}
section {
    background-color: rgb(10, 20, 66);
    padding: 20px;
    border-radius: 10px;
    margin: 20px;
    text-align: center;
}

.Serv {
    background-color: #ffffff; /* Fundo branco */
    border: 1px solid #ddd;
    padding: 80px;
    margin-bottom: 5px;
    border-radius: 10px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra elegante */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.Serv:hover {
    transform: translateY(-5px); /* Efeito de elevação ao passar o mouse */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra mais intensa */
}


.Serv p {
    font-size: 16px;
    color: #495057; /* Texto cinza escuro */
    line-height: 1.6;
    margin: 5px 0;
}

.Serv p:first-child {
    font-weight: bold;
    font-size: 18px;
    color: #212529; /* Texto preto */
}

.Serv a {
    color: #007bff; /* Azul */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease;
}

.Serv a:hover {
    color: #0056b3; /* Azul mais escuro ao passar o mouse */
}

.botaoCancelar {
    display: inline-block;
    background-color: grey;
    color: #ffffff;
    text-align: center;
    padding: 10px 20px;
    margin: 20px 5px;
    margin-bottom:50px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Estilo para os botões */
.botao {
    display: inline-block;
    background-color: rgb(10, 20, 66);
    color: #ffffff;
    text-align: center;
    padding: 10px 20px;
    margin: 20px 5px;
    margin-bottom:50px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.botao:hover {
    background-color: #0056b3; /* Azul mais escuro */
    transform: scale(1.05); /* Leve aumento ao passar o mouse */
}

.botao:active {
    transform: scale(1); /* Remove o aumento ao clicar */
}


    ul, ol {
        margin: 0;
        padding: 0 0 0 20px;
    }

    .reg {
        margin-bottom: 10px;
        list-style: none;
        padding-left: 10px;
    }

    .containerHome {
       display: flex;
        flex-direction: row; /* Lado a lado */
        justify-content: flex-start;
        width: 100%;
        padding: 20px;
    }

    .introducao {
        display: flex;
        justify-content: flex-start;
         align-items: center;
        padding: 50px;
        max-width: 800px;
         height: 500px;
    }

    .introducao h2 {
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 20px; /* Espaçamento abaixo do título */
        color: #000; /* Cor do título */
    }

    .introducao p {
        flex:1;
        font-size: 16px;
        margin-right: 30px; /* Separando texto e imagem */
        margin-bottom: 40px; /* Espaçamento abaixo do texto */
        color: #555; /* Cor do texto */
    }
    .introducao button {
        background-color: #001E50; /* Cor de fundo do botão */
        color: #fff; /* Cor do texto do botão */
        border: none;
        border-radius: 10px;
        padding: 10px 20px; /* Tamanho do botão */
        cursor: pointer;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Sombra do botão */
    }

    .introducao button:hover {
        background-color: #003080; /* Cor ao passar o mouse */
    }

 .imagem-introducao img {
        width: 600px;
        height: auto;
        border-radius: 8px;
        margin-top:70px;


   }



    /* Botão hambúrguer escondido por padrão */
    .menu-checkbox {
      display: none;
    }

    /* Estilo do botão de menu */
    .menu-toggle-label {
      display: none;
      font-size: 24px;
      cursor: pointer;
      padding: 10px;
      z-index: 1001; /* Fica acima do menu */
    }

    /* Ocultar menu em telas menores por padrão */
    .menu-links {
      display: flex;
      gap: 15px;
    }


    .textoM p {
    width: 100%; /* Garantir que o parágrafo ocupe 100% da largura da div */
    font-size: 16px; /* Tamanho padrão da fonte */
    box-sizing: border-box; /* Garantir que padding não ultrapasse a largura definida */
  }

.main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;

}

    /* Responsividade para telas menores */
@media screen and (max-width: 920px) {

 .main {
      width: 100%; /* Certifica que ocupa 100% da largura disponível */
    margin: 0; /* Remove margens que podem estar limitando */
    padding: 0; /* Remove qualquer padding */
   box-sizing: border-box;
 }

body, html {
    overflow-x: hidden;
}
    body {
    margin: 0;
    padding: 0;
    width: 100%; /* Certifique-se de que o `body` não esteja limitado */
    height: 100%; /* Garante o preenchimento vertical */
    }
/*Footer */
      .footer {
        padding:0px;
        height:20px;;
        position:absolute;
        bottom:0;

      }




    .buttonmarc {
        padding: 12px;  /* Botão maior para facilitar o clique */
        font-size: 16px;  /* Tamanho de fonte maior para facilitar a leitura */
    }

    .form-group label {
        font-size: 14px;  /* Fontes menores para telas pequenas */
    }

    input, select, textarea {
        font-size: 14px;  /* Tamanho de fonte ajustado para inputs */
    }

      /* Mostra o botão hambúrguer */
      .menu-toggle-label {
          display: block;
          color:white;
      }

      .containerHome{
       flex-direction: column;
       width:auto;
               padding: 15px; /* Já tinhas, mas confirma */


      }

      /* Oculta o menu principal inicialmente */
      .menu-links {
      display: none; /* Oculta o menu inicialmente */
      flex-direction: column;
      background-color: white;
      position: absolute;
      margin-top:680px;
      height:600px;
      width:300px;
      right:0;
      padding: 10px 10px;
      border-radius: 8px;
      box-shadow: 0 4px 4px  rgb(10, 20, 47); /* Sombra ao redor do menu */
      }

      .menu-checkbox:checked ~ .menu-links {
      display: flex; /* Mostra o menu quando o checkbox está marcado */
      }

      .textmenu a{
        padding: 10px 20px; /* Espaçamento interno */
        color: black; /* Cor do texto */
        background-color: white; /* Fundo branco */
      }

      .textmenu:hover {
        text-color: white; /* Texto preto no hover */
      }

      .form-group {
        display: flex;
        width:50px;
        gap: 15px; /* Espaçamento horizontal entre os campos */
        margin-bottom: 15px; /* Espaçamento abaixo do contêiner */
        margin-left: 70px;
        justify-content:center;
        align-items:center;
      }


      .subnav-content a:hover {
      background-color: #0A142FFF;
      color: lightgray;
      }



     .rightsubmenu {
       margin-top: -50px;
       justify-content:top;
     }
     .leftsubmenu {
       margin-left: -180px;

     }


      .introducao {
        display: flex;
        justify-content: center;
         align-items: center;
        margin-left: 70%;
         height: 500px;
         width:400px;
         order: 2;
         margin:auto;
      }

      .subnav-content {
        display: block; /* Ajuste para melhor visualização em dispositivos móveis */
        margin-top: 10px;
    }


    .container {
           flex-direction: column;
   }

.promo {
width:100%;
}
.comprido {
width:100%;
}
   container-contacto{
        gap: 10px;
        width:100%;
        margin-bottom:30px;
    }


    .imagem-introducao img {
         display: block;
         text-align: center;
         order: 1;
        width:100%;
    }


.slideshow-container, .promo, .comprido{
width:100%;
}
    /* Estilo das imagens (slides) */
    .mySlides {
      display: none; /* Esconde todos os slides inicialmente */
      width: 100%; /* Faz com que as imagens se ajustem ao contêiner */
      height: auto; /* Mantém a proporção das imagens */
    }

     .textoM {
        height: auto; /* Ajusta a altura para telas muito pequenas */
        padding-left: 3%; /* Reduz ainda mais o padding */
        padding-right: 3%; /* Reduz ainda mais o padding */
        padding-bottom:30px;

     }

    .textoM p {
        font-size: 18px; /* Reduz ainda mais o tamanho da fonte */
        padding: 2px; /* Ajusta o padding para telas menores */
    }

    .Serviços {
        padding-left: 5%;
        padding-right: 5%;
    }
    .subblock {
        margin-left: 5%; /* Ajusta a margem esquerda para 5% da largura da tela */
        margin-right: 5%; /* Ajusta a margem direita para 5% da largura da tela */
        width: 90%; /* Aumenta a largura para 90% da tela */
        max-width: 90%; /* Ajusta o max-width também */
        height: auto; /* Ajusta a altura para ser automática e se adaptar ao conteúdo */
    }

    .marcacoes-container, .containermarc {
        flex-direction: column;
        gap: 10px;
        width:100%;
        height:auto;
        margin-bottom:30px;
    }

     .marcacao-layout{
      flex-direction: column;
      gap: 10px;
      margin-left: 50px;
      }

    .marcacao {
      flex-direction: column;
     gap: 10px;

    }

    .left-column, .right-column {
        width: 100%;  /* As colunas vão ocupar 100% da largura */
    }
     .marca-modelo-container,
    .kms-ano-matricula-container {
        display: flex;
        flex-direction: column;
        gap:10px;

    }


    .marca-modelo-container .form-control{
       margin-left:-10px;
       width:50px;

    }

     .marcacoesSection{
       margin-top:5px;
       margin-bottom:85px;
       height:auto;
     }

    .form-group{
       width:180px;
       margin-left:-20px;

    }

   .main-content {
     width:auto;
   }

    .profile-container {
        width: 90%;
        padding: 15px;
    }

    .form-actions {
        flex-direction: column;
    }

    .btn-cancel, .btn-submit {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    .form-control, .form-group label{
    margin-left:170px;
    flex-direction: column;
   }

   .btn  {
   margin-left:90px;
    flex-direction: column;
   }

   .creditos{
   height:auto;
   }


}


@media (max-width: 390px) {
    .subblock {
        margin-left: 5%;
        margin-right: 5%;
        width: 100%; /* O elemento ocupa 100% da tela em dispositivos móveis */
        max-width: 100%; /* Ajuste para a largura total */
        height: auto;
        flex-direction: column; /* Alinha os itens em coluna */
        padding: 10px; /* Adiciona um pequeno padding para espaçamento */
    }

    .introducao {
        display: flex;
        justify-content: center;
         align-items: center;
        margin-left: 60px;
         height: 500px;
         max-width:auto;
         order: 2;
         margin:auto;
    }

    .container {
           flex-direction: column;
   }

   .profile-container {
        width: 95%;
        padding: 10px;
   }

    .form-section h2 {
        font-size: 18px;
        text-align: center;
    }

    .form-section input,
    .form-section select {
        font-size: 14px;
        padding: 8px;
    }


}