@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Spartan", sans-serif;
}

html {
  scroll-behavior: smooth;
}

/* Global Styles */

h1 {
  font-size: 50px;
  line-height: 64px;
  color: #222;
}

h2 {
  font-size: 46px;
  line-height: 54px;
  /* color: #222; */
  color: #fff;
}

h4 {
  font-size: 20px;
  /* color: #222; */
  color: #fff;
}

h6 {
  font-weight: 700;
  font-size: 12px;
}

p {
  font-size: 25px;
  /* color: #465b52; */
  color: #fff;
  margin: 15px 0 20px 0;
}

.section-p1 {
  padding: 40px 80px;
}

.section-m1 {
  margin: 40px 0;
}

button.normal {
  font-size: 14px;
  font-weight: 600;
  padding: 15px 30px;
  color: #000;
  /* background-color: #fff; */
  background-color: #31A9D8;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  outline: none;
  transition: 0.2s
}

button.white {
  font-size: 13px;
  font-weight: 600;
  padding: 11px 18px;
  color: #fff;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #fff;
  outline: none;
  transition: 0.2s
}

body {
  width: 100%;
  background: #0C0F16;
}


/* Header */

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 80px;
  /* background: #e3e6f3; */
  /* background: #0C0F16; */
  background: #092434;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
  z-index: 999;
  position: sticky;
  top: 0;
  left: 0;
}

#navbar {
  display: flex;
  align-items: center;
  justify-content: center;
}

#navbar li {
  list-style: none;
  padding: 0 20px;
  position: relative;
}

#navbar li a {
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  /* color: #1a1a1a; */
  color: #fff;
  transition: 0.3s ease;
}

#navbar li a:hover,
#navbar li a.active {
  /* color: #088178; */
  color: #31A9D8;
}

#navbar li a.active::after,
#navbar li a:hover::after {
  content: "";
  width: 30%;
  height: 2px;
  /* background: #088178; */
  background: #31A9D8;
  position: absolute;
  bottom: -4px;
  left: 20px;
}

#mobile {
  display: none;
  align-items: center;
}

#close {
  display: none;
}

/* Home Page */
#hero {
  /* background-image: url("img/hero4.png"); */
  /* 1, 5  9, 10, 13, 14, 21, 25, 28 5 or 10 */
  background-image: url("img/5.jpg");
  height: 90vh;
  width: 100%;
  background-size: cover;
  background-position: top 25% right 0;
  padding: 0 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

#hero h4 {
  padding-bottom: 15px;
}

#hero h1 {
  /* padding-bottom: #088178; */
  color: #c9c9c9;
}
#hero h1 span {
  color: #fff;
}

#hero button {
  background-image: url("img/button.png");
  background-color: transparent;
  color: #088178;
  border: 0;
  padding: 14px 80px 14px 65px;
  background-repeat: no-repeat;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
}

#feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  /* background: #0c0f16; */
  background: #092434;
}

#feature .fe-box {
  width: 300px;
  text-align: center;
  padding: 25px 25px;
  box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
  /* border: 1px solid #cce7d0; */
  border: 2px solid #065A82;
  border-radius: 4px;
  margin: 15px 60px;
}

#feature .fe-box:hover {
  box-shadow: 10px 10px 54px rgba(70, 62, 221, 0.1);

}

#feature .fe-box img {
  width: 100%;
  margin-bottom: 10px;
}

#feature .fe-box h4 {
  display: inline-block;
  padding: 9px 8px 6px 8px;
  line-height: 1;
  border-radius: 4px;
  columns: #065A82;
  color: #fff;
}

#feature .fe-box i {
  padding: 30px;
  color: #31A9D8;
}

#feature .fe-box:nth-child(2) {
  background-color: #31A9D8;
  /* border: 2px solid #065A82; */
}

#feature .fe-box:nth-child(2) h4 {
  background-color: #31A9D8;
  color: #065A82;
}

#feature .fe-box:nth-child(2) i{
  color: #065A82;
}

/* Product */
#product1 {
  text-align: center;
  background: #092434;
}

#product1 .pro-container {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  flex-wrap: wrap;
}

