/**
Theme Name: HMDG
Author: HMDG
Author URI: https://hmdg.co.uk/
Description: HMDG is a child theme of Astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hmdg
Template: astra
*/

/* 
INSTRUCTIONS:

---FOR COLORS: please use astra global colors as possible avoid using widgets individual colors as it is difficult to maintain.
---FOR FONTS: please use astra global fonts as possible avoid using widgets individual fonts as it is diffucult to maintain.
---FOR BUTTONS: as possible use astra global colors & fonts for buttons you can style buttons via elementor but use the global colors & fonts from astra.
---WHEN USING CSS: As possible use astra global variables when declaring a CSS code. For example: a{color:var(--ast-global-color-0)} you can find this variables in the root of astra just use inspect element and search root.
---NOTE: As possible avoid custom code and use widgets
*/


html, body {
    overflow-x: hidden !important;
    width:100% !important;
}
a{
    text-decoration:none !important;
}
.cc-revoke, .cc-window{
    /*cookie banner font size from 16px to 13px just change the value if you want to modify*/
    font-size: 13px !important;
}

/*Grey Scale Image*/
.img-grey-scale{
    filter: grayscale(100%);
}
.img-grey-scale:hover{
    filter: unset !important;
}
/*end grey scale*/

/* Float column on hover */
.float-column-hover{
    transition-duration: .3s;
    transition-property: transform;
    transition-timing-function: ease-out;
}
.float-column-hover:hover{
    transform: translateY(-8px);
}
/* end */

.remove-underline-line .elementor-heading-title a,
.remove-underline-line .elementor-icon-box-title a{
    text-decoration: none;
}


/*Grow column on hover*/
@media (min-width: 1024px){
    .grow-column .elementor-widget-wrap{
        overflow: hidden;
        /* transition for the image to zoom in smoothly: */
      -ms-transition: all 1s ease !important;
      -webkit-transition: all 1s ease !important;
      -moz-transition: all 1s ease !important;
      -o-transition: all 1s ease !important;
      transition: all 1s ease !important;
    }
    .grow-column .elementor-widget-wrap:hover{
        -ms-transform: scale(1.1, 1.1);
      -webkit-transform: scale(1.1, 1.1);
      -moz-transform: scale(1.1, 1.1);
      -o-transform: scale(1.1, 1.1); 
      transform: scale(1.1, 1.1);
    }
}
/* end */

/*Equal height of cards using flex grow*/

 /*FLEX GROW: if title*/
.row-flex-direction .elementor-widget-wrap{
         flex-direction: column;
 }
 .row-flex-direction .elementor-widget-wrap .elementor-widget-heading{
         flex-grow: 2;
 }
      
 /*FLEX GROW: if description*/
.row-flex-direction-description .elementor-widget-wrap{
    flex-direction: column;
}
.row-flex-direction-description .elementor-widget-wrap .elementor-widget-text-editor{
    flex-grow: 2;
}

  /*fullwidthbtn-mobile*/
 @media (max-width:767px){
     .fullwidth-button-mobile a.elementor-button-link{
         width:100% !important;
     }
 }

 /*pulse button on hover*/
 .pulse-btn-hover a.elementor-button-link:hover{
    animation: pulse-animation 2s infinite;
 }
/*pulse button not hover*/
.pulse-btn-not-hover a.elementor-button-link{
    animation: pulse-animation 2s infinite;
}
/*Elementor icon pulse effect*/
.icononly-pulse-effect .elementor-icon{
    animation: pulse-animation 2s infinite;
}
/*button with text and description pulse effect*/
.icon-with-text-description-pulse-effect .elementor-icon-box-icon .elementor-icon{
    animation: pulse-animation 2s infinite;
}


 @keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

/*fixed height of hero in 4k screen/ horizontal */
@media (min-width: 1921px){
    .fixed-height-on-4k-screen-resolution .elementor-container{
        min-height: 1000px  !important;
    }
}
/* verifical big screen */
@media (min-height:1081px) and (min-width: 1920px) {
    .fixed-height-on-4k-screen-resolution .elementor-container{
        min-height: 1000px  !important;
    }
	
    .autoheight-container .elementor-container{
        min-height: auto !important;
    }
}
/*set the hero height to 700px height in 320px mobile width*/
@media (max-width:320px){
    .fixed-height-on-4k-screen-resolution .elementor-container{
        min-height:700px !important;
    }
    /*change button padding on 320px mobile*/
    .elementor-button-link{
        padding-right:15px !important;
        padding-left:15px !important;
    }
}

