/* Global Styles */
:root {
  --primary-color: #411730;
  --primary-dark: #28041b;
  --secondary-color: #ebc466;
  --dark-color: #340925;
  --light-color: #f9f9f9;
  --text-color: #444444;
  --heading-color: #062160;
  --black: #000000;
  --white: #ffffff;
  --border-radius-sm: 5px;
  --border-radius: 12px;
  --border-radius-lg: 18px;
  --border-radius-full: 100%;
  --font1: "Sansation", sans-serif;
  --font2: "Mulish", sans-serif;
}


body{background-color:var(--white);font-size: 16px;font-weight: 400;color: var(--text-color);font-family: var(--font2);}
a {text-decoration: none;transition: all 0.3s linear;}

/* navibar **/
.navwrap { border-top:0px solid var(--secondary-color);}
.logo {position: absolute;top:0px;left: 0px;padding:14PX 14PX 16px 12px;background-color: var(--primary-color);border-radius: 0px 0px 5px 5px;}
.logo img{max-width:220px;max-height:120px;transition: all 0.3s linear;}

.navibar {display: block;margin:18px 0px;transition: all .3s linear}
.navibar .sptr{margin: 0 14px;}
.navibar a {font-family: var(--font1);color:#FFF;margin-left:18px;font-size: 14px;font-weight: 400;position: relative;text-transform: uppercase;letter-spacing: 1px;}
.navibar a:hover {color:var(--primary-dark);}
.navibar a.lang {font-size: 14px;}
.navibar a.act, .navibar a.act:hover {color:#000}

.srink  {box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.1);background-color: var(--secondary-color);}
.srink .logo {padding: 6px 12px 10px 12px;border-radius: 0px;}
.srink .logo img {max-width:165px;max-height: 80px;}
.srink .navibar {margin:13px 0px;}
.srink .navibar a {margin-left: 12px;}

.heroslider {background-color: var(--primary-dark);position: relative;overflow:hidden;width: 100%;height: 650px; border-bottom:3px solid var(--primary-dark);}
.heroslider .imgone {background: url(../images/hero/slide1.jpg) no-repeat center center; background-size: cover;}
.heroslider .imgtwo {background: url(../images/hero/slide2.jpg) no-repeat center center; background-size: cover;}
.heroslider .imgtre {background: url(../images/hero/slide3.jpg) no-repeat center center; background-size: cover;}
.heroslider .imgfour {background: url(../images/hero/slide4.jpg) no-repeat center center; background-size: cover;}

.heroslider .slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transform: translateY(100px);transition: opacity 1s ease, transform 1s ease;background-size: cover;background-position: center;z-index: 0;}
.heroslider .slide.active {opacity: 1;transform: translateY(0);z-index: 1;}

