@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300..700&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Signika+Negative:wght@300..700&display=swap');



/* Above are all fonts used. */

:root {



    /* site colors */
    --white:#FBFAFE;
    --sky-blue:#9BB8DE; 
    --cornflower: #546DA6;
    --deep-blue: #465892;
    --space-cadet: #3D315B;
    --deep-space: #29213D;


    /* mask */
    --angel: 90deg;
    --size: 130px;

}

/* ======================= 

unsure of code prison : 


    .container {
        background-color: #465892;
    }
    


============================ */

/* NAVBAR ICON STYLING */


.container {
    display: inline-block;
    cursor: pointer;
  }
  
  
  .bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #FBFAFE;
    margin: 6px 0;
    transition: 0.4s;
  }
  
  
  .change .bar1 {
    transform: translate(0, 11px) rotate(-45deg);
  }
  
  
  .change .bar2 {opacity: 0;}
  
  
  .change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
  }
  
  
  



/* ===============

HTML, BODY, CONTAINER STYLES

================== */

body {
    background: linear-gradient(var(--space-cadet), var(--deep-space));
    position: relative;
}

main#content {

    width: 95%;
    background-color: var(--deep-blue);

}

footer {

max-height: 250px;

}

footer > img {

width: 8em;
height: 5em;

}


/* ===============

CUSTOM CLASSES

================== */


.heading {

border-style: solid;
border-top: solid 5px;
border-bottom: solid 5px;
border-left: none;
border-right: none;

display: flex;
align-items: center;
justify-content: center;




}



.sub-heading {


    border-style: solid;
    border-top: solid 3px;
    border-bottom: solid 3px;
    border-left: none;
    border-right: none;

    display: flex;
    align-items: center;
    justify-content: center;



}



.full-stretch {
    padding-right: 0 !important;
    padding-left: 0 !important;
    --bs-gutter-x: none !important;
    --bs-gutter-y: none !important;
}

.resources-heading {
    background-color: #9BB8DE;
    border-top: 3px solid #3D315B;
    border-bottom: 3px solid #3D315B;
    color: #29213D;
}


/* site color classes */

/*bg color*/
.bg-cadet {background-color: var(--space-cadet);}
.bg-cornflower {background-color: var(--cornflower);}
.bg-sky {background-color: var(--sky-blue);}
.bg-dBlue {background-color: var(--deep-blue);}
.bg-dSpace {background-color: var(--deep-space);}

/*border color*/

.border-white {border-color: var(--white);}
.border-dSpace {border-color: var(--deep-space);}
.border-dBlue {border-color: var(--deep-blue);}
.border-cornflower {border-color: var(--cornflower);}
.border-sky {border-color: var(--sky-blue); }

/*text color*/

.text-white {color: var(--white);}
.text-dSpace {color: var(--deep-space);}
.text-dBlue {color: var(--deep-blue);}
.text-cornflower {color: var(--cornflower);}
.text-sky {color: var(--sky-blue);}



.cta1 {
  background: linear-gradient(#9BB8DEAD, var(--space-cadet));
}

.cta2 {background: linear-gradient(var(--space-cadet), #9BB8DEAD);}

.font-one {
    font-family: "Signika Negative", serif;
}

.font-two {
    font-family: "Balsamiq Sans", serif;
}




/* ================================


NAVBAR


============================ */

/* Applying a minimum height to elements in the navbar that need it. */
.make-height-please {
  min-height: 80px;
}

nav {
  position: fixed;
  top: 0;
  background-color: rgba(70, 88, 146, 0.75);
}

div.navbar-nav a.nav-item.active {

background-color: var(--space-cadet);
border-color: var(--white);
color: var(--white);


}

div.navbar-nav a.nav-item {

background-color: var(--cornflower);
border-color: var(--white);
color: var(--white);
border-radius: 5px;

}


div.navbar-nav a.nav-item:hover {

    background-color: var(--space-cadet);
    border-color: var(--white);
    color: var(--white);
    
    
    }

span.navbar-brand img, nav img, nav span img {

    width: 5em;
    height: 3em;

}

/* ================================


HEADER, CARAOUSEL AND TESTIMONALS 

============================ */

.carousel-control-prev {
  background: linear-gradient(90deg, rgba(61,49,91,1) 0%, rgba(9,9,121,0) 100%);
  width: 10%;
}

.carousel-control-next {
  background: linear-gradient(90deg, rgba(9,9,121,0) 0%, rgba(61,49,91,1) 100%);
  width: 10%;
}


/* ================================


    

============================ */


p {font-family: "Balsamiq Sans", serif;}

div.content-paragraph {

    border-color: var(--deep-space) !important;
    border-radius: 20px;

  }

div.teacher-content-paragraph {
  border: 3px solid var(--deep-space) !important;
  border-radius: 5px;
}


div.teacher-content-paragraph p {display: block;}


  .fitcontent-paragraph {
    height: fit-content !important;
  }

div.content-paragraph img.img-fluid {

border-radius: 16px;
height: fit-content !important;


}
div.content-paragraph.image-paragraph {


  height: auto !important;


}

div.resources-img{


  max-height: 315px !important;

  
}


img {display: block !important;}

.resizethat-image {
  width: 100px;
  height: 100px;
}

div.galleryFig button {
    display: block;
    
    background-color: var(--sky-blue);
    border: 3px solid var(--sky-blue);
    border-radius: 10px;

    font-family: "Signika Negative", serif;
    color: var(--space-cadet);
   

}

div.galleryFig div.galleryButton {

    background-color: var(--sky-blue);
    border: 3px solid var(--sky-blue);
    border-radius: 10px;

    margin-top: 1em;

    /* mask:;
    -webkit-mask:;
    mask-repeat:;
    -webkit-mask-repeat:;
    */

}

div.galleryFig figure {

    border-color: var(--deep-space);
    border: solid 4px;
    border-radius: 0.375rem;
    
    background-color: var(--white);
    margin: 0px !important;
}

.galleryFig figure img {
  border-bottom: 4px solid var(--deep-space);
}




/* ================================


accordion 

============================ */

.year-one .accordion-collapse, .year-one .accordion-collapse p {
    color: #FBFAFE;
    background-color: #29213D;
    border-width: 0;
  }

  .year-two .accordion-collapse, .year-two .accordion-collapse p {
    color: #FBFAFE;
    background-color: #3D315B;
    border-width: 0;
  }


.accordion-button[aria-expanded="false"] {
	background-color: #9BB8DE;
	color: #3D315B;
}


.accordion-button:hover {
   background-color: #546DA6;
    color: #FBFAFE;
}

  
  .year-one .accordion-button[aria-expanded="true"] {
    background-color: #3D315B;
    color: #FBFAFE;
  }

  .year-two .accordion-button[aria-expanded="true"] {
    background-color: #29213D;
        color: #FBFAFE;
      }
    
  
      .year-one .accordion {
        --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='space-cadet'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        box-shadow: 4px 4px #3D315B, 9px 9px #29213D;
      }
      
        .year-one .accordion .accordion-button:hover {
        --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      }
    
    
        
        .year-one .accordion .accordion-button[aria-expanded="true"] {
        --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      }
    
    
    
    
    
    
     .year-two .accordion {
        --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='space-cadet'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        box-shadow: 4px 4px #29213D, 9px 9px #3D315B;
      }
      
          .year-two .accordion .accordion-button:hover {
        --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        }
        
        .year-two .accordion .accordion-button[aria-expanded="true"] {
        --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      }
    
  
  .year-one .accordion, .year-one .accordion-item {
      border: 2px solid #3D315B;
  }
  
  .year-two .accordion, .year-two .accordion-item {
    border: 2px solid #29213D;
}

  
    .accordion-button:focus {
        outline: none;
        box-shadow: none;
  }
  
  .year-one .accordion-body {
    border-top: 1px solid #3D315B;
  }

  .year-two .accordion-body {
    border-top: 1px solid #29213D;
  }


 .yearone-header-border {
    background-color: rgba(155, 184, 222, 0.6);
    border-top: 3px solid #3D315B;
    border-bottom: 3px solid #3D315B;
    color: #29213D;
  }

  
  .yeartwo-header-border {
    background-color: rgba(155, 184, 222, 0.6);
    border-top: 3px solid #29213D;
    border-bottom: 3px solid #29213D;
    color: #29213D;
  }


  .accordion-button, .accordion-button:active, .accordion-button:hover, .accordion-item, .accordion-item:active, .accordion-item:hover, .accordion-header, .accordion-header:active, .accordion-header:hover, .accordion-body, .accordion-body:active, .accordion-body:hover {
	transition-duration: 0.3s;
	transition-timing-function: ease-in-out;
}










  /* ================================




   Modal Styling


============================ */




.modal-content {
  background-color: #152C40;
  color: #FBFAF2;
}


#modalOne a.modal-button-style, #modalOne a.modal-button-style:active, #modalOne a.modal-button-style:link, #modalOne a.modal-button-style:visited, #modalTwo a.modal-button-style, #modalTwo a.modal-button-style:active, #modalTwo a.modal-button-style:link, #modalTwo a.modal-button-style:visited, #modalThree a.modal-button-style, #modalThree a.modal-button-style:active, #modalThree a.modal-button-style:link, #modalThree a.modal-button-style:visited, #modalFour a.modal-button-style, #modalFour a.modal-button-style:active, #modalFour a.modal-button-style:link, #modalFour a.modal-button-style:visited, #modalFive a.modal-button-style, #modalFive a.modal-button-style:active, #modalFive a.modal-button-style:link, #modalFive a.modal-button-style:visited, #modalSix a.modal-button-style, #modalSix a.modal-button-style:active, #modalSix a.modal-button-style:link, #modalSix a.modal-button-style:visited, #modalSeven a.modal-button-style, #modalSeven a.modal-button-style:active, #modalSeven a.modal-button-style:link, #modalSeven a.modal-button-style:visited {
  background-color: #546DA6;
  color: #FBFAFE;
  border: 2px solid #9BB8DE;
  box-shadow: 6px 5px 10px rgba(9, 0, 15, 0.5);
  transition: all 0.3s linear;
}


#modalOne a.modal-button-style:hover, #modalTwo a.modal-button-style:hover, #modalThree a.modal-button-style:hover, #modalFour a.modal-button-style:hover, #modalFive a.modal-button-style:hover, #modalSix a.modal-button-style:hover, #modalSeven a.modal-button-style:hover {
  background-color: #9BB8DE;
  color: #3D315B;
  border: 2px solid #546DA6;
  transition: all 0.3s linear;
}


.modal-content {
	background-color: #3D315B;
	color: #FBFAFE;
	border: 4px solid #465892;
}


.modal-header {
	border-color: #465892;
}


.btn-close, .btn-close:focus {
	background-color: #546DA6 !important;
    border-color: #546DA6 !important;
    opacity: 1 !important;
    transition: all 0.3s linear;
}

.btn-close:active, .btn-close:hover {
	background-color: #9BB8DE !important;
	border-color: #9BB8DE !important;
	opacity: 1 !important;
}







  /* ================================




Button Styling


============================ */


@keyframes animation-bob-float {
100% {
    transform: translateY(-8px);
}
}








@keyframes animation-bob {
0% {
    transform: translateY(-8px);
}




50% {
    transform: translateY(-4px);
}
100% {
    transform: translateY(-8px);
}
}


@keyframes animation-bob-down {
100% {
    transform: translateY(-8px);
}




50% {
    transform: translateY(-4px);
}
0% {
    transform: translateY(-8px);
}
}








.animation-bob:active, .animation-bob:hover {
   animation-name: animation-bob-float, animation-bob;
    animation-duration: .3s, 1.5s;
    animation-delay: 0s, .3s;
    animation-timing-function: ease-out, ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards;
    animation-direction: normal, alternate;
}


.animation-bob {
	animation-name: animation-bob-down;
    animation-duration: .3s;
    animation-delay: 0s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-direction: normal;
}




.button-styling, .button-styling:focus {
	border: 3px solid #3D315B;
    color: #3D315B;
    background-color: #9BB8DE;
   box-shadow: 6px 5px 10px rgba(9, 0, 15, 0.5);
    transition: all 0.3s linear;
}


.button-styling:active, .button-styling:hover {
	border: 3px solid #9BB8DE;
    color: #9BB8DE;
	background-color: #3D315B;
}




.other-button-styling, .other-button-styling:focus {
	border: 3px solid #FBFAFE;
    color: #FBFAFE;
    background-color: #3D315B;
   box-shadow: 6px 5px 10px rgba(9, 0, 15, 0.5);
    transition: all 0.3s linear;
}




.other-button-styling:active, .other-button-styling:hover {
	border: 3px solid #3D315B;
    color: #3D315B;
	background-color: #FBFAFE;
}














.animation-grow, .animation-grow:focus {
	transition-duration: .3s;
  transition-property: transform;
}


.animation-grow:active, .animation-grow:hover {	
transform: scale(1.1);
}


.social-media-button, .social-media-button:focus {
	border-radius: 50%;
	background-color: #465892;
	color: #9BB8DE;
}




.social-media-button:active, .social-media-button:hover {
	background-color: #29213D;
	color: #9BB8DE;
}




.bi-facebook, .bi-twitter-x, .bi-instagram {
	display: inline-flex;
    margin: 10px;
}




  /* ================================




testimonial


   
============================ */








.testimonials-container {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-color: #9BB8DE;
    background-image: linear-gradient(to bottom, #9BB8DE 87%, #3D315B);
   border-radius: 27px;
}


.testimonials {
	align-items: center;
	justify-content: center;
	display: flex;
	flex-direction: column;
	animation: fade 2s;
}

.testimonial-holder {
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    }






.testimonial-text, .testimonial-rating {
    font-family: "Kalam", serif;
}


.testimonial-text {
	color: #29213D;
}


.testimonial-rating {
	color: #546DA6;
}




.name-holding {
	box-shadow: 6px 5px 10px rgba(9, 0, 15, 0.5);
   	color: #FBFAFE;
    background-color: #546DA6;
    border: 3px solid #FBFAFE;
}


.testimonial-text, .testimonial-rating {
    font-family: "Kalam", serif;
}


@keyframes fade {
    from {
        opacity: 0.4;
    }
    
    to {
        opacity: 1;
    }
}


.numbertext {
  font-size: 0.93;
  opacity: 0.7;
  margin-top: 1.5rem;
  color: #29213D;
}


.prev,
.next {
  display: inline-block;
  background: #546DA6;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  padding: 0.5rem;
  margin: 0.5rem;
  text-align: center;
  color: #FBFAFE;
  transition: 0.3s ease;
}


.prev:hover,
.next:hover {
  cursor: pointer;
  transform: translateY(-4px);
  background-color: #9BB8DE;
  color: #29213D;
}




/* hero image gallery */

.bg-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/hero_banner.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.theabsolute-heading {
  position: absolute;
}




  /* ================================


    responsive css

============================ */

@media only screen and (max-width: 767px) {
  div#caroContain div#carouselATC img, .thegallery-hero {
    height: 200px;
  }
  .thegallery-hero {
    height: 200px;
  }

  .resizethis-image {
    max-width: 100px;
    max-height: 100px;
  }

  div.content-paragraph.image-paragraph {

    height: 500px;


  }

  .heading, .heading h1 {
    font-size: 1.85em;
  }

  .heading h2, .heading h3, .heading h4, .heading h5, .heading h6 {
    font-size: 1.75em;
  }

 .resources-heading {
  font-size: 2.45em;
 }

 .yearone-header-border, .yeartwo-header-border {
  font-size: 2.1em;
 }

  .changing {
    font-size: 1.85em;
  }

  div.fontSizeChange {


    font-size: 1em;

  }

  .cta1 p {
    font-size: 1em;
  }

.index-button {
  font-size: 1.027em;
}

.navbar {
  font-size: 1.038em;
}

.gallery-button {
  font-size: 1em;
}

.resources-button, .contact-button {
  font-size: 1em;
}



.contentp-fontsize, .accordion-body, footer h6, .galleryFig {
  font-size: 1.033em;
}

a.fixbutton-size {
  font-size: 1em;
}



.testimonial-year {
  font-size: 1em;
}

.figure-caption {
  font-size: 1em;
}

.testimonial-name {
	font-size: 1.15em;
}


.testimonial-text {

  font-size: 1em;

}

.accordion-button[aria-expanded="false"] {
	font-size: 0.85em;
}

.year-one .accordion-button[aria-expanded="true"] {
  font-size: 0.85em;
}

.year-two .accordion-button[aria-expanded="true"] {
      font-size: 0.85em;
    }



  

}


/* TABLET */

@media only screen and (min-width: 768px) and (max-width: 991px) {
  div#caroContain div#carouselATC img, .thegallery-hero {
    height: 300px;
  }

  .thegallery-hero {
    height: 250px;
  }

  .fixHeight {min-height: 100%;}

  .resizethat-image, .theAccordionImage, .resizethis-image {
    max-width: 77px;
    max-height: 77px;
  }


  .heading, .heading h1 {
    font-size: 1.975em;
  }

  .heading h2, .heading h3, .heading h4, .heading h5, .heading h6 {
    font-size: 1.875em;
  }

  .yearone-header-border, .yeartwo-header-border {
    font-size: 2.225em;
   }

 .resources-heading {
  font-size: 2.575em;
 }

  .changing {
    font-size: 1.975em;
  }

  div.fontSizeChange {


    font-size: 1.125em;

  }

  .cta1 p {
    font-size: 1.125em;
  }

.index-button {
  font-size: 1.088em;
}

.navbar {
  font-size: 1.1em;
}

.gallery-button {
  font-size: 1em;
}

.resources-button, .contact-button {
  font-size: 1em;
}



.contentp-fontsize, .accordion-body, footer h6, .galleryFig {
  font-size: 1.095em;
}

a.fixbutton-size {
  font-size: 1em;
}



.testimonial-year {
  font-size: 1.038em;
}

.figure-caption {
  font-size: 1em;
}

.testimonial-name {
	font-size: 1.275em;
}


.testimonial-text {

  font-size: 1em;

}

.accordion-button[aria-expanded="false"] {
	font-size: 0.87em;
}

.year-one .accordion-button[aria-expanded="true"] {
  font-size: 0.87em;
}

.year-two .accordion-button[aria-expanded="true"] {
      font-size: 0.87em;
    }

}

@media only screen and (min-width: 992px) {
  div#caroContain div#carouselATC img {

    height: 500px;
  }

  .fixHeight {min-height: 100%;}


  .fixthatwidth {
    width: fit-content;
  }

  .lg-flexRow {
    flex-direction: row;
    flex-wrap: wrap;
  }

  div.lg-flexRow div.content-paragraph.image-paragraph {
    display: flex;
    flex-shrink: 3;


  }

  .thegallery-hero {
    height: 450px;
  }

  .resizethis-image, .theAccordionImage, .resizethat-image {
    max-width: 100px;
    max-height: 100px;
  }

  .heading, .heading h1 {
    font-size: 2.1em;
  }

  .heading h2, .heading h3, .heading h4, .heading h5, .heading h6 {
    font-size: 2em;
  }

  .yearone-header-border, .yeartwo-header-border {
    font-size: 2.35em;
   }

 .resources-heading {
  font-size: 2.7em;
 }

  .changing {
    font-size: 2.1em;
  }

  div.fontSizeChange {


    font-size: 1.25em;

  }

  .cta1 p {
    font-size: 1.25em;
  }

.index-button {
  font-size: 1.15em;
}

.navbar {
  font-size: 1.15em;
}

.gallery-button {
  font-size: 1em;
}

.resources-button, .contact-button {
  font-size: 1em;
}



.contentp-fontsize, .accordion-body, footer h6, .galleryFig {
  font-size: 1.22em;
}

a.fixbutton-size {
  font-size: 1em;
}



.testimonial-year {
  font-size: 1.1em;
}

.figure-caption {
  font-size: 1em;
}

.testimonial-name {
	font-size: 1.4em;
}


.testimonial-text {

  font-size: 1.17em;

}

.accordion-button[aria-expanded="false"] {
	font-size: 0.73em;
}

.year-one .accordion-button[aria-expanded="true"] {
  font-size: 0.73em;
}

.year-two .accordion-button[aria-expanded="true"] {
      font-size: 0.73em;
    }





}