/* 
Theme Name: Divi Child AdCraft
Theme URL: https://www.adcraftstudio.com.au
Description: Divi Child Theme by AdCraft Studio
Theme Author: AdCraft Studio
Author URL: https://www.adcraftstudio.com.au
Template: Divi
Version: 1.0.0 
Text Domain: divi-child-adcraft
*/

/* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */

/* --------- GENERAL CSS ADJUSTMENTS ---------*/

/* Item and Row Alignments */
.web-row {
	display: flex;
	flex-wrap: wrap;
}

.web-align {
	margin:auto;
}

/* Change column order for Mobile */
@media screen and (max-width: 768px){
    .web-order {
        order: 2;
    }
}

/* Button in-line */
.btn-inline .et_pb_button_module_wrapper {
    display: inline-block;
    margin: 0 10px;
}

.btn-inline {
    text-align: center !important;
}

/* Hide Title on images on hover */
img{pointer-events:none}

/* Equal Column Height and Align Button Bottom of Column */
.column-flex {
    display: flex!important;
    flex-direction: column!important;
    justify-content: space-between;
}

/*--------- ADDITIONAL FEATURES CUSTOMISATIONS ---------*/

/* MENU Underline Hover Effect */
.et-menu-nav>ul>li.current-menu-item>a::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
}

.et_pb_menu li a:before {
    content: "";
    position: absolute;
    z-index: -2;
    left: 0;
    right: 100%;
    bottom: 0%;

    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

/* Gradient Line only on Desktop */
@media screen and (min-width: 980px) { .et_pb_menu li a:before {
    background: linear-gradient(90deg,#D29880 0%, #E9D0BF 50%, #DB9685 100%) !important; /*** COLOR OF THE LINE ***/
    height: 4px; /*** THICKNESS OF THE LINE ***/
}
}

/* Gradient Line Sub Menu Disappear on Desktop */
@media screen and (min-width: 980px) { .et_pb_menu .sub-menu li a:before {
    background: linear-gradient(90deg,#D29880 0%, #E9D0BF 50%, #DB9685 100%) !important; /*** COLOR OF THE LINE ***/
    height: 4px; /*** THICKNESS OF THE LINE ***/
    display: none;
}
}

.et_pb_menu li a:hover {
    opacity: 1 !important;
}
.et_pb_menu li a:hover:before {
    right: 0;
}
.et_pb_menu li li a:before {
    bottom: 10%;
}

/* Equalise the Tabs */
.equal-tabs .et_pb_tabs_controls li {
    width: 33.33%; /*change width of tabs here depending on the number of tabs you have*/
    text-align: center;
}
@media screen and (max-width: 768px){ /*change device breakpoint here depending on the number of tabs you have*/
.equal-tabs .et_pb_tabs_controls li {
    width: 100%; 
  text-align: center;
}
}

/* Blurb Module inline Button - Expanding Hover Section */
.pa-blurb-button {
	color: #0a0a0a!important;
    border-width: 0px!important;
    letter-spacing: 4px;
    font-size: 16px;
    font-family: 'Raleway',Helvetica,Arial,Lucida,sans-serif!important; /*change to website font*/
    font-weight: 700!important;
    background-color: #e7ab92;
	width: 100%;
	padding: 10px;
}

.pa-blurb-button:hover {
	color: #fff!important;
}

.et_pb_blurb .pa-blurb-button {
	display: none;
}

.et_pb_blurb:hover .pa-blurb-button {
	display: inline;
}

/* Change Highlight Colour */
::selection {
  background: #a4cac5; /* WebKit/Blink Browsers */
	color: #fff;
}
::-moz-selection {
  background: #a4cac5; /* Gecko Browsers */
}

/* Fixed Menu Changes */

/*set the default background color of the header section*/
.craft-header {
	background: transparent;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
}

.craft-fixed-header .et_pb_image, .craft-fixed-header .et_pb_menu__logo img {
	content: url();
	max-height: 45px;
}

.craft-fixed-header {
	background-color: #e2e3e170!important;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-o-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
	box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3);
}

.craft-fixed-header .et_pb_menu_0_tb_header.et_pb_menu .nav li ul, .craft-fixed-header .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu, .craft-fixed-header .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu ul {
	background-color: #e2e3e1!important;
	border-color: #45555f!important;
}

/* Highlight Parent Menu of Item of Selected Sub Page */

/* Colour of Menu Text */
.et-menu-nav a {
	color: #0a0a0a;
}

.craft-fixed-header .et-menu-nav a {
	color: #0a0a0a;
}

.current-menu-item > a {
	color: #0a0a0a!important;
}

/* Highlight the Parent Menu Item */
.current-menu-ancestor > a {
  color: #0a0a0a!important;
}


/*--------- GRAVITY FORMS UNIVERSAL FORM CSS CUSTOMISE ---------*/



/*--------- MOBILE MENU CUSTOMISE AND TRANSFORM ---------*/

/* MENU FIX Blank Gap and Mobile Adjustment - Custom Menu*/
.et_pb_section_1_tb_header, .et_pb_section_0_tb_header {
    left: auto!important;
    transform: none!important;
/*     padding-left: 12px;
    padding-right: 12px; */
}

/* Customise Mobile Menu */
.et_pb_toggle_open .et_pb_toggle_title:before {
	display: block !important;
	content: "\e04f";
	color: #00539f;
}

/* Spacing of Menu SubItems */
.et-menu li li a {
    padding: 4px 20px;
}

/*Menu Dropdown */
#top-menu li li a {
	padding: 6px 6px;
}

#top-menu li{
    font-weight: 500 !important;
    padding-right: 40px !important;
}

