h1, h2, h3 {
    color: #757575
}

h1{
display:inline;
font-size: 20px;
color: #707B8E;
}

img, video {
    max-width: 100%;
    height: auto;
}

.navbar ul {
    list-style: none !important;
    text-align: center;  /* Centers the inline-block children */
    padding: 0;
    margin: 0;
    display: inline-block !important;

}

.navbar li {
    display: inline-block !important; /* Allows items to sit horizontally side-by-side */
    list-style: none !important;
    list-style-type: none !important;
}

.navbar li::before {
    content: "" !important;
    display: none !important;
}

.navbar a{
    text-decoration:none;
    width: 100px;
    display:block;
    padding:25px 20px
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 15px;
}

.navbar a:hover{
      background: #520C69;
}

.list{
    list-style:none;
    text-decoration: none;
}

.flex-container {
    display: flex; /* Aligns children side-by-side */
    gap: 20px;
    font-size: 20px;
    color: #707B8E;
}

.left-col, .right-col {
    flex: 1; /* Makes both columns equal width */
    padding: 10px;
}

.ad{
   font-size: 12px;
    color: #707B8E;
    margin-left: 20%;
    margin-right: 20%;
    text-align: center;
}

.grid-container {
    display: grid;
    /* Creates 4 equal-width columns */
    grid-template-columns: repeat(4, 1fr);
    /* Optional spacing between cells */
    gap: 0px;
    padding: 20px;
    width:100%;
    place-items: start center;
}

.grid-item {
    padding: 0px; /* Space inside each cell */
    color:#757575 ;
    border: 0px solid ;
    font-size: 20px;
}
.navbg{
        background-color: #cccafb;
        height:5px;
        width: 100%
        place-content: center;
}

.header {
    display: grid;
    grid-template-columns: repeat(1,);
    /* Optional spacing between cells */
    place-items: start center;
}
.img {
    float: left;
    margin: 10px;
}

.botnav {
    display: grid;
    grid-template-columns: repeat(1);
    /* Optional spacing between cells */
    place-items: start center;
    border: 0px;
}

.left-block, .right-block {
    width: 45%; /* Give them specific widths so they don't touch */
}

.center-text {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    /* Optional spacing between cells */
    place-items: start center;
}

.center-image {
    display: block;
    margin-left: auto;
    margin-right: auto;

}

a:link {
    color: #3332fe;
    background-color: transparent;
    text-decoration: none;
    font-weight: bold;
}
a:hover {
    color: #ff0000;
    background-color: transparent;
    text-decoration: none;
    font-weight: bold;
}
a:visited {
    color: #2a6a27;
    background-color: transparent;
    text-decoration: none;
}

@media (max-width: 768px) {
    .nav-links {
        flex-direction: column;
        align-items: center;
    }
}

@media (min-width: 360px) and (max-width: 412px) {
     .nav-links {
        flex-direction: column;
        align-items: center;
    }

}

/* --- 1. MOBILE --- */
/* Target small phones (Default in mobile-first design) */
@media (max-width: 575.98px) {
     .nav-links {
        flex-direction: column;
        align-items: center;
    }

}

/* --- 2. TABLET --- */
/* Target iPads and large tablets */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Styles for tablets */
}

/* --- 3. LAPTOP --- */
/* Target small laptops and standard desktop screens */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Styles for laptops */
}

/* --- 4. DESKTOP --- */
/* Target large monitors and high-resolution screens */
@media (min-width: 1025px) {
    /* Styles for large desktops */
}