Enjoy on your TV
@@ -88,279 +88,143 @@
-
- Frequently Asked Questions
+
+ Frequently Asked Questions
-
-
-
What is Netflix?
-
-
-
-
- Netflix is a streaming service that offers a wide variety of
- award-winning TV shows, movies and documentaries on thousands of
- internet-connected devices. You can watch as much as you want,
- whenever you want without a single commercial-all for one low
- monthly price.
-
-
+
+
+ Netflix is a streaming service that offers a wide variety of
+ award-winning TV shows, movies and documentaries on thousands of
+ internet-connected devices. You can watch as much as you want,
+ whenever you want without a single commercial—all for one low
+ monthly price.
+
+
-
-
How much does Netflix cost?
-
-
-
-
-
+
+
How much does Netflix cost?
+
+
+
+ Watch Netflix on your smartphone, tablet, Smart TV, laptop, or
+ streaming device, all for one fixed monthly fee. Plans range from ₹149
+ to ₹649 a month. No extra costs, no contracts.
+
+
-
-
Where can I watch?
-
-
-
-
-
+
+
+ Watch anywhere, anytime. Sign in with your Netflix account to watch
+ instantly on the web at netflix.com from your personal computer or on
+ any internet-connected device that offers the Netflix app.
+
+
-
-
How can I cancel?
-
-
-
-
-
+
+
+ Netflix is flexible. There are no pesky contracts and no commitments.
+ You can easily cancel your account online in two clicks. There are no
+ cancellation fees – start or stop your account anytime.
+
+
-
-
What can I watch on Netflix?
-
-
-
-
-
+
+
What can I watch on Netflix?
+
+
+
+ Netflix has an extensive library of feature films, documentaries, TV
+ shows, anime, award-winning Netflix originals, and more. Watch as much
+ as you want, anytime you want.
+
+
+
+
Is Netflix good for kids?
+
+
+
+ The Netflix Kids experience is included in your membership to give
+ parents control while kids enjoy family-friendly TV shows and movies
+ in their own space. Kids profiles come with PIN-protected parental
+ controls.
+
+
-
-
-
Is Netflix good for kids?
-
-
-
-
-
-
-
diff --git a/style.css b/style.css
index 04512b5..67f093a 100644
--- a/style.css
+++ b/style.css
@@ -5,867 +5,466 @@
src: url("fonts/NetflixSans-Bold.otf") format("opentype");
}
-:root {
- --main-page-bg: black;
- --main-text-color: white;
-
- --section-bg: black;
- --section-text-color: white;
-
- --faq-box-bg: rgb(84, 83, 83);
- --faq-box-hover-bg:rgb(147, 146, 146);
- --faq-svg-filter: invert(1);
-
- --first-image-filter: none;
-
- --btn-text-on-light-bg:white;
- --btn-lang-svg-filter: invert(1);
-
- --separation-color:rgb(248, 38, 38);
- --btn-default-bg: rgb(117, 115, 115);
- --btn-default-text:white;
- --btn-red-bg: rgb(228, 15, 15);
- --btn-red-text: white;
- --input-bg-color: rgba(23, 23, 23, 0.7);
- --input-border-color: rgba(126, 122, 122, 0.5);
-}
-
-/* Light Mode Overrides for the variables */
-body[data-theme="light"] {
- --main-page-bg: white;
- --main-text-color: black;
-
- --section-bg: #f0f0f0;
- --section-text-color: black;
-
- --faq-box-bg: whitesmoke;
- --faq-box-hover-bg: lightgray;
- --faq-svg-filter: none;
-
- --first-image-filter: brightness(1.5) grayscale(0.5);
-
- --btn-text-on-light-bg:black;
- --btn-lang-svg-filter: none;
-}
+/* Reset */
* {
- padding: 0;
margin: 0;
- font-family: "Netflix Sans Bolder", "Poppins", sans-serif;
-}
-
-body {
- background-color: var(--main-page-bg);
- transition: background-color 0.3s ease;
+ padding: 0;
+ box-sizing: border-box;
}
-.main {
-
- background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/f562aaf4-5dbb-4603-a32b-6ef6c2230136/dh0w8qv-9d8ee6b2-b41a-4681-ab9b-8a227560dc75.jpg/v1/fill/w_1280,h_720,q_75,strp/the_netflix_login_background__canada__2024___by_logofeveryt_dh0w8qv-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzIwIiwicGF0aCI6IlwvZlwvZjU2MmFhZjQtNWRiYi00NjAzLWEzMmItNmVmNmMyMjMwMTM2XC9kaDB3OHF2LTlkOGVlNmIyLWI0MWEtNDY4MS1hYjliLThhMjI3NTYwZGM3NS5qcGciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.LOYKSxIDqfPwWHR0SSJ-ugGQ6bECF0yO6Cmc0F26CQs');
- height: 70vh;
- position: relative;
- background-position: center center;
- background-repeat: no-repeat;
- background-size: max(1200px, 100vw);
+/* Root Theme Variables */
+:root {
+ --red: #e50914;
+ --dark-bg: #141414;
+ --light-bg: #ffffff;
+ --text-light: #f5f5f1;
+ --text-dark: #222;
+ --gray: #777;
+ --input-bg: #333;
+ --btn-hover: #b0060f;
+ --card-bg: #1e1e1e;
+ --card-light-bg: #f1f1f1;
+}
+
+/* Theme Handling */
+body[data-theme="dark"] {
+ background-color: var(--dark-bg);
+ color: var(--text-light);
+ font-family: 'Martel Sans', sans-serif;
}
-
-.main .box {
- height: 70vh;
- width: 100%;
- opacity: 0.7;
- background-color: black;
- position: absolute;
- top: 0;
-
- background-image: url(home_page_background_image.jpg), 0.7;
- height: 99vh;
- width: 100%;
- position: relative;
- background-position: center center;
- background-repeat: no-repeat;
- background-size: max(1200px, 100vw);
+body[data-theme="light"] {
+ background-color: var(--light-bg);
+ color: var(--text-dark);
+ font-family: 'Martel Sans', sans-serif;
}
-.main .box {
- height: 99vh;
- width: 100%;
- opacity: 0.79;
- background-color: var(--main-page-bg);
- position: absolute;
- top: 0;
+/* Typography */
+body {
+ line-height: 1.6;
}
+/* Navbar */
nav {
display: flex;
justify-content: space-between;
align-items: center;
- max-width: 65vw;
- margin: auto;
- height: 85px;
- padding:0 145px;
-}
-
-nav img {
- color: rgb(255, 0, 0);
- padding: 20px;
- width: 130px;
- position: relative;
- z-index: 10;
-}
-
-nav button {
- position: relative;
+ padding: 1.2rem 2rem;
+ position: absolute;
+ width: 100%;
z-index: 10;
- margin:5%;
+ background-color: transparent;
+
}
-.hero {
- height: calc(100% - 100px);
+.nav-btn {
display: flex;
align-items: center;
- justify-content: center;
- flex-direction: column;
- color: var(--main-text-color);
- position: relative;
- font-family: "Martel Sans", serif;
- gap: 23px;
- padding: 0 30px;
+ gap: 0.8rem;
}
-.hero > :first-child {
- font-weight: bolder;
- font-size: 48px;
- text-align: center;
-}
-
-.hero > :nth-child(2) {
- font-weight: 400;
- font-size: 24px;
- text-align: center;
+.btn {
+ background: none;
+ border: none;
+ padding: 0.6rem 1rem;
+ cursor: pointer;
+ font-size: 1rem;
+ color: inherit;
+ transition: all 0.3s;
}
-.hero > :nth-child(3) {
- font-weight: 400;
- font-size: 20px;
- text-align: center;
+.btn-red-sm,
+.btn-red {
+ background-color: var(--red);
+ color: #fff;
+ border-radius: 4px;
+ font-weight: bold;
+ transition: 0.3s;
}
-.separation {
- height: 6px;
- background-color: var(--separation-color);
- position: relative;
- z-index: 20;
+.btn-red:hover {
+ background-color: var(--btn-hover);
}
-.nav-btn {
- width: 186px;
+.btn-lang {
display: flex;
- justify-content: space-between;
align-items: center;
- gap:10px;
+ border: 1px solid #aaa;
+ padding: 0.3rem 0.6rem;
+ border-radius: 4px;
+ gap: 0.3rem;
+ background-color: transparent;
+ color: inherit;
}
-
-.btn {
- background: #666;
- color: rgb(255, 255, 255);
- padding:5px 25px;
- margin: 10px 12px;
- border: none;
+#language-select{
+ padding:10px;
border-radius: 4px;
- cursor:pointer;
- text-decoration: none;
- transition: transform 0.3s ease, box-shadow 0.3s ease;
+ background-color:#141414;
+ color:white;
}
-
-.btn:hover {
-transform: scale(1.05);
- box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
+.language-switch,
+.down-arrow {
+ width: 18px;
+ height: 18px;
}
-.btn-red {
- background:rgb(228, 15, 15);
- font-size:15px;
- font-weight:lighter;
+/* Hero Section */
+.main {
+ background: url("assets/bg.jpg") center center/cover no-repeat;
+ height: 800px;
+ position: relative;
+ color: white;
}
-.btn-red:hover {
- box-shadow:0px 6px 20px rgb(171, 212, 171);
- transform: scale(1.08);
+[data-theme="dark"] .main {
+ background: linear-gradient(
+ rgba(0, 0, 0, 0.7),
+ rgba(0, 0, 0, 0.7)
+ ),
+ url("assets/bg.jpg") center center/cover no-repeat;
}
-#theme-toggle {
- font-size: 1.2rem;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- line-height: 1;
+.box {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ background-color: rgba(0, 0, 0, 0.6);
}
-.language-switch {
- width: 15px;
- padding: 2px;
-}
-#language-select {
- background: transparent;
- color: white;
- border: none;
- font-size: 16px;
- appearance: none;
- padding: 8px;
- cursor: pointer;
+.hero {
+ position: relative;
+ top: 40%;
+ transform: translateY(-50%);
+ text-align: center;
+ padding: 0 2rem;
+ text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
-.down-arrow {
- width: 8px;
- padding: 0 2px;
+.hero span {
+ display: block;
+ font-size: 2.5rem;
+ font-weight: 900;
+ margin-bottom: 1rem;
}
.hero-buttons {
+ margin-top: 1.5rem;
display: flex;
- align-items: center;
justify-content: center;
- gap: 14px;
+ gap: 0.5rem;
+ flex-wrap: wrap;
}
-.main input {
- padding: 7px 101px 8px 14px;
- color: var(--btn-default-text);
- font-size: 12px;
- font-weight: 900;
+.hero-buttons input {
+ padding: 0.8rem;
+ font-size: 1rem;
+ border: none;
border-radius: 4px;
- background-color: var(--input-bg-color);
- border: 1px solid var(--input-border-color);
-}
-
-.btn-lang {
- background-color: var(--section-bg);
- border: 1px solid var(--btn-default-text);
- color: var(--btn-text-on-light-bg);
- display: flex;
- align-items: center;
+ min-width: 280px;
+ background-color: var(--input-bg);
+ color: white;
}
-.english {
- padding: 0 5px;
+/* Separation Line */
+.separation {
+ height: 8px;
+ background-color: #222;
}
-.btn-red-sm {
- background-color: var(--btn-red-bg);
- color: var(--btn-red-text);
+/* Content Sections */
+section.first {
display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
align-items: center;
- margin:3px;
+ padding: 4rem 2rem;
+ gap: 2rem;
+ background-color: var(--card-light-bg);
}
-.btn-lang .language-switch,
-.btn-lang .down-arrow {
- filter: var(--btn-lang-svg-filter);
-}
-.first {
- display: flex;
- justify-content: center;
- align-items: center;
- max-width: 100vw;
- margin: 0;
- background-color: var(--section-bg);
- color: var(--section-text-color);
- padding: 34px 0;
-}
-@media screen and (max-width: 1300px) {
- .first {
- flex-wrap: wrap;
- }
- .secImg img {
- width: 305px;
- position: relative;
- z-index: 10;
- }
- .hero > :first-child {
- font-size: 32px;
- }
- .hero > :nth-child(2) {
- font-size: 18px;
- }
- .hero > :nth-child(3) {
- font-size: 18px;
- }
- nav {
- max-width: 90vw;
- }
- .main input {
- padding: 7px 53px 8px 14px;
- }
- .hero-buttons {
- display: flex;
- justify-content: center;
- max-width: 70vw;
- margin: auto;
- color: white;
- align-items: center;
- padding: 70px 0;
- flex-wrap: wrap;
-}
-.second {
- flex-direction: row-reverse;
+[data-theme="dark"] section.first {
+ background-color: var(--card-bg);
}
-section.first > div {
- display: flex;
- flex-direction: column;
- padding: 0 34px;
- flex: 1;
- min-width: 300px;
- text-align: left;
- gap: 15px;
-}
-
-section.first > div :first-child {
- font-size: 48px;
- font-weight: bolder;
- line-height: 1.1;
-}
-
-section.first > div :nth-child(2) {
- font-size: 24px;
- line-height: 1.2;
-}
-
-.secImg {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-@media screen and (max-width:1300px){
- .first{
- flex-wrap: wrap;
- }
- .secImg img {
- width: 305px;
- position: relative;
- z-index: 10;
- }
- .hero> :first-child {
- font-size: 32px;
- }
- .hero> :nth-child(2){
- font-size: 18px;
- }
- .hero> :nth-child(3){
- font-size: 18px;
- }
- nav{
- max-width: 90vw;
- }
- .main input{
- padding: 7px 53px 8px 14px;
- }
- .hero-buttons {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 14px;
- }
- .faq h2{
- text-align: center;
- font-size: 32px;
- }
- footer{
- max-width: 90vw;
- }
- .footer-item{
- align-items: center;
- }
- .footer{
- display: grid;
- grid-template-columns: 1fr 1fr;
- color: white;
- gap: 25px;
- }
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 14px;
- }
- .faq h2 {
- text-align: center;
- font-size: 32px;
- }
+section.first span:first-child {
+ font-size: 2rem;
+ font-weight: bold;
}
.secImg img {
- filter: var(--first-image-filter);
- width: 400px;
- position: relative;
- z-index: 10;
+ width: 100%;
+ max-width: 500px;
+ border-radius: 10px;
+ box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
-.secImg {
- position: relative;
-}
-section.first > div {
- display: flex;
- flex-direction: column;
+/* FAQ Section */
+.faq {
+ padding: 4rem 2rem;
+ background-color: var(--card-light-bg);
+ transition: background-color 0.3s ease-in-out;
}
-section.first > div :nth-child(1) {
- font-size: 30px;
- font-weight: bolder;
+[data-theme="dark"] .faq {
+ background: linear-gradient(145deg, #1f1f1f, #292929);
}
-section.first > div :nth-child(2) {
- font-size: 24px;
-}
.faq h2 {
text-align: center;
- font-size: 48px;
+ font-size: 2.8rem;
+ font-weight: 700;
+ margin-bottom: 3rem;
+ color: var(--text-primary, #111);
+ text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
-.faq {
- background-color: var(--section-bg);
- color: var(--section-text-color);
- padding: 34px;
-}
-.faqbox{
- display: flex;
- transition: all 0.5s ease-out;
- background-color: rgb(84, 83, 83);
- justify-content: space-between;
- padding: 24px;
- max-width: 60vw;
- font-size: 20px;
- margin: 20px auto;
- cursor: pointer;
- border-radius: 15px;
-}
-footer{
- color: white;
- max-width: 60vw;
- margin: auto;
- padding: 14px;
-}
-.footer{
- display: grid;
- grid-template-columns: 1fr 1fr 1fr 1fr;
- color: white;
-}
-.footer-item{
- display: flex;
- flex-direction: column;
- gap: 23px;
-.faqbox:hover {
- background-color: var(--faq-box-hover-bg);
-}
-.faqbox svg {
- filter: var(--faq-svg-filter);
-}
-.faqbox {
- display: flex;
- transition: all 0.5s ease-out;
- background-color: var(--faq-box-bg);
- justify-content: space-between;
- padding: 24px;
- max-width: 60vw;
- font-size: 24px;
- margin: 20px auto;
- cursor: pointer;
-}
-
-#chatbot-widget {
- position: fixed;
- bottom: 30px;
- right: 30px;
- z-index: 1000;
- font-family: "Segoe UI", Arial, sans-serif;
-}
-#chatbot-toggle {
- background: #e50914;
- color: #fff;
- border: none;
- border-radius: 50%;
- width: 56px;
- height: 56px;
- font-size: 2rem;
- cursor: pointer;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
- transition: background 0.2s;
-}
-#chatbot-toggle:hover {
- background: #b0060f;
-}
-#chatbot-window {
- width: 340px;
- min-height: 420px;
- max-height: 70vh;
- background: #181818;
- color: #fff;
- border-radius: 18px;
- box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
- position: absolute;
- bottom: 70px;
- right: 0;
- display: flex;
- flex-direction: column;
- overflow: hidden;
- animation: fadeIn 0.3s;
-}
-@keyframes fadeIn {
- from {
- opacity: 0;
- transform: translateY(30px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-#chatbot-header {
- background: #e50914;
- color: #fff;
- padding: 14px 18px;
- font-weight: bold;
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: 1.1rem;
- letter-spacing: 0.5px;
-}
-#chatbot-close {
- cursor: pointer;
- font-size: 1.4rem;
- transition: color 0.2s;
-}
-#chatbot-close:hover {
- color: #ffd700;
-}
-#chatbot-messages {
- flex: 1;
- padding: 18px 12px 8px 12px;
- overflow-y: auto;
- background: #222;
- display: flex;
- flex-direction: column;
- gap: 10px;
-}
-.chat-message {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
-}
-.chat-message.user {
- align-items: flex-end;
-}
-.bubble {
- max-width: 80%;
- padding: 12px 16px;
- border-radius: 18px;
- font-size: 1rem;
- line-height: 1.5;
- margin-bottom: 2px;
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
- word-break: break-word;
-}
-.chat-message.user .bubble {
- background: #e50914;
- color: #fff;
- border-bottom-right-radius: 6px;
- border-bottom-left-radius: 18px;
- border-top-left-radius: 18px;
- border-top-right-radius: 18px;
-}
-.chat-message.bot .bubble {
- background: #333;
- color: #fff;
- border-bottom-left-radius: 6px;
- border-bottom-right-radius: 18px;
- border-top-left-radius: 18px;
- border-top-right-radius: 18px;
-}
-#chatbot-loading {
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 10px 0;
- background: #222;
-}
-.spinner {
- border: 4px solid #444;
- border-top: 4px solid #e50914;
- border-radius: 50%;
- width: 28px;
- height: 28px;
- animation: spin 1s linear infinite;
-}
-@keyframes spin {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
-}
-#chatbot-form {
- display: flex;
- border-top: 1px solid #333;
- background: #181818;
- padding: 10px 12px;
- gap: 8px;
-}
-#chatbot-input {
- flex: 1;
- padding: 10px 14px;
- border: none;
- background: #222;
+[data-theme="dark"] .faq h2 {
color: #fff;
- font-size: 1rem;
- border-radius: 12px;
- outline: none;
- transition: box-shadow 0.2s;
-}
-#chatbot-input:focus {
- box-shadow: 0 0 0 2px #e50914;
}
-#chatbot-form button {
- background: #e50914;
- color: #fff;
- border: none;
- padding: 0 18px;
- font-size: 1.2rem;
- border-radius: 12px;
- cursor: pointer;
- transition: background 0.2s;
-}
-#chatbot-form button:hover {
- background: #b0060f;
-}
-@media (max-width: 500px) {
- #chatbot-window {
- width: 98vw;
- min-width: 0;
- right: 1vw;
- left: 1vw;
- bottom: 80px;
- max-height: 80vh;
- }
- #chatbot-toggle {
- right: 10px;
- bottom: 10px;
- }
-}
-/* <<<<<<< feature/light-dark-mode
-======= */
-@import url("https://fonts.googleapis.com/css2?family=Martel+Sans:wght@200;300;400;600;700;800;900&display=swap");
-
-* {
- padding: 0;
- margin: 0;
- font-family: "Netflix Sans Bolder", "Poppins", sans-serif;
-}
-
-body {
- background-color: black;
- padding: 20px;
-}
-
-.faq h2 {
- text-align: center;
- font-size: 48px;
- color: white;
- margin-bottom: 30px;
-}
-
-.faq {
- background-color: black;
- color: white;
- padding: 34px;
+.faqbox {
+ background: linear-gradient(135deg, #3a3a3a, #2e2e2e);
+ color: #f1f1f1;
+ margin: 1rem auto;
+ padding: 1.2rem 1.5rem;
+ cursor: pointer;
+ border-radius: 10px;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
+ max-width: 1000px;
}
.faqbox:hover {
- background-color: rgb(147, 146, 146);
-}
-
-.faqbox svg {
- filter: invert(1);
- transition: transform 0.3s ease;
-}
-
-.faqbox.active svg {
- transform: rotate(45deg);
+ transform: translateY(-3px);
+ background: linear-gradient(135deg, #4b4b4b, #393939);
}
-.faqbox {
- display: flex;
- transition: all 0.5s ease-out;
- background-color: rgb(84, 83, 83);
- justify-content: space-between;
- align-items: center;
- padding: 24px;
- max-width: 60vw;
- font-size: 24px;
- margin: 20px auto;
- cursor: pointer;
- flex-direction: column;
-}
-
-.faq-question {
- display: flex;
- justify-content: space-between;
- align-items: center;
- width: 100%;
+.faqbox.active .faq-answer {
+ display: block;
+ animation: fadeIn 0.4s ease-in-out;
}
.faq-answer {
- width: 100%;
- max-height: 0;
- overflow: hidden;
- transition: max-height 0.3s ease, padding 0.3s ease;
- font-size: 18px;
- line-height: 1.5;
+ display: none;
+ padding-top: 1rem;
+ color: #d1d1d1;
+ line-height: 1.6;
+ font-size: 1rem;
}
-.faqbox.active .faq-answer {
- max-height: 200px;
- padding-top: 20px;
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(-10px); }
+ to { opacity: 1; transform: translateY(0); }
}
-@media screen and (max-width: 1300px) {
- .faq h2 {
- text-align: center;
- font-size: 32px;
- }
- .faqbox {
- max-width: 90vw;
- font-size: 20px;
- }
- .faq-answer {
- font-size: 16px;
- }
+
+/* Footer */
+.netflix-footer {
+ background-color: #000;
+ color: #ccc;
+ padding: 3rem 2rem;
+ font-size: 0.9rem;
}
-/* >>>>>>> main */
-/* FOOTER SIGNUP */
.footer-signup {
text-align: center;
- margin: 40px auto;
- max-width: 600px;
-}
-
-.footer-signup p {
- font-size: 18px;
- margin-bottom: 20px;
- color:white;
+ margin-bottom: 2rem;
}
.footer-signup-box {
display: flex;
justify-content: center;
- gap: 10px;
flex-wrap: wrap;
+ gap: 1rem;
+ margin-top: 1rem;
}
-/* Floating label for footer input */
.input-container {
position: relative;
- display: inline-block;
- flex: 1;
- min-width: 280px;
- padding-right: 25px;
+ width: 300px;
}
-.footer-input-container{
- padding: 16px 14px 8px 14px;
- font-size: 16px;
- border-radius: 4px;
- border: 1px solid rgba(137, 134, 134, 0.7);
- background: rgba(23, 23, 23, 0.7);
- color:white;
+.input-container input {
width: 100%;
+ padding: 0.8rem;
+ background-color: var(--input-bg);
+ border: 1px solid #555;
+ border-radius: 4px;
+ color: white;
}
.input-container label {
position: absolute;
- left: 14px;
top: 50%;
+ left: 10px;
transform: translateY(-50%);
color: #aaa;
- font-size: 16px;
pointer-events: none;
- transition: 0.3s ease all;
+ transition: 0.2s;
}
.input-container input:focus + label,
.input-container input:not(:placeholder-shown) + label {
- top: 6px;
- font-size: 12px;
- color: #aaa; /* keep same grey color */
-}
-
-/* FOOTER LINKS & LANGUAGE */
-footer {
- max-width: 75vw;
- margin: auto;
- padding: 40px 0;
- color: #b3b3b3;
- font-size: 14px;
-}
-
-footer .questions {
- margin: 20px 0;
+ top: -10px;
+ left: 5px;
+ font-size: 0.8rem;
+ color: #fff;
+ background-color: #000;
+ padding: 0 5px;
}
-footer .questions a {
- color: #b3b3b3;
- text-decoration: underline;
+.questions {
+ margin: 2rem 0;
}
.footer-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
- gap: 20px;
- margin-bottom: 30px;
+ gap: 1rem;
+ margin-bottom: 2rem;
}
.footer-links ul {
list-style: none;
+ padding: 0;
}
-.footer-links li {
- margin-bottom: 12px;
-}
-
-.footer-links a {
- color: #b3b3b3;;
+.footer-links ul li a {
+ color: #ccc;
text-decoration: none;
+ display: block;
+ margin-bottom: 0.5rem;
}
-.footer-links a:hover {
+.footer-links ul li a:hover {
text-decoration: underline;
}
.footer-bottom {
display: flex;
- flex-direction: column; /* stack vertically */
- align-items: flex-start;
- gap: 10px;
- margin-top: 20px;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ gap: 1rem;
}
-.language-select {
- background: rgba(0, 0, 0, 0.7);
- color: #b3b3b3;
- border: 1px solid #333;
+.footer-bottom select {
+ background: #000;
+ color: #ccc;
+ padding: 0.4rem 1rem;
+ border: 1px solid #444;
border-radius: 4px;
- padding: 8px 14px;
- font-size: 14px;
- cursor: pointer;
}
.netflix-india {
- font-size: 14px;
- color: #b3b3b3;
- padding-top: 20px;
+ flex: 1;
+ text-align: right;
+}
+
+.netflix-india a {
+ color: #999;
+ margin-left: 1rem;
+ text-decoration: none;
+}
+.netflix-india a:hover {
+ text-decoration: underline;
+}
+
+/* Chatbot Styles */
+#chatbot-widget {
+ position: fixed;
+ bottom: 1.5rem;
+ right: 1.5rem;
+ z-index: 999;
+}
+
+#chatbot-toggle {
+ background-color: var(--red);
+ border: none;
+ color: white;
+ border-radius: 50%;
+ font-size: 1.5rem;
+ width: 3rem;
+ height: 3rem;
+ cursor: pointer;
+ box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+}
+
+#chatbot-window {
+ background-color: #222;
+ border: 1px solid #444;
+ color: white;
+ border-radius: 10px;
+ width: 320px;
+ height: 400px;
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ bottom: 4rem;
+ right: 0;
+ overflow: hidden;
+}
+
+#chatbot-header {
+ background-color: #111;
+ padding: 0.8rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-weight: bold;
+}
+
+#chatbot-messages {
+ flex: 1;
+ padding: 0.8rem;
+ overflow-y: auto;
+}
+
+#chatbot-form {
+ display: flex;
+ padding: 0.5rem;
+ gap: 0.5rem;
+}
+
+#chatbot-input {
+ flex: 1;
+ padding: 0.6rem;
+ border-radius: 5px;
+ border: none;
+ background-color: #333;
+ color: white;
+}
+
+#chatbot-form button {
+ background-color: var(--red);
+ border: none;
+ color: white;
+ padding: 0 1rem;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+ .hero span {
+ font-size: 1.5rem;
+ }
+
+ .hero-buttons {
+ flex-direction: column;
+ }
+
+ .secImg img {
+ max-width: 100%;
+ }
+
+ .footer-bottom {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .netflix-india {
+ text-align: center;
+ }
}