/* RESET */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Zalando Sans Expanded", "Ubuntu", Helvetica, Arial, sans-serif;
}
#countryCode,
#countryCode option,
#countryList,
#countryList option {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
}


body{
    background:#1a1a1a;
    color:#fff;
}

/* HERO */
.hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    z-index: 1;
}

.hero-bg{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:brightness(60%);
}

.top-nav{
    position:absolute;
    top:20px;
    width:100%;
    padding:0 40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo img{
    height:50px;
}

.contact-btn{
    padding:8px 16px;
    background:rgba(255,255,255,0.2);
    border-radius:4px;
    color:#fff;
    text-decoration:none;
}



.breadcrumbs {
    color: #4cadad;
    position: absolute;
    top: 90px;
    left: 40px;
    font-size: 14px;
    opacity: .9;
    z-index: 10; /* IMPORTANT: keeps it above the background */
}
.card-right a {
    text-decoration: none !important;
    color: #fff;
}

.card-right a:hover {
    opacity: 0.7;
}

.breadcrumbs a {
    color: #4cadad;
    text-decoration: none;
}

.breadcrumbs a:visited {
    color: #4cadad !important;
}

.breadcrumbs a:hover {
    opacity: 0.7;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
    max-width: 500px;
    z-index: 5;  /* CONTENT ALWAYS ABOVE GRADIENT */
}


.hero-content h1{
    font-size:50px;
    margin-bottom:15px;
    color: #4cadad;
     max-width: 466px;   /* Adjust width to force wrapping */
    white-space: normal;
}
@media (min-width: 1025px) {
    .hero-content {
        max-width: 900px;   /* increase width for single-line heading */
    }

    .hero-content h1 {
        font-size: 58px;    /* bigger desktop heading */
        white-space: nowrap; /* keep text on one line */
    }
}
.hero-content p{
    font-size:18px;
    margin-bottom:25px;
}

.hero-btns .btn{
    display:inline-block;
    background:#3c3c3c;
    padding:10px 20px;
    margin-right:10px;
    border-radius:5px;
    text-decoration:none;
    color:#fff;
}

.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;
    background: linear-gradient(
        to bottom,
        rgba(26,26,26,0) 0%,
        rgba(26,26,26,0.4) 40%,
        rgba(26,26,26,0.75) 70%,
        rgba(26,26,26,1) 100%
    );
    pointer-events: none;
    z-index: 0; /* PUT BEHIND EVERYTHING */
}


