*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

.center{

  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;

}

.sect1 .nas span{
  font-size: 25px;
  color: #65298b;
}

/* Splash screen */

.intro{
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #a0daf2;
    transition: 0.5s;

}

.logo-header{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
}

.logo{
    position: relative;
    display: inline-block;
    bottom: -20px;
    opacity: 0;
}

.logo.active{
    bottom: 0;
    opacity: 1;
    transition: ease-in-out 0.5s;
}

.logo.fade{
    bottom: 150px;
    opacity: 0;
    transition: ease-in-out 0.5s;
}


/* animation #d2bddf*/
body {

    background-color: #a0daf2;
     width: 100%;
     height: 100%;
     min-width: 1000px;
    min-height: 1000px;
    margin: 0 auto;
  }

  .sect1{
    background-color: white;
    display: block;
    min-width: 100px;
    min-height: 100px;
    margin: 0 auto;
    margin-top: 5%;
    border: 1px solid;
    padding: 5px;
    width: 99%;
    height: 550px;
    box-shadow: 5px 10px;
  }
  .sect1 .vid1{
    background-color: #a0daf2;
    border-radius: 8px;
    float: right;
    margin: 0 auto;
    position: relative;
    border: 1px solid #ddd;
    padding: 5px;
}

.onwan {
    top: auto;
    color: #65298b;
    margin-right: 30%;
    text-align: center;
    font-size: 2.5em;
  
    transition: width 2s;
    background: linear-gradient(
    to right,
    #fc72ff,
    #8f68ff,
    #65298b,
    #8f68ff,
    #fc72ff
  );
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate-gradient 2.5s linear infinite;
  }
  @keyframes animate-gradient {
    to {
      background-position: 200%;
    }
  }
  .sect10 .onwan6{
    font-family: "Poppins", sans-serif;
    text-align: center;
    color: #65298b;
    text-transform: uppercase;
    float: right;
    font-size: 4em;
   
    position: absolute;
    top: 30px;
    background: linear-gradient(
    to right,
    #fc72ff,
    #8f68ff,
    #65298b,
    #8f68ff,
    #fc72ff
  );
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate-gradient 2.5s linear infinite;
}

@keyframes animate-gradient {
  to {
    background-position: 200%;
  }
}

  .sect7 .onwan5{
    font-family: "Poppins", sans-serif;
    text-align: center;
    color: #65298b;
    text-transform: uppercase;
    float: right;
    font-size: 2.5em;
   
    position: absolute;
    top: 30px;
    background: linear-gradient(
    to right,
    #fc72ff,
    #8f68ff,
    #65298b,
    #8f68ff,
    #fc72ff
  );
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate-gradient 2.5s linear infinite;
}

@keyframes animate-gradient {
  to {
    background-position: 200%;
  }
}


  .nas{
    display: block;
    min-width: 100px;
    min-height: 100px;
    margin: 0 auto;
    position: relative;
    top: 60px;
    margin-right: 33%;
    font-size: 18px;
    text-align: center;
    font-family: "Noto Kufi Arabic", serif;
    font-optical-sizing: auto;
  }


  .sect2{
    background-color: white;
    display: block;
    min-width: 100px;
    min-height: 100px;
    position: relative;
    top: 100px;
    margin: 0 auto;
    border: 1px solid;
    padding: 5px;
    width: 99%;
    height: 550px;
    box-shadow: 5px 10px;
  }
  .onwan2{
    text-align: center;
    color: #65298b;
    position: relative;
    top: 50px;
    font-size: 2em;
    transition: width 2s;
    background: linear-gradient(
    to right,
    #fc72ff,
    #8f68ff,
    #65298b,
    #8f68ff,
    #fc72ff
  );
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate-gradient 2.5s linear infinite;
  }
  @keyframes animate-gradient {
    to {
      background-position: 200%;
    }
  }
