*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 .cont{
   height: 260px;
   width: 280px;
   position: absolute;
   margin-bottom: 5px;
   perspective: 800;
   -webkit-perspective: 800;
 }
  .card{
    background: whitesmoke;
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
    position: relative ;
    transition: all 2s ease;
    -webkit-transform-style: preserve-3d;
    border-radius: 10px; 
  } 
  .card:hover{
    transform: rotateY(180deg);
  }
.back{
  position: relative;
  bottom: 260px; 
  transform: rotateY(180deg);
}
img{
  border-radius: 10px;
}

h1{
  position: absolute;
  left: 12%;
  font-size: 10em;
  background: -webkit-linear-gradient(100deg, white, aqua );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Permanent Marker";
 text-decoration-line: underline;
}


































a:link {color: red;}
a:hover {color: white; opacity: 1;} 
.name {text-decoration: none; font-style: italic;font-weight: 300;
  font-family: cursive;
  box-sizing: border-box;
  margin-left: 30px;
  font-size: 1.5em;
  
  color: aqua
  }
.name:hover{background-color: #24252a; border-radius: 2px; padding: 10px 5px;}

header{
  border-radius: border-box;
  margin: 0;
  padding: 0;
  background-color:  #24252a;
  height: 60px;
  
}

 header li, a, button {
   font-family: cursive;
   font-weight: 500;
   font-size: 16px;
   color: #edf0f1;
   text-decoration: none;
   list-style: none;
 } 
 

 
 header{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 30px 10%;
  }
  
  .logo{
    cursor: pointer;
    height: 60px;
    width: 100px;
  }
 .nav_links{
  list-style: none;
}
.nav_links li{
  display: inline-block;
  padding: 0px 20px;
  }
 .nav_links li a{
   transition: all 0.3s ease 0s;
}
.nav_links li a:hover{
  color: #00d2d3;
  
}

button{
  padding: 9px 25px;
  background-color: rgba(0,136,169,1);
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  
}

button:hover{
  color: rgba(0,136,169,0.8);
  background-color: azure;
}
main {
  width: 1200px;
  height: 1150px;
  margin: 200px auto -240px auto;
  
  
  border: none; color: black;
  display: grid;
  grid-template-rows: 60px 260px 260px 500px 260px 260px 60px ;
  grid-template-columns:repeat(3, 1fr) 300px;
  grid-gap: 20px;
  
  background-color: none;
}

.div1{ background-color: #ff4757;
 grid-column: 1/-1;}
 .div2{ background: white;
   background-image: url(fma.jpg);  background-size: 100% 80%; background-repeat: no-repeat;
  text-align: center; padding-top: 218px;} 






.div3{ background-color: white;
  background-image: url(aot.png); background-size: 100% 80%; background-repeat: no-repeat;
  text-align: center; padding-top: 218px;    
}
.div4{ background-color: white;
  background-image: url(na.jpg); background-size: 100% 80%; background-repeat: no-repeat;
  text-align: center; padding-top: 218px; 
}
.div5{ background-color: #2f3542;
  grid-row: 2/4; grid-column: 4/5; border-radius: 20px;}
  .page.img1 {position: absolute;
        background-image: url(cb.jpg);
       background-size: 100% 100%;
       background-repeat: no-repeat;
       border-radius: 50px 0px 0px 50px }
      .page { height: 420px;
             width: 300px;}
   .page.img2 {position: relative;
              background-image: url(rambo.jpg);
              background-size: 100% 100%;
              background-repeat: no-repeat;
               animation: page 4s infinite linear;
               transform-origin: left;
               transform-style: preserve-3d;
               border-radius: 50px 0px 0px 50px ;
               backface-visibility: hidden;
               
                     }
    @keyframes page{
      0%{ transform: rotateY(0deg);}
      
      100%{ transform: rotateY(-180deg) ; opacity: 1;}
    }

     
    
    

      
      
      
      
      
      
      






       .div6{ background-color: white; 
  background-image: url(my.png);  background-size: 100% 80%; background-repeat: no-repeat;
  text-align: center; padding-top: 218px; 
}
.div7{ background-color: white;
  background-image: url(e.jpg);  background-size: 100% 80%; background-repeat: no-repeat;
  text-align: center; padding-top: 218px;
 
}
.div8 { background-color: white;
  background-image: url(gbz.jpg);  background-size: 100% 80%; background-repeat: no-repeat;
  text-align: center; padding-top: 240px; }
.div9 {background-color: khaki;
 grid-row: 4/6;
 border-radius: 25px; }

.div10 {background-color: lawngreen;
grid-column: 1/-2; grid-column: 2/5; background-image: url(6p.jpg); background-size: 100% 90%;
background-repeat: no-repeat; text-align: center; border-radius: 10px;
box-shadow: 1px 2px 10px 5px black;
  animation: slider 9s infinite linear;}
  @keyframes slider{
 0%{ background-image: url(6p.jpg) ; }
 25%{background-image: url(5p.jpg) ;}
 50%{background-image: url(3p.jpg);}
 75%{background-image: url(4p.jpg);}

  }

.div11 {background-color: white;
  text-align: center; padding-top: 150px; background-image: url(npi.jpg);  background-size: 100% 80%; background-repeat: no-repeat;
  text-align: center; padding-top: 218px; }

.div12 {background-color: white;
  text-align: center; padding-top: 150px;background-image: url(gohs.png);  background-size: 100% 80%; background-repeat: no-repeat;
  text-align: center; padding-top: 218px; }

.div13 {background-color: white;  background-image: url(tg.jpg);  background-size: 100% 80%; background-repeat: no-repeat;
  text-align: center; padding-top: 218px;}
  



#sea 
{ position: relative;
  height: 1750px;
  width: 100%;
  background: #3586ff;
  overflow: hidden;
}
 .wave 
{
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100px;
  width: 100%;
  background: url(wave.jpg);
  background-size: 1000px 100px;
} 
 .wave.wave1
{
  animation: animate 5s linear infinite;
  z-index: 1000;
  opacity: 1;
  animation-delay: 0s;
  bottom: 0;
}
 .wave.wave2
{
  animation: animate2 6.5s linear infinite;
  z-index: 999;
  opacity: 0.5;
  animation-delay: -5s;
  bottom: 10px;
}

.wave.wave3
{
  animation: animate2 2s linear infinite;
  z-index: 999;
  opacity: 0.2;
  animation-delay: -2s;
  bottom: 15px;
}
.wave.wave4
{
  animation: animate2 3.5s linear infinite;
  z-index: 997;
  opacity: 0.7;
  animation-delay: -1s;
  bottom: 20px;
}

@keyframes animate2
{ 
  0%
  { 
    background-position-x: 0;
  }
  100%
  {
    background-position-x: -1000px;
  }
}
@keyframes animate
{ 
  0%
  { 
    background-position-x: 0;
  }
  100%
  {
    background-position-x: 1000px;
  }
}


 
    #mymove {
      position: fixed;
      top: 200px;
      left: -95px;
      
      
     
    
      transform: translate(-50%,-50%);
      


    }
    #mymove:hover{
      cursor: pointer;
      scale: (1.5);
      
    }
    
     
    .btn { 
      position: absolute;
      display: block;
      color: white;
      font-size: 15px;
      font-family: "cursive";
      text-decoration: none;
      margin: 0;
      border: none;
      padding: 10px 50px;
      text-transform: uppercase;
      overflow: hidden;
      transition: 1s all ease;
      border-radius: 20px;
      box-shadow: 0 0 25px 0 lightslategrey, 0 20px 25px 0px black;
      font-weight: 900;
      font-family: cursive;
      
      
      }
      .btn:hover .about{ scale: 1.5;}

      

    .btn::before {
      background-color: rgb(4, 202, 252);
      content: "";
      position: absolute;
      transform: translate(-50%,-50%);
      height: 100%;
      width: 100%;
      z-index: -1;
      top: 50%;
      left: 50%;
      bottom: 0%;
      transition: all 0.6s ease}

     .about {top: 20px; transition: 1s linear}
     .about:hover::before{
       width: 100%;
      }
    .about:hover {left: 75px; ;}
    .about:before {
      width: 0px;
      height: 100%;}

    .movies{top: 100px; padding: 10px 45 px;}
    .movies:before{
      width: 100%;
      height: 0;}
    .movies:hover {left: 75px;}
    .movies:hover::before{height: 100px;}
     
    .support-us{top: 180px;}
    .support-us::before {
      width: 100%;
      height: 0;
      transform: translate(-50%,-50%) rotate(45deg) }
    .support-us:hover{ left: 75px;}
    .support-us:hover::before{ height: 380%}
    

    .anime{top: 260px; font-size: 15px;}
    .anime::before {
      width: 100%;
      height: 0;
      transform: translate(-50%,-50%) rotate(-45deg) }
    .anime:hover{ left: 75px;}
    .anime:hover::before{ height: 380%}


      .social{
        position: fixed;
        top: 14.2%;
        left: 93.4%;
        width: 0;
        text-align: center;
        transition: 0.8s linear;}
      
        .social:hover{ left: 91%;}

      .btm{
        display: block; block-size: 90px ;
        width: 90px;
        height: 90px;
        background: linen ; 
        
        padding: 30px;
        border-radius: 30%;
        margin: 10px;
        box-shadow: 0px 5px 15px -5px black;
        color: #3498db;
        overflow: hidden;
        position: relative;
      }
   
      .btm i{
        
        font-size: 30px;
        transition: 0.5s linear;
      }

      .btm:hover i{
        transform: scale(1.6);
        color: whitesmoke ;
      }
       
      .btm::before{
        content: "";
        position: absolute;
        width: 120%;
        height: 120%;
        background: #3498db;
        left: -110%;
        top: 90%;
        transform: rotate(45deg);
      }
         
      .btm:hover::before{
        animation: aaa 0.7s 1;
        top: -10%;
        left: -10%;
      }  
 
      @keyframes aaa{
        0%{left: -110%;
          top: 90%;}
        50%{left: 10%;
          top: -30%;}
        100%{ top: -10%;
          left: -10%;}
      }



      ul{
        margin: 0;
        padding: 0;
        display: flex;
        color: black;
      }
      
      ul .box{
        position: relative;
        list-style: none;
        width: 10px;
        height: 10px; 
        background: aqua;
        margin: -22px 30px;
        border-radius: 50%;
        transition: 0,5s;
        cursor: pointer;
      }
      ul .box:hover{
        background: #86ff3b;
        box-shadow: 0 0 0 4px #333,
                    0 0 0 6px #86ff3b;
      }
      
      ul .box .content{
        position: absolute;
        bottom: 15px;
        width: 320px;
        background: #fff;
        padding: 20px;
        box-sizing: border-box;
        visibility: hidden;
        opacity: 0;
        transition: 0.5s;
        transform: translateX(-60%) translateY(-60px);
        
      }
      ul .box .content:before{
       content: "";
       position: absolute;
       width: 30px;
       height: 35px;
       background: #fff;
       bottom: -15px;
       left: 194px;
       transform: rotate(45deg);

      }
      ul .box:hover .content{
        visibility: visible;
        opacity: 1;
        transform: translateX(-30%) translateY(-20px);
      }
      
      ul .box .content h2{
        margin: 0;
        padding: 0;
      }