/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/



html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  /*font-family: 'Poppins', sans-serif;*/
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #2a2a2a;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #f5fbff;
  /*font-family: 'Poppins', sans-serif;*/
}

::selection {
  background: #2a2a2a;
  color: #fff;
}

::-moz-selection {
  background: #2a2a2a;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.main-border-button a {
  font-size: 13px;
  color: black;
  border: 1px solid black;
  padding: 12px 25px;
  display: inline-block;
  font-weight: 500;
  transition: all .3s;
}

.main-border-button a:hover {
  background-color: #2A2A2A;
  color: white;
}

.main-white-button a {
  font-size: 13px;
  color: #2a2a2a;
  background-color: #fff;
  padding: 12px 25px;
  display: inline-block;
  border-radius: 3px;
  font-weight: 600;
  transition: all .3s;
}

.main-white-button a:hover {
  opacity: 0.9;
}

.main-text-button a {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  transition: all .3s;
}

.main-text-button a:hover {
  opacity: 0.9;
}

.section-heading h2 {
  font-size: 34px;
  font-weight: 700;
  color: #2a2a2a;
}

.section-heading span {
  font-size: 14px;
  color: #a1a1a1;
  font-style: italic;
  font-weight: 400;
}





/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

.main-banner {
  border-bottom: 3px dotted #eee;
  padding-top: 160px;
  padding-bottom: 30px;
}

.main-banner .left-content .thumb img {
  width: 100%;
  overflow: hidden;
}

.main-banner .left-content .inner-content {
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translateY(-50%);
}

.main-banner .left-content .inner-content h4 {
  color: #fff;
  margin-top: -10px;
  font-size: 52px;
  font-weight: 700;
  margin-bottom: 20px;
}

.main-banner .left-content .inner-content span {
  font-size: 16px;
  color: #fff;
  font-weight: 400;
  font-style: italic;
  display: block;
  margin-bottom: 30px;
}

.main-banner .right-content .right-first-image {
  margin-bottom: 28.5px;
}

.main-banner .right-content .right-first-image .thumb {
  position: relative;
  text-align: center;
}

.main-banner .right-content .right-first-image .thumb img {
  width: 100%;
  overflow: hidden;
}

.main-banner .right-content .right-first-image .thumb .inner-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

.main-banner .right-content .right-first-image .thumb .inner-content h4 {
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 15px;
}

.main-banner .right-content .right-first-image .thumb .inner-content span {
  font-size: 16px;
  color: #fff;
  font-style: italic;
}

.main-banner   .thumb .hover-content {
  position: absolute;
  top: 15px;
  right: 15px;
  left: 15px;
  bottom: 15px;
  text-align: center;
  background-color: #EAF4FF;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
  
}


.main-banner   .thumb:hover .hover-content {
  opacity: 0.91;
  visibility: visible;
}

.main-banner   .thumb .hover-content .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.main-banner  .thumb .hover-content h4 {
  color: #051923; /*color hover div portada*/
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
}

.main-banner   .thumb .hover-content p {
  color: black;
  padding: 0px 20px;
  margin-bottom: 20px;
}



/*
---------------------------------------------
Men
---------------------------------------------
*/

#men {
  padding-top: 65px;
  padding-bottom: 65px;
  border-bottom: 3px dotted #eee;
}

#men .section-heading {
  margin-bottom: 60px;
}

#men .item .down-content {
  padding-top: 15px;
  position: relative;
  z-index: 3;
  background-color: #fff;
}

#men .item .down-content h4 {
  font-size: 22px;
  color: #2a2a2a;
  font-weight: 700;
  margin-bottom: 8px;
}

#men .item .down-content span {
  font-size: 18px;
  color: #a1a1a1;
  font-weight: 500;
  display: block;
}

#men .item .down-content ul.stars {
  position: absolute;
  right: 0;
  top: 30px;
}

#men .item .down-content ul.stars li {
  display: inline;
  font-size: 13px;
}

#men .item .thumb .hover-content {
  position: absolute;
  z-index: 2;
  text-align: center;
  bottom: 10px;
  width: 100%;
   visibility: visible;
  transition: all .5s;
}

#men .item .thumb:hover .hover-content {
  bottom: 30px;
  opacity: 1;
  visibility: visible;
}

#men .item .thumb {
  position: relative;
}

#men .item .thumb .hover-content ul li {
  display: inline;
  margin: 0px 10px;
}

#men .item .thumb .hover-content ul li a {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  display: inline-block;
  color: #2a2a2a;
  background-color: #fff;
}


#men .owl-nav {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 40%;
  transform: translateY(-25px);
}

#men .owl-dots {
  display: none;
}
    
#men .owl-nav .owl-prev{
  position: absolute;
  left: -80px;
  outline: none;
}

@media (max-width: 575px) {
  #men .owl-nav .owl-prev{
    margin-left: -83%;
    position: static;
    
    
  }
}


#men .owl-nav .owl-prev span,
#men .owl-nav .owl-next span {
  opacity: 0;
}

#men .owl-nav .owl-prev:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #2a2a2a;
  font-size: 25px;
  font-weight: 700;
  content: '¥f104';
  width: 50px;
  height: 50px;
  background-color: transparent;
  line-height: 48px;
  border :1px solid #2a2a2a;
}

#men .owl-nav .owl-prev {
  opacity: 0.75;
  transition: all .5s;
}

#men .owl-nav .owl-prev:hover {
  opacity: 1;
}

#men .owl-nav .owl-next {
  opacity: 0.75;
  transition: all .5s;
}

#men .owl-nav .owl-next:hover {
  opacity: 1;
}

#men .owl-nav .owl-next{
  outline: none;
  position: absolute;
  right: -85px;
}

@media (max-width: 575px) {
  #men .owl-nav .owl-next{
    right: 0;
    
  }
}

#men .owl-nav .owl-next:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #2a2a2a;
  font-size: 25px;
  font-weight: 700;
  content: '¥f105';
  width: 50px;
  height: 50px;
  background-color: transparent;
  line-height: 48px;
  border :1px solid #2a2a2a;
}

/*
---------------------------------------------
Women
---------------------------------------------
*/
/*
---------------------------------------------
Kids
---------------------------------------------
*/

/*
---------------------------------------------
Explore
---------------------------------------------
*/

#explore {
  padding-top: 90px;
  padding-bottom: 90px;
  border-bottom: 3px dotted #eee;
}

#explore .left-content {
  margin-right: 30px;
}

#explore .left-content h2 {
  font-size: 34px;
  font-weight: 700;
  color: #2a2a2a;
}

#explore .left-content span {
  font-size: 14px;
  color: #aaaaaa;
  font-weight: 500;
  display: block;
  margin-top: 25px;
}

#explore .left-content .quote {
  margin-top: 25px;
}

#explore .left-content .quote i {
  float: left;
  font-size: 32px;
  margin-right: 15px;
  margin-top: 10px;
}

#explore .left-content .quote p {
  font-style: italic;
  color: #2a2a2a;
  font-weight: 500;
}

