/* =========================================================
   Discover Habib University Page
   File: /Website/discover-hu-assets/style.css
   Updated: Hero + 4 video cards + fullscreen World Speaks overlay
   ========================================================= */
:root{--discover-primary:#225a93;--discover-primary-dark:#062f55;--discover-navy:#071421;--discover-gold:#c89b3c;--discover-text:#151515;--discover-muted:#59636f;--discover-light:#f4f6f8;--discover-card:#e9ecef;--discover-white:#ffffff;--discover-black:#000000;--discover-shadow:0 22px 55px rgba(0,0,0,0.18);--discover-soft-shadow:0 12px 30px rgba(0,0,0,0.10);--discover-transition:all 0.28s ease;}

/* =========================================================
   General
   ========================================================= */
.discover-video-banner,.discover-feature-section,.discover-slider-section{position:relative;}
.discover-feature-section img,.discover-slider-section img{max-width:100%;height:auto;display:block;}
.discover-feature-card,.discover-slider-video{text-decoration:none;}
body.discover-overlay-open{overflow:hidden;}

/* =========================================================
   Video Banner
   ========================================================= */
.discover-video-banner{position:relative;width:100%;height:575px;overflow:hidden;background:var(--discover-black);}
.discover-banner-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.discover-banner-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(0,0,0,0.74) 0%,rgba(0,0,0,0.54) 45%,rgba(0,0,0,0.26) 100%);}
.discover-banner-content{position:relative;z-index:3;max-width:760px;height:470px;display:flex;flex-direction:column;justify-content:center;color:var(--discover-white);}
.discover-banner-content h1{line-height:1.05;font-size:52px;font-weight:700;margin-bottom:15px;color:#fff;text-transform:uppercase;text-shadow:-1px 5px 5px rgb(0 0 0 / 50%);}
.discover-banner-content p{color:rgba(255,255,255,0.92);font-size:18px;line-height:1.4;margin:0;max-width:650px;}
.discover-video-controls{position:absolute;right:38px;bottom:28px;z-index:4;display:flex;align-items:center;gap:12px;flex-flow:column;}
.discover-video-btn{width:46px;height:46px;border:1px solid rgba(255,255,255,0.65);border-radius:50%;background:rgba(0,0,0,0.45);color:var(--discover-white);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--discover-transition);}
.discover-video-btn:hover,.discover-video-btn:focus{background:var(--discover-white);color:var(--discover-primary);outline:none;}

/* =========================================================
   Four Feature Cards
   ========================================================= */
.discover-feature-section{z-index:5;background:#ffffff00;padding:0 0 60px;margin-top:-165px;}
.discover-feature-slider{position:relative;}
.discover-feature-slider .owl-stage{display:flex;}
.discover-feature-slider .owl-item,.discover-feature-item{display:flex;}
.discover-feature-card{position:relative;width:100%;min-height:430px;display:flex;flex-direction:column;background:var(--discover-card);color:var(--discover-text);overflow:hidden;/* box-shadow:var(--discover-soft-shadow); */transition:var(--discover-transition);}
.discover-feature-card:hover,.discover-feature-card:focus{transform:translateY(-7px);box-shadow:var(--discover-soft-shadow);color:var(--discover-text);text-decoration:none;}
.discover-feature-media{position:relative;min-height:205px;height:205px;overflow:hidden;background:#d6d9dc;}
.discover-feature-media img{width:100%;height:100%;object-fit:cover;transition:transform 0.45s ease;}
.discover-feature-card:hover .discover-feature-media img{transform:scale(1.06);}
.discover-feature-media::after,.discover-slider-img-wrap::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,0.22);transition:background 0.3s ease;}
.discover-feature-card:hover .discover-feature-media::after,.discover-slider-video:hover .discover-slider-img-wrap::after{background:rgba(0,0,0,0.42);}
.discover-feature-content{flex:1;padding:15px;display:flex;flex-direction:column;justify-content:flex-start;}
.discover-feature-content h2{font-size:26px;letter-spacing:-0.02em;font-weight:700;/* text-transform: uppercase; */line-height:38px;color:var(--primary);}
.discover-feature-content p{font-size:16px;line-height:24px;margin:15px 0 0;color:var(--bs-gray-dark);}

