/*
Theme Name: LXC
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Description: Bootstrap Theme
Author: Lexicon Thailand
Theme URI: https://17o44859o3.apb.spinupwp.site/
Author URI: https://17o44859o3.apb.spinupwp.site/
*/


/* @font-face {
	font-family: Metro Nova Pro;
	src: url(libs/fonts/MetroNovaPro-Regular.otf);
	font-weight: 300;
} */


body{ font-size:14px;  color: #353535; }

/* *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, blockquote, th, td{
    font-family: Metro Nova Pro;
} */
a{ color: #353535; }

.hover a { color: #FFFFFF;}


.next-link {
    color: #353535;
}
.prev-link {
    color: #353535;
}

a:hover{ text-decoration:none; }
h2{
    font-size: 40px;
    line-height: 143.55%;
    font-weight:bold;
}
h3{ font-size:24px; line-height: 33px; }
/*new button style */
.btn-primary{
    background-image: linear-gradient(to right, #FFD100 29.03%, #FFD100 51%, #FFD100 100%);
    /* background-color: #FFD100; */
    transition: 0.5s;
    background-size: 200% auto;
    /* box-shadow: 0 0 20px #eee; */
    font-weight: bold;
    color:#003594;
    border: 0px;
    border-color: unset;
    background-color: unset;
}
/* .btn-primary:hover{background-position: right center; } */
/*new button style */

/* .btn-primary,.btn-primary:hover{ background: #48C8F0; border-color: #48C8F0; color:#fff; } */

.section-title{ text-transform:uppercase; }

.footer-content{ padding:80px 0px 130px; border-bottom: 1px solid #E7E7E7; }
.footer-content ul{ list-style-type:none; padding-left:0px; }
.footer-info{ padding:20px 0px; }

.site-socials{ list-style-type:none; }
.site-socials li{ display:inline-block; margin:0px 10px; }

.top-menu{ background: #F8F8F8;  }
.main-header{ padding:20px 0px; position:relative; text-transform:uppercase; }
.main-header .navbar-toggle{ position:absolute; top:15px; right:10px; border:none; background:transparent; }
#top-menu{ list-style-type:none; margin-bottom:0; }
#top-menu li{ display:inline-block; flex-direction:row; }
#top-menu li .nav-link{ padding:10px 10px; text-transform:uppercase;  }

.site-branding{ margin-top:15px; }
#site-navigation.navbar-expand-lg .navbar-collapse{ justify-content:flex-end; }

#testimonials{ background: #1C2F56; padding:100px 0 90px; color:#fff; }
#posts{ background: #fff;padding: 80px 0 120px; }
#promotions{ background: #F9F9F9; padding:95px 0 115px; }
/* .elementor-widget:not(:last-child){  } */

.section-description{ margin-bottom:50px; }
.section-title span{ float:right; font-size:18px; font-weight:400; text-transform:initial; }

#testimonials h2{ color:#fff; }
/* .testimonial{ padding:15px; } */
.testimonial .inner{ background:#fff; color: #222222; padding:35px; min-height:475px; position: relative; }
.testimonial .inner .text img{ margin-bottom:30px; }

.slick-dots{ list-style-type:none; text-align:center; margin-top: 40px; padding-left:0px; }
.slick-dots li{ display:inline-block; margin:0px 10px; }
.slick-dots li button{ text-indent:-9999px; border-radius:50%; width:20px; height:20px; border:none; }
.slick-dots li.slick-active button{ background: #FCDD12; }

#promotion-wrap .box{
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    padding:50px 45px;
    height:100%;

}
#promotion-wrap .box .link{
    position: absolute;
    bottom: 30px;
    text-align: center;
    width: 100%;
    left: 0;
}
#promotion-wrap .box li{ margin:10px 0px; }
#promotion-wrap .box:hover{ box-shadow: 6px 8px 26px rgba(0, 0, 0, 0.1); }
#promotion-wrap .box h3{ color: #224875;}
#promotion-wrap .box ul{ padding-left:0px; }



.box .cover{ height:240px; margin-bottom:25px; position:relative; text-align: center; }
.box .hover{ width:100%; height:100%; position:absolute; background:#FFFFFF; display:none; z-index: 10; }
.box:hover .hover{ display:flex; justify-content:center; align-items:center; }
.box .hover h2{ color:#003594;font-size: 24px; font-family: 'Gilroy'; }
.box ul{ padding-left:0px; list-style-type:none; }
.box ul a{ color: #51B4DB; }
.box .text{ padding:20px; }
.box .footer{
    border-top: 1px solid #F0F0F0;
    padding:20px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.box .hover button:hover { background-color: #FCDD12; color: #353535;}


#posts .box{
    border: 1px solid #F0F0F0;
    width: 365px;
    height: 500px;
}
#posts .box .footer .date{ float:right; }

/*Style Sahak Started*/

h5.service-title>span a:hover { color: #FEDE18 !important;}
img.service-main-image { width: 100%; }
.title-and-permalink { position: absolute; left: 35%; top: 40%; }
div#service-wrap .row{margin-right:0px !important;margin-left:0px !important;}
div#service-wrap .col-xs-12.col-sm-12 { padding-right: 0; padding-left: 0; }
.full-width-button { width: 90%; border-radius: 2px; font-family: "Red Hat Display", Sans-serif; font-size: 18px; padding: 16px 0; font-weight: bold; margin: 0 auto;letter-spacing: 1px; }
.footer-note-block { padding: 5px 16px; }
h5.note-footer { font-family: "Red Hat Display", Sans-serif; font-size: 14px; line-height: 21px; color: #333333; font-weight: bold; text-decoration: underline; margin-top: 73px; }
p.note-text { margin-bottom: 3px; }
img.avatar.avatar-32.photo.avatar-default { border-radius: 50%; width: 35px; margin-right: 10px;margin-left: 10px; }
span.testimonial-text { display: block; }
p.testimonial-below-text { text-align: center; margin-top: 90px; font-size: 28px; line-height: 37px; }
.testimonial-contact-button { padding-top: 14px; padding-bottom: 14px; padding-left: 45px; padding-right: 45px; margin-top: 25px; font-size: 20px; font-weight: bold; }
img.attachment-medium.size-medium.wp-post-image { border-radius: 50%;    max-width: 100%; }
.col-xs-9.col-sm-9.desc .name, .col-xs-9.col-sm-9.desc .title, .col-xs-9.col-sm-9.desc .company { font-size: 18px; }
h2.section-title.text-left.services-title { font-family: "Red Hat Display", Sans-serif; font-size: 32px;  color: #202F56; margin-bottom: 20px; }
h2.section-title.text-left.case-studies-title{ font-family: "Red Hat Display", Sans-serif; font-size: 32px;  color: #202F56;text-align: left; }
span.arrow-right { color: #003594; margin-left: 10px;}
span.service-title { display: block;text-transform: uppercase; justify-content: center; align-items: center; position: absolute; top: 30%; z-index: 0; width: 100%; font-size: 28px; line-height: 37px; color: #fff; text-align: center; }
strong.blog-section-title { color: #202F56;font-size: 32px; }
.box h3.text-center { font-weight: bold; }
h2.section-title.text-center { font-weight: 600; color: #202F56; }
span.case-studies-title { display: block;text-transform: uppercase; justify-content: center; align-items: center; position: absolute; top: 30%; z-index: 0; width: 100%; font-size: 24px;  color: #fff; text-align: center; }
img.case-studies-icon { position: absolute; top: 50px; width: 70px; }
.excerpt { font-family: "Red Hat Display", Sans-serif; font-size: 16px; color: #FFFFFF; text-align: center; position: absolute; top: 250px; }
a.view-this-project { position: absolute; top: 390px; }
h2.section-title.text-center.case-studies-title , h2.section-title.text-center.work-examples-title { text-align: left !important; font-size: 32px; }
div#case_studies ,div#work_examples{ padding-bottom: 40px; }
h2.section-title.text-center.case-studies-title ,h2.section-title.text-center.work-examples-title{ padding-bottom: 20px; }
.simple-title a { font-size: 24px !important; font-weight: bold !important; }
.simple-title { font-size: 24px !important; width: 100%; padding: 20px; display: flex; justify-content: center; align-items: center; margin-bottom: 130px;}
span.simple-category { font-size: 16px; color: #222222; position: absolute; font-family: "Red Hat Display", Sans-serif;    top: 160px; }
.box.service-image.sample-back-image .cover { min-height: 340px !important;}
p.client-name, h3.client-name { text-align: center; font-size: 36px; color: #0072CE;  font-family: Gilroy; font-weight: bold; }
.modal { overflow: auto !important; } /*Fix for focus issue on work sample prev/next button */
.modal-body { text-align:start; }
span.modal-category {
    color: #353535;
    font-size: 18px;
    display:table;
    margin-left: auto;
    margin-right: auto;
 }
.modal-header{border-bottom: none;}
.modal-footer{border-top: none;}
.modal-footer { display: flex; justify-content: center; }
.modal-footer a.btn.btn-primary , button.btn.btn-outline-primary { font-weight: bold; font-size: 18px; padding: 16px 44px; }
button.btn.btn-outline-primary { color: #48c8f0; border: 1px solid #48c8f0; }
.modal-footer-links { display: flex; justify-content: space-between; }
.modal-footer-links a { padding: 20px; }
.elementor-image:hover { cursor: pointer; }
li.last-child.menu-item.menu-item-type-post_type.menu-item-object-page.nav-item { background: #48C8F0; border-radius: 2px; min-width: 140px; text-align: center;    margin-left: 30px; }
li.last-child.menu-item.menu-item-type-post_type.menu-item-object-page.nav-item a {color: #fff; font-size: 15px; font-weight: bold; letter-spacing: 1px; }
h2.section-title.related-post { margin-bottom: -15px; }
.wpml-ls-current-language { background: #E8EEF0; }
.wpml-ls-current-language a { font-family:"Red Hat Display", Sans-serif; font-size: 14px; line-height: 18px; color: #353535; font-weight: bold; }
.main-services-block .elementor-element { padding-left: 5px; padding-right: 5px; }
/* a.elementor-button, .elementor-2 .elementor-element.elementor-element-709cd45 .elementor-button {  font-size: 20px !important; padding: 20px 39px !important; } */
div#services { padding-bottom: 70px; }
h5.service-title { padding-top: 10px; }
.pricing-blocks:hover { transform: scale(1.05); z-index: 10000; }
a.footer-phone-number span , a.footer-email span { margin-left: 10px; color: #353535 !important; font-size: 16px; }
ul#menu-footer-1 li { font-size: 16px; text-transform: uppercase; font-weight: 600; line-height: 38px; color: #353535; }
ul#menu-services li a { font-size: 16px; line-height: 35px; }
span.contact-title { font-size: 16px; line-height: 24px; text-transform: capitalize; }
img.alignnone.size-full { margin-right: 14px; }
div#promotion-wrap .row .col-xs-12.col-sm-4 {
    transform: scale(1.05);
    z-index: 10000;
}
.our-partners-block {
    display: flex;
    justify-content: space-between;
}
#our-partners .smls-grid-container-template-1 .smls-grid-image-wrap {
    padding-left: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;

}
.elementor-element .elementor-widget.elementor-widget-video {
    box-shadow: 11px 11px 0px 0px rgba(72, 180, 240, 0.4);
}
div#what-we-do {
    display: flex;
    align-items: center;
}
.btn-outline-primary {
    color: #ffffff !important;
    border-color: #003594!important;
    background-image: linear-gradient(to right, #003594 29.03%, #0072CE 51%, #000428 100%);
    transition: 0.5s;
    background-size: 200% auto;
    font-weight: bold;
    font-size: 18px;
    padding: 16px 44px;
}
a.btn-outline-primary:hover {
    /* color: #fff !important;
    background-color: #48c8f0 !important; */
    background-position: right center !important;
    color: #fff !important;

}
.col-sm-12.tabs-listing button {
    font-family: "Red Hat Display", Sans-serif;
    font-size: 15px;
    line-height: 18px;
    border: 1px solid #E2E2E2;
    border-radius: 2px;
    margin-right: 8px;
    padding-bottom: 10px;
    padding-top: 10px;
    box-sizing: border-box;
}
.col-sm-12.tabs-listing {
    padding-bottom: 55px;
}
span.client-name-work {
    font-family: "Red Hat Display", Sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 130%;
    color: #222222;
    display: block;
    padding-left: 25px;
    padding-top: 25px;
}
span.simple-category-work {
    font-family: "Red Hat Display", Sans-serif;
    font-size: 16px;
    line-height: 21px;
    color: #222222;
    display: block;
    padding-left: 25px;
    padding-top: 10px;
    padding-bottom: 25px;
}
img.image-work{
    width: 350px !important;
    height: 250px !important;
}
.client-project {
    border: 1px solid #EEEEEE;
}
.col-xs-12.col-sm-12.col-md-4.allworks {
    margin-bottom: 25px;
}
.new-block-work:hover .cover-work {
    display: flex !important;
    position: absolute !important;
    top: 0 !important;
    width: 343px;
    height: 100%;
    cursor: pointer;
    background: #202F56 !important;
    align-items: center;
}
.hover-work {
    width: 100%;
}
a.sample-link-work-new {
    display: block;
    width: 100%;
    font-family: "Red Hat Display", Sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 130%;
    color: #FFFFFF;
    text-align: center;
}
span.simple-category-work-new {
    display: block;
    font-family: "Red Hat Display", Sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 21px;
    text-align: center;
    color: #FFFFFF;
}
.view-work-details-new{
	font-family: "Red Hat Display", Sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    color: #FFFFFF;
    display: block;
}

a.view-work-details-new {
    border: 2px solid #fff;
    padding: 12px 28px;
    letter-spacing: 1px;
    width: 55%;
    margin: 0px auto;
}
span.simple-category-work-new {
    padding-bottom: 37px;
    padding-top: 11px;
}
.you-might-also .elementor-cta__content {
	padding: 28px 18px !important;
	align-items: flex-end !important;
	flex-wrap: nowrap;
	font-family: "Red Hat Display", Sans-serif;
	background-color: rgb(32, 47, 86) !important;
}
.you-might-also .elementor-widget-call-to-action > div > div > div.elementor-cta__content > h2 {
	color: #fff;
	text-transform: uppercase;
	text-align: left;
	padding-left: 10px;
	font-weight: bold;
	font-size: 28px;
	margin-bottom: 0px;
	letter-spacing: 1px;

}
.elementor-cta__button-wrapper.elementor-cta__content-item.elementor-content-item {
    text-align: right;
    padding-right: 10px;
}
.elementor-cta__button-wrapper.elementor-cta__content-item.elementor-content-item a {
    color: #fff !important;
	font-family: "Red Hat Display", Sans-serif;
    border-color: #fff;
    font-size: 16px !important;
}
.you-might-also .elementor-widget-call-to-action a.elementor-button {
    padding: 12px 33px !important;
}
@media (min-width: 576px) {
    .modal-dialog { margin: 1.75rem auto; width: 80%; max-width: 760px;}

}
@media (max-width: 768px) {
    span.read-all-link {
        display: block;
        position: absolute;
        bottom: 0px;
        text-align: center;
        right: 50%;
    }

    .new-block-work{
    margin-bottom: 35px;
    }
    h2.section-title.text-center.case-studies-title,div#testimonials h2.section-title.text-center,div#posts h2.section-title.related-post{font-size: 28px;text-align: center !important;}
    #slider-testimonials img.wp-post-image {
        max-width: 200px;
    }
}
.hidden {
  display: none;
}
.work-load-more {
    text-align: center;
    padding-top: 30px;
    color: #9A9A9A !important;
    font-family: "Red Hat Display", Sans-serif;
    font-size: 18px;
    line-height: 23px;
    opacity: 0.8;
}
/*Style Sahak Ended*/

.box.box-work-sample {
    border: 1px solid #EEEEEE;
    position: relative;
    background: #fff; 
    width: 100%;
}

.box.service-image.sample-back-image {
    text-align: center;
}

.box .cover .play-button {
    width: 70px;
    height: 70px;
}


/* .modal-button {
    font-family: Metro Nova Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    color: white;
    line-height: 143.55%;
    background-color: transparent;
    border-width: 1px 1px 1px 1px;


} */

span.button-arrow-right {
    color: #003594;
}

.index-sample {
    padding-left: 15px;
    padding-bottom: 30px;
}

.name-client {
    font-family: Gilroy;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    color: #393939;
    /* color: #fff !important; */
    line-height: 130%;
    text-align: left;
    margin-bottom: 9px;

}

.work-sample {
    font-family: Red Hat Display;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    color: #393939;
    /* color: #fff; */
    line-height: 21px;
    text-align: left;
    margin-bottom: 0px;
}

#case_studies-wrap, #slider-testimonials, #promotion-wrap {
    margin-left: -15px;
    margin-right: -15px;
}

.col-xs-12.col-md-4.col-sm-12 {
    display: flex;
    padding-bottom: 2em;
}

.box .cover.blogs {
    height: 200px;
}

.image-and-name {
    display:flex;
    flex-flow: column wrap;
    align-items: center;
}

.date-blog {
    display: flex;
    align-items: flex-end;
}

.testimonial .inner .text p {
    font-size: 20px;
    line-height: 143.55%;
    font-family:"Red Hat Display", Sans-serif;
}

.elementor img {
    height: auto;
    max-width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.view-details {
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    color: #003594;
    line-height: 143.55%;
    /* background-color: transparent; */
    background-color: #FFD100;
    border-style: solid;
    border-color: #FFD100;
    border-width: 1px 1px 1px 1px;
    position: absolute;
    top: 240px;
    width: 171px;
    height: 45px;
    padding-top: 10px;
}

.view-details:hover, .view-details:hover > .button-arrow-right{
    background-color: #FFD100;
    color: #003594;
    border-color: #FFD100;
}

.playbutton {
    height: 18em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.work-filters {
    margin-bottom: 20px
}
/*for mb view*/
@media screen and (max-width:768px){
    .work-filters{
        white-space: nowrap;
        overflow-x: auto;
    }
    
}
.work-filters button {
    background: #FFFFFF;
    border: 1px solid #E2E2E2;
    box-sizing: border-box;
    border-radius: 2px;
    padding: 10px 20px;
    margin-right: 12px;
    margin-bottom: 15px;
}
.work-filters button:hover{
    border-color: #0072CE;
    background-color: #0072CE;
}
.work-filters button:focus {
    outline:0;
}
/*new button*/
.work-filters button.active {
    background-color: #0072CE;
    border: 1px solid #0072CE;
    color:#fff;
    font-weight: bold;
}

/*Center Twitter widget on posts*/
twitter-widget {
    margin-left: auto;
    margin-right: auto;
}

img.avatar.avatar-32.photo.lazyloaded {
    border-radius: 50%;
    width: 45px;
    margin-right: 10px;
    margin-left: 10px;
}

@media only screen and (max-device-width: 480px){
    .modal-footer a.btn.btn-primary , a.btn.btn-outline-primary {
        font-weight: 700;
        font-size: 10px;
        padding: 10px 30px;
    }
}

.the-category {
    font-size: 14px;
    text-transform: uppercase;
    line-height: 18px;
    color: #ABABAB;
}

.the-title {
    font-size: 20px;
    font-weight: bold;
    line-height: 140%;
    text-transform: capitalize;
    color: #353535;
}

/*Fix link colors in blog*/
body.single-post .elementor-location-single p a {
    color: #224875 !important;
    text-decoration: underline;
}
body.single-post .elementor-location-single p a:hover {
    text-decoration: none;
}

.bg-overlay{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.765) 0%, rgba(0, 0, 0, 0) 100%);

}

.case-study-item{

    width:350px;
    height:350px;
}

.blue-button-arrow-right{
    color: #48C8F0;
}

.case-study-detail {
   
    vertical-align: bottom;
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white ;
}
.case-study-detail a{
    color: white;
}

.case-study-filters {
    border-bottom: solid 1px #E9E9E9;
    margin: auto;
    margin-bottom: 60px;
    text-align: center;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}
.case-study-filters button{
    font-size: 16px !important;
    text-transform: uppercase;
    color: #333333;
    border: 0;
    background-color: transparent;
    margin-right:40px;
    padding-bottom: 30px;
    margin-top: 40px;
}

.case-study-filters button.active{
    border-bottom: 3px solid #48C8F0;
}


.case-study-filters button:focus {
    outline: 0px dotted;
    outline: 0px auto -webkit-focus-ring-color;
}

@media only screen and (max-width:600px){
    .case-study-item{
        width: 100% ;
        height: 90vw;
    }
    .fix-width-container {
        width: 250px;
    }
    .overflow-div {
        width: 100px;
        height: 100px;
        width: 300px; 
        
    }
    .case-study-filters {
        width: 250px;
    }
}

blockquote {
    font-family: Gilroy;
    font-style: normal;
    font-weight: 800;
    font-size: 20px;
    line-height: 24px;
    color: #505759;
  
}
blockquote p::before{
    content:" “ ";
    display:inline-block;
}
blockquote p::after{
    content:" ” ";
    display:inline-block;
}
blockquote > p {
    display:inline-block;
}