/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Splide
*/
.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}


@media (max-width: 1025px) {
    #splide {
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

        .splide__track {
            display: block !important; /* Ensures slides are treated as sections */
            overflow: visible !important; /* Prevents hidden slides */
        }
    
        .splide__list {
            display: block !important;
        }
    
        .splide__slide {
            width: 100% !important;
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
            position: relative !important;
        }


}


.custom-pagination{
    display:none;
} 

@media (min-width: 1366px) {
    .custom-pagination{
        position: absolute;
        z-index: 9;
        bottom: 40px;
        left: 50px;
        border-bottom: 1px solid #FFFFFF;
        width: 60%;
        display: block;
    }
}

button.custom-page {
    outline: none !important;  /* Removes the default focus outline */
    box-shadow: none !important; /* Removes any box-shadow applied on focus */
    border: none; /* Removes border if it's being used for focus effect */
    font-size: .8rem;
}

button.custom-page:focus,
button.custom-page:active {
    outline: none !important;
    box-shadow: none !important;
    border: none;
    background: inherit; /* Optional: Prevents background change */
}

button.custom-page{
    padding: 10px 0;
    margin-right: 40px;

}

button.custom-page.active,
button.custom-page:hover{
    border-bottom: 4px solid #FFFFFF;
    color: #FFFFFF;
}

.splide h1{
    position: absolute;
    z-index: 9;
    color: #FFFFFF;
    font-size: 42px;
    line-height: 1.3;
    top: 30vh;
    padding: 0 20px 20px;
    animation: fadeUpIn 0.6s ease-out forwards;
}

@media (min-width: 500px) {

    .splide h1{
        top: 40vh;
    }
}

@media (min-width: 768px) {
    .splide h1{
        font-size: 52px;
        max-width: 80%;
    }

}
@media (min-width: 1026px) {
    .splide h1{
        font-size: 42px;
        max-width: 37%;
        left: 30px;
        bottom: 0px;
        top: inherit;
    }
}

@media (min-width: 1366px) {
    .splide h1{
        bottom: 40px;
        font-size: 52px;
    }


}

.slide-wrap{
    display:flex;
    flex-direction: column;
}
.slide-left,
.slide-right,
.slide-right-2{
    min-height: 90vh;
}

.slide-right-2{
    display: flex;
    flex-direction: column;
}

.slide-right-2 img{
    flex: 1 1 auto;
    width: 100%;
    object-fit: cover; /* Optional: makes the image nicely scale/crop */
	max-height: 80vh;
}


@media (max-width: 1025px) {
    .slide-left,
    .slide-right,
    .slide-right-2{
        min-height: 90vh;
    }


    .slide-left.blue,
    .slide-left.gray{
        display:none;
    }
}



@media (min-width: 1026px) {
    .slide-wrap{
        flex-direction: row;
    }
}

.slide-wrap > div{
    width: 100%;
}

.slide-right{
    background-image: url('https://htcolordev.wpenginepowered.com/wp-content/uploads/2024/11/car-interior.jpg');
    background-position: center;
    background-size: cover;
}

.poly{
    background-image: url('https://htcolordev.wpenginepowered.com/wp-content/uploads/2025/02/vehicle-interior.jpg');
}
.gravure{
    background-image: url('https://htcolordev.wpenginepowered.com/wp-content/uploads/2025/03/home-slide.jpg');
    background-position: right center;
}
.adhesives{
    background-image: url('https://htcolordev.wpenginepowered.com/wp-content/uploads/2025/02/super-market-2.png')

}

.slide-content{
    background-color: #FFFFFF;
    background-color: rgba(255,255,255,.9);
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    /*height: 230px;*/
    padding: 20px 30px;
    padding: 10px 20px 10px;
} 

.slide-content-2{
    background-color: #FFFFFF;
    background-color: rgba(255,255,255,.9);
    width: 100%;
    min-height: 120px;
    padding: 10px 20px 10px;
}

@media (min-width: 1026px) {
    .slide-content{
        width: 50%;
    }
}

@media (min-width: 1200px) {
    .slide-content{
        width: 35%;
    }
}

