/*

TemplateMo 576 SnapX Photography

https://templatemo.com/tm-576-snapx-photography

*/

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

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
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: 'Roboto', 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;
  color: #2a2a2a;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 28px;
  color: #7a7a7a;
}

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

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Roboto', sans-serif;
}

::selection {
  background: #00bdfe;
  color: #fff;
}

::-moz-selection {
  background: #00bdfe;
  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;
  }
}

.border-button a {
  font-size: 15px;
  color: #00bdfe;
  background-color: transparent;
  border: 1px solid #00bdfe;
  padding: 10px 30px;
  display: inline-block;
  border-radius: 10px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
}

.border-button a:hover {
  background-color: #00bdfe;
  color: #fff;
}

.main-button a {
  font-size: 15px;
  color: #fff;
  background-color: #00bdfe;
  border: 1px solid #00bdfe;
  padding: 10px 30px;
  display: inline-block;
  border-radius: 10px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
}

.main-button a:hover {
  background-color: transparent;
  color: #00bdfe;
}

section {
  margin-top: 120px;
}

.section-heading {
  position: relative;
  z-index: 2;
  margin-top: 0px;
  margin-bottom: 70px;
}

.section-heading h6 {
  font-size: 15px;
  text-transform: uppercase;
  color: #00bdfe;
  font-weight: 400;
}

.section-heading h4 {
  margin-top: 10px;
  line-height: 36px;
  font-size: 30px;
  font-weight: 700;
  text-transform: capitalize;
  color: #212741;
}

.section-heading h4 em {
  color: #00bdfe;
  font-style: normal;
}

.section-heading p {
  margin-top: 30px;
}


/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

.background-header {
  background-color: #fff;
  height: 70px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area {
  background-color: #fff;
  position: absolute;
  height: 70px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
  display: flex
}

.header-area .main-nav .logo {
  margin-top: 9px;
  flex-basis: 20%;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo img {
  max-width: 200px;
}

.background-header .main-nav .logo {
  width: 200px;
}

.header-area .main-nav .nav {
  flex-basis: 60%;
  height: 70px;
  margin-top: 0px;
  margin-right: 0px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.nav {
  justify-content: center;
}

.header-area .main-nav .nav li:first-child {
  padding-left: 60px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 60px;
}

.header-area .main-nav .nav li {
  padding-left: 30px;
  padding-right: 30px;
  background-color: #00bdfe;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 70px;
  line-height: 70px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .border-button {
  flex-basis: 20%;
  margin-top: 13px;
  text-align: right;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover {
  padding-left: 25px !important;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #fff;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #fff;
  opacity: 1;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 2px;
  top: 25px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
   min-width: 180px; /* o más si lo necesitas */
  width: max-content;
  white-space: nowrap;
  background-color: #fff;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 70px;
  border-radius: 0px;
  opacity: 0;
  transition: all .3s;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: #fff;
  color: #00bdfe!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.has-sub ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 17px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #2a2a2a;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #2a2a2a;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #2a2a2a;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #2a2a2a;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #2a2a2a;
}

.header-area.header-sticky {
  min-height: 70px;
}

.header-area.header-sticky .nav li a.active {
  color: #fff;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 10px;
    padding-right: 10px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 995px) {
  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
  }
  .header-area .main-nav .logo {
    position: absolute;
    left: 30px;
    top: 10px;
  }
  .background-header .main-nav .logo {
    top: 0px;
  }
  .background-header .main-nav .border-button {
    top: 0px !important;
  }
  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #00bdfe!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 0px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }
  .background-header.header-sticky .nav {
    margin-top: 70px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
 .header-area .main-nav .nav li a:hover,
  .header-area .main-nav .nav li a:active {
      background: transparent !important;
      color: #00bdfe !important;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: #3B566E;
    right: 30px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}


/*
--------------------------------------------
PopUp Style
--------------------------------------------
*/

#lean_overlay {
  position: fixed;
  z-index: 100;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: #000;
  display: none;
}

section.popupBody {
  margin-top: 0px;
}

.popupContainer {
  position: absolute;
  width: 330px;
  height: auto;
  left: 45%;
  top: 60px;
  background: #FFF;
}

.btn {
  padding: 10px 20px;
  background: #00bdfe;
  color: #fff;
  transition: all .3s;
}

.btn_red {
  background: #00bdfe;
  color: #FFF;
}

.btn:hover {
  background: #E4E4E2;
}

.btn_red:hover {
  color: #2a2a2a;
  background: #E4E4E2;
}

a.btn {
  color: #fff;
  text-align: center;
  text-decoration: none;
}

a.btn_red {
  color: #FFF;
}

.one_half {
  width: 50%;
  display: block;
  float: left;
}

.one_half.last {
  width: 45%;
  margin-left: 5%;
}

.popupHeader {
  font-size: 16px;
  text-transform: uppercase;
}

.popupHeader {
  background: #F4F4F2;
  position: relative;
  padding: 10px 20px;
  border-bottom: 1px solid #DDD;
  font-weight: bold;
}

.popupHeader .modal_close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px 15px;
  background: #00bdfe;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
}

.popupBody {
  padding: 20px;
}

.social_login .social_box {
  display: block;
  clear: both;
  padding: 10px;
  margin-bottom: 10px;
  background: #F4F4F2;
  overflow: hidden;
}

.social_login .icon {
  display: inline-block;
  
  padding: 5px 10px;
  margin-right: 10px;
  float: left;
  color: #FFF;
  font-size: 16px;
  text-align: center;
}

.social_login .fb .icon {
  background: #3B5998;
}

.social_login .google .icon {
  background: #DD4B39;
}

.social_login .icon_title {
  display: block;
  padding: 5px 0;
  float: left;
  font-weight: bold;
  font-size: 16px;
  color: #777;
}

.social_login .social_box:hover {
  background: #E4E4E2;
}

.centeredText {
  color: #afafaf;
  text-align: center;
  margin: 20px 0;
  clear: both;
  overflow: hidden;
  text-transform: capitalize;
}

.user_login label {
  color: #afafaf;
}

.action_btns {
  clear: both;
  overflow: hidden;
}

.action_btns a {
  display: block;
}
/* User Login Form */

.user_login {
  display: none;
}

.user_login label {
  display: block;
  margin-bottom: 5px;
}

.user_login input[type="text"],
.user_login input[type="email"],
.user_login input[type="password"] {
  display: block;
  width: 90%;
  padding: 10px;
  border: 1px solid #DDD;
  color: #666;
}

.user_login input[type="checkbox"] {
  float: left;
  margin-right: 10px;
  width: 22px;
  height: 22px;
}

.user_login input[type="checkbox"]+label {
  float: left;
}

.user_login .checkbox {
  margin-bottom: 10px;
  clear: both;
  overflow: hidden;
}

.forgot_password {
  display: block;
  margin: 20px 0 10px;
  clear: both;
  overflow: hidden;
  text-decoration: none;
  color: #00bdfe;
  transition: all .3s;
}
/* User Register Form */

.user_register {
  display: none;
}

.user_register label {
  color: #afafaf;
  display: block;
  margin-bottom: 5px;
}

.user_register input[type="text"],
.user_register input[type="email"],
.user_register input[type="password"] {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid #DDD;
  color: #666;
}

.user_register input[type="checkbox"] {
  width: 22px;
  height: 22px;
  float: left;
  margin-right: 8px;
}

.user_register input[type="checkbox"]+label {
  float: left;
  color: #afafaf;
}

.user_register .checkbox {
  margin-bottom: 10px;
  clear: both;
  overflow: hidden;
}


/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-image: url(../images/banner-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-top: 120px;
  padding-bottom: 240px;
  text-align: center;
  background-color: #2a2a2a;
}

.main-banner h2 {
  color: #fff;
  font-size: 64px;
  font-weight: 700;
  line-height: 74px;
}

.main-banner h2 em {
  font-style: normal;
  color: #00bdfe;
}

.main-banner p {
  color: #fff;
  padding: 30px 0px;
  margin: 40px 75px 0px 75px;
  border-top: 1px solid rgba(250,250,250,0.2);
}

.main-banner .buttons {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.main-banner .big-border-button a {
  font-size: 20px;
  color: #fff;
  background-color: transparent;
  border: 1px solid #fff;
  padding: 15px 30px;
  display: inline-block;
  border-radius: 10px;
  font-weight: 500;
  margin-right: 15px;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
}

.main-banner .big-border-button a:hover {
  background-color: #fff;
  color: #00bdfe;
}

.main-banner .icon-button a {
  margin-top: 20px;
  display: inline-block;
  margin-left: 15px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  transition: all .3s;
}

.main-banner .icon-button a i {
  margin-right: 6px;
  font-size: 16px;
}

.main-banner .icon-button a:hover {
  color: #00bdfe;
}



/*
---------------------------------------------
featured
---------------------------------------------
*/ 



.featured-items .item .thumb {
  position: relative;
}

.featured-items .item .thumb img {
  border-radius: 15px;
}

.featured-items .item .thumb:hover .hover-effect {
  top: 0;
  opacity: 1;
}

.featured-items .item .thumb .hover-effect {
  background-color: rgba(250,250,250,0.92);
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: absolute;
  opacity: 0;
  transition: all .3s;
}

.featured-items .item .thumb .hover-effect .content {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding: 0px 15px;
}

.featured-items .item .thumb .hover-effect .content h4 {
  font-size: 20px;
  color: #00bdfe;
  margin-bottom: 22px;
}

.featured-items .item .thumb .hover-effect .content h4 i {
  font-size: 14px;
  margin-left: 5px;
  font-weight: 600;
}

.featured-items .item .thumb .hover-effect .content h4 span {
  font-size: 14px;
  font-weight: 500;
  color: #afafaf;
}

.featured-items .item .thumb .hover-effect .content ul li {
  font-size: 15px;
  font-weight: 400;
  color: #afafaf;
  margin-bottom: 7px;
}

.featured-items .item .thumb .hover-effect .content ul li:last-child {
  margin-bottom: 0px;
}

.featured-items .item .thumb .hover-effect .content ul li span {
  color: #2a2a2a;
  font-weight: 500;
}

.featured-items .owl-nav {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-35px);
}

.featured-items .owl-nav .owl-prev {
  position: absolute;
  left: -70px;
}

.featured-items .owl-nav .owl-next {
  position: absolute;
  right: -70px;
}

.featured-items .owl-nav .owl-prev span,
.featured-items .owl-nav .owl-next span  {
  width: 46px;
  height: 46px;
  line-height: 46px;
  font-size: 24px;
  display: inline-block;
  color: #fff;
  background-color: #00bdfe;
  border-radius: 50%;
  opacity: 0.75;
  transition: all .3s;
}

.featured-items .owl-nav .owl-prev span:hover,
.featured-items .owl-nav .owl-next span:hover {
  opacity: 1;
}


/*
---------------------------------------------
popular categories
---------------------------------------------
*/ 

section.popular-categories {
  padding: 0px 65px;
}

section.popular-categories .main-button {
  text-align: right;
}

.popular-item {
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  padding: 30px;
}

.popular-item .top-content {
  display: flex;
  margin-bottom: 30px;
}

.popular-item .icon {
  background-color: #f7f7f7;
  width: 75px;
  height: 75px;
  display: inline-block;
  text-align: center;
  line-height: 75px;
  border-radius: 10px;
  margin-right: 20px;
}

.popular-item .icon img {
  max-width: 36px;
  border-radius: 0px;
}

.popular-item h4 {
  font-size: 20px;
  margin-top: 5px;
  font-weight: 700;
  margin-bottom: 12px;
}

.popular-item span em {
  font-style: normal;
  font-size: 15px;
  font-weight: 500;
  padding: 5px 8px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #00bdfe;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
  margin-right: 10px;
}

.popular-item span {
  color: #afafaf;
  font-weight: 400;
}

.popular-item img {
  border-radius: 15px;
}

.popular-item .thumb {
  position: relative;
  overflow: hidden;
}

.popular-item .thumb span.category {
  font-size: 15px;
  color: #00bdfe;
  background-color: #fff;
  border-radius: 10px;
  font-weight: 500;
  position: absolute;
  left: 15px;
  top: -60px;
  padding: 8px 12px;
  opacity: 0;
  transition: all .3s;
}

.popular-item .thumb span.likes {
  font-size: 15px;
  color: #00bdfe;
  background-color: #fff;
  border-radius: 10px;
  font-weight: 500;
  position: absolute;
  right: 15px;
  top: -60px;
  padding: 8px 12px;
  opacity: 0;
  transition: all .3s;
}

.popular-item .thumb:hover span.category,
.popular-item .thumb:hover span.likes {
  top: 15px;
  opacity: 1;
}

.popular-item .border-button {
  margin-top: 30px;
}

.popular-item .border-button a {
  width: 100%;
  text-align: center;
}


/*
---------------------------------------------
closed contests
---------------------------------------------
*/ 

section.closed-contests {
  background-image: url(../images/closed-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 120px 0px;
}

.closed-item .thumb {
  position: relative;
  overflow: hidden;
}

.closed-item .thumb img {
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}

.closed-item .thumb span.winner {
  font-size: 15px;
  color: #00bdfe;
  background-color: #fff;
  border-radius: 10px;
  font-weight: 500;
  position: absolute;
  left: 15px;
  top: -60px;
  padding: 8px 12px;
  opacity: 0;
  transition: all .3s;
}

.closed-item .thumb span.winner em {
  color: #afafaf;
  font-style: normal;
}

.closed-item .thumb span.price {
  font-size: 15px;
  color: #00bdfe;
  background-color: #fff;
  border-radius: 10px;
  font-weight: 500;
  position: absolute;
  right: 15px;
  top: -60px;
  padding: 8px 12px;
  opacity: 0;
  transition: all .3s;
}

.closed-item .thumb span.price em {
  color: #afafaf;
  font-style: normal;
}

.closed-item .thumb:hover span.price,
.closed-item .thumb:hover span.winner {
  opacity: 1;
  top: 15px;
}

.closed-item .down-content {
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  background-color: #fff;
  padding: 25px 30px;
}

.closed-item .down-content h4.pics {
  text-align: right;
}

.closed-item .down-content h4 {
  font-size: 18px;
  line-height: 32px;
}

.closed-item .down-content h4 span {
  font-size: 15px;
  color: #afafaf;
}

.closed-contests .owl-nav {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-35px);
}

.closed-contests .owl-nav .owl-prev {
  position: absolute;
  left: -70px;
}

.closed-contests .owl-nav .owl-next {
  position: absolute;
  right: -70px;
}

.closed-contests .owl-nav .owl-prev span,
.closed-contests .owl-nav .owl-next span  {
  width: 46px;
  height: 46px;
  line-height: 46px;
  font-size: 24px;
  display: inline-block;
  color: #afafaf;
  background-color: #fff;
  border-radius: 50%;
  transition: all .3s;
}

.closed-contests .owl-nav .owl-prev span:hover,
.closed-contests .owl-nav .owl-next span:hover {
  background-color: #00bdfe;
  color: #fff;
}

.closed-contests .border-button {
  margin-top: 20px;
}


/*
---------------------------------------------
pricing-plans
---------------------------------------------
*/ 

.pricing-item {
  text-align: center;
  padding: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  transition: all .5s;
}

.pricing-item:hover {
  border: 1px solid transparent;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
}

.pricing-item:hover h4 {
  color: #00bdfe;
}

.pricing-item img {
  max-width: 240px;
}

.pricing-item h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 30px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #d4d4d4;
  transition: all .5s;
}

.pricing-item ul li {
  font-size: 15px;
  color: #00bdfe;
  margin-bottom: 10px;
}

.pricing-item ul.first-plan li:nth-child(5),
.pricing-item ul.first-plan li:nth-child(4) {
  color: #afafaf;
  text-decoration: line-through;
}

.pricing-item ul.second-plan li:nth-child(5) {
  color: #afafaf;
  text-decoration: line-through;
}

.pricing-item ul li:last-child {
  margin-bottom: 0px;
}

.pricing-item span.price {
  font-size: 30px;
  color: #00bdfe;
  font-weight: 700;
  display: inline-block;
  margin-top: 30px;
}

.pricing-item .border-button {
  margin-top: 30px;
}


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

footer.no-space {
  margin-top: 0px;
}

footer {
  background-color: #00bdfe;
  text-align: center;
  padding: 25px 0px;
  margin-top: 120px;
}

footer p {
  color: #fff;
  font-weight: 300;
}

footer p a {
  color: #fff;
  font-weight: 500;
}



/* 
---------------------------------------------
page heading
--------------------------------------------- 
*/

.page-heading {
  background-image: url(../images/heading-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-top: 200px;
  padding-bottom: 130px;
  text-align: center;
  background-color: #2a2a2a;
}

.page-heading h2 {
  color: #fff;
  font-size: 64px;
  font-weight: 700;
  line-height: 74px;
}

.page-heading h2.space-need {
  padding: 0px 30px;
}

.page-heading h2 em {
  font-style: normal;
  color: #00bdfe;
}

.page-heading p {
  color: #fff;
  padding: 30px 0px;
  margin: 40px 75px 0px 75px;
  border-top: 2px solid rgba(250,250,250,0.2);
}

.page-heading h6 {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 2px solid rgba(250,250,250,0.2);
  font-size: 20px;
  color: #fff;
}

.page-heading .main-content {
  margin-top: 30px;
}

.page-heading .main-content .days, .page-heading .main-content .hours, .page-heading .main-content .minutes, .page-heading .main-content .seconds {
  width: 20%;
}
.page-heading .main-content .counter div {
  margin: 0 2px;
  display: inline-block;
  text-align: center; 
}
@media (min-width: 995px) {
  .page-heading .main-content .counter div {
    margin: 0px 10px; 
  } 
}
.page-heading .main-content .counter div .value {
  font-size: 50px;
  color: #fff;
  font-weight: 700;
  margin-top: 0px;
  margin-bottom: 10px;
  display: inline-block;
  position: relative; 
}

.page-heading .main-content .counter div span {
  display: block;
  font-size: 15px;
  color: #fff;
  font-weight: 500;
}


/* 
---------------------------------------------
Contests Page
--------------------------------------------- 
*/

#search-form {
  margin-top: -69px;
  background-color: #fff;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

#search-form label {
  font-size: 15px;
  color: #2a2a2a;
  font-weight: 500;
}

#search-form input,
#search-form select {
  background-color: #f7f7f7;
  width: 100%;
  height: 46px;
  border-radius: 10px;
  bordeR: none;
  outline: none;
  padding: 0px 15px;
  font-size: 15px;
  color: #afafaf;
}

#search-form input::placeholder {
  color: #afafaf;
}

#search-form button {
  margin-top: 30px;
  font-size: 15px;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 189, 254);
  border: 1px solid rgb(0, 189, 254);
  padding: 10px 30px;
  display: inline-block;
  border-radius: 10px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all 0.3s ease 0s;
}

#search-form button:hover {
  background-color: transparent;
  color: #00bdfe;
}

.photos-videos .item {
  margin-bottom: 30px;
}

.photos-videos .item .thumb {
  position: relative;
  overflow: hidden;
}

.photos-videos .item .thumb img {
  border-radius: 15px;
}

.photos-videos .item .thumb .play-button a {
  width: 46px;
  height: 46px;
  background-color: #fff;
  border-radius: 50%;
  color: #00bdfe;
  text-align: center;
  line-height: 46px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-23px,-23px);
  opacity: 0;
  transition: all .3s;
}

.photos-videos .item .thumb:hover .play-button a {
  opacity: 1;
}

.photos-videos .item .thumb .top-content {
  position: absolute;
  display: inline-block;
  top: 30px;
  left: 30px;
  right: 30px;
  background-color: #fff;
  border-radius: 10px;
  padding: 15px 25px;
}

.photos-videos .item .thumb .top-content h4 {
  display: inline;
  font-size: 20px;
  font-weight: 700;
}

.photos-videos .item .thumb .top-content h6 {
  display: inline;
  float: right;
  margin-top: 5px;
  color: #afafaf;
  font-weight: 400;
  font-size: 15px;
}

.photos-videos .item .down-content h2 {
  font-size: 20px;
  color: #afafaf;
  font-weight: 700;
  margin-top: 20px;
  margin-left: 30px;
}

.photos-videos .item .down-content h6 {
  text-align: right;
  font-size: 15px;
  color: #00bdfe;
  font-weight: 500;
  margin-top: 24px;
  margin-right: 30px;
}

.contest-win {
  padding: 0px 65px;
}

.contest-win .contest-item {
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  padding: 30px;
}

.contest-win .contest-item .top-content {
  margin-bottom: 30px;
}

.contest-win .contest-item .top-content span.award {
  font-size: 15px;
  color: #fff;
  background-color: #00bdfe;
  border-radius: 10px;
  padding: 8px 12px;;
}

