/* Fonts
 * ----------------------------------------------
 */
@import url('https://fonts.googleapis.com/css?family=Italiana:400,400i&text=abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-~.%21%3F%22%27%2C%2B%3D%26%23%40%25%2A%28%29%C2%A9%2F%5B%5D');
@import url('https://fonts.googleapis.com/css?family=Muli:100,300,600&text=abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-~.%21%3F%22%27%2C%2B%3D%26%23%40%25%2A%28%29%C2%A9%2F%5B%5D');

@font-face {
  font-family: 'Roslindale';
  src: url('/assets/fonts/RoslindaleVariableItalicBeta.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
    font-family: 'Grand Slang';
    src: url('/assets/fonts/GrandSlang-Roman.woff2') format("woff2");
}

h1, h1 a, h3, h3 a, h5, h5 a, h6, h6 a {
  font-family: 'Italiana';
  text-decoration: none;
  font-weight: 400;
  text-shadow: 0 0 -1px #100 0 0 12px #F9E0DC;
}
h1, h1 a {
  padding-top: 80px;
  margin-bottom: 10px;
  letter-spacing: 2px;
  text-shadow: 0 0 18px #F9E0DC;
}

.title {
  font-size: 75px;
  line-height: 70px;
}

.subtitle {
  font-size: 23px;
}

.body {
  font-size:16px;

}

@media screen and (min-width: 992px) {
  .title {
    font-size: 144px;
    line-height: 140px;
  }


  .subtitle{
    font-size: 40px;
  }

  .body{
    font-size: 18px;
  }
}


h2, h2 a {
  font-family: 'Grand Slang';
  font-style: normal;
  margin-top: 5px;
  margin-bottom: 5px;
}
h3, h3 a {
  letter-spacing: 1px;
  margin-top: 5px;
  margin-bottom: 5px;
}
h4, h4 a {
  letter-spacing: -0.5px;
  font-family: 'Muli';
  font-weight: 800;
  text-transform: uppercase;
}

p, ul, li, ol, td {
  font-family: 'Muli';
  font-weight: 300;
  font-size: 19px;
}
p {
  margin-top: 30px;
  margin-bottom: 30px;
}
p.text-justify {
  text-indent: 0px;
}
p.large {
  font-size: 26px;
}
p a {
  font-weight: 500;
}

i {
  font-family: 'Italiana';
  font-style: normal;
  letter-spacing: 1.5px;
}
em {
  font-style: italic;
}
b, strong {
  font-weight: 600;
}

header a, footer a {
  font-family: 'Italiana';
  letter-spacing: 1.5px;
  font-size: 26px;
}
header a:hover, footer a:hover {
  text-decoration: underline;
}
footer .social-media-list li a {
  font-family: 'Muli';
  font-size: 15px;
  color: var(--color-dark);
}
footer .social-media-list li a:hover {
  font-family: 'Muli';
  font-size: 15px;
  text-decoration: none;
  color: var(--color-purple);
}
footer p {
  font-size: 15px;
}

.las {
  font-size: 70px;
}

/* Colours
 * ----------------------------------------------
 */
body {
    --color-lilac : #DAB6F2;
    --color-purple: #A979D9;
    --color-green : #77D9A1;
    --color-dark  : #391931;
    --color-light : #F9E0DC;
    --color-gradient-1: var(--color-lilac);
    --color-gradient-2: var(--color-purple);
    --color-gradient-3: var(--color-green);
    background: var(--color-light);
}

p, ul, ol, li, td {
  color: var(--color-dark);
}
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a {
  color: var(--color-dark);
}

.lilac  { color: var(--color-lilac )  !important; }
.purple { color: var(--color-purple)  !important; }
.green  { color: var(--color-green )  !important; }
.dark   { color: var(--color-dark  )  !important; }
.light  { color: var(--color-light )  !important; }

.lilac-bg  { background-color: var(--color-lilac ); }
.purple-bg { background-color: var(--color-purple); }
.green-bg  { background-color: var(--color-green ); }
.dark-bg   { background-color: #593951; }
.light-bg  { background-color: #F2D9D5; }


a, a:link, a:active, a:visited {
  color: var(--color-purple);
}
p a:hover {
  color: var(--color-green);
  font-weight: 600;
}

.icon {
  font-size: 22px;
  line-height: 0;
  color: #fff;
}

.las {
  color: var(--color-purple);
}
.las:hover {
  color: var(--color-dark);
}

/* Gradient background
 * ----------------------------------------------
 */
.bg-grad {
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(at 71% 77%,var(--color-gradient-1) 0,transparent 31%),radial-gradient(at 36% 47%,var(--color-gradient-3) 0,transparent 58%),radial-gradient(at 54% 29%,var(--color-gradient-3) 0,transparent 28%),radial-gradient(at 45% 51%,var(--color-gradient-1) 0,transparent 53%),radial-gradient(at 73% 44%,var(--color-gradient-2) 0,transparent 54%),radial-gradient(at 24% 7%,var(--color-gradient-2) 0,transparent 40%),radial-gradient(at 76% 46%,var(--color-gradient-1) 0,transparent 50%);
    height: 90vh;
    width: 70vw;
    filter: blur(58px);
    z-index: -2;
    opacity: 0.8;
}

.bg-grad-2 {
    transform: translateX(-50%) rotate(190deg);
    height: 600px;
    max-width: 900px;
    width: 55vw;
    width: 100%;
	margin-top: 100px;
    z-index: -2;
    opacity: 0.5;
}


/* Header & Menu & Footer
 * ----------------------------------------------
 */
header {
  display: block;
  height: 80px;
}
header h1, header h1 a, header h1 a:hover {
  margin-top: 4px;
  margin-bottom: 4px;
  padding: 0;
  font-size: 30px;
  text-decoration: none;
}

footer {
  padding-top: 80px;
}

footer img {
  max-width: 150px;
  margin-top: 30px;
}

#main-menu a, #main-menu li {
  color: #5C835A;
  font-family: 'Italiana';
  letter-spacing: 1px;
  text-decoration: none;
  cursor: pointer;
}


/* Button & Input
 * ----------------------------------------------
 */
a.button, input.button, button {
 /*  box-shadow: inset 8px 12px 8px 0 rgba(255,255,255,0.9), inset -5px -5px 25px 0 rgba(255,255,255,0.4); */
  font-family: 'Italiana';
  font-size: 30px;
 /* height: 50px; */
  border-radius: 22px;
  border: 1px solid #593951;
  background-color: #EDE6E5;
  color: #593951;
}
a.button:hover, input.button:hover, button:hover {
  box-shadow: inset 8px 12px 8px 0 rgba(255,255,255,0.5), inset -5px -5px 25px 0 rgba(255,255,255,0.8);
}


input[type="text"], input[type="email"] {
  height: 40px;
  min-width: 380px;
  border-radius: 5px;
  border: 0;
  padding: 5px 20px;
}

.image-text-container {
  
  align-items: center; /* Align content vertically */
  width: 100%;
  max-width: 900px;
  padding: 15px 10px 5px 10px;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.round-image {
  width: 300px; /* Adjust width as needed */
  height: 300px; /* Adjust height as needed */
  border-radius: 50%; /* Make the image round */
  margin-right: 30px; /* Add space between image and text */
  margin-left: 30px;
  object-fit: cover;
}

.image-text-container p {
  flex: 1; /* Text takes remaining space */
}


.flex-reverse {
  flex-direction: column; 
  
}

@media screen and (min-width: 992px) 
{
  .image-text-container {
    flex-direction: row;
  }
  .flex-reverse {
    flex-direction: row-reverse; 
  }
}