/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

#LoginHeader {
    font-size: 20px;
    text-align: center;
    color: white;
    opacity: 0.6;
    font-weight: 600;
    cursor: pointer;
}
/*test*/
/* Modal styles */
#loadingModal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.4); /* Black background with opacity */
}

#loadingModalContent {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 300px;
    text-align: center;
}

#loadingSpinner {
    border: 16px solid #f3f3f3; /* Light gray */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/*End test*/

.crButton {
    /*width: 250px !important;*/
    width: 65% !important;
    display: inline-block;
    /*padding: 7px 50px;*/
    /*padding: 0.5% 1.3%;*/
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: #E59E60;
    color: white;
    margin-right: 0;
    text-align: center;
    text-decoration: none;
    /*border-radius: 20px;*/
    border-radius: 8px;
    /*font-size: 16px;*/
    font-size: 80%;
    transition: background-color 0.3s;
}

.supportBtn {
    display: grid;
    place-items: center; /* Center the content both horizontally and vertically */
    height: 30%; /* Full height of the viewport */
    text-align: center; /* Ensure the text inside the link is centered */
}

.button {
    /*width: 250px !important;*/
    width: 66% !important;
    display: inline-block;
    /*padding: 7px 50px;*/
    /*padding: 0.5% 1.3%;*/
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: #E59E60;
    color: white;
    margin-right: 0;
    text-align: center;
    text-decoration: none;
    /*border-radius: 20px;*/
    border-radius: 8px;
    /*font-size: 16px;*/
    /*font-size: 80%;*/
    font-size: large;
    color: white !important;
    transition: background-color 0.3s;
 
}

.support-method {
    text-align: center !important;
    display: block;
}


/*#support-box {
    background-color: gainsboro !important;
    margin: 5% 5% 7% 5%;
    justify-content: center !important;
    padding: 20px !important;
    border: 1px solid #888 !important;
    border-radius: 20px !important;
    width: 37% !important;
    height: 85% !important;
}*/
.modal a:hover {
    color: green; /* Change color when hovering over the link */
}

/*.modal-box .supportBtn {*/
/* align-content: center !important;*/
/*margin-left: 18% !important;
}*/
/*E-Services start*/
.links {
    display: flex;
    gap: 20px; /* Space between links */
}

#link.buttonE {
    display: inline-block;
    background-color: #E59E60;
    color: white;
    padding: 12px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    transition: background-color 0.3s;

    /*display: inline-block;
    padding: 6px 13px;*/
    /*padding: 0.5% 1.3%;*/
    /*background-color: #E59E60;
    color: white;
    text-align: center;
    text-decoration: none;
    /*border-radius: 20px;*/
    /*border-radius: 8px;
    /*font-size: 16px;*/
    /*font-size: 80%;
    transition: background-color 0.3s;*/
}

#link.button:hover {
    /*background-color: #0056b3;*/
    background-color: #E59E60;
}
/*E-Services end*/



/*Loading start*/
/* Modal content */
.load-content {
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Make sure the container takes full height of the viewport */
    margin: 0; /* Remove any margin */
    padding: 0; /* Remove any padding */
}


.loader {
    width: 50px;
    height: 50px;
    border: 5px dashed #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 2s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*Loading end*/
.buttonln {
    display: flex;
    justify-content: center; /* Centers the link horizontally */
    align-items: center;
    background-color: #E59E60;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    transition: background-color 0.3s;
    width: 130px; /* Set a fixed width for both buttons */
    height: 40px;
    /* display: inline-block;
    padding: 8px 13px;
    background-color: #E59E60;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    transition: background-color 0.3s;*/
}

/* Style for the unordered list (ul) */
.CrContainer {
    width: 300px; /* Set the width */
    height: 200px; /* Set the height */
    overflow: auto; /* Always show both horizontal and vertical scrollbars */
}

    .CrContainer ul {
        list-style-type: none !important; /* Remove default bullet points */
        padding: 0 !important; /* Remove default padding */
        margin: 0 !important; /* Remove default margin */
        display: grid !important; /* Use Grid layout */
        grid-template-columns: 1fr !important; /* Create one column */
        justify-items: center !important; /* Center items horizontally */
    }

    /* Style for each list item (li) */
    .CrContainer li {
        margin: 10px 0 !important; /* Add space between items */
        padding: 2% 30% !important; /* Add padding inside each list item */
        border: 1px solid #333 !important; /* Border around each item */
        /* background-color: #f0f0f0 !important;*/ /* Background color  */
        background-color: #E59E60 !important; /* Background color */
        border-radius: 8px !important; /* Rounded corners */
    }

    /* Style for the anchor (link) */
    .CrContainer a {
        text-decoration: none !important; /* Remove underline from the links */
        /* color: #333 !important;*/ /* Set link color */
        color: white !important; /* Set link color */
        /* font-weight: bold !important;*/ /* Make the text bold */
    }

/* Hover effects */
.CrContainerli:hover {
    /* background-color: #ddd !important;*/ /* Change background on hover */
    background-color: #2E1A47 !important;
}

.CrContainer a:hover {
    color: #007BFF !important; /* Change text color on hover */
}


/* Global Body Styles */
body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("images/11.png") center/cover no-repeat;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: 0.1s ease;
}
/* Error popup */
.swal2-popup {
    background-color: #f8d7da; /* Light red */
    color: #721c24; /* Dark red text */
    border-radius: 10px; /* Rounded corners */
}

