html,body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 100%;
}
header {
    background-color: rgba(8, 8, 8, 0.946);  
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 100%;
    max-height: 15%;
    position: relative;
    top: 0;
    z-index: 9999;
}


.visually-hidden {  
  position: absolute !important;  
  width: 1px;  
  height: 1px;  
  padding: 0;  
  margin: -1px;  
  overflow: hidden;  
  clip: rect(0, 0, 0, 0);  
  white-space: nowrap;  
  border: 0;  
}

.main-content {
    background: url('../images/32.webp') center fixed no-repeat;
    background-size: 70% 100%;
    background-position:  100%;
    position: relative;
    background-attachment: fixed;
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 40% 60%;
}



nav {
    margin: 0vh 0vh 2vh 0vh;
}
nav ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0vh;
    margin: 0;
    flex-wrap: wrap;
    margin-top: 0vh;
    transform: translateX(-100%);
    animation: slideIn 1s ease-out forwards;
    }
nav ul li:first-child {
    margin-left:10vh;
}
nav ul li {
    margin-right: clamp(-1vh, 7vw, 7vh);
    margin-left: clamp(-1vh, -5vw, -10vh); 
}
nav ul li:last-child {
    margin-right: 0vh;
}
.logo_img img{
    height: clamp(20vh, 25vh, 25vh);
    width: clamp(30vh, 38vh, 38vh);
    position: relative;
    top: 5px;
}
nav ul li.EPOXY a,nav ul li.Résidentiel a,nav ul li.Commercial a,nav ul li.Industriel a,nav ul li.contact a{
    padding:clamp(1vh, 3vh, 4vh);
    position: center;
    transition: color 0.3s,font-size 0.3s ease-in-out;
    margin-right: 1vh;
    margin-left: clamp(-15vh, 1vw, -10vh);
    font-size: clamp(1vw, 3.5vw, 3.5vw);
    color: aliceblue;
    background-repeat: no-repeat; 
    background-size: contain;
    background-position: center;
    font-weight: bold;
    z-index: 9999;
    background-size: 110% 105%;
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.4),
        2px 2px 4px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(0, 183, 255, 0.8),
        0 0 50px rgba(0, 183, 255, 1),
        0 0 75px rgba(0, 183, 255, 0.8),
        0 0 100px rgba(0, 183, 255, 0.6);
        animation: move 3s ease-in-out infinite;
}
nav ul li.EPOXY a {
    background-image: url('../images/33.webp');     
}
nav ul li.Résidentiel a {
    background-image: url('../images/34.webp');
} 
nav ul li.Commercial a {
    background-image: url('../images/35.webp');
} 
nav ul li.Industriel a {
    background-image: url('../images/36.webp');  
} 
nav ul li.contact a {
    background-image: url('../images/37.webp');     
} 
nav ul li a{
    text-decoration: none;
    font-family: 'Dancing Script', cursive;
}
nav ul li a:hover {
    text-decoration: underline;
    text-underline-offset: 1vh;
}
.hero {
    background-image: url('../images/38.webp'), url('../images/39.webp');
    background-size: 50% 100%, 50% 100%;
    background-repeat: no-repeat;
    background-position: left center, right center;
    height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: relative;
    text-align: center;
    margin-top: 0vh; 
    max-width: 100%;
}
.hero-explosion{
    position: absolute; 
    top: 20vh; 
    left: 0; 
    right: 0; 
    height: 50vh; 
    background-position: top center;
    background-size: contain;
    z-index: 1; 
    background-repeat: no-repeat;
    transform: scale(1.6);
    max-width: 100%;
}
@font-face {
    font-family: 'Dancing Script';
    src: url('./DancingScript-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
}


.hero-text h2 {
    display: inline-block;
    font-family: 'Dancing Script', cursive;
    font-size: clamp(19vh, 3vw, 5vh);
    font-weight: bold;
    margin-bottom: -10vh;
    z-index: 9999;
    position: relative;
    top: -5vh;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 30px rgba(0, 247, 255, 0.9),
        0 0 40px rgba(0, 251, 255, 0.7);
    transition: all 0.4s ease-in-out;
    transform: translateY(-100%);
    animation: slideIn 1s ease-out forwards, flashEffect 0.2s steps(5, start) 3 3s, stayLit 1s 3.5s forwards; 
}
@keyframes flashEffect {
    0% {
        color: transparent;
        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.5),
            0 0 10px rgba(255, 255, 255, 0.8),
            0 0 30px rgba(0, 247, 255, 0.9),
            0 0 40px rgba(0, 251, 255, 0.7);
    }
    25% {
        color: white;
        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.5),
            0 0 10px rgba(255, 255, 255, 1),
            0 0 30px rgba(0, 247, 255, 1),
            0 0 40px rgba(0, 251, 255, 1);
    }
    50% {
        color: transparent;
        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.5),
            0 0 10px rgba(255, 255, 255, 0.8),
            0 0 30px rgba(0, 247, 255, 0.9),
            0 0 40px rgba(0, 251, 255, 0.7);
    }
    75% {
        color: white;
        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.5),
            0 0 10px rgba(255, 255, 255, 1),
            0 0 30px rgba(0, 247, 255, 1),
            0 0 40px rgba(0, 251, 255, 1);
    }
    100% {
        color: transparent;
        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.5),
            0 0 10px rgba(255, 255, 255, 0.8),
            0 0 30px rgba(0, 247, 255, 0.9),
            0 0 40px rgba(0, 251, 255, 0.7);
    }
}
@keyframes stayLit {
    0% {
        color: transparent;
        text-shadow: 
            0 1px 3px rgba(0, 0, 0, 0.5),
            0 0 10px rgba(255, 255, 255, 0.8),
            0 0 30px rgba(0, 247, 255, 0.9),
            0 0 40px rgba(0, 251, 255, 0.7);
    }
    100% {
        color: white;
        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.5),
            0 0 10px rgba(255, 255, 255, 1),
            0 0 30px rgba(0, 247, 255, 1),
            0 0 40px rgba(0, 251, 255, 1);
    }
}
@keyframes repeatFlash {
    0% {
        color: transparent;
        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.5),
            0 0 10px rgba(255, 255, 255, 0.8),
            0 0 30px rgba(0, 247, 255, 0.9),
            0 0 40px rgba(0, 251, 255, 0.7);
    }
    25% {
        color: white;
        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.5),
            0 0 10px rgba(255, 255, 255, 1),
            0 0 30px rgba(0, 247, 255, 1),
            0 0 40px rgba(0, 251, 255, 1);
    }
    50% {
        color: transparent;
        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.5),
            0 0 10px rgba(255, 255, 255, 0.8),
            0 0 30px rgba(0, 247, 255, 0.9),
            0 0 40px rgba(0, 251, 255, 0.7);
    }
    75% {
        color: white; /* Full white text */
        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.5),
            0 0 10px rgba(255, 255, 255, 1),
            0 0 30px rgba(0, 247, 255, 1),
            0 0 40px rgba(0, 251, 255, 1);
    }
    100% {
        color: transparent;
        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.5),
            0 0 10px rgba(255, 255, 255, 0.8),
            0 0 30px rgba(0, 247, 255, 0.9),
            0 0 40px rgba(0, 251, 255, 0.7);
    }
}
@keyframes stayLit {
    0% {
        color: transparent;
        text-shadow: 
            0 1px 3px rgba(0, 0, 0, 0.5),
            0 0 10px rgba(255, 255, 255, 0.8),
            0 0 30px rgba(0, 247, 255, 0.9),
            0 0 40px rgba(0, 251, 255, 0.7);
    }
    100% {
        color: white; /* Stay lit */
        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.5),
            0 0 10px rgba(255, 255, 255, 1),
            0 0 30px rgba(0, 247, 255, 1),
            0 0 40px rgba(0, 251, 255, 1);
    }
}
.hero-text p {
    font-family: 'Dancing Script', cursive;
    font-size: 8vh;
    font-weight: bold;
    z-index: 9999;
    position: relative;
    background: linear-gradient(45deg, #006d77, #00b4d8, #00f0ff, #0077b6);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    top: -6vh;
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.4),
        2px 2px 4px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(0, 183, 255, 0.8),
        0 0 50px rgba(0, 183, 255, 1),
        0 0 75px rgba(0, 183, 255, 0.8),
        0 0 100px rgba(0, 183, 255, 0.6);
    
    animation: shine 3s ease-in-out infinite;
}
@keyframes move {
    0% {
        background-position: 100% 100%;
    }
    50% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}
