:root {
    --teal-900: #032f35;
    --teal-800: #064249;
    --teal-700: #0a5961;
    --accent: #f5b301;
    --soft: #f4f7f6;
    --text: #0f1c1f;
    --muted: #5d6f73;
    --border: #e6ecec;
}
* {
    box-sizing: border-box
}
.container {
    width: 95%;
    max-width: 1630px;
    margin: auto;
}
body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
.site-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.site-main {
    flex: 1 0 auto;
    background: #f4f7f6;
}
.site-footer {
    flex-shrink: 0;
    margin-top: auto;
    background: #021f23;
    color: #bcd0d2;
    padding: 4rem 0 1.5rem;
}
h1,
h2,
h3,
h4,
h5 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    letter-spacing: -.01em
}
.text-muted-2 {
    color: var(--muted)
}
.bg-teal {
    background: var(--teal-900) !important;
    color: #fff
}
.bg-soft {
    background: var(--soft)
}
.text-teal {
    color: var(--teal-900)
}
.text-accent {
    color: var(--accent)
}
a {
    text-decoration: none
}
.btn {
    border-radius: 999px;
    padding: .5rem 1.4rem;
    font-weight: 600;
    transition: all .25s ease
}
.btn-primary {
    background: var(--teal-900);
    border-color: var(--teal-900)
}
.btn-primary {
    background: #17c1f2;
    border-color: #17c1f2;
    background: linear-gradient(90deg, #027798, #6956a1);
}
.btn-primary:hover {
    background: var(--teal-800);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(3, 47, 53, .25)
}
.btn-primary:hover {
    background: #2682bb;
    transform: translateY(-2px);
    /* box-shadow: 0 10px 24px rgba(3, 47, 53, .25); */
    border-color: #2682bb;
    COLOR: #000;
}
.btn-accent {
    background: var(--accent);
    border: none;
    color: #1a1a1a;
    background: #ffffff;
}
.btn-accent:hover {
    background: #ffc726;
    transform: translateY(-2px);
    color: #000
}
.btn-outline-light-2 {
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fff
}
.btn-outline-light-2:hover {
    background: #fff;
    color: var(--teal-900)
}
/* Navbar */
.navbar-custom {
    background: #03373e;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000
}
.navbar-custom .nav-link {
    color: #e2e2e2;
    font-weight: 400;
    margin: 0 .4rem;
    transition: color .2s
}
.navbar-custom .nav-link:hover {
    color: var(--accent)
}
.logo-mark img {
    width: 228px;
}
.navbar-custom a.btn.btn-outline-dark {
    color: #fff;
    border-color: #17c1f2;
}
.navbar-custom a.btn.btn-outline-dark:hover {
    background: #17c1f2;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(3, 47, 53, .25);
    color: #000;
}
/* Hero */
.hero {
    background: linear-gradient(135deg, #03363c 0%, #064249 60%, #0a5961 100%);
    color: #fff;
    position: relative;
    overflow: hidden
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 300px at 80% 20%, rgba(245, 179, 1, .15), transparent 60%);
    pointer-events: none;
}
.hero .badge-pill {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    padding: .4rem 1rem;
    font-size: .85rem;
    display: inline-flex;
    gap: .5rem;
    align-items: center
}
.hero h1 {
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    line-height: 1.08
}
.hero h1 span {
    color: var(--accent)
}
.search-card {
    background: #fff;
    color: var(--text);
    border-radius: 18px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .18);
    padding: 1.1rem;
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap
}
.search-card .field {
    flex: 1;
    min-width: 180px;
    display: flex;
    gap: .6rem;
    align-items: center;
    padding: .6rem .9rem;
    border-right: 1px solid var(--border)
}
.search-card .field:last-of-type {
    border-right: none
}
.search-card input {
    border: none;
    outline: none;
    width: 100%;
    font-size: .95rem;
    background: transparent;
    position: relative;
    z-index: 1;
}
.hreo-form {
    position: relative;
    z-index: 2;
}
.chip {
    display: inline-block;
    padding: .35rem .9rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: #dfeeee;
    font-size: .82rem;
    margin: .2rem .25rem;
    transition: all .2s
}
.chip:hover {
    background: #fff;
    color: var(--teal-900)
}
.hero-img {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35)
}
.hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}
/* Stats */
.stat {
    display: flex;
    gap: .9rem;
    align-items: center
}
.stat-icn {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #eafafb;
    color: var(--teal-900);
    display: grid;
    place-items: center
}
.stat strong {
    font-size: 1.4rem;
    font-family: 'Plus Jakarta Sans'
}
/* Cards */
.card-soft {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    transition: all .3s ease;
    height: 100%
}
.card-soft:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(3, 47, 53, .10);
    border-color: var(--teal-700)
}
.company-logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--soft);
    display: grid;
    place-items: center;
    font-weight: 800;
    color: var(--teal-900);
    font-family: 'Plus Jakarta Sans'
}
.pill {
    display: inline-block;
    background: #eafafb;
    color: var(--teal-900);
    font-size: .75rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-weight: 600
}
.pill-urgent {
    background: #ffe8e8;
    color: #c0392b
}
.pill-featured {
    background: #fff4d6;
    color: #8a6300
}
/* CTA banners */
.cta-banner {
    background: var(--teal-900);
    color: #fff;
    border-radius: 22px;
    padding: 2.4rem;
    position: relative;
    overflow: hidden
}
.cta-banner::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(245, 179, 1, .12)
}
.cta-banner h3 {
    font-size: 1.6rem
}
/* Founder */
.founder-img {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(3, 47, 53, .18)
}
.founder-img img {
    width: 100%;
    display: block
}
/* Accordion */
.accordion-item {
    border: 1px solid var(--border);
    border-radius: 14px !important;
    margin-bottom: .75rem;
    overflow: hidden
}
.accordion-button {
    font-weight: 600;
    color: var(--teal-900);
    background: #fff
}
.accordion-button:not(.collapsed) {
    background: #eafafb;
    color: var(--teal-900);
    box-shadow: none
}
.accordion-button:focus {
    box-shadow: none
}
/* Footer */
footer {
    background: #021f23;
    color: #bcd0d2;
    padding: 4rem 0 1.5rem
}
footer h6 {
    color: #fff;
    font-family: 'Plus Jakarta Sans';
    font-weight: 700;
    margin-bottom: 1rem
}
footer a {
    color: #bcd0d2;
    display: block;
    padding: .25rem 0;
    transition: color .2s;
    font-size: 14px;
}
footer a:hover {
    color: #18c2f3
}
.social {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    display: inline-grid;
    place-items: center;
    margin-right: .4rem;
    transition: all .2s
}
.social:hover {
    background: #18c2f3;
    color: #000
}
.section {
    padding: 5rem 0
}
.eyebrow {
    color: var(--teal-700);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .8rem
}
@media (max-width: 768px) {
    .hero {
        padding-top: 2rem
    }
    .cta-banner {
        padding: 1.6rem
    }
}
.hero-slider .owl-stage {
    padding-left: 0px !important;
}
.hero-slider .item img,
.hero-slider2 .item img {
    width: 100%;
    /* height:450px; */
    height: 200px;
    object-fit: cover;
    object-position: top center;
}
.hero-slider .item,
.hero-slider2 .item {
    border-radius: 16px;
    overflow: hidden;
}
.owl-carousel.hero-slider .owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    border-radius: 16px;
    overflow: hidden;
}
.hero .slider-btn {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
}
.hero .slider-btn a {
    padding: 8px;
    color: #fff;
    background: #00799b;
    min-width: 90%;
    display: inline-block;
    border-radius: 10px;
    border: 1px solid #17c1f2;
    font-size: 14px;
}
.hero-heading {
    padding: 12px;
    border: 1px solid #17c1f2;
    margin-bottom: 23px;
    text-align: center;
    background: #064249;
    background: linear-gradient(135deg, #03363c 0%, #064249 60%, #0a5961 100%);
}
.hero-heading h3 {
    font-size: 20px;
}
/* .hreo-form {
    background: linear-gradient(20deg, #03363c 0%, #064249 60%, #0a5961 100%);
} */
a.all-jobs {
    color: #fff;
    font-size: 14px;
}
.marquee-info a.mar-box {
    display: inline-block;
    padding: .7rem .9rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: #053c42;
    font-size: 16px;
    margin: .2rem .25rem;
    transition: all .2s;
    background: #dce4e4;
    min-width: 200px;
    text-align: center;
}
.marquee-info {
    padding: 20px 0px;
}
.featured {
    background: #f5f9fa;
}
.card-soft:hover {
    border-color: #e1e1e1;
}
#featured .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}
#featured .title-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
#featured .title-icon {
    width: 45px;
    height: 45px;
    border-radius: 15px;
    background: #e8f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #008c8c;
    font-size: 18px;
}
#featured .section-title h2 {
    font-size: 28px;
    font-weight: 700;
    color: #073b3d;
    margin: 0;
}
#featured .view-link {
    color: #008c8c;
    font-weight: 600;
    text-decoration: none;
}
/* Company Card */
#featured .company-card {
    border: none;
    background: white;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    height: 100%;
}
#featured .company-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#featured .company-info {
    display: flex;
    gap: 14px;
    align-items: center;
}
#featured .logo {
    width: 50px;
    height: 50px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    font-weight: 700;
}
.blue {
    background: #1696f5;
}
.green {
    background: #2eae4b;
}
.orange {
    background: #fa5834;
}
#featured .company-name {
    font-size: 17px;
    font-weight: 700;
    color: #073b3d;
    margin: 0;
}
#featured .company-type {
    color: #657878;
    font-size: 13px;
        margin-top: 5px;
}
#featured .flipbox-back .company-type {
    color: #c2c2c2;
   
}
#featured .tag {
    background: #e8f5f5;
    color: #087878;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
}
/* Stats */
#featured .stats {
    display: flex;
    gap: 8px;
        margin-top: 30px;
}
#featured .stat-box {
    background: #eff6f6;
    border-radius: 5px;
    flex: 1;
    /* height: 55px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    padding: 15px 10px;
    color: #526868;
}
#featured .stat-box i {
    margin-bottom: 5px;
    font-size: 20px;
    color: #07585a;
}
/* Skills */
#featured .skills {
    margin-top: 20px;
}
#featured .skill {
    display: inline-block;
    background: #e8f5f5;
    color: #07585a;
    padding: 8px 29px;
    border-radius: 27px;
    font-size: 13px;
    margin-right: 5px;
}
/* Footer */
#featured .card-footer-custom {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e8eeee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 20px;
    right: 20px;
    left: 20px;
}
#featured .follow {
    color: #536868;
    font-size: 14px;
}
#featured .apply-btn {
    background: #073b3d;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 13px;
}
#featured {
    background: #f7fbfb;
}
#jobs-sec .jobs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}
#jobs-sec .heading-left {
    display: flex;
    align-items: center;
    gap: 15px;
}
#jobs-sec .icon-box {
    width: 46px;
    height: 46px;
    background: #e3f3f2;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #009b9b;
    font-size: 20px;
}
#jobs-sec .heading-left h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    color: #062f35;
}
#jobs-sec .view-all {
    color: #008b8b;
    text-decoration: none;
    font-weight: 600;
}
/* Card */
#jobs-sec .job-card {
    background: #fff;
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
    height: 100%;
}
#jobs-sec .job-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
#jobs-sec .job-title {
    display: flex;
    gap: 14px;
}
#jobs-sec .job-icon {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    background: #e7f5f3;
    color: #009b9b;
    display: flex;
    justify-content: center;
    align-items: center;
}
#jobs-sec .job-title h4 {
    margin: 0;
    color: #092f36;
    font-size: 16px;
    font-weight: 700;
}
#jobs-sec .company {
    font-size: 13px;
    color: #607777;
}
#jobs-sec .badge-custom {
    padding: 6px 13px;
    border-radius: 20px;
    color: white;
    font-size: 11px;
    font-weight: 600;
}
.red {
    background: #ef4444;
}
.blue {
    background: #5573d8;
}
.green {
    background: #079669;
}
/* Job details */
#jobs-sec .details {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    color: #526969;
    font-size: 12px;
}
#jobs-sec .details span i {
    margin-right: 5px;
}
#jobs-sec .salary {
    color: #082f35;
    font-weight: 700;
}
#jobs-sec .tags {
    margin-top: 18px;
}
#jobs-sec .tag {
    display: inline-block;
    background: #e5f3f2;
    color: #0c5557;
    border-radius: 20px;
    padding: 6px 12px;
    margin-right: 5px;
    font-size: 11px;
}
#jobs-sec .footer {
    border-top: 1px solid #e8eeee;
    margin-top: 16px;
    padding-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#jobs-sec .save {
    color: #536969;
    font-size: 14px;
}
#jobs-sec .apply {
    background: #052f34;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
}
.apply {
    background: #052f34;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
}
/* --------------------------faq------------------------ */
.faq-section {
    padding: 70px 0;
}
/* heading */
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.head-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.head-icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: #e5f3f2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #009b9b;
}
.section-head h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #073b3d;
}
.view-link {
    color: #008b8b;
    text-decoration: none;
    font-weight: 600;
}
/*================================================ Accordion */
.accordion-item {
    border: none !important;
    background: white;
    border-radius: 22px !important;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
}
.accordion-button {
    background: white !important;
    box-shadow: none !important;
    border-radius: 22px !important;
    padding: 20px;
    color: #073b3d;
    font-weight: 700;
}
.accordion-button:not(.collapsed) {
    color: #073b3d;
}
.accordion-button::after {
    background-size: 14px;
}
.faq-number {
    color: #009b9b;
    font-size: 13px;
    font-weight: 700;
    margin-right: 20px;
}
.accordion-body {
    padding: 0 50px 25px;
    color: #607070;
    font-size: 14px;
    line-height: 1.6;
}
/* Right Card */
.support-card {
    height: 435px;
    background: #043638;
    border-radius: 25px;
    padding: 32px;
    color: white;
    position: relative;
    overflow: hidden;
}
.support-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}
.support-card h3 {
    font-size: 24px;
    font-weight: 700;
}
.support-card p {
    color: #d6e4e4;
    font-size: 14px;
    line-height: 1.6;
}
.support-btn {
    background: white;
    color: #073b3d;
    padding: 12px 20px;
    border-radius: 25px;
    text-decoration: none;
    display: inline-flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
}
.circle {
    position: absolute;
    width: 120px;
    height: 120px;
    right: -20px;
    bottom: -25px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}
