html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0;padding:0;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none; color:white;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */

.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{	vertical-align:baseline;}/* vertical align baseline */
.vertical-top{	vertical-align:top;}/* vertical align top */
.underline{	padding-bottom:5px;	border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{	display:block;}/* vertical menu */
nav.horizontal ul li{	display: inline-block;}/* horizontal menu */
img{max-width:100%;}
span,p,tbody, .button{font-family: Titillium Web;}
/*end reset*/
.clear{
    clear:both; 
    padding: 3.5em 10%; 
    background: #1E3D57;
    align-items: center;
    justify-content: space-between;
    gap: 5%;
}
.footer-content{
    padding: 3.5em 10%;
    align-items: center;
    justify-content: space-between;
    gap: 5%;

}
.wrap-content{
    background-color: #f0f0f0
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 170px;
  padding: 20px;
  width: 80%;
  margin: 0 auto;
}
.about {
  align-items: center;
  justify-content: space-between;
  padding: 150px 20px;
  text-align: center;
  width: 80%;
  margin: 0 auto;
}
body {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(https://img.pikbest.com/origin/09/11/25/806pIkbEsTgAf.png!bw700) no-repeat #fff;
;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	font-family: "Open Sans", arial, sans-serif;
	font-weight: 300;
}
.logo {
  width: 200px;
}

.logo img {
  width: 150px;
  height: auto;
  margin-left: 20px;
}

.button {
  margin-right: 20px;
}

.download:hover{
    background: #C29113;
    color: white;
    border: 2px solid #C29113;
}

.download {
  display: inline-block;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 10px;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  text-align: center;
}
.banner {
  height: 700px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../images/CandyWorld.jpg);
  background-size: cover;
  background-position: center;
  text-align: center;
  color: white;
  animation: zoom-in 3s ease-in-out;
  padding: 20px;
  display: grid;
  align-items: center;
}

.banner p {
  font-size: 1.6em;
  margin: 0 20%;
  animation: slide-up 2s ease-in-out;
  margin-top: -2.5em;
  padding-bottom: 1em;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-down {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slide-up {
  from {
    transform: translateY(100px);
  }
  to {
    transform: translateY(0);
  }
}
.wrap {
	width: 100%;
	margin: 0 auto;
}
.content{
	min-height: 46em;
}
.content-grid {
	text-align: center;
}

.content-grid p img{
	text-align: center;
	z-index: -9999;
	margin-top: -100px;
}
.grid  {
	text-align: center;
}
h3 {
	font-family: 'Petit Formal Script', cursive;
	color: #FFF;
	display: block;
	padding-bottom: 1em;
	font-size: 1.6em;
	font-weight: 600;
	text-align: center;
}
.card {
  color: white;
  padding: 1rem;
  height: 10rem;
  border-radius: 10px;
}
.product-card{
  padding: 5rem;
  background-size: cover; 
}
.cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
h1 {
  font-family: 'Petit Formal Script', cursive;
  font-size:65px;
  font-weight: 600;
  margin:0;
  color: White;
}
.tag {
  background: rgba(0, 0, 0,0.6);
  display: inline-block;
  padding: 0.8rem;
  border-radius: 10px;
  mix-blend-mode: multiply;
}

.footer {
	padding: 0.6em;
	background: #C29113;
}
.footer p.a {
	
	display: block;
	line-height: 1.8em;
	text-align: center;
	margin-top: 4em;
}
.footer p {
	font-family: 'Titillium Web', sans-serif;
	color: black;
	display: block;
	font-size: 1em;
	font-weight: 100;
	line-height: 1.8em;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255, 250, 250, 0.09);
}
.footer p.a a{
	color: #000;
		-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	font-weight: 900;
}
.footer p a{
	color: #0E97F3;
		-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	
}
.footer p a:hover{
	color: #fff;
}

/*-----start-responsive-design------*/
@media only screen and (max-width: 1920px) and (min-width: 1280px){
	.wrap{
		width:100%;
	}
		.clear {
	    display: flex;
	}
	.footer-content{
	    display: flex;
	}

}
@media only screen and (max-width: 1280px) and (min-width: 1024px) {
	.wrap{
		width:100%;
	}
	.clear {
	    display: flex;
	}
		.footer-content{
	    display: flex;
	}

}
@media only screen and (max-width: 1024px) and (min-width: 768px) {
	.wrap{
		width:100%;
	}
		.grid p {
		margin-top: 1em;
	}
	.grid h3 {
		padding-top: 1.2em;
	}
	.footer p.a {
		margin-top: 4em;
	}
	.clear {
	    display: list-item;
	}
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
	.wrap{
		width:95%;
	}
	.content-grid p {
		margin-top: 3em;
	}
	.grid p{
		margin-top: 0;
	}
	.grid p img {
		width: 80%;
		margin-top: 1em;
	}
	.grid h3 {
		font-size: 1em;
		padding-top: 1.5em;
	}
	.footer p.a {
		margin-top: 4em;
		margin-bottom: 0;
	}
	.footer p {
		margin-bottom: 1em;
	}
	button span {
		top: 18px;
		left: 14px;
	}
	.map img {
	    height: 15rem;
	}
	.clear {
	    display: list-item;
	}

}
@media only screen and (max-width: 480px) and (min-width: 320px) {
	.wrap{
		width:95%;
	}
	.content-grid p img{
		margin-top: -2.2em;
		width: 300px;
		text-align: center;
	}
	.content-grid {
		text-align: center;
		margin: 0 auto;
	}
	.grid {
		margin-top: 0;
	}
	.grid p{
		margin-top: 0;
	}
	.grid p img {
		width: 283px;
		margin-top: 0.3em;
	}
	.grid h3 {
		font-size: 0.9em;
		padding-top: 1.2em;
		padding-bottom: 1.7em;
	}
	input[type="text"] {
		font-size: 0.9em;
		padding: 10.7px 13px;
		width: 72%;
	}
	.footer p.a {
		margin-top: 2.7em;
		margin-bottom: 0;
	}
	.footer p.a a img {
		margin-bottom: 0;
		width:100px;
	}
	.footer p {
		margin-bottom: 1em;
		margin-top: 0.8em;
        font-size:0.9em;
	}
			.map img {
	    height: 15rem;
	}
	.clear {
	    display: list-item;
	}

}
@media only screen and (max-width: 320px) and (min-width: 240px) {
	.grid p img {
		width: 100%;
		margin-top: 0;
	}
	
	.content-grid p {
		margin-top:1em;
	}
	
	.grid p{
		margin-top: 0;
	}
	
	.grid h3 {
		font-size: 1em;
		padding-top: 1em;
		padding-bottom: 1.4em;
	}
	.footer p.a {
		margin-top: 2.5em;
		margin-bottom: 0;
	}
	.footer p {
		margin-bottom: 1em;
	}
	.wrap{
		width:95%;
	}
		.clear {
	    display: list-item;
	}

}
.clear a:hover{
    color: #C29113;
}