/* static fonts */
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/Mulish-Thin.ttf") format("truetype"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 100; font-display: swap; src: url("../fonts/Mulish-ThinItalic.ttf") format("truetype"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/Mulish-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 200; font-display: swap; src: url("../fonts/Mulish-ExtraLightItalic.ttf") format("truetype"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/Mulish-Light.ttf") format("truetype"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/Mulish-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Mulish-Regular.ttf") format("truetype"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/Mulish-Italic.ttf") format("truetype"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Mulish-Medium.ttf") format("truetype"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/Mulish-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Mulish-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/Mulish-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Mulish-Bold.ttf") format("truetype"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/Mulish-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/Mulish-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/Mulish-ExtraBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/Mulish-Black.ttf") format("truetype"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 900; font-display: swap; src: url("../fonts/Mulish-BlackItalic.ttf") format("truetype"); }

:root {--bb-50: #f1f6ff;
--bb-100: #e5ebff;
--bb-200: #cedbff;
--bb-300: #a7bcff;
--bb-400: #7691ff;
--bb-500: #3f5aff;
--bb-600: #182cff;
--bb-700: #071cfa;
--bb-800: #0517d2;
--bb-900: #0615ac;
--bb-950: #000c5f;
}
html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
   
    font-feature-settings: normal;
    font-variation-settings: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
}

body {
    color: #000C5F!important;
    font-size: 1rem;
     font-family: Mulish, sans-serif;
    font-weight: 500;
    letter-spacing: -.017em;
    line-height: 1.55;
    scroll-behavior: smooth;
}

nav ul li a { color: #000C5F!important; padding:10px 30px!important;}
.nav-num { color: #000C5F; font-size:18px; text-decoration: none; text-align: end;}
.nav-num span {display: block; font-weight:800;}
.nav-num small {display: block;font-weight:600; font-size:12px}

.h-top { background: #000C5F; color: #fff;}
.hero { background: url(../images/hero-cruise.webp) no-repeat center bottom; padding-top: 150px; padding-bottom: 150px;}
.hero-title {font-size: 3rem; color: #fff; font-weight: 800; line-height: 1; text-shadow: 0px 0px 5px #00000075;}
.hero-tagline {font-size: 1.2rem; color: #fff; text-shadow: 0px 0px 5px #00000075;}
.book {    font-size: 16px;
    background: #FFC107;
    color: #000c5f;
    padding: 10px 40px;
    border-radius: 4px;
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
    margin-top: 25px;}

.exclusive { background: var(--bb-50);}
.features { max-width: 320px; margin:0px auto;}
.features h5 { font-weight: 700; margin-top: 20px; font-size:1rem;}
.features p {}

.ports-main { background: var(--bb-100);}
.port-box p { padding:5px; margin-bottom: 0;}

.content-title { font-weight: 800; font-size: 1.4rem; margin-top: 30px;}

footer { background: var(--bb-950); color: #9ea3bc;}
footer h3 { color: #fff; font-size: 1.2rem; margin-bottom: 20px;}
footer ul {padding:0px;}
footer ul li {list-style: none;}
footer ul li a {color: #9ea3bc; text-decoration: none; padding-bottom: 5px; display: block;}

.social { display: flex; gap:20px;}
.social a { color: #fff;}

.logos { }
.hero-inner { background: url(../images/inner-hero.webp) no-repeat center bottom; padding-top: 150px; padding-bottom: 150px; background-size: cover;}

.mob-menu {padding:0px;}
.mob-menu li {padding:5px; list-style:none;}
.mob-menu li a { padding:10px; display: block; border-bottom: 1px solid var(--bb-100); text-decoration: none; color: #000C5F; font-weight: 700;}

.menu-btn { border:0px; background: var(--bb-200); color: var(--bb-950); padding:5px 10px; border-radius: 100px;}


.cruise-offer-box { display: flex; align-items: center; gap:15px; justify-content: space-between;}
.cruise-offer-box small {}
.cruise-offer-box span {font-size:22px; font-weight: 700;}
.cruise-offer-box a { border:2px solid var(--bb-950); padding:10px 30px; display: inline-block; text-decoration: none; color: var(--bb-950); font-weight: 700;}
.cruise-offer-box a:hover { background: var(--bb-950); color: #fff;}

.accordion { background: transparent!important;}
.accordion-item { background: var(--bb-300); border:0px;}
.accordion-button:not(.collapsed) { 
color: var(--bb-950);
    background-color: var(--bb-300);
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color); }

    .div-faqs { background: var(--bb-200); padding:20px; border-radius: 24px; margin-top: 150px;}

.accordion-button { background: var(--bb-200); font-weight: 800; color: var(--bb-900);}
.accordion-body { color: var(--bb-950);}