/* 
   Promise Path - Custom CSS
   This file contains custom styling for the Promise Path landing page
*/

/* ===== GENERAL STYLES ===== */
:root {
   --promise_grey: #f7f7f7;
   --promise_blue: #4d5ac7;
   --promise_red: #e8133c;
   --promise_yellow: #fcd700;
   --promise_lightblue: #0cace5;
   --promise_darkblue: #08224c;
	--animate-delay: 0.5s !important;
}

body {
   font-family: "DM Sans", sans-serif;
   overflow-x: hidden;
   font-family: 'Inter', sans-serif;
}

section, .w-img-banner {
   width: 70%;
   margin-inline: auto;
   margin-left: auto;
   margin-right: auto;
}

header {
   color: white !important;
}

footer {
   background-color: #051631;
}

button {
   border: 0;
}

h6 {
	font-size: 1.1rem !important;
}

a {
   text-decoration: none !important;
   color: white !important;
}

a h6 {
   font-weight: 300 !important;
   transition: 0.3s ease-in;
}

a h6:hover {
   color: #e8133c;
}

.stats-box {
   opacity: 0;
}

.font-funnel {
   font-family: "Funnel Display", sans-serif;
}

.navbar-brand img{
   width: 65%;
   padding: 0 !important;
}

.navbar-scrolled {
   background-color: #08224c;
   width: 100% !important;
   transition: padding 0.3s ease, width 0.5s ease, border-radius 0.75s ease;
}

.navbar-scrolled .navbar-brand img{
   width: 45%;
}

.nav-link {
   color: white !important;
}

.w-text-on-hero {
   width: 75%;
}

.hero-section-height {
   height: 1050px;
}

