body {

    margin: 0;

    font-family: var(--font-family);

    color: #212529;

}

html, body {

  width: 100%;

  overflow-x: hidden;

}



.logo-header{

color: #ffffff;

text-decoration: none;

text-shadow: 3px  #f3fdff;

} 

.logo-footer{

color: white;

text-decoration: none;  

text-shadow: 1px 0px #dbe7fe;

}

/* HEADER */

.port-header{

background:#212529;

border-bottom:1px solid #eee;

}



.navbar-nav .nav-link{

font-weight:600;

color:#f9fdff ;

margin-left:20px;

}



.navbar-toggler{

border:none;

}



.navbar-toggler:focus{

box-shadow:none;

}



/* Mobile */



@media(max-width:991px){



.navbar-nav{

padding:15px 0;

}



.nav-link{

margin:10px 0;

}



}


/* HEADER FIX */



.port-header{

/*position:absolute;*/

top:0;

left:0;

width:100%;

z-index:50;

background:#232f3e ;

}

.long-short-cruise-parking{
    background: #f8fafc;
    overflow: hidden;
}

/* ======================
   Hero Section
====================== */

.hero-badge{
    display: inline-block;
    background: rgba(13,110,253,0.1);
    color: #0d6efd;
    padding: 10px 18px;
    border-radius: 50px;
    font-weight: 600;
    margin-bottom: 20px;
}

.hero-title{
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 25px;
    color: #111827;
}

.hero-text{
    font-size: 17px;
    line-height: 1.9;
    color: #5b6472;
    margin-bottom: 18px;
}

.hero-btns{
    display: flex;
    gap: 15px;
    margin-top: 35px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ======================
   Parking Cards
====================== */

.parking-type-card{
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.06);
    transition: 0.35s ease;
    border: 1px solid #eef2f7;
}

.parking-type-card:hover{
    transform: translateY(-10px);
    box-shadow: 0 18px 50px rgba(0,0,0,0.1);
}

.parking-top{
    padding: 40px 35px;
    color: #fff;
    text-align: center;
}

.short-card .parking-top{
    background: linear-gradient(135deg,#0d6efd,#4f8cff);
}

.long-card .parking-top{
    background: linear-gradient(135deg,#198754,#35b97f);
}

.parking-icon{
    width: 90px;
    height: 90px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    margin-bottom: 25px;
}

.parking-top h2{
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.parking-duration{
    display: inline-block;
    background: rgba(255,255,255,0.18);
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
}

.parking-body{
    padding: 35px;
}

.parking-body p{
    color: #5d6674;
    line-height: 1.9;
    margin-bottom: 20px;
}

.feature-list{
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
}

.feature-list li{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-weight: 500;
}

.feature-list i{
    color: #0d6efd;
}

.long-card .feature-list i{
    color: #198754;
}

/* ======================
   Why Book
====================== */

.section-title h2{
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.section-title p{
    color: #6b7280;
    font-size: 17px;
}

.why-card{
    background: #fff;
    padding: 35px 28px;
    border-radius: 24px;
    text-align: center;
    height: 100%;
    transition: 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.why-card:hover{
    transform: translateY(-8px);
}

.why-icon{
    width: 85px;
    height: 85px;
    background: rgba(13,110,253,0.1);
    color: #0d6efd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 22px;
}

.why-card h4{
    font-weight: 700;
    margin-bottom: 14px;
}

.why-card p{
    color: #667085;
    line-height: 1.8;
}

/* ======================
   Safe Section
====================== */

.safe-content h2{
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 25px;
}

.safe-content p{
    color: #667085;
    line-height: 1.9;
    margin-bottom: 18px;
}

.safe-points{
    margin-top: 30px;
}

.safe-point{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-weight: 600;
}

.safe-point i{
    color: #198754;
}

/* ======================
   CTA Section
====================== */

.cta-section{
    background: linear-gradient(135deg,#0d6efd,#2c7cff);
    padding: 70px 40px;
    border-radius: 32px;
    color: #fff;
}

.cta-section h2{
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.cta-section p{
    max-width: 750px;
    margin: 0 auto 35px;
    line-height: 1.9;
    font-size: 17px;
}

.cta-btns{
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ======================
   Responsive
====================== */

@media(max-width:991px){

    .hero-title{
        font-size: 2.4rem;
    }

    .section-title h2,
    .safe-content h2,
    .cta-section h2{
        font-size: 2rem;
    }

}

@media(max-width:767px){

    .hero-title{
        font-size: 2rem;
    }

    .hero-btns,
    .cta-btns{
        flex-direction: column;
    }

    .hero-btns .btn,
    .cta-btns .btn{
        width: 100%;
    }

    .parking-top{
        padding: 35px 25px;
    }

    .parking-body{
        padding: 28px 22px;
    }

    .cta-section{
        padding: 50px 25px;
    }

}


/* FOOTER */

.cp-footer{

background:#fff;

color:#545e69;

padding:60px 0 0;

font-family:Inter,sans-serif;

}



.cp-footer a{

color:#545e69;

text-decoration:none;

}



.cp-footer-links{

list-style:none;

padding:0;

margin:0;

}



.cp-footer-links li{

margin-bottom:14px;

}



.cp-footer-title{

font-weight:600;

margin-bottom:10px;

}



.cp-socials{

display:flex;

gap:12px;

justify-content:center;

}



.cp-socials a{

width:40px;

height:40px;

border-radius:50%;

background:#c8f7ef;

display:flex;

align-items:center;

justify-content:center;

color:#003b6f;

}



.cp-footer hr{

border-color:rgba(255,255,255,.3);

margin:20px 0;

}



/* BOTTOM BAR */



.cp-footer-bottom{

background:#0072ce;

margin-top:50px;

padding:15px 0;

font-size:14px;

}



.cp-footer-bottom p{

margin:0;

}



.cp-legal a{

margin-left:15px;

}



/* MOBILE */



@media(max-width:768px){



.cp-socials{

margin-top:15px;

}



.cp-legal{

margin-top:10px;

}



.cp-legal a{

margin:0 8px;

}



}

h1,h2,h3,h4{

    letter-spacing: -0.5px;

}



.pc-top{

    text-transform: uppercase;

    font-weight:600;

    color: var(--secondary-color);

} 

a, button{

    transition: all .25s ease;

}



img{

    transition: transform .4s ease;

}



/* bottom CTA */

.bottom-banner {

    background: #1e247e;

    border: 2px solid #0a78bc;

    z-index: 10;

    box-shadow: 0 -1px 3px #0a78bc;

    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: #ffffff;

    font-size: 11px;

}



.banner-middle strong {

    display: block;

    font-size: 16px;

    margin-top: 4px;

    color: #ffffff;

}



.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;

    }

}

.navbar-toggler span {
    color : #fff;
} 


@media (max-width: 768px) {
    .hero-luxury {
        padding: 20px 0 70px;
    }
}


@media (max-width: 768px) { 

.port-header {
   
    display: none;
} 
}

.scroll-to-top {
  position: fixed;
  right: 18px;
  bottom: 20px;
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
} 

.call-cta i {
    transform: rotate(11deg);
}




/* =========================
   PORT SEO SECTION
========================= */

.pm-seo-section{
    padding:70px 0;
    background:#fff;
    font-family:'Playfair Display', serif;
}

.pm-seo-header{
    max-width:850px;
    /*margin:auto;*/
    margin-bottom:50px;
}

.pm-seo-subtitle{
    display:inline-block;
    color:#1c9be6;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:10px;
    font-weight:600;
}

.pm-seo-header h1{
    font-size:38px;
    font-weight:700;
    color:#232f3e;
    margin-bottom:18px;
    line-height:1.3;
}

.pm-seo-header p{
    font-size:16px;
    color:#555;
    line-height:1.8;
}

.pm-seo-content{
    max-width:950px;
    /*margin:auto;*/
}

.pm-seo-block{
    margin-bottom:40px;
    padding-bottom:30px;
    border-bottom:1px solid #ececec;
}

.pm-seo-block:last-child{
    border-bottom:none;
}

.pm-seo-block h2{
    font-size:24px;
    font-weight:700;
    color:#232f3e;
    margin-bottom:15px;
    display:flex;
    align-items:center;
    gap:12px;
}
.pm-seo-block h3{
    font-size:22px;
    font-weight:700;
    color:#232f3e;
    margin-bottom:15px;
    display:flex;
    align-items:center;
    gap:12px;
}
.pm-seo-block h2 i{
    color:#1c9be6;
    font-size:20px;
}

.pm-seo-block p{
    font-size:16px;
    line-height:1.9;
    color:#444;
    margin-bottom:15px;
}

.pm-seo-block ul{
    padding-left:20px;
    margin-top:10px;
}

.pm-seo-block ul li{
    margin-bottom:10px;
    color:#444;
    line-height:1.8;
}

/* TABLET */
@media(max-width:991px){

.pm-seo-header h1{
    font-size:32px;
}

.pm-seo-block h2{
    font-size:22px;
}
.pm-seo-block h3{
    font-size : 20px; 
    line-height : 1.5; 
    align-items : flex-start;
}

}

/* MOBILE */
@media(max-width:768px){

.pm-seo-section{
    padding:20px 0;
}

.pm-seo-header{
    margin-bottom:35px;
}

.pm-seo-header h1{
    font-size:24px;
}

.pm-seo-header p,
.pm-seo-block p,
.pm-seo-block ul li{
    font-size:15px;
}

.pm-seo-block{
    margin-bottom:30px;
    padding-bottom:22px;
}

.pm-seo-block h2{
    font-size:20px;
    line-height:1.5;
    align-items:flex-start;
}
.pm-seo-block h3{
    font-size : 18px; 
    line-height : 1.5; 
    align-items : flex-start;
}
} 






/* =========================
   MAP SECTION
========================= */
.explore-port{
background:var(--light);
}

.explore-info{
background:#fff;
padding:20px;
border-radius:var(--radius);
box-shadow:0 10px 30px rgba(0,0,0,.08);
margin-bottom:20px;
}

.map-wrap{
width:100%;
height:385px;
border-radius:var(--radius);
overflow:hidden;
}

.map-wrap iframe{
width:100%;
height:100%;
}