@charset "utf-8";
/* CSS Document */

/*----------------- NOTES ---------------*/
/*----------------- NOTES ---------------*/
/*----------------- NOTES ---------------*/

/* COLOURS

Main:
#003944
#ff6600
#ffffff

Secondary:
#00181D
#B84900

Third:
#CBD5D6



Font Family:
font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";





Social Media:

LinkedIn:
href="https://www.linkedin.com/company/magufirm/" target="_blank"

Instagram:
href="https://www.instagram.com/magu_firm/" target="_blank"

Facebook:
href="https://www.facebook.com/people/Magu-Firm/61554355089651/" target="_blank"

YouTube:
href="https://youtube.com/@magumarketingandcommunications" target="_blank"


*/


/*----------------- 0. DEFAULT ---------------*/
/*----------------- 0. DEFAULT ---------------*/
/*----------------- 0. DEFAULT ---------------*/

* {
    margin: 0;
    padding: 0;
}


.clearfloat {
    clear: both;
}


body {
	font-size: 62.5%;
}

html {
	font-size: 100%;
}

.wrapper {
    width: 80%;
    margin: 0 auto; 
}

img {
    max-width: 100%;
}

video {
    max-width: 100%;
}

.plants {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: -6px;
	z-index: -999;
}



/*Scroll animation*/
/*Scroll animation*/
/*Scroll animation*/

.hidden {
	opacity: 0;
	transition: all 2.2s;
	transform: translateY(8%);
}

.show {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion) {
	.hiden{
		transition: none;
	}
}
















/*--- Typography ---*/
/*--- Typography ---*/
/*--- Typography ---*/

h1 {
	color: #fff;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 800;
	font-size: 6.6em;
	line-height: 1.4em;
}

.hero-text-container h1 {
	color: #fff;
}

h2 {
	color: #003944;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 6.4em;
}

#team h2, .form-text h2 {
	color: #fff;
}


h3 {
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 3.6em;
	font-weight: 700;
	color: #ff6600;
}

.team-container h3 {
	margin-bottom: 20px;
}

h4 {
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: #fff;
	font-size: 2.8em;
	font-weight: 400;
}

.team-container h4 {
	margin-bottom: 20px;
}

h5 {
	color: #fff;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 1.5em;
	font-weight: 400;	
}

h6 {
	color: #003944;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 3.8em;
	font-weight: 700;
}

p {
	color: #003944;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 2.2em;
	line-height: 1.5em;
}

.header-container-container p {
	color: #003944;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 2.2em;
	font-weight: 600;
}

#team p, .form-text p, form p {
	color: #fff;
}

.policy-text p, .policy-text li {
	font-size: 2.6em;
	line-height: 1.5em;
}

.project-text p, .project-end p {
	margin-bottom: 26px;
}



/*Message Font*/
/*Message Font*/
/*Message Font*/

.message-sent-container h1 {
	color: #ff6600;
}

.message-sent-container h3 {
	color: #003944;
}

.message-sent-container p {
	margin-bottom: 40px;
}












/*--- 1. Navigation ---*/
/*--- 1. Navigation ---*/
/*--- 1. Navigation ---*/

nav {
	background-color: #003944;
	position: fixed;
	top: 0;
	z-index: 9;
	width: 100%;
}

.hamburger {
	display: none;
	cursor: pointer;
}

.nav-container {
	display: flex;
	flex-direction: row;
}

.nav-list-social-container {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}

ul {
	display: flex;
	flex-direction: row;	
}

ul ul {
	position: absolute;
	display: flex;
	flex-direction: column;
	width: 202px;
	
	
	background-color: #B84900;
}

li {
	list-style: none;
}

.nav-social {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.nav-down {
	font-size: 12px;
	margin-left: 6px;
}




/*--- NAV LINKS ---*/
/*--- NAV LINKS ---*/
/*--- NAV LINKS ---*/

.nav-icon a:link, .nav-icon a:visited {
	display: block;
	padding: 19px 14px;
/*	padding: 19.5px 19.5px;*/
}

.nav-icon a:hover, .nav-icon a:focus, .nav-icon a:active {
	background-color: #ff6600;
}

li a:link, li a:visited {
	font-family: Poppins, helveica, helvetica nue, arial, san-serif;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	padding: 19px 10px;
/*	padding: 22px 20px;*/
	display: flex;
	flex-direction: row;
	align-items: center;
}

li a:hover, li a:focus, li a:active {
	background-color: #ff6600;
}

li li a:link, li li a:visited {
	font-size: 16px;
	padding: 24px 20px 6px;
	border-bottom: 1px solid #ff6600;
}


li li a:hover, li li a:focus, li li a:active {
	background-color: #ff6600;
}

.nav-social a:link, .nav-social a:visited {
	display: block;
	height: 20px;
	width: 20px;
	padding: 24px 10px;
/*	padding: 25px 18px;*/
	align-content: center;
}

.nav-social a:hover, .nav-social a:focus, .nav-social a:active {
	background-color: #ff6600;
}






/*--- NAV HOVER ---*/
/*--- NAV HOVER ---*/
/*--- NAV HOVER ---*/

ul ul {
	display: none;
}

li:hover ul {
	display: block;
}







/*--- Go to Top Button ---*/
/*--- Go to Top Button ---*/
/*--- Go to Top Button ---*/

#topButton {
	display: block;
	position: fixed;
	z-index: 8;
	cursor: pointer;
	background-color: #003944;
	padding: 22px 20px;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.4);
	border: none;
	bottom: 16%;
	right: 10%;
/*	display: none;*/
}

#topButton:hover {
	background-color: #ff6600;
}




/*--- WhatsApp Button ---*/
/*--- WhatsApp Button ---*/
/*--- WhatsApp Button ---*/

#whatsapp_button {
	position: fixed;
	z-index: 10;
	border-radius: 6px;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.4);
	bottom: 16.6%;
	right: 1%;
	width: 60px;
	height: 60px;
}




























/*--- 2 HEADER ---*/
/*--- 2 HEADER ---*/
/*--- 2 HEADER ---*/

#header {
	width: 100%;
	height: 100vh;
	background-color: #ff6600;
}

#header video {
	object-fit: cover;
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
}

.hero-video-overlay {
	position: absolute;
	top: 25%;
	width: 100%;
	z-index: 1;
	margin: 0 auto;
}

.hero-video-overlay img {
	display: block;
	margin: 0 auto;
	padding-top: 66px;
}

.hero-text-container {
	width: 72%;
	text-align: center;
	margin: 0 auto;
}

.hero-text-container p {
	padding-top: 40px;
}


















/*--- 3. About ---*/
/*--- 3. About ---*/
/*--- 3. About ---*/

#about {
	background:
		
		url("img/blue-plant_message-hd-left.webp") left bottom no-repeat,
		
		url("img/blue-plant_message-hd-right.webp") right bottom no-repeat,
		
		#fff;
	
}

.about-title-container {
	padding-top: 80px;
}

.about-paragraph-container {
	margin-bottom: 46px;
}


.service-list-container {
	margin-top: 20px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-bottom: 280px;
}

.home-service-card {
	display: flex;
	flex-direction: column;
	width: 22%;
	margin-bottom: 80px;
}


/*------- 3.2 about links -----------*/
/*------- 3.2 about links -----------*/
/*------- 3.2 about links -----------*/

.home-service-card a:link, .home-service-card a:visited {
	margin-top: 6px;
	background-color: #ff6600;
	text-align: center;
	text-decoration: none;
	border-radius: 250px;
	padding: 6px 0px;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 600;
	color: #fff;
	font-size: 2.6em;
	border: 3px solid #ff6600;
	transition: all 0.2s ease-out;
}

.home-service-card a:hover, .home-service-card a:focus, .home-service-card a:active {
	background-color: #003944;
}






















/*--- 4. Our Team ---*/
/*--- 4. Our Team ---*/
/*--- 4. Our Team ---*/


#team {
	text-align: center;
	background-color: #003944;
	padding-top: 100px;
	padding-bottom: 120px;
}

.team-photo img {
	width: 100%;
	padding: 40px 0px 30px 0px;
}

.team-members {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.team-person {
	width: 46%;
}

.person-social {
	margin: 0 auto;
	padding-top: 30px;
}

#nataly-social {
	width: 28%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#carlos-social {
	width: 47%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

/*--- Team Links ---*/
/*--- Team Links ---*/
/*--- Team Links ---*/

.person-social a:link, .person-social a:visited  {
	background-color: #ff6600;
	display: block;
	height: 20px;
	width: 20px;
	align-content: center;
	padding: 8px 8px;
	border: 2px solid #ff6600;
}

.person-social a:hover, .person-social a:focus, .person-social a:active {
	background-color: #00181D;
}























/*--- 5. Work ---*/
/*--- 5. Work ---*/
/*--- 5. Work ---*/

#work {
	background-color: #fff;
}

.work-text {
	text-align: center;
	padding: 100px 0px 60px
}

.work-portfolio {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#work .plants {
	margin-top: -320px;
	margin-bottom: -2px;
}





/*--- Links ---*/
/*--- Links ---*/
/*--- Links ---*/

.work-portfolio-container {
	position: relative;
	width: 100%; /* because porfolio container is flex */
	display: flex;
	justify-content: center;
	margin-bottom: 40px;
}

.work-portfolio a:link, .work-portfolio a:visited {
		width: 31%;
	}

.work-container-image {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.4);
}

.work-container-overlay {
	display: flex;
	justify-content: center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	transition: .2s ease;
	opacity: 0;
}

.work-portfolio-container:hover .work-container-overlay {
	opacity: 1;
}

.work-container-text {
	position: absolute;
	text-decoration: none;
	text-align: center;
	top: 84%;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: #fff;
	font-size: 2.0em;
	font-weight: 600;
}

.work-container-overlay-text {
	position: absolute;
	text-decoration: none;
	text-align: center;
	top: 84%;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: #fff;
	font-size: 2.2em;
	font-weight: 600;
}




























/*--- 6. Form ---*/
/*--- 6. Form ---*/
/*--- 6. Form ---*/

#form {
	background-color: #CBD5D6;
	padding: 100px 0px 120px;
}

.form-text {
	text-align: center;
}


.form-container {
	background-color: #003944;
	width: 42%;
	margin: 0 auto;
	box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.4);
	padding: 70px 100px;
}

form {
	display: flex;
	flex-direction: column;
	margin-top: 70px;
}


/*--- Form input ---*/
/*--- Form input ---*/
/*--- Form input ---*/

::placeholder {
	color: #ff6600;
}

label {
	display: none;
}

input[type=text], input[type=email], input[type=subject] {
	border: none;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	text-indent: 20px;
	font-size: 1.8em;
	color: #ff6600;
	height: 55px;
	background-color:#fff;
	margin-bottom: 45px;
	cursor: pointer;
}

