:root {
    --background-color: #ffffff;
    /* Background color for the entire website, including individual sections */
    --default-color: #444444;
    /* Default color used for the majority of the text content across the entire website */
    --heading-color: #433f39;
    /* Color for headings, subheadings and title throughout the website */
    --accent-color: #f19408;
    /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #ffffff;
    /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #ffffff;
    /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
    --card-color: #c73250;
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
    --nav-color: #ffffff;
    /* The default color of the main navmenu links */
    --nav-hover-color: #ffb03b;
    /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff;
    /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff;
    /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #444444;
    /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #ffb03b;
    /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

.navbar .navbar-brand {
    color: white;
}

.navbar-nav .nav-link {
    color: white;
    font-size: 16px;
    font-weight: bold;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}

.navbar-toggler {
    border: 2px solid rgb(240, 233, 231);
}

#hero-carousel {
    max-width: 100%;
}

#carouselExampleInterval .carousel-inner {

    max-height: 508px;
}

#carouselExampleInterval .carousel-item img {

    height: 508px;
}

.carousel .c-item {
    max-width: 100%;
    max-height: 450px;
}

.carousel .c-item .c-img {
    width: 100%;
    height: 450px;

}

.content {
    background-color: hwb(41 69% 8%);
    height: 500px;
}

.sidebarTop {
    background-color: #ccd0d5;
}

.sidebarBottom {
    background-color: #99d2f2;
}

.custom-row {
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}


.content-block,
.image-block {
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
}

.images-block img {
    padding: 5px;
    width: 100%;

}

.content-block {
    padding: 5px;
}

.section-title {
    text-align: center;
    padding-bottom: 60px;
    position: relative;
}

.section-title h2 {
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 700;
    padding: 8px 20px;
    margin: 0;
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    color: var(--accent-color);
    display: inline-block;
    text-transform: uppercase;
    border-radius: 50px;
    font-family: var(--default-font);
}

.section-title div {
    color: var(--heading-color);
    margin: 10px 0 0 0;
    font-size: 32px;
    font-weight: 700;
    font-family: var(--heading-font);
}

.section-title div .description-title {
    color: var(--accent-color);
}

.why-us .card-item {
    /* background: color-mix(in srgb, var(--default-color), transparent 97%); */
    /* background-color: #ffb03b; */
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    padding: 50px 30px;
    transition: all ease-in-out 0.3s;
    height: 100%;
    position: relative;
}

.why-us .card-item span {
    color: var(--accent-color);
    display: block;
    font-size: 28px;
    font-weight: 700;
}

.why-us .card-item h4 {
    font-size: 24px;
    font-weight: 600;
    padding: 0;
    margin: 20px 0;
}

.why-us .card-item h4 a {
    color: var(--heading-color);
}

.why-us .card-item p {
    font-size: 15px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    margin: 0;
    padding: 0;
}

.why-us .card-item:hover {
    /* background-color: #c73250; */
    padding: 30px 30px 70px 30px;
}

.why-us .card-item:hover span,
.why-us .card-item:hover h4 a,
.why-us .card-item:hover p {
    color: var(--contrast-color);
}


/* products page design */

.products .card .card-image {
    text-align: center;
}


.stretched-link {
    text-decoration: none;
}

#hero-carousel .carousel-caption h2 {
    animation: fadeInDown 1s both;
}

#hero-carousel .carousel-caption p {
    animation: fadeInDown 1s both 0.2s;
}

#hero-carousel .carousel-caption .btn {
    animation: fadeInUp 1s both 0.4s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.footer {
    color: #ffffff;

    background-color: var(--background-color);
    font-size: 14px;
    padding: 40px 0 0 0;
    position: relative;
}

.dark-background {
    background-color: #1e160d;
}

.footer .icon {
    color: var(--accent-color);
    margin-right: 15px;
    font-size: 24px;
    line-height: 0;
}

.contacticon {
    background-color: rgba(0, 0, 40, 0.955);
    color: white;
    border: 1px solid white;
    padding: 15px;
}