@charset "utf-8";
/* CSS Document */

/*
Theme Name: Heidi Astra Child theme
Theme URI:
Description: A child theme for Astra
Author: Heidi Spaeth
Author URI:
Version: 1.0.0
template: astra
*/
@import url('../astra/style.css');

/***********************************************
INDEX (list of sections)
************************************************
1. Testing Area
2. Resets
3. Generic Classes
4. Colors
5. Universal Styles (theme 'typography, page background color, etc...' overrides.)
6. Buttons
7. Header
8. Navigation
9. Footer Content
10. Gravity Forms Stuff
11. Woo Commerce Stuff
12. ID's (General)
13. Class's (General)
14. Modula OverRides
15. Responsive code below here


************************************************************************************************/ 
/***********************************************
Log of Colors
************************************************

#ef3f47 = RED


**************************/

/***********************************************
************************************************
1. Testing Area
************************************************
***********************************************/

#homepagebanner {margin-top:380px!important;}

.testimonialbody{
	font-size:1.2em;
	line-height: 1.8;
}
.testimonialname{
	font-size:.8em;
	line-height: 1.3;
}

.clickable-area {
    position: relative;          /* Important: creates positioning context */
    cursor: pointer;             /* Hand cursor on hover */
}

.clickable-area a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;                  /* Overlay on top of background but under content */
    text-decoration: none;       /* Hide any underline */
}

/* Optional: Prevent inner interactive elements from being blocked */
.clickable-area a + * {
    position: relative;
    z-index: 2;
}


.serviceboxes {
	/*padding-top:360px;*/
	font-size:16px;
}.serviceboxes2 {
	/*padding-top:360px;*/
	font-size:16px;
}
h4.serviceboxes {
	padding-top:360px;
	font-size:16px;
}
.serviceboxsub {
	Margin-bottom:3px;
	font-weight:600;
	margin-top: 355px;
}
.serviceboxbody {
	line-height:1em !important;
}
#serviceboxtext {
	margin: 355px 0px 0px 0px;
}

#serviceboxes {
    height: 440px;
    width: 300px;
    /*padding-bottom: 430px;*/
	margin: 0 auto;
	background-color:white;
	border-bottom:3px solid red;
}


.hpsummary {
	text-transform: none !important;
	color: #a1a1a1 !important;
	font-size: 1.3em;
	text-align: center;
}
/*
.mybottom-text{
    position: absolute;
    margin-top: 90vh;
	left: 50%; 
	transform: translateX(-50%)
}
*/
.mytext{
    position: relative;
    bottom: 33px;
}

.boldheader_blk {
	text-align:center!important;
	text-transform: uppercase!important;
	color: black !important;
	margin: 0px;
	padding: 0px;
	/*line-height: 0.8em !important;*/
}


.boldheader {
	text-align:center!important;
	text-transform: uppercase!important;
	color: white !important;
	margin: 0px;
	padding: 0px;
	line-height: 0.9em !important;
}

/* Medium devices (1270px and less) */
@media only screen and (max-width: 1270px) {
.boldheader {
	font-size:3.5em;
  }
.boldheader_blk {
	font-size:3.5em;
  }
.mytext {
    bottom: 25px;
	}
.hpsummary {
	font-size: 1.2em;
	}
}
	
/* Small devices (921px and less) */
@media only screen and (max-width: 921px) {
.boldheader {
    font-size:2.0em;
  }
.boldheader_blk {
    font-size:2.0em;
  }
.mytext {
   bottom: 18px;
	}
.hpsummary {
	font-size: 1.1em;
}
}

/* very Small devices (500px and less) */
@media only screen and (max-width: 500px) {
.boldheader {
    font-size:1.5em;
  }
.boldheader_blk {
    font-size:1.5em;
  }
.mytext {
   bottom: 15px;
	}
.hpsummary {
	font-size: 1.0em;
	}
}

