/*----------
# Properties
------------*/
@property --bg-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: "<angle>";
}

/*-----------------------------------------
# Global Styles (Fonts, Colour Scheme, etc.)
-------------------------------------------*/

 :root {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  --text-font: "Mulish", "Noto Sans";
  --heading-font: "Merriweather", serif;
  --nav-font: "Poppins", sans-serif;
  --white-color: #f5f0fc;
  --accent-color: #6b5b99;
  --almost-black-color: #231c3b;
  --light-purple-color: #a998d0;
  --dark-purple-color: #473a6d;
  --light-gray-color: #d1ccf2;
  --heading-color: #4e3a71;
  --glow-1: #2737f2a1;
  --glow-2: #a998d0dd;
  --glow-3: #b35dffb6;
  --background-color: var(--white-color);
  --text-color: #f5f0fc;
  --surface-color: #3d3a4e;
  --surface-hover-color: #5c5a7d;
  --shadow-color: #231c3baa;
  --nav-color: #8a849b;
  --nav-hover-color: #a6a4e4;
}
#main, #footer{
  transition: all 0.2s;
}
hr {
  border: 1px solid #787a9c;
  border-radius: 25%;
  z-index: 2;
}
html{
  width: 100dvw;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scrollbar-width:none
}
body {
  color: var(--text-color);
  background-color: var(--almost-black-color);
  font-family: var(--text-font);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.w-0{
  width: 0%;
}
.bordered{
  border: solid 2px #77777777;
  border-radius: 25px;
}
.cursor-pointer{
  cursor: pointer;
}

/*---------------
# Navigation Menu
------------------*/
#navBtn{
  position: fixed;
  right: 15px;
  top: 15px;
  font-size: 20px;
  z-index: 9999;
  border-radius: 50%;
  background-color: var(--almost-black-color); 
  color: var(--nav-color);
  border:none;
  transition: all 0.2s;
}
#navBtn:hover{
  color: var(--nav-hover-color);
  scale: 1.05;
}
.hidden{
  scale: 0;
  opacity: 0;
}
#navbar {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: flex-start;
  justify-content: space-between;
  background-color: var(--almost-black-color);
  z-index: 9999;
  overflow: hidden;
}
#navbar img{
  width: 75%;
  display: flex;
  align-self: center;
  margin:10px 0;
}
#navbar .active{
  background-image: linear-gradient(90deg, var(--dark-purple-color) 55%, var(--almost-black-color))
}
#navbar nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  list-style: none;
  margin: 0;  
}
#navbar nav .nav {
  margin-top: -30px;
}
#navbar nav .nav #couplesNav {
  margin-top: -10px;
}
#navbar a,
#navbar a:focus {
  color: var(--nav-color);
  font-family: var(--nav-font);
  padding: 6.5px 10px;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: all 0.3s;
  width: 100%;
}
#navbar a .navicon,
#navbar a:focus .navicon {
  font-size: 20px;
  margin-right: 7.5px;
}
#navbar a:hover,
#navbar a:hover .navicon {
  color: var(--nav-hover-color);
}

#navbar .active,
#navbar .active:focus,
#navbar .active .navicon,
#navbar .active:focus .navicon{
  color: var(--white-color);
}
#navCollapse{
  margin-top: 8px;
  transition: all 0.3s linear;
}
#navCollapse nav{
  border: 1.25px solid color-mix(in srgb, var(--nav-color), transparent 80%);
  box-shadow: -1px 1px 2.5px color-mix(in srgb, var(--nav-color), transparent 80%);
  transition: all 0.3s linear;
  &:hover {
    border: 1px solid color-mix(in srgb, var(--nav-hover-color), transparent 75%);
    box-shadow: -1px 1px 2.5px color-mix(in srgb, var(--nav-hover-color), transparent 80%);
  }
}
.collapsedMargin{
  margin-top: -15px;
}
#navCollapseToggle{
  transition: all 0.3s;
}
.rotated{
  rotate: 180deg;
}
.nav-link{
  transition: all 0.3s;
  margin-left: 5px;
}
/*---------
# Preloader
------------*/
#pre-load, .pre-load {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
  &:before {
    content: "";
    position: fixed;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    top: calc(50%);
    left: calc(46%);
    border: 8px solid var(--background-color);
    border-top: 8px solid var(--accent-color);
    animation: animate-preloader 1.5s ease-out infinite;
  }
}
.preLoadFadeOut {
  visibility: hidden;
  display: none;
  opacity: 0;
  transition: visibility 0s 1s, display 0s 1s, opacity 1s linear;
}

