/* General Styles */
body, html {
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
    /*background: linear-gradient(to right, #b17026, #f4dc70);*/
    font-family: "Poppins", sans-serif;
    /*font-family: 'Roboto', sans-serif;*/
    background-color: transparent;
    margin: 0;
    /*padding-top: 40px;*/
    height: 100%; /* This is important to ensure the footer stays at the bottom */
    text-align: center;
    align-items: center;
    justify-content: center;

}
.fake-header {
    height: 40px;
}

.hidden {
    display: none; /* Hides the element */
}

a {
    color: #28689c;
    text-decoration: none;
}

a:hover {
    text-decoration:none;
    color: #ffd343;
}

i {
    color: #28689c;
}

i:hover {
    color: #ffd343;
}

hr {
    border: 0; /* Remove any default border */
    height: 1px; /* Or the thickness you prefer */
    background-color: rgba(0, 0, 0, 0.1); /* Very light grey */
    margin: 8px 0; /* Adjust the margin as needed */
}

/* Header Styles */
header {
    background-color: transparent; /* Adjust the color as per your theme */
    /*background: linear-gradient(to right, #0859c6, #ffffff);*/
    /*background-image: url("{% static 'images/background1.jpg' %}");*/
    background-size: cover ;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    color: #fff;
    padding: 0 0;
    margin: auto;
    text-align: center;
    height: max-content;
    
}

.header-row {
    display: flex;
    flex-wrap: nowrap; /* Allows items to wrap onto the next line */
    text-align: center;
    justify-content: center;
}

.header-column-logo {
    flex: 1 1 auto; /* Adjusts flex settings for automatic shrinking */
    padding: 10px;
    box-sizing: border-box; /* Includes padding in width calculation */
    text-align: left; /* Aligns content to the left */
    display: flex; /* Enables flexbox for this container */
    align-items: center; /* Vertically centers content in the container */
    justify-content: center; /* Horizontally centers content when there is extra space */
    width: fit-content;
}

.header-column-nav1 {
    flex: 1 1 auto; /* Adjusts flex settings for automatic shrinking */
    padding: 0;
    box-sizing: border-box; /* Includes padding in width calculation */
    text-align: left; /* Aligns content to the left */
    display: flex; /* Enables flexbox for this container */
    align-items: center; /* Vertically centers content in the container */
    justify-content: flex-start; /* Aligns children (flex items) to the start (left) */
}

.header-column-nav {
    display: none;
    padding: 1vw;
}

.header-column-logo img {
    width: 400px; /* Sets the image width to 100% of its container */
    max-width: 100%; /* Ensures the image is not larger than its container */
    height: auto; /* Maintains the aspect ratio of the image */
}

button:not(.ck-button) {
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #030303; /* Adjust the color as needed */
    color: #3470a2;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

button:not(.ck-button):hover {
    background-color: #c2b971; /* Darker shade for hover effect */
    color: #030303;
    font-weight: 700;
}
/* Responsive Design */
@media screen and (max-width: 1000px) {
    .header-column-logo img {
        width: 90%; /* Sets the image width to 100% of its container */
    }
}

/* Responsive Design */
@media screen and (max-width: 900px) {
    .header-column-logo img {
        width: 100%; /* Sets the image width to 100% of its container */
    }
}

.header-column-menu {
    display: none;
    flex: 0 0 auto;
    padding-right: 20px; 
    padding-top: 5px;/* Add some padding for spacing */
    box-sizing: border-box; /* Includes padding in width calculation */
    min-width: fit-content; /* Minimum width for each column before wrapping */
}

.header-column-menu img{
    width:60%;
}

.logo {
    display: block;
    margin: 0 auto;
    width: 50%; /* Adjust this value as needed */
    height: auto;
}

.menu-icon {
    display: none;
    margin: 0 auto;
    width: 100%; /* Adjust this value as needed */
    height: auto;
}

.top_fixed {
    /* background: linear-gradient(to right, #3470a2, #3572a6); */
    background-color: #1e2933;
    position: fixed; /* Fixes the header to the top of the viewport */
    top: 0;         /* Aligns the header at the top */
    left: 0;        /* Aligns the header to the left */
    width: 100%;    /* Ensures the header extends across the full width of the viewport */
    z-index: 1000; 
    min-height: fit-content;
    height: max-content;
    

}

.top-margin-bar {
    padding-top: 2%;
    height:75px;
}

.search_fixed {
    position: fixed; /* Fixes the header to the top of the viewport */
    margin-top: 40px;
    left: 0;        /* Aligns the header to the left */
    width: 100%;    /* Ensures the header extends across the full width of the viewport */
    z-index: 900; 
    min-height: fit-content;
    height: max-content;
    background-color: #c2b971;
}

.bottom-fixed {
    background: linear-gradient(to right, #1c3b56, #2b5a83); 
    /*background-color: #030303;*/
    position: fixed; /* Fixes the header to the top of the viewport */
    bottom: 0;         /* Aligns the header at the top */
    left: 0;        /* Aligns the header to the left */
    width: 100%;    /* Ensures the header extends across the full width of the viewport */
    z-index: 1000; 
    height: 50px;
}



header h1 {
    margin: 0;
}

.showmenu {
    display: none;
    width: 100%;
    text-align: center;
    
}

.showmenu a {
    text-decoration: none;
    color: #030303;
}




/* Main Content Styles */
main {
    padding: 0;
    min-height: calc(100% - 100px); /* Adjust based on the total height of the header and footer */
   
}

/* Footer Styles */
footer {
    background-color: transparent;
    color: white;
    text-align: center;
    position: relative;
    bottom: 0;
    width: 100%;
}


.footer-content {
    font-size: x-small;
}

.footer-content a {
    color: #1d9cfe;
    text-decoration: none;
}

.footer-content a:hover {
    text-decoration:none;
    color: #ffd343;
}

/* Navbar Styles */
/* Main Navigation Styles */
nav {
    background-color: transparent;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    z-index: 10000;
    overflow: visible;
    position: relative;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 0.5vw;;
    position: relative; /* Needed for absolute positioning of submenu */
    color: #fff;
    font-size: 1.15vw;
}

@media screen and (max-width: 1000px) {


    nav ul li {
        font-size: 1.45vw;
    }
}

@media screen and (max-width: 850px) {
    nav ul li {
        font-size: 1.45vw;
    }
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    display: block; /* Make the link cover the area for hover */
}


/* Submenu Styles */
.nav-item {
    /*border-bottom: 1px solid #555;*/
    color: #fff
}

.nav-link {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #fff;
    text-align: left;
    z-index: 10000;
}

.nav-link:hover, nav ul li:hover > a {
    color: #ffd343; /* Color change on hover */
    font-style: bold;
}

.submenu {
    display: none;
    position: absolute; /* Position submenu absolutely relative to the parent li */
    list-style: none;
    padding-top: 5px;
    padding-bottom: 15px;
    margin: 0;
    text-align: left;
    background-color: #3470a2; /* Match the background color with your design */
    white-space: nowrap; /* Prevents text from wrapping */
    min-width: 100%; /* Ensures submenu is at least as wide as the parent item */
    z-index: 10000;
    overflow: visible;
}

.submenu .divider {
    display: block;
    height: 1px;
    margin: 10px 0; /* Adjusts the spacing above and below the line */
    margin-left: 25px;
    margin-right: 10px;
    background-color: #ffd343;
   
}

.nav-item:hover .submenu {
    display: block;
}

.submenu li {
    color: #fff;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.submenu li:hover {
    color: #1e2933;
    background-color: #ffd343;
    
}

.submenu a {
    display: block;
    padding: 5px 15px;
    text-decoration: none;
    color: #fff;
    text-align: left;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.submenu a:hover {
    color: #1e2933;
    background-color: #ffd343;
    
}

/* Disabled state */
.submenu li.disabled a {
    pointer-events: none;        /* disables clicking */
    color: #999 !important;      /* force grey */
    background-color: transparent !important;
    cursor: not-allowed;
}

/* Prevent hover effects for disabled */
.submenu li.disabled a:hover {
    color: #999 !important;
    background-color: transparent !important;
}



.nav-link.button-look {
    margin-top: 8px;
    padding: 5px 12px;
    background-color: #3470a2; /* Button color */
    color: #fff; /* Text color */
    border-radius: 5px;
    text-transform: uppercase; /* Optional: for uppercase text */
    text-decoration: none;
    transition: background-color 0.5s, color 0.7s;
}

.nav-link.button-look:hover {
    background-color: #ffd343; /* Darker shade for hover effect */
    color: #1e2933;
}

/* Main Content Styles */
main {
    padding: 0;
    text-align: center;
}

/* Hamburger Menu Icon */
.hamburger-menu {
    display: none; /* Hidden by default */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
}

.hamburger-menu span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #030303; /* or your preferred color */
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .top-margin-bar {
        height:55px;
    }

    .search_fixed {
        top: 100px; 
    }
    .showmenu {
        display: block;
    }

    .header-column-nav1 {
        display: none;
    }

    .header-column-menu {
        display: block;
    }

    .header-column-menu img{
        width: 5vw;
        padding-top: 5px;
    }

    .header-column-logo img {
        width:60vw;
    }
    
    /* When the menu is active (you can toggle this with JavaScript) */
   
    nav ul {
        flex-direction: column;
        align-items: start; /* Align submenu items to the start */
    }

    nav ul li {
        margin-bottom: 5px;
        width: 95%; /* Make the list items full width */
        padding-right: 10px;
        font-size: large;
    }

    .submenu {
        position: static; /* Override absolute positioning on small screens */
        width: 95%; /* Full width submenus */
        padding-right: 0;
        display: none; /* Initially hidden */
        z-index: 10000;
    }

    .nav-item:hover .submenu {
        display: block; /* Display submenu on hover */
    }

    .submenu a {
        padding-left: 20px; /* Indent submenu items for better visual hierarchy */
    }

    #navbar {
        display: none;
    }

    #navbar.active {
        display: block;
    }


    #menuLink:hover {
        cursor: pointer;
        color: #bab803; /* Or any other color */
    }

    footer, header {
        padding: 0.5px 0;
    }
}

