html {
scroll-behavior: smooth;
scroll-snap-type: none;
}
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: #000;
color: #fff;
text-align: center;
overflow-x: hidden;
overflow-y: auto;
cursor: none;
}
a, button { font-family: inherit; cursor: none;color: white;text-decoration: none; }
section { position: relative; overflow: hidden; } .cursor {
width:50px; height:50px;
background:#fff; border-radius:50%;
position:fixed; top:0; left:0;
pointer-events:none;
transform:translate(-50%,-50%);
transition:width .2s, height .2s, transform .15s, background-color .2s;
mix-blend-mode:difference;
z-index:10000;
}
@media (max-width:768px){ .cursor{ display:none } } .custom-rounded-header {
position: fixed;
top: 15px;
left: 50%;
transform: translate(-50%, -20px);
width: 90%;
max-width: 600px;
height: 60px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(15px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
opacity: 0;
animation: headerSlideDown .6s ease-out .4s forwards;
z-index: 1000;
}
@media (min-width: 768px) {
.custom-rounded-header {
top: 30px;
}
}
@keyframes headerSlideDown {
from {
opacity: 0;
transform: translate(-50%, -20px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
} .custom-nav-list {
display: flex;
gap: 30px;
list-style: none;
margin: 0;
padding: 0 1rem 0 0;
position: relative;
} .custom-nav-list::after {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
height: 1.5rem;
border-right: 1px solid #fff;
} .custom-nav-list a {
color: #fff;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
transition: opacity .3s;
}
.custom-nav-list a:hover {
opacity: .6;
color: #ccc;
} .header-social {
display: flex;
gap: 0.5rem;
margin-left: 0.75rem;
} .header-social a {
color: #fff !important;
font-size: 1.2rem;
transition: transform .2s;
}
.header-social a:hover {
transform: translateY(-2px);
} @media (max-width: 768px) {
.custom-rounded-header {
width: 80%; height: 70px; padding: 0 0.5rem;
}
.custom-nav-list {
gap: 12px;
padding-right: 0.5rem;
}
.custom-nav-list::after {
height: 1.3rem;
}
.custom-nav-list a {
font-size: 0.9rem;
}
.header-social {
gap: 0.4rem;
margin-left: 0.5rem;
}
.header-social a {
font-size: 1rem;
}
} .site-footer {
width: 100%;
background-color: #000;
color: #fff;
padding: 80px 20px; margin-top: 60px;
border-top: 2px solid #444; overflow-x: hidden;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center; align-items: center;
gap: 60px;
text-align: center;
padding: 0 10px;
} .footer-nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 40px;
}
.footer-nav-list a {
position: relative;
color: #fff;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
padding-bottom: 4px;
transition: color 0.3s;
}
.footer-nav-list a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: #fff;
transition: width 0.3s ease;
}
.footer-nav-list a:hover {
color: #ddd;
}
.footer-nav-list a:hover::after {
width: 100%;
} .footer-social {
display: flex;
gap: 25px;
}
.footer-social a {
font-size: 1.8rem;
color: #fff;
transition: transform 0.3s, color 0.3s;
}
.footer-social a:hover {
color: #1da1f2; transform: translateY(-3px);
} @media (max-width: 768px) { html, body {
overflow-x: hidden;
} .site-footer {
padding: 40px 0; } .footer-container {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 30px;
} .footer-nav-list {
width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center; gap: 20px;
text-align: center; }
.footer-nav-list li {
list-style: none;
} .footer-nav-list li:nth-child(3) {
flex: 0 1 100%;
}
.footer-nav-list a {
display: inline-block;
padding: 4px 0;
color: #fff;
text-decoration: none;
position: relative;
transition: color 0.3s, transform 0.1s;
}
.footer-nav-list a::after {
content: "";
position: absolute;
left: 0; bottom: 0;
height: 2px;
width: 0;
background: #fff;
transition: width 0.3s ease;
}
.footer-nav-list a:hover {
color: #ddd;
}
.footer-nav-list a:hover::after {
width: 100%;
}
.footer-nav-list a:active {
transform: scale(0.95);
} .footer-social {
width: 100%;
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.footer-social a {
font-size: 1.8rem;
color: #fff;
transition: color 0.3s, transform 0.3s;
}
.footer-social a:hover {
color: #1da1f2;
transform: translateY(-3px);
}
} .top-section {
background:url(//graphyali.fr/wp-content/themes/graphyali-theme/img/cadrillage.png) no-repeat center center fixed;
background-size:cover;
display:flex; align-items:center; justify-content:center;
height:100vh; scroll-snap-align:start;
}
.top-left, .top-right, .bottom-left, .bottom-right {
position:absolute; font-size:24px; font-weight:500; letter-spacing:1px;
}
.top-left{top:30px;left:30px}
.top-right{top:30px;right:30px}
.bottom-left{bottom:30px;left:30px}
.bottom-right{bottom:30px;right:30px}
@media (max-width:768px){
.top-left, .top-right, .bottom-left, .bottom-right{font-size:16px}
.top-left{top:100px;left:20px}
.top-right{top:100px;right:20px}
.bottom-left{bottom:20px;left:20px}
.bottom-right{bottom:20px;right:20px}
}
.top-section .dot {
position:absolute; width:50px; height:50px;
background:#fff; border-radius:50%;
top:25%; left:50%; transform:translate(-50%,-50%);
pointer-events:none; z-index:1;
} .center {
position:relative; display:inline-block; text-align:left; z-index:2;
}
.center h1 {
font-size:60px; text-transform:uppercase;
margin:0 0 12px; padding-bottom:4px; overflow:hidden;
cursor:none; position:relative;
}
.center h1::after {
content:""; position:absolute; bottom:0; left:0;
width:100%; height:4px;
background:linear-gradient(to right,#fff,rgba(255,255,255,0));
transform-origin:left center; transform:scaleX(.2);
transition:transform .6s,background .6s;
}
.center h1:hover::after {
transform:scaleX(.6); background:#fff;
}
.center p {
position:absolute; bottom:-30px; right:0;
font-size:20px; background:orangered; color:#fff;
padding:4px 12px; border-radius:20px; white-space:nowrap;
}
@media (max-width:768px){
.center h1{font-size:40px}
.center p{font-size:16px;bottom:-24px;padding:3px 10px}
}  .scroll-indicator {
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 50px;
border: 2px solid #fff;
border-radius: 15px;
box-sizing: content-box;
z-index: 1;
pointer-events: none; } .scroll-indicator .scroll-line {
position: absolute;
top: 10%;
left: 50%;
width: 2px;
height: 8px;
background: #fff;
border-radius: 1px;
transform: translateX(-50%);
animation: scrollLine 1.5s ease-in-out infinite;
} @keyframes scrollLine {
0%   { top: 10%; opacity: 1; }
50%  { top: 60%; opacity: 0.5; }
100% { top: 10%; opacity: 1; }
} .fade-in, .video-block {
opacity:0; transform:translateY(30px);
transition:opacity .8s ease-out, transform .8s ease-out;
}
.fade-in.visible, .video-block.visible {
opacity:1; transform:translateY(0);
} .video-container {
display:flex; justify-content:center; align-items:flex-start;
flex-wrap:nowrap; padding:30px 0; width:100%;
background:url(//graphyali.fr/wp-content/themes/graphyali-theme/img/cadrillage.png) repeat center center fixed;
gap:30px; overflow:hidden; background-size:cover;
scroll-snap-type: none !important;
}
.video-block {
display:flex; flex-direction:column; align-items:center;
width:650px;
}
.video-wrapper {
position:relative; width:100%; height:500px; overflow:hidden;
border-radius:15px; opacity:0; transform:translateY(50px);
transition:opacity .6s ease-out, transform .6s ease-out;
}
.video-wrapper.visible { opacity:1; transform:translateY(0) }
.video-wrapper video {
width:100%; height:100%; object-fit:cover; border-radius:15px;
transition:transform .3s,filter .3s; pointer-events:none;
}
.video-wrapper:hover video { transform:scale(1.05); filter:blur(3px) }
.video-wrapper .btn {
position:absolute; bottom:40px; left:50%; transform:translateX(-50%) scale(1);
padding:12px 18px; color:white; font-size:16px; font-weight:bold;
cursor:pointer; border-radius:999px; background:rgba(255,255,255,0.05);
backdrop-filter:blur(15px) saturate(180%);
border:1px solid rgba(255,255,255,0.2);
opacity:0; transition:opacity .3s, transform .3s;
}
.video-wrapper:hover .btn{ opacity:1 }
.video-wrapper .btn:hover{ transform:translateX(-50%) scale(1.1) }
.video-info {
text-align:center; margin-top:5px; opacity:0; transform:translateY(30px);
transition:opacity .8s, transform .8s; transition-delay:.2s;
}
.video-info.visible { opacity:1; transform:translateY(0) }
.video-info h3 {
font-size:22px; font-weight:bold; text-transform:uppercase;
letter-spacing:1px; color:#fff; margin-bottom:5px;
font-family:'Akira Expanded',sans-serif;
}
.video-info p { font-size:15px; color:#bbb; line-height:1.4 }
.video-carousel-dots {
display: none;
}  @media (max-width: 768px) {
.video-container { justify-content: flex-start !important; padding: 0 10% !important; scroll-padding-left: 10% !important;
scroll-padding-right: 10% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: x mandatory !important;
}
.video-wrapper .btn {
font-size: 12px;
padding: 14px 18px;
}
.video-container .video-block {
flex: 0 0 80%;
scroll-snap-align: center;
}
.video-container::-webkit-scrollbar { display: none; }
.video-carousel-dots {
position: absolute;
bottom: -0.5px; left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
.video-carousel-dots button {
width: 8px; height: 8px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.4);
cursor: pointer;
transition: background 0.3s;
padding: 0;
}
.video-carousel-dots button.active {
background: #f60;
}
}  .about-wrapper {
margin: 80px auto;
max-width: 1500px;
width: 90%;
display: flex;
gap: 80px; opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
} .about-wrapper.visible {
opacity: 1;
transform: translateY(0);
} @keyframes slideInLeft {
from { opacity: 0; transform: translateX(-50px); }
to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(50px); }
to   { opacity: 1; transform: translateX(0); }
}
@keyframes growLine {
from { width: 0; }
to   { width: 60px; }
} .about-card,
.skills {
opacity: 0;
} .about-wrapper.animate .about-card {
animation: slideInLeft 1.5s ease-out forwards;
}
.about-wrapper.animate .skills {
animation: slideInRight 1.5s ease-out forwards;
} .about-card {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 16px;
padding: 30px;
flex: 1;
transition: transform .3s ease, box-shadow .3s ease;
}
.about-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 24px rgba(0,0,0,0.5);
}
.about-card h2,
.about-card p {
color: #fff;
} .about-card h2 {
font-size: 2rem;
text-align: center;
margin-bottom: 12px;
position: relative;
}
.about-card h2::after {
content: '';
display: block;
height: 4px;
background: #f60;
margin: 8px auto 0;
border-radius: 2px;
width: 0;
animation: growLine 1.5s ease-out 0.5s forwards;
} .about-card p {
line-height: 1.6;
margin-bottom: 25px;
text-align: justify;
text-justify: inter-word; background: linear-gradient(
to bottom,
#f60 0%,
#f60 var(--fill, 0%),
#fff var(--fill, 0%),
#fff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: background 0.2s ease-out;
} .wp-block-buttons .wp-block-button__link {
display: inline-block;
padding: 14px 28px;
border: 2px solid #f60;
border-radius: 9999px;
background: transparent;
color: #f60;
font-weight: bold;
text-decoration: none;
transition: background-color .3s ease, color .3s ease, transform .2s ease, box-shadow .2s ease;
}
.wp-block-buttons .wp-block-button__link:hover {
background: #f60;
color: #111;
transform: translateY(-2px) scale(1.02);
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
} .skills {
flex: 1;
display: flex;
flex-direction: column;
gap: 24px;
justify-content: center;
padding-top: 50px;
} .skill {
display: flex;
align-items: center;
gap: 16px;
transition: transform .3s;
}
.skill:hover {
transform: translateY(-4px);
}
.skill img {
width: 40px;
height: 40px;
transition: transform .3s, filter .3s;
}
.skill:hover img {
transform: scale(1.15);
filter: brightness(1.2);
} .wp-block-group.skill-bar {
flex: 1;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 20px;
height: 20px;
position: relative;
overflow: hidden;
transition: background .3s, box-shadow .3s;
box-shadow: 0 4px 6px rgba(0,0,0,0.4);
}
.wp-block-group.skill-bar:hover {
background: rgba(255,255,255,0.15);
} .wp-block-group.skill-bar .wp-block-group.progress {
position: absolute;
left: 0; top: 0;
width: 0;
height: 100%;
border-radius: 20px;
transition: width 2s ease-out;
} .wp-block-group.skill-bar .wp-block-group.label {
position: absolute;
right: 8px; top: 50%;
transform: translateY(-50%);
font-size: 0.75rem;
color: rgba(255,255,255,0.3);
font-weight: bold;
opacity: 0;
transition: opacity .6s 2s;
}
.wp-block-group.skill-bar.animate .wp-block-group.label {
opacity: 1;
} .wp-block-group.skill-bar.blender .wp-block-group.progress {
background: linear-gradient(90deg,#f60,#ff9a3c);
}
.wp-block-group.skill-bar.photoshop .wp-block-group.progress {
background: linear-gradient(90deg,#001e36,#31a8ff);
}
.wp-block-group.skill-bar.illustrator .wp-block-group.progress {
background: linear-gradient(90deg,#ff9a00,#ffcd00);
} @media (max-width: 768px) { .about-wrapper {
display: block !important;
width: 80% !important;
margin: 40px auto !important;
} .about-card,
.skills {
width: 100% !important;
margin: 0 auto 20px !important;
}
.about-card h2 {
font-size: 1.5rem; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; } .skills {
display: block !important;
}
.skill {
display: flex !important;
margin-bottom: 20px;
align-items: flex-start;
} .wp-block-group.skill-bar {
width: 100% !important;
height: 16px !important;
margin-top: 8px;
} .wp-block-group.skill-bar .wp-block-group.progress {
width: 0; height: 100%;
transition: width 2s ease-out;
} .wp-block-group.skill-bar .wp-block-group.label {
right: 8px;
top: 50%;
font-size: 0.7rem;
opacity: 0;
transition: opacity .6s 2s;
}
.wp-block-group.skill-bar.animate .wp-block-group.label {
opacity: 1;
}
}/*/*//**/.offres {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
gap: 2rem;
padding: 4rem 2rem;
overflow-x: hidden;
} .offre-card {
--tx: 0px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
border-radius: 1rem;
overflow: hidden;
padding: 2rem 1.5rem;
opacity: 0;
transform: translateY(20px) translateX(var(--tx));
transition:
transform 0.6s ease-out,
opacity 0.6s ease-out,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.offre-card.visible {
opacity: 1;
transform: translateY(0) translateX(var(--tx));
}  .offres .offre-card { --dx: -40px;
--delay: 0s; opacity: 0 !important;
transform: translateY(20px)
translateX(calc(var(--dx) + var(--tx))) !important; transition:
transform 1s ease-out var(--delay) !important,
opacity   1s ease-out var(--delay) !important;
} .offres .offre-card:nth-child(1) { --dx: -40px; --delay: 0.2s; }
.offres .offre-card:nth-child(2) { --dx: -30px; --delay: 0.4s; }
.offres .offre-card:nth-child(3) { --dx: -20px; --delay: 0.6s; }
.offres .offre-card:nth-child(4) { --dx: -10px; --delay: 0.8s; }
.offres .offre-card:nth-child(5) { --dx:  -5px; --delay: 1.0s; }  .offres .offre-card.visible {
opacity: 1 !important;
transform: translateY(0)
translateX(var(--tx)) !important;
} .offre-header {
display: flex;!important
align-items: center;!important
gap: 1rem;!important
background: transparent;!important
border: none;!important
width: 100%;!important
cursor: default;!important
padding: 0;!important
outline: none;!important
}
.offre-header:focus {
outline: none;
box-shadow: none;
}
.offre-header::-moz-focus-inner {
border: 0;
}
.offre-header .icon {
width: 60px;!important
height: 60px;!important
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));!important
}
.offre-header h3 {
margin: 0;
font-size: 1rem;
color: white;
text-transform: uppercase;
font-family: Arial, sans-serif;
flex: 1;
} .offre-content p {
margin: 1rem 0 0;
font-size: 0.95rem;
color: white;
font-family: Arial, sans-serif;
line-height: 1.4;
text-align: left;!important
} .offre-card:hover {
transform: translateY(-10px) translateX(var(--tx)) scale(1.05);
box-shadow: 0 8px 32px rgba(0,0,0,0.6);
border-color: rgba(255,255,255,0.3);
} .spacer {
height: 200vh;
} @media (min-width: 601px) {
.offre-header,
.offre-header .arrow {
pointer-events: none; cursor: default; }
} @media (max-width: 600px) { .offres {
grid-template-columns: 1fr;
padding: 2rem 1rem;
gap: 1rem;
max-width: 350px;
margin: 0 auto;
} .offre-header {
display: flex;
align-items: center;
gap: 0.75rem;
position: relative;
padding: 1rem 1rem 1rem 2.5rem;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.offre-header .icon {
width: 40px;
height: 40px;
margin: 0;
flex-shrink: 0;
}
.offre-header h3 {
margin: 0;
font-size: 1rem;
line-height: 1;
} .offre-header .arrow {
display: block;
position: absolute;
top: 50%;
left: 1rem;
width: 1em;
height: 1em;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23FF4500' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
background-size: contain;
transform: translateY(-50%) rotate(0deg);
transition: transform 0.2s ease;
} .offre-content {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
} .offre-card.open .offre-header {
transform: scale(1.03);
}
.offre-card.open .offre-header .arrow {
transform: translateY(-50%) rotate(180deg);
}
.offre-card.open .offre-content {
max-height: 300px; opacity: 1;
} .offre-card {
--tx: 0 !important;
} .offres.has-open .offre-card:not(.open) {
filter: blur(4px);
transition: filter 0.2s ease;
}
}  .partners-section,
.partners-section * {
margin: 0;
padding: 0;
box-sizing: border-box;
} .partners-section {
margin-top: 1rem;
--bg: #0a0a0a;
--fg: #fff;
--glass-bg: rgba(255,255,255,0.1);
--glass-blur: 12px;
--section-h: 60vh;
--marquee-h: 180px;
--logo-h: 100px;
--gap: 5rem;
--marquee-speed: 25s; --marquee-speed-mobile: 6s; position: relative;
width: 100%;
height: var(--section-h);
overflow: hidden;
background: var(--bg);
color: var(--fg);
font-family: Arial, sans-serif;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.partners-section.in-view-section {
opacity: 1;
transform: translateY(0);
} .partners-section .video-bg {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.partners-section .video-bg video {
width: 100%;
height: 100%;
object-fit: cover;
} .partners-section .overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--gap);
z-index: 1;
text-align: center;
} .partners-section .title-box {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
padding: 0.75rem 1.5rem;
border-radius: 3rem;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
z-index: 2;
}
.partners-section .title-box .title {
font-size: clamp(0.6rem, 4vw, 1.1rem);
text-transform: uppercase;
color: var(--fg);
transition: transform .2s ease, filter .2s ease;
}
.partners-section .title-box .title:hover {
transform: scale(1.05) translateY(-2px);
filter:
drop-shadow(0 0 4px #fff)
drop-shadow(0 0 8px #fff)
drop-shadow(0 0 12px #fff);
} .partners-section .marquee-wrapper {
position: relative;
width: 100%;
overflow: hidden;
-webkit-overflow-scrolling: touch;
} .partners-section .marquee {
width: 100%;
height: var(--marquee-h);
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
display: flex;
align-items: center;
border-radius: 1rem;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
position: relative;
} .partners-section .marquee__inner {
display: inline-flex;
align-items: center;
white-space: nowrap;
gap: var(--gap);
min-width: 200%;
height: var(--marquee-h) !important; transform: translate3d(0,0,0);
animation: scroll var(--marquee-speed) linear infinite;
will-change: transform;
} .partners-section .marquee__inner figure.wp-block-image {
display: inline-flex !important;
align-items: center;
justify-content: center;
height: var(--marquee-h) !important;
margin: 0 !important;
padding: 0 !important;
} .partners-section .marquee__inner img,
.partners-section .marquee__inner figure.wp-block-image img {
display: block !important;
height: var(--logo-h) !important; width: auto !important;
max-width: none !important;
filter: grayscale(100%);
opacity: 0.6;
cursor: pointer;
transition: transform .3s ease, filter .3s ease, opacity .3s ease;
}
.partners-section .marquee__inner img:hover,
.partners-section .marquee__inner figure.wp-block-image img:hover {
filter:
drop-shadow(0 0 6px #fff)
drop-shadow(0 0 12px #fff);
opacity: 1;
transform: scale(1.2);
} @keyframes scroll {
0%   { transform: translateX(0); }
100% { transform: translateX(-50%); }
} @media (max-width: 768px) {
.partners-section .marquee__inner {
justify-content: flex-start !important;
gap: var(--gap) !important; animation: scroll var(--marquee-speed-mobile) linear infinite !important;
-webkit-animation: scroll var(--marquee-speed-mobile) linear infinite !important;
}
.partners-section .marquee__inner img,
.partners-section .marquee__inner figure.wp-block-image img {
height: calc(var(--logo-h) * 0.8) !important; opacity: 0.8;
}
}  .cta-contact-home {
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center; align-items: center; background: transparent;
font-family: Arial, sans-serif;
position: relative;
margin: 0 auto;
padding: 0;
} .cta-contact-box {
position: relative;
border-radius: 15px;
background: rgba(24, 24, 27, 0.92);
box-shadow: 0 8px 38px rgba(255,69,0,0.08), 0 2px 12px rgba(0,0,0,0.21);
padding: 32px 28px 28px 28px;
display: flex;
flex-direction: column;
align-items: center;
max-width: 430px;
border: 1.3px solid #232325;
z-index: 1;
backdrop-filter: blur(1.5px);
overflow: visible; opacity: 0;
transform: translateY(45px) scale(0.98);
transition:
opacity 0.7s cubic-bezier(.38,1.15,.29,.97),
transform 0.9s cubic-bezier(.38,1.15,.29,.97);
margin: 0 auto; width: auto; min-width: 260px; max-width: 430px;
} .cta-contact-box::before {
content: "";
position: absolute;
inset: 0;
border-radius: 15px;
z-index: 0;
background: linear-gradient(120deg, #18181b, #35363a 40%, #f2f2f2 80%);
background-size: 300% 300%;
animation: gradientMove 5.5s ease-in-out infinite;
opacity: 0.22;
pointer-events: none;
} .cta-contact-box::after {
content: "";
position: absolute;
inset: -2.5px;
border-radius: 17px;
z-index: 2;
pointer-events: none;
background: linear-gradient(120deg, #ff4500, #000000 40%, #ff4500 80%);
background-size: 300% 300%;
animation: borderGradientMove 5.5s ease-in-out infinite;
opacity: 1;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
border: 2px solid transparent;
box-sizing: border-box;
} .cta-contact-box.visible {
opacity: 1;
transform: translateY(0) scale(1);
animation: pulseCardSuperSmooth 4.2s linear infinite;
} @keyframes pulseCardSuperSmooth {
0%   { transform: scale(1);}
5%   { transform: scale(1.012);}
10%  { transform: scale(1.024);}
15%  { transform: scale(1.033);}
20%  { transform: scale(1.040);}
25%  { transform: scale(1.045);}
30%  { transform: scale(1.048);}
35%  { transform: scale(1.05);}
40%  { transform: scale(1.048);}
45%  { transform: scale(1.045);}
50%  { transform: scale(1.040);}
55%  { transform: scale(1.033);}
60%  { transform: scale(1.024);}
65%  { transform: scale(1.012);}
70%  { transform: scale(1);}
75%  { transform: scale(0.992);}
80%  { transform: scale(0.984);}
85%  { transform: scale(0.976);}
90%  { transform: scale(0.992);}
95%  { transform: scale(1);}
100% { transform: scale(1);}
}
@keyframes gradientMove {
0% { background-position: 0% 30%; }
50% { background-position: 100% 70%; }
100% { background-position: 0% 30%; }
}
@keyframes borderGradientMove {
0% { background-position: 0% 30%; }
50% { background-position: 100% 70%; }
100% { background-position: 0% 30%; }
} .cta-contact-text h2 {
color: #fff;
font-size: 1.65rem;
font-weight: bold;
text-transform: uppercase;
font-family: Arial, sans-serif;
margin: 0 0 7px 0;
letter-spacing: 0.03em;
z-index: 3;
position: relative;
text-align: center;
} .cta-contact-text p {
color: #bdbdbf;
font-size: 1.06rem;
font-weight: normal;
margin-bottom: 22px;
line-height: 1.4;
font-family: Arial, sans-serif;
z-index: 3;
position: relative;
text-align: center;
} .cta-contact-btn,
.cta-contact-btn:link,
.cta-contact-btn:visited,
.cta-contact-btn:active,
.cta-contact-btn:focus {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
background: transparent;
color: #fff !important;
font-family: Arial, sans-serif;
border: 2.5px solid #ff4500;
padding: 11px 35px;
border-radius: 999px;
font-size: 1.09rem;
font-weight: bold;
letter-spacing: 0.04em;
text-decoration: none !important;
box-shadow: none;
transition: background 0.25s cubic-bezier(.46,.03,.52,.96), color 0.22s cubic-bezier(.46,.03,.52,.96), border 0.18s;
outline: none;
cursor: pointer;
z-index: 3;
position: relative;
} .cta-contact-btn:hover,
.cta-contact-btn:focus {
background: #ff4500;
color: #18181b !important; border-color: #ff4500;
box-shadow: 0 4px 24px rgba(255,69,0,0.12);
text-decoration: none !important;
} .cta-contact-btn * {
text-decoration: none !important;
color: inherit !important;
} @media (max-width: 600px) {
.cta-contact-home {
margin: 0;
min-height: 100vh;
}
.cta-contact-box {
max-width: 310px;
width: 88vw;
padding: 13px 12px 15px 12px;
border-radius: 11px;
margin: 0 auto;
}
.cta-contact-box::before,
.cta-contact-box::after {
border-radius: 13px !important;
}
.cta-contact-text h2 {
font-size: 1.01rem;
margin-bottom: 3px;
line-height: 1.19;
}
.cta-contact-text p {
font-size: 0.93rem;
margin-bottom: 13px;
line-height: 1.3;
}
.cta-contact-btn,
.cta-contact-btn:link,
.cta-contact-btn:visited,
.cta-contact-btn:active,
.cta-contact-btn:focus {
padding: 8px 13px;
font-size: 0.93rem;
border-radius: 24px;
}
}   .legal-page {
font-family: 'Inter', sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1rem;
color: #e0e0e0;
line-height: 1.6;
padding-top: 100px;
} .legal-page .hero h1::after {
content: '';
display: block;
width: 60px;
height: 4px;
background: #ff6b00;
margin: 0.25rem auto 0;
border-radius: 2px;
transform-origin: center;
transition: background-color 0.3s;
}
@keyframes underlineBounce {
0%, 100% {
transform: scaleX(1);
}
50% {
transform: scaleX(1.5);
}
}
.legal-page .hero h1:hover::after {
animation: underlineBounce 0.6s ease;
background-color: #ffab66;
} .sections-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
} .mention-card {
position: relative;
background: #1e1e1e;
border-radius: 1rem;
padding: 1.5rem;
overflow: hidden;
border: 1px solid #333;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.6s ease forwards;
will-change: transform, box-shadow;
transition:
transform 0.6s ease-in-out !important,
box-shadow 0.6s ease-in-out !important,
background-color 0.4s ease-in-out !important;
} .mention-card:hover {
transform: translateY(-8px) scale(1.10) rotate(-0.5deg) !important;
background-color: #2a2a2a !important;
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.75) !important;
} .mention-card:hover::before {
animation-duration: 2s !important;
} @keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .sections-grid .mention-card:nth-child(1) { animation-delay: 0.1s; }
.sections-grid .mention-card:nth-child(2) { animation-delay: 0.2s; }
.sections-grid .mention-card:nth-child(3) { animation-delay: 0.3s; }
.sections-grid .mention-card:nth-child(4) { animation-delay: 0.4s; }
.sections-grid .mention-card:nth-child(5) { animation-delay: 0.5s; }
.sections-grid .mention-card:nth-child(6) { animation-delay: 0.6s; }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .sections-grid .mention-card h2 {
font-size: 1.3rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 0.8rem;
position: relative;
}
.sections-grid .mention-card h2::after {
content: '';
width: 40px;
height: 3px;
background: #ff6b00;
position: absolute;
bottom: 0;
left: 0;
border-radius: 2px;
} .sections-grid .mention-card p {
font-size: 1rem;
color: #cccccc;
margin-top: 0.5rem;
}
.sections-grid .mention-card a {
color: #ff6b00;
text-decoration: underline;
} .footer {
text-align: center;
margin-top: 3rem;
font-size: 0.9rem;
color: #888888;
} .mention-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mention-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
} .mention-card:hover::before {
background: linear-gradient(
120deg,
transparent 0%,
rgba(255, 255, 255, 0.15) 50%,
transparent 100%
);
} .mention-card::before {
content: '';
position: absolute;
top: -60%;
left: -60%;
width: 60%;
height: 220%;
background: linear-gradient(
120deg,
transparent 0%,
rgba(255, 255, 255, 0.105) 50%,
transparent 100%
);
transform: translateX(-200%) rotate(25deg);
transform-origin: top left;
animation: sheen 3s ease-in-out infinite;
}
@keyframes sheen {
0% {
transform: translateX(-200%) rotate(25deg);
}
100% {
transform: translateX(400%) rotate(25deg);
}
}  .wpforms-field-container input[aria-hidden="true"],
.wpforms-field-container label[aria-hidden="true"],
.wpforms-field-container .counter {
display: none !important;
} .wpforms-container-full {
max-width: 540px;
margin: 6rem auto 2rem !important; padding: 1.5rem;
box-sizing: border-box;
color: #ffffff; text-align: left; } .wpforms-field-container {
margin-bottom: 1.25rem;
} .wpforms-field-label {
display: block;
font-weight: 600;
margin-bottom: 0.4rem;
color: #ffffff !important;
font-size: 0.95rem;
text-align: left;
} .wpforms-field-description,
label.wpforms-field-sublabel:after {
font-size: 0.9rem;
color: rgba(255,255,255,0.4) !important; margin-top: -0.8rem;
margin-bottom: 0.8rem;
display: block;
text-align: left;
} .wpforms-field-text input[type="text"],
.wpforms-field-email input[type="email"] {
width: 100%;
padding: 0.6rem 0.9rem;
font-size: 0.95rem;
border: 2px solid #ff6900;
border-radius: 8px;
background: #abb8c3;
color: #ffffff !important;
transition: border-color 0.2s, background 0.2s;
box-sizing: border-box;
text-align: left;
}
.wpforms-field-text input:focus,
.wpforms-field-email input:focus {
border-color: #066aab;
outline: none;
} .wpforms-field-textarea textarea {
width: 100%;
min-height: 130px;
padding: 0.75rem 1rem;
font-size: 0.95rem;
border: 2px solid #ff6900;
border-radius: 8px;
background: #abb8c3;
color: #ffffff !important;
transition: border-color 0.2s, background 0.2s;
box-sizing: border-box;
text-align: left;
resize: none; }
.wpforms-field-textarea textarea:focus {
border-color: #066aab;
outline: none;
} .wpforms-field-medium {
width: 48%;
display: inline-block;
vertical-align: top;
margin-right: 4%;
}
.wpforms-field-medium:nth-child(2n) {
margin-right: 0;
}
.wpforms-container-full:after {
content: "";
display: table;
clear: both;
} .wpforms-field-text input::placeholder,
.wpforms-field-email input::placeholder,
.wpforms-field-textarea textarea::placeholder {
color: rgba(255, 255, 255, 0.7) !important;
} .wpforms-error-container,
.wpforms-error-container * {
color: #ffffff !important;
font-size: 0.9rem;
text-align: left;
} .wpforms-submit-container {
text-align: left !important;
margin-top: 1rem;
}
.wpforms-submit {
background: #ff6900;
color: #ffffff !important;
padding: 0.7rem 1.8rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 50px;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}
.wpforms-submit:hover {
background: #e65e00;
transform: translateY(-2px);
}
.wpforms-submit-spinner {
display: none !important;
} #wpforms-confirmation-459.wpforms-confirmation-container-full {
background-color: orangered !important;
color: #ffffff !important;
border-radius: 30px !important;
padding: 1rem 2rem !important;
max-width: 540px !important;
margin: 1.5rem auto !important;
text-align: center !important;
font-size: 1rem !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
#wpforms-confirmation-459.wpforms-confirmation-container-full p,
#wpforms-confirmation-459.wpforms-confirmation-container-full strong {
color: #ffffff !important;
font-size: 1rem !important;
line-height: 1.4 !important;
margin: 0 !important;
} @media (max-width: 600px) {
.wpforms-container-full {
width: 90% !important;
margin: 6rem auto 2rem !important; padding: 1rem !important;
}
.wpforms-field-medium {
width: 100% !important;
margin-right: 0 !important;
float: none !important;
}
.wpforms-submit {
width: 100% !important;
text-align: center !important;
}
#wpforms-confirmation-459.wpforms-confirmation-container-full {
width: 90% !important;
margin: 1.5rem auto !important;
padding: 1rem !important;
}
}   .custom-contact-modern {
max-width: 540px;
margin: 2rem auto;
padding: 0 1rem;
font-family: Arial, sans-serif;
} .custom-contact-modern__card {
background: rgba(255,255,255,0.08);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 16px;
padding: 2rem 1.5rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.6);
opacity: 0;
transform: translateY(20px);
animation: slideUpFade 1s ease-out forwards;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
cursor: pointer;
}
.custom-contact-modern__card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 32px rgba(0,0,0,0.7);
background: rgba(255,255,255,0.12);
} .custom-contact-modern__title {
margin: 0 0 1rem;
font-size: 1.6rem;
color: #ff6900;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
}
.custom-contact-modern__title::after {
content: "";
display: block;
width: 40px;
height: 3px;
background: #ff6900;
margin: 0.5rem auto 0;
border-radius: 2px;
} .custom-contact-modern__item,
.custom-contact-modern__item .wp-block-group,
.custom-contact-modern__item .wp-block-group__inner-container {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
} .custom-contact-modern__item p {
margin: 0 !important;
line-height: 1.3 !important;
} .custom-contact-modern__icon {
font-size: 1.2rem !important;
color: #ff6900 !important;
flex-shrink: 0 !important;
} .custom-contact-modern__label {
font-weight: 600 !important;
color: #fff !important;
}
.custom-contact-modern__value { color: #ff6900 !important;
}
.custom-contact-modern__value a { color: #ff6900 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.custom-contact-modern__value a:hover {
color: #ffa040 !important;
} @keyframes slideUpFade {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} @media (max-width: 480px) { .custom-contact-modern__item {
flex-direction: row !important;
flex-wrap: nowrap !important; gap: 0.4rem !important;
margin-bottom: 1rem !important;
} .custom-contact-modern__title {
font-size: 1.4rem !important;
}
.custom-contact-modern__icon {
font-size: 1rem !important;
}
.custom-contact-modern__label,
.custom-contact-modern__value,
.custom-contact-modern__value a {
font-size: 0.9rem !important;
line-height: 1.2 !important;
white-space: nowrap; }
.custom-contact-modern__card {
padding: 1rem 0.75rem !important;
}
.custom-contact-modern__item:nth-of-type(3) .custom-contact-modern__value {
white-space: normal !important;
text-align: left !important; }
} .custom-contact-modern__item {
margin-bottom: 1.5rem !important; } .custom-contact-modern__item p,
.custom-contact-modern__item a {
line-height: 1.5 !important; }
.grille-portfolio {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
}
.carte-projet {
text-decoration: none;
color: inherit;
overflow: hidden;
transition: transform 0.3s ease;
}
.carte-img {
width: 100%;
padding-top: 75%;
background-size: cover;
background-position: center;
border-radius: 10px;
transition: transform 0.4s ease;
}
.carte-projet:hover .carte-img {
transform: scale(1.05);
}
.carte-projet h2 {
margin-top: 1rem;
font-size: 1.2rem;
text-align: center;
}  :root {
--gap: 1rem; } .portfolio-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gap); width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
margin-top: 6rem;
margin-bottom: 2rem;
padding: 0;
} .portfolio-item {
position: relative;
overflow: hidden;
border-radius: .5rem;
transition: transform .3s, box-shadow .3s;
}
.portfolio-item:hover,
.portfolio-item:focus-within {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
} .portfolio-item img,
.portfolio-thumb-video {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 16/9;
transition: filter .3s, transform .3s;
}
.portfolio-item:hover img,
.portfolio-item:hover .portfolio-thumb-video,
.portfolio-item:focus-within img,
.portfolio-item:focus-within .portfolio-thumb-video {
filter: blur(4px) brightness(0.6);
transform: scale(1.05);
} .portfolio-item h3 {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.8);
padding: .5rem 1.25rem;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.2);
border-radius: .75rem;
color: #fff;
font-size: 1.1rem;
white-space: nowrap;
opacity: 0;
text-shadow: 0 2px 8px rgba(0,0,0,0.6);
transition: 
opacity .3s ease, 
transform .3s ease, 
background .3s ease,
border-color .3s ease;
pointer-events: none;
}
.portfolio-item:hover h3,
.portfolio-item:focus-within h3 {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
pointer-events: auto;
} .portfolio-item h3:hover {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.3);
transform: translate(-50%, -50%) scale(1.05);
}  @media (max-width: 1024px) {
.portfolio-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
} @media (max-width: 600px) {
.portfolio-grid {
grid-template-columns: 1fr;
margin-top: 4rem;
}
}  :root {
--clr-bg: #0d0d0d;
--clr-fg: #f5f5f5;
--clr-accent: #ff4500;
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.15);
} .project-hero {
position: relative;
height: 60vh;
background-size: cover;
background-position: center;
z-index: 1;
}
.project-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.7));
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: clamp(4rem, 10vw, 8rem);
z-index: 2;
}
.project-title {
color: var(--clr-accent);
font-size: clamp(2rem,5vw,4rem);
text-shadow: 0 6px 12px rgba(0,0,0,0.6);
margin: 0;
z-index: 3;
} .project-container {
max-width: 1200px;
margin: -4rem auto 4rem;
padding: 0 1rem;
display: grid;
grid-template-rows: auto auto;
row-gap: 3rem;
position: relative;
z-index: 2;
} .project-overview {
background: var(--glass-bg);
backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
padding: 2rem;
border-radius: 16px;
color: var(--clr-fg);
box-shadow: 0 8px 32px rgba(0,0,0,0.8);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: center;
} .project-meta {
display: flex;
flex-wrap: wrap;
gap: 2rem;
list-style: none;
padding: 0;
margin: 0;
font-size: 1rem;
color: var(--clr-fg);
}
.project-meta li {
display: flex;
align-items: center;
}
.project-meta i {
margin-right: .5rem;
color: var(--clr-accent);
} .project-description {
line-height: 1.7;
font-size: 1rem;
max-width: 800px;
margin: 0;
}  :root {
--clr-bg: #0d0d0d;
--clr-fg: #f5f5f5;
--clr-accent: #ff4500;
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.15);
--gap: 1rem;
} .project-hero {
position: relative;
height: 60vh;
background-size: cover;
background-position: center;
z-index: 1;
}
.project-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.7));
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: clamp(4rem, 10vw, 8rem);
z-index: 2;
}
.project-title {
color: var(--clr-accent);
font-size: clamp(2rem,5vw,4rem);
text-shadow: 0 6px 12px rgba(0,0,0,0.6);
margin: 0;
z-index: 3;
} .project-container {
max-width: 1200px;
margin: -4rem auto 4rem;
padding: 0 1rem;
display: grid;
grid-template-rows: auto auto;
row-gap: 3rem;
position: relative;
z-index: 2;
} .project-overview {
background: var(--glass-bg);
backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
padding: 2rem;
border-radius: 16px;
color: var(--clr-fg);
box-shadow: 0 8px 32px rgba(0,0,0,0.8);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: center;
}
.project-meta {
display: flex;
flex-wrap: wrap;
gap: 2rem;
list-style: none;
padding: 0;
margin: 0;
font-size: 1rem;
color: var(--clr-fg);
}
.project-meta li {
display: flex;
align-items: center;
}
.project-meta i {
margin-right: .5rem;
color: var(--clr-accent);
}
.project-description {
line-height: 1.7;
font-size: 1rem;
max-width: 800px;
margin: 0;
text-align: left;
} .project-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--gap);
max-width: 1200px;
margin: 0 auto 3rem;
padding: 0 1rem;
box-sizing: border-box;
justify-content: center;
}
.gallery-item {
overflow: visible;
transition: transform .4s, box-shadow .4s;
border-radius: 12px;
}
.gallery-item:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
.gallery-item img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
border-radius: 12px;
} .project-video {
margin: 2rem 0;
width: 100%;
}
.project-video embed,
.project-video iframe,
.project-video video {
width: 100%;
height: auto;
aspect-ratio: 16/9;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}  @media (min-width: 768px) {
.project-description {
margin-left: 1rem;
text-align: left;
}
} @media (max-width: 767px) {
.project-container {
margin: 2rem auto 4rem;
}
.project-overview {
grid-template-columns: 1fr;
text-align: center;
gap: 1rem;
}
.project-meta {
justify-content: center;
}
.project-description {
margin-top: 1rem;
}
.project-title {
font-size: clamp(1.75rem,6vw,3rem);
}
.project-hero-overlay {
padding-bottom: clamp(6rem,12vw,10rem);
}
.gallery-item img {
width: 100%;
}
}
@media (max-width: 600px) { .project-gallery {
grid-template-columns: 1fr !important;
justify-content: center;
margin: 2rem auto !important;
padding: 0 1rem !important;
} .project-gallery .gallery-item {
width: 100%;
}
.project-gallery .gallery-item img {
width: 100%;
height: auto;
}
.project-description p {
text-align: left;
}
}