/* Reset some default styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body and General Layout */
body {
    font-family: 'American Typewriter';
    line-height: 1.6;
    background-color: #efd8dd;
}

/* Header and Navigation */
header {
    background-color: #333; /* Dark background */
    color: white;
    padding: 20px;
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Space between title and nav */
    position: relative; /* Position relative for absolute nav */
    position: sticky;
    opacity: 0.9;
    top: 0;
    z-index: 10; /* Ensure header is above other content */
}

.title {
    /*font-family: 'American Typewriter'; */ /* changed body font above instead */
    font-weight: normal; /* Bold letters */
    margin: 0;

    left:auto;
}

.titleDegree {
    /* font-family: 'American Typewriter'; */
    font-size: 60%;
    font-weight: lighter; /* Bold letters */
    margin: 10px;
    left:auto;
}

.menu-toggle {
    font-size: 30px;
    cursor: pointer;
    transition: transform 0.3s; /* Smooth transition for flipping */
}

header:hover .menu-toggle {
    /* transform: scaleY(-1); /* Flip the hamburger icon vertically on hover */
    transform: rotate(-90deg); /* Rotate the hamburger icon by 90 degrees on hover */
}

header:active .menu-toggle {
    transform: rotate(-90deg); /* Rotate the hamburger icon by 90 degrees on hover */
}

.nav {
    display: none; /* Hide nav by default */
    position: absolute;
    top: 60px; /* Position below the header */
    right: 20px; /* Align to the right */
    background-color: #333;
    border-radius: 5px; /* Optional: rounded corners */
    padding: 10px 0; /* Padding for the menu */
    z-index: 20; /* Ensure nav is above other content */
}

.nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.nav li {
    margin: 10px 0; /* Space between links */
}

.nav a {
    color: white;
    text-decoration: none;
    padding: 10px 20px; /* Padding for links */
    display: block; /* Make links block elements */
}

.nav a:hover {
    background-color: #444; /* Change background on hover */
}

/* Show nav on hover over the header */
header:hover .nav {
    display: block; /* Show nav when hovering over header */
}


/* Hero Section */
.hero {
    position: relative;
    text-align:center;
    color: white;
}

.hero img {
    width: 100%;
    height: auto;
    filter: brightness(100%); /* Adjust the percentage to make it darker or lighter */
}

.hero-text {
    position: absolute;
    top: 40%;
    left: 10%;
    transform: translate(-10%, -40%);
}

.hero-text h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.hero-text p {
    font-family: 'American Typewriter';
    font-size: 1.3rem;
    font-weight: lighter;
    font-style: italic;
    margin-left: 3%;
}

.hero-text p2 {
    font-family: 'American Typewriter';
    font-size: 1.2rem;
    font-weight: lighter;
    font-style: normal;
    margin-left: 35%;

}

/**
** Hero - Process
**/
.hero-process {
    position: relative;
    text-align: center;
    color: white;
}

.hero-process img {
    width: 100%;
    height: auto;
    filter: brightness(90%); /* Adjust the percentage to make it darker or lighter */
}

.hero-process-text {
    position: absolute;

    top: 50%;
    left: 8%;
    transform: translate(-5%, -50%);

}

.hero-process-text p {
    font-family: 'American Typewriter';
    font-size: 1.6rem;
    font-weight: lighter;
    font-style: italic;
    /*margin-right: 10%;*/
    
}

.hero-process-text p2 {
    font-family: 'American Typewriter';
    font-size: 1.2rem;
    font-weight: lighter;
    font-style: normal;
    margin-left: 35%;

}

.process-img {
    float: left; 
    margin-left: 20px;
    margin-right: 30px;
    margin-bottom: 20px;
    width: 350px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
}

/**
** Hero - What to expect
**/
.hero-whattoexpect {
    position: relative;
    text-align: center;
    color: white;
}

.hero-whattoexpect img {
    width: 100%;
    height: auto;
    filter: brightness(70%); /* Adjust the percentage to make it darker or lighter */
}

.hero-whattoexpect-text {
    position: absolute;

    top: 40%;
    left: 40%;
    transform: translate(-10%, -40%);

}

.hero-whattoexpect-text p {
    font-family: 'American Typewriter';
    font-size: 1.6rem;
    font-weight: light;
    font-style: italic;
    /*margin-right: 10%;*/
    
}

.hero-whattoexpect-text p2 {
    font-family: 'American Typewriter';
    font-size: 1.2rem;
    font-weight: light;
    font-style: normal;
    margin-left: 35%;

}

/*
 * about
 */
 .about-list {
    list-style-type:circle;
    padding: 10px;
    margin-left: 10%;
}

