@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@200;300;400;700&display=swap');


*{
  font-family: 'Lexend', sans-serif;
}
body{
  background-image: url(../image/backgroundpic.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center center;
  background-attachment: fixed;
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}



.navbar a{
  color: black;
  font-weight: 700;
  font-size: 20;
}
.navbar {
  transition: all 0.3s ease;
}
.navbar-brand{
  margin-left: 20px;
}
.navbar.hidden {
  transform: translateY(-100%);
}
.nav-link a:after{
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 2px;
  left: 0;
  background-color: gold;
  transform-origin: bottom right;
  transition: transform 0.5s ease-in-out;
}
.nav-link a:hover:after{
  transform: scaleX(1);
  transform-origin: bottom left;
}
.nav-link a:hover{
  color:gold;
}



#section{
  background-image: url(../image/5514.jpg);
    height: 650px;
   background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;

}
#vision{
  border-radius: 10px;
  box-shadow: 0 3px 10px gray;
}

.nav-tabs .nav-link {
  color:darkgoldenrod;
}
.nav-tabs .nav-link:hover{
  color:black;
}

.nav-tabs .nav-link.active {
  color: black;
}

.card{
  margin: 0 auto;
  float: none;
}

.card-img-top{

  height: 100%;
  width: 100%;
  border-radius: inherit;
  transition: all ease-in-out .4s;
}

.card:hover .card-img-top{
  transform: scale(1.10);
  background-color: white;
}
.card-text a{
  color:goldenrod;
}
.card-text a:hover{
  cursor: pointer;
  color:rgb(0, 0, 0);
}


.card:hover{
  background: white;
  font-size: 15px;
  transition: all ease-in-out .4s;
}
#btncourse {
  margin-top: -20px;
  border-radius: 5px;
  background-color: gold;
  color: black;
  transition: all 0.3s ease-in-out;
}
#btncourse:hover{
  background-color: rgb(206, 151, 11);
  color: white;
}




.counter {
  display: inline-block;
}

.login-form {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 20px;
}

/* Input fields */

input[type='text']:focus,
input[type='password']:focus,
input[type='email']:focus
{
  border-color: gold;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px gold;
  outline: 0 none;
}
textarea:focus{
  border-color: gold;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px gold;
  outline: 0 none;
}
#Message:focus{
  border-color: gold;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px gold;
  outline: 0 none;
}
#login-form-submit:hover{
  background-color: white;
}
#login-error-msg-holder {
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
}
#login-error-msg {
  width: 80%;
  text-align: center;
  margin-bottom: 5px;
  padding: 5px;
  font-size: 12px;
  font-weight: bold;
  color: #8a0000;
  border: 1px solid #8a0000;
  background-color: #e58f8f;
  opacity: 0;
}
#error-msg-second-line {
  display: block;
}
.button-reg{
  margin-top: 5px;
  color:darkgoldenrod;
  border: none;
  background-color: none;
  text-decoration: underline;

}
#login-form {
  width: 100%;
  align-self: flex-start;
  display: grid;
  justify-items: center;
  align-items: center;
  
}

.login-form-field::placeholder {
  color: rgb(172, 169, 169);
  font-size: 15px;
  align-self: center;
}

.login-form-field {
  width: 100%;
  font-size: 15px;
  color: rgb(0, 0, 0);
  margin-bottom: 20px;
  border-radius: 5px;
  border-color: rgb(209, 207, 207);
  padding: 0px 0px 5px 5px;
  opacity: 0.8;
}


.button-reg:hover{
  color:black
}

#cancelbtn{
  border-radius: 5px;
  border: none;
  background-color: gray;
  color: black;
  transition: all 0.3s ease-in-out;
  padding: 10px;
}
#cancelbtn:hover{
  background-color: black;
  color: white;
}
.modal-backdrop {
  position:unset !important;
}




#contact a:hover{
  color: white;
}











.badge {
  background-color: red;
  color: white;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  top: -10px;
  right: 20px;
  padding: 5px 10px;
  border-radius: 50%;
  background: red;
  color: white;
}



  .reveal{
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: all 2s ease;
  }

  .reveal.active{
    transform: translateY(0px);
    opacity: 1;
  }


  @media (max-width: 576px) {
    #section {
      background-size: contain;
    }
  }
  
  @media (min-width: 576px) and (max-width: 768px) {
    #section {
      background-size: cover;
    }
  }
  
  @media (min-width: 768px) {
    #section {
      background-size: cover;
    }
  }
  @media (max-width:425px) {
    .navbar-brand{
      margin: 0;
    }
    .navbar{
      margin:0;
    }
  }
 





  /* Reviews */

.slide-container{
  max-width: auto;
  height:500px;
  width: 100%;
  padding: 10px 5px;
  
}
.slide-content{
  margin: 0 40px;
  overflow: hidden;
  border-radius: 25px;
}
.cardreview{
  border-radius: 25px;
  background-color: #FFF;
  border: 1px solid rgb(168, 167, 167);
}
.cardreview:hover{
  box-shadow: 0 px 10px goldenrod;
}

.image-content,
.cardreview-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 14px;
}
.image-content{
  position: relative;
  row-gap: 5px;
  padding: 25px 0;
}
.overlay{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgb(252, 228, 86);
  border-radius: 25px 25px 0 25px;
}
.overlay::before,
.overlay::after{
  content: '';
  position: absolute;
  right: 0;
  bottom: -40px;
  height: 40px;
  width: 40px;
  background-color: rgb(252, 228, 86);
}
.overlay::after{
  border-radius: 0 25px 0 0;
  background-color: #FFF;
}
.rating{
  color:rgb(254, 191, 31);
}
.cardreview-image{
  position: relative;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background: #FFF;
  padding: 3px;
}
.cardreview-image .cardreview-img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid rgba(240, 175, 9, 0.9);
}
.name{
  font-size: 18px;
  font-weight: 500;
  color: #333;
  padding: 5px;
}
.description{
  height: 80px;
  width: 160px;
  font-size: 14px;
  color: #707070;
  text-align: center;
  overflow:hidden;
}
.button{
  border-radius: 5px;
  border: none;
  background-color: gold;
  color: black;
  transition: all 0.3s ease-in-out;
  padding: 10px;
}
.button:hover{
  background-color: rgb(206, 151, 11);
  color: white;
}

.swiper-navBtn{
  transition: color 0.3s ease;
}
.swiper-navBtn::before,
.swiper-navBtn::after{
  font-size: 5px;
  color:#333;
}
.swiper-button-next{
  right: 0;
}
.swiper-button-prev{
  left: 0;
}
.swiper-pagination-bullet{
  background-color: darkgoldenrod;
  opacity: 1;
}
.swiper-pagination-bullet-active{
  background-color: gold;
}

@media screen and (max-width: 768px) {
  .slide-content{
    margin: 0 10px;
  }
  .swiper-navBtn{
    display: none;
  }
}

.close, {
  border-radius: 5px;
  border: none;
  background-color: gold;
  color: black;
  transition: all 0.3s ease-in-out;
  padding: 10px;
}
.close:hover{
  background-color: rgb(206, 151, 11);
  color: white;
}


.home-newsletter {
  padding: 80px 0;
  background: #f84e77;
  }