:root{
      --navy:#071a2b;
      --navy-dark:#04121f;
      --accent:#ff9f1c;
      --accent-light:#ffb347;
      --blue:#2fa4ff;
      --text-light:#e6eef6;
    }

    body{font-family:'Inter',sans-serif;background:var(--navy-dark);color:var(--text-light)}

    /* NAVBAR */
    .navbar{background:var(--navy);padding:14px 0}
    .navbar .nav-link{color:#fff!important;font-weight:600}
    .navbar-brand{background:#fff;padding:8px 18px;border-radius:40px;font-weight:900}
    .navbar-brand span{color:var(--accent)}

    /* HERO */
    .hero{background:linear-gradient(rgba(4, 18, 31, 45%), rgba(4, 18, 31, 50%)), url(../img/hero_bg.avif) center / cover no-repeat;padding:130px 0 80px;text-align:center}
    .hero h1{font-size:3.6rem;font-weight:900;letter-spacing:1px}
    .hero h1 span{color:var(--accent)}

    .price{font-size:4rem;font-weight:900;color:var(--blue);text-shadow:0 0 14px rgba(47,164,255,.7)}
    .cta-btn{background:var(--accent);color:#000;font-weight:900;padding:16px 46px;border-radius:50px;display:inline-block; text-decoration: none;}
    .cta-btn:hover{background:var(--accent-light)} 
    nav .cta-btn{padding: 10px 30px;}

    /* TITLES */
    .section-title{font-size:2rem;font-weight:900;text-transform:uppercase;letter-spacing:1px}
    .section-subtitle{color:#b6c6d6;margin-bottom:40px}

    /* ICON CIRCLE */
    .icon-circle{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px}

    /* FEATURE CARD */
    .feature-card{background:#0b2238;border-radius:20px;padding:30px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
    .feature-card:hover{transform:translateY(-6px)}

    /* PORT LISTING */
    .port-image{width:160px;height:120px;border-radius:14px;object-fit:cover}
    #locations .card{background:#0b2238;color:#fff;margin-bottom:32px}
            .three-step-icon {
            width: 100px;
            height: 100px;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .three-step-icon svg {
            width: 100%;
            height: 100%;
        } 
        .three-step-icon img {
            max-width: 80%;
            max-height: 80%;
        }   
    /* BADGE */
    .price-badge{background:#e9f9ef;border-radius:6px 6px 0 0;animation:pulse 2.5s infinite}
    @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,164,255,.5)}70%{box-shadow:0 0 0 14px rgba(47,164,255,0)}100%{box-shadow:0 0 0 0 rgba(47,164,255,0)}}

    /* FLOATING CALL */
    .floating-call{position:fixed;right:20px;bottom:20px;background:var(--accent);color:#000;padding:14px 22px;border-radius:50px;font-weight:900;z-index:9999;text-decoration: none;}

    footer{background:var(--navy-dark)}
  
    /* ===== VISUAL CTA BANNER ===== */
    .cta-banner{
      position:relative;
      background:url('https://images.unsplash.com/photo-1548574505-5e239809ee19?auto=format&fit=crop&w=2000&q=80') center/cover no-repeat;
      padding:140px 0;
      overflow:hidden;
    }

    .cta-overlay{
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, rgba(4,18,31,.9), rgba(4,18,31,.65));
    }

    .cta-eyebrow{
      color:var(--accent);
      font-weight:800;
      letter-spacing:2px;
      margin-bottom:12px;
    }

    .cta-heading{
      font-size:3rem;
      font-weight:900;
      text-transform:uppercase;
      color:#fff;
      margin-bottom:30px;
    }

    .cta-banner-btn{
      display:inline-block;
      background:#1e3a5f;
      color:#fff;
      padding:16px 44px;
      font-weight:900;
      border-radius:6px;
      letter-spacing:1px;
      text-decoration: none;
    }
    .cta-banner-btn:hover{background:#274b77;color:#fff}

   .feature-card{border:none;border-radius:20px;padding:30px;transition:.3s;box-shadow:0 10px 30px rgba(0,0,0,.05)}
    .feature-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.1)}


    /* Listing image */
    .port-image{
      width:160px;
      height:120px;
      border-radius:14px;
      object-fit:cover;
      flex-shrink:0;
    }

    /* Animated badge */
    .price-badge{background:#e9f9ef;border-radius:6px 6px 0 0;animation:slideFade .8s ease-out forwards,pulseGlow 2.5s ease-in-out infinite 1s}
    @keyframes slideFade{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}
    @keyframes pulseGlow{0%{box-shadow:0 0 0 0 rgba(30,126,52,.4)}70%{box-shadow:0 0 0 10px rgba(30,126,52,0)}100%{box-shadow:0 0 0 0 rgba(30,126,52,0)}}
    footer{background:var(--dark);color:#ccc}
    footer a{color:#ccc;text-decoration:none}
    footer a:hover{color:#fff} 
    /* Gap below each Popular Cruise Ports card */
#locations .card{
  margin-bottom: 24px;
}

/* Slightly bigger gap on mobile */
@media (max-width: 768px){
  #locations .card{
    margin-bottom: 32px;
  }
}
@media (max-width: 576px){
.navbar-toggler {
    background-color: white;
}
}
.subpage-section {
  background: #f7fafd;
  min-height: 100vh;
  width: 100vw;
  padding: 44px 0 38px 0;
  font-family: '__Plus_Jakarta_Sans_15d946', '__Plus_Jakarta_Sans_Fallback_15d946', 'Plus Jakarta Sans', Arial, sans-serif;
}
.subpage-container {
  max-width: 650px;
  margin: 0 auto;
  background: #fff;
  border-radius: 11px;
  padding: 30px 18px 16px 18px;
  box-shadow: 0 2px 28px rgba(70, 120, 180, 0.07);
}
.subpage-title {
  font-size: 2.3rem;
  font-weight: 700;
  color: #191a2a;
  margin-bottom: 24px;
  text-align: left;
}
.subpage-container p, .faq-answer {
  color: #232b39;
  font-size: 1.13rem;
  margin-bottom: 20px;
  line-height: 1.48;
}
.faq-question {
  font-size: 1.17rem;
  font-weight: 600;
  margin: 21px 0 5px 0;
  color: #1976f3;
}
@media (max-width: 700px) {
  .subpage-container {
    padding: 20px 5px 8px 5px;
    box-shadow: none;
    border-radius: 0;
  }
  .subpage-title {
    font-size: 1.36rem;
    margin-bottom: 19px;
  }
  .subpage-section {
    padding: 24px 0 16px 0;
  }
  .faq-question { font-size: 1.09rem;}
  .subpage-container p, .faq-answer { font-size: 1.01rem; }
}

/* bottom CTA */
.bottom-banner {
    background: var(--accent);
    border: 2px solid #1e3a5f;
    z-index: 10;
    box-shadow: 0 -1px 3px #1e3a5f;
    border-radius: 8px;
    padding: 8px 10px;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: bold;
    bottom: 2px;
    left: 1%;
    width: 98%;
    color: #ffffff;
}

.banner-left img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.banner-middle {
    flex: 1;
    text-align: center;
    padding: 0 10px;
    color: #1f2937;
    font-size: 11px;
}

.banner-middle strong {
    display: block;
    font-size: 16px;
    margin-top: 4px;
    color: #1f2937;
}

.banner-middle .discount {
    color: #fff;
    background: #28a745;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.banner-right .call-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #28a745;
    color: #fff;
    font-size: 22px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
}

/* call  */

.callIcon1 {
    position: relative;
    right: 8px;
    top: 1px;
}

.callIcon1 a._phonebox {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #c60001;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #106e00;
    animation: zoom-in-zoom-out 2s ease-out infinite;
    text-decoration: none;
}

.callIcon1 a {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    display: block;
    padding-bottom: 1px;
    line-height: 25px;
    position: relative;
    top: -1px;
    z-index: 10;
}

.wifi-symbol {
    display: block;
    position: absolute;
    top: 6px;
    left: 12px;
    display: inline-block;
    height: 36px;
}

.wifi-symbol .wifi-circle.first {
    -o-animation-delay: 800ms;
    -moz-animation-delay: 800ms;
    -webkit-animation-delay: 800ms;
    animation-delay: 800ms;
    width: 15px;
    height: 15px;
    left: 16px;
    top: 0px;
}

.wifi-symbol .wifi-circle {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    font-size: 21.4285714286px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-color: #fff;
    border-style: solid;
    border-width: 2px 2px 0 0;
    -webkit-border-radius: 0 100% 0 0;
    border-radius: 0 100% 0 0;
    opacity: 0;
    -o-animation: wifianimation 2.5s infinite;
    -moz-animation: wifianimation 2.5s infinite;
    -webkit-animation: wifianimation 2.5s infinite;
    animation: wifianimation 2.5s infinite;
}

.wifi-symbol .wifi-circle.second {
    width: 12px;
    height: 12px;
    -o-animation-delay: 400ms;
    -moz-animation-delay: 400ms;
    -webkit-animation-delay: 400ms;
    animation-delay: 400ms;
    left: 14px;
    top: 5px;
}

.wifi-symbol .wifi-circle.third {
    width: 8px;
    height: 8px;
    left: 12px;
    top: 10px;
}

.wifi-symbol .fourth {
    width: 30px;
    height: 36px;
    background: url(https://www.redumbrellaholidays.com/Content/images/animatePhone.png) left center no-repeat;
    background-size: 20px;
    display: inline-block;
}

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.3, 1.3);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes wifianimation {

    0% {
        opacity: 1;
    }

    5% {
        opactiy: 1;
    }

    6% {
        opactiy: .8;
    }

    100% {
        opactiy: .8;
    }
}

._txtpuk small {
    font-size: 11px;
}

.stickybottom_uk {
    padding-top: 6px;
    padding-bottom: 4px;
}

@media (min-width:500px) {
    .bottom-banner {
        display: none;
    }
}