.contest-win .contest-item .top-content span.price {
  float: right;
  font-size: 20px;
  font-weight: 700;
  color: #00bdfe;
}

.contest-win .contest-item h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 25px;
  margin-bottom: 20px;
}

.contest-win .contest-item img {
  border-radius: 15px;
}

.contest-win .contest-item .info {
  display: flex;
  width: 100%;
}

.contest-win .contest-item span.participants {
  font-size: 15px;
  font-weight: 500;
  color: #afafaf;
  flex-basis: 50%;
}

.contest-win .contest-item span.participants img {
  border-radius: 0px;
  max-width: 24px;
  margin-bottom: 8px;
}

.contest-win .contest-item span.submittions {
  font-size: 15px;
  font-weight: 500;
  color: #afafaf;
  flex-basis: 50%;
  display: inline-block;
  text-align: right;
}

.contest-win .contest-item span.submittions img {
  border-radius: 0px;
  max-width: 24px;
  margin-bottom: 8px;
}

.contest-win .contest-item .border-button {
  margin-top: 25px;
  margin-bottom: 20px;
}

.contest-win .contest-item .border-button a {
  width: 100%;
  text-align: center;
}

.contest-win .contest-item span.info {
  font-size: 15px;
  display: inline-block;
  text-align: center;
  color: #afafaf;
}

.contest-win ul.pagination {
  justify-content: center;
  margin-top: 60px;
}

.contest-win ul.pagination li {
  margin: 0px 7px;
}

.contest-win ul.pagination li a {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  border: 1px solid #00bdfe;
  border-radius: 50%;
  color: #00bdfe;
  font-size: 20px;
  font-weight: 600;
}

.contest-win ul.pagination li.active a {
  background-color: #00bdfe;
  color: #fff;
}

.contest-win ul.pagination li:last-child a,
.contest-win ul.pagination li:first-child a {
  border-color: transparent;
}


/* 
---------------------------------------------
Contest Details Page
--------------------------------------------- 
*/

.contest-details .top-content {
  background-color: #e7f9ff;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding: 30px 45px;
  margin-top: -45px;
}

.contest-details .top-content ul {
  text-align: right;
}

.contest-details .top-content ul li {
  display: inline-block;
}

.contest-details .top-content ul li {
  font-size: 18px;
  font-weight: 500;
  color: #00bdfe;
  margin-left: 15px;
}

.contest-details .top-content ul li:first-child {
  margin-left: 0px;
}

.contest-details .top-content ul li span {
  font-size: 15px;
  color: #afafaf;
}

.contest-details .top-content span.open {
  font-size: 15px;
  background-color: #00bdfe;
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  margin-right: 20px;
}

.contest-details .top-content span.wish-list {
  font-size: 15px;
  font-weight: 500;
  color: #00bdfe;
}

.contest-details .top-content span.wish-list i {
  margin-right: 5px;
}

.contest-details .main-content {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 80px 60px;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.06);
}

.contest-details .main-content h4 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 25px;
} 

.contest-details .main-content h6 {
  font-size: 15px;
  font-weight: 600;
}

.contest-details .main-content h6.second-title {
  margin-top: 30px;
}

.contest-details .main-content p {
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  padding-left: 22px;
}

.contest-details .main-content p:before {
  width: 7px;
  height: 7px;
  background-color: #afafaf;
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  border-radius: 50%;
}

.contest-details .main-content h4.second-title {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid #d4d4d4;
}

.contest-details .main-content .item span {
  background-color: #f0f0f0;
  border-radius: 10px;
  font-size: 14px;
  color: #2a2a2a;
  font-weight: 600;
  width: 46px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  margin-right: 15px;
  float: left;
}

.contest-details .main-content .item h5 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}

.contest-details .main-content .item h6 {
  font-size: 15px;
  font-weight: 400;
  color: #afafaf;
}

.contest-details .main-content .main-button {
  margin-top: 60px;
}

.contest-details .main-content .main-button a {
  width: 100%;
  font-size: 20px;
  padding: 15px;
  text-align: center;
}

.contest-waiting h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 35px;
}

.contest-waiting .waiting-item img {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.contest-waiting .waiting-item .down-content {
  background-color: #f7f7f7;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  padding: 25px;
}

.contest-waiting .waiting-item .down-content h4 {
  font-size: 15px;
  color: #00bdfe;
  font-weight: 700;
  margin-bottom: 22px;
}

.contest-waiting .waiting-item .down-content p {
  line-height: 20px;
  margin-bottom: 20px;
}

.contest-waiting .waiting-item .down-content span.price,
.contest-waiting .waiting-item .down-content span.deadline {
  font-size: 15px;
  font-weight: 500;
  color: #afafaf;
}

.contest-waiting .waiting-item .down-content span.deadline {
  float: right;
}

.contest-waiting .waiting-item .down-content span.price em,
.contest-waiting .waiting-item .down-content span.deadline em {
  font-style: normal;
  color: #00bdfe;
}

.contest-waiting ul.pagination {
  justify-content: center;
  margin-top: 60px;
}

.contest-waiting ul.pagination li {
  margin: 0px 7px;
}

.contest-waiting ul.pagination li a {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  border: 1px solid #00bdfe;
  border-radius: 50%;
  color: #00bdfe;
  font-size: 20px;
  font-weight: 600;
}

.contest-waiting ul.pagination li.active a {
  background-color: #00bdfe;
  color: #fff;
}

.contest-waiting ul.pagination li:last-child a,
.contest-waiting ul.pagination li:first-child a {
  border-color: transparent;
}



/* 
---------------------------------------------
Categories Page
--------------------------------------------- 
*/

.top-categories {
  margin-top: -100px;
}

.top-categories .item {
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  padding: 30px;
}

.top-categories .item .icon {
  background-color: #f7f7f7;
  width: 75px;
  height: 75px;
  display: inline-block;
  text-align: center;
  line-height: 75px;
  border-radius: 10px;
}

.top-categories .item .icon img {
  max-width: 36px;
  border-radius: 0px;
}

.top-categories .item h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 10px;
}

.top-categories .item span {
  font-size: 15px;
  color: #afafaf;
  display: block;
}

.top-categories .item span.counter {
  margin-top: 10px;
  font-style: normal;
  font-size: 15px;
  font-weight: 500;
  display: inline-block;
  padding: 5px 8px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #00bdfe;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 6%);
  margin-right: 10px;
}

.featured-contests .item  {
  margin-bottom: 30px;
}

.featured-contests .item .thumb {
  position: relative;
  overflow: hidden;
}

.featured-contests .item .thumb  img {
  border-radius: 15px;
}

.featured-contests .item .hover-effect {
  position: absolute;
  right: -100%;
  bottom: 15px;
  transition: all .5s;
}

.featured-contests .item .thumb:hover .hover-effect {
  right: 15px;
  bottom: 15px;
}

.featured-contests .item .hover-effect .content {
  background-color: #fff;
  border-radius: 15px;
  padding: 25px 20px;
}

.featured-contests .item .hover-effect .content .top-content {
  margin-bottom: 20px;
}

.featured-contests .item .hover-effect .content .top-content span.award {
  font-size: 15px;
  color: #fff;
  background-color: #00bdfe;
  border-radius: 10px;
  padding: 8px 12px;;
}

.featured-contests .item .hover-effect .content .top-content span.price {
  float: right;
  font-size: 20px;
  font-weight: 700;
  color: #00bdfe;
}

.featured-contests .item .hover-effect .content h4 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 25px;
  margin-bottom: 20px;
}

.featured-contests .item .hover-effect .content img {
  border-radius: 15px;
}

.featured-contests .item .hover-effect .content .info {
  display: flex;
  width: 100%;
}

.featured-contests .item .hover-effect .content span.participants {
  font-size: 13px;
  font-weight: 500;
  color: #afafaf;
  flex-basis: 50%;
}

.featured-contests .item .hover-effect .content span.participants img {
  border-radius: 0px;
  max-width: 24px;
  margin-bottom: 8px;
}

.featured-contests .item .hover-effect .content span.submittions {
  font-size: 15px;
  font-weight: 500;
  color: #afafaf;
  flex-basis: 50%;
  display: inline-block;
  text-align: right;
}

.featured-contests .item .hover-effect .content span.submittions img {
  border-radius: 0px;
  max-width: 24px;
  margin-bottom: 8px;
}

.featured-contests .item .hover-effect .content .border-button {
  margin-top: 15px;
  margin-bottom: 0px;
}

.featured-contests .item .hover-effect .content .border-button a {
  width: 100%;
  text-align: center;
  padding: 10px 20px;
}

.featured-contests .item .hover-effect .content span.info {
  font-size: 15px;
  display: inline-block;
  text-align: center;
  color: #afafaf;
}

.testimonials {
  background-color: #f1fbff;
  padding: 120px 0px;
}

.testimonials .item {
  border: 1px solid #e0e0e0; 
  padding: 60px 60px 100px 60px;
  border-radius: 15px;
}

.testimonials .item .content {
  display: flex;
}

.testimonials .item .content .image {
  min-width: 240px;
}

.testimonials .item .content .image img {
  border-radius: 15px;
}

.testimonials .item p {
  font-size: 20px;
  font-weight: 600;
  color: #afafaf;
}

.testimonials .item .content .left-content {
  margin-right: 45px;
}

.testimonials .item .content .left-content h4 {
  display: inline-block;
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid #dfdfdf;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}

.testimonials .item .content .left-content span {
  display: block;
  font-size: 15px;
  color: #afafaf;
}

.testimonials .owl-dots {
  text-align: center;
  margin-top: -70px;
  margin-bottom: 120px;
  position: relative;
  z-index: 555;
}

.testimonials .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  border: 1px solid #afafaf;
  border-radius: 50%;
  margin: 0px 3px;
}

.testimonials .owl-dots .active {
  background-color: #00bdfe;
  border: 1px solid #00bdfe;
}


/* 
---------------------------------------------
Users Page
--------------------------------------------- 
*/

.user-info {
  text-align: center;
  margin-top: -85px;
}

.user-info h4 {
  font-size: 30px;
  font-weight: 700;
  margin-top: 30px;
}

.user-info .avatar img {
  max-width: 170px;
  border-radius: 50%;
  border: 1px solid #afafaf;
}

.user-info .info {
  margin-top: 30px;
  padding: 30px;
  border-radius: 15px;
  border: 1px solid #afafaf;
}

.user-info .info h4 {
  margin-top: 0px;
}

.user-info .info h6 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
}

