/* Bridgen custom overrides (kept separate from the theme's main.css) */

/* Hero video: keep the people in frame but trim the bottom strip to hide the
   Veo watermark (bottom-right). Source video is 1280x720; the aspect-ratio
   below crops ~10% off the bottom, object-position:top keeps the top. */
.td-hero-bottom-thumb {
    overflow: hidden !important;
    height: auto !important;
    width: 100%;
    aspect-ratio: 1280 / 650;
}
.td-hero-bottom-thumb video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: 10px;
}

/* Courses hover section: cap the revealed image to the original widget box
   so larger source photos don't overflow. */
.td-service-2-img-wrapper .hover-image .thumb {
    width: 332px;
    height: 382px;
    object-fit: cover;
}

@media only screen and (max-width: 1199px) {
    .td-service-2-img-wrapper .hover-image .thumb {
        width: 250px;
        height: 290px;
    }
}

/* =========================================================
   Enquiry popup
   ========================================================= */
.bg-enquiry {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.bg-enquiry.is-open { opacity: 1; visibility: visible; }
.bg-enquiry__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 26, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.bg-enquiry__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    width: 100%;
    max-width: 860px;
    max-height: 92vh;
    overflow: hidden;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    transform: translateY(24px) scale(0.97);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.bg-enquiry.is-open .bg-enquiry__dialog { transform: translateY(0) scale(1); opacity: 1; }
.bg-enquiry__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #1c1d1f;
    font-size: 18px;
    cursor: pointer;
    z-index: 3;
    transition: background 0.2s ease, transform 0.2s ease;
}
.bg-enquiry__close:hover { background: var(--td-theme-primary, #c6f532); transform: rotate(90deg); }

/* aside */
.bg-enquiry__aside {
    background: #14161f;
    color: #fff;
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
}
.bg-enquiry__eyebrow {
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--td-theme-primary, #c6f532);
    font-weight: 600;
}
.bg-enquiry__heading {
    color: #fff;
    font-size: 30px;
    line-height: 1.15;
    margin: 14px 0 14px;
    font-weight: 700;
}
.bg-enquiry__text { color: rgba(255, 255, 255, 0.7); font-size: 15px; line-height: 1.6; margin-bottom: 26px; }
.bg-enquiry__points { list-style: none; padding: 0; margin: 0 0 auto; }
.bg-enquiry__points li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; color: rgba(255,255,255,0.92); }
.bg-enquiry__points i { color: var(--td-theme-primary, #c6f532); font-size: 12px; }
.bg-enquiry__call {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}
.bg-enquiry__call i { color: var(--td-theme-primary, #c6f532); }
.bg-enquiry__call:hover { color: var(--td-theme-primary, #c6f532); }

/* main / form */
.bg-enquiry__main { padding: 44px 40px; overflow-y: auto; }
.bg-enquiry__label { font-size: 12px; letter-spacing: 0.14em; color: #9a9a9a; font-weight: 600; }
.bg-enquiry__title { font-size: 26px; font-weight: 700; color: #1c1d1f; margin: 8px 0 26px; }
.bg-field { position: relative; margin-bottom: 18px; }
.bg-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bg-field input,
.bg-field select,
.bg-field textarea {
    width: 100%;
    padding: 15px 16px;
    border: 1.5px solid #e6e6e6;
    border-radius: 12px;
    font-size: 15px;
    color: #1c1d1f;
    background: #fafafa;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
    font-family: inherit;
}
.bg-field textarea { resize: vertical; min-height: 84px; }
.bg-field input:focus,
.bg-field select:focus,
.bg-field textarea:focus { border-color: #1c1d1f; background: #fff; }
.bg-field label {
    position: absolute;
    top: 15px;
    left: 14px;
    padding: 0 5px;
    font-size: 15px;
    color: #9a9a9a;
    pointer-events: none;
    background: transparent;
    transition: all 0.18s ease;
}
.bg-field input:focus + label,
.bg-field input:not(:placeholder-shown) + label,
.bg-field textarea:focus + label,
.bg-field textarea:not(:placeholder-shown) + label {
    top: -9px;
    left: 10px;
    font-size: 12px;
    color: #1c1d1f;
    background: #fff;
}
.bg-enquiry__submit {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    padding: 15px 30px;
    border: 0;
    border-radius: 40px;
    background: var(--td-theme-primary, #c6f532);
    color: #1c1d1f;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.bg-enquiry__submit:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(198, 245, 50, 0.4); }
.bg-enquiry__submit.is-loading { opacity: 0.6; pointer-events: none; }
.bg-enquiry__submit.is-loading i { animation: bg-spin 0.7s linear infinite; }
@keyframes bg-spin { to { transform: rotate(360deg); } }
.bg-enquiry__feedback { margin: 16px 0 0; font-size: 14px; font-weight: 600; min-height: 20px; }
.bg-enquiry__feedback.is-success { color: #2e9b5f; }
.bg-enquiry__feedback.is-error { color: #e8483a; }

@media (max-width: 767px) {
    .bg-enquiry__dialog { grid-template-columns: 1fr; max-height: 94vh; overflow-y: auto; }
    .bg-enquiry__aside { display: none; }
    .bg-enquiry__main { padding: 40px 24px 32px; }
    .bg-field-row { grid-template-columns: 1fr; gap: 0; }
}

/* =========================================================
   Counter digits: stop the odometer glyphs clipping at the top.
   The theme renders each digit inside an overflow:hidden box whose
   top edge sits flush on the glyph, so we (a) give the line some
   leading and (b) nudge the clip window upward to reveal the tops.
   ========================================================= */
.td-service-counter-item h2 {
    line-height: 1.2;
    padding-top: 4px;
    overflow: visible;
}
.td-service-counter-item h2 .bg-count {
    display: inline-block;
    line-height: 1.2;
}

/* =========================================================
   WhatsApp floating widget
   ========================================================= */
.bg-wa {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 99990;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}
.bg-wa__fab {
    position: relative;
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bg-wa__fab:hover { transform: scale(1.07); box-shadow: 0 14px 34px rgba(37, 211, 102, 0.6); }
.bg-wa__fab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25d366;
    z-index: -1;
    animation: bg-wa-pulse 2s infinite;
}
@keyframes bg-wa-pulse {
    0% { transform: scale(1); opacity: 0.6; }
    70% { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* chat card */
.bg-wa__popup {
    width: 320px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    transform-origin: bottom right;
    transform: translateY(16px) scale(0.85);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, visibility 0.3s ease;
}
.bg-wa.is-open .bg-wa__popup { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
.bg-wa__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #128c7e, #25d366);
    color: #fff;
}
.bg-wa__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex: 0 0 auto;
}
.bg-wa__headinfo { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.bg-wa__headinfo strong { font-size: 15px; }
.bg-wa__headinfo span { font-size: 12px; opacity: 0.9; display: flex; align-items: center; gap: 6px; }
.bg-wa__online { width: 8px; height: 8px; border-radius: 50%; background: #a8ff9e; display: inline-block; }
.bg-wa__close {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.85;
}
.bg-wa__close:hover { opacity: 1; }
.bg-wa__body {
    padding: 22px 18px;
    background: #e5ddd5 url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d9cfc4' fill-opacity='0.4'%3E%3Ccircle cx='4' cy='4' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}
.bg-wa__bubble {
    position: relative;
    background: #fff;
    border-radius: 0 12px 12px 12px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.55;
    color: #2b2b2b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.bg-wa__name { display: block; font-size: 12px; font-weight: 700; color: #128c7e; margin-bottom: 3px; }
.bg-wa__start {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    background: #25d366;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    transition: background 0.2s ease;
}
.bg-wa__start:hover { background: #1fb457; color: #fff; }

@media (max-width: 575px) {
    .bg-wa { right: 16px; bottom: 16px; }
    .bg-wa__fab { width: 56px; height: 56px; font-size: 28px; }
}

/* Move the theme's back-to-top button to the left so it doesn't
   collide with the WhatsApp widget on the right. */
.scroll__top {
    left: 50px !important;
    right: auto !important;
}
@media (max-width: 575px) {
    .scroll__top {
        left: 15px !important;
        right: auto !important;
    }
}

/* =========================================================
   Student Works marquee: cap card height so rows aren't huge
   (source images are large, theme leaves them unsized on desktop)
   ========================================================= */
.td-portfolio-2-thumb img {
    height: 414px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
}
@media (max-width: 991px) {
    .td-portfolio-2-thumb img { height: 340px !important; }
}
@media (max-width: 575px) {
    .td-portfolio-2-thumb img { height: 285px !important; width: auto !important; }
}

/* Student Works big title: smaller + single line (scales with viewport) */
.td-portfolio-2-bigtitle {
    font-size: clamp(30px, 9vw, 190px) !important;
    white-space: nowrap !important;
    line-height: 0.85 !important;
    margin-bottom: -10px !important;
}

/* Screen-reader-only (used for the per-page SEO H1) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Courses page: kill the 1px white seam that flickers between the stacked
   dark course panels while scrolling (sub-pixel rounding in the GSAP pinned
   layout). Paint the container dark so any rounding gap shows black, and
   overlap each panel by 1px so there is no gap to begin with. */
.td-service-pin-item,
.td-service-pin-items,
.td-service-pin-item > .container-fluid {
    background-color: var(--td-common-black);
}
.td-service-pin-item-panel {
    margin-top: -1px;
}
.td-service-pin-item-panel:first-child {
    margin-top: 0;
}

/* Hero headline inline thumbs (the two small images flanking "CREATIVE"):
   pin them to the theme's original ~204x100 footprint so swapping in a
   higher-res photo renders crisp without resizing the headline. */
.td-hero-title .title img {
    width: 204px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
}

/* Courses hover section on mobile/tablet: the reveal image is absolutely
   positioned + rotated and its container has no height, so once the columns
   stack (<992px) it spills over the course list. Hover-reveal is a pointer
   interaction anyway, so hide the decorative image and show the clean,
   tappable course list on small screens. */
@media (max-width: 991px) {
    .td-service-2-img-wrapper {
        display: none;
    }
}