/*
Theme Name: GreyboxPro Child
Theme URI: http://greyboxpro.com/
Author: Mettro Pty Ltd
Author URI: https://mettro.com.au/
Description: GreyboxPro child theme, Theme Demo: https://demo.greyboxpro.com/
Version: 1.0.0
Template: greyboxpro
Text Domain: greyboxpro
*/
/* Prevent Swiper carousels from making the page draggable horizontally on mobile.
   clip (not hidden) so position:sticky on the nav is unaffected. */
body {
    overflow-x: clip;
}

.elementor-nav-menu a:focus{
    line-height: normal !important;
}
.elementor-button .elementor-button-icon svg{
    width: 92%;
    transform: rotate(0deg);
    transition: transform 0.5s ease;
}

.btn-icon-hover .elementor-button:hover .elementor-button-icon svg{
    transform: rotate(45deg);
    transition: transform 0.4s ease;
}

.btn-icon-remove-fill .elementor-button-icon > svg{
    fill: transparent !important;
}

.underlined-heading .elementor-heading-title{
    display: inline-block;
    position: relative;
}
.underlined-heading .elementor-heading-title::before{
    
   content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  height: 6px;
  width: 91%; /* Start slightly wider */
  background-color: #fddb30;
  opacity: 1;
  transform: scaleX(1.1);
  transform-origin: left;
}
.underlined-text u{
    text-decoration: underline;
  text-decoration-thickness: 6px;
  text-underline-offset: 4px;
    text-decoration-color: #fddb30;
}

.underlined-text-lowercase u{

    text-decoration: underline;
  text-decoration-thickness: 6px;
  text-underline-offset: 9px;
    text-decoration-color: #fddb30;
}

.gbp-timeline-custom .gbp-timeline-card .gbp-timeline-card-image,
.gbp-timeline-custom .gbp-timeline-card .gbp-timeline-card-title-wrap,
.gbp-timeline-custom .gbp-timeline-card .gbp-timeline-card-content > p{
    display: none;
}

.gbp-timeline-custom .gbp-timeline-item{
    gap: 20px;
}

.gbp-timeline-custom .gbp-timeline-vertical .gbp-timeline-connector{
    left: 28%;
}

.text-highlighted span{
    background-color: #fddb30;
}

.text-highlighted.dot-heading .elementor-heading-title::after{
    background-color: #fddb30;
}

.elementor-swiper-button svg{
    display: none;
}
.elementor-swiper-button-prev{
    background-image: url(images/left-arrow-slide.svg);
    height: 50px;
    width: 50px;
    background-size: contain;
    background-repeat: no-repeat;
}

.elementor-swiper-button-next{
    background-image: url(images/right-arrow-slide.svg);
    height: 50px;
    width: 50px;
    background-size: contain;
    background-repeat: no-repeat;
}

.elementor-widget-testimonial-carousel .swiper-wrapper .swiper-slide {
    box-shadow: 4px 5px 10px 1px rgba(39, 71, 133, .05);
    margin-bottom: 20px;
}

.mobile-navbar-nav li{
    display: flex !important;
}
.mobile-navbar-nav a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.dot-heading .elementor-heading-title::after{
    content: '.';
    padding-left: 2px;
    opacity: 1 !important;
    right: -3px;
    transition: opacity 0.4s ease-in-out;
    color: #EB2444;
}

.dot-heading .elementor-icon-box-title span::after,
.dot-heading .elementor-icon-box-title a::after{
    content: '.';
    padding-left: 0;
    opacity: 1 !important;
    right: -3px;
    transition: opacity 0.4s ease-in-out;
    color: #EB2444;
    font-size: 28px;
}

span.dot-heading{
    color: #EB2444;
}

.gbp-infolist-content-wrapper .gbp-info-list-description{

}

/* Add a visible dot at the end of the text */
.mobile-navbar-nav a::after {
    content: '.';
    padding-left: 2px;
    opacity: 1 !important;
    right: -3px;
    transition: opacity 0.4s ease-in-out;

}

.mobile-navbar-nav a:hover::after {
    opacity: 0 !important;
}