.user-info .info span {
  font-size: 15px;
  color: #afafaf;
  display: block;
  margin-top: 5px;
}

section.portfolio {
  padding: 80px 0px;
  background-color: #f7f7f7;
}

section.portfolio .thumb {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  margin-bottom: 30px;
}

section.portfolio .thumb:hover .hover-effect {
  opacity: 1;
  visibility: visible;
}

section.portfolio .thumb .hover-effect {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(42, 42, 42, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}

section.portfolio .thumb .hover-effect .content {
  text-align: center;
  padding: 30px;
  display: inline-block;
  width: 100%;
}

section.portfolio .thumb .hover-effect .content h4 {
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 10px;
}

section.portfolio .thumb .hover-effect .content span {
  font-size: 15px;
  color: #fff;
  margin: 10px;
}

section.portfolio .thumb .hover-effect .content span em {
  font-style: normal;
  font-weight: 700;
}

section.portfolio .thumb .hover-effect .content ul {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

section.portfolio .thumb .hover-effect .content ul li {
  display: inline-block;
  margin: 0px 5px;
}

section.portfolio .thumb .hover-effect .content ul li a {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  border-radius: 10px;
  background-color: #fff;
  color: #2a2a2a;
  font-size: 15px;
  transition: all .3s;
}

section.portfolio .thumb .hover-effect .content ul li a:hover {
  background-color: #00bdfe;
  color: #fff;
}

section.portfolio .main-button {
  text-align: center;
  margin-top: 30px;
}

section.contact-us .info-item {
  text-align: center;
  padding: 30px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
  transition: all .5s;
}

section.contact-us .info-item i {
  font-size: 32px;
  background-color: #00bdfe;
  color: #fff;
  width: 80px;
  height: 80px;
  display: inline-block;
  text-align: center;
  line-height: 80px;
  border-radius: 50%;
  margin-bottom: 25px;
}

section.contact-us .info-item h4 {
  font-size: 25px;
  color: #2a2a2a;
  font-weight: 700;
  margin-bottom: 12px;
}

section.contact-us .info-item a {
  font-size: 15px;
  font-weight: 400;
  color: #2a2a2a;
  transition: all 0.3s;
}

section.contact-us .info-item a:hover {
  color: #00bdfe;
}

#contact {
  margin-top: 60px;
}

#contact input {
  width: 100%;
  height: 50px;
  background-color: #f7f7f7;
  color: #2a2a2a;
  border-radius: 5px;
  border: none;
  padding: 0px 15px;
  font-size: 14px;
  outline: none;
  margin-bottom: 30px;
  transition: all .3s;
}

#contact textarea {
  width: 100%;
  height: 180px;
  max-height: 24px;
  min-height: 150px;
  background-color: #f7f7f7;
  color: #2a2a2a;
  border-radius: 10px;
  border: none;
  padding: 15px 15px;
  font-size: 14px;
  outline: none;
  margin-bottom: 30px;
  transition: all .3s;
}

#contact input:focus,
#contact textarea:focus {
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
}

#contact input::placeholder, 
#contact textarea::placeholder {
  color: #212741;
}
#contact button.orange-button {
  font-size: 14px;
  width: 100%;
  text-align: center;
  color: #fff;
  background-color: #00bdfe;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 10px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  border: 1px solid #00bdfe;
  transition: all .3s;
}

#contact button.orange-button:hover {
  background-color: transparent;
  border: 1px solid #00bdfe;
  color: #00bdfe;
}


/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 995px) {
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    display: none;
  }
  .testimonials .item .content {
    display: inline-block;
    text-align: center;
  }
  .testimonials .item .content .image {
    margin-top: 30px;
  }
  .testimonials .item .content .left-content {
    margin-right: 0px;
  }
  .featured-items .owl-nav .owl-next,
  .closed-contests .owl-nav .owl-next {
    right: -10px !important;
  }
  .featured-items .owl-nav .owl-prev,
  .closed-contests .owl-nav .owl-prev {
    left: -10px !important;
  }
}

@media (max-width: 995px) {

  .header-area .main-nav .nav li:last-child {
    padding-right: 15px !important;
  }
  .header-area .main-nav .nav li ul li:first-child {
    padding-left: 0px !important;
  }
  .header-area .main-nav .nav li ul li:last-child {
    padding-right: 0px !important;
  }
  .border-button a {
    font-size: 14px;
    padding: 10px 20px;
  }
  .header-area .main-nav .logo {
    margin-right: 5px;
  }
  .section-heading {
    text-align: center;
  }
  section.popular-categories .main-button {
    text-align: center;
    margin-top: -30px;
  }
  section.popular-categories .popular-item {
    margin-top: 30px;
  }
  .contest-win .contest-item {
    margin-bottom: 30px;
  }
  .contest-details .top-content {
    text-align: center;
  }
  .contest-details .top-content ul {
    text-align: center;
    margin-top: 30px;
  }
  .contest-details .top-content ul li:first-child {
    margin-left: 10px;
  }
  .contest-details .top-content ul li {
    margin: 0px 10px;
  }
  .contest-details .item {
    margin-bottom: 20px;
  }
  .contest-waiting .waiting-item {
    margin-bottom: 30px;
  }
  .top-categories .item,
  section.contact-us .info-item {
    margin-bottom: 15px;
  }
  section.popular-categories,
  .contest-win {
    padding: 0px;
  }
  .pricing-item {
    margin-bottom: 15px;
  }
  .featured-contests .item .hover-effect .content .info {
    display: flex !important;
  }
}


/* ----- TIPOGRAFÍA Y TEXTO ----- */
.section-heading h4 {
  font-size: 32px;
  margin-bottom: 10px;
}

.section-heading p {
  font-size: 18px;
  color: #555;
  max-width: 800px;
  margin: 0 auto 40px;
}

h5 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #2a2a2a;
}

p {
  font-size: 16px;
  color: #444;
}

/* ----- FOOTER ----- */
.footer-extra {
  background-color: #f9f9f9;
  padding: 60px 0 30px;
  margin-top: 40px;
}

.footer-extra h4 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.footer-extra p {
  font-size: 16px;
  color: #555;
  margin-bottom: 10px;
}

.footer-extra a {
  color: #673DE6;
  text-decoration: none;
}

.footer-extra a:hover {
  text-decoration: underline;
}

/* ----- ANIMACIÓN DE ENTRADA ----- */
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.zoom-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.zoom-in.visible {
  opacity: 1;
  transform: scale(1);
}

.header-area {
  z-index: 1000;
  position: relative;
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.efecto-derecha {
  animation: slideInRight 0.6s ease-out;
}

.efecto-izquierda {
  animation: slideInLeft 0.6s ease-out;
}
#valores {
  margin-top: 80px;
}
.header-area,
.header-area .main-nav,
.header-area .main-nav .nav li.has-sub ul.sub-menu {
  z-index: 9999 !important;
}

.header-area {
  position: relative;
  z-index: 9999;
}
.header-area .main-nav .nav li.has-sub ul.sub-menu {
  z-index: 99999;
}

#valores,
.main-banner,
section {
  position: relative;
  z-index: 1;
}

.header-area .main-nav .logo,
.header-area .main-nav .border-button {
  flex-basis: 10%;
}
.header-area .main-nav .nav {
  flex-basis: 80%;
}

.header-area .main-nav .nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.header-area .main-nav .nav li {
  padding-left: 25px;
  padding-right: 25px;
}






@media (max-width: 995px) {
  .header-area .main-nav .nav {
    display: none; /* Oculta el menú normal */
    flex-direction: column;
    background: #fff;
    width: 100%;
  }

  .header-area .main-nav .nav.show {
    display: flex; /* Se mostrará cuando se haga click en el trigger */
  }

  .header-area .menu-trigger {
    display: block; /* Mostrar icono hamburguesa */
  }

  .header-area .main-nav .nav li {
    width: 100%;
    border-bottom: 1px solid #eee;
  }

  .header-area .main-nav .nav li.has-sub > a {
    position: relative;
    padding-right: 40px;
  }

  .header-area .main-nav .nav li.has-sub::after {
    content: "▼";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    pointer-events: none;
  }

  .header-area .main-nav .nav li.has-sub.open ul.sub-menu {
    display: block;
  }

  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    display: none;
    flex-direction: column;
    background-color: #f7f7f7;
  }

  .header-area .main-nav .nav li.has-sub ul.sub-menu li a {
    padding: 10px 20px;
    color: #2a2a2a;
  }
}







@media (max-width: 995px) {
  .main-nav .nav li.has-sub > a {
    font-weight: 600;
    background-color: #e0f7ff;
    position: relative;
  }

  .main-nav .nav li.has-sub.open > a::after {
    content: "▲";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #00bdfe;
  }

  .main-nav .nav li.has-sub > a::after {
    content: "▼";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #00bdfe;
  }

  .main-nav .nav li.has-sub ul.sub-menu {
    background-color: #f3f3f3;
    padding-left: 15px;
    border-left: 2px solid #00bdfe;
  }

  .main-nav .nav li.has-sub ul.sub-menu li a {
    font-size: 14px;
    padding: 10px 20px;
    background-color: transparent;
    color: #333;
  }

  .main-nav .nav li.has-sub ul.sub-menu li a:hover {
    background-color: #e9f7ff;
    color: #00bdfe;
  }
}





















@media (max-width: 995px) {
  .header-area .main-nav .nav.show {
    display: flex;
    position: absolute; /* o fixed, según tu diseño actual */
    top: 30px; /* ajusta según el alto de tu logo */
    z-index: 999;
  }



/* Elementos principales: azul y negrita */
.header-area .main-nav .nav > li > a {
  color: #007BFF; /* azul */
  font-weight: bold;
}

/* Elementos hijos (submenú): negro normal */
.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  color: #000; /* negro */
  font-weight: normal;
}
}










