/*
Theme Name: Argila Architects
Author: Fit.al
Author URI: https://fit.al/
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: argila
*/

@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&display=swap');

* {font-family: 'Montserrat', sans-serif;}
*, *::after, *::before {
	outline:none;
	transition: 700ms;
}
a, a:hover {
    color: black;
    text-decoration: none;
}
ul, p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    list-style: none;
}
body {overflow-x:hidden;}
/* HEADER */
header.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    background-color:transparent;
    position: fixed;
    width: 100%;
    border-bottom: none;
    z-index: 999;
}
.header-page {
	position:relative !important;
	background-color:white !important;
}
.header-logo img {
	width:40px;
	height:40px;
}
header.header-bg {
    background-color: #fafafa;
    border-bottom:1px solid #f2f2f2;
}
header.header-bg .make-request {
    border:1px solid rgba(0, 0, 0, 0.3);
    color: black;
}
header.header-bg .header-menu a {color: black;}
.header-logo-menu {
    display: flex;
    gap: 50px;
	align-items:center;
}
.header-menu ul {
    display: flex;
    gap:20px;
}
.header-menu a {color: white;}
.make-request {
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 10px 30px;
}
.header-menu a, .make-request {font-size: 14px;}

#main-menu-mobile, #open-menu {display:none;}
#main-menu-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 999;
    justify-content: center;
    align-items: center;
    text-align: center;
	flex-direction:column;
}
#main-menu-mobile ul {
	display:flex;
	flex-direction:column;
	gap:10px;
}
.mobile-btn {
	background:none;
	min-width:35px;
	min-height:35px;
	max-width:35px;
	max-height:35px;
	width:100%;
	height:100%;
	font-size:20px;
	border:1px solid;
}
#open-menu {
	border-color:white;
	color:white;
}
.header-bg #open-menu {
	border-color:black;
	color:black;
}
#close-menu {
	position:absolute;
	top:40px;
	right:40px;	
}
#main-menu-mobile .make-request {
	border-color:black;
	color:black;
}

.glow {
    position: absolute;
	display:block;
    width: 500px;
    height: 500px;
    border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0) 75%);
    pointer-events: none;
	z-index:999;
	transition:0s !important;
}

/* HOMEPAGE SLIDER */
.homepage-slider, #homepageCarousel .carousel-item.active {position: relative;}
#homepageCarousel .carousel-item::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
#homepageCarousel .carousel-item img {
    height: 100vh;
    object-fit: cover;
}
.carousel-content {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    color: white;
}
.discover-more, .discover-more-black {
    font-size: 14px;
    position: relative;
    display:flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.discover-more {
    justify-content: center;
    color: white !important;
}
.discover-more-black {color: black;}

.discover-more::before, .discover-more::after,
.discover-more-black::before, .discover-more-black::after {
    content: "";
    display: block;
    height: 1px;
}
.discover-more::before, .discover-more::after {background-color: rgba(255, 255, 255, 0.5);}
.discover-more-black::before, .discover-more-black::after {background-color: rgba(0, 0, 0, 0.5);}

.discover-more::before, .discover-more-black::before {width: 20px;}
.discover-more::after, .discover-more-black::after  {width: 100px;}

.discover-more:hover::before, .discover-more-black:hover::before {width: 100px;}
.discover-more:hover::after, .discover-more-black:hover::after {width: 20px;}

.bottom-carousel {
    position: absolute;
    bottom: 20px;
    left: 0;
    display: flex;
    align-items: center;
    flex-direction: row !important;
    width: 100%;
    justify-content: space-around;
    z-index: 999;
}
.homepage-about {padding: 100px 0;}

/* PROJECT LIST */
.project-list {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}
.project-item {position: relative;}
.project-item:nth-child(3) {grid-column: span 2;}
.project-item img,
.single-project-gallery-list img
 {
    aspect-ratio: 2/1;
    object-fit: cover;
}
.project-content, .project-title {
    position: absolute;
    left: 20px;
    color: white;
    opacity: 0;
}
.project-item:hover img {filter: brightness(0.6);}
.project-item:hover .project-content,
.project-item:hover .project-title {
    opacity: 1;
}
.project-content {
    top: 0;
    display: flex;
    gap: 20px;
    font-size: 12px;
}
.project-item:hover .project-content {top: 20px;}
.project-title {
    bottom: 0;
    font-weight: 600;
}
.project-item:hover .project-title {bottom: 20px;}

.project-page {
	background-color:black;
	padding:200px 0 100px;
}

/* ABOUT US */
.about-us-intro,
.single-project-intro {height: 100vh;}

/* SINGLE - PROJECT */
.single-project-intro {
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.single-project-intro::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}
.single-project-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    width: 50%;
    height: 100%;
    padding-left: 100px;
    color: white;
    position: relative;
}
.project-meta {
    display: flex;
    align-items: center;
    gap: 20px;
}
.single-project-gallery {padding: 100px;}
.single-project-gallery-list {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}

