@media only screen and (max-width: 600px) 
{
    .mb-hide
    {
        display: none;
    }

    .mb-center
    {
        text-align: center;
    }

    .fs-r
    {
        font-size: 100%;
    }

    .card-body
    {
        font-size: 100%;
        padding: 5px;
    }
    
    .code-container{
        position: relative;
        height: 100%;
        padding: 5%;
        overflow: hidden;    
    }    
    
}

@media only screen and (min-width: 601px) 
{
    
    .code-container{
        position: relative;
        height: 70%;
        padding: 1%;
        overflow: hidden;    
    }    
    
}

.logo
{
    width: 90px;
    height: 80px;
}

/* bootstrap classes override */
.navbar
{
    box-shadow: 1px 4px 1px 2px #f5efec;    
    z-index: 1;
    background-color: white;
}

#home-video {     
    width: 100%;
}

.bg-black{
    background-color: black;
}

.bg-console
{
    background-image: linear-gradient(45deg, #0000aa 20%, black);
}




#code
{    
    /* transform: rotate(-5deg);     */
    white-space: pre-wrap;
    color: #ffffff; /* Default color */
    font-family: monospace;    
    /* padding: 20px; */
}
.keyword { color: #569cd6; }
.directive { color: #d69d85; }
.string { color: #ce9178; }
.function { color: #4ec9b0; }

.mg-t-5p{
    margin-top: 5%;
}

.card{

    padding: 10px;
    margin-bottom: 20px;
}

.text-coral
{
    color: #FF7F50
}

.course{

    margin-bottom: 20px;
    border: none;
    background-image: linear-gradient(45deg, #000087 50%, #dfd3eb);
    color: white;
    font-weight: bolder;
}

#training
{
    background-color: ghostwhite;
    background-image: url(../img/course.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    padding: 5%;
}

#contact
{
    /* background-color: #0000aa; */
    background-image: url(../img/footer.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    /* padding: 5%; */
}

.contact-container
{
    background-image: linear-gradient(45deg, white 100%, transparent);
    /* background-color: #0000aa; */
    opacity: 0.9;
    /* box-shadow: 0px 5px 100px 0px #0000aa; */
}

#footer
{
    background-image: linear-gradient(45deg, black, #0000aa, black);    
}

.pd-5-p{
    padding: 5%;
}

a:hover{
    text-decoration: none;
}

footer{
    text-align: center;
    color: white;
    margin-top: 5%;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    padding: 20px;
    background-image: linear-gradient(45deg, black, #0000aa 20%, black);
}

ul{
    line-height: 30px;
}

.curve {
    width: 100%;
    overflow: hidden;
    position: relative;
    bottom: 5px; /* Adjust to control curve positioning */
  }

.curve svg {
    display: block;
    width: 100%;
    height: 50px; /* Adjust height for the desired curve depth */
}

input, textarea{

    border: 2px solid darkgray !important;
    background-color: ghostwhite !important;
}