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

/* Container Main */
.container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF;
    font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif;
    font-size: 18px;
}

.Row1 , .OLRow1{
	text-align: center;
	padding-top: 15px;
}
.col, .OLcol, .Yogcol {
	float: left;
}
.Left {
	width: 5%;
}
.right
	{
		font-weight:bolder;
		color:#0E85A4;
		width:95%;
		font-size: 50px;
		padding-top: 15px;
		display:inline-block;
		text-shadow: -3px 2.5px 2px #0C0C0C;
		
	}

.Yogaright{
		font-weight:bolder;
		color:#0E85A4;/*#0E85A4*/
		width:95%;
		font-size: 50px;
		padding-top: 0px;
		display:inline-block;
		text-shadow: -3px 2.5px 2px #E6B70D,
					-4px 2.5px 2px #E6B70D,
					-5px 2.5px 2px #E6B70D,
					-6px 2.5px 2px #E6B70D;
	}
.woodimg1 {
	padding-left: 6%;
	padding-top: 3%;
	max-width: 100%;
	max-height: auto;
}

.Homeimg {
	padding-left: 6%;
	padding-top: 3%;
	max-width: 100%;
	max-height:auto;
}

/*Create a box effecf when mouse over*/
.Row1 a:hover img { 
	transform: scale(1);/* change the size */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /*Create a shadow */
	border-radius:25px; /* Create rounded corners */
}

.OLcol {
	width: 17%;
	padding-top: 3%;
	
}
.OLcol img{
	padding-top: 0%;
	max-width: 80%;
	max-height: auto;
}

.OlstCont {
	text-align: center;
	width: 80%;
	display: inline-block;
    margin-left: 10%;
}	

.OlstLst,.detoxtxt,.healingtxt {
	width: 80%;
	
	margin-left: 10%;
	display: inline-block;
	
}

.HlgStudies {
    width: 80%;
    margin-left: 10%;
    padding-left: 1%;
    padding-right: 1%;
   /* background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255 ,255 ,255, 0.4)), url("imagelink");/* for opacity ημιδιαφανές background-image*/
	background-image:url("../Pages/Healing/Studiesimg.png");
    color: #141312;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    font-style: oblique;
    text-align: center;
	
}

/* Healing page */
.chakra{
		width: 80%;
	margin-left: 10%; 
	font-size: 30px;
	font-family: verdana;
	color:#2710EC;
	text-align: center;
	filter: blur(0px);
	
	
	
	text-shadow: 1px 1px 1px #FFDF00,
				1px 2px 1px #FFDF00,
				1px 3px 1px #FFC033,
				1px 4px 1px #FFC033,
				1px 5px 1px #FFC033,
				1px 6px 1px #FF2A1B;
}

#GlandImg:hover {
	transform: scale(1.5);/* change the size */
}
/* end Healing page */

.Yogcol
{
	width: 17%;
	padding-top: 3%;
}


/*--------YogaPageTest-------------*/


.Col4Container {
    display: grid; /* Establishes the grid layout */
    grid-template-columns: repeat(4, 1fr); /* Creates four equal columns */
    gap: 10px; /* Optional: Adds space between the grid items */
	text-align: center;
	background-color: white;
	width: 97%;
}



.OneRowRContaine{
	display: grid;
	grid-template-columns: 90% ;
	padding-left: 15%;
	padding-right: 5%;
	justify-content:center;
	text-align: center;
	background-color:white;
}