.sect2 .btn1{
    margin: 0 auto;
    position: relative;
    top: 70px;
    left: 45%;
    background-color: #65298b;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.sect2 .btn1:hover{
    background-color: #a0daf2;
    color: rgb(0, 0, 0);
}




  .sect3{
    display: block;
    position: relative;
    top: 50px;
    margin: 0 auto;
    margin-right: 30%;
  }


.sect5{
     background-color: white;
    display: block;
    min-width: 100px;
    min-height: 100px;
    margin: 0 auto;
    border: 1px solid;
    padding: 5px;
    top:50px;
    height: 550px;
    box-shadow: 5px 10px;
    position: relative;
  }
  .sect5 .immg{
    float: right;
    height: 433px;
    background-color: #a0daf2;
    border-radius: 8px;
    float: right;
    margin: 0 auto;
    border: 1px solid #ddd;
    padding: 5px;

  }
  .sect5 .immg1{
    width: 10%;
    height: auto;
    margin: 0 auto;
    display: block;

  }
  .sect5 .vid1{
    background-color: #a0daf2;
    border-radius: 8px;
    float: left;
    margin: 0 auto;
    border: 1px solid #ddd;
    padding: 5px;
}

.onwan3 {
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
    top: auto;
    color: #65298b;
    
    text-align: center;
    font-size: 2.5em;
    transition: width 2s;
    background: linear-gradient(
    to right,
    #fc72ff,
    #8f68ff,
    #65298b,
    #8f68ff,
    #fc72ff
  );
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate-gradient 2.5s linear infinite;
  }
  @keyframes animate-gradient {
    to {
      background-position: 200%;
    }
  }

  .nas3{
    display: block;
    min-width: 100px;
    min-height: 100px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    font-size: 30px;
    text-align: center;
    font-family: "Noto Kufi Arabic", serif;
    font-optical-sizing: auto;
  }
  /*
  .sect5 .img1{
    max-width: 50px;
    min-width: 100px;
    min-height: 100px;
    display: block;
    margin: 0 auto;
    margin-right: 33%;
    position: relative;
    top: 50px;
    left: 200px;
  }
     */
 /* .sect5 .img2{
    max-width: 50px;
    min-width: 100px;
    min-height: 100px;
    display: block;
    margin: 0 auto;
    margin-right: 33%;
    position: relative;
    bottom: 40px;
    right: 200px;
  
  }
     */
  /*@media only screen and(max-width:1217px) {
 .img2{
      margin-right: 25%;
    }
   
  }
     */
     
.row {
  margin: 0 auto;
  display: flex;
  margin-left: 53%;
    margin-right: auto;
}

/* Create three equal columns that sits next to each other */
.column {
  flex: 33.33%;
  padding: 5px;
}
  @media only screen and (max-width: 1098px) {
    .sect1 .nas {
        font-size: 15px;
    }
    ul{
       position: relative;
       right: 50px;
    }
  }
  @media only screen and (max-width: 1098px) {
    .sect1, .sect2, .sect5 , .sect17 , .sect16 {
        width: 120%;
    }
   .center{
    display: block;
    margin-left: 40%;
    margin-right: auto;
    width: 40%;
   }
   
  }
  @media only screen and (max-width: 1098px) {
    .sect6, .sect7, .sect8, .sect9, .sect10 , .sect11, .sect4-3, .sect12, .sect13, .sect14, .sect22, .sect19, .sect20, .sect15 {
        width: 120%;
        
    }
}
.sect10{
  background-color: white;
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  margin-top: 7%;
  border: 1px solid;
  padding: 5px;
  height: 450px;
  box-shadow: 5px 10px;
  position: relative;
}
.sect7{
  background-color: white;
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  margin-top: 7%;
  border: 1px solid;
  padding: 5px;
  height: 450px;
  box-shadow: 5px 10px;
  position: relative;
}
.sect8{
  background-color: white;
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  border: 1px solid;
  padding: 5px;
  height: 450px;
  box-shadow: 5px 10px;
  position: relative;
}
.sect8 video{
  background-color: #a0daf2;
  border-radius: 8px;
  float: left;
  margin: 0 auto;
  border: 1px solid #ddd;
  padding: 5px;
}
.sect8 h1{
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  position: absolute;
  top: 100px;
  color: #65298b;
  margin-left: 60%;
  text-align: center;
  font-size: 2em;
  position: absolute;
  top: 200px;
    background: linear-gradient(
    to right,
    #fc72ff,
    #8f68ff,
    #65298b,
    #8f68ff,
    #fc72ff
  );
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate-gradient 2.5s linear infinite;
}