#product1 .pro {
  width: 23%;
  min-width: 250px;
  padding: 10px 12px;
  border: 1px solid #31A9D8;
  border-radius: 25px;
  cursor: pointer;
  /* box-shadow: 20px 20px 30px rgba(6, 90, 130, 0.3); */
  box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.6);
  /* border: 2px solid rgb(6, 90, 130); */
  margin: 15px 0;
  transition: 0.2s ease;
  position: relative;
  /* background: #fff; */
  background: #092434;
  color: #fff;
}

#product1 .pro h4{
  color: #31A9D8;
}

#product1 .pro:hover {
  /* box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.6); */
  box-shadow: 20px 20px 30px rgba(6, 90, 130, 0.3);

}

#product1 .pro img {
  width: 100%;
  border-radius: 20px;
}

#product1 .pro .des {
  text-align: start;
  padding: 10px 0;
}

#product1 .pro .des span {
  color: #606063;
  font-size: 12px;
}

#product1 .pro .des h5 {
  padding-top: 7px;
  color: #1a1a1a;
  font-size: 14px;
}

#product1 .pro .des i {
  font-size: 12px;
  color: rgb(243, 181, 25);
}

#product1 .pro .des h4 {
  padding-top: 7px;
  font-size: 15px;
  font-weight: 700;
  color: #088178;
}

/* taken from the image class cart */
#product1 .pro .cart {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50px;
  background-color: #e8f6ea;
  font-weight: 500;
  color: #088178;
  border: 1px solid #cce7d0;
  position: absolute;
  bottom: 20px;
  right: 10px;
}


/* Famous People */
#famous-section {
  text-align: center;
  background: #092434;
}

#famous-section .famous-container {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  flex-wrap: wrap;
}

#famous-section .famous {
  width: 23%;
  min-width: 250px;
  padding: 10px 12px;
  border: 1px solid #31A9D8;
  border-radius: 25px;
  cursor: pointer;
  /* box-shadow: 20px 20px 30px rgba(6, 90, 130, 0.3); */
  box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.6);
  /* border: 2px solid rgb(6, 90, 130); */
  margin: 15px 0;
  transition: 0.2s ease;
  position: relative;
  /* background: #fff; */
  background: #092434;
  color: #fff;
}

#famous-section .famous img {
  width: 100%;
  border-radius: 20px;
}

#famous-section .famous h4{
  color: #31A9D8;
}

#famous-section .famous:hover {
  /* box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.6); */
  box-shadow: 20px 20px 30px rgba(6, 90, 130, 0.3);
}

/* Modal */
/* $blue: #1686d9;

h1, h3 {
	color: white;
	font-weight: 400;
}

header {
	display: flex;
	padding: 0 15px;
	max-width: 800px;
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
	img {
		width: 30px;
	}
}

ul {
	list-style: none;
}

li {
	display: inline;
	padding: 6px;
	a {
		text-decoration: none;
		color: black;
		&:hover {
			text-decoration: underline;
		}
	}
}

.hero {
	background-image: url("http://richardmiddleton.me/modal-hero.jpg");
	background-size: cover;
	height: 420px;
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.button {
	background-color: $blue;
	border: 2px solid white;
	border-radius: 30px;
	text-decoration: none;
	padding: 10px 28px;
	color: white;
	margin-top: 10px;
	display: inline-block;
	&:hover {
		background-color: white;
		color: $blue;
		border: 2px solid $blue;
	}
}

.card-container {
	max-width: 800px;
	margin: 50px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.card {
	height: 300px;
	width: 230px;
	border: 1px solid darkgray;
	border-radius: 3px;
	margin: 10px;
} */
/*
// MODAL STARTS HERE // */

.bg-modal {
	background-color: rgba(0, 0, 0, 0.8);
  background-size: contain;
  width: 90%;
	/* height: 100%; */
	/* height: 163%; */
  height: 85%;
  /* overflow: hidden; */
  z-index: 1;
	/* position: fixed; */
  position: fixed;
  top: 13%;
  /* top: 20px; */
	/* top: 20%; */
  /* left: 50%; */
	display: none;
	justify-content: center;
	align-items: center;
}

.famous-bg-modal {
	background-color: rgba(0, 0, 0, 0.8);
  background-size: contain;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
  left: 0;
	display: none;
	justify-content: center;
	align-items: center;
}

