* {
  margin    : 0px;
  box-sizing: border-box;
}

.container {
  width: 90%;
}


/* start home page */

.home {
  width                : 100%;
  height               : 100vh;
  background-image     : url(../image/home.jpg);
  background-position  : bottom;
  background-size      : cover;
  background-attachment: fixed;
  margin-bottom        : 50px;
}

.layer {
  background-color: rgba(0, 0, 0, 0.6);
}

.home .navbar .container-fluid img {
  width      : 80px;
  height     : 50px;
  margin-left: 60px;
  cursor     : pointer;
}

nav {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.navbar ul {
  margin-left    : 250px;
  list-style-type: none;
  font-family    : 'Play', sans-serif;
}

.navbar ul li a:hover {
  color     : #3d57a8;
  transition: 0.5s;
}

.navbar-nav .nav-link.active:hover {
  color     : #3d57a8;
  transition: 0.5s;
}

.nav-link {
  position   : relative;
  color      : black;
  font-size  : 20px;
  font-weight: 500;
  margin-left: 10px;
}

.arrow_up {
  font-size: 40px;
  color    : #3d57a8;
  z-index  : 88888;
}

.home_content {
  font-family: 'Alkatra', cursive;
}

/* end home page */

/* start about page */

.about {
  width: 100%;
}

.about .about_text {
  color      : #3d57a8;
  font-size  : 60px;
  font-family: 'Alkatra', cursive;
  position   : relative;
}

.about .about_text::after {
  content         : "";
  width           : 150px;
  height          : 2px;
  background-color: #3d57a8;
  position        : absolute;
  top             : 80%;
  left            : 0px;
}

.about h1 {
  font-size    : 55px;
  font-weight  : 700;
  margin-bottom: 50px;
}

.about h4 {
  color         : #3d57a8;
  padding-bottom: 10px;
}

.about p {
  color      : #8492a6;
  font-weight: 400;
  font-size  : 22px;
}

.btn_about {
  background-color: #3d57a8;
  color           : white;
  font-size       : 13px;
}

.about i {
  color    : #3d57a8;
  font-size: 35px;
}

/* end about page */

/* start event page */

.event{
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
}

.event h5{
  text-align: left;
  color: #3d57a8;
}

#event_content {
  margin: 0 auto;
  max-width: 600px;
}

.event .event_text {
  font-size  : 55px;
  font-weight: 700px;
  font-family: 'Alkatra', cursive;
  color      : #3d57a8;
  position   : relative;
}

.event .event_text::after {
  content         : "";
  width           : 130px;
  height          : 2px;
  background-color: #3d57a8;
  position        : absolute;
  top             : 80%;
  left            : 5px;
}

.event h1 {
  font-size     : 60px;
  font-weight   : 500px;
  padding-bottom: 30px;
  padding-top: 30px;
  text-align    : center;
}

/* start event page */

/* start sections page */

.sections .section_text {
  font-size  : 55px;
  font-weight: 700px;
  font-family: 'Alkatra', cursive;
  color      : #3d57a8;
  position   : relative;
}

.sections .section_text::after {
  content         : "";
  width           : 180px;
  height          : 2px;
  background-color: #3d57a8;
  position        : absolute;
  top             : 80%;
  left            : 5px;
}

.sections h1 {
  font-size     : 50px;
  font-weight   : 500px;
  padding-bottom: 30px;
  text-align    : center;
}

#sections {
  margin: 50px auto;
  width : 60%;
}

#sections h4 {
  padding         : 10px;
  margin          : 0;
  background-color: #3d57a8;
  cursor          : pointer;
  color           : white;
}

#sections .title {
  padding         : 10px;
  margin          : 0;
  background-color: #3d57a8;
  cursor          : pointer;
  color           : rgb(39, 39, 39);
  font-family     : 'Alkatra', cursive;
  font-weight     : 520;
}

#sections div {
  padding         : 10px;
  background-color: #e6e6e8;
  display         : none;
  text-align      : left;
}

#sections .first{
  display:block;
}

/* end sections page */

/* start team page */

.team {
  width              : 100%;
  background-image   : url(../image/team.jpeg);
  background-position: center;
  background-size    : cover;
  padding-bottom     : 15px;
}

.team .team_text {
  font-size  : 55px;
  font-weight: 700px;
  font-family: 'Alkatra', cursive;
  color      : #3d57a8;
  position   : relative;
}

.team .team_text::after {
  content         : "";
  width           : 110px;
  height          : 2px;
  background-color: #3d57a8;
  position        : absolute;
  top             : 80%;
  left            : 10px;
}

.team h1 {
  font-size     : 60px;
  font-weight   : 500px;
  padding-bottom: 50px;
  text-align    : center;
}

.team h2 {
  font-family: 'Alkatra', cursive;
  font-size  : 25px;
}

.team p {
  font-weight: 500;
}

.team img {
  width        : 220px;
  height       : 200px;
  border-radius: 50%;
  cursor       : pointer;
  box-shadow   : 0 0 8px rgba(0, 0, 0, 0.5);
  transition   : 0.4s;
}

