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


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

 /*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 if using height 100vh */
@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;
    }
}


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


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


    /* 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);
    }



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

	/* 	revert min-height of hero if using vh to px */
	@media (min-width:1921px){
		.revert-min-height-vh-px{
			--min-height:1000px !important;
		}
	}

	/* Class Name mega-menu-overflow
	 * use the class below if you want to add scroll bar mega menu*/
	@media (min-width:1024px){
		/*force to overflow-mega menu*/
		.mega-menu-overflow{
			height:500px;
			overflow-y: scroll;
		}
		.mega-menu-overflow::-webkit-scrollbar-track{
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
		 margin:10px !important;
		border-radius: 10px;
		background-color: #F5F5F5;
	}
	.mega-menu-overflow::-webkit-scrollbar{

		width: 5px;
		background-color: #F5F5F5;
	}

	.mega-menu-overflow::-webkit-scrollbar-thumb{

		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
		background-color: #555;
	}
}

/* sub menu 2 column add the class in parent menu sub-column-2*/
@media (min-width:768px){
	.elementor-nav-menu--main .elementor-nav-menu li.menu-item.sub-column-2 ul.sub-menu {
		column-count: 2
	}
}


.elementor-slideshow__footer{
	display:none;
}

/* class name "pop-up-menu" add this class to wordpress menu inside elementor pop up to resolve issues */
.pop-up-menu .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu{
    position: unset;
    width: unset;
    min-width: unset;
    max-width: unset;
}
.pop-up-menu  .elementor-nav-menu .sub-arrow{
    margin-left: auto;
    margin-right: 0px; 
}

  /* Convert 100VH to min height 900px for 4k screen resolution */
    @media (min-width:1920px) and (min-height:1200px){
        .hero-vh{
            min-height:900px !important;
        }
    }

    /* Resolving background video to safari */
    body.e--ua-safari .hero-video .elementor-background-video-container {
        display: none;
    }


/* 
 * Class Name: "custom-mega"
 * Description: Add triangle arrow dropdown to elementor mega menu. Just add the class custom-mega to elementor mega menu and set the mega menu DISTANCE FROM CONTENT to 35px
 *  */
.custom-mega nav.e-n-menu ul.e-n-menu-heading li.e-n-menu-title button[aria-expanded="true"]:before{
    content: "";
    display: block;
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid rgb(255, 255, 255);
    bottom: -48px;
    left: 50%;
    transform: rotate(90deg);
    opacity: 1;
    transition: opacity 600ms ease 0s;
    margin-left:-30px;
}
/* End  */

/* For regular menu add class name "web-menu-items" to wordpress menu*/
.web-menu-items .elementor-nav-menu--main ul.elementor-nav-menu li.menu-item a.elementor-item.has-submenu[aria-expanded="true"]:before{
    content: "";
    display: block;
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid rgb(255, 255, 255);
    bottom: -40px;
    left: 50px;
    transform: rotate(90deg);
    opacity: 1;
    margin-left:-20px;
    background-color: transparent;
   animation: arrow-opacity 1s;
   
}

/* WordPress Reg Menu Add Dropdown ClassName menu-dropdown-padding  */
.menu-dropdown-padding .elementor-nav-menu--main .elementor-nav-menu ul{
    padding: 10px;
}

@keyframes arrow-opacity {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* End */