:root {
    --padding-footer-alignment: 8rem;
    --primary-color: #ED1C22;
    --secondary-color: #22235C;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    background-image: url('../images/BG element - with color background.png');
    background-size: 100%; /* Adjust as needed */
    background-repeat: repeat; /* Prevent image from repeating */
    margin-bottom: 60px;
}

.padding-bottom-footer {
    padding-bottom: var(--padding-footer-alignment);
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 2rem;
    color: white !important;
    background-color: var(--secondary-color);
    padding: 1rem 0 1rem 0;
    min-height: var(--padding-footer-alignment);
}

.footer-link {
    text-decoration: none;
    color: white;
}

    .footer-link:hover {
        color: var(--primary-color);
        transition: 0.5s ease-in-out;
    }

.footer-content {
}

.footer-social-media-link {
    color: white;
    font-size: 1.5rem
}

    .footer-social-media-link:not(:last-child) {
        margin-right: 2rem;
    }

.form-group {
}

h3 {
    text-align: center;
    font-weight: bold;
}

h1 {
    text-align: center;
    font-weight: bold;
    font-size:25px;
}


/* Style the form container */
form {
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* Glossy shadow effect */
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white background */
    opacity: 0.9; /* Adjust transparency */
}

/* Adjust the form content */
.form-group {
    margin-bottom: 15px;
}

a {
    color: white;
}
/* Style select dropdown */
.form-select {
    width: calc(100% - 24px); /* Adjust width to accommodate space for arrow */
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 8px;
    background-color: #f9f9f9; /* Light gray background */
    cursor: pointer;
    appearance: none; /* Remove default appearance */
    -webkit-appearance: none; /* For older versions of Safari */
    transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transition */
    font-family: 'Arial', sans-serif; /* Elegant font */
    color: #444; /* Text color */
    /*margin-bottom:*/ /* Add space between select elements */
}

    
    /* Styling for dropdown arrow */
    .form-select::after {
        content: '\25BC'; /* Unicode for down arrow */
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        font-size: 16px;
        color: #666; /* Dark gray color */
    }

    /* Remove default select arrow icon in modern browsers */
    .form-select::-ms-expand {
        display: none;
    }

.menu-link {
    color: black;
}

    .menu-link:hover {
        color: red;
    }

    .menu-link:active{
        color:red;
    }
    button {
        border-radius: 20px;
        border-color: #007bff;
        color: black;
        background-color: transparent;
        color: black !important;
        font-size: 18px;
        padding: 12px 24px;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s, box-shadow 0.3s;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
    }

.btn:hover {
    background-color: red; /* Darker shade on hover */
}

.return {
    border: 1px solid;
    border-radius: 20px;
    text-align: center;
    color: white;
    background-color: #007bff;
    width: 100px;
}

a {
    border-radius: 20px;
    border-color: #007bff;
    color: black;
}

.expiry {
    color: red;
}

.styled-ol {
    counter-reset: section;
    list-style: none;
    padding-left: 25rem;
}

    .styled-ol > li {
        counter-increment: section;
        margin: 5px 0;
        padding: 5px;
        background-color: transparent;
        border-radius: 3px;
        position: relative;
    }

        .styled-ol > li::before {
            content: counter(section) ". ";
            font-weight: bold;
            margin-right: 5px;
        }

    .styled-ol ol {
        counter-reset: subsection;
        list-style: none;
        margin-left: 20px;
        padding-left: 20px;
    }

        .styled-ol ol > li {
            counter-increment: subsection;
            background-color: transparent;
        }

            .styled-ol ol > li::before {
                content: counter(section) "." counter(subsection) " ";
                font-weight: bold;
                margin-right: 5px;
            }

        .styled-ol ol ol {
            counter-reset: subsubsection;
            list-style: none;
            margin-left: 20px;
            padding-left: 20px;
        }

            .styled-ol ol ol > li {
                counter-increment: subsubsection;
                background-color: transparent;
            }

                .styled-ol ol ol > li::before {
                    content: counter(section) "." counter(subsection) "." counter(subsubsection) " ";
                    font-weight: bold;
                    margin-right: 5px;
                }


.notification-box{
    align-content:center;
    margin-bottom:50rem !important;
}

.whatsapp-button {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    background-color: #23C943;
    border-radius: 1rem 1rem 1rem 0rem;
    color: white;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    width: 3.5rem;
    height: 3.5rem;
    line-height: 2rem;
    text-align: center;
}

    .whatsapp-button .fa-whatsapp {
        font-size: 2rem;
        line-height: 3.5rem;
    }

    .whatsapp-button:hover {
        background-color: white;
        color: #23C943;
        transition: 1s;
    }