/* Header video */
    .wrapper-header{
        height: 55rem;
        width: 100%;
        border: none;
    }

    .header_video{
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
        z-index: -1;
    }

    .title{
        position: absolute;
        top: 10%;
        right: 5%;
        text-align: right;
    }

    .title-text{
        text-shadow: 2px 2px 1px rgb(59, 59, 59);
    }

    .btn-arrow{
        text-shadow: 2px 2px 1px rgb(59, 59, 59);
        position: absolute;
        bottom: 40%;
        right: 10%;
    }

    .btn-arrow img{
        width: 3rem;
    }


    .btn-arrow-link{
        text-decoration: underline;
    }

    .take-to-body {
        position: relative;
      }
      
      .take-to-body::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0%;
        height: 2px;
        background: #fff;
        transition: 0.3s ease;
      }
      
      .take-to-body:hover::after {
        width: 100%;
      }


/******************************************************************************/

    /* Body for description */
    .wrapper-body-first{
        height: 115rem;
        /* background: linear-gradient(to  right, #faefd2, #ffffff); */
        /* background-color: #faefd2; */

        background: linear-gradient(to  right, #f7e4b1, #ffffff);
        /* background-color: #D24848;
        opacity: 0.25; */
    }

    .hop-quest{
        /* position: absolute;
        top: 25%;
        left: 15%; */
        opacity: 0.7;
        width: 100%;
        height: auto;
        max-width: 30rem;
    }

    .body{
        height: 50rem;
    }

    .what-hop{
        max-height: 40rem;
        margin-top: 7% !important;
        margin-left: 6rem;
        border-radius: 15px;
        z-index: 0;
        
    }

    .hopquest-logo{
        background-image: url(../images/home/original-logo.png);
        
        width: 100%;
        height: 100%;
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 0.3;

        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;


    }

    .description-title{
        position: relative;
        z-index: 1;
    }

    .mt-3 p{
        font-size: 1.5rem;;
    }

    /***************** Body for align cards ********************/

    .wrapper-body-second{
        position: relative;
        height: 65rem;
    }

    .second-body{
        height: 65rem;
        /* background-color: rgba(210, 70, 70, 0.4); */
        background-color: #D24848;
        opacity: 0.25;

        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    .tag-title{
        position: relative;
        z-index: 1;
        padding-top: 8rem;
        margin-left: 5rem;
        /* text-shadow: 2px 2px 10px rgb(148, 148, 148); */
    }

    .tag-title h1{
        font-size: 2rem;
    }

    .tag-category{
        position: relative;
        z-index: 1;
        /* margin-top: 5rem; */

    }

    .tag-category .col-auto{
        margin-top: 5rem;
    }

    .tag-category .col-auto h1{
        font-size: 1.5rem;
    }
    

    .view-all{
        position: absolute;
        top: 15.6rem;
        right: 18rem;
        z-index: 2;
    }

    .all-posts{
        margin-left: -1rem;
        padding-top: 0.3rem;
    }

    .view-all img{
        width: 1.8rem;
    }

    .view-all h1{
        font-size: 1.5rem;
        
    }

    .tab-button.active h1{
        color: #D24848;
    }

    .tab-content {
        display: none;
    }
    
    .tab-content.active {
        display: block;
    }

    /********************* FAQ **************************/
    .faq-body{
        /* height: 45rem; */
        /* background-color: rgb(255, 255, 255);
        border-radius: 10px;
        box-shadow: 0px 0px 10px rgb(185, 185, 185); */

        margin-top: 12rem;

    }

    .faq-title{
        height: 8rem;

        background-color: white;
        border-radius: 50px;
        box-shadow: 0px 0px 10px rgb(185, 185, 185);

        padding-top: 1.5rem;
        margin-bottom: 5rem;
        
    }

    .faq-title h1{
        font-size: 4rem;
        text-shadow: 1px 1px 5px rgb(148, 148, 148);
    }

    .read-more-link:hover{
        color: white;
        background-color: black;

    }

    .first-question{

        height: 20rem;
        background-color: white;
        border-radius: 50px;
        box-shadow: 0px 0px 10px rgb(185, 185, 185);

        padding: 1rem;
    }

    .second-question{

        height: 20rem;
        background-color: white;
        border-radius: 50px;
        box-shadow: 0px 0px 10px rgb(185, 185, 185);
    }

    .third-question{

        height: 20rem;
        background-color: white;
        border-radius: 50px;
        box-shadow: 0px 0px 10px rgb(185, 185, 185);
    }

    .faq-title.poppins-regular{
        font-size: 10rem !important;
    }
/* 
    .for-line{
        background: rgb(107, 107, 107);
        width: 100%;
        height: 2px;
        margin-bottom: 2rem;
    } */

    /* new FAQ */

    .card.shadow{
        height: 20rem;
        width: 30rem;
        border-radius: 3rem;
    }


    .for-question img{
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .for-mark{
        margin-top: 1rem;
    }

    .for-question p{
        font-size: 1.5rem;
    }

    .for-question-sec img{
        width: 2.5rem;
        height: 2.5rem;
    }

    .for-mark-sec{
        margin-top: 2.3rem;
    }

    
    .for-question-sec p{
        font-size: 1.5rem;
    }

    .for-answer{
        margin-top: -1rem;
    }

    .btn-faq {
        padding: 10px 20px;
        border-radius: 50px;
        border: none;
        font-size: 16px;
        box-shadow: 0px 0px 10px rgb(185, 185, 185);
        font-weight: bold;
      }

    .btn-faq.slide{
        background: #ffffff;
        color: black;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }

    .btn-faq.slide::after{
        background-color: black;
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 100%;
        transform: scale(0, 1);
        transform-origin: left top;
        transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
        z-index: -1;
    }

    .btn-faq.slide:hover{
        color: white;
    }

    .btn-faq.slide:hover::after{
        transform: scale(1, 1);
    }

    /*************************   *******************************/



    /********************* ABOUT SLICK *********************/
    .slider{
        position: relative;
        z-index: 1;
    }

    .slick-next{
        right: 0 !important;
        /* width: 10rem;
        height: 10rem; */
    }

    .slick-prev{
        left: 0 !important;
        /* width: 50rem;
        height: 10rem; */
    }

    .slick-prev:before, .slick-next:before {
        font-size: 4rem !important;
        opacity: 1 !important;
    }

    .slick-arrow{
        z-index: 2 !important;
        margin-left: 18.8%;
        margin-right: 21.2%;        
    }

    .slick-dots li button:before{
        margin-top: 1rem;
        font-size: 1rem !important;
    }

    .no-dots .slick-dots {
        display: none !important;
    }

    .not-found img{
        width: 15rem;
    }






    /*********** about animation of sharing-img and some texts  ***********/


    /* sharing-img (background) */
    .sharing-img{
        background-image: url(../images/pexels-photo-2672979.jpeg);
        
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;

        max-height: 35rem;
        margin-top: 10% !important;
        margin-left: 6rem;
        border-radius: 15px;

        opacity: 0;
        visibility: hidden;
    }

    .sharing-img.active{
        animation: sharing-img 3.0s forwards;
        visibility: visible;
    }

    @keyframes sharing-img {
        0%{
            opacity: 0;
        }

        100%{
            opacity: 100;
        }
    }



    /* About HopQuest */
    .description-title p{
        font-size: 3rem;
        letter-spacing: 0.1rem;
        opacity: 0;
        visibility: hidden;
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        text-shadow: 2.5px 2.5px 3px gray;

    }
    .description-title.active p{/* active is related javascript*/
        animation: abouthopquest 1.4s forwards;
        visibility: visible;
    }

    .description-title p:nth-child(1){
        animation-delay: 0.1s
    }

    .description-title p:nth-child(2){
        animation-delay: 0.2s
    }

    .description-title p:nth-child(3){
        animation-delay: 0.3s
    }

    .description-title p:nth-child(4){
        animation-delay: 0.4s
    }

    .description-title p:nth-child(5){
        animation-delay: 0.5s
    }

    .description-title p:nth-child(6){
        animation-delay: 0.6s
    }

    .description-title p:nth-child(7){
        animation-delay: 0.7s
    }

    .description-title p:nth-child(8){
        animation-delay: 0.8s
    }

    .description-title p:nth-child(9){
        animation-delay: 0.9s
    }

    .description-title p:nth-child(10){
        animation-delay: 1.0s
    }

    .description-title p:nth-child(11){
        animation-delay: 1.1s
    }

    .description-title p:nth-child(12){
        animation-delay: 1.2s
    }

    .description-title p:nth-child(13){
        animation-delay: 1.3s
    }

    .description-title p:nth-child(14){
        animation-delay: 1.4s
    }

    @keyframes abouthopquest{
        0%{
            opacity: 0;
        }

        100%{
            opacity: 1;
        }
    }


    .description-text{
        visibility: hidden;
    }

    .description-text.active{
        visibility: visible;
        animation: fadeup 2.5s cubic-bezier(0.33, 1, 0.68 , 1) forwards;
    }

    @keyframes fadeup{
        0%{
            transform: translateY(3em);
            opacity: 0;
        }

        80%{
            opacity: 1;
        }

        100%{
            opacity: 1;
            transform: translateY(0);
        }
    }



    /* Under line of categories */

    .line{
        display: block;
        position: relative;
    }

    .line::after{
        /* background-color: black;  */
        background: linear-gradient(to right, #D24848 0%, #3B3B6B 33%, #66BFBF 66%, #4496E3 100%);
        content: '';
        display: block;
        height: 4px;
        width: 0;
        transform: translateX(-50%);
        transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
        position: absolute;
        bottom: 0;
        left: 50%;
    }

    .line.active::after{
        width: 60rem;
    }

    
    
    /* .line-2{
        display: block;
        position: relative;
    }

    .line-2::after{
        background: linear-gradient(to right, #D24848 0%, #3B3B6B 33%, #66BFBF 66%, #4496E3 100%);
        content: '';
        display: block;
        height: 4px;
        width: 0;
        transform: translateX(-50%);
        transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
        position: absolute;
        bottom: 0;
        left: 50%;
    }

    .line-2.active::after{
        width: 5.5rem;
    } */

    

    /* Popular Contents animation */

    .tag-title{
        visibility: hidden;
        opacity: 0;
    }

    .tag-title.active{
        animation: appearance 2.5s forwards;
        visibility: visible;
    }


    .tag-category{
        visibility: hidden;
        opacity: 0;
    }

    .tag-category.active{
        animation: appearance 2.5s forwards;
        visibility: visible;
    }

    .slider{
        /* display: none; */
        visibility: hidden;
        opacity: 0;
    }

    .slider.active{
        /* display: block !important; */
        visibility: visible;
        animation: appearance 2.5s forwards;
    }

    .all-posts{
        visibility: hidden;
        opacity: 0;
    }

    .all-posts.active{
        animation: appearance 2.5s forwards;
        visibility: visible;
    }

    .all-posts-img{
        visibility: hidden;
        opacity: 0;
    }

    .all-posts-img.active{
        animation: appearance 2.5s forwards;
        visibility: visible;
    }

    

    @keyframes appearance {
        0%{
            opacity: 0;
        }

        40%{
            opacity: 0;
        }

        100%{
            opacity: 1;
        }
    }



    /* FAQ animation */
    .faq-body {
        opacity: 0;
        transform: translateY(-2rem) scale(0.95);
        transition: all 0.5s ease-in-out;
    }

    .faq-body.active{
        animation: pop 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
    }
    
    
    .first-question {
        opacity: 0;
        transform: translateY(1rem) scale(0.95);
    }

    .first-question.active{
        animation: bounce-in 0.6s ease-out forwards;
    }
    
    
    .first-question:nth-child(1) {
        animation-delay: 0.8s;
    }
    
    .first-question:nth-child(2) {
        animation-delay: 1s;
    }
    
    .first-question:nth-child(3) {
        animation-delay: 1.2s;
    }
    
    @keyframes pop {
        0% {
            opacity: 0;
            transform: translateY(-4rem) scale(0.95);
        }
    
        50% {
            opacity: 0.8;
            transform: translateY(4rem) scale(1.05);
        }
    
        80% {
            opacity: 1;
            transform: translateY(-2rem) scale(0.98);
        }
    
        90% {
            opacity: 1;
            transform: translateY(0.5rem) scale(0.98);
        }
    
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    @keyframes bounce-in {
        0% {
            opacity: 0;
            transform: translateY(2rem) scale(0.9);
        }
        60% {
            opacity: 1;
            transform: translateY(-0.5rem) scale(1.05);
        }
        80% {
            opacity: 1;
            transform: translateY(0.3rem) scale(0.98);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }