@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* this imports the font family Inter - font-family: 'Inter', sans-serif; */

* { box-sizing:border-box; padding: 0 0; margin: 0 0; }
body { background:#F6FEFC; color:#001829; font-family:'Inter', sans-serif; font-size:1rem; font-weight: 500; line-height:1.5; scroll-behavior:smooth; scroll-padding:4rem; }


/* Text Setup */

h1, h2, h3, h4, h5, h6 { line-height:1.2; font-weight:700; }

h1 { font-size:3.25rem; margin-bottom:1.5rem; }
h2 { font-size:2.5rem; }
h3 { font-size:1.5rem; }

p { margin-bottom: 1.25rem; }
p:last-child { margin-bottom:0; }


/* Main Page Containers */

.wrapper { width:80%; max-width: 1600px; text-align:center; margin:0 auto; }
.hold { width:100%; float:left; text-align:left; }
.slim { width:60%; max-width:960px; }

.content-mid { margin-top:50vh; transform: translateY(-50%); float:left; } /* to mid content vertically centred */

.divider { width:100%; height:2px; background:linear-gradient(to right, #F6FEFC 33%, #105649, #F6FEFC 66%); float:left; } /* Green content dividers */

.showmob { display:none; } /* For elements that will show on smaller devices */


/* Links and CTAs */

a { text-decoration:none; cursor:pointer; }

a.primary-cta { background:#001829; color:#F6FEFC; border-radius: .5rem; padding: 1rem 1.5rem; transition:.3s ease; }
a.primary-cta:hover { background:#105649; }

a.secondary-cta { border: 1px solid #001829; color:#001829; border-radius:.5rem; padding: 1rem 1.5rem; transition:.3s ease; }
a.secondary-cta:hover { border: 1px solid #105649; color:#105649; }

a.tertiary-cta { color:#001829; border-radius:.5rem; padding: 1rem 1.5rem; transition:.3s ease; }
a.tertiary-cta:hover { color:#105649; }


/* Booking Pop-up */
#book { display:none; width:100vw; height:100vh; position:fixed; top:0; left:0; background:rgba(0,24,41,0.5); z-index:998 !important; animation:fade .3s ease forwards; }
#book .book-contain { width: 50vw; height: 100vh; padding: 0 0; background:#F6FEFC; box-shadow: 4px 4px 16px rgba(0,24,41,0.5); overflow:scroll; position:fixed; top:0; left:0; animation:slidein .6s ease forwards; }
#book .book-contain .close { cursor: pointer; z-index: 999 !important; float:right; position:relative; top:3.75rem; right: 3rem; margin-top:-1rem; background:#001829; color:#F6FEFC; padding:.5rem; line-height:.5; border-radius:3rem; transition:.3s ease; }
#book .book-contain .close:hover { background: #105649; color: #F6FEFC; }
@keyframes fade {
	0% { opacity:0; }
	100% { opacity:1; }
}
@keyframes slidein {
	0% { left:-50vw; }
	40% { left:-50vw; }
	100% { left:0; }
}

/* Navbar */

.navbar { z-index: 997 !important; position:fixed; top:0; left:0; width: 100vw; padding:1.25rem 0; transition:.3s ease; backdrop-filter: blur(0); }
.navbar .logo { float:left; }
.navbar .logo img.navlogo { transition:.3s ease; }
.navbar .nav { float:right; }
.navbar ul.navlist { list-style:none; position:relative; top:1.85rem; transition:.3s ease; }
.navbar li { display:inline-block; }
.navbar li.margin { margin-left:1rem; }


/* Homepage Hero Header */

.heroheader { width: 100vw; height:100vh; background:url('/images/background.svg'), #2DEBB2; overflow:hidden; }
.heroheader .txt { width:50%; height:100vh; float:left; margin-right:5%; }
.heroheader .txt p { width:82%; }
.heroheader .link { margin-top:1.5rem; float:left; width:100%; }
.heroheader .img { width:45%; height:80vh; margin-top:20vh; float:left; }
.heroheader .img img { width:100%; height:100%; float:left; object-fit: contain; object-position:bottom; }


/* Scroll Mouse Icon */

.scrollmouse { z-index: 10 !important; position:absolute; left:10vw; bottom:1.25rem; font-size:.75rem; }
.scrollmouse svg { height:1.25rem; margin-right:.25rem; animation:mouse 2s ease forwards infinite; }
.scrollmouse span { position:relative; top:-.35rem; }
@keyframes mouse {
	0% { transform:translateY(0); }
	75% { transform:translateY(.25rem); }
	100% { transform:translateY(0); }
}


/* Why Marcel Section */

.why-marcel { width:100%; float:left; margin-top:5rem; margin-bottom:3.75rem; }
.why-marcel h2 { text-align:center; margin-bottom:1rem; }
.why-marcel p.title { width:37.5rem; margin:0 auto; text-align:center; }
.why-marcel .services { width:100%; float:left; display:flex; margin-top:2.75rem; }
.why-marcel .services .itm { width:24%; margin-right:1.3333%; float:left; padding:1.25rem; background: #fff; border-radius:.75rem; box-shadow:8px 8px 16px rgba(16,86,73,.1); display: flex; flex-direction: column; justify-content: space-between; }
.why-marcel .services .itm:nth-of-type(4n) { margin-right:0; }
.why-marcel .services .itm .material-symbols-outlined { font-size:2.5rem; color:#105649; margin-bottom:1.25rem; font-weight:600; }
.why-marcel .services .itm .label { font-size: .75rem; color:#001829; opacity:.5; }
.why-marcel .services .itm h3 { margin-top:.25rem; margin-bottom:1rem; }
.why-marcel .services .itm p { margin-bottom:1.25rem; }
.why-marcel .services .itm .pricing { width:100%; float:left; border-top:1px solid rgba(16,86,73,.5); padding-top:1rem; }
.why-marcel .services .itm .pricing .cost { float:right; color:#105649; font-weight:700; }
.why-marcel .services .itm .pricing .link { width:100%; float:left; }
.why-marcel .services .itm .pricing .link a { width:100%; float:left; text-align:center; }


/* About Marcel Section */

.about-marcel { width: 100%; float: left; margin:3.75rem 0; display:flex; }
.about-marcel .img { width:50%; float:left; margin-right:5.5%; }
.about-marcel .img img { width:100%; float:left; }
.about-marcel .txt { width:44.5%; float:left; }
.about-marcel .txt .content-mid { margin-top:50%; transform: translateY(-50%); float:left; }
.about-marcel .txt h2 { margin-bottom:1.5rem; }


/* Contact Marcel Section */
.contact-marcel { width:100%; float:left; margin: 3.75rem 0; }
.contact-marcel h2 { width: 100%; float: left; text-align:center; margin-bottom:2.5rem; }
.contact-marcel h3 { margin-bottom:1rem; }
.contact-marcel .contact-container { width:100%; float:left; display:flex; background: #fff; border-radius:1rem; box-shadow:8px 8px 16px rgba(16,86,73,.1); }

.contact-marcel .info { width:50%; float:left; padding: 2.5rem; background: url('/images/background.svg'), #2DEBB2; border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; display: flex; flex-direction: column; justify-content: space-between; }
.contact-marcel .info ul { list-style:none; }
.contact-marcel .info .txt { width:100%; float:left; }

.contact-marcel .info .details { width:100%; float:left; }
.contact-marcel .info .details li { width:100%; float:left; margin-bottom:1.5rem; }
.contact-marcel .info .details li .material-symbols-outlined { position:relative; top:6px; margin-right:.5rem; }
.contact-marcel .info .details li a { color:#001829; }

.contact-marcel .info .social { width:100%; float:left; }
.contact-marcel .info .social li { display:inline-block; float: left; margin-right:1.25rem; }
.contact-marcel .info .social img { float:left; transition:.3s; }
.contact-marcel .info .social img:hover { opacity:.7; }

.contact-marcel .form { width:50%; float:left; padding: 2.5rem; border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; }
.contact-marcel .form p.status-msg { width:100%; float:left; margin-bottom:1.25rem; background:#001829; color:#F6FEFC; border-radius:.5rem; padding:1rem; }
.contact-marcel .form p.status-msg::first-letter{ text-transform: capitalize; }

.contact-marcel .form .input-top { width:100%; float:left; }
.contact-marcel .form .input-top .formSections { width:100%; float:left; }
.contact-marcel .form .input-top .formSections .input-group { margin-bottom:1.25rem; }
.contact-marcel .form .input-top .formSections .input-group label { width:100%; float: left; margin-bottom: .25rem; font-size:.75rem; color:rgba(0,24,41,.5);}
.contact-marcel .form .input-top .formSections .input-group input, .contact-marcel .form .input-top .formSections .input-group textarea { width:100%; float:left; background:#fff; color:#001829; font-size:1rem; font-family:'Inter', sans-serif; padding:1.25rem 1rem; border-radius:.5rem; border: 1px solid rgba(0,24,41,.3); transition:.3s ease; }
.contact-marcel .form .input-top .formSections .input-group textarea { width:100%; max-width:100%; min-width:100%; height:10rem; min-height:8rem; max-height:12rem; }
.contact-marcel .form .input-top .formSections .input-group input:focus, .contact-marcel .form .input-top .formSections .input-group textarea:focus { outline:1px solid rgba(0,24,41,.5); border: 1px solid rgba(0,24,41,.5); }
.contact-marcel .form .input-top .formSections .half { width:48%; float:left; margin-right:4%; }
.contact-marcel .form .input-top .formSections .half:nth-of-type(2n) { margin-right:0; }
.contact-marcel .form .input-top .formSections .full { width:100%; float:left; }

.contact-marcel .form .g-recaptcha { width:100%; float:left; margin-bottom: 1.25rem; }

.contact-marcel .form button { cursor:pointer; background:#001829; color:#F6FEFC; border-radius: .5rem; padding: 1rem 1.5rem; transition:.3s ease; border:0px solid transparent; font-size:1rem; font-weight:500; font-family:'Inter', sans-serif; }
.contact-marcel .form button:hover, .contact-marcel .form button:focus { background:#105649; }


/* Footer */

.footer { width:100%; float:left; color: #F6FEFC; background: #001829; padding:1.25rem 0 3.75rem 0; }

.footer .foot-logo { width:100%; float:left; margin-bottom:2.5rem; }

.footer .foot-info { width:100%; float:left; margin-bottom:5rem; }
.footer .foot-info .itm { width:20%; float:left; margin-right:20%; }
.footer .foot-info .itm:nth-of-type(3n) { margin-right:0; }
.footer .foot-info .itm h3 { margin-bottom:1.25rem; }
.footer .foot-info .itm ul { list-style:none; }
.footer .foot-info .itm li { width:100%; float:left; }
.footer .foot-info .itm a { float:left; width: 100%; }
.footer .foot-info .itm a.primary-cta { background:#F6FEFC; color:#001829; border-radius: .5rem; padding: 1rem 1.5rem; transition:.3s ease; text-align:center; }
.footer .foot-info .itm a.primary-cta:hover { background:#98B2AE; }
.footer .foot-info .itm a.tertiary-cta { color:#F6FEFC; border-radius:.5rem; padding: 1rem .25rem; transition:.3s ease; text-align:left; }
.footer .foot-info .itm a.tertiary-cta:hover { color:#98B2AE; }
.footer .foot-info .itm a.tertiary-cta svg { fill: #F6FEFC; transition:.3s ease; position:relative; top:3px; float:right; }
.footer .foot-info .itm a.tertiary-cta:hover svg { fill:#98B2AE !important; }

.footer .foot-copy { width:100%; float:left; text-align:center; opacity:.5; }

/* Legal page display */
.legal { width:100%; float:left; margin-top:5rem; padding-top:3rem; }
.legal:first-of-type { margin-top:7rem; padding-top:3rem; }
.legal:last-of-type { margin-bottom:5rem; padding-top:3rem; }
.legal h3 { margin-bottom:1rem; }
.legal ul { width:100%; padding-left:1.25rem; }
.legal li { margin-bottom:.75rem; }

/* Cookie policy pop-up */
.cookiepolicy { width:100vw; height:100vh; position: fixed; top: 0; left: 0; background:rgba(0,24,41,0.5); z-index:998 !important; animation:fade .3s ease forwards; }
.cookiepolicy .cookie-container { padding: 1.25rem; background:#F6FEFC; box-shadow: 4px 4px 16px rgba(0,24,41,0.5); margin:50vh auto 0; transform: translateY(-50%); width:90%; max-width:600px; border-radius:1rem; }
.cookiepolicy .cookie-container h3 { margin-bottom:1.25rem; }
.cookiepolicy .cookie-container .material-symbols-outlined { position:relative; top:5px; margin-right:.5rem; }
.cookiepolicy .cookie-container a { color:#105649; text-decoration:underline; }
.cookiepolicy .cookie-container button { width: 100%; cursor:pointer; background:#001829; color:#F6FEFC; border-radius: .5rem; padding: 1rem 1.5rem; transition:.3s ease; border:0px solid transparent; font-size:1rem; font-weight:500; font-family:'Inter', sans-serif; }
.cookiepolicy .cookie-container button:hover, .contact-marcel .form button:focus { background:#105649; }

/* For making responsive */

@media only screen and (max-width: 1260px) {
	.wrapper { width:90%; }
	.slim { width:70%; }

	/* Wider book */
	#book .book-contain { width: 70vw; }
}

@media only screen and (max-width: 1060px) {
	/* Flex grid on the services drop to 2 colums and rows */
	.why-marcel .services { flex-wrap: wrap; }
	.why-marcel .services .itm { width:48%; margin-right:4%; flex-grow: 1; margin-bottom:2rem; }
	.why-marcel .services .itm:nth-of-type(2n), .why-marcel .services .itm:nth-of-type(4n) { margin-right:0; }
	.why-marcel .services .itm:nth-of-type(3n), .why-marcel .services .itm:nth-of-type(4n) { margin-bottom:0; }

	/* Remove content mid and flex on responsive */
	.about-marcel { display:block; }
	.about-marcel .txt .content-mid { margin-top:0; transform: translateY(0); float:left; }
}

@media only screen and (max-width: 1024px) {
	/* Smaller headers */
	h1 { font-size:2rem; }
	h2 { font-size:1.75rem; }
	h3 { font-size:1.25rem; }

	.why-marcel h2 { margin-bottom:.75rem; }
	.about-marcel .txt h2 { margin-bottom:1.25rem;}
	.contact-marcel h2 { margin-bottom:1.25rem; }

	h2.centreheader { text-align:center; margin-bottom:1.25rem; }
}

@media only screen and (max-width: 850px) {
	/* full width book */
	#book .book-contain { width: 100vw; }

	/* Contact form to single */
	.contact-marcel .contact-container { display:block; }

	.contact-marcel .info { width:100%; padding: 1.25rem; border-top-left-radius: 1rem; border-top-right-radius: 1rem; border-bottom-left-radius: 0rem; display: block; }

	.contact-marcel .info .details { width:100%; float:left; margin:2rem 0; }
	.contact-marcel .info .details li:last-child { margin-bottom: 0; }

	.contact-marcel .info .social { width:100%; float:left; text-align:center; }
	.contact-marcel .info .social li { display:inline-block; float: none; }
	.contact-marcel .info .social li:last-child { margin-right:0; }

	.contact-marcel .form { width:100%; float:left; padding: 1.25rem; border-top-right-radius: 0; border-bottom-right-radius: 1rem; border-bottom-left-radius: 1rem; }
	.contact-marcel .form p.status-msg { padding:.75rem; }

	.contact-marcel .form .input-top .formSections .half { width:100%; float:left; margin-right:0; }

	.contact-marcel .form button { width:100%; text-align:center; }
}

@media only screen and (max-width: 800px) {
	.why-marcel p.title { width:100%; }
}

@media only screen and (max-width: 700px) {
	/* Removing/ showing sections on phone */
	.gomob, .scrollmouse { display:none; }
	.showmob { display:block; }

	/* Content mid remove */
	.content-mid { margin-top:0; transform: translateY(0); }

	/* Nav chnages for mobile */
	.navbar { padding:0.25rem 0; }
	.navbar .logo { float:left; }
	.navbar .logo img.navlogo { max-height:3rem; }
	.navbar ul.navlist { top:0.95rem; }
	.navbar li { display:none; }
	.navbar li.margin { margin-left:0; display:block; }

	/* Single column header */
	.heroheader { width: 100vw; height:auto; overflow:auto; }
	.heroheader .txt { width:100%; height:auto; margin-right:0; margin-top:6.75rem; }
	.heroheader .txt p { width:100%; }
	.heroheader .txt a.primary-cta { display:block; width:100%; float:left; text-align:center; }
	.heroheader .img { width:100%; height:50vh; margin-top:2.5rem; }
	.heroheader .img img { width:100%; float:left; object-fit: cover; object-position:top; }

	/* Making services single colums */
	.why-marcel .services { display:block; }
	.why-marcel .services .itm { width:100%; margin-right:0; margin-bottom:2rem; }
	.why-marcel .services .itm:nth-of-type(3n) { margin-bottom:2rem; }
	.why-marcel .services .itm:nth-of-type(4n) { margin-bottom:0; }

	/* Making about single column */
	.about-marcel .img { width:100%; margin-right:0; margin-bottom:2rem; }
	.about-marcel .txt { width:100%; }

	/* Footer 1 column */
	.footer .foot-logo img { max-height:3rem; }
	.footer .foot-info .itm { width:100%; margin-right:0; margin-bottom:2rem; }

	/* close button move on booking */
	#book .book-contain .close { right: 2rem; }

	/* Legal */
	.legal { margin-top:3.75rem; }
	.legal:first-of-type { margin-top:3.75rem; }
	.legal:last-of-type { margin-bottom:3.75rem; }
}