/* ==========================================================================
   GLOBAL RESET & BASE VARIABLES
   ========================================================================== */
/* Global Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; scroll-behavior: smooth; }
body { font-family: Arial, sans-serif; padding-top: 32px; }

/* Color & measurement variables */
:root {
  --brand-blue:   #30446d;
  --brand-gold:   #fbb03b;
  --menu-grey:    #e0e0e0;
  --text-grey:    #333;
  --light-grey:   #f0f0f0;
}

/* Headings default */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  color: var(--brand-blue);
  margin: 0;
}

/* ==========================================================================
   TYPOGRAPHY & CONTAINERS
   ========================================================================== */
.section-heading {
  font-size: 2rem;
  margin-bottom: 20px;
  text-align: center;
  color: var(--brand-blue);
}

.section-paragraph {
  font-size: 1rem;
  color: var(--text-grey);
  margin: 0 auto 20px;
  max-width: 800px;
  text-align: center;
}

.section-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Utility classes */
.bold { font-weight: bold; }
.bg-grey { background-color: var(--light-grey); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Universal underline link */
.ccg-link-underline {
  position: relative; color: var(--text-grey);
  text-decoration: none; transition: color .3s;
}
.ccg-link-underline::after {
  content: "";
  position: absolute; left: 50%; bottom: -2px;
  width: 0; height: 1px; background: var(--brand-gold);
  transform: translateX(-50%); transition: width .3s;
}
.ccg-link-underline:hover {
  color: var(--brand-blue);
}
.ccg-link-underline:hover::after {
  width: 100%;
}

/* ==========================================================================
   FLOATING CONTACT & BACK TO TOP BUTTONS
   ========================================================================== */

/* Container: Positioned, but invisible by default */
.floating-btn-group {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 12px !important;
  z-index: 99999 !important;
  
  /* Fade-in Logic */
  opacity: 0;
  pointer-events: none; /* Prevents clicking while hidden */
  transition: opacity 0.6s ease-in-out !important; /* Gentle fade */
}

/* Active class applied by JS on scroll */
.floating-btn-group.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Base button style */
.float-btn {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  border: none !important;
  font-size: 1.3rem !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
  cursor: pointer !important;
  
  /* Transparency Logic: 70% by default */
  opacity: 0.7;
  transition: all 0.3s ease !important;
}

/* 100% Solid on Hover */
.float-btn:hover {
  transform: scale(1.1);
  opacity: 1 !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}

/* Specific Brand Colors from your CSS */
.contact-btn {
  background-color: var(--brand-gold) !important; /* #fbb03b */
}

#backToTop {
  background-color: var(--brand-blue) !important; /* #30446d */
}

/* Pulse animation (Alpha-adjusted for 70% opacity) */
.contact-pulse {
  animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(251, 176, 59, 0.5); }
  70% { box-shadow: 0 0 0 15px rgba(251, 176, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 176, 59, 0); }
}

/* ... Keep your existing desktop CSS above ... */

/* Media Query for Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {
  .floating-btn-group {
    bottom: 15px !important; /* Move slightly closer to the corner */
    right: 15px !important;
    gap: 8px !important;    /* Tighter vertical spacing */
  }

  .float-btn {
    width: 38px !important;  /* ~25% smaller than 50px */
    height: 38px !important;
    font-size: 1rem !important; /* Smaller icon size to match */
    box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
  }
}



/* ==========================================================================
   TOP CONTACT BAR
   ========================================================================== */
