* {
    font-family: 'Alexandria', sans-serif;
    scroll-behavior: smooth !important;
}

.gradient-text {
    background: linear-gradient(180deg, #45b385 0%, #1ba1b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-bg {
    background: linear-gradient(90deg, #45b385 0%, #1ba1b8 100%);
}

input[type="checkbox"] {
    width: 15px;
    height: 15px;
    transform: scale(1.5);
    accent-color: #1ba1b8;
}

.toast {
    visibility: hidden;
    position: fixed;
    top: 20px;
    right: 50%;
    transform: translateX(50%);
    padding: 16px;
    border-radius: 8px;
    z-index: 1000;
    transition: visibility 0.5s, opacity 0.5s linear;
    opacity: 0;
}

.toast.show {
    visibility: visible;
    opacity: 1;
}


.error {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: none;
}

.input-error {
    border-color: #ef4444 !important;
}

.swiper-container {
    width: 100%;
    height: auto;
}



.swiper-button-next::after,
.swiper-button-prev::after {
    content: '' !important;
    /* Remove default icons */
}

.swiper-button-next,
.swiper-button-prev {
    color: #000 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
#navbar {
    transition: width 0.4s ease, padding 0.4s ease, background-color 0.4s ease;
}
.section {
/* opacity: 0; */
}
.iti{
    width: 100% !important;
}
@media screen and (max-width:756px) {
    .section {
        opacity: 1 !important;
        }
        
}
/* Style the entire scrollbar */
::-webkit-scrollbar {
    width: 12px; /* Width of the vertical scrollbar */
    height: 12px; /* Height of the horizontal scrollbar */
}

/* Style the scrollbar track */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background color of the track */
    border-radius: 10px; /* Rounded corners */
}

/* Style the scrollbar thumb */
::-webkit-scrollbar-thumb {
    background: #888; /* Color of the scrollbar thumb */
    border-radius: 10px; /* Rounded corners */
    border: 2px solid #f1f1f1; /* Space between the thumb and the track */
}

/* Style the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; /* Darker color on hover */
}

/* Optional: Style the scrollbar buttons */
::-webkit-scrollbar-button {
    background: #ccc;
}

/* Optional: Style the corner where scrollbars meet */
::-webkit-scrollbar-corner {
    background: #999;
}
.iti--inline-dropdown{
    width: 100% !important;
}

  /* Style the container div */
  .throwable-container {
    height: 300px;
    position: relative;
    overflow: hidden !important;

}
/* Style each throwable p element */
.throwable {
    padding: 7px;
    margin: 10px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    text-align: center;
    cursor: grab;
    position: absolute;
    border-radius: 5rem;
    white-space: nowrap;
}


#simulation-container {
    width: 100%;
    height: 300px;
    background-color: white;
    border: 1px solid rgb(219, 216, 216);
    overflow: hidden;
}
@media screen and (max-width: 768px) {
    #simulation-container {
        width: 100%; /* Wider container on mobile */
        height: 300px; /* Taller container for better visibility */
    }
}