@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap');
*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', sans-serif;
    color: white;
    overflow-x: hidden;
}

.bg-img {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../images/itbg.jpg) no-repeat fixed center;
    background-size: cover;
}

.bg-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}

a {
    text-decoration: none;
    color: white;
}

ol {
    list-style-type: none;
    display: flex;
    position: fixed;
    right: 0;
}

/* Basic styles for navbar */
#navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: transparent;
}

/* Styles for the hamburger icon */
.hamburger {
    display: none; /* Hidden by default */
    flex-direction: column;
    cursor: pointer; /* Change cursor to pointer */
}

/* Hamburger bar styles */
.bar {
    height: 3px;
    width: 25px;
    background-color: white; /* Adjust color */
    margin: 3px 0; /* Space between bars */
}

/* Navigation links styles */
.nav-links {
    display: flex; /* Horizontal layout */
    list-style-type: none;
}

/* Responsive styles for small screens */
@media (max-width: 768px) {
    .nav-links {
        display: none; /* Hide navigation links by default */
        flex-direction: column; /* Stack links vertically */
        position: absolute; /* Position it absolutely */
        background-color: rgba(0, 0, 0, 0.5); /* Same background as navbar */
        top: 60px; /* Position below the navbar */
        right: 0; /* Align to the right */
        width: 45%; /* Full width */
        padding: 10px 0; /* Padding for links */
    }

    .nav-links li a {
    color: white; /* Link color */
    text-decoration: none; /* Remove underline */
    padding: 10px 15px; /* Add padding for spacing */
    transition: background 0.3s; /* Transition effect for hover */
    }

    /* Change background color on hover */
    .nav-links li a:hover {
        background: rgba(215, 91, 33, 255); /* Darker shade on hover */
    }

    .nav-links li {
        margin-right: 0; /* No margin for mobile nav items */
    }


    .nav-links.active {
        display: flex; /* Show links when active */
    }

    .hamburger {
        display: flex; /* Show hamburger icon on small screens */
    }
}


.container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    height: 100vh;
}

.mars {
    position: absolute;
    right: -20px;
    height: 90vh;
    margin-top: 40px;
    position: fixed;
    width: auto;
    animation: spin 20s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

header {
    display: flex;
    position: fixed;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    position: fixed;
    z-index: 1000;
}

.logo {
    width: 50px; /* Adjust the width of the logo as per your design */
    height: auto; /* Maintain the aspect ratio */
    margin-right: 10px;
    margin-left: 30px; 
    vertical-align: middle; /* Aligns the logo vertically with the text */
}

header a {
    display: flex;
    align-items: center; /* Ensures the logo and text are aligned vertically */
}

header > a {
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

header ol li {
    font-weight: 1000;
    margin-right: 40px;
}

header ol li:first-child {
    opacity: 1;
}

h1 {
    font-size: 50px;
    margin-left: 30px;
}

main {
    padding-top: 13%;
}

.small-italic {
    font-style: italic;
    font-size: 25px; 
    opacity: 0.75; 
}

.d-flex a {
    margin-right: 50px;
    margin-left: 30px;
    display: flex;
    font-size: 14px;
    align-items: center;
    text-transform: uppercase;
}

.d-flex a span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-right: 8px;
}

.d-flex a:first-child span {
    background: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.d-flex a:first-child i {
    color: black;
}

/* Section Styles */
section {
    padding: 100px 20px; /* Adjust the padding as needed */
    min-height: 100vh; /* Ensure each section takes at least the full height of the viewport */
}

section h2 {
    font-size: 40px;
    margin-bottom: 20px;
    margin-left: 30px;
}

section p {
    margin-left: 30px;
}

/* About Section */
/* Animation Keyframes */
@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

#about {
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
}

.about-content {
    display: flex; /* Enable flexbox layout */
    justify-content: space-between; /* Space between text and image */
    align-items: center; /* Align items at the top */
}

.about-content > div {
    margin-right: 85px; /* Add space between text and image */
    text-align: justify;
    animation: slideInLeft 9s ease forwards; /* Animation for text */
}

.about-content img {
    width: 35%; /* Set width for the image */
    height: auto; /* Maintain aspect ratio */
    margin-right: 30px;
    animation: slideInRight 9s ease forwards; /* Animation for image */
}

/* Adjust the margins and paddings for better spacing */
section p {
    font-size: 18px;
    margin-bottom: 20px;
    opacity: 0.85;
}

/* Our Partners Section */
.no-padding {
    padding-top: 90; 
    padding-bottom: 20;
    position: relative;
    overflow: hidden; /* Ensure the text doesn't overflow outside the container */ 
}

/* Animate the <h2> from left to right */
.animate-heading {
    position: relative; /* Required for animation positioning */
    display: inline-block; /* So the heading does not take up the full width */
    opacity: 0; /* Hide it initially for a smoother transition */
    transform: translateX(-100%); /* Start off-screen */
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

/* When the heading is in view, apply the animation */
.animate-heading.animate {
    transform: translateX(0); /* Move to the final position */
    opacity: 1; /* Make it fully visible */
}

/* Keyframes to move the h2 element */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%); /* Start off-screen on the left */
        opacity: 0; /* Invisible at the start */
    }
    100% {
        transform: translateX(0); /* End at the final position */
        opacity: 1; /* Fully visible */
    }
}

