.centered-content {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .custom-select {
            width: auto; /* Make dropdown smaller and adaptable */            
        }


        @font-face {
            font-family: 'bebasFont';
            src: url('/static/fonts/BebasNeueBold-7B9LE.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        .text-bebas {
            font-family:  'bebasFont';
            font-size: 6.rem;
        }

        .main-container{
            position: relative;
            color: white;
        }
        
        .car-cont{
            margin-top:8rem;
        }
        
        
        
        .header-icons {
            position: absolute;
            margin-top: 0;
            margin-bottom: 2rem;
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
        
        
        .logo {
            height: 30.0vw;
            filter: invert(1);
        }
        
        .question-mark {
            font-size: 6.0vw;
            cursor: pointer;
        }
        
        .text-white {
            color: white;
        }
        
        .main-text {
            font-size: 6.0vw;
        }
 
        h1 {           
            font-size: 1.15rem; /* Adjust the size to make it more comparable to other elements */
        }

        .location-selector-row {
            align-items: center; /* This ensures the label and combobox are aligned */
        }

        .container_for_button {
            font-family: 'buttonsFont';
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto ;
            margin-top: 1rem ;
        }

        .button-square {
            border: none;
            color: black;
            border-radius: 0;            
            display: flex;
            align-items: center;
            justify-content: center;            
            transition: background-color 0.3s;
        }

        #selectFrontsideBtn {
            background-color: rgba(255, 255, 255, 0.7);
            font-size: 2rem;
            width:  90%; 
            height: 15vw; 
            padding: 0;
            padding-left: 2.5vw;
            padding-right: 2.5vw;
            margin: auto;
        }

        #selectFrontsideBtn:hover {
            background-color: rgba(255, 255, 255, 1.0);
        }


   
.carousel-container {
    background-color: white;
    padding: 1rem;
    border-radius: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 90%;
    height: auto;
    max-width: 95%;
    margin: auto;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.1);
}


    #carousel-container-wrapper {
        min-width: 100vw;
        max-width: 100vw;        
    }

    #imageCarousel {
        width: 100%; /* Make the carousel take the full width of the container */
    }

    #carousel-container .carousel-control-prev {
        left: -20px; /* Position to the left, adjusted for .carousel-container padding */
    }

    #carousel-container .carousel-control-next {
        right: -20px; /* Position to the right, adjusted for .carousel-container padding */
    }
    
    #carousel-container .carousel-inner img {
        display: block;
        margin: auto;
        width: 100%; /* Make images fill the container width */
        height: 100%; /* Make images fill the container height */
        object-position: center; /* Center the image within the element */
    }
    
    /* Styling for carousel controls as grey buttons with black arrows */
   #carousel-container .carousel-control-prev,#carousel-container .carousel-control-next {
        width: 10%; /* Control area width */
        height: calc(100% + 40px); /* Adjust height to fit within .carousel-container, accounting for padding */
        position: absolute;
        top: 50%; /* Center vertically */
        transform: translateY(-50%);
        background-color: #ccc; /* Grey background for the buttons */
        border: none; /* Remove any border */
        border-radius: 0; /* Ensure buttons are rectangular */
    }
    

    #carousel-container .carousel-control-prev-icon,#carousel-container .carousel-control-next-icon {
        background-image: none; /* Remove default background image */
    }
    
    #carousel-container .carousel-control-prev span,#carousel-container .carousel-control-next span {
        display: inline-block;
        width: 20px; /* Arrow size */
        height: 20px; /* Arrow size */
        background-color: black; /* Black arrows */
        mask: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0  8 8"%3E%3Cpath d="M5.5 0l-4 4 4 4V5H8V3H5.5V0z"%3E%3C/path%3E%3C/svg%3E') center / contain no-repeat;
    }
    
    #carousel-container .carousel-control-next span {
        mask: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0  8 8"%3E%3Cpath d="M2.5 0v3H0v2h2.5v3l4-4-4-4z"%3E%3C/path%3E%3C/svg%3E') center / contain no-repeat;
    }

       
    .searchLine {
        position: absolute;
        bottom: 2%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        width: 60%;
        padding: 0; /* Adjust padding as needed */
        padding-right: 10px;
        background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent background for visibility */
        color: black;
        cursor: pointer;
        border-radius: 5px;
    }

    .search-icon {
        color: black;
        cursor: pointer;
        margin-left: 20px;
        box-shadow: none !important; /* Ensure there is no box shadow */
        text-shadow: none !important; /* Ensure there is no text shadow */
        font-size: 4.5vw;
        z-index: 1000; /* Ensure the icon is above all other content */
    }

     .carousel-caption {
        position: static;  /* Override default positioning */
        padding: auto;
        color: black; /* Or any other color */
        background-color: rgba(255, 255, 255, 0.0); /* Optional: for better readability */
        width: 100%;
        max-height: 90%;
        font-size: 4.5vw;
    }
    

    .location-select {
        display: none; /* Hidden by default */
        position: absolute;
        top: 15%;
        right: 10%;
        width: 50%;        
    }


        @media (min-width: 768px) {
            #selectFrontsideBtn {
                width:  37%;
                height: 6vw;
                font-size: 2.7vw;
                padding: 2vw;
            }

            .car-cont{
                margin-top:4rem;
            }

            h1 {
                font-size: 1.75rem; 
            }

            #carousel-container-wrapper {
                min-width: 67vw;
                max-width: 67vw;
            }

            .carousel-container {
                max-width: 67%;
            }

            .search-icon {
                font-size: 2.0vw;
            }

            .carousel-caption {
                font-size: 2.0vw;

            }

            #logo {
                height: 15.0vw;
                margin-top: 0;
            }

            .question-mark {
                font-size: 2.0vw;
            }

            .main-text {
                font-size: 3.0vw;
            }
        }

   /* Styling for Select2 to center it */
    .select2-container {
        display: block; /* Make the Select2 container a block element */
        margin: 0 auto; /* Center the block */
    }

    /* Specific adjustments to ensure the dropdown fits the container width if necessary */
    .select2-container--default .select2-selection--single {
        height: 38px;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 38px;
        padding-left: 12px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px;
    }