#explore .left-content p {
  font-size: 14px;
  color: #aaaaaa;
  font-weight: 500;
  display: block;
  margin-top: 25px;
}

#explore .left-content .main-border-button a {
  color: #2a2a2a;
  border-color: #2a2a2a;
  margin-top: 35px;
}

#explore .left-content .main-border-button a:hover {
  background-color: #2a2a2a;
  color: #fff;
}

#explore img {
  width: 100%;
  overflow: hidden;
}

#explore .leather {
  margin-bottom: 30px;
}

#explore .first-image {
  margin-bottom: 30px;
}

#explore .leather,
#explore .types {
  min-height: 255px;
  background-color: #f8f8f8;
  text-align: center;
  width: 100%;
}

#explore .leather h4,
#explore .types h4 {
  font-size: 24px;
  font-weight: 700;
  color: #2a2a2a;
  padding-top: 90px;
  margin-bottom: 5px;
}

#explore .leather span,
#explore .types span {
  font-size: 14px;
  font-style: italic;
  color: #aaa;
  font-weight: 500;
}

/* 
---------------------------------------------
Social
--------------------------------------------- 
*/

 

/* 
---------------------------------------------
Subscribe
--------------------------------------------- 
*/




/* 
---------------------------------------------
footer
--------------------------------------------- 
*/

footer {
  margin-top: 60px;
  padding: 60px 0px 30px 0px;
  background-color: #080707;
}

footer .logo {
  margin-bottom: 20px;
}

footer ul li {
  display: block;
  margin-bottom: 10px;
}

footer ul li a {
  font-size: 14px;
  color: #fff;
  transition: all .3s;
}

footer ul li a:hover {
  color: #aaa;
}

footer h4 {
  letter-spacing: 0.5px;
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 20px;
}

footer .under-footer {
  margin-top: 30px;
  padding-top: 30px;
  text-align: center;
  border-top: 1px solid rgba(250,250,250,0.3);
}

footer .under-footer ul {
  margin-top: 20px;
}

footer .under-footer ul li {
  display: inline-block;
  margin: 0px 10px;
}

footer .under-footer ul li a {
  font-size: 22px;
}

footer .under-footer p {
  color: #fff;
  font-size: 14px;
  font-weight: 300;
}

footer .under-footer a {
  color: #cff;
}

footer .under-footer a:hover {
  color: #c66;
}


/* 
---------------------------------------------
Products Page
--------------------------------------------- 
*/

.page-heading {
  margin-top: 101px;
  margin-bottom: 30px;
  background-image: url(../images/circle.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.page-heading .inner-content {
  padding: 150px 0px;
  text-align: center;
}

.page-heading .inner-content h2 {
  font-size: 52px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 15px;
}

.page-heading .inner-content span {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  font-style: italic;
}

#products .section-heading {
  text-align: center;
  margin-bottom: 60px;
  margin-top: 80px;
}

#products .item {
  margin-bottom: 30px;
}

#products .item .thumb img {
  width: 100%;
  overflow: hidden;
}

#products .item .down-content {
  padding-top: 20px;
  position: relative;
  z-index: 3;
  background-color: #fff;
}

#products .item .down-content h4 {
  font-size: 22px;
  color: #2a2a2a;
  font-weight: 700;
  margin-bottom: 8px;
}

#products .item .down-content span {
  font-size: 18px;
  color: #a1a1a1;
  font-weight: 500;
  display: block;
}

#products .item .down-content ul.stars {
  position: absolute;
  right: 0;
  top: 20px;
}

#products .item .down-content ul.stars li {
  display: inline;
  font-size: 13px;
}

#products .item .thumb .hover-content {
  position: absolute;
  z-index: 2;
  text-align: center;
  bottom: -60px;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all .5s;
}

#products .item .thumb:hover .hover-content {
  bottom: 30px;
  opacity: 1;
  visibility: visible;
}

#products .item .thumb {
  position: relative;
}

#products .item .thumb .hover-content ul li {
  display: inline;
  margin: 0px 10px;
}

#products .item .thumb .hover-content ul li a {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  display: inline-block;
  color: #2a2a2a;
  background-color: #fff;
}

#products .pagination {
  margin-top: 30px;
  margin-bottom: 40px;
}

#products .pagination ul {
  text-align: center;
  width: 100%;
}

#products .pagination ul li {
  display: inline;
  margin: 0px 5px;
}

#products .pagination ul li a {
  width: 44px;
  height: 44px;
  border: 1px solid #2a2a2a;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  font-size: 14px;
  font-weight: 500;
  color: #2a2a2a;
}

#products .pagination ul li a:hover,
#products .pagination ul li.active a {
  background-color: #2a2a2a;
  color: #fff;
}



/* 
---------------------------------------------
Single Product Page
--------------------------------------------- 
*/

#product {
  margin-top: 80px;
}

#product .left-images img {
  width: 100%;
  overflow: hidden;
  margin-bottom: 30px;
}

#product .right-content {
  position: relative;
  z-index: 3;
  background-color: #fff;
}

#product .right-content h4 {
  font-size: 22px;
  color: #2a2a2a;
  font-weight: 700;
  margin-bottom: 0px;
}

#product .right-content span.price {
  font-size: 18px;
  color: #a1a1a1;
  font-weight: 500;
  display: block;
  margin-top: 5px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

#product .right-content ul.stars {
  position: absolute;
  right: 0;
  top: 0;
}

#product .right-content ul.stars li {
  display: inline;
  font-size: 13px;
}

#product .right-content span {
  font-size: 14px;
  color: #aaaaaa;
  font-weight: 500;
  display: block;
  margin-top: 25px;
}

#product .right-content .quote {
  margin-top: 25px;
}

#product .right-content .quote i {
  float: left;
  font-size: 32px;
  margin-right: 15px;
  margin-top: 10px;
}

#product .right-content .quote p {
  font-style: italic;
  color: #2a2a2a;
  font-weight: 500;
}

#product .right-content p {
  font-size: 14px;
  color: #aaaaaa;
  font-weight: 500;
  display: block;
  margin-top: 25px;
}

