/*******************

    Project 4
    Name: Camilo Lucero
    Date: 2022-12-11
    Description: Project 4 Website Development and Deployment

********************/


/*******************
HOME STYLES
*******************/

/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Orbitron:wght@400;500;600;700;800;900&display=swap');


body {
	font-family: 'Montserrat', sans-serif;
	margin: 0 0 1em;
}

#main-header {
	background-image: url('./images/hero-drone.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	color: white;
	height: 500px;
	padding-top: 2em;
}

#main-container {
	margin: auto;
	width: 1000px;
}

#main-header h1 {
	font-family: 'Orbitron', sans-serif;
	font-size: 3.5em;
	font-weight: 600;
	text-align: center;
	margin: 0;
	padding-bottom: 0.3em;
	letter-spacing: 0.15em;
}

#main-nav {
	padding: 0.5em 0;
}

#main-nav ul {
	display: flex;
	justify-content: space-around;
	list-style: none;
	padding: 0;
	width: 450px;
	margin: auto;
}

#main-nav ul a {
	border-radius: 5px;
	color: white;
	font-weight: 600;
	text-decoration: none;
	padding: 0.5em 1.5em;
	transition: all 0.2s;
}

#main-nav ul a:hover {
	background-color: rgba(255, 255, 255, 0.5);
	color: #646d89;
	transition: all 0.2s;
}

#container-company-description {
	background-color: #f4e5e3;
	display: flex;
	justify-content: center;
}

#company-description {
	font-size: 1.3em;
	font-weight: 500;
	text-align: center;
	line-height: 1.5;
	margin: 0;
	max-width: 1000px;
	padding: 2em 0;
}

#container-advantages {
	padding: 1.5em 0 1em;
}

#container-advantages h2 {
	text-align: center;
	padding-bottom: 0.6em;
	
}

#container-drone-sections {
	display: flex;
	justify-content: space-between;
}

#container-drone-control,
#container-drone-record {
	border-radius: 15px;
	height: 240px;
	position: relative;
	width: 48%;
}

#container-drone-control > *,
#container-drone-record > * {
	position: absolute;
}

#container-drone-control h3, 
#container-drone-record h3 {
	font-family: 'Orbitron', sans-serif;
	margin: 0;
	text-transform: uppercase;
	top: 12%;
	z-index: 1;
}

#container-drone-control h3 {
	left: 7%;
}

#container-drone-record h3 {
	left: 70%;
}

#container-drone-control h3 span, 
#container-drone-record h3 span {
	color: rgb(23, 23, 25);
	font-weight: 900;
	letter-spacing: 0.2em;
}

#container-drone-control h3 span:first-child {
	color: rgb(255, 55, 0);
	font-size: 141%;
	font-weight: 600;
}

#container-drone-control h3 span:last-child {
	font-size: 100%;
	font-weight: 900;
}

#container-drone-record h3 span:first-child {
	color: rgb(255, 55, 0);
	font-size: 117%;
}

#container-drone-record h3 span:last-child {
	font-size: 130%;
	color: white;
}

#container-drone-control p,
#container-drone-record p {
	font-weight: 500;
	line-height: 1.4em;
	margin: 0;
	top: 13%;
	z-index: 1;
}

#container-drone-control p {
	left: 40%;
	padding-right: 4%;
}

#container-drone-record p {
	left: 8%;
	padding-right: 33%;
}

#container-drone-control img,
#container-drone-record img {
    left: 0;
    bottom: 0;
	max-width: 100%;
	z-index: 0;
}

#container-drone-control {
	background-color: #86DBEF;
}

#container-drone-record {
	background-color: #F2C716;
}

#main-footer {
	padding-top: 3em;
}

#main-footer ul {
	display: flex;
	padding: 0;
	justify-content: center;
	margin: 0.3em 0;
	font-weight: 500;
	font-size: 0.9em;
}

#main-footer ul li {
	list-style: none;
}

#main-footer ul li a {
	text-decoration: none;
	padding: 0 1em;
	color: rgb(0, 136, 255);
}

#main-footer ul li a:hover {
	color: rgb(0, 72, 135);
}

