@tailwind base;
@tailwind components;
@tailwind utilities;

#slider {
  padding: 0 5% !important;
  height: 578px;
  transition: all 0.3s ease-in-out;
}

body p , body a, ul>li {
    color: #5e5e5e;
  }
  
  .fixedheader {
    position: fixed;
    width: 100%;
    background: #fff;
    box-shadow: 0 -7px 17px 0.5px #585858;
  }
  
  ul>li::marker {
    color: hsl(220deg 59.21% 29.8%);
  }
  
  .topbanner {
    margin-top: 149px;
  }
  
  /* banner internas */
  
  fieldset {
    border: 2px solid #fff;
    border-radius: 5px;
  }
  
  legend {
    color: white;
    padding: 1px 17px;
    font-size: 35px;
    font-weight: 500;
    bottom: -23px;
    background: #1f3d79;
    border-radius: 3px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    text-align: center;
    display: inline-table;
  }
  .banner_image .visible, .visible {
    overflow: visible !important;
  }
  
  @media(width < 640px) {
    legend {
      font-size: 23px;
      position: relative !important;
      top: 60px;
    }
  }
  
  /* preguntas */
  
  .collapse {
    visibility: visible !important;
  }
  
  .accordion-button:not(.collapsed) {
    background-color: #48cae463;
  }
  
  .accordion-button {
    font-size: 18px;
    font-weight: 500;
    color: hsl(220deg 59.21% 29.8%);
  }
  
  /* carousel */
  
  .item {
    text-align: center;
  }
  
  h2 {
    font-size: 24px;
    margin: 10px 0 5px;
  }
  
  p {
    font-size: 18px;
    margin: 0;
  }
  
  #equipo .owl-item img {
    width: 170px !important;
  }
  

/* SLIDER */

.slider__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
  }
  
  header #slider .owl-prev, header #slider .owl-next {
    top: 194px;
    font-size: 75px !important;
    margin: 0 -70px;
  }
  
  #equipo .owl-prev {
    left: -65px !important;
  }
  
  
  
  #slider {
  
    /* background-image: url(../assets/images/bgheader.png);
    background-size: cover;
    background-position: center; */
    padding-top: 60px;
  
    p {
      /* font-size: 59px; */
      font-weight: 600;
      /* text-align: left; */
      line-height: 1.2;  }
  }
  .slider__text {
  
    display: flex;
    flex-direction: column;
    align-items: center;
    /* width: 55%; */
  }
  
  #slider .slider__image {
  
    /* width: 45%; */
  
    img {
      width: 330px;
      margin-left: 85px;
    }
  }
  

  .wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 1536px;
    overflow: hidden;
    padding-left: 5%;
    padding-right: 5%;
  }
  
  /* .submenu {
          display: none;
      } */
  
  .menu-item:hover .submenu {
    display: block;
  }
  
  .submenu-item {
    cursor: pointer;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
  
  .submenu-item:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(31 61 121 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
  
  .link-menu-item {
    display: flex;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-decoration-line: none;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
  }
  
  .link-menu-item:hover {
    --tw-text-opacity: 1;
    color: rgb(72 202 228 / var(--tw-text-opacity));
  }
  
  .link-submenu-item {
    display: block;
    padding: 0.75rem;
    text-decoration-line: none;
  }
  
  .link-submenu-item:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
  
  .btn {
    border-radius: 22px;
    --tw-bg-opacity: 1;
    background-color: rgb(31 61 121 / var(--tw-bg-opacity));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
  
  .btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(72 202 228 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
  
  .subtitle {
    font-size: 17px;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(72 202 228 / var(--tw-text-opacity));
  }
  
  .title {
    font-size: 44px;
    font-weight: 600;
    line-height: 3.5rem;
  }
  
  .item-equipo {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(231 231 231 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding: 1rem;
    text-align: center;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-shadow-color: #ebebeb;
    --tw-shadow: var(--tw-shadow-colored);
  }
  
  @media (min-width: 1280px) {
    #slider {
      /* width: 69% !important; */
    }
    .item-equipo {
      padding: 2rem;
    }
    .slider__text {
      align-items: flex-start;
    }
    /* .txt-left {
      text-align: left !important;
    } */
  }
  
  /* footer */
  
  .links-footer {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
  
  .links-footer:hover {
    --tw-text-opacity: 1;
    color: rgb(72 202 228 / var(--tw-text-opacity));
  }
  
  /* contacto */
  
  .link-contact {
    font-weight: 400;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
  }
  
  .link-contact:hover {
    --tw-text-opacity: 1;
    color: rgb(72 202 228 / var(--tw-text-opacity));
  }
  
  /* visitas guiadas */
  
  .control-form {
    border-radius: 4px;
    border-width: 1px;
    border-color: rgb(148 163 184 / 0.5);
    padding: 0.75rem;
  }
  
  .control-form:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  
  input::-moz-placeholder, select::-moz-placeholder  {
    font-size: 14px;
    /* Adjust the font size as needed */
  }
  
  input::placeholder,
      select::placeholder,
      label,
      select option  {
    font-size: 14px;
    /* Adjust the font size as needed */
  }
  
  .header {
    background-image: url(../assets/images/bgheader.png);
    background-position: -10px 21%;
    background-size: cover;
  }
  
  @media(width < 1280px) {
    .wrapper {
      width: 100%;
    }
  }
  
  @media(width < 1025px) {
    .wrapper {
      width: 100%;
    }
  
    .header {
      background-repeat: no-repeat;
    }
  
    .box-header {
      z-index: 99;
      width: 100%;
    }

    #slider {
      height: 495px;
    }
    #slider .slider__image img {
      width: 280px;
    }
    .header {
      background-position: -188px -15% !important;
      background-size: 136% !important;
    }


  
    .mobile-menu {
      position: fixed;
      z-index: 99;
      transform: translateX(100%);
      padding: 1rem;
      transition-property: all;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 500ms;
    }
  }

  .translate {
    @apply translate-x-[18%];
  }

  
    @media (min-width: 1280px) {
      .mobile-menu {
        display: none;
      }
    }
  
    .mobile-menu {
      height: 100vh;
      bottom: 0;
      width: 350px;
      right: 0;
      top: 68px;
    }
  
    .link-menu-mobile {
      display: block;
      width: 100%;
      padding-top: 9px;
      padding-bottom: 9px;
      font-size: 15px;
      --tw-text-opacity: 1;
      color: rgb(31 61 121 / var(--tw-text-opacity));
      border-bottom: 1px solid #b9dae1;
    }
  
    .link-submenu-mobile {
      /* @apply text-white w-full py-[12px] px-[5px]  ; */
    }
  
    .title {
      font-size: 30px;
      line-height: 2.5rem;
    }
  
    .subtitle {
      font-size: 16px;
    }

    @media(min-width:1024px){
      #slider {
        padding: 0;
      }
      #slider .slider__image img {
        margin-left: 0px !important;
      }
      header {
        background-position: 36% 25%;
      }
    }
  
  
  @media( max-width: 768px ) {
    .header {
      background-position: 81% -164% !important;
      background-size: 303% !important;
    }

    #slider {
      padding-left: 0px;
      padding-right: 0px;
      height: auto;
      margin-top: 65px;
    }


    #slider .slider__image img {
        margin-left: 0 !important; 
        width: 245px;
    }
  }
  
  @media( width < 1650px ) {
    .header {
      background-position: -135px 3%;
      background-size: 116%;
    }
  }