@font-face{font-family:"Outfit";src:url("fonts/Outfit-Regular.eot");src:url("fonts/Outfit-Regular.eot?#iefix") format("embedded-opentype"),url("fonts/Outfit-Regular.woff2") format("woff2"),url("fonts/Outfit-Regular.woff") format("woff"),url("fonts/Outfit-Regular.ttf") format("truetype"),url("fonts/Outfit-Regular.svg#Outfit") format("svg");font-display:swap}
:root{--color-primary:#1e3a8a;--color-secondary:#2CA6C4;--color-accent:#7AC943;--color-purple:#6A2C91;--color-bg-main:#F8FAFC;--color-bg-white:#FFFFFF;--color-bg-light:#F1F5F9;--color-text-primary:#646a74;--color-text-secondary:#3d4044;--color-text-white:#FFFFFF;--color-border:#E2E8F0;--btn-primary-bg:var(--color-primary);--btn-primary-hover:#2CA6C4;--btn-success-bg:var(--color-accent);--btn-success-hover:#5fb52f;--gradient-primary:linear-gradient(135deg,#1E3A8A,#2CA6C4);--gradient-secondary:linear-gradient(135deg,#2CA6C4,#6A2C91)}
::-webkit-input-placeholder,::-moz-placeholder,::-ms-input-placeholder,::placeholder{color:#9f9f9f!important}
::-moz-selection,::selection{background:var(--color-primary);color:var(--color-text-white)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.lesyeuxlife{background-color:#fff;position:relative;font-family:"Outfit",sans-serif;color:var(--color-text-primary)}
a{transition:.3s all ease;text-decoration:none}
.fs-13{font-size:13px!important}.fs-14{font-size:14px!important}.fs-15{font-size:15px!important}.fs-16{font-size:16px!important}.fs-17{font-size:17px!important}.fs-18{font-size:18px!important}.fs-20{font-size:20px!important}.fs-22{font-size:22px!important}.fs-24{font-size:24px!important}
.ma0{margin:0!important}.mt0{margin-top:0!important}.mb0{margin-bottom:0!important}.mt3{margin-top:3px!important}.mb3{margin-bottom:3px!important}.mt5{margin-top:5px!important}.mb5{margin-bottom:5px!important}.mt8{margin-top:8px!important}.mb8{margin-bottom:0!important}.mt10{margin-top:10px!important}.mb10{margin-bottom:10px!important}.mt15{margin-top:15px!important}.mb15{margin-bottom:15px!important}.mt20{margin-top:20px!important}.mb20{margin-bottom:20px!important}.mt25{margin-top:25px!important}.mb25{margin-bottom:25px!important}.mt30{margin-top:30px!important}.mb30{margin-bottom:30px!important}.mt40{margin-top:40px!important}.mb40{margin-bottom:40px!important}
.w_100_f{width:100px!important}.w_100_m{max-width:100px!important}.w_150_f{width:150px!important}.w_150_m{max-width:150px!important}.w_200_f{width:200px!important}.w_200_m{max-width:200px!important}.w_250_f{width:250px!important}.w_250_m{max-width:250px!important}.w_300_f{width:300px!important}.w_300_m{max-width:300px!important}.w_350_f{width:350px!important}.w_350_m{max-width:350px!important}.w_400_f{width:400px!important}.w_400_m{max-width:400px!important}.w_450_f{width:450px!important}.w_450_m{max-width:450px!important}.w_500_f{width:500px!important}.w_500_m{max-width:500px!important}
.btn-main{background:var(--btn-primary-bg);color:var(--color-text-white);font-size:16px;transition:.3s all ease-in-out;border-radius:40px;padding:15px 44px}
.btn-second{border: 2px solid var(--color-primary);color:var(--color-text-secondary);background: none;font-size:16px;transition:.3s all ease-in-out;border-radius:40px;padding: 7px 25px;}
img{width: 100%;height: 100%;}
.btn-main:hover{border:2px solid var(--btn-primary-bg);color:var(--btn-primary-bg);background:none}
.form-control{height:43px}
.form-control:focus{border-color:var(--btn-primary-bg);box-shadow:none}
.site-section{padding:30px 0}
@media(min-width:768px){.site-section{padding:70px 0}}
.site-section.site-section-sm{padding:45px 0}
.site-section-heading{font-size:30px;color:var(--color-text-secondary);position:relative}
.border-top{border-top:1px solid var(--color-border)!important}
.site-footer{padding:40px 0 20px 0; background: var(--btn-primary-bg);}
.site-footer ul li{margin-bottom:10px;color: var(--color-bg-white);}
.site-footer ul li a{color:var(--color-bg-white)}
.site-footer ul li a:hover{color:var(--color-secondary)}
.site-footer .footer-heading{font-size:1.2rem;color:var(--color-bg-white);margin-bottom:1rem}
.site-footer .footer-heading p{color: var(--color-bg-white);}
.search-wrap {
  position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    z-index: 9999;
    padding: 50px 0 0 0;
}

.search-wrap.active {
  display: flex;
}

.search-wrap input {
  width: 100%;
  padding: 15px;
  font-size: 18px;
}

.search-close {
  position: absolute;
  top: 53px;
  right: 40px;
  font-size: 25px;
  color: var(--color-primary);
}
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Dots Loader */
.dots-loader {
    display: flex;
    gap: 15px;
}

.dots-loader span {
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out;
}

/* Delay for each dot */
.dots-loader span:nth-child(1) {
    animation-delay: 0s;
}
.dots-loader span:nth-child(2) {
    animation-delay: 0.2s;
}
.dots-loader span:nth-child(3) {
    animation-delay: 0.4s;
}
.dots-loader span:nth-child(4) {
    animation-delay: 0.6s;
}

/* Animation */
@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.3);
        opacity: 1;
    }
}

/* ---------------NAVBAR---------------- */
.site-logo a {
  display: inline-flex;
  align-items: center;
  width: 75px;
}

.site-logo a img {
  width: 100%;
  height: auto;
}
.site-navbar {
  margin-bottom: 0;
  z-index: 1999;
  position: relative;
  top: 0;
  width: 100%;
  background: var(--color-bg-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
}
.site-navbar a {
  color: var(--color-text-secondary);
  text-decoration: none;
}
.site-navbar a:hover {
  color: var(--color-primary);
}
.site-navbar .site-navigation.border-bottom {
  border-bottom: 1px solid var(--color-border) !important;
}
.site-navbar .site-navigation .site-menu {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.site-navbar .site-navigation .site-menu .active > a {
  color: var(--color-text-secondary);
  position: relative;
}
.site-navbar .site-navigation .site-menu a {
  font-size: 15px;
  display: inline-block;
}
.site-navbar .site-navigation .site-menu > li {
  display: inline-flex;
  align-items: center;
  padding: 10px 8px;
}
.site-navbar .site-navigation .site-menu > li > a {
  padding: 10px 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-text-secondary);
  font-size: 13px;
  transition: 0.3s;
}
.site-navbar .site-navigation .site-menu > li > a:hover {
  color: var(--color-primary);
}
.site-navbar .site-navigation .site-menu .has-children > a {
  padding-right: 20px;
}
.site-navbar .site-navigation .site-menu .has-children:hover > a {
  color: var(--color-primary);
}
.site-mobile-menu {
  width: 300px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2000;
  padding-top: 20px;
  background: var(--color-bg-white);
  height: 100vh;
  transform: translateX(110%);
  box-shadow: -10px 0 20px -10px rgba(0,0,0,0.1);
  transition: 0.3s ease-in-out;
}
.offcanvas-menu .site-mobile-menu {
  transform: translateX(0);
}
.site-mobile-menu .site-mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 20px;
}
.site-mobile-menu .site-mobile-menu-close span {
  font-size: 30px;
  cursor: pointer;
  transition: 0.3s;
  color: var(--color-text-secondary);
}

.site-mobile-menu .site-mobile-menu-close span:hover {
  color: var(--color-primary);
}
.site-mobile-menu .site-mobile-menu-logo {
  margin-left: 10px;
}

.site-mobile-menu .site-mobile-menu-logo a img {
  width: 90px;
}
.site-mobile-menu .site-mobile-menu-body {
  overflow-y: auto;
  padding: 0 20px;
  height: calc(100vh - 60px);
}
.site-mobile-menu .site-nav-wrap {
  list-style: none;
  padding: 0;
  margin: 0;
}
.icons{
  display: flex;
  align-items: center;
  gap: 10px;
}
.icons-btn{
  font-size: 25px;
  transition: 0.3s;
}
.site-mobile-menu .site-nav-wrap a {
  display: block;
  padding: 12px 20px;
  color: var(--color-text-secondary);
  font-size: 16px;
  transition: 0.3s;
}

.site-mobile-menu .site-nav-wrap a:hover {
  color: var(--color-primary);
}
.site-mobile-menu .site-nav-wrap li.active > a {
  color: var(--btn-primary-bg);
  font-weight: 600;
}
.site-mobile-menu .arrow-collapse {
  position: absolute;
  right: 10px;
  top: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}
.site-mobile-menu .arrow-collapse:hover {
  background: var(--color-bg-light);
}
.site-mobile-menu .site-nav-wrap > li {
  width: 100%;
}
.site-mobile-menu .site-nav-wrap > li > a {
font-size: 15px;
  padding-left: 15px;
}
.site-mobile-menu .site-nav-wrap > li > ul > li > a {
  padding-left: 40px;
  font-size: 15px;
}
.site-mobile-menu .site-nav-wrap > li > ul > li > ul > li > a {
  padding-left: 60px;
  font-size: 14px;
}



/* ---------------Section Hero---------------- */
.lesyuexlife_hero_section{
  height: 700px;
  width: 100%;
  position: relative;
}
.lesyuexlife_hero_section h1{
  font-size: 70px;
    color: var(--color-primary);
    position: absolute;
    top: 38%;
    left: 0%;
    width: 50%;
    text-align: center;
    font-weight: bold;
}
.lesyuexlife_hero_section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.607);
    z-index: -1;
}
.lesyeuxlife_cover_content h2{
  font-size: 30px;
  color: var(--color-primary);
}
.lesyeuxlife_cover_content p{
  font-size: 17px;
  color: var(--color-text-primary);
  margin-top: 20px;
}
#typeText::after {
    content: "|";
    animation: blink 1s infinite;
}
.lesyeuxlife_about_vision_img{
  border-radius: 10px;
  overflow: hidden;
  width: 300px;
  margin: auto;
}
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.expertise_heading{
  font-size: 40px;
  font-weight: bold;
  color: var(--color-primary);
}
.expertise_text{
  font-size: 22px;
  letter-spacing: 2px;
}
.erpertise_image{
  display: flex;
  gap: 25px;
}
.erpertise_image .imag_1{
  width: 250px;
  height: 250px;
}
@media (max-width:768px) {
  .lesyuexlife_hero_section{
    width: 100%;
    height: 100%;
  }
  .lesyuexlife_hero_section h1{
    font-size: 25px;
    width: 65%;
  }
}
/* ---------------Popular Products---------------- */
.title-section{
  font-size: 30px;
  color: var(--color-text-secondary);
  position: relative;
}
.lesyeuxlife_product{
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  border-radius: 10px;
  padding: 15px;
  transition: 0.3s;
  display: block;
}
.lesyeuxlife_product:hover{
  background: #1e3a8a26;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.lesyeuxlife_product img{
  width: 140px;
}
.lesyeuxlife_product h3{
  font-size: 22px;
  color: var(--color-text-secondary);
  margin-top: 10px;
}
.lesyeuxlife_product p{
  font-size: 14px;
  color: var(--color-primary);
  margin-top: 5px;
}


