/* 
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
*/

/*
    Add your custom styles here
*/

/*------------------------------------------------------------------
[Table of contents]
1. General
   1. Recaptcha
   2. Start a project side button
2. Header
   1. Header hover title animation start
   2. Header styling - desktop only
3. Footer
   1. First half of footer
   2. Second half of footer
   3. Sitemap
4. Buttons
   1. CTA
   2. Lets go button - Services accordion + Case study
   3. Footer column - CTA
5. Reusable sections
   1. Logo boxes animation
   2. SVG Text rotation for spinning face
   3. Photo gallery
   4. Photo gallery responsive
6. Visual portfolio
7. Services parent
8. Services inner
   1. Specialty 2
   2. USP
   3. Portfolio
   4. FAQ
9. Case studies parent 
10. Case studies inner 
11. Portfolio 
    1. Websites
    2. Digital marketing
12. Blog
    1. Newsletter
13. PSG Pages
    1. Container for hero
    2. PSG button
    3. Meet Pixelcommerce
    4. PSG / SFEC section
    5. Packages
    6. CTA
14. Responsive
-------------------------------------------------------------------*/




/*------------------------------------------------------------------
* 
* 1. General
*
-------------------------------------------------------------------*/

:root {
    --highlight-color: null;
    --underline-duration: 0.5s;
    --vp-color-brand: #F15744 !important;
    --text-spec-icon: "";
}

::selection {
    background: var(--highlight-color);
    color: #333;
}

html {
    font-size: 16px; /**CHANGE THIS VALUE FOR RESPONSIVE**/
}
p {
    font-size: 1.125rem; /**CHANGE THIS VALUE FOR RESPONSIVE**/
}

/*body {
  transition: background-color 1s ease;
}*/

* {
    letter-spacing: 0.03em;
}

h1,h2,h3,h4,h5,h6 {
    letter-spacing: 0.05rem;
}

b, strong {
    font-weight: 500;
}

.elementor-button-content-wrapper {
    align-items: center;
}

.color-black {
    background-color: #222;
}

.color-white {
    background-color: #fff;
}

.color-orange {
    background-color: #F15744;
}

.color-yellow {
    background-color: #FFC938;
}

.color-purple {
    background-color: #633a86 !important;
}

.color-teal {
    background-color: #00a99d;
}

.text-color-orange {
    color: #F15744;
}

.text-color-yellow {
    color: #FFC938;
}

.text-color-purple {
    color: #633a86;
}

.text-color-teal {
    color: #00a99d;
}

.sec-90 {
    padding-left: 30px;
    padding-right: 30px;
    margin-left: auto;
    margin-right: auto;
}

.sec-90>.elementor-container {
    width: 90%;
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
}

/*flexbox container - release candidate */
.sec-90>.e-con {
    width: 90%;
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
}

.container-md>.elementor-container {
    max-width: 1340px;
}

.hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px !important;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
}

#mega-menu-wrap-menu-1 li.menu-item.current_page_item a {
    color: #F15744 !important;
}

/***********1. Recaptcha**********/
.grecaptcha-badge {
	visibility: hidden;
}

/********************2. Start a project side button********************/
.section-sidebtn .elementor-column {
    min-height: 0px !important; /*remove white line*/
}

.text-startprojbtn a {
    color: #fff !important;
    background-color: #F15744;
    border: 1px solid #F15744;
    border-radius: 50px;
    padding: 0.75em 1.25em 0.625em;
    font-weight: 700;
    transition: 0.3s ease;
}

.text-startprojbtn:hover a {
    color: #F15744 !important;
    background-color: #fff;
    border: 1px solid #F15744;
}

.text-startprojbtn .elementor-widget-container {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    top: 310px;
    right: 15px;
    position: fixed;
}

.text-startprojbtn p {
    position: absolute;
    width: 202px;
    padding-top: 15px;
}

/*------------------------------------------------------------------
* 
* 2. Header
*
-------------------------------------------------------------------*/
.html-pixelmhome-logo {
    width: 176px !important;
}

.mega-menu-item ul {
    list-style: none;
    padding-left: 0px;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link:hover {
    background: #fff;
    font-weight: 300;
    text-decoration: none;
    color: #333;
}


/*services menu parent*/
.menu-services-parent {
    font-family: inherit;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 300;
    line-height: 1.2em !important;
}

.menu-services-parent a {
    padding: 0 !important;
    margin-top: -5px;
    color: #858585 !important;
}


/***********1. Header hover title animation start***********/
#mega-menu-wrap-menu-1 .mega-menu-item .mega-menu-link:before {
    content: attr(title);
    position: absolute !important;
    transform: translate(0, -100%);
    font-family: var(--e-global-typography-primary-font-family) !important;
    transition: transform 0.5s ease;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item>a.mega-menu-link {
    transform: translate(0, 0%);
    transition: transform 0.5s ease, color 0.5s ease;
}


#mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item {
    overflow: hidden;
}

/*somehow this has to be here to work for non full-width menu items*/
#mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-megamenu.mega-menu-item {
    position: static !important;
}

/***********Header hover title animation end***********/

/*only for services and any other FULL WIDTH mega menu*/
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item.mega-menu-megamenu>ul.mega-sub-menu {
    top: 100px;
}

#header-pixelm.elementor-sticky--effects #mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item {
    margin-top: 20px;
    margin-bottom: 20px;
}

#header-pixelm.elementor-sticky--effects {
    box-shadow: 0px 0px 3px 0px rgb(0 0 0 / 20%);
}

/**home logo animation**/
.header-pixelm-home {
    visibility: hidden;
}

#header-pixelm-logo {
    line-height: 1;
}

@media (min-width: 1025px) {
    /*to fix the horizontal scrollbar issue*/
    #header-pixelm {
        overflow: hidden !important;
    }

    #header-pixelm:hover {
        overflow: visible !important;
    }
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 li#mega-menu-item-41222.mega-menu-megamenu > ul.mega-sub-menu {
    width: 270px !important;
	left: auto !important;
  }
}

/*mega menu anchor links*/
#mega-menu-wrap-menu-1 li.mega-menu-item a {
    color: #333;
    transition: color 0.2s ease;
}

#mega-menu-wrap-menu-1 li.mega-menu-item a:hover {
    color: #F15744;
}

/***mega menu hover transitions end***/
#mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item:last-child>a.mega-menu-link {
    padding-right: 0;
}

/*mobile menu*/
.elementor-sticky--effects .elementor-menu-toggle svg path {
    fill: #333 !important;
}

/***********2. Header styling - desktop only***********/
@media only screen and (min-width: 1024px) {
    /*reduce duration of the transition, 200 -> 100*/
    #mega-menu-wrap-menu-1 #mega-menu-menu-1[data-effect="fade_up"] li.mega-menu-item.mega-menu-megamenu>ul.mega-sub-menu,
    #mega-menu-wrap-menu-1 #mega-menu-menu-1[data-effect="fade_up"] li.mega-menu-item.mega-menu-flyout ul.mega-sub-menu {
        transition: opacity 100ms ease-in, transform 100ms ease-in, visibility 100ms ease-in;

    }

    /*hide indicator arrow on desktop*/
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item-has-children>a.mega-menu-link>span.mega-indicator {
        display: none;
    }

    /*styling for mega menu sub items*/
    #mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item.mega-menu-item-has-children .mega-sub-menu a {
        padding: 5px 0px !important;
        display: block !important;
        width: 100% !important;
    }

    .services-menuitem>.mega-sub-menu>li {
        width: 22.5% !important;
    }

    .services-menuitem>.mega-sub-menu>li:first-child {
        margin-left: 5% !important;
    }

    .services-menuitem>.mega-sub-menu>li:last-child {
        margin-right: 5% !important;
    }

    /*reduce padding for grants and works sub items on desktop*/
    #mega-menu-wrap-menu-1 #mega-menu-menu-1>li.grants-menuitem.mega-menu-megamenu>ul.mega-sub-menu,
    #mega-menu-wrap-menu-1 #mega-menu-menu-1>li.works-menuitem.mega-menu-megamenu>ul.mega-sub-menu {
        padding: 15px 25px 15px 25px !important;
    }

    /*set hover to #F15744*/
    #mega-menu-wrap-menu-1 li.mega-menu-item a:hover {
        color: #F15744 !important;
        /*not variable*/
    }

    /***on hover***/
    #mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item:hover>a.mega-menu-link {
        transform: translate(0, 100%);
    }

    /*transform to be constantly there when toggled on*/
    #mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item.mega-toggle-on>a.mega-menu-link {
        transform: translate(0, 100%);
    }

    /**elementor header scroll effects**/
    /**********NOT SCROLLED DOWN*********/
    #mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item {
        margin-top: 36px;
        margin-bottom: 36px;
        transition: all 400ms ease-in-out;
    }

    #header-pixelm.elementor-sticky--effects #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu>ul.mega-sub-menu {
        top: 68px;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .services-menuitem>.mega-sub-menu>li {
        width: 25% !important;
    }

    .services-menuitem>.mega-sub-menu>li:first-child {
        margin-left: 0 !important;
    }

    .services-menuitem>.mega-sub-menu>li:last-child {
        margin-right: 0 !important;
    }
}



/*------------------------------------------------------------------
* 
* 3. Footer
*
-------------------------------------------------------------------*/
/***********1. First half of footer***********/
.con-footer-top a {
    color: #333;
}

.con-footer p {
    margin-bottom: 0 !important;
}


/***********2. Second half of footer***********/
#footer-sitemap-displayed {
    cursor: pointer;
}

.con-footer-top a {
    position: relative;
}

.con-footer-top a:after {
    background: #333;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    transform-origin: 100% 100%;
    transform: scaleX(0);
    -webkit-animation: none;
    animation: none;
    pointer-events: none;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    transition-duration: var(--underline-duration);
}

.con-footer-top a:hover:after {
    transform-origin: 0 0;
    transform: scaleX(1);
}

