*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
}

body{
    font-family: 'Poppins', sans-serif;
}

:root{
    --primary-color: #FFD94D;
    --secondary-color: #000000;
    --text-color: #062D3E;
    --text-primary-color: #000000;
    --text-secundary-color: #18191F;
    --accent-color: #3C405F;
    --stripe-orange: #FFA500; 
    --stripe-red: #FF4500;
}

body{
    min-height: 100vh;
    background-color: #ffffff;
    color: var(--text-primary-color);
}


/**header css**/
header{
    position: fixed;
    width: 100%;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12%;
    transition: all .50s ease;
    background-color: var(--primary-color);
}

.logo{
    display: flex;
    align-items: center;
}

.logo img{
    width: 50px;
    height: auto;
}

.navbar{
    display: flex;
}

.navbar a{
    color: var(--text-primary-color);
    font-size: 1.1rem;
    font-weight: 500;
    padding: 5px 0;
    margin: 0px 30px;
    transition: all .50s ease;
}

.navbar a:hover{
    color: var(--accent-color);
}

.navbar .nav-active{
    color: var(--secondary-color);
}

.main{
    display: flex;
    align-items: center;
}

.main a{
    margin-right: 25px;
    margin-left: 10px;
    width: 195px;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 500;
    transition: all .50s ease;
    border-radius: 10px 10px 10px 10px;
    background-color: var(--secondary-color);
    padding: 10px;
    justify-content: center;
    text-align: center;
}

.usser{
    display: flex;
    align-items: center;
}

.usser i{
    color: var(--text-primary-color);
    font-size: 28px;
    margin-right: 7px;
}

.main a:hover{
    background-color: #E53E3E;  
}

#menu-icon{
    font-size: 30px;
    color: var(--secondary-color);
    cursor: pointer;
    z-index: 10001;
    display: none;
}


/**seccion**/
section{
    padding: 80px 5%;
}

/**home**/
.home {
    display: flex;
    flex-direction: column;
    align-items: center; 
    background-color: var(--primary-color);
    padding: 20px;
    position: relative;
    z-index: 1;
}

.first {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 100px;
}

.first h3{
    font-size: 9rem;
    color: var(--secondary-color);
    font-family: 'Irish Grover', cursive;
}

.first p{
    font-size: 1.5rem;
    color: var(--text-primary-color);
    margin-bottom: 15px;
}

.second {
    display: flex;
    justify-content: center;
    gap: 20px;
    z-index: 2;
}

.second img {
    height: auto;
    display: block;
    border-radius: 8px;
}

.img1 {
    max-width: 25%;
    margin-bottom: -100px; /* Specific margin for the first image */
    margin-top: -60px;
}

.img2 {
    max-width: 25%;
    margin-bottom: -150px; /* Specific margin for the second image */
}

.img3 {
    max-width: 25%;
    margin-bottom: -100px; /* Specific margin for the third image */
    margin-top: -60px;
}

.second img altoque1{
    margin-bottom: -500px;
}

.read-more-button {
    background-color: #000000; 
    color: #fff; 
    padding: 10px 20px; 
    border: none;
    border-radius: 4px; 
    margin-right: 10px; 
    cursor: pointer; 
    transition: background-color 0.3s, box-shadow 0.3s; 
    transition: all .50s ease;
}

.read-more-button:hover,.download-button:hover {
    background-color: #E53E3E; 
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); 
    color: rgb(0, 0, 0);
}

/**images of other**/

.image-list {
    margin: 10px;
}
  
.image-list li {
    margin: 0; 
    text-align: center; 
}
  
.image-list li img {
    margin: auto; 
}
  
.image-list li h2 {
    font-weight: bold;
    font-size: 20px;
    padding: 10px;
}

.image-list li p {
    margin-bottom: 50px;
    font-size: 12px;
}


/* Estilos generales para el footer */
.footer {
    background-color: white; 
    display: flex;
    flex-wrap: wrap;
    color: var(--text-primary-color);
    justify-content: center; 
}
  

.footer-logo {
    justify-content: center; 
}

.footer-logo img{
    width: 60px;
}

.footer-section {
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

.footer-section p {
    font-weight: bold;
}
  

/*responsive*/
@media (max-width: 1600px) {
    header{
        padding: 14px 2%;
        transition: .2s;
    }
}

@media (max-width: 1270px){
    #menu-icon{
        display: block;
    }
    .navbar{
        position: absolute;
        top: 100%;
        right: -100%;
        width: 270px;
        height: 29vh;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        border-radius: 10px;
        transition: all .50s ease;
    }

    .navbar a{
        display: block;
        margin: 12px 0;
        padding: 0px 25px;
        transition: all .50s ease;
        color: var(--accent-color);
        
    }

    .navbar a:hover{
        color: var(--secondary-color);
        transform: translateY(5px);
    }

    .navbar a.active{
        color: var(--primary-color);

    }

    .navbar.open{
        right: 2%;
    }

    .main a{
        padding: 5px;
    }
}

@media (max-width: 992px) {
    .home {
        flex-direction: column; 
        text-align: center; 
    }

    .left-column {
        margin-left: 0;
        margin-bottom: 20px; 
    }

    .left-column h3, .left-column p {
        width: auto; 
        text-align: center; 
    }

    .read-more-button, .download-button {
        margin-right: 0; 
        margin-bottom: 10px; 
    }

    .left-column h3 {
        margin-top: 55px;
        width: auto; 
        text-align: center; 
        background: linear-gradient(45deg, #fff, #007ACC, #E53E3E);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }

    .left-column p {
        width: auto; 
        text-align: center; 
        color: #000; 
    }

    .download-button {
        background-color: #E53E3E;
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        margin-right: 10px;
        cursor: pointer;
        transition: background-color 0.3s, box-shadow 0.3s;
    }

    .download-button:hover {
        background-color: #D32F2F;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    }
}

@media (max-width: 790px) {
    .footer-section:last-child {
        display: none; 
    }

    .footer-section {
        display: flex;
        justify-content: center; 
        flex-direction: column;
        align-items: center; 
        padding: 5px;
    }
}