:root{
--navy:#12265D;
--bg:#F8FAFC;
--white:#FFFFFF;
--text:#475569;
--label:#314158;
--line:#E2E8F0;
--blue:#0093FB;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:var(--bg);
color:var(--text);
}

/* ===========================
NAVBAR
=========================== */
.makeba-navbar{
background:var(--navy);
padding:18px 0;
}

.makeba-logo{
height:32px;
width:auto;
}

.makeba-navbar .nav-link{
color:#fff !important;
font-size:16px;
font-weight:500;
margin:0 18px;
}

.btn-lang{
color:#fff;
background:none;
border:none;
font-size:15px;
display:flex;
align-items:center;
gap:8px;
}

/* ===========================
COMMON WRAPPER
=========================== */
.page-wrap{
margin:auto;
}

/* ===========================
HERO
=========================== */
.career-hero{
background:var(--bg);
padding:40px 76px;
}

.career-hero-container{
max-width:1128px;
margin:auto;
display:flex;
flex-direction:column;
align-items:center;
gap:40px;
text-align:center;
}

.career-hero-logo img{
width:50px;
height:50px;
object-fit:contain;
display:block;
}

.career-hero-title{
font-size:30px;
line-height:36px;
font-weight:500;
color:var(--text);
margin:0;
}

/* ===========================
ABOUT
=========================== */
.about-section{
background:#fff;
padding:30px 76px;
}

.about-container{
max-width:1128px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:56px;
}

.about-box{
display:flex;
flex-direction:column;
gap:32px;
}

.about-title{
font-size:20px;
line-height:28px;
font-weight:500;
color:var(--text);
}

.about-text{
font-size:16px;
line-height:24px;
font-weight:400;
color:var(--text);
}

/* ===========================
JOBS
=========================== */
.jobs-section{
background:#fff;
padding:25px 76px;
}

.jobs-container{
max-width:1128px;
margin:auto;
display:flex;
flex-direction:column;
gap:32px;
}

.search-row{
width:100%;
}

.search-box{
width:230px;
height:56px;
border:2px solid var(--line);
border-radius:12px;
padding:8px 16px;
display:flex;
align-items:center;
gap:16px;
background:#fff;
}

.search-box .material-icons{
font-size:22px;
color:#94A3B8;
}

.search-box input{
border:none;
outline:none;
width:100%;
font-size:16px;
color:var(--text);
}

.job-item{
padding:16px 0;
border-bottom:1px solid var(--line);
}

.job-inner{
display:flex;
justify-content:space-between;
gap:16px;
align-items:center;
}

.job-left{
flex:1;
display:flex;
flex-direction:column;
gap:8px;
}

.job-line{
display:grid;
grid-template-columns:200px 1fr;
gap:32px;
padding:0 8px;
min-height:24px;
align-items:center;
}

.job-label{
font-size:16px;
line-height:24px;
color:var(--label);
}

.job-value{
font-size:16px;
line-height:24px;
color:var(--text);
}

.job-right{
width:118px;
display:flex;
align-items:center;
gap:8px;
justify-content:flex-end;
}

.view-icon{
width:40px;
height:40px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
color:var(--blue);
}

.view-icon .material-icons{
font-size:24px;
}

.view-job{
font-size:18px;
line-height:28px;
color:var(--blue);
text-decoration:none;
}

/* ===========================
BANNER
=========================== */
.website-banner-img{
width:100%;
display:block;
}

/* ===========================
FOOTER
=========================== */
.makeba-footer{
background:#000;
padding:64px 76px;
color:#fff;
}

.footer-container{
max-width:1128px;
margin:auto;
}

.footer-top{
gap:20px;
margin-bottom:56px;
}

.footer-top-logo{
height:34px;
width:auto;
}

.footer-top-text{
font-size:18px;
line-height:28px;
}

.footer-middle{
margin-bottom:56px;
gap:40px;
}

.footer-nav-title{
font-size:20px;
margin-bottom:20px;
font-weight:500;
}

.footer-nav-link{
font-size:18px;
color:#fff;
text-decoration:none;
margin-bottom:12px;
}

.footer-social-icons{
gap:16px;
margin-top:8px;
}

.footer-social-image img{
width:24px;
height:24px;
object-fit:contain;
}

.footer-copy{
font-size:16px;
line-height:24px;
margin-bottom:32px;
color:#E2E8F0;
}

.footer-legal-text{
font-size:14px;
line-height:24px;
color:#94A3B8;
}

/* ===========================
RESPONSIVE
=========================== */
@media(max-width:992px){

.career-hero,
.about-section,
.jobs-section,
.makeba-footer{
padding-left:24px;
padding-right:24px;
}

.about-container{
grid-template-columns:1fr;
gap:40px;
}

.job-line{
grid-template-columns:160px 1fr;
gap:16px;
}

.footer-middle{
flex-direction:column !important;
}

}

@media(max-width:768px){

.makeba-navbar .nav-link{
margin:8px 0;
}

.career-hero{
padding-top:100px;
padding-bottom:100px;
}

.career-hero-title{
font-size:24px;
line-height:32px;
}

.search-box{
width:100%;
}

.job-inner{
flex-direction:column;
align-items:flex-start;
}

.job-right{
width:auto;
justify-content:flex-start;
margin-top:12px;
}

.job-line{
grid-template-columns:1fr;
gap:4px;
padding:0;
}

.footer-top{
flex-direction:column;
align-items:flex-start !important;
}

.footer-top-text{
font-size:16px;
}

}

.material-icons {
  font-family: 'Material Icons' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  direction: ltr;
}