@font-face {
    font-family: poppins;
    src: url();
}

html
{
    scroll-behavior: smooth;
    scroll-padding: 95px;
}

*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    font-family: poppins;
    scroll-behavior: smooth;
} 

body
{
    background-color: rgb(235, 233, 233);
}

/* ============================
    COMIENZA EL NAV
============================ */

#home
{
    width: 100%;
    position: sticky;
    top:  0;
    z-index: 1;
}

.icon
{
    width: 50%;
    height: 10vh;
    position: absolute;
    display:flex;
    align-items: center;    
}

.icon img
{
    width: 3%;
    margin: 0 3% ;
}

.nav-bar
{
    width: 100%;
    height: 10vh;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #7268e4;
}

.nav-bar ul li
{
    text-transform: uppercase;
    display: inline;
    margin-right: 30px;
    transition: all 0.3s ease-in-out;
}



.nav-bar ul li a:hover{
    color:#FADF47;
    transition: all 0.3s ease-in-out;
}

a
{
    text-decoration: none;
    color: black;
}

/* ============================
    COMIENZA EL SEGUNDO NAV
============================ */

.second-nav
{
    margin-top: 5vh;
    display: flex;
    justify-content: center;
}

.second-nav ul li
{
    display: inline;
    margin: 15px;
    font-size: 1.2rem;
    transition: all 0.3s ease-in-out;
}

.second-nav a:hover
{
    padding-bottom: 10px;
    border-bottom: 3px solid #FADF47;
    transform: scale(1.2);
    color: rgb(77, 77, 77);
    transition: all 0.3s ease-in-out;
}

.serch
{
    display: flex;
    margin: auto 5%;
    width: 25%;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.219);
}

.serch input
{
    width: 80%;
    height: 100%;
    border: none;
    padding: 5px 15px;
    border-radius: 10px 0 0 10px;
}

.serch input:focus
{
    outline: none;
}


.btn-serch
{
    width: 20%;
    height: 100%;
    background: #FADF47;
    border-radius: 0 10px 10px 0;
    padding: 5px;
    cursor: pointer;
    border: none;
    transition: all .3s ease-in-out;
}

.btn-serch:hover
{
    color: white;
    background: #7268e4;
    transition: all .3s ease-in-out;
}

/* ============================
    COMIENZA EL HEADER
============================ */