.ribbon {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
.ribbon {
  --r: .4em; /* control the ribbon shape (the radius) */
	width: 93%;
  position:relative;
  
  inset-inline:calc(-1 * var(--r)); /* offsets the ribbon horizontally on both left and right sides */
  text-align: center;    
  line-height: 1.3;      /* defines the spacing between lines within the ribbon. */
  padding: 0 .5em calc(2*var(--r));
  border-radius: var(--r);
  --_g:100%/var(--r) calc(2*var(--r)) no-repeat;
  background: 
    radial-gradient(100% 50% at right,#0005 98%,#0000 101%) 0    var(--_g),
    radial-gradient(100% 50% at left ,#0005 98%,#0000 101%) 100% var(--_g),
    conic-gradient(from 90deg at var(--r) calc(100% - 2*var(--r)),#0000 25%,#3FB8AF 0)
     0 0/calc(100% - var(--r)) 100%;
}



.film-strip img{
	width: 100%;
	height: auto;
}


.film-strip {
 
 
  --s: 7px; /* control the size */
  --c: #87cae2;
  width: 50%;/*calc(25*var(--s));*/
  aspect-ratio: 1.;
  background: 
    conic-gradient(at 50% var(--s),var(--c) 75%,#0000 0) 
    0 0/calc(2*var(--s)) calc(100% - var(--s)) padding-box;
  border: var(--s) solid var(--c);
  padding: calc(var(--s)*2.5) calc(var(--s)*1.5);
  box-sizing: content-box;
  /* you can add a filter for an oldish effect 
  filter: sepia(1) brightness(0.9) grayscale(.2);
  */
  
  
  text-align: center;
	margin-left: 20%
   	
}

.TitleContainer {
	
	display: grid;
	grid-template-columns: 10% 90% ;
	color:transparent;
	/*border: 2px solid hsla(359,87%,50%,1.00);*/
	justify-content:center;
	width: 90%;
	 margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF;
	
}

#Title {
	font-size: 70px;
	text-align: center;
  background: -moz-linear-gradient(-90deg, #003471, #448CCB);
background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
  	
  text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
  -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}

.Ycontainer {
    display: grid;
    grid-template-columns: 30% 60% ;
    gap: 20px;
    height: 100%;
	background-color:#FFFFFF;
	
	/*border: 2px solid hsla(359,87%,50%,1.00);*/
  }
#tlp {
    display: grid;
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    /*background: linear-gradient(#37f4ea, #6e8ef1, #53f4e3);*/
	 background: linear-gradient(#37f4ea, #6e8ef1, #53f4e3); 
	text-shadow: 0px 2px 3px rgba(0,0,0,0.5);
 
	color: white;
	font-weight:bold;
  }

#txp {
    display: grid;
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    /*background: linear-gradient(#37f4ea, #6e8ef1, #53f4e3);*/
	 background: linear-gradient(90deg, #e8eeec, #dbe0de);
  }

#Y1{
	grid-template-columns: 20% 70% ;
	justify-content:center;
	 column-gap: 0px
}

 .Yitem {
    background-color: #fff;
    color: black;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
	/*border: 2px solid hsla(232,87%,50%,1.00); */
 }
 
.Yitem img {
	 width:60%;
	height:auto;
}
.YitemText{
	
    color: black;
    text-align: center;
	/*border: 2px solid hsla(232,87%,50%,1.00); */
     	 
}


/*Transparency for Background Images using Id tag with Pseudo-elements*/
#Asnabgr,#Asnabgr1, #YogaLife {
    position: relative; /* Establishes a positioning context for the pseudo-element */
    padding: 20px; /* Adds some padding for aesthetics */
    color: hsla(0,0%,0%,1.00); /* Set text color for contrast */
    z-index: 1; /* Ensures content is above the background */
}
#Asnabgr::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../Pages/Yoga/MeditationBgrn.jpg"); /* Replace with your image URL */
    background-size: contain; /* to fit he image within the container without cropping. */
    opacity: 0.1; /* Adjust transparency here */
    z-index: -1; /* Places it behind the content */
}


#Asnabgr1::before{
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../Pages/Yoga/HYAsanasBgr.jpg"); /* Replace with your image URL */
    background-size: contain; /* to fit he image within the container without cropping. */
    opacity: 0.2525; /* Adjust transparency here */
    z-index: -1; /* Places it behind the content */
}

#YogaLife::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../Pages/Yoga/YogaLifebgr.jpg"); /* Replace with your image URL */
    background-size: contain; /* to fit he image within the container without cropping. */
    opacity: 0.1; /* Adjust transparency here */
    z-index: -1; /* Places it behind the content */
	
}

/*----End of Transparency----*/