/* Navigation buttons */
.gallery-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}
.nav-btn {
    pointer-events: all;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.nav-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Active group */
.group1.active,
.group2.active {
    display: flex; /* Only active groups are shown */
}
.cta {
    padding: 13vh 25vh;
    background-image: url('../images/41.webp');
    background-size: cover;
    background-position: center;
    border-radius: 1px;
    position: relative;
    z-index: 9999;
    display: inline-block;
    border: none;
    margin-top: -10vh;
}
.cta:hover,.hero-text h2:hover,.top-content img:hover{
    background-size: 120%;
    transform: scale(1.1);
}
.left-content {
    position: relative;
    box-sizing: border-box;
    background-color: #000;
    animation: slideIn 1s ease-out forwards;
    min-width: 100%;
}
.left-content h2 {
    font-size: 5vh;
    background-image: url('../images/42.webp');
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    margin-top: 0vh;
    margin-bottom: 0vh;
    z-index: 9999;
    font-family: "Yuji Mai", serif;
}
.left-content p{
    font-size: 3vh;
    background-image: url('../images/43.webp');
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    z-index: 9999;
    font-family: "Yuji Mai", serif;
}
.carotte1 {
    height: 100%;
    width: 100%; 
    display: block;
    margin-left: 0vh;
    z-index: 9999;
}
.carotte2  {
    height: 100%;
    width: 100%;
    display: block;
    margin-left: 4vw;
    z-index: 9999;
}
.carotte3 {
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 9999;
}
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.top-content {
    top: -5vh;
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0 auto;
    max-width: 100%;
    caret-color: transparent;
}
.top-content img {
    all: unset;
    display: block;
    object-fit: cover;
    transition: color 0.3s,font-size 0.3s ease-in-out;
    width: clamp(10vw, 73.5vw, 73.5vw);
    margin-left: -12%; 
    box-sizing: border-box;
    
}
.right-content,.right-content_commercial,.right-content_industriel{
    margin-top: -8vh;
    max-width: 100%;
    margin-left: 10%; 
    box-sizing: border-box;
}
.right-content a,.right-content_commercial a,.right-content_industriel a{
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 1rem;
    box-sizing: border-box;
}
.right-content img,.right-content_commercial img,.right-content_industriel img {
    top: 10vh;
    all: unset;
    display: flex; 
    flex-wrap: wrap;
    min-width: 16vw;
    max-width: 16vw;
    min-height: 45vh; 
    max-height: 45vh;  
    box-sizing: border-box; 
}
.right-content img:hover{
    background-size: 120%;
    transform: scale(1.1);
}
.top-content_commercial img{
    margin-top: -8vh;
    object-fit: cover;
    transition: color 0.3s,font-size 0.3s ease-in-out;
    max-width: clamp(10vw, 63.5vw, 63.5vw);
    margin-left: -8%;
    box-sizing: border-box;
}
.top-content_industriel img{
    max-width: clamp(10vw, 63.5vw, 63.5vw);
    margin-left: -8%;
    box-sizing: border-box;
}
.contact_2 p ,.form-group label {
    font-family: 'Dancing Script', cursive;
    display: block;
    font-size: clamp(2vh, 7vh, 7vh);
    font-weight: bold;
    background: linear-gradient(90deg, #00ccff, #99eaff, #33d6ff, #99eaff, #00ccff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 
                 0 0 30px #33d6ff,
                 0 0 40px #99eaff;
    transition: text-shadow 0.3s ease;
    text-align: center;
}
.contact_2 p:hover {
    text-shadow: 0 0 10px #00ccff, 
                 0 0 20px #00ccff, 
                 0 0 40px #33d6ff, 
                 0 0 50px #99eaff, 
                 0 0 60px #ccefff;
}
.contact_2 {
    background-color: black;
    background-repeat: no-repeat;
    background-size:contain;
    background-position: center center;
    text-align: center;
    margin-top: -7vh;
    padding-bottom: 5vh;
    display: flex;
    flex-direction: column;
    align-items: center; 
}
.form-group {
    width: 40%;
    display: grid;
    place-items: center ;
    margin-bottom: 2vh;
    background-color: transparent;
    border-radius: 5vh;
    box-shadow: 0 0 1vh #0ff, 0 0 20px #0ff, 0 0 10vh #0ff;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.contact_2 form{
    width: 90%;
}
@font-face {
    font-family: 'Yuji Mai';
    src: url('./YujiMai-Regular.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
}
.contact_2 form input{ 
    border-radius: 1vh;
    width: 98%;   
    font-size: 3vh;
    color: #db2424;
    font-family: "Yuji Mai", serif;
    background-color: transparent;
    box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.contact_2 form input:hover,.contact_2 form textarea:hover {
    box-shadow: 0 0 85px #0ff, 0 0 30px #0ff, 0 0 45px #0ff;
}
.contact_2 form textarea {
    border-radius: 2vh;
    width:98%;
    height:15vh;
    margin-bottom: 5vh;
    font-size: 3vh;
    color: #db2424;
    font-family: "Yuji Mai", serif;
    background-color: transparent;
    box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 0px #0ff;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.contact_2 form input[type="image"] {
    all: unset;
    width: 50%;
    margin-top: -5vh;
    margin-bottom: -8vh; 
}
.contact_2 form input[type="image"]:hover {
    background-size: 120%;
    transform: scale(1.5);
}
.paper_plane input[type="image"] {
    max-height: 100vh;
    cursor: pointer;
    border: none;
}
.form-group:hover {
    box-shadow: 0 0 15vh #0ff, 0 0 10vh #0ff, 0 0 15vh #0ff;
}
footer {
    background-color: #333;
    color: #fcfafa;
    padding: 1vh;
    text-align: center;
    font-family: Arial, sans-serif;
    position: relative;
    margin-bottom: 0vh;
  }
  footer ul li {
    display: inline-block;
    margin-right: 1vh;
  }
  footer ul li a img {
    width: 8vh;
    height: 8vh;
    transition: transform 0.3s ease-in-out; 
  }
  footer ul li a img.Dcbeton-icon {
    width: 18vh;
    height: 18vh;
    top: 6vh;
    transition: transform 0.3s ease-in-out;
  }
footer ul li a img:hover{
    background-size: 120%;
    transform: scale(1.2);
}
@media (min-width:350px) and (max-width:1030px) and (orientation:portrait){
    header {
        display: flex;
        justify-content: center; /* centre horizontalement */
        align-items: center;      /* centre verticalement */
       
    }
    nav ul li.EPOXY a,nav ul li.Résidentiel a,nav ul li.Commercial a,nav ul li.Industriel a,nav ul li.contact a{
        font-size: clamp(6vw, 6.5vw, 6.5vw); 
    }    
    .hero-explosion{
        height:clamp(22vh, 22vh, 22vh); 
    }
    .hero-text h2 {
        font-size: clamp(10vh, 3vw, 5vh);
    }
    .hero-text p{
        font-size: clamp(5vh, 5vw, 5vh);
    }
    .cta{
        top: 10vh;
    }

    nav ul li {
        margin-right: clamp(5vh, 5vh, 5vh);
        margin-left: clamp(5vh, 5vw, 5vh); 
        top: 10vh;
        position: center;
        line-height: 3.8;
    }
    nav ul li a {
        width: 15vh;
        height: 15vh;
        margin-top: -6vh;
        display: flex;
        justify-content: center; /* centre horizontalement */
        align-items: center;      /* centre verticalement */
    }
    nav ul li:first-child {
        margin-left:10vh;
    }
    nav ul li:nth-child(2) {
        margin-left: -3vh;
    }
    nav ul li:nth-child(3) {
        margin-left: 9vh;
    }
    nav ul li:nth-child(4) {
        margin-left: -3vh;
        margin-right: 4vh;        
    }
    nav ul li:last-child {
        margin-left: 14vh;
        margin-bottom: -5vh;
    }

    .left-content{
        min-width: 100%;
        max-width: 100%;
    }
    .left-content h2{
        font-size:3vh
    }
    .left-content p{
        font-size:2vh
    }
    .top-content{
        top: -5vh;
        margin-left: 0vw;
    }
    .top-content img{
        margin-top: 2vh;
    }
    .right-content{
        margin-top: -2vh;
    }
    .right-content_commercial,.right-content_industriel{
        margin-top: -2vh;
    }
    .right-content img,.right-content_commercial img,.right-content_industriel img {
        min-width: 24vw;
        max-width: 24vw;
        min-height: 25vh; 
        max-height: 25vh;  
    }
    .form-group {
        width: 70%;
    }
  
}
@media (min-width:1024px) and (max-width:1430px) and (orientation:landscape){
    nav ul li.EPOXY a,nav ul li.Résidentiel a,nav ul li.Commercial a,nav ul li.Industriel a,nav ul li.contact a{
        font-size: clamp(1vw, 2.5vw, 2.5vw);  
    } 
    
    .hero-explosion{
        height:clamp(42vh, 42vh, 42vh);  
    }
    .hero-text h2 {
        font-size: clamp(10vh, 3vw, 5vh);
    }
    .hero-text p{
        font-size: clamp(5vh, 5vw, 5vh);
    }
    .cta{
        top: 10vh;
    }
}