/* Setting all margins and paddings to zero */
*{
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
}

/* set smooth scrolling */
html {
  scroll-behavior: smooth;
}

h1{
	font-size: 2em;
	font-weight: 600;
	color:#fda400;
	line-height: 1.2em;
}

p{
	color:#535353;

	font-size: 1em;
	font-width: 300;
	line-height: 1.5em;
	padding: 10px;
}

.hideme
{
	display: none;
}

.strike{
	text-decoration: line-through;
}

/* ------------- HEADER SECTION -------------*/

.header
{
	min-height:	100vh;
	/* vh is viewport height - the viewport is the user's visible area of a web page */
	
	width: 100%;
	background-image: linear-gradient(rgba(0,0,0,0.8),rgba(13,2,85,0.8)), url("images/banner.jpg");
	
	background-position: center;
	
	background-size: cover;
	/*cover scales the image (while preserving its ratio) to the smallest possible size to fill the container */
	
	position: relative;
}

nav
{
	display: flex;
	/* enables the flexbox layout mode, allowing you to manipulate elements' alignment, spacing, and order within a container. It's a helpful tool for creating complex designs and layouts that adapt well to different screen sizes 
	(this is allowing the elements within the nav tags to be on one horizonal row, instead of under each other)*/
	
	padding: 2% 6%;
	
	justify-content: space-between;
	/* The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). (spaces out the elements evenly)*/
	
	align-items: center;
	/* The align-items property specifies the default alignment for items inside a flexbox or grid container. */
		
}

nav img{
	width:150px;
}

.nav-links{
	flex:1;
	/* occupies all the space in the row of the container, there is also flex-grow and flex-shrink
	https://developer.mozilla.org/en-US/docs/Web/CSS/flex
	*/
	text-align: right;
}

.nav-links ul li{
	list-style: none;
	display: inline-block;
	padding: 8px 12px;
	position: relative;	
}

.nav-links ul li a{
	color: #fff;
	text-decoration: none;
	font-size: 1em;
}


/* the after selector inserts something after the content of each selected element, in this case a horizontal line under the links */
.nav-links ul li::after
{
	
	content: '';
	/* content inserts text content if a value is entered e.g. content: 'Go'; would intsert the word Go after the element */
	
	width: 0%;
	/* if you change the width to 100% you would see the line appear under the links */
	
	height: 2px;
	background: #fda400;
	display: block;
	margin: auto;
	
	/* the time it takes to transition from one state to the next */
	transition: 250ms;
}

.nav-links ul li:hover::after
{
	width:100%;
}

.header-text-box
{
	width:90%;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	
	transform: translate(-50%, -50%);
	/* The transform CSS property lets you rotate, scale, skew, or translate an element, the translate method moves an element from its current position */
	
	text-align:center;
}

.header-text-box h1{
	font-size:4em;
}
.header-text-box h2
{
	margin:0px 0px 20px 0px;
	font-size: 1.2em;
	color:#fff;
	font-weight: 400;
	
}

.header-highlight{
	font-weight:600!important;
	margin-bottom:40px!important;
}

.hero-btn {
	display:inline-block;
	text-decoration:none;
	color:#fff;
	padding: 12px 34px;
	font-size: 1em;
	background: linear-gradient(180deg, rgba(253,135,0,1) 0%, rgba(253,95,0,1) 100%);
	position:relative;
	cursor:pointer;
	border-radius: 5px;
}

/*.hero-btn:hover{
	background: #fd5f00;
	transition: 100ms;

}*/


/* hiding menu icon and close icon on larger screen devices (it would also hide it on smaller screen, therefore code must be added to include it on the smaller screens) */
nav .fa-rectangle-xmark, nav .fa-bars
{
	display:none;
}

/* ------------- GLOBAL MEDIA QUERY -----------------------------------------------------------------------*/

/* THIS IS IMPORTANT FOR SECTIONS WITH ROWS CONTAINING MULTIPLE COLUMNS (ITS INSIDE MEDIA QUERY) */

@media (max-width: 800px)
{
	
	.row {
		flex-direction: column;
		/* allows the columns of the rows to flow beneath each other when viewed on mobile smaller devices */
	}
	
	
}






/* ------------- HEADER MEDIA QUERY -------------*/

/* this sets specific rules for elements when the screen size is the specified width or smaller (in this case it is set to 800px) */
@media (max-width: 800px)
{
	.header-text-box h1
	{
		font-size:2.5em;
		line-height: 1.2em;
	}
	.header-text-box h2
	{
		font-size:1em;
	}
	
	
	nav img
	{
	  width: 120px;
	}
	
	.nav-links ul li
	{
		display: block;
	}
	
	.nav-links
	{
		position: fixed;
		background:#fd5f00;
		height:100vh;
		width:200px;
		top: 0;
		/*right: -200px;*/ /* hiding the menu, because the menu is 200px, we are shifting to the right by 200px*/
		display:none;
		text-align: left;
		z-index: 2;	
		transition: 500ms;
	}
	
	nav .fa-rectangle-xmark, nav .fa-bars
	{
		display:block;
		color:#fff;
		margin: 10px;
		font-size: 1.2em;
		cursor:pointer;
	}
	
	.nav-links ul{
		padding:30px;
	}
	
	.hamburger-icon{
		position:fixed;
		right:20px;
		color:#fda400!important;
		z-index: 1;
	}
	
}

/* THIS WOULD WORK FOR ALL ROWS IN ALL SECTIONS WITH CLASS .row */
.row {
	margin-top: 1%;
	display: flex;
	justify-content: space-between;
}



/* ------------- LOGO SECTION -------------*/

#logo {
	width:100%;
	background-color:#F1F1F1;
}
.logo-section .row{
	margin-top:0;
}

.logo-section{
	width: 95%;
	margin: auto;
	text-align: center;
	/*padding-top: 10px;*/
}

.logo-section-column{
	flex-basis: 100%;
	/*border-radius: 10px;*/
	/*margin-bottom: 5%;*/
	/*text-align: left;*/
	/*padding:10px;*/
}

.logo-section-column img{
	
	width:100%;
	border-radius: 10px;
	margin-top:15px;
	margin-bottom:10px;
}










/* ------------- ABOUT SECTION -------------*/
#about{
	background-color:#fff;
}

.about-section h1{
	text-align: center;
}

.about-section {
	width: 80%;
	margin: auto;
	padding-top: 50px;
}

.about-section p {
	text-align: left;
}


.about-section-column{
	flex-basis: 48%;
	border-radius: 10px;
	margin-bottom: 30px;
	position: relative;
	overflow: hidden;
	/* will clip the content when the content of an element is too big to fit in the specified area */
	
}

.about-section-column img{
	width: 100%;
	display:block;
}


.about-section a {
	color:#fd5f00;
	text-decoration:none;
}


@media (max-width: 800px)
{
	.about-section p {
	text-align: center;
}
	
}




/* ------------- THUMBNAIL SECTION -------------*/

#content {
	background-color:#170b68;
	padding: 50px 0;
}

.thumbnail-section
{
	width: 80%;
	margin: auto;
	text-align:center;	
}


.thumbnail-section-column{
	flex-basis: 32%;
	border-radius: 10px;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
	/* will clip the content when the content of an element is too big to fit in the specified area */
	
}

@media (max-width: 800px){
.thumbnail-section-column{
	cursor: pointer;
	
}
}

.thumbnail-section-column img{
	width: 100%;
	display:block;
}

.image-layer
{
	background: transparent;
	height:100%;
	width:100%;
	position: absolute;
	top: 0;
	left: 0;
	
}

.image-layer:hover{
	background: rgba(253,95,0, 0.85);
	transition: 500ms;
}

.image-layer h3{
	width: 100%;
	font-weight: 500;
	color: #fff;
	font-size: 1.5em;
	bottom: 0%;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	opacity: 0;
	transition: 500ms;
	
}


