/* --------------------------------------------------------
Style Sheet for Ensign PWA Mobile App
version: 1.0
author: themepassion
email: themepassion@jaybabani.com
----------------------------------------------------------*/

/*-------------------------------------
TABLE OF CONTENTS:
-------------------------------------*/

/*-------------------------------------
+ Import Font
+ General Layout
+ Typography
+ Page Title
+ Helper Classes
+ Preloader
+ UI - buttons
+ UI - badges & Waves
+ UI - Colors
+ UI - Toasts
+ UI - Modal
+ UI - Grid
+ UI - Icons
+ Form Select
+ Dropdowns
+ Mediabox
+ Date picker
+ Time picker
+ Feature Discovery
+ Carousel
+ Carousel Home Screen
+ Slider
+ Testimonials
+ Floating action buttons
+ Tooltip
+ Highlight
+ Breadcrumbs
+ Buttons
+ Badges
+ Blockquote
+ Pagination
+ Spineers / preloaders
+ Carousel Basic
+ Accordion
+ Waves
+ Modal
+ Page Top Bar
+ Page Top Bar - Left Align
+ Page Top Bar - App Based
+ Page Top Bar - Right Aligned
+ Page Top Bar - Dark Style
+ Page Top Bar - Colored Style
+ Navigation Menu
+ Navigation Menu - Centered 
+ Navigation Menu - Dark Style
+ Navigation Menu - Colored Style
+ Sub pages - Inner Menu Links
+ Footer
+ Footer - Light Style
+ Footer - Colored Style
+ Footer - Minimal
+ Navigation User Menu
+ Drop Down
+ Collection
+ Progress Bars
+ Back to top button
+ Cards
+ Tabs
+ Icon Boxes
+ Chips
+ Form Range Sliders
+ Switches
+ Form Elements
+ Checkboxes
+ Radio Buttons
+ Select
+ Settings
+ Parallax
+ Masonry
+ Cards Wrap
+ Chat
+ Calendar
+ Events
+ Mailbox / Messages
+ Profile Page
+ Timeline
+ Portfolio
+ Blogs
+ Blogs - Aligned
+ Blogs - Small Left Style
+ Blogs - Medium Left Style
+ Blogs - Small Right Style
+ Blogs - Medium Right Style
+ Blogs - Small Alternate Style
+ Blogs - Medium Alternate Style
+ Blogs - Non Image
+ Login Page
+ Welcome page
+ Error Pages 
+ Search Page 
+ Pricing Tables
+ Invoice
+ Notifications
+ Edit Profile
+ App Settings
+ Clients
+ Fixed Footer Menu
+ Fixed Footer Menu - Dark Style
+ Fixed Footer Menu - Colored Style
+ Perfect Scrollbar
+ Table
+ Contact us page
+ Fancybox
+ Image Filter Overlay
+ Site - Dark Mode
+ Site - Dark Mode - Calendar
+ Site - Dark Mode - Events
+ Site - Dark Mode - Collections
+ Site - Dark Mode - Chat
+ Site - Dark Mode - Edit Profile
+ Site - Dark Mode - UI
+ Site - Dark Mode - Cards
+ Site - Dark Mode - Table
+ Site - Dark Mode - Badge and collapsible
+ Site - Dark Mode - Dropdown
+ Site - Dark Mode - Tabs
+ Site - Dark Mode - Iconboxes
+ Site - Dark Mode - Pagination
+ Site - Dark Mode - Modal & Waves
+ Site - Dark Mode - Forms
+ Site - Dark Mode - Datepicker and Timepicker
+ Site - Dark Mode - Checkbox & Radio
+ Site - Dark Mode - Chips
+ Site - Dark Mode - Range & Select
+ Site - Dark Mode - Switches
+ Site - Dark Mode - Inputs
+ Site - Dark Mode - Timeline
+ Site - Dark Mode - Pricing Tables & Search
+ Site - Dark Mode - Blogs
+ Site - Dark Mode - Client
+ Site - Dark Mode - Calendar
+ Site - Dark Mode - Portfolio
+ Site - Dark Mode - UI Icons

--------------------------------------*/

/*-------------------------------------
  Variables
  + Font: Roboto
  + Primary Color: var(--primary-color) / rgba(var(--primary-rgb), 1)
  + Accent Color: var(--accent-color) / rgba(var(--accent-rgb), 1)
  + Text Color: var(--dark-700)
  + Background Color: #f5f5f5
  + Dark Mode Background Color: var(--dark-900) / var(--dark-800) / var(--dark-700)
  + Dark Mode Text Color: #f5f5f5 / #CFD8DC

-------------------------------------*/

/*-------------------------------------
  Import Font
-------------------------------------*/