@keyframes animate-gradient {
  to {
    background-position: 200%;
  }
}

.sect9 {
  background-color: white;
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  border: 1px solid;
  padding: 5px;
  height: 450px;
  box-shadow: 5px 10px;
  position: relative;
}
.sect9 video{
  background-color: #a0daf2;
  border-radius: 8px;
  float: right;
  margin: 0 auto;
  border: 1px solid #ddd;
  padding: 5px;
}
.sect9 h1{
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  margin-left: 40px;
  position: absolute;
  top: 100px;
  color: #65298b;

  text-align: center;
  font-size: 1.7em;
  position: absolute;
  top: 200px;
  background: linear-gradient(
  to right,
  #fc72ff,
  #8f68ff,
  #65298b,
  #8f68ff,
  #fc72ff
);
background-size: 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animate-gradient 2.5s linear infinite;
}

@keyframes animate-gradient {
to {
  background-position: 200%;
}
}

.sect6 .nas8{
    display: block;
    min-width: 100px;
    min-height: 100px;
    margin: 0 auto;
    position: relative;
    top: 50px;
    margin-left: 33%;
    font-size: 20px;
    text-align: center;
    font-family: "Noto Kufi Arabic", serif;
    font-optical-sizing: auto;
}
.sect6 .nas88{
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  position: relative;
  top: 20px;
  margin-left: 33%;
  font-size: 16px;
  text-align: center;
  font-family: "Noto Kufi Arabic", serif;
  font-optical-sizing: auto;
}
.sect6 span{
  color: #65298b;
  font-size: 25px;
}
.sect6 .onwan8{
  top: auto;
  color: #65298b;
  margin-left: 30%;
  text-align: center;
  font-size: 2.5em;
 
  transition: width 2s;
  background: linear-gradient(
  to right,
  #fc72ff,
  #8f68ff,
  #65298b,
  #8f68ff,
  #fc72ff
);
background-size: 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animate-gradient 2.5s linear infinite;
}
@keyframes animate-gradient {
  to {
    background-position: 200%;
  }
}
.sect6 .onwan89{
  top: auto;
  color: #65298b;
  margin-left: 30%;
  text-align: center;
  font-size: 1.9em;
 
  transition: width 2s;
  background: linear-gradient(
  to right,
  #fc72ff,
  #8f68ff,
  #65298b,
  #8f68ff,
  #fc72ff
);
background-size: 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animate-gradient 2.5s linear infinite;
}
@keyframes animate-gradient {
  to {
    background-position: 200%;
  }
}
.sect6 .onwan88{
  top: auto;
  color: #65298b;
  margin-left: 30%;
  text-align: center;
  font-size: 1.5em;
 
  transition: width 2s;
  background: linear-gradient(
  to right,
  #fc72ff,
  #8f68ff,
  #65298b,
  #8f68ff,
  #fc72ff
);
background-size: 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animate-gradient 2.5s linear infinite;
}
@keyframes animate-gradient {
  to {
    background-position: 200%;
  }
}
.sect6 .vid1{
  background-color: #a0daf2;
  border-radius: 8px;
  float: left;
  margin: 0 auto;
  position: relative;
  border: 1px solid #ddd;
  padding: 5px;
}
.sect6 .vid11{
  background-color: #a0daf2;
  border-radius: 8px;
  float: left;
  margin: 0 auto;
  position: relative;
  bottom: 25px;
  border: 1px solid #ddd;
  padding: 5px;
}

  .sect6{
    background-color: white;
    display: block;
    min-width: 100px;
    min-height: 100px;
    margin: 0 auto;
    margin-top: 7%;
    border: 1px solid;
    padding: 5px;
    height: 550px;
    box-shadow: 5px 10px;
  }
  .sect6 .btn1{
    margin: 0 auto;
    display: block;
    position: relative;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-291%, -390%);
    background-color: #65298b;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
  }
  /* border-radius: 50% 10% 50% 10% ; */
  .sect6 .imag2{
    background-color: #a0daf2;
    border-radius: 8px;
    float: left;
    margin: 0 auto;
    border-radius: 20% 10% 20% 10%;
    border: 1px solid #ddd;
    padding: 5px;
}