#top-menu>li:last-child{
    font-weight: 900 !important;
    font-family: 'Novel Mono Pro Regular',Helvetica,Arial,Lucida,sans-serif;
}

#top-menu li li a:hover {
	background: #fdb714;
	color:#fcfcfc;
}

/* Mobile Menu position */
@media (max-width: 980px) {
 .container.et_menu_container { 
 width: calc( 100% - 60px);
 }
}

.et_mobile_menu {
	margin-left: -30px;
	padding: 5%;
	width: calc( 100% + 60px);
	border-top: 3px solid #efefef;
	font-size: 20px!important;
}

.mobile_menu_bar:before {
	color:	#0b1238;
}

.mobile_nav.opened .mobile_menu_bar:before {
 	content: "\4d";
	color: #0b1238;
}

#main-header{
    box-shadow: none !important;
}
@media only screen and (max-width: 980px) {
.et_fixed_nav #main-header, 
.et_fixed_nav #top-header,
.et_non_fixed_nav.et_transparent_nav #main-header,
.et_non_fixed_nav.et_transparent_nav #top-header {
    position: fixed;
}
}
.et_mobile_menu {
    overflow: scroll !important;
    max-height: 80vh;
}

/* Mobile Menu Dropdowns */
.et_pb_menu .et_mobile_menu .menu-item-has-children > a, #main-header .et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    position: relative;
}
.et_pb_menu .et_mobile_menu .menu-item-has-children > a.toggle-menu, #main-header .et_mobile_menu .menu-item-has-children > a.toggle-menu {
    font-family: 'ETmodules';
    font-size: 18px;
    padding: 10px;
    z-index: 10;
    display: inline-block;
    position: absolute;
    right: 15px;
 }
.et_pb_menu .et_mobile_menu .menu-item-has-children.visible > a.toggle-menu, #main-header .et_mobile_menu .menu-item-has-children.visible > a.toggle-menu {
     transform: rotate(180deg);
}

.et_pb_menu .et_mobile_menu ul.sub-menu, #main-header .et_mobile_menu ul.sub-menu {
    display: none !important;
    visibility: hidden !important;
    transition: all 1.5s ease-in-out;
}
.et_pb_menu .et_mobile_menu .visible > ul.sub-menu, #main-header .et_mobile_menu .visible > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
}




@media(max-width: 980px) {
    .services-column {
        width:50%!important
    }
}


.kraken-projects-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.kraken-project {
    position: relative;
    background-color: #777; /* Placeholder in case the image doesn't load */
    overflow: hidden;
}

.kraken-project-link {
    display: block;
    padding-top: 61.29%; /* 100 / 0.62 to maintain the aspect ratio */
    background-size: cover;
    filter: brightness(45%);
    transition: filter 300ms ease 0ms;
    background-position: center;
    position: relative;
    color: white;
    text-decoration: none;
}

.kraken-project-link:hover{
    filter: brightness(100%);
}

.kraken-project-title {
    position: absolute;
    bottom: 0;
    width: 100%;
    color: #ffffff; /* Semi-transparent black background */
    text-align: left;
    padding: 10px;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .kraken-project-link {
    display: block;
    padding-top: 161.29%; /* 100 / 0.62 to maintain the aspect ratio */
    background-size: cover;
    filter: brightness(45%);
    transition: filter 300ms ease 0ms;
    background-position: center;
    position: relative;
    color: white;
    text-decoration: none;
}
    .kraken-projects-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .kraken-project-link {
    display: block;
    padding-top: 161.29%; /* 100 / 0.62 to maintain the aspect ratio */
    background-size: cover;
    filter: brightness(45%);
    transition: filter 300ms ease 0ms;
    background-position: center;
    position: relative;
    color: white;
    text-decoration: none;
}
    .kraken-projects-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .kraken-project-link {
    display: block;
    padding-top: 161.29%; /* 100 / 0.62 to maintain the aspect ratio */
    background-size: cover;
    filter: brightness(45%);
    transition: filter 300ms ease 0ms;
    background-position: center;
    position: relative;
    color: white;
    text-decoration: none;
}
    .kraken-projects-container {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Projects slider  */
.swiper-slide {
    display: flex !important;
    align-items: center ; /* Align content to the top */
     /* Align content to the start (left) */
    justify-content: center;
}

/* Project Image Container */
.project-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-height: 500px; /* Maximum height for the image */
    width: calc(550px * 0.62); /* Width is 62% of the height */
    flex-grow: 0;
    flex-shrink: 0;
}

/* Aspect Ratio Hack for the Image Container */
.project-image::before {
    content: '';
    display: block;
    padding-top: calc(100% / 0.62); /* Height is 161.29% of the width */
}

/* Adjustments for Swiper navigation to match the design */
.swiper-button-prev, .swiper-button-next {
    z-index: 10;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.swiper-button-prev {
    left: 10px;
    color: #0b1238 !important;
}
.swiper-button-next {
    right: 10px;
    color: #0b1238 !important;
}

.swiper-pagination {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
}

/* Project Content */
.project-content {
    width: 100%; /* Remaining space for content */
    padding: 20px 40px; /* Padding inside the content area */
    box-sizing: border-box; /* Includes padding in the width calculation */
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 500px;
}

/* Title and Excerpt */
.project-title {
    font-size: 2.5em;
    line-height: 1.5em;
    margin-bottom: 1em;
    text-align: left;
}

.project-excerpt {
    margin-bottom: 1em; /* Space after the excerpt */
    text-align: left; /* Align excerpt to the left */
}

/* Meta Data Styles */
.project-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1em;
    text-align: left;
    background: #efefef;
    padding: 10px;
    border-radius: 4px;
}

.meta-item {
    display: flex;
    flex-direction: column; /* Stacks label above the value */
}

.meta-item strong {
    text-align: left; /* Align meta labels to the left */
    font-weight: 500;
    font-size: 14px;
}

/* Services Styles */
.project-services {
    font-size: 14px; /* Font size for services list */
    margin-top: 1em; /* Space above the services list */
    text-align: left; /* Align services list to the left */
}

/* Service Tag Styles (if you have tags to display) */
.service-tag {
    display: inline-block; /* Aligns tags inline */
    margin-right: 10px; /* Space between tags */
    margin-bottom: 10px; /* Space below tags if they wrap */
    text-align: left; /* Align tags to the left */
    /* Add more styles for tag appearance if needed */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .swiper-slide {
        flex-direction: column;
    }

    .project-image {
        width: 100%; /* Full width on smaller screens */
        height: auto; /* Auto height to maintain aspect ratio */
    }

    .project-image::before {
        padding-top: 62%; /* Adjust padding-top to maintain aspect ratio on smaller screens */
    }

    .project-content {
        width: 100%; /* Full width on smaller screens */
    }

    .project-meta {
        flex-direction: column; /* Stack meta items on top of each other on smaller screens */
        align-items: flex-start; /* Align meta items to the start */
    }
}


.meta-item span {
    font-weight: 700;
    font-size: 18px;
}

.project-services strong {
    font-weight: 500;
}
.project-services {
    display: flex; /* Use flexbox to align items */
    flex-direction: column; /* Stack items vertically */
}

span.tags-container {
    font-weight: 700;
    font-size: 18px;
}


/* individual project gallery  */
.kraken-project-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.kraken-project-gallery a img {
    width: 100%;
    height: auto;
    display: block;
}


/* lightbox  */

.lb-prev, .lb-next {
    opacity: 1 !important;
}
.kraken-project-gallery a img {
    width: 100%;
    height: 100%; 
    object-fit: cover;
    aspect-ratio: 16/9;
    display: block;
}
.lb-outerContainer, .lb-dataContainer {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: fixed !important;
    background-color: transparent !important;
}
.lb-dataContainer {
    width: 100% !important; /* Ensure it spans the width of the screen */
    bottom: 0 !important; /* Position it at the bottom */
    left: 0 !important; /* Align it to the left */
    position: absolute !important; /* Positioning relative to the outer container */
}
.lb-prev, .lb-next, .lb-close {
    top: -100px !important; /* Example to move arrows up, adjust as needed */
}
.lightboxOverlay{
    background-color: #efefef !important;
}
.lightbox .lb-image{
    border: none !important;
}
.dipl_team_slider .layout2 .dipl_team_content_wrapper{
    margin: auto !important;
}

.current-menu-item {
    text-decoration: underline 2px #0b1238;
    text-underline-offset: 10px;
}


.home-hero .et_parallax_bg{
    background-blend-mode:overlay !important;
    background-color: #00000099;
}