#footer-sitemap-displayed:after {
    content: '\f347';
    font-family: dashicons;
    font-weight: normal;
    display: inline;
    margin: 0 0 0 3px;
    vertical-align: top;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: rotate(0);
    color: rgba(51, 51, 51, .8);
    position: relative;
    background: transparent;
    height: auto;
    width: auto;
    right: auto;
    line-height: 20px;
    font-size: 10px;
}


/***********3. Sitemap***********/
#mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row {
    background-color: #fff;
}

#mega-menu-menu-2 > li > .mega-menu-link {
    display: none !important;
}

#mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu {
    max-width: 1860px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 15px;
}

#mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row {
    padding-bottom: 20px;
    padding-left: 5%;
    padding-right: 5%;
}

#mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
    font-size: 16px;
}

#mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    font-weight: 600;
}

.sitemap-title h3{
    color:#333;
    font-size: 1rem;
    margin-bottom: 0.5em;
}

.sitemap-title a{
    font-size:0.875rem !important;
}


@media (max-width: 767px) {
    #mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-megamenu > ul.mega-sub-menu {
        padding: 0 !important; /*unset stylings by mega menu plugin*/
        border-top: 1px solid #ccc;
    }

    #mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item 			{
        padding-bottom: 10px !important;
    }
}

/*------------------------------------------------------------------
* 
* 4. Buttons
*
-------------------------------------------------------------------*/

/***********1. CTA***********/
.view-proj-wrapper {
    overflow: hidden;
    height: 1.6em;
    position: relative;
    display: inline-block;
    margin-top: 15px;
}

.view-proj-wrapper div {
    transition: all 0.3s ease;
}

#cta-col a {
    font-weight: 300;
    color: var(--e-global-color-text);
}

.heading-cta {
    margin-left: auto;
    margin-right: auto;
}

.single-portfolio #cta-col a {
    color: #fff;
}

.view-proj-wrapper:after {
    background: #fff;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    transform-origin: 100% 100%;
    transform: scaleX(0);
    -webkit-animation: none;
    animation: none;
    pointer-events: none;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    transition-duration: var(--underline-duration);
}

/*since lets go is shorter than learn more*/
.view-proj-wrapper:after {
    width: 92%;
}

.view-proj-wrapper:hover:after {
    transform-origin: 0 0;
    transform: scaleX(1);
}

.view-proj-wrapper:hover .pixel-button-text>div {
    transform: translateY(-100%);
}


/*************2. Lets go button - Services accordion + Case study*************/
.letsgo-button-wrapper {
    display: block;
}

.letsgo-button {
    overflow: hidden;
    height: 1.6em;
    position: relative;
    display: inline-block;
    margin-top: 15px;
}

.letsgo-button div {
    transition: all var(--underline-duration) ease;
}

.letsgo-button a {
    color: var(--e-global-color-text);
}

.letsgo-button:after {
    background: var(--e-global-color-text);
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    transform-origin: 100% 100%;
    transform: scaleX(0);
    -webkit-animation: none;
    animation: none;
    pointer-events: none;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    transition-duration: var(--underline-duration);
}

/*since lets go is shorter than learn more*/
.letsgo-button:after {
    width: 92%;
}

.letsgo-button:hover:after {
    transform-origin: 0 0;
    transform: scaleX(1);
}

.letsgo-button:hover .pixel-button-text>div {
    transform: translateY(-100%) !important;
}


/********3. Footer column - CTA*********/
#cta-col {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}


#cta-col .view-proj-wrapper {
    height: 2.5em;
    margin-top: 0px;
}

#cta-col .view-proj-wrapper:after {
    margin-left: auto;
    margin-right: auto;
    bottom: 30px;
    transition-duration: var(--underline-duration);
    transition-delay: 0.3s;
    background: var(--e-global-color-text);
}

.single-portfolio #cta-col .view-proj-wrapper:after{
    background:#fff;
}

#cta-col:hover .pixel-button-text>div {
    transform: translateY(-170%);
}


/*since lets go is shorter than learn more*/
#cta-col .view-proj-wrapper:after {
    width: 252px;
}

#cta-col a {
    color: var(--e-global-color-text);
}

#cta-col .view-proj-wrapper div {
    transition: all .7s ease;
}

#cta-col:hover .view-proj-wrapper:after {
    transform-origin: 0 0;
    transform: scaleX(1);
}



/*------------------------------------------------------------------
* 
* 5. Reusable sections
*
-------------------------------------------------------------------*/
/*************1. Logo boxes animation*************/
.innersec-logosanimation .elementor-column>.elementor-column-wrap>.elementor-widget-wrap {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 10px;
    overflow: hidden;
    flex-wrap: nowrap;
}

.innersec-logosanimation .elementor-column>.elementor-column-wrap>.elementor-widget-wrap>.elementor-widget-image {
    background-color: #f7f7f7;
    margin: 0;
    padding: 40px;
    border-radius: 3px;
}