.famous-modal-contents {
	height: 300px;
	width: 500px;
	background-color: white;
	text-align: center;
	padding: 20px;
	position: relative;
	border-radius: 4px;
}

.modal-contents {
	/* height: 300px;
	width: 500px; */
  height: 90%;
  width: 90%;
	background-color: white;
	text-align: center;
	padding: 20px;
	position: relative;
	border-radius: 4px;
}

.modal-contents h4, 
.modal-contents p{
  color: #000;
}



/* input {
	margin: 15px auto;
	display: block;
	width: 50%;
	padding: 8px;
	border: 1px solid gray;
} */

.close {
	position: absolute;
	top: 0;
	right: 10px;
	font-size: 42px;
	/* color: #333; */
	/* transform: rotate(45deg); */
	cursor: pointer;
	/* &:hover {
		color: #666;
	} */
}

.close:hover {
  color: #31A9D8;
}


.famous-close {
	position: absolute;
	top: 0;
	right: 10px;
	font-size: 42px;
	color: #333;
	transform: rotate(45deg);
	cursor: pointer;
	/* &:hover {
		color: #666;
	} */
}



/* Banner */
#banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: url("img/1.jpg");
  width: 100%;
  height: 40vh;
  background-size: cover;
  background-position: center;
}

#banner h4 {
  /* color: #fff; */
  color: #0C0F16;
  font-size: 20px;
}

#banner h2 {
  /* color: #fff; */
  color: #0C0F16;
  font-size: 30px;
  padding: 10px 0;
}

#banner h2 span {
  /* color: #ef3636; */
  color: #31A9D8;
}

#banner button:hover {
  background: #088178;
  color: #fff;
}

/* Call to action banners */
#sm-banner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#sm-banner .banner-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background-image: url("img/54.jpg");
  min-width: 89vh;
  /* height: 50vh; */
  height: 350px;
  background-size: cover;
  background-position: center;
  padding: 30px;
}

#sm-banner .banner-box2 {
  background-image: url("img/11.jpg");
}


#sm-banner h4 {
  color: #fff;
  font-size: 20px;
  font-weight: 300;
}

#sm-banner h2 {
  color: #fff;
  font-size: 28px;
  font-weight: 800;
}

#sm-banner span {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding-bottom: 15px;
}

#sm-banner .banner-box:hover button {
  background: #088178;
  border: 1px solid #088178;
}

#banner3 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 80px;
}

#banner3 .banner-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* background-image: url("img/30.jpg"); */
  background-color: #092434;
  min-width: 30%;
  height: 30vh;
  background-size: cover;
  background-position: center;
  padding: 20px;
  margin-bottom: 20px;
}

#banner3 h2 {
  color: #fff;
  font-weight: 900;
  font-size: 22px;
}

#banner3 h3 {
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}

#banner3 .banner-box2 {
  /* background-image: url("img/mazilovart-WDh4kNUymaM-unsplash.jpg"); */
  background-color: #065A82;
}

#banner3 .banner-box3 {
  /* background-image: url("img/Thinking.jpg"); */
  background-color: #31A9D8;
}

/* Intro Banner */
#intro-banner .banner-box{
  color: #fff;
  text-align: center;
}

#intro-banner .banner-box p{
  color: #fff;
  text-align: center;
  padding: 20px 10px 30px;
}

/* Join */
.join {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 40vh;
}

.join h1{
  color: #db2b2b;
}

.join h2{
  color: #aebcb9;
}

.join p {
  padding: 10px 30px;
}

.join p span {
  color: #31A9D8;
}

/* curriculum */
.curr-box {
  display: block;
  background-color: #092434;
  text-align: center;
  padding-top: 100px;
}

.curr-box h1{
 color: #fff;
}

.curr-box p{
  margin: 0px;
}

/* Book Banner */
.book-banner-box {
  display: block;
  text-align: center;
  padding: 30px;
}

.book-banner-box h1{
 color: #fff;
}


/* Newsletter */
#newsletter {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  /* background-image: url("img/banner/b14.png"); */
  background-image: url("img/12.jpg");
  background-repeat: no-repeat;
  background-position: 20% 30%;
  /* background-color: #31A9D8; */
  /* background-color: #0C0F16; */
  background-color: #092434;
}

#newsletter h4 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px #000;
}

#newsletter p {
  font-size: 14px;
  font-weight: 600;
  /* color: #818ea0; */
  /* color: #0C0F16; */
  color: #fff;
  text-shadow: 1px 1px #000;
}

#newsletter p span {
  color: #ffbd27;
}

#newsletter .form {
  border: 1px solid rgba(0,0,0, 0.2);
  display: flex;
  width: 40%;
}

#newsletter input {
  height: 3.125rem;
  padding: 0 1.25em;
  font-size: 14px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 4px;
  outline: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;

}

#newsletter button {
  /* background-color: #088178; */
  background-color: #31A9D8;
  color: #fff;
  white-space: nowrap;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Footer */

.section-p1-temp {
  padding: 10px 80px;
}
.socials{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* background-image: url(img/1.jpg); */
  width: 100%;
  height: 10vh;
  background-size: cover;
  background-position: center;
  font-size: xx-large;
}




 /* footer {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; *
  justify-content: center;
} */

/* .follow-temp a{
  align-items: center;
} */
/*footer .col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
}

footer .logo {
  margin-bottom: 30px;
}

footer h4 {
  font-size: 20px;
  padding-bottom: 20px;
  text-align: center;
}

footer p {
  font-size: 13px;
  margin: 0 0 8px 0;
}

footer a {
  font-size: 13px;
  text-decoration: none;
  /* color: #222; *
  color: #fff;
  margin: 10px;
}

/* footer .follow {
  margin-top: 20px;
}

footer .follow i {
  color: #465b52;
  padding-right: 4px;
  cursor: pointer;
} *

footer .follow-temp {
  margin-top: 20px;
}

footer .follow-temp i {
  color: #465b52;
  padding-right: 4px;
  cursor: pointer;
}

/* footer .install .row img {
  border: 1px solid #088178;
  border-radius: 6px;
}

footer .install img {
  margin: 10px 0 15px 0;
} */

footer .follow i:hover,
footer a:hover {
  /* color: #088178; */
  color: #31A9D8;
}

footer .copyright {
  width: 100%;
  text-align: center;
}

#consulting-header {
  width: 100%;
  height: 60vh;
  background-size: cover;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  padding: 14px;
  text-shadow: 3px 3px #000;
  background-image: url("img/7.jpg");

}


/* Shop Page */
#page-header {
  width: 100%;
  height: 60vh;
  background-size: cover;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  padding: 14px;
  text-shadow: 3px 3px #000;
}


.blog-header h2,
.blog-header p {
  color: #fff;

}

.blog-header p {
  font-size: 25px;
}

#pagination {
  text-align: center;
}

#pagination a {
  text-decoration: none;
  /* background-color: #088178; */
  background-color: #31A9D8;
  padding: 15px 20px;
  border-radius: 4px;
  color: #000;
  font-weight: 600;
}

#pagination a i {
  font-size: 16px;
  font-weight: 600;
}

/* Single Product Page */

#prodetails {
  display: flex;
  margin-top: 20px;
}

#prodetails .single-pro-image {
  width: 40%;
  margin-right: 50px;
}

.small-img-group {
  display: flex;
  justify-content: space-between;
}

.small-img-col {
  flex-basis: 24%;
  cursor: pointer;
}

#prodetails .single-pro-details {
  width: 50%;
  padding-top: 30px;
}

#prodetails .single-pro-details h4 {
  padding: 40px 0 20px 0;
}

#prodetails .single-pro-details h2 {
  font-size: 26px;
}

#prodetails .single-pro-details select {
  display: block;
  padding: 5px 10px;
  margin-bottom: 10px;
}

#prodetails .single-pro-details input {
  width: 50px;
  height: 47px;
  padding-left: 10px;
  font-size: 16px;
  margin-right: 10px;
}

#prodetails .single-pro-details input:focus {
  outline: none;
}

#prodetails .single-pro-details button {
  background: #088178;
  color: #fff;
}

#prodetails .single-pro-details span {
  line-height: 25px;
}

/* Blog Page */
/* Temp */
#plan{
  color: #fff;
}