/* remove scrollbar  */
    ::-webkit-scrollbar {
    width: 0px;
  }
/*  Book Now Button CSS */
#getintouch{
            z-index:999999;
         display:block;
        }
    #getintouch:hover{
        background: #333333;
    border: 2px solid #333333;
    color: #ffffff;
    }
    @media (min-width:768px){
        #getintouch{
             top: calc(50% - 40px)!important;
             padding: 6px 14px 14px 14px;
            position: fixed;
            right: -38px;
            -webkit-transform: rotate(90deg);
            transform: rotate(-90deg);
            background: #fc4c54;
            border: 2px solid #fc4c54;
            color: #ffffff;
            
        }
    }
    
    @media (max-width:767px){
        #getintouch{
       
            display:none;
            
        }
    }


    /* align child section/container even in 4k resolution using fullwidth parent section/container  */
   
    @media (min-width:768px){
        .fullwidthsection-fix-right,
        .fullwidthsection-fix-left{
            width:auto !important;
        }
		 /* column right */
        .fullwidthsection-fix-right{
            margin-right: auto;
            margin-left: 0;
        }
		 /* column left */
        .fullwidthsection-fix-left{
            margin-left: auto; 
            margin-right: 0;
        }
    }
    
    /* if added social media on header, fixed align on header (Only applicable if you use astra social media) */
    @media (max-width:767px){
        .ast-header-social-wrap .ast-builder-social-element{
            margin-left:unset !important
        }
    }

    /* underline hover effect */
    .addlink-hover-inside-column .elementor-heading-title::after{
        content: '';
        display: block;
        width: 0;
        height: 3px;
        background: #fff;
        transition: width .3s;
    }
    .addlink-hover-inside-column:hover .elementor-heading-title::after{
        width: 100%;
    }

    /* fullwidth astra button menu on mobile */
    @media (max-width:767px){
        .ast-builder-button-wrap{
            width: 100% !important;
            text-align: center !important;
        }
    }

	/* make the elementor section to be fullwidth inside elementor pop up on mobile */
    @media (max-width:1023px){
        #ast-mobile-popup .ast-flex{
            display:unset !important;
        }
    }

     /* remove focus box shadow of inputs, textarea */
    .elementor-field-group .elementor-field-textual:focus
    {
        box-shadow:unset;
    }


    /* greyscale map embed */
    #mapembed {
        filter: grayscale(1);
    }

    /* Column background image zoom in hover effects , requires activation of background hover scale */
    .zoom-in-hover-effect:hover .elementor-motion-effects-layer{
        transform: scale(1.3) !important;
    }

	/* remove astra mega menu sub-title if using elementor templates */
    .hide-megamenu-sublabel a.menu-link{
        display:none !important;
    }



    /* Outline Outward button hover effect*/
    .outline-outward a.elementor-button-link {
        display: inline-block;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        transform: translateZ(0);
        box-shadow: 0 0 1px transparent;
    
        cursor: pointer;
    }
    .outline-outward a.elementor-button-link:before {
        content: '';
        position: absolute;
        border: #fff solid 1px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transition-duration: .3s;
        transition-property: top right bottom left;
    }
    .outline-outward a.elementor-button-link:hover:before {
        top: -8px;
        right: -8px;
        bottom: -8px;
        left: -8px;
    }
    /* end */


    /* Button line border moving effects */
     @media (min-width:768px){
        .border-moving-effect{
            width:auto !important; 
        }
    }

    .border-moving-effect a.elementor-button-link{
        display: inline-block;
        border: 1px solid;
        cursor: pointer;
        width: auto;
    }
    .border-moving-effect a.elementor-button-link span.elementor-button-text{
        display: block;
    }
    .border-moving-effect a.elementor-button-link:before,
    .border-moving-effect a.elementor-button-link:after{
        content:"";
        width: 0;
        height: 2px;
        position: absolute;
        transition: all 0.2s linear;
        background: #fff;
    }
    .border-moving-effect a.elementor-button-link span.elementor-button-text:before,
    .border-moving-effect a.elementor-button-link span.elementor-button-text:after{
        content:"";
        width:2px;
        height:0;
        position: absolute;
        transition: all 0.2s linear;
        background: #fff;
    }
    .border-moving-effect a.elementor-button-link:hover:before,
    .border-moving-effect a.elementor-button-link:hover:after{
        width: 100%;
    }

    .border-moving-effect a.elementor-button-link:hover span.elementor-button-text:before,
    .border-moving-effect a.elementor-button-link:hover span.elementor-button-text:after{
        height: 100%;
    }

    .border-moving-effect a.elementor-button-link:after{
        left: 0;
        bottom: 0;
        transition-delay: 0.6s;
    }

    .border-moving-effect a.elementor-button-link span.elementor-button-text:after{
        transition-delay: 0.4s;
        right: 0;
        bottom: 0
    }

    .border-moving-effect a.elementor-button-link:before{
        right: 0;
        top: 0;
        transition-delay: 0.2s;
    }

    .border-moving-effect a.elementor-button-link span.elementor-button-text:before{
        transition-delay: 0s;
        left: 0;
        top: 0;
    }

    .border-moving-effect a.elementor-button-link:hover:after{
        transition-delay: 0s;
    }

    .border-moving-effect a.elementor-button-link:hover span.elementor-button-text:after{
        transition-delay: 0.2s;
    }

    .border-moving-effect a.elementor-button-link:hover:before{
        transition-delay: 0.4s;
    }

    .border-moving-effect a.elementor-button-link:hover span.elementor-button-text:before{
        transition-delay: 0.6s;
    }
    /* end */

