/* Generated by ai - chatgpt */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

/* ===== Container ===== */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 3rem;
}

/* ===== Row ===== */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -0.5rem;
}

/* ===== Columns ===== */
[class^="col"] {
  padding-inline: 0.5rem;
  width: 100%;
}

/* ===== Column Sizes ===== */
.col-1 { width: 8.333%; }
.col-2 { width: 16.666%; }
.col-3 { width: 25%; }
.col-4 { width: 33.333%; }
.col-5 { width: 41.666%; }
.col-6 { width: 50%; }
.col-7 { width: 58.333%; }
.col-8 { width: 66.666%; }
.col-9 { width: 75%; }
.col-10 { width: 83.333%; }
.col-11 { width: 91.666%; }
.col-12 { width: 100%; }

/* ===== Responsive Breakpoints ===== */

/* Tablet */
@media (min-width: 768px) {
  .col-md-6 { width: 50%; }
  .col-md-4 { width: 33.333%; }
  .col-md-3 { width: 25%; }
  .col-md-12 { width: 100%; }
}

/* Desktop */
@media (min-width: 992px) {
  .col-lg-6 { width: 50%; }
  .col-lg-4 { width: 33.333%; }
  .col-lg-3 { width: 25%; }
  .col-lg-12 { width: 100%; }
}

.input-group{
        margin-bottom:15px;
    }

    .input-group label{
        display:block;
        margin-bottom:5px;
    }

    .input-group input{
        width:100%;
        padding:10px;
        border:1px solid #ccc;
        border-radius:5px;
    }

    .login-btn{
        width:100%;
        padding:10px;
        border:none;
        background:#007bff;
        color:white;
        border-radius:5px;
        cursor:pointer;
        font-size:16px;
    }

    .login-btn:hover{
        background:#0056b3;
    }


.cards{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
}

.card{
    border:1px solid #ccc;
    border-radius:10px;
    overflow:hidden;
    background:white;
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
}

.card img{
    width:100%;
    height:200px;
    object-fit:cover;
}

.card-content{
    padding:15px;
}

.edit-btn{
    display:inline-block;
    margin-top:10px;
    padding:10px 15px;
    background:#007bff;
    color:white;
    text-decoration:none;
    border-radius:5px;
}


.navbar{
    display:flex;
    gap:20px;
    padding:20px;
    background:#111;
}

.navbar a{
    color:white;
    text-decoration:none;
    font-weight:bold;
}

#login{
    display: flex;
    justify-content: center;
    margin-top: 25vh;
}