.metro-smart {

    direction: rtl;

}



/* ================= CARD BASE ================= */

.metro-card {

    position: relative;

    border-radius: 6px;

    overflow: hidden;

    background: #000;

    transform: translateZ(0);

    transition: all 0.35s ease;

}



/* ================= IMAGE ================= */

.metro-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.6s ease, filter 0.6s ease;

}



/* ================= OVERLAY ================= */

.metro-overlay {

    position: absolute;

    bottom: 0;

    width: 100%;

    padding: 15px;

    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);

    color: #fff;

    top:0;

    -webkit-transition: all 0.3s ease;                  

    -moz-transition: all 0.3s ease;                 

    -o-transition: all 0.3s ease;   

    -ms-transition: all 0.3s ease;          

    transition: all 0.3s ease;

    display:flex;

    align-items: flex-end;

}



.metro-overlay h3 a {

    color: #fff;

    text-decoration: none;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    display: flex;

    align-items: flex-end;

    padding: 20px;

    font-size:16px;

    font-family: 'irnsxv';

    font-variation-settings: "wght" 500, "DOTS" 7;

}



/* ================= CATEGORY ================= */

.metro-category a{

    margin-top: 6px;

    font-size: 12px;

    opacity: 0.85;

    display: inline-block;

    padding: 3px 10px;

    border-radius: 20px;

    position: absolute;

    top:3px;

    background: rgba(30,30,30,0.3);

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

color:#fff;

    transition: all 0.3s ease;

}



/* ================= MODERN HOVER EFFECT ================= */



/* card lift */

.metro-card:hover {

    transform: translateY(0px) scale(1.001);

    box-shadow: 0 4px 8px rgba(100,100,100,0.1);

}



/* image zoom + enhance */

.metro-card:hover .metro-img {

    transform: scale(1.08);

    filter: brightness(1.15) contrast(1.1);

}



/* overlay stronger on hover */

.metro-card:hover .metro-overlay {

    background: linear-gradient(

        to top,

        rgba(0,0,0,0.6),

        rgba(0,0,0,0.2),

        transparent

    );

}





/* title animation */

.metro-overlay h3 {

    -webkit-transition: all 0.3s ease;                  

    -moz-transition: all 0.3s ease;                 

    -o-transition: all 0.3s ease;   

    -ms-transition: all 0.3s ease;          

    transition: all 0.3s ease;

    margin:0;

}





/* category hover effect */

.metro-card:hover .metro-category {

    background: rgba(30,30,30,0.4);

    opacity: 1;

}



/* ================= HEIGHT SYSTEM ================= */



/* HERO */

.metro-hero {

    height: 100%;

}



/* MEDIUM + SMALL */

.metro-medium,

.metro-small {

    height: 250px;

}



/* ================= CTA BUTTON ================= */

.metro-all-btn {

    background: #999999;

    color: #fff;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;



    border-radius: 12px;

    font-weight: bold;



    transition: all 0.3s ease;

}



.metro-all-btn:hover {

    background: #00A082;

    box-shadow: 0 5px 10px rgba(13,110,253,0.1);

        color: #fff;

}



/* ================= MOBILE CAROUSEL ================= */

.metro-mobile {

    display: none;

}



.metro-carousel {

    display: flex;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    gap: 12px;

    padding-bottom: 10px;



    -webkit-overflow-scrolling: touch;

}



.metro-slide {

    flex: 0 0 85%;

    scroll-snap-align: center;

}

.metro-slide.listar {

    flex: 0 0 50%;

    scroll-snap-align: center;

}

.metro-mobile-card {

    height: 300px;

}



/* ================= RESPONSIVE ================= */



@media (min-width: 993px) {



.metro-overlay.topart h3 a {

    font-size:26px;

    font-variation-settings: "wght" 600, "DOTS" 7;

}

}



/* TABLET */

@media (max-width: 992px) {



    .metro-hero {

        height: 400px;

    }



    .metro-medium,

    .metro-small {

        height: 200px;

    }

}



/* MOBILE */

@media (max-width: 768px) {



    .metro-desktop {

        display: none;

    }



    .metro-mobile {

        display: block;

    }



    .metro-mobile-card {

        height: 320px;

    }

    .metro-mobile-card.listmb {

        height: 200px;

    }

}

/* ================= BASE ================= */

.list-6-column {

    direction: rtl;

}



/* ================= CARD BASE ================= */

.list-6-column-card {

    position: relative;

    border-radius: 6px;

    overflow: hidden;

    background: #000;

    transform: translateZ(0);

    transition: all 0.35s ease;

}



/* ================= IMAGE ================= */

.list-6-column-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.6s ease, filter 0.6s ease;

}



/* ================= OVERLAY ================= */

.list-6-column-overlay {

    position: absolute;

    inset: 0;

    padding: 15px;

    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);

    color: #fff;

    display: flex;

    align-items: flex-end;

}



.list-6-column-overlay h3 {

    margin: 0;

    transition: all 0.3s ease;

}



.list-6-column-overlay h3 a {

    color: #fff;

    text-decoration: none;

    font-size: 16px;

    font-family: 'irnsxv';

    font-variation-settings: "wght" 500, "DOTS" 7;



    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    padding: 20px;

}



/* ================= HOVER EFFECT ================= */

.list-6-column-card:hover {

    transform: translateY(0px) scale(1.01);

    box-shadow: 0 4px 10px rgba(0,0,0,0.15);

}



.list-6-column-card:hover .list-6-column-img {

    transform: scale(1.08);

    filter: brightness(1.15) contrast(1.1);

}



.list-6-column-card:hover .list-6-column-overlay {

    background: linear-gradient(

        to top,

        rgba(0,0,0,0.6),

        rgba(0,0,0,0.2),

        transparent

    );

}



/* ================= CATEGORY (optional if used later) ================= */

.list-6-column-category a {

    font-size: 12px;

    opacity: 0.85;

    display: inline-block;

    padding: 3px 10px;

    border-radius: 20px;

    background: rgba(30,30,30,0.3);

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

    color: #fff;

    transition: all 0.3s ease;

}



/* ================= DESKTOP 6 COLUMN SYSTEM ================= */

.list-6-column-desktop .col-lg-2 {

    flex: 0 0 auto;

    width: 16.6666667%; /* 6 columns */

}



/* ================= HEIGHT SYSTEM ================= */

.list-6-column-card {

    height: 260px;

}



/* ================= MOBILE CAROUSEL ================= */

.list-6-column-mobile {

    display: none;

}



.list-6-column-carousel {

    display: flex;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    gap: 12px;

    padding-bottom: 10px;

    -webkit-overflow-scrolling: touch;

}



.list-6-column-slide {

    flex: 0 0 85%;

    scroll-snap-align: center;

}



.list-6-column-slide.listar {

    flex: 0 0 50%;

}



/* ================= MOBILE CARD ================= */

.list-6-column-mobile-card {

    height: 300px;

}



/* ================= RESPONSIVE ================= */



/* TABLET */

@media (max-width: 992px) {



    .list-6-column-card {

        height: 220px;

    }

}



/* MOBILE */

@media (max-width: 768px) {



    .list-6-column-desktop {

        display: none;

    }



    .list-6-column-mobile {

        display: block;

    }



    .list-6-column-mobile-card {

        height: 200px;

    }

}



/* ================= OPTIONAL: BIG TITLE MODE ================= */

@media (min-width: 993px) {

    .list-6-column-overlay h3 a {

        font-size: 20px;

        font-variation-settings: "wght" 600, "DOTS" 7;

    }

}