@font-face {
  font-family: "ProximaNova";
  src: url("../fonts/ProximaNova-Regular.woff2") format("woff2"),
       url("../fonts/ProximaNova-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ProximaNova";
  src: url("../fonts/ProximaNova-Bold.woff2") format("woff2"),
       url("../fonts/ProximaNova-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ===== ABOUT TEXT — Proxima Regular (force) ===== */
.about,
.about p,
.about-lead,
.about-text,
.about-list,
.about-list li {
  font-family: "ProximaNova", sans-serif !important;
  font-weight: 400 !important;
}

/* Titres restent en Bold + rouge */
.about-section-title {
  font-family: "ProximaNova", sans-serif !important;
  font-weight: 700 !important;
  color: #ed312e !important;
}


/*--------------
All Contents
--------------*/

/*-----------------
1. Reset.css
2. Helper Classes
3. Hamburger and Menu Styling
4. Homepage sections styling
5. About Page Styling
6. Portfolio Page
7. Projecr Single Page Styling
8. Contact Page Stylins
9. All Media Queries
------------------*/


/*----- 1. Reset.css -----*/

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* --- Common Styles ---*/

h1 {
	font-family: Montserrat;
  font-size: 16px;
}

/*----- Helper Classes -----*/

html * {
	text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
   margin:0;
   padding:0;
   height:100%;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Poppins;
	color: #FFFFFF;
}


*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

::-webkit-scrollbar {
	display: none;
}


::-moz-selection {
    color: #1106CC;
    background: #FFFFFF;
}

::selection {
    color: #1106CC;
    background: #FFFFFF;
}

.nopadding {
	padding: 0;
}

.custompadding {
	padding-left: 5px;
	padding-right: 5px;
}

.custom-padding {
	padding-left: 10px;
	padding-right: 10px;
}


#loading {
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   position: fixed;
   opacity: 1;
   background-color: #F9F9F9;
   z-index: 999;
   text-align: center;
}

.spacer {
	width: 100%;
	height: 50px;
}

.spacer-big {
	width: 100%;
	height: 100px;
}



/* -----Body Border -----*/

#top, #bottom, #left, #right {
	background: #000000;
	position: fixed;
  z-index: 111;
	}
#left, #right {
		top: 0; bottom: 0;
		width: 10px;
		}
#left { left: 0; }
#right { right: 0; }

#top {
		left: 0; right: 0;
		height: 10px;
	}
#bottom {
		left: 0; right: 0;
		height: 10px;
	}

#top { top: 0; }
#bottom { bottom: 0; }

/* ------ Body Border End ------*/


.logo {
	position: absolute;
	top: 25px;
	left: 65px;
	font-family: 'Poppins';
	font-size: 16px;
	line-height: 1;
	z-index: 11;
	white-space: nowrap;
	color: #222222;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.back-btn {
	top: 10px;
	font-size: 21px !important;
}

.text {
	top: 13px;
	font-size: 21px;
}

.logo:hover, .logo:focus {
	text-decoration: none;
	color: #333333;
}


/* -----------------------------------------------------
------------- 3. Home Page CSS Starts Here -------------
-------------------------------------------------------*/

.main {
	width: 100%;
	height: 100%;
	background: #111;
}

.nav-link {
	position: absolute;
	right: 25px;
	bottom: 25px;
	font-family: 'Playfair Display';
	font-size: 18px;
	color: #FFFFFF;
}

.nav-link:hover {
	text-decoration: none;
	color: #C5283D;
}

.nav-link:after {
	content: "";
	display: block;
	height: 1px;
	width: 30px;
	background: #FFFFFF;
}

.nav-link:hover:after {
	background: #C5283D;
}

/* --------------------------------------------------
------ Homepage Split Layout Styling Starts ---------
---------------------------------------------------*/


