/*some vars*/

:root {
    --dark-pink: #5C2743;
    --lighter-pink: #A02C7D;
    --dun: #D7C9AA;
    --lavender: #dddbf1;
    --light-teal: #0B7A75;
    --dark-teal: #19535F;
    --bs-body-font-size: 1.1rem;
    --font-arimo: 'Arimo', sans-serif;
    --font-besley: 'Besley', serif;
    --font-lucida: 'Lunasima', sans-serif;
    --font-serif: 'Source Serif 4', serif;
    --font-arial: 'Arial', sans-serif;
    --bs-accordion-bg: initial;
}

/** Headings **/
h1 {
    font-family: var(--font-serif);
    color: var(--dark-pink);
    font-size: 2.5rem;
    padding-bottom: 2rem;
}

.hero h1 {
    font-size:calc(100% + 2.5vw)
}

h2 {
    font-family: var(--font-serif);
    color: var(--dark-pink);
    font-size: 2.0rem;
    padding-bottom: 2rem;
}

.accordion-item h2 {
    padding-bottom: 0;
}

h3 {
    font-family: var(--font-serif);
    color: var(--dark-pink);
    font-size: 1.5rem;
    padding-bottom: 2rem;
}

.individual-care .heading {
    padding-bottom: 1rem;
}

.individual-care h3 {
    padding: 0 0 0 1rem;
}

.individual-care img {
    width: 3rem;
/** filter changes the color - Use this to calculate the values https://isotropic.co/tool/hex-color-to-css-filter/ **/
filter: invert(94%) sepia(7%) saturate(1138%) hue-rotate(343deg) brightness(90%) contrast(85%);
}

img.locations-icon {
    filter: invert(94%) sepia(7%) saturate(1138%) hue-rotate(343deg) brightness(90%) contrast(85%);
    width: 2.5rem;
    margin-right: 1rem;
}

.bg-individual-care-first .individual-care img {
    filter: invert(24%) sepia(29%) saturate(1106%) hue-rotate(143deg) brightness(97%) contrast(88%);
}

.individual-care .col {
    padding-bottom: 3rem;
}

/** **/

form h2 {
    font-size: 1.5rem;
    padding: 0;
}

form h3 {
    font-size: 1.2rem;
    padding: 0;
}

/** colours **/
.bg-darker {
    background-color: var(--dark-pink);
}

.bg-lighter {
    background-color: var(--lighter-pink);
}