/****** smooth animation ******/
@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translate3d(0,-30px,0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translate3d(0,30px,0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.elementor-element.fadeInDown {
    animation-name: fadeDown;
}

.elementor-element.fadeInUp {
    animation-name: fadeUp;
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translate3d(-30px,0,0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translate3d(30px,0,0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.elementor-element.fadeInLeft {
    animation-name: fadeLeft;
}

.elementor-element.fadeInRight {
    animation-name: fadeRight;
}
/****** end smooth animation ******/

 /* Remove Sub Menu Box Shadow and Top Border */
    .ast-desktop .ast-mega-menu-enabled .ast-builder-menu-1 div:not( .astra-full-megamenu-wrapper) .sub-menu, .ast-builder-menu-1 .inline-on-mobile .sub-menu, .ast-desktop .ast-builder-menu-1 .astra-full-megamenu-wrapper, .ast-desktop .ast-builder-menu-1 .menu-item .sub-menu{
        box-shadow:unset;
        padding: 15px;
    }
    
    .ast-builder-menu-1 .sub-menu, .ast-builder-menu-1 .inline-on-mobile .sub-menu{
        border-top-width:0px;
    }


/* BTN animation */
    /* Classname btn-icon */
    @keyframes slideRight {
        0% {opacity: 1; transform: translateX(0px) scale(1);}
        25%{opacity: 0; transform:translateX(10px) scale(0.9);}
        26%{opacity: 0; transform:translateX(-10px) scale(0.9);}
        55% {opacity: 1; transform: translateX(0px) scale(1);}
    }

    .btn-icon span.elementor-button-icon i{

        padding:8px;
        border-radius:50%;
        background-color:var(--lightblue);
    }
    .btn-icon a:hover span.elementor-button-icon i,
.services-column:hover .btn-icon a span.elementor-button-icon i  {
       color:var(--ast-global-color-0);
        }
    .btn-icon a:hover span.elementor-button-icon,
    .booknow-btn a:hover span.elementor-button-icon,
.services-column:hover .btn-icon span.elementor-button-icon
{
        animation-name: slideRight;
        animation-duration: 1s;
        animation-timing-function: linear;

    }

.services-column:hover img{
	border-radius:5px;
}

.services-btn span.elementor-button-text{
	text-align:left;
}