textarea {
	background-color:#fff;
	color: #ff6600;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	text-indent: 20px;
	font-size: 1.8em;
	padding-top: 14px;
	height: 260px;
	cursor: pointer;
}

input:focus, textarea:focus {
	outline: 4px solid #ff6600;
}

.form-message {
	align-content: center;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-bottom: 0px;
}

/*--- Form Links ---*/
/*--- Form Links ---*/
/*--- Form Links ---*/

.form-message a:link, .form-message a:visited {
	color: #ff6600;
	font-weight: 600;
}

.form-message a:hover {
	background-color: #ff6600;
	color: #fff;
	text-decoration: none;
}

#form-button {
	border: 2px solid #ff6600;
	color: #fff;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 3.0em;
	font-weight: 600;
	background-color: #ff6600;
	margin: 60px 0px 20px 0px;
	padding: 5px 70px;
	border-radius: 400px;
	cursor: pointer;
	transition: .2s ease;
}

#form-button:hover {
	background-color: #00181D;
	border-color: #ff6600;
	color: #fff;
}



































/*--- 7. Footer ---*/
/*--- 7. Footer ---*/
/*--- 7. Footer ---*/

#footer {
	background-color: #00181D;
}

.footer-logo {
	margin-right: 20px;
}

.footer-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 16px 0px;
}

.footer-info {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	justify-content: space-between;
}

.footer-info-background {
	display: flex;
	flex-direction: row;
	width: 35%;
	justify-content: space-between;
}






/*-- Footer Links ---*/
/*-- Footer Links ---*/
/*-- Footer Links ---*/

.footer-info-background a:link, .footer-info-background a:visited {
	align-content: center;
}



























/*--- 8. Privacy Policy ---*/
/*--- 8. Privacy Policy ---*/
/*--- 8. Privacy Policy ---*/

#privacy-policy {
	background-color: #fff;
}

.privacy-policy-container {
	margin: 72px 0px;
	padding: 70px 0px;
	text-align: center;
}

.policy-title {
	margin-top: 120px;
}

.policy-text {
	margin-bottom: 36px;
}

#policy-legal p {
	list-style: disc;
}

.policy-text li {
	text-align: left;
	color: #003944;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	margin-left: 9%;
	list-style: disc;
}

#privacy-policy .plants {
	margin-top: -380px;
	margin-bottom: -2px;
}

/*--- Policy Navigation ---*/
/*--- Policy Navigation ---*/
/*--- Policy Navigation ---*/

.policy-navigation {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
	height: 700px;
}

.policy-navigation a:link, .policy-navigation a:visited {
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-decoration: none;
	font-weight: 400;
	font-size: 1.6em;
	background-color: #003944;
	display: block;
	width: 500px;
	height: 26px;
	text-align: left;
	text-indent: 16px;
	padding: 5px 5px;
	border-radius: 200px;
}

.policy-navigation a:hover, .policy-navigation a:focus, .policy-navigation a:active {
	background-color: #ff6600;
}


/*--- Go back Button ---*/
/*--- Go back Button ---*/
/*--- Go back Button ---*/

.policy-go-back-button a:link, .policy-go-back-button a:visited {
	background-color: #ff6600;
	border: 2px solid #ff6600;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	font-size: 3.6em;
	padding: 5px 60px;
	border-radius: 300px;
	transition: .2s ease;
}

.policy-go-back-button a:hover, .policy-go-back-button a:focus, .policy-go-back-button a:active {
	background-color: #00181D;
}





















/*--- 9. Projects ---*/
/*--- 9. Projects ---*/
/*--- 9. Projects ---*/

.project-tablet-still {
	display: none;
}

#projects {
	padding-top: 260px;
	text-align: left;
}

#projects h1 {
	color: #003944;
	font-weight: 400;
	font-size: 4.0em;
}

#projects h2 {
	font-size: 8.0em;
}

#projects h3 {
	color: #003944;
	font-size: 5.0em;
	font-weight: 700;
	margin-bottom: 40px;
}

#projects p, #work-navigation p {
	font-size: 2.8em;
}

.project-intro-video {
	padding-top: 60px;
}

.project-paragraph-intro, .project-section-paragraph {
	padding: 160px 0px;
}

.project-text-container-a {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.project-text-container-b {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}

.container-image-project {
	margin: auto 0;
}

.container-text-project, .container-image-project, .container-action-project {
	width: 48%;
}

.project-section-video {
	margin-top: -3px;
}

.project-tablet-still {
	margin-top: -4px;
}

.project-section-image {
	margin-top: -3px;
}

.project-end-paragraph {
	margin: -4px;
	padding: 160px 0px;
	display: flex;
	flex-direction: row;
}

.project-end-paragraph img {
	display: block;
	margin: 0 auto;
	padding: 60px 0px 40px ;
}

.end-paragraph-content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.container-action-project {
	display: flex;
	flex-direction: column;
}







/*9.1 Project Links*/
/*9.1 Project Links*/
/*9.1 Project Links*/


.project-paragraph-intro a:link, .project-paragraph-intro a:visited, .project-section-paragraph a:link, .project-section-paragraph a:visited, .project-section-paragraph a:link, .project-section-paragraph a:visited, .container-text-project a:link, .container-text-project a:visited {
	padding: 0px 4px;
	font-weight: 600;
	color: #ff6600;
}

.project-paragraph-intro a:hover, .project-paragraph-intro a:focus, .project-paragraph-intro a:active, .project-section-paragraph a:hover, .project-section-paragraph a:focus, .project-section-paragraph a:active, .project-section-paragraph a:hover, .project-section-paragraph a:focus, .project-section-paragraph a:active, .container-text-project a:hover, .container-text-project a:focus, .container-text-project a:active {
	color: #fff;
	background-color: #ff6600;
}


.container-action-project a:link, .container-action-project a:visited {
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 2.7em;
	font-weight: 700;
	color: #fff;
	background-color: #ff6600;
	text-decoration: none;
	width: 66%;
	text-align: center;
	margin: 0 auto;
	border-radius: 200px;
	padding: 10px 0;
	border: 3px solid #ff6600;
	transition: all .2s ease;
}

.container-action-project a:hover, .container-action-project a:active, .container-action-project a:focus {
	background-color: #003944;
}




























/*--- 10. Projects Navigation ---*/
/*--- 10. Projects Navigation ---*/
/*--- 10. Projects Navigation ---*/

#work-navigation {
	background-color: #CBD5D6;
	text-align: left;
}

#work-navigation h2 {
	padding: 120px 0px 60px 0px;
}

.project-navigation-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.project-navigation-contact {
	display: flex;
	flex-direction: column;
	text-align: center;
	margin-bottom: -320px;
	margin-top: 120px;
}

.project-navigation-contact h4 {
	margin-top: 30px;
	font-size: 2.2em;
	font-weight: 400;
	color: #003944;
}









/*10.1 Project navigation links*/
/*10.1 Project navigation links*/
/*10.1 Project navigation links*/

.project-navigation-menu a:link {
	width: 30%; /* Link widht */
}

.project-navigation-link-container {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
}

.project-link-container-image {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.4);
}

.project-link-overlay {
	display: flex;
	justify-content: center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	transition: .2s ease;
	opacity: 0;
}

.project-navigation-link-container:hover .project-link-overlay {
	opacity: 1;
}

.project-link-container-text {
	position: absolute;
	text-decoration: none;
	text-align: center;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: #fff;
	top: 79%;
}

.project-link-container-text h4 {
	font-size: 1.6em;
	font-weight: 600;	
}

.project-link-container-text h5 {
	margin-top: 6px;
	font-weight: 300;
	font-size: 1.4em;
}

.project-link-overlay-text {
	position: absolute;
	text-decoration: none;
	text-align: center;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: #fff;
	font-weight: 600;
	top: 78%;
}

.project-link-overlay-text h4 {
	font-size: 1.84em;
	font-weight: 600;	
}

.project-link-overlay-text h5 {
	margin-top: 6px;
	font-weight: 300;
	font-size: 1.6em;
}

.project-navigation-contact a:link, .project-navigation-contact a:visited {
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 2.7em;
	font-weight: 700;
	color: #fff;
	background-color: #ff6600;
	text-decoration: none;
	width: 23%;
	text-align: center;
	margin: 0 auto;
	border-radius: 200px;
	padding: 10px 0;
	border: 3px solid #ff6600;
	transition: all .2s ease;
}


.project-navigation-contact a:hover, .project-navigation-contact a:active, .project-navigation-contact a:focus {
	background-color: #003944;
}

















/*11. Message Sent*/
/*11. Message Sent*/
/*11. Message Sent*/

#message-sent{
	padding-top: 0%;
	width: 100%;
	background: 
		
		url("img/blue-plant_message-hd-left.webp") left bottom no-repeat fixed,
		
		url("img/blue-plant_message-hd-right.webp") right bottom no-repeat fixed,
		
		#fff;
}

.message-sent-container {
	padding-top: 150px;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	text-align: center;
	width: 50%;
}

.message-sent-title {
	padding-bottom: 40px;
}

.message-sent-subtitle {
	padding-top: 60px;
}

.message-link {
	padding: 120px 0px 120px 0px;
}


/*Message Link*/
/*Message Link*/
/*Message Link*/

.message-sent-copy a:link, .message-sent-copy a:visited {
	color: #ff6600;
	padding: 0px 3px;
}

.message-sent-copy a:hover, .message-sent-copy a:focus, .message-sent-copy a:active {
	color: #fff;
	text-decoration: none;
	background-color: #ff6600;
}

.message-sent-subtitle a:link, .message-sent-subtitle a:visited {
	background-color: #ff6600;
	border: 2px solid #ff6600;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	font-size: 3.6em;
	padding: 5px 60px;
	border-radius: 300px;
	transition: .2s ease;
}

.message-sent-subtitle a:hover, .message-sent-subtitle a:focus, .message-sent-subtitle a:active {
	background-color: #00181D;
}













/*12. service web*/
/*12. service web*/
/*12. service web*/

/*font*/
/*font*/
/*font*/

#service-web-header h1, #web-process h1, #web-intro-packages h1, #web-packages h1, #different-budget-section h1 {
	color: #003944;
	margin-bottom: 14px;
	font-size: 6.6em;
	line-height: 1.1em;
}

#service-web-header h2, #web-process h2, #web-intro-packages h2, #web-packages h2, #different-budget-section h2 {
	margin-bottom: 14px;
	font-size: 6.6em;
	line-height: 1.1em;
}

#service-web-header h3, #web-process h3, #web-intro-packages h3, #web-packages h3, #different-budget-section h3 {
	color: #003944;
	font-size: 3.2em;
	font-weight: 400;
	margin-bottom: 60px;
}

