/* ==========================================================
   VARIABLES
========================================================== */

:root{

    /* Colors */
    --clr-primary:#c7435c;
    --clr-primary-dark:#a83248;

    --clr-beige:#fcf6f1;
    --clr-beige-2:#edcfc5;
    --clr-mint:#eaf4f0;

    --clr-grey:#5f5e70;
    --clr-text:#2e2e2e;

    /* Fonts */
    --font-title:'Amatic SC', cursive;
    --font-body:'Manrope', sans-serif;
	

    /* Radius */
    --radius:18px;
    --radius-small:8px;

    /* Spacing */
    --section-padding:clamp(60px,7vw,90px);

    /* Navbar */
    --navbar-height:110px;

}


/* ==========================================================
   RESET
========================================================== */

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

html{
    font-size:100%;
    scroll-behavior:smooth;
}

body{

    margin:0;
    padding:0;

    padding-top:var(--navbar-height);

    font-family:var(--font-body);

    color:var(--clr-text);

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

a{

    transition:.25s;

}

h1,
h2,
h3,
h4{

    margin-top:0;

    font-family:var(--font-title);

    line-height:.95;

    font-weight:600;

}

section{

    overflow:hidden;

}
.custom-navbar{

    height:var(--navbar-height);

    background:var(--clr-beige);

}

.logo-icon{

    height:clamp(55px,5vw,70px);

}

.logo-text{

    height:clamp(42px,4vw,55px);

}

.navbar-nav .nav-link{

    font-family:var(--font-body);

    font-size:clamp(1rem,1.3vw ,1.5rem);

    font-weight:600;

    letter-spacing:2px;

    color:var(--clr-primary);

    text-transform:uppercase;
	background-color: #fcf6f1; /* beżowy */
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{

    color:var(--clr-primary-dark);

}

.dropdown-menu{

    background:var(--clr-beige-2);

    border:none;

    border-radius:0;

}

.dropdown-item {
    padding: 5px 25px;
    font-weight: 500;
  }




.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icons a {
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--clr-primary);
    border: 1px solid var(--clr-primary);
    border-radius: 50%;
    text-decoration: none;
    transition: .25s;
}

.social-icons a:hover {
    background: var(--clr-primary);
    color: #fff;
}


/* ==========================================================
   HERO
========================================================== */

.hero{

    position:relative;

    min-height:100vh;

    background-size:cover;

    background-position:center;

}

.hero-overlay{

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

}

.hero-index .hero-overlay{

    align-items:flex-start;

    padding-top:clamp(35px,4vw,50px);

}

.hero-coach-space{

    align-items:flex-start;

    padding-top:clamp(35px,12vw,150px);

}

.hero-mantrailing-space{

    align-items:flex-start;

    padding-top:clamp(95px,19vw,350px);

}

.hero-title{

    color:var(--clr-primary);

    line-height:1.2;

    margin-bottom:.15em;

    letter-spacing:.5px;

}

h1.hero-title{

    font-size:clamp(1.8rem,3vw,2.8rem);
	font-family:var(--font-body);	
	font-style: italic;
}

h2.hero-title{

    font-size:clamp(1.4rem,2vw,2.0rem);
	font-family:var(--font-body);
	font-style: italic;
}

h3.hero-title{

    font-size:clamp(1.2rem,1.5vw,1.6rem);
	font-family:var(--font-body);
	font-style: italic;
	color:#4c545c;
	
}

h4.hero-title{

    font-size:clamp(1rem,1.2vw,1.4rem);
	font-family:var(--font-body);
	font-style: italic;
	color:#4c545c;
}

.hero-subtitle{

    font-size:clamp(1rem,1.2vw,1.4rem);

    font-weight:300;

    color:var(--clr-primary);

}

/* ===== OBRAZY PER STRONA ===== */

.hero-accueil {
  background-image: url("../img/hero-accueil.jpg");
}

.hero-coach {
  background-image: url("../img/hero-votre-coach.png");
}

.hero-education {
  background-image: url("../img/hero-education.jpg");
}

.hero-comportement {
  background-image: url("../img/hero-comportement.png");
}

.hero-mantrailing {
  background-image: url("../img/hero-mantrailing.png");
}

.hero-ateliers {
  background-image: url("../img/hero-ateliers.jpg");
}



/* ==========================================================
   ABOUT
========================================================== */

.about-section,
.about-section-coach,
.section-mint,
.offers{

    padding:var(--section-padding) 0;

}

.about-section,
.section-mint,
.about-section-coach,
.offers{

   background:var(--clr-mint);

}



.mes-animaux-section{
    background:var(--clr-beige);

}

.mes-animaux-text{    
text-align:justify;
padding-top:clamp(35px,4vw,50px);
    max-width: 900px;
    margin: 0 auto;	

}

.mes-animaux-text h1{
color:var(--clr-primary);
text-align:center;
    font-size:clamp(3rem,6vw,7rem);
	
}

.mes-animaux-text p{
	font-style: italic;
}

/* ---------- TEXT ---------- */

.about-text{

    color:var(--clr-primary);
	text-align:center;
	padding-top:clamp(35px,4vw,50px);
    max-width: 900px;
    margin: 0 auto;
}

/* ---------- ANIMAUX ---------- */

.animaux-text p{
	text-align:center;
    color:#000;
	font-style: italic;
}

.about-text h1{

    font-size:clamp(3rem,6vw,7rem);
	
}

.about-text h2{

	font-family:var(--font-body);
    font-size:clamp(1rem,1.2vw ,1.5rem);
 font-style:italic;
    letter-spacing:2px;
	line-height:1.5;

    margin-bottom:.5em;

}

.about-text p,
.section-mint p{

    font-size:clamp(1rem,1vw ,1.2rem);

    line-height:1.5;

    font-style:italic;

    margin-bottom:1.1rem;
	
	color:#000;

}


.btn-story{

    display:inline-block;

    padding:.55rem 2.4rem;

    background:var(--clr-primary);

    color:#fff;

    text-decoration:none;

    border-radius:999px;

    font-family:var(--font-title);

    font-size:clamp(1.6rem,2vw,2.3rem);

    letter-spacing:3px;

    transition:.25s;

}

.btn-story:hover{

    background:var(--clr-primary-dark);

    color:#fff;

    transform:translateY(-2px);

}



/*------------*/



.formations-tabs{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    margin-bottom:4rem;

}

.formation-tab{

    padding:1rem 2rem;

    border:none;

    background:var(--clr-primary);

    color:#fff;

    font-family:var(--font-body);

    font-weight:600;

    letter-spacing:1px;

    transition:.25s;

}

.formation-tab:hover{

    background:var(--clr-primary-dark);

}

.formation-tab.active{

    background:#1596b6;
}


.formations-section{

    padding:var(--section-padding) 0;
	background:var(--clr-beige-2);
}


/* ---------- Mon histoire ---------- */

.mon-histoire-gallery{

    padding:80px 0;

    background:var(--clr-beige);

}

.monHistoireSwiper{

    padding:0 60px;

}

.monHistoireSwiper .swiper-slide{

    height:320px;

}

.monHistoireSwiper img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:var(--radius-small);

    transition:.35s;

}