.innersec-logosanimation .elementor-column>.elementor-column-wrap>.elementor-widget-wrap>.elementor-widget-image img {
    max-width: unset;
    width: 150px;
}

/* .innersec-logosanimation-lr */
.innersec-logosanimation.innersec-logosanimation-lr .elementor-column>.elementor-column-wrap>.elementor-widget-wrap>.elementor-widget-image {
    animation: sideScrollingLR 40s linear infinite;
}

/* .innersec-logosanimation-rl */
.innersec-logosanimation.innersec-logosanimation-rl .elementor-column>.elementor-column-wrap>.elementor-widget-wrap>.elementor-widget-image {
    animation: sideScrollingRL 40s linear infinite;
}


/* Side-scroll Left to Right */
@keyframes sideScrollingLR {
    0% {
        transform: translateX(calc(-250px*9));
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

/* Side-scroll Right to Left */
@keyframes sideScrollingRL {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translateX(calc(-250px*9));

    }
}

/*************2. SVG Text rotation for spinning face *************/
.svgpath-rotate .dce-svg-pathtext {
    animation: anotherRotation 8s infinite linear;
    transform-origin: 50% 50%;
}


@keyframes anotherRotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}


/*************3. Photo gallery *************/
#col-photogallery>.elementor-column-wrap>.elementor-widget-wrap {
    flex-wrap: nowrap;
    overflow-x: hidden;
    align-items: center;
    cursor: grab;
    padding-bottom: 40px;
}

#col-photogallery img {
    max-width: 550px;
    margin-right: 100px !important;
    max-height: 530px;
    width: auto;

}

#col-photogallery .elementor-widget-image img {
    -moz-user-select: none !important;
}


#col-photogallery>.elementor-column-wrap>.elementor-widget-wrap>.elementor-widget-image:nth-child(2) {
    margin-left: 80px;
}

#col-photogallery>.elementor-column-wrap>.elementor-widget-wrap>.elementor-widget-image:last-child img {
    margin-right: 80px;
}


#col-photogallery .photo-square img {
    max-width: 420px;
}

/*************4. Photo gallery responsive *************/
@media (max-width: 1024px) {
    #col-photogallery img{
        max-width: 380px;
        margin-right: 70px !important;
        max-height: 350px;
    }
    
    #col-photogallery>.elementor-column-wrap>.elementor-widget-wrap>.elementor-widget-image:nth-child(2) {
        margin-left: 50px;
    }

    #col-photogallery>.elementor-column-wrap>.elementor-widget-wrap>.elementor-widget-image:last-child img {
        margin-right: 50px;
    }

}

@media (max-width: 600px) {
    #col-photogallery img{
        max-width: 280px;
        margin-right: 50px !important;
        max-height: 300px;
    }
    
    #col-photogallery>.elementor-column-wrap>.elementor-widget-wrap>.elementor-widget-image:nth-child(2) {
        margin-left: 30px;
    }

    #col-photogallery>.elementor-column-wrap>.elementor-widget-wrap>.elementor-widget-image:last-child img {
        margin-right: 30px;
    }

}

/*------------------------------------------------------------------
* 
* 6. Visual portfolio
*
-------------------------------------------------------------------*/
.vp-portfolio__items-style-default {
    --vp-items-style-default--image-hover__transform: scale(1) !important;
    --vp-items-style-default--meta-items__gap: 0 !important;
    --vp-items-style-default--caption__padding: 8px 0px !important;
    --vp-items-style-default--meta-categories__text-transform: none !important;
    --vp-items-style-default--meta-categories__font-weight: 300 !important;
    --vp-items-style-default--links__color: var(--e-global-color-text) !important;
    --vp-items-style-default--meta-categories__opacity: 1 !important;
    --vp-items-style-default--links-hover__color: var(--e-global-color-text) !important;
    --vp-items-style-default--meta__color: var(--e-global-color-text) !important;
}

.vp-filter__style-minimal {
    --vp-filter-minimal--items__text-transform: none !important;
    --vp-filter-minimal--items__font-size: 1.3em !important;
}

.vp-portfolio__layout-elements-align-center {
    justify-content: left !important;
}

.vp-portfolio__filter-wrap {
    margin-bottom: 3em;
}

.vp-portfolio__item-meta-title {
    margin-bottom: 3px !important;
    margin-top: 0.4rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3em;
}

.vp-portfolio__item:hover .vp-portfolio__item-overlay {
    opacity: 0 !important;

}

.vp-portfolio__items-style-default .vp-portfolio__item-img img {
    transition: 0.4s all !important;
    clip-path: circle(75%);
    border-radius: 4px;
}

.vp-portfolio__item-img:hover img {
    clip-path: circle(40%);
}

.vp-portfolio__item-meta {
    min-height:105px;
}

/*filters align left*/
.vp-portfolio__layout-elements-align-center .vp-filter__style-minimal {
    justify-content: flex-start !important;
}

.vp-filter__style-minimal .vp-filter__item>* {
    padding: 0.7em 2.5em 0.7em 0 !important;
    font-weight: 500 !important;
    font-size: 1.25rem !important;
}