.top-bar {
  position: fixed; top: 0; width: 100%; z-index: 1050;
  background: #f8f9fa; padding: 5px 0;
}
.top-bar .contact-link {
  color: var(--brand-blue); text-decoration: none;
  font-size: .9rem; transition: color .3s;
}
.top-bar .contact-link:hover { color: var(--brand-gold); }
@media (max-width: 500px) {
  .top-bar .contact-text { display: none; }
  .top-bar .container {
    width:100%; max-width:100%!important;
    padding:0 15px; justify-content:center!important;
  }
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
/* Base */
.navbar {
  background: #f8f9fa;
  border-top: 1px solid var(--menu-grey);
}
.navbar-header {
  display: flex; align-items: center; flex-wrap: nowrap;
  position: relative; width: 100%;
}
.navbar-brand img {
  max-height: 50px; width: auto;
}
@media (max-width: 500px) { .navbar-brand img { max-height: 40px; } }
@media (max-width: 400px) { .navbar-brand img { max-height: 34px; } }

/* Links */
.navbar-expand-lg .navbar-nav { flex-wrap: nowrap; }
.navbar-nav .nav-link {
  display: inline-block; white-space: nowrap;
  position: relative; color: #333;
  transition: color .3s; font-family: 'Poppins', sans-serif;
}
.navbar-nav .nav-link:hover { color: var(--brand-blue); }
.navbar-nav .nav-link::after {
  content: ""; position: absolute; left:50%; bottom:-2px;
  width:100%; height:1px; background:var(--brand-gold);
  transform-origin:center; transform:translateX(-50%) scaleX(0);
  transition: transform .3s;
}
.navbar-nav .nav-link:hover::after {
  transform: translateX(-50%) scaleX(1);
}

/* ==========================================================================
   NAVBAR TOGGLER (Hamburger) — three bars → X, perfectly centered,
   no stray border or outline on click/focus
   ========================================================================== */
.navbar-toggler {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  padding: 0;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  -webkit-appearance: none;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none !important;
  box-shadow: none !important;
}

.navbar-toggler .line {
  display: block !important;
  width: 25px !important;
  height: 3px !important;
  margin: 5px auto !important;          /* 5px vertical gap, auto-centered horizontally */
  background-color: var(--brand-blue) !important;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* When “active”, fold into a crisp X around the exact center (19px total height ⇒ 9.5px offset) */
.navbar-toggler.active .line:nth-child(1) {
  transform: translateY(9.5px) rotate(45deg) !important;
}
.navbar-toggler.active .line:nth-child(2) {
  opacity: 0 !important;
}
.navbar-toggler.active .line:nth-child(3) {
  transform: translateY(-9.5px) rotate(-45deg) !important;
}



/* Responsive navbar container padding */
@media (max-width: 600px) {
  .navbar .container {
    max-width:100%!important; padding:0 10px!important;
  }
}
@media (max-width: 991.98px) {
  .navbar-collapse { padding-left:1rem; }
}

/* ==========================================================================
    HERO SLIDER
   ========================================================================== */
.hero {
  position: relative; 
  overflow: hidden; 
  height: 100vh;
}

.hero-slider { 
  position: relative; 
  height: 100%; 
}

.hero-slide {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  background-size: cover; 
  background-position: center;
  opacity: 0; 
  transition: opacity 1s ease-in-out;
}

.hero-slide.active { 
  opacity: 1; 
}

/* The box containing text over the image */
.hero-text-box {
  position: absolute; 
  bottom: 50%; 
  left: 50%;
  transform: translateX(-50%);
  background: rgba(48, 68, 109, 0.6); 
  color: #fff;
  padding: 20px; 
  max-width: 800px; 
  border-radius: 4px;
  text-align: center;
}

/* --- Heading Color Logic --- */

/* Force H1 to be White ONLY when inside a hero slide (on an image) */
.hero-slide .hero-text-box h1 {
  color: #ffffff !important;
}

/* Ensure H1 is Brand Blue when there is NO hero image (fallback state) */
.hero-no-image__content h1 {
  color: var(--brand-blue) !important;
}

/* --- Hero Navigation --- */
.hero-nav {
  position: absolute; 
  bottom: 40%; 
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.hero-nav button {
  background: rgba(48, 68, 109, 0.6); 
  border: none;
  color: #fff; 
  padding: 10px 15px; 
  margin: 0 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.hero-nav button:hover {
  background: var(--brand-gold);
}

/* --- Mobile Adjustments --- */
@media (max-width: 546px) {
  .hero-text-box {
    top: 40%; 
    bottom: auto; 
    transform: translate(-50%, -50%);
    width: 90%; 
    padding: 15px;
  }
  
  .hero-nav {
    bottom: 15% !important;
  }
}

/* Parallax helper */
.parallax { /* JS-driven transforms */ }

/* Text-only variant */
.hero.hero-no-image {
  height:auto; background:transparent; padding:4rem 2rem;
}
.hero-no-image__content {
  max-width:800px; margin:0 auto; text-align:center;
}
.hero-no-image__content h1 {
  font-size:2rem; color:var(--brand-blue); margin-bottom:.5rem;
  position:relative;
}
.hero-no-image__content p {
  font-size:1rem; color:var(--text-grey);
}

/* ==========================================================================
   PROJECT INFO (ICON ROW)
   ========================================================================== */
.project-info {
  padding:40px 0; text-align:center;
}
.project-info .info-item {
  display:inline-block; margin:0 15px; padding:15px;
}
.project-info .info-item i {
  font-size:3rem; color:var(--brand-gold);
  animation:pulse 1s ease-in-out infinite;
}
.project-info .info-item p {
  color:var(--brand-blue); margin:0;
}
@keyframes pulse {
  0%   { transform: scale(.8); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(.8); }
}

/* ==========================================================================
   TWO-COLUMN PROJECT OVERVIEW
   ========================================================================== */
.two-column-section {
  display:flex; flex-wrap:nowrap; width:100%; margin:0; padding:0;
}
.two-column-section .text-box,
.two-column-section .image-box {
  flex:0 0 50%; max-width:50%; box-sizing:border-box;
}
.text-box {
  background:#f0f0f0; display:flex;
  align-items:center; justify-content:center;
  padding:20px 0;
}
.text-box .text-content {
  width:70%; /* center text with 15% side margins */
}
.text-box .text-content h2 {
  color:var(--brand-blue); margin-bottom:20px;
}
.text-box .text-content p { line-height:1.6; }
.image-box {
  position:relative; overflow:hidden;
  aspect-ratio:1/1;
}
.image-box .image-inner {
  position:absolute; top:0; right:0; bottom:0; left:0;
  background-size:cover; background-position:center;
  transform:scale(1.1); transition:transform .3s;
}
@media (max-width:1000px) {
  .two-column-section {
    flex-direction:column;
  }
  .two-column-section .text-box,
  .two-column-section .image-box {
    flex:0 0 100%; max-width:100%;
  }
}

/* ==========================================================================
   FULL-WIDTH PARAGRAPH SECTION
   ========================================================================== */
.full-width-paragraph {
  padding:80px 20px; text-align:center;
}
.full-width-paragraph p {
  font-size:1.5rem; margin:0;
}

/* ==========================================================================
   TESTIMONIAL
   ========================================================================== */
.testimonial {
  padding:60px 20px; background:#fff;
}
.testimonial .container { max-width:800px; margin:0 auto; }
.testimonial .stars {
  font-size:2rem; color:var(--brand-gold);
  margin-bottom:20px; text-align:center;
  animation: starPulse 3s infinite;
}
.testimonial .stars i { /* stagger star pulse */ }
.testimonial .quote {
  position:relative; padding:20px 40px;
  font-style:italic; font-size:1.2rem; line-height:1.5;
  text-align:center;
}
.testimonial .quote-icon {
  font-size:2.5rem; color:var(--brand-blue);
  position:absolute; animation:starPulse 3s .5s infinite;
}
.testimonial .quote-icon.left { top:0; left:0; }
.testimonial .quote-icon.right { bottom:0; right:0; }
.testimonial .client-name {
  text-align:center; margin-top:20px; color:var(--brand-blue);
}
@keyframes starPulse {
  0%,100%{transform:scale(1);} 10%{transform:scale(1.3);} 20%{transform:scale(1);}
}

/* ==========================================================================
   HOMEPAGE TESTIMONIAL CAROUSEL OVERRIDES
   ========================================================================== */
.testimonial-carousel .carousel-track { list-style:none; margin:0; padding:0; }
.testimonial-carousel .carousel-slide { flex:0 0 100%; margin:0; }
.testimonial-carousel .carousel-track-wrapper::before,
.testimonial-carousel .carousel-track-wrapper::after { display:none; }
.testimonial-carousel .testimonial { padding:40px 20px; }
.testimonial-carousel .alias-link {
  display:block; margin-top:8px; font-weight:bold;
}

/* ==========================================================================
   BASE CAROUSEL STYLES (All Carousels)
   ========================================================================== */
/* Container & Track */
.carousel-container {
  position:relative; width:100%; overflow:hidden; opacity:1;
  transition:opacity .5s;
}
.carousel-track {
  display:flex; will-change:transform;
  transition:transform .5s ease-in-out; opacity:0;
}
.carousel-slide {
  flex:0 0 auto; margin:0 10px;
}
.carousel-slide img {
  display:block; width:100%; max-height:800px;
  object-fit:contain; border-radius:4px;
}
@media (max-width:600px) {
  .carousel-slide img { max-height:80vh; }
  .carousel-track-wrapper::before,
  .carousel-track-wrapper::after {
    width:20px;
  }
}

/* Navigation Arrows */
.carousel-control {
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:var(--brand-blue); opacity:.6;
  border:none; color:#fff; font-size:1.5rem;
  text-align:center; line-height:40px; cursor:pointer;
  transition:background .3s, opacity .3s; z-index:10;
}
.carousel-control:hover {
  background:var(--brand-gold); opacity:1;
}
.carousel-control.prev { left:40px; }
.carousel-control.next { right:40px; }

/* Indicators */
.carousel-indicators {
  text-align:center; margin-top:15px;
}
.carousel-indicators .indicator {
  display:inline-block; width:12px; height:12px;
  margin:0 5px; border-radius:50%;
  background: var(--brand-blue); opacity:.6;
  border:none; cursor:pointer;
  transition: background .3s, opacity .3s;
}
.carousel-indicators .indicator.active,
.carousel-indicators .indicator:hover {
  background:var(--brand-gold); opacity:1;
}

/* Fading edges */
.carousel-track-wrapper {
  position:relative; overflow:hidden; width:100%;
}
.carousel-track-wrapper::before,
.carousel-track-wrapper::after {
  content:""; position:absolute; top:0; width:80px;
  height:100%; z-index:5; pointer-events:none;
}
.carousel-track-wrapper::before {
  left:0; background:linear-gradient(to right,#f8f9fa,rgba(248,249,250,0));
}
.carousel-track-wrapper::after {
  right:0; background:linear-gradient(to left,#f8f9fa,rgba(248,249,250,0));
}

/* ==========================================================================
   SERVICES CAROUSEL (Home Only) — uniform widths, card style & indicator push
   ========================================================================== */
/* Slide sizing */
.custom-carousel-section[aria-label="Our Services"] .carousel-slide {
  flex: 0 0 300px;
  max-width: 300px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0 10px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.custom-carousel-section[aria-label="Our Services"] .carousel-slide:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.custom-carousel-section[aria-label="Our Services"] .carousel-slide img {
  width:100%; height:auto; object-fit:cover;
  border-radius:4px 4px 0 0;
}

/* Title underline on hover */
.custom-carousel-section[aria-label="Our Services"] .carousel-slide h3.why-choose-title {
  font-size:1.25rem; color:var(--brand-blue);
  position:relative; display:inline-block;
  margin:20px; transition:color .3s;
}
.custom-carousel-section[aria-label="Our Services"] .carousel-slide h3.why-choose-title::after {
  content:""; position:absolute; left:0; bottom:-2px;
  width:0; height:2px; background:var(--brand-gold);
  transition:width .3s ease;
}
.custom-carousel-section[aria-label="Our Services"] .carousel-slide:hover h3.why-choose-title::after {
  width:100%;
}

/* Tagline */
.custom-carousel-section[aria-label="Our Services"] .carousel-slide p {
  color:var(--text-grey); font-size:1rem;
  margin:0 20px 15px; flex-grow:1;
}

/* Button at bottom */
.custom-carousel-section[aria-label="Our Services"] .carousel-slide .view-project-btn {
  display:inline-block; margin:0 20px 20px;
  padding:10px 20px; background:var(--brand-blue);
  color:#fff; font-weight:bold; text-align:center;
  border-radius:4px; text-decoration:none;
  transition:background .3s ease; cursor:pointer;
}
.custom-carousel-section[aria-label="Our Services"] .carousel-slide:hover .view-project-btn {
  background:var(--brand-gold);
}

@media (max-width: 600px) {
  /* 1) Make every slide 90% wide, centered horizontally */
  .carousel-slide {
    flex: 0 0 90% !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    /* let flexbox stretch them vertically below */
    align-self: auto !important;
  }

  /* 2) Remove the fade-edge gradients */
  .carousel-track-wrapper::before,
  .carousel-track-wrapper::after {
    display: none !important;
  }

  /* 3) Remove extra bottom padding (for indicators) */
  .carousel-track-wrapper {
    padding-bottom: 0 !important;
  }

  /* 4) Stretch all slides to the same height (so buttons align) */
  .carousel-track {
    align-items: stretch !important;
    /* keep them in a left-to-right row */
    justify-content: flex-start !important;
  }
  
  .custom-carousel-section[aria-label="Our Services"] .carousel-track-wrapper {
  padding-bottom:6rem;
}

.custom-carousel-section[aria-label="Our Services"] .carousel-indicators {
  margin-top:-6rem;
  }
  
}




/* Push indicators below cards */
.custom-carousel-section[aria-label="Our Services"] .carousel-track-wrapper {
  padding-bottom:4rem;
}
.custom-carousel-section[aria-label="Our Services"] .carousel-indicators {
  position:relative!important;
  bottom:auto!important;
  margin-top:-3rem;
  z-index:1;
}


/* Services Clickable Slot Logic */
.clickable-slide {
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Ensure the link covers the whole area */
.clickable-slide .stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

/* Hover effects to match Portfolio style */
.clickable-slide:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.clickable-slide:hover .why-choose-title::after {
    width: 100%; /* Triggers the gold underline on the title */
}

.clickable-slide:hover .view-project-btn {
    background: var(--brand-gold) !important; /* Matches portfolio button hover */
}

/* ==========================================================================
   GALLERY SECTION
   ========================================================================== */
.gallery-section h2 {
  color: var(--brand-blue); margin-bottom:20px;
}
.gallery {
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center;
}
.gallery a {
  flex:0 0 calc(16.66% - 10px);
  max-width:calc(16.66% - 10px);
  box-sizing:border-box; text-align:center;
}
.gallery img {
  width:100%; height:auto; display:block;
}
@media (max-width:768px) {
  .gallery a {
    flex:0 0 calc(50% - 10px);
    max-width:calc(50% - 10px);
  }
}
.gallery-section .container { margin-bottom:20px; }

/* ==========================================================================
   FULL-WIDTH WHITE PARAGRAPH (PROJECT STATEMENT)
   ========================================================================== */
.full-width-white {
  background:#fff; padding:80px 20px; text-align:center;
}
.full-width-white p {
  font-size:1.5rem; margin:0;
}

/* ==========================================================================
   BEFORE/AFTER SLIDER
   ========================================================================== */
/* Wrapper */
.before-after-section {
  background:#f0f0f0; padding:40px 20px; text-align:center;
}
.before-after-section h2 {
  color:var(--brand-blue); margin-bottom:20px; font-size:2rem;
}
.before-after-section p.text-center {
  color:var(--text-grey); font-size:1rem;
  margin:0 auto 20px; max-width:800px;
}
/* Slider */
.before-after-slider {
  position:relative; display:inline-block;
  max-width:1000px; margin:40px auto;
  overflow:hidden; vertical-align:middle;
}
.ba-container {
  position:relative; display:inline-block; overflow:hidden;
}
.ba-image.ba-before {
  display:block; max-width:100%; max-height:70vh;
  object-fit:contain; user-select:none; pointer-events:none; z-index:1;
}
.ba-image.ba-after {
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:contain; user-select:none; pointer-events:none;
  clip-path: inset(0 0 0 50%); z-index:2;
}
.ba-slider {
  position:absolute; top:0; bottom:0; left:50%;
  width:4px; background:var(--brand-gold);
  cursor:ew-resize; z-index:3; pointer-events:auto;
}
.ba-handle {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:40px; height:40px;
  background:#fff; border:2px solid var(--brand-gold);
  border-radius:50%; box-shadow:0 0 5px rgba(0,0,0,.2);
  pointer-events:auto;
}
.ba-handle::before,
.ba-handle::after {
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  border:5px solid transparent;
}
.ba-handle::before { left:5px; border-right-color:var(--brand-gold); }
.ba-handle::after  { right:5px; border-left-color: var(--brand-gold); }
.before-after-slider,
.before-after-slider img {
  user-select:none; -webkit-user-select:none;
  -moz-user-select:none; -ms-user-select:none;
}

/* ==========================================================================
   DEVELOPMENT SHOTS
   ========================================================================== */
.development-shots h2 { color:var(--brand-blue); margin-bottom:20px; }
.development-shots p { margin-bottom:20px; }
.development-shots .gallery {
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.development-shots .gallery a {
  flex:0 0 calc(16.66% - 10px);
  max-width:calc(16.66% - 10px);
  box-sizing:border-box; text-align:center;
}
.development-shots .gallery img {
  width:100%; height:auto; display:block;
}
@media (max-width:768px) {
  .development-shots .gallery a {
    flex:0 0 calc(50% - 10px);
    max-width:calc(50% - 10px);
  }
}

/* ==========================================================================
   DEVELOPER DIARY (dd-)
   ========================================================================== */
.dd-section {
  width:100%; background:var(--light-grey); padding:10px 0;
}
.dd-inner {
  max-width:1200px; margin:0 auto; padding:0 10px;
}
.dd-flex {
  display:flex; flex-wrap:wrap; gap:20px;
  justify-content:center; align-items:stretch;
}
.dd-slot {
  display:flex; flex-direction:column;
  background:#fff; cursor:pointer; position:relative;
  overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.1);
  transition:transform .3s ease;
}
.dd-slot:hover { transform:translateY(-5px); }
.dd-large {
  flex:0 0 calc(50% - 20px);
}
.dd-small,
.dd-small-third {
  flex:0 0 calc(33.333% - 20px);
}
@media (max-width:768px) {
  .dd-large,
  .dd-small,
  .dd-small-third {
    flex:0 0 100%;
  }
}
.dd-img-container {
  position:relative; width:100%;
  height:0; padding-top:140%;
  overflow:hidden;
}
.dd-img-container img {
  position:absolute; top:0; left:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease;
}
.dd-slot:hover .dd-img-container img {
  transform:scale(1.05);
}
.dd-under-img { z-index:1; }
.dd-over-img {
  z-index:2; opacity:0; backface-visibility:hidden;
  animation: ddSlotsAnimation 8s linear infinite;
}
@keyframes ddSlotsAnimation {
  0%   { opacity:0; }
  40%  { opacity:0; }
  50%  { opacity:1; }
  90%  { opacity:1; }
 100%  { opacity:0; }
}
.dd-text {
  display:flex; flex-direction:column; flex:1;
  padding:16px; text-align:left;
}
.dd-slot a {
  text-decoration:none!important; color:inherit!important;
}
.dd-slot a:hover {
  text-decoration:none!important; color:inherit!important;
}
.dd-title {
  margin:6px 0; font-size:1.3rem;
  display:inline-block; position:relative;
  transition:color .3s;
}
.dd-title::after {
  content:""; position:absolute; bottom:-2px; left:0;
  width:0; height:1px; background:var(--brand-gold);
  transition: width .3s ease;
}
.dd-project-info {
  margin:6px 0; font-size:.9rem;
  color:var(--brand-gold);
}
.dd-intro {
  margin:10px 0; font-size:.9rem;
  color:var(--text-grey);
}
.dd-link {
  margin-top:auto; font-size:.9rem;
  display:inline-block; position:relative;
  transition:color .3s;
}
.dd-link::after {
  content:""; position:absolute; bottom:-2px; left:0;
  width:0; height:1px; background:var(--brand-gold);
  transition:width .3s ease;
}
.dd-slot:hover .dd-title,
.dd-slot:hover .dd-link {
  color:var(--brand-blue);
}
.dd-slot:hover .dd-title::after,
.dd-slot:hover .dd-link::after {
  width:100%;
}
.dd-pagination-container {
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
  margin-top:10px; padding:8px 0;
  text-align:center;
}
.dd-pagination-container .dd-pagination a {
  display:inline-block; padding:4px 10px; margin:0 2px;
  border:1px solid #ccc; background:#fff; color:#333;
  font-size:.85rem; text-decoration:none;
  transition:background .3s, color .3s;
}
.dd-pagination-container .dd-pagination a:hover {
  background:var(--brand-blue); color:#fff;
}
.dd-pagination-container .dd-pagination a.current {
  background:var(--brand-blue); color:#fff;
  border-color:var(--brand-blue);
}

/* ensure the slots can host an absolute overlay */
.dd-slot {
  position: relative;
}

/* the little blue label box */
.dd-nav-label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--ccg-primary);  /* matches your hero overlay */
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 2px;
  font-size: 0.875rem;
  text-transform: uppercase;
  z-index: 10;
}

/* spacing between each dd-flex row */
.dd-section .dd-flex {
  margin-bottom: 2rem;
}


/* ==========================================================================
   PORTFOLIO SECTION STYLES
   ========================================================================== */
.portfolio-section { background:#fff; padding:60px 0; }
.project-slot {
  display:flex; align-items:stretch; justify-content:center;
  margin:60px 0; cursor:pointer; transition:background .3s ease;
}
.project-image {
  flex:0 0 auto; width:300px; height:300px; overflow:hidden;
}
.project-image img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 2s ease;
}
.project-slot:hover .project-image img {
  transform:scale(1.1);
}
.project-info-box {
  flex:1; background:var(--light-grey);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:20px; transition:background .3s ease;
}
.project-info-box .project-name {
  font-size:1.5rem; margin-bottom:10px;
  position:relative; transition:color .3s ease;
}
.project-info-box .project-name::after {
  content:""; position:absolute; bottom:-2px; left:50%;
  transform:translateX(-50%);
  width:0; height:1px; background:var(--brand-gold);
  transition:width .3s ease;
}
.project-slot:hover .project-info-box .project-name {
  color:var(--brand-blue);
}
.project-slot:hover .project-info-box .project-name::after {
  width:100%;
}
.project-info-box p { margin-bottom:10px; }
.view-project-btn {
  background:var(--brand-blue); color:#fff;
  padding:10px 20px; border-radius:4px;
  text-decoration:none; transition:background .3s ease;
}
.project-slot:hover .view-project-btn {
  background:var(--brand-gold);
}

/* Mobile hide image helper */
.hide-on-mobile {}
@media (max-width:1000px) {
  .hide-on-mobile { display:none!important; }
  .project-info-box {
    height:300px; padding:20px;
  }
}
@media (max-width:680px) {
  .project-slot { flex-direction:row; }
  .project-image {
    width:40%; height:auto;
  }
  .project-info-box {
    width:60%; height:auto; padding:15px;
  }
  .project-info-box .project-name {
    font-size:clamp(1rem,2vw,1.2rem);
  }
  .project-info-box p {
    font-size:clamp(.8rem,2vw,1rem);
  }
  .view-project-btn {
    font-size:clamp(.7rem,1.8vw,.9rem);
    padding:8px 16px;
  }
}

/* ==========================================================================
   WHY CHOOSE US GRID
   ========================================================================== */
.why-choose-grid {
  display:flex; flex-wrap:wrap; gap:2rem;
  justify-content:space-between; margin:0 auto;
  padding:0 20px;
}
.why-choose-item {
  flex:1 1 calc(33.333% - 2rem);
  max-width:calc(33.333% - 2rem);
  text-align:center;
}
@media (max-width:992px) {
  .why-choose-item {
    flex:1 1 calc(50% - 2rem);
    max-width:calc(50% - 2rem);
  }
}
@media (max-width:600px) {
  .why-choose-item {
    flex:1 1 100%; max-width:100%;
  }
}
.why-choose-icon {
  font-size:2.8rem; color:var(--brand-gold); margin-bottom:.75rem;
}
.why-choose-title { font-size:1.25rem; color:var(--brand-blue); }

/* ==========================================================================
   SERVICES INDEX SLOTS
   ========================================================================== */
.service-section {
  background: var(--light-grey);
  padding: 60px 0;
}
.service-grid {
  display:flex; flex-wrap:wrap; gap:2rem;
  margin:0 auto; max-width:1200px; padding:0 20px;
}
.service-card {
  background:#fff; flex:1 1 calc(25% - 2rem);
  display:flex; flex-direction:column;
  border-radius:4px; overflow:hidden;
  text-decoration:none;
  transition:transform .3s ease, box-shadow .3s ease;
}
.service-card:hover {
  transform:translateY(-5px);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.service-card img {
  width:100%; height:auto; display:block;
}
.service-card-content {
  padding:20px; display:flex; flex-direction:column; flex-grow:1;
}
.service-title {
  font-size:1.25rem; margin-bottom:10px;
  position:relative; display:inline-block;
  transition:color .3s;
}
.service-title::after {
  content:""; position:absolute; left:0; bottom:-2px;
  width:0; height:2px; background:var(--brand-gold);
  transition:width .3s ease;
}
.service-card:hover .service-title::after {
  width:100%;
}
.service-tagline {
  color:var(--text-grey); font-size:1rem;
  margin-bottom:15px; flex-grow:1;
}
.service-link {
  display:inline-block; margin-top:auto;
  padding:10px 20px; background:var(--brand-blue);
  color:#fff; font-weight:bold; text-align:center;
  border-radius:4px; text-decoration:none;
  transition:background .3s ease; cursor:pointer;
}
.service-card:hover .service-link {
  background:var(--brand-gold);
}
@media (max-width:1000px) {
  .service-card { flex:1 1 calc(50% - 2rem); }
}
@media (max-width:600px) {
  .service-card { flex:1 1 100%; }
}

/* ==========================================================================
   CONTACT FORM SECTION
   ========================================================================== */
.contact-form {
  background:#fff; padding:60px 20px; text-align:center;
}
.contact-form h2 { color:var(--brand-blue); }
.contact-form form { max-width:600px; margin:0 auto; }
.contact-form input,
.contact-form textarea {
  width:100%; padding:10px; margin-bottom:20px;
  border:1px solid #ccc; border-radius:4px;
}
.contact-form button {
  background:var(--brand-blue); color:#fff;
  padding:10px 20px; border:none; border-radius:4px;
  transition:background .3s ease;
}
.contact-form button:hover,
.contact-form button:active {
  background:var(--brand-gold);
}

/* ==========================================================================
   FOOTER MENU SECTION
   ========================================================================== */
.footer {
  background:#f8f9fa; color:#333; padding:40px 20px;
}
.footer .footer-columns {
  display:flex; flex-wrap:wrap; justify-content:space-between;
}
.footer .footer-column {
  flex:1; min-width:200px; margin:20px;
}
.footer .footer-column h5 {
  color:var(--brand-gold); margin-bottom:10px;
}
.footer a {
  color:#333; text-decoration:none; position:relative;
}
.footer a::after {
  content:""; position:absolute; left:50%; bottom:-2px;
  width:0; height:1px; background:var(--brand-gold);
  transform:translateX(-50%); transition:width .3s;
}
.footer a:hover {
  color:var(--brand-blue);
}
.footer a:hover::after { width:100%; }
.footer .social-icons {
  text-align:center; margin:20px 0;
}
.footer .social-icons i {
  font-size:1.5rem; margin:0 10px;
  color:#333; transition:color .3s;
}
.footer .social-icons i:hover {
  color:var(--brand-blue);
}
.footer-logo {
  text-align:center; margin-bottom:20px;
}
.footer-logo a { text-decoration:none; }
.footer-logo a::after { content:none; }
.footer-logo img {
  max-height:50px; width:auto;
}
.footer .bottom-credits {
  border-top:1px solid var(--brand-gold);
  padding-top:20px; text-align:center;
  font-size:.9rem;
}
.footer .certifications {
  text-align:center; margin-top:20px;
}
.footer .certifications img {
  max-height:60px; margin:0 10px;
}
@media (max-width:500px) {
  .footer-logo img { width:80%; height:auto; }
}

/* ==========================================================================
   JOBS LIST SECTION
   ========================================================================== */
.jobs-fullwidth { width:100%; }
.job-row {
  display:flex; justify-content:space-between;
  align-items:center; padding:1rem 3rem;
  border-bottom:1px solid #ddd; cursor:pointer;
  background:#fff; transition:background .3s;
}
.job-row:hover,
.job-row.active { background:var(--light-grey); }
.job-title {
  font-size:1.4rem; color:var(--text-grey);
  position:relative; margin:0;
  transition:color .3s;
}
.job-title::after {
  content:""; position:absolute; left:50%; bottom:-2px;
  width:0; height:1px; background:var(--brand-gold);
  transform:translateX(-50%); transition:width .3s;
}
.job-row:hover .job-title,
.job-row.active .job-title {
  color:var(--brand-blue);
}
.job-row:hover .job-title::after,
.job-row.active .job-title::after {
  width:100%;
}
.icon-circle {
  width:40px; height:40px; border-radius:50%;
  background:#ccc; display:flex; align-items:center;
  justify-content:center; overflow:hidden;
  transition:background .3s;
}
.job-row:hover .icon-circle,
.job-row.active .icon-circle {
  background:var(--brand-blue);
}
.plus-minus {
  font-size:1.2rem; line-height:1; color:#fff;
}
.job-details {
  max-height:0; overflow:hidden;
  transition:max-height 1s ease;
  border-bottom:1px solid #ddd; padding:0 3rem;
}
.job-details-inner {
  max-width:800px; padding:1rem 0;
}
.job-details-inner h4 {
  font-size:1.2rem; color:var(--brand-blue);
  margin:1rem 0 .5rem;
}
.duties-list li,
.requirements-list li {
  margin-left:1.5rem; margin-bottom:.5rem;
}
.duties-list li::marker,
.requirements-list li::marker {
  color:var(--brand-gold);
}
.application-btn {
  background:var(--brand-blue); color:#fff;
  padding:.6rem 1.2rem; border:none;
  border-radius:4px; cursor:pointer;
  transition:background .3s;
}
.application-btn:hover {
  background:var(--brand-gold);
}
@media (min-width:1000px) {
  .job-details {
    padding-left:calc(3rem + 240px);
  }
}

/* ==========================================================================
   MODAL
   ========================================================================== */
.modal {
  display:none; position:fixed; z-index:9999;
  top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,.4); overflow:auto;
}
.modal-content {
  background:#fff; margin:5% auto; padding:20px;
  width:90%; max-width:600px; border-radius:6px;
  position:relative;
}
.modal-close {
  position:absolute; top:20px; right:20px;
  font-size:1.5rem; cursor:pointer; color:#666;
}
#job-application-form {
  display:flex; flex-direction:column; gap:1rem;
}
#job-application-form label {
  font-weight:bold; color:var(--brand-blue);
}
#job-application-form input,
#job-application-form textarea {
  padding:.5rem; border:1px solid #ccc;
  border-radius:4px; font:inherit;
}
.modal-submit-btn {
  background:var(--brand-blue); color:#fff;
  padding:.6rem 1.2rem; border:none;
  border-radius:4px; cursor:pointer;
  transition:background .3s;
}
.modal-submit-btn:hover {
  background:var(--brand-gold);
}

/* ==========================================================================
   FAQ ACCORDION (better mobile layout)
   ========================================================================== */
@media (max-width:800px) {
  .job-row {
    padding:.75rem 1rem;
    align-items:flex-start;
  }
  .job-title {
    flex:1; font-size:1rem; line-height:1.3;
    margin-right:.5rem;
  }
  .icon-circle {
    width:30px; height:30px; margin-top:4px;
  }
  .plus-minus {
    font-size:1rem;
  }
}


/* 
  Peek of hero image that scrolls up into view.
  On desktop: small slither (25vh) with parallax.
  On mobile: full-screen (100vh) scroll-through, no parallax.
*/
.hero-reveal {
  position: relative;
  width: 100%;
  height: 25vh;
  min-height: 200px;
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
  overflow: hidden;
  will-change: background-position;
}

/* Fallback / full-height on narrower screens */
@media (max-width: 768px) {
  .hero-reveal {
    height: 100vh;
    min-height: auto;
    background-attachment: scroll;
    background-position: center center;
  }
}


#meet-the-team, #slots {
  /* push the scroll-to position down by nav height */
  scroll-margin-top: 32px;
}


/* ———————————————— */
/* Developer Diary Entry */
/* ———————————————— */



/* --- Entry Content --- */
.entry-content .entry-image-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2rem 0;
}
.entry-content .entry-img-container {
  flex: 1;
}
.entry-content .entry-img-container img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* full-width banners */
.entry-content .entry-image-full {
  margin: 2rem 0;
}
.entry-content .entry-image-full img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* paragraphs */
.entry-content .entry-paragraph {
  margin: 2rem 0;
  line-height: 1.6;
}

/* small square images */
.entry-small-images {
  display: grid;
  gap: 1rem;
  margin: 2rem 0;
}
.entry-small-images.three {
  grid-template-columns: repeat(3,1fr);
}
.entry-small-images.two {
  grid-template-columns: repeat(2,1fr);
}
.entry-small-images .small-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* button outline */
.button-outline {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--ccg-primary);
  color: var(--ccg-primary);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
  margin-top: 1rem;
}
.button-outline:hover {
  background: var(--ccg-primary);
  color: #fff;
}