.swal2-title {
    font-size: 20px;
    font-weight: bold;
}

.swal2-confirm {
    background-color: #721c24; /* Dark red button */
    color: white;
    border-radius: 5px;
}

    .swal2-confirm:hover {
        background-color: #5c1b18; /* Darker red on hover */
    }
/* End Error popup */


/* Forget password popup form Styles */
/* Styles for the popup modal */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.4); /* Black with transparency */
    padding-top: 60px;
    justify-content: center;


    align-items: center; /* Center vertically */
}

/* Modal content */
.modal-content {
    background-color: gainsboro !important;
    margin: 5% auto;
    justify-content: center;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 20px;
    width: 80%; /* Can be adjusted */
    max-width: 400px; /*Max width for the form*/
}

.modal-box {
    background-color: gainsboro !important;
    margin: 1% 32% 14% 32%;
    justify-content: center !important;
    padding: 20px !important;
    border: 1px solid #888 !important;
    border-radius: 20px !important;
    width: 36% !important;
    height: 85% !important;
}

/* Close button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: firebrick;
        text-decoration: none;
        cursor: pointer;
    }

    /* Center the form elements */
    h2, .modal-content input, .modal-content button {
        text-align: center;
        width: 100%; /* Make sure text and button take up full width */
    }

    .modal-content input {
        margin-bottom: 10px; /* Space between input fields */
    }

.modal-content button {
    margin-top: 10px; 
    margin-bottom: 25px; 
}


    /*End forget password popup form*/


/* Container Styles */
.container {
    min-height: 100vh;
    display: flex;
    /*align-items: center;*/
    align-items: stretch;
    justify-content: center;
    padding-top: 7%;
    padding-bottom: 7%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: 0.1s ease;
}

/* Wrapper Styles */
.wrapper,
.wrapper2,
.wrapper3 {
    position: relative;
    max-width: 380px;
    width: 100%;
    border-radius: 12px;
    padding: 6px 27px 80px;
    background: #2E1A47;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-left: 1%;
    height: 470px; 
}