#service-web-header h4, #web-process h4, #web-intro-packages h4, #different-budget-section h4 {
	color: #003944;
	font-weight: 300;
	font-size: 1.8em;
	line-height: 1.6em;
}

#web-packages h3 {
	margin-bottom: 50px;
}

#web-packages h4 {
	color: #fff;
	font-weight: 300;
	font-size: 1.8em;
	line-height: 1.6em;
}



#web-process .pannel h4 {
	color: #003944;
}

.e-commerce-details h4 {
	color: #003944;
}


h6 {
	
}

#service-web-header p, #web-process p, #web-intro-packages p, #different-budget-section p {
	font-size: 2.4em;
	margin: 0px 0px 20px;
}

.web-process-container h2, .web-process-container h3, .web-process-container h4, .web-process-container p {
	color: #fff;
}

#web-process h3 {
	color: #fff;
}



.web-packages-container h4 {
	color: #fff;
}

.web-packages-container h5 {
	color: #fff;
	font-weight: 700;
	font-size: 2.8em;
}

.web-packages-container h6 {
	color: #fff;
	font-size: 2.2em;
	margin-bottom: 12px;
}

.e-commerce-details h5 {
	color: #003944;
}

.different-budget-text p {
	color: #FFFFFF;
}

.package-list-container p {
	color: #fff;
	font-size: 1.45em;
	line-height: 1.3em;
	margin-bottom: 10px;
}





/*12. service web structure*/
/*12. service web structure*/
/*12. service web structure*/

#service-web-header {
	margin: 180px 0px 0px;
	background-image:url("img/blue-plant_message-laptop-right.webp");
	background-repeat: no-repeat;
	background-position: right bottom;
}

.web-header-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.web-header-text, .web-header-video, .web-process-description, .web-process-details, .e-commerce-details, .e-commerce-contact, .different-budget-text, .different-budget-link {
	width: 48%;
}

.web-header-text {
	margin-bottom: 90px;
}

.web-header-video {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 120px;
}

.video-mp4 {
	display: none;
}







.web-hero-video-thumbnail img {
	box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.4);
}

.web-header-video video {
	box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.4);
}







#web-process {
	background-color: #003944;
	padding: 100px 0px;
}

.web-process-container {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}

.web-process-description {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.web-process-description img {
	margin-top: 20px;
}

.accordion-button {
	padding-bottom: 40px;
}








#web-intro-packages {
	padding-top: 90px;
}

.intro-packages-container {
	width: 50%;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
}

.intro-package-plants {
	margin-top: -600px;
	height: 640px;
	background:
		
			url("img/blue-plant_left.webp") left bottom no-repeat,

			url("img/blue-plant_right.webp") right bottom no-repeat,

			#fff;
}








#web-packages {
	padding: 100px 0px;
	background-color: #CBD5D6;
}

.web-packages-container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.web-package-card {
	width: 29.2%;
	height: 900px;
	padding: 60px 20px 0px 20px;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.4);
}

#web-package-1 {
	background-color: #ff6600;
}

#web-package-2 {
	background-color: #003944;
}

#web-package-3 {
	background-color: #016B80;
}

.card-title {
	margin-bottom: 20px;
}

.card-price, .card-section {
	margin-bottom: 60px;
}

.package-list-container {
	display: flex;
	flex-direction: row;
}

.package-list-dot {
	width: 5%;
}

.package-list-text {
	width: 92%;
}









.e-commerce-add-on-section {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	padding: 86px 0px;
}

.e-commerce-details {
	margin: auto 0;
}

.e-commerce-contact  {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.e-commerce-contact img {
	width: 36%;
}









#different-budget-section {
	background-color: #003944;
}

.different-budget-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 100px 0px 60px;
}

.different-budget-link {
	display: flex;
	justify-content: center;
	flex-direction: row;
	margin: auto 0;
}







/*12. service web links*/
/*12. service web links*/
/*12. service web links*/

.web-header-video a:link, .web-header-video a:visited {
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	text-decoration: none;
	font-weight: 600;
	color: #fff;
	border-radius: 350px;
	text-align: center;
	background-color: #ff6600;
	border: 3px solid #ff6600;
	
	
	width: 92%;
	padding: 5px 0px;
	font-size: 3.6em;
	margin-top: 50px;
}

.web-header-video a:hover, .web-header-video a:focus, .web-header-video a:active {
	background-color: #003944;
}

.e-commerce-contact a:link, .e-commerce-contact a:visited {
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	text-decoration: none;
	font-weight: 600;
	color: #fff;
	border-radius: 350px;
	text-align: center;
	background-color: #ff6600;
	border: 3px solid #ff6600;
	transition: .25s;
	
	
	width: 97%;
	padding: 5px 0px;
	font-size: 3.6em;
	margin-top: 20px;
}

.e-commerce-contact a:hover, .e-commerce-contact a:focus, .e-commerce-contact a:active {
	background-color: #003944;
}

.different-budget-link a:link, .different-budget-link a:visited {
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	text-decoration: none;
	font-weight: 600;
	color: #fff;
	border-radius: 350px;
	text-align: center;
	background-color: #ff6600;
	border: 3px solid #ff6600;
	transition: .25s;
	width: 80%;
	
	
	padding: 8px 0px;
	font-size: 3.1em;
}

.different-budget-link a:hover, .different-budget-link a:focus, .different-budget-link a:active {
	background-color: #001A1E;
}






/*12.3 service web accordion*/
/*12.3 service web accordion*/
/*12.3 service web accordion*/

.accordion {
	border: 3px solid #ff6600;
	background-color: #ff6600;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: #fff;
	cursor: pointer;
	width: 100%;
	text-align: left;
	text-indent: 20px;
	font-size: 2.3em;
	padding: 20px 0px;
	outline: none;
	transition:0.25s;
	border-radius: 300px;
}

.active, .accordion:hover {
	background-color: #001A1E;
}

.pannel {
	background-color: #fff;
	padding: 8px 20px 50px 20px;
	border-radius: 30px;
	
	display: none;
	overflow: hidden;
}

.accordion:after {
	content: '\0002B'; /* Unicode character for "plus" sign (+) */
	font-size: 1.5em;
	color: #fff;
	align-self: flex-end;
	float: right;
	margin: -10px 30px 0px 0px;
}

.active:after {
  content: "\2212"; /* Unicode character for "minus" sign (-) */
}























/*13.1.1 services*/
/*13.1.1 services*/
/*13.1.1 services*/

h1, h6 {
	color: #000;
}

.services-card-a h4, .services-card-b h4 {
	font-weight: 700;
	margin-bottom: 14px;
}

.services-card-a h4 {
	color: #003944;
}

.services-card-b h4 {
	color: #fff;
}

#work-flow h4 {
	color: #003944;
	font-size: 2.0em;
}

.testimonial-client h5 {
	color: #003944;
	font-size: 2.0em;
	font-weight: 700;
}

#services-header p, #services-description p {
	font-weight: 400;
}

.card-list-item p, .card-list-item-last p {
	margin-left: 16px;
	font-size: 1.9em;
}

.services-hero-text h1, .services-hero-text h3, .services-hero-text p {
	color: #fff;
}

.services-card-b p {
	color: #fff;
}

#work-flow h2, #work-flow p {
	color: #fff;
}

.services-outro-container h3, .services-outro-container p {
	color: #fff;
}

/*13.1.2 services header*/
/*13.1.2 services header*/
/*13.1.2 services header*/

#services-header {
	height: 100vh;
	margin-top: 68px;
	background: 
		
			url("img/services_header-img-left.webp") left top no-repeat fixed,

			url("img/services_header-img-right.webp") right bottom no-repeat fixed,

			#ff6600;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.services-hero-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.services-hero-text, .services-hero-video {
	width: 45%;
}

.services-hero-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.services-hero-text h3 {
	margin-bottom: 24px;
}

.services-hero-video {
	display: flex;
	justify-content: center;
}

/*13.2.1 services description*/
/*13.2.1 services description*/
/*13.2.1 services description*/

#services-description {
	padding: 100px 0px 280px;
	background: 
		
	url("img/service-plant-white_left.webp") left bottom no-repeat fixed,

	url("img/service-plant-white_right.webp") right bottom no-repeat fixed,
		
	#003944
}

.services-card-a, .services-card-b {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 40px 100px; /* left and right padding*/
	border-radius: 40px;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.4);
	margin-bottom: 40px;
}

.services-card-a {
	background-color: #fff;
}

.services-card-b {
	background-color: #016B80;
}

.card-text {
	display: flex;
	flex-direction: column;
}

.card-list-item, .card-list-item-last {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 14px;
}

.card-list-item-last {
	margin-bottom: 0px;
}

.card-text, .card-list {
	width: 48%;
}

.card-list-item img, .card-list-item-last img {
	width: 10%;
}

/*13.2.2 services cards links*/
/*13.2.2 services cards links*/
/*13.2.2 services cards links*/


.card-link a:link, .card-link a:visited {margin-top: 60px;
	display: block;
	text-decoration: none;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 600;
	font-size: 2.4em;
	color: #fff;
	background-color: #ff6600;
	text-align: center;
	border: 3px solid #ff6600;
	padding: 12px 0px;
	border-radius: 250px;
	transition: all 0.2s ease-out;
}

.card-link a:hover, .card-link a:focus, .card-link a:active {
	background-color: #003944;
}

/*13.3.1 services testimonials*/
/*13.3.1 services testimonials*/
/*13.3.1 services testimonials*/

.testimonials-container {
	padding: 120px 0px;
}

.testimonials-text {
	margin-top: 60px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.testimonial-client {
	width: 30%;
}

.testimonial-client img {
	margin-bottom: 16px;
}

.testimonial-client p {
	margin-bottom: 16px;
}

.testimonal-call-to-action {
	padding-top: 80px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.testimonial-button {
	width: 67%;
}

.testimonial-button p {
	margin-bottom: 30px;
}


.testimonial-plant {
	margin: auto auto;
}



/*13.3.2 testimonial button*/
/*13.3.2 testimonial button*/
/*13.3.2 testimonial button*/

.testimonial-button a:link, .testimonial-button a:visited {
	display: flex;width: 76%;
	justify-content: center;
	margin: 0 auto;
	text-decoration: none;
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 600;
	background-color: #ff6600;
	color: #fff;
	font-size: 4.4em;
	border: 3px solid #ff6600;
	border-radius: 250px;
	padding: 6px 0px;
	
	transition: all 0.2s ease-out;
}

.testimonial-button a:hover, .testimonial-button a:focus, .testimonial-button a:active {
	background-color: #003944;
}

/*13.4 work flow*/
/*13.4 work flow*/
/*13.4 work flow*/

#work-flow {
	background-color: #003944;
	padding: 120px 0px;
}

#work-flow p {
	margin-bottom: 80px;
}

