/*@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Rajdhani:wght@300;400;500;600;700&display=swap');
*/
/* MONTSERRAT - Regular (400) */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* MONTSERRAT - Italic (400) */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* MONTSERRAT - Bold (700) */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* MONTSERRAT - Light (300) */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* MONTSERRAT - Thin (100) */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

:root {
  --vanxl-blue: #0158c3;
  --vanxl-black: #1A1A1B;
  --vanxl-gray: #333333; /* Para sombras o textos secundarios */
  --white: #FFFFFF;
}

html {
  scroll-behavior: smooth;
}
body{
    background-color: #0158c30a;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
}
.logo{
    width: 190px;
}
nav li {
    margin-left: 15px;
    font-weight: 500;
}
.title_ab {
    font-size: 2rem;
    font-weight: 800;
}

h1 {font-size: 1.8rem;}
h2 {
    font-size: 1.5rem;
}
.mySwiper h2{
    font-size: 2.5rem;
}
.swiper-text-p {
    font-size: 1.1rem;
}
/* Ejemplo de uso en un botón */
.btn-primary {
  background: var(--vanxl-blue);
  color: var(--white);
}

.btn-primary:hover {
  background-color: #0052cc; /* Un tono más oscuro para el hover */
}
.navbar>.container {
    display: inline-block;
}
.mySwiper {
  width: 100%;
  /* El truco mágico: 100% alto menos el alto del nav */
  height: calc(100dvh - 80px);
  bottom: 30px;
}
.swimg-1{
    background-image: url('../img/slider/bg-slider-cruise.webp');
    background-size: cover;
    background-position: top;
}
.mySwiper .swiper-slide .container,.mySwiper .swiper-slide .container .row {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra el contenido verticalmente */
  align-items: center;     /* Centra el contenido horizontalmente */
  
  /* Opcional: Si quieres que el texto no toque los bordes */
  box-sizing: border-box;
}
.swiper-text{
    z-index: 2;
}
.swiper-imagen{
    justify-content:center;
    text-align: center;
    align-items: start;
}
.swiper-imagen.swimg-1 {
    height: calc(100% - 60px);
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}
.swiper-imagen::before {
  content: ""; /* Obligatorio para que se vea */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
  z-index: 1;
}

form {
    display: block;
    background-color: #ffffff;
    padding: 25px 30px;
    border-radius: 20px;
    box-shadow: 0px 0px 10px #00000033;
    width: calc(100% - 100px);
}

section.sec_slider {
    position: relative;
    z-index: 1;
}

section.sec_form {
    position: absolute;
    z-index: 2;
    bottom: 40px;
    left: 0;
    width: 100%;
}

.sec_cabecera {
    background: var(--vanxl-blue);
    display: inline-block;
    padding: 5px 60px;
    font-size: 0.8rem;
    color: #ffffff;
    font-weight: 500;
}
.pic-ab{
    width: 100%;
    height: 350px;
    background-size: cover;
    border-radius: 40px;
    background-position: center;
    box-shadow: 0px 10px 15px #7d7d7d9c;
}
.pic-ab-1{
    background-image: url('../img/orlando-familia-vanxl-web.webp');    
}
.pic-ab-2{
    background-image: url('../img/orlando-familia-vanxl-web.webp');    
}
.pic-ab-3{
    background-image: url('../img/gt-vanxl.jpg');    
}
.pic-ab.pos-2 {
    position: absolute;
    top: 33.33%;
    right: 0%;
}
 
.sec_aboutus.py-5 {
}

.ser-item {
    color: #000000;
    padding: 30px 30px;
    border-radius: 50px;
    background: #ffffff;
    margin: 5px;
    box-shadow: 0px 0px 20px #00000036;
    padding: 60px 40px;
}

