@charset "UTF-8";
/* ============================
   FABRICATION PAGE STYLES — CLEAN REBUILD (FINAL MERGE)
   - Bottom overrides integrated into the right sections
   - Duplicate/conflicting rules removed
   - Desktop behavior preserved down to 769px
   - Mobile switch at hamburger (<=768px)
   ============================ */

/* ==========================================
   GLOBAL OVERRIDES & ELEMENT ADJUSTMENTS
   ========================================== */

html{ scroll-behavior: smooth; }

#circular-economy{ scroll-margin-top: 80px; }

h2.script-title,
h2.script-title-white{
  margin-bottom: 1.8rem;
}

/* Style des mots en gras dans la section label */
.label-text strong{
  color: #fff;
  font-weight: 600;
}

.highlight{
  color: var(--brand-orange);
  font-weight: 700;
}

.highlight-orange{
  color: var(--brand-orange);
  font-weight: 700;
}

/* ==========================================
   SECTION 1 — HERO (image + overlay + bubble system)
   ========================================== */

.fabrication-hero{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.fabrication-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay frame */
.fabrication-hero .hero-overlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 6rem 1.5rem 2rem;
  text-align: center;
}

/* Legacy overlay title styling (kept for safety if bubble not used) */
.fabrication-hero .hero-overlay h2{
  color: #fff;
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  text-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.fabrication-hero .brand-name{
  color: var(--brand-orange);
}

/* ==========================================
   DESKTOP ALIGNMENT TOOLS (shared)
   Apply classes on .hero-overlay / .eco-overlay:
   - overlay--tl  (top-left)
   - overlay--tr  (top-right)
   - overlay--center (center)
   Optional padding nudges:
   - overlay--pad-lg / md / sm
   ========================================== */

.overlay--tl{ place-items: start start; }
.overlay--tr{ place-items: start end; text-align: right; }
.overlay--center{ place-items: center center; text-align: center; }

.overlay--pad-lg{ padding: 3rem; }
.overlay--pad-md{ padding: 2.2rem; }
.overlay--pad-sm{ padding: 1.6rem; }

/* ==========================================
   FINAL: ONE bubble system (PERFECT CIRCLE) — Hero + Eco
   - Desktop: placement driven by overlay--tl / overlay--tr
   - <=1024: forced centered overlays
   - <=768: ratio switch + mobile bubble sizing
   ========================================== */

/* Overlay frame baseline for bubble usage */
.fabrication-hero .hero-overlay,
.fabrication-eco-image .eco-overlay{
  position: absolute;
  inset: 0;
  display: grid;
  padding: clamp(1.5rem, 3vw, 3rem);
}

/* PERFECT CIRCLE glass bubble */
.title-bubble{
  position: relative;
  width: clamp(260px, 34vw, 410px); /* default (hero) */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;

  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: clamp(1rem, 1.8vw, 1.6rem);

  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(8px) saturate(105%);
  -webkit-backdrop-filter: blur(8px) saturate(105%);

  box-shadow:
    0 30px 80px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

.title-bubble::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background: radial-gradient(
    circle at 30% 25%,
    rgba(255,255,255,0.35),
    rgba(255,255,255,0.10) 42%,
    transparent 70%
  );
  pointer-events:none;
}

.title-bubble h2{
  margin: 0;
  max-width: 92%;
  color: #fff;
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  text-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* HERO bubble: top-right + rotate (only when used) */
.fabrication-hero .hero-overlay.overlay--tr .title-bubble{
  transform: rotate(7deg);
  transform-origin: center;
}

/* ==========================================
   SECTION 2 — INTRO (centered text)
   ========================================== */

.fabrication-intro{ height: auto; }

.centered-text{
  text-align: center;
  padding: 8rem 1.5rem 7rem;
}

.centered-text h2{
  font-size: clamp(2.2rem, 5vw, 3rem);
}

.centered-text .brand-name{
  color: var(--brand-orange);
}

/* ==========================================
   SECTION 3 — TERRITOIRE (text + map)
   ========================================== */

.fabrication-territoire{
  padding: 7rem 0 3rem;
  background: var(--bg-light);
  min-height: 65vh;
  display: flex;
  align-items: center;
}

.territoire-grid{
  max-width: 1200px;
  display: flex;
  flex-wrap: nowrap;
  gap: 3rem;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 1rem 2rem 4rem;
}

.territoire-grid .text,
.territoire-grid .map{
  flex: 0 0 50%;
  max-width: 44%;
}

.territoire-grid .map{
  display: flex;
  justify-content: center;
  align-items: center;
}

.territoire-grid .map img{
  width: 90%;        /* ← THIS is your master control */
  max-width: 90%;
  height: auto;
  object-fit: contain;
}

/* ==========================================
   SECTION 4 — LABELS + WAVE (stable wave system)
   ========================================== */

.fabrication-labels{
  position: relative;
  background: var(--bg-light);
  overflow: hidden;
  padding: 0;            /* IMPORTANT: spacing goes on .labels-grid */
  min-height: 620px;     /* stable desktop baseline */
}

/* SVG full-frame background */
.fabrication-labels .fabrication-wave,
.fabrication-wave{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  transform: none;       /* cancels any earlier translateY systems */
}

/* Foreground content */
.fabrication-labels .labels-grid,
.labels-grid{
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: 1200px;
  margin: .5rem auto 0;

  padding: 6rem 2rem;     /* IMPORTANT: spacing is here */

  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

.label-left,
.label-text{
  flex: 0 0 50%;
  max-width: 44%;
}

.label-left{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.label-left img{
  max-height: 8rem;
  width: auto;
  flex-shrink: 1;
}

/* Logo sizing tweaks */
.suissegarantie{
  transform: scale(1.4);
  transform-origin: center;
  padding-left: 2rem;
}

.biosuisse{
  transform: scale(.9);
  transform-origin: center;
}

/* ==========================================
   SECTION 5 — CERTIFICATION (FSSC)
   ========================================== */

.fabrication-certification{
  background: var(--bg-light);
  color: #000;
  padding: 7rem 0;
  min-height: 50vh;
  margin-top: -6rem;
}

.certification-grid{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem 2rem;
}

.cert-logo,
.cert-text{
  flex: 0 0 50%;
  max-width: 44%;
}

.cert-logo{
  display: flex;
  justify-content: center;
  align-items: center;
}

.cert-logo img{
  max-height: 4rem;
  width: auto;
  flex-shrink: 1;
}



/* ==========================================
   SECTION 6 — ECO IMAGE (image + overlay + bubble)
   ========================================== */

.fabrication-eco-image{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  margin-top: 3.5rem;
}

.fabrication-eco-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16 / 9;
}

/* Legacy overlay title styling (kept for safety if bubble not used) */
.fabrication-eco-image .eco-overlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.fabrication-eco-image .eco-overlay h2{
  color: #fff;
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(1.9rem, 6vw, 2.8rem);
  text-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.fabrication-eco-image .eco-overlay .brand-name{
  color: var(--brand-orange);
}

/* ECO bubble sizing (desktop controlled version from your final) */
.fabrication-eco-image .title-bubble{
  width: clamp(240px, 27vw, 380px);
}

/* ECO — force placement + padding + rotation (DESKTOP only) */
@media (min-width: 1025px){
  .fabrication-eco-image .eco-overlay.overlay--tl,
  .fabrication-eco-image .eco-overlay.overlay--tr,
  .fabrication-eco-image .eco-overlay.overlay--center{
    place-items: start start !important;
    padding: 4rem 8rem !important;
    text-align: left !important;
  }

  .fabrication-eco-image .title-bubble{
    transform: rotate(-7deg) translate(-2%, -2%) !important;
    transform-origin: 70% 65%;
  }
}

/* ==========================================
   SECTION 7 — ECO TEXT (circular economy block)
   ========================================== */

.fabrication-eco-text{
  margin: 0 ;
  padding: 6rem 2rem;
}

.centered-title{
  text-align: center;
  margin-bottom: 3rem;
}

.centered-title h2{
  font-size: clamp(2.2rem, 5vw, 3rem);
}

.centered-title .brand-name{
  color: var(--brand-orange);
}

.eco-grid{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eco-text{
  margin: 0 ;
  text-align: center;
}

.fabrication-eco-text h2{
  color: var(--brand-orange);
}

/* ==========================================
   SECTION 8 — HISTOIRE BUTTON
   ========================================== */

.histoire-button{
  position: relative;
  width: clamp(140px, 15vw, 180px);
  height: clamp(140px, 15vw, 180px);
  margin: 0 auto 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 60%;
  animation: breathe 4.5s ease-in-out infinite;
  z-index: 10;
  cursor: pointer;
}

.histoire-button,
.histoire-button:visited,
.histoire-button:hover,
.histoire-button:active{
  text-decoration: none;
}

.histoire-button-inner{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(1);
}

.histoire-button:hover .histoire-button-inner{
  animation: springPop 0.65s cubic-bezier(.22,1.28,.4,1) both;
}

.histoire-button:hover{
  animation-play-state: paused;
}

.button-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
}

.script-button{
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-script);
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  line-height: 1.25;
  pointer-events: none;
}

/* Animations */
@keyframes breathe{
  0%   { transform: rotate(-7deg) scale(.9); }
  50%  { transform: rotate(-3deg) scale(1.1); }
  100% { transform: rotate(-7deg) scale(.9); }
}

@keyframes springPop{
  0%   { transform: scale(1.05); }
  35%  { transform: scale(1.14); }
  60%  { transform: scale(1.08); }
  80%  { transform: scale(1.11); }
  100% { transform: scale(1.09); }
}

@media (prefers-reduced-motion: reduce){
  .histoire-button{ animation: none; }
  .histoire-button:hover .histoire-button-inner{
    animation: none;
    transform: scale(1.05);
  }
}

/* ==========================================
   RESPONSIVE — TABLET & BELOW (<=1024px)
   - Stack grids + reorder illustration first
   - Center text
   - Stop vh-locking on labels
   - Center overlays + bubble sizes
   ========================================== */

@media (max-width: 1024px){

  /* Stack + center */
  .territoire-grid,
  .labels-grid,
  .certification-grid{
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 2.5rem;
    text-align: center;
  }

  /* Reorder */
  .territoire-grid .map{ order: 1; }
  .territoire-grid .text{ order: 2; }

  .labels-grid .label-left{ order: 1; }
  .labels-grid .label-text{ order: 2; }

  .certification-grid .cert-logo{ order: 1; }
  .certification-grid .cert-text{ order: 2; }

  /* Full width columns */
  .territoire-grid .text,
  .territoire-grid .map,
  .labels-grid .label-left,
  .labels-grid .label-text,
  .certification-grid .cert-logo,
  .certification-grid .cert-text{
    flex: 1 1 auto;
    max-width: var(--p-measure);
  }

  /* Labels wave: remove hard vh systems */
  .fabrication-labels{
    height: auto !important;
    min-height: 760px;
  }

  .labels-grid{
    padding: 5rem 1.5rem !important;
  }

  /* Overlay centered */
  .fabrication-hero .hero-overlay,
  .fabrication-eco-image .eco-overlay{
    place-items: center center !important;
    text-align: center !important;
    padding: 2.4rem 1.5rem !important;
  }

  .title-bubble h2{
    font-size: clamp(1rem, 3.8vw, 2.3rem) !important;
  }

  /* Certification: logo visible in column layout */
  .certification-grid .cert-logo{
    flex: none;
    max-width: none;
    width: auto;
    display: flex;
    justify-content: center;
  }

  .certification-grid .cert-logo img{
    max-width: 260px;
    height: auto;
  }
	
	/* Stack layout */
.territoire-grid{
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Map container reset */
.territoire-grid .map{
  order: 1;
  margin-top: 0;              /* remove desktop negative shift */
  display: flex;
  justify-content: center;    /* center horizontally */
  width: 100%;
}

/* Image centering */
 .territoire-grid .map img{
    width: min(520px, 80vw);
    max-width: 100% !important;
    max-height: none;
  }

}

/* ==========================================
   FINAL FIX — Keep desktop behavior until hamburger (>=769px)
   - Cancels portrait 4:5 experiments by force
   ========================================== */

@media (min-width: 769px){
  .fabrication-hero,
  .fabrication-eco-image{
    aspect-ratio: 16 / 9 !important;
  }

  /* HERO placement preserved (desktop down to 769) */
  .fabrication-hero .hero-overlay.overlay--tr{
    place-items: start end !important;
    text-align: right !important;
    padding-top: 6rem !important;
    padding-right: 6rem !important;
  }

  .fabrication-hero .hero-overlay.overlay--tl{
    place-items: start start !important;
    text-align: left !important;
    padding-top: 6rem !important;
    padding-left: 5rem !important;
  }

  /* ECO placement preserved (desktop down to 769) */
  .fabrication-eco-image .eco-overlay.overlay--tl,
  .fabrication-eco-image .eco-overlay.overlay--tr,
  .fabrication-eco-image .eco-overlay.overlay--center{
    place-items: start start !important;
    text-align: left !important;
    padding: 4rem 8rem !important;
  }
	
	
}

/* ==========================================
   HAMBURGER / MOBILE (<=768px)
   - Ratio switch to 3:5
   - Center overlays + bubble sizing
   - Consistent side padding
   - Map sizing safety
   ========================================== */

@media (max-width: 768px){

  .fabrication-territoire{
    padding: 5rem 0;
    min-height: auto;
  }

  .territoire-grid{
    padding: 1rem 1.25rem 2rem;
  }
	
   .territoire-grid .map{
  margin-bottom: 2.5rem;  /* try 2rem–3.5rem */
}
	
	.labels-grid .label-left{
  margin-bottom: 4rem;  /* increases space before title */
}
	
		.certification-grid .cert-logo{
  margin-bottom: 3rem;   /* try 2.5rem–3rem */
}

  .fabrication-certification{
    margin-top: 0;
    padding: 0rem 0;
    min-height: auto;
  }

  .certification-grid{
    padding: 2rem 1.25rem;
  }

  .fabrication-hero,
  .fabrication-eco-image{
    aspect-ratio: 3 / 4 !important;
  }

  .fabrication-hero .hero-overlay,
  .fabrication-eco-image .eco-overlay{
    place-items: center center !important;
    text-align: center !important;
    padding: 0 !important;
  }

  .fabrication-hero .title-bubble {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: rotate(0deg) translate(-50%, -50%) !important;
    width: clamp(190px, 60vw, 300px) !important;
  }
	
	.fabrication-eco-image .title-bubble {
	position: absolute;
    top: 45%;
    left: 50%;
    transform: rotate(7deg) translate(-50%, -50%) !important;
    width: clamp(170px, 55vw, 245px) !important;
	}
	
	.fabrication-hero .title-bubble h2,
.fabrication-eco-image .title-bubble h2{
  font-size: clamp(1.8rem, 6vw, 2.3rem) !important;
  line-height: 1.15;
}

  .territoire-grid .map img{
    width: min(360px, 75vw);   /* ← CHANGE THIS */
    max-width: 100%;
    height: auto;
  }

  /* Labels section baseline on mobile */
  .fabrication-labels{
    min-height: 720px;
  }

  .fabrication-labels .label-left img{
    height: 6.5rem;
  }

  /* Mobile side margins (match Index) */
  .fabrication-intro,
  .fabrication-eco-text,
  .fabrication-territoire .text,
  .fabrication-labels .label-text,
  .fabrication-certification .cert-text{
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
	
	  .fabrication-territoire,
  .fabrication-certification,
  .fabrication-eco-text{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
	
	.fabrication-eco-image img{
    transform: scale(1.1) translateY(2%);
    
  }
	
	/* 1) More breathing above this specific title block */
  .fabrication-eco-text .centered-title{
    margin-top: 4rem;     /* ↑ increases space before h2 */
    margin-bottom: 1.5rem;  /* ↓ reduces space below h2 block */
  }

  /* 2) Remove extra default h2 bottom margin in this block */
  .fabrication-eco-text .centered-title h2{
    margin-bottom: 0;       /* prevents stacking with margin-bottom above */
  }

  /* 3) Reduce top margin on the paragraph in this section */
  .fabrication-eco-text p{
    margin-bottom: 4rem;     /* was 1.5rem via cross-section rule */
  }
	
	.histoire-button{
  margin-top: 6rem;   /* increase space above button */
}
	
}

/* ==========================================
   DESKTOP TEXT-ALIGN INTENT (>=1025px)
   - Opposite-side alignment like your final block
   ========================================== */

@media (min-width: 1025px){
  .territoire-grid .text{ text-align: right; }
  .labels-grid .label-text{ text-align: left; }
  .certification-grid .cert-text{ text-align: right; }
	
	.fabrication-labels{
    display: flex;
    align-items: center;     /* vertical centering */
  }

  /* remove the big vertical padding that pushes content upward */
  .fabrication-labels .labels-grid{
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ==========================================
   GLOBAL FIX — Vertically center label section (ALL SCREENS)
   ========================================== */

.fabrication-labels{
  display: flex;
  align-items: center;        /* vertical centering */
  justify-content: center;    /* horizontal safety */
}

/* Remove vertical padding that pushes content upward */
.fabrication-labels .labels-grid{
  margin: 0 auto;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Make inner content perfectly centered in column mode too */
@media (max-width: 1024px){
  .fabrication-labels{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .labels-grid{
    justify-content: center;
  }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px){
  .territoire-grid,
  .labels-grid,
  .certification-grid{
    gap: 8rem !important; 
  }
}

/* Mobile (stacked layout → vertical spacing) */
@media (max-width: 768px){
  .territoire-grid,
  .labels-grid,
  .certification-grid{
    gap: 4rem;
  }
}

/* ==========================================
   TABLET FIX — Reduce map size (<1024px)
   ========================================== */

@media (max-width: 1024px){

  .territoire-grid .map{
    display: flex;
    justify-content: center;
  }
	
	 h2.script-title,
  h2.script-title-white{
    margin-bottom: 1.2rem;
}
	  .certification-grid .cert-logo img{
    transform: scale(1.2);
    transform-origin: center;
  }

}

/* ==========================================
   TABLET FIX (769–1024) — keep ECO bubble rotation like desktop
   ========================================== */
@media (min-width: 769px) and (max-width: 1024px){
  .fabrication-eco-image .title-bubble{
    transform: rotate(-7deg) translate(-2%, -2%) !important;
    transform-origin: 70% 65% !important;
  }
	
	  .territoire-grid .map img{
    width: min(400px, 55vw);   /* ← CHANGE THIS */
    max-width: 100%;
    height: auto;
  }
}

/* ==========================================
   FORCE CENTER — "Notre ADN" title
   ========================================== */

.fabrication-eco-text .centered-title{
  text-align: center !important;
}

.fabrication-eco-text .centered-title h2{
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}


@media (min-width: 1025px){
  .fabrication-territoire .map{
    transform: translateY(-30px);
  }
}

/* ==========================================
   Mobile line-length clamp — Fabrication
   ========================================== */
@media (max-width: 767px){

  .fabrication-section .text,
  .fabrication-section p{
    max-width: 50ch !important;
    margin-left: auto;
    margin-right: auto;
  }

}

.fabrication-hero-title-section{
  background: var(--bg-light);
  min-height: calc(100svh - 110px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
}

.fabrication-hero-title-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



.fabrication-hero-title-inner > h2:first-child{
  color: var(--text-color);
  font-size: clamp(2.7rem, 5vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1rem !important;
}

.fabrication-hero-title-inner .script-title{
  color: var(--brand-orange);
  font-size: clamp(2.2rem, 7vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
}

@media (max-width: 768px){
  .fabrication-hero-title-section{
    min-height: calc(100svh - 76px);
  }
}

.fabrication-eco-text .centered-title.adn-title{
  text-align: center;
  margin: 0 auto 3rem;
}

.fabrication-eco-text .centered-title.adn-title > h2:first-child{
  margin: 0;
  color: var(--text-color);
}

.fabrication-eco-text .centered-title.adn-title .script-title{
  margin-top: -0.2rem;
  margin-bottom: 0;
  color: var(--brand-orange);
}

@media (max-width: 768px){
  .fabrication-eco-text{
    padding-top: 4rem;
  }
}

@media (max-width: 767px){

  .fabrication-territoire .prose,
  .fabrication-labels .prose,
  .fabrication-certification .prose,
  .fabrication-eco-text .prose{
    width: min(50ch, calc(100% - 2.5rem)) !important;
    max-width: min(50ch, calc(100% - 2.5rem)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  .fabrication-territoire .prose p,
  .fabrication-labels .prose p,
  .fabrication-certification .prose p,
  .fabrication-eco-text .prose p{
    max-width: none !important;
  }
}

@media (max-width: 768px){
  .certification-grid .cert-logo img{
    transform: scale(.93);
  }
}

.fabrication-hero-title-inner{
  transform: translateY(-10%);
}

@media (max-width: 768px){
  .fabrication-hero-title-inner{
    transform: translateY(-20%);
  }
}