/*** Spinner Start ***/

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .8s ease-out, visibility 0s linear .0s;
    visibility: visible;
    opacity: 1;
}

.bg-red{ background-color:#c90202;
color: fff;

}

.bg-green{ background-color:#64ca6d;


}
.bg-top{
	
min-height: 400px;
	padding-top: 100px;
	padding-bottom: 100px;
	
}
.top-dis{
padding-top: 90px;
padding-bottom: 90px;	
	
}
.activity {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 25px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

.registration-form input{
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-sizing: border-box;
        }
.wow,
.animated {
    animation-duration: 2s !important;
}

/*** Spinner End ***/

.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    z-index: 99;
}

.back-to-top:hover {
    background: var(--bs-dark);
    color: var(--bs-primary);
}

h1, h2, h3, .h1, .h2, .h3 {
    font-weight: 700 !important;
    font-family: 'Open', sans-serif !important;
}

h4, h5, h6, .h4, .h5, .h6 {
    font-weight: 600 !important;
    font-family: 'Open', sans-serif !important;
}

.py-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}


/*** Button Start ***/

.btn {
    font-weight: 600;
    transition: .5s;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-md-square {
    width: 46px;
    height: 46px;
}

.btn-lg-square {
    width: 58px;
    height: 58px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.btn.btn-primary:hover {
    color: var(--bs-primary) !important;
    background: var(--bs-dark) !important;
    border-color: var(--bs-dark) !important;
}

.btn.btn-dark:hover {
    color: var(--bs-dark) !important;
    background: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
/*** Button End ***/


/*** Topbar Start ***/
.topbar .topbar-inner {
    height: 45px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, .5);
}

.topbar a,
.topbar a i {
    transition: 0.5s;
}

.topbar a:hover,
.topbar a i:hover {
    color: var(--bs-primary) !important;
}
/*** Topbar End ***/


/*** Navbar Start ***/
.fixed-top {
    transition: .5s;
}


.navbar .navbar-nav .nav-link {
    padding: 12px;
    color: var(--bs-dark);
    font-size: 17px;
    font-weight: 600;
    transition: .5s;
}
.btn-primary {
    color: rgb(24, 24, 24); /* High contrast text */
    background: linear-gradient(to right, #28a745, #91faa3); /* Left-to-right green gradient */
    border: none; /* Removes default border */
    padding: 12px 24px; /* Comfortable padding */
    border-radius: 8px; /* Smooth rounded corners */
    font-weight: bold; /* Makes text stand out */
    cursor: pointer; /* Pointer effect on hover */
    transition: all 0.3s ease-in-out; /* Smooth hover effect */
    
    /* Embossed Effect */
    box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.4), 
                inset -2px -2px 5px rgba(0, 0, 0, 0.2),
                2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* Hover Effect */
.btn-primary:hover {
    background: linear-gradient(to right, #218838, #8fdc63); /* Slightly darker gradient */
    box-shadow: inset 3px 3px 6px rgba(255, 255, 255, 0.5), 
                inset -3px -3px 6px rgba(0, 0, 0, 0.3),
                3px 3px 8px rgba(0, 0, 0, 0.3); /* Enhanced embossing */
    transform: scale(1.02); /* Slight lift effect */
}

.text-primary {
    color: #0f3909 !important;
}

.text-white-top {
    color: #fff !important;
}

.nav-link{
	color: #000;
	
}


a {
    color: #64ca6d;
    text-decoration: none;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active,
.fixed-top.bg-white .navbar .navbar-nav .nav-link:hover,
.fixed-top.bg-white .navbar .navbar-nav .nav-link.active {
    color: #43a74c;
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    vertical-align: middle;
    margin-left: 8px;
}

@media (min-width: 992px) {
    .navbar-collapse {
        background: transparent !important;
    }

    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        border: 0;
        transition: .5s;
        opacity: 0;
    }

    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0deg);
        visibility: visible;
        background: var(--bs-light) !important;
        transition: .5s;
        opacity: 1;
    }
}

.navbar-toggler {
    background: var(--bs-secondary);
    color: var(--bs-light) !important;
    padding: 10px 20px;
    border: 2px solid var(--bs-primary) !important;
    box-shadow: none !important;
}
/*** Navbar End ***/


/*** Hero Header ***/
.hero-header {
    margin-bottom: 3rem;
    padding-top: 18rem;
    padding-bottom: 3rem;
background-image: url("..//img/hero-1.jpg");
    
}

.hero-header-inner {
    padding-top: 10rem;
	padding-left: 30rem;
	padding-rigt: 30rem;
	padding-bottom: 10rem;

}

@media (max-width: 992px) {
    .hero-header {
        padding-top: 12rem;
    }
}

.hero-header .breadcrumb-item {
    font-size: 18px;
}
/*** Hero Header ***/


/*** About Start ***/
.about a.btn.btn-light:hover {
    background: var(--bs-dark) !important;
    color: var(--bs-primary) !important;
    border: 0;
}
/*** About End ***/


/*** Activities Start ***/
.activities .activities-item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 45px rgba(12, 18, 20, .08);
    transition: 0.5s;
}

.activities .activities-item:hover {
    background: var(--bs-primary) !important;
    color: var(--bs-dark) !important;
}

.activities .activities-item:hover a {
    background: var(--bs-light) !important;
    color: var(--bs-dark) !important;
}

.activities .activities-item:hover a:hover {
    background: var(--bs-dark) !important;
    color: var(--bs-primary) !important;
}
/*** Activities End ***/


/*** Events Start ***/
.event-item img {
    transition: 0.5s;
}

.event .event-item a {
    transition: 0.5s;
}

.event-item:hover img {
    transition: 0.5s;
    transform: scale(1.2)
}

.event-item a:hover {
    background: var(--bs-dark);
    color: var(--bs-primary);
    opacity: 0.5s;
}
/*** Events End ***/


/*** Sermon Start ***/
.sermon .sermon-item {
    height: 100%;
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
}

.sermon-item img {
    transition: 0.5s;
}

.sermon-item:hover img {
    transform: scale(1.2)
}

.sermon-item .sermon-meta a,
.sermon-item .sermon-meta a i {
    transition: 0.5s;
}

.sermon-item .sermon-meta a:hover,
.sermon-item .sermon-meta a i:hover {
    color: var(--bs-primary) !important;
}
/*** Sermon End ***/


/*** Blog Start ***/
.blog-item {
    height: 100%;
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
}

.blog-item img {
    transition: 0.5s;
}

.blog-item:hover img {
    transform: scale(1.2)
}

.blog-item .blog-meta a,
.blog-item .blog-meta a i {
    transition: 0.5s;
}

.blog-item .blog-meta a:hover,
.blog-item .blog-meta a i:hover {
    color: var(--bs-primary) !important;
}
/*** Blog End ***/


/*** Team Start ***/
.team .team-img {
    height: 100%;
    padding: 25px;
    background: var(--bs-white);
    overflow: hidden;
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
}

.team .team-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team .team-item {
    position: relative;
    overflow: hidden;
}

.team .team-item img {
    transition: 0.5s;
}

.team .team-item:hover img {
    transform: scale(1.2);
}

.team .team-item .team-content {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   padding: 15px;
   transform: translateX(-50%, -50%);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: 0.5s;
}

.team .team-item:hover .team-content {
    opacity: 1;
    background: rgba(241, 193, 82, .7);
}
/*** Team End ***/


/*** testimonial Start ***/
.testimonial-item {
    background: var(--bs-light);
    padding: 40px;
}

.testimonial-carousel .owl-item img {
    width: 100px;
    height: 100px;
}

.testimonial-carousel {
    position: relative;
    padding-left: 60px;
    padding-right: 60px;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 60px;
    height: 40px;
    background: var(--bs-primary);
    color: var(--bs-dark);
    font-size: 22px;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover {
    background: var(--bs-dark) !important;
    color: var(--bs-primary) !important;
}

.testimonial-carousel .owl-nav .owl-next {
    left: auto;
    right: 0px;
}

.testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--bs-dark) !important;
    color: var(--bs-primary) !important;
}
/*** testimonial End ***/


