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

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-decoration: none;
	scroll-behavior: smooth;
}
:root {
	--primary: #1BFFBB;
	--secondary: #A970FF;
	--bg: #181624;
	--white: #ffffff;
	--nav: #1E1C2C;
}
.primary {
	color: var(--primary) !important;
}
.secondary {
	color: var(--secondary) !important;
}
.colorbg {
	color: var(--bg) !important;
}
.colornav {
	color: var(--nav) !important;
}
.bgprimary {
	background-color: var(--primary) !important;
}
.bgsecondary {
	background-color: var(--secondary) !important;
}
.bgcolorbg {
	background-color: var(--bg) !important;
}
.bgcolornav {
	background-color: var(--nav) !important;
}
/* Global */
::-webkit-scrollbar {
	width: 8px;
}
/* Fond */
::-webkit-scrollbar-track {
position: relative;
box-shadow: inset -8px 0 0 1px var(--nav);
}
/* Ascenseur */
::-webkit-scrollbar-thumb {
background: #272538;
border-radius: 8px;
}
body{
	font-family: 'Rubik', sans-serif;
	font-style: normal;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.50;
	color: var(--white);
	background-color: var(--bg);
	overflow-x: hidden;
	/* background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat-back.svg'); */
	/* background-image: url('	https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat.svg'); */
	background-position: center;
	background-repeat: repeat;
	background-size: 4%;
}
h1{
	font-family: 'Catamaran', sans-serif;
	font-weight: 900;
	line-height: 150%;
	text-transform: capitalize;
	color: var(--white);
	margin: 0;
	padding: 0;
}
h2 {
	font-family: 'Catamaran', sans-serif;
	font-size: 38px;
	font-weight: 700;
	line-height: 150%;
	color: var(--white);
	margin: 0;
	padding: 0;
}
h3 {
	font-family: 'Catamaran', sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 130%;
	color: var(--white);
	margin: 0;
	padding: 0;
}
h4 {
	text-transform: uppercase;
	font-size: 18px;
	font-weight: 500;
	line-height: 150%;
	color: var(--white);
	margin: 0;
	padding: 0;
}
h5 {
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 400;
	line-height: 150%;
	color: var(--white);
	margin: 0;
	padding: 0;
}
p {
	color: var(--white);
	margin: 0;
	padding: 0;
}
ul {
	margin: 0;
	padding: 0;
	margin-left: 17px;
}
  
ul li::marker {
	color: var(--primary);
	font-weight: bold;
	margin-left: 1em;
}
a {
    text-decoration: none;
	color: var(--white);
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
a:hover {
    text-decoration: none;
	color: var(--primary);
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.logo {
	font-family: 'Catamaran', sans-serif;
	font-weight: 700;
	color: var(--primary);
}
header{
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: all .40s ease;
	font-size: 16px;
}
.mycontainernav {
	width: 55vw;
	height: 60px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.navbar{
	display: flex;
	align-items: flex-start;
	padding: 0.5rem 0 0.5rem 0;
	size: clamp(10rem, 1rem + 40vmin, 30rem);
    --size: clamp(7.5rem, 0.75rem + 30vmin, 22.5rem);
    --size: clamp(6.25rem, 0.625rem + 25vmin, 18.75rem);
    --size: clamp(5rem, 0.5rem + 20vmin, 15rem);
    --gap: calc(var(--size) / 14);
    --duration: 60s;
    --duration: 50s;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));
}
.navbar a{
	color: var(--white);
	margin: auto;
	margin-right: 20px;
	margin-left: 20px;
	border-radius: 0.5rem;
	text-decoration: none;
	opacity: 60%;
}
header ul{
margin: 0 !important;
}
.navbar li{
	display: flex;
	justify-content: center;
}
.nav-cont {
	padding-right: 0 !important;
	margin-right: 0 !important;
}
.navbar a.active {
	opacity: 100%;
}
.navbar a:hover {
	opacity: 100%;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.navbar a.active div {
	background-color: var(--primary);
	border-radius: 0.5rem;
    margin: 0 2px;
	width: 8px;
	height: 5px;
	margin: auto;
	margin-top: 2px;

}
#menu-icon{
	font-size: 36px;
	color: var(--white);
	z-index: 10001;
	cursor: pointer;
	display: none;
}
header.sticky{
	padding: 8px;
	background: var(--nav);
	border-bottom: 1px solid var(--nav);
	background: rgba( 30, 28, 44, 0.93 );
	backdrop-filter: blur( 18px );
	-webkit-backdrop-filter: blur( 13.5px );
}
section {
	width: 100%;
	display: block;
	overflow: hidden;
	padding-top: 50px;
	padding-bottom: 50px;
}
.mycontainer {
	width: 55vw;
	margin: auto;
}
i {
	text-align: center;
}
.hero {
	gap : 30px;
	padding-bottom: 3rem;
}
.hero-left {
	width: 54%;
	min-width: 466px;
}
.hero-right {
    width: 42%;
    display: grid;
    justify-content: end;
	padding-bottom: 20px;
}
.social-icon a {
    width: 46px;
    height: 46px;
    display: inline-flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--white);
	text-decoration: none;
}
.social-icon a::before {
    content: "";
    width: 46px;
    height: 46px;
    position: absolute;
    background-color: var(--white);
    border-radius: 50%;
    transform: scale(0);
    transition: 0.3s ease-in-out;
}
.social-icon a:hover::before {
    transform: scale(1);
}
.social-icon a i {
    /* width: 50%; */
    z-index: 1;
    transition: 0.3s ease-in-out;
	color: var(--white);
}
.social-icon a:hover i {
    filter: brightness(0) saturate(100%) invert(0%) sepia(7%) saturate(98%) hue-rotate(346deg) brightness(95%) contrast(86%);
}
.card-hero-cont {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: space-between;
	padding-top: 5rem;
}
.card-hero {
    background-color: var(--primary);
    padding: 40px 50px 40px 50px;
    border-radius: 30px;
}
.card-left {
    width: 46%;
    height: 100%;
}
.card-right {
    width: 46%;
    height: 100%;
}
hr {
	background-color: var(--nav);
	opacity: 0;
	/* height: 2px; */
	margin-top: 38px;
	margin-bottom: 38px;
}
#contact p {
	margin-bottom: 10px;
}

/* Hover image card */
figure {
	margin: 0;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
}
.hover01 img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	max-width: 100%;
}
.hover01:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
.hover01 span:hover {
	color: var(--primary);
}
/* Fin Hover image card */