.left-section {
    background: url(../images/bb.jpg) no-repeat center center;
		background-size: cover;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
    width: 40%;
		height: 100%;
		overflow: hidden;
    z-index: 1;
}

 .right-section {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
		width: 60%;
		height: 100%;
    background-size: cover;
    background: #F9F9F9;
    z-index: 99;
    overflow: hidden;
    overflow-y: auto;
		box-shadow: 0 0px 30px #444444;
}

.intro-personal {
	padding: 200px 0 0 10px;
	max-width: 600px;
}

.intro-personal .intro-text h1 {
	font-family: 'Playfair Display';
	font-size: 38px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.2;
	color: #333;
}

.intro-personal .intro-text span {
	color: #C5283D;
	font-weight: 500;
}

.btn-contact {
	font-family: 'Poppins';
	font-size: 16px;
	font-weight: 500;
	color: #FFFFFF;
	display: inline-block;
	letter-spacing: 1px;
	background: #C5283D;
	border: 2px solid;
	border-radius: 50px;
	border-color: #C5283D;
	padding: 8px 14px;
	margin-top: 40px;
	margin-bottom: 40px;
	-webkit-transform: 0.5s;
	-moz-transform: 0.5s;
	transition: 0.5s;
}

.btn-contact:hover, .btn-contact:focus {
	color: #C5283D;
	background: transparent;
	border-color: #C5283D;
	text-decoration: none;
}



/*-----------------------------------------------------
------------- About Page Styling Starts ---------------
-----------------------------------------------------*/


.about {
	padding: 150px 50px 50px 50px;
}

.about .about-inner h1 {
	font-family: 'Playfair Display';
	font-size: 54px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -1px;
	color: #C5283D;
}

.about .about-inner h3 {
	font-family: 'Playfair Display';
	font-size: 26px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	color: #565656;
	margin-bottom: 30px;
}

.about .about-inner p {
	font-family: 'Poppins';
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1.7;
	margin-top: 20px;
	color: #333;
}

.about .about-inner a {
	color: #C5283D;
}

.about .about-inner a:hover {
	color: #C5283D;
	text-decoration: none;
}

/*-----------------------------------------------------
-------------- About Page Styling Ends ----------------
-----------------------------------------------------*/



/*-----------------------------------------------------
--------- Portfolio Page Styling Starts ---------------
-----------------------------------------------------*/

.portfolio-split {
	padding-top: 100px;
}

.portfolio-split .portfolio-intro {
	padding: 50px;
}

.portfolio-split .portfolio-intro h1 {
	font-family: 'Playfair Display';
	font-size: 42px;
	font-weight: 700;
	color: #C5283D;
	letter-spacing: -1px;
	padding: 2px 4px;
}

.portfolio-split .portfolio-intro p {
	font-family: Poppins;
	font-size: 18px;
	line-height: 1.4;
	margin: 40px 0 0 0;
	color: #666666;
}


.origin-portfolio {
	padding-left: 35px;
	padding-right: 35px;
}

.origin-portfolio nav {
  padding-bottom: 30px;
  text-align: left;
}

.origin-portfolio .categories ul li {
 	display: inline;
	list-style: none;
}

.origin-portfolio .categories ul li a {
   display: inline;
   font-family: 'Playfair Display';
   font-weight: 400;
   font-size: 18px;
   line-height: 2.5;
   text-decoration: none;
   color: #C5283D;
   margin-left: 20px;
}

.origin-portfolio .categories ul li a.active {
   text-decoration: line-through;
   color: #C5283D;
}

.origin-portfolio_filter {
   padding-left: 0;
}

.origin-portfolio_item {
   overflow: hidden;
   margin-bottom: 10px;
   display: block;
}

.origin-portfolio-overlay {
 background: rgba(0, 0, 0, 0.90);
 position:absolute;
 top: 0;
 left: 5px;
 height: calc(100% - 10px);
 width: calc(100% - 10px);
 opacity: 0;
 -webkit-transition: 0.5s;
 -moz-transition: 0.5s;
 -o-transition: 0.5s;
   transition: 0.5s;
}