/* Responsive Media Queries */
@media screen and (max-width: 600px) {
    .swal2-popup {
        width: 85% !important;
        font-size: 14px;
		margin-top: 50px !important;
                 
    }

    .swal2-title {
        font-size: 18px;
    }

    .swal2-content {
        font-size: 14px;
    }

    .swal2-confirm {
        font-size: 14px;
        padding: 8px 16px;
    }
}
/* For screens up to 600px (common for mobile phones including iPhones) */
@media (max-width: 600px) {
    body {
        background-size: cover; /* Ensure the background image scales properly */
        background-position: center; /* Position the background image to the center */
    }

    .container {
        display: flex;
        flex-direction: column; /* Stack children vertically */
        align-items: center; /* Center items horizontally */
        justify-content: flex-start; /* Align items from the top */
        padding-top: 10%; /* Adjust padding for smaller devices */
        margin-top: 25%; /* Adjust padding for smaller devices */
        padding-bottom: 15%; /* Adjust padding */
    }

    /* Adjust wrapper width, padding, and margin for smaller screens */
    .wrapper,
    .wrapper2,
    .wrapper3 {
        max-width: 320px; /* Decrease max-width for smaller screens */
        padding: 12px 20px 60px; /* Adjust padding for better spacing */
        margin-bottom: 15px; /* Space between stacked wrappers */
    }

    .swal2-popup {
        background-color: #f8d7da;
        color: #721c24;
        border-radius: 10px;
        margin-top: 15px;
        margin-bottom: 50px;
        width: 50%;
    }

    .modal-box {
        background-color: gainsboro !important;
        /*margin: 22% 15% 14% 15%;*/
        margin: 100px 140px 50px 140px;
        justify-content: center !important;
        padding: 20px !important;
        border: 1px solid #888 !important;
        border-radius: 20px !important;
        width: 320px !important;
        height: 400px !important;
        /*width: 70% !important;
        height: 56% !important;*/
    }

        .modal-box p {
            font-size: small;
        }

        .modal-box h2 {
            font-size: x-small;
        }

    .supportBtn {
        display: grid;
        place-items: center; /* Center the content both horizontally and vertically */
        height: 10%; /* Full height of the viewport */
        text-align: center; /* Ensure the text inside the link is centered */
    }

    .button {
        /*width: 250px !important;*/
        width: 80% !important;
        display: inline-block;
        /*padding: 7px 50px;*/
        /*padding: 0.5% 1.3%;*/
        padding-top: 6px;
        padding-bottom: 6px;
        background-color: #E59E60;
        color: white;
        margin-right: 0;
        text-align: center;
        text-decoration: none;
        /*border-radius: 20px;*/
        border-radius: 8px;
        /*font-size: 16px;*/
        font-size: xx-small;
        transition: background-color 0.3s;
        
    }


    .links {
        display: flex;
        flex-direction: column; /* Arrange items in a column */
        gap: 10px; /* Space between links */
        align-items: center; /* Center items horizontally within the column */
    }

    .buttonln {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #E59E60;
        color: white;
        text-decoration: none;
        border-radius: 8px;
        font-size: 16px;
        transition: background-color 0.3s;
        width: 130px;
        height: 40px;
    }

    #link.buttonE {
        display: inline-block;
        background-color: #E59E60;
        color: white;
        padding: 12px 20px;
        text-align: center;
        text-decoration: none;
        border-radius: 8px;
        font-size: 16px;
        transition: background-color 0.3s;
    }

    .emailSup {
        margin-top: 30px;
        padding-top: 13%;
    }
}

/* For screens up to 480px (smaller devices like older iPhones or small screens) */
@media (max-width: 480px) {
    body {
        background-size: cover;
        background-position: center;
    }

    .container {
        display: flex;
        flex-direction: column; /* Stack wrappers vertically */
        align-items: center; /* Center wrappers */
        justify-content: flex-start;
        padding-top: 30%; /*24 Reduce top padding for smaller screens */
        margin-top: 15%; /*10 Adjust padding for smaller devices */
        padding-bottom: 15%;
    }

    /* Adjust wrapper width and padding even further */
    .wrapper,
    .wrapper2,
    .wrapper3 {
        max-width: 280px; /* Further reduce the width of wrappers */
        padding: 10px 15px 50px; /* Decrease padding */
        margin-bottom: 12px; /* Reduce margin between stacked items */
    }
    .swal2-popup {
        background-color: #f8d7da;
        color: #721c24;
        border-radius: 10px;
        margin-top: 15px;
        margin-bottom: 50px;
        width: 50%;
    }

    .modal-box {
        background-color: gainsboro !important;
        /*margin: 22% 15% 14% 15%;*/
        margin: 100px 50px 50px 50px;
        justify-content: center !important;
        padding: 20px !important;
        border: 1px solid #888 !important;
        border-radius: 20px !important;
        width: 320px !important;
        height: 400px !important;
        /* width: 70% !important;
        height: 56% !important;*/
    }

        .modal-box p {
            font-size: small;
        }

        .modal-box h2 {
            font-size: x-small;
        }

    .supportBtn {
        display: grid;
        place-items: center; /* Center the content both horizontally and vertically */
        height: 10%; /* Full height of the viewport */
        text-align: center; /* Ensure the text inside the link is centered */
    }

    .button {
        /*width: 250px !important;*/
        width: 80% !important;
        display: inline-block;
        /*padding: 7px 50px;*/
        /*padding: 0.5% 1.3%;*/
        padding-top: 6px;
        padding-bottom: 6px;
        background-color: #E59E60;
        color: white;
        margin-right: 0;
        text-align: center;
        text-decoration: none;
        /*border-radius: 20px;*/
        border-radius: 8px;
        /*font-size: 16px;*/
        font-size: xx-small;
        transition: background-color 0.3s;
       
    }


    .links {
        display: flex;
        flex-direction: column; /* Arrange items in a column */
        gap: 10px; /* Space between links */
        align-items: center; /* Center items horizontally within the column */
    }

    .buttonln {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #E59E60;
        color: white;
        text-decoration: none;
        border-radius: 8px;
        font-size: 16px;
        transition: background-color 0.3s;
        width: 130px;
        height: 40px;
    }

    #link.buttonE {
        display: inline-block;
        background-color: #E59E60;
        color: white;
        padding: 12px 20px;
        text-align: center;
        text-decoration: none;
        border-radius: 8px;
        font-size: 16px;
        transition: background-color 0.3s;
    }

    .emailSup {
        margin-top: 30px;
        padding-top: 13%;
    }

}

