/*
==========================
     Table of contents
==========================

	1.Global_Css
		1.1 Header
		1.2 Footer
	2.Home
    3.About Us
    4.Service
    5.Careers
    6.Contact Us

*/


/* -----------------------1. global code------------------------------------------------- */


/* @import "../fontawesome/less/fontawesome.less"; */

@font-face {
    font-family: FontAwesome;
    src: url('../fontawesome/webfonts/fa-light-300.ttf');
}

@font-face {
    font-family: Sarabun;
    src: url('../Sarabun-Medium.ttf');
}


/* -----------------------VARITABLES CSS-------------------------------------------------- */


html,
body {
    font-family: 'Poppins', sans-serif !important;

}

a,
a:hover {
    text-decoration: none !important;
}

a:hover {
    color: #000
}

form {
    margin-block-end: 0em;
}

button:focus {
    outline: none !important;
}

.bg-lightblue {
    background-color: rgb(42, 133, 198,.1);
}

.bg-grey {
    background-color: rgb(150, 150, 150,.1);
}

.hr-style-left{
	border-left: 2px solid #2A85C6;
	padding-right:10px;
}

.hr-style-right{
	border-right: 2px solid #2A85C6;
	padding-left:10px;
}

.home_main_title{
    color: #27255F;
}

.home_title{
    font-weight: lighter;
}

.symbol_triangle{
	color: #27255F;
}

.card {
    align-items: center;
}

.text-main {
    color: #0086CA;
}

/* ------------------------ HEADER -------------------------------------------------- */


button:focus {
    outline: none !important;
  }
  
  .navbar{
    padding:0px !important;
  }
header nav .navbar-brand {
    max-width: 300px;
    padding: 0;
}


.navbar-light .navbar-toggler {
    border-color: none !important;
}

.thrive_logo{
    width:150px
  }
  
/* ----------------------- 2. Home ------------------------------------------------- */


.pb_home{
    padding-bottom:3rem;
}
    
.my_home{
    margin:3rem 0px;
}
.py_home{
    padding:3rem 0px;
}
.mb_home{
    margin-bottom:3rem;
}
.pt4_home{
    padding-top:1.5rem;
}

.homepage-banner {
    position: relative;
    background-color: black;
    height: 80vh;
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
}

.homepage-banner .container {
    position: relative;
    z-index: 2;
}

.homepage-banner video {
    position: absolute;
    top: 62%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.homepage-banner .overlay-wcs {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #012144b8;
    opacity: 0.85;
}

.homepage-banner .homebanner {
    top: 26vh;
    position: relative;
}

.homepage-banner .homebanner h1 {
    font-size: 3rem;
    line-height: 1.25em;
}

.homepage-banner .homebanner span {
    font-size: 1.25rem;
}

/* techology */

.tech_container {
    display: flex;
    width: 100%;

}

.tech_item {
    width: 20%;
    padding-bottom: 3rem;
    text-align: center;
}

.tech_item img {
    width: 150px;
}

/* contact */

#contactus .home_main_title{
font-size: 1.7rem;
}

#contactus .home_title{
color:#2A85C6;
font-size: 18px;
font-weight: initial;
}

.footer_social{
	width:40px;
}

/* -----------------------  About Us ------------------------------------------------- */

.py5_about{
	padding:3rem 0px;
}

.aboutus-page {
    height: 37vh;
    background-color: #1f3592;
    background: url(../img/about/banner_01.png) no-repeat 50% 50%;
    background-size: cover;
}