/*-----------------
# Scroll Top Button
--------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--almost-black-color);
  font-size:20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  transition: all 0.2s;
}
.scroll-top i {
  font-size: 20px;
  color: var(--nav-color);
  line-height: 0;
}
.scroll-top:hover {
  color: var(--nav-hover-color);
}
.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------
# Sections
-----------*/
section {
  max-width: 1200px;
}
.section {
  color: var(--text-color);
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.light-section {
  color: var(--almost-black-color);
}
#meetLiz{
  background-image: url('/assets/img/homeHeader.jpg');
  background-size: cover;
  background-position: center bottom;
}
#counselling, #termsSection{
  background-image: url('/assets/img/supervisionHeader.jpg');
  background-size: cover;
  background-position: center bottom;
}
#secondSection{
  background-image: url('/assets/img/oneToOneHeader.jpg');
  background-size: cover;
  background-position: center;
}
#thirdSection{
  background-image: url('/assets/img/supervisionHeader.jpg');
  background-size: cover;
  background-position: center;
}

/*--------------
# Section Titles
----------------*/
.section-title{
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  padding-bottom: 10px;
}
.light-section .section-title {
  color: var(--almost-black-color);
}
.dark-section .section-title {
  color: var(--white-color);
}
.section-title h2 {
  font-style: italic;
  font-family: 'Merriweather', serif;
  font-size: 4rem;
  color: var(--background-color);
  text-shadow: 1px 1px 2.5px var(--shadow-color);
  z-index: 5;
  height: auto;
  padding-left:100px;
  padding-top: 5px;
  font-style:italic;
}
.section-title-h3{
  width: 100%;
  text-align: left;
  position: sticky;
  background-color: #ece8e5;
  font-style: italic;
  font-size: 2.3rem;
  padding-left: 175px;
  padding-bottom: 10px;
  z-index: 3;
  top: 90px;
  margin-top: -2px;
  height: 50px;
}
/*----------
# Text Styles
-------------*/
a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.2s;
}
a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}
h1, h2, h3, h4, h5 {
  font-family: var(--heading-font);
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 1,
    "SHRP" 100;
}
h1{
  font-weight: 900;
  font-size: 3.25rem;
}
h2 {
  font-weight: 800;
  font-size: 3rem;
}
h3 {
  font-weight: 700;
  font-size: 2.25rem;
}
h4 {
  font-weight: 700;
  font-size: 2.15rem;
}
h5 {
  font-weight: 500;
}
.merri{
  font-family: var(--heading-font);
  color: var(--accent-color);
}
.normalText {
  width: 100%;
  font-size: 1.2rem;
  font-family: var(--text-font);
  margin-top: 4px;
  font-weight:550;
}
.normalText a {
  white-space: nowrap;
  font-size: 1.05rem;
}
.quoteRow {
  background-color: #ffffffdd;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
  z-index: 1000;
}
.quoteRow-dark {
  background-color: var(--almost-black-color);
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
}
.quoteDiv {
  margin-top: 1.5dvh;
  width: 90%;
}
.quoteText {
  text-align: center;
  font-size: 1.45rem;
  font-style: italic;
  color: var(--heading-color);
}
.quoteText-dark {
  text-align: center;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--white-color);
  margin: 0;
}
.quoteCredit{
  text-align: end;
  font-weight: 350;
  color: var(--almost-black-color)
}
/*------------
# Hero Section
--------------*/
#hero {
  width: 100%;
  min-height: 50dvh;
  background-image: url('/assets/img/homeHeader.jpg');
  background-size: cover;
  background-position: 50% 65%;
}
.pageTitle{
  letter-spacing: 2.5px;
  word-spacing: 3.5px;
  font-weight: 700;
  font-size: 3.5rem;
  font-style: italic;
  font-family: 'Merriweather', serif;
  padding-top:15dvh;
  text-align: center;
  z-index: 999;
  color: var(--background-color);
  text-shadow: 3px 3px 2.5px var(--shadow-color);
  white-space: nowrap;
  transition: all 0.2s;
}
#termsTitle{
  font-size: 2.5rem;
  padding-top:45dvh;
  margin-bottom: 0;
}
/*---------------
# Meet Liz Section
------------------*/
#meetLiz{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: max-content;
}
#meetLiz .section-title{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ddc2b8;
  color: var(--white-color);
}
#meetLiz h2{
  padding-left: 0;
}
#lizImg{
  width: 50%;
  height: auto;
  top: 0px;
  border-radius: 30px;
  box-shadow: -2.5px 3.5px 5px var(--shadow-color);
}
#meetLiz .card {
  margin: 50px 40px;
  background-color: var(--white-color);
  width: 85%;
  border-radius: 20px;
  box-shadow: -2.5px 3.5px 5px var(--shadow-color);
}
#meetLiz .card-header{
  padding-top: 10px;
  padding-bottom: 5px;
  color: var(--accent-color);
  background-color: var(--background-color);
  border-radius: 20px 20px 0 0;
}
#meetLiz .card-header h5{
  text-align: center;
  font-size: 1.5rem;
}
#meetLiz .card-body{
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0 18px 0;
  background-color: #fff;
  border-radius: 0 0 20px 20px;
}
.accordion-header button{
  background-color: var(--background-color);
  --bs-accordion-btn-bg: #fff;
  --bs-accordion-active-bg: var(--white-color);
  --bs-accordion-active-color: var(--accent-color);
  --bs-accordion-btn-color: var(--accent-color);
  --bs-accordion-active-border-color: rgba(0,0,0,0);
  font-family: var(--heading-font);
  font-style: italic;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.65px;
}