.YOvalPlasio {
    background: rgb(14,133,164);
    background: linear-gradient(90deg, rgba(82,175,199,0.3968181022408963) 12%, rgba(103,219,242,0.27356880252100846) 50%, rgba(21,184,227,0.3968181022408963) 88%);
    display: inline-block;
    border-radius: 35px;
    padding-top: 0px;
    margin-bottom: 9px;
    margin-left: 5%;
	margin-right: 15%; 
    margin-top: 20px;
    -webkit-box-shadow: -5px 6px 2px #A1BBC2;
    box-shadow: -5px 6px 2px #A1BBC2;
}



/*Modal (poup widow)

.modal-window {
    position: fixed;
    background-color: rgba(255, 255, 255, 0.25);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
}

.modal-window:target {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.modal-window > div {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2em;
    background: white;
}

.modal-close {
    color: #aaa;
    line-height: 50px;
    font-size: 80%;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 70px;
    text-decoration: none;
}

.modal-close:hover {
    color: black;
}



/*END Modal (poup widow)*/

/*--------Adjust Accordingly-------------*/

/* MOBILE*/
@media (max-width: 390px)
{
	
	.TitleContainer{
		grid-template-columns: 20% 80% ;
	}
	
	
	
	.ribbon {
		width: 96%;
	}
	#Title{
		font-size: 50px;
	}
	
	
	
	#Asnabgr::before{
		 background-size:90% ;
		 background-repeat: no-repeat;
		background-position: center;
	}
	
	#Asnabgr1::before{
		background-size:90% 90%;
		 background-repeat: no-repeat;
		background-position: center;
		opacity: 0.1; /* Adjust transparency here */
	}
	#AsanaT {
		height:350px;
		background-color: #F1ED35;
	}
	
	.Row1, .OLRow1
	{
		padding-top: 0px;
		
	}
	.right{
	font-size: 15px;
		text-shadow: -1px 1px 1px #DF4B2F;
	}
	.ProbLstColumn 
 	{
	clear: both;
	
	}
	
	.Ycontainer{  
		display: grid;
		grid-template-columns: 100%;
  		
		grid-gap: 30px;
		height: auto;
		
	} 
	
	#Y1{
		
		grid-template-columns: 70%;
		justify-content: center;
		grid-gap: 10px;
	
	}
	
	
	
	/*Responsive Images - rezice image according to */
	
	
	.Homeimg {
	padding-left: 6%;
	padding-top: 3%;
	max-width: 100%;
	max-height:auto ;
	}
	
	.woodimg1 {
	padding-left: 6%;
	padding-top: 3%;
	max-width: 300%;
	max-height: 500px;
	}
	
	
	.Yitem img 
	{
		width: 60%;
	  	height: auto;
	}
	
	.HealthImg img
	{
		width: 100%;
	  	height: auto;
	}
	 .detoximg   img
	{
		width: 100%;
	  	height: auto;
	}
	
	
	
	
	.ProbLstColumn{
		width: auto;
	}
	
	#s /*sto Healing page */
	{	
		 font-size: 18px;
	}
	#GlandImg:hover 
	{
	transform: scale(1.1);/* change the size */
	}

}


/* Small Tablets */
@media (min-width: 391px)and (max-width: 767px) 
{
	.Row1, .OLRow1
	{
		padding-top: 0;
	}
	.right
	{
		font-size: 35px;
	}
	.ProbLstColumn
	{
		margin-right: 10%;
	}
	.lastCol
	{
		margin-right: 0;
		display: inline-block;
		clear: both;
		padding-left: 30%;
	}
	
	.OLcol img
	{
		padding-top: 90%;
		max-width: 100%;
		max-height: auto;
	}
	.detoximg img
	{
		width: 100%;
		height: auto;
		
	}

	
	
	.Yitem img {
	width: 100%;
	height: auto;
	}
	.woodimg1 {
	padding-left: 6%;
	padding-top: 3%;
	max-width: 200%;
	max-height: 300px;
	}
}



/* Small Desktops */
@media (min-width: 768px) and (max-width: 1096px) {
	.OLcol img
	{
		padding-top: 19%;
		max-width: 100%;
		max-height: auto;
	}
	
}

.YasanaT {
	background: linear-gradient(10deg, rgba(82,175,199,1) 12%, rgba(103,219,242,0.27356880252100846) 50%, rgba(21,184,227,0.3968181022408963) 88%);
}