.monHistoireSwiper img:hover{

    transform:scale(1.03);

}

.mon-histoire-prev,
.mon-histoire-next{

    color:var(--clr-primary);

}

.mon-histoire-prev::after,
.mon-histoire-next::after{

    font-size:34px;

}




/* ---------- LOGO ---------- */

.about-logo{

    width:100%;

    max-width:420px;

    margin-inline:auto;

    margin-bottom:2rem;

}


/* ---------- PHOTOS ---------- */

.about-photo,
.animaux-photo{

    width:100%;

    max-width:420px;

    aspect-ratio:4/5;

    object-fit:cover;

    border-radius:var(--radius);

    margin-inline:auto;

}


/* ---------- ROUNDED ---------- */

.img-rounded{

    width:100%;

    border-radius:var(--radius);

    object-fit:cover;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.img-rounded-big{

    width:100%;

    border-radius:var(--radius);

    object-fit:cover;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}


/* ---------- OVAL ---------- */

.img-oval{

    width:100%;

    max-width:480px;

    aspect-ratio:3/2;

    object-fit:cover;

    border-radius:50%;

    margin-inline:auto;

    box-shadow:0 12px 28px rgba(0,0,0,.1);

}
/* ==========================================================
   SERVICES
========================================================== */

.services-mix{

       background:var(--clr-mint);

    padding:var(--section-padding) 0;

}


/* ---------- SECTION TITLE ---------- */

.services-title{

    color:var(--clr-primary);
	
	font-family:var(--font-body);

    font-size:clamp(2.8rem,4vw,4.8rem);
	
	font-weight:300;

    letter-spacing:2px;

    text-align:center;

    margin-bottom:1.2em;

}


/* ---------- BLOCK ---------- */

.service-block{

    color:var(--clr-primary);

    text-align:center;

}

.service-block>*:last-child{

    margin-bottom:0;

}


/* ---------- ICON ---------- */

.service-icon{

    width:clamp(120px,12vw,180px);

    aspect-ratio:1;

    margin-inline:auto;

    margin-bottom:1.5rem;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f2d4ca;

    border-radius:50%;

    transition:.25s;

}

.service-block:hover .service-icon{

    transform:translateY(-5px);

}

.service-icon img{

    width:65%;

    height:65%;

    object-fit:contain;

}


/* ---------- H3 ---------- */

.service-block h3{

    font-size:clamp(2.2rem,4vw,4rem);

    letter-spacing:1px;

    margin-bottom:.35em;

}


/* ---------- H4 ---------- */

.service-block h4{

    font-size:clamp(1.6rem,2.4vw,2.4rem);

    line-height:1.4;

    margin-bottom:.6em;

}


/* ---------- TEXT ---------- */

.service-block p{

    font-family:var(--font-title);

    font-size:clamp(1.35rem,2vw,2rem);

    line-height:1.55;

    letter-spacing:.5px;

    margin-bottom:1rem;

}

/* ==========================================================
   TESTIMONIALS
========================================================== */

.testimonial-section{

    position:relative;

    background:var(--clr-beige-2);

    padding:clamp(50px,7vw,90px) 0;

}


/* ---------- TITLE ---------- */

.testimonial-section h3{

    color:#6b4b3e;

    font-size:clamp(2.5rem,4vw,4rem);

    text-align:center;

    margin-bottom:1.2em;

}


/* ---------- CAROUSEL ---------- */

#testimonialCarousel{

    position:relative;

    width:min(100%,700px);

    margin-inline:auto;

}

