@charset "utf-8";
@font-face {
    font-family: 'robotobold';
    src: url('../fonts/roboto-bold-webfont.eot');
    src: url('../fonts/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-bold-webfont.woff') format('woff'),
         url('../fonts/roboto-bold-webfont.ttf') format('truetype'),
         url('../fonts/roboto-bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotolight';
    src: url('../fonts/roboto-light-webfont.eot');
    src: url('../fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-light-webfont.woff') format('woff'),
         url('../fonts/roboto-light-webfont.ttf') format('truetype'),
         url('../fonts/roboto-light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/roboto-regular-webfont.eot');
    src: url('../fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-regular-webfont.woff') format('woff'),
         url('../fonts/roboto-regular-webfont.ttf') format('truetype'),
         url('../fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotomedium';
    src: url('../fonts/roboto-medium-webfont.eot');
    src: url('../fonts/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-medium-webfont.woff2') format('woff2'),
         url('../fonts/roboto-medium-webfont.woff') format('woff'),
         url('../fonts/roboto-medium-webfont.ttf') format('truetype'),
         url('../fonts/roboto-medium-webfont.svg#robotomedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

* {
	box-sizing: border-box;
}

body {margin:0; font-family: 'robotolight', Arial; color:#0B363C; font-size:20px; line-height:27px;}
a:link {color:inherit; text-decoration:none;}
a:visited {color:inherit; text-decoration:none;}
.wrapper {width:1200px; margin:0 auto;}
h2 {font-family: 'robotolight', Arial; font-size:32px; line-height:37px; margin:0 0 20px 0; font-weight:normal;}
h3 {font-family: 'robotobold', Arial; font-weight:normal; margin:20px 0 0 0; font-size:20px;}
h4 {font-family: 'robotolight', Arial; font-weight:normal; margin:0; font-size:16px;}

h1, h2, h3, h4, h5, h6, p, li {
    color:#0B363C;
}

.divider {margin:15px 0; width:100%; height:1px; background-color:#dddcdc;}
/* .header {padding:10px 20px; border-bottom:1px solid #ccc; margin:0 0 10px 0;} */
/* .company-logo styles moved to .header section above */
.company-logo img {
    width:100%;
    max-width: 170px;
    height:auto;
}
/* .company-logo img {width:100%; height:auto;} */
.btn {padding:10px 25px; color:#58595b; text-transform:uppercase; float:right; background-color:#fff; border-radius:4px; font-size:13px; font-family: 'robotolight', Arial; letter-spacing:1px; border:1px solid #ccc; margin:10px 5px; text-align: center;}
.btn:hover {background-color:#ccc; color:#fff;}
.btn.active {padding:10px 25px; color:#fff; text-transform:uppercase; float:right; background-color:#939598; border-radius:4px; font-size:13px; font-family: 'robotolight', Arial; letter-spacing:1px; margin:10px 5px;}
.btn.active:hover {background-color:#ccc; color:#fff;}
.social {display: flex; margin: 18px 10px 10px 10px; gap:15px;justify-content: flex-end;}
.social img { width:23px; height:23px; margin: 0px 5px;}

.social-header {
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 30px;
    color: #2B2D42;
}

.social-links {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #2B2D42;
    transition: opacity 0.3s ease;
}

.social-link:hover {
    opacity: 0.8;
}

.social-link i {
    font-size: 24px;
}

.social-link img.social-icon-img {
    width: 24px;
    height: 24px;
    display: block;
}

.social-link.facebook i {
    color: #1877F2;
}

.social-link.twitter i {
    color: #000000;
}

.social-link.linkedin i {
    color: #0077B5;
}

.social-link.instagram i {
    color: #FF7A00;
}

.main-img {width:63%; height:500px; background-size:cover; float:left; background-position:center;}
.caption {background:rgba(0,0,0,0.5); color:#fff; text-transform:uppercase; }
.video .caption {padding: 15px; position: relative; text-align: left; top: 457px; font-size:30px; line-height:35px;}
.main-img .caption {padding:20px; position:relative; top:433px; font-size:43px;}
.sub-img1, .sub-img2 {float:right; height:245px; width:36%; background-position:center;}
.sub-img1 {background-size:cover; margin: 0 0 10px 0;}
.sub-img2 {background-size:cover;}

.section {padding:50px 0; margin:50px 0;}
.page .section { padding:0; margin:0; }
.grey {background-color:#f5f4f4;}

.col-3 {width:32.5%; float:left; margin:0 1.2%; height:250px; background-size:cover; background-position:center;}
.col-3.left {margin:0;}
.col-3.right {margin:0; float:right;}
.col-3 .caption {position:relative; padding:15px; top:194px; text-align:center;}


.video {height:650px; background-size:cover; margin:15px 0; background-position:center;}
.video .overlay {background: rgba(0,0,0,0.5); height: 650px;}
.video .play {background-image:url(../images/play_17.png); background-size:cover;position: relative; width: 128px; height: 128px; top: 260px; margin: 0 auto;}
.sub-video .play {background-image:url(../images/play_17.png); background-size:cover;position: relative; width: 80px; height: 80px; top: 80px; margin: 0 auto;}

.quote {padding:20px; margin:50px 0; font-size:20px; line-height:27px;  border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.quote .quote-title {margin-top:0; margin-bottom:1em;}

.ceo { display: -webkit-flex; display: -ms-flexbox; display: flex; padding:25px 0; }
.ceo .image { -webkit-flex: 1; -ms-flex: 1; flex: 1; min-width:200px; height:200px; background-size:cover;}
.ceo .text { -webkit-flex: 8; -ms-flex: 8; flex: 8;  margin:15px 0; padding-left:15px; }

.col-3.testimonial {height:auto;}
.testimonial {text-align:center;}
.testimonial .image {width:200px; margin:0 auto 20px auto; height:200px; background-size:cover; border-radius:200px;}
.testimonial .text {font-size:15px; line-height:20px; padding:0px 20px; font-style: italic; }
.testimonial .text h3 { font-style: normal; }
.section.grey.testimonail {margin:50px 0 0 0;}

.section.grey .testimonial-container {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	text-align: center;
	flex-wrap: wrap;
}

.section.grey .testimonial-container .testimonial-single {
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	padding:25px 15px;
	min-width:320px;
}



.footer {text-align:center; color:#0B363C; padding:40px 20px; font-size:16px; }
.footer img {max-width:150px; }
.footer .footer-logo { width:120px; height:26px; }

.listing {margin:0 0 80px 0;}
.listing .text {float:left; width:80%;}
.listing h2 {margin:0;}
.listing h3 {margin:5px 0 0 0; font-size:15px; text-transform:uppercase; line-height:29px; letter-spacing:1px;}
.listing .apply {float:right; padding:5px 0 5px 70px; border-left:1px solid #ccc;}
.apply .btn { padding:8px; width:133px; color:#fff; background-color:#2f414a; border:none; text-align: center; }
.apply .btn:hover {background-color:#475c67; color:#fff;}
.apply .applied { background-color:#547957; }
.apply .applied:hover { background-color:#547957; cursor: text; }


.job-details h2 {margin:0;}
/* .job-details h3 {font-family: 'Inter';font-style: normal;font-weight: 400;font-size: 14px;line-height: 21px;color: #000000;text-align: center;margin: 18px 0 30px 0;} */
/* .job-details h3 {margin:5px 0 30px 0; font-size:15px; text-transform:uppercase; line-height:29px; letter-spacing:1px;} */
.details h3 {margin:0;}
.job-details .text {font-family: 'Inter';float:left; width:100%; font-size:16px;}
.job-details .details {float:right; padding:20px; border:1px solid #ccc; border-radius:4px; font-size:14px; width:21.5%; box-sizing: border-box; }
.details .btn {padding:8px; color:#fff; background-color:#2f414a; border:none; float:none; width:72%; margin:20px auto 0 auto; text-align:center; font-weight:bold; }
.btn-alt .btn { display:inline-block; padding:8px 25px; color:#fff; background-color:#2f414a; border:none; float:left; margin:20px auto 0 auto; text-align:center; }
.btn-alt .btn:hover {background-color:#475c67; color:#fff;}
.btn-alt .alt-btn { display:inline-block; padding:7px 25px; color:#58595b; background-color:#fff; border: 1px solid #ccc; float:left; margin:20px 10px 0 10px; text-align:center; border-radius: 4px; }
.btn-alt .alt-btn:hover {background-color:#ccc; color:#fff;}
.btn-alt .applied { background-color:#547957; }
.btn-alt .applied:hover { background-color:#547957; cursor: text; }
.details .btn:hover {background-color:#475c67; color:#fff;}
.details .applied { background-color:#547957; }
.details .applied:hover { background-color:#547957; cursor: text; }

.application {text-align:center;}
.application h2 {margin:0;}
.application h3 {font-family: 'Inter';font-style: normal;font-weight: 400;font-size: 14px;line-height: 21px; text-align: center;margin: 18px 0 0 0;}
.application-wrapper {width:677px; margin:0 auto; font-size:14px; }
.application-wrapper input[type=text], .application-wrapper input[type=email], .application-wrapper input[type=tel], .application-wrapper input[type=file] {width: 100%;height:37px;padding: 15px;font-size: 14px;margin: 5px 0;background-color: #FFF;mix-blend-mode: normal;opacity: 0.5;border: 1px solid #7A8DAE;border-radius: 5px; }
.application-wrapper textarea {width:94%; padding:15px; font-size:14px; margin:5px 0; border-radius:2px; border:1px solid #ccc; font-family: 'robotoregular', Arial; height:130px;}

 .application-wrapper input[type=button], .application-wrapper input[type=submit] {    width: 400px;height: 44px;background-color: #2f414a;border: none;border-radius: 4px;cursor: pointer;justify-content: center;align-content: center;font-family: 'Inter';font-style: normal;font-weight: 700;font-size: 16px;line-height: 19px;display: flex;align-items: center;text-align: center;color: #FFFFFF;}
 .application-wrapper input[type=button]:hover, .application-wrapper input[type=submit]:hover {background-color:#475c67;}
 .application-wrapper h3 {text-transform:uppercase; font-size:14px;}

input[type=button]:hover:disabled, 
input[type=submit]:hover:disabled,
input[type=button]:disabled, 
input[type=submit]:disabled {
 	background-color:#A6BCC8;
 	cursor: not-allowed;
}

/* ALERTS */
.alert {
    padding: 15px;
    font-size: 17px;
    margin-top:15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align:center;
}
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
/* ALERTS */

.form-error { border: 1px solid red !important; background-color: rgba(255, 198, 159, 0.24) !important; }

.no-jobs-image { width:90%; height:346px; margin:0 auto; background-image: url('../images/nojobs-desktop.png'); background-repeat: no-repeat; background-size: 100%; }

.breadcrumbs { font-size: 12px; margin-bottom:20px; margin-top:10px;}
.breadcrumbs a { color:#999; position:relative; top:-6px; }
.breadcrumbs .home a {top:0;}
.breadcrumbs .page {float:left; margin-left:10px; }
.breadcrumbs .home {float:left; }
.breadcrumbs .end {margin-top:-3px;}

.socialshare {text-align:center; }
.socialshare img {margin:0 2px;}

.form-container {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

.form-column {
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	margin:9px 5px;
}

#mceu_7 {
	margin-bottom:8px;
}

.country_code_div {
	max-width:125px;
}


.compliance-header {
    text-align: center;
    margin-bottom:65px;
}

.compliance-header .fa-check-circle {
    font-size: 35px;
    color:#000;
    margin-bottom:20px;
}

.compliance-header h4 {
    font-weight: bold;
    font-family: 'robotobold'; 
}

.compliance-header h3 {
    font-size: 18px;
    margin:50px 0 0 0;
}

.compliance-header h5 {
    margin:0 0 50px 0;
    font-family: 'robotobold'; 
}

.compliance-header p {
    margin:20px 0 0 0;
    max-width:800px;
    margin:0 auto;
}

.compliance-wrapper {
    margin:0 auto;
    max-width:425px;
}
.compliance-wrapper label {
    color:#000;
}
.compliance-wrapper button {
    display: block;
    width:100%;
    margin-top:35px !important;
}

.form-container .select {
    width:100%;
    height:40px;
    border:1px solid #ccc;
    border-radius: 5px;
    padding:0 5px;
    margin-bottom:15px;
}

.form-container .btn {
    margin:0;
}

.btn-black {
    border:1px solid #000;
    color:#000;
    font-family: 'robotobold';
    width:100%;
    text-align: center;
}
.btn-black:hover {
    color:#000 !important;
}



.live-jobs-page ul {
    padding:0;
    margin:25px 0;
}

.live-jobs-page ul li ul {
    padding:0 0 0 30px;
    margin:25px 0;
}

.live-jobs-page li {
    list-style-type: none;
}

.live-jobs-page a:link,
.live-jobs-page a:visited {
    color:#022789;
}

.live-jobs-page input {
    padding:10px;
    border:1px solid #ccc;
    width:400px;
}

.live-jobs-page .blue-button {
    background-color: #0868f6;
    color:#fff;
    border:1px solid #0868f6;
    padding:10px 15px;
}

#job-list-form {
    margin-bottom:25px;
}

#jobs-div .fa-spinner-third {
    font-size: 45px;
}

 
 @media only screen and (max-width: 1300px) {
	.wrapper {width:90%;} 
	/*.ceo .text {margin:0; width:71%; }*/
	.col-3 .caption {top:167px;}
	.job-details .details {width:22%;}
	.listing .text {width:75%;}
 }
 @media only screen and (max-width: 1000px) {
	 .job-details .details {width:25%;}
	 .job-details .text {width:100%;}
	 .listing .text {width:65%;}
 }
 @media only screen and (max-width: 900px) {
	 .listing .apply {padding:5px 0 5px 20px;}
	 .job-details .details {width:29%;}
	 .job-details .text {width:100%;}
 }
 @media only screen and (max-width: 800px) {
	/*.ceo .text {margin:0; width:66%;}*/
	.listing h2 {font-size:25px; line-height:25px;}
	.listing {margin:0 0 30px 0;}
	.job-details .details {width:93%; margin:20px 0;}
	 .job-details .text {width:100%; margin:0;}
	 .application-wrapper input[type=text], .application-wrapper input[type=email], .application-wrapper input[type=tel] {width:100%;}
	 .application-wrapper input[type=button] {margin:20px 34%;}
 }
 @media only screen and (max-width: 700px) {
	 .main-img {width:100%; height:350px;margin:0 0 10px 0;}
	 .main-img .caption {top:283px;}
	 .sub-img1, .sub-img2 {height:350px; width:100%;}
	 .col-3 {width:100%; margin:10px 0;}
	 .video {height:350px;}
	 .video .overlay {height:350px;}
	 .video .play {top:100px;}
	 /*.ceo .image {float:none; margin:10px 0;}*/
	 /*.ceo .text {width:100%; margin:10px 0;}*/
	 .listing h3 {font-size:14px; line-height:24px;}
	 .video .caption {top:157px;}
 }
 @media only screen and (max-width: 600px) {
     .ceo { flex-direction: column; }

     .ceo .text { padding-left: 0; }

     .company-logo {width: auto; margin: 0 auto 10px auto; text-align:center;}
	 .header-content {width: 100%;}
	 .header-btns {flex-wrap: wrap; justify-content: center;}
	 .btn {float:left; padding:5px 25px; font-size:12px;}
	 .btn.active {float:left; padding:5px 25px; font-size:12px;}
	 .header {padding:10px 20px;}
	 body {font-size:16px; line-height:23px;}
	 .listing .text {width:100%;}
	 .listing .apply {padding:10px 0; float:left; border-left:none;}
	 .job-details .details {width:89%}
	 .application-wrapper {width:90%;}
	 .application-wrapper input[type=text], .application-wrapper input[type=email], .application-wrapper input[type=tel] {width:100%;}
	 .no-jobs-image { width:90%; height:320px; margin:0 auto; background-image: url('../images/nojobs-mobile.png'); background-repeat: no-repeat; background-size: 100%; }
     .job-details .text .text-options{flex-wrap: wrap; justify-content: flex-start;}
 }
 @media only screen and (max-width: 400px) {
	 .btn {float:left; padding:5px 15px; font-size:12px;}
	 .btn.active {float:left; padding:5px 15px; font-size:12px;}
	 .main-img .caption {font-size:30px; top:286px;}
	 .quote {font-size:20px; line-height:27px;}
	 .company-logo {width:auto; text-align:center;}
	 .header-content {width: 100%;}
	 .application h2 {font-size:30px; line-height:30px;}
	 .application h3 {font-size:14px; line-height:18px;}
	 .breadcrumbs {font-size:11px;}
	 .breadcrumbs img {height:13px; width:auto;}
	 .breadcrumbs .page {margin-left:5px;}
	 .breadcrumbs a {top:-2px; margin-right:-4px;}
	 .application-wrapper textarea {width:90%;}
 }
 @media only screen and (max-width: 360px) {
	.social {display:none;} 
	.main-img {height:250px;}
	.main-img .caption {top:186px;}
	.sub-img1, .sub-img2 {height:250px;}
	.col-3 {height:150px;}
	.col-3 .caption {top:97px;}
	.job-details .details {width:86%}
	.job-details h2 {font-size:30px; line-height:30px;}
	.job-details h3 {font-size:14px; line-height:18px;}
	.application-wrapper input[type=text], .application-wrapper input[type=email], .application-wrapper input[type=tel] {width:100%;}
	.application-wrapper input[type=button] {margin:20px 32%;}
	.section {margin:20px 0;}
	.sub-video .play {top:30px;}
 }

.job-details{
	max-width: 775px;
	width:100%;
    margin: 0 auto;
}

.job-details .job-title{
	font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 26px;
    line-height: 19px;
	text-align:center;
}

.job-details .text h3{
	font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 21px;
    text-align:left;
}

.job-details .text .job-extra-details {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    text-align: center;
    margin: 18px 0 30px 0;
}

label{
	font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
}

.apply-btn a{
	display: flex;
    justify-content: center;
}

.apply-btn a div:hover{
	background-color: #475c67;
    color: #fff;
}

.apply-btn a div{
	max-width: 400px;
    width: 100%;
    height: 44px;
    background: #0B363C;
    border-radius: 5px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    justify-content: center;
	
	padding: unset;
  
    text-transform: unset;
    float: unset;
   
   
    letter-spacing: unset;
    border: unset;
    margin: unset;
}


#resume{
	height: 105px;
    mix-blend-mode: normal;
    opacity: 0.5;
    border: 1px dashed #7A8DAE;
    border-radius: 5px;
}

.header{
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #7A8DAE50;
	padding: 10px 20px;
	margin-bottom:51px;
} 

.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.company-logo {
    float: none;
    width: auto;
    margin: 0 auto 15px auto;
    text-align: center;
}

.header-btns{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

 .header-btn{
	max-width: 100%;
    width: 160px;
    height: 44px;
    background: #FFFFFF;
    /*opacity: 0.5;*/
    mix-blend-mode: normal;
    border: 1px solid #7A8DAE;
    border-radius: 5px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #7A8DAE;
    justify-content: center;
	margin:5px;
}

.header-btn.btn-white{
    border: 1px solid #0B363C;
    color: #0B363C;
    font-weight: 700;
    border-radius: 5px;
    transition: transform 0.3s ease-in-out;
    text-decoration: none;
    cursor: pointer;
}

.header-btn.btn-blue{
    background-color: #0B363C;
    color: #fff;
    border-radius: 5px;
    transition: transform 0.3s ease-in-out;
    border: 0;
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
}

.header-btn.btn-white:hover{
    box-shadow: 10px 10px 5px -5px rgba(0,0,0,.25)!important;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    text-decoration: none
}

.header-btn.btn-blue:hover{
    background-color: #184866;
    box-shadow: 10px 10px 5px -5px rgba(0,0,0,.25)!important;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    color: #fff;
    text-decoration: none
}

.header-btns .header-btn.active{
	background: #184866;
	color: #FFFFFF;
}

.header-btns .header-btn.active:hover{
	background: #FFFFFF;
	color: #7A8DAE;
}

.job-details .text .text-options{
	padding-inline-start: 0;display: flex;list-style-type: none;justify-content: center;font-family: 'Inter';font-style: normal;font-weight: 400;font-size: 16px;line-height: 21px;color: #7A8DAE;margin-bottom:43px;
}

.job-details .text .text-options li{
	margin: 0 14px;
}
.text-options li.active {
    border-bottom: 2px solid #0B363C;
}

.align-items-center{
	align-items: center;
}

.hidden{
	display:none;
}

.apply-btn a{
	margin-bottom:15px;
}

.resume-box, .coverLetter-box{
	display: flex;
    align-items: center;
    justify-content: center;
    mix-blend-mode: normal;
    opacity: 0.5;
    border: 1px dashed #7A8DAE;
    border-radius: 5px;
    height: 106px;
	cursor:pointer
}


.resume-box strong, .coverLetter-box strong{
	font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    color: #2B2D42;
}

.resume-box span, .coverLetter-box span{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    color: #7A8DAE;
}

/* Jobs Module - Card Grid View Styles */
.jobs-section {
    padding: 40px 0;
}

.section-title {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 30px;
    color: #2B2D42;
}

.jobs-section .section-title {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 30px;
    color: #2B2D42;
}

/* Job Filters */
.job-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
    align-items: center;
}

.job-filter {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    min-width: 150px;
}

.job-filter-remote {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

.job-filter-remote input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* Card Grid View */
.jobs-card-view .jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.job-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.job-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.job-card-header {
    margin-bottom: 15px;
}

.job-card-header h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.job-card-header a {
    color: #2B2D42;
    text-decoration: none;
}

.job-card-header a:hover {
    color: #0868F6;
    text-decoration: underline;
}

.job-card-body {
    flex: 1;
    margin-bottom: 15px;
}

.job-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: #666;
}

.job-meta span {
    display: block;
    line-height: 1.5;
}

.job-location,
.job-remote,
.job-type,
.job-level,
.job-salary {
    color: #666;
}

.job-card-footer {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
}

.job-card-footer .btn {
    width: 100%;
    text-align: center;
    padding: 10px;
    margin: 0;
}

/* List View (existing styles enhanced) */
.jobs-list-view .jobs-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.jobs-list-view .job-listing {
    border-bottom: 1px solid #e0e0e0;
    padding: 20px 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.jobs-list-view .job-listing:last-child {
    border-bottom: none;
}

.jobs-list-view .job-listing-content {
    flex: 1;
    padding-right: 20px;
}

.jobs-list-view .job-listing-content h3 {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 600;
}

.jobs-list-view .job-listing-content a {
    color: #2B2D42;
    text-decoration: none;
}

.jobs-list-view .job-listing-content a:hover {
    color: #0868F6;
    text-decoration: underline;
}

.jobs-list-view .job-details {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    max-width: none;
    margin: 0;
}

.jobs-list-view .job-listing-action {
    flex-shrink: 0;
}

/* Pagination */
.jobs-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.pagination-link,
.pagination-current {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    color: #2B2D42;
    font-size: 14px;
    min-width: 40px;
    text-align: center;
    display: inline-block;
}

.pagination-link:hover {
    background-color: #f5f5f5;
    border-color: #0868F6;
    color: #0868F6;
}

.pagination-current {
    background-color: #0868F6;
    color: #fff;
    border-color: #0868F6;
    font-weight: 600;
}

/* No Jobs Message */
.no-jobs-message {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-size: 16px;
}

/* Responsive Styles for Card View */
@media only screen and (max-width: 768px) {
    .jobs-card-view .jobs-grid {
        grid-template-columns: 1fr;
    }
    
    .job-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .job-filter {
        width: 100%;
    }
    
    .jobs-list-view .job-listing {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .jobs-list-view .job-listing-content {
        padding-right: 0;
        margin-bottom: 15px;
        margin-left: 0;
        padding-left: 0;
        width: 100%;
    }
    
    .jobs-list-view .job-listing-action {
        width: auto;
        align-self: flex-start;
    }
    
    .jobs-list-view .job-listing-action .btn {
        width: auto;
        min-width: 100px;
        padding: 10px 20px;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .jobs-card-view .jobs-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* Gallery Module Styles */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 4 / 3;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.gallery-item .gallery-image {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* Responsive Gallery */
@media only screen and (max-width: 768px) {
    .gallery-container {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .gallery-container {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 18px;
    }
}

@media only screen and (min-width: 1025px) {
    .jobs-card-view .jobs-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    
    .gallery-container {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}