/* For iPhones and small devices (screens up to 375px) */
@media (max-width: 375px) {
    body {
        background-size: cover; /* Ensure background is responsive */
        background-position: center;
    }

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 30%; /* More space at the top for smaller screens */
        margin-top:10%;
        padding-bottom: 25%;
    }

    .wrapper,
    .wrapper2,
    .wrapper3 {
        max-width: 300px; /* Adjust width for smaller iPhone models */
        padding: 10px 18px 50px; /* Adjust padding for smaller devices */
        margin-bottom: 15px; /* Maintain spacing between stacked wrappers */
    }

    .swal2-popup {
        background-color: #f8d7da;
        color: #721c24;
        border-radius: 10px;
        margin-top: 15px;
        margin-bottom: 50px;
        width: 50%;
    }


    .modal-box {
        background-color: gainsboro !important;
        /*margin: 23% 15% 13% 15%;*/
        margin: 100px 100px 50px 30px !important;
        justify-content: center !important;
        padding: 20px !important;
        border: 1px solid #888 !important;
        border-radius: 20px !important;
        width: 320px !important;
        height: 400px !important;
        /* width: 70% !important;
        height: 56% !important;*/
    }

        .modal-box p {
            font-size: x-small;
        }

        .modal-box h2 {
            font-size: small;
        }

    .supportBtn {
        display: grid;
        place-items: center; /* Center the content both horizontally and vertically */
        height: 10%; /* Full height of the viewport */
        text-align: center; /* Ensure the text inside the link is centered */
    }

    .button {
        /*width: 250px !important;*/
        width: 80% !important;
        display: inline-block;
        /*padding: 7px 50px;*/
        /*padding: 0.5% 1.3%;*/
        padding-top: 6px;
        padding-bottom: 6px;
        background-color: #E59E60;
        color: white;
        margin-right: 0;
        text-align: center;
        text-decoration: none;
        /*border-radius: 20px;*/
        border-radius: 8px;
        /*font-size: 16px;*/
        font-size: xx-small;
        transition: background-color 0.3s;
        
    }

    .links {
        display: flex;
        flex-direction: column; /* Arrange items in a column */
        gap: 10px; /* Space between links */
        align-items: center; /* Center items horizontally within the column */
    }

    .buttonln {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #E59E60;
        color: white;
        text-decoration: none;
        border-radius: 8px;
        font-size: 16px;
        transition: background-color 0.3s;
        width: 130px;
        height: 40px;
    }

    #link.buttonE {
        display: inline-block;
        background-color: #E59E60;
        color: white;
        padding: 12px 20px;
        text-align: center;
        text-decoration: none;
        border-radius: 8px;
        font-size: 16px;
        transition: background-color 0.3s;
    }

    .emailSup {
        margin-top: 30px;
        padding-top: 13%;
    }
}