.aboutus-page .background-overlay {
    background-image: linear-gradient(320deg, #003063 0%, #000000 100%);
    opacity: 0.75;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    height: 37vh;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

.aboutbanner {
    position: relative;
    z-index: 2;
    top: 100px;
}


.about_main_title {
    color: #27255F;
}

.card-mission {
    width: 100%;
    height: 100%;
    box-shadow: 0px 3px 15px -3px rgb(0 134 202 / 40%);
    padding: 1.5rem;
}

.img_mission {
    padding-bottom: 10px;
}

.about_content{
	color:#000;
	font-weight: 300;
}

.vision_padding{
    padding-top:.5rem;
    padding-bottom:.5rem;
}

.slider{
    height: 50px;
    overflow: hidden;
  }
  .slider div {
    color:#fff;
    height: 50px;
    margin-bottom: 50px;
    box-sizing: border-box;
  }
  .slider-text1 {
    animation: slide 5s linear infinite;
  }

  @keyframes slide {
    0% {margin-top:-300px;}
    5% {margin-top:-100px;}
    33% {margin-top:-100px;}
    38% {margin-top:-100px;}
    66% {margin-top:-100px;}
    71% {margin-top:0px;}
    100% {margin-top:0px;}
  }

  /* --------------------- Service ------------------------------------------------------ */

  .services-page {
    height: 37vh;
    background-color: #1f3592;
    background: url(../img/about/banner_01.png) no-repeat 50% 50%;
    background-size: cover;
}

.servicebanner {
    position: relative;
    z-index: 2;
	top:100px;
}

.services-page .background-overlay {
    background-image: linear-gradient(320deg, #003063 0%, #000000 100%);
    opacity: 0.75;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    height: 37vh;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

#servicePage .box:hover .overbox {
    opacity: 1;
}

#servicePage .box {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #0086CA;
    border-radius: 6px;
}

#servicePage .box .overbox {
    background-color: #0086CA;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity: 0;
    width: 100%;
    height: 100%;
    padding: 1.8rem;
}

.img_service_title{
	width:100px;
}



.img_service_title{
	width:100px;
}

.text-title-service{
	font-size: 1rem;
	margin:1.5rem 0px;
}

.img_service_content{
	width:50px;
	padding-bottom: 10px;
}

.overtext_title{
	font-size:1rem;
	margin:.25rem 0px;
}

.overtext_content{
	font-size:0.8rem;
	margin-top:.5rem;
}
/* ------------------------ Careers ---------------------------------------------------- */

.py5_career{
    padding-top:3rem;

    padding-bottom:3rem;}

.m5-career{
    margin:3rem;
}

.careers-page {
    height: 35vh;
    background-color: #1f3592;
    background: url(../img/careers/banner_02.png) no-repeat 50% 50%;
    background-size: cover;
}

.careers-page .background-overlay {
    background-image: linear-gradient(320deg, #003063 0%, #000000 100%);
    opacity: 0.75;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    height: 35vh;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

.transperent_block {
    padding: 0px;
    position: relative;
    overflow: hidden;
    height: 250px;
}

.transperent_block img {
    z-index: 4;
}

.transperent_block .black_hover_block {
    position: absolute;
    bottom: 3%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    width: 100%;
}

.transperent_block .blur {
    background-color: rgb(6 65 95 / 65%);
    height: 400px;
    z-index: 5;
    position: absolute;
    width: 100%;
}

.transperent_block .black_hover_block_text {
    z-index: 10;
    color: #fff;
    position: absolute;
    text-align: center;
    top: -28px;
    width: 100%;
}

.transperent_block:hover .black_hover_block,
.black_hover_block:hover {
    bottom: 89%;
    transition: all 0.3s ease-in-out;
}

.careerbanner {
    position: relative;
    z-index: 2;
    top: 100px;
}


.bg_blue {
    background-color: #2A85C6;
    padding: 6px;
}

.button_submit {
    color: #fff !important;
    background-color: #2A85C6;
    border: 0;
    margin-top: 5rem;

}

.text-title-career {
    font-size: 1rem;
    margin: 1.5rem 0px;
}

.overtext_title_career {
    font-size: 1rem;
    margin: .25rem 0px;
}

.overtext_content_career {
    font-size: 0.8rem;
    margin-top: .5rem;
}

.home_title_career{
    font-weight: lighter;
}

.application-form{
    padding:3rem;
}

.submit_resume{
    font-size: 1rem;
    white-space:pre;
    margin:.5rem 1.5rem;
}

input[type='date']:before {
    content: attr(placeholder)
  }
  
  input::-webkit-datetime-edit{ color: transparent; }
  input:focus::-webkit-datetime-edit{ color: #000; }
  
  select:required:invalid {
    color:  #6c757d;
  }
  option[value=""][disabled] {
    display: none;
  }
  option {
    color: black;
  }
  .input-group>.input-group-append:not(:last-child)>.btn{
      border-top-right-radius: .25rem;
      border-bottom-right-radius: .25rem;
  }
  .btn-outline-secondary, .btn-outline-secondary:disabled {
    color: #6c757d;
      border-color: #ced4da;
      opacity:1 !important;
} 
  .py5_careers{
      padding-top:3rem;
      padding-bottom:3rem;
  }

  #benefitthrive .box:hover .overbox {
    opacity: 1;
}

#benefitthrive .box {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #0086CA;
    border-radius: 6px;
}

#benefitthrive .box .overbox {
    background-color: #0086CA;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity: 0;
    width: 100%;
    height: 100%;
    padding: 1.8rem;
}

.img_career_title {
    width: 100px;
}

.button_submit {
    color: #fff !important;
    background-color: #2A85C6;
    border: 0;
    margin-top: 5rem;

}
.button_submit:hover {
    color: #2A85C6 !important;
    background-color: #fff;

}
  /*---------------------- contact us---------------------------------------------------------------------- */

  .contact-page {
    height: 35vh;
    background-color: #1f3592;
    background: url(../img/careers/banner_02.png) no-repeat 50% 50%;
    background-size: cover;
}

.contact-page .background-overlay {
    background-image: linear-gradient(320deg, #003063 0%, #000000 100%);
    opacity: 0.75;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    height: 35vh;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

  .contact_icon{
    padding-right:10px;
    color:rgb(42, 133, 198);
}
.contact_content > div{
    border-bottom:1px solid #eaeaea;
}

.contactus_title{
    font-size:2rem;
}


.hr_style_bottom{
    border-bottom:4px solid #2A85C6;
    width:50px;
    margin-left:0px;
    margin-top:10px;
}

.contactbanner {
    position: relative;
    z-index: 2;
    top: 100px;
}

/* -----------------------  Responsive ------------------------------------------------- */

/* desktop */

@media only screen and (max-width: 1920px) {

    /* home */
    .homepage-banner {
        height: 75vh;
    }

    /* about */
    .aboutbanner {
        position: relative;
        z-index: 2;
        top: 150px;
    }

    /* service */
    .servicebanner {
        position: relative;
        z-index: 2;
        top: 170px;
    }


    /* career */
    .careerbanner {
        position: relative;
        z-index: 2;
        top: 170px;
    }

    /* contact */
    .contactbanner {
        position: relative;
        z-index: 2;
        top: 170px;
    }
}

@media only screen and (max-width: 1700px) {

       /* home */
	.homepage-banner {
      height: 70vh;
    }

    .homepage-banner .homebanner {
        top: 20vh;
        position: relative;
    }

}

/* @media only screen and (max-width: 1600px) {
	.homepage-banner {
     height: 70vh;
    }

    .homepage-banner .homebanner {
        top: 20vh;
        position: relative;
    }

} */


@media only screen and (max-width: 1200px) {
    .transperent_block {
    height: 230px;
}

}


@media only screen and (min-width: 1024px) {
   /* home */
    .mobile-logo {
        display: none !important
    }

}



/* Mobile */

@media only screen and (max-width: 1023px) {
   /* home */
    .desktop-logo {
        display: none !important
    }

}

@media only screen and (max-width: 991px){
    .transperent_block {
        height: 167px;
    }
    
    
    .transperent_block:hover .black_hover_block,
    .black_hover_block:hover {
        bottom: 84%;
        transition: all 0.3s ease-in-out;
    }
    
    .career_text{
        font-size:0.8rem
    }
    .m5-career{
        margin:1.5rem;
    }
    .button_submit {
        margin-top: 3rem;
    }
    
    }
    @media (min-width: 990px) {
        /* .navbar-nav li:hover{
        border-bottom: 5px solid  #27255F;
    } */
    .nav-link {
      text-decoration: none;
      position: relative;
      color: inherit;
    }
    .nav-item{
        padding-right:50px;
    }
    .nav-link::after {
      position: absolute;
      content: "";
      height: .3em;
      top: 100%;
      background: #2A85C6 ;
      z-index: -1;
      left: 0;
      right: 0;
      transform: scaleX(0);
      transition: transform .5s cubic-bezier(.95, .05, .795, .035);
    }
    .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
        color: #2A85C6;
    }
    .nav-link:hover::after {
      transition-timing-function: cubic-bezier(.19, 1, .22, 1);  
      transform: scaleX(1);
    }
    
    .navbar-nav .nav-link {
        padding: 16px 0px;
        font-size: 18px;
    }
    
    .nav-link{
    font-size:17px;
    }
    .thrive_logo{
      width:195px
    }
    
    }
@media only screen and (max-width: 800px) {
       /* home */
    .homepage-banner {
        height: 53vh;
    }

    .homepage-banner .homebanner {
        top: 19vh;
        position: relative;
    }

    .homepage-banner .homebanner h1 {
        font-size: 2rem;
        line-height: 1.25em;
    }

}

@media only screen and (max-width: 600px) {
   /* home */
    .content_contactus{
        font-size: 10px;
    }
    .home_title{
        font-size: 0.8rem;
    }
    .home_main_title{
        font-size: 18px;

    }
    .homepage-banner {
        height: 30vh;
        min-height: 20rem;
    }

    .homepage-banner video { 
        top: 100%;
    }

    .homepage-banner .homebanner {
        top: 13vh;
    }
    .homepage-banner .homebanner h1 {
        font-size: 1.8rem;
        line-height: 1.25em;
    }
    .homepage-banner .homebanner span {
        font-size: 1rem;
    }

    .content_contactus_email{
        font-size:7px;
    }

    .footer_social{
        width:25px;
    }
}
@media (max-width: 500px) {
    .navbar-nav{
    text-align:center;
    }
    .navbar-collapse{
        border-top: 1px solid rgba(150, 150, 150, .4)
    }
    
    .nav-item{
        border-bottom: 1px solid rgba(150, 150, 150, .4)
    }
    }
@media only screen and (max-width: 450px) {
 /* home */
    .homepage-banner .homebanner {
        top: 15vh;
    }
    .homepage-banner .homebanner h1 {
        font-size: 1.8rem;
        line-height: 1.25em;
    }
    .homepage-banner .homebanner span {
         font-size: 1rem;
    }
    .pb_home{
         padding-bottom:1rem;
    }
    
    .my_home{
         margin:1rem 0px;
    }
    
    .mb_home{
         margin-bottom:1.5rem;
    }
    .py_home{
         padding:1rem 0px;
    }
    .pt4_home{
        padding-top:0rem;
    }
    #contactus .home_main_title{
        font-size: 16px;
    }
    
    #contactus .home_title{
        color:#2A85C6;
        font-size: 12px;
        font-weight: initial;
    }

    /* about */
    .py5_about{
        padding:1.8rem 0px;
    }

    /* service */
    .servicebanner {
        position: relative;
        z-index: 2;
        top: 125px;	
    }

	.banner_title{
		font-size:1.8rem;
	}

	.img_service_title{
        width:50px;
    }

    .text-title-service{
        font-size: 0.8rem;
        margin:.5rem 0px;
    }

    #servicePage .box {
        height: 150px;
        
    }

    .overtext_title{
        font-size:0.6rem;
        margin:.25rem 0px;
    }

    .overtext_content{
        font-size:0.55rem;
        margin-top: .5rem;
    }

    #servicePage .box .overbox {
        padding: .5rem;
    }
    .img_service_content{
        width:40px;
        padding-bottom: 5px;
    }
     /* career */
     .home_submit_title{
        font-size:1.5rem;
        padding:1rem 0px;
    }
    .banner_title{
		font-size:1.8rem;
	}

    .img_career_title {
        width: 50px;
    }


    .text-title-career {
        font-size: 0.8rem;
        margin: .5rem 0px;
    }

    #benefitthrive .box {
        height: 150px;

    }

    .overtext_title_career {
        font-size: 0.6rem;
        margin: .25rem 0px;
    }

    .overtext_content_career {
        font-size: 0.55rem;
        margin-top: .5rem;
    }

    #benefitthrive .box .overbox {
        padding: .5rem;
    }


	.file_title,.form-control-file{
		font-size: 0.8rem;
	}
	.file_alert{
		font-size: 0.6rem;
	}

	.submit_resume{
		font-size: 0.6rem;
        white-space:pre;
        margin:.25rem 1rem;
	}

    .careerbanner {
        position: relative;
        z-index: 2;
        top: 110px;
    }
    .application-form{
        padding:1rem .5rem;
    }

    .resume_title{
        font-size: 24px
    }
    .py5_career{
        padding-top:1.6rem;
    padding-bottom:1.6rem;
 
}
.button_submit {
    margin-top: 3rem;
}
/* contactus */
.contactus_title{
    font-size:1.8rem;
}