/* General Styles for the Container */
.form-container {
    width: 50%;
    max-width: 400px; /* Adjust as needed */
    margin: auto;
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: white;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.form-container a {
    font-size:smaller;
}

/* General Styles for the Container */
.form-container-profile {
    width: 60%;
    max-width: 400px; /* Adjust as needed */
    margin: auto;
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: white;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.form-container-wide {
    width: 80%;
    max-width: 800px; /* Adjust as needed */
    margin: auto;
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: white;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.form-header-profile {
    width: 60%;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    max-width: 400px; /* Adjust as needed */
    margin: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: 40px;
    background-color: #3470a2;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Style for Headings */
.form-header-profile h2 {
    text-align: center;
    color: #28689c;
    margin-bottom: 20px;
    font-size:20px;
    padding: 5px;
}

.form-header {
    width: 50%;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    max-width: 400px; /* Adjust as needed */
    margin: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: 40px;
    background-color: #3470a2;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Style for Headings */
.form-header h2 {
    text-align: center;
    color: #28689c;
    margin-bottom: 20px;
    font-size:20px;
    padding: 5px;
}


.form-header-wide {
    width: 80%;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    max-width: 800px; /* Adjust as needed */
    margin: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: 40px;
    background-color: #3470a2;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Style for Headings */
.form-header-wide h2 {
    text-align: center;
    color: #28689c;
    margin-bottom: 20px;
    font-size:20px;
    padding: 5px;
}

@media screen and (max-width: 768px) {
    .form-container {
        width:80%;
    }

    .form-header {
        width:80%;
    }

}

@media screen and (max-width: 450px) {
    .form-container {
        width:90%;
    }

    .form-header {
        width:90%;
    }

}

/* Styling Form Elements */
form p {
    margin-bottom: 15px;
}

form label {
    display: block;
    margin-bottom: 5px;
    color: #030303;
    font-weight: bold;
}

form input[type=text], 
form input[type=email], 
form input[type=password], 
form textarea, /* This styles the TextField */
form input[type=file],
form input[type="date"],
form input[type="number"],
form input[type="datetime-local"],
form input[type="url"],
form select  {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Includes padding in width calculation */
    margin-bottom: 10px;
}

form textarea {
    height: 100px; /* Adjust as needed */
    box-sizing: border-box; /* Includes padding and border in the element's width */
    width: 100%;
    resize: vertical;
}

form .helptext {
    color: #3673a7;
    font-size: 0.9em;
    margin-bottom: 10px;
}

/* Style for the Submit Button */
form button[type=submit] {
    width: 100%;
    padding: 10px;
    border: none;
    background: linear-gradient(#ffd343, #fce28e);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    color: #2b5b84;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1em;
}

form button[type=submit]:hover {
    background: linear-gradient(#3673a7, #1e405d);
    color: #ffd343;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
    font-weight: 700;
}

form ul {
    list-style-type: none; /* Removes bullets */
    padding-left: 0; /* Removes default padding */
    margin-left: 0; /* Aligns with the rest of the form */
    color: #c2b971;
}

form ul li {
    display: block; /* Changes list items to block elements, overriding 'list-item' */
    text-align: center; /* Ensures text alignment */
    padding-bottom: 5px; /* Optional: Adds a little space between list items */
    font-size: smaller;
}

.additional-options {
    margin-top: 20px;
    text-align: center;
    font-size: 0.9em;
}

.additional-options p {
    margin-bottom: 10px;
    font-size: 0.8em;
}

.additional-options a {
    color: #c2b971; /* Adjust the color to match your theme */
    text-decoration: none;
    transition: color 0.3s ease;
}

.additional-options a:hover {
    color: #666403; /* Darker shade for hover effect */
}


.social-login {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.social-login li {
    margin: 0 10px;
}

.social-login li a {
    border-radius: 4px;
    padding: 8px 12px;
    display: inline-block;
    color: #fff; /* White text */
    text-decoration: none;
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
}

/* Google button styles */
.social-login li a.google-btn {
    background-color: #dd4b39;
    border: none;
}

.social-login li a.google-btn:hover {
    background-color: #f35e4a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); /* Shadow on hover */
    color:#fac8c2;
}

/* Facebook button styles */
.social-login li a.facebook-btn {
    background-color: #4c69ba;
    border: none;
}

.social-login li a.facebook-btn:hover {
    background-color: #5b7bd5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); /* Shadow on hover */
    color:#c3d0f3;
}


.search-box {
    position: fixed;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    padding-top: 10px;
    padding-bottom: 0;
    padding-left: 5px;
    padding-right: 5px;
    width: 80%;
    max-width: 600px;
    left: 50%; /* Position the left edge of the element at the middle of the screen */
    transform: translate(-50%, -50%); /* Shift the element left and up by half of its own width and height */
}

.hide-search {
    display: none;
}

.search-box input[type="text"] {
    border: none;
    background: transparent;
    padding-left: 40px; /* Make space for the icon */
    padding-right: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #000;
    height: 30px;
    flex-grow: 1; /* Makes input expand to fill available space */
    font-size: 14px;
    border-radius: 30px;
}

.search-box .search-icon {
    position: absolute;
    left: 15px;
    color: #707070;
    padding-bottom: 8px;
}

.search-box .search-icon-right {
    background-color: transparent;/* Transparent grey background */
    border-radius: 15px; /* Makes the background circular */
    padding: 0; /* Add some padding around the icon */
    color: #707070; /* Set the color of the icon */
    right: 5px;
    font-size: 20px;
}

.search-box .search-icon-right:hover {
    color: #000; 
}


.search-box button.search-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding-top: 0;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    color: #000;
    width: 50px;
    float: right;
}

.search-box button.search-btn:focus {
    outline: none;
    
}

.search-box button.search-btn:hover {
    background-color: transparent;
    
}

/* Hide the border for the input field on focus */
.search-box input[type="text"]:focus {
    outline: none;
    background-color: transparent;
    background: transparent;
}

.search-box input[type="text"]:hover {
    background: transparent;
}
/* Optional: Adjust this part as needed */
.search-box input::placeholder {
    color: #000;
    opacity: 0.8;
    background: transparent;
}


.page_container {
    /*top:0;*/
    /*background: linear-gradient(#1e405c, #2b5a83);*/
    background-color:transparent;
    /*border-radius: 30px 30px 15px 15px;*/
    /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);*/
    padding-top: 5px;
    /*padding-left: 1%;
    padding-right: 1%;*/
    padding-bottom: 1%;
    margin: auto;
    width: 100%;
    /*max-width: 1000px;*/
    height: max-content;

}
.page_container h1 {
    font-size: 3.0em;
    color: #28689c;
    margin-bottom: 10px;
    /*text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); */
    
}

.page_container h2 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 15px;
}

.page_container h3 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 12px;
}

.page_container p {
    font-size: 1.2em;
    line-height: 1.3;
    color: #1c3b56;
}

.page_container a {
    text-decoration: none;
}


.center-image {
    display: block;
    margin: auto;
    width: 20%; /* Adjust this value as needed */
    height: auto;
}

@media screen and (max-width: 1200px) {
    .page_container h1 {
        font-size: 2.5em;
    }

    .page_container p {
        font-size: 1.0em;
    }
}

@media screen and (max-width: 1024px) {
    .page_container h1 {
        font-size: 2.2em;
    }

    .page_container p {
        font-size: 0.9em;
    }
}
@media screen and (max-width: 768px) {
   

    .page_container h1 {
        font-size:2.0em;
    }

    .page_container h2 {
        font-size:1.2em;
    }

    .page_container p {
        font-size: 1.0em;
    }
    .center-image {
        width: 25%; /* Adjust this value as needed */
    }

    .page_container {
        margin-bottom: 50px;
    }
   
}

.button-wrap {
    display: flex;
    justify-content: center;
    
}


.buttton-box-right {
    border-radius: 0 30px 30px 0;
    background-color: #3470a2;
    width: 20%;
    padding-left: 7%;
    padding-top: 10px;
    padding-bottom: 8px;
    display: flex;
    color: #030303;
    font-size: larger;
    cursor: pointer;
    text-decoration: none; 
    text-align: center;
    border: none;
    transition: background-color 0.8s ease, border-left 0.8s ease, color 0.8s ease;
}


.buttton-box-right:hover {
    color: white;
    background-color: #030303;
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: rgb(255, 255, 255);
}

.buttton-box-right:hover i{
    color: white;
}

.buttton-box-right:focus {
    color: white;
    background-color: #030303;
}

.buttton-box-left {
    color: #3470a2;
    border-radius: 30px 0 0 30px;
    background-color: #030303;
    width: 80%;
    padding-left: 10%;
    padding-top: 8px;
    padding-bottom: 8px;
    display: flex;
    cursor: pointer;
    text-decoration: none; 
    text-align: left;
    border: none;
    transition: color 0.8s ease;
    font-size: small;
}

.buttton-box-left i {
    color: #3470a2;
}

.buttton-box-left:hover {
    color: white;
    font-weight: 400;
    
}

.buttton-box-left:hover i {
    color: white;
}

.buttton-box-left:focus {
    color: white;
    font-weight: 400;
}
.sub_container {
    background: linear-gradient(#1c3b56, #3776ab); 
    padding-top: 10px;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 1.5%;
    margin: auto;
    /*max-width: 600px;*/
    width:80%;
    margin-bottom: 80px;
}

.sub_container h2 {
    font-size: 1.8em;
    color: #ffd343;
    margin-bottom: 15px;
}

.sub_container p {
    font-size: 1.0em;
    line-height: 1.2;
    color: #e1e5fc;
    ;
}

.container-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 250px)); /* Slightly reduced percentage */
    gap: 2vw; /* Adjust if necessary */
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0.2vw;
    padding-left: 1vw;
    padding-right: 1vw;
}



.header-box-left {
    border-radius: 15px 0 0 15px;
    background-color: #030303;
    width: 80%;
    padding: 10px;
    display: flex;
    text-align: left;
    border: none;
    color: white;
    font-size: larger;
}

.header-box-right {
    border-radius: 0 15px 15px 0;
    background-color: #030303;
    width: 20%;
    padding: 10px;
    display: flex;
    color: white;
    font-size: larger;
    text-align: right;
    border: none;
}


.container-block a {
    text-decoration: none;
}

.container {
    
    padding: 4%;
    margin: auto;
    width: 70%;
    max-width: 800px;
}

.container-profile {
    
    padding: 4%;
    margin: auto;
    width: 80%;
    max-width: 900px;
}

.container-wide {
    
    padding: 4%;
    margin: auto;
    width: 90%;
    max-width: 1000px;
}


.logo_title {
    display: block;
    margin: 0 auto;
    width: 10%; /* Adjust this value as needed */
    height: auto;
}

.message-footer {
    margin-top: 20px;
    font-size: 1.0em;
    color: #777;
}

@media screen and (max-width: 1024px) {
    .container {
        width:80%;
        
    }
}

@media screen and (max-width: 768px) {
    .container {
        width:90%;
        
    }
}

@media screen and (max-width: 450px) {
    .container {
        width:95%;
        
    }
}



.page-title-header {
    
    width: 100%;
    margin: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background-color: rgba(0, 0, 0, 0.3);
    border: none; 
}

.page-title-header p {
    padding-bottom: 2px;
    padding-top: 2px;
    text-align: center;
    color: black;
    font-size: medium;
    font-weight: 600;
}

.container-grid2 {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 475px)); /* Slightly reduced percentage */
    gap: 1vw; /* Adjust if necessary */
    justify-content: center;
    padding: 0.5vw;
    margin-bottom: 50px;
}

.container-grid3 {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 180px)); /* Slightly reduced percentage */
    gap: 1vw; /* Adjust if necessary */
    justify-content: center;
    padding: 0.3vw;
    margin-bottom: 10px;
}

