/* global */

:root {
  --black: #1f1f1f;
  --dark-gray: #3b3a3a;
  --light-gray: #999999;
  --white: #e2e2e2;
	--red: #f23141;
	--dark-red: #822a2a;
	--lightred-color:#ff7f7f;
	--lightyellow-color:#fcf4a3;
}

* {
	box-sizing: border-box;
	font-family: "Contrail One", sans-serif;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

body {
	background-color: var(--black);
}

a {
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p, a, span {
	color: var(--white);
}

h1 span, h2 span, h3 span, h4 span {
	color: var(--red);
}

#title {
	font-size: 5vw;
	font-family: sans-serif;
	font-weight: 700;
	font-style: italic;
}

#subtitle {
	font-size: 2vw;
}

/* collapsible global variables */
header input, #services input {
	display: none;
}

label {
	cursor: pointer;
}

.collapsible input:checked ~ .collapsible-content {
    max-height: 10000px; /* Adjust based on content size. */
    opacity: 1;
}
/* global end */

/* nav bar section */
header {
  background-color: var(--black);
  width: 100%;
  max-height: 100px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 5px solid #161616;
  position: fixed;
  z-index: 100;
}

.header-logo {
	display: flex;
	align-items: flex-end;
	gap: 0.4rem;
}

.header-logo h3 {
	font-size: 2rem;
}

.header-logo > span {
	color: #999999;
	margin-bottom: 0.35rem;
}

header .navigation {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header label {
	position: relative;
	right: 20px;
}

header .collapsible-content {
	background-color: var(--light-gray);
	width: 150px;
	padding: 7.5px 15px;
	position: absolute;
	top: 80px;
	right: 75px;
	border-radius: 15px;
}

header .collapsible-content a {
	background-color: var(--dark-gray);
	display: block;
	padding: 5px 10px;
	margin: 7.5px 0;
	text-align: center;
	font-size: 22.5px;
	border-radius: 7.5px;
}

#responsive-navigation {
	background-color: var(--black);
	color: var(--white);
  	height: 100vh;
  	width: 200px;
  	margin-left: auto;
  	padding: 20px;
  	border: 0;
  	border-left: 4px solid var(--black);
  	transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  	transition-behavior: allow-discrete;
  	display: block;
  	/* Closed POPOVER */
  	opacity: 0;
  	transform: translateX(200px);
}

/* Opened POPOVER */
#responsive-navigation:popover-open {
  	opacity: 1;
  	transform: translateX(0px);
}

/* OTHER STYLES */

ul {
  	margin-top: 20px;
}

li {
  	list-style-type: none;
}

li a {
  	display: block;
  	text-decoration: none;
  	padding: 10px 0;
  	border-bottom: 2px solid var(--white);
  	margin-bottom: 10px;
  	color: var(--white);
  	font-weight: bold;
  	width: 100%;
 	transition: width 0.3s ease, color 0.3s ease;
}

li a:hover {
  	width: 90%;
  	color: var(--red);
}

/* BUTTONS STYLE */
.button {
  	font-size: 1.5em;
  	box-shadow: 0 5px #822a2a;
  	border-radius: 15px;
  	border: 2px solid #822a2a;
  	background: var(--red);
  	transition-property: all;
  	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  	transition-duration: 0.15s;
  	font-weight: 500;
  	cursor: pointer;
  	color: white;
  	padding: 0.5em 0.8em;
  	margin-left: auto;
}

.close-button {
  	font-size: 1.125em;
  	padding:  0.5em 0.8em;
  	touch-action: manipulation;
  	will-change: transform;
  	margin: auto;
}

.button:hover {
  	box-shadow: 0 0 var(--black);
  	transform: translateY(6px);
}
/* nav bar section end */

/* main section */
#main {
	width: 100%;
	height: 74vh;
	padding-top: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#main .caption {
	display: flex;
	flex-direction: column;
	gap: 7.5px;
}

#main .caption h1 {
	font-size: 5vw;
	text-shadow: 0 3px 5px #000000;
}

#main .caption a, #message-sent a {
	margin: 0 auto;
	width: 20vw;
	background-color: var(--dark-gray);
	font-size: 2.5vw;
	opacity: 0.6;
	padding: 10px 20px;
	border-radius: 15px;
	border: 3px solid var(--black);
	box-shadow: 0 3px 5px #000000;
	transition: 0.5s;
}

