[viewBag]
==
<!-- header-area start here -->
   <header class="container header-area">
      <!-- header-top -->
      <div class="top-header d-none">
         <div class="container">
            <div class="d-flex align-items-center justify-content-between">
               <div class="header-logo">
                  <a href="/"><img src="{{ commonDetail.logo_light|media }}" alt="header-logo"></a>
               </div>
               <div class="d-flex align-items-center justify-content-end top-flex-div">
                  <div>
                     <a target="_blank" href="https://ibe.caribbeantravelandtours.com/auth/login">Travel Advisor Login</a>
                  </div>
                  <ul class="d-flex gap-4 align-items-center">
                     {#<li><a href="#">Login</a></li>#}
                     <li><a href="/customer-profile" class="sign-up">Customer Profile</a></li>
                  </ul>
                  <ul class="d-flex gap-4 social__logo">
                     <li><a href="https://www.facebook.com/CaribbeanTravelTours"><img src="{{ 'assets/assetsmain/images/facebook.svg'|theme }}" alt="facebook-logo"></a></li>
                     <li><a href="https://www.instagram.com/caribbeantraveltours"><img src="{{ 'assets/assetsmain/images/instagram.svg'|theme }}" alt="instagram"></a></li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
      <!-- header-nav -->
      <nav class="header-nav d-none ">
         <div class="container">
            <div class="d-flex header-nav-flex">
               <ul class="header-list d-flex align-items-center justify-content-center w-100">
                  <li><a href="/">Home</a></li>
                  <li><a href="/collections">Collections</a></li>
                  <li><a href="/featured-offers">Featured Offers</a></li>
                  <li><a href="/travel/islands">Destinations</a></li>
                  <li><a href="/contact-us">Contact</a></li>
               </ul>
            </div>
         </div>
      </nav>
      <!-- sm-header -->
      <div class="container sm-header d-block pb-2" style="
    position: absolute;">
         <div class="container">
            <div class="d-flex justify-content-between align-items-center header-bar">
               <div class="header-logo first">
                  <a href="/"><img style="{#width:250px;#}" src="{{ commonDetail.logo_light|media }}" alt="header-logo"></a>
               </div>
               <div class="d-flex align-items-center justify-content-end top-flex-div d-none d-lg-block">
                  <div>
                  </div>
                  <ul class="d-flex gap-4 align-items-center">
                     <li><a href="https://ibe.caribbeantravelandtours.com/auth/login">Travel Advisor Login</a></li>
                     <li><a href="/customer-profile" class="sign-up">Customer Profile</a></li>
                     <li><a href="https://www.facebook.com/CaribbeanTravelTours"><img src="{{ 'assets/assetsmain/images/facebook.svg'|theme }}" alt="facebook-logo"></a></li>
                     <li><a href="https://www.instagram.com/caribbeantraveltours"><img src="{{ 'assets/assetsmain/images/instagram.svg'|theme }}" alt="instagram"></a></li>
                  </ul>
               </div>
               <button data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample" class="h4 text-black m-0 pb-2 pl-3" style="padding-left: 20px;" type="button"><i class="fa-solid fa-bars-staggered" style="color: white;"></i></button>
            </div>
         </div>
      </div>
   </header>
   <!-- Offcanvas start here -->
   <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
      <div class="offcanvas-header justify-content-between">
         <div class="header-logo">
            <a href="#"><img style="width: 150px;" src="{{ 'assets/assetsmain/images/header-logo.svg'|theme }}" alt="image"></a>
         </div>
         <button type="button" class="h4 text-black m-0 pb-2" data-bs-dismiss="offcanvas" aria-label="Close"><i
               class="fa-regular fa-xmark"></i></button>
      </div>
      <div class="offcanvas-body">
         <ul class="header-list">
              <li><a href="/">Home</a></li>
              <li><a href="/collections">Collections</a></li>
              <li><a href="/featured-offers">Featured Offers</a></li>
              <li><a href="/travel/islands">Destinations</a></li>
              <li><a href="/contact-us">Contact</a></li>
         </ul>
         <ul class="d-flex gap-2 align-items-center login-signup-div d-lg-none">
            {#<a href="#" class="w-100 text-center py-3 text-white sign-up" style="background-color: #218ABD;">Login</a>#}
            <a href="/customer-profile" class="sign-up w-100 text-center py-3 text-white">Sign Up</a>
         </ul>
         <ul class="d-flex gap-4 social__logo d-lg-none">
             <li><a href="https://www.facebook.com/CaribbeanTravelTours"><img src="{{ 'assets/assetsmain/images/facebook.svg'|theme }}" alt="facebook-logo" style="filter: invert(1);"></a></li>
             <li><a href="https://www.instagram.com/caribbeantraveltours"><img src="{{ 'assets/assetsmain/images/instagram.svg'|theme }}" alt="instagram" style="filter: invert(1);"></a></li>
         </ul>
      </div>
   </div>