@font-face {
    font-family: "SF-Pro-Display";
    src: url("https://www.romecityinstitute.com/wp-content/uploads/2022/11/SF-Pro-Display-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
    .loader {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #FFFFFF;
        width: 100%;
        height: 100%;
    }
    .loader.active{display: block;}
    .loader:after {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 120px;
        height: 20px;
        -webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) left / 20% 100%;
        background: linear-gradient(#000 0 0) left -25% top 0 / 20% 100% no-repeat #ddd;
        animation: l7 1s infinite steps(6);
        transform: translate(-50%, -50%);
        content: "";
    }
  @keyframes l7 {
      100% {background-position: right -25% top 0}
  }

/* Stili di base per le intestazioni */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

/* Stili di default per le intestazioni */
h1 {
    font-size: 2.5rem; /* Base size */
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

body, p, form#nexi-payment, a {
    font-family: "SF-Pro-Display", sans-serif;
    
}       
body {
    margin: 0px;
    color:white;
}

form#nexi-payment input {
    flex: auto;
    width: 90%;
}

form#nexi-payment {
    font-family: "SF-Pro-Display", sans-serif;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 15px;
}

.half {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-content: center;
    width: 90%;
    gap: 15px;
}

@media (max-width: 768px) {
    .half {
        flex-wrap: wrap;
    }
}

img {
    height: auto;
    width: 100%;
}

header {
    height:15vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.logo {
    max-width: 400px;
}

a {
    display: block;
    color:white;
}
.container {
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
}
section {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.col {
    padding: 15px;
    text-align:center;
}

main {
    height: 75vh;
}

section {
    width: 100%;
    height: 100%;                
}
div input[type="submit"]{
    width: 95%;border:0;margin:0; background-color: #0D2A62;text-align: center; color: #FFFFFF; 
}

div:hover input[type="submit"] {text-decoration: underline}
input {
    padding:10px
}
div input[type="submit"]:focus,
div input[type="submit"]:visited,
div input[type="submit"]:active{border:none;outline: none}

div input[type="submit"] {font-size: 18px; cursor:pointer}
footer{    
    background-color: #0D2A62;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}
.black {
    color:#0D2A62;
}
/* Media query per schermi più piccoli */
@media (max-width: 1200px) {
    h1 {
        font-size: 2.25rem; /* Adjust size */
    }

    h2 {
        font-size: 1.85rem;
    }

    h3 {
        font-size: 1.6rem;
    }

    h4 {
        font-size: 1.35rem;
    }

    h5 {
        font-size: 1.1rem;
    }

    h6 {
        font-size: 0.95rem;
    }
}

@media (max-width: 992px) {
    h1 {
        font-size: 2rem; /* Adjust size */
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.25rem;
    }

    h5 {
        font-size: 1rem;
    }

    h6 {
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 1.75rem; /* Adjust size */
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1rem;
    }

    h5 {
        font-size: 0.85rem;
    }

    h6 {
        font-size: 0.75rem;
    }

    header {
        height:10vh;
    }
    main {       
        height:80vh;
    }
}

@media (max-width: 576px) {
    h1 {
        font-size: 1.5rem; /* Adjust size */
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    h4 {
        font-size: 0.95rem;
    }

    h5 {
        font-size: 0.85rem;
    }

    h6 {
        font-size: 0.75rem;
    }
}