.onwan4 {
    top: auto;
    color: #65298b;
    margin-left: 30%;
    text-align: center;
    font-size: 2.5em;
   
    transition: width 2s;
    background: linear-gradient(
    to right,
    #fc72ff,
    #8f68ff,
    #65298b,
    #8f68ff,
    #fc72ff
  );
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate-gradient 2.5s linear infinite;
  }
  @keyframes animate-gradient {
    to {
      background-position: 200%;
    }
  }

  .nas4{
    display: block;
    min-width: 100px;
    min-height: 100px;
    margin: 0 auto;
    position: relative;
    top: 70px;
    margin-left: 33%;
    font-size: 20px;
    text-align: center;
    font-family: "Noto Kufi Arabic", serif;
    font-optical-sizing: auto;
  }
  .nas4 span{
    font-size: 25px ;
    color: #65298b;
  }

  ul {
    margin: 0 auto;
    position: absolute;
    top: calc(130% - 100px);
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
}

ul li {
    position: relative;
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
}

ul li span {
    position: absolute;
    top: 0;
    left: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transform: rotate(-30deg);
    color: #fff;
    font-size: 30px !important;

    transition: 0.5s all ease-in-out;
}
ul li #btn2{
    width: 100%;
    height: 100%;
    color: rgb(0, 0, 0);
    font-size: 40px;
    background-color: white;
}
ul li #btn3{
    width: 100%;
    height: 100%;
    color: rgb(0, 0, 0);
    font-size: 40px;
    text-align: center;
    background-color: white;
}
ul li + li{
    margin-left: 50px;
}

/* Cores Especificas */

ul li#facebook span:nth-child(1),
ul li#facebook span:nth-child(2) {
    background-color: #ebdfee;
}

ul li#facebook span:nth-child(3),
ul li#facebook span:nth-child(4) {
    background-color: #ba8bc3;
}

ul li#facebook span:nth-child(5) {
    background-color: #903b98;
}

/* YOUTUBE */

/* #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90% */

ul li#youtube span:nth-child(1),
ul li#youtube span:nth-child(2) {
    background-color: #ebdfee;
}

ul li#youtube span:nth-child(3),
ul li#youtube span:nth-child(4) {
    background-color: #ba8bc3;
}

ul li#youtube span:nth-child(5) {
    background-color: #903b98;
}

/* WEBSITE */

/* #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90% */

ul li#website span:nth-child(1),
ul li#website span:nth-child(2) {
    background-color: #ebdfee;
}

ul li#website span:nth-child(3),
ul li#website span:nth-child(4) {
    background-color: #ba8bc3;
}

ul li#website span:nth-child(5) {
    background-color: #903b98;
}

/* INSTAGRAM */

/* #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90% */

ul li#instagram span:nth-child(1),
ul li#instagram span:nth-child(2) {
    background-color: #ebdfee;
}

ul li#instagram span:nth-child(3),
ul li#instagram span:nth-child(4) {
    background-color: #ba8bc3;
}

ul li#instagram span:nth-child(5) {
    background-color: #903b98;
}
/* Hover Effect */

ul li:hover span:nth-child(1) {
    opacity: .5;
}

