/* ============================================================
   P3 ALLIANCE - SHARED STYLESHEET (used by every page)
   Loaded AFTER Bootstrap, so these rules override Bootstrap.

   COLOR CHEAT SHEET (the site's main colors):
   #b92e17 = main red        (top bar, buttons)
   #992b15 = dark red        (button hover, dropdown menus)
   #d0432a = bright red      (big slider/banner area)
   #2c3e50 = dark blue-grey  (headings, "Global Presence" band)
   #7e8492 = grey            (body text, grey section)
   #1f2c39 = very dark navy  (footer)
   ============================================================ */

/* ---------- 0. COLORS AS VARIABLES (change once, applies everywhere) ---------- */
:root{
  --p3-red:#b92e17;
  --p3-red-dark:#992b15;
  --p3-red-bright:#d0432a;
  --p3-blue:#2c3e50;
  --p3-grey:#2f3238;
  --p3-navy:#1f2c39;
  --p3-nav-h:86px;
}

/* ---------- 1. BASIC DEFAULTS ---------- */
/* Whole page: font, text color, line spacing (overrides Bootstrap's defaults) */
body{font-family:Roboto,Helvetica,Arial,sans-serif;color:var(--p3-grey);line-height:1.9;font-size:17px;background:#fff}

/* Links: no underline, keep surrounding text color. Images: never wider than their box */
a{text-decoration:none;color:inherit}
img{max-width:100%}

/* Same max width as the old ".wrap" (1200px incl. 20px side padding) */
.container{max-width:1200px;padding-left:20px;padding-right:20px}
/* Slightly narrower container for text sections */
.narrow{max-width:1200px}

/* Keyboard users can jump straight to the content */
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:#fff;color:var(--p3-blue);padding:8px 14px}
.skip-link:focus{left:10px;top:10px}

/* ---------- 2. TOP BAR (red header with logo + menu) ---------- */
/* Sticky = stays at the top of the screen when you scroll */
.top{background:var(--p3-red);position:sticky;top:0;z-index:1030}
.top .navbar{min-height:var(--p3-nav-h);padding:0}

/* Logo image size */
.logo img{height:44px}

/* Menu links: white, bold, with spacing */
.top .nav-link{color:#fff !important;font-weight:600;letter-spacing:.5px;padding:10px 14px !important;font-size:16px;line-height:1.9}
.top .nav-link:hover,.top .nav-link:focus{opacity:.75}
/* Current page gets a thin underline */
.top .nav-link.active{text-decoration:underline;text-underline-offset:6px}
/* The little down-arrow next to "Alliance" and "Solutions" */
.top .fa-angle-down{font-size:12px}

/* Dropdown menus (the small dark-red box under "Alliance" / "Solutions") */
.top .dropdown-menu{background:var(--p3-red-dark);border:0;border-radius:0;min-width:180px;padding:0;margin:0}
.top .dropdown-item{color:#fff;font-weight:600;padding:10px 14px;font-size:16px}
.top .dropdown-item:hover,.top .dropdown-item:focus{background:transparent;color:#fff;opacity:.75}

/* Hamburger button (3 lines) - only visible on phones/tablets */
.burger{border:0;color:#fff;font-size:24px;padding:4px 8px}
.burger:focus{box-shadow:none}

/* Desktop: dropdown opens when the mouse is over the menu item (like before) */
@media(min-width:992px){
  .top .dropdown:hover>.dropdown-menu,
  .top .dropdown:focus-within>.dropdown-menu{display:block;top:100%}
  .top .navbar-nav{gap:6px}
}

/* ---------- 3. BIG RED SLIDER / BANNER (top of homepage) ---------- */
/* The red area with the sliding messages; 360px tall */
.slider{background:var(--p3-red-bright);height:360px;overflow:hidden}
.slider .carousel-inner,.slider .carousel-item{height:100%}
/* Slide fade speed (Bootstrap default is .6s; old site used .8s) */
.slider.carousel-fade .carousel-item{transition:opacity .8s ease-in-out}

/* Layout inside a slide: text and picture side by side, centered */
.sl{display:flex;align-items:center;justify-content:center;height:100%;gap:40px}

/* Slide text: white, serif font (Georgia), centered */
.txt{text-align:center;color:#fff;font-family:Georgia,"Times New Roman",serif;max-width:420px}
/* Big headline inside the slide */
.txt h1{font-weight:400;font-size:42px;line-height:1.25;margin:0}
/* Smaller description line under the headline */
.txt p{font-size:17px;margin:22px 0 12px}

/* Small dark-red button inside the slide (e.g. "Alliance >") */
.sbtn{background:var(--p3-red-dark);color:#fff;padding:3px 18px;border-radius:3px;font-size:15px;display:inline-flex;gap:4px;align-items:center}
.sbtn:hover{color:#fff;opacity:.9}

/* Picture area on the right side of the slide */
.art{position:relative;width:340px;height:320px;display:flex;align-items:center}
/* The main picture (coffee cup, signpost, dashboard) */
.art .main{position:relative;z-index:1;width:100%}

/* The two animated steam images above the coffee cup */
.steam{position:absolute;width:120px;left:110px;top:-10px;opacity:.6;animation:steam 4s ease-in-out infinite}
/* Second steam puff starts 2 seconds later so they alternate */
.s2{animation-delay:2s}
/* Steam animation: rises up and fades out, then repeats */
@keyframes steam{0%{transform:translateY(20px);opacity:0}50%{opacity:.7}100%{transform:translateY(-30px);opacity:0}}

/* Left/right arrow buttons on the slider */
.slider .carousel-control-prev,.slider .carousel-control-next{width:auto;padding:0 30px;font-size:56px;color:#fff;opacity:1;z-index:5}
.slider .carousel-control-prev:hover,.slider .carousel-control-next:hover{opacity:.75}

/* ---------- 3b. PAGE TITLE BAND (top of the sub-pages) ---------- */
.page-head{background:var(--p3-red-bright);color:#fff;padding:60px 0}
.page-head h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:42px;line-height:1.25;margin:0;text-align:center}

/* ---------- 4. CONTENT SECTIONS (the white/grey/blue blocks) ---------- */
/* Default section spacing */
.sec{padding:50px 0 80px}
/* Big centered heading at the top of each section */
.sec h2{color:var(--p3-blue);font-weight:400;font-size:42px;text-align:center;margin-bottom:30px;line-height:1.3}
.sec h3{color:var(--p3-blue);font-weight:400;font-size:26px;margin:30px 0 15px}
.sec p{margin-bottom:22px}

/* The picture beside the text */
.side{width:300px;max-width:100%}

/* Standard red button (e.g. "Learn more about our solutions") */
.btn-p3{display:inline-flex;gap:10px;align-items:center;background:var(--p3-red);color:#fff;padding:12px 20px;border:0;border-radius:2px;margin-top:40px;font-size:16px;line-height:1.5;transition:background .2s}
/* Button turns darker red when the mouse is over it */
.btn-p3:hover,.btn-p3:focus{background:var(--p3-red-dark);color:#fff}

/* GREY SECTION ("Moving COBOL to Java"): grey background, white text */
.grey{background:var(--p3-grey);color:#fff}.grey h2{color:#fff}
/* White button used inside the grey section */
.btn-p3.light{background:#fff;color:var(--p3-grey)}
.btn-p3.light:hover{background:#f1f1f1;color:var(--p3-grey)}

/* ---------- 5. REFERENCE LOGOS (scrolling company logos) ---------- */
/* Small heading above the logos */
.refs h5{text-align:center;color:var(--p3-blue);font-size:20px;font-weight:400;margin-bottom:30px}

/* The marquee: hides anything that sticks out sideways */
.marquee{overflow:hidden}
/* The moving strip of logos (list is duplicated so the loop looks seamless) */
.track{display:flex;gap:60px;width:max-content;animation:mq 30s linear infinite}
/* Pause the strip while the mouse is over it */
.marquee:hover .track{animation-play-state:paused}
/* Logos: grey and slightly faded; full color when the mouse is over them */
.track img,.logo-grid img{height:70px;filter:grayscale(1);opacity:.7;transition:.3s}
.track img:hover,.logo-grid img:hover{filter:none;opacity:1}
/* Marquee animation: slides the strip left by half its width, then loops */
@keyframes mq{to{transform:translateX(-50%)}}

/* "... and many more" link under the logos */
.more{color:var(--p3-red);display:inline-block;margin-top:25px}
.more:hover{color:var(--p3-red-dark)}

/* Static logo grid (References page) */
.logo-grid img{height:auto;max-height:90px}

/* ---------- 6. GLOBAL PRESENCE SECTION (dark blue band) ---------- */
.global{background:var(--p3-blue);color:#c6ccd6}.global h2{color:#fff}
/* White button used inside the dark section */
.btn-p3.white{background:#fff;color:var(--p3-blue)}
.btn-p3.white:hover{background:#f1f1f1;color:var(--p3-blue)}

/* ---------- 7. FOOTER (very dark bar at the bottom) ---------- */
footer{background:var(--p3-navy);color:#9aa3b0;font-size:14px;padding:22px 0}
/* Footer links turn white on hover */
footer a:hover{color:#fff}

/* ---------- 8. SEARCH OVERLAY (full-screen search box, Bootstrap modal) ---------- */
/* Near-white full-screen layer */
.search-ov .modal-content{background:rgba(255,255,255,.97);border:0}
.search-ov .modal-body{display:flex;flex-direction:column;align-items:center;justify-content:center}
/* The big search input: huge text with just an underline */
.search-ov input{border:0;border-bottom:2px solid var(--p3-blue);font-size:48px;width:70%;outline:0;text-align:center;color:var(--p3-blue);background:transparent}
/* The X button to close the search */
.search-ov .close{position:absolute;top:30px;right:40px;font-size:30px;border:0;background:none;cursor:pointer;color:var(--p3-blue)}

/* ---------- 9. COOKIE BANNER (bar at the bottom of the screen) ---------- */
/* Fixed to the bottom, white with a soft shadow; hidden until JS shows it */
.cookie{position:fixed;bottom:0;left:0;right:0;background:#fff;color:#333;font-size:14px;line-height:1.3;padding:18px 25px;display:none;gap:30px;align-items:center;box-shadow:0 -1px 10px rgba(0,0,0,.15);z-index:1040;font-family:Arial,sans-serif}
.cookie.show{display:flex}
.cookie p{margin:0}
/* The three buttons grouped together */
.cookie div{display:flex;gap:8px;flex-shrink:0}
/* Shared button style */
.cb{border:0;padding:8px 12px;font-size:13px;cursor:pointer}
/* Grey buttons ("Cookie Settings", "Reject All") */
.grey2{background:#dedfe0;color:#333}
/* Green button ("Accept All") */
.green{background:#61a229;color:#fff}

/* ---------- 10. MOBILE RULES (phones/tablets, below 992px = Bootstrap "lg") ---------- */
@media(max-width:991.98px){
  /* The opened menu becomes a full-width red panel under the bar */
  .top .navbar-collapse{position:absolute;top:var(--p3-nav-h);left:0;right:0;background:var(--p3-red);padding:0 20px 10px}
  /* Sub-menu items are always visible and indented on phones */
  .top .dropdown-menu{display:block;position:static;background:transparent;padding-left:16px}
  /* Hide the slider pictures (coffee cup etc.) on small screens */
  .art{display:none}
  .side{width:220px}
  /* Smaller headings on small screens */
  .sec h2,.txt h1,.page-head h1{font-size:30px}
  .slider .carousel-control-prev,.slider .carousel-control-next{padding:0 10px;font-size:40px}
  .search-ov input{font-size:28px;width:90%}
  /* Cookie banner stacks vertically */
  .cookie{flex-direction:column;gap:12px}
}

/* ============================================================
   12. SUB-PAGE BUILDING BLOCKS (Alliance, Solutions, References, Contact)
   ============================================================ */

/* Anchor links (#philosophy, #members, #map ...) don't hide under the sticky bar */
[id]{scroll-margin-top:calc(var(--p3-nav-h) + 10px)}

/* Red hero band at the top of a sub-page: picture left, serif title right */
.hero{background:var(--p3-red);color:#fff;padding:40px 0}
.hero .art{margin:0 auto}
.hero h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:46px;line-height:1.25;margin:0}

/* Small grey label above a heading ("ABOUT OUR PHILOSOPHY") */
.eyebrow{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--p3-grey);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.eyebrow i{color:var(--p3-grey);font-size:15px}
/* Left-aligned section heading used under an eyebrow */
.sec .h-left{text-align:left;font-size:32px;margin-bottom:20px}

/* Background variants */
.light{background:#f7f7f7;border-top:1px solid #eee;border-bottom:1px solid #eee}
.pale{background:#e1e4ea}

/* Inline red text link ("Who the members are") */
.text-link{color:var(--p3-red)}
.text-link:hover{color:var(--p3-red-dark);text-decoration:underline}

/* Rounded grey tile around a small picture */
.tile{background:#e8e8e8;border-radius:16px;width:180px;height:180px;display:flex;align-items:center;justify-content:center;padding:14px;margin:0 auto}
.tile img{max-height:100%;object-fit:contain}
.tile.photo{padding:0;overflow:hidden}
.tile.photo img{width:100%;height:100%;object-fit:cover}

/* bigger photo */
/* Bigger tile: fills its column (up to 340px), stays square */
.tile.big{width:100%;max-width:280px;height:auto;aspect-ratio:1/1;padding:20px}
.tile.big img{width:100%;height:100%;object-fit:contain}

/* Check-mark lists */
.checks{list-style:none;padding:0}
.checks li{position:relative;padding-left:28px;margin-bottom:6px}
.checks li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:0;color:var(--p3-blue)}
.checks.big li{font-size:20px;line-height:1.4;color:var(--p3-blue);padding-left:40px;margin-bottom:24px}
.checks.big li::before{content:"\f058";font-size:24px;color:var(--p3-grey)}

/* Number boxes ("More than 30 Years of experience") */
.stat{background:rgba(255,255,255,.35);border-radius:6px;padding:12px 10px;text-align:center;color:#fff;height:100%}
.stat small{display:block;text-transform:uppercase;letter-spacing:2px;font-size:13px}
.stat .num{font-family:Georgia,"Times New Roman",serif;font-size:46px;line-height:1.2}

/* Accordions (members, benefits) in site colors */
.accordion{--bs-accordion-active-bg:#fff;--bs-accordion-active-color:var(--p3-blue);--bs-accordion-btn-focus-box-shadow:none;--bs-accordion-color:var(--p3-grey)}
.accordion-item{margin-bottom:12px;border:0 !important;border-radius:4px !important;box-shadow:0 1px 4px rgba(0,0,0,.12);overflow:hidden}
.accordion-button{color:var(--p3-blue);font-size:16px}
.accordion-body{font-size:15px}
.member-logo{float:left;width:180px;margin:0 16px 8px 0}

/* Locations: legend + world map with colored dots */
.legend{background:#d6dae2;border-radius:6px;padding:14px 20px;display:flex;flex-wrap:wrap;justify-content:space-around;gap:16px;align-items:center}
.legend span{display:flex;align-items:center;gap:10px;color:var(--p3-blue);font-weight:600}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0;box-shadow:0 0 0 2px #fff}
.d-turret{background:#c0221b}.d-easirun{background:#1d2a7a}.d-cloud{background:#29b6d8}.d-prorm{background:#2a9d3c}
.map{position:relative;margin-top:30px}
.map img{width:100%;display:block}
.map img.missing{aspect-ratio:2/1;height:auto}

/* Image not uploaded yet: dashed box with its file name (remove once all images exist) */
img.missing{border:2px dashed #c6ccd6;background:#f4f5f7;min-height:80px;width:100%;font-size:12px;color:#9aa3b0}
.map .dot{position:absolute;transform:translate(-50%,-50%)}
.map small{display:flex;align-items:center;gap:8px;margin-top:10px}

/* References page: logo cards */
.logo-card{background:#fff;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.1);height:165px;display:flex;align-items:center;justify-content:center;padding:10px}
.logo-card img{max-height:100%}

/* Call-to-action band ("Call now ...") */
.cta{padding:40px 0;text-align:center}
.cta p{color:var(--p3-blue);font-size:24px;line-height:1.4;margin-bottom:20px}
.btn-call{display:block;background:var(--p3-grey);color:#fff;font-size:24px;padding:12px;border-radius:6px}
.btn-call:hover{background:var(--p3-blue);color:#fff}

/* Contact form */
.contact-form .form-control{border-radius:2px;border-color:#d5d8de;color:var(--p3-blue)}
.contact-form .form-control:focus{border-color:var(--p3-red);box-shadow:0 0 0 .2rem rgba(185,46,23,.15)}
.contact-form label{color:var(--p3-blue);font-size:15px}

/* Back-to-top round button (bottom right) */
.to-top{position:fixed;right:18px;bottom:18px;width:40px;height:40px;border-radius:50%;border:2px solid var(--p3-grey);background:#fff;color:var(--p3-grey);display:none;align-items:center;justify-content:center;z-index:1035;cursor:pointer}
.to-top.show{display:flex}
.to-top:hover{border-color:var(--p3-red);color:var(--p3-red)}

/* Desktop dropdown: white rounded box with soft shadow (like the live site) */
@media(min-width:992px){
  .top .dropdown-menu{background:#fff;border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,.18);min-width:250px;padding:14px 0;text-align:center}
  .top .dropdown-item{color:var(--p3-blue);font-weight:400;font-size:17px;padding:8px 20px}
  .top .dropdown-item:hover,.top .dropdown-item:focus{color:var(--p3-red);opacity:1}
}

@media(max-width:991.98px){
  .hero{text-align:center}
  .hero h1{font-size:32px}
  .sec .h-left{font-size:26px}
  .tile{width:150px;height:150px}
}

/* ---------- 11. RESPECT "REDUCE MOTION" SETTING ---------- */
@media(prefers-reduced-motion:reduce){
  .steam,.track{animation:none}
}