.elementor-kit-9{--e-global-color-primary:#D94E2F;--e-global-color-secondary:#54595F;--e-global-color-text:#FFFFFF;--e-global-color-accent:#D70B22;--e-global-color-4f20257:#AA2204;--e-global-color-8f855d0:#000000;--e-global-color-10c3cd9:#DF401D;--e-global-color-73ad86f:#00233C;--e-global-color-461d5c9:#C9934D;--e-global-color-a653312:#D9D9D9;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#000000;color:#FFFFFF;font-family:"Montserrat", Sans-serif;--e-page-transition-entrance-animation:e-page-transition-fade-out;--e-page-transition-exit-animation:e-page-transition-fade-in;--e-page-transition-animation-duration:900ms;}.elementor-kit-9 e-page-transition{background-color:#131212;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//*
#############################

View More Slide down and up for more information

#############################
*/ 


.th-container-learnmore {
    position: relative;
    height: 140px; /* Initial height */
    overflow: hidden;
    transition: height 0.5s ease; /* Smooth transition for expanding height */
}

/* Fading effect at the bottom */
.th-container-learnmore::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px; /* Height of the fading effect */
    background: linear-gradient(to bottom, transparent, black); /* Adjust the color to match your container's background */
    z-index: 4;
}
.th-learnmore-icon {
    position: absolute;
    bottom: -24px; /* Positioning at the bottom */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    cursor: pointer; /* Change cursor to indicate it's clickable */
    /* Add more styling for the icon as needed */
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) { /* Adjust max-width as needed for your mobile breakpoint */
    .th-container-learnmore {
        display: inline-block; /* Change display to inline-block on mobile devices */
        /* Additional mobile-specific styles can go here */
        padding-bottom:70px;
    }
}

/*
#############################

This effect is for the button, slide effect for the text, and a smooth animation.

#############################
*/

/* Base style for the button container */
.th-container-button {
    position: relative;
    overflow: hidden;
    width: 8%;
    border-radius: 0;
    transition: border-radius 0.5s ease, width 0.5s ease;
}

/* Media query for mobile devices */
@media (max-width: 750px) {
    .th-container-button {
        width: 15%; /* Increased width on mobile devices */
    }
}

/* Style for the icon container */
.th-button-icon {
    width: 100%;
    position: relative;
    z-index: 2;
    cursor: pointer;
    transition: border-radius 0.5s ease, width 0.5s ease, 0.1s; /* Add 0.1s delay after border-radius change */
    border-radius: 0%; /* Initial border-radius */
}

/* Style for the text container */
.th-button-text {
    position: absolute;
    top: 0;
    left: 100%; /* Initially positioned right outside the button container */
    transition: left 0.1s ease 0.0s;
    height: 100%;
    z-index: 1;
}

/* Slide in text and adjust widths when the icon is hovered */
.th-container-button:hover .th-button-icon {
    border-radius: 0; /* Change border-radius on hover */
    width: 20%; /* Reduce width to 20% on hover */
}

.th-container-button:hover .th-button-text {
    left: 20%; /* Slide in the text to be visible within the container */
}

.th-container-button:hover {
    width: 250px; /* Expand button container width on hover */
    border-radius: 0px;
}

/*
#############################

This effect is for the slider, has increase in size, and a smooth animation.

#############################
*/

/* Style for all slides within #th-slide */
#th-slide .swiper-slide {
    filter: grayscale(40%); /* Make inactive slides grayscale */
    opacity: 0.5; /* Lower opacity for inactive slides */
    transition: filter 0.5s ease, opacity 0.5s ease; /* Smooth transition for filter and opacity */
}

/* Specific style for the active slide within #th-slide */
#th-slide .swiper-slide-active, 
#th-slide .swiper-slide:hover {
    filter: grayscale(0%); /* Active or hovered slide in full color */
    opacity: 1; /* Full opacity for the active or hovered slide */
}

/* Set height for .th-container-slide within active .swiper-slide in #th-slide */
#th-slide .swiper-slide-active .th-container-slide {
    height: 280px !important; /* Height when active */
    transition: height 0.3s ease; /* Smooth transition for height */
}

/* Set default height for .th-container-slide in #th-slide */
#th-slide .swiper-slide .th-container-slide {
    height: 180px; /* Default height */
    transition: height 0.3s ease; /* Smooth transition for height */
}

/* Base style for container slide in #th-slide */
#th-slide .th-container-slide {
    position: relative;
    overflow: hidden;
    transition: height 0.3s ease; /* Smooth transition for height */
    background-size: cover; /* Ensure the background covers the container */
    /* Add other necessary styles, including background-image */
}

/* Adjust height and lower content on hover within #th-slide */
#th-slide .th-container-slide:hover {
    height: 280px !important; /* Set increased height */
}

/* Lower content base style within #th-slide */
#th-slide .th-slide-lowerContent {
    display: none;
    opacity: 0; /* Start hidden */
    transform: translateY(100%); /* Start below its normal position */
    transition: transform 0.3s ease, opacity 0.3s ease, display 0.5s ease; /* Smooth transition */
}

/* Slide up lower content on hover or when the slide is active in #th-slide */
#th-slide .th-container-slide:hover .th-slide-lowerContent,
#th-slide .th-container-slide:active .th-slide-lowerContent,
#th-slide .swiper-slide-active .th-slide-lowerContent {
    display: block;
    opacity: 1; /* Make it visible */
    transform: translateY(0); /* Slide to its original position */
}

/* Upper content base style within #th-slide */
#th-slide .th-slide-upperContent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

/* Fade out upper content on hover or when active in #th-slide */
#th-slide .th-container-slide:hover .th-slide-upperContent,
#th-slide .th-container-slide:active .th-slide-upperContent {
    opacity: 0;
}

@media (max-width: 768px) {
    #th-slide .swiper-slide-active .th-container-slide,
    #th-slide .th-container-slide:hover {
        height: 240px !important; /* Reduced height for mobile devices */
    }
}/* End custom CSS */