.origin-overlay-items {
 height: 300px;
 position: absolute;
 top: 45%;
 left: 0;
 right: 0;
}


.origin-overlay-items p {
 margin-top: 1em;
 opacity: 0;
 font-size: 12px;
 font-family: Poppins;
 letter-spacing: 2px;
 color: #111111;
 padding: 5px 5px;
 background: #FFFFFF;
 display: inline-block;
 -webkit-transform: translateY(20px);
 -moz-transform: translateY(20px);
 transform: translateY(20px);
 -webkit-transition: 0.3s;
 -moz-transition: 0.3s;
 transition: 0.3s;
 -webkit-transition-delay: 0.3s;
 -moz-transition-delay: 0.3s;
 transition-delay: 0.2s;
}

.origin-portfolio_item:focus, .origin-portfolio_item:hover {
    text-decoration: none;
}

.origin-portfolio_item:hover .origin-portfolio-overlay {
 transform: scale(1);
 opacity: 1;
}

.origin-portfolio_item:hover h5, .origin-portfolio_item:hover p {
 opacity: 1
}

.origin-portfolio_item:hover p {
  opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	transform: translateY(0);
  text-decoration: none;
}


/*-----------------------------------------------------
----------- Portfolio Page Styling Ends ---------------
-----------------------------------------------------*/


/*--------------------------------------------------------
----------- Project Single Styling Starts ---------------
--------------------------------------------------------*/

.project-single {
	padding: 150px 50px 0 50px;
}

.project-single .project-intro h1 {
	font-family: 'Playfair Display';
	font-size: 42px;
	font-weight: 700;
	color: #C5283D;
	letter-spacing: -1px;
	padding: 2px 4px;
}

.project-single .project-intro p {
	font-family: 'Playfair Display';
	font-size: 20px;
	line-height: 1.4;
	margin: 40px 0 0 0;
	color: #666666;
}

.project-img {
	padding: 50px 0 50px 0;
}

.project-details p {
	font-family: 'Playfair Display';
	font-size: 18px;
	line-height: 1.5;
	color: #222222;
	letter-spacing: 0;
	padding: 20px 0 0 0;
}


.project-nav {
	padding: 50px 0 50px 0;
	overflow: hidden;
	visibility: visible;
}

.project-main i {
	font-size: 34px;
	font-weight: 400;
	color: #666666;
}

.project-nav .nav-icon {
	display: inline;
	font-size: 32px;
	color: #666666;
	float: left;
}

.project-nav .nav-icon.right {
	display: inline;
	float: right;
}

.project-nav .inner-nav {
	display: inline;
}

.project-nav .inner-nav a {
	display: block;
	font-family: Poppins;
	font-size: 16px;
	font-weight: 600;
	color: #666666;
	margin: 8px 0 0 20px;
	text-decoration: none;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}

.project-nav .right {
	text-align: right;
}

.project-nav .right a {
	display: block;
	font-family: Poppins;
	font-size: 16px;
	font-weight: 600;
	color: #666666;
	text-decoration: none;
	margin: 8px 20px 0 0;
}

.project-nav .inner-nav:hover a {
	margin-left: 30px;
}

.project-nav .right:hover a {
	margin-right: 30px;
}

/*-----------------------------------------------------
----------- Project Single Styling Ends ---------------
-----------------------------------------------------*/



/*-----------------------------------------------------------
--------------- Contact Page Styling Starts -----------------
-------------------------------------------------------------*/

.contact {
	padding: 150px 50px 100px 50px;
}

.contact h1 {
	font-family: 'Playfair Display';
	font-size: 42px;
	font-weight: 700;
	color: #C5283D;
	letter-spacing: -1px;
}

.contact p {
	font-family: Poppins;
	font-size: 18px;
	line-height: 1.4;
	margin: 40px 0 0 0;
	color: #666666;
}

