:root{
    --black: #000;
    --withe: #fff;
    --blue: #0fa89d;
    --blue-light: #f5fffd;
    --blue-3: #16c8bca9;
    --brown:#d39a45;

    --font-En: 'En';
    --font-Tinus: 'Tinus';
}
/* font */
.font-Tinus{
    font-family: var(--font-Tinus) !important;
}
.font-En{
    font-family: var(--font-En) !important;
}
/* bg-color */
.bg-brown{
    background-color: var(--brown) !important;
}
.bg-blue-light{
    background-color: var(--blue-light) !important;
}
.bg-blue{
    background-color: var(--blue) !important;
}
.bg-green{
    background-color: var(--green) !important;
}
.bg-blue2{
    background-color: var(--blue-2) !important;
}
/* color */
.text-brown{
    color: var(--brown) !important;
}
.text-blue{
    color: var(--blue) !important;
}
.text-dark-blue{
    color: var(--dark-blue) !important;
}
/* font-size */

.li-fs{
    font-size: 1.2rem  !important;
}
.f-s-08{
    font-size: 1vw;
}
.f-s-09{
    font-size: 1.2vw;
}
.s-f-1{
    font-size: clamp(1.1rem,1.4vw,1.6rem) !important;
}
.f-s-11{
    font-size: clamp(1.3rem,1.6vw,1.8rem) !important;
}
.f-s-12{
    font-size: clamp(1.5rem,2vw,2rem) !important;
}
.f-s-2{
    font-size: 1.7rem !important;
}
.f-s-21{
    font-size: 2.6vw;
}
.f-s-22{
    font-size: 2.8vw;
}
.f-s-3{
    font-size: clamp(1.8rem,3vw,3rem) !important;
}
.f-s-31{
    font-size: 3.2vw;
}

@font-face {
    font-family: En;
    src: url('../fonts/Roboto_Condensed/static/RobotoCondensed-Regular.ttf') format('truetype');
    font-weight:100;
    font-size: 1rem;
}
@font-face {
    font-family: Tinus;
    src: url('../fonts/2/Tinos/Tinos-Regular.ttf')format('truetype');
}
h1,h2,h3,h4,h5{
    font-family: var(--font-Tinus) !important;
}
p{
    font-family: var(--font-En);
}
.text-j{
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.75;
    word-spacing: 1px;
    text-align-last: left;
}
/* body */
body{
    font-size: 1.4vw;
    font-family: var(--font-En) !important;
    overflow-x: hidden !important;
    background: url('/Portals/0/image/bg2.jpg') !important;
    background-repeat: repeat !important;
    background-size: clamp(30rem, 40%, 40rem) !important;
}
*{
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: normal !important;
}

/* Header */
.logo-top{
    width: 5rem;
    height: 5rem;
}
.navbar-toggler:focus{
    box-shadow: none !important;
}
.nav-link:hover{
    color: var(--blue) !important;
}
.div-header{
    max-height: 6rem;
    height: 5.5rem;
}
.myHeader{
    height: 5rem;
    width: 100% !important;
    transition: 
        transform 0.35s ease,
        opacity 0.35s ease,
        background-color 0.35s ease;
    z-index: 5 !important;
}
.sticky {
    position: fixed;
    background-color: var(--blue-3);
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999 !important;
    transform: translateY(0);
    opacity: 1;
}
.myHeader::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: blur(9px) !important;
    z-index: -3;
}

/* Hero Section */
.Hero-video{
    position: relative;
    height: 86vh;
}
#video-bg {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

.bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 0;
}

.bg-video.active {
    opacity: 1;
    z-index: 1;
}
.hero-title{
    font-size: clamp(2.5rem, 5vw , 4rem) !important;
    text-shadow: 0 4px 20px rgba(0,0,0,.6);
}

/* about us */