.quantity-content {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  width: 100%;
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.quantity-content .left-content {
  float: left;
  margin-right: 30px;
}

.quantity-content .right-content {
  text-align: right;
}

.quantity-content .left-content h6 {
  padding-top: 7px;
  font-size: 20px;
  font-weight: 700;
  color: #aaa;
  position: relative;
  z-index: 11;
}

.total h4 {
  float: left;
  font-size: 20px;
  margin-top: 10px;
  color: #aaa!important;
}

.total .main-border-button {
  text-align: right;
}

.total .main-border-button a {
  border-color: #2a2a2a;
  color: #2a2a2a;
}

.total .main-border-button a:hover {
  color: #fff;
  background-color: #2a2a2a;
}





/* 
---------------------------------------------
About Us Page
--------------------------------------------- 
*/

.about-page-heading {
  margin-top: 160px;
  margin-bottom: 30px;
  background-image: url(../images/about-us-page-heading.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.about-us {
  margin-top: 80px;
}

.about-us .left-image img {
  width: 100%;
  overflow: hidden;
}

.about-us .right-content {
  margin-left: 30px;
}

.about-us .right-content h4 {
  font-size: 34px;
  font-weight: 700;
  color: #2a2a2a;
}

.about-us .right-content span {
  font-size: 14px;
  color: #aaaaaa;
  font-weight: 500;
  display: block;
  margin-top: 25px;
}

.about-us .right-content .quote {
  margin-top: 25px;
}

.about-us .right-content .quote i {
  float: left;
  font-size: 32px;
  margin-right: 15px;
  margin-top: 10px;
}

.about-us .right-content .quote p {
  font-style: italic;
  color: #2a2a2a;
  font-weight: 500;
}

.about-us .right-content p {
  font-size: 14px;
  color: #aaaaaa;
  font-weight: 500;
  display: block;
  margin-top: 25px;
}

.about-us .right-content ul {
  border-top: 3px dotted #eee;
  margin-top: 30px;
  padding-top: 30px;
}

.about-us .right-content ul li {
  display: inline-block;
  margin-right: 5px;
}

.about-us .right-content ul li a {
  width: 44px;
  height: 44px;
  background-color: #2a2a2a;
  color: #fff;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  border-radius: 50%;
  transition: all .5s;
}

.about-us .right-content ul li a:hover {
  background-color: #eee;
  color: #2a2a2a;
}

#product {
    margin-top: 50px !important;
}


/* 
---------------------------------------------
contact Us Page
--------------------------------------------- 
*/

.contact-us {
  margin-top: 90px;
  border-bottom: 3px dotted #eee;
  padding-bottom: 90px;
}

.contact-us .section-heading {
  margin-bottom: 40px;
}

.contact-us #map {
  margin-right: 30px;
}

.contact-us form input {
  width: 100%;
  height: 44px;
  line-height: 44px;
  padding: 0px 15px;
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  color: #aaa;
  border-radius: 0px;
  border: 1px solid #7a7a7a;
  box-shadow: none;
}

.contact-us form input::focus {
  border-color: #2a2a2a;
  border-radius: 0px;
}

.contact-us form textarea {
  width: 100%;
  height: 140px;
  min-height: 120px;
  max-height: 200px;
  margin-top: 30px;
  margin-bottom: 25px;
  line-height: 44px;
  padding: 0px 15px;
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  color: #aaa;
  border-radius: 0px;
  border: 1px solid #7a7a7a;
  box-shadow: none;
}

.contact-us form textarea::focus {
  border-color: #2a2a2a;
  border-radius: 0px;
}

.contact-us form button {
  width: 44px;
  height: 44px;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  background-color: #2a2a2a;
  box-shadow: none;
  border: 1px solid transparent;
  color: #fff;
  transition: all 0.3s;
}

.contact-us form button:hover {
  background-color: #fff;
  border: 1px solid #2a2a2a;
  color: #2a2a2a;
}


/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1200px) {
  .main-banner .right-content .right-first-image .thumb .hover-content p {
    display: none;
  }
}

@media (max-width: 992px) {
  .main-banner .right-content .right-first-image .thumb .hover-content p {
    display: block;
  }
  .header-area .main-nav .nav li.submenu:after {
    right: 3px;
  }
  .header-area .main-nav .nav li.submenu {
    padding-right: 15px;
  }
  .header-area .main-nav .nav li {
    padding-right: 5px;
    padding-left: 5px;
  }
  .header-area .main-nav .nav li a {
    font-size: 14px;
    letter-spacing: 0px;
  }
  .main-banner .left-content {
    margin-bottom: 30px;
  }
  #explore .left-content {
    margin-bottom: 30px;
  }
  #explore .right-content .types {
    margin-top: 30px;
  }
  .subscribe input {
    margin-bottom: 15px;
  }
  .subscribe form {
    text-align: center;
    margin-bottom: 30px;
  }
  .about-us .right-content {
    margin-left: 0px;
    margin-top: 30px;
  }
  .our-team .team-item {
    margin-bottom: 30px;
  }
  .our-services .service-item {
    margin-bottom: 30px;
  }
  .contact-us #map {
    margin-right: 0px;
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .main-banner .left-content .thumb .inner-content {
    left: 50%;
    top: 47.5%;
    transform: translate(-50%,-50%);
    text-align: center;
  }
  .subscribe form button {
    width: 100%;
  }
  footer {
    text-align: center;
  }
  footer h4 {
    margin-top: 30px;
  }
}




@-webkit-keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.color{
  color: skyblue !important;
  font-family: arial;
}
.tik{
 
  color: white;
  filter: grayscale(-1500);
}
/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
 
  margin-top: -50px;
  color: skyblue;
  font-weight: bold;
  font-size: 35px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 30px;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: white(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: black;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* Container for image text */
 
 
/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.4;
}

.active,
.demo:hover {
  opacity: 1;
}


 

.btn:hover{
  color: skyblue;
}
 

/* animate */



.floating_btn {
	position: fixed;
	bottom: 0px;
	right: 8px;
	width: 100px;
	height: 100px;
	display: flex;
	flex-direction: column;
	align-items:center;
	justify-content:center;
	z-index: 1000;
  }
  
  
  
  .contact_icon {
	background-color: #42db87;
	color: #fff;
	width: 60px;
	height: 60px;
	font-size:30px;
	border-radius: 50px;
	text-align: center;
	box-shadow: 2px 2px 3px #999;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translatey(0px);
	animation: pulse 1.5s infinite;
	box-shadow: 0 0 0 0 #42db87;
	-webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
	-moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
	-ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
	animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
	font-weight: normal;
	font-family: sans-serif;
	text-decoration: none !important;
	transition: all 300ms ease-in-out;
  }
  
  
  .text_icon {
	margin-top: 8px;
	color: #707070;
	font-size: 13px;
  }

  #whats{
	color: white;
	margin-right: 0;
  }



  
  .down-content span{
    color: #E23A84 !important;
    font-weight: 600 !important;
    font-size: 25px !important;
  }
  
  .down-content button{
    background-color: #ED833C;
  }
  
  .down-content{
    text-align: center;
  }
  .down-content button:hover{
    background-color: #ff934a;
    color: white;
  }
  



 
.inner-content h4{
  color: #007ea7 !important;
  text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px white, 0 0 30px white, 0 0 40px white, 0 0 55px white, 0 0 75px white;
 font-family: 'Dancing Script', cursive; 
   

}

.inner-content h2{
  color: black !important;
  text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px white, 0 0 30px white, 0 0 40px white, 0 0 55px white, 0 0 75px white;
  font-family: 'Dancing Script', cursive; 
}

  
.inner-content span{
  color: #007ea7 !important;
  text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px white, 0 0 30px white, 0 0 40px white, 0 0 55px white, 0 0 75px white;
  font-size: 18px !important;
}



.subscribe form button {
  width: 100%;
  height: 44px;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  background-color: #2a2a2a;
  box-shadow: none;
  border: 1px solid transparent;
  color: #fff;
  transition: all 0.3s;
}

.inner-content h4{
  margin-top: 230px !important;
  margin-bottom: 0px !important;
}

