/* Import Font Family */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Universal Style */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

/* Grid Container Style */
.grid-container{
    display: grid;
    grid: "header" auto
            "main" 1fr
            "aside" auto
            "footer" auto
            /1fr;
    min-height: 100vh;
}

/* Header Container Style */
.header-container{
    grid-area: header;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    padding: 1rem;
}
.header-container .logo a{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
}
.header-container .logo img{
    width: 1.938rem;
}
.header-container .logo span{
    color: black;
    font-size: 2rem;
    font-weight: bold;
}
.nav-container ul{
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}
.nav-container a{
    text-decoration: none;
    color: #718096;
    font-size: 1.125rem;
    font-weight: 600;
    transform: color 0.1s;
}
.nav-container a:hover{
    color: #2563eb;
}
.header-container .button a{
    background-color: #6366F1;
    border-radius: 0.375rem;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    transform: all 0.1s;
    color: white;
    text-decoration: none;
}
.header-container .button a:hover{
    background-color: #5254f8;
}
.hamburger {
    display: none;
    border: none;
    border-radius: 0.375rem;
    font-size: 1rem;
    font-weight: 600;
    background-color: #fff;
    padding: 0.5rem 0.9rem;
}
.hamburger img{
    height: 1.5rem;
    width: 1.5rem;
}
/* Responsive Style */
@media screen and (max-width:785px){
    .header-container{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }
    .nav-container ul{
        display: none;
    }
    .header-container .button{
        display: none;
    }
    .hamburger{
        display: block;
    }
}

/* Main Container Style */
.main-container{
    grid-area: main;
}
.main-container .top{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    padding: 5rem;
}
.main-container .left{
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    animation: slideFromLeft 1s ease forwards;
    opacity: 0;
}
@keyframes  slideFromLeft{
    0%{
        opacity: 0;
        transform: translateX(-100%);
    }

    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
.main-container .button{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
.main-container .button a{
    text-decoration: none;
    border: none;
    border-radius: 0.3rem;
    padding: 0.5rem 1rem;
    color: white;
}
.main-container .button1{
    background-color: blue;
}
.main-container .button2{
    background-color: black;
}
.main-container .button1:hover{
    background-color: #6366F1;
}
.main-container .button2:hover{
    background-color: rgb(83, 81, 81);
}
.main-container .right img{
    width: 20rem;
    height: 25rem;
}
.leftpara{
    font-size: 1.15rem;
    font-weight: 600;
    color: #6366F1;
}
@media screen and (max-width:785px){
    .main-container .top{
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        align-items: center;
    }
    .main-container .left{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
}

/* /Aside Container Style */
.aside-container{
    grid-area: aside;
}

/* Footer Container Style */
.footer-container{
    grid-area: footer;
}