@import url('http://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700&display=swap');

:root{
--main-color:#000000;
--primary-color:#ffc000;
--black:#13131a;
--border: .1rem solid rgba(255,255,255,.3);
}

*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
transition: .2s linear;
}

html{
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
}

html::-webkit-scrollbar{
width: .8rem;
}

html::-webkit-scrollbar-track{
background: transparent;
}

html::-webkit-scrollbar-thumb{
background: var(--primary-color);
}

section{
padding: 2rem 7%;
}

.heading{
text-align: center;
color: var(--primary-color);
text-transform: uppercase;
font-size: 4rem;
margin-top: 5rem;
}

.btn{
display: inline-block;
margin-top: 1rem;
padding: 1rem 3rem;
font-size: 1.8rem;
border: 0.1rem solid var(--primary-color);
background: var(--primary-color);
color: #fff;
cursor: pointer;
text-transform: capitalize;
}

.btn:hover{
background: #fff6eb;
color: var(--primary-color);
}

/* header */

.header{
position: sticky;
top: 0;
left: 0;
right: 0;
background: var(--main-color);
padding: 2rem 10%;
display: flex;
align-items: center;
z-index: 1000;
}

.header .logo{
margin-right: auto;
font-size: 2.5rem;
text-transform: capitalize;
color: #fff;
font-weight: bolder;
}

.header .logo i{
color: #fff;
}

.header .navbar{
position: relative;
}

.header .navbar #close-navbar{
position: absolute;
top: 1.5rem;
right: 2rem;
font-size: 4rem;
cursor: pointer;
color: #444;
display: none;
}

.header .navbar a{
margin-right: 2rem;
font-size: 2rem;
text-transform: capitalize;
color: #fff;
}

.header .navbar a:hover{
color: var(--primary-color);
}

.header .icons div{
margin-left: 1.5rem;
cursor: pointer;
color: #fff;
font-size: 2.5rem;
}

.header .icons div:hover{
color: var(--primary-color);
}

.header #menu-btn{
display: none;
}

/* end */

/* home */

.home{
min-height: 100vh;
display: flex;
align-items: center;
background: url(../image/background.jpg);
background-size: cover;
background-position: center;
}

.home .content{
max-width: 60rem;
}

.home .content h3{
font-size: 6rem;
text-transform: uppercase;
color: #fff;
margin-bottom: 20px;
}

/* end */

/* about us */

.about{
padding-top:50px;
padding-bottom: 50px;
background-image: url(../image/about-bg.png);
background-repeat: repeat-y;
background-position: center top;
}

.about .row{
display: flex;
align-items: center;
flex-wrap: wrap;
}

.about .row .image{
flex: 1 1 55rem;
}

.about .row .image img{
width: 100%;
}

.about .row .content{
flex: 1 1 45rem;
padding: 8rem;
}

.about .row .content h3{
font-size: 3rem;
color: var(--main-color);
}

.about .row .content p{
font-size: 1.6rem;
color: #444;
padding: 1rem 0;
line-height: 1.8;
}

.line{
margin-top: 35px;
margin-bottom:35px;
width: 100px;
height: 3px;
background: var(--primary-color);
}

/* end */

/* menu */

.menu .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 1.5rem;
}

.menu .box-container .box{
padding: 5rem;
text-align: center;
background-color: var(--main-color);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.menu .box-container .box img{
height: 10rem;
}

.menu .box-container .box h3{
color: #fff;
font-size: 2rem;
padding: 1rem 0;
}

.menu .box-container .box .price{
color: #fff;
font-size: 2.5rem;
padding: .5rem 0;
}

.menu .box-container .box:hover{
background-color: var(--primary-color);
}

.menu .box-container .box:hover > *{
color: var(--black);
}

/* end */

/* contact */

.contact .row{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 2rem; 
}

.contact .row .image{
-webkit-box-flex: 1;
-ms-flex: 1 1 40rem;
flex: 1 1 40rem;
}

.contact .row .image img{
width: 100%;
}

.contact .row form{
-webkit-box-flex: 1;
-ms-flex: 1 1 40rem;
flex: 1 1 40rem;
border: 0.1rem solid var(--main-color);
padding: 2rem; 
}

.contact .row form h3{
font-size: 2.5rem;
text-align: center;
color: var(--main-color);
padding-bottom: 1rem;
text-transform: uppercase;
}

.contact .row form .inputBox{
display: flex;
align-items: center;
margin-top: 2rem;
margin-bottom: 2rem;
background: var(--main-color);
border: var(--border);
}

.contact .row form .inputBox span{
color: var(--primary-color);
font-size: 2rem;
padding-left: 2rem;
}

.contact .row form .inputBox input{
width: 100%;
padding: 2rem;
font-size: 1.7rem;
color: #fff;
text-transform: none;
background: none;
}
.video{
    width: auto;
    height: auto;
    margin: auto;
    display: flex;
    padding: auto;
}
.video1{
    width: auto;
    height: auto;
    margin: auto;
    display: flex;
    padding: auto;
}

/* end */

/* Footer */

.footer{
background: var(--main-color);
}

.footer .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap: 2rem;
margin-top: 30px;
} 

.footer .box-container .box h3{
font-size: 2.2rem;
color: #fff;
padding: 1rem 0;
}

.footer .box-container .box p{
font-size: 1.5rem;
line-height: 2;
color: #ccc;
padding: 1rem 0;
}

.footer .box-container .box .link{
font-size: 1.7rem;
line-height: 2;
color: var(--primary-color);
padding: .5rem 0;
display: block;
}

.footer .box-container .box .link:hover{
color: #ffaa42;
text-decoration: underline;
}

.footer .credit{
color: #fff;
text-align: center;
margin-top: 3rem;
padding-top: 3rem;
font-size: 2rem;
text-transform: capitalize;
border-top: 0.1rem solid var(--primary-color);
}

.footer .credit span{
color: var(--primary-color);
}


/* media queries */

@media (max-width:991px){

html{
font-size: 55%;
}

.header{
padding:2rem 5%;
}

section{
padding:2rem;
}

}

@media (max-width:768px){

.header #menu-btn{
display: inline-block;
}

.header .navbar{
position: fixed;
top: 0; right: -105%;
width: 30rem;
background: #fff;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
z-index: 1200; 
}

.header .navbar #close-navbar{
display: block;
}

.header .navbar.active{
box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.8);
right: 0;
}

.header .navbar a{
color: var(--black);
display: block;
margin: 1rem 0;
text-align: center;
font-size: 3rem;
}

.home{
background-position: left;
justify-content: center;
text-align: center;
}

.home .content h3{
font-size: 4rem;
}
}

@media (max-width:450px){

html{
font-size: 50%;
}

}