/*13.5.1 services outro*/
/*13.5.1 services outro*/
/*13.5.1 services outro*/

#services-outro {
	background-color: #CBD5D6;
	padding: 120px 0px;
}

.services-outro-container {
	width: 40%;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	padding: 100px;
	background-color: #003944;
	border-radius: 40px;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.4);
}

.services-outro-container h3 {
	margin-bottom: 20px;
}

.services-outro-container p {
	margin-bottom: 60px;
}

/*13.5.2 service outro links*/
/*13.5.2 service outro links*/
/*13.5.2 service outro links*/

.services-outro-container a:link, .services-outro-container a:visited {
	font-family: Poppins,
		Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-decoration: none;
	font-size: 3.2em;
	font-weight: 600;
	background-color: #ff6600;
	text-align: center;
	padding: 6px 0px;
	border: 3px solid #ff6600;
	border-radius: 250px;
	transition: all 0.25s ease-out;
}

.services-outro-container a:hover, .services-outro-container a:focus, .services-outro-container a:active {
	background-color: #001A1E;
}









/*--- Laptop ---*/
/*--- Laptop ---*/
/*--- Between 1024px and 1279px ---*/
/*--- Between 1024px and 1279px ---*/

@media only screen and (max-width: 1279px) {
	
	/*	laptop default*/
	/*	laptop default*/
	/*	laptop default*/
	
	.wrapper {
    	width: 83%;
	}
	
	h1 {
		font-size: 5.8em;
		line-height: 1.4em;
	}
	
	h2 {
		font-size: 5.2em;
	}
	
	h3 {
		font-size: 2.9em;
	
	}
	
	h4 {
		font-size: 2.5em;
	}
	
	h5 {
		font-size: 1.4em;
	}
	
	/*
	
	h6 {
		font-size: 3.8em;
	}
		
	*/

	p {
		font-size: 1.9em;
		line-height: 1.6em;
	}
	
	.header-container-container p {
		font-size: 2.0em;
	}
	
	.policy-text p, .policy-text li {
		font-size: 2.4em;
		line-height: 1.4em;
	}
	
	.plant-left, .plant-right {
		width: 30%;
	}
	
	
	
/*--- WhatsApp Button ---*/
/*--- WhatsApp Button ---*/
/*--- WhatsApp Button ---*/

	
	
	
	
	
	
	
	
	/*	laptop header*/
	/*	laptop header*/
	/*	laptop header*/	
	
	

	

	.hero-video-overlay {
		top: 23%;
	}

	.hero-video-overlay img {
		padding-top: 64px;
	}

	.hero-text-container {
		width: 55%;
	}

	.hero-text-container p {
		padding-top: 40px;
	}
	

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	laptop about*/
	/*	laptop about*/
	/*	laptop about*/
	
	.about-title-container {
		padding-top: 70px;
	}
	
	#about {
		background: 
		url("img/blue-plant_message-laptop-left.webp") left bottom no-repeat,
		
		url("img/blue-plant_message-laptop-right.webp") right bottom no-repeat,
		
		#fff;
	}
	
	.service-list-container {
		margin-top: 20px;
		padding-bottom: 180px;
	}

	.home-service-card {
		width: 22%;
		margin-bottom: 80px;
	}


	/*------- 3.2 about links -----------*/
	/*------- 3.2 about links -----------*/
	/*------- 3.2 about links -----------*/

	.home-service-card a:link, .home-service-card a:visited {
		margin-top: 6px;
		padding: 6px 0px;
		font-size: 2.2em;
	}

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	laptop team*/
	/*	laptop team*/
	/*	laptop team*/
	
	#nataly-social {
		width: 40%;
	}

	#carlos-social {
		width: 67%;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	laptop work*/
	/*	laptop work*/
	/*	laptop work*/
	
	.work-text {
		padding: 80px 0px 50px
	}
	
	.work-portfolio-container {
		margin-bottom: 20px;
	}
	
	.work-portfolio a:link, .work-portfolio a:visited {
		width: 32%;
	}
	
	.work-container-text {
		top: 83%;
		font-size: 1.7em;
	}

	.work-container-overlay-text {
		top: 83%;
		font-size: 1.8em;
	}
	
	#work .plants {
		margin-top: -110px;
		margin-bottom: -6px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	laptop form*/
	/*	laptop form*/
	/*	laptop form*/
	
	.form-container {
		width: 66%;
	}
	
	
	input[type=text], input[type=email], input[type=subject] {
		font-size: 1.7em;
	}

	textarea {
		font-size: 1.7em;
	}
	
	#form {
		padding: 80px 0px 90px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	laptop footer*/
	/*	laptop footer*/
	/*	laptop footer*/
	
	.footer-info-background {
		width: 44%;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	laptop policy*/
	/*	laptop policy*/
	/*	laptop policy*/
	
	.policy-navigation {
		margin-top: 20px;
		height: 740px;
	}
	
	.policy-navigation a:link, .policy-navigation a:visited {
		width: 600px;
		font-size: 1.6em;
		height: 26px;
	}
	
	.policy-title {
		margin-top: 80px;
	}
	
	.policy-text {
		margin-bottom: 30px;
	}
		
	.policy-text li {
		margin-left: 0%;
	}
		
	#privacy-policy .plants {
		margin-top: -190px;
	}
	
	.policy-go-back-button a:link, .policy-go-back-button a:visited {
		font-size: 3.0em;
		padding: 4px 50px;
	}
	
	#privacy-policy .plants {
		margin-top: -240px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	laptop message sent*/
	/*	laptop message sent*/
	/*	laptop message sent*/
	
	#message-sent{
		background: 

			url("img/blue-plant_message-laptop-left.webp") left bottom no-repeat fixed,

			url("img/blue-plant_message-laptop-right.webp") right bottom no-repeat fixed,

			#fff;
	}
	
	.message-sent-container {
		width: 45%;
	}

	.message-sent-title {
		padding-bottom: 30px;
	}

	.message-sent-subtitle {
		padding-top: 40px;
	}

	.message-link {
		padding: 90px 0px 120px 0px;
	}

	.message-sent-subtitle a:link, .message-sent-subtitle a:visited {
		font-size: 3.6em;
		padding: 5px 60px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*--- 9. Projects Laptop ---*/
	/*--- 9. Projects Laptop ---*/
	/*--- 9. Projects Laptop ---*/
	
	#projects h1 {
		font-size: 3.0em;
	}

	#projects h2 {
		font-size: 6.4em;
		line-height: 1.2em
	}
	
	#projects h3 {
		font-size: 3.7em;
		margin-bottom: 10px;
	}

	#projects p, #work-navigation p {
		font-size: 1.8em;
		line-height: 1.6em;
	}
	
	.project-paragraph-intro, .project-section-paragraph {
		padding: 120px 0px;
	}
	
	.project-end-paragraph {
		padding: 120px 0px;
	}
	
	.project-end-paragraph img {
		padding: 0px 0px 40px ;
	}
	
	
	.container-text-project, .container-image-project, .container-action-project {
		width: 47%;
	}

	
	
	
	
	
	
	
	
	
	
	/*	9. Projects Links Laptop*/
	/*	9. Projects Links Laptop*/
	/*	9. Projects Links Laptop*/
	
	.container-action-project a:link, .container-action-project a:visited {
		font-size: 2.2em;
		width: 72%;
	}
























	/*--- 10. Projects Navigation Laptop ---*/
	/*--- 10. Projects Navigation Laptop ---*/
	/*--- 10. Projects Navigation Laptop ---*/

	#work-navigation h2 {
		padding: 100px 0px 40px 0px;
	}

	.project-navigation-end-text {
		padding-top: 100px;
		margin-bottom: -40px;
	}

	.project-navigation-contact h4 {
		margin-top: 20px;
		font-size: 1.6em;
	}
	
	.project-navigation-contact {
		margin-bottom: -200px;
		margin-top: 60px;
	}
	
	
	
	
	
	
	/*10.1 Project navigation links Laptop*/
	/*10.1 Project navigation links Laptop*/
	/*10.1 Project navigation links Laptop*/

	.project-navigation-menu a:link {
		width: 31%; /* Link widht */
	}


	.project-link-container-text {
		top: 79%;
	}

	.project-link-overlay-text {
		top: 78%;
	}
	
	.project-link-container-text h4 {
		font-size: 1.45em;
	}

	.project-link-container-text h5 {
		margin-top: 0px;
		font-size: 1.5em;
	}

	.project-link-overlay-text h4 {
		font-size: 1.6em;	
	}

	.project-link-overlay-text h5 {
		margin-top: 0px;
		font-size: 1.7em;
	}
	
	.project-navigation-contact a:link {
		font-size: 2.2em;
		width: 24%;
		padding: 10px 0;

	}
	
	
	
	
	
	
	
	
	/*12. service web laptop*/
	/*12. service web laptop*/
	/*12. service web laptop*/

	/*font*/
	/*font*/
	/*font*/
	
	#service-web-header h1, #web-process h1, #web-intro-packages h1, #web-packages h1, #different-budget-section h1 {
		font-size: 4.6em;
		line-height: 1.3em;
	}

	#service-web-header h2, #web-process h2, #web-intro-packages h2, #web-packages h2, #different-budget-section h2 {
		font-size: 2.9em;
		line-height: 1.2em;
	}

	#service-web-header h3, #web-process h3, #web-intro-packages h3, #web-packages h3, #different-budget-section h3 {
		font-size: 1.6em;
		margin-bottom: 40px;
	}
	
	#web-packages h3 {
		font-size: 2.0em;
		margin-bottom: 16px;
		font-weight: 600;
	}
		
	#web-process .pannel h4 {
		font-size: 1.4em;
	}
	
	#web-packages h4 {
		font-size: 1.6em;
	}
	
	#web-packages h5 {
		font-size: 2.4em;
	}
	
	#web-packages .e-commerce-details h5 {
		font-size: 2.0em;
	}
	
	#web-packages h6 {
		font-size: 1.8em;
		line-height: 1.4em;
	}


	#service-web-header p, #web-process p, #web-intro-packages p, #different-budget-section p {
		font-size: 1.7em;
	}
	
	.package-list-container p {
		font-size: 1.3em;
		line-height: 1.4em;
		margin-bottom: 10px;
	}

	
	