.team .team_box .profile {
  width          : 250px;
  height         : 300px;
  border-radius  : 50%;
  margin         : 0 15px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  position       : relative;
  box-shadow     : 0 0 8px rgba(0, 0, 0, 0.5);
  transition     : 0.4s;
}

.team .team_box .profile .team_info {
  position  : absolute;
  text-align: center;
  top       : 25%;
  transition: 0.4s;
  opacity   : 0;
}

.team .team_box .profile .team_info .name {
  color        : #3d57a8;
  margin-bottom: 5px;
}

.team .team_box .profile .team_info .team_icon i {
  margin    : 10px;
  cursor    : pointer;
  transition: 0.3s;
  font-size : 20px;
}

.team .team_box .profile:hover {
  border-radius: 20px;
  height       : 380px;
}

.team .team_box .profile:hover img {
  border-radius: 20px;
  margin-top   : -230px;
}

.team .team_box .profile:hover .team_info {
  top    : 60%;
  opacity: 1;
}

.team .team_box .profile .team_info .team_icon i:hover {
  color: #0078ff;
}

.team a {
  color: black;
}

/* end team page */

/* start join page */

.join {
  width         : 100%;
  padding-bottom: 30px;
  text-align    : center;
}

.join .join_text {
  font-size  : 55px;
  font-weight: 700px;
  font-family: 'Alkatra', cursive;
  color      : #3d57a8;
  position   : relative;
}

.join .join_text::after {
  content         : "";
  width           : 80px;
  height          : 2px;
  background-color: #3d57a8;
  position        : absolute;
  top             : 80%;
  left            : -5px;
}

.join h1 {
  font-size     : 50px;
  font-weight   : 500px;
  padding-bottom: 20px;
  padding-top   : 20px;
}

.join p {
  text-align : center;
  font-size  : 20px;
  font-family: 'Play', sans-serif;
  font-weight: 600;
}

.join a {
  text-decoration: none;
  font-size      : 20px;
  font-weight    : 600;
}

/* end join page */


/* start contact page */

.contact_text {
  width           : 100%;
  text-align      : center;
  background-color: #F8F9FA;
  padding-top     : 30px;
  padding-bottom  : 20px;
}

.contact_text h1 {
  font-size  : 35px;
  font-family: 'Play', sans-serif;
}

.contact_text p {
  font-size: 17px;
  color    : #8492a6;
}

.btn1_contact {
  color           : white;
  border          : 0px;
  border-radius   : 10%;
  background-color: #3d57a8;
  padding-top     : 5px;
  padding-bottom  : 5px;
  padding-left    : 20px;
  padding-right   : 20px;
}

.btn1_contact:hover {
  background-color: #0078ff;
  transition: 0.7s;
}

.contact_us {
  background-color: #202942;
  padding-top     : 30px;
  padding-bottom  : 20px;
}

.contact_us .icon_contact1 {
  color    : #8f3da8;
  font-size: 25px;
}

.contact_us h4 {
  color      : white;
  font-size  : 25px;
  padding-top: 10px;
  font-family: 'Alkatra', cursive;
}

.contact_us a {
  text-decoration: none;
  color          : #8492a6;
}

.icon_contact2 {
  border       : #8492a6 solid 1px;
  width        : 40px;
  height       : 40px;
  font-size    : 22px;
  border-radius: 15%;
  cursor       : pointer;
  padding-top  : 8px;
}

.icon_contact2:hover {
  background-color: #3D57A8;
  color           : #fff;
  transition      : 0.7s;
  border          : transparent;
}

/* end contact page */

/* start copy-right page */

.copy_right {
  width           : 100%;
  background-color: #171D2F;
  font-weight     : 700;
}

.copy_text {
  color: #A1A8B1;
}

.copy_right a{
  text-decoration: none;
}

/* end copy-right page */


/*start scroll */

::-webkit-scrollbar {
  width: 9px;
  background   : #CBCBCB;
}

::-webkit-scrollbar-track {
  border-radius: 18px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb {
  background   : #6c757d;
  border-radius: 15px;
}

::-webkit-scrollbar-thumb:hover{
  background-color: #3D57A8;
}

/* end scroll */

/* start loading page */

.loading {
  position        : fixed;
  z-index         : 99999;
  top             : 0;
  bottom          : 0;
  left            : 0;
  right           : 0;
  background-color: white;
  display         : flex;
  justify-content : center;
  align-items     : center;
}

.loader,
.loader:before,
.loader:after {
  border-radius      : 50%;
  width              : 2.5em;
  height             : 2.5em;
  animation-fill-mode: both;
  animation          : bblFadInOut 3s infinite ease-in-out;
}

.loader {
  color          : #3d57a8;
  font-size      : 7px;
  position       : relative;
  text-indent    : -9999em;
  transform      : translateZ(0);
  animation-delay: -0.16s;
}

.loader:before,
.loader:after {
  content : '';
  position: absolute;
  top     : 0;
}

.loader:before {
  left           : -3.5em;
  animation-delay: -0.32s;
}

.loader:after {
  left: 3.5em;
}

@keyframes bblFadInOut {

  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em
  }

  40% {
    box-shadow: 0 2.5em 0 0
  }
}

/* end loading page */