/*
 Theme Name:   picostrap5 Child Base
 Theme URI:    https://picostrap.com
 Description:  Child theme for Picostrap5. Experience the power of SASS, merged with the WordPress Customizer. Implementing Bootstrap 5.3.2. Please refer to the <a target="_blank" href="https://picostrap.com/documentation/">documentation</a> to get started. 
 Author:       The LiveCanvas Team
 Author URI:   https://livecanvas.com
 Version:      3.0.0
 Template: picostrap5 
 Text Domain:  picostrap5
 License: GPL-2.0
 License URI: http://www.opensource.org/licenses/gpl-license.php
*/

/*


Do not edit this file.

To add your own CSS, edit  the file: 

sass/_custom.scss 

...and add your own CSS (or SCSS!) statements.

To recompile the SASS bundle, click the "RECOMPILE SASS" link on top.

To edit the  SCSS pipeline, view and edit the file: sass/main.scss


*/

/* .single-product * {
    outline: 1px solid limegreen !important;
} */

:root {
    --black: #000;
}

.text-gradient,
.text-gradient h1,
.text-gradient h2,
.text-gradient h3 {
    background: -webkit-linear-gradient(45deg, var(--e-global-color-primary), var(--e-global-color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Home page Start */
.hero_banner .hero-slider.slick-dotted.slick-slider img {
    width: 100%;
}

.hero_banner .hero-slider.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.hero_banner .hero-slider ul.slick-dots {
    width: auto;
    bottom: 50px;
    right: 150px;
}

.hero_banner .hero-slider ul.slick-dots li {
    background-color: transparent;
    border-radius: 50%;
    border: 2px solid var(--black);
}

.hero_banner .hero-slider ul.slick-dots li.slick-active {
    background-color: var(--black);
}

.hero_banner .hero-slider ul.slick-dots li button:before {
    display: none;
}

.welcome_section {
    padding: 100px 0;
    background-color: var(--light-orange);
}

.welcome_section img {
    border-radius: 50%;
    width: 336px;
}

.read_more {
    text-decoration: none;
    color: var(--black);
}

.product-group {
    padding: 100px 0 60px 0;
}

.product-group .row {
    justify-content: space-between;
}

.product-group .row .product_wrap .content-wrap .read_more {
    text-decoration: underline;
    text-decoration-color: var(--e-global-color-secondary);
}

.product-group .row .product_wrap p {
    min-height: 150px;
}

@media only screen and (min-width: 768px) {
    .product-group .row .col-lg-3 {
        padding-left: 0;
    }
}

.product-group .title {
    text-transform: uppercase;
}

.map_section {
    padding: 100px 0;
}



/* Product Page */

.product-hero {
    padding: 200px 0 0 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 650px;
}

.product-hero .title {
    font-size: 60px;
    line-height: 1.2;
    font-weight: 900;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
}

.product-hero .sub-title {
    font-size: 26px;
    line-height: 1.3;
    font-weight: 500;
}

.product-hero a.download_brochure {
    text-decoration: none;
    padding: 10px 24px;
    border: 1px solid var(--e-global-color-primary);
    /* border-radius: 4px; */
    color: var(--e-global-color-text);
    transition: all 0.2s ease;
    border-radius: 5px;
}

.product-hero a.download_brochure:hover {
    background-color: var(--e-global-color-primary);
    color: var(--e-global-color-7a04503);
}

/* #breadcrumbs span :not(.breadcrumb_last) {
    color: var(--black);
    text-decoration: none;
}

#breadcrumbs span .breadcrumb_last {
    color: var(--e-global-color-primary);
    text-decoration: none;
} */

.custom-breadcrumb {
    color: var(--e-global-color-primary);
}

.custom-breadcrumb a {
    color: var(--e-global-color-text);
    text-decoration: none;
}

section.product-list-view {
    /* margin-top: -300px; */
    padding-top: 50px;
    padding-bottom: 100px;
}



/* About us Page */

.about_hero_banner {
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
}

.about_hero_banner .container {
    position: relative;
    min-height: 800px;
}

/* .about_hero_banner #breadcrumbs {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    margin: 10px 0;
} */

.only-text {
    padding: 60px 0;
}

.only-text .col-lg-6 {
    padding: 0;
}

.text-with-image {
    padding: 60px 0;

}

.text-with-image .container .row {
    align-items: center;
}

.text-with-image .col-lg-6 {
    padding: 0;
}

.text-with-image .col-lg-6 .content-wrap {
    padding: 50px;
}

.text-with-full-image {
    padding: 60px 0;
}

.text-with-full-image .col-lg-6 {
    padding: 0;
}

.text-with-full-image .col-lg-6:first-child {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.text-with-full-image .col-lg-6 .content-wrap {
    padding: 50px;
    max-width: 660px;
}

.exhibitions .exhibitions-slider .slick-prev:before,
.exhibitions .exhibitions-slider .slick-next:before {
    color: var(--black);
}

.exhibitions .exhibitions-slider ul.slick-dots li {
    background-color: transparent;
    border-radius: 50%;
    border: 2px solid var(--e-global-color-primary);
}

.exhibitions .exhibitions-slider ul.slick-dots li.slick-active {
    background-color: var(--e-global-color-primary);
}

.exhibitions .exhibitions-slider ul.slick-dots li button:before {
    display: none;
}

.certification {
    padding: 60px 0;
}

.certification .col-lg-6 .inner-wrap {
    display: flex;
}

.certification .col-lg-6 .inner-wrap .image {
    border: 1px solid var(--black);
    max-width: 200px;
    min-height: 200px;
    padding: 15px;
    display: flex;
    align-items: center;
}

.certification .col-lg-6 .inner-wrap .content {
    border: solid var(--black);
    border-width: 1px 1px 1px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}

.modal-enquire .enquired-color-box .card-title {
    color: var(--e-global-color-7a04503);
}


/* Tablet CSS Start */
@media only screen and (max-width: 1024px) {

    :root {
        --h1-font-size: 60px;
        --h2-font-size: 36px;
        --h3-font-size: 24px;
    }

    .product-hero {
        min-height: 75vh;
        padding: 150px 0 0 0;
    }

    .product-hero .title {
        font-size: var(--h1-font-size);
    }

    .product-hero .sub-title {
        font-size: var(--h2-font-size);
    }

    section.product-list-view {
        margin-top: -40px;
    }

}

/* Mobile CSS Start */

@media only screen and (max-width: 768px) {

    :root {
        --h1-font-size: 40px;
        --h2-font-size: 28px;
        --h3-font-size: 20px;
    }

    .product-hero {
        padding: 100px 13px 0;
        display: flex;
        align-items: center;
    }

    section.product-list-view {
        /* margin-top: -100px; */
        margin-top: 0;
        padding-left: 13px;
        padding-right: 13px;
    }

    .product-hero .title {
        font-size: var(--h1-font-size);
        margin-bottom: 20px;
    }

    .product-list-view .ci_colours-slider .slick-prev {
        left: -25px;
    }

    .product-list-view .ci_colours-slider .slick-next {
        right: -25px;
    }

    /* .ci_colours-slider .slick-dots li {
        width: 20px;
    } */

    .modal-theme .btn-close {
        top: 20px !important;
    }


}

@media only screen and (max-width: 480px) {

    .single-product .modal-enquire .modal-dialog {
        margin-top: 75px;
    }

    .single-product .modal-fullscreen .modal-dialog {
        padding-top: 70px;
        margin-top: 0;
    }

    .card-grid-colour__content {
        min-height: 160px;
    }
}

.ci_single-colors .card .target_hexCode,
.ci_single-colors .card .target_color_r,
.ci_single-colors .card .target_color_g,
.ci_single-colors .card .target_color_b {
    color: var(--e-global-color-primary);
}

/* Animations */

.ci_single-content .ci_single-colors #grid-tab-pane .card:hover .fade-down {
    animation: fade-down 0.5s linear;
}

.ci_single-content .ci_single-colors #grid-tab-pane .card:hover .fade-up {
    animation: fade-up 0.5s linear;
}

.ci_single-content .ci_single-colors #grid-tab-pane .card:hover .fade {
    animation: fade 0.5s linear;
}

@keyframes fade-up {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes fade {
    0% {
        /* transform: translateY(-20px); */
        opacity: 0;
    }

    100% {
        /* transform: translateY(0px); */
        opacity: 1;
    }
}

@keyframes fade-down {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}