/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}



html{
    scroll-behavior:smooth;
}



body{

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    background:#050505;

    color:white;

}



/* =========================
   HEADER
========================= */


header{

    padding:20px;

    text-align:center;

    background:#000;

    border-bottom:
    2px solid #ff2e63;

}



.logo{

    font-size:28px;

    font-weight:800;

    color:#ff2e63;

}





/* =========================
   HERO
========================= */


.hero{

    padding:80px 20px;

    text-align:center;

    background:
    linear-gradient(
        135deg,
        #ff0055,
        #ff0000,
        #ff7b00
    );


    background-size:300% 300%;

    animation:
    gradient 8s infinite;

}



.hero h1{

    font-size:42px;

    margin-bottom:15px;

}



.hero p{

    font-size:18px;

    opacity:.9;

}





@keyframes gradient{


0%{

background-position:
0% 50%;

}


50%{

background-position:
100% 50%;

}


100%{

background-position:
0% 50%;

}


}





/* =========================
   CONTAINER
========================= */


.container{

    max-width:1200px;

    margin:auto;

    padding:30px 20px;

}







/* =========================
   CARD GRID
========================= */


.cards{


display:grid;


grid-template-columns:
repeat(
auto-fit,
minmax(260px,1fr)
);


gap:25px;


}






.card-link{

    text-decoration:none;

    color:white;

    display:block;

}







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


.card{


background:#111;


border-radius:20px;


overflow:hidden;


position:relative;


border:
1px solid #222;


transition:.4s;


}



.card:hover{


transform:
translateY(-12px)
scale(1.03);


box-shadow:

0 0 25px

rgba(255,0,80,.7);


}






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


.card img{


width:100%;


height:320px;


object-fit:contain;


background:#000;


display:block;


transition:.5s;


}



.card:hover img{


transform:
scale(1.04);


}






/* =========================
   ONLINE BADGE
========================= */


.online{


position:absolute;


top:15px;


left:15px;


background:#00ff88;


color:#000;


padding:

6px 12px;


border-radius:20px;


font-size:12px;


font-weight:bold;


z-index:2;


}






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


.card-content{


padding:20px;


}




.card-content h3{


font-size:21px;


margin-bottom:10px;


}





.location{


color:#bbb;


margin-bottom:18px;


font-size:14px;


}





/* =========================
   BUTTONS
========================= */


.buttons{


display:flex;


gap:10px;


}




.buttons button{


flex:1;


padding:12px;


min-height:44px;


border:none;


border-radius:12px;


color:white;


font-weight:bold;


cursor:pointer;


}




.buttons button:focus{


outline:

2px solid white;


}



.videoBtn{


background:#ff365d;


}




.chatBtn{


background:#25D366;


}







/* =========================
   FOOTER
========================= */


footer{


text-align:center;


padding:30px;


color:#888;


}







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


@media(max-width:900px){


.cards{


grid-template-columns:

repeat(2,1fr);


}


}








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


@media(max-width:600px){



.hero{

padding:60px 20px;

}



.hero h1{


font-size:30px;


}



.hero p{


font-size:16px;


}



.cards{


grid-template-columns:

1fr;


}



.card img{


height:300px;


}



.card-content{


padding:15px;


}



.card-content h3{


font-size:19px;


}



}