html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  background-color: #fcfcfc
  
}

 .background1, .background2, .background3{

  height: 95vh;
  width: 100%;
  object-fit: cover;
  background-color: rgba(114,160,193,0.9);
}


.slider{
  width: 100%;
  height: 92vh;

  overflow: hidden;
}

.slides{
 width: 500%;
height: 92vh;
  display: flex;
}

.slides input{
  display: none;
}

.slide{
  width: 20%;
  transition: 2s;
}

.slide img{
  width: 100%;
  height: 92vh;
  object-fit: cover;
}

/*css for manual slide navigation*/

.navigation-auto{
  position: absolute;
  width: 800px;
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.auto-btn1, .auto-btn2, .auto-btn3{
  border: 2px solid #40D3DC;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}

.navigation-auto:not(:last-child) {
  margin-right: 40px;
}

 .auto-btn1:hover{
  background: #40D3DC;
  cursor: pointer;
}

.auto-btn2:hover{
  background: #40D3DC;
  cursor: pointer;
}

.auto-btn3:hover{
  background: #40D3DC;
  cursor: pointer;
}

/* #radio1:checked ~ .first{
  margin-left: 0;
}

#radio2:checked ~ .first{
  margin-left: -20%;
}

#radio3:checked ~ .first{
  margin-left: -40%;
}  */


/*css for automatic navigation*/

.navigation-auto{
  position: absolute;
  display: flex;
  width: 800px;
  justify-content: center;
  margin-top: 460px;
}

.navigation-auto div{
  border: 2px solid #40D3DC;
  padding: 5px;
  border-radius: 10px;
  transition: 1s;
}

.navigation-auto div:not(:last-child){
  margin-right: 40px;
}

/* #radio1:checked ~ .navigation-auto .auto-btn1{
  background: #40D3DC;

}

#radio2:checked ~ .navigation-auto .auto-btn2{
  background: #40D3DC;

}

#radio3:checked ~ .navigation-auto .auto-btn3{
  background: #40D3DC;

} */

#radio1:checked ~ .first{
  margin-left: 0;
}

#radio2:checked ~ .first{
  margin-left: -20%;
}

#radio3:checked ~ .first{
  margin-left: -40%;
} 


.nb{
  width: 100%;
  height: 75px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
}

.logo{
  position: absolute;
  top: 10px;
  left: 30px;
  cursor: pointer;
}

.navmenu{
  position: sticky;
  top: 39px;
  text-align: center;
  line-height: 3.5px;
  
}

.navmenu a{
  text-decoration: none;
  padding: 2%;
  color: black;
  font-size: 17px; 
  border-right: 2px #000000;
  font-family: Helvetica;


}

.navmenu a:last-of-child{
  border-right: none
}

.background{
  margin: auto;
}
.bdesc{
/*   height: 45% */
  background-color: rgba(89, 168, 221, 0.9);
  padding-bottom: 20px;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 5%;
/*   border-radius: 40px; */

  

}

.name{
/*   position: absolute;
  left:6%; 
  top: 30%; */
  font-size: 55px ;
  margin: 0%;
/*   height:300px; */
/*   width: 1500px */
/*   width: 700px; */
  display: inline-block;
  vertical-align: middle;
  padding-left: 3%;
  padding-top: 3%;
  
  text-align: center;
  position: relative;
  
}

.ms{

/*   position: absolute;
  left: 6%;
  top: 45%; */
/*   margin-top: 30px; */
/*   width:650px; */
  line-height: 2.3rem;
  display: inline-block;
  vertical-align: middle;
  padding-left: 2%;
  text-align: center;
  font-size: 23px;
  position:relative;
  padding-right: 2% ;

}


.pre, .next{
  cursor: pointer;
  position: absolute;
  top: 50%;
 
  width: auto;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  padding: 16px;

  color: #fff
}

.next{
  border-radius: 3px 0 0 3px;
  right: 0;
}

