ul {
    	    list-style: disc;
			padding-left: 20px;
			/* font-weight: bold; */
			font-size: 20px;
			font-family: 'Roboto', sans-serif;
		}

		.slide h2{ 
             color: whitesmoke;
        }
		.slide img{
			width: 100%;
			height: auto;
		}
        .slide.active { 
            opacity: 1; 
            pointer-events: auto; 
        }
		@media (max-width: 767px) {
		ul {
    	
		font-size: 15px;
		}	
		
	}
	
		@media (min-width: 768px) and (max-width: 1024px) {
		ul {
    	
		font-size: 20px;
		}	
		
	}
        video { width: 100%; height: 100%; object-fit: cover; }
        .overlay { 
            position: absolute; 
            bottom: 20%; 
            left: 10%; 
            color: white; 
            text-align: left; 
        }
        .overlay h2 { 
            font-size: 32px; 
            margin-bottom: 10px;
        }
		.overlay a.button::after {
            content: '\25B6'; /* Play icon */
            margin-left: 10px;
        }
        .overlay a.button {
            display: inline-block;
			background: rgba(0, 0, 0, 0.2); 
           
            color: white;
            border-radius: 20px;
            padding: 12px 24px;
            font-size: 20px;
            
            transition: transform 0.3s, background-color 0.3s;
        }
        .overlay a.button:hover {
            transform: scale(1.2);
            background-color: #FFFFFF;
			color:black;
        }
        .controls { 
            position: absolute; 
            bottom: 10%; 
            left: 10%; 
            display: flex; 
            align-items: center;
        }
        .controls button { 
            background: rgba(0, 0, 0, 0.2); 
            color: white; 
            border: none; 
            padding: 10px; 
            cursor: pointer; 
            font-size: 20px;
            transition: background 0.3s, transform 0.3s;
        }
        .controls button:hover {
            background: rgba(255, 255, 255, 0.7);
            color: black;
            transform: scale(1.2);
        }
        .dots {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 15px;
        }
        .dot {
            width: 10px;
            height: 10px;
            margin: 0 5px;
            background: white;
            border-radius: 50%;
            cursor: pointer;
            transition: background 0.3s;
        }
        .dot.active {
            background: yellow;
        }
        .about-section {
            display: flex;
            align-items: center;
            padding: 50px 10%;
            background-color: #f4f4f4;
        }
        .about-image {
            flex: 1;
            max-width: 50%;
        }
        .about-image img {
            width: 100%;
            border-radius: 10px;
        }
        .about-content {
            flex: 1;
            padding-left: 50px;
        }
        .about-content h2 {
            font-size: 36px;
            margin-bottom: 20px;
        }
        .about-content p {
            font-size: 18px;
            line-height: 1.6;
        }
		@media only screen and (max-width: 900px) {
			.modal{width: 100%}
			.modal iframe {
				width: 100%;
				height: 315px;
			}
		}
		
		.modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.2);
            padding: 10px;            
            z-index: 1000;
            
        }
		@media only screen and (min-width: 900px) {
        .modal iframe {
            width: 1280px;
			height: 720px;
        }
			
		}
        .modal .close {
            position: absolute;
            top: -50px;
            right: 10px;
            cursor: pointer;
            font-size: 50px;
        }
		.three-column-section {
            display: flex;
            
            padding: 50px;
            background-color: #FFFFFF;
        }
        .three-column-section {
            display: flex;
            flex-wrap: wrap;
			
			padding: 50px 300px 50px 300px;
			flex-direction: row;
			
            
        }
		.three-column-section p {
				font-size: 20px;
				text-align: justify;
				
			}
		.three-column-section ol {
				font-size: 20px;
				font-weight: bold;
				padding-left: 30px;
				
				
			}
		.three-column-section ol p{
				
				font-weight: normal;
				
				
				
			}
		.three-column-section h3{
			padding: 5px 5px 5px 0px;
		}
		@media (max-width: 767px) {
           .three-column-section p {
				font-size: 12px;
				
			}
			.three-column-section {
            display: flex;
            flex-wrap: wrap;
			
			padding: 10px 20px 10px 20px;
			flex-direction: row;
        	}
			.three-column-section h1{
				font-size: 25px;
			}
			.three-column-section h3{
				font-size: 20px;
			}
			.three-column-section ol {
				font-size: 15px;
				font-weight: bold;
				padding-left: 20px;
				
				
			}
			
        }
		
        @media (min-width: 768px) and (max-width: 1024px) {
		
			.three-column-section {
				display: flex;
				flex-wrap: wrap;

				padding: 50px 50px 50px 50px;
				flex-direction: row;


			}
		}
		@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
			.three-column-section {
				display: flex;
				flex-wrap: wrap;

				padding: 50px 50px 50px 50px;
				flex-direction: row;


			}
		}
			.column {
            width: 25%;
            padding: 20px;
            background: white;
            border-radius: 10px;
           
            text-align: center;
            margin-bottom: 20px;
        }
        @media (max-width: 768px) {
            .column {
                width: 100%;
            }
        }
        .column h3 {
            font-size: 24px;
            margin-bottom: 10px;
        }
        .column p {
            font-size: 16px;
            margin-bottom: 15px;
        }
        .column a {
            display: inline-block;
            background-color: darkgray;
            color: #333333;
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
            transition: background 0.3s;
        }
        .column a:hover {
            background-color: white;
        }
		
		
		.news-section {
            text-align: right;
            padding: 50px;
        }
        .news-title {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .news-carousel {
            position: relative;
            display: flex;
            overflow: hidden;
            width: 100%;
        }
        .news-item {
            min-width: 100%;
            transition: transform 0.5s ease-in-out;
            position: relative;
        }
        .news-item img {
            width: 100%;
            border-radius: 10px;
        }
        .news-item h4 {
            position: absolute;
            bottom: 10%;
            left: 10%;
            font-size: 20px;
            color: white;
        }
        .news-item a {
            position: absolute;
            bottom: 5%;
            left: 10%;
            color: yellow;
            text-decoration: none;
            font-weight: bold;
        }
		@media only screen and (max-width: 900px) {
			.news-item h4 {
            position: absolute;
            bottom: 10%;
            left: 10%;
            font-size: 20px;
            color: white;
        	}
        	.news-item a {
            position: absolute;
            bottom: 5%;
            left: 10%;
            color: yellow;
            text-decoration: none;
            font-weight: bold;
        	}
		}
        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 15px;
            cursor: pointer;
            font-size: 24px;
            z-index: 3;
        }
        .prev-btn { left: 5%; }
        .next-btn { right: 5%; }
		
		.preloader {
            position: fixed;
            width: 100%;
            height: 100%;
            background: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 0.5s ease;
            z-index: 9999;
        }
        .loader-container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .logo {
            width: 150px;
            height: auto;
            opacity: 0;
            transform: scale(0.8);
            animation: fadeInScale 1.5s ease-in-out forwards;
        }
        .circle {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 4px solid #262626;
            border-top: 4px solid transparent;
            border-radius: 50%;
            animation: spin 1.5s linear infinite;
        }
        @keyframes fadeInScale {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        .fade-out {
            animation: fadeOut 0.5s ease forwards;
        }
        @keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                visibility: hidden;
            }
        }
        .content {
            display: none;
            
            
        }
		
		.containercard {
            max-width: 1200px;
            margin: auto;
			padding-bottom: 50px;
   			 padding-top: 50px;
        }
        h1 {
            color: #333;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(150px, 1fr));
            gap: 10px;
            margin-top: 20px;
        }
        .card {
            position: relative;
            overflow: hidden;
            
            transition: transform 0.3s ease-in-out;
        }
        .card:hover {
            transform: scale(1.05);
        }
        .card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            display: block;
        }
        .card .overlayy {
            position: absolute;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            text-align: left;
        }
        .card a {
            display: block;
            text-decoration: none;
            color: inherit;
        }
        @media (max-width: 600px) {
			.containercard {
            
            margin: 20px;
			padding-bottom: 25px;
   			padding-top: 25px;
        	}
            .grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .card img {
                height: 120px;
            }
			
        }
		
		.slider-containerx {
			overflow-x: auto;
			overflow-y: hidden;
			white-space: nowrap;
            display: flex;
            gap: 10px;     
            cursor: grab;
            user-select: none;
            -ms-overflow-style: none;
            scroll-behavior: smooth;
            padding: 20px 0;
			justify-content: center;
        }
		.slide-articlex { 
			/*width: 100%;*/
			/*max-width: 500px;*/
			max-height: 300px;	
			object-fit: contain;
			display: inline-block;
			transition: transform 0.2s ease-out;
		}
		@media (max-width: 600px) {
            .slide-articlex { max-width: 300px; }
        }
		.slider-containera {
			overflow-x: auto;
			overflow-y: hidden;
			white-space: nowrap;
            display: flex;
            gap: 10px;     
            cursor: grab;
            user-select: none;
            -ms-overflow-style: none;
            scroll-behavior: smooth;
            padding: 20px 0;
        }
        .slider-containera::-webkit-scrollbar {
            /*display: none;*/
        }
        .slide-article { 
			/*width: 100%;*/
			/*max-width: 500px;*/
			max-height: 300px;	
			object-fit: contain;
			display: inline-block;
			transition: transform 0.2s ease-out;
		}
        footer { margin-top: 20px; padding: 10px; background: #333; color: white; }
        
        @media (max-width: 600px) {
            .slide-article { max-width: 300px; }
        }
		.back-home {
			text-align: center;
		}
		.back-home a {
			
            display: inline-block;
            padding: 20px 30px;
            background: #007bff;
            color: white;
            font-size: 18px;
            text-decoration: none;
            border-radius: 8px;
            transition: background 0.3s;
			
        }
        .back-home a:hover {
            background: #0056b3;
        }
		
		.footer-area {
			text-align: left;
		}
		.footer-area p{
			font-weight: normal;
		}
		.footer-area a{
			font-weight: normal;
		}

.container ul{
	list-style: none;}