@font-face {
    font-family: 'GeneralSansRegular';
    src: url(/assets/fonts/GeneralSans-Regular.woff2)
}

@font-face {
    font-family: 'GeneralSansBold';
    src: url(/assets/fonts/GeneralSans-Semibold.woff2)
}

@font-face {
    font-family: 'GeneralSansRegularItalic';
    src: url(/assets/fonts/GeneralSans-RegularItalic.woff2)
}

@font-face {
    font-family: 'GeneralSansLight';
    src: url(/assets/fonts/GeneralSans-Light.woff2)
}

@font-face {
    font-family: 'BoskaLight';
    src: url(/assets/fonts/Boska-Light.woff2)
}

@font-face {
    font-family: 'BoskaItalicLight';
    src: url(/assets/fonts/Boska-LightItalic.woff2)
}

@font-face {
    font-family: 'BoskaItalicBold';
    src: url(/assets/fonts/Boska-BoldItalic.woff2)
}

@font-face {
    font-family: 'BoskaItalicRegular';
    src: url(/assets/fonts/Boska-MediumItalic.woff2)
}

/* Base Styles */
:root {
    --green: #d3ff6a;
    --ivory: #f6f5e9;
    --accent-blue: #807dff;
}

body {
    font-family: 'GeneralSansRegular';
    color: #1c1c1a;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s;
    cursor: url('/storage/Artboard3.png'), auto;
}


/* Header Styling */
.list_header {
    width: 100%;
    height: 20px;
    background: #1c1c1a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 15px;
    font-weight: 300;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

/* Logo Styling */
.logo img {
    margin-top: 10px;
    height: auto;
    /* Retain original height */
    width: auto;
    padding: 8px 20px 10px 10px;
    max-width: 120px;
    margin-left: 10%;
    justify-content: flex-start;
    width: 100%;
    /* Ensure the image takes full width */
    transition: transform 1.0s ease;
    /* Add transition for smooth effect */
    cursor: url('/storage/Artboard2.png'), pointer !important;
}

.logo image {
    margin-top: 8px;
    height: auto;
    /* Retain original height */
    width: auto;
    padding: 10px 20px;
    justify-content: flex-start;
    max-width: 120px;
    width: 100%;
    /* Ensure the image takes full width */
    transition: transform 1.0s ease;
    /* Add transition for smooth effect */
    cursor: url('/storage/Artboard2.png'), pointer !important;
}

/* Tagline styling */
.logo {
    position: relative;
    /* Necessary for absolute positioning of tagline */
    display: inline-block;
    /* Ensures the logo and tagline are treated as a block */
    cursor: pointer;
    cursor: url('/storage/Artboard2.png'), pointer !important;
}

.logo .tagline {
    height: auto;
    max-width: 100px;
    width: 100%;
    position: absolute;
    top: 40%;
    left: 58px;
    transform: translate(-50%, -50%) rotateX(90deg);
    opacity: 0;
    transition: transform 1.0s ease;
    cursor: url('/storage/Artboard2.png'), pointer !important;
}

/* Specific styles for the GeneralSansRegular font */
.general-sans {
    font-family: 'GeneralSansRegular';
    /* Apply GeneralSansRegular font */
}

/* Hover effect for logo and tagline */
.logo:hover .logo-image {
    transform: rotateX(90deg);
    /* Rotate logo on hover */
    opacity: 0;
    /* Fade out the logo */
}

.logo:hover .tagline {
    transform: translate(-50%, -50%) rotateX(0);
    /* Rotate tagline into view */
    opacity: 1;
    /* Fade in the tagline */
}

/* Navigation Styling */
.top-nav {
    margin-top: 5px;
    margin-bottom: 20px;
    width: 100%;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--green);
    /* padding: 10px 20px; */
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    position: relative;
    /* Ensure positioning for the hamburger */
}

.nav-items {
    position: absolute;
    display: flex;
    justify-content: center;
    gap: 25px;
    width: 100%;
}