.contact-form {
	padding-top: 75px;
}

label {
	display: block;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 500;
  color: #333333;
	text-align: left;
}

.form-control {
  border: 0px;
  border-radius: 0px;
  margin-top: 10px;
  background: transparent;
  margin-bottom: 40px;
  border-bottom: 1px solid #999999;
  -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,0);
  box-shadow: inset 0 0px 0px rgba(0,0,0,0);
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
    transition: 0.5s;
}

.form-control:focus {
  border-color: #FF0000;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.form-control::-webkit-input-placeholder {
  font-family: Poppins;
  font-size: 12px;
  color: #999999;
}
.form-control:-moz-placeholder {
  font-family: Poppins;
  font-size: 12px;
  color: #999999;
}
.form-control::-moz-placeholder {
  font-family: Poppins;
  font-size: 12px;
  color: #999999;
}
.form-control:-ms-input-placeholder {
  font-family: Poppins;
  font-size: 12px;
  color: #999999;
}

.text-muted {
  font-family: Poppins;
  font-size: 12px;
  color: #222;
}

.text-muted strong {
  color: #FF3333;
}

.btn-send {
  font-family: Poppins;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  border-radius: 0px;
  color: #FFFFFF;
  background: #FF0000;
	border-color: #FF0000;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
    transition: 0.5s;
}

.btn-send:hover {
  color: #FF0000;
  background: transparent;
	border-color: #FF0000;
  outline: none !important;
}

.btn-send:focus {
  color: #FFFFFF;
  background: #FF0000;
	border-color: #FF0000;
  outline: none !important;
}

/* -------- Contact Section Styling Ends ---- */



/* ----------------------------------------------------
----------- Footer Styling Starts Here ----------------
-----------------------------------------------------*/

.footer-personal {
	margin: 50px 0 50px 20px;
}

.lesspadding {
	padding-top: 0;
	padding-bottom: 30px;
}

.footer-personal ul {
	list-style: none;
}

.footer-personal li {
	display: inline;
}

.footer-personal a {
	display: inline;
	font-family: 'Playfair Display';
	text-transform: capitalize;
	font-size: 18px;
	font-weight: 500;
	padding-right: 20px;
	letter-spacing: 1px;
	color: #C5283D;
	text-decoration: none;
}

.footer-personal a:hover, .footer-personal a:focus {
  color: #C5283D;
  text-decoration: line-through;
}

.footer-credits {
	font-family: Poppins;
	font-size: 12px;
	margin-top: 20px;
}

.footer-credits span {
	color: #C5283D;
}


/*----------------------------------------------------
------------- All ------------------------------------
--------------------- Media --------------------------
------------------------------- Queries --------------
-----------------------------------------------------*/

 @media only screen and (min-width: 767px) {

	#left, #right {
			width: 25px;
			}
	#top {
			height: 25px;
		}
	#bottom {
			height: 25px;
		}

		.intro-personal {
			padding: 220px 0 0 50px;
		}

		.footer-personal {
			margin: 50px 0 20px 50px;
		}

	}

		@media only screen and (max-width : 801px) {

			.logo {
				top: 50px;
				left: 25px;
			}

	     .right-section {
	        position: relative;
	        width: 100%;
	    }

	     .left-section {
	        position: relative;
	        width: 100%;
					left: 0;
	        min-height: 100vh;
	    }

			.intro-personal {
				padding: 200px 0 0 20px;
			}


			.about {
				padding: 150px 20px 50px 20px;
			}

			.project-single {
				padding: 150px 20px 0 20px;
			}


			.origin-portfolio {
				padding-left: 15px;
				padding-right: 15px;
			}

			.contact {
				padding: 150px 20px 100px 20px;
			}

		}

		@media only screen and (min-width: 802px) and (max-width : 1024px) {

			.logo {
				left: 30px;
			}

			.intro-personal {
				padding: 200px 20px 0 20px;
			}

		}

	 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

	   .right-section {
	      -webkit-overflow-scrolling: touch;
	  }
	}

	 @media only screen and (min-device-width : 320px) and (max-device-width : 736px) {

	   .split-home .right-section,  .split-home .left-section{
	      -webkit-overflow-scrolling: touch;
	  }
	}

		@media only screen and (min-device-width : 320px) and (max-device-width : 736px) and (orientation: landscape) {
	   .right-section {
	      -webkit-overflow-scrolling: touch;
	  }
	}

		@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
	     .left-section {
	       min-height: 100vh;
	    }
	  }

		@media only screen and (max-width: 420px) {

		.intro-personal {
			padding: 200px 0 0 10px;
		}

		.intro-personal .intro-text h1 {
			font-size: 34px;
			font-weight: 400;
			line-height: 1.1;
		}

	}
