* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
}

/* Header */
header {
    background: #333;
    color: #fff;
    padding: 20px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    position: relative; /* For absolute positioning of menu-icon */
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

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

.logo img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.company-info h1 {
    font-size: 24px;
}

.company-info p {
    font-size: 14px;
    opacity: 0.8;
}

nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 1;
}

/* Threedot Menu Icon Styling */
.menu-icon {
    display: none;
    font-size: 24px;
    cursor: pointer;
    margin-left: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
}

/* Dropdown Menu Styling (Desktop View) */
#nav-links {
    list-style: none;
    display: flex;
}

#nav-links li {
    margin-left: 20px;
}

#nav-links li a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    position: relative;
    transition: color 0.3s;
}

#nav-links li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: #007bff;
    bottom: -5px;
    left: 0;
    transition: width 0.3s;
}

#nav-links li a:hover::after {
    width: 100%;
}

#nav-links li a:hover {
    color: #007bff;
}

#nav-links li a.btn {
    background: #ff00ff;
    padding: 8px 16px;
    border-radius: 5px;
}

#nav-links li a.btn:hover {
    background: #0056b3;
}

/* Animated Heading */
.animated-heading {
    margin-top: 0px;
    background: #3dff0082;
    color: #12110a;
    padding: 10px;
    text-align: center;
    overflow: hidden;
}

.animated-heading h2 {
    display: inline-block;
    font-size: 24px;
    animation: slide 10s linear infinite;
}

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

/* Slider and Notice Board */
.slider-notice {
    display: flex;
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
    position: relative;
}

.slider {
    width: 70%;
    position: relative;
    height: auto;
    overflow: hidden;
}

.slides {
    display: flex;
    width: 300%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    width: 33.33%;
}

.slide a {
    display: block;
    width: 100%;
    height: 100%;
}

.slide img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
}

.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
}

.prev { left: 10px; }
.next { right: 10px; }

.notice-board {
    width: 30%;
    margin-left: 20px;
    background: #f0f8ff;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.notice-board h2 {
    background: #007bff;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 20px;
}

.watermark-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
    z-index: 1;
}

.notices {
    position: relative;
    z-index: 2;
    max-height: 340px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* নোটিশ নিচ থেকে শুরু হবে */
}

.notices:hover .notice {
    animation-play-state: paused;
}

.notice {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    animation: scrollUp 10s linear infinite;
    text-decoration: none;
    color: #333;
}

.notice:hover {
    background: #ddd;
}

@keyframes scrollUp {
    0% { transform: translateY(100%); opacity: 0; } /* নিচ থেকে শুরু */
    10% { opacity: 1; } /* দ্রুত দৃশ্যমান */
    90% { opacity: 1; } /* শেষ পর্যন্ত দৃশ্যমান */
    100% { transform: translateY(-100%); opacity: 0; } /* উপরে অদৃশ্য */
}

/* Image Boxes (Explore More) */
.image-boxes {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    position: relative;
    background: url('images/explore-background.jpg') no-repeat center center/cover;
}

.image-boxes h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #0e0c20;
    text-shadow: 2px 2px 4px rgba(235, 243, 239, 0.459);
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
}

.boxes-slider {
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 100%;
}

.boxes {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: max-content;
}

.box {
    flex: 0 0 33.33%;
    text-align: center;
    padding: 20px;
    min-width: 0;
}

.box a {
    text-decoration: none; /* লিঙ্ক থেকে আন্ডারলাইন সরানো */
    color: inherit; /* টেক্সটের রঙ ডিফল্ট রাখা */
}

.box img {
    width: 200px; /* বর্গক্ষেত্রের প্রস্থ */
    height: 200px; /* বর্গক্ষেত্রের উচ্চতা */
    object-fit: cover; /* ইমেজ ক্রপ হবে কিন্তু বিকৃত হবে না */
    border-radius: 10px; /* গোলাকার কোণা বজায় থাকবে */
    display: block; /* ইমেজকে ব্লক এলিমেন্ট হিসেবে সেট করা */
    margin: 0 auto; /* ইমেজ কেন্দ্রে থাকবে */
    transition: transform 0.3s ease; /* জুম এফেক্টের জন্য ট্রানজিশন */
}

.box img:hover {
    transform: scale(1.1); /* হোভারে 10% জুম হবে */
}

.box h4 {
    margin: 10px 0;
    color: #0006ff;
    padding: 2px 6px;
    border-radius: 6px;
    text-decoration: none;
}