#main .caption a:hover, #message-sent a:hover{
	width: 22vw;
	padding: 14px 24px;
	opacity: 1;
	background-color: var(--red);
	border-color: var(--dark-gray);
	border-radius: 15px;
}

/* Main Section End */
/* Section Section */

#services {
	background-color: var(--black);
	border-top: 5px solid #161616;
}

#services .container {
	margin: 0 7.5%;
	display: flex;
	gap: 20px;
}

#services .item-title .arrow {
	rotate: 85deg;
	font-size: 2vw;
}

#services .container-item .item-name {
	font-size: 2.2vw;
}

#services .container-item .item-description {
	margin: 15px 20px;
	font-size: 1.2vw;
	color: #999999;
}

#services .container-item .item-description .description-title hr {
	margin: 17.5px 0;
	color: var(--white);
}

#services .container-item .item-description .description-info hr {
	margin: 7.5px 0;
	width: 50%;
	color: #978883;;
}

#services .collapsible {
	margin-top: 3rem;
  	width: 100%;
	border-radius: 15px;
	overflow: hidden;
	font-size: 1.75vw;
}

#services .collapsible-icon {
	font-size: 2.5vw;
	color: #978883;
	margin-left: 1vw;
}

#services .collapsible label {
	height: 7.5vw;
	position: relative;
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	align-items: center;
	font-weight: 600;
	background-color: var(--dark-gray);
	color: var(--white);
	padding: 25px 15px;
	border-radius: 15px;
	text-align: center;
}

#services .collapsible label span {
    width: 18px;
    height: 18px;
    line-height: 18px; /* Center the > symbol */
    text-align: center;
    transition: transform 0.3s ease; /* Smooth rotation */
	margin-left: 15px;
}

#services .collapsible input:checked ~ label span {
    transform: rotate(90deg);
}

#services .collapsible input:checked ~ label {
 	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.collapsible-content {
    max-height: 0; /* Use max-height for animation */
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

#services .collapsible .collapsible-content {
	background-color: var(--light-gray); /* Smooth transition */
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

.collapsible-content p {
	width: 70%;
	margin: 20px auto;
	text-align: center;
	color:var(--black);
}

.collapsible-content .collapsible-title {
	color: var(--white);
	width: 100%;
	margin: 0;
	padding: 10px 5px;
	text-align: center;
	background-color: var(--dark-gray);
	border-top: 1px solid var(--light-gray);
	border-bottom-left-radius: 7.5px;
	border-bottom-right-radius: 7.5px;
}
/* services section end */

/* works section start */
#works {
	padding: 5% 0;
}

#works .works-container {
	background-color: var(--dark-gray);
	margin: 0 7.5%;
	padding: 3% 3%;
	border-radius: 15px;
}

#works .works-container .works-description {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	place-items: center;
	gap: 2vw; 
}

#works .works-container .works-item {
	margin: 5% 5%;
	padding: 5% 5%;
	width: 100%;
	height: 19vw;
	background-color: var(--light-gray);
	border-radius: 15px;
	transition: 0.5s;
}

#works .works-container .works-item {
	margin-top: 1%;
	font-size: 1.5vw;
	text-align: center;
	color: var(--black);
}

#works .works-container .works-item:hover {
	width: 110%;
	height: 20vw;
	background-color: var(--dark-red);
	color: var(--white);
	font-size: 1.7vw;
}

#works .works-container .works-item .works-item-noimg {
	background-color: var(--black);
	width: 100%;
	height: 15vw;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.75vw;
	margin-bottom: 7.5px;
}


#works .works-container .works-item .works-item-noimg > span {
	font-size: 1.2vw;
	margin-bottom: 1.4vw;
}

#works .works-container .works-item img {
	width: 100%;
	height: 15vw;
	object-fit: cover; 
}

#works .works-container .works-title {
		font-size: 1.7rem;
		text-align: center;
		margin-bottom: 20px;
}
/* works section end */

/* create section start */
#create {
	background-image: url('https://images.unsplash.com/photo-1581084324492-c8076f130f86?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YWJzdHJhY3QlMjBncmVlbnxlbnwwfHwwfHx8MA%3D%3D');
	height: 74vh;
	font-size: 4vw;
	display: flex;
	justify-content: center;
	align-items: center;
}

#create h1 {
  text-shadow: 0 3px 5px #000000
}
/* contact section start */

