* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body and general text styling */
body {
    font-family: 'Caladea',Arial,sans-serif;
    line-height: 1.6;
    color: #3d3d3d;
    background-color: rgb(249, 249, 249);
}

/* Header styling */
header {
    background-color: #3d3d3d;
    color: white;
    padding: 20px 0;
	position: fixed;
	width: 100%;
	text-shadow: rgba(0, 0, 0, 0.004) 1px 1px 1px
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

header .logo h1 {
	font-size: 30px;
	font-weight: 700;
	text-shadow: 1px 1px 1px rgba(0,0,0,.1);
	letter-spacing: 2px;
}

header .logo img {
    width: 150px; /* Adjust logo size */
    height: auto;
}

header .logo a {
	color: #d3d3d3;
    text-decoration: none;
}

header .logo a:hover {
    color: #f9f9f9
}

header nav ul {
    list-style: none;
    display: flex;
}

header nav ul li {
    margin-left: 20px;
}

header nav ul li a {
    color: #d3d3d3;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    text-decoration: none;
    font-weight: bold;
	font-size: 19px;
	letter-spacing: 0.5px;
	padding: 0px 8px;
}

header nav ul li a:hover {
    color: #f9f9f9
}

/* Phone Icon Styling */

header .phone a img, header .mobile_menu img {
    width: 19px; /* Adjust size of the phone icon */
    height: 19px;
	fill: rgb(230, 230, 230);
	color: rgb(230, 230, 230);
	padding: 0px 0px;
	margin-top: 7px;
}

.mobile_menu {
	display: none;
}

header .lang {
	position: absolute;
	top: 60px;
	right: 20px;
}

header .lang li a{
	font-size: 14px;
	text-decoration: underline;
}

/* Main content styling */
main .intro {
    background-image: url('../images/header_resized.jpg'); /* Background image for the section */
    background-size: cover; /* Ensure the image covers the full section */
    background-position: center; /* Center the image */
    color: white;
    text-align: center;
    padding: 100px 20px; /* Adding padding for the text */
}

main .intro h2 {
    font-size: 73px;
    margin-bottom: 10px;
	color: #fff;
	text-shadow: 0.03em 0.03em 3px rgb(0 0 0);
}

main .intro p {
	font-size: 25px;
	color: #fff;
	text-shadow: 0.13em 0.13em 13px rgb(0 0 0);
}

main .services,
main #contact {
    padding: 40px 20px;
    margin-bottom: 40px;
}

/* Services Section */
#services-outer {
	background-color: #e4e4e4;
}
.line::after {
  content: '';
  display: block;
  border-top: 6px solid #3d3d3d;
  width: 100px;
  margin-bottom: 30px;
}

.services {
    display: flex;
    justify-content: flex-start; /* Aligns the items to the start */
    align-items: flex-start;
    flex-wrap: wrap;
    /*height: 100vh; /* Full viewport height */
    max-width: 1290px; /* Sets the maximum width of the services section */
    margin: 0 auto; /* Centers the section horizontally */
    padding: 20px; /* Optional: add padding for spacing */
}

.services-text {
    width: 60%; /* Text takes up 50% of the width */
    padding: 0px 40px 0px 0px;
    box-sizing: border-box;
}

.services-text h3 {
    font-size: 49px;
    margin-bottom: 10px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

.services-content {
    font-size: 25px;
    margin-bottom: 20px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	letter-spacing: 0.5px;
	line-height: 30px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

.services-content div {
	margin-top: 30px;
	margin-bottom: 30px;
} 

.services-text ul {
    list-style: none;
    padding-left: 20px;
}

.services-text ul li {
    margin-bottom: 5px;
}

.services-text ul li span {
    font-size: 18px;
}

.services-image {
    width: 40%; /* Image takes up the other 50% */
    /*height: 100%; /* Full height */
	max-height: 750px;
	padding-top: 30px;
    overflow: hidden;
}

.services-image img {
    width: 100%;
    height: 100%;
    object-fit: scale-down; /* Ensures the image covers the area without distortion */
}

main #contact {
	text-align: center;
}

main #contact h3 {
	font-size: 31px;
	font-weight: 500;
	letter-spacing: 0.5px;
}

main #contact hr.small {
	max-width: 50px;
	border-width: 2px;
	border-top: 1px solid rgb(61, 61, 61);
	border-bottom-color: rgb(61, 61, 61);
	margin: 20px auto;
}

main #contact p {
	opacity: 0.8;
    font-size: 16px;
}

main #contact .address {
	opacity: 1;
	text-shadow: rgba(0, 0, 0, 0.124) 1px 1px 1px;
	color: #000;
}

main #contact a {
    color: #333;
    text-decoration: none;
}

main #contact a:hover {
    color: #f39c12;
}

/* Footer styling */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

footer a {
    color: #f39c12;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

@media (max-width: 1000px) {
	.services-image {
		padding-top: 20px;
	}

	main .intro h2 {
		font-size: 63px;
	}

	.services-text h3 {
		font-size: 39px;
	}

	.services-content {
		font-size: 20px;
		line-height: 25px;
	}
}

@media (max-width: 800px) {
	.services-image {
		padding-top: 15px;
	}

	main .intro h2 {
		font-size: 53px;
	}

	.services-text h3 {
		font-size: 29px;
	}

	.services-content {
		font-size: 19px;
		line-height: 20px;
	}

	.services-content div {
		margin-top: 20px;
		margin-bottom: 20px;
	} 
}

@media (max-width: 650px) {
	.services-image {
		padding-top: 10px;
	}

	main .intro h2 {
		font-size: 43px;
	}

	.dynamic_menu {
		display: none;
	}

	header .mobile_menu .lang {
		display: none;
	}

	header .mobile_menu:hover .lang {
		display: block;
		background-color: #3d3d3d;
		border: 1px solid rgb(230, 230, 230);
	}

	header .mobile_menu:hover .lang li {
		background-color: #3d3d3d;
		margin: 0px;
		padding: 0px 20px;
		border-bottom: 1px solid rgb(230, 230, 230);

	}

	.mobile_menu {
		display: block;
	}
	
	header .lang {
		display: none;
	}

	.services-text h3 {
		font-size: 25px;
	}

	.services-content {

		font-size: 14px;
		line-height: 20px;
	}

	.services-content div {
		margin-top: 20px;
		margin-bottom: 20px;
	} 

}

@media (max-width: 530px) {
	.services-image {
		padding-top: 50px;
	}

	.small_stretch {
		width: calc(100vw - 50px);
	}
}

@media (max-width: 380px) {
	.smallest_stretch {
		width: calc(100vw - 50px);
	}
}