/*-------------------
# Counselling Section
--------------------*/
#counselling{
  width: 100%;
}
#roomImgs{
  top: 140px;
  border-radius: 12px;
  box-shadow: -2.5px 3.5px 5px var(--shadow-color);
}
#image-carousel img{
  border-radius: 12px;
}
#counselling .section-title{
  background-color: #c6cad7;
}
#counselling .row{
  margin: 0;
}
#counselling .row .col-12{
  padding-left: 30px;
}
#counselling .card {
  margin: 50px 40px;
  background-color: var(--white-color);
  width: 85%;
  border-radius: 20px;
  box-shadow: -2.5px 3.5px 5px var(--shadow-color);
}
#counselling .card-header{
  padding-top: 10px;
  padding-bottom: 5px;
  color: var(--accent-color);
  background-color: var(--background-color);
  border-radius: 20px 20px 0 0;
}
#counselling .card-header h5{
  text-align: center;
  font-size: 1.5rem;
}
#counselling .card-body{
  font-size: 1rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0 18px 0;
  background-color: #fff;
  border-radius: 0 0 20px 20px;
}
#oneToOne h3, #couples h3{
  position: sticky;
  top: 106px;
  background-image: url('/assets/img/supervisionHeader.jpg');
  background-position: 50% 65%;
  background-size: initial;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  text-shadow: -3px 3px 5px var(--accent-color);
}
#oneToOne .normalText, #couples .normalText{
  color: var(--white-color);
  font-size: 1.1rem;
}
#counsellingFees{
  min-width: 342px;
  max-width: 502px;
}

/*-------------------
# Supervision Section
--------------------*/
#supervision{
  padding-top: 0;
}
#supervision .section-title{
  background-color: #fafafa;
}
#supervision p{
  width: 75%;
}
#supervisionFees{
  min-width: 342px;
  max-width: 475px;
}
#supervision .card {
  margin: 50px 40px;
  background-color: var(--white-color);
  width: 85%;
  border-radius: 20px;
  box-shadow: -2.5px 3.5px 5px var(--shadow-color);
}
#supervision .card-header{
  padding-top: 10px;
  padding-bottom: 5px;
  color: var(--accent-color);
  background-color: var(--background-color);
  border-radius: 20px 20px 0 0;
}
#supervision .card-header h5{
  text-align: center;
  font-size: 1.5rem;
}
#supervision .card-body{
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0 18px 0;
  background-color: #fff;
  border-radius: 0 0 20px 20px;
  width: 100%;
}
#supervisionFees table tr p {
  white-space: nowrap;
  margin-right: 30px;
}
.row-header{
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-style: italic;
  margin-bottom: 0;
  margin-top:0;
  padding: 0;
  height: 100%;
  border-right: 1px solid black;
  max-width: 132px;
}
/*------------
# EMDR Section
--------------*/
#emdr .section-title{
  background-color: #ece8e5;
  margin-bottom: 0;
  height: 245px;
}
#emdr .section-title h2{
  text-shadow: -1.5px 1.5px 4px var(--dark-purple-color);
}
#emdr .section-title-h3{
  color: var(--white-color);
  text-shadow: -1px 1px 5px var(--dark-purple-color);
}
#emdr h4{
  white-space: nowrap;
  color: var(--white-color);
  text-shadow: -1px 1px 5px var(--dark-purple-color);
}
#emdr .card{
  width: 75%;
}
#emdr .card-body{
  background-color: var(--white-color);
  font-size: 1.2rem;
  /* border-color: var(--light-purple-color); */
}
#emdr .card-footer{
  border: none;
  background-color: var(--white-color);
}
#how{
  transform: translateX(50px);
  z-index: 2;
}

