@charset "UTF-8";

/* Style for the dropd container */
        .lang-wrap{
          display: flex;
          justify-content: flex-end;  /* pushes to the right */
          width: 100%;
        }

        .dropd {
            position: relative;
            display: inline-block;
            margin-right: 24px;
        }

        /* Style for the dropd button */
        .dropd-button {
            background-color: #00aeef !important; /* Default background color */
            color: #fff; /* Default text color */
            border: none;
            padding: 6px 12px; /* Add extra padding for the images */
            cursor: pointer;
            font-size: 12px;
            text-align: left;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 5px; /* Rounded corners for the button */
            min-width: 100px;
        }

        /* Style for the dropd content */
        .dropd-content {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #fff; /* Background color for the dropdown */
            border: 1px solid #ccc;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            min-width: 100px;
            border-radius: 5px; /* Rounded corners for the dropdown content */
        }

        /* Style for dropd items */
        .dropd-item {
            padding: 10px 20px;
            text-decoration: none;
            display: block;
            color: #333;
        }

        /* Hover effect for dropd items */
        .dropd-item:hover {
            background-color: #f1f1f1;
        }

        /* Selected item style */
        .dropd-item.selected {
            background-color: #00aeef; /* Background color for the selected item */
            color: #fff; /* Text color for the selected item */
        }

        /* Show the dropd content on hover */
        .dropd:hover .dropd-content {
            display: block;
        }

        /* Style for the left image */
        .left-image {
            width: 20px; /* Adjust the image width as needed */
            height: auto; /* Maintain aspect ratio */
            margin-right: 5px; /* Adjust spacing between the image and text */
        }

        /* Style for the right image */
        .right-image {
            width: 20px; /* Adjust the image width as needed */
            height: auto; /* Maintain aspect ratio */
            margin-left: 5px; /* Adjust spacing between the text and image */
        }

        /* Style for the right image on hover */
        .dropd:hover .right-image {
            content: url('../images/lang-arrow-up.png'); /* Change image on hover */
        }

        /* Responsive styles for smaller screens */
        @media screen and (max-width: 768px) {
            .dropd-button {
                padding: 10px 20px 10px 20px;
                display: block;
                width: 100%;
            }
            
            /* Adjust the image size for smaller screens */
            .left-image,
            .right-image {
                width: 15px;
            }

            /* Center the button text for smaller screens */
            .dropd-button span {
                display: inline-block;
                margin-left: 10px;
                width: calc(100% - 40px);
                text-align: center;
            }
        }