/* For iPhone XR/11 (screens up to 414px) */
@media (max-width: 414px) {
    body {
        background-size: cover;
        background-position: center;
    }

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 25%;
        padding-bottom: 14%;
    }

    .wrapper,
    .wrapper2,
    .wrapper3 {
        max-width: 340px; /* Slightly wider wrapper for larger phones like iPhone XR */
        padding: 12px 22px 60px;
        margin-bottom: 18px;
    }

    .swal2-popup {
        background-color: #f8d7da;
        color: #721c24;
        border-radius: 10px;
        margin-top: 15px;
        margin-bottom: 50px;
        width: 50%;
    }

    .modal-box {
        background-color: gainsboro !important;
        /*margin: 22% 15% 14% 15%;*/
        margin: 100px 50px 50px 50px;
        justify-content: center !important;
        padding: 20px !important;
        border: 1px solid #888 !important;
        border-radius: 20px !important;
        width: 320px !important;
        height: 400px !important;
        /* width: 70% !important;
        height: 56% !important;*/
    }

        .modal-box p {
            font-size: small;
        }

        .modal-box h2 {
            font-size: x-small;
        }

    .supportBtn {
        display: grid;
        place-items: center; /* Center the content both horizontally and vertically */
        height: 10%; /* Full height of the viewport */
        text-align: center; /* Ensure the text inside the link is centered */
    }

    .button {
        /*width: 250px !important;*/
        width: 80% !important;
        display: inline-block;
        /*padding: 7px 50px;*/
        /*padding: 0.5% 1.3%;*/
        padding-top: 6px;
        padding-bottom: 6px;
        background-color: #E59E60;
        color: white;
        margin-right: 0;
        text-align: center;
        text-decoration: none;
        /*border-radius: 20px;*/
        border-radius: 8px;
        /*font-size: 16px;*/
        font-size: xx-small;
        transition: background-color 0.3s;
        
    }



    .emailSup {
        margin-top: 30px;
        padding-top: 13%;
    }

}

/* For iPhone 12, 13, 14 (screens up to 390px) */
@media (max-width: 390px) {
    body {
        background-size: cover;
        background-position: center;
    }

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 30%;
        padding-bottom: 16%;
    }

    .wrapper,
    .wrapper2,
    .wrapper3 {
        max-width: 340px; /* Adjust width for larger iPhones */
        padding: 12px 22px 60px;
        margin-bottom: 20px; /* Ensure enough space between stacked wrappers */
    }

    .swal2-popup {
        background-color: #f8d7da;
        color: #721c24;
        border-radius: 10px;
        margin-top: 15px;
        margin-bottom: 50px;
        width: 50%;
    }

    .modal-box {
        background-color: gainsboro !important;
        /*margin: 22% 15% 14% 15%;*/
        margin: 50px 50px 50px 50px !important;
        justify-content: center !important;
        padding: 20px !important;
        border: 1px solid #888 !important;
        border-radius: 20px !important;
        width: 320px !important;
        height: 400px !important;
        /*      width: 70% !important;
        height: 53% !important;*/
    }

        .modal-box p {
            font-size: small;
        }

        .modal-box h2 {
            font-size: x-small;
        }

    .supportBtn {
        display: grid;
        place-items: center; /* Center the content both horizontally and vertically */
        height: 10%; /* Full height of the viewport */
        text-align: center; /* Ensure the text inside the link is centered */
    }

    .button {
        /*width: 250px !important;*/
        width: 80% !important;
        display: inline-block;
        padding-top: 6px;
        padding-bottom: 6px;
        background-color: #E59E60;
        color: white;
        margin-right: 0;
        text-align: center;
        text-decoration: none;
        /*border-radius: 20px;*/
        border-radius: 8px;
        /*font-size: 16px;*/
        font-size: xx-small;
        transition: background-color 0.3s;
        
    }


    .emailSup {
        margin-top: 30px;
        padding-top: 13%;
    }
}

/* For larger screens like tablets and desktops (greater than 600px) */
@media (min-width: 601px) {
    .container {
        display: flex;
        flex-direction: row; /* Keep wrappers side by side */
        justify-content: center;
        align-items: center;
        padding-top: 14%;
        padding-bottom: 14%;
    }

    .wrapper,
    .wrapper2,
    .wrapper3 {
        max-width: 380px; /* Keep the default max-width for larger screens */
        padding: 6px 27px 80px;
        margin-left: 1%;
    }
}


/*body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("images/11.png") center/cover no-repeat;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: 0.1s ease;
    margin: 0;*/ /* Ensure no default margin for body */
/*}*/