.type2 {
    background-color: var(--bg);
    color: white;
	font-size: 14px;
    font-weight: 400;
    padding: 5px 10px;
    border-radius: 5px;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.type {
    background-color: var(--primary);
    color: var(--bg);
    font-size: 14px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 5px;
}
.card-about {
	background-color: var(--nav); 
	padding: 50px;
}
.text-hero {
	font-weight: 400;
	color: var(--bg);
}
.skills {
	display: flex;
	justify-content: left;
	gap : 120px;
}
.voir_plus {
	display: inline-block;
	position: relative;
	cursor: pointer;
}
.voir_plus div {
	position: absolute; z-index: 1;
	right: 0;
	bottom: 0;
	color: white;
}
.voir_plus span {
	background-color: var(--bg);
	color: var(--white);
	padding: 10px 15px;
}
.img-prog {
	width: 30vw;
	max-width: 400px !important;
}
.card-2 {
	background-color: var(--nav);
	padding: 32px;
	max-width: 49.1%;
	min-width: 250px;
}
.card-2 img {
	top: 0;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	position: relative;
}
.card-2:hover img{
	top: -6px;
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
#about .card-about a p {
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
#about .card-about a p:hover {
	color: var(--secondary) !important;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

/* ========================= # CSS Modal ========================= */
/* button {
	text-align: left;
	text-transform: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	margin: 0;
}
button:focus {
	outline: none;
	box-shadow: none;
  } */
.modal {
	width: 100%;
	background-color: var(--bg);
}
.modal-header {
	/* position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1000; */
	background-color: var(--nav);
	border-bottom: none;
	align-items: center;
	color: var(--primary);
}
.modal-body {
	padding: 0;
}
.modal-content{
	background-color: var(--bg) !important;
}
.modal-cont {
	display: flex;
	flex-wrap: wrap;
	gap : 30px
}
.modal-cont img {
	width: 16vw;	
}
.modal-cont .web {
	width: 45%;
	height: 100%;
}
/* .modal-content button {
    padding: 0;
    background-color: transparent;
    border: 0 solid var(--nav);
	border-radius: 50%;
} */
.modal-fullscreen-xl {
	padding: 0 !important;
  }
  .modal-fullscreen-xl .modal-dialog {
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
  }
  .modal-fullscreen-xl .modal-content {
	height: 100%;
	border: 0;
	border-radius: 0;
  }
  .modal-fullscreen-xl .modal-body {
	overflow-y: auto;
  }  
.btn-open-modal {
	margin-bottom: 0.5em;
}  
/* ========================= # début slider ========================= */

.center-wrap {
    /* position: absolute; */
	width: 100%;
	display: block;
	overflow: hidden;
	left: 0;
	/* top: 50%;
	transform: translateY(-50%); */
	z-index: 2;
}

:root {
	/* --size: clamp(10rem, 1rem + 40vmin, 30rem); */
	/* --size: clamp(7.5rem, 0.75rem + 30vmin, 22.5rem); */
	--size: clamp(6.25rem, 0.625rem + 25vmin, 18.75rem);
	/* --size: clamp(5rem, 0.5rem + 20vmin, 15rem); */
	--gap: calc(var(--size) / 14);
	/* --duration: 60s; */
	--duration: 50s;
	--scroll-start: 0;
	--scroll-end: calc(-100% - var(--gap));
  }
  
  @media (prefers-color-scheme: dark) {
	:root {
	  --color-text: white;
	  --color-bg-accent: #1E1C2C;
	}
  }
  
  .marquee {
	display: flex;
	overflow: hidden;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;
	gap: var(--gap);
	-webkit-mask-image: linear-gradient(
	  var(--mask-direction, to right),
	  hsl(0 0% 0% / 0),
	  hsl(0 0% 0% / 1) 20%,
	  hsl(0 0% 0% / 1) 80%,
	  hsl(0 0% 0% / 0)
	);
			mask-image: linear-gradient(
	  var(--mask-direction, to right),
	  hsl(0 0% 0% / 0),
	  hsl(0 0% 0% / 1) 20%,
	  hsl(0 0% 0% / 1) 80%,
	  hsl(0 0% 0% / 0)
	);
  }
  
  .marquee__group {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: var(--gap);
	min-width: 100%;
	-webkit-animation: scroll-x var(--duration) linear infinite;
			animation: scroll-x var(--duration) linear infinite;
  }
  .marquee__group img {
	width: 30px;
	height: 30px;
  }
  
  @media (prefers-reduced-motion: reduce) {
	.marquee__group {
	  -webkit-animation-play-state: paused;
			  animation-play-state: paused;
	}
  }
  
  .marquee--vertical {
	--mask-direction: to bottom;
  }
  
  .marquee--vertical,
  .marquee--vertical .marquee__group {
	flex-direction: column;
  }
  
  .marquee--vertical .marquee__group {
	-webkit-animation-name: scroll-y;
			animation-name: scroll-y;
  }
  
  .marquee--reverse .marquee__group {
	animation-direction: reverse;
	-webkit-animation-delay: -3s;
			animation-delay: -3s;
  }
  
  @-webkit-keyframes scroll-x {
	from {
	  transform: translateX(var(--scroll-start));
	}
	to {
	  transform: translateX(var(--scroll-end));
	}
  }
  
  @keyframes scroll-x {
	from {
	  transform: translateX(var(--scroll-start));
	}
	to {
	  transform: translateX(var(--scroll-end));
	}
  }
  
  @-webkit-keyframes scroll-y {
	from {
	  transform: translateY(var(--scroll-start));
	}
	to {
	  transform: translateY(var(--scroll-end));
	}
  }
  
  @keyframes scroll-y {
	from {
	  transform: translateY(var(--scroll-start));
	}
	to {
	  transform: translateY(var(--scroll-end));
	}
  }
  
  /* Element styles */
  .marquee svg {
	display: grid;
	place-items: center;
	width: var(--size);
	fill: var(--color-text);
	background: var(--color-bg-accent);
	aspect-ratio: 16/9;
	padding: calc(var(--size) / 10);
	border-radius: 0.5rem;
  }
  
  .marquee--vertical svg {
	aspect-ratio: 1 / 1;
	width: calc(var(--size) / 1.5);
	padding: calc(var(--size) / 6);
  }
  
  .marquee i {
	display: grid;
	place-items: center;
	width: var(--size);
	fill: var(--white);
	background: var(--nav);
	aspect-ratio: 16/9;
	padding: calc(var(--size) / 10);
	border-radius: 0.5rem;
  }
  
  .marquee--vertical i {
	aspect-ratio: 1 / 1;
	width: calc(var(--size) / 1.5);
	padding: calc(var(--size) / 6);
  }
  /* Parent wrapper */
  .wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	margin: auto;
	/* max-width: 100vw; */
	max-width: 100vw;
  }
  
  .wrapper--vertical {
	flex-direction: row;
	height: 100vh;
  }

/* ========================= # fin slider ========================= */

/* ========================= # début Progress ========================= */

.progress-wrap {
	position: fixed;
	right: 50px;
	bottom: 50px;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	box-shadow: inset  0 0 0 2px rgba(255,255,255,0.2);
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap.active-progress {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.progress-wrap::after {
	position: absolute;
	font-family: 'unicons';
	content: '\e84b';
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	color: var(--grey);
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 1;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap:hover::after {
	opacity: 0;
}
.progress-wrap::before {
	position: absolute;
	font-family: 'unicons';
	content: '\e84b';
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	opacity: 0;
	background-image: linear-gradient(298deg, var(--primary), var(--primary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 2;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap:hover::before {
	opacity: 1;
}
.progress-wrap svg path { 
	fill: none; 
}
.progress-wrap svg.progress-circle path {
	stroke: rgb(190, 190, 190);
	stroke-width: 4;
	box-sizing:border-box;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
body.light .progress-wrap {
	box-shadow: inset  0 0 0 2px rgba(0,0,0,0.2);
}
body.light .progress-wrap::after {
	color: var(--black-blue);
}
body.light .progress-wrap svg.progress-circle path {
	stroke: var(--black-blue);
}

/* ========================= # fin Progress ========================= */
#about {
	padding-top: 70px;
}
/* CSS BOUTON MON CV */

.circle{
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--primary);
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}
.img-box{
    position: absolute;
    width: 150px;
    height: 150px;
    background-color: var(--nav);
    background-size: cover;
    border-radius: 50%;
	border: 6px solid var(--bg);
    /* filter: brightness(1.1) contrast(1.2); */
}
.text-box{
    position: absolute;
    width: 100%;
    height: 100%;
    animation: circleEffect 25s linear infinite;
	background: var(--bg);
	border-radius: 50%;
}
.btn-cv:hover .img-circle{
	/* animation: circleEffect 3s linear infinite; */
	color: var(--primary);
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.img-circle {
	z-index: 1;
	color: var(--white);
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
@keyframes circleEffect{
    0%{
        transform: rotate(360deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
.text-box span{
    position: absolute;
    top: -30px;
    left: 50%;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    transform-origin: 0 60px;
    color: #fff;
}

/* FIN DU CSS BOUTON MON CV */

@media all and (min-width: 1753px){
	.img-carre {
		display: none !important;
	}
}

@media all and (max-width: 1752px){
	.mycontainer{
		width: 60vw !important;
	}
	.mycontainernav {
		width: 60vw !important;
	}
	#contact {
		margin-bottom: 155px !important;
	}
	.img-carre {
		display: none !important;
	}
}
@media all and (max-width: 1602px){
	h1 {
		font-size: 50px;
	}
	#contact {
		margin-bottom: 0 !important;
	}
}
@media all and (max-width: 1452px){
	header.sticky{
		padding: 8px;
	}
	.mycontainer{
		width: 76vw !important;
	}
	.mycontainernav {
		width: 76vw !important;
	}
	h2 {
		font-size: 30px;
	}
	h3 {
		font-size: 26px;
	}
	.type {
		font-size: 12px !important;
	}
	.type2 {
		font-size: 12px !important;
	}
	.hero-left {
		max-width: 900px;
	}
	#contact {
		margin-bottom: 0 !important;
	}
}

@media all and (max-width: 1082px){
	header.sticky{
		padding: 8px;
	}
	.mycontainer{
		width: 90vw !important;
	}
	.mycontainernav {
		width: 90vw !important;
	}
	#menu-icon{
		display: block;
	}
	.navbar{
		position: absolute;
		top: -600px;
		right: 0;
		left: 0;
		display: flex;
		align-items: center;
		flex-direction: column;
		background: var(--nav);
		text-align: left;
		transition: all .40s ease;
	}
	.navbar a{
		display: block;
		padding: 1rem;
		margin: 1rem;
		padding-bottom: 0;
		margin-bottom: 5px;
		font-size: 20px;
	}
	.navbar div{
		margin-top: 2rem;
	}
	.navbar.active{
		top: 100%;
	}
	.nav-cont {
		padding-right: 18px !important;
		margin-right: 18px !important;
	}
	.progress-wrap.active-progress {
		display: none !important;
	}
	p {
		font-size: 16px !important;
	}
	ul {
		font-size: 16px !important;
	}
	.modal-cont img {
		width: 26vw !important;	
	}
}

@media all and (max-width: 972px){
	.mycontainer{
		width: 86vw !important;
	}
	.mycontainernav {
		width: 86vw !important;
	}
	h1 {
		font-size: 46px;
	}
	h2 {
		font-size: 26px;
	}
	h3 {
		font-size: 22px;
		font-weight: 500;

	}
	h4 {
		font-size: 16px;
	}
	.hero-left {
		max-width: 750px;
	}
	.card-hero-cont {
		gap: 20px !important;
	}
	.progress-wrap.active-progress {
		display: block !important;
	}
	.skills {
		flex-wrap: wrap;
		gap: 30px !important;
	}
	.progress-wrap.active-progress {
		display: none !important;
	}
	.card-hero {
		padding: 30px !important;
	}
	.card-about {
		padding: 50px 30px 30px !important;
	}
}

@media all and (max-width: 832px){
	.progress-wrap.active-progress {
		display: none !important;
	}
	header.sticky{
		padding: 8px;
	}
	.mycontainer{
		width: 66vw !important;
	}
	.mycontainernav {
		width: 66vw !important;
	}
	.card-left {
		width: 100% !important;
	}
	.card-right {
		width: 100% !important;
	}
	h1 {
		font-size: 36px;
	}
	.hero-left {
		width: 100% !important;
		min-width: 100% !important;
		order: 2;
	}
	.hero-right {
		width: 100% !important;
		justify-content: start !important;
		display: flex !important;
		gap: 15px;
	}
	.hero-right img {
		margin: 0 !important;
		padding: 0 50px 0 50px !important;
	}
	#home .d-flex {
		flex-wrap: wrap;
	}
	.skills {
		gap: 20px !important;
	}
	#home {
		margin-top: 0 !important;
		margin-bottom: 50px !important;
	}
	.section {
		padding-bottom: 0;
	}
	.card-hero-cont {
		padding-top: 30px !important;
	}
	.marquee__group i {
		font-size: 3em !important;
	}
	.card-hero {
		padding: 50px !important;
	}
	.card-about {
		padding: 50px !important;
	}
	.retour-ligne {
		flex-wrap: wrap;
		gap: 0px !important;
	}
	.img-prog {
		width: 100% !important;
	}
	.modal-cont img {
		width: 30vw !important;	
	}
	.modal-cont .web {
		width: 100% !important;	
	}
	.mycv {
		margin-bottom: 60px;
	}
	#contact .social-icon {
		justify-content: center !important;
	}
	#contact .social-icon div {
		padding: 10px 0px!important;
	}
	.card-2 {
		max-width: 100%;
		border-radius: 0px !important;
	}
	.card-2-2 {
		border-radius: 0 0 30px 30px !important;
	}
	hr {
		margin-top: 26px;
   		margin-bottom: 26px;
	}
	.img-carre {
		display: none !important;
	}
}

@media all and (max-width: 602px){
	header.sticky{
		padding: 8px;
	}
	.mycontainer{
		width: 70vw !important;
	}
	.mycontainernav {
		width: 70vw !important;
	}
	.hero-left {
		text-align: center !important;
	}
	.hero-right {
		justify-content: center !important;
	}
	h1 {
		font-size: 30px;
	}
	h2 {
		font-size: 26px;
		text-align: center;
	}
	h3 {
		font-size: 22px;
	}
	h4 {
		font-size: 16px;
	}
	.p-center {
		text-align: center;
	}
	.card-hero {
		padding: 30px !important;
	}
	.card-about {
		padding: 30px !important;
	}
	.modal-cont img {
		width: 80% !important;	
	}
	.img-rect {
		display: none !important;
	}
	.img-carre {
		display: block !important;
	}
	.mycv {
		justify-content: center !important;
		margin-right: 0px !important;
	}
	.img-center {
		display: flex !important;
		justify-content: center !important;
	}
	.p-mobile {
		display: none !important;
	}
	.d-flex {
		justify-content: center;
	}
	#home .d-flex {
		justify-content: center;
	}
}
@media all and (max-width: 502px){
	header.sticky{
		padding: 8px;
	}
	.mycontainer{
		width: 86vw !important;
		margin-top: 2rem !important;
	}
	.mycontainernav {
		width: 86vw !important;
	}
	.img-prog {
		width: 100% !important;
	}
	.modal-cont {
		justify-content: center !important;
	}
	hr{
		margin-top: 16px;
		margin-bottom: 16px;
	}
	#contact p {
		text-align: center;
	}
}
@media all and (max-width: 362px){
	header.sticky{
		padding: 8px;
	}
	.mycontainer{
		width: 86vw !important;
	}
	.mycontainernav {
		width: 86vw !important;
	}
	h1 {
		font-size: 28px !important;
	}
	h2 {
		font-size: 20px;
		text-align: center;
	}
	h3 {
		font-size: 18px;
	}
	h4 {
		font-size: 14px;
	}
	.p-center {
		text-align: center;
	}
	.card-hero {
		padding: 20px !important;
		border-radius: 18px !important;
	}
	.card-about {
		padding: 20px !important;
	}
	.radius-proj-1 {
		border-radius: 18px 18px 0 0!important;
	}
	.radius-proj-2 {
		border-radius: 0 0 18px 18px!important;
	}
}
@media all and (max-width: 302px){
 p {
	font-size: 14px !important;
 }
}