@import url("https://fonts.googleapis.com/css?family=Sacramento&display=swap");

*{
    font-family: 'Poppins', sans-serif;

}
h-font{
    font-family: 'Merienda', cursive;

}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
    }


.text-yellow{
color: rgb(212, 212, 32);
font-size: 15px;

}



/* about */



.hdng{
font-size: 25px;
font-family: Georgia, 'Times New Roman', Times, serif;
color: rgb(247, 247, 54);
text-shadow: -1px 0 black , 0 1px , 1px 0 , 0 -1px;
letter-spacing:1px;

}
.hng{
color: rgb(250, 250, 17);
font-weight: bolder;
font-size: 28px;
text-shadow: -1px 0 black , 0 1px , 1px 0 , 0 -1px;
display: block;
}
/* >>>>>>>>>>>>>>>>>>>>>>>>>abt>>>>>>>>>>>>>>>>> */
.wrapper {
position: relative;
overflow: hidden;
width: 400px;
height: 580px; 
left:-5%;


}
#slide {
position: absolute;
left: -600px; 
width:280px;
height:480px; 
top: 25%;
-webkit-animation: slide 0.5s forwards;
-webkit-animation-delay: 0.1s;
animation: slide 2s forwards ;
animation-iteration-count:3;
animation-delay: 1s;

}
@keyframes slide {
100% { left:5%; }
}

/* >>>>>>>>>>>>>>>>>>>>abt end>>>>>>>>>>>>>> */
/* >>>>>>>>>>>journy>>>>>>>>>>>>>>>>> */


.title{color: #1a1a1a;text-align: center;margin-bottom: 10px}
.content{position: relative;width:100%;max-width:400px;margin: auto;overflow: hidden}
.content .content-overlay{background: rgba(0,0,0,0.7);
    position: absolute;
    height:100%;
    width: 100%;left: 0;top: 0;
    bottom:0;right: 0;opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s}
.content:hover .content-overlay{opacity: 1}
.content-image{width: 100%;
height:100%}


.content-details{position: absolute;
    text-align:
     center;
     
     padding-left: 1em;
     padding-right: 1em;
     width: 100%;top: 50%;
     left: 50%;
     opacity: 0;
     -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
     -webkit-transition: all 0.3s ease-in-out 0s;
     -moz-transition: all 0.3s ease-in-out 0s;
     transition: all 0.3s ease-in-out 0s}
.content:hover .content-details{top: 50%;left: 50%;opacity: 1}
.content-details h3{color: #fff;font-weight: 500;
    letter-spacing: 0.15em;
    margin-bottom: 0.5em;
    text-transform: uppercase}
.content-details p{color: #fff;font-size: 0.8em}
.fadeIn-bottom{top: 80%} 



/* >>>>>>>>>>>>>>>>>>jouny end>>>>>>>>>>>> */


/* abt */

.avl-frm{
    margin-top:-50px;
    z-index:2;
    position:relative;
    }
@media screen and(max-width:576px){
.avl-frm{
margin-top:35px;
padding: 0 35px;

}
}


.navbar{
opacity:1.0;
}
.navbar li :hover{
border-bottom: 2px solid black;
}





/* background */
  .carousel-caption{
     position:absolute;
    top:30%; 
    z-index:1;
    text-shadow: -1px 0 rgb(22, 21, 21) , 0 1px , 1px 0 , 0 -1px;

    font-weight: 900;
   



}
.carousel-caption a{
    letter-spacing: 2px;
}

 
 .ic{

 color:rgb(236, 236, 53);
    
 }
 .ic:hover{
    color: #ff0000;
 }
 .ic-a{
    text-decoration: none;
    color: #111;
 }
.captn{
    letter-spacing:0.1rem;
    text-align: center;
    color:#fff;
    text-shadow: -1px 0 black , 0 1px , 1px 0 , 0 -1px;


    font-weight:900;
    
}
html{
    scroll-behavior: smooth;
}

/* >>>>>>>>>>>>>to top buttn>>>>>>>>>>>>>>>>>>>>>> */
.to-top{
    
    position: fixed;
    width: 58px;
    right:15px;
    bottom: 16px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    color:rgb(247, 223, 12);
    font-size: 32px;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s;


}


.to-top.active{
    bottom: 32px;
    pointer-events: auto;
    opacity: 1;

}


/* >>>>>>>>>>>>>>>>>>>>to-top>>>>>>>>>>>>>>>> */




    
    
    
    .text-blue{
        background-color:rgb(178, 184, 230);
    }

    
    
   

.text-y{
    color: rgb(238, 128, 205);
}


/*book  */

.book1{
    

    position: relative;

    width:520px;
    height:450px; 
    right:12%;
    left: 10%;
    }
    
    
     
/*  */


.hd {
    font-size: calc(7px + 5vh);
    line-height: calc(5px + 3vh);

    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
    font-family: "Sacramento", cursive;
    text-align: center;
    animation: blink 12s infinite;
    -webkit-animation: blink 12s infinite;
  }


  @-webkit-keyframes blink {
    20%,
    24%,
    55% {
      color: #111;
      text-shadow: none;
    }
  
    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
  100% {  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
}
@keyframes blink {
    20%,
    24%,
    55% {
      color: #111;
      text-shadow: none;
    }
    0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
}
/* >>>>>>>> */
.heading{
    font-size: 20px;
}
.hd1{
    font-size: 25px;
    text-align: start;

}
.media-body p{
    color: #ebb248;
}
/* .hd1{
    color: #ebb248;
    font-size: 20px;
} */

.button{
    
        display: inline-block;
        border-radius: 4px;
        background-color: #e4c333;
        border: none;
        color: #0f0f0f;
        text-align: center;
        font-size: 20px;
       
      
      
}

.back-vd{
    position: absolute;
     right:0; 
    bottom: 0; 
    z-index:-0.8;

}
@media(min-aspect-ratio:16/9){
    .back-vd{
        width: 100%;
        height: auto;
    }
}
@media(min-aspect-ratio:16/9){
    .back-vd{
        width: auto;
        height: 100%;
    }
}

.con h1{

    margin-top: auto;
    text-align: center;

}

/*  */
#run{
    margin-top:50%;
}
/* .hero{
    width: 100%;
    height: 100vh;
    position: relative;
    padding: 0 5%;
    background-color: #fff6a9;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid black;
} */
/* .content1{
    text-align: center;
    border: 2px solid red;


}
.content1 h1{
    font-size: 80px;
    color: #fff;
    font-weight: 600;
    border: 2px solid red;
}
.content1 a{
    text-decoration: none;
    display: inline-block;
    color: #fff;
    font-size: 24px;
    border:  2px solid red;
    padding: 14px 70px;
    border-radius: 50px;
    margin-top: 20px;
} */