.cardLR-wrapper {
	  width: calc(100% - 40px); /* 20px margin on left + 20px on right = 40px */
	  margin: 0 20px;            /* top/bottom 0, left/right 20px */
	  padding: 0 20px;
	  box-sizing: border-box;
	  background-color: #141414;
	}
	
.containerLR {
    display: flex;
    width: 100%;
    /* /* height: 120vh; */  /* Remove this fixed height */ */
    padding: 20px;
    gap: 20px;
    box-sizing: border-box;
    overflow: visible; /* or auto, but not hidden if you want scroll */
    align-items: flex-start;
}

   .left-column {
    /* Remove fixed width */
    /* width: 20%; */

    flex-grow: 1;       /* Allow it to grow */
    flex-shrink: 1;     /* Allow it to shrink if needed */
    flex-basis: auto;   /* Base size depends on content size */

    background-color: #ff6600;
    scrollbar-color: #ffffff #ff6600; /* for Firefox */
    color: white;
    padding: 10px 20px;
    box-sizing: border-box;
     max-height: 74vh;   /* Limit height */
    overflow-y: auto;  /* Enable vertical scroll when content overflows */
	margin-top: 30px; /* <-- Top margin added */
	margin-bottom: 20px;
}

        .left-column h3 {
            font-size: 1.5rem;
            margin-bottom: 20px;
        }

        .left-column ul {
            list-style: none;
            padding: 0;
        }

        .left-column ul li {
            padding: 15px;
            cursor: pointer;
            border-bottom: 1px solid #ddd;
            transition: background-color 0.3s ease;
        }

        .left-column ul li:hover {
            background-color: #0056b3;
        }

        /* Right column for the content */
	.right-column {
		width: 80%;
		background-color: #141414;
		scrollbar-color: #ffffff #000; /* for Firefox */
		padding: 20px;
		/* border-radius: 8px; */
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		overflow-y: auto;
		box-sizing: border-box;

		justify-content: center; /* Horizontally center cards */
		align-content: flex-start; /* Align rows to top of scrollable area */
		 max-height: 95vh;   /* Limit height */
          overflow-y: auto;  /* Enable vertical scroll when content overflows */
	}

        /* Card style for each content box */
	   .card-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}

	.cardLR {
		width: calc((100% - 40px) ); /* 3 cards with 2 gaps of 20px */
		background-color: #1c1c1c;
		padding: 0;
		text-align: center;
		height: 490x;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		position: relative;
		box-shadow: 10px 0 20px rgba(255, 102, 0, 0.2);
		/* animation: pulseShadow 2s infinite alternate ease-in-out; */
	}

@keyframes pulseShadow {
	0% {
		box-shadow: 10px 0 20px rgba(0, 255, 255, 0.2);
	}
	100% {
		box-shadow: -10px 0 20px rgba(0, 255, 255, 0.2);
	}
}

		.videoLR {
		  width: 100%;
		  height: 200px;
		  /* border-radius: 8px; */
		  object-fit: cover;
		  display: block;
		}


        .cardLR:hover {
            transform: translateY(-5px);
        }

        .cardLR img {
            width: 100%;
            height: 350px;
            /* object-fit: cover; */
            /* border-radius: 8px; */
        }

        .cardLR h4 {
            margin-top: 15px;
            font-size: 1.2rem;
            color: #8c8c8c;
			padding:5px;
        }

        .cardLR p {
            font-size: 1rem;
            color: #8c8c8c;
			padding:5px;
			
			
        }
		
		.section-intro {
			font-size: 1.3rem;
            color: #8c8c8c;
			padding:5px;
		}

       @media (max-width: 1024px) {
		.containerLR {
			flex-direction: column;
			height: auto;
			overflow: visible;
		}

		.left-column {
			width: 100%;
			margin-bottom: 20px;
			max-height: none;
			overflow: visible;
		}

		.right-column {
			width: 100%;
			height: auto;
			max-height: none;
			overflow-y: visible;
		}

		.cardLR {
			width: 100%;
		}
		 .cardLR img {
            width: 100%;
            height: 150px;
            /* object-fit: cover; */
            /* border-radius: 8px; */
        }
}