.slide-content h2,
.slide-content-2 h2{
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 6px;
}

.slide-content p,
.slide-content-2 p{
    font-size: 14px;
    margin-bottom: 8px;
    padding-right: 20px;
}

.slide-content p a{
    text-transform: uppercase;
    font-size: 12px;
}
.slide-image{
    display: none;
}

@media (min-width: 1026px) {
    .slide-image{
        display: block;
        width: 260px;
        height: 260px;
        position: absolute;
        left: 50%;
        top: 40%;
        margin-left: -130px;
        margin-top: -130px;
    }


}
@media (min-width: 1026px) {
    @keyframes fadeUpIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeLeftIn {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Default hidden state */
    .fade-up-in,
    .fade-left-in {
        opacity: 0;
        visibility: hidden;
    }

    /* When the slide is active, make it visible and animate */
    .splide__slide.is-active .fade-up-in {
        visibility: visible;
        animation: fadeUpIn 0.6s ease-out forwards;
    }

    .splide__slide.is-active .fade-left-in {
        visibility: visible;
        animation: fadeLeftIn 0.6s ease-out forwards;
    }
}

.splide__arrow--next,
.splide__arrow--prev{
    bottom: 0px;
    right: 20px;
    top: inherit;
    left: inherit;
}

.splide__arrow--prev{
    right: 60px;
}

.splide__slide a.elementor-button{
    color: #000000 !important;
}
.splide__slide a.elementor-button::after{
    background: #000000 !important;
}

button.splide__arrow:focus{
    background: none;
    border: none;
}

button.splide__arrow:hover{
    background-color: rgba(0,0,0,.1);
}

b, strong{
	font-weight: 800;
}

a.elementor-button {
position: relative;
}

a.elementor-button::after{
 content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-clip-path: polygon(calc(100% - 1px) 11px, calc(100% - 1px) 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0, 0% 0%, 0% calc(100% - 10px), 10px 100%, 100% 100%, 100% calc(100% - 1px), 11px calc(100% - 1px), 1px calc(100% - 11px), 1px 1px, calc(100% - 11px) 1px);
  clip-path: polygon(calc(100% - 1px) 11px, calc(100% - 1px) 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0, 0% 0%, 0% calc(100% - 10px), 10px 100%, 100% 100%, 100% calc(100% - 1px), 11px calc(100% - 1px), 1px calc(100% - 11px), 1px 1px, calc(100% - 11px) 1px);
}

a.elementor-button:hover::after{
	/*background: red;*/
}

a.elementor-button:hover{
    color: #FFFFFF !important;
}
.ftr-links p{
	margin-bottom: 14px
}

.ftr-links a{
	color: #999999;
	font-size: .9rem;
}

.ftr-links a:hover{
	text-decoration:underline;
}

.ftr-links strong{
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #FFF;
}

.site-info p{
	margin: 0;
}

.site-info a,
.email-link a{
	color: #FFF;
	text-decoration:underline;
}

.site-info a:hover,
.email-link a:hover{
	text-decoration:none;
}
.no-hc,
.black{
	background-color:#000000;
}

.Red{
background: linear-gradient(180deg, rgba(228, 0, 43, 0.5) 0%, rgba(201, 0, 38, 0.5) 100%), linear-gradient(180deg, #C72228 0%, #A51C23 100%);
}

.gray{
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), linear-gradient(180deg, #AD9C8B 0%, #948577 100%);
}

.blue{
background: linear-gradient(180deg, #004789 0%, #003A70 100%);
}

.yellow{
background: linear-gradient(180deg, #F08C26 0%, #D7740F 100%);
}

.header-area{
	background-position:center !important;
	background-size: cover !important;
}

.show-if-block-editor{
	display:none;
}

body.block-editor-page .show-if-block-editor{
	display:block !important;
}

.hexagons{
	background-image: url("https://htcolordev.wpenginepowered.com/wp-content/uploads/2025/02/hexagons.png");
	background-repeat:no-repeat;
background-size: 211px;
    background-position: 101% -80px;
}

.lead-in{
	max-width: 880px !important;
}

.margin-0,
.margin-0 p{
	margin: 0;
}