ul li:hover span:nth-child(2) {
    transform: translateY(-10px) rotate(-30deg);
}

ul li:hover span:nth-child(3) {
    transform: translateY(-20px) rotate(-30deg);
    opacity: .75;
}

ul li:hover span:nth-child(4) {
    transform: translateY(-30px) rotate(-30deg);
    background-color: #8b9dc3;
}

ul li:hover span:nth-child(5) {
    transform: translateY(-40px) rotate(-30deg);
}

/* book anim */
.book-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -69%;
  perspective: 600px;
  position: relative;
  bottom: 50px;
}

@keyframes initAnimation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-30deg);
  }
}

.book {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: 1s ease;
  animation: 1s ease 0s 1 initAnimation;
}

.book-container:hover .book, 
.book-container:focus .book {
  transform: rotateY(0deg);
}

.book > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  width: 200px;
  height: 300px;
  transform: translateZ(15px);
  background-color: #01060f;
  border-radius: 0 2px 2px 0;
  box-shadow: 5px 5px 20px #666;
}

.book::before {
  position: absolute;
  content: ' ';
  background-color: blue;
  left: 0;
  top: 1px;
  width: 28px;
  height: 298px;
  transform: translateX(184px) rotateY(90deg);
  background: linear-gradient(90deg, 
    #fff 0%,
    #f9f9f9 5%,
    #fff 10%,
    #f9f9f9 15%,
    #fff 20%,
    #f9f9f9 25%,
    #fff 30%,
    #f9f9f9 35%,
    #fff 40%,
    #f9f9f9 45%,
    #fff 50%,
    #f9f9f9 55%,
    #fff 60%,
    #f9f9f9 65%,
    #fff 70%,
    #f9f9f9 75%,
    #fff 80%,
    #f9f9f9 85%,
    #fff 90%,
    #f9f9f9 95%,
    #fff 100%
    );
}

.book::after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  width: 200px;
  height: 300px;
  transform: translateZ(-15px);
  background-color: #01060f;
  border-radius: 0 2px 2px 0;
  box-shadow: -10px 0 50px 10px #666;
}
  /* book anim */

  .sect6 audio{
    align-items: center;
    display: block;
    margin: 0 auto;
    position: relative;
    top: 100px;
    left: auto;
    right: auto;
    width: 50%;
  }

  .sect6 .nas9{
    margin: 0 auto;
    display: block;
    position: relative;
    top: 60px;
    margin-left: 36%;
    text-align: center;
    font-size: 19px;
  }

.sect6 .btnnn1{
  margin: 0 auto;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-194%, -390%);
  background-color: #65298b;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}
.sect6 .nas81{
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  position: relative;
  top: 50px;
  margin-left: 33%;
  font-size: 30px;
  text-align: center;
  font-family: "Noto Kufi Arabic", serif;
  font-optical-sizing: auto;
}
.sect6 .nas82{
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  position: relative;
  top: 50px;
  margin-left: 33%;
  font-size: 20px;
  text-align: center;
  font-family: "Noto Kufi Arabic", serif;
  font-optical-sizing: auto;
}

.sect6 .btnn2{
  margin: 0 auto;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-201%, -390%);
  background-color: #65298b;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}
.sect6 .btnn3{
  margin: 0 auto;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-204%, -390%);
  background-color: #65298b;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}
.sect6 .btnn4{
  margin: 0 auto;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-232%, -468%);
  background-color: #65298b;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}
.sect22{
  background-color: white;
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  border: 1px solid;
  padding: 5px;
  height: 50px;
  box-shadow: 5px 10px;
  position: relative;
  top: 100px;
}

.sect22 .on-2{
  text-align: left;
  color: #1e1324;
  transition: width 2s;
  background: linear-gradient(
  to right,
  #fc72ff,
  #8f68ff,
  #65298b,
  #8f68ff,
  #fc72ff
);
background-size: 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animate-gradient 2.5s linear infinite;
}
@keyframes animate-gradient {
  to {
    background-position: 200%;
  }
}

