html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.umeet-landing {
    overflow:hidden;
}


.hero {

    background:
    linear-gradient(
        135deg,
        #f8fbff,
        #ffffff
    );

}



.min-vh-75 {

    min-height:75vh;

}



.meeting-window {

    background:#111;

    border-radius:24px;

    overflow:hidden;

}



.meeting-topbar {

    padding:15px;

    color:white;

    background:#181818;

    font-weight:600;

}



.online-dot {

    display:inline-block;

    width:10px;

    height:10px;

    background:#20c997;

    border-radius:50%;

    margin-right:8px;

}



.video-area {

    height:420px;

    position:relative;

    background:
    linear-gradient(
        135deg,
        #202020,
        #454545
    );

}



.participant {

    position:absolute;

    display:flex;

    flex-direction:column;

    align-items:center;

    color:white;

}



.participant i {

    font-size:90px;

}



.participant.large {

    top:90px;

    left:50%;

    transform:translateX(-50%);

}



.participant.small {

    right:25px;

    bottom:25px;

}



.participant.small i {

    font-size:45px;

}



.controls {

    padding:15px;

    display:flex;

    justify-content:center;

    gap:15px;

}



.controls button {

    border:0;

    width:48px;

    height:48px;

    border-radius:50%;

}



.controls .end {

    background:#dc3545;

    color:white;

}



.feature-card {

    background:white;

    padding:35px;

    border-radius:18px;

    height:100%;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

}



.feature-card i {

    font-size:40px;

    color:#0d6efd;

    margin-bottom:20px;

}


.umeet-profile-link {
    text-decoration: none !important;
    color: inherit !important;
}

.umeet-profile-link:hover,
.umeet-profile-link:focus,
.umeet-profile-link:active,
.umeet-profile-link:visited {
    text-decoration: none !important;
    color: inherit !important;
}

/* =====================================
   Footer
   ===================================== */

.umeet-footer {
    margin-top: auto;
    padding: 24px 32px;

    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

.umeet-footer-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
}


/* =====================================
   Footer Brand
   ===================================== */

.umeet-footer-brand {
    display: flex;
    align-items: center;
    gap: 18px;

    min-width: 0;
}

.umeet-footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #0f172a;
    font-size: 15px;
    font-weight: 700;

    white-space: nowrap;
}

/*
    .umeet-logo already exists in the
    header, so the footer uses the exact
    same logo treatment.
*/

.umeet-footer-copyright {
    color: #64748b;
    font-size: 13px;
    white-space: nowrap;
}


/* =====================================
   Footer Legal Links
   ===================================== */

.umeet-footer-links {
    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 13px;
    white-space: nowrap;
}

.umeet-footer-links a {
    color: #64748b;
    text-decoration: none;

    transition:
        color 0.15s ease,
        text-decoration-color 0.15s ease;
}

.umeet-footer-links a:hover {
    color: #2563eb;

    text-decoration: underline;
    text-underline-offset: 3px;
}

.umeet-footer-links a:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 4px;

    border-radius: 2px;
}

.umeet-footer-divider {
    color: #cbd5e1;
    font-size: 10px;
}


/* =====================================
   Footer Mobile
   ===================================== */

@media (max-width: 768px) {

    .umeet-footer {
        padding: 24px 20px;
    }

    .umeet-footer-inner {
        flex-direction: column;
        align-items: flex-start;

        gap: 16px;
    }

    .umeet-footer-brand {
        flex-direction: column;
        align-items: flex-start;

        gap: 6px;
    }

    .umeet-footer-links {
        flex-wrap: wrap;

        gap: 10px;
        white-space: normal;
    }
}