*{margin: 0;

    padding:0;}
     .sekuya-regular {
        font-family: "Sekuya", system-ui;
        font-weight: 400;
        font-style: normal;
        color: white;
    }  
   
    .eb-garamond {
        font-family: "EB Garamond", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        color:white
    }


    body {
        margin-top: 30px;
    background-color:#003851;
    
    }
    header{
        background-color: #002535;
        width: 100%;
        height: 130px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;


    }
    #titu{
        font-size: 65px;
        margin: 0;
        font-family: "Sekuya", system-ui;
        font-weight: 400;
        font-style: normal;
        color: white;
    }
   
    #frasen{
         font-family: "Sekuya", system-ui;
        font-optical-sizing: auto;
        color: white;
        font-weight: 400;
        font-style: normal;
        text-align: center;
        font-size:  25px;
        width: 100%;height: 40px;
        margin:auto;
        background-color:#002535;
        border-bottom: 2px solid #3b89ac;
    }
    h1, h2 {
        margin: 0;
    }


    nav ul {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 5px;
    margin: 0;
    font-size: 20px;
    list-style-type: none;
    display: flex;
    justify-content: center;
    background-color: #002535;
    z-index: 1000;
    border-bottom: solid 2px;
    border-color: #22646e;
    font-family: "EB Garamond", serif;
}

nav li {
    margin: 0 1rem;
}

    nav li{
        text-decoration: none;
        margin:0 1rem;
        font-family: "EB Garamond", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    }
    nav a:link,
    nav a:visited,
    nav a:active {
        color: white;
        text-decoration: none;
    }


    nav a:hover {
        color: #00a8b5;
        font-size: 16px;
    }
    section{
        margin-bottom: 20px;
        width: 80%;
        margin: 20px auto;
        padding: 50px;
        font-family: "EB Garamond", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        color:white;
   
    }
    article{
       
        padding: 20px;
        width: 80%;
        margin: 20px auto;
        border-radius:10px;
        font-family: "EB Garamond", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    }      
    #texto{
        text-align: center;
        margin-bottom: 20px;
        font-size: 40px;
        font-family: "Sekuya", system-ui;
        font-weight: 400;
        font-style: normal;
        color: white;
    }
    .ima1{
        position: relative;
        padding: 0 200px;
        font-family: "EB Garamond", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    }
    #textin{
        text-align: 80px;
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 15px;
        color: white;
        width: 35%;
        padding:  20px;
        font-family: "EB Garamond", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        background-color:  #22646e;
        border-radius:10px;
    }
    #textin1{
        background-color: rgba(4, 73, 152, 0.295);
        color: white;
        font-family: "EB Garamond", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    }
    #textin2{
        color: white;
        font-family: "EB Garamond", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    }
    #textin3{
        color: white;
        font-family: "EB Garamond", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    }
    #textin4{
        color: white;
        font-family: "EB Garamond", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    }
    #textin5{
        color: white;
        font-family: "EB Garamond", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    }
    #textin6{
        font-family: "EB Garamond", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        text-align: center;
        font-size:  15px;
        width: 100%;height: 40px;
        margin:auto;
        background-color:#002535;
        border-bottom: 2px solid #3b89ac;
    }
    .flip-card {
        width: 100%;
        max-width: 600px;  
        height: 350px;      
        margin: 30px auto;
        perspective: 1000px;
    }


    .flip-inner {
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 0.6s;
        transform-style: preserve-3d;
    }


    .flip-card:hover .flip-inner {
        transform: rotateY(180deg);
    }


    .flip-front img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 30%;
    }
    .flip-back {
        background-color: #002535;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 20px;
        transform: rotateY(180deg);
        font-size: 20px;
    }
    .flip-front, .flip-back {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        overflow: hidden;
        backface-visibility: hidden;
        top: 0;
        left: 0;
    }
    .section-title {
        text-align: center;
        margin-bottom: 20px;
        font-family: "Sekuya", system-ui;
        font-weight: 400;
        font-style: normal;
        font-size: 48px;
        font-weight: 600;
        margin-right: 130px;
    }


    .one-card {
        display: flex;
        justify-content: center;
    }


    .two-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        justify-items: center;
    }
    article.left {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
    
    }
    article.left .section-title {
        width: 40%;
    }

    article.left .one-card {
        width: 60%;
    }
    article.right {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
    
    }
    article.right .section-title {
        width: 40%;
    }

    article.right .one-card {
        width: 60%;
    }