.sect22 .on-1{
  text-align: right;
  position: relative;
  bottom: 0;
  top: 0;
  color: #1e1324;
  transition: width 2s;
  background: linear-gradient(
  to right,
  #fc72ff,
  #8f68ff,
  #65298b,
  #8f68ff,
  #fc72ff
);
background-size: 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animate-gradient 2.5s linear infinite;
}
@keyframes animate-gradient {
  to {
    background-position: 200%;
  }
}


.sect11{
  background-color: white;
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  border: 1px solid;
  padding: 5px;
  height: 450px;
  box-shadow: 5px 10px;
  position: relative;
  top: 50px;
}
.sect11 img{
  background-color: #a0daf2;
  border-radius: 8px;
  float: left;
  margin: 0 auto;
  border-radius: 20% 10% 20% 10%;
  border: 1px solid #ddd;
  padding: 5px;
  position: relative;
  top: 20px;
}
.sect11 p{
 margin: 0 auto;
 display: block;
 font-size: 38px;
 text-align: center;
 position: relative;
 top: 30px;

}
.sect11 span{
  color: #65298b;
}
.sect6 .btn90{
  margin: 0 auto;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(105%, -890%);
  background-color: #65298b;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}
@media only screen and (min-width:2872px) {
  .book-container1 {
    margin-top: 100px;
  }
}
/* book anim */
.book-container1 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -69%;
  perspective: 600px;
  position: relative;
  bottom: 200px;
}

@keyframes initAnimation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-30deg);
  }
}

.book1 {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: 1s ease;
  animation: 1s ease 0s 1 initAnimation;
}

.book-container1:hover .book1, 
.book-container1:focus .book1 {
  transform: rotateY(0deg);
}

.book1 > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  width: 200px;
  height: 300px;
  transform: translateZ(15px);
  background-color: #01060f;
  border-radius: 0 2px 2px 0;
  box-shadow: 5px 5px 20px #666;
}

.book1::before {
  position: absolute;
  content: ' ';
  background-color: blue;
  left: 0;
  top: 1px;
  width: 28px;
  height: 298px;
  transform: translateX(184px) rotateY(90deg);
  background: linear-gradient(90deg, 
    #fff 0%,
    #f9f9f9 5%,
    #fff 10%,
    #f9f9f9 15%,
    #fff 20%,
    #f9f9f9 25%,
    #fff 30%,
    #f9f9f9 35%,
    #fff 40%,
    #f9f9f9 45%,
    #fff 50%,
    #f9f9f9 55%,
    #fff 60%,
    #f9f9f9 65%,
    #fff 70%,
    #f9f9f9 75%,
    #fff 80%,
    #f9f9f9 85%,
    #fff 90%,
    #f9f9f9 95%,
    #fff 100%
    );
}

.book1::after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  width: 200px;
  height: 300px;
  transform: translateZ(-15px);
  background-color: #01060f;
  border-radius: 0 2px 2px 0;
  box-shadow: -10px 0 50px 10px #666;
}
  /* book anim */
  
