/*==========================================
	BODY
==========================================*/
body{font-size: 16px;}
p {font-size: 16px;}
.main-content {min-height:600px;}
.main-content article {/*min-height:600px;*/}
.post-content {margin-bottom:50px;}
.small-content {min-height:400px;}
/*==========================================
	WPFORMS
==========================================*/
div.wpforms-container-full input[type="submit"]:not(:hover):not(:active),
div.wpforms-container-full button[type="submit"]:not(:hover):not(:active),
div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active),
.wp-core-ui div.wpforms-container-full input[type="submit"]:not(:hover):not(:active),
.wp-core-ui div.wpforms-container-full button[type="submit"]:not(:hover):not(:active),
.wp-core-ui div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) {
	background-color: var(--secondary);
	color: var(--white);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
div.wpforms-container-full input[type="submit"]:hover,
div.wpforms-container-full input[type="submit"]:active,
div.wpforms-container-full button[type="submit"]:hover,
div.wpforms-container-full button[type="submit"]:active,
div.wpforms-container-full .wpforms-page-button:hover,
div.wpforms-container-full .wpforms-page-button:active,
.wp-core-ui div.wpforms-container-full input[type="submit"]:hover,
.wp-core-ui div.wpforms-container-full input[type="submit"]:active,
.wp-core-ui div.wpforms-container-full button[type="submit"]:hover,
.wp-core-ui div.wpforms-container-full button[type="submit"]:active,
.wp-core-ui div.wpforms-container-full
.wpforms-page-button:hover,
.wp-core-ui div.wpforms-container-full
.wpforms-page-button:active {
	background-color: var(--primary);
}
.wpforms-container .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress {background: var(--secondary) !important;}
/*==========================================
	HEADER
==========================================*/
.main-header {background: var(--white); position: relative; z-index: 99;}
.main-header-container {padding:15px 0;}
.main-header-transparent {background: transparent; position: absolute; top: 0; left: 0; right:0; z-index: 99;}
.main-header-transparent .main-menu ul li a {color: var(--white);}
.nav-scroll {
	background: var(--white);
	padding: 0 0 0 0;
	position: fixed;
	top: -100px;
	left: 0;
	width: 100%;
	-webkit-transition: -webkit-transform .5s;
	transition: -webkit-transform .5s;
	transition: transform .5s;
	transition: transform .5s, -webkit-transform .5s;
	-webkit-transform: translateY(100px);
	transform: translateY(100px);
	-webkit-box-shadow: 0px 5px 15px rgb(15 36 84 / 5%);
	box-shadow: 0px 5px 15px rgb(15 36 84 / 5%);
	z-index: 99;
}
.main-header.nav-scroll .main-header-container {padding:8px 0;}
.main-header .main-menu ul li a:hover,
.main-header.nav-scroll .main-menu ul li a:hover {color: var(--secondary);}
.header-menu {width:50%;}
/*==========================================
	HEADER LOGO
==========================================*/
.main-header .logo img {height: 90px;}
.main-header.nav-scroll .logo img {height: 40px;}
.main-menu ul {font-size: 13px;}
.main-menu ul li a {padding: 15px 15px;}
/*==========================================
	HEADER NAV SCOLL
==========================================*/
.main-header-transparent.nav-scroll .main-menu ul li a{color: var(--primary);}
/*==========================================
	FOOTER
==========================================*/
.main-footer {background-size: cover; background-position: center top;}
.main-footer::before {
	position: absolute;
	content: '';
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	background-color: rgba(5,4,2,0.85);
}
.footer-top {padding: 5px 0;}
.footer-top .footer-logo img {width:110px;}
.footer-top .links-footer li {margin-bottom: 5px;}
.footer-top .links-footer a {position: relative; color: var(--white);}
.footer-top .links-footer a:hover, .footer-bottom ul li a:hover {color: var(--secondary);}
.footer-top .links-footer a::before {
	position: absolute;
	content: "\f054";
	font-family: "Font Awesome 6 Pro";
	font-size: 14px;
	left: 0px;
	top: 0px;
	opacity: 0;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	color: var(--secondary);
}
.footer-top .links-footer a:hover::before {opacity: 1;}
.footer-top .links-footer a:hover {padding-left: 15px;}
.footer-bottom {border-top: 1px solid rgba(255, 255, 255, 0.17);}
.footer-bottom p, .footer-bottom ul {font-size: 13px;}
.footer-copyright, .footer-bottom p, .footer-bottom ul li, .footer-bottom ul li a {color: var(--white);}
.footer-bottom ul li {padding: 0 8px;	position: relative;}
.footer-bottom ul li:first-child {padding-left: 0px;}
.footer-bottom ul li::after {
	content: '';
	position: absolute;
	height: 13px;
	border-right: 2px solid var(--white);
	right: 0px;
	bottom: 2px;
}
.footer-bottom ul li:last-child::after {content: none;}
.footer-bottom ul li.footer-copyright a {}

.footer-socials {}
.footer-socials li {margin-right: 15px;}
.footer-socials li:last-child {margin-right: 0;}
.footer-socials li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	line-height: 1;
	font-size: 16px;
	color: var(--white);
	border: 1px solid var(--white);
	border-radius: 8px;
}
.footer-socials li a:hover {
	border-color: var(--secondary);
	background: var(--secondary);
	color: var(--white);
}
/*==========================================
	HOME SLIDER
==========================================*/
.page-banner-image {height:400px;}
.home .banner-image {height:100vh;}
.slider-overlay {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 0;
}
.banner-image .slide-content {
  position: absolute;
  /*top: 50%;*/
	bottom: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: translate(-50%, 50%);
  width: 100%;
  padding: 50px 0;
	z-index: 1;
}
.banner-image .slide-content .slide-contents {gap: 50px;}
.banner-image .slide-content .slide-contents h1 {font-size: 42px;}
.banner-image .slide-content .slide-contents p {font-size: 18px; line-height: 1.7em; margin:0; }

/*.banner-image::after {*/
.banner-image::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	/*background: #ed6a30;*/
	background: rgba(237, 106, 49,.7);
	background: -webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,.8)),color-stop(70%, transparent),to(#fff));
	background: linear-gradient(to bottom,rgba(0,0,0,.5),transparent 70%,#fff);
	background: linear-gradient(to bottom,rgba(0,0,0,.5),transparent 100%,#fff);
}
.page-banner-image .slide-content {margin-top: 50px; padding: 0;}
.page-banner-image .slide-content .slide-contents {gap: 15px;}
/*==========================================================
0. BREADCRUMBS
==========================================================*/
.banner-breadcrumb {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
}
#breadcrumbs, #breadcrumbs span {padding: 0;margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	position: relative; z-index: 99;/*text-transform: uppercase;*/margin: 0; font-family: var(--font-family-body); font-size: var(--font-size16);}
#breadcrumbs {
		position: relative;
		padding: 15px 50px;
		margin-top: 50px;
		display: inline-block;
		background-color: var(--white);
		border-radius: 15px 15px 0 0;
}
#breadcrumbs a {color: var(--white);}
#breadcrumbs a {color: var(--primary);}
#breadcrumbs a:hover {color: var(--secondary);}
#breadcrumbs span {margin: 0 5px;}
#breadcrumbs span:first-child {margin-left: 0;}
#breadcrumbs span.breadcrumb_last {margin: 0 5px; color: var(--secondary);}
#breadcrumbs span.breadcrumb_last span {margin: 0 5px;}
#breadcrumbs span i {font-size: var(--font-size14); margin: 0 5px;}
#breadcrumbs span i.breadcrumb-separator {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 2px solid var(--white);
	border: 2px solid var(--primary);
}
/*====================================================================
00. BTN
====================================================================*/
.theme-btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  padding: 15px 25px;
  padding: 20px 40px;
  padding: 15px 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
	font-family: var(--font-family-title);
	background: var(--primary);
	border: solid 2px var(--primary);
	border-radius: 8px;
	color: var(--white);
  z-index: 1;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.theme-btn:hover, .theme-btn:focus {
	cursor: pointer;
	background: var(--secondary);
	border: solid 2px var(--secondary);
	color: var(--white);
}
.theme-btn i{}
.theme-btn_alt {
	background: var(--secondary);
	border: solid 2px var(--secondary);
	color: var(--white);
}
.theme-btn_alt:hover, .theme-btn_alt:focus {
	background: var(--primary);
	border: solid 2px var(--primary);
	color: var(--white);
}
.theme-btn_white {
  background: var(--white);
	border: solid 2px var(--white);
  color: var(--primary);
}
.theme-btn_outline {
	background: transparent;
	border: solid 2px var(--primary);
	color: var(--primary);
}
.theme-btn_outline_alt {
	background: transparent;
	border: solid 2px var(--secondary);
	color: var(--secondary);
}
.theme-btn_outline_white {
	background: transparent;
	border: solid 2px var(--white);
	color: var(--white);
}
.theme-btn-hover_white:hover, .theme-btn-hover_white:focus {
  background: var(--white);
	border: solid 2px var(--white);
  color: var(--primary);
}
.theme-btn_white_bg-overlay {background-color: rgba(255,255,255,0.20);}
.theme-btn_large {padding: 20px 40px;}
.theme-btn_med {font-size: 14px; padding: 10px 20px;}
.theme-btn_small {font-size: 12px;padding: 10px 15px;}
/*==========================================
	TITLES
==========================================*/
.underline-title {
	position: relative;
	padding-bottom: 20px;
}
.underline-title::after {
	position: absolute;
	content: '';
	left: 0px;
	bottom: 0px;
	width: 100px;
	height: 4px;
	background-color: var(--secondary);
}
.underline-title-thin::after {height: 2px;}
.text-center.underline-title::after,
.has-text-align-center.underline-title::after {
	left: 50%;
	transform: translateX(-50%);
}
/*==========================================
	HOME & TITLES
==========================================*/
.sec-title {}
.sec-title h6 {
	font-family: var(--font-family-body);
	color: var(--secondary);
	text-transform: capitalize;
	font-size: 18px;
	line-height: 1;
	font-weight: 400;
	margin-bottom: 10px;
}
.sec-title .text {
	line-height: 1.7em;
	opacity: 0.9;
	margin-top: 10px;
}
/*==========================================================
0. PRESENTATION HOME
==========================================================*/
.twm-section {}
.twm-section h1 {font-size: 36px;}
.twm-section .text p {
	line-height: 1.8em;
	margin-bottom: 15px;
}
/*==========================================================
0. CONCEPT HOME
==========================================================*/
.concept-section .icon-box .icon {
	position: relative;
	z-index: 2;
	width: 60px;
	height: 60px;
	color: #ffffff;
	font-size: 26px;
	border-radius: 50%;
	line-height: 60px;
	text-align: center;
	display: inline-block;
	background-color: var(--secondary);
}
.concept-section .icon-box i {font-size: 20px;}
.concept-section .progressbar li {
  list-style-type: none;
  width: 20%;
  font-size: 14px;
	font-weight: 700;
  position: relative;
  text-align: center;
  text-transform: uppercase;
}
.concept-section .progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: var(--secondary);
  top: 30px;
  left: -50%;
  z-index: 0;
}
.concept-section .progressbar li:first-child:after {content: none;}
.concept-section .bg-layer {
	background-image: url(../images/shapes/shape-5.png);
	background-position: bottom center;
}
.sejours-section .sejour-bloc {}
.sejours-section .sejour-bloc .image-box {background: var(--black);}
.sejours-section .sejour-bloc .image-box img {height:250px;}
.sejours-section .sejour-bloc:hover .image-box img {opacity: 0.6;}
.sejours-section .sejour-bloc .lower-content {padding: 25px 30px 30px 30px;	border: 1px solid #e3dcd9; border-top: none;}
.sejours-section .sejour-bloc .lower-content p {line-height: 1.4em;}
/*==========================================================
0. TEMOIGNAGES HOME
==========================================================*/
.temoignages-home.owl-carousel .owl-stage {display: flex;}
.temoignages-home.owl-carousel .owl-stage .owl-item {display: flex;	flex: 1 0 auto;}
.col-eq-height {display: flex;flex-grow: 1;}
.temoignages-home.owl-carousel .owl-dots {position: relative;	bottom: 10px;	width: 100%;text-align: center;}
.temoignages-section {min-height: 400px;}
.temoignages-section .temoignage-bloc {box-shadow: 0px 10px 60px 0px rgb(0, 0, 0, .07); padding: 50px 50px 40px;}
.temoignages-section .temoignage-bloc .testimonial-stars {color: #ffa801;	font-size: 16px;}
.temoignages-section .temoignage-bloc .testimonial-text {}
.temoignages-section .temoignage-bloc .testimonial-client-name {font-size: 26px;}

/*==========================================================
0. ACTU HOME
==========================================================*/
.actu-section {}
.actu-section .actu-bloc .image-box {background: var(--secondary);}
.actu-section .actu-bloc .image-box img {height:250px;}
.actu-section .actu-bloc:hover .image-box img {opacity: 0.6;}
.actu-section .actu-bloc .lower-content .post-meta {padding: 0;	margin: 0;}
.actu-section .actu-bloc .lower-content .post-meta li {font-size:14px; margin-right: 16px; color: var(--primary);	opacity: 0.7;	display: inline-block;}
.actu-section .actu-bloc .lower-content h4 {font-size: 24px}
.actu-section .actu-bloc .lower-content .text {opacity: 0.7;line-height: 1.7em;margin-top: 12px;}
.actu-section .actu-bloc .lower-content .read-more {color: var(--text-color);display: inline-block;}
.actu-section .actu-bloc .lower-content .read-more:hover {color: var(--secondary);display: inline-block;}

.bg-layer {
	position: absolute;
	z-index: -1;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.twm-section .bg-layer,
.actu-section .bg-layer
 {
	background-image: url(../images/shapes/sejours-shape-1.png);
	background-size: inherit;
	background-position: center left;
	left: 50px;
}
.actu-section .bg-layer {background-position: center right; left: -50px;}
/*-------------------------------------
SINGLE BLOG
--------------------------------------*/
.single-blog .category a {color: var(--secondary); font-size: 14px;	text-transform: uppercase;	text-decoration: none;}
.single-blog .category a:hover {color: var(--primary);}
.single-blog .post-info {	color: var(--grey);	font-size: 14px; opacity: 0.8;	margin-top: 12px;	margin-bottom: 12px;}
.single-blog .single-blog-img {height:450px;}
.post_tag {}
.post_tag h5 {margin: 0 0 25px;}
.post_tag ul.tagcloud li a {color: var(--primary); background-color: var(--white);}
.post_tag ul.tagcloud li a:hover {color: var(--white); background-color: var(--secondary);}
/*-------------------------------------
SIDEBAR BLOG
--------------------------------------*/
.sidebar .widget {}
.sidebar .widget::after {
	display: block;
	height: 3px;
	content: '';
	position: absolute;
	width: auto;
	width: 100px;
	bottom: 0;
	z-index: 1;
	background-color: var(--secondary);
}
.sidebar .widget:last-child::after {display: none;}
.sidebar h3 {color: var(--primary);	font-size: 20px; font-weight: 600;	text-transform: capitalize;}
.sidebar ul.sidebar-list-1 li a {color: var(--grey);	font-size: 16px; opacity: 0.8;}
.sidebar ul.sidebar-list-1 li a:hover {color: var(--secondary);}
.sidebar ul.sidebar-recent-post li a .sidebar-post-img {width:75px; height:75px; overflow: hidden;}
.sidebar ul.sidebar-recent-post li a .sidebar-post-img img {}
.nolist.tagcloud {display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none;}
.nolist.tagcloud li {margin: 0;}
.nolist.tagcloud a {display: block; padding: 8px 12px; white-space: normal; word-break: break-word; text-decoration: none;}
.sidebar ul.nolist.tagcloud a {background: var(--white);color: var(--grey); border: 1px solid var(--grey);}
.sidebar ul.tagcloud li a:hover {background: var(--secondary); color: var(--white); border: 1px solid var(--secondary)}
/*-------------------------------------
SCROLL TO TOP
--------------------------------------*/
.scroll_top {
  width: 50px;
  height: 50px;
  position: fixed;
  font-size: 0;
  z-index: 9999;
  right: 15px;
  bottom: 35px;
  background: var(--black);
  visibility: hidden;
  opacity: 0;
  color: var(--white);
	-webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.scroll_top.visible {visibility: visible; opacity: 1;}
.scroll_top span {font-size: 20px;  color: var(--white);}
.scroll_top:hover {background-color: var(--secondary);}
/*-------------------------------------
SHARE BTN
--------------------------------------*/
.sharebtn ul {gap: 0 20px;padding-left: 0 !important;	margin: 15px 0 !important;}
.sharebtn ul li a {color: var(--primary);	font-size: 18px;}
.sharebtn ul li a:hover {color: var(--secondary);}
/*==========================================
	PAGINATION
==========================================*/
.page-numbers {list-style: none; margin: 0; margin-bottom: 0px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 25px;}
.page-numbers li {padding: 0 5px 5px;}
.page-numbers li:first-child {padding-left: 0;}
.page-numbers li:last-child {padding-right: 0;}
.page-numbers li a, .page-numbers li span {
	display: block;
	background-color: transparent;
	color:  var(--primary);
	width: 40px;
	height: 40px;
	line-height: 40px;
	border: 1px solid  var(--primary);
  border-radius: 8px;
	text-align: center;
	font-size: 16px;
  margin: 0;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.page-numbers li a:hover, .page-numbers li span.current {background-color: var(--secondary) ;border-color: var(--secondary);	color: var(--white);}

@media only screen and (min-width: 1200px) and (max-width: 1599px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .page-numbers li a, .page-numbers li span {
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .page-numbers li a, .page-numbers li span {
    width: 34px;
    height: 34px;
    line-height: 34px;
    font-size: 15px;
  }
}
/*==========================================================
0. SITEMAP
==========================================================*/
.sitemap a, .sitemap a:focus, .sitemap a:visited {text-decoration: none !important; color: var(--text-color);}
.sitemap a:hover {color: var(--secondary);}
/*==========================================================
0. UL CHECK
==========================================================*/
ul.check, ul.xmark {list-style: none;  padding-left: 0;}
ul.check li, ul.xmark li {position: relative; padding-left: 20px;}
ul.check li::before, ul.xmark li::before{
  content: "\f00c"; /* icône check */
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  color: var(--secondary); /* ou ta classe text-secondary */
  position: absolute;
  left: 0;
  top: 0.1em;
}
ul.xmark li::before {
  content: "\f00d"; /* icône xmark */
	color: red;
}
/*==========================================================
0. FAQ
==========================================================*/
.faq-item {border: 1px solid var(--secondary);}
.faq-question {cursor: pointer; overflow: hidden;}
.faq-question-container {cursor: pointer; overflow: hidden;}
.faq-question-container:hover {background: var(--secondary); color: var(--white)}
.faq-question-container h2 {font-size: 22px; margin: 0 !important;}
.faq-question-container:hover h2 {color: var(--white)}
.faq-item.active .faq-question-container {background: var(--secondary);}
.faq-item.active .faq-question-container h2 {color: var(--white);}
.faq-item.active .faq-icon {transform: rotate(45deg); color: var(--white);}
.faq-answer {max-height: 0;	opacity: 0;	overflow: hidden;	padding: 0 25px; transition: max-height 0.4s ease, opacity 0.3s ease;}
.faq-item.active .faq-answer {opacity: 1;}
.faq-item.active .faq-answer {
  opacity: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 70vh;
}
.faq-answer p {margin: 15px 0;}
.faq-answer .faq-answer-content {margin: 15px 0;}
/*==========================================================
0. 404
==========================================================*/
.error404  .header-404 {font-size: 160px;}
/*==========================================================
0. SHADOW BOX
==========================================================*/
.shadow-box {padding: 40px 40px !important;	box-shadow: 0px 0px 15px rgba(0,0,0,0.10) !important;}
/*==========================================================
0. NEWSLETTER BREVO
==========================================================*/
.twm-newsletter-form,
.twm-newsletter-form div {display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; width: 100%;}
.twm-newsletter-form {gap:15px; width:50%; margin: 0 auto;}
.twm-newsletter-form div input:not([type="submit"]) {
	height:40px;
	border-radius: 8px;
	border : 0.8px solid var(--grey);
	padding: 0 15px 0 15px;
	width: 100%;
}
.twm-newsletter-form div input:not([type="submit"]):focus {
	border-width: 1px;
	border-style: solid;
	border-color: var(--secondary);
	box-shadow: 0 0 0 1px var(--secondary),0px 1px 2px rgba(0,0,0,0.15);
	outline: none;
}

.twm-newsletter-form div label {
	margin-bottom: 15px;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--primary);
}


.twm-newsletter-form input.sib-default-btn {
	height:40px;
	border: 2px solid var(--secondary);
	border-radius: 8px;
	box-shadow: none;
	padding: 0 15px;
	font-family: inherit;
	font-weight: 500;
	font-size: 17px;
	line-height: 100%;
	cursor: pointer;
	position: relative;
	text-decoration: none;
	background-color: var(--secondary);
	color: var(--white);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.twm-newsletter-form input.sib-default-btn:hover {
	border: 2px solid var(--primary);
	background-color: var(--primary);
	color: var(--white);
}

.twm-newsletter-form p {color: var(--grey);	font-size: 14px;}
/*==========================================================
0. POPUP
==========================================================*/
body.popup-open {overflow: hidden; position: fixed; width: 100%;}
.popup {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; overflow: hidden;}
.popup.active {visibility: visible; opacity: 1; pointer-events: auto;}
.popup-content {padding:50px; max-height: 90vh; width: 50%; background: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); transform: translateY(-20px); transition: transform 0.3s ease; overflow-y: auto; border-radius: 8px;}
.popup h2 {margin-top: 0 !important;}
.popup .close-btn {position: absolute; top: 25px; right: 25px; font-size: 26px; cursor: pointer; color: var(--primary);background: var(--white); border: 1px solid var(--primary); padding: 5px 10px 7px; border-radius: 8px;}
.popup .close-btn:hover {color: var(--white); background: var(--secondary); border: 1px solid var(--secondary);}
/*==============================================================================================================
 XX. RESPONSIVE
==============================================================================================================*/
/*==========================================================
0. BOOTSTRAP 5 Grid
==========================================================*/
/*
Extra small <576px = xs
Small ≥576px = sm
Medium ≥768px = md
Large ≥992px = lg
X-Large ≥1200px = xl
XX-Large ≥1400px = xxl
*/
@media (min-width: 1600px) {.main-header, .header-top {padding: 0 150px;}}
@media (min-width: 1400px) {}
@media (min-width: 1200px) {}
@media (min-width: 992px) {}
@media (min-width: 768px) {}
@media (min-width: 576px) {}


@media (max-width: 1600px) {.main-header, .header-top {padding: 0 100px;}}
@media (max-width: 1400px) {
	.main-header, .header-top {padding: 0 50px;}
}
@media (max-width: 1300px) {}
@media (max-width: 1200px) {
  .main-header, .header-top {padding: 0 25px;}
}

/*Menu break*/
@media (max-width: 992px) {
	.page-banner-image {height:50vh;}
	.home .banner-image {height: 50vh;}
	.page-banner-image .slide-content {margin-top: 0;}
	.banner-image .slide-content .slide-contents h1 {font-size: 32px;}
	.banner-image .slide-content .slide-contents p {font-size: 16px;}
	.banner-breadcrumb {left: 0; transform: translate(0%, 0);}
	.banner-breadcrumb, #breadcrumbs {width: 100%;}
	#breadcrumbs {padding: 15px;}
	.twm-section .bg-layer, .actu-section .bg-layer {background-position: top center;left: 0;}
	.faq-question-container h2 {font-size: 20px;}
	.footer-top .footer-logo img {width: 60px;}
	.popup-content {padding:50px; width:90%}
	.twm-newsletter-form {width: 100%;}
}
@media (max-width: 991px) {
	.footer-bottom, .footer-bottom-links {flex-direction: column;}
	.footer-bottom ul li::after {content: none;}
}
@media (max-width: 768px) {}
@media (max-width: 767px) {}
@media (max-width: 650px) {}
@media (max-width: 575px) {
	.banner-image .slide-content .slide-contents {gap: 12px;}
	.concept-section .progressbar {flex-direction: column;	justify-content: center;	align-items: center;}
	.concept-section .progressbar li {width: 100%; margin-bottom: 25px;}
	.concept-section .progressbar li::after {display: none;}
}
@media (max-width: 400px) {}
@media (max-width: 360px) {}