/*
Theme Name: Psychotherapy Child
Theme URI: https://www.wpradiant.net/products/psychotherapy
Template: psychotherapy
Author: WP Radiant
Author URI: https://www.wpradiant.net/
Description: Psychotherapy is a free, clean, and professionally crafted theme built especially for psychotherapy, therapy services, mental health clinics, online therapy, licensed therapists, individual counseling, and wellness professionals. Whether you’re launching a personal therapy practice or creating an online presence for your mental health clinic, this theme provides a calm, trustworthy design that’s easy to navigate and fully responsive. This lightweight theme includes essential homepage sections such as a modern slider, service highlights, blog section, and a contact form, helping you connect with clients effortlessly. The clean layout ensures your content remains the focus, allowing you to share articles, wellness tips, or therapy insights through the built-in blog. The theme is SEO-friendly, mobile-optimized, and designed to perform well on all devices, giving you peace of mind while supporting others. Perfect for mental health websites, counseling services, therapy center design, and wellness professionals, it also suits online psychologists, clinical therapists, emotional wellness coaches, behavioral therapy providers, and self-care resources platforms. Whether offering depression treatment layouts, anxiety therapy sites, or virtual therapy sessions, this theme gives you the foundation to showcase services, share knowledge, and grow your client base. For enhanced appointment scheduling, integration with the Bookly plugin allows clients to book sessions online, manage appointments, and receive automated reminders. Download the Psychotherapy theme today to create a professional, compassionate, and trustworthy online presence. https://preview.wpradiant.net/psychotherapy-pro/
Tags: grid-layout,one-column,two-columns,right-sidebar,left-sidebar,custom-colors,sticky-post,threaded-comments,wide-blocks,block-patterns,block-styles,custom-menu,custom-background,custom-header,custom-logo,editor-style,featured-images,full-site-editing,full-width-template,template-editing,translation-ready,rtl-language-support,style-variations,portfolio,blog,education
Version: 1.0.3.1758024848
Updated: 2025-09-16 12:14:08

*/
/* Menu de navegacion del sitio*/
#header-menu{
background-color:white;
display:flex;
width:100%;
align-items:center;
justify-content:space-around;
box-shadow: rgb(150,150,150,150)0px 10px 10px 0px;
padding: 10px 0px 10px 0px;
position:fixed;	
z-index:999;
	top:0;
	left:0;

}
.main-menu{

}
.main-menu nav ul{
display:flex;
list-style:none;
justify-content:space-around;	
}
.main-menu nav ul li{
margin-left:15px;
padding:5px;
font-weight:500;
font-size:20px;
	
}
.main-menu nav ul li a:hover{
text-decoration: underline;
cursor: pointer;
}

.main-menu nav ul li a{
text-decoration: none;
color:rgb(51,167,181);
}

.action-buttons a{
text-decoration: none;
color:black;
margin-right: 10px;
font-size:18px;
}

.action-buttons .marked{
padding: 10px;
background-color:rgb(51,167,181);
color:white !important;
border-radius:5px;
margin-left: 10px;
}
.main-login{
	display:none;
}
/* Estlos moviles para el menu*/
@media (max-width:767px){
	#header-menu{
		display:none;
	}
	
}
@media (max-width:768px){
	.main-login{
		display:block;
	}
	.main-menu nav ul li{
		font-weight:400;
		font-size:16px;
	}
	.login, .signup{
		display:none;
	}
}

/* Seccion de servicios*/

#service-container{

width:100%;
max-width:1300px;
display: grid;
grid-template-columns: repeat(3, auto);
gap:20px;
padding: 8px;
justify-content: center;
}

.service-box{
background-color: rgb(241 241 241);
width:100%;
max-width:300px;
padding: 5px;
border-radius: 10px;
transition: ease-in-out 0.3s;
position: relative;
}

.service-box:hover{
background-color: rgb(77, 122, 121);
transition: ease-in-out 0.3s;
}
.service-box:hover .float-buttons{
opacity: 1;
}
.service-pic{
width:100%;
max-height:200px;
}
.service-description{
text-align: justify;

}

.float-buttons{
position: absolute;
top:25%;
bottom: 0;
left: 0;
right: 0;
display:grid;
align-items: center;
justify-content: center;
height: fit-content;
opacity: 0;
}

.action-button, .wame-button{
text-decoration: none;
padding: 10px;
margin: 5px 0px 0px 0px;
text-align: center;
}
.action-button{
color:black;
background-color: white;
border-radius:5px;
	display:none;
}

.wame-button{
color:white;
background-color: green;
border-radius:5px;
}


/*Estilos moviles*/

@media(max-width:767px){

#service-container{

width:100%;
max-width:100%;
display: grid;
grid-template-columns: repeat(1, auto);
gap:15px;
padding: 0px;
justify-content: center;

}
.service-box{
background-color: rgb(77 122 121 / 24%);
width:100%;
max-width:95%;
margin:auto;
padding: 5px;

}

.float-buttons{
position: initial;
display:flex;
height: auto;
opacity: 1;
margin-bottom: 5px;
justify-content: space-evenly;
}
.service-pic{
border-radius: 10px;

}
}


/* Slider de la pagina servicios*/

#slider-container {
      position: relative;
      width: 100%;
      max-width: 1303px;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .slider-wrapper {
      display: flex;
      transition: transform 0.6s ease-in-out;
    }

    .slider-content {
      min-width: 100%;
     
    }

    .slider-pic {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Botones */
    .slider-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.6);
      color: white;
      border: none;
      width: 20px;
      height: 20px;
      font-size: 18px;
      cursor: pointer;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
    }

    .prev { left: 15px; }
    .next { right: 15px; }

    /* Indicadores */
    .slider-indicators {
      display: flex;
      justify-content: center;
      margin-top: 16px;
    }

    .indicator {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ccc;
      margin: 0 4px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .indicator.active {
      background: #333;
    }