.image-layer:hover h3{
	bottom:49%;
	opacity:1;	
}


.thumbnail-section p{
	color:#c3baff;
}





/* ------------- PACKAGES SECTION -------------*/

#packages {
	background-color:#fff;
	padding:50px 0;
}

.packages-section {
	width: 80%;
	margin: auto;
	text-align: center;
	
}

.packages-section-column {
	flex-basis: 24%;
	/* The flex-basis property specifies the initial width of a flexible item */
	
	background: #170b68;
	border-radius: 10px;
	margin:0 5px 20px;
	padding: 20px 12px;
	box-sizing: border-box;
	/* The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height */
	
	transition: 250ms;
}



.packages-section-column:hover{
	box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
	/* drop shadow with 20 percent opacity */
}

.packages-section h2{
	font-size: 1.5em;
	color:#fda400;
	margin-bottom:10px;
}

.packages-section h3{
	font-size: 1.2em;
	font-weight:600;
	color:#fff;
	margin-top:10px;
}


.packages-list-container{
	text-align:center;
}

.packages-section-column ul{
	display:inline-block;
}

.packages-section-column li{
	text-align: left;
	list-style:none;
	padding: 3px 0;
	color:#fff;
}

.packages-btn{
	background: linear-gradient(180deg, rgba(253,135,0,1) 0%, rgba(253,95,0,1) 100%);
	color:#fff;
	display:block;
	min-width:30px;
	max-width: 100px;
	margin: 10px auto;
	padding: 10px 30px;
	cursor: pointer;
	border-radius: 5px;
}

.packages-section a{
	text-decoration: none;
}

.packages-icon{
	font-size: 4em;
	margin-top:20px;
	margin-bottom:10px;
	color:#5e5597;
}
.packages-check
{
	color:#2fd92a;
}


/* ------------- ACTION SECTION -------------*/
#action {
	background-color:#fff;
}

.action-section {
	width: 90%;
	margin: 0 auto;
	background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url("images/action.jpg");
	background-position: center;
	background-size:cover;
	border-radius: 10px;
	text-align: center;
	padding : 100px 0;
	
}

.action-section h1{
	color: #fff;
	/*margin-bottom:40px;*/
	padding:0;
}

.action-section p{
	color: #fff;
	/*margin-bottom:40px;*/
	font-size:1.2em;
	margin-bottom:40px;
}

@media(max-width:800px){

	.action-section h1 {
	font-size: 1.2em;
	padding: 0 20px 0 20px;
}
	.action-section p {
	font-size: 1em;
	padding: 0 20px 0 20px;
}
	
}




/* ------------- FAQ SECTION -------------*/

#faq {
	background-color:#fff;
	padding: 50px 0;
}

.faq-section h1{
	text-align: center;
}

.faq-section {
	width: 80%;
	margin: auto;

}
.faq-section p
{
	text-align: left;
}


.faq-column{
	flex-basis: 48%;
	
	
	position: relative;
	overflow: hidden;
	/* will clip the content when the content of an element is too big to fit in the specified area */
	
}

.faq-column img{
	width: 100%;
	border-radius: 10px;
	margin-bottom: 10px;
	display:block;
}


@media (max-width: 800px)
{
	.faq-section p {
	text-align: center;
}
	
}


/* ------------- CONTACT SECTION -------------*/
#contact {
	background-color:#170b68;
	padding: 50px 0;
}

.contact-section{
	width: 100%;
	text-align: center;
}

.contact-section p {
	color:#c3baff;
}

.contact-section a {
	color:#fff;
	text-decoration:none;
}

.contact-icon{
	color:#fda400;
}





/* ------------- FOOTER SECTION -------------*/
#footer
{
	background-color:#0a004d;
}

.footer-section{
	width: 100%;
	text-align: center;
	padding: 20px 0;
}


.footer-section p {
	color:#5e5597;
}

.footer-section a {
	color:#5e5597;
	text-decoration:none;
}
.footer-section a:hover {
	color:#c3baff;
}