.hero-section {
   background-image: 
      linear-gradient(rgb(63, 81, 184), #0b2e66, #08224c);
   padding-top: 8rem;
   padding-bottom: 10rem;
   height: 850px;
}

.hero-img {
	height: 600px;
}

.top-absolute-hero {
   top: 800px !important;
}

.rounded-img {
   border-radius: 40px !important;
}

.fw-900 {
   font-weight: 800 !important;
}

.lh-min {
   line-height: 2.25rem;
}

.fs-therapy {
   font-size: 3rem;
}


/* ========== BACKGORUNDS ==========*/

.bg-prom-blue {
   background-color: var(--promise_blue);
}

.bg-prom-lightblue {
   background-color: var(--promise_lightblue);
}

.bg-prom-darkblue {
   background-color: var(--promise_darkblue);
}

.bg-prom-lightyellow {
   background-color: #fff1ae;
}

.bg-prom-softblue {
   background-color: #dff1f9;
}

.bg-prom-grey {
   background-color: var(--promise_grey);
}

/* ========== COLOR DE TEXTO ==========*/
.text-yellow {
   color: var(--promise_yellow);
}

.text-promise-grey {
   color: rgb(216, 234, 243);
}

.text-red {
   color: var(--promise_red);
}

.text-blue {
   color: var(--promise_blue);
}

.text-darkblue {
   color: var(--promise_darkblue);
}

.text-lightblue {
   color: var(--promise_lightblue);
}

.text-softblue {
   color: #cbebf7;
}

/* ========== BOTONES ==========*/
.header-button {
   border: 0;
   background-color: var(--promise_yellow);
   padding: 0.9rem 1.75rem;
   border-radius: 0.7rem;
}

.navbar-scrolled .header-button {
   padding: 0.6rem 1.25rem;
}

.pill-button {
   border: 0;
   padding: 0.5rem 2.5rem;
   border-radius: 2rem;
   font-weight: 500;
   transition: all 0.3s ease-in;
   cursor: pointer;
}

.pill-button.btn-lightblue {
   background-color: white;
   color: var(--promise_lightblue);
}

.pill-button.btn-lightblue.active {
   background-color: var(--promise_lightblue);
   color: white;
}

.pill-button.btn-lightblue:hover {
   background-color: #16a3d6;
   color: white;
}

.pill-button.btn-white {
   background-color: white;
   color: var(--promise_lightblue);
}

.pill-button.btn-white.active {
   background-color: var(--promise_lightblue);
   color: white;
   cursor: default;
}

.pill-button.btn-white:hover {
   background-color: #e7e7e7;
}

.pill-button.btn-white.active:hover {
   background-color: #0cace5;
}

/* Información desktop */
.desktop-info {
   display: none;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.desktop-info.active {
   display: block;
   opacity: 1;
}

.pill-button.btn-yellow {
   background-color: var(--promise_yellow);
   color: black;
}

.pill-button.btn-yellow:hover {
   background-color: #f3cf00;
}

.circle-button {
   background-color: var(--promise_darkblue);
   color: white;
   transition: 0.5s ease-out;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   height: 3rem;
   width: 3rem;
}

.circle-button:hover {
   background-color: var(--promise_red);
}




.hero-main-text {
   font-family: "Funnel Display", sans-serif;
   color: rgb(216, 234, 243);
   font-size: 3.5rem;
   line-height: 4.5rem;
   font-weight: 600;
}

.image-wrapper {
   overflow: hidden;
   position: relative;
}

.object-cover {
   width: 100% !important;
   height: 100%;
   object-fit: cover;
   display: block;
}

.border.border-1.border-red {
   border: 1px solid var(--promise_red) !important;
}

/* ===== PREGUNTAS FRECUENTES ===== */
.div-preguntas {
   transition: 0.5s ease-in;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   background-color: var(--promise_grey);
   padding-block: 2.5vh;
   border-radius: .75rem;
}

.div-preguntas:hover {
   cursor: pointer;
}

.div-preguntas .info {
   max-height: 0;
   overflow: hidden;
   transition: 0.4s ease-out;
}

.div-preguntas.expanded {
   background-color: #dff1f9;
}

.div-preguntas.expanded .info {
   max-height: 14vh;
}

.prom-box-container {
   height: 50%;
	cursor: pointer;
}

.info-box-row1 {
   height: 400px;
}

.info-box-row2 {
   height: 400px;
}

.info-box-row3 {
   height: 600px;
}

.footer-logo-bottom {
   display: none;
}

.footer-logo-top {
   display: block;
   width: 45%;
}

.radius-top-hero {
   border-radius: 20px 20px 20px 20px !important;
}


/* ============== Cuarta Seccion =============== */
.service-image {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: opacity 0.6s ease-in-out;
}

.service-image.active {
   opacity: 1;
   z-index: 1;
}

.service-option {
   cursor: pointer;
   transition: transform 0.3s ease;
   position: relative;
   z-index: 10;
}

.service-option:hover {
   transform: scale(1.02);
}

.service-option .bg-white {
   transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.service-option:hover .bg-white {
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
   transform: translateY(-2px);
}

.short-line {
   opacity: 0;
   transition: opacity 0.3s ease;
	width: 30px;
}

.short-line.active {
   opacity: 1;
}

.service-info {
   display: none;
   opacity: 0;
   transition: opacity 0.3s ease;
   min-height: 140px;
}

.service-info.active {
   display: block;
   opacity: 1;
}

.info-line {
   border-bottom: 3px solid #fcd700;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.info-line.active {
   opacity: 1;
}

@media only screen and (max-width: 1700px) {
	.hero-section-height {
		height: 1000px;
	}
	
	.hero-img {
		height: 500px
	}
}

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

   section, .w-img-banner {
      width: 80%;
   }
	
	h6 {
		font-size: 1.05rem !important;
	}

   .top-absolute-hero {
      top: 43rem !important;
   }

   .w-text-on-hero {
      width: 85%;
   }

   .hero-main-text {
      font-size: 3.25rem;
      line-height: 4.25rem;
   }

   .footer-logo-top {
      width: 50%;
   }
	
	.hero-section {
		height: 80vh;
	}
}

@media only screen and (max-width: 1400px) {
   .w-text-on-hero {
      width: 85%;
   }

   .top-absolute-hero {
      top: 85% !important;
   }

   .hero-section {
    height: 800px;
   }
	
	.hero-section-height {
		height: 950px;
	}

   .hero-main-text {
      font-size: 3.25rem;
      line-height: 4.5rem;
   }

   .prom-box-container {
      height: 25%;
   }

   .footer-logo-top {
      width: 55%;
   }
}

@media only screen and (max-width: 1300px) {
   .top-absolute-hero {
      top: 85% !important;
   }

   .hero-main-text {
      font-size: 3rem;
      line-height: 4rem;
   }

   .hero-section {
      padding-top: 7.5rem;
      padding-bottom: 16rem;
   }

   .w-text-on-hero {
      width: 95%;
   }

   .pill-button {
      padding: 0.5rem 2.25rem;
      border-radius: 2rem;
   }

   .prom-box-container {
      height: 25%;
   }

   .navbar-brand img{
      width: 50%;
      padding: 0 !important;
   }

   .fs-therapy {
      font-size: 2.75rem;
   }
}

@media only screen and (max-width: 1200px) {
   section {
      width: 85%;
   }
	
	h6 {
		font-size: 1rem !important;
	}

   .footer-logo-top {
      display: none;
   }

   .footer-logo-bottom {
      display: block;
      width: 12rem;
   }

   .hero-section-height {
      height: 825px;
   }
	
	.hero-section {
		height: 77.5vh;
	}

   .top-absolute-hero {
      top: 42rem !important;
   }

   .hero-img {
      height: 300px;
   }
}

@media only screen and (max-width: 1100px) {
   section {
      width: 87.5%;
   }
	
	.hero-section {
		height: 75vh;
	}

   .top-absolute-hero {
      top: 42.5rem !important;
   }
}

@media only screen and (max-width: 992px) {
   section {
      width: 90%;
   }

   .hero-main-text {
      font-size: 3.5rem;
      line-height: 4rem;
   }
	
	.hero-section-height {
		height: 875px;
	}

   .hero-section {
      height: 750px;
      padding-top: 7rem;
      padding-bottom: 16rem;
   }

   .top-absolute-hero {
      top: 37rem !important;
   }

   .w-img-banner {
      width: 85%;
   }

   .radius-top-hero {
      border-radius: 16px 16px 0 0 !important;
   }

   .radius-bottom-hero {
      border-radius: 0 0 16px 16px !important;
   }
}

@media only screen and (max-width: 850px) {
   section {
      width: 94%;
   }
	
	.hero-section-height {
		height: 900px;
	}

   .hero-section {
      height: 750px;
   }

   .w-img-banner {
      width: 94%;
   }

   .info-box-row3 {
      height: 600px;
   }

   .fs-therapy {
      font-size: 2.5rem;
   }

   .top-absolute-hero {
      top: 40rem !important;
   }

   .radius-top-hero {
      border-radius: 16px 16px 0 0 !important;
   }

   .radius-bottom-hero {
      border-radius: 0 0 16px 16px !important;
   }
}

@media only screen and (max-width: 769px) {
   section.full-wide {
      width: 100vw !important;
   }

   .hero-main-text {
      font-size: 2.7rem;
      line-height: 3rem;
   }
	
	.hero-section-height {
      height: 52.5rem;
   }

   .hero-section {
      height: 90%;
      padding-top: 5rem;
      padding-bottom: 16rem;
   }

   .top-absolute-hero {
      top: 32.5rem !important;
   }

   .radius-r-5 {
      border-radius: 1.5rem;
   }

   .radius-top-hero {
      border-radius: 15px 15px 0 0 !important;
   }

   .radius-bottom-hero {
      border-radius: 0 0 15px 15px !important;
   }

   .mision-mobile-section {
      background: #08224C;
      background: linear-gradient(215deg,rgba(8, 34, 76, 1) 0%, rgba(11, 46, 102, 1) 57%, rgba(38, 110, 224, 1) 100%);
      height: 300px;
   }

   .rounded-img {
      border-radius: 0 !important;
   }

   .fs-therapy {
      font-size: 2rem;
   }

   .four-boxes-mt {
      margin-top: 0 !important;
   }

   .footer-logo-bottom {
      width: 10rem;
   }

}

@media only screen and (max-width: 600px) {
   .hero-section-height {
      height: 52.5rem;
   }

   .four-boxes-mt {
      margin-top: 0px;
   }

   .mision-mobile-section {
      height: 48rem;
   }

   .top-absolute-hero {
      top: 35rem !important;
   }

   .hero-img {
      height: 200px;
   }
}

@media only screen and (max-width: 500px) {
   .four-boxes-mt {
      margin-top: 0px;
   }

   .hero-main-text {
      font-size: 2.6rem;
      line-height: 2.85rem;
   }

   .mision-mobile-section {
      height: 42.5rem;
   }

   .hero-section-height {
      height: 51rem;
   }
}

@media only screen and (max-width: 450px) {
   .hero-section-height {
      height: 50rem;
   }

   .top-absolute-hero {
      top: 37rem !important;
   }
}

@media only screen and (max-width: 400px) {
   h6 {
      font-size: 0.92rem !important;
   }

   .hero-section-height {
      height: 48rem;
   }

   .hero-img {
      height: 150px;
   }
   
   .hero-main-text {
      font-size: 2.5rem;
      line-height: 2.8rem;
   }

   .four-boxes-mt {
      margin-top: 10px;
   }

   .mision-mobile-section {
      height: 75vh;
   }
}

@media only screen and (max-width: 360px) {
   .hero-section-height {
      height: 52.5rem;
   }

   .mision-mobile-section {
      height: 70vh;
   }
}