/*********************
 * CUSTOM OVERRIDES (Optimized)
 * – Keeps exact look/behavior
 * – Consolidated media queries
 * – Removed duplicates & dead code
 *********************/

/* === Global === */
:root {
  /* expects --primary, --primary2, --primary-rgb, --primary2-rgb, --light, --light2, --dark to exist in base CSS */
}

body{position:relative}

/* Owl / hero containers */
.owl-carousel .owl-stage-outer{max-height:100vh!important}
.paf{font-size:22px}

/* Full-bleed media */
.bgimg,
#bg-video{
  min-width:100%;
  min-height:100vh;
  max-width:100%;
  max-height:100vh;
  object-fit:cover;
  z-index:-1;
}
#bg-video::-webkit-media-controls{display:none!important}

/* Hero title pair */
.Maya-one{font-size:140px!important;color:#fff}
.Maya-two{font-size:35px!important;color:#fff;bottom:-240px;position:relative}

/* Utilities */
.ser-icon{height:80px;width:auto}
.dis-in{display:inline!important}
.top-tra{top:0;background-color:transparent!important;position:absolute!important;z-index:1111!important}
.logo-sp{top:9vh!important}
.img-rs{width:100vw;object-fit:cover}
.vl{border-right:4px solid var(--light);height:auto;margin:0 auto}
.center-img{max-height:367px;width:auto!important}
.img-css-blur{background:#fdfdfd98;border-radius:135px;backdrop-filter:blur(3px);filter:drop-shadow(2px 4px 6px #000)}
.border-end-menu{border-right:2px solid var(--dark)}
/* keep this close to your other navbar overrides */
.fixed-top-2 {
  position: fixed !important;
  top: 0; right: 0; left: 0;        /* keep anchoring */
  width: 100vw;
  margin-top: 1%;
  padding-right: 1%;
  padding-left: 1%;
  z-index: 1030;                    /* 🔑 restore */
}
.team-img-mm{height:160px;width:160px;object-fit:cover;border-radius:50%}
.team-text-mm{position:relative;max-height:200px;overflow:hidden}
.team-social-mm,
.team-title-mm{
  position:relative;width:100%;max-height:50%;
  display:flex;align-items:center;justify-content:center;transition:.5s;background:var(--light)
}
.model-close-cross{right:10px;position:absolute;top:10px;z-index:1}
.bg-image{position:relative;overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:50%}
.team-section{min-height:100vh}

/* Footer link list */
#footer .footer-links{display:flex;flex-direction:column;margin:0 -1rem 2rem;clear:both}
#footer .footer-links li{display:table-cell;padding:0 1rem}

/* Images */
.ser-img-my{max-height:300px;width:auto;object-fit:cover}
.med{max-width:320px!important}
.footerlogo{height:100px;width:auto}
.img-css-blur_v2{background:#fdfdfd2b;border-radius:35px;backdrop-filter:blur(1px);filter:drop-shadow(2px 4px 6px #000)}
.img-css-blur_v3{filter:drop-shadow(2px 4px 6px #000)}
.text-justify{text-align:justify!important}
.fs-18,.fs-15{font-size:15px;line-height:18px}

/* Accents / borders */
.text-ab-col{color:#07000ea3!important}
.ab-bag{backdrop-filter:blur(6px);border-radius:15px}
.border-mmuk-left{border-left:4px solid var(--primary);padding-left:12px;border-radius:3px 2px}
.border-mmuk-right{border-right:4px solid var(--primary);padding-right:12px;border-radius:2px 3px}
.mb-yy{margin-bottom:-1.2rem}
.textob ol, .textob ul{padding-left:1rem}

/* Logos */
.tplogo{height:367px}
.classdd{min-width:223px}
.line-clamp{min-height:42px}
.lhw{max-height:65vh}
.menu-top-left{padding-top:10px;margin-left:-25px}
.menu-top-left>li.nav-item .nav-link{padding:6px 20px!important}
.menu-top-left>li.nav-item{width:80px}
.social-icons a.me-3.text-white{font-size:20px}
.top-menu-background{background:var(--primary);border-radius:0 0 15px;padding-right:12px}
.top-menu-background-right{border-radius:0 0 0 15px;padding-left:40px;position:absolute;right:20px}

/* Slanted helpers */
.slanted{width:200px;height:200px;background:#ccc;position:relative}
.slanted::before{
  content:"";position:absolute;top:0;left:0;width:0;height:0;
  border-top:40px solid transparent;border-right:40px solid #ccc;transform:skew(-30deg)
}
.imge-slant{height:100%;object-fit:cover}

/* Slick dots */
.slick-dots li button::before{
  color:var(--dark)!important;height:12px!important;width:12px!important;font-size:0;line-height:12px!important;
  background-color:var(--dark)!important;border-radius:50%
}

/* Video thumbs */
.vid-loc{min-width:100%;max-width:100%;object-fit:cover;z-index:-1}

/* Top video block */
.top-bg-vid{
  width:100%;min-width:0;min-height:0;height:auto;object-fit:cover;border-radius:30px 0 0 30px;margin-bottom:15px
}

/* Footer show/hide */
#myFooter{visibility:hidden;opacity:0;transition:visibility 0s,opacity .5s ease-in-out}

/* Scrollbars (single, consolidated) */
*{scrollbar-width:none;scrollbar-color:var(--primary) transparent}
::-webkit-scrollbar{width:0!important}
::-webkit-scrollbar-track{background:transparent!important}
::-webkit-scrollbar-thumb{background-color:var(--primary)!important}

/* Offcanvas sizes by breakpoint (defaults below) */
.offcanvas-start,.offcanvas-end{width:320px!important}
.navbar-expand-lg .navbar-nav{flex-direction:column!important}
.sidebar-icon{font-size:20px;line-height:22px;padding:5px 0 0}

/* Toggler button */
.navbar-toggler{padding:.15rem!important;font-size:14px;margin-top:5px;color:var(--bs-dark)!important;background:var(--light)!important}

/* Address cards */
.address-card{font-size:12px}
.address-title{margin:0 0 15px}
.address-flex{display:flex;margin:0 10px 5px}
.address-text{padding:0 0 5px 3px}
.address-icon{margin-right:10px;margin-top:3px}

/* Hover tweak */
.text-fact{color:var(--light)}
.fact-item:hover .text-fact{color:var(--primary)}

/* Glass UI variants */
.container-bg{background:var(--light);border-radius:25px;padding:30px 20px}
.border-rd-lt{border-top-left-radius:25px!important}
.border-rd-rt{border-top-right-radius:25px!important}
.border-rd-lb{border-bottom-left-radius:25px!important}
.border-rd-rb{border-bottom-right-radius:25px!important}
.border-top-only{border-top-left-radius:25px!important;border-top-right-radius:25px!important}
.border-bottom-only{border-bottom-left-radius:25px!important;border-bottom-right-radius:25px!important}
.border-right-only{border-top-right-radius:25px!important;border-bottom-right-radius:25px!important}
.border-left-only{border-top-left-radius:25px!important;border-bottom-left-radius:25px!important}
.border-left-dig-only{border-top-right-radius:25px!important;border-bottom-left-radius:25px!important}
.border-right-dig-only{border-top-left-radius:25px!important;border-bottom-right-radius:25px!important}
.border-all{border-radius:25px!important}
.button-border{border-radius:15px!important}

.accordion .accordion-item{
  border-radius:0 0 15px 15px!important;margin-bottom:15px;background:#ffffff0f!important;
  border:1px solid #ffffff1a!important;backdrop-filter:blur(5px)!important;color:#fff;box-shadow:0 0 10px 1px #00000040
}
.accordion .accordion-button{
  background:#ffffff0f!important;border:1px solid #ffffff1a!important;backdrop-filter:blur(5px)!important;color:#fff;
  border-radius:0 0 15px 15px!important;box-shadow:0 0 10px 1px #00000040
}
.accordion .accordion-button:not(.collapsed){
  box-shadow:none;background:#ffffff61!important;border:1px solid #ffffff1a!important;backdrop-filter:blur(5px)!important;
  color:var(--primary)!important;font-weight:900
}
.accordion .accordion-button:not(.collapsed)::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}
.accordion .accordion-body{padding:15px}

/* Media cards */
.card-img-media{box-shadow:5px 5px 10px 0 #00000080;border-radius:0;object-fit:contain;width:100%;height:auto}
.media-title{color:var(--primary);text-align:center;font-size:14px;font-weight:700;margin:10px 0 10px;padding:0 5px}
.fltr-primary{filter:drop-shadow(2px 4px 6px var(--primary))!important}

/* Glass cards/buttons */
.pill-fill-bg{background:var(--primary);border:3px solid var(--primary)!important;color:#fff!important}
.logo-menu-mm{max-height:65px!important}
.glass-ui,
.glass-ui-card{
  color:#fff;border:1px solid rgb(255 255 255 / 20%)!important;background:rgb(255 255 255 / 10%)!important;
  box-shadow:0 4px 30px rgb(0 0 0 / 10%)!important;backdrop-filter:blur(18px)!important
}
.glass-ui-card{border-radius:20px}
.glass-ui-2{
  border:1px solid rgb(255 255 255 / 20%)!important;background:rgb(255 255 255 / 41%)!important;
  box-shadow:0 4px 30px rgb(0 0 0 / 10%)!important;backdrop-filter:blur(18px)!important
}
.glass-ui-wb{background:#ffffff0f!important;backdrop-filter:blur(5px)!important}
.glass-ui-card-2{
  background:#ffffff61!important;border:1px solid #ffffff1a!important;backdrop-filter:blur(5px)!important;
  box-shadow:0 0 10px 1px #00000040;border-radius:20px;color:#fff
}
.glass-btn-cir{
  width:3rem;height:3rem;display:flex;cursor:pointer;color:#eaf0fb;border-radius:50%;
  align-items:center;justify-content:center;background:#ffffff45;border:2px solid #fff
}
.glass-ui-card-2 .glass-btn-cir{color:var(--primary);border-color:var(--primary)}
.glass-btn-cir:hover{background:#ffffff78;color:#eaf0fb}
.cardt-p{padding:5px!important;border-radius:5px!important}

/* Address menu */
.address-menu.accordion .accordion-button:not(.collapsed){background:#ffffff14!important;border:0 solid transparent!important}
.address-menu .accordion-item{border-radius:0!important}
.address-menu .accordion-button{padding:7px;border-radius:0!important}
.address-menu .accordion-button::after{background-image:none!important;height:0!important}
.address-menu .accordion-button::before{background-image:none!important}

/* Offcanvas animations */
.offcanvas-end .offcanvas-body,
.offcanvas-start .offcanvas-body{
  transition:opacity .5s ease, transform .5s ease;transition-delay:.3s;opacity:0
}
.offcanvas-end .offcanvas-body{transform:translateX(100%)}
.offcanvas-start .offcanvas-body{transform:translateX(-100%)}
.offcanvas-end.show .offcanvas-body,
.offcanvas-start.show .offcanvas-body{opacity:1;transform:translateX(0)}
.offcanvas-end .offcanvas-body.offcanvas-body-animation{opacity:0;transform:translateX(100%)}
.offcanvas-end.show .offcanvas-body.offcanvas-body-animation{opacity:1;transform:translateX(0)}
.offcanvas-start .offcanvas-body.offcanvas-body-animation{opacity:0;transform:translateX(-100%)}
.offcanvas-start.show .offcanvas-body.offcanvas-body-animation{opacity:1;transform:translateX(0)}

/* Sidebar menu items */
.nav-item{display:flex;align-items:center;justify-content:start;padding-left:20px;transition:all .3s ease}
.nav-item a{color:#fff!important}
.nav-item:hover{border-top:2px solid #fff;border-bottom:2px solid #fff}
.nav-item:hover a{font-weight:700}
.nav-item::before{
  font-family:"Font Awesome 5 Free";font-weight:900;margin:0 8px 0 10px;min-width:18px;display:inline-block;transition:all .3s ease
}
.nav-item:hover::before{font-size:20px}
.nav-item[data-menuanchor="home"]::before{content:"\f015"}
.nav-item[data-menuanchor="about"]::before{content:"\f007"}
.nav-item[data-menuanchor="services"]::before{content:"\f013"}
.nav-item[data-menuanchor="gallery"]::before{content:"\f03e"}
.nav-item[data-menuanchor="faq"]::before{content:"\f128"}
.nav-item[data-menuanchor="blogs"]::before{content:"\f02d"}
.nav-item[data-menuanchor="contact"]::before{content:"\f0e0"}

/* Logo strip */
#logo-container{text-align:center;position:absolute;bottom:19px;margin:auto;left:-10px;max-width:100vw!important}
#main-logo{width:320px;position:static}
.sub-logo{
  width:85px!important;height:auto!important;max-height:80px;display:inline-block!important;margin:0 10px;opacity:1
}
.sub-logo:not(:last-child){border-right:2px solid #000}
.dst-black{filter:drop-shadow(2px 4px 6px #000)}
.dst-blue{filter:drop-shadow(2px 4px 6px #404660eb)}
.item-text{height:35px}
.logo-top-left{height:70px;margin-top:5px!important}
.animated-text{animation:colorChange 3s infinite alternate}
@keyframes colorChange{0%{color:#fff}100%{color:var(--primary)}}

/* Service cards overlay */
.ser-overlay{background:#0101014f!important}
.ser-img{aspect-ratio:5/3.4!important;object-fit:cover}
.ser-overlay .card-title{color:#fff!important;filter:drop-shadow(2px 4px 6px #000)}
.ser-title{transition:opacity .5s ease-in-out}

/* Logo carousels */
.mxw140{max-width:140px}
.mxw190{max-width:190px}
.plogo{height:120px!important;max-height:120px;object-fit:contain!important;filter:drop-shadow(2px 4px 6px #000)}
.logo-all-f{
  display:flex;position:relative;width:100%;max-width:450px;margin:0 auto!important;place-content:space-between center
}
#logo-container-old{display:flex;overflow:hidden}
.logo-all-f-old{animation:marquee 15s linear infinite}
.plogo-old{margin-right:20px}
@keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
#logo-container{max-width:100vw!important}
.sub-ti-pill{border-radius:18px 18px 8px 8px!important;font-size:16px;min-width:fit-content}
.img-op-logo-main{opacity:.75!important;filter:drop-shadow(2px 4px 6px #000)}
.img-op-logo{opacity:.9!important;filter:drop-shadow(2px 4px 6px #000)}
#logo-container .slick-slide{position:relative}

/* Right side menu */
.right-side-bar{max-height:74vh;overflow:scroll}
.right-side-bar-meny{bottom:10px;position:fixed}

/* Visual accents */
.bordered-image{position:relative;display:inline-block}
.bordered-image img{display:block;max-width:100%;height:auto}
.bordered-image::after{
  content:"";position:absolute;top:0;right:0;height:50%;width:10px;background:red;transform:translateY(50%)
}
.vertical-line{border-radius:1px;width:2px;height:36px;background:#fff;display:inline-block;margin:5px 11px;content:""}
.vertical-line.top-left{margin-left:5px}
.rm-bg-op{background:#0000!important}

/* Buttons */
.btn-menu-ui{border-radius:0;border:0!important;color:var(--primary)!important;background:#fff!important}
.btn.btn-primary{filter:drop-shadow(1px 2px 3px #1f19195c);border:0;border-radius:0!important;padding-top:8px!important}

/* Journey card */
.jrny-card-img{
  max-height:180px;object-fit:contain;width:auto;padding:30px;background:var(--primary)
}
.jrny-card-title{
  background:var(--primary);left:-16px;padding:5px 16px;width:256px;min-width:fit-content;border-top-right-radius:20px;border-bottom-right-radius:20px;position:relative
}
.ser-overlay .card-title{filter:drop-shadow(2px 4px 6px #000)}
.about-font{line-height:24px;font-size:16px;font-weight: 700 !important;}

/* Blog/media */
.certi-img img{height:250px;filter:drop-shadow(2px 4px 6px #000);width:100%;object-fit:contain;box-shadow:5px 5px 10px 0 #0000}
.img-from-slider{max-width:70vw;padding:0;margin:0;height:84px;max-height:84px}

/* Lightbox */
.lb-modal{
  display:none;position:fixed;z-index:9999;padding-top:50px;left:0;top:0;width:100%;height:100%;overflow:auto;
  background:#ffffff0f!important;backdrop-filter:blur(5px)!important;box-shadow:0 0 10px 1px #00000040
}
.lb-modal-content{margin:auto;display:block;width:80%;max-width:95vw}
.lb-modal-content img{height:100%;display:block;margin:auto;max-height:calc(100vh - 55px);width:auto;object-fit:contain;max-width:85vw}
.lb-close{position:absolute;top:15px;right:35px;color:#fff;font-size:40px;font-weight:bold;transition:.3s;cursor:pointer}
.lb-close:hover,.lb-close:focus{color:#bbb;text-decoration:none;cursor:pointer}

/* Address link hover */
.ptr-right{padding-right:4rem}
.address-card a:hover{
  color:var(--primary)!important;font-weight:900;filter:drop-shadow(2px 4px 6px #fff);
  text-decoration:underline;text-underline-position:under;text-decoration-style:double
}

/* Logo main layout */
.logo-main-container{display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}

/* Blog image */
.img-blog{margin:10px 25px 30px 0;height:300px;border-radius:20px}
.grayscale-img{}
.img-logo-shipbuid{margin:-15px!important}

/* Media overlay (CUSTOM values override template) */
.media-item .media-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  background:rgb(0 0 0 / 0%);overflow:hidden;opacity:1;transition:.5s
}
.media-item .media-overlay img{width:100%!important;max-height:65vh!important;object-fit:cover!important;object-position:top!important}

/* Video gallery block */
.booklet-title{padding:10px 27px;margin:10px;position:relative;background:var(--primary);border-radius:6px;display:flex;justify-content:center}
.video-desc-cs{
  padding:15px;position:relative;bottom:0;width:100%;height:25%;display:flex;flex-flow:column wrap;justify-content:space-between;
  border-radius:0 0 25px 25px;min-height:150px;background-color:rgba(var(--primary-rgb), .7)!important;backdrop-filter:blur(5px)!important
}
.video-galllery, .video-galllery-2{margin:0 -20px}
.video-galllery .slick-slide, .video-galllery-2 .slick-slide{padding:0 10px}
.parent-video-gallery{position:relative}
.logo-wrapper img{max-width:180px;margin:0 auto}
.video-desc-cs .title{font-size:20px;line-height:26px}

/* Blog slider */
.blogs-slider{margin:0 -20px}
.blogs-slider .slick-slide{padding:0 10px}
.blogs-slider .card-body{min-height:303px;display:flex;flex-direction:column;justify-content:space-between}

/* Client swiper (marquee-like) */
.client-swiper{overflow:hidden}
.client-swiper .swiper{background:#000}
.client-swiper .swiper-wrapper{transition-timing-function:linear}
.client-swiper .swiper-slide{
  width:auto;text-align:center;display:flex;align-items:center;padding:20px 30px;overflow:hidden;background-position:center;background-size:cover
}
.client-swiper .swiper-slide img{margin:10px;max-width:200px;max-height:100px}
.client-swiper .swiper-container-free-mode>.swiper-wrapper{transition-timing-function:linear;align-items:center}

/* Services v1/v2 */
.serviceV1 .glass-card{
  border-radius:16px;backdrop-filter:blur(10px);background:rgba(9,24,83,.6);box-shadow:0 8px 32px rgba(0,0,0,.2);
  position:relative;overflow:hidden;transition:transform .3s ease, box-shadow .3s ease
}
.serviceV1 .glass-card:hover{transform:translateY(-5px);box-shadow:0 12px 42px rgba(0,0,0,.35)}
.serviceV1 .glass-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.5);z-index:1}
.serviceV1 .glass-card-content{position:relative;z-index:2;padding:2rem;display:flex;flex-direction:column;justify-content:center;height:100%;text-align:center}
.serviceV1 .service-icon i{font-size:2rem;color:#fff;background:rgba(255,255,255,.1);padding:1rem;border-radius:50%;box-shadow:0 4px 12px rgba(255,255,255,.15)}
.serviceV1 .btn-outline-light:hover{background:#fff;color:#091853}

.serviceV2 .services-section{min-height:100vh;padding:4rem 1rem}
.serviceV2 .services-header{text-align:center;margin-bottom:3rem}
.serviceV2 .services-header .sub-title{
  display:inline-block;background:rgba(255,255,255,.08);padding:.4rem 1rem;border-radius:50px;font-size:.9rem;letter-spacing:1px;
  text-transform:uppercase;border:1px solid rgba(255,255,255,.2)
}
.serviceV2 .services-header h1{font-size:2.5rem;font-weight:700;margin-top:1rem}
.serviceV2 .service-card{overflow:hidden;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.4);margin-bottom:2rem}
.serviceV2 .service-image{height:220px;background-size:cover;background-position:center;position:relative}
.serviceV2 .service-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}
.serviceV2 .service-overlay i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}
.serviceV2 .service-overlay h4{font-size:1.5rem;font-weight:600;margin:0}
.serviceV2 .service-content{
  background:var(--glass-bg);border-top:1px solid var(--glass-border);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  padding:1.5rem;text-align:center
}
.serviceV2 .service-content p{font-size:.95rem;opacity:.9}
.serviceV2 .service-content .btn{margin-top:1rem;color:#fff;border-color:rgba(255,255,255,.3)}
.serviceV2 .service-content .btn:hover{background:#fff;color:var(--primary-color)}

/* Services section overlay text/buttons */
#services .card-bottom{height:100px}
#services .card-bottom .card-text{
  position:absolute;bottom:30px;padding-left:15px;font-size:x-large;filter:drop-shadow(2px 4px 6px #000);margin-bottom:16px
}
#services .card-bottom .btn.btn-primary{position:absolute;bottom:-10px;right:15px;border-radius:25px!important}
#services .card-title i.fas{margin:0 11px}
#services .card{background:#091853b3!important;backdrop-filter:blur(5px)!important}

/* Layer separators & layout helpers */
.layer-sep-overlay{transform:translateY(-50%);position:absolute;top:0;left:0;width:100%;z-index:1}
#contact .data-sections{position:relative;z-index:1}
#services.keep-center{display:flex;flex-direction:column;justify-content:center}
.video-galllery-2 .slick-slide, .video-galllery .slick-slide{padding:0 10px}
.parent-video-gallery{position:relative;overflow:hidden;border-radius:25px;margin:0}

/* Gradient menu bar & section fades */
.navbar-gd-bg{
  background:linear-gradient(to bottom, var(--primary2) 15%, #ffffff00);
  margin-top:0;padding-top:10px!important;height:175px;padding-bottom:90px!important
}
.top-gd-bg{
  background:linear-gradient(to bottom, var(--primary2) 4%, var(--primary2) 15%, #ffffff00);height:50px
}
.bottom-gd-bg{
  background:linear-gradient(to top, var(--primary2) 4%, var(--primary2) 15%, #ffffff00);height:50px
}
.gradient-bottom::after{
  content:"";position:absolute;bottom:0;left:0;width:100%;height:150px;
  background:linear-gradient(to top, var(--primary2) 0px, var(--primary2) 50px, rgba(var(--primary2-rgb), .7) 100%);pointer-events:none
}
.gradient-top::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:150px;
  background:linear-gradient(to bottom, var(--primary2) 0px, var(--primary2) 50px, rgba(var(--primary2-rgb), .7) 100%);pointer-events:none
}
.mtop{margin-top:100px!important}
.mbottom{margin-bottom:100px!important}
.div-layer-separeter{
  background:linear-gradient(
    360deg,
    rgba(var(--primary2-rgb),0) 0%,
    rgba(var(--primary2-rgb),.6) 22%,
    rgba(var(--primary2-rgb),.8) 33%,
    rgba(13,21,43,1) 50%,
    rgba(var(--primary2-rgb),.77) 66%,
    rgba(var(--primary2-rgb),.51) 81%,
    rgba(var(--primary2-rgb),0) 100%
  )
}

/* Hero center text stack */
.hero-center-part{top:50%;left:50%;transform:translate(-50%, -50%)}
.main-logo-part{display:flex;flex-direction:column;align-items:center}
.main-logo-part .center-line{
  height:2px;color:#fff;opacity:1;width:calc(367px * .73);margin:36px 0!important
}
.main-logo-part .services{
  font-size:30px;display:flex;flex-direction:row;align-items:flex-start;padding:0 30px;color:#fff;
  border:1px solid rgb(255 255 255 / 20%)!important;background:rgb(255 255 255 / 10%)!important;
  box-shadow:0 4px 30px rgb(0 0 0 / 10%)!important;backdrop-filter:blur(18px)!important;border-radius:50px
}
.main-logo-part .services .service{margin-top:5px;font-weight:600;filter:drop-shadow(2px 4px 6px #000)}
.main-logo-part .vertical-line{background:#fff}

/* Infinite logo ticker */
.wrapper{
  margin-top:2rem;width:98%;max-width:1536px;margin-inline:auto;height:100px;position:relative;overflow:hidden;
  mask-image:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0))
}
@keyframes scrollLeft{to{left:-200px}}
@keyframes scrollRight{to{right:-200px}}
.itemLeft, .itemRight{
  width:200px;height:100px;display:flex;justify-content:center;align-items:center;color:#fff;
  background:rgba(var(--primary-rgb), .9)!important;box-shadow:0 4px 30px rgb(0 0 0 / 10%)!important;backdrop-filter:blur(18px)!important;
  border-radius:6px;position:absolute;animation-timing-function:linear;animation-duration:30s;animation-iteration-count:infinite
}
.itemLeft img, .itemRight img{max-height:90px!important;max-width:180px!important;object-fit:contain}
.itemLeft{left:max(calc(200px * 8), 100%);animation-name:scrollLeft}
.itemRight{right:max(calc(200px * 8), calc(100% + 200px));animation-name:scrollRight}
.item1{animation-delay:calc(30s / 8 * 7 * -1)}
.item2{animation-delay:calc(30s / 8 * 6 * -1)}
.item3{animation-delay:calc(30s / 8 * 5 * -1)}
.item4{animation-delay:calc(30s / 8 * 4 * -1)}
.item5{animation-delay:calc(30s / 8 * 3 * -1)}
.item6{animation-delay:calc(30s / 8 * 2 * -1)}
.item7{animation-delay:calc(30s / 8 * 1 * -1)}
.item8{animation-delay:calc(30s / 8 * 0 * -1)}

/* Towage specifics */
.towage .table-warpper{border-radius:24px;border:1px solid #fff}
.towage .title-our-fleet{line-height:1.21875rem;padding-top:5px}
img.img-fluid.img-vid.border-all.towage{height:50vw;max-height:80vh;width:100%;object-fit:cover}

/* Sections */
.yem .row{overflow:hidden}
.linkedin-ifream{max-width:100vw;height:95vh;background:#fff;border-radius:25px}
.h-50-px{height:50px}

/* ===========================
   RESPONSIVE CONSOLIDATION
   =========================== */

/* <= 576px */
@media (width <= 576px){
  .sub-logo{width:99px!important;max-height:60px}
  .logo-top-left{height:75px;padding:5px 0 5px 5px}
  .icon-to-right{right:60px;position:absolute}
  .item-text{height:60px}
}

/* <= 572px (kept because used distinctly) */
@media (width <= 572px){
  .video-desc-cs{background:var(--primary);padding:15px;width:100%;height:25%;position:unset;min-height:140px;display:flex;flex-flow:column wrap;justify-content:center;border-radius:0 0 25px 25px!important}
  .videyo-ga .media-overlay img{border-radius:unset!important}
  .about-font{line-height:22px;font-size:14px;font-weight: 700 !important;}
  .img-from-slider{max-width:70vw;padding:0;margin:0;height:44px!important}
  .logo-main-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:93vw}
}

/* <= 768px */
@media (width <= 768px){
  .header-carousel .owl-carousel-item{position:relative;min-height:600px}
  .header-carousel .owl-carousel-item img{position:absolute;width:100%;height:100%;object-fit:cover}
  .header-carousel .owl-carousel-item p{font-size:16px!important}
  .img-from-slider{max-width:70vw;padding:0;margin:0;height:44px!important}
  .main-logo-part .center-line{width:calc(367px * .5)}
  .main-logo-part .services{font-size:18px;align-items:center}
  .main-logo-part .services .vertical-line{width:1px;height:20px}
}
.for-all-slider {
    transform: translateY(-50%);
}
/* <= 767px */
@media (width <= 767px){
  .border-cc-left{border-left:2px solid #8080804f;padding-left:12px;border-radius:2px;top:.25em;height:calc(100% - 1.1em)}
  .bg-full{background:#f7f7f7!important}
  .logo-m{height:80px;width:auto;position:absolute;top:0}
  .text-cen{text-align:center!important}
  .header-carousel .owl-carousel-item{position:relative;min-height:100vh!important}
  .header-carousel .owl-carousel-item img{position:relative!important}
  .border-end-menu{border-right:0 solid #dee2e6!important}
  .navbar-toggler:focus{box-shadow:0 0 0 .25rem transparent!important}
  .con-h{height:auto!important}
  .for-all-slider{position:absolute!important;z-index:2;height: 360px;width: auto;top: calc(50% - 62px);}
}

/* >= 768px (desktop-ish) */
@media (width >= 768px){
  .nav-float-left{float:left!important;padding-left:100px}
  .logo-d{height:160px;width:auto;position:absolute;top:10px;left:7px}
  .navbar .navbar-nav .nav-link{padding:10px!important}
  /* .for-all-slider{position:absolute;top:23vh;left:calc((100vw - 368px) / 2);z-index:2} */
  .for-all-slider{position:absolute;top:calc(50% - 70px);left:calc((100vw - 368px) / 2);z-index:2}
  .for-vh{max-height:44vh;height:100%}
}

/* 768px+ extras */
@media (width >= 768px){
  #footer .footer-links{flex-direction:row}
  .border-cc-left{border-left:2px solid #fffc;padding-left:23px;border-radius:7px;top:.25em;height:calc(100% - 1em)}
  .slant-backword{clip-path:polygon(33% 0, 100% 0, 100% 100%, 0% 100%)}
  .slant-forword{clip-path:polygon(0% 0, 100% 0, 100% 100%, 33% 100%)}
  .col-poly-one.last{clip-path:polygon(39% 0, 100% 0, 100% 49%, 100% 100%, 39% 100%, 0% 50%)}
  .jrny-card{display:flex;flex-direction:row}
  .jrny-card-img{border-top-left-radius:5px;backdrop-filter:invert(1) drop-shadow(2px 40px 26px #000);filter:drop-shadow(2px 4px 6px rgba(78,71,71,.329));padding:30px}
}

/* <= 500px (hero text) */
@media (width <= 500px){
  .Maya-one{font-size:80px!important;color:#fff}
  .Maya-two{font-size:15px!important;color:#fff;bottom:-5vh}
  .header-carousel .owl-nav .owl-prev,
  .header-carousel .owl-nav .owl-next{font-size:24px!important}
  .header-carousel .owl-nav{width:40px!important;height:40px!important;margin:-20px auto 0!important}
  .team-img-mm{height:100px!important;width:100px!important}
  .font-ite-mb{font-size:18px;line-height:22px}
}

/* 576+ offcanvas widths */
@media (width >= 576px){.navbar-expand-sm .navbar-toggler{display:block}.offcanvas-custom-size{height:100vh;width:70vw}}
@media (width >= 768px){.navbar-expand-md .navbar-toggler{display:block}.offcanvas-custom-size{height:100vh;width:50vw}}
@media (width >= 992px){
  .navbar-expand-lg .navbar-toggler{display:block}
  .offcanvas-custom-size{height:100vh;width:40vw}
  .min-vh-100{min-height:100vh}
  .vh100{height:100vh}
  .max-vh100{max-height:100vh}
  .vh50{height:50vh}
  .max-vh50{max-height:50vh}
  .vid-loc{height:50vh;min-width:100%;max-width:100%;object-fit:cover;z-index:-1}
  .top-bg-vid{height:80vh!important;margin:10vh 0 10vh 0}
}
@media (width >= 1560px){
  .pad-ser{max-width:27%!important}
  .pad-ser-2{max-width:43%!important}
}
@media (width <= 991.98px){
  .navbar .navbar-nav{margin-top:0!important;border-top:0!important;padding-top:0!important;text-align:left;padding-left:10px}
  .navbar-collapse{padding-top:10px}
  .navbar-toggler{padding:.35rem;font-size:12px}
}
@media (width >= 1200px){.navbar-expand-xl .navbar-toggler{display:block}.offcanvas-custom-size{height:100vh;width:30vw}}
@media (width >= 1400px){.navbar-expand-xxl .navbar-toggler{display:block}.offcanvas-custom-size{height:100vh;width:25vw}}

/* Desktop-only separators inside slick slides */
@media (width >= 576px){
  #logo-container .slick-slide:not(:last-child)::after{
    content:"";position:absolute;top:0;right:0;height:100%;width:2px;background:#ddd;opacity:.6;max-height:calc(100% - 26px);margin-top:11px
  }
}


.padding-150 {
    padding-bottom: 150px;
}

.mtop16vw {
    margin-top: 16vw !important;
}

.footer-bg {
        background: linear-gradient(to top, var(--primary2) 35%, #ffffff00);
    padding-top: 15% !important;
}
@media (width <=768px) {
    .footer-bg {
        background: linear-gradient(to top,
                var(--primary2) 70%,
                rgba(11, 19, 50, 0.9) 80%,
                rgba(11, 19, 50, 0.5) 90%,
                rgba(11, 19, 50, 0.1) 96%,
                rgba(11, 19, 50, 0) 100%);
        backdrop-filter: blur(1px);
    }
}

/* ============================
   PREMIUM LEDGER (SCOPED / FINAL)
   ============================ */
.mm-ledger{
  --mm-navy: var(--primary);           /* #091853 */
  --mm-navy2: var(--primary2);         /* #0b1332 */
  --mm-ink: var(--primary-dark);       /* #040b25 */
  --mm-white: var(--white);
  --mm-row-bg: rgba(255,255,255,.48);  /* glassy */
  --mm-row-br: rgba(255,255,255,.20);
  --mm-row-br-hover: rgba(255,255,255,.30);
}

/* Header bar: navy bg + white text */
.mm-ledger__head.mm-ledger__track{
  display:grid; grid-template-columns: 2fr 1.8fr 2.8fr .7fr; gap:0.75rem;
  background: var(--mm-navy); color: var(--mm-white);
  border-radius: 14px; padding: .85rem 1rem; font-weight: 700;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.mm-ledger__track .mm-col{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (max-width: 767.98px){
  .mm-ledger__head.mm-ledger__track{ grid-template-columns: 1.5fr 1fr; }
}

/* list container */
.mm-ledger__list{ margin-top:.8rem; }

/* row: transparent, glass, premium; NAVY text */
.mm-row{
  position:relative; border-radius:16px; overflow:hidden; margin:-10px 0;
  background: var(--mm-row-bg); color: var(--mm-navy);
  border:1px solid var(--mm-row-br);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  font-size: 16px;
  font-weight: 900;
}
.mm-row:hover{
  transform: translateY(-1px);
  border-color: var(--mm-row-br-hover);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

/* left accent by tag */
.mm-row::before{
  content:""; position:absolute; inset:0 0 0 0; pointer-events:none; border-left:5px solid transparent;
}
.mm-row.tag-fire::before{ border-left-color:#ff6b6b }
.mm-row.tag-ground::before{ border-left-color:#4dd0e1 }
.mm-row.tag-drift::before{ border-left-color:#ffd166 }
.mm-row.tag-tow::before{ border-left-color:#7ed957 }
.mm-row.tag-derelict::before{ border-left-color:#a78bfa }
.mm-row.tag-failure::before{ border-left-color:#f59e0b }

/* summary line */
.mm-row summary{
  list-style:none; outline:none; padding:.85rem 1rem; position:relative; cursor:pointer;padding-right: 40px;
}
.mm-row summary::-webkit-details-marker{display:none}

/* +/- indicator – show on mobile/tablet ONLY (hide ≥992px) */
/* +/- indicator – show on ALL sizes */
.mm-row summary{
  list-style:none; outline:none; padding:.85rem 1rem; position:relative; cursor:pointer; padding-right:40px;
}
.mm-row summary::-webkit-details-marker{ display:none }

.mm-row summary::after{
  content:"\f067"; /* fa-plus */
  font:900 14px/1 "Font Awesome 5 Free";
  color: var(--mm-navy);
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:rgba(9,24,83,.08); border:1px solid rgba(9,24,83,.18);
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.mm-row[open] summary::after{ content:"\f068"; } /* fa-minus */

/* desktop grid inside summary */
.mm-row__grid{
  display:grid; grid-template-columns: 2fr 1.8fr 2.8fr .7fr; gap:.75rem; align-items:center;
}
@media (max-width: 767.98px){ .mm-row__grid{ grid-template-columns: 1.5fr 1fr; } }
.mm-row .mm-col{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* reveal body (mobile-first). Hidden on md+ */
.mm-row__more{
  padding:1rem 1rem .95rem 1rem; display:grid; gap:.45rem;
  border-top:1px dashed rgba(9,24,83,.28);
  background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.65));
}
.mm-line{display:flex; align-items:center; justify-content:space-between; gap:.75rem}
.mm-line .label{font-weight:700; color: var(--mm-navy)}
.mm-line .value{color: var(--mm-ink)}
@media (min-width: 768px){ .mm-row__more{ display:none } }

/* icon color = NAVY (not white) */
.mm-icon{ color: var(--mm-navy); opacity:.95 }
.mm-icon::before {
    /* box-shadow: 5px 5px 5px 5px black; */
    filter: drop-shadow(2px 4px 6px #050e32);
}
/* small polish */
.mm-ledger .fw-semibold{ font-weight:700 }
/* =========================================
   PREMIUM LEDGER — ICON COLORS BY TAG
   (Replace the old left-border accent)
   ========================================= */
.mm-ledger{
  /* theme from your root */
  --navy: var(--primary, #091853);
  --navy-rgb: var(--primary-rgb, 9,24,83);

  /* per-tag palettes */
  --tag-fire:       #FF3B30;  --tag-fire-rgb: 255,59,48;
  --tag-drift:      #F6C445;  --tag-drift-rgb: 246,196,69;
  --tag-ground:     #1F6F86;  --tag-ground-rgb: 31,111,134;
  --tag-tow:        #2E7D32;  --tag-tow-rgb: 46,125,50;
  --tag-derelict:   #4B3FA5;  --tag-derelict-rgb: 75,63,165;
  --tag-failure:    #BB6B00;  --tag-failure-rgb: 187,107,0;

  /* default ring color (if no tag) */
  --ring-rgb: var(--navy-rgb);
}

/* every icon gets a circular border + glow */
.mm-ledger .mm-icon{
  display:inline-grid; place-items:center;
  width:2.25rem; height:2.25rem; min-width:2.25rem;
  border-radius:50%;
  border:2px solid currentColor;                /* ✅ visible border on ALL icons */
  background:
    radial-gradient(circle at 50% 40%,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.10) 45%,
      rgba(var(--navy-rgb), .12) 100%);         /* glassy badge fill */

}


/* tag-driven color + ring (icon uses currentColor; ring uses --ring-rgb) */
.mm-ledger .mm-row.tag-fire     { --ring-rgb: var(--tag-fire-rgb);     }
.mm-ledger .mm-row.tag-drift    { --ring-rgb: var(--tag-drift-rgb);    }
.mm-ledger .mm-row.tag-ground   { --ring-rgb: var(--tag-ground-rgb);   }
.mm-ledger .mm-row.tag-tow      { --ring-rgb: var(--tag-tow-rgb);      }
.mm-ledger .mm-row.tag-derelict { --ring-rgb: var(--tag-derelict-rgb); }
.mm-ledger .mm-row.tag-failure  { --ring-rgb: var(--tag-failure-rgb);  }

.mm-ledger .mm-row.tag-fire     .mm-icon{ color: var(--tag-fire)     !important; }
.mm-ledger .mm-row.tag-drift    .mm-icon{ color: var(--tag-drift)    !important; }
.mm-ledger .mm-row.tag-ground   .mm-icon{ color: var(--tag-ground)   !important; }
.mm-ledger .mm-row.tag-tow      .mm-icon{ color: var(--tag-tow)      !important; }
.mm-ledger .mm-row.tag-derelict .mm-icon{ color: var(--tag-derelict) !important; }
.mm-ledger .mm-row.tag-failure  .mm-icon{ color: var(--tag-failure)  !important; }

/* if any utility like .text-white lands on <i>, keep our color */
.mm-ledger .mm-icon.text-white{ color:inherit !important; }

/* make sure no old left-border accent shows */
.mm-ledger .mm-row::before{ border-left-color: transparent !important; }

/* === MOBILE: icon left, vessel (line 1) + criticality (line 2) right === */
@media (max-width: 767.98px){
  .mm-ledger{ --mm-icon-size: 2.25rem; --mm-mobile-gap: 12px; }

  /* 2-col grid: [icon | text] stacked rows */
  .mm-row .mm-row__grid.d-block.d-md-none{
    display: grid !important;
    grid-template-columns: var(--mm-icon-size) 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--mm-mobile-gap);
    row-gap: 4px;
    align-items: start;
    position: relative; /* anchor the absolute icon here */
  }

  /* right side, line 1 */
  .mm-row .mm-row__grid.d-block.d-md-none .mm-col.vessel{
    grid-column: 2; grid-row: 1;
    position: static;            /* let the icon anchor to the grid, not this cell */
    padding-left: 0;
  }

  /* right side, line 2 (2-line clamp) */
  .mm-row .mm-row__grid.d-block.d-md-none .mm-col.criticality{
    grid-column: 2; grid-row: 2;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
  }

  /* place the real FA icon into the left column (no markup change) */
  .mm-row .mm-row__grid.d-block.d-md-none .mm-col.vessel .mm-icon{
    position: absolute;
    left: 0;                 /* sits in the icon column */
    top: 0.1rem;
    width: var(--mm-icon-size);
    height: var(--mm-icon-size);
    z-index: 2;
    margin: 0 !important;    /* ignore Bootstrap .me-2 */
  }
}


/* Premium Tooltip */
.custom-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 280px;
  background: rgba(30, 30, 60, .92);
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  font: 500 13px/1.35 system-ui, sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: scale(.95);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.custom-tooltip.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.custom-tooltip[data-theme="light"] {
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.1);
}



/* hide by default */
.mm-row__more { display: none; }

/* show when <details> is open — works on ALL screen sizes */
.mm-row[open] .mm-row__more {
  display: grid !important;   /* keep your grid reveal styling */
}

/* keep the summary clickable everywhere */
.mm-row summary { cursor: pointer; }
@media (min-width: 768px) {
  .mm-row__more { display: none; } /* your existing rule */
  .mm-row[open] .mm-row__more { display: grid !important; } /* override when open */
}


/* base element */
[data-tooltip] {
  position: relative;
  cursor: pointer;
}

/* tooltip bubble */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%; /* show above */
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.95),
    rgba(var(--primary2-rgb), 0.95)
  );
  color: var(--light);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 1000;

  /* premium polish */
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  backdrop-filter: blur(6px) saturate(130%);
  -webkit-backdrop-filter: blur(6px) saturate(130%);
  border: 1px solid rgba(255,255,255,.12);
}

/* fade in on hover */
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-12px);
}

/* optional arrow */
[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 6px);
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(var(--primary-rgb), 0.95) transparent transparent transparent;
  opacity: 0;
  transition: opacity .2s ease;
}

[data-tooltip]:hover::before {
  opacity: 1;
}


.footer-logos {
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 22px;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* ============================
   CERTIFICATE CARDS & MODAL
   ============================ */

.luxury-cert-card {
    position: relative;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    box-shadow: 
        0 2px 4px rgba(38, 48, 110, 0.03),
        0 8px 16px rgba(38, 48, 110, 0.06),
        0 16px 32px rgba(38, 48, 110, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(255, 255, 255, 0.5);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.luxury-cert-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.6) 0%, 
        rgba(255, 255, 255, 0) 50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.luxury-cert-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 
        0 4px 8px rgba(38, 48, 110, 0.05),
        0 16px 32px rgba(38, 48, 110, 0.1),
        0 32px 64px rgba(38, 48, 110, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.85);
}

.luxury-cert-card:hover::before {
    opacity: 1;
}

/* Animated Border Glow */
.card-border-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        rgba(38, 48, 110, 0.4), 
        rgba(212, 175, 55, 0.4), 
        rgba(38, 48, 110, 0.4), 
        rgba(212, 175, 55, 0.4));
    background-size: 300% 300%;
    border-radius: 24px;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
    animation: borderGlow 3s ease infinite;
    filter: blur(4px);
}

.luxury-cert-card:hover .card-border-glow {
    opacity: 1;
}

@keyframes borderGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Image Container */
.cert-image-link {
    display: block;
    text-decoration: none;
    flex: 1;
    position: relative;
    z-index: 2;
}

.cert-image-container {
    position: relative;
    padding: 48px 36px;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Adaptive Background - Changes based on image orientation */
.cert-image-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all 0.5s ease;
}

.cert-image-premium {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    position: relative;
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: 
        drop-shadow(0 8px 20px rgba(38, 48, 110, 0.12))
        drop-shadow(0 3px 8px rgba(38, 48, 110, 0.08));
}

.luxury-cert-card:hover .cert-image-premium {
    transform: scale(1.1) translateY(-6px);
    filter: 
        drop-shadow(0 12px 30px rgba(38, 48, 110, 0.18))
        drop-shadow(0 5px 12px rgba(38, 48, 110, 0.12));
}

/* Title Container - Glass Effect */
.cert-title-container {
    position: relative;
    padding: 28px 24px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.cert-title-wrapper {
    flex: 1;
    text-align: center;
    padding-right: 36px;
}

.cert-title-premium {
    font-size: 1.1rem;
    font-weight: 700;
    color: #26306E;
    margin: 0 0 12px 0;
    line-height: 1.4;
    letter-spacing: -0.02em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Gold Accent Line */
.cert-accent-line {
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #D4AF37 50%, 
        transparent 100%);
    margin: 0 auto;
    border-radius: 2px;
    box-shadow: 
        0 2px 8px rgba(212, 175, 55, 0.3),
        0 1px 2px rgba(212, 175, 55, 0.5);
    transition: all 0.4s ease;
}

.luxury-cert-card:hover .cert-accent-line {
    width: 70px;
    box-shadow: 
        0 3px 12px rgba(212, 175, 55, 0.5),
        0 1px 3px rgba(212, 175, 55, 0.7);
}

/* Info Button */
.cert-info-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #26306E 0%, #1a2255 100%);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 
        0 4px 12px rgba(38, 48, 110, 0.25),
        0 2px 6px rgba(38, 48, 110, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.cert-info-btn:hover {
    transform: translateY(-50%) scale(1.2) rotate(10deg);
    box-shadow: 
        0 6px 20px rgba(38, 48, 110, 0.35),
        0 3px 10px rgba(38, 48, 110, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #1a2255 0%, #26306E 100%);
}

/* Premium Modal */
.cert-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cert-modal.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.cert-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 34, 85, 0.94);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.cert-modal-content {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border-radius: 32px;
    max-width: 580px;
    width: 100%;
    box-shadow: 
        0 20px 60px rgba(0,0,0,0.3),
        0 40px 100px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,1);
    animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1.5px solid rgba(255,255,255,0.8);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(80px) scale(0.85);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.cert-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(38, 48, 110, 0.1);
    backdrop-filter: blur(10px);
    color: #26306E;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(38, 48, 110, 0.1);
}

.cert-modal-close:hover {
    background: #26306E;
    color: #fff;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 16px rgba(38, 48, 110, 0.3);
}

.cert-modal-body {
    padding: 64px 52px 52px;
    text-align: center;
}

.cert-modal-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 32px;
    background: linear-gradient(135deg, #26306E 0%, #1a2255 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #fff;
    box-shadow: 
        0 12px 32px rgba(38, 48, 110, 0.35),
        0 6px 16px rgba(38, 48, 110, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 0.2);
}

.cert-modal-title {
    font-size: 1.85rem;
    font-weight: 700;
    color: #26306E;
    margin-bottom: 24px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.cert-modal-divider {
    width: 90px;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #D4AF37 50%, 
        transparent 100%);
    margin: 0 auto 32px;
    border-radius: 2px;
    box-shadow: 0 2px 12px rgba(212, 175, 55, 0.4);
}

.cert-modal-desc {
    font-size: 1.1rem;
    color: #5a6c7d;
    line-height: 1.8;
    margin-bottom: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .cert-modal-content {
        max-width: 100%;
        margin: 20px;
        border-radius: 24px;
    }
    .cert-modal-body {
        padding: 52px 32px 40px;
    }
    .cert-title-premium {
        font-size: 1rem;
    }
    .cert-title-wrapper {
        padding-right: 32px;
    }
    .cert-image-container {
        min-height: 240px;
        padding: 40px 28px;
    }
    .cert-image-premium {
        max-height: 180px;
    }
}