body,html{
    margin:0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
}

/* navbar*/
#nav{
    height:100px;
    padding:0 60px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #eee;
}

/*left*/
.nav-left{
    display:flex;
    align-items:center;
    gap:40px;
}

.nav-left img{
    height:35px;
}

/* links */
#links{
    display:flex;
    gap:30px;
    font-size:16px;
}

#links p{
    cursor:pointer;
}

/*right*/
.nav-right{
    display:flex;
    gap:14px;
    font-family: Arial, Helvetica, sans-serif;
}

button{
    padding:10px 18px;
    border-radius:20px;
    border:none;
    cursor:pointer;
}

.signup{
    background:transparent;
}

.login{
    background:black;
    color:white;
}


/*videos*/
body{
    margin:0;
    background:#f3f3f3;
    font-family: Arial, Helvetica, sans-serif;
}

/* SECTION WRAPPER */
#showcase{
    padding:0px;
    display:flex;
    justify-content:center;
    width:100%;
}

/* VIDEO STACK CONTAINER */
.video-slider{
    width:100%;
    height:100%;
    position:relative;
}

/* ALL VIDEOS STACKED */
.hero-video{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:20px;

    opacity:0;
    filter:blur(8px);
    transition:opacity 1s ease, filter 1s ease, transform 0.5s ease;
}

/* VISIBLE VIDEO */
.hero-video.active{
    opacity:1;
    filter:blur(0);
}

/* SUBTLE ZOOM ON HOVER */
.video-frame:hover .hero-video.active{
    transform:scale(1.03);
}

/* CREATOR BADGE */
.creator{
    position:absolute;
    bottom:20px;
    right:20px;
    background:white;
    padding:8px 16px;
    border-radius:40px;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:0 5px 20px rgba(0,0,0,0.25);
    font-weight:600;
}

/* CIRCLE LOGO */
.creator-logo{
    width:32px;
    height:32px;
    background:black;
    color:white;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
}

.hero{
    width: 100%;
    height: 65vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60px 80px;
    box-sizing: border-box;
}

.hero-left{
    width: 50%;
}

.heading{
    font-size: 72px;
    line-height: 1.05;
    font-weight: 700;
}

.hero-right{
    width: 52%;
    display: flex;
    justify-content: center;
    
}

/* BIG DARK ROUNDED FRAME */
.video-frame{
    width:100%;
    height:450px;
    background: black;
    border-radius:30px;
    position:relative;
    overflow:hidden;
}

.pause-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    transition: background 0.3s;
}

.pause-btn:hover {
    background: rgba(29, 26, 26, 0.35);
}

.para{
    font-size:18px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 25px 0;
    gap: 0px;
}

#search {
    padding: 10px 80px; 
}
#search p {
    margin: 0;
    font-size: 14px;
    color: #666;
}
.search-bar{
    justify-content: center;
    display: flex;
    align-items: center;
    background: #f0f0f0;
    border-radius: 50px;
    padding: 10px 10px 10x 20px;
    width: 600px;
    margin: 30px 80px;
    gap: 10px;
    margin-top: -50px;
}

.search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    outline: none;
    color: #333;
}

.search-divider {
    width: 1px;
    height: 25px;
    background: #ccc;
}

.search-type {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
}

.search-btn {
    background: #ea4c89;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

.search-btn:hover {
    background: #d4407a;
}

.search{
    display: flex;
    align-items: center;
    gap: 16px;  
    margin: 10px 80px;
    background-color: lightgray;
   flex-wrap: wrap;
   
}
#tags {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0px 60px 16px 60px;
    flex-wrap: wrap;
}

#tags button {
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 7px 16px;
    background: transparent;
}

#tags button {
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 7px 16px;
    background: transparent;
}
.tags span {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    padding-right: 80px;
}

.tags{
     background: transparent;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 14px;
    cursor: pointer;
    color: #333;
    transition: all 0.2s;
} 

/*middle*/
#middle{
    display: flex;
    align-items: center;
    gap: 24px;
    border-top: 1px solid #eee;    
    border-bottom: 1px solid #eee; 
    padding: 16px 60px;
    justify-content: space-between;
}

#middle button {
    background: transparent;
    border: none;
    font-size: 15px;
    color: #666;
    font-weight: 500;
    padding: 4px 0;
    border-radius: 0;
    gap:15px;
}

#last {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 14px;
    cursor: pointer;
    margin-left: auto;
}

/*card part*/
.cards-container{
  margin-top:60px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:25px;
  padding:40px;
}

.card{
  background:white;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 5px 20px rgba(0,0,0,0.08);
  transition:0.3s;
  cursor:pointer;
}

.card:hover{
  transform:translateY(-6px);
}

.card img{
  width:100%;
  height:220px;
  object-fit:cover;
}
.card-info{
  padding:18px;
}

.card-info h3{
  margin:0;
  font-size:18px;
}

.card-info p{
  color:#777;
  margin:6px 0 12px;
}

.card-stats{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  color:#555;
}

/*footer*/
footer {
    border-top: 1px solid #eee;
    padding: 30px 60px;
    margin-top: 60px;
}

.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.footer-top img {
    height: 30px;
}

.footer-links {
    justify-content: center;
    display: flex;
    gap: 30px;
    padding:15px;
}

.footer-links a {
    text-decoration: none;
    color: #333;
    font-size: 15px;
}

.footer-links a:hover {
    color: #ea4c89;
}

.footer-socials {
    display: flex;
    gap: 16px;
    font-size: 20px;
    cursor: pointer;
}

.footer-socials i:hover {
    color: #ea4c89;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.footer-bottom-left {
    display: flex;
    gap: 16px;
    color: #999;
    font-size: 13px;
}

.footer-bottom-left a {
    text-decoration: none;
    color: #999;
}

.footer-bottom-right {
    display: flex;
    gap: 16px;
}

.footer-bottom-right a {
    text-decoration: none;
    color: #999;
    font-size: 13px;
}

.footer-bottom-right a:hover,
.footer-bottom-left a:hover {
    color: #333;
}