/* Shared play/view icon */
.discover-play-icon{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:var(--discover-white);color:var(--discover-primary);display:inline-flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 12px 35px rgba(0,0,0,0.25);transition:var(--discover-transition);}
.discover-play-icon i{margin-left:4px;}
.discover-feature-card:hover .discover-play-icon,.discover-slider-video:hover .discover-play-icon{background:var(--discover-primary);color:var(--discover-white);}

/* View All Card */
.discover-view-all-card{background:linear-gradient(180deg,#eef1f4 0%,#dfe4e8 100%);}
.discover-view-all-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(34,90,147,0.08),rgba(200,155,60,0.10)),radial-gradient(circle at 25% 18%,rgba(255,255,255,0.85),transparent 30%);pointer-events:none;}
.discover-view-all-trigger{position:relative;z-index:1;width:100%;height:100%;min-height:430px;border:0;background:transparent;color:var(--discover-text);padding:0 28px 30px;cursor:pointer;text-align:left;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;font-family:inherit;text-align:center;}
.discover-view-all-circle{width:88px;height:88px;border-radius:50%;background:var(--discover-white);color:var(--discover-primary);display:inline-flex;align-items:center;justify-content:center;text-align:center;font-size:16px;line-height:1.08;font-weight:700;box-shadow:0 12px 35px rgba(0,0,0,0.18);margin:0 auto 78px;transition:var(--discover-transition);}
.discover-view-all-trigger:hover .discover-view-all-circle,.discover-view-all-trigger:focus .discover-view-all-circle{background:var(--discover-primary);color:var(--discover-white);outline:none;}
.discover-view-all-trigger:focus{outline:2px solid var(--discover-primary);outline-offset:-2px;}
.discover-view-all-copy strong{display:block;margin-bottom:12px;font-size:20px;font-weight:700;line-height:32px;color:var(--primary);}
.discover-view-all-copy small{display:block;color:var(--bs-gray-dark);font-size:16px;line-height:24px;}

/* =========================================================
   Fullscreen World Speaks Overlay
   ========================================================= */
.discover-world-overlay{position:fixed;inset:0;z-index:99999;visibility:hidden;opacity:0;pointer-events:none;overflow-y:auto;background:rgba(9,12,16,0.96);transition:opacity 0.32s ease,visibility 0.32s ease;}
.discover-world-overlay.is-open{visibility:visible;opacity:1;pointer-events:auto;}
.discover-world-dim{position:fixed;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,14,17,0.94),rgba(19,24,29,0.96));}
.discover-world-shell{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;transform:translateY(45px) scale(0.96);clip-path:inset(10% 8% 10% 8%);opacity:0;transition:transform 0.42s ease,opacity 0.36s ease,clip-path 0.42s ease;}
.discover-world-overlay.is-open .discover-world-shell{transform:translateY(0) scale(1);clip-path:inset(0 0 0 0);opacity:1;}
.discover-world-close{position:fixed;top:24px;right:28px;z-index:5;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,0.5);background:rgba(255,255,255,0.12);color:var(--discover-white);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--discover-transition);}
.discover-world-close:hover,.discover-world-close:focus{background:var(--discover-white);color:var(--discover-primary);outline:none;}
.discover-world-section{width:100%;padding:82px 0 90px;background:transparent;}
.discover-slider-heading{text-align:center;max-width:780px;margin:0 auto 44px;}
.discover-world-section .discover-slider-heading .section-heading{color:var(--discover-white);font-size:42px;line-height:1.15;font-weight:700;margin:0 0 14px;}
.discover-world-section .discover-slider-heading p{color:rgba(255,255,255,0.82);font-size:18px;line-height:1.62;margin:0;}
.discover-slider-wrap{position:relative;padding:0 72px;}
.discover-video-slider{position:relative;}
.discover-video-slider .owl-stage{display:flex;}
.discover-video-slider .owl-item,.discover-video-slider .discover-slider-item{display:flex;}
.discover-video-slider .discover-slider-video{width:100%;}
.discover-slider-video{display:block;overflow:hidden;color:var(--discover-text);}
.discover-slider-img-wrap{position:relative;overflow:hidden;background:#d6d9dc;}
.discover-slider-img-wrap img{width:100%;height:285px;object-fit:cover;transition:transform 0.45s ease;}
.discover-slider-video:hover .discover-slider-img-wrap img{transform:scale(1.06);}
.discover-caption-bar{min-height:74px;padding:0;display:block;}
.discover-caption-bar .NameWrap{background:var(--discover-primary);padding:13px 15px 14px;width:fit-content;max-width:100%;min-width:210px;}
.discover-caption-bar .NameWrap h4{color:var(--discover-white);font-size:17px;line-height:1.2;font-weight:600;margin:0 0 4px;}
.discover-caption-bar .NameWrap h5{color:var(--discover-white);font-size:14px;line-height:1.3;font-weight:400;margin:0;}
.max-width-fit-content{width:fit-content;}
.discover-slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,0.75);background:rgba(255,255,255,0.08);color:var(--discover-white);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--discover-transition);}
.discover-slider-arrow:hover,.discover-slider-arrow:focus{background:var(--discover-white);color:var(--discover-primary);outline:none;}
.discover-slider-prev{left:0;}
.discover-slider-next{right:0;}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1199px){
    .discover-video-banner{height:520px;}
    .discover-banner-content{height:430px;}
    .discover-banner-content h1{font-size:48px;}
    .discover-banner-content p{font-size:18px;}
    .discover-feature-card,.discover-view-all-trigger{min-height:410px;}
    .discover-feature-content h2{font-size:28px;}
    .discover-feature-media{height:195px;min-height:195px;}
    .discover-slider-img-wrap img{height:255px;}
}
@media (max-width:991px){
    .discover-video-banner{height:460px;}
    .discover-banner-content{height:385px;max-width:620px;}
    .discover-banner-content h1{font-size:42px;}
    .discover-banner-content p{font-size:17px;}
    .discover-feature-section{margin-top:-58px;padding-bottom:75px;}
    .discover-feature-card,.discover-view-all-trigger{min-height:405px;}
    .discover-world-section{padding:78px 0 82px;}
    .discover-slider-wrap{padding:0 54px;}
    .discover-slider-arrow{width:46px;height:46px;}
}
@media (max-width:767px){
    .discover-video-banner{height:350px;}
    .discover-banner-overlay{background:linear-gradient(180deg,rgba(0,0,0,0.44) 0%,rgba(0,0,0,0.78) 100%);}
    .discover-banner-content{height:315px;justify-content:center;padding-right:20px;}
    .discover-banner-content h1{font-size:31px;line-height:1.14;margin-bottom:12px;}
    .discover-banner-content p{font-size:15px;line-height:1.52;}
    .discover-video-controls{display:none;}
    .discover-feature-section{margin-top:-44px;padding-bottom:78px;}
    .discover-feature-card,.discover-view-all-trigger{min-height:380px;}
    .discover-feature-media{height:auto;min-height:unset;}
    .discover-feature-media img{height:auto;object-fit:contain;}
    .discover-feature-content{padding:25px 23px 24px;}
    .discover-feature-content h2{font-size:20px;line-height:24px;}
    .discover-feature-content p,.discover-view-all-copy small{font-size:14px;}
    .discover-play-icon{width:58px;height:58px;font-size:18px;}
    .discover-view-all-circle{width:76px;height:76px;margin-bottom:58px;font-size:14px;}
    .discover-view-all-copy strong{font-size:20px;line-height:24px;}
    .discover-world-close{top:16px;right:16px;width:42px;height:42px;}
    .discover-world-section{padding:70px 0 78px;}
    .discover-world-section .discover-slider-heading .section-heading{font-size:30px;}
    .discover-world-section .discover-slider-heading p{font-size:15px;}
    .discover-slider-heading{margin-bottom:28px;padding:0 12px;}
    .discover-slider-wrap{padding:0;}
    .discover-slider-arrow{top:auto;bottom:-58px;transform:none;width:44px;height:44px;}
    .discover-slider-prev{left:calc(50% - 55px);}
    .discover-slider-next{right:calc(50% - 55px);}
    .discover-slider-img-wrap img{height:230px;}
    .discover-caption-bar .NameWrap{min-width:190px;}
}
@media (max-width:375px){
    .discover-banner-content h1{font-size:28px;}
    .discover-banner-content p{font-size:14px;}

    /*    .discover-slider-img-wrap img{height:210px;}*/
    .discover-feature-card,.discover-view-all-trigger{min-height:365px;}
}

