:root
{
    --primary-color: hsl(228, 71%, 26%);
    --secundary-color: hsl(204, 100%, 35%);
    --bg-color: hsl(228, 71%, 90%);
    --white-color:#ffffff;
    --whatsapp-color:hsl(134, 71%, 48%);
    --secundary-text:hsl(0, 0%, 30%);
    --secundary-shadow: hsl(204, 100%, 80%);



    --font-primary:"Lexend", sans-serif;



    --text-mb-size-80: 0.79rem;
    --text-mb-size-90: 0.889rem;
    --text-mb-size-100: 1rem;
    --text-mb-size-200: 1.125rem;
    --text-mb-size-300: 1.266rem;
    --text-mb-size-400: 1.424rem;
    --text-mb-size-500: 1.602rem;
    --text-mb-size-600: 1.802rem;
    --text-mb-size-700: 2.027rem;

    --text-size-80: 0.64rem;
    --text-size-90: 0.8rem;
    --text-size-100: 1rem;
    --text-size-200: 1.25rem;
    --text-size-300: 1.563rem;
    --text-size-400: 1.953rem;
    --text-size-500: 2.441rem;
    --text-size-600: 3.052rem;
    --text-size-700: 3.815rem;

}


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

html
{
    scrollbar-color: var(--primary-color) transparent;
    scroll-behavior: smooth;
}



body
{
    background-color: var(--white-color);
    font-family: var(--font-primary);
}

.main
{
    
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color);
}


@keyframes appear
{
      from
      {
        opacity: 0;
        scale: 0.5;
      }
      to
      {
        opacity: 1;
        scale: 1;
      }
}


@keyframes appear2
{
      from
      {
        opacity: 0;
        transform: translateX(-100px);
      }
      to
      {
        opacity: 1;
        transform: translateX(0px);
      }
}

@keyframes appear3
{
      from
      {
        opacity: 0;
        transform: translateX(100px);
      }
      to
      {
        opacity: 1;
        transform: translateX(0px);
      }
}