@media (max-width: 1366px) {
  .inner-content h4{
    margin-top: 130px !important;
  }
}

@media (max-width: 1025px) {
  .inner-content h4{
    font-size: 28px !important;
  }
}

.inner-content .top{
  margin-top: 350px !important;
}

@media (max-width: 1212px) {
  .inner-content .top{
    margin-top: 280px !important;
  }
}
@media (max-width: 1025px) {
  .inner-content .top{
   font-size: 35px !important;
   white-space: nowrap;
  }
}
@media (max-width: 571px) {
  .inner-content .top{
    margin-top: 120px !important;
  }
}


@media (max-width: 991px) {
  .inner-content h4{
    margin-top: 200px !important;
    
  }
}


#form-submit{
  width: 100%;
}


/* COLOR, TAMAﾃ前, POSICION DE TEXTO "CONTENIDO DETALLES DE PRODUCTO"*/

#product .right-content h4 {
  font-size: 22px;
  color: #309796;
  font-weight: 700;
  margin-bottom: 0px;
}


#product .right-content span.price {
  font-size: 20px;
  color: #E23A84;
  font-weight: 700;
  display: block;
  margin-top: 5px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}


#product .right-content span {
  font-size: 14px;
  color: #6cb5d6;
  font-weight: 500;
  display: block;
  margin-top: 5px;
}


.quantity-content .left-content h6 {
  padding-top: 7px;
  font-size: 20px;
  font-weight: 700;
  color: #201e1f;
  position: relative;
  z-index: 11;
}


.total h4 {
  float: left;
  font-size: 20px;
  margin-top: 10px;
  color: #E23A84!important;
}


/*ALINEAR*/

#product .right-content span {
  font-size: 14px;
  color: #6cb5d6;
  font-weight: 500;
  display: block;
  margin-top: 5px;
}


.quantity-content {
  margin-top: 0px;
  padding-top: 30px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  width: 100%;
  padding-bottom: 0px;
  margin-bottom: 25px;
}



/* Next & previous buttons en detalles producto*/
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  background-color: rgb(255, 255, 255);
  margin-top: -50px;
  color: skyblue;
  font-weight: bold;
  font-size: 35px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.next:hover{
  color: #E23A84;
}
.prev:hover{
  color: #E23A84;
}



/* Next & previous buttons en INDEX*/

@media (max-width: 575px){
  #men .owl-nav .owl-prev:before{
    display: inline-block;
    font-family: 'FontAwesome';
    color:#E23A84;
    font-size: 25px;
    font-weight: 700;
    width: 50px;
    height: 50px;
    background-color: transparent;
    line-height: 48px;
    border :1px solid #2a2a2a;
    background-color: white;
 
  }
}



@media (max-width: 575px){
  #men .owl-nav .owl-next:before{
    display: inline-block;
    font-family: 'FontAwesome';
    color:#E23A84;
    font-size: 25px;
    font-weight: 700;
    content: '¥f105';
    width: 50px;
    height: 50px;
    background-color: transparent;
    line-height: 48px;
    border :1px solid #2a2a2a;
    background-color: white;
 
  }
}


.main-nav a{
  color: #0D8786 !important;
  font-weight: 450 !important;
}

.main-banner .left-content .inner-content h4 {

  font-weight: 500 !important;
  font-family: 'Amatic SC', cursive;

}

.main-banner .right-content .right-first-image .thumb .inner-content h4 {
  font-weight: 500 !important;
  font-family: 'Amatic SC', cursive;
  width: 60%;
  margin-left: 21%;
  
}

.inner-content span{
   
  font-weight: 500 !important;
  
}


.section-heading h2{
  font-weight: 300 !important;
  font-family: 'Montserrat Alternates', sans-serif;
  color: #005f73;
}

.down-content h5{
  font-weight: 400;
  color: #adb5bd;
  padding-bottom: 5px;
}
.down-content span{

  color: #E23A84 !important;
  font-size: 20px !important;
  font-weight: 500 !important;
}

.btn-danger{
  background-color: #D3E5ED !important;
  border-color: #D3E5ED;
  color: #68AACD;
}

.btn-danger:hover{
  background-color: #D3E5ED !important;
  border-color: #D3E5ED;
  color: #68AACD;
}

.btn-danger:focus{
  outline: none;
  
}

/* .container-fluid{
  padding-top: 25px;
  background-image: url("../images/fondo1.jpg");
  background-size: 450px;
}  */

.main-banner{
  padding-top: 120px !important;
}

.thumb img{
  border-radius: 10px;
}

#product .right-content h4 {

  color: #68AACD;
  font-weight: 380;

}

#product .right-content span.price{

  font-weight: 500;

}

#product .right-content span {

  color: #acc1c9;

}

.quantity-content h6{
  font-weight: 400 !important;
}
.total h4{
  font-weight: 500 !important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #aaaaaa!important;
}

#explore .left-content h2 {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 400;
  color: #2b2d42;

}

#explore .left-content .quote p {
  color: #aaaaaa;

} 

#product .right-content .quote i {
  float: left;
  font-size: 32px;
  margin-right: 15px;
  margin-top: 10px;
  color: #818A91;
}

#product .right-content .quote p {
  color: #818A91;
}



/*NUEVOS CAMIOS  11/10/2022*/
.inner-content h4{
  color: #007ea7 !important;
 background: rgb(255,255,255);
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(252,70,107,0) 100%);
 border-radius: 15px !important;

}

.section-heading span{
  font-size: 16px !important;
}

.plus-product{
  position: absolute;
  margin-left: 20%;
  margin-top: -2%;
  width: 30%;
  background-color: #ebebeb !important;
  color: silver;
  padding: 12px;
  border-radius: 7px;
  border-color: #ebebeb;
  outline: none;
}

.plus-product:hover{
  background-color: #D3E5ED;
  transition: 1s;
  color: black;
}

.plus-single{
  position: absolute;
  margin-left: 115% !important;
  margin-top: -5%;
  width: 30%;
  background-color: #ebebeb !important;
  color: silver;
  padding: 12px;
  border-radius: 7px;
  border-color: #ebebeb;
  outline: none;
}

.plus-single:hover{
  background-color: #D3E5ED;
  transition: 1s;
  color: black;
}

.plus-single-movil{
  display: none;
}

@media(max-width:992px){
	.plus-single-movil{
		 margin-top: 20px;
     width: 100%;
     display: block;
	}
	
}

.title-category  h5{
  font-size: 1.20rem !important;
}

@media(max-width:992px){
	.title-category{
    padding-bottom: 30px;
  }
  
	
}

@media(max-width:992px){
	.space{
    padding-bottom: 30px;
  }
  
	
}

.more{
  font-size: 18px;
  margin-left: 0%;
}

.linkcategoria{
  font-size: 40px !important;
}

.linkcategoria a{
  font-size: 22px !important;
  color: rgb(0, 145, 202);
}

.linkcategoria a:hover{
  color: rgb(47, 189, 255);

}

