@charset "UTF-8";
/* CSS Document */


/* Colori */
:root {
--blue: #332c9e;	
--darkblue: #110d50;	
--yellow: #ffee00;	
--white: #ffffff;		
--grey: #666666;	
--whatsapp: #25D366;	
--whatsapphover: #38a144;	
}

/* Font principali */

html{background-color:var(--blue)}

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: #222;
  line-height: 1.6;  
  background-color:var(--yellow); /* giallo */
}


.navbar {
  z-index: 1030;
}

.navbar .dropdown {
  position: relative;
  z-index: 1050;
}

.navbar .dropdown-menu {
  z-index: 1060;
}



.navbar-nav .nav-link{
	color: var(--blue);
}

.navbar-nav .nav-link.active{
	font-weight:bold;
	color: var(--blue);	
}




#mainNavbar .dropdown-menu{ min-width: auto; }

footer.bg-dark{
   background-color:var(--blue) !important; 
   color:#fff;	
}

footer.bg-dark a{ color:var(--yellow); }

/* Titoli */
h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  color: var(--blue);
}

/* CARD BASE BARCHE */
.card.ctacard {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}

.card.ctacard:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* IMMAGINE CON WRAPPER */
.boat-image-wrapper {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}

/* L’IMMAGINE */
.boat-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s ease;
}

/* OVERLAY SCURO */
.boat-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.6s ease;
}

/* HOVER: ZOOM, ROTAZIONE, OVERLAY */
.card.ctacard:hover .boat-image-wrapper img {
  transform: scale(1.08) rotate(1deg);
}

.card.ctacard:hover .boat-image-wrapper::after {
  background: rgba(0, 0, 0, 0.25);
}


.btn.btn-whatsapp{
    background: var(--whatsapp);
    border-color: var(--whatsapp);
	font-weight: bold;
}

.btn.btn-whatsapp:hover{
    background: var(--whatsapphover);
    border-color: var(--whatsapphover);
}

.btn.btn-whatsapp, .btn.btn-whatsapp i.bi-whatsapp, 
.btn.btn-whatsapp:hover, .btn.btn-whatsapp:hover i.bi-whatsapp{
	color: var(--white);
}



.card-white{
    background: var(--white);
    border-color: var(--white);
    color: var(--blue);	
}

.disclaimer{ 
	color:var(--white); 
	font-size:.8rem;
	opacity: 0.5;
}

.card-blue {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

.card-blue:hover {
    color: var(--white);
}

.card.card-riepilogo .card-header.bg-dark{
	color:var(--blue);
    background: var(--white);
    border-color: var(--white);		
}


.card-riepilogo {
    background: var(--white);
    border-color: var(--white);
    color: var(--blue);	
}

.card-riepilogo .card-body span{ font-weight: bold;}

.card-riepilogo i{
	color: var(--darkblue);
}

.card-riepilogo{ 
}

.card.slot-card{
	color: var(--blue);
    background: var(--yellow);
    border-color: var(--yellow);	
	font-weight:bold;
}

.card.slot-card:hover{
    background: var(--white);
    border-color: var(--white);		
}

.card.slot-card h6 i{
	color: var(--darkblue);	
}

.card-blue .card-header{ 
	background-color: var(--white); 
	color: var(--blue);
}

.btn.alt-date{
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--blue);		
	font-weight:bold;
}

.btn.alt-date:hover{
    background: var(--white);
    border-color: var(--white);
    color: var(--blue);		
}

#slot-message .alert.alert-warning{
	padding: 10px;
    background: var(--white);
    border-color: var(--white);	
    color: var(--blue);		
}

/* scritte in giallo nelle card blue

          <div class="step-nav">
            <div class="step active" data-step="1">
              <div class="number">1</div>
              <h6><?=$lang["booking_step_data_posti"]?></h6>
            </div>
            <div class="step" data-step="2">
              <div class="number">2</div>
              <h6><?=$lang["booking_step_orario"]?></h6>
            </div>
            <div class="step" data-step="3">
              <div class="number">3</div>
              <h6><?=$lang["booking_step_dettagli"]?></h6>
            </div>
          </div>


*/
.card-blue .card-body h5,
.card-blue .card-body ul li i,
.card-blue .card-body span i,
.card-blue .card-body i,
.card-blue .card-body.itinerary i,
.card-blue .card-body.itinerary h3,
.btn.btn.btn-outline-secondary i,
h4.bookingtitle
{ 
	color: var(--yellow);
}

.tour-itinerary h3{ color: var(--blue); }

.card-blue .card-body h3{ 
	margin:0;
	font-size: 1rem;
}

.step-nav{}

.btn.btn-dark{
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--blue);	
}
.btn.btn-dark:hover{
    background: var(--white);	
    border-color: var(--white);	
}

.btn.btn.btn-outline-secondary{
    background: var(--darkblue);
    border-color: var(--darkblue);
    color: var(--white);		
}

