.icon {
            align-items: center;
            background-color: rgba(68, 65, 65, .5);
            border-radius: 50%;
            bottom: 1.2rem;
            color: var(--golden-tainoi);
            display: flex;
            font-size: 1.5rem;
            height: 2.5rem;
            justify-content: center;
            left: 1.1rem;
            position: absolute;
            width: 2.5rem;
        }



        .card-title {
            bottom: 1rem;
            color: var(--white);
            display: flex;
            flex-direction: column;
            font-size: 1rem;
            left: 15px;
            line-height: 1.1;
            opacity: 0;
            position: absolute;
            text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.5);
            transform: translateX(2rem);
            transition: 290ms cubic-bezier(0.05, 0.61, 0.41, 0.95) 300ms;
            transition-property: opacity, transform;
            user-select: none;
            white-space: nowrap;
        }


        /*/////////////////////////////////// CARD /////////////////////////////////////////////////////////////////////////////*/
        .slider-card {
            width: 290px;
            min-width: 290px;
            height: 450px;
            background-color: #F2F2F2;
            border-radius: 10px;
            position: relative;
            z-index: 100;
            margin: 15px 5px;
            min-height: 356px;
            cursor: pointer;
            transition: all .25s ease;
            box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .08);
        }



        .slider-card:hover {
            /*transform:translate(0, -10px);*/
            box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
            border-bottom-right-radius: 12px;
            border-bottom-left-radius: 12px;

        }

        #slider-card-artical {
            width: 290px;
            min-width: 290px;
            height: 350px;
            background-color: #F2F2F2;
            border-radius: 10px;
            position: relative;
            z-index: 100;
            margin: 15px 5px;
            min-height: 356px;
            cursor: pointer;
            transition: all .25s ease;
            border: solid 0.5px #eee;

            transition-duration: .3s;
        }

        #slider-card-artical:hover {
            /*transform:translate(0, -10px);*/
            border: solid 1px #eee;
            box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.9) 0px 0px 0px 1px;
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
            transform: translateY(-5px);
            opacity: 1;
            transition-duration: .3s;
        }



        .slider-card h4 {
            position: absolute;
            left: 0;
            top: 0;
            padding: 15px;
        }

        .slider-card i {
            /* position:absolute; */
            right: 0;
            top: 0;
            padding: 15px;
            font-size: 1.4rem;
            line-height: 3.2rem;
        }

        .slider-card .card-text {
            padding: 20px;
        }

        p {
            margin-top: 10px;
        }

        .slider-card .card-img {
            transform: translate(90px, -10px);
            margin: 0 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .35s ease-out;
        }

        .slider-card img {
            height: 200px;
        }

        @media only screen and (min-width:1300px) {
            #carouselImage {
                position: absulute;
                transform: translateY(-50px);
            }
        }

        @media only screen and (min-width:1500px) {
            #carouselImage {
                position: absulute;
                transform: translateY(-75px);
            }
        }

        @media only screen and (min-width:1600px) {
            #carouselImage {
                position: absulute;
                transform: translateY(-100px);
            }
        }


        .slider-card img.blur {
            position: absulute;
            filter: blur(15px);
            /*z-index:-1;*/
            opacity: .40;
            transform: translate(-160px, 30px);
            transition: all .35s ease-out;
        }

        .slider-card:hover .card-img {
            transform: translate(70px, -15px);
        }

        .slider-card:hover .card-img img.blur {
            transform: translate(-100px, 35px) scale(.85);
            opacity: .25;
            filter: blur(20px);
        }

        .card-content {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            overflow: auto;
            /* padding-top: 100px;*/
            /*padding-left:60px;*/
            /*padding-right: 50px; */
            scroll-behavior: smooth;
        }

        .card-content {
            overflow: hidden;

        }

        .card-content:after {
            content: '';
            display: block;
            min-width: 20px;
            height: 100px;
            position: relative;
        }

        .btn {
            min-width: 20px;
            margin: auto 5px;
            height: 30px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.9);
            border: 0px;
            outline: none;
            cursor: pointer;
            z-index: 10;
            box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .08);
            transition: all .25s ease;
        }

        .btn:hover {
            box-shadow: 0px 17px 35px 0px rgba(0, 0, 0, .07);
        }

        #animation-slider {
            animation-name: example;
            animation-duration: 4s;
        }



        @keyframes example {
            0% {
                bottom: 10px;
            }

            25% {
                bottom: 200px;
            }
        }

        /*/////////////////////////////////// slider /////////////////////////////////////////////////////////////////////////////*/

        .slider {
            display: flex;
            alogn-items: center;
            justify-content: center;
            width: 100%;
            /*height:53vh;*/
            overflow: hidden;
        }

        .slider:after {
            content: '';
            left: 20px;
            position: absolute;
            width: 150px;
            z-index: 10;
            pointer-event: none;
        }

        .slider:before {
            content: '';
            right: 20px;
            position: absolute;
            width: 150px;
            z-index: 10;
            pointer-event: none;
        }


        /*/////////////////////////////////// mineCard /////////////////////////////////////////////////////////////////////////////*/
        #mineCard {
            border-radius: 5px;
            transition-duration: .3s;
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
            ;
        }

        #mineCard:hover {
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
            transform: translateY(-5px);
            opacity: 1;
            transition-duration: .3s;
        }


        #circleImage {
            width: 100%;
            /* or any custom size */
            height: 100%;
            object-fit: contain;
        }

        /*/////////////////////////////////// circleImageBox /////////////////////////////////////////////////////////////////////////////*/
        #circleImageBox {
            min-width: 100%;
            min-height: 250px;
            max-width: 300px;
            max-height: 300px;
            border-radius: 100%;
            margin-left: 25px;
            margin-right: 25px;
            background: rgb(255, 255, 255) no-repeat center;
            overflow: hidden;
        }


        @media only screen and (max-width:430px) {
            #circleImageBox {
                min-width: 225px;
                min-height: 225px;
                max-width: 250px;
                max-height: 250;
                border-radius: 100%;
                margin-left: 0px;
                margin-right: 0px;
                background: rgb(255, 255, 255) no-repeat center;
                overflow: hidden;
            }
        }


        /*/////////////////////////////////// video /////////////////////////////////////////////////////////////////////////////*/
        .video-card {
            overflow: hidden;
            padding-bottom: 75%;
        }

        @media(min-width: 768px) {
            .video-card {
                padding-bottom: 50%;
            }
        }

        .video-card .hover {
            cursor: pointer;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            background: rgba(0, 0, 0, 0.75);
            transition: opacity 0.4s;
        }

        .video-card:hover .hover {
            opacity: 1;
        }

        .video-card .video-title {
            opacity: 1;
            background: rgba(0, 0, 0, 0.5);
            bottom: 0;
            left: 0;
            right: 0;
            cursor: pointer;
            transition: opacity 0.4s;
        }

        .video-card:hover .video-title {
            opacity: 0;
        }

        /* //////////////////////////////////////////////////////////////////////////////////// Ads //////////// */
        .image-container {
            position: relative;
            width: var(--image-width);
            height: var(--image-height);
            overflow: hidden;
            object-fit: cover;
            /* Just for style */
            border-radius: 5px;
            /*box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4);*/
        }

        .image-container>img {
            /* We set the image to cover the size of the container (no stretch) */
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);

            /* Positioning the overlay content */
            display: flex;
            align-items: flex-end;
        }

        .image-overlay-body {
            margin: 10px;
            background: rgb(255, 255, 255);
            padding: 15px;
            border-radius: 10px;
            width: 100%;
        }


        /* Animation types */

        .animate-opacity {
            opacity: 100%;
            transition: opacity .6s ease;
        }

        .image-container:hover .animate-opacity {
            opacity: 0;
        }

        .animate-up {
            box-shadow: 0 -10px 100px 0 rgba(0, 0, 0, 0.5);
            top: 0%;
            transition: top 0.7s ease;
        }

        .animate-up-ads {
            box-shadow: 0 -10px 100px 0 rgba(0, 0, 0, 0.5);
            top: 100%;
            transition: top 0.7s ease;
        }

        .image-container:hover .animate-up-ads {
            top: 0;
            transition: .6s all;
        }




        .image-container:hover .animate-up {
            top: 100%;
            opacity: .5;
            transition: .6s all;
        }

        .animate-down {
            box-shadow: 0 -10px 100px 0 rgba(0, 0, 0, 0.5);
            top: 0%;
            transition: .6s all;

        }

        .image-container:hover .animate-down {
            /*top: -65%;*/
            opacity: .5;
            width: 100%;

        }

        hr {
            border: none;
            height: 1px;
            background-color: rgba(0, 0, 0, 0.7);
        }

        .image-list {
            display: flex;
            gap: 25px;
        }

        .image-overlay-body {
            margin: 10px;
            background: rgb(255, 255, 255);
            padding: 15px;
            border-radius: 10px;
            width: 100%;
        }

        .image-overlay-body p,
        .image-overlay-body h3 {
            margin: 0;

        }

        /* //////////////////////////////////////////////////////////////////////////////////// Youtube //////////// */



        .responsive-iframe {
            width: 100%;
            height: 100%;
        }

        /*///////////////////////////////////////////////////////////////////////////////////////////// Gallery ////////////////////////////*/
        .container0 {
            display: flex;
        }

        .panel {
            position: relative;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 45vh;
            border-radius: 50px;
            color: #ffffff;
            cursor: pointer;
            flex: .5;
            margin: 10px;
            transition: all 700ms ease-in;
        }

        .panel h3 {
            font-size: 15px;
            position: absolute;
            bottom: 20px;
            left: 20px;
            margin: 0;
            opacity: 0;
            max-width: 85%;
            overflow: hidden;

        }

        .panel.active {
            flex: 5;
        }

        .panel.active h3 {
            opacity: 1;
            transition: opacity .3s ease-in .4s;

        }

        @media(max-width:480px) {
            .container {
                width: 100vw;
            }

            .panel:nth-last-of-type(6),
            .panel:nth-last-of-type(7) {
                display: none;
            }
        }

        p img {
            display: none;
            Visibility: none;
        }


        #writer-name-artical {
            width: 85%;
            position: absolute;
            bottom: 0px;
            right: 20px;
            align-content: center;
            bottom: -15px;
            background-color: gray;
            border-radius: 50px;

        }

        #writer-name-artical h6 {
            font-size: 12px;
        }


        p {
            display: -webkit-box;
            max-width: 250px;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }