:root {
    /* Primary colors */
    --color-primary: rgb(15, 117, 76);
    --color-primary-dark: rgb(11, 88, 57);
    --color-primary-darker: rgb(7, 59, 39);
    --color-primary-light: rgb(18, 146, 95);
    --color-primary-darkest: rgb(23, 34, 27);
    
    /* Background colors */
    --color-bg-primary: white;
    --color-bg-secondary: rgb(241, 250, 242);
    --color-bg-tertiary: rgb(230, 238, 230);
    --color-bg-quaternary: rgb(225, 255, 227);
    --color-bg-chat: rgb(237, 253, 243);
    --color-bg-button: rgb(222, 247, 222);
    
    /* Text colors */
    --color-text-primary: black;
    --color-text-secondary: rgb(70, 70, 70);
    --color-text-tertiary: rgb(107, 107, 107);
    --color-text-quaternary: rgb(143, 143, 143);
    --color-text-link: rgb(49, 95, 49);
    
    /* Border colors */
    --color-border-light: rgb(231, 231, 231);
    --color-border-lighter: rgb(233, 233, 233);
    
    /* Shadow colors */
    --color-shadow-light: rgba(0, 0, 0, 0.05);
    --color-shadow-dark: rgba(0, 34, 7, 0.2);
}

html {
    scroll-behavior: smooth;
    font-family: 'Source Sans Pro', sans-serif;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: thin;
    /* height: 100vh; */
}
body {
    scroll-behavior: smooth;
    font-family: 'Source Sans Pro', sans-serif;
    /* height: fit-content; */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Fill the viewport height */
}
body.modal-open {
  padding-top: var(--header-height, 60px); /* fallback to 60px */
}
body.modal-open #header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1040;
}
html, body {
    margin: 0;
    padding: 0;
}
.main {
    margin: auto;
}
.widthcontainer {
    width: 60vw;
}
@media only screen and (max-width: 1400px) {
    .widthcontainer {
        min-width: 90vw;
    }
}

#header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1100;
    background-color: var(--color-bg-primary);
    transition: border 0.3s ease; /* Smooth transition */
    border-bottom: 1px solid transparent;
}
#header.scrolled {
    border-bottom: 1px solid var(--color-border-light);
}
#header a {
    text-decoration: none;
    color: var(--color-primary);
}
/* #header a:hover {
    color: var(--color-text-primary);
} */
#header h1 {
    font-family: "Almarai", sans-serif;
    font-weight: 700;
    font-size: max(1.6vw,16px);
    padding-top: 2px;
}
#header h5 {
    font-family: "Almarai", sans-serif;
    font-weight: 700;
}
#header .menuitem a {
    text-decoration: none;
    /* font-weight: 600; */
    color: var(--color-primary-dark);
}
#mobilenav .menuitem a {
    text-decoration: none;
    color: var(--color-primary-dark);
}
#header .menuitem a:hover,
#mobilenav .menuitem a:hover {
    color: var(--color-primary-darkest);
}
#header .menuitem h4 {
    font-size: max(1.2rem,20px);
    /* font-weight: 600; */
}
#header .menuitem h6 {
    font-weight: 600;
    font-size: 1.1em;
}
.logo {
    text-align: center;
    max-width: min(8vw,40px);
}
#header .menu_signin {
    text-decoration: none;
    border: 2px solid var(--color-primary-dark);
}
#header .menu_signin:hover {
    background-color: var(--color-primary-dark);
    border: 2px solid var(--color-primary-dark);
}
#header .menu_signin:hover a {
    color: var(--color-bg-primary);
    text-decoration: none;
}

#header .menu_start {
    border-radius: 0.5em;
    text-decoration: none;
    background-color: var(--color-primary-dark);
    border: 2px solid var(--color-primary-dark);
}
#header .menu_start a{
    color: white;
}
#header .menu_start:hover {
    border: 2px solid var(--color-primary-dark);
    background-color: white;
}
#header .menu_start:hover a {
    color: var(--color-primary-dark);
    text-decoration: none;
}

#mobilenav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg-primary); /* Semi-transparent background */
    z-index: 1095;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0; /* Hidden by default */
    visibility: hidden; /* Hidden but still in the layout */
    transform: translateY(-100%); /* Start off-screen for the slide effect */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth animation */
}
#mobilenav.open {
    opacity: 1; /* Fully visible */
    visibility: visible; /* Make the element visible */
    transform: translateY(0); /* Slide in from the top */
}
#mobilenav #navitems {
    margin-bottom: auto;
}
#mobilenav #navitems:first-child{
    margin-top: 10vh;
}
#mobilenav .menuitem {
    padding-left: 1.5em;
}
#mobilenav .menuitem h6{
    font-weight: 500;
    color: var(--color-text-quaternary);
}
#mobilenav .footer {
    font-size: 0.8em;
}
#mobilenav .menu_signin a {
    font-weight: 500;
}

/* Base styles for smooth transition */
#menu-icon {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Hamburger icon (initial state) */
.icon-bars {
    transform: rotate(0deg); /* No rotation */
}
/* Close icon (rotated state) */
.icon-x {
    transform: rotate(90deg); /* Rotate the icon 90 degrees */
}
/* Optional: Hide the original hamburger and change to 'X' */
.icon-x::before {
    content: "\f00d"; /* FontAwesome 'fa-times' (X) */
    font-family: FontAwesome;
}

#stickyheader {
    background-color: var(--color-bg-primary);
    opacity: 0; /* Hidden initially */
    pointer-events: none; /* Disable interactions when hidden */
    position: fixed; /* Position fixed to ensure it's always on-screen */
    left: 0;
    width: 100%;
    z-index: 98;
    transform: translateY(-20px); /* Slide the element up off-screen */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth fade-in and slide-in */
    border-bottom: 1px solid transparent;
}
/* Element becomes visible and sticky */
#stickyheader.visible {
    opacity: 1; /* Make it visible */
    pointer-events: auto; /* Enable interactions when visible */
    transform: translateY(0); /* Slide it into view */
    border-bottom: 1px solid var(--color-border-light);
}
#stickyheader.hidden{
    display: none;
}

.quoteCard {
    border-radius: 5px;
    background-color: var(--color-bg-quaternary);
    padding: 0.7em;
}
.mybreadcrumb a {
    text-decoration: underline;
    color: var(--color-primary);
    border-radius: 4px;
}
.mybreadcrumb a:hover {
    background-color: var(--color-primary-light);
}
.mybreadcrumb > div:first-child {
    padding: 0.2em 0.5em 0 0.5em;
}
.mybreadcrumb > div:first-child > a {
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2em;
    padding: 0 0.2em;
}
.mybreadcrumb a .pagenum{
    font-size: 0.8em;
}
.myquote {
    padding: 0.7em 1em 0.3em 1em;
    color: var(--color-text-secondary);
}

.myquote h2 {
    font-size: 1.1em;
    margin: 0;
    color: var(--color-text-primary);
    font-weight: 600;
}
.myquote h3 {
    font-size: 1.1em;
    margin: 0;
    color: var(--color-text-primary);
}
.myquote h4 {
    font-size: 1.0em;
    margin: 0;
    color: var(--color-text-primary);
}

@media only screen and (max-width: 992px) {
    footer {
        display: none;
    }
}
footer {
    font-size: 0.9em;
    background-color: var(--color-bg-tertiary);
    padding: 0.4em 1em;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    bottom: 0;
    left: 0;
    transition: bottom 0.3s ease;
}
footer a {
    color: var(--color-primary);
    text-decoration: none !important;
}
.footer-left, .footer-center, .footer-right {
    flex: 1;
}
.footer-center {
    text-align: center;
}
.footer-right {
    text-align: right;
}

/* Landing page */
.rotating-text {
  font-size: 3rem;
  line-height: 1.2;
}

.window {
  display: inline-block;
  overflow: hidden;
  flex-grow: 1; /* Allows .window to grow and take up remaining space */
  height: calc(3rem * 1.2);
  vertical-align: bottom;
}

.window-inner {
  display: inline-block;
  animation: scroll-text 20s ease-in-out infinite;
}
.window span {
  display: block;
}

/* Keyframes: Smooth scroll, then pause */
@keyframes scroll-text {
  0% {
    transform: translateY(0%);
  }
  20% {
    transform: translateY(calc(-20%));
  }
  40% {
    transform: translateY(calc(-40%));
  }
  60% {
    transform: translateY(calc(-60%));
  }
  80% {
    transform: translateY(calc(-80%));
  }
  100% {
    transform: translateY(calc(-80%));
  }
}

/* Landing page */
#homepage #hero {
    margin: 10em 0;
}
#homepage #hero,
#homepage #hero h1 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
}

/* Shimmer Button Styling */
#homepage #hero #btn-getstarted {
    position: relative;
    padding: 0.7em 1.2em;
    color: var(--color-bg-primary);
    background-color: var(--color-primary);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    transition: background-color 0.3s ease;
}

#homepage #hero #btn-getstarted:hover {
    background-color: var(--color-primary-dark);
}

/* Shimmer Effect in One Direction */
.shimmer-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    height: 100%;
    width: 150%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-25deg);
}
@keyframes shimmer {
    0% {
        left: -150%;
    }
    100% {
        left: 150%;
    }
}
/* Periodic Shimmer Animation */
.shimmer-button::before {
    animation: shimmer 3s infinite;
}


#homepage .boldfont {
    font-weight: 600;
}
#homepage .infosection {
    margin: 10em 0;
}
#homepage .infosection .featurestrip {
    border-radius: 0.6em;
    border: 1px solid var(--color-border-lighter);
    padding: 0.8em 0.5em;
    /* background-color: rgb(219, 238, 255); */
    box-shadow: 0 5px 32px 0 var(--color-shadow-light);
    font-size: 0.9em;
    transition: all 0.3s ease;
}
#homepage .infosection .featurestrip:hover {
    scale: 1.1;
}
#homepage .featurerow {
    width: 85%;
}
@media only screen and (max-width: 992px) {
    #homepage .featurerow {
        width: 100%;
    }
}

#homepage .gifcard img {
    padding: 0.5em;
    border: 1px solid var(--color-border-lighter);
    border-radius: 0.6em;
    box-shadow: 0 5px 32px 0 var(--color-shadow-light);
}

.hover-zoom-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-zoom-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Slightly bigger shadow on hover */
}

#videoContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
    margin-bottom: 20px;
    max-width: 100%;
}

.video-demo {
    max-height: 100%;
    width: auto;
    max-width: 95%; /* prevent overflow on small screens */
    max-height: 800px;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    display: none;
}

.video-demo.active {
    display: block;
}

.section-title {
    text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.13);
}

.carousel-item img {
    max-height: 800px;
    max-width: 90%;
    /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); */
}

.carousel-indicators {
    position: static; /* Remove absolute positioning */
    margin-top: 20px; /* Add some space below the carousel */
    justify-content: center; /* Center the dots */
}

/* Optional: Adjust indicator size */
.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #333;
    opacity: 0.5;
}

.carousel-indicators .active {
    opacity: 1;
    background-color: #000;
}

.checklist {
    list-style-type: none; /* Remove default bullet points */
    padding-left: 0;
}
.checklist li {
    position: relative;
    padding-left: 25px; /* Space for checkmark */
    margin-bottom: 10px; /* Optional: adds space between list items */
}
.checklist li::before {
    content: '✔'; /* Unicode checkmark */
    position: absolute;
    left: 0;
    top: 0;
    color: grey; /* Set checkmark color */
    font-weight: bold;
}

/* #payment .card:hover {
    scale: 1.0;
} */
#unlimited .card,
#unlimited .card:hover,
#unlimited .card .checklist li::before {
    background-color: var(--color-primary-dark);
    color: var(--color-bg-primary);
}
#unlimited .price-details span {
    font-size: 1rem; /* Adjust size to match your design */
    line-height: 1rem; /* Adjust line height to ensure correct vertical spacing */
}

#payment button {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}
#free button {
    width: 100%;
    padding: 0.7em 1.2em;
    border-radius: 0.6em;
    background-color: var(--color-text-primary);
    border: 1px solid transparent;
    font-size: 1.1em;
    border: 1px solid none;
}
#free button:hover {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-text-primary);
}
#unlimited button {
    width: 100%;
    padding: 0.7em 1.2em;
    border-radius: 0.6em;
    background-color: var(--color-bg-primary);
    color: var(--color-primary-darker);
    border: 1px solid var(--color-bg-primary);
    font-size: 1.1em;
    border: 1px solid none;
}
#unlimited button:hover {
    background-color: var(--color-primary-darker);
    color: var(--color-bg-primary);
    border: 1px solid var(--color-bg-primary);
}

.verticalfillcontainer {
    flex: 1; /* This will take up the remaining space */
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
}
.verticalfillcontainer .contentcard{
    border-radius: 0.5em;
    box-shadow: 0 5px 32px 0 var(--color-shadow-dark);
}
.btn-google {
    border: 2px solid var(--color-primary-darker);
}
.btn-google:hover {
    border: 2px solid var(--color-primary-darker);
    background-color: var(--color-primary-darker);
    color: var(--color-bg-primary);
}

#dashboard .table-responsive {
    height: 80vh;
    overflow: scroll;
    padding-bottom: 10vh;
}

/* Core app */
.bottom.d-flex.justify-content-between.align-items-center {
    padding-top: 2px;
}

/* Highlight and offset */
.mobile-message.selected {
    background-color: #e3fcef !important;
    border-left: 4px solid var(--color-primary);
    position: relative;
}

.mobile-message.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--color-primary);
}
#mobileCategoriesToolbar > div[role="button"]:active {
    background-color: #f1f1f1;
}
.dropdown-menu {
    z-index: 1055 !important;
}
.desktop-message-content {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0.5em;
    padding-right: 3rem;
}
.modal-open[style] {
    padding-right: 0px !important;
}
#mobileCategoriesToolbar {
    background-color: white;
    overflow: visible !important;
}
.modal-dialog {
    max-height: 80vh;
}
.modal-body {
    scrollbar-width: thin;
}
#mediaModalEnabled img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.open-message-modal:hover{
    background-color: #f8f9fa;
    border-left: 4px solid var(--color-primary);
}