.carousel-inner{

    display:flex;

    align-items:center;

    min-height:260px;

}

.carousel-item{

    padding-inline:.5rem;

}


/* ---------- CONTENT ---------- */

.testimonial-slide{

    display:flex;

    justify-content:center;

    align-items:center;

}

.testimonial-content{

    width:min(100%,80%);

    text-align:center;

    padding-inline:clamp(15px,3vw,30px);

}

.testimonial-content h4{

    margin-bottom:.5rem;

    font-weight:600;

}

.testimonial-content hr{

    width:60px;

    margin:1rem auto 1.5rem;

}


/* ---------- TEXT ---------- */

.testimonial-text{

    font-family:var(--font-body);

    color:#6b4b3e;

    font-size:clamp(.95rem,1vw + .2rem,1.1rem);

    line-height:1.8;

    margin-bottom:1rem;

}


/* ---------- STATIC IMAGES ---------- */

.testimonial-img{

    position:absolute;

    top:clamp(20px,4vw,50px);

    width:min(32vw,500px);

    max-height:420px;

    object-fit:cover;

    z-index:1;

}

.testimonial-img.left{

    left:0;

    border-radius:0 180px 180px 0;

}

.testimonial-img.right{

    right:0;

    border-radius:180px 0 0 180px;

}


/* ---------- INDICATORS ---------- */

.carousel-indicators{

    bottom:-25px;

}

.carousel-indicators [data-bs-target]{

    width:8px;

    aspect-ratio:1;

    border:none;

    border-radius:50%;

    background:#6b4b3e;

    opacity:.35;

}

.carousel-indicators .active{

    opacity:1;

}


/* ---------- ARROWS ---------- */

.carousel-control-prev,
.carousel-control-next{

    width:42px;

}

.carousel-control-prev{

    left:clamp(-70px,-5vw,-40px);


}

