button {
    font-weight: 500;
    /* padding: 0.6rem 1.2rem; */
    border: none;
    cursor: pointer;
}

/* swiper styling */
.custom-bullet {
    background-color: #ccc !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 9999px !important;
    display: inline-block !important;
    margin: 0 4px !important;
    transition: all 0.3s ease !important;
}

.custom-bullet-active {
    background-color: #21526e !important;
    width: 24px !important;
}

/*  */

.goog-logo-link,
.goog-te-gadget span {
    display: none !important;
}

.goog-te-gadget {
    font-size: 0;
}

#google_translate_element {
    display: none !important;
}

.custom-card {
    height: 12rem !important;
    width: 12rem !important;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.slider-pagination-bullet {
    transition: all 0.3s ease;
}

.slider-pagination-bullet-active {
    width: 24px;
    background-color: white;
}

.slide {
    transition: opacity 0.5s ease;
}

.slide-hidden {
    opacity: 0;
    pointer-events: none;
}

/* previewer */
.thumbnail {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.thumbnail:hover {
    opacity: 0.9;
}

.thumbnail.active {
    border: 2px solid #0ea5e9;
}

.preview-image {
    transition: opacity 0.3s ease;
}

.preview-image.fade {
    opacity: 0.5;
}

@keyframes customSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.animation {
    animation: customSpin 60s linear infinite;
}

.hour-hand {
    transform-origin: 50% 50%;
    animation: spin-hour 720s linear infinite;
    stroke: var(--primaryGreen);
}

.minute-hand {
    transform-origin: 50% 50%;
    animation: spin-minute 60s linear infinite;
    stroke: var(--primaryGreen);
}

@keyframes spin-hour {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin-minute {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@media (max-width: 639px) {
    .custom-card {
        height: 14rem !important;
        width: 14rem !important;
    }
}

/* /about css/ */
.gallery {
    --g: 8px;
    --s: 400px;

    display: grid;
    border-radius: 50%;
}

.gallery>img {
    grid-area: 1/1;
    width: 300px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    transform: translate(var(--_x, 0), var(--_y, 0));
    cursor: pointer;
    z-index: 0;
    transition: .3s, z-index 0s .3s;
}

.gallery img:hover {
    --_i: 1;
    z-index: 1;
    transition: transform .2s, clip-path .3s .2s, z-index 0s;
}

.gallery:hover img {
    transform: translate(0, 0);
}

.gallery>img:nth-child(1) {
    clip-path: polygon(50% 50%, calc(50%*var(--_i, 0)) calc(120%*var(--_i, 0)), 0 calc(100%*var(--_i, 0)), 0 0, 100% 0, 100% calc(100%*var(--_i, 0)), calc(100% - 50%*var(--_i, 0)) calc(120%*var(--_i, 0)));
    --_y: calc(-1*var(--g))
}

.gallery>img:nth-child(2) {
    clip-path: polygon(50% 50%, calc(100% - 120%*var(--_i, 0)) calc(50%*var(--_i, 0)), calc(100% - 100%*var(--_i, 0)) 0, 100% 0, 100% 100%, calc(100% - 100%*var(--_i, 0)) 100%, calc(100% - 120%*var(--_i, 0)) calc(100% - 50%*var(--_i, 0)));
    --_x: var(--g)
}

.gallery>img:nth-child(3) {
    clip-path: polygon(50% 50%, calc(100% - 50%*var(--_i, 0)) calc(100% - 120%*var(--_i, 0)), 100% calc(100% - 120%*var(--_i, 0)), 100% 100%, 0 100%, 0 calc(100% - 100%*var(--_i, 0)), calc(50%*var(--_i, 0)) calc(100% - 120%*var(--_i, 0)));
    --_y: var(--g)
}

.gallery>img:nth-child(4) {
    clip-path: polygon(50% 50%, calc(120%*var(--_i, 0)) calc(50%*var(--_i, 0)), calc(100%*var(--_i, 0)) 0, 0 0, 0 100%, calc(100%*var(--_i, 0)) 100%, calc(120%*var(--_i, 0)) calc(100% - 50%*var(--_i, 0)));
    --_x: calc(-1*var(--g))
}


/* footer animation */

.spark-container {
    position: relative;
    overflow: hidden;
}

i {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #cca13f;
    pointer-events: none;
    animation: animate 2s linear forwards;
}

@keyframes animate {
    0% {
        opacity: 1;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0;
        transform: translate(var(--x), var(--y));
    }
}


/* Book */
.book {
    margin-top: 12vh;
    position: relative;
    width: 56vh;
    height: 80vh;
    transition: transform 0.5s;
}

.paper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    perspective: 1500px;

}

.front,
.back {
    background-color: white;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: left;
    transition: transform 0.5s;
}

.front {
    z-index: 1;
    backface-visibility: hidden;
    border-left: 3px solid #fcf4e9;
}

.back {
    z-index: 0;
}

.front-content,
.back-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-content {
    transform: rotateY(180deg)
}

/* Paper flip effect */
.flipped .front,
.flipped .back {
    transform: rotateY(-180deg);
}

/* Controller Buttons */
.arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    margin-top: 12vh;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

body button {
    /* position: relative; */
    z-index: 5;
    border: none;
    cursor: pointer;
    margin: 10px;
}

button:focus {
    outline: none;
}

button i {
    color: #636363;
}

i {
    font-size: 50px;
    color: gray;
}

/* Style book covers here */
#f1,
#b7 {
    background-color: #9b7e58e8;
}

/* style content here */
.paper img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}


/* Paper stack order */
#p1 {
    z-index: 7;
}

#p2 {
    z-index: 6;
}

#p3 {
    z-index: 5;
}

#p4 {
    z-index: 4;
}

#p5 {
    z-index: 3;
}

#p6 {
    z-index: 2;
}

#p7 {
    z-index: 1;
}