html{
    width: 100%;
    overflow: auto;
}

.tarot-video-reding-main{
    background: url('../../images/tarot_video_reding/love bg.jpg');
    /* height: 100vh; */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
.top-head-reading{
    padding: 50px 0 25px 0;
    text-align: center;
}
.top-head-reading h1{
    text-transform: uppercase;
    color: black;
    text-shadow: 0 0 2px #f7d9d9;
    -webkit-text-stroke-width: 1px;
    /* -webkit-text-stroke-color: #fff; */
    font-weight: 700;
}
.loading{
    color: #000;
    text-shadow: 0 0 3px #000;
    font-weight: 700;
    font-size: 25px !important;
}
.loading.loadingText{ text-shadow: none;}
.tarot-video-btn{
    text-align: center;
    max-width: fit-content;
    background: #f20f0f;
    border-radius: 5px;
    padding: 8px 15px;
    margin: auto;
}
.tarot-video-btn p{
    margin: 0;
    padding: 0;
    color: #fff;
    text-transform: uppercase;
}
.question-category{
    background: #fff;
    border-radius: 10px;
    border: 2px solid #000;
    text-align: center;
    padding: 5px;
    min-height: 100%;
    box-shadow: 0 0 20px #fff;
}
.question-category img{
    width: 100%;
    border-radius: 9px;
    border: 2px solid #000;
}
.question-category p{
    margin: 0;
    padding: 5px 0;
    line-height: 16px;    
}
.question-link, .question-link:hover{
    text-decoration: none;    
    color: #000;
}
.card-image-section{
    display: contents;
}
.card-image-section img{
    width: 17%;
    height: auto;
    padding: 5px;
    border-radius: 22px;
}
.yt-video iframe{
    width: 560px;
    height: 315px;
}


@media (max-width: 575px) {
    .card-image-section img {
        width: 33%;
        height: auto;
        padding: 5px;
        border-radius: 10px;
    }
    .yt-video iframe{
        width: 90%;
    }
}

@media (max-width: 450px) {
    .yt-video iframe{
        width: 90%;
        height: 228px;
    }
}


.progress {
    display: inline-block;
    width: 400px;
    height: 50px;
    margin: 35px;
    border-radius: 20px;
    background: #f9f9f9;
}

.bar {
    border-radius: 20px;
    width: 0%;
    height: 100%;
    transition: width;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(.36,.55,.63,.48);
}
.progress-bar {
    width: 450px;
    height: 40px;
    background: #fff;
    border-radius: 50px;
    border: 2px solid #fff;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: repeating-linear-gradient(
        90deg,
        #c60000,
        #c60000 15px,
        #8b0000 15px,
        #8b0000 25px
    );
    animation: loading 4s  linear;
}

@keyframes loading {
    0% { width: 0%; }
    100% { width: 100%; }
}
.mobile {
    display: none;
}

.shadow {
    /* 25 50 */
    box-shadow: 0px 45px 50px rgba(0, 0, 0, 0.25); 
}

.overlap {
    background-color: #ffadff;
    background-image: url('../../images/tarot_video_reding/Loading.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0 !important;
    /* background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232e78ff' fill-opacity='0.82'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); */
}
.progress{
    border-radius: 0 !important;
    border: 2px solid #000;
    padding: 2px;
    padding-right: 7px;
    margin-top: 0;
}

.tarotVideoReading2{ background: url(../../images/tarot_video_reding/tarotVideoBG.jpg)no-repeat; background-size: cover; background-position: center;}
.tarotVideoReading2 .top-head-reading h1{ font-size: 50px !important; margin: 0; margin-bottom: 20px;}
.tarotVideoReading2 .top-head-reading p{ font-size: 18px !important; margin: 0;}
.tarotVideoReading2 .top-head-reading{ padding: 100px 0;}
.tarotVideoReading2 .tarot-video-btn{padding: 15px 30px; border-radius: 30px; margin-bottom: 100px;}
.tarotVideoReading2 .tarot-video-btn p{ font-size: 18px !important;}
.tarotVideoReading2 .tarotRow { gap: 30px 0;}
.tarotVideoReading2 .question-category{ background-color: #ffecec; border: 2px solid #f20f0f; padding: 0; border-radius: 16px; overflow: hidden; transition: all 0.5s linear;}
.tarotVideoReading2 .question-category .categoryImg img{ border: none; border-radius: 0;  aspect-ratio: 4 / 3; object-fit: cover; transition: all 0.5s linear;}
.tarotVideoReading2 .question-category .categoryImg{ overflow: hidden; height: fit-content;}
.tarotVideoReading2 .question-category:hover .categoryImg img{ transform: scale(1.1);}
.tarotVideoReading2 .question-category:hover{ box-shadow: 0px 0px 10px 10px #f20f0f6a;}
.tarotVideoReading2 .question-category p{ font-size: 18px; padding: 20px; font-weight: 600; line-height: 1.4;}
.tarotVideoReading2 .cardImgSection .card-image-section img{ width: 100%;}
.tarotVideoReading2 .cardImgSection {display: flex; flex-wrap: wrap; gap: 20px;}
.tarotVideoReading2 .cardImgSection .card-image-section{ width: calc(20% - 16px); display: block;}
.tarotVideoReading2 .progress{ border-radius: 50px !important; overflow: hidden;}
.tarotVideoReading2 .yt-video iframe{ border-radius: 32px; aspect-ratio: 16 / 9; width: 100%; height: 100%;}

.tarot-video-reding-main-3{ background: url('../../images/tarot_video_reding/love_bg.jpg'); /* height: 100vh; */ background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; }
.tarot-video-reding-main-3 .top-head-reading h1{ font-size: 50px !important; margin: 0; margin-bottom: 20px;}
.tarot-video-reding-main-3 .top-head-reading p{ font-size: 18px !important; margin: 0;}
.tarot-video-reding-main-3 .tarot-video-btn{padding: 15px 30px; border-radius: 30px; margin-bottom: 50px;}
.tarot-video-reding-main-3 .gap30{ gap: 30px 0;}
.tarot-video-reding-main-3 .question-category{ border: none; padding: 10px; display: flex; flex-direction: column; gap: 10px;}
.tarot-video-reding-main-3 .question-category img{ border: none; aspect-ratio: 5 / 6; object-fit: cover;}
.tarot-video-reding-main-3 .question-category p{ margin: 0; padding: 0;}
.tarot-video-reding-main-3 .yt-video iframe{ border-radius: 16px; aspect-ratio: 16 / 9; width: 100%; height: 100%;}
.tarot-video-reding-main-3 .yt-video { padding: 16px; border-radius: 32px; background-color: #fff; max-width: 700px; margin: 0 auto;}


@media ( width <= 767px) {
    .tarotVideoReading2 .top-head-reading h1, .tarot-video-reding-main-3 .top-head-reading h1{ font-size: 25px !important;}
    .tarotVideoReading2 .top-head-reading{ padding: 50px 0;}
    .tarotVideoReading2 .tarot-video-btn{ margin-bottom: 50px;}
    .tarotVideoReading2 .tarot-video-btn p{ font-size: 16px !important;}
    .tarotVideoReading2 .cardImgSection{ gap: 10px; margin: 15px;}
    .tarotVideoReading2 .cardImgSection .card-image-section{  width: calc(20% - 8px);}
    .card-image-section img{ padding: 0;}
}

@media screen and (max-width: 500px) {
    .progress {
        width: calc(100vw * 0.7);
        /* height: calc(100vw * 0.7 * 0.145); */
        height: 40px;
        margin: 25px;
    }

    .github {
        margin: 20px;
    }

    .desktop {
        display: none;
    }

    .mobile {
        display: inherit;
    }
}