@import url('https://fonts.googleapis.com/css2?family=Squada+One&display=swap');
html {  scroll-behavior: smooth;}
body{ margin: 0; padding: 0}
ul{ margin:0; padding: 0; list-style-type: none}
h1, h2, h4, h6, .menu li a, .navbar-brand{font-family: 'Squada One', cursive; }
.material-icons{ vertical-align: middle;}

#about {
    background: url("../images/thalimenusweet.jpg") right no-repeat fixed;
    background-size: cover
}
#menu {
    background: url("../images/MenuSheetsweet.jpg") right no-repeat fixed;
    background-size: cover
}

/*
#gallery {
    background: url("../images/Map_delivery.png") top center no-repeat;
    background-size: cover
}
*/

/*#gallery{ background: url("../images/slide2.jpeg") right no-repeat fixed; background-size: cover}*/
#contact{ background: url("../images/contact.jpg") right no-repeat fixed; background-size:cover}
#contact:before{ content: ''; background:rgba(0,0,0,0.6); width: 100%; height: 100%; position: absolute;}

.box{ position:absolute; top: 50%; transform: translateY(-50%); width: 60%; border-radius: 0px; color: #fff;} /*background:rgba(255,255,255,0.9); padding:50px;*/
.box h2{ font-size:70px; color: #fff; display: inline-flex}
.box p{ font-size:18px; color: #fff}
.box.right{ right:0}

h3{ font-size:18px; line-height: 30px;}
h5{ font-size:14px; line-height: 26px;}

#video{ width:100%; height: 100vh; background-size: cover}
#video video {
    top: 0;
    left: 0;
    object-fit: cover;
    background-color: #000;
    position: relative;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    background-size: cover;
}
/*#video:before{ content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9}*/
#video:before{ content: ''; background: url("../images/pattarn.png") repeat #000; opacity: 0.5; width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 9 }

.pattarn{ position: relative}
.pattarn:before{ content: ''; background: url("../images/pattarn.png") repeat #000; opacity: 0.5; width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 0 }

.video-content{ position: absolute; top: 50%; transform: translateY(-50%); color: #fff; z-index: 9; width: 100%; text-align: center}
.video-content h2{ font-size: 100px; text-shadow: 0 0 10px #000}
.video-content h2 small{ font-size: 60px; }
.video-content p{ font-size: 40px; text-shadow: 0 0 10px #000}

.bg-transparent .navbar-brand, .menu li{ font-size: 30px; color: #fff;}
.bg-light .navbar-brand, .menu li{ font-size: 30px; color: #000}
.bg-transparent  .menu li a{ color: #fff !important; text-transform: uppercase;}
.bg-transparent .menu li a.active{ color:#cc0000 !important}
.bg-transparent .menu li:last-child a{ background:#cc0000; border-radius: 30px; padding: 0 20px; color:#fff;}

.bg-light{ background: #fff !important;}
.bg-light .menu li a{ color: #000; text-transform: uppercase;}
.bg-light .menu li a.active{ color:#cc0000 !important}
.bg-light .menu li:last-child a{ background:#cc0000; border-radius: 30px; padding: 0 20px; color:#fff;}

.footer_link a{ color:#fff; display: block; padding: 2px 0; font-size: 14px;}
.social li{ display: inline-block; padding: 0 10px;}
.social li a{ color: #fff; padding:6px}
.social li a i{ transform: scale(1); transition: 0.3s}
.social li a:hover i{ transform: scale(1.5)}

.price h6{ font-size: 40px; color: #f31771; position: relative; display: inline-block; padding-bottom: 10px;}
.price h6::before{ content: ''; width: 60%; height: 3px; position: absolute; bottom: 0; left:0; background: #f31771}

.price_list{ margin-bottom: 60px;}
.price_list li{ width: 40%; display: inline-table; padding: 10px 0; line-height: 30px;}
.price_list li:nth-child(even){ margin-left: 9%;}

.bg-grey{ background:#f8f8f8}

@media only screen and (max-width:768px){
    .video-content h2{ font-size: 60px; text-shadow: 0 0 10px #fff}
    .video-content h2 small{ font-size: 30px; }
    .video-content p{ font-size: 20px; text-shadow: 0 0 10px #000}
    
    .box{ position:absolute; top: 50%; transform: translateY(-50%); background:rgba(255,255,255,0); padding:15px; width:98%; margin: 1%; border-radius: 10px; left: 0} 
    .box h2{ font-size:30px;}
    .box p{ font-size:16px;}
    .box.right{ left:0;}
    
    #contact h3{ font-size: 18px;}
    #contact { height: 100% !important;}
    
    .w-50{ width: 100% !important}
    .ml-3{ margin-left: 6px !important}
    .mmt-5{ margin-top: 20px;}
    #footer h3{ margin: 0}

    #about {
        background: url("../images/thalimenusweet.jpg") left no-repeat fixed;
    }
    
    .price_list{ margin-bottom: 30px;}
    .price_list li{ width: 100%; display: block; padding: 10px 15px}
    .price_list li:nth-child(even){ margin-left: 0%; background: #f8f8f8}
    
/*
    #gallery {
    background: url("../images/Map_delivery.png") top center no-repeat;
    background-size: contain;
        height: inherit;
    }
*/
}