header-area .main-nav {
  background: linear-gradient(90deg, #00bdfe, #007BFF, #00bdfe);
  background-size: 600% 600%;
  animation: gradientMove 10s ease infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}



.header-area .main-nav .nav > li > a {
  position: relative;
  display: inline-block;
  transition: color 0.3s ease;
}

.header-area .main-nav .nav > li > a::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: 10px;
  left: 50%;
  background-color: #fff;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.header-area .main-nav .nav > li > a:hover::after,
.header-area .main-nav .nav > li > a.active::after {
  width: 60%;
}



.header-area .main-nav .nav li {
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.header-area .main-nav .nav li a {
  transition: transform 0.2s ease;
}

.header-area .main-nav .nav li a:hover {
  transform: scale(1.05);
}


.header-area .main-nav .nav li a i {
  margin-right: 8px;
  transition: transform 0.3s ease;
}

.header-area .main-nav .nav li a:hover i {
  transform: rotate(10deg) scale(1.1);
}









































.footer-extra {
  background-color: #f9f9f9;
  padding: 60px 0 30px;
  margin-top: 40px;
}

.footer-extra h4,
.footer-extra p,
.footer-extra a {
  color: #1a237e; /* Azul oscuro (puedes ajustar este tono si quieres otro) */
}

.footer-extra a {
  text-decoration: none;
  font-weight: 500;
}

.footer-extra a:hover {
  text-decoration: underline;
  color: #1a237e; /* Mantiene el mismo tono al pasar el ratón */
}
















@media (max-width: 995px) {
  .header-area .main-nav .logo img {
    max-height: 60px; /* o el valor que se adapte a tu logo */
    width: auto;
  }

  .header-area {
    height: auto !important; /* Permite que crezca si es necesario */
    min-height: 80px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}






@media (max-width: 995px) {

  .header-area .main-nav .nav.show {
    display: flex;
    position: relative;
    top: 0;
    z-index: 1;
  }

  .header-area .main-nav .nav > li > a {
    color: #007BFF;
    font-weight: bold;
  }

  .header-area .main-nav .nav li.has-sub ul.sub-menu li a {
    color: #000;
    font-weight: normal;
  }

  .header-area .main-nav .nav {
    display: none;
    flex-direction: column;
    background: transparent !important;
    width: 100%;
    height: auto;
    flex-basis: 100%;
    float: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }

  .header-area .main-nav .nav.show {
    display: flex;
  }

  .header-area .menu-trigger {
    display: block;
  }

  .header-area .main-nav .nav li {
    width: 100%;
    border-bottom: 1px solid #eee;
  }

  .header-area .main-nav .nav li.has-sub > a {
    position: relative;
    padding-right: 40px;
  }

  .header-area .main-nav .nav li.has-sub::after {
    content: "▼";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    pointer-events: none;
  }

  .header-area .main-nav .nav li.has-sub.open ul.sub-menu {
    display: block;
  }

  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    display: none;
    flex-direction: column;
    background-color: #f7f7f7;
  }

  .header-area .main-nav .nav li.has-sub ul.sub-menu li a {
    padding: 10px 20px;
    color: #2a2a2a;
  }

  .main-nav .nav li.has-sub > a {
    font-weight: 600;
    background-color: #ffffff !important;
    position: relative;
  }

  .main-nav .nav li.has-sub.open > a::after {
    content: "▲";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #00bdfe;
  }

  .main-nav .nav li.has-sub > a::after {
    content: "▼";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #00bdfe;
  }

  .main-nav .nav li.has-sub ul.sub-menu {
    background-color: #f3f3f3;
    padding-left: 15px;
    border-left: 2px solid #00bdfe;
  }

  .main-nav .nav li.has-sub ul.sub-menu li a {
    font-size: 14px;
    padding: 10px 20px;
    background-color: transparent;
    color: #333;
  }

  .main-nav .nav li.has-sub ul.sub-menu li a:hover {
    background-color: #e9f7ff;
    color: #00bdfe;
  }

  .header-area .main-nav .logo {
    position: absolute;
    left: 30px;
    top: 15px;
  }

  .background-header .main-nav .logo {
    top: 0px;
  }

  .background-header .main-nav .border-button {
    top: 0px !important;
  }

  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }

  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #00bdfe !important;
    opacity: 1;
  }

  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }

  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
    height: auto !important;
    min-height: 80px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .header-area .container {
    padding: 0px;
  }

  .header-area .logo {
    margin-left: 0px;
  }

  .header-area .menu-trigger {
    display: block !important;
  }

  .header-area .main-nav {
    overflow: hidden;
  }

  .header-area .main-nav .logo img {
    max-height: 60px;
    width: auto;
  }

  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }

  .testimonials .item .content {
    display: inline-block;
    text-align: center;
  }

  .testimonials .item .content .image {
    margin-top: 30px;
  }

  .testimonials .item .content .left-content {
    margin-right: 0px;
  }

  .featured-items .owl-nav .owl-next,
  .closed-contests .owl-nav .owl-next {
    right: -10px !important;
  }

  .featured-items .owl-nav .owl-prev,
  .closed-contests .owl-nav .owl-prev {
    left: -10px !important;
  }

}


@media (max-width: 991px) {
  .header-area .main-nav .logo img {
    max-height: 60px; /* o el valor que se adapte a tu logo */
    width: auto;
  }

  .header-area {
    height: auto !important; /* Permite que crezca si es necesario */
    min-height: 80px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}






















.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: #2a2a2a;
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  z-index: 99999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  animation: slideUp 0.5s ease;
}

.cookie-banner p {
  margin: 0;
  font-size: 14px;
  flex: 1 1 auto;
}

.cookie-banner a {
  color: #00bdfe;
  text-decoration: underline;
}

.cookie-banner button {
  background-color: #00bdfe;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s;
}

.cookie-banner button:hover {
  background-color: #008ecc;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  } 
  to {
    transform: translateY(0);
    opacity: 1;
  }
}







.icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(0, 123, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.icon-circle:hover {
  transform: scale(1.1);
}

.benefit-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}






















.benefit-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
  border-radius: 1rem;
}
.benefit-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}









@keyframes latido {
  0% { transform: scale(1); }
  50% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

.boton-formulario {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(45deg, #ff416c, #ff4b2b);
  color: white;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 14px 28px;
  border: none;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  animation: latido 2s infinite;
}

.boton-formulario:hover {
  transform: scale(1.15);
  box-shadow: 0 12px 24px rgba(255, 75, 43, 0.5);
  background: linear-gradient(45deg, #ff4b2b, #ff416c);
}


 
/* Hover y resaltado */
.plan-hover {
  cursor: pointer;
  background-color: #f8f9fa;
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.plan-hover:hover {
  background-color: #e0e0e0;
  box-shadow: inset 0 -3px 0 #0d6efd;
  transform: scale(1.03);
}

/* Plan Intermedio más grande */
.plan-destacado {
  background-color: #e7f1ff;
  border: 2px solid #0d6efd;
  transform: scale(1.05);
}
.plan-destacado:hover {
  background-color: #d0e2ff;
}

/* Plan seleccionado */
.seleccionado {
  background-color: #d0e2ff !important;
  animation: resaltado 0.5s ease-in-out;
  transform: scale(1.08);
}

/* Badge */
.badge {
  font-size: 0.75rem;
}

/* Tabla alineada */
.table td, .table th {
  vertical-align: middle;
}
.info-icon {
  font-size: 1rem;
  margin-left: 8px;
  color: #0d6efd;
  cursor: pointer;
}
.info-icon:hover {
  color: #0a58ca;
}
.info-text {
  font-size: 0.9rem;
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 8px;
  margin-top: 8px;
  transition: all 0.3s ease;
}
/* Animación de fondo */
@keyframes resaltado {
  0% { background-color: #bcd4ff; }
  100% { background-color: #d0e2ff; }
}

/* Formulario oculto inicialmente */
#formularioSuscripcion { display: none; }



select:disabled {
  background-color: #eee;
  cursor: not-allowed;
}




.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.loader-content {
  text-align: center;
}

.pulse-loader {
  width: 60px;
  height: 60px;
  background: #007bff;
  border-radius: 50%;
  animation: pulse 1.2s infinite ease-in-out;
  margin: 0 auto;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

.loader-text {
  margin-top: 20px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #007bff;
  animation: fadeIn 1.2s infinite alternate;
}

@keyframes fadeIn {
  from { opacity: 0.6; }
  to { opacity: 1; }
}






.fade-in-formulario {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-formulario.visible {
  opacity: 1;
  transform: translateY(0);
}





/* Formulario 2 de Planes.html */



/* Más friendly, limpio y claro */
#formularioSuscripcion .card {
  background: #fafcff;
  border-radius: 18px;
  border: 1px solid #e9ecef;
  box-shadow: 0 3px 24px #e3e9ef66;
}

#formularioSuscripcion input.form-control, 
#formularioSuscripcion textarea.form-control, 
#formularioSuscripcion select.form-select {
  border-radius: 10px;
  min-height: 42px;
  transition: border 0.2s, box-shadow 0.2s;
  border: 1.3px solid #dde7f1;
}

#formularioSuscripcion input.form-control:focus, 
#formularioSuscripcion textarea.form-control:focus, 
#formularioSuscripcion select.form-select:focus {
  border: 1.5px solid #2bb24c;
  box-shadow: 0 1px 6px #b6f3d0;
  background: #f6fff9;
}

#formularioSuscripcion .form-check-input:checked {
  background-color: #2bb24c;
  border-color: #2bb24c;
}

#formularioSuscripcion ul.list-group {
  background: #f6f7fb;
  border: none;
  margin-bottom: 0;
}

#formularioSuscripcion .list-group-item {
  border: none !important;
  background: transparent;
  font-size: 1.03em;
  padding-left: 0.75em;
  padding-right: 0.75em;
}


#utilidades { margin-bottom: 80px; padding-bottom: 20px; }



.plan-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none; /* evita clicks */
    user-select: none;
  }
  
  
  /* ============================================================
   MOBILE < 995px — Versión UNIFICADA, ORDENADA y OPTIMIZADA
   ============================================================ */
@media (max-width: 995px) {

  /* ------------------ HEADER GENERAL ------------------ */
  .header-area {
    background-color: #f7f7f7;
    padding: 10px 15px;
    height: auto !important;
    min-height: 80px;
    box-shadow: none;
    text-align: center;
  }

  .header-area .container {
    padding: 0px;
  }

  .header-area .logo {
    margin-left: 0px;
    position: absolute;
    left: 30px;
    top: 5px;
  }

  .header-area .main-nav .logo img {
    max-height: 200px;
    width: auto;
  }

  .background-header .main-nav .logo,
  .background-header .main-nav .border-button {
    top: 0px !important;
  }

  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }

  .header-area .menu-trigger {
    display: block !important;
  }

  .header-area .main-nav {
    overflow: hidden;
  }

  /* ------------------ MENÚ PRINCIPAL ------------------ */
  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
    float: none;
    width: 100%;
    display: none;   /* escondido por defecto */
    flex-direction: column;
    background: transparent !important;
    margin-left: 0px;
    transition: all 0s ease 0s;
  }

  /* Se muestra cuando el JS activa .show */
  .header-area .main-nav .nav.show {
    display: flex;
    position: relative;
    top: 0;
    z-index: 1;
  }

  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }

  .background-header.header-sticky .nav {
    margin-top: 70px !important;
  }

  /* ------------------ ITEMS DEL MENÚ ------------------ */
  .header-area .main-nav .nav li {
    width: 100%;
    background: transparent !important;
    border-bottom: 1px solid #eee;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }

  /* Enlaces principales */
  .header-area .main-nav .nav > li > a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #007BFF !important;   /* azul */
    font-weight: bold;
  }

  .header-area .main-nav .nav li a:hover {
    background: #00BDFE;
    color: #00bdfe !important;
  }

  /* ------------------ SUBMENÚ ------------------ */
  .header-area .main-nav .nav li.has-sub {
    position: relative;
  }

  .header-area .main-nav .nav li.has-sub > a {
    font-weight: 600;
    background-color: #ffffff !important;
    padding-right: 40px;
  }

  /* Flechas ▼ y ▲ */
  .main-nav .nav li.has-sub > a::after {
    content: "▼";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #00bdfe;
  }

  .main-nav .nav li.has-sub.open > a::after {
    content: "▲";
  }

  /* Contenedor del submenú */
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    display: none;
    flex-direction: column;
    background-color: #f3f3f3;
    padding-left: 15px;
    border-left: 2px solid #00bdfe;
  }

  /* Cuando está abierto */
  .header-area .main-nav .nav li.has-sub.open ul.sub-menu {
    display: block;
  }

  /* Elementos del submenú */
  .header-area .main-nav .nav li.has-sub ul.sub-menu li a {
    font-size: 14px;
    padding: 10px 20px;
    background-color: transparent;
    color: #000;   /* negro */
    font-weight: normal;
  }

  .header-area .main-nav .nav li.has-sub ul.sub-menu li a:hover {
    background-color: transparent !important;
    color: #00bdfe;
  }

  /* ------------------ STICKY ------------------ */
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #00bdfe !important;
    opacity: 1;
  }

  /* ------------------ TESTIMONIALS ------------------ */
  .testimonials .item .content {
    display: inline-block;
    text-align: center;
  }

  .testimonials .item .content .image {
    margin-top: 30px;
  }

  .testimonials .item .content .left-content {
    margin-right: 0px;
  }

  /* ------------------ OWL NAV ------------------ */
  .featured-items .owl-nav .owl-next,
  .closed-contests .owl-nav .owl-next {
    right: -10px !important;
  }

  .featured-items .owl-nav .owl-prev,
  .closed-contests .owl-nav .owl-prev {
    left: -10px !important;
  }
 /* Barra azul debajo del texto del elemento de menú activo en móvil */
  .header-area .main-nav .nav > li > a {
    position: relative; /* necesario para posicionar la barra */
    overflow: hidden;   /* por si acaso, para que no se salga nada */
  }

  .header-area .main-nav .nav > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 6px;              /* ajusta la separación respecto al texto */
    width: 0;
    height: 3px;
    background-color: #00bdfe;
    border-radius: 999px;
    transition: width 0.25s ease;
  }

  /* Cuando el enlace está activo o en hover → barra visible */
  .header-area .main-nav .nav > li > a.active::after,
  .header-area .main-nav .nav > li > a:hover::after {
    width: 40%;   /* ajusta el ancho de la barra a tu gusto (40–80%) */
  }

  /* Miniaturas */
  .miniatura-ejemplo {
    max-height: 260px;
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }

  /* Hover elegante */
  .card:hover .miniatura-ejemplo {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(33, 114, 228, 0.35); /* sombra azul suave */
  }

  /* Etiqueta superior */
  .etiqueta-img {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.85);
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1d;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    backdrop-filter: blur(4px);
  }

  /* Contenedor de imagen */
  .contenedor-img-hover {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
  }


}
.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.no-spin {
  -moz-appearance: textfield;
}













@media (max-width: 995px) {

  /* Flecha del desplegable: se queda en ::after */
  .main-nav .nav li.has-sub > a::after {
    content: "▼";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #00bdfe;
  }
  .main-nav .nav li.has-sub.open > a::after { content: "▲"; }

  /* Barrita inferior SOLO para los LI que NO son has-sub */
  .header-area .main-nav .nav > li:not(.has-sub) > a {
    position: relative;
  }

  .header-area .main-nav .nav > li:not(.has-sub) > a::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 6px;
    width: 0;
    height: 3px;
    background-color: #00bdfe;
    border-radius: 999px;
    transition: width 0.25s ease;
  }

  .header-area .main-nav .nav > li:not(.has-sub) > a.active::before,
  .header-area .main-nav .nav > li:not(.has-sub) > a:hover::before {
    width: 40%;
  }
}



@media (max-width: 995px) {
  .header-area .main-nav .nav li.has-sub > a {
    background-color: transparent !important;
    font-weight: bold; /* igual que el resto */
  }
}

















/* =========================
   MENÚ DESKTOP: hover distinto + sin subrayado fijo
   (Pegar al FINAL del CSS)
   ========================= */

/* Asegura que NO haya subrayado real */
.header-area .main-nav .nav > li > a {
  text-decoration: none !important;
}

/* Fondo normal del item (ya lo tenías, lo dejo explícito) */
.header-area .main-nav .nav > li {
  background-color: #00bdfe;
  transition: background-color .25s ease, transform .2s ease, box-shadow .25s ease;
  border-radius: 10px;
}

/* Hover: fondo distinto (más oscuro) */
.header-area .main-nav .nav > li:hover {
  background-color: #008ecc; /* cambia este tono si quieres */
}

























/* FIX DEFINITIVO: en móvil, ::after es SOLO la flecha.
   La barrita (hover/active) va en ::before y NO se aplica a has-sub */
