/*
Theme Name: Child Theme
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/

/*Add your own styles here:*/

/* large screens with 1140px with */
@media only screen and (min-width: 1140px)  {

}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 989px) {

}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 989px) {

}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
		
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

}

/* --------- Common Header Settings -------------*/

Set break point for burger menu -----
@media only screen and (max-width: 1845px) {.av-main-nav > li.menu-item-avia-special {
    display: block;
}
.av-main-nav > li {
    display: none !important;
}}




/* Set logo and menu area to full width */
#header #header_main .container {
    width: 100%;
    max-width: none;
}


/* Set top bar area to full width */
#header_meta .container{
	width: 100%; 
	max-width: none;
}

/* Adjust top bar menu setting */
#header_meta .sub_menu {
	font-size:18px;
	text-transform:uppercase;
}

/* Adjust top bar container */
#header_meta {
	padding: 6px 0px; 
}

/* Adjust settings for top bar text */
.phone-info{
	font-size:18px !important;
}

/* Social media icons */
/*.social_bookmarks_facebook a{
 * color:#f0b51c !important;
 * }*/

.social_bookmarks_instagram svg path {
  fill: #fff; 
}

/*Adjust vertical alignment of logo when set to sticky header */
div .logo {
	top: 20px; 
}

.header-scrolled div .logo {
	top: 0px; 
}

/* Menu button settings */
#top #header .av-menu-button > a .avia-menu-text {
    border-radius: 15px;
    padding: 5px 18px;
}


/*
.html_header_transparency #top .avia-builder-el-0 .container{padding-top: 0px !important;}
*/

h2 {font-size:var(--fs-h2);}
h3 {font-size:var(--fs-h3);}

/*Gform customization */
#gform_submit_button_1 { font-size: 18px; border-radius: 15px !important;}
#gform_1 input{margin:auto;}