/*** Footer Start ***/
.footer {
    margin-top: 0.5rem;
    background: linear-gradient(to bottom, #28a745, #d4f8da, #28a745);
background-size: 200% 200%; /* Makes the animation smooth */
            
            
}

.footer .footer-item p {
    font-size: 16px;
    line-height: 35px;
}

.footer .border-top,
.footer .border-bottom {
    border-color: rgba(255, 255, 255, .08) !important;
}

.footer button {
    border: 0;
    transition: 0.5s;
}

.footer button:hover {
    background: var(--bs-dark);
    color: var(--bs-primary);
}

.footer-item a.btn.btn-light:hover {
    background: var(--bs-primary);
    color: var(--bs-dark) !important;
    border: var(--bs-primary);
}

.footer-item a,
.footer-item a i {
    transition: 0.5s;
}

.footer-item a:hover,
.footer-item a i:hover {
    color: var(--bs-primary) !important;
}
/*** Footer End ***/
.navbar {
    position: relative;
    display: flex
;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: .1rem;
    /* padding-bottom: .5rem; */
}
.date {
            color: black;
            font-size: 20px;
        }
.bg-top {
    background: linear-gradient(to right, #000000, #0f9b0f);
}
.bg-img {
    background-image: url("../img/header01.jpg");
    background-size:  cover;        /* Ensures the image covers the entire container */
    background-repeat: no-repeat;  /* Prevents the image from repeating */
    background-position: center;   /* Centers the image */
                   /* Sets the opacity of the entire container */
	color: #fff;
}


.containertop {
    background: #fff; /* Light green color */
    animation: none; /* Remove the animation since it's not needed */
}
.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.15rem);
    padding-left: var(--bs-gutter-x, 0.15rem);
    margin-right: auto;
    margin-left: auto;

}