/*	12. service web structure*/
/*	12. service web structure*/
/*	12. service web structure*/
	
	.video-webp {
		display: none;
	}
	
	.video-mp4 {
		display: block;
	}
	
	
	
	.intro-package-plants {
		margin-top: -330px;
		height: 377px;
		background:

				url("img/blue-plant_message-laptop-left.webp") left bottom no-repeat,

				url("img/blue-plant_message-laptop-right.webp") right bottom no-repeat,

				#fff;
	}
	
	
	.web-package-card {
		width: 30.0%;
		height: 860px;
		padding: 60px 12px 0px 12px;
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.4);
	}
	
	.e-commerce-add-on-section {
		padding: 90px 0px 0px 0px;
	}
	
	
	
	
	
	
	
	/*12. service web links laptop*/
	/*12. service web links laptop*/
	/*12. service web links laptop*/

	.web-header-video a:link, .web-header-video a:valid {
		width: 90%;
		padding: 5px 0px;
		font-size: 2.9em;
		margin-top: 20px;
	}

	.e-commerce-contact a:link, .e-commerce-contact a:visited {
		width: 97%;
		padding: 5px 0px;
		font-size: 2.2em;
		margin-top: 20px;
	}


	.different-budget-link a:link, .different-budget-link a:visited {
		padding: 8px 0px;
		width: 94%;
		font-size: 2.2em;
	}
	
	
	
	
	/*12.3 web process accordion laptop*/
	/*12.3 web process accordion laptop*/
	/*12.3 web process accordion laptop*/

	.accordion {
		text-indent: 20px;
		font-size: 1.8em;
		padding: 10px 0px;
	}

	.pannel {
		padding: 10px 20px 50px 20px;
	}
	
	.accordion:after {
		margin-top: -10px;
	}
	

	.active:after {
	  content: "\2212";
	}
	
	
	
	
	
	
	
	
	
	/*	13.1.1 services*/
	/*	13.1.1 services*/
	/*	13.1.1 services*/
	
	.services-hero-text h1 {
		font-size: 5.6em;
	}
	
	.testimonials-container h2 {
		font-size: 5.6em;
	}
	
	.services-hero-text h3, .services-outro-container h3 {
		font-size: 2.0em;
	}
	
	.card-text h4 {
		font-size: 2.2em;
	}
	
	#work-flow h4 {
		font-size: 1.7em;
	}
	
	.testimonial-client h5 {
		font-size: 1.8em;
	}
	
	.services-hero-text p, .card-text p, .testimonial-client p, #work-flow p, .services-outro-container p {
		font-size: 1.6em;
	}
	
	
	
	.card-list-item p, .card-list-item-last p {
		font-size: 1.6em;
		line-height: 1.2em;
	}
	
	/*	13.1.2 services header*/
	/*	13.1.2 services header*/
	/*	13.1.2 services header*/
	
	#services-header {
		margin-top: 68px;
		background: 

				url("img/services_header-img_laptop-left.webp") left top no-repeat fixed,

				url("img/services_header-img_laptop-right.webp") right bottom no-repeat fixed,

				#ff6600;
	}
	
	
	/*13.2.1 services description*/
	/*13.2.1 services description*/
	/*13.2.1 services description*/
	
	#services-description {
		padding: 80px 0px 200px;
		background: 

		url("img/service-plant-white_laptop-left.webp") left bottom no-repeat fixed,

		url("img/service-plant-white_laptop-right.webp") right bottom no-repeat fixed,

		#003944
	}
	
	
	
	
	
	/*	13.2.2 links*/
	/*	13.2.2 links*/
	/*	13.2.2 links*/
		
	.card-link a:link {
		font-size: 1.7em;	
	}
	
	
	/*	13.3.1 testimonials*/
	/*	13.3.1 testimonials*/
	/*	13.3.1 testimonials*/
	
	.testimonials-container {
		padding: 80px 0px 100px;
	}
	
	/*	13.3.2 testimonials links*/
	/*	13.3.2 testimonials links*/
	/*	13.3.2 testimonials links*/
	
	.testimonial-button a:link {
		font-size: 3.6em;
	}
	
	
	/*	13.4 work flow*/
	/*	13.4 work flow*/
	/*	13.4 work flow*/
	
	#work-flow {
		padding: 80px 0px;
	}
	
	#work-flow p {
		margin-bottom: 40px;
	}
	
	
	
	/*	13.5.1 service outro*/
	/*	13.5.1 service outro*/
	/*	13.5.1 service outro*/
	
	#services-outro {
		padding: 80px 0px;
	}
	
	.services-outro-container {
		padding: 80px;
	}
	
	
	/*	13.5.2 service outro links*/
	/*	13.5.2 service outro links*/
	/*	13.5.2 service outro links*/	
	
	.services-outro-container a:link {
		font-size: 2.6em;
	}
	
}

































/*--- Tablet ---*/
/*--- Tablet ---*/
/*--- Between 769px and 1023 px ---*/
/*--- Between 769px and 1023 px ---*/


@media only screen and (max-width: 1023px) {
	
	/*	tablet default*/
	/*	tablet default*/
	/*	tablet default*/
	
	h1 {
		font-size: 5.8em;
		line-height: 1.3em;
	}
	
	h2 {
		font-size: 4.4em;
	}
	
	h3 {
		font-size: 2.6em;
	}
	
	h4 {
		font-size: 2.3em;
	}
	
	h6 {
		font-size: 3.4em;
		line-height: 1.2em;
	}
	
	p {
		font-size: 1.6em;
		line-height: 1.8em;
	}
	
	.header-container-container p {
		font-size: 1.8em;
		line-height: 1.2em;
	}
	
	.policy-text p, .policy-text li {
		font-size: 1.6em;
		line-height: 1.6em;
	}
	
	
	
	
	
	
	
	
	/*	tablet navigation*/
	/*	tablet navigation*/
	/*	tablet navigation*/
	
	#topButton {
		padding: 18px 14px;
	}
	
	
	
	/*--- WhatsApp Button ---*/
	/*--- WhatsApp Button ---*/
	/*--- WhatsApp Button ---*/

	#whatsapp_button {
		bottom: 16.6%;
		right: 1%;
		width: 60px;
		height: 60px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	/*	tablet header*/
	/*	tablet header*/
	/*	tablet header*/
	
	.hero-video-overlay {
		top: 23%;
	}

	.hero-video-overlay img {
		padding-top: 120px;
	}

	.hero-text-container {
		width: 78%;
	}

	.hero-text-container p {
		padding-top: 40px;
	}
	
	

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

	/*3.1 about*/
	/*3.1 about*/
	/*3.1 about*/
	
	.about-title-container {
		padding-top: 9%;
	}
	