.linkcategoryproduct {
  font-size: 20px !important;
  margin-left: 1.2%;
  font-weight: 600 !important;
  font-family: 'Montserrat Alternates', sans-serif;
  color: #005f73;
  padding-bottom: 12px;
  
}

.linkcategoryproduct a {
  color: rgb(0, 145, 202);
  font-weight: 400 !important;
  font-family: 'Montserrat Alternates', sans-serif;
  
 
}

.linkinicio{
  color: #005f73 !important;
}

.linkcategoryproduct a:hover{
  color: rgb(47, 189, 255);

}


#product .right-content h4 {
  font-size: 24px;
  
}

#product .right-content span {
  font-size: 16px;
  
}



@media(max-width:992px)
{
.tik{
   min-width: 350px !important;
  }
}

.tik{
  margin-left: -5% !important;
}


.page-heading .inner-content h2 {
  font-family: 'Montserrat Alternates', sans-serif;

}

.page-heading .inner-content span {
    font-size: 16px;
    font-weight: 900 !important ;
    font-family: 'Montserrat Alternates', sans-serif;
    font-style: italic;
}

.page-heading {
  
  padding-top: 100px;
}

.productos span{
  font-size: 18px !important;
}
.productos{
  margin-bottom: -50px;
}

.background-header .logo, .background-header .main-nav .nav li a {
  color:  #0D8786 !important;
}


.imagen-banner img{
  width: 100%;
}
.imagen-banner{
  padding-top: 50px;
}

@media(max-width:992px){
	.imagen-banner{
    margin-top: 30px;
  }
}


.boton{
  background-color: white;
  font-size: 16px;
  font-weight: 400;
  padding: 10px;
}

.boton:hover{
  color: black;
}



.inner-content h4 {

    background: transparent;
}

.inner-two{
 
  position: absolute;
  margin-top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.inner-tres{
 
  position: absolute;
  margin-top: -40px;
  left: 50%;
  transform: translate(-50%, -50%);
}





.container-gallery {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 256px));
  grid-gap: 1rem;
  padding: 1rem;
  
  
}
.container-gallery img {
  background-position: top;
  background-size: cover;
  height: 300px;
  width: 100%;
  border-radius:10px;
  box-shadow: 0 1px 2px #000;
  cursor: pointer;
  transition: all 0.2s;
}
.container-gallery img:hover {
  box-shadow: none;
  transform: scale(1.05);
}

 

@media(max-width: 770px){
  .delet-mobil{
    display: none !important;
  }
}

@media(max-width: 990px){
  .padding-item{
    padding-bottom: 30px;
    }
    .fot-ul li a{
    font-size: 17px;
    }
    .til-pie{
    font-size: 20px;    
    }
}


 
h1{
  font-weight: 600 !important;
  font-family: 'Montserrat Alternates', sans-serif !important;
  color: #005f73;
  text-transform: none;
  font-size: 28px;
}

.title-opaci{
    opacity: 0 !important;
}

 

@media(max-width: 1190px){
  .tablet-respon{
    
    margin-top: -80px !important;
 }
}
 
.btn-w{
    width: 220px;
} 

.not-found{
  text-align: center;
  margin-top: 250px !important;
  margin-bottom: 250px;
}

.not-found p {
  margin-top: 10px;
  font-size: 20px;
}




/*NUEVO CSS*/


.contenedor-productos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Ajuste flexible */
    gap: 20px;
    padding: 20px;
    max-width: 1250px;  /* Limita el ancho del contenedor */
    margin: 0 auto;  /* Centra el contenedor horizontalmente */
}

