#courses{
    margin-top:100px;
    transition: height 1s ease-in-out;
  

}

#courses-container{
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    transition: height 1s ease-in-out;
   
    
   
    
}
.btn-courses {
    padding: 20px 20px 20px 30px;
    border: none;
    border-bottom: 1px solid var(--color-blue-titles);
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    background-color:white;
    color: #3C3C51;
    font-size: 14px;
    cursor: pointer;
    outline: none;
  
  

}
button:focus{
    outline: none;
}
button .btn-courses{
    outline: none;
}
.btn-courses::after{
    content: '+';
   position: absolute;
   right: 20px;
   font-weight: bold;
   color: var(--text-titles);
   font-size: 28px;
   outline: none;
}

#courses-panel{
    padding: 50px;
    width: 80%;
    display: none;
    font-family: 'Rosarivo';
    font-size:16px;
    animation: fade_in_show 1s;
    text-align: justify;
   
   
   
 
   
    
}
.open{
    height: 200px;
}


.h2-blue-light{
    color: var(--color-blue-titles);
    
    font-family: 'Roboto', sans-serif;
}
.h2-blue-dark{
    color: var(--text-titles);
    font-family: 'Roboto', sans-serif
}
#appointment{
    display: flex;
    justify-content: center;
    margin-top: 50px;
    margin-bottom:50px;
}
#appointment button{
    background-color: var(--background-dark-blue);
    border: none;
    color: white;
    padding: 10px;
    text-transform: uppercase;

}

@keyframes fade_in_show {
    0% {
         opacity: 0;
         transform: scaleY(0)
    }

    100% {
         opacity: 1;
         transform: scaleY(1)
         
    }
}

.animation_fade{
    transition : fade_no_show 2s;
}

@keyframes fade_no_show {
    0% {
         opacity: 1;
         transform: scaleY(1)
    }

    100% {
         opacity: 0;
         transform: scaleY(0)
         
    }
}