/*
	.about-service-item {
		margin-left: 38%;
	}
	
	#about .plants {
		margin-top: -180px;
	}
	
	.plant-left, .plant-right {
		width: 30%;
	}
*/
	
	#about {
		background: 
		url("img/blue-plant_message-tablet-left.webp") left bottom no-repeat,
		
		url("img/blue-plant_message-tablet-right.webp") right bottom no-repeat,
		
		#fff;
	}
	
	.service-list-container {
		margin-top: 20px;
		padding-bottom: 60px;
	}

	.home-service-card {
		width: 22%;
		margin-bottom: 80px;
	}


	/*------- 3.2 about links -----------*/
	/*------- 3.2 about links -----------*/
	/*------- 3.2 about links -----------*/

	.home-service-card a:link, .home-service-card a:visited {
		margin-top: 6px;
		padding: 6px 0px;
		font-size: 1.6em;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	tablet out team*/
	/*	tablet out team*/
	/*	tablet out team*/
	
	#team {
		padding-top: 60px;
		padding-bottom: 100px;
	}
	
	#nataly-social {
		width: 48%;
	}
	


	#carlos-social {
		width: 83%;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	tablet work*/
	/*	tablet work*/
	/*	tablet work*/

	.work-portfolio-container {
		margin-bottom: 40px;
	}
	
	.work-portfolio a:link, .work-portfolio a:visited {
		width: 47%;
	}
	
	.work-container-text {
		font-size: 1.8em;
	}

	.work-container-overlay-text {
		font-size: 2.0em;
	}
	
	#work .plants {
		margin-top: -100px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	tablet form*/
	/*	tablet form*/
	/*	tablet form*/
	
	.form-container {
		width: 68%;
	}
	
	
	input[type=text], input[type=email], input[type=subject] {
		font-size: 1.6em;
	}

	textarea {
		font-size: 1.6em;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	tablet footer*/
	/*	tablet footer*/
	/*	tablet footer*/
	
	.footer-info-text {
		width: 36%;
	}
	
	.footer-info-background {
		width: 61%;
	}
	
	.footer-info-background img {
		width: 100%;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	tablet policy*/
	/*	tablet policy*/
	/*	tablet policy*/
	
	
	
	
	.policy-navigation {
		margin-top: 20px;
		height: 670px;
	}
	
	.policy-navigation a:link, .policy-navigation a:visited {
		font-size: 1.4em;
		height: 22px;
	}
	
	.policy-title {
		margin-top: 80px;
	}
	
	.policy-text {
		margin-bottom: 30px;
	}
		
	.policy-text li {
		margin-left: 0%;
	}
		
	#privacy-policy .plants {
		margin-top: -190px;
	}
	
	
	
	
	
	
	
	
	
	
	
	/*--- 9. Projects tablet ---*/
	/*--- 9. Projects tablet ---*/
	/*--- 9. Projects tablet ---*/
	
	#projects h1 {
		font-size: 2.6em;
	}

	#projects h2 {
		font-size: 4.4em;
	}
	
	#projects h3 {
		font-size: 2.8em;
	}
	
	.project-navigation-contact h4 {
		font-size: 1.4em;
	}
	
	#projects p, #work-navigation p {
		font-size: 1.34em;
		line-height: 1.5em;
	}
	
	.project-tablet-still {
		display: block;
	}
	
	.project-intro-video, .project-section-video {
		display: none;
	}
	
	#projects {
		padding-top: 240px;
	}

	
	#tablet-still-intro {
		padding-top: 40px;
	}
	
	.project-paragraph-intro, .project-section-paragraph {
		margin: -2px;
		padding: 65px 0px;
	}
	
	.project-end-paragraph {
		padding: 65px 0px 80px;
	}

	.project-end-paragraph img {
		width: 50%;
		padding: 0px 0px 20px;
	}
	
	
	
	
	
	
	/*	9.2 Projects Links Tablet*/
	/*	9.2 Projects Links Tablet*/
	/*	9.2 Projects Links Tablet*/
	
	.container-action-project a:link, .container-action-project a:visited {
		font-size: 2.0em;
		width: 80%;
	}

























	/*--- 10. Projects Navigation tablet ---*/
	/*--- 10. Projects Navigation tablet ---*/
	/*--- 10. Projects Navigation tablet ---*/

	#work-navigation h2 {
		padding: 80px 0px 30px 0px;
	}

	.project-navigation-end-text {
		padding-top: 60px;
		margin-bottom: -40px;
	}
	
	.project-navigation-contact {
		margin-bottom: -170px;
		margin-top: 40px;
	}
	
	
	

	/*10.1 Project navigation links tablet*/
	/*10.1 Project navigation links tablet*/
	/*10.1 Project navigation links tablet*/

	.project-navigation-menu a:link {
		width: 31%; /* Link widht */
	}
	
	.project-link-container-text h4 {
		font-size: 1.1em;
	}

	.project-link-container-text h5 {
		margin-top: 0px;
		font-size: 1.0em;
	}

	.project-link-overlay-text h4 {
		font-size: 1.2em;	
	}

	.project-link-overlay-text h5 {
		margin-top: 0px;
		font-size: 1.1em;
	}
	
	.project-navigation-contact a:link {
		width: 30%;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	tablet message sent*/
	/*	tablet message sent*/
	/*	tablet message sent*/
	
	#message-sent{
		background: 

			url("img/blue-plant_message-tablet-left.webp") left bottom no-repeat,

			url("img/blue-plant_message-tablet-right.webp") right bottom no-repeat,

			#fff;
	}
	
	.message-sent-container {
		width: 60%;
	}

	.message-sent-title {
		padding-bottom: 24px;
	}

	.message-sent-subtitle {
		padding-top: 34px;
	}

	.message-link {
		padding: 70px 0px 120px 0px;
	}

	.message-sent-subtitle a:link, .message-sent-subtitle a:visited {
		font-size: 2.8em;
		padding: 5px 48px;
	}
	
	
	
	
	
	
	
	
	
	
	/*12. service web tablet*/
	/*12. service web tablet*/
	/*12. service web tablet*/

	/*font*/
	/*font*/
	/*font*/
	
	#service-web-header h1, #web-process h1, #web-intro-packages h1, #web-packages h1, #different-budget-section h1 {
		font-size: 3.6em;
	}

	#service-web-header h2, #web-process h2, #web-intro-packages h2, #web-packages h2, #different-budget-section h2 {
		font-size: 3.6em;
	}

	#service-web-header h3, #web-process h3, #web-intro-packages h3, #web-packages h3, #different-budget-section h3 {
		font-size: 2.2em;
	}
	
	#web-packages h3 {
		margin-bottom: 30px;
	}
		
	#web-process .pannel h4 {
		font-size: 1.7em;
	}
	
	#web-packages .e-commerce-details h5 {
		font-size: 2.0em;
	}


	#service-web-header p, #web-process p, #web-intro-packages p, #different-budget-section p {
		font-size: 1.7em;
	}

	.package-list-container p {
/*
		font-size: 1.3em;
		line-height: 1.3em;
		margin-bottom: 10px;
*/
	}

	
	
	
	/*structure*/
	/*structure*/
	/*structure*/

	#service-web-header {
		margin: 180px 0px 0px;
		background-image:url("img/blue-plant_message-tablet-right.webp");
	}

	.web-header-text, .web-header-video, .web-process-description, .web-process-details, .e-commerce-details, .e-commerce-contact, .different-budget-text, .different-budget-link {
		width: 100%;
	}
	
	.web-header-container {
		flex-direction: column;
	}

	.web-header-text {
		margin-bottom: 50px;
	}

	.web-header-video {
		margin-bottom: 60px;
	}
	
	







	#web-process {
		padding: 100px 0px 70px;
	}

	.web-process-container {
		flex-direction: column;
	}

	.web-process-description {
		margin-bottom: 50px;
	}

	.accordion-button {
		padding-bottom: 30px;
	}








	.intro-packages-container {
		width: 100%;
		flex-direction: column;
	}
	
	.intro-packages-container img {
		width: 72%;
		margin: 0 auto;
	}

	.intro-package-plants {
		margin-top: -190px;
		height: 231px;
		background:

				url("img/blue-plant_message-tablet-left.webp") left bottom no-repeat,

				url("img/blue-plant_message-tablet-right.webp") right bottom no-repeat,

				#fff;
	}








	#web-packages {
		padding: 80px 0px 0px 0px;
	}

	.web-packages-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.web-package-card {
		width: 46.5%;
		height: 780px;
		padding: 60px 10px 0px 10px;
		margin-bottom: 16px;
	}

	#web-package-1 {
		background-color: #ff6600;
	}

	#web-package-2 {
		background-color: #003944;
	}

	#web-package-3 {
		background-color: #016B80;
	}

	.card-title {
		margin-bottom: 20px;
	}

	.card-price, .card-section {
		margin-bottom: 60px;
	}










	.e-commerce-add-on-section {
		display: flex;
		flex-direction: column;
		padding: 86px 0px;
	}

	.e-commerce-details {
		margin: auto 0;
	}

	.e-commerce-contact  {
		margin-top: 50px;
	}

	.e-commerce-contact img {
		width: 30%;
	}









	#different-budget-section {
		background-color: #003944;
	}

	.different-budget-container {
		display: flex;
		flex-direction: column;
		padding: 70px 0px 100px;;
	}

	.different-budget-link {
		display: flex;
		justify-content: center;
		flex-direction: row;
		margin: auto 0;
	}







	/*12. service web links tablet*/
	/*12. service web links tablet*/
	/*12. service web links tablet*/

	.web-header-video a:link, .web-header-video a:valid {
		width: 70%;
		padding: 5px 0px;
		font-size: 3.0em;
		margin-top: 50px;
	}

	.e-commerce-contact a:link, .e-commerce-contact a:visited {
		width: 97%;
		padding: 5px 0px;
		font-size: 3.6em;
		margin-top: 20px;
	}


	.different-budget-link a:link, .different-budget-link a:visited {
		padding: 8px 0px;
		font-size: 3.1em;
	}






	/*12.3 web process accordion tablet*/
	/*12.3 web process accordion tablet*/
	/*12.3 web process accordion tablet*/

	.accordion {
		text-indent: 20px;
		font-size: 2.0em;
		padding: 17px 0px;
	}

	.pannel {
		padding: 10px 20px 50px 20px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	13.1.1 services*/
	/*	13.1.1 services*/
	/*	13.1.1 services*/
	
	.services-hero-text h1 {
		font-size: 3.6em;
	}
	
	.testimonials-container h2 {
		font-size: 3.6em;
	}
	
	.services-hero-text h3, .services-outro-container h3 {
		font-size: 2.2em;
		font-weight: 500;
	}
	
	.services-outro-container h3 {
		font-size: 2.7em;
		font-weight: 600;
	}
	
	.card-text h4 {
		font-size: 3.0em;
	}
	
	#work-flow h4 {
		font-size: 1.7em;
	}
	
	.testimonial-client h5 {
		font-size: 1.8em;
	}
	
	.services-hero-text p, .card-text p, .testimonial-client p, #work-flow p, .services-outro-container p {
		font-size: 1.6em;
	}
	
	
	
	.card-list-item p, .card-list-item-last p {
		font-size: 1.8em;
		line-height: 1.2em;
	}
	
	/*	13.1.2 services header*/
	/*	13.1.2 services header*/
	/*	13.1.2 services header*/
	
	#services-header {
		margin-top: 64px;
		background: 

				url("img/services_header-img_tablet-left.webp") left top no-repeat,

				url("img/services_header-img_tablet-right.webp") right bottom no-repeat,

				#ff6600;
	}
	
	.services-hero-container {
		flex-direction: column-reverse;
		align-items: center;
	}
	
	.services-hero-text, .services-hero-video {
		width: 68%;
	}
	
	.services-hero-text {
		margin-top: 40px;
	}
	
	/*13.2.1 services description*/
	/*13.2.1 services description*/
	/*13.2.1 services description*/
	
	#services-description {
		padding: 80px 0px 120px;
		background: 

		url("img/service-plant-white_tablet-left.webp") left bottom no-repeat,

		url("img/service-plant-white_tablet-right.webp") right bottom no-repeat,

		#003944
	}
	
	.services-card-a, .services-card-b {
		flex-direction: column;
		margin: 0 auto;
		width: 80%;
		padding: 40px 40px;
		margin-bottom: 40px;
	}
	
	.card-text, .card-list {
		width: 100%;
	}
	
	.card-link {
		margin-top: 20px;
		margin-bottom: 0px;
	}
	
	.card-list {
		margin-top: 20px;
	}
	
	
	/*	13.2.2 links*/
	/*	13.2.2 links*/
	/*	13.2.2 links*/
		
	.card-link a:link {
		font-size: 2.4em;
	}
	
	
	
	/*	13.3.1 testimonials*/
	/*	13.3.1 testimonials*/
	/*	13.3.1 testimonials*/
	
	.testimonials-container {
		padding: 80px 0px 100px;
	}
	
	.testimonials-text {
		margin-top: 40px;
		flex-direction: column;
	}

	.testimonial-client {
		width: 100%;
		margin-bottom: 80px;
	}
	
	.testimonial-client img {
		margin-bottom: 6px;
	}
	
	.testimonial-client p {
		margin-bottom: 6px;
	}
	
	.testimonal-call-to-action {
		padding-top: 10px;
		flex-direction: column-reverse;
	}
	
	.testimonial-button {
		width: 100%;
		margin-top: 30px;
	}
	
	.testimonial-button p {
		margin-bottom: 16px;
	}
	
	/*	13.3.2 testimonials links*/
	/*	13.3.2 testimonials links*/
	/*	13.3.2 testimonials links*/
	
	.testimonial-button a:link {
		font-size: 3.6em;
	}
	
	
	/*	13.4 work flow*/
	/*	13.4 work flow*/
	/*	13.4 work flow*/
	
	#work-flow {
		padding: 80px 0px;
	}
	
	#work-flow p {
		margin-bottom: 40px;
	}
	
	
	
	/*	13.5.1 service outro*/
	/*	13.5.1 service outro*/
	/*	13.5.1 service outro*/
	
	#services-outro {
		padding: 90px 0px;
	}
	
	.services-outro-container {
		padding: 80px;
		width: 70%;
	}
	
	.services-outro-container p {
		margin-bottom: 40px;
	}
	
	/*	13.5.2 service outro links*/
	/*	13.5.2 service outro links*/
	/*	13.5.2 service outro links*/	
	
	.services-outro-container a:link {
		font-size: 2.6em;
	}
	
	
	
	
}









































/*--- Mobile ---*/
/*--- Mobile ---*/
/*Between 362px and 767px*/
/*Between 362px and 767px*/


