body {
    font-family: 'Arial', sans-serif;
    background-color: #f9f9f9;
    font-weight:400;
    word-spacing:2px;
    line-height:2.2;
    font-size:15.6px;
}
.hero-section{
    position: relative;
    background: linear-gradient(135deg, #4CAF50, #1E90FF) center center/cover;
    color: #fff;
    min-height:150px;
}
.hero-section img {
    max-height: 220px;
    object-fit: cover;
    border-radius: 10px;
}
.hero-section h1{
    background: rgba(0, 0, 0, 0.5);
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    padding: 30px;
    font-size:32px;
    max-width:600px;
    margin:10px;
}
.hero-section img{
    max-width:540px;
    width:100%;
    height:auto;
    margin-bottom:20px;
}

/* Custom CSS to handle overflow text */
.container p {
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    white-space: normal; 
    max-width: 100%; /* Prevent overflow */
}


/* Custom styles for the logo */
.logo {
    height: 50px; /* Default height for larger screens */
}


/*Start login and signup form modal css*/
.form-container {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.form-container h2 {
    text-align: center;
    margin-bottom: 20px;
    font-weight: 600;
}
.btn-social {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-google {
    background-color: #db4437;
    color: white;
}
.btn-facebook {
    background-color: #3b5998;
    color: white;
}
.btn-social i {
    margin-right: 10px;
}
/*End login and signup form modal css*/

/*Start left side bar css*/

/* Left Sidebar Styles */
#sidebar {
    position: fixed;
    top: 0px; /* Position 0px from the top */
    left: -250px; /* Initially hidden */
    width: 250px;
    height: 100%; /* Full height */
    background-color: #f8f9fa; /* Background color */
    border-right: 1px solid #ddd; /* Right border */
    transition: left 0.4s ease; /* Smooth transition */
    z-index: 10000; /* Ensure it appears above other elements */
    padding: 15px; /* Padding inside the sidebar */
    overflow-y: auto; /* Add scrollability for vertical overflow */
}


#sidebar.active {
    left: 0; /* Show sidebar when active */
}

/* Toggle Button Styles */
#toggleButton {
    position: sticky;
    top: 10px; /* 80px from the top */
    left: 10px; /* 10px from the left */
    z-index: 1001; /* Ensure it appears above the sidebar */
    transition: left 0.6s ease; /* Smooth transition */
    background-color:#25539c;
    color:#fff;
    border-color:#000;
    opacity:1;
}

/* Close Button Styles */
#sidebar .btn-close {
    /*background: transparent; /* Transparent background */
    border: none; /* No border */
    color: #dc3545; /* Bootstrap danger color */
    font-size: 20px; /* Font size */
    position: absolute; /* Absolute positioning */
    top: 10px; /* Positioning from the top */
    right: 10px; /* Positioning from the right */
}

/* Menu Link Styles */
.menu-link {
    display: block; /* Full width links */
    padding: 10px; /* Padding around links */
    color: #000; /* Default text color */
    text-decoration: none; /* No underline */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.1s ease; /* Smooth transition */
}

/* Hover effects for menu links */
.menu-link:hover {
    background-color: #25539c; /* Lighter success hover color */
    color:#fff;
}

/*.menu-link:hover {
    background-color: #ffeeba;
}*/
small{
    font-size:13px;
}
/*End Left Side bar css*/
/*Start footer links css*/
footer {
    position: relative; /* Fix the footer at the bottom */
    left: 0;
    bottom: 0; /* Always stay at the bottom */
    width: 100%; /* Full width */
    background-color: #f8f9fa; /* Light color for the footer */
    text-align: center; /* Center the footer content */
}

footer a:hover {
    transform: scale(1.1); /* Slightly enlarge the icon on hover */
    transition: transform 0.2s; /* Smooth transition */
}

footer .link-item {
    padding: 10px 15px; /* Add padding for a better click area */
    border-radius: 5px; /* Rounded corners */
    display: block; /* Make the link a block element */
    transition: background-color 0.3s, color 0.3s; /* Smooth transitions */
}

