:root {
  --color-paper: #f7f2e6;
  --color-charcoal: #3e5469;
  --color-dark-charcoal: #273542;
  --color-mist: #ACBDC0;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-transparent: transparent;
  --color-red: red;
  --color-green-yellow: #adff2f;
  --color-goldenrod: #daa520;
  --color-light-gray: #eeeff0;
  --color-gray: #eee;
  --color-dark-gray: #222222;
  --color-slate: #403F3F;
  --color-gray-medium: #686868;
  --color-blue-border: #b7e7f3;
  --color-blue-teal: #53A2BE;
  --color-green: #0b7600;
  --color-green-shadow: rgba(43, 145, 111, 0.96);
  --color-lime: #84fab0;
  --color-sky: #8fd3f4;
  --color-aqua: #02AAB0;
  --color-teal: #00CDAC;
  --color-mint: #C2FFD8;
  --color-indigo: #465EFB;
  --color-purple: #614385;
  --color-purple-blue: #516395;
  --color-yellow: #f6d365;
  --color-coral: #fda085;
  --color-light-green: #e3ffe7;
  --color-light-blue: #d9e7ff;
  --color-lilac: #d9afd9;
  --color-light-cyan: #97d9e1;
  --color-gold: #d4a024;
  --color-highlight: #fce669;
  --color-translucent-green: #a7f7d575;
  --color-footer-peach: #ffecd2;
  --color-footer-gold: #eac37b;
  --color-darkest: #161813;
  --color-near-black: #000;
  --color-deep-gray: #222222;
  --color-red-tint: rgba(180,80,60,0.12);
  --color-green-tint: rgba(60,120,60,0.12);
  --color-white-08: rgba(255, 255, 255, 0.08);
  --color-white-15: rgba(255,255,255,0.15);
  --color-white-35: rgba(255, 255, 255, 0.35);
  --color-white-35-tight: rgba(255,255,255,0.35);
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-black-08: rgba(0,0,0,0.08);
  --color-black-42: rgba(0, 0, 0, 0.42);
  --color-black-84: rgba(0,0,0,0.84);
  --color-charcoal-98: rgba(39, 53, 66, 0.98);
  --color-dark-overlay-0: rgba(22, 24, 19, 0);
  --color-dark-overlay-22: rgba(22, 24, 19, 0.22);
  --color-dark-overlay-42: rgba(22, 24, 19, 0.42);
  --color-dark-overlay-47: rgba(22, 24, 19, 0.47);
  --color-dark-overlay-69: rgba(22, 24, 19, 0.69);
  --color-dark-overlay-76: rgba(22, 24, 19, 0.76);
  --color-dark-overlay-90: rgba(22, 24, 19, 0.9);
  --color-dark-overlay-99: rgba(22, 24, 19, 0.99);
}

html{
    scroll-behavior: smooth;
}


body {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
    /* Base vintage paper tone */
  background-color: var(--color-paper);
}

.jakLight {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

.jakSemi {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.jakStrong {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

.jakItalic {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
}

.jakTagline {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: italic;
}

.skip-link {
  position: absolute;
  top: -3em;
  background: var(--color-white);
}
.skip-link:focus {
  top: 0;
}

.aquaBG {
  background-color: var(--color-aqua);
}


.darkBG {
  background-color: var(--color-charcoal);
  color: var(--color-mist);
  z-index: 30;
  margin-top: none;
}

.textDark {
  color: var(--color-charcoal);
}

.clear-dark-text {
   text-shadow: 0 0 2px rgba(255, 255, 255, 0.8), 0 0 4px rgba(255, 255, 255, 0.5);
}


.textShade {
  text-shadow: 0px 0px 2px rgba(0,0,0,0.72);
}

.grad1BG {
  background: linear-gradient( 135deg, var(--color-mint) 10%, var(--color-indigo) 100%);
}

.sunnyGradBG {
  background-color: var(--color-yellow);
  background-image: linear-gradient(120deg, var(--color-yellow) 0%, var(--color-coral) 100%);
}


.lightBG {
  background: linear-gradient(90deg, var(--color-light-green) 0%, var(--color-light-blue) 100%);
}

.pinkishGradBG {
      background-color: var(--color-lilac);
    background-image: linear-gradient(0deg, var(--color-lilac) 0%, var(--color-light-cyan) 100%);
}
.warmPineGradBG {
  background-color: #ebbba7;
background-image: linear-gradient(185deg, #ebbba7 10%, #cfc7f8 100%);
}

.fbBtn {
 color: var(--color-blue-teal);
}

.fbBtn:hover {
  color: var(--color-light-blue);
}

.forestBG {
  background-color: #df89b5;
background-image: linear-gradient(0deg, #df89b5 0%, #bfd9fe 100%);
}
/* GRAD BUTTONS */

.btn-grad2 {
  background-image: linear-gradient(to right, #00d2ff 0%, #3a7bd5 51%, #00d2ff 100%);
}

.btn-grad2 {
  margin: 4px;
  padding: 15px 45px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
  outline: none;
  border: none;
  width: 50%;
}

.btn-grad2:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}

/* NAVBAR (Bootstrap + Scroll */

.navbar.bg{
    background: var(--color-charcoal);
}

a.nav-link {
  color: var(--color-white);
}


/* MASONRY PIC STYLE */

.masonryBorder {
    width: 95%;
    height: auto;
    border-radius: 20px;
}

@keyframes fadeInUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.fadeInUp-animationDR {
  animation: 1.8s fadeInUp;
}

.fadeInUp-animationTag {
  animation: 2.2s fadeInUp;
}

.fadeInUp-animationP {
  animation: 2.6s fadeInUp;
}

.btn-grad {
  background-image: linear-gradient(to right, var(--color-purple) 0%, var(--color-purple-blue) 51%, var(--color-purple) 100%);
}

.btn-grad {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: var(--color-white);
  box-shadow: 0 0 10px var(--color-gray);
  border-radius: 10px;
  display: block;
  outline: none;
  border: none;
}

.btn-grad:hover {
  background-position: right center;
  color: var(--color-white);
  text-decoration: none;
}

#homeBookChat {
  position: fixed;
  bottom: 1%;
  right: 1%;
  z-index: 3;
}

.serviceIcons {
    color: var(--color-white);
    background: var(--color-charcoal);
}



.lightButton {
  width: 10%;
}

.sectionEmail {
  background-color: var(--color-charcoal);
  color: var(--color-white);
 }

section.sectionSocials {
  padding: 6% 0;
  }



.sectionTestimonials {
  padding: 8% 0;
}


footer {
background-color: var(--color-footer-peach);
background-image: linear-gradient(179deg, var(--color-footer-peach) 0%, var(--color-footer-gold) 48%);
 
  color: var(--color-charcoal);
  padding: 4% 2%;
}

footer a {
  color: var(--color-charcoal);
}

#footerTopRow {
  margin-bottom: 4%;
}

#footerTopRow a:hover {
  color: var(--color-blue-teal);
}

#btnPay {
  background-color: var(--color-charcoal);
  color: var(--color-white);
}

#btnPay:hover {
  background-color: var(--color-aqua);
}

#footerCentreRow {
  margin-bottom: 4%;
}

#footerCentreRow a:hover {
  color: var(--color-blue-teal);
}

.footerLinks a {
  padding-bottom: 10%;
  font-weight: bold;
}

.footerLinks a:hover {
  color: var(--color-blue-teal);
}


.footerLogo img {
  max-height: 140px;
  width: auto;
}

#outbritainImg {
  width: 105px;
}