@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800';
/* Global Styles
********************************************************************* */

body {
	margin: 0px;
	padding: 0px;
	font-family: 'Open Sans';
	font-size: 17px;
	font-weight: 350;
	color: #3f3d3d;
}


/*  dorman trial for UX optimisation - might pull */

html, body {
  scroll-behavior: smooth;
}



.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }

.column, .columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

.column, .columns {
  margin-left: 4%; }

.column:first-child, .columns:first-child {
  margin-left: 0; }

.one.column, .one.columns {
  width: 4.66667%; }

.two.columns {
  width: 13.33333%; }

.three.columns {
  width: 22%; }

.four.columns {
  width: 30.66667%; }

.five.columns {
  width: 39.33333%; }

.six.columns {
  width: 48%; }

.seven.columns {
  width: 56.66667%; }

.eight.columns {
  width: 65.33333%; }

.nine.columns {
  width: 74%; }

.ten.columns {
  width: 82.66667%; }

.eleven.columns {
  width: 91.33333%; }

.twelve.columns {
  width: 100%;
  margin-left: 0; }

.one-third.column {
  width: 30.66667%; }

.two-thirds.column {
  width: 65.33333%; }

.one-half.column {
  width: 48%; }

.offset-by-one.column, .offset-by-one.columns {
  margin-left: 8.66667%; }

.offset-by-two.column, .offset-by-two.columns {
  margin-left: 17.33333%; }

.offset-by-three.column, .offset-by-three.columns {
  margin-left: 26%; }

.offset-by-four.column, .offset-by-four.columns {
  margin-left: 34.66667%; }

.offset-by-five.column, .offset-by-five.columns {
  margin-left: 43.33333%; }

.offset-by-six.column, .offset-by-six.columns {
  margin-left: 52%; }

.offset-by-seven.column, .offset-by-seven.columns {
  margin-left: 60.66667%; }

.offset-by-eight.column, .offset-by-eight.columns {
  margin-left: 69.33333%; }

.offset-by-nine.column, .offset-by-nine.columns {
  margin-left: 78%; }

.offset-by-ten.column, .offset-by-ten.columns {
  margin-left: 86.66667%; }

.offset-by-eleven.column, .offset-by-eleven.columns {
  margin-left: 95.33333%; }

.offset-by-one-third.column, .offset-by-one-third.columns {
  margin-left: 34.66667%; }

.offset-by-two-thirds.column, .offset-by-two-thirds.columns {
  margin-left: 69.33333%; }

.offset-by-one-half.column, .offset-by-one-half.columns {
  margin-left: 52%; }

.container:after, .row:after, .u-cf {
  content: "";
  display: table;
  clear: both; }

@media (max-width: 550px) {
  .column, .columns {
    margin-left: 0; }
  .container {
    width: 80%; }
  article {
    padding: 3rem 0; }
  .one.column, .one.columns {
    width: 100%; }
  .two.columns {
    width: 100%; }
  .three.columns {
    width: 100%; }
  .four.columns {
    width: 100%; }
  .five.columns {
    width: 100%; }
  .six.columns {
    width: 100%; }
  .seven.columns {
    width: 100%; }
  .eight.columns {
    width: 100%; }
  .nine.columns {
    width: 100%; }
  .ten.columns {
    width: 100%; }
  .eleven.columns {
    width: 100%; }
  .twelve.columns {
    width: 100%;
    margin-left: 0; }
  .one-third.column {
    width: 100%; }
  .two-thirds.column {
    width: 100%; }
  .one-half.column {
    width: 100%; } }

a {
	color: #FFFFFF;
}
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}
/* Typography
********************************************************************* */

h1, h2, h3, h4, h5, h6 {
	font-weight: 300;
	margin: 0;
}
h1 {
	font-size: 44px;
}
/* Header Section
********************************************************************* */




header {
	/*background: #0469A7;*/
	min-height: 800px;
	padding: 0px 0 50px 0;
	box-sizing: border-box;
	
	/*background-image: url(https://jeffbredenkamp.neocities.org/bg.jpg);*/
	
	background-image: url(../resources/uploads/bg.png);
	background-size: cover;
}




header h1 {
	font-size: 66px;
	color: #FFFFFF;
	padding-top: 70px;
	font-weight: 600;
}
header h2 {
	color: #FFFFFF;
}
header p {
	color: #FFFFFF;
}
.hero {
	margin-top: 40px;
}
.appstorebutton {
	display: inline-block;
	max-height: 50px;
	width: auto;
	padding-top: 40px;
	padding-right: 10px;
}







.phone {
	max-width: 318px;/* dorman increased this from 220 px on trial */
	height: auto;
	/*float: right;*/
}






.logo {
	position: absolute;
	left: 20px;
	top: 20px;
	max-width: 100px;
	height: auto;
}
.main_nav {
	top: 0px;
	max-height: 80px;
	z-index: 999;
	width: 100%;
	padding-top: 10px;
	overflow: hidden;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	padding-bottom: 6px;
}
.socialIcons {
	color: #FFFFFF;
	font-size: 28px;
}

@media only screen and (max-width: 766px) {
.main_nav {
	padding-top: 10px;
}
}
.open-nav {
	max-height: 420px !important;
}
nav {
	width: 100%;
	margin-top: 5px;
}

@media only screen and (max-width: 766px) {
nav {
	width: 100%;
}
}
nav ul {
	list-style: none;
	overflow: hidden;
	/*text-align: right;*/
	padding: 0;
}




@media only screen and (max-width: 766px) {
    nav ul {
        overflow: visible !important;
        max-height: none;
        display: block;
        padding-top: 0;
        margin-bottom: 22px;
        text-align: right;
        width: 100%;
    }
}





nav ul li {
	display: inline-block;
	margin-left: 35px;
	line-height: 1.7;
	letter-spacing: 1px;
}

@media only screen and (max-width: 766px) {
nav ul li {
	width: 100%;
	padding: 7px 0;
	margin: 0;
}
nav ul li:first-child {
	margin-top: 70px;
}
}
nav ul a {
	text-transform: uppercase;
	font-size: 12px;
	text-decoration: none;
}
nav ul a:hover {
	color: #CFCFCF;
}
.mobile-toggle {
	display: none;
	cursor: pointer;
	font-size: 20px;
	position: absolute;
	right: 20px;
	top: 20px;
	width: 30px;
}

@media only screen and (max-width: 766px) {
.mobile-toggle {
	display: block;
}
}
.mobile-toggle span {
	width: 30px;
	height: 4px;
	margin-bottom: 6px;
	background: #ffffff;
	display: block;
}
/* About Section
********************************************************************* */

#about {
	background: #EDE9E9;
	padding: 80px 0 80px 0;
	min-height: 400px;
}
/* Features Section
********************************************************************* */

#features {
	padding: 80px 0 80px 0;
	min-height: 400px;
}
.phoneFeature {
	max-width: 220px;
	height: auto;
	display: block;
	margin: 0 auto;
}
#features h2 {
	padding-top: 20px;
}
/* Contact Section
********************************************************************* */

#contact {
	background: #F6F6F6;
	padding: 80px 0 80px 0;
	min-height: 400px;
}
form {
	font-family: 'Open Sans';
	box-sizing: border-box;
	margin-top: 50px;
}
textarea {
	float: left;
	width: 100%;
	max-width: 100%;
	border: none;
	margin: 0.5rem 0;
	padding: 0.5rem;
	border-radius: 0.3rem;
	background: #ffffff;
	color: #525252;
	font-family: 'Open Sans';
	font-size: 18px;
}
input {
	float: left;
	width: 100%;
	max-width: 100%;
	border: none;
	margin: 0.5rem 0;
	padding: 0.5rem;
	border-radius: 0.3rem;
	background: #ffffff;
	color: #525252;
	font-family: 'Open Sans';
	font-size: 18px;
}
input[type=submit], textarea[type=submit] {
	background: #0D8CB0;
	color: #fff;
	width: auto;
}
input::placeholder, textarea::placeholder {
 color: #525252;
}
input.error, textarea.error {
	background: #AD4747;
	color: #fff;
}
input.error::placeholder, textarea.error::placeholder {
 color: black;
}
textarea {
	height: 10rem;
}
/* Footer Section
********************************************************************* */

