::-moz-placeholder {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 10px;
}
* {
  padding: 0px;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 21px;
  background-color: transparent;
  text-decoration: none;
}

blockquote.w3-panel {
  margin-bottom: 0px !important;
  margin-top: 25px;
}

/*to Flex happen correctly*/

/*Navigation ------------------------------------------*/
/* Add a black background color to the top navigation */
.Navbar {
  /*width: 80%;*/
  /*position: relative;*/
  margin-left: 122px;
  -webkit-text-stroke: 1px #465862;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.Navbar a {
  color: transparent;
  padding: 28px 16px;
  text-align: center;
  vertical-align: middle;
  float: left;
  display: block;
  text-align: center;
}

/*Click Property*/
a:-webkit-any-link {
  text-decoration: none;
  -webkit-text-stroke: 1px #465862;
}

a:hover {
  color: #465862;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: green;
  size: 100px;
  text-decoration: underline;
}

/*The Current page*/
.Navbar a.Current {
  color: red;
  text-decoration: none;
}

/* Hide the link that should open and close the Navbar on small screens */
.Navbar .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that
 contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .Navbar a:not(:first-child),
  .dropdown .dropbtn {
    display: none;
  }

  .Navbar {
    margin-left: 14px;
  }
  .Navbar a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the Navbar with JavaScript when the user clicks on the icon. This class makes the
 topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .Navbar.responsive {
    position: relative;
  }
  .Navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .Navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .Navbar.responsive .dropdown {
    float: none;
  }
  .Navbar.responsive .dropdown-content {
    position: relative;
  }
  .Navbar.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
/*Navigation ------------------------------------------*/

/*The only DropDown ------------------------------------------*/

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: transparent;
  padding: 28px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: transparent;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/*Text of the DropDown*/
.dropdown-content a {
  padding: 10px 12px;
  text-decoration: none;
  text-align: left;
  display: block;
  color: transparent;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a:hover {
  background-color: whitesmoke;
}

/*Position all blocks ------------------------------------------*/
.All {
  position: relative;
  height: 92vh;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.Main {
  position: absolute;
  height: 90vh;
  width: 95%;
}

.Side {
  width: 5%;
  height: 90vh;
  float: right;
}

/*!*Main----------------------------------------------------------------------------*!*/
/* The string picture in middle*/
#String {
  position: absolute;
  width: 462px;
  height: 447px;
  right: 35%;
  top: 160px;
  z-index: -1;
}

#SingleString1 {
  position: absolute;
  width: 243px;
  height: 125px;
  left: 25%;
  top: 258px;
  background: url("asset/pendara home page-14.png");
  background-size: cover;
  z-index: -1;
}

#SingleString2 {
  position: absolute;
  width: 234.35px;
  height: 208.53px;
  left: 58%;
  top: 353px;
  background: url("asset/pendara home page-13.png");
  background-size: cover;
  transform: rotate(-13.72deg);
  z-index: -1;
}

#LeftString {
  position: absolute;
  width: 177px;
  height: 161px;
  left: 16%;
  top: 159px;
  z-index: -1;
}

#RightString {
  position: absolute;
  width: 177px;
  height: 161px;
  right: 15%;
  top: 410px;
  transform: rotate(90deg);
  z-index: -1;
}
/*------------------------------------------------------------------------------------*/

#Circle:hover {
  transform: scale(1.01);
}
#Circle {
  position: absolute;
  width: 284px;
  height: 284px;
  right: 40%;
  top: 240px;
  border-radius: 50%;
  -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
  animation: mymove 5s infinite;
  background-image: url("asset/Logo.png");
  background-size: cover;
  background-position: center;
  background-color: white;
  box-shadow: 3px 5px 4px 2px #45658b;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  50% {
    box-shadow: 0px 3px 2px 1.5px #1da366;
  }
}

@keyframes mymove {
  50% {
    box-shadow: 0px 3px 2px 1px #1da366;
  }
}

/*------------------------------------------------------------------------------------*/

#LeftCircle {
  position: absolute;
  width: 110px;
  height: 110px;
  left: 18%;
  top: 181px;
  border-radius: 50%;
  -webkit-animation: mymove2 3s infinite; /* Safari 4.0 - 8.0 */
  animation: mymove2 3s infinite;
  background-image: linear-gradient(to left, white, whitesmoke);
  box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.51);
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 16px;
  text-transform: capitalize;
}
@-webkit-keyframes mymove2 {
  50% {
    box-shadow: 0px 3px 2px 1.5px rgba(45, 18, 47, 0.51);
  }
}

