.gradient-custom {
    /* fallback for old browsers */
    background: #DE9F27;

    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right bottom, #DE9F27, #e4c58dd5);

    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to top, #c99c63 0%, #e4c58dd5  );;
}
.backround-orange{
background-color: #c99c63 ;
}
.btn-hover:hover{
    background-color:#D3923F;
}
.text-color{
    background-color: #DE9F27;
}
.text-white{
    color: #fff;
}
/* ---------------------------------------- */
:root {
    --Strongblue: #007bff;
    --blue: #1450A3;
    --white: #ffff;
    --gray: #494949;
  }
.image-profile{
    background: linear-gradient(to top, #003344 0%, rgb(6, 103, 135));;
}
.date-finder{
    background-color: var(--gray);
    color: #fff;
}
.font{
    background: linear-gradient(#3e454b, #343a40);
    height: 100vh;
}
.backround-black{
    background-color:#393E43;
}

/* ---------------------------------------------------INDEX DE CONNECT--------------------------- */

 
:root {
    --Strongblue: #007bff;
    --blue: #1450A3;
    --white: #ffff;
    --gray: #DFE0DF;
    --graySecondary: #413e37;
    --orange: rgb(214, 179, 109);
}
/* ---------------------------------MENUBAR-------------------- */
.menuBar {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4 ,1fr);
    justify-content: space-around;
    background-color: var(--gray);
    padding: 10px;   
    border-radius: 10px;
    margin-top: 5px;

}
  
.menuBar a {
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    color: var(--graySecondary);
    text-decoration: none;
    text-align: center;
    margin: 0 5px;
    padding: 5px;
    font-size: medium;
}
.menuBar a:hover{
    font-weight: bold;
}
    /* Estilos para mostrar enlace del menu activa */
.tablink.active{
    background-color: var(--orange);
    color: var(--white);
    transition: all .6s ease;

}
  /* Estilos para el contenido de las pestañas */
.tabcontent {
     display: none;
    padding: 20px;
    border-top: none; 
    
   
}
  
  /* Estilos para mostrar el contenido de la pestaña activa */
.tabcontent.active {
    display: block;
   
}

/* ----------- CONTENIDO PESTAÑA DE INICIO-------------------- */
/* INICIO GENERAL*/
.principalFeed{
    display: grid;
    grid-template-columns: 50%  50%;
    height: fit-content;
    gap: 10px;
    padding: 10px 50px;

}
/* FEED */
 .feed{
    grid-column:1/3 ;
    padding: 10px;
    display: flex;
    flex-direction: column;
} 
.headerFeed{
    display: flex;
    width: 100%;
    
    justify-content: space-between;
}
.headerFeed img{
    max-width: 45px;
    margin: 15px;
}
.containerButtonsHeader{
    display: flex;
    align-items: center;
}
.containerButtonsHeader button{
    border: none;
    background-color: transparent;
    margin: 3px;
}
.imgFeed{
    max-width: 300PX;
    align-self: center;
    justify-self: center;
}
.containerFeed p{
    font-size: small;
    margin: 10px 0;
}
.containerFeed {
    padding: 8px 80px;
    background-color: white;
    
}

.containerFeed{
    width: 100%;
    display: flex;
    flex-direction: column;
    border-bottom-color: var(--gray);
    border-bottom-style: solid;
    margin-bottom: 5px;
}
.containerImg{
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}


/* CUMPLEAÑOS */
.newPost,.birthday{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

}
.birthday{
    grid-column: 1/3;
    grid-row: 1/2;
    background-image: url("../recursos/globos.png");
    background-size: cover;
}
.birthdayName{
    font-weight: bold;
    font-size: medium;
}
.sectionBirthday p{
    color: mediumorchid;
}

.mainBirthday{
    padding: 10px;
    height: 100%;
    width: 100%;
    
    background-repeat: no-repeat;
    background-size: cover;
    
}

.mainBirthday:hover{
    background-image: url("https://media.giphy.com/media/rm10GA0ITGQmRH0uDP/giphy.gif");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    
}
.sectionBirthday{
    display: flex;
    flex-direction: column;
    padding: 50px 50px 20px 50px;   
}

.mainBirthday h2{
    align-self: center;
    text-align: center;
}
.mainBirthday{
    height: 100%; 
    
    
}
/* NUEVA PUBLICACIÓN PESTAÑA INICIO */
.newPost{
    grid-row: 1/2;
}
.home{
    grid-column: 1/2;
   
}
.mainPost{
    padding: 20px 60px;
    display: flex;
    flex-direction: column;
    background-color: white;
}
.headerPost{
    margin-top: 10px;
    align-self: center;
    font-weight: bold;
    
}
.userInformation p{
    font-weight: bold;
}
textarea{
    width: 100%;
    
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    resize: none;  
}
.sectionBtn{
    width: 100%;
    display: flex;
    justify-content: center;
}
.btnSubmit{
    width: 50%;
    border:none;
    background-color: var(--orange);
    border-radius: 5px;
    margin-top: 10px;
    color: var(--white);
    height: 35px;
    font-size: large;
}
.btnSubmit:hover, .containerBtn button:hover{
    background-color: #DE9F27;
}
/* bOTONES SIGUIENTE Y ANTERIOR EN PESTAÑA DE INICIO */
.containerBtn{
    grid-column: 1/3;
    width:100%;
   display: flex;
   justify-content: center;
   gap:20px;

}
.containerBtn button{
    width: 100px;
    background-color: var(--orange);
    border:none;
    border-radius: 5px;
    color:var(--white);
    
}
/* iframe */
.motivador{
    grid-column: 1/3;
    margin-top: 0px;
}
iframe{
    width: 100%;
}

/* Nueva publicación en pestaña RH */
.rh{
    grid-column: 1/4;
    display:flex;
    justify-content: center;
}
.rh .mainPost{
    width: 90%;
}
/* WHATSAPP */
.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
    font-size:30px;
	box-shadow: 2px 2px 3px #999;
    z-index:100;
}

.my-float{
	margin-top:16px;
}

.float:hover, .my-float:hover{
	color: green;
}
/* --------------------APARTADO DE SERVICIOS------------------------- */

.containerSections{
width: 100%;
}
.menuCard{
    width: 100%;
    min-height: 90vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    padding: 10px 30px;
    gap: 10px;
    
}

.cardSection{
width: 100%;
height: 250px;
display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transition-duration: all 5s;
   
}

.a-service{
    width: 100%;
    height: 92%;
    text-decoration: none;
    color:#00abfb; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    text-align: center;
    box-shadow: rgba(60, 78, 87, 0.369) 0px 2px 8px 0px;
}

.opciones-servicios{
    width: 100%;
    display: none; 
    flex-direction: column;
    font-size: small;
    gap: 10px;
}
.opciones-servicios a{
    text-decoration: none;
   cursor: pointer;
    color: black;
    background-color: #ebebec;
    border-radius: 5px;
    text-align: center;
}


.cardSection:hover .opciones-servicios{
    display: flex;
}  

.optionService{
    display: none;
    width: 100%;
    justify-content: center;

    
}
.optionService a{
    color:#00abfb; 
    text-decoration: none;
    transition: all .3s;

}
.cardSection:hover .a-service{
    display: none;
    transition: all 2s;
}
.cardSection:hover .optionService{
    display: flex;
    transition: all 2s;
    color:#00abfb; 
}
.opciones-servicios a:hover{
    background-color: #bbd5f1;
    transition: all .3s ease-in-out;
}