html, body{scroll-behavior: smooth;}
ul li{ list-style:none; margin-right:0px}
img{max-width:100%}
section a, section a:hover{ text-decoration:none}
.barometer_intro{ background-color:#efefef; padding:100px 8vw; width:100%}
.barometer_intro ul{ list-style:none; display:flex; margin:0px;}
.barometer_intro ul li{ align-items:center; width:50%; font-size:24px; padding:20px}
.barometer_intro ul li p{ font-size:24px; line-height:1.4; color:#222; padding-top:15%}
.barometer_intro ul li:last-child{ text-align:right}
#gtbi_shape {
	position:absolute; top:-110px; left:30px; z-index:5; transform: rotate(20deg);
      display: block;
      width: 480px;
      height: 650px;
      background-image: linear-gradient(#3596e5 , #9ade87);
      border-radius: 0% 0% 60% 60% / 50% 50% 45% 45%;
}
#gtbi_shape .inner{ display:block; align-items:center; justify-content:center; height:100%; padding:60% 30px 30px;}
#gtbi_shape .inner h1{ font-size:52px; line-height:50px; font-weight:700; color:#FFF; transform: rotate(-20deg); text-align:left; width:340px; margin-bottom:30px; padding-left:70px}
#gtbi_shape .inner p{ font-size:20px; font-weight:600; color:#FFF; transform: rotate(-20deg); text-align:left; padding-left:120px; width:300px}
#myVideo {
    position: relative;
    width: 100%;
    object-fit: cover;
}
.gtb_hero_section{ position:relative; display: block; text-align:right}
.gtb_hero_section .banner_img{ float:right; max-width:100%; height:auto}
.lens_container{ position:absolute; left:0; top:0; width:776px; text-align:left; transition:0.3s}
.lens_container img{ max-width:100%; height:auto}
.lens_inner{ position:absolute; max-width:776px; width:100%; bottom:0; margin-bottom:100px;}
.lens_inner h1{ font-size:3vw; line-height:1; font-weight:700; color:#FFF; text-align:left; max-width:500px; width:100%; margin-bottom:20px; padding-left:10vw}
.lens_inner p{ font-size:1.5vw; line-height:1.2; font-weight:600; color:#FFF; text-align:left; padding-left:10vw; max-width:450px; width:100%;}

/*.gtb_img{ display: block; height: 500px; position:relative; background: url(./header-image.webp) no-repeat 100% 0%; background-size:cover}*/

.gtb_gray_panel{ position:relative; background-color:#FFF; padding:70px 8vw; width:100%; text-align:center}
.gtb_gray_panel h2{ color:#333; font-size:30px; font-weight:700}
.gtb_gray_panel p{ width:60%; margin:0 auto; color:#333; font-size:18px; line-height:1.4}
.gtb_gray_panel .sm_text{ color:#222; font-size:14px; font-weight:600; display:block; margin-bottom:15px}
.gtb_gray_panel ul{ list-style:none; display:flex; margin-left:0px; width:100%; margin-bottom:0px}
.gtb_gray_panel ul li{ padding:0px 10px; width:33.33%; cursor:pointer}

.well_being figure{ display:block; position:relative; width:100%; height:360px; background: url(./well-being-card-image.webp) no-repeat 50% 100%; background-size:cover}
.well_being span{ position:relative; display:block; bottom:0px; top:auto; width:100%; height:100px; background-image: linear-gradient(to right, #4f4296 , #736bde); padding:30px 10px; color:#FFF; font-size:20px; line-height:40px}
.well_being span i{ width:40px; display:inline-block; margin-right:10px}

.satisfaction figure{ display:block; position:relative; width:100%; height:360px; background: url(./job-satisfication-card-image.webp) no-repeat 50% 100%; background-size:cover}
.satisfaction span{ position:relative; display:block; bottom:0px; top:auto; width:100%; height:100px; background-image: linear-gradient(to right, #386097 , #3893cd); padding:30px 10px; color:#FFF; font-size:20px}
.satisfaction span i{ width:40px; display:inline-block; margin-right:10px}

.confidence figure{ display:block; position:relative; width:100%; height:360px; background: url(./confidence-card-image.webp) no-repeat 50% 100%; background-size:cover}
.confidence span{ position:relative; display:block; bottom:0px; top:auto; width:100%; height:100px; background-image: linear-gradient(to right, #b43700 , #e0690f); padding:30px 10px; color:#FFF; font-size:20px}
.confidence span i{ width:40px; display:inline-block; margin-right:10px}

.sentiment_outer{ position:relative}
.popup_container{ position:absolute; display:none; background-color:#FFF; width:100%; top:0; left:0; right:0; bottom:0; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.16);}
.popup_container .close-btn{ font-size: 24px; position:absolute;
    line-height: 35px;
    color: #222;
    display: inline-block;
    width: 35px;
    height: 35px;
	top:30px; right:30px;
    margin: 20px;
    border: 1px solid #222;
    border-radius: 50%;}
.pop_inner_container{display:flex; color:#FFF; overflow:hidden; height:460px}
.pop_inner_container .imgbox{overflow:hidden; height:100%; min-height:100%; width:480px; min-width:480px;}
.pop_inner_container .content_box{ padding:40px 20px 20px 80px; text-align:left; color:#222; max-width:500px; width:100%; margin-top:4% }
.pop_inner_container .content_box h3{ font-size:30px; font-weight:600; color:#5c4bb9; margin-bottom:30px}
.pop_inner_container .content_box h3 i{ width:40px; display:inline-block; margin-right:10px}
.pop_inner_container .content_box p{ width:100%; font-size:18px; line-height:1.4; font-weight:400;}
.pop_inner_container .chartbox{ max-width:600px; width:100%; padding:40px 20px 20px; display:flex; align-items:center; justify-content:center}
.pop_inner_container .chartbox .databox{ width:280px; height:302px; margin:0 auto; text-align:center; padding-right:30px; background: url(./well-being-chart.svg) no-repeat 50% 100%; background-size:cover}
.pop_inner_container .chartbox .databox h4{ font-size:20px; line-height:1.4; color:#5c4bb9; font-weight:bold; padding-top:42%; margin-bottom:0px; padding-left:40px; padding-right:40px}
.pop_inner_container .chartbox .databox span{ display:block; font-size:34px; color:#5c4bb9; font-weight:bold;}

.pop_inner_container .chartbox .databox.job{ background: url(./job-satisfaction-chart.svg) no-repeat 50% 100%;}
.pop_inner_container .chartbox .databox.confidence{ background: url(./confidence-chart.svg) no-repeat 50% 100%;}
.pop_inner_container .chartbox .databox.confidence div{ display:block; font-size:34px; color:#c25700; font-weight:bold;}

.gtb_gray_panel ul li figure{ transition:0.3s}
.gtb_gray_panel ul li figure:hover{  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}


.gtb_map_panel{ position:relative; background: url(./graph_background.webp) no-repeat 50% 0%; background-size: cover; padding:50px 8vw; width:100%;}
.gtb_map_panel h2{ color:#333; font-size:30px; font-weight:700; padding-left:15px}
.gtb_map_panel p{ width:60%; margin:0 auto; color:#333; font-size:18px; line-height:1.4}

.workforce_insight{ padding-top:30px; margin-bottom:30px !important}
.workforce_insight li{ padding:60px 30px 0px !important; width:33.33%; position:relative; margin-right:15px; cursor:auto !important}
.workforce_insight li:last-child{ margin-right:0px}
.workforce_insight li.stress_retention{ background-image: linear-gradient(#bab3fb, transparent);}
.workforce_insight li h2{ position:absolute; top:-50px; left:0; right:0; height:80px; padding: 20px 40px; border-radius:50px; display:flex;
 background-image: linear-gradient(#736bde, #4f4296); font-size:24px; color:#FFF; font-weight:600; align-items:center; justify-content:center }
.workforce_insight li p{ padding-top:10px; font-size:18px; width:100%}

.workforce_insight li.stuck_middle{ background-image: linear-gradient(#8fd9fc, transparent);}
.workforce_insight li.stuck_middle h2{ background-image: linear-gradient(#3893cd, #386097);}

.workforce_insight li.currency{ background-image: linear-gradient(#ffc292, transparent);}
.workforce_insight li.currency h2{ background-image: linear-gradient(#e0690f, #b43700);}
.download_btn{ display:inline-block; border:2px solid #4c79af; background-color:#FFF; padding:6px 30px; border-radius:30px; font-size:16px; color:#4c79af; font-weight:700; transition:0.3s}
.download_btn:hover, .download_btn:focus{ background-color:#4c79af; color:#FFF}

.testimonials{ position:relative; background-color:#5c4bb9; /*background-image: linear-gradient(to right, #3a6599 , #29bddf);*/ padding:80px 0; width:100%;}
.testimonials h4{ color:#FFF; font-size:18px; font-weight:700; line-height:1.5; margin-bottom:40px;}
.author_detail{ display:flex; align-items:center; margin-bottom:30px}
.author_detail figure{ width:120px; height:120px; border-radius:50%; position:relative}
.author_detail figure::after{ content:""; border:1px solid #FFF; position: absolute; width: 140px; height: 140px; border-radius: 50%;
left: -10px; top: -10px;}
.author_detail p{ color:#FFF; font-size:14px; margin-left:20px}
.author_detail p span{ display:block; color:#FFF; font-size:16px;}

.gtb-color-panel{ background-color: #9d323d;
    padding: 50px 0px;
    width: 100%;}
.container-sm {
    position: relative;
    padding: 0px 15px;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}
.gtb-color-panel h2, .gtb-color-panel p {
    color: #FFF;
    text-align: center;
}

.insight_Panel{ display:flex; max-width:340px; width:100%; margin:0 auto; padding-top:30px}
.insight_Panel p{ color:#4f4296; font-weight:600; font-size:18px; text-align:left; margin-left:10px;}
.insight_Panel p span{ display:block; font-size:30px; color:#4f4296; font-weight:600}
.insight_Panel_mid{ display:flex; max-width:380px; width:100%; margin:0 auto; padding-top:30px}
.insight_Panel_mid p{ color:#4c79af; font-size:18px; font-weight:600; text-align:left; margin-right:10px}
.insight_Panel_mid p span{ display:block; font-size:30px; color:#4c79af; font-weight:600}

.insight_Panel_end{ display:flex; max-width:380px; width:100%; margin:0 auto; padding-top:30px; position:relative}
.insight_Panel_end p{ color:#c25700; font-size:18px; font-weight:600; text-align:left; margin-top:10px; position:relative}
.insight_Panel_end p span{ display:block; font-size:30px; color:#c25700; font-weight:600}
.insight_Panel_end samp{ display:block; width:200px; height:200px; position:absolute; top:0px; right:0px}

.get_in_touch_section{ position:relative; background-image: linear-gradient(to right, #4a3bb7 , #1d146e); background-size:cover; padding:50px 8vw; width:100%; text-align:center}
.col_outer{ display:flex; margin-left:-15px; margin-right:-15px}
.get_in_touch_section .get-col{ width:16.667%; position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;}
.get_in_touch_section h2{ color:#FFF; font-size:30px; font-weight:700; margin-bottom:40px}
.get_in_touch_section p{ width:60%; margin:0 auto; color:#FFF; font-size:18px; line-height:1.4; margin-bottom:40px}
.get_in_touch_section .outer_box{ height:180px; overflow:hidden}
.get_in_touch_section .touch-icon{ height:auto; text-align:center;}
.get_in_touch_section h5{ color:#FFF; font-size:18px; line-height:1.4; font-weight:700; padding:20px 20px}

.popinner_container{ background-color: rgb(254, 230, 221); text-align:left; padding:10px; margin:20px auto}
.popinner_container h2{ font-size:24px; font-weight:600px; padding-left:10px}
.popinner_container p {
    width: auto;
    margin: 0;
    color: #333;
    font-size: 16px;
    line-height: 1.2;
}
.form_section{ height:500px; overflow-y:auto}
.form_section .mb-4 {
    margin-bottom: 1.5rem;
}
.form_section label{ font-weight:700}
.form_section input[type=text]{ border:1px solid #ddd; border-radius:6px;}
.submit-btn {
    display: inline-block;
    border: none;
    background-color: #c25700;
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 4px;
    margin-right: 10px;
}

/* worker sentiment */
.worker_sentiment{ display:block; width: 1290px; margin:0 auto; text-align:center; padding-top: 20px;}
.worker_sentiment ul{ display:flex; align-items:flex-end; width:100%; margin:0px;}
.worker_sentiment ul li{ width:50px; margin-right:15px; height:380px; position:relative; display: table-cell; vertical-align:bottom}
.worker_sentiment ul li:last-child{ margin-right:0px}
.worker_sentiment ul li a{ display:block; position:absolute; background-color:#ccc; height:100%; width:50px; bottom:0px; color:#222;}
.worker_sentiment ul li a span{ display:block; transform: rotate(-90deg); position:absolute; bottom:30px; left:0; right:0; top:auto; font-size:18px; line-height:1; text-transform:uppercase; white-space:nowrap}
.worker_sentiment ul li a strong{ color:#ccc}
.worker_sentiment ul li a:hover{ background-color:#222; color:#FFF}
.worker_sentiment ul li a:hover strong{ color:#FFF}
.worker_sentiment ul li a.active{ background-color:#222; color:#FFF}
.worker_sentiment ul li a.active strong{ color:#FFF}
.worker_sentiment ul li a.active2{ background-color:#496b92; color:#FFF}
.worker_sentiment ul li a.active2 strong{ color:#FFF}
.worker_sentiment ul li div{position:absolute; top:-86px}
.number_row{ display:flex; justify-content:space-between; margin-bottom:30px}
.number_row .col{ width:40px;  text-align:center; font-weight:700}

.maptext_wrapper{ position:relative; display:flex; justify-content:space-between; margin-bottom:30px}
.maptext_wrapper p{ width:100%}
.maptext_wrapper .right_col{ width:60%; padding: 0 15px}
.maptext_wrapper .left_col{ width:40%; padding: 0 15px}
.show_result_btn{ display:inline-block; border:2px solid #333; background-color:#FFF; padding:6px 30px; border-radius:30px; 
font-size:14px; color:#333; font-weight:700; text-transform:uppercase; transition:0.3s}
.show_result_btn:hover, .show_result_btn:focus{ background-color:#333; color:#FFF}

.resposive_wrapper{ display: block; width: 100%; overflow-x: auto; overflow-y:hidden; height:450px;}

.action_btn_blue {
    display: inline-block;
    background: #FFF;
    border: 1px solid #5c4bb9;
    color: #5c4bb9 !important;
    font-weight: 700 !important;
    font-size: 18px;
    padding: 10px 50px 10px 40px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: 0.3s;
    border-radius: 30px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.action_btn_blue:hover {
    background: #e0dcfe;
}
.action_btn_blue::after {
    content: "\2192" !important;
    display: inline-block;
    position: absolute;
    font-family: arial;
    font-size: 18px;
    font-weight: bold;
    color: #5c4bb9;
    line-height: 28px;
    padding-left: 6px;
    transition: 0.3s;
}
.action_btn_blue:hover::after {
    padding-left: 12px;
}

.action_btn_white {
    display: inline-block;
    background: #FFF;
    border: 1px solid #FFF;
    color: #4a3bb7 !important;
    font-weight: 700 !important;
    font-size: 18px;
    padding: 10px 50px 10px 40px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: 0.3s;
    border-radius: 30px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.action_btn_white:hover {
    background: #e0dcfe;
    border-color: #e0dcfe;
}
.action_btn_white::after {
    content: "\2192" !important;
    display: inline-block;
    position: absolute;
    font-family: arial;
    font-size: 18px;
    font-weight: bold;
    color: #4a3bb7;
    line-height: 28px;
    padding-left: 6px;
    transition: 0.3s;
}
.action_btn_white:hover::after {
    padding-left: 12px;
}
.elementToFadeInAndOut {
    opacity: 1;
    animation: fade 0.2s linear;
}

@keyframes fade {
  0% { opacity: 0 }
	100% { opacity: 1 }
}

.minh200{ min-height:200px}
.mgb20{ margin-bottom:20px !important}
@media (max-width: 1500px) {
	.barometer_intro, .gtb_gray_panel, .gtb_map_panel, .testimonials, .get_in_touch_section{ padding: 100px 2vw;}
	.gtb_img{ background-position: 120% 0;}
	.lens_container{ width:640px;}
}

@media (max-width: 1400px) {
	.barometer_intro, .gtb_gray_panel, .gtb_map_panel, .testimonials, .get_in_touch_section{ padding:70px 15px;}
#gtbi_shape { width: 400px; height: 500px; left:34px; border-radius: 0% 0% 60% 60% / 50% 50% 50% 50%;}
#gtbi_shape .inner h1{ font-size:45px; line-height:45px; font-weight:600;}
#gtbi_shape .inner p{ font-size:20px; font-weight:400;}
.gtb_img{ display: block; height: 360px; }
#gtbi_shape .inner{ padding:50% 30px 30px;}
#gtbi_shape .inner p{ padding-left:90px}
}
@media (max-width: 1366px) {
.lens_container{ width:600px;}
.insight_Panel_mid img{ height:120px}
.insight_Panel img{ height:100px}
.insight_Panel_end img{ width:100px}
.insight_Panel_end samp{ width: 135px; height: 100px; top: 30px;}
}
@media (max-width: 1280px) {
.pop_inner_container .content_box{ padding:20px}
.pop_inner_container .content_box h3{ font-size:30px; margin-bottom:10px}
.pop_inner_container .content_box p{ font-size:18px;}
.lens_container{ width:560px;}
.lens_inner p{ padding-left:10.2vw}
.get_in_touch_section .get-col{ width:25%}

.pop_inner_container .imgbox{min-width: 400px;}
.pop_inner_container .imgbox img{ height:100%}
.workforce_insight li h2{ font-size:18px}
.worker_sentiment ul li{ width:50px; margin-right:8px; height:350px;}
.worker_sentiment{ width:1155px}
}
@media (max-width: 1024px) {
.lens_container{ width:450px;}

}
@media (max-width: 990px) {
	.lens_inner h1 {font-size: 4vw;}
	.lens_inner p {font-size: 2.4vw;}
 .gtb_gray_panel, .gtb_map_panel, .testimonials, .get_in_touch_section{ padding:50px 15px;}
.barometer_intro ul{ display:block}
.barometer_intro ul li{ width:100%}
.barometer_intro ul li:last-child{ text-align:center}
.barometer_intro ul li p{ font-size:20px; line-height:1.4; color:#222; padding-top:4%}
.gtb_gray_panel p, .gtb_map_panel p, .get_in_touch_section p{ width:100%}
.insight_Panel_end samp{ width:104px}
.workforce_insight li p{ font-size:16px}
.maptext_wrapper{ display:block}
.maptext_wrapper .right_col, .maptext_wrapper .left_col{ width:100%}
}
@media (max-width: 900px) {
.lens_container{ width:400px;}
}

@media (max-width: 790px) {
.lens_container{ width:340px;}
}
@media (max-width: 660px) {
.lens_container{ width:280px;}
}

@media (max-width: 767px) {
	.lens_inner{ margin-bottom:50px;}
	.gtb_gray_panel ul{ display:block;}
	.gtb_gray_panel ul li{ padding:0px 10px; width:100%; margin-bottom:30px}
	.pop_inner_container{display:block; height:auto }
	.popup_container .close-btn{ position:absolute; background-color:#FFF; right:8px; top:8px; text-align:center}
	.pop_inner_container .content_box{ width:auto;}
	.pop_inner_container .imgbox img{ width:100%}
	.pop_inner_container .content_box h3{ font-size:30px; margin-bottom:20px}
	.pop_inner_container .content_box p{ font-size:22px;}
	.get_in_touch_section .get-col{ width:50%}
	.workforce_insight li.stress_retention, .workforce_insight li.stuck_middle, .workforce_insight li.currency{ margin-bottom:70px}
	.minh200{ min-height:100px}
	.pop_inner_container .imgbox {
        min-width: 100%;
    }
	.pop_inner_container .content_box, .pop_inner_container .chartbox{ max-width:100%}
	.insight_Panel, .insight_Panel_mid, .insight_Panel_end{ max-width:100%}
	    .insight_Panel img {
        height: auto;
    }
	.get_in_touch_section h2, .gtb_gray_panel h2, .gtb_map_panel h2{ font-size:24px}
.barometer_intro ul li{ font-size:20px; line-height:1.4}	
}
@media (max-width: 650px) {
	.author_detail{display: block; justify-content:center}
	.author_detail figure{ margin:0 auto;}
	.author_detail p{ margin-left:0; text-align:center; margin-top:15px}
	.testimonials h4{ text-align:center}
}
@media (max-width: 550px) {
.lens_container{ width:230px;}
.lens_inner {
        margin-bottom: 20px;
    }
}
@media (max-width: 480px) {
	.barometer_intro{ padding: 50px 15px;}
    .barometer_intro ul li{ padding:0px 20px 20px; font-size:18px}
	.lens_inner h1{ margin-bottom:15px}
}
@media (max-width: 450px) {
.lens_container{ width:180px;}
}