.hero {
display: flex;
justify-content: space-between;
align-items: center;
}
.hero img {
border: 1px solid white;
border-radius: 110px;
width: 50%;
}
.hero-text {
width: 70%;
}
.hero-text h1 {
background: linear-gradient(
to right,
var(--primary-color),
var(--secondary-color)
);
background-clip: text;
color: transparent;
}
.hero-image {
display: flex;
justify-content: center;
}
.icons-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.icons-nav img {
transition: transform 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
}
.icons-nav img:hover {
transform: scale(1.2);
} .projets-container {
display: flex;
justify-content: space-between;
flex-direction: row;
gap: 20px;
flex-wrap: wrap;
}
.projet-link {
text-decoration: none;
color: inherit;
display: block;
width: 30%;
}
.projet {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
gap: 20px;
background-color: #0f172a;
padding: 20px;
border-radius: 25px;
box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1),
0 1px 3px rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
}
.projet:hover {
box-shadow: 0 10px 15px rgba(255, 255, 255, 0.2),
0 4px 6px rgba(255, 255, 255, 0.15);
}
.projet-details {
flex: 1;
width: 100%;
}
.projet-details h3 {
margin-bottom: 10px;
color: var(--secondary-color);
text-align: center;
}
.projet-details p {
margin-bottom: 10px;
color: var(--primary-text-color);
}
.projet-details a {
color: var(--secondary-text-color);
text-decoration: none;
font-weight: bold;
}
.projet-details a:hover {
color: var(--primary-text-color);
}
#single-projet {
padding: 20px;
}
.projet-detail h1 {
text-align: center;
margin-bottom: 20px;
}
.projet-content {
display: flex; flex-wrap: wrap;
gap: 20px;
}
.projet-left,
.projet-right {
flex: 1;
min-width: 300px;
}
.projet-right {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
flex: 1;
min-width: 300px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.projet-right a {
padding: 10px 20px;
color: white;
border: 1px solid #4b5563;
background-color: #1f2937;
border-radius: 25px;
transition: all 0.3s ease;
}
.projet-right a:hover {
color: var(--secondary-color);
}
.projet-right h1 {
margin: 0;
}
.projet-image img {
width: 100%;
height: 100%;
border-radius: 10px;
}
.projet-description {
width: 100%;
margin-top: 20px;
color: var(--primary-text-color);
}
.github {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
gap: 5px;
}
.resumé {
padding: 10px 20px;
margin: 10px 0;
background-color: #0f1936;
border-left: 5px solid var(--secondary-color);
border-radius: 8px 0 0 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
margin-bottom: 20px;
}
.resumé p {
color: var(--primary-text-color);
margin: 0;
}
.resumé h3 {
color: var(--secondary-color);
margin-bottom: 10px;
} .langages {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.langages h3 {
margin-bottom: 10px;
color: var(--secondary-text-color);
}
.langage {
color: #ffffff;
padding: 5px 10px;
border-radius: 25px;
font-size: 0.875rem;
font-weight: bold;
display: inline-block;
border: 2px solid;
transition: all 0.3s ease;
cursor: pointer;
}
.langage.php {
border-color: #4f5d95;
background: linear-gradient(135deg, #4f5d95 0%, #8a9cc1 100%);
}
.langage.php:hover {
border-color: #8a9cc1;
background: linear-gradient(135deg, #8a9cc1 0%, #4f5d95 100%);
}
.langage.html {
border-color: #e34f26;
background: linear-gradient(135deg, #e34f26 0%, #ff7f50 100%);
}
.langage.html:hover {
border-color: #ff7f50;
background: linear-gradient(135deg, #ff7f50 0%, #e34f26 100%);
}
.langage.css {
border-color: #1572b6;
background: linear-gradient(135deg, #1572b6 0%, #63a4ff 100%);
}
.langage.css:hover {
border-color: #63a4ff;
background: linear-gradient(135deg, #63a4ff 0%, #1572b6 100%);
}
.langage.javascript {
border-color: #f7df1e;
background: linear-gradient(135deg, #f7df1e 0%, #ffd700 100%);
}
.langage.javascript:hover {
border-color: #ffd700;
background: linear-gradient(135deg, #ffd700 0%, #f7df1e 100%);
}
.langage.elementor {
border-color: #9b51e0;
background: linear-gradient(135deg, #9b51e0 0%, #c084e0 100%);
}
.langage.elementor:hover {
border-color: #c084e0;
background: linear-gradient(135deg, #c084e0 0%, #9b51e0 100%);
} .wpcf7-form {
max-width: 400px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 15px;
}
.wpcf7-form label {
font-weight: bold;
font-size: 16px;
color: #ffffff;
}
.input-field {
width: 100%;
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s ease-in-out;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
color: white;
}
.input-field:focus {
border-color: var(--secondary-color);
outline: none;
}
textarea.input-field {
height: 120px;
resize: vertical;
}
.btn-envoyer {
background-color: var(--primary-color);
color: white;
width: 100%;
font-size: 16px;
font-weight: bold;
padding: 12px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
.btn-envoyer:hover {
background-color: var(--secondary-color);
}
.contact-container {
display: flex;
justify-content: space-between;
}
.formulaire-contact {
width: 50%;
background-color: #0f172a;
padding: 30px 30px 0px 30px;
border-radius: 25px;
display: flex;
flex-direction: column;
}
.formulaire-contact p {
margin: 0;
}
.cord-contact {
align-items: center;
justify-content: center;
width: 50%;
display: flex;
flex-direction: column;
}
.cord-contact p {
display: flex;
align-items: center;
}
.icon-contact {
width: 50%;
}
.icon-location {
padding: 5px;
background-color: var(--secondary-color);
border-radius: 50%;
}
.fs24px {
font-size: 24px;
font-weight: 700;
} .projets-page {
margin: 30px auto;
}
.projets-page h1 {
text-align: center;
margin: 20px 0;
}
.description-longue {
margin-top: 40px;
color: var(--primary-text-color);
}
.description-longue h2 {
font-size: 26px;
font-weight: 700;
}
.description-longue h2,
.description-longue h3,
.description-longue h4 {
margin: 10px 0;
}
.description-longue p {
margin-bottom: 20px;
line-height: 30px;
font-size: 18px;
}
.description-longue ul {
line-height: 25px;
}
.description-longue ul li {
font-size: 17px;
}
.description-longue table {
margin: 30px 0;
}
.marker {
color: var(--primary-color);
font-weight: 700;
}   @media screen and (max-width: 1024px) {
section h2 {
text-align: center;
}
section.projet-detail {
margin: 0 auto;
padding: 0;
}
.container .icons-nav {
display: none;
}
.projets-container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.projet-link {
width: 100%;
}
.hero {
flex-direction: column;
}
.contact-container {
flex-direction: column;
}
.cord-contact {
order: 0;
width: 100%;
margin: 20px 0;
}
.formulaire-contact {
order: 1;
width: 100%;
}
}