.about-img {
    float: right; 
    margin-left: 20px;
    margin-right: 30px;
    margin-bottom: 20px;
    width: 350px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.hero-about {
    position: relative;
    text-align: center;
    color: white;
}

.hero-about img {
    width: 100%;
    height: auto;
    filter: brightness(70%); /* Adjust the percentage to make it darker or lighter */
}

.hero-about-text {
    position: absolute;

    top: 40%;
    left: 5%;
    transform: translate(-2%, -40%);

}

.hero-about-text p {
    font-family: 'American Typewriter';
    font-size: 1.4rem;
    font-weight: lighter;
    font-style: italic;
    /*margin-right: 10%;*/
    
}

.hero-about-text p2 {
    font-family: 'American Typewriter';
    font-size: 0.9rem;
    font-weight: lighter;
    font-style: normal;
    margin-left: 35%;

}


/* general hero text backround darkness */
.dark-background {
    background-color: rgba(0, 0, 0, 0.4); /* Dark background with transparency */
    color: white; /* Change text color for better contrast */
    padding: 10px; /* Optional: add some padding */
    border-radius: 5px; /* Optional: rounded corners */
}

/* Content Section */
.content {
    padding: 2rem;
    text-align: center;
}

/* Content Section - Process */
.content-process {
    padding: 2rem;
    text-align: left;
}

.titleContent {
    /* font-family: 'American Typewriter'; */
    font-weight:normal; /* Bold letters */
    font-size: 2rem;
}

.content h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

/* page break */
.page-break {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 0.2rem;
    width:100%;
}

/* contact-address-bg */
.contact-address-bg {
    background-color: #e8e7e7;
    border-radius: 8px;
    font-size: 1.3rem;

}

/* service cards */
.service-cards {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color: #e8e7e7;
    border-radius: 8px;
}

.card {
    background-color: #fff;
    padding: 20px;
    margin: 20px;
    width: 300px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

.darken {
    filter: brightness(60%);
}

.card h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.card p {
    font-size: 1rem;
    color: #555;
}

/* Footer */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem;
}

/* Media Queries for Responsiveness */
@media (max-width: 1200px) {

    .hero-process-text p {
        font-size: 1.1rem;
    }

    .hero-process-text p2 {
        font-size: 0.9rem;
    }
}

/** about code **/
.content-section-about {
    position: relative;
    padding: 2rem;
    text-align: left;
}


.container-about {
    display: grid; /* Use CSS Grid for layout */
    grid-template-columns: 1fr 300px; /* Two columns: content and image */
    grid-template-rows: auto; /* Automatic row height */
    height: 100vh; /* Full viewport height */
}

.content-about {
    padding: 20px; /* Add padding to the content */
}

.image-about {
    display: flex; /* Center the image */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    background-color: #f0f0f0; /* Optional: background color for the image area */
}

.image-about img {
    width: 100%; /* Make image responsive */
    height: auto; /* Maintain aspect ratio */
}
/* end about code */

/**
** Hero - contact
**/
.hero-contact {
    position: relative;
    text-align: center;
    color: white;
}

.hero-contact img {
    width: 100%;
    height: auto;
    filter: brightness(70%); /* Adjust the percentage to make it darker or lighter */
}

.hero-contact-text {
    position: absolute;
    color:#ffffff;
    top: 50%;
    left: 25%;
    transform: translate(-20%, -50%);

}

.hero-contact-text p {
    font-family: 'American Typewriter';
    font-size: 1.6rem;
    font-weight: light;
    font-style: italic;
    /*margin-right: 10%;*/
    
}

.hero-contact-text p2 {
    font-family: 'American Typewriter';
    font-size: 1.2rem;
    font-weight: light;
    font-style: normal;
    margin-left: 35%;

}
/* end contact hero */


/* contact code - align collons */
.contact-left-of-collon{
    width: 49.9%;
    float: left;
    text-align: right;
    font-size: large;
    font-weight: bold;
}
.contact-right-of-collon{
    width: 49.9%;
    float: right;
    text-align: left;
    font-size: large;
}
/* end contact code*/


@media (max-width: 768px) {
    .service-cards {
        flex-direction: column;
        align-items: center;
    }

    /* home (index.html) */
    .hero-text h1 {
        font-size: 1.8rem;
    }
    .hero-text p {
        font-size: 1rem;
    }
    .hero-text p2 {
        font-size: 0.8rem;
    }


    /* process */
    .hero-process-text h1 {
        font-size: 1.8rem;
    }
    .hero-process-text p {
        font-size: 0.8rem;
    }
    .hero-process-text p2 {
        font-size: 0.6rem;
    }

    /* what to expect */
    .hero-whattoexpect p {
        font-size: 1rem;
    }
    .hero-whattoexpect p2 {
        font-size: 0.8rem;
    }

    /* about */
    .hero-about p {
        font-size: 0.8rem;
    }
    .hero-about p2 {
        font-size: 0.6rem;
    }

    .about-img {
        float: none;

    }

    .process-img {
        float: none;
    }
    
    .image-about {
        width: 100%; /* Full width for the image */
    }
    /* end about code */

    /* contact */
    .hero-contact-text h1 {
        font-size: 1.8rem;
    }
    .hero-contact-text p {
        font-size: 0.8rem;
    }
    .hero-contact-text p2 {
        font-size: 0.6rem;
    }

    nav ul {
        flex-direction: column;
    }

    nav ul li {
        margin: 10px 0;
    }
}

@media (max-width: 480px) {
    .hero-text h1 {
        font-size: 1.5rem;
    }

    .hero-text p {
        font-size: 0.9rem;
    }

    .hero-text p2 {
        font-size: 0.8rem;
    }

    .hero-process-text h1 {
        font-size: 1.5rem;
    }

    .hero-process-text p {
        font-size: 0.7rem;
    }
    .hero-process-text p2 {
        font-size: 0.4rem;
    }

    /* what to expect */
    .hero-whattoexpect p {
        font-size: 0.9rem;
    }
    .hero-whattoexpect p2 {
        font-size: 0.8rem;
    }
        
    /* about */
    .hero-about p {
        font-size: 0.7rem;
    }
    .hero-about p2 {
        font-size: 0.6rem;
    }

    /* about code */

    /* contact */
    .hero-contact-text h1 {
        font-size: 1.5rem;
    }

    .hero-contact-text p {
        font-size: 0.7rem;
    }
    .hero-contact-text p2 {
        font-size: 0.4rem;
    }


    }

    .image-about {
        width: 100%; /* Full width for the image */
    }

    /* end about code */

}