#partners {
    min-height: 50vh;
    background: rgba(0, 0, 0, 0.9); /* Semi-transparent background */
    color: white; /* Ensure text is visible */
    text-align: center; /* Center text */
    padding: 0;
    padding-top: 20px;
}

.partner-logos {
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Center the logos */
    flex-wrap: wrap; /* Wrap logos on smaller screens */
    margin-top: 20px; /* Space above logos */
    opacity: 0; /* Start hidden */
    animation: fadeIn 2s forwards; /* Fade in animation */
    padding-bottom: 50px;
}

.partner-logos img {
    width: auto; /* Set width for client logos */
    height: 50px; /* Maintain aspect ratio */
    object-fit: contain;
    margin: 10px; /* Space between logos */
    transition: transform 0.9s, opacity 0.5s; /* Add opacity transition */
    opacity: 0; /* Start hidden */
    transform: translateY(20px); /* Start slightly lower */
}

.partner-logos.show {
    opacity: 1; /* Show the logos when animated */
}

.partner-logos img.visible {
    opacity: 1; /* Show the logo when animated */
    transform: translateY(0); /* Move to original position */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px); /* Start slightly lower */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Our Clients Section */
/* Animate the <h2> for Clients from right to left */
.animate-heading-clients {
    position: relative;
    display: inline-block;
    opacity: 0; /* Hidden initially */
    transform: translateX(100%); /* Start off-screen */
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

/* When the heading is in view, apply the animation */
.animate-heading-clients.animate {
    transform: translateX(0); /* Move to the final position */
    opacity: 1; /* Make it fully visible */
}

/* Keyframes for sliding in from the right */
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%); /* Start off-screen on the right */
        opacity: 0; /* Invisible at the start */
    }
    100% {
        transform: translateX(0); /* End at the final position */
        opacity: 1; /* Fully visible */
    }
}

#clients {
    min-height: 50vh;
    background-color: rgba(236,106,46,0.8);
    background-position: center;
    background-size: cover;
    color: white; /* Ensure text is visible */
    text-align: center; /* Center text */
    padding: 0;
    padding-top: 20px;
}

.client-logos {
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Center the logos */
    flex-wrap: wrap; /* Wrap logos on smaller screens */
    margin-top: 20px; /* Space above logos */
    opacity: 0; /* Start hidden */
    animation: fadeIn 2s forwards; /* Fade in animation */
    padding-bottom: 50px;
    margin-left: 30px;
    margin-right: 30px;
}

.client-logos img {
    width: auto; /* Set width for client logos */
    height: 70px; /* Maintain aspect ratio */
    object-fit: contain;
    margin: 10px; /* Space between logos */
    transition: transform 0.9s, opacity 0.5s; /* Add opacity transition */
    opacity: 0; /* Start hidden */
    transform: translateY(20px); /* Start slightly lower */
}

.client-logos.show {
    opacity: 1; /* Show the logos when animated */
}