/* ---------------Testimonials---------------- */
.testimony{
  /* border: 1px solid var(--color-border); */
  background: var(--color-bg-white);
  border-radius: 10px;
  padding: 0 30px;
  transition: 0.3s;
}
.testimony .testi_img{
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

/* ---------------About Section---------------- */
.lesyeuxlife_about_img{
  border-radius: 10px;
  overflow: hidden;
  width: 500px;
  margin: auto;
}
.lesyeuxlife_about_img img{
  width: 100%;
  height: auto;
}
.about_logo{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.lesyeuxlife_cover_content ul{
  padding: 0;
  list-style: none;
}
.core-value-img{
  width: 430px;
}
@media (max-width:769px) {
  .lesyeuxlife_about_img{
    width: 100%;
    margin: auto;
  }
  .core-value-img{
    width: 100%;
  }
}
/* -----------------Contact---------------- */
.form-group{
  margin-bottom: 20px;
}
.contact_btn{
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    background: var(--btn-primary-bg);
    color: var(--color-bg-white);
    transition: all 0.3s ease-in-out;
}
.contact_btn:hover{
    background: var(--btn-primary-hover);
    color: var(--color-bg-white);
}

/* -------------Store------------ */
.lesyeuxlife_pagination ul, .lesyeuxlife_pagination ul li {
  padding: 0;
  margin: 0; }

.lesyeuxlife_pagination ul li {
  display: inline-block;
  margin-bottom: 4px; }
  .lesyeuxlife_pagination ul li a, .lesyeuxlife_pagination ul li span {
    text-align: center;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    border: 1px solid #eee;
    color: var(--color-primary); }
  .lesyeuxlife_pagination ul li.active a, .lesyeuxlife_pagination ul li.active span {
    background: var(--btn-primary-bg);
    color: #fff;
    border: 1px solid transparent; }

    @media (max-width: 575px) {
      .lesyeuxlife_product{
        width: 330px;
        margin: auto;
      }
    }
    @media (max-width:320px) {
      .lesyeuxlife_product{
        width: 100%;
        margin: auto;
      }
    }

/* ---------------------Product Details---------------- */
.product-img{
  width: 400px;
  height: 500px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  border-radius: 10px;
  padding: 15px;
}
.product-img img{
  width: 100%;
  height: 100%;
}
.product-tittle{
  font-size: 22px;
  font-weight: bold;
  color: var(--btn-primary-bg);
}
.product-price{
  font-size: 14px;
  color: var(--color-primary);
  margin-top: 5px;
}
.custom-pill .nav-link {
  background-color: var(--color-bg-light);
  color: var(--color-text-secondary);
  padding: 10px 20px;
  margin-right: 10px;
}
.custom-pill .nav-link.active {
  background-color: var(--btn-primary-bg);
  color: #fff;
  font-size: 14px;
}
.custom-table {
  width: 100%;
  border-collapse: collapse;
}
.custom-table th, .custom-table td {
  border: 1px solid var(--color-border);
  padding: 10px;
  text-align: left;
}
.custom-table th {
  background-color: var(--color-bg-light);
  color: var(--color-text-secondary);
}
.custom-table tr{
  font-size: 14px;
  color: var(--color-text-primary);
}
.custom-table tr th{
  font-size: 14px;
  color: var(--color-text-secondary);
}
.custom-table tr td{
  font-size: 14px;
  color: var(--color-text-primary);
}