footer .link-item:hover {
    background-color: #e7f3fe; /* Light blue background on hover */
    color: #007bff; /* Change text color on hover */
}

footer h5 {
    border-bottom: 2px solid #25539c; /* Add a border under the header */
    padding-bottom: 5px; /* Space between the header and links */
}
/*End footer links css*/



a{
    text-decoration:none;
    color:#666;
}
h1 {
    font-size: 30px;  /* Custom size for h1 */
    font-weight: bold; /* Make it bold */
}

h2 {
    font-size: 24px;  /* Custom size for h2 */
    font-weight: bold; /* Make it bold */
}

h3 {
    font-size: 22px;  /* Custom size for h3 */
    font-weight: bold; /* Normal weight */
}

h4 {
    font-size: 20px;  /* Custom size for h4 */
    font-weight: bold; /* Normal weight */
}

h5 {
    font-size: 18px;  /* Custom size for h5 */
    font-weight: bold; /* Normal weight */
}

h6 {
    font-size: 16px;  /* Custom size for h6 */
    font-weight: bold; /* Normal weight */
}
p{
    font-size:16px;
}
.btn.btn-primary{
    background-color:#25539c;
    border:1px solid #173f80;
}

/*form elements CSS for large screen Start*/
/* Input fields */
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="number"], 
input[type="date"], 
/*input[type="search"], */
textarea {
    width: 100%;
    /*padding: 8px 12px;*/
    margin-bottom: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="password"]:focus, 