.carousel-control-next{

    right:clamp(-70px,-5vw,-40px);

}

.carousel-control-prev-icon,
.carousel-control-next-icon{

    filter:invert(.5);

}



/* ==========================================================
   Chiote et Ado
   ========================================================== */
.fs-7{
    font-size: 0.75rem !important;
}



.offers h3{
    color:var(--clr-primary);
	font-family:var(--font-body);
    font-size:clamp(1rem,1.2vw,1.6rem);
	font-style:italic;
    letter-spacing:2px;
	line-height:1.5;
    margin-bottom:.5em;

}

.offers-mini p{
    font-size:clamp(0.1rem,0.4vw,1rem);


}


.offer-card{
    border:1px solid #ddd;
    background:var(--clr-beige);
    transition:.3s;
}

.offer-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 30px rgba(0,0,0,.12);
}

.offer-header{
    background:#7d9cab;
    color:var(--clr-beige);
    text-align:center;
    padding:40px 20px;
    font-size:2rem;
    font-weight:500;
}

.offer-body{
    padding:40px;
   
}

.price{
    color:#c7435c;
    font-size:4rem;
    font-weight:700;
	font-style:italic;
	font-family:var(--font-title);
	
}



/* ==========================================================
   Tarifs
========================================================== */

.page-tarifs-right{
    position:relative;
    overflow:hidden;
    padding:40px 0 80px;
	background:#e6e6e8;
}

.page-tarifs-right::after{

    content:"";

    position:absolute;

    left:300px;
    bottom:0;

    width:100%;
    height:100%;

    background:url("../img/tarifs.jpg") no-repeat bottom left;
    background-size:cover;

    z-index:1;
}

.tarifs-content-right{

    position:relative;
    z-index:2;
    max-width:900px;
    letter-spacing:1px;
	line-height:1.5;
}

.page-tarifs-right h3{
color:var(--clr-primary);
    font-size:clamp(1.2rem,1.5vw,2.0rem);
	font-family:var(--font-body);
text-align:center;
}


.page-tarifs-left{
    position:relative;
    overflow:hidden;
    padding:40px 0 80px;
	background:#e6e6e8;

}

.page-tarifs-left::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:100%;

    background:url("../img/hero-contact.jpg") no-repeat top right;
    background-size:cover;

    z-index:1;
}

.tarifs-content-left{

    position:relative;
    z-index:2;
   	text-align: right;
    letter-spacing:1px;
	line-height:1.5;
}

.page-tarifs-left h3{
color:var(--clr-primary);
    font-size:clamp(1.2rem,1.5vw,2.0rem);
	font-family:var(--font-body);
text-align:center;
}


.section-tarifs{
	background:var(--clr-grey);
	padding:40px 0 80px;
	
}
.section-tarifs h3{
color:#FFF;
    font-size:clamp(1.2rem,1.5vw,2.0rem);
	font-family:var(--font-body);
text-align:center;
line-height:1.5;
}
/* ==========================================================
troubles-section
========================================================== */
.troubles-section{

   padding:clamp(20px,3vw,50px);
   background:var(--clr-mint);
	
	
}

.troubles-section p{

    font-size:clamp(1rem,1.3vw ,1.5rem);
    line-height:1.5;
	font-weight:600;
	font-style:italic;
	
}


.troubles-section h2,
.section-mint h2,
.offers h2{

color:var(--clr-primary);
text-align:center;
        font-size:clamp(2.2rem,4vw,3.5rem);
    line-height:1.9;
	font-weight:bold;
	
}

.troubles-accompagnement p{
	max-width: 1000px;
    font-size:clamp(1rem,1.2vw ,1.3rem);
    line-height:1.5;
	font-weight:600;
	text-align:center;
	margin: 0 auto 1.5rem;
	
}



.section-beige {
padding:clamp(30px,4vw,50px);
  background:var(--clr-beige-2);
  position: relative;
  
}

.section-beige p,
.citation p {
  font-size: 20px;
  line-height: 1.9;
font-weight:600;
	font-style:italic;
}

.citation {
    position: relative;
    background: var(--clr-mint);
    padding: clamp(30px,4vw,50px);
    overflow: hidden;
}

