﻿:root {
    --bg-color-primary: white;
    --bg-color-secondary: #ff8f00;
    --text-color-primary: black;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
/*    background: linear-gradient(to bottom, #ff8f00 150px, #ffffff 500px);*/
    background: linear-gradient(to bottom, #ff8f00 150px, #ffffff calc(85px + 60vw));
    background-repeat: no-repeat; /* Prevents the gradient from repeating */
    background-size: 100% 1000px; /* Sets the gradient height to 500px */
    margin: 0;
    color: #333;
}

header {
    background-color: #fff;
    padding: 3.5vw 4.4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    width: 90%;
    margin: 0 auto; /* Centers the header */
    z-index: 1000;
    border-radius: 0 0 4.4vw 4.4vw;
    border: 1px var(--bg-color-secondary, white) solid;
    border-top: 0px;
}

nav {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    flex: 1 1 auto;
    background-color: #fff;
}

.logo img {
    height: 7.7vw;
}

a {
    text-decoration: none;
}

main {
    padding-top: 0px; /* Padding to account for the fixed header */
}

section[id] {
	scroll-margin-top: 17vw;
}

.hero {
	position: relative;
    text-align: center;
    padding: 2.9vw 0 0 0;
}

.hero::after {
	display: block;
	content: '';
	width: calc(100vw - 8em);
	max-width: 660px;
	min-width: 50px;
	height: 15vw;
	margin: 2vw auto;
	padding: 0;
	background-color: #ffffff;
	background-image: url(/imgs/wc-servis-logo.png);
	background-repeat: no-repeat;
	background-size: 15vw auto;
	background-position: center;
	border-radius: 4vw;
/*	border: 1px solid rgba(0,0,0,0.2);*/
	box-shadow: 0 0.8vw 1.3vw rgba(0,0,0,0.25);
}

.hero-image {
/*    width: 40vw;*/
    width: 61vw;
    margin-bottom: 0.3vw;
}

.hero h1 {
    /*font-size: 3rem;*/
	font-size: 4.6vw;
    font-weight: bold;
    color: #ff8f00;
}

.services {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1vw;
/*    max-width: 40rem;*/
    margin: 0 auto;
}

.service-box {
    background-color: #fff;
    border-radius: 4vw;
    width: 30vw;
    margin: 3vw;
    aspect-ratio: 1;
    padding: 1vw;
    display: grid;
    text-align: center;
    background: #E6E6E6;
    box-shadow: 0 0.8vw 1.3vw rgba(0,0,0,0.25);
    text-transform: uppercase;
    align-content: center;
    justify-items: center;
}

    .service-box img {
		width: auto;
		height: auto;
        max-width: 25vw;
		max-height: 15vw;
        margin-bottom: 10px;
    }

    .service-box span {
        font-size: 2.8vw;
        color: var(--text-color-primary, black);
        font-weight: bold;
/*        height:2rem;*/
    }

    .service-box .multi {
        display: flex;
        flex-direction: column;
    }

        .service-box .multi img {
            height: 35px;
        }

/* Feedback Section */
.feedback {
    text-align: center;
    padding: 20px;
    background-color: #fff;
}

    .feedback h2 {
        font-size: 1.5em;
        color: #ff9800;
    }

    .feedback p {
        font-size: 1.2em;
        margin: 10px 0;
    }

.feedback-icons {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

    .feedback-icons img {
        height: 50px;
        margin: 0 10px;
    }

/* Ratings Section */
.ratings {
    text-align: center;
    padding: 20px;
    background-color: #fff;
}

    .ratings h2 {
        font-size: 1.5em;
        color: #333;
    }

.rating-box {
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stars {
    color: #ff9800;
    font-size: 1.2em;
    margin: 10px 0;
}
/* Common styles from previous sections are here */

/* Planned Event Section */
.planned-event {
    text-align: center;
    padding: 5vw 7vw;
	width: 80vw;
	max-width: 40rem;
	margin: 5vw auto;
    background-color: #ff9800;
	border-radius: 4vw;
}

    .planned-event h2 {
        font-size: 5.9vw;
        color: white;
    }

.event-card {
    background-color: #fff;
    border-radius: 2vw;
    width: 60%;
    margin: 3vw auto;
    padding: 0;
	box-shadow: 0 0.8vw 1.3vw rgba(0,0,0,0.25);
    text-align: center;
}

.event-image {
    width: 100%;
    border-radius: 2vw 2vw 0 0;
    margin-bottom: 4vw;
}

.event-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .event-info img {
		display: block;
        height: 15vw;
		margin-top: -15vw;
        margin-bottom: 0.4vw;
		padding: 3vw;
		background-color: #ffffff;
		border-radius: 2vw;
		box-shadow: 0 0.8vw 1.3vw rgba(0,0,0,0.25);
    }
    .event-info p:nth-child(2) {	
		color: #ff9800;
		font-weight: bold;
		line-height: 1.5em;
		margin-bottom: 0;
	}

    .event-info p:nth-child(3) {	
		color: #707070;
		font-size: 3vw;
		line-height: 1.5em;
		margin-bottom: 3vw;
	}

/* Call to Action Section */
.cta {
    text-align: center;
    padding: 20px;
    background-color: white;
}

    .cta .button {
		display: inline-block;
		margin: 4vw;
        padding: 0 8vw;
        background-color: #ffffff;
        color: #000000;
        border: 1px solid #ff9800;
        border-radius: 5vw;
		line-height: 9vw;
        cursor: pointer;
        font-size: 3vw;
    }

/* Contact Section */
.contact {
    text-align: center;
    padding: 20px;
    color: white;
	border-top: 1px solid #ff9800;
    background-color: #ffffff;
	background-repeat: no-repeat;
	background-position: top 15vw left 85%;
	background-image: url(data:image/png;base64,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);
}

	.contact h2 {
		color: #ff9800;
		text-transform: uppercase;
		font-size: 3vw;
		font-weight: normal;
	}

	.contact p {
		color: #000000;
		font-size: 3.5vw;
	}
	
	.contact p:nth-child(2) {
		color: #000000;
		font-size: 6vw;
		font-weight: bold;
		margin-bottom: 2vw;
	}
	
	.contact p:nth-child(2)::after {
		display: block;
		content: '';
		margin: 1vw auto;
		width: 14vw;
		height: 1px;
		background-color: #ff9800;
	}
	
    .contact a {
		color: #ff9800;
    }

.contact-info {
    text-align: center;
    padding: 5vw 7vw;
	width: 80vw;
	max-width: 40rem;
	margin: 5vw auto;
    background-color: #ff9800;
	border-radius: 4vw;
}

    .contact .contact-info a {
		color: #ffffff !important;
    }

    .contact-info p {
		color: #ffffff;
        font-size: 3vw;
    }

    .contact-info p:nth-child(1) {
        font-size: 6vw;
		margin: 1em;
    }

    .contact-info p:nth-child(2) {
        font-size: 3vw;
		font-weight: normal;
		color: #ffffff;
		margin: 1em;
		padding-top: 8vw;
		background-size: 6vw auto;
		background-repeat: no-repeat;
		background-position: center top;
		background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAgMTAuOTk5SDIyQzIyIDUuODY5IDE4LjEyNyAyIDEyLjk5IDJWNEMxNy4wNTIgNCAyMCA2Ljk0MyAyMCAxMC45OTlaIiBmaWxsPSJ3aGl0ZSIvPjxwYXRoIGQ9Ik0xMyA3Ljk5OTk5QzE1LjEwMyA3Ljk5OTk5IDE2IDguODk2OTkgMTYgMTFIMThDMTggNy43NzQ5OSAxNi4yMjUgNS45OTk5OSAxMyA1Ljk5OTk5VjcuOTk5OTlaTTE2LjQyMiAxMy40NDNDMTYuMjI5OSAxMy4yNjgzIDE1Ljk3NzQgMTMuMTc1MiAxNS43MTc4IDEzLjE4MzJDMTUuNDU4MyAxMy4xOTEyIDE1LjIxMiAxMy4yOTk4IDE1LjAzMSAxMy40ODZMMTIuNjM4IDE1Ljk0N0MxMi4wNjIgMTUuODM3IDEwLjkwNCAxNS40NzYgOS43MTIwNCAxNC4yODdDOC41MjAwNCAxMy4wOTQgOC4xNTkwNCAxMS45MzMgOC4wNTIwNCAxMS4zNjFMMTAuNTExIDguOTY2OTlDMTAuNjk3NSA4Ljc4NjEyIDEwLjgwNjIgOC41Mzk4MiAxMC44MTQyIDguMjgwMkMxMC44MjIyIDguMDIwNTkgMTAuNzI4OSA3Ljc2ODA0IDEwLjU1NCA3LjU3NTk5TDYuODU5MDQgMy41MTI5OUM2LjY4NDA4IDMuMzIwMzUgNi40NDA5MiAzLjIwMzUgNi4xODExOSAzLjE4NzI1QzUuOTIxNDYgMy4xNzEwMSA1LjY2NTY0IDMuMjU2NjUgNS40NjgwNCAzLjQyNTk5TDMuMjk4MDQgNS4yODY5OUMzLjEyNTE1IDUuNDYwNTEgMy4wMjE5NiA1LjY5MTQ1IDMuMDA4MDQgNS45MzU5OUMyLjk5MzA0IDYuMTg1OTkgMi43MDcwNCAxMi4xMDggNy4yOTkwNCAxNi43MDJDMTEuMzA1IDIwLjcwNyAxNi4zMjMgMjEgMTcuNzA1IDIxQzE3LjkwNyAyMSAxOC4wMzEgMjAuOTk0IDE4LjA2NCAyMC45OTJDMTguMzA4NiAyMC45NzgzIDE4LjUzOTQgMjAuODc0NyAxOC43MTIgMjAuNzAxTDIwLjU3MiAxOC41M0MyMC43NDE1IDE4LjMzMjUgMjAuODI3MyAxOC4wNzY4IDIwLjgxMTMgMTcuODE3QzIwLjc5NTIgMTcuNTU3MyAyMC42Nzg1IDE3LjMxNDEgMjAuNDg2IDE3LjEzOUwxNi40MjIgMTMuNDQzWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=);
    }

    .contact-info p:nth-child(3) {
		margin: 1em;
		padding-top: 8vw;
		background-size: 6vw auto;
		background-repeat: no-repeat;
		background-position: center top;
		background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjIgNEgyVjIwSDIyVjRaTTIwIDhMMTIgMTNMNCA4VjZMMTIgMTFMMjAgNlY4WiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=);
    }

    .contact-info p:nth-child(4) {
		margin: 1em;
		padding-top: 8vw;
		background-size: 6vw auto;
		background-repeat: no-repeat;
		background-position: center top;
		background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMS41QzkuODEyNzYgMS41MDI1OCA3LjcxNTg0IDIuMzcyNiA2LjE2OTIzIDMuOTE5MjJDNC42MjI2MSA1LjQ2NTg0IDMuNzUyNTkgNy41NjI3NiAzLjc1MDAxIDkuNzVDMy43NDczOSAxMS41Mzc0IDQuMzMxMjQgMTMuMjc2MyA1LjQxMjAxIDE0LjdDNS40MTIwMSAxNC43IDUuNjM3MDEgMTQuOTk2MyA1LjY3Mzc2IDE1LjAzOUwxMiAyMi41TDE4LjMyOTMgMTUuMDM1M0MxOC4zNjIzIDE0Ljk5NTUgMTguNTg4IDE0LjcgMTguNTg4IDE0LjdMMTguNTg4OCAxNC42OTc4QzE5LjY2OSAxMy4yNzQ3IDIwLjI1MjYgMTEuNTM2NiAyMC4yNSA5Ljc1QzIwLjI0NzQgNy41NjI3NiAxOS4zNzc0IDUuNDY1ODQgMTcuODMwOCAzLjkxOTIyQzE2LjI4NDIgMi4zNzI2IDE0LjE4NzMgMS41MDI1OCAxMiAxLjVaTTEyIDEyLjc1QzExLjQwNjcgMTIuNzUgMTAuODI2NiAxMi41NzQxIDEwLjMzMzMgMTIuMjQ0NEM5LjgzOTk1IDExLjkxNDggOS40NTU0MyAxMS40NDYyIDkuMjI4MzcgMTAuODk4MUM5LjAwMTMxIDEwLjM0OTkgOC45NDE5IDkuNzQ2NjcgOS4wNTc2NSA5LjE2NDczQzkuMTczNDEgOC41ODI3OSA5LjQ1OTEzIDguMDQ4MjQgOS44Nzg2OSA3LjYyODY4QzEwLjI5ODIgNy4yMDkxMiAxMC44MzI4IDYuOTIzNCAxMS40MTQ3IDYuODA3NjRDMTEuOTk2NyA2LjY5MTg5IDEyLjU5OTkgNi43NTEzIDEzLjE0ODEgNi45NzgzNkMxMy42OTYyIDcuMjA1NDIgMTQuMTY0OCA3LjU4OTk0IDE0LjQ5NDQgOC4wODMyOUMxNC44MjQxIDguNTc2NjQgMTUgOS4xNTY2NiAxNSA5Ljc1QzE0Ljk5OSAxMC41NDUzIDE0LjY4MjYgMTEuMzA3OCAxNC4xMjAyIDExLjg3MDJDMTMuNTU3OCAxMi40MzI2IDEyLjc5NTQgMTIuNzQ5IDEyIDEyLjc1WiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=);
    }

.social-links img {
    width: 30px;
    margin: 0 10px;
}

/* Newsletter Section */
.newsletter {
    text-align: center;
    padding: 20px;
    background-color: #f5f5f5;
}

    .newsletter form {
        display: flex;
        justify-content: center;
        margin: 20px 0;
    }

    .newsletter input[type="email"] {
        padding: 10px;
        font-size: 1em;
        border: 1px solid #ccc;
        border-radius: 5px 0 0 5px;
        width: 200px;
    }

    .newsletter button {
        padding: 10px;
        background-color: #ff9800;
        color: white;
        border: none;
        border-radius: 0 5px 5px 0;
        cursor: pointer;
    }

    .newsletter p {
        font-size: 0.8em;
        color: #777;
    }

/* Common styles from previous sections are here */

/* Menu Toggle Button */
.menu-toggle {
    display: flex;
    flex-direction: column;
    cursor: pointer;
	width: 7vw;
	height: 7vw;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQuNSA3LjVDNC41IDcuMTAyMTggNC42NTgwNCA2LjcyMDY0IDQuOTM5MzQgNi40MzkzNEM1LjIyMDY0IDYuMTU4MDQgNS42MDIxOCA2IDYgNkgyNEMyNC4zOTc4IDYgMjQuNzc5NCA2LjE1ODA0IDI1LjA2MDcgNi40MzkzNEMyNS4zNDIgNi43MjA2NCAyNS41IDcuMTAyMTggMjUuNSA3LjVDMjUuNSA3Ljg5NzgyIDI1LjM0MiA4LjI3OTM2IDI1LjA2MDcgOC41NjA2NkMyNC43Nzk0IDguODQxOTYgMjQuMzk3OCA5IDI0IDlINkM1LjYwMjE4IDkgNS4yMjA2NCA4Ljg0MTk2IDQuOTM5MzQgOC41NjA2NkM0LjY1ODA0IDguMjc5MzYgNC41IDcuODk3ODIgNC41IDcuNVpNNC41IDE1QzQuNSAxNC42MDIyIDQuNjU4MDQgMTQuMjIwNiA0LjkzOTM0IDEzLjkzOTNDNS4yMjA2NCAxMy42NTggNS42MDIxOCAxMy41IDYgMTMuNUgyNEMyNC4zOTc4IDEzLjUgMjQuNzc5NCAxMy42NTggMjUuMDYwNyAxMy45MzkzQzI1LjM0MiAxNC4yMjA2IDI1LjUgMTQuNjAyMiAyNS41IDE1QzI1LjUgMTUuMzk3OCAyNS4zNDIgMTUuNzc5NCAyNS4wNjA3IDE2LjA2MDdDMjQuNzc5NCAxNi4zNDIgMjQuMzk3OCAxNi41IDI0IDE2LjVINkM1LjYwMjE4IDE2LjUgNS4yMjA2NCAxNi4zNDIgNC45MzkzNCAxNi4wNjA3QzQuNjU4MDQgMTUuNzc5NCA0LjUgMTUuMzk3OCA0LjUgMTVaTTQuNSAyMi41QzQuNSAyMi4xMDIyIDQuNjU4MDQgMjEuNzIwNiA0LjkzOTM0IDIxLjQzOTNDNS4yMjA2NCAyMS4xNTggNS42MDIxOCAyMSA2IDIxSDE1QzE1LjM5NzggMjEgMTUuNzc5NCAyMS4xNTggMTYuMDYwNyAyMS40MzkzQzE2LjM0MiAyMS43MjA2IDE2LjUgMjIuMTAyMiAxNi41IDIyLjVDMTYuNSAyMi44OTc4IDE2LjM0MiAyMy4yNzk0IDE2LjA2MDcgMjMuNTYwN0MxNS43Nzk0IDIzLjg0MiAxNS4zOTc4IDI0IDE1IDI0SDZDNS42MDIxOCAyNCA1LjIyMDY0IDIzLjg0MiA0LjkzOTM0IDIzLjU2MDdDNC42NTgwNCAyMy4yNzk0IDQuNSAyMi44OTc4IDQuNSAyMi41WiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=);	
}

