html {
scroll-behavior:smooth !important;
}

body {
margin: 0;
}

@font-face {
font-family: 'Anydore';
src: url('./Anydore.woff2') format('woff2');
}

.anyFont {
font-family: 'Anydore' !important;
}

@font-face {
font-family: 'Ballista';
src: url('./Ballista.woff2') format('woff2');
}

.ballFont {
font-family: 'Ballista' !important;
}

@font-face {
font-family: 'zapf';
src: url('./zapf.woff2') format('woff2');
}

.zapFont {
font-family: 'zapf' !important;
}

@font-face {
font-family: 'Segira';
src: url('./Segira.woff2') format('woff2');
}

.segFont {
font-family: 'Segira' !important;
}
/******NAVBAR*********/
nav.navbar {
padding: .4rem 1rem !important;
}

.navbar-brand {
padding-top: 0px !important;
padding-bottom: 0px !important;
}

.navbar-light .navbar-toggler {
color: #F5EE37 !important;
border-color: #EFEC0D !important;
}
.navbar {
box-shadow: 1px 0 5px #000 !important;
}
.navbar-light .navbar-nav .nav-link {
color: #e07612 !important; 
transition: all .3s ease !important;
margin:0px 1px !important;
padding: 10px 7px !important;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
color: #ffffff !important;
background: #BF0909 !important;
border-radius: 5px !important;  
}

.dropdown-item {
padding: 8px 10px !important;
}

.dropdown-item:hover {
padding-left: 20px !important;
transition: all .5s ease !important;
background: #BF3419 !important;
color:#ffffff !important;
}

@media all and (min-width: 992px) {
/****THIS IS FOR HOVER DROPDOWN :D******/
.navbar .nav-item .dropdown-menu{ display: none; }
.navbar .nav-item:hover .nav-link{
color: #ffffff !important;
background: #BF3419 !important;
border-radius: 5px !important;
}
.navbar .nav-item:hover .dropdown-menu{ display: block; }
.navbar .nav-item .dropdown-menu{ margin-top:0; }
}
/***********CARDS*****************/
.card {
height:100% !important;
box-shadow: 0px 0px 3px 0px #7d7c76;
border-style: solid;
border-width: 0px 5px;
border-color: #ffffff;
}
.card:hover {
border-style: solid;
border-width: 0px 5px;
border-color: #f88f1e;
transition: all .3s ease;
}
.card-body {
font-size: 18px !important;
}
.card-text {
text-align: justify;
}
@media screen and (max-width:767px) {
.card-body {
font-size: 20px !important;
}
}
/**************ONLINE CLASS BTN*******************/
.btnOnline h1:hover {
background:#d2f590 !important;
color:#cf1b1b !important;
transition: all 0.3s ease-in;
}
/**************FOOTER*******************/
.footBg {
background: url('../img/footerBG.jpg');

}

/***************QUICK_ACCESS************************/
#quick a:hover {
background-color: #422d08;
color: #fff;
width: 80%;
transition: all 1s ease;
}
/***************USE CUSTOM ANIMATION 
***********/
.AAUHSL {
position: relative;
animation-name: consult2;
animation-duration: 2s; 
/*animation-delay: 1s;*/
animation-fill-mode: forwards;
}

@keyframes consult2 {
from {left: 10%;}
to {left: 0px;}
}
.AAUHSR {
position: relative;
animation-name: consult1;
animation-duration: 2s; 
/*animation-delay: 1s;*/
animation-fill-mode: forwards;
}

@keyframes consult1 {
from {right: 50%;}
to {right: 0px;}
}
/****************Shadowtext*************************/

.txtShadow {
text-shadow: 1px 1px 3px #000;
}

.textJustify {
text-align: justify !important;
}

.customFontSize {
font-size: 18px !important;
}

/******************AnimatedTitle********* 
NOTE:: Don't use bootstrap text-color class
*****************/
.smartTitle {
animation: suMon 3s infinite;
-webkit-animation: suMon 3s infinite;
}
@keyframes suMon {
0% {color: #f10808;}
25% {color: #ccda0b;}
50% {color: #5ebd05;}
75% {color: #13f1f1;}
100% {color: #f10808;}
}

/*************TOPBOTTOM MARGIN****************/
.topBottom {
margin-top: 6rem !important;
margin-bottom: 6rem !important;
}

.onlyTop {
margin-top: 6rem !important;
}

.onlyBottom {
margin-bottom: 6rem !important;
}

/********ANIMATIO EFFECTS*******************/
/**In this example, the delay has been added to the animation property by 
adding 5s after the easing effect. So the div will wait for 2 seconds before 
starting the slide down animation. */
.slideDown { animation: slideDown ease-in-out 3s; -webkit-animation: slideDown ease-in-out 3s;
}
@keyframes slideDown {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0%);
}
}

/****************FADE UP************************/
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0%);
}
0% {color: #f10808;}
25% {color: #ccda0b;}
50% {color: #5ebd05;}
75% {color: #13f1f1;}
100% {color: #f10808;}
}

.fadeUp { animation: fadeUp 3s infinite; -webkit-animation: fadeUp 3s infinite;
}


/*----------imaage animation zoom-------*/
.zoomImg img {
transition: transform 0.5s ease;
animation: sumonZoom 5s infinite alternate;
-webkit-animation: sumonZoom 5s infinite alternate;
}

@keyframes sumonZoom {
0% {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
}
/* 50% {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
}*/
100% {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
}
}

/***************************/

.zoomImgAlt img {
transition: transform 0.5s ease;
animation: sumonZoomAlt 5s infinite alternate;
-webkit-animation: sumonZoomAlt 5s infinite alternate;
}

@keyframes sumonZoomAlt {
0% {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
}
/* 50% {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
}*/
100% {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
}
}