#aircraft-showcase{

display:flex;

gap:70px;

align-items:flex-start;

}

#aircraft-content{
    padding:0;
    width: 70%;
}

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

.aircraft-panel {
            margin:auto;
            padding:0;
            font-family:'Inter', sans-serif;
            border-radius: 4px;
        }

.aircraft-header {
    display:grid;
    grid-template-columns: 1fr;
    gap:25px;
    align-items:start;
    padding-left: 20px;
}

.aircraft-panel-body{
    background: #FBF8F4;
    padding: 20px 40px 40px 40px;
} 

/* Intro */

.aircraft-eyebrow {
    color:#B7833F;
    font-size:14px;
    font-weight:700;
}


.aircraft-intro h2 {
    font-family:"Cormorant Garamond", serif;
    font-size:36px;
    font-weight:500;
    margin:15px 0;
    color: #B7833F
}


.aircraft-intro p {

    max-width:650px;
    font-size:15px;
    line-height:1.5;
    color:#333;

}



/* Feature Pills */

.aircraft-features {

    display:flex;
    gap:10px;
    margin-top:15px;

}


.aircraft-features span {

    background:#F3EEE7;
    border-radius:20px;
    padding:10px 15px;
    text-align:center;
    font-size:13px;
    line-height:1.1;

}



/* Featured Card */

.featured-aircraft {

    background:#101820;
    padding:10px;
    color:white;
    border-radius: 4px;
    width: 100%;
}


.aircraft-hero img {

    width:100%;
    height:150px;
    object-fit:cover;
    border-radius: 4px;

}

.divider{
background: #D8AE72;
    position: relative;
    height: 2px;
    width: 90%;
    bottom: -4px;
    left: 13px;
}


.featured-aircraft h3 {

    font-size:15px;
    margin:12px 0 5px;
    text-align: center;
}

/* Aircraft Cards */

.aircraft-grid {

    margin-top:30px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;

}

.aircraft-card {

    background:white;
    border-radius: 4px;

}

.card-image {
    position:relative;
    overflow:hidden;

}

.card-image img {

    width:100%;
    height:100%;
    object-fit:cover;
    aspect-ratio: 16/9;

}

.aircraft-card  .card-body{
    padding: 10px 20px;
}

.aircraft-card > .card-body h3 {
    font-size:15px;
    line-height:1.3;
    color:#1B1815;
    font-family: "Inter", sans-serif;
    font-weight: 700;
}

.aircraft-card > .card-body p {
    font-size:14px;
    line-height:1.3;
    color:#4C453F;
}


/* Tablet */