#who{
  transform: translateX(100px);
  z-index:2;
}

/*----------------
# Teaching Section
------------------*/
#teaching{
  padding: 0;
  padding-bottom: 50px;
}
#teaching .section-title{
  background-color: #c6cbd5;
}
#teaching h4{
  font-size: 2.7rem;
}
#teaching p{
  color: var(--dark-purple-color);
  font-size: 1.3rem;
  padding: 20px;
}
#teaching a{
  color: var(--light-purple-color);
}
#teaching a:hover{
  color: var(--accent-color);
}

/*------------
# Fees Section
--------------*/
#fees{
  padding: 0;
  padding-bottom: 50px;
}
#fees .section-title{
  background-color: #d1aaad;
}
#fees .card {
  margin: 50px 40px;
  background-color: var(--white-color);
  width: 85%;
  border-radius: 20px;
  box-shadow: -2.5px 3.5px 5px var(--shadow-color);
}
#fees .accordion{
  border-radius: 20px;
}
#fees .card-header{
  padding-top: 10px;
  padding-bottom: 5px;
  color: var(--accent-color);
  background-color: var(--background-color);
}
#fees .accordion-header button{
  font-size: 2rem;
  font-weight: 700;
}
#fees .accordion, #fees .accordion .accordion-item{
  border: none;
  box-shadow: none;
}
#fees #firstHeader, #fees #firstItem{
  border-radius: 20px 20px 0 0;
}
#fees #lastHeader, #fees #lastItem{
  border-radius: 0 0 20px 20px;
}
#fees .card-header h5{
  text-align: center;
  font-size: 1.5rem;
}
#fees .card .card-header, #fees .card .card-body{
  border: 1.75px solid rgb(108, 117, 125);
}
#fees .card-body{
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0 18px 0;
  background-color: #fff;
}
#feesCollapseOne table{
  margin-left:-10px;
  padding-left: 0;
  margin-right: 0;
  width: 100%;
}

/*---------------
# Contact Section
----------------*/
#contact {
  /* background-image: url('/assets/img/contactHeader.jpg'); */
  background-size: cover;
  background-position: center;
  background-color: var(--almost-black-color);
  padding-bottom: 50px;
  padding-top: 0;
  min-height: 800px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#contact .section-title{
  background-color: var(--almost-black-color);
  padding-bottom: 5px;
}
.contactText{
  color: var(--white-color);
  padding-left: 40px;
  font-size: 1.5rem;
  text-align: left;
}

.contactLabel {
  font-size: calc(14px + 1.25vmin);
  font-weight: 700;
  font-style: italic;
  font-family: 'Merriweather', serif;
  text-align: left;
  margin-top: 7px;
}
#contact a{
  color: var(--light-gray-color);
}
#contactLoadingContainer {
  position: absolute;
}

#messageLabel,
#detailsLabel {
  margin-bottom: -25px;
  margin-top: 10px;
  color: var(--white-color);
}

.myCard {
  width: auto;
  min-width: 50%;
  height: min-content;
  transition: all 0.7s;
  border-radius: 20px;
  isolation: isolate;
  position: relative;
  padding: 5px;
  scale: 0.9;
  transform-origin: top;
}

.myCard:before,
.myCard:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: conic-gradient(from var(--bg-angle) at 50% 50%, var(--glow-1), var(--glow-2), var(--glow-3), var(--glow-1));
  animation: glow 12s infinite linear;
  z-index: -1;
  width: auto;
  height: auto;
  border-radius: 20px;
  transform: translate3d(0, 0, 0);
}

.myCard:before {
  filter: blur(1.25rem);
  opacity: 0.8;
}