/* @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,600); */
/* @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Roboto&display=swap');  */
/* @import url('https://fonts.googleapis.com/css2?family=Lora:ital@1&family=Poppins:wght@400;500;600;700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400;1,700&family=Work+Sans:wght@300;400;500;600;700&display=swap');

@import url("variables.css");

@import url("_general.css");
@import url("_preloader.css");
@import url("_ui.css");
@import url("_datepicker.css");
@import url("_timepicker.css");
@import url("_carousel.css");
@import url("_carousel-home-screen.css");
@import url("_slider.css");
@import url("_testimonials.css");
@import url("_floating-action.css");
@import url("_tooltips.css");
@import url("_buttons.css");
@import url("_badges.css");
@import url("_blockquotes.css");
@import url("_pagination.css");
@import url("_spinners.css");
@import url("_accordion.css");
@import url("_waves.css");
@import url("_modal.css");
@import url("_topbar.css");
@import url("_navigation.css");
/* @import url("_navigation-centered.css"); */
@import url("_navigation-dark.css");
@import url("_navigation-colored.css");
@import url("_subpages.css");
@import url("_footer.css");
@import url("_footer-light.css");
@import url("_footer-colored.css");
@import url("_footer-minimal.css");
@import url("_dropdown.css");
@import url("_collection.css");
@import url("_progress.css");
@import url("_backtotop.css");
@import url("_cards.css");
@import url("_tabs.css");
@import url("_iconboxes.css");
@import url("_chips.css");
@import url("_form-range-sliders.css");
@import url("_switches.css");
@import url("_form-elements.css");
@import url("_settings.css");
@import url("_parallax.css");
@import url("_chat.css");
@import url("_calendar.css");
@import url("_events.css");
@import url("_mailbox.css");
@import url("_profile.css");
@import url("_timeline.css");
@import url("_portfolio.css");
@import url("_blogs.css");
@import url("_products.css");
@import url("_login.css");
@import url("_welcome.css");
@import url("_error.css");
@import url("_search.css");
@import url("_pricing.css");
@import url("_invoice.css");
@import url("_notifications.css");
@import url("_profile-edit.css");
@import url("_app-settings.css");
@import url("_clients.css");
@import url("_fixed-footer-menu.css");
@import url("_perfect-scrollbar.css");
@import url("_tables.css");
@import url("_contactus.css");
@import url("_fancybox.css");
@import url("_image-filter.css");
@import url("_shadow.css");
@import url("_team.css");
@import url("_charts.css");
@import url("_activity.css");
@import url("_page-heading.css");
@import url("_actions.css");
@import url("_menu-effect.css");
@import url("_site-darkmode.css");


#modalsearch.modal {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-height: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.search-container {
    width: 100%; /* Ensures the container takes full width */
    padding: 0; /* Ensure no padding that might restrict width */
}

input[type="search"] {
    width: 100%; /* Makes the input field fill its container */
    box-sizing: border-box; /* Ensures padding doesn't increase element's width */
}

.search-container input[type="search"] {
    width: 100% !important;
}

@media only screen and (max-width: 600px) {
    input[type="search"] {
        width: 100%;
    }
}

/* Vertically center the content */
#modalsearch .modal-content.center-wrap {
  height: 100vh;
  padding: 0;             /* remove default modal padding */
  display: flex;
  align-items: center;    /* vertical center */
  justify-content: center;/* horizontal center */
}

/* Constrain the search bar width */
#modalsearch .search-bar {
  width: min(720px, 92vw);
}

/* Mobile (≤600px) - 90px from top */ @media only screen and (max-width: 600px) { #modalsearch .modal-content.center-wrap { align-items: flex-start; justify-content: center; padding-top: 200px; } }

/* Close button bottom center */
#modalsearch .close-btn {
  position: fixed;
  bottom: 24px;   /* distance from bottom */
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  z-index: 1001;
  opacity: 0.9;
}
#modalsearch .close-btn:hover { opacity: 1; }


/* Cookies */
  :root {
	--body-font: Work Sans, sans-serif;
    --body-color: #252525;
    --primary-color: #CFA24A;
  }
  
  .cookie-box {
    position: fixed;
    right: 18px;
    bottom: 18px;
    background: var(--body-color);
    color: #fff;
    width: 350px;
    border-radius: 10px;
    padding: 1rem 1.1rem 1.1rem 1.1rem;
    display: flex;
    gap: 0.8rem;
    box-shadow: 0 12px 35px rgba(0,0,0,0.4);
    z-index: 9999;
    border: 1px solid rgba(255,255,255,0.04);
    animation: cookie-slide-up .25s ease-out;
    font-family: var(--body-font);
  }
  @keyframes cookie-slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .cookie-box__icon {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-top: 2px;
  }
  .cookie-box__title {
    font-weight: 600;
    margin-bottom: 0.35rem;
    font-size: 1.1rem;
  }
  .cookie-box__text {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 1rem;
  }
  .cookie-box__link {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--primary-color);
    text-decoration: underline;
  }
  .cookie-box__actions {
    display: flex;
    gap: 0.5rem;
  }
  .cookie-box__btn {
    border: none;
    padding: 0.35rem 1rem;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all .15s ease-out;
    font-family: inherit;
	letter-spacing: 0.05em;
	text-transform: uppercase;
  }
  .cookie-box__btn--accept {
    background: var(--primary-color);
    color: #000;
  }
  .cookie-box__btn--accept:hover {
    background: #b68c3e;
  }
  .cookie-box__btn--decline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
  }
  .cookie-box__btn--decline:hover {
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
  }
  @media (max-width: 500px) {
    .cookie-box {
      right: 10px;
      left: 10px;
      width: auto;
      bottom: 10px;
    }
  }