.blog-header {
  background-image: url("img/10.jpg");
  background-position: center;
}

#blog {
  padding: 150px 150px 0 150px;
}

#blog .blog-box {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  padding-bottom: 90px;
}

#blog .blog-img {
  width: 50%;
  margin-right: 40px;

}

#blog img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  position: relative;
  top:100%;
  /* left:1%; */
  /* background-size: cover;
  background-position: bottom; */
}

#blog .blog-details {
  width: 50%;
}

#blog .blog-details a {
  text-decoration: none;
  font-size: 11px;
  color: #fff;
  font-weight: 700;
  position: relative;
  transition: 0.3s;
}

#blog .blog-details a::after {
  content: "";
  width: 50px;
  height: 1px;
  background-color: #fff;
  position: absolute;
  top: 4px;
  right: -60px;
}

#blog .blog-details a:hover {
  color: #088178
}

#blog .blog-details a:hover::after {
  background-color: #088178;
}

#blog .blog-box h1 {
  position: absolute;
  top: -40px;
  left: 0;
  font-size: 70px;
  font-weight: 700;
  color: #c9cbce;
  z-index: -9;
}


.lesson-box {
  display: block;
  background-color: #092434;
  text-align: center;
  padding: 50px;
}

.lesson-box h1{
 color: #fff;
}

.lesson-box p{
  margin: 0px;
}

/* Blog Pages */
#blog-page-header {
  width: 100%;
  height: 20vh;
  background-size: cover;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  padding: 14px;
  height: 20vh;
  background-image: url("img/3.jpg");
}
/* Change blog page settings */
#blog-sheet {
  padding: 20px 1%;
  /* background-color: #092434; */
  background-color: #fff;
}

#blog-sheet .blog-sheet-box{
  text-align: center;
  background-color: #fff;
  padding: 30px;
}

#blog-sheet p,
#blog-sheet h2{
  text-align: center;
  color: #000;
}

/* SideBar */
#blog-sheet{
  display: flex;
}

.side-bar-left {
  background-color: #fff;
  color: #000;
  /* padding: 20px 5%; */
  /* width: 100%; */
  padding: 20px 2%;
}

/* .side-bar-left P{
  text-align: left;
} */

.side-bar-right {
  background-color: #fff;
  color: #000;
  padding: 20px 2%;
  text-align: left;
}

/* About Page*/
#page-header .about-header {
  background-image: url("img/about/banner.png");
}

#about-head {
  display: flex;
  align-items: center;
}

#about-head img {
  width: 50%;
  height: auto;
}

#about-head div {
  padding-left: 40px;
}

#about-app {
  text-align: center;
}

#about-app .video {
  width: 70%;
  height: 100%;
  margin: 30px auto 0 auto;
}

#about-app .video video {
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}

#newsletter-consulting {
  /* display: grid;
  justify-content: space-between; */
  /* flex-wrap: wrap; */
  /* align-items: center; */
  /* background-image: url("img/banner/b14.png"); */
  /* background-image: url("img/12.jpg"); */
  /* background-repeat: no-repeat; */
  /* background-position: 20% 30%; */
  /* background-color: #31A9D8; */
  /* background-color: #0C0F16; */
  text-align: center;
  background-color: #092434;
}

 #newsletter-consulting h4 {
  /* text-align: center; */
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px #000;
}

#newsletter-consulting p {
  font-size: 14px;
  font-weight: 600;
  color: #818ea0;
  color: #0C0F16; 
  color: #fff;
  text-shadow: 1px 1px #000;
}
/* 
#newsletter-consulting p span {
  color: #ffbd27;
}*/

/* #newsletter-consulting .form {
  /* border: 1px solid rgba(0,0,0, 0.2); */
  /* display: inline-block; *
  width: 100%;
} */

#newsletter-consulting input {
  height: 3.125rem;
  padding: 0 1.25em;
  font-size: 14px;
  /* width: 40%;  */
  width: 40%;
  border: 1px solid transparent;
  border-radius: 4px;
  outline: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#newsletter-consulting button {
  /* background-color: #088178; */
  background-color: #31A9D8;
  color: #fff;
  white-space: nowrap;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Sorry Page */
#sorry-header {
  width: 100%;
  height: 150vh;
  background-size: cover;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  padding: 14px;
   /* 1, 5  9, 10, 13, 14, 21, 25, 28 5 or 10 */
  background-image: url("img/28.jpg");
  padding: 0%;
}

.sorry-background {
  background: rgba(0, 0, 0, .4);
  border-radius: 0%;
  padding: 10px;
}

.sorry-background h2{
  margin: 10px;
}


/* Contact Page */
#contact-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#contact-details .details {
  width: 40%;
}

#contact-details .details span,
#form-details form span {
  font-size: 12px;
}

#contact-details .details h2,
#form-details form h2 {
  font-size: 26px;
  line-height: 35px;
  padding: 20px 0;
}

#contact-details .details h3 {
  font-size: 16px;
  line-height: 15px;
}

#contact-details .details li {
  list-style: none;
  display: flex;
  padding: 10px 0;
}

#contact-details .details li i {
  font-size: 14px;
  padding-right: 22px;
}

#contact-details .details li p {
  margin: 0;
  font-size: 14px;
}

#contact-details .map {
  width: 55%;
  height: 400px;
}

#contact-details .map iframe {
  width: 100%;
  height: 100%;
}

#form-details {
  display: flex;
  justify-content: space-between;
  margin: 30px;
  padding: 80px;
  border: 1px solid #e1e1e1;
}

#form-details .form {
  width: 65%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#form-details form input,
#form-details form textarea {
  width: 100%;
  padding: 12px 15px;
  outline: none;
  margin-bottom: 20px;
  border: 1px solid #e1e1e1;
}

#form-details form button {
  background-color: #088178;
  color: #fff;
}

#form-details .people div {
  padding-bottom: 25px;
  display: flex;
  align-items: flex-start;
}

#form-details .people div img {
  width: 65px;
  height: 65px;
  object-fit: cover;
  margin-right: 15px;
}

#form-details .people div p {
  margin: 0;
  font-size: 13px;
  line-height: 25px;
}

#form-details .people div p span {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #000;

}

/* Cart Page */

#cart {
  overflow-x: auto;
}

#cart table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  white-space: nowrap;
}

#cart table img {
  width: 70px;
}

#cart table td:nth-child(1) {
  width: 100px;
  text-align: center;
}

#cart table td:nth-child(2) {
  width: 150px;
  text-align: center;
}

#cart table td:nth-child(3) {
  width: 250px;
  text-align: center;
}

#cart table td:nth-child(4),
#cart table td:nth-child(5),
#cart table td:nth-child(6) {
  width: 150px;
  text-align: center;
}

#cart table td:nth-child(5) input {
  width: 70px;
  padding: 10px 5px 10px 15px;
}

#cart table thead {
  border: 1px solid #e2e9e1;
  border-left: none;
  border-right: none;
}

#cart table thead td {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  padding: 18px 0;
}

#cart table tbody tr td {
  padding-top: 15px;
}

#cart table tbody td {
  font-size: 13px;
}

#cart-add {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#coupon {
  width: 50%;
  margin-bottom: 30px;
}

#coupon h3, 
#subtotal h3 {
  padding-bottom: 15px;
}

#coupon input {
  padding: 10px 20px;
  outline: none;
  width: 60%;
  margin-right: 10px;
  border: 1px solid #e2e9e1;
}

#coupon button,
#subtotal button,
#bibliography button{
  background-color: #088178;
  color: #fff;
  padding: 12px 20px;
}

#subtotal {
  width: 50%;
  margin-bottom: 30px;
  border: 1px solid #e2e9e1;
  padding: 30px;
}

#subtotal table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
}

#subtotal table td {
  width: 50%;
  border: 1px solid #e2e9e1;
  padding: 10px;
  font-size: 13px;
}

/* Bibliography */
#bibliography {
  padding-bottom: 0px;
  color: #fff;
  background-color: #092434;
}

.bibliography-header {
  background-image: url("img/14.jpg");
  background-position: center;
}

#bibliography .book-box{
  text-align: center;
  padding: 10px;
}

.book-list {
  list-style: none;
  padding: 10px 0;
}

.book-list a{
  text-decoration:none;
  color: #fff;
}

