/*
Theme Name: Asgard
Theme URI: https://grinto.fr
Author: Grinto
Author URI: https://grinto.fr
Description: This is a basic custom theme
Version: 1.0
*/

@font-face {
  font-family: Rekind;
  src: url(/wp-content/themes/grinto-asgard/assets/fonts/RekindExpanded-Regular.otf);
}

:root {
	--dark-blue: #e0100c;
	--white: #FCFCFC;
	--gold: #dc7206;
	--container-padding: 0 12rem;
}

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x:hidden;
	width: 100vw;
}

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0 !important;
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	background-color: var(--white);
	font-family: 'Montserrat';
	color: var(--dark-blue);
}

h1 {font-weight: bold; font-size: 40px; line-height: 120%; font-family: "degular", sans-serif; font-weight: 700; font-style: normal;}
h2 {font-weight: bold; font-family: "degular", sans-serif; font-weight: 700; font-style: normal;}
h3 {font-weight: bold; font-family: "degular", sans-serif; font-weight: 700; font-style: normal;}
h4 {font-weight: bold; font-family: "degular", sans-serif; font-weight: 700; font-style: normal;}
h5 {font-size: 20px; line-height: 120%; font-weight: bold;}
.text-gold { color: var(--gold); }
.flex-center {display: flex; justify-content: center; flex-direction: row;}
.flex {display: flex; flex-direction: row;}
.vertical-center {display: flex; flex-direction: column; justify-content: center;}
.btn {border-radius: 6px; font-size: 16px; text-decoration: none; padding: 12px 14px; display: flex; font-family: "Montserrat", sans-serif; font-weight: 600; font-style: normal; letter-spacing: 4px;}
.btn-gold {background-color: var(--dark-blue); color: var(--white)}
.btn-white {background-color: var(--white); color: var(--dark-blue)}
.btn-outline {background-color: transparent; color: var(--dark-blue); border: solid 1px var(--dark-blue)}

.tag {background-color: rgba(243, 189, 41, 0.3); color: var(--gold); border-radius: 8px; padding: 6px 20px; text-transform: uppercase; font-size: 1.2rem; letter-spacing: 2px}

/* HEADER */
.site-header {background-color: transparent; display: flex; position: fixed; width: 100%; top: 0; left: 0; padding: var(--container-padding); padding-top: 1.5rem; padding-bottom: 1.5rem; }
.site-branding {display: flex; flex-direction: column; justify-content: center;}
.site-branding img {height: 90px; width: auto;}
.main-navigation {display: flex;flex-direction: row;justify-content: flex-end; flex: 1; text-align: center; align-items: center}
.main-navigation a {font-family: "Montserrat", sans-serif; color: var(--white); text-transform: uppercase; font-size: 1rem}
.main-navigation a:hover {color: var(--pink);}

.main-navigation .menu-main-menu-container-mobile a { color: var(--white) !important; }
.main-navigation .menu-main-menu-container-mobile a:hover { color: var(--dark) !important; }