.bg-dark-gradient {
    background: linear-gradient(66deg, #5C2743, #A02C7D);
}

.bg-teal-gradient {
    background: linear-gradient(135deg, #19535F, #0B7A75);
    transition: all 0.2;
}

.what-we-do .card:hover .bg-teal-gradient {
    background: linear-gradient(135deg, rgba(31,100,115,1) 0%, rgba(13,144,138,1) 100%);
}

.about .card:hover .bg-teal-gradient {
    background: linear-gradient(135deg, rgba(31,100,115,1) 0%, rgba(13,144,138,1) 100%);
}

.bg-dark-teal {
    background-color: var(--dark-teal);
}

.bg-light-teal {
    background-color: var(--light-teal);
}

.bg-individual-care-first {
    background-color: #efedff;
}

.bg-lightPink {
    background-color: #eabfcb;
}

.bg-lavender {
    background-color: var(--lavender)!important;
}


/** Navbar **/
.mega-item {
    transition: all 0.4s;
/*    padding-top: 0.5rem;
padding-bottom: 0.5rem;*/
padding: 0.5rem;
}

.mega-item:hover {
    background-color: var(--lavender);
}

a {
    color: var(--dark-teal);
}

.big-shape h2, .big-shape h3 {
    color: #FFFFFF;
}

.pullout-shape.bg-darker a {
    color:  var(--lavender);
}

.big-shape a {
    color:  var(--lavender);
}

.footer a {
    color: var(--lavender);
}

.footer h2 {
    color: #FFFFFF;
    padding: 0;
}

footer {
    font-size: 1rem;
}


/* text shown in the nav bar */
.nav-link {
    font-family: var(--font-serif);
    text-decoration: none;
    color: rgba(var(--bs-light-rgb),var(--bs-text-opacity)) !important;
}

.show .offcanvas-body .nav-link {
    font-size: 1.8rem;
}

.show .offcanvas-body .nav-item {
    border-bottom: 0.5px solid white;
}

.mega-content {
    font-family: var(--font-serif);
    color: grey;
    overflow-y: auto;
}

.mega-content a {
    color: var(--dark-pink);
    text-decoration: none;
}

.mega-content a h5 {
    font-weight: 700;
}

/** shapes **/

/** common shape properties **/
.pullout-shape {
    padding: 3rem;
    color: #FFFFFF;
}

@media (max-width: 991.98px) { .pullout-shape { padding: 1.5rem; } }

.pullout-shape p {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    font-style: italic;
    color: #FFFFFF;
}

/** shape modifiers **/
.curved-all {
    border-radius: 50px;
}

.curved-right-left {
    border-radius: 0 50% 0 50% / 0 50% 0 50%;
}

.curved-left-right-50 {
    border-radius: 50% 0% 50% 0% / 50% 0% 50% 0%;
}

.curved-left-right-25 {
    border-radius: 25% 0% 25% 0% / 25% 0% 25% 0%;
}

.curved-right-left-25 {
    border-radius: 0% 25% 0% 25% / 0% 25% 0% 25%;
}

.curved-left-right-20 {
    border-radius: 20% 0% 20% 0% / 16% 0% 16% 0%  ;
}

.curved-right-left-20 {
    border-radius: 0% 20% 0% 20% / 0% 16% 0% 16%  ;
}

.curved-speech-right {
    border-radius: 10% 10% 10% 0% / 20% 20% 20% 0%;
}

.curved-speech-left {
    border-radius: 10% 10% 0% 10% / 20% 20% 0% 20%;
}

/** top half **/
.homepage-card img {
    border-radius: 0% 25% 0% 0% / 0% 25% 0% 0% ;
}

/** bottom half **/
.homepage-card .card-body {
    border-radius: 0% 0% 0% 25% / 0% 0% 0% 25%;
}

.homepage-card .card-text {
    font-size: 1rem;
    text-decoration: none!important;
}

/** top half **/
.about-card img {
    border-radius: 0% 25% 0% 0% / 0% 25% 0% 0% ;
}

/** bottom half **/
.about-card .card-body {
    border-radius: 0% 0% 0% 25% / 0% 0% 0% 75%;
}

.about-card .card-text {
    font-size: 1rem;
}


.what-is-shape {
    border-style: solid;
    border-width: 5px;
    border-color: #D7C9AA /* dun */;
    padding: 0 4rem;
}

.big-shape {
    background-color: var(--light-teal);
    color: #FFFFFF;
    padding: 0 3rem;
}

@media (max-width: 991.98px) { 
    .big-shape { padding: 1.5rem; } 
    .what-is-shape { padding: 1.5rem }
}


.big-shape h2 {
    padding: 0;
}

/** front page specific**/
.hero h1 {
    padding: 0;
}

.hero-shape {
    border-radius: 0% 0% 10% 55% / 0% 0% 15% 95%;
}

/*.hero-background {
background-image: url('/assets/img/front-page.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: right;
border-radius: 0% 0% 10% 75% / 0% 0% 15% 95%;
}*/

.hero-heading {
    background-color: white;
/*    position: relative;
bottom: 150px;
left: 0;
width: 30vw;
height: 200px;
padding: 3rem;*/
text-color: #A02C7D;
font-style: italic;
}

.expand-arrow {
    width: 20px;
    margin-top: 10px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}

.collapse.show .expand-arrow {
    filter: invert(100%);
    transform: scaleY(-1);
}

.expander-open .expand-arrow {
/*transform: rotate(180deg);*/
transform: scaleY(-1);
}

.hidden {
    display: none;
}

.logo-crop {
    height: 39px;
    object-fit: cover;
    object-position: bottom;
}

.navbar-toggler, .offcanvas-close {
    position: fixed;
    right: 1rem;
    top: 1rem;
}

.offcanvas-close {
    width: 2.5em;
  height: 2.5em;
}


.fixed-top .navbar-toggler {
    position: fixed;
    right: 1rem;
    top: 0.2rem;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    width: 2.5em;
    height: 2.5em;

}


.arrow {
    border: solid #FFFFFF;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 4px;
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}



.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: var(--dark-teal)!important;
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--dark-teal);
}
.accordion-button {
    font-size: 1.3rem;
}


.accordion-button.collapsed:hover, .accordion-button.shade.collapsed:hover {
    background-color: var(--light-teal);
    color: #FFFFFF;
}

.accordion-button.shade {
    background-color: var(--lavender);
}

.accordion-button {
    padding-left: 3rem;
}

.accordion-button:after {
    margin-left: initial;
    position: absolute;
    left: 1rem;
    transform: rotate(-90deg);
    filter: invert(23%) sepia(69%) saturate(2021%) hue-rotate(291deg) brightness(87%) contrast(90%);
}


.accordion-button:not(.collapsed)::after {
    transform: rotate(0deg);
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(330deg) brightness(109%) contrast(107%);
}