/* =========================================================
   Fixes: banner controls, feature slider arrows, Fancybox above overlay
   ========================================================= */

/* Cards overlap the lower part of the banner, so controls are lifted above the cards. */
.discover-video-controls{z-index:40;}
.discover-feature-slider-wrap{position:relative;padding:0 58px;}
.discover-feature-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:8;width:46px;height:46px;border-radius:50%;border:1px solid var(--discover-primary);background:var(--discover-white);color:var(--discover-primary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--discover-transition);box-shadow:0 10px 24px rgba(0,0,0,0.12);}
.discover-feature-arrow:hover,.discover-feature-arrow:focus{background:var(--discover-primary);color:var(--discover-white);outline:none;}
.discover-feature-prev{left:0;}
.discover-feature-next{right:0;}

/* Fancybox must stay above the fullscreen World Speaks overlay. */
.fancybox-container,.fancybox__container,.fancybox__backdrop,.fancybox__carousel{z-index:1000000!important;}
@media (max-width:991px){
    .discover-feature-slider-wrap{padding:0 50px;}
    .discover-video-controls{bottom:92px;}
}
@media (max-width:767px){
    .discover-feature-slider-wrap{padding:0;}
    .discover-feature-arrow{top:auto;bottom:-58px;transform:none;width:42px;height:42px;}
    .discover-feature-prev{left:calc(50% - 52px);}
    .discover-feature-next{right:calc(50% - 52px);}
}

/* v3 adjustment: when 4 cards are visible by default, hide arrows and disable the visual slider controls. */
@media (min-width:1200px){
    .discover-feature-slider-wrap{padding:0;}
    .discover-feature-arrow{display:none;}
}

/* =========================================================
   Prevent Discover Feature Slider jerk before Owl loads
   ========================================================= */

/*
   Owl Carousel adds .owl-loaded after JS initialization.
   Before that happens, we force the cards to behave like the final layout.
   This prevents vertical stacking / jumping during page load.
*/

.discover-feature-slider-wrap{min-height:430px;}

