body {
    font-family: 'Montserrat', sans-serif;
}
.navbar-custom {
    background-color: rgb(241, 241, 241); /* Saydam arkaplan */
    color: rgba(0, 0, 0, 0.842); /* Beyaz yazı rengi */
    position: absolute; /* Sabit pozisyon */
    width: 100%; /* Tam genişlik */
    z-index: 10; /* Yüksek z-index değeri */
    top: 0; /* Üstten sıfır pozisyon */
}


        .video-bg {
            position: relative;
            overflow: hidden;
            height: 100vh;
        }
        .logo {
    height: 70px; /* Logonun yüksekliğini belirleyin */
    width: auto;  /* Genişlik otomatik olarak yüksekliğe göre ayarlanacak */
}
.flag-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}
        .video-bg video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .video-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
        }
        .icon-section {
            background-color: #f9fafb;
            padding: 4rem 0;
        }
        
        .activity i {
            font-size: 5rem; /* Icon size */
            color: #03859e /* Gray color for the icons */
        }
        .bg-blue-500 {
            --tw-bg-opacity: 1;
            background-color: #03859e !important;
        }

        .icon-section {
            background-size: cover;
            background-position: center;
        }
        
        .bg-cover {
            background-size: cover;
        }
        
        .bg-center {
            background-position: center;
        }
        
        .bg-opacity-75 {
            background-color: rgba(255, 255, 255, 0.637); /* Beyaz arka plan rengi ve %75 opaklık */
           
        }
        
        .p-8 {
            padding: 2rem;
        }
        
        .rounded-lg {
            border-radius: 0.5rem;
        }
        .underline {
            width: 250px; /* Çizginin genişliğini ayarlayın */
            height: 5px; /* Çizginin yüksekliğini ayarlayın */
            background-color: #1D3565; /* Çizginin rengi */
            margin-bottom: 20px; /* Çizgi ile altındaki içerik arasındaki boşluk */
        }
        button {
            cursor: pointer;
        }
        
        .modal {
            display: none; /* Hidden by default */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background-color: #fefefe;
            padding: 20px;
            border: 1px solid #00000000;
            width: 100%; /* Full width */
            max-width: 600px; /* Limit width to 600px */
            position: relative;
            border-radius: 8px;
            box-sizing: border-box;
            margin: 0 10px; /* Small margin for some spacing */
        }
        
        .close {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            position: absolute;
            top: 10px;
            right: 20px;
            cursor: pointer;
        }
        
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        
        label {
            display: block;
            margin-top: 10px;
        }
        
        input, textarea {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        
        textarea {
            height: 100px;
            resize: vertical;
        }
        
        .modal-title {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        

        .counter {
            font-size: 3rem;
            font-weight: bold;
        }
        .video-bg {
            position: relative;
            overflow: hidden;
        }
        .video-bg video {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
        .video-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.5); /* Optional: Add semi-transparent background for better readability */
        }
        .video-content div {
            text-align: center;
            color: white;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0);
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            position: relative;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }