@media screen and (max-width: 600px) {
    .article-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
        gap: 20px;
        margin-top: 20px;
        width: 100%;
    }

        .article-grid img {
            width: 100%;
            height: 200px;
            object-fit: contain;
        }

        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
            /* grid-template-columns: repeat(2, 450px); */
            gap: 20px;
            margin: 40px auto;
            max-width: 1100px;
        }


    .form-container {
        width: 100%;
        padding: 15px;
    }

    .signup-body {
        position: relative;
        /* background-image: url('/images/banner.jpg'); */
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        z-index: 1; 
    }

        /* Inputs and textarea */
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="number"],
        input[type="file"],
        input[type="date"],
        textarea {
            width: 100%;
            padding: 10px 12px;
            font-size: 12px;
            border: 1.8px solid #ccc;
            border-radius: 5px;
            transition: border-color 0.3s ease;
            resize: vertical;
            box-sizing: border-box;
            box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
            margin-bottom: 10px;
        }
    
        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="password"]:focus,
        textarea:focus {
            outline: none;
            border-color: #bfa046;
            /* gold */
            background-color: #fff9e6;
            /* light gold background */
        }
    
        /* Textarea specific height */
        textarea {
            min-height: 120px;
        }
    
        .container {
            position: relative;
            width: 100%;
            padding-right: 10px;
        }

    
        .icon {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            color: #000000;
        }
    
        .password-container {
            /* position: relative; */
            position: relative;
            width: 100%;
            padding-right: 10px;
        }
    
        .toggle-password {
            position: absolute;
            top: 50%;
            right: 30px;
            transform: translateY(-50%);
            cursor: pointer;
            color: #666;
        }
    
        .gender-box {
            display: flex;
            align-items: center;
            /* justify-content: center; */
            width: 100%;
            /* margin: 10px 0 20px; */
            border: 1.8px solid #ccc;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
        }

        .gender-details {
            margin: 7px;
            padding: 4px;
        }
        
    
        /* eview Image */
        .preview-container {
            display: none;
            justify-content: center;
            align-items: center;
            margin-top: 15px;
        }
    
        .preview-container img {
            max-width: 100%;
            max-height: 150px;
            border-radius: 8px;
            margin-top: 10px;
        
    }

    .event_container{
        width: 100%;
        background-color: #ffffff;
        display: flex;
        height: fit-content;
        flex-direction: column;
        margin-bottom: 20px;

    }

    .event_details {
    width: 100%;
    }

    .event_details img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    }

    .gallery-card {
    width: calc(50% - 12px);
  }

  .new-hero {
      position: relative;
      width: 100%;
      height: 400px;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      margin-top: 20px;
      padding: 20px 0px;
  }

  .video-container {
      width: 100%;
      /* height: 200px; */
  }

  .video-container iframe {
      height: 100%;
      width: 100%;
      border-radius: 8px;
  }

.scroll-card {
    flex: 0 0 200px;
    background-color: #fff;
    border-radius: 8px;
    padding: 6px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.logo-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.logo-title img {
    height: 30px;
    margin-bottom: 0.5rem;
}
  
}


@media (max-width: 480px) {
    .gallery-card {
        width: 100%;
    }
}