@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');
html { 
	scroll-behavior: smooth;
 }
:root{
	--c1: #ffffff;
	--c2 : #82c444;
	--c3 : #faae00;
	--c4 : #5c6567;
	--c5 :rgba(0,0,0,.8);

	--btn-color : var(--c2);

	--headingfont :'Roboto Condensed', sans-serif;
}

body { font-family:var(--headingfont); font-weight:400; }
.bold { font-weight:700;  }

.c1 { background-color: var(--c1); }
.c2 { background-color: var(--c2); }
.c3 { background-color: var(--c3); }
.c4 { background-color: var(--c4); }

.c1-text { color: var(--c1); }
.c2-text { color: var(--c2); }
.c3-text { color: var(--c3); }
.c4-text { color: var(--c4); }

a:hover { color:var(--c2); }
.btn:hover { background:var(--c4);  color:var(--c1); }
.btn:hover::after { background:rgba(0,0,0,.05); border-radius:var(--radius);  }

.btn.spl { background:var(--c4); }
.btn.spl:hover { background:var(--c2);  }

header { background-color:var(--c1); z-index:3; }
header nav a { font-size:1.2rem;  }
header .brand img { height:80px; max-height:200px;   }
body { animation:banner 30s infinite ease-in-out; background:url('../img/bg.jpg'); background-size:cover; background-position:center; background-attachment: fixed;   }
main { min-height:500px; padding: var(--padding);  }
header.sticky { position:sticky; top:0px;  }

section { margin:0px; }

main .tabs { background:var(--c1); padding:.5em 1em; border-radius:var(--radius); display:grid; grid-template-columns:repeat(4,1fr); grid-gap:.5em; grid-auto-flow: column; justify-content:stretch;   margin-bottom:1em; width:100%; overflow:hidden; overflow-x: auto;  text-align:center;   }
main .tabs a { transition:.2s all ease-in-out;  background:var(--c1); color:var(--c3); padding:.5em 1em; width:100%; border-radius:var(--radius); white-space:nowrap;  }
main .tabs a:hover,main .tabs li.active { animation:fadeInLeft .5s;  background:var(--c2); color:var(--c1);  border-radius:var(--radius); }
main .tabs a:hover,main .tabs li.active a { background:var(--c1); color:var(--c2); border:1px solid var(--c2);  border-radius:50%; }

.amenities-lists { display:grid; grid-row-gap: 3em;  }
.amenities-lists > div > div { display:grid; grid-template-columns: auto 1fr; grid-gap:2em; padding:1em;}
.amenities-lists > div > div > div:first-child { order:2; }
.amenities-lists > div > div:hover > div:last-child { color:var(--c2); }


.carousel-container { grid-template-columns:minmax(1fr,0); z-index:0;  }
.service-icons div.item { color:var(--c3); cursor:pointer;  }
.service-icons div.item:hover { color:var(--c2);  }

/* New */
section.bann { height:100%; height:calc(100vh - 82px); }
.bann::before { content:""; background:rgba(0,0,0,.5); position:absolute; top:0px; left:0px; right:0px; bottom:0px;  }
.bann p { font-family:"roboto";  text-shadow:2px 2px 3px rgba(0,0,0,.1); font-weight:300;  }
.bann > div { position: relative;  }

.heading { grid-column: 1/3; text-align:center; font-weight:300;  }

#products { padding-bottom: 5em; }

.product { cursor:pointer;  position:relative;  height:auto; padding:1em; border-radius:var(--radius); transition:.2s all;  }

.product img { height:200px; max-height:300px;  height:100%;  width:100%; object-fit:contain; }
.product h5 { font-weight:700; color:var(--c2); }
.product p { color:var(--c4); }



.product .top { background:var(--c2); position:absolute; top:0px; right:50%; height:3px; var(--c2); border-radius:100%;  }
.product .bottom { background:var(--c2); position:absolute; bottom:0px; left:50%; height:3px; var(--c2); border-radius:100%; }
.product .right { background:var(--c2); position:absolute; top:50%; right:0px; width:3px; var(--c2); border-radius:100%; }
.product .left { background:var(--c2); position:absolute; bottom:50%; left:0px; width:3px; var(--c2); border-radius:100%; }


.product:hover .top {   animation:borderanimt .5s ease-in; animation-delay:.2s; animation-fill-mode: forwards;  }
.product:hover .bottom {   animation:borderanimb .5s ease-in; animation-delay:..7s; animation-fill-mode: forwards; }
.product:hover .left {   animation:borderaniml .5s ease-in; animation-delay:.2s; animation-fill-mode: forwards; }
.product:hover .right {   animation:borderanimr .5s ease-in; animation-delay:.1s; animation-fill-mode: forwards; }

.modal .mdi { font-size:.8em;  }

@keyframes borderanimt {
	/* l-r */
	0% { background:var(--c2); width:10%;  }	
	50% { background:var(--c2); width:40%;  }	
	100% { background:var(--c2); width:60%; }	
}

@keyframes borderanimb {
	/* r-l */
	0% { background:var(--c2); width:10%;  }	
	50% { background:var(--c2); width:40%;  }	
	100% { background:var(--c2); width:60%; }	
}

@keyframes borderaniml {
	/* t-b */
	0% { background:var(--c2); height:10%;  }	
	50% { background:var(--c2); height:40%;  }	
	100% { background:var(--c2); height:60%; }	
}

@keyframes borderanimr {
	/* b-t */
	0% { background:var(--c2); height:10%;  }	
	50% { background:var(--c2); height:40%;  }	
	100% { background:var(--c2); height:60%; }	
}


@keyframes banner {
	0% { background-position:center;  }
	50% { background-position:bottom;  }
	100% { background-position:top; }
}

.servicecol { background:rgba(0,0,0,.03); border-radius: var(--radius); padding-top:2em; padding-bottom:2em;  }

.servicecol .item { display:grid; grid-template-columns:1fr; justify-content: center; text-align:center; grid-gap:.5em; justify-items: center; }
.servicecol .item strong { font-weight:400; font-size:1.5em; color:var(--c4); }

footer ul { padding:0px; list-style: none; }
footer .tradefooter { padding-left:2em; padding-right:2em;   }


.page > section img { width:100%; border-radius:var(--radius);   }

@media (max-width:800px){
	.heading { grid-column: 1/2; }
	.bann > div:empty { display: none; }
	.container { width:100%;  }
	.bann.container { width:90%;  }
	.page > section { margin:0px!important;  border-radius:0px!important;  }	

}