* {margin: 0;padding: 0;box-sizing: border-box;}

body {font-family: 'Open Sans', sans-serif;background-color: #fdfdfb;color: #333;line-height: 1.6;}

header {display: flex;align-items: center;justify-content: space-between;padding: 0rem 2rem;background-color: #fefefe;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);position:relative; z-index:9}

.logo-container {display: flex;align-items: center;}
.logo {height: 50px;margin-right: 0.75rem;}
.brand-name {font-family: 'Montserrat', sans-serif;font-size: 3rem;font-weight: 800;color: #213e2c;}

nav ul {list-style: none;display: flex;gap: 1.5rem;}
nav a {text-decoration: none;color: #444;font-weight: 500;transition: color 0.3s;}
nav a:hover {color: #2d5a3d;}


section {width: 100%;padding: 4rem 0;margin: 0;box-sizing: border-box;border: none;}
section > div {margin: 0 auto;max-width:1200px;width:100%}

.hero {text-align: center;background-image:url('../images/banner-bg.jpg');background-size:106%;padding:9rem 0;background-position:-60px 0;width: 100%;background-attachment:fixed}

.hero h1 {font-family: 'Montserrat', sans-serif;font-size: 3rem;color: #f39210;margin-bottom: 1rem;text-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
line-height: normal;}

.hero p {font-size: 1.125rem;color: #555;margin-bottom: 2rem;}

h2 {font-family: 'Montserrat', sans-serif;font-size: 2rem;margin-bottom: 1rem;color: #2d5a3d;}

.product-list {display: flex;flex-wrap: wrap;gap: 2rem;}
.product-item {flex: 1 1 250px;background: #fff;padding: 1.5rem;box-shadow: 0 0 10px rgba(0,0,0,0.05);border-radius: 8px;}
.product-item h3 {color: #2d5a3d;font-weight: 600;margin-bottom: 0.5rem;}
.faq-item {margin-bottom: 1.5rem;}

footer {text-align: center;padding: 1rem;background-color: #2d5a3d;color: #fff;}

.gradient-a { background: linear-gradient(to bottom, #f6fefd, #d1f7f7); }
.gradient-b { background: linear-gradient(to bottom, #d1f7f7, #f6fefd); }
  
.process-flow {display: flex;justify-content: space-between;margin-top:3em}
.step {text-align: center;font-weight: bold;z-index:9;color: #2d5a3d;position:relative}
.step img {width:66%;display: block;margin: 0 auto; transition: transform 2s ease-in-out;filter:drop-shadow(2px 4px 0px rgba(0,0,0,0.2))}
.step img:hover{  transform: rotate(360deg);}
.step h3 {margin: 0 auto;width: 100%;font-size: 15px;max-width: 140px;line-height:normal}
.step:nth-child(2n) {margin-top:70px;}
.step:after {
    content: "";
    background: #91CBE8;
    background: #ffa022;
    height: 54%;
    position: absolute;
    bottom: 74px;
    right: -10px;
    transform: rotate(-58deg);
    width: 10px;
    z-index: -1;
}

.step:nth-child(2n):after { transform: rotate(58deg);height: 70%;}

.step:last-child:after{display:none;}

.step:nth-child(2) img{filter:contrast(1.5) drop-shadow(2px 4px 0px rgba(0,0,0,0.2))} 
.step:nth-child(3) img{filter:contrast(2) drop-shadow(2px 4px 0px rgba(0,0,0,0.2))} 
.step:nth-child(4) img{filter:contrast(2.5) drop-shadow(2px 4px 0px rgba(0,0,0,0.2))} 
.step:nth-child(5) img{filter:contrast(3) drop-shadow(2px 4px 0px rgba(0,0,0,0.2))} 
.step:nth-child(6) img{filter:contrast(2.5) drop-shadow(2px 4px 0px rgba(0,0,0,0.2))} 
.step:nth-child(7) img{filter:contrast(2) drop-shadow(2px 4px 0px rgba(0,0,0,0.2))} 
.step:nth-child(8) img{filter:contrast(1.5) drop-shadow(2px 4px 0px rgba(0,0,0,0.2))} 


.about{position:relative;}
.about:after {content: "";position: absolute;top: 0;width: 100%;height: 100%;right: 0;background-image: url(../images/about-bg.jpg);background-size: 30%;background-position: right;background-attachment: fixed;z-index: -1;background-repeat: no-repeat;}
.about p{background:rgba(255,255,255,0.3)}

#menutoggle{display:none;}
#menutoggle img{width: 34px;}

#products h2{color:#fff}
#products{background:#2f4858; background-image:url('../images/our-product-bg.jpg')}


#faq{position:relative; background-image:url('../images/FAQ-bg.jpg')}
.faq-item{margin-bottom: 1em; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.04);}
.accordion {background-color: #fff;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}

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

.panel p{font-size: 16px;}
.panel {padding: 1.5em;display: none;background-color: white;overflow: hidden;}
.accordion span {float: right;transition: all linear 0.3s 0s}
.accordion.active span {transform: rotate(180deg);}

.contact .info { width: 100%;display:flex;justify-content:space-between;}
.contact .info img {width: 50px;height: 50px;display: inline-block;}
.contact .info > div {display: flex;}
.contact .info > div div {margin-left: 12px;}
.contact .info a{text-decoration:none; border-bottom: 1px dashed; color:#333}


@media screen and (max-width: 786px){
	header {padding:0}
	#menutoggle,.process-flow{display:block}
	#menutoggle img{width: 34px;}
	#menu{display:none}
	nav {padding: 0 20px;}
	.hero{ background-size: cover; padding: 3rem 0;background-repeat: no-repeat;background-position:center}
	.hero h1{ font-size: 2.4rem;text-shadow:0 2px 1px rgba(255,255, 255, 16);}
	.hero p{ line-height: normal;margin-bottom: 0;text-align: center;color:#fff;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);}
	p{text-align:justify}
	.brand-name{font-size:2em}
	.about:after{ background-size: 100%; background-position: 130px;}
	#process{position:relative}
	#process:after {
		content: "";
		background: url(../images/process.png);
		position: absolute;
		width: 50%;
		height: 90%;
		bottom: 0;
		right: 0;
		background-repeat: no-repeat;
		filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.1));
		opacity: 0.6;}
	.process-flow {margin-top:0}
	.process-flow .step{text-align:left; padding-bottom:40px;}
	.process-flow .step:before{position:absolute; content:""; background:rgba(0,0,0,0.3); width: 2px; height: 100%;left: 3px; z-index: -1;top: 9px;}
	.process-flow .step:last-child:before,
	.process-flow .step img, .process-flow .step:after{display:none}
	.process-flow .step h3{max-width:100%}
	.process-flow .step:nth-child(2n){margin-top:0}
	section { padding: 2rem 2em;}
	.step h3:before {content: "";position: relative;background: #2d5a3d;width: 8px;height: 8px;display: inline-block;border-radius: 33px;margin-top: 7px;margin-right: 3px;}
	.contact .info{display:block}
	.contact .info > div{margin-bottom:2em;}
}