@media(max-width:1024px){
    
    .aircraft-grid {
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:900px){

    .aircraft-header {

        grid-template-columns:1fr;

    }

    .aircraft-features {

        flex-wrap: wrap;

    }


    .featured-aircraft {

        max-width:350px;

    }


    .aircraft-grid {
        grid-template-columns:repeat(2,1fr);
    }


}



/* Mobile */

@media(max-width:600px){


    .aircraft-panel {

        padding:30px 20px;

    }


    .aircraft-intro h2 {

        font-size:32px;

    }


    .aircraft-grid {

        grid-template-columns:1fr;

    }


    .card-image {

        height:210px;

    }


    .featured-aircraft {

        width:100%;

    }

}


/* ====== Sidebar ============== */

.aircraft-sidebar{

    /* max-width:320px; */
    width: 30%;
    position:sticky;
    top:120px;
    background: #0B1720;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    border-radius: 4px;
    padding: 20px 30px 50px 30px;
    gap:2px;
}

.aircraft-sidebar h3{
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.4em;
    color: #FFF;
    text-align: left;
}

.aircraft-sidebar p{
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4em;
    color: #B8B0A6;
    margin-bottom: 20px;
}

.aircraft-tab{

    display:flex;
    justify-content:space-between;
    align-items:center;
    width:90%;
    padding: 10px 15px;
    border:none;
    /* border-bottom:1px solid #E5E5E5; */
    background: rgba(11,23,32,0) !important;
    cursor:pointer;
    transition:.3s;
    font-size:15px;
    font-weight:400;
    color: #F3EEE7;
}

.aircraft-tab:hover{

    background: #D8AE72 !important;
    color: rgba(11,23,32,1);
}

.aircraft-tab.active{

    background:#B7833F !important;
    color:#fff;
    font-weight:700;

}

.aircraft-tab:hover::after{
    content: '→';
    /* font-size:22px; */
    transition:.3s;
}

.aircraft-tab.active::after{
    content: '→';
    /* font-size:22px; */
    transition:.3s;
}

.tab-arrow{

    font-size:22px;

    transition:.3s;

}

.aircraft-tab.active .tab-arrow{

    transform:translateX(6px);

}

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

.aircraft-desktop{
    display:flex;
    gap: 40px;
    align-items: flex-start;
}

/* Hide mobile on desktop */
.aircraft-mobile{
    display:none;
}

.mobile-accordion-item{

    border-bottom:1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    margin: 10px 0;

}

.mobile-accordion-header{
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px 0;
    cursor:pointer;
    background: #12202A;
    padding:0;
}

.mobile-thumb{
    width:30%;
    flex:none;
    height: 106px;
}

.mobile-thumb img{
    width:100%;
    height:70px;
    object-fit:cover;
    border-radius:10px;
}

.mobile-info{
    flex:1;
    padding: 16px 5px;
}

.mobile-info h3{
    margin:0 0 6px;
    font-size:18px;
    color: #fff;
}

.mobile-info p{
    margin:0;
    font-size:15px;
    opacity:.7;
    line-height:1.5;
    color: #B8B0A6;
}

.mobile-icon{
    width:28px;
    height:28px;
    border-radius:50%;
    background:#B68A43;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    margin-right: 15px;
}

.mobile-accordion-content{

    padding:15px;
    background: #FBF8F4;

}

@media(max-width:1024px){
    .aircraft-sidebar{
        padding: 10px 20px;
    }
}

@media(max-width:880px){
    .aircraft-desktop{
        gap: 20px;
    }

    .aircraft-sidebar{
        padding: 10px 15px;
    }

    .aircraft-sidebar h3{
        font-size: 24px;
        line-height: 1.2em;
    }

}

@media(max-width:768px){

    .aircraft-desktop{
        display:none;
    }

    .aircraft-mobile{
        display:block;
        width: 100%;
    }

    .mobile-active-card{
        display: none;
        /* background:#111C27;
        border-radius:14px;
        padding:18px;
        display:flex;
        gap:18px;
        margin-bottom:30px; */
    }

    .mobile-active-image{
        width:120px;
        flex:none;
    }

    .mobile-active-image img{
        width:100%;
        height:90px;
        object-fit:cover;
        border-radius:10px;
    }

    .mobile-active-content{
        color:#fff;
    }

    .mobile-active-content h2{
        font-size:22px;
        margin-bottom:10px;
    }

    .mobile-active-content p{
        opacity:.85;
        line-height:1.5;
        font-size:14px;
    }

    .mobile-section-title{
        margin:30px 0 15px;
        font-size:14px;
        letter-spacing:.1em;
        font-family: "Inter", sans-serif;
        text-transform:uppercase;
    }


    .mobile-cards {
        display: flex;
        overflow-x: auto;
        gap: 20px;
        padding: 10px 0 20px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mobile-cards .card-image{
        height: auto !important;     
        font-size: 15px;
    }

    .mobile-cards::-webkit-scrollbar {
        display: none;
    }

    .mobile-cards .aircraft-card {
        flex: 0 0 37%;
        scroll-snap-align: start;
    }


    .mobile-category-item{
        display:flex;
        align-items:center;
        gap:15px;
        padding:18px 0;
        border-bottom:1px solid rgba(255,255,255,.08);
        cursor:pointer;
    }

    .mobile-thumb{
        width:30%;
        flex:none;
    }

    .mobile-thumb img{
        width:100%;
        height: 110px !important;
        object-fit:cover;
        border-radius:8px;
    }

    .mobile-info{
        flex:1;
    }

    .mobile-info h3{
        margin-bottom:6px;
        font-size:18px;
    }

    .mobile-info p{
        font-size:14px;
        line-height:1.5;
        opacity:.7;
    }

    .mobile-expand{
        width:28px;
        height:28px;
        border-radius:50%;
        background:#B68A43;
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:18px;
    }
}