/* FORMS */
input, textarea {
	border: 1px solid #696969;
    background: none;
	color: #696969;
}
input {height: 40px;}
.wpcf7-form {
	display:block;
	margin:0 auto;
	width:max-content;
}
.wpcf7-form label {
	margin-bottom:20px;
	color:#696969;
}
.wpcf7-submit {
	padding:10px 0;
	width:100%;
	height:max-content;
	background-color:#696969;
}

/* FOOTER */
footer.footer {
    background-color: rgba(0, 0, 0, 0.9);
    background-image: url(/argila/wp-content/uploads/2023/09/footer-bg.jpg);
    background-size: cover;
    background-position: 50%;
    background-blend-mode: multiply;
    padding: 100px 0 0;
    color: white;
    position: relative;
}
footer h2 {
    font-weight: 700;
    margin-bottom: 20px;
}
footer .get-touch {
    background-color: white;
    color: black;
    display: block;
    width: max-content;
    padding: 10px 30px;
    margin-top: 50px;
}
.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-socials {
    display: flex;
    flex-direction: column;
    gap: 10px;
	text-align:right;
}
.footer-socials a {
    display: block;
    color: white;
    font-weight: 500;
    font-size: 14px;
}

.footer-copyright {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color:#ffffff99;
    padding: 85px 50px 20px;
    font-size: 12px;
}

@media (max-width: 1200px){
	/* MOBILE HEADER */
	#open-menu {display:block;}
	#main-menu-mobile {
		transform: translateX(-100%);
		display:flex;
		gap:20px;
	}
	.header-menu, header .make-request {display:none;}
	.carousel-content h1 {font-size:30px;}
}

@media (max-width: 1000px){
	header.header {padding:25px;}
	.carousel-control-next, .carousel-control-prev {width:5%;}
	.carousel-content h1 {
		text-align:center;
		padding:0 50px;
	}
	footer.footer {padding:50px 10px 0;}
	.footer-copyright {padding: 75px 10px 20px;}
}

@media (max-width: 800px){
	.single-project-content {
		width:100%;
		padding:0 50px;
	}
	.single-project-gallery {padding:50px;}
}

@media (max-width: 600px){
	.footer-content {flex-direction:column;}
	.footer-contact p {width:100% !important;}
	.footer-socials {
		flex-direction:row;
		width: 100%;
		justify-content: space-between;
		padding: 40px 10px 0;
	}
	.single-project-content h1 {font-size:26px;}
	.single-project-content p,
	.single-project-content li {font-size:14px;}
	.single-project-gallery {padding:30px;}
	.single-project-gallery-list,
	.project-list {grid-template-columns:1fr;}
	.project-item:nth-child(3) {grid-column: span 1;}
	.page-project {padding: 0 25px !important;}
	.project-title {font-size:16px;}
}