/*
Theme Name: GIF3D
Author: Hostinger
Author URI: http://www.gif3d.fr/tutorials
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
*{margin:0;padding:0;list-style-type:none;text-decoration:none;font-family:sans-serif;font-weight:300;}
a{color:inherit;}
header{
	position:fixed;
	z-index:2;
	top:0;
	left:0;
	width:100%;
	border-bottom:1px solid rgba(186,191,194,.5);
	background:linear-gradient(90deg, rgb(80,0,187) 0%, rgb(23,105,228) 100%);
    background-position:left top;
    background-size:auto;
    background-repeat:no-repeat;
}
header h1{
	display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    max-width:1100px;
    margin:0 auto;
    padding:0 3%;
    height:80px;
    color:#fff;
}
header .setMenu{
	display:flex;
}
.menu-top-menu-container{
	position:relative;
}
header #menuBtn{
	position:relative;
	display:none;
	width:40px;
	height:40px;
	cursor:pointer;
	/*border:1px solid #cfd9e1;*/
	margin-left:1rem;
	user-select:none;
}
header #menuBtn > li{
	border-radius:2px;
}
header #menuBtn > li#menurow1{
	position:absolute;
	display:inline-block;
	width:30px;
	height:3px;
	top:9px;
	left:4px;
	background:#fff;
	transform:rotate(0);
}
header #menuBtn > li#menurow1.open{
	top:17px;width:30px;transform:rotate(45deg);
}
header #menuBtn > li#menurow2{
	position:absolute;
	display:inline-block;
	width:30px;
	height:3px;
	top:17px;
	left:4px;
	background:#fff;
	transform:rotate(0);
}
header #menuBtn > li#menurow2.open{
	top:17px;left:12px;width:0;transform:rotate(0);
}
header #menuBtn > li#menurow3{
	position:absolute;
	display:inline-block;
	width:30px;
	height:3px;
	top:25px;
	left:4px;
	background:#fff;
	transform:rotate(0);
}
header #menuBtn > li#menurow3.open{
	top:17px;width:30px;transform:rotate(-45deg);
}
header .logo{
	display:flex;
	width:120px;
    height:50px;
    font-size:0;
	font-family:"Mitr", serif;
    font-weight:300;
    background:url("https://gif3d.fr/wp-content/uploads/2024/12/GiF3D-logo_white.png");
    background-position:center;
    background-size:100%;
    background-repeat:no-repeat;
}
header .menu{
	display:flex;
	flex-direction:row;
	font-size:1.2rem;
}
header .menu > li:first-child{
	margin-right:1rem;
}
header .menu a{
	display:inline-block;
	height:36px;
	line-height:36px;
	font-weight:400;
	border-bottom:2px solid rgba(0,0,0,0);
}
.current_page_item a{
	border-bottom:2px solid #5cff30 !important;
}
.limitsection{
	max-width:1100px;
    margin:0 auto;
    padding:3rem 3% 0 3%;
}
.pagetitle{
	display:flex;
	flex-direction:row;
	align-items:center;
    justify-content:center;
	height:300px;
}
.pagetitle > div{
	max-width:1100px;
    margin:2rem auto 0 auto;
    z-index:1;
    padding:1rem 1.5rem;
	font-family:'Mitr';
	font-weight: 100;
    text-transform:uppercase;
	font-size:2.2rem;
	background: rgba(255,255,255,.85);
}
.subtitlecontent{
	font-family:"Noto Sans", serif;
	font-size:1.1rem;
	line-height:1.8rem;
	font-weight:400;
	color:#45494d;
}
h3{
	font-family:'Blinker';
	font-size:1.8rem;
	color:#45494d;
	margin-bottom:1rem;
	line-height:2.4rem;
}
.intropage h3{
    font-family:'Blinker';
	text-transform:inherit;
    font-weight:300;
}
h4{
	font-size:1.6rem;
	margin-bottom:1rem;
	line-height:2rem;
}
.parag{
	font-family:"Noto Sans", serif;
	font-size:1.1rem;
    line-height:1.6rem;
    font-weight:400;
    color:#45494d;
}
.cta-page{
	font-family:"Noto Sans", serif;
	width:fit-content;
	color:#fff;
	height:50px;
	line-height:50px;
	font-weight:400;
    padding:0 1rem;
    border-radius:10px;
    background:rgb(80,0,187);
}
footer *{
	font-family:"Noto Sans", serif;
	font-weight:400;
}
footer div{
	display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    max-width:1100px;
    margin:0 auto;
    padding:0 3%;
    height:140px;
    font-weight:400;
    color:#45494d;
}
footer .copyright{
	font-family:sans-serif;
}

/****** Index CSS ******/