/* 4 productos por fila en pantallas grandes */
@media (min-width: 1024px) {
    .contenedor-productos {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 3 productos por fila en tablets */
@media (max-width: 1023px) {
    .contenedor-productos {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 2 productos por fila en móviles medianos */
@media (max-width: 767px) {
    .contenedor-productos {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 1 producto por fila en móviles pequeños  
@media (max-width: 480px) {
    .contenedor-productos {
        grid-template-columns: repeat(1, 1fr);
    }
}*/
@media (max-width: 480px) {
    .contenedor-productos {
 
    gap: 10px;
    padding: 10px;
 
    }
    .no-padding{
        padding: 5px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;

    }

}



/* Tarjeta de producto */
.producto {
    background: white;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    width: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

.producto:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);  /* Cambio de sombra más grande */
    transform: translateY(-5px);  /* Elevación para simular expansión */
}

.producto h5 {
    font-weight: normal; /* Mantener el peso constante */
    transition: none; /* No aplicar transformación en el texto */
}

.producto img,
.producto p,
.producto button {
    transition: none; /* No aplicar transición en estos elementos */
}

.producto img {
     width :258px;
    height:258px;
    border-radius: 8px;
}

h5 {
    margin: 10px 0;
    font-size: 18px;
    color: #333;
}

.precio {
    font-size: 20px;
    color: #e74c3c;
    font-weight: bold;
}

/* Enlaces estilizados como botones */
.btn {
    display: inline-block;
    text-decoration: none;
    background: #ff6b6b;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s;
    margin-top: 5px;
}

.btn:hover {
    background: #ff4757;
}
.btn:hover {
    color: white;
}
.seccion-tienda {
    max-width: 1200px;
    margin: 0 auto; /* Centrado en la pantalla */
    padding: 20px;
    text-align: center; /* Alinea el texto */
}
h2{
    font-weight: 200 !important;
     color: #005f73;
}


/*MENU*/
header {
    background-color: #fff; /* O el color de fondo de tu header */
    padding: 10px; /* Ajusta el padding según sea necesario */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
    /* Otros estilos para el header */
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.navbar .logo a {
    color: white;
    text-decoration: none;
    font-size: 24px;
}

.nav-list {
    display: flex;
    list-style-type: none;
}

.nav-list li {
    position: relative;
}

.nav-list a {
    color: #0D8786 ;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    font-size: 18px;
    font-weight: ;
}

.nav-list li:hover {
    background-color: #f3f3f3;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    list-style-type: none;
    padding: 0;
    width: 250px;
}

.nav-list li:hover .submenu {
    display: block;
}

.submenu li {
    width: 250px;
}

/* Estilos para el menú responsive */
.menu-toggle {
    display: none;
    font-size: 30px;
    color: black;
    cursor: pointer;
}

/* Responsividad */
@media (max-width: 768px) {
    /* .navbar {
        flex-direction: column;
        align-items: flex-start;
    } */

    .nav-list {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    /* .nav-list li {
        width: 100%;
    }

    .nav-list li a {
        padding: 15px;
    }

    .nav-list.active {
        display: flex;
    }

     

    .submenu {
        position: static;
    }

    .submenu li {
        width: 100%;
    } */
    .menu-toggle {
        display: block;
    }
}


 

/* Hacemos que solo se vea en pantallas pequeñas */
@media (max-width: 768px) {
    .menumovil-toggle {
        display: block;
    }
}

/* Estilo para los elementos del menú móvil */
.nav-list-mmovil li {
    padding: 10px;
    text-align: left;
}

.nav-list-mmovil a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

/* Estilos para la X en la esquina superior derecha */
.close-btn {
    position: absolute;
    top: 5px;
    right: 35px;
    font-size: 30px;
    color: white !important;
    cursor: pointer;
}

/* Hacemos que el menú móvil solo sea visible en pantallas pequeñas */
.menumovil-toggle {
    display: none;
    position: fixed;
    top: 0;
    left: -300px; /* Lo escondemos a la izquierda */
    width: 300px;
    height: 100%;
    background-color: #333;
    z-index: 1000;
    transition: left 0.3s ease-in-out; /* Animación de deslizamiento */
}

.menumovil-toggle.open {
    left: 0; /* Mueve el menú a la vista */
}

/* Hacemos que solo se vea en pantallas pequeñas */
@media (max-width: 768px) {
    .menumovil-toggle {
        display: block;
    }
}
/* Estilo para el submenú */
.submenu-movil {
    max-height: 0; /* Inicialmente el submenú está colapsado */
    overflow: hidden; /* Ocultamos el contenido cuando el submenú está colapsado */
    transition: max-height 0.5s ease-in-out; /* Animación de expansión con transición suave */
}

/* Estilo cuando el submenú está abierto */
.submenu-movil.open {
    max-height: 500px; /* Valor suficientemente alto para asegurar que el submenú pueda expandirse */
    transition: max-height 0.5s ease-in-out; /* Animación suave de expansión */
}

/* Estilo para los elementos del submenú */
.submenu-movil li {
    padding-left: 20px; /* Espaciado adecuado para el submenú */
    text-align: left;
}

/* Estilos adicionales para los elementos del menú */
.nav-list-mmovil li {
    padding: 10px;
    text-align: left;
}

.nav-list-mmovil a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}
/* Aseguramos que el enlace ocupe todo el ancho del <li> */
    .nav-list-mmovil li a {
    display: block;  /* Hace que el enlace ocupe todo el ancho y alto del <li> */
    width: 70%;  /* Asegura que el ancho sea del 100% */
    padding: 10px 20px;  /* Añade algo de espacio alrededor del enlace */
    text-decoration: none; /* Elimina la subrayado */
    color: white;  /* Establece el color del texto, si lo deseas */
}

/* Opcional: Cambiar el fondo del enlace cuando se pasa el ratón sobre él */
.nav-list-mmovil li a:hover {
   
}

/* Bloquear el scroll cuando el menú está abierto */
.body-no-scroll {
    overflow: hidden;
    position: fixed; /* Evita que se desplace el contenido de la página */
    width: 100%; /* Asegura que el ancho sea completo */
    height: 100%; /* Asegura que la altura sea completa */
}


/* Capa de fondo oscurecido */
.overlay {
    display: none; /* Oculta la capa por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro con opacidad */
    z-index: 999; /* Asegura que la capa esté por encima del contenido */
    transition: all 0.3s ease; /* Suaviza la transición */
}

.submenu{
        z-index: 10;
}
.h2-descripcion{
    text-align: left;
}
.carousel-item {
    position: relative;
}

.carousel-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Efecto oscuro */
    z-index: 1;
}

.carousel-item img {
    z-index: 0;
}

.carousel-caption {
    position: absolute;
    width: 500px;
    top: calc(30% - 32px); /* Centrado vertical con `calc()` (mitad de la altura del texto) */
    left: 50%; /* Centrado horizontal */
    transform: translateX(-50%); /* Ajuste perfecto en el centro */
    color: white;
    font-size: 64px; /* Tamaño del texto */
    font-weight: bold;
    z-index: 2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Sombra para mejorar la legibilidad */
    text-align: center; /* Asegura que el texto se mantenga centrado */
}

.carousel-btn {
    position: absolute;
    top: calc(55% + 32px); /* Coloca el botón justo debajo del texto usando `calc()` */
    left: 50%;
    transform: translateX(-50%); /* Centra el botón horizontalmente */
    padding: 15px 35px;
    font-size: 16px;
    z-index: 3; /* Asegura que el botón esté por encima de la imagen */
}

/*PATANLLAS 1600*/
@media (max-width: 1460px) {
    .carousel-caption {
    position: absolute;
    top: calc(20% - 32px); /* Centrado vertical con `calc()` (mitad de la altura del texto) */
    left: 50%; /* Centrado horizontal */
    transform: translateX(-50%); /* Ajuste perfecto en el centro */
    color: white;
    font-size: 64px; /* Tamaño del texto */
    font-weight: bold;
    z-index: 2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Sombra para mejorar la legibilidad */
    text-align: center; /* Asegura que el texto se mantenga centrado */
}

 
}

@media (max-width: 1120px) {
    .carousel-caption {
    position: absolute;
    top: calc(10% - 32px); /* Centrado vertical con `calc()` (mitad de la altura del texto) */
    left: 50%; /* Centrado horizontal */
    transform: translateX(-50%); /* Ajuste perfecto en el centro */
    color: white;
    font-size: 64px; /* Tamaño del texto */
    font-weight: bold;
    z-index: 2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Sombra para mejorar la legibilidad */
    text-align: center; /* Asegura que el texto se mantenga centrado */
    }


}
 
@media (min-width: 768px){
    .carousel-mobil{
        display: none;
    }
    
}

@media (max-width: 768px){
    .carousel-pc{
        display: none;
    }
    .carousel-caption {
    width: 300px !important;    
    position: absolute;
    top: calc(25% - 32px); /* Centrado vertical con `calc()` (mitad de la altura del texto) */
    left: 50%; /* Centrado horizontal */
    transform: translateX(-50%); /* Ajuste perfecto en el centro */
    color: white;
    font-size: 40px; /* Tamaño del texto */
    font-weight: bold;
    z-index: 2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Sombra para mejorar la legibilidad */
    text-align: center; /* Asegura que el texto se mantenga centrado */
    }
    .carousel-inner{
        height: 100% !important;
        background-color: rgb(66, 66, 66);
    }
    .carousel-btn {
    position: absolute;
    top: calc(48% + 32px); /* Coloca el botón justo debajo del texto usando `calc()` */
    left: 50%;
    transform: translateX(-50%); /* Centra el botón horizontalmente */
    padding: 15px 35px;
    font-size: 16px;
    z-index: 3; /* Asegura que el botón esté por encima de la imagen */
    }
    .carousel-item img{
        width: 100%;
        height: 350px;
    }
    .producto-img{
    width: 100% !important;
    height: 162px  !important; /* Esto asegura que la imagen mantenga la proporción */
    }

}
::selection {
    background-color: #3390FF;  /* Sin color de fondo */
    color: white;  /* El color de texto permanece igual */
}
 

/* @media (max-width: 768px) {
    .carousel-caption {
    position: absolute;
    width: 200px;
    top: calc(10% - 32px);  
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 24px; 
    font-weight: bold;
    z-index: 2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); 
    text-align: center; 
    }
    
    .carousel-btn {
        position: absolute;
        top: calc(35% + 32px); 
        left: 50%;
        transform: translateX(-50%); 
        padding: 2px 15px;
        font-size: 16px;
        z-index: 3; 
    }



}
  */
  /* Aplicamos solo animación de fade-in en el contenedor del texto y botón */
 
  
 /* Estilo de la imagen para aplicar el filtro y oscurecerla */
.carousel-item img {
    filter: brightness(0.9);  /* Oscurece la imagen, puedes ajustar el valor */
}

/* Animación de desvanecimiento para el texto y el botón */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Contenedor oculto por defecto */
.carousel-caption-container {
    opacity: 0;
}

/* Forzar que el contenido se anime justo cuando empieza el cambio de slide */
.carousel-item.carousel-item-next .carousel-caption-container,
.carousel-item.carousel-item-prev .carousel-caption-container,
.carousel-item.active .carousel-caption-container {
    opacity: 1;
    animation: fadeIn 0.5s ease forwards;
}

.productos{
    margin-bottom: 50px;
  
}

.galeria {
            display: flex;
            gap: 10px; /* Espacio entre elementos */
            padding: 10px;
            max-width: 1250px;
            margin: 0 auto; /* Centra horizontalmente */
        }

        /* Columna izquierda (un solo div grande) */
        .columna-izquierda {
            flex: 1; /* Ocupa el 50% del ancho */
            display: flex;
            align-items: center;
            justify-content: center;
            background: orange;
            color: white;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            border-radius: 10px;
            height: 100%; /* Ocupa todo el alto */
        }

        /* Columna derecha (2 filas con 2 elementos cada una) */
        .columna-derecha {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 10px; /* Espacio entre filas */
        }

        .fila {
            display: flex;
            gap: 10px;
            flex: 1;
        }

        .item {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            border-radius: 10px;
            height: 100%; /* Ajusta la altura */
        }

        .item1 { background: pink; }
        .item2 { background: green; }
        .item3 { background: transparent; }
        .item4 { background: yellow; }

        /* Diseño responsivo */
        @media (max-width: 768px) {
            .galeria {
                flex-direction: column;
            }
            .columna-izquierda {
                height: 200px; /* Ajusta altura para móviles */
            }
            .columna-derecha {
                flex-direction: column;
            }
            .fila {
                flex-direction: column;
            }
            .item img{
            height: 350px !important;
            }
            
        }

        .item img, .columna-izquierda img{
            border-radius: 10px;
        }

        .item img{
            height: 300px;
        }
        .seccion-clientes{
 
            padding-bottom: 100px;
        }

        footer{
            margin-top: 0;
        }
.icono-redes{
    width: 18px;
    height: 18px;
    margin-left: -15px;
}

@media (max-width: 768px) {
        .icono-redes{
    
            margin-left: 15px;
        }

}

h2{
    display: inline-block;
}

footer{
    background-color: #2f2f2f !important;
}

/* Estilo para el enlace */
.ver-mas-productos {
    display: block;
    width: max-content; /* Hace que el ancho se ajuste al contenido */
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    color: #ff69b4; /* Rosa suave, puedes cambiarlo */
    background-color: #fff0f5; /* Fondo rosado claro */
    padding: 10px 20px;
    border-radius: 25px;
    border: 2px solid #ff69b4;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 40px !important;
    
}

/* Flecha antes del texto */
.ver-mas-productos::before {
    content: "🍼 ";
    font-size: 20px;
    margin-right: 8px;
}

/* Flecha después del texto */
.ver-mas-productos::after {
    content: " 🍼";
    font-size: 20px;
    margin-left: 8px;
}

/* Efecto hover */
.ver-mas-productos:hover {
    background-color: #FFF0F5;
    color: #ff69b4;
    border-color: #ff1493;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {

    .ver-mas-productos{
        text-align: center;
        width: 100%;
        
        
        
    }
    .ver-mas-productos::before {
        margin-top: 20px !important;
    }

}


/* NUEVO CSS GALERIA */
.baby-gallery {
    padding: 50px 0;
}

/* Contenedor principal para que el texto y la galería sean del mismo alto */
.content-wrapper {
    display: flex;
    align-items: stretch;
    gap: 30px;
}

/* Columna izquierda: Sección de texto y testimonios */
.text-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Título */
.text-section h2 {
   
    font-weight: 600;
 
    margin-bottom: 15px;
}

/* Descripción */
.text-section p {
    font-size: 16px;
    color: #777;
    margin-bottom: 20px;
}

/* Testimonios */
.testimonial {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 10px;
    border-left: 5px solid #ff6f61;
    gap: 10px;
    margin-bottom: 15px;
}

.testimonial i {
    font-size: 22px;
    color: #ff6f61;
}

.testimonial p {
    font-size: 15px;
    color: #555;
    margin: 0;
}

/* Botón */
.main-border-button a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ff6f61;
    font-weight: bold;
    text-decoration: none;
    font-size: 18px;
    transition: transform 0.3s ease;
}

 
.main-border-button a:hover::after {
    transform: translateY(3px);
}

/* Columna derecha: Galería de imágenes */
.gallery-section {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Cuadrícula de imágenes */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    height: 100%;
}

/* Imágenes */
.image-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 15px;
 
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.image-box:hover img {
    transform: scale(1.05);
}

/* Responsividad */
@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }
    .tiktok-embed{
        margin-left: 1px !important;
    }
}


 /* Botón con estilo infantil */
.main-border-button a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #FF68B4; /* Color suave */
    color: white; /* Color bebé */
    font-weight: bold;
    text-decoration: none;
    font-size: 18px;
    padding: 12px 20px;
    border-radius: 25px;
    border: 2px solid #FF68B4;
    box-shadow: 0px 4px 8px rgba(255, 111, 97, 0.2);
    transition: all 0.3s ease;
    position: relative;
}

 

/* Efecto al pasar el mouse */
.main-border-button a:hover {
    background-color: #FF68B4;
    color: white;
    transform: scale(1.05);
}

.baby-gallery,.recomendado{
    background-color: #e8f4ff; /*#d9e8f6*/
}

.redes-sociales{
    background-color: #dff0ff; /*#d9e8f6*/
}




.redes-sociales{
    padding-bottom: 100px;
    padding-top: 80px;
}



/*ESTILOS CONTACTO*/

.contacto-container {
    display: flex;
    align-items: stretch; /* Hace que ambos divs tengan la misma altura */
    justify-content: center;
    gap: 20px;
    padding: 20px;
    max-width: 1250px;
    margin: auto;
    margin-top:20px;
    margin-bottom: 80px;
}

/* Estilos generales para ambos bloques */
.contacto-info, .contacto-form {
    flex: 1;
    min-width: 300px;
    padding: 20px;
    background: #F8F9FA;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
 
}

/* Información de contacto (izquierda) */
.contacto-info p {
    color: #333;
    margin-bottom: 8px;
    font-size: 17px;
}

.contacto-info a {
    color: #FF4081;
    text-decoration: none;
    font-weight: bold;
}

/* Formulario de contacto (derecha) */
.contacto-form form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.contacto-form label {
    font-weight: bold;
    color: #FF6B81;
}

.contacto-form input, .contacto-form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #FFF;
}



