/** Custom CSS for promo page layout */
.kc-promo-panel {
  width: 75%;
  background-color: #f4f4f9; /* Light background for promotions */
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kc-layout-wrapper {
  display: flex;
  min-height: 100vh;
}

.kc-login-panel {
  width: 25%;
  padding: 20px;
}

.kc-login-form {
  max-width: 400px;
  margin: 0 auto;
}

.kc-login-container {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* Left panel styling (login section) */
.kc-login-left {
    flex: 0 0 50%;  /* Left side occupies a maximum of 50% */
    background-color: #F3EFEE;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    min-width: 320px;
    box-sizing: border-box;
}

.kc-logo-section {
    text-align: center;
}

.kc-logo {
    max-width: 150px;
    margin-bottom: 2rem;
}

.kc-form-section {
    width: 100%;
    max-width: 320px;
}

/* Input field styling */
.pf-c-form-control {
    padding: 12px 16px;
    border-radius: 20px;
    width: 100%;
    margin-bottom: 1.5rem;
    font-size: 16px;
}

/* Right panel styling (webinar section) */
.kc-login-right {
    flex: 1; /* Ensures it takes the remaining space */
    background-color: #2b1a2e; /* Or any desired background color */
    display: flex; /* To center content or structure flex children */
    align-items: center; /* Center content vertically */
    width: 100%; /* Full width of the parent */
    height: 100%; /* Full height of the parent */
    position: relative; /* For positioning child elements absolutely if needed */
    background-size: cover; /* Cover the entire area */
    background-position: center; /* Center the background image */
}

.kc-promo-content {
    text-align: left;
    align-self: flex-end;
    max-width: 480px;
    flex: 1;
    font-family: 'Arial', sans-serif;
    color: white;
}

.kc-promo-image {
    flex-shrink: 0;  /* Ensures the image doesn't shrink */
}

.kc-promo-image img {
    max-width: 150px;  /* Set a maximum width for the image */
    height: auto;  /* Maintain aspect ratio */
}

/* Media Query to hide the right side on small devices */
@media (max-width: 768px) {
    .kc-login-right {
        display: none;  /* Hide right side on mobile or tablets */
    }

    .kc-login-left {
        flex: 1;  /* Make the left side take up 100% width on mobile */
        max-width: 100%;  /* Ensure no max width limit */
        min-width: unset;
        padding: 1rem;
    }
    
    .login-pf-page {
        padding: 24px 24px 30px;
        max-width: 100%;
    }
}