.vp-portfolio__items-style-default .vp-portfolio__item-meta-excerpt {
    font-weight: 300 !important;
    opacity: 1 !important;
}

/**visual portfolio element on services page **/
@media (max-width: 992px) {
    .elementor-widget-visual-portfolio {
        padding-left: 20px;
        padding-right: 20px;
    }

    /*no paddings for vp archive page*/
    body.visual-portfolio-archive .elementor-widget-visual-portfolio {
        padding-left: 0;
        padding-right: 0;
    }
}	


/*------------------------------------------------------------------
* 
* 7. Services parent
*
-------------------------------------------------------------------*/
.tabs-serviceparent h3 {
    color: unset;
    font-size: 2.375rem;
}

.pixm-img-serviceparent {
    margin-bottom: 10px;
}

.tabs-serviceparent.elementor-widget-tabs .elementor-tab-desktop-title {
    padding: 15px 0 !important;
}

.tabs-serviceparent .elementor-tabs-wrapper {
    padding-top: 40px;
}

.tabs-serviceparent .letsgo-button-wrapper {
    margin-top: 0 !important;
}

/*------------------------------------------------------------------
* 
* 8. Services inner
*
-------------------------------------------------------------------*/
.ue-box-title h3 {
    font-size: 1.25rem;
    line-height: 1.4em;
    margin-bottom: 0;
}


/*************1. Specialty 2*************/
.elementor-column.col-specialty {
    margin-top: 70px;
}

.elementor-column.col-specialty:first-child {
    margin-top: 0;
}

@media (max-width: 1024px) {
    .sec-speciality-2 {
        background-image: none !important;
    }
}

@media (max-width: 767px) {
    .text-spec {
        flex-direction: column-reverse;
    }

    .text-spec:after {
        content: var(--text-spec-icon);
        height: 200px;
        width: 200px;
        display: block;
    }
}

#sec-speciality {
    margin-top: 9vh;
}

.text-spec h3 {
    color: var(--e-global-color-text);
    font-family: "museo-sans", Sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: .5em;
}

.text-spec {
    height: 600px; /*600 in js*/
    display: flex;
    align-items: center;
}

/*column - sticky*/
#col-speciality-icons {
    position: sticky;
    position: -webkit-sticky;
    top: 120px;
    height: 600px;/*600 in js*/
}

/*image - position absolute*/
.img-spec {
    width: 100%;
    max-width: 500px;
    display: none;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}


/*************2. USP *************/
.usp-iconbox h3 {
    margin-bottom: 0.5em;
}

@media (min-width: 1025px) {
    .usp-iconbox .elementor-icon-box-description {
        width: 75%;
    }
}

/*************3. Portfolio *************/
.txt-btn-viewallproj a:after {
    /*   background: #333; */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    transform-origin: 100% 100%;
    transform: scaleX(0);
    -webkit-animation: none;
    animation: none;
    pointer-events: none;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    transition-duration: var(--underline-duration);
}

.txt-btn-viewallproj a {
    position: relative;
}

.txt-btn-viewallproj a:hover:after {
    transform-origin: 0 0;
    transform: scaleX(1);
}

.txt-btn-orange a:after {
    background: var(--e-global-color-primary);
}

.txt-btn-yellow a:after {
    background: var(--e-global-color-secondary);
}

.txt-btn-purple a:after {
    background: var(--e-global-color-accent);
}

.txt-btn-teal a:after {
    background: var(--e-global-color-75f2045);
}


/*************4. FAQ *************/
.accordion-svcfaq .elementor-accordion .elementor-accordion-item {
    border-width: 0px;
}

.accordion-svcfaq .elementor-accordion .elementor-tab-content {
    border-top-width: 0px;
}

.accordion-svcfaq .elementor-accordion .elementor-accordion-item .elementor-tab-title {
    border-top: 1px solid #7a7a7a;
    padding: 2.1rem 0px 2.375rem;
}

.accordion-svcfaq .elementor-accordion .elementor-accordion-item:first-child .elementor-tab-title {
    border-top-width: 0px;
}

.accordion-svcfaq ul, .accordion-svcfaq ol>li {
    margin-bottom: 0.7em;
}


.accordion-svcfaq .elementor-accordion-icon svg {
    width: 24px;
    padding-right: 2px;
}

.accordion-svcfaq .elementor-accordion-title {
    transition: color 0.3s;
}


.accordion-svcfaq .elementor-tab-title {
    position: relative;
}