.explore-prev, .explore-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 1px;
    cursor: pointer;
    font-size: 18px;
    z-index: 3;
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.explore-prev { left: 10px; }
.explore-next { right: 10px; }

/* Responsive Design */
@media (max-width: 768px) {
    .box {
        flex: 0 0 100%; /* মোবাইলে একটি আইটেম পুরো প্রস্থ নেবে */
    }
    .explore-prev, .explore-next {
        display: none; /* মোবাইলে স্লাইড বাটন লুকিয়ে ফেলা */
    }
    .box img {
        width: 200px; /* মোবাইলেও বর্গক্ষেত্র বজায় থাকবে */
        height: 200px; /* একই আকার */
    }
}
/* Alternating Sections */
.alternating-sections {
    max-width: 1200px;
    margin: 20px auto;
}

.section {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    padding: 20px;
}

.text-right {
    flex-direction: row;
}

.text-left {
    flex-direction: row-reverse;
}

.text-section {
    flex: 1;
    padding: 20px;
}

.text-section h3 {
    font-size: 28px;
    margin-bottom: 10px;
}

.text-section p {
    font-size: 16px;
    color: #666;
}

.image-section {
    flex: 1;
    text-align: center;
}

.image-section img {
    max-width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}

/* Visitor Graph Section */
.visitor-graph {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background: #007bff;
    color: #fff;
    border-radius: 10px;
}

.graphs {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap; /* Default: keeps graphs in a row on desktop */
}

.graph {
    background: #ffffff;
    border-radius: 10px;
    padding: 10px;
    margin: 0 5px; /* Small gap between graphs */
    height: 400px; /* Consistent height */
}

/* Pie Chart specific width */
.graph:nth-child(1) {
    width: 30%;
}

/* Bar Charts specific width */
.graph:nth-child(2),
.graph:nth-child(3) {
    width: 35%;
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    .graphs {
        flex-direction: column; /* Stack graphs vertically */
        flex-wrap: nowrap; /* No wrapping needed in column mode */
    }

    .graph {
        width: 100%; /* Full width on mobile */
        height: 300px; /* Reduced height for mobile */
        margin: 10px 0; /* Vertical spacing between graphs */
    }

    /* Remove specific widths on mobile for uniformity */
    .graph:nth-child(1),
    .graph:nth-child(2),
    .graph:nth-child(3) {
        width: 100%;
    }
}

/* Success Stories */
.success-stories {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    position: relative;
    background: url('success-background.jpg') no-repeat center center/cover;
}

.success-stories h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #0e0c20;
    text-shadow: 2px 2px 4px rgba(235, 243, 239, 0.459);
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    background: rgba(124, 243, 178, 0.767);
    border-radius: 8px;
    z-index: 2;
    left: 50%; /* Move the element 50% from the left */
    transform: translateX(-50%); /* Shift it back by half its width to center it */
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    z-index: 1;
}

.stories-slider {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.stories {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.story {
    flex: 0 0 33.33%;
    text-align: center;
    padding: 20px;
}

.story img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.story h4 {
    margin: 10px 0;
    color: #ffee00; /* Title color */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    position: relative;
    display: inline-block;
    padding: 2px 6px; /* Padding for background */
    background: #230ee1a1; /* Same background as h2 */
    border-radius: 6px; /* Slightly smaller radius */
    z-index: 2;
}

.story p {
    font-size: 16px;
    color: #000005; /* Text color */
    text-shadow:1px 1px 3px rgb(0 0 0 / 6%);
    position: relative;
    padding: 1px 6px; /* Padding for background */
    background: rgba(255 255 255 / 92%); /* Same background as h2 */
    border-radius: 9px;
    z-index: 2;
}

.story-prev, .story-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 1px;
    cursor: pointer;
    font-size: 18px;
    z-index: 3;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}

.story-prev { left: 10px; }
.story-next { right: 10px; }

/* Our Services */
.our-services {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
}

.our-services h2 {
    text-align: center;
    margin-bottom: 20px;
}

.services-slider {
    display: flex;
    overflow-x: auto;
    padding-bottom: 10px;
}

.service {
    flex: 0 0 auto;
    width: 200px;
    text-align: center;
    margin-right: 20px;
}

.service-link {
    display: block;
    text-decoration: none;
    color: rgb(3, 3, 3);
    transition: transform 0.3s ease, color 0.3s ease;
}

.service-image {
    background: #f0f6ff; /* হালকা ব্যাকগ্রাউন্ড */
    border-radius: 50%; /* রাউন্ড শেপ */
    width: 120px; /* বৃত্তের প্রস্থ */
    height: 120px; /* বৃত্তের উচ্চতা */
    margin: 0 auto; /* কেন্দ্রে রাখা */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* ইমেজ বৃত্তের বাইরে না যায় */
}

.service-link img {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* ইমেজও রাউন্ড */
    transition: transform 0.3s ease;
}

.service-link p {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
}

.service-link:hover {
    color: #007bff;
    transform: scale(1.05);
}

.service-link:hover img {
    transform: scale(1.1);
}

/* Footer */
footer {
    background: #333;
    color: #fff;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.footer-section {
    margin-bottom: 20px;
}

.footer-section h4 {
    margin-bottom: 10px;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 8px;
}

.footer-section ul li a {
    color: #fff;
    text-decoration: none;
    opacity: 0.8;
    position: relative;
    transition: color 0.3s;
}

.footer-section ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: #007bff;
    bottom: -2px;
    left: 0;
    transition: width 0.3s;
}

