@font-face {
    font-family: 'Pink Blue';
    src: url('./assests/font/pinky_blues/Pinky\ Blues.otf');
}

* {
    overflow-x: hidden;
}

body {
    font-family: 'Pink Blue' !important;
    text-transform: uppercase;

}

.swal-custom-popup {
    padding: 1.5rem;
    /* Adjust padding if needed */
}

.swal-custom-icon {
    overflow: hidden    !important;
    margin: 0 auto;
    /* Center the icon */
}




/* Webkit-based browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    /* For horizontal scrollbars */
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #FDB913, #F98300);
    /* Gradient for the thumb */
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
    /* Smooth edges */
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #F98300, #FDB913);
    /* Change on hover */
}

::-webkit-scrollbar-track {
    background: #050A30;
    /* Dark background for the track */
    border-radius: 10px;
}

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #FDB913 #050A30;
    /* Thumb color, Track color */
}

.bg-home {
    background-image: url('./assests/images/1.png') !important;
    /* Corrected 'assests' typo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    overflow: hidden;
    /* Adds padding to prevent collapse */
}

.header {
    /* box-shadow: 0px 5px 400px 0px #0000001C !important; */
    width: 90%;
    margin: 20px auto;
    box-shadow: 0px 5px #000000d7;
}

.res-none {
    display: none !important;
}

.text-heading {
    font-size: 112px;
}

.box-shadow {
    box-shadow: 0px 5px #000000d7;
}

/* Container to hold the icons */
.icon-container {
    display: flex;
    gap: 20px;
    /* Adjust spacing between images */
    overflow: hidden;
    /* Hide overflowing images */
    white-space: nowrap;
    /* Prevent wrapping */
    width: 100%;
    border-width: 3px 0;
    /* Top and bottom border */
}

.icon-container img {
    height: 80px;
    /* Adjust height as needed */
    flex-shrink: 0;
    /* Prevent images from shrinking */
    animation: scroll-icons 10s linear infinite;
}

.footer {
    background-image: url('./assests/images/footer.png') !important;
    /* Corrected 'assests' typo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}

@keyframes scroll-icons {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.res-block {
    display: block;
}

.journey {
    background-image: url('./assests/images/journey.png') !important;
    /* Corrected 'assests' typo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    padding: 10px 0;
}

.book-container {
    background-image: url('./assests/images/b1.png');
    /* Replace with your book image path */
    background-size: contain;
    /* Ensures the image covers the container */
    background-repeat: no-repeat;
    width: 100%;
    /* Set your desired width */
    height: 500px;
    /* Set your desired height */
    display: flex;
    /* Flexbox to center content */
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    position: relative;
    text-align: center;
    /* Ensure text is centered */
}

/* Image within the book */



/* Paragraph styling */
.center-paragraph {
    font-size: 18px;
    color: #333;
    /* Adjust for readability */
    /* Optional: Limit width for better readability */
}

/* Initial hidden state */
.hidden-on-scroll {
    opacity: 0;
    transform: translateX(-100px);
    /* Adjust for "coming from left" effect */
    transition: all 0.8s ease-in-out;
    /* Smooth animation */
}

.slide-from-right {
    transform: translateX(100px);
    /* Start from right */
}

/* Visible state when in view */
.animate {
    opacity: 1;
    transform: translateX(0);
}

@media screen and (max-width: 1024px) {
    .res-none {
        display: block !important;
    }

    .res-block {
        display: none !important;
    }

    .text-heading {
        font-size: 56px;
    }
}