.inner {
  margin: -15px;
  width: auto;
  height: auto;
  transition: all 0.7s;
  background: var(--almost-black-color);
  color: var(--text-color);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#contactForm input[type=text],
#contactForm input[type=email],
#contactForm textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: 0px 0px 20px var(--shadow-color);
  border-radius: 0;
  color: var(--text-color);
  background-color: var(--surface-hover-color);
  border: 1px solid color-mix(in srgb, var(--white-color), transparent 5%);
  &:focus {
    border:1px solid var(--accent-color);
    background-color: color-mix(in srgb, var(--light-gray-color), #ffffffaa 50%);
  }
  &:hover {
    border: 1px solid color-mix(in srgb, var(--white-color), var(--accent-color) 50%);
    background-color: var(--light-gray-color);
  }
}

.contact button[type=submit] {
  color: var(--white-color);
  background: var(--surface-hover-color);
  border: 1.5px solid color-mix(in srgb, var(--white-color), transparent 5%);
  padding: 10px 30px;
  transition: all 0.3s;
  border-radius: 50px;
  &:hover {
    border: 1px solid color-mix(in srgb, var(--white-color), var(--accent-color) 50%);
    background-color: var(--light-gray-color);
    border-radius: 20px;
    padding: 10px;
  }
  &:active {
    border:1px solid var(--accent-color);
    background-color: color-mix(in srgb, var(--light-gray-color), #ffffffaa 50%);
  }
}
#buttonSurround{
  position: relative;
  isolation: isolate;
}
#buttonSurround:before,
#buttonSurround:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: conic-gradient(from var(--bg-angle) at 50% 50%, var(--glow-1), var(--glow-2), var(--glow-3), var(--glow-1));
  animation: glow 12s infinite linear;
  z-index: -1;
  width: auto;
  height: auto;
  border-radius: 20px;
  transform: translate3d(0, 0, 0);
}
#buttonSurround:before {
  filter: blur(1.25rem);
  opacity: 0.8;
}

#sendIcon {
  transition: all 0.3s;
  font-size: 1.2rem;
}

.contact button[type=submit]:hover #sendIcon {
  color: var(--accent-color);
  font-size: 1.4rem;
  padding-left: 2px;
  padding-right: 2px;
}

#sendSpan {
  font-size: 1.2rem;
  color: var(--accent-color);
}

.loadingDiv {
  height: min-height;
  width: 75%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loadingDiv span{
  width: min-width;
}

.loadingText {
  --i: 0;
  font-weight: 300;
  z-index: 999999;
  font-family: var(--heading-font);
  font-size: 1.4rem;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 1,
    "SHRP" 100;
  animation: animate-loading-text 1.2s linear infinite;
  animation-delay: calc(var(--i) * 0.1s);
}

.errorText,
.successText {
  --i:0;
  font-size: 2.5rem;
  font-family: Poppins;
  font-weight: 600;
  background-color: var(--background-color);
  animation: success-error-text;
  animation-duration: 1.5s;
  animation-delay: calc(var(--i) * 0.1s);
}
.errorText {
  color: #df1529;
}
#secondLine {
  color: #df1529;
  font-size: 2rem;
  font-family: Poppins;
  font-weight: 600;
  margin-bottom: 5dvh;
}
.successText {
  color: #059652;
}
.fadeOut {
  display: none;
  opacity: 0;
  transition: opacity 2.5s linear 0s;
}
.removeForm{
  display: none;
  transition: all 1.5s linear 0s;
}
#map{
  width: 100%;
  height: 85%;
  border-radius: 25px;
}
#afterContactText{
  width: 100%
}
#numberAndEmail{
  flex-direction: column;
  justify-content: center;
}
/*-------
# Footer
--------*/
.footer {
  color: var(--text-color);
  background-color: #fff;
  font-size: 11.5px;
  padding: 25px 0;
  position: relative;
  border-top: 1px solid color-mix(in srgb, var(--text-color), transparent 90%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.footer .extLink{
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footerDiv{
  width: fit-content;
  padding: 5px;
}
.footer p {
  margin-bottom: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.footer img{
  width: 60%;
  margin-left: 5%;
}
.terms{
  font-size: 0.95rem;
  color: var(--accent-color);
  &:hover{
    color: var(--almost-black-color);
    font-weight: 800;
    scale: 1.015;
  }
}
.terms span{
  text-decoration: underline;
}
.terms:hover span{
  text-decoration: none;
}
.footer .credits {
  margin-top: 4px;
  letter-spacing: 1px;
  font-size: 14.5px;
  text-align: center;
}
#iPortfolio{
  color: black;
}
@media (prefers-color-scheme: dark) {
  footer {
    background-color: #bbb;
  }
}
/*---------------
# Privacy & Terms 
  ---------------*/
.privacyHeading{
  color: var(--surface-color);
}
.privacyLink{
  text-decoration: none;
  color: #787a9c;
  font-weight: 500;
}
.privacyLink:hover{
  text-decoration: none;
  color: #a5a5b3;
  scale: 1.02;
}
#privacyContactCard{
  width:fit-content;
}