.date-button {
            display: inline-block;
            padding: 5px 5px;
            background-color: #28a745; /* Green background */
            color: white; /* White text */
            border: none;
            border-radius: 5px; /* Rounded shape */
            font-size: 13px;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            margin: 10px 0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease;
        }
        .date-button:hover {
            background-color: #218838; /* Darker green on hover */
        }

        .marqueetop {
            color: #6d0707;
            font-size: 18px;
            font-weight: bold;
        }

        #popup {
            display: none; /* Hidden by default */
            position: fixed;
            bottom: 20px; /* Position from the bottom */
            right: 20px; /* Position from the right */
            z-index: 1000;
            width: 350px;
            padding: 20px;
            background: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            text-align: center;
            border-radius: 10px;
        }

        /* Close button */
        #popup button {
            margin-top: 10px;
            padding: 5px 10px;
            background: #218838;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
        }

        #popup button:hover {
            background: #20bd42;
        }
        .sidebar {
            min-height: 70vh;
            background: linear-gradient(to bottom, #28a745, #91faa3); /* Top-to-bottom green gradient */
            color: #f5f5f5; 
            padding: 20px;
            border-radius: 15px; /* More rounded corners for a smoother look */
            margin-top: 18px;
            position: relative; /* For pseudo-elements */
        
            /* 3D embossed effect */
            box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.4), 
                        inset -3px -3px 6px rgba(0, 0, 0, 0.3), 
                        6px 6px 12px rgba(0, 0, 0, 0.3);
        }
        
        /* Adding a glowing hover effect */
     
        
        /* Optional: Adding a sleek border for more depth */
        .sidebar::before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border-radius: 15px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            pointer-events: none;
        }
        
          .sidebar a {
            color: #f5f5f5; 
            text-decoration: none;
            display: block;
            padding: 10px 20px;
          }
          .sidebar a:hover {
            background-color: #218838;
            text-decoration: none;
          }
          .content {
            padding: 20px;
          }
          @keyframes gradientAnimation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .profile-header {
            background: linear-gradient(to right, #28a745, #91faa3, #28a745);
            background-size: 200% 200%; /* Makes the animation smooth */
            animation: gradientAnimation 5s infinite linear; /* 5s looping animation */
            
            color: white;
            padding: 15px 20px;
            border-radius: 10px; /* Smooth rounded corners */
            text-align: left; /* Align heading to the left */
            font-weight: bold; /* Make the heading stand out */
            position: relative; /* Required for pseudo-elements */
        
            /* Embossed 3D effect */
            box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.4), 
                        inset -3px -3px 6px rgba(0, 0, 0, 0.3), 
                        4px 4px 10px rgba(0, 0, 0, 0.2);
        
            transition: transform 0.3s ease-in-out;
        }
        
        
          .profile-header h3 {
            margin: 0;
          }
          .form-control {
            display: block;
            width: 100%;
            padding: .375rem .75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #737373;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-radius: 0px;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            background-color: #d3d3d3;
            border-radius: 10px;
          }
          ul {
            list-style: none;
            padding: 0;
            width: 100%;
        }
        
        li {
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            padding: 10px;
            display: flex;
            align-items: center;
            background-color: #90e18e;
            border-bottom: 1px solid #ddd;
            color: #000;
            transition: background 0.3s ease;
            width: 33%;
            border-radius: 10px 10px 10px 10px;
            margin-bottom: 5px;
        }
        @media (max-width: 768px) {
            li {
                width: 100%;
            }
        }
        li:hover {
            background-color: #e3e3e3;
        }
        
        .triangle {
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid black;
            margin-right: 10px;
            transition: transform 0.3s ease;
        }

        .expanded .triangle {
            transform: rotate(180deg);
        }

        .content-home {
            display: none;
            padding: 10px 20px;
            background-color: #ffffff;
            border-radius: 10px;
            border-left: 4px solid #267124;
            transition: background 0.3s ease;
        }

        .loginregistration-form {
            max-width: 600px;
            margin: auto;
            padding: 20px;
            background: #ffffff;
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            
        }
        .loginbtn-primary {
            background: linear-gradient(135deg, #6a11cb, #2575fc);
            border: none;
        }
        .loginbtn-primary:hover {
            background: linear-gradient(135deg, #2575fc, #6a11cb);
        }
        .imglogin { 
            border-radius: 10px; /* Rounds the corners */
            border: 2px solid lightgreen; /* Light green border */
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), 
                        -5px -5px 10px rgba(255, 255, 255, 0.5); /* Embossed effect */
        }

        .registration-formdf {
            max-width: 600px;
            margin: auto;
            padding: 20px;
            background: #ffffff;
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        }
        
        .registration-formdf h2 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }
        
        .registration-formdf h3 {
            text-align: center;
            font-size: 14px;
            margin-bottom: 15px;
        }
        
        .registration-formdf h3 a {
            text-decoration: none;
            font-weight: bold;
            color: #000000;
        }
        
        .registration-formdf label {
            font-weight: bold;
            display: block;
            margin-top: 10px;
        }
        
        .registration-formdf .form-control {
            width: 100%;
            padding: 10px;
            border-radius: 10px;
            border: 1px solid #ddd;
            transition: all 0.3s ease-in-out;
        }
        
        .registration-form .form-control:focus {
            border-color: #010101;
            box-shadow: 0px 0px 5px rgba(10, 10, 10, 0.5);
            outline: none;
        }
        
        .registration-form button {
            width: 100%;
            background: linear-gradient(45deg, #007bff, #0056b3);
            border: none;
            padding: 10px;
            border-radius: 5px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            margin-top: 15px;
            transition: 0.3s;
        }
        
        .registration-form button:hover {
            background: linear-gradient(45deg, #0056b3, #004494);
        }
        
        .invalid-feedback {
            font-size: 12px;
            color: red;
            display: none;
        }
        
        .alert-danger {
            text-align: center;
            font-size: 14px;
        }
        
        @media (max-width: 480px) {
            .registration-form {
                width: 90%;
            }
           
        }
        p{
  
     padding-left: 20px;
     padding-right: 20px;

        }
        .shorts-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
           
            margin: auto;
        }

        /* Individual Video Box */
        .video-card {
            background: #fff;
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 320px;
            transition: transform 0.3s ease;
        }

        .video-card:hover {
            transform: scale(1.05);
        }

        iframe {
            width: 300px;
            height: 500px;
            border-radius: 10px;
        }

        .video-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-top: 10px;
        }

        /* Responsive Styling */
        @media (max-width: 768px) {
            .shorts-container {
                flex-direction: column;
                align-items: center;
            }
            .video-card {
                width: 100%;
            }
            iframe {
                width: 100%;
                height: auto;
            }
        }

        .profile-box-grid {
            background-color: #f8f9fa;
            border: 2px solid #87f099;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .profile-imggrid {
            border: 3px solid #b1b4b2;
            border-radius: 10px;
            width: 150px;
            height: 150px;
            object-fit: cover;
        }
        .info-tablegrid td {
            border: none;
            padding: 5px 5px;
            font-size: 16px;
            vertical-align: left;
        }
        .info-tablegrid i {
            color: #28a745;
          
        }
        .status-registered {
            color: #28a745;
            font-weight: bold;
        }
        .status-pending {
            color: #dc3545;
            font-weight: bold;
        }
        .bg-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }
        
        .container-fluid.vteam {
            position: relative;
            overflow: hidden;
        }
        
        .contentvideo {
            position: relative;
            z-index: 1;
        }

        .mission-text {
            font-size: 25px;
            color: #333;
            line-height: 1.6;
            text-align: left;
        }

       

        /* Button that triggers the dropdown */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        /* Button that triggers the dropdown */
        .dropdown-btn {
            background-color: #28a745;
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            border-radius: 4px;
            display: flex;
            align-items: center;
        }

        .dropdown-btn i {
            margin-right: 8px;
        }

        /* The dropdown content */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #ffffff;
            min-width: 160px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            z-index: 1;
            border-radius: 4px;
            right: 0;
        }

        /* Links inside the dropdown */
        .dropdown-content a {
            color: #333;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            border-bottom: 1px solid #ddd;
            border-radius: 4px;
            transition: background-color 0.2s ease;
        }

        .dropdown-content a:hover {
            background-color: #28a745;
            color: white;
        }

        /* Show the dropdown when hovering over the button or dropdown content */
        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown:hover .dropdown-btn {
            background-color: #28a745; /* Change the button color on hover */
        }

        /* Styling for the logout button */
        .dropdown-content .logout {
            border-bottom: none;
        }

        .dropdown-content .logout:hover {
            background-color: #dc3545;
        }
        @media (max-width: 500px) {
            .navbar-toggler {
                font-size: 1rem;
            }
        
            .navbar-brand img {
                 /* Adjusts logo size for smaller screens */
            }
        
            .navbar-nav .nav-item {
                font-size: 14px;
            }
            .date {
                color: black;
                font-size: 12px;
            }

            .date-button {
                display: inline-block;
                padding: 2px 2px;
                background-color: #28a745; /* Green background */
                color: white; /* White text */
                border: none;
                border-radius: 5px; /* Rounded shape */
                font-size: 10px;
                font-weight: bold;
                text-align: center;
                text-decoration: none;
                margin: 2px 0;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                transition: background-color 0.3s ease;
            }
            body {
                margin: 0;
                font-family: "Open", sans-serif;
                font-size: 0.8rem;
                font-weight: 400;
                line-height: 1.5;
                color: #737373;
                background-color: #fff;
                -webkit-text-size-adjust: 100%;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }

            h1, h2, h3, .h1, .h2, .h3 {
                font-weight: 500 !important;
                font-family: 'Open', sans-serif !important;
            }
            .py-6 {
                padding-top: 3rem;
                padding-bottom: 3rem;
            }
            .container-fluid{
                padding-left: 5px;
                padding-right: 5px;

            }
            }
        
            .detail-button {
                position: relative;
                display: inline-block;
                background: #4CAF50;
                color: white;
                padding: 8px 16px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                margin-top: 10px;
              }
             
              .detail-tooltip {
                visibility: hidden;
                opacity: 0;
                width: 200px;
                background-color: #333;
                color: #fff;
                text-align: left;
                border-radius: 6px;
                padding: 10px;
                position: absolute;
                z-index: 1;
                bottom: 125%;
                left: 50%;
                transform: translateX(-50%);
                transition: opacity 0.3s;
              }
             
              .detail-button:hover .detail-tooltip {
                visibility: visible;
                opacity: 1;
              }
             
              .detail-tooltip::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: #333 transparent transparent transparent;
              }
             
              .detail-tooltip table {
                width: 100%;
                border-collapse: collapse;
              }
             
              .detail-tooltip td {
                padding: 5px 0;
                border-bottom: 1px solid #555;
              }
             
              .detail-tooltip tr:last-child td {
                border-bottom: none;
              }