.pre:hover, .next:hover{
  background-color: rgba(0,0,0,0.8);
  color: #fff
}

.currentevnt{

  width: 60%;
  height: 60px;
  border-radius: 60px;
  border: none;
  background-color: #B9BCE6;
  box-shadow: inset 100% 0 0 0 0 #B9BCE6;
  transition: ease-out 0.2s;
  cursor: pointer;
  margin: auto;
  margin-bottom: 20px;
  font-size: 20px  
  


}

.currentevnt:hover{
  box-shadow: inset 700px 0 0 0 #B9CDE6
}

.mpl{
  display: flex;
  flex-direction: row
}

.message{
  display: flex;
  justify-content: center;
  margin-left: 2.7%;
  margin-top: 3%;
  box-sizing: border-box;
  padding: 28px;
  background-color: #b9cde6
}

.message h2{
  display: flex;
  vertical-align: middle;
  margin-left: 2.5%;
}

.hm h1{
  text-align: center;
  font-size: 40px;
  font-family: 'Belleza';
/*   padding: 20px */
}

.hm{
  padding-bottom: 79px;
  padding-top: 0px;
/*   background-color: #c7c7c7 */

}

.mp{
  border-radius: 50%;
/*   margin-left: 8%;
  padding-top: 7%;
  padding-bottom:7%; */
  border: 6px solid #ffffff;
}

.message h2{
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

.ua h1{
  text-align: center;
  font-size: 40px;
  font-family: 'Belleza';

 
  
}


iframe{
  padding-bottom: 3%;
  padding-top: 3%
}

.photos h1{
  text-align: center
}


.bottom-info{
  background-color: #b0b6e8;
  width: 100%;
  height: auto;
/*   padding-bottom: 2%; */
  overflow: auto;

}
.tcinfo{
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: Belleza
}

.tin{
  width: 29%;
  margin-left: 2%;
  border-left: 7px solid #fff;
  border-radius: 50%;
  border-right: 10px solid #fff;
  border-radius: 50%
}


#container, #container2{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;

}

#container2{
  flex-direction: row;
  
}

.ael{
  padding-right: 3%
}



button {

  position: relative;
  margin: auto;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: 15px;
  font-family: Belleza;
  text-align: center;
  margin-top: 10%
  
}

