/* Fade In Animation for Pages with Black Background */
.fade-in-black {
    animation: fadeInBlack 0.2s ease-in-out;
    background-color: #5258e5;
    color: white;  /* Optional: Adjust text color for visibility */
}

@keyframes fadeInBlack {
    0% {
        opacity: 0;
        background-color: #5258e5;
    }
    100% {
        opacity: 1;
        background-color: #5258e5;
    }
}

/* For Slide-in Transition */
.slide-in {
    animation: slideIn 0.2s ease-in-out;
}

@keyframes slideIn {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}
















/* Ensures the content box is wider on smaller screens */
@media (max-width: 576px) {
    .custom-text {
        font-size: 1.1rem; /* Increase font size for better readability */
    }

    .timeline_content {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        align-items: center;  /* Centers content horizontally */
        justify-content: center;  /* Centers content vertically */
        text-align: center;  /* Ensures text inside is centered */
        padding: 20px;  /* Adjust padding as needed */ /* Ensures the box spans the width of the screen on smaller devices */
    }
}

/* For medium screens and above */
@media (min-width: 768px) {
    .timeline_content {
        width: 80%; /* Adjusted for medium screen widths */
    }
}

.timeline-list li {
    margin-bottom: 30px; /* Add margin to separate each timeline item */
}

/* For smaller screens */
@media (max-width: 768px) {
    .timeline_content {
        max-height: none; /* Remove max-height to ensure full content is visible */
        padding: 20px;  /* Increase padding for more space */
        margin-bottom: 30px; /* Increase margin to create more vertical space between items */
    }

    /* Timeline list and text styling for small screens */
    .timeline-list {
        padding-left: 0;
        margin-left: 0;
    }

    .timeline_content h4 {
        font-size: 1rem; /* Adjusted font size for readability */
        line-height: 1.4;
    }

    .timeline_content p {
        font-size: 1rem; /* Adjusted for better readability */
        line-height: 1.5;
    }

    .scrollable-text {
        max-height: 300px; /* Adjust the height for scrollable text */
        overflow-y: auto;
        padding: 10px;
        margin-top: 15px;
        text-align: left;
    }

    /* Heading text size reduction */
    .heading {
        font-size: 1.5rem; /* Adjusted size for smaller screens */
    }

    /* General alignment adjustments */
    .card-body {
        padding: 15px;
    }

    /* Optional: make sure the sections have appropriate spacing */
    .section-title h4 {
        font-size: 1.2rem;
    }

    .section-title p {
        font-size: 1.2rem;
    }
}

/* For medium screens (up to 1024px) */
@media (max-width: 1024px) {
    .timeline_content h4 {
        font-size: 1.3rem;
    }

    .timeline_content p {
        font-size: 1.1rem;
    }

    .heading {
        font-size: 1.8rem; /* Slightly reduced for medium screens */
    }
}

/* For larger screens */
@media (min-width: 1200px) {
    .timeline_content h4 {
        font-size: 1.5rem;
    }
    .timeline_content {
        padding: 30px; /* Add more padding on larger screens for better spacing */
        margin-bottom: 30px; /* Maintain consistent vertical gap */
    }
    .heading {
        font-size: 2rem; /* Larger font size for big screens */
    }
}

/* Centers content horizontally and vertically */
.timeline_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;  /* Centers text inside */
    padding: 20px; /* Adjust padding as needed */
    margin: 0 auto; /* Centers the entire element */
    width: 100%; /* Ensure it takes the full width */
}

/* Scrollable content on smaller screens */
.scrollable-text {
    max-height: 300px; /* Adjust the height as needed */
    overflow-y: auto;
    padding: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
}


.custom-bg {
    background: linear-gradient(45deg, #6fe2e1, #5258e5) !important;
}

.custom-bg2 {
    background: linear-gradient(45deg, #5258e5, #6fe2e1) !important;
}

.custom-bg-purple {
    background: #390a65;
}
.custom-text {
    color: #ffffff !important; /* Custom text color */
}

.source-code-pro-custom-light {
    font-family: "Source Code Pro", monospace;
    font-optical-sizing: auto;
    font-weight: 350;
    font-style: normal;
  }


.source-code-pro-custom {
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.navbar-nav .nav-link:hover {
    color: #cbecff !important; /* Example color on hover */
}

/* Style for active nav link */
.navbar-nav .nav-link.active {
    color: #390a65 !important; /* Color for active page link */
}

.bree-serif-regular {
    font-family: "Bree Serif", serif;
    font-weight: 400;
    font-style: normal;
  }
  
.secondary-text-colour{
    color: #390a65 !important;
}

.custom-btn {
    border-radius: 10px !important; /* Custom border radius */
    text-decoration: none !important;
    color: #f6ff00 !important; /* Custom text color */
    border: 2px solid #f6ff00 !important; /* Custom border color */
    font-family: 'Source Code Pro', monospace !important; /* Custom font from Google Fonts */
    font-weight: 400 !important; /* Bold text */
    padding: 8px 10px !important; /* Custom padding */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
}

.custom-btn:hover {
    color: #ffffff; /* Change text color on hover */
    border-color: white; /* Change border color on hover */
}