@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box; 
}
html,body{
    line-height: 1.4;
    font-weight: 300;
    font-family: "Roboto",sans-serif;
}
/* Navigation */
nav{
    box-shadow: 5px 5px 5px rgba(1, 1,1, 0.05);
    position:sticky;
    top: 0;
    margin-bottom: 32px;
    background: white;
    padding: 10px;

}
.navigation {
    display: flex;
    justify-content:space-between;
    align-items: center;


}
.container {
    max-width: 1200px;
    margin: 0 auto;
}
.bar_icon{
    font-size: 32px ;

}
/* Don section */
.hero{
   display:flex;
   justify-content: center;
   align-items: center;
    gap: 100px;

}
.hero_content{
    display:flex;
    flex-direction: column;

}
.tag{
   background-color: green;
    padding: 10px 15px; 
   color: white;
   align-self:flex-start;
}
.hero_content h1 {
    font-size: 70px;
    line-height: 1;
    font-weight: 700;


}
button{
    padding: 10px 15px;
    border: none;
    transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);

}
button:hover {
    opacity: 0.8;
    transition: 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);

}
.explore_btn {
    background: #ffc066;
    align-self: flex-start;
}
    /* Features section */
    .features {
        margin-top: 100px;
        display: flex;
        margin-bottom:50px;

    }
    .feature{
        display: flex;
        padding: 20px 30px;
        gap: 20px;
        transition: 0.2s ease-in-out;
    }
    .feature:hover {
        transition:0.2s ease-in-out;
        box-shadow: 5px 5px 5px rgba(1, 1,1, 0.05);

    }
    .divider{
        border: 1px solid #ccc;
        margin:20px 0px;
    }
     
    /* Menu section */
    .menu {
        display: flex;
        flex-direction: column;
        gap: 50px;
        margin: 50px;



    }
    .menu .tag {
        align-self: center;

    }
    .grid-image {
        border-radius: 10px;
        transition:0.2s ease-in-out;
        width: 100%;
        height: 100%;


    }
    .grid-image:hover{
       transform: scale(1.05);
       transition:0.2s ease-in-out;
    }
    .grid{
      display: grid;
      gap: 10px;
      grid-template-areas: 
      "I1 I1 I2 I3" 
      "I1 I1 I2 I7"
      "I4 I5 I6 I7";

    }
    .item1{
        grid-area: I1;
    }
    .item2{
        grid-area: I2;
    }
    .item3{
        grid-area: I3;
    }
    .item4{
        grid-area: I4;
    }
    .item5{
        grid-area: I5;
    }
    .item6{
        grid-area: I6;
    }
    .item7{
        grid-area: I7;
    }

/* footer section */
footer {
    background-color: #fff0db;
}
.footer_container {
    padding: 30px;
    display: flex;
    justify-content:space-between ;
}


 

@media (max-width:786px ){
    .hero{
        flex-direction: column;
    }
    .hero_image{
        display:flex;
        justify-content: center;
    }
    .hero_image{
     width: 90%;   
    }
    .hero_content{
        gap: 10px;
        padding:10px;

    }
    .hero_content h1{
        font-size: 32px;
        

    }
    .features{
        flex-direction: column;
    }
    .feature{
        flex-direction: column;
    }

}