*{
    scroll-behavior: smooth;
    box-sizing: border-box;
}
body {
    width: 100%;
    font-family: 'Titillium Web', sans-serif;
    margin: 0;
}

header {
    width: 100%;
    margin: 0;
}

header .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: rgb(222, 221, 222);
    height: 5em;
    position: relative;
    top: 0.5em;
    z-index: 50;
}

.navbar a {
    text-decoration: none;
    font-size: 1em;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1em;
}

.navbar .logo img {
    width: 18em;
    border-radius: 10px;

}

.nav_menu {
    display: flex;
    width: 60%;
    align-items: center;
    justify-content: center;
}

.navbar .nav_menu .menu_items {
    display: flex;
    list-style: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0em;
    margin-right: 2em;
}

.menu_items {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0em;
    justify-content: center;
}

.menu_items a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8em;
    height: 2em;
    color: #576f05;
    font-weight: 900;
}

.menu_items li {
    width: fit-content;
    padding: 0em 1em;
}

.menu_no_child, .menu_has_child {
    display: flex;
    align-items: center;
    justify-content: center;
    /* width: 6em; */
    height: 4em;
}

.menu_no_child>a, .menu_has_child>a{
    display: flex;
    align-items: center;
    justify-content: center;
    /* width: 6em; */
    height: 2em;
    font-size: 1.3em;
}


.sub_menu {
    display: flex;
    flex-direction: column;
    list-style: none;
    flex-direction: column;
    position: absolute;
    align-items: center;
    background-color: rgb(222, 221, 222);
    border-radius: 15px;
    top: 4em;
    width: 10em;
    padding: 0em;
    z-index: 50;
    visibility: hidden;
    transition: 1ms ease-in;
}

.menu_has_child:hover>.sub_menu{
    visibility: visible;
}

.menu_icon {
    display: none;
}

section {
    width: 100%;
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    align-items: center;
    justify-content: center;
}

.container .intro_sec {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin: 0em;
    height: 40em;
    z-index: 1;
}

.intro_sec::before {
    content: '';
    background: url('Image/art-5243374_1920.jpg') no-repeat no-repeat center/cover;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0em;
    z-index: -1;
    opacity: 0.4;
}

.intro_sec h1 {
    font-size: 4em;
    font-family: 'Dancing Script', cursive;
    color: #576f05;
    margin: 0em;
    text-align: center;
}

.intro_sec p{
    font-size: 2em;
    font-family: 'Dancing Script';
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    color: #a85b0e;
    margin: 0.5em 0em;
    text-align: center;
}

.intro_sec button{
    width: 15em;
    height: 3em;
    border: none;
    border-radius: 30px;
    background-color: #04c762;
    margin: 1em 0em 0em;
}

.intro_sec button:hover{
    background-color: #fff;
    color: #04c762;
}

.intro_sec button a{
    text-decoration: none;
    padding: 12px;
    border-radius: 50%;
    font-size: 1.2em;
    color: #ffffff;
}

.intro_sec button a:hover{
    background-color: #fff;
    color: #04c762;
}

.container .intro_sec2{
    display: flex;
    flex-direction: column;
    margin: 2em;
}