.container-blockx {
    /*border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    margin-bottom: 10px; /* Space between rows */
    background-color: rgba(255, 255, 255, 0.2);
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 6px;
    box-sizing: border-box;
    width: 100%;
    /*border-style: solid;*/
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    /*border-width: 5px;
    border-color: white;*/
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

}


.container-block2 {
    /*border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);*/
    margin-bottom: 10px; /* Space between rows */
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    border-style: solid;
    border-radius: 15px;
    border-width: 5px;
    border-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding-bottom: 10px;

}

.header-box2 {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    margin:auto;
    margin-top: 10px;
    padding-bottom: 2px;
    padding-top: 2px;
    text-align: center;
    border: none;
    font-size: medium;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.header-box3 {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #3470a2;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    border: none;
    color: #28689c;
    font-size: small;
    font-weight: 600;
}

.header-box5 {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #3470a2;
    width: 95%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    border: none;
    color: #28689c;
    font-size: medium;
    font-weight: 600;
    margin:auto;
}



.comments_list{
    background-color: transparent;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    border: none;
    color: #28689c;
    font-size:x-small;
    font-weight: 500;
    margin:auto;

}

.comment {
    margin-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.comment-box {
    background-color: transparent;
    width: 100%;
    padding: 5px 0;
    text-align: center;
    border: none;
    color: #28689c;
    font-size: small;
    font-weight: 400;
    margin: auto;
    padding-bottom: 40px; /* Ensure there's enough space at the bottom */
}

.input-button-wrapper {
    position: relative;
    display: block; /* Changed to block to use the full width */
    width: 100%;
}

.comment-box input[type="text"] {
    width: 100%; /* Full width, the button will be positioned absolutely on top */
    padding: 10px;
    padding-right: 140px; /* Adjust this value based on the button's width to avoid overlap */
    border: 1px solid #ddd;
    background-color: transparent;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: small;
    color: #28689c;
    font-weight: 500;
    text-align:left;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}


.comment-box .copy-link-button {
    position: absolute;
    width: 30%;
    right: 0; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    border: none;
    background-color: #030303; /* Adjust the color as needed */
    color: #3470a2;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    white-space: nowrap; /* Prevents the text from wrapping */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.comment-box .copy-link-button:hover {
    background-color: #c2b971; /* Darker shade for hover effect */
    color: #030303;
    font-weight: 700;
}

.header-box {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #3470a2;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    border: none;
    color: #28689c;
    font-size: medium;
    font-weight: 600;
}

.header-box4 {
    /*border-top-left-radius: 8px;
    border-top-right-radius: 8px;*/
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    margin:auto;
    padding-bottom: 2px;
    padding-top: 2px;
    text-align: center;
    border: none;
    color: black;
    font-size: medium;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.image-box {
    margin-top: 0;
    background-color: transparent;
    width: 100%;
    padding: 0;
    text-align: center;
    color: #28689c;
    font-size: large;
    transition: color 0.3s ease;
}

.image-box2 {
    margin-top: 5px;
    background-color: transparent;
    width: 100%;
    padding: 0;
    text-align: center;
    color: #28689c;
    font-size: large;
    transition: color 0.3s ease;
}


.info-box {
    margin-top: 5px;
    background-color: transparent;
    width: 100%;
    padding: 0;
    text-align: center;
    color: #030303;
    font-size: small;
}

.biography {
    margin-top: 5px;
    background-color: transparent;
    width: 96%;
    padding: 10px;
    text-align: justify;
    color: #030303;
    font-size: small;
}


.article-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

.table-row {
    display: table-row;
    transition: color 0.3s ease;
}

.table-row:hover {
    background-color: rgba(255, 120, 3, 0.3);
    font-weight: 600;
}

.table-header {
    background-color: rgba(204, 198, 150, 0.5);
    color: #030303;
    font-size: small;
    font-weight: 600;
    padding: 3px;
    transition: color 0.3s ease;
}

.table-header:hover {
    background-color: rgba(255, 120, 3, 0.8);
    color: #fff;
    font-weight: 600;
}

.table-cell {
    display: table-cell;
    padding: 3px;
    text-align: left;
    font-size: small;
}

.table-cell a{
    color: #030303;
    text-decoration: none;
}

.read-btn {
    display: block; /* Make the link behave like a block-level element */
    width: 100%; /* Use the full width of its parent container */
    padding: 5px 10px; /* Keep your existing padding */
    background-color: #c2b971; /* Your background color */
    color: #030303; /* Text color */
    text-decoration: none; /* Remove underline from link */
    border-radius: 5px; /* Rounded corners */
    text-align: center; /* Center the text inside the button */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.read-btn:hover {
    background-color: #ff7803;
    color: #ffffff;
}

/* Responsive design for smaller screens */
@media screen and (max-width: 768px) {
    .table-header, .table-cell {
        display: block;
    }
    .table-header {
        display: none; /* Hide table headers on small screens */
    }
    .table-cell {
        display: flex; /* Use flexbox for layout */
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center-align items horizontally */
        padding: 5px; /* Add some padding around each cell */
        text-align: center; /* Center-align text */
    }
    .table-cell:before {
        content: attr(data-title); /* Use data-title for content before cell text */
        font-weight: bold; /* Make the title bold */
        width: 100%; /* Full width */
        text-align: left; /* Align title to the left */
        padding-right: 10px; /* Add some right padding */
    }
}

/* Responsive design for smaller screens */
@media screen and (max-width: 450px) {
    .article_details {
        font-size: xx-small;
    }
}

#scroll-to-bottom-btn {
    width: 8%;
    height: 8%;
    position: fixed; /* Fixed positioning to keep the button in view */
    top: 110px; /* Distance from the top of the viewport */
    right: 1.5%; /* Distance from the right of the viewport */
    z-index: 1000; /* Ensure it sits above other content */
    padding: 10px 10px; /* Padding inside the button */
    background-color: transparent; /* Button background color */
    color: #28689c; /* Button text/icon color */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Change mouse cursor on hover */
    /*box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Optional: add shadow for better visibility */
}

#scroll-to-bottom-btn:hover i{
    /*background-color: #0056b3; /* Darker shade on hover */
    color: #ff7803;
}

.message-block {
    background-color: transparent;
    width: 100%;
    margin:auto;
    margin-top: 5px;
    padding-bottom: 2px;
    padding-top: 2px;
    text-align: center;
    border: none;
    font-size: medium;
    font-weight: 400;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}

.alert {
    padding: 3px;
    border: 2px solid transparent;
    border-radius: 4px;
}

.alert-success {
    color: #3c763d;
    background-color: #d6fcc7;
    border-color: #f0fce6;
}

.alert-danger {
    color: #a10413;
    background-color: #fa9da6;
    border-color: #fce2e4;
}


.container-grid-profile {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 475px)); /* Slightly reduced percentage */
    gap: 1vw; /* Adjust if necessary */
    justify-content: center;
    padding: 0.3vw;
    margin-bottom: 50px;
}