/* Underline effect */
.mobile-navbar-nav a::before {
  content: '';
  position: absolute;
  left: 14px;
  bottom: 10px;
  height: 12px;
  width: 120%; /* Start slightly wider */
  background-color: #ff6600;
  opacity: 0;
  transform: scaleX(1.1);
  transform-origin: left;
  transition:
    opacity 0.4s ease-in-out,
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

/* Hover state: fade in + shrink underline */
.mobile-navbar-nav a:hover::before {
  opacity: 1;
  transform: scaleX(.95); /* Shrinks to match text width */
 width: 95%;
}

.mobile-navbar-nav ul > li:nth-child(1) > a::after{
    color: #E01F41;
}
.mobile-navbar-nav ul > li:nth-child(2) >a::after{
    color: #F9DA2F;
}
.mobile-navbar-nav ul > li:nth-child(3) > a::after{
    color: #6ABC56;
}
.mobile-navbar-nav ul > li:nth-child(4) > a::after{
    color: #8475B8;
}
.mobile-navbar-nav ul > li:nth-child(5) > a::after{
    color: #6C6C6B;
}


.mobile-navbar-nav ul > li:nth-child(1) > a::before{
    background-color: #E01F41;
}
.mobile-navbar-nav ul > li:nth-child(2) >a::before{
    background-color: #F9DA2F;
}
.mobile-navbar-nav ul > li:nth-child(3) > a::before{
    background-color: #6ABC56;
}
.mobile-navbar-nav ul > li:nth-child(4) > a::before{
    background-color: #8475B8;
}
.mobile-navbar-nav ul > li:nth-child(5) > a::before{
    background-color: #6C6C6B;
}


.arrow-submit-icon .gform-footer{
    display: inline-block !important;
    position: relative;
}

.arrow-submit-icon .gform-footer input[type=submit]{
    padding-right: 50px !important;
}
.arrow-submit-icon .gform-footer::before{
    background-image: url(images/arrow-narrow-right.png);
    background-repeat: no-repeat;
    background-size: 24px;
    content: " ";
    width: 24px;
    height: 24px;
    position: absolute;
    right: 14px;
    top: 30px;
}
.elementor-location-footer nav a, .custom-hover-effect a{
    display: inline-block;
    position: relative;
}

.elementor-location-footer nav a::after, .custom-hover-effect a::after{
    transform: scaleX(1.1);
    transition:
    opacity 0.4s ease-in-out,
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1.2);
    height: 4px;
    /* width: 120%; */
    left: 0;
    content: "";
    position: absolute;
    background-color: #E01F41;
    opacity: 0;
}
.elementor-location-footer nav a:hover::after, .custom-hover-effect a:hover::after{
    opacity: 1;
    transform: scaleX(1); /* Shrinks to match text width */
    width: 100%;
}

.custom-hover-effect a::after{    
    bottom: -10px;
}



.elementor-location-footer nav ul > li:nth-child(1) > a::after{
    background-color: #E01F41;
}
.elementor-location-footer nav ul > li:nth-child(2) > a::after{
    background-color: #F9DA2F;
}
.elementor-location-footer nav ul > li:nth-child(3) > a::after{
    background-color: #6ABC56;
}
.elementor-location-footer nav ul > li:nth-child(4) > a::after{
    background-color: #8475B8;
}
.elementor-location-footer nav ul > li:nth-child(5) > a::after{
    background-color: #6C6C6B;
}


/** Blog Items / Fluid **/

.random-post-grid .elementor-loop-container.elementor-grid {
  display: flex;
  flex-wrap: wrap;
}

.random-post-grid .e-loop-item {
  box-sizing: border-box;
  flex: 0 0 auto;
  transition: width 0.3s ease;
}

/** Custom css for blog item animations and effects **/

.random-post-grid .e-loop-item .e-parent > .e-child {
    position: relative;
    overflow: hidden;
    height: 100%;
    display: block;
}

.random-post-grid .e-loop-item .e-parent > .e-child img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.5s ease, opacity 0.5s ease;
    z-index: 0;
    transform: scale(1.2);
    opacity: 1;
}

.blog-list-wrapper .random-post-grid .e-loop-item .e-parent > .e-child img {
    height: 35vh !important;
    object-fit: cover;
}

/* Hover Zoom Effect */
.random-post-grid .e-loop-item .e-parent:hover > .e-child img {
    transform: scale(1.3);
    opacity: 0.7;
}

/* Overlay Gradient */
.random-post-grid .e-loop-item .e-parent > .e-child .elementor-widget-image .elementor-widget-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0));
    z-index: 1;
    pointer-events: none;
}

/** /END Custom css for blog item animations and effects **/

/** How we work section **/
.how-we-work-wrapper .e-con.e-child{
    cursor: default;
}
.how-we-work-wrapper .hww-desc p{
    max-height: 0;    
    transition: max-height 0.3s ease;
    overflow: hidden;
}
.how-we-work-wrapper > .e-con.e-child:hover .hww-desc p{
    max-height: 180px;    
}
.how-we-work-wrapper > .e-con.e-child:hover h3{
    color: #000000; 
}

.how-we-work-wrapper > .e-con.e-child:hover svg > rect{
    fill: #ffffff;
}


.how-we-work-wrapper > .e-con.e-child:hover .discover-icon svg > path{
    stroke: #5FBC5B;
}

.how-we-work-wrapper > .e-con.e-child:hover .plan-design-icon svg > path{
    stroke: #439BD6;
}

