@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=National+Park:wght@200..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body
{
      font-family: "Roboto", sans-serif;
    
    
}
.container
{
   margin: 0 7rem;
   height: 100%;

}
a{
    text-decoration: none;
}
ul
{
    list-style: none;
}
nav
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
}
#home
{
    height: 100vh;
    background-color:#0162be;
    color:#fff ;
}
 nav .logo
 {
    width: 50px;
 }
 nav ul{
    display: flex;
    align-items: center;
 }
 nav ul a
 {
    color:#fff ;
    padding: 20px;
 }
 #home .content
 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70%;
 }
 #home .content img
 {
    width:220px ;
    animation: animation1 1s ease-out;
 }
 #home .content-text h1
 {
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 10px;
    text-transform: uppercase;
 }
 #home .content-text h1 span
 {
    font-size: 60px;
 }
 #home .content-text p
 {
    font-weight: 300;
    margin-bottom: 30px;
    line-height:1.4;
    width: 60%;
 }
 .btn
 {
    font-size: 15px;
    padding: 10px 15px;
    background-color: #fff;
    border-radius: 30px; 
    color: black;
    transition: all 0.5s;
 }
 .btn:hover
 {
   background-color:transparent ; 
   color:#fff ;
   border: 1px solid;
 } 
 .social
 {
    margin-left: 3rem;
 }
 .social i{
    color: #fff;
    font-size: 25px;
    margin:10px ;
    animation: animation2 2s ease-out;
 }
 .pepsi-types
 {
    width: 100px;
    margin: auto;
    display: block;
    animation: animation3  1.5s ease-out;
 }

 @keyframes animation1 
 {
    0%
    {
        transform:translateX(500px) ;
    }
    100%
    {
        transform: translateX(0px);
    }
 }
 @keyframes animation2
 {
    0%
    {
        transform: translateX(300px);
    }
    100%
    {
        transform: translateX(0px);
    }
 }
 @keyframes animation3
 {
    0%
    {
        transform: translateY(200px);
    }
    100%
    {
        transform: translateY(0px);
    }
 }
 /*tablet*/
 @media(max-wdith: 900px)
 {
    .container{
        margin: 0 1rem;
    }
    nav ul a{
        padding: 10px;
    }
    #home .content
    {
        flex-direction:column ;
        text-align: center;
        padding:2rem 0 0 ;
    }
    #home .content .content-text p
    {
        width: 100;
    }
    #home .content .content-text
    {
        margin-bottom: 2rem;
    }
    #home .content img
    {
        width: 100px;
        margin-bottom: 10px;
 }
 .social{
    margin-left: 0px;
    margin-bottom: 15px;
 } 
}
/*mobile*/
@media(max-width:600px)
{
    nav{
        display: block;
    }
    nav .logo{
        display: block;
        margin: 0 auto 15px;
    }
    nav ul{
        justify-content: center;
    }
    nav ul a{
        font-size: 12px;
    }
    .pepsi-types{
        margin-top:15px ;
    }
}