.sect4-3{
  background-color: white;
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  border: 1px solid;
  padding: 5px;
  height: 500px;
  box-shadow: 5px 10px;
  position: relative;
  top: 50px;
}
.sect4-3 p{
  margin: 0 auto;
  display: block;
  font-size: 25px;
  text-align: center;
}

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: 300px;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.sect12{
  background-color: white;
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  margin-top: 5%;
  border: 1px solid;
  padding: 5px;
  height: 500px;
  box-shadow: 5px 10px;
}
.sect12 .vid1{
    background-color: #a0daf2;
    border-radius: 8px;
    float: left;
    margin: 0 auto;
    position: relative;
    top: 20px;
    border: 1px solid #ddd;
    padding: 5px;
}
.sect12 .vid2{
  background-color: #a0daf2;
  border-radius: 8px;
  float: right;
  margin: 0 auto;
  position: relative;
  top: 20px;
  border: 1px solid #ddd;
  padding: 5px;
}
.sect12 .p1{
  margin: 0 auto;
  display: block;
  text-align: center;
  position: relative;
  top: 40px;
  font-size: 20px;
}
.sect12 .vid3{
  background-color: #a0daf2;
  border-radius: 8px;
  float: left;
  margin: 0 auto;
  position: relative;
  top: 20px;
  border: 1px solid #ddd;
  padding: 5px;
}
.sect13{
  background-color: white;
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  margin-top: 5%;
  border: 1px solid;
  padding: 5px;
  height: 500px;
  box-shadow: 5px 10px;
}
.sect13 .img1{
  background-color: #a0daf2;
  border-radius: 8px;
  float: left;
  margin: 0 auto;
  border-radius: 20% 10% 20% 10%;
  border: 1px solid #ddd;
  padding: 5px;
  position: relative;
  top: 20px;
}
.sect13 .img2{
  background-color: #a0daf2;
  border-radius: 8px;
  float: right;
  margin: 0 auto;
  border-radius: 20% 10% 20% 10%;
  border: 1px solid #ddd;
  padding: 5px;
  position: relative;
  top: 20px;
}
.sect13 p{
  margin: 0 auto;
  display: block;
  text-align: center;
  position: relative;
  top: 150px;
  font-size: 20px;
}
.sect14{
  background-color: white;
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  margin-top: 5%;
  border: 1px solid;
  padding: 5px;
  height: 450px;
  position: relative;
  top: 50px;
  box-shadow: 5px 10px;
}
.sect14 h1{
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  color: #65298b;
  text-align: center;
  font-size: 2em;
    background: linear-gradient(
    to right,
    #fc72ff,
    #8f68ff,
    #65298b,
    #8f68ff,
    #fc72ff
  );
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate-gradient 2.5s linear infinite;
}

@keyframes animate-gradient {
  to {
    background-position: 200%;
  }
}

.sect19{
  background-color: white;
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  border: 1px solid;
  padding: 5px;
  height: 550px;
  box-shadow: 5px 10px;
  position: relative;
  top: 80px;
}
.sect19 .btnn3{
  margin: 0 auto;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-204%, 199%);
  background-color: #65298b;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}
.sect19 .vid2{
float: right;
background-color: #a0daf2;
  border-radius: 8px;
  margin: 0 auto;
  display: block;
  border: 1px solid #ddd;
  padding: 5px;
  position: relative;
  top: 40px;
}

.sect19 .onwan3{

text-align: center;
position: relative;
top: 10px;
color: #1e1324;
font-size: 1.5em;
transition: width 2s;
background: linear-gradient(
to right,
#fc72ff,
#8f68ff,
#65298b,
#8f68ff,
#fc72ff
);
background-size: 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animate-gradient 2.5s linear infinite;
}
@keyframes animate-gradient {
to {
  background-position: 200%;
}
}

.sect19 p{
text-align: center;
margin: o auto;
display: block;
position: relative;
top: 80px;
font-size: 19px;
}
.sect20{
  background-color: white;
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  border: 1px solid;
  padding: 5px;
  height: 550px;
  box-shadow: 5px 10px;
  position: relative;
  top: 50px;
}
.sect20 video {
  float: right;
  background-color: #a0daf2;
  border-radius: 8px;
  margin: 0 auto;
  display: block;
  border: 1px solid #ddd;
  padding: 5px;
  position: relative;
  top: 40px;
}
.sect20 h2{
  text-align: center;
  color: #65298b;
  transition: width 2s;
  background: linear-gradient(
  to right,
  #fc72ff,
  #8f68ff,
  #65298b,
  #8f68ff,
  #fc72ff
);
background-size: 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animate-gradient 2.5s linear infinite;
}
@keyframes animate-gradient {
  to {
    background-position: 200%;
  }
}
.sect20 .p1{
  text-align: center;
  font-size: 30px;
  position: relative;
  top: 90px;
}
.sect20 .p2{
  text-align: center;
  position: relative;
  font-size: 20px;
  top: 100px;
}
.sect12 .p2{
  text-align: center;
  position: relative;
  font-size: 20px;
  top: 100px;
}
.sect17{
  background-color: white;
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  border: 1px solid;
  padding: 5px;
  box-shadow: 5px 10px;
  position: relative;
  top: 70px;
}
.sect17 h1{
  text-align: center;
  color: #65298b;
  font-size: 2.5em;
  transition: width 2s;
  margin-top: 1%;
  background: linear-gradient(
  to right,
  #fc72ff,
  #8f68ff,
  #65298b,
  #8f68ff,
  #fc72ff
);
background-size: 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animate-gradient 2.5s linear infinite;
}
@keyframes animate-gradient {
  to {
    background-position: 200%;
  }
}

