/*
Theme Name: Qempo Child
Theme URI: https://gaviaspreview.com/wp/qempo/
Author URI: http://gaviasthemes.com/
Author: Gaviasthemes Team
Description: Child theme for the Qempo theme.
Template: qempo
*/

/* Regular */
@font-face {
  font-family: 'DM Sans';
  src: url('/wp-content/uploads/fonts/DMSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: 'DM Sans';
  src: url('/wp-content/uploads/fonts/DMSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: 'DM Sans';
  src: url('/wp-content/uploads/fonts/DMSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


:root {
    --qempo-theme-color: #F46F25;
    --qempo-gradient-color-second: #F46F25;
}

body {
  font-family: 'DM Sans', sans-serif;
}

h1, h2, h3, h4, .elementor-heading-title {
    font-family: 'DM Sans', sans-serif;
    padding-bottom: 0px;
}

/* Add default bottom padding to heading */
.elementor-widget-heading {
    padding-bottom: 20px;
}

.top-banner-desktop {
    video {
        aspect-ratio: 16 / 10;   /* or match your video's actual ratio */
        width: 100%;
    }
}

.top-banner-mobile {
    img {
        aspect-ratio: 500 / 281;
        width: 100%;
        height: auto;
    }
}

.link-tel {
    background-color: white;
}

.link-tel:hover {
    background-color: #F36F27;
}

.inner-page-top-banner {
    .elementor-widget-image {
        flex: 1; 
        display: flex;

    }
}

/* override qempo/template.css */
.elementor-icon-list-items .elementor-icon-list-item {
    font-size: 20px;
    font-weight: 400;
}

/* add tick icon for ul */
ul {
    li {
        align-items: start;
        
        .elementor-icon-list-text { 
            flex: 1;
        }
    }
    li::before {
        content: "";
        width: 24px;
        height: 24px;
        
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM9.29 16.29L5.7 12.7C5.60742 12.6074 5.53398 12.4975 5.48387 12.3765C5.43377 12.2556 5.40798 12.1259 5.40798 11.995C5.40798 11.8641 5.43377 11.7344 5.48387 11.6135C5.53398 11.4925 5.60742 11.3826 5.7 11.29C5.79258 11.1974 5.90249 11.124 6.02346 11.0739C6.14442 11.0238 6.27407 10.998 6.405 10.998C6.53593 10.998 6.66558 11.0238 6.78654 11.0739C6.90751 11.124 7.01742 11.1974 7.11 11.29L10 14.17L16.88 7.29C17.067 7.10302 17.3206 6.99798 17.585 6.99798C17.8494 6.99798 18.103 7.10302 18.29 7.29C18.477 7.47698 18.582 7.73057 18.582 7.995C18.582 8.25943 18.477 8.51302 18.29 8.7L10.7 16.29C10.6075 16.3827 10.4976 16.4563 10.3766 16.5064C10.2557 16.5566 10.126 16.5824 9.995 16.5824C9.86403 16.5824 9.73435 16.5566 9.61338 16.5064C9.4924 16.4563 9.38251 16.3827 9.29 16.29Z' fill='%23F36F27'%3E%3C/path%3E%3C/svg%3E");
        background-size: contain;
        margin-right: 20px;
        top: var(--icon-vertical-offset , 2px);
        background-repeat: no-repeat;
        position: relative;
    }
    
    &.list-number {
        .list-number-item {
            margin-bottom: 20px;
            
            &:before {
                content: unset;
            }
        }
    }
}

.gva-element-gva-image-content-group {
    .owl-item {
        
        &.center {
            .image-content-item {
                 &.style-1 {
                    .box-content {
                        background-color: #000;
                    }
                }
            }

        }

        .image-content-item {
            &.style-1 {
                .service-item-content {
                    border: 2px solid #F46F41;
                    transition: 0.5s;
                    background-color: black;
                    
                    &:hover {
                        box-shadow: 0px 1px 8px 1px #F46F41;
                    }
                
                    .box-content {
                        background-color: #000;
                        padding: 30px;
                        
                        .content-inner {
                            text-align: left;
                            margin: 0;
                            
                            .title {
                                color: white;
                            }
                            
                            .desc {
                                color: #FFFFFFCC;
                                display: -webkit-box;
                                -webkit-line-clamp: 5;
                                -webkit-box-orient: vertical;
                                overflow: hidden;
                                text-align: left;
                            }
                        }
                        
                        &:after {
                            content: unset;
                        }
                    }
                    
                    &:hover {
                        .box-content {
                            background-color: #000;
                            
                            .desc {
                                color: #fff;
                            }
                        }
                    }
                }
            }
        }
    }
}

/* Blog */
.page-id-2545 .inner-page-top-banner {
    > .e-child {
        @media (max-width: 480px) {
            top: 100px;
        }
    }
}

.elementor-widget-gva-posts {
    .gva-posts-grid {
        .gva-content-items {
            & > div {
                
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-gap: 24px;
                margin: 0;
                
                @media (max-width: 768px) {
                    grid-template-columns: repeat(2, 1fr);
                    
                    @media (max-width: 480px) {
                        grid-template-columns: repeat(1, 1fr);
                    }

                }
                
                &:before {
                    content: unset;
                }
                    
                .all {
                    padding: 0;
                    width: 100%;

                    .post.post-style-1 {
                        background-color: #252525;
                        border: solid 1px #F36F27;
                        transition: 0.5s;
                        margin-bottom: 0px;
                        height: 100%;
                        
                        & > a {
                            display: flex;
                            flex-direction: column;
                            height: 100%;
                            
                            .post-thumbnail {
                            
                            }
                            
                            .entry-content {
                                display: flex;
                                flex-direction: column;
                                
                                .content-inner {
                                    .entry-title {
                                        font-size: 20px;
                                    }
                                    
                                    .entry-desc {
                                        transition: 0.5s;
                                        color: #CCCCCC;
                                        font-size: 20px;
                                    }

                                }
                                
                            }
                            
                            .entry-button {
                                padding-left: 40px;
                                padding-right: 40px;
                                padding-bottom: 40px;
                                margin-top: auto;
                                margin-left: auto;
                                margin-right: auto;
                            }
                        }
                        
                        &:hover {
                            box-shadow: 0px 1px 8px 0px #F46F41;
                            
                            .post-thumbnail {
                            
                            }
                            
                            .entry-content {
                                .content-inner {
                                    .entry-title {
                                
                                    }
                                    
                                    .entry-desc {
                                        color: white;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.pagination {
    .paginations {
        .prev_page, .next_page {
            
            &:after {
                content: "";
                display: inline-block;
            }
            
            i {
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                
            }
            
            &:hover {
                i {
                    background-color: white;
                }
            }
        }
    }
}

.replatform-grid {
    .elementor-icon-box-wrapper {

        svg {
            width: 230px;
            max-width: 100%;
            height: auto;
        }
    }
}

.owl-carousel {
    .owl-nav {
        > div {
            
            i {
                background-color: #F36F27;
            }
            
            &:hover {
                i {
                    background-color: white !important;
                }
            }
        }
    }
    
    &:hover {
        .owl-nav {
            > div {
                i {
                    background-color: #F36F27;
                }
            }
        }
    }
    
} 


/** Single Post CSS **/
.post-single-content {
    .inner-page-top-banner {
        > .e-child {
            @media (max-width: 480px) {
                top: 100px;
            }
        }
    }
}

/*ul.gva-nav-menu {*/
/*    padding-top: 15px;*/
/*}*/

.elementor-274 .elementor-element.elementor-element-35f150d4 .gva-navigation-menu ul.gva-nav-menu > li.current-menu-item > a {
    color: #F46F25;
}
ul.gva-nav-menu > li > a {
    font-size: 20px;
    padding: 15px 0;
}

.clients.logos, .logos.partners {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 50px;

    @media (max-width: 1024px) {
        grid-template-columns: repeat(4, 1fr);
        
        @media (max-width: 768px) {
            grid-template-columns: repeat(3, 1fr);

            @media (max-width: 480px) {
                grid-template-columns: repeat(2, 1fr);
            }
        }

    }

}
.clients.logo .e-child > .elementor-widget, .logo.partners .e-child > .elementor-widget {
}