.citation::before {
    content: "";
    position: absolute;

    width: 350px;
    height: 350px;

    background-image: url("../img/quote.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    opacity: 0.3;

    top: 0;
    left: 50%;
    transform: translateX(-50%);

    z-index: 0;
}

.citation .container {
    position: relative;
    z-index: 1;
}

/* ==========================================================
   Mantrailing
========================================================== */

.experience-title {

  font-size: 3rem;
  color: #3c3940;
  margin-bottom: 25px;
}

/* ==========================================================
   CONTACT
========================================================== */

.hero-contact{

    min-height:calc(100vh - var(--navbar-height));

    background-image:url("../img/hero-contact.jpg");

    background-size:cover;

    background-position:center;

}

.contact-box{

    padding:clamp(25px,4vw,40px);

    border-radius:var(--radius);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

    backdrop-filter:blur(2px);

}

.contact-box h2{

    color:var(--clr-primary);

    font-size:clamp(2.2rem,4vw,3.5rem);

}

.contact-box h4{

color:var(--clr-primary);
    font-size:clamp(1.2rem,1.5vw,2.0rem);
	font-family:var(--font-body);
text-align:center;

}


.contact-box .form-control{

    padding:.9rem 1rem;

    border-radius:var(--radius-small);

    border:1px solid #e2c7bd;

    font-size:1rem;

}

.contact-box textarea{

    resize:vertical;

    min-height:160px;

}

.btn-contact{

    background:var(--clr-primary);

    border:none;

    border-radius:40px;

    padding:.9rem 2rem;

    font-weight:600;

    transition:.25s;

}

.btn-contact:hover{

    background:var(--clr-primary-dark);

    transform:translateY(-2px);

}




/* ==========================================================
   METHODS
========================================================== */

.methods-section{

    width:100%;

}

.methods-img{

    min-height:420px;

    background-size:cover;

    background-position:center;

}

.methods-center{

    background:var(--clr-beige-2);

    padding:clamp(50px,6vw,90px);

}

.methods-content{

    width:100%;



    margin-inline:auto;

}

.methods-content p{

    font-size:clamp(1rem,1vw + .4rem,1.2rem);
	font-style:italic;
    line-height:1.9;

}

.methods-logo{
	width:100%;
    max-width:300px;

    margin:0 auto 2rem;
}

.box-left,
.box-right{

    padding:clamp(25px,4vw,40px);

    font-style:italic;

}

.box-left{

    background:#f6e3d2;

}

.box-right{

    background:#b9c9c8;

    margin-top:clamp(20px,5vw,80px);

}

.box-left p,
.box-right p{

    margin:0;

    line-height:1.6;

}


/* ==========================================================
   FOOTER
========================================================== */

.site-footer{

    background:#3c3940;

    padding:clamp(50px,6vw,70px) 0;

}

.footer-logo img{

    width:100%;

    max-width:220px;

    margin-inline:auto;

    margin-bottom:2rem;

}

.footer-services,
.footer-links{

    margin-bottom:1rem;

}

.footer-services a,
.footer-links a{

    color:#000;

    text-decoration:none;

}

.footer-services a:hover,
.footer-links a:hover{

    color:#f4b6a6;

}

.footer-copy{

    opacity:.75;

    font-size:.9rem;

}

.footer-social{

    display:flex;

    justify-content:center;

    gap:1rem;

    margin-top:2rem;
	

}

.footer-social a{

    width:42px;

    aspect-ratio:1;

    display:flex;

    justify-content:center;

    align-items:center;

    border:1px solid #000;

    border-radius:50%;

    transition:.25s;
	color:#000;

}

.footer-social a:hover{

    background:#f4b6a6;

    border-color:#f4b6a6;

    transform:translateY(-2px);

}

.footer-social i{

    font-size:18px;

}


/* ================= MOBILE ================= */
@media (max-width: 991px) {
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fcf6f1;
   
  }

  /* linki */
  .navbar-nav .nav-link {
    padding: 12px 20px;

  }


  .testimonial-img {
    display: none;
  }

    .carousel-control-prev {
        left: 5px;
    }

    .carousel-control-next {
        right: 5px;
    }
  
}