:root{
  --black: #000;
  --white: #fff;
  --grey: #999999;
  --yellow: #dab650;
  --yellow-dark: #916A29;
}

html, body{font-family: "Cinzel", serif; font-weight: 400; scroll-behavior: smooth;}
a, a:hover, a:focus, a:active{text-decoration: none;}
.text-underline{text-decoration: underline;}
/*a:hover{color: #f64747 !important;}*/
input:focus, select:focus, button:focus{box-shadow: none !important; outline: none !important;}
ul{padding: 0; margin: 0;}
p{font-size: 16px;}
img{max-width: 100%; width: auto;}

h1,h2,h3,h4,h5,h6{color: var(--black); margin-top: 0;}


/*--offcanvas-css--*/
#sidebar{opacity: 0;}
#sidebar.sidebar-wrapperd-box{opacity: 1;}
.sidebar-offcanvas-menu .outer {height: 100%; background: #ffffff; overflow: auto; padding: 0 0 20px;}
.sidebar-offcanvas-menu .inner {padding: 0px;}
.sidebar-offcanvas-menu #sidebar {position: fixed; top: 0px; bottom: 0px; width: 300px; left: -300px;}
.sidebar-offcanvas-menu .sidebar-top-header {padding: 15px; border-bottom: rgba(177, 177, 177, 0.29) 1px solid;}
.sidebar-offcanvas-menu .sidebar-top-header:after{content: ''; display: table; width: 100%;}
.sidebar-offcanvas-menu .sidebar-close-btn {text-align: right; float: right; padding:0;}
.sidebar-offcanvas-menu .sidebar-logo {float: left;}
.sidebar-offcanvas-menu .sidebar-logo img {max-width: 100px; margin: 0 auto;}
.sidebar-offcanvas-menu .sidebar-close-btn a{color: #343434; font-size: 30px;text-align: right; padding: 10px 0 0; cursor: pointer;}
.sidebar-offcanvas-menu ul.sidebar-menu, 
.sidebar-offcanvas-menu ul.sidebar-menu ul#menu-sidebar-menu-desktop {padding: 0; margin: 0;}
.sidebar-offcanvas-menu ul.sidebar-menu li {display: block; transition: all .3s ease-in; -webkit-transition: all .3s ease-in;}
.sidebar-offcanvas-menu ul.sidebar-menu li a {color: var(--black); display: inline-block; text-transform: capitalize;  padding: 10px 15px; font-size: 14px;}
ul.sidebar-menu > li {border-bottom: #0000004f 1px dashed;}
ul.sidebar-menu > li a {position: relative;}
ul.sidebar-menu > li > ul {padding: 0; margin: 0; display: none;}
ul.sidebar-menu > li > ul > li a {text-transform: capitalize !important; padding-left: 35px !important; font-size: 14px !important;}
ul.sidebar-menu li.active > a, 
ul.sidebar-menu li:hover > a {color: var(--blue); font-weight: 600;}
.sidebar-offcanvas-menu .sidebar-wrapper {position: relative; height: 100%; overflow: auto;}
.sidebar-offcanvas-menu ul.sidebar-menu li.menu-item-has-children {position: relative; }
.sidebar-offcanvas-menu ul.sidebar-menu li.menu-item-has-children:after{content: '\f107'; font-family: fontawesome; position: absolute; right: 10px; top: 5px; font-size: 20px; }
/*--offcanvas-css-end--*/

/*--header-css--*/
.header-top{background: var(--yellow); padding: 15px;}
.main-navbarbox{padding: 13px 10px; background: url(../images/header-bg.png); background-size: 50%; background-position: top;}


.mainlogo {position: relative; } 
.logo-boxin {position: absolute; top: 0; left: 50%; transform: translate(-50%, -35px); }
.logo-boxin a {display:block; max-width: 180px; margin: auto;}

.mobile-menubtn {display: none; }
.btnmmenu {max-width: 30px; margin: 0 0 0 auto; }
.btnmmenu span {width: 30px; height: 2px; background-color: var(--yellow); display: block; margin: 6px 0; }

.header-social ul{text-align: right; display: none;}
.header-social ul li{list-style: none; display: inline-block;width: 36px; height: 36px; border-radius: 50%; border: solid 1px var(--yellow); margin: 0 2px;}
.header-social ul li a{display: inline-block; width: 100%; height: 100%; border-radius: 100%; text-align: center; background: var(--yellow); color: var(--white); font-size: 15px; line-height: 30px; border: solid 2px var(--black);}

.desktop-menuboxin > ul{margin-top: 5px;}
.desktop-menuboxin ul li.menu-item ul {display: none; }
.desktop-menuboxin ul li {position: relative; display: inline-block; }
.desktop-menuboxin ul li a {display: block; color: var(--yellow); padding: 5px 10px; font-size: 16px; font-weight: 600; text-transform: uppercase; }

.desktop-menuboxin ul li.active > a,
.desktop-menuboxin ul li:hover > a {color: var(--white)}
.desktop-menuboxin ul li.menu-item ul{position: absolute; width: 300px; text-align: left;background-color: var(--white);z-index: 9999;}

.desktop-menuboxin ul li.menu-item ul li{display: block; padding: 5px 0;}
.desktop-menuboxin ul li.menu-item ul li a{font-size: 14px;}
.desktop-menuboxin ul li:hover > ul{display: block;}
/*--end--*/

.modal-backdrop.fade{opacity:0.5;}
/*  :::::::  End  :::::  */

.home-products {padding: 60px 0;}
.home-sec-2 {padding: 80px 0;}
.home-sec-2 h2{font-size: 52px; margin: 0; text-align: center;}
/*  :::::::  End  :::::  */
.compare{padding: 40px 0 60px; background: url(../images/compare-bg.png) no-repeat;  background-position: top center;}
.compare .container{width: auto; max-width: 1280px;}
.compare h2{font-size: 52px; color: var(--yellow-dark); margin-top: 0;}
.compare .comparetop{margin: 290px auto 0; color: var(--white);}
.compare .comparetop ul{list-style: none; margin: 0;}
.compare .comparetop .col-lft{padding-top: 45px; padding-left: 40px; max-width: 180px;}
.compare .comparetop .col-lft ul li{font-size: 16px; margin-bottom: 18px; font-weight: 600}
.compare .comparetop .col-lft ul li:nth-child(3){margin-top: -7px; margin-bottom: 10px;}
.compare .comparetop .col-mid {}
.compare .comparetop .col-mid h4{text-align: center; font-size: 30px; color: var(--white);}
.compare .comparetop .col-mid ul li{font-size: 16px; margin-bottom: 18px; font-weight: 600}
.compare .comparetop .col-rgt{ width:35%; }
.compare .comparetop .col-rgt h4{text-align: center; font-size: 30px; color: var(--yellow);}
.compare .comparetop .col-rgt ul li{font-size: 16px; margin-bottom: 18px; font-weight: 600}

.compare .compare-3box{margin-top: 130px;}
.compare .compare-3box p{font-size: 22px; font-weight: 600; padding-left: 150px; margin: 0; color: var(--white);}
.compare .compare-3box .lft{padding-left: 60px; padding-top: 20px;}
.compare .compare-3box .rgt{padding-left: 90px; padding-top: 20px;}

.compare .compareend{margin-top: 100px;}
.compare .compareend p{margin: 0; font-size: 18px; color: var(--white); text-align: center;}

/*  :::::::  End  :::::  */

.how-to-use{background: url(../images/how-to-use-bg.jpg);}
.how-to-usein{padding: 55px 0; background: url(../images/how-bg.png) no-repeat; background-position: top center;}
.how-to-usein .container{width: auto; max-width: 1520px;}
.how-to-usein h2{color: var(--white); font-size: 24px;}
.how-to-usein .use-step{text-align: center; max-width: 340px; margin: 370px auto 80px; height: 180px;}
.how-to-usein .use-step h5{font-size: 24px; color: var(--yellow); font-weight: 600; margin-bottom: 15px;}
.how-to-usein .use-step p{font-size: 22px; color: var(--white); font-weight: 600}
/*  :::::::  End  :::::  */

.home-contact > div > .row {display: flex; width: 100%; min-width: 100%; }
.home-contact .rgt-col {padding: 50px; } 
.home-contact h3{font-size: 30px; margin-bottom: 10px;}
.home-contact label{font-size: 20px; color: var(--yellow-dark);}
.home-contact input{height: 40px; box-shadow: none; border: solid 1px var(--black); border-radius: 0;}
.home-contact textarea{height: 90px; resize: none; box-shadow: none; border: solid 1px var(--black); border-radius: 0;}
.home-contact button{background: var(--yellow); display: block; width: 100%; height: 40px; border-radius: 0; font-size: 21px;}
/*  :::::::  End  :::::  */

.ft-social{padding: 70px 0 30px; background: #f9f9f9; display: none;}
.ft-social ul{text-align: center;}
.ft-social ul li{list-style: none; display: inline-block;width: 36px; height: 36px; border-radius: 50%; margin: 0 2px;}
.ft-social ul li a{display: inline-block; width: 100%; height: 100%; border-radius: 100%; text-align: center; background: var(--black); color: var(--white); font-size: 15px; line-height: 35px;}
.ft-social ul li a:hover{background: var(--yellow);}

footer{text-align: center; padding: 20px; color: var(--white); background: var(--yellow);}
footer p{margin-bottom: 0;}
/*  :::::::  End  :::::  */


.about-hero{padding: 50px 0; text-align: center;}
.about-hero h1{font-size: 56px; font-weight: 600; color: var(--yellow-dark); margin: 25px 0;}
.about-hero img{ width:100% } 

.about-page {padding-bottom: 50px;}
.about-page h2{font-size: 42px; text-align: center; color: var(--yellow-dark);margin: -90px 0 30px}
.about-page h2 span{display: inline-block; padding: 40px; background: var(--white);}
/*  :::::::  End  :::::  */

.contact-hero {padding: 60px 0;}
.contact-hero h1{font-size: 56px; color: var(--yellow-dark); font-weight: 600; margin: 0px 0 40px}
.contact-hero p{max-width: 680px; color: var(--yellow-dark); font-size: 18px; font-weight: 500;}


.contact-page{padding: 0 40px 40px;}
.contact-page h3{font-size: 42px; color: var(--yellow-dark); font-weight: 600; margin-bottom: 40px;}
.contact-page .container-fluid{background: #f9f9f9; padding: 50px 15px;}

.contct-info h5{font-size: 18px; color: var(--yellow-dark); font-weight: 600;}
.contct-info p{font-size: 18px; color: var(--yellow-dark); font-weight: 600;}
.contct-info a{color: inherit;}
.contct-info ul li{list-style: none; display: none; font-size: 20px; margin: 0 5px;}

.contact-page .contact-form{margin-top: 50px;}
.contact-page label{font-size: 17px; color: var(--yellow-dark);}
.contact-page input{height: 40px; box-shadow: none; border: solid 1px var(--black); border-radius: 0;}
.contact-page textarea{height: 90px; resize: none; box-shadow: none; border: solid 1px var(--black); border-radius: 0;}
.contact-page button{background: var(--yellow-dark); border: 0; display: block; margin: 0 0 0 auto; height: 40px; border-radius: 0; font-size: 21px;}

/*  :::::::  End  :::::  */

.products-sec{padding: 0px 0 60px;}
.products-box{box-shadow: 0 0 10px #ccc; display: block; border-radius: 10px; margin-bottom: 15px;}
.products-box .pro-txt{padding: 10px;}
.products-box .pro-txt h3{font-size: 18px; font-weight: 600; min-height: 80px; color: var(--yellow-dark);}
.products-box .pro-txt h3 a{color: inherit;}
.products-box .pro-txt h3:hover{color: var(--black);}
/*  :::::::  End  :::::  */

.product-summary{padding: 50px 0;}
.product-summary .summary{padding: 50px 0 0;}
.product-summary .summary h1{font-size: 48px; font-weight: 600; color: var(--yellow-dark);}
.product-summary .summary p{font-size: 18px; font-weight: 600; color: var(--yellow-dark);}
.product-summary .summary .button{max-width: 250px; display: block;}
.product-description{padding: 0 0px 60px}
.product-description .description-area{}
.product-description .description-area .button{max-width: 250px; display: block; margin: auto;}
.product-description .description-area p,
.product-description .description-area li{font-size: 16px; font-weight: 500; color: var(--yellow-dark); line-height: normal;}
.product-description .description-area li{margin-left: 3rem; margin-bottom: 15px;}

/*  :::::::  End  :::::  */




@media (max-width: 1199px){
  .desktop-menuboxin ul li a{font-size: 13px; padding: 10px 8px 5px}
} 

@media (max-width: 991px){
  /*--header-css--*/
  .header-social,
  .header-top{display: none;}
  .main-navbarbox{position: relative;}
  .desktop-menubox {display: none;}
  .mobile-menubtn {display: block; margin-top: 20px}
  .mainlogo{display: block;}
  .logo-boxin{text-align: left; position: static; transform: inherit;}
  .logo-boxin a{margin: 0; max-width: 120px;}
  /*--end--*/

  .compare{background: inherit;}
  .compare h2{font-size: 24px;}
  .compare .comparetop{margin: 0;}
  .compare .comparetop .col-lft{max-width: 100%; padding-left: 15px; padding-top: 0;}
  .compare .comparetop .col-rgt h4,
  .compare .comparetop .col-mid h4{color: var(--yellow-dark);}
  .compare .comparetop .col-lft ul li,
  .compare .comparetop .col-rgt ul li,
  .compare .comparetop .col-mid ul li{color: var(--yellow);}

  .compare .comparetop .col-rgt{width: 100%;}

  .compare .compare-3box{margin-top: 0px;}
  .compare .compare-3box p{color: var(--yellow-dark); padding-left: 0; text-align: center;}
  .compare .compare-3box .lft{padding-left: 15px; padding-bottom: 15px;}
  .compare .compare-3box .rgt{padding-left: 15px;}

  .compare .compareend{margin-top: 50px;}
  .compare .compareend p{color: var(--yellow-dark);}

  .how-to-usein{background: inherit;}
  .how-to-usein h2{background: url('../images/how-mb-h.png') no-repeat; padding: 7px 15px; background-size: 100%; font-size: 18px;}
  .how-to-usein .use-step{margin-top: 10px;}
  .how-to-usein .col-md-4:nth-child(1) .use-step{margin: 10px auto; background: url('../images/how-mb-1.png') no-repeat; background-size: contain; background-position: top center; padding: 230px 20px 10px; height: 410px;}
  .how-to-usein .use-step h5{font-size: 19px;}
  .how-to-usein .use-step p{font-size: 16px;}

  .how-to-usein .col-md-4:nth-child(2) .use-step{margin: 10px auto; background: url('../images/how-mb-2.png') no-repeat;background-size: contain; background-position: top center; padding: 230px 20px 10px; height: 410px;}
  .how-to-usein .col-md-4:nth-child(3) .use-step{margin: 10px auto; background: url('../images/how-mb-3.png') no-repeat;background-size: contain; background-position: top center; padding: 230px 20px 10px; height: 410px;}


  .home-contact .lft-col{height: 350px; width: 100%; background-repeat: no-repeat; background-position: center;}
  .home-contact > div > .row{display: inline;}
  .home-contact label{font-size: 16px;}

}  

@media (max-width: 767px){
  .mobile-menubtn{margin-top: 10px;}

  .contact-hero h1{font-size: 24px; margin: 0 0 20px;}
  .contact-page{padding: 0 10px 30px; }
  .contact-page h3{font-size: 22px; margin-bottom: 10px;}
  .contact-page h5{margin-top: 30px;}

  .about-hero{padding: 20px 0;}
  .about-hero h1{font-size: 24px;}
  .about-page h2{font-size: 20px; margin: 0 0 20px}
  .about-page h2 span{padding: 20px;}

  .product-summary .summary{padding: 0px 15px;}
  .product-summary .summary h1{font-size: 24px;}


  .home-products{padding: 20px 0;}
  .home-products .product-box {margin-bottom: 30px; }

  .home-sec-2 h2{font-size: 32px;}

  .compare{background: inherit;}
  .compare h2{font-size: 24px;}
  .compare .comparetop{margin: 0;}
  .compare .comparetop .col-lft{max-width: 100%; padding-left: 15px; padding-top: 0;}
  .compare .comparetop .col-rgt h4,
  .compare .comparetop .col-mid h4{color: var(--yellow-dark);}
  .compare .comparetop .col-lft ul li,
  .compare .comparetop .col-rgt ul li,
  .compare .comparetop .col-mid ul li{color: var(--yellow);}

  .compare .comparetop .col-rgt{width: 100%;}

  .compare .compare-3box{margin-top: 0px;}
  .compare .compare-3box p{color: var(--yellow-dark); padding-left: 0; text-align: center;}
  .compare .compare-3box .lft{padding-left: 15px; padding-bottom: 15px;}
  .compare .compare-3box .rgt{padding-left: 15px;}

  .compare .compareend{margin-top: 50px;}
  .compare .compareend p{color: var(--yellow-dark);}

  .how-to-usein{background: inherit;}
  .how-to-usein h2{background: url('../images/how-mb-h.png') no-repeat; padding: 7px 15px; background-size: 100%; font-size: 18px;}
  .how-to-usein .use-step{margin-top: 10px;}
  .how-to-usein .col-md-4:nth-child(1) .use-step{margin: 10px auto; background: url('../images/how-mb-1.png') no-repeat; background-size: contain; background-position: top center; padding: 230px 20px 10px; height: 410px;}
  .how-to-usein .use-step h5{font-size: 19px;}
  .how-to-usein .use-step p{font-size: 16px;}

  .how-to-usein .col-md-4:nth-child(2) .use-step{margin: 10px auto; background: url('../images/how-mb-2.png') no-repeat;background-size: contain; background-position: top center; padding: 230px 20px 10px; height: 410px;}
  .how-to-usein .col-md-4:nth-child(3) .use-step{margin: 10px auto; background: url('../images/how-mb-3.png') no-repeat;background-size: contain; background-position: top center; padding: 230px 20px 10px; height: 410px;}

  .home-contact .lft-col{height: 230px; width: 100%;}
  .home-contact > div > .row{display: inline;}

}