/* Shared responsive refinements */
img { max-width: 100%; height: auto; }
.header-upper .logo-box .logo { margin: 0; }
.header-upper .header-img { display: block; }
.home-hero-image { position: relative; display: flex; align-items: center; min-height: 300px; }
.home-hero-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,30,52,.88), rgba(4,30,52,.35)); }
.hero-copy { position: relative; z-index: 1; color: white; width: min(90%, 1200px); margin: auto; }
.hero-copy h1 { color: white; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.15; }
.hero-copy p { color: white; font-size: clamp(1rem, 2vw, 1.3rem); margin: 1rem 0 1.5rem; }
.hero-copy a { display: inline-block; margin: 0 .5rem .5rem 0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #f9aa30; outline-offset: 3px; }
@media (max-width: 767px) { .home-hero-image { min-height: 340px; background-position: center; } .header-upper .header-img { max-height: 70px; } .home_card, .work_process, .kamal-img { position: static !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.hero-picture, .hero-picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-picture img { object-fit: cover; object-position: center; }
.home-hero-image::before { z-index: 1; pointer-events: none; }
.hero-copy { z-index: 2; }
button.mobile-nav-toggler, .mobile-menu button.close-btn, button.dropdown-btn { border: 0; background: transparent; cursor: pointer; }
@media (max-width: 1199px) {
  .kamal-img { left: 0 !important; max-width: 100%; }
  .boxed_wrapper { overflow-x: clip; }
}
@media (max-width: 1199px) {
  .mobile-nav-toggler { left: calc(100vw - 80px) !important; }
}
@media (max-width: 1199px) {
  .header-upper .header-img, .kamal-img { margin-left: 0 !important; }
}
@media (max-width: 767px) {
  .home-hero-image { height: auto !important; min-height: 420px !important; padding: 32px 0; }
  .hero-copy h1 { font-size: clamp(1.75rem, 7vw, 2.2rem); }
  .service-section .sec-title h2 { font-size: clamp(1.6rem, 7vw, 2.1rem); line-height: 1.25; overflow-wrap: anywhere; }
}

/* Compact the shared header while keeping the existing navigation and branding. */
.main-header.style-two .header-upper .logo { padding: 4px 0 !important; }
.main-header.style-two .header-upper .header-img { margin: 0 auto !important; max-height: 74px !important; width: auto !important; }
.main-header.style-two .header-top .top-inner { min-height: 0; }
.main-header.style-two .header-upper .navigation > li > a { padding-top: 12px !important; padding-bottom: 12px !important; }
.home-hero-image { height: clamp(340px, 32vw, 560px) !important; }
@media (max-width: 1199px) {
  .main-header.style-two { display: flex; flex-wrap: wrap; align-items: center; }
  .main-header.style-two .header-top { flex: 0 0 100%; width: 100%; }
  .main-header.style-two > .header-upper { width: auto; }
  .main-header.style-two > .header-upper:nth-of-type(2) { flex: 1 1 0; min-width: 0; }
  .main-header.style-two > .header-upper:nth-of-type(3) { flex: 0 0 64px; }
  .main-header.style-two .header-upper .large-container { padding: 0 12px; }
  .main-header.style-two .header-upper .logo-box { float: none !important; }
  .main-header.style-two .header-upper .logo { padding: 6px 0 !important; }
  .main-header.style-two .header-upper .header-img { max-width: 100%; max-height: 65px !important; }
  .main-header.style-two .header-upper .menu-area { float: none !important; }
  .main-header.style-two .header-upper .main-menu, .main-header.style-two .sticky-header { display: none !important; }
  .main-header.style-two .menu-area .mobile-nav-toggler { display: block !important; left: auto !important; margin: 0 !important; padding: 10px; }
  .main-header.style-two .header-top .top-inner { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap: 0 16px; }
  .main-header.style-two .header-top .top-left, .main-header.style-two .header-top .top-right { float:none !important; width:auto !important; }
  .mobile-menu .menu-box { width: min(300px, 90vw); }
}
@media (max-width: 767px) {
  .main-header.style-two .header-top .support { font-size: 13px; line-height: 1.5; }
  .main-header.style-two .header-upper .header-img { max-height: 54px !important; }
  .home-hero-image { height: auto !important; min-height: 360px !important; padding: 32px 0; }
}
.hero-picture img { margin: 0 !important; }
@media (max-width: 1199px) {
  .main-header.style-two .header-top { min-width: 100%; }
  .main-header.style-two > .header-upper:nth-of-type(2) { flex: 1 1 calc(100% - 80px); }
}
.main-header.style-two .header-top { padding: 5px 0 !important; }
.main-header.style-two .header-top .social-links { margin: 0 !important; }
.main-header.style-two .header-top .top-left { margin: 0 !important; }
.main-header.style-two .header-upper .navigation > li { padding: 0 !important; }
.main-header.style-two .header-upper .navigation > li > a { padding-top: 9px !important; padding-bottom: 9px !important; }
@media (max-width: 767px) {
  .main-header.style-two .header-top .social-links { padding-right: 0 !important; }
  .main-header.style-two .header-top .top-inner { gap: 0 10px; }
  .main-header.style-two .header-top .support { text-align: center; }
}
@media (max-width: 1199px) {
  body:not(.mobile-menu-visible) .mobile-menu { display: none; }
}
@media (max-width: 767px) {
  .about-section .image-box img { margin-left: 0 !important; }
}
@media (max-width: 767px) {
  .about-section img, .skills-section img { margin-left: 0 !important; }
}
/* Mobile drawer: the existing cloned navigation, with native independent scrolling. */
@media (max-width: 1199px) {
  body:not(.mobile-menu-visible) .mobile-menu { display: block; }
  body.mobile-menu-visible { overflow: hidden !important; }
  .mobile-menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; padding: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s; }
  body.mobile-menu-visible .mobile-menu { opacity: 1; visibility: visible; pointer-events: auto; }
  .mobile-menu .menu-backdrop { inset: 0; width: 100%; height: 100%; transform: none; opacity: 0; background: #061c30; transition: opacity .2s ease; }
  body.mobile-menu-visible .mobile-menu .menu-backdrop { opacity: .65; transform: none; }
  .mobile-menu .menu-box { position: absolute; left: auto; right: 0; top: 0; width: min(360px, 88vw); height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: #087b94; padding: 0 0 20px; transform: translateX(100%); transition: transform .25s ease; -webkit-overflow-scrolling: touch; }
  body.mobile-menu-visible .mobile-menu .menu-box { transform: translateX(0); transition: transform .25s ease; }
  .mobile-menu .close-btn { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; color: #12374b; background: #fff; border-radius: 50%; transform: none !important; z-index: 10; }
  .mobile-menu .nav-logo { display: flex; align-items: center; min-height: 74px; padding: 12px 66px 12px 20px; background: #fff; }
  .mobile-menu .nav-logo img { display: block; width: 76px; max-width: 100%; height: auto; margin: 0 !important; }
  .mobile-menu .menu-outer { padding: 8px 0 0; }
  .mobile-menu .navigation, .mobile-menu .navigation ul { width: 100%; margin: 0 !important; padding: 0 !important; list-style: none; }
  .mobile-menu .navigation li { width: 100%; border-color: rgba(255,255,255,.16); }
  .mobile-menu .navigation li > a, .mobile-menu .navigation .conference-trigger, .mobile-menu .navigation .conference-year-trigger { display: block; width: 100%; min-height: 46px; padding: 11px 56px 11px 20px !important; margin: 0 !important; border: 0; background: transparent !important; color: #fff !important; font: 600 15px/24px Arial, sans-serif; text-align: left; text-transform: none; white-space: normal !important; overflow-wrap: anywhere; }
  .mobile-menu .navigation li > a::after { content: none !important; }
  .mobile-menu .navigation li > ul { position: static !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; transform: none !important; opacity: 1 !important; visibility: visible !important; background: rgba(0,0,0,.10) !important; }
  .mobile-menu .navigation li > ul, .mobile-menu .navigation .dropdown-submenu:hover > ul, .mobile-menu .navigation .submenu:hover { display: none !important; }
  .mobile-menu .navigation li.active > ul, .mobile-menu .navigation .nav-conference.is-open > ul, .mobile-menu .navigation .conference-year.is-open > ul { display: block !important; }
  .mobile-menu .navigation li ul a, .mobile-menu .navigation li ul .conference-year-trigger { padding-left: 32px !important; font-weight: 500; }
  .mobile-menu .navigation li ul ul a { padding-left: 44px !important; }
  .mobile-menu .navigation li .dropdown-btn { position: absolute; right: 8px; top: 1px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 4px; color: #fff; background: transparent; transform: none; z-index: 5; }
  .mobile-menu .navigation li .dropdown-btn.open span { transform: rotate(180deg); }
  .mobile-menu .conference-trigger::after, .mobile-menu .conference-year-trigger::after { content: '\f107'; position: absolute; right: 24px; top: 11px; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
  .mobile-menu .nav-conference.is-open > .conference-trigger::after, .mobile-menu .conference-year.is-open > .conference-year-trigger::after { transform: rotate(180deg); }
  .mobile-menu .contact-info { position: static; margin: 0; padding: 22px 20px 8px; color: #fff; }
  .mobile-menu .contact-info h4 { color: #fff; margin: 0 0 10px; font-size: 17px; }
  .mobile-menu .contact-info ul { margin: 0; padding: 0; list-style: none; }
  .mobile-menu .contact-info li, .mobile-menu .contact-info a { color: #fff; overflow-wrap: anywhere; line-height: 1.5; }
  .mobile-menu .contact-info li { margin: 0 0 8px; }
  .mobile-menu .social-links { padding: 8px 20px; }
  .mobile-menu a:focus-visible, .mobile-menu button:focus-visible { outline: 3px solid #ffdc63; outline-offset: -3px; }
}
@media (max-width: 1199px) {
  html { scrollbar-gutter: stable; }
}
@media (max-width: 1199px) { body.mobile-menu-visible { padding-right: var(--drawer-scrollbar, 0px) !important; } }
/* Shared desktop navigation and inner-page title spacing. */
@media (min-width: 1200px) {
  .main-header .main-menu .navigation > li { display: flex; align-items: center; }
  .main-header .main-menu .navigation > li > a,
  .main-header .main-menu .navigation > li > .conference-trigger {
    display: flex; align-items: center; min-height: 48px; padding: 9px 15px !important;
    margin: 0; font-family: 'Muli', sans-serif; font-size: 17px; font-weight: 700; line-height: 30px;
  }
  .main-header .main-menu .navigation > li > .conference-trigger::after {
    position: static; transform: none; margin-left: 7px; line-height: 1;
  }
}
.page-title.style-two { padding: clamp(42px, 5vw, 72px) 0 !important; }
.page-title.style-two .content-box { top: auto !important; margin-top: 0 !important; padding-top: 0 !important; }
.page-title.style-two .content-box h1 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.2; margin: 8px 0 0; overflow-wrap: anywhere; }
.page-title.style-two .bread-crumb { margin: 0; padding: 0; }
.page-title.style-two .pattern-layer { background-position: center bottom; }
@media (min-width: 1200px) and (max-width: 1399px) {
  .main-header .header-upper .main-menu .navigation > li { margin-left: 8px; margin-right: 8px; }
}
@media (max-width: 767px) {
  .about-style-six img, .chooseus-style-four img { margin-left: 0 !important; }
}
/* Compact the alternative service-page banners without fixed heights. */
.page-title.style-two > .auto-container { margin-top: 0 !important; padding-top: 0 !important; }
body .page-title:not(.style-two), body .page-title-section { padding: clamp(48px, 6vw, 88px) 0 !important; background-position: center !important; }
body .page-title:not(.style-two) .content-box { top: auto !important; margin-top: 0 !important; }
body .page-title-section > .container { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Contain existing page-specific artwork and oversized biography blocks. */
.director-bio-wrapper { width: 100% !important; max-width: 100%; overflow-wrap: anywhere; }
.feature-image-container .feature-image, .contact-section .image-box img { margin-left: 0 !important; }
.contact-section .image-column, .info-section .info-column { min-width: 0; overflow: hidden; }
@media (max-width: 767px) {
  .page-title.style-two + .container img, .service-details img { margin-left: 0 !important; }
}
section:has(.timeline), section:has(.feature-image), section:has([data-aos]) { overflow-x: clip; }
@media (max-width: 767px) { html { overflow-x: clip; } }
/* The original artwork contains both the emblem and company name. */
.main-header.style-two .header-upper .header-brand { display: flex; align-items: center; width: min(470px, 100%); gap: 2px; text-decoration: none; }
.main-header.style-two .header-brand-logo, .main-header.style-two .header-brand-name { position: relative; display: block; overflow: hidden; min-width: 0; }
.main-header.style-two .header-brand-logo { flex: 0 0 26.4%; aspect-ratio: 275 / 200; }
.main-header.style-two .header-brand-name { flex: 1 1 auto; aspect-ratio: 925 / 200; }
.main-header.style-two .header-brand-logo img, .main-header.style-two .header-brand-name img { position: absolute; top: 0; display: block; max-width: none; height: auto; margin: 0 !important; }
.main-header.style-two .header-brand-logo img { left: 0; width: 436.364%; }
.main-header.style-two .header-brand-name img { left: -29.73%; width: 129.73%; }
@media (max-width: 1199px) { .main-header.style-two .header-upper .header-brand { width: min(470px, 100%); } }
.main-header.style-two .header-upper .logo-box { width: 470px; max-width: 100%; }
.main-header.style-two .header-upper .header-brand { width: 100%; }


/* Homepage conference announcement dialog */
body.conference-notice-open { overflow: hidden !important; }
.conference-notice { position: fixed; inset: 0; width: min(560px, calc(100% - 32px)); max-width: 560px; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 18px; overflow-y: auto; background: #fff; color: #16384b; box-shadow: 0 24px 70px rgba(1, 25, 40, .35); }
.conference-notice::backdrop { background: rgba(3, 22, 35, .7); }
.conference-notice[open] { animation: conference-notice-enter .18s ease-out; }
@keyframes conference-notice-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.conference-notice__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 24px; background: linear-gradient(125deg, #075b83, #078b9c); color: #fff; }
.conference-notice__heading { display: flex; align-items: center; gap: 14px; min-width: 0; }
.conference-notice__icon { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 13px; color: #fff; background: rgba(255,255,255,.17); }
.conference-notice__badge { display: inline-block; color: #fff; font: 700 11px/1.4 Arial,sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.conference-notice__heading h2 { margin: 4px 0 0; color: #fff; font: 700 clamp(24px, 5vw, 32px)/1.2 Arial,sans-serif; }
.conference-notice__close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(0, 32, 52, .35); font: 28px/1 Arial,sans-serif; cursor: pointer; }
.conference-notice__close:hover { background: rgba(0, 32, 52, .6); }
.conference-notice__body { padding: 24px; }
.conference-notice__name { margin: 0 0 18px; color: #143b50; font: 600 17px/1.45 Arial,sans-serif; }
.conference-notice__dates { display: grid; gap: 10px; margin: 0 0 22px; }
.conference-notice__dates div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 9px 12px; border-radius: 9px; background: #eef8fa; }
.conference-notice__dates dt, .conference-notice__dates dd { margin: 0; color: #274a5c; font: 14px/1.45 Arial,sans-serif; }
.conference-notice__dates dd { color: #10374c; font-weight: 700; }
.conference-notice__action { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 9px; background: #075b88; color: #fff !important; font: 700 15px/1.4 Arial,sans-serif; text-decoration: none !important; }
.conference-notice__action:hover { background: #064767; }
.conference-notice__close:focus-visible, .conference-notice__action:focus-visible { outline: 3px solid #f7b63b; outline-offset: 3px; }
@media (max-width: 575px) { .conference-notice__header, .conference-notice__body { padding: 18px; } .conference-notice__name { font-size: 16px; } .conference-notice__dates { gap: 7px; margin-bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .conference-notice[open] { animation: none; } }