@media (max-width: 1024px) {
    .hero {
        aspect-ratio: auto;
        height: auto;
        min-height: 450px;  /* safe workable height */
    }

    .hero-bg {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
@media (max-width: 768px) {
    .hero-content {
        top: auto;
        bottom: 30px;
        left: 20px;
        transform: none;
        max-width: 80%;
    }

    .hero-content h1 {
        font-size: 26px;
        line-height: 1.2;
    }

    .hero-content p {
        font-size: 16px;
    }

    .hero-btns .btn {
        display: inline-block;
        margin-bottom: 8px;
        padding: 8px 16px;
    }
}
/* ============= HERO MOBILE FIX ============= */
@media (max-width: 768px) {

    .hero {
        height: 480px;      /* fixed safe height for mobile */
        aspect-ratio: auto; /* remove forced 16:9 */
    }

    .hero-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Logo */
    .top-nav {
        padding: 0 20px;
        top: 15px;
    }

    .logo img {
        height: 38px;
    }

    /* Breadcrumbs */
    .breadcrumbs {
        top: 65px;
        left: 20px;
        font-size: 12px;
    }

    /* HERO CONTENT FIX */
    .hero-content {
        bottom: 40px;
        top: auto;
        transform: none;
        left: 20px;
        right: 20px;
        max-width: 100%;
    }

    .hero-content h1 {
        font-size: 26px;
        line-height: 1.2;
        max-width: 100%;
        white-space: normal;
    }

    .hero-content p {
        font-size: 15px;
        margin-bottom: 18px;
    }

  .hero-btns .btn {
    display:inline-block;
    background:#3c3c3c;
    padding:10px 20px;
    margin-right:10px;
    border-radius:5px;
    text-decoration:none;
    color:#fff;
    transition: color 0.3s ease;
}

/* Hover for desktop + all devices */
.hero-btns .btn:hover {
    color:#4cadad;
}

}
/* Base button */
.hero-btns .btn {
    display: inline-block;
    background: #3c3c3c;         /* normal background */
    padding: 10px 20px;
    margin-right: 10px;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;                 /* normal text color */
    transition: all 0.3s ease;   /* smooth background + text transition */
}

/* Hover effect (desktop + mobile, everywhere) */
.hero-btns .btn:hover {
    background: #4cadad;         /* hover background color */
    color: #1a1a1a;              /* hover text color (black/dark) */
}
/* EXTRA SMALL SCREENS */
@media (max-width: 480px) {

    .hero {
        height: 420px;
    }

    .hero-content h1 {
        font-size: 22px;
    }

    .hero-content p {
        font-size: 14px;
    }

    .breadcrumbs {
        font-size: 11px;
    }
}
.hero-bg-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0; /* stays behind content */
}

.hero-bg-slider img.hero-bg {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    filter: brightness(60%);
}

.hero-bg-slider img.active {
    opacity: 1;
}

.business-heading {
    font-size: 28px;
    font-weight: 700;
    color: #4cadad;      /* match your theme */
    margin-bottom: 18px;
    text-align: left;
    width: 100%;
}
@media (max-width: 600px) {
    .business-heading {
        font-size: 22px;
        text-align: center;
    }
}

.app {
    background-color: #000000;
    /* background-image: url(/images/Applications-Vector.png); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-bottom: 100px;
}

.app h1 {
    text-align: center;
    color: #fff;
    font-size: 2.3rem;
    font-weight: 600;
    padding: 1.5rem 0;
}

.cards_wrap {
    padding: 10px 5%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    align-content: space-around;
    flex-wrap: wrap;
}

.cards_wrap .card_item {
    padding: 30px;
    width: 25%;
}

.cards_wrap .card_inner {
    /* background-color: #00726a; */
    /* background: radial-gradient(50% 50% at 50% 50%, #564f4f 0%, #333 100%); */
    width: 110%;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 40px;
}
 
.card_inner:hover img {
    transform: scale(1.1);
}

.cards_wrap .card_item img {
    display: block;
    margin: 27px auto;
    width: 100%;
}

.cards_wrap .card_item .role_name {
    color: #ffffff;
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

@media screen and (max-width: 1024px) {
    .cards_wrap .card_item {
        width: 33.33%;
    }
}

@media screen and (max-width: 768px) {

    .cards_wrap {
        justify-content: center;
    }

    .cards_wrap .card_item {
        width: 45%;
        /* Two cards per row */
        margin-bottom: 2rem;
    }

    .app h1 {
        font-size: 1.5rem;
    }

    .cards_wrap .card_inner {
        width: 104%;
        /* height: 30rem; */
    }
}

@media screen and (max-width: 568px) {
    .cards_wrap .card_item {
        width: 100%;
    }
}

@media screen and (max-width: 375px) {
    .cards_wrap .card_inner {
        width: 104%;
        /* height: 22rem; */
    }

    .cards_wrap .card_item .role_name {
        font-size: 15px;
    }
}
/* ==============================
   LION + MILITARY SECTION FIX
============================== */

.ideal-military-wrapper {
    padding: 80px 8%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    background: #1a1a1a;
    flex-wrap: wrap;
}

.ideal-image-section {
    flex: 1;
    text-align: center;
}

.ideal-img {
    width: 100%;
    max-width: 420px;
    border-radius: 10px;
}

.ideal-caption {
    margin-top: 15px;
    font-size: 20px;
    font-weight: 600;
    color: #4cadad;
}

.military-card-section {
    flex: 1;
    max-width: 650px;
}
.military-card{
    width:100%;
    max-width:680px;
    background:url('images/camo-strip4.png') center/cover no-repeat;
    display:flex;
    align-items:center;
    padding:42px;
    gap:30px;
    border-radius:14px;
    box-shadow:0 8px 26px rgba(0,0,0,0.5);
}
.military-card-section{
    flex: 1;
    max-width: 600px;
}
.military-card .card-left img{
    width:150px;
    height:185px;
    border-radius:6px;
    object-fit:cover;
}

.military-card .card-right h3{
    font-size:26px;
    font-weight:700;
    margin-bottom:6px;
}
.military-card .role{
    font-size:18px;
    margin-bottom:12px;
    opacity:.9;
}
.military-card .line{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:18px;
    margin-bottom:8px;
}
.military-card .icon{
    font-size:20px;
}

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

    .ideal-military-wrapper {
        flex-direction: column;
        gap: 50px;
        padding: 60px 20px;
    }

    .form-row {
        flex-direction: column;
    }

    .lion-bottom img {
        max-width: 400px;
        width: 100%;
    }
}
/* Tablet */
@media (max-width:900px){
    .ideal-military-wrapper{
        flex-direction:column;
    }

    .military-card{
        padding:30px;
        gap:20px;
        flex-direction:column;
        text-align:center;
    }

    .military-card .card-left img{
        width:130px;
        height:160px;
    }
}

/* Mobile */
@media (max-width:600px){
    .military-card{
        padding:25px;
    }
    .military-card .card-left img{
        width:140px;
        height:160px;
        margin:auto;
    }
    .military-card .line{
        justify-content:center;
    }
}

/* Small Phones */
@media (max-width:420px){
    .military-card{
        padding:20px;
    }
    .military-card .card-left img{
        width:120px;
        height:150px;
    }
    .military-card .line{
        font-size:15px;
    }
}
/* Tablet */
@media (max-width: 900px) {
    .ideal-military-wrapper {
        flex-direction: column;
        gap: 60px;
        text-align: center;
    }

    .military-card {
        flex-direction: column;
        text-align: center;
    }

    .military-card .line {
        justify-content: center;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .ideal-img {
        max-width: 300px;
    }
}