/* home */
#applicationMessage {
    white-space: pre-line;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 6px;
}

#applicationMessage.success-message {
    background: #d1fae5;
    color: #065f46;
}

#applicationMessage.error-message {
    background: #fee2e2;
    color: #991b1b;
}

.modal-submit-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}



:root{--bg:#0c141c;--panel:#17232e;--panel2:#111d27;--white:#f4f7fb;--muted:#a8b7c5;--cyan:#10b8c7;--teal:#14b8a6;--blue:#159bd0;--line:#263746}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;background:var(--bg);color:var(--white);font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5}

a{color:inherit;text-decoration:none}

.top-strip{height:19px;background:#07111a;border-bottom:1px solid #1e3547;font-size:9px;color:#d1dbe5;display:flex;align-items:center;justify-content:space-between;padding:0 4.5%}

header{height:58px;background:#101d29;display:flex;align-items:center;justify-content:space-between;padding:0 4.5%;border-bottom:1px solid #243847;gap:20px}

.brand{display:flex;align-items:center;gap:9px;min-width:180px}

.brand-mark{width:22px;height:22px;display:grid;grid-template-columns:1fr 1fr;gap:2px;transform:rotate(45deg)}

.brand-mark i{display:block;background:#11b9c9;border-radius:2px}

.brand-mark i:nth-child(2),.brand-mark i:nth-child(3){background:#3a9dd3}

.brand-name{font-size:16px;letter-spacing:1.1px;font-weight:800;line-height:1.1}

.brand-name small{display:block;font-size:7px;letter-spacing:1.6px;font-weight:500;color:#b7c7d4;margin-top:4px}

nav{display:flex;align-items:center;gap:20px;font-size:11px;color:#d0dce6}

nav a{white-space:nowrap}nav a.active{color:#11c4d0;background:#0c2d3a;padding:7px 10px;border-radius:5px}

nav .login{background:#0eb5c8;color:white;padding:7px 12px;border-radius:5px;font-weight:700}

.hero{position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(7,33,64,.95),rgba(8,58,93,.78)),url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1800&q=85') center/cover;min-height:390px;display:flex;align-items:center}

.hero:after{content:"";position:absolute;width:260px;height:260px;right:-110px;top:65px;background:rgba(0,187,207,.18);transform:rotate(45deg);border-radius:25px}

.hero-inner{width:min(900px,88%);margin:auto;position:relative;z-index:1;padding:40px 0}

.hero-copy{max-width:550px}

h1{font-size:clamp(32px,4vw,48px);line-height:1.06;margin:0 0 16px;font-weight:800;letter-spacing:-.8px}

.hero p{color:#d4e0ea;max-width:430px;margin:0 0 20px;font-size:13px}

.searchbar{display:flex;gap:7px;max-width:520px;padding:7px;background:#08131c;border:1px solid #273b4c;border-radius:10px;box-shadow:0 10px 24px #00101c55}

.searchbar select{min-width:0;flex:1;background:#0d1821;color:#eaf0f5;border:1px solid #344654;border-radius:5px;padding:11px 10px;font-size:11px}

.searchbar button,.btn{border:0;border-radius:5px;background:var(--cyan);color:#fff;font-weight:700;padding:0 17px;cursor:pointer}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:620px;margin-top:25px}

.stat{border-left:3px solid var(--cyan);padding-left:11px}

.stat strong{display:block;font-size:23px;line-height:1.15}

.stat span{display:block;color:#c4d2df;font-size:10px;margin-top:4px}

main{width:min(900px,88%);margin:auto}

section.content-section{padding:32px 0 0}

.section-heading{margin-bottom:17px}

h2{font-size:23px;line-height:1.2;margin:0 0 7px;font-weight:800}

.section-heading p{margin:0;color:var(--muted);font-size:12px;max-width:540px}

.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

.photo-card{position:relative;overflow:hidden;border-radius:10px;background:var(--panel);min-height:135px;border:1px solid #263542}

.photo-card img{display:block;width:100%;height:100%;min-height:135px;object-fit:cover;transition:transform .25s}

.photo-card:hover img{transform:scale(1.04)}

.photo-card:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.82))}

.photo-card span{position:absolute;z-index:1;bottom:10px;left:12px;right:10px;font-size:12px;font-weight:700;text-shadow:0 1px 4px #000}

.industry-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}

.industry-card{overflow:hidden;background:var(--panel);border:1px solid #263542;border-radius:10px}

.industry-card img{display:block;width:100%;height:104px;object-fit:cover}

.industry-card .card-body{padding:10px}

.industry-card h3{font-size:12px;margin:0 0 5px}

.industry-card p{font-size:10px;line-height:1.45;color:var(--muted);margin:0}

.process-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}

.process-card{background:var(--panel);border:1px solid #263542;border-radius:8px;padding:12px 10px;min-height:92px}

.process-card b{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#153c65;color:#a9e7ff;font-size:10px;margin-bottom:9px}

.process-card span{font-size:10px;line-height:1.35;font-weight:700;display:block}

.jobs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:700px}

.job-card{background:var(--panel);border:1px solid #263542;border-radius:10px;overflow:hidden}

.job-card img{width:100%;height:120px;object-fit:cover;display:block}

.job-body{padding:12px}

.tag{display:inline-block;color:#16d0bd;background:#0b393c;padding:3px 7px;border-radius:10px;font-size:9px;margin-bottom:6px}

.job-body h3{font-size:13px;margin:0 0 4px}

.job-body p{font-size:10px;color:var(--muted);margin:0 0 10px}

.job-body .btn{font-size:10px;padding:7px 10px;display:inline-block}

.client-strip{margin-top:34px;display:flex;align-items:center;gap:12px;padding:12px 4%;overflow:hidden}

.client-logo{flex:0 0 105px;height:42px;border-radius:5px;background:#fff;color:#253b4b;border:1px solid #d5dce2;display:flex;align-items:center;justify-content:center;text-align:center;padding:5px;font-size:10px;font-weight:800}

.client-logo:first-child{flex-basis:220px}

.countries{background:linear-gradient(90deg,rgba(13,47,76,.88),rgba(20,94,132,.72)),url('https://images.unsplash.com/photo-1494783367193-149034c05e8f?auto=format&fit=crop&w=1800&q=80') center/cover;text-align:center;padding:38px 20px 42px}

.countries h2{font-size:24px}

.countries p{font-size:12px;color:#e2edf6;max-width:560px;margin:0 auto 16px}

.pills{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-bottom:17px}

.pills span{border:1px solid #d2e5f1aa;border-radius:20px;padding:5px 12px;font-size:10px;background:#ffffff17}

.countries .btn{padding:10px 18px;font-size:11px}

.cta-wrap{padding:35px 6%;display:flex;justify-content:center}

.cta{width:min(900px,100%);text-align:center;border-radius:12px;padding:35px 20px;background:linear-gradient(110deg,#17b7a9,#1299d0)}

.cta h2{font-size:25px;margin-bottom:8px}

.cta p{font-size:12px;margin:0 0 18px;color:#e9ffff}

.cta .btn{background:white;color:#16455d;padding:10px 17px;margin:0 4px;font-size:11px}

footer{background:#060d14;text-align:center;padding:22px 15px 20px;color:#d0dae3;font-size:10px}

footer p{margin:4px 0}

@media(max-width:760px){

 .top-strip{font-size:8px;padding:0 12px}.top-strip span:last-child{display:none}

 header{height:auto;min-height:62px;padding:12px 16px;flex-wrap:wrap;gap:12px}

 .brand{min-width:0}.brand-name{font-size:14px}

 nav{width:100%;gap:12px;overflow-x:auto;padding-bottom:2px;font-size:10px}

 nav a{flex:0 0 auto}

 .hero{min-height:0}.hero-inner{width:90%;padding:42px 0 34px}

 h1{font-size:34px;max-width:440px}

 .hero p{font-size:12px}

 .searchbar{flex-wrap:wrap}.searchbar select{flex:1 1 42%;}.searchbar button{height:38px;flex:1 1 100%}

 .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:23px}

 .stat strong{font-size:20px}

 main{width:90%}section.content-section{padding-top:28px}

 h2{font-size:21px}

 .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

 .photo-card,.photo-card img{min-height:115px}

 .photo-card span{font-size:11px;left:9px;bottom:8px}

 .industry-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}

 .industry-card img{height:115px}.industry-card .card-body{padding:9px}

 .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

 .process-card{min-height:80px}

 .jobs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

 .job-card img{height:110px}

 .client-strip{margin-top:28px}

 .countries{padding:32px 15px}

 .cta-wrap{padding:28px 5%}.cta{padding:28px 15px}

 .cta h2{font-size:21px}

}

@media(max-width:420px){

 .service-grid{grid-template-columns:1fr 1fr}

 .photo-card,.photo-card img{min-height:100px}

 .industry-card img{height:95px}

 .industry-card h3{font-size:11px}

 .industry-card p{font-size:9px}

 .jobs-grid{grid-template-columns:1fr}

 .job-card{display:grid;grid-template-columns:38% 1fr}

 .job-card img{height:100%;min-height:140px}

 .job-body{padding:10px}

 .client-logo{flex-basis:95px}

 .client-logo:first-child{flex-basis:180px}

}



/* Larger, more readable desktop scale */

body{font-size:16px}

.top-strip{height:26px;font-size:11px}

header{height:76px;padding-left:5%;padding-right:5%;gap:28px}

.brand{gap:12px;min-width:220px}

.brand-mark{width:28px;height:28px}

.brand-name{font-size:20px}

.brand-name small{font-size:9px}

nav{gap:23px;font-size:15px}

nav a.active{padding:9px 12px}

nav .login{padding:9px 14px}

.hero{min-height:490px}

.hero-inner{width:min(1120px,88%);padding:85px 0}

.hero-copy{max-width:650px}

h1{font-size:clamp(40px,4.3vw,58px);margin-bottom:20px}

.hero p{font-size:16px;max-width:520px;margin-bottom:25px}

.searchbar{max-width:650px;padding:9px;gap:9px}

.searchbar select{padding:14px 12px;font-size:13px}

.searchbar button{font-size:13px;padding:0 22px}

.stats{max-width:760px;gap:24px;margin-top:32px}

.stat{padding-left:14px}

.stat strong{font-size:29px}

.stat span{font-size:12px}

main{width:min(1120px,88%)}

section.content-section{padding-top:42px}

.section-heading{margin-bottom:22px}

h2{font-size:29px;margin-bottom:9px}

.section-heading p{font-size:14px;max-width:650px}

.service-grid{gap:14px}

.photo-card,.photo-card img{min-height:170px}

.photo-card span{font-size:14px;bottom:13px;left:15px}

.industry-grid{gap:14px}

.industry-card img{height:135px}

.industry-card .card-body{padding:13px}

.industry-card h3{font-size:15px;margin-bottom:7px}

.industry-card p{font-size:12px;line-height:1.5}

.process-grid{gap:11px}

.process-card{padding:15px 13px;min-height:112px}

.process-card b{width:27px;height:27px;font-size:12px;margin-bottom:12px}

.process-card span{font-size:12px}

.jobs-grid{gap:16px;max-width:100%}

.job-card img{height:155px}

.job-body{padding:15px}

.tag{font-size:11px;padding:4px 9px}

.job-body h3{font-size:16px}

.job-body p{font-size:12px;margin-bottom:13px}

.job-body .btn{font-size:12px;padding:9px 13px}

.client-strip{margin-top:42px;gap:16px;padding:15px 4%}

.client-logo{flex-basis:130px;height:54px;font-size:12px}

.client-logo:first-child{flex-basis:260px}

.countries{padding:48px 20px 52px}

.countries h2{font-size:30px}

.countries p{font-size:14px;max-width:680px;margin-bottom:20px}

.pills{gap:9px;margin-bottom:22px}

.pills span{padding:7px 15px;font-size:12px}

.countries .btn{padding:12px 22px;font-size:13px}

.cta-wrap{padding:45px 6%}

.cta{padding:44px 24px}

.cta h2{font-size:31px;margin-bottom:10px}

.cta p{font-size:14px;margin-bottom:22px}

.cta .btn{padding:12px 20px;margin:0 5px;font-size:13px}

footer{padding:28px 15px 25px;font-size:12px}

footer p{margin:6px 0}



/* Functional image carousel for the welcome/service cards */

.service-carousel{position:relative}

.service-carousel .service-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:2px 1px 8px}

.service-carousel .service-grid::-webkit-scrollbar{display:none}

.service-carousel .photo-card{flex:0 0 calc((100% - 28px)/3);scroll-snap-align:start;min-width:0}

.carousel-controls{display:flex;justify-content:flex-end;gap:9px;margin-top:9px}

.carousel-control{width:38px;height:38px;border:1px solid #33495a;border-radius:50%;background:#17232e;color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}

.carousel-control:hover{background:#10b8c7;border-color:#10b8c7}

.carousel-dots{display:flex;justify-content:center;gap:7px;margin-top:8px}

.carousel-dot{width:7px;height:7px;border:0;border-radius:50%;padding:0;background:#526574;cursor:pointer}

.carousel-dot.active{background:#10b8c7;width:20px;border-radius:6px}



@media(max-width:760px){

 .top-strip{height:22px;font-size:9px}

 header{min-height:72px;padding:13px 16px;gap:13px}

 .brand{min-width:0;gap:9px}

 .brand-mark{width:24px;height:24px}

 .brand-name{font-size:16px}

 .brand-name small{font-size:8px}

 nav{gap:13px;font-size:11px}

 .hero-inner{width:90%;padding:40px 0 34px}

 h1{font-size:clamp(34px,8vw,44px)}

 .hero p{font-size:14px}

 .searchbar select{padding:12px 10px;font-size:12px}

 .stats{gap:17px}

 .stat strong{font-size:23px}

 .stat span{font-size:11px}

 main{width:90%}

 section.content-section{padding-top:32px}

 h2{font-size:24px}

 .section-heading p{font-size:13px}

 .service-carousel .service-grid{gap:10px}

 .service-carousel .photo-card{flex:0 0 calc((100% - 10px)/2)}

 .photo-card,.photo-card img{min-height:145px}

 .photo-card span{font-size:12px}

 .industry-grid{gap:10px}

 .industry-card img{height:125px}

 .industry-card h3{font-size:13px}

 .industry-card p{font-size:11px}

 .process-grid{gap:9px}

 .process-card{padding:12px;min-height:92px}

 .process-card span{font-size:11px}

 .jobs-grid{gap:12px}

 .job-card img{height:130px}

 .job-body h3{font-size:14px}

 .client-logo{flex-basis:115px;height:48px;font-size:11px}

 .client-logo:first-child{flex-basis:220px}

 .countries{padding:35px 15px}

 .countries h2{font-size:25px}

 .countries p{font-size:13px}

 .cta-wrap{padding:30px 5%}

 .cta{padding:30px 15px}

 .cta h2{font-size:24px}

 .cta p{font-size:13px}

 footer{font-size:11px}

}

@media(max-width:420px){

 .service-carousel .photo-card{flex-basis:85%}

 .photo-card,.photo-card img{min-height:165px}

 .industry-card img{height:105px}

 .industry-card h3{font-size:12px}

 .industry-card p{font-size:10px}

 .jobs-grid{grid-template-columns:1fr}

 .job-card img{height:100%;min-height:150px}

 .client-logo{flex-basis:105px}

 .client-logo:first-child{flex-basis:190px}

 .cta .btn{display:inline-block;margin:4px}

}





/* Sticky navigation and reliable mobile menu */

header{position:sticky;top:0;z-index:1000;box-shadow:0 4px 16px rgba(0,0,0,.18)}

.menu-toggle{display:none;border:1px solid #355064;background:#172b3a;color:#fff;border-radius:7px;width:44px;height:40px;padding:9px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}

.menu-toggle span{display:block;width:22px;height:2px;background:#f4f7fb;border-radius:2px;transition:transform .2s,opacity .2s}

.carousel-controls{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}

.carousel-control{width:42px;height:42px;flex:0 0 42px;border:1px solid #33495a;border-radius:50%;background:#17232e;color:#fff;font-size:27px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}

.carousel-control:hover,.carousel-control:focus-visible{background:#10b8c7;border-color:#10b8c7}

.carousel-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:10px}

.carousel-dot{width:9px;height:9px;border:0;border-radius:50%;padding:0;background:#526574;cursor:pointer}

.carousel-dot.active{background:#10b8c7;width:23px;border-radius:6px}

.service-carousel .service-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:2px 1px 8px}

.service-carousel .service-grid::-webkit-scrollbar{display:none}

.service-carousel .photo-card{display:block;flex:0 0 calc((100% - 28px)/3);scroll-snap-align:start;min-width:0}

.service-carousel .photo-card img{width:100%;height:100%;object-fit:cover}

@media(max-width:760px){

 header{position:sticky;top:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:12px 16px;gap:10px}

 .menu-toggle{display:flex;margin-left:auto}

 header nav{display:none;width:100%;order:3;flex-direction:column;align-items:stretch;gap:4px;overflow:visible;padding:10px 0 2px;border-top:1px solid #2a4051;background-color: black;}

 header nav.is-open{display:flex}

 header nav a{display:block;padding:10px 12px;border-radius:5px}

 header nav a.active{padding:10px 12px}

 header nav .login{text-align:center;margin-top:4px}

 .service-carousel .service-grid{gap:10px}

 .service-carousel .photo-card{flex:0 0 calc((100% - 10px)/2)}

}

@media(max-width:420px){

 .service-carousel .photo-card{flex-basis:85%}

 .carousel-control{width:38px;height:38px;flex-basis:38px}

}





.client-strip {

    display: flex;

    align-items: center;

    gap: 20px;

    width: 100%;

    overflow: hidden;

    padding: 15px 0;

    

}



.client-strip .client-track {

    display: flex;

    align-items: center;

    gap: 20px;

    width: max-content;

    flex-shrink: 0;

    animation: client-marquee 20s linear infinite;

}



.client-strip .client-logo {

    flex: 0 0 180px;

    width: 180px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px;

    background: #fff;

    border: 1px solid #d5dce2;

    border-radius: 6px;

}



.client-strip .client-logo img {

    max-width: 100%;

    max-height: 60px;

    width: auto;

    height: auto;

    object-fit: contain;

}



.client-strip:hover .client-track {

    animation-play-state: paused;

}



@keyframes client-marquee {

    from {

        transform: translateX(0);

    }

    to {

        transform: translateX(calc(-50% - 10px));

    }

}



@media (max-width: 760px) {

    .client-strip .client-track {

        gap: 12px;

        animation-duration: 22s;

    }



    .client-strip .client-logo {

        flex-basis: 140px;

        width: 140px;

        height: 65px;

    }

}



@media (prefers-reduced-motion: reduce) {

    .client-strip .client-track {

        animation: none;

    }

}



/* =====================================

   REGISTRATION PAGE

===================================== */



.register-page,

.register-page * {

    box-sizing: border-box;

}



.register-page {

    margin: 0;

    padding: 25px 15px;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f1f5f9;

    color: #334155;

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.5;

}



.register-page .register-card {

    width: 100%;

    max-width: 440px;

    padding: 35px;

    background: #fff;

    border-radius: 12px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

}



.register-page .logo {

    margin-bottom: 8px;

    color: #12304a;

    text-align: center;

    font-size: 28px;

    font-weight: bold;

}



.register-page .subtitle {

    margin-bottom: 28px;

    color: #64748b;

    text-align: center;

    font-size: 14px;

}



.register-page .form-group {

    margin-bottom: 17px;

}



.register-page .form-group label {

    display: block;

    margin-bottom: 7px;

    color: #334155;

    font-size: 14px;

    font-weight: 600;

}



.register-page .form-group input,

.register-page .form-group select {

    display: block;

    width: 100%;

    max-width: 100%;

    padding: 12px;

    border: 1px solid #cbd5e1;

    border-radius: 7px;

    background: #fff;

    color: #334155;

    font-family: Arial, sans-serif;

    font-size: 14px;

    outline: none;

}



.register-page .form-group input:focus,

.register-page .form-group select:focus {

    border-color: #14b8a6;

    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);

}



.register-page .register-btn {

    display: block;

    width: 100%;

    padding: 13px;

    margin-top: 5px;

    border: none;

    border-radius: 7px;

    background: #14b8a6;

    color: #fff;

    font-family: Arial, sans-serif;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

}



.register-page .register-btn:hover {

    background: #0f9488;

}



.register-page .login-link {

    margin-top: 22px;

    color: #64748b;

    text-align: center;

    font-size: 14px;

}



.register-page .login-link a {

    color: #0f9488;

    font-weight: bold;

    text-decoration: none;

}



.register-page .error {

    margin-top: 5px;

    color: #dc2626;

    font-size: 13px;

}



@media (max-width: 480px) {

    .register-page .register-card {

        padding: 25px 20px;

    }

}





/* =====================================

   LOGIN PAGE

===================================== */



.login-page,

.login-page * {

    box-sizing: border-box;

}



.login-page {

    margin: 0;

    padding: 25px 15px;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #000000;

    color: #334155;

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.5;

}



.login-page .login-card {

    width: 100%;

    max-width: 440px;

    padding: 35px;

    background: #fff;

    border-radius: 12px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

}



.login-page .logo {

    margin-bottom: 8px;

    color: #12304a;

    text-align: center;

    font-size: 28px;

    font-weight: bold;

}



.login-page .subtitle {

    margin-bottom: 28px;

    color: #64748b;

    text-align: center;

    font-size: 14px;

}



.login-page .form-group {

    margin-bottom: 20px;

}



.login-page .form-group label {

    display: block;

    margin-bottom: 7px;

    color: #334155;

    font-size: 14px;

    font-weight: 600;

}



.login-page .form-group input {

    display: block;

    width: 100%;

    max-width: 100%;

    padding: 12px;

    border: 1px solid #cbd5e1;

    border-radius: 7px;

    background: #fff;

    color: #334155;

    font-family: Arial, sans-serif;

    font-size: 14px;

    outline: none;

}



.login-page .form-group input:focus {

    border-color: #14b8a6;

    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);

}



.login-page .login-btn {

    display: block;

    width: 100%;

    padding: 13px;

    border: none;

    border-radius: 7px;

    background: #14b8a6;

    color: #fff;

    font-family: Arial, sans-serif;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

}



.login-page .login-btn:hover {

    background: #0f9488;

}



.login-page .register-link {

    margin-top: 22px;

    color: #64748b;

    text-align: center;

    font-size: 14px;

}



.login-page .register-link a {

    color: #0f9488;

    font-weight: bold;

    text-decoration: none;

}



.login-page .error {

    margin-top: 5px;

    color: #dc2626;

    font-size: 13px;

}



@media (max-width: 480px) {

    .login-page .login-card {

        padding: 25px 20px;

    }

}





/* end */



/* login */



      .login-card {

            width: 100%;

            max-width: 440px;

            background: #fff;

            padding: 35px;

            border-radius: 12px;

            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

        }



        .logo {

            text-align: center;

            color: #12304a;

            font-size: 28px;

            font-weight: bold;

            margin-bottom: 8px;

        }



        .subtitle {

            text-align: center;

            color: #64748b;

            font-size: 14px;

            margin-bottom: 28px;

        }



        .form-group {

            margin-bottom: 20px;

        }



        .form-group label {

            display: block;

            margin-bottom: 7px;

            color: #334155;

            font-size: 14px;

            font-weight: 600;

        }



        .form-group input {

            width: 100%;

            padding: 12px;

            border: 1px solid #cbd5e1;

            border-radius: 7px;

            font-size: 14px;

            outline: none;

        }



        .form-group input:focus {

            border-color: #14b8a6;

            box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);

        }



        .login-btn {

            width: 100%;

            padding: 13px;

            border: none;

            border-radius: 7px;

            background: #14b8a6;

            color: #fff;

            font-size: 16px;

            font-weight: bold;

            cursor: pointer;

        }



        .login-btn:hover {

            background: #0f9488;

        }



        .register-link {

            margin-top: 22px;

            text-align: center;

            color: #64748b;

            font-size: 14px;

        }



        .register-link a {

            color: #0f9488;

            font-weight: bold;

            text-decoration: none;

        }



        .error {

            color: #dc2626;

            font-size: 13px;

            margin-top: 5px;

        }



        @media (max-width: 480px) {

            .login-card {

                padding: 25px 20px;

            }

        }

        /* end */



        /* about */

        

/* =========================================

   GULF LINK OVERSEAS - ABOUT PAGE

========================================= */



.about-page {

    --bg: #0d141a;

    --card: #16212b;

    --border: #25323e;

    --text: #e5ebf1;

    --muted: #9baab8;

    --accent: #13c4ba;



    background: var(--bg);

    color: var(--text);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    line-height: 1.6;

    min-height: 100vh;

}



.about-page *,

.about-page *::before,

.about-page *::after {

    box-sizing: border-box;

}



.about-page h1,

.about-page h2,

.about-page h3,

.about-page p {

    margin-top: 0;

}



.about-page h2 {

    color: var(--text);

    font-size: 30px;

    font-weight: 750;

    line-height: 1.3;

    margin-bottom: 10px;

}



.about-page h3 {

    color: var(--text);

    font-size: 17px;

    font-weight: 700;

    margin-bottom: 8px;

}



.about-page p {

    color: var(--muted);

}



/* =========================================

   HERO BANNER

========================================= */



.about-page .about-hero {

    width: 100%;

    min-height: 253px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 40px 24px;



    background:

        linear-gradient(

            rgba(12, 48, 81, 0.78),

            rgba(12, 48, 81, 0.82)

        ),

        url("../images/about-banner.jpg") center center / cover no-repeat;



    border-bottom: 2px solid #173c52;

}



.about-page .about-hero-content {

    max-width: 900px;

}



.about-page .about-hero-content h1 {

    color: #fff;

    font-size: 42px;

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 12px;

}



.about-page .about-hero-content p {

    color: #e1eaf2;

    font-size: 15px;

    margin-bottom: 0;

}



/* =========================================

   MAIN CONTAINER

========================================= */



.about-page .about-container {

    max-width: 1140px;

    width: calc(100% - 60px);

    margin: 0 auto;

    padding: 54px 0 42px;

}



/* =========================================

   WELCOME SECTION

========================================= */



.about-page .about-welcome {

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    align-items: center;

    gap: 24px;

    margin-bottom: 38px;

}



.about-page .welcome-image {

    position: relative;

    min-width: 0;

    z-index: 1;

}



.about-page .welcome-image::after {

    content: "";

    position: absolute;

    z-index: -1;

    top: 12px;

    right: -17px;

    bottom: -17px;

    left: 17px;

    border-radius: 18px;

    background: #104052;

}



.about-page .welcome-image img {

    display: block;

    width: 100%;

    height: 310px;

    object-fit: cover;

    object-position: center;

    border-radius: 17px;

}



.about-page .welcome-content {

    min-width: 0;

    padding-left: 0;

}



.about-page .welcome-content h2 {

    font-size: 34px;

    margin-bottom: 10px;

}



.about-page .welcome-content p {

    font-size: 15px;

    line-height: 1.65;

    margin-bottom: 26px;

}



.about-page .welcome-content p:last-child {

    margin-bottom: 0;

}



/* =========================================

   STATISTICS

========================================= */



.about-page .about-stats {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 54px;

}



.about-page .stat-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 12px;

    min-height: 108px;

    padding: 22px 20px;

}



.about-page .stat-card h3 {

    color: var(--text);

    font-size: 27px;

    font-weight: 800;

    line-height: 1.3;

    margin-bottom: 4px;

}



.about-page .stat-card p {

    color: #d0d9e2;

    font-size: 14px;

    margin-bottom: 0;

}



/* =========================================

   GENERAL SECTIONS

========================================= */



.about-page .about-section {

    margin-bottom: 48px;

}



.about-page .about-section > h2 {

    font-size: 30px;

    margin-bottom: 10px;

}



.about-page .section-description {

    font-size: 14px;

    line-height: 1.65;

    margin-bottom: 18px;

}



/* =========================================

   COMPANY VALUES

========================================= */



.about-page .values-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 14px;

}



.about-page .value-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-top: 3px solid var(--accent);

    border-radius: 10px;

    padding: 20px;

    min-height: 110px;

}



.about-page .value-card h3 {

    font-size: 16px;

    margin-bottom: 6px;

}



.about-page .value-card p {

    font-size: 13px;

    line-height: 1.6;

    margin-bottom: 0;

}



/* =========================================

   SERVICES

========================================= */



.about-page .services-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;

}



.about-page .service-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 11px;

    padding: 22px;

    min-width: 0;

}



.about-page .service-card h3 {

    font-size: 16px;

    margin-bottom: 14px;

}



.about-page .service-card ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.about-page .service-card li {

    position: relative;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.55;

    padding: 10px 0 10px 22px;

    border-bottom: 1px solid #26343f;

}



.about-page .service-card li::before {

    content: "✓";

    position: absolute;

    left: 0;

    top: 9px;

    color: var(--accent);

    font-weight: 800;

    font-size: 15px;

}



/* =========================================

   SPECIALITY TAGS

========================================= */



.about-page .speciality-list {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

}



.about-page .speciality-list span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 6px 12px;

    border-radius: 30px;

    background: #103b39;

    color: var(--accent);

    font-size: 12px;

    font-weight: 700;

    line-height: 1.4;

}



/* =========================================

   BOARD OF DIRECTORS

========================================= */



.about-page .directors-section {

    margin-bottom: 0;

}



.about-page .directors-intro {

    max-width: 100%;

    line-height: 1.65;

    margin-bottom: 18px;

}



.about-page .directors-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;

}



.about-page .director-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 11px;

    padding: 22px;

    min-width: 0;

}



.about-page .director-avatar {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(135deg, #14b9b6, #079bc5);

    color: #fff;

    font-size: 16px;

    font-weight: 800;

    margin-bottom: 10px;

}



.about-page .director-card h3 {

    font-size: 16px;

    margin-bottom: 4px;

}



.about-page .director-role {

    display: inline-block;

    background: #103b39;

    color: var(--accent);

    font-size: 11px;

    font-weight: 700;

    padding: 3px 9px;

    border-radius: 20px;

    margin-bottom: 10px;

}



.about-page .director-card p {

    font-size: 13px;

    line-height: 1.7;

    margin-bottom: 0;

}



/* =========================================

   TABLET

========================================= */



@media (max-width: 900px) {

    .about-page .about-container {

        width: calc(100% - 40px);

        padding-top: 38px;

    }



    .about-page .about-hero {

        min-height: 210px;

    }



    .about-page .about-hero-content h1 {

        font-size: 36px;

    }



    .about-page .welcome-image img {

        height: 260px;

    }



    .about-page .welcome-content h2 {

        font-size: 28px;

    }



    .about-page .welcome-content p {

        font-size: 14px;

        margin-bottom: 18px;

    }



    .about-page .stat-card {

        padding: 18px 14px;

    }



    .about-page .stat-card h3 {

        font-size: 23px;

    }

}



/* =========================================

   MOBILE

========================================= */



@media (max-width: 600px) {

    .about-page .about-container {

        width: calc(100% - 32px);

        padding: 28px 0;

    }



    .about-page .about-hero {

        min-height: 170px;

        padding: 30px 18px;

    }



    .about-page .about-hero-content h1 {

        font-size: 29px;

    }



    .about-page .about-hero-content p {

        font-size: 13px;

    }



    .about-page .about-welcome {

        grid-template-columns: 1fr;

        gap: 26px;

        margin-bottom: 32px;

    }



    .about-page .welcome-image img {

        height: 240px;

    }



    .about-page .welcome-image::after {

        right: -8px;

        bottom: -8px;

        left: 8px;

        top: 8px;

    }



    .about-page .welcome-content h2 {

        font-size: 27px;

    }



    .about-page .welcome-content p {

        font-size: 14px;

        margin-bottom: 16px;

    }



    .about-page .about-stats {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 10px;

        margin-bottom: 38px;

    }



    .about-page .stat-card {

        min-height: 90px;

        padding: 16px;

    }



    .about-page .stat-card h3 {

        font-size: 23px;

    }



    .about-page .stat-card p {

        font-size: 13px;

    }



    .about-page .about-section {

        margin-bottom: 36px;

    }



    .about-page .about-section > h2 {

        font-size: 26px;

    }



    .about-page .values-grid,

    .about-page .services-grid,

    .about-page .directors-grid {

        grid-template-columns: 1fr;

        gap: 12px;

    }



    .about-page .value-card {

        min-height: auto;

        padding: 18px;

    }



    .about-page .value-card h3,

    .about-page .service-card h3 {

        font-size: 15px;

    }



    .about-page .value-card p,

    .about-page .service-card li,

    .about-page .director-card p {

        font-size: 13px;

    }



    .about-page .service-card {

        padding: 18px;

    }



    .about-page .service-card li {

        padding: 9px 0 9px 22px;

    }



    .about-page .speciality-list {

        gap: 7px;

    }



    .about-page .speciality-list span {

        font-size: 11px;

        padding: 6px 10px;

    }



    .about-page .director-card {

        padding: 18px;

    }

}



/* =========================================

   SMALL MOBILE

========================================= */



@media (max-width: 380px) {

    .about-page .about-hero-content h1 {

        font-size: 25px;

    }



    .about-page .about-container {

        width: calc(100% - 24px);

    }



    .about-page .welcome-image img {

        height: 200px;

    }



    .about-page .stat-card {

        padding: 12px;

    }



    .about-page .stat-card h3 {

        font-size: 21px;

    }

}

/*  */



/* services */





/* ======================================

   SPECIALIZATION PAGE

====================================== */



.specialization-page {

    --spec-bg: #0d141a;

    --spec-card: #16212b;

    --spec-border: #26343f;

    --spec-text: #e7edf3;

    --spec-muted: #a4b1be;

    --spec-accent: #12c5ba;



    background: var(--spec-bg);

    color: var(--spec-text);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    line-height: 1.6;

    min-height: 100vh;

}



.specialization-page *,

.specialization-page *::before,

.specialization-page *::after {

    box-sizing: border-box;

}



/* Hero banner */



.specialization-page .specialization-hero {

    min-height: 245px;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 40px 24px;

    background:

        linear-gradient(rgba(10, 48, 83, .80), rgba(10, 48, 83, .84)),

        url("../images/specialization-banner.jpg") center 45% / cover no-repeat;

    border-bottom: 2px solid #153b51;

}



.specialization-page .specialization-hero-content {

    max-width: 850px;

}



.specialization-page .specialization-hero h1 {

    color: #fff;

    font-size: 40px;

    line-height: 1.2;

    font-weight: 800;

    margin: 0 0 12px;

}



.specialization-page .specialization-hero p {

    color: #e1eaf2;

    font-size: 15px;

    max-width: 720px;

    margin: 0 auto;

}



/* Main content */



.specialization-page .specialization-container {

    width: min(1200px, calc(100% - 64px));

    margin: 0 auto;

    padding: 48px 0 70px;

}



/* Alternating rows */



.specialization-page .specialization-row {

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    align-items: center;

    gap: 30px;

    margin-bottom: 36px;

}



.specialization-page .specialization-row:last-child {

    margin-bottom: 0;

}



.specialization-page .specialization-row.reverse .specialization-image {

    order: 2;

}



.specialization-page .specialization-row.reverse .specialization-content {

    order: 1;

}



/* Images */



.specialization-page .specialization-image {

    position: relative;

    z-index: 1;

    min-width: 0;

}



.specialization-page .specialization-image::after {

    content: "";

    position: absolute;

    z-index: -1;

    top: 10px;

    right: -12px;

    bottom: -12px;

    left: 12px;

    background: #103d4d;

    border-radius: 13px;

}



.specialization-page .specialization-image img {

    display: block;

    width: 100%;

    height: 240px;

    object-fit: cover;

    object-position: center;

    border-radius: 12px;

    border: 1px solid #263b49;

}



/* Text content */



.specialization-page .specialization-content {

    min-width: 0;

    padding: 4px 0;

}



.specialization-page .specialization-content h2 {

    color: var(--spec-text);

    font-size: 27px;

    line-height: 1.25;

    font-weight: 750;

    margin: 0 0 10px;

}



.specialization-page .specialization-content p {

    color: var(--spec-muted);

    font-size: 15px;

    line-height: 1.7;

    margin: 0 0 15px;

}



/* Tags */



.specialization-page .specialization-tags {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 16px;

}



.specialization-page .specialization-tags span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: var(--spec-accent);

    background: #103a38;

    border: 1px solid #15504c;

    border-radius: 30px;

    padding: 5px 11px;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 700;

}



/* Request button */



.specialization-page .specialization-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 36px;

    padding: 9px 16px;

    border-radius: 6px;

    background: #10b8ca;

    color: #fff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.3;

    transition: background .2s ease, transform .2s ease;

}



.specialization-page .specialization-btn:hover {

    background: #0797aa;

    transform: translateY(-1px);

}



/* Tablet */



@media (max-width: 900px) {

    .specialization-page .specialization-container {

        width: calc(100% - 44px);

        padding-top: 38px;

    }



    .specialization-page .specialization-row {

        gap: 24px;

        margin-bottom: 32px;

    }



    .specialization-page .specialization-image img {

        height: 210px;

    }



    .specialization-page .specialization-content h2 {

        font-size: 24px;

    }



    .specialization-page .specialization-content p {

        font-size: 14px;

    }

}



/* Mobile */



@media (max-width: 600px) {

    .specialization-page .specialization-hero {

        min-height: 180px;

        padding: 30px 18px;

    }



    .specialization-page .specialization-hero h1 {

        font-size: 30px;

    }



    .specialization-page .specialization-hero p {

        font-size: 13px;

    }



    .specialization-page .specialization-container {

        width: calc(100% - 36px);

        padding: 32px 0 46px;

    }



    .specialization-page .specialization-row,

    .specialization-page .specialization-row.reverse {

        grid-template-columns: minmax(0, 1fr);

        gap: 22px;

        margin-bottom: 42px;

    }



    .specialization-page .specialization-row .specialization-image,

    .specialization-page .specialization-row.reverse .specialization-image {

        order: 1;

    }



    .specialization-page .specialization-row .specialization-content,

    .specialization-page .specialization-row.reverse .specialization-content {

        order: 2;

    }



    .specialization-page .specialization-image img {

        height: 230px;

    }



    .specialization-page .specialization-content h2 {

        font-size: 25px;

        margin-bottom: 8px;

    }



    .specialization-page .specialization-content p {

        font-size: 14px;

        margin-bottom: 13px;

    }



    .specialization-page .specialization-tags {

        gap: 7px;

    }



    .specialization-page .specialization-tags span {

        font-size: 11px;

    }

}



@media (max-width: 380px) {

    .specialization-page .specialization-container {

        width: calc(100% - 28px);

    }



    .specialization-page .specialization-hero h1 {

        font-size: 26px;

    }



    .specialization-page .specialization-image img {

        height: 195px;

    }

}



@media (prefers-reduced-motion: reduce) {

    .specialization-page .specialization-btn {

        transition: none;

    }

}

/*  */





/* job */





.application-modal {

    display: none;

    position: fixed;

    inset: 0;

    z-index: 99999;

    align-items: center;

    justify-content: center;

    padding: 15px;

    background: rgba(0, 0, 0, 0.75);

}



.application-modal.active {

    display: flex;

}



.application-modal-content {

    width: 100%;

    max-width: 420px;

    box-sizing: border-box;

    padding: 22px 20px;

    color: #f5f7fa;

    background: #16212c;

    border: 1px solid #293744;

    border-radius: 14px;

    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);

}



.application-modal-content h3 {

    margin: 4px 0 14px;

    font-size: 18px;

}



.application-modal-content form {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.application-modal-content input {

    width: 100%;

    box-sizing: border-box;

    padding: 14px 12px;

    color: #fff;

    background: #0d141b;

    border: 1px solid #2c3946;

    border-radius: 11px;

    outline: none;

}



.application-modal-content input:focus {

    border-color: #16b8b0;

}



.application-modal-content input::placeholder {

    color: #9ca8b5;

}



.modal-submit-btn,

.modal-cancel-btn {

    width: 100%;

    padding: 12px;

    border-radius: 11px;

    font-size: 13px;

    cursor: pointer;

}



.modal-submit-btn {

    color: #fff;

    border: none;

    background: linear-gradient(100deg, #16b8a9, #1098c9);

}



.modal-cancel-btn {

    color: #fff;

    background: transparent;

    border: 1px solid #fff;

}



@media (max-width: 480px) {

    .application-modal-content {

        padding: 18px 15px;

    }

}





.success-message {

    padding: 12px 15px;

    margin-bottom: 20px;

    color: #a7f3d0;

    background: #064e3b;

    border: 1px solid #047857;

    border-radius: 6px;

}



.error-message {

    padding: 12px 15px;

    margin-bottom: 20px;

    color: #fecaca;

    background: #7f1d1d;

    border: 1px solid #dc2626;

    border-radius: 6px;

}



/* Job openings page */

.jobs-page {

    min-height: 100vh;

    background: #0d141a;

    color: #e8edf3;

    font-family: Arial, Helvetica, sans-serif;

    padding-bottom: 50px;

}



.jobs-page *,

.jobs-page *::before,

.jobs-page *::after {

    box-sizing: border-box;

}



.jobs-hero {

    width: 100%;

    min-height: 130px;

    padding: 35px 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    background: #0c2548;

}



.jobs-hero h1 {

    margin: 0;

    color: #fff;

    font-size: 38px;

    font-weight: 700;

    line-height: 1.25;

}



.jobs-container {

    width: min(100% - 48px, 980px);

    margin: 50px auto 0;

}



.job-filters {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;

    margin-bottom: 18px;

}



.job-filters select {

    width: 100%;

    height: 42px;

    padding: 0 12px;

    border: 1px solid #293642;

    border-radius: 10px;

    background: #0d141a;

    color: #e8edf3;

    font-size: 14px;

    outline: none;

}



.job-filters select:focus {

    border-color: #13b8c8;

}



.job-results-count {

    margin: 0 0 14px;

    color: #a5b2bf;

    font-size: 13px;

}



.jobs-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;

}



.job-card {

    min-width: 0;

    overflow: hidden;

    background: #16212b;

    border: 1px solid #293642;

    border-radius: 15px;

    display: flex;

    flex-direction: column;

    transition: transform .2s ease, border-color .2s ease;

}



.job-card:hover {

    transform: translateY(-3px);

    border-color: #16b8c6;

}



.job-card[hidden] {

    display: none !important;

}



.job-card > img {

    display: block;

    width: 100%;

    height: 136px;

    object-fit: cover;

    background: #1b2b37;

}



.job-card-content {

    padding: 14px 15px 16px;

    display: flex;

    align-items: flex-start;

    flex-direction: column;

    flex: 1;

}



.job-category {

    display: inline-block;

    max-width: 100%;

    margin-bottom: 8px;

    padding: 5px 10px;

    border-radius: 20px;

    background: #103a39;

    color: #19d0bf;

    font-size: 11px;

    line-height: 1.2;

    font-weight: 700;

}



.job-card h2 {

    margin: 0 0 7px;

    color: #edf2f7;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.35;

}



.job-salary {

    margin: 0 0 13px;

    color: #a5b2bf;

    font-size: 12px;

    line-height: 1.5;

}



.apply-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    min-height: 34px;

    margin-top: auto;

    padding: 8px 15px;

    border-radius: 11px;

    background: linear-gradient(100deg, #17bda9, #078bc6);

    color: #fff !important;

    text-decoration: none !important;

    font-size: 12px;

    font-weight: 700;

    transition: filter .2s ease;

}



.apply-btn:hover {

    filter: brightness(1.12);

}



.no-jobs-message {

    margin-top: 20px;

    padding: 30px 15px;

    border: 1px solid #293642;

    border-radius: 12px;

    color: #a5b2bf;

    text-align: center;

}



.no-jobs-message[hidden] {

    display: none !important;

}



/* Tablet */

@media (max-width: 900px) {

    .jobs-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .jobs-container {

        width: min(100% - 36px, 700px);

        margin-top: 35px;

    }

}



/* Mobile */

@media (max-width: 520px) {

    .jobs-hero {

        min-height: 105px;

        padding: 28px 15px;

    }



    .jobs-hero h1 {

        font-size: 30px;

    }



    .jobs-container {

        width: calc(100% - 30px);

        margin-top: 25px;

    }



    .job-filters {

        grid-template-columns: 1fr;

        gap: 12px;

    }



    .jobs-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }



    .job-card > img {

        height: 205px;

    }



    .job-card-content {

        padding: 16px;

    }



    .job-card h2 {

        font-size: 17px;

    }



    .job-salary {

        font-size: 13px;

    }

}

/*  */





/* client */





/* Our Clients page */

.clients-page {

    min-height: 100vh;

    background: #0d141a;

    color: #e8edf3;

    font-family: Arial, Helvetica, sans-serif;

    padding-bottom: 44px;

}



.clients-page *,

.clients-page *::before,

.clients-page *::after {

    box-sizing: border-box;

}



/* Navy title banner */

.clients-hero {

    width: 100%;

    min-height: 113px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px 20px;

    background: #0d2547;

    text-align: center;

}



.clients-hero h1 {

    margin: 0;

    color: #fff;

    font-size: 34px;

    font-weight: 700;

    line-height: 1.3;

}



/* Main content */

.clients-container {

    width: min(100% - 40px, 846px);

    margin: 47px auto 0;

}



.clients-intro {

    margin: 0 0 22px;

    color: #a6b3c0;

    font-size: 12px;

    line-height: 1.7;

}



/* Logo grid */

.clients-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 13px;

    align-items: stretch;

}



.client-card {

    height: 130px;

    min-width: 0;

    padding: 10px 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background: #fff;

    border: 1px solid #d4dce4;

    border-radius: 11px;

}



.client-card img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center;

}



/* Tablet */

@media (max-width: 900px) {

    .clients-container {

        width: min(100% - 36px, 700px);

        margin-top: 36px;

    }



    .clients-grid {

        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 12px;

    }



    .client-card {

        height: 82px;

    }

}



/* Mobile */

@media (max-width: 560px) {

    .clients-hero {

        min-height: 95px;

    }



    .clients-hero h1 {

        font-size: 29px;

    }



    .clients-container {

        width: calc(100% - 30px);

        margin-top: 28px;

    }



    .clients-intro {

        margin-bottom: 18px;

        font-size: 13px;

    }



    .clients-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 11px;

    }



    .client-card {

        height: 76px;

        padding: 9px;

        border-radius: 9px;

    }

}



@media (max-width: 350px) {

    .clients-grid {

        grid-template-columns: 1fr;

    }



    .client-card {

        height: 90px;

    }

}



/*  */



/* contact */



/* Contact page */

.success-message {

    background: #d1fae5;

    color: #065f46;

    padding: 12px 15px;

    margin-bottom: 15px;

    border-radius: 6px;

    font-size: 14px;

}





.contact-page {

    min-height: calc(100vh - 70px);

    background: #0d141b;

    color: #e7edf3;

    font-family: Arial, Helvetica, sans-serif;

    padding-bottom: 56px;

}



/* Top title banner */

.contact-page .contact-hero {

    width: 100%;

    min-height: 145px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #0d2547;

    padding: 30px 20px;

    text-align: center;

}



.contact-page .contact-hero h1 {

    color: #ffffff;

    font-size: 42px;

    font-weight: 700;

    line-height: 1.2;

    margin: 0;

}



/* Main two-column layout */

.contact-page .contact-container {

    width: 100%;

    max-width: 1120px;

    margin: 56px auto 0;

    padding: 0 20px;

    display: grid;

    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);

    gap: 24px;

    align-items: start;

}



/* Office details */

.contact-page .contact-office {

    padding-top: 4px;

}



.contact-page .contact-office h2 {

    color: #e7edf3;

    font-size: 36px;

    font-weight: 700;

    line-height: 1.25;

    margin: 0 0 10px;

}



.contact-page .contact-office p {

    color: #a8b5c3;

    font-size: 16px;

    line-height: 1.65;

    margin: 0;

}



.contact-page .contact-phone {

    display: inline-block;

    color: #a8b5c3;

    font-size: 16px;

    text-decoration: none;

    margin-top: 2px;

}



.contact-page .contact-phone:hover {

    color: #19c2b0;

}



/* Map placeholder */

.contact-page .contact-map {

    min-height: 200px;

    margin-top: 28px;

    border: 1px solid #263541;

    border-radius: 14px;

    background: linear-gradient(135deg, #12312f, #17232d);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    text-align: center;

}



.contact-page .contact-map span {

    color: #e7edf3;

    font-size: 16px;

}



/* Form card */

.contact-page .contact-form-card {

    width: 100%;

    padding: 28px 20px 20px;

    background: #16212b;

    border: 1px solid #293743;

    border-radius: 15px;

}



.contact-page .contact-form-card h3 {

    color: #e7edf3;

    font-size: 18px;

    font-weight: 700;

    margin: 0 0 12px;

}



/* Form fields */

.contact-page .contact-form-card form {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.contact-page .contact-form-card input,

.contact-page .contact-form-card select,

.contact-page .contact-form-card textarea {

    display: block;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;

    border: 1px solid #293743;

    border-radius: 11px;

    background: #0d141b;

    color: #e7edf3;

    font-family: inherit;

    font-size: 15px;

    padding: 0 13px;

    outline: none;

    transition: border-color 0.2s ease;

}



.contact-page .contact-form-card input,

.contact-page .contact-form-card select {

    height: 46px;

}



.contact-page .contact-form-card textarea {

    height: 126px;

    padding-top: 14px;

    resize: vertical;

}



.contact-page .contact-form-card input::placeholder,

.contact-page .contact-form-card textarea::placeholder {

    color: #89939d;

}



.contact-page .contact-form-card input:focus,

.contact-page .contact-form-card select:focus,

.contact-page .contact-form-card textarea:focus {

    border-color: #16b9b0;

}



.contact-page .contact-form-card select {

    cursor: pointer;

}



.contact-page .contact-form-card button {

    width: 100%;

    min-height: 40px;

    border: 0;

    border-radius: 11px;

    background: linear-gradient(100deg, #16b9a8, #1097c9);

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: opacity 0.2s ease, transform 0.2s ease;

}



.contact-page .contact-form-card button:hover {

    opacity: 0.9;

    transform: translateY(-1px);

}



/* Tablet */

@media (max-width: 900px) {

    .contact-page .contact-container {

        max-width: 760px;

        grid-template-columns: 1fr 1fr;

        gap: 20px;

        margin-top: 40px;

    }



    .contact-page .contact-office h2 {

        font-size: 30px;

    }



    .contact-page .contact-office p,

    .contact-page .contact-phone {

        font-size: 15px;

    }

}



/* Mobile */

@media (max-width: 650px) {

    .contact-page {

        padding-bottom: 35px;

    }



    .contact-page .contact-hero {

        min-height: 110px;

        padding: 24px 16px;

    }



    .contact-page .contact-hero h1 {

        font-size: 32px;

    }



    .contact-page .contact-container {

        grid-template-columns: 1fr;

        gap: 28px;

        margin-top: 30px;

        padding: 0 18px;

    }



    .contact-page .contact-office h2 {

        font-size: 29px;

    }



    .contact-page .contact-map {

        min-height: 180px;

        margin-top: 22px;

    }



    .contact-page .contact-form-card {

        padding: 22px 16px 18px;

    }

}



/*  */



/* features */





/* Full Website Blueprint */



.blueprint-page {

    min-height: 100vh;

    background: #0d151d;

    color: #e7edf4;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    line-height: 1.65;

}



/* Title banner */



.blueprint-page .blueprint-hero {

    width: 100%;

    min-height: 128px;

    padding: 30px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: #0e2749;

}



.blueprint-page .blueprint-hero h1 {

    margin: 0;

    color: #ffffff;

    font-size: 38px;

    font-weight: 750;

    line-height: 1.25;

}



/* Main content */



.blueprint-page .blueprint-container {

    width: min(100% - 48px, 972px);

    margin: 0 auto;

    padding: 48px 0 60px;

}



.blueprint-page .blueprint-intro {

    margin: 0 0 24px;

    color: #a5b3c1;

    font-size: 15px;

    line-height: 1.65;

}



/* Cards layout */



.blueprint-page .blueprint-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;

    align-items: stretch;

}



/* Individual card */



.blueprint-page .blueprint-card {

    min-width: 0;

    min-height: 193px;

    padding: 20px 18px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    text-decoration: none;

    color: #e7edf4;

    background: #17212b;

    border: 1px solid #273541;

    border-radius: 13px;

    transition:

        transform 0.2s ease,

        border-color 0.2s ease,

        background 0.2s ease;

}



.blueprint-page .blueprint-card:hover {

    transform: translateY(-4px);

    border-color: #18b8c1;

    background: #1b2935;

}



.blueprint-page .blueprint-icon {

    min-height: 40px;

    margin-bottom: 10px;

    font-size: 25px;

    line-height: 1.2;

}



.blueprint-page .blueprint-card h2 {

    margin: 0 0 4px;

    color: #edf2f7;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.4;

}



.blueprint-page .blueprint-card p {

    margin: 0;

    color: #a5b3c1;

    font-size: 13px;

    line-height: 1.6;

}



/* Tablet */



@media (max-width: 1000px) {

    .blueprint-page .blueprint-container {

        width: min(100% - 40px, 760px);

    }



    .blueprint-page .blueprint-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 16px;

    }



    .blueprint-page .blueprint-card {

        min-height: 175px;

    }

}



/* Mobile */



@media (max-width: 560px) {

    .blueprint-page .blueprint-hero {

        min-height: 100px;

        padding: 24px 16px;

    }



    .blueprint-page .blueprint-hero h1 {

        font-size: 28px;

    }



    .blueprint-page .blueprint-container {

        width: calc(100% - 32px);

        padding: 30px 0 40px;

    }



    .blueprint-page .blueprint-intro {

        margin-bottom: 20px;

        font-size: 14px;

    }



    .blueprint-page .blueprint-grid {

        grid-template-columns: 1fr;

        gap: 14px;

    }



    .blueprint-page .blueprint-card {

        min-height: auto;

        padding: 20px;

    }



    .blueprint-page .blueprint-card h2 {

        font-size: 18px;

    }



    .blueprint-page .blueprint-card p {

        font-size: 14px;

    }

}



@media (prefers-reduced-motion: reduce) {

    .blueprint-page .blueprint-card {

        transition: none;

    }



    .blueprint-page .blueprint-card:hover {

        transform: none;

    }

}





/*  */