/* BASE DESKTOP */
body {
    background-color: whitesmoke;
    width: 100%;
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 1;
}
.site-banner {
    display: flex;
    background-color: #F9B024;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.site-logo {
   height: 100px;
}
.logo-icon {
    height: 100%;
}
.site-title {
    text-decoration: none;
    color: black;
}
.logo-title {
}
/*NAVBAR*/
.site-nav {
    display: flex;
    justify-content: center;
    gap: 50px;
    align-items: center;
    background-color: white;
    border-color: #F9B024;
    border-style: solid;
    border-right: 0;
    border-left: 0;
    padding: 10px;
}
.nav-icon {
    height: 40px;
    width: auto;
    margin-inline: auto;
}
.site-nav > a:link {
    text-decoration: none;
    color: black;
}
.site-nav > a:visited {
    text-decoration: none;
    color: black;
}
.site-nav > a:hover {
    text-decoration: none;
    color: #4C80C0;
}
.site-nav > a:active {
    text-decoration: none;
    color: #F9B024;
}

/* MAIN */
main {
    display: grid;
    grid-template-columns: 100px 5fr 100px;
    padding-block: 20px;
    margin-inline: auto;
}
hr {
    border: 2px solid gray;
    margin-block: 10px;
    width: 100%;
    height: 1px;
    border-radius: 5px;
    background-color: gray;
}

/*FOOTER*/
footer {
    text-align: center;
}
.about {
    background-color: antiquewhite;
    padding: 20px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3,1fr);
}
.about-us, .community, .goal {
    font-size: x-large;
}
p {
    font-size: large;
}
.social-links {
    background-color: #4C80C0;
    padding: 20px;
}
.soc-icon-con {
    display: flex;
    text-align: center;
    justify-content: center;
}
.soc-icon {
    height: 30px;
    margin: 10px;
}
/* NOTEBOOK */
@media(max-width: 1600px) {
    main {
        display: block;
        margin-inline: 50px;
    }

    .main-content-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    .item-box {
        overflow: hidden;
        height: 400px;
        border-radius: 10px;
    }

    .holiday-desc {
        height: 400px;
        border-radius: 10px;
        padding-inline: 20px;
        align-content: center;
        text-align: center;
        background-image: url("march_8.jpg");
        background-size: cover;
    }

    .iframe-box {
        align-content: center;
        transform: none;
        margin-top: -80px;
        margin-left: -5px;
        pointer-events: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* SHOPS */
    .shop-name {
        font-size: large;
        color: #2d3748;
        text-align: center;
        }
    .shop-logo {
        border-radius: 100%;
        height: 150px;
        width: 150px;
        margin-inline: auto;
    }
    /* Category */
    .cat-img {
        border-radius: 10px;
        width: 150px;
        height: 150px;
        object-fit: contain;
    }

    .section-title {
        font-size: medium;
    }
}

/* TABLET */
@media(max-width: 920px){
    main {
        display: block;
        margin-inline: 50px;
    }

    .main-content-grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .section-title {
        font-size: small;
    }

    .iframe-box {
        align-content: center;
        transform: none;
        margin-top: -100px;
        margin-left: -8px;
        pointer-events: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* SHOPS */
    .shop-name {
        font-size: large;
        color: #2d3748;
        text-align: center;
        }
    .shop-logo {
        border-radius: 100%;
        height: 150px;
        width: 150px;
        margin-inline: auto;
    }
    /* Category */
    .cat-img {
        border-radius: 10px;
        width: 150px;
        height: 150px;
        object-fit: contain;
    }

    .about {
        grid-template-columns: 1fr;
    }
}

/* MOBILE */
@media(max-width: 500px) {
    .site-banner {
        display: flex;
        background-color: #F9B024;
        align-items: center;
        justify-content: center;
        padding: 10px;
        gap: 10px;
        font-size: large;
    }
    .site-logo {
        height: 70px;
    }
    .logo-icon {
        height: 100%;
    }
    .site-title {
        text-decoration: none;
        color: black;
    }
    .slogan {
    	font-size: small;
    }    
    .logo-title {
        font-size: large;
    }
    .site-nav {
        display: flex;
        justify-content: space-around;
        background-color: white;
        border-color: #F9B024;
        border-style: solid;
        border-right: 0;
        border-left: 0;
        padding: 10px;
        gap: 0;
    }
    .nav-icon {
        height: 30px;
    }
    main {
        display: block;
        margin-inline: 0;
        padding-block: 5px;
    }
    .main-section {
        gap: 5px;
        padding-inline: 5px;
    }
    .main-content-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }

    .item-box {
        overflow: hidden;
        height: 350px;
        border-radius: 10px;
        background-color: white;
    }

    .holiday-desc {
        height: 350px;
        border-radius: 10px;
        padding-inline: 20px;
        align-content: center;
        text-align: center;
        background-image: url("march_8.jpg");
        background-size: cover;
    }

    .iframe-box {
        align-content: center;
        transform: scale(0.9);
        margin-top: -120px;
        pointer-events: none;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
    }

    .section-title {
        font-size: small;
    }
    hr {
        margin-block: 5px;
    }
    /* SHOPS */
    .shops-sections {
        gap: 5px;
    }
    .shop-box {
        padding: 0;
        border-style: none;
        border-radius: 20px;
        background-color:white;
    }
    .shop-name {
        font-size: medium;
        color: #2d3748;
        text-align: center;
        }
    .shop-logo {
        border-radius: 100%;
        height: 100px;
        width: 100px;
        margin-inline: auto;
    }
    .shop-desc {
        word-wrap: normal;
        word-break: break-word;
        text-align: center;
        font-size: small;
    }
    /* Category */
    .cat-img {
        border-radius: 10px;
        width: 100px;
        height: 100px;
        object-fit: contain;
    }
    .cat-desc {
        text-align: center;
        font-size: medium;
    }

    .about {
        grid-template-columns: 1fr;
    }
    .about-us, .community, .goal {
    font-size: large;
    }
    p {
        font-size: medium;
    }
}