@import url('https://fonts.googleapis.com/css2?family=Anton&family=Caveat:wght@400..700&family=Funnel+Sans:ital,wght@0,300..800;1,300..800&family=Indie+Flower&family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&display=swap');

:root {
    --blue: rgb(1, 79, 134);
    --navy-blue: rgb(1, 42, 74);
    --light-blue: #61a5c2;
    --black: rgb(0, 0, 0);
    --white: rgb(255, 255, 255);
    --light-bg: rgb(214, 204, 194);
    --beige: rgb(174, 138, 103);
    --red: rgb(187, 53, 53);
    --font-primary: "Libre Bodoni", serif;
    --font-secondary: "Indie Flower", cursive;
    --font-heading: "Anton", sans-serif;
}


/**animation section**/
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes glow {
    0% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
    }

    100% {
        text-shadow: 0 0 15px rgba(255, 255, 255, 1);
    }
}

@keyframes slideIn {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes colorChange {
    0% {
        color: var(--white);
        /* Start with white */
    }

    50% {
        color: var(--light-bg);
        /* Midway color */
    }

    100% {
        color: var(--white);
        /* Final color */
    }
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/**SCROLLING**/
/*just add the class*/
.scroll-animate {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.show {
    opacity: 1;
    transform: scale(1);
}

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

body {
    background-color: #e3e6e9 !important
}

header {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

header h1 {
    text-align: center;
    font-size: 50px;
    color: #000;

}

/* nav start */
.navbar {
    padding: 1.1rem 1rem !important;
    z-index: 1050 !important;
    background-color: rgba(226, 214, 202, 0.9) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}


.nav-link {
    font-weight: 500 !important;
    font-size: 16px !important;
    font-family: var(--font-primary) !important;
    color: var(--navy-blue) !important;
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.nav-link:hover {
    color: var(--white) !important;
    text-decoration: none !important;
    background-color: var(--blue) !important;
    border-radius: 50px !important;
    transform: translateY(-4px) !important;
}

.Login-button {
    font-family: var(--font-primary);
    background-color: var(--blue) ;
    color: var(--white);
    font-size: 15px;
    padding: 8px 20px;
    margin-left: 20px;
    border-radius: 50px;
    text-decoration: none;
}

.Login-button:hover {
    background-color: var(--light-blue);
}

/* search form start */
form.d-flex .form-control {
    border-radius: 50px;
}

form.d-flex .btn {
    background-color: var(--blue);
    color: var(--white);
    font-size: 15px;
    font-family: var(--font-primary);
    padding: 8px 12px;
    margin-left: 8px;
    border-radius: 50px;
    text-decoration: none;
}

form.d-flex .form-control:focus {
    box-shadow: 0 0 10px rgba(1, 79, 134, 0.5);
    border-color: rgba(1, 42, 74, 0.5);
}

/* search form end */
/* icons start */
.navbar .container-fluid .navbar-brand img,
.navbar .container-fluid .navbar-brand svg {
    width: 40px;
    border-radius: 8px;
}

/* Style for the cart icon */
.navbar .container-fluid .collapse .fa-solid {
    margin-left: 90px;
    font-size: 25px;
    color: var(--blue);
    text-decoration: none;
}

.navbar .container-fluid .collapse .fa-solid:hover {
    color: var(--light-blue);

}

/* Style for the cart icon */
.navbar .container-fluid .collapse .fa-solid {
    margin-left: 120px;
    font-size: 25px;
    color: var(--blue);
    text-decoration: none;
}

.navbar .container-fluid .collapse .fa-solid:hover {
    color: var(--light-blue);

}

.navbar-brand img {
    height: 55px;
    width: 55px !important;
}

/* icons start */
/* icons start */
/* nav end */

/* Main Section After nav bar start */
/*background*/
#nx-nav {
    background-image: url(/Assets/imgs/section\ backgroound.jpg);
    /* Fix image path */
    padding-top: 7rem;
    padding-bottom: 13rem;
    position: relative;
    z-index: 2;
}

.overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(rgba(1, 79, 134), rgba(1, 42, 74, 0.7));
    z-index: -1;
}

.bg-cover {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.hero-section {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*text in the section*/
.nx-nav-row h1 {
    font-family: var(--font-heading) !important;
    font-size: 7rem !important;
    font-weight: 300 !important;
    animation: glow 1.5s ease-in-out infinite alternate, fadeInScale 2s ease-out forwards, colorChange 3s ease-in-out infinite alternate;
}

.nx-nav-row p {
    font-family: var(--font-secondary) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
}

/* Buttons */
.btn {
    padding: 14px 22px;
    font-size: 1rem;
    font-family: var(--font-secondary);
}

.btn-main {
    background: linear-gradient(to right, var(--light-blue), var(--navy-blue));
    border-radius: 100px !important;
    margin: 15px 15px;
    border: none;
    font-weight: 600;
    color: var(--white) !important;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.btn-container {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.btn-main:hover {
    background: linear-gradient(to right, var(--navy-blue), var(--light-blue));
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
    color: var(--light-bg) !important;
    animation: pulse 1s infinite;
    /* pulse effect on hover */
}

.btn-main:focus {
    outline: 4px solid var(--light-blue);
    /* Enhanced focus outline */
    outline-offset: 2px;
    background-color: var(--navy-blue);
    /* Optional background change on focus */
}

.btn-main:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transform: translateY(1px);
}

/* Main Section After nav bar end */
/**some grides**/

.ex-row {
    padding-bottom: 3rem;
    padding-top: 3rem;
}

/* Style columns */
.ex-col {
    text-decoration: none;
    font-family: var(--font-primary);
    color: var(--black);
    margin: 0 10px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    font-size: 1.1rem;
    padding: 10px 0;
    border-radius: 2rem;
}


.ex-col:hover {
    color: var(--primary-color);
}

/* Responsiveness */
@media (max-width: 768px) {
    .ex-col {
        font-size: 1rem;
        padding: 8px 0;
    }
}


.ex-col:hover {
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
}

/*****************************************************************************************/
/**books mini view decoration start**/
.best-seller h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center !important;
    margin-top: 3rem;
    margin-bottom: 3rem;
    font-family: var(--font-heading);
    font-size: 4rem !important;
    width: 100%;

}

.books-mini-view {
    display: flex;
    gap: 3rem;
    justify-content: center;
    flex-wrap: wrap;
}

.books-mini-view a {
    text-decoration: none;
    color: var(--black) !important;
}

.card-img-top {
    width: 100%;
    height: 20rem;
    object-fit: cover;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.card-img-top:hover {
    transform: scale(1.05);
}

.btn-book-card {
    color: var(--white) !important;
    margin-bottom: 2rem;
    margin-top: 2rem;
    background-color: var(--beige) !important;
    border: 2px solid var(--light-bg) !important;
    font-family: var(--font-primary) !important;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 16px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}


.btn-book-card:hover {
    background-color: var(--blue) !important;
    color: var(--beige) !important;
    transform: translateY(-4px);
}


.Recently-added h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center !important;
    margin-top: 3rem;
    margin-bottom: 3rem;
    font-family: var(--font-heading);
    font-size: 4rem !important;
    width: 100%;

}

.Deal-of-the-day h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center !important;
    margin-top: 3rem;
    margin-bottom: 3rem;
    font-family: var(--font-heading);
    font-size: 4rem !important;
    width: 100%;
}

.card-text {
    font-size: x-small;
}

.card-title {
    font-size: small;
}

/**books mini view decoration end**/
/**Slider Start**/
.slides-Services h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center !important;
    margin-top: 3rem;
    margin-bottom: 2rem;
    font-family: var(--font-heading);
    font-size: 4rem !important;
    width: 100%;

}

.slides-Services h4 {
    font-size: 4rem !important;
    -webkit-text-stroke: 1px var(--navy-blue);
}

.slides-Services img {
    object-fit: cover;
}

/**Slider ends**/
/******************************************************************************************************/
/** About Us Section Start **/
/* General Styling */
.responsive-container-block {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
}

.About-Us-Container {
    margin-top: 4rem;
    margin-bottom: 4rem;
    padding: 2rem;
    background: url("/Assets/imgs/About-Us.png") no-repeat center center / cover;
    min-height: 37.5rem;
}

.Container {
    max-width: 50rem;
    width: 90%;
    padding: 2rem;
    background-color: white;
    border-radius: 0.7rem;
    box-shadow: 0 0.3rem 0.7rem rgba(0, 0, 0, 0.1);
    text-align: center;
}

.text-blk {
    margin: 0;
    padding: 0;
}

.heading {
    font-family: var(--font-heading);
    font-size: 2.3rem;
    line-height: 2.9rem;
    font-weight: 300;
    color: var(--black);
    margin-bottom: 1.3rem;
}

.subHeading {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    line-height: 1.7rem;
    color: var(--navy-blue);
    margin-bottom: 2.5rem;
    line-height: 3rem;
}

.social-icons-container {
    display: flex;
    justify-content: center;
    gap: 1.4rem;
}

.social-icon {
    font-size: 3rem;
    padding: 0.7rem;
    color: var(--black);
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icon:hover {
    color: var(--beige);
    transform: scale(1.1);
}

/* Responsive Styling */
@media (max-width: 768px) {
    .heading {
        font-size: 1.9rem;
        line-height: 2.5rem;
    }

    .subHeading {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .social-icon {
        font-size: 1.5rem;
    }
}

@media (max-width: 500px) {
    .Container {
        padding: 1rem;
    }

    .heading {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .subHeading {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}

/** About Us Section End **/

/*******************************************************************************************************************************/
/**Coustomer reviwe**/

/**footer start**/
.main-footer {
    background-color: var(--navy-blue);
    color: var(--white);
    padding-top: 4rem;
    text-align: center;
}

/* Social Links */
.social-linkes-container {
    display: flex;
    justify-content: center;
}

.social-linkes-container i {
    text-decoration: none;
    padding: 10px;
    background-color: var(--white);
    border-radius: 50%;
    margin: 2rem;
}

.social-linkes-container i {
    font-size: 2rem;
    color: var(--navy-blue);
    transition: color 0.2s ease, transform 0.2s ease;
}

.social-linkes-container i:hover {
    color: var(--beige);
    transform: scale(1.1);
}

/* footer links */
.footer-ul-container {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    padding-bottom: 2rem;
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.footer-ul-container .footer-item {
    text-decoration: none;
    color: var(--white);
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-ul-container .footer-item:hover {
    color: var(--beige);
}

/* store name and copy right */
.footer-company {
    margin-top: 2rem;
    font-size: 14px;
    color: var(--white);
    opacity: 0.8;
}

.main-footer p {
    background-color: rgb(0, 16, 59);
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
}

/**footer end**/