@keyframes mymove2 {
  50% {
    box-shadow: 0px 3px 2px 1.5px rgba(45, 18, 47, 0.51);
  }
}

#LeftCircleContent {
  position: absolute;
  width: 80px;
  height: 16px;
  left: 19%;
  top: 229px;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 16px;
  text-transform: capitalize;
  color: #465862;
  text-decoration: none;
}

/*------------------------------------------------------------------------------------*/

#RightCircle {
  position: absolute;
  width: 110px;
  height: 110px;
  right: 19%;
  top: 409px;
  border-radius: 50%;
  -webkit-animation: mymove3 3s infinite; /* Safari 4.0 - 8.0 */
  animation: mymove3 3s infinite;
  background-image: linear-gradient(to right, white, whitesmoke);
  box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.51);
}
@-webkit-keyframes mymove3 {
  50% {
    box-shadow: 0px 3px 2px 1.5px rgba(61, 63, 65, 0.51);
  }
}

@keyframes mymove3 {
  50% {
    box-shadow: 0px 3px 2px 1.5px rgba(61, 63, 65, 0.51);
  }
}
#RightCircleContent {
  position: absolute;
  width: 70px;
  height: 16px;
  right: 19%;
  top: 459px;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 16px;
  text-transform: capitalize;
  color: #465862;
  text-decoration: none;
}

/*------------------------------------------------------------------------------------*/

/*#LeftCircle:hover {*/
/*    transform: scale(1.02);*/
/*}*/

#LeftCircleContent:hover {
  transform: scale(1.02);
}
/*#RightCircle:hover {*/
/*    transform: scale(1.02);*/

/*}*/
#RightCircleContent:hover {
  transform: scale(1.02);
}

/*------------------------------------------------------------------------------------*/
/*------------------------------------Page About--------------------------------------*/

.WhiteBox {
  position: absolute;
  width: 50%;
  min-height: 430px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 120px;
  background: rgba(255, 255, 255, 0.9);
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 21px;
  color: #465862;
}

.WhiteBox > p {
  position: absolute;
  width: 90%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 138px;
  bottom: 30%;
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  text-justify: auto;
  line-height: 20px;
  overflow: scroll;
}

#Pendara {
  position: absolute;
  max-width: 210px;
  width: 70%;
  /*To center this element in the white box*/
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 47px;
}
#AboutImg {
  position: absolute;
  width: 829.49px;
  height: 761px;
  left: -13px;
  transform: rotate(-46.43deg);
  z-index: -1;
}

#AboutImg2 {
  position: absolute;
  width: 829.49px;
  height: 761px;
  left: 689.65px;
  transform: rotate(135deg);
  z-index: -1;
}

.Buttons {
  color: #465862;
  position: absolute;
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  width: 60%;
  top: 80%;
  /*To center this element in the white box*/
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-around;
}

@media screen and (max-width: 600px) {
  .Buttons {
    top: 80%;
    text-decoration: none !important;
  }
}

.Button1 {
  position: absolute;
  background: transparent;
  min-width: 160px;
  width: 45%;
  height: 50px;
  border: 2px solid #49a790;
  box-sizing: border-box;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 21px;

  /* identical to box height */
  text-transform: capitalize;
}
.Button2 {
  background: transparent;
  right: 0px;
  min-width: 160px;
  margin-top: 3px;
  width: 45%;
  height: 50px;
  border: 2px solid #389c93;
  box-sizing: border-box;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 21px;

  /* identical to box height */
  text-transform: capitalize;
}

.ButText {
  color: #465862;
}

/*------------------------------------Page About--------------------------------------*/
/*------------------------------------Page SAY & Wiki Event--------------------------------------*/

#WikiEvent {
  position: absolute;
  height: 42px;
  top: 117px;
  left: 23px;
}

#WikiEvent > h1 {
  display: inline-block;
  font-size: 36px;
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  line-height: 42px;
  margin-right: 14px;
  text-transform: capitalize;
  color: #547274 !important;
}

.WhiteBox > .SecondP {
  position: absolute;
  width: 60%;
  min-height: 130px;
  left: 5%;
  top: 187px;
  bottom: 35%;
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  text-align: justify;
  color: #465862;
  overflow: scroll;
}

#AboutImg {
  position: absolute;
  width: 829.49px;
  height: 761px;
  left: -13px;
  transform: rotate(-46.43deg);
  z-index: -1;
}

#AboutImg2 {
  position: absolute;
  width: 829.49px;
  height: 761px;
  left: 689.65px;
  transform: rotate(135deg);
  z-index: -1;
}

.SidePic {
  position: absolute;
  width: 30%;
  right: 0%;
  top: 124px;
  background-size: cover;
}

#Web {
  position: absolute;
  width: 147px;
  height: 21px;
  left: 23px;
  bottom: 15%;
  font-family: Roboto;
  font-weight: lighter;
  font-size: 18px;
  line-height: 21px;

  /* identical to box height */
  text-transform: lowercase;

  color: #000000;
}
/*------------------------------------Page SAY & Wiki Event--------------------------------------*/
/*------------------------------------Contact--------------------------------------*/

.WhiteBox > h2 {
  position: absolute;
  height: 21px;
  left: 5%;
  top: 45px;
  font-weight: 500;
  font-size: 18px;
  line-height: 21px;
  /* identical to box height */
  text-transform: capitalize;
  color: #465862 !important;
}

form {
  text-align: center;
}

input,
textarea {
  padding: 5px;
}
.Boxes {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  height: 52px;
  width: 100%;
  top: 87px;
}
#LeftBox {
  background: transparent;
  width: 45%;
  height: 52px;
  left: 0;
  padding: 10px;
  margin-left: auto;
  margin-right: 1px;
  margin-bottom: 5px;
  border: 1px solid #465862;
  box-sizing: border-box;
}

#RightBox {
  background: transparent;
  width: 45%;
  height: 52px;
  right: 0;
  padding: 10px;
  margin-left: 1px;
  margin-right: auto;
  margin-bottom: 5px;
  border: 1px solid #465862;
  box-sizing: border-box;
}

#BigBox {
  background: transparent;
  width: 90%;
  height: 150px;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid #465862;
  resize: none;
  margin-bottom: 10px !important;
  margin-left: auto;
  margin-right: auto;
}

.contactbut {
  width: 50%;
  height: 52px;
  left: 0;
  right: 0;
  bottom: 10%;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(158, 221, 128, 0.71);
  border: 1px solid #9edd80;
  font-family: Roboto;
  font-style: normal;
  color: #ffffff;
  font-weight: 500;
  font-size: 18px;
  line-height: 21px;
  box-sizing: border-box;
  text-transform: capitalize;
}

.aboutbut {
  position: absolute;
  width: 50%;
  height: 52px;
  left: 0;
  right: 0;
  bottom: 10%;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(158, 221, 128, 0.71);
  border: 1px solid #9edd80;
  font-family: Roboto;
  font-style: normal;
  color: #ffffff;
  font-weight: 500;
  font-size: 18px;
  line-height: 21px;
  box-sizing: border-box;
  text-transform: capitalize;
}
/*------------------------------------Contact--------------------------------------*/

#Instagram {
  position: absolute;
  width: 22px;
  height: 22px;
  top: 338px;
}
#LinkedIn {
  position: absolute;
  width: 21px;
  height: 22px;
  top: 393px;
}
#Facebook {
  position: absolute;
  width: 21px;
  height: 22px;
  top: 448px;
}

#Instagram:hover {
  transform: scale(1.2);
}

#Facebook:hover {
  transform: scale(1.2);
}

#LinkedIn:hover {
  transform: scale(1.2);
}

/*------------------To remove extra element in mobile and  center Index Page--------------------*/
@media only screen and (max-width: 600px) {
  .Main {
    position: relative;
    float: left;
    width: 90%;
  }

  .Side {
    position: relative;
    width: 10%;
    height: 90vh;
    float: right;
  }
  #LeftCircle,
  #LeftCircleContent,
  #RightCircle,
  #RightCircleContent,
  #SingleString1,
  #SingleString2,
  #LeftString,
  #RightString,
  #Circle:hover,
  #AboutImg,
  #AboutImg2 {
    display: none;
  }

  #Circle {
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  #String {
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}
/*------------------To remove extra element in mobile and  center Index Page--------------------*/
/*------------------To remove extra element in mobile and  center WikiEvent Page--------------------*/
@media only screen and (max-width: 600px) {
  .WhiteBox {
    position: relative;
    margin: auto;
    top: 0;
    height: 90%;
    width: 90%;
  }

  .WhiteBox > p {
    width: 90%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    overflow: scroll;
  }

  #WikiEvent {
    position: absolute;
    text-align: center;
    width: 100%;
    left: 0;
  }

  .WhiteBox > .SecondP {
    width: 90%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    overflow: scroll;
    text-align: left;
  }

  .SidePic {
    top: 70%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }

  #Web {
    bottom: 5%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }

  #LeftBox,
  #RightBox {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}
/*------------------To remove extra element in mobile and  center WikiEvent Page--------------------*/