/* =========================
   TOUR CATEGORIES GRID
========================= */


.ecg-grid{

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

}



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


.ecg-card{

height:330px;

position:relative;

overflow:hidden;

background-size:cover;

background-position:center;

display:flex;

align-items:flex-end;


/* Etoile marocaine 8 coins */

clip-path:polygon(
50% 0%,
61% 14%,
86% 14%,
86% 39%,
100% 50%,
86% 61%,
86% 86%,
61% 86%,
50% 100%,
39% 86%,
14% 86%,
14% 61%,
0% 50%,
14% 39%,
14% 14%,
39% 14%
);


transition:.4s ease;

}

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


.ecg-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

to top,

rgba(0,0,0,.80),

rgba(0,0,0,.15)

);


z-index:1;

}






/* =========================
   CONTENT
========================= */


.ecg-content{

position:relative;

z-index:3;

color:white;

padding:35px 25px;

text-align:center;

width:100%;

}




.ecg-content h3{

font-size:18px;

line-height:1.2;

font-weight:700;

text-transform:uppercase;

color:white;

margin:0 0 12px;


}




.ecg-count{

display:block;

font-size:15px;

color:white;

opacity:.95;

margin-bottom:20px;

}



.ecg-count i{

margin-right:6px;

}







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


.ecg-button{

display:inline-flex;

align-items:center;

gap:8px;

padding:5px 5px;

background:none;

color:white;

border-radius:50px;

font-size:12px;

font-weight:600;

text-decoration:none;

transition:.3s ease;

}




.ecg-button:hover{

background:none;

color:#e67e22;

}







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


.ecg-card:hover{

transform:

translateY(-10px)

scale(1.03);


box-shadow:

0 20px 45px rgba(0,0,0,.25);

}






/* =========================
   TABLET
========================= */


@media(max-width:900px){


.ecg-grid{

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

}



.ecg-card{

height:330px;

}


}






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


@media(max-width:600px){


.ecg-grid{

grid-template-columns:1fr;

gap:25px;

}



.ecg-card{

height:320px;

}



.ecg-content h3{

font-size:16px;

}



}