.heroslider .slidepad {padding-top:240px;} 
.heroslider .slide h1 {font-family: var(--font1);color:#fff;font-size:44px;font-weight:700;text-shadow: 1px 1px 2px rgba(0,0,0,0.5);line-height: 54PX;}
.heroslider .slide p {color:#fff;font-size:22px;font-weight:400;}
.heroslider .slide a {display: inline-block;margin-top: 90px;color:rgba(255,255,255,1);font-size:16px;font-weight:400;padding:8px 0px 9px 0px;border-radius:var(--border-radius-sm);text-transform: uppercase;letter-spacing: 1px;}

a.animated-border {position: relative;border-bottom:solid 1px rgba(255,255,255,0.4);}
a.animated-border::before {content: "";position: absolute;bottom: 0px;left: 0;height: 1px;width: 100%;background:rgba(255,255,255,0.1);}
a.animated-border:hover::after {content: "";position: absolute;bottom: 0px;left: 0;height: 1px;width: 0;background:var(--secondary-color);animation: slideLine 750ms linear infinite;}

@keyframes slideLine {
  0% {width: 0;left: 0;}
  50% {width: 50%;left: 0;}
  100% {width: 0;left: 100%;}
}

h1 {font-family: var(--font1);font-size: 32px;line-height: 40px;font-weight: 700;color: var(--text-color);}
h2 {font-family: var(--font1);font-size: 24px;line-height: 30px;font-weight: 400;color: var(--text-color);}
h3 {font-family: var(--font1);font-size: 20px;line-height: 30px;font-weight: 400;color: var(--text-color);}
p {font-size: 16px;font-weight: 400;line-height:26px;color:#3b3b3d;}
p.sechead {display: inline-block;background-color :var(--primary-color);padding: 2px 26px;font-size: 12px;font-weight: 600;letter-spacing: 1px;color:#fff;border-top-left-radius:12px ;border-bottom-right-radius: 12px;opacity: 0.7;position: relative;}
p.sechead::before {position: absolute;content: '';height: 100%;width: 14px;left: -3px;top:0px;background-color: var(--secondary-color);border-top-left-radius:12px ;}
a {display: inline-block;font-size:16px;font-weight:400;}

/* Animated UL LI Radio */
ul { list-style: none; padding: 0; max-width: 700px; margin-top:20px;margin-left: 10px;}
li { display: flex; align-items: center; font-size: 16px; margin-bottom: 12px; color: #3b3b3d; }
.rectang { width: 10px; height: 10px; margin-right: 14px; flex-shrink: 0; }
.rectang rect { fill: var(--secondary-color); stroke: var(--primary-color); stroke-width: 2; }
.rectang .fill { fill: var(--primary-color); opacity: 0; }
@keyframes show { 0%, 14.2%, 100% { opacity: 0; } 7.1% { opacity: 1; }}
@keyframes scaleUp { 0%, 14.2%, 100% { transform: scale(1); }  7.1% { transform: scale(1.5); }}

li:nth-child(1) .fill { animation: show 7s linear infinite; animation-delay: 0s; } li:nth-child(1) .rectang { animation: scaleUp 7s linear infinite; animation-delay: 0s; }
li:nth-child(2) .fill { animation: show 7s linear infinite; animation-delay: 1s; } li:nth-child(2) .rectang { animation: scaleUp 7s linear infinite; animation-delay: 1s; }
li:nth-child(3) .fill { animation: show 7s linear infinite; animation-delay: 2s; } li:nth-child(3) .rectang { animation: scaleUp 7s linear infinite; animation-delay: 2s; }
li:nth-child(4) .fill { animation: show 7s linear infinite; animation-delay: 3s; } li:nth-child(4) .rectang { animation: scaleUp 7s linear infinite; animation-delay: 3s; }
li:nth-child(5) .fill { animation: show 7s linear infinite; animation-delay: 4s; } li:nth-child(5) .rectang { animation: scaleUp 7s linear infinite; animation-delay: 4s; }
li:nth-child(6) .fill { animation: show 7s linear infinite; animation-delay: 5s; } li:nth-child(6) .rectang { animation: scaleUp 7s linear infinite; animation-delay: 5s; }
li:nth-child(7) .fill { animation: show 7s linear infinite; animation-delay: 6s; } li:nth-child(7) .rectang { animation: scaleUp 7s linear infinite; animation-delay: 6s; }

.wbox {display: block;padding:30px 36px;background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); border-radius: 5px; transition: box-shadow 0.3s ease; }
.wbox:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); }
 
.section-about  {background:var(--white);}
.section-about  img {border-radius:0px 0px 12px 12px;}
.section-about h1 {font-weight:400;font-size: 28px;line-height: 36px;}
.section-about h1 span, .section-about h2 span {font-weight:700;color:var(--primary-dark)}

.section-why {background:#ededee}
.section-why h1 {font-weight:400;}
.section-why h1 span {font-weight:700;}
.section-why h3 span {font-weight:700;}

.section-brands {background:var(--primary-color)}
.section-brands .branditem {padding:12px 6px;background-color: rgba(255,255,255,0.1);overflow: hidden;transition: all 0.3s linear;border-radius:var(--border-radius-sm);border: solid 1px #4e546b;}
.section-brands .branditem img{max-width: 90%;transition: all 0.3s linear;margin: auto;}
.section-brands .branditem:hover {background-color: rgba(255,255,255,0.6);}
.section-brands .branditem:hover img {opacity: 1;filter: grayscale(0%);transform: scale(1.25);}
.section-brands .slick-slide {margin: 0 10px;}
.section-brands .slick-list { margin: 0 -10px;}
.section-brands h2 {color:#dedede;text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
.section-brands p {color:var(--secondary-color);}

.section-explore {background:var(--primary-color)}
.section-explore h1 {color:#ccc;font-weight:400;text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
.section-explore h1 span {font-weight:700;color:#dedede;}
.section-explore h3 {color:#dedede;text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
.section-explore p {color:var(--secondary-color);}

.section-explore ul { margin-left: 0px;}
.section-explore li {color: #bcbcbc;position: relative;padding-left: 36px;transition: all 500ms linear;}
.section-explore li::before {left: 0px;top:50%;left:0px;width:18px;height: 1px;background-color: #bcbcbc; position: absolute;content: '';transition: all 500ms linear;}

.section-explore li:hover {color: #ddd;}
.section-explore li:hover::before {width:30px;}

.section-explore-dark {background: linear-gradient(-25deg, var(--primary-dark) 35%, var(--primary-color) 55%); border-top:6px solid var(--secondary-color); border-bottom:6px solid var(--secondary-color);}
.section-explore-gray {background-color:var(--light-color);}
.section-explore-gray h1 {color:var(--primary-color);text-shadow: 1px 1px 2px rgba(50,50,50,0.2);}

.prodbox {display: block;position: relative;overflow: hidden;box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.1);border-radius:var(--border-radius-sm);margin-bottom: 30px;}
.prodbox .imgbx {display: block;overflow: hidden;border-radius:var(--border-radius-sm);}
.prodbox .imgbx img {width: 100%;transition: all 0.6s linear;}
.prodbox:hover .imgbx img {transform: scale(1.06); }
.prodbox:hover .imgbx {border:2px solid var(--secondary-color);}
.prodbox .tbx {left: 0px;bottom: -100%; padding: 18px 15px 8px 15px;position: absolute;content: '';background-color: rgba(235, 196, 102, 0.9);width: 100%;transition: all 0.2s linear;}
.prodbox .tbx p {color: var(--text-color);font-size: 16px;font-weight: 500;line-height:1.3;}
.prodbox:hover .tbx {bottom: 0px;}

.section-service {background:#eccf8b;}

.section-contact {background: linear-gradient(0deg, var(--primary-dark) 10%, var(--primary-color) 60%); border-top:6px solid var(--secondary-color);}
.section-contact p {color:var(--white);opacity: 0.9;font-weight: 300;}
.section-contact h2 {color:#fff;text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
.section-contact h3 {color:#fff;text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
.section-contact a {color:var(--secondary-color);padding-bottom: 5px;}

.copybg  {background-color: #2c0d21;box-shadow: -3px 1px 3px 2px rgba(0,0,0,0.1);}
.copy {font-size: 14px;font-weight:300;color:rgba(255,255,255,0.5);}

.scrollup {position:fixed;bottom:22px;right:10px;width:40px;height:40px;line-height:40px;text-align:center;z-index:998;background-color:var(--secondary-color);color:var(--black); border-radius:100%;}
.scrollup:hover { background-color:var(--black); color:var(--secondary-color);font-weight:600;}
.scrollup .fa {font-size:130%;}