@keyframes reveal {
    from {
        opacity: 0;
        clip-path: inset(0 0 100% 0);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}






/* Header */

.header
{
    
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    position: sticky;
    top: 0;
    background-color: var(--white-color);
    z-index: 10;
    

}

.header-container
{
    
   
    width: min(90%, 1200px);
    height: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.header-container-left
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
}

.header-container-left-logo
{
    background: url("img/logo4.png");
    width: 34px;
    height: 34px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.header-container-left-h1
{
    font-size: var(--text-mb-size-400);
    font-weight: 600;
    line-height: 1.6;
    color: var(--primary-color);
}

.header-left-container-h1-span
{
    color: var(--secundary-color);
}

.header-container-navbar
{
    display: none;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.header-container-navbar-link
{
    text-decoration: none;
    color: var(--primary-color);
}

.header-container-btn
{
    padding: 0.75rem 1.5rem;
    background-color: var(--whatsapp-color);
    color: var(--white-color);
    border-radius: 1.75rem;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}




@media (orientation: landscape){

    .hero {
        min-height: 650px;
        padding-block: 2rem;
    }

    

}

/* 📱 Celular pequeño */
@media (min-width: 360px) { }

/* 📱 Celular estándar */
@media (min-width: 480px) { }

/* 📱 Celular grande */
@media (min-width: 600px) { }


/* 📱 Tablet vertical */
@media (min-width: 768px)
{

    .header
    {
        height: 70px;
    }
    
    .header-container
    {
        width: min(90%, 1200px);
    }
        
    
    .header-container-navbar
    {
        display: flex;
    }

}

/* 📱 Tablet grande / small laptop */
@media (min-width: 820px) { }

/* 💻 Laptop pequeña / tablet landscape */
@media (min-width: 1024px)
{

    .header-container-btn
    {
        padding: 0.75rem 1.75rem;
    }

}

/* 💻 Laptop estándar */
@media (min-width: 1280px) { }

/* 💻 Laptop grande */
@media (min-width: 1440px) { }

/* 🖥️ Desktop grande */
@media (min-width: 1600px) { }







/* Hero */


.hero
{
    
    width: 100%;
    height: calc(100svh - 70px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-container
{
    width: min(90%, 1200px);
    height: 94%;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 0.75rem;
}

.hero-container-left
{
    background: url("https://media.istockphoto.com/id/2192181374/photo/man-relaxing-on-the-sofa-using-his-smartphone.jpg?s=612x612&w=0&k=20&c=RwoNdh3qz2I6v-8l0PiJ39w0XZvFysTcZQlH32qebBk=");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    box-shadow:0 10px 25px rgba(0, 0, 0, 0.301),
        0 4px 10px rgba(0, 0, 0, 0.507);
}

.hero-container-right
{
    
    display: flex;
    justify-content: center;
    align-items: center;    
}

.hero-container-right-content
{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.hero-container-right-content-h3
{
    background-color: var(--secundary-shadow);
    font-size: var(--text-mb-size-90);
    border:  1px solid var(--secundary-color);
    font-weight: 400;
    border-radius: 1rem;
    padding: 0.5rem 1.5rem;
    width: fit-content;
    color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;

}

.hero-container-right-content-h3-svg
{
    width: 18px;
    height: 18px;
    color: var(--primary-color);
}

.hero-container-right-content-h1
{
    font-size: var(--text-mb-size-700);
    line-height: 1.1;
}

.hero-container-right-content-h1-span
{
    color: var(--secundary-color);
}

.hero-container-right-content-p
{
    font-size: var(--text-mb-size-100);
    line-height: 1.4;
    color: var(--secundary-text);
}

.hero-container-right-content-btns
{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

.hero-container-right-content-btns-btn1
{
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border-radius: 0.75rem;
    background-color: var(--primary-color);
    color: var(--white-color);
    line-height: 1.2;
    font-weight: 600;
    border: none;
}

.hero-container-right-content-btns-btn2
{
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border-radius: 0.75rem;
    line-height: 1.2;
    background-color: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}





/* 📱 Celular pequeño */
@media (min-width: 360px) { }

/* 📱 Celular estándar */
@media (min-width: 480px) { }

/* 📱 Celular grande */
@media (min-width: 600px) { }







/* 📱 Tablet vertical */
@media (min-width: 768px)
{

    .hero-container
    {
        width: min(90vw, 1200px);
        height: 80%;
        grid-template-rows: initial;
        grid-template-columns: 1fr 1fr;
    }

    .hero-container-left
    {
        order: 2;
        height: 100%;
    }

    .hero-container-right-content
    {
        gap: 1.25rem;
        text-align: left;
        align-items: initial;
    }


    .hero-container-right-content-h1
    {

        font-size: var(--text-size-600);
        text-wrap: balance;          
       
    }
  

    .hero-container-right-content-btns
    {

        gap: 1.25rem;
        flex-direction: row;
        justify-content: left;
        
    }

    .hero-container-right-content-btns-btn1
    {
        width: fit-content;
        padding: 0.75rem 1.75rem;
        border-radius: 0.75rem;
    }

    .hero-container-right-content-btns-btn2
    {
        width: fit-content;
        padding: 0.75rem 1.75rem;
        border-radius: 0.75rem;
    } 

}



 /* 📱 Tablet grande / small laptop */
@media (min-width: 820px) { }

/* 💻 Laptop pequeña / tablets landscape */
@media (min-width: 1024px){
    
    

    .hero-container-right-content-h1
    {
        font-size: var(--text-size-700);
       
    }
    
    }
/* 💻 Laptop estándar */
@media (min-width: 1280px) {

    .hero-container
    {
        max-height: 600px;
    }

   
      

 }

/* 💻 Laptop grande */
@media (min-width: 1440px) { }

/* 🖥️ Desktop grande */
@media (min-width: 1600px) { }








/* joinus */


.joinus
{
    background-color: var(--primary-color);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;   
}

.joinus-container
{
    width: min(90%, 1200px);
    height: 300px;
    display: grid;
    grid-template-rows: 1fr 1fr;
    place-items: center;
    margin-block: 1.75rem;
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
    
}

.joinus-container-left
{
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
     
}


.joinus-container-left-h2
{
    
    font-size: var(--text-mb-size-500);
    color: var(--white-color);
    text-align: center;

}

.joinus-container-right
{
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}


.joinus-container-right-container
{

    display: grid;
    width: 200px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(2, 50px);
    place-items: center;
    
}



.joinus-container-right-container-img
{
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    box-shadow:0 10px 25px rgba(0, 0, 0, 0.411),
        0 4px 10px rgba(0, 0, 0, 0.562);
    
    
}






/* 📱 Celular pequeño */
@media (min-width: 360px) { }

/* 📱 Celular estándar */
@media (min-width: 480px) { }

/* 📱 Celular grande */
@media (min-width: 600px) { }

/* 📱 Tablet vertical */
@media (min-width: 768px)
{
   .joinus-container
   {
    margin-block: 2rem;
    grid-template-rows: initial;
    grid-template-columns: 1fr 1fr;
   } 

   .joinus-container-left
   {
    height: 100%;
   }

  .joinus-container-left-h2
  {
    font-size: var(--text-size-400);
    text-wrap: balance;
    text-align: left;
  }

  .joinus-container-right
  {
    
    height: 100%;
  }

 
}

/* 📱 Tablet grande / small laptop */
@media (min-width: 820px) { }

/* 💻 Laptop pequeña / tablet landscape */
@media (min-width: 1024px) { }

/* 💻 Laptop estándar */
@media (min-width: 1280px) { }

/* 💻 Laptop grande */
@media (min-width: 1440px) { }

/* 🖥️ Desktop grande */
@media (min-width: 1600px) { }







/* whyus */



.whyus
{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.whyus-container
{
    width: min(90%, 1200px);
    max-height: fit-content;
    margin-block: 2.5rem;
    display: grid;
    grid-template-rows: auto 1fr;
    
}


.whyus-container-left
{
    width: 100%;
    height: 200px;
    animation: appear3 linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

.whyus-container-left-content
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    
}



.whyus-container-left-content-h2
{
    font-size: var(--text-mb-size-500);
    text-align: center;
}

.whyus-container-left-content-h2-span1
{
    color: var(--primary-color);
}

.whyus-container-left-content-h2-span2
{
    color: var(--secundary-color);
}

.whyus-container-left-content-p
{
    font-size: 1rem;
    color: var(--secundary-text);
    text-wrap: balance;
    text-align: center;
}

.whyus-container-right
{
    width: 100%;
    height: 520px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    /* animation: appear2 linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%; */
}


.whyus-container-right-article
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    padding: 0.75rem;
    gap: 0.25rem;
    box-shadow:0 10px 25px rgba(0, 0, 0, 0.301),
        0 4px 10px rgba(0, 0, 0, 0.507);
}

.whyus-container-right-article:nth-child(1)
{
    background-color: hsl(204, 100%, 100%);
    border-radius: 0.75rem 0 0 0;
    
}

.whyus-container-right-article:nth-child(2)
{
    background-color: hsl(204, 100%, 95%);
    grid-row: span 2;
    justify-content: start;
    border-radius: 0 0.75rem 0 0;
    
}


.whyus-container-right-article:nth-child(3)
{
    
    background-color: hsl(204, 100%, 75%);
    grid-row: span 3;
}

.whyus-container-right-article:nth-child(4)
{

    
    background-color: hsl(204, 100%, 85%);
    grid-row: span 2;
    

}

.whyus-container-right-article:nth-child(5)
{
    background-color: hsl(204, 100%, 80%);
    grid-column: span 2;
    border-radius: 0 0 0.75rem 0.75rem;
    
}


.whyus-container-right-article-svg
{

    width: 50px;
    height: 50px;
    color: var(--primary-color);

}

.whyus-container-right-article-h3
{

    font-size: var(--text-mb-size-100);
    color: var(--primary-color);

}

.whyus-container-right-article-p
{
    
    font-size: 1rem;
    color: var(--secundary-text);
}
















/* 📱 Celular pequeño */
@media (min-width: 360px) { }

/* 📱 Celular estándar */
@media (min-width: 480px) { }

/* 📱 Celular grande */
@media (min-width: 600px) { }

/* 📱 Tablet vertical */
@media (min-width: 768px)
{

    .whyus-container
    {
        grid-template-rows: initial;
        grid-template-columns: 1fr 1fr;
        margin-block: 6.25rem;
    }
        

    .whyus-container-left
    {
        
        height: 100%;
        align-content: center;
        order: 1;
    }

    .whyus-container-left-content-h2
    {
        font-size: var(--text-size-400);
        text-align: right;
    }

    .whyus-container-left-content-p
    {
        text-align: right;
    }
    
    .whyus-container-right
    {
        
        height: 480px;
        justify-self: left;
    }

    
}

/* 📱 Tablet grande / small laptop */
@media (min-width: 820px) { }

/* 💻 Laptop pequeña / tablet landscape */
@media (min-width: 1024px) { }

/* 💻 Laptop estándar */
@media (min-width: 1280px)
{

    .whyus-container-right
    {
        width: 85%;
    }

}

/* 💻 Laptop grande */
@media (min-width: 1440px) { }

/* 🖥️ Desktop grande */
@media (min-width: 1600px) { }









/* software */


.software
{
    width: 100%;
    background-color: var(--secundary-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.software-container
{
    margin-block: 2.5rem;
    width: min(90%, 1200px);
    display: grid;
    gap: 1.25rem;
    
}

.software-container-left
{
    
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    gap: 1.25rem;
    text-align: center;
}

.software-container-left-h2
{
    font-size: var(--text-mb-size-500);
    color: var(--white-color);
}

.software-container-left-p
{
    font-size: var(--text-mb-size-100);
    text-wrap: balance;
    color: var(--white-color);
}

.software-container-right
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
}

.software-container-right-article

{
    width: 300px;
    height: 430px;
    display: flex;
    background-color: var(--white-color);
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-radius: 1rem;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow:0 10px 25px rgba(0, 0, 0, 0.301),
        0 4px 10px rgba(0, 0, 0, 0.507);
    
   
}

.software-container-right-article-img
{
    background: linear-gradient(to right, var(--primary-color), var(--secundary-color));
    height: 40%;
    width: 100%;
    border-radius: 1rem 1rem 0 0;
}

.software-container-right-article-h3
{

    text-wrap: balance;
    font-size: var(--text-mb-size-100);
    text-align: center;
    padding: 0 1rem;
    color: var(--primary-color);

}


.software-container-right-article-p
{
    
    
    color: var(--secundary-text);
    text-align: left;
    padding: 0 1rem;
    

}

.software-container-right-article-btn
{
    width: 90%;
    height: 10%;
    border-radius: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5 rem 0.75rem;
    background: var(--primary-color);
    border: none;
    color: var(--white-color);
    font-size: var(--text-mb-size-100);
    margin-bottom: 0.5rem;
    font-weight: 600;
}


.software-container-right-article:nth-child(1) .software-container-right-article-img
{
    
    background-position: center;
    background-size: cover;
}

.software-container-right-article:nth-child(2) .software-container-right-article-img
{
    background-image: url("https://play-lh.googleusercontent.com/4996kpRLePsVCMCpXK3MdzhXuKS5Cyqxgh8NksuP3djhEy8XS2nbJZU7wqyfCOlTR-U5686hpDq3Zs0cNHaQjA");
    background-position: center;
    background-size: cover;
}

.software-container-right-article:nth-child(3) .software-container-right-article-img
{
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/ac/ZOHO_New.png");
    background-position: center;
    background-size: cover;
}

.software-container-right-article:nth-child(4) .software-container-right-article-img
{
    background-image: url("https://static.wixstatic.com/media/7971e4_13442a8188ce442db907c690ed05a464~mv2.png/v1/fit/w_2500,h_1330,al_c/7971e4_13442a8188ce442db907c690ed05a464~mv2.png");
    background-position: center;
    background-size: cover;
}

.software-container-right-article:nth-child(5) .software-container-right-article-img
{
    background-image: url("https://cdn2.alegra.com/website/imagen-facebook.png");
    background-position: center;
    background-size: cover;
}





















/* 📱 Celular pequeño */
@media (min-width: 360px) { }

/* 📱 Celular estándar */
@media (min-width: 480px) { }

/* 📱 Celular grande */
@media (min-width: 600px) { }

/* 📱 Tablet vertical */
@media (min-width: 768px)
{

    .software-container
    {
        gap: 6.25rem;
    }
    
    .software-container-left-h2
    {
        font-size: var(--text-size-400);
    }

    .software-container-right
    {
        
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2.5rem;
    }

    .software-container-right-article-btn
    {
        padding: 0.75rem 1.75rem;
    }

}

/* 📱 Tablet grande / small laptop */
@media (min-width: 820px) { }

/* 💻 Laptop pequeña / tablet landscape */
@media (min-width: 1024px) { }

/* 💻 Laptop estándar */
@media (min-width: 1280px)
{

    .software-container
    {
        margin-block: 6.25rem;
    }

    .software-container-right-article-btn
    {
        width: fit-content;
        padding: 0.75rem 1.75rem;
        height: fit-content;
    }

}

/* 💻 Laptop grande */
@media (min-width: 1440px) { }

/* 🖥️ Desktop grande */
@media (min-width: 1600px) { }










/* photos */




.photos
{
    width: 100%;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--white-color);
  
}

.photos-container
{
    width: min(90%, 900px);
    min-height: 500px;
    opacity: 1;
    transition: opacity 2s ease;
    border-radius: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color);  
}

.hidden
{
    opacity: 0;
}

.photos-container-item
{
    transition: opacity 2s ease;
    position: relative;    
    width: min(330px,90%);
    height: 430px;
    background-color: var(--secundary-color);
    border-radius: 0.75rem;
    background-size: cover;
    background-position: center center;
}




.-item2
{
    background-color: blue;
    display: none;
}

.-item3
{
    background-color: greenyellow;
    display: none;
}

.photos-container-item-p
{
    background-color: var(--primary-color);
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 0.5rem;
    color: var(--white-color);
    border-radius: 0.5rem;
}














/* 📱 Celular pequeño */
@media (min-width: 360px) { }

/* 📱 Celular estándar */
@media (min-width: 480px) { }

/* 📱 Celular grande */
@media (min-width: 600px) { }

/* 📱 Tablet vertical */
@media (min-width: 768px)
{

    .photos-container
    {
        display: grid;
        grid-template-columns: repeat(2 , 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    
        .-item1
    {
        width: 100%;
        height: 500px;
        grid-row: 1/3; 
        border-radius: 1.25rem 0 0 1.25rem;
        
    }

        .-item2
    {
        display: flex;  
        width: 100%;
        height: 250px;
        border-radius: 0 1.25rem 0 0;
    }

        .-item3
    {
        display: flex; 
        width: 100%;
        height: 250px;
        border-radius: 0 0 1.25rem 0;
    }
    

   
}

/* 📱 Tablet grande / small laptop */
@media (min-width: 820px) { }

/* 💻 Laptop pequeña / tablet landscape */
@media (min-width: 1024px)
{

}

/* 💻 Laptop estándar */
@media (min-width: 1280px){ }

/* 💻 Laptop grande */
@media (min-width: 1440px) { }

/* 🖥️ Desktop grande */
@media (min-width: 1600px) { }









































/* aboutus */


.aboutus
{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aboutus-container
{
    width: min(90%, 1200px);
    display: grid;
    grid-template-rows: 1fr 1fr;
    place-items: center;
    margin-block: 2.5rem;
    gap: 0.75rem;   
    text-align: center;
}

.aboutus-container-left
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    /* animation: appear2 linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%; */
}

.aboutus-container-left-h2
{
    font-size: var(--text-mb-size-500);
}

.aboutus-container-left-h2-span
{
    color: var(--secundary-color);
}



.aboutus-container-left-content
{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    
}

.aboutus-container-left-content-article
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    gap: 0.25rem;
}



.aboutus-container-left-content-article-h3
{
    font-size: var(--text-mb-size-200);
    color:var(--primary-color);
}

.aboutus-container-left-content-article-p
{
    font-size: var(--text-mb-size-100);
    color: var(--secundary-text);
    text-wrap: balance;
}

.aboutus-container-right
{
    background: linear-gradient(220deg, hsla(228, 71%, 26%, 0.137), hsl(204, 100%, 35%)),
url("https://www.hotelnutibara.com/assets/cache/uploads/entorno/1920x1036/ciudad-edificios-hotel-nutibara-medellin-colombia.jpeg");
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    box-shadow:0 10px 25px rgba(0, 0, 0, 0.301),
        0 4px 10px rgba(0, 0, 0, 0.507);
    animation: appear3 linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
    
}





/* 📱 Celular pequeño */
@media (min-width: 360px) { }

/* 📱 Celular estándar */
@media (min-width: 480px) { }

/* 📱 Celular grande */
@media (min-width: 600px) { }

/* 📱 Tablet vertical */
@media (min-width: 768px)
{

    .aboutus-container
    {
        
        grid-template-rows: initial;
        grid-template-columns: 1fr 1fr;
        height: 460px;
        gap: 1.25rem;
    }

    .aboutus-container-left
    {
        order: 1;
        justify-content: space-around;
        text-align: left;
    }

   

    .aboutus-container-left-h2
    {
        font-size: var(--text-size-400);
        text-align: center;

    }

    .aboutus-container-left-content-article-p
    {
       
        text-wrap: initial;
    }



 }

/* 📱 Tablet grande / small laptop */
@media (min-width: 820px) { }

/* 💻 Laptop pequeña / tablet landscape */
@media (min-width: 1024px){}

/* 💻 Laptop estándar */
@media (min-width: 1280px)
{

    .aboutus
    {
        margin-block: 6.25rem;
    }

    .aboutus-container-left-content-article-h3
    {
        font-size: var(--text-mb-size-300);
    }

    .aboutus-container
    {
        gap: 1.25rem;
    }

}

/* 💻 Laptop grande */
@media (min-width: 1440px) { }

/* 🖥️ Desktop grande */
@media (min-width: 1600px) { }













/* footer */



.footer
{
    width: 100%;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-container
{
    width: min(90%, 1200px);
    margin-block: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    gap: 0.5rem;
    text-align: center;
}


.footer-container-h1
{
    color: var(--secundary-color);
    font-size: var(--text-mb-size-500);
}

.footer-container-p
{
    color: var(--white-color);
}

.footer-container-p2
{
    color: var(--secundary-color);
}





















/* 📱 Celular pequeño */
@media (min-width: 360px) { }

/* 📱 Celular estándar */
@media (min-width: 480px) { }

/* 📱 Celular grande */
@media (min-width: 600px) { }

/* 📱 Tablet vertical */
@media (min-width: 768px) { }

/* 📱 Tablet grande / small laptop */
@media (min-width: 820px) { }

/* 💻 Laptop pequeña / tablet landscape */
@media (min-width: 1024px) { }

/* 💻 Laptop estándar */
@media (min-width: 1280px) { }

/* 💻 Laptop grande */
@media (min-width: 1440px) { }

/* 🖥️ Desktop grande */
@media (min-width: 1600px) { }





















/* nombre */

/* 📱 Celular pequeño */
@media (min-width: 360px) { }

/* 📱 Celular estándar */
@media (min-width: 480px) { }

/* 📱 Celular grande */
@media (min-width: 600px) { }

/* 📱 Tablet vertical */
@media (min-width: 768px) { }

/* 📱 Tablet grande / small laptop */
@media (min-width: 820px) { }

/* 💻 Laptop pequeña / tablet landscape */
@media (min-width: 1024px) { }

/* 💻 Laptop estándar */
@media (min-width: 1280px) { }

/* 💻 Laptop grande */
@media (min-width: 1440px) { }

/* 🖥️ Desktop grande */
@media (min-width: 1600px) { }