.container .intro_sec2 .intro_welcome{
    display: inherit;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.intro_welcome h3{
    font-size: 2.5em;
    margin: 0em 0em 1em;
    font-family: 'Dancing Script';
}

.intro_welcome p{
    font-size: 1.2em;
    text-align: center;
    margin: 1em 0em;
}

.intro_sec3{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-top: 2px solid #576f05;
    margin: 1em 0em 3em;
}

.intro_sec3 .sec3_heading{
    font-family: 'Dancing Script';
    font-size: 2em;
    color: #576f05;
}

.intro_sec3 .category{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.intro_sec3 .item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ddcb0e;
    margin: 1em 0em;
}

.intro_sec3 .item .item_title a{
    text-decoration: none;
    font-size: 1.5em;
    color: #ffffff;
}

.intro_sec3 .item h5{
    margin: 0.6em 0em;
}

footer{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    background-color: #ddcb0e;
    bottom: 0em;
}

footer .footer_sec{
    display: flex;
    align-items: baseline;
    justify-content: space-evenly;
    margin: 3em 2em;
}

footer .footer_sec .footer_item{
    display: inherit;
    flex-direction: column;
    width: 25%;
    align-items: center;
    justify-content: center;

    a>img{
        width: 40px;
        vertical-align: middle;
    }
}

footer .footer_sec h4{
    font-size: 1.5em;
    margin: 1em 0em 0em;
    width: 100%;
    color: #6f3a05;
}

footer .footer_sec p{
    font-size: 1em;
    margin: 1em 0em 0em;
    width: 100%;
    color: #6f3a05;

    img{
        vertical-align: middle;
        width: 30px;
    }
}

footer .footer_sec .quick_link{
    text-align: center;
}

footer .footer_sec ul{
    display: flex;
    list-style: none;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    padding: 0em;
    width: 60%;
}

footer .footer_sec ul li{
    display: flex;
    list-style: none;
    align-items: center;
    justify-content: space-between;
    padding: 0em;
}

footer .footer_sec ul li a{
    text-decoration: none;
    font-size: 1.2em;
    color: #6f3a05;
    width: 8em;
}

.footer_item a{
    text-decoration: none;
    color: #6f3a05;
    width: 100%;
}

footer .footer_sec .social{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    
}

footer .footer_sec .social li{
    width: 5em;
}

footer .footer_sec .social li a{
    width: 4em;
}

footer .copyright{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #d2d2d2;

}

footer .copyright p{
    margin: 1em;
}


@media screen and (max-width: 1200px) {
    .menu_items a{
        font-size: 0.8em;
    }
}

@media screen and (max-width: 1000px) {
    .navbar .logo img {
        width: 10em;
        border-radius: 5px;
    
    }
    .menu_items a{
        font-size: 0.7em;
    }
    .menu_no_child>a, .menu_has_child>a{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 5em;
        height: 2em;
    }
}

@media screen and (max-width: 800px) {

    .navbar .logo img {
        width: 10em;
        border-radius: 5px;
    
    }
    .nav_menu {
        display: flex;
        width: 60%;
        align-items: center;
        justify-content: center;
    }
    
    .navbar .nav_menu .menu_items {
        display: flex;
        flex-direction: column;
        list-style: none;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0em;
        margin-right: 2em;
        background-color: rgb(222, 221, 222);
        position: absolute;
        top: 5em;
        left: 0;
        visibility: hidden;
    }
    
    .menu_items {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0em;
        justify-content: center;
    }
    
    .menu_items a{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 8em;
        height: 2em;
        color: #576f05;
        font-weight: 900;
    }
    
    .menu_items li {
        width: fit-content;
        padding: 0em 1em;
    }
    
    .menu_no_child, .menu_has_child {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 6em;
        height: 2em;
    }
    
    .menu_no_child>a, .menu_has_child>a{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 6em;
        height: 2em;
    }
    
    
    .sub_menu {
        display: flex;
        flex-direction: column;
        list-style: none;
        flex-direction: column;
        position: absolute;
        align-items: center;
        background-color: rgb(222, 221, 222);
        border-radius: 15px;
        top: 15em;
        right: 50%;
        width: 10em;
        padding: 0em;
        z-index: 50;
        visibility: hidden;
        transition: 1ms ease-in;
    }
        
    .menu_icon {
        display: inline-flex;
        margin: auto 2em;
    }

    .menu_icon button{
        width: 2em;
        height: 2em;
        background: url('Icon/menu.png') no-repeat no-repeat center/cover;
        border: none;
    }

    .container .intro_sec {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
        justify-content: center;
        margin: 0em;
        height: 18em;
        z-index: 1;
    }
    
    .intro_sec::before {
        content: '';
        background: url('Image/art-5243374_1920.jpg') no-repeat no-repeat center/cover;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0em;
        z-index: -1;
        opacity: 0.4;
    }
    
    .intro_sec h3 {
        font-size: 2em;
        font-family: 'Dancing Script', cursive;
        color: #576f05;
        margin: 0em;
        text-align: center;
    }
    
    .intro_sec p{
        font-size: 1em;
        font-family: 'Dancing Script';
        color: #6f3a05;
        margin: 0.5em 0em;
        text-align: center;
    }
    
    .intro_sec button{
        width: 10em;
        height: 2em;
        border: none;
        border-radius: 10px;
        background-color: #c70404;
        margin: 1em 0em 0em;
    }
    
    .intro_sec button a{
        text-decoration: none;
        padding: 1em;
        font-size: 1em;
        color: #ffffff;
    }
    
    .container .intro_sec2{
        display: flex;
        flex-direction: column;
        margin: 2em;
    }
    
    .container .intro_sec2 .intro_welcome{
        display: inherit;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .intro_welcome h3{
        font-size: 2.5em;
        margin: 0em 0em 1em;
        font-family: 'Dancing Script';
        text-align: center;
    }
    
    .intro_welcome p{
        font-size: 1.2em;
        text-align: center;
        margin: 1em 0em;
    }
    
    .intro_sec3{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        border-top: 2px solid #576f05;
        margin: 1em 0em 3em;
    }
    
    .intro_sec3 .sec3_heading{
        font-family: 'Dancing Script';
        font-size: 2em;
        color: #576f05;
    }
    
    .intro_sec3 .category{
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }
    
    .intro_sec3 .item{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #ddcb0e;
        margin: 1em 0em;
    }
    
    .intro_sec3 .item .item_title a{
        text-decoration: none;
        font-size: 1.5em;
        color: #ffffff;
    }
    
    .intro_sec3 .item h5{
        margin: 0.6em 0em;
    }

    footer .footer_sec{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 3em 1em;
        text-align: center;
    }
    
    footer .footer_sec .footer_item{
        display: inherit;
        flex-direction: column;
        width: 90%;
        align-items: center;
        justify-content: center;
    }
    
    footer .footer_sec h4{
        font-size: 1em;
        margin: 1em 0em 0em;
        width: 100%;
        color: #6f3a05;
    }
    
    footer .footer_sec p{
        font-size: 0.8em;
        margin: 1em 0em 0em;
        width: 100%;
        color: #6f3a05;

    }
    
    footer .footer_sec .quick_link{
        text-align: center;
    }
    
    footer .footer_sec ul{
        display: flex;
        list-style: none;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        padding: 0em;
        width: 60%;
    }
    
    footer .footer_sec ul li{
        display: flex;
        list-style: none;
        align-items: center;
        justify-content: space-between;
        padding: 0em;
    }
    
    footer .footer_sec ul li a{
        text-decoration: none;
        font-size: 0.8em;
        color: #6f3a05;
        width: 8em;
    }
    
    .footer_item a{
        text-decoration: none;
        color: #6f3a05;
        width: 100%;
        font-size: 0.8em;
    }
    
    footer .footer_sec .social{
        display: flex;
        flex-direction: row;
        width: 100%;
        align-items: center;
        justify-content: center;
        
    }
    
    footer .footer_sec .social li{
        width: fit-content;
    }
    
    footer .footer_sec .social li a{
        font-size: 0.8em;
        width: 4em;
    }

    footer .footer_sec .social img{
        width: 3em;
    }
    
    footer .copyright{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        background-color: #d2d2d2;
    
    }
    
    footer .copyright p{
        margin: 1em 0.2em;
    }
}