.accordion-svcfaq .elementor-accordion-icon.elementor-accordion-icon-right {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.accordion-svcfaq .elementor-accordion-title {
    padding-right: 25px;
    display: block;
    line-height: 1.5em;
}

/*------------------------------------------------------------------
* 
* 9. Case studies parent
*
-------------------------------------------------------------------*/

/*used https://www.dynamic.ooo/widget/dynamic-posts-v2/*/
/*remove all stylings of default button to put in own styling*/
.elementor-button.dce-button {
    display: block !important;
    text-align: left !important;
    line-height: inherit !important;
}

/*old case study col hover effect*/
.page.type-page.dce-post-item img {
    transition: 0.6s all !important;
    clip-path: circle(75%);
    border-radius: 4px;
}

.page.type-page.dce-post-item:hover img {
    clip-path: circle(40%);
}

.page.dce-post-item:hover .pixel-button-text {
    transform: translateY(-100%);
}

/*button hover effect*/
.page.type-page.dce-post-item:hover .letsgo-button:after {
    transform-origin: 0 0;
    transform: scaleX(1);
}

.page.type-page.dce-post-item:hover .pixel-button-text>div {
    transform: translateY(-100%);
}

/* adjustments */
.dce-item_custommeta {
    margin-top: 5px;
}

.dce-item .letsgo-button {
    font-weight: 500;
    margin-top: 12px;
}
body.page-id-1130 .gform_wrapper.gravity-theme{display:block!important;}
/*stagger*/
@media (min-width: 768px) {
    .dce-posts-container.dce-skin-grid .page.type-page.dce-post-item:nth-child(even) {
        margin-top: 9%;
        padding-left: 2.5%;
    }

    .dce-posts-container.dce-skin-grid .page.type-page.dce-post-item:nth-child(odd) {
        padding-right: 2.5%;
    }

}

/*------------------------------------------------------------------
* 
* 10. Case studies inner
*
-------------------------------------------------------------------*/
.btn-viewwebsite:hover svg path {
    fill: var( --e-global-color-text ) !important;
}

.sec-casestudy-cover {
    padding-bottom: 7vh;
}

.sec-casestudy-intro {
    padding-top: 5vh;
    padding-bottom: 4vh;
}

.sec-casestudy-content {
    padding-top: 4vh;
    padding-bottom: 4vh;
}

.col-casestudy-content {
    padding-left: 30px;
    padding-right: 30px;
    max-width: 974px;
    margin-left: auto;
    margin-right: auto;
}

.casestudy-ps-t {
    padding-top: 3vh;
}

.casestudy-ps-b {
    padding-bottom: 3vh;
}

.casestudy-p-t {
    padding-top: 8vh;
}

.casestudy-p-b {
    padding-bottom: 8vh;
}

.video-container {
    border: solid 16px #e8e8e8;
    border-radius: 20px;
    filter: drop-shadow(6px 0 11px rgba(155, 168, 176, .2));
    /*background: #111111;*/
}

.video-container video {
    border-radius: 5px;
    height: inherit !important;
}

/**cover responsive**/
@media (max-width:1024px) {
    .sec-casestudy-cover {
        padding-bottom: 4vh !important;
    }
}

/*------------------------------------------------------------------
* 
* 11. Portfolio
*
-------------------------------------------------------------------*/
/************* 1. Websites *************/
.sec-portfolio-colored {
    padding-top: 30px;
    padding-bottom: 30px;
}


.img-portfolioitem img {
    filter: drop-shadow(6px 0 11px rgba(155, 168, 176, .2));
    border-radius: 5px;
}

/************* 2. Digital marketing *************/
.sec-dm-first {
    padding-top: 15vh;
}

.sec-dm-second {
    padding-top: 1vh;
    padding-bottom: 1vh;
}

.sec-dm-probstatement {
    padding-top: 3vh;
    padding-bottom: 3vh;
}

.sec-dm-whatwedid {
    padding-top: 3vh;
    padding-bottom: 6vh;
}

.sec-results {
    padding-top: 6vh;
    padding-bottom: 6vh;
}

.innersec-results .elementor-widget-wrap {
    flex-direction: column;
}

.iconbox-stats.elementor-vertical-align-middle .elementor-icon-box-wrapper {
    align-items: center;
}

.heading-results .elementor-heading-title {
    line-height: 1.4em;
}

/*add class "col-textwhite-tablet" to force number and icon to be white for responsive*/
@media (max-width: 1024px) {
    .col-textwhite-tablet .elementor-element, .col-textwhite-tablet .elementor-icon-box-title,  .col-textwhite-tablet .elementor-icon {
        color: #fff !important;
}
    
}

/*------------------------------------------------------------------
* 
* 12. Blog
*
-------------------------------------------------------------------*/
.elementor-toc__header {
    padding-bottom: 0 !important;
}

.elementor-toc__list-item-text-wrapper i {
    margin-right: 0 !important;
}

.elementor-widget-wp-widget-recent-posts ul {
    padding-inline-start: 0 !important;
}

.elementor-widget-wp-widget-recent-posts ul li {
    list-style-type: none !important;
    margin-bottom: 1em;	
}

.elementor-widget-wp-widget-recent-posts a {
    color: var( --e-global-color-text ) !important;
}

.elementor-widget-wp-widget-recent-posts .post-date {
    font-size: 0.7em;
    display: block;
    margin-top: 0.5em;
    color: var( --e-global-color-282d442 );
}

.elementor-widget-share-buttons .elementor-grid-item {
	margin-right: 10px;
}

/************* 1. Newsletter *************/
/* .mc4wp-form-fields label {
    display: block;
}

.mc4wp-form-fields input[type=email] {
    border-width: 0;
    border-bottom: 2px solid #ddd;
    border-radius: 0;
}

.mc4wp-form-fields input[type=email]:focus {
    border-width: 0;
    border-bottom: 2px solid #f15744;
    outline: none;
} */
.mb4wp-form-wrapper h3 {
	font-size: 1.25rem;
}

.mb-pixel input[type=email] {
    border-width: 0;
    border-bottom: 2px solid #ddd;
    border-radius: 0;
	padding: 8px !important;
}

.mb4wp-form-wrapper input:focus {
    border-width: 0;
    border-bottom: 2px solid #f15744;
    outline: none;
}

#mb4wp-form-messages .alert {
	padding: 12px 25px !important;
}

/* .mb-pixel input:before, .mb-pixel input:after {
	content: "email";
}

.mb-pixel input::-webkit-input-placeholder::before {
		content: "Email address";
} */

/*------------------------------------------------------------------
* 
* 13. PSG Pages
*
-------------------------------------------------------------------*/
/******1. Container for hero******/
.con-psghero-left {
    padding-left: 6.7%;
    padding-right: 2%;

}

.con-psghero-right {
    padding-left: 4%;
    padding-right: 7%;
    filter: drop-shadow(6px 0 11px rgba(155, 168, 176, .2));
}

@media (max-width: 1199px) {
    .con-psghero-left {
        padding-left: 30px;
    }

    .con-psghero-right {
        padding-right: 30px;
    }
}

@media (max-width: 1023px) {
    .con-psghero-left {
        padding-left: 20px;
        padding-right: 20px;
    }

    .con-psghero-right {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/******2. PSG button******/
.text-psgbutton a {
    position: relative;
}

.text-psgbutton a:after {
    background: #333;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    transform-origin: 100% 100%;
    transform: scaleX(0);
    -webkit-animation: none;
    animation: none;
    pointer-events: none;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    transition-duration: var(--underline-duration);
}


.text-psgbutton a:hover:after {
    transform-origin: 0 0;
    transform: scaleX(1);
}

.text-psgmaxwidth {
    max-width: 950px;
}

.text-psg-withbg p {
    margin-bottom: 0;
}

/******3. Meet Pixelcommerce******/
.iconbox-meetpx .elementor-icon-box-title {
    margin-top: 0;
    margin-bottom: 0.5em;
}

/******4. PSG / SFEC section******/
.text-psg-withol ol {
    padding-inline-start: 1.1em;
}

.text-psg-withol li {
    margin-bottom: .3em;
}

.text-psg-withol ol>li>ol>li {
    list-style: square url("https://pixelmechanics.com.sg/wp-content/themes/hello-elementor-child/images/pixel-li.svg");
    padding-left: 5px;

}

/******5. Packages******/
.iconbox-packages .elementor-icon-box-title {
    margin-top: 0;
}

.text-package ul {
    padding-inline-start: 1.1em;

}

.text-package li {
    list-style: square url("https://pixelmechanics.com.sg/wp-content/themes/hello-elementor-child/images/pixel-li.svg");
    padding-left: 5px;
    margin-bottom: .3em;
}

/******6. CTA******/
.col-darkbg .gf_step_label {
    color: #fff;
}

.col-darkbg .validation_error {
    color: #fff !important;
}

.col-darkbg .gfield_label {
    color: #fff !important;
}

.col-darkbg .ginput_container input {
    background-color: transparent;
    color: #fff;
}

.col-darkbg .gform_wrapper {
    max-width: 650px;
    grid-row-gap: .7em !important;
}

.col-darkbg .gform_wrapper .gform_body .gform_fields .gfield input {
    border-bottom: 2px solid #555 !important;
}

.col-darkbg .gform_wrapper .gform_body .gform_fields .gfield input:focus {
    border-bottom: 2px solid #f15744 !important;
}

/*------------------------------------------------------------------
* 
* 14. Responsive
*
-------------------------------------------------------------------*/
/************* general *************/
span.elementor-menu-toggle__icon--close, span.elementor-menu-toggle__icon--open {
    line-height: unset !important;
}

@media (max-width: 1199px) {
    .sec-90>.elementor-container {
        width: 100%;
    }

    .sec-90>.e-con {
        width: 100%;
    }
    
    /*footer sitemap*/
    #mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    #mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item 			{
        padding: 0 !important;
    }
}


@media (max-width: 1024px) {
    html {
        font-size: 15px;
        /**CHANGE THIS VALUE FOR RESPONSIVE**/
    }

    .sec-90 {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    #mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row {
        padding-left: 20px;
        padding-right: 20px;
    }

    /**footer - cta**/
    #cta-col .view-proj-wrapper:after {
        width: 218px;
    }

    #cta-col .view-proj-wrapper:after {
        bottom: 24px;
    }


    /**Remove the margins on the Case Studies section for the homepage on mobile**/
    .dce-posts-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /** Logo boxes animation responsive**/
    .innersec-logosanimation .elementor-column>.elementor-column-wrap>.elementor-widget-wrap {
        gap: 16px;
        padding: 8px;
    }
    .innersec-logosanimation .elementor-column>.elementor-column-wrap>.elementor-widget-wrap>.elementor-widget-image {
        padding: 37px;
    }
    
    
    .innersec-logosanimation .elementor-column>.elementor-column-wrap>.elementor-widget-wrap>.elementor-widget-image img {
        width: 135px;
    }

    /* Side-scroll Left to Right */
    @keyframes sideScrollingLR {
        0% {
            transform: translateX(calc(-225px*9));
        }
    
        100% {
            transform: translate3d(0, 0, 0);
        }
    }
    
    /* Side-scroll Right to Left */
    @keyframes sideScrollingRL {
        0% {
            transform: translate3d(0, 0, 0);
        }
    
        100% {
            transform: translateX(calc(-225px*9));
    
        }
    }
}