@media only screen and (max-width: 767px) {
	
	/*	mobile default*/
	/*	mobile default*/
	/*	mobile default*/
	
	.wrapper {
    	width: 90%;
    	margin: 0 auto; 
	}
	
	
	h1 {
		font-size: 2.6em;
		line-height: 1.4em;
	}
	
	h2 {
		font-size: 2.6em;
	}
	
	h3 {
		line-height: 1.4em;
	}
	
	.project-intro h3 {
		font-size: 1.8em;
	}
	
	h4 {
		font-size: 1.9em;
	}
	
	h5 {
		font-size: 1.0em;
	}
	
	h6 {
		font-size: 2.2em;
		line-height: 1.1em;
	}
	
	p {
		font-size: 1.2em;
		line-height: 1.8em;
	}
	
	.header-container-container p {
		font-size: 1.4em;
		line-height: 1.4em;
	}
	
	.policy-text p, .policy-text li {
		font-size: 1.2em;
		line-height: 1.4em;
	}

	.grecaptcha-badge {
	/*	visibility: hidden;*/
		margin-bottom: 80px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	mobile navigation*/
	/*	mobile navigation*/
	/*	mobile navigation*/
	
	.nav-icon a:link {
		width: 33px;
		height: 33px;
		padding: 16.5px 20px 16.5px 20px;
	}
	
	.nav-icon a:hover {
		background-color: #FF6600;
	}
	
	ul {
		flex-direction: column;
		width: 260px;
	}
	
	ul a:link, ul a:visited {
		display: block;
	}
	
	ul ul {
		width: inherit;
	}
	
	li a:link, li a:visited {
		padding: 18px 0px 4px 20px;
		background-color: #002A32;
		display: flex;
		flex-direction: row;
	}
	
	li a:hover, li a:focus, li a:active {
		background-color: #FF6600;
	}
	
	
	ul ul a:link, ul ul a:visited {
		background-color: #B94B01;
		display: block;
		padding: 14px 60px 6px 40px;
		border-bottom: 1px solid #FF6600;
	}
	
	ul ul a:hover, ul ul a:focus, ul ul a:active {
		background-color: #FF6600;
	}
	
	
	
	.nav-social {
		align-self: flex-start;
	}
	
	.nav-social a:link, .nav-social a:visited {
		padding: 21px 10px 23px 10px;
	}
	
	.nav-social a:hover, .nav-social a:focus, .nav-social a:active {
		background-color: #FF6600;
	}
	
	
	
	/*mobile nav text*/
	/*mobile nav text*/
	/*mobile nav text*/
	
	li a:link, li a:visited {
		font-size: 20px;
	}


	li li a:link, li li a:visited {
		font-size: 16px;
	}
	
	
	
	
	/*mobile dropdown*/
	/*mobile dropdown*/
	/*mobile dropdown*/
	
	.hamburger {
		font-family: Poppins, helveica, helvetica nue, arial, san-serif;
		font-size: 18px;
		font-weight: 600;
		color: #fff;
		display: flex;
		padding: 0 0 0 20px;
		position: relative;
	}
	
	li:hover .dropdown  {
		display: block;
	}
	
	.dropdown {
		display: none;
	}
	
	ul {
		position:absolute;
		left: -200%;
	}
	
	ul.active {
		position: relative;
		left: 0%;
	}

	
	
	
	
	/*	lines animation*/
	/*	lines animation*/
	/*	lines animation*/

	.lines-container {
		display: inline-block;
		cursor: pointer;
		margin-right: 8px;
	}
	
	#bar1, #bar2, #bar3 {
		width: 30px;
		height: 3.5px;
		background-color: #fff;
		margin: 6px 0;
		transition: 0.3s;
	}
	
	.change #bar1 {
		transform: translate(0, 11px) rotate(-45deg);
	}
	
	.change #bar2 {
		opacity: 0;
	}
	
	.change #bar3 {
		transform: translate(0, -8px) rotate(45deg);
	}
	
	
	
	
	
	
	
	
	/*	go to top*/
	/*	go to top*/
	/*	go to top*/
	
	#topButton {
		padding: 13px 6px;
		bottom: 36%;
		right: 1.7%;
	}
	
	#topButton img {
		width: 70%;
		height: 100%;
	}
	
	
	
	
	
	/*--- WhatsApp Button ---*/
	/*--- WhatsApp Button ---*/
	/*--- WhatsApp Button ---*/

	#whatsapp_button {
		bottom: 25.8%;
		right: 2%;
		width: 54px;
		height: 54px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	/*	mobile header*/
	/*	mobile header*/
	/*	mobile header*/
	
	.hero-video-overlay {
		top: 36%;
	}

	.hero-video-overlay img {
		padding-top: 20px;
	}

	.hero-text-container {
		width: 80%;
	}

	.hero-text-container p {
		padding-top: 20px;
	}
	

	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	mobile about*/
	/*	mobile about*/
	/*	mobile about*/
	
	#about {
		padding-top: 20px;
	}
	
	.about-title-container {
		padding-top: 100px;
	}
	
	.about-title-container {
		padding-top: 40px;
	}

	
	#about {
		background: 
		url("img/blue-plant_message-mobile-left.webp") left bottom no-repeat,
		
		url("img/blue-plant_message-mobile-right.webp") right bottom no-repeat,
		
		#fff;
	}
	
	.service-list-container {
		margin-top: 20px;
		padding-bottom: 40px;
	}

	.home-service-card {
		width: 46%;
		margin-bottom: 40px;
	}


	/*------- 3.2 about links -----------*/
	/*------- 3.2 about links -----------*/
	/*------- 3.2 about links -----------*/

	.home-service-card a:link, .home-service-card a:visited {
		margin-top: 6px;
		padding: 2px 0px;
		font-size: 1.3em;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	mobile team*/
	/*	mobile team*/
	/*	mobile team*/
	
	
#team {
	padding-bottom: 30px;
	}
	
	.team-members {
		flex-direction: column;
	}
	
	.team-container h3, .team-container h4 {
		margin-bottom: 10px;
	}
	
	.person-social {
		padding-top: 12px;
	}
	
	.team-person {
		width: 100%;
		margin-bottom: 100px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	mobile work*/
	/*	mobile work*/
	/*	mobile work*/
	
	.work-portfolio-container {
		margin-bottom: 40px;
	}
	
	.work-portfolio a:link, .work-portfolio a:visited {
		width: 100%;
	}
	
	.work-container-text {
		top: 84%;
		font-size: 2.1em;
	}

	.work-container-overlay-text {
		top: 84%;
		font-size: 2.3em;
	}

	#work .plants {
		margin-top: -70px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	mobile form*/
	/*	mobile form*/
	/*	mobile form*/
	
	.form-container {
		width: 100%;
		padding: 80px 0px 90px;;
	}
	
	form {
		margin-top: 30px;
		display: flex;
		align-items: center;
	}
	
	input[type=text], input[type=email], input[type=subject] {
		width: 80%;
		margin-bottom: 30px;
	}

	textarea {
		width: 80%;
	}
	
	#form-button {
		font-size: 2.8em;
		margin: 40px 0px 16px 0px;
		padding: 5px 50px;
	}
	
	/*	Old submit button*/
	/*	Old submit button*/
	/*	Old submit button*/
	
