/**
 * Theme Name:     Black Crest
 * Author:         Elementor Team
 * Template:       hello-elementor
 * Text Domain:	   black-crest
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */

*{ padding:0; margin:0;}
img{ max-width:100%; height:auto; vertical-align:top; transition:all 300ms ease-out 0s;}
#header-sec{  border-bottom:1px solid rgba(0,0,0,0); transition:all 300ms ease-out 0s;}
#header-sec.active, #header-sec.active-class{ background:#000; border-bottom:1px solid #404040;}
.scrollmotion{ animation:arrow-motion 4s ease-in-out infinite;}

#desktopmenu .elementskit-navbar-nav li a:focus, 
#mobilemenu .elementskit-navbar-nav li a:focus{ color:#fff;}

@keyframes arrow-motion {
 0%   { transform: translateY(0px); }
25%  { transform: translateY(9px); }
50%  { transform: translateY(0px); }
 75% { transform: translateY(9px); }
100% { transform: translateY(0px); }
}
footer .projectbutton{ display:none!important;}
.projectbutton{ display:none;}
.projectbox .contentholder:before{ z-index:2}
.projectbox .contentbox{ opacity:0!important;}
.projectbox:hover .contentbox{ opacity:1!important;}
.projectbox .imagebox{ height:100%; z-index:1}
.projectbox:hover .imagebox img{ transform:scale(1.1)}
.projectbox .elementskit-border-divider{  transition:all 300ms ease-out 0s;}
.projectbox:hover .elementskit-border-divider{ width:100%!important;}
.projectbox .arrowicon{ opacity:0; transform:scale(0.5); margin-right:30px;   transition:all 500ms ease-out 0s;}
.projectbox:hover .arrowicon{ opacity:1; transform:scale(1); margin-right:0px; }
.boxicon > div{ position:relative;}
.boxicon > div:after{ content:""; width:40px; margin:15px 0 0; height:1px; display:block; background:#CE782285;  transition:all 400ms ease-out 0s;}
.boxicon:hover > div:after{ width:80px;}
#sliderbox{ height:500px !important; overflow:hidden;}
#sliderbox *{ max-height:500px!important;}
#sliderbox img{ height:500px !important; max-height:500px!important; background-size:cover;}
#sliderbox .twentytwenty-overlay{ background: #0D0D0D;
background: linear-gradient(0deg, rgba(13, 13, 13, 1) 0%, rgba(13, 13, 13, 0) 60%); }

.acf-gallery-grid { display:flex; flex-wrap:wrap; gap:10px;}
.acf-gallery-item { position: relative; overflow: hidden; aspect-ratio: 4/3; width:calc(50% - 5px);}
.acf-gallery-item a { display: block; width: 100%; height: 100%; }
.acf-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.acf-gallery-item:hover img { transform: scale(1.07); }
.acf-overlay { position: absolute; inset: 0;        background: rgba(0,0,0,0.55);        display: flex; flex-direction: column;        align-items: center; justify-content: center;        gap: 10px; opacity: 0;        transition: opacity 0.4s ease;}
.acf-gallery-item:hover .acf-overlay { opacity: 1; }
.acf-view-icon { font-family: "JetBrains Mono", Sans-serif; font-size: 10px; line-height:14px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.4em; border:1px solid #737170; padding:5px 10px; color:#fff;}
.acf-caption { color:#f9f9f9; font-size:12px; line-height:20px; text-align:center; padding:0 16px; line-height: 1.5; font-family:"Inter", Sans-serif; margin: 0 auto; max-width:240px;}
.elementor-slideshow__title {  font-size: 14px; font-weight: 400;}
#contactbox select{ color:#4A4B4B!important;}

#contactbox .boxselect.unselected { color: #4A4B4B!important;  }
#contactbox .boxselect.selected { color:#F5F5F5!important; }
.wpcf7 form .wpcf7-response-output{ margin:0!important; color:#fff!important; text-align:center!important;}

.elementor-invisible{  transform: translateY(20px) !important; opacity: 0;}
#contactbox select option{ background:#000; color:#fff; border-radius:0;}

@media only screen and (max-width: 740px) {
.projectbutton{ display:block; text-align: center;}
#mobilemenu .elementskit-navbar-nav li a{ text-align:center; display:block;}
#mobilemenu .elementskit-navbar-nav li.projectbutton a{ display:inline-block; margin:10px auto 0; border:1px solid #ce7822; color:#fff;}
#mobilemenu .elementskit-navbar-nav li.projectbutton a:hover{ background:#ce7822; color:#fff;}
	
.acf-gallery-grid { flex-direction: column;}
.acf-gallery-item { width:100%;}
}