.client-logos img.visible {
    opacity: 1; /* Show the logo when animated */
    transform: translateY(0); /* Move to original position */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px); /* Start slightly lower */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#services {
    position: relative; /* Make sure the position is relative */
    padding: 80px 20px; /* Adjust top/bottom and left/right padding */
    background-image: url(../images/services.jpg); /* Set the background image */
    background-size: cover; /* Scale the background image to cover */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    overflow: hidden; /* Ensure that the pseudo-element doesn't overflow */
}

#services::before {
    content: ''; /* Necessary for pseudo-elements */
    position: absolute; /* Position it absolutely */
    top: 0; /* Align it to the top */
    left: 0; /* Align it to the left */
    right: 0; /* Stretch to the right */
    bottom: 0; /* Stretch to the bottom */
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent gray */
    z-index: 1; /* Ensure it's on top of the background image */
}

#services h2 {
    position: relative;
    z-index: 2;
    color: white;
    margin-bottom: 12px;
}

#services p {
    position: relative; /* Position content above the pseudo-element */
    z-index: 2; /* Ensure text is above the color overlay */
    text-align: justify;
    margin-right: 30px;
    font-size: 15px;
}

.service-boxes {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Wrap on smaller screens */
    margin-right: 30px;
    margin-left: 30px; 
}

.row {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    z-index: 2;
    text-align: left;
}

/* Basic card styling */
.card-01, .card-02, .card-03, .card-04, .card-05 {
    position: relative;
    flex: 1;
    max-width: 500px;
    height: auto; /* Adjust height to auto to fit content */
    margin: 7px;
    padding: 7px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Logo positioning */
.card-logo {
    position: absolute; /* Position it absolutely within the card */
    top: 10px; /* Adjust the top position as needed */
    right: 10px; /* Align to the right */
}

/* Heading styles */
.card-01 h3, .card-02 h3, .card-03 h3, .card-04 h3, .card-05 h3 {
    font-size: 20px;
    margin-bottom: 5px;
}

/* Explanation text */
.card-01 p, .card-02 p, .card-03 p, .card-04 p, .card-05 p {
    margin-bottom: 7px;
}

/* Logo styling */
.card-logo img {
    width: 80px;
    height: auto;
    margin-bottom: 15px;
    transition: transform 0.9s ease-in-out; /* Animation on hover */
}

/* Animation: Scale up the logo on hover */
.card-logo:hover img {
    transform: scale(1.1); /* Scale up slightly */
}

/* Add hover effect to the entire card */
.card-01:hover, .card-02:hover, .card-03:hover, .card-04:hover, .card-05:hover {
    transform: translateY(-5px); /* Lift the card slightly */
    transition: transform 0.3s ease-in-out;
}

/* Color-specific backgrounds for each card */
.card-01 {
    background: #8cb369;
}

.card-02 {
    background: #706677;
}

.card-03 {
    background: #f4a259;
}

.card-04 {
    background: #5b8e7d;
}

.card-05 {
    background: #bc4b51;
}

/* Responsive styles for smaller screens */
@media (max-width: 768px){
    #gallery .description {
        display: none;
    }
}

#gallery {
    padding: 80px 20px; /* Adjust top/bottom and left/right padding */
    text-align: center;
}

#gallery h2 {
    position: relative;
    margin-bottom: 0;
    margin-top: -20px;
    font-size: 30px;
}

.gallery-container {
    max-width: 1150px; /* Adjust the maximum width of the gallery container */
    margin: 0 auto; /* Center the gallery container */
}

#gallery .row {
    display: flex;
    justify-content: center; /* Center the items horizontally */
    gap: 10px; /* Equal gap between images */
    margin-bottom: 10px; /* Adds equal space between the rows */
}

#gallery .box {
    position: relative;
    width: calc(20% - 10px); /* Ensures each image takes 20% of the row with gap accounted for */
    overflow: hidden; /* Prevents overflow when scaling */
    transition: transform 0.3s ease; /* Smooth transition for scaling */
}

#gallery .description {
    position: absolute; /* Position absolutely within the box */
    bottom: 0; /* Align to the bottom of the box */
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    color: white; /* Text color */
    text-align: center; /* Center the text */
    padding: 10px; /* Padding around the text */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
}

#gallery .box:hover {
    transform: scale(1.05); /* Slightly scale up the image on hover */
}