.header-info
{
    width: 40%;
    height: 100%;
    margin: auto;
   display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.header-info h2
{
    text-transform: uppercase;
    font-size: 2.2rem;
    margin-bottom: 3%;
}

.header-info p
{
    font-size: 1.1rem;
}

.store
{
    display: flex;
    flex-direction: row;
}

.store a 
{
    width: 30%;
    margin: 5% auto;
}


.store img
{
    width: 100%;
    border-radius: 10px;
    transition: all 0.5s;
}

.store a img:hover
{
    transform: scale(1.1);
    transition: all 0.5s;
}

.phone-img
{
    width: 40%;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-img img
{
    width: 70%;
    transition: all 1.5s ease-in-out;
}


/* ============================
    COMIENZA EL CONTAINER
============================ */

.container
{
    margin:15vh auto;
    width: 100%;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-img
{
    width: 40%;
    height: 100%;
    display: flex;
    margin: auto;
    justify-content: center;
}

.container-img img
{
    width: 70%;
}

.container-info
{
    width: 40%;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.container-info h2
{
    text-transform: uppercase;
    font-size: 2.2rem;
    margin-bottom: 5vh;
    color: #7268e4;
    border-bottom: 2px solid #7268e4;
}

.container-info p
{
    font-size: 1.1rem;
}

.container-btn
{  
    width: 30%;
    height: 5vh;
    border-radius: 10px;
    border: none;
    background-color: #FADF47;
    margin-top: 5vh;
    transition: all 0.3s ease-in-out;
}

.container-btn:hover
{
    cursor: pointer;
    background-color: #7268e4;
    color:white;
    transition: all 0.3s ease-in-out;
}


/* ============================
    COMIENZA EL FOOTER
============================ */


footer
{
    width: 100%;
    height: 40vh;
    background-color: rgb(51, 50, 56);
}

.foot-page
{
    width: 100%;
    height: 85%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    padding: 20px;
}

.redes
{
    width: 30%;
    height: 100%;
    /* border: 1px solid; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.redes img
{
    width: 7%
}


.icons
{
    margin-top: 5%;
    font-size: 1.5rem;
    
}


.icons i
{
    margin: auto 10px;
    color: white;
    color: grey;
    transition: all .3s ease-in-out;
}

.icons i:hover
{
    color: #7268e4;
    text-shadow: 0px 0px 10px  #7268e4;
    transition: all .3s ease-in-out;
}


.sector-2
{
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
    padding: auto;
}

.sector-2 h3
{
    font-size: 1.4rem;
    color: #FADF47 ;
    border-bottom: 1px solid;
    margin-bottom: 15px;
    padding: 0 20px;
}

.sector-2 ul a li
{
    /* margin-top: 10px; */
    font-size: 0.9rem;
    color: white;
    margin: 20px auto;
    transition: all .3s ease-in-out;
}

.sector-2 ul a li:hover
{
    color: #7268e4;
    transition: all .3s ease-in-out;
}

.sector-2 ul a 
{
    font-size: 0.9rem;
}

.sector-3
{
    margin: auto;
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: auto;
}

.sector-3 ul a li
{
    font-size: 0.9rem;
    color: white;
    margin-bottom: 10px;
    transition: all .3s ease-in-out;
}

.sector-3 ul a li:hover
{
    color: #7268e4;
    transition: all .3s ease-in-out;
}

.politica
{
    width: 80%;
    font-size: 0.8rem;
    align-items: center;
    text-align: center;
    color: grey;
}

.finish
{
    width: 100%;
    height: 15%;
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* ============================
    COMIENZA EL RESPONSIVE
============================ */


@media (max-width: 700px)
{
    .second-nav
    {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .second-nav input
    {
        width: 80%;
        margin: 20px 0;
    }

    .serch
    {
        margin-top: 10vh;
        width: 70%;
        height: 5vh;
    }

    .serch input 
    {
        padding: auto;
        margin: auto;
    }

    .container
    {
        width: 100%;
        flex-direction: column;
        margin: 0;
    }
    .header-info
    {
        width: 80%;
        margin: 0;
    }

    .header-info h2
    {
        font-size: 1.7rem;
    }

    .header-info p
    {
        width: 100%;
        font-size: 1.3rem;
        text-align: center;
        padding:  0 10px;
    }

    .container-info
    {
        margin: auto;
        padding: 0;
        width: 90%;
        text-align: center;
    }

    .phone-img
    {
        display: none;
    }

    .container-img
    {
        display: none;
    }

    .container-btn
    {
        width: 45%;
    }

    #contact
    {
        height: 100%;
        margin: 0;
        text-align: center;
    }

    .redes 
    {
        width: 100%;
        margin: 5vh 0;
    }

    .redes img
    {
        width: 7%;
    }

    .icons a i
    {
        margin: 15px 0;
        font-size: 1.8rem;
    }

    

    .foot-page
    {
        /* display: flex; */
        flex-direction: column;
    }

    .politica 
    {
        text-align: center;
        width: 100%;
    }

    .sector-2
    {
        width: 100%;
        margin-bottom: 30px;
    }
    .sector-2 h3
    {
        font-size: 1.8rem;
    }

    .sector-2 ul a li
    {
        font-size: 1.8rem;
        margin-bottom: 5vh;
    }

    .sector-3
    {
        width: 100%;
    }

    .sector-3 p 
    {
        color:grey;
    }
    
    .finish
    {
        display: none;
    }

    


/* ============================
        MENU HAMBURGUESA    
============================ */

    .nav-bar{
        position: fixed;
        height: 50vh;
        width: 100%;
        top: 0;
        clip-path: circle(0px at top right);
        transition: clip-path ease-in-out 700ms;
        justify-content: center;
    }
    .nav-bar ul 
    {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        border: none;
    }

    .nav-bar ul li
    {
        border-bottom: 1px solid #FADF47;
        padding-bottom: 10px;
        margin: 15px;
    }

    .nav-bar ul li a:hover 
    {
        border: none;
    }

    .site-nav-open{
        clip-path: circle(150% at top right);
    }
    .nav-bar ul li
    {   
        display: block;        
    }

    .icon
    {
        position: relative;
    }

    .icon img
    {
        width: 10%;
    }
    
    header h1
    {
        font-size: 1.2rem;
    }
    .second-nav ul
    {
        text-align: center;
    }   
    
    .menu-toggle{
       
        padding: 1em;
        position: absolute;
        top: .5em;
        right: .5em;
        
    }
    .menu-open .hamburger{
        transform: rotate(45deg);
    }
    .menu-open .hamburger::before{
        opacity: 0;
    }
    .menu-open .hamburger::after{
        transform: translateY(-3px) rotate(-90deg);
    }
    .hamburger,
    .hamburger::before,
    .hamburger::after{
        content: '';
        display: block;
        background: black;
        height: 3px;
        width: 1.75em;
        border-radius: 3px;
        transition: all ease-in-out 500ms;
    }
    
    .hamburger::before{
        transform: translateY(-6px);
    }
    .hamburger::after{
        transform: translateY(3px);
    }    

}