/* [reset styles] */
:root{
 --bodyfont:'montserratregular';
 --headingfont:'LibreFranklinRegular';
}

*{
    box-sizing: border-box;
    margin: 0;
 }

 @font-face {
    font-family: 'LibreFranklinRegular';
    src: url('../fonts/LibreFranklinRegular.eot');
    src: url('../fonts/LibreFranklinRegular.eot') format('embedded-opentype'),
         url('../fonts/LibreFranklinRegular.woff2') format('woff2'),
         url('../fonts/LibreFranklinRegular.woff') format('woff'),
         url('../fonts/LibreFranklinRegular.ttf') format('truetype'),
         url('../fonts/LibreFranklinRegular.svg#LibreFranklinRegular') format('svg');
}

@font-face {
  font-family: 'montserratregular';
  src: url('../fonts/montserrat-regular.woff2') format('woff2'),
       url('../fonts/montserrat-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
  
@font-face {
  font-family: 'montserratbold';
  src: url('../fonts/montserrat-bold-webfont.woff2') format('woff2'),
       url('../fonts/montserrat-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html {
  scroll-behavior: smooth;
}

body {
    font-family:'LibreFranklinRegular';
    padding:0px;
    margin:0px;
    font-size:16px;
    line-height:1.7;
    overflow-x:hidden;
	background-color:#eee;
}
  
ul {
    padding: 0;
    list-style-type: none;
}
  
a {
    text-decoration: none;
    cursor: pointer;
}
  
img {
    max-width: 100%;
  }
  
  h1, h2, h3, h4, h5, h6 {
    margin: 0px;
  }
  /* [/reset styles] */
  
  .p-0{
      padding: 0;
  }
  .m-0{
      margin: 0;
  }

*:focus {
    outline: none;
}

*::placeholder {
color: #c2c2c2;
font-size:12px ;
}
textarea{resize:none;font-family:var(--bodyfont); margin-bottom: -7px;}
input {font-family:var(--bodyfont);}
select:required:invalid {
    color: #c2c2c2;
  }
  option[value=""][disabled] {
    display: none;
  }
  option {
    color: black;
  }

select {
  background-color:#fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}


.w100 { width:100%;}
.mt10px {margin-top:10px;}
.mt15px {margin-top:15px;}
.mt20px {margin-top:20px;}

/** age restricted **/
.age-restricted-box
{
  display:flex;
  flex-direction:column;
  height:100vh;
  width: 90%;
  margin-left:auto;
  margin-right:auto;
}
.age-restricted-box .logo {text-align:center; padding:40px 0px;}
.restrictedBox 
{ width:660px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.restrictedBox p
{
 font-family:var(--headingfont);
 font-size:55px;
 line-height:65px;
 font-weight:bold;
 letter-spacing:5px;
 margin-bottom:15px;
}
.restrictedBox span {font-size:26px; line-height:40px;}
.restrictedBox .buttonrow 
{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 25px 0px;
}
.restrictedBox .buttonrow button
{
  background-color:#353234;
  color:#fff;
  font-size:27px;
  border:none;
  padding:10px 0px;
  width: 150px;
  font-family: var(--headingfont);
  cursor:pointer;
  margin:0px 10px;
  transition: 0.3s;
}
.restrictedBox .buttonrow button:last-child
{
  background-color:#ccc;;
}
.restrictedBox .buttonrow button:first-child:hover
{
  background-color:#000;
}
.restrictedBox .buttonrow button:last-child:hover
{
  background-color:#000;
}

.invalidAge {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  z-index: 1000000;
}

.invalidAgeWrap {
  margin: 20% auto;
  background: #fff;
  border-radius: 5px;
  width: 320px;
  position: relative;
}

.invalidAgeWrap .close {
  position: absolute;
  top: -10px;
  right: 5px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  cursor: pointer;
}
.invalidAgeWrap .close:hover {
  color: #FF0000;
}
.invalidAgeWrap .content {
    padding: 30px 18px;
    font-size: 16px;
    overflow: auto;
    text-transform: uppercase;
}

.headerRow
{
  position:absolute;
  top:5%;
  z-index:99;
  width:90%;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  left:50%;
  transform:translateX(-50%)
 
}

.headerRow .logo
{
  display:flex;
  justify-content:flex-end;
}

.headerRow .logo a 
{
  display:flex;
}

.headerRow .navContainer 
{
  padding: 10px 15px;
  display: flex;
  justify-content:flex-end;
}

/*** menu css **/
.nav ul 
{
  display: flex;
  flex-direction: row;
}
.nav ul li { margin-left:35px;}
.nav ul li a { text-transform:uppercase; font-size: 13px; color:#0f0f0e;}
.nav ul li a:hover{color:#f48633;}
.nav ul li a.active {color:#f48633;}

/** menu css open **/
.nav-tabs {
	display: flex;
	font-size: 16px;
	list-style: none;
}
.nav-tabs a { text-transform:uppercase; color:#fff;}
.nav-tabs a:hover{color:#4496ff;}
.nav-tabs a.active {color:#4496ff;}

.nav-tab:not(:last-child) {
	padding: 10px 25px;
	margin: 0;
}

.nav-tab:last-child {
	padding: 10px 0 0 25px;
}

.nav-tab,
.menu-btn {
	cursor: pointer;
}

.hidden {
	display: none;
}

@media screen and (max-width: 800px) {
	.nav-container {
		position:fixed;
		display:none;
		overflow-y:auto;
		z-index:-1;
		top:0;
		right:0;
		width:280px;
		height:100%;
		background:#001a2e;
		box-shadow:-1px 0 2px rgba(0, 0, 0, 0.2);
	}

	.nav-tab {width:100%;}

	.nav-tabs {
		flex-direction: column;
		align-items: flex-end;
		margin-top: 80px;
		width: 100%;
	}

	.nav-tab:not(:last-child) {
		padding: 20px 25px;
		margin: 0;
		border-right: unset;
		border-bottom: 1px solid #0b314e;
	}

	.nav-tab:last-child {
		padding: 15px 25px;
	}

	.menu-btn {
		position: relative;
		display: block;
		margin: 0;
		width: 55px;
		cursor: pointer;
		z-index: 9999;
		padding: 10px;
		border-radius: 10px;
	}

	.menu-btn .menu {
		display:block;
		width:100%;
		height:3px;
		border-radius:2px;
		background:#fff;
	}

	.menu-btn .menu:nth-child(2) {
		margin-top:5px;
		opacity: 1;
	}

	.menu-btn .menu:nth-child(3) {
		margin-top:5px;
	}

	#menuToggle:checked + .menu-btn .menu {
		transition: transform 0.2s ease;
	}

	#menuToggle:checked + .menu-btn .menu:nth-child(1) {
		transform: translate3d(0, 6px, 0) rotate(45deg);
	}

	#menuToggle:checked + .menu-btn .menu:nth-child(2) {
		transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
		opacity: 0;
	}

	#menuToggle:checked + .menu-btn .menu:nth-child(3) {
		transform: translate3d(0, -6px, 0) rotate(-45deg);
    margin-top: 2px;
	}

	#menuToggle:checked ~ .nav-container {
		z-index: 1000;
		display: flex;
		animation: menu-slide-left 0.3s ease;
	}
	@keyframes menu-slide-left {
		0% {
			transform: translateX(200px);
		}
		to {
			transform: translateX(0);
		}
	}
}
/** menu css close **/

.heading 
{
	text-align: center;
    font-size: 40px;
    margin-bottom: 40px;
	display: flex;
    flex-direction: column;
	line-height:44px;
	letter-spacing:0.5px;
}
.heading span 
{
  font-size: 24px;
  text-transform: capitalize;
  letter-spacing: 1.5px;
  line-height: 30px;
  margin-top: 10px;
}

/** feature box **/
.collection-container { padding:80px 0px;}
.collection-slider-container 
{ 
  margin-top:20px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}


.productSlid .boxes {
    background-color: rgb(255 255 255 / 68%);
    margin: 0px 10px;
    border-radius: 60px;
    padding: 0px 20px 50px 20px;
    box-shadow: 0px 0px 10px #ccc;
    margin-bottom: 20px;
    min-height: 450px;
}

.productSlid .slick-next
{
	width:55px;
	height:13px;
	background: url(../images/arrow-right.png) no-repeat;
	right:-50px;
}
.productSlid .slick-prev
{
	width:55px;
	height:13px;
	background: url(../images/arrow-left.png) no-repeat;
	left:-50px;
}
.productSlid div img
{
  margin-left: auto;
  margin-right: auto;
}
.productSlid .boxes .line1 {font-size:17px; font-weight: 900; text-transform:uppercase; text-align:center;}
.productSlid .boxes .line2 {font-size:15px; font-weight:900; margin-top:10px; text-align:center;}
.productSlid .boxes .line3 {font-size:12px;border-top:1px solid #c9c8c8; margin-top:40px; padding-top:10px;}
.productSlid .boxes .line {
    font-size: 25px;
    font-weight:900;   
    text-transform: uppercase;
    text-align: center;
    margin-top: 35px;
    line-height: 28px;
}

/**how to use clew**/

.useClew-container
{
  margin-top:80px;
  margin-bottom:40px;
  margin-left:auto;
  margin-right:auto;
  width:80%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.useClew-container .heading 
{
  width:40%;
  text-align:left;
}

.useClew-container .heading h3 
{
  color: #193b57;
  font-weight: bolder;
  margin-bottom: 30px;
}
.useClew-container .heading h4 
{
  text-align:left;
  font-size: 30px;
  margin-bottom: 10px;
}

.useClew-container .heading p 
{
  text-align:left;
  font-size: 26px;
  line-height: 30px;
}

.useClew-container .step-for-use 
{
  width:40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.step-for-use .bx 
{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom:20px;
}
.step-for-use .bx img {width:130px; margin-right:40px;}

.step-for-use .bx span 
{ 
  color:#193b57;
  font-weight:bold;
  text-transform:uppercase;
  font-size:26px;
  line-height:24px;
}
.first-letter-bold{
  font-size: 35px !important;
}

.step-for-use .bx p 
{
  font-size:20px;
  line-height:20px;
}
.step-for-use .ar
{  
  width:5%;
  display:none;
}
.step-for-use .ar img 
{
margin-top:80px;
}


/** about CLEW **/
.aboutSection 
{
  display:flex;
  position:relative;
}
.aboutSection img {width:100%;}
.aboutSection .aboutCnt
{
  position:absolute;
  width:34%;
  right:7%;
  top:50%;
  transform: translateY(-50%);
  font-size:18px;
}

.aboutSection .aboutCnt .hd
{
	font-weight: bold;
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 30px;
}
.aboutSection .aboutCnt .hd span 
{
	font-size:60px;
}
.aboutSection .aboutCnt p.cngt
{
	font-size: 25px;
    line-height: 34px;
}


/** faq **/
.fawContainer {
  padding: 30px 0px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

ul.accordion-list {
position: relative;
display: block;
width: 100%;
height: auto;
padding: 10px;
margin: 0;
list-style: none;

li {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 15px;
  margin: 0 auto 15px auto;
  cursor: pointer;
  font-weight:600;
  font-size: 16px;
  background-color: #f9f9fA;
  
  &.active {
    h3 {
      &:after {
        transform: rotate(45deg);
      }
    }
  }
  
  h3 {
    font-weight: 700;
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 0 0 0 0;
    margin: 0;
    font-size: 15px;
    letter-spacing: 0.01em;
    cursor: pointer;
    
    &:after {
      content: "+";
      position: absolute;
      right: 0;
      top: 0;
      color: #000;
      transition: all 0.3s ease-in-out;
      font-size: 18px;
    }
  }
  
  div.answer {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    cursor: pointer;
    
    p {
      position: relative;
      display: block;
      font-weight: 300;
      padding: 10px 0 0 0;
      cursor: pointer;
      line-height: 150%;
      margin: 0 0 15px 0;
      font-size: 14px;
    }
  }
}
}

/** contact us **/

.contactUs-container 
{
  width:70%;
  margin-left:auto;
  margin-right: auto;
  padding:50px 0px;
}
.contactBox{display:flex; justify-content:space-between;}
.contactForm-box-right
{
  display:flex;
  width:55%;
}
.contactForm-box-left
{
    width: 36%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contactForm-box-left .sline
{
   margin-top:10px;
}
.contactForm-box-left .sline a {color:#000;}
.contactForm-box-right form {width:100%;}
.contactForm-box-right form .rows {width:100%; margin-bottom:15px; position:relative;}
.contactForm-box-right form .rows input {width:100%; border:1px solid #b3aebb; padding:7px 10px; background-color:#eee;}
.contactForm-box-right form .rows .cod {
  display: flex;
}
.contactForm-box-right form .rows .cod .country_code {
  width: 25%;
  border-right: none;
}
.contactForm-box-right form .rows span
{
  position:absolute;
  left:0px;
  bottom:-18px;
  font-size:12px;
  color:#f00;
}
.contactForm-box-right form .rows select {width:100%; border:1px solid #b3aebb; padding:7px 10px; background-color:#eee;}
.contactForm-box-right form textarea {width:100%; height:90px; border:1px solid #b3aebb; padding:7px 10px; background-color:#eee;}
.contactForm-box-right form button 
{
  margin-top: 10px;
  background-color:#353234;
  color:#fff; 
  border:none; 
  cursor:pointer; 
  padding:10px 30px;
  font-family: var(--bodyfont);
  text-transform: uppercase;
}
.contactForm-box-right form button:hover 
{
  background-color:#000;	
}


.fbox-4 {
	width:14%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-top:10px;
}

.fbox-4 a { margin-right:30px;}  
.fbox-4 a i 
{
	font-size:20px;
    color:#000;
    border:1px solid #000;
    border-radius: 50%;
    width:40px;
    height:40px;
    text-align:center;
    align-items:center;
    display:flex;
    justify-content:center;
}
.fbox-4 a:hover i { background-color: #000; color:#eee;}
  
.tline p { font-size:20px;}
.tline h3 { color: #36c3f3;font-size:24px;font-weight: bolder; text-transform: uppercase;}

.lowerFooter
{
	background-color:#353234;
	text-align:center;
	padding:20px 0px;
	font-size:18px;
	color: #ccc;
}


@media screen and (max-width:1024px)
{
.aboutSection .aboutCnt .hd {font-size:34px;margin-bottom:0px;}
.aboutSection .aboutCnt p.cngt {font-size:16px;}

}


@media screen and (max-width:768px)
{
.headerRow
{
  display:flex;
  flex-direction:row;
  background-color:#000f1b;
  justify-content:space-between;
  align-items:center;
  position:relative;
  top:0%;
  left:0%;
  transform:unset;
  width:100%;
}
.headerRow .logo {padding:10px 20px;}
.headerRow .logo img {width:120px ;}
.collection-slider-container .slider-for .slick-prev {left:15px;}
.collection-slider-container .slider-for .slick-next {right:15px;}
.aboutSection .aboutCnt 
{
  width:40%;
  right:5%;
  font-size:16px;
}
.aboutSection .aboutCnt .hd {font-size:26px; line-height:28px; margin-bottom:10px;}
.aboutSection .aboutCnt .hd span {font-size:38px;}
.aboutSection .aboutCnt p.cngt {line-height:22px;}
.contactUs-container {width:90%;}
.contactForm-box-left {width:40%;}
.useClew-container {width:80%; margin-top:40px; margin-bottom:40px;}
.useClew-container .step-for-use {width:52%;}
.fawContainer {width:90%;}
}


@media screen and (max-width:700px)
{
.heading {font-size:32px;}
.heading span {font-size:22px;}

.productSlid .slick-prev { left:0px; width:25px;}
.productSlid .slick-next { right:0px; width:25px; background-position:right;}

.restrictedBox {width:100%;}
.restrictedBox p {font-size:36px; line-height:46px;}
.restrictedBox span {font-size:23px; line-height:33px;}

.aboutSection {flex-direction:column;}
.aboutSection .aboutCnt 
{
  position: relative;
  width: 100%;
  top: 0%;
  right: 0%;
  transform: translateY(-0%);
  padding: 20px;
  background-color: #363636;
  color: #fff;
}

.contactBox {flex-direction:column;}
.contactForm-box-right {width:100%;}
.contactForm-box-left {width:100%;text-align:left; margin-top: 20px;}
.fbox-4 {width:100%; justify-content:left;}
.fbox-4 a {margin:0px 10px;}

.useClew-container {flex-direction:column;}
.useClew-container .heading {width:100%; text-align:center;}
.useClew-container .heading h3 {text-align:center;}
.useClew-container .heading h4 {text-align:center;}
.useClew-container .heading p {text-align:center;}
.useClew-container .step-for-use {width:100%;}
.step-for-use .bx img {width:113px; margin-right:20px;}
.step-for-use .bx span {font-size:22px; line-height:22px;}
.step-for-use .bx p {font-size:18px;line-height:18px;}

}