#gallery .box:hover .description {
    opacity: 1; /* Show the description on hover */
}

.sorting-buttons {
    margin-bottom: 20px; /* Space between buttons and gallery */
    text-align: center; /* Center the buttons */
}

.sorting-buttons button {
    position: relative;
    padding: 10px 20px; /* Padding for the buttons */
    margin: 0 5px; /* Spacing between buttons */
    background-color: rgba(233, 120, 68, 255); /* Button background color */
    color: white; /* Text color */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s; /* Smooth transition for hover */
}

.sorting-buttons button:hover {
    transform: translateY(-3px); /* Lift effect */
    background-color: rgba(215, 91, 33, 255) /* Darker shade on hover */
}

#gallery img {
    width: 100%; /* Make image take full width of the container */
    height: auto; /* Uniform height for all images */
    object-fit: cover; /* Ensure image covers the box without stretching */
    border-radius: 10px; /* Optional: rounded corners */
    display: block;
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
}

#gallery .box:hover img {
    opacity: 0.8; /* Change opacity on hover */
}

/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
    padding: 20px; /* Optional: padding around the modal */
}

/* Modal Content (Image) */
.modal-content {
    display: block;
    max-width: 100%; 
    max-height: 95%; 
    object-fit: contain;
    border-radius: 10px; /* Optional: rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Optional: shadow for depth */
}

/* Fade-in Animation */
.fade-in {
    opacity: 0; /* Start invisible */
    transform: scale(0.8); /* Start slightly smaller */
    animation: fadeIn 0.5s forwards; /* Apply animation */
}

@keyframes fadeIn {
    to {
        opacity: 1; /* Fully visible */
        transform: scale(1); /* Normal size */
    }
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    color: white;
    text-align: center;
    padding: 10px 0;
}

/* Close Button */
.close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent dark background */
    
    /* Explicit size to make it square */
    width: 30px;
    height: 30px;
    margin-top: 10px;
    
    font-size: 30px;
    font-weight: bold;
    z-index: 1001;
    cursor: pointer;
    
    /* Center the "X" inside the square */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Smooth transition when hovered */
    transition: all 0.3s ease;
}

.close:hover {
    background-color: rgba(0, 0, 0, 1); /* Darker background on hover */
    color: #fff; /* Ensures text remains white on hover */
}



/* Next & Previous Buttons */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Center vertically */
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 40px;
    transition: 0.3s;
    cursor: pointer;
    user-select: none; /* Prevent text selection */
}

/* Position Next Button to the right */
.next {
    right: 30px;
}

/* Position Previous Button to the left */
.prev {
    left: 30px;
}

/* Hover effect on Next & Previous Buttons */
.prev:hover, .next:hover {
    color: rgba(0, 0, 0, 0.7);
}

#helpdesk {
    position: relative;
    padding: 40px 20px; /* Adjust top/bottom and left/right padding */
    background: url(../images/bghelpdesk.jpg);
    background-size: cover;
}

#helpdesk::before {
    content: ""; /* Required for pseudo-element */
    position: absolute; /* Position it absolutely within the #helpdesk */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    right: 0; /* Align to the right */
    bottom: 0; /* Align to the bottom */
    background-color: rgba(0, 0, 0, 0.6); /* Black with 50% opacity */
    z-index: 1; /* Layer it below the text but above the background */
}

.helpdesk-container {
    display: flex; /* Use flexbox to create a horizontal layout */
    align-items: center; /* Center items vertically */
    position: relative;
    z-index: 2;
    margin-top: 60px;
}

.helpdesk-content {
    width: 50%; /* Set width for the text container */
    text-align: justify;
    text-shadow: 0px 2px 7px rgba(0, 0, 0);
}

.helpdesk-image {
    width: 55%; /* Set width for the image container */
    text-align: center; /* Align the image to the right */

}

.helpdesk-image img {
    max-width: 75%; /* Make sure the image is responsive */
    height: auto; /* Maintain aspect ratio */
    margin-top: 20px;
}

.helpdesk-button {
    display: inline-block; /* Make button inline block for better styling */
    margin-top: 35px; /* Space above the button */
    padding: 10px 20px; /* Add padding for the button */
    background-color: rgba(233, 120, 68, 255); /* Button background color */
    color: white; /* Button text color */
    text-shadow: none;
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Round corners */
    margin-left: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s; /* Smooth transition for hover */
}

.helpdesk-button:hover {
    background-color: rgba(215, 91, 33, 255); /* Darker shade on hover */
}


#contact {
    padding: 40px 20px; /* Adjust top/bottom and left/right padding */
    background-color: rgba(0, 0, 0, 0.7);
}

.map-container {
    margin-top: 150px;
    padding-left: 0;
    margin-right: 20px;
}

.contact-container {
    display: flex; /* Use flexbox to create a horizontal layout */
    justify-content: space-between; /* Space between the contact info and form */
    margin-top: 60px;
}

.contact-info {
    width: 45%; /* Adjust width as needed */
}

.contact-form {
    width: 70%; /* Adjust width as needed */
    background: rgba(255, 255, 255, 0.1); /* Light background for form */
    padding: 20px; /* Padding for the form */
    border-radius: 5px; /* Rounded corners */
    margin: 30px;
    margin-right: 40px;
    transition: background 0.5s ease;
}

.contact-form:hover {
    background: rgba(255, 255, 255, 0.2); /* Slightly brighten on hover */
}

.contact-form h3 {
    color: white; /* Heading color */
    font-size: 17px;
    font-style: italic;
    margin-bottom: 5px;
    opacity: 0; /* Start invisible */
    transform: translateY(20px); /* Move it down slightly */
    animation: fadeInUp 1s forwards; /* Animate in */
}

.contact-form label {
    color: white; /* Label color */
    display: block; /* Make labels block-level */
    margin-bottom: 5px; /* Space below label */
}

.contact-form input,
.contact-form textarea {
    width: 100%; /* Full width */
    padding: 10px; /* Padding for inputs */
    margin-bottom: 15px; /* Space below each input */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    box-shadow: 0 0 10px rgba(233, 120, 68, 0.5); /* Add glow on focus */
    background-color: rgba(255, 255, 255, 0.2); /* Change background on focus */
}

.contact-form button {
    background-color: rgba(233, 120, 68, 255); /* Button background color */
    color: white; /* Button text color */
    padding: 10px 20px; /* Button padding */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer on hover */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.contact-form button:hover {
    background-color: rgba(215, 91, 33, 255); /* Darker shade on hover */
    transform: scale(1.05);
}

.contact-form button:active {
    transform: scale(0.95); /* Slightly shrink on click */
}

#contact p:first-of-type {
    font-size: 26px; /* Adjust size as needed */
    font-weight: bold; /* Make it bold */
}

#contact p {
    position: relative;
    margin-left: 35px;
    margin-bottom: 10px;
    color: white;
    font-size: 13px;
}

#contact i {
    margin-right: 10px; /* Space between icon and text */
    color: white; /* Change icon color to white */
    font-size: 1.2em; /* Adjust icon size */
}

/* Keyframes for fade-in animation */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px); /* Start slightly down */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* End in original position */
    }
}

/* Responsive styles for smaller screens */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column; /* Stack elements vertically */
    }

    .contact-info {
        width: 100%; /* Full width */
        margin-bottom: 20px; /* Add space below */
    }

    .map-container {
        width: 100%; /* Full width */
        margin-bottom: 20px; /* Add space below */
    }

    .contact-form {
        width: 100%; /* Full width */
        margin: 0; /* Remove margin for full width */
    }

    .contact-form h3 {
        font-size: 20px; /* Adjust heading size for smaller screens */
    }

    .contact-info p {
        font-size: 14px; /* Adjust font size for better readability */
        margin-left: 0; /* Remove left margin */
    }
}


ol.info {
    padding-top: 5%;
}

ol.info li {
    flex: 0 0 30%;
}

ol.info li h5 {
    margin-bottom: 10px;
}

ol.info li h4 {
    margin-bottom: 10px;
}

ol.info li p {
    padding-right: 20%;
    opacity: 0.75;
}

/* Active state for navigation links */
ol li.active a {
    color: #ec6a2e; /* Change the color when active */
    font-weight: 900; /* You can also make it bolder */
}

footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 5px 0;
}