.book-list a:hover{
  /* text-decoration:none; */
  color: #31A9D8;
}



/* Device Sizing */
/* Start Media QUery */
@media (max-width: 799px) {
  .section-p1 {
    padding: 40px 40px;
  }

  #navbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: fixed;
    top: 0;
    right: -300px;
    height: 100vh;
    width: 300px;
    background-color: #0c0f16;
    box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
    padding: 80px 0 0 10px;
    transition: 0.3s;
  }

  #navbar.active {
    right: 200px;
  }

  #navbar li {
    margin-bottom: 25px;
  }

  #mobile {
    display: flex;
    align-items: center;
  }

  #mobile i {
    color: #1a1a1a;
    font-size: 24px;
    padding-left: 20px;
  }

  #close {
    display: initial;
    position: absolute;
    top: 30px;
    left: 30px;
    color: #222;
    font-size: 24px;
  }

  #lg-bag {
    display: none;
  }

  #hero {
    height: 70vh;
    padding: 0 80px;
    background-position: top 30% right 30%;
  }

  #feature {
    justify-content: center;
  }

  #feature .fe-box {
    margin: 15px 15px;
  }

  #product1 .pro-container {
    justify-content: center;
  }

  #product1 .pro {
    margin: 15px;
  }

  #banner {
    height: 20vh;
  }

  #sm-banner .banner-box {
    min-width: 100%;
    height: 30vh;
  }

  #banner3 {
    padding: 0 40px;
  }

  #banner3 .banner-box {
    width: 28%;
  }

  #newsletter .form {
    width: 70%;
  }

  /* Contact Page*/
  #form-details {
    padding: 40px;
  }

  #form-details form {
    width: 50%;
  }
}




/* iphone X */
@media (max-width: 477px) {
  .section-p1 {
    padding: 20px;
  }

  #navbar.active {
    right: -100px;
  }

  #header {
    padding: 10px 30px;
  }

  h1 {
    font-size: 38px;
  }

  h2 {
    font-size: 32px;
  }

  #hero {
    padding: 0 20px;
    background-position: 55%;
  }

  #feature {
    justify-content: space-between;
  }

  #feature .fe-box {
    width: 155px;
    margin: 0 0 15px 0;
  }

  #product1 .pro {
    width: 100%
  }

  #banner {
    height: 40vh;
  }

  #sm-banner .banner-box {
    height: 40vh;
  }

  #sm-banner .banner-box2 {
    margin-top: 20px;
  }

  #banner3 {
    padding: 0 20px;
  }

  #banner3 .banner-box {
    width: 100%;
  }

  #newsletter {
    padding: 40px 20px;
  }

  #newsletter .form {
    width: 100%;
  }

  footer .copyright {
    text-align: start;
  }

  /* Single Product */
  #prodetails {
    display: flex;
    flex-direction: column;
  }

  #prodetails .single-pro-image {
    width: 100%;
    margin-right: 0px;
  }


  #prodetails .single-pro-details {
    width: 100%;
    /* padding-top: 30px; */
  }

  /* blog page */

  #blog {
    padding: 100px 20px 0 20px;
  }

  #blog .blog-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #blog .blog-img {
    width: 100%;
    margin-right: 0px;
    margin-bottom: 30px;
  }

  #blog .blog-details {
    width: 100%;
  }

  /* about page */
  #about-head {
    flex-direction: column;
  }

  #about-head img {
    width: 100%;
    margin-bottom: 20px;
  }

  #about-head div {
    padding-left: 0px;
  }

  #about-app .video {
    width: 100%;
    height: 100%;
    margin: 30px auto 0 auto;
  }

  /* Contact Page */
  #contact-details {
    flex-direction: column;
  }

  #contact-details .details {
    width: 100%;
    margin-bottom: 30px;
  }

  #contact-details .map {
    width: 100%;
  }

  #form-details {
    margin: 10px;
    padding: 30px 10px;
    flex-wrap: wrap;
  }

  #form-details form {
    width: 100%;
    margin-bottom: 30px;
  }

  /* Cart Page*/
  #cart-add {
    flex-direction: column;
  }

  #coupon {
    width: 100%;
  }

  #subtotal {
    width: 100%;
    padding: 20px;
  }
}