.accordion-button:hover:after {
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(330deg) brightness(109%) contrast(107%);   
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}


.header-contacts img.locations-icon {
    width: 2rem;
    
}

.header-contacts a {
    text-decoration: none;
    font-family: var(--font-serif);
    font-size: 0.9rem;
}

.header-contacts {
    flex-direction: column;
    align-items: start;
    gap: 0.5rem;
}

.header-contacts .heading {
    margin-bottom: 1rem;
}

.fixed-top .header-contacts {
    flex-direction: row;
    gap: 2rem;
}

.fixed-top .header-contacts span {
    display:none;
}

.header-contact {
    margin-bottom: 0.5rem;
}

.fixed-top .header-contact {
    margin: 0;
}

.tel {
    color: var(--dark-teal);
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--font-arimo);
}

.fixed-top .header-contacts .heading {
    margin-bottom: 0;
}

@media (max-width: 1199.98px) {
    .mobile-header-icons {
        gap: 6rem;
    }
  .mobile-header-icons img.locations-icon {
    width: 2rem;
    margin-right: initial;
    filter: brightness(0) invert(1);"
  }

  .mobile-header-icons a {
    color: #FFFFFF;
    text-decoration: none;
  }

  .mobile-header-icons span {
    color: #FFFFFF;
    text-decoration: none;
  }
}

.mega-menu {
    max-width: 1000px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

.dropdown-menu::before, nav .phone-dropdown::before {
    bottom: 100%;
    border: solid transparent;
    border-color: hsla(0,0%,100%,0) hsla(0,0%,100%,0) #fff;
    border-width: 12px;
    margin-left: -7px;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;    
}

nav .phone-dropdown::before {
    margin-left: 40px;
}

.dropdown-menu.who-we-are::before {
    left: 195px;
}

.dropdown-menu.what-we-do::before {
    left: 368px;
}

.heading a h3 {
    display: inline-block;
    text-decoration: none;
}

.breadcrumb-container {
    font-size: 0.8rem;
}


.toast {
    --bs-toast-font-size: 0.975rem;
    --bs-toast-max-width: 600px;
    --bs-toast-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.50);
}

.btn-dark-teal {
    background-color: var(--dark-teal);
    color: #FFFFFF;
    border-background-color: none;
}

.btn-dark-teal:hover {
    color: #FFFFFF;
    background-color: #113c45;
    border-background-color: none;
}


  .phone-toggle {
    display: none;
  }

  .phone-label {
    cursor: pointer;
    display: inline-flex;
    align-items: start;
    gap: 0.5rem;
    color: var(--dark-teal);
  }

  .phone-dropdown {
    min-width: 300px;
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    margin-top: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
    z-index: 1000;    
  }


  .phone-dropdown.desktop-nav a{
    font-size: 1rem;
  }

  .phone-toggle:checked + .phone-label + .phone-dropdown {
    display: block;
  }

  .phone-dropdown a {
    display: block;
    text-decoration: none;
    color: var(--dark-teal);
    padding: 1rem;
  }

  .phone-dropdown a:hover {
    background-color: var(--lavender);
  }

  .header-phone-wrapper {
    position: relative;
    display: inline-block;
  }

/** Privacy Policy Styles **/

  .privacy-policy h1 {
  padding: 20px 0; }

.privacy-policy h3 {
  padding: 15px 0 10px 0;
  font-weight: bold; }

.privacy-policy .text-line {
  display: flex; }

.privacy-policy .sub {
  margin-left: 8vw; }

.privacy-policy .number-p {
  width: 10%;
  font-weight: bold; }

.privacy-policy .text-p {
  width: 90%; }

.privacy-policy #definitions {
  border-collapse: collapse;
  width: 100%; }

.privacy-policy #analytics-cookies, .privacy-policy #necessary-cookies {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1rem; }

.privacy-policy #analytics-cookies td, .privacy-policy #necessary-cookies td, .privacy-policy #definitions th {
  border: 1px solid #ddd;
  padding: 8px;
  width: 50%; }

.privacy-policy #definitions td {
  width: 70%; }

.privacy-policy #definitions th {
  width: 30%; }

.privacy-policy #definitions td, .privacy-policy #definitions th {
  border: 1px solid #ddd;
  padding: 8px; }

.privacy-policy tr:nth-child(even) {
  background-color: #f2f2f2; }

.privacy-policy th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: var(--lighter-pink);
  color: #FFFFFF; }

@media screen and (max-width: 768px) {
  .privacy-policy .privacy {
    margin: 0 5vw; }
  .privacy-policy .number-p {
    width: 15%; }
  .privacy-policy .text-p {
    width: 85%; } }