.author-profile-image-main {
    width: 150px; /* Or any size you prefer */
    height: 150px; /* Maintain aspect ratio or set to 'auto' */
    border-radius: 0; /* Circular images */
    border-style: solid;
    border-width: 3px;
    border-color: white;
    object-fit: cover; /* Ensures the image covers the area without stretching */
   /* margin-bottom: 5px; /* Space below the image */
    margin-top: 5px; /* Space above the image */
    transition: color 0.9s ease;
}

.linking-btn {
    margin: auto;
    display: block; /* Make the link behave like a block-level element */
    width: 90%; /* Use the full width of its parent container */
    padding: 5px 5px; /* Keep your existing padding */
    background-color: #c2b971; /* Your background color */
    color: #030303; /* Text color */
    text-decoration: none; /* Remove underline from link */
    border-radius: 5px; /* Rounded corners */
    text-align: center; /* Center the text inside the button */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    font-size: small;
    transition: color 0.3s ease;
}

.linking-btn:hover {
    background-color: #ff7803;
    color: #ffffff;
}

.linking-btn:hover i{
    color: #ffffff;
}

.linking-btn2 {
    margin: auto;
    display: block; /* Make the link behave like a block-level element */
    width: 90%; /* Use the full width of its parent container */
    padding: 5px 5px; /* Keep your existing padding */
    background-color: transparent; /* Your background color */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    color: #28689c; /* Text color */
    border-style: solid;
    border-color: #28689c;
    border-width: 1px;
    text-decoration: none; /* Remove underline from link */
    border-radius: 5px; /* Rounded corners */
    text-align: center; /* Center the text inside the button */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    font-size: small;
    transition: color 0.3s ease;
}