/* === Keep your keyframes exactly as they are === */
@keyframes fadeInLeft {
	from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* === Apply these styles to both classes === */
.fadeInLeft,
.fadeInRight, 
.slideInUp {
    opacity: 0;                        /* ← Very important: prevents initial flash */
    animation-fill-mode: backwards;    /* ← Makes delay + immediate start use 'from' state */
}

/* Individual animation settings */
.fadeInLeft {
    animation: fadeInLeft 1.2s ease forwards;
}

.fadeInRight {
    animation: fadeInRight 1.2s ease forwards;
    animation-delay: 1.0s;
}
.slideInUp {
    animation: slideInUp 1.2s ease forwards; 
	animation-delay: 2.0s;
}

/*    old     */

.fullwidthandheight {width:100% !important;height:auto !important;}

.mytable {border-collapse: collapse; width: 70%;background-color:red!important;} 
.mytable tr:nth-child(even) {background-color:#f1f1f1 !important;}
.mytable tr:nth-child(odd) {background-color:#fff !important;}
.mytable th {background-color:#A8292B;}

/***********************************************
************************************************
2. Resets
************************************************
***********************************************/
:focus {outline: 0;}

/***********************************************
************************************************
3. Generic Classes
************************************************
***********************************************/

.clear {clear:both;}
.action-color {color:#ef3f47;} /* currently red */
.bold {font-weight:bold;}
.clearmargin {margin:0;}
.clearpadding {padding:0 !important;}
.left {float:left;}
.lowercase {text-transform:lowercase;}
.uppercase {text-transform:uppercase;}
.margie p {margin:0 !important;}
.pad-left-3 {padding-left:.3em;}
.pad-top-3 {padding:.3em 0 0 0;}
.marg-top-1pt8 {margin-top:1.8em}
.right {float:right;}
.singlelineheight {line-height: 1em !important;}
.textcenter {text-align:center!important;}
.textleft {text-align:left;}
.textright {text-align:right;}
.centermargin {margin:0 auto 0 auto;}
.verticle-align {position:relative; top: 50%; transform: translateY(-50%);}
.align-center{margin:0 auto 0 auto !important;}
.clearfix {overflow: auto;}
.positionrelative {position: relative;}

/***********************************************
************************************************
4. Colors
************************************************
***********************************************/
.cranberry {color:#9f1f4d;}
.dkteal {color:#1ba4b2;}
.gray {color:#8f8e8a;}
.red {color:red !important;}
.teal {color:#26bccb;}
.white {color:#FFFFFF;}
.golden-yellow {color:#ff9d02;}
.hover-gray {color:#e6e6e6;}
.bright-gray {color:#cdcdcd;}
.dkgray {color:#292929;}
.50gray {color:#808080 !important;}

/***********************************************
************************************************
5. gallery Styles
************************************************
***********************************************/
.grid {
    position: relative;
    margin: 0 auto;
    padding: 1em 0;
    max-width: 1200px;
}

.grid__item {
    position: relative;
    float: left;
    margin: 10px;
    width: calc(33.333% - 20px); /* 3 columns */
    overflow: hidden;
    opacity: 0; /* Hidden initially for animation */
}

.grid__item img {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    .grid__item {
        width: calc(50% - 20px); /* 2 columns */
    }
}

@media screen and (max-width: 480px) {
    .grid__item {
        width: calc(100% - 20px); /* 1 column */
    }
}


/***********************************************
************************************************
6. Links & Buttons
************************************************
***********************************************/
a.teal-link {color:#26bccb !important;}
a.teal-link:hover {color:#ff0000 !important;}
a.red-link {color:#ff0000 !important;}
a.red-link:hover {text-decoration: underline red !important; }


/* Base shared styles */
.custom-btn {
  width: 280px;
  height: 50px;
  display: inline-block;          /* Important for <a> to behave like button */
  text-align: center;
  text-decoration: none;          /* Remove underline */
  cursor: pointer;
  position: relative;
  overflow: hidden;               /* Contain pseudo-elements */
  /*font-family: 'Lato', sans-serif;
  font-weight: 500;
  margin: 20px 0 20px 8px; */
}

/* Your specific animation button */
a.custom-btn.mybutton {
  background: #ff9d02;
  color: #fff;
  line-height: 45px;              /* Matches height */
  padding: 0;
  border: none;
  outline: none;
}

/* Span for centering text */
a.custom-btn.mybutton span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 2;                     /* Above frame lines */
}

/* Vertical frame lines */
a.custom-btn.mybutton::before,
a.custom-btn.mybutton::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 0;
  background: #000;
  transition: height 500ms ease;
  z-index: 1;
}

a.custom-btn.mybutton::before { right: 0; top: 0; }
a.custom-btn.mybutton::after  { left: 0; bottom: 0; }

a.custom-btn.mybutton:hover {
  color: #000;
  background: transparent;
}

a.custom-btn.mybutton:hover::before,
a.custom-btn.mybutton:hover::after {
  height: 100%;
}

/* Horizontal lines */
a.custom-btn.mybutton span::before,
a.custom-btn.mybutton span::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 0;
  background: #000;
  transition: width 500ms ease;
  z-index: 1;
}

a.custom-btn.mybutton span::before { left: 0; top: 0; }
a.custom-btn.mybutton span::after  { right: 0; bottom: 0; }

a.custom-btn.mybutton:hover span::before,
a.custom-btn.mybutton:hover span::after {
  width: 100%;
}

/* Accessibility: focus style */
a.custom-btn.mybutton:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/***********************************************
************************************************
13. CLASS's (general)
************************************************
***********************************************/
.image-frm {border: .5em solid #fff !important;-webkit-box-shadow: .3em .4em .7em #d5d2c8 !important;box-shadow: .3em .4em .7em #d5d2c8 !important;}

/*.page-id-1567 table {line-height:0 !important;}*/

/************************************************
14. start of Maximize specificity to override Modula’s styles 
***********************************************/


body .modula .modula-item .jtg-title {
    text-transform: uppercase !important;
    font-size: 2.4em !important;
    font-family: "acumin-pro-extra-condensed", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    color: black !important;
    transition: transform 0.7s ease !important;
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
    transform-style: preserve-3d !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
	letter-spacing: 0px !important;
  transition: letter-spacing 0.7s ease !important; /* Smooth animation over 0.3 seconds */
}

body .modula .modula-item:hover .jtg-title {
    -webkit-transform: scale(1.05) !important;
    transform: scale(1.05) !important;
	color:white !important;
	letter-spacing: 1.5px !important;
}
#jtg-album-2783 .modula-items > .modula-item > .modula-item-content > .figc>.figc-inner {
 padding: 50px 11px !important;
}
	
/************************************************
end of Maximize specificity to override Modula’s styles 
***********************************************/

/***********************************************
************************************************
15. Responsive Code
************************************************
***********************************************/
/* Medium devices (1270px and less) */
@media only screen and (max-width: 1270px) {

	#serviceboxes .elementor-widget-container {
		/*margin: 355px 0 0 0;
		background-color:red;*/
	}
	
#homepagebanner {margin-top:350px!important;}

}
	
/* Small devices (921px and less) */
@media only screen and (max-width: 921px) {
	
	.testimonialbody{
	font-size:1.0em;
	line-height: 1.8;
}
	#homepagebanner {margin-top:280px!important;}


	#serviceboxes .elementor-widget-container {
		/*margin: 283px 0 0 0;*/
		/*background-color:yellow;*/
	}

	#serviceboxes {
		height: 356px;
		width: 240px;
	}

	h4.serviceboxes {
		padding-top:288px;
	}

	.serviceboxbody {
		font-size:14px;
	}
	
	.serviceboxsub {
	margin-top: 285px;
}

	/* Your specific animation button */
	
	.custom-btn {
		width: 200px;
		height: 42px;    
	}
	a.custom-btn.mybutton {
	  line-height: 40px; /* Matches height */
	  padding: 0;
	}
}
@media screen and (max-width: 768px) {
	
#homepagebanner {margin-top:250px!important;}
	
.testimonialbody{
	font-size:1.2em;
	line-height: 1.8;
}
	
	
	#serviceboxes .elementor-widget-container {
		margin: 250px 0 0 0;
		/*background-color:blue;*/
	}
	
	#serviceboxes {
		height: 440px;
		width: 300px;
	}
	.serviceboxsub {
		margin-top: 355px;
}

	.serviceboxbody {
		font-size:inherit;
	}

	
}

/* very Small devices (500px and less) */
@media only screen and (max-width: 500px) {
	
#homepagebanner {margin-top:180px!important;}

}
	
.custom-btn {
  width: 170px;
  height: 38px;    
}

/* Your specific animation button */
a.custom-btn.mybutton {
  line-height: 36px; /* Matches height */
  padding: 0;
}
}

@media screen and (max-width: 480px) {

}