/* Wrapper to handle overflow */
.container-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    background: #f0f4f8; /* General page background color */
}

.text-lightup {
    color: #c6c6c6;
}

.clickElement:hover {
    opacity: 0.8;
    cursor: pointer;
}

.col-lighter {
    color: #8b8b8b;
}

.container {
    display: flex;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

/* Left side styling */
.col-left {
    display: none;
}

@media (min-width: 992px) {

    body {
        background: url('/img/bgimg2.jpg');
        background-size: cover;
    }

    .mobileMsg {
        display: none;
    }

    .heads {
        display: none;
    }

    .container {
        flex-direction: row;
    }

    .outerDiv {
        padding-right: 0px;
        padding-left: 0px;
        margin-left: 0px;
        margin-right: 0px;
        height: 80vh;
        margin-top: 10vh;
        margin-bottom: 10vh;
        width: 80vw;
        margin-left: 10vw;
        margin-right: 10vw;
        display: flex;
        border-radius: 14px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

    .formDiv {
        margin-left: auto;
        margin-right: auto;
        min-width: 30vw;
        padding-left: 10%;
        padding-right: 10%;
    }

    .col-left {
        position: relative; /* Set position to relative to allow pseudo-element overlay */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex: 1.5;
        background: url('/img/bg21.png');
        background-size: cover;
        color: white;
        text-align: center;
        width: 65%;
    }



    .col-light {
        color: #c6c6c6;
    }

    .smallText {
        font-size: 14px;
    }

    /* Styling for icon and text */
    .base-content {
        position: fixed;
        bottom: 10px;
        left: 20px;
        text-align: start;
        text-shadow: 2px 2px #0000008c;
    }

    .center-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .icon {
        font-size: 4rem; /* Adjust icon size */
        margin-bottom: 1rem;
    }

    .icon-text {
        font-size: 1.5rem; /* Adjust text size */
    }

    .col-right {
        flex: 1;
        width: 35%;
        background: #ffffff;
    }

    .env-card {
        border-radius: 0;
        box-shadow: none;
        height: 100%;
    }

    .main-card {
        /*        padding: 4em;*/
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Mobile and tablet styles */
@media (max-width: 991px) {

    body {
        background: #fff;
    }

    .mobileMsg {
        display: block;
    }

    .heads {
        font-size: 2.5rem;
        display: block;
        font-family: 'Kanit', sans-serif;
    }

    .col-left {
        display: none; /* Hide the left column on smaller screens */
    }

    .outerDiv {
        padding-right: 0px;
        padding-left: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 10vh;
        width: 90vw;
        margin-left: 5vw;
        margin-right: 5vw;
        display: flex;
        border-radius: 14px;
    }

    .formDiv {
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 15%;
    }

    .col-right {
        width: 100%;
        padding: 20px;
    }

    .env-card {
        max-width: 100%;
        border-radius: 20px;
        background: #ffffff;
    }
}

/* General form styles */
.form-label {
    color: #808080;
    font-weight: normal;
    font-size: 13px;
}

.form-control {
    border: 0;
    background: #c7ede7;
    padding: 1rem;
    height: 50px;
    border-radius: 15px;
}

#subscriberDropdown {
    position: absolute; /* Key for positioning */
    background: #fff;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000; /* Ensure it appears above other elements */
    display: none; /* Initially hidden */
}

    #subscriberDropdown div {
        padding: 10px;
        cursor: pointer;
    }

        #subscriberDropdown div:hover {
            background-color: #f1f1f1;
        }

.submit {
    background: #14574b;
    color: #f6f6f6;
    font-size: 15px;
    font-weight: bolder;
    height: 45px;
    border-radius: 15px;
}

    .submit:hover {
        opacity: 0.9;
        color: #f6f6f6;
    }