/* Hamburger Styling */
.hamburger {
    display: none;
    /* Initially hide it */
    flex-direction: column;
    justify-content: space-around;
    height: 25px;
    width: 30px;
    cursor: pointer;
    position: absolute;
    left: 20px;
    top: 20px;
    /* Place at the top-left corner */
}

.hamburger div {
    width: 30px;
    height: 2px;
    background-color: #1c1c1a;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

/* Search Icon Styling */
.nav-icons .icon {
    height: 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
    position: absolute;
    right: 20px;
    top: 20px;
    /* Place at the top-right corner */
}

.nav-icons .icon:hover {
    transform: scale(1.1);
}

/* Dropdown Styling */
.dropdown {
    position: relative;
    cursor: pointer;
    padding: 0px;
    transition: color 0.3s ease;
}

.dropdownn {
    margin-left: 900px;
}

.dropdown:hover .dropdown-text {
    color: #3b3b3b;
}

.dropdown-text {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    color: #1c1c1a;
    transition: color 0.3s ease;
}

.dropdown-text a {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    color: #1c1c1a;
    transition: color 0.3s ease;
    text-decoration: none;
    /* Removes the underline */
}

.dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
    min-width: 150px;
    background-color: var(--green);
    border-radius: 15px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
    list-style-type: none;
    z-index: 10;
    border-bottom: 1px solid #1c1c1a;
}

.dropdown-list.show {
    display: block;
    max-height: 300px;
    opacity: 1;
    padding: 8px 0;
    margin-left: -10px;
    margin-top: -2px;

}

.dropdown-list a {
    color: #1c1c1a;
    /* Keeping the text color */
    text-decoration: none;
    /* Removes underline */
    border-bottom: none;
    /* Ensures there's no bottom border */
}

.dropdown-list-item {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 10px 15px;
    color: #1c1c1a;
    transition: background-color 0.3s ease, padding-left 0.3s;
    /* border-bottom: 1px solid #bcbcab; */
}

.dropdown-list-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
    padding-left: 20px;
}

.translate-widget {
    border-radius: 15px;
    display: inline-block;
    margin-left: 20px;
    /* Space between "First Timer Ritual" and the widget */
    font-size: 14px;
    /* Match your menu font size */
}

#google_translate_element select {
    border: none;
    background-color: transparent !important;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
}

#google_translate_element select:hover {
    color: #333 !important;
}

/* Style for language selector container */
/* Adjust the language selector container to match the design in the image */
.sweetalert-language-popup {
    border-radius: 15px;
    padding: 20px 20px 80px 20px;
    text-align: center;
}

.language-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.language-selector .globe-icon {
    font-size: 20px;
    color: #555;
}

/* .language-selector select {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
} */


.language-selector select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    background-color: transparent;
    /* Transparent background */
    color: #333;
    /* Text color */
    outline: none;
    appearance: none;
    /* Removes default dropdown styling */
    transition: all 0.3s ease;
    /* Smooth transition for hover and focus */
}

.language-selector select:hover {
    border-color: #007bff;
    /* Change border color on hover */
    cursor: pointer;
    /* Change cursor on hover */
}

.language-selector select:focus {
    border-color: #0056b3;
    /* Darker border color on focus */
    color: #000;
    /* Darker text color on focus */
}

.language-selector select option {
    background-color: #fff;
    /* White background for options */
    color: #333;
    /* Dark text color */
}

.language-selector select option:checked {
    background-color: #007bff00;
    /* Blue background when option is selected */
}

.custom-popup {
    overflow-y: none;
    padding: 0% 5%;
    border-radius: 15px;
    width: 60% !important;
    /* Adjust this percentage to your desired width */

}

/* Basic styling for labels and input fields */
.swal2-input,
.swal2-select {
    width: 100%;
    /* Ensure inputs take full width */
    padding: 8px;
    margin: 8px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
}

.label {
    color: #000000;
    font-size: 16px;
    text-align: left;
    display: block;
    font-family: 'GeneralSansSemiBold';
}


/* Ensure form fields are stacked vertically */
.swal2-input,
.swal2-select,
label {
    display: block;
}


