@charset "utf-8";
/* CSS Document */
/************** RESET **************/
/* http://meyerweb.com/eric/tools/css/reset/
	v2.0 | 20110126
	License: none (public domain)
*/
	
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing: border-box;}

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,
q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

/* Remove margin and padding globally */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
	
/************** 
COLORS 
white - #fff
grey - #4d4b4a
pink - #da3463
dblue - #284857
lblue - #4595a4
yellow - #f2b035

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

/************** GENERAL **************/
         


/************** HEADER **************/
/* Background image and overlay */
header {
    position: relative;
    width: 100%;
    height: 400px;
    background-image: url("../images/solo.png");
    background-size: cover;
    background-position: center;
    z-index: 1;
    margin-bottom: 0; /* Ensure no extra margin */
}

header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 75px;
	background-color: rgba(77, 75, 74, 0.7); /* Grey overlay */
}

/* Header content (logo and navigation) */
.header-content {
	position: absolute;
	top:0;
	left:0;
	z-index: 1; /* Ensures it is above the overlay */
	display: flex;
	justify-content: center;
	align-items: center;
	height: 75px;
	width: 100%;
}

/* Logo */
.logo {
	position: absolute;
	top:50px;
	left: 50%; /* Centers the logo horizontally */
	transform: translateX(-50%); /* Ensures exact horizontal centering */
	z-index: 1;
}

.logo img {
	max-height: 300px; /* Adjust the height of the logo */
	width: auto; /* Maintain the aspect ratio */
}

/* Navigation styling */
nav {
	position: absolute;
	right: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 90%;
	padding: 0 20px;
}

/* Styling for navigation links */
nav a {
	color: white;
	text-decoration: none;
	font-size: 18px;
	font-family: "dogma-outline", sans-serif;
	font-weight: 400;
	font-style: normal;
	margin: 0 10px;
}

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

 nav a.contact {
	color: #f2b035; /* Yellow text color */
	padding: 15px 10px; /* Add padding to create space inside the box */
	background-color: #4595a4;
}


/************** CONTENT **************/

/* HOME */
.home {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center content horizontally */
  
    padding: 20px; /* Optional padding */
    box-sizing: border-box; /* Ensures padding is included in the height calculation */
    text-align: left; /* Ensure text is left-aligned */
    width: 100%; /* Ensure the section takes full width */
    margin-bottom: 0; /* Ensure there's no margin at the bottom */
}

/* Header with specific font (SantaElia) */
.home-header {
    font-family: "santelia-script", sans-serif; /* Custom font */
    font-weight: 700;
    font-style: normal;
    font-size: 50px; /* Large font size for header */
    color: #4595a4; /* Custom color */
    margin-bottom: 20px; /* Space below the header */
}

/* Paragraph with specific font (Impact) */
.home-paragraph {
    width: 500px; /* Set width for paragraph container */
    font-family: 'Impact', sans-serif; /* Custom font */
    font-size: 1.5rem; /* Adjust font size */
    color: #555; /* Text color */
    margin: 0; /* Remove default margin for paragraphs */
}

/* Paragraph styling for spacing */
.home-paragraph p {
    margin-bottom: 20px; /* Space between paragraphs */
}

@media screen and (max-width: 768px) {
    .info-boxes {
        flex-direction: column; /* Stack boxes vertically */
        align-items: center; /* Center align them */
    }

    .info-box {
        width: 90%; /* Adjust width to fit mobile screens */
        max-width: 300px; /* Prevent it from being too wide */
    }
}

.info-boxes {
    display: flex;
    justify-content: center; /* Center the boxes */
    gap: 20px; /* Space between boxes */
    margin: 30px 0; /* Space above and below the boxes */
}

/* Individual info boxes */
.info-box {
    background-color: #e1a03f; /* Yellow color */
    display: flex;
    flex-direction: row; /* Align icon and text side by side */
    align-items: center;
    justify-content: flex-start; /* Align items to the left */
    width: 300px; /* Increase width */
    height: 120px; /* Keep a rectangular shape */
    padding: 15px 20px;
    text-align: left;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    gap: 20px; /* Space between icon and text */

}

.info-icon svg {
    width: 125px; /* Adjust width */
    height: 150px; /* Adjust height */
    display: block; /* Prevent extra spacing issues */
	text-align: center;
	
}


/* Text inside boxes */
.info-box p {
    font-family: 'Impact', sans-serif;
    font-size: 1.2rem;
    color: #333; /* Dark text color */
    margin: 0;
}

/* ABOUT */

.about {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    align-items: center;
    width: 100%;
    padding: 10px 0; /* Add 10px space above and below */
    box-sizing: border-box;
}

/* Image container in About section */
.image-container {
    position: relative;
    width: 100vw; /* Full width of viewport */
    height: 150px; /* Adjust this height if necessary */
    overflow: hidden; /* Prevent overflow if the image is too large */
    display: block;
}

/* About images */
.about-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Make sure the image covers the container without distortion */
}

/* Text overlay for images */
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5); /* Optional: Overlay color */
}

/* Overlay text style */
.overlay-text {
    font-family: 'Impact', sans-serif;
    font-size: 30px;
    color: white;
    text-align: center;
    padding: 10px;
}

/* CONTACT */
.contactsection {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center content horizontally */
    padding: 20px; /* Optional padding */
    box-sizing: border-box; /* Ensures padding is included in the height calculation */
    text-align: left; /* Ensure text is left-aligned */
    width: 100%; /* Ensure the section takes full width */
    margin-bottom: 0; /* Ensure there's no margin at the bottom */
}

/* Header with specific font (SantaElia) */
.contact-header {
    font-family: "santelia-script", sans-serif; /* Custom font */
    font-weight: 700;
    font-style: normal;
    font-size: 50px; /* Large font size for header */
    color: #4595a4; /* Custom color */
    margin-bottom: 20px; /* Space below the header */
}

/* Paragraph with specific font (Impact) */
.contact-paragraph {
    width: 500px; /* Set width for paragraph container */
    font-family: 'Impact', sans-serif; /* Custom font */
    font-size: 1.5rem; /* Adjust font size */
    margin: 0; /* Remove default margin for paragraphs */
    color: #4d4b4a; /* Yellow text color */
    padding: 15px 10px; /* Add padding to create space inside the box */
    background-color: #f2b035;
    text-align: center;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Vertically center the content */
    align-items: center; /* Horizontally center the content */
}

/* Paragraph styling for spacing */
.contact-paragraph p {
    margin-bottom: 20px; /* Space between paragraphs */
}

.email a {
    color: inherit;  /* Makes the text color the same as the surrounding text */
    text-decoration: none; /* Removes underline */
}

.email a:hover {
    text-decoration: underline; /* Optional: Add underline on hover for usability */
}

.email {
    background-color: #4595a4;
    padding: 15px 10px;
    color: #f2b035;
    text-align: center; /* Ensure the text inside the .email is centered */
}

/************** FOOTER **************/