@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    
}

body{
    height: auto;
    width: auto;
    background-image: url("bg2.jpg");
    background-position: center;
    background-size: 100% 100%;
}



header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
}

header .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    animation: slideInFromRight 2s ease-in-out;
}

.navbar .logo {
    /* Position logo absolutely */
    top: 40px;
    /* Adjust top distance as needed */
    left: 60px;
    /* Adjust left distance as needed */
    width: 300px;
    /* Adjust width as needed */
    height: auto;
    /* Maintain aspect ratio */
}

.logo:hover {
    transform: scale(1.1);
    /* Zoom out the logo by 10% on hover */
}


.navbar .menu-links {
    display: flex;
    list-style: none;
    gap: 35px;
}

.navbar a {
    color: #fff;
    text-decoration: none;
    transition: 0.2s ease;
}

.navbar a:hover {
    color: #7152e1;
}

.hero-section {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}




.hero-section .grid-item {
    border: none;
    padding: 10px;
    text-align: center;
}

.hero-section .grid-item img {
    width: 100%;
    height: auto;
    margin-top: 10px;
    animation: slideInFromRight 2s ease-in-out;
}
  

#close-menu-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
    display: none;
}

#hamburger-btn {
    color: #fff;
    cursor: pointer;
    display: none;
}

@keyframes slideInFromRight {
    0% {
      transform: scale(0.8,0.8); /* Start from 100% right of its container */
      opacity: 0; /* Start with 0 opacity */
    }
  }


  @keyframes slideInFromRight1 {
    0% {
        transform: translateY(100%); /* Start from 100% right of its container */
        opacity: 0; /* Start with 0 opacity */
      }
      100% {
        transform: translateY(0); /* Move to original position */
        opacity: 1; /* Fade in */
      }
  }

@media (max-width: 768px) {
    header {
        padding: 10px;
    }

    header.show-mobile-menu::before {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(5px);
    }
    .navbar .logo {
        /* Position logo absolutely */
        top: 70px; /* Adjust top distance as needed */
        left: 60px; /* Adjust left distance as needed */
        width: 200px; /* Adjust width as needed */
        height: auto; /* Maintain aspect ratio */
    }
    
    .navbar .logo {
        font-size: 1.7rem;
    }


    #hamburger-btn,
    #close-menu-btn {
        display: block;
    }

    .navbar .menu-links {
        position: fixed;
        top: 0;
        left: -250px;
        width: 250px;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        padding: 70px 40px 0;
        transition: left 0.2s ease;
    }

    header.show-mobile-menu .navbar .menu-links {
        left: 0;
    }

    .navbar a {
        color: #000;
    }

    .hero-section .content {
        text-align: center;
    }

    .hero-section .content :is(h2, p) {
        max-width: 100%;
    }

    .hero-section .content h2 {
        font-size: 2.3rem;
        line-height: 60px;
    }

    .hero-section .content button {
        padding: 9px 18px;
    }

    .hero-section .grid-item {
        border: none;
        padding: 0%;
        text-align: center;
    }
    
    .hero-section .grid-item img {
        width: 100%;
        height: auto;
        margin-top: 15px;
        animation: slideInFromRight 2s ease-in-out;
    }
}