/* SCHEDA DI DETTAGLIO */
/* Slider */
.swiper {
  width: 100%;
  height: 500px;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-button-next, .swiper-button-prev {
  color: #fff;
}

/* Sezione tecnica */
.boat-info-icon {
  min-width: 32px;
  color: #36302D;
}

/* Card pacchetti */
.price {
  font-size: 1.5rem;
  font-weight: 700;
  color: color:var(--blue);
}
.price-original {
  text-decoration: line-through;
  color: #999;
  font-size: 0.9rem;
  margin-right: 5px;
}

.package-prices .price {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  text-align: right;
}

.package-prices .price-original {
  display: block;
  text-decoration: line-through;
  color: #6c757d;
  text-align: right;
  font-size: 0.9rem;
}




/* BOOKING STEP */

    .step-nav {
      display: flex;
      justify-content: space-between;
      margin-bottom: 2rem;
    }
    .step {
      text-align: center;
      flex: 1;
      position: relative;	  
    }
    .step:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      width: 100%;
      height: 2px;
      background: #dee2e6;
      z-index: -1;
    }
    .step .number {
      width: 40px;
      height: 40px;
      line-height: 40px;
      border-radius: 50%;
      background: var(--darkblue);
      color: var(--white);
      display: inline-block;
      font-weight: 600;
    }
    .step h6 {
      margin-top: .5rem;
      font-size: .9rem;
	  color: var(--darkblue);	
    }

    .step.active .number {
      background: var(--white);
      color: var(--blue);
    }
	.step.active h6 {
	  color:var(--white);	
	}
    .step.completed .number {
      background: var(--yellow);
      color: var(--blue);
    }
	.step.completed h6 {
	  color:var(--yellow);	
	}
    .step-content {
      display: none;
    }
    .step-content.active {
      display: block;
      animation: fadeIn 0.4s ease;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

	.slot-card{ cursor: pointer;}
	.slot-card h6.card-title{
		margin-bottom:0;
	}


	/* Numero di telefono */
	.iti {
	  width: 100%;
	}
	.iti__flag-container {
	  z-index: 5;
	}
	#phone-flag .iti {
	  margin: 0;
	}
	.input-group-text #phone-flag {
	  width: 60px;
	  height: 100%;
	}
	.input-group-text .iti__flag-container {
	  position: absolute;
	  left: 0;
	  top: 50%;
	  transform: translateY(-50%);
	}

	.iti__flag-container .iti__selected-flag{ 
	  background-color: transparent !important 
	}

	/* Correzione estetica blocco bandiera */
	.input-group-text {
	  background: transparent !important;
	  border: none !important;
	  padding: 0 !important;
	}

/*
	#phone-flag {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding-left: 8px;
	  padding-right: 8px;
	}

	.input-group-text #phone-flag .iti__flag-container {
	  position: static !important;
	  transform: none !important;
	}

	.input-group-text #phone-flag .iti {
	  width: auto;
	}
*/




/* Homepage */

.home-hero {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: #fff;
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
        url('/images/hero.jpg') center center / cover no-repeat;

    transform: scale(1);
    animation: heroKenBurns 18s ease-in-out infinite alternate;
    z-index: 0;
}

.home-hero .container {
    position: relative;
    z-index: 1;
}

.home-hero h1{
	color: var(--yellow);
}

@keyframes heroKenBurns {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.12);
    }
}

@media (max-width: 991px) {
    .home-hero {
        min-height: 75vh;
        text-align: center;
    }

    .home-hero h1 {
        font-size: 2.5rem;
    }

    .home-hero p {
        font-size: 1.2rem !important;
    }
}









.home-hero h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1;
}

.home-link-card {
    overflow: hidden;
    border-radius: 1.5rem;
    position: relative;
    display: block;
    color: #fff;
    text-decoration: none;
}

.home-card-image {
    height: 420px;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}



.home-link-card:hover .home-card-image,
.home-link-card:hover .tour-card-image {
    transform: scale(1.05);
}

.home-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.05));
    display: flex;
    align-items: flex-end;
    padding: 2rem;
}


.tour-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 1rem;

    color: var(--yellow);

    background: linear-gradient(
        to top,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.35) 50%,
        rgba(0,0,0,0) 100%
    );
}

.tour-card-overlay h3 {
    margin-bottom: .25rem;
}



@media (max-width: 991px) {
    .home-card-image {
        height: 320px;
    }

    .home-card-overlay {
        padding: 1rem;
    }
}






/* ONDE FOOTER */
.water-waves {
    position: relative;
    height: 40px;
    overflow: hidden;
    background: transparent;
}

.wave {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
    height: 40px;
    background-repeat: repeat-x;
    background-size: 240px 40px;
}



.wave-1 {
    z-index: 5;
    bottom: 0;
    opacity: 1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 22 Q60 2 120 22 T240 22 V40 H0 Z' fill='%23332c9e'/%3E%3C/svg%3E");
    animation: waveMove 12s linear infinite;
}

.wave-2 {
    z-index: 2;
    bottom: -2px;
    opacity: .85; 
    /* opacity: 1; */	
	/*
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 25 Q60 8 120 25 T240 25 V40 H0 Z' fill='%234b45b5'/%3E%3C/svg%3E");*/
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 22 Q60 2 120 22 T240 22 V40 H0 Z' fill='%23332c9e'/%3E%3C/svg%3E");	
    animation: waveMoveReverse 17s linear infinite;
}

.wave-3 {
    z-index: 3;
    bottom: -4px;
    opacity: .65; 
    /*  opacity: 1;	*/
	/*
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 28 Q60 12 120 28 T240 28 V40 H0 Z' fill='%23635ed0'/%3E%3C/svg%3E");*/
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 22 Q60 2 120 22 T240 22 V40 H0 Z' fill='%23332c9e'/%3E%3C/svg%3E");	
    animation: waveMove 22s linear infinite;
}

@keyframes waveMove {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-240px);
    }
}

@keyframes waveMoveReverse {
    from {
        transform: translateX(-240px);
    }
    to {
        transform: translateX(0);
    }
}