@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Quicksand:wght@300..700&display=swap");
/* Heading font - Funnel Display */
/* Body font - Quicksand */

/* Colour Pallette */
:root {
  --primary-color: #3f4043; /* deep navy */
  --secondary-color: #1a8f8f; /* teal */
  --secondary-strong: #0d4f4f; /* darker teal */
  --background-color: #ced1e3; /* soft lilac-grey */
  --text-color: #333333; /* dark grey */
  --accent-color: #24c9c9; /* bright aqua */
  --lightergrey: #f6f6f6; /* very light grey */
}

/* Global styles */

html {
  scroll-behavior: smooth; /* smooth scrolling for anchor links */
}

body {
  padding-top: 72px; /* space for fixed navbar */
  background-color: var(--background-color);
  font-family: "Quicksand", sans-serif;
}

section {
  scroll-margin-top: 80px; /* so anchors don't hide behind navbar */
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--primary-color) !important;
  font-family: "Funnel Display", sans-serif;
}

.h2 {
  text-transform: lowercase;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
}

.text-primary {
  color: var(--text-color) !important;
  font-weight: 700 !important; /* make text readable for accessibility & different screen sizes */
}

/* Navbar */

.navbar {
  background-color: var(
    --secondary-color
  ); /* navbar custom styling, color, text */
  text-transform: lowercase;
  font-weight: bold;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
  color: var(--background-color) !important; /* navbar link hover color */
}

/* Logo styling */

.brand-icon {
  font-size: 2.5rem;
  color: #ffffff;
}

.brand-logo-hover:hover .navbar-brand,
.brand-logo-hover:hover .brand-icon {
  color: var(--text-color-color) !important; /* logo hover color */
}

.lighter-weight {
  font-weight: lighter;
}

/* Grid visualisation for layout debugging  */

/* .container,
.container-fluid {
  border: solid 2px rgb(35, 37, 35);
}
.row {
  border: solid 2px rgb(94, 95, 95);
}

.col,
.col-12,
.col-md-6,
.col-md-5 {
  border: solid 2px rgb(128, 128, 129);
} */

/* Header and hero */

.hero {
  min-height: 60vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: url(../images/hero3.png) no-repeat center center;
  background-size: cover;
}

.hero-overlay {
  background-color: rgba(51, 51, 51, 0.55);
  padding: 2rem;
  border-radius: 20px;
}

.hero h1,
.hero p {
  color: var(--background-color) !important;
}

.hero p {
  font-weight: bold;
}

.content-wrapper {
  max-width: 900px;
  margin: 0 auto; /* centers the content */
  padding: 0 1.5rem; /* mobile-friendly side padding */
}

/* Buttons */

.custom-btn-filled {
  background-color: var(--secondary-strong);
  color: var(--background-color);
  border: solid 2px var(--background-color);
}

.custom-btn-filled:hover,
.custom-btn-filled:focus,
.custom-btn-filled:active {
  background-color: var(--background-color);
  color: var(--primary-color);
  border: solid 2px var(--secondary-strong);
}

.custom-btn-outline {
  background-color: var(--background-color);
  color: var(--secondary-strong);
  border: solid 2px var(--background-color);
}

.custom-btn-outline:hover,
.custom-btn-outline:focus,
.custom-btn-outline:active {
  background-color: var(--secondary-strong);
  color: var(--background-color);
  border: solid 2px var(--background-color);
}

/* Specific Sections Styling */

/* Cards */

#demystifying {
  margin-top: -1rem; /* adjust spacing for section heading under hero. */
}

.card {
  background-color: var(--lightergrey);
  border-radius: 20px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  font-size: 0.9rem;
}

.card:hover,
.card:focus,
.card:active {
  -webkit-box-shadow: 0 1.5rem 1rem var(--secondary-color);
  box-shadow: 0 1.5rem 1rem var(--secondary-color);
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}

.card-title {
  display: none;
}

/* Make a difference */

.carousel-wrapper {
  max-width: 450px; /* scale the images in the carousel */
  margin: 0 auto; /* center it within its column */
}

#difference img {
  width: auto;
  max-width: 100%;
  border-radius: 20px;
}

/* Practical tips */

.list-boxes {
  border-radius: 20px;
}

.list-group-item {
  border: none;
  font-size: 1.2rem;
}

.list-group-item:hover {
  background-color: var(--secondary-strong);
  color: #ffffff; /* Changed text colour on hover to meet contrast standards */
}

.list-group-item .fw-bold {
  margin-bottom: 0.5rem;
}

/* Resources */

#resources a {
  color: var(--text-color);
  font-weight: bold;
  text-decoration: none;
}

.resource-icon {
  font-size: 4rem;
  color: var(--secondary-color) !important;
}

.resource-icon:hover {
  color: var(--background-color) !important;
}

/* Newsletter form */

.newsletter-form .form-control {
  margin-bottom: 0.75rem;
}

.form-control:focus {
  border-color: var(--accent-color);
  -webkit-box-shadow: 0 0 0 0.2rem rgba(36, 201, 201, 0.25);
  box-shadow: 0 0 0 0.2rem rgba(36, 201, 201, 0.25);
}

/* Footer */

#contact-footer {
  background-color: var(--text-color);
  color: var(--background-color);
}

.contactheading-display {
  font-weight: 500;
  font-size: 1.3rem;
  text-transform: lowercase;
}

.social-icon {
  font-size: 2rem;
  color: var(--secondary-color);
}

.social-icon:hover {
  color: var(--background-color);
}

.address {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.copyright-text {
  font-size: 0.8rem;
  font-weight: 450;
}

/* Success page */

.hero-success {
  min-height: 70vh;
}