@font-face {
    font-family: 'Times New Roman';
    src: url('fonts/LiberationSerif-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Times New Roman';
    src: url('fonts/LiberationSerif-Italic.ttf') format('truetype');
    font-style: italic;
}
@font-face {
    font-family: 'Times New Roman';
    src: url('fonts/LiberationSerif-Bold.ttf') format('truetype');
    font-weight: bold;
}
@font-face {
    font-family: 'Times New Roman';
    src: url("fonts/LiberationSerif-BoldItalic.ttf") format('truetype');
    font-style: italic;
    font-weight: bold;
}


html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
    background: #142d4c;
    
    
    

    
}
.navbar {
    background: #142d4c;
    
}
.nav-link,
.navbar-brand {
    color: Yellow;
    cursor: pointer;
    font-family: Times New Roman;
    font-size: large;
    
    
}

.navbar-img {
    max-height: 50px;
    max-width: 50px;
    height: auto;
    width: auto;
    margin-left: -9px;
    
    
    
    
}

.parent{
    display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	
    flex-wrap: wrap;
    color: 	yellow;
    font-weight: bolder;
    min-height: 580px;
    
    background-color: white;
    
    



    
}

.child{
    background-color: black;
    border: white; border-width: 40px; border-style: ridge;


    

    
}






*, *::before, *::after {
	box-sizing: border-box;
}

@keyframes rotate {
	100% {
		transform: rotate(1turn);
	}
}

.Courses {
	position: relative;
	z-index: 0;
    max-width: 600px;
    width:90%;
	height: 500px;
	border-radius: 10px;
	overflow: hidden;
	padding: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Times New Roman', Times, serifs;
    font-style:normal;
    flex-wrap: wrap;
    font-weight: 900px;
    background-color: #b4ad46;
    
    
	
	&::before {
		content: '';
		position: absolute;
		z-index: -2;
		left: -50%;
		top: -50%;
		width: 200%;
		height: 200%;
		background-color: #399953;
		background-repeat: no-repeat;
		background-size: 50% 50%, 50% 50%;
		background-position: 0 0, 100% 0, 100% 100%, 0 100%;
		background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
		animation: rotate 4s linear infinite;
	}
	
	&::after {
		content: '';
		position: absolute;
		z-index: -1;
		left: 6px;
		top: 6px;
		width: calc(100% - 12px);
		height: calc(100% - 12px);
		background: black;
        filter: brightness(100);
		border-radius: 5px;
		align-content: center;
		align-self: center;

	}
}

.course-heading{
    text-decoration: underline;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;


}








    
    


 
.nav-link {
    margin-right: 1em !important;
    

    
}
.nav-link:hover {
    color: #000;
}
.navbar-collapse {
    justify-content: flex-end;
}



.header {
    background-image: url('images/building-839362_640.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}
.overlay {
    position: absolute;
    min-height: 100%;
    min-width: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.6);
}



.description {
    
    color: #b4ad46;
    font-weight:bolder;
    font-style: oblique;
    font-size: large;
    font-family: serif;
    left: 50%;
    position: absolute;
    top: 45%;
    transform: translate(-50%, -55%);
    text-align: center;
    line-height: 3;

    }


    .description h1 {
        color: #b4ad46;
        line-height: 1.5;
        animation-duration: 2s;
        animation-name: move-to-right;
        filter: brightness(1.75);
        font-family: 'Times New Roman', Times, serif !important;
        font-style: italic;
        
        
    }
    @keyframes move-to-right {
        0% {
          transform: translateX(-10rem);
          opacity: 0;
          filter: brightness(.55)
        }
        10% {
          opacity: 0.8;
          filter: brightness(.75)
        }
        80% {
          transform: translateX(2rem);
          filter: brightness(1)
        }
        100% {
          transform: translate(0);
          opacity: 1;
          filter: brightness(1.75);
        }
       }
    .description p {
        color: #b4ad46;
        font-size: 1.1rem;
        line-height: 1.5;
        top: 20px;
        height: -2em;
        padding-bottom: 2em;
        animation-duration: 2s;
        animation-name: move-to-left;
        filter: brightness(1.0);
        font-family: 'Times New Roman', Times, serif !important;
        font-style: italic;
        
    }
    @keyframes move-to-left {
        0% {
          transform: translateX(10rem);
          opacity: 0;
          filter: brightness(.45);
        }
        10% {
          opacity: 0.8;
        }
        80% {
          transform: translateX(-2rem);
          filter: brightness(.75);
        }
        100% {
          transform: translate(0);
          opacity: 1;
          filter: brightness(1.0);
        }
       }

    
    





.description button {
        border: 10px solid #b4ad46;
        background: #b4ad46;
        border-radius: 0;
        color:#fff;
        line-height: 1.5;
        animation-duration: 1.6s;
        animation-name: move-to-top;
        filter: brightness(1.25);
        

        
        
         

    }

    @keyframes move-to-top {
        0% {
          transform: translateY(6rem);
          opacity: .5;
          filter: brightness(.5);
          
        }
        100% {
          transform: translate(0);
          opacity: 1;
          filter: brightness(1);
          
        }
       }

       

    .description button:hover {
        border:1px solid #fff;
        background:#fff;
        color:#000;
    }







.container.features{
    position: relative;
    background-color: color(srgb red green blue) !important;
    

}

.features {
	margin: 4em auto;
	padding: 1em;
	position: relative;
    margin-bottom: 25px;
    

}
.feature-title {
	color: #ffef00;
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 25px;
	text-transform: uppercase;
    font-style: oblique;
    text-decoration-line: underline;
    font-family: 'Times New Roman', Times, serifs;
    font-style: oblique ;
    margin-top: -45px;
    
   
}






    

.features img {
	-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	margin-bottom: 16px;
    border-radius: 50%;
}

.features .form-control,
.features input {
	border-radius: 0;

    
    
    

}
.features .btn {
    background-color: #ffc40c;
    border: 1px solid black;
    color: #fff;
    margin-top: 10px;
    margin-bottom: -10px;
}
.features .btn:hover {
    background-color: #333;
    border: 1px solid #333;
}



.page-footer {
    
    border:1px solid #b4ad46;
    background: #b4ad46;
    color: black;
    padding: 60px 0 10px;
    font-family: 'Times New Roman', Times, serifs;
    font-style: oblique;
    
}



    



.footer-copyright {
    color: yellow; 
    padding: 30px 15px;
    margin-left: 0px;
    
}

.rlogo{
    height: 50px;
    width: 50px;
    padding: 7px;
    animation: rotation .5s infinite linear;


}

@keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }






@media (max-width: 575.98px)  {


    .navbar-img {
        float:none !important;
        margin-left: -1.5em !important;
    }
    
    


    .description {
        left: 0;
        padding: 0 15px;
        position: absolute;
        top: 10%;
        transform: none;
        text-align: center;
    }
 
    .description h1 {
        font-size: 2em;
    }
 
    .description p {
        font-size: 1.2rem;
    }

    .description button{
        
        padding: 2px;
        font-size: 1rem;
    }

    
 
    .features {
        margin: 4px;
        text-align: center;
        
        
        
    }

    .feature-title{
        text-align: left;
        margin-top: 20px;
    }

    .page-footer{
        text-align: center;
    }

    .footer-copyright{
        text-align: center;

    }

    .parent{
        text-align: left;
        justify-content: left;
	    align-items: left;
	        
    }
    
    .Courses{
        text-align: center;
        justify-content: center;
	    align-items: left;
        height: 1130px;

    }
   


    

    

    

    
}