.how-we-work-wrapper > .e-con.e-child:hover .build-icon svg > path{
    stroke: #EB2444;
}

.how-we-work-wrapper > .e-con.e-child:hover .launch-support-icon svg > path{
    stroke: #FDDB03;
}

.close-icon-slide a.elementor-icon{
    padding: 14px 14px 14px 14px;
    border-radius: 100px;
    background-color: #439BD6;
}

body header .elementor-nav-menu a:focus{
    line-height: 1.4em !important;
}

.close-icon-slide a.elementor-icon:hover{
    background-color: #eb2444;
}

.testimonial-wrapper .swiper .elementor-swiper-button-next{
    right: -8px;
}
.testimonial-wrapper .swiper .elementor-swiper-button-previous{
    left: -8px;
}

.breadcrumb_last{
    font-weight: 700;
}

.text-xxs.elementor-widget-breadcrumbs{
    font-size: 14px;
}

.elementor-widget-breadcrumbs span > span{
    padding-left: 4px;
    padding-right: 4px;
}

/** Listing Item numbered icon **/

.list-item-styled .gbp-list-items .gbp-info-list-item:nth-child(8n+1) .gbp-infolist-icon-wrapper {
    background-color: #EB2444;
}

.list-item-styled .gbp-list-items .gbp-info-list-item:nth-child(8n+2) .gbp-infolist-icon-wrapper {
    background-color: #FDDB03;
}

.list-item-styled .gbp-list-items .gbp-info-list-item:nth-child(8n+3) .gbp-infolist-icon-wrapper {
    background-color: #F15623;
}

.list-item-styled .gbp-list-items .gbp-info-list-item:nth-child(8n+4) .gbp-infolist-icon-wrapper {
    background-color: #5FBC5B;
}

.list-item-styled .gbp-list-items .gbp-info-list-item:nth-child(8n+5) .gbp-infolist-icon-wrapper {
    background-color: #439BD6;
}

.list-item-styled .gbp-list-items .gbp-info-list-item:nth-child(8n+6) .gbp-infolist-icon-wrapper {
    background-color: #8475B6;
}

.list-item-styled .gbp-list-items .gbp-info-list-item:nth-child(8n+7) .gbp-infolist-icon-wrapper {
    background-color: #000000;
}

.list-item-styled .gbp-list-items .gbp-info-list-item:nth-child(8n+8) .gbp-infolist-icon-wrapper {
    background-color: #D7D7D6;
}

/* Parent plugin sets overflow:hidden on .gbp-info-list-container and its
   :last-child li, which clips icon chips sitting at the container edge
   (and occasionally text). Let content overflow the container instead. */
.gbp-info-list-container,
.gbp-info-list-container li:last-child {
    overflow: visible;
}

/* Uploaded-SVG icons render as <object class="gbp-info-list-icon-svg">
   (see gbp_info-list-widget.php render()). An <object> has no intrinsic
   dimensions until the external SVG loads, so the first paint uses the
   browser's default 300x150 box and the surrounding flex layout gets
   computed against that, leaving icons misaligned/clipped until a resize
   forces a recalc. Locking height to width makes the icon occupy a
   stable square box from paint #1. */
.gbp-info-list-icon-svg {
    display: block;
    height: auto;
    aspect-ratio: 1 / 1;
}

strong{
    font-weight: 700;
}


/* Remove default list style for parent ul only */
.colored-list > .elementor-widget-container > ul,
.colored-list > .elementor-widget-container > .elementor-text-editor > ul{
  list-style: none;
  counter-reset: colored-counter;
  padding-left: 0;
  margin: 0;
}

/* Hide default bullet points */
.colored-list > .elementor-widget-container > ul > li::marker,
.colored-list > .elementor-widget-container > .elementor-text-editor > ul > li::marker {
  font-size: 0;
}

/* Parent ul list items */
.colored-list > .elementor-widget-container > ul > li,
.colored-list > .elementor-widget-container > .elementor-text-editor > ul > li {
  counter-increment: colored-counter;
  position: relative;
  padding-left: 42px !important; /* space for badge */
  margin-bottom: 15px;
  line-height: 1.5em !important;
}

/* Circular number badge for parent ul only */
.colored-list > .elementor-widget-container > ul > li::before,
.colored-list > .elementor-widget-container  > .elementor-text-editor > ul > li::before {
  content: counter(colored-counter);
  position: absolute;
  left: 0;
  top: -2px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 100px;
  text-align: center;
  color: #000;
  font-weight: bold;
  font-size: 16px;
  background-color: #EB2444; /* default, overridden per item */
}

