/* scroll bar */
::-webkit-scrollbar{
    width: 0.6vw;
    background: #0F1035;
}
::-webkit-scrollbar-thumb{
    background: -webkit-linear-gradient(transparent,#365486);
    background: linear-gradient(transparent,#365486);
    border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover{
   background: -webkit-linear-gradient(transparent,#365486);
   background: linear-gradient(transparent,#365486); 
}
/*Firefox Support*/
html{
    scrollbar-width: thin;
    scrollbar-color: #365486 #0F1035 ;
}

:root{
    --primary-color:#2895b6;
    --box-color:#365486;
    --dark-color:#0F1035;
    --box-radius:12px;
}
/* select color */
::-moz-selection { /* Code for Firefox */
  color: white;
  background: var(--primary-color);
}

::selection {
  color: white;
  background: var(--primary-color);
}
/* header */
.menubar .menu-item .menu-link{
    font-size:18px;
    font-weight:500;
}
.menubar.menubar-dark, .menubar.menubar-light, .menubar.menubar-mobile .menubar-collapse, .menubar .menubar-collapse .menubar-item-list > li > ul, .menubar .menubar-collapse .menubar-item-list ul ul
,.menubar.menubar-transparent:not(.scroll), .menubar.menubar-dark.menubar-transparent:not(.scroll), .menubar.menubar-light.menubar-transparent:not(.scroll){
   background-color:white;
   border-bottom:2px solid var(--primary-color);
    padding:0 40px;
}
@media only screen and (max-width: 600px){
  .menubar.menubar-dark, .menubar.menubar-light, .menubar.menubar-mobile .menubar-collapse, .menubar .menubar-collapse .menubar-item-list > li > ul, .menubar .menubar-collapse .menubar-item-list ul ul
,.menubar.menubar-transparent:not(.scroll), .menubar.menubar-dark.menubar-transparent:not(.scroll), .menubar.menubar-light.menubar-transparent:not(.scroll)
{
padding:0 10px;
}
}
strong, b {
font-weight: bold;
}
.is-wrapper p,.is-wrapper li,.is-wrapper input,.is-wrapper span {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Noto Sans", sans-serif;
font-weight: normal;
}
.is-wrapper h1,.is-wrapper h2,.is-wrapper h3,.is-wrapper h4,.is-wrapper h5,.is-wrapper h6 {
font-family: "Noto Sans", sans-serif;
font-variant-ligatures: common-ligatures;
}
.menubar.menubar-mobile .menubar-toggler span, .menubar.menubar-mobile .menubar-toggler span:before, .menubar.menubar-mobile .menubar-toggler span:after {
    background: var(--primary-color);
}
.is-dark-text, .is-dark-text h1, .is-dark-text h2, .is-dark-text h3, .is-dark-text h4, .is-dark-text h5, .is-dark-text h6, .is-dark-text p, .is-dark-text li {
    color: var(--dark-color);
}
a.blue-button, a.is-btn-ghost1, .is-wrapper a.is-btn-ghost2, 
.is-wrapper button.is-btn-ghost1, .is-wrapper button.is-btn-ghost2 {
font-size: 18px;
letter-spacing: 0.100em;
line-height: 1.5;    
font-family: "Noto Sans", sans-serif;
padding: 0.5em 1.00em;
}
 a.is-btn-ghost1.is-btn-large, .is-wrapper a.is-btn-ghost2.is-btn-large, 
.is-wrapper button.is-btn-ghost1.is-btn-large, .is-wrapper button.is-btn-ghost2.is-btn-large,a.blue-button,a.postbtn {
padding: 0.5em 1.00em;
font-size: 1em;
}
 a.is-btn-ghost1.is-btn-small, .is-wrapper a.is-btn-ghost2.is-btn-small, 
.is-wrapper button.is-btn-ghost1.is-btn-small, .is-wrapper button.is-btn-ghost2.is-btn-small {
padding: 0.5em 1.00em;
font-size: .80em;
}
/* ghost1 dark-text */
.is-btn-ghost1 ,.blue-button,.postbtn{
color:var(--primary-color);
border: 2px solid var(--primary-color);
border-radius: var(--box-radius);
background: transparent;
}

a.blue-button{
  text-decoration: none;
}

 .is-btn-ghost1:hover,  .is-btn-ghost1:active,  .is-btn-ghost1:focus,
 .blue-button:hover,.blue-button:active,.blue-button:focus,
 .postbtn:hover,.postbtn:active,.postbtn:focus {
color: white;
background-color: var(--primary-color);
border: 2px solid var(--primary-color);
border-radius: var(--box-radius);
}
a.postbtn{
  display: block;
 margin:6px 0 ;
  padding:12px 40px;
  text-align: center;
  
}
/* ghost1 light-text */

 /* .is-btn-ghost1:hover, .is-btn-ghost1:active, .is-btn-ghost1:focus {
color: var(--box-color);
border: 2px solid var(--box-color);
border-radius: var(--box-radius);
background-color: #fff;
} */
/* ghost2 dark-text */
.is-dark-text .is-btn-ghost2,
.is-light-text .is-dark-text .is-btn-ghost2 {
color: #fff;
border: 2px solid var(--box-color);
background-color: var(--box-color);
border-radius: var(--box-radius);
}
.is-dark-text .is-btn-ghost2:hover, .is-dark-text .is-btn-ghost2:active, .is-dark-text .is-btn-ghost2:focus,
.is-light-text .is-dark-text .is-btn-ghost2:hover, .is-light-text .is-dark-text .is-btn-ghost2:active, .is-light-text .is-dark-text .is-btn-ghost2:focus {
color:var(--box-color);
border: 2px solid var(--box-color);
background: white;
border-radius: var(--box-radius);
}
/* ghost2 light-text */
.is-light-text .is-btn-ghost2,
.is-dark-text .is-light-text .is-btn-ghost2 {
color: #fff;
border: 2px solid var(--box-color);
background-color: var(--box-color);
border-radius: var(--box-radius);
}
.is-light-text .is-btn-ghost2:hover, .is-light-text .is-btn-ghost2:active, .is-light-text .is-btn-ghost2:focus,
.is-dark-text .is-light-text .is-btn-ghost2:hover, .is-dark-text .is-light-text .is-btn-ghost2:active, .is-dark-text .is-light-text .is-btn-ghost2:focus {
color: var(--box-color);
background-color: #fff;
border: 2px solid var(--box-color);
border-radius: var(--box-radius);

}
/* submenu */
.menubar .menubar-collapse .menubar-item-list > li > ul
{
      padding:  0px;
      background:white !important;
     box-shadow: 0px 0px 5px 0px rgba(15, 16, 53,0.5);
}
.menubar .menubar-collapse .menubar-item-list > li > ul  a
{
font-size: 13px;
border-bottom:1px solid #7FC7D9;
}
/* courses content */
.course-shadow{
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5); 
    transition: box-shadow 0.3s ease-in-out;
    border-radius: var(--box-radius);
}
.course-shadow:hover {
     box-shadow: 0px 0px 10px 0.5px rgba(0, 0, 0, 0.5) ;
}
.course-shadow2{
    box-shadow: none;
    transition: box-shadow 0.3s ease-in-out;
    border-radius: var(--box-radius);
}
.course-shadow2:hover {
     box-shadow: 0px 0px 10px 0.5px rgba(0, 0, 0, 0.5);
}
/* box shadow to class counter */
.counter-shadow {
 
  box-shadow: 0px 0px 10px 0 rgba(128, 128, 128, 0.3);
  border-radius: var(--box-radius);
  transition: box-shadow 0.3s ease-in-out;
  border-bottom:4px solid transparent;
}
/* counter number */
.counter{
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
}
.counter-shadow:hover {
  box-shadow: 5px 5px 15px 0.5px rgba(128, 128, 128, 0.8);
  border-bottom:4px solid var(--dark-color);
}
/* translate on hover */
.countertop{
     transition:transform 0.5s ease-in-out;
}

.countertop:hover{
      transition:  transform 0.5s ease-in-out;
       transform: translateY(-8px);
}
.container-border .is-container{
    margin: 0 auto;
    margin-bottom:0;
    background: linear-gradient(45deg, var(--primary-color), #365486);
    padding: 20px 180px;
    width: 100%;
    border: 8px solid;
    border-width: 8px 0;
    border-color: #0F1035;
}
.colored-container .is-container{
   margin: 0 auto;
    margin-bottom:0;
    background: linear-gradient(180deg, #DCF2F1, white 50%);
    padding: 20px 180px;
    width: 100%;
    
}
@media only screen and (max-width: 600px){
  .container-border .is-container ,.colored-container .is-container{

    padding: 20px 40px;
   
}
}
/* floating animation */
@keyframes floating {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }
.floating-element {
     
      animation: floating 4s infinite;
    }
/* entrance */

 @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

@keyframes slideInRight {
      from {
        opacity: 0;
        transform: translateX(100%);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
@keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-100%);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
.entrance-text {
      opacity: 0;
    }

    .entrance-text1.animated {
      animation: fadeInUp 1s ease-in-out forwards;
    }

    .entrance-text2.animated {
      animation: fadeInUp 1s ease-in-out forwards;
      animation-delay: 0.5s;
    }

    .entrance-text-left.animated {
      animation: slideInLeft 1s ease-in-out forwards;
    }

    .entrance-text-right.animated {
      animation: slideInRight 1s ease-in-out forwards;
    }
/*footer*/
.footer{
    display:flex;
    flex-direction: row;
    justify-content:space-between;
}
.footer div:first-child{
    width:30%;
}
@media screen and (max-width:767px){
    .footer{
    flex-direction: column;
    align-items: center;
    justify-content: space-between
}
    .footer div:first-child{
        width:100%;
    }
}
.footer h1:hover,.footer h2:hover,.footer h3:hover,.footer h4:hover,.footer h5:hover,.footer h6:hover,.footer p:hover,.footer a:hover,.footer span:hover,.footer li:hover{
    color:var(--primary-color);
}


/* Add styles for the entrance effect when the class is added */
/* Define the @keyframes for the entrance animation */
@keyframes entranceAnimationBlog {
  from {
  opacity: 0;
    transform: translateY(30px);
  }
  to {
   opacity: 1;
    transform: translateY(0);
  }
}

/* Apply the entrance animation to elements with the class "entrance-blog" */
.entrance-blog {
  text-align: center;
  animation: entranceAnimationBlog 0.5s ease-in-out;
  transition: 0.5s ease;

}
.entrance-blog:hover{
  transform: translateY(-10px);
}

.countdown {
            font-size: 2em;
            color: #333;
        }