/* Container styles */
/*.container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 30%;
    padding-bottom: 7%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: 0.1s ease;
    width: 100%;
    padding: 0 10px;*/ /* Add horizontal padding for smaller devices */
/*}*/

/* Wrapper (Main content area) */
/*.wrapper,
.wrapper2,
.wrapper3 {
    position: relative;
    max-width: 380px;
    width: 100%;
    border-radius: 12px;
    padding: 6px 27px 80px;
    background: #2E1A47;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-left: 1%;
}*/

/* Media Query for small devices like iPhones (max-width: 600px) */
/*@media (max-width: 600px) {*/
    /* Ensure flexbox direction is column to stack wrappers vertically */
    /*.container {
        display: flex;
        flex-direction: column;*/ /* Stack children vertically */
        /*align-items: center;*/ /* Center children horizontally */
        /*justify-content: flex-start;*/ /* Align items from the top */
        /*padding-top: 30%;
        padding-bottom: 10%;
    }*/

    /* Adjust wrapper width and padding for mobile screens */
    /*.wrapper,
    .wrapper2,
    .wrapper3 {
        max-width: 320px;*/ /* Make wrappers narrower for small screens */
        /*padding: 12px 20px 60px;*/ /* Adjust padding for better spacing */
        /*margin-bottom: 15px;*/ /* Add margin-bottom to space out stacked items */
    /*}*/

    /* Optional: Adjust background image behavior for mobile */
    /*body {
        
        background-position: center;
        background-size: cover;*/ /* Ensure background remains responsive */
    /*}
}*/

.model{


}

.form.login,
.form.login2,
.form.login3 {
    position: absolute;
    left: 50%;
    bottom: -86%;
    transform: translateX(-50%);
    width: calc(100% + 220px);
    padding: 20px 120px;
    border-radius: 50%;
    height: 100%;
    background: #fff;
    transition: all 0.6s ease;
}

.wrapper.active .form.login,
.wrapper2.active .form.login2,
.wrapper3.active .form.login3 {
    bottom: -15%;
    border-radius: 35%;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
}


.form.login .HeaderLa,
.form.login2 .HeaderLa,
.form.login3 .HeaderLa {
    font-size: 20px;
    text-align: center;
    color: #333;
    opacity: 0.6;
    font-weight: 600;
    cursor: pointer;
}

/**/.form .HeaderLa {
    font-size: 20px;
    text-align: center;
    color: white;
    opacity: 0.6;
    font-weight: 600;
    cursor: pointer;
}

.wrapper.active .form.login .HeaderLa,
.wrapper2.active .form.login2 .HeaderLa,
.wrapper3.active .form.login3 .HeaderLa {
    opacity: 1;
}

.wrapper .form,
.wrapper2 .form,
.wrapper3  .form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.form input,
.form.login input,
.form.login2 input,
.form.login3 input {
    height: 40px;
    outline: none;
    border: none;
    padding: 0 15px;
    font-size: 15px;
    font-weight: 400;
    color: #333;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #aaa;
}

    .form.login input:focus,
    .form.login2 input:focus,
    .form.login3 input:focus {
        box-shadow: 0 1px 0 #ddd;
    }

form .checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox input[type="checkbox"] {
    height: 16px;
    width: 16px;
    accent-color: #fff;
    cursor: pointer;
}

form .checkbox label {
    cursor: pointer;
    color: #fff;
}

form a {
    color: #333;
    text-decoration: none;
}

    form a:hover {
        text-decoration: underline;
    }

 form input[type="submit"],
.form.login input[type="submit"],
.form.login2 input[type="submit"],
.form.login3 input[type="submit"] {
    margin-top: 0px;
    padding: none;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    background: #4070f4;
    color: #fff;
    border: none;
}

form :where(.forgot-pass-link, .policy-text) {
    display: inline-flex;
    margin-top: 5px;
    font-size: 0.95rem;
}

