/*
 Theme Name: DJ-2025
 Template: twentytwentyfour
 Version: 1.0.0 September 30.2024
*/
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Extra+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');
@font-face {
    font-family: 'AvantGarde';
    /* font-weight: 400; */
    font-style: normal;
    src: url('./fonts/avant-garde/avantgarde.woff2') format('woff2');
}
body {
    font-family: 'Askan', serif;
}
html {
  scroll-behavior: smooth; 
}
a:active, a:focus {
  outline: 0;
  border: none;
  -moz-outline-style: none;
}
/* If the browser window is 782px or smaller */
@media only screen and (max-width: 782px) {
	.hello-headline {
		margin-left: -26px !important;
		font-size: 5.7rem !important;
	}
	.center-icon {
		display:flex;
		justify-content: center;
		align-items: center;
	    padding-bottom: 0px;
	}
	.hello-headline {
       padding-top: 24px;
    } 
	.wp-container-core-columns-is-layout-9c22b1e3 {
    /* space between icon and text */
     gap: 0.5em 0;
   }
	.center-txt {
		text-align: center;
	}
}
.nav-block {
 top: 50% !important;
} 
/* If the browser window is 600px or smaller */
@media only screen and (max-width: 600px) {
  body {
    font-size: 18px;
  }
}
/* remove underline everywhere */
.wp-block-post-title a {
text-decoration: none;
}
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
 text-decoration: none;
}
/* ********************** */
/* set hamburger menu position */  
.wp-block-navigation__responsive-container-close {
left:0;
}
.has-modal-open .wp-block-navigation__responsive-close {
    margin-left: auto;
    margin-right: auto;
    max-width: 1400px;
}
.wp-block-post-title a {
    color: #111111;
}
/* ********************** */
.highlight {
  display: inline;
  padding: .18em 0;
  background: #00000087;
  color: #ffffff;
  box-shadow: .5em 0 0 #00000087, -.5em 0 0 #00000087;
}
/* ********************** */
.wp-block-query-title span {
font-style: normal;
}
/* ********************** */
/* change the details block icon 
 * reference: https://www.wppagebuilders.com/add-custom-icon-to-details-block-to-gutenberg/ 
 * */
/* hide the default arrow icon */
.is-style-arrow-icon-details summary {
    list-style-type: none;
}
.wp-block-details.wpp-details[open] {
    /* border: solid 1px #ffffff; */
    padding-bottom: 30px;
}   
.wp-block-details.wpp-details summary {
    /* background: #f5f5f5; */
    /* padding: 3px 15px; */
    margin: 0;
    list-style-position: outside;
    font-family: 'AvantGarde Bk BT', Askan, serif;
    font-size: 1.4rem;
    font-weight: 500;
}
.wp-block-details.wpp-details > * {
    /* margin: 10px 20px;
    margin-block-start: 1.5rem; */
}
.wp-block-details.wpp-details summary::marker {
    display: none;
}
.wp-block-details.wpp-details summary::-webkit-details-marker {
    color: transparent;
    width: 0;
}
/* OPEN ICON */
.wp-block-details.wpp-details summary::before {
    content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzExMTExMSIgZD0iTTExIDExVjJoMnY5aDl2MmgtOXY5aC0ydi05SDJ2LTJ6Ii8+PC9zdmc+");
    display: inline-block;
    width: 16px;
    margin-right: 7px;
    vertical-align: top;
}
.wp-block-details.wpp-details[open] summary::marker {
    content: '';
}
 /* CLOSE ICON */
.wp-block-details.wpp-details[open] summary::before {
    content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzExMTExMSIgZD0iTTEwLjU4NiAxMkwyLjc5MyA0LjIwN2wxLjQxNC0xLjQxNEwxMiAxMC41ODZsNy43OTMtNy43OTNsMS40MTQgMS40MTRMMTMuNDE0IDEybDcuNzkzIDcuNzkzbC0xLjQxNCAxLjQxNEwxMiAxMy40MTRsLTcuNzkzIDcuNzkzbC0xLjQxNC0xLjQxNHoiLz48L3N2Zz4=");
}
/* ADs stop repsonsive resize on mobile */
.no-responsive {
width: 300px !important;
} 
/* footer ******************************* */
.footer-link {
  font-family: "Saira Extra Condensed", sans-serif;
  font-weight: 400;
  letter-spacing: 0.05rem;
  font-style: normal;
	text-transform: uppercase;
	text-decoration: none !important;
}

.work-categories {
  font-family: "Saira Extra Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  text-decoration: none !important;
}
/* hide the arrow icon when a details block is open - really just an issue in Safari */
.is-style-arrow-icon-details[open]>summary {
 list-style-type: none;
}
.container {
	display: flex;
	align-items: center;
	justify-content: space-around; 
	/* gap: 10px; */
	flex-wrap: wrap;
}
.card {
	position: relative;
	width: 100%; 
	background: rgba(0,0,0,0.9); 
	overflow: hidden;
	cursor: pointer;
}
img {
	max-width: 100%;
	display: block;
}
.card img {
	transform: scale(1.01);
	transition: 0.3s ease-out;
}
.card:hover img {
	transform: scale(1.3);
	opacity: 0.36;
}
.overlay {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	padding: 16px;
	text-align: left;
}
.card-title {
  position: absolute;
  line-height: 100% !important;
  bottom: 16px;
  transform: translateY(18px);
  opacity: 0;
  transition: all .3s ease-out;
  color: #ffffff;
}
.view-more {
  font-family: "Chandia Decorative PERSONAL", "Great Vibes", "AvantGarde Bk BT", sans-serif; 
  font-weight: 400;
  font-style: normal;
  color: rgba(255, 255, 255, 0.85) !important;
  position: inline;
  text-align: center;
  padding-top: 8%;	
  padding-right: 36px;
  line-height: 100% !important;
  transform: translateY(18px);
  opacity: 0;
  transition: all .3s ease-out;
  color: #ffffff;
}
/* If the browser window is 500px or smaller */
@media only screen and (max-width: 500px) {
  .card-title {
	padding-bottom: 5px;  
  }
}
.card-description {
  position: absolute;
  font-family: "Saira Extra Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
	text-transform: uppercase;
  bottom: 0px;
	transform: translateY(18px);
	opacity: 0;
	transition: all .3s ease-out 0.0s;
  color: #cccccc;
}
.card:hover .overlay .card-title {
	opacity: 1;
	transform: translateY(0);
}
.card:hover .overlay .card-description {
	opacity: 1;
	transform: translateY(0);
}
.card:hover .overlay .view-more {
	opacity: 1;
	transform: translateY(0);
}
/* reveal-element.css */
.reveal-element{
  position: relative;
  transform: translateY(72px);
  opacity: 0;
  transition: 1.0s all ease;
}
.reveal-element.active{
  transform: translateY(0);
  opacity: 1;
}
/* contact page animations ******************************** */
@keyframes anim02 {
  0% {
    opacity: 0;
    visibility: hidden; 
    filter: blur(5px);
    transform: translate(-36px, 0px); /* x pos, y pos */
 
  }
  100% {
    opacity: 1;
    visibility: visible; 
    filter: blur(0px);
    transform: translate(0, 0); /* End at original position */

  }
}
@keyframes anim01 {
  0% {
    opacity: 0;
    visibility: hidden; 
    filter: blur(5px);
    transform: translate(0px, 36px); /* x pos, y pos */
 
  }
  100% {
    opacity: 1;
    visibility: visible; 
    filter: blur(0px);
    transform: translate(0, 0); /* End at original position */

  }
}
.title-01 {
  opacity: 0;
  visibility: hidden; 
  animation: anim01 0.75s ease-in-out 0.5s forwards; /* duration, delay */
}
.txt-01 {
  opacity: 0;
  visibility: hidden; 
  animation: anim01 0.75s ease-in-out 3s forwards; /* duration, delay */
}
.txt-02 {
  opacity: 0;
  visibility: hidden; 
  animation: anim01 0.75s ease-in-out 6.5s forwards; /* duration, delay */
}
.form-field-01 {
  opacity: 0;
  visibility: hidden; 
  animation: anim02 0.75s ease-in-out 10s forwards; /* duration, delay */
}
.form-field-02 {
  opacity: 0;
  visibility: hidden; 
  animation: anim02 0.75s ease-in-out 10.3s forwards; /* duration, delay */
}
.form-field-03 {
  opacity: 0;
  visibility: hidden; 
  animation: anim02 0.75s ease-in-out 10.6s forwards; /* duration, delay */
}
.DJ-2025-submit-btn {
  opacity: 0;
  visibility: hidden; 
  animation: anim02 0.75s ease-in-out 10.9s forwards; /* duration, delay */
} 
/* contact form style ******************************** */
.wpforms-submit-container {
 padding-left: 4px !important;
}
#wpforms-11938-field_3, #wpforms-11938-field_2, #wpforms-11938-field_5 {
  background-color: rgba(255, 255, 255, 0.36) !important;
  border: 4px solid rgba(248, 60, 254, 0.36) !important;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.89) !important; /* outer border with a 3px gap */
  border-radius: 9px !important; 
}
#wpforms-11938-field_3:focus, #wpforms-11938-field_2:focus, #wpforms-11938-field_5:focus {
 background-color: rgba(255, 255, 255, 0.72) !important;
 box-shadow: 0 0 0 3px rgba(137, 210, 227, 1) !important; /* outer border with a 3px gap */
 transition: all 0.3s ease-in-out;
}
#wpforms-11938-field_3:not(:focus), #wpforms-11938-field_2:not(:focus), #wpforms-11938-field_5:not(:focus) { 
  background-color: rgba(255, 255, 255, 0.36) !important;
  border: 4px solid rgba(248, 60, 254, 0.36) !important;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.89) !important; /* outer border with a 3px gap */
  transition: all 0.3s ease-out;
}
/* When any of the input fields' container has focus (using focus-within), apply styles to the label and asterisk */
#wpforms-11938-field_3-container:focus-within .wpforms-field-label,
#wpforms-11938-field_2-container:focus-within .wpforms-field-label,
#wpforms-11938-field_5-container:focus-within .wpforms-field-label {
  color: rgba(137, 210, 227, 1) !important; 
  transition: all 0.3s ease-in-out;
}
/* Styling the required asterisk when the field is focused */
#wpforms-11938-field_3-container:focus-within .wpforms-required-label,
#wpforms-11938-field_2-container:focus-within .wpforms-required-label,
#wpforms-11938-field_5-container:focus-within .wpforms-required-label {
  color: rgba(137, 210, 227, 1) !important; 
  transition: all 0.3s ease-in-out;	
}
/* When the input fields do not have focus (using :not(:focus-within)), return the label to white */
#wpforms-11938-field_3-container:not(:focus-within) .wpforms-field-label,
#wpforms-11938-field_2-container:not(:focus-within) .wpforms-field-label,
#wpforms-11938-field_5-container:not(:focus-within) .wpforms-field-label {
  color: #f4f4f4 !important; /* Default label color */
  transition: all 0.3s ease-in-out; /* Smooth transition */
}

/* Styling the required asterisk when the field is not focused */
#wpforms-11938-field_3-container:not(:focus-within) .wpforms-required-label,
#wpforms-11938-field_2-container:not(:focus-within) .wpforms-required-label,
#wpforms-11938-field_5-container:not(:focus-within) .wpforms-required-label {
  color: #f4f4f4 !important; /* Default color for required asterisk */
  transition: all 0.3s ease-in-out; /* Smooth transition */
}
/* submit button */
.DJ-2025-submit-btn {
  border: 4px solid rgba(248, 60, 254, 0.36) !important;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.89) !important; /* outer border with a 3px gap */
  border-radius: 9px !important; 
  background-color: rgba(248, 60, 254, 0.36) !important;
  font-family:"Saira Extra Condensed", sans-serif !important;
  font-weight: 400 !important;
  color: #f4f4f4 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.05rem !important;
}
.DJ-2025-submit-btn:hover {
 box-shadow: 0 0 0 4px rgba(137, 210, 227, 1) !important; /* outer border with a 3px gap */
}
.DJ-2025-submit-btn:active {
	border: 4px solid rgba(248, 60, 254, 0.36) !important;
	outline:none !important;
}

div.wpforms-container-full .wpforms-form label.wpforms-error, div.wpforms-container-full .wpforms-form em.wpforms-error {
        color: #eea4f1;
}
.wpforms-container .wpforms-required-label, .wp-core-ui div.wpforms-container .wpforms-required-label {
    color: #eea4f1;
}
div.wpforms-container-full .wpforms-form em.wpforms-error:before {
    background-color: #eea4f1;
}
.wpforms-field-label {
    font-family: "Saira Extra Condensed", sans-serif !important;
    font-weight: 400 !important;
    color: #f4f4f4 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    font-size: 1.2rem !important;
    letter-spacing: 0.05rem !important;
}