.footer-section ul li a:hover::after {
    width: 100%;
}

.footer-section ul li a:hover {
    color: #007bff;
    opacity: 1;
}

.social-links {
    display: flex;
    justify-content: center;
}

.social-icon {
    color: #fff;
    margin-right: 10px;
    font-size: 20px;
    animation: bounce 2s infinite;
}

.social-icon:hover {
    animation: spin 1s linear;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

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

.footer-bottom {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    position: relative;
}

.footer-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #444;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);
    z-index: -1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-container {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 0 20px 0 20px;
    }

    .menu-icon {
        display: block;
        font-size: 24px;
        cursor: pointer;
        margin-left: auto;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1001;
    }

    #nav-links {
        display: none;
    }

    #nav-links.mobile-menu {
        display: none;
        flex-direction: column;
        background: #444;
        padding: 10px 0;
        position: absolute;
        top: 100%;
        right: 5px;
        width: 200px;
        text-align: center;
        z-index: 1000;
    }

    #nav-links.mobile-menu.active {
        display: flex;
    }

    #nav-links.mobile-menu li {
        margin: 10px 0;
    }

    .animated-heading {
        margin-top: 0px;
    }

    .animated-heading h2 {
        font-size: 18px;
    }

    .slider-notice {
        flex-direction: column;
    }

    .slider {
        width: 100%;
        height: 200px;
    }

    .slide img {
        height: 200px;
    }

    .notice-board {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
    }

    .boxes {
        flex-direction: column;
        align-items: center;
    }

    .box {
        width: 80%;
    }

    .section {
        flex-direction: column;
    }

    .text-section, .image-section {
        width: 100%;
        padding: 10px;
    }

    .stories {
        flex-direction: row;
    }

    .story {
        flex: 0 0 100%;
    }

    .stories-slider {
        position: relative;
    }

    .story-prev, .story-next {
        display: block;
        opacity: 0.8;
        width: 40px;
        height: 40px;
        line-height: 40px;
    }

    .story-prev { left: 5px; }
    .story-next { right: 5px; }

    .footer-container {
        flex-direction: column;
        text-align: center;
    }
}