.about-us{
    min-height: 50vh;
}
.star::after, .star::before{
    content: "";
    display: inline-block;
    background: url('svg/star-element.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 1.3rem;
    height: 1.3rem;
}
.about-img1{
    background: url('/Portals/0/image/about-img-2.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 73%;
    height: 22rem;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.about-btn{
    width: 9rem;
    height: 3.5rem;
    border: 2px solid var(--blue);
    color: var(--blue);
    font-family: var(--font-Tinus);
}
/* menu */
.menu{
    min-height: 50vh;
}
.menu-items{
    width: 16rem;
    height: 35rem;
    border: 1px solid var(--blue);
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    border-bottom-left-radius: 200px;
    border-bottom-right-radius: 200px;
}
.menu-img{
    width: 10rem;
    height: 10rem;
} 
/* chef */
.chef{
    min-height: 50vh;
}
.chef-btn{
    width: 12rem;
    height: 3.5rem;
    border: 2px solid var(--blue);
    color: var(--blue);
    font-family: var(--font-Tinus);
}
.chef-img{
    background:url('/Portals/0/image/chef1.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 16rem;
    height: 35rem;
    border: 1px solid var(--blue);
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    border-bottom-left-radius: 200px;
    border-bottom-right-radius: 200px;
}
.chef-img2{
    background: url('/Portals/0/image/mainchef2.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    border: 1px solid var(--blue);
}
.chef-img3{
    background: url('/Portals/0/image/mainchef3.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 73%;
    height: 22rem;
    border: 1px solid var(--blue);
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
/* Comment */
.comment-langing{
    height: 40rem;
    background: url('/Portals/0/image/comment-img.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.comment-text{
    border: 1px solid var(--blue);
    background-color: var(--blue-3);
    border-radius: 200px;
    width: 100%;
    height: 60%;
} 
/* footer */
.footer{
    height: 30rem;
}
.footer-left{
    background: url('/Portals/0/image/footer-img1.jpg');
        background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;

}
.footer-right{
    background: url('/Portals/0/image/footer-img2.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;

}
.footer-star{
    background: url('svg/star-element.svg');
    width: 1.3rem;
    height: 1.3rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.footer-div{
    position: relative;
    width: 5rem;
    height: 10rem;
}
.footer-div::before{
    position: absolute;
    content: '';
    left: auto;
    right: auto;
    top: -32px;
    width: 1.6px;
    height: 25px;
    background-color: var(--blue);
}
.footer-div::after{
    position: absolute;
    content: '';
    left: auto;
    right: auto;
    bottom: -32px;
    width: 1.6px;
    height: 25px;
    background-color: var(--blue);
}
.footer-icon{
    border: 1px solid var(--brown);
    width: 2rem;
    height: 2rem;
    transition: all 0.3s ease-in-out;
}
.footer-icon:hover{
    background-color: var(--blue-3);
    border: 1px solid var(--withe) !important;
}
.footer-icon:hover > i{
    color: var(--withe) !important;
}
.footer-border-top{
    border-top: 1px solid var(--brown);
}
.footer-text{
    transition: all 0.3s ease-in-out;
}
.footer-text:hover{
    color: var(--blue) !important;
}
/* Module Comment */
#dnn_ctr389_ModuleContent .CommentsFlag{
    display: none !important;
}
#dnn_ctr389_ModuleContent{
    padding: 1rem 3rem !important;
}
#dnn_ctr389_ModuleContent .acaction a{
    background-color: var(--blue) !important;
    border: none !important;
    border-radius: 3px !important;
}
#dnn_ctr389_ModuleContent .acaction a:hover{
    transform: scaleY(0.95) !important;
}
#dnn_ctr389_ModuleContent .USERNAME a{
    text-decoration: antiquewhite !important;
    color: var(--blue) !important;
}
#dnn_ctr389_ModuleContent #dnn_ctr389_DNNComment_ddlSortType{
    background-color: transparent !important;
    border: none !important;
    color: var(--blue);
}
.ViewDNNComment table{
    background-color: transparent !important;
}
.ViewDNNComment .tbody{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.ViewDNNComment .SubHead p{
    font-size: clamp(1.3rem,1.6vw,1.8rem) !important;
    text-align: center !important;
    color: #000 !important;
}
.ViewDNNComment td:not(:first-child){
    font-size: 0.8rem !important;
}