@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,600;1,100;1,300&display=swap");

:root{
  --primary:#666;
  --primary1:#a4916d;
  --black:#000;
  --white:#fff;
  --light-black:#666;
  --hover:rgba(244,244,244,0.8);
  --bg:#f9f9f9;
  --border:.1rem solid rgba(0,0,0,0.3);
  --box-shadow:0 .5rem 1rem rgba(0,0,0,0.1);
  --secondary:#69d6ff;
  --red:#ec1111;

  --black1:#363636;
  --sitecolor:#db2237;
  --blue:#29a5a3;
  --bg1:#fdffe1;


}
  
*{font-family:"Poppins",sans-serif;margin:0;padding:0;box-sizing:border-box;outline:none;border:none;text-decoration:none;text-transform:capitalize;transition:.2s linear}
html{font-size:62.5%;overflow-x:hidden;scroll-padding-top:9rem;scroll-behavior:smooth}
html::-webkit-scrollbar{width:.8rem}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:var(--primary);border-radius:5rem}
section{padding:5rem 7%}
.acn{text-transform:none}
.inl{display:inline}
.blk{display:block}
/*
.header{position:fixed;left:0;right:0;z-index:1000; background-image: url('../images/back1.png');opacity: 1.5;
  box-shadow:var(--box-shadow);display:flex;align-items:center;justify-content:space-between;padding:0.5rem 9%}
*/
.heading{text-align:center;font-size:3.2rem;color:var(--black);text-transform:uppercase;font-weight:bolder;margin-bottom:3rem}
.heading span{color:var(--primary);text-transform:uppercase}
.btn{display:inline-block;margin-top:1rem;padding:.9rem 3rem;border-radius:10rem;border:.1rem solid var(--primary);font-size:1.7rem;color:var(--primary);cursor:pointer}
.btn:hover{background:var(--primary);color:var(--white)}
/*
.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--white);box-shadow:var(--box-shadow);display:flex;align-items:center;justify-content:space-between;padding:2rem 9%}
*/
.header{position:fixed;top:0;left:0;right:0;height:12em; z-index:1000;background:url('../images/back2.png');background-size:cover;box-shadow:var(--box-shadow);display:flex;align-items:center;justify-content:space-between;padding:2rem 9%}

.header .logo{font-size:2.5rem;font-weight:bolder;color:var(--black)}
.header img{height:7rem;width:20rem}
.header .logo i{color:var(--primary);padding-right:.5rem}
.header .navbar a{font-size:1.7rem;color:var(--white);margin:0 1rem}
.header h1{font-size:4.0rem;color:var(--white);margin:0 1rem}
.header .navbar a:hover{color:var(--primary)}
.header .icons div{font-size:2.5rem;margin-left:1.7rem;color:var(--white);cursor:pointer;-webkit-text-stroke:.1rem var(--primary)}
.header .icons div:hover{color:var(--primary)}