/* About Us, Contact Us, Privacy Policy Sections */
.about-us, .contact-us, .privacy-policy {
    max-width: 1200px;
    margin: 100px auto 20px auto; /* হেডারের জন্য উপরে জায়গা */
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.content-wrapper {
    padding: 20px;
}

.content-wrapper h2 {
    font-size: 32px; /* বড় আকার */
    font-weight: bold; /* বোল্ড */
    text-align: center; /* কেন্দ্রীভূত */
    color: #333;
    margin-bottom: 30px;
}

.content-wrapper h3 {
    font-size: 24px; /* বড় আকার */
    font-weight: bold; /* বোল্ড */
    text-align: center; /* কেন্দ্রীভূত */
    color: #007bff;
    margin: 30px 0 15px;
}

.content-wrapper h4 {
    font-size: 20px;
    font-weight: bold; /* বোল্ড */
    text-align: center; /* কেন্দ্রীভূত */
    color: #007bff;
    margin-bottom: 10px;
}

.content-wrapper p {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.8;
}

/* About Us Specific Styling */
.about-us .intro {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.about-us .services-section {
    margin-bottom: 30px;
}

.about-us .service-item {
    margin-bottom: 20px;
}

.about-us .why-choose-us {
    margin-bottom: 30px;
}

.about-us .why-choose-us ul {
    list-style: none;
    padding-left: 0;
}

.about-us .why-choose-us li {
    font-size: 16px;
    margin-bottom: 15px;
    line-height: 1.6;
}

.about-us .why-choose-us li strong {
    color: #333;
}

.about-us .mission-vision {
    margin-bottom: 30px;
}

.about-us .outro {
    font-size: 18px;
    font-style: italic;
    text-align: center;
    margin-top: 20px;
}

.contact-us h2 {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.contact-us .intro-text {
    font-size: 18px;
    color: #666;
    text-align: center; /* পেজের মাঝখানে */
    margin-bottom: 30px;
    line-height: 1.8;
}

.contact-us .contact-details {
    margin-top: 20px;
}

.contact-us .contact-details h3 {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #007bff;
    margin-bottom: 15px;
}

.contact-us .contact-details p {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.6;
}

.contact-us .contact-details a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s;
}

.contact-us .contact-details a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.contact-us .contact-details i {
    margin-right: 10px;
    color: #007bff;
}

/* Terms and Conditions Section */
.terms-and-conditions {
    max-width: 1200px;
    margin: 100px auto 20px auto; /* হেডারের জন্য উপরে জায়গা */
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.terms-and-conditions .content-wrapper {
    padding: 20px;
}

.terms-and-conditions h2 {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.terms-and-conditions .intro {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.terms-and-conditions .services-section {
    margin-bottom: 30px;
}

.terms-and-conditions .service-item {
    margin-bottom: 20px;
}

.terms-and-conditions .service-item h4 {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #007bff;
    margin-bottom: 10px;
}

.terms-and-conditions .terms-section {
    margin-bottom: 30px;
}

.terms-and-conditions .terms-section h3 {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #007bff;
    margin: 30px 0 15px;
}

.terms-and-conditions .terms-section h4 {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #007bff;
    margin: 20px 0 10px;
}

.terms-and-conditions .terms-section p {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.6;
}

.terms-and-conditions .terms-section ul {
    list-style: none;
    padding-left: 20px;
}

.terms-and-conditions .terms-section ul li {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
    position: relative;
    line-height: 1.6;
}

.terms-and-conditions .terms-section ul li:before {
    content: "•";
    color: #007bff;
    position: absolute;
    left: -15px;
}

.terms-and-conditions .terms-section ul li strong {
    color: #333;
}

.terms-and-conditions .outro {
    font-size: 18px;
    font-style: italic;
    text-align: center;
    margin-top: 20px;
}

.terms-and-conditions a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s;
}

.terms-and-conditions a:hover {
    color: #0056b3;
    text-decoration: underline;
}
/* Refund Policy Section */
.refund-policy {
    max-width: 1200px;
    margin: 100px auto 20px auto; /* হেডারের জন্য উপরে জায়গা */
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.refund-policy .content-wrapper {
    padding: 20px;
}

.refund-policy h2 {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.refund-policy .policy-section {
    margin-bottom: 30px;
}

.refund-policy .policy-section h3 {
    font-size: 24px;
    font-weight: bold;
    text-align: left;
    color: #007bff;
    margin: 30px 0 15px;
}

.refund-policy .sub-section h4 {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #007bff;
    margin: 20px 0 10px;
}

.refund-policy p {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.6;
}

.refund-policy .outro {
    font-size: 18px;
    text-align: center;
    margin-top: 20px;
    line-height: 1.8;
}

.refund-policy a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s;
}

.refund-policy a:hover {
    color: #0056b3;
    text-decoration: underline;
}
/* Careers Section */
.careers {
    max-width: 1200px;
    margin: 100px auto 20px auto; /* হেডারের জন্য উপরে জায়গা */
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.careers .content-wrapper {
    padding: 20px;
}

.careers h2 {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.careers .intro-text {
    font-size: 18px;
    color: #666;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.8;
}

.careers .careers-details {
    text-align: center;
}

.careers .careers-details p {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.6;
}

.careers .careers-details a {
    color: #0981f8;
    text-decoration: none;
    transition: color 0.3s;
}

.careers .careers-details a:hover {
    color: rgb(172, 10, 247);
    text-decoration: underline;
}

.careers .careers-details i {
    margin-right: 10px;
    color: #007bff;
}

.careers .apply-link {
    display: inline-block;
    background: #5e193f52;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.3s;
}

.careers .apply-link:hover {
    background: #12b4ff;
    color: #fff;
    text-decoration: none;
}