/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.1
*/

h1 { text-transform: uppercase !important; }
.subH1 { font-size: 20px; line-height:30px; text-transform: uppercase; font-weight:300; }
.seitenabstand { padding: 0px 7% !important; }
#startGreen { padding: 0px 7% !important; }
.seitenabstand2 { padding: 0px 7% !important; }
.startLeistungen {  padding: 30px 5px 50px 5px; border-radius: 20px 20px 0px 0px; transition: transform 0.3s ease; /* Smooth transition */}
.startLeistungenA {
    background-color: #2ad246; /* Rot */
}

.startOben {
	font-size: 33px !important;
  	line-height: 43px !important;
  	font-weight: 300 !important;
  	letter-spacing: 0px !important;
}

.startLeistungenB {
    background-color: #07bf3b; /* Grün */
}

.startLeistungenC {
    background-color: #16b241; /* Blau #16b241*/
}

.startLeistungenD {
    background-color: #0fa048 !important; /* Gelb */
}
.startLeistungen h2, .startLeistungen div { color:white !important; }



.startLeistungen:hover {
  transform: translateY(-30px); /* Move the element 30px up */
}

.zusatzLeistung {
	margin-bottom: 40px;
}

.hr-container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%; /* Optional: max-width to control the container's width */
}

.hr-short {
    width: 20%;
    height: 3px;
    background-color: #16b241;
    border: none;
    margin: 0;
}

.hr-long {
    width: 80%;
    height: 1px;
    background-color: gray;
    border: none;
    margin: 0;
}



@media only screen and (max-width: 1340px) {
	#startGreen { padding: 0px 4% !important; }
}

@media only screen and (max-width: 1200px) {
	#startGreen { padding: 0px 2% !important; }
}

@media only screen and (max-width: 1100px) {
	#startGreen { padding: 0px 0% !important; }
}

@media only screen and (max-width: 1000px) {
	.startLeistungen {
	  width: 49% !important;
	  border-radius: 0px !important;
	}
	.startLeistungen:hover {
	  transform: unset; /* Move the element 30px up */
	}
}

@media only screen and (max-width: 800px) {
	.startLeistungen { width: 100% !important; }
}

@media only screen and (max-width: 770px) {
	.startLeistungen { padding:30px!important; }
}