/*
Theme Name: Careers at STUDIOI	
Theme URI: https://studioi.ae
Version: 1.0
Description: Child Theme of Divi
Author: STUDIOI
Template: Divi
*/
@import url("../Divi/style.css");





.si-button {
  border:1px solid #fff!important;
  border-radius:0px!important;
  font-family: Manrope!important;
  color:#fff;
  font-weight:400!important;
  font-size:16px!important;
}

.si-button-job {
  border:1px solid #303033!important;
  border-radius:0px!important;
  font-family: Manrope!important;
  color:#303033;
  font-weight:400!important;
  font-size:16px!important;
}

h1, h2, h3, h4, h5, h6, span, p {
  font-family: Manrope;
}

h1 {
  font-size: 64px;
  color: #fff;
}

h2 {
  font-size:32px;
}

h6 {
  font-size: 12px;
  font-weight: 700 !important;
  color:  #df6f38;
  text-transform:uppercase;
  letter-spacing: .5em;
}

p {
  font-size:16px;
  font-weight:400;
  line-height:1.4;
}

.job-single-header {
  display: flex;
  width:100%;
}

.logo-single-j {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
  padding-top:5px;
}

h1, h2, h3, h4, h5, h6, span, p {
  font-family: Manrope;
}

h1 {
  font-size: 64px;
  color: #fff;
}

h2 {
  font-size:32px;
}

h6 {
  font-size: 12px;
  font-weight: 700 !important;
  color:  #df6f38;
  text-transform:uppercase;
  letter-spacing: .5em;
}





@media (max-width: 767px) {
	h1 {
	font-size: 36px;	
	}
	h2 {
	font-size: 22px;	
	}
	
}



#jobs-filter {
    margin-bottom: 20px;
}

#jobs-filter select,
#jobs-filter input {
    margin-right: 10px;
    padding: 8px;
    font-size: 16px;
}



.job-meta span {
    margin-right: 15px;
    font-size: 14px;
    color: #555;
}

.job-arrow {
    font-size: 18px;
    color: #888;
	width: 20px;
	position: absolute;
	right: 20px;
	top: 20px;
}

#job-search {
  width: 100%; /* Make it full width */
  border: none; /* Remove border */
  padding: 18px 20px 18px 60px!important; /* Add padding */
  box-sizing: border-box; /* Ensure padding doesn't affect width */
  outline: none; /* Remove default focus outline */
box-shadow: 0 0 16px rgba(169, 169, 169, 0.1);
  font-size: 16px; /* Adjust font size */
  background-color:#fff;
}

#job-search::placeholder {
  color: #aaa; /* Optional: change placeholder text color */
}

.search-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.search-container img {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  pointer-events: none; /* Prevent the icon from blocking input */
  width:30px;
	height:30px;
  border:none;
}
.job-meta img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.job-meta {
  display:inline-flex;
}

.dropdown-filters {
  margin:20px 0px;
}

.dropdown-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.dropdown-filters select {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    padding: 12px 40px 12px 16px; /* More padding */
    border: 1px solid #303033;
    background: none;
    appearance: none; /* Hides default dropdown arrow */
    position: relative;
    cursor: pointer;
}

/* Custom dropdown icon */
.dropdown-filters select {
    background-image: url('/wp-content/themes/divi-child/icons/dropdown_icon.svg');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

/* Style on hover/focus */
.dropdown-filters select:hover,
.dropdown-filters select:focus {
    border-color: #df6f38;
    outline: none;
}

/* Shimmer Animation */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Skeleton Loader Styles */
.skeleton-loader {
    background: linear-gradient(90deg, #f0f0f0 15%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1s infinite linear;
}

/* Job Item - Use flex to make sure the placeholders are aligned and fill the container */
.job-item.skeleton-loader {
    display: flex;
    flex-direction: column;
    background-color: #f9f9f9;
    padding: 35px 25px;
    margin-bottom: 20px;
    border: none;
    pointer-events: none;
}

/* Make sure the job info expands fully */
.job-info {
    display: flex;
    flex-direction: column;
    width: 100%; /* Ensure full width of the container */
}

/* Skeleton Placeholder */
.skeleton-loader span, .skeleton-loader .job-title-placeholder {
    display: block;
    width: 100%; /* Ensure it takes the full width of the parent */
    height: 20px;
    background-color: #e0e0e0; /* Light gray */
    border-radius: 4px;
    margin: 5px 0;
}

.skeleton-loader span, .skeleton-loader .job-meta-placeholder {
    height: 16px;
  }
  
/* Remove Links */
.job-item skeleton-loader {
    pointer-events: none; /* Disable links */
    text-decoration: none; /* Remove underline */
  
}

/* Initially Hide the Loader */
#job-results-loader {
    display: none;
}

/* Ensure Job Title and Meta are Styled */
.job-title-placeholder, .job-meta-placeholder {
    background-color: #e0e0e0; /* Light gray */
}

.job-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    margin-bottom: 20px;
    text-decoration: none;
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: translateY(10px); /* Default to start below */
}

.job-item:hover {
    box-shadow: 0 0 20px rgba(169, 169, 169, 0.1);
    transform: translateY(-1px); /* Hover lifts item slightly */
}

.job-item {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Delay for each job item */
.job-item:nth-child(1) {
    animation-delay: 0.1s;
}
.job-item:nth-child(2) {
    animation-delay: 0.2s;
}
.job-item:nth-child(3) {
    animation-delay: 0.3s;
}
.job-item:nth-child(4) {
    animation-delay: 0.4s;
}
.job-item:nth-child(5) {
    animation-delay: 0.5s;
}
  
@media (max-width: 980px) {
  #job-location  {
  width: 100%;
  }
  .dropdown-filters {
  justify-content: space-between;
  flex-wrap: wrap;
  }
  #jobtype {
  width: 40%;
  }
  #job-department {
  width: 55%;
  text-overflow: ellipsis;
  white-space: nowrap;
  }
  }

.si-button {
  border:1px solid #fff!important;
  border-radius:0px!important;
  font-family: Manrope!important;
  color:#fff;
  font-weight:400!important;
  font-size:16px!important;
}

.si-button-job {
  border:1px solid #303033!important;
  border-radius:0px!important;
  font-family: Manrope!important;
  color:#303033;
  font-weight:400!important;
  font-size:16px!important;
}

h1, h2, h3, h4, h5, h6, span, p {
  font-family: Manrope;
}

h1 {
  font-size: 64px;
  color: #fff;
}

h2 {
  font-size:32px;
}

h6 {
  font-size: 12px;
  font-weight: 700 !important;
  color:  #df6f38;
  text-transform:uppercase;
  letter-spacing: .5em;
}

p {
  font-size:16px;
  font-weight:400;
  line-height:1.4;
}

.job-single-header {
  display: flex;
  width:100%;
}

.logo-single-j {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
  padding-top:5px;
}

h1, h2, h3, h4, h5, h6, span, p {
  font-family: Manrope;
}

h1 {
  font-size: 64px;
  color: #fff;
}

h2 {
  font-size:32px;
}

h6 {
  font-size: 12px;
  font-weight: 700 !important;
  color:  #df6f38;
  text-transform:uppercase;
  letter-spacing: .5em;
}





@media (max-width: 767px) {
	h1 {
	font-size: 36px;	
	}
	h2 {
	font-size: 22px;	
	}
	
}

@media (min-width: 981px) {
::-webkit-scrollbar {
  width: 8px; /* Set width of the scrollbar */
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; /* Color of the scrollbar thumb */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* Color of the scrollbar thumb on hover */
}}


/* Remove default list bullet */
.job-description-container ul li {
    list-style-type: none;
    position: relative;
    padding-left: 30px;
  	margin-bottom: 10px;
  	font-family: Manrope;
  	line-height: 1.4;
    font-size: 16px;
  	font-weight:400;
  	color: #303033;
}

/* Add SVG as a list item icon */
.job-description-container ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px; /* Adjust width */
    height: 10px; /* Adjust height */
    background-image: url('/wp-content/themes/divi-child/icons/li-icon.svg'); /* Adjust the path */
    background-size: contain;
    background-repeat: no-repeat;
}

.job-location img {
  width:24px;
  height:24px;
  margin-right:10px;
}

.job-details {
  display: inline-flex;
  font-size: 16px;
}
.job-location {
  display: inline-flex;
}


.si-apply-now {
  border:1px solid #df6f38!important;
  border-radius:0px!important;
  background-color: #df6f38!important;
  font-family: Manrope;
  color:#fff;
  text-transform:uppercase;
  letter-spacing: .2em;
  font-size:14px!important;
  padding: 20px 50px!important;
  min-width:100%;
  text-align:center;
}

.job-location img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.job-posting-expiry-info {
  display: flex;
  align-items: center;
  height: 64px;
  padding-left: 20px;
  margin-bottom:0px!important;
}

job-posting-expiry-inner-container {
  align-items: center;
}

.job-description-container ul li, .job-description-container p {
  	color: #303033;
}

.job-description-container h3 {
  font-size: 32px;
}

.careers-single-img-container-divider {
    position: relative; /* Ensure relative positioning for absolute child */
}



.careers-single-img-container-divider::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;  /* Adjust width as needed */
    height: 60px; /* Adjust height as needed */
    background-image: url('/wp-content/themes/divi-child/icons/triangle-corner-bl.svg'); /* Adjust path */
    background-size: contain;
    background-repeat: no-repeat;
  	visibility: visible;
}

.et_pb_toggle_title:before {
   content: "\4c";
   transition: all .3s ease-in-out;
}

.et_pb_toggle_open .et_pb_toggle_title:before {
   content: "\4d";
   transform: rotate(180deg);
}

.de_fb_name-title_wrapper {
 margin-bottom: 0px; 
}

.de_fb_submit_container, .divi-form-submit-container, .divi-form-submit {
  width: 100%;
}

.full-height-column {
    min-height: 100%;  /* Ensure the column takes at least 100% of the height */
    display: flex;     /* Use flexbox layout */
    flex-direction: column; /* Stack the child elements vertically */
}

.full-height-column .et_pb_module_inner {
    display: flex;
    flex-direction: column;  /* Stack the modules vertically */
    flex-grow: 1;  /* Make the content stretch to fill remaining space */
}

.full-height-column .et_pb_module_inner > .et_pb_module {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensure the first and last modules are glued to the top and bottom */
}

.full-height-column.de_fb_form {
  min-height: calc(80vh - 61px);
}

#application-form .job-details {
  font-size: 12px!important;
}

#application-form .job-details img {
  width: 20px!important;
  height: 20px!important;
}

@media (max-width: 400px) {
  .job-details {
    font-size:12px;
  } }