/*Google Fonts*/

.noto-serif{
    font-family: "Noto Serif", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;

}

.italiana-regular {
    font-family: "Italiana", sans-serif;
    font-weight: 400;
    font-style: normal;
}

body{
    background-color: #000000;
    height: 100dvh;
    font-family: "Noto Serif", serif;
}

.off-white{
    color: #d9d9d9;
}

.section-header{
    width: 70%;
    margin: auto;
}
#logo{
    height: 15rem;
    width: 15rem;
}

/*css code for nav bar*/
.nav-link{
    color: #ffd633;
}

.guides{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 2rem 5rem;
    gap: 2rem;
}

.guide{
    margin: 1rem;
}

/*To keep all the images in the card roughly the same height*/
.card > img{
    height: 36rem;
    object-fit: cover;
    width: 100%;
}

.card{
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #000000;
    border: 2px solid #ffd633;
}

.card-title{
    color: white;
}

/*.card-body {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: space-between;*/
/*    flex-grow: 1;*/
/*}*/

.card-text{
    color: ghostwhite;
}

/*media queries for phones and small devices*/
@media only screen and (max-width: 600px) {
    .guides {
        flex-direction: column; /* ✅ this now works properly */
        align-items: center;     /* center the stacked cards */
        padding: 1rem;           /* tighter padding for mobile */
    }

    .card > img {
        height: auto; /* allow images to scale down on small screens */
    }

    .card {
        width: 100%;   /* make cards take full width on mobile */
        max-width: 26rem;
    }
}

/*media queries for tablets and small devices*/
@media only screen and (max-width: 768px) {
    .guides {
        flex-direction: column;
        align-items: center;
        padding: 1rem;
    }

    .card {
        width: 100%;
        max-width: 26rem;
    }
}

@media (max-width: 600px) {
    .card > img {
        height: 12rem;
    }

    .card {
        max-width: 100%;
    }
}