@font-face {
 font-family: "TradeGothic LT";
 src: url(font-family/Trade_Gothic_Font/Trade_Gothic_LT.ttf);
}

@font-face {
 font-family: "Century Gothic";
 src: url(font-family/CenturyGothic.ttf);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    font-family: 'Century Gothic', sans-serif;
}

:root{
	--first-color: #FF0000 ;
	--second-color: #ff3232;
	--third-color: #CD1818;
	--fourth-color: #ED2B2A;
	--background-color: #1A1A1A;
	--first-font: 'Inter';
}

body{
	background: black;
}





/* ********* NavBar ******** */

nav{
    background: black;
    width: 100%;
    max-width: 100vw;
    height: 7rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    box-shadow: 0 0 3px #FF0033, 
	0 0 6px #FF0033,
	0 0 15px #FF0033;
}
.nav__container{
    width: 95%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
}
.nav__container .logo_container{
	flex: 0.33;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.nav__container .img{
	width: clamp(55% + 0.3rem, 40% + 0.1rem, 60% + 0.3rem);
    object-fit: cover;
}

.nav__menu{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    gap: 4rem;
    flex: 0.33;
}
nav .nav__menu a{
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    letter-spacing: 1px;
}
.nav__menu li a:hover{
    color: grey;
}

.nav__container .container_infos{
	flex: 0.33;
	display: flex;
	justify-content: flex-end;
}
.nav__container .infos{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
}

.nav__container .contact_us{
    border-radius: 40px;
    border: 2px var(--fourth-color) solid;
    color: white;
    font-size: 1.15rem;
    font-weight: 600;
    padding: 8px;
    background: transparent;
    transition: 0.2s;
    display: flex;
	justify-content: center;
	align-items: center;
}
.nav__container .contact_us a{
	color: white;
}
.nav__container .contact_us:hover{
    background: var(--fourth-color);
}

nav p{
    color: white;
    font-weight: 600;
    top: 10%;
    right: 3.4%;
    font-size: 1rem;
}





/* ********* Section 1 ******** */


.section1{
	background: black;
	position: relative;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.section1:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background-image: url('img/background1.jpg');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

.section1 h1{
	font-family: 'Bebas Neue', sans-serif;
	letter-spacing: 7px;
	z-index: 10;
	font-size: 6rem;
	color: var(--third-color);
	text-shadow: 1px 1px 4px black;
	width: 50%;
}
.section1 .container_0{
	margin-top: 6rem;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.section1 .container_1{
	width: 40%;
	z-index: 10;
	display: flex;
	flex-direction:column;
	align-items: flex-start;
	gap: 4rem;
}

.section1 h2{
	color: white;
	width: 100%;
	margin: 0 auto;
	font-size: 1.3rem;
	letter-spacing: 1px;
	line-height: 2.6rem;
	font-weight: 600;
}
.section1 p{
	color: white;
}
.section1 a{
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	padding: 10px;
	font-size: 1.3rem;
	font-weight: 600;
	background: var(--fourth-color);
	border: 3px var(--fourth-color) solid;
	border-radius: 50px;
}
.section1 a:hover{
	background: transparent;
}








/* ********* Section 2 ******** */

.section2{
	padding: 4rem 0;
	background: var(--background-color);
}
.section2 .container{
	width: 90%;
	margin: auto;
}

.section2 .title2{
	color: var(--first-color);
	font-family: var(--first-font), sans-serif;
	font-size: 2.8rem;
	font-weight: 600;
	text-align: center;
	padding-bottom: 3rem;
}

.section2 .para1{
	width: 80%;
	margin: auto;
	text-align: center;
	font-size: 1.25rem;
	margin-bottom: 6rem;
	color: white;
	font-weight: 300;
	line-height: 2rem;
}

.section2 .realisations{
	width: 80%;
	margin: auto;
	display: flex;
	justify-content: space-around;
	margin-bottom: 1rem;
}
.section2 .realisations .img1,
.section2 .realisations .img2,
.section2 .realisations .img3{
	position: relative;
	width: 300px;
	height: 168px;
}


.section2 .realisations .img1 img,
.section2 .realisations .img2 img, 
.section2 .realisations .img3 img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 0.3s;
	z-index: 1;
}

.section2 .realisations .img1 img:hover,
.section2 .realisations .img2 img:hover, 
.section2 .realisations .img3 img:hover{
	transform: scale(1.02);
}


.section2 .realisations p{
	position: absolute;
	text-align: center;
	min-width: 100%;
	top: 105%;
	left: 50%;
	transform: translate(-50%, 0%);
	font-size: 1.6rem;
	font-family: var(--first-font), sans-serif;
	font-weight: bolder;
	text-shadow: 1px 1px 1px black;
	color: white;
	transition: 0.3s;
	z-index: 1;
}











/* ********* Section 3 ******** */

.section3{
	max-width: 100vw;
	color: white;
	padding: 4rem 0;
}

.section3 .text1{
	display: flex;
	flex-direction: column;
	text-align: center;
	margin-bottom: 6rem;
}

.section3 .text1 h1{
	font-family: var(--first-font), sans-serif;
	font-size: 2.8rem;
	font-weight: 600;
	margin-bottom: 3rem;
	color: var(--first-color);
}
.section3 .text1 p{
	width: 70%;
	margin: auto;
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1.8rem;
}

.section3 .grid1{
	width: 100%;
	margin: auto;
	position: relative;
}
.section3 .grid1:before {
	  content: ' ';
	  display: block;
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  opacity: 0.15;
	  background-image: url('img/production_2.jpg');
	  background-repeat: no-repeat;
	  background-position: 50% 0;
	  background-size: cover;
}
.section3 .grid1 .image_background{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	height: 100%;
	margin: auto;
	gap: 4rem;
}
.section3 .grid1 .production{
	width: 500px;
	height: 500px;
	object-fit: cover;
	border-radius: 50%;
	text-align: center;
	opacity: 0.8;
}
.section3 .grid1 .container_articles{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	width: 95%;
	margin: auto;
	padding: 2rem 0;
}
.section3 .grid1 .container_articles .articles{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 90%;
}

.section3 .grid1 .container_articles h2{
	font-size: 1.6rem;
	font-family: var(--first-font), sans-serif;
}


.section3 .grid1 .container_articles .separateur{
	width: 65%;
	height: 2px;
	background: red;
	margin: 1rem auto;
}

.section3 .grid1 .container_articles p{
	width: 80%;
	font-size: 1.15rem;
	font-weight: 300;
	margin-bottom: 1.5rem;
	text-align: center;
}

.section3 .grid1 .container_articles .icon{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	padding: 10px;
	background: red;
	margin-bottom: 0.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.section3 .grid1 .container_articles .icon i{
	font-size: 1.9rem;
	color: black;
}


.section3 .grid1 .container_articles .article1, 
.section3 .grid1 .container_articles .article2,
.section3 .grid1 .container_articles .article3,
.section3 .grid1 .container_articles .article4{
	margin-bottom: 1rem;
}






/* ********* Section 4 ******** */


.section4{
	margin: auto;
	margin-bottom: 4rem;
	position: relative;
	height: 28rem;
	width: 100%;
	background: var(--background-color);
}
.section4 h2{
	text-align: center;
	font-family: var(--first-font), sans-serif;
	font-size: 2.8rem;
	font-weight: 600;
	padding: 4rem 0;
	font-weight: bold;
	color: var(--first-color);
}
.section4 .section_container{
	width: 95%;
	margin: auto;
	overflow: hidden;
}
.section4 .slide_container{
	display: flex;
	width: calc(250px * 18);
	animation: scroll 30s linear infinite;
}
.section4 .slide_container:hover{
	animation-play-state: paused;
}

.section4 .slide{
	height: 200px;
	width: 250px;
	display: flex;
	align-items: center;
	padding: 15px;
}
.section4 .slide img{
	width: 180px;
	height: 140px;
	object-fit: cover;
	transition: 0.3s;
	cursor: pointer;
}
.section4 .slide img:hover{
	transform: scale(1.1);
}
.section4 .section_container .slide_container .contain0 img{
	object-fit: fill;
}
.section4 .section_container .slide_container .contain1 img{
	object-fit: contain;
	padding: 4px;
	background: white;
}
.section4 .section_container .slide_container .contain2 img{
	object-fit: fill;
}
.section4 .section_container .slide_container .contain3 img{
	object-fit: fill;
}
.section4 .section_container .slide_container .contain4 img{
	object-fit: contain;
}
.section4 .contain2 .nikon{
	background: white;
	padding: 10px;
}

.section4 .section_container .slide_container .m48h{
	object-fit: contain;
	background: rgba(0, 0, 0, 0.6);
}
.section4 .section_container .slide_container .groove{
	object-fit: contain;
}



@keyframes scroll{
	0%{
		transform: translateX(0);
	}
	100%{
		transform: translateX(calc(-250px * 9));
	}
	
}






/* ********* Footer ******** */



footer{
	max-width: 100vw;
	color: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 3rem;
	background: black;
	box-shadow: 0 0 3px #FF0033, 
	0 0 6px #FF0033,
	0 0 15px #FF0033;
}
footer h1{
	font-size: 1.5rem;
	color: white;
	padding-bottom: 1rem;
}
footer p, footer li{
	font-size: 0.9rem;
	font-weight: 700;
	color: darkgrey;
}
footer .article2{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}
footer .article2 ul{
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 2.5rem;
}
footer .article2 ul li a i{
	font-size: 1.5rem;
	transition: 0.1s;
	color: darkgrey;
	display: flex;
	justify-content: center;
	align-items: center;
}
footer .article2 ul li a i:hover{
	transform: scale(1.15);
	color: var(--second-color);
	opacity: 0.8;
}
footer .article3 li{
	margin-bottom: 0.3rem;
}
footer .article3 li a{
	color: darkgrey;
}

footer .article3 li:hover{
	color: lightgrey;
	text-decoration: underline;
	cursor: pointer;
}









/********** Media Queries **********/


@media (max-width: 1150px){

	.nav__menu{
	    gap: 2rem;
	}
	nav .nav__menu a{
	    font-size: 1.2rem;
	}


	.nav__container .infos{
		gap: 0.5rem;
	}

	.nav__container .contact_us{

	    width: 140px;
	    height: 35px;
	    border-radius: 40px;
	    font-size: 1rem;
	    padding: 2px;
	}
	nav p{
	    font-size: 1rem;
	}


	.section1 h1{
		font-size: 5rem;
		top: calc(85% - 8rem);
	}

	.section1 h2{
		font-size: 1.2rem;
		line-height: 2.4rem;
	}
	.section1 button{
		padding: 10px;
		font-size: 1.25rem;
		font-weight: 600;
		border-radius: 40px;
		margin-top: 3.5rem;
	}



	.section2{
		margin: 5rem 0;
	}
	.section2 h2{
		font-size: 1.6rem;
	}


	
	.section2 .title2{
		font-size: 2.5rem;
	}
	.section2 .para1{
		font-size: 1.3rem;
		margin-bottom: 6rem;
		line-height: 2rem;
	}
	.section2 .realisations{
		gap: 2rem;
	}
	.section2 .realisations p{
		width: 65%;
		font-size: 1.4rem;
	}




	.section3 .text1{
		margin-bottom: 6rem;
	}

	.section3 .text1 h1{
		font-size: 2.5rem;
		margin-bottom: 3rem;
	}
	.section3 .text1 p{
		font-size: 1.2rem;
		line-height: 1.8rem;
	}
	.section3 .grid1 .image_background{
		gap: 4rem;
	}
	.section3 .grid1 .production{
		width: 400px;
		height: 400px;
	}
	.section3 .grid1 .container_articles h2{
		font-size: 1.3rem;
	}
	.section3 .grid1 .container_articles p{
		font-size: 1.2rem;
		margin-bottom: 1.5rem;
	}
	.section3 .grid1 .container_articles .icon{
		width: 50px;
		height: 50px;
		padding: 10px;
		margin-bottom: 0.5rem;
	}
	.section3 .grid1 .container_articles .icon i{
		font-size: 1.7rem;
	}
	.section3 .grid1 .container_articles .article1, 
	.section3 .grid1 .container_articles .article2,
	.section3 .grid1 .container_articles .article3,
	.section3 .grid1 .container_articles .article4{
		margin-bottom: 1rem;
	}


	footer{
		padding: 0.8rem 1.5rem;
	}
	footer h1{
		font-size: 1.2rem;
		padding-bottom: 0.8rem;
	}
	footer p, footer li{
		font-size: 0.8rem;
	}
	footer .article2{
		gap: 1rem;
	}
	footer .article2 ul{
		gap: 2rem;
	}
	footer .article2 ul li a i{
		font-size: 1.2rem;
	}
	footer .article3 li{
		margin-bottom: 0.3rem;
	}
}



@media (max-width: 1000px){
	.nav__menu{
	    gap: 1.5rem;
	}
	nav .nav__menu a{
	    font-size: 1.1rem;
	}


	.nav__container .infos{
		gap: 0.4rem;
	}

	.nav__container .contact_us{
	    width: 130px;
	    height: 30px;
	    border-radius: 30px;
	    font-size: 0.9rem;
	    padding: 2px;
	}
	nav p{
	    font-size: 0.9rem;
	}

	.section1 h1{
		font-size: 4rem;
		top: calc(95% - 8rem);
	}

	.section1 h2{
		font-size: 1.1rem;
		line-height: 2rem;
	}
	.section1 button{
		padding: 10px;
		font-size: 1.15rem;
		font-weight: 600;
		border-radius: 40px;
		margin-top: 2rem;
	}

	.section2{
		margin: 5rem 0;
	}
	.section2 h2{
		font-size: 1.3rem;
	}

	.section2 button{
		font-size: 1.2rem;
		border-radius: 50px;
		margin: 3rem auto;
	}


	.section2 .title2{
		font-size: 2rem;
	}
	.section2 .para1{
		font-size: 1.1rem;
		margin-bottom: 6rem;
		line-height: 2rem;
	}
	.section2 .realisations p{
		width: 65%;
		font-size: 1.3rem;
	}



	.section3 .text1{
		margin-bottom: 6rem;
	}

	.section3 .text1 h1{
		font-size: 2rem;
		margin-bottom: 3rem;
	}
	.section3 .text1 p{
		font-size: 1.1rem;
		line-height: 1.7rem;
	}
	.section3 .grid1 .image_background{
		gap: 4rem;
	}
	.section3 .grid1 .production{
		width: 300px;
		height: 300px;
	}
	.section3 .grid1 .container_articles h2{
		font-size: 1.1rem;
	}
	.section3 .grid1 .container_articles p{
		font-size: 1rem;
		margin-bottom: 0.8rem;
	}
	.section3 .grid1 .container_articles .icon{
		width: 40px;
		height: 40px;
		padding: 10px;
		margin-bottom: 0.5rem;
	}
	.section3 .grid1 .container_articles .icon i{
		font-size: 1.5rem;
	}
	.section3 .grid1 .container_articles .article1, 
	.section3 .grid1 .container_articles .article2,
	.section3 .grid1 .container_articles .article3,
	.section3 .grid1 .container_articles .article4{
		margin-bottom: 1rem;
	}



	.section4{
		height: 28rem;
	}
	.section4 h2{
		font-size: 2rem;
		padding: 4rem 0;
	}
	.section4 .slide{
		height: 200px;
		width: 250px;
	}
	.section4 .slide img{
		width: 180px;
		height: 140px;
	}
}



@media (max-width: 800px){
	.nav__menu{
	    gap: 1rem;
	}
	nav .nav__menu a{
	    font-size: 1rem;
	}


	.nav__container .infos{
		gap: 0.3rem;
	}

	.nav__container .contact_us{
	    width: 110px;
	    height: 25px;
	    border-radius: 20px;
	    font-size: 0.8rem;
	    padding: 2px;
	}
	nav p{
	    font-size: 0.8rem;
	}


	.section1 h1{
		font-size: 3rem;
		top: calc(95% - 8rem);
	}

	.section1 h2{
		font-size: 0.9rem;
		line-height: 1.8rem;
	}
	.section1 button{
		padding: 8px;
		font-size: 1.1rem;
		font-weight: 600;
		border-radius: 40px;
		margin-top: 1.5rem;
	}




	.section2{
		margin: 4rem 0;
	}
	.section2 h2{
		font-size: 1.2rem;
		line-height: 2rem;
	}
	.section2 .container{
		width: 92%;
		margin: auto;
	}
	
	.section2 .realisations{
		width: 90%;
	}
	.section2 .realisations .img1,
	.section2 .realisations .img2,
	.section2 .realisations .img3{
		position: relative;
		width: 200px;
		height: 113px;
	}

	.section2 button{
		font-size: 1rem;
		border-radius: 30px;
		margin: 2rem auto;
	}


	.section2 .title2{
		font-size: 2rem;
	}
	.section2 .para1{
		font-size: 1rem;
		margin-bottom: 4rem;
		line-height: 2rem;
	}
	.section2 .realisations p{
		font-size: 1rem;
	}



	.section3 .text1{
		margin-bottom: 6rem;
	}

	.section3 .text1 h1{
		font-size: 1.8rem;
		margin-bottom: 3rem;
	}
	.section3 .text1 p{
		font-size: 1rem;
		line-height: 1.7rem;
	}
	.section3 .grid1 .production{
		width: 250px;
		height: 250px;
	}
	.section3 .grid1 .container_articles h2{
		font-size: 1rem;
	}
	.section3 .grid1 .container_articles p{
		font-size: 0.9rem;
		margin-bottom: 0.8rem;
	}
	.section3 .grid1 .container_articles .icon{
		width: 40px;
		height: 40px;
		padding: 10px;
		margin-bottom: 0.5rem;
	}
	.section3 .grid1 .container_articles .icon i{
		font-size: 1.4rem;
	}
	.section3 .grid1 .container_articles .article1, 
	.section3 .grid1 .container_articles .article2,
	.section3 .grid1 .container_articles .article3,
	.section3 .grid1 .container_articles .article4{
		margin-bottom: 0.8rem;
	}


	.section4{
		height: 28rem;
	}
	.section4 h2{
		font-size: 1.8rem;
		padding: 4rem 0;
	}
	.section4 .slide{
		height: 180px;
		width: 230px;
	}
	.section4 .slide img{
		width: 160px;
		height: 120px;
	}



	footer{
		padding: 0.6rem 1rem;
	}
	footer h1{
		font-size: 1rem;
		padding-bottom: 0.7rem;
	}
	footer p, footer li{
		font-size: 0.7rem;
	}
	footer .article2{
		gap: 1rem;
	}
	footer .article2 ul{
		gap: 1rem;
	}
	footer .article2 ul li a i{
		font-size: 1.1rem;
	}
	footer .article3 li{
		margin-bottom: 0.3rem;
	}
}

@media (max-width: 700px){
	nav{
	    height: 5.5rem;
	}
	.nav__menu{
	    gap: 1rem;
	}
	nav .nav__menu a{
	    font-size: 0.8rem;
	}
	.section1 h1{
		width: 45%;
	}

	.section1 .container_1{
		width: 45%;
	}
	.nav__container .infos{
		gap: 0.3rem;
	}

	.nav__container .contact_us{
	    width: 110px;
	    height: 25px;
	    border-radius: 20px;
	    font-size: 0.7rem;
	    padding: 2px;
	}
	nav p{
	    font-size: 0.7rem;
	}

	.section2{
		margin: 3rem 0;
	}
	.section2 h2{
		font-size: 1.1rem;
		line-height: 2rem;
	}

	.section2 button{
		font-size: 0.9rem;
		border-radius: 20px;
		margin: 2rem auto;
	}



	.section2 .title2{
		font-size: 1.8rem;
	}
	.section2 .para1{
		font-size: 0.9rem;
		margin-bottom: 4rem;
		line-height: 2rem;
	}
	.section2 .realisations p{
		font-size: 0.8rem;
	}



	.section3 .text1{
		margin-bottom: 6rem;
	}

	.section3 .text1 h1{
		font-size: 1.8rem;
		margin-bottom: 3rem;
	}
	.section3 .text1 p{
		width: 80%;
		font-size: 0.9rem;
		line-height: 1.7rem;
	}
	.section3 .grid1 .production{
		width: 200px;
		height: 200px;
	}
	.section3 .grid1 .container_articles h2{
		font-size: 0.9rem;
	}
	.section3 .grid1 .container_articles p{
		font-size: 0.8rem;
		margin-bottom: 0.8rem;
	}
	.section3 .grid1 .container_articles .icon{
		width: 40px;
		height: 40px;
		padding: 10px;
		margin-bottom: 0.5rem;
	}
	.section3 .grid1 .container_articles .icon i{
		font-size: 1.3rem;
	}
	.section3 .grid1 .container_articles .article1, 
	.section3 .grid1 .container_articles .article2,
	.section3 .grid1 .container_articles .article3,
	.section3 .grid1 .container_articles .article4{
		margin-bottom: 0.7rem;
	}


	.section4{
		height: 22rem;
	}
	.section4 h2{
		font-size: 1.8rem;
		padding: 4rem 0;
	}
	.section4 .slide{
		height: 160px;
		width: 200px;
	}
	.section4 .slide img{
		width: 140px;
		height: 100px;
	}



	footer{
		padding: 0.6rem 1rem;
	}
	footer h1{
		font-size: 0.9rem;
		padding-bottom: 0.6rem;
	}
	footer p, footer li{
		font-size: 0.6rem;
	}
	footer .article2{
		gap: 1rem;
	}
	footer .article2 ul{
		gap: 1rem;
	}
	footer .article2 ul li a i{
		font-size: 1.1rem;
	}
	footer .article3 li{
		margin-bottom: 0.3rem;
	}
}



@media (max-width: 600px){
	nav{
	    height: 5rem;
	}
	.nav__menu{
	    gap: 1rem;
	}
	nav .nav__menu a{
	    font-size: 0.7rem;
	}


	.nav__container .infos{
		gap: 0.2rem;
	}

	.nav__container .contact_us{
	    width: 100px;
	    height: 20px;
	    border-radius: 20px;
	    font-size: 0.6rem;
	    padding: 2px;
	}
	nav p{
	    font-size: 0.6rem;
	}

.section1 .container_0{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18vw;
}

.section1 .container_1{
	width: 75%;
	z-index: 10;
	display: flex;
	flex-direction:column;
	align-items: center;
	text-align: center;
}

	.section1 h1{
		font-size: 3.5rem;
		margin: auto;
		text-align: center;
		width: 80%;
	}
	.section1 h2{
		font-size: 1.05rem;
		line-height: 1.6rem;
	}
	.section1 button{
		padding: 9px;
		font-size: 1.05rem;
		font-weight: 600;
		border-radius: 40px;
		margin-top: 1.8rem;
	}

	.section2{
		margin: 3rem 0;
	}
	.section2 h2{
		font-size: 0.9rem;
		line-height: 1.7rem;
	}

	.section2 button{
		font-size: 0.8rem;
		border-radius: 20px;
		margin: 1rem auto;
	}



	.section2 .title2{
		font-size: 1.6rem;
	}
	.section2 .para1{
		font-size: 0.8rem;
		margin-bottom: 4rem;
		line-height: 2rem;
	}
	.section2 .realisations p{
		font-size: 0.6rem;
	}

	.section3 .grid1 .container_articles p{
		font-size: 0.7rem;
		margin-bottom: 0.8rem;
	}

	.section4{
		height: 21rem;
	}
	.section4 h2{
		font-size: 1.8rem;
		padding: 4rem 0;
	}
	.section4 .slide{
		height: 140px;
		width: 160px;
	}
	.section4 .slide img{
		width: 120px;
		height: 80px;
	}
}

@media (max-width: 550px){
	nav{
	    height: 4rem;
	}
	.nav__menu{
	    gap: 0.8rem;
	}
	nav .nav__menu a{
	    font-size: 0.6rem;
	}


	.nav__container .infos{
		gap: 0.18rem;
	}

	.nav__container .contact_us{
	    width: 80px;
	    height: 16px;
	    border-radius: 10px;
	    font-size: 0.5rem;
	    padding: 1.5px;
	}
	nav p{
	    font-size: 0.5rem;
	}
	.section1 h1{
		top: calc(95% - 7rem);
	}


	.section2{
		margin: 3rem 0;
	}
	.section2 h2{
		font-size: 0.8rem;
		line-height: 1.7rem;
	}

	.section2 button{
		font-size: 0.7rem;
		border-radius: 20px;
		margin: 1rem auto;
	}


	.section2 .para1{
		font-size: 0.8rem;
		margin-bottom: 4rem;
		line-height: 1.7rem;
	}



	.section3 .text1{
		margin-bottom: 6rem;
	}

	.section3 .text1 h1{
		font-size: 1.6rem;
		margin-bottom: 3rem;
	}
	.section3 .text1 p{
		width: 80%;
		font-size: 0.7rem;
		line-height: 1.4rem;
	}
	.section3 .grid1 .production{
		width: 180px;
		height: 180px;
	}
	.section3 .grid1 .container_articles h2{
		font-size: 0.8rem;
	}
	.section3 .grid1 .container_articles p{
		font-size: 0.65rem;
		margin-bottom: 0.6rem;
		line-height: 1rem;
	}
	.section3 .grid1 .container_articles .icon{
		width: 40px;
		height: 40px;
		padding: 10px;
		margin-bottom: 0.5rem;
	}
	.section3 .grid1 .container_articles .icon i{
		font-size: 1.3rem;
	}
	.section3 .grid1 .container_articles .article1, 
	.section3 .grid1 .container_articles .article2,
	.section3 .grid1 .container_articles .article3,
	.section3 .grid1 .container_articles .article4{
		margin-bottom: 0.7rem;
	}

	.section3 .grid1 .container_articles .icon{
		width: 35px;
		height: 35px;
		padding: 8px;
		margin-bottom: 0.4rem;
	}
	.section3 .grid1 .container_articles .icon i{
		font-size: 1.2rem;
	}



	footer{
		padding: 0.6rem 0.8rem;
	}
	footer h1{
		font-size: 0.8rem;
		padding-bottom: 0.6rem;
	}
	footer p, footer li{
		font-size: 0.5rem;
	}
	footer .article2{
		gap: 1rem;
	}
	footer .article2 ul{
		gap: 1rem;
	}
	footer .article2 ul li a i{
		font-size: 0.8rem;
	}
	footer .article3 li{
		margin-bottom: 0.3rem;
	}
}



@media (max-width: 500px){

	.section2 .container{
		width: 95%;
		margin: auto;
	}
	
	.section2 .realisations{
		width: 95%;
	}
	.section2 .realisations .img1,
	.section2 .realisations .img2,
	.section2 .realisations .img3{
		position: relative;
		width: 120px;
		height: 67px;
	}

}

@media (max-width: 450px){
	nav{
	    height: 3.5rem;
	}
	.nav__menu{
	    gap: 0.25rem;
	}
	nav .nav__menu a{
	    font-size: 0.4rem;
	}


	.nav__container .infos{
		gap: 0.16rem;
	}

	.nav__container .contact_us{
	    width: 70px;
	    height: 14px;
	    border-radius: 10px;
	    font-size: 0.4rem;
	    padding: 1.45px;
	}
	nav p{
	    font-size: 0.4rem;
	}

	.section1 h1{
		font-size: 2rem;
		top: calc(95% - 6rem);
	}
	.section1 .container_0{
		gap: 18vw;
	}

	.section1 .container_1{
		width: 75%;
		z-index: 10;
		display: flex;
		flex-direction:column;
		align-items: center;
		text-align: center;
	}

		.section1 h1{
			font-size: 2.5rem;
			width: 80%;
		}
		.section1 h2{
			font-size: 0.9rem;
			line-height: 1.6rem;
		}
		.section1 button{
			padding: 9px;
			font-size: 0.9rem;
			font-weight: 600;
			border-radius: 40px;
			margin-top: 1.8rem;
		}

		.section2 .para1{
			font-size: 0.7rem;
			margin-bottom: 3rem;
			line-height: 1.4rem;
		}

		.section3 .grid1 .container_articles p{
			font-size: 0.55rem;
			margin-bottom: 0.8rem;
		}


		footer{
		padding: 0.6rem 0.8rem;
		}
		footer h1{
			font-size: 0.6rem;
			padding-bottom: 0.4rem;
		}
		footer p, footer li{
			font-size: 0.4rem;
		}
		footer .article2{
			gap: 0.8rem;
		}
		footer .article2 ul{
			gap: 0.8rem;
		}
		footer .article2 ul li a i{
			font-size: 0.5rem;
		}
		footer .article3 li{
			margin-bottom: 0.3rem;
		}
}
	
@media (max-width: 350px){
	nav{
	    height: 3.5rem;
	}
	.nav__menu{
	    gap: 0.35rem;
	}
	nav .nav__menu a{
	    font-size: 0.4rem;
	}


	.nav__container .infos{
		gap: 0.16rem;
	}

	.nav__container .contact_us{
	    width: 60px;
	    height: 13px;
	    border-radius: 10px;
	    font-size: 0.37rem;
	}
	nav p{
	    font-size: 0.35rem;
	}
	.nav__container .logo_container{
	    display: none;
	}




	.section3 .text1{
		margin-bottom: 4rem;
	}

	.section3 .text1 h1{
		font-size: 1.6rem;
		margin-bottom: 3rem;
	}

	.section3 .text1 p{
		width: 80%;
		font-size: 0.7rem;
		line-height: 1.4rem;
	}
	.section3 .grid1 .production{
		width: 180px;
		height: 180px;
	}
	.section3 .grid1 .container_articles{
		width: 100%;
	}
	.section3 .grid1 .container_articles h2{
		font-size: 0.8rem;
	}
	.section3 .grid1 .container_articles p{
		font-size: 0.6rem;
		margin-bottom: 0.6rem;
		line-height: 1rem;
	}
	.section3 .grid1 .container_articles .icon{
		width: 40px;
		height: 40px;
		padding: 10px;
		margin-bottom: 0.5rem;
	}
	.section3 .grid1 .container_articles .icon i{
		font-size: 1.3rem;
	}
	.section3 .grid1 .container_articles .article1, 
	.section3 .grid1 .container_articles .article2,
	.section3 .grid1 .container_articles .article3,
	.section3 .grid1 .container_articles .article4{
		margin-bottom: 0.7rem;
	}

	.section3 .grid1 .container_articles .icon{
		width: 35px;
		height: 35px;
		padding: 8px;
		margin-bottom: 0.4rem;
	}
	.section3 .grid1 .container_articles .icon i{
		font-size: 1.2rem;
	}


		footer{
			padding: 0.6rem 0.1rem;
		}
		footer h1{
			font-size: 0.5rem;
			padding-bottom: 0.4rem;
		}
		footer p, footer li{
			font-size: 0.35rem;
		}
		footer .article2{
			gap: 0.5rem;
		}
		footer .article2 ul{
			gap: 0.5rem;
		}
		footer .article2 ul li a i{
			font-size: 0.4rem;
		}
		footer .article3 li{
			margin-bottom: 0.3rem;
		}

}