button.vt, button.ael {
  width: 13rem;
  height: auto;
}
button.vt .circle , button.ael .circle{
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: #a9a8f0;
  border-radius: 1.625rem;
}
button.vt .circle .icon , button.ael .circle .icon{
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}
button.vt .circle .icon.arrow , button.ael .circle .icon.arrow{
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
button.vt .circle .icon.arrow::before, button.ael .circle .icon.arrow::before{
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
button.vt .button-text, button.ael .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: #282936;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}
button:hover .circle {
  width: 100%;
}
button:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(1rem, 0);
}
button:hover .button-text {
  color: #fff;
}





@media only screen and (max-width: 613px) and (min-width: 360px){
  .main{
    z-index: 0;
    margin-top: -60px
  }

  html, body{
    width: 100%;
    margin:0%;
    padding: 0%
  }
  body{
    width:100%;
    height:100%;
    margin:0px;
    padding: 0px;
    text-align: center
  }
  .logo{
    position: absolute;
    top: 10px;
    left: 30px;
    font-size: 25px;
  }

  .navmenu{
    display: flex;
    width: 100%
  }


  .nb{
    width: 100%;
    border-bottom: none;
    display: block;
    z-index: 1;
    height: 100%;
    
  }

  .background{
    background: rgba(60,60,60,0.8)url("733834.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: darken; 
    height: 92vh;
  }

  .name{
    font-size:40px;
    text-align: center;

  } 
  .ms{
    font-size: 15px;
    text-align: center;
    vertical-align: middle;

  }

  .bdesc{
    left: 0px;
    width: 100%;
    top: 25%
  }



  .pre{
    position: absolute;
    left: 0px
  }

  .currentevnt{
/*     width: 270px; */
    height: 60px;
/*     position: relative; */
/*     top: 540px; */
    bottom: auto;
    left: auto;
    text-align: center;
    text-decoration: none;
    color: #212121
  }

  .statement{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 100px;
  }


 .navbar {
  width: 100%;
  box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
}

  .nb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 62px;
    cursor: pointer
  }
  
  .navbar .navmenu {
    display: flex;
  }
  
  .navbar .nb a {
    text-decoration: none;
    color: #0e2431;
    font-weight: 700;
    font-size: 2rem;
    padding: 2rem;
  }

  .navbar .navmenu a:hover{
    font-weight: bolder;
  }
  
  .nb {
    display: block;
    position: relative;
    height: 60px;
    box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
  }
  
  .nb .checkbox {
    position: absolute;
    display: block;
    height: 32px;
    width: 32px;
    top: 20px;
    left: 80%;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
  }
  .main .checkbox {
    position: absolute;
    display: block;
    height: 32px;
    width: 32px;
    top: 20px;
    left: 85%;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
  }


.nb .hamburger-lines {
  display: block;
  height: 26px;
  width: 32px;
  position: absolute;
  top: 26px;
  left: 80%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nb .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: #0e2431;
}

.nb .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.nb .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.nb .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

 .navmenu  {
  padding-top: 120px;
/*   box-shadow: inset 0 0 2000px rgb(0, 0, 0); */
  background-color: #ffffff;
  height: 100vh;
  width: 97.5%;
  transform: translate(-150%);
  display: flex;
  flex-direction: column;
  
  margin-left: -40px;
  padding-left: 50px;
  transition: transform 0.5s ease-in-out;
  text-align: center;
  
  position: absolute;
  top: 60px
  }

    .navmenu a{
    text-decoration: none;
    padding: 25px;
    color: black;
    font-size: 25px; 
    text-align: center
  }


  .nb input[type="checkbox"]:checked ~ .navmenu {
    transform: translateX(0);
  }
  
  .nb input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
    transform: rotate(45deg);
  }
  
  .nb input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
    transform: scaleY(0);
  }
  
  .nb input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
    transform: rotate(-45deg);
  }
  
/*   .nb input[type="checkbox"]:checked ~ .logo{
    display: none;
  } */
  .logo{
    width: 45px;
    height: 45px
  }

  .hm{
    position: relative;
    padding-top: 10%
  }

  .message{
    display: flex;
    flex-direction: column;
    margin-left: 0px;
    width: 100%
  }

  .mpl{
    display: flex;
    flex-direction: column;
    width: 100%
  }

  .mp{
    display: flex;
    margin: auto;
    justify-content: center;
  }

  #container2{
    flex-direction: column;
  }

  .tcinfo{
    flex-direction: column
  }




}

@media only screen and (min-width:613px) and (max-width: 1080px){
  .hamburger-lines{
    display: none
  }

  .checkbox{
    display:none
  }

  .nb{
    width: 100%
  }

  .name{
/*     width: 85%; */
    text-align: center;
/*     position: absolute;
    top:20% */
    
  }

  .ms{
    text-align: center;
/*     width: 85%; */
    margin-top: 0px
  }

  .currentevnt{
    margin: 0 auto;
/*     position: absolute; */
    
  }

  .message{
    display: flex;
    flex-direction: row;
    margin-left: 0px
  }

  .mpl{
    display: flex;
    flex-direction: column;
    margin-left: 0px
  }



 
}

@media only screen and (min-width:701px){
    .hamburger-lines{
    display: none
  }

  .checkbox{
    display:none
  }
    .nb{
    width: 100%
  }
}

@media only screen and (min-width:1000px){
  .bdesc{
    width: 55%
  }
}

@media only screen and (max-width: 999px){
  .bdesc{
    left: 0%;
    width: 100%
  }
}



/* @media only screen and (min-width:613px){
  .tin{
    text-align: center;
  }
  .bottom-info{
    text-align:center;
  }
} */