body {font-family: 'Montserrat Display' serif !important;}

/* make sure we have smooth scrolling*/
html {
scroll-behavior: smooth;
}

/* Some background colours */
.bg-grey {
	background-color: #e3e3e3 !important;
}
.bg-white {
  background-color: #ffffff !important;
}

/*****************************************
general site wide settings and useful code
******************************************/

/*corporate background image for the donation and hero banner*/
.corpbg{background-image: url("../img/Ithinc background 768x750.jpg");}

h5{font-size: 0.9rem}

/*centre images within the column*/
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}

/**********************************************
Styling for TIny SLider in Testemonials Section
***********************************************/
#testimonials-section{
	height: auto;
	background-color: #e3e3e3;
	color: black;
}

.container{
	width: 1600px;
	margin: auto;
}

.subcontainer{
	width: 85%;
	margin: auto;
}

.testemonials-wrapper{
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 25px;
	padding-top: 10px;
	position: relative;
}

.slider-wrapper{
	width: 100%;
}

.slide{
	width: 100%;
	line-height:1.25;
	font-style: italic;
	padding: 0 40px;
}

.slide p{
	padding-bottom: 10px;
}

/*Let's make the font a bit bigger for the names on testimonials */
#testimonials-section strong{font-size: 1.5rem}

#controls .previous, .next{
	padding: 2px;
	width: 50px;
	color:black;
	cursor: pointer;
	border: 1px none black;
	border-color: black;
	border-radius: 50%;
	transition: 0.7s ease-in-out;
	background-color: #e3e3e3;
}

.previous{
	left:0%;
	margin:15px;
}
.next{right:0%}

#controls{font-size: 2rem}

.tns-nav{text-align: center}

.tns-nav button{
	border: none;
	Padding: 8px;
	border-radius: 50%;
	background-color: gray; 
	margin-left: 15px;
}

.tns-nav .tns-nav-active{
	background-color: black;
}

@media(max-width:1600px){
	.container{width:100%;}
}


/* IMAGE GRID STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.image-grid figure {
  margin-bottom: 0;
}

.image-grid img {
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s;
}

.image-grid a:hover img {
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.35);
}

.intro {
  font-size:16px;
  max-width:500px;
  margin:0 auto 40px;
  text-align: center;
}

.services {
  font-size:16px;
  max-width:1000px;
  margin:0 auto 40px;
  text-align: center;
}



/* LIGHTBOX STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.lightbox-modal .modal-content {
  background: #242424;
}

.lightbox-modal .btn-close {
  position: absolute;
  top: 20px;
  right: 18px;
  font-size: 1.2rem;
  z-index: 10;
}

.lightbox-modal .modal-body {
  display: flex;
  align-items: center;
  padding: 0;
  text-align: center;
}

.lightbox-modal img {
  width: auto;
  max-height: 100vh;
  max-width: 100%;
}

.lightbox-modal .carousel-caption {
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(36, 36, 36, 0.75);
}

.lightbox-modal .carousel-control-prev,
.lightbox-modal .carousel-control-next {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: auto;
}

.lightbox-modal .carousel-control-prev {
  left: 10px;
}

.lightbox-modal .carousel-control-next {
  right: 10px;
}


/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 60px;
  display: flex;
  align-items: center;
  font-size: 1rem;
  padding: 5px;
  background: rgba(255, 255, 255, 0.65);
}

.page-footer a {
  display: flex;
  margin-left: 9px;
}
/**************************************************
Handle top margin offset to allow for sticky header
***************************************************/

section {scroll-margin-top: 380px;} /*this is to compensate for the sticky menu size so that anchors appear directly below the sticky menu when called. Changes depending on height of the navbar and hamburger menu */


/***************
Nav Bar Settings
***************/
nav{
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
}

nav p{
	margin:0px;
}
/*nav h1{
	font-size: 20px;
	padding: 0px 0px 0px 10px;
}*/

.navbar-nav {margin-left: auto;}

.navbar-brand {
    position: relative;
    background: url("../img/ithink logo.png");
    width: 200px;
	height:45px;
    left: 10px;
    background-size: contain;
	background-repeat: no-repeat;
}

/***********
Hero Section
************/
/*#hero .container{
		height: 50px; 
}*/

#hero h1{
	font-size:2rem; 			/* Change the height of the heading in the hero section */
	margin: 75px 0px 0px 0px; 	/*margins (top,right, bottom, left) around the header - might need setting for each device */
	color: white;  				/*just the colour of the text in the block */
}

#hero h3{
	padding-bottom: 5px;
}

#hero p{
	color: white;
	font-size: 1.2rem
}

/*************
Button Styling
**************/
.btn{ /*styling for all buttons */
	width:fit-content;
	padding: 5px 20px 5px 20px ;
	border-radius: 50px; /*this rounds the edges of the buttons*/
	background-color: #e7527f; /*choose a button colour*/
	border: white;
}

.btn:hover{
	background-color: mediumpurple; /*change colour when a mouse hovers over the button */
}


/*********************
Events Section Styling
**********************/
/*styling for the hyperlinks - basically turn it all off*/
#events-section a, a:visited, a:hover, a:active {
  text-decoration: none; 
}


/*********************
Info Section Settings
*********************/
/*These two sections are concerned with fading the section in slowly*/
@keyframes infosectionfade {
   0% {opacity: 0.3;}
   100% {opacity: 1;}
}

#info-section div {
  animation-name: infosectionfade;
  animation-duration: 2s;
}

#action-section h3{
	color: black;
	font-size: 2rem
}

#footer a{color:white}

/*#volunteer-section a{color:white} REDUNDANT*/

/*What follows changes the css for diffent platforms. Above is for smallest - mobile portrait and then at each step we might need to change one or two things */

/* Tablet View - 768 and above */

@media (min-width: 768px) {
	.text-large{font-size:1.5rem}
	h5{font-size: 0.6rem}
	nav h1{font-size: 1.2rem}
	#hero h1{font-size: 2.5rem}
	section {scroll-margin-top: 400px;}
	.corpbg{background-image: url("../img/Ithinc background 992x750.jpg");}
	.navbar-brand {
		position: relative;
		background: url("../img/ithink logo.png");
		width: 337px;
		height:75px;
		left: 10px;
		background-size: contain;
		background-repeat: no-repeat;
		}
}

/* Desktop View - 992 and above*/

@media (min-width: 992px) {
	.navbar {padding: 5px 15px;}
	h5{font-size: 0.9rem}
	nav h1{font-size: 1rem}
	#hero h1{font-size: 3.5rem}
	section {scroll-margin-top: 75px;}
	.corpbg{background-image: url("../img/Ithinc background 1200x750.jpg");}
}

/* * Large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
	h5{font-size: 0.9rem}
	nav h1{font-size: 1.8rem}
	#hero h1{font-size: 4rem; padding-top:60px}
	section {scroll-margin-top: 75px;}
	.corpbg{background-image: url("../img/Ithinc background 2500x750.jpg");}
	navbar-brand {
		position: relative;
		background: url("../img/ithink logo.png");
		width: 450px;
		height: 100px;
		left: 10px;
		background-size: contain;
		background-repeat: no-repeat;
		}
}