/* Color Palette */
        :root {
            --primary-red: #E63946;   /* Vivid Red */
            --soft-white: #F1FAEE;     /* Bianca */
            --ash: #A8DADC;            /* Powder Blue */
            --black: #2B2D42;          /* Gunmetal */
        }

        body {
            direction: rtl;
            font-family: 'Arial', sans-serif;
            background-color: var(--soft-white); /* Background Color */
        }

        /* Video card */
        .video-card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            margin-bottom: 20px;
        }

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

        .video {
            width: 100%;
            border-radius: 10px;
        }

        /* Modal */
        
        .modal-content {
            border: none;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
        }

        .modal-header {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background-color: #E63946; /* Adjust color as needed */
            color: #F1FAEE; /* Adjust text color as needed */
        }

        .modal-title {
            font-size: 1.5rem;
        }

        .modal-body {
            font-size: 1rem;
            line-height: 1.6;
        }

        .btn-primary {
            background-color: #E63946; /* Adjust color as needed */
            border-color: #E63946; /* Adjust border color as needed */
        }

        .btn-primary:hover {
            background-color: #A8DADC; /* Adjust hover color as needed */
            border-color: #A8DADC; /* Adjust hover border color as needed */
        }

        .text-muted {
            font-size: 0.8rem;
        }

        .navbar {
            background-color: var(--primary-red); /* Navbar Background Color */
            color: var(--soft-white); /* Navbar Text Color */
        }

        .navbar-brand {
            padding-right: 20px; /* Adjust the padding as needed */
            color: var(--soft-white); /* Navbar Brand Text Color */
        }

        .navbar-toggler {
            border-color: var(--soft-white); /* Navbar Toggle Button Border Color */
        }

        .navbar-nav .nav-link {
            color: var(--soft-white); /* Navbar Link Text Color */
        }

        .footer {
            bottom: 0;
            width: 100%;
            background-color: var(--primary-red); /* Footer Background Color */
            color: var(--soft-white); /* Footer Text Color */
            padding: 10px 0;
            text-align: center;
        }

        .custombtnm {
            margin-bottom: 1rem;
            background-color: var(--primary-red); /* Button Background Color */
            border-color: var(--primary-red); /* Button Border Color */
            color: var(--soft-white); /* Button Text Color */
        }

        /* Slideshow height */
        #carouselExampleControls {
            height: 500px;
        }

        /* Responsive Slideshow */
        @media (max-width: 768px) {
            #carouselExampleControls {
                height: 300px; /* Adjust height for smaller screens */
            }
        }

        @media (max-width: 576px) {
            #carouselExampleControls {
                height: 200px; /* Adjust height for extra small screens */
            }
        }