#menu-bar{display:none}
/*url(../images/home.jpg) no-repeat*/
.home{min-height:25vh;display:flex;background:var(--bg);background-size:cover;background-position:center;align-items:center}
/*.home{position:relative;display:block;align-items:center; background-color: #69d6ff; padding: 0; margin: 0;}*/
.home .content{padding-top:10rem;margin: auto;}
.home .content h1{font-size:3rem;color:var(--black1);line-height:1.2}
.home .content h3{font-size:2.4em;color:var(--black1);line-height:1.2}
.home .content p{background-color:#9f9d9d;font-size:2rem;padding:1.3rem 0;color:var(--white);line-height:1.5}

.banner .box-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(25rem,1fr));gap:2rem}
.banner .box-container .box{height:100%;position:relative;overflow:hidden}
.banner .box-container .box img{height:95%;width:100%;object-fit:cover}
.banner .box-container .box h1{font-size:1.2em; margin: 0; padding: 0;}
.banner .box-container .box h2{font-size:1.6em; margin: 0; padding: 0; color:var(--red);}
.banner .box-container .box:hover img{transform:scale(1)}
.banner .box-container .box .content{align-items:center;justify-content:center;position:absolute;left:0;top:0;z-index:10;height:100%;width:100%;background:var(--hover);display:none}
.banner .box-container .box .content h3{text-align:center;font-size:3rem;color:var(--black);text-transform:uppercase}
.banner .box-container .box .content h4{text-align:center;font-size:2rem;color:var(--black);text-transform:uppercase}
.banner .box-container .box .content p{text-align:left;font-size:1.8rem;padding:1rem 0;color:var(--black);line-height:1.5}
.banner .box-container .box:hover .content{display:flex;background-color:#fff}

.products{background:var(--bg)}
.products .box-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(30rem,1fr));gap:2rem}
.products .box-container .box{background:var(--white);border-radius:.5rem;box-shadow:var(--box-shadow);height:100%;border:var(--border);position:relative;overflow:hidden;text-align:center}
.products .box-container .box .image img{width:100%;object-fit:cover}
.products .box-container .box .image .rear-img{position:absolute;top:0;left:0;z-index:-1;opacity:0;transition:opacity .4s ease-out}
.products .box-container .box:hover .image .rear-img{opacity:1;z-index:0}
.products .box-container .box .content{padding:2rem;padding-top:0}
.products .box-container .box .content h3{color:var(--black);font-size:2.2rem}
.products .box-container .box .content p{text-align:left;font-size:1.4rem;padding:1rem 0;color:var(--black);line-height:1.5}
.products .box-container .box .content .price{display:inline-block;color:var(--primary);font-size:2.2rem}
.products .box-container .box .content .stars{padding:1rem 0}
.products .box-container .box .content .stars i{font-size:1.5rem;color:#ffd700}
.products .box-container .box .content .fa-shopping-cart,.products .box-container .box .content .fa-heart,.products .box-container .box .content .fa-eye{text-align:center;height:4.5rem;width:4.5rem;line-height:4.5rem;border-radius:.5rem;background:none;cursor:pointer;font-size:2rem;color:var(--primary);border:.1rem solid var(--primary)}
.products .box-container .box .content .fa-heart,.products .box-container .box .content .fa-eye{margin-left:.5rem}
.products .box-container .box .content .fa-shopping-cart:hover,.products .box-container .box .content .fa-heart:hover,.products .box-container .box .content .fa-eye:hover{color:var(--white);background:var(--primary);box-shadow:var(--box-shadow);transition:.4s linear}
.faq{background:var(--light-bg)}
.faq .accordion-container{padding:0 2rem}
.faq .accordion-container .accordion{margin-bottom:2rem;cursor:pointer}
.faq .accordion-container .accordion.active .accordion-heading{background:var(--secondary)}
.faq .accordion-container .accordion.active .accordion-heading h3{color:var(--white)}
.faq .accordion-container .accordion.active .accordion-heading i{color:var(--white);transform:rotate(180deg);transition:transform .2s .1s}
.faq .accordion-container .accordion.active .accordion-content{display:block}
.faq .accordion-container .accordion .accordion-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--white);border:var(--border);padding:1.5rem 2rem}
.faq .accordion-container .accordion .accordion-heading h3{font-size:1.8rem}
.faq .accordion-container .accordion .accordion-heading i{color:blue}
.faq .accordion-container .accordion .accordion-content a{font-size:1.6rem;color:blue}
.faq .accordion-container .accordion .accordion-content{font-size:1.5rem;padding:1.5rem 2rem;border:var(--border);background:var(--white);border-top:0;line-height:2;display:none;animation:animate .2s linear backwards;transform-origin:top}
@keyframes animate {
0%{transform:scaleY(0)}
}
.about{background:url(../images/bg-1.png) no-repeat}
.about .row{display:flex;flex-wrap:wrap;align-items:center;gap:3rem}
.about .row .image{flex:1 1 30rem}
.about .row .image img{width:100%;height:100%}
.about .row .content{flex:1 1 60rem}
.about .row .content h3{color:var(--primary);font-size:3.0rem;line-height:1.5}
.about .row .content p{font-size:1.8rem;padding:3rem 0;color:var(--light-color);line-height:2}
.contact .row{display:flex;flex-wrap:wrap;gap:2rem;align-items:center}
.contact .row .image{flex:1 1 40rem}
.contact .row .image img{width:100%}
.contact .row form{flex:1 1 52rem;padding:2rem;border:var(--border);box-shadow:var(--box-shadow);border-radius:.5rem}
.contact .row form h3{font-size:3rem;padding-bottom:1rem;color:var(--primary)}
.contact .row form h4{font-size:2.5rem;padding-bottom:1rem;color:var(--primary)}
.contact .row h5{font-size:3.5rem;padding-bottom:1rem;color:var(--black)}
.contact .row form .inputBox input,.contact .row form textarea{padding:1rem 1.2rem;border:var(--border);border-radius:.5rem;font-size:1.6rem;color:var(--primary);margin:.7rem 0;width:100%}
.contact .row form .inputBox1 input{text-transform:none;padding:1rem 1.2rem;border:var(--border);border-radius:.5rem;font-size:1.6rem;color:var(--primary);margin:.7rem 0;width:100%}
.contact .row form .response{display:inline-block;padding:1rem 1.2rem;font-size:2rem;color:var(--primary)}
.contact .row form textarea{height:15rem;resize:none}
.contact .row form .btn{background:none;}
.contact .row form .btn:hover{background:var(--primary)}