.main-navigation li {list-style-type: none; display: inline;}
.main-navigation ul li {margin: 0 20px;}
.main-navigation ul li a {text-decoration: none; font-weight: bolde;}
.main-navigation .menu-main-menu-container {height: 100%; width: 100%; border-top: #DADBE4 solid 1px;display: flex; justify-content: center; align-items: center;}
.menu {margin-bottom: 0 !important;}
.header-actions {color: var(--dark); display: flex; justify-content: center; align-items: center; height: 100%; border-top: #DADBE4 solid 1px;}

#burger-menu { display: none; flex-direction: column; cursor: pointer;}
#burger-menu .line { width: 30px; height: 3px; background-color: black; margin: 5px;}
.main-navigation .close-burger {display: none;color:var(--white);cursor:pointer;}
.scrolled {background: linear-gradient(90deg, rgba(224, 16, 12, 1) 0%, rgba(220, 114, 6, 1) 100%);}
/* END HEADER */

/* HERO */
.hero {height: 100vh; position: relative; overflow: hidden; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; background: linear-gradient(90deg, rgba(224, 16, 12, 1) 0%, rgba(220, 114, 6, 1) 100%); color: white}
.hero .background {height: 100%; width: 100%; top: 0; left: 0; position: absolute; overflow: hidden; display: flex; flex-direction: column; flex-wrap: wrap; background-position: center; background-repeat: no-repeat; background-size: cover; opacity: 0.2}
.hero .background::after {background: linear-gradient(2deg,rgba(1, 14, 38, 1) 0%, rgba(1, 14, 38, 0) 100%); content: ''; height: 100%; width: 100%}
.hero .content { text-align: center; z-index: 10;padding-top: 100px }
.hero .content h1 { font-family: 'Rekind'; letter-spacing: 9px }
.hero .content p { text-transform: uppercase; font-family: 'Montserrat'; font-weight: 400; font-size: 1.4rem; margin: 40px 10rem; opacity: 0.5}
/* END HERO */

/* A PROPOS */
.a-propos { margin-top: 5rem; padding: var(--container-padding) }
.a-propos .content { text-align: center; margin-top: 3rem; }
.a-propos .content h1 { font-family: 'Rekind'; letter-spacing: 9px }
.a-propos .content h3 { font-family: 'Rekind'; letter-spacing: 9px }
.a-propos .content p { text-transform: uppercase; font-family: 'Montserrat'; font-weight: 400; font-size: 1.4rem; margin-top: 40px; margin-bottom: 40px; padding: 0 4rem; opacity: 0.5}
.a-propos .service-card { border: var(--white) solid 2px; border-radius: 12px; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 4rem 3rem;background: radial-gradient(88.28% 88.28% at 50% 50%, rgba(243, 189, 41, 0.1) 0%, rgba(141, 110, 24, 0) 100%); backdrop-filter: blur(3.249725103378296px)}
.a-propos .service-card h3 { font-family: 'Montserrat'; letter-spacing: 4px }
.a-propos .service-card img { height: 150px; }
.a-propos .row { gap: 2rem; justify-content: center }
/* END A PROPOS */

/* REALISATIONS */
.realisations { margin-top: 10rem; padding: var(--container-padding); background-color: rgba(224, 16, 12, 1); color: white }
.realisations .content { text-align: center; margin-top: 3rem; }
.realisations .content h1 { font-family: 'Rekind'; letter-spacing: 9px }
.realisations .content h3 { font-family: 'Rekind'; letter-spacing: 9px }
.realisations .content p { text-transform: uppercase; font-family: 'Montserrat'; font-weight: 400; font-size: 1.4rem; margin-top: 40px; margin-bottom: 40px; padding: 0 4rem; opacity: 0.5}
/* END REALISATIONS */

/* TEMOIGNAGES */
.temoignages { margin-top: 10rem; padding: var(--container-padding) }
.temoignages .content { text-align: center; margin-top: 3rem; }
.temoignages .content h1 { font-family: 'Rekind'; letter-spacing: 9px }
.temoignages .content h3 { font-family: 'Rekind'; letter-spacing: 9px }
.temoignages .content p { text-transform: uppercase; font-family: 'Montserrat'; font-weight: 400; font-size: 1.4rem; margin-top: 40px; margin-bottom: 40px; padding: 0 4rem; opacity: 0.5}
/* END TEMOIGNAGES */

/* NOUS CHOISIR */
.nous-choisir { margin-top: 10rem; padding: var(--container-padding) }
.nous-choisir .content { text-align: left; margin-top: 3rem; }
.nous-choisir .content h1 { font-family: 'Rekind'; letter-spacing: 9px }
.nous-choisir .content h3 { font-family: 'Rekind'; letter-spacing: 9px }
.nous-choisir .content p { text-transform: uppercase; font-family: 'Montserrat'; font-weight: 400; font-size: 1.4rem; margin-top: 40px; margin-bottom: 40px; opacity: 0.5}
.nous-choisir .image { background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 550px; border-radius: 15px; }
/* END NOUS CHOISIR */

/* FOOTER */
.footer-info {background-color: var(--dark-blue); color: var(--white);padding: var(--container-padding); padding-top: 4rem; padding-bottom: 2rem; font-family: 'Montserrat'; font-size: .9rem;}
.footer-info .footer-title { font-size: .7rem; margin-bottom: 20px; }
.footer-info .sub-menu {display: flex; flex-direction: column;}
.footer-info .sub-menu a {margin-bottom: 1rem; font-weight: 600}
.footer-info a {text-decoration: none; color: var(--white)}
.footer-info .comunity-icons a {margin-right: 1rem;}
.footer-info .comunity-icons {margin-bottom: 2rem;}
.footer-info .spacer {position: relative;}
.footer-info .spacer .spacer-image {background-color: var(--dark-blue); z-index: 100; padding: .5rem}
.footer-info .spacer:after {content: ''; display: block; position: absolute; width: 100%; height: 1px; background-color: #E2E2E9; top: 50%; left: 0; opacity: 0.1}
/* END FOOTER */

@media screen and (max-width: 1024px) {
	:root {
	  --container-padding: 1rem;
	}
	
	#burger-menu { display: flex;}
	
	.menu-main-menu-container {display: none !important}
	
	.menu-main-menu-container-mobile {position: absolute; background: var(--pink); top: 0; left: 0; height: 100vh !important; display: flex !important}
	
	.menu-main-menu-container-mobile .menu li {display: flex; margin-bottom: 1rem; font-size: 18px}
	.menu-main-menu-container-mobile .menu li a {font-size: 32px}
	.menu-main-menu-container-mobile .menu {padding-left: 0}
	.main-navigation .close-burger {position: absolute; top: 1rem; right: 1rem; z-index: 10;}
	.main-navigation .close-burger span {font-size: 4rem;}	
	.main-navigation {padding: 25px 0px 10px 25px; justify-content: space-around;}
	
	.hero .card, .hero {aspect-ratio: 3 / 4 !important;}
	.bloc-cards .card-content:nth-child(n+3) {margin-top: 3rem}
	.bloc-abonnement .left-part { position: relative;border-radius: 8px; padding: 2rem; }

	.bloc-abonnement .left-part::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.1; background-image: var(--background-image-abo); background-size: cover; background-position: 6rem 2rem; background-repeat: no-repeat; z-index: 1;}
	
	.bloc-abonnement .abonnement-button, .bloc-abonnement .abonnement-title, .bloc-abonnement .abonnement-description {z-index: 10}

	.bloc-abonnement .right-part {display: none}
	
	.bloc-cards-page .card-content-full {margin-bottom: 2rem}
	.bloc-cards-page .card-content:nth-child(n+3) {margin-top: 3rem}
	
	#single-page .page-content .row {flex-direction: column-reverse}
	#single-page .page-content .right-column {margin-bottom: 4rem;}
	
	.hero .hero-arrow {top: 2rem}
	
}

button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.white-ph::placeholder{
	color:#fff;
}

.search-wrapper.hidden {
	display:none !important;
}