@media (max-width: 995px) {



  /* 2) Flecha SOLO para los desplegables */
  .header-area .main-nav .nav li.has-sub > a::after {
    content:  none !important;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #00bdfe;
  }
  .header-area .main-nav .nav li.has-sub.open > a::after {
    content: "▲" !important;
  }

  /* 3) Barrita SOLO para items que NO son desplegables */
  .header-area .main-nav .nav > li:not(.has-sub) > a {
    position: relative;
  }
  .header-area .main-nav .nav > li:not(.has-sub) > a::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 6px;
    width: 0;
    height: 3px;
    background-color: #00bdfe;
    border-radius: 999px;
    transition: width 0.25s ease;
  }
  .header-area .main-nav .nav > li:not(.has-sub) > a:hover::before,
  .header-area .main-nav .nav > li:not(.has-sub) > a.active::before {
    width: 40%;
  }
}
















    /* ===== Mejoras visuales SIN romper tu CSS global ===== */

    /* HERO (mensaje principal) */
    .about-hero {
      margin-top: 120 !important;
      padding-top: 200px;
      padding-bottom: 140px;
      text-align: center;
      color: #fff;
      background:
        radial-gradient(900px 280px at 15% 15%, rgba(0,189,254,.20), transparent 60%),
        radial-gradient(700px 260px at 85% 30%, rgba(0,123,255,.18), transparent 55%),
        linear-gradient(135deg, #0b2230 0%, #102f42 40%, #0f2027 100%);
      position: relative;
      overflow: hidden;
    }

    .about-hero h2 {
      color: #fff;
      font-size: 56px;
      font-weight: 800;
      line-height: 1.12;
      margin-bottom: 14px;
    }
    .about-hero h2 em { font-style: normal; color: #00bdfe; }

    .about-hero .hero-subtitle {
      color: rgba(255,255,255,.92);
      font-size: 19px;
      max-width: 980px;
      margin: 0 auto;
      padding-top: 18px;
      border-top: 1px solid rgba(250,250,250,0.18);
    }

    .about-hero .hero-subtitle strong { color: #fff; }

    .about-hero .buttons {
      margin-top: 26px;
      display: flex;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .about-hero .big-border-button a {
      font-size: 18px;
      color: #fff;
      background-color: transparent;
      border: 1px solid rgba(255,255,255,.75);
      padding: 13px 22px;
      display: inline-block;
      border-radius: 12px;
      font-weight: 700;
      letter-spacing: 0.3px;
      transition: all .25s ease;
      text-decoration: none;
    }
    .about-hero .big-border-button a:hover {
      background-color: #fff;
      color: #00bdfe;
      transform: translateY(-2px);
    }

    .about-hero .icon-button {
      margin-top: 16px;
      display: flex;
      justify-content: center;
      gap: 18px;
      flex-wrap: wrap;
    }
    .about-hero .icon-button a {
      color: #fff;
      font-weight: 650;
      transition: all .25s ease;
      opacity: .92;
      text-decoration: none;
    }
    .about-hero .icon-button a:hover { color: #00bdfe; opacity: 1; }

    /* Tarjetas */
    .benefit-card {
      transition: transform .3s ease, box-shadow .3s ease;
      background: #fff;
      border-radius: 1rem;
    }
    .benefit-card:hover {
      transform: translateY(-6px) scale(1.01);
      box-shadow: 0 14px 30px rgba(0,0,0,.12);
    }

    .icon-circle {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(0, 123, 255, 0.10);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .3s ease;
    }
    .benefit-card:hover .icon-circle { transform: scale(1.08); }

    .highlight {
      border-radius: 16px;
      background: linear-gradient(180deg, #ffffff, #f7fbff);
      transition: transform .28s ease, box-shadow .28s ease;
    }
    .highlight:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 44px rgba(0,0,0,.12);
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      max-width: 980px;
      margin: 12px auto 0;
    }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid rgba(0,0,0,.06);
      box-shadow: 0 8px 18px rgba(0,0,0,.06);
      font-weight: 650;
      color: #2a2a2a;
      transition: transform .25s ease;
    }
    .chip i { color: #00bdfe; }
    .chip:hover { transform: translateY(-3px); }

    /* Antes vs Ahora */
    .compare-card {
      background: #fff;
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 16px;
      padding: 18px 18px;
      height: 100%;
      box-shadow: 0 10px 22px rgba(0,0,0,.06);
    }
    .compare-card h6 {
      font-weight: 800;
      margin-bottom: 10px;
    }
    .compare-list {
      list-style: none;
      padding-left: 0;
      margin: 0;
    }
    .compare-list li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 7px 0;
      border-top: 1px dashed rgba(0,0,0,.08);
    }
    .compare-list li:first-child { border-top: 0; padding-top: 0; }

    /* Pasos */
    .step-card {
      background: #fff;
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 16px;
      padding: 18px 18px;
      height: 100%;
      box-shadow: 0 10px 22px rgba(0,0,0,.06);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .step-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 34px rgba(0,0,0,.12);
    }
    .step-num {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: rgba(0,189,254,.14);
      color: #00bdfe;
      font-weight: 900;
      margin-bottom: 10px;
    }

    /* CTA botón */
    @keyframes latido {
      0% { transform: scale(1); }
      50% { transform: scale(1.07); }
      100% { transform: scale(1); }
    }
    .boton-formulario {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(45deg, #00bdfe, #007BFF);
      color: white;
      font-size: 1.05rem;
      font-weight: 900;
      padding: 14px 26px;
      border: none;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: .6px;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 10px 18px rgba(0, 123, 255, 0.25);
      transition: all .3s ease;
      animation: latido 2.2s infinite;
    }
    .boton-formulario:hover {
      transform: scale(1.10);
      box-shadow: 0 16px 28px rgba(0, 123, 255, 0.45);
      color: #fff;
    }

    @media (max-width: 995px) {
      .about-hero { padding-top: 170px; padding-bottom: 110px; }
      .about-hero h2 { font-size: 38px; }
      .about-hero .hero-subtitle { margin: 0 16px; }
    }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

    /* ===== Mejoras visuales SIN romper tu CSS global ===== */

    /* HERO (sin tocar main-banner global) */
    .offer-hero {
     margin-top: 120px;  
      padding-top: 120px;
      padding-bottom: 160px;
      text-align: center;
      color: #fff;
      background:
        radial-gradient(900px 280px at 12% 18%, rgba(0,189,254,.22), transparent 60%),
        radial-gradient(700px 260px at 88% 30%, rgba(0,123,255,.18), transparent 55%),
        linear-gradient(135deg, #0b2230 0%, #102f42 40%, #0f2027 100%);
      position: relative;
      overflow: hidden;
    }

    .offer-hero h1{
      color:#fff;
      font-size:58px;
      font-weight:900;
      line-height:1.12;
      margin-bottom: 14px;
    }
    .offer-hero h1 em{ font-style:normal; color:#00bdfe; }

    .offer-hero p{
      color: rgba(255,255,255,.92);
      font-size: 18px;
      max-width: 980px;
      margin: 18px auto 0;
      padding: 18px 0 0;
      border-top: 1px solid rgba(250,250,250,.18);
    }

    .hero-badges{
      margin-top: 18px;
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:10px;
    }
    .badge-pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border-radius:999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.16);
      backdrop-filter: blur(6px);
      font-weight: 700;
      color:#fff;
    }
    .badge-pill i{ color:#00bdfe; }

    .hero-cta{
      margin-top: 26px;
      display:flex;
      justify-content:center;
      gap:12px;
      flex-wrap:wrap;
    }
    .hero-cta .big-border-button a{
      font-size: 18px;
      color: #fff;
      background-color: transparent;
      border: 1px solid rgba(255,255,255,.78);
      padding: 13px 22px;
      display: inline-block;
      border-radius: 12px;
      font-weight: 700;
      letter-spacing: .3px;
      transition: all .25s ease;
    }
    .hero-cta .big-border-button a:hover{
      background-color:#fff;
      color:#00bdfe;
      transform: translateY(-2px);
    }

    /* Barra de confianza (más “card” y consistente) */
    .trust-strip{
        
      margin-top: -80px;
      position: relative;
      z-index: 3;
    }
    .trust-card{
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 18px 40px rgba(0,0,0,.12);
      border: 1px solid rgba(0,0,0,.06);
      padding: 18px 12px;
    }
    .trust-item{
      padding: 10px 10px;
      border-radius: 14px;
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .trust-item:hover{
      transform: translateY(-4px);
      box-shadow: 0 10px 22px rgba(0,0,0,.10);
    }
    .trust-item i{
      font-size: 34px;
    }

    /* Secciones */
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(0,189,254,.10);
      color:#0b4f6c;
      font-weight: 800;
      letter-spacing: .3px;
    }
    .section-kicker i{ color:#00bdfe; }

    /* Filas de contenido -> cards más limpias */
    .feature-card{
      background:#fff;
      border:1px solid rgba(0,0,0,.06);
      border-radius: 18px;
      padding: 22px 20px;
      box-shadow: 0 12px 26px rgba(0,0,0,.06);
      transition: transform .25s ease, box-shadow .25s ease;
      height: 100%;
    }
    .feature-card:hover{
      transform: translateY(-5px);
      box-shadow: 0 18px 40px rgba(0,0,0,.12);
    }
    .icon-circle{
      width: 62px;
      height: 62px;
      border-radius: 16px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(0,189,254,.12);
      margin-bottom: 12px;
      transition: transform .25s ease;
    }
    .feature-card:hover .icon-circle{ transform: scale(1.06); }
    .icon-circle i{ color:#00bdfe; font-size: 26px; }

    .feature-title{
      font-weight: 900;
      margin-bottom: 8px;
    }
    .feature-sub{
      margin:0;
      color:#2a2a2a;
    }

    /* Imagenes con marco suave */
    .img-soft{
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,.06);
      box-shadow: 0 12px 30px rgba(0,0,0,.08);
      max-width: 100%;
      height: auto;
    }

    /* Bloque destacado tipo “quote” */
    .highlight{
      border-radius: 18px;
      background: linear-gradient(180deg, #ffffff, #f7fbff);
      border: 1px solid rgba(0,0,0,.06);
      box-shadow: 0 14px 34px rgba(0,0,0,.08);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .highlight:hover{
      transform: translateY(-4px);
      box-shadow: 0 18px 44px rgba(0,0,0,.12);
    }

    /* Pasos “Cómo funciona” */
    .step-card{
      background:#fff;
      border:1px solid rgba(0,0,0,.06);
      border-radius: 18px;
      padding: 18px 18px;
      height: 100%;
      box-shadow: 0 10px 22px rgba(0,0,0,.06);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .step-card:hover{
      transform: translateY(-5px);
      box-shadow: 0 16px 34px rgba(0,0,0,.12);
    }
    .step-num{
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display:grid;
      place-items:center;
      background: rgba(0,189,254,.14);
      color:#00bdfe;
      font-weight: 900;
      margin-bottom: 10px;
    }

    /* CTA botón “boton-formulario” (consistente con tu estilo) */
    @keyframes latido {
      0% { transform: scale(1); }
      50% { transform: scale(1.07); }
      100% { transform: scale(1); }
    }
    .boton-formulario{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background: linear-gradient(45deg, #00bdfe, #007BFF);
      color:#fff;
      font-size: 1.05rem;
      font-weight: 900;
      padding: 14px 26px;
      border: none;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: .6px;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 10px 18px rgba(0,123,255,.25);
      transition: all .3s ease;
      animation: latido 2.2s infinite;
    }
    .boton-formulario:hover{
      transform: scale(1.08);
      box-shadow: 0 16px 28px rgba(0,123,255,.45);
      color:#fff;
    }

    /* Responsive */
    @media (max-width: 995px){
      .offer-hero{ padding-top: 170px; padding-bottom: 100px; }
      .offer-hero h1{ font-size: 38px; }
      .trust-strip{ margin-top: -26px; }
    }







































    /* ========= Estilos solo para esta página ========= */

    .about-hero{
      padding-top:120px;
      padding-bottom:120px;
      color:#fff;
      text-align:center;
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(900px 280px at 15% 20%, rgba(0,189,254,.20), transparent 60%),
        radial-gradient(700px 260px at 85% 30%, rgba(0,123,255,.18), transparent 55%),
        linear-gradient(135deg, #0b2230 0%, #102f42 40%, #0f2027 100%);
    }

    .hero-badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(6px);
      font-weight:700;
      letter-spacing:.2px;
      margin-bottom:16px;
    }
    .hero-badge i{ color:#00bdfe; }

    .about-hero h1{
      font-size:58px;
      font-weight:900;
      line-height:1.1;
      margin:0;
      color:#fff;
    }
    .about-hero h1 em{
      font-style:normal;
      color:#00bdfe;
    }

    .hero-subtitle{
      max-width:980px;
      margin:22px auto 0;
      font-size:18px;
      color:rgba(255,255,255,.92);
      border-top:1px solid rgba(255,255,255,.18);
      padding-top:22px;
    }

    .hero-cta{
      margin-top:26px;
      display:flex;
      justify-content:center;
      gap:14px;
      flex-wrap:wrap;
    }

    .big-border-button a{
      font-size:18px;
      color:#fff;
      background:transparent;
      border:1px solid rgba(255,255,255,.75);
      padding:13px 22px;
      display:inline-block;
      border-radius:12px;
      font-weight:700;
      letter-spacing:.2px;
      transition: all .25s ease;
    }
    .big-border-button a:hover{
      background:#fff;
      color:#00bdfe;
      transform:translateY(-2px);
    }

    .hero-links{
      margin-top:18px;
      display:flex;
      justify-content:center;
      gap:18px;
      flex-wrap:wrap;
      opacity:.95;
    }
    .hero-links a{
      color:#fff;
      font-weight:700;
      transition: all .25s ease;
    }
    .hero-links a:hover{ color:#00bdfe; }

    /* Cards */
    .benefit-card{
      transition: transform .3s ease, box-shadow .3s ease;
      background:#fff;
      border-radius:16px;
      border:1px solid rgba(0,0,0,.06);
      box-shadow: 0 10px 22px rgba(0,0,0,.06);
    }
    .benefit-card:hover{
      transform: translateY(-6px);
      box-shadow: 0 16px 34px rgba(0,0,0,.12);
    }

    .icon-circle{
      width:80px;
      height:80px;
      border-radius:50%;
      background: rgba(0, 123, 255, 0.10);
      display:flex;
      align-items:center;
      justify-content:center;
      transition: transform .25s ease;
    }
    .benefit-card:hover .icon-circle{ transform: scale(1.06); }

    /* Chips */
    .chips{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:10px;
      margin-top:14px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border-radius:999px;
      background:#fff;
      border:1px solid rgba(0,0,0,.06);
      box-shadow: 0 8px 18px rgba(0,0,0,.06);
      font-weight:800;
      color:#2a2a2a;
      transition: transform .2s ease;
    }
    .chip i{ color:#00bdfe; }
    .chip:hover{ transform: translateY(-3px); }

    /* Compare */
    .compare-card{
      background:#fff;
      border:1px solid rgba(0,0,0,.06);
      border-radius:16px;
      padding:18px 18px;
      height:100%;
      box-shadow: 0 10px 22px rgba(0,0,0,.06);
    }
    .compare-card h6{
      font-weight:900;
      margin-bottom:12px;
    }
    .compare-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:10px;
    }
    .compare-list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
    }
    .compare-list i{
      width:22px;
      margin-top:2px;
    }

    /* Steps */
    .step-card{
      background:#fff;
      border:1px solid rgba(0,0,0,.06);
      border-radius:16px;
      padding:18px;
      height:100%;
      box-shadow:0 10px 22px rgba(0,0,0,.06);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .step-card:hover{
      transform: translateY(-5px);
      box-shadow:0 16px 34px rgba(0,0,0,.12);
    }
    .step-num{
      width:44px;
      height:44px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background: rgba(0,189,254,.14);
      color:#00bdfe;
      font-weight:900;
      margin-bottom:10px;
    }

    /* CTA button */
    @keyframes latido{
      0%{ transform:scale(1); }
      50%{ transform:scale(1.06); }
      100%{ transform:scale(1); }
    }
    .boton-formulario{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background: linear-gradient(45deg, #00bdfe, #007BFF);
      color:#fff;
      font-size:1.05rem;
      font-weight:900;
      padding:14px 26px;
      border:none;
      border-radius:999px;
      text-transform:uppercase;
      letter-spacing:.6px;
      cursor:pointer;
      text-decoration:none;
      box-shadow:0 10px 18px rgba(0, 123, 255, 0.25);
      transition: all .3s ease;
      animation: latido 2.2s infinite;
    }
    .boton-formulario:hover{
      transform: scale(1.08);
      box-shadow:0 16px 28px rgba(0, 123, 255, 0.45);
      color:#fff;
    }

    .soft-divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(0,0,0,.10), transparent);
      margin:26px 0;
    }

    @media (max-width: 995px){
      .about-hero{ padding-top:170px; padding-bottom:100px; }
      .about-hero h1{ font-size:38px; }
      .hero-subtitle{ margin-left:16px; margin-right:16px; }
    }
.badge-pt {
  margin-top: 100px; /* ajusta a tu gusto */
}

 /* ===== FAQ (mejorado) ===== */
  .faq-accordion{
    --faq-radius: 16px;
    --faq-border: rgba(0,0,0,.08);
    --faq-shadow: 0 10px 28px rgba(0,0,0,.06);
    --faq-shadow-hover: 0 14px 34px rgba(0,0,0,.10);
  }

  .faq-accordion .accordion-item{
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius);
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: var(--faq-shadow);
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  .faq-accordion .accordion-item:hover{
    transform: translateY(-2px);
    box-shadow: var(--faq-shadow-hover);
    border-color: rgba(0,0,0,.12);
  }

  .faq-accordion .accordion-header{
    margin: 0;
  }

  /* Botón */
  .faq-accordion .accordion-button{
    position: relative;
    padding: 18px 18px 18px 56px;  /* espacio para icono */
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.2px;
    background: #fff;
  }

  /* Icono a la izquierda (FontAwesome ya lo tienes) */
  .faq-accordion .accordion-button::before{
    content: "\f059"; /* fa-circle-question */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    opacity: .85;
  }

  /* Quitar el brillo feo al focus */
  .faq-accordion .accordion-button:focus{
    box-shadow: none;
  }

  /* Estado abierto */
  .faq-accordion .accordion-button:not(.collapsed){
    background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
    color: inherit;
  }

  /* Chevron más suave */
  .faq-accordion .accordion-button::after{
    opacity: .75;
    transform: scale(.95);
  }
  .faq-accordion .accordion-button:not(.collapsed)::after{
    opacity: 1;
  }

  /* Cuerpo */
  .faq-accordion .accordion-body{
    padding: 0 18px 18px 56px;
    color: rgba(0,0,0,.75);
    line-height: 1.65;
    font-size: 1.02rem;
  }

  /* Una “barra” sutil que conecta pregunta/respuesta */
  .faq-accordion .accordion-body{
    position: relative;
  }
  .faq-accordion .accordion-body::before{
    content: "";
    position: absolute;
    left: 26px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(0,0,0,.06);
    border-radius: 999px;
  }

  /* Animación del collapse un poco más agradable */
  .faq-accordion .accordion-collapse{
    transition: height .25s ease;
  }

  /* Ajustes móviles */
  @media (max-width: 576px){
    .faq-accordion .accordion-button{
      padding: 16px 16px 16px 48px;
      font-size: 1rem;
    }
    .faq-accordion .accordion-button::before{
      left: 14px;
    }
    .faq-accordion .accordion-body{
      padding: 0 16px 16px 48px;
      font-size: .98rem;
    }
    .faq-accordion .accordion-body::before{
      left: 22px;
    }
  }
/* ===== FAQ (mejorado) ===== */
  .faq-accordion{
    --faq-radius: 16px;
    --faq-border: rgba(0,0,0,.08);
    --faq-shadow: 0 10px 28px rgba(0,0,0,.06);
    --faq-shadow-hover: 0 14px 34px rgba(0,0,0,.10);
  }

  .faq-accordion .accordion-item{
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius);
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: var(--faq-shadow);
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  .faq-accordion .accordion-item:hover{
    transform: translateY(-2px);
    box-shadow: var(--faq-shadow-hover);
    border-color: rgba(0,0,0,.12);
  }

  .faq-accordion .accordion-header{ margin: 0; }

  .faq-accordion .accordion-button{
    position: relative;
    padding: 18px 18px 18px 56px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.2px;
    background: #fff;
  }

  .faq-accordion .accordion-button::before{
    content: "\f059"; /* fa-circle-question */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    opacity: .85;
  }

  .faq-accordion .accordion-button:focus{ box-shadow: none; }

  .faq-accordion .accordion-button:not(.collapsed){
    background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
    color: inherit;
  }

  .faq-accordion .accordion-button::after{
    opacity: .75;
    transform: scale(.95);
  }
  .faq-accordion .accordion-button:not(.collapsed)::after{ opacity: 1; }

  .faq-accordion .accordion-body{
    padding: 0 18px 18px 56px;
    color: rgba(0,0,0,.75);
    line-height: 1.65;
    font-size: 1.02rem;
    position: relative;
  }

  .faq-accordion .accordion-body::before{
    content: "";
    position: absolute;
    left: 26px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(0,0,0,.06);
    border-radius: 999px;
  }

  @media (max-width: 576px){
    .faq-accordion .accordion-button{
      padding: 16px 16px 16px 48px;
      font-size: 1rem;
    }
    .faq-accordion .accordion-button::before{ left: 14px; }
    .faq-accordion .accordion-body{
      padding: 0 16px 16px 48px;
      font-size: .98rem;
    }
    .faq-accordion .accordion-body::before{ left: 22px; }
  }
  
  /* ===== FAQ: título + icono en azul ===== */
.faq-accordion .accordion-button {
  color: #0d6efd;              /* Azul Bootstrap */
}

/* Icono de la pregunta */
.faq-accordion .accordion-button::before {
  color: #0d6efd;
}

/* Mantener el azul cuando está abierta */
.faq-accordion .accordion-button:not(.collapsed) {
  color: #0d6efd;
}
.faq-accordion .accordion-button:not(.collapsed)::before {
  color: #0d6efd;
}

/* Hover más oscuro (opcional, queda muy fino) */
.faq-accordion .accordion-button:hover {
  color: #084298;
}
.faq-accordion .accordion-button:hover::before {
  color: #084298;
}
    /* Card para envolver el form y que se vea como el resto de páginas */
    .form-card {
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 10px 26px rgba(0,0,0,.10);
      padding: 22px;
    }

    /* Mejoras visuales con bootstrap sin romper tu CSS */
    .form-card h1, .form-card h2, .form-card h3 {
      margin-bottom: 16px;
    }

    /* Si tu stylo_formulario.css ya define inputs, esto no molesta */
    .form-card select,
    .form-card input,
    .form-card textarea {
      width: 100%;
    }

    /* Espaciado entre bloques del form (sin tocar tu HTML) */
    .form-card form > div {
      margin-bottom: 14px;
    }

    /* Grupo de inputs (número/escalera/piso/puerta) */
    .input-group {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(4, minmax(120px, 1fr));
      align-items: end;
    }
    @media (max-width: 995px) {
      .input-group { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 520px) {
      .input-group { grid-template-columns: 1fr; }
    }

    /* Botón validar código descuento alineado */
    .codigo-descuento-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
    }
    @media (max-width: 520px) {
      .codigo-descuento-row { grid-template-columns: 1fr; }
    }

    /* Bloque precio final que ya usas */
    #precio_final {
      border-radius: 14px;
      background: #f8f9fa;
      padding: 14px;
      border-left: 4px solid #0d6efd;
    }
    
    .checkbox-legal {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.checkbox-legal input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.checkbox-legal a {
  color: #0c73c2; /* tu azul */
  text-decoration: underline;
}

.checkbox-legal a:hover {
  text-decoration: none;
}

.campo-obligatorio {
  color: #dc3545;
  margin-left: 4px;
}



.header-area .main-nav .nav li {
  padding-left: 15px;
  padding-right: 15px;
}
.header-area .main-nav .nav li:first-child,
.header-area .main-nav .nav li:last-child {
  padding-left: 25px;
  padding-right: 25px;
}


/* === FIX MENÚ DESKTOP: logo + 5 items en una fila === */

/* 1. Dejar que el menú use el ancho real disponible */
.header-area .main-nav .nav {
  flex: 1;                 /* ocupa todo el espacio restante */
  flex-wrap: nowrap;       /* nunca salta de línea en desktop */
  justify-content: flex-end;
}

/* 2. Reducir padding horizontal de todos los items */
.header-area .main-nav .nav li {
  padding-left: 18px;
  padding-right: 18px;
  white-space: nowrap;     /* evita cortes raros */
}

/* 3. ELIMINAR padding extra en esquinas */
.header-area .main-nav .nav li:first-child,
.header-area .main-nav .nav li:last-child {
  padding-left: 18px;
  padding-right: 18px;
}

/* 4. Opcional: ajustar un poco el texto para ganar espacio */
.header-area .main-nav .nav li a {
  font-size: 13px;
  letter-spacing: 0.5px;
}

/* Eliminar separación artificial entre logo y menú */
.header-area .main-nav .logo {
  flex-basis: auto;
}

.header-area .main-nav .nav {
  flex: 1;
}

.header-area .main-nav .nav li:first-child {
  padding-left: 18px;
}