/* 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: #fbf6fe;
--bb-100: #f5eafd;
--bb-200: #ecd9fb;
--bb-300: #ddbbf7;
--bb-400: #c890f0;
--bb-500: #b365e7;
--bb-600: #9f45d8;
--bb-700: #8933bd;
--bb-800: #742e9b;
--bb-900: #51216b;
--bb-950: #41105b;

--gg-50: #faffe6;
--gg-100: #f4fec9;
--gg-200: #e8fc9a;
--gg-300: #d4f75f;
--gg-400: #bfec2f;
--gg-500: #9aca0f;
--gg-600: #7ca808;
--gg-700: #5e800b;
--gg-800: #4b650f;
--gg-900: #3f5512;
--gg-950: #202f04;
}
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: #364051!important;
    font-size: 1rem;
     font-family: Mulish, sans-serif;
    font-weight: 500;
    letter-spacing: -.017em;
    line-height: 1.55;
    scroll-behavior: smooth;
}

.container { max-width: 1024px;}

header { background: var(--bb-950);} 

nav ul li a { color: #fff!important; padding:10px 30px!important;}
.nav-num { display: flex; gap:10px;background: var(--gg-600); padding:5px 20px 5px 5px; border-radius: 100px; text-decoration: none; color: #fff;}
.nav-num span {display: block; font-weight:800; line-height: 1;}
.nav-num small {display: block;font-weight:600; font-size:12px}



.currency { border: 1px solid var(--bb-700); background: var(--bb-800); display: inline-flex; align-items: center; padding:5px 10px; border-radius: 100px; gap: 5px; color: #fff; text-decoration: none;} 

.hero { background: var(--bb-950); padding: 150px 0px;}
.hero img { max-width: 600px; width: 100%;}

.tri-hero { display: flex; gap:15px; color: #ffffffce; margin-top: 50px;}
.tri-hero div {background: #00000036; border:1px solid var(--bb-900); padding:5px 30px 5px 40px; border-radius: 100px; position: relative;}
.tri-hero div::before {content: ''; position: absolute; background: var(--bb-600); height: 15px; width: 15px; border-radius: 100px; left:15px; top:10px}

.steps-title { color: var(--bb-900); font-weight: 800; font-size: 24px;}

.cruise-deal-box{ overflow: hidden; border-radius: 12px; box-shadow: 0px 0px 3px #00000044;}
.cruise-deal-box-inner {padding:0px 10px;}
.cruise-deal-details {display: flex; gap:10px; }
.deal-title {font-weight: 700; line-height: 1.2;}
.deal-price {text-align: center; font-weight: 800; color: var(--bb-800);}
.deal-price small {color: #333;}
.shop {display: block; border:2px solid var(--bb-800); border-radius: 100px; color: var(--bb-800); padding:5px 10px; text-align: center; margin-top: 20px; margin-bottom: 10px; text-decoration: none; font-weight: 700; transition: all ease-out .2s;}
.shop:hover { background: var(--bb-800); color: #fff; transition: all ease-in .2s;}

footer { background: var(--bb-950); color: #fff; font-size: 14px;}
footer h5 { font-size: 18px; font-weight: 800; margin-bottom: 20px;}

footer ul { padding:0px;}
footer ul li { list-style: none; padding-bottom:10px;}
footer ul li a { text-decoration: none; color: #fff; }

.menu-toggle { border:0px; background: var(--bb-800); color: #fff; border-radius: 100px; padding:10px;}
.mob-menu { padding:0px}
.mob-menu li { list-style: none; padding:2px;}
.mob-menu li a { color: var(--bb-950); padding:10px; display: flex; align-items: center; gap: 5px; text-decoration: none; background: var(--bb-100); border-radius: 12px;}

.highlights { background: var(--bb-50); padding:80px; border-radius: 30px;}


.accordion-button:not(.collapsed) { background: var(--bb-100); color: var(--bb-900);}
 .accordion-button::after {
   
      font-size: 1.2rem;
      
      transition: transform 0.3s ease;
    }
    .accordion-button:not(.collapsed)::after {
      transform: rotate(-180deg);
    }
    .accordion-button {
      font-weight: 800;
    }
    .accordion-item {
      border: none;
      border-bottom: 1px solid #eee;
    }
    .accordion-header span {
      margin-right: 10px;
      font-weight: 600;
      color: var(--bb-800);
      font-weight: 800;
    }


@media screen and (max-width:767px){
    .tri-hero { display: flex; flex-flow: column;}
}