.contactbanner {
    position: relative;
    z-index: 2;
    top: 125px;
}
}

@media only screen and (max-width: 400px) {
    
    /* home */
    .homepage-banner .homebanner {
        top: 15vh;
    }

    .homepage-banner .homebanner h1 {
        font-size: 1.8rem;
        line-height: 1.25em;
    }

    .homepage-banner .homebanner span {
        font-size: 1rem;
    }  

    /* about */
    .aboutbanner {
        top: 95px;
    }
	.text1 h1{
		font-size: 1.8rem;
	}

    .slider{
        height: 65px;
        overflow: hidden;
    }
}
    
@media only screen and (max-width: 360px) {

    /* home */

    .homepage-banner .homebanner {
        top: 19vh;
    }
    .homepage-banner .homebanner h1 {
        font-size: 1.2rem;
        line-height: 1.25em;
    }
    .homepage-banner .homebanner span {
        font-size: 0.8rem;
    }
}


@media only screen and (max-height: 600px) {

    /* about */
    .aboutbanner {
        top: 86px;
    line-height: 15px;
    }
	

}

@media only screen and (max-height: 480px) {

     /* about */
    .aboutbanner {
        top: 86px;
    line-height: 15px;
    }

    .vision_title{
        font-size:25px;
    }
	
    .vision_padding{
    padding-top:0px;
    padding-bottom:0px;
    }
    .aboutus-page {
        height: 42vh;
    } 

    .aboutus-page .background-overlay {
        height: 42vh;
    }
}



@media only screen and (max-height: 700px)  {
 /* about */
.aboutus-page {
    height: 42vh;
} 

.aboutus-page .background-overlay {

    height: 42vh;
   
}


/* service */

.services-page {
    height: 42vh;
} 

.services-page .background-overlay {
    height: 42vh; 
}

/* careers */
.careers-page {
    height: 42vh;
} 

.careers-page .background-overlay {
    height: 42vh; 
}


/* contact */
.contact-page {
    height: 42vh;
} 

.contact-page .background-overlay {
    height: 42vh;
}

}