/* FORCE BLACK BACKGROUND ON INDEX */
html, body {
  background-color: #000000 !important;
}
#top, #bottom, #left, #right {
  background-color: #000000 !important;
}
/* FORCE BLACK ON CONTENT AREA (LEFT) */
.intro-personal,
.intro-personal * {
  background-color: transparent;
}

.intro-personal {
  background-color: #000000 !important;
}
/* FORCE BLACK ON ALL MAIN WRAPPERS */
html, body {
  background: #000 !important;
}

.right-section,
.wrapper,
.main,
.main-wrapper,
.content,
.content-wrapper,
.section,
.container,
.container-fluid {
  background: #000 !important;
}
html, body { background:#000 !important; }

.right-section,
.intro-personal,
.container,
.container-fluid { background:#000 !important; }

/* DON'T TOUCH .left-section */
/* REMOVE SHADOW / GRADIENT BETWEEN SECTIONS */
.left-section,
.right-section {
  box-shadow: none !important;
}

.left-section::before,
.left-section::after,
.right-section::before,
.right-section::after {
  content: none !important;
  background: none !important;
}
/* PROXIMA NOVA BOLD */
@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/ProximaNova-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
/* HERO TEXT FONT */
.intro-personal .intro-text h1 {
  font-family: 'Proxima Nova', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* FORCE ALL TEXT TO WHITE */
body,
h1, h2, h3, h4, h5, h6,
p,
a,
span,
li {
  color: #ffffff !important;
}
/* ODD BRAND RED */
.intro-personal .intro-text h1 span {
  color: #ed312e !important;
}
/* LOGO ODD HORIZONTAL */
.site-logo {
  height: 32px;          /* ajuste : 28 / 30 / 34 si tu veux */
  width: auto;
  object-fit: contain;
  border-radius: 0 !important;
}
/* CTA BUTTON – SOON */
.btn-contact {
  background-color: #ed312e !important;
  color: #ffffff !important;
  font-family: 'Proxima Nova', sans-serif;
  font-weight: 700;
  border: none !important;
  border-radius: 40px;          /* garde le côté premium */
  padding: 14px 36px;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* REMOVE OLD OUTLINE STYLE (if any) */
.btn-contact:hover,
.btn-contact:focus {
  background-color: #c62825 !important; /* rouge un peu plus dark */
  color: #ffffff !important;
}
/* NAV / FOOTER LINKS – ODD BRAND */
nav a,
.footer a,
ul li a {
  font-family: 'Proxima Nova', sans-serif !important;
  font-weight: 700;
  color: #ed312e !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* NAV LINKS – DEFAULT */
nav a,
.footer a,
ul li a {
  font-family: 'Proxima Nova', sans-serif !important;
  font-weight: 700;
  color: #ed312e !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.25s ease;
}

/* NAV LINKS – HOVER */
nav a:hover,
.footer a:hover,
ul li a:hover {
  color: #ffffff !important;
}
/* SPACE BETWEEN ABOUT AND CONTACT */
nav ul li {
  margin-right: 90px;
}
/* FORCE SPACE BETWEEN ABOUT AND CONTACT */
.menu-about {
  margin-right: 30px;
}
/* ABOUT MENU – FORCE STYLE */
.menu-about {
  margin-right: 10px; /* ajuste si besoin */
  font-family: 'Proxima Nova', sans-serif !important;
  font-weight: 700 !important;
  color: #ed312e !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* ABOUT MENU – HOVER FIX */
.menu-about:hover {
  color: #ffffff !important;
}
/* SPACE BETWEEN CTA BUTTON AND MENU */
.btn-contact {
  margin-bottom: 120px;
}
/* HERO TITLE SIZE – ODD BRAND */
.intro-personal .intro-text h1 {
  font-family: 'Proxima Nova', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
/* ABOUT PAGE – SECTION TITLES */
.about-section-title {
  font-family: "Proxima Nova", "ProximaNova-Bold", sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #ed312e;
  margin: 40px 0 20px 0;
  text-transform: uppercase;
}

/* ABOUT LIST */
.about-list {
  margin: 15px 0 40px 0;
  padding-left: 0;
  list-style: none;
}

.about-list li {
  font-family: "Proxima Nova", sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: #ffffff;
  margin-bottom: 6px;
}
/* =========================
   ABOUT – PREMIUM LAYOUT
   Proxima Regular for text
   Bold Red for section titles
========================= */

/* Make sure all about text uses Regular */
.about-inner,
.about-inner p,
.about-inner li {
  font-family: "ProximaNova-Regular", "Proxima Nova", sans-serif !important;
  font-weight: 400 !important;
  color: #ffffff;
}

/* Lead paragraph */
.about-lead {
  font-size: 16px;
  line-height: 1.75;
  opacity: 0.92;
  max-width: 680px;
  margin: 0 0 28px 0;
}

/* Divider (small graphic separator) */
.about-divider {
  width: 64px;
  height: 3px;
  background: #ed312e;
  border-radius: 99px;
  margin: 18px 0 34px 0;
}

/* 2-column grid */
.about-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* Responsive: 1 column on small screens */
@media (max-width: 900px) {
  .about-columns {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Section titles: Bold + Red */
.about-section-title {
  font-family: "ProximaNova-Bold", "Proxima Nova", sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px;
  color: #ed312e !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 14px 0;
}

/* Body text under titles */
.about-text {
  font-size: 15px;
  line-height: 1.75;
  opacity: 0.90;
  margin: 0 0 16px 0;
}

/* List styling */
.about-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-list li {
  font-size: 15px;
  line-height: 1.9;
  opacity: 0.92;
  margin-bottom: 6px;
  position: relative;
  padding-left: 16px;
}

/* Custom bullet */
.about-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #ed312e;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 12px;
}

/* ========== Animation on load (smooth premium) ========== */
.reveal {
  animation: revealUp 700ms ease forwards;
  opacity: 0;
  transform: translateY(12px);
}

.reveal:nth-child(2) {
  animation-delay: 120ms;
}

@keyframes revealUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}.about-inner,
.about-inner p,
.about-inner li {
  font-family: "ProximaNova-Regular", sans-serif !important;
  font-weight: 400 !important;
}

/* ===== ABOUT TEXT – Proxima Regular ===== */

.about-inner,
.about-inner p,
.about-inner li {
  font-family: "ProximaNova-Regular", sans-serif !important;
  font-weight: 400 !important;
}
/* ===== ABOUT TITLES ===== */

.about-section-title {
  font-family: "ProximaNova-Bold", sans-serif !important;
  font-weight: 700 !important;
  color: #ed312e !important;
  letter-spacing: 0.12em;
  margin-bottom: 24px;
}
/* ===============================
   ABOUT – HERO TITLE (same as index)
================================ */

.about-hero-title{
  margin: 0 0 40px 0;
  font-family: "ProximaNova-Bold", sans-serif;
  color: #fff;
}

/* ODD in red */
.about-hero-title span{
  color: #ed312e;
}
/* =========================
   ABOUT – Hero title (same as Index)
========================= */

.about-hero-title{
  font-family: "ProximaNova-Bold", sans-serif;
  font-size: 56px;              /* même impact que l’index */
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 40px 0;
}
.about-hero-title span{
  color: #ed312e !important;
}

/* ODD en rouge */
.about-hero-title span{
  color: #ed312e;
}
.about-lead{
  font-family: "ProximaNova-Bold", sans-serif;
  font-size: 20px;          /* ← plus grand mais premium */
  line-height: 1.6;
  color: #ffffff;
  max-width: 720px;         /* optionnel mais très agence */
  margin-bottom: 48px;
}

/* ABOUT ONLY — replace the big ODD visual */
body.page-about section.left-section{
  background: url("../images/about-bg.jpg") no-repeat center center !important;
  background-size: cover !important;
}
/* ===============================
   ABOUT PAGE – RIGHT VISUAL ONLY
   =============================== */

body.page-about .left-section{
  background-image: url("../images/about-bg.jpg");
}
/* ===============================
   REMOVE PAGE LABEL ON CONTACT
   =============================== */

body.page-contact .right-section::after,
body.page-contact .right-section::before,
body.page-contact .split-home::after,
body.page-contact .split-home::before {
  content: none !important;
  display: none !important;
}
/* ===============================
   CONTACT – Minimal Agency Style
   =============================== */

.contact-form input,
.contact-form textarea{
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  border-radius: 0;
  color: #ffffff;
  padding: 14px 0;
  font-family: "ProximaNova-Regular", sans-serif;
  font-size: 15px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color: rgba(255,255,255,0.35);
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline: none;
  border-bottom-color: #ed312e;
}

/* Button clean */
.contact-form button,
.contact-form .btn{
  background: transparent;
  border: 1px solid #ed312e;
  color: #ffffff;
  padding: 14px 32px;
  font-family: "ProximaNova-Bold", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all .3s ease;
}

.contact-form button:hover,
.contact-form .btn:hover{
  background: #ed312e;
  color: #000;
}
/* CONTACT PAGE – hero title like About */
body.page-contact .about-hero-title{
  font-family: "ProximaNova-Bold", sans-serif !important;
  font-size: 56px;            /* même impact que About */
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #ffffff;
}

body.page-contact .about-hero-title span {
  color: #ed312e !important;
  font-family: "ProximaNova", sans-serif !important;
  font-weight: 700 !important;
}
/* CONTACT – reduce space before footer */
body.page-contact .footer-personal{
  margin-top: 24px;
}
/* ===============================
   CONTACT FORM – PROXIMANOVA ONLY
   =============================== */

.page-contact .contact,
.page-contact form,
.page-contact label,
.page-contact input,
.page-contact textarea,
.page-contact button,
.page-contact .form-control,
.page-contact .help-block,
.page-contact .with-errors,
.page-contact ::placeholder {
  font-family: "ProximaNova", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

/* ===== FIX FONT (ODD rouge + CONTACT) ===== */
.about-hero-title span,
footer a,
a[href*="contact"] {
  font-family: "ProximaNova", sans-serif !important;
  font-weight: 700 !important;
}
/* ===== FORCE FONT ON RED "ODD" IN H1 ===== */
.intro-text h1 span,
.intro-personal h1 span,
h1 span {
  font-family: "ProximaNova", sans-serif !important;
  font-weight: 700 !important;
}
/* ===== FINAL FIX – HERO TITLE FONT (ALL BROWSERS) ===== */
.intro-text h1 {
  font-family: "ProximaNova", sans-serif !important;
  font-weight: 700 !important;
}

.intro-text h1 span {
  font-family: "ProximaNova", sans-serif !important;
  font-weight: 700 !important;
}