:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #1190f8;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}
/*<----------------------------Header -------------------------------->*/
header {
    display: block;
    unicode-bidi: isolate;
    font-family: Lucida, cursive; 
}
body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}
/*<-- Header CSS ------------------->
  /*-- -------------------------- -->
  <---     Desktop Navigation     -->
  <--- -------------------------- -*/
  /* Small Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #cs-navigation {
      width: 100%;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      padding: 0 1rem;
      background-color: #fff;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      position: fixed;
      z-index: 10000;
    }
    #cs-navigation .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 1.5rem;
    }
    #cs-navigation .cs-toggle {
      display: none;
    }
    #cs-navigation .cs-logo {
      width: 18.4%;
      max-width: 21.875rem;
      height: 4.0625rem;
      /* margin-right auto pushes everything away from it to the right */
      margin: 0 0 0 10px; 
      margin-left: auto;
      padding-left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 100;
    }
    #cs-navigation .cs-logo img {
      width: 110%;
      height: 100%;
      /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
      object-fit: contain;
      margin: 0 300px 0 0px;
    }
    
    #cs-navigation .cs-ul {
      width: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      /* 20px - 36px */
      gap: clamp(1.25rem, 2.6vw, 2.25rem);
      margin-left: 30px; 
    }
    #cs-navigation .cs-li {
      list-style: none;
      padding: 1.6rem 0;
      flex: none;
      margin-left: 10px; 
    }
    #cs-navigation .cs-li-link {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1vw, 1rem);
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--bodyTextColor);
      display: block;
      position: relative;
    }
    #cs-navigation .cs-li-link:hover:before {
      width: 100%;
    }
    #cs-navigation .cs-li-link.cs-active:before {
      width: 100%;
      color: #0000; 
    }
    #cs-navigation .cs-li-link:before {
      content: "";
      width: 0%;
      height: 2px;
      background: var(--primary);
      opacity: 1;
      display: block;
      position: absolute;
      bottom: 0rem;
      left: 0;
      transition: width 0.3s;
    }
    #cs-navigation .cs-button-solid {
      font-size: 1rem;
      font-weight: 700;
      /* 46px - 56px */
      line-height: clamp(2.875em, 5.5vw, 3.5em);
      text-align: center;
      text-decoration: none;
      min-width: 9.375rem;
      margin: 0;
      box-sizing: border-box;
      padding: 0 1.5rem;
      color: #fff;
      background-color: var(--primary);
      border-radius: 0.25rem;
      display: inline-block;
      position: relative;
      z-index: 1;
    }
    #cs-navigation .cs-button-solid:before {
      content: "";
      width: 0%;
      height: 100%;
      background: #000;
      opacity: 1;
      border-radius: 0.25rem;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
    }
    #cs-navigation .cs-button-solid:hover:before {
      width: 100%;
    }
  }
  
  /* Style for the Contact Us button */
  #cs-navigation .cs-contact-button {
    background-color: transparent; 
    color: #007bff; 
    font-weight: bold; 
    padding: 0; 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
  }

  #cs-navigation .cs-contact-button i {
    font-size: 1.2em; 
  }

/*<---------------------------------------------------Background Section---------------------------------------------------------------------------------------------------->

/* Main content with background image */
.background-section {
  height: calc(112vh - 100px);
  background-image: url("https://raisingchildren.net.au/__data/assets/image/0015/52701/what-type-of-child-care-is-best-for-me.jpg"); /* Replace with your image path */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.background-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(31, 30, 30, 0.5); /* Dark overlay */
  filter: blur(5px); /* Apply blur effect */
}

.content {
  position: relative;
  z-index: 1;
  color: white;
}

/* Who we are*/
.body-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
}

.body-section img {
  max-width: 100%;
  height: auto;
  flex: 1;
}

.body-section .info {
  flex: 1;
  padding: 20px;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
} 

/*<---------------------------------------------------------- Scroll down arrow----------------------------------------------------------------------------------------> */

.scroll-down-arrow {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2hldnJvbl90aGluX2Rvd24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiBmaWxsPSJ3aGl0ZSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTE3LjQxOCw2LjEwOWMwLjI3Mi0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwYzAuMjcsMC4yNjgsMC4yNzEsMC43MDEsMCwwLjk2OWwtNy45MDgsNy44M2MtMC4yNywwLjI2OC0wLjcwNywwLjI2OC0wLjk3OSwwbC03LjkwOC03LjgzYy0wLjI3LTAuMjY4LTAuMjctMC43MDEsMC0wLjk2OWMwLjI3MS0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwTDEwLDEzLjI1TDE3LjQxOCw2LjEwOXoiLz48L3N2Zz4=);
  background-size: contain;
  background-repeat: no-repeat;
}

.scroll-down-link {
  position: absolute;
  z-index: 100;
  cursor: pointer;
  height: 60px;
  width: 80px;
  margin: 0 0 0 -40px;
  line-height: 60px;
  left: 50%;
  bottom: 10px;
  color: #FFF;
  text-align: center;
  font-size: 70px;
  text-decoration: none;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
  -webkit-animation: fade_move_down 2s ease-in-out infinite;
  -moz-animation: fade_move_down 2s ease-in-out infinite;
  animation: fade_move_down 2s ease-in-out infinite;
}

@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,20px); opacity: 0; }
}

@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,20px); opacity: 0; }
}

@keyframes fade_move_down {
  0%   { transform:translate(0,-20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,20px); opacity: 0; }
}

.text-container {
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    text-align: center;
    place-items: center;
    align-items: center;
    display: grid;
    transform: translateY(200%);
  }

.welcome-text {
    overflow: hidden;
    white-space: nowrap;
    width: 22ch; /* Adjust this to the length of the text */
    border-right: 2px solid white; 
    animation: typing 3s steps(22, end) forwards, blink-caret 0.75s step-end infinite;
}

.colored-text {
    display: inline-block;  /* Needed for animation */
    background-color: red;  
    animation: color-change 1.5s infinite alternate;
}  

@keyframes typing {
    from { width: 0 }
    to { width: 18ch; } /* Set this to the length of the text */
}

@keyframes blink-caret {
    50% { border-right-color: transparent; }
    100% { border-right-color: white; }
}

@keyframes color-change {
    0% { background-color: red; }
    25% { background-color: blue; }
    50% { background-color: green; }
    75% { background-color: yellow; }
    100% { background-color: red; }
}
  * {box-sizing:border-box}

  .cs-list {
    list-style-type: none; /* Remove default bullets */
    padding-left: 0; 
    margin-bottom: 20px; 
    font-family: 'Roboto', sans-serif; 
  }

  .cs-list li {
    margin-bottom: 20px; 
}

  .cs-content li::before {
    content: "✓"; 
    color: green;
    font-size: 1.2em; 
    margin-right: 10px; 
    list-style-type: none;
  }


  * {box-sizing: border-box;}

/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
    border: 3px solid #000000; /* Add border around the entire slideshow */
    border-radius: 4px; 
}

/* Hide the images by default */
.mySlides {
    display: none;
}


.slide-content {
    display: flex;
    align-items: flex-start; 
}

/* Image styling */
.slide-content img {
    max-width: 40%; 
    height: auto; 
    margin-right: 20px; 
}

/* Text styling */
.text {
    color: #000000;
    font-size: 15px;
    text-align: left; /* Align text to the left */
}


.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: black;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: #000000;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: #ec0606;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}
/*-- -------------------------- -->
<---    Side By Side Reverse    -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-1007 {
      padding: var(--sectionPadding);
  }
  #sbsr-1007 .cs-container {
      width: 100%;
      /* changes to 1280px at desktop */
      max-width: 50rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #sbsr-1007 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      /* changes to 522px at desktop */
      max-width: 36.125rem;
      margin-top: -1rem;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
  }

  #sbsr-1007 .cs-text {
      margin-bottom: 1rem;
  }
  #sbsr-1007 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #sbsr-1007 .cs-spacer {
      width: 100%;
      /* 16px - 24px */
      height: clamp(1rem, 3vw, 1.5rem);
      display: block;
  }
  #sbsr-1007 .cs-button-solid {
      font-size: 1rem;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-decoration: none;
      font-weight: 700;
      text-align: center;
      margin: 0;
      color: #fff;
      min-width: 9.375rem;
      padding: 0 4rem;
      background-color: var(--primary);
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
  }
  #sbsr-1007 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #000;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
  }
  #sbsr-1007 .cs-button-solid:hover:before {
      width: 100%;
  }
  #sbsr-1007 .cs-image-group {
      width: 100%;
  }
  #sbsr-1007 .cs-picture {
      width: 100%;
      height: 16.3125rem;
      border: 12px solid #fff;
      background-color: #fff;
      display: block;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      position: relative;
  }
  #sbsr-1007 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* makes it behave like a background image */
      object-fit: cover;
  }
  #sbsr-1007 .cs-seal {
      /* changes to a clamp(104px - 190px) at desktop */
      width: 6.5rem;
      height: auto;
      /* 104px - 190px */
      /* wrapped clamp in calc function to make the value negative, and multiply by half (.5) the height to it always overlaps the bg image by half its height */
      margin-top: calc(clamp(6.5rem, 12vw, 11.875rem) * -0.5);
      margin-left: auto;
      /* 28px - 120px */
      margin-right: clamp(1.75rem, 10vw, 7.5rem);
      background-color: #fff;
      border: clamp(6px, 0.8vw, 12px) solid #ffffff;
      border-radius: 50%;
      display: block;
      position: relative;
      /* make it rest on top of the bg picture */
      z-index: 10;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-1007 .cs-container {
      align-items: flex-start;
  }
  #sbsr-1007 .cs-flex-group {
      flex-direction: row;
  }
  #sbsr-1007 .cs-text {
      columns: 2;
      column-gap: 1.5rem;
  }
  #sbsr-1007 .cs-spacer {
      display: none;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbsr-1007 .cs-container {
      max-width: 80rem;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      /* 100px - 200px */
      gap: clamp(6.25rem, 13vw, 12.5rem);
  }
  #sbsr-1007 .cs-image-group {
      max-width: 33.875rem;
      display: flex;
      justify-content: flex-end;
      position: relative;
      /* sends it to the right in the 2nd position */
      order: 2;
  }
  #sbsr-1007 .cs-picture {
      height: 28.75rem;
      aspect-ratio: initial;
  }
  #sbsr-1007 .cs-seal {
      /* 104 - 190px */
      width: clamp(6.5rem, 13vw, 11.875rem);
      margin: 0;
      position: absolute;
      top: 50%;
      /* subtract 12px (.75rem) to account for the border */
      left: calc((clamp(6.5rem, 13vw, 11.875rem) * -0.5) + -0.75rem);
      transform: translateY(-50%);
  }
  #sbsr-1007 .cs-content {
      flex: none;
      width: 54%;
      max-width: 33.875rem;
  }
}

/*<------------------------------------------Footer --------------------------------------------------------> */
footer {
    background-color: #ffffff; 
    color: rgb(0, 0, 0); 
    text-align: center; 
    padding: 20px; 
    position: relative; 
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 2px solid black; /* Adds a black horizontal line at the top */
}

footer a {
    color: #f8f8f8; 
    text-decoration: none; 
}

footer a:hover {
    text-decoration: underline; 
}

.social-icons img {
    width: 30px; 
    margin: 0 10px; 
    vertical-align: middle;
}