/* Botón */
.contacto-form button {
    padding: 10px;
    border: none;
    background:#FF4081;
    color: white;
    font-size: 16px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.contacto-form button:hover {
    background: #FF4081;
}

/* Responsive */
@media (max-width: 768px) {
    .contacto-container {
        flex-direction: column;
    }
}


#form-submit {
 
   border-radius: 5px;
  outline: none; /* Quita el contorno azul predeterminado */
}
.btn-recomendado{
    width: 100%;
    margin-top: 10px;
}

.seccion-tienda-recomendados {
    margin-top: 100px !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
}


.recomendado{
    margin-bottom: 0px;
    padding-top:50px;
    padding-bottom: 80px;
}



/*ESTO ES ESTILO PARA PRODUCTO*/

/* Estilo general de la sección */
.producto-single {
    display: flex;
    justify-content: center; /* Centra el contenido */
    padding: 5px 20px;
    background-color: #f5fbff; /* Color de fondo */
}

/* Contenedor principal */
.producto-contenedor-single {
    display: flex;
    max-width: 1250px;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Contenedor de la imagen (izquierda) */
.producto-imagen-single {
    width: 50%; /* La mitad del ancho */
    /* display: flex; */
    justify-content: center;
    background: #eef7ff; /* Fondo claro */
    padding: 20px;
}

.producto-imagen-single h1{
    padding-bottom: 20px;
}

/* Estilo de la imagen */
.producto-imagen-single img {
    max-width: 100%;
    /*width: 100%;*/  /* Hace que la imagen ocupe el ancho completo */
    /*height: 100%*/; /* Hace que la imagen ocupe toda la altura del contenedor */
    height: auto;
    border-radius: 8px;
}

/* Contenedor de información (derecha) */
.producto-info-single {
    width: 50%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Estilos del título */
.producto-info-single h1 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

/* Descripción */
.producto-info-single p {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
}

/* Precio */
.producto-info-single .precio {
    font-size: 20px;
    font-weight: bold;
    color: #ff6600;
    margin-bottom: 15px;
}

/* Botón de compra */
.boton-comprar {
    background: #ff69b4; /* Rosa bebé */
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
    outline: none !important;
}

.boton-comprar-single:hover {
    background: #ff1493; /* Rosa más fuerte */
}

/* Diseño responsive */
@media (max-width: 768px) {
    .producto-contenedor-single {
        flex-direction: column;
    }

    .producto-imagen-single,
    .producto-info-single {
        width: 100%;
    }

    .info-adicional p {
       display:block!important; 
    }
    
}

.info-adicional {
    margin-top: 20px;
    padding: 15px;
    background: #fef3f3; /* Fondo suave */
    border-radius: 8px;
    font-size: 14px;
    color: #555;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.info-adicional p {
    margin: 8px 0;
    display: flex;
    align-items: center;
}

/* Estilo para el enlace del teléfono */
.info-adicional a {
    color: #ff69b4;
    font-weight: bold;
    text-decoration: none;
}

.info-adicional a:hover {
    text-decoration: underline;
}

/*TERMINA ESTILO PRODUCTO*/





/* MAGENES QUE VAN DEBAJO DE LA IMAGEN PRINCIPAL DEL PRODUCTO */
 
/* Imagen principal */
.imagen-grande img {
    width: 600px;
 
    height: 590px;
    border-radius: 8px;
}

/* Miniaturas */
.miniaturas {
    display: flex;
    flex-wrap: wrap; /* Permite que las imágenes pasen a la siguiente fila si no hay espacio */
    gap: 5px; /* Espaciado entre imágenes */
    margin-top:15px;

}

.miniaturas img {
    width: 100px; /* Ajusta el tamaño según necesites */
    height: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
}

.miniaturas img:hover {
    transform: scale(1.1); /* Efecto al pasar el mouse */
}

/* Responsive: Miniaturas más pequeñas en pantallas chicas */
@media (max-width: 600px) {
    .miniaturas img {
        width: 70px;
    }
    .imagen-grande img {
    width: 600px;
 
    height: 400px;
     
}
}
/* Miniatura activa (imagen seleccionada) */
.miniatura-activa {
    border: 2px solid #a7c2da !important;
    transform: scale(1.1);
}
 
/* Contenedor de la imagen grande */
.imagen-grande {
    position: relative;
  
}

 

/* Flechas de navegación */
.flecha {
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    color: rgb(168, 168, 168);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 24px;
    top: 50%;
    transform: translateY(-50%);
    transition: background 0.3s ease-in-out;
}

.flecha:focus {
    outline: none;
}

.izquierda {
    left: 0px;
}

.derecha {
    right: 0px;
}

.producto-info-single h1{
    font-size: 30px !important;
    
}

.titulo-single-producto{
   
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
     

}

.titulo-single-producto h1{
   
     font-weight: 400 !important;
     font-size: 37px !important;
    

}
/* Diseño responsive */
@media (max-width: 768px) {
 
    .titulo-single-producto h1{
        font-size: 30px !important;
    }
    .producto-single{
        padding: 5px 5px;
    }
}

.custom-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dropdown-button {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fdfdfd;
    color: #555;
    text-align: left;
    cursor: pointer;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 0;
    margin: 5px 0 0;
    z-index: 9999; /* Asegura que esté por encima de otros elementos */
    max-height: 250px; /* Ajusta la altura máxima */
    overflow-y: auto; /* Agrega desplazamiento vertical si es necesario */
}

.dropdown-menu.show {
    display: block;
}

.dropdown-menu li {
    padding: 10px;
    cursor: pointer;
    color: #555;
}

.dropdown-menu li:hover {
    background-color: #f2f3f4 ;
    color: #333;
}

.boton-comprar {
    background-color: #ff6699;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 10px;
}

.boton-comprar:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.boton-comprar:hover:enabled {
    background-color: #ff3366;
}

.relacionados{
    margin-top: 50px;
    margin-bottom: 50px;
}  

    .gallery-grid-clientes-produc {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Columnas flexibles */
        gap: 10px;
        padding: 20px 0;
    }

    .gallery-grid-clientes-produc img {
        width: 100%;
        height: 200px;
        object-fit: cover; /* Evita distorsión */
        border-radius: 10px;
        transition: transform 0.3s ease-in-out;
    }

    .gallery-grid-clientes-produc img:hover {
        transform: scale(1.05); /* Efecto zoom al pasar el mouse */
    }

    @media (max-width: 768px) {
        .gallery-grid-clientes-produc {
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        }
    }
    
    .galeria-de-imagenes{
        max-width: 1200px;
        padding-bottom: 80px;
    }
    
.producto h3 {
    font-weight: normal;
    transition: none;
}

h3 {
    margin: 10px 0;
    font-size: 18px;
    color: #333;
}    
footer h3 {
    letter-spacing: 0.5px;
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 20px;
}    

.gallery-grid .image-box img{
    width: 265px !important;
    height: 265px !important;
}
 
.logo a img{
    width : 250px !important;
    height: 69px !important;
}


.logo-pie{
    width: 200px !important;
    height: 157px !important;
}
.whatspp{
    width: 80px;
    height: 80px;
}
.imagen-redes-exact{
    width: 30px;
    height: 30px;
}