#slideContainer {
  width: 720px;
  margin: auto;
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
}
.sliderBtn {
  position: absolute;
  background-color: rgba(48, 5, 50, 0.5);
  border: none;
  color: white;
  padding: 1rem;
  top: calc(50% - 1rem - 27px);
  z-index: 999;
  font-family: Nunito;
  font-weight: 600;
  font-size: 1.5rem;
  cursor: pointer;
  outline: none;
}
.sliderBtn:hover {
  background-color: rgba(48, 5, 50, 1);
}
#prev {
  left: 0;
}
#next {
  right: 0;
}
.slide {
  display: none;
}
.show {
  display: block;
  animation: fadein 1s ease-in-out 0s 1 normal forwards;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


video {
  max-width: 100%;
  border-radius: 0.4rem 0.4rem 0 0;
  display: block;
  margin: auto;
}
@media screen and (max-width: 722px) {
  #slideContainer {
    width: 100%;
  }
  .sliderBtn {
    padding: 0.5rem;
    font-size: 1rem;
  }
  
}
.sect16{
  background-color: white;
  display: block;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  border: 1px solid;
  padding: 5px;
  height: 550px;
  box-shadow: 5px 10px;
  position: relative;
  top: 80px;
}

.sect6 .onwan87{
  top: auto;
  color: #65298b;
  margin-left: 30%;
  text-align: center;
  font-size: 1.8em;
 
  transition: width 2s;
  background: linear-gradient(
  to right,
  #fc72ff,
  #8f68ff,
  #65298b,
  #8f68ff,
  #fc72ff
);
background-size: 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animate-gradient 2.5s linear infinite;
}
@keyframes animate-gradient {
  to {
    background-position: 200%;
  }
}

.sect6 .btn12{
  margin: 0 auto;
  display: block;
  width: 40%;
  margin-left: 30%;
  margin-right: 30%;
  background-color: #65298b;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.sect6 .onwan86{
  top: auto;
  color: #65298b;
  margin-left: 30%;
  text-align: center;
  font-size: 1.8em;
 
  transition: width 2s;
  background: linear-gradient(
  to right,
  #fc72ff,
  #8f68ff,
  #65298b,
  #8f68ff,
  #fc72ff
);
background-size: 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animate-gradient 2.5s linear infinite;
}
@keyframes animate-gradient {
  to {
    background-position: 200%;
  }
}

.sect15{
      background-color: white;
    display: block;
    min-width: 100px;
    min-height: 100px;
    margin: 0 auto;
    border: 1px solid;
    padding: 5px;
    height: 50px;
    box-shadow: 5px 10px;
}
.sect15 h1{
text-align: center;
    color: #65298b;
    position: relative;
    margin-top: 1%;
    font-size: 2em;
    transition: width 2s;
    background: linear-gradient(
    to right,
    #fc72ff,
    #8f68ff,
    #65298b,
    #8f68ff,
    #fc72ff
  );
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate-gradient 2.5s linear infinite;
  }
  @keyframes animate-gradient {
    to {
      background-position: 200%;
    }
  }