#main-footer ul li::after {
	content: "|";
	color: #acaeb4;
}

#main-footer ul li:last-child::after {
	content: "";
}

#main-footer p {
	text-align: center;
	margin: 0;
	font-size: 0.9em;
	font-weight: 500;
	color: #646d89;
}

/*******************
PRODUCTS STYLES
*******************/
#page-products {
	background-color: #fefefe;
}

#main-header.compact {
	height: 150px;
	box-shadow: inset 0px -50px 500px rgba(31, 77, 123, 0.1);
	background-image: none;
	background: #2980B9;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #f3e8e6, #bac5e3, #738fbd);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #f3e8e6, #bac5e3, #738fbd); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

#main-promo {
	background-color: #FF3CAC;
	background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
}

#main-promo p {
	color: white;
	margin: 0;
	padding: 0.8em 0 1em;
	text-align: center;
}

#page-products #main-container > h2 {
	padding: 1.5em 0 1em;
	margin: 0;
}

#container-products {
	display: flex;
	flex-wrap: wrap;
}

.container-product {
	background-color: white;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	border-radius: 1em;
	margin-top: 3em;
	margin-right: 2em;
	padding: 0 1.5em 1.5em;
	width: 264px;
	position: relative;
}

.container-product img {
	max-width: 85%;
	position: absolute;
	top: -3em;
	z-index: 0;
}

.container-product .product-title {
	margin: 3.2em 0 0;
	padding: 0;
}

.container-product:last-child {
	margin-right: 0;
}
.container-product h5 {
	margin: 0 0 0.5em;
}

.container-product p {
	line-height: 1.4em;
}

.container-product .product-features {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0 0 1.5em;
}

.container-product .product-features li {
	list-style: none;
	background-color: #e5e5e9;
	border-radius: 0.3em;
	margin-right: 0.3em;
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 0.3em;
	padding: 0.3em 0.8em;
}

.footer-product {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.footer-product .product-price {
	font-weight: 600;
	font-size: 1.2em;
	margin: 0;
}

.footer-product .btn-product-purchase {
	border: none;
	background-color: black;
	color: white;
	cursor: pointer;
	font-weight: 600;
	border-radius: 500px;
	width: 7.5em;
	height: 2.6em;
	transition: all 0.1s;
}

.footer-product .btn-product-purchase:hover {
	background-color: #3300ff;
}

.orange {
	color: #ffc107;
	background: -webkit-linear-gradient(#faff68, #ffbe00);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: 0.02em;
}

/*******************
CONTACT STYLES
*******************/
#page-contact {
	background-color: #fdfdfd;
}

#container-form {
	background-color: #FFF;
	border-radius: 1.5em;
	display: flex;
	margin-top: 2em;
	height: 700px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

#container-form > div {
	height: 100%;
	width: 50%;
}

#container-form #form-left {
	background-image: url("./images/contact-bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	border: none;
	border-radius: 1.5em 0 0 1.5em;
}

#container-form h2 {
	margin: 0 0 0.5em;
}

#container-form form {
	padding: 3em 4em;
	display: flex;
	flex-direction: column;
}

#container-form form label {
	margin-bottom: 0.5em;
	margin-top: 1em;
}

#container-form .error {
	color: red;
	display: none;
	margin: 0.3em 0 0;
	font-size: 0.9em;
	font-weight: 500;
}

#container-form form input,
#container-form form textarea {
	border-radius: 0.3em;
	border: 2px solid rgb(208, 207, 211);
	font-size: 1em;
	font-family: Arial, sans-serif;
}

#container-form form input {
	height: 2em;
	padding-left: 0.5em;
}

#container-form form textarea {
	height: 10em;
	padding: 0.5em;
}

#form-buttons {
	display: flex;
	justify-content: space-between;
	margin-top: 2em;
}

#form-buttons #btn-reset,
#form-buttons #btn-submit {
	height: 2.5em;
	width: 7em;
	border-radius: 50px;
	border: 2px solid black;
	font-weight: 600;
	font-size: 1em;
	cursor: pointer;
}

#btn-reset {
	background-color: white;
}

#btn-submit {
	background-color: black;
	color: white;
}