:root {
  --gold-primary: #D4AF37;
            --gold-light: #F9E076;
            --gold-dark: #AA8A2E;
            --bg-dark: #111827;
            --card-bg: #1f2937;
            --border-color: #374151;
            --text-main: #f3f4f6;
            --text-muted: #9ca3af;
            --text-tiny: #6b7280;
        }
body
{
            background-color: #020617;
            background-image: linear-gradient(to bottom, #0f172a, #020617);
            background-attachment: fixed;
            color: #f8fafc;
            font-family: 'Inter', sans-serif;
            min-height: 100vh;
            margin: 0;
            -webkit-font-smoothing: antialiased;
}
.home_div_mob{display:none;}
.home_div
{
float:left;width:100%;height:70px;position:fixed;top:0;display:flex;justify-content:space-around;align-items:center;z-index:21;
     background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);backgroundk:red;
}
.position_div
{
float:left;width:100%;height:70px;
}
.logo_txtA
{
width:20%;height:40px;line-height:40px;color:#fff;backgroundk:purple;
            font-weight: 900;
            letter-spacing: -0.05em;
            text-transform: uppercase;
            font-size: 1.5rem;
			
}
.logo_txtB
{
	color:gold;
}
.sub_home_div{
float:left;width:30%;height:40px;display:flex;justify-content:space-around;align-items:center;font-size:14px;font-weight:bold;
}
.home_btn
{
color: #f8fafc;text-decoration:none;font-weight:700;font-size:1em;	
}
.home_btn:hover{color:gold;}
.search_div
{
float:left;width:30%;height:45px;background:#fff;display:flex;justify-content:space-around;align-items:center;border-radius:30px;

}
.search_input
{
float:left;width:85%;height:35px;outline:none;border:0px;text-align:center;border-radius:20px;font-size:1em;
}
.clear_search_input_btn_mob{display:none}
.clear_search_input_btn
{
float:left;width:10%;height:35px;line-height:35px;backgroundk:green;border-radius:50%;outline:none;border:0;font-size:1.2em;text-align:center;color:#000;cursor:pointer;	
display:block;
}
.subscribe_btn
{
 float:left;height:40px;background:gold;color:#000;border-radius:10px;cursor:pointer; 	
}
.subscribe_btn:hover{color:red;}
.profile_div
{
float:left;width:40px;height:40px;line-height:40px;text-align:center;border-radius:50%;background:gold;color:#000;overflow:hidden;	
}
.profile_img
{
float:left;width:40px;height:40px;
}



        /* Hero Banner */
        .hero_banner {
            height: 65vh;
            position: relative;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            padding: 0 3rem;
            margin-bottom: 2rem;
			background:red;
        }

        .hero_overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, #020617 20%, transparent 100%),
                        linear-gradient(to top, #020617 0%, transparent 30%);
        }
.banner_txtA
{
color:#fff;font-size:3em;
}
.banner_txtB
{
color:gold;	
}
.sub_banner_div
{
position:relative;z-index:20;	
}
.watch_now_btn
{
width:150px;background:gold;color:#000;paddingk:8px;border-radius:10px;display:flex;align-items:center;
}
.watch_now_btn_svg
{
width:40px;height:40px;	
}
.watch_list_btn
{
float:left;width:150px;height:40px;background:#ededed;color:#000;paddingk:8px;border-radius:10px;display:flex;align-items:center;display:none;
}

        .row-header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            padding: 0 3rem;
			margin-bottom:2px;
			margin-topk:20px;
			backgroundk:green;
        }

        .row-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: white;
            border-left: 4px solid gold;
            padding-left: 1rem;
        }
		
.see_more
{
color:gold;font-weight:bold;font-size:0.9em;text-decoration:none;
}

.movie_container
{
float:left;width:94%;height:360px;margin-left:3%;margin-bottom:25px;backgroundk:#333;display:flex;justify-content:space-between;align-items:center;overflow:auto;	
}
.single_movie_card
{
width:230px;height:340px;margin-left:10px;margin-right:10px;border-radius:10px	
}
.thumbnail_div
{
width:230px;height:100%;background:gray;border-radius:10px
}	
.thumbnail_img
{
width:100%;height:100%;border-radius:10px	
}

.movie_container2
{
float:left;width:94%;margin-left:3%;backgroundk:pink;display:flex;flex-wrap:wrap;justify-content:space-around;align-itemsk:center;overflow:auto;	
}
.single_movie_card2
{
float:left;width:230px;height:360px;margin-bottom:30px;border-radius:10px;backgroundk:green;	
}
.thumbnail_div2
{
width:230px;height:340px;background:gray;border-radius:10px
}
.thumbnail_div2:hover{border:3px solid #FF38AC;}
.movieTitle
{
float:left;width:100%;heightk:30px;line-height:30px;margin-top:-30px;font-size:1.5em;font-weight:bold;text-align:center;position:relative;z-index:2;
color:gold;
background:rgba(0,0,0,0.5);	
}
.movieCat
{
float:left;width:100%;height:20px;line-height:20px;margin-top:-50px;font-size:1em;font-weight:bold;text-align:center;position:relative;z-index:2;	
color:#11F07D;
background:rgba(0,0,0,0.5);
}


        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }

.footer_div
{
float:left;width:100%;min-height:300px;line-height:30px;margin-top:20px;backgroundk:red;border-topk:1px solid #ededed;
background: rgba(0, 0, 0, 0.4);	
border-top: 1px solid rgba(255, 255, 255, 0.1);
}		
.sub_footer_div
{
float:left;width:94%;margin-left:3%;display:flex;flex-wrap:wrap;justify-content:space-around;	
}
.footer_option
{
float:left;width:24%;backgroundk:#ccc;margin-right:10px;	
}
.right_div
{
float:left;width:100%;height:70px;line-height:70px;text-align:center;color:#8B8594;font-size:0.9em;font-weight:500;	
}
a{font-size:0.8em;text-decoration:none;font-weight:200;color:#8B8594;}
ul{list-style-type:none;}
a:hover{color:#fff;}
.socail_med_div
{
display:flex;justify-content:space-around;	
}
.sub_socail_med_div
{
width:50px;height:50px;border-radius:50%;background:#ccc;	
}

/* --- 2. Search Icon (Pure CSS) --- */
        .search-container {
            position: relative;
            width: 24px;
            height: 24px;
            cursor: pointer;
            transition: transform 0.2s ease;
			display:none;
        }

        .search-container:hover {
            transform: scale(1.1);
        }

        .search-circle {
            width: 16px;
            height: 16px;
            border: 3px solid var(--gold-primary);
            border-radius: 50%;
            box-sizing: border-box;
        }

        .search-handle {
            position: absolute;
            width: 3px;
            height: 10px;
            background-color: var(--gold-primary);
            bottom: -2px;
            right: 0px;
            transform: rotate(-45deg);
            border-radius: 2px;
        }

.search_result
{
right:15.5%;width:30%;min-height:100px;max-height:480px;background:#fff;margin-top:70px;position:fixed;z-index:23;border-radius:0 0 20px 20px;display:none;
overflow:auto;	
}
.search_output
{
float:left;width:100%;height:45px;line-height:45px;text-align:center;color:#000;border-bottom:1px solid #ccc;font-size:1em;	
}
.search_output:hover{color:gold;font-weight:bold;}		
@media screen and (max-width: 700px)
{
	.profile_divk{display:none;}
	.subscribe_btn{display:none;}
	.sub_home_div{display:none;}
	.logo_txtA{width:50%;}
    /* --- Pure CSS Item Row --- */
        .icon-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem;
            border: 1px solid var(--border-color);
            border-radius: 0.75rem;
            transition: background-color 0.2s;
        }

        .icon-row:hover {
            background-color: rgba(55, 65, 81, 0.5);
        }


        /* --- Animated Hamburger Logic --- */
        .hamb-container {
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 30px;
            height: 24px;
        }

        .hamb-line {
            width: 100%;
            height: 3px;
            background-color: var(--gold-primary);
            border-radius: 10px;
            transition: all 0.3s ease-in-out;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }

        /* Transformation to 'X' */
        .active .hamb-line:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
            background-color: var(--gold-dark);
        }
        .active .hamb-line:nth-child(2) {
            opacity: 0;
            transform: translateX(-20px);
        }
        .active .hamb-line:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
            background-color: var(--gold-dark);
        }

/* --- 2. Search Icon (Pure CSS) --- */
        .search-container {
            position: relative;
            width: 24px;
            height: 24px;
            cursor: pointer;
            transition: transform 0.2s ease;
			display:block;
        }

        .search-container:hover {
            transform: scale(1.1);
        }

        .search-circle {
            width: 16px;
            height: 16px;
            border: 3px solid var(--gold-primary);
            border-radius: 50%;
            box-sizing: border-box;
        }

        .search-handle {
            position: absolute;
            width: 3px;
            height: 10px;
            background-color: var(--gold-primary);
            bottom: -2px;
            right: 0px;
            transform: rotate(-45deg);
            border-radius: 2px;
        }

.home_div{height:80px;}
.position_div{height:80px;}
.home_div_mob
{
right:0;width:50%;height:300px;margin-top:70px;position:fixed;background:#020617;border-radius:0 0 10px 10px;z-index:21;display:none;
}
.home_btn
{
float:left;width:50%;height:40px;line-height:40px;margin-left:25%;text-align:center;color: #f8fafc;text-decoration:none;font-weight:700;font-size:0.9em;	
}
.search_div
{
width:90%;height:50px;display:none;background:#fff;

}
.clear_search_input_btn{display:none;}
.clear_search_input_btn_mob
{
float:left;width:10%;height:35px;line-height:35px;backgroundk:green;border-radius:50%;outline:none;border:0;font-size:1.2em;text-align:center;color:#000;cursor:pointer;	
display:block;
}
.search_result
{
right:5%;width:90%;		
}
.search_output{font-weight:bold;}
.single_movie_card2
{
width:165px;height:230px;margin-bottom:30px;border-radius:10px;backgroundk:purple;
}
.thumbnail_div2
{
width:165px;height:100%;backgroundk:gray;border-radius:10px
}	
.movieTitle
{
font-size:1em;	
}
.movieCat
{
font-size:1em;	
}



.footer_option
{
width:46%;
}
		
}
@media screen and (max-width: 360px)
{
.single_movie_card2
{
float:left;width:90%;height:auto;margin-left:5%;backgroundk:red;
}
.thumbnail_div2
{
float:left;width:100%;	
}

}