/* ===================================================================================



Theme Name: Bexon Child

Theme URI: https://bexon.themejunction.net/

Author: Theme Junction

Author URI: https://themeforest.net/user/theme-junction/portfolio

Description: Bexon is a Corporate Business  WordPress Theme.

Version: 1.0.0

Template: bexon

License: GNU General Public License version 3.0

License URI: http://www.gnu.org/licenses/gpl-3.0.html

Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready



We encourage you to create Child theme for any modifications you will want to do.



Why use Child theme?



Because of future updates we may provide for this theme that will overwrite your

modifications and all your custom work.



If you are not familiar with Child Themes, you can read about it here:

http://codex.wordpress.org/Child_Themes

http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/


====================================================================================== */

/* fonts */

@font-face {
  font-family: "Conthrax";
  src: url("/wp-content/themes/bexon-child/assets/fonts/conthrax/Conthrax-SemiBold.woff2") format("woff2"),
       url("/wp-content/themes/bexon-child/assets/fonts/conthrax/conthrax/conthrax-semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Conthrax";
  src: url("/wp-content/themes/bexon-child/assets/fonts/conthrax/Conthrax-SemiBold.woff2") format("woff2"),
       url("/wp-content/themes/bexon-child/assets/fonts/conthrax/Conthrax-SemiBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ko";
  src: url("/wp-content/themes/bexon-child/assets/fonts/ko/KOSans-Bold.woff2") format("woff2"),
       url("/wp-content/themes/bexon-child/assets/fonts/ko/KOSans-Bold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ko";
  src: url("/wp-content/themes/bexon-child/assets/fonts/ko/KOSans-Bold.woff2") format("woff2"),
       url("/wp-content/themes/bexon-child/assets/fonts/ko/KOSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ko";
  src: url("/wp-content/themes/bexon-child/assets/fonts/ko/KOSans-ExtraLight.woff2") format("woff2"),
       url("/wp-content/themes/bexon-child/assets/fonts/ko/KOSans-ExtraLight.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ko";
  src: url("/wp-content/themes/bexon-child/assets/fonts/ko/KOSans-Light.woff2") format("woff2"),
       url("/wp-content/themes/bexon-child/assets/fonts/ko/KOSans-Light.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ko";
  src: url("/wp-content/themes/bexon-child/assets/fonts/ko/KOSans-Regular.woff2") format("woff2"),
       url("/wp-content/themes/bexon-child/assets/fonts/ko/KOSans-Regular.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ko";
  src: url("/wp-content/themes/bexon-child/assets/fonts/ko/KOSans-SemiBold.woff2") format("woff2"),
       url("/wp-content/themes/bexon-child/assets/fonts/ko/KOSans-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


.custom-slider {

  position: relative;

  width: 100%;

  display: flex;

  align-items: center;
  
  font-family: "Conthrax", sans-serif;

}



.slider-viewport {

  flex: 1;

  width: 100%;

  height: 100%;
  
  touch-action: pan-y;

}



.left-fade, .right-fade {

    position: absolute;

    top: -20px;

    width: 150px;

    height: 110% !important;

    z-index: 10;

    pointer-events: none;

}



.left-fade {

    left: 0;

}



.right-fade {

    right: 0;

}



.slider-track {

  display: flex;

  column-gap: 40px;

  transition: transform 500ms ease-in-out;

}



.slider-slide-container { 

  flex: 0 0 20%;
  transition: all 100ms ease-in-out;

}

.slider-slide.is-active:hover .white-bg-div {
    background-color: #006838;
}

.slider-slide.is-active:hover .slide-title{
    color: #fff;
}



.slider-slide {

  position: relative;

  transition: transform 450ms ease-in-out;

  transform: scale(0.9);

}



.slide-bg {

  position: absolute;

  inset: 0;

  height: 100% !important;

  object-fit: contain;

  pointer-events: none;

  transition: transform 450ms ease-in-out, opacity 450ms ease-in-out;

}



/* Base background stays put */

.slide-bg--base {

  transition: all 500ms ease-in-out;

  z-index: 1;

}



/* Animated background moves on active */

.slide-bg--animated {

  z-index: 2;

  opacity: 0;

  transition: 300ms ease-in-out;

  transform: translateY(0);

}



.slide-inner {

  position: relative;

  z-index: 3;

  height: 456px;

  display: flex;

  flex-direction: column;

}



.slide-hero {

  position: absolute;

  left: 50%;

  transform: translateX(-50%) translateY(-20%);

  width: 60%;

  object-fit: contain;

  flex-shrink: 0;

  transition: transform 450ms ease-in-out;

}



.slide-tag {

  position: absolute;

  left: 5.5px;

  bottom: 200px;

  padding: 4px 10px;

  border-top-right-radius: 20px;

  font-size: 0.82rem;

  font-weight: 800;

  color: white;

  text-transform: uppercase;
  
  will-change: left;
  
  transition: all 450ms ease-in-out;


}



/* Tag color variants */

.slide-tag--blue {

  background: #019BFD;

}

.slide-tag--red {

  background: #EF3F29;

}

.slide-tag--green {

  background: #88AF3F;

}

.slide-tag--black {

  background: #000;

}


.slide-title {

  position: absolute;
  
  bottom: 110px;
  
  left: 5%;

  font-size: 1.5rem;

  font-weight: 900;

  color: #364E52;
  
  will-change: transform;
  
  transition: bottom 450ms ease-in-out;
  
  font-family: "Conthrax", sans-serif;

}

.slide-title-line1 {
    font-weight: 400;
    margin: 0;
    font-size: 0.9rem;
}

.slide-title-line2 {
    font-weight: 800;
    margin: 0;
}



.white-bg-div {

    position: absolute;

    bottom: 51px;

    left: 50%;

    transform: translateX(-50%) !important;

    width: 102%;

    height: 356px;

    background-color: #fff;

    z-index: 2;

    border-radius: 50px;

    opacity: 0;

    transition: all 250ms ease-in-out;

}


/* ACTIVE STATE: center one slightly scaled up */

.slider-slide.is-active .white-bg-div {

    opacity: 1;

    transform: scale(1);

}



.slider-slide.is-active {

  transform: scale(1.1);

}

.slider-slide.is-active .slide-title {

  bottom: 70px;

}

.slider-slide.is-active .slide-tag {

  bottom: 160px;
  
  left: -4px;

}



.slider-slide.is-active .slide-bg--base {

  transform: translateY(-50px);

}



.slider-slide.is-active .slide-bg--animated {

  transform: translateY(-35%) scale(1.05);

  opacity: 1;

}



.slider-nav {

  position: absolute;

  display: flex;

  justify-content: center;

  align-items: center;

  top: 50%;

  transform: translateY(-50%);

  border: none;

  width: 42px;

  height: 42px;

  z-index: 99;

  transition: transform 200ms ease-in-out;

  cursor: pointer;

}



.slider-nav--prev {

  left: 50px;

}



.slider-nav--next {

  right: 50px;

}



.slider-nav:hover {

  transform: translateY(-50%) scale(1.05);

}



.slider-nav[disabled] {

  opacity: 0.4;

  cursor: default;

}

.year {
    display: block;
    font-size: 12px;
    color: var(--tj-color-common-white);
    font-weight: var(--tj-fw);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    line-height: 1;
}

@media (min-width: 1590px) {
    .slide-title {
        bottom: 70px;
    }
    
    .slide-tag {
        bottom: 150px;
    }
}

@media (max-width: 1589px) {
	.slide-inner {
		height: 415px;
	}
	.slide-title {
		bottom: 80px;
	}
	.slide-tag {
		bottom: 185px;
	}
	.slider-slide.is-active .slide-tag {
	    bottom: 170px;
	}
}


@media (max-width: 1024px) {

  .slider-slide {

    flex: 0 0 33%;

  }

}



@media (max-width: 768px) {

  .slider-slide-container {

    flex: 0 0 300px;  

  }
  
  .slider-nav {
      display: none;
  }
  
  .slider-track {
      column-gap: 0;
  }



  .left-fade, .right-fade {

    display: none;

}



  .slider-slide.is-active {

    transform: scale(0.9);

  }
  
  .white-bg-div {
      bottom: 22px;
  }
  
  .slide-hero {
      width: 75%;
  }


  
  .slide-inner {
      height: 380px;
  }
  
  .slider-slide.is-active .slide-bg--animated {
      transform: translateY(-40%) scale(1.05);
  }
  
  html[dir="rtl"] .slide-title {
      padding-right: 15px;
  }
  
  
  .slider-slide.is-active .slide-title {
      bottom: 40px;
  }
  
  .slider-slide.is-active .slide-tag {
      bottom: 130px;
  }

  
  .slide-tag {
      padding: 2px 10px;
      font-size: 0.8rem;
      bottom: 130px;
  }

  .slide-title {

    font-size: 1.9rem;
    bottom: 60px;

  }

}

/* IM */

.form-column {
    float: left;
    width: 50%; /* Adjust width as needed, e.g., 48% with margins */
    padding: 0 10px; /* Add padding for spacing between columns */
    box-sizing: border-box;
}

/* Optional: Make it responsive by stacking columns on mobile */
@media screen and (max-width: 600px) {
    .form-column {
        width: 100%;
        float: none;
        padding: 0;
    }
}

.tj-sidebar-widget {
	background-color: inherit;
}

.form-row .wpcf7-form-control.wpcf7-text, .wpcf7-form-control.wpcf7-select {
	background-color: #ECF0F0;
	border: 0;
	border-radius: 10px;
	height: 60px;
  font-weight: 600;
  color: #000;
}

.tj-careers-form .form-input textarea {
	background-color: #ECF0F0;
	font-weight: 600;
	color: #000;
}

.tj-sidebar-widget .wpcf7-list-item input {
	width: initial;
}

.wpcf7-form select {
    /* Hide native arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Add custom arrow image */
    background: url('/wp-content/uploads/2025/12/CF7-select-arrow.png') no-repeat 500px;
    /* Adjust padding to prevent text from overlapping the arrow */
    padding-right: 30px; 
    /* Optional: other styles */
    border: 1px solid #ccc;
    /* Add other form-specific styles as needed */
}

/* For IE10+ */
.wpcf7-form select::-ms-expand {
    display: none;
}

.upload-yellow {
	color: #FF9D00;
}

.form-input.reduce {
	font-size: 14px;
	color: #000;
	position: relative;
}

.form-input.reduce .label {
	margin-top: 50px;
}

.tj-careers-form .form-input textarea, .tj-careers-form .form-input input {
	height: 166px;
}

.tj-careers-form .form-input input::file-selector-button {
	width: 86px;
	height: 86px;
	margin-inline-end: 10px;
	color: var(--tj-color-theme-primary);
	background: url('/wp-content/uploads/2025/12/Upload-icon.png') no-repeat center center #ECF0F0;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	text-indent: -9999px;
	position: absolute;
	right: 50%;
	top: 30%;
}

#inputFile {
	border: 1px solid #ECF0F0;
	margin-bottom: 20px;
}

#wpcf7-f9487-p9456-o1 .tj-btn-wrapper {
	margin-top: 30px;
}