/* contact section start */
#contact {
	background-color: var(--black);
	padding: 80px 0;
	padding-right: 10%;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

#contact .left-container {
	font-size: 2.5rem;
	text-align: center;
}

#contact .left-container .waysto-contact {
	width: 350px;
	display: flex;
	justify-content: space-between;
	color: var(--red);
	margin: 10px auto;
}

#contact .left-container .waysto-contact .contact-menu {
	padding: 4% 2%;
	width: 80px;
	height: 80px;
	background-color: var(--dark-gray);
	border-radius: 15px;
	font-size: 40px;
	text-align: center;
	transition: 0.5s;
}

#contact .left-container .waysto-contact .contact-menu:hover {
	background-color: var(--red);
	border-color: var(--dark-gray);
	border-radius: 15px;
	cursor: pointer;
}

#contact .left-container .waysto-contact .contact-menu:active {
	background-color: var(--dark-red);
}


#contact label {
	font-size: 1.5rem;
}

#contact .right-container {
	background-color: var(--dark-gray);
	padding: 5% 2.5%;
	border-radius: 15px;
}

#contact .right-container h3 {
	font-size: 1.7rem;
	text-align: center;
	margin-bottom: 20px;
}

#contact .right-container p {
	font-size: 1.5rem;
	text-align: center;
	margin: 10px;
}

#contact form {
	text-align: center;
	width: 100%;
	gap: 1vw;
	border-radius: 15px;
}

#contact form p {
	margin-left: 20px;
	font-size: 2vw;
	color: #d3d3d3;
}

#contact form input, #contact form select, #contact form textarea {
	margin-bottom: 10px;
	padding: 15px 25px;
 	border-radius: 15px;
	width: 80%;
	background-color:#292929;
	color:#fff;
	font-weight:bolder;
	height: 50px;
}

#contact form .submit {
	background-color: var(--red);
  height: 60px;
 	color: #fff;
 	font-size: 20px;
 	border: none;
 }

#contact form textarea {
 	height: 100px;
}

/* contact section end */

/* footer section start */
footer {
	background-color: var(--dark-gray);
	padding: 0 10%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

footer .footer-logo {
	display: flex;
	align-items: flex-end;
}

footer .footer-logo h2 {
	font-size: 4rem;
}

footer .footer-logo > span {
	font-size: 2rem;
	margin-bottom: 10px;
	color:#999999;
}

footer .social-media {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	gap: 20px;
	padding: 25px 0;
}

footer .social-media .item {
	background-color: #888888;
  gap: 20px;
	padding: 0 4vw;
	border-radius: 20px;
}

footer h3 {
	font-size: 2.5vw;
}

footer .social-media  .whatsapp {
	background: linear-gradient(to right, green, darkgreen);
}

footer .social-media  .phone {
	background: linear-gradient(to right, red, darkred);
}

footer .social-media  .instagram {
	background: linear-gradient(to left, #C850C0, lightcoral);
}

footer .social-media .item img {
	width: 7vw;
}
/* footer section end  */

/* form sent start */
.main-formhandler {
	width: 64vh;
}

#message-sent {
	text-align: center;
	margin: 2.5% 0;
}

#message-sent h1 {
      font-size: 4vw;
    }

#message-sent a {
      font-size: 2.5vw;
	  background-color: #f23141;
    }

#checkmark-img {
	width:50%;
	margin: 0 auto;
}
/* form sent end */