/* Desktop fallback before Owl loads: show all 4 cards in one row */
.discover-feature-slider:not(.owl-loaded){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.discover-feature-slider:not(.owl-loaded) .discover-feature-item{display:flex;min-width:0;}

/* Keep cards same height before Owl loads */
.discover-feature-slider:not(.owl-loaded) .discover-feature-card{height:100%;}

/* Tablet before Owl loads: show 3 cards */
@media (max-width:1199px){
    .discover-feature-slider:not(.owl-loaded){grid-template-columns:repeat(3,minmax(0,1fr));}
    .discover-feature-slider:not(.owl-loaded) .discover-feature-item:nth-child(n+4){display:none;}
}

/* Small tablet before Owl loads: show 2 cards */
@media (max-width:767px){
    .discover-feature-slider-wrap{min-height:380px;}
    .discover-feature-slider:not(.owl-loaded){grid-template-columns:repeat(2,minmax(0,1fr));}
    .discover-feature-slider:not(.owl-loaded) .discover-feature-item:nth-child(n+3){display:none;}
}

/* Mobile before Owl loads: show 1 card */
@media (max-width:575px){
    .discover-feature-slider:not(.owl-loaded){grid-template-columns:1fr;}
    .discover-feature-slider:not(.owl-loaded) .discover-feature-item:nth-child(n+2){display:none;}
}

/* =========================================================
   Controllable View All Popup Background + Effects
   ========================================================= */

/*
   Control from HTML:
   data-bg="minimal"  = light/minimal popup
   data-bg="solid"    = solid color popup
   data-bg="gradient" = gradient popup
   data-bg="dark"     = dark cinematic popup

   data-effect="morph" = scale + clip morph effect
   data-effect="fade"  = simple fade
   data-effect="slide" = slide up effect
*/

/* Main editable popup variables */
.discover-world-overlay{--popup-minimal-bg:rgba(255,255,255,0.96);--popup-solid-bg:#f7f8fb;--popup-gradient-bg:linear-gradient(135deg,#062f55 0%,#225a93 55%,#c89b3c 140%);--popup-dark-bg:rgba(9,12,16,0.96);--popup-heading-color:var(--discover-white);--popup-text-color:rgba(255,255,255,0.82);--popup-close-color:var(--discover-white);--popup-close-border:rgba(255,255,255,0.5);--popup-close-bg:rgba(255,255,255,0.12);}

/* Remove double-heavy black layer */
.discover-world-dim{background:transparent;}

/* Minimal light popup */
.discover-world-overlay[data-bg="minimal"]{background:var(--popup-minimal-bg);--popup-heading-color:var(--discover-primary);--popup-text-color:var(--discover-text);--popup-close-color:var(--discover-primary);--popup-close-border:rgba(34,90,147,0.35);--popup-close-bg:rgba(255,255,255,0.85);}

/* Solid color popup */
.discover-world-overlay[data-bg="solid"]{background:var(--popup-solid-bg);--popup-heading-color:var(--discover-primary);--popup-text-color:var(--discover-text);--popup-close-color:var(--discover-primary);--popup-close-border:rgba(34,90,147,0.35);--popup-close-bg:rgba(255,255,255,0.85);}

/* Gradient popup */
.discover-world-overlay[data-bg="gradient"]{background:var(--popup-gradient-bg);--popup-heading-color:var(--discover-white);--popup-text-color:rgba(255,255,255,0.86);}

/* Dark popup */
.discover-world-overlay[data-bg="dark"]{background:var(--popup-dark-bg);--popup-heading-color:var(--discover-white);--popup-text-color:rgba(255,255,255,0.82);}

/* Apply variable colors to heading and text */
.discover-world-section .discover-slider-heading .section-heading{color:var(--popup-heading-color);}
.discover-world-section .discover-slider-heading p{color:var(--popup-text-color);}

/* Apply variable colors to close button */
.discover-world-close{color:var(--popup-close-color);border-color:var(--popup-close-border);background:var(--popup-close-bg);}

/* Better arrows for light/minimal popup */
.discover-world-overlay[data-bg="minimal"] .discover-slider-arrow,.discover-world-overlay[data-bg="solid"] .discover-slider-arrow{border-color:rgba(34,90,147,0.35);background:rgba(255,255,255,0.88);color:var(--discover-primary);}
.discover-world-overlay[data-bg="minimal"] .discover-slider-arrow:hover,.discover-world-overlay[data-bg="solid"] .discover-slider-arrow:hover{background:var(--discover-primary);color:var(--discover-white);}

/* =========================================================
   Popup opening effects
   ========================================================= */

/* Morph effect */
.discover-world-overlay[data-effect="morph"] .discover-world-shell{transform:translateY(45px) scale(0.96);clip-path:inset(10% 8% 10% 8%);}
.discover-world-overlay[data-effect="morph"].is-open .discover-world-shell{transform:translateY(0) scale(1);clip-path:inset(0 0 0 0);}

/* Simple fade effect */
.discover-world-overlay[data-effect="fade"] .discover-world-shell{transform:none;clip-path:inset(0 0 0 0);opacity:0;}
.discover-world-overlay[data-effect="fade"].is-open .discover-world-shell{transform:none;clip-path:inset(0 0 0 0);opacity:1;}

/* Slide up effect */
.discover-world-overlay[data-effect="slide"] .discover-world-shell{transform:translateY(70px);clip-path:inset(0 0 0 0);}
.discover-world-overlay[data-effect="slide"].is-open .discover-world-shell{transform:translateY(0);clip-path:inset(0 0 0 0);}