/* Styling for checkboxes */
#checkboxes {
    overflow-y: none;
    margin-left: 10%;
    display: flex;
    flex-direction: column;
    /* Stack items in a column */

}

#checkboxes label {
    display: flex;
    /* Allows for checkbox and label to align properly */
    align-items: left;
    /* Vertically align checkbox and label text */
    margin: 0;
    /* Remove any default margin */
}

/* Optional: add spacing between form groups */
.swal2-input,
.swal2-select {
    margin-bottom: 15px;
    border-radius: 15px;
    font-family: 'GeneralSansRegular';
    appearance: none;
}

.swal2-confirm {
    display: flex !important;
    align-items: flex-end !important;
    right: 2% !important;
    border: 0;
    border-radius: .25em;
    box-shadow: none !important;
    background: initial;
    background-color: #d3ff6a !important;
    color: #1c1c1a;
    font-size: 1em;
    font-family: 'GeneralSansRegular';
    border-radius: 15px;
}

.dynamic-input {
    overflow-y: none;
    margin-bottom: 0px;
}

.swal2-html-container {
    overflow-y: none !important;
}

#categories-container label {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

#categories-container input[type="checkbox"] {
    margin-right: 8px;
}

/* Mobile Styling */
@media (max-width: 768px) {

    /* Hide the regular navigation items on mobile */
    .nav-items {
        display: none;
        /* Hide navigation items */
        width: 100%;
    }

    /* Show the hamburger icon */
    .hamburger {
        display: flex;
        position: absolute;
        left: 20px;
        top: 20px;
    }

    /* Center the logo */
    .logo {
        margin: 0 auto;
        /* Center the logo */
    }

    /* Make the logo smaller on mobile */
    .logo img {
        max-width: 140px;
    }

    /* Flex direction for the top-nav on mobile */
    .top-nav {
        flex-direction: column;
        align-items: center;
        /* Center align items, including the logo */
    }

    /* When hamburger menu is toggled */
    .nav-items.mobile-show {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        padding-top: 10px;
    }

    /* Adjust dropdown for mobile */
    .dropdown-list {
        min-width: 150px;
    }

    /* Adjust the positioning of elements for mobile */
    .nav-icons .icon {
        height: 20px;
        position: absolute;
        right: 20px;
        top: 20px;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .logo img {
        max-width: 120px;
    }

    .nav-icons .icon {
        height: 18px;
    }

    .hamburger {
        margin-top: -2%;

    }
    .custom-popup {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .top-nav {
        margin: 0 !important;
        border-radius: 0 0 15px 15px;
    }
    .hamburger {
        z-index: 100;
    }

    .nav-items.mobile-show {
        background-color: var(--green);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30);
        align-items: center;
        padding: 15px 0 15px 0;
        border-radius: 15px;
        z-index: 99;
        margin-top: 20%;
    }

    /* .dropdown-text {
    cursor: pointer;
    padding: 1rem 0;
    justify-content: center;
  }

  .dropdown-list {
    display: none;
    position: static;
    background: none;
    box-shadow: none;
    padding-left: 1rem;
    width: 100%;
  }

  .dropdown.open .dropdown-list {
    display: block;
  } */
   .dropdown {
            border-bottom: 1px solid #ccc;
            margin-bottom: 10px;
        }

        .dropdown-text {
            padding: 15px;
            cursor: pointer;
            /* background-color: #f5f5f5; */
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            transition: background-color 0.3s;
        }

        .dropdown-text:hover {
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 12px;
        }

        .dropdown-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: none;
            text-align: center;
            animation: fadeIn 0.3s ease-in-out;
        }

        .dropdown-list-item {
            padding: 10px 0;
        }

        .dropdown-list-item a {
            text-decoration: none;
            color: #333;
        }

        .dropdown.open .dropdown-list {
            display: block;
        }

        .dropdown.last .dropdown-text {
            text-align: center;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-5px); }
            to { opacity: 1; transform: translateY(0); }
        }
}