/* Style Sheet - Little Grove Holistic Health */
/* Copyright 2013-2026 Edward J Cadman - All Rights Reserved */

        /* Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Montserrat', sans-serif;
        }

		html, body {
		    height: 100%;
		}

        body {
            line-height: 1.6;
            background: #D5BADA;
		    min-height: 100vh;
            color: #fff;
		    
		    display: flex;
		    flex-direction: column;
        }

		main {
		    flex: 1; /* pushes footer down */
		}
		
        header {
            background: #263168;
            color: white;
            padding: 1rem;
            position: relative;
		    z-index: 1000;
            }

		.title-group {
		    display: flex;
		    flex-direction: column;
		    line-height: 1.1;
		}

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        nav h1 {
            font-family: 'Great Vibes', cursive;
            font-size: 2rem;
		    font-weight: normal;
			margin: 0;
        }

		.faqt {
            font-size: 1.5rem;
		    font-weight: normal;
		    margin-top: 0.67em;
		}

		.logoheading {
		    font-family: 'Great Vibes', cursive;
/*		    font-size: 4rem;	*/
font-size: 2.5rem;
		    color: #fff;
			margin: 0;
		    margin-top: -5px; /* pulls it closer to the logo */
	        letter-spacing: 1.5px;
		}
		
		.logosubheading {
		    font-family: 'Montserrat', sans-serif;
/*		    font-size: 1.5rem;	*/
font-size: 1rem;
		    color: #fff;
		    margin-top: -5px; /* pulls it closer to the title */
	        letter-spacing: 1px;
		}

		.subheading {
		    font-family: 'Montserrat', sans-serif;
		    font-size: 0.8rem;
		    color: #fff;
		    margin-top: -1px; /* pulls it closer to the title */
	        letter-spacing: 1px;
		}
		
        nav ul {
            list-style: none;
            display: flex;
            gap: 1rem;
        }

        nav a {
            color: white;
            text-decoration: none;
        }

        /* Mobile menu */
        .menu-toggle {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
        }

        .container {
            padding: 1rem;
        }

		.container a:link,a:visited {
			color:#fff;
		}

		.container a:hover,a:active {
			color:#263168;
		}

		.container ul {
			padding-left: 20px;
		}
		
        .grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
        }

		.card {
		    background: rgba(255, 255, 255, 0.15); /* transparency */
		    backdrop-filter: blur(10px);          /* blur effect */
		    -webkit-backdrop-filter: blur(10px);  /* Safari support */

		    border-radius: 12px;
		    overflow: hidden; /* ensures rounded corners clip content */
		    padding: 1.5rem;

		    border: 1px solid rgba(255, 255, 255, 0.7);
		    color: white;
		    
		    position: relative;
		    z-index: 1;
		}

		.card0 {
		    padding: 1.5rem;
		    position: relative;
		    z-index: 1;
			text-align: center;
		}

		.card0 img {
			display: block;
			margin: auto;
			width: 40%;
		}

@media (max-width: 600px) {

    .card0 .logo {
        width: 60%;
    }

}
		.card1 {
		    background: rgba(255, 255, 255, 0.15); /* transparency */
		}

		.card2 {
		    background: rgba(255, 255, 255, 0.15); /* transparency */
			text-align: center;
		}

		/* Overlay layer */
		.card::before {
		    content: "";
		    position: absolute;
		    inset: 0;
		    background: rgba(0, 0, 0, 0.5); /* adjust opacity here */
		}

		/* Keep text above overlay */
		.card * {
		    position: relative;
		    z-index: 1;
		}

footer {
    background: #263168;
    color: white;

    padding: 1.5rem;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;

    flex-wrap: wrap;
}

.footer-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-logos img {
    max-height: 75px;
    width: auto;
}

.footer-links {
    text-align: right;
}

.footer-links a {
    color: white;
    text-decoration: none;
}

.footer-links p {
    margin-top: 0.5rem;
}