/* 8-color repeating pattern for parent ul only */
.colored-list > .elementor-widget-container > ul > li:nth-child(8n+1)::before { background-color: #EB2444; }
.colored-list > .elementor-widget-container > ul > li:nth-child(8n+2)::before { background-color: #FDDB03; }
.colored-list > .elementor-widget-container > ul > li:nth-child(8n+3)::before { background-color: #F15623; }
.colored-list > .elementor-widget-container > ul > li:nth-child(8n+4)::before { background-color: #5FBC5B; }
.colored-list > .elementor-widget-container > ul > li:nth-child(8n+5)::before { background-color: #439BD6; }
.colored-list > .elementor-widget-container > ul > li:nth-child(8n+6)::before { background-color: #8475B6; }
.colored-list > .elementor-widget-container > ul > li:nth-child(8n+7)::before { background-color: #000000; color: #fff; }
.colored-list > .elementor-widget-container > ul > li:nth-child(8n+8)::before { background-color: #D7D7D6; }
/* 8-color repeating pattern for parent ul only */
.colored-list > .elementor-widget-container  > .elementor-text-editor > ul > li:nth-child(8n+1)::before { background-color: #EB2444; }
.colored-list > .elementor-widget-container  > .elementor-text-editor > ul > li:nth-child(8n+2)::before { background-color: #FDDB03; }
.colored-list > .elementor-widget-container  > .elementor-text-editor > ul > li:nth-child(8n+3)::before { background-color: #F15623; }
.colored-list > .elementor-widget-container  > .elementor-text-editor > ul > li:nth-child(8n+4)::before { background-color: #5FBC5B; }
.colored-list > .elementor-widget-container  > .elementor-text-editor > ul > li:nth-child(8n+5)::before { background-color: #439BD6; }
.colored-list > .elementor-widget-container  > .elementor-text-editor > ul > li:nth-child(8n+6)::before { background-color: #8475B6; }
.colored-list > .elementor-widget-container  > .elementor-text-editor > ul > li:nth-child(8n+7)::before { background-color: #000000; }
.colored-list > .elementor-widget-container  > .elementor-text-editor > ul > li:nth-child(8n+8)::before { background-color: #D7D7D6; }



/* Nested ul inside parent li */
.colored-list > .elementor-widget-container > ul > li > ul {
  list-style: none;      /* remove default bullets */
  padding-left: 25px;    /* indent nested list */
  margin-top: 5px;
}

/* Nested li bullets: no numbers, custom circular bullet */
.colored-list > .elementor-widget-container > ul > li > ul > li {
  position: relative;
  margin-bottom: 8px;
}

/* Custom bullet using ::before, size 10px */
.colored-list > .elementor-widget-container > ul > li > ul > li::before {
  content: '';
  position: absolute;
    left: -21px;
    top: 40%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  background-color: #EB2444; /* default color, overridden below */
}

/* 8-color repeating pattern for child ul li */
.colored-list > .elementor-widget-container > ul > li > ul > li:nth-child(8n+1)::before { background-color: #EB2444; }
.colored-list > .elementor-widget-container > ul > li > ul > li:nth-child(8n+2)::before { background-color: #FDDB03; }
.colored-list > .elementor-widget-container > ul > li > ul > li:nth-child(8n+3)::before { background-color: #F15623; }
.colored-list > .elementor-widget-container > ul > li > ul > li:nth-child(8n+4)::before { background-color: #5FBC5B; }
.colored-list > .elementor-widget-container > ul > li > ul > li:nth-child(8n+5)::before { background-color: #439BD6; }
.colored-list > .elementor-widget-container > ul > li > ul > li:nth-child(8n+6)::before { background-color: #8475B6; }
.colored-list > .elementor-widget-container > ul > li > ul > li:nth-child(8n+7)::before { background-color: #000000; }
.colored-list > .elementor-widget-container > ul > li > ul > li:nth-child(8n+8)::before { background-color: #D7D7D6; }


/* 8-color repeating pattern for child ul li */
.colored-list > .elementor-widget-container  > .elementor-text-editor > ul > li > ul > li:nth-child(8n+1)::before { background-color: #EB2444; }
.colored-list > .elementor-widget-container  > .elementor-text-editor > ul > li > ul > li:nth-child(8n+2)::before { background-color: #FDDB03; }
.colored-list > .elementor-widget-container  > .elementor-text-editor > ul > li > ul > li:nth-child(8n+3)::before { background-color: #F15623; }
.colored-list > .elementor-widget-container  > .elementor-text-editor > ul > li > ul > li:nth-child(8n+4)::before { background-color: #5FBC5B; }
.colored-list > .elementor-widget-container  > .elementor-text-editor > ul > li > ul > li:nth-child(8n+5)::before { background-color: #439BD6; }
.colored-list > .elementor-widget-container  > .elementor-text-editor > ul > li > ul > li:nth-child(8n+6)::before { background-color: #8475B6; }
.colored-list > .elementor-widget-container  > .elementor-text-editor > ul > li > ul > li:nth-child(8n+7)::before { background-color: #000000; }
.colored-list > .elementor-widget-container  > .elementor-text-editor > ul > li > ul > li:nth-child(8n+8)::before { background-color: #D7D7D6; }



/** Custom CSS **/

.icon-margin-none .elementor-icon-box-wrapper .elementor-icon-box-content{
    margin-bottom: 0;
}

.icon-margin-none .elementor-widget-icon-box{
    /* margin-top: 20px; */
}

.icon-margin-none .elementor-spacer{
    /* margin-top: 10px; */
}

.heading-gradient-color .elementor-heading-title{
    background: linear-gradient(76deg, #EB2444 0.69%, #FDDB03 101.04%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.elementor-main-swiper{
    width: 100% !important; 
}

/* .elementor-swiper-button.elementor-swiper-button-prev{
    left: -1.5% !important;
}
.elementor-swiper-button.elementor-swiper-button-next{
    right: -1.5% !important;
} */



/* --- Desktop: 3 per row with alternating widths --- */
@media (min-width: 1367px) {
  /* Row 1: [50%, 25%, 25%] */
  .random-post-grid .e-loop-item:nth-child(3n+1) {
    width: 50%;
  }
  .random-post-grid .e-loop-item:nth-child(3n+2),
  .random-post-grid .e-loop-item:nth-child(3n+3) {
    width: 25%;
  }

    .icon-margin-none .elementor-widget-icon-box{
        margin-top: 20px;
    }

    .icon-wrapper-steps .elementor-spacer-inner{
    width: 30px;
}
    

}

@media (max-width: 1760px) and (min-width: 1441px){
    
  .banner-text-padding{
    padding-left: 40px !important;
  }
}

@media (max-width: 1440px) and (min-width: 1025px){
    
  /* .icon-figures #projects-figure{
    left: 24%;
  }
  .icon-figures #clients-figure{
    
  }
  .icon-figures #years-figure{
    
  } */

  .banner-text-padding{
    padding-left: 40px !important;
  }

}


@media (max-width: 1024px) and (min-width: 769px){
    
  /* .icon-figures #projects-figure{
    left: 35%;
  }
  .icon-figures #clients-figure{
    
  }
  .icon-figures #years-figure{
    
  } */

}


/* --- Tablet: repeating 8-item cycle of [66/33], [25/25/50], [50/25/25] rows --- */
@media (max-width: 1366px) and (min-width: 768px) {
  /* Row 1: [66%, 33%] */
  .random-post-grid .e-loop-item:nth-child(8n+1) {
    width: 66.666%;
  }
  .random-post-grid .e-loop-item:nth-child(8n+2) {
    width: 33.334%;
  }

  /* Row 2: [25%, 25%, 50%] */
  .random-post-grid .e-loop-item:nth-child(8n+3),
  .random-post-grid .e-loop-item:nth-child(8n+4) {
    width: 25%;
  }
  .random-post-grid .e-loop-item:nth-child(8n+5) {
    width: 50%;
  }

  /* Row 3: [50%, 25%, 25%] */
  .random-post-grid .e-loop-item:nth-child(8n+6) {
    width: 50%;
  }
  .random-post-grid .e-loop-item:nth-child(8n+7),
  .random-post-grid .e-loop-item:nth-child(8n) {
    width: 25%;
  }

  h4.elementor-icon-box-title{
    font-size: 20px !important;
  }

}

/** END Blog Items / Fluid **/

.elementor-shortcode .elementor-icon-list-items{
    list-style: none;
    padding-left: 0;
}

.elementor-shortcode span.elementor-icon-list-text.elementor-inline-editing {
    font-weight: 600;
    font-size: 20px;
    color: #000;
    line-height: 36px;
}

.default-cat-bg-color .elementor-widget-container a{   
    color: #fff !important;
}
.default-cat-bg-color .elementor-widget-container{    
    background-image: linear-gradient(37deg, #439bd6 38%, #5fbc5b 100%);
}

/* .default-cat-bg-color .elementor-widget-container:hover {    
    background-image: linear-gradient(37deg, #5fbc5b 38%,  #439bd6 100%);
} */


.category-heading-bg-color .website-design-development .elementor-widget-container{
    background-image: linear-gradient(37deg, #439bd6 38%, #5fbc5b 100%);
}
/* .category-heading-bg-color .website-design-development .elementor-widget-container:hover{
    background-image: linear-gradient(37deg, #5fbc5b  38%, #439bd6 100%);
} */

.category-heading-bg-color .user-experience .elementor-widget-container{
    background-image: linear-gradient(37deg, #EB2444 38%,  #8475B6 100%);
}
/* .category-heading-bg-color .user-experience .elementor-widget-container:hover{
    background-image: linear-gradient(37deg, #8475B6 38%,  #EB2444 100%);
} */

.category-heading-bg-color .wordpress-101 .elementor-widget-container{
    background-image: linear-gradient(37deg, #5FBC5B 38%, #FDDB03 100%);
}
/* .category-heading-bg-color .wordpress-101 .elementor-widget-container:hover{
    background-image: linear-gradient(37deg, #FDDB03 38%, #5FBC5B 100%);
} */

.random-post-grid .e-loop__load-more.elementor-button-wrapper{
    margin-bottom: 30px;
}


/** Grid Hover Effect **/
.grid-hover-effect > .e-con-full.e-flex.e-con.e-child > .e-con.e-child{
    transition: background-color 0.5s ease;
}
.grid-hover-effect > .e-con-full.e-flex.e-con.e-child > .e-con.e-child:hover{
  background-color: rgba(253, 219, 3, 0);
}

.grid-hover-effect > .e-con-full.e-flex.e-con.e-child > .e-con.e-child .elementor-heading-title{
    transition: color 0.5s ease;
}
.grid-hover-effect > .e-con-full.e-flex.e-con.e-child > .e-con.e-child:hover .elementor-heading-title{
    color: #fff;
}

.grid-hover-effect > .e-con-full.e-flex.e-con.e-child > .e-con.e-child .hidden-text-paragraph{
    opacity: 0;
    height: 0;
    transition: height 0.5s ease-in-out;;
}

.grid-hover-effect > .e-con-full.e-flex.e-con.e-child > .e-con.e-child:hover .hidden-text-paragraph{
    opacity: 1;
    height: 100%;
}

.object-cover-img img{
    object-fit: cover;
}


.left-offset{
    border-radius: 16px;
}

.wp-block-button__link.wp-element-button{
    background-color: #000000;
    color: #ffffff;
    font-size: 20px;
    letter-spacing: "inherit";
    text-transform: "inherit";
    font-weight: bold;
    border: 0px solid;
    border-radius: 10px 10px 10px 10px;
    border-color: Default;
    font-family: "Rubik";
    text-decoration: "inherit";
    margin: "inherit";
    line-height: 1.1em;
    padding: 14px 20px 14px 20px;
    position: relative;
    padding-right: 44px;
}


.wp-block-button__link.wp-element-button::after{
    content: " ";
    width: 24px;
    height: 24px;
    display: block;
    background-image: url(images/arrow-narrow-right.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 12px;
    top: 12px;
    transform: rotate(-45deg);
    transition: transform 0.3s ease-in-out; /* smooth effect */
}

.wp-block-button__link.wp-element-button:hover{
    background: #eb2444;
    color: #ffffff;
}

.wp-block-button__link.wp-element-button:hover::after{

    transform: rotate(0deg);
}

.group-container .wp-block-group__inner-container{
    padding-top: 20px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
}
.wp-block-list, .elementor-widget-container ul{
    padding-left: 20px;
}
.wp-block-list li::marker, .elementor-widget-container ul li::marker{
    color: #F15623;
}


@media (max-width:767px) {
        
    .grid-hover-effect > .e-con-full.e-flex.e-con.e-child > .e-con.e-child:hover .hidden-text-paragraph{
        height: auto;
    }

    h3.elementor-icon-box-title{
        margin-top: 12px;
    }

}


@media (min-width: 1337px) {
    .left-offset{
        width: 124% !important;
        left: -24%;
        position: relative;;
    }
}

@media (min-width: 1023px) {
    .gbp-home-carousel div.e-n-carousel {
        padding-bottom: 0 !important;
    }
    .gbp-home-carousel .swiper-pagination{
        display: none;
    }
}



@media (max-width: 1024px){

    .gbp-timeline-custom .gbp-timeline-vertical .gbp-timeline-item {
        display: inline-flex;
    }

    .gbp-timeline-custom .gbp-timeline-card{
        padding: 12px;
    }

    .gbp-timeline-custom .gbp-timeline-vertical .gbp-timeline-connector-wrap{
        width: 8px;
    }

    .gbp-timeline-custom .gbp-timeline-vertical.gbp-timeline-center .gbp-timeline-marker-wrapper{
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 767px) {
        
    .arrow-submit-icon .gform-footer input[type=submit]{
        padding: 6px 15px 6px 15px !important;
        padding-right: 40px !important;
    }

    
    .arrow-submit-icon .gform-footer::before{
        top: 26px;
        right: 8px;
    }



    /* Mettro Card About */

    .mettro-card-about .elementor-element.elementor-element-76fb3d7{
            flex-direction: column-reverse;
    }

    .mettro-card-about .elementor-element.elementor-element-e1e1c5a{
        position: unset;
        width: 100%;
    }

    .mettro-card-about .elementor-element.elementor-element-3300ff2{
        position: unset;
        width: 100%;
    }

    .gbp-info-list-wrapper{
        gap: 10px !important;
    }


}



@media (max-width: 425px) {

    .group-container{
        padding: 4px;
    }

    body .gbp-info-list-wrapper .gbp-info-list-icon .gbp-info-list-icon-svg{
        width: 42px !important;
    }

    body .gbp-info-list-wrapper .gbp-info-list-title-span{
        font-size: 16px !important;
        
    }

    body .gbp-info-list-wrapper .gbp-info-list-item-inner{
        align-items: center !important;
    }


    .gbp-info-list-wrapper{
        gap: 0 !important;
    }

    .elementor-widget-breadcrumbs p {
        margin-top: 0;
    }

    .stack-in-mobile{
        display: block !important;
        padding-left: 25px;
        padding-right: 25px;
    }

}

/* Gutenberg Wide & Full Width Alignment for Blog Post Images */
.single-post .wp-block-image.alignwide,
.single-post .wp-block-group.alignwide,
.single-post .alignwide {
    max-width: 1200px;
    width: calc(100% + 200px);
    margin-left: calc(50% - 600px);
    margin-right: auto;
    position: relative;
}

.single-post .wp-block-image.alignfull,
.single-post .wp-block-group.alignfull,
.single-post .alignfull {
    max-width: 100vw;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.single-post .alignwide img,
.single-post .alignfull img {
    width: 100%;
    height: auto;
}

@media (max-width: 1200px) {
    .single-post .wp-block-image.alignwide,
    .single-post .wp-block-group.alignwide,
    .single-post .alignwide {
        width: calc(100% + 100px);
        margin-left: -50px;
    }
}

@media (max-width: 768px) {
    .single-post .wp-block-image.alignwide,
    .single-post .wp-block-group.alignwide,
    .single-post .alignwide {
        width: calc(100% + 40px);
        margin-left: -20px;
    }

    h4.elementor-icon-box-title{
        font-size: 20px !important;
    }
}

/* Prevent horizontal scrollbar from offset/full-width images */
.single-post {
    overflow-x: hidden;
}

/* Image Offset Width Options (custom dropdown on Image block)
   Uses viewport-relative widths so images auto-fit to screen edges on all breakpoints */
.wp-block-image[class*="gbp-offset-"] {
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.wp-block-image.gbp-offset-slight {
    width: min(calc(100% + 50px), 100vw);
}

.wp-block-image.gbp-offset-medium {
    width: min(calc(100% + 150px), 100vw);
}

.wp-block-image.gbp-offset-large {
    width: min(calc(100% + 250px), 100vw);
}

.wp-block-image.gbp-offset-xlarge {
    width: min(calc(100% + 400px), 100vw);
}

.wp-block-image.gbp-offset-full {
    width: 100vw;
}

.wp-block-image[class*="gbp-offset-"] img {
    width: 100%;
    height: auto;
    display: block;
}

/* Apply same offset width options to the Elementor Template block wrapper */
.gbp-elementor-template-insert[class*="gbp-offset-"] {
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.gbp-elementor-template-insert.gbp-offset-slight {
    width: min(calc(100% + 50px), 100vw);
}

.gbp-elementor-template-insert.gbp-offset-medium {
    width: min(calc(100% + 150px), 100vw);
}

.gbp-elementor-template-insert.gbp-offset-large {
    width: min(calc(100% + 250px), 100vw);
}

.gbp-elementor-template-insert.gbp-offset-xlarge {
    width: min(calc(100% + 400px), 100vw);
}

.gbp-elementor-template-insert.gbp-offset-full {
    width: 100vw;
}

/* Apply same offset width options to the Asymmetric Image Grid container.
   Grid layout itself lives in blocks/css/gbp-image-grid-asymmetric.css so it
   can be shared between the frontend and the block-editor canvas. */
.gbp-image-grid-asymmetric[class*="gbp-offset-"] {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.gbp-image-grid-asymmetric.gbp-offset-slight {
    width: min(calc(100% + 50px), 100vw);
}

.gbp-image-grid-asymmetric.gbp-offset-medium {
    width: min(calc(100% + 150px), 100vw);
}

.gbp-image-grid-asymmetric.gbp-offset-large {
    width: min(calc(100% + 250px), 100vw);
}

.gbp-image-grid-asymmetric.gbp-offset-xlarge {
    width: min(calc(100% + 400px), 100vw);
}

.gbp-image-grid-asymmetric.gbp-offset-full {
    width: 100vw;
}

/* Apply same offset width options to the Two-Column Image Grid container */
.gbp-image-grid-two-columns[class*="gbp-offset-"] {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.gbp-image-grid-two-columns.gbp-offset-slight {
    width: min(calc(100% + 50px), 100vw);
}

.gbp-image-grid-two-columns.gbp-offset-medium {
    width: min(calc(100% + 150px), 100vw);
}

.gbp-image-grid-two-columns.gbp-offset-large {
    width: min(calc(100% + 250px), 100vw);
}

.gbp-image-grid-two-columns.gbp-offset-xlarge {
    width: min(calc(100% + 400px), 100vw);
}

.gbp-image-grid-two-columns.gbp-offset-full {
    width: 100vw;
}

/** Remove last paragraph margin */
.elementor-widget-text-editor p:last-child{
    margin-bottom: 0;
}

.margin-top-none .elementor-heading-title{
    margin-top: 0 !important;
}
/* Hide GPB List Description */
.hide-description .gbp-info-list-description{
    display: none;
}

.overflow-clip{
     overflow-x: clip !important;
}

/** Yoast Breadcrumbs Override */
#breadcrumbs{
    margin: 0;
}

/* Separator chevron injected via the wpseo_breadcrumb_separator filter
 * (see greyboxpro_child_breadcrumb_separator in functions.php).
 * The SVG strokes with currentColor — set `color` here to recolour it. */
.cf-breadcrumb-sep{
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 0 8px;
}

/** Footer */
.nav-items-border-right{
    border-right: 1px solid #fff;
}

/* ── Offset Width — tablet & mobile gutters ──
 * Adds ~10px breathing room on each side at <= 1024px viewports so offset
 * blocks don't kiss the screen edges. Uses max-width (not width) so it
 * complements the existing width: min(calc(...), 100vw) clamps — only
 * kicks in when the offset would actually have stretched edge-to-edge.
 * If the parent column is narrow enough that calc(100% + Npx) is smaller
 * than calc(100vw - 20px), max-width has no effect and the natural bleed
 * is preserved. Specificity (0,2,0) matches the existing per-target rules
 * so source order wins without !important.
 *
 * The two per-block stylesheets that also define offset widths
 * (blocks/css/gbp-faq-block.css, blocks/css/gbp-testimonial-carousel-block.css)
 * carry the same override scoped to their own selectors. */
@media (max-width: 1024px) {
    .wp-block-image[class*="gbp-offset-"],
    .gbp-elementor-template-insert[class*="gbp-offset-"],
    .gbp-image-grid-asymmetric[class*="gbp-offset-"],
    .gbp-image-grid-two-columns[class*="gbp-offset-"] {
        max-width: calc(100vw - 20px);
    }
}


@media (min-width: 1200px) {
    /** Icon Box Heading Override */
    h4.elementor-icon-box-title{
        margin-top: 0;
        font-size: 24px !important;
    }

    h2.elementor-icon-box-title{
        margin-top: 0;
        font-size: 24px !important;
    }

}

.highlight-heading{
    background: #fddb03;
    color: #000;
    padding: 0 8px;
}

.heading-margin-top-none h2,
.heading-margin-top-none h4 {
    margin-top: 0 !important;
}

.image-hover-grow .elementor-post__thumbnail {
    overflow: hidden;
}

.image-hover-grow .elementor-post__thumbnail img {
    transition: transform 0.3s ease !important;
}

.image-hover-grow .elementor-post__thumbnail img:hover  {
    transform: scale(1.05) translate(-50%, -50%) !important;
}

@media (min-width: 1700px) {
    .header-padding-custom {
        padding-left: 16px !important;
    }
}
@media (max-height: 1200px) {
    .blog-list-wrapper .random-post-grid .e-loop-item .e-parent > .e-child img {
        height: 55vh !important;
        object-fit: cover;
    }
}

/* --- Blog Items / Fluid — Mobile: 2 equal columns, 9px gap, square (1:1) cards.
   The square height itself is set by js/custom_script.js (aspect-ratio here
   breaks ancestor height calculation inside Elementor's nested flex layout). --- */
@media (max-width: 767px) {
    .random-post-grid .elementor-loop-container.elementor-grid {
        gap: 9px;
    }
    .random-post-grid .e-loop-item {
        width: calc(50% - 4.5px);
        transition: none;
    }
    .random-post-grid .e-loop-item .e-parent {
        height: 100%;
        min-height: 0 !important;
    }
    .random-post-grid .e-loop-item .e-parent > .e-child {
        min-height: 0 !important;
    }
    /* let the absolutely-positioned card image anchor to the card (.e-child)
       instead of the zero-height image-widget wrapper */
    .random-post-grid .e-loop-item .e-parent > .e-child .elementor-widget-image {
        position: static;
    }
    .blog-list-wrapper .random-post-grid .e-loop-item .e-parent > .e-child img,
    .random-post-grid .e-loop-item .e-parent > .e-child img {
        height: 100% !important;
        width: 100%;
        object-fit: cover;
    }
}