/* ————————————————————— */
/* Entry-content: paragraphs */
/* ————————————————————— */
.entry-content .entry-paragraph {
  margin: 2rem auto;
  max-width: 600px;      /* comfortable reading width */
  white-space: pre-wrap; /* preserve source line breaks & spacing */
  line-height: 1.6;
}

/* ————————————————————— */
/* Entry-content: responsive images */
/* ————————————————————— */
@media (max-width: 768px) {
  /* three-square grid: first two half-width, third full-width */
  .entry-small-images.three {
    grid-template-columns: 1fr 1fr;
  }
  .entry-small-images.three .small-img:nth-child(3) {
    grid-column: 1 / -1;
  }

  /* all side-by-side (landscape) rows become full-width stacks */
  .entry-content .entry-image-row {
    flex-direction: column;
  }
  .entry-content .entry-image-row .entry-img-container {
    width: 100%;
  }
}


/* ————————————————————— */
/* T&Cs pages */
/* ————————————————————— */


.terms-wrapper {
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 2rem 0;
}

.terms-wrapper .terms-heading {
  font-size: 1.1rem;
  color: #f6a61d; /* Brand yellow */
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.8rem;
}

.terms-wrapper ul {
  margin: 0 0 1.2rem 1.2rem;
  padding: 0;
  list-style: disc;
}

.terms-wrapper ul li {
  margin-bottom: 0.5rem;
}

.terms-wrapper p {
  margin-bottom: 1.5rem;
}