.linking-btn2 i{
    color: #28689c;
}

.linking-btn2:hover {
    background-color: #ccbe55;
    border-color: #ffffff;
    color: #ffffff;
}

.linking-btn2:hover i{
    color: #ffffff;
} 

.middle-header {
    background-color: #3470a2;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    border: none;
    color: #28689c;
    font-size: small;
    font-weight: 600;
}

.short-linking-btn2 {
    margin-left: 10px;
    display: inline-block; /* Make the link behave like a block-level element */
    width: 40px; /* Use the full width of its parent container */
    padding-top: 5px 5px; /* Keep your existing padding */
    background-color: transparent; /* Your background color */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    color: #28689c; /* Text color */
    border-style: solid;
    border-color: #28689c;
    border-width: 1px;
    text-decoration: none; /* Remove underline from link */
    border-radius: 5px; /* Rounded corners */
    text-align: center; /* Center the text inside the button */
    /*box-sizing: border-box; /* Include padding and border in the element's total width and height */
    font-size: small;
    transition: color 0.3s ease;
}

.short-linking-btn2 i{
    color: #28689c;
}

.short-linking-btn2:hover {
    background-color: #ccbe55;
    border-color: #ffffff;
    color: #ffffff;
}

.short-linking-btn2:hover i{
    color: #ffffff;
} 

.accounts_details {
    background-color: rgba(255, 255, 255, 0.3);
    width: 100%;
    padding-top: 0;
    padding-bottom:5px;
    padding-left: 0;
    padding-right:0;
    text-align: center;
    border: none;
    color: #28689c;
    font-size:x-small;
    font-weight: 500;
    margin:auto;
    margin-bottom: 10px;
}

.accounts_details h3 {
    font-weight: 600;
    text-align: center;
    font-size:medium;
    color: #28689c;
}

.rewards_details {
    background-color:transparent;
    width: 100%;
    padding-top: 0;
    padding-bottom:5px;
    padding-left: 0;
    padding-right:0;
    text-align: center;
    border: none;
    color: #28689c;
    font-size:x-small;
    font-weight: 500;
    margin:auto;
    margin-bottom:0;
}

.about_body {
    background-color: rgba(255, 255, 255, 0.5);
    width: 100%;
    padding-top: 5px;
    padding-bottom: 10px;
    border: none;
    color: #030303;
    font-size:small;
    margin:auto;
    margin-bottom: 25px;
    
}

.about_body h2 {
    font-weight: 700;
    text-align: center;
    font-size:x-large;
    
}

.about_body h3 {
    font-weight: 600;
    text-align: center;
    font-size:large;
    color: #28689c;
}

.about_body h4 {
    font-weight: 600;
    text-align: left;
    font-size:medium;
    color: #28689c;
    padding-left: 15px;
    padding-right: 15px;
}

.about_body p {
    font-weight: 400;
    text-align: justify;
    font-size:medium;
    padding-left: 15px;
    padding-right: 15px;
}

.about-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 450px)); /* Slightly reduced percentage */
    gap: 1vw; /* Adjust if necessary */
    justify-content: center;
    padding: 0.3vw;
    margin-bottom: 50px;
}

.about-block {

    margin-bottom: 10px; /* Space between rows */
    background-color:transparent;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    padding-bottom: 10px;

}

.about-image-box {
    text-align: left;
}