input[type="number"]:focus, 
input[type="date"]:focus, 
input[type="search"]:focus, 
textarea:focus {
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Labels */
label {
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
    font-size: 14px;
    color: #495057;
}

/* Buttons */
button {
    display: inline-block;
    padding: 8px 16px;
    margin-bottom: 10px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

button:hover {
    background-color: #fff;
    border:0;
}

button:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Reduced-size buttons */
button.small-btn {
    padding: 5px 10px;
    font-size: 12px;
}

/* Form groups */
.form-group {
    margin-bottom: 15px;
}

/* Dropdown */
select {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

select:focus {
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
.form-check-input {
    vertical-align: middle; /* Align checkbox to the middle of the text */
}

.form-check-label {
    margin-top:10px;
    font-size: 12px; /* Smaller font size for mobile */
    vertical-align: middle; /* Align label text with checkbox */
}
/*Form elements CSS for large screen End*/

/* Styles for ordered and unordered lists */
ul, ol {
    padding-left: 20px; /* Indent list items */
    margin: 15px 0; /* Margin around lists */
}

/* Style for list items */
li {
    font-size: 14px; /* Base font size */
    line-height: 1.5; /* Increase line height for readability */
}

li ul,ol li ol,ul {
    margin-left: 10px; /* Reduced left margin for nested lists */
    margin-top: 5px; /* Reduced top margin for sublist items */
    margin-bottom: 15px; /* Increased bottom margin for sublist items */
    color: #555; /* Darker color for nested items */
}

/* Styles for tables */
table {
    width: 100%; /* Full width */
    border-collapse: collapse; /* Collapsing borders */
    margin: 15px 0; /* Margin around tables */
}

/* Table header styles */
th {
    background-color: #f8f9fa; /* Light background for headers */
    padding: 10px; /* Padding for headers */
    font-weight: bold; /* Bold font */
}

/* Table cell styles */
td {
    padding: 10px; /* Padding for cells */
    border: 1px solid #ddd; /* Light border */
}


@media (max-width: 765px) {
body {
    font-family: 'Arial', sans-serif;
    background-color: #f9f9f9;
    /*font-weight:500;*/
    word-spacing:2px;
    line-height:1.6;
    font-size:12px;
}
.hero-section{
    min-height:100px;
}
.hero-section h1{
    padding: 15px 5px;
    font-size:20px;
    max-width:100%;
    margin:5px;
}
.hero-section img{
    max-width:100%;
    width:100%;
    height:auto;
}
small{
    font-size:10px;
}
    h1 {
        font-size: 22px;  /* Custom size for h1 */
    }
    
    h2 {
        font-size: 19px;  /* Custom size for h2 */
    }
    
    h3 {
        font-size: 18px;  /* Custom size for h3 */
    }
    
    h4 {
        font-size: 17px;  /* Custom size for h4 */
    }
    
    h5 {
        font-size: 16px;  /* Custom size for h5 */
    }
    
    h6 {
        font-size: 14px;  /* Custom size for h6 */
    }
    p{
        font-size:14px;
    }
        /*style for lists*/
    ul, ol {
        font-size: 12px; /* Smaller font size for mobile */
    }

    li {
        line-height: 1.4; /* Slightly reduced line height */
    }
    li ul,ol li ol,ul {
        margin-left: -5px; /* Reduced left margin for nested lists */
        margin-top: 5px; /* Reduced top margin for sublist items */
        margin-bottom: 15px; /* Increased bottom margin for sublist items */
        color: #555; /* Darker color for nested items */
    }
    /*style for table*/
    table {
        font-size: 12px; /* Smaller font size for mobile */
    }

    th, td {
        padding: 8px; /* Reduced padding for smaller screens */
    }
    .btn.btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger,
    .btn-warning,
    .btn-info,
    .btn-light,
    .btn-dark,
    .btn-link {
        height: 30px;  /* Set height */
        width: auto;   /* Set width */
        font-size: 11px;  /* Set font size */
    }
    input[type="text"], 
    input[type="email"], 
    input[type="password"], 
    input[type="number"], 
    input[type="date"], 
    input[type="search"] {
        font-size:13px;
    }
    
    input[type="checkbox"], input[type="radio"] {
        transform: scale(1); /* Further reduce size on small screens */
        margin-right: 4px; /* Adjust spacing */
    }
    .form-check-input {
        transform: scale(1); /* Slightly smaller checkbox on mobile */
    }

    .form-check-label {
        font-size: 12px; /* Further reduce font size on smaller screens */
    }
    
    .logo {
        height: 35px; /* Height for mobile screens */
    }
    
    /* Reduce size of the navbar-toggler-icon */
    .navbar-toggler-icon {
        width: 20px; /* Set the width */
        height: 20px; /* Set the height */
        color:#25539c;
    }
    .navbar-toggler{
        margin-top:5px;
    }
    
    /*Start CSS for Login Signup related modal*/
    .modal-title{
        font-size:14px;
    }
    .modal-body label{
        font-size:12px;
    }
    
    .btn-social {
        font-size: 12px; /* Further reduce font size on small screens */
        padding: 5px 8px;
        height: 35px;
    }
    .modal-body p{
        font-size:12px;
    }
    
    /*End CSS for Login Signup related modal*/
    
    /* Left Sidebar Styles */
    #sidebar {
        top: 60px; /* Position 80px from the top */
    }
    
    #sidebar.active {
        left: 0; /* Show sidebar when active */
    }
    
    #toggleButton {
        top: 65px; /* 80px from the top */
        left: 5px; /* 10px from the left */
        height:28px;
        
    }
    #sidebar .btn-close {
        font-size: 15px; /* Font size */
    }
    .btn-close {
        font-size: 15px; /* Font size */
    }
    .menu-link {
        font-size: 14px; /* Font size */
    }
    
    /* Hover effects for menu links */
    .menu-link:hover {
        background-color: #25539c; /* Lighter success hover color */
        /*color:#fff;*/
    }
    /*End Left Side bar css*/
    /*footer css start Mobile Screen*/
    footer{
        font-size:12px;
    }
    footer h5{
        font-size:15px;
    }
    footer .social-icon {
        font-size: 16px; /* Adjust size here */
    }
    footer .link-item {
        padding: 2px 10px; /* Add padding for a better click area */
        font-size:12px;
    }
    /*Footer CSS END Mobile Screen*/
}