*{box-sizing:border-box;margin:0;padding:0}
body{
font-family: "Huninn", sans-serif;
direction:rtl;
color:#222;
line-height:1.6}

header{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
background:#310422;
z-index:1000}

header img{
	width:40px;
	height:100%;
}

nav a{
text-decoration:none;
color:white;
margin-left:24px;
font-weight:700}

.hero{
position:relative;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:#fff;
overflow:hidden}

.hero video{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover}
	
.overlay{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.45)}
	
.hero-content{
	position:relative;
	z-index:2}
	
.hero-content img{
	width:210px;
	height:100%;
	object-fit:cover;
	margin-bottom:20px;
	color:white;}
	
h1{
	font-size:56px}
	
.btn{
	display:inline-block;
	padding:14px 28px;
	border:none;
	background:#CC5555;
	color:white;
	text-decoration:none;
	margin-top:20px;
	font-weight:700}
	
.btn.dark{
	background:#000;
	color:#CC5555}
	
section{
	padding:100px 40px}
	
.quote {
	background:#f7f5f2;
	text-align:center;
	}

.quote p {
	text-decoration:italic;
}
	
.services h2,.contact h2{
	text-align:center;
	font-size:42px;
	margin-bottom:40px}
	
	
.cards{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:24px}
	
.card{
	border:none;
	box-shadow:0 4px 16px rgba(0,0,0,.08)}
	
.card img,.split img{
	width:100%;
	height:220px;
	object-fit:cover}
	
.card h3,.card p{
	padding:0 20px 20px}
	
.card h3{
	padding-top:20px}
	
.split{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:40px;
	align-items:center}
	
.split img{
	height:420px}
	
.retreat{
	background:#f7f5f2}
	
.contact{
	background:#111;
	color:#fff;
	text-align:center}
	
.contact h2 {
	margin-bottom:0px;
}
	
.social a{
	color:white;
	text-decoration:none;
	font-size:30px;
	padding:10px;
	margin-top:20px;
}
	
footer{
	background:#000;
	color:#aaa;
	text-align:center;
	padding:20px}
	
@media(max-width:768px){
  .cards,.split{
	  grid-template-columns:1fr}
	  
  nav{
	  display:none}
	  
  h1{
	  font-size:36px}
	  
  section{
	  padding:70px 20px}
	  
.hero-content img{
	width:160px;
	height:100%;
	object-fit:cover;
	margin-bottom:20px;
	color:white;}
}