.about-image {
    width: 150px; /* Or any size you prefer */
    height: 150px; /* Maintain aspect ratio or set to 'auto' */
    border-top-left-radius: 30px; /* Adjusts the radius of the top-left corner */
    border-bottom-right-radius: 30px; /* Adjusts the radius of the bottom-right corner */
    border-style: solid;
    border-width: 4px;
    border-color: white;
    object-fit: cover; /* Ensures the image covers the area without stretching */
    margin-bottom: 5px; /* Space below the image */
    transition: color 0.9s ease;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.about-image:hover {
    border-color: #ff7803;
}


/*Assessment css*/

.assess-grid {
    margin-top: 5px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1vw;
    justify-content: center;
    padding: 0.3vw;
    margin-bottom: 5px;
  }
  
  .assess-block {
    margin-bottom: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  /* Media Query for Larger Screens */
  @media (min-width: 600px) {
    .assess-grid {
      /* Ensure there are always 3 columns on larger screens */
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  /* Media Query for Smaller Screens */
  @media (max-width: 599px) {
    .assess-grid {
      /* Ensure a single column layout on smaller screens */
      grid-template-columns: 1fr;
    }
  }

.assess-block-header {
    background-color: rgba(204, 190, 85, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0;
    padding-right: 0;
    border: none;
    color: #28689c;
    font-size: small;
    font-weight: 600;
}

.assess-block-text {
    width: 100%;
    padding: 10px 10px;
    border: none;
    color: #28689c;
    font-size: small;
    font-weight: 500;
}

.assess-block-score {
    width: 100%;
    padding: 5px;
    border: none;
    color: #28689c;
    font-size: large;
    font-weight: 700;
}

.assess-container {
    display: flex;
    padding-left: 5px;
    padding-top: 5px;
}


.assessor-inline-block {
    display: inline-block;
    padding: 5px;
}

.assessor-inline-block-text {
    display: inline-block;
    color: #28689c;
    font-size: small;
    font-weight: 500;
    padding: 5px;
    
}

.assessor-content-image {
    width: 50px; /* Or any size you prefer */
    height: 50px; /* Maintain aspect ratio or set to 'auto' */
    border-radius: 50%; /* Circular images */
    border-style: solid;
    border-width: 1px;
    border-color: white;
    object-fit: cover; /* Ensures the image covers the area without stretching */
    margin-bottom: 5px; /* Space below the image */

}

/* Override styles for pagination nav only */
.pagination-nav {
    background-color: transparent; /* Make the background transparent */
    padding: 0; /* Optional: Adjust padding if needed */
    width:100%;
    height:max-content;
    margin: auto;
    margin-bottom: 50px;
    overflow-x: hidden; /* Hide any overflow on x-axis */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}


/* Base styles for pagination */
.pagination {
    display: flex;
    flex-wrap: wrap; /* Prevent items from wrapping */
    list-style: none;
    padding: 0;
    justify-content: center;
    margin-top: 20px;
    width:100%;
    height:max-content;
    margin-bottom: 50px;
}

.page-item {
    margin: 0 5px;
    margin-bottom: 5px; /* Add some space between items when stacked */
    
}

.page-link {
    color: #28689c;
    text-decoration: none;
    font-size: 12px;
    background-color: transparent;
    border: 1px solid #3470a2;
    padding: 4px 6px;
    border-radius: 5px;
    transition: all 0.5s ease;
    white-space: nowrap;
}

.page-item.active .page-link,
.page-link:hover {
    background-color: #3470a2;
    color: #ccbe55;
    border-color: #3470a2;
}

.page-item.active .page-link i,
.page-link:hover i {
    color: #ccbe55; /* Ensures the icon color matches the link text */
}

.page-item.disabled .page-link {
    color: #cccccc;
    cursor: not-allowed;
    background-color: #f9f9f9;
    border-color: #3470a2;
}

.page-item.disabled .page-link i {
    color: #cccccc; /* Ensures the icon color matches the disabled link text */
}

/* Media queries for mobile devices */
@media (max-width: 768px) {
    .pagination-nav {
        width:max-content;
    }

    .pagination {
        flex-direction: column; /* Stack the pagination items vertically */
        align-items: center;    /* Align items in the center */
        height: auto;
       
      
    }
    .page-link {
        padding: 6px 10px;  /* Increase padding for better touchability */
        font-size: 10px;     /* Slightly reduce font size for smaller screens */
        
    }

    .page-item {
        margin-bottom: 5px; /* Add some space between items when stacked */
        width:60px;
    }
}

@media (max-width: 480px) {
    .pagination-nav {
        width:max-content;
    }
    .pagination {
        flex-direction: column; /* Stack the pagination items vertically */
        align-items: center;    /* Align items in the center */
        height: auto;
       
      
    }

    .page-item {
        margin-bottom: 5px; /* Add some space between items when stacked */
        width:60px;
    }

    .page-link {
        padding: 6px 10px;  /* Adjust padding for very small screens */
        font-size: 10px;    /* Further reduce font size for readability */
    }
}


.top_menu {
    /* background: linear-gradient(to right, #3470a2, #3572a6); */
    /*background-color: #1e2933;*/
    /*position: fixed; /* Fixes the header to the top of the viewport */
    background: linear-gradient(#1c3b56, #3776ab); 
    top: 0;         /* Aligns the header at the top */
    left: 0;        /* Aligns the header to the left */
    width: 100%;    /* Ensures the header extends across the full width of the viewport */
    padding-top: 100px;
    min-height: 85px;
    max-height: max-content;
    z-index: 99;
    overflow: visible;
    
}

.menu-container {
    /*padding-top: 10px; /* Reduced padding */
    /*padding-bottom: 10px; /* Added bottom padding to balance the top padding */
    background: linear-gradient(#3776ab, #4e8cc0); 
    /*background-color: #4B8BBE; /* Light blue background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 3D-like shadow */
    width: 90%;
    border-radius: 10px;
    margin:auto;
    z-index: 99;
}

.menu-container ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
    
}

.menu {
    display: flex;
    justify-content: center;
    padding: 5px 5px;
    text-align: left;
    z-index: 99;
}

.menu li {
    margin: 0 15px;
}

.menu a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    padding: 5px 15px;
    display: block;
    /*border-radius: 5px;*/
    border-radius: 5px 5px 0 0;
    transition: background-color 0.3s;
}

.menu a:hover {
    background-color: #ffd343;
    color: #1e2933;
}

/* Dropdown styles */
.dropdown {
    display: none; /* Hide dropdown by default */
    position: absolute;
    top: 100%;
    left: 0;
    color: #1c3b56;
    background: transparent;
    padding: 10px 0;
    font-size: small;
    /*border-radius: 5px;*/
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 3D-like shadow */
}


.dropdown li {
    margin: 0;
    padding: 5px 5px;
    white-space: nowrap; 
    width: 100%;
}

.down-list {
    color: #1e2933;
    background-color: #fce28e;
    font-size: 12px;
    font-weight: 400;
    
}

.top-list {
    color: #356896;
    background-color: #fff;
    font-size: 15px;
    font-weight: 500;
    
}

.dropdown a {
    padding: 20px 20px;
    white-space: nowrap; /* Prevents text from wrapping */
    
}

/* Show dropdown on hover */
.menu li:hover .dropdown {
    display: block;
}



@media (max-width: 1024px) {
    .top-menu {
        padding-bottom: 10px;
    }

    .menu {
        text-align: left;
        padding: 5px 0;
    }

    .menu-container {
        width: 90%;
    }
    .menu a {
        font-size: 12px;
    }
    
}

/* Responsive menu */
@media (max-width: 768px) {
    .top_menu {
        padding-bottom: 10px;
    }

    .menu {
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
        
    }

    .menu a {
        font-size: 16px;
        
    }

    .menu li {
        margin: 0;
        padding: 5px 0;
        white-space: nowrap; /* Prevents text from wrapping */
        
    }

    .dropdown {
        position: static; /* Make dropdowns stack below the parent menu item */
        box-shadow: none; /* Remove shadow in mobile view */
    }
}

@media (max-width: 450px) {
    .down-list {
        font-size: 10px;
    }

    .top-list {
        font-size: 12px;
    }
}

.small-button {
    display: inline-block;
    background: linear-gradient(#ffd343, #fce28e);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 3D-like shadow */
    color: #2b5b84;
    padding: 5px 15px;
    font-size: 1.0rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 7px;
    transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}

.small-button:hover {
    background: linear-gradient(#3673a7, #1e405d);
    color: #ffd343;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

.small-button:active {
    background: linear-gradient(#fce28e, #ffd343);
    color: #1e405d;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 35px;
}

.bottom-container {
    background: linear-gradient(#1c3b56, #3776ab); 
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 80px;
    align-items: top;
}

    
.bottom-container h2 {
    font-size: 1.8em;
    color: #ffd343;
    margin-bottom: 0;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.bottom-container p {
    font-size: 1.0em;
    line-height: 1.3;
    color: #e1e5fc;
}

.left {
    flex: 0 0 30%;
    max-width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.left-2 {
    flex: 0 0 75%;
    max-width: 75%;
    display: flex;
    flex-direction: column; /* Change this to column */
    justify-content: center;
    align-items: flex-start; /* Align items to the start to stack vertically */
    padding: 10px;
    padding-left:20px;
    padding-right: 50px;
    text-align: left;
}

.left img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}


.right {
    flex: 0 0 65%;
    max-width: 65%;
    padding: 20px;
}

.right-2 {
    flex: 0 0 15%;
    max-width: 15%;
    padding: 20px;
    padding-top:30px;
    margin: auto;
}

.right-2 img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: auto;
}


.cta-button {
    display: inline-block;
    background: linear-gradient(#ffd343, #fce28e);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    color: #2b5b84;
    padding: 15px 30px;
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 7px;
    transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}

.cta-button:hover {
    background: linear-gradient(#3673a7, #1e405d);
    color: #ffd343;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

.cta-button:active {
    background: linear-gradient(#fce28e, #ffd343);
    color: #28689c;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cta-button:hover i {
    color: #ffd343; /* Change icon color on hover */
  }

  .cta-button:active i {
    color: #28689c; /* Change icon color on hover */
  }


@media screen and (max-width: 1200px) {
    .right {
        flex: 0 0 60%;
        max-width: 60%;
        padding: 10px;
        
    }

    .left-2 {
        padding-right: 10px;
        
    }
}

@media (max-width: 768px) {
    .hero-container {
        flex-direction: column;
        align-items: center;
    }

    .bottom-container {
        flex-direction: column;
        align-items: center;
        margin-bottom: 0;
        padding-bottom: 80px;
    }

    .left, .right {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }

    .left-2, .right-2 {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
        padding:20px;
    }


    .right {
        order: -1;
    }

    .left img {
        margin-bottom: 10px; /* Add margin to the bottom of the image */
    }

    .right-2 img {
        margin-bottom: 60px; /* Add margin to the bottom of the image */
    }

    .cta-button {
        margin-top: 20px;
    }

    .small-button {
        margin: auto;
    }
}

.facts-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.fact-block {
    flex: 0 0 48%;
    box-sizing: border-box;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 35px;
    border-top: 4px solid #3571a3;
    border-bottom: 4px solid #3571a3;
}

.fact-content {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    border-radius: 10px;
    /*border: 2px solid #ffd343;
    /*background-color: #ffffff;*/
    background: linear-gradient(#fce28e, #fdf1ca);
    box-shadow: 0 3px 3px rgba(40, 104, 156, 0.9);
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    text-align: left;
}
.fact-content h3 {
    font-size: 1.5em;
    margin: 0;
    display: flex;
    align-items: center;
}
.fact-content h3 img {
    margin-right: 10px;
}

.fact-block h4 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #28689c;
    text-align: left;
}

.fact-block p {
    font-size: 1em;
    color: #333;
    text-align: left;
}

@media (max-width: 768px) {
    .fact-block {
        flex: 0 0 100%;
    }
}

.button-container {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap */
    justify-content: space-between;
    gap: 10px; /* Space between buttons */
    
  }
  
  .buy-button {
    display: flex; /* Use flexbox for internal alignment */
    align-items: center;
    justify-content: center;
    background: linear-gradient(#ffd343, #fce28e);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 3D-like shadow */
    color: #2b5b84;
    padding: 10px 20px; /* Increased padding for better size */
    font-size: 1.0rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 7px;
    transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
    flex: 1; /* Make buttons take equal width */
    margin: 10px 0; /* Space between buttons when wrapping */
    white-space: nowrap; /* Prevent text wrapping */
  }
  
  .buy-button i {
    margin: 0 8px;
    transition: color 0.5s ease;
  }
  
  .buy-button:hover {
    background: linear-gradient(#3673a7, #1e405d);
    color: #ffd343;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
  }
  
  .buy-button:hover i {
    color: #ffd343; /* Change icon color on hover */
  }
  
  .buy-button:active {
    background: linear-gradient(#fce28e, #ffd343);
    color: #1e405d;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  .buy-button.disabled {
    pointer-events: none;
    background: linear-gradient(#ddd, #ccc);
    color: #999;
    box-shadow: none;
  }
  
  .buy-button.disabled i {
    color: #999; /* Change icon color when disabled */
  }
  
  @media (max-width: 600px) {
    .button-container {
      flex-direction: column; /* Stack buttons vertically */
      align-items: center; /* Center buttons */
    }
  
    .buy-button {
      width: 85%; /* Make buttons take up most of the screen width */
      margin: 10px 0; /* Space between buttons when wrapping */
    }
  }
  

  .next-button {
        display: inline-block;
        background: linear-gradient(#ffd343, #fce28e);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        color: #2b5b84;
        padding: 10px 10px;
        font-size: 1.5rem;
        font-weight: 600;
        text-decoration: none;
        border-radius: 10px; /* Makes the button round */
        transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
        position: relative; /* Added for tooltip positioning */
    }

    .next-button:hover {
        background: linear-gradient(#3673a7, #1e405d);
        color: #ffd343;
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
    }

    .next-button:active {
        background: linear-gradient(#fce28e, #ffd343);
        color: #28689c;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .next-button:active i {
        color: #28689c;
    }

    .next-button:hover i {
        color: #ffd343; /* Change icon color on hover */
    }


    .next-button[data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%; /* Position above the button */
        left: 50%;
        transform: translateX(-50%);
        background-color: #ffd343;
        color: #28689c;
        padding: 5px 10px;
        border-radius: 4px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 1;
        font-size: 0.9em;
    }

    .next-button:hover[data-tooltip]::after {
        opacity: 1;
    }


    .errorlist {
        padding: 10;
        width: 97%;
        color: rgb(168, 16, 16);     
        background-color: #f8d7da;
        padding-top: 10px; 
        padding-bottom: 10px;
        line-height: 30px;
       /* Text color */
        /* Make errors bold */
        list-style-type: none;     /* Remove bullet points */
        margin: 0;                 /* Remove margin */
        padding: 0;   /* Remove padding */
    }
    
    /* Apply the same style to non-field error list */
    .errorlist.nonfield-errors {
        color: rgb(168, 16, 16);           /* Ensure the same text color */
        background-color: #f8d7da;         /* Same background as other error boxes */
        padding: 10px;                     /* Same padding for consistency */
        line-height: 30px;                 /* Consistent line height */
        list-style-type: none;             /* No bullet points */
        margin: 0;                         /* Remove outer margin */
    }

    .errorlist li {
        margin-bottom: 5px;        /* Add some space between error messages */
    }

    /* General styling for the message container */
    .message-container {
        width: 100%;
        padding: 0 5px;
        border-radius: 5px;
        margin: 0 auto;
    }

    /* Success Message */
    .message.success {
        background-color: #d4edda; /* Light green background */
        border: 1px solid #c3e6cb; /* Green border */
        color: #155724;           /* Dark green text */
    }

    /* Error Message */
    .message.error {
        background-color: #f8d7da; /* Light red background */
        border: 1px solid #f8d7da; /* Red border */
        color: rgb(168, 16, 16);            /* Dark red text */
    }

    /* Warning Message */
    .message.warning {
        background-color: #fff3cd; /* Light yellow background */
        border: 1px solid #ffeeba; /* Yellow border */
        color: #856404;            /* Dark yellow text */
    }

    /* Info Message */
    .message.info {
        background-color: #d1ecf1; /* Light blue background */
        border: 1px solid #bee5eb; /* Blue border */
        color: #0c5460;            /* Dark blue text */
    }

    .update-button {
        display: inline-block;
        background: linear-gradient(#ffd343, #fce28e);
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
        color: #2b5b84;
        padding: 8px 7px;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        border-radius: 5px; /* Makes the button round */
        transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
        position: relative; /* Added for tooltip positioning */
    }

    .update-button:hover {
        background: linear-gradient(#3673a7, #1e405d);
        color: #ffd343;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    }

    .update-button:active {
        background: linear-gradient(#fce28e, #ffd343);
        color: #28689c;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .update-button:active i {
        color: #28689c;
    }

    .update-button:hover i {
        color: #ffd343; /* Change icon color on hover */
    }

    .update-label {
        display: inline-block;
        background: linear-gradient(#ffd343, #fce28e);
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
        color: #2b5b84;
        padding: 5px 5px;
        font-size: 0.8rem;
        font-weight: 600;
        position: relative; /* Added for tooltip positioning */
    }

 

    .resource-button {
        display: block;        /* Make the anchor tag a block-level element */
        width: 100%;           /* Make the button span the full width of the td */
        text-align: center; 
        background: linear-gradient(#ffd343, #fce28e);
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
        color: #2b5b84;
        padding: 8px 7px;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        border-radius: 5px; /* Makes the button round */
        transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
       
    }

    .resource-button:hover {
        background: linear-gradient(#3673a7, #1e405d);
        color: #ffd343;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    }

    .resource-button:hover i {
        background: linear-gradient(#3673a7, #1e405d);
        color: #ffd343;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    }

    .resource-button:active {
        background: linear-gradient(#fce28e, #ffd343);
        color: #28689c;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .resource-button:active i {
        color: #28689c;
    }





    .disable-label {
        pointer-events: none;
        background: linear-gradient(#ddd, #ccc);
        color: #999;
        box-shadow: none;
        cursor: not-allowed; /* Change cursor to not-allowed */
        display: block;        /* Make the anchor tag a block-level element */
        width: 100%;           /* Make the button span the full width of the td */
        text-align: center; 
        padding: 8px 7px;
        font-size: 0.8rem;
        font-weight: 600;
        border-radius: 5px; /* Makes the button round */
        
      }
      
    .disable-label i {
        color: #999; /* Change icon color when disabled */
      }

    .update-label2 {
        display: inline-block;
        background: linear-gradient(#7399b9, #3673a7);
        color: #fff;
        /*box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);*/
        padding: 8px 5px;
        font-size: 0.8rem;
        font-weight: 600;
        border-radius: 5px; /* Makes the button round */
        position: relative; /* Added for tooltip positioning */
    }

    .update-label2 i {
        color: #fff; /* Change icon color when disabled */
      }

    .update-button.disabled {
        background: linear-gradient(#ddd, #ccc);
        color: #999;
        box-shadow: none; /* Remove the shadow */
        cursor: not-allowed; /* Change cursor to not-allowed */
        pointer-events: none; /* Prevent any click or hover events */
        /*opacity: 0.6; /* Lower the opacity */
    }
    
    /* Keep the original active and hover states */
    .update-button.disabled:hover {
        background: linear-gradient(#ddd, #ccc);
        color: #999;
        box-shadow: none;
    }

    .update-button.disabled i {
        color: #999;
    }


    .ai-button {
        display: block;        /* Make the anchor tag a block-level element */
        width: 100%;           /* Make the button span the full width of the td */
        text-align: center; 
        background: linear-gradient(#3673a7, #0671cf);
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
        color: #fff;
        padding: 8px 7px;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        border-radius: 5px; /* Makes the button round */
        transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
       
    }

    .ai-button i {
        color: #fff;
    }

    .ai-button:hover {
        background: linear-gradient(#ffd343, #fce28e);
        color: #0671cf;
        /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);*/
    }

    .ai-button:hover i {
        background: linear-gradient(#ffd343, #fce28e);
        color: #0671cf;
        /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);*/
    }

    .ai-button:active {
        background: linear-gradient(#3673a7, #0671cf);
        color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .resource-button:active i {
        color: #fff;
    }

    .ai-button.disabled {
        background: linear-gradient(#ddd, #ccc);
        color: #999;
        box-shadow: none; /* Remove the shadow */
        cursor: not-allowed; /* Change cursor to not-allowed */
        pointer-events: none; /* Prevent any click or hover events */
        
    }

    .ai-button.disabled i {
        color: #999;
    }

    .certification-container {
        width: 100%;
        background: linear-gradient(#1c3b56, #3776ab); 
        padding: 0;
        padding-top: 20px;
        margin-bottom: 50px;
    }
    
        
    .certification-container h2 {
        font-size: 1.8em;
        color: #ffd343;
        margin-bottom: 0;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    }
    
    .certification-container p {
        font-size: 1.0em;
        line-height: 1.3;
        color: #e1e5fc;
    }

    /*admin styles */
    .wrapper {
        width: 100vw;
        margin: auto;
        display: flex;
        left: 0;
        justify-content: space-between;
        margin-bottom: 100px;
        padding-top: 50px; /* Adjust the padding-top to create space for the header */
        padding-bottom: 50px; /* Adjust the padding-bottom to create space for the footer */
    }

    .sidebar {
        background-color: #1e2933;
        color: #fff;
        flex-basis: 30%;
        height: calc(100vh - 50px);
        font-size: 12px;
        padding: 20px;
        left: 0;
        position: fixed;
        text-align: left;
        top:50px; /* Adjust the top position to create space for the header */
        bottom: 50px; /* Adjust the bottom position to create space for the footer */
        margin-right: 20px;
        z-index: 999;
      }
    
    .main-content {
        flex-basis: 75%;
        height: calc(100vh - 50px);
        padding: 10px;
        top: 0;
        right: 0;
        margin-left: 180px; /* Adjust the margin to create space for the sidebar */
        text-align: left;
        z-index: 0;
       
    }

    .vertical-nav {
        list-style-type: none; /* Remove bullet points */
        padding: 0;            /* Remove default padding */
        margin: 0;             /* Remove default margin */
        display: flex;
        flex-direction: column; /* Make the list vertical */
        width: 200px;   
        font-size: small;       /* Optional: Set a fixed width */
    }
    
    .vertical-nav .nav-item {
        margin-bottom: 10px;   /* Space between items */
    }