/*
	input[type=submit] {
		font-size: 2.8em;
		margin: 40px 0px 16px 0px;
		padding: 5px 50px;
	}
*/
	
	
	
	
	
	
	
	
	
	
	
	/*	mobile footer*/
	/*	mobile footer*/
	/*	mobile footer*/
	
	.footer-container {
/*		padding: 16px 0px 100px 0px;*/
	}
	
	.footer-logo {
		margin-right: 10px;
	}
	
	.footer-info-text {
		width: 36%;
	}
	
	.footer-info-background {
		width: 62%;
	}
	
	.footer-info-background img {
		width: 92%;
	}
	
	
	
	
	
	

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	mobile policy*/
	/*	mobile policy*/
	/*	mobile policy*/
	
	.policy-navigation {
		margin-top: 20px;
		height: 900px;
	}
	
	.policy-navigation a:link, .policy-navigation a:visited {
		display: flex;
		align-items: center;
		font-size: 1.2em;
		height: 42px;
		width: 90%;
		text-indent: 0px;
		border-radius: 300px;
		padding: 4px 16px;
	}
	
	.policy-title {
		margin-top: 64px;
	}
	
	.policy-text {
		margin-bottom: 24px;
	}
	
	#privacy-policy .plants {
		margin-top: -120px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	/*--- 9. Projects mobile ---*/
	/*--- 9. Projects mobile ---*/
	/*--- 9. Projects mobile ---*/
	
	#projects h1 {
		font-size: 2.0em;
	}

	#projects h2 {
		font-size: 3.4em;
	}
	
	#projects h3 {
		font-size: 2.8em;
		margin-bottom: 20px;
	}
	
	.project-tablet-still {
		display: none;
	}
	
	.project-intro-video, .project-section-video {
		display: block;
	}
	
	#projects {
		padding-top: 200px;
	}

	#projects h2 {
		font-size: 2.8em;
		line-height: 1.2em
	}

	#projects p, #work-navigation p {
		font-size: 1.6em;
	}

	.project-intro-video {
		padding-top: 20px;
	}
	
	.project-paragraph-intro, .project-section-paragraph {
		padding: 60px 0px;
	}
	
	.project-text-container-a, .project-text-container-b, .end-paragraph-content {
		flex-direction: column;
	}
	
	.container-text-project {
		margin-bottom: 16px;
	}
	
	.container-text-project, .container-image-project, .container-action-project {
		width: 100%;
	}
	
	.container-image-project {
		display: flex;
		justify-content: center;
	}
	
	.container-image-project img {
		width: 60%;
	}
	
	.project-end-paragraph {
		padding: 60px 0px 120px;
	}

	.project-end-paragraph img {
		width: 40%;
		padding-top: 60px;
	}


	























	/*--- 10. Projects Navigation mobile ---*/
	/*--- 10. Projects Navigation mobile ---*/
	/*--- 10. Projects Navigation mobile ---*/

	#work-navigation h2 {
		padding: 60px 0px 20px 0px;
	}

	.project-navigation-end-text {
		padding-top: 20px;
		margin-bottom: 0px;
	}
	
	.project-navigation-contact {
		margin-bottom: 60px;
		margin-top: 40px;
	}
	
	
	
	

	/*10.1 Project navigation links mobile*/
	/*10.1 Project navigation links mobile*/
	/*10.1 Project navigation links mobile*/

	.project-navigation-menu a:link {
		width: 100%; /* Link widht */
		margin-bottom: 30px;
	}


	.project-link-container-text {
		top: 79%;
	}

	.project-link-overlay-text {
		top: 78%;
	}
	
	.project-link-container-text h4 {
		font-size: 1.6em;
	}

	.project-link-container-text h5 {
		margin-top: 2px;
		font-size: 1.3em;
	}

	.project-link-overlay-text h4 {
		font-size: 1.8em;	
	}

	.project-link-overlay-text h5 {
		margin-top: 0px;
		font-size: 1.5em;
	}
	
	.project-navigation-contact a:link {
		width: 80%;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*	mobile message sent*/
	/*	mobile message sent*/
	/*	mobile message sent*/
	
	#message-sent{
		background: 

			url("img/blue-plant_message-mobile-left.webp") left bottom no-repeat fixed,

			url("img/blue-plant_message-mobile-right.webp") right bottom no-repeat fixed,

			#fff;
	}
	
	.message-sent-container {
		width: 56%;
	}

	.message-sent-title {
		padding-bottom: 20px;
	}

	.message-sent-subtitle {
		padding-top: 20px;
	}

	.message-link {
		padding: 20px 0px 120px 0px;
	}

	.message-sent-subtitle a:link, .message-sent-subtitle a:visited {
		font-size: 2.0em;
		padding: 5px 26px;
	}
	
	
	
	
	
	
	
	
	/*12. service web mobile*/
	/*12. service web mobile*/
	/*12. service web mobile*/

	/*font*/
	/*font*/
	/*font*/
	
	#service-web-header h1, #web-process h1, #web-intro-packages h1, #web-packages h1, #different-budget-section h1 {
		font-size: 2.9em;
		line-height: 1.2em;
	}

	#service-web-header h2, #web-process h2, #web-intro-packages h2, #web-packages h2, #different-budget-section h2 {
		font-size: 2.9em;
		line-height: 1.2em;
	}

	#service-web-header h3, #web-process h3, #web-intro-packages h3, #web-packages h3, #different-budget-section h3 {
		font-size: 1.6em;
		margin-bottom: 40px;
	}
	
	#web-packages h3 {
		font-size: 2.0em;
		margin-bottom: 16px;
		font-weight: 600;
	}
		
	#web-process .pannel h4 {
		font-size: 1.4em;
	}
	
	#web-packages h4 {
		font-size: 1.6em;
	}
	
	#web-packages h5 {
		font-size: 2.4em;
	}
	
	#web-packages .e-commerce-details h5 {
		font-size: 2.0em;
	}
	
	#web-packages h6 {
		font-size: 1.8em;
		line-height: 1.4em;
	}


	#service-web-header p, #web-process p, #web-intro-packages p, #different-budget-section p {
		font-size: 1.2em;
	}
	
	.package-list-container p {
		font-size: 1.4em;
	}

	
	
	
	/*structure*/
	/*structure*/
	/*structure*/

	#service-web-header {
		margin: 120px 0px 0px;
		background-image:url("img/blue-plant_message-mobile-right.webp");
	}

	.web-header-text, .web-header-video, .web-process-description, .web-process-details, .e-commerce-details, .e-commerce-contact, .different-budget-text, .different-budget-link {
		width: 100%;
	}
	
	.web-header-container {
		flex-direction: column;
	}

	.web-header-text {
		margin-bottom: 40px;
	}

	.web-header-video {
		margin-bottom: 90px;
	}
	
	.video-webp {
		display: block;
	}
	
	.video-mp4 {
		display: none;
	}







	#web-process {
		padding: 100px 0px 70px;
	}

	.web-process-container {
		flex-direction: column;
	}

	.web-process-description {
		margin-bottom: 50px;
	}

	.accordion-button {
		padding-bottom: 30px;
	}








	.intro-packages-container {
		width: 100%;
		flex-direction: column;
	}
	
	.intro-packages-container img {
		width: 72%;
		margin: 0 auto;
	}

	.intro-package-plants {
		margin-top: -60px;
		height: 126px;
		background:

				url("img/blue-plant_message-mobile-left.webp") left bottom no-repeat,

				url("img/blue-plant_message-mobile-right.webp") right bottom no-repeat,

				#fff;
	}








	#web-packages {
		padding: 80px 0px 0px 0px;
	}

	.web-packages-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.web-package-card {
		width: 100%;
		height: 760px;
		padding: 60px 10px 0px 10px;
		margin-bottom: 50px;
	}

	#web-package-1 {
		background-color: #ff6600;
	}

	#web-package-2 {
		background-color: #003944;
	}

	#web-package-3 {
		background-color: #016B80;
	}

	.card-title {
		margin-bottom: 20px;
	}

	.card-price, .card-section {
		margin-bottom: 60px;
	}










	.e-commerce-add-on-section {
		display: flex;
		flex-direction: column-reverse;
		padding: 20px 0px 70px;
	}

	.e-commerce-details {
		margin: auto 0;
	}

	.e-commerce-contact  {
		margin-top: 0px;
		margin-bottom: 50px;
	}

	.e-commerce-contact img {
		width: 30%;
	}









	#different-budget-section {
		background-color: #003944;
	}

	.different-budget-container {
		display: flex;
		flex-direction: column;
		padding: 70px 0px 220px;;
	}

	.different-budget-link {
		display: flex;
		justify-content: center;
		flex-direction: row;
		margin: auto 0;
	}







	/*12. service web links mobile*/
	/*12. service web links mobile*/
	/*12. service web links mobile*/

	.web-header-video a:link, .web-header-video a:valid {
		width: 90%;
		padding: 5px 0px;
		font-size: 2.2em;
		margin-top: 20px;
	}

	.e-commerce-contact a:link, .e-commerce-contact a:visited {
		width: 97%;
		padding: 5px 0px;
		font-size: 2.2em;
		margin-top: 20px;
	}


	.different-budget-link a:link, .different-budget-link a:visited {
		padding: 8px 0px;
		width: 94%;
		font-size: 2.2em;
	}






	/*12.3 web process accordion mobile*/
	/*12.3 web process accordion mobile*/
	/*12.3 web process accordion mobile*/

	.accordion {
		text-indent: 20px;
		font-size: 1.34em;
		padding: 8px 0px;
	}

	.pannel {
		padding: 10px 20px 50px 20px;
	}
	

	.accordion:after {
		content: '\0002B'; /* Unicode character for "plus" sign (+) */
		font-size: 1.8em;
		color: #fff;
		align-self: flex-end;
		float: right;
		margin-top: -10px;
	}
	
	.active:after {
	  content: "\2212"; /* Unicode character for "minus" sign (-) */
	}


	
	
	
	
	
	
	
	
	
	/*	13.1.1 services*/
	/*	13.1.1 services*/
	/*	13.1.1 services*/
	
	.services-hero-text h1 {
		font-size: 3.8em;
	}
	
	.testimonials-container h2 {
		font-size: 3.8em;
		line-height: 1.2em;
	}
	
	.services-hero-text h3, .services-outro-container h3 {
		font-size: 2.0em;
		font-weight: 500;
	}
	
	.services-outro-container h3 {
		font-size: 2.7em;
		font-weight: 600;
	}
	
	.card-text h4 {
		font-size: 2.4em;
		line-height: 1.3em;
	}
	
	#work-flow h4 {
		font-size: 1.7em;
	}
	
	.testimonial-client h5 {
		line-height: 1.2em;
	}
	
	.services-hero-text p, .card-text p, .testimonial-client p, #work-flow p, .services-outro-container p {
		font-size: 1.2em;
		line-height: 1.6em;
	}
	
	
	
	.card-list-item p, .card-list-item-last p {
		font-size: 1.4em;
		line-height: 1.3em;
	}
	
	/*	13.1.2 services header*/
	/*	13.1.2 services header*/
	/*	13.1.2 services header*/
	
	#services-header {
		margin-top: 66px;
		background: 

				url("img/services_header-img_mobile-left.webp") left top no-repeat fixed,

				url("img/services_header-img_mobile-right.webp") right bottom no-repeat fixed,

				#ff6600;
	}
	
	.services-hero-container {
		flex-direction: column-reverse;
		align-items: center;
	}
	
	.services-hero-text, .services-hero-video {
		width: 80%;
	}
	
	.services-hero-text {
		margin-top: 40px;
	}
	
	/*13.2.1 services description*/
	/*13.2.1 services description*/
	/*13.2.1 services description*/
	
	#services-description {
		padding: 80px 0px 120px;
		background: 

		url("img/service-plant-white_mobile-left.webp") left bottom no-repeat fixed,

		url("img/service-plant-white_mobile-right.webp") right bottom no-repeat fixed,

		#003944
	}
	
	.services-card-a, .services-card-b {
		flex-direction: column;
		margin: 0 auto;
		width: 86%;
		padding: 30px 16px;
		margin-bottom: 40px;
		border-radius: 20px;
	}
	
	.card-text, .card-list {
		width: 100%;
	}
	
	.card-link {
		margin-top: 20px;
		margin-bottom: 0px;
	}
	
	.card-list {
		margin-top: 20px;
	}
	
	.card-list-item img, .card-list-item-last img {
	width: 18%;
}
	
	
	/*	13.2.2 links*/
	/*	13.2.2 links*/
	/*	13.2.2 links*/
		
	.card-link a:link {
		font-size: 1.5em;
	}
	
	
	
	/*	13.3.1 testimonials*/
	/*	13.3.1 testimonials*/
	/*	13.3.1 testimonials*/
	
	.testimonials-container {
		padding: 60px 0px 80px;
	}
	
	.testimonials-text {
		margin-top: 40px;
		flex-direction: column;
	}

	.testimonial-client {
		width: 100%;
		margin-bottom: 60px;
	}
	
	.testimonial-client img {
		margin-bottom: 6px;
	}
	
	.testimonial-client p {
		margin-bottom: 6px;
	}
	
	.testimonal-call-to-action {
		padding-top: 10px;
		flex-direction: column-reverse;
	}
	
	.testimonial-button {
		width: 100%;
		margin-top: 30px;
	}
	
	.testimonial-button p {
		margin-bottom: 16px;
	}
	
	/*	13.3.2 testimonials links*/
	/*	13.3.2 testimonials links*/
	/*	13.3.2 testimonials links*/
	
	.testimonial-button a:link {
		font-size: 2.4em;
	}
	
	
	/*	13.4 work flow*/
	/*	13.4 work flow*/
	/*	13.4 work flow*/
	
	#work-flow {
		padding: 60px 0px;
	}
	
	#work-flow p {
		margin-bottom: 40px;
	}
	
	
	
	/*	13.5.1 service outro*/
	/*	13.5.1 service outro*/
	/*	13.5.1 service outro*/
	
	#services-outro {
		padding: 60px 0px;
	}
	
	.services-outro-container {
		padding: 36px;
		width: 76%;
		border-radius: 20px;
	}
	
	.services-outro-container p {
		margin-bottom: 40px;
	}
	
	/*	13.5.2 service outro links*/
	/*	13.5.2 service outro links*/
	/*	13.5.2 service outro links*/	
	
	.services-outro-container a:link {
		font-size: 1.8em;
	}
	
}