/* media tablet querys start */
@media only screen and (max-width: 1000px) {
	#main .caption h1 {
		font-size: 6vw;
	}

	#main .caption a {
		width: 25vw;
		font-size: 3.5vw;
	}

	#services {
		padding: 2.5% 0;
	}	

	#services .container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

	#services .container-item .item-title .item-name {
		font-size: 4vw;
	}

	#services .container-item .item-title .arrow {
		font-size: 4vw;
	}


	#services .container .description-title {
		font-size: 2.5vw;
	}

	#services .container .description-info {
		font-size: 2vw;
	}

	#services .collapsible {
		margin-top: 5%;
		font-size: 2.75vw;
	}

	#services .collapsible label {
		height: 12vw;
	}

	#services .collapsible-icon {
		font-size: 3.5vw;
	}

	#message-sent {
		margin: 4% 0;
	}

	#message-sent h1 {
		font-size: 5.5vw;
		margin-bottom: 15px;
		}

	#message-sent a {
		font-size: 3.5vw;
		}

 /* works tablet querys section start */

  #works {
  	padding-bottom: 5%;
  }

 	#works .works-container .works-description {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
 	}

 	#works .works-container .works-description .works-item {
 			height: 29vw;
 	}

 	#works .works-container .works-item:hover {
 		width: 105%;
 		font-size: 2.25vw;
 	}

 	#works .works-container .works-description .works-item img,  	#works .works-container .works-description .works-item-noimg {
		width: 100%;
 		height: 22vw;
 	}

 	/* contact tablet querys section */

	#contact {
		padding-right: 7.5%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-content: center;
	} 	

	#contact .left-container {
		width: auto;
		margin: 0 auto;
		font-size: 1.6rem;
	}

	#contact .left-container h1 {
		font-size: 6vw;
	}

	#contact .left-container .waysto-contact {
		width: auto;
		gap: 10px;
	}

	#contact .left-container .contact-menu {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#contact .right-container {
		text-align: center;
	}
	/* footer media querys section start */

	footer .footer-logo h2 {
		font-size: 60px;
	}

	footer .footer-logo > span {
		font-size: 30px;
		margin-bottom: 9px;
	}
/* media querys end */
}

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

	.header-logo > span {
		display: none;
	}

	#main {
		height: 95vh;
	}

	#main .caption {
		margin: 10%;
		gap: 20px;
		}

	#main .caption h1 {
		font-size: 9.5vw;
	}

	#main .caption a {
		width: 40vw;
		font-size: 5vw;
		transition: 0.2s;
	}

	#main .caption a:hover{
		width: 45vw;
	}

	#services {
		padding: 7.5% 0;
	}

	#services .container {
		display: block;
	}

	#services .collapsible {
		font-size: 5.25vw;
	}

    #services .collapsible label {
		height: 25vw;
	}


	#services .collapsible-icon {
		font-size: 6.5vw;
	}

	#services .container-icon {
		font-size: 6.5vw; 
	}
 /* works movilw querys section start */
	#works {
		padding-bottom: 15%;
	}

	#works .works-container  {
		padding: 3% 6%;
	}

 	#works .works-container .works-description {
 		display: block;
 	}


 	#works .works-container .works-description .works-item {
		display: block;
 		height: auto;
 		text-align: center;
		font-size: 1.2rem;
		margin: 7.5% auto;
 	}

	#works .works-container .works-description .works-item-noimg h2 {
		font-size: 5.5vw;
 	}

	#works .works-container .works-item .works-item-noimg > span {
		font-size: 3vw;
	}

	#works .works-container .works-item:hover {
 		width: 100%;
 		font-size: 1.4rem;
 	}

	#works .works-container .works-title {
		font-size: 6vw;
	}

 	#works .works-container .works-description .works-item figcaption {
 		margin-top: 5px;
 	}

	#works .works-container .works-description .works-item img {
		height: 40vw;
	}

	#works .works-container .works-description .works-item-noimg {
		width:100%;
		height: 40vw;
	}
 /*create mobile */

 	#create {
		height: 95vh;
	}

	#create h1 {
		font-size: 10vw;
	}

 	/* contact tablet querys section */

	#contact {
		width: 100%;
		display: block;
		margin: 0 auto;
		padding: 7% 10%;
		padding-bottom: 60px;
	} 	

	#contact .left-container {
		width: auto;
		margin: 0 auto;
		padding: 20px 0;
		font-size: 4vw;
	}

	#contact .left-container h1 {
		font-size: 10vw;
	}

	#contact .left-container .waysto-contact {
		width: auto;
	}

	#contact .left-container .waysto-contact .contact-icon {
		width: 50px;
		height: 3px;
	}
	/* footer media querys section start */

	footer {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	footer .footer-logo h2 {
		font-size: 10vw;
	}

	footer .footer-logo > span {
		font-size: 5vw;
		margin-bottom: 7px;
	}

	footer p {
		font-size: 3vw;
		margin-bottom: 5px;
	}


	/* form sent  */

	#message-sent {
		margin: 12% 0;
	}

	#message-sent h1 {
		font-size: 7vw;
		margin-bottom: 20px;
	}

	#message-sent a {
	    font-size: 4.5vw;
	}

	#checkmark-img {
		width: 77%;
	}

	/* Fromhandler */
	.main-formhandler {
		width: 74vh;
	}
}