@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap);
@font-face {
  font-family: 'Times New Roman';
  src: url('/assets/fonts/TimesNewRomanPSMT.woff2') format('woff2'),
      url('/assets/fonts/TimesNewRomanPSMT.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin: 0;padding: 0;border: 0;font-family: 'Montserrat', sans-serif;font-size: 100%;font-weight: normal;vertical-align: top;background: transparent;}

article, aside, figure, footer, header, nav, section, details, summary {display: block;}

html {box-sizing: border-box;scroll-behavior: smooth;}

*,
*:before,
*:after {box-sizing: inherit;}

img {max-width: 100%;height: auto;}

ul {list-style: none;}

a {margin: 0;padding: 0;font-size: 100%;text-decoration: none;vertical-align: baseline;background: transparent;}
a:focus, a:hover {text-decoration: none;vertical-align: baseline;background: transparent;}

hr {display: block;height: 1px;border: 0;border-top: 1px solid #c7c7c7;margin: 0;padding: 0;}

input, select {vertical-align: middle;}

.button, .button:focus, .button:active {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  background: #00557e;
  color: #ffffff;
  line-height: 1;
  border: 0;
  border-radius: 0;
  letter-spacing: 1px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  padding: 15px 25px;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.button:hover, .button:focus {
background: #000000;
color: #ffffff;
outline: none;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}

.button-dark, .button-dark:focus, .button-dark:active {display: inline-block;font-weight: 700;font-size: 13px;background: #000000;color: #ffffff;line-height: 1;border: 0;border-radius: 0;
letter-spacing: 1px;padding: 10px 20px;text-decoration: none;text-transform: uppercase;cursor: pointer;outline: none;padding: 15px 25px;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}

.button-dark:hover, .button-dark:focus {background: #000000;color: #ffffff;outline: none;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}

input, label, textarea, select, input, option, button {outline: none;}

/* let's clear some floats */
.cf:before, .cf:after {display: block;height: 0;overflow: hidden;}

.cf:after {clear: both;}

p {color: #757575;}

.container {width: 100%;max-width: 1180px;padding: 0 15px;margin: 0 auto;}



/* header */
#header{display: block;width: 100%;}
#header .navbar{padding: 11px 1rem;}
#header .navbar-nav .nav-item .nav-link{line-height: 20px;padding: 6px 14px;font-size: 14px;font-weight: 600;text-transform: uppercase;color: #225081;border-radius: 30px;}
#header .navbar-nav .nav-item .dropdown{line-height: 1;}
#header .navbar-nav .nav-item .dropdown .dropdown-toggle{background-color: transparent;}
#header .navbar-nav .nav-item .dropdown .dropdown-toggle::after{content: inherit;}
#header .navbar-nav .nav-item .dropdown .dropdown-toggle i{font-size: 20px;}
#header .navbar-nav .nav-item .dropdown .dropdown-menu{background-color: #00557E;}
#header .navbar-nav .nav-item .dropdown .dropdown-menu .dropdown-item{color: #FFF; padding-left: 5px;padding-right: 5px;border-bottom: 1px solid #FFF;}
#header .navbar-nav .nav-item .dropdown .dropdown-menu .dropdown-item:hover{background-color: #FFF;color: #00557E;}
#header .navbar-nav .nav-item .dropdown .dropdown-menu strong.dropdown-item {font-weight: 600;}
#header .navbar-nav .nav-item .dropdown .dropdown-menu strong.dropdown-item:hover{background-color: transparent;color: #FFF;}

/* footer */
#footer{display: block;width: 100%;}
#footer .footer_top{background-color: transparent;background-image: linear-gradient(180deg, #ffffff 20%, #b8cee3 20%);transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;position: relative;}
#footer .footer_top .footerbg_overlay{height: 100%;width: 100%;top: 0;left: 0;position: absolute;background-color: transparent;background-image: linear-gradient(90deg, #00557e 50%, #FFFFFF00 50%);opacity: 1;transition: background 0.3s, border-radius 0.3s, opacity 0.3s;}
#footer .footer_top .foot_col{width: 100%;position: relative;min-height: 1px;display: flex;}
#footer .footer_top .foot_col .footer_wrap{display: flex;position: relative;width: 100%;flex-wrap: wrap;align-content: flex-start;  background-color: #00557e;padding: 10px;transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}
#footer .footer_top .foot_col .footer_wrap .footer_cont{display: block;width: 100%;padding: 95px 100px 95px 0px;position: relative;}

#footer .footer_top .foot_col .footer_wrap .footer_cont .footlogo{display: inline-block;}
#footer .footer_top .foot_col .footer_wrap .footer_cont .footlogo img{max-width: 100%;height: auto;}

#footer .footer_top .foot_col .footer_wrap .footer_cont .cont_inner{display: flex;flex-direction: column;align-items: flex-start;gap: 20px;}
#footer .footer_top .foot_col .footer_wrap .footer_cont .cont_inner .cont{display: block;width: 100%;}
#footer .footer_top .foot_col .footer_wrap .footer_cont .cont_inner .cont h6{display: block;font-size: 24px;font-weight: 600;line-height: 1.3;color: #FFF;margin-bottom: 15px;}
#footer .footer_top .foot_col .footer_wrap .footer_cont .cont_inner .cont .linked{display: block;width: 100%;}
#footer .footer_top .foot_col .footer_wrap .footer_cont .cont_inner .cont .linked a{display: inline-block;font-size: 16px;font-weight: 400;line-height: 27px;color: #FFF;font-family: 'Open Sans',sans-serif;}
#footer .footer_top .foot_col .footer_wrap .footer_cont .social{display: flex;flex-direction: column;align-items: flex-end;gap: 10px;}
#footer .footer_top .foot_col .footer_wrap .footer_cont .social a{border: 1px solid #FFF;padding: 12px;width: 50px;height: 50px;line-height: 50px;border-radius: 50%;}
#footer .footer_top .foot_col .footer_wrap .footer_cont .social a i{font-size: 25px;color: #FFF;}

#footer .footer_bot{display: block;width: 100%;padding: 20px;background-color: #FFF;}
#footer .footer_bot .copyright{display: block;font-size: 16px;font-weight: normal;line-height: 27px;color: #4b4f58;font-family: 'Open Sans',sans-serif;}
#footer .footer_bot .link_box{width: 100%;text-align: right;}
#footer .footer_bot .link_box .menu-link{display: block;font-size: 16px;font-weight: normal;line-height: 27px;color: #4b4f58;font-family: 'Open Sans',sans-serif;}
#footer .footer_bot .link_box .menu-link:hover{color: #00557e;}
/* job */
.recent_jobs{display: block;width: 100%;padding: 40px 0;}
.recent_jobs .wrapper{max-width: 1320px;width: 100%;margin: 0 auto;padding: 0 20px;}
.recent_jobs .wrapper .row{display: flex;flex-wrap: wrap;margin-right: -20px;margin-left: -20px;}
.recent_jobs .wrapper .row .col6{flex: 0 0 auto;width: 50%;max-width: 100%;padding-right: 20px;padding-left: 20px;}
.recent_jobs .wrapper .row .col12{flex: 0 0 auto;width: 100%;max-width: 100%;padding-right: 20px;padding-left: 20px;}

/* .recent_jobs .head_title{display: block;width: 100%;padding: 20px 0;}
.recent_jobs .head_title h2{display: block;font-size: 60px;font-weight: 700;line-height: 1.2;color: #121212;padding-bottom: 30px;} */

.recent_jobs .head_title h2{display: block;font-size: 50px;font-weight: 600;line-height: 75px;color: #225081;padding: 0 0 60px 80px;}
.recent_jobs .head_title h2::before{content: "";position: absolute;left: 15px;top: 7px;width: 60px;height: 60px;background-color: #225081;}

.recent_jobs .jobbox{display: block;width: 100%;padding: 40px 40px;margin-bottom: 40px;background-color: #00557e;box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;}
.recent_jobs .jobbox .job_title{display: block;width: 100%;margin-bottom: 30px;}
.recent_jobs .jobbox .job_title h2{display: flex;align-items: center;justify-content: center;font-size: 26px;font-weight: 600;line-height: 1.2;text-align: center;color: #FFFFFF;min-height: 62px;overflow: hidden;text-transform: capitalize;}

.recent_jobs .jobbox .badge_tags{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;gap: 10px;}
.recent_jobs .jobbox .badge_tags .badge{display: inline-flex;align-items: center;justify-content: flex-start;width: auto;border: 0px solid #121212;border-radius: 6px; padding: 5px 10px;background-color: rgb(255, 255, 255, 0.7);width: 100%;text-align: left;}
.recent_jobs .jobbox .badge_tags .badge .fas{display: flex;align-items: center;justify-content: center;width: 20px;height: 20px;margin-right: 10px;color: #000000;}
.recent_jobs .jobbox .badge_tags .badge span{display: block;font-size: 14px;font-weight: 600;line-height: 1;color: #000000;}
.recent_jobs .jobbox .badge_tags .badge p{display: block;font-size: 14px;font-weight: 400;line-height: 1;margin-bottom: 0;margin-left: 6px;color: #000000;white-space: pre-line;}

.recent_jobs .jobbox .short_cont{display: block;width: 100%;padding-top: 20px;}
.recent_jobs .jobbox .short_cont p{display: block;font-size: 18px;font-weight: 400;line-height: 1.2;color: #FFFFFF;text-align: center; text-overflow:ellipsis;overflow:hidden;display: -webkit-box !important;-webkit-line-clamp: 4;-webkit-box-orient: vertical;white-space: normal;min-height: 86px;}
.recent_jobs .jobbox .btn_box{display: flex;align-items: center;justify-content: center;width: 100%;margin-top: 30px;}
.recent_jobs .jobbox .btn_box .button{display: inline-block;font-weight: 700;font-size: 13px;background: #FFFFFF;color: #000000;line-height: 1;border: 0;border-radius: 0;letter-spacing: 1px;padding: 10px 20px;text-decoration: none;text-transform: uppercase;cursor: pointer;outline: none;padding: 15px 25px;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}
.recent_jobs .jobbox .btn_box .button:hover{background-color: #000000;color: #FFFFFF;}
.recent_jobs .jobbox .btn_box .button .fas{margin-left: 10px;}




/* banner */
.banner{display: block;width: 100%;background-color: transparent;background-image: linear-gradient(90deg, #00557e 50%, #b8cee3 50%);position: relative;}
.banner .banner_wrap.left{width: 100%;position: relative;display: flex;flex-wrap: wrap;align-content: flex-start;padding: 140px 0px 0px 0px;background-color: #00557e;}
.banner.career .banner_wrap.left .bannerbg-overlay{position: absolute;top: 0;left: 0;height: 100%;width: 100%;background-image: url(https://www.elegantknitting.lk/wp-content/uploads/2022/11/Career_bg.png);background-position: bottom center;background-repeat: no-repeat;opacity: 0.2;background-attachment: scroll;}
.banner.jobdetails .banner_wrap.left .bannerbg-overlay{position: absolute;top: 0;left: 0;height: 100%;width: 100%;background-image: url(https://www.elegantknitting.lk/wp-content/uploads/2022/11/jobdetail_bg.png);background-position: center center;background-repeat: no-repeat;opacity: 0.2;background-attachment: scroll;}
.banner .banner_wrap.left .cont_up{display: flex;flex-direction: column;width: 100%;position: relative;}
.banner .banner_wrap.left .cont_up .subhead{display: block;width: 100%;padding: 0;text-align: left;}
.banner .banner_wrap.left .cont_up .subhead h3{display: block;font-size: 24px;font-weight: 600;line-height: 31px;color: #FFF;text-transform: capitalize;}
.banner .banner_wrap.left .cont_up .divider{display: block;height: 1px;border: 0;border-top: 2px solid #FFF;margin: 15px 0 0;padding: 15px 0 0;}
.banner .banner_wrap.left .cont_up .head_title{display: block;width: 100%;padding: 35px 150px 50px 0px;text-align: left;}
.banner .banner_wrap.left .cont_up .head_title h1{display: block;font-size: 60px;font-weight: 800;line-height: 72px;color: #FFF;}

.banner .banner_wrap.right{position: relative;min-height: 100%;display: flex;}
.banner .banner_wrap.right .box{display: flex;flex-wrap: wrap;align-content: flex-end;align-items: flex-end;width: 100%;background-color: #000;position: relative;}
.banner .banner_wrap.right .box .boxwrap{width: 100%;text-align: center;position: relative;z-index: 1;}
.banner .banner_wrap.right .box .boxwrap .imgbox{margin: 0px -10px -100px -150px;}
.banner .banner_wrap.right .box .boxwrap .imgbox img{max-width: 100%;height: auto;}

.job_details .job_detailsinfo{padding: 60px 0px 60px 0px;}
.job_details .job_detailsinfo .head_title{display: block;width: 100%;padding: 20px 0;}
.job_details .job_detailsinfo .head_title h2{display: block;font-size: 60px;font-weight: 700;line-height: 1.2;color: #121212;padding-bottom: 0;margin-bottom: 20px;}
.job_details .job_detailsinfo .details_box{display: block;width: 100%;padding-bottom: 40px;}
.job_details .job_detailsinfo .details_box p{display: block;font-size: 18px;font-weight: normal;line-height: 28px;color: #3a3a3a;margin-bottom: 15px;}

.job_details .job_detailsinfo .badge_tags{display: flex;align-items: center;justify-content: flex-start;flex-wrap: wrap;gap: 10px;margin-bottom: 40px;}
.job_details .job_detailsinfo .badge_tags .badge{display: inline-flex;align-items: center; border: 0px solid #121212;border-radius: 6px; padding: 5px 10px;background-color: #00557e;}
.job_details .job_detailsinfo .badge_tags .badge .fas{display: flex;align-items: center;justify-content: center;color: #FFFFFF;width: 20px;height: 20px;margin-right: 10px;}
.job_details .job_detailsinfo .badge_tags .badge span{display: block;font-size: 14px;font-weight: 600;line-height: 1;color: #FFFFFF;}
.job_details .job_detailsinfo .badge_tags .badge p{display: block;font-size: 14px;font-weight: 400;line-height: 1;margin-bottom: 0;margin-left: 6px;color: #FFFFFF;}

.job_details .box_info{display: block;width: 100%;padding: 10px 20px;background-color: #00557e;}
.job_details .box_info .head_title{display: block;width: 100%;padding: 10px 0;}
.job_details .box_info .head_title h3{display: block;font-size: 26px;font-weight: 600;line-height: 1.2;color: #FFFFFF;padding: 0;margin-bottom: 0; text-decoration: underline;}
.job_details .box_info .listings{display: block;width: 100%;padding: 20px;font-size: 18px;font-weight: 400;line-height: 1.2;color: #FFFFFF;}
.job_details .box_info .listings p{font-size: 18px;font-weight: 400;line-height: 1.2;margin-bottom: 15px;color: #FFFFFF;}
.job_details .box_info .listings ul{margin-left: 0;margin-bottom: 0px;}
.job_details .box_info .listings ul li{font-size: 18px;font-weight: 400;line-height: 1.2;margin-bottom: 15px;color: #FFFFFF;list-style: disc;}
.job_details .box_info .listings ul li ul{margin: 10px 0 10px 20px; margin-left: 20px;margin-bottom: 20px;margin-top: 10px;}
.job_details .box_info .listings ul li ul li{font-size: 16px;font-weight: 400;line-height: 1.2;margin-bottom: 5px;color: #FFFFFF;}

.job_details .btn_box{display: flex;align-items: center;justify-content: space-between;width: 100%;margin-top: 40px;}
.job_details .btn_box .button{display: inline-block;font-weight: 700;font-size: 13px;background: #00557e;color: #ffffff;line-height: 1;border: 0;border-radius: 0;letter-spacing: 1px;padding: 10px 20px;text-decoration: none;text-transform: uppercase;cursor: pointer;outline: none;padding: 15px 25px;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}
.job_details .btn_box .button:hover{background-color: #222222;color: #FFFFFF;}

.success-num { margin-left: auto; margin-right: auto; width: 160px;}
.success-num strong { font-weight: 600;}
.alert-success { text-align: center;}

/* job apply */
.job_apply{display: block;width: 100%;padding: 40px 40px;background-color: #00557E;}
.job_apply .wrapper{max-width: 1320px;width: 100%;margin: 0 auto;padding: 0 10px;}
.job_apply .wrapper .row{display: flex;flex-wrap: wrap;margin-right: -10px;margin-left: -10px;}
.job_apply .wrapper .row .col100{flex: 0 0 auto;width: 100%;max-width: 100%;padding-right: 10px;padding-left: 10px;}
.job_apply .wrapper .row .col50{flex: 0 0 auto;width: 50%;max-width: 100%;padding-right: 10px;padding-left: 10px;}

.job_apply .job_title{display: block;width: 100%;padding: 20px 0;text-align: center;}
.job_apply .job_title h2{display: block;font-size: 40px;font-weight: 700;line-height: 1.2;color: #FFFFFF;}
.job_apply .job_title h3{display: block;font-size: 24px;font-weight: 700;line-height: 1.2;color: #FFFFFF;margin-bottom:0;}

.job_apply .filed{display: block;width: 100%;padding: 10px 0;}
.job_apply .filed .fbox{display: flex;align-items: center;justify-content: center;gap: 10px;}
.job_apply .filed .fbox span{color: #FFF;}
.job_apply .filed label{display: block;width: 100%;font-size: 16px;font-weight: 600;line-height: 1.2;color: #FFFFFF;margin-bottom: 10px;text-transform: capitalize;}
.job_apply .filed label span{color: red;}
.job_apply .filed input{display: block;width: 100%;height: 40px;margin: 0;padding: 7px !important;font-size: 14px;font-weight: 400;line-height: normal;border: 1px solid #00557e !important;border-radius: 3px !important;background-color: #FFF !important;color: #121212 !important;-moz-appearance: none;-webkit-appearance: none;appearance: none;outline: none;}
.job_apply .filed textarea{display: block;width: 100%;height: 100px;margin: 0;padding: 10px !important;font-size: 14px;font-weight: 400;line-height: normal;border: 1px solid #00557e !important;border-radius: 3px !important;background-color: #FFF !important;color: #121212 !important;-moz-appearance: none;-webkit-appearance: none;appearance: none;outline: none;}
.job_apply .filed input::-webkit-outer-spin-button,
.job_apply .filed input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
.job_apply .filed input[type=number] {-moz-appearance: textfield;}
.job_apply .filed select{display: block;width: 100%;height: 40px;margin: 0;padding: 10px;font-size: 14px;font-weight: 400;line-height: normal;border: 1px solid #00557e !important;border-radius: 3px;  background-color: #FFF;color: #121212 !important;outline: none;}

.job_apply .record_box{display: block;width: 100%;padding: 20px 40px;border-top: 2px solid #000;margin-top: 40px;}
.job_apply .record_box .paragraph{display: block;width: 100%;margin: 10px;background-color: #000000;padding: 20px 40px;}
.job_apply .record_box .paragraph{font-size: 16px;font-weight: 400;line-height: 1.7;color: #FFFFFF;margin-bottom: 10px;}
.job_apply .record_box .note{display: block;width: 100%;padding-bottom: 10px;}
.job_apply .record_box .note i{display: block;font-size: 14px;font-weight: 600;line-height: 1;color: red;}
.qc_audio_record_div .voice_countdown{color: #FFF;}

.jobmodal .modal-dialog{max-width: 1000px;}



.job_apply .filed .flex_box{display: flex;align-items: center;justify-content: center;position: relative;}
.qc_audio_record_div .bot_recoding_animation h2{display: block;font-size: 20px;font-weight: 600;line-height: 1.2;color: #000;}
.job_apply .filed .button{display: flex;align-items: center;justify-content: flex-start;width: 40px;height: 40px;background-color: #FFFFFF;border: 0;border-radius: 3px;cursor: pointer;position: absolute;right: 0;}
.job_apply .btn_box{display: flex;align-items: center;justify-content: flex-start;width: 100%;margin-top: 20px;}
.job_apply .btn_box .button,.job_apply .filed .flex_box .qc_audio_record_button, input[type="submit"]{display: inline-block;font-weight: 700;font-size: 13px;background: #000000;color: #FFFFFF;line-height: 1;border: 0;border-radius: 0;letter-spacing: 1px;padding: 10px 20px;text-decoration: none;text-transform: uppercase;cursor: pointer;outline: none;padding: 15px 25px;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}
.job_apply .btn_box .button:hover,.job_apply .filed .flex_box .qc_audio_record_button:hover, input[type="submit"]:hover{background-color: #000000;color: #FFFFFF;}



/* ==================content-header================== */

.content-header .col-md-6.col-sm-12 { max-width: 100%;}

.content-header .filed {display: flex; align-items: center; padding: 10px 0;}

/* ==================content-header================== */


/* cont_box */
.cont_box{display: block;width: 100%;padding: 100px 0;background-color: #ffffff;background-image: url(https://www.elegantknitting.lk/wp-content/uploads/2022/10/dotted_sm.png);  background-position: top right;  background-repeat: no-repeat;  background-size: 40% auto;}
.cont_box .head_title{display: block;width: 100%;padding: 0 0;position: relative;margin-bottom: 20px;}
.cont_box .head_title h2{display: block;font-size: 50px;font-weight: 600;line-height: 75px;color: #225081;padding: 0 0 0 80px;}
.cont_box .head_title h2::before{content: "";position: absolute;left: 0;top: 7px;width: 60px;height: 60px;background-color: #225081;}
.cont_box .cont{display: block;width: 100%;}
.cont_box .cont p{display: block;font-size: 16px;font-weight: normal;line-height: 27px;color: #757575;margin-bottom: 28px;}


/* videos */
.videos_box{display: block;width: 100%;padding: 150px 0 33px;background-color: #FFFFFF;background-image: url(https://www.elegantknitting.lk/wp-content/uploads/2022/10/dotted_sm.png);
background-position: top right;background-repeat: no-repeat;background-size: 40% auto;position: relative;}
.videos_box .bg-over{background-image: url(https://www.elegantknitting.lk/wp-content/uploads/2022/11/Textile.svg);background-position: top left;background-repeat: no-repeat;background-size: 20% auto;opacity: 0.4;height: 100%;width: 100%;top: 0;left: 0;position: absolute;}
.videos_box .ytvideo{display: block;width: 100%;padding: 30px 0;}
.videos_box .ytvideo iframe{height: 200px;}


/* login */
#login{display: block;width: 100%;padding: 40px 0 160px;}
#login .head_title{display: block;width: 100%;padding: 20px 0;}
#login .head_title h2{display: block;font-size: 60px;font-weight: 700;line-height: 1.2;color: #121212;padding-bottom: 20px;}
#login .form_box{display: block;width: 100%;background-color: #00557E;padding: 40px;}
#login .form_box .filed{display: block;width: 100%;padding: 0 0 20px;}
#login .form_box .filed label{display: block;width: 100%;font-size: 16px;font-weight: 600;line-height: 1.2;color: #FFFFFF;margin-bottom: 10px;text-transform: capitalize;}
#login .form_box .filed input{display: block;width: 100%;height: 40px;margin: 0;padding: 10px !important;font-size: 14px;font-weight: 400;line-height: normal;border: 1px solid #00557e !important;border-radius: 3px !important;background-color: #FFF !important;color: #121212 !important;-moz-appearance: none;-webkit-appearance: none;appearance: none;outline: none;}

/* examination */
.examination{display: block;width: 100%;padding: 40px 0 160px;}
.examination .head_title{display: block;width: 100%;padding: 20px 0;}
.examination .head_title h2{display: block;font-size: 33px;font-weight: 700;line-height: 1.2;color: #121212;}
.examination .cong h2{display: block;font-size: 40px;font-weight: 700;line-height: 1.2;color: #121212;padding-bottom: 20px;}
.examination .steps {list-style: none;margin: 0;padding: 0;display: table;table-layout: fixed;width: 100%;color: #d1d1d4;height: 4rem;}
.examination .steps > .step {position: relative;display: table-cell;text-align: center;font-size: 0.875rem;color: #6d6875;}
.examination .steps > .step:before {content: "";display: block;margin: 0 auto;background: #fff;border: 2px solid #d1d1d4;color: #d1d1d4;width: 3rem;height: 3rem;text-align: center;line-height: 2.9rem;border-radius: 10px;position: relative;z-index: 1;font-weight: 700;font-size: 1rem;}
.examination .steps > .step:after {content: '';position: absolute;display: block;width: 100%;top: 10px;left: calc(50% - 50px);background-image: url(https://elegantdesigners.info/job_portal/public/images/arrow_light_slim.svg);background-position: center center;background-size: contain;height: 30px;background-repeat: no-repeat;}
/* .examination .steps > .step:after {content: '';position: absolute;display: block;background: #d1d1d4;width: 100%;height: 4px;top: 1.4rem;left: 50%;} */
.examination .steps > .step:last-child:after {display: none;}
.examination .steps > .step.is-complete {color: #6d6875;}
.examination .steps > .step.is-complete:before {content: '\2713';color: green;background: #FFFFFF;border: 2px solid green;font-size: 20px;font-weight: 900;}
.examination .steps > .step.is-complete:after {background-image: url(https://elegantdesigners.info/job_portal/public/images/arrow_dark_slim.svg);}
/* .examination .steps > .step.is-complete:after {background: #00557e;} */
.examination .steps > .step.is-active {font-size: 1.5rem;}
.examination .steps > .step.is-active:before {color: #fff;border: 2px solid #00557e;background: #00557e;}
.examination .steps > .step a{display: inline-block;font-size: 16px;font-weight: 600;margin-top: 10px;color: #000;border: 2px solid #000;padding: 5px 10px;border-radius: 10px;}
.examination .steps > .step a:hover{color: #FFF;border: 2px solid #00557E;background-color: #00557E;}
.examination .steps > .step.is-active a{font-size: 20px;color: #FFF;border: 2px solid #00557E;background-color: #00557E;}
.examination .steps > .step.is-active a:hover{color: #000;border: 2px solid #000;background-color: transparent;}


.exam_main{display: block;width: 100%;padding: 40px 0 160px;}
.exam_main .head_title{display: block;width: 100%;padding: 20px 0;}
.exam_main .head_title h2{display: block;font-size: 60px;font-weight: 700;line-height: 1.2;color: #121212;padding-bottom: 20px;}
.exam_main .exambox{display: block;width: 100%;background-color: #00557E;padding: 40px;}
.exam_main .exambox .exam_details {width: 100%;background-color: #b8cee3;border-collapse: collapse;border: 2px solid #000;color: #000000;}
.exam_main .exambox .exam_details td{border: 2px solid #000;padding: 10px;}
.exam_main .exambox .exam_details td strong{display: block;font-size: 18px;font-weight: 600;line-height: 1;color: #000000;}
.exam_main .exambox .exam_details td p{display: block;font-size: 18px;font-weight: 400;line-height: 1;color: #000000;}

.audio_question{display: block;width: 100%;border: 4px solid #00557E;background-color: rgba(184, 206, 227, 0.7);padding: 40px;margin-bottom: 40px;border-radius: 40px;}
.audio_question .audio_box{display: block;width: 100%;margin-bottom: 20px;text-align: center;}
.audio_question .audio_box audio{display: block;width: 100%;} 
.audio_question .examquestion .mcq_list{border: 2px solid #000;background-color: rgba(184, 206, 227, 0.7);padding: 20px;margin-bottom: 0;border-radius: 40px;}

.examquestion{display: block;width: 100%;padding: 0px 0px 20px; position: relative;}
.examquestion .head_title{display: block;width: 100%;padding: 20px 0;}
.examquestion .head_title h2{display: block;font-size: 60px;font-weight: 700;line-height: 1.2;color: #121212;padding-bottom: 20px;}
.examquestion .head_title #countdown { position: fixed; right: 30px; top: 100px; background: #00557e; padding: 10px; color: #fff; z-index: 99; border: 1px solid #b8cee3; border-radius: 8px;}
.examquestion .mcq_list{display: flex;flex-direction: column;gap: 40px;width: 100%;border: 4px solid #00557E;background-color: rgba(184, 206, 227, 0.7);padding: 40px;margin-bottom: 20px;border-radius: 40px;}
.examquestion .mcq_list .qustion{display: block;width: 100%;}
.examquestion .mcq_list .qustion .help_text{display: inline-block;font-size: 14px;vertical-align: middle;font-weight: 600;white-space: pre-line;margin-bottom: 20px;}
.examquestion .mcq_list .qustion .imgbox{display: block;width: 100%;padding-bottom: 40px;text-align: center;}
.examquestion .mcq_list .qustion .imgbox img{max-width: 100%;height: auto;}
.examquestion .mcq_list .qustion .flexqust{display: flex;align-items: flex-start;justify-content: flex-start;width: 100%;margin-bottom: 20px;}
.examquestion .mcq_list .qustion .flexqust span{display: inline;font-size: 24px;font-weight: 400;line-height: 1.3;padding-right: 10px;}
.examquestion .mcq_list .qustion .flexqust strong{display: inline;font-size: 24px;font-weight: 600;line-height: 1.3;white-space: pre-line;}
.examquestion .mcq_list .qustion .cust-check-group{display: flex;align-items: flex-start;justify-content: flex-start;flex-direction: column; gap: 12px;}
.examquestion .mcq_list .qustion .cust-check-group .cust-check {display: block;width: 100%;}
.examquestion .mcq_list .qustion .cust-check-group .cust-check label {display: block;width: 100%;line-height: 1;cursor: pointer;}
.examquestion .mcq_list .qustion .cust-check-group .cust-check label:hover span{background-color: #000;color: #FFF;}
.examquestion .mcq_list .qustion .cust-check-group .cust-check label span {display: block;width: 100%;text-align: left;padding: 11px 20px;border: 1px solid #000;border-radius: 10px;background-color: #FFF;}
.examquestion .mcq_list .qustion .cust-check-group .cust-check label input {position: absolute;display: none;color: #000;}
.examquestion .mcq_list .qustion .cust-check-group .cust-check label input + span{color: #000;}
.examquestion .mcq_list .qustion .cust-check-group .cust-check input:checked + span {color: #FFFFFF;background-color: #00557E;}

.examquestion .mcq_list .qustion .img-check-group{display: flex;align-items: flex-start;justify-content: flex-start;gap: 20px;}
.examquestion .mcq_list .qustion .img-check-group .cust-check-img {display: block;width: 100%;}
.examquestion .mcq_list .qustion .img-check-group .cust-check-img label {display: block;width: 100%;line-height: 1;cursor: pointer;}
.examquestion .mcq_list .qustion .img-check-group .cust-check-img label:hover span{opacity: 1;}
.examquestion .mcq_list .qustion .img-check-group .cust-check-img label span {display: block;width: 100%;text-align: left;padding: 10px;border: 1px solid #000;border-radius: 10px;opacity: 0.7;}
.examquestion .mcq_list .qustion .img-check-group .cust-check-img label span img{max-width: 100%;width: 200px;height: 200px;-o-object-fit: cover;object-fit: cover;-o-object-position: center;object-position: center;}
.examquestion .mcq_list .qustion .img-check-group .cust-check-img label input {position: absolute;display: none;color: #000;}
.examquestion .mcq_list .qustion .img-check-group .cust-check-img label input + span{color: #000;}
.examquestion .mcq_list .qustion .img-check-group .cust-check-img input:checked + span {color: #FFFFFF;background-color: #00557E;}


.calendar_main .calender_box .fc-toolbar-chunk .fc-button{background-color: #00557e;border: 0px solid transparent;border-radius: 0;}
.calendar_main .calender_box .fc-col-header th{background-color: #00557E;color: #FFF;}
.fc .fc-daygrid-event{background-color: #00557E;color: #FFF;white-space: break-spaces;border: 0;padding: 2px;}

/* Book Your Slot */

.form_box > form > .row { padding: 30px; background-color: #00557E; border-radius: 10px; margin: 15px 0;}
.changeLang-right { margin-left: auto;}
.changeLang { width: 108px; margin-left: auto; margin-bottom: 15px; height: 40px; padding: 10px; font-size: 14px; font-weight: 400; border: 1px solid #00557e; border-radius: 3px; color: #121212;}
.card-title { font-size: 40px; font-weight: 700; text-transform: uppercase;}
.form_box .filed { padding: 10px 0;}
.form_box .filed label { font-size: 14px; font-weight: 600; vertical-align: baseline; color: #fff;}
.form_box .filed input { height: 40px; font-size: 14px; padding: 10px; border: 1px solid #00557e;}
.form_box { margin: 30px 0;}
.form_box .filed .title { font-size: 24px; text-decoration: underline;}
.form_box .filed span {line-height: 25px; cursor: pointer; padding: 6px 14px; margin: 0 5px;height: 25px;  border-radius: 5px; border:  1px solid #fff;}
.form_box .filed input[type="checkbox"], .form_box .filed input[type="radio"] { visibility: hidden; width: 0; height: 0;}
.dropdown-menu { padding: 15px !important;}
.datepicker td { padding: 0 8px;}
.form_box .filed input[type="radio"]:checked + span, .form_box .filed input[type="checkbox"]:checked + span{ background-color: #b8cee3; color: #00557e; font-weight: 600;}


/* eyetest */
.list_dots{display: flex;align-items: center;justify-content: center;gap: 10px;}
.list_dots li{list-style: none;}
.list_dots li span{border: 1px solid #00557E;border-radius: 50%;width: 20px;height: 20px;display: block;}
.list_dots li.complete span{background-color: #25B24A;border: 1px solid #25B24A;}
.list_dots li.active span{background-color: #00557E;border: 1px solid #00557E;}

 .test_letter {display: block;width: 100%;}
 .test_letter strong{display: block;letter-spacing:5px;user-select: none;font-family: 'Times New Roman';}

.thank_you{display: block;width: 100%;padding: 60px 0;}
.thank_you .headtitle{display: block;width: 100%;text-align: center;padding-bottom: 40px;}
.thank_you .headtitle i{font-size: 80px;margin-bottom: 20px;color: #25B24A;}
.thank_you .headtitle h1{display: block;font-size: 60px;font-weight: 600;line-height: 1;margin-bottom: 20px;}
.thank_you .headtitle strong{display: block;font-size: 26px;font-weight: 400;line-height: 1.3;}
#invite_link{display: flex;align-items: center;justify-content: space-between;width: 100%;padding: 20px;background-color: #00557e;gap: 20px;margin-top: 30px;}
#invite_link span{display: inline-block;font-size: 20px;font-weight: 400;line-height: 1;color: #FFFFFF;}
#invite_link .copy{display: flex;align-items: center;justify-content: center;cursor: pointer;} 
#invite_link .copy i{font-size: 20px;line-height: 1;color: #FFFFFF;}

/* Book Your Slot */

@media (max-width: 1366px) and (min-width: 1280px) {}

@media only screen and (max-width: 1199px) {
  #login .head_title h2, .examination .head_title h2, .exam_main .head_title h2{font-size: 40px;}

  /* .examination .steps {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column; width: 100%;color: #d1d1d4;height: auto;gap: 40px;overflow: hidden;} */
  .examination .steps {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column; width: 100%;color: #d1d1d4;height: auto;gap: 40px;}
  .examination .steps > .step {position: relative;display: table-cell;text-align: center;font-size: 0.875rem;color: #6d6875;}
  .examination .steps > .step:before {content: "";display: block;margin: 0 auto;background: #fff;border: 2px solid #d1d1d4;color: #d1d1d4;width: 3rem;height: 3rem;text-align: center;line-height: 2.9rem;border-radius: 10px;position: relative;z-index: 1;font-weight: 700;font-size: 1rem;}
  /* .examination .steps > .step:after {content: '';position: absolute;display: block;background: #d1d1d4;width: 100px;height: 4px;top: 92%;left: 50%;transform: translate(-50%, -50%) rotate(90deg);} */
.examination .steps > .step:after {display: block;width: 80px;top: 85px;left: 50%;background-position: center center;background-size: contain;height: 20px;background-repeat: repeat;transform: translate(-50%, -50%) rotate(90deg);}
/* .examination .steps > .step:after {content: '';position: absolute;display: block;background: #d1d1d4;width: 100px;height: 4px;top: 92%;left: 50%;transform: translate(-50%, -50%) rotate(90deg);} */
  .examination .steps > .step:last-child:after {display: none;}
  .examination .steps > .step.is-complete {color: #6d6875;}
  .examination .steps > .step.is-complete:before {content: '\2713';color: green;background: #FFFFFF;border: 2px solid green;font-size: 20px;font-weight: 900;}
  /* .examination .steps > .step.is-complete:after {background: #00557e;} */
  .examination .steps > .step.is-active {font-size: 1.5rem;}
  .examination .steps > .step.is-active:before {color: #fff;border: 2px solid #00557e;background: #00557e;}
  .examination .steps > .step a{display: inline-block;font-size: 16px;font-weight: 600;margin-top: 2px;background-color: #FFF;color: #000;border: 2px solid #000;padding: 5px 10px;border-radius: 10px;position: relative;z-index: 1;}
  .examination .steps > .step a:hover{color: #FFF;border: 2px solid #00557E;background-color: #00557E;}
  .examination .steps > .step.is-active a{font-size: 20px;color: #FFF;border: 2px solid #00557E;background-color: #00557E;}
  .examination .steps > .step.is-active a:hover{color: #000;border: 2px solid #000;background-color: transparent;}
}
    
@media only screen and (max-width: 991px)  {
  .banner .banner_wrap.left{padding: 174px 0px 76px 0px;}
  .banner .banner_wrap.left .cont_up .subhead h3{font-size: 21px;line-height: 28px;}
  .banner .banner_wrap.left .cont_up .head_title{padding: 0px 45px 20px 0px;}
  .banner .banner_wrap.left .cont_up .head_title h1{font-size: 37px;line-height: 44px;}
  .banner .banner_wrap.right .box .boxwrap .imgbox{margin: 0px 35px -100px -150px;}
  #footer .footer_top .foot_col .footer_wrap .footer_cont .footlogo{padding-bottom: 40px;}
  #footer .footer_top .foot_col .footer_wrap .footer_cont .footlogo img{width: 100%;max-width: 180px;}
  .job_details .job_detailsinfo .head_title h2{font-size: 40px;line-height: 48px;}
  .job_apply .job_title h2{font-size: 30px;}
  .audio_question{padding: 20px;}
  .examquestion .head_title h2{font-size: 40px;}
  .examquestion .mcq_list{padding: 20px;}
  .examquestion .mcq_list .qustion .imgbox{padding-bottom: 20px;}
  .examquestion .mcq_list .qustion .flexqust span,.examquestion .mcq_list .qustion .flexqust strong{font-size: 18px;}
}
    
@media only screen and (max-width: 768px)  {
  .banner .banner_wrap.left{padding: 130px 0px 90px 0px;}
  .banner .banner_wrap.left .cont_up .subhead h3{font-size: 21px;line-height: 28px;}
  .banner .banner_wrap.left .cont_up .head_title h1{font-size: 30px;line-height: 36px;}
  .banner .banner_wrap.right .box .boxwrap .imgbox{margin: 0px 25px -50px -70px;}
  .videos_box{padding: 50px 0 33px;}
  .videos_box .ytvideo iframe{height: 340px;}
  .recent_jobs .head_title h2{font-size: 28px;line-height: 42px;padding: 0 0 30px 50px;}
  .recent_jobs .head_title h2::before {top: 0;width: 40px;height: 40px;}

  .cont_box .head_title h2{font-size: 25px;line-height: 42px;padding: 0 0 30px 50px;}
  .cont_box .head_title h2::before {top: 0;width: 40px;height: 40px;}
  .cont_box .cont p{font-size: 14px;}
  #footer .footer_top .foot_col .footer_wrap .footer_cont{padding: 25px 25px 70px 0px;}
  .job_details .job_detailsinfo .head_title h2{font-size: 30px;line-height: 1.2;}
  .job_details .job_detailsinfo .details_box p{font-size: 16px;line-height: 1.3;}
  .job_details .box_info{margin-bottom: 20px;}
  .job_details .box_info .listings ul li{font-size: 14px;line-height: 1.2;}
  .job_details .btn_box{margin-top: 20px;}
  .job_details .job_detailsinfo{padding: 50px 0px 60px 0px;}
  .job_apply{padding: 20px 20px;}
  .job_apply .job_title h2{font-size: 20px;}
  #login .head_title h2, .examination .head_title h2, .exam_main .head_title h2{font-size: 30px;}
  .examination, .exam_main{padding: 40px 0 80px;}
  
}
    
@media only screen and (max-width: 479px)  {
  .videos_box .ytvideo iframe{height: 200px;}
  #footer .footer_bot .link_box{width: 100%;text-align: center;margin-bottom: 20px;}
  #footer .footer_bot .copyright{text-align: center;}
  #login .form_box{padding: 20px;}
  .exam_main .exambox{padding: 20px;}
  .form_box {margin: 15px 0;}
  .card-title { font-size: 30px;}
  .form_box .filed .title { font-size: 18px;}
  .form_box > form > .row { padding: 15px;}
  .form_box .filed .check { margin: 5px 0; display: block;}
  .job_apply{padding: 10px 10px;}
  .examquestion .head_title #countdown { top: 90px; right: 0;}
  .job_apply .job_title{padding: 10px 0;}
  .job_apply .filed input{padding: 7px !important;}
  #login .head_title h2, .examination .head_title h2, .exam_main .head_title h2{font-size: 26px;}
}


/* personality_table */

.personality_table { padding: 30px 15px;}
.personality_table .detail-block { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px;}
.personality_table .detail-block p { font-size: 22px}
.personality_table .detail-block p i { vertical-align: baseline;}
.personality_table table { border: 1px solid #dee2e6;}
.personality_table table thead { background-color: #00557e;}
.personality_table table thead tr th { white-space: nowrap; color: #fff; font-weight: 500;}
.personality_table table thead tr th p { color: #fff; font-weight: 500;}
.personality_table table tbody tr td { border: 1px solid #000;}
.personality_table table tbody tr td.icon { width: 5%; text-align: center;}