footer {
	background-color: #424242;
	padding: 50px 0 50px 0;
}
footer p {
	color: #FFFFFF;
	text-align: right;
}
.icon {
	font-size: 48px;
}

/* Media Queries
********************************************************************* */



@media screen and (min-width: 769px) {
  .logo {
    display: none;
  }
}




@media only screen and (max-width: 766px) {


    header h1 {
    	font-size: 46px;
    	padding-top: 10px;
    }
    
    .hero {
    	margin-top: 40px;
    }
    
    
    .appstorebutton {
    	padding-top: 0px;
    
    }
    
    
    
    .logo {
    	max-width: 70px;
    }


}






@media only screen and (max-width: 550px) {
.mobile-toggle {
	right: 0px;
	top: 20px;
}
 .phone {
	display: none;
}
}




/* Start of Dedicated CSS for styling of image carousel from chatGPT */


.carousel-container {
  position: relative;
  max-width: 100%; /* Constrain to parent width */
  overflow: hidden; /* Hide images outside the container */
}

.carousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.phoneFeature {
  max-width: 100%; /* Ensure image fits container width */
  height: auto; /* Maintain aspect ratio */
  flex: 0 0 100%; /* Ensure each image takes full width of the carousel */
  object-fit: contain; /* Ensure images resize without distortion */
  display: block;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

button.prev {
  left: 10px;
}

button.next {
  right: 10px;
}

button:focus {
  outline: none;
}





/* End of Dedicated CSS for styling of image carousel from chatGPT */




.fas.fa-burn {
  font-size: 38px; /* Set the font size */
  
}


.fas.fa-key {
  font-size: 38px; /* Set size */
  
}


.fas.fa-bolt {
  font-size: 38px; /* Adjust size */
  
}







.fa, .fab, .fad, .fal, .far, .fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 2 !important;

}


.fas.fa-lightbulb {
  font-size: 38px; /* Adjust the size */
 
}



.fas.fa-camera {
  font-size: 38px; /* Adjust the size */
  
}



.fas.fa-chart-bar {
  font-size: 38px; /* Adjust the size of the icon */
  
}



.fas.fa-pound-sign {
  font-size: 38px; /* Adjust size */
  
}


/* App Store Button */


/*.appstorebutton {*/
/*    transition: transform 0.2s ease-in-out;*/
/*}*/
/*.appstorebutton:hover {*/
/*    transform: scale(1.05);*/
/*}*/








/* START of CSS for the DIV saying - DO you have these 3 problems */



/* Challenge Section Styles */
.challenge-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

.challenge-heading {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 20px;
}

.challenge-subheading {
    font-size: 1.25rem;
    color: #666;
    margin-bottom: 30px;
    /*max-width: 800px;*/
    margin-left: auto;
    margin-right: auto;
}

.challenge-questions {
    list-style: none;
    padding: 0;
    margin: 20px 0 40px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.challenge-questions li {
    font-size: 1.5rem;
    color: #444;
    margin: 10px 0;
    line-height: 1.5;
}

.challenge-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
    font-size: 1.2rem;
}

.challenge-btn:hover {
    background-color: #0056b3;
}

/* Media Queries for Mobile Responsiveness */
@media (max-width: 768px) {
    .challenge-heading {
        font-size: 2rem;
    }
    
    .challenge-subheading {
        font-size: 1rem;
    }
    
    .challenge-questions li {
        font-size: 1.2rem;
    }
    
    .challenge-btn {
        font-size: 1rem;
        padding: 8px 16px;
    }
}

@media (max-width: 480px) {
    .challenge-heading {
        font-size: 1.8rem;
    }
    
    .challenge-subheading {
        font-size: 1.0rem;
    }
    
    .challenge-questions li {
        font-size: 1.1rem;
    }
    
    .challenge-btn {
        font-size: 0.9rem;
        padding: 6px 12px;
    }
}