.menu-bar {
    width: 25px;
    height: 3px;
    background-color: #000;
    margin: 4px 0;
}

/* Mobile Menu Styling */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 50%;
    height: max-content;
    width: 90%;
    background-color: #fff;
    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1999;
    transform: translate(-50%, -100%);
    transition: 0.2s ease-in-out;
    display: flex;
    opacity: 0;
    flex-direction: column;
    padding: 20px;
    border-radius: 0 0 1rem 1rem;
}

    .mobile-menu ul {
        list-style-type: none;
        margin-top: 50px;
    }

        .mobile-menu ul li {
            margin-bottom: 20px;
        }

            .mobile-menu ul li a {
                text-decoration: none;
                font-size: 1.5em;
                color: #333;
            }

.mobile-menu-logo {
    margin-top: auto;
    text-align: center;
}

    .mobile-menu-logo img {
        height: 40px;
    }

.close-menu {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.5em;
    cursor: pointer;
    color: #ff9800;
}

/* Mobile Menu Open */
.mobile-menu.open {
    opacity: 1;
    transform: translate(-50%, 0);
}


@media (min-width: 800px) {
	body {
		background: linear-gradient(to bottom, #ff8f00 150px, #ffffff 565px);
	}
	
	header {
        padding: 28px 35px;
		width: 720px;
        border-radius: 0 0 35px 35px;
	}
	
	.logo img {
		height: 62px;
	}

	section[id] {
		scroll-margin-top: 136px;
	}

	.hero {
		padding: 23px 0 0 0;
	}

	.hero::after {
		width: 792px;
		max-width: 660px;
		min-width: 50px;
		height: 120px;
		margin: 16px auto;
		background-size: 120px auto;
		border-radius: 32px;
		box-shadow: 0 6px 10px rgba(0,0,0,0.25);
	}

	.hero-image {
	    width: 488px;
		margin-bottom: 2.4px;
	}

	.hero h1 {
		font-size: 36.8px;
	}

	.services {
		padding: 8px;
	}

	.service-box {
		border-radius: 32px;
		width: 240px;
		margin: 24px;
        padding: 8px;
		box-shadow: 0 6.4px 10.4px rgba(0,0,0,0.25);
	}


    .service-box img {
        max-width: 200px;
		max-height: 120px;
        margin-bottom: 10px;
    }

	.service-box span {
		font-size: 1.4em;
	}

    .service-box p {
        font-size: 22.4px;
    }

        .service-box .multi img {
            height: 35px;
        }

	/* Feedback Section */
	.feedback {
		padding: 20px;
	}

		.feedback h2 {
			font-size: 1.5em;
		}

		.feedback p {
			font-size: 1.2em;
			margin: 10px 0;
		}

	.feedback-icons {
		margin: 20px 0;
	}

		.feedback-icons img {
			height: 50px;
			margin: 0 10px;
		}

	/* Ratings Section */
	.ratings {
        padding: 20px;
    }

		.ratings h2 {
			font-size: 1.5em;
		}

	.rating-box {
		border-radius: 10px;
		padding: 15px;
		margin: 10px 0;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}

	.stars {
		font-size: 1.2em;
		margin: 10px 0;
	}
	/* Common styles from previous sections are here */

	/* Planned Event Section */
	.planned-event {
		padding: 40px 56px;
		width: 640px;
		max-width: 40rem;
		margin: 40px auto;
		border-radius: 32px;
	}

		.planned-event h2 {
			font-size: 47.2px;
		}

	.event-card {
		border-radius: 16px;
		width: 60%;
		margin: 24px auto;
    	box-shadow: 0 6.4px 10.4px rgba(0,0,0,0.25);
	}

	.event-image {
		border-radius: 16px 16px 0 0;
		margin-bottom: 32px;
	}


    .event-info img {
        height: 120px;
		margin-top: -120px;
        margin-bottom: 3.2px;
		padding: 24px;
		border-radius: 16px;
		box-shadow: 0 6.4px 10.4px rgba(0,0,0,0.25);
    }

    .event-info p:nth-child(3) {	
		font-size: 24px;
		line-height: 1.5em;
		margin-bottom: 24px;
	}

	/* Call to Action Section */
	.cta {
		padding: 20px;
	}

		.cta .button {
			margin: 32px;
			padding: 0 64px;
			border-radius: 40px;
			line-height: 72px;
			font-size: 24px;
		}

	/* Contact Section */
	.contact {
		padding: 20px;
		background-position: top 130px left calc(50% + 235px);
	}

		.contact h2 {
			font-size: 24px;
		}

		.contact p {
			font-size: 28px;
		}
	
		.contact p:nth-child(2) {
			font-size: 48px;
			margin-bottom: 16px;
		}
	
		.contact p:nth-child(2)::after {
			margin: 8px auto;
			width: 112px;
			height: 1px;
		}

	.contact-info {
		padding: 40px 56px;
		width: 640px;
		max-width: 40rem;
		margin: 40px auto;
		border-radius: 32px;
	}

		.contact-info p {
			font-size: 24px;
		}

		.contact-info p:nth-child(1) {
			font-size: 48px;
			margin: 1em;
	    }

		.contact-info p:nth-child(2) {
			font-size: 24px;
			margin: 1em;
			padding-top: 64px;
			background-size: 48px auto;
		}

		.contact-info p:nth-child(3) {
			margin: 1em;
			padding-top: 64px;
			background-size: 48px auto;
		}

		.contact-info p:nth-child(4) {
			margin: 1em;
			padding-top: 64px;
			background-size: 48px auto;
		}

	.social-links img {
		width: 30px;
		margin: 0 10px;
	}

/* Newsletter Section */
	.newsletter {
		padding: 20px;
	}

		.newsletter form {
			margin: 20px 0;
		}

		.newsletter input[type="email"] {
			padding: 10px;
			font-size: 1em;
			border: 1px solid #ccc;
			border-radius: 5px 0 0 5px;
			width: 200px;
		}

		.newsletter button {
			padding: 10px;
			border-radius: 0 5px 5px 0;
		}

		.newsletter p {
			font-size: 0.8em;
		}

	/* Common styles from previous sections are here */
		/* Menu Toggle Button */
	.menu-toggle {
		width: 56px;
		height: 56px;
	}

	/* Mobile Menu Styling */
	.mobile-menu {
		left: 50%;
		width: 90%;
		box-shadow: -3px 0 10px rgba(0, 0, 0, 0.3);
		padding: 20px;
		border-radius: 0 0 1rem 1rem;
	}

		.mobile-menu ul {
			list-style-type: none;
			margin-top: 50px;
		}

			.mobile-menu ul li {
				margin-bottom: 20px;
			}

				.mobile-menu ul li a {
					font-size: 1.5em;
				}

    .mobile-menu-logo img {
        height: 40px;
    }

	.close-menu {
		top: 20px;
		right: 20px;
		font-size: 1.5em;
	}
}