@media (max-width: 767px) {
    html {
        font-size: 14px;
        /**CHANGE THIS VALUE FOR RESPONSIVE**/
    }

    .sec-90 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .text-startprojbtn p {
        padding-top: 5px;
    }

    .ht-ctc {
        right: 5px !important;
    }


    /************* header logo *************/
    .html-pixelmhome-logo {
        width: 158px !important;
    }


    /************* footer *************/
    /**footer - cta**/
    #cta-col .view-proj-wrapper:after {
        width: 204px;
    }

    #cta-col .view-proj-wrapper:after {
        bottom: 20px;
    }

    /*footer sitemap*/
    #mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu>ul.mega-sub-menu>li.mega-menu-row {
        padding-top: 20px;
    }

    /************* photo gallery *************/
    #col-photogallery .elementor-widget-image {
        max-width: none !important;
    }
    
    .elementor-widget-testimonial-carousel .swiper-slide {
        padding: 0 !important;
    }

    /************* Logo boxes animation *************/
    .innersec-logosanimation .elementor-column>.elementor-column-wrap>.elementor-widget-wrap {
        gap: 13px;
        padding: 6.5px;
    }

    .innersec-logosanimation .elementor-column>.elementor-column-wrap>.elementor-widget-wrap>.elementor-widget-image {
        padding: 20px;
    }
    
    
    .innersec-logosanimation .elementor-column>.elementor-column-wrap>.elementor-widget-wrap>.elementor-widget-image img {
        width: 135px;
    }

    /* Side-scroll Left to Right */
    @keyframes sideScrollingLR {
        0% {
            transform: translateX(calc(-188px*9));
        }
    
        100% {
            transform: translate3d(0, 0, 0);
        }
    }
    
    /* Side-scroll Right to Left */
    @keyframes sideScrollingRL {
        0% {
            transform: translate3d(0, 0, 0);
        }
    
        100% {
            transform: translateX(calc(-188px*9));
        }
    }    
    
    /************* visual portfolio *************/
    .vp-filter__style-minimal .vp-filter__item>* {
        padding: 0.5em 1em 0.5em 0 !important;
    }

    /************* services - specialty *************/
    .text-spec {
        height: 570px;
    }

    #col-speciality-icons {
        display: none;
    }

    #col-speciality-text .elementor-widget-wrap {
        text-align: center;;
    }

    /************* case studies *************/
    .dce-posts-container.dce-skin-grid .page.type-page.dce-post-item:not(:first-child) {
        margin-top: 9%;
    }
    
    .col-casestudy-content {
        padding-left: 0;
        padding-right: 0;
    }
}

.thumbnail-video-youtube-mb{
  opacity: 0;
}

/************* rank math faq accordion *************/
#rank-math-faq .rank-math-list-item{
	position:relative;
}
#rank-math-faq .rank-math-list-item input{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 41px;
    opacity: 0;
    cursor: pointer;
    z-index:999;
}
#rank-math-faq .rank-math-list-item h3 {
    background: #f1f2f6;
    padding: 10px 12px 10px 18px;
    cursor: pointer;
    font-size: 18px !important;
    font-weight: normal !important;
    position:relative;
    margin-bottom: 0;
}
#rank-math-faq .rank-math-list-item h3:before {
	display:inline-block;
	content: "";
    width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 12px;
	border-color: transparent transparent transparent #000000;
	margin-right: 8px;
}
#rank-math-faq .rank-math-list-item input:checked+h3:before {
	-webkit-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg);
}
#rank-math-faq .rank-math-answer{
	padding: 10px 10px 0px 10px;
	max-height: 0;
	overflow:hidden;
}
#rank-math-faq .rank-math-list-item input:checked+h3~.rank-math-answer {
	max-height: 100vh;
	overflow:visible;
}

.wp-block-list {
	margin-block-end: .9rem;
	font-size:1.125rem;
	line-height: 1.6em;
}
.gform_wrapper .gform_footer input[type=submit]:disabled {
  opacity: 0.6;
  pointer-events: none;
}