img.ser-ico {
    height: 90px;
    margin-bottom: 2rem;
}
.ser-title {
    font-size: 1.3rem;
    display: block;
    margin-bottom: 1rem;
}
.sec_services {
    background: linear-gradient(45deg, black, #0158c3);
    color: #fff;
}
 .btn-go {
    width: auto;
    height: 42px;
    display: inline-flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 8px;
}

span.fleet-price {
    font-size: 1.5rem;
    display: inline-grid;
}

span.fleet-price small {
    font-size: 0.8rem;
}
.item-callus {
    background: linear-gradient(45deg, black, #0158c3, #67abff);
    min-height: 450px;
    border-radius: 40px;
    padding: 60px;
    color: #fff;
}
.call-pic{
        width: 600px;
    position: absolute;
    right: 0;
    top: -160px;
}

.slide-hotel {
    border-radius: 22px;
    box-shadow: 0px 3px 10px #0000006b;
    margin-bottom: 20px;
}
.ico-fleet {
    width: 24px;
}
span.fleet-pax,span.fleet-door {
    display: inline-block;
    padding-left: 12px;
}
.sec_fleets .text-fleet span {
    color: #949595;
}
ul.links_footer {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.links_footer a {
    text-decoration: none;
    color: #ffffff;
    display: block;
    margin: 10px 0px;
}
    section,.py-section {
    padding: 90px 0px;
}
section.sec_slider {
    padding: 0px;
}

section.sec_form {
    padding: 0;
}
.call_col_1 {
    z-index: 2;
}
.container {
    max-width: 1150px !important;
}
.popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.popup-box{
    position:relative;
    width: auto;
    max-width:700px;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 10px 40px rgba(0,0,0,.5);
    animation:popupFade .25s ease;
}

.popup-close{
    position:absolute;
    top:10px;
    right:10px;
    width:42px;
    height:42px;
    border-radius:50%;
    border:none;
    background:rgba(0,0,0,.7);
    color:#fff;
    font-size:22px;
    z-index:20;
}

.popup-close:hover{
    background:#000;
}

.popup-img{
    width:100%;
    display:block;
    max-height:80vh;
    object-fit: contain;
}

.popup-caption{
    padding:20px;
}

@keyframes popupFade{
    from{
        opacity:0;
        transform:scale(.9);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}
section.bg-miami {
    background: linear-gradient(45deg, #ff66eb, #ffffff, #00eaff);
}
.bg-rose,.bg-rose:hover {
    border-color: #ff00ef;
    background: #ff00ef;
}
/* Ajuste para que en móvil sea pantalla completa de izquierda a derecha */
@media (max-width: 991.98px) {
    body{
        font-size:0.85rem
    }
    p{
        max-width:80%;margin:auto
    }
    .item-callus {
    padding: 40px 40px !important;
}

.sec_callus a {
    margin-top: 10px !important;
    margin-bottom: 25px;
}
    section,.py-section {
    padding: 60px 0px;
}
    .pic-ab-2 {
        margin: 30px auto;
    }
    h1 {
    font-size: 1.5rem;
    line-height: 1.65rem;
}
    h2 {
    font-size: 1.4rem !important;
    line-height: 1.5rem;
}
    .swiper-text-p{
        font-size: 0.95rem;
        display: block;
        line-height: 1.1rem;
    }
    .offcanvas-full-mobile {
        width: 100% !important;
        border: none !important;
    }

    img.call-pic {
    width: 100%;
    top: -103px;
}

section.sec_callus.py-5 {
    margin-bottom: 80px;
}
section.sec_form {
    bottom: 80px;
}
    form {
    width: calc(100% - 60px);
    padding: 15px 20px;
}
.swimg-1{
    background-image: url('../img/slider/bg-cruise-cell-01.webp');
    background-size: 100%;
    background-position: top;
}
    .swiper-imagen::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 40%, rgb(0 0 0 / 68%) 60%, rgb(0 0 0) 100%);
}
.mySwiper {
    height: calc(100dvh - 30px);
}
form .form-control, form button, form label {
    font-size: 0.9rem !important;

}
form .form-control, form button {
    padding: 4px 10px;
    max-height: 30px;
}
.logo {
    width: 150px;
}
.offcanvas-body a {
    font-size: 1.2rem;
}
    .ser-item{
        padding: 30px 40px;
    }
    .ser-title
    {
        font-size: 1rem;
    }
}