body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    
}

.cw-IframeLoadingBook {
    background: url(Pictures/Common/Loading_106.gif) center center no-repeat;
    width: 100%;
    height: 100%;
}

.cw-IframeLoadingStore {
    background: url(Pictures/Common/Loading_106.gif);
    background-repeat: no-repeat;
    background-position: 50% 25%;
    width: 100%;
    height: 100%;
}


/* Cards Carusel */
.cards-wrapper {
    display: flex;
    justify-content: center;
}

.card {
    box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
    border: none;
    border-radius: 0;
}

.carousel-inner a {
    text-decoration: none;
}

.carousel-control-prev,
.carousel-control-next {
    background-color: #e1e1e1;
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}


/* ---------- Image Grow ----------- */
.header-image {
    object-fit: cover; /* Ensures the image covers the container while maintaining aspect ratio */
    transform: scale(0.97); /* Start with a slightly smaller scale */
    animation: growImage 5s ease-out forwards; /* Apply the animation */
}

@keyframes growImage {
    0% {
        transform: scale(0.97);
    }

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


/* ---------- Header Slogan Animation ----------- */
.cw-header-slogan-anim1 {
    animation: fadeInSlogan 3s ease forwards;
    animation-delay: 1s;
}

.cw-header-slogan-anim2 {
    animation: fadeInSlogan 3s ease forwards;
    animation-delay: 2.5s;
}

.cw-header-btn-anim {
    animation: fadeInSlogan 2s ease forwards;
    animation-delay: 4s;
}

.cw-header-ddl-anim {
    animation: fadeInSlogan 3s ease forwards;
    animation-delay: 0.5s;
}

@keyframes fadeInSlogan {
    0% {
        opacity: 0; /* Slogan is completely transparent at the start */
    }

    100% {
        opacity: 1; /* Slogan is fully visible at the end */
    }
}


/* ---------- Header Slogan Font Size ----------- */
/* If the screen size is 769px wide or more */
@media screen and (min-width: 769px) {
    .cw-header-slogan-font {
        font-family: 'Open Sans';
        font-size: 3vw;
        font-weight: 700;
    }
}

/* If the screen size is 768px wide or less */
@media screen and (max-width: 768px) {
    .cw-header-slogan-font {
        font-family: 'Open Sans';
        font-size: 4vw;
        font-weight: 700;
    }
}