@media(max-width:991px) {
    .support-card {
        margin-top: 25px;
    }
}
/* --------------------stats counter--------------------- */
.stats-section {
    padding: 60px 0;
}
.stats-section .stats-box {
    /* max-width: 1215px; */
    margin: auto;
    background: #043638;
    border-radius: 30px;
    background: radial-gradient(circle at 90% 45%, rgb(0 220 230 / 38%), #0000006e 30%), linear-gradient(135deg, #106d7f, #051a1f);
    padding: 38px 45px;
    box-shadow: 0 20px 35px rgb(0 0 0 / 15%);
}
.stats-section .stat-item {
    display: flex;
    align-items: center;
    gap: 16px;
}
.stats-section .stat-icon {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .12);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
}
.stats-section .stat-number {
    color: white;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}
.stats-section .stat-text {
    color: #d5e8e8;
    font-size: 14px;
    margin-top: 5px;
}
@media(max-width:768px) {
    .stats-section .stats-box {
        padding: 30px;
    }
    .stats-section .stat-item {
        margin-bottom: 25px;
    }
    .stats-section .stat-number {
        font-size: 26px;
    }
}
.hero .category {
    height: 75px;
    border-radius: 18px;
    /* border: 1px solid #407779; */
    background: rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
    padding: 20px;
    margin-bottom: 25px;
    backdrop-filter: blur(10px);
    justify-content: space-between;
}
.hero .category i {
    font-size: 25px;
    color: #19e1df;
    margin-right: 15px;
}
.hero .category h4 {
    margin: 0;
    font-size: 16px;
}
.hero .category p {
    margin: 0;
    color: #b8c5cc;
    font-size: 14px;
}
.hero .view-btn {
    border: 1px solid #17d7dc;
    color: white;
    padding: 10px 22px;
    border-radius: 30px;
    font-size: 12px;
}
.hero-info {
    width: 100%;
    max-width: 1600px;
    margin: auto;
}
.hero .card-content {
    padding: 18px;
    background: linear-gradient(transparent, #061923);
}
.hero .card-content h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 100;
}
.hero .card-content .apply-btn {
    /* width: 100%; */
    margin-top: -1px;
    border: none;
    border-radius: 30px;
    color: white;
    background: linear-gradient(90deg, #00617d, #1d5e91);
    background: #00535e;
    padding: 10px 18px;
    font-size: 13px;
}
.hero .location {
    color: #a9bac2;
    font-size: 13px;
    margin-top: 5px;
}
.profile-box-1,
.profile-box-2 {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 25px;
    padding: 30px 40px;
    height: 100%;
    backdrop-filter: blur(10px);
}
.profile-box-1 {
    background: #004a4c;
    margin-right: 30px;
}
.profile-box-2 {
    background: #003035;
    margin-left: 30px;
}
.hero-info .row {
    position: relative;
}
.box-last-line {
    position: relative;
}
.box-last-line::after {
    display: block;
    content: '';
    height: 100%;
    width: 1px;
    background: linear-gradient(89deg,
            #007e8d 0%,
            #c94295 60%,
            #007e8d 100%);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    /* light glow effect */
    box-shadow:
        0 0 8px #00d9ff,
        0 0 20px #c94295,
        0 0 35px #007e8d;
    filter: drop-shadow(0 0 8px #c94295);
}
.box-last-line::after {
    animation: lineGlow 2s infinite alternate;
}
@keyframes lineGlow {
    from {
        filter: drop-shadow(0 0 5px #00e5ff);
    }
    to {
        filter: drop-shadow(0 0 20px #ff4fc3);
    }
}
/* --------------------- */
.footer-logo {
    width: 280px;
}
.flipbox {
    position: relative;
    width: 100%;
    height: 370px;
    /* fixed height do */
    perspective: 1000px;
}
.card {
    position: absolute;
    inset: 0;
    /* top left ki jagah */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform .6s ease;
    transform-style: preserve-3d;
}
.flipbox-front {
    transform: rotateY(-180deg);
}
.flipbox-back {
    transform: rotateY(0deg);
    padding: 20px;
    background: #9e8ed9;
    background: linear-gradient(135deg, #003e43, #00686b) !important;
    color: white;
    transform: rotateY(0deg);
}
.flipbox:hover .flipbox-front {
    transform: rotateY(0deg);
}
.flipbox:hover .flipbox-back {
    transform: rotateY(180deg);
}
.flipbox-back h4 {
    color: white !important;
}
.flipbox-back h2 {
    color: white !important;
}
.flipbox-back .box {
    flex: 1;
    background: #ffffff14;
    /* border: 1px solid #ffffff25; */
    padding: 6px 10px;
    border-radius: 9px;
    text-align: center;
    font-size: 14px;
    display: flex;
    align-items: center;
}
.flipbox-back .box h3 {
    margin: 0;
    color: #20e2e5;
    font-size: 14px;
}
.flipbox-back .jobs span {
    display: inline-block;
    border: 1px solid #ffffff33;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 12px;
    margin: 5px;
}
.flipbox-back .company-name {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.flipbox-back .about {
    color: #b2b2b2;
    line-height: 1.4;
    font-size: 13px;
    margin-top: 12px;
    font-weight: 100;
}
.flipbox-back .highlight {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.flipbox-back h3

 {
    font-size: 16px;
    margin-top: 12px;
}
#featured .flipbox-back .card-footer-custom {
    margin-top: 0px;
    padding-top: 11px;
    border-top: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
        position: absolute;
    bottom: 20px;
    right: 20px;
}
.flipbox-back .btn {
    background: #063f43;
    color: white;
    border: 0;
    border-radius: 30px;
    padding: 10px 20px;
    float: right;
    font-size: 13px;
}
.flipbox-back .apply {
    background: #20d9d5;
    color: #003f43;
    float: right;
}
/*==========job-section==============  */
.job-section {
    padding: 90px 0;
}
/* card */
.job-section .job-card {
    position: relative;
    overflow: hidden;
    /* height: 618px; */
    padding: 48px;
    padding-bottom: 140px;
    border-radius: 35px;
    background: radial-gradient(circle at 90% 45%, rgba(0, 220, 230, .18), transparent 30%), linear-gradient(135deg, #003d49, #003341);
    color: white;
    box-shadow: 0 25px 50px rgba(0, 40, 50, .25);
}
/* glow */
.job-section .job-card:before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    right: -100px;
    top: 110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}
.job-section .job-card:after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    right: 45px;
    top: 35px;
    background-image: radial-gradient(#2ce7ed 2px, transparent 2px);
    background-size: 16px 16px;
    opacity: .35;
    display: none;
}
/* icon */
.job-section .top-icon {
    width: 82px;
    height: 82px;
    border: 2px solid #20e3ed;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #20e3ed;
    font-size: 34px;
    box-shadow:
        0 0 25px rgba(0, 230, 240, .35);
    margin-bottom: 25px;
}
.job-section .job-card h2 {
    font-size: 40px;
    font-weight: 700;
}
.job-section .job-card h2 span {
    color: #21e3ed;
}
.job-section .desc {
    font-size: 20px;
    color: #d5e7ec;
    line-height: 1.5;
    max-width: 430px;
}
.job-section .line {
    height: 1px;
    background: rgba(255, 255, 255, .18);
    margin: 25px 0;
    width: 50%;
}
/* list */
.job-section .features {
    list-style: none;
    padding: 0;
}
.job-section .features li {
    margin: 18px 0;
    color: #e6f4f7;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.job-section .features i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 230, 240, .12);
    color: #20e3ed;
}
/* bottom */
.job-section .card-bottom {
    position: absolute;
    bottom: 45px;
    left: 48px;
    right: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.job-section .btn-custom {
    border: none;
    border-radius: 50px;
    color: white;
    background: linear-gradient(90deg, #027798, #6956a1);
    padding: 11px 26px;
    background: #00535e;
    font-size: 15px;
    border: 1px solid #1abfcb;
}
.job-section .trust {
    color: #b7d0d6;
    font-size: 17px;
}
.job-section .trust i {
    color: #20e3ed;
    margin-right: 10px;
}
/* right image icon */
.job-section .mockup {
    position: absolute;
    right: 20px;
    top: 220px;
    width: 180px;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #21e3ed;
    font-size: 95px;
    opacity: .65;
}
/* responsive */
@media(max-width:991px) {
    .job-section .job-card {
        margin-bottom: 30px;
        height: auto;
        padding-bottom: 130px;
    }
    .job-section .card-bottom {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 30px;
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
    .job-section .mockup {
        right: 20px;
        top: 180px;
    }
}
/* ------------founder start---------------- */
.founder-section {
    padding: 100px 0;
    background: #f7fbfa;
    overflow: hidden;
}
/* IMAGE */
.founder-section .founder-image-box {
    position: relative;
    max-width: 520px;
    margin: auto;
}
.founder-section .image-frame {
    overflow: hidden;
    border-radius: 35px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .15);
    position: relative;
    z-index: 2;
}
.founder-section .image-frame img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    filter: grayscale(100%);
}
.founder-section .founder-img-2 .shape-circle {
    left: -70px;
}
.founder-section .founder-img-2 .experience-card {
    left: -35px;
}
.founder-section .founder-image-box.founder-img-2:after {
    left: -111px;
}
.founder-section .shape-circle {
    position: absolute;
    width: 260px;
    height: 260px;
    background: #dff4f1;
    border-radius: 50%;
    right: -70px;
    bottom: -60px;
}
.founder-section .experience-card {
    position: absolute;
    right: -35px;
    bottom: 45px;
    z-index: 3;
    width: 170px;
    background: white;
    padding: 25px;
    border-radius: 22px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
}
.founder-section .experience-card h2 {
    font-size: 45px;
    color: #00727b;
}
.founder-section .experience-card p {
    color: #666;
    margin-top: 8px;
}
/* CONTENT */
.founder-section .section-tag {
    color: #00727b;
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: bold;
}
.founder-section .founder-content h1 {
    font-size: 48px;
    line-height: 1.2;
    margin: 20px 0;
    color: #123238;
}
.founder-section .founder-content h1 span {
    color: #00727b;
}
.founder-section .desc {
    color: #68797d;
    line-height: 1.7;
    font-size: 17px;
    margin-bottom: 15px;
}
.founder-section .features {
    margin-top: 35px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.founder-section .feature-box {
    background: white;
    padding: 18px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
}
.founder-section .feature-box i {
    font-size: 22px;
    color: #00727b;
}
.founder-section .feature-box span {
    color: #26383d;
    font-weight: 600;
}
.founder-section .learn-btn {
    margin-top: 35px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 30px;
    background: #073f43;
    color: white;
    text-decoration: none;
    border-radius: 40px;
}
.founder-section .learn-btn:hover {
    background: #00727b;
}
.founder-section .founder-image-box:after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -111px;
    top: 35px;
    background-image: radial-gradient(#2ce7ed 2px, transparent 2px);
    background-size: 16px 16px;
    opacity: .35;
    display: none;
}
/* RESPONSIVE */
@media(max-width:900px) {
    .founder-section .founder-content h1 {
        font-size: 38px;
    }
    .founder-section .experience-card {
        right: 10px;
    }
}
/* -------------founder end-------------- */



/* Main Card */

.support-box {
    height: 97%;
    margin: auto;
    border-radius: 35px;
    overflow: hidden;
    position: relative;
    background: radial-gradient(circle at top right, #075a5b, transparent 35%), linear-gradient(120deg, #003638, #002729);
    display: flex;
    align-items: center;
    padding: 37px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .20);
}


/* Decorative */

.support-box .circle1{
position:absolute;
width:130px;
height:130px;
right:-50px;
top:-60px;

border-radius:50%;
background:rgba(255,255,255,.08);

}

.support-box .circle2{
position:absolute;
width:120px;
height:120px;
left:-50px;
bottom:-60px;
border-radius:50%;
background:rgba(0,255,220,.08);

}



.support-box .dots{
position:absolute;
right:80px;
top:70px;
width:120px;
height:80px;

background-image:radial-gradient(#1cb7b0 2px,transparent 2px);
background-size:20px 20px;
opacity:.5;
display: none;

}


/* Left Content */

.support-box .left{
width:50%;
z-index:2;

}


.support-box .mail {
    background: rgba(255, 255, 255, .12);
    width: 60px;
    height: 60px;
    border: 2px solid #20e3ed;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #20e3ed;
    font-size: 34px;
    box-shadow: 0 0 25px rgba(0, 230, 240, .35);
    margin-bottom: 25px;
}



.support-box h1{

font-size:26px;
line-height:1.1;
color:white;
margin-bottom:10px;

}


.support-box h1 span{
color:#20ddd4;

}


.support-box p{
font-size:15px;
line-height:1.7;
color:#d7eeee;
margin-bottom:15px;

}



/* Button */

.support-box .contact {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    width: max-content;
    padding: 8px 16px;
    border-radius: 60px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    color: #063638;
    box-shadow: 0 15px 30px rgba(0, 0, 0, .2);
}


.support-box .headphone{

width:32px;
height:32px;
border-radius:50%;
background:#d9ffff;
display:flex;
align-items:center;
justify-content:center;
}


/* Right Image */

.support-box .right {
    position: absolute;
    width: 50%;
    /* height: 100%; */
    /* display: flex; */
    /* align-items: center; */
    justify-content: center;
    z-index: 2;
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 0;
}

.support-box .right img{

width:100%;
max-width:600px;
animation:move 4s ease-in-out infinite;
}



@keyframes move{
50%{
transform:translateY(-12px);
}

}

/* responsive */

@media(max-width:900px){


.support-box{
height:auto;
flex-direction:column;
padding:20px;

}


.support-box .left,
.support-box .right{

width:100%;
}


.support-box h1{

font-size:20px;

}


.support-box .right{

margin-top:30px;

}


}


.featured-slider.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    padding: 40px 0px;
}

.jobs-slider .owl-stage-outer {padding: 10px 0px 30px;}
/* Equal height owl items */
.jobs-slider .owl-stage {
    display: flex;
}

.jobs-slider .owl-item {
    display: flex;
}

.jobs-slider .item {
    display: flex;
    width: 100%;
}

.jobs-slider .job-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* footer ko bottom me fix rakhega */
.jobs-slider .job-card .footer {
    margin-top: auto;
}

.jobs-slider.owl-carousel .owl-dots.disabled, .jobs-slider.owl-carousel .owl-nav.disabled,
.featured-slider.owl-carousel .owl-dots.disabled, .featured-slider.owl-carousel .owl-nav.disabled {
    display: block !important;
}

/* Owl arrows position */
.owl-nav button.owl-prev,
.owl-nav button.owl-prev, .owl-nav button.owl-prev, .owl-nav button.owl-next {
    position: absolute;
      bottom: 46%;
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    /* box-shadow: 0 0 25px rgba(0, 230, 240, .35); */
    margin-bottom: 25px;
}

/* Left arrow */
.owl-nav button.owl-prev {
    left: -25px;
}

/* Right arrow */
.owl-nav button.owl-next {
    right: -25px;
}


/* Remove default owl nav spacing */
.owl-nav {
    margin: 0;
}


.owl-theme .owl-prev, .owl-theme .owl-next

 {
    background: #8d8d8d !important;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 20px !important;
    /* border: 1px solid #17c1f2 !important; */
}
.owl-theme .owl-nav [class*=owl-]:hover {
    background: #03373e !important;
    color: #FFF !important;
    text-decoration: none;
}
#featured .skills {
    margin-top: 20px;
    gap: 10px !important;
    display: flex;
    flex-wrap: wrap;
}
.flipbox-back .highlight {
  
    flex-wrap: wrap;
}


#jobs-sec .tags {
    margin-top: 18px;
    display: flex;
    row-gap: 5px;
    flex-wrap: wrap;
}



/* -----------responsive------------------------------- */


@media (max-width: 1400px) {

.logo-mark img {
    width: 180px;
}
.navbar-custom .nav-link {
    margin: 0px 0px;
    padding: 0px;
    font-size: 13px;
}
.navbar-custom .btn {
    padding: 7px 12px;
    font-size: 13px;
}
.flipbox {
    height: 420px;
}


}
@media (max-width: 1200px) {

.logo-mark img {
    width: 170px;
}
.navbar-custom .nav-link {
    font-size: 12px;
}
.navbar-custom .btn {
    padding: 7px 12px;
    font-size: 12px;
}
.profile-box-1 {

    margin-right: 0px;
}
.profile-box-2 {

    margin-left: 0px;
}
.profile-box-1, .profile-box-2 {
    border-radius: 20px;
    padding: 20px 20px;
  
}
.marquee-info a.mar-box {
    padding: .5rem .5rem;
    font-size: 14px;
    margin: .1rem .20rem;
    min-width: 150px;
}
.job-section .mockup {
 
    display: none;
  
}
.job-section .top-icon {
    width: 50px;
    height: 50px;
    border: 1px solid #20e3ed;
    font-size: 19px;

}
.job-section .job-card {

    padding: 21px;
     padding-bottom: 120px;
 
}
.job-section .job-card h2 {
    font-size: 24px;
    font-weight: 700;
}
.job-section .desc {
    font-size: 14px;
  
}
.job-section .features li {
    margin: 8px 0;
    font-size: 14px;
    gap: 9px;
}
.job-section .card-bottom {
    position: absolute;
    bottom: 45px;
    left: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.stats-section .stat-number {
    font-size: 22px;
 
}
.support-box {
    padding: 20px;
  
}
.support-box {
    height: 100%;
    flex-wrap: wrap;
}
.support-box .right {
    position: inherit;
    width: 100% !important;
}
.support-box .left {
    width: 100%;
    z-index: 2;
}
.footer-logo {
    width: 100%;
    max-width: 170px;
}
    .hreo-form .pt-5 {
    padding-top: 1rem !important;
}

.hero.py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}
  


}




@media (max-width: 991px) {
        .job-section .job-card {
    
        padding-bottom: 30px;
    }
    #jobs-sec .heading-left h2 {
    
    font-size: 24px;

}
    .section {
    padding: 3rem 0;
}
    .hero.py-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
    .hreo-form .pt-5 {
    padding-top: 1rem !important;
}
    .navbar-toggler {

    border: 1px solid #ffffff;

}
.navbar-toggler-icon {

    filter: invert(1);
}

    .profile-box-1 {
    margin-right: 0px;
}
.profile-box-2 {
  
    margin-left: 0px;
}
    .job-section .card-bottom {
        flex-direction: row;
   
    }
        .job-section .card-bottom {
        position: inherit;
        bottom: 0px;
        left: 0;
        right: 0;}

}

@media (max-width: 991px) {
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none !important;
}
   .navbar .navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
    background: #022c32;
    padding: 10px 12px 20px;
    border-radius: 15px;
}
        .navbar-custom .nav-link {
        margin: 2px 0px;
        padding: 0px;
        font-size: 12px;
        /* background: #ffffff; */
        padding: 10px 13px;
        border-bottom: 1px solid #004a4c;
    } 
    ul.navbar-nav.ms-auto {
    margin-bottom: 20px;
}
    .tab-row {
    flex-wrap: wrap;
    gap: 20px;
}
    .founder-section .founder-content h1 {
    font-size: 28px;
   
}
.founder-section .desc {

    font-size: 15px;
   
}

    .profile-box-1 {
    margin-right: 0px;
}
.profile-box-2 {
  
    margin-left: 0px;
}
.founder-section, .job-section, .faq-section {
    padding: 50px 0;

}
.section-head h2 {

    font-size: 24px;

}
.view-link {
   
    font-size: 14px;
}


}
@media (max-width: 564px) {
    #featured .title-icon {
    display: none;
}

.hero .category {
    flex-direction: column;
    align-items: baseline;
    gap: 20px;
    height: auto;
}
.profile-box-1, .profile-box-2 {
    border-radius: 20px;
    padding: 25px 20px;
}
.hero-slider .item img, .hero-slider2 .item img {
    height: 300px;
 
}
.logo-mark img {
    width: 150px;
}

.hero.py-5 {
    padding-top: 1rem !important;
    padding-bottom: 2rem !important;
}
    .job-section .mockup {
        right: 20px;
        top: 180px;
        display: none;
    }
    .job-section .job-card {
 
    padding: 20px;}
    .job-section .top-icon {
    width: 40px;
    height: 40px;
    border: 1px solid #20e3ed;
    font-size: 18px;
    margin-bottom: 20px;
}
.job-section .job-card h2 {
    font-size: 22px;
  
}
.job-section .desc {
    font-size: 14px;
 
}
.job-section .job-card:before {

    width: 200px;
    height: 200px;
    right: -66px;
    top: -107px;

}
.job-section .features li {
    margin: 15px 0;

    font-size: 14px;

    gap: 9px;
}
/* .support-box .right img {

    opacity: 0.1;

} */
.flipbox {

    width: 100%;
    height: 414px;
  
}



#featured .section-title {
   
    align-items: start;
    margin-bottom: 30px;
    flex-direction: column;
    gap: 26px;
}
#jobs-sec .icon-box {

    display: none;
}
#jobs-sec .jobs-header {

    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
#jobs-sec .job-top {

    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
}
.card-head-part {
    flex-direction: column;
    gap: 20px;
}
.card-head-part h5 {
    font-size: 15px;
}
    .job-section .card-bottom {
        flex-direction: column;
        justify-content: flex-start;
        text-align: left;
    }
    .founder-section .features {

    gap: 10px;
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
}
.section-head {
  
    align-items: flex-start;
    margin-bottom: 30px;
    flex-direction: column;
    gap: 20px;
}
.head-icon {

    display: none;
}
.support-box .mail {
   
    width: 40px;
    height: 40px;
    border: 1px solid #20e3ed;
   
    font-size: 20px;
 
}
.stats-section .stat-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .12);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 15px;
}
    .stats-section .stat-item {
        margin-bottom: 5px;
    }
    .faq-number, .accordion-button {

    font-size: 13px !important;

}
.accordion-item {
  
    border-radius: 8px !important;
    margin-bottom: 4px;
  
}
.card-foot {    flex-wrap: wrap;
    gap: 15px;}
    #jobs-sec .footer {

    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
}
    .flipbox {
        width: 100%;
        height: 520px;
       
    }


}
@media (max-width: 400px) {
    .h-btns {flex-wrap: wrap;}
    .navbar-custom .h-btns .btn {
  
        min-width: 100% !important;
    }

.hero-slider .item img, .hero-slider2 .item img {
        height: 250px;
    }
    .chip {
  
    font-size: 10px;
    margin: .2rem .25rem;
}

}