@media (max-width: 600px) {

    footer {
        flex-direction: column;
        text-align: center;
    }

    .footer-links {
        text-align: center;
    }

    .footer-logos {
        flex-direction: column;
        gap: 1rem;
    }
    
    .footer-logos img {
        max-height: 80px;
        max-width: 80vw;
    }
}


        /* Tablet */
        @media (min-width: 600px) {
            .grid {
	        	grid-template-columns: 1fr; /* single column */
	    	    max-width: 600px;           /* optional: keeps it nicely centered */
    	    	margin: 0 auto;
            }
        }

        /* Desktop */
        @media (min-width: 900px) {
            .grid {
	        	grid-template-columns: 1fr; /* single column */
	    	    max-width: 900px;           /* optional: keeps it nicely centered */
    	    	margin: 0 auto;
            }
        }

        /* Mobile nav */
        @media (max-width: 600px) {
            nav ul {
                display: none;
                flex-direction: column;
                background: #5560a9;
                position: absolute;
                top: 60px;
                right: 0;
                width: 200px;
                padding: 1rem;
            }

            nav ul.active {
                display: flex;
            }

            .menu-toggle {
                display: block;
            }
        }


        .logo-container {
		    display: flex;
		    align-items: center;
		    gap: 10px;
		}

		.logo-title {
		    width: 60px;		/* Can make bigger, eg 40 -> 60px */
		    height: 60px;
		    object-fit: contain;
		}

		.logo {
/*		    width: 50%;
		    height: 50%;
		    object-fit: contain;	*/
width: min(80vw, 500px);
height: auto;
object-fit: contain;
		}

		.photo {
		    width: 80%;
		    object-fit: contain;
		    border-radius: 12px;
		    overflow: hidden;
		    border: 1px solid rgba(255, 255, 255, 0.7);
		    color: white;
			margin: auto;
		}

		.ukrf {
		    width: 5%;
/*			height: 75px;	*/
		    object-fit: contain;
		    float: left;
		}

		.aor {
		    width: 20%;
/*			height: 75px;	*/
		    object-fit: contain;
		    float: left;
   			padding-right: 20px;
		}
		
		.privacy {
			font-size: 1rem;
			color: white;
		    object-fit: contain;
			float: right;
   			padding-left: 20px;
		}

/* Clouds */
#background {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;

  background:
    linear-gradient(
      180deg,
      #263168 0%,
      #5560a9 40%,
      #6b62a9 75%,
      #9a6bab 100%
    );
}
.cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.18;
}
.cloud1 {
  width: 700px;
  height: 500px;

  background: #ffffff;

  top: 10%;
  left: -20%;

  animation:
    drift1 80s linear infinite;
}
.cloud2 {
  width: 800px;
  height: 600px;

  background: #9a6bab;

  top: 40%;
  left: 20%;

  animation:
    drift2 100s linear infinite;
}
.cloud3 {
  width: 900px;
  height: 700px;

  background: #5560a9;

  top: 60%;
  left: -10%;

  animation:
    drift3 120s linear infinite;
}

@media (max-width: 600px) {
  .cloud1 {
    width: 300px;
    height: 200px;
  }
  .cloud2 {
    width: 350px;
    height: 250px;
  }
  .cloud3 {
    width: 400px;
    height: 300px;
  }

}

@keyframes drift1 {
  from {
    transform:
      translateX(0)
      translateY(0);
  }

  to {
    transform:
      translateX(300px)
      translateY(-100px);
  }
}

@keyframes drift2 {
  from {
    transform:
      translateX(0)
      translateY(0);
  }

  to {
    transform:
      translateX(-250px)
      translateY(120px);
  }
}

@keyframes drift3 {
  from {
    transform:
      translateX(0)
      translateY(0);
  }

  to {
    transform:
      translateX(200px)
      translateY(-150px);
  }
}

/* Particles */
#particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Button */
.button {
	background-color: #9a6bab;
	border: none;
	color: #fcfcf4;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 4px 12px;
	cursor: pointer;
	border-radius: 50px;
	}

.button:hover {
	background-color: #6b62a9;
	}