.landingpage{
	display:flex;
	flex-direction:row;
	align-items:center;
    justify-content:left;
	height:550px;
	background:url("https://gif3d.fr/wp-content/uploads/2025/01/GiF3D-Accueil.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}
.landingpage > div.limitsection{
    justify-content:left;
	text-align:left;
	width:100%;
}
.landingpage > div.limitsection > span{
	display:inline-block;
	width:500px;
	background:rgba(21,55,108,.8);
}
.landingpage h2{
	font-family:'Blinker';
	font-size:3rem;
	padding:0 .5rem;
	text-transform:uppercase;
	font-weight:200;
	color:#fff;
}
.landingpage .parag{
	margin:1rem 0;
	color:#fff;
	padding:0 .5rem;
}
.introsection{
	display:flex;
	flex-direction:row;
}
.titlecontent{
	font-family:'Mitr';
	font-weight:100;
	text-transform:uppercase;
}
.introsection > li{
	width:50%;
}
.introsection h3{
	font-weight:400;
}
.introsection > li:first-child{
	display:flex;
    flex-direction:column;
    align-items:start;
    justify-content:center;
    padding-right:1rem;
}
.introsection > li:last-child{
	border-radius:20px;
	background:#f0f8ff;
	font-size:1.2rem;
	/*background:url("https://gif3d.fr/wp-content/uploads/2025/01/GiF3D-Openspace.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;*/
    background: linear-gradient(90deg, rgb(80,0,187) 0%, rgb(23,105,228) 100%);
}
.introsection > li:last-child > ol{
	padding:2rem 1.5rem;
	font-size:1.1rem;
}
.introsection > li:last-child > ol > li{
	margin-bottom:1rem;
	color:#fff;
	line-height:1.6rem;
}
.introsection > li:last-child > ol > li:last-child{
	margin-bottom:0;
}
.skills{
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	gap:3rem 2%;
	margin-top:3rem;
}
.skills li{
	display:flex;
	flex-direction:column;
	width:calc(98%/2);
}
.skills li:nth-child(1) .skillvisual{
	background:url("https://gif3d.fr/wp-content/uploads/2025/01/GiF3D-Coach.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}
.skills li:nth-child(2) .skillvisual{
	background:url("https://gif3d.fr/wp-content/uploads/2025/01/GiF3D-System.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}
.skills li div.skillvisual{
	height:300px;
	background:#f6f7f9;
	border-radius:20px 20px 0 0;
}
.skills li div.skillinfo{
	color:#fff;
	padding:1rem 1.5rem 1.5rem 1.5rem;
	background:rgb(80,0,187);
	border-radius:0 0 20px 20px;
}
.skills li div.skillinfo h4{
	font-family:'Blinker';
	padding-bottom:1rem;
	border-bottom:1px solid #fff;
}
.skills li div.skillinfo .parag{
	color:#fff;
	font-weight:300;
}
.contactsection{
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	align-items:center;
	gap:3rem 2%;
	margin-top:1rem;
}
.contactsection li{
	display:flex;
	flex-direction:column;
	width:calc(98%/2);
}
.contactsection li:first-child{
	background:#f6f7f9;
	height:300px;
	border-radius:20px;
	background:url("https://gif3d.fr/wp-content/uploads/2025/01/GiF3D-Contact.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}
.contactsection h3{
	font-family:"Blinker";
	text-transform:inherit;
	font-weight:300;
}
.contactsection .cta-page{
	margin-top:1rem;
}

/****** Contact CSS ******/

#sectionContact{
	min-height:500px;
}
.contact{
	max-width:700px;
    margin:0 auto;
    padding:3rem 3%;
}
.contact ul{
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	gap:1rem 4%;
	width:100%;
}
.contact ul > li{
	position:relative;
	display:flex;
	flex-direction:column;	
	width:calc(96%/2);
}
.contact ul > li:nth-child(1){
	width:100%;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:start;
}
.contact ul > li:nth-child(1) > span{
	height:40px;
    line-height:40px;
}
input[type="radio"] + label .gif3d-checkbox {
    position:relative;
    display:inline-block;
    width:16px;
    height:16px;
    margin-right:.5rem;
    border:1px solid #343434;
    border-radius:50%;
    vertical-align:middle;
}
input[type="radio"] + label .gif3d-checkbox > span {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    display:inline-block;
    background:rgb(80,0,187);
    width:0;
    height:0;
    border-radius:50%;
}
input[type="radio"]:checked + label .gif3d-checkbox > span {
    width:8px;
    height:8px;
}
.contact ul > li:nth-child(1) label{
	margin:0 1rem 0 0;
	cursor:pointer;
}
.contact ul > li:nth-child(1) input{
	display:none;
}
.genderBtn{
	width:20px;
    height:20px;
}
.contact ul > li:nth-child(8){
	width:100%;
}
.contact ul > li:nth-child(9){
	flex-direction:row;
    align-items:center;
}
.contact ul > li #mailcopy{
	display:inline-block;
	width:20px;
	height:20px;
	margin-right:.5rem;
	border:1px solid #cfd9e1;
}
.contact ul > li label.prefixphone{
	position:absolute;
	display:inline-block;
	left:0;
	bottom:1px;
	width:40px;
	height:40px;
	text-align:center;
	line-height:40px;
	font-size:1rem;
	font-family:"Noto Sans", serif;
	font-weight:400;
	border-right:1px solid #cfd9e1;

}.contact ul > li label{
	font-family: "Blinker";
	width:fit-content;
	height:30px;
	line-height:30px;
	text-transform:uppercase;
}
.contact ul > li input{
	height:40px;
	line-height:40px;
	font-size:1rem;
	font-family:"Noto Sans", serif;
	font-weight:400;
	padding:0 .5rem;
	border-radius:10px;
	border:1px solid #cfd9e1;
}
.contact ul > li input#phone{
	padding-left:50px;
}
.contact ul > li textarea{
	min-height:250px;
	line-height:1.8rem;
	font-size:1rem;
	font-family:"Noto Sans", serif;
	font-weight:400;
	padding:1rem .5rem 0 .5rem;
	resize:vertical;
	border-radius:10px;
	border:1px solid #cfd9e1;
}
.contact ul > li .sendmail{
	border-radius:10px;
	text-align:center;
	font-family:"Noto Sans", serif;
    color:#fff;
    height:50px;
    line-height:50px;
    font-weight:400;
    padding:0 1rem;
    cursor:pointer;
    border-radius:10px;
    background:rgb(80,0,187);
}
.contact ul > li .errorfield{
	display:none;
	height:40px;
    line-height:40px;
    color:red;
}
#sucessmail{
	display:none;
    margin-top:5rem;
	text-align:center;
}

/****** Services CSS ******/

.serviceslist{
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
    justify-content:space-between;
	gap:2rem 2%;
}
.serviceslist article{
	width:calc(96%/2);
	border-radius:10px;
	border:1px solid #cfd9e1;
	overflow:hidden;
}
.serviceslist article:nth-child(4){
	
}
.serviceslist article > div{
	display:flex;
    flex-direction:column;
    justify-content:end;
	padding:1.5rem;
}
.serviceslist article:nth-child(1) > div:first-child{
	background:url("https://gif3d.fr/wp-content/uploads/2025/01/GiF3D-Website.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}
.serviceslist article:nth-child(2) > div:first-child{
	background:url("https://gif3d.fr/wp-content/uploads/2025/01/GiF3D-Publicity.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}
.serviceslist article:nth-child(3) > div:first-child{
	background:url("https://gif3d.fr/wp-content/uploads/2025/01/GiF3D-Referencing.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}
.serviceslist article > div a{
	width:fit-content;
}
.serviceslist article > div a img{
	margin-top:1rem;
	width:340px;
}
.servicesVisual{
	height:200px;
	background:#f6f6f6;
}
.prodheader{
	display:flex;
	flex-direction:column;
}
.prodheader .prodcategory{
	text-transform:uppercase;
	margin-bottom:.5rem;
}
.prodheader h3{
	margin:0;
}
.prodprice{
	height:50px;
    line-height:50px !important;
    font-size:1.2rem;
    font-family: "Noto Sans", serif;
    line-height: 1.8rem;
    font-weight: 400;
    color: #45494d;
}

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

/****** Header ******/
.menu-top-menu-container{
	position:absolute;
	width:100%;
    height:0vh;
	top:80px;
	left:0;
	overflow:hidden;
    background:#fff;
    color:#000;
    transition:height .2s;
}
.menu-top-menu-container-open{
	height:100vh;
}
header .menu{
	flex-direction:column;
	max-width:1100px;
    margin:0 auto;
}
header .menu a{
	height:48px;
	line-height:48px;
}
header .menu li{
	height:50px;
	line-height:50px;
	padding:0 3%;
	border-bottom:1px solid #cfd9e1;
}
header .menu > li:first-child {
    margin-right:0;
}
header #menuBtn{
	display:inline-block;
}
/****** Index CSS ******/
	.introsection{
		flex-direction:column;
	}
	.introsection > li{
		width:100%;
	}
	.introsection > li:first-child{
		padding-right:0;
	}
	.introsection > li:last-child{
		margin-top:2rem;
	}
	.contactsection li{
		width:100%;
	}
	.skills li{
		width:100%;
	}
	/****** Services CSS ******/
	.serviceslist article{
		width:100%;
	}
	.serviceslist article > div a img{
		width:100%;
	}
}
@media screen and (max-width:600px){

/****** Index CSS ******/
	.landingpage{
		justify-content:center;
	}
	.landingpage > div.limitsection{
		justify-content:center;
	}
	.landingpage > div.limitsection > span{
		width:100%;
		text-align:center;
	}
	
/****** Contact CSS ******/
	.contact ul > li{
		width:100%;
	}
	.contact ul > li:nth-child(1){
		flex-direction:column;
	}
	.contact ul > li:nth-child(1) > span{
		width:100%;
	}
/****** Services CSS ******/
	
}