.footer{background:var(--bg)}
.footer .box-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(25rem,1fr));gap:2rem}
.footer .box-container .box h3{font-size:2.2rem;color:var(--light-black);padding:1rem 0}
.footer .box-container .box h4{font-size:1.9rem;color:var(--secondary);padding:.5rem 0}
.footer .box-container .box h3 i{color:var(--primary);padding-right:.5rem}
.footer .box-container .box p{font-size:1.5rem;color:var(--light-black);padding:1rem 0;line-height:2}
.footer .box-container .box .share{margin-top:1rem}
.footer .box-container .box .share a{height:4.5rem;width:4.5rem;line-height:4.5rem;font-size:1.7rem;background:var(--primary);color:var(--white);margin-right:.3rem;text-align:center;border-radius:50%}
.footer .box-container .box .share a:hover{background:var(--light-black);transform:rotate(360deg)}
.footer .box-container .box .link{display:block;font-size:1.7rem;line-height:2;padding:.5rem 0;color:var(--light-black)}
.footer .box-container .box .link:hover{color:var(--primary)}
.footer .box-container .box .link i{padding-right:.5rem;color:var(--primary)}
.footer .credit{margin-top:2.5rem;padding:1rem;padding-top:2rem;border-top:var(--border);text-align:center;color:var(--light-black);font-size:2rem}
.footer .credit span{color:var(--primary)}


.footer1{background:var(--bg1);}
.footer1 .box-container .box h3{color: var(--black);font-size:2em;font-weight: 700;padding: 0 0px;text-align: center;text-transform: uppercase;text-align: left;}
.footer1 .box-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(25rem,1fr));gap:2rem;}
.footer1 .box-container .boxmin{width:30rem; text-align: left;}
.footer1 .box-container .box h3 i{color:var(--primary);padding-right:.5rem; }
.footer1 .box-container .box label{display:inline-block;font-size:1.4rem;color:var(--black);padding:.5rem 0;}
.footer1 .box-container .box p{font-size:1.5em;color:var(--light-black);padding:1rem 0;line-height:1.5;font-weight:700}
.footer1 .box-container .box .link{font-size:1.5rem;padding:.5rem 0;color:var(--black);text-decoration:none ;}
.footer1 .box-container .box .link:hover{color:var(--primary)}
.footer1 .box-container .box .link i{padding-right:.5rem;color:var(--primary)}
.footer1 .box-container .box ul li{list-style: disc; color:var(--red);padding:.5rem 0; }
.footer1 .credit{margin-top:0.5rem;padding:1rem;padding-top:0.2rem;border-top:0.2rem;text-align:center;color:var(--black);font-size:1.4rem}
.footer1 .credit span{color:var(--primary)}


@media (max-width: 768px) {
#menu-bar{display:inline-block}
.header .navbar{position:absolute;top:99%;left:0;right:0;background:var(--white);border-top:var(--border);clip-path:polygon(0 0,100% 0,100% 0,0 0)}
.header .navbar.active{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.header .navbar a{font-size:2rem;margin:2rem;display:block}
.header .navbar .link{display:none}
}

@media (max-width:1023px){
  body {
    background-color: var(--white); 
  }
  html{
    font-size: 50%;
  }
}

@media (max-width:700px){
  body {
    background-color: var(--white); 
  }
 html{
    font-size: 40%;
  }
}
@media (max-width:400px){
  body {
    background-color: var(--white); 
  }
  /*.header img{height:2.0rem;width:4.5rem;}*/
  html{
    font-size: 48%;
  }
}