.bottom-link {
    text-align: center;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.navbar {
    display: flex;
    padding: 22px 0;
    align-items: center;
    max-width: 75%;
    margin: 0 auto;
    justify-content: space-between;
}

    .navbar .hamburger-btn {
        display: none;
        color: #fff;
        cursor: pointer;
        font-size: 1.5rem;
    }

    .navbar .logo {
        gap: 10px;
        display: flex;
        align-items: center;
        text-decoration: none;
    }

        .navbar .logo img {
            width: 40px;
            border-radius: 50%;
        }

        .navbar .logo h2 {
            color: #fff;
            font-weight: 400;
            font-size: 1.4rem;
        }

    .navbar .links {
        display: flex;
        gap: 35px;
        list-style: none;
        align-items: center;
    }

    .navbar .close-btn {
        position: absolute;
        right: 20px;
        top: 20px;
        display: none;
        color: #000;
        cursor: pointer;
    }

    .navbar .links a {
        color: #fff;
        font-size: 1.1rem;
        font-weight: 500;
        text-decoration: none;
        transition: 0.1s ease;
    }

        .navbar .links a:hover {
            color: #19e8ff;
        }

    .navbar .login-btn {
        border: none;
        outline: none;
        background: #fff;
        color: #275360;
        font-size: 1rem;
        font-weight: 600;
        padding: 10px 18px;
        border-radius: 3px;
        cursor: pointer;
        transition: 0.15s ease;
    }

        .navbar .login-btn:hover {
            background: #ddd;
        }

@media (max-width: 950px) {
    .navbar :is(.hamburger-btn, .close-btn) {
        display: block;
    }

    .navbar {
        padding: 15px 0;
    }

        .navbar .logo img {
            display: none;
        }

        .navbar .logo h2 {
            font-size: 1.4rem;
        }

        .navbar .links {
            position: fixed;
            top: 0;
            z-index: 10;
            left: -100%;
            display: block;
            height: 100vh;
            width: 100%;
            padding-top: 60px;
            text-align: center;
            background: #fff;
            transition: 0.2s ease;
        }

            .navbar .links.show-menu {
                left: 0;
            }

            .navbar .links a {
                display: inline-flex;
                margin: 20px 0;
                font-size: 1.2rem;
                color: #000;
            }

                .navbar .links a:hover {
                    color: #2E1A47;
                }

        .navbar .login-btn {
            font-size: 0.9rem;
            padding: 7px 10px;
        }
}

@media (max-width: 760px) {
    .form-popup {
        width: 95%;
    }

    .form-box .form-details {
        display: none;
    }

    .form-box .form-content {
        padding: 30px 20px;
    }
}

.headTitle {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 0 10px;
}

/* Header styles */
.header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: #2E1A47;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

    .header .logo {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: white;
    }

        .header .logo img {
            width: 100px;
            border-radius: 0%;
            margin-right: 10px;
        }

    .header .language-switch {
        display: flex;
        gap: 10px;
        align-items: center; /* Vertically centers the items */
        justify-content: space-between; /* Distributes space between items */
    }

        .header .language-switch a {
            padding-top: 5px;
            color: white;
            text-decoration: none;
            font-size: 1rem;
            font-weight: 500;
        }

            .header .language-switch a:hover {
                text-decoration: underline;
            }


#help-icon {
    display: flex;
    align-items: center; /* Centers the icon vertically */
    justify-content: center; /* Centers the icon horizontally */
}

/* Footer styles */
footer {
    background-color: #2E1A47;
    color: white;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px 20px;
    position: fixed;
    width: 100%;
    font-size: 1rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}



/* Arabic style*/
html[dir="rtl"].crButton {
    /*width: 250px !important;*/
    width: 65% !important;
    display: inline-block;
    /*padding: 7px 50px;*/
    /*padding: 0.5% 1.3%;*/
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: #E59E60;
    color: white;
    margin-right: 0;
    text-align: center;
    text-decoration: none;
    /*border-radius: 20px;*/
    border-radius: 8px;
    /*font-size: 16px;*/
    font-size: 80%;
    transition: background-color 0.3s;
}


html[dir="rtl"].button {
    /*width: 250px !important;*/
    width: 66% !important;
    display: inline-block;
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: #E59E60;
    margin-right: 0;
    text-align: center;
    text-decoration: none;
    /*border-radius: 20px;*/
    border-radius: 8px;
    /*font-size: 16px;*/
    /*font-size: 80%;*/
    font-size: large;
    color: white !important;
    transition: background-color 0.3s;
   
}

/*html[dir="rtl"].supportBtn {
    align-content: center;
    display:block;
}
*/

/* Default layout (left-to-right for languages like English) */
html[dir="ltr"] {
    direction: ltr;
    text-align: left;
}

/* Right-to-left layout for languages like Arabic */
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
}