/* |---------- Common Custom CSS ---------------| */
.csem-horz-gallery{padding-bottom:100px !important;}
.csem-horz-gallery .av-horizontal-gallery-img {margin: 0px 45px !important; border-radius: 30px; box-shadow: -4px 6px 10px #00000042;}
.csem-horz-gallery .av-active-gal-item img{box-shadow: -4px 6px 10px #00000042;}
.csem-horz-gallery  .av-horizontal-gallery-inner {height: 315px !important; }



/*
 * Color section padding 
 * Set color section padding to "no padding"
 * Add custom Classes to the developer tab in color sections
 * For Hero Headers: csem-hero-container-padding
 * For Solid/Smaller/Inner Page Headers: csem-inner-header
 * Body content color Section: csem-body-container-padding
 */

/* Hero Header */
.csem-hero-container-padding {padding-top: var(--pd-lg); padding-bottom: var(--pd-lg);}

/* Inner Header */
.csem-inner-header {margin-top: clamp(10px, 15%, 25px) !important; margin-bottom: clamp(10px, 15%, 20px) !important;}
.csem-inner-header h1 {font-size: clamp(30px, 3vw, 50px); text-transform:uppercase !important; font-family: 'electrolize', Helvetica, Arial, sans-serif; color:#ffffff; font-weight:400;}

/* Boddy Content */
.csem-body-container-padding {padding-top: var(--pd-lg) !important; padding-bottom: var(--pd-lg) !important;}

/*
 * Center text on mobile
 * Give the text block (under developer settings) the class "csem-center-text"
 * Or use: <p class="csem-center-text">Text</p>
 */

/*@media only screen and (max-width: 762px) {
	div{text-align: center !important;}
}
*/

@media only screen and (max-width: 762px) {
  div:not(.csem-vid div) {
    text-align: center !important;
  }
	
}


/*
 * Use for large none heading fonts. Usually in header
 * Add the class "csem-hero" to a paragraph text
 * Or use: <p class="csem-hero">Text</p>
 */
@keyframes scaleIn{
	0% {transform: scale(0.2);}
	85% {transform:scale(1.1);}
	100% {transform:scale(1);}
	} 

.csem-hero{font-size: var(--fs-xl);  font-family: 'libre-caslon-text', Helvetica, Arial, sans-serif; line-height:1em; margin-bottom: 20px; margin-top: 0px;  animation-name: scaleIn; animation-duration: 1s;}

.csem-sub-hero {font-size: var(--fs-lg);  font-family: 'libre-caslon-text', Helvetica, Arial, sans-serif; line-height:1em; margin-bottom: 20px; margin-top: 0px;  animation-name: scaleIn; animation-duration: 1s;}

.csem-hero-subheading{max-width: 768px; margin: 0px auto; margin-top: 40px !important;}
.csem-hero-subheading p{font-size: 25px !important; text-shadow: -2px 3px 5px #959595 !important;}


.csem-fs-lg{font-size: var(--fs-lg); margin: 0px; line-height:1em; display: inline-block;}
.csem-fs-lg p {	overflow: hidden; white-space: nowrap; margin: 0px;	padding-bottom: 3px; animation: typing 2s steps(35), blinking 0.5s steps(1) infinite; animation-delay: 1s; animation-fill-mode: backwards;}

/*
 * Enfold Social icons
 * Applies styles for footer icons in functions.php
 * Ues: Place widget anywhere you'd like social icons set in Enfold to be displayed
 */
 
#top .socialbookmarks-widget .social_bookmarks {
    float: left;
    margin: 15px 0 0 ;
    position: relative;
}

#top .socialbookmarks-widget .social_bookmarks li {
    float: left;
    clear: right !important;
}



/* ------------------------------------------------------------------------------------------- */

#csem-top-bar {display: flex; flex-direction: row; justify-content: flex-end; align-items: center; width: max-content;}
#csem-top-bar div {margin-right:10px;}
@media only screen and (max-width: 762px) {#csem-top-bar {display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: max-content;}
#csem-top-bar div {margin-right:0px; max-width:290px !important; margin-bottom:10px;}
}


#csem-footer-icons {display: flex; flex-direction: row; justify-content: flex-end; align-items: center; width: max-content; margin: auto; font-size: 18px; color: #444;}
#csem-footer-icons div {margin-right:5px;}
#csem-footer-icons a {color: #444;}



/* Gravity Forms input and placeholder color settings */
input[type='text'], input[type='tel'], input[type='email'], textarea {color:#000 !important;}
body .gform_wrapper ::placeholder,
body .gform_wrapper ::-webkit-input-placeholder,
body .gform_wrapper input[placeholder],
body .gform_wrapper select{
  color: #717171 !important;
  opacity: 1
}


.csem-brd-img img {border-radius: 30px !important; box-shadow: -4px 6px 10px #00000042 !important;}

/*---- Home Cards ----------*/
.card-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.card {
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Default colors for screens >= 768px */
.card:nth-child(1) {
    background-color: #fffbfb;
}
.card:nth-child(2) {
    background-color: #ffffff;
}
.card:nth-child(3) {
    background-color: #fffbfb;
}
.card:nth-child(4) {
    background-color: #ffffff;
}
.card:nth-child(5) {
    background-color: #ffffff;
}
.card:nth-child(6) {
    background-color: #fffbfb;
}
.card:nth-child(7) {
    background-color: #ffffff;
}
.card:nth-child(8) {
    background-color: #fffbfb;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 0px;
}

.card-text {
    font-size: 22px;
    color: #333;
    line-height: 1.5;
    font-weight: 500;
    font-family: 'libre-caslon-text', Helvetica, Arial, sans-serif;
}

@media (max-width: 768px) {
    .card-container {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Color order for screens < 768px */
    .card:nth-child(1) {
        background-color: #fffbfb;
    }
    .card:nth-child(2) {
        background-color: #ffffff;
    }
    .card:nth-child(3) {
        background-color: #ffffff;
    }
    .card:nth-child(4) {
        background-color: #fffbfb;
    }
    .card:nth-child(5) {
        background-color: #fffbfb;
    }
    .card:nth-child(6) {
        background-color: #ffffff;
    }
    .card:nth-child(7) {
        background-color: #ffffff;
    }
    .card:nth-child(8) {
        background-color: #fffbfb;
    }
}

@media (max-width: 480px) {
    .card {
        padding: 15px;
    }

    .card-icon {
        width: 100px;
        height: 100px;
    }

    .card-text {
        font-size: 14px;
    }
	
	.flex-container {
	flex-direction: column;
	}
	
	.flex-box img {height: 76px;} 
	.flex-box p { margin: 3px 0;} 
	.flex-box {min-height: 120px; }
}
.csem_phone_number_with_icon{width: fit-content; float: left; margin-right: 20px;}
.csem_phone_number_with_icon a{color:#fff;}

.footer-socket a{color:#fff;}
.footer-socket a:hover{color:#feecec;}
.social_bookmarks li {border-right-style: none !important;}
#socket .container{max-width: fit-content !important;}
.avia-testimonial-content {
	font-family: 'libre-caslon-text', Helvetica, Arial, sans-serif !important; font-style: italic !important;}

.html_header_top.html_header_sticky #header {box-shadow: 0px 7px 12px #32323282; }

#top #header_meta a, #top #header_meta li, #top #header_meta .phone-info {
    
    font-weight: 600 !important;
}

.gchoice_1_12_14 input[type="checkbox"] { display: inline; margin-top: -30px !important; }

.avia-svg-logo svg{ max-height: 125px !important;}

.footer-ctc{display:flex;}
.footer-ctc div{margin-right:20px;}

@media (max-width: 762px) {
	.footer-ctc{flex-direction: column; align-items: center; padding-left: 30px;}
	.footer-socket { padding: 0px !important;}
	.footer-socket .socialbookmarks-widget .social_bookmarks { margin: 0px 0 0; display: flex ; flex-direction: row; justify-content: center; }
}

.popup h3{font-size:26px !important;}

/* Financing Flex container */

.flex-container {
    display: flex;
    flex-wrap: nowrap; /* Keep all divs in one row */
    justify-content: center; /* Evenly distribute space */
    gap: 20px; /* Consistent gap between boxes */
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Flex box */
.flex-box {
    flex: 0 0 25%; /* Equal width for each box, no growing/shrinking */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content */
    align-items: center; /* Horizontally center content */
    text-align: center;
    text-decoration: none; /* Remove underline from link */
    color: inherit; /* Inherit text color */
    min-height: 200px; /* Consistent height for alignment */
}

/* Image styling */
.flex-box img {
    width: auto;
    height: 106px;
    max-width: 85%;
    object-fit: contain; /* Preserve aspect ratio */
}

/* Text styling */
.flex-box p {
    margin: 10px 0;
    font-size: 16px;
    width: 100%; /* Ensure text aligns consistently */
}

.image-overlay  {
	display: none !important;}

.mfp-iframe-scaler iframe {top: -100px;
    left: 0;
    width: 100%;
	height: 141%;}

.mfp-close {
    top: -150px !important;

@media (max-width: 525px) { 
	.mfp-iframe-scaler iframe {
      top: -264px !important;    
	height: 290% !important;
	}
	
	.mfp-close {
    top: -305px !important;
}
}