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

.phone-info{font-size:18px !important;}
.html_header_transparency #top .avia-builder-el-0 .container{padding-top: 0px !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 {background-color:#652d8e !important;}
.csem-inner-header h1 {font-size: clamp(30px, 3vw, 50px); text-transform:none !important; font-family: var(--ff-heading); color:#ffffff; font-weight:400; text-align:center; margin: clamp(10px, 15vw, 25px);}

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

/*
 * 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); text-shadow: var(--fw-bolder);  text-transform:uppercase; font-family: var(--ff-body); line-height: 1em; margin-bottom: 20px; margin-top: 0px; font-weight:bolder; animation-name: scaleIn; animation-duration: 1s;}


.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;
}

/*
 * Adjust mobile menu break point
 * Enable to use custom break point
 * Set max width to desired break point
 */

/*@media only screen and (max-width: 1206px) {.av-main-nav > li.menu-item-avia-special {
    display: block;
}
.av-main-nav > li {
    display: none;
}}
*/

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

#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: row; justify-content: flex-end; align-items: center; width: max-content;}}


#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-deco{font-family: 'cheri', Helvetica, Arial, sans-serif; font-size: 76px; line-height: 1em;}
@media only screen and (max-width: 762px) {.csem-deco{font-size: 49px; margin-top: 214px;}}

.deco-container{margin-top:-100px  !important;}

.lg-font{font-size:var(--fs-h2); line-height:1em; font-family:var(--ff-heading); font-weight:500;}

.two-col-hm {padding:0 var(--pd-lg) 0 var(--pd-lg);}

.csem-deco-sml{font-family: 'cheri', Helvetica, Arial, sans-serif; font-size: 44px; padding: 67px; line-height: 1em;}

h2 {font-size:var(--fs-h2); text-transform:none !important; font-weight: 500;}

.avia-menu-fx {
    border-bottom: 2px dashed #ea0089 !important; background-color:#ea008900 !important;/* Adjust thickness and color as needed */
}

#gform_fields_1 #field_1_1{margin-bottom:0px !important;}

#gform_submit_button_1{font-size:18px; text-transform: uppercase; border: solid 2px #ffffff; border-radius: 25px; font-weight: 600; letter-spacing: .2em;}

.sup-container {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap to the next row */
  gap: 10px; /* Adds spacing between items */
  justify-content: space-between; /* Ensures proper spacing for small screens */
}

.sup {
  flex: 1 1 calc(20% - 10px); /* Default size for 5 items per row */
  min-width: 150px; /* Minimum width for each item */
  max-width: calc(20% - 10px); /* Ensures 5 items per row when there's enough space */
  height: 175px;
  box-sizing: border-box; /* Includes padding and border in width calculation */
	margin-bottom: 185px;
    text-align: center;
}

/* Optional: For very small screens */
@media (max-width: 768px) {
  .sup {
    flex: 1 1 calc(33.33% - 10px); /* Adjust to 3 items per row */
  }
}

@media (max-width: 480px) {
  .sup {
    flex: 1 1 calc(50% - 10px); /* Adjust to 2 items per row */
  }
}

#top #header_main > .container, #top #header_main > .container .main_menu .av-main-nav > li > a{line-height: 160px !important;}