[
  {
    "path": ".github/FUNDING.yml",
    "content": "github: QAZIMAAZARSHAD\n"
  },
  {
    "path": ".github/Issue_Template/bug_report.md",
    "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: 'Type: Bug'\nassignees: ''\n\n---\n\n## Describe the bug\nA clear and concise description of what the bug is.\n\n## To Reproduce\nSteps to reproduce the behavior:\n1. \n2. \n3. \n4. \n\n## Expected behavior\nA clear and concise description of what you expected to happen.\n\n## Logs\nIf applicable, add logs to help explain your problem (e.g. the error message and/or exception traceback).\n\n## Environment (please complete the following information):\n - OS:\n - Browser:\n\n## Additional context\nAdd any other context about the problem here.\n\n"
  },
  {
    "path": ".github/Issue_Template/feature_request.md",
    "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: 'Type: Enhancement'\nassignees: ''\n\n---\n\n## Is your feature request related to a problem? Please describe.\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n## Describe the solution you'd like\nA clear and concise description of what you want to happen.\n\n## Additional context\nAdd any other context about the feature request here.\n"
  },
  {
    "path": ".github/labels.json",
    "content": "[\n  {\n    \"name\": \"good first issue\",\n    \"description\": \"This issue is good for first timers\",\n    \"color\": \"a9e3ff\"\n  },\n  {\n    \"name\": \"🆘 help wanted\",\n    \"description\": \"This issue needs help ! Please help if possible !\",\n    \"color\": \"ff00ff\"\n  },\n  {\n    \"name\": \"🟥 Level4 \",\n    \"description\": \"This issue will be considered as level 4 issue for LGM-SOC 21.Points will be 45.\",\n    \"color\": \"b60205\"\n  },\n  {\n    \"name\": \"🟧 Level3 \",\n    \"description\": \"This issue will be considered as level 3 issue for LGM-SOC 21.Points will be 30.\",\n    \"color\": \"ff9f1c\"\n  },\n  {\n    \"name\": \"🟨 Level2 \",\n    \"description\": \"This issue will be considered as level 2 issue for LGM-SOC 21.Points will be 15\",\n    \"color\": \"ffcc00\"\n  },\n  {\n    \"name\": \"🟩 Level1 \",\n    \"description\": \"This issue will be considered as level 1 issue for LGM-SOC 21.Points will be 10\",\n    \"color\": \"cfda2c\"\n  },\n  {\n    \"name\": \"🟪 Level0 \",\n    \"description\": \"This issue will be considered as level 0 issue for LGM-SOC 21.Points will be 5\",\n    \"color\": \"aa00de\"\n  },\n  {\n    \"name\": \" LGMSOC21 \",\n    \"description\": \"This issue will be considered for LGM-SOC 21\",\n    \"color\": \"d93f0b\"\n  },\n  {\n    \"name\": \" DCP21 \",\n    \"description\": \"This issue will be considered for DCP 21\",\n    \"color\": \"d93f0b\"\n  },\n  {\n    \"name\": \" 🤩 Up for Grab \",\n    \"description\": \"This issue will is not assigned ! Grab It !\",\n    \"color\": \"bf00ff\"\n  }\n]\n"
  },
  {
    "path": ".github/pull_request_template.md",
    "content": "#### Fixes #(issue number)\n<!--  Please Mention the issue number as  Fixes #(issue number) instead of ISSUE #(issue number)\n      Example:\n      Fixes #5 \n      (so that the issue automatically gets closed on successful merging of PR)\n-->\n \n\n#### Describe the changes you've made\nA clear and concise description of what you have done to successfully close your assigned issue. Any new files? or anything you feel to let us know!\n\n#### Deploy your changes to github page or netlify and mention deployment link:\nAdd the deployment link here.\n\n#### Describe if there is any unusual behaviour of your code(Write `NA` if there isn't)\nA clear and concise description of it.\n\n#### Additional context (OPTIONAL)\nAdd any other context or screenshots about the feature request here.\n\n#### Test plan (OPTIONAL)\nA good test plan should give instructions that someone else can easily follow.\nHow someone can test your code?\n\n#### Checklist\n<!--\nExample how to mark a checkbox :-\n- [x] My code follows the code style of this project.\n-->\n- [ ] I have mentioned related issue number in PR description.\n- [ ] I have added screenshots and related demo links of my changes..\n- [ ] The title of my pull request is a short description of the requested changes.\n- [ ] My code follows the code style of this project.\n- [ ] My change requires a change to the documentation.\n- [ ] I have updated the documentation accordingly.\n- [ ] Open Source Program names(OPTIONAL: If you participated in any open-source program then please mention the program name here)\n"
  },
  {
    "path": ".github/workflows/abc.css",
    "content": "\n"
  },
  {
    "path": ".github/workflows/issue-label.yml",
    "content": "name: Default\n\non: [push]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n    - uses: actions/checkout@v1\n    - name: Label Syncer\n      uses: micnncim/action-label-syncer@v1.3.0\n      env:\n        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n        GITHUB_REPOSITORY: ${{ github.repository }}\n      with:\n        manifest: .github/labels.json\n        prune: false\n"
  },
  {
    "path": ".vscode/settings.json",
    "content": "{\n    \"liveServer.settings.port\": 5501\n}"
  },
  {
    "path": "CODE_OF_CONDUCT.md",
    "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participation in our\ncommunity a harassment-free experience for everyone, regardless of age, body\nsize, visible or invisible disability, ethnicity, sex characteristics, gender\nidentity and expression, level of experience, education, socio-economic status,\nnationality, personal appearance, race, religion, or sexual identity\nand orientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming,\ndiverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our\ncommunity include:\n\n* Demonstrating empathy and kindness toward other people\n* Being respectful of differing opinions, viewpoints, and experiences\n* Giving and gracefully accepting constructive feedback\n* Accepting responsibility and apologizing to those affected by our mistakes,\n  and learning from the experience\n* Focusing on what is best not just for us as individuals, but for the\n  overall community\n\nExamples of unacceptable behavior include:\n\n* The use of sexualized language or imagery, and sexual attention or\n  advances of any kind\n* Trolling, insulting or derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or email\n  address, without their explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n  professional setting\n\n## Enforcement Responsibilities\n\nProject maintainers and event organizers are responsible for clarifying and enforcing our standards of\nacceptable behavior and will take appropriate and fair corrective action in\nresponse to any behavior that they deem inappropriate, threatening, offensive,\nor harmful.\n\nProject maintainers and event organizers have the right and responsibility to remove, edit, or reject\ncomments, commits, code, wiki edits, issues, and other contributions that are\nnot aligned to this Code of Conduct, and will communicate reasons for moderation\ndecisions when appropriate.\n\n## Scope\n\nThis Code of Conduct applies within all community spaces, and also applies when\nan individual is officially representing the community in public spaces.\nExamples of representing our community include using an official e-mail address,\nposting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at . All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.\n\n## Enforcement Guidelines\n\nProject maintainers and event organizers will follow these Community Impact Guidelines in determining\nthe consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed\nunprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leaders, providing\nclarity around the nature of the violation and an explanation of why the\nbehavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series\nof actions.\n\n**Consequence**: A warning with consequences for continued behavior. No\ninteraction with the people involved, including unsolicited interaction with\nthose enforcing the Code of Conduct, for a specified period of time. This\nincludes avoiding interactions in community spaces as well as external channels\nlike social media. Violating these terms may lead to a temporary or\npermanent ban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including\nsustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any sort of interaction or public\ncommunication with the community for a specified period of time. No public or\nprivate interaction with the people involved, including unsolicited interaction\nwith those enforcing the Code of Conduct, is allowed during this period.\nViolating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violation of community\nstandards, including sustained inappropriate behavior,  harassment of an\nindividual, or aggression toward or disparagement of classes of individuals.\n\n**Consequence**: A permanent ban from any sort of public interaction within\nthe community.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage],\nversion 2.0, available at\nhttps://www.contributor-covenant.org/version/2/0/code_of_conduct.html.\n\nCommunity Impact Guidelines were inspired by [Mozilla's code of conduct\nenforcement ladder](https://github.com/mozilla/diversity).\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see the FAQ at\nhttps://www.contributor-covenant.org/faq. Translations are available at\nhttps://www.contributor-covenant.org/translations.\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "## Contribution Guidelines 🏗\n\nAre we missing any of your favorite features, which you think you can add to it❓ We invite you to contribute to this project and improve it further\n\nTo start contributing, follow the below guidelines: \n\n**🌟.**  Star🌟 the project to bookmark and appreciate the work.\n\n**0.**  Take a look at the existing [issues](https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website/issues) or create your own issues. Wait for the Issue to be assigned to you after which you can start working on it.\n\n**1.**  Fork [this](https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website) repository.\n\n**2.**  Clone your forked copy of the project.\n\n```\ngit clone --depth 1 https://github.com/<your_user_name>/Movie-Streaming-Website.git\n```\n\n**3.** Navigate to the project directory :file_folder: .\n\n```\ncd Movie-Streaming-Website\n```\n\n**4.** Add a reference(remote) to the original repository.\n\n```\ngit remote add upstream https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website.git \n```\n\n**5.** Check the remotes for this repository.\n\n```\ngit remote -v\n```\n\n**6.** Always take a pull from the upstream repository to your master branch to keep it at par with the main project(updated repository).\n\n```\ngit pull upstream master\n```\n\n**7.** Create a new branch.\n\n```\ngit checkout -b <your_branch_name>\n```\n\n**8.** Perform your desired changes to the code base.\n\n<p align=\"center\"><img width=35% src=\"https://media2.giphy.com/media/L1R1tvI9svkIWwpVYr/giphy.gif?cid=ecf05e47pzi2rpig0vc8pjusra8hiai1b91zgiywvbubu9vu&rid=giphy.gif\"></p>\n\n**9.** Track your changes:heavy_check_mark: .\n\n```\ngit add . \n```\n\n**10.** Commit your changes .\n\n```\ngit commit -m \"Relevant message\"\n```\n\n**11.** Push the committed changes in your feature branch to your remote repo.\n\n```\ngit push -u origin <your_branch_name>\n```\n\n**12.** To create a pull request, click on `compare and pull requests`. Please ensure you compare your feature branch to the desired branch of the repo you are suppose to make a PR to.\n\n**13.** Add appropriate title and description to your pull request explaining your changes and efforts done.\n\n**14.** Click on `Create Pull Request`.\n\n**15.** Voila :exclamation: You have made a PR to the Apna Theatre project :boom: . Sit back patiently and relax while the project maintainers review your PR. Please understand, at times the time taken to review a PR can vary from a few hours to a few days.\n\n<p align=\"center\"><img src=\"https://media.tenor.com/images/b562ddcfb131e962f9dfa01bd32a30d1/tenor.gif\" width=30%></p>\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2021 Qazi Maaz Arshad\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# Movie Streaming Website  🎬\n\nAre you a movie maniac, who loves to binge-watch awesome movies & series? If Yes, then you have come to the right place.\n<p align=\"center\"><img src=\"https://noelalanaleon.files.wordpress.com/2015/06/tyrion-29.gif\" width = 70%></p>\n\nEveryone loves to watch their favorite shows with friends and some snacks. But there is something that you might be missing out on!\n<p align=\"center\"><img src=\"https://i.pinimg.com/originals/43/c8/7e/43c87e08d3858256c4493e64b2c4c501.gif\"></p>\n\nSo, what else do you need?🤔.\n<p align=\"center\"><img src=\"https://media.tenor.com/images/1498a68342ec3e96a8773995f59dfc39/tenor.gif\" width = 70%></p>\n\nHere is the answer: An awesome movie streaming website of yours that has all your favorites in one place! \n<p align=\"center\"><img src=\"https://www.system-concepts.com/wp-content/uploads/2020/02/excited-minions-gif.gif\" width = 70%></p>\n\nWe already have Netflix, Amazon Prime, and Hotstar but they might get expensive sometimes. So what should we do? You must be wondering that making our own movie website might take time or require some web development knowledge, and after all of that will you still get something really cool?\n<p align=\"center\"><img src=\"https://i.pinimg.com/originals/a1/55/93/a1559307185334cb66fb0ccf5e787bd0.gif\" width = 70%></p>\n\nWell, take a chill pill. Don't be intimidated by these thoughts. __Apna Theatre Website__ is here to the rescue!\n<p align=\"center\"><img src=\"https://i.pinimg.com/originals/eb/39/9a/eb399a729c812376ca23c06df2d1e380.gif\" width = 70%></p>\n\n## A sneak peek into what we have here🙈 :\n\n\n## Home Page\n<p align=\"center\"><img src=\"Readme_assets/home_pd.gif\" width = 85% ></p>\n\n## Sign-Up Page\n<p align=\"center\"><img src=\"Readme_assets/Singup_p.gif\" width = 85% ></p>\n\n## Kids Page\n<p align=\"center\"><img src=\"Readme_assets/kids_p.gif\" width = 85% ></p>\n\n## Search Function\n<p align=\"center\"><img src=\"Readme_assets/search_p.gif\" width = 85% ></p>\n\n## Contact Us Page\n<p align=\"center\"><img src=\"Readme_assets/Contactus_p.gif\" width = 85% ></p>\n\n## About\n<div>\n<div>\n<img src=\"Images\\Logo/logo1.png\" height = \"120\" align = \"left\"/>\n<div>\nApnaTheatre.com is a place for all movieholics & cinephiles to enjoy. This movie streaming website allows users to watch their favorite movies, tv shows, and web series from multiple genres like Crime, Comedy, Drama, Documentaries, Horror, Anime, Romance, War, Action, Fantasy, Kids and many more! </div>\n</div>\n<br>\n\n## Link to the website\nhttps://qazimaazarshad.github.io/Movie-Streaming-Website/\n\n## Tech Stack\n\n<img src=\"https://www.freepnglogos.com/uploads/html5-logo-png/html5-logo-best-web-design-psd-html-cms-development-ecommerce-6.png\" width=\"200\" alt=\"\" />\n\n## How to get started❓\n\nYou can refer to the following articles on the basics of Git and Github and also contact the Project Mentors, in case you are stuck:\n\n- If you don't have git on your machine, [install](https://help.github.com/articles/set-up-git/) it.\n- [Watch this video to get started, if you have no clue about open source](https://youtu.be/SL5KKdmvJ1U)\n- [Forking a Repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo)\n- [Cloning a Repo](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository)\n- [How to create an Issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/creating-issues/creating-an-issue)\n- [How to create a Pull Request](https://opensource.com/article/19/7/create-pull-request-github)\n- [Getting started with Git and GitHub](https://towardsdatascience.com/getting-started-with-git-and-github-6fcd0f2d4ac6)\n\n## Contribution Guidelines 🏗\n\nAre we missing any of your favorite features, which you think you can add to it❓ We invite you to contribute to this project and improve it further\n\nTo start contributing, follow the below guidelines: \n\n**🌟.**  Star🌟 the repo to appreciate the work.\n\n**0.**  Take a look at the existing [issues](https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website/issues) or create your own issues. Wait for the Issue to be assigned to you after which you can start working on it.\n\n**1.**  Fork [this](https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website) repository.\n\n**2.**  Clone your forked copy of the project.\n\n```\ngit clone --depth 1 https://github.com/<your_user_name>/Movie-Streaming-Website.git\n```\n\n**3.** Navigate to the project directory :file_folder: .\n\n```\ncd Movie-Streaming-Website\n```\n\n**4.** Add a reference(remote) to the original repository.\n\n```\ngit remote add upstream https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website.git \n```\n\n**5.** Check the remotes for this repository.\n\n```\ngit remote -v\n```\n\n**6.** Always take a pull from the upstream repository to your master branch to keep it at par with the main project(updated repository).\n\n```\ngit pull upstream master\n```\n\n**7.** Create a new branch.\n\n```\ngit checkout -b <your_branch_name>\n```\n\n**8.** Perform your desired changes to the code base.\n\n<p align=\"center\"><img width=50% src=\"https://media2.giphy.com/media/L1R1tvI9svkIWwpVYr/giphy.gif?cid=ecf05e47pzi2rpig0vc8pjusra8hiai1b91zgiywvbubu9vu&rid=giphy.gif\"></p>\n\n**9.** Track your changes:heavy_check_mark: .\n\n```\ngit add . \n```\n\n**10.** Commit your changes .\n\n```\ngit commit -m \"Relevant message\"\n```\n\n**11.** Push the committed changes in your feature branch to your remote repo.\n\n```\ngit push -u origin <your_branch_name>\n```\n\n**12.** To create a pull request, click on `compare and pull requests`. Please ensure you compare your feature branch to the desired branch of the repo you are supposed to make a PR to.\n\n**13.** Add an appropriate title and description to your pull request explaining your changes and efforts done.\n\n**14.** Click on `Create Pull Request`.\n\n**15.** Voila :exclamation: You have made a PR to the Apna Theatre project :boom: . Sit back patiently and relax while the project maintainers review your PR. Please understand, at times the time taken to review a PR can vary from a few hours to a few days.\n\n<p align=\"center\"><img src=\"https://media.tenor.com/images/b562ddcfb131e962f9dfa01bd32a30d1/tenor.gif\" width=50%></p>\n\n## Project Admin👨‍\n\n<p align=\"center\">\n<img width=50% src=\"https://i.postimg.cc/qBmW9QyM/profile.gif\">\n</p>\n\n<a href=\"https://www.linkedin.com/in/qazi-maaz-arshad/\">\n<h5 align=\"center\"><b>Qazi Maaz Arshad</b></a>\n\n## Open Source Programs we have been associated with\n     \n<p align=\"center\">\n<a href=\"https://lgmsoc.co/\">\n<img  height=30% src=\"https://i.postimg.cc/2jPGcsqW/logo.png\">\n<a href=\"https://devincept.codes/projects.html\">\n<img width=50% src=\"https://raw.githubusercontent.com/smv1999/CompetitiveProgrammingQuestionBank/master/images/devincept.gif\">\n</p>\n<a href=\"https://hacktoberfest.digitalocean.com/\">\n<img width=30% src=\"https://hacktoberfest.digitalocean.com/_nuxt/img/logo-hacktoberfest-full.f42e3b1.svg\">\n</p>\n     \n## Code of Conduct\n<p align=\"center\">\n<a href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website/blob/master/CODE_OF_CONDUCT.md\">\n<img width=55% src=\"https://media.giphy.com/media/qHRwTyhWIj4UU/200w_d.gif\"></p>\n<h5 align=\"center\"><b>Click to read</b></a>\n  \n## License \n<p align=\"center\">\n<a href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website/blob/master/LICENSE\">\n<img width=55% src=\"https://media0.giphy.com/media/3ornjXbo3cjqh2BIyY/200.gif\"></p>\n<h5 align=\"center\"><b>MIT License</b></a>  \n  \n## Contributors\n<a href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=QAZIMAAZARSHAD/Movie-Streaming-Website\" />\n</a>\n\n"
  },
  {
    "path": "action.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width\">\n    <title>ApnaTheatre.com</title>\n    <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\" integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"\n    />\n    <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n\n    <!-- Font  -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n    <link rel=\"stylesheet\" href=\"static/bootstrap.min.css\">\n    <link rel=\"stylesheet\" href=\"static/style-min.css\">\n    <link rel=\"stylesheet\" href=\"cards.css\">\n\n\n\n</head>\n\n<!------------------------Scroll to top button------------------------------------------------>\n<style>\n  #scrollToTopButton{\nposition:fixed;\nbottom: 40px;\nright: 25px;\nfont-size: 25px;\nz-index: 99;\nwidth: 50px;\nheight: 50px;\nbackground-color:red;\ncolor:black;\nborder: none;\ncursor: pointer;\noutline: none;\npadding: 6px;\nborder-radius: 50%;\n}\n#scrollToTopButton:hover, i:hover {\nbackground-color:white;\ncolor:red;\n}\n#nav:hover\n{\n  background-color:#e60e23!important;\n\n}\n\n.container {\n  text-align: center;\n}\n\n.navbar-nav{\n  display: flex;\n  align-items: center;\n  padding: 0px 7.5px;\n}\n.nav-item :hover{\n  margin-bottom: 10px;\n \n  \n}\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n</style>\n\n\n<body>\n    <div class=\"scroll-bar\">\n\n        <!-- navbar starts -->\n\n        <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n      <div class=\"container-fluid\">\n        <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n            height=\"24\"></a>\n        <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n          data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n          <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n        </button>\n        \n        <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n          <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n            <li class=\"nav-item\">\n              <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"tv.html\">TV</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n            </li>\n            \n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n            </li>\n            <li>\n              <!-- Genre dropdown starts-->\n              <div>\n                <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                    <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                        Genres\n                    </button>\n                    <div class=\"dropdown-content\" style=\"color: white;\">\n                        <a href=\"popular.html\">Popular</a>\n                        <a href=\"crime.html\">Crime</a>\n                        <a href=\"suspense.html\">Suspense & Thriller</a>\n                        <a href=\"action.html\">Action</a>\n                        <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                        <a href=\"documentary.html\">Documentary</a>\n                        <a href=\"horror.html\">Horror</a>\n                        <a href=\"drama.html\">Drama</a>\n                        <a href=\"war.html\">War & Politics</a>\n                        <a href=\"comedy.html\">Comedy</a>\n                        <a href=\"romance.html\">Romance</a>\n                        <a href=\"anime.html\">Anime</a>\n                      </div>\n                </div>\n              </div>\n              <!-- Genre dropdown ends-->\n            </li>\n            <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n            <li>\n              <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n            </li>\n          </div>\n          </ul>\n          <form id=\"searchForm\" class=\"d-flex\">\n            <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n            <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n          </form>\n        </div>\n      </div>\n      </nav>\n\n        <!-- navbar ends -->\n\n        <div class=\"maincontainer\">\n            <div class=\"container\">\n                <div id=\"movies\" class=\"row\"></div>\n            </div>\n            <hr>\n            <h2>Action</h2>\n            <hr>\n            <div class=\"container\" id=\"Movies\">\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/got.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1 style=\"font-size: 35px;\">Game of Thrones</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2011</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">8</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.2</button>\n                      \n                      <br>\n                      <br>\n                    </p>\n\n                      <p class=\"para_i\">Nine noble families wage war against each other in order to gain control over the mythical land of Westeros.\n                         Meanwhile, a force is rising after millenniums and threatens the existence of living men.</p>\n\n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin(){\n                              window.open(\"https://youtu.be/gcTkNV5Vg1E\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Game of Thrones</b>\n                          <br>\n                          IMDb - 9.2\n                      </div>\n                  </div>\n                </div>\n              \n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/zinda.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Zindabaad</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.4</button>\n                      \n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Zindabaad is a political - action thriller, jointly produced by Vikram Bhatt's VB on the web and Jio cinema</p>\n\n                     \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin1()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin1(){\n                              window.open(\"https://youtu.be/xIKkJk3qvjU\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Zindabaad</b>\n                          <br>\n                          IMDb - 7.4\n                      </div>\n                  \n                </div>\n              </div>\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/vikings.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Vikings</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2013</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">5</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.5</button>\n                      \n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Ragnar Lothbrok, a legendary Norse hero, is a mere farmer who rises up to become a fearless warrior and commander of the Viking tribes with the support of his equally ferocious family.</p>\n\n                      \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin2()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin2(){\n                              window.open(\"https://youtu.be/9GgxinPwAGc\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Vikings</b>\n                          <br>\n                          IMDb - 8.5\n                      </div>\n                  </div>\n                \n              </div>\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/gangs of wassepur.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Gangs of Wasseypur</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2012</button>\n                        <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h40m</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\n                      \n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Gangs of Wasseypur is a 2012 Indian two-part crime film produced and directed by Anurag Kashyap, and written by Kashyap and Zeishan Quadri.</p>\n\n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin3()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin3(){\n                              window.open(\"https://youtu.be/j-AkWDkXcMY\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Gangs of Wasseypur</b>\n                          <br>\n                          IMDb - 8.2\n                      </div>\n                  \n                </div>\n              </div>\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/arrow.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Arrow</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2012</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">8</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.5</button>\n                      \n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">After mastering the skill of archery on a deserted island, multi-millionaire playboy Oliver Queen returns to his city to take on the vigilante persona of Arrow to fight crime and corruption.</p>\n\n                 \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin4()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin4(){\n                              window.open(\"https://youtu.be/ofzPONG8hDU\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Arrow</b>\n                          <br>\n                          IMDb - 7.5\n                      </div>\n                  </div>\n                \n              </div>\n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/apharan.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Apharan</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.3</button>\n                      \n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Rudra, a senior inspector, is lured into kidnapping a young girl at the behest of her mother</p>\n\n                \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin5()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin5(){\n                              window.open(\"https://youtu.be/CxNYucYVEkQ\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Apharan</b>\n                          <br>\n                          IMDb - 8.3\n                      </div>\n                  \n                </div>\n              </div>\n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/war.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>War</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                        <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h34m</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">6.5</button>\n                      \n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Kabir, a secret agent, goes rogue after a mission to catch a terrorist goes awry. However, his boss sends Khalid, another agent and his student, to track him down.</p>\n\n            \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin6()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin6(){\n                              window.open(\"https://youtu.be/tQ0mzXRk-oM\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>War</b>\n                          <br>\n                          IMDb - 6.5\n                      </div>\n                  </div>\n                \n              </div>\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/kgf.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>KGF</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                        <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h50m</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.3</button>\n                      \n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Rocky, a young man, seeks power and wealth in order to fulfil a promise to his dying mother. His quest takes him to Mumbai, where he gets involved with the notorious gold mafia.</p>\n\n                     \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin7()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin7(){\n                              window.open(\"https://youtu.be/-KfsY-qwBS0\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>KGF</b>\n                          <br>\n                          IMDb - 8.3\n                      </div>\n                  </div>\n                \n              </div>\n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/django.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Django Unchained</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2012</button>\n                        <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h45m</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.4</button>\n                      \n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">When Django, a slave, is freed, he joins forces with a bounty hunter to rescue his wife, who has been enslaved by Calvin, a hard-hearted plantation owner.</p>\n\n                       \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin8()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin8(){\n                              window.open(\"https://youtu.be/_iH0UBYDI4g\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Django Unchained</b>\n                          <br>\n                          IMDb -8.4\n                      </div>\n                  \n                </div>\n              </div>\n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/endgame.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Avengers : Endgame</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                        <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">3h2m</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.4</button>\n                      \n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">After Thanos, an intergalactic warlord, disintegrates half of the universe, the Avengers must reunite and assemble again to reinvigorate their trounced allies and restore balance.</p>\n\n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin9()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin9(){\n                              window.open(\"https://youtu.be/TcMBFSGVi1c\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Avengers : Endgame</b>\n                          <br>\n                          IMDb - 8.4\n                      </div>\n                  \n                </div>\n              </div>\n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/infinity.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Avengers : Infinity War</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                        <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h40m<button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.4</button>\n                      \n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">The Avengers must stop Thanos, an intergalactic warlord, from getting his hands on all the infinity stones. However, Thanos is prepared to go to any lengths to carry out his insane plan.</p>\n\n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin10()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin10(){\n                              window.open(\"https://youtu.be/6ZfuNTqbHE8\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                        </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Avengers : Infinity War</b>\n                          <br>\n                          IMDb - 8.4\n                      \n                  </div>\n                </div>\n              </div>\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/ter.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Terminator Series</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">1984</button>\n                        <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">1h48m</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.0</button>\n                      \n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">A cyborg assassin is sent back in time to kill Sarah, a waitress, in a bid to stop her son who will wage a long war against his enemy in the future unless the course of history is altered.</p>\n\n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin11()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin11(){\n                              window.open(\"https://youtu.be/k64P4l2Wmeg\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Terminator Series</b>\n                          <br>\n                          IMDb - 8.0\n                      </div>\n                  \n                </div>\n              </div>\n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/star.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Star Wars Series</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">1977</button>\n                        <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h5m</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.6</button>\n                      \n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">After Princess Leia, the leader of the Rebel Alliance, is held hostage by Darth Vader, Luke and Han Solo must free her and destroy the powerful weapon created by the Galactic Empire.</p>\n\n             \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin12()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin12(){\n                              window.open(\"https://youtu.be/vZ734NWnAHA\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Star Wars Series</b>\n                          <br>\n                          IMDb - 8.6\n                      </div>\n                  \n                </div>\n              </div>\n            </div>\n        </div>\n    </div>\n\n\n\n    <!-------------------------------Footer-------------------------------->\n    <div id=\"waterdrop\"></div>\n    <footer class=\"footer\">\n      <hr class=\"footer-hr\">\n        <div class=\"footer-content\">\n            <div class=\"footer-left\">\n                <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\" height=\"24\"></a>\n                <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Follow Us</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i class=\"fab fa-github github\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Services</h2>\n                <ul class=\"footer-middle-list\">\n                    <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n                    \n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Try Our App</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-right\">\n                <p class=\"footer-links\">\n                    <h2 class=\"footer-heading\">Contact Us</h2>\n                    <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n                    <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n                </p>\n            </div>\n        </div>\n        <hr class=\"footer-hr\">\n        <div class=\"footer-copyright\">\n            <p>Copyright &copy; and &reg; Since\n                <script>\n                    document.write(new Date().getFullYear())\n                </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>\n        </div>\n    </footer>\n\n    <!----------------------Scroll to top button--------------------------------------------->\n    <button  id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\" >\n      <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\" ></i>\n  </button>\n  <script>\n    $(document).ready(function(){\n      var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n      // window.onscroll = function () { scrollFunction() };\n\n    //   function scrollFunction() {\n    //   if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n    //     scrollTopButton.style.display = \"block\";\n    //   } else {\n    //     scrollTopButton.style.display = \"none\";\n    //   }\n    // }\n\n    $(\"#scrollToTopButton\").click(function(){\n    $('html ,body').animate({scrollTop : 0},800)\n  });\n  });\n  </script>\n    <script>\n      function logout(){\n        window.location.replace(\"login.html\");\n      }\n    </script>\n\n    <!-- offcanva JS and footer js -->\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n    <script src=\"js/main-min.js\"></script>\n\n    <script>\n        jQuery('#waterdrop').raindrops({\n            color: '#292c2f',\n            canvasHeight: 150,\n            density: 0.1,\n            frequency: 20\n        });\n    </script>\n     \n\n  </script>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\" crossorigin=\"anonymous\"></script>\n    <script src=\"./static/script.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "anime.html",
    "content": "<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n    <meta charset=\"utf-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width\">\r\n    <title>ApnaTheatre.com</title>\r\n    <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\r\n    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\r\n\r\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\" integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"\r\n    />\r\n    <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\r\n\r\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\r\n\r\n    <!-- Font  -->\r\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\r\n\r\n    <link rel=\"stylesheet\" href=\"static/bootstrap.min.css\">\r\n    <link rel=\"stylesheet\" href=\"static/style-min.css\">\r\n    <link rel=\"stylesheet\" href=\"cards.css\">\r\n\r\n\r\n<!------------------------Scroll to top button------------------------------------------------>\r\n<style>\r\n    #scrollToTopButton{\r\n  position:fixed;\r\n  bottom: 40px;\r\n  right: 25px;\r\n  font-size: 25px;\r\n  z-index: 99;\r\n  width: 50px;\r\n  height: 50px;\r\n  background-color:red;\r\n  color:black;\r\n  border: none;\r\n  cursor: pointer;\r\n  outline: none;\r\n  padding: 6px;\r\n  border-radius: 50%;\r\n  }\r\n  #scrollToTopButton:hover, i:hover {\r\n  background-color:white;\r\n  color:red;\r\n  }\r\n\r\n\r\n        .scroll-bar {\r\n            height: auto;\r\n            width: auto;\r\n            margin: auto;\r\n            overflow-y: auto;\r\n            overflow-x: hidden;\r\n            max-width: 100%;\r\n        }\r\n\r\n         ::-webkit-scrollbar-track {\r\n            border: 5px solid #2c2f30;\r\n            background-color: red;\r\n        }\r\n\r\n         ::-webkit-scrollbar {\r\n            width: 15px;\r\n            background-color: #2c2f30;\r\n        }\r\n\r\n         ::-webkit-scrollbar-thumb {\r\n            background-color: black;\r\n            border-radius: 10px;\r\n        }\r\n\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n\r\n        .menu li a:hover {\r\n            color: red !important;\r\n            opacity: 0.5;\r\n        }\r\n\r\n        #variety {\r\n            margin-top: 1rem;\r\n            margin-bottom: 0.5rem;\r\n        }\r\n\r\n        .logo {\r\n            width: 81px;\r\n            height: 52px;\r\n        }\r\n        \r\n.nav-item :hover{\r\n  margin-bottom: 10px;\r\n \r\n  \r\n}\r\n#header-nav .navbar-nav .nav-item .nav-link:hover {\r\n  color: red;\r\n  text-decoration: none; /* Remove underline */\r\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\r\n  text-shadow: 0 0 10px red; /* Add glowing effect */\r\n}\r\n     \r\n\r\n        .logo {\r\n            width: 110px;\r\n            height: 90px;\r\n            padding: 3px;\r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n\r\n  .container {\r\n  text-align: center;\r\n}\r\n    </style>\r\n</head>\r\n\r\n<body>\r\n    <div class=\"scroll-bar\">\r\n\r\n       <!-- navbar starts -->\r\n\r\n       <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\r\n        <div class=\"container-fluid\">\r\n          <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\r\n              height=\"24\"></a>\r\n          <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\r\n            data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n            <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\r\n          </button>\r\n          \r\n          <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\r\n            <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\r\n              </li>\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" href=\"movies.html\">Movies</a>\r\n              </li>\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\r\n              </li>\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" href=\"kids.html\">Kids</a>\r\n              </li>\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" href=\"tv.html\">TV</a>\r\n              </li>\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" href=\"premium.html\">Premium</a>\r\n              </li>\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\r\n              </li>\r\n              <li>\r\n                <!-- Genre dropdown starts-->\r\n                <div>\r\n                  <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\r\n                      <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\r\n                          Genres\r\n                      </button>\r\n                      <div class=\"dropdown-content\" style=\"color: white;\">\r\n                          <a href=\"popular.html\">Popular</a>\r\n                          <a href=\"crime.html\">Crime</a>\r\n                          <a href=\"suspense.html\">Suspense & Thriller</a>\r\n                          <a href=\"action.html\">Action</a>\r\n                          <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\r\n                          <a href=\"documentary.html\">Documentary</a>\r\n                          <a href=\"horror.html\">Horror</a>\r\n                          <a href=\"drama.html\">Drama</a>\r\n                          <a href=\"war.html\">War & Politics</a>\r\n                          <a href=\"comedy.html\">Comedy</a>\r\n                          <a href=\"romance.html\">Romance</a>\r\n                          <a href=\"anime.html\">Anime</a>\r\n                        </div>\r\n                  </div>\r\n                </div>\r\n                <!-- Genre dropdown ends-->\r\n              </li>\r\n              <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\r\n                <li>\r\n                  <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\r\n                </li>\r\n              </div>\r\n            </ul>\r\n            <form id=\"searchForm\" class=\"d-flex\">\r\n              <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\r\n              <button class=\"btn btn-danger\" type=\"submit\">Search</button>\r\n            </form>\r\n          </div>\r\n        </div>\r\n        </nav>\r\n  \r\n          <!-- navbar ends -->\r\n\r\n        <div class=\"maincontainer\">\r\n            <h2>ANIME</h2>\r\n            <hr>\r\n            <div class=\"container\">\r\n                <div id=\"movies\" class=\"row\"></div>\r\n            </div>\r\n            <hr>\r\n\r\n\r\n\r\n            <div class=\"container\" id=\"TV shows\">\r\n\r\n                <div class=\"poster\">\r\n                    <div class=\"flip-card_i\">\r\n                      <div class=\"flip-card-inner_i\">\r\n                        <div class=\"flip-card-front_i\">\r\n                            <img src=\"./Images/deathnote.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\r\n                        </div>\r\n                        <div class=\"flip-card-back_i\">\r\n                          <h1>Death Note</h1>\r\n                          <div class=\"btnContainer\">\r\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2006</button>\r\n                            <button class=\"btn_i b2_i\"  title=\"Episodes\" style=\"color:white\">37<button>\r\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.0</button>\r\n                          </div>\r\n                            \r\n                          \r\n                          <br />\r\n                          <br />\r\n                        </p>\r\n          \r\n                          <p class=\"para_i\"style=\"margin-top: -35px;\">An intelligent high school student goes on a secret crusade to eliminate criminals from the world after discovering a notebook capable of killing anyone whose name is written into it.</p>\r\n          \r\n                            \r\n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin()\">▶Trailer</button>\r\n                              <script type=\"text/javascript\">\r\n                                function openWin(){\r\n                                  window.open(\"https://youtu.be/NlJZ-YgAt-c\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\r\n                                }\r\n                              </script><br>\r\n                            <br>\r\n                            <button class=\"b4_i\">▶Play</button>\r\n                              </div>\r\n                        </div>\r\n                          <div class=\"flim\">\r\n                              <b>DeathNote</b>\r\n                              <br>\r\n                              IMDb - 9.0\r\n                          </div>\r\n                      </div>\r\n                    \r\n                  </div> \r\n                  <div class=\"poster\">\r\n                    <div class=\"flip-card_i\">\r\n                      <div class=\"flip-card-inner_i\">\r\n                        <div class=\"flip-card-front_i\">\r\n                            <img src=\"./Images/naruto.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\r\n                        </div>\r\n                        <div class=\"flip-card-back_i\">\r\n                          <h1>Naruto</h1>\r\n                          <div class=\"btnContainer\">\r\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2002</button>\r\n                            <button class=\"btn_i b2_i\"  title=\"Episodes\" style=\"color:white\">220<button>\r\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.3</button>\r\n                        </div>  \r\n                        \r\n                          <br />\r\n                          <br />\r\n                        </p>\r\n          \r\n                          <p class=\"para_i\"style=\"margin-top: -35px;\">Naruto Uzumaki, a mischievous adolescent ninja, struggles as he searches for recognition and dreams of becoming the Hokage, the village's leader and strongest ninja.</p>\r\n          \r\n                            \r\n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin1()\">▶Trailer</button>\r\n                              <script type=\"text/javascript\">\r\n                                function openWin1(){\r\n                                  window.open(\"https://youtu.be/-G9BqkgZXRA\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\r\n                                }\r\n                              </script><br>\r\n                             <br>\r\n                        <button class=\"btn_i b4_i\">▶Play</button>\r\n                              </div>\r\n                        </div>\r\n                          <div class=\"flim\">\r\n                              <b>Naruto</b>\r\n                              <br>\r\n                              IMDb - 8.3\r\n                          </div>\r\n                      \r\n                    </div>\r\n                  </div> \r\n                  <div class=\"poster\">\r\n                    <div class=\"flip-card_i\">\r\n                      <div class=\"flip-card-inner_i\">\r\n                        <div class=\"flip-card-front_i\">\r\n                            <img src=\"./Images/Aot.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\r\n                        </div>\r\n                        <div class=\"flip-card-back_i\">\r\n                          <h1 style=\"font-size: 30px;\">Attack on Titan</h1>\r\n                          <div class=\"btnContainer\">\r\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2013</button>\r\n                            <button class=\"btn_i b2_i\"  title=\"Episodes\" style=\"color:white\">75<button>\r\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.0</button>\r\n                        </div>\r\n                          \r\n                          <br />\r\n                          <br />\r\n                        </p>\r\n          \r\n                          <p class=\"para_i\"style=\"margin-top: -35px;\">After his hometown is destroyed and his mother is killed, young Eren Jaeger vows to cleanse the earth of the giant humanoid Titans that have brought humanity to the brink of extinction.</p>\r\n          \r\n                            \r\n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin2()\">▶Trailer</button>\r\n                              <script type=\"text/javascript\">\r\n                                function openWin2(){\r\n                                  window.open(\"https://youtu.be/o_go-8TFBXs\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\r\n                                }\r\n                              </script><br>\r\n                            <br>\r\n                        <button class=\"btn_i b4_i\">▶Play</button>\r\n                              </div>\r\n                        </div>\r\n                          <div class=\"flim\">\r\n                              <b>Attack on Titan</b>\r\n                              <br>\r\n                              IMDb - 9.0\r\n                          </div>\r\n                      \r\n                    </div>\r\n                  </div> \r\n                  <div class=\"poster\">\r\n                    <div class=\"flip-card_i\">\r\n                      <div class=\"flip-card-inner_i\">\r\n                        <div class=\"flip-card-front_i\">\r\n                            <img src=\"./Images/demonSlayer.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\r\n                        </div>\r\n                        <div class=\"flip-card-back_i\">\r\n                          <h1 style=\"font-size: 30px;\">Demon Slayer</h1>\r\n                          <div class=\"btnContainer\">\r\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\r\n                            <button class=\"btn_i b2_i\"  title=\"Episodes\" style=\"color:white\">26<button>\r\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.7</button>\r\n                        </div>\r\n                          \r\n                          <br />\r\n                          <br />\r\n                        </p>\r\n          \r\n                          <p class=\"para_i\"style=\"margin-top: -35px;\">A family is attacked by demons and only two members survive - Tanjiro and his sister Nezuko, who is turning into a demon slowly. Tanjiro sets out to become a demon slayer to avenge his family and cure his sister.</p>\r\n          \r\n                            \r\n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin3()\">▶Trailer</button>\r\n                              <script type=\"text/javascript\">\r\n                                function openWin3(){\r\n                                  window.open(\"https://youtu.be/VQGCKyvzIM4\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\r\n                                }\r\n                              </script><br>\r\n                            <br>\r\n                        <button class=\"btn_i b4_i\">▶Play</button>\r\n                              </div>\r\n                        </div>\r\n                          <div class=\"flim\">\r\n                              <b>Demon Slayer</b>\r\n                              <br>\r\n                              IMDb - 8.7\r\n                          </div>\r\n                      \r\n                    </div>\r\n                  </div> \r\n                  <div class=\"poster\">\r\n                    <div class=\"flip-card_i\">\r\n                      <div class=\"flip-card-inner_i\">\r\n                        <div class=\"flip-card-front_i\">\r\n                            <img src=\"./Images/one-punch-man.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\r\n                        </div>\r\n                        <div class=\"flip-card-back_i\">\r\n                          <h1 style=\"font-size: 30px;\">One Punch Man</h1>\r\n                          <div class=\"btnContainer\">\r\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2015</button>\r\n                            <button class=\"btn_i b2_i\"  title=\"Episodes\" style=\"color:white\">24<button>\r\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.8</button>\r\n                        </div>\r\n                          \r\n                          <br />\r\n                          <br />\r\n                        </p>\r\n          \r\n                          <p class=\"para_i\">The story of Saitama, a hero that does it just for fun & can defeat his enemies with a single punch.</p>\r\n          \r\n                            \r\n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin4()\">▶Trailer</button>\r\n                              <script type=\"text/javascript\">\r\n                                function openWin4(){\r\n                                  window.open(\"https://youtu.be/2JAElThbKrI\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\r\n                                }\r\n                              </script><br>\r\n                            <br>\r\n                            <button class=\"btn_i b4_i\">▶Play</button>\r\n                              </div>\r\n                        </div>\r\n                          <div class=\"flim\">\r\n                              <b>One Punch Man</b>\r\n                              <br>\r\n                              IMDb - 8.8\r\n                          </div>\r\n                      </div>\r\n                    \r\n                  </div> \r\n                  <div class=\"poster\">\r\n                    <div class=\"flip-card_i\">\r\n                      <div class=\"flip-card-inner_i\">\r\n                        <div class=\"flip-card-front_i\">\r\n                            <img src=\"./Images/tokyo.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\r\n                        </div>\r\n                        <div class=\"flip-card-back_i\">\r\n                          <h1 style=\"font-size: 30px;\">Tokyo Ghoul</h1>\r\n                          <div class=\"btnContainer\">\r\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2014</button>\r\n                            <button class=\"btn_i b2_i\"  title=\"Episodes\" style=\"color:white\">12<button>\r\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.8</button>\r\n                        </div>\r\n                          \r\n                          <br />\r\n                          <br />\r\n                        </p>\r\n          \r\n                          <p class=\"para_i\"style=\"margin-top: -40px;\">A Tokyo college student is attacked by a ghoul, a superpowered human who feeds on human flesh. He survives, but has become part ghoul and becomes a fugitive on the run.</p>\r\n          \r\n                           \r\n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin5()\">▶Trailer</button>\r\n                              <script type=\"text/javascript\">\r\n                                function openWin5(){\r\n                                  window.open(\"https://youtu.be/ETHpMMV8rJU\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\r\n                                }\r\n                              </script><br>\r\n                            <br>\r\n                        <button class=\"btn_i b4_i\">▶Play</button>\r\n                              </div>\r\n                        </div>\r\n                          <div class=\"flim\">\r\n                              <b>Tokyo Ghoul</b>\r\n                              <br>\r\n                              IMDb - 7.8\r\n                          </div>\r\n                      \r\n                    </div>\r\n                  </div> \r\n                  <div class=\"poster\">\r\n                    <div class=\"flip-card_i\">\r\n                      <div class=\"flip-card-inner_i\">\r\n                        <div class=\"flip-card-front_i\">\r\n                            <img src=\"./Images/fullMetal.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\r\n                        </div>\r\n                        <div class=\"flip-card-back_i\">\r\n                          <h1 style=\"font-size: 30px;\">Fullmetal Alchemist</h1>\r\n                          <div class=\"btnContainer\">\r\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2003</button>\r\n                            <button class=\"btn_i b2_i\"  title=\"Episodes\" style=\"color:white\">51<button>\r\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.5</button>\r\n                        </div>\r\n                        \r\n                          <br />\r\n                          <br />\r\n                        </p>\r\n          \r\n                          <p class=\"para_i\" style=\"margin-top: -40px;\">When a failed alchemical ritual leaves brothers Edward and Alphonse Elric with severely damaged bodies, they begin searching for the one thing that can save them, the fabled philosopher's stone.</p>\r\n          \r\n                           \r\n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin6()\">▶Trailer</button>\r\n                              <script type=\"text/javascript\">\r\n                                function openWin6(){\r\n                                  window.open(\"https://youtu.be/2Dsa8j_usqI\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\r\n                                }\r\n                              </script><br>\r\n                            <br>\r\n                        <button class=\"btn_i b4_i\">▶Play</button>\r\n                              </div>\r\n                        </div>\r\n                          <div class=\"flim\">\r\n                              <b>Fullmetal Alchemist</b>\r\n                              <br>\r\n                              IMDb - 8.5\r\n                          </div>\r\n                      \r\n                    </div>\r\n                  </div> \r\n                  <div class=\"poster\">\r\n                    <div class=\"flip-card_i\">\r\n                      <div class=\"flip-card-inner_i\">\r\n                        <div class=\"flip-card-front_i\">\r\n                            <img src=\"./Images/onePiece.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\r\n                        </div>\r\n                        <div class=\"flip-card-back_i\">\r\n                          <h1>One Piece</h1>\r\n                          <div class=\"btnContainer\">\r\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">1999</button>\r\n                            <button class=\"btn_i b2_i\"  title=\"Episodes\" style=\"color:white\">981<button>\r\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.8</button>\r\n                        </div>\r\n                        \r\n                          <br />\r\n                          <br />\r\n                        </p>\r\n          \r\n                          <p class=\"para_i\"style=\"margin-top: -35px;\">Follows the adventures of Monkey D. Luffy and his pirate crew in order to find the greatest treasure ever left by the legendary Pirate, Gold Roger. The famous mystery treasure named \"One Piece\".</p>\r\n          \r\n                            \r\n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin7()\">▶Trailer</button>\r\n                              <script type=\"text/javascript\">\r\n                                function openWin7(){\r\n                                  window.open(\"https://youtu.be/S8_YwFLCh4U\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\r\n                                }\r\n                              </script><br>\r\n                            <br>\r\n                        <button class=\"btn_i b4_i\">▶Play</button>\r\n                              </div>\r\n                        </div>\r\n                          <div class=\"flim\">\r\n                              <b>One Piece</b>\r\n                              <br>\r\n                              IMDb - 8.8\r\n                          </div>\r\n                      </div>\r\n                    \r\n                  </div> \r\n                  <div class=\"poster\">\r\n                    <div class=\"flip-card_i\">\r\n                      <div class=\"flip-card-inner_i\">\r\n                        <div class=\"flip-card-front_i\">\r\n                            <img src=\"./Images/hunter.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\r\n                        </div>\r\n                        <div class=\"flip-card-back_i\">\r\n                          <h1 style=\"font-size: 30px;\">Hunter x Hunter</h1>\r\n                          <div class=\"btnContainer\">\r\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2011</button>\r\n                            <button class=\"btn_i b2_i\"  title=\"Episodes\" style=\"color:white\">148<button>\r\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.0</button>\r\n                        </div>\r\n                        \r\n                          <br />\r\n                          <br />\r\n                        </p>\r\n          \r\n                          <p class=\"para_i\"style=\"margin-top: -35px;\">Gon Freecss aspires to become a Hunter, an exceptional being capable of greatness. With his friends and his potential, he seeks for his father who left him when he was younger.</p>\r\n          \r\n                            \r\n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin8()\">▶Trailer</button>\r\n                              <script type=\"text/javascript\">\r\n                                function openWin8(){\r\n                                  window.open(\"https://youtu.be/d6kBeJjTGnY\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\r\n                                }\r\n                              </script><br>\r\n                            <br>\r\n                        <button class=\"btn_i b4_i\">▶Play</button>\r\n                              </div>\r\n                        </div>\r\n                          <div class=\"flim\">\r\n                              <b>Hunter x Hunter</b>\r\n                              <br>\r\n                              IMDb - 9.0\r\n                          \r\n                      </div>\r\n                    </div>\r\n                  </div> \r\n                  <div class=\"poster\">\r\n                    <div class=\"flip-card_i\">\r\n                      <div class=\"flip-card-inner_i\">\r\n                        <div class=\"flip-card-front_i\">\r\n                            <img src=\"./Images/code-geass.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\r\n                        </div>\r\n                        <div class=\"flip-card-back_i\">\r\n                          <h1>Code Geass</h1>\r\n                          <div class=\"btnContainer\">\r\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2006</button>\r\n                            <button class=\"btn_i b2_i\"  title=\"Episodes\" style=\"color:white\">50<button>\r\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.7</button>\r\n                        </div> \r\n                        \r\n                          <br />\r\n                          <br />\r\n                        </p>\r\n          \r\n                          <p class=\"para_i\"style=\"margin-top: -35px;\">After being given a mysterious power to control others, an outcast prince becomes the masked leader of the rebellion against an all powerful empire.</p>\r\n          \r\n                           \r\n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin9()\">▶Trailer</button>\r\n                              <script type=\"text/javascript\">\r\n                                function openWin9(){\r\n                                  window.open(\"https://youtu.be/v-AGjx0N24U\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\r\n                                }\r\n                              </script><br>\r\n                            <br>\r\n                        <button class=\"btn_i b4_i\" onclick=\"openMovieWin9()\">▶Play</button>\r\n                        </div>\r\n                        <script type=\"text/javascript\">\r\n                            function openMovieWin9(){\r\n                              window.open(\"https://youtube.com/playlist?list=PLxSscENEp7JhJi1De2SBVmkdPbKKUHZcg\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\r\n                            }\r\n                          </script>\r\n                        </div>\r\n                          <div class=\"flim\">\r\n                              <b>Code Geass</b>\r\n                              <br>\r\n                              IMDb - 8.7\r\n                          </div>\r\n                      </div>\r\n                    \r\n                  </div> \r\n                  <div class=\"poster\">\r\n                    <div class=\"flip-card_i\">\r\n                      <div class=\"flip-card-inner_i\">\r\n                        <div class=\"flip-card-front_i\">\r\n                            <img src=\"./Images/gintama.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\r\n                        </div>\r\n                        <div class=\"flip-card-back_i\">\r\n                          <h1>Gintama</h1>\r\n                          <div class=\"btnContainer\">\r\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2005</button>\r\n                            <button class=\"btn_i b2_i\"  title=\"Episodes\" style=\"color:white\">367<button>\r\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.6</button>\r\n                        </div> \r\n                        \r\n                          <br />\r\n                          <br />\r\n                        </p>\r\n          \r\n                          <p class=\"para_i\"style=\"margin-top: -35px;\">In an era where aliens have invaded and taken over feudal Tokyo, an unemployed samurai finds work however he can.</p>\r\n          \r\n                          \r\n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin10()\">▶Trailer</button>\r\n                              <script type=\"text/javascript\">\r\n                                function openWin10(){\r\n                                  window.open(\"https://youtu.be/YQC3ot0IjiA\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\r\n                                }\r\n                              </script><br>\r\n                            <br>\r\n                        <button class=\"btn_i b4_i\">▶Play</button>\r\n                              </div>\r\n                        </div>\r\n                          <div class=\"flim\">\r\n                              <b>Gintama</b>\r\n                              <br>\r\n                              IMDb - 8.7\r\n                          \r\n                      </div>\r\n                    </div>\r\n                  </div> \r\n                  <div class=\"poster\">\r\n                    <div class=\"flip-card_i\">\r\n                      <div class=\"flip-card-inner_i\">\r\n                        <div class=\"flip-card-front_i\">\r\n                            <img src=\"./Images/psycho-pass.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\r\n                        </div>\r\n                        <div class=\"flip-card-back_i\">\r\n                          <h1 style=\"font-size: 30px;\">Psycho Pass</h1>\r\n                          <div class=\"btnContainer\">\r\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2012</button>\r\n                            <button class=\"btn_i b2_i\"  title=\"Episodes\" style=\"color:white\">41<button>\r\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\r\n                        </div> \r\n                        \r\n                          <br />\r\n                          <br />\r\n                        </p>\r\n          \r\n                          <p class=\"para_i\"style=\"margin-top: -40px;\">Believing in humanity and order, policewoman Akane Tsunemori obeys the ruling, computerized, precognitive Sibyl System. But when she faces a criminal mastermind who can elude this \"perfect\" system, she questions both Sibyl and herself</p>\r\n          \r\n                            \r\n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin11()\">▶Trailer</button>\r\n                              <script type=\"text/javascript\">\r\n                                function openWin11(){\r\n                                  window.open(\"https://youtu.be/YzuJnyebc40\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\r\n                                }\r\n                              </script><br>\r\n                            <br>\r\n                        <button class=\"btn_i b4_i\">▶Play</button>\r\n                              </div>\r\n                        </div>\r\n                          <div class=\"flim\">\r\n                              <b>Psycho Pass</b>\r\n                              <br>\r\n                              IMDb - 8.2\r\n                          </div>\r\n                      \r\n                    </div>\r\n                  </div> \r\n               \r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <!-------------------------------Footer-------------------------------->\r\n    <div id=\"waterdrop\"></div>\r\n    <footer class=\"footer\">\r\n        <hr class=\"footer-hr\">\r\n        <div class=\"footer-content\">\r\n            <div class=\"footer-left\">\r\n                <a href=\"index.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\" height=\"24\"></a>\r\n                <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\r\n            </div>\r\n            <div class=\"footer-middle\">\r\n                <h2 class=\"footer-heading\">Follow Us</h2>\r\n                <ul class=\"footer-middle-list icons\">\r\n                    <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\r\n                    <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\r\n                    <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\r\n                    <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\r\n                    <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i class=\"fab fa-github github\" style=\"color:red\"></i></a>\r\n                </ul>\r\n            </div>\r\n            <div class=\"footer-middle\">\r\n                <h2 class=\"footer-heading\">Services</h2>\r\n                <ul class=\"footer-middle-list\">\r\n                    <li class=\"footer-middle-list-item\"><a href=\"index.html\">Enjoy Latest Movies</a> </li>\r\n                    <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\r\n                    <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\r\n                    <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\r\n                    <li class=\"footer-middle-list-item\"><a href=\"index.html\">Get Premium Subscription</a> </li>\r\n                    <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\r\n                </ul>\r\n            </div>\r\n            <div class=\"footer-middle\">\r\n                <h2 class=\"footer-heading\">Try Our App</h2>\r\n                <ul class=\"footer-middle-list icons\">\r\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\r\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\r\n                </ul>\r\n            </div>\r\n            <div class=\"footer-right\">\r\n                <p class=\"footer-links\">\r\n                    <h2 class=\"footer-heading\">Contact Us</h2>\r\n                    <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\r\n                    <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\r\n                </p>\r\n            </div>\r\n        </div>\r\n        <hr class=\"footer-hr\">\r\n        <div class=\"footer-copyright\">\r\n            <p>Copyright &copy; and &reg; Since\r\n                <script>\r\n                    document.write(new Date().getFullYear())\r\n                </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>\r\n        </div>\r\n    </footer>\r\n\r\n    <!---------scroll back to top button-->\r\n    <button  id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\" >\r\n        <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\"></i>\r\n      </button>\r\n      <script>\r\n      $(document).ready(function(){\r\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\r\n        window.onscroll = function () { scrollFunction() };\r\n\r\n        function scrollFunction() {\r\n        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\r\n          scrollTopButton.style.display = \"block\";\r\n        } else {\r\n          scrollTopButton.style.display = \"none\";\r\n        }\r\n      }\r\n\r\n      $(\"#scrollToTopButton\").click(function(){\r\n      $('html ,body').animate({scrollTop : 0},800)\r\n      });\r\n      });\r\n      </script>\r\n    <script>\r\n      function logout(){\r\n        window.location.replace(\"login.html\");\r\n      }\r\n    </script>\r\n    <!-- offcanva JS and footer js -->\r\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\r\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\r\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\r\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\r\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\r\n    <script src=\"js/main-min.js\"></script>\r\n\r\n    <script>\r\n        jQuery('#waterdrop').raindrops({\r\n            color: '#292c2f',\r\n            canvasHeight: 150,\r\n            density: 0.1,\r\n            frequency: 20\r\n        });\r\n    </script>\r\n\r\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\" crossorigin=\"anonymous\"></script>\r\n    <script src=\"./static/script.js\"></script>\r\n</body>\r\n\r\n</html>\r\n"
  },
  {
    "path": "cards.css",
    "content": "*{\n  font-family: 'Ubuntu', sans-serif;\n}\n.poster, .movie_card {\n  box-shadow: 0 0 10px red !important;\n\n}\n\n.flip-card_i{\n  position: relative;\n  background-color: transparent;\n  width: 250px;\n  height: 360px;\n  perspective: 1000px;\n  cursor: default;\n}\n@media only screen and (max-width: 298px) {\n  .flip-card_i{\n    width: 200px;\n    height: 400px;\n  }\n  \n\n\n  .flip-card-back_i{\n    width: 200px !important;\n    height: 400px !important;\n  }\n  .flip-card_i img {\n    height: 400px !important;\n    width: 200px !important;\n  }\n  .flip-card-back_i h1 {\n    font-size: 32px;\n  }\n}\nh1{\n  font-size: 45px;\n}\n.flip-card-inner_i {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  transition: transform 0.6s;\n  transform-style: preserve-3d;\n  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);\n  cursor: default;\n}\n\n.flip-card_i:hover .flip-card-inner_i {\n  transform: rotateY(180deg);\n}\n.btn_i{\n  width: 50px;\n height: 35px;\n border:none;\n border:solid 2px grey;\n border-radius: 5px;\n background: rgba(255, 255, 255,0);\n font-size: 1em;\n   }\n  .b1_i{\n    margin-left: 5px;\n    margin-right: 5px;\n  }\n  .b2_i{\n    margin-left: 10px;\n    margin-right: 10px;\n  }\n  .b3_i{\n    margin-left: 10px;\n    margin-right: 5px;\n  }\n  .b4_i{\n    \n    margin-bottom: 2px;;\n    width: 90px;\n    height: 35px;\n    margin-top: auto;\n    border:none;\n    border:solid 2px white;\n    border-radius: 5px;\n    background-color: #e7e7e7; \n    color: black;\n    font-size: 1em;\n  }\n\n  .trailer_i{\n    width: 90px;\n   height: 35px;\n   margin-top: auto;\n   border:none;\n   border:solid 2px white;\n   border-radius: 5px;\n   background-color: #e7e7e7; \n   color: black;\n   font-size: 1em;\n\n  }\n  .para_i{\n    font-size: 0.8em;\n    margin-bottom: 5px;\n  }\n.flip-card-front_i, .flip-card-back_i {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  -webkit-backface-visibility: hidden;\n  backface-visibility: hidden;\n}\n.form-group1_i {\n    float:left;\n}\n.form-group2_i{\n  float: none;\n\n}\n.form-group3_i {\n    float:right;\n}\n.flip-card-front_i {\n  background-color: #bbb;\n  color: black;\n}\n\n.flip-card-back_i {\n  width: 250px;\n  height: 360px;\n  background-image: linear-gradient(black,#8B0000);\n  color: white;\n  transform: rotateY(180deg);\n  cursor: default;\n}\n\n\n"
  },
  {
    "path": "comedy.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width\">\n    <title>ApnaTheatre.com</title>\n    <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n\n    <!-- Font  -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n        integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n        crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n\n    <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n    <link rel=\"stylesheet\" href=\"static/bootstrap.min.css\">\n    <link rel=\"stylesheet\" href=\"static/style-min.css\">\n    <link rel=\"stylesheet\" href=\"cards.css\">\n\n</head>\n\n\n<!------------------------Scroll to top button------------------------------------------------>\n<style>\n  #scrollToTopButton{\nposition:fixed;\nbottom: 40px;\nright: 25px;\nfont-size: 25px;\nz-index: 99;\nwidth: 50px;\nheight: 50px;\nbackground-color:red;\ncolor:black;\nborder: none;\ncursor: pointer;\noutline: none;\npadding: 6px;\nborder-radius: 50%;\n}\n#scrollToTopButton:hover, i:hover {\nbackground-color:white;\ncolor:red;\n}\n#nav:hover\n{\n  background-color:#e60e23!important;\n\n}\n\n.container {\n  text-align: center;\n}\n.nav-item :hover{\n  margin-bottom: 10px;\n  \n  \n}\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n\n</style>\n\n<body>\n    <div class=\"scroll-bar\">\n\n        <!-- navbar starts -->\n\n        <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n          <div class=\"container-fluid\">\n            <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n                height=\"24\"></a>\n            <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n              data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n              <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n            </button>\n            \n            <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n              <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n                <li class=\"nav-item\">\n                  <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"tv.html\">TV</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n                </li>\n                <li>\n                  <!-- Genre dropdown starts-->\n                  <div>\n                    <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                        <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                            Genres\n                        </button>\n                        <div class=\"dropdown-content\" style=\"color: white;\">\n                            <a href=\"popular.html\">Popular</a>\n                            <a href=\"crime.html\">Crime</a>\n                            <a href=\"suspense.html\">Suspense & Thriller</a>\n                            <a href=\"action.html\">Action</a>\n                            <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                            <a href=\"documentary.html\">Documentary</a>\n                            <a href=\"horror.html\">Horror</a>\n                            <a href=\"drama.html\">Drama</a>\n                            <a href=\"war.html\">War & Politics</a>\n                            <a href=\"comedy.html\">Comedy</a>\n                            <a href=\"romance.html\">Romance</a>\n                            <a href=\"anime.html\">Anime</a>\n                          </div>\n                    </div>\n                  </div>\n                  <!-- Genre dropdown ends-->\n                </li>\n                <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                  <li>\n                    <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n                  </li>\n                </div>\n              </ul>\n              <form id=\"searchForm\" class=\"d-flex\">\n                <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n                <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n              </form>\n            </div>\n          </div>\n          </nav>\n    \n            <!-- navbar ends -->\n\n        <div class=\"maincontainer\">\n            <div class=\"container\">\n                <div id=\"movies\" class=\"row\"></div>\n            </div>\n            <hr>\n            <h2>Comedy</h2>\n            <hr>\n            <div class=\"container\" id=\"Movies\">\n              <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/friends.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Friends</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">1994</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">10</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.9</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Follow the lives of six reckless adults living in Manhattan, as they indulge in adventures which make their lives both troublesome and happening.</p>\n\n                       \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin(){\n                                window.open(\"https://youtu.be/hDNNmeeJs1Q\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Friends</b>\n                            <br>\n                            IMDb - 8.9\n                        </div>\n                    </div>\n                  \n                </div>\n\n\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/big.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1 style=\"font-size: 44px;\">The Big Bang Theory</h1>\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2007</button>\n                            <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">12</button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.1</button>\n                          </span>\n                          <br />\n                          <br />\n                        </p>\n\n                          <p class=\"para_i\">The lives of four socially awkward friends, Leonard, Sheldon, Howard and Raj, take a wild turn when they meet the beautiful and free-spirited Penny.</p>\n\n                            \n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin1()\">▶Trailer</button>\n                              <script type=\"text/javascript\">\n                                function openWin1(){\n                                  window.open(\"https://youtu.be/WBb3fojgW0Q\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                }\n                              </script><br>\n                            <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                              </div>\n                        </div>\n                          <div class=\"flim\">\n                              <b>The Big Bang Theory</b>\n                              <br>\n                              IMDb - 8.1\n                          </div>\n                      \n                    </div>\n                  </div>\n\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/rick.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1>Rick And Morty</h1>\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2013</button>\n                            <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">4</button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.2</button>\n                          </span>\n                          <br />\n                          <br />\n                        </p>\n\n                          <p class=\"para_i\">After having been missing for nearly 20 years, Rick Sanchez suddenly arrives at daughter Beth's doorstep to move in with her and her family.</p>\n\n                          \n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin2()\">▶Trailer</button>\n                              <script type=\"text/javascript\">\n                                function openWin2(){\n                                  window.open(\"https://youtu.be/_uUcMwsR5hg\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                }\n                              </script><br>\n                            <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                              </div>\n                        </div>\n                          <div class=\"flim\">\n                              <b>Rick and Morty</b>\n                              <br>\n                              IMDb - 9.2\n                          </div>\n                      \n                    </div>\n                  </div>\n\n\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/php.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1>Phir Hera Pheri</h1>\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2006</button>\n                            <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2h34m</button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">6.9</button>\n                          </span>\n                          <br />\n                          <br />\n                        </p>\n\n                          <p class=\"para_i\">The lives of Raju, Shyam and Baburao change completely when they get cheated by a fraudster. Now, they must find another way to repay the loan they took from a dreaded gangster.</p>\n\n                            \n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin3()\">▶Trailer</button>\n                              <script type=\"text/javascript\">\n                                function openWin3(){\n                                  window.open(\"https://youtu.be/1rJQQCZcq2sc\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                }\n                              </script><br>\n                            <br>\n                        <button class=\"btn_i b4_i\" onclick=\"openMovieWin3()\">▶Play</button>\n                        </div>\n                        <script type=\"text/javascript\">\n                            function openMovieWin3(){\n                              window.open(\"https://youtu.be/TIQ5hrfermg\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script>\n                        </div>\n                          <div class=\"flim\">\n                              <b>Phir Hera Pheri</b>\n                              <br>\n                              IMDb - 6.9\n                          </div>\n                      </div>\n                    \n                  </div>\n\n\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/bach.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1>TVF Bachelors</h1>\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2016</button>\n                            <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\n                          </span>\n                          <br />\n                          <br />\n                        </p>\n\n                          <p class=\"para_i\">The series revolves around Four Bachelor Flatmates who in every episode will deal with a specific daily life bachelor related problem.</p>\n\n                            \n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin4()\">▶Trailer</button>\n                              <script type=\"text/javascript\">\n                                function openWin4(){\n                                  window.open(\"https://youtu.be/5XuimeH5hME\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                }\n                              </script><br>\n                            <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                        </div>\n                        <script type=\"text/javascript\">\n                            function openMovieWin43(){\n                              window.open(\"https://youtube.com/playlist?list=PLTB0eCoUXErabI_K3mUcdiYM72o4CkWZC\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script>\n                        </div>\n                          <div class=\"flim\">\n                              <b>TVF Bachelors</b>\n                              <br>\n                              IMDb - 8.2\n                          </div>\n                      \n                    </div>\n                  </div>\n\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/mbbs.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1>Munna Bhai MBBS</h1>\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2003</button>\n                            <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2h36m</button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.1</button>\n                          </span>\n                          <br />\n                          <br />\n                        </p>\n\n                          <p class=\"para_i\">Munna is a goon who sets out to fulfil his father's dream of becoming a doctor. With some help from his ally, Circuit, he enrols himself in a medical college and drives Dr Asthana up the wall.</p>\n\n                            \n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin5()\">▶Trailer</button>\n                              <script type=\"text/javascript\">\n                                function openWin5(){\n                                  window.open(\"https://youtu.be/6lCGvu-hwX4\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                }\n                              </script><br>\n                            <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                              </div>\n                        </div>\n                          <div class=\"flim\">\n                              <b>Munna Bhai MBBS</b>\n                              <br>\n                              IMDb - 8.1\n                          </div>\n                      </div>\n                    \n                  </div>\n\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/tom.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1 style=\"font-size: 20px;\">Tom and Jerry</h1>\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2021</button>\n                            <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1h41m</button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">5.3</button>\n                          </span>\n                          <br />\n                          <br />\n                        </p>\n\n                          <p class=\"para_i\">A legendary rivalry reemerges when Jerry moves into New York City's finest hotel on the eve of the wedding of the century, forcing the desperate event planner to hire Tom to get rid of him. \n                              As mayhem ensues, the escalating cat-and-mouse battle soon threatens to destroy her career, the wedding, and possibly the hotel itself.</p>\n\n                            \n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin6()\">▶Trailer</button>\n                             </div>\n                             <script type=\"text/javascript\">\n                                function openWin6(){\n                                  window.open(\"https://youtu.be/kP9TfCWaQT4\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                }\n                              </script><br>\n                            <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n\n                        </div>\n                          <div class=\"flim\">\n                              <b>Tom and Jerry</b>\n                              <br>\n                              IMDb - 5.3\n                          </div>\n                      </div>\n                    \n                  </div>\n\n\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/chhal.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1>Chhalaang</h1>\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                            <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2h16m</button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">6.8</button>\n                          </span>\n                          <br />\n                          <br />\n                        </p>\n\n                          <p class=\"para_i\">Montu is a lazy physical training instructor who does the bare minimum to stay employed. However, a new teacher threatens to take his job and the woman he loves.</p>\n\n                            \n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin7()\">▶Trailer</button>\n                              <script type=\"text/javascript\">\n                                function openWin7(){\n                                  window.open(\"https://youtu.be/BY-0SbSF2dE\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                }\n                              </script><br>\n                            <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                              </div>\n                        </div>\n                          <div class=\"flim\">\n                              <b>Chhalaang</b>\n                              <br>\n                              IMDb - 6.8\n                          </div>\n                      \n                    </div>\n                  </div>\n\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/permanent roommates.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1 style=\"font-size: 25px;\">Permanent Roommates</h1>\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2014</button>\n                            <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.6</button>\n                          </span>\n                          <br />\n                          <br />\n                        </p>\n\n                          <p class=\"para_i\">Permanent Roommates is an Indian romantic comedy web series produced by The Viral Fever Media Labs. It was created by Arunabh Kumar, the founder of TVF, who also worked as the executive producer of the series.</p>\n\n                          \n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin8()\">▶Trailer</button>\n                              <script type=\"text/javascript\">\n                                function openWin8(){\n                                  window.open(\"https://youtu.be/XsOjuDh4c-o\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                }\n                              </script><br>\n                            <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                              </div>\n                        </div>\n                          <div class=\"flim\">\n                              <b>Permanent Roommates</b>\n                              <br>\n                              IMDb - 8.6\n                          </div>\n                      \n                    </div>\n                  </div>\n\n\n\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/trip.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1>TVF Tripling</h1>\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2016</button>\n                            <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.6</button>\n                          </span>\n                          <br />\n                          <br />\n                        </p>\n\n                          <p class=\"para_i\">TVF Tripling is an Indian web series created by The Viral Fever. It was developed by Sameer Saxena and written by Akarsh Khurana and Sumeet Vyas.</p>\n\n                           \n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin9()\">▶Trailer</button>\n                              <script type=\"text/javascript\">\n                                function openWin9(){\n                                  window.open(\"https://youtu.be/MfKNEC9xcE8\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                }\n                              </script><br>\n                            <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                              </div>\n                        </div>\n                          <div class=\"flim\">\n                              <b>TVF Tripling</b>\n                              <br>\n                              IMDb - 8.6\n                          </div>\n                      \n                    </div>\n                  </div>\n\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/99.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1>Brooklyn Nine-Nine</h1>\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2013</button>\n                            <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">8</button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.4</button>\n                          </span>\n                          <br />\n                          <br />\n                        </p>\n\n                          <p class=\"para_i\">Ray Holt, an eccentric commanding officer, and his diverse and quirky team of odd detectives solve crimes in Brooklyn, New York City.</p>\n\n                            \n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin10()\">▶Trailer</button>\n                              <script type=\"text/javascript\">\n                                function openWin10(){\n                                  window.open(\"https://youtu.be/icTOP9F17pU\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                }\n                              </script><br>\n                            <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                              </div>\n                        </div>\n                          <div class=\"flim\">\n                              <b>Brooklyn Nine-Nine</b>\n                              <br>\n                              IMDb - 8.4\n                          </div>\n                      </div>\n                    \n                  </div>\n\n            </div>\n        </div>\n    </div>\n\n\n\n    <!-------------------------------Footer-------------------------------->\n    <div id=\"waterdrop\"></div>\n    <footer class=\"footer\">\n      <hr class=\"footer-hr\">\n        <div class=\"footer-content\">\n            <div class=\"footer-left\">\n                <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\" height=\"24\"></a>\n                <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Follow Us</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i class=\"fab fa-github github\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Services</h2>\n                <ul class=\"footer-middle-list\">\n                    <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Try Our App</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-right\">\n                <p class=\"footer-links\">\n                    <h2 class=\"footer-heading\">Contact Us</h2>\n                    <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n                    <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n                </p>\n            </div>\n        </div>\n        <hr class=\"footer-hr\">\n        <div class=\"footer-copyright\">\n            <p>Copyright &copy; and &reg; Since\n                <script>\n                    document.write(new Date().getFullYear())\n                </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>\n        </div>\n    </footer>\n<!----------------------------scroll to top button-->\n    <button  id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\" >\n        <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\"></i>\n    </button>\n    <script>\n      $(document).ready(function(){\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n        window.onscroll = function () { scrollFunction() };\n\n        function scrollFunction() {\n        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n          scrollTopButton.style.display = \"block\";\n        } else {\n          scrollTopButton.style.display = \"none\";\n        }\n      }\n\n      $(\"#scrollToTopButton\").click(function(){\n      $('html ,body').animate({scrollTop : 0},800)\n    });\n    });\n    </script>\n    <script>\n      function logout(){\n        window.location.replace(\"login.html\");\n      }\n    </script>\n    <!-- offcanva JS and footer js -->\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n    <script src=\"js/main-min.js\"></script>\n\n    <script>\n        jQuery('#waterdrop').raindrops({\n            color: '#292c2f',\n            canvasHeight: 150,\n            density: 0.1,\n            frequency: 20\n        });\n    </script>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\" crossorigin=\"anonymous\"></script>\n    <script src=\"./static/script.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "contactus.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" data-theme=\"light\">\n\n<head>\n  <title>Contact Us</title>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n\n  <!-- Font  -->\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n  <script src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js\"></script>\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n    integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n    crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n  <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\n    integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n    integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n    crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n  <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n\n  <style>\n\n    /* navbar css */\n    #header-nav .nav-link {\n      color: white;\n      font-size: 20px;\n      margin-left: 20px;\n\n    }\n\n    .menu li a {\n      text-decoration: none;\n    }\n    .nav-item :hover{\n  margin-bottom: 10px;\n\n  \n}\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n    .menu li a:hover {\n      color: red !important;\n      opacity: 0.5;\n    }\n\n    #variety {\n      margin: 0.5rem;\n    }\n\n    .btn-outline-danger,\n    .btn-outline-danger:focus {\n      outline: none;\n      box-shadow: none;\n    }\n\n    .contactForm {\n      margin: 5px;\n    }\n\n    /* <!------------------------Scroll to top button------------------------------------------------> */\n\n    #scrollToTopButton {\n      position: fixed;\n      bottom: 40px;\n      right: 25px;\n      font-size: 25px;\n      z-index: 99;\n      width: 50px;\n      height: 50px;\n      background-color: red;\n      color: black;\n      border: none;\n      cursor: pointer;\n      outline: none;\n      padding: 6px;\n      border-radius: 50%;\n    }\n\n    #scrollToTopButton:hover,\n    i:hover {\n      background-color: white;\n      color: red;\n    }\n\n    .btn-sm a {\n      color: white;\n      transition: all 0.3s ease;\n      float: right;\n      font-size: medium;\n    }\n\n    .btn-sm a:hover {\n      color: red;\n      transition: all 0.3s ease;\n    }\n\n    #nav:hover {\n      background-color: #e60e23 !important;\n\n    }\n    #header-nav .nav-link {\n  color: white;\n  font-size: 20px;\n  margin-left: 20px;\n}\n    @media only screen and (max-width: 1400px){\n  #header-nav .nav-link {\n    color: white;\n    font-size: 18px;\n    margin-left: 18px;\n  }\n}\n\n@media only screen and (min-width: 1133px) and (max-width: 1275px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n}\n@media only screen and (min-width: 1035px) and (max-width: 1132px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n  #searchText{\n    width: 120px;\n  }\n  #submitBtn{\n    width: 60px;\n    display: flex;\n    justify-content: center;\n  }\n}\n@media only screen and (min-width: 993px) and (max-width: 1034px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 14px;\n    margin-left: 10px;\n  } \n\n#searchText{\n  width: 100px;\n}\n#submitBtn{\n  width: 50px;\n  display: flex;\n  justify-content: center;\n}\n}\n  </style>\n\n  <script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js\"></script>\n  <script type=\"text/javascript\">\n    (function () {\n      emailjs.init(\"user_3Y57GrE42p8s0kTrKxP0W\");\n    })();\n  </script>\n\n  <script type=\"text/javascript\">\n    window.onload = function () {\n      document.getElementById('contact-form').addEventListener('submit', function (event) {\n        event.preventDefault();\n        // generate a five digit number for the contact_number variable\n        this.contact_number.value = Math.random() * 100000 | 0;\n        // these IDs from the previous steps\n        emailjs.sendForm('contact_service', 'contact_form', this)\n          .then(function () {\n            console.log('SUCCESS!');\n          }, function (error) {\n            console.log('FAILED...', error);\n          });\n      });\n    }\n  </script>\n</head>\n\n<body>\n\n\n  <div class=\"scroll-bar\">\n\n    <!-- navbar starts -->\n\n    <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n      <div class=\"container-fluid\">\n        <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n            height=\"24\"></a>\n        <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n          data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n          <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n        </button>\n        \n        <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n          <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n            <li class=\"nav-item\">\n              <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"tv.html\">TV</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n            </li>\n            <li>\n              <!-- Genre dropdown starts-->\n              <div>\n                <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                    <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                        Genres\n                    </button>\n                    <div class=\"dropdown-content\" style=\"color: white;\">\n                        <a href=\"popular.html\">Popular</a>\n                        <a href=\"crime.html\">Crime</a>\n                        <a href=\"suspense.html\">Suspense & Thriller</a>\n                        <a href=\"action.html\">Action</a>\n                        <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                        <a href=\"documentary.html\">Documentary</a>\n                        <a href=\"horror.html\">Horror</a>\n                        <a href=\"drama.html\">Drama</a>\n                        <a href=\"war.html\">War & Politics</a>\n                        <a href=\"comedy.html\">Comedy</a>\n                        <a href=\"romance.html\">Romance</a>\n                        <a href=\"anime.html\">Anime</a>\n                      </div>\n                </div>\n              </div>\n              <!-- Genre dropdown ends-->\n            </li>\n            <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n              <li>\n                <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n              </li>\n            </div>\n          </ul>\n          <form id=\"searchForm\" class=\"d-flex\">\n            <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n            <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n          </form>\n        </div>\n      </div>\n      </nav>\n\n        <!-- navbar ends -->\n\n\n    <div class=\"container\">\n      <div id=\"movies\" class=\"row\"></div>\n    </div>\n    <hr>\n\n\n    <div class=\"box\">\n\n      <div class=\"text\">\n        <h1>Contact <span class=\"red\">Us</span></h1>\n        <div class=\"redline\"></div>\n        <p>Have Questions ? We have answers ( may be )</p>\n      </div>\n    </div>\n\n    <div class=\"touch\">\n      <h2>Get in touch</h2>\n      <div class=\"redline\"></div>\n    </div>\n    <div class=\"container fill\">\n      <div class=\"forthis\">\n        <form action=\"https://formcarry.com/s/S1peCWurw0C\" method=\"POST\" name=\"contact-form\" id=\"contact-form\" onsubmit=\"return validateForm();\">\n          <div class=\"form-row two2\">\n            <div class=\"form-group col-md-6 column\">\n              <input type=\"text\" class=\"form-control input\" id=\"firstname\" name=\"firstname\" placeholder=\" \" >\n              <label for=\"firstname\" class=\"\">First Name</label>\n              <div class=\"underline\">\n              </div>\n            </div>\n            <div class=\"form-group col-md-6 column\">\n              <input type=\"text\" class=\"form-control input\" id=\"lastname\" name=\"lastname\" placeholder=\" \" >\n              <label for=\"lastname\" class=\"\">Last Name</label>\n              <div class=\"underline\"></div>\n            </div>\n          </div>\n          <div class=\"form-row one1\">\n            <div class=\"form-group col-lg-6 column\">\n              <input type=\"text\" class=\"form-control input\" id=\"email\" name=\"email\" placeholder=\" \" >\n              <label for=\"email\" class=\"\">Email</label>\n              <div class=\"underline\"></div>\n            </div>\n            <div class=\"form-group col-lg-6 column\">\n              <input type=\"text\" class=\"form-control input\" id=\"phone\" name=\"phone\"  placeholder=\" \">\n              <label for=\"number\" class=\"\">Phone Number</label>\n              <div class=\"underline\"></div>\n            </div>\n          </div>\n          <div class=\"form-row\">\n            <div class=\"form-group column\">\n              <input type=\"text\" class=\"form-control input\" name=\"subject\" id=\"subject\" placeholder=\" \" >\n              <label for=\"subject\" class=\"\">Subject</label>\n              <div class=\"underline extra\"></div>\n            </div>\n          </div>\n          <div class=\"form-row size\">\n            <div class=\"form-group column\">\n              <textarea type=\"text\" class=\"form-control input\" name=\"message\" id=\"message\" rows=\"5\"  placeholder=\" \"></textarea>\n              <label for=\"message\" class=\"\">Message</label>\n              <div class=\"underline extra gap\"></div>\n            </div>\n          </div>\n          <div class=\"btn-sm\">\n            <input type=\"submit\" value=\"SEND MESSAGE\" class=\"sm-button\" id=\"submit-btn\"> \n            <a href=\"#\" onclick=\"clearFunc()\">Reset</a>\n          </div>\n        </form>\n      </div>\n    </div>\n\n    <!-- address -->\n\n    <div class=\"container address\">\n      <div class=\"row add-row\">\n        <div class=\"col-sm-6\">\n          <h3>Our Address</h3>\n          <div class=\"redline-address\"></div>\n          <p>13 B</p>\n          <p>King Koti Road</p>\n          <p>Vadodara,</p>\n          <p>Gujrat - 500029</p>\n          <div class=\"phone-e\">\n            <p><span class=\"glyphicon glyphicon-envelope\"> </span> info@movie-website.com</p>\n            <p><span class=\"glyphicon glyphicon-phone\"></span> +91-97427 66666</p>\n          </div>\n        </div>\n        <div class=\"col-sm-6 map-padd\">\n          <!-- -map- -->\n          <iframe\n            src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3889.019213593812!2d77.62060731482127!3d12.906485990898592!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae14eed2a26dbb%3A0x98f64960052a26b0!2sTrainingMug!5e0!3m2!1sen!2sin!4v1504259922701\"\n            width=\"100%\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe>\n        </div>\n      </div>\n    </div>\n\n\n    <!-- offcanva JS and footer js -->\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n\n    <div class=\"bottom-gap\"></div>\n\n\n\n    <!-------------------------------Footer-------------------------------->\n    <div id=\"waterdrop\"></div>\n    <footer class=\"footer\">\n      <div class=\"footer-content\">\n        <div class=\"footer-left\">\n          <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n              height=\"24\"></a>\n          <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n        </div>\n        <div class=\"footer-middle\">\n          <h2 class=\"footer-heading\">Follow Us</h2>\n          <ul class=\"footer-middle-list icons\">\n            <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i\n                class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i\n                class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i\n                class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i\n                class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i\n                class=\"fab fa-github github\" style=\"color:red\"></i></a>\n          </ul>\n        </div>\n        <div class=\"footer-middle\">\n          <h2 class=\"footer-heading\">Services</h2>\n          <ul class=\"footer-middle-list\">\n            <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n          </ul>\n        </div>\n        <div class=\"footer-middle\">\n          <h2 class=\"footer-heading\">Try Our App</h2>\n          <ul class=\"footer-middle-list icons\">\n            <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n          </ul>\n        </div>\n        <div class=\"footer-right\">\n          <p class=\"footer-links\">\n          <h2 class=\"footer-heading\">Contact Us</h2>\n          <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n          <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n          </p>\n        </div>\n      </div>\n      <hr id=\"footer-hr\">\n      <div class=\"footer-copyright\">\n        <p>Copyright &copy; and &reg; Since\n          <script>\n            document.write(new Date().getFullYear())\n          </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)\n        </p>\n      </div>\n\n    </footer>\n\n    <!--------------scrool to top button-->\n    <button id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\">\n      <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\"></i>\n    </button>\n    <script>\n      $(document).ready(function () {\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n        window.onscroll = function () {\n          scrollFunction()\n        };\n\n        function scrollFunction() {\n          if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n            scrollTopButton.style.display = \"block\";\n          } else {\n            scrollTopButton.style.display = \"none\";\n          }\n        }\n        $(\"#scrollToTopButton\").click(function () {\n          $('html ,body').animate({\n            scrollTop: 0\n          }, 800)\n        });\n      });\n    </script>\n    <!-- offcanva JS and footer js -->\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n    <script src=\"js/main-min.js\"></script>\n\n    <script> jQuery('#waterdrop').raindrops({ color: '#292c2f', canvasHeight: 150, density: 0.1, frequency: 20 });\n    </script>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\"\n      integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\"\n      crossorigin=\"anonymous\"></script>\n    <script src=\"./static/script.js\"></script>\n\n    <script>\n      function logout(){\n        window.location.replace(\"login.html\");\n      }\n    </script>\n\n    <script type=\"text/javascript\">\n\n    function validateForm(){\n      const firstname = document.getElementById(\"firstname\");\n      const lastname = document.getElementById(\"lastname\");\n      const email = document.getElementById(\"email\");\n      const phone = document.getElementById(\"phone\");\n      const subject = document.getElementById(\"subject\");\n      const message = document.getElementById(\"message\");\n      let alphabets = /^[A-Za-z]+$/ ; \n      if (firstname.value.trim().length === 0 && lastname.value.trim().length === 0 && email.value.trim().length === 0 && phone.value.trim().length === 0 && subject.value.trim().length === 0 && message.value.trim().length === 0  ){\n       swal(\"Oops...\" , \"Please! Enter the credentials first .\" , \"error\"); \n        return false ; \n      }\n      if (firstname.value.trim().length === 0 ) {\n        swal(\"Oops...\" , \"Please! Enter your first name .\" , \"error\"); \n        return false ; \n      }\n      if (!firstname.value.trim().match(alphabets) ){\n        swal(\"Oops...\" , \"Please! Enter a valid first name.\" , \"error\"); \n        return false; \n      }\n      if(lastname.value.trim().length > 0 ) {\n        if (!lastname.value.trim().match(alphabets) ){\n        swal(\"Oops...\" , \"Please! Enter a valid last name.\" , \"error\"); \n        return false; \n        }\n      }\n      if (email.value.trim().length === 0 ) {\n        swal(\"Oops...\" , \"Please! Enter your email address.\" , \"error\"); \n        return false ; \n      }\n      if (!email.value.trim().includes(\"@gmail.com\")) {\n        swal(\"Oops...\" , \"Please! Enter a valid email address.\" , \"error\"); \n        return false ; \n      }\n      if ( phone.value.trim().length != 10 ||  isNaN(phone.value.trim()) ) {\n        swal(\"Oops...\" , \"Phone number should be 10 digits. \" , \"error\"); \n        return false ; \n      }\n      if (subject.value.trim().length === 0 ) {\n        swal(\"Oops...\" , \"Please! Enter the subject.\" , \"error\"); \n        return false ; \n      }\n      if (message.value.trim().length === 0 ) {\n        swal(\"Oops...\" , \"Please! Enter the message.\" , \"error\"); \n        return false ; \n      }\n      swal(\"Congrats!\", \"Message was delivered successfully! Thanks for your Submission\", \"success\");\n      return true ; \n    }\n\n    document.getElementById(\"submit-btn\").addEventListener(\"click\" , validateForm);\n\n      function clearFunc() {\n        document.getElementById(\"firstname\").value = \"\";\n        document.getElementById(\"lastname\").value = \"\";\n        document.getElementById(\"email\").value = \"\";\n        document.getElementById(\"phone\").value = \"\";\n        document.getElementById(\"subject\").value = \"\";\n        document.getElementById(\"message\").value = \"\";\n      }\n\n    </script>\n    <script src=\"https://unpkg.com/sweetalert/dist/sweetalert.min.js\"></script>\n\n\n</body>\n\n</html>\n"
  },
  {
    "path": "crime.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width\">\n    <title>ApnaTheatre.com</title>\n    <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n\n    <!-- Font  -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n        integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n        crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n        <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n\n    <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n    <link rel=\"stylesheet\" href=\"static/bootstrap.min.css\">\n    <link rel=\"stylesheet\" href=\"static/style-min.css\">\n    <link rel=\"stylesheet\" href=\"cards.css\">\n\n</head>\n<!------------------------Scroll to top button------------------------------------------------>\n<style>\n  #scrollToTopButton{\nposition:fixed;\nbottom: 40px;\nright: 25px;\nfont-size: 25px;\nz-index: 99;\nwidth: 50px;\nheight: 50px;\nbackground-color:red;\ncolor:black;\nborder: none;\ncursor: pointer;\noutline: none;\npadding: 6px;\nborder-radius: 50%;\n}\n#scrollToTopButton:hover, i:hover {\nbackground-color:white;\ncolor:red;\n}\n#nav:hover\n{\n  background-color:#e60e23!important;\n\n}\n#header-nav .nav-link {\n  color: white;\n  font-size: 20px;\n  margin-left: 20px;\n}\n    @media only screen and (max-width: 1400px){\n  #header-nav .nav-link {\n    color: white;\n    font-size: 18px;\n    margin-left: 18px;\n  }\n  #searchText{\n    width: 150px;\n  }\n}\n\n@media only screen and (min-width: 1133px) and (max-width: 1275px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n}\n@media only screen and (min-width: 1035px) and (max-width: 1132px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n  #searchText{\n    width: 120px;\n  }\n  #submitBtn{\n    width: 60px;\n    display: flex;\n    justify-content: center;\n  }\n}\n@media only screen and (min-width: 993px) and (max-width: 1034px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 14px;\n    margin-left: 10px;\n  } \n\n#searchText{\n  width: 100px;\n}\n#submitBtn{\n  width: 50px;\n  display: flex;\n  justify-content: center;\n}\n}\n\n.container {\n  text-align: center;\n}\n.nav-item :hover{\n  margin-bottom: 10px;\n \n  \n}\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n</style>\n<body>\n    <div class=\"scroll-bar\">\n\n        <!-- navbar starts -->\n\n        <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n          <div class=\"container-fluid\">\n            <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n                height=\"24\"></a>\n            <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n              data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n              <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n            </button>\n            \n            <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n              <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n                <li class=\"nav-item\">\n                  <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"tv.html\">TV</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n                </li>\n                <li>\n                  <!-- Genre dropdown starts-->\n                  <div>\n                    <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                        <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                            Genres\n                        </button>\n                        <div class=\"dropdown-content\" style=\"color: white;\">\n                            <a href=\"popular.html\">Popular</a>\n                            <a href=\"crime.html\">Crime</a>\n                            <a href=\"suspense.html\">Suspense & Thriller</a>\n                            <a href=\"action.html\">Action</a>\n                            <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                            <a href=\"documentary.html\">Documentary</a>\n                            <a href=\"horror.html\">Horror</a>\n                            <a href=\"drama.html\">Drama</a>\n                            <a href=\"war.html\">War & Politics</a>\n                            <a href=\"comedy.html\">Comedy</a>\n                            <a href=\"romance.html\">Romance</a>\n                            <a href=\"anime.html\">Anime</a>\n                          </div>\n                    </div>\n                  </div>\n                  <!-- Genre dropdown ends-->\n                </li>\n                <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                  <li>\n                    <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n                  </li>\n                </div>\n              </ul>\n              <form id=\"searchForm\" class=\"d-flex\">\n                <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n                <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n              </form>\n            </div>\n          </div>\n          </nav>\n    \n            <!-- navbar ends -->\n\n        <div class=\"maincontainer\">\n            <div class=\"container\">\n                <div id=\"movies\" class=\"row\"></div>\n            </div>\n            <hr>\n            <h2>Crime</h2>\n            <hr>\n            <div class=\"container\" id=\"Movies\">\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/criminal.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Criminal Justice</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.1</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Criminal Justice is an Indian Hindi-language crime thriller legal drama web series for Hotstar Specials, based on the 2008 British television series of the same name,</p>\n\n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin(){\n                              window.open(\"https://youtu.be/KPyNH7mZkGc\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Criminal Justice</b>\n                          <br>\n                          IMDb - 8.1\n                      </div>\n                  </div>\n                </div>\n              \n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/peaky.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Peaky Blinders</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2013</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">5</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.8</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Tommy Shelby, a dangerous man, leads the Peaky Blinders, a gang based in Birmingham. Soon, Chester Campbell, an inspector, decides to nab him and put an end to the criminal activities.</p>\n\n                       \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin1()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin1(){\n                              window.open(\"https://youtu.be/oVzVdvGIC7U\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Peaky Blinders</b>\n                          <br>\n                          IMDb - 8.8\n                      </div>\n                  </div>\n                </div>\n              \n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/special.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Special Ops</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.6</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Himmat Singh leads a task force searching for the mastermind behind several terrorist attacks</p>\n\n                     \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin2()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin2(){\n                              window.open(\"https://youtu.be/GF0H5DZAE2g\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Special Ops</b>\n                          <br>\n                          IMDb - 8.6\n                      </div>\n                  </div>\n                </div>\n              \n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/breaking.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1 style=\"font-size: 30px;\">Breaking Bad</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2008</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">5</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.5</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Walter White, a chemistry teacher, discovers that he has cancer and decides to get into the meth-making business to repay his medical debts. His priorities begin to change when he partners with Jesse</p>\n\n                      \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin3()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin3(){\n                              window.open(\"https://youtu.be/HhesaQXLuRY\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Breaking Bad</b>\n                          <br>\n                          IMDb - 9.5\n                      </div>\n                  </div>\n                </div>\n              \n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/apharan.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Aphran</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.3</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Rudra, a senior inspector, is lured into kidnapping a young girl at the behest of her mother. However, the plan of extorting money for her release goes horribly wrong, landing him in trouble</p>\n\n                     \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin4()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin4(){\n                              window.open(\"https://youtu.be/CxNYucYVEkQ\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Aphran</b>\n                          <br>\n                          IMDb - 8.3\n                      </div>\n                  </div>\n                </div>\n              \n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/joker.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Joker</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2h2m</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.4</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Arthur Fleck, a party clown, leads an impoverished life with his ailing mother. However, when society shuns him and brands him as a freak, he decides to embrace the life of crime and chaos.</p>\n\n                      \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin5()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin5(){\n                              window.open(\"https://youtu.be/t433PEQGErc\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Joker</b>\n                          <br>\n                          IMDb - 8.4\n                      </div>\n                  </div>\n                </div>\n              \n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/delhi.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Delhi Crime</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.5</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Based on a Delhi gang rape case, this crime drama follows the Delhi Police investigation into the finding of the men who perpetrated the crime.</p>\n\n                     \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin6()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin6(){\n                              window.open(\"https://youtu.be/jNuKwlKJx2E\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Delhi Crime</b>\n                          <br>\n                          IMDb - 8.5\n                      </div>\n                  </div>\n                </div>\n              \n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/lok.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Paatal Lok</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.8</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">A cynical inspector is tasked with investigating a high-profile case which leads him into a dark realm of the underworld.</p>\n\n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin7()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin7(){\n                              window.open(\"https://youtu.be/cNwWMW4mxO8\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Paatal Lok</b>\n                          <br>\n                          IMDb - 7.8\n                      </div>\n                  </div>\n                </div>\n              \n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/gangs of wassepur.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Gangs of Wasseypur</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2012</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2h40m</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">A gangster (Manoj Bajpayee) clashes with the ruthless, coal-mining kingpin (Tigmanshu Dhulia) who killed his father (Jaideep Ahlawat).</p>\n\n   \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin8()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin8(){\n                              window.open(\"https://youtu.be/j-AkWDkXcMY\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\" onclick=\"openMovieWin8()\">▶Play</button>\n                        </div>\n                        <script type=\"text/javascript\">\n                            function openMovieWin8(){\n                              window.open(\"https://youtu.be/dz3uCM-MrGY\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Gangs of Wasseypur</b>\n                          <br>\n                          IMDb - 8.2\n                      </div>\n                  </div>\n                </div>\n              \n\n            </div>\n\n        </div>\n    </div>\n\n\n    <!-------------------------------Footer-------------------------------->\n    <div id=\"waterdrop\"></div>\n    <footer class=\"footer\">\n      <hr class=\"footer-hr\">\n        <div class=\"footer-content\">\n            <div class=\"footer-left\">\n                <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\" height=\"24\"></a>\n                <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Follow Us</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i class=\"fab fa-github github\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Services</h2>\n                <ul class=\"footer-middle-list\">\n                    <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Try Our App</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-right\">\n                <p class=\"footer-links\">\n                    <h2 class=\"footer-heading\">Contact Us</h2>\n                    <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n                    <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n                </p>\n            </div>\n        </div>\n        <hr class=\"footer-hr\">\n        <div class=\"footer-copyright\">\n            <p>Copyright &copy; and &reg; Since\n                <script>\n                    document.write(new Date().getFullYear())\n                </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>\n        </div>\n    </footer>\n\n    <!-----------------scroll back to top button-->\n    <button  id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\" >\n        <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\" ></i>\n      </button>\n      <script>\n      $(document).ready(function(){\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n        window.onscroll = function () { scrollFunction() };\n\n        function scrollFunction() {\n        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n          scrollTopButton.style.display = \"block\";\n        } else {\n          scrollTopButton.style.display = \"none\";\n        }\n      }\n\n      $(\"#scrollToTopButton\").click(function(){\n      $('html ,body').animate({scrollTop : 0},800)\n      });\n      });\n      </script>\n\n    <!-- offcanva JS and footer js -->\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n    <script src=\"js/main-min.js\"></script>\n\n    <script>\n        jQuery('#waterdrop').raindrops({\n            color: '#292c2f',\n            canvasHeight: 150,\n            density: 0.1,\n            frequency: 20\n        });\n    </script>\n  <script>\n    function logout(){\n      window.location.replace(\"login.html\");\n    }\n  </script>\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\" crossorigin=\"anonymous\"></script>\n    <script src=\"./static/script.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "documentary.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width\">\n    <title>ApnaTheatre.com</title>\n    <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n\n    <!-- Font  -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n        integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n        crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n        <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n\n    <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n    <link rel=\"stylesheet\" href=\"static/bootstrap.min.css\">\n    <link rel=\"stylesheet\" href=\"static/style-min.css\">\n    <link rel=\"stylesheet\" href=\"cards.css\">\n\n</head>\n\n<!------------------------Scroll to top button------------------------------------------------>\n<style>\n    #scrollToTopButton{\n      background-color:red;\n      border: none;\n      border-radius: 50%;\n      bottom: 40px;\n      color:black;\n      cursor: pointer;\n      font-size: 25px;\n      height: 50px;\n      right: 25px;\n      outline: none;\n      padding: 6px;\n      position:fixed;\n      width: 50px;\n      z-index: 99;\n  }\n    \n  #scrollToTopButton:hover, i:hover {\n      background-color:white;\n      color:red;\n  }\n    \n  #header-nav .nav-link {\n      color: white;\n      font-size: 20px;\n      margin-left: 20px;\n  }\n    \n@media only screen and (max-width: 1400px){\n  #header-nav .nav-link {\n    color: white;\n    font-size: 18px;\n    margin-left: 18px;\n  }\n}\n@media only screen and (min-width: 1133px) and (max-width: 1275px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n}\n@media only screen and (min-width: 1035px) and (max-width: 1132px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n  #searchText{\n    width: 120px;\n  }\n  #submitBtn{\n    display: flex;\n    justify-content: center;\n    width: 60px;\n  }\n}\n@media only screen and (min-width: 993px) and (max-width: 1034px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 14px;\n    margin-left: 10px;\n  } \n  #searchText{\n    width: 100px;\n  }\n  #submitBtn{\n    display: flex;\n    justify-content: center;\n    width: 50px;\n  }\n}\n\n.container {\n  text-align: center;\n}\n.nav-item :hover{\n  margin-bottom: 10px;\n  \n  \n}\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n  </style>\n\n<body>\n    <div class=\"scroll-bar\">\n\n        <!-- navbar starts -->\n\n        <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n          <div class=\"container-fluid\">\n            <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n                height=\"24\"></a>\n            <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n              data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n              <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n            </button>\n            \n            <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n              <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n                <li class=\"nav-item\">\n                  <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"tv.html\">TV</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n                </li>\n                <li>\n                  <!-- Genre dropdown starts-->\n                  <div>\n                    <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                        <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                            Genres\n                        </button>\n                        <div class=\"dropdown-content\" style=\"color: white;\">\n                            <a href=\"popular.html\">Popular</a>\n                            <a href=\"crime.html\">Crime</a>\n                            <a href=\"suspense.html\">Suspense & Thriller</a>\n                            <a href=\"action.html\">Action</a>\n                            <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                            <a href=\"documentary.html\">Documentary</a>\n                            <a href=\"horror.html\">Horror</a>\n                            <a href=\"drama.html\">Drama</a>\n                            <a href=\"war.html\">War & Politics</a>\n                            <a href=\"comedy.html\">Comedy</a>\n                            <a href=\"romance.html\">Romance</a>\n                            <a href=\"anime.html\">Anime</a>\n                          </div>\n                    </div>\n                  </div>\n                  <!-- Genre dropdown ends-->\n                </li>\n                <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                  <li>\n                    <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n                  </li>\n                </div>\n              </ul>\n              <form id=\"searchForm\" class=\"d-flex\">\n                <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n                <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n              </form>\n            </div>\n          </div>\n          </nav>\n    \n            <!-- navbar ends -->\n\n        <div class=\"maincontainer\">\n            <div class=\"container\">\n                <div id=\"movies\" class=\"row\"></div>\n            </div>\n            <hr>\n            <h2>Documentary</h2>\n            <hr>\n            <div class=\"container\" id=\"Movies\">\n              <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/chernobyl.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Chernobyl</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.4</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">In April 1986, the city of Chernobyl in the Soviet Union suffers one of the worst nuclear disasters in the history of mankind. Consequently, many heroes put their lives on the line to save Europe.</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin(){\n                                window.open(\"https://youtu.be/s9APLXM9Ei8\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Chernobyl</b>\n                            <br>\n                            IMDb - 9.4\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/social.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>The Social Dilemma</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1h34m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.6</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Tech experts sound the alarm on the dangerous human impact of social networking.</p>\n\n                       \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin1()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin1(){\n                                window.open(\"https://youtu.be/uaaC57tcci0\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>The Social Dilemma</b>\n                            <br>\n                            IMDb - 7.6\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/sachin.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Sachin</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2017</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2h18m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.6</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Sachin Tendulkar recounts his journey of becoming one of the most famous names in cricket with the help of archival footage, re-enactments and clips of his family, friends and colleagues</p>\n\n                     \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin2()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin2(){\n                                window.open(\"https://youtu.be/8gTeE6pa4Kg\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Sachin: A Billion Dreams</b>\n                            <br>\n                            IMDb - 8.6\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/Miss_Americana.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Miss Americana</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1h26m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.4</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Pop singer Taylor Swift reveals intimate details of her life while showcasing backstage and onstage concert footage.</p>\n\n        \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin3()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin3(){\n                                window.open(\"https://www.imdb.com/video/vi1181204249?playlistId=tt11388580&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Miss Americana</b>\n                            <br>\n                            IMDb - 7.4\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n               <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/My_Octopus_Teacher.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>My Octopus Teacher</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1h30m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.1</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">A diver swims with an octopus that lives in a kelp forest off the coast of South Africa.</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin4()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin4(){\n                                window.open(\"https://www.imdb.com/video/vi3668033817?playlistId=tt12888462&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>My Octopus Teacher</b>\n                            <br>\n                            IMDb - 8.1\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/Fyre.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Fyre</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1h37m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.2</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">The history of the Fyre Music Festival, from its creation through its unraveling.</p>\n\n          \n                              \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin5()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin5(){\n                                window.open(\"https://www.imdb.com/video/vi2433858073?playlistId=tt9412098&ref_=tt_pr_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Fyre</b>\n                            <br>\n                            IMDb - 7.2\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/David_Attenborough.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>David Attenborough</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1h54m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.0</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">In his 93 years, Attenborough has visited every continent on the globe, \n                            exploring the wild places of the planet and documenting the living world in all its variety and wonder. </p>\n\n \n                               \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin6()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin6(){\n                                window.open(\"https://www.imdb.com/video/vi2863448345?playlistId=tt11989890&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>David Attenborough: A Life on Our Planet</b>\n                            <br>\n                            IMDb - 9.0\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/Collective.jpeg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Collective</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1h49m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Journalists uncover health care fraud in the wake of a deadly nightclub fire in Bucharest, Romania, in 2015.</p>\n\n                          \n                                   \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin7()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin7(){\n                                window.open(\"https://www.imdb.com/video/vi495370521?playlistId=tt10706602&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Collective</b>\n                            <br>\n                            IMDb - 8.2\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/Dirty_Money.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Dirty Money</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.1</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">There's a cliche that says \"the rich get richer,\" and while that may be true it's not always done through legal or moral methods. \n                            This docuseries takes a look at stories of scandal and corruption in business, exposing acts of corporate greed and corruption</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin8()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin8(){\n                                window.open(\"https://www.imdb.com/video/vi3319642137?playlistId=tt7889220&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Dirty Money</b>\n                            <br>\n                            IMDb - 8.1\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n\n            </div>\n        </div>\n    </div>\n\n\n\n    <!-------------------------------Footer-------------------------------->\n    <div id=\"waterdrop\"></div>\n    <footer class=\"footer\">\n        <hr class=\"footer-hr\">\n        <div class=\"footer-content\">\n            <div class=\"footer-left\">\n                <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\" height=\"24\"></a>\n                <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Follow Us</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i class=\"fab fa-github github\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Services</h2>\n                <ul class=\"footer-middle-list\">\n                    <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Try Our App</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-right\">\n                <p class=\"footer-links\">\n                    <h2 class=\"footer-heading\">Contact Us</h2>\n                    <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n                    <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n                </p>\n            </div>\n        </div>\n        <hr class=\"footer-hr\">\n        <div class=\"footer-copyright\">\n            <p>Copyright &copy; and &reg; Since\n                <script>\n                    document.write(new Date().getFullYear())\n                </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>\n        </div>\n    </footer>\n\n    <!--------------------scroll back to top button-->\n    <button  id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\" >\n        <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\"></i>\n      </button>\n      <script>\n      $(document).ready(function(){\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n        window.onscroll = function () { scrollFunction() };\n\n        function scrollFunction() {\n        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n          scrollTopButton.style.display = \"block\";\n        } else {\n          scrollTopButton.style.display = \"none\";\n        }\n      }\n\n      $(\"#scrollToTopButton\").click(function(){\n      $('html ,body').animate({scrollTop : 0},800)\n      });\n      });\n      </script>\n<script>\n  function logout(){\n    window.location.replace(\"login.html\");\n  }\n</script>\n    <!-- offcanva JS and footer js -->\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n    <script src=\"js/main-min.js\"></script>\n\n    <script>\n        jQuery('#waterdrop').raindrops({\n            color: '#292c2f',\n            canvasHeight: 150,\n            density: 0.1,\n            frequency: 20\n        });\n    </script>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\" crossorigin=\"anonymous\"></script>\n    <script src=\"./static/script.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "drama.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width\">\n    <title>ApnaTheatre.com</title>\n    <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n\n    <!-- Font  -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n        integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n        crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n        <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n\n    <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n    <link rel=\"stylesheet\" href=\"static/bootstrap.min.css\">\n    <link rel=\"stylesheet\" href=\"static/style-min.css\">\n    <link rel=\"stylesheet\" href=\"cards.css\">\n\n</head>\n\n<!------------------------Scroll to top button------------------------------------------------>\n<style>\n  #scrollToTopButton{\nposition:fixed;\nbottom: 40px;\nright: 25px;\nfont-size: 25px;\nz-index: 99;\nwidth: 50px;\nheight: 50px;\nbackground-color:red;\ncolor:black;\nborder: none;\ncursor: pointer;\noutline: none;\npadding: 6px;\nborder-radius: 50%;\n}\n#scrollToTopButton:hover, i:hover {\nbackground-color:white;\ncolor:red;\n}\n#header-nav .nav-link {\n  color: white;\n  font-size: 20px;\n  margin-left: 20px;\n}\n    @media only screen and (max-width: 1400px){\n  #header-nav .nav-link {\n    color: white;\n    font-size: 18px;\n    margin-left: 18px;\n  }\n  #searchText{\n    width: 150px;\n  }\n}\n\n@media only screen and (min-width: 1133px) and (max-width: 1275px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n}\n@media only screen and (min-width: 1035px) and (max-width: 1132px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n  #searchText{\n    width: 120px;\n  }\n  #submitBtn{\n    width: 60px;\n    display: flex;\n    justify-content: center;\n  }\n}\n@media only screen and (min-width: 993px) and (max-width: 1034px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 14px;\n    margin-left: 10px;\n  } \n\n#searchText{\n  width: 100px;\n}\n#submitBtn{\n  width: 50px;\n  display: flex;\n  justify-content: center;\n}\n}\n\n.container {\n  text-align: center;\n}\n.nav-item :hover{\n  margin-bottom: 10px;\n  \n  \n}\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n</style>\n<body>\n    <div class=\"scroll-bar\">\n\n        <!-- navbar starts -->\n\n        <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n          <div class=\"container-fluid\">\n            <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n                height=\"24\"></a>\n            <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n              data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n              <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n            </button>\n            \n            <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n              <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n                <li class=\"nav-item\">\n                  <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"tv.html\">TV</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n                </li>\n              \n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n                </li>\n                <li>\n                  <!-- Genre dropdown starts-->\n                  <div>\n                    <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                        <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                            Genres\n                        </button>\n                        <div class=\"dropdown-content\" style=\"color: white;\">\n                            <a href=\"popular.html\">Popular</a>\n                            <a href=\"crime.html\">Crime</a>\n                            <a href=\"suspense.html\">Suspense & Thriller</a>\n                            <a href=\"action.html\">Action</a>\n                            <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                            <a href=\"documentary.html\">Documentary</a>\n                            <a href=\"horror.html\">Horror</a>\n                            <a href=\"drama.html\">Drama</a>\n                            <a href=\"war.html\">War & Politics</a>\n                            <a href=\"comedy.html\">Comedy</a>\n                            <a href=\"romance.html\">Romance</a>\n                            <a href=\"anime.html\">Anime</a>\n                          </div>\n                    </div>\n                  </div>\n                  <!-- Genre dropdown ends-->\n                </li>\n                <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                  <li>\n                    <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n                  </li>\n                </div>\n              </ul>\n              <form id=\"searchForm\" class=\"d-flex\">\n                <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n                <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n              </form>\n            </div>\n          </div>\n          </nav>\n    \n            <!-- navbar ends -->\n\n        <div class=\"maincontainer\">\n            <div class=\"container\">\n                <div id=\"movies\" class=\"row\"></div>\n            </div>\n            <hr>\n            <h2>Drama</h2>\n            <hr>\n            <div class=\"container\" id=\"Movies\">\n              <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/ceo.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1 style=\"font-size: 35px;\">Official CEOgiri</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">6.5</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Revolving around the elusive CEO of the office, essayed by India’s leading digital star, Sumeet Vyas, the drone aka D will present his worldview on corporate life. Get ready for double the drama and double the fun!</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin(){\n                                window.open(\"https://youtu.be/lAMwsDICoaQ\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Official CEOgiri</b>\n                            <br>\n                            IMDb - 6.5\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/swades.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Swades</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2004</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">3h30m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Mohan, an Indian expatriate employed with NASA, travels to his country to track down his beloved nanny, Kaveri. During his stay, he finds himself advocating for reform in a village.</p>\n\n                        \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin1()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin1(){\n                                window.open(\"https://youtu.be/vc7AZNWvs0M\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Swades</b>\n                            <br>\n                            IMDb - 8.2\n                        </div>\n                    </div>\n                  </div>\n                \n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/bach.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>TVF Bachelors</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2016</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">The series revolves around Four Bachelor Flatmates who in every episode will deal with a specific daily life bachelor related problem. Its about their battle against an external X problem as a single team The Bachelors.</p>\n\n                        \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin2()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin2(){\n                                window.open(\"https://youtu.be/5XuimeH5hME\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>TVF Bachelors</b>\n                            <br>\n                            IMDb - 8.2\n                        </div>\n                    </div>\n                  </div>\n                \n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/game.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1 style=\"font-size: 42px;\">The Imitation Game</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2014</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1h54m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.0</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Alan Turing, a British mathematician, joins the cryptography team to decipher the German enigma code. With the help of his fellow mathematicians, he builds a machine to crack the codes</p>\n\n                         \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin3()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin3(){\n                                window.open(\"https://youtu.be/nuPZUUED5uk\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>The Imitation Game</b>\n                            <br>\n                            IMDb - 8.0\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/upsc.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Aspirants</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2021</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.7</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Aspirants is a web series by The Viral Fever created by Arunabh Kumar.</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin4()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin4(){\n                                window.open(\"https://youtu.be/ViOutJ0kuJY\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Aspirants</b>\n                            <br>\n                            IMDb - 9.7\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/mohabat.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1 style=\"font-size: 35px;\">Mohabbatein</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2000</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">3h36m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.1</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Narayan is a strict principal of Gurukul who does not believe in love and forbids his students from following their hearts. However, things take a turn when a music teacher challenges his authority.</p>\n\n                        \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin5()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin5(){\n                                window.open(\"https://youtu.be/6pbG4aVrs5E\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Mohabbatein</b>\n                            <br>\n                            IMDb - 7.1\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/zindagi.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Zindagi Na Milegi</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2011</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2h35m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Friends Kabir, Imran and Arjun take a vacation in Spain before Kabir's marriage. The trip turns into an opportunity to mend fences, heal wounds, fall in love with life and combat their worst fears.</p>\n\n                         \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin6()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin6(){\n                                window.open(\"https://youtu.be/FJrpcDgC3zU\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                        </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Zindagi Na Milegi Dobara</b>\n                            <br>\n                            IMDb - 8.2\n                        </div>\n                    </div>\n                  \n                </div>\n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/college.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>College Romance</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.9</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Three best friends look for love, laughs and some lifelong memories while attending college together.</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin7()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin7(){\n                                window.open(\"https://youtu.be/zwRhlzrJGxo\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>College Romance</b>\n                            <br>\n                            IMDb - 8.9\n                        </div>\n                    </div>\n                  </div>\n                \n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/dil.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Dilwale Dulhania</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">1995</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">3h12m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.1</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Raj and Simran meet during a trip across Europe and the two fall in love. However, when Raj learns that Simran is already promised to another, he follows her to India to win her and her father over.</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin8()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin8(){\n                                window.open(\"https://youtu.be/oIZ4U21DRlM\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Dilwale Dulhania Le Jayenge</b>\n                            <br>\n                            IMDb - 8.1\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/edu.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Sex Education</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">3</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.3</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Socially awkward high school student Otis may not have much experience in the lovemaking department, but he gets good guidance on the topic in his personal sex ed course</p>\n\n                        \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin9()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin9(){\n                                window.open(\"https://youtu.be/Hd2ldTR-WpI\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Sex Education</b>\n                            <br>\n                            IMDb - 8.3\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/walk.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>The Walk</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2015</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2h3m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.3</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Philippe Petit, a French street performer, dreams of performing daring stunts. He attempts to walk between the Twin Towers of the World Trade Center in New York on a tightrope.</p>\n\n\n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin10()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin10(){\n                                window.open(\"https://youtu.be/GR1EmTKAWIw\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>The Walk</b>\n                            <br>\n                            IMDb - 7.3\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/day.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Selection Day</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.4</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">When a 14-year-old boy tries out for Mumbai's under-19 cricket team and meets his older brother's rival, everything in his world begins to change.</p>\n\n                         \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin11()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin11(){\n                                window.open(\"https://youtu.be/Zudpl3PGaL0\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Selection Days</b>\n                            <br>\n                            IMDb - 7.4\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/trip.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>TVF Tripling</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2016</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.6</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">TVF Tripling is an Indian web series created by The Viral Fever. It was developed by Sameer Saxena and written by Akarsh Khurana and Sumeet Vyas</p>\n\n                         \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin12()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin12(){\n                                window.open(\"https://youtu.be/MfKNEC9xcE8\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>TVF Tripling</b>\n                            <br>\n                            IMDb - 8.6\n                        </div>\n                    </div>\n                  </div>\n                \n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/milkha.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1 style=\"font-size: 35px;\">Bhaag Milkha Bhaag</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2013</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">3h9m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Milkha Singh, an Indian athlete, overcomes many agonising obstacles in order to become a world champion,</p>\n\n                         \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin13()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin13(){\n                                window.open(\"https://www.imdb.com/video/vi414165273?playlistId=tt2356180&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Bhaag Milkha Bhaag</b>\n                            <br>\n                            IMDb - 8.2\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/twilight.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1 style=\"font-size: 30px;\">Twilight:Breaking Dawn</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2011</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">4.9</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">After consummating her marriage with Edward, Bella realises that she has become pregnant with a child that is half-human, half-vampire.</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin14()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin14(){\n                                window.open(\"https://youtu.be/PQNLfo-SOR4\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Twilight: Breaking Dawn</b>\n                            <br>\n                            IMDb - 4.9\n                        </div>\n                    </div>\n                  </div>\n                \n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/room.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Permanent Roommates</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2014</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.6</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Permanent Roommates is an Indian romantic comedy web series produced by The Viral Fever Media Labs.</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin15()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin15(){\n                                window.open(\"https://youtu.be/XsOjuDh4c-o4\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Permanent Roommates</b>\n                            <br>\n                            IMDb - 8.6\n                        </div>\n                    </div>\n                  </div>\n                \n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/dhoni.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>MS Dhoni</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2016</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">3h40m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.9</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">M S Dhoni, a boy from Ranchi, aspires to play cricket for India. Though he initially tries to please his father by working for the Indian Railways, he ultimately decides to chase his dreams.</p>\n\n                         \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin16()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin16(){\n                                window.open(\"https://youtu.be/6L6XqWoS8tw\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Ms Dhoni : The Untold Story</b>\n                            <br>\n                            IMDb - 7.9\n                        </div>\n                    </div>\n                  \n                </div>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------Footer-------------------------------->\n    <div id=\"waterdrop\"></div>\n    <footer class=\"footer\">\n      <hr class=\"footer-hr\">\n        <div class=\"footer-content\">\n            <div class=\"footer-left\">\n                <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\" height=\"24\"></a>\n                <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Follow Us</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i class=\"fab fa-github github\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Services</h2>\n                <ul class=\"footer-middle-list\">\n                    <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Try Our App</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-right\">\n                <p class=\"footer-links\">\n                    <h2 class=\"footer-heading\">Contact Us</h2>\n                    <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n                    <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n                </p>\n            </div>\n        </div>\n        <hr class=\"footer-hr\">\n        <div class=\"footer-copyright\">\n            <p>Copyright &copy; and &reg; Since\n                <script>\n                    document.write(new Date().getFullYear())\n                </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>\n        </div>\n    </footer>\n\n    <!-------------scroll to top button-->\n    <button  id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\" >\n        <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\" ></i>\n      </button>\n      <script>\n      $(document).ready(function(){\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n        window.onscroll = function () { scrollFunction() };\n\n        function scrollFunction() {\n        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n          scrollTopButton.style.display = \"block\";\n        } else {\n          scrollTopButton.style.display = \"none\";\n        }\n      }\n\n      $(\"#scrollToTopButton\").click(function(){\n      $('html ,body').animate({scrollTop : 0},800)\n      });\n      });\n      </script>\n<script>\n  function logout(){\n    window.location.replace(\"login.html\");\n  }\n</script>\n    <!-- offcanva JS and footer js -->\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n    <script src=\"js/main-min.js\"></script>\n\n    <script>\n        jQuery('#waterdrop').raindrops({\n            color: '#292c2f',\n            canvasHeight: 150,\n            density: 0.1,\n            frequency: 20\n        });\n    </script>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\" crossorigin=\"anonymous\"></script>\n    <script src=\"./static/script.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "dummy.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n  <meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width\">\n  <title>ApnaTheatre.com</title>\n  <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n  <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\n    integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n  \n  <!-- Font  -->\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n    integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n    crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n  <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n<!------------------------Scroll to top button------------------------------------------------>\n<style>\n    #scrollToTopButton{\n  /* position: sticky; */\n  position:relative;\n  bottom: 40px;\n  left: 93%;\n  font-size: 25px;\n  z-index: 99;\n  width: 50px;\n  height: 50px;\n  background-color:red;\n  color:black;\n  border: none;\n  cursor: pointer;\n  outline: none;\n  padding: 6px;\n  border-radius: 50%;\n  }\n  #scrollToTopButton:hover, i:hover {\n  background-color:white;\n  color:red;\n  }\n  .buttonmodal{\n      text-align: center;\n      height:auto;\n  }\n  #myBtn{\n        display:flex;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        padding:auto;\n        margin: auto;\n  }\n  \n\n    /* navbar css */\n    #header-nav .nav-link {\n      color: white;\n      font-size: 20px;\n      margin-left: 20px;\n\n    }\n\n    .menu li a:hover {\n      color: red !important;\n      opacity: 0.5;\n    }\n\n    #variety {\n      margin-top: 1rem;\n      margin-bottom: 0.5rem;\n    }\n  </style>\n\n</head>\n\n<body>\n    <div class=\"scroll-bar\">\n        <!-- navbar starts -->\n\n        <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n          <div class=\"container-fluid\">\n            <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n                height=\"24\"></a>\n            <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n              data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n              <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n            </button>\n            \n            <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n              <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n                <li class=\"nav-item\">\n                  <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"tv.html\">TV</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n                </li>\n               \n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n                </li>\n                <li>\n                  <!-- Genre dropdown starts-->\n                  <div>\n                    <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                        <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                            Genres\n                        </button>\n                        <div class=\"dropdown-content\" style=\"color: white;\">\n                            <a href=\"popular.html\">Popular</a>\n                            <a href=\"crime.html\">Crime</a>\n                            <a href=\"suspense.html\">Suspense & Thriller</a>\n                            <a href=\"action.html\">Action</a>\n                            <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                            <a href=\"documentary.html\">Documentary</a>\n                            <a href=\"horror.html\">Horror</a>\n                            <a href=\"drama.html\">Drama</a>\n                            <a href=\"war.html\">War & Politics</a>\n                            <a href=\"comedy.html\">Comedy</a>\n                            <a href=\"romance.html\">Romance</a>\n                            <a href=\"anime.html\">Anime</a>\n                          </div>\n                    </div>\n                  </div>\n                  <!-- Genre dropdown ends-->\n                </li>\n                <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                  <li>\n                    <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n                  </li>\n                </div>\n              </ul>\n              <form id=\"searchForm\" class=\"d-flex\">\n                <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n                <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n              </form>\n            </div>\n          </div>\n          </nav>\n    \n            <!-- navbar ends -->\n      \n        <hr>\n        <div class=\"container\">\n            <div id=\"movies\" class=\"row\"></div>\n        </div>\n        <hr>\n\n\n        <div class=\"buttonmodal\">\n            <button id=\"myBtn\">Click Here</button>\n        </div>\n        <div id=\"myModal\" class=\"modal\">\n            <div class=\"modal-content\">\n                <span class=\"close\">&times;</span>\n                <p>This Site Is Under Construction</p>\n            </div>\n        </div>\n    </div>\n\n\n\n    <!-------------------------------Footer-------------------------------->\n    <div id=\"waterdrop\"></div>\n    <footer class=\"footer\">\n      <!-- <hr class=\"footer-hr\"> -->\n      <div class=\"footer-content\">\n          <div class=\"footer-left\">\n          <a  href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\" height=\"24\"></a>\n          <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n      </div>\n      <div class=\"footer-middle\">\n        <h2 class=\"footer-heading\">Follow Us</h2>\n        <ul class=\"footer-middle-list icons\">\n            <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i class=\"fab fa-github github\" style=\"color:red\"></i></a>\n        </ul>\n    </div>\n          <div class=\"footer-middle\">\n          <h2 class=\"footer-heading\">Services</h2>\n          <ul class=\"footer-middle-list\">\n              <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n              <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n              <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n              <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n              <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n          </ul>\n          </div>\n          <div class=\"footer-middle\">\n              <h2 class=\"footer-heading\">Try Our App</h2>\n              <ul class=\"footer-middle-list icons\">\n                  <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n                  <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n              </ul>\n              </div>\n          <div class=\"footer-right\">\n              <p class=\"footer-links\">\n                  <h2 class=\"footer-heading\">Contact Us</h2>\n                  <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n                  <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n              </p>\n          </div>\n      </div>\n      <hr class=\"footer-hr\" style=\"color:grey;\">\n      <div class=\"footer-copyright\" >\n          <p>Copyright &copy; and &reg; Since <script>document.write(new Date().getFullYear())</script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>\n      </div>\n  </footer>\n\n  <!-----------scroll back to top button-->\n  <button  id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\" >\n    <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\" ></i>\n  </button>\n  <script>\n  $(document).ready(function(){\n    var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n    window.onscroll = function () { scrollFunction() };\n\n    function scrollFunction() {\n    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n      scrollTopButton.style.display = \"block\";\n    } else {\n      scrollTopButton.style.display = \"none\";\n    }\n  }\n\n  $(\"#scrollToTopButton\").click(function(){\n  $('html ,body').animate({scrollTop : 0},800)\n  });\n  });\n  </script>\n<script>\n  function logout(){\n    window.location.replace(\"login.html\");\n  }\n</script>\n  <!-- offcanva JS and footer js -->\n  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n  <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n  <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n\n  <script> jQuery('#waterdrop').raindrops({ color: '#292c2f', canvasHeight: 150, density: 0.1, frequency: 20 });\n  </script>\n\n  <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\"\n    integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\"\n    crossorigin=\"anonymous\"></script>\n  <script src=\"./static/script.js\"></script>\n\n</body>\n\n</html>\n"
  },
  {
    "path": "fantasy.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width\">\n    <title>ApnaTheatre.com</title>\n    <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n\n    <!-- Font  -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n        integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n        crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n        <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n\n    <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n    <link rel=\"stylesheet\" href=\"static/bootstrap.min.css\">\n    <link rel=\"stylesheet\" href=\"static/style-min.css\">\n    <link rel=\"stylesheet\" href=\"cards.css\">\n\n</head>\n\n<!------------------------Scroll to top button------------------------------------------------>\n<style>\n  #scrollToTopButton{\nposition:fixed;\nbottom: 40px;\nright: 25px;\nfont-size: 25px;\nz-index: 99;\nwidth: 50px;\nheight: 50px;\nbackground-color:red;\ncolor:black;\nborder: none;\ncursor: pointer;\noutline: none;\npadding: 6px;\nborder-radius: 50%;\n}\n#scrollToTopButton:hover, i:hover {\nbackground-color:white;\ncolor:red;\n}\n#header-nav .nav-link {\n  color: white;\n  font-size: 20px;\n  margin-left: 20px;\n}\n    @media only screen and (max-width: 1400px){\n  #header-nav .nav-link {\n    color: white;\n    font-size: 18px;\n    margin-left: 18px;\n  }\n  #searchText{\n    width: 150px;\n  }\n}\n\n@media only screen and (min-width: 1133px) and (max-width: 1275px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n}\n@media only screen and (min-width: 1035px) and (max-width: 1132px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n  #searchText{\n    width: 120px;\n  }\n  #submitBtn{\n    width: 60px;\n    display: flex;\n    justify-content: center;\n  }\n}\n@media only screen and (min-width: 993px) and (max-width: 1034px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 14px;\n    margin-left: 10px;\n  } \n\n#searchText{\n  width: 100px;\n}\n#submitBtn{\n  width: 50px;\n  display: flex;\n  justify-content: center;\n}\n}\n\n.container {\n  text-align: center;\n}\n.nav-item :hover{\n  margin-bottom: 10px;\n  \n  \n}\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n</style>\n\n<body>\n    <div class=\"scroll-bar\">\n\n        <!-- navbar starts -->\n\n        <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n          <div class=\"container-fluid\">\n            <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n                height=\"24\"></a>\n            <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n              data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n              <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n            </button>\n            \n            <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n              <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n                <li class=\"nav-item\">\n                  <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"tv.html\">TV</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n                </li>\n              \n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n                </li>\n                <li>\n                  <!-- Genre dropdown starts-->\n                  <div>\n                    <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                        <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                            Genres\n                        </button>\n                        <div class=\"dropdown-content\" style=\"color: white;\">\n                            <a href=\"popular.html\">Popular</a>\n                            <a href=\"crime.html\">Crime</a>\n                            <a href=\"suspense.html\">Suspense & Thriller</a>\n                            <a href=\"action.html\">Action</a>\n                            <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                            <a href=\"documentary.html\">Documentary</a>\n                            <a href=\"horror.html\">Horror</a>\n                            <a href=\"drama.html\">Drama</a>\n                            <a href=\"war.html\">War & Politics</a>\n                            <a href=\"comedy.html\">Comedy</a>\n                            <a href=\"romance.html\">Romance</a>\n                            <a href=\"anime.html\">Anime</a>\n                          </div>\n                    </div>\n                  </div>\n                  <!-- Genre dropdown ends-->\n                </li>\n                <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                  <li>\n                    <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n                  </li>\n                </div>\n              </ul>\n              <form id=\"searchForm\" class=\"d-flex\">\n                <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n                <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n              </form>\n            </div>\n          </div>\n          </nav>\n    \n            <!-- navbar ends -->\n\n        <div class=\"maincontainer\">\n            <div class=\"container\">\n                <div id=\"movies\" class=\"row\"></div>\n            </div>\n            <hr>\n            <h2>Sci-Fi & Fantasy</h2>\n            <hr>\n            <div class=\"container\" id=\"Movies\">\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/twilight.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1 style=\"font-size: 30px;\">Breaking Dawn</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2011</button>\n                        <button class=\"btn_i b2_i\"  title=\"Movies\" style=\"color:white\">2</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">4.9</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">\n                      After consummating her marriage with Edward, Bella realises that she\n                       has become pregnant with a child that is half-human, half-vampire.\n                       Further, the unborn child has many enemies in the outside world.</p>\n\n                    \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin(){\n                              window.open(\"https://youtu.be/PQNLfo-SOR4\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Twilight: Breaking Dawn</b>\n                          <br>\n                          IMDb - 4.9\n                      </div>\n                  </div>\n                </div>\n              \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/inter.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Interstellar</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2014</button>\n                          <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h49m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.6</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">When Earth becomes uninhabitable in the future, a farmer\n                           and ex-NASA pilot, Joseph Cooper, is tasked to pilot a spacecraft, along with a team of researchers, to find a new planet for humans.</p>\n\n                         \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin1()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin1(){\n                              window.open(\"https://www.imdb.com/video/vi1586278169?playlistId=tt0816692&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Interstellar</b>\n                            <br>\n                            IMDb - 8.6\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/gravity.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Gravity</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2013</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1h31m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.7</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Two astronauts work together\n                          to survive after an accident leaves them stranded in space.</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin2()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin2(){\n                                window.open(\"https://www.imdb.com/video/vi2340006169?playlistId=tt1454468\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Gravity</b>\n                            <br>\n                            IMDb - 7.7\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/stranger.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Stranger Things</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2016</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">3</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.7</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">When a young boy disappears, his mother, a police chief and his friends\n                          must confront terrifying supernatural forces in order to get him back.</p>\n\n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin3()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin3(){\n                                window.open(\"https://www.imdb.com/video/vi2480390169?playlistId=tt4574334\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Stranger Things</b>\n                            <br>\n                            IMDb - 8.7\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/kong.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Godzilla vs Kong</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2021</button>\n                          <button class=\"btn_i b2_i\"  title=\"Time\" style=\"color:white\">1h53m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">6.4</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">The epic next chapter in the cinematic Monsterverse pits two of the greatest icons in motion picture history against one another - the\n                           fearsome Godzilla and the mighty Kong - with humanity caught in the balance.</p>\n\n                              \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin4()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin4(){\n                                window.open(\"https://www.imdb.com/video/vi576962841?playlistId=tt5034838\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                        </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Godzilla vs Kong</b>\n                            <br>\n                            IMDb - 6.4\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/harry.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Harry Potter Series</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2001</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">7</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.6</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">An orphaned boy enrolls in a school of wizardry, where he learns the truth about\n                          himself, his family and the terrible evil that haunts the magical world.</p>\n\n                         \n                                \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin5()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin5(){\n                                window.open(\"https://www.imdb.com/title/tt0241527/?ref_=fn_al_tt_1\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Harry Potter Series</b>\n                            <br>\n                            IMDb - 7.6\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/wanda.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Wanda Vision</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2021</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Blends the style of classic sitcoms with the MCU, in which Wanda Maximoff and Vision - two super-powered beings living their\n                           ideal suburban lives - begin to suspect that everything is not as it seems.</p>\n\n                     \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin6()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin6(){\n                                window.open(\"https://www.imdb.com/video/vi3485450265?playlistId=tt9140560\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Wanda Vision</b>\n                            <br>\n                            IMDb - 8\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/tenet.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Tenet</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                          <button class=\"btn_i b2_i\"  title=\"Time\" style=\"color:white\">2h30m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.4</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Armed with only one word, Tenet, and fighting for the survival of the entire world, a Protagonist journeys through a twilight world of international\n                           espionage on a mission that will unfold in something beyond real time.</p>\n\n                         \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin7()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin7(){\n                                window.open(\"https://www.imdb.com/video/vi2051194393?playlistId=tt6723592\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Tenet</b>\n                            <br>\n                            IMDb - 7.4\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/witcher.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>The Witcher</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Geralt of Rivia, a solitary monster hunter, struggles to find\n                          his place in a world where people often prove more wicked than beasts.</p>\n\n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin8()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin8(){\n                                window.open(\"https://www.imdb.com/video/vi840285977?playlistId=tt5180504\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>The Witcher</b>\n                            <br>\n                            IMDb - 8.2\n                        </div>\n                    </div>\n                  </div>\n                \n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/narnia.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1 style=\"font-size: 30px;\">The Chronicles of Narnia</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2005</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">3</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">6.9</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Four children get trapped in an unearthed land called Narnia,\n                          in order to go back home, they must face dark forces and beasts.</p>\n\n                         \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin9()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin9(){\n                                window.open(\"https://www.imdb.com/video/vi3727140377?playlistId=tt0363771\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>The Chronicles of Narnia</b>\n                            <br>\n                            IMDb - 6.9\n                        </div>\n                    </div>\n                  </div>\n                \n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/spider.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Spiderman</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2002</button>\n                          <button class=\"btn_i b2_i\"  title=\"Time\" style=\"color:white\">2h1m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.3</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Peter Parker's life changes when he is bitten by a genetically altered spider and gains superpowers. \n                            He uses his powers to help people and finds himself facing the Green Goblin, an evil maniac.</p>\n\n                         \n                              \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin10()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin10(){\n                                window.open(\"https://www.imdb.com/video/vi422553113?playlistId=tt0145487\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Spiderman</b>\n                            <br>\n                            IMDb - 7.3\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/flash.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>The Flash</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2014</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">7</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.6</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">After being struck by lightning, Barry Allen wakes up from his coma to discover he's been given the\n                           power of super speed, becoming the next Flash, fighting crime in Central City.</p>\n\n                \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin11()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin11(){\n                                window.open(\"https://www.imdb.com/video/vi3478176025?playlistId=tt3107288\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>The Flash</b>\n                            <br>\n                            IMDb - 7.6\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/lord.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Lord of Rings</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2001</button>\n                          <button class=\"btn_i b2_i\"  title=\"Parts\" style=\"color:white\">3</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.8</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">A meek Hobbit from the Shire and eight companions set out on a journey to destroy\n                           the powerful One Ring and save Middle-earth from the Dark Lord Sauron.</p>\n\n                          \n                              \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin12()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin12(){\n                                window.open(\"https://www.imdb.com/video/vi2073101337?playlistId=tt0120737\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>The Lord of the Rings</b>\n                            <br>\n                            IMDb - 8.8\n                        </div>\n                    </div>\n                  </div>\n                \n\n            </div>\n        </div>\n    </div>\n\n\n\n    <!-------------------------------Footer-------------------------------->\n    <div id=\"waterdrop\"></div>\n    <footer class=\"footer\">\n      <hr class=\"footer-hr\">\n        <div class=\"footer-content\">\n            <div class=\"footer-left\">\n                <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\" height=\"24\"></a>\n                <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Follow Us</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i class=\"fab fa-github github\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Services</h2>\n                <ul class=\"footer-middle-list\">\n                    <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Try Our App</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-right\">\n                <p class=\"footer-links\">\n                    <h2 class=\"footer-heading\">Contact Us</h2>\n                    <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n                    <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n                </p>\n            </div>\n        </div>\n        <hr class=\"footer-hr\">\n        <div class=\"footer-copyright\">\n            <p>Copyright &copy; and &reg; Since\n                <script>\n                    document.write(new Date().getFullYear())\n                </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>\n        </div>\n    </footer>\n\n    <!----------------------scroll back to top button----->\n    <button  id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\" >\n        <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\"></i>\n      </button>\n      <script>\n      $(document).ready(function(){\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n        window.onscroll = function () { scrollFunction() };\n\n        function scrollFunction() {\n        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n          scrollTopButton.style.display = \"block\";\n        } else {\n          scrollTopButton.style.display = \"none\";\n        }\n      }\n\n      $(\"#scrollToTopButton\").click(function(){\n      $('html ,body').animate({scrollTop : 0},800)\n      });\n      });\n      </script>\n<script>\n  function logout(){\n    window.location.replace(\"login.html\");\n  }\n  </script>\n    <!-- offcanva JS and footer js -->\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n    <script src=\"js/main-min.js\"></script>\n\n    <script>\n        jQuery('#waterdrop').raindrops({\n            color: '#292c2f',\n            canvasHeight: 150,\n            density: 0.1,\n            frequency: 20\n        });\n    </script>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\" crossorigin=\"anonymous\"></script>\n    <script src=\"./static/script.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "faq.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n  <meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width\">\n  <title>ApnaTheatre</title>\n  <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n\n  <!-- Font  -->\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n  <!-- Bootstrap CSS -->\n  <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\n    integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n  <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n  <link href=\"./static/faq.css\" rel=\"stylesheet\" type=\"text/css\" />\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n    integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n    crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n\n  <link rel=\"stylesheet\" href=\"static/bootstrap.min.css\">\n  <link rel=\"stylesheet\" href=\"static/style-min.css\">\n  <link rel=\"stylesheet\" href=\"cards.css\">\n  <link rel=\"stylesheet\" href=\"footer.css\">\n  <style>\n    .nav-item :hover{\n  margin-bottom: 10px;\n  \n  \n}\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n  </style>\n  \n</head>\n<body>\n    <!-- navbar starts -->\n\n    <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n      <div class=\"container-fluid\">\n        <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n            height=\"24\"></a>\n        <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n          data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n          <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n        </button>\n        \n        <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n          <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n            <li class=\"nav-item\">\n              <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"tv.html\">TV</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n            </li>\n            \n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n            </li>\n            <li>\n              <!-- Genre dropdown starts-->\n              <div>\n                <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                    <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                        Genres\n                    </button>\n                    <div class=\"dropdown-content\" style=\"color: white;\">\n                        <a href=\"popular.html\">Popular</a>\n                        <a href=\"crime.html\">Crime</a>\n                        <a href=\"suspense.html\">Suspense & Thriller</a>\n                        <a href=\"action.html\">Action</a>\n                        <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                        <a href=\"documentary.html\">Documentary</a>\n                        <a href=\"horror.html\">Horror</a>\n                        <a href=\"drama.html\">Drama</a>\n                        <a href=\"war.html\">War & Politics</a>\n                        <a href=\"comedy.html\">Comedy</a>\n                        <a href=\"romance.html\">Romance</a>\n                        <a href=\"anime.html\">Anime</a>\n                      </div>\n                </div>\n              </div>\n              <!-- Genre dropdown ends-->\n            </li>\n            <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n              <li>\n                <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n              </li>\n            </div>\n          </ul>\n          <form id=\"searchForm\" class=\"d-flex\">\n            <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n            <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n          </form>\n        </div>\n      </div>\n      </nav>\n\n        <!-- navbar ends -->\n\n      <!-- ======= Frequently Asked Questions Section ======= -->\n      <div class=\"faq-section\"><h2 align=\"center\">Frequently Asked Questions</h2>\n      <details open> \n        <summary align=\"center\">What is Movie Streaming?</summary>\n      <div class=\"faq__content\">\n          <p>Movie Streaming is a streaming service that offers a wide variety of award-winning TV shows, movies, anime, documentaries and more – on thousands of internet-connected devices.</p>\n            <p>You can watch as much as you want, whenever you want, without a single ad – all for one low monthly price. There's always something new to discover, and new TV shows and movies are added every week!</p>\n        </div>\n      </details>\n      <br>\n      <br>\n      <details>\n        <summary align=\"center\">How much does Movie Streaming cost?</summary>\n        <div class=\"faq__content\">\n          <p>Watch Movie Streaming on your smartphone, tablet, Smart TV, laptop, or streaming device, all for one fixed monthly fee. Plans range from ₹ 199 to ₹ 799 a month. No extra costs, no contracts.</p>\n        </div>\n      </details>\n      <br>\n      <br>\n      <details>\n        <summary align=\"center\">Where can I watch?</summary>\n        <div class=\"faq__content\">\n          <p>Watch anywhere, anytime, on an unlimited number of devices. Sign in with your Movie Streaming account to watch instantly on the web at moviestreaming.com from your personal computer or on any internet-connected device that offers the Movie Streaming app, including smart TVs, smartphones, tablets, streaming media players and game consoles.\n              You can also download your favourite shows with the iOS, Android, or Windows 10 app. Use downloads to watch while you're on the go and without an internet connection. Take Movie Streaming with you anywhere.\n          </p>\n        </div>\n        </details>\n        <br>\n        <br>\n      <details>\n        <summary align=\"center\">How do I cancel?</summary>\n        <div class=\"faq__content\">\n          <p>Movie Streaming is flexible. There are no annoying 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.</p>\n        </div>\n        </details>\n        <br>\n        <br>\n      <details>\n        <summary align=\"center\">What can I watch on Movie Streaming?</summary>\n        <div class=\"faq__content\">\n          <p>Movie Streaming has an extensive library of feature films, documentaries, TV shows, anime, award-winning Movie Streaming originals, and more. Watch as much as you want, anytime you want.</p>\n        </div>\n        </details>\n        <br>\n        <br>\n      <details>\n        <summary align=\"center\">Is Movie Streaming good for kids?</summary>\n        <div class=\"faq__content\">\n          <p>The Movie Streaming Kids experience is included in your membership to give parents control while kids enjoy family-friendly TV shows and films in their own space.<br>Kids profiles come with PIN-protected parental controls that let you restrict the maturity rating of content kids can watch and block specific titles you don’t want kids to see.</p>\n        </div>\n        </details>\n        <br>\n      </details>\n      <!-------------------------------Footer-------------------------------->\n    <footer class=\"footer\">\n      <hr class=\"footer-hr\">\n      <div class=\"footer-content m-0\">\n        <div class=\"footer-left\">\n          <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n              height=\"24\"></a>\n          <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n        </div>\n        <div class=\"footer-middle\">\n          <h2 class=\"footer-heading\">Follow Us</h2>\n          <ul class=\"footer-middle-list icons\">\n            <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i\n                class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i\n                class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i\n                class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i\n                class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i\n                class=\"fab fa-github github\" style=\"color:red\"></i></a>\n          </ul>\n        </div>\n        <div class=\"footer-middle\">\n          <h2 class=\"footer-heading\">Services</h2>\n          <ul class=\"footer-middle-list\">\n            <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n          </ul>\n        </div>\n        <div class=\"footer-middle\">\n          <h2 class=\"footer-heading\">Try Our App</h2>\n          <ul class=\"footer-middle-list icons\">\n            <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n          </ul>\n        </div>\n        <div class=\"footer-right mt-0\">\n          <p class=\"footer-links mb-0\">\n          <h2 class=\"footer-heading d-flex\">Contact Us</h2>\n          <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n          <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n          </p>\n        </div>\n      </div>\n      <hr class=\"footer-hr\">\n      <div class=\"footer-copyright\">\n        <p>Copyright &copy; and &reg; Since\n          <script>\n            document.write(new Date().getFullYear())\n          </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)\n        </p>\n      </div>\n    </footer>\n\n    <!----------------------scroll back to top button-->\n    <button id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\">\n      <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\"></i>\n    </button>\n    <script>\n      $(document).ready(function () {\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n        window.onscroll = function () { scrollFunction() };\n\n        function scrollFunction() {\n          if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n            scrollTopButton.style.display = \"block\";\n          } else {\n            scrollTopButton.style.display = \"none\";\n          }\n        }\n\n        $(\"#scrollToTopButton\").click(function () {\n          $('html ,body').animate({ scrollTop: 0 }, 800)\n        });\n      });\n    </script>\n\n    <!-- footer scripts -->\n\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n    <script src=\"js/main-min.js\"></script>\n\n    <script>\n      jQuery('#waterdrop').raindrops({\n        color: '#292c2f',\n        canvasHeight: 150,\n        density: 0.1,\n        frequency: 20\n      });\n    </script>\n    <script>\n      function logout(){\n        window.location.replace(\"login.html\");\n      }\n      </script>\n    <!-- bootsstrap JS -->\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\"\n      integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\"\n      crossorigin=\"anonymous\"></script>\n    <script src=\"./static/script.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "footer.css",
    "content": " /* CSS FOR FOOTER */\n *{\n  font-family: 'Ubuntu', sans-serif;\n }\n\n .footer-distributed {\n   background-color: #292c2f;\n   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);\n   box-sizing: border-box;\n   width: 100%;\n   text-align: left;\n   font: normal 16px sans-serif;\n   padding: 20px 20px;\n }\n\n .footer-distributed .footer-left p {\n   color: #8f9296;\n   font-size: 14px;\n   margin: 0;\n }\n\n /* Footer links */\n\n .footer-distributed p.footer-links {\n   font-size: 18px;\n   font-weight: bold;\n   color: #ffffff;\n   margin: 0 0 10px;\n   padding: 0;\n   transition: ease .25s;\n   font-family: Verdana, Geneva, Tahoma, sans-serif;\n }\n\n .footer-distributed p.footer-links a {\n   display: inline-block;\n   line-height: 1.8;\n   text-decoration: none;\n   color: inherit;\n   transition: ease .25s;\n }\n\n .footer-distributed .footer-links a:before {\n   content: \"·\";\n   font-size: 20px;\n   left: 0;\n   color: #fff;\n   display: inline-block;\n   padding-right: 5px;\n }\n\n .footer-distributed .footer-links .link-1:before {\n   content: none;\n }\n\n .footer-distributed .footer-right {\n   float: right;\n   margin-top: 6px;\n   max-width: 180px;\n }\n\n .footer-distributed .footer-right a {\n   display: inline-block;\n   width: 35px;\n   height: 35px;\n   background-color: #647681;\n   border-radius: 2px;\n   font-size: 20px;\n   color: #ffffff;\n   text-align: center;\n   line-height: 35px;\n   margin-left: 3px;\n   transition: all .25s;\n }\n\n .footer-distributed .footer-right a:hover {\n   transform: scale(1.1);\n   -webkit-transform: scale(1.1);\n }\n\n .footer-distributed p.footer-links a:hover {\n   text-decoration: underline;\n }\n\n /* Media Queries */\n\n @media (max-width: 600px) {\n\n   .footer-distributed .footer-left,\n   .footer-distributed .footer-right {\n     text-align: center;\n   }\n\n   .footer-distributed .footer-right {\n     float: none;\n     margin: 0 auto 20px;\n   }\n\n   .footer-distributed .footer-left p.footer-links {\n     line-height: 1.8;\n   }\n }\n #scrollToTopButton{\n    position: fixed;\n    bottom: 40px;\n    right: 25px;\n    font-size: 25px;\n    z-index: 99;\n    width: 50px;\n    height: 50px;\n    background-color:red;\n    color:black;\n    border: none;\n    cursor: pointer;\n    outline: none;\n    padding: 6px;\n    border-radius: 50%;\n    }\n    #scrollToTopButton:hover, i:hover {\n    background-color:white;\n    color:red;\n    }\n    #nav:hover\n  {\n    background-color:#e60e23!important;\n  \n  }\n  \n  \n  \n      .logo {\n    width: 110px;\n    height: 90px;\n    padding: 3px;\n    margin: 0;\n    padding: 0;\n  }\n  .fas:hover{background: none!important ;}\n  .nav-item{ flex-wrap:wrap;}\n  .menu li a:hover {\n    color: red !important;\n    opacity: 0.5;\n  }\n  \n  /* CSS FOR FOOTER */\n  .footer{\n  margin-bottom:15px;\n  font-family: Verdana, Geneva, Tahoma, sans-serif;\n  }\n  .footer-content{\n    display:flex;\n    justify-content:space-between;\n    padding: 10px 20px;\n  }\n  .footer-logo{\n    width: 150px;\n    height: 120px;\n    padding: 3px;\n    margin:0px 0px 0px 10px;\n    padding: 0;\n  }\n  .footer-heading{\n    color:red;\n  }\n  .footer-left, .footer-right, .footer-middle{\n  text-align:center;\n  }\n  .icons{\n    margin-left:-30px;\n  }\n  .footer-links i{\n  font-size:30px;\n  width:40px;\n  height:40px;\n  padding: 5px;\n  margin-top:30px;\n  }\n  .footer-middle a i:hover{\n  background-color:white;\n  border-radius:50px;\n  color:red;\n  }\n  .footer-middle-list-item{\n  list-style:none;\n  font-size:15px;\n  font-family:cursive;\n  margin:5px 0px 0px 15px;\n  text-align:left;\n  }\n  .footer-middle-list-item a{\n  text-decoration:none;\n  color:white;\n  }\n  .footer-middle-list-item a:hover{\n  color:red;\n  }\n  .footer-right{\n    margin-top:-15px;\n  }\n  .footer-contact-button{\n  font-size:20px;\n  background-color:red;\n  color:black;\n  padding:10px;\n  border:none;\n  border-radius:10px;\n  text-decoration:none;\n  }\n  .footer-contact-button:hover{\n  background-color:white;\n  color:red;\n  }\n  .footer-bottom-tagline{\n  color:white;\n  font-size:15px;\n  font-family:cursive;\n  margin-bottom:25px;\n  }\n  \n  \n  .footer-copyright{\n  text-align:center;\n  color:white;\n  margin-top:20px;\n  font-size:18px;\n  }\n  .footer-hr{\n      color:grey;\n      font-weight:bold;\n  }\n  /* .footer-right a:hover{transform:scale(1.1); -webkit-transform:scale(1.1);} */\n  \n  /***************** Media Queries *********************/\n  \n  @media (max-width: 600px) {\n  .footer-content{\n     display:block;\n     text-align:center;\n  }\n  .footer-middle-list-item{\n    text-align:center;\n    margin-left:-20px;\n  }\n  \n  .footer-left, .footer-middle, .footer-right{\n    margin-top:50px;\n  }\n  }\n  \n  #waterdrop {\n    height: 30px;\n  }\n  \n  #waterdrop canvas {\n    bottom: -70px !important;\n  }\n  \n  \n "
  },
  {
    "path": "home.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n  <meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width\">\n  <title>ApnaTheatre</title>\n  <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n\n  <!-- Font  -->\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n  <!-- Bootstrap CSS -->\n  <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\n    integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n  <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n    integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n    crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n\n  <link rel=\"stylesheet\" href=\"static/bootstrap.min.css\">\n  <link rel=\"stylesheet\" href=\"static/style-min.css\">\n  <link rel=\"stylesheet\" href=\"cards.css\">\n\n</head>\n\n<!------------------------Scroll to top button------------------------------------------------>\n<style>\n  .poster {\n    box-shadow: 0 0 15px red !important;\n  \n  }\n  .buddy{\n    cursor: pointer;\n  }\n  #scrollToTopButton {\n    position: fixed;\n    bottom: 40px;\n    right: 25px;\n    font-size: 25px;\n    z-index: 99;\n    width: 50px;\n    height: 50px;\n    background-color: red;\n    color: black;\n    border: none;\n    cursor: pointer;\n    outline: none;\n    padding: 6px;\n    border-radius: 50%;\n  }\n\n#scrollToTopButton:hover,i:hover {\n    background-color: white;\n    color: red;\n  }\n\n  .navbar-nav{\n    display: flex;\n    align-items: center;\n    padding: 0px 7.5px;\n  }\n\n\n\n\n  .maincontainer h3 {\n    color: white;\n    text-align: center;\n}\n\n.container {\n  text-align: center;\n}\n#navbarNav.nav-item.nav-link a:hover{\n  color: red;\n}\n.nav-link:hover{\n  color: red;\n}\n.nav-item :hover{\n  margin-bottom: 10px;\n  \n  \n}\n\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n</style>\n<script>\n  setTimeout(function () {\n    $('.section').fadeToggle();\n  }, 4000);\n  \n</script>\n\n<body>\n  \n\n\n\n  <div class=\"scroll-bar\">\n    <!-- navbar starts -->\n\n    <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n      <div class=\"container-fluid\">\n        <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n            height=\"24\"></a>\n        <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n          data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n          <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n        </button>\n        \n        <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n          <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n            <li class=\"nav-item \">\n              <a class=\"nav-link active s\" aria-current=\"page\" href=\"home.html\" onMouseOver=\"this.style.color='red'\" onMouseOut=\"this.style.color='white'\">Home</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link \" href=\"movies.html\" onMouseOver=\"this.style.color='red'\" onMouseOut=\"this.style.color='white'\">Movies</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link \" href=\"web-series.html\" onMouseOver=\"this.style.color='red'\" onMouseOut=\"this.style.color='white'\" >Web Series</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"kids.html\" onMouseOver=\"this.style.color='red'\" onMouseOut=\"this.style.color='white'\">Kids</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"tv.html\"  onMouseOver=\"this.style.color='red'\" onMouseOut=\"this.style.color='white'\">TV</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"premium.html\"  onMouseOver=\"this.style.color='red'\" onMouseOut=\"this.style.color='white'\">Premium</a>\n            </li>\n      \n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"contactus.html\"  onMouseOver=\"this.style.color='red'\" onMouseOut=\"this.style.color='white'\">Contact Us</a>\n            </li>\n            <li>\n              <!-- Genre dropdown starts-->\n              <div>\n                <div class=\"dropdown\" style=\"position: relative; disPlay: inline-block; padding-top: 5px; padding-left: 15px;\">\n                    <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                        Genres\n                    </button>\n                    <div class=\"dropdown-content\" style=\"color: white;\">\n                        <a href=\"popular.html\">Popular</a>\n                        <a href=\"crime.html\">Crime</a>\n                        <a href=\"suspense.html\">Suspense & Thriller</a>\n                        <a href=\"action.html\">Action</a>\n                        <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                        <a href=\"documentary.html\">Documentary</a>\n                        <a href=\"horror.html\">Horror</a>\n                        <a href=\"drama.html\">Drama</a>\n                        <a href=\"war.html\">War & Politics</a>\n                        <a href=\"comedy.html\">Comedy</a>\n                        <a href=\"romance.html\">Romance</a>\n                        <a href=\"anime.html\">Anime</a>\n                      </div>\n                </div>\n              </div>\n              <!-- Genre dropdown ends-->\n            </li>\n            <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n              <li>\n                <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\"  onMouseOver=\"this.style.color='red'\" onMouseOut=\"this.style.color='white'\">Logout</button>\n              </li>\n            </div>\n          </ul>\n          <form id=\"searchForm\" class=\"d-flex\">\n            <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n            <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n          </form>\n        </div>\n      </div>\n      </nav>\n\n        <!-- navbar ends -->\n\n\n    <marquee>Welcome To <i>ApnaTheatre</i>.com<sup>&reg;</sup></marquee>\n    <label class=\"online\">Stream Latest Movies Now!</label>\n    \n\n\n    <div class=\"buddy\">\n\n      <div class=\"slider\">\n        <div class=\"slide_track\">\n\n          <div class=\"slide\">\n            <img src=\"./Images/apharan.jpg\" alt=\"\" />\n          </div>\n\n          <div class=\"slide\">\n            <img src=\"./Images/bat.jpg\" alt=\"\" />\n          </div>\n          <div class=\"slide\">\n            <img src=\"./Images/breaking.jpg\" alt=\"\" />\n          </div>\n          <div class=\"slide\">\n            <img src=\"./Images/criminal.jpg\" alt=\"\" />\n          </div>\n          <div class=\"slide\">\n            <img src=\"./Images/got.jpg\" alt=\"\" />\n          </div>\n          <div class=\"slide\">\n            <img src=\"./Images/infinity.jpg\" alt=\"\" />\n          </div>\n          <div class=\"slide\">\n            <img src=\"./Images/kota.jpg\" alt=\"\" />\n          </div>\n          <div class=\"slide\">\n            <img src=\"./Images/mirzapur.jpg\" alt=\"\" />\n          </div>\n          <div class=\"slide\">\n            <img src=\"./Images/sacred.jpg\" alt=\"\" />\n          </div>\n          <div class=\"slide\">\n            <img src=\"./Images/scam.jpg\" alt=\"\" />\n          </div>\n\n\n          <div class=\"slide\">\n            <img src=\"./Images/apharan.jpg\" alt=\"\" />\n          </div>\n\n          <div class=\"slide\">\n            <img src=\"./Images/bat.jpg\" alt=\"\" />\n          </div>\n          <div class=\"slide\">\n            <img src=\"./Images/breaking.jpg\" alt=\"\" />\n          </div>\n          <div class=\"slide\">\n            <img src=\"./Images/criminal.jpg\" alt=\"\" />\n          </div>\n          <div class=\"slide\">\n            <img src=\"./Images/got.jpg\" alt=\"\" />\n          </div>\n          <div class=\"slide\">\n            <img src=\"./Images/infinity.jpg\" alt=\"\" />\n          </div>\n          <div class=\"slide\">\n            <img src=\"./Images/kota.jpg\" alt=\"\" />\n          </div>\n          <div class=\"slide\">\n            <img src=\"./Images/mirzapur.jpg\" alt=\"\" />\n          </div>\n          <div class=\"slide\">\n            <img src=\"./Images/sacred.jpg\" alt=\"\" />\n          </div>\n          <div class=\"slide\">\n            <img src=\"./Images/scam.jpg\" alt=\"\" />\n          </div>\n\n\n\n\n\n        </div>\n\n      </div>\n\n\n    </div>\n    \n\n        \n    <div class=\"maincontainer\">\n\n      <h2>Movies</h2>\n      <hr>\n      <div class=\"container\">\n          <div id=\"movies\" class=\"row\"></div>\n      </div>\n      \n      <div class=\"container\" id=\"Movies\">\n        <h3>Hollywood</h3>\n        <hr>\n         <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/inception.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Inception</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2010</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h42m<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.8</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Cobb steals information from his targets by entering their dreams. Saito offers to wipe clean Cobb's criminal history as payment for performing an inception on his sick competitor's son.</p>\n\n                  <!--<form action=\"https://youtu.be/YoHD9XEInc0&t=17s\"> -->\n                      \n                      <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin()\">▶Trailer</button>\n                        <script type=\"text/javascript\">\n                          function openWin(){\n                            window.open(\"https://youtu.be/YoHD9XEInc0&t=17s\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                          }\n                        </script>\n                 <!-- </form> -->\n                  <br>\n                  <br>\n                  <button class=\"btn_i b4_i\" onclick=\"openMovieWin()\">▶Play</button>\n                  <script type=\"text/javascript\">\n                    function openMovieWin(){\n                      window.open(\"https://youtu.be/wcS_awzEYuk\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script>\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Inception</b><br>IMDb - 8.8\n            </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/dark knight.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1 style=\"font-size: 30px;\">The Dark Knight</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2008</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h32m<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.0</button>\n                \n                <br >\n                <br >\n              </p>\n\n                <p class=\"para_i\">After Gordon, Dent and Batman begin an assault on Gotham's organised crime, the mobs hire the Joker, a psychopathic criminal mastermind who offers to kill Batman and bring the city to its knees.</p>\n\n                  \n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin1()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin1(){\n                        window.open(\"https://youtu.be/LDG9bisJEaI\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script>\n                  <br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n                \n            </div>\n            <div class=\"flim\">\n              <b>The Dark Knight</b><br>IMDb - 9.0\n          </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"\n              flip-card-front_i\">\n                  <img src=\"./Images/Parasite.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Parasite</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h12m<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.6</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">The struggling Kim family sees an opportunity when the son starts working for the wealthy Park family. Soon, all of them find a way to work within the same household and start living a parasitic life.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin2()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin2(){\n                        window.open(\"https://youtu.be/SEUXfv87Wpk\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Parasite</b><br>IMDb - 8.6\n            </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/We're_the_Millers_poster.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>We're the Millers</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2013</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1h58m</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.0</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">David, a drug dealer, is forced by his boss to smuggle drugs from Mexico. He hires a stripper, a petty thief and a teenage neighbour and forms a fake family to help him smuggle the drugs.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin3()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin3(){\n                        window.open(\"https://youtu.be/0Vsy5KzsieQ\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>We're the Millers</b>\n              <br>\n              IMDb - 7.0\n            </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/the terminal.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>The Terminal</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2004</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h8m<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.4</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Viktor Navorski gets stranded at an airport when a war rages in his country. He is forced by the officials to stay at the airport until his original identity is confirmed.</p>\n\n                 \n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin4()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin4(){\n                        window.open(\"https://youtu.be/hjydAG1lG_8\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\" onclick=\"openMovieWin4()\">▶Play</button>\n\n                  <script type=\"text/javascript\">\n                    function openMovieWin4(){\n                      window.open(\"https://youtu.be/ozmOG2RxxFw\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script>\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>The Terminal</b>\n              <br>\n              IMDb - 7.4\n            </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/Matrix.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>The Matrix</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">1999</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h16m<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.7</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Thomas Anderson, a computer programmer, is led to fight an underground war against powerful computers who have constructed his entire reality with a system called the Matrix.</p>\n\n                 \n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin5()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin5(){\n                        window.open(\"https://www.youtube.com/watch?v=vKQi3bBA1y8\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>The Matrix</b>\n              <br>\n              IMDb - 8.7\n             </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/joker.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Joker</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h2m<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.4</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Arthur Fleck, a party clown, leads an impoverished life with his ailing mother. However, when society shuns him and brands him as a freak, he decides to embrace the life of crime and chaos.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin6()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin6(){\n                        window.open(\"https://www.youtube.com/watch?v=zAGVQLHvwOY\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Joker</b><br>IMDb - 8.4\n            </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/Hamilton.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Hamilton</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h40m<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.4</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Alexander Hamilton, an orphan, arrives in New York to work for George Washington. After the American Revolution, he goes on to become first Secretary of the Treasury of the US.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin7()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin7(){\n                        window.open(\"https://youtu.be/DSCKfXpAGHc\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Hamilton</b>\n              <br>\n              IMDb - 8.4\n            </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/goodfellas.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>GoodFellas</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">1990</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h28m<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.7</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Young Henry Hill, with his friends Jimmy and Tommy, begins the climb from being a petty criminal to a gangster on the mean streets of New York.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin8()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin8(){\n                        window.open(\"https://www.youtube.com/watch?v=qo5jJpHtI1Y\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>GoodFellas</b>\n              <br>\n              IMDb - 8.7\n            </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/the shawshank.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1 style=\"font-size: 30px;\">The Shawshank Redemption</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">1994</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h22m<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.3</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\" style=\"margin-top: -20px;\">Andy Dufresne, a successful banker, is arrested for the murders of his wife and her lover, and is sentenced to life imprisonment at the Shawshank prison. He becomes the most unconventional prisoner.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin9()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin9(){\n                        window.open(\"https://youtu.be/6hB3S9bIaco\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\" onclick=\"openMovieWin9()\">▶Play</button>\n                  \n                  <script type=\"text/javascript\">\n                    function openMovieWin9(){\n                      window.open(\"https://youtu.be/MoLEo-HUGOk\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script>\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>The Shawshank Redemption</b>\n              <br>\n              IMDb - 9.3\n          </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/green mile.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>The Green Mile</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">1999</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">3h9m<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.6</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Paul, the head guard of a prison, meets an inmate, John, an African American who is accused of murdering two girls. His life changes drastically when he discovers that John has a special gift.</p>\n                      \n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin10()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin10(){\n                        window.open(\"https://youtu.be/Ki4haFrqSrw\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>The Green Mile</b>\n              <br>\n              IMDb - 8.6\n          </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/inter.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Interstellar</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2014</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h55m<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.6</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">When Earth becomes uninhabitable in the future, a farmer and ex-NASA pilot, Joseph Cooper, is tasked to pilot a spacecraft, along with a team of researchers, to find a new planet for humans.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin11()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin11(){\n                        window.open(\"https://youtu.be/zSWdZVtXT7E\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\" onclick=\"openMovieWin11()\">▶Play</button>\n                  \n                  <script type=\"text/javascript\">\n                    function openMovieWin11(){\n                      window.open(\"https://youtu.be/It9-pm9JOSk\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script>\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Interstellar</b>\n              <br>\n              IMDb - 8.6\n            </div>\n          </div>\n        </div> \n      </div>\n\n<div class=\"container\" id=\"Movies\">\n        <h3>Bollywood</h3>\n        <hr>\n         <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/aaa.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Andaz Apna Apna</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">1994</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h41m<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.1</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Amar and Prem, who belong to middle-class families, compete to win over Raveena, a millionaire's daughter</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin12()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin12(){\n                        window.open(\"https://youtu.be/fd_w7Qw8biU\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\" onclick=\"openMovieWin12()\">▶Play</button>\n                  \n                  <script type=\"text/javascript\">\n                    function openMovieWin12(){\n                      window.open(\"https://youtu.be/uBI1iMhl25w\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script>\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Andaz Apna Apna</b>\n              <br>\n              IMDb - 8.1\n            </div>\n          </div>\n        </div>\n\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/chakde.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Chakde India</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2007</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h33m<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Kabir Khan, a former hockey star, is tainted as someone who betrayed his country. However, he begins coaching the Indian women's national hockey team to prove his loyalty to the nation.</p>\n\n                 \n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin13()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin13(){\n                        window.open(\"https://youtu.be/6a0-dSMWm5g\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Chakde India</b>\n              <br>\n              IMDb - 8.2\n            </div>\n          </div>\n        </div> \n\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/milkha.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1 style=\"font-size: 37px;\">Bhaag Milkha Bhaag</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2013</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">3h9m<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Milkha Singh, an Indian athlete, overcomes many agonising obstacles in order to become a world champion, Olympian and one of India's most iconic athletes.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin14()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin14(){\n                        window.open(\"https://youtu.be/3uICXnnW86U\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Bhaag Milkha Bhaag</b>\n              <br>\n              IMDb - 8.2\n            </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n            <div class=\"flip-card_i\">\n              <div class=\"flip-card-inner_i\">\n                <div class=\"flip-card-front_i\">\n                    <img src=\"./Images/wed.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                </div>\n                <div class=\"flip-card-back_i\">\n                  <h1>A Wednesday</h1>\n                    <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2008</button>\n                    <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1h44m</button>\n                    <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.1</button>\n                  </span>\n                  <br />\n                  <br />\n                </p>\n\n                  <p class=\"para_i\">Prakash Rathod, a retired police commissioner recounts the most memorable case of his career wherein he was informed about a bomb scare in Mumbai by an ordinary commoner.</p>\n\n                      <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin15()\">▶Trailer</button>\n                      <script type=\"text/javascript\">\n                        function openWin15(){\n                          window.open(\"https://youtu.be/yry6pBiXx14\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                        }\n                      </script><br><br>\n                    <button class=\"btn_i b4_i\" onclick=\"openMovieWin15()\">▶Play</button>\n                    \n                    <script type=\"text/javascript\">\n                        function openMovieWin15(){\n                          window.open(\"https://youtu.be/pmnnlAUDOfk\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                        }\n                      </script>\n                </div>\n              </div>\n              <div class=\"flim\">\n                <b>A Wednesday</b>\n                <br>\n                IMDb - 8.1\n              </div>\n            </div>\n          </div> \n\n           <div class=\"poster\">\n            <div class=\"flip-card_i\">\n              <div class=\"flip-card-inner_i\">\n                <div class=\"flip-card-front_i\">\n                    <img src=\"./Images/dhoni.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                </div>\n                <div class=\"flip-card-back_i\">\n                  <h1>MS Dhoni</h1>\n                    <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2016</button>\n                    <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">3h40m</button>\n                    <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.9</button>\n                  </span>\n                  <br />\n                  <br />\n                </p>\n\n                  <p class=\"para_i\">M S Dhoni, a boy from Ranchi, aspires to ▶▶Play cricket for India. Though he initially tries to please his father by working for the Indian Railways, he ultimately decides to chase his dreams.</p>\n\n                      <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin16()\">▶Trailer</button>\n                      <script type=\"text/javascript\">\n                        function openWin16(){\n                          window.open(\"https://youtu.be/6L6XqWoS8tw\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                        }\n                      </script><br><br>\n                    <button class=\"btn_i b4_i\" onclick=\"openMovieWin16()\">▶Play</button>\n                    \n                    <script type=\"text/javascript\">\n                        function openMovieWin16(){\n                          window.open(\"https://youtu.be/E00892hmVZM\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                        }\n                      </script>\n                </div>\n              </div>\n              <div class=\"flim\">\n                <b>Ms Dhoni : The Untold Story</b>\n                <br>\n                IMDb - 7.9\n              </div>\n            </div>\n          </div> \n\n           <div class=\"poster\">\n              <div class=\"flip-card_i\">\n                <div class=\"flip-card-inner_i\">\n                  <div class=\"flip-card-front_i\">\n                      <img src=\"./Images/drishyam.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                  </div>\n                  <div class=\"flip-card-back_i\">\n                    <h1>Drishyam</h1>\n                      <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2015</button>\n                      <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2h43m</button>\n                      <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\n                    </span>\n                    <br />\n                    <br />\n                  </p>\n\n                    <p class=\"para_i\">When the disappearance of a policewoman's son threatens to ruin Vijay's family, he leaves no stone unturned in order to shield his family.</p>\n\n                      <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin17()\">▶Trailer</button>\n                      <script type=\"text/javascript\">\n                        function openWin17(){\n                          window.open(\"https://youtu.be/AuuX2j14NBg\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                        }\n                      </script><br><br>\n                      <button class=\"btn_i b4_i\" onclick=\"openMovieWin17()\">▶Play</button>\n                      \n                      <script type=\"text/javascript\">\n                        function openMovieWin17(){\n                          window.open(\"https://youtu.be/udCFbqXjrZE\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                        }\n                      </script>\n                  </div>\n                </div>\n                <div class=\"flim\">\n                  <b>Drishyam</b>\n                  <br>\n                  IMDb - 8.2\n                </div>\n              </div>\n            </div>\n\n\n             <div class=\"poster\">\n              <div class=\"flip-card_i\">\n                <div class=\"flip-card-inner_i\">\n                  <div class=\"flip-card-front_i\">\n                      <img src=\"./Images/dil.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                  </div>\n                  <div class=\"flip-card-back_i\">\n                    <h1>Dilwale Dulhania</h1>\n                      <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">1995</button>\n                      <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">3h12m</button>\n                      <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.1</button>\n                    </span>\n                    <br />\n                    <br />\n                  </p>\n\n                    <p class=\"para_i\">Raj and Simran meet during a trip across Europe and the two fall in love. However, when Raj learns that Simran is already promised to another, he follows her to India to win her and her father over.</p>\n\n                        <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin18()\">▶Trailer</button>\n                        <script type=\"text/javascript\">\n                          function openWin18(){\n                            window.open(\"https://youtu.be/oIZ4U21DRlM\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                          }\n                        </script><br><br>\n                      <button class=\"btn_i b4_i\" onclick=\"openMovieWin18()\">▶Play</button>\n                      \n                      <script type=\"text/javascript\">\n                        function openMovieWin18(){\n                          window.open(\"https://youtu.be/9qOhi4UyR5Y\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                        }\n                      </script>\n                  </div>\n                </div>\n                <div class=\"flim\">\n                  <b>Dilwale Dulhania Le Jayenge</b>\n                  <br>\n                  IMDb - 8.1\n                </div>\n              </div>\n            </div>\n\n\n            <div class=\"poster\">\n              <div class=\"flip-card_i\">\n                <div class=\"flip-card-inner_i\">\n                  <div class=\"flip-card-front_i\">\n                      <img src=\"./Images/gangs of wassepur.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                  </div>\n                  <div class=\"flip-card-back_i\">\n                    <h1>Gangs of Wasseypur</h1>\n                      <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2012</button>\n                      <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2h40m</button>\n                      <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\n                    </span>\n                    <br />\n                    <br />\n                  </p>\n\n                    <p class=\"para_i\">A gangster (Manoj Bajpayee) clashes with the ruthless, coal-mining kingpin (Tigmanshu Dhulia) who killed his father (Jaideep Ahlawat).</p>\n\n                        <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin19()\">▶Trailer</button>\n                        <script type=\"text/javascript\">\n                          function openWin19(){\n                            window.open(\"https://youtu.be/j-AkWDkXcMY\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                          }\n                        </script><br><br>\n                      <button class=\"btn_i b4_i\" onclick=\"openMovieWin19()\">▶Play</button>\n                      \n                      <script type=\"text/javascript\">\n                        function openMovieWin19(){\n                          window.open(\"https://youtu.be/dz3uCM-MrGY\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                        }\n                      </script>\n                  </div>\n                </div>\n                <div class=\"flim\">\n                  <b>Gangs of Wasseypur</b>\n                  <br>\n                  IMDb - 8.2\n                </div>\n              </div>\n            </div>\n\n\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/sholay.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Sholay</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">1975</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">3h24m</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Jai and Veeru, two ex-convicts, are hired by Thakur Baldev Singh, a retired policeman, to help him nab Gabbar Singh, a notorious dacoit, who has spread havoc in the village of Ramgarh.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin20()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin20(){\n                        window.open(\"https://youtu.be/XjiluhItzIA\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\" onclick=\"openMovieWin20()\">▶Play</button>\n                  \n                  <script type=\"text/javascript\">\n                    function openMovieWin20(){\n                      window.open(\"https://youtu.be/tYrlXcloVLc\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script>\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Sholay</b>\n              <br>\n              IMDb - 8.2\n            </div>\n          </div>\n        </div>\n\n\n         <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/rdb.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Rang De Basanti</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2006</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2h51m</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.1</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">When Sue selects a few students to portray various Indian freedom fighters in her film, she unwittingly awakens their patriotism</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin21()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin21(){\n                        window.open(\"https://www.youtube.com/watch?v=QHhnhqxB4E8\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\" onclick=\"openMovieWin21()\">▶Play</button>\n                  \n                  <script type=\"text/javascript\">\n                    function openMovieWin21(){\n                      window.open(\"https://youtu.be/ubqm_GpRVXc\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script>\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Rang De Basanti</b>\n              <br>\n              IMDb - 8.1\n            </div>\n          </div>\n        </div> \n\n\n\n         <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/mbbs.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Munna Bhai MBBS</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2003</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2h36m</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.1</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Munna is a goon who sets out to fulfil his father's dream of becoming a doctor.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin22()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin22(){\n                        window.open(\"https://www.imdb.com/video/vi1188543257?▶PlaylistId=tt0374887&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\" onclick=\"openMovieWin22()\">▶Play</button>\n                  \n                  <script type=\"text/javascript\">\n                    function openMovieWin22(){\n                      window.open(\"https://youtu.be/H0OMXwKrGs8\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script>\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Munna Bhai MBBS</b>      \n              <br>\n              IMDb - 8.1\n            </div>\n          </div>\n        </div>\n\n\n\n\n         <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/kgf.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>KGF</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2h50m</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.3</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Rocky, a young man, seeks power and wealth in order to fulfil a promise to his dying mother</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin23()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin23(){\n                        window.open(\"https://youtu.be/-KfsY-qwBS0\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\" onclick=\"openMovieWin23()\">▶Play</button>\n                  \n                  <script type=\"text/javascript\">\n                    function openMovieWin23(){\n                      window.open(\"https://youtu.be/ULEQb_l-N08\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script>\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>KGF</b>\n              <br>\n              IMDb - 8.3\n            </div>\n          </div>\n        </div> \n\n\n    </div>\n    <!---next block -->\n\n    <h2>Web Series</h2>\n    <hr>\n    <div class=\"container\" id=\"WebSeries\">\n      <h3>Hollywood</h3>\n      <hr>\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/chernobyl.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Chernobyl</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.4</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">In April 1986, the city of Chernobyl in the Soviet Union suffers one of the worst nuclear disasters in the history of mankind. Consequently, many heroes put their lives on the line to save Europe.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin24()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin24(){\n                        window.open(\"https://youtu.be/s9APLXM9Ei8\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Chernobyl</b>\n              <br>\n              IMDb - 9.4\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/black mirror.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Black Mirror</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2011</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">5</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.8</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">In an abstrusely dystopian future, several individuals grapple with the manipulative effects of cutting edge technology in their personal lives and behaviours.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin25()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin25(){\n                        window.open(\"https://youtu.be/V0XOApF5nLU\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Black Mirror</b>\n              <br>\n              IMDb - 8.8\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/got.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Game of Thrones</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2011</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">8</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.2</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Nine noble families wage war against each other in order to gain control over the mythical land of Westeros.\n                   Meanwhile, a force is rising after millenniums and threatens the existence of living men.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin26()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin26(){\n                        window.open(\"https://youtu.be/gcTkNV5Vg1E\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Game of Thrones</b>\n              <br>\n              IMDb - 9.2\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/money.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1 style=\"font-size: 35px;\">Money Heist</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2017</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.3</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\" >A criminal mastermind who goes by \"The Professor\" has a plan to pull off the biggest heist in recorded history -- to print billions of euros in the Royal Mint of Spain. To help him carry out the ambitious plan, he recruits eight people with certain abilities and who have nothing to lose.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin27()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin27(){\n                        window.open(\"https://youtu.be/p_PJbmrX4uk\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Money Heist</b>\n              <br>\n              IMDb - 8.3\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/luci.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Lucifier</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2016</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">5</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.1</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">this series follows Lucifer, the original fallen angel, who has become dissatisfied with his life in hell. After abandoning his throne and retiring to Los Angeles, Lucifer indulges in his favorite things (women, wine and song) -- until a murder takes place outside of his upscale nightclub.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin28()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin28(){\n                        window.open(\"https://youtu.be/-0beFQnB5lY\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Lucifier</b>\n              <br>\n              IMDb - 8.1\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/sherlock series.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Sherlock</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2010</button>\n                  <button class=\"btn_i b2_i\"  title=\"seasons\" style=\"color:white\">3<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.1</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Dr Watson, a former army doctor, finds himself sharing a flat with Sherlock Holmes, an eccentric individual with a knack for solving crimes. Together, they take on the most unusual cases.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin29()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin29(){\n                        window.open(\"https://www.youtube.com/watch?v=xK7S9mrFWL4\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Sherlock</b>\n              <br>\n              IMDb - 9.1\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/crown.jpeg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>The Crown</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2016</button>\n                  <button class=\"btn_i b2_i\"  title=\"seasons\" style=\"color:white\">4<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.6</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">The series begins with an inside look at the early reign of the queen, who ascended the throne at age 25 after the death of her father, King George VI. As the decades pass, personal intrigues, romances, and political rivalries are revealed that ▶▶Played a big role in events that shaped the later years of the 20th century.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin30()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin30(){\n                        window.open(\"https://youtu.be/w1pIbUOc_lU\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>The Crown</b>\n              <br>\n              IMDb - 8.6\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/firefly.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Firefly</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2002</button>\n                  <button class=\"btn_i b2_i\"  title=\"seasons\" style=\"color:white\">1<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.0</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Set 500 years in the future after a universal civil war, the crew of a small transport spaceship takes any job so long as it puts food on the table. The disparate men and women just want to survive and maybe have better lives, but they face constant challenges on the new frontier, such as the Reavers -- flesh-eating mongrels who live on the fringes of the universe.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin31()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin31(){\n                        window.open(\"https://youtu.be/oBZrZij2-g8\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Firefly</b>\n              <br>\n              IMDb - 9.0\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/top of the lake.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Top of the Lake</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2013</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.5</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">A detective investigates the disappearance of a 12-year-old schoolgirl in a small town and gradually finds herself getting obsessed with the case.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin32()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin32(){\n                        window.open(\"https://youtu.be/wGWSB_ezYzs\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Top of the Lake</b>\n              <br>\n              IMDb - 7.5\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/breaking.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Breaking Bad</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2008</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">5</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.5</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Walter White, a chemistry teacher, discovers that he has cancer and decides to get into the meth-making business to repay his medical debts. His priorities begin to change when he partners with Jesse</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin33()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin33(){\n                        window.open(\"https://youtu.be/HhesaQXLuRY\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Breaking Bad</b>\n              <br>\n              IMDb - 9.5\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/peaky.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Peaky Blinders</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2013</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">5</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.8</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Tommy Shelby, a dangerous man, leads the Peaky Blinders, a gang based in Birmingham. Soon, Chester Campbell, an inspector, decides to nab him and put an end to the criminal activities.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin34()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin34(){\n                        window.open(\"https://youtu.be/oVzVdvGIC7U\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Peaky Blinders</b>\n              <br>\n              IMDb - 8.8\n            </div>\n          </div>\n        </div>\n\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/ozark.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1 style=\"font-size: 35px;\">Ozark</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2017</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">3</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.4</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\" style=\"margin-top: -20px;\">Drama series stars Jason Bateman as Marty Byrde, a financial planner who relocates his family from Chicago to a summer resort community in the Ozarks. With wife Wendy and their two kids in tow, Marty is on the move after a money-laundering scheme goes wrong, forcing him to pay off a substantial debt to a Mexican drug lord in order to keep his family safe. While the Byrdes' fate hangs in the balance, the dire circumstances force the fractured family to reconnect.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin35()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin35(){\n                        window.open(\"https://youtu.be/5hAXVqrljbs\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Ozark</b>\n              <br>\n              IMDb - 8.4\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/stranger.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Stranger Things</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2016</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">3</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.7</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">In 1980s Indiana, a group of young friends witness supernatural forces and secret government exploits.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin36()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin36(){\n                        window.open(\"https://youtu.be/b9EkMc79ZSU\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Stranger Things</b>\n              <br>\n              IMDb - 8.7\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/witcher.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>The Witcher</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.5</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">The witcher Geralt, a mutated monster hunter, struggles to find his place in a world in which people often prove more wicked than beasts.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin37()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin37(){\n                        window.open(\"https://youtu.be/ndl1W4ltcmg\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>The Witcher</b>\n              <br>\n              IMDb - 8.5\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/wanda.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Wanda Vision</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2021</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.0</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Living idealized suburban lives, super-powered beings Wanda and Vision begin to suspect that everything is not as it seems.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin38()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin38(){\n                        window.open(\"https://youtu.be/sj9J2ecsSpo\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Wanda Vision</b>\n              <br>\n              IMDb - 8.0\n            </div>\n          </div>\n        </div>\n\n    </div>\n    <!---third block -->\n\n    <div class=\"container\" id=\"WebSeries\">\n       <h3>Bollywood</h3>\n       <hr>\n      <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/mirzapur.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Mirzapur</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.4</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Akhandanand Tripathi made millions exporting carpets and became the mafia boss of Mirzapur. His son Munna, an unworthy, power-hungry heir, stops at nothing to continue his father's legacy.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin39()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin39(){\n                        window.open(\"https://youtu.be/ZNeGF-PvRHY\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Mirzapur</b>\n              <br>\n              IMDb - 8.4\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/sacred.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1 style=\"font-size: 30px;\">Sacred Games</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.7</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">When police officer Sartaj Singh receives an anonymous tip about the location of criminal overlord Ganesh Gaitonde, he embarks on a chase around Mumbai in what becomes a dangerous cat-and-mouse game. Amidst the chaos, trappings of a corrupt underworld are revealed.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin40()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin40(){\n                        window.open(\"https://www.youtube.com/watch?v=lM1xVnYsirw\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Sacred Games</b>\n              <br>\n              IMDb - 8.7\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/kota.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1 style=\"font-size: 30px;\">Kota Factory</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.0</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Kota Factory is an 2019 Indian Hindi-language web series created by Saurabh Khanna and directed by Raghav Subbu for The Viral Fever. The story is set is in Kota, which is a hub for many coaching centres where students come from all over India to prepare for various entrance exams.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin41()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin41(){\n                        window.open(\"https://youtu.be/pNZQ6msbOvM\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\" onclick=\"openMovieWin41()\">▶Play</button>\n                  \n                  <script type=\"text/javascript\">\n                    function openMovieWin41(){\n                      window.open(\"https://youtube.com/playlist?list=PLTB0eCoUXErb7pV0Sj1hXWrxerSZX1qgh\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Kota Factory</b>\n              <br>\n              IMDb - 9.0\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/upsc.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Aspirants</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2021</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Aspirants is a web series by The Viral Fever created by Arunabh Kumar.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin42()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin42(){\n                        window.open(\"https://youtu.be/ViOutJ0kuJY\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\" onclick=\"openMovieWin42()\">▶Play</button>\n                  \n                  <script type=\"text/javascript\">\n                    function openMovieWin42(){\n                      window.open(\"https://youtube.com/playlist?list=PLTB0eCoUXErY_KvRNKOERQtYSDPjOb8jw\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script>\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Aspirants</b>\n              <br>\n              IMDb - 9\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/bach.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>TVF Bachelors</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2016</button>\n                  <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.4</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">The series revolves around Four Bachelor Flatmates who in every episode will deal with a specific daily life bachelor related problem. Its about their battle against an external X problem as a single team The Bachelors.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin43()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin43(){\n                        window.open(\"https://www.facebook.com/TheViralFever/videos/tvf-bachelors-season-2-official-trailer/1511410242268393/\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\" onclick=\"openMovieWin43()\">▶Play</button>\n                  \n                  <script type=\"text/javascript\">\n                    function openMovieWin43(){\n                      window.open(\"https://youtube.com/playlist?list=PLTB0eCoUXErabI_K3mUcdiYM72o4CkWZC\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script>\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>TVF Bachelors</b>\n              <br>\n              IMDb - 8.4\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/mismatched.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Mismatched</h1>\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                  <button class=\"btn_i b2_i\"  title=\"seasons\" style=\"color:white\">1<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.4</button>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">After being set-up by their families, two teenagers strike up a tentative friendship at their summer programme.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin44()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin44(){\n                        window.open(\"https://youtu.be/uYmwNNkix-k\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Mismatched</b>\n              <br>\n              IMDb - 8.4\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/bandish.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Bandish Bandits</h1>\n                <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                <button class=\"btn_i b2_i\"  title=\"seasons\" style=\"color:white\">1<button>\n                <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.7</button>\n              </span>\n              <br />\n              <br />\n            </p>\n\n              <p class=\"para_i\">Two singers who have contrasting personalities set out on an incredible journey of self-discovery with one another.</p>\n\n                  <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin45()\">▶Trailer</button>\n                  <script type=\"text/javascript\">\n                    function openWin45(){\n                      window.open(\"https://youtu.be/UhU57OgGp50\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script><br><br>\n                <button class=\"btn_i b4_i\">▶Play</button>\n\n            </div>\n          </div>\n          <div class=\"flim\">\n            <b>Bandish Bandits</b>\n            <br>\n            IMDb - 8.7\n          </div>\n        </div>\n      </div>\n      <div class=\"poster\">\n        <div class=\"flip-card_i\">\n          <div class=\"flip-card-inner_i\">\n            <div class=\"flip-card-front_i\">\n                <img src=\"./Images/little things.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n            </div>\n            <div class=\"flip-card-back_i\">\n              <h1>Little Things</h1>\n                <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2016</button>\n                <button class=\"btn_i b2_i\"  title=\"seasons\" style=\"color:white\">3<button>\n                <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.3</button>\n              </span>\n              <br />\n              <br />\n            </p>\n\n              <p class=\"para_i\">A cohabitating couple in their 20s navigates the ups and downs of work, modern-day relationships and finding themselves in contemporary Mumbai.</p>\n\n                  <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin46()\">▶Trailer</button>\n                  <script type=\"text/javascript\">\n                    function openWin46(){\n                      window.open(\"https://youtu.be/LhpA-_8cWv8\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script><br><br>\n                <button class=\"btn_i b4_i\">▶Play</button>\n\n            </div>\n          </div>\n          <div class=\"flim\">\n            <b>Little Things</b>\n            <br>\n            IMDb - 8.3\n          </div>\n        </div>\n      </div>\n\n      <div class=\"poster\">\n        <div class=\"flip-card_i\">\n          <div class=\"flip-card-inner_i\">\n            <div class=\"flip-card-front_i\">\n                <img src=\"./Images/lok.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n            </div>\n            <div class=\"flip-card-back_i\">\n              <h1>Paatal Lok</h1>\n                <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.8</button>\n              </span>\n              <br />\n              <br />\n            </p>\n\n              <p class=\"para_i\">A cynical inspector is tasked with investigating a high-profile case which leads him into a dark realm of the underworld.</p>\n\n                  <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin47()\">▶Trailer</button>\n                  <script type=\"text/javascript\">\n                    function openWin47(){\n                      window.open(\"https://youtu.be/cNwWMW4mxO8\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script><br><br>\n                <button class=\"btn_i b4_i\">▶Play</button>\n\n            </div>\n          </div>\n          <div class=\"flim\">\n            <b>Paatal Lok</b>\n            <br>\n            IMDb - 7.8\n          </div>\n        </div>\n      </div>\n\n      <div class=\"poster\">\n        <div class=\"flip-card_i\">\n          <div class=\"flip-card-inner_i\">\n            <div class=\"flip-card-front_i\">\n                <img src=\"./Images/scam.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n            </div>\n            <div class=\"flip-card-back_i\">\n              <h1 style=\"font-size: 34px;\">Scam 1992 : The Harshad Mehta Story</h1>\n                <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.5</button>\n              </span>\n              <br />    \n              <br />\n            </p>\n\n              <p class=\"para_i\">Harshad Mehta took the stock market to dizzying heights and had a catastrophic downfall.</p>\n\n                  <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin48()\">▶Trailer</button>\n                  <script type=\"text/javascript\">\n                    function openWin48(){\n                      window.open(\"https://youtu.be/ISORfez27og\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script><br><br>\n                <button class=\"btn_i b4_i\">▶Play</button>\n\n            </div>\n          </div>\n          <div class=\"flim\">\n            <b>Scam 1992 : The Harshad Mehta Story</b>\n            <br>\n            IMDb - 9.5\n          </div>\n        </div>\n      </div>\n      <div class=\"poster\">\n        <div class=\"flip-card_i\">\n          <div class=\"flip-card-inner_i\">\n            <div class=\"flip-card-front_i\">\n                <img src=\"./Images/tvf.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n            </div>\n            <div class=\"flip-card-back_i\">\n              <h1>Pitchers</h1>\n                <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2015</button>\n                <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.1</button>\n              </span>\n              <br />\n              <br />\n            </p>\n\n              <p class=\"para_i\">TVF Pitchers is a web series created by The Viral Fever and developed by Arunabh Kumar. Written by Biswapati Sarkar, the series were directed by Amit Golani and features Naveen Kasturia, Arunabh Kumar, Jitendra Kumar and Abhay Mahajan.</p>\n\n                  <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin49()\">▶Trailer</button>\n                  <script type=\"text/javascript\">\n                    function openWin49(){\n                      window.open(\"https://www.youtube.com/watch?v=84Jk1OqDqOo\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script><br><br>\n                <button class=\"btn_i b4_i\">▶Play</button>\n\n            </div>\n          </div>\n          <div class=\"flim\">\n            <b>Pitchers</b>\n            <br>\n            IMDb - 9.1\n          </div>\n        </div>\n      </div>\n\n\n      <div class=\"poster\">\n        <div class=\"flip-card_i\">\n          <div class=\"flip-card-inner_i\">\n            <div class=\"flip-card-front_i\">\n                <img src=\"./Images/criminal.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n            </div>\n            <div class=\"flip-card-back_i\">\n              <h1>Criminal Justice</h1>\n                <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.1</button>\n              </span>\n              <br />\n              <br />\n            </p>\n\n              <p class=\"para_i\">Criminal Justice is an Indian Hindi-language crime thriller legal drama web series for Hotstar Specials, based on the 2008 British television series of the same name,</p>\n\n                  <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin50()\">▶Trailer</button>\n                  <script type=\"text/javascript\">\n                    function openWin50(){\n                      window.open(\"https://youtu.be/KPyNH7mZkGc\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script><br><br>\n                <button class=\"btn_i b4_i\">▶Play</button>\n\n            </div>\n          </div>\n          <div class=\"flim\">\n            <b>Criminal Justice</b>\n            <br>\n            IMDb - 8.1\n          </div>\n        </div>\n      </div>\n\n      <div class=\"poster\">\n        <div class=\"flip-card_i\">\n          <div class=\"flip-card-inner_i\">\n            <div class=\"flip-card-front_i\">\n                <img src=\"./Images/day.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n            </div>\n            <div class=\"flip-card-back_i\">\n              <h1>Selection Day</h1>\n                <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.4</button>\n              </span>\n              <br />\n              <br />\n            </p>\n\n              <p class=\"para_i\">When a 14-year-old boy tries out for Mumbai's under-19 cricket team and meets his older brother's rival, everything in his world begins to change.</p>\n\n                  <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin51()\">▶Trailer</button>\n                  <script type=\"text/javascript\">\n                    function openWin51(){\n                      window.open(\"https://youtu.be/2Q8xTwV9ecI\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script><br><br>\n                <button class=\"btn_i b4_i\">▶Play</button>\n\n            </div>\n          </div>\n          <div class=\"flim\">\n            <b>Selection Day</b>\n            <br>\n            IMDb - 7.4\n          </div>\n        </div>\n      </div>\n\n      <div class=\"poster\">\n        <div class=\"flip-card_i\">\n          <div class=\"flip-card-inner_i\">\n            <div class=\"flip-card-front_i\">\n                <img src=\"./Images/asur.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n            </div>\n            <div class=\"flip-card-back_i\">\n              <h1 style=\"font-size: 32px;\">Asur : Welcome to your Dark Side</h1>\n                <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.4</button>\n              </span>\n              <br />\n              <br />\n            </p>\n\n              <p class=\"para_i\">Asur is a 2020 Indian Hindi-language crime thriller web series, produced by Tanveer Bookwala of Ding Entertainment for the video on demand platform Voot. The series stars Arshad Warsi, Barun Sobti and Amey Wagh. The series is set in the context of a modern day serial killer having religious ties.</p>\n\n                  <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin52()\">▶Trailer</button>\n                  <script type=\"text/javascript\">\n                    function openWin52(){\n                      window.open(\"https://www.youtube.com/watch?v=LDirQBvwx7g\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script><br><br>\n                <button class=\"btn_i b4_i\">▶Play</button>\n\n            </div>\n          </div>\n          <div class=\"flim\">\n            <b >Asur : Welcome to your Dark Side</b>\n            <br>\n            IMDb - 8.4\n          </div>\n        </div>\n      </div>\n\n      <div class=\"poster\">\n        <div class=\"flip-card_i\">\n          <div class=\"flip-card-inner_i\">\n            <div class=\"flip-card-front_i\">\n                <img src=\"./Images/panch.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n            </div>\n            <div class=\"flip-card-back_i\">\n              <h1>Panchayat</h1>\n                <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.7</button>\n              </span>\n              <br />\n              <br />\n            </p>\n\n              <p class=\"para_i\">An engineering graduate, for lack of a better job, becomes the secretary of a Panchayat office in a remote village in Uttar Pradesh.</p>\n\n                  <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin53()\">▶Trailer</button>\n                  <script type=\"text/javascript\">\n                    function openWin53(){\n                      window.open(\"https://youtu.be/mojZJ7oeD_g\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script><br><br>\n                <button class=\"btn_i b4_i\">▶Play</button>\n \n            </div>\n          </div>\n          <div class=\"flim\">\n            <b>Panchayat</b>\n            <br>\n            IMDb - 8.7\n        </div>\n        </div>\n      </div>\n\n  </div>\n  <!---third block -->\n\n  \n\n       \n               \n      \n            \n         \n       \n\n\n      <h2>Kids</h2>\n      <hr>\n      <div class=\"container\" id=\"Kids\">\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                <img src=\"./Images/bat.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>The Dark Knight Rises</h1>\n                <button class=\"btn_i b3_i\" title=\"Year\" style=\"color:white\">2012</button>\n                <button class=\"btn_i b2_i\" title=\"Minutes\" style=\"color:white\">2h44m</button>\n                <button class=\"btn_i b1_i\" title=\"IMDb\" style=\"color:white\">8.4</button>\n                </span>\n                <br />\n                <br />\n                </p>\n\n                <p class=\"para_i\">Bane, an imposing terrorist, attacks Gotham City and disrupts its eight-year-long\n                  period of peace.</p>\n\n                  <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin54()\">▶Trailer</button>\n                  <script type=\"text/javascript\">\n                    function openWin54(){\n                      window.open(\"https://youtu.be/g8evyE9TuYk\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script><br><br>\n                <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>The Dark Knight Rises</b>\n              <br>\n              IMDb - 8.4\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                <img src=\"./Images/narnia.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1 style=\"font-size: 30px;\">The Chronicles of Narnia</h1>\n                <button class=\"btn_i b3_i\" title=\"Year\" style=\"color:white\">2005</button>\n                <button class=\"btn_i b2_i\" title=\"minutes\" style=\"color:white\">2h30m</button>\n                <button class=\"btn_i b1_i\" title=\"IMDb\" style=\"color:white\">6.9</button>\n                </span>\n                <br />\n                <br />\n                </p>\n\n                <p class=\"para_i\">While Playing, Lucy and her siblings find a wardrobe that lands them in a mystical\n                  place called Narnia.</p>\n\n                  <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin55()\">▶Trailer</button>\n                  <script type=\"text/javascript\">\n                    function openWin55(){\n                      window.open(\"https://youtu.be/ruGHxmjQ180\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script><br><br>\n                <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>The Chronicles of Narnia</b>\n              <br>\n              IMDb - 6.9\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                <img src=\"./Images/endgame.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Avengers : Endgame</h1>\n                <button class=\"btn_i b3_i\" title=\"Year\" style=\"color:white\">2019</button>\n                <button class=\"btn_i b2_i\" title=\"Minutes\" style=\"color:white\">3h2m</button>\n                <button class=\"btn_i b1_i\" title=\"IMDb\" style=\"color:white\">8.4</button>\n                </span>\n                <br />\n                <br />\n                </p>\n\n                <p class=\"para_i\">After Thanos, an intergalactic warlord, disintegrates half of the universe, the\n                  Avengers must reunite and assemble again to reinvigorate their trounced allies and restore balance.\n                </p>\n\n                  <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin56()\">▶Trailer</button>\n                  <script type=\"text/javascript\">\n                    function openWin56(){\n                      window.open(\"https://youtu.be/TcMBFSGVi1c\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script><br><br>\n                <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Avengers : Endgame</b>\n              <br>\n              IMDb - 8.4\n            </div>\n          </div>\n        </div>\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                <img src=\"./Images/infinity.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Avengers : Infinity War</h1>\n                <button class=\"btn_i b3_i\" title=\"Year\" style=\"color:white\">2018</button>\n                <button class=\"btn_i b2_i\" title=\"Minutes\" style=\"color:white\">2h40m<button>\n                    <button class=\"btn_i b1_i\" title=\"IMDb\" style=\"color:white\">8.4</button>\n                    </span>\n                    <br />\n                    <br />\n                    </p>\n\n                    <p class=\"para_i\">The Avengers must stop Thanos, an intergalactic warlord, from getting his hands on\n                      all the infinity stones. However, Thanos is prepared to go to any lengths to carry out his insane\n                      plan.</p>\n\n                  <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin57()\">▶Trailer</button>\n                  <script type=\"text/javascript\">\n                    function openWin57(){\n                      window.open(\"https://youtu.be/6ZfuNTqbHE8\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script><br><br>\n                    <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Avengers : Infinity War</b>\n              <br>\n              IMDb - 8.4\n            </div>\n          </div>\n        </div>\n\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                <img src=\"./Images/spider.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h1>Spider Man</h1>\n                <button class=\"btn_i b3_i\" title=\"Year\" style=\"color:white\">2002</button>\n                <button class=\"btn_i b2_i\" title=\"Minutes\" style=\"color:white\">2h1m</button>\n                <button class=\"btn_i b1_i\" title=\"IMDb\" style=\"color:white\">7.3</button>\n                </span>\n                <br />\n                <br />\n                </p>\n\n                <p class=\"para_i\">Peter Parker, an outcast high school student, gets bitten by a radioactive spider and\n                  attains superpowers.</p>\n\n                  <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin58()\">▶Trailer</button>\n                  <script type=\"text/javascript\">\n                    function openWin58(){\n                      window.open(\"https://youtu.be/-tnxzJ0SSOw\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script><br><br>\n                <button class=\"btn_i b4_i\" onclick=\"openMovieWin58()\">▶Play</button>\n                \n                <script type=\"text/javascript\">\n                    function openMovieWin58(){\n                      window.open(\"https://youtu.be/dg_8nMat9Sg\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script>\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Spider Man</b>\n              <br>\n              IMDb - 7.3\n            </div>\n          </div>\n        </div>\n\n\n      </div>\n\n      <h2>Anime</h2>\n      <hr>\n      <div class=\"container\" id=\"anime\">\n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/deathnote.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h3>DeathNote</h3>\n                <div class=\"btnContainer\">\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2006</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">37<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.0</button>\n                </div>\n                  \n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Death Note is a Japanese manga series written by Tsugumi Ohba and illustrated by Takeshi Obata. The story follows Light Yagami, a teen genius who discovers a mysterious notebook</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin59()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin59(){\n                        window.open(\"https://www.youtube.com/watch?v=NlJZ-YgAt-c\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\" onclick=\"openMovieWin59()\">▶Play</button>\n                  \n                  <script type=\"text/javascript\">\n                    function openMovieWin59(){\n                      window.open(\"https://youtube.com/playlist?list=PL-a03JNHCnK0C_b8HD4fFPAghY5_S_HbN\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script>\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>DeathNote</b>\n              <br>\n              IMDb - 9.0\n            </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/naruto.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h3>Naruto</h3>\n                <div class=\"btnContainer\">\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2002</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">220<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.3</button>\n              </div>  \n              </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Adapted from a comic by Masashi Kishimoto, this animated hit follows the adventures of Naruto Uzumaki, a boy who is determined to become a Hokage, the ninja in his village who is acknowledged as the leader and the strongest of them all.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin60()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin60(){\n                        window.open(\"https://youtu.be/-G9BqkgZXRA\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\" onclick=\"openMovieWin60()\">▶Play</button>\n                  \n                  <script type=\"text/javascript\">\n                    function openMovieWin60(){\n                      window.open(\"https://youtube.com/playlist?list=PL2iQPHlA1BhwSqGx1cDcIKKvnX_AeWsLE\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script>\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Naruto</b>\n              <br>\n              IMDb - 8.3\n            </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/Aot.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h3>Attack on Titan</h3>\n                <div class=\"btnContainer\">\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2013</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">75<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.0</button>\n              </div>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">After his hometown is destroyed and his mother is killed, young Eren Jaeger vows to cleanse the earth of the giant humanoid Titans that have brought humanity to the brink of extinction.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin61()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin61(){\n                        window.open(\"https://youtu.be/o_go-8TFBXs\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\" onclick=\"openMovieWin61()\">▶Play</button>\n                  \n                  <script type=\"text/javascript\">\n                    function openMovieWin61(){\n                      window.open(\"https://youtube.com/playlist?list=PLfg7Ir-59iSu5TCvGDAMersYJnQnQgJAX\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script>\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Attack on Titan</b>\n              <br>\n              IMDb - 9.0\n            </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/demonSlayer.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h3>Demon Slayer</h3>\n                <div class=\"btnContainer\">\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">26<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.7</button>\n              </div>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">A youth begins a quest to fight demons and save his sister after finding his family slaughtered and his sister turned into a demon.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin62()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin62(){\n                        window.open(\"https://youtu.be/VQGCKyvzIM4\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\" onclick=\"openMovieWin62()\">▶Play</button>\n                  \n                  <script type=\"text/javascript\">\n                    function openMovieWin62(){\n                      window.open(\"https://youtube.com/playlist?list=PLSr6HUR2kQtOFs0cNCidkTQRs04yEhPsE\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script>\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Demon Slayer</b>\n              <br>\n              IMDb - 8.7\n            </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/one-punch-man.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h3 style=\"font-size: 30px;\">One Punch Man</h3>\n                <div class=\"btnContainer\">\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2015</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">24<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.8</button>\n              </div>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">It tells the story of Saitama, a superhero who can defeat any opponent with a single punch but seeks to find a worthy opponent after growing bored by a lack of challenge due to his overwhelming strength.</p>\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin63()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin63(){\n                        window.open(\"https://www.youtube.com/watch?v=Poo5lqoWSGw\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\" onclick=\"openMovieWin63()\">▶Play</button>\n                  \n                  <script type=\"text/javascript\">\n                    function openMovieWin63(){\n                      window.open(\"https://youtube.com/playlist?list=PLwLSw1_eDZl2XdtLhB9NG2Ch050jWFm9G\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                    }\n                  </script>\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>One Punch Man</b>\n              <br>\n              IMDb - 8.8\n            </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/tokyo.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h3>Tokyo Ghoul</h3>\n                <div class=\"btnContainer\">\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2014</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">1231<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.8</button>\n              </div>\n                </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">A Tokyo college student is attacked by a ghoul, a superpowered human who feeds on human flesh. He survives, but has become part ghoul and becomes a fugitive on the run.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin64()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin64(){\n                        window.open(\"https://youtu.be/ETHpMMV8rJU\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Tokyo Ghoul</b>\n              <br>\n              IMDb - 7.8\n            </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/fullMetal.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h3>Fullmetal Alchemist</h3>\n                <div class=\"btnContainer\">\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2003</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">51<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.5</button>\n              </div>\n              </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\" style=\"margin-top: -8px;\">When a failed alchemical ritual leaves brothers Edward and Alphonse Elric with severely damaged bodies, they begin searching for the one thing that can save them, the fabled philosopher's stone.</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin65()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin65(){\n                        window.open(\"https://youtu.be/2Dsa8j_usqI\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>Fullmetal Alchemist</b>\n              <br>\n              IMDb - 8.5\n            </div>\n          </div>\n        </div> \n\n        <div class=\"poster\">\n          <div class=\"flip-card_i\">\n            <div class=\"flip-card-inner_i\">\n              <div class=\"flip-card-front_i\">\n                  <img src=\"./Images/onePiece.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n              </div>\n              <div class=\"flip-card-back_i\">\n                <h3>One Piece</h3>\n                <div class=\"btnContainer\">\n                  <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">1999</button>\n                  <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">981<button>\n                  <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.8</button>\n              </div>\n              </span>\n                <br />\n                <br />\n              </p>\n\n                <p class=\"para_i\">Follows the adventures of Monkey D. Luffy and his pirate crew in order to find the greatest treasure ever left by the legendary Pirate, Gold Roger. The famous mystery treasure named \"One Piece\".</p>\n\n                    <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin66()\">▶Trailer</button>\n                    <script type=\"text/javascript\">\n                      function openWin66(){\n                        window.open(\"https://youtu.be/S8_YwFLCh4U\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                      }\n                    </script><br><br>\n                  <button class=\"btn_i b4_i\">▶Play</button>\n\n              </div>\n            </div>\n            <div class=\"flim\">\n              <b>One Piece</b>\n              <br>\n              IMDb - 8.8\n            </div>\n          </div>\n        </div> \n      </div> \n    <div id=\"waterdrop\"></div>\n\n    <!-------------------------------Footer-------------------------------->\n    <footer class=\"footer\">\n      <hr class=\"footer-hr\">\n      <div class=\"footer-content\">\n        <div class=\"footer-left\">\n          <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n              height=\"24\"></a>\n          <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n        </div>\n        <div class=\"footer-middle\">\n          <h2 class=\"footer-heading\">Follow Us</h2>\n          <ul class=\"footer-middle-list icons\">\n            <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i\n                class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i\n                class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i\n                class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i\n                class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i\n                class=\"fab fa-github github\" style=\"color:red\"></i></a>\n          </ul>\n        </div>\n        <div class=\"footer-middle\">\n          <h2 class=\"footer-heading\">Services</h2>\n          <ul class=\"footer-middle-list\">\n            <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n          </ul>\n        </div>\n       <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Try Our App</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n        <div class=\"footer-right\">\n          <p class=\"footer-links\">\n          <h2 class=\"footer-heading\">Contact Us</h2>\n          <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n          <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n          </p>\n        </div>\n      </div>\n      <hr class=\"footer-hr\">\n      <div class=\"footer-copyright\">\n        <p>Copyright &copy; and &reg; Since\n          <script>\n            document.write(new Date().getFullYear())\n          </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)\n        </p>\n      </div>\n    </footer>\n\n    <!----------------------scroll back to top button-->\n    <button id=\"scrollToTopButton\" title=\"Go to top\">\n      <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\"></i>\n    </button>\n    <script>\n      $(document).ready(function () {\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n        window.onscroll = function () { scrollFunction() };\n\n        function scrollFunction() {\n          if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n            scrollTopButton.style.display = \"block\";\n          } else {\n            scrollTopButton.style.display = \"none\";\n          }\n        }\n\n        $(\"#scrollToTopButton\").click(function () {\n          $('html ,body').animate({ scrollTop: 0 }, 800)\n        });\n      });\n    </script>\n\n    <!-- footer scripts -->\n\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n    <script src=\"js/main-min.js\"></script>\n\n    <script>\n      jQuery('#waterdrop').raindrops({\n        color: '#292c2f',\n        canvasHeight: 150,\n        density: 0.1,\n        frequency: 20\n      });\n    </script>\n    <script>\n      function logout(){\n        window.location.replace(\"login.html\");\n      }\n      </script>\n    <!-- bootsstrap JS -->\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\"\n      integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\"\n      crossorigin=\"anonymous\"></script>\n    <script src=\"./static/script.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "horror.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width\">\n    <title>ApnaTheatre.com</title>\n    <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n\n    <!-- Font  -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\n        integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n        <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n        integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n        crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n\n    <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n    <link rel=\"stylesheet\" href=\"static/bootstrap.min.css\">\n    <link rel=\"stylesheet\" href=\"static/style-min.css\">\n    <link rel=\"stylesheet\" href=\"cards.css\">\n\n</head>\n<!------------------------Scroll to top button------------------------------------------------>\n<style>\n  #scrollToTopButton{\n      background-color:red;\n      border: none;\n      border-radius: 50%;\n      bottom: 40px;\n      color:black;\n      cursor: pointer;\n      font-size: 25px;\n      height: 50px;\n      right: 25px;\n      outline: none;\n      padding: 6px;    \n      position:fixed;\n      width: 50px;\n      z-index: 99;\n}\n#scrollToTopButton:hover, i:hover {\n    background-color:white;\n    color:red;  \n}\n#header-nav .nav-link {\n  color: white;\n  font-size: 20px;\n  margin-left: 20px;\n}\n    \n@media only screen and (max-width: 1400px){\n  #header-nav .nav-link {\n    color: white;\n    font-size: 18px;\n    margin-left: 18px;\n  }\n  #searchText{\n    width: 150px;\n  }\n}\n\n@media only screen and (min-width: 1133px) and (max-width: 1275px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n}\n@media only screen and (min-width: 1035px) and (max-width: 1132px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n  #searchText{\n    width: 120px;\n  }\n  #submitBtn{\n    display: flex;\n    justify-content: center;\n    width: 60px;\n  }\n}\n@media only screen and (min-width: 993px) and (max-width: 1034px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 14px;\n    margin-left: 10px;\n  } \n\n  #searchText{\n    width: 100px;\n  }\n  #submitBtn{\n    display: flex;\n    justify-content: center;\n    width: 50px;\n  }\n}\n\n.container {\n  text-align: center;\n}\n.nav-item :hover{\n  margin-bottom: 10px;\n \n  \n}\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n</style>\n\n<body>\n    <div class=\"scroll-bar\">\n\n        <!-- navbar starts -->\n\n        <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n          <div class=\"container-fluid\">\n            <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n                height=\"24\"></a>\n            <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n              data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n              <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n            </button>\n            \n            <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n              <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n                <li class=\"nav-item\">\n                  <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"tv.html\">TV</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n                </li>\n               \n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n                </li>\n                <li>\n                  <!-- Genre dropdown starts-->\n                  <div>\n                    <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                        <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                            Genres\n                        </button>\n                        <div class=\"dropdown-content\" style=\"color: white;\">\n                            <a href=\"popular.html\">Popular</a>\n                            <a href=\"crime.html\">Crime</a>\n                            <a href=\"suspense.html\">Suspense & Thriller</a>\n                            <a href=\"action.html\">Action</a>\n                            <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                            <a href=\"documentary.html\">Documentary</a>\n                            <a href=\"horror.html\">Horror</a>\n                            <a href=\"drama.html\">Drama</a>\n                            <a href=\"war.html\">War & Politics</a>\n                            <a href=\"comedy.html\">Comedy</a>\n                            <a href=\"romance.html\">Romance</a>\n                            <a href=\"anime.html\">Anime</a>\n                          </div>\n                    </div>\n                  </div>\n                  <!-- Genre dropdown ends-->\n                </li>\n                <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                  <li>\n                    <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n                  </li>\n                </div>\n              </ul>\n              <form id=\"searchForm\" class=\"d-flex\">\n                <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n                <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n              </form>\n            </div>\n          </div>\n          </nav>\n    \n            <!-- navbar ends -->\n\n        <div class=\"maincontainer\">\n            <div class=\"container\">\n                <div id=\"movies\" class=\"row\"></div>\n            </div>\n            <hr>\n            <h2>Horror</h2>\n            <hr>\n            <div class=\"container\" id=\"Movies\">\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/ghoul.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Ghoul</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.1</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">In a totalitarian near-future India, a mysterious prisoner is sent to a remote military interrogation\n                        center where he turns the tables on his captors by exposing their most shameful secrets and unleashing a demon from Arabic folklore.</p>\n\n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin(){\n                              window.open(\"https://www.imdb.com/video/vi1724496665?playlistId=tt5909930\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br> <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Ghoul</b>\n                          <br>\n                          IMDb - 7.1\n                      </div>\n                  </div>\n                </div>\n              \n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/it.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>IT</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2017</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.3</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">In the summer of 1989, a group of bullied kids band together\n                        to destroy a shape-shifting monster, which disguises itself as a clown and preys on the children of Derry, their small Maine town.</p>\n\n\n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin1()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin1(){\n                              window.open(\"https://www.imdb.com/video/vi1396095257?playlistId=tt1396484\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br> <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>IT</b>\n                          <br>\n                          IMDb - 7.3\n                      </div>\n                  </div>\n                \n              </div>\n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/veronica.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Veronica</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1h46m</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">6.2</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Madrid, 1991. A teen girl finds herself besieged\n                        by an evil supernatural force after she played Ouija with two classmates.</p>\n\n                        \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin2()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin2(){\n                              window.open(\"https://www.imdb.com/video/vi231914009?playlistId=tt5862312\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br> <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Veronica</b>\n                          <br>\n                          IMDb - 6.2\n                      </div>\n                  </div>\n                \n              </div>\n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/type.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Typewriter</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">6.5</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Three young friends\n                        in Goa plan to search an old villa for ghosts, but when a new family moves in, the home's buried past resurfaces in chilling ways.</p>\n\n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin3()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin3(){\n                              window.open(\"https://www.imdb.com/video/vi2871966745?playlistId=tt9310372\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br> \n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Typewriter</b>\n                          <br>\n                          IMDb - 6.5\n                      </div>\n                  </div>\n                \n              </div>\n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/A_Quiet_Place.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1 style=\"font-size: 30px;\">A Quiet Place</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.5</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">A family struggles for survival in a world where most humans have been killed by blind but noise-sensitive creatures. \n                          They are forced to communicate in sign language to keep the creatures at bay.</p>\n\n  \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin4()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin4(){\n                              window.open(\"https://www.imdb.com/video/vi3446716441?playlistId=tt6644200&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br><br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>A Quiet Place</b>\n                          <br>\n                          IMDb - 7.5\n                      </div>\n                  </div>\n                </div>\n              \n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/Get_Out.jpeg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Get Out</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2017</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1h44m</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.7</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Chris, an African-American man, decides to visit his Caucasian girlfriend's parents during a weekend getaway. \n                          Although they seem normal at first, he is not prepared to experience the horrors ahead.</p>\n\n                           \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin5()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin5(){\n                              window.open(\"https://www.imdb.com/video/vi2005186073?playlistId=tt5052448&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br><br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Get Out</b>\n                          <br>\n                          IMDb - 7.7\n                      </div>\n                  </div>\n                </div>\n\n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/Hereditary.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Hereditary</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2h7m</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.3</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">When the matriarch of the Graham family passes away, her daughter and grandchildren begin to unravel cryptic \n                          and increasingly terrifying secrets about their ancestry, trying to outrun the sinister fate they have inherited.</p>\n\n                              \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin6()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin6(){\n                              window.open(\"https://www.imdb.com/video/vi837793817?playlistId=tt7784604&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br><br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Hereditary</b>\n                          <br>\n                          IMDb - 7.3\n                      </div>\n                  </div>\n                </div>\n              \n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/The_Shining.jpeg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>The Shining</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">1980</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2h26m</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.4</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Jack and his family move into an isolated hotel with a violent past. \n                          Living in isolation, Jack begins to lose his sanity, which affects his family members.</p>\n\n         \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin7()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin7(){\n                              window.open(\"https://www.imdb.com/video/vi2689121305?playlistId=tt0081505&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br><br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>The Shining</b>\n                          <br>\n                          IMDb - 8.4\n                      </div>\n                  </div>\n                </div>\n              \n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/Conjuring.jpeg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>The Conjuring</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2013</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">3</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.5</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">The Perron family moves into a farmhouse where they experience paranormal phenomena. \n                          They consult demonologists, Ed and Lorraine Warren, to help them get rid of the evil entity haunting them.</p>\n \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin8()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin8(){\n                              window.open(\"https://www.imdb.com/video/vi3819874585?playlistId=tt1457767&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br><br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>The Conjuring</b>\n                          <br>\n                          IMDb - 7.5\n                      </div>\n                  </div>\n                \n              </div>\n\n\n            </div>\n        </div>\n    </div>\n\n\n\n    <!-------------------------------Footer-------------------------------->\n    <div id=\"waterdrop\"></div>\n    <footer class=\"footer\">\n      <hr class=\"footer-hr\">\n        <div class=\"footer-content\">\n            <div class=\"footer-left\">\n                <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\" height=\"24\"></a>\n                <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Follow Us</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i class=\"fab fa-github github\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Services</h2>\n                <ul class=\"footer-middle-list\">\n                    <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Try Our App</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-right\">\n                <p class=\"footer-links\">\n                    <h2 class=\"footer-heading\">Contact Us</h2>\n                    <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n                    <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n                </p>\n            </div>\n        </div>\n        <hr class=\"footer-hr\">\n        <div class=\"footer-copyright\">\n            <p>Copyright &copy; and &reg; Since\n                <script>\n                    document.write(new Date().getFullYear())\n                </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>\n        </div>\n    </footer>\n\n    <!--------------scroll back to top button-->\n    <button  id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\" >\n        <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\" ></i>\n      </button>\n      <script>\n      $(document).ready(function(){\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n        window.onscroll = function () { scrollFunction() };\n\n        function scrollFunction() {\n        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n          scrollTopButton.style.display = \"block\";\n        } else {\n          scrollTopButton.style.display = \"none\";\n        }\n      }\n\n      $(\"#scrollToTopButton\").click(function(){\n      $('html ,body').animate({scrollTop : 0},800)\n      });\n      });\n      </script>\n\n    <!-- offcanva JS and footer js -->\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n    <script src=\"js/main-min.js\"></script>\n\n    <script>\n        jQuery('#waterdrop').raindrops({\n            color: '#292c2f',\n            canvasHeight: 150,\n            density: 0.1,\n            frequency: 20\n        });\n    </script>\n<script>\n  function logout(){\n    window.location.replace(\"login.html\");\n  }\n  </script>\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\" crossorigin=\"anonymous\"></script>\n    <script src=\"./static/script.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <!-- SEO Meta Tags -->\n    <meta\n      name=\"description\"\n      content=\"Explore the latest movies trailers, and more on ApnaTheatre, your ultimate movie destination.\"\n    />\n    <meta\n      name=\"keywords\"\n      content=\"movies, movie reviews, trailers, ApnaTheatre, cinema, film, entertainment, chill\"\n    />\n    <meta name=\"robots\" content=\"index, follow\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Welcome To ApnaTheatre</title>\n    <link\n      rel=\"shortcut icon\"\n      href=\"./Images/Logo/Title.jpeg\"\n      type=\"image/x-icon\"\n    />\n    <script\n      src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js\"\n      integrity=\"sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==\"\n      crossorigin=\"anonymous\"\n      referrerpolicy=\"no-referrer\"\n    ></script>\n    <script src=\"./landing-page.js\"></script>\n    <!-- Font  -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\"\n      rel=\"stylesheet\"\n    />\n\n    <link rel=\"stylesheet\" href=\"landpage.css\" />\n  </head>\n\n  <body id=\"stop-scrolling\">\n    <div class=\"preloader\"></div>\n\n    <div class=\"text-container\">\n      <div class=\"container-2\">\n        <a class=\"navbar-brand\" href=\"home.html\" title=\"Home\"\n          ><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\"\n        /></a>\n        <div class=\"intro-container\">\n          <h1>WELCOME TO<br /><span>ApnaTheatre</span></h1>\n          <p>Stream your favourite movies online.</p>\n        </div>\n        <a href=\"#\" class=\"button\" onclick=\"myFunction()\">Login</a>\n      </div>\n      <div class=\"bottom-text-container1\">\n        <div class=\"bottom-text-container\">\n          <p class=\"watch\">Watch</p>\n          <p class=\"chill\">Chill</p>\n          <p class=\"repeat\">Repeat</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"images-container\">\n      <marquee behavior=\"alternate\" direction=\"left\" scrollamount=\"8.4\">\n        // marquee - it defines a scrolling area in the HTML document that moves\n        across the page any direction.\n        <div class=\"group1\">\n          <div class=\"image\">\n            <img src=\"./Images/super-girl.jpg\" alt=\"super girl\" />\n          </div>\n          <div class=\"image\">\n            <img src=\"./Images/tenet.jpg\" alt=\"\" /> // The alt attribute\n            specifies an alternate text for an area, if the image cannot be\n            displayed.\n          </div>\n          <div class=\"image\">\n            <img src=\"./Images/dangal.jpg\" alt=\"\" />\n          </div>\n          <div class=\"image\">\n            <img src=\"./Images/without-remores.jpg\" alt=\"\" />\n          </div>\n          <div class=\"image\">\n            <img src=\"./Images/along-with-the-gods.jpg\" alt=\"\" />\n          </div>\n          <div class=\"image\">\n            <img src=\"./Images/asoka.jpg\" alt=\"\" />\n          </div>\n          <div class=\"image\">\n            <img\n              src=\"./Images/animal-world.ZW1zLXByZC1hc3NldHMvbW92aWVzL2JjNTBhMTY4LTczZTItNGQxZi05ZmUxLWQwN2ZlNThiZGVkYi53ZWJw\"\n              alt=\"\"\n            />\n          </div>\n          <div class=\"image\">\n            <img src=\"./Images/bao.jpg.crdownload\" alt=\"\" />\n          </div>\n          <div class=\"image\">\n            <img src=\"./Images/the-mermaid.jpg\" alt=\"\" />\n          </div>\n          <div class=\"image\">\n            <img src=\"./Images/boss-baby.jpg\" alt=\"\" />\n          </div>\n          <div class=\"image\">\n            <img src=\"./Images/the-eight-hundred.jpg\" alt=\"\" />\n          </div>\n          <div class=\"image\">\n            <img src=\"./Images/Over_the_Moon2020.jpg\" alt=\"\" />\n          </div>\n          <div class=\"image\">\n            <img src=\"./Images/baagi.jpg.crdownload\" alt=\"\" />\n          </div>\n          <div class=\"image\">\n            <img src=\"./Images/outside-the-wire.jpg\" alt=\"\" />\n          </div>\n          <div class=\"image\">\n            <img src=\"./Images/killerman-french-dvd-movie-cover.jpg\" alt=\"\" />\n          </div>\n          <div class=\"image\">\n            <img src=\"./Images/shadow.jpg\" alt=\"\" />\n          </div>\n          <div class=\"image\">\n            <img src=\"./Images/grown-ups.jpg\" alt=\"\" />\n          </div>\n          <div class=\"image\">\n            <img src=\"./Images/train-to-busan.jpg\" alt=\"\" />\n          </div>\n          <div class=\"image\">\n            <img src=\"./Images/Mulan_(2020_film)_poster.jpg\" alt=\"\" />\n          </div>\n        </div>\n      </marquee>\n\n      <marquee\n        behavior=\"alternate\"\n        direction=\"right\"\n        scrollamount=\"8.7\"\n        scrolldelay=\"77\"\n      >\n        <div class=\"group2\">\n          <div class=\"images2\">\n            <img src=\"./Images/War_official_poster.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images2\">\n            <img src=\"./Images/zootopia_866a1bf2.webp\" alt=\"\" />\n          </div>\n          <div class=\"images2\">\n            <img src=\"./Images/13-assassins-poster-movie.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images2\">\n            <img src=\"./Images/Onward_IanBarley-1-702x1024.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images2\">\n            <img src=\"./Images/the-little-things.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images2\">\n            <img src=\"./Images/Jodhaa_akbar.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images2\">\n            <img src=\"./Images/wom.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images2\">\n            <img src=\"./Images/John_Wick_TeaserPoster.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images2\">\n            <img src=\"./Images/Redcliffposter.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images2\">\n            <img src=\"./Images/MonsterHunter_01282021.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images2\">\n            <img src=\"./Images/Wolfwakers_key_art_2_3.jpg.crdownload\" alt=\"\" />\n          </div>\n          <div class=\"images2\">\n            <img src=\"./Images/col.jpg.crdownload\" alt=\"\" />\n          </div>\n          <div class=\"images2\">\n            <img src=\"./Images/Zero_official_poster.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images2\">\n            <img src=\"./Images/loki.jpg.crdownload\" alt=\"\" />\n          </div>\n          <div class=\"images2\">\n            <img src=\"./Images/capone.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images2\">\n            <img src=\"./Images/jiang.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images2\">\n            <img\n              src=\"./Images/Justice_Society_World_War_II-359498245-mmed.jpg\"\n              alt=\"\"\n            />\n          </div>\n          <div class=\"images2\">\n            <img src=\"./Images/venom.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images2\">\n            <img src=\"./Images/Revenger_(2018).jpg\" alt=\"\" />\n          </div>\n\n          <div class=\"images2\">\n            <img src=\"./Images/the-old-gurd.jpg\" alt=\"\" />\n          </div>\n\n          <div class=\"images2\">\n            <img src=\"./Images/War_official_poster.jpg\" alt=\"\" />\n          </div>\n\n          <div class=\"images2\">\n            <img src=\"./Images/zootopia_866a1bf2.webp\" alt=\"\" />\n          </div>\n          <div class=\"images2\">\n            <img src=\"./Images/13-assassins-poster-movie.jpg\" alt=\"\" />\n          </div>\n        </div>\n      </marquee>\n\n      <marquee\n        behavior=\"alternate\"\n        direction=\"left\"\n        scrollamount=\"9\"\n        scrolldelay=\"38\"\n      >\n        <div class=\"group3\">\n          <div class=\"images3\">\n            <img src=\"./Images/The_Villainess.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/patton.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/odyssey.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/wizard.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/The_Witch-480212918-mmed.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/top-gun.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/the-marksman.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/chaos-wlaking.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/insight.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/Steel_Rain.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/Tune_in_the_love.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/3-iron.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/Zero_official_poster.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/loki.jpg.crdownload\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/VanquishPoster.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/aotd.jpg.crdownload\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/mk.png\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/misfits.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/karnan.jpg\" alt=\"\" />\n          </div>\n          <div class=\"images3\">\n            <img src=\"./Images/lucid-dream.jpg\" alt=\"\" />\n          </div>\n        </div>\n      </marquee>\n    </div>\n\n    <script>\n      function myFunction() {\n        location.replace(\"login.html\");\n      }\n    </script>\n\n    <script>\n      function preloaderFadeOutInit() {\n        $(\".preloader\").fadeOut(\"slow\"); // will first fade out the loading animation\n        $(\"body\").attr(\"id\", \"\"); // will fade out the whole DIV that covers the website.\n      }\n      // Window load function\n      jQuery(window).on(\"load\", function () {\n        // makes sure the whole site is loaded\n        (function ($) {\n          preloaderFadeOutInit();\n        })(jQuery);\n      });\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "js/main-min.js",
    "content": "function getMovies(t) {\n  axios\n    .get(\"https://www.omdbapi.com/?apikey=8d5cb2e&s=\" + t)\n    .then((t) => {\n      let e = t.data.Search,\n        i = \"\";\n      $.each(e, (t, e) => {\n        i += `\\n                <div class=\"col-md-3\">\\n                <div class=\"well text-center\">\\n                <img src=\"${e.Poster}\">\\n                <h5>${e.Title}</h5>\\n                <a onclick=\"movieSelected('${e.imdbID}')\" class =\"btn btn-danger\" href=\"#\">Movie Details</a>\\n                </div>\\n                </div>\\n                `;\n      }),\n        $(\"#movies\").html(i);\n    })\n    .catch((t) => {});\n}\n\nfunction movieSelected(t) {\n  return (\n    sessionStorage.setItem(\"movieID\", t),\n    (window.location = \"movie-min.html\"),\n    !1\n  );\n}\n\nfunction getMovie() {\n  let t = sessionStorage.getItem(\"movieID\");\n  axios\n    .get(\"https://www.omdbapi.com/?apikey=8d5cb2e&i=\" + t)\n    .then((t) => {\n      let e = t.data,\n        i = `\\n            <div class =\"row\">\\n            <div class=\"col-md-4\">\\n            <img src=\"${e.Poster}\" class='thumbnail'>\\n            </div>\\n            <div class=\"col-md-8\">\\n            <h2>${e.Title}</h2>\\n            <ul class=\"list-group\">\\n            <li class=\"list-group-item\"><strong>Genre:</strong>${e.Genre}</li>\\n            <li class=\"list-group-item\"><strong>Released:</strong>${e.Released}</li>\\n            <li class=\"list-group-item\"><strong>Rated:</strong>${e.Rated}</li>\\n            <li class=\"list-group-item\"><strong>ImdbRating:</strong>${e.imdbRating}</li>\\n            <li class=\"list-group-item\"><strong>Director:</strong>${e.Director}</li>\\n            <li class=\"list-group-item\"><strong>Writer:</strong>${e.Writer}</li>\\n            <li class=\"list-group-item\"><strong>Actors:</strong>${e.Actors}</li>\\n            </ul>\\n            </div>\\n            </div>\\n            <div class=\"row\">\\n            <div class=\"well\">\\n            <h3>Plot</h3>\\n            \\n            ${e.Plot}\\n            \\n            <hr>\\n            <a href=\"http://imdb.com/title/${e.imdbID}\" target=\"_blank\" class=\"btn bg-danger\">View IMDB</a>\\n            <a href =\"index.html\" class=\"btn btn-danger\">Go Back To Search</a>\\n            </div>\\n            </div>\\n            `;\n      $(\"#movie\").html(i);\n    })\n    .catch((t) => {});\n}\n$(document).ready(() => {\n  $(\"#searchForm\").on(\"submit\", (t) => {\n    getMovies($(\"#searchText\").val()), t.preventDefault();\n  });\n});\n"
  },
  {
    "path": "js/questions.js",
    "content": "// creating an array and passing the number, questions, options, and answers\nlet questions = [\n    {\n    numb: 1,\n    question: \"What genres well perfer?\",\n    options: [\n      \"Action\",\n      \"Crime\",\n      \"Horror\",\n      \"Comedies\",\n      \"Documentary\"\n    ]\n  },\n    {\n    numb: 2,\n    question: \"What sub-genres well perfer?\",\n    \n    options: [\n      \"Crime Thriller\",\n      \"Disaster Thriller\",\n      \"Psychological Thriller\",\n      \"Techno Thriller\"\n    ]\n  },\n    {\n    numb: 3,\n    question: \"Select the language\",\n   \n    options: [\n      \"Hindi\",\n      \"English\",\n      \"Tamil\",\n      \"Japanese\"\n    ]\n  },\n    ,\n  // you can uncomment the below codes and make duplicate as more as you want to add question\n  // but remember you need to give the numb value serialize like 1,2,3,5,6,7,8,9.....\n\n  //   {\n  //   numb: 6,\n  //   question: \"Your Question is Here\",\n  //   answer: \"Correct answer of the question is here\",\n  //   options: [\n  //     \"Option 1\",\n  //     \"option 2\",\n  //     \"option 3\",\n  //     \"option 4\"\n  //   ]\n  // },\n];"
  },
  {
    "path": "js/script.js",
    "content": "//selecting all required elements\nconst start_btn = document.querySelector(\".start_btn button\");\nconst info_box = document.querySelector(\".info_box\");\nconst exit_btn = info_box.querySelector(\".buttons .quit\");\nconst continue_btn = info_box.querySelector(\".buttons .restart\");\nconst quiz_box = document.querySelector(\".quiz_box\");\nconst result_box = document.querySelector(\".result_box\");\nconst option_list = document.querySelector(\".option_list\");\n\n\n// if startQuiz button clicked\nstart_btn.onclick = ()=>{\n    info_box.classList.add(\"activeInfo\"); //show info box\n}\n\n// if exitQuiz button clicked\nexit_btn.onclick = ()=>{\n    info_box.classList.remove(\"activeInfo\"); //hide info box\n}\n\n// if continueQuiz button clicked\ncontinue_btn.onclick = ()=>{\n    info_box.classList.remove(\"activeInfo\"); //hide info box\n    quiz_box.classList.add(\"activeQuiz\"); //show quiz box\n    showQuetions(0); //calling showQestions function\n    queCounter(1); //passing 1 parameter to queCounter\n    startTimer(15); //calling startTimer function\n    startTimerLine(0); //calling startTimerLine function\n}\n\nlet timeValue =  15;\nlet que_count = 0;\nlet que_numb = 1;\nlet userScore = 0;\nlet counter;\nlet counterLine;\nlet widthValue = 0;\n\nconst restart_quiz = result_box.querySelector(\".buttons .restart\");\nconst quit_quiz = result_box.querySelector(\".buttons .quit\");\n\n// if restartQuiz button clicked\nrestart_quiz.onclick = ()=>{\n    quiz_box.classList.add(\"activeQuiz\"); //show quiz box\n    result_box.classList.remove(\"activeResult\"); //hide result box\n    timeValue = 15; \n    que_count = 0;\n    que_numb = 1;\n    userScore = 0;\n    widthValue = 0;\n    showQuetions(que_count); //calling showQestions function\n    queCounter(que_numb); //passing que_numb value to queCounter\n    clearInterval(counter); //clear counter\n    clearInterval(counterLine); //clear counterLine\n    startTimer(timeValue); //calling startTimer function\n    startTimerLine(widthValue); //calling startTimerLine function\n    timeText.textContent = \"Time Left\"; //change the text of timeText to Time Left\n    next_btn.classList.remove(\"show\"); //hide the next button\n}\n\n// if quitQuiz button clicked\nquit_quiz.onclick = ()=>{\n    window.location.reload(); //reload the current window\n}\n\nconst next_btn = document.querySelector(\"footer .next_btn\");\nconst bottom_ques_counter = document.querySelector(\"footer .total_que\");\n\n// if Next Que button clicked\nnext_btn.onclick = ()=>{\n    if(que_count < questions.length - 1){ //if question count is less than total question length\n        que_count++; //increment the que_count value\n        que_numb++; //increment the que_numb value\n        showQuetions(que_count); //calling showQestions function\n        queCounter(que_numb); //passing que_numb value to queCounter\n        clearInterval(counter); //clear counter\n        clearInterval(counterLine); //clear counterLine\n        startTimer(timeValue); //calling startTimer function\n        startTimerLine(widthValue); //calling startTimerLine function\n        timeText.textContent = \"Time Left\"; //change the timeText to Time Left\n        next_btn.classList.remove(\"show\"); //hide the next button\n    }else{\n        clearInterval(counter); //clear counter\n        clearInterval(counterLine); //clear counterLine\n        showResult(); //calling showResult function\n    }\n}\n\n// getting questions and options from array\nfunction showQuetions(index){\n    const que_text = document.querySelector(\".que_text\");\n\n    //creating a new span and div tag for question and option and passing the value using array index\n    let que_tag = '<span>'+ questions[index].numb + \". \" + questions[index].question +'</span>';\n    let option_tag = '<div class=\"option\"><span>'+ questions[index].options[0] +'</span></div>'\n    + '<div class=\"option\"><span>'+ questions[index].options[1] +'</span></div>'\n    + '<div class=\"option\"><span>'+ questions[index].options[2] +'</span></div>'\n    + '<div class=\"option\"><span>'+ questions[index].options[3] +'</span></div>';\n    que_text.innerHTML = que_tag; //adding new span tag inside que_tag\n    option_list.innerHTML = option_tag; //adding new div tag inside option_tag\n    \n    const option = option_list.querySelectorAll(\".option\");\n\n    // set onclick attribute to all available options\n    for(i=0; i < option.length; i++){\n        option[i].setAttribute(\"onclick\", \"optionSelected(this)\");\n    }\n}\n// creating the new div tags which for icons\n\n\n//if user clicked on option\nfunction optionSelected(answer){\n    clearInterval(counter); //clear counter\n    clearInterval(counterLine); //clear counterLine\n    let userAns = answer.textContent; //getting user selected option\n    let correcAns = questions[que_count].answer; //getting correct answer from array\n    const allOptions = option_list.children.length; //getting all option items\n    \n    if(userAns == correcAns){ //if user selected option is equal to array's correct answer\n        userScore += 4; //upgrading score value with 1\n        answer.classList.add(\"correct\"); //adding green color to correct selected option\n        \n        console.log(\"Correct Answer\");\n        \n    }else{\n        answer.classList.add(\"incorrect\"); //adding red color to correct selected option\n        \n        console.log(\"Wrong Answer\");\n\n        for(i=0; i < allOptions; i++){\n            if(option_list.children[i].textContent == correcAns){ //if there is an option which is matched to an array answer \n                option_list.children[i].setAttribute(\"class\", \"option correct\"); //adding green color to matched option\n                \n                console.log(\"Auto selected correct answer.\");\n            }\n        }\n    }\n    for(i=0; i < allOptions; i++){\n        option_list.children[i].classList.add(\"disabled\"); //once user select an option then disabled all options\n    }\n    next_btn.classList.add(\"show\"); //show the next button if user selected any option\n}\n\nfunction showResult(){\n    info_box.classList.remove(\"activeInfo\"); //hide info box\n    quiz_box.classList.remove(\"activeQuiz\"); //hide quiz box\n    result_box.classList.add(\"activeResult\"); //show result box\n    const scoreText = result_box.querySelector(\".score_text\");\n    if (userScore > 3){ // if user scored more than 3\n        //creating a new span tag and passing the user score number and total question number\n        let scoreTag = '';\n        scoreText.innerHTML = scoreTag;  //adding new span tag inside score_Text\n    }\n    else if(userScore > 1){ // if user scored more than 1\n        let scoreTag = '';\n        scoreText.innerHTML = scoreTag;\n    }\n    else{ // if user scored less than 1\n        let scoreTag = '';\n        scoreText.innerHTML = scoreTag;\n    }\n}\n\nfunction startTimer(time){\n    counter = setInterval(timer, 1000);\n    function timer(){\n        timeCount.textContent = time; //changing the value of timeCount with time value\n        time--; //decrement the time value\n        if(time < 9){ //if timer is less than 9\n            let addZero = timeCount.textContent; \n            timeCount.textContent = \"0\" + addZero; //add a 0 before time value\n        }\n        if(time < 0){ //if timer is less than 0\n            clearInterval(counter); //clear counter\n            timeText.textContent = \"Time Off\"; //change the time text to time off\n            const allOptions = option_list.children.length; //getting all option items\n            let correcAns = questions[que_count].answer; //getting correct answer from array\n            for(i=0; i < allOptions; i++){\n                if(option_list.children[i].textContent == correcAns){ //if there is an option which is matched to an array answer\n                    option_list.children[i].setAttribute(\"class\", \"option correct\"); //adding green color to matched option\n                    option_list.children[i].insertAdjacentHTML(\"beforeend\", tickIconTag); //adding tick icon to matched option\n                    console.log(\"Time Off: Auto selected correct answer.\");\n                }\n            }\n            for(i=0; i < allOptions; i++){\n                option_list.children[i].classList.add(\"disabled\"); //once user select an option then disabled all options\n            }\n            next_btn.classList.add(\"show\"); //show the next button if user selected any option\n        }\n    }\n}\n\n\n"
  },
  {
    "path": "kids.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>ApnaTheatre | Kids</title>\n  <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n\n  <!-- Font  -->\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n  <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\n    integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n    integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n    crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n    \n\n\n<!------------------------Scroll to top button------------------------------------------------>\n<style>\n   .poster, .movie_card {\n    box-shadow: 0 0 10px red !important;\n  \n  }\n  .carousel-inner{\n  cursor: pointer;\n}\n    #scrollToTopButton{\n  position:fixed;\n  bottom: 40px;\n  right: 25px;\n  font-size: 25px;\n  z-index: 99;\n  width: 50px;\n  height: 50px;\n  background-color:red;\n  color:black;\n  border: none;\n  cursor: pointer;\n  outline: none;\n  padding: 6px;\n  border-radius: 50%;\n  }\n  #scrollToTopButton:hover, i:hover {\n  background-color:white;\n  color:red;\n  }\n\n  .nav-item :hover{\n  margin-bottom: 10px;\n  \n  \n}\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n  .scroll-bar {\n  height: auto;\n  width: auto;\n  margin: auto;\n  overflow-y: auto;\n  overflow-x: hidden;\n\tmax-width: 100%;\n}\n\n  ::-webkit-scrollbar-track {\n  border: 5px solid #2c2f30;\n  background-color: red;\n  }\n  ::-webkit-scrollbar-thumb:hover {\n  background-color: red !important;\n  }\n  ::-webkit-scrollbar-track:hover {\n  background-color: white;\n }\n\n  ::-webkit-scrollbar {\n  width: 15px;\n  background-color: #2c2f30;\n  }\n\n::-webkit-scrollbar-thumb {\n  background-color: black;\n  border-radius: 10px;\n}\n\n    * {\n      margin: 0;\n      padding: 0;\n    }\n\n    /* navbar css */\n    .navbar-nav{\n  display: flex;\n  align-items: center;\n  padding: 0px 7.5px;\n}\n\n    #header-nav .nav-link {\n  color: white;\n  font-size: 20px;\n  margin-left: 20px;\n\n\n\n}\n\n    @media only screen and (max-width: 1400px){\n  #header-nav .nav-link {\n    color: white;\n    font-size: 18px;\n    margin-left: 18px;\n  }\n  #searchText{\n    width: 150px;\n  }\n}\n\n@media only screen and (min-width: 1133px) and (max-width: 1275px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n}\n@media only screen and (min-width: 1035px) and (max-width: 1132px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n  #searchText{\n    width: 120px;\n  }\n  #submitBtn{\n    width: 60px;\n    display: flex;\n    justify-content: center;\n  }\n}\n@media only screen and (min-width: 993px) and (max-width: 1034px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 14px;\n    margin-left: 10px;\n  } \n\n#searchText{\n  width: 100px;\n}\n#submitBtn{\n  width: 50px;\n  display: flex;\n  justify-content: center;\n}\n}\n\n.fas:hover{background: none!important ;}\n.nav-item{ flex-wrap:wrap;}\n.menu li a:hover {\n  color: red !important;\n  opacity: 0.5;\n}\n\n/* Genre dropdown */\n\n.dropdown:hover .dropdown-content {\n  display: block;\n}\n\n.dropdown-content {\n  border-radius: 5px;\n  display: none;\n  position: absolute;\n  background-color: black;\n  min-width: 160px;\n  z-index: 999;\n}\n\n.dropdown-content a {\n  border-radius: 5px;\n  color: white;\n  padding: 5px 10px;\n  text-decoration: none;\n  display: block;\n  \n}\n\n.dropdown-content a:hover {\nbackground-color: red;\ncolor: white;\ntext-decoration: none;\n}\n\n    #variety {\n      margin-top: 1rem;\n      margin-bottom: 0.5rem;\n    }\n\n    img {\n      -webkit-user-drag: none;\n      -moz-user-drag: none;\n      -o-user-drag: none;\n    }\n\n    .movie_card {\n      padding: 0 !important;\n      width: 14rem;\n      margin: 5px;\n      border-radius: 20px;\n      background-color: rgb(15, 15, 73) !important;\n      color: white;\n      box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 15px 0 rgba(0, 0, 0, 0.19);\n    }\n\n    .movie_card img {\n      height: 16rem;\n    }\n\n    .movie_info {\n      color: red;\n    }\n\n    .movie_info i {\n      font-size: 10px;\n    }\n\n    .card-title {\n      width: 80%;\n      font-size: 15px;\n      height: 2rem;\n    }\n\n    .section-title {\n      color: red;\n      font-size: 25px;\n      margin-bottom: 40px;\n    }\n\n    .movie_info_rating {\n      color: goldenrod;\n      float: right;\n    }\n\n    .logo {\n      width: 81px;\n      height: 52px;\n      padding: 3px;\n    }\n\n    .container,\n    .container-fluid,\n    .container-lg,\n    .container-md,\n    .container-sm,\n    .container-xl,\n    .container-xxl {\n      padding-left: 0px !important;\n    }\n\n    .row>* {\n      padding-left: 0px !important;\n    }\n\n    .col img {\n      cursor: pointer;\n    }\n\n/* CSS FOR FOOTER */\n/* CSS FOR FOOTER */\n\n.footer{\nmargin-bottom:15px;\nfont-family: Verdana, Geneva, Tahoma, sans-serif;\n}\n.footer-content{\n  display:flex;\n  justify-content:space-between;\n  padding: 10px 20px;\n}\n.footer-logo{\n  width: 150px;\n  height: 120px;\n  padding: 3px;\n  margin:0px 0px 0px 10px;\n  padding: 0;\n}\n.footer-heading{\n  color:white;\n}\n.footer-left, .footer-right, .footer-middle{\ntext-align:center;\n}\n.icons{\n  margin-left:-30px;\n}\n.footer-links i{\nfont-size:30px;\nwidth:40px;\nheight:40px;\nmargin-top:30px;\npadding:5px;\n}\n.footer-middle a i:hover{\nbackground-color:white;\nborder-radius:50px;\ncolor:red;\n}\n.footer-hr{\n    color:grey;\n}\n.footer-middle-list-item{\nlist-style:none;\nfont-size:15px;\nfont-family:cursive;\nmargin:5px 0px 0px 15px;\ntext-align:left;\n}\n.footer-middle-list-item a{\ntext-decoration:none;\ncolor:white;\n}\n.footer-middle-list-item a:hover{\ncolor:red;\n}\n.footer-right{\n  margin-top:-15px;\n}\n.footer-contact-button{\nfont-size:20px;\nbackground-color:red;\ncolor:black;\npadding:10px;\nborder:none;\nborder-radius:10px;\ntext-decoration:none;\n}\n.footer-contact-button:hover{\nbackground-color:white;\ncolor:red;\n}\n.footer-bottom-tagline{\ncolor:white;\nfont-size:15px;\nfont-family:cursive;\nmargin-bottom:25px;\n}\n\n\n\n.footer-copyright{\ntext-align:center;\ncolor:white;\nmargin-top:20px;\nfont-size:18px;\n}\n/* .footer-right a:hover{transform:scale(1.1); -webkit-transform:scale(1.1);} */\n\n/***************** Media Queries *********************/\n\n@media (max-width: 600px) {\n.footer-content{\n   display:block;\n   text-align:center;\n}\n.footer-middle-list-item{\n  text-align:center;\n  margin-left:-20px;\n}\n\n.footer-left, .footer-middle, .footer-right{\n  margin-top:50px;\n}\n\n}\n\n#waterdrop {\n  height: 30px;\n}\n\n#waterdrop canvas {\n  bottom: -70px !important;\n}\n#nav:hover\n{\n  background-color:#e60e23!important;\n\n}\n\n@media only screen and (max-width: 531px) {\n  .poster {\n  margin: 50px auto !important;\n  width: 230px !important;\n}\n}\n\n.poster {\n  margin: 50px 20px;\n}\n\n  </style>\n\n\n</head>\n\n<body style=\"background-color:black;\" color=\"height:auto;\">\n\n    <div class=\"scroll-bar\">\n        <!-- navbar starts -->\n\n        <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n          <div class=\"container-fluid\">\n            <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n                height=\"24\"></a>\n            <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n              data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n              <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n            </button>\n            \n            <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n              <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n                <li class=\"nav-item\">\n                  <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"tv.html\">TV</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n                </li>\n               \n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n                </li>\n                <li>\n                  <!-- Genre dropdown starts-->\n                  <div>\n                    <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                        <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                            Genres\n                        </button>\n                        <div class=\"dropdown-content\" style=\"color: white;\">\n                            <a href=\"popular.html\">Popular</a>\n                            <a href=\"crime.html\">Crime</a>\n                            <a href=\"suspense.html\">Suspense & Thriller</a>\n                            <a href=\"action.html\">Action</a>\n                            <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                            <a href=\"documentary.html\">Documentary</a>\n                            <a href=\"horror.html\">Horror</a>\n                            <a href=\"drama.html\">Drama</a>\n                            <a href=\"war.html\">War & Politics</a>\n                            <a href=\"comedy.html\">Comedy</a>\n                            <a href=\"romance.html\">Romance</a>\n                            <a href=\"anime.html\">Anime</a>\n                          </div>\n                    </div>\n                  </div>\n                  <!-- Genre dropdown ends-->\n                </li>\n                <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                  <li>\n                    <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n                  </li>\n                </div>\n              </ul>\n              <form id=\"searchForm\" class=\"d-flex\">\n                <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n                <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n              </form>\n            </div>\n          </div>\n          </nav>\n    \n            <!-- navbar ends -->\n\n        <div class=\"main-content\">\n\n            <div id=\"carouselExampleControls\" class=\"carousel slide\" data-bs-ride=\"carousel\">\n                <div class=\"carousel-inner\">\n                    <div class=\"carousel-item active\">\n                        <img src=\"./Images/spider_man_cover.png\" height=\"400\" class=\"d-block w-100\" alt=\"...\">\n                    </div>\n                    <div class=\"carousel-item\">\n                        <img src=\"./Images/cars.jpg\" height=\"400\" class=\"d-block w-100\" alt=\"...\">\n                    </div>\n                    <div class=\"carousel-item\">\n                        <img src=\"./Images/doraemon_cover.jpg\" height=\"400\" class=\"d-block w-100\" alt=\"...\">\n                    </div>\n                    <div class=\"carousel-item\">\n                        <img src=\"./Images/mickey_mouse cover.png\" height=\"400\" class=\"d-block w-100\" alt=\"...\">\n                    </div>\n                    <div class=\"carousel-item\">\n                        <img src=\"./Images/shinchan_cover.jpg\" height=\"400\" class=\"d-block w-100\" alt=\"...\">\n                    </div>\n                </div>\n\n                <a class=\"carousel-control-prev\" href=\"#carouselExampleControls\" role=\"button\" data-bs-slide=\"prev\">\n                    <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Previous</span>\n                </a>\n                <a class=\"carousel-control-next\" href=\"#carouselExampleControls\" role=\"button\" data-bs-slide=\"next\">\n                    <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Next</span>\n                </a>\n            </div>\n\n        </div>\n\n\n\n        <div class=\"row poster\">\n            <div class=\"container\">\n                <div id=\"movies\" class=\"row\"></div>\n            </div>\n            <hr>\n            <div class=\"row\">\n                <h3 class=\"section-title text-center\">Popular</h3>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"Images/pikachu.jpeg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">POKEMON Detective Pikachu</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"Images/toy1.jpeg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Toy Story 4</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"Images/captain.jpeg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Captain Marvel</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"Images/spider.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Spider-Man: Far From Home</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/mermaid.png\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">The Little Mermaid</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n\n        <div class=\"row poster\">\n            <div class=\"row\">\n                <h3 class=\"section-title text-center\">Top Picks For You</h3>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/doraemon.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Doraemon</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/mickey_mouse.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Mickey Mouse</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/toy_story.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Toy Story 3</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/nemo.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Finding Nemo</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/sofia.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Sofia</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n\n        <div class=\"row poster\">\n            <div class=\"row\">\n                <h3 class=\"section-title text-center\">Featured</h3>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/shinChan.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Shin Chan</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/Hanuman.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Hanuman</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/BalGanesh.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Bal Ganesh</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/little_einsteins.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Little Einsteins</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/Phineas.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Phineas and Ferb</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n\n\n        <div class=\"row poster\">\n            <div class=\"row\">\n                <h3 class=\"section-title text-center\">Amazing Animals</h3>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/Mouse_detective.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Mouse Detective</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/bugs_life.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">A Bug's Life</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/jungle-book.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Jungle Book</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/lion_king.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">The Lion King</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/bolt.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Bolt</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n\n\n        <div class=\"row poster\">\n            <div class=\"row\">\n                <h3 class=\"section-title text-center\">Fairy Tales</h3>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/pinocchio.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Pinocchio</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/tangled.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Tangled</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/frozen.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Frozen II</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/snow_white.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Snow White</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/cinderalla.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Cinderalla</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n\n\n\n    <!-------------------------------Footer-------------------------------->\n    <div id=\"waterdrop\"></div>\n    <footer class=\"footer\">\n\n      <div class=\"footer-content\">\n          <div class=\"footer-left\">\n          <a  href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\" height=\"24\"></a>\n          <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n      </div>\n      <div class=\"footer-middle\">\n        <h2 class=\"footer-heading\">Follow Us</h2>\n        <ul class=\"footer-middle-list icons\">\n            <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i class=\"fab fa-github github\" style=\"color:red\"></i></a>\n        </ul>\n    </div>\n          <div class=\"footer-middle\">\n          <h2 class=\"footer-heading\">Services</h2>\n          <ul class=\"footer-middle-list\">\n              <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n              <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n              <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n              <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n              <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n              <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n          </ul>\n          </div>\n          <div class=\"footer-middle\">\n              <h2 class=\"footer-heading\">Try Our App</h2>\n              <ul class=\"footer-middle-list icons\">\n                  <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n                  <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n              </ul>\n              </div>\n          <div class=\"footer-right\">\n              <p class=\"footer-links\">\n                  <h2 class=\"footer-heading\">Contact Us</h2>\n                  <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n                  <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n              </p>\n          </div>\n      </div>\n      <hr class=\"footer-hr\">\n      <div class=\"footer-copyright\" >\n          <p>Copyright &copy; and &reg; Since <script>document.write(new Date().getFullYear())</script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>\n      </div>\n  </footer>\n\n  <!----------------------scroll back to top button-->\n  <button  id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\" >\n    <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\"></i>\n  </button>\n  <script>\n  $(document).ready(function(){\n    var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n    window.onscroll = function () { scrollFunction() };\n\n    function scrollFunction() {\n    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n      scrollTopButton.style.display = \"block\";\n    } else {\n      scrollTopButton.style.display = \"none\";\n    }\n  }\n\n  $(\"#scrollToTopButton\").click(function(){\n  $('html ,body').animate({scrollTop : 0},800)\n  });\n  });\n  </script>\n<script>\n  function logout(){\n    window.location.replace(\"login.html\");\n  }\n  </script>\n  <!-- offcanva JS and footer js -->\n  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n  <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n  <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n\n  <script> jQuery('#waterdrop').raindrops({ color: '#292c2f', canvasHeight: 150, density: 0.1, frequency: 20 });\n  </script>\n\n  <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\"\n    integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\"\n    crossorigin=\"anonymous\"></script>\n  <script src=\"./static/script.js\"></script>\n\n</body>\n\n</html>\n"
  },
  {
    "path": "landpage.css",
    "content": "*{\n    margin:0;\n    padding:0;\n    box-sizing: border-box;\n    font-family: 'Ubuntu', sans-serif;\n  }\n  .nav-link.b:hover{\n    color: #7bdf1d;\n  }\n  .bottom-text-container1{\n    cursor: pointer;\n  }\n.preloader {\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom:0;\n    right:0;\n    width: 100%;\n    height: 100vh;\n    z-index: 99999999;\n    background: url('loaderLogo.webp'); /* your icon gif file path */\n    background-repeat: no-repeat;\n    background-color: black;\n    background-position: center;\n    }\n\n    #stop-scrolling {\n        height: 100% !important;\n        overflow: hidden !important;\n        }\n\n  body {\n    background-color: rgb(0, 0, 0);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n  }\n  .text-container {\n    width: 700px;\n    height: 100vh;\n    text-align: center;\n  }\n  .intro-container {\n    width: 370px;\n    margin: 0 auto;\n    text-align: center;\n    font-size: 1.2rem;\n  }\n  .text-container h1 {\n    font-weight: 300;\n    color: #fff;\n    font-size: 3rem;\n  }\n  span {\n    color: rgb(187, 14, 14);\n  }\n  .text-container p {\n    color: #fff;\n    margin-top: 20px;\n  }\n  .container-2 {\n    margin-top: 80px;\n  }\n  .navbar-brand img{\n    width: 150px;\n    height: 150px;\n  }\n  .images-container {\n    width: 100%;\n    height: 100vh;\n    background-color: #000;\n  }\n  .group1 {\n    max-width: 250vw;\n    height: 329px;\n    display: flex;\n  }\n  .group2 {\n    max-width: 270vw;\n    height: 330px;\n    display: flex;\n  }\n  \n  .group3 {\n     max-width: 270vw;\n     height: 330px;\n     display: flex;\n   }\n  .group1 .image {\n    width: 250px;\n    height: 100%;\n  }\n  .group2 .images2 {\n    width: 250px;\n    height: 100%;\n  }\n  .group3 .images3 {\n    width: 250px;\n    height: 100%;\n  }\n  img {\n    height: 100%;\n  }\n  .text-container .button {\n    position: relative;\n    top: 100px;\n    padding: 13px 60px;\n    border-radius: 6px;\n  }\n  .text-container .button {\n    color: #fff;\n    text-decoration: none;\n    background-color: rgb(165, 7, 7);\n    }\n  .text-container .button:hover {\n    color: #fff;\n    text-decoration: none;\n    background-color: rgb(202, 6, 6);\n    transition:  all 500ms;\n  }\n  .button {\n    color: #fff;\n    text-decoration: none;\n    background-color: rgb(165, 7, 7);\n    box-shadow: 0 5px #660707;\n    display: inline-block;\n    opacity: 0.9;\n  }\n  .button:hover{\n    opacity: 1;\n  }\n  .button:active {\n    position: relative;\n    box-shadow: none;\n    transform: translateY(3px);\n    \n  }\n  .bottom-text-container {\n    width: 300px;\n    height: 80px;\n    position: absolute;\n    bottom: 20px;\n    display: flex;\n    justify-content: space-around;\n    align-items: center;\n  }\n  .bottom-text-container .watch, .bottom-text-container .chill,.bottom-text-container .repeat{\n    border: 2px solid #fff;\n    padding: 5px 20px;\n    border-radius: 50px;\n    color: #fff;\n    text-align: center;\n  }\n  .bottom-text-container .watch , .bottom-text-container .repeat{\n    background-color: rgb(145, 9, 9);\n    border: none;\n  }\n  .bottom-text-container .chill {\n    border:1px solid rgb(165, 7, 7);\n    color:rgb(165, 7, 7)\n  }\n  .bottom-text-container1 {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n \n \n@media only screen and (max-width: 600px) {\n  .text-container h1 {\n    color: #fff;\n    font-size: 2.5rem;\n  }\n  .container-2 {\n    margin-top: 50px;\n  }\n}\n\n@media only screen and (max-width: 400px) {\n  .text-container h1 {\n    color: #fff;\n    font-size: 2rem;\n  }\n  .container-2 {\n    margin-top: 50px;\n  }\n  .bottom-text-container {\n    width: 300px;\n    height: 80px;\n    position: absolute;\n    bottom: 0;\n    display: flex;\n    justify-content: space-around;\n }\n}\n\n"
  },
  {
    "path": "login.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width\" />\n    <title>Sign In</title>\n    <link\n      href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\"\n      rel=\"stylesheet\"\n      integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\"\n      crossorigin=\"anonymous\"\n    />\n\n    <!-- Font  -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\"\n      rel=\"stylesheet\"\n    />\n\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <link\n      rel=\"stylesheet\"\n      href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n      integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n      crossorigin=\"anonymous\"\n      referrerpolicy=\"no-referrer\"\n    />\n    <link\n      rel=\"shortcut icon\"\n      href=\"./Images/Logo/Title.jpeg\"\n      type=\"image/x-icon\"\n    />\n    <script\n      src=\"https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js\"\n      integrity=\"sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA==\"\n      crossorigin=\"anonymous\"\n      referrerpolicy=\"no-referrer\"\n    ></script>\n    <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n    <script>\n      var emailError = false;\n      var passwordError = false;\n      var strongPass = new RegExp(\n        \"^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\\$%\\^&\\*])(?=.{6,})\"\n      );\n      const mailFormat =\n        /^(([^<>()[\\]\\\\.,;:\\s@\\\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\\\"]+)*)|(\\\".+\\\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n\n      function DisplayResults(e) {\n        var email = document.forms[\"regform\"][\"email\"].value;\n        var password = document.forms[\"regform\"][\"password\"].value;\n\n        var error = document.getElementById(\"errormessage\");\n        if (email.length == 0) {\n          emailError = true;\n          error.style.display = \"block\";\n          error.innerHTML = `<p><svg class=\"svg-icon\" viewBox=\"0 0 20 20\">\n\t\t\t\t\t\t\t<path d=\"M17.388,4.751H2.613c-0.213,0-0.389,0.175-0.389,0.389v9.72c0,0.216,0.175,0.389,0.389,0.389h14.775c0.214,0,0.389-0.173,0.389-0.389v-9.72C17.776,4.926,17.602,4.751,17.388,4.751 M16.448,5.53L10,11.984L3.552,5.53H16.448zM3.002,6.081l3.921,3.925l-3.921,3.925V6.081z M3.56,14.471l3.914-3.916l2.253,2.253c0.153,0.153,0.395,0.153,0.548,0l2.253-2.253l3.913,3.916H3.56z M16.999,13.931l-3.921-3.925l3.921-3.925V13.931z\"></path>\n\t\t\t\t\t\t</svg><span class=\"error\">Email should not be empty</span></p>`;\n        } else if (!mailFormat.test(email)) {\n          error.style.display = \"block\";\n          error.innerHTML = `<p><svg class=\"svg-icon\" viewBox=\"0 0 20 20\">\n              <path d=\"M17.388,4.751H2.613c-0.213,0-0.389,0.175-0.389,0.389v9.72c0,0.216,0.175,0.389,0.389,0.389h14.775c0.214,0,0.389-0.173,0.389-0.389v-9.72C17.776,4.926,17.602,4.751,17.388,4.751 M16.448,5.53L10,11.984L3.552,5.53H16.448zM3.002,6.081l3.921,3.925l-3.921,3.925V6.081z M3.56,14.471l3.914-3.916l2.253,2.253c0.153,0.153,0.395,0.153,0.548,0l2.253-2.253l3.913,3.916H3.56z M16.999,13.931l-3.921-3.925l3.921-3.925V13.931z\"></path>\n            </svg><span class=\"error\">Email address is invalid</span></p>`;\n        } else if (!strongPass.test(password)) {\n          passwordError = true;\n          error.style.display = \"block\";\n          error.innerHTML = `<p><svg class=\"svg-icon\" viewBox=\"0 0 20 20\">\n\t\t\t\t\t\t\t<path d=\"M17.308,7.564h-1.993c0-2.929-2.385-5.314-5.314-5.314S4.686,4.635,4.686,7.564H2.693c-0.244,0-0.443,0.2-0.443,0.443v9.3c0,0.243,0.199,0.442,0.443,0.442h14.615c0.243,0,0.442-0.199,0.442-0.442v-9.3C17.75,7.764,17.551,7.564,17.308,7.564 M10,3.136c2.442,0,4.43,1.986,4.43,4.428H5.571C5.571,5.122,7.558,3.136,10,3.136 M16.865,16.864H3.136V8.45h13.729V16.864z M10,10.664c-0.854,0-1.55,0.696-1.55,1.551c0,0.699,0.467,1.292,1.107,1.485v0.95c0,0.243,0.2,0.442,0.443,0.442s0.443-0.199,0.443-0.442V13.7c0.64-0.193,1.106-0.786,1.106-1.485C11.55,11.36,10.854,10.664,10,10.664 M10,12.878c-0.366,0-0.664-0.298-0.664-0.663c0-0.366,0.298-0.665,0.664-0.665c0.365,0,0.664,0.299,0.664,0.665C10.664,12.58,10.365,12.878,10,12.878\"></path>\n\t\t\t\t\t\t</svg><span class=\"error\">Password should be atleast 6 characters long,contain a special character,a lower case and upper case alphabet and a number.</span></p>`;\n        } else {\n          swal({\n            title: \"Welcome back!\",\n            text: \"Let the binge watch begin!!\",\n            type: \"success\",\n          });\n          setTimeout(function () {\n            document.location.href = \"home.html\";\n          }, 1500);\n        }\n        return false;\n      }\n\n      function change(e) {\n        var name = document.forms[\"regform\"][\"name\"].value;\n        var error = document.getElementById(\"errormessage\");\n        var email = document.forms[\"regform\"][\"email\"].value;\n        var password = document.forms[\"regform\"][\"password\"].value;\n        var confirmPassword = document.forms[\"regform\"][\"retypepassword\"].value;\n        if (emailError == true) {\n          if (email.length > 0) {\n            emailError = false;\n            error.style.display = \"none\";\n          }\n        } else if (passwordError == true) {\n          if (password.length > 0) {\n            passwordError = true;\n            error.style.display = \"none\";\n          }\n        }\n      }\n    </script>\n\n    <style>\n      #scrollToTopButton {\n        position: fixed;\n        bottom: 40px;\n        right: 25px;\n        font-size: 25px;\n        z-index: 99;\n        width: 50px;\n        height: 50px;\n        background-color: red;\n        color: black;\n        border: none;\n        cursor: pointer;\n        outline: none;\n        padding: 6px;\n        border-radius: 50%;\n        box-shadow: 0 6px 10px 0px gray;\n      }\n\n      #scrollToTopButton:hover,\n      i:hover {\n        color: red;\n        background-color: white;\n      }\n      h1 {\n        margin: auto;\n        width: max-content;\n        color: white;\n      }\n      span {\n        display: inline-block;\n      }\n      .img-logo {\n        height: 94px;\n        margin-left: 45px;\n      }\n      .seperator {\n        height: 12px;\n        display: block;\n      }\n      .main {\n        padding: 70px;\n        width: 300px;\n        height: auto;\n        border: 1.5px grey solid;\n        border-radius: 5px;\n        margin: -4.5px auto;\n      }\n      label {\n        font-weight: bold;\n        color: white;\n        font-size: 1.25em;\n      }\n      input {\n        width: 280px;\n        border: none;\n        border-radius: 5px;\n        padding: 8px;\n        outline: none;\n      }\n      input[type=\"submit\"] {\n        width: 260px;\n        background-color: red;\n        font-weight: bold;\n      }\n      input[type=\"submit\"]:hover {\n        cursor: pointer;\n        border: 2px gray solid;\n        background-color: red;\n        transform: scale(0.95);\n      }\n      body {\n        margin: 0;\n        padding: 0;\n        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.85)),\n          url(\"Images/background3.png\") no-repeat center center fixed;\n        -webkit-background-size: cover;\n        -moz-background-size: cover;\n        -o-background-size: cover;\n        background-size: cover;\n        font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n      }\n      .brand {\n        margin-bottom: 13px;\n        color: red;\n        padding-top: 15px;\n      }\n      #errormessage {\n        display: flex;\n        justify-content: center;\n        border-radius: 12px;\n      }\n      p {\n        display: inline-flex;\n        font-size: 1em;\n        align-items: center;\n        background: rgb(220, 53, 69);\n        padding: 0.5em;\n        color: white;\n        font-family: sans-serif;\n      }\n      p svg {\n        width: 2em;\n        height: 2em;\n        margin-right: 0.5em;\n        fill: lightgreen;\n      }\n      .login {\n        margin: 0 auto;\n        width: 400px;\n        background-color: rgba(0, 0, 0, 0.6);\n        border-radius: 5px;\n        padding: 30px 70px 143px 70px;\n        margin-bottom: 12px;\n      }\n\n      .login h1 {\n        color: white;\n        padding-bottom: 10px;\n      }\n\n      .bottom {\n        background-color: rgba(0, 0, 0, 0.35);\n        color: #bdc7c9;\n      }\n\n      .bottom-width {\n        max-width: 1000px;\n        padding: 8px 20px;\n        margin: auto;\n      }\n\n      .bottom-flex {\n        display: flex;\n        flex-wrap: wrap;\n        padding: 15px 0 0 0;\n        justify-content: center;\n      }\n\n      .bottom-flex li {\n        list-style: none;\n        margin: 0px 10px;\n      }\n      .bottom-flex li a {\n        font-size: 15px;\n      }\n      .list-bottom {\n        /* width: 25%; */\n        margin-top: 10px;\n      }\n\n      .link-bottom {\n        text-decoration: none;\n        color: #bdc7c9;\n        font-size: 0.8rem;\n      }\n\n      .link-bottom:hover {\n        text-decoration: underline;\n      }\n      .remember-flex {\n        display: flex;\n        justify-content: space-between;\n        margin-top: 10px;\n        font-size: 0.8rem;\n      }\n\n      .color_text {\n        color: #bdc7c9;\n      }\n\n      .color_link {\n        color: #bdc7c9;\n      }\n\n      .signup-link {\n        color: white;\n        margin-bottom: 25px;\n\n        text-decoration: none;\n      }\n\n      .signup-link:hover {\n        text-decoration: underline;\n      }\n\n      .face_icon {\n        color: #3b5998;\n        margin-right: 6px;\n        font-size: 20px;\n      }\n      .log_face {\n        text-decoration: none;\n        margin-left: 10px;\n        font-size: 0.8rem;\n      }\n\n      .login-face {\n        /* margin: 100px -20px 30px -260px; */\n        text-align: center;\n        vertical-align: middle;\n        color: #bdc7c9;\n      }\n\n      .new-members {\n        margin-bottom: 10px;\n\n        color: #bdc7c9;\n      }\n      .or {\n        margin-bottom: 5px;\n        text-align: center;\n        color: #bdc7c9;\n      }\n\n      .help a {\n        text-decoration: none;\n        padding-top: 10%;\n        margin-left: 64%;\n        text-align: right;\n      }\n      .help a:hover {\n        text-decoration: underline;\n      }\n\n      .protection {\n        font-size: 0.8rem;\n        color: #bdc7c9;\n      }\n\n      .protection a {\n        text-decoration: none;\n      }\n\n      .protection a:hover {\n        text-decoration: underline;\n      }\n\n      .tel-link {\n        text-decoration: none;\n        color: #e1e5ea;\n      }\n\n      .tel-link:hover {\n        text-decoration: underline;\n      }\n\n      .select-language {\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        background: url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwb2x5Z29uIHN0cm9rZT0id2hpdGUiICBwb2ludHM9IjQ3LjI1LDE1IDQ1LjE2NCwxMi45MTQgMjUsMzMuMDc4IDQuODM2LDEyLjkxNCAyLjc1LDE1IDI1LDM3LjI1ICIvPjwvc3ZnPg==\");\n        background-size: 12px;\n        background-position-x: calc(100% - 7px);\n        background-position-y: calc(100% - 14px);\n        background-repeat: no-repeat;\n        background-color: #000;\n        color: #bdc7c9;\n        padding: 14px 20px 14px 14px;\n        margin: 30px 0 40px 0;\n        font-size: 0.9rem;\n        min-height: 40px;\n        border: 1px solid #333;\n      }\n\n      .select-language option {\n        padding-left: 10px;\n      }\n      .input-text {\n        margin-bottom: 20px;\n      }\n\n      .input-text input {\n        width: 100%;\n        height: 45px;\n        background-color: #333;\n        color: white;\n        border-radius: 5px;\n        border: none;\n        outline: transparent;\n        text-indent: 8px;\n      }\n\n      .input-text input::-webkit-input-placeholder {\n        font-size: 1rem;\n        color: #bdc7c9;\n      }\n\n      .input-text input::-moz-placeholder {\n        font-size: 1rem;\n        color: #bdc7c9;\n        text-indent: 40px;\n      }\n      .learnmore a {\n        padding: 2px;\n        margin: 0px;\n      }\n      .signin-button {\n        margin-top: 20px;\n        padding: 13px;\n        border-radius: 5px;\n        background-color: red;\n        color: white;\n        border: none;\n        font-weight: bold;\n        font-size: 1.05rem;\n        cursor: pointer;\n      }\n      .logo img {\n        position: relative;\n        top: 30px;\n        left: 10px;\n        width: 110px;\n        height: 90px;\n        padding: 3px;\n        margin: 0;\n        padding: 0;\n      }\n      .field-icon {\n        position: absolute;\n        margin-left: -30px;\n        margin-top: 15px;\n        color: white;\n      }\n      .field-icon:hover {\n        cursor: pointer;\n        background-color: transparent;\n      }\n      .questions {\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n        justify-content: space-between;\n      }\n\n      @media only screen and (max-width: 450px) {\n        .login {\n          width: 300px;\n          padding: 15px;\n        }\n      }\n      @media only screen and (max-width: 350px) {\n        .login {\n          width: 240px;\n          padding: 10px;\n        }\n        input[type=\"submit\"] {\n          width: 220px;\n        }\n        .abcRioButton {\n          width: 220px !important;\n        }\n        .abcRioButtonIcon {\n          padding: 15px 5px !important;\n        }\n        .abcRioButtonContents {\n          font-size: 12px !important;\n        }\n        .help a {\n          margin-left: 60% !important;\n        }\n      }\n    </style>\n    <meta\n      name=\"google-signin-client_id\"\n      content=\"556331998780-jhmmulhgm2s2fgrqqln50vmtp1fh41vc.apps.googleusercontent.com\"\n    />\n    <script src=\"https://apis.google.com/js/platform.js\" async defer></script>\n\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n  </head>\n  <body>\n    <div class=\"logo\">\n      <a href=\"home.html\">\n        <img src=\"Images/TheaterLogoFinal.png\" class=\"img-logo\" alt=\"Logo\" />\n      </a>\n    </div>\n    <div class=\"login-div\">\n      <form\n        class=\"login\"\n        onsubmit=\"return DisplayResults()\"\n        name=\"regform\"\n        autocomplete=\"off\"\n      >\n        <h1 class=\"sign\">Sign In</h1>\n        <div id=\"errormessage\"></div>\n        <span class=\"seperator\"></span>\n\n        <div class=\"input-text\">\n          <input\n            type=\"email\"\n            name=\"email\"\n            placeholder=\"Email\"\n            oninput=\"change()\"\n          />\n        </div>\n        <div class=\"input-text\">\n          <input\n            id=\"pass_signup\"\n            type=\"password\"\n            name=\"password\"\n            placeholder=\"Password\"\n            oninput=\"change()\"\n          /><i\n            class=\"fa fa-fw fa-eye field-icon toggle-password\"\n            id=\"togglePassword\"\n          ></i>\n        </div>\n\n        <span class=\"seperator\"></span>\n        <input class=\"signin-button\" type=\"submit\" value=\"Sign In\" />\n        <div class=\"remember-flex\">\n          <div>\n            <div class=\"or\">OR</div>\n            <div\n              class=\"g-signin2\"\n              data-onsuccess=\"onSignIn\"\n              data-theme=\"dark\"\n              data-width=\"258.5\"\n              data-height=\"50\"\n              data-longtitle=\"true\"\n            ></div>\n          </div>\n        </div>\n        <div class=\"help\">\n          <a class=\"color_text\" href=\"https://www.google.com/gmail/\"\n            >Need help?</a\n          >\n        </div>\n        <div class=\"login-face\">\n          <br />\n          <div class=\"new-members\">\n            New to Apna Theatre?\n            <a href=\"signup.html\" class=\"signup-link\">Sign up now</a>.\n          </div>\n          <br />\n          <div class=\"protection color_link help\">\n            This page is protected by Google reCAPTCHA to ensure you're not a\n            bot.\n            <div class=\"learnmore\"><a href=\"#\">Learn more.</a></div>\n          </div>\n        </div>\n      </form>\n    </div>\n\n    <div class=\"bottom\">\n      <div class=\"bottom-width\">\n        <div class=\"questions\">\n          <span\n            >Questions? <br />Ask on :\n            <a href=\"mailto: Apna_theatre@gmail.com\" class=\"tel-link\"\n              >Apna_theatre@gmail.com</a\n            ></span\n          >\n          <select class=\"fa select-language\">\n            <option>&#xf0ac; &nbsp;&nbsp;&nbsp;English</option>\n            <option>&#xf0ac; &nbsp;&nbsp;&nbsp;Hindi</option>\n          </select>\n        </div>\n\n        <div>\n          <ul class=\"bottom-flex\">\n            <li class=\"list-bottom\">\n              <a href=\"faq.html\" class=\"link-bottom\"> FAQ </a>\n            </li>\n            <li class=\"list-bottom\">\n              <a href=\"#\" class=\"link-bottom\"> Help Center </a>\n            </li>\n            <li class=\"list-bottom\">\n              <a href=\"#\" class=\"link-bottom\"> Terms of Use </a>\n            </li>\n            <li class=\"list-bottom\">\n              <a href=\"#\" class=\"link-bottom\"> Privacy </a>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <button id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\">\n      <i\n        class=\"fa fa-angle-double-up\"\n        aria-hidden=\"true\"\n        style=\"font-weight: bolder\"\n      ></i>\n    </button>\n    <script>\n      $(document).ready(function () {\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n        window.onscroll = function () {\n          scrollFunction();\n        };\n\n        function scrollFunction() {\n          if (\n            document.body.scrollTop > 20 ||\n            document.documentElement.scrollTop > 20\n          ) {\n            scrollTopButton.style.display = \"block\";\n          } else {\n            scrollTopButton.style.display = \"none\";\n          }\n        }\n\n        $(\"#scrollToTopButton\").click(function () {\n          $(\"html ,body\").animate({ scrollTop: 0 }, 800);\n        });\n      });\n    </script>\n    <script>\n      $(\".toggle-password\").click(function () {\n        $(this).toggleClass(\"fa-eye fa-eye-slash\");\n        if ($(\"#pass_signup\").attr(\"type\") == \"password\") {\n          $(\"#pass_signup\").attr(\"type\", \"text\");\n        } else {\n          $(\"#pass_signup\").attr(\"type\", \"password\");\n        }\n      });\n    </script>\n    <script>\n      function onSignIn(googleUser) {\n        document.location.href =\n          \"https://qazimaazarshad.github.io/Movie-Streaming-Website/home.html\";\n      }\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "movie-min.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>ApnaTheatre</title>\n\n    <!-- Font  -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n    <link rel=\"stylesheet\" href=\"static/bootstrap.min.css\">\n    <link rel=\"stylesheet\" href=\"static/style-min.css\">\n    <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n</head>\n\n<body>\n    <nav class=\"navbar navbar-default\">\n        <div class=\"container\">\n            <div class=\"navbar-header btn bg-danger\"><a href=\"home.html\" class=\"navbar-brand text-white\">ApnaTheatre</a></div>\n        </div>\n    </nav>\n    <div class=\"container\">\n        <div id=\"movie\" class=\"well\"></div>\n    </div>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\" integrity=\"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=\" crossorigin=\"anonymous\"></script>\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n    <script src=\"js/main-min.js\"></script>\n    <script>\n        getMovie();\n    </script>\n</body>\n\n</html>\n"
  },
  {
    "path": "movies.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n\n\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>ApnaTheatre | Web Series</title>\n\n  <!-- Font  -->\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n  <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n  <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\n    integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n    integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n    crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n  <link rel=\"stylesheet\" href=\"webStyle.css\">\n  \n\n<!------------------------Scroll to top button------------------------------------------------>\n<style>\n\n\n\n    #scrollToTopButton{\n  position: fixed;\n  bottom: 40px;\n  right: 25px;\n  font-size: 25px;\n  z-index: 99;\n  width: 50px;\n  height: 50px;\n  background-color:red;\n  color:black;\n  border: none;\n  cursor: pointer;\n  outline: none;\n  padding: 6px;\n  border-radius: 50%;\n  }\n  #scrollToTopButton:hover, i:hover {\n  background-color:white;\n  color:red;\n  }\n  #nav:hover\n{\n  background-color:#e60e23!important;\n\n}\n.carousel-inner{\n  cursor: pointer;\n}\n\n.nav-item :hover{\n  margin-bottom: 10px;\n  \n  \n}\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n\n    .logo {\n  width: 110px;\n  height: 90px;\n  padding: 3px;\n  margin: 0;\n  padding: 0;\n}\n.fas:hover{background: none!important ;}\n.nav-item{ flex-wrap:wrap;}\n.menu li a:hover {\n  color: red !important;\n  opacity: 0.5;\n}\n.navbar-nav{\n  display: flex;\n  align-items: center;\n  padding: 0px 7.5px;\n}\n\n/* CSS FOR FOOTER */\n.footer{\nmargin-bottom:15px;\nfont-family: Verdana, Geneva, Tahoma, sans-serif;\n}\n.footer-content{\n  display:flex;\n  justify-content:space-between;\n  padding: 10px 20px;\n}\n.footer-logo{\n  width: 150px;\n  height: 120px;\n  padding: 3px;\n  margin:0px 0px 0px 10px;\n  padding: 0;\n}\n.footer-heading{\n  color:white;\n}\n.footer-left, .footer-right, .footer-middle{\ntext-align:center;\n}\n.icons{\n  margin-left:-30px;\n}\n.footer-links i{\nfont-size:30px;\nwidth:40px;\npadding:5px;\nheight:40px;\nmargin-top:30px;\n}\n.footer-middle a i:hover{\nbackground-color:white;\nborder-radius:50px;\ncolor:red;\n}\n.footer-middle-list-item{\nlist-style:none;\nfont-size:15px;\nfont-family:cursive;\nmargin:5px 0px 0px 15px;\ntext-align:left;\n}\n.footer-middle-list-item a{\ntext-decoration:none;\ncolor:white;\n}\n.footer-middle-list-item a:hover{\ncolor:red;\n}\n.footer-right{\n  margin-top:-15px;\n}\n.footer-contact-button{\nfont-size:20px;\nbackground-color:red;\ncolor:black;\npadding:10px;\nborder:none;\nborder-radius:10px;\ntext-decoration:none;\n}\n.footer-contact-button:hover{\nbackground-color:white;\ncolor:red;\n}\n.footer-bottom-tagline{\ncolor:white;\nfont-size:15px;\nfont-family:cursive;\nmargin-bottom:25px;\n}\n\n\n.footer-copyright{\ntext-align:center;\ncolor:white;\nmargin-top:20px;\nfont-size:18px;\n}\n.footer-hr{\n    color:grey;\n    font-weight:bold;\n}\n/* .footer-right a:hover{transform:scale(1.1); -webkit-transform:scale(1.1);} */\n\n/***************** Media Queries *********************/\n\n@media (max-width: 600px) {\n.footer-content{\n   display:block;\n   text-align:center;\n}\n.footer-middle-list-item{\n  text-align:center;\n  margin-left:-20px;\n}\n\n.footer-left, .footer-middle, .footer-right{\n  margin-top:50px;\n}\n}\n\n#waterdrop {\n  height: 30px;\n}\n\n#waterdrop canvas {\n  bottom: -70px !important;\n}\n#header-nav .nav-link {\n  color: white;\n  font-size: 20px;\n  margin-left: 20px;\n}\n    @media only screen and (max-width: 1400px){\n  #header-nav .nav-link {\n    color: white;\n    font-size: 18px;\n    margin-left: 18px;\n  }\n}\n\n@media only screen and (min-width: 1133px) and (max-width: 1275px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n}\n@media only screen and (min-width: 1035px) and (max-width: 1132px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n  #searchText{\n    width: 120px;\n  }\n  #submitBtn{\n    width: 60px;\n    display: flex;\n    justify-content: center;\n  }\n}\n@media only screen and (min-width: 993px) and (max-width: 1034px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 14px;\n    margin-left: 10px;\n  } \n\n#searchText{\n  width: 100px;\n}\n#submitBtn{\n  width: 50px;\n  display: flex;\n  justify-content: center;\n}\n}\n@media only screen and (max-width: 531px) {\n  .poster {\n  margin: 50px auto !important;\n  width: 230px !important;\n}\n}\n\n.poster {\n  margin: 50px 20px;\n}\n</style>    \n\n\n</head>\n\n<body style=\"background-color:black;\" color=\"height:auto;\">\n\n\n    <div class=\"scroll-bar\">\n    <!-- navbar starts -->\n\n    <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n      <div class=\"container-fluid\">\n        <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n            height=\"24\"></a>\n        <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n          data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n          <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n        </button>\n        \n        <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n          <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n            <li class=\"nav-item\">\n              <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"tv.html\">TV</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n            </li>\n            \n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n            </li>\n            <li>\n              <!-- Genre dropdown starts-->\n              <div>\n                <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                    <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                        Genres\n                    </button>\n                    <div class=\"dropdown-content\" style=\"color: white;\">\n                        <a href=\"popular.html\">Popular</a>\n                        <a href=\"crime.html\">Crime</a>\n                        <a href=\"suspense.html\">Suspense & Thriller</a>\n                        <a href=\"action.html\">Action</a>\n                        <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                        <a href=\"documentary.html\">Documentary</a>\n                        <a href=\"horror.html\">Horror</a>\n                        <a href=\"drama.html\">Drama</a>\n                        <a href=\"war.html\">War & Politics</a>\n                        <a href=\"comedy.html\">Comedy</a>\n                        <a href=\"romance.html\">Romance</a>\n                        <a href=\"anime.html\">Anime</a>\n                      </div>\n                </div>\n              </div>\n              <!-- Genre dropdown ends-->\n            </li>\n            <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n              <li>\n                <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n              </li>\n            </div>\n          </ul>\n          <form id=\"searchForm\" class=\"d-flex\">\n            <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n            <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n          </form>\n        </div>\n      </div>\n      </nav>\n\n        <!-- navbar ends -->\n\n        <!--Carousel Slider-->\n\n    <div class=\"main-content\">\n\n        <div id=\"carouselExampleControls\" class=\"carousel slide\" data-bs-ride=\"carousel\">\n          <div class=\"carousel-inner\">\n            <div class=\"carousel-item active\">\n              <img src=\"./Images/msd3.jpg\"  height=\"540\" class=\"d-block w-100\" alt=\"...\">\n            </div>\n            <div class=\"carousel-item\">\n              <img src=\"./Images/yjhd2.jpg\" height=\"540\"  class=\"d-block w-100\" alt=\"...\">\n            </div>\n            <div class=\"carousel-item\">\n              <img src=\"./Images/vlht2.jpg\" height=\"540\"  class=\"d-block w-100\" alt=\"...\">\n            </div>\n            <div class=\"carousel-item\">\n              <img src=\"./Images/Idiots.png\" height=\"540\"  class=\"d-block w-100\" alt=\"...\">\n            </div>\n            <div class=\"carousel-item\">\n              <img src=\"./Images/ckd2.jpg\" height=\"540\"  class=\"d-block w-100\" alt=\"...\">\n            </div>\n          </div>\n          <a class=\"carousel-control-prev\" href=\"#carouselExampleControls\" role=\"button\" data-bs-slide=\"prev\">\n            <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n            <span class=\"visually-hidden\">Previous</span>\n          </a>\n          <a class=\"carousel-control-next\" href=\"#carouselExampleControls\" role=\"button\" data-bs-slide=\"next\">\n            <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n            <span class=\"visually-hidden\">Next</span>\n          </a>\n        </div>\n\n      </div>\n        <div class=\"row poster\">\n            <div class=\"container\">\n                <div id=\"movies\" class=\"row\"></div>\n            </div>\n            <hr>\n            <div class=\"row\">\n                <h3 class=\"section-title text-center\">Popular</h3>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/msdhoni.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">MS Dhoni</h5>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 8.5 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/ye jawani.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Yeh Jawani Hai Deewani</h5>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/Idiots.png\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">3 Idiots</h5>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> IMDb 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/bb.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Bajrangi Bhaijan</h5>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> IMDb 8.7 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/ppw.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Pati Patni Aur Woh</h5>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n\n\n             <div class=\"row poster\">\n            <div class=\"row\">\n                <h3 class=\"section-title text-center\">Top Picks For You</h3>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/holiday.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Holiday</h5>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/ett.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Ek Tha Tiger</h5>\n                        \n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/pdm.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Padmavati</h5>\n                        \n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/stoy.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Student Of The Year</h5>\n                \n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/race.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Race 2</h5>\n                       \n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 7.4 / 10</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n            </div>\n            <div class=\"row poster\">\n            <div class=\"row\">\n                <h3 class=\"section-title text-center\">Featured</h3>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/aaam.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Andaz Apna Apna</h5>\n                        \n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/ckdm.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Chakde India</h5>\n                       \n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/bmb.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Bhag Milkha Bhag</h5>\n                       \n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/gow.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Gangs Of Wasseypur</h5>\n                        \n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> IMDb 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/dsm.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Drishyam</h5>\n                        \n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n\n\n\n\n    </div>\n\n       </div>\n            <div class=\"row poster\">\n            <div class=\"row\">\n                <h3 class=\"section-title text-center\">Comedy</h3>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/cc.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Chichore</h5>\n                        \n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/m.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Phir Hera Pheri</h5>\n                       \n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/gn.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Good Newwz</h5>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/welc.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Welcome</h5>\n                        \n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> IMDb 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/golmaal.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Golmaal 3</h5>\n                        \n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n\n                    </div>\n                </div>\n            </div>\n        </div></div>\n\n\n   <div class=\"row poster\">\n            <div class=\"row\">\n                <h3 class=\"section-title text-center\">Romance</h3>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/rl.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Goliyon ki Raasleela- Ram Leela</h5>\n                        \n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/ks.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Kabir Singh</h5>\n                       \n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/ts.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">2 States</h5>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/adhm.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Ae Dil Hai Mushkil</h5>\n                        \n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> IMDb 9 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/stk.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Sanam Teri Kasam</h5>\n                        \n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n\n    </div>\n    <!-------------------------------Footer-------------------------------->\n    <footer class=\"footer\">\n      <hr class=\"footer-hr\">\n      <div class=\"footer-content\">\n        <div class=\"footer-left\">\n          <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n              height=\"24\"></a>\n          <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n        </div>\n        <div class=\"footer-middle\">\n          <h2 class=\"footer-heading\">Follow Us</h2>\n          <ul class=\"footer-middle-list icons\">\n            <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i\n                class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i\n                class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i\n                class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i\n                class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i\n                class=\"fab fa-github github\" style=\"color:red\"></i></a>\n          </ul>\n        </div>\n        <div class=\"footer-middle\">\n          <h2 class=\"footer-heading\">Services</h2>\n          <ul class=\"footer-middle-list\">\n            <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n            <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n          </ul>\n        </div>\n        <div class=\"footer-middle\">\n          <h2 class=\"footer-heading\">Try Our App</h2>\n          <ul class=\"footer-middle-list icons\">\n            <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n            <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n          </ul>\n        </div>\n        <div class=\"footer-right\">\n          <p class=\"footer-links\">\n          <h2 class=\"footer-heading\">Contact Us</h2>\n          <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n          <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n          </p>\n        </div>\n      </div>\n      <hr class=\"footer-hr\">\n      <div class=\"footer-copyright\">\n        <p>Copyright &copy; and &reg; Since\n          <script>\n            document.write(new Date().getFullYear())\n          </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)\n        </p>\n      </div>\n    </footer>\n\n    <!----------------------scroll back to top button-->\n    <button id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\">\n      <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\"></i>\n    </button>\n    <script>\n      $(document).ready(function () {\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n        window.onscroll = function () { scrollFunction() };\n\n        function scrollFunction() {\n          if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n            scrollTopButton.style.display = \"block\";\n          } else {\n            scrollTopButton.style.display = \"none\";\n          }\n        }\n\n        $(\"#scrollToTopButton\").click(function () {\n          $('html ,body').animate({ scrollTop: 0 }, 800)\n        });\n      });\n    </script>\n<script>\n  function logout(){\n    window.location.replace(\"login.html\");\n  }\n  </script>\n    <!-- footer scripts -->\n\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n    <script src=\"js/main-min.js\"></script>\n\n    <script>\n      jQuery('#waterdrop').raindrops({\n        color: '#292c2f',\n        canvasHeight: 150,\n        density: 0.1,\n        frequency: 20\n      });\n    </script>\n    <!-- bootsstrap JS -->\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\"\n      integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\"\n      crossorigin=\"anonymous\"></script>\n    <script src=\"./static/script.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "news.html",
    "content": "<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n  <meta charset=\"utf-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width\">\r\n  <title>ApnaTheatre</title>\r\n  <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\r\n\r\n  <!-- Font  -->\r\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\r\n\r\n  <!-- Bootstrap CSS -->\r\n  <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\r\n    integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\r\n  <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\r\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\r\n    integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\r\n    crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\r\n  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\r\n\r\n  <link rel=\"stylesheet\" href=\"static/bootstrap.min.css\">\r\n  <link rel=\"stylesheet\" href=\"static/style-min.css\">\r\n  <link rel=\"stylesheet\" href=\"cards.css\">\r\n\r\n</head>\r\n<style>\r\n    body{\r\n        background-color: black;\r\n    }\r\n    .maincontainer {\r\n      padding: 30px;\r\n    }\r\n    .newsImg{\r\n        min-width: 200px;\r\n        min-height: 275px;\r\n        max-width: 200px;\r\n        max-height: 275px;\r\n        margin-left: 6px;\r\n    }\r\n    .singleNewsComponent{\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n    }\r\n    .desc{\r\n        margin: 8px;\r\n        font-size: 16px;\r\n    }\r\n    .descContainer {\r\n      padding: 10px;\r\n    }\r\n    .newsTitle{\r\n        color: white;\r\n    }\r\n    #scrollToTopButton {\r\n    position: fixed;\r\n    bottom: 40px;\r\n    right: 25px;\r\n    font-size: 25px;\r\n    z-index: 99;\r\n    width: 50px;\r\n    height: 50px;\r\n    background-color: red;\r\n    color: black;\r\n    border: none;\r\n    cursor: pointer;\r\n    outline: none;\r\n    padding: 6px;\r\n    border-radius: 50%;\r\n  }\r\n\r\n#scrollToTopButton:hover,i:hover {\r\n    background-color: white;\r\n    color: red;\r\n  }\r\n\r\n  .nav-item :hover{\r\n  margin-bottom: 10px;\r\n  \r\n  \r\n}\r\n#header-nav .navbar-nav .nav-item .nav-link:hover {\r\n  color: red;\r\n  text-decoration: none; /* Remove underline */\r\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\r\n  text-shadow: 0 0 10px red; /* Add glowing effect */\r\n}\r\n</style>\r\n<body>\r\n    <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\r\n        <div class=\"container-fluid\">\r\n          <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\r\n              height=\"24\"></a>\r\n          <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\r\n            data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n            <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\r\n          </button>\r\n          \r\n          <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\r\n            <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\r\n              </li>\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" href=\"movies.html\">Movies</a>\r\n              </li>\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\r\n              </li>\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" href=\"kids.html\">Kids</a>\r\n              </li>\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" href=\"tv.html\">TV</a>\r\n              </li>\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" href=\"premium.html\">Premium</a>\r\n              </li>\r\n        \r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\r\n              </li>\r\n              <li>\r\n                <!-- Genre dropdown starts-->\r\n                <div>\r\n                  <div class=\"dropdown\" style=\"position: relative; disPlay: inline-block; padding-top: 5px; padding-left: 15px;\">\r\n                      <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\r\n                          Genres\r\n                      </button>\r\n                      <div class=\"dropdown-content\" style=\"color: white;\">\r\n                          <a href=\"popular.html\">Popular</a>\r\n                          <a href=\"crime.html\">Crime</a>\r\n                          <a href=\"suspense.html\">Suspense & Thriller</a>\r\n                          <a href=\"action.html\">Action</a>\r\n                          <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\r\n                          <a href=\"documentary.html\">Documentary</a>\r\n                          <a href=\"horror.html\">Horror</a>\r\n                          <a href=\"drama.html\">Drama</a>\r\n                          <a href=\"war.html\">War & Politics</a>\r\n                          <a href=\"comedy.html\">Comedy</a>\r\n                          <a href=\"romance.html\">Romance</a>\r\n                          <a href=\"anime.html\">Anime</a>\r\n                        </div>\r\n                  </div>\r\n                </div>\r\n                <!-- Genre dropdown ends-->\r\n              </li>\r\n              <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\r\n                <li>\r\n                  <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\r\n                </li>\r\n              </div>\r\n            </ul>\r\n            <form id=\"searchForm\" class=\"d-flex\">\r\n              <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\r\n              <button class=\"btn btn-danger\" type=\"submit\">Search</button>\r\n            </form>\r\n          </div>\r\n        </div>\r\n        </nav>\r\n        <div class=\"maincontainer\">\r\n            <h2>COMING SOON</h2>\r\n            <hr>\r\n            <div class=\"container\">\r\n                <div id=\"movies\" class=\"row\"></div>\r\n            </div>\r\n            <hr>\r\n            <div class=\"newsContentWrapper\">\r\n                <div class=\"singleNewsComponent\">\r\n                    <img class=\"newsImg\" src=\"./Images/LOVE Victor.jpg\" alt=\"\">\r\n                    <div class=\"descContainer\">\r\n                        <h4 class=\"newsTitle\" >Love, Victor is coming back at ApnaTheatre.</h4>\r\n                        <p class=\"desc\">\r\n\r\n                            The Disney-backed streamer has renewed the coming-of-age comedy and Love, Simon offshoot for a third season. The news comes a month and a half after the series starring Michael Cimino returned for its second season.\r\n                            \r\n                            ApnaTheatre, like other streamers, does not release traditional viewership data. Still, the series from This Is Us co-showrunners Isaac Aptaker and Elizabeth Berger — who wrote the screenplay for Love, Simon — has maintained a strong audience reaction. Season two has a 100 percent rating among critics and 92 percent score with viewers on RottenTomatoes.com. The LGBTQ-themed series focuses on Victor (Cimino) starting his junior year in high school and navigating his coming out with being a star athlete. Rachel Hilson, Anthony Turpel, Bebe Wood, Mason Gooding, George Sear, Isabella Ferreira, Mateo Fernandez, James Martinez and Ana Ortiz round out the cast.\r\n                            The series hails from 20th Television, where Aptaker and Berger are under an overall deal. The duo have the final season of NBC’s This Is Us in the works and are also showrunning ApnaTheatre's How I Met Your Father, starring Hilary Duff.\r\n                            Love, Victor is part of a roster of scripted originals at ApnaTheatre that also includes Dollface, The Great, PEN15, Ramy, Shrill, Woke and such upcoming series as Dopesick, The Dropout, Nine Perfect Strangers and Only Murders in the Building, among scores more as the streamer continues to bulk up to compete for subscribers and eyeballs in the streaming wars</p>\r\n                    </div>\r\n                    \r\n                </div>\r\n                <hr>\r\n                <div class=\"singleNewsComponent\">\r\n                    <img class=\"newsImg\" src=\"./Images/The_Suicide_Squad_official_poster.jpeg\" alt=\"\">\r\n                    <div class=\"descContainer\">\r\n                        <h4>The Suicide Squad cast, release date, trailer and everything you need to know</h4>\r\n                        <p class=\"desc\">The reviews are in, and The Suicide Squad will be here very soon to wipe away any lingering bad memories of the 2016 movie, which was confusingly called Suicide Squad.\r\n\r\n                            James Gunn's DC reboot and sort-of sequel to that critically-derided first movie was completed in February 2021, and it's now just a case of waiting to see what is one of the most-anticipated movies of the year.\r\n                            \r\n                            Why? Because Gunn has revealed he was allowed to make \"every single choice\" and Warner Bros let him: \"They gave very few notes – they were usually good and minor and I took them if I wanted to and didn't if I didn't want to. Warners was creatively amazing.\"\r\n                            A creatively-free Gunn is a very exciting prospect when it comes to DC's collection of anti-heroes, so we can expect the same magic he showed with both Guardians of the Galaxy movies – only it's lots more violent.\r\n    \r\n                            Gunn has also not been constricted in following on from the first movie: \"Um, it's its own thing. It does not contradict the first movie, I don't think. It might in some small ways… I don't know...\"\r\n                            \r\n                            But who cares about continuity when what Gunn has crafted looks so much fun? The movie combines new characters with returning favourites like Margot Robbie's Harley Quinn and Viola Davis's Amanda Waller.\r\n                            \r\n                            But who are those new characters and what can we expect from Gunn's take on the DC anti-hero squad? Here's everything you need to know about The Suicide Squad.\r\n                            Gunn revealed the stellar cast for The Suicide Squad in September 2019, including the returning Margot Robbie, Jai Courtney, Joel Kinnaman and Viola Davis as Harley Quinn, Captain Boomerang, Rick Flag and Amanda Waller respectively.</p>\r\n                    </div>\r\n                    </div>\r\n                   \r\n                <hr>\r\n                <div class=\"singleNewsComponent\">\r\n                    <img class=\"newsImg\" src=\"/Images/Shershaah.jpg\" alt=\"\">\r\n                    <div class=\"descContainer\">\r\n                        <h4>Sidharth Malhotra: 'Hope Shershaah inspires the youth, the way Vikram Batra did'</h4>\r\n                    <p class=\"desc\">Sidharth Malhotra has said that he hopes his upcoming ApnaTheatre Video film, Shershaah, inspires the youth just the way Captain Vikram Batra did. In an interview with Hindustan Times, Sidharth talked about playing the Kargil war hero, his first impression of Vikram and more. Remembering the 1999 Kargil war, Sidharth Malhotra said, \"When the Kargil war was actually happening in 1999, I was 13 or 14 and I vaguely remember the interviews on television. The iconic Vikram Batra interview when he said 'Yeh Dil Maange More'. It was a surreal experience, after so many years, to come and shoot this film. At that time, it was difficult to comprehend what I was watching on television. Now, after so many years....to see up close, and in detail, what the army does. The sacrifices they make, the difficulties they face, the life they lead for us to have this kind of freedom. I have immense respect for the armed forces.\" The actor also talked about getting to know Param Vir Chakra receipient Vikram Batra. \"I have seen both sides of him, met his friends and family. The way they talk about him, how endearing he was. He wanted to experience so many things and was so full of life. But he chose to give up all of it for his duty. Just to do his duty, till his last breath. That takes a different mind set, a different kind of training. The Indian army is one of the best armies in the world. Vikram Batra's heroic actions took the legacy further, and we hope with Shershaah, the legacy lives further on. Hopefully the film inspires many other youth like he did.\"</p>\r\n                </div>\r\n                </div>\r\n                <hr>\r\n                <div class=\"singleNewsComponent\">\r\n                    <img class=\"newsImg\" src=\"./Images/kota.jpg\" alt=\"\">\r\n                    <div class=\"descContainer\">\r\n                        <h4>Kota Factory season 2: TVF’s Kota Factory moves to ApnaTheatre. Here’s everything we know about the second season.</h4>\r\n                        <p class=\"desc\">Kota Factory is one of the top-rated Indian web series on IMDb. Ever since the conclusion of the first season, the fans are eagerly waiting for updates on the second season of the show. Well, there is big news for the fans out there. The web series is indeed coming with its next season and there is big news for the fans out there. The show produced by TVF is moving to ApnaTheatre for the coming season. Streaming giant ApnaTheatre on Mar 3, 2021, announced its complete slate for 2021 and surprised everyone as Kota Factory was there in the list of 41 titles announced. Now that it is confirmed that the second season is coming in 2021, the excitement of the fans has no bounds. As we get ready, here is everything you need to know about Kota Factory season 2. Now it is confirmed that season 2 is coming in 2021. Though ApnaTheatre hasn’t announced the exact release date, I believe that season two would release in the second quarter of 2021. Well, TVF has just concluded the first season of Aspirants which is also set in the education universe. So, the VOD platform would consider at least a 3-4 months gap. Well, you have no need to worry, we will update this post as soon as ApnaTheatre announces the release date.\r\n\r\n                            The first season of Kota Factory is available on TVF Play and YouTube. With an IMBb rating of 9.2, it is one of the top-rated Indian web shows. We recommend you watch it if you haven’t yet.</p>\r\n                    </div>\r\n                    </div>\r\n                <hr>\r\n                <div class=\"singleNewsComponent\">\r\n                    <img class=\"newsImg\" src=\"./Images/family_man.jpg\" alt=\"\">\r\n                    <div class=\"descContainer\">\r\n                        <h4>The Family Man season 3 story is ready: Manoj Bajpayee hints at how long fans will have to wait</h4>\r\n                        <p class=\"desc\">Manoj Bajpayee has hinted at how long fans of The Family Man might have to wait for the third season. Season two of the spy series premiered recently on ApnaTheatreVideo. The final scene of The Family Man season two teased what the third season could possibly have in store for fans. It has since been confirmed that the upcoming season will be set during the coronavirus pandemic, and now, star Manoj Bajpayee has provided an estimated timeline about just how long fans might have to wait. Season two of The Family Man debuted on ApnaTheatre Video on June 4 and has been received enthusiastically by fans and critics. It ends with a tease about season three, and the conflict at its centre, which seems to have a China connection. In an interview with Bollywood Bubble, Manoj, who plays secret agent Srikant Tiwari in the show, said that there is no writers room in place currently, as a lockdown is in effect. \"Everyone is locked up. Let the world open, let this country open fully. And when they start working... I'm very sure they will be taking it forward with Amazon. When it is greenlit they will start turning the story into a screenplay, because the story is with them, that is ready.\"</p>\r\n                    </div>\r\n                    </div>\r\n                <hr>\r\n                <div class=\"singleNewsComponent\">\r\n                    <img class=\"newsImg\" src=\"./Images/mirzapur.jpg\" alt=\"\">\r\n                    <div class=\"descContainer\">\r\n                        <h4>Mirzapur Season 3 Release Date, Cast, Plot, and Everything We Know</h4>\r\n                        <p class=\"desc\">It is officially announced that Mirzapur Season 3 will come.  \r\n                            The web series Mirzapur became the most-watched web series. After this, Mirzapur Season 3 was announced. Mirzapur Season 2 was ended with large suspense, and it will be revealed in the upcoming Mirzapur Season 3. In Mirzapur Season 2, in the end, we have seen that Golu and Guddu have shot Munna Tripathi. Munna Tripathi was in the lead role of the web series Mirzapur. Sharad Shukla has saved the life of Kaleen Bhaiya. He did it because of some reason. Maybe Sharad Shukla and Kaleen Bhaiya will unite together and make the team kill Golu and Guddu.\r\n\r\n                            Kaleen Bhaiya will take revenge from Golu and Guddu because they have killed their son. Mirzapur Season 3 will include more violence compared to Mirzapur Season 2 and 1.\r\n                            \r\n                            We have seen that the last fight was happened because of Beena. She gave the location and planned to kill Munna and Kaleen Bhaiya, and on the other side, Maqbool has killed Satyanand Tripathi, aka Bauji.\r\n                            \r\n                            So, there will be one team of Sharad Shukla and Kaleen Bhaiya, and on the opposite, Beena, Golu, and Guddu. So, we expect that there will be the biggest fight ever in the web series Mirzapur Season 3. Mirzapur Season 3 will be released somewhere in 2022. The release date is not announced yet. If we talk about the cast of Mirzapur Season 3, we can say that almost all the characters who are alive at the end of Mirzapur Season 2 will return in Season 3.\r\n\r\n                            The cast and characters of Mirzapur Season 3 will include Pankaj Tripathi as Akhandanand “Kaleen Bhaiya” Tripathi, Ali Fazal as Govind “Guddu” Pandit, Shahnawaz Pradhan as Parshuram Gupta, Rajesh Tailang as Ramakant Pandit, Sheeba Chadda as Vasudha Pandit, Shweta Tripathi as Gajgamini “Golu” Gupta, Rasika Dugal as Beena Tripathi, Harshita Gaur as Dimpy Pandit, Shaji Chaudhary as Maqbool Khan, Anjum Sharma as Sharad Shukla, Pramod Pathak as J. P. Yadav, Isha Talwar as Madhuri Yadav Tripathi, Shernavaz Jijina as Shabnam, and Lilliput as Devdett ‘Dadda’ Tyagi.  \r\n                            We expect that the series Mirzapur Season 3 will be released in late 2021 or early 2022. There is no official update about the release date of Mirzapur Season 3. The exact release date of Mirzapur Season 3 will soon reveal.</p> \r\n                    </div>\r\n                    </div>\r\n                <hr>\r\n                <div class=\"singleNewsComponent\">\r\n                    <img class=\"newsImg\" src=\"./Images/Rudra.jpg\" alt=\"\">\r\n                    <div class=\"descContainer\">\r\n                        <h4>Ajay Devgn drops motion poster of debut web series Rudra, remake of Idris Elba's Luther</h4>\r\n                        <p class=\"desc\">Ajay Devgn is all set for his digital debut with Disney+Hotstar VIP's Rudra - The Edge of Darkness. The actor dropped the motion poster of the crime series today (April 20). Rudra is the remake of British psychological crime drama, Luther, starring Idris Elba. Ajay Devgn took to Twitter to share the motion poster of Rudra - The Edge of Darkness. He captioned it, \"Happy to announce the crime thriller of the year Hotstar Specials 'Rudra - The Edge Of Darkness'. This one’s going to be ‘killer’ @DisneyplusHSVIP Winking face #DebutDobara #Rudra @ApplauseSocial @BBCStudiosIndia @nairsameer (sic).\" Speaking about his digital debut, Aja Devgn said in a statement, \"My attempt has always been to tell unique stories and work with good talent. The idea is to raise the bar of entertainment in India. The digital world excites me, and I am looking forward to working with Applause and BBC to bring this series to life on Disney+ Hotstar VIP.\" He further added, \"Rudra - The Edge of Darkness is a compelling and highly intriguing story and I can't wait to begin this new journey! Playing a cop on screen is not new to me, but this time the character is more intense, complex and dark. What drew me most to his persona, is that he is possibly the greyest character you may come across in recent times.\" The Hotstar Specials series will soon go into production. It will be shot across Mumbai. The crime-drama will be produced by Applause Entertainment in association with BBC Studios India.</p> \r\n                    </div>\r\n                    </div>\r\n                <hr>\r\n                <div class=\"singleNewsComponent\">\r\n                    <img class=\"newsImg\" src=\"./Images/fast and furious 9.jpg\" alt=\"\">\r\n                    <div class=\"descContainer\">\r\n                        <h4>Fast & Furious 9 India Release Date Delayed to August 19</h4>\r\n                        <p class=\"desc\">Fast & Furious 9's India release date has been delayed by two weeks, Universal Pictures announced on Wednesday afternoon. The latest chapter in The Fast Saga is now due Thursday, August 19 in Indian cinemas, instead of the earlier Thursday, August 5 date. The new August 19 release date for Fast & Furious 9 comes as part of a two-month slate announcement from NBCUniversal, the parent company of Universal Pictures. Alongside, we have Oscar-winning Promising Young Woman on August 6, M. Night Shyamalan's Old on August 13, Bob Odenkirk-led Nobody and animated sequel The Croods: A New Age on August 27, animated sequel The Boss Baby: Family Business on September 10, and the dystopian follow-up The Forever Purge on September 17.\r\n\r\n                            All of these seven Universal Pictures titles have already been released in theatres globally. The Croods: A New Age released all the way back in November last year, and Promising Young Woman came out last Christmas in the US. Nobody released on March 26 in the US — it was slated to premiere in India on April 9, but it was pulled due to COVID-19. Fast & Furious 9 released June 25 in the US. Following a 45-day theatrical window, F9 is expected in early August on video-on-demand in the US, which could hurt its India box office chances even more. Both The Forever Purge and The Boss Baby: Family Business released July 2 in the US, with the latter also on streaming service Peacock. Old is the latest title here, having premiered July 23 in American cinemas.</p> \r\n                    </div>\r\n                    </div>\r\n                <hr>\r\n            </div>\r\n            <footer class=\"footer\">\r\n              <hr class=\"footer-hr\">\r\n              <div class=\"footer-content\">\r\n                <div class=\"footer-left\">\r\n                  <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\r\n                      height=\"24\"></a>\r\n                  <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\r\n                </div>\r\n                <div class=\"footer-middle\">\r\n                  <h2 class=\"footer-heading\">Follow Us</h2>\r\n                  <ul class=\"footer-middle-list icons\">\r\n                    <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i\r\n                        class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\r\n                    <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i\r\n                        class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\r\n                    <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i\r\n                        class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\r\n                    <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i\r\n                        class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\r\n                    <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i\r\n                        class=\"fab fa-github github\" style=\"color:red\"></i></a>\r\n                  </ul>\r\n                </div>\r\n                <div class=\"footer-middle\">\r\n                  <h2 class=\"footer-heading\">Services</h2>\r\n                  <ul class=\"footer-middle-list\">\r\n                    <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\r\n                    <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\r\n                    <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\r\n                    <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\r\n                    <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\r\n                    <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\r\n                  </ul>\r\n                </div>\r\n               <div class=\"footer-middle\">\r\n                        <h2 class=\"footer-heading\">Try Our App</h2>\r\n                        <ul class=\"footer-middle-list icons\">\r\n                            <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\r\n                            <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\r\n                        </ul>\r\n                    </div>\r\n                <div class=\"footer-right\">\r\n                  <p class=\"footer-links\">\r\n                  <h2 class=\"footer-heading\">Contact Us</h2>\r\n                  <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\r\n                  <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\r\n                  </p>\r\n                </div>\r\n              </div>\r\n              <hr class=\"footer-hr\">\r\n              <div class=\"footer-copyright\">\r\n                <p>Copyright &copy; and &reg; Since\r\n                  <script>\r\n                    document.write(new Date().getFullYear())\r\n                  </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)\r\n                </p>\r\n              </div>\r\n            </footer>\r\n        \r\n            <!----------------------scroll back to top button-->\r\n            <button id=\"scrollToTopButton\" title=\"Go to top\">\r\n              <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\"></i>\r\n            </button>\r\n            <script>\r\n              $(document).ready(function () {\r\n                var scrollTopButton = document.getElementById(\"scrollToTopButton\");\r\n                window.onscroll = function () { scrollFunction() };\r\n        \r\n                function scrollFunction() {\r\n                  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\r\n                    scrollTopButton.style.display = \"block\";\r\n                  } else {\r\n                    scrollTopButton.style.display = \"none\";\r\n                  }\r\n                }\r\n        \r\n                $(\"#scrollToTopButton\").click(function () {\r\n                  $('html ,body').animate({ scrollTop: 0 }, 800)\r\n                });\r\n              });\r\n            </script>\r\n        \r\n            <!-- footer scripts -->\r\n        \r\n            <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\r\n            <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\r\n            <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\r\n            <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\r\n            <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\r\n            <script src=\"js/main-min.js\"></script>\r\n        \r\n            <script>\r\n              jQuery('#waterdrop').raindrops({\r\n                color: '#292c2f',\r\n                canvasHeight: 150,\r\n                density: 0.1,\r\n                frequency: 20\r\n              });\r\n            </script>\r\n            <script>\r\n              function logout(){\r\n                window.location.replace(\"login.html\");\r\n              }\r\n\r\n\r\n              </script>\r\n            <!-- bootsstrap JS -->\r\n            <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\"\r\n              integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\"\r\n              crossorigin=\"anonymous\"></script>\r\n            <script src=\"./static/script.js\"></script>\r\n        </body>\r\n        \r\n        </html>\r\n        \r\n</body>\r\n</html>"
  },
  {
    "path": "popular.html",
    "content": "<!DOCTYPE html>\n<html>\n\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width\">\n    <title>ApnaTheatre.com</title>\n\n    <!-- Font  -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n    <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n\n\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n        integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n        crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n        <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n\n    <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n    <link rel=\"stylesheet\" href=\"static/bootstrap.min.css\">\n    <link rel=\"stylesheet\" href=\"static/style-min.css\">\n    <link rel=\"stylesheet\" href=\"cards.css\">\n\n</head>\n\n\n<!------------------------Scroll to top button------------------------------------------------>\n<style>\n  #scrollToTopButton{\nposition:fixed;\nbottom: 40px;\nright: 25px;\nfont-size: 25px;\nz-index: 99;\nwidth: 50px;\nheight: 50px;\nbackground-color:red;\ncolor:black;\nborder: none;\ncursor: pointer;\noutline: none;\npadding: 6px;\nborder-radius: 50%;\n}\n#scrollToTopButton:hover, i:hover {\nbackground-color:white;\ncolor:red;\n}\n#header-nav .nav-link {\n  color: white;\n  font-size: 20px;\n  margin-left: 20px;\n}\n    @media only screen and (max-width: 1400px){\n  #header-nav .nav-link {\n    color: white;\n    font-size: 18px;\n    margin-left: 18px;\n  }\n  #searchText{\n    width: 150px;\n  }\n}\n\n@media only screen and (min-width: 1133px) and (max-width: 1275px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n}\n@media only screen and (min-width: 1035px) and (max-width: 1132px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n  #searchText{\n    width: 120px;\n  }\n  #submitBtn{\n    width: 60px;\n    display: flex;\n    justify-content: center;\n  }\n}\n@media only screen and (min-width: 993px) and (max-width: 1034px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 14px;\n    margin-left: 10px;\n  } \n\n#searchText{\n  width: 100px;\n}\n#submitBtn{\n  width: 50px;\n  display: flex;\n  justify-content: center;\n}\n}\n\n.container {\n  text-align: center;\n}\n.nav-item :hover{\n  margin-bottom: 10px;\n  \n  \n}\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n</style>\n\n<body>\n    <div class=\"scroll-bar\">\n\n        <!-- navbar starts -->\n\n        <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n          <div class=\"container-fluid\">\n            <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n                height=\"24\"></a>\n            <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n              data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n              <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n            </button>\n            \n            <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n              <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n                <li class=\"nav-item\">\n                  <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"tv.html\">TV</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n                </li>\n                \n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n                </li>\n                <li>\n                  <!-- Genre dropdown starts-->\n                  <div>\n                    <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                        <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                            Genres\n                        </button>\n                        <div class=\"dropdown-content\" style=\"color: white;\">\n                            <a href=\"popular.html\">Popular</a>\n                            <a href=\"crime.html\">Crime</a>\n                            <a href=\"suspense.html\">Suspense & Thriller</a>\n                            <a href=\"action.html\">Action</a>\n                            <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                            <a href=\"documentary.html\">Documentary</a>\n                            <a href=\"horror.html\">Horror</a>\n                            <a href=\"drama.html\">Drama</a>\n                            <a href=\"war.html\">War & Politics</a>\n                            <a href=\"comedy.html\">Comedy</a>\n                            <a href=\"romance.html\">Romance</a>\n                            <a href=\"anime.html\">Anime</a>\n                          </div>\n                    </div>\n                  </div>\n                  <!-- Genre dropdown ends-->\n                </li>\n                <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                  <li>\n                    <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n                  </li>\n                </div>\n              </ul>\n              <form id=\"searchForm\" class=\"d-flex\">\n                <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n                <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n              </form>\n            </div>\n          </div>\n          </nav>\n    \n            <!-- navbar ends -->\n\n        <div class=\"maincontainer\">\n            <div class=\"container\">\n                <div id=\"movies\" class=\"row\"></div>\n            </div>\n            <hr>\n            <h2>Popular</h2>\n            <hr>\n            <div class=\"container\" id=\"Movies\">\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/breaking.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1 style=\"font-size: 35px;\">Breaking Bad</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2008</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">5</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.5</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Walter White, a chemistry teacher, discovers that he has cancer and decides to get into the meth-making business to repay his medical debts. \n                          His priorities begin to change when he partners with Jesse.</p>\n\n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin(){\n                              window.open(\"https://www.imdb.com/video/vi338798873?playlistId=tt0903747\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br><br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Breaking Bad</b>\n                          <br>\n                          IMDb - 9.5\n                      </div>\n                  </div>\n                </div>\n              \n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/mirzapur.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Mirzapur</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.4</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Akhandanand Tripathi made millions exporting carpets and became the mafia boss of Mirzapur. \n                          His son Munna, an unworthy, power-hungry heir, stops at nothing to continue his father's legacy.</p>\n\n                       \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin1()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin1(){\n                              window.open(\"https://www.imdb.com/video/vi2155985433\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br> <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Mirzapur</b>\n                          <br>\n                          IMDb - 8.4\n                      </div>\n                  </div>\n                </div>\n              \n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/money.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Money Heist</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2017</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.3</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">A criminal mastermind who goes by \"The Professor\" has a plan to pull off the biggest heist in recorded history -- \n                          to print billions of euros in the Royal Mint of Spain. </p>\n\n                     \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin2()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin2(){\n                              window.open(\"https://www.imdb.com/video/vi3823876889\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br> <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Money Heist</b>\n                          <br>\n                          IMDb - 8.3\n                      </div>\n                  </div>\n                </div>\n              \n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/wanda.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Wanda Vision</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2021</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Living idealized suburban lives, super-powered beings Wanda and Vision begin to suspect that everything is not as it seems.</p>\n\n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin3()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin3(){\n                              window.open(\"https://www.imdb.com/video/vi3485450265?playlistId=tt9140560&ref_=tt_pr_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br><br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Wanda Vision</b>\n                          <br>\n                          IMDb - 8\n                      </div>\n                  </div>\n                </div>\n              \n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/tvf.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Pitchers</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2015</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.1</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">TVF Pitchers is a web series created by The Viral Fever and developed by Arunabh Kumar.</p>\n\n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin4()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin4(){\n                              window.open(\"https://www.imdb.com/video/vi2803612441?playlistId=tt4742876&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Pitchers</b>\n                          <br>\n                          IMDb - 9.1\n                      </div>\n                  </div>\n                </div>\n              \n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/luci.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Lucifier</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2016</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">5</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.1</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Based on characters created by Neil Gaiman, Sam Kieth and Mike Dringenberg, \n                          this series follows Lucifer, the original fallen angel, who has become dissatisfied with his life in hell.</p>\n\n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin5()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin5(){\n                              window.open(\"https://www.imdb.com/video/vi3234640665\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Lucifier</b>\n                          <br>\n                          IMDb - 8.1\n                      </div>\n                  </div>\n                </div>\n              \n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/upsc.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Aspirants</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2021</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.7</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Aspirants is a 2021 Indian Hindi-language coming-of-age web series produced by The Viral Fever and created by Arunabh Kumar and Shreyansh Pandey, \n                          written by Deepesh Sumitra Jagdish and was directed by Apoorv Singh Karki. </p>\n\n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin6()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin6(){\n                              window.open(\"https://www.imdb.com/video/vi4169842713\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br><br>\n                        <button class=\"btn_i b4_i\" onclick=\"openMovieWin6()\">▶Play</button>\n                        </div>\n                        <script type=\"text/javascript\">\n                            function openMovieWin6(){\n                              window.open(\"https://youtube.com/playlist?list=PLTB0eCoUXErY_KvRNKOERQtYSDPjOb8jw\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Aspirants</b>\n                          <br>\n                          IMDb - 9.7\n                      </div>\n                  \n                </div>\n              </div>\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/sherlock.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Sherlock</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2010</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">3</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.1</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Dr Watson, a former army doctor, finds himself sharing a flat with Sherlock Holmes, an eccentric individual with a knack for solving crimes. \n                          Together, they take on the most unusual cases.</p>\n\n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin7()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin7(){\n                              window.open(\"https://www.imdb.com/video/vi1337965849\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Sherlock</b>\n                          <br>\n                          IMDb - 9.1\n                      </div>\n                  </div>\n                </div>\n              \n\n\n\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/scam.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1>Scam 1992</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.5</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Harshad Mehta took the stock market to dizzying heights and had a catastrophic downfall.</p>\n\n                     \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin8()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin8(){\n                              window.open(\"https://www.imdb.com/video/vi3985359129\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br>\n                        <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                    </div>\n                      <div class=\"flim\">\n                          <b>Scam 1992 : The Harshad Mehta Story</b>\n                          <br>\n                          IMDb - 9.5\n                      </div>\n                  </div>\n                </div>\n              \n\n\n            </div>\n        </div>\n    </div>\n\n\n\n    <!-------------------------------Footer-------------------------------->\n    <div id=\"waterdrop\"></div>\n    <footer class=\"footer\">\n      <hr class=\"footer-hr\">\n        <div class=\"footer-content\">\n            <div class=\"footer-left\">\n                <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\" height=\"24\"></a>\n                <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Follow Us</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i class=\"fab fa-github github\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Services</h2>\n                <ul class=\"footer-middle-list\">\n                    <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Try Our App</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-right\">\n                <p class=\"footer-links\">\n                    <h2 class=\"footer-heading\">Contact Us</h2>\n                    <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n                    <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n                </p>\n            </div>\n        </div>\n        <hr class=\"footer-hr\">\n        <div class=\"footer-copyright\">\n            <p>Copyright &copy; and &reg; Since\n                <script>\n                    document.write(new Date().getFullYear())\n                </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>\n        </div>\n    </footer>\n\n    <!----------------------scroll back to top button-->\n    <button  id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\" >\n        <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\" ></i>\n      </button>\n      <script>\n      $(document).ready(function(){\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n        window.onscroll = function () { scrollFunction() };\n\n        function scrollFunction() {\n        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n          scrollTopButton.style.display = \"block\";\n        } else {\n          scrollTopButton.style.display = \"none\";\n        }\n      }\n\n      $(\"#scrollToTopButton\").click(function(){\n      $('html ,body').animate({scrollTop : 0},800)\n      });\n      });\n      </script>\n      <script>\n        function logout(){\n          window.location.replace(\"login.html\");\n        }\n        </script>\n\n    <!-- offcanva JS and footer js -->\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n    <script src=\"js/main-min.js\"></script>\n\n    <script>\n        jQuery('#waterdrop').raindrops({\n            color: '#292c2f',\n            canvasHeight: 150,\n            density: 0.1,\n            frequency: 20\n        });\n    </script>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\" crossorigin=\"anonymous\"></script>\n    <script src=\"./script/script.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "premium.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n  <meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width\">\n  <title>ApnaTheatre</title>\n  <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n\n  <!-- Font  -->\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n  <!-- Bootstrap CSS -->\n  <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\n    integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n  <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n  <link href=\"./static/premium.css\" rel=\"stylesheet\" type=\"text/css\" />\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n    integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n    crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n  <link rel=\"stylesheet\" href=\"static/bootstrap.min.css\">\n  <link rel=\"stylesheet\" href=\"static/style-min.css\">\n  <link rel=\"stylesheet\" href=\"cards.css\">\n\n \n        </head>\n        <body>\n\n</head>\n\n<style>\n  #scrollToTopButton{\nposition: fixed;\nbottom: 40px;\nright: 25px;\nfont-size: 25px;\nz-index: 99;\nwidth: 50px;\nheight: 50px;\nbackground-color:red;\ncolor:black;\nborder: none;\ncursor: pointer;\noutline: none;\npadding: 6px;\nborder-radius: 50%;\n}\n#scrollToTopButton:hover, i:hover {\nbackground-color:white;\ncolor:red;\n}\n#nav:hover\n{\nbackground-color:#e60e23!important;\n\n}\n\n\n\n  .logo {\nwidth: 110px;\nheight: 90px;\npadding: 3px;\nmargin: 0;\npadding: 0;\n}\n.fas:hover{background: none!important ;}\n.nav-item{ flex-wrap:wrap;}\n.menu li a:hover {\ncolor: red !important;\nopacity: 0.5;\n}\n\n/* CSS FOR FOOTER */\n.footer{\nmargin-bottom:15px;\nfont-family: Verdana, Geneva, Tahoma, sans-serif;\n}\n.footer-content{\ndisplay:flex;\njustify-content:space-between;\npadding: 10px 20px;\n}\n.footer-logo{\nwidth: 150px;\nheight: 120px;\npadding: 3px;\nmargin:0px 0px 0px 10px;\npadding: 0;\n}\n.nav-item :hover{\n  margin-bottom: 10px;\n  \n  \n}\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n.footer-heading{\ncolor:white;\n}\n.footer-left, .footer-right, .footer-middle{\ntext-align:center;\n}\n.icons{\nmargin-left:-30px;\n}\n.footer-links i{\nfont-size:30px;\nwidth:40px;\nheight:40px;\npadding:5px;\nmargin-top:30px;\n}\n.footer-middle a i:hover{\nbackground-color:white;\nborder-radius:50px;\ncolor:red;\n}\n.footer-middle-list-item{\nlist-style:none;\nfont-size:15px;\nfont-family:cursive;\nmargin:5px 0px 0px 15px;\ntext-align:left;\n}\n.footer-middle-list-item a{\ntext-decoration:none;\ncolor:white;\n}\n.footer-middle-list-item a:hover{\ncolor:red;\n}\n.footer-right{\nmargin-top:-15px;\n}\n.footer-contact-button{\nfont-size:20px;\nbackground-color:red;\ncolor:black;\npadding:10px;\nborder:none;\nborder-radius:10px;\ntext-decoration:none;\n}\n.footer-contact-button:hover{\nbackground-color:white;\ncolor:red;\n}\n.footer-bottom-tagline{\ncolor:white;\nfont-size:15px;\nfont-family:cursive;\nmargin-bottom:25px;\n}\n\n\n.footer-copyright{\ntext-align:center;\ncolor:white;\nmargin-top:20px;\nfont-size:18px;\n}\n.footer-hr{\n  color:grey;\n  font-weight:bold;\n}\n/***************** Media Queries *********************/\n\n@media (max-width: 600px) {\n.footer-content{\n display:block;\n text-align:center;\n}\n.footer-middle-list-item{\ntext-align:center;\nmargin-left:-20px;\n}\n\n.footer-left, .footer-middle, .footer-right{\nmargin-top:50px;\n}\n}\n#header-nav .nav-link {\ncolor: white;\nfont-size: 20px;\nmargin-left: 20px;\n}\n  @media only screen and (max-width: 1400px){\n#header-nav .nav-link {\n  color: white;\n  font-size: 18px;\n  margin-left: 18px;\n}\n}\n\n@media only screen and (min-width: 1133px) and (max-width: 1275px) {\n#header-nav .nav-link {\n  color: white;\n  font-size: 15px;\n  margin-left: 10px;\n} \n}\n@media only screen and (min-width: 1035px) and (max-width: 1132px) {\n#header-nav .nav-link {\n  color: white;\n  font-size: 15px;\n  margin-left: 10px;\n} \n#searchText{\n  width: 120px;\n}\n#submitBtn{\n  width: 60px;\n  display: flex;\n  justify-content: center;\n}\n}\n@media only screen and (min-width: 993px) and (max-width: 1034px) {\n#header-nav .nav-link {\n  color: white;\n  font-size: 14px;\n  margin-left: 10px;\n} \n\n#searchText{\nwidth: 100px;\n}\n#submitBtn{\nwidth: 50px;\ndisplay: flex;\njustify-content: center;\n}\n}\n</style>    \n\n<body>\n\n  <!-- navbar starts -->\n\n  <div class=\"scroll-bar\">\n    <!-- navbar starts -->\n\n    <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n      <div class=\"container-fluid\">\n        <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n            height=\"24\"></a>\n        <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n          data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n          <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n        </button>\n        \n        <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n          <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n            <li class=\"nav-item\">\n              <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"tv.html\">TV</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n            </li>\n            \n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n            </li>\n            <li>\n              <!-- Genre dropdown starts-->\n              <div>\n                <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                    <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                        Genres\n                    </button>\n                    <div class=\"dropdown-content\" style=\"color: white;\">\n                        <a href=\"popular.html\">Popular</a>\n                        <a href=\"crime.html\">Crime</a>\n                        <a href=\"suspense.html\">Suspense & Thriller</a>\n                        <a href=\"action.html\">Action</a>\n                        <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                        <a href=\"documentary.html\">Documentary</a>\n                        <a href=\"horror.html\">Horror</a>\n                        <a href=\"drama.html\">Drama</a>\n                        <a href=\"war.html\">War & Politics</a>\n                        <a href=\"comedy.html\">Comedy</a>\n                        <a href=\"romance.html\">Romance</a>\n                        <a href=\"anime.html\">Anime</a>\n                      </div>\n                </div>\n              </div>\n              <!-- Genre dropdown ends-->\n            </li>\n            <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n              <li>\n                <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n              </li>\n            </div>\n          </ul>\n          <form id=\"searchForm\" class=\"d-flex\">\n            <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n            <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n          </form>\n        </div>\n      </div>\n      </nav>\n\n  <!-- navbar ends -->\n\n\n  <div class=\"container\">\n    <div class=\"section-title\">\n      <h3>Choose your plan</h3><br>\n      <ul>\n        <li><p class=\"points\">Watch all you want. Advert-free.</p></li>\n        <li><p class=\"points\">Recommendations just for you.</p></li>\n        <li><p class=\"points\">Change or cancel your plan anytime.</p></li>\n      </ul>\n      </div>\n\n    <div class=\"row no-gutters justify-content-center\" id=\"premiumcards\">\n        <div class=\"column col-lg-4 col-md-6  row__item\"  >\n            <div class=\"box1 featured\" data-aos=\"fade-right\">\n                <center><h3>Basic</h3>\n                <h4>₹499&nbsp;<span>per month</span></h4></center>\n                <br>\n                <ul>\n                  <li><i class=\"bx bx-check\"></i> Video Quality: Good</li>\n                  <li><i class=\"bx bx-check\"></i> Resolution: 480p</li>\n                  <li><i class=\"bx bx-check\"></i> Devices you can use to watch:</li>\n                  <ul class=\"devices\">\n                    <li>Mobile</li>\n                    <li>Tablet</li>\n                    <li>TV</li>\n                    <li>Computer</li>\n                  </ul>\n                </ul>\n                <form><script src=\"https://checkout.razorpay.com/v1/payment-button.js\" data-payment_button_id=\"pl_HRAIXySB68JwYQ\" async> </script> </form>\n              </div>\n    \n        </div>\n        <div class=\"column col-lg-4 col-md-6 row__item \" >\n            <div class=\"box2 featured\" data-aos=\"fade-up\">\n                <center><h3>Premium</h3>\n                <h4>₹799&nbsp;<span>per month</span></h4></center>\n                <br>\n                <ul>\n                  <li><i class=\"bx bx-check\"></i> Video Quality: Best</li>\n                  <li><i class=\"bx bx-check\"></i> Resolution: 4K+HDR</li>\n                  <li><i class=\"bx bx-check\"></i> Devices you can use to watch:</li>\n                  <ul class=\"devices\">\n                    <li>Mobile</li>\n                    <li>Tablet</li>\n                    <li>TV</li>\n                    <li>Computer</li>\n                  </ul>\n                </ul>\n                \n             <form><script src=\"https://checkout.razorpay.com/v1/payment-button.js\" data-payment_button_id=\"pl_HRAVPPvSZTE7fg\" async> </script> </form>\n    \n              </div>\n        </div>\n        <div class=\"column col-lg-4 col-md-6 row__item\" >\n            \n      <div class=\"box3 featured\" data-aos=\"fade-left\">\n        <center><h3>Standard</h3>\n        <h4>₹649&nbsp;<span>per month</span></h4></center>\n        <br>\n        <ul>\n          <li><i class=\"bx bx-check\"></i> Video Quality: Better</li>\n          <li><i class=\"bx bx-check\"></i>Resolution: 1080p</li>\n          <li><i class=\"bx bx-check\"></i> Devices you can use to watch:</li>\n          <ul class=\"devices\">\n            <li>Mobile</li>\n            <li>Tablet</li>\n            <li>TV</li>\n            <li>Computer</li>\n          </ul>\n        </ul>\n<form><script src=\"https://checkout.razorpay.com/v1/payment-button.js\" data-payment_button_id=\"pl_HRBYgiJB9odvoA\" async> </script> </form>\n\n\n\n  </div>\n\n</div>\n</div>\n  </div>\n  <!-- End Pricing Section -->\n  </div>\n  <br>\n  <br>\n  <!-------------------------------Footer-------------------------------->\n  <footer class=\"footer\">\n    <hr class=\"footer-hr\">\n    <div class=\"footer-content\">\n      <div class=\"footer-left\">\n        <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n            height=\"24\"></a>\n        <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n      </div>\n      <div class=\"footer-middle\">\n        <h2 class=\"footer-heading\">Follow Us</h2>\n        <ul class=\"footer-middle-list icons\">\n          <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i class=\"fab fa-facebook-f facebook\"\n              style=\"color:red\"></i></a>\n          <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i\n              class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n          <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i\n              class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n          <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i\n              class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n          <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i\n              class=\"fab fa-github github\" style=\"color:red\"></i></a>\n        </ul>\n      </div>\n      <div class=\"footer-middle\">\n        <h2 class=\"footer-heading\">Services</h2>\n        <ul class=\"footer-middle-list\">\n          <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n          <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n          <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n          <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n          <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n          <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n        </ul>\n      </div>\n      <div class=\"footer-middle\">\n        <h2 class=\"footer-heading\">Try Our App</h2>\n        <ul class=\"footer-middle-list icons\">\n          <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n          <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n        </ul>\n      </div>\n      <div class=\"footer-right\">\n        <p class=\"footer-links\">\n        <h2 class=\"footer-heading\">Contact Us</h2>\n        <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n        <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n        </p>\n      </div>\n    </div>\n    <hr class=\"footer-hr\">\n    <div class=\"footer-copyright\">\n      <p>Copyright &copy; and &reg; Since\n        <script>\n          document.write(new Date().getFullYear())\n        </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)\n      </p>\n    </div>\n  </footer>\n\n  <!----------------------scroll back to top button-->\n  <button id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\">\n    <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\"></i>\n  </button>\n  <script>\n    $(document).ready(function () {\n      var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n      window.onscroll = function () { scrollFunction() };\n\n      function scrollFunction() {\n        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n          scrollTopButton.style.display = \"block\";\n        } else {\n          scrollTopButton.style.display = \"none\";\n        }\n      }\n\n      $(\"#scrollToTopButton\").click(function () {\n        $('html ,body').animate({ scrollTop: 0 }, 800)\n      });\n    });\n  </script>\n  <script>\n    function logout() {\n      window.location.replace(\"login.html\");\n    }\n  </script>\n  <!-- footer scripts -->\n\n  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n  <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n  <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n  <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n  <script src=\"js/main-min.js\"></script>\n\n  <script>\n    jQuery('#waterdrop').raindrops({\n      color: '#292c2f',\n      canvasHeight: 150,\n      density: 0.1,\n      frequency: 20\n    });\n  </script>\n  <!-- bootsstrap JS -->\n  <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\"\n    integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\"\n    crossorigin=\"anonymous\"></script>\n  <script src=\"./static/script.js\"></script>\n\n</body>\n\n</html>\n\n\n"
  },
  {
    "path": "quiz.html",
    "content": "\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Quiz page for movie interest</title>\n\n    <!-- Font  -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n    <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n    <link rel=\"stylesheet\" href=\"quizstyle.css\">\n    <!-- FontAweome CDN Link for Icons-->\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"/>\n</head>\n<body>\n    <!-- start Quiz button -->\n    <div class=\"start_btn\"><button>Let's Get Started</button></div>\n\n    <!-- Info Box -->\n    <div class=\"info_box\">\n        <div class=\"info-title\"><span>Welcome to Apna Theatre</span></div>\n        <div class=\"info-list\">\n            <div class=\"info\">Your answers to the next few questions will\nhelp us find the right ideas for you</div>\n            \n            \n        </div>\n        <div class=\"buttons\">\n            <button class=\"quit\">Exit</button>\n            <button class=\"restart\">Continue</button>\n        </div>\n    </div>\n\n    <!-- Quiz Box -->\n    <div class=\"quiz_box\">\n        <header>\n            <div class=\"title\"></div>\n            <div class=\"timer\">\n                \n            </div>\n            <div class=\"time_line\"></div>\n        </header>\n        <section>\n            <div class=\"que_text\">\n                <!-- Here I've inserted question from JavaScript -->\n            </div>\n            <div class=\"option_list\">\n                <!-- Here I've inserted options from JavaScript -->\n            </div>\n        </section>\n\n        <!-- footer of Quiz Box -->\n        <footer>\n            <div class=\"total_que\">\n                <!-- Here I've inserted Question Count Number from JavaScript -->\n            </div>\n            <button class=\"next_btn\">Next Que</button>\n        </footer>\n    </div>\n\n    <!-- Result Box -->\n    <div class=\"result_box\">\n        <div class=\"icon\">\n            <i class=\"fas fa-crown\"></i>\n        </div>\n        <div class=\"complete_text\">All Set's Ready to go</div>\n        <div class=\"score_text\">\n            <!-- Here I've inserted Score Result from JavaScript -->\n        </div>\n        <div class=\"buttons\">\n            <button class=\"restart\"> RESET</button>\n            <a href=\"home.html\">\n            <button class=\"quit\">Let's Watch</button>\n        </div>\n    </div>\n\n\n    \n    <!-- Inside this JavaScript file I've inserted Questions and Options only -->\n    <script src=\"js/questions.js\"></script>\n\n    <!-- Inside this JavaScript file I've coded all Quiz Codes -->\n    <script src=\"js/script.js\"></script>\n\n</body>\n</html>\n"
  },
  {
    "path": "quizstyle.css",
    "content": "/* importing google fonts */\n@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');\n*{\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    font-family: 'Ubuntu', sans-serif;\n}\n\nbody{\n    background: black;\n}\n\n::selection{\n    color: #fff;\n    background: #007bff;\n}\n\n.start_btn,\n.info_box,\n.quiz_box,\n.result_box{\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), \n                0 6px 20px 0 rgba(0, 0, 0, 0.19);\n}\n\n.info_box.activeInfo,\n.quiz_box.activeQuiz,\n.result_box.activeResult{\n    opacity: 1;\n    z-index: 5;\n    pointer-events: auto;\n    transform: translate(-50%, -50%) scale(1);\n}\n\n.start_btn button{\n    font-size: 25px;\n    font-weight: 500;\n    color: #007bff;\n    padding: 15px 30px;\n    outline: none;\n    border: none;\n    border-radius: 5px;\n    background: #fff;\n    cursor: pointer;\n}\n.start_btn :hover{\n    color:black;\n    background-color: red;\n}\n\n.info_box{\n    width: 540px;\n    background: #fff;\n    border-radius: 5px;\n    transform: translate(-50%, -50%) scale(0.9);\n    opacity: 0;\n    pointer-events: none;\n    transition: all 0.3s ease;\n}\n\n@media only screen and (max-width: 576px) {\n    .info_box {\n        width: 340px;\n    }\n    .info_box .buttons {\n        padding: 0 60px !important;\n    }\n    .quiz_box {\n        width: 350px !important;\n    }\n    .result_box {\n        width: 350px !important;\n    }\n}\n@media only screen and (max-width: 376px) {\n    .info_box {\n        width: 240px;\n    }\n    .info_box .buttons {\n        padding: 0 10px !important;\n    }\n    .quiz_box {\n        width: 250px !important;\n    }\n    .result_box {\n        width: 250px !important;\n    }\n    .result_box .buttons button {\n        height: 50px !important;\n        font-size: 16px !important;\n    }\n}\n\n.info_box .info-title{\n    height: 60px;\n    width: 100%;\n    border-bottom: 1px solid lightgrey;\n    display: flex;\n    align-items: center;\n    padding: 0 30px;\n    border-radius: 5px 5px 0 0;\n    font-size: 20px;\n    font-weight: 600;\n}\n\n.info_box .info-list{\n    padding: 15px 30px;\n}\n\n.info_box .info-list .info{\n    margin: 5px 0;\n    font-size: 17px;\n}\n\n.info_box .info-list .info span{\n    font-weight: 600;\n    color: #007bff;\n}\n.info_box .buttons{\n    height: 60px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 0 30px;\n    border-top: 1px solid lightgrey;\n}\n\n.info_box .buttons button{\n    margin: 0 5px;\n    height: 40px;\n    width: 100px;\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n    border: none;\n    outline: none;\n    border-radius: 5px;\n    border: 1px solid #007bff;\n    transition: all 0.3s ease;\n}\n\n.quiz_box{\n    width: 550px;\n    background: #fff;\n    border-radius: 5px;\n    transform: translate(-50%, -50%) scale(0.9);\n    opacity: 0;\n    pointer-events: none;\n    transition: all 0.3s ease;\n}\n\n.quiz_box header{\n    position: relative;\n    z-index: 2;\n    height: 70px;\n    padding: 0 30px;\n    background: #fff;\n    border-radius: 5px 5px 0 0;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1);\n}\n\n.quiz_box header {\n    font-size: 20px;\n    font-weight: 600;\n}\n\n.quiz_box header r{\n    color: #004085;\n    background: #cce5ff;\n    border: 1px solid #b8daff;\n    height: 45px;\n    padding: 0 8px;\n    border-radius: 5px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 145px;\n}\n\n.quiz_box header {\n    font-weight: 400;\n    font-size: 17px;\n    user-select: none;\n}\n\n.quiz_box header {\n    font-size: 18px;\n    font-weight: 500;\n    height: 30px;\n    width: 45px;\n    color: #fff;\n    border-radius: 5px;\n    line-height: 30px;\n    text-align: center;\n    background: #343a40;\n    border: 1px solid #343a40;\n    user-select: none;\n}\n\n.quiz_box header{\n    position: absolute;\n    bottom: 0px;\n    left: 0px;\n    height: 3px;\n    background: #007bff;\n}\n\nsection{\n    padding: 25px 30px 20px 30px;\n    background: #fff;\n}\n\nsection .que_text{\n    font-size: 25px;\n    font-weight: 600;\n}\n\nsection .option_list{\n    padding: 20px 0px;\n    display: block;   \n}\n\nsection .option_list .option{\n    background: aliceblue;\n    border: 1px solid #84c5fe;\n    border-radius: 5px;\n    padding: 8px 15px;\n    font-size: 17px;\n    margin-bottom: 15px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\nsection .option_list .option:last-child{\n    margin-bottom: 0px;\n}\n\nsection .option_list .option:hover{\n    color: #004085;\n    background: #cce5ff;\n    border: 1px solid #b8daff;\n}\n\nsection .option_list .option.correct{\n    color: #155724;\n    background: #d4edda;\n    border: 1px solid #c3e6cb;\n}\n\nsection .option_list .option.incorrect{\n    color: #721c24;\n    background: #f8d7da;\n    border: 1px solid #f5c6cb;\n}\n\nsection .option_list .option.disabled{\n    pointer-events: none;\n}\n\n\n}\n\n}\n\n.\n}\n\nfooter{\n    height: 60px;\n    padding: 0 30px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    border-top: 1px solid lightgrey;\n}\n\nfooter .total_que span{\n    display: flex;\n    user-select: none;\n}\n\nfooter .total_que span p{\n    font-weight: 500;\n    padding: 0 5px;\n}\n\nfooter .total_que span p:first-child{\n    padding-left: 0px;\n}\n\nfooter button{\n    height: 40px;\n    padding: 0 13px;\n    font-size: 18px;\n    font-weight: 400;\n    cursor: pointer;\n    border: none;\n    outline: none;\n    color: #fff;\n    border-radius: 5px;\n    background: #007bff;\n    border: 1px solid #007bff;\n    line-height: 10px;\n    opacity: 0;\n    pointer-events: none;\n    transform: scale(0.95);\n    transition: all 0.3s ease;\n}\n\nfooter button:hover{\n    color:black;\n    background-color: red;\n}\n\nfooter button.show{\n    opacity: 1;\n    pointer-events: auto;\n    transform: scale(1);\n}\n\n.result_box{\n    background: #fff;\n    border-radius: 5px;\n    display: flex;\n    padding: 25px 30px;\n    width: 450px;\n    align-items: center;\n    flex-direction: column;\n    justify-content: center;\n    transform: translate(-50%, -50%) scale(0.9);\n    opacity: 0;\n    pointer-events: none;\n    transition: all 0.3s ease;\n}\n\n.result_box .icon{\n    font-size: 100px;\n    color: #007bff;\n    margin-bottom: 10px;\n}\n\n.result_box .complete_text{\n    font-size: 20px;\n    font-weight: 500;\n}\n\n.result_box .score_text span{\n    display: flex;\n    margin: 10px 0;\n    font-size: 18px;\n    font-weight: 500;\n}\n\n.result_box .score_text span p{\n    padding: 0 4px;\n    font-weight: 600;\n}\n\n.result_box .buttons{\n    display: flex;\n    margin: 20px 0;\n}\n\n.result_box .buttons button{\n    margin: 0 10px;\n    height: 45px;\n    padding: 0 20px;\n    font-size: 18px;\n    font-weight: 500;\n    cursor: pointer;\n    border: none;\n    outline: none;\n    border-radius: 5px;\n    border: 1px solid #007bff;\n    transition: all 0.3s ease;\n}\n\n.buttons button.restart{\n    color: #fff;\n    background: #007bff;\n}\n\n.buttons button.restart:hover{\n    color:black;\n    background-color: red;\n}\n\n.buttons button.quit{\n    color: #007bff;\n    background: #fff;\n}\n\n.buttons button.quit:hover{\n    color: black;\n    background-color:red;\n}\n"
  },
  {
    "path": "romance.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width\">\n    <title>ApnaTheatre.com</title>\n    <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n\n    <!-- Font  -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n        integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n        crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n        <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n\n    <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n    <link rel=\"stylesheet\" href=\"static/bootstrap.min.css\">\n    <link rel=\"stylesheet\" href=\"static/style-min.css\">\n    <link rel=\"stylesheet\" href=\"cards.css\">\n\n</head>\n\n\n<!------------------------Scroll to top button------------------------------------------------>\n<style>\n  #scrollToTopButton{\nposition:fixed;\nbottom: 40px;\nright: 25px;\nfont-size: 25px;\nz-index: 99;\nwidth: 50px;\nheight: 50px;\nbackground-color:red;\ncolor:black;\nborder: none;\ncursor: pointer;\noutline: none;\npadding: 6px;\nborder-radius: 50%;\n}\n#scrollToTopButton:hover, i:hover {\nbackground-color:white;\ncolor:red;\n}\n#nav:hover\n{\n  background-color:#e60e23!important;\n\n}\n\n.container {\n  text-align: center;\n}\n.nav-item :hover{\n  margin-bottom: 10px;\n  \n  \n}\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n</style>\n\n<body>\n    <div class=\"scroll-bar\">\n\n       <!-- navbar starts -->\n\n       <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n        <div class=\"container-fluid\">\n          <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n              height=\"24\"></a>\n          <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n            data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n            <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n          </button>\n          \n          <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n            <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n              <li class=\"nav-item\">\n                <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n              </li>\n              <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n              </li>\n              <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n              </li>\n              <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n              </li>\n              <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"tv.html\">TV</a>\n              </li>\n              <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n              </li>\n             \n              <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n              </li>\n              <li>\n                <!-- Genre dropdown starts-->\n                <div>\n                  <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                      <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                          Genres\n                      </button>\n                      <div class=\"dropdown-content\" style=\"color: white;\">\n                          <a href=\"popular.html\">Popular</a>\n                          <a href=\"crime.html\">Crime</a>\n                          <a href=\"suspense.html\">Suspense & Thriller</a>\n                          <a href=\"action.html\">Action</a>\n                          <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                          <a href=\"documentary.html\">Documentary</a>\n                          <a href=\"horror.html\">Horror</a>\n                          <a href=\"drama.html\">Drama</a>\n                          <a href=\"war.html\">War & Politics</a>\n                          <a href=\"comedy.html\">Comedy</a>\n                          <a href=\"romance.html\">Romance</a>\n                          <a href=\"anime.html\">Anime</a>\n                        </div>\n                  </div>\n                </div>\n                <!-- Genre dropdown ends-->\n              </li>\n              <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                <li>\n                  <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n                </li>\n              </div>\n            </ul>\n            <form id=\"searchForm\" class=\"d-flex\">\n              <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n              <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n            </form>\n          </div>\n        </div>\n        </nav>\n  \n          <!-- navbar ends -->\n\n        <div class=\"maincontainer\">\n            <div class=\"container\">\n                <div id=\"movies\" class=\"row\"></div>\n            </div>\n            <hr>\n            <h2>Romance ❤ </h2>\n            <hr>\n            <div class=\"container\" id=\"Movies\">\n              <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/kissing booth.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>The Kissing Booth</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                          <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">3<button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">6</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">A high school student is forced to confront her secret crush at a kissing booth.</p>\n\n                       \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin(){\n                                window.open(\"https://www.imdb.com/video/vi3378427929?playlistId=tt3799232\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>The Kissing Booth</b>\n                            <br>\n                            IMDb - 6\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/kabir singh.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Kabir Singh</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                          <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h52m<button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.1</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">An exalted but short-fused surgeon plunges into a spiral of drugs, alcohol and rage after his intense relationship with his girlfriend turbulently ends.</p>\n\n                        \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin1()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin1(){\n                                window.open(\"https://www.imdb.com/video/vi518568985?playlistId=tt8983202\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Kabir Singh</b>\n                            <br>\n                            IMDb - 7.1\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/little things.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Little Things</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2016</button>\n                          <button class=\"btn_i b2_i\"  title=\"seasons\" style=\"color:white\">4<button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.3</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">A cohabiting couple in their 20s navigate the ups and downs of work, modern-day relationships and finding themselves in contemporary Bengaluru.</p>\n\n                        \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin2()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin2(){\n                                window.open(\"https://www.imdb.com/video/vi4087396889?playlistId=tt6522580\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Little Things</b>\n                            <br>\n                            IMDb - 8.3\n                        </div>\n                    </div>\n                  \n                </div>\n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/mismatched.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Mismatched</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                          <button class=\"btn_i b2_i\"  title=\"seasons\" style=\"color:white\">1<button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">5.5</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">After being set-up by their families, two teenagers strike up a tentative friendship at their summer programme.</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin3()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin3(){\n                                window.open(\"https://www.imdb.com/video/vi2328346905?playlistId=tt12719250\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Mismatched</b>\n                            <br>\n                            IMDb - 5.5\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/bandish.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Bandish Bandits</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                          <button class=\"btn_i b2_i\"  title=\"seasons\" style=\"color:white\">1<button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.7</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Indian classical singer Radhe and pop star Tamanna.</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin4()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin4(){\n                                window.open(\"https://www.imdb.com/video/vi1213644313?playlistId=tt9814458\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Bandish Bandits</b>\n                            <br>\n                            IMDb - 8.7\n                        \n                    </div>\n                  </div>\n                </div>\n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/the notebook.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>The Notebook</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2004/button>\n                          <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h4m<button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.8</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Duke reads the story of Allie and Noah, two lovers who were separated by fate, to Ms Hamilton, an old woman who suffers from dementia, on a daily basis out of his notebook.</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin5()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin5(){\n                                window.open(\"https://www.imdb.com/video/vi2603746073?playlistId=tt0332280\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>The Notebook</b>\n                            <br>\n                            IMDb - 7.8\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/lukka.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Lukka Chuppi</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                          <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h6m<button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">6.3</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Pretending to be married in order to cohabitate, a small-town couple lands in endless awkward situations to hide the truth from their orthodox families.</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin6()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin6(){\n                                window.open(\"https://www.imdb.com/video/vi1667218457?playlistId=tt8908002\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Lukka Chuppi</b>\n                            <br>\n                            IMDb - 6.3\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/bridgerton.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Bridgerton</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                          <button class=\"btn_i b2_i\"  title=\"seasons\" style=\"color:white\">1<button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.3</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Wealth, lust, and betrayal set against the backdrop of Regency-era England, seen through the eyes of the powerful Bridgerton family.</p>\n\n                         \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin7()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin7(){\n                                window.open(\"https://www.imdb.com/video/vi1143783705?playlistId=tt8740790\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br>\n                          <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Bridgerton</b>\n                            <br>\n                            IMDb - 7.3\n                        </div>\n                    </div>\n                  </div>\n                \n\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------Footer-------------------------------->\n    <div id=\"waterdrop\"></div>\n    <footer class=\"footer\">\n      <hr class=\"footer-hr\">\n        <div class=\"footer-content\">\n            <div class=\"footer-left\">\n                <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\" height=\"24\"></a>\n                <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Follow Us</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i class=\"fab fa-github github\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Services</h2>\n                <ul class=\"footer-middle-list\">\n                    <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Try Our App</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-right\">\n                <p class=\"footer-links\">\n                    <h2 class=\"footer-heading\">Contact Us</h2>\n                    <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n                    <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n                </p>\n            </div>\n        </div>\n        <hr class=\"footer-hr\">\n        <div class=\"footer-copyright\">\n            <p>Copyright &copy; and &reg; Since\n                <script>\n                    document.write(new Date().getFullYear())\n                </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>\n        </div>\n    </footer>\n\n    <!-----------scroll back to top button-->\n    <button  id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\" >\n        <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\" ></i>\n      </button>\n      <script>\n      $(document).ready(function(){\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n        window.onscroll = function () { scrollFunction() };\n\n        function scrollFunction() {\n        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n          scrollTopButton.style.display = \"block\";\n        } else {\n          scrollTopButton.style.display = \"none\";\n        }\n      }\n\n      $(\"#scrollToTopButton\").click(function(){\n      $('html ,body').animate({scrollTop : 0},800)\n      });\n      });\n      </script>\n<script>\n  function logout(){\n    window.location.replace(\"login.html\");\n  }\n  </script>\n\n    <!-- offcanva JS and footer js -->\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n    <script src=\"js/main-min.js\"></script>\n\n    <script>\n        jQuery('#waterdrop').raindrops({\n            color: '#292c2f',\n            canvasHeight: 150,\n            density: 0.1,\n            frequency: 20\n        });\n    </script>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\" crossorigin=\"anonymous\"></script>\n    <script src=\"./static/script.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "signup.html",
    "content": "<!DOCTYPE html>\n<link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\" />\n<link\n  href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\"\n  rel=\"stylesheet\"\n  integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\"\n  crossorigin=\"anonymous\"\n/>\n\n<link\n  rel=\"stylesheet\"\n  href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n  integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n  crossorigin=\"anonymous\"\n  referrerpolicy=\"no-referrer\"\n/>\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n<link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n<html>\n  <head>\n    <title>Sign Up</title>\n\n    <!-- Font  -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\"\n      rel=\"stylesheet\"\n    />\n\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width\" />\n    <!------------------------Scroll to top button------------------------------------------------>\n    <style>\n      #scrollToTopButton {\n        position: fixed;\n        bottom: 40px;\n        right: 25px;\n        font-size: 25px;\n        z-index: 99;\n        width: 50px;\n        height: 50px;\n        background-color: red;\n        color: black;\n        border: none;\n        cursor: pointer;\n        outline: none;\n        padding: 6px;\n        border-radius: 50%;\n        box-shadow: 0 6px 10px 0px gray;\n      }\n\n      #scrollToTopButton:hover,\n      i:hover {\n        background-color: white;\n        color: red;\n      }\n\n      h1 {\n        margin: auto;\n        width: max-content;\n        color: white;\n      }\n      span {\n        display: inline-block;\n        padding: 5px;\n      }\n      .img-logo {\n        height: 94px;\n        margin-left: 45px;\n      }\n      .seperator {\n        height: 12px;\n        display: block;\n      }\n      .main {\n        padding: 70px;\n        width: 300px;\n        height: auto;\n        border: 1.5px grey solid;\n        border-radius: 5px;\n        margin: -4.5px auto;\n      }\n      label {\n        font-weight: bold;\n        color: white;\n        font-size: 1.25em;\n      }\n      input {\n        width: 280px;\n        border: none;\n        border-radius: 5px;\n        padding: 8px;\n        outline: none;\n      }\n      input[type=\"submit\"] {\n        width: 260px;\n        background-color: red;\n        font-weight: bold;\n      }\n      input[type=\"submit\"]:hover {\n        cursor: pointer;\n        border: 2px gray solid;\n        background-color: red;\n        transform: scale(0.95);\n      }\n      body {\n        margin: 0;\n        padding: 0;\n        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.85)),\n          url(\"Images/background3.png\") no-repeat center center fixed;\n        -webkit-background-size: cover;\n        -moz-background-size: cover;\n        -o-background-size: cover;\n        background-size: cover;\n        font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n      }\n      .brand {\n        margin-bottom: 13px;\n        color: red;\n        padding-top: 15px;\n      }\n      #errormessage {\n        display: flex;\n        justify-content: center;\n        border-radius: 12px;\n      }\n      p {\n        display: inline-flex;\n        font-size: 1em;\n        align-items: center;\n        background: rgb(220, 53, 69);\n        padding: 0.5em;\n        color: white;\n        font-family: sans-serif;\n      }\n      p svg {\n        width: 2em;\n        height: 2em;\n        margin-right: 0.5em;\n        fill: lightgreen;\n      }\n      .login {\n        margin: 0 auto;\n        width: 400px;\n        background-color: rgba(0, 0, 0, 0.6);\n        border-radius: 5px;\n        padding: 30px 70px 143px 70px;\n        margin-bottom: 12px;\n      }\n\n      .login h1 {\n        color: white;\n        padding-bottom: 10px;\n      }\n\n      .bottom {\n        background-color: rgba(0, 0, 0, 0.35);\n        color: #bdc7c9;\n      }\n\n      .bottom-width {\n        max-width: 1000px;\n        padding: 8px 30px;\n      }\n\n      .bottom-flex {\n        display: flex;\n        flex-wrap: wrap;\n        padding: 15px 0 0 0;\n        justify-content: center;\n      }\n      .bottom-flex li a {\n        font-size: 15px;\n      }\n      .bottom-flex li {\n        list-style: none;\n        margin: 0px 10px;\n      }\n\n      .list-bottom {\n        /* width: 25%; */\n        margin-top: 10px;\n      }\n\n      .link-bottom {\n        text-decoration: none;\n        color: #bdc7c9;\n        font-size: 0.8rem;\n      }\n\n      .link-bottom:hover {\n        text-decoration: underline;\n      }\n      .remember-flex {\n        display: flex;\n        justify-content: space-between;\n        margin-top: 10px;\n        font-size: 0.8rem;\n      }\n\n      .color_text {\n        color: #bdc7c9;\n      }\n\n      .color_link {\n        color: #bdc7c9;\n      }\n\n      .signup-link {\n        color: white;\n        text-decoration: none;\n      }\n\n      .signup-link:hover {\n        text-decoration: underline;\n      }\n\n      .face_icon {\n        color: #3b5998;\n        margin-right: 6px;\n        font-size: 20px;\n      }\n\n      .log_face {\n        text-decoration: none;\n        margin-left: 10px;\n        font-size: 0.8rem;\n      }\n\n      .login-face {\n        margin: 50px 0 15px 0;\n        vertical-align: middle;\n        color: #bdc7c9;\n      }\n\n      .al_members {\n        margin: 12px 0px;\n        color: #a0a2a2;\n        padding: 0px 12px;\n        font-size: 16.2px;\n      }\n      .log-link {\n        text-decoration: none;\n        color: whitesmoke;\n      }\n      .log-link:hover {\n        text-decoration: underline;\n      }\n      .help {\n        text-align: right;\n      }\n      .help a {\n        text-decoration: none;\n        font-size: 16.5px;\n      }\n      .help a:hover {\n        text-decoration: underline;\n      }\n      .protection {\n        font-size: 0.8rem;\n        color: #bdc7c9;\n        text-align: center;\n      }\n\n      .protection a {\n        text-decoration: none;\n      }\n\n      .protection a:hover {\n        text-decoration: underline;\n      }\n\n      .tel-link {\n        text-decoration: none;\n        color: #e1e5ea;\n      }\n\n      .tel-link:hover {\n        text-decoration: underline;\n      }\n\n      .select-language {\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        background: url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwb2x5Z29uIHN0cm9rZT0id2hpdGUiICBwb2ludHM9IjQ3LjI1LDE1IDQ1LjE2NCwxMi45MTQgMjUsMzMuMDc4IDQuODM2LDEyLjkxNCAyLjc1LDE1IDI1LDM3LjI1ICIvPjwvc3ZnPg==\");\n        background-size: 12px;\n        background-position-x: calc(100% - 7px);\n        background-position-y: calc(100% - 14px);\n        background-repeat: no-repeat;\n        background-color: #000;\n        color: #bdc7c9;\n        padding: 14px 20px 14px 14px;\n        margin: 30px 0 40px 0;\n        font-size: 0.9rem;\n        min-height: 40px;\n        border: 1px solid #333;\n      }\n\n      .select-language option {\n        padding-left: 10px;\n      }\n      .input-text {\n        margin-bottom: 20px;\n      }\n\n      .input-text input {\n        width: 100%;\n        height: 45px;\n        background-color: #333;\n        color: white;\n        border-radius: 5px;\n        border: none;\n        outline: transparent;\n        text-indent: 8px;\n      }\n\n      .input-text input::-webkit-input-placeholder {\n        font-size: 1rem;\n        color: #bdc7c9;\n      }\n\n      .input-text input::-moz-placeholder {\n        font-size: 1rem;\n        color: #bdc7c9;\n        text-indent: 40px;\n      }\n      .signin-button {\n        margin-top: 20px;\n        padding: 13px;\n        border-radius: 5px;\n        background-color: red;\n        color: white;\n        border: none;\n        font-weight: bold;\n        font-size: 1.05rem;\n        cursor: pointer;\n      }\n      .aftersubmit {\n        opacity: 1;\n        width: 400px;\n        padding: 20px 75px 20px 65px;\n        background-color: rgba(0, 0, 0, 0.6);\n        border-radius: 5px;\n        margin: 0px auto;\n      }\n      .field-icon {\n        position: absolute;\n        margin-left: -30px;\n        margin-top: 15px;\n        color: white;\n      }\n      .field-icon:hover {\n        cursor: pointer;\n        background-color: transparent;\n      }\n      .questions {\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n        justify-content: space-between;\n      }\n\n      @media only screen and (max-width: 450px) {\n        .login,\n        .aftersubmit {\n          width: 300px;\n          padding: 15px;\n        }\n      }\n\n      @media only screen and (max-width: 350px) {\n        .login,\n        .aftersubmit {\n          width: 240px;\n          padding: 10px;\n        }\n        input[type=\"submit\"] {\n          width: 220px;\n        }\n        .help a {\n          margin-left: 0% !important;\n        }\n      }\n    </style>\n    <link\n      rel=\"shortcut icon\"\n      href=\"./Images/Logo/Title.jpeg\"\n      type=\"image/x-icon\"\n    />\n  </head>\n  <body>\n    <div class=\"logo\">\n      <a href=\"home.html\">\n        <img src=\"Images/TheaterLogoFinal.png\" class=\"img-logo\" />\n      </a>\n    </div>\n    <div class=\"login-div\">\n      <form\n        class=\"login\"\n        onsubmit=\"return DisplayResults()\"\n        name=\"regform\"\n        autocomplete=\"off\"\n      >\n        <h1 class=\"sign\">Sign Up</h1>\n        <div id=\"errormessage\"></div>\n        <span class=\"seperator\"></span>\n        <div class=\"input-text\">\n          <input\n            type=\"text\"\n            name=\"name\"\n            placeholder=\"Enter your name\"\n            oninput=\"change()\"\n          />\n        </div>\n        <div class=\"input-text\">\n          <input\n            type=\"email\"\n            name=\"email\"\n            placeholder=\"Enter your Email\"\n            oninput=\"change()\"\n          />\n        </div>\n        <div class=\"input-text\">\n          <input\n            id=\"pass_signup\"\n            type=\"password\"\n            name=\"password\"\n            placeholder=\"Enter your password\"\n            oninput=\"change()\"\n          /><i\n            class=\"fa fa-fw fa-eye field-icon toggle-password\"\n            id=\"togglePassword\"\n          ></i>\n        </div>\n        <div class=\"input-text\">\n          <input\n            id=\"pass_signup2\"\n            type=\"password\"\n            name=\"retypepassword\"\n            placeholder=\"Confirm password\"\n            oninput=\"change()\"\n          /><i\n            class=\"fa fa-fw fa-eye field-icon toggle-password2\"\n            id=\"togglePassword\"\n          ></i>\n        </div>\n        <input class=\"signin-button\" type=\"submit\" value=\"Sign Up\" />\n        <div class=\"help\">\n          <a class=\"color_text\" href=\"https://www.google.com/gmail/\"\n            >Need help?</a\n          >\n        </div>\n        <div class=\"al_members\">\n          Already a Member?\n          <a href=\"login.html\" class=\"log-link\">Sign in here</a>.\n        </div>\n        <div class=\"protection color_link help\">\n          This page is protected by Google reCAPTCHA to ensure you're not a bot.\n          <a href=\"#\">Learn more.</a>\n        </div>\n      </form>\n      <span class=\"seperator\"></span>\n      <form\n        style=\"opacity: 0\"\n        class=\"aftersubmit\"\n        onsubmit=\"return FinalResults()\"\n        name=\"verificationform\"\n        autocomplete=\"off\"\n      >\n        <hr />\n        <div class=\"input-text\">\n          <input\n            type=\"password\"\n            name=\"code\"\n            placeholder=\"Enter code\"\n            oninput=\"change()\"\n          />\n        </div>\n        <input class=\"signin-button\" type=\"submit\" value=\"Register\" />\n      </form>\n\n      <br />\n      <br />\n    </div>\n    <div class=\"bottom\">\n      <div class=\"bottom-width\">\n        <div class=\"questions\">\n          <span>\n            Questions? <br />Ask on :\n            <a href=\"mailto: Apna_theatre@gmail.com\" class=\"tel-link\"\n              >Apna_theatre@gmail.com</a\n            ></span\n          >\n          <select class=\"fa select-language\">\n            <option>&#xf0ac; &nbsp;&nbsp;&nbsp;English</option>\n            <option>&#xf0ac; &nbsp;&nbsp;&nbsp;Hindi</option>\n          </select>\n        </div>\n\n        <div>\n          <ul class=\"bottom-flex\">\n            <li class=\"list-bottom\">\n              <a href=\"faq.html\" class=\"link-bottom\"> FAQ </a>\n            </li>\n            <li class=\"list-bottom\">\n              <a href=\"#\" class=\"link-bottom\"> Help Center </a>\n            </li>\n            <li class=\"list-bottom\">\n              <a href=\"#\" class=\"link-bottom\"> Terms of Use </a>\n            </li>\n            <li class=\"list-bottom\">\n              <a href=\"#\" class=\"link-bottom\"> Privacy </a>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <button id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\">\n      <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\"></i>\n    </button>\n    <script>\n      $(document).ready(function () {\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n        window.onscroll = function () {\n          scrollFunction();\n        };\n\n        function scrollFunction() {\n          if (\n            document.body.scrollTop > 20 ||\n            document.documentElement.scrollTop > 20\n          ) {\n            scrollTopButton.style.display = \"block\";\n          } else {\n            scrollTopButton.style.display = \"none\";\n          }\n        }\n\n        $(\"#scrollToTopButton\").click(function () {\n          $(\"html ,body\").animate({ scrollTop: 0 }, 800);\n        });\n      });\n    </script>\n    <script>\n      $(\".toggle-password\").click(function () {\n        $(this).toggleClass(\"fa-eye fa-eye-slash\");\n        if ($(\"#pass_signup\").attr(\"type\") == \"password\") {\n          $(\"#pass_signup\").attr(\"type\", \"text\");\n        } else {\n          $(\"#pass_signup\").attr(\"type\", \"password\");\n        }\n      });\n    </script>\n    <script>\n      $(\".toggle-password2\").click(function () {\n        $(this).toggleClass(\"fa-eye fa-eye-slash\");\n        if ($(\"#pass_signup2\").attr(\"type\") == \"password\") {\n          $(\"#pass_signup2\").attr(\"type\", \"text\");\n        } else {\n          $(\"#pass_signup2\").attr(\"type\", \"password\");\n        }\n      });\n    </script>\n  </body>\n  <script\n    src=\"https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js\"\n    integrity=\"sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA==\"\n    crossorigin=\"anonymous\"\n    referrerpolicy=\"no-referrer\"\n  ></script>\n  <script>\n    var namerror = false;\n    var emailerror = false;\n    var passworderror = false;\n    var confirmerror = false;\n    var code = Math.floor(1000 + Math.random() * 9000);\n    var strongPass = new RegExp(\n      \"^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\\$%\\^&\\*])(?=.{6,})\"\n    );\n    var btnclicked = false;\n    const mailformat =\n      /^(([^<>()[\\]\\\\.,;:\\s@\\\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\\\"]+)*)|(\\\".+\\\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n\n    function DisplayResults(e) {\n      var name = document.forms[\"regform\"][\"name\"].value;\n      var email = document.forms[\"regform\"][\"email\"].value;\n      var password = document.forms[\"regform\"][\"password\"].value;\n      var confirmpassword = document.forms[\"regform\"][\"retypepassword\"].value;\n      var error = document.getElementById(\"errormessage\");\n\n      if (name.length == 0) {\n        namerror = true;\n        error.style.display = \"block\";\n        error.innerHTML = `<p><svg class=\"svg-icon\" viewBox=\"0 0 20 20\">\n            <path d=\"M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z\"></path>\n          </svg><span class=\"error\">Name should not be empty</span></p>`;\n      } else if (email.length == 0) {\n        emailerror = true;\n        error.style.display = \"block\";\n        error.innerHTML = `<p><svg class=\"svg-icon\" viewBox=\"0 0 20 20\">\n            <path d=\"M17.388,4.751H2.613c-0.213,0-0.389,0.175-0.389,0.389v9.72c0,0.216,0.175,0.389,0.389,0.389h14.775c0.214,0,0.389-0.173,0.389-0.389v-9.72C17.776,4.926,17.602,4.751,17.388,4.751 M16.448,5.53L10,11.984L3.552,5.53H16.448zM3.002,6.081l3.921,3.925l-3.921,3.925V6.081z M3.56,14.471l3.914-3.916l2.253,2.253c0.153,0.153,0.395,0.153,0.548,0l2.253-2.253l3.913,3.916H3.56z M16.999,13.931l-3.921-3.925l3.921-3.925V13.931z\"></path>\n          </svg><span class=\"error\">Email should not be empty</span></p>`;\n      } else if (!mailformat.test(email)) {\n        error.style.display = \"block\";\n        error.innerHTML = `<p><svg class=\"svg-icon\" viewBox=\"0 0 20 20\">\n            <path d=\"M17.388,4.751H2.613c-0.213,0-0.389,0.175-0.389,0.389v9.72c0,0.216,0.175,0.389,0.389,0.389h14.775c0.214,0,0.389-0.173,0.389-0.389v-9.72C17.776,4.926,17.602,4.751,17.388,4.751 M16.448,5.53L10,11.984L3.552,5.53H16.448zM3.002,6.081l3.921,3.925l-3.921,3.925V6.081z M3.56,14.471l3.914-3.916l2.253,2.253c0.153,0.153,0.395,0.153,0.548,0l2.253-2.253l3.913,3.916H3.56z M16.999,13.931l-3.921-3.925l3.921-3.925V13.931z\"></path>\n          </svg><span class=\"error\">Email address is invalid</span></p>`;\n      } else if (!strongPass.test(password)) {\n        passworderror = true;\n        error.style.display = \"block\";\n        error.innerHTML = `<p><svg class=\"svg-icon\" viewBox=\"0 0 20 20\">\n            <path d=\"M17.308,7.564h-1.993c0-2.929-2.385-5.314-5.314-5.314S4.686,4.635,4.686,7.564H2.693c-0.244,0-0.443,0.2-0.443,0.443v9.3c0,0.243,0.199,0.442,0.443,0.442h14.615c0.243,0,0.442-0.199,0.442-0.442v-9.3C17.75,7.764,17.551,7.564,17.308,7.564 M10,3.136c2.442,0,4.43,1.986,4.43,4.428H5.571C5.571,5.122,7.558,3.136,10,3.136 M16.865,16.864H3.136V8.45h13.729V16.864z M10,10.664c-0.854,0-1.55,0.696-1.55,1.551c0,0.699,0.467,1.292,1.107,1.485v0.95c0,0.243,0.2,0.442,0.443,0.442s0.443-0.199,0.443-0.442V13.7c0.64-0.193,1.106-0.786,1.106-1.485C11.55,11.36,10.854,10.664,10,10.664 M10,12.878c-0.366,0-0.664-0.298-0.664-0.663c0-0.366,0.298-0.665,0.664-0.665c0.365,0,0.664,0.299,0.664,0.665C10.664,12.58,10.365,12.878,10,12.878\"></path>\n          </svg><span class=\"error\">Password should be atleast 6 characters long,contain a special character,a lower case and upper case alphabet and a number.</span></p>`;\n      } else if (password != confirmpassword) {\n        confirmerror = true;\n        error.style.display = \"block\";\n        error.innerHTML = `<p><svg class=\"svg-icon\" viewBox=\"0 0 20 20\">\n            <path d=\"M17.308,7.564h-1.993c0-2.929-2.385-5.314-5.314-5.314S4.686,4.635,4.686,7.564H2.693c-0.244,0-0.443,0.2-0.443,0.443v9.3c0,0.243,0.199,0.442,0.443,0.442h14.615c0.243,0,0.442-0.199,0.442-0.442v-9.3C17.75,7.764,17.551,7.564,17.308,7.564 M10,3.136c2.442,0,4.43,1.986,4.43,4.428H5.571C5.571,5.122,7.558,3.136,10,3.136 M16.865,16.864H3.136V8.45h13.729V16.864z M10,10.664c-0.854,0-1.55,0.696-1.55,1.551c0,0.699,0.467,1.292,1.107,1.485v0.95c0,0.243,0.2,0.442,0.443,0.442s0.443-0.199,0.443-0.442V13.7c0.64-0.193,1.106-0.786,1.106-1.485C11.55,11.36,10.854,10.664,10,10.664 M10,12.878c-0.366,0-0.664-0.298-0.664-0.663c0-0.366,0.298-0.665,0.664-0.665c0.365,0,0.664,0.299,0.664,0.665C10.664,12.58,10.365,12.878,10,12.878\"></path>\n          </svg><span class=\"error\">Passwords doesn't match</span></p>`;\n      } else {\n        Email.send({\n          Host: \"smtp.gmail.com\",\n          Username: \"apnatheatre1@gmail.com\",\n          Password: \"apnatheatre123!@#\",\n          To: email,\n          From: \"apnatheatre1@gmail.com\",\n          Subject: \"Email verification\",\n          Body: `Hello ${name},<br> Please enter this code: ${code} in the form to verify your email`,\n        }).then((message) => console.log(message));\n        swal(\"Please enter the code sent to your email\");\n        var x = document.getElementsByClassName(\"aftersubmit\");\n        x[0].style.opacity = \"1\";\n        console.log(x[0]);\n      }\n      return false;\n    }\n\n    function FinalResults() {\n      var usercode = document.forms[\"verificationform\"][\"code\"].value;\n      console.log(\"hii\");\n      if (code == usercode) {\n        swal({\n          title: \"Registration Successful!\",\n          text: \"Happy to have you aboard\",\n          type: \"success\",\n        });\n\n        window.location.href = \"quiz.html\";\n        // console.log(window.location.href)\n        // console.log('hi')\n        // var url = window.location.href\n        // var url1 = url.split(\"signup\")\n        // console.log(url1)\n        // var newurl = url1[0] + \"quiz.html\"\n        // console.log(newurl)\n        // history.pushState(null,null, newurl);\n        // window.location.reload();\n        // onsubmit=\"return DisplayResults()\"\n      } else {\n        swal({\n          title: \"Invalid code\",\n          type: \"warning\",\n          buttons: true,\n          dangerMode: true,\n        });\n      }\n      return false;\n    }\n\n    function change(e) {\n      var name = document.forms[\"regform\"][\"name\"].value;\n      var error = document.getElementById(\"errormessage\");\n      var email = document.forms[\"regform\"][\"email\"].value;\n      var password = document.forms[\"regform\"][\"password\"].value;\n      var confirmpassword = document.forms[\"regform\"][\"retypepassword\"].value;\n      if (namerror == true) {\n        if (name.length > 0) {\n          namerror = false;\n          error.style.display = \"none\";\n        }\n      } else if (emailerror == true) {\n        if (email.length > 0) {\n          emailerror = false;\n          error.style.display = \"none\";\n        }\n      } else if (passworderror == true) {\n        if (password.length > 0) {\n          passworderror = true;\n          error.style.display = \"none\";\n        }\n      } else if (confirmerror == true) {\n        if (confirmpassword == password) {\n          confirmerror = false;\n          error.style.display = \"none\";\n        }\n      }\n    }\n  </script>\n  <script src=\"https://smtpjs.com/v3/smtp.js\"></script>\n</html>\n"
  },
  {
    "path": "static/faq.css",
    "content": "/*--------------------------------------------------------------\n# Frequently Asked Questions\n--------------------------------------------------------------*/\n*{\n  font-family: 'Ubuntu', sans-serif;\n}\nsummary {\n    font-size: 1.25rem;\n    font-weight: 600;\n    background-color: #fff;\n    color: #333;\n    padding: 1rem;\n    margin-bottom: 1rem;\n    outline: none;\n    border-radius: 0.25rem;\n    text-align: left;\n    cursor: pointer;\n    position: relative;\n    width: 1000px;\n    margin: auto;\n  }\n  details > summary::after {\n    position: absolute;\n    content: \"+\";\n    right: 20px;\n  }\n  details[open] > summary::after {\n    position: absolute;\n    content: \"-\";\n    right: 20px;\n  }\n  details > summary::-webkit-details-marker {\n    display: none;\n  }\n  details[open] summary ~ * {\n    animation: sweep .5s ease-in-out;\n  }\n  @keyframes sweep {\n    0%    {opacity: 0; margin-top: -10px}\n    100%  {opacity: 1; margin-top: 0px}\n  }\n  .faq-section h2{\n    margin-top: 0px;\n    margin-bottom: 10px;\n  }\n  .footer-content{\n    margin-top: 55px;\n  }\n  .faq__content{\n    margin: auto;\n    width: 1000px;\n    padding: 12px 5px 5px 21px;\n    font-size: 18px;\n    font-weight: 600;\n    color: white;\n  }\n  summary:active{\n    color:red;\n  }\n  summary:hover{\n    color:red;\n  }"
  },
  {
    "path": "static/premium.css",
    "content": "/* Pricing Table Start */\n\n\n/* *{\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\nbody{\n    font-family: 'Montserrat', sans-serif;\n    font-size: 14px;\n\n} */\nbody {\n    background: linear-gradient( rgba(0, 0, 0, 0.616), rgba(0, 0, 0, 0.616) ),url(https://blog-content.ixigo.com/wp-content/uploads/2020/04/Bollyquiz2.jpeg) no-repeat center center fixed;\n    background-size: cover; \n    font-family: 'Ubuntu', sans-serif;\n}\n.wrapper{\n    display: grid;\n    grid-template-columns: repeat(3,1fr);\n    grid-gap: 15px;\n    margin: 50px;\n    padding: 0px 20px;\n\n}\n.pricing{\n    height:800px;\n    width: 100%;\n}\n.pricing-table{\n   box-shadow: 0px 0px 18px #ccc;\n   text-align: center;\n   padding: 30px 0px;\n   border-radius: 5px;\n   position: relative;\n \n}\n.pricing-table .head {\n    border-bottom:1px solid #eee;\n    padding-bottom: 50px;\n    transition: all 0.5s ease;\n}\n.pricing-table:hover .head{\n   border-bottom:1px solid #051930;\n   \n}\n\n.pricing-table .head .title{\n    margin-bottom: 20px;\n    font-size: 20px;\n    font-weight: 700;\n}\n\n.pricing-table .content .price{\n    background:linear-gradient(to right, #051930 0%, #051930 100%);\n    width: 90px;\n    height: 90px;\n    margin: auto;\n    line-height: 90px;\n    border-radius: 50%;\n    border: 5px solid #fff;\n    box-shadow: 0px 0px 10px #ccc;\n    margin-top: -50px;\n     transition: all 0.5s ease;\n}\n.pricing-table:hover .content .price{\n    transform: scale(1.2);\n \n}\n\n\n\n.pricing.featured .listing-badges {\n    position: absolute;\n    top: 0;\n    z-index: 999;\n    right: 0;\n    width: 100%;\n    display: block;\n    font-size: 15px;\n    padding: 0;\n    overflow: hidden;\n    height: 100px;\n}\n\n.pricing.featured .featured {\n    float: left;\n    transform: rotate(-45deg);\n    left: -67px;\n    top: 17px;\n    position: relative;\n    text-align: center;\n    width: 200px;\n    font-size: 13px;\n    margin: 0;\n    padding: 7px 10px;\n    font-weight: 500;\n    color: #fff;\n}\n.pricing.featured .featured {\n    background: #f0151f;\n}\n\n\n\n\n\n.pricing-table .content .price h1{\n    color:#fff;\n    font-size: 30px;\n    font-weight: 700;\n\tmargin-top: 19px;\n}\n.pricing-table .content ul{\n   list-style-type: none;\n   margin-bottom: 20px;\n   padding-top: 10px;\n}\n\n.pricing-table .content ul li{\n    margin: 20px 0px;\n    font-size: 14px;\n    color:#555;\n}\n\n.pricing-table .content .sign-up{\n    background:linear-gradient(to right, #051930 0%, #051930 100%);\n    border-radius: 40px;\n    font-weight: 500;\n    position: relative;\n    display: inline-block;\n}\n\n\n.pricing-table .btn {\n  color: #fff;\n  padding: 14px 40px;\n  display: inline-block;\n  text-align: center;\n  font-weight: 600;\n  -webkit-transition: all 0.3s linear;\n  -moz-transition: all 0.3 linear;\n  transition: all 0.3 linear;\n  border: none;\n  font-size: 14px;\n  text-transform: capitalize;\n  position: relative;\n  text-decoration: none;\n    margin: 2px;\n    z-index: 9999;\n    text-decoration: none;\n    border-radius:50px;\n \n}\n\n.pricing-table .btn:hover{\n  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);\n}\n\n.pricing-table .btn.bordered {\n  z-index: 50;\n  color: #333;\n}\n.pricing-table:hover .btn.bordered{\n  color:#fff !important;\n}\n\n.pricing-table .btn.bordered:after {\n  background: #fff none repeat scroll 0 0;\n  border-radius: 50px;\n  content: \"\";\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  -webkit-transition: all 0.3s linear;\n  -moz-transition: all 0.3 linear;\n  transition: all 0.3 linear;\n  width: 100%;\n  z-index: -1;  \n  -webkit-transform:scale(1);\n  -moz-transform:scale(1);\n  transform:scale(1);\n}\n.pricing-table:hover .btn.bordered:after{\n  opacity:0;\n  transform:scale(0);\n}\n\n/* @media screen and (max-width:768px){\n   .wrapper{\n        grid-template-columns: repeat(2,1fr);\n    } \n}\n\n@media screen and (max-width:600px){\n   .wrapper{\n        grid-template-columns: 1fr;\n    } \n} */\n.box1{\n \n  box-shadow: 2px 2px 6px white;\n  display:inline-block;\n  width:93%;\n  margin: 5px 11px 5px 0px;\n}\n.box2{\n    box-shadow: 2px 2px 6px white;\n    display:inline-block;\n    width:93%;\n    margin: 5px 11px 5px 0px;\n  }\n  .box3{\n    \n    box-shadow: 2px 2px 6px white;\n    display:inline-block;\n\n    width:93%;\n    margin: 5px 11px 5px 0px;\n  }\n  .no-gutters{\n     \n\n\n    width:93%;\n    margin: 5px 11px 5px 0px;\n  }\n  .no-gutters{\n     \n    width:300px;\n    margin: 5px 11px 5px 0px;\n  }\n  .no-gutters{\n      width: 1000px;\n\n      margin-top: 50px;\n      margin-bottom: 50px;\n  }\n  @media only screen and (max-width:991px) {\n    .box1 {\n      width: 350px;\n    }\n    .box2 {\n      width: 350px;\n    }\n    .box3 {\n      width: 350px;\n    }\n  }\n  @media only screen and (max-width:768px) {\n    .box1 {\n      margin: 30px 100px 30px 80px;\n    }\n    .box2 {\n      margin: 30px 100px 30px 80px;\n    }\n    .box3 {\n      margin: 30px 100px 30px 80px;\n    }\n  }\n  @media only screen and (max-width:496px) {\n    .box1 {\n      margin: 20px 60px;\n    }\n    .box2 {\n      margin: 20px 60px;\n    }\n    .box3 {\n      margin: 20px 60px;\n    }\n    .no-gutters {\n      width: 250px;\n    }\n  }\n  @media only screen and (max-width: 396px) {\n    .box1 {\n      margin: 20px;\n    }\n    .box2 {\n      margin: 20px;\n    }\n    .box3 {\n      margin: 20px;\n    }\n  }\n  @media only screen and (max-width: 296px) {\n    .box1 {\n      margin: 20px 0;\n    }\n    .box2 {\n      margin: 20px 0;\n    }\n    .box3 {\n      margin: 20px 0;\n    }\n  }\n  .gbtn{\n      color:white;\n      background-color: red;\n      height: 53px;\n      width: 192px;\n     margin: auto;\n     border-radius: 11px;\n     cursor: pointer;\n  }\n  .gbtn a{\n      color:white;\n  }\n  a:hover {\n      text-decoration: none !important;\n      color: white;\n  }\n  .section-title{\n    background-color: none;\n  }\n  .section-title h3{\n      margin-top: 45px;\n  }\n  .points{\n    color: white;\n    font-size: 18px;\n  }\n  .featured ul li{\n      color:white;\n      font-size: 17px;\n      \n  }\n  .featured h3{\n      margin-top:48px;\n  }\n  .featured h5{\n    margin-top: 43px;\n  }\n  .featured{\n    transition: all 0.4s ease-in-out;\n\tobject-fit: contain;\n    height: 484px;\n    background-color: rgb(6 6 6 / 58%);\n    cursor: pointer;\n    border-radius: 11px;\n  }\n  .featured:hover{\n    box-shadow: 3px 3px 5px #FD1C03;\n    border: 3px solid red;\n    height: 485px;\n    transform: scale(1.1);\n    /* height: 485px; */\n    /* width: 362px; */\n    transform: scale(1.05);\n    /* transform: translateY(-1rem); */\n    transition: .5s\n\n}\n  .gbtn:hover{\n    color:red;\n    background-color: white;\n    border:2px solid red;\n  }\n  .btn1{\n    border-radius: 6px;\n    width: 161px;\n    margin: 26px 9px 16px 79px;\n    height: 50px;\n    font-weight: 550 !important;\n    font-size: 20px !important;\n  }\n  .btn1:hover{\n      color:red !important;\n      background-color: white !important;\n      border:3px solid red !important;\n      font-weight: 600;\n  }\n  .footer{\n      background-color: rgba(0, 0, 0, 0.548);\n      margin-top: 127px;\n  }\n  .footer-heading{\n    font-size: 34px;\n    margin-top: 11px;\n  }\n  .section-title ul li{\n      list-style-type: disclosure-closed;\n  }\n  .section-title ul li{\n    content: \"\\2022\";  \n    color: red;\n  }\n  .devices li{\n    content: \"\\2022\";  \n    color: white;\n  }\n/* Subscription Table End */\n\n.column{\n\tpadding-top: 15px;\n\twidth:32%;\n\theight: 500px;\n\talign-items: center;\n\tbackground: none;\n}\n/* .row__item{\n\tmargin: 0;\n\tpadding: 0;\n\t\n\twidth: 15em;\n    background-color: aqua;\n} */\n\n#premiumcards{\n    background-color: none;\n    width:1107px;\n\n}\n@media screen and (max-width: 1203px){\n    #premiumcards{\n        width: 1000px\n    };\n}\n@media screen and (max-width: 1003px){\n    .pricing{\n        height: 1400px;\n    }\n    #premiumcards{\n        width: 800px;\n        height:1100px;\n    }\n    .column{\n       \n        margin-left: 10px;\n        margin-right:10px;\n    }\n   \n}\n\n@media screen and (max-width: 895px){\n    .pricing{\n        height: 1700px;\n    }\n    #premiumcards{\n        width: 700px;\n        height:1500px;\n    }\n\n    .column{\n       \n        margin-left: 10px;\n        margin-right:10px;\n    }\n \n}\n\n@media screen and (max-width: 768px){\n    .pricing{\n        height: 1800px;\n    }\n    #premiumcards{\n        width: 700px;\n        height:1600px;\n    }\n    .featured{\n        margin-left: 20px;\n        height:450px;\n        margin-top: 20px;\n    }\n    .column{\n       height: 500px;\n        margin-left: 10px;\n        margin-right:10px;\n    }\n \n}\n@media screen and (max-width: 700px){\n    .pricing{\n        height: 1900px;\n    }\n    #premiumcards{\n        width: 500px;\n        height:1700px;\n    }\n    .featured{\n        margin-left: 20px;\n        height:450px;\n        margin-top: 20px;\n    }\n    .column{\n        height: 500px;\n        margin-left: 10px;\n        margin-right:10px;\n    }\n \n}\n@media screen and (max-width: 515px){\n    .pricing{\n        height: 2000px;\n    }\n    #premiumcards{\n        margin-left: 15px;\n        width: 400px;\n        height:1600px;\n    }\n    .featured{\n        margin-left: 20px;\n        height:450px;\n    }\n    .column{\n       height: 500px;\n        margin-left: 10px;\n        margin-right:10px;\n    }\n\n \n}\n@media screen and (max-width: 515px){\n    .pricing{\n        height: 2000px;\n    }\n    #premiumcards{\n        margin-left: 10px;\n        width: 400px;\n        height:1600px;\n    }\n    .featured{\n        \n        margin-left: 10px;\n        height:450px;\n        margin-right: 10px;\n    }\n    .column{\n       height: 500px;\n        margin-left: 10px;\n        margin-right:10px;\n    }\n\n \n}\n\n@media screen and (max-width: 430px){\n    .pricing{\n        height: 1700px;\n    }\n    #premiumcards{\n        margin-left: 15px;\n        width: 350px;\n        height:1600px;\n    }\n    .featured{\n        width:320px; \n        margin-left: 20px;\n        height:440px;\n    }\n    .featured h3{\n        margin-top:30px;\n    }\n    .featured h5{\n      margin-top: 26px;\n    }\n    .points{\n        color: white;\n        font-size: 16px;\n    }\n    .featured ul li{\n        color:white;\n        font-size: 15px;\n    }\n    .column{\n       height: 460px;\n        margin-left: 10px;\n        margin-right:10px;\n    }\n}\n@media screen and (max-width: 385px){\n    .pricing{\n        height: 1800px;\n    }\n    #premiumcards{\n        margin-left: 20px;\n        width: 280px;\n        height:1700px;\n    }\n    .featured{\n        width:250px; \n        margin-left: 20px;\n        height:440px;\n    }\n    .featured h3{\n        margin-top: 30px;\n        font-size: 38px;\n    }\n    .featured h5{\n      margin-top: 26px;\n      font-size: 28px;\n    }\n    .points{\n        color: white;\n        font-size: 16px;\n    }\n    .featured ul li{\n        color:white;\n        font-size: 15px;\n    }\n    .column{\n       height: 460px;\n        margin-left: 10px;\n        margin-right:10px;\n    }\n}\n@media screen and (max-width: 330px){\n    .pricing{\n        height: 1800px;\n    }\n    #premiumcards{\n        margin-left: 5px;\n        width: 280px;\n        height:1700px;\n    }\n    .featured{\n        width:250px; \n        margin-left: 20px;\n        height:440px;\n    }\n    .featured h3{\n        margin-top:30px;\n    }\n    .featured h5{\n      margin-top: 26px;\n    }\n    .points{\n        color: white;\n        font-size: 16px;\n    }\n    .featured ul li{\n        color:white;\n        font-size: 15px;\n    }\n    .column{\n       height: 460px;\n        margin-left: 10px;\n        margin-right:10px;\n    }\n\n}\n\n}\n"
  },
  {
    "path": "static/script.js",
    "content": "var modal = document.getElementById(\"myModal\");\nvar btn = document.getElementById(\"myBtn\");\nvar span = document.getElementsByClassName(\"close\")[0]; \nbtn.onclick = function() {\n  modal.style.display = \"block\";\n}\nspan.onclick = function() {\n  modal.style.display = \"none\";\n}\nwindow.onclick = function(event) {\n  if (event.target == modal) {\n    modal.style.display = \"none\";\n  }\n}"
  },
  {
    "path": "static/style-min.css",
    "content": "#movies img,\n#movie img {\n    width: 100%\n}\n\n@media(min-width:960px) {\n    #movies .col-md-3 .well {\n        height: 390px\n    }\n    #movies .col-md-3 img {\n        height: 240px\n    }\n}"
  },
  {
    "path": "static/style.css",
    "content": "* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: \"Ubuntu\", sans-serif;\n}\nbody {\n  background: black;\n  margin: 0;\n}\n.menu {\n  background: black;\n  overflow: auto;\n}\n\n/* Navbar Css  */\n#header-nav .nav-link {\n  color: white;\n  font-size: 20px;\n  margin-left: 20px;\n}\n\n.navbar-nav {\n  display: flex;\n  align-items: center;\n  padding: 0px 7.5px;\n}\n\n@media only screen and (max-width: 1400px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 18px;\n    margin-left: 18px;\n  }\n  #searchText {\n    width: 150px;\n  }\n}\n\n@media only screen and (min-width: 1133px) and (max-width: 1275px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  }\n}\n@media only screen and (min-width: 1036px) and (max-width: 1132px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  }\n  #searchText {\n    width: 120px;\n  }\n  #submitBtn {\n    width: 60px;\n    display: flex;\n    justify-content: center;\n  }\n}\n@media only screen and (min-width: 993px) and (max-width: 1035px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 14px;\n    margin-left: 10px;\n  }\n\n  #searchText {\n    width: 100px;\n  }\n  #submitBtn {\n    width: 50px;\n    display: flex;\n    justify-content: center;\n  }\n}\n.nav-link.b:hover {\n  color: #7bdf1d;\n}\n#nav:hover {\n  background-color: #e60e23 !important;\n}\n.fas:hover {\n  background: none !important ;\n}\n.nav-item {\n  flex-wrap: wrap;\n}\n.nav-item:hover {\n  color: #7bdf1d;\n}\n.menu li a:hover {\n  color: red !important;\n  opacity: 0.5;\n}\n\nmarquee {\n  color: red;\n  font-size: 25px;\n  font-family: Arial;\n  background: black;\n}\n.logo {\n  width: 110px;\n  height: 90px;\n  padding: 3px;\n  margin: 0;\n  padding: 0;\n}\n\n.online {\n  color: red;\n  font-size: 27px;\n  padding: 10px 25px;\n  text-align: center;\n  display: block;\n  background: black;\n}\n\n.buddy {\n  display: grid;\n  place-items: center;\n  margin-left: auto;\n  margin-right: auto;\n  margin-top: 40px;\n  margin-bottom: 50px;\n}\n\n.slider {\n  height: 250px;\n  margin: auto;\n  position: relative;\n  width: 90%;\n  display: grid;\n  place-items: center;\n}\n\n.slide_track {\n  display: flex;\n  width: calc(250px * 20);\n  animation: scroll 15s linear infinite;\n}\n\n.slide_track:hover {\n  animation-play-state: paused;\n}\n\n@keyframes scroll {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(calc(-250px * 10));\n  }\n}\n\n.slide {\n  height: 200px;\n  width: 250px;\n  display: flex;\n  align-items: center;\n  padding: 15px;\n  perspective: 100px;\n}\n\nimg {\n  width: 100%;\n  transition: transform 1s;\n}\n\nimg:hover {\n  transform: translateZ(14px);\n}\n\n/* Gradient shadows*/\n\n.slider::before,\n.slider::after {\n  content: \"\";\n  height: 100%;\n  position: absolute;\n  width: 15%;\n  z-index: -1;\n}\n\n.slider::before {\n  left: 0;\n  top: 0;\n}\n\n.slider::after {\n  right: 0;\n  top: 0;\n  transform: rotateZ(180deg);\n}\n\n.poster {\n  margin: 10px;\n  display: inline-block;\n  position: relative;\n}\n/* Hover Images */\n.poster {\n  overflow: hidden;\n}\n\n.flim {\n  text-align: center;\n  position: absolute;\n  bottom: 0%;\n  background: rgb(0, 0, 0);\n  background: rgba(0, 0, 0, 0.5);\n  color: white;\n  width: 100%;\n}\n.hr {\n  width: 95%;\n  height: 2px;\n  color: black;\n}\n\n.maincontainer h2 {\n  color: red;\n  text-align: center;\n}\n.foot {\n  text-align: center;\n  background-color: black;\n  color: red;\n  height: 50px;\n  margin: 30px;\n}\n.modal {\n  display: none;\n  position: fixed;\n  z-index: 1;\n  padding-top: 100px;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: rgb(0, 0, 0);\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.modal-content {\n  background-color: #fefefe;\n  margin: auto;\n  padding: 20px;\n  border: 1px solid #888;\n  width: 80%;\n}\n.close {\n  color: #aaaaaa;\n  float: right;\n  font-size: 28px;\n  font-weight: bold;\n}\n.close:hover,\n.close:focus {\n  color: #000;\n  text-decoration: none;\n  cursor: pointer;\n}\n.buttonmodal button {\n  margin-left: 50%;\n  margin-top: 10%;\n  margin-right: 50%;\n  margin-bottom: 50%;\n  background: red;\n  color: white;\n  border-radius: 5px 5px 5px 5px;\n  cursor: pointer;\n  padding: 7px;\n  border: none;\n  font-size: 25px;\n}\n.contactForm {\n  margin: 5px;\n}\n/* Contact Us CSS starts*/\n.box {\n  background: url(\"https://cdn.pixabay.com/photo/2017/09/17/08/39/curtain-2757815_960_720.png\")\n    no-repeat center center/cover;\n  color: white;\n  text-align: center;\n  z-index: 1;\n}\n.text {\n  padding: 100px 0;\n}\n.box p {\n  font-size: 18px;\n  margin: 1rem;\n}\n.red {\n  color: #e71328;\n}\n.redline {\n  width: 50px;\n  height: 3px;\n  background-color: #e71328;\n  border: none;\n  margin: 0 auto;\n}\n.touch h2 {\n  padding-top: 20px;\n  text-align: center;\n  color: #fefefe;\n}\n/* .form-margin {\n  margin-top: 40px;\n} */\n.left {\n  text-align: left;\n}\nh3 {\n  font-variant: bold;\n  color: #fefefe;\n}\n\n.add-row {\n  flex-direction: row;\n  flex-wrap: inherit;\n  transition: 0.2s flex-direction;\n  -webkit-transition: 0.2s flex-direction;\n}\n\n.map-padd {\n  padding: 0 calc(var(--bs-gutter-x) / 2) 0 0;\n}\niframe {\n  height: 100%;\n  transition: 0.2s height;\n  -webkit-transition: 0.2s height;\n}\n\n@media only screen and (max-width: 445px) {\n  .add-row {\n    flex-direction: column;\n    transition: 0.2s flex-direction;\n    -webkit-transition: 0.2s flex-direction;\n  }\n  .map-padd {\n    padding: 0 calc(var(--bs-gutter-x) / 2);\n  }\n  iframe {\n    height: 300px;\n    transition: 0.2s height;\n    -webkit-transition: 0.2s height;\n  }\n}\n\n@media (max-width: 576px) {\n  .col-sm-6 {\n    flex: auto;\n  }\n}\n\n.address {\n  padding-top: 100px;\n  margin: 0 auto;\n}\n@media (min-width: 992px) {\n  .address {\n    max-width: 960px;\n  }\n}\n\n.redline-address {\n  border: none;\n  height: 3px;\n  background-color: #e71328;\n  width: 140px;\n  margin-bottom: 20px;\n}\n\n.address p {\n  font-weight: bold;\n  color: #afadad;\n  margin: 3px;\n}\n.phone-e {\n  padding: 15px 0;\n}\n.c_logo img {\n  height: 100px;\n  width: 100px;\n  z-index: 2;\n  float: left;\n  margin-top: 10px;\n}\n.bottom-gap {\n  margin-bottom: 100px;\n}\n/*validation css*/\n/* input.ng-valid {\n  background-color: #dff0d8;\n}\ninput.ng-invalid {\n  background-color: #f2dede;\n}\ninput.ng-pristine {\n  background-color: white;\n}\ntextarea.ng-invalid {\n  background-color: #f2dede;\n}\ntextarea.ng-pristine {\n  background-color: white;\n}\ntextarea.ng-valid {\n  background-color: #dff0d8;\n} */\n\n.fill {\n  width: 100%;\n}\n\n.fill .forthis {\n  /* box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.2); */\n  padding: 30px 20px;\n  z-index: 1000;\n}\n\n@media only screen and (min-width: 768px) {\n  .fill {\n    max-width: 700px;\n  }\n}\n\n.fill .form-row {\n  display: flex;\n  flex-direction: row;\n  transition: 0.3s flex-direction;\n  -webkit-transition: 0.3s flex-direction;\n}\n@media only screen and (max-width: 992px) {\n  .fill .form-row.one1 {\n    flex-direction: column;\n    transition: 0.3s flex-direction;\n    -webkit-transition: 0.3s flex-direction;\n  }\n}\n@media only screen and (max-width: 768px) {\n  .fill .form-row.two2 {\n    flex-direction: column;\n    transition: 0.3s flex-direction;\n    -webkit-transition: 0.3s flex-direction;\n  }\n}\n@media (min-width: 992px) {\n  .col-lg-6 {\n    flex: auto;\n  }\n}\n@media (min-width: 768px) {\n  .col-md-6 {\n    flex: auto;\n  }\n}\n\n.fill .form-row .form-group {\n  height: 40px;\n  width: 100%;\n  position: relative;\n  margin: 0.8rem 0;\n}\n\n.fill .form-row .form-group input,\n.fill .form-row .form-group textarea {\n  height: 100%;\n  width: 100%;\n  border: none;\n  font-size: 1em;\n  border-bottom: 2px solid rgba(100, 100, 100, 0.5);\n  border-radius: 0px;\n  color: #fff;\n  outline: none;\n}\n\n.fill .form-row .form-group textarea {\n  height: 100px;\n}\n.fill .size {\n  height: 100px;\n}\n\n.fill .form-group .input:focus ~ label,\n.fill .form-group textarea:focus ~ label,\n.input:not(:placeholder-shown).input:not(:focus) + label {\n  transform: translateY(-25px);\n  font-size: 10px;\n  color: #e71328;\n  text-transform: uppercase;\n  font-weight: 600;\n  padding-left: 10px;\n}\n\n.fill .form-row .form-group label {\n  position: absolute;\n  bottom: 10px;\n  left: 0;\n  color: rgba(255, 255, 255, 0.7);\n  pointer-events: none;\n  transition: all 0.4s ease;\n  margin-bottom: 0px;\n  padding-left: 15px;\n  font-size: 1em;\n}\n\n.fill .form-row > .column {\n  padding: 0 10px;\n}\n.fill .form-group .form-control {\n  padding: 0.375rem 0.375rem;\n  background-color: #000;\n}\n.fill .form-group .form-control:focus {\n  box-shadow: none;\n  outline: none;\n}\n\n.fill .form-row .form-group .gap {\n  top: 98.5px;\n}\n\n.fill .form-row .form-group .underline {\n  position: absolute;\n  bottom: 0px;\n  height: 2px;\n  width: 96%;\n}\n\n@media only screen and (min-width: 768px) {\n  .fill .form-row .form-group .extra {\n    width: 97.5%;\n  }\n}\n\n.fill .form-group .underline::before {\n  position: absolute;\n  content: \"\";\n  height: 2px;\n  width: 100%;\n  background: #e71328;\n  transform: scaleX(0);\n  transform-origin: center;\n  transition: transform 0.4s ease;\n}\n\n.fill .form-group input:focus ~ .underline::before,\n.fill .form-group input:not(:placeholder-shown) ~ .underline::before,\n.fill .form-group textarea:focus ~ .underline::before,\n.fill .form-group textarea:not(:placeholder-shown) ~ .underline::before {\n  transform: scaleX(1);\n  border-bottom: none;\n}\n\n.fill .btn-sm {\n  padding-top: 2.5rem;\n}\n\n.fill .sm-button {\n  padding: 0.4rem 1.4rem;\n  text-transform: uppercase;\n  cursor: pointer;\n  background-color: #e71328;\n  color: #000;\n  border: 2px solid #e71328;\n  font-weight: 600;\n  z-index: 100;\n  transition: 0.3s box-shadow;\n  -webkit-transition: 0.3s box-shadow;\n  outline: none;\n  border-radius: 0.25rem;\n}\n.fill .sm-button:hover {\n  box-shadow: 0 0 10px rgba(231, 19, 40, 0.7), 0 0 15px rgba(231, 19, 40, 0.7),\n    0 0 20px rgba(231, 19, 40, 0.7);\n  transition: 0.3s box-shadow;\n  -webkit-transition: 0.3s box-shadow;\n}\n\n/* contact us CSS ends */\n\n.scroll-bar {\n  height: auto;\n  width: auto;\n  margin: auto;\n  overflow-y: auto;\n  overflow-x: hidden;\n  max-width: 100%;\n}\n\n::-webkit-scrollbar-track {\n  border: 5px solid #2c2f30;\n  background-color: red;\n}\n\n::-webkit-scrollbar-thumb:hover {\n  background-color: red !important;\n}\n\n::-webkit-scrollbar-track:hover {\n  background-color: white;\n}\n\n::-webkit-scrollbar {\n  width: 15px;\n  background-color: #2c2f30;\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: black;\n  border-radius: 10px;\n}\n\n/* CSS FOR FOOTER */\n.footer {\n  margin-bottom: 15px;\n  font-family: Verdana, Geneva, Tahoma, sans-serif;\n}\n.footer-content {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px 20px;\n}\n.footer-logo {\n  width: 150px;\n  height: 120px;\n  padding: 3px;\n  margin: 0px 0px 0px 10px;\n  padding: 0;\n}\n.footer-heading {\n  color: white;\n  font-size: 33px;\n}\n.footer-left,\n.footer-right,\n.footer-middle {\n  text-align: center;\n}\n.icons {\n  margin-left: -30px;\n}\n.footer-links i {\n  font-size: 30px;\n  width: 40px;\n  height: 40px;\n  margin-top: 30px;\n  padding: 5px;\n}\n.footer-middle a i:hover {\n  background-color: white;\n  border-radius: 50px;\n  color: red;\n}\n.footer-middle-list-item {\n  list-style: none;\n  font-size: 15px;\n  font-family: cursive;\n  margin: 5px 0px 0px 15px;\n  text-align: left;\n}\n.footer-middle-list-item a {\n  text-decoration: none;\n  color: white;\n}\n.footer-middle-list-item a:hover {\n  color: red;\n}\n.footer-right {\n  margin-top: -15px;\n}\n.footer-contact-button {\n  font-size: 20px;\n  background-color: red;\n  color: black;\n  padding: 10px;\n  border: none;\n  border-radius: 10px;\n  text-decoration: none;\n}\n.footer-contact-button:hover {\n  background-color: white;\n  color: red;\n}\n.footer-bottom-tagline {\n  color: white;\n  font-size: 15px;\n  font-family: cursive;\n  margin-bottom: 25px;\n}\n\n.footer-copyright {\n  text-align: center;\n  color: white;\n  margin-top: 20px;\n  font-size: 18px;\n}\n\n/* .footer-right a:hover{transform:scale(1.1); -webkit-transform:scale(1.1);} */\n\n/***************** Media Queries *********************/\n\n@media (max-width: 850px) {\n  .footer-content {\n    display: block;\n    text-align: center;\n  }\n  .footer-middle-list-item {\n    text-align: center;\n    margin-left: -20px;\n  }\n\n  .footer-left,\n  .footer-middle,\n  .footer-right {\n    margin-top: 50px;\n  }\n}\n\n#waterdrop {\n  height: 30px;\n}\n\n#waterdrop canvas {\n  bottom: -70px !important;\n}\n\n/* Cursor Added */\n\n#Movies img:hover {\n  cursor: pointer;\n}\n#Movies b:hover {\n  cursor: pointer;\n}\n\n#WebSeries img:hover {\n  cursor: pointer;\n}\n#WebSeries b:hover {\n  cursor: pointer;\n}\n#Kids img:hover {\n  cursor: pointer;\n}\n#Kids b:hover {\n  cursor: pointer;\n}\n#fa-icon {\n  visibility: hidden;\n}\n\n@media screen and (max-device-width: 821px) {\n  #fa-icon {\n    visibility: visible;\n  }\n}\n\n/* Genre dropdown */\n.dropdown:hover .dropdown-content {\n  display: block;\n}\n\n.dropdown-content {\n  border-radius: 5px;\n  display: none;\n  position: absolute;\n  background-color: black;\n  min-width: 160px;\n  z-index: 1;\n}\n\n.dropdown-content a {\n  font-size: 15px;\n  border-radius: 5px;\n  color: white;\n  padding: 10px;\n  text-decoration: none;\n  display: block;\n}\n\n.dropdown-content a:hover {\n  background-color: red;\n  color: white;\n  text-decoration: none;\n}\n"
  },
  {
    "path": "suspense.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width\">\n    <title>ApnaTheatre.com</title>\n\n    <!-- Font  -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n    <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\" integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"\n    />\n    <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n\n    <link rel=\"stylesheet\" href=\"static/bootstrap.min.css\">\n    <link rel=\"stylesheet\" href=\"static/style-min.css\">\n    <link rel=\"stylesheet\" href=\"cards.css\">\n\n\n</head>\n\n\n<!------------------------Scroll to top button------------------------------------------------>\n<style>\n  #scrollToTopButton{\nposition:fixed;\nbottom: 40px;\nright: 25px;\nfont-size: 25px;\nz-index: 99;\nwidth: 50px;\nheight: 50px;\nbackground-color:red;\ncolor:black;\nborder: none;\ncursor: pointer;\noutline: none;\npadding: 6px;\nborder-radius: 50%;\n}\n#scrollToTopButton:hover, i:hover {\nbackground-color:white;\ncolor:red;\n}\n#nav:hover\n{\n  background-color:#e60e23!important;\n\n}\n.container {\n  text-align: center;\n}\n.nav-item :hover{\n  margin-bottom: 10px;\n  \n  \n}\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n\n</style>\n\n<body>\n    <div class=\"scroll-bar\">\n\n       <!-- navbar starts -->\n\n       <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n        <div class=\"container-fluid\">\n          <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n              height=\"24\"></a>\n          <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n            data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n            <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n          </button>\n          \n          <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n            <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n              <li class=\"nav-item\">\n                <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n              </li>\n              <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n              </li>\n              <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n              </li>\n              <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n              </li>\n              <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"tv.html\">TV</a>\n              </li>\n              <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n              </li>\n             \n              <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n              </li>\n              <li>\n                <!-- Genre dropdown starts-->\n                <div>\n                  <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                      <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                          Genres\n                      </button>\n                      <div class=\"dropdown-content\" style=\"color: white;\">\n                          <a href=\"popular.html\">Popular</a>\n                          <a href=\"crime.html\">Crime</a>\n                          <a href=\"suspense.html\">Suspense & Thriller</a>\n                          <a href=\"action.html\">Action</a>\n                          <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                          <a href=\"documentary.html\">Documentary</a>\n                          <a href=\"horror.html\">Horror</a>\n                          <a href=\"drama.html\">Drama</a>\n                          <a href=\"war.html\">War & Politics</a>\n                          <a href=\"comedy.html\">Comedy</a>\n                          <a href=\"romance.html\">Romance</a>\n                          <a href=\"anime.html\">Anime</a>\n                        </div>\n                  </div>\n                </div>\n                <!-- Genre dropdown ends-->\n              </li>\n              <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                <li>\n                  <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n                </li>\n              </div>\n            </ul>\n            <form id=\"searchForm\" class=\"d-flex\">\n              <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n              <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n            </form>\n          </div>\n        </div>\n        </nav>\n  \n          <!-- navbar ends -->\n\n        <div class=\"maincontainer\">\n            <div class=\"container\">\n                <div id=\"movies\" class=\"row\"></div>\n            </div>\n            <hr>\n            <h2>Suspense & Thriller</h2>\n            <hr>\n            <div class=\"container\" id=\"Movies\">\n              <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/wed.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>A Wednesday</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2008</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1h44m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.1</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Prakash Rathod, a retired police commissioner recounts the most memorable case of his career wherein he was informed about a bomb scare in Mumbai by an ordinary commoner.</p>\n\n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin(){\n                                window.open(\"https://www.imdb.com/video/vi1117764377?playlistId=tt1280558&ref_=tt_pr_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br> <br>\n                          <button class=\"btn_i b4_i\" onclick=\"openMovieWin()\">▶Play</button>\n                          </div>\n                          <script type=\"text/javascript\">\n                            function openMovieWin(){\n                              window.open(\"https://youtu.be/pmnnlAUDOfk\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script>\n                      </div>\n                        <div class=\"flim\">\n                            <b>A Wednesday</b>\n                            <br>\n                            IMDb - 8.1\n                        \n                    </div>\n                  </div>\n                </div>\n\n\n              <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/drishyam.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Drishyam</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2015</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2h43m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">When the disappearance of a policewoman's son threatens to ruin Vijay's family, he leaves no stone unturned in order to shield his family.</p>\n\n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin1()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin1(){\n                                window.open(\"https://www.imdb.com/video/vi1972222745?playlistId=tt4430212&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br> <br>\n                          <button class=\"btn_i b4_i\" onclick=\"openMovieWin1()\">▶Play</button>\n                          </div>\n                          <script type=\"text/javascript\">\n                            function openMovieWin1(){\n                              window.open(\"https://youtu.be/udCFbqXjrZE\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Drishyam</b>\n                            <br>\n                            IMDb - 8.2\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n              <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/family.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1 style=\"font-size: 35px;\">The Family Man</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.8</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Srikant Tiwari is a middle-class man who also serves as a world-class spy. Srikant tries to balance his familial responsibilities \n                            with the demands of the highly secretive special cell of the National Intelligence Agency that he is working for.</p>\n\n         \n                            \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin2()\">▶Trailer</button>\n                            </div>\n                            <script type=\"text/javascript\">\n                              function openWin2(){\n                                window.open(\"https://www.imdb.com/video/vi1674035225?playlistId=tt9544034&ref_=tt_pr_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br> <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n\n                      </div>\n                        <div class=\"flim\">\n                            <b>The Family Man</b>\n                            <br>\n                            IMDb - 8.8\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n              <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/money.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Money Heist</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2017</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.3</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">A criminal mastermind who goes by \"The Professor\" has a plan to pull off the biggest heist in recorded history -- to print billions of euros in the Royal Mint of Spain. </p>\n\n                         \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin3()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin3(){\n                                window.open(\"https://www.imdb.com/video/vi3823876889\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br> <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Money Heist</b>\n                            <br>\n                            IMDb - 8.3\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n              <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/luci.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Lucifier</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2016</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">5</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.1</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Based on characters created by Neil Gaiman, Sam Kieth and Mike Dringenberg, this series follows Lucifer, the original fallen angel, who has become dissatisfied with his life in hell. </p>\n\n                      \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin4()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin4(){\n                                window.open(\"https://www.imdb.com/video/vi3234640665\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br> <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Lucifier</b>\n                            <br>\n                            IMDb - 8.1\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n              <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/hunger.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>The Hunger Games</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2012</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2h23m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.2</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Katniss volunteers to replace her sister in a tournament that ends only when one participant remains. Pitted against contestants who have trained for this all their life, she has little to rely on.</p>\n\n                         \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin5()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin5(){\n                                window.open(\"https://www.imdb.com/video/vi3358368281?playlistId=tt1392170&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>The Hunger Games</b>\n                            <br>\n                            IMDb - 7.2\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n              <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/breathe.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Breathe</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2018</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.3</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">This thriller explores the lives of ordinary men faced with extraordinary circumstances.</p>\n\n                         \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin6()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin6(){\n                                window.open(\"https://www.imdb.com/video/vi2549725209?playlistId=tt6466208&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Breathe</b>\n                            <br>\n                            IMDb - 8.3\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n              <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/asur.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Asur</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.5</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">The series is set in the context of a modern day serial killer having religious ties.</p>\n\n                        \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin7()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin7(){\n                                window.open(\"https://www.imdb.com/video/vi3937386009?playlistId=tt11912196&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br> <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Asur : Welcome to your dark side</b>\n                            <br>\n                            IMDb - 8.5\n                        </div>\n                    </div>\n                  </div>\n                \n\n              <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/type.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Typewriter</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">6.5</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">A haunted house and an old book stir the imaginations of young wannabe ghost hunters, but when a new family move to town, the home's buried secrets resurface.</p>\n\n                        \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin8()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin8(){\n                                window.open(\"https://www.imdb.com/video/vi2871966745?playlistId=tt9310372&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br> <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Typewriter</b>\n                            <br>\n                            IMDb - 6.5\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n            </div>\n        </div>\n    </div>\n\n\n\n    <!-------------------------------Footer-------------------------------->\n    <div id=\"waterdrop\"></div>\n    <footer class=\"footer\">\n      <hr class=\"footer-hr\">\n        <div class=\"footer-content\">\n            <div class=\"footer-left\">\n                <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\" height=\"24\"></a>\n                <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Follow Us</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i class=\"fab fa-github github\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Services</h2>\n                <ul class=\"footer-middle-list\">\n                    <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Try Our App</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-right\">\n                <p class=\"footer-links\">\n                    <h2 class=\"footer-heading\">Contact Us</h2>\n                    <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n                    <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n                </p>\n            </div>\n        </div>\n        <hr class=\"footer-hr\">\n        <div class=\"footer-copyright\">\n            <p>Copyright &copy; and &reg; Since\n                <script>\n                    document.write(new Date().getFullYear())\n                </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>\n        </div>\n    </footer>\n\n    <!-----------------scroll back to top button-->\n    <button  id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\" >\n        <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\" ></i>\n      </button>\n      <script>\n      $(document).ready(function(){\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n        window.onscroll = function () { scrollFunction() };\n\n        function scrollFunction() {\n        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n          scrollTopButton.style.display = \"block\";\n        } else {\n          scrollTopButton.style.display = \"none\";\n        }\n      }\n\n      $(\"#scrollToTopButton\").click(function(){\n      $('html ,body').animate({scrollTop : 0},800)\n      });\n      });\n      </script>\n\n<script>\n  function logout(){\n    window.location.replace(\"login.html\");\n  }\n  </script>\n    <!-- offcanva JS and footer js -->\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n    <script src=\"js/main-min.js\"></script>\n\n    <script>\n        jQuery('#waterdrop').raindrops({\n            color: '#292c2f',\n            canvasHeight: 150,\n            density: 0.1,\n            frequency: 20\n        });\n    </script>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\" crossorigin=\"anonymous\"></script>\n    <script src=\"./static/script.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "tv.html",
    "content": "\n<!DOCTYPE html>\n<html>\n\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>ApnaTheatre | TV</title>\n  <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n\n    <!-- Font  -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n    <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\" integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"\n    />\n    <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n\n    <link rel=\"stylesheet\" href=\"webStyle.css\">\n    <link rel=\"stylesheet\" href=\"static/bootstrap.min.css\">\n    <link rel=\"stylesheet\" href=\"static/style-min.css\">\n    <link rel=\"stylesheet\" href=\"cards.css\">\n    \n\n\n<!------------------------Scroll to top button------------------------------------------------>\n<style>\n   .poster, .movie_card {\n    box-shadow: 0 0 10px red !important;\n  \n  }\n  .carousel-inner{\n  cursor: pointer;\n}\n  body{\n    font-size: 1rem !important;\n    font-family: 'Ubuntu', sans-serif;\n    -webkit-text-size-adjust: 100%;\n  }\n\n  .card-title{\n    text-align: left;\n  }\n  .nav-item :hover{\n  margin-bottom: 10px;\n  \n  \n}\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n  .flim{\n    text-align: left;\n    flex: 1 1 auto;\n    padding: 1rem 1rem;\n  }\n  .slide{\n    height: 100% !important;\n    width: 100% !important;\n  }\n\n  .row{\n    padding-left: 50px !important;;\n  }\n\n    #scrollToTopButton{\n  position:fixed;\n  bottom: 40px;\n  right: 25px;\n  font-size: 25px;\n  z-index: 99;\n  width: 50px;\n  height: 50px;\n  background-color:red;\n  color:black;\n  border: none;\n  cursor: pointer;\n  outline: none;\n  padding: 6px;\n  border-radius: 50%;\n  }\n  #scrollToTopButton:hover, i:hover {\n  background-color:white;\n  color:red;\n  }\n  \n  .scroll-bar {\n  height: auto;\n  width: auto;\n  margin: auto;\n  overflow-y: auto;\n  overflow-x: hidden;\n  max-width: 100%;\n  }\n\n::-webkit-scrollbar-track {\nborder: 5px solid #2c2f30;\nbackground-color: red;\n}\n\n::-webkit-scrollbar-thumb:hover {\nbackground-color: red !important;\n}\n\n::-webkit-scrollbar-track:hover {\nbackground-color: white;\n}\n\n::-webkit-scrollbar {\nwidth: 15px;\nbackground-color: #2c2f30;\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: black;\n  border-radius: 10px;\n}\n\n        * {\n            margin: 0;\n            padding: 0;\n        }\n        /* navbar css */\n\n        #header-nav .nav-link {\n            color: white;\n            font-size: 20px;\n            margin-left: 20px;\n        }\n\n        .menu li a:hover {\n            color: red !important;\n            opacity: 0.5;\n        }\n\n        #variety {\n            margin-top: 1rem;\n            margin-bottom: 0.5rem;\n        }\n\n        .logo {\n            width: 81px;\n            height: 52px;\n        }\n\n     \n\n        .logo {\n            width: 110px;\n            height: 90px;\n            padding: 3px;\n            margin: 0;\n            padding: 0;\n        }\n  #header-nav .nav-link {\n  color: white;\n  font-size: 20px;\n  margin-left: 20px;\n}\n    @media only screen and (max-width: 1400px){\n  #header-nav .nav-link {\n    color: white;\n    font-size: 18px;\n    margin-left: 18px;\n  }\n  #searchText{\n    width: 150px;\n  }\n}\n\n@media only screen and (min-width: 1133px) and (max-width: 1275px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n  \n}\n@media only screen and (min-width: 1035px) and (max-width: 1132px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n  #searchText{\n    width: 120px;\n  }\n  #submitBtn{\n    width: 60px;\n    display: flex;\n    justify-content: center;\n  }\n}\n@media only screen and (min-width: 993px) and (max-width: 1034px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 14px;\n    margin-left: 10px;\n  } \n\n#searchText{\n  width: 100px;\n}\n#submitBtn{\n  width: 50px;\n  display: flex;\n  justify-content: center;\n}\n}\n\n.container {\n  text-align: center;\n}\n    </style>\n</head>\n\n<body style=\"background-color:black;\" color=\"height:auto;\">\n    <div class=\"scroll-bar\">\n\n       <!-- navbar starts -->\n\n       <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n        <div class=\"container-fluid\">\n          <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n              height=\"24\"></a>\n          <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n            data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n            <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n          </button>\n          \n          <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n            <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n              <li class=\"nav-item\">\n                <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n              </li>\n              <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n              </li>\n              <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n              </li>\n              <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n              </li>\n              <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"tv.html\">TV</a>\n              </li>\n              <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n              </li>\n              \n              <li class=\"nav-item\">\n                <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n              </li>\n              <li>\n                <!-- Genre dropdown starts-->\n                <div>\n                  <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                      <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                          Genres\n                      </button>\n                      <div class=\"dropdown-content\" style=\"color: white;\">\n                          <a href=\"popular.html\">Popular</a>\n                          <a href=\"crime.html\">Crime</a>\n                          <a href=\"suspense.html\">Suspense & Thriller</a>\n                          <a href=\"action.html\">Action</a>\n                          <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                          <a href=\"documentary.html\">Documentary</a>\n                          <a href=\"horror.html\">Horror</a>\n                          <a href=\"drama.html\">Drama</a>\n                          <a href=\"war.html\">War & Politics</a>\n                          <a href=\"comedy.html\">Comedy</a>\n                          <a href=\"romance.html\">Romance</a>\n                          <a href=\"anime.html\">Anime</a>\n                        </div>\n                  </div>\n                </div>\n                <!-- Genre dropdown ends-->\n              </li>\n              <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                <li>\n                  <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n                </li>\n              </div>\n            </ul>\n            <form id=\"searchForm\" class=\"d-flex\">\n              <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n              <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n            </form>\n          </div>\n        </div>\n        </nav>\n  \n          <!-- navbar ends -->\n\n          <div class=\"main-content\">\n\n            <div id=\"carouselExampleControls\" class=\"carousel slide\" data-bs-ride=\"carousel\">\n                <div class=\"carousel-inner\">\n                    <div class=\"carousel-item active\">\n                        <img src=\"./Images/anupama2.jpg\" height=\"400\" class=\"d-block w-100\" alt=\"...\">\n                    </div>\n                    <div class=\"carousel-item\">\n                        <img src=\"./Images/yeh rishta.jpg\" height=\"400\" class=\"d-block w-100\" alt=\"...\">\n                    </div>\n                    <div class=\"carousel-item\">\n                        <img src=\"./Images/gum hai kisi.jpg\" height=\"400\" class=\"d-block w-100\" alt=\"...\">\n                    </div>\n                    <div class=\"carousel-item\">\n                        <img src=\"./Images/bigboss.jpg\" height=\"400\" class=\"d-block w-100\" alt=\"...\">\n                    </div>\n                    <div class=\"carousel-item\">\n                        <img src=\"./Images/fear.jpg\" height=\"400\" class=\"d-block w-100\" alt=\"...\">\n                    </div>\n                </div>\n\n                <a class=\"carousel-control-prev\" href=\"#carouselExampleControls\" role=\"button\" data-bs-slide=\"prev\">\n                    <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Previous</span>\n                </a>\n                <a class=\"carousel-control-next\" href=\"#carouselExampleControls\" role=\"button\" data-bs-slide=\"next\">\n                    <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Next</span>\n                </a>\n            </div>\n\n        </div>\n\n              <div class=\"row poster\">\n                <!-- <div class=\"container\"> -->\n                  <div id=\"movies\" class=\"row\"></div>\n                <!-- </div> -->\n                  <div class=\"row\">\n                    <h3 class=\"section-title text-center\">Popular</h3>\n                  </div>\n                  \n                  <div class=\"col\">\n                    <div class=\"poster\">\n                      <div class=\"flip-card_i\">\n                        <div class=\"flip-card-inner_i\">\n                          <div class=\"flip-card-front_i\">\n                              <img src=\"./Images/anupama2.jpg\" alt=\"Avatar\" style=\"width:250px;height:260px;\">\n                          </div>\n                          <div class=\"flip-card-back_i\">\n                            <h1>Anupama</h1>\n                            <div class=\"btnContainer\">\n                              <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                              <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">294<button>\n                              <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.9</button>\n                            </div>\n                              \n                            </span>\n                            <br />\n                            <br />\n                          </p>\n            \n                            <p class=\"para_i\" style=\"margin-top: -36px;\">Anupamaa, who parts with her ambitions and goals in a bid to raise her family, feels dejected when she fails to get any credit for her sacrifices and trials. She then decides to live on her own terms.</p>\n\n                            \n                                <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin()\">▶Trailer</button>\n                      <script type=\"text/javascript\">\n                        function openWin(){\n                          window.open(\"https://www.imdb.com/video/vi4272078361?ref_=ttvi_vi_imdb_1\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                        }\n                      </script>\n                            <br><br>\n                            <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n                        </div>\n                        <div class=\"flim\">\n                          <h5 class=\"card-title\">Family Man</h5>\n                          <span class=\"movie_info\">2019</span>\n                          <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 8.5 / 10</span>\n                      </div>\n                    </div>\n                </div>\n              </div>\n\n                <div class=\"col\">\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/yeh rishta.jpg\" alt=\"Avatar\" style=\"width:250px;height:260px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1 style=\"font-size: 30px;\">Yeh Rishta Kya kehlata hai</h1>\n                          <div class=\"btnContainer\">\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2009</button>\n                            <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">3543<button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\n                        </div>  \n                        </span>\n                          <br />\n                          <br />\n                        </p>\n          \n                          <p class=\"para_i\"  style=\"margin-top: -36px;\">On their honeymoon in Greece, a flirtatious Kartik and a bold Naira pretend to be strangers and try to woo each other all over again.</p>\n        \n                                \n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin1()\">▶Trailer</button>\n                              <script type=\"text/javascript\">\n                                function openWin1(){\n                                  window.open(\"https://www.imdb.com/video/vi375766041?playlistId=tt7112704&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                }\n                              </script> <br><br>\n                            <button class=\"btn_i b4_i\">▶Play</button>\n          \n                        </div>\n                      </div>\n                      <div class=\"flim\">\n                        <h5 class=\"card-title\">Yeh Rishta Kya kehlata hai</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 8.2 / 10</span>\n                    </div>\n                    </div>\n                  </div> \n                </div>\n                <div class=\"col\">\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/gum hai kisi.jpg\" alt=\"Avatar\" style=\"width:250px;height:260px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1 style=\"font-size: 30px;\">Ghum hai kisikey pyaar mein</h1>\n                          <div class=\"btnContainer\">\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                            <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">224<button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.2</button>\n                        </div>\n                          </span>\n                          <br />\n                          <br />\n                        </p>\n          \n                          <p class=\"para_i\"  style=\"margin-top: -36px;\">Virat, a young police officer, marries a woman to honour the promise he made to her dying father. But when his former lover re-enters his life, he finds his heart pulled in both directions.</p>\n          \n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin2()\">▶Trailer</button>\n                              <script type=\"text/javascript\">\n                                function openWin2(){\n                                  window.open(\"https://www.imdb.com/video/vi2629419033?playlistId=tt13085534&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                }\n                              </script> <br><br>\n                            <button class=\"btn_i b4_i\">▶Play</button>\n          \n                        </div>\n                      </div>\n                      <div class=\"flim\">\n                        <h5 class=\"card-title\">Ghum hai kisikey pyaar mein</h5>\n                        <span class=\"movie_info\">2018</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb - 9.2 / 10</span>\n                    </div>\n                    </div>\n                  </div>\n                  </div>\n                <div class=\"col\">\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/bigboss.jpg\" alt=\"Avatar\" style=\"width:250px;height:260px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1>Big Boss</h1>\n                          <div class=\"btnContainer\">\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2006</button>\n                            <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">1360<button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.0</button>\n                        </div>\n                          </span>\n                          <br />\n                          <br />\n                        </p>\n          \n                          <p class=\"para_i\"  style=\"margin-top: -36px;\">Isolated from the outside world, the contestants live together in a house under the live cameras that monitor their every move. They perform various tasks and avoid eviction to be declared a winner.</p>\n\n                                \n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin3()\">▶Trailer</button>\n                              <script type=\"text/javascript\">\n                                function openWin3(){\n                                  window.open(\"https://www.imdb.com/video/vi1928444953?playlistId=tt1281973&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                }\n                              </script><br><br>\n                            <button class=\"btn_i b4_i\">▶Play</button>\n          \n                        </div>\n                      </div>\n\n                      <div class=\"flim\">\n                        <h5 class=\"card-title\">Big Boss</h5>\n                        <span class=\"movie_info\">2020</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9.0 / 10</span>\n                    </div>\n                  </div> \n                </div>\n                </div>\n                </div>\n              </br>\n                <div class=\"row poster\">\n                  <div class=\"row\">\n                    <h3 class=\"section-title text-center\">Top Picks For You</h3>\n                </div>\n                  <div class=\"col\">\n                    <div class=\"poster\">\n                      <div class=\"flip-card_i\">\n                        <div class=\"flip-card-inner_i\">\n                          <div class=\"flip-card-front_i\">\n                              <img src=\"./Images/fear.jpg\" alt=\"Avatar\" style=\"width:250px;height:260px;\">\n                          </div>\n                          <div class=\"flip-card-back_i\">\n                            <h1>Fear Files</h1>\n                            <div class=\"btnContainer\">\n                              <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2012</button>\n                              <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">456<button>\n                              <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.3</button>\n                          </div>\n                            </span>\n                            <br />\n                            <br />\n                          </p>\n            \n                            <p class=\"para_i\"  style=\"margin-top: -36px;\">A series of tales of the supernatural inspired by real life incidents. Moving beyond ghosts and exploring all paranormal phenomenon.</p>\n            \n                                <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin4()\">▶Trailer</button>\n                                <script type=\"text/javascript\">\n                                  function openWin4(){\n                                    window.open(\"https://www.imdb.com/title/tt7666252/?ref_=ttep_ep1\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                  }\n                                </script><br><br>\n                              <button class=\"btn_i b4_i\">▶Play</button>\n            \n            \n                          </div>\n                        </div>\n                        <div class=\"flim\">\n                          <h5 class=\"card-title\">Fear Files</h5>\n                          <span class=\"movie_info\">2021</span>\n                          <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 8.3 / 10</span>\n                      </div>\n                      </div>\n                    </div> \n                </div>\n                <div class=\"col\">\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/crime.jpg\" alt=\"Avatar\" style=\"width:250px;height:260px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1>Crime Patrol</h1>\n                          <div class=\"btnContainer\">\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2003</button>\n                            <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">1231<button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8</button>\n                        </div>\n                          </span>\n                          <br />\n                          <br />\n                        </p>\n          \n                          <p class=\"para_i\"  style=\"margin-top: -36px;\">The host narrates several dramatised real-life crime cases revolving around harassment, kidnapping and murder while also presenting re-enactments.</p>\n        \n            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin5()\">▶Trailer</button>\n            <script type=\"text/javascript\">\n              function openWin5(){\n                window.open(\"https://www.imdb.com/title/tt14273900/mediaviewer/rm903397377/\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n              }\n            </script><br><br>\n                            <button class=\"btn_i b4_i\" onclick=\"openMovieWin5()\">▶Play</button>\n                            \n                            <script type=\"text/javascript\">\n                                function openMovieWin5(){\n                                  window.open(\"https://youtube.com/playlist?list=PLzufeTFnhupza0aEZ_FKj0mBguCdtwU_c\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                }\n                              </script>\n                        </div>\n                      </div>\n                      <div class=\"flim\">\n                        <h5 class=\"card-title\">Crime Patrol</h5>\n                        <span class=\"movie_info\">2020</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 8 / 10</span>\n                    </div>\n                    </div>\n                  </div> \n                </div>\n                <div class=\"col\">\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/shaurya.jpg\" alt=\"Avatar\" style=\"width:250px;height:260px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1 style=\"font-size: 30px;\">Shaurya Aur Anokhi Ki Kahan</h1>\n                          <div class=\"btnContainer\">\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                            <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">161<button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.1</button>\n                        </div>\n                        </span>\n                          <br />\n                          <br />\n                        </p>\n          \n                          <p class=\"para_i\"  style=\"margin-top: -36px;\">Shaurya, a male chauvinist who believes that every girl's future belongs in the kitchen, is in for a surprise when he crosses paths with Anokhi, a hardworking girl.</p>\n          \n                      \n                               \n            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin6()\">▶Trailer</button>\n            <script type=\"text/javascript\">\n              function openWin6(){\n                window.open(\"https://www.imdb.com/video/vi1200734233?ref_=nv_sr_srsg_1\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n              }\n            </script><br><br>\n                            <button class=\"btn_i b4_i\">▶Play</button>\n          \n                        </div>\n                      </div>\n                      <div class=\"flim\">\n                        <h5 class=\"card-title\">Shaurya Aur Anokhi Ki Kahan</h5>\n                        <span class=\"movie_info\">2020</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9.1 / 10</span>\n                    </div>\n                    </div>\n                  </div> \n                </div>\n                <div class=\"col\">\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/kbc.jpg\" alt=\"Avatar\" style=\"width:250px;height:260px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1>KBC</h1>\n                          <div class=\"btnContainer\">\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2000</button>\n                            <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">936<button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.3</button>\n                        </div>\n                        </span>\n                          <br />\n                          <br />\n                        </p>\n          \n                          <p class=\"para_i\"  style=\"margin-top: -36px;\">The host, Amitabh Bachchan, gives contestants the chance to answer a series of questions based on general knowledge and current affairs in order to win a cash prize</p>\n\n                              <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin7()\">▶Trailer</button>\n                              <script type=\"text/javascript\">\n                                function openWin7(){\n                                  window.open(\"https://www.imdb.com/title/tt13551448/?ref_=ttep_ep1\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                }\n                              </script><br><br>\n                            <button class=\"btn_i b4_i\" onclick=\"openMovieWin7()\">▶Play</button>\n                            \n                            <script type=\"text/javascript\">\n                                function openMovieWin7(){\n                                  window.open(\"https://youtube.com/playlist?list=PLzufeTFnhupxu2U99E69L5GQ-YqXA1lec\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                }\n                              </script>\n                        </div>\n                      </div>\n                      <div class=\"flim\">\n                        <h5 class=\"card-title\">Kaun Banega Crorepati</h5>\n                        <span class=\"movie_info\">2020</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 8.3 / 10</span>\n                    </div>\n                    </div>\n                  </div> \n                </div>\n              </div>\n            </br>\n              <div class=\"row poster\">\n                <div class=\"row\">\n                  <h3 class=\"section-title text-center\">Featured</h3>\n                </div>\n                <div class=\"col\">\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/indianidol.jpg\" alt=\"Avatar\" style=\"width:250px;height:260px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h4>Indian Idol</h4>\n                          <div class=\"btnContainer\">\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2004</button>\n                            <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">317<button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.5</button>\n                        </div>\n                        </span>\n                          <br />\n                          <br />\n                        </p>\n          \n                          <p class=\"para_i\"  style=\"margin-top: -36px;\">Various talented participants from India compete against each other during a singing competition in order to impress the judges and win the title.</p>\n          \n                        \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin8()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin8(){\n                                window.open(\"https://www.imdb.com/title/tt0486068/mediaviewer/rm3598682113/\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                            <button class=\"btn_i b4_i\">▶Play</button>\n          \n                        </div>\n                      </div>\n                      <div class=\"flim\">\n                        <h5 class=\"card-title\">Indian Idol</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9.5 / 10</span>\n                      </div>\n                    </div>\n                  </div> \n                </div>\n                <div class=\"col\">\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/tmkoc.jpg\" alt=\"Avatar\" style=\"width:250px;height:260px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1>TMKOC</h1>\n                          <div class=\"btnContainer\">\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2008</button>\n                            <button class=\"btn_i b2_i\"  title=\"Episodes\" style=\"color:white\">3191<button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\n                        </div> \n                        </span>\n                          <br />\n                          <br />\n                        </p>\n          \n                          <p class=\"para_i\"  style=\"margin-top: -36px;\">The residents of a housing society help each other find solutions when they face common, real-life challenges and get involved in sticky situations.</p>\n          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin9()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin9(){\n                                window.open(\"https://www.imdb.com/video/vi204126745?ref_=nv_sr_srsg_1\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                            <button class=\"btn_i b4_i\" onclick=\"openMovieWin9()\">▶Play</button>\n                            \n                            <script type=\"text/javascript\">\n                                function openMovieWin9(){\n                                  window.open(\"https://youtube.com/playlist?list=PLPuS0dQof_OGRvvdkNhWbJ8Jg3V-E3nFH\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                }\n                              </script>\n                        </div>\n                      </div>\n                      <div class=\"flim\">\n                        <h5 class=\"card-title\">Tarak Mehta Ka Ooltah Chasma</h5>\n                        <span class=\"movie_info\">2022</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 8.2 / 10</span>\n                    </div>\n                    </div>\n                  </div> \n                </div>\n                <div class=\"col\">\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/satya.jpg\" alt=\"Avatar\" style=\"width:250px;height:260px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1>Satyamev Jayate</h1>\n                          <div class=\"btnContainer\">\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2012</button>\n                            <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">25<button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.6</button>\n                        </div> \n                        </span>\n                          <br />\n                          <br />\n                        </p>\n          \n                          <p class=\"para_i\"  style=\"margin-top: -36px;\">Host Aamir Khan interacts with the general public of India and aims to enlighten citizens about the social issues present in the country.</p>\n          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin10()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin10(){\n                                window.open(\"https://www.imdb.com/video/vi2485238297?playlistId=tt2360717&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script> <br><br>\n                            <button class=\"btn_i b4_i\" onclick=\"openMovieWin10()\">▶Play</button>\n                            \n                            <script type=\"text/javascript\">\n                                function openMovieWin10(){\n                                  window.open(\"https://youtube.com/playlist?list=PLSNi9uW5H4qkFvLsemUW71TngsP4PGfyi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                                }\n                              </script>\n                        </div>\n                      </div>\n                      <div class=\"flim\">\n                        <h5 class=\"card-title\">Satyamev Jayate</h5>\n                        <span class=\"movie_info\">2021</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 8.6 / 10</span>\n                    </div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"col\">\n                  <div class=\"poster\">\n                    <div class=\"flip-card_i\">\n                      <div class=\"flip-card-inner_i\">\n                        <div class=\"flip-card-front_i\">\n                            <img src=\"./Images/24.jpg\" alt=\"Avatar\" style=\"width:250px;height:260px;\">\n                        </div>\n                        <div class=\"flip-card-back_i\">\n                          <h1>24:India</h1>\n                          <div class=\"btnContainer\">\n                            <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2013</button>\n                            <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">48<button>\n                            <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.2</button>\n                        </div> \n                        </span>\n                          <br />\n                          <br />\n                        </p>\n          \n                          <p class=\"para_i\"  style=\"margin-top: -36px;\">When a drug lord, Haroon Sherchan, threatens to let loose a virus unless the Indian government releases his brother from prison, a now-reclusive Jai Singh Rathod is asked to return to stop Sherchan.</p>\n          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin11()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin11(){\n                                window.open(\"https://www.imdb.com/video/vi302760217?playlistId=tt2792284&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script> <br><br>\n                            <button class=\"btn_i b4_i\">▶Play</button>\n          \n                        </div>\n                      </div>\n                      <div class=\"flim\">\n                        <h5 class=\"card-title\">24:India</h5>\n                        <span class=\"movie_info\">2021</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 8.2 / 10</span>\n                    </div>\n                    </div>\n                  </div>\n                </div>\n\n              \n\n\n\n\n        </div>\n    </div>\n\n\n    <!-------------------------------Footer-------------------------------->\n    <div id=\"waterdrop\"></div>\n    <footer class=\"footer\">\n        <hr class=\"footer-hr\">\n        <div class=\"footer-content\">\n            <div class=\"footer-left\">\n                <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\" height=\"24\"></a>\n                <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Follow Us</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i class=\"fab fa-github github\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Services</h2>\n                <ul class=\"footer-middle-list\">\n                    <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Try Our App</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-right\">\n                <p class=\"footer-links\">\n                    <h2 class=\"footer-heading\">Contact Us</h2>\n                    <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n                    <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n                </p>\n            </div>\n        </div>\n        <hr class=\"footer-hr\">\n        <div class=\"footer-copyright\">\n            <p>Copyright &copy; and &reg; Since\n                <script>\n                    document.write(new Date().getFullYear())\n                </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>\n        </div>\n    </footer>\n\n    <!---------scroll back to top button-->\n    <button  id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\" >\n        <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\"></i>\n      </button>\n      <script>\n      $(document).ready(function(){\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n        window.onscroll = function () { scrollFunction() };\n\n        function scrollFunction() {\n        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n          scrollTopButton.style.display = \"block\";\n        } else {\n          scrollTopButton.style.display = \"none\";\n        }\n      }\n\n      $(\"#scrollToTopButton\").click(function(){\n      $('html ,body').animate({scrollTop : 0},800)\n      });\n      });\n      </script>\n<script>\n  function logout(){\n    window.location.replace(\"login.html\");\n  }\n  </script>\n    <!-- offcanva JS and footer js -->\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n    <script src=\"js/main-min.js\"></script>\n\n    <script>\n        jQuery('#waterdrop').raindrops({\n            color: '#292c2f',\n            canvasHeight: 150,\n            density: 0.1,\n            frequency: 20\n        });\n    </script>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\" crossorigin=\"anonymous\"></script>\n    <script src=\"./static/script.js\"></script>\n</body>\n\n\n</html>\n\n\n"
  },
  {
    "path": "war.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width\">\n    <title>ApnaTheatre.com</title>\n\n    <!-- Font  -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n    <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\" integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"\n    />\n    <link href=\"./static/style.css\" rel=\"stylesheet\" type=\"text/css\" />\n\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n\n    <link rel=\"stylesheet\" href=\"static/bootstrap.min.css\">\n    <link rel=\"stylesheet\" href=\"static/style-min.css\">\n    <link rel=\"stylesheet\" href=\"cards.css\">\n\n\n</head>\n<!------------------------Scroll to top button------------------------------------------------>\n<style>\n  #scrollToTopButton{\nposition:fixed;\nbottom: 40px;\nright: 25px;\nfont-size: 25px;\nz-index: 99;\nwidth: 50px;\nheight: 50px;\nbackground-color:red;\ncolor:black;\nborder: none;\ncursor: pointer;\noutline: none;\npadding: 6px;\nborder-radius: 50%;\n}\n#scrollToTopButton:hover, i:hover {\nbackground-color:white;\ncolor:red;\n}\n#nav:hover\n{\n  background-color:#e60e23!important;\n\n}\n\n.container {\n  text-align: center;\n}\n.nav-item :hover{\n  margin-bottom: 10px;\n  \n  \n}\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n\n</style>\n\n<body>\n    <div class=\"scroll-bar\">\n\n        <!-- navbar starts -->\n\n        <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n          <div class=\"container-fluid\">\n            <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n                height=\"24\"></a>\n            <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n              data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n              <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n            </button>\n            \n            <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n              <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n                <li class=\"nav-item\">\n                  <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"tv.html\">TV</a>\n                </li>\n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n                </li>\n                \n                <li class=\"nav-item\">\n                  <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n                </li>\n                <li>\n                  <!-- Genre dropdown starts-->\n                  <div>\n                    <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                        <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                            Genres\n                        </button>\n                        <div class=\"dropdown-content\" style=\"color: white;\">\n                            <a href=\"popular.html\">Popular</a>\n                            <a href=\"crime.html\">Crime</a>\n                            <a href=\"suspense.html\">Suspense & Thriller</a>\n                            <a href=\"action.html\">Action</a>\n                            <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                            <a href=\"documentary.html\">Documentary</a>\n                            <a href=\"horror.html\">Horror</a>\n                            <a href=\"drama.html\">Drama</a>\n                            <a href=\"war.html\">War & Politics</a>\n                            <a href=\"comedy.html\">Comedy</a>\n                            <a href=\"romance.html\">Romance</a>\n                            <a href=\"anime.html\">Anime</a>\n                          </div>\n                    </div>\n                  </div>\n                  <!-- Genre dropdown ends-->\n                </li>\n                <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                  <li>\n                    <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n                  </li>\n                </div>\n              </ul>\n              <form id=\"searchForm\" class=\"d-flex\">\n                <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n                <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n              </form>\n            </div>\n          </div>\n          </nav>\n    \n            <!-- navbar ends -->\n\n        <div class=\"maincontainer\">\n            <div class=\"container\">\n                <div id=\"movies\" class=\"row\"></div>\n            </div>\n            <hr>\n            <h2>War & Politics</h2>\n            <hr>\n            <div class=\"container\" id=\"Movies\">\n              <div class=\"poster\">\n                <div class=\"flip-card_i\">\n                  <div class=\"flip-card-inner_i\">\n                    <div class=\"flip-card-front_i\">\n                        <img src=\"./Images/got.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                    </div>\n                    <div class=\"flip-card-back_i\">\n                      <h1 style=\"font-size: 30px;\">Game of Thrones</h1>\n                        <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2011</button>\n                        <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">8</button>\n                        <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">9.2</button>\n                      </span>\n                      <br />\n                      <br />\n                    </p>\n\n                      <p class=\"para_i\">Nine noble families wage war against each other in order to gain control over the mythical land of Westeros.\n                         Meanwhile, a force is rising after millenniums and threatens the existence of living men.</p>\n\n                        \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin(){\n                              window.open(\"https://youtu.be/gcTkNV5Vg1E\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br> <br>\n                        <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n\n                    </div>\n                      <div class=\"flim\">\n                          <b>Game of Thrones</b>\n                          <br>\n                          IMDb - 9.2\n                      </div>\n                  </div>\n                </div>\n              \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/dunkirk.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Dunkirk</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2017</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1h47m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.8</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">During World War II, soldiers from the British Empire, Belgium and France try to evacuate from the town of Dunkirk during a arduous battle with German forces.</p>\n\n                          \n                          <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin1()\">▶Trailer</button>\n                          <script type=\"text/javascript\">\n                            function openWin1(){\n                              window.open(\"https://www.imdb.com/video/vi3402283289?playlistId=tt5013056&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                            }\n                          </script><br> <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n  \n                          </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Dunkirk</b>\n                            <br>\n                            IMDb - 7.8\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/1917.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>1917</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2019</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">1h59m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.3</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Two soldiers, assigned the task of delivering a critical message to another battalion, risk their lives for the job in order to prevent them from stepping right into a deadly ambush.</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin2()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin2(){\n                                window.open(\"https://www.imdb.com/video/vi4095655705?playlistId=tt8579674&ref_=tt_pr_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br> \n                          <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n\n                      </div>\n                        <div class=\"flim\">\n                            <b>1917</b>\n                            <br>\n                            IMDb - 8.3\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/ashram.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Aashram</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2020</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.7</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">A police officer investigates a preacher who cons his devoted followers out of money.</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin3()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin3(){\n                                window.open(\"https://www.imdb.com/video/vi4159619353?playlistId=tt12805346&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br> <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n\n                      </div>\n                        <div class=\"flim\">\n                            <b>Aashram</b>\n                            <br>\n                            IMDb - 7.7\n                        </div>\n                    </div>\n                  </div>\n                \n\n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/cricket.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Inside Edge</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2017</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.0</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">The Mumbai Mavericks are playing their sixth season in the power play league. The preliminary rounds are going well, \n                            but when the team gets a new owner, the climate in the team changed devastating. Greed and fame come to the fore.</p>\n\n                         \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin4()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin4(){\n                                window.open(\"https://www.imdb.com/video/vi3318333209?playlistId=tt6112414&ref_=tt_pr_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n\n                      </div>\n                        <div class=\"flim\">\n                            <b>Inside Edge</b>\n                            <br>\n                            IMDb - 8.0\n                        </div>\n                    </div>\n                  </div>\n                \n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/narnia.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1 style=\"font-size: 35px;\">The Chronicles of Narnia</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2005</button>\n                          <button class=\"btn_i b2_i\"  title=\"Seasons\" style=\"color:white\">2h30m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">6.9</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">While playing, Lucy and her siblings find a wardrobe that lands them in a mystical place called Narnia. Here they realise that it was fated and they must now unite with Aslan to defeat an evil queen.</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin5()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin5(){\n                                window.open(\"https://www.imdb.com/video/vi3727140377?playlistId=tt0363771&ref_=tt_pr_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n  \n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>The Chronicles of Narnia</b>\n                            <br>\n                            IMDb - 6.9\n                        </div>\n                    </div>\n                  </div>\n                \n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/fury.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Fury</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2014</button>\n                          <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h14m</button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">7.6</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">A grizzled tank commander makes tough decisions as he and his crew fight their way across Germany in April, 1945.</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin6()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin6(){\n                                window.open(\"https://www.imdb.com/video/vi1850190873?playlistId=tt2713180&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br><br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                            </div>\n                      </div>\n                        <div class=\"flim\">\n                            <b>Fury</b>\n                            <br>\n                            IMDb - 7.6\n                        </div>\n                    </div>\n                  </div>\n                \n                \n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/hacksaw-ridge.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Hacksaw Ridge</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">2016</button>\n                          <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h19m<button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.1</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">World War II American Army Medic Desmond T. Doss, who served during the Battle of Okinawa, refuses to kill people and becomes the first man in American history to receive the Medal of Honor without firing a shot.</p>\n\n                          \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin7()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin7(){\n                                window.open(\"https://www.imdb.com/video/vi2608248601?playlistId=tt2119532&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br> <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n\n                      </div>\n                        <div class=\"flim\">\n                            <b>Hacksaw Ridge</b>\n                            <br>\n                            IMDb - 8.1\n                        </div>\n                    </div>\n                  </div>\n                \n\n                <div class=\"poster\">\n                  <div class=\"flip-card_i\">\n                    <div class=\"flip-card-inner_i\">\n                      <div class=\"flip-card-front_i\">\n                          <img src=\"./Images/saving-private-ryan.jpg\" alt=\"Avatar\" style=\"width:250px;height:360px;\">\n                      </div>\n                      <div class=\"flip-card-back_i\">\n                        <h1>Saving Private Ryan</h1>\n                          <button class=\"btn_i b3_i\"  title=\"Year\" style=\"color:white\">1998</button>\n                          <button class=\"btn_i b2_i\"  title=\"Minutes\" style=\"color:white\">2h49m<button>\n                          <button class=\"btn_i b1_i\"  title=\"IMDb\" style=\"color:white\">8.6</button>\n                        </span>\n                        <br />\n                        <br />\n                      </p>\n\n                        <p class=\"para_i\">Following the Normandy Landings, a group of U.S. soldiers go behind enemy lines to retrieve a paratrooper whose brothers have been killed in action.</p>\n\n                         \n                            <button class=\"trailer_i\" type=\"submit\" value=\"\" onclick=\"openWin8()\">▶Trailer</button>\n                            <script type=\"text/javascript\">\n                              function openWin8(){\n                                window.open(\"https://www.imdb.com/video/vi1701906201?playlistId=tt0120815&ref_=tt_ov_vi\",\"_blank\",\"top=100,left=250,height=400,width=600,channelmode=yes,fullscreen=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=no,noopener=no\");\n                              }\n                            </script><br> <br>\n                          <button class=\"btn_i b4_i\">▶Play</button>\n                          </div>\n\n                      </div>\n                        <div class=\"flim\">\n                            <b>Saving Private Ryan</b>\n                            <br>\n                            IMDb - 8.6\n                        </div>\n                    </div>\n                  \n                </div>\n            </div>\n        </div>\n    </div>\n\n\n\n    <!-------------------------------Footer-------------------------------->\n    <div id=\"waterdrop\"></div>\n    <footer class=\"footer\">\n      <hr class=\"footer-hr\">\n        <div class=\"footer-content\">\n            <div class=\"footer-left\">\n                <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\" height=\"24\"></a>\n                <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Follow Us</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i class=\"fab fa-github github\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Services</h2>\n                <ul class=\"footer-middle-list\">\n                    <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Try Our App</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-right\">\n                <p class=\"footer-links\">\n                    <h2 class=\"footer-heading\">Contact Us</h2>\n                    <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n                    <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n                </p>\n            </div>\n        </div>\n        <hr class=\"footer-hr\">\n        <div class=\"footer-copyright\">\n            <p>Copyright &copy; and &reg; Since\n                <script>\n                    document.write(new Date().getFullYear())\n                </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>\n        </div>\n    </footer>\n\n<!-----------------------scroll back to top button-->\n    <button  id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\" >\n        <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\"></i>\n      </button>\n      <script>\n      $(document).ready(function(){\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n        window.onscroll = function () { scrollFunction() };\n\n        function scrollFunction() {\n        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n          scrollTopButton.style.display = \"block\";\n        } else {\n          scrollTopButton.style.display = \"none\";\n        }\n      }\n\n      $(\"#scrollToTopButton\").click(function(){\n      $('html ,body').animate({scrollTop : 0},800)\n      });\n      });\n      </script>\n<script>\n  function logout(){\n    window.location.replace(\"login.html\");\n  }\n  </script>\n    <!-- offcanva JS and footer js -->\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n    <script src=\"js/main-min.js\"></script>\n\n    <script>\n        jQuery('#waterdrop').raindrops({\n            color: '#292c2f',\n            canvasHeight: 150,\n            density: 0.1,\n            frequency: 20\n        });\n    </script>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\" crossorigin=\"anonymous\"></script>\n    <script src=\"./static/script.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "web-series.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n\n\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>ApnaTheatre | Web Series</title>\n\n  <!-- Font  -->\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\" rel=\"stylesheet\">\n\n  <link rel=\"shortcut icon\" href=\"./Images/Logo/Title.jpeg\" type=\"image/x-icon\">\n  <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\n    integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n    integrity=\"sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==\"\n    crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n  <link rel=\"stylesheet\" href=\"webStyle.css\">\n\n<!------------------------Scroll to top button------------------------------------------------>\n<style>\n    #scrollToTopButton{\n  position: fixed;\n  bottom: 40px;\n  right: 25px;\n  font-size: 25px;\n  z-index: 99;\n  width: 50px;\n  height: 50px;\n  background-color:red;\n  color:black;\n  border: none;\n  cursor: pointer;\n  outline: none;\n  padding: 6px;\n  border-radius: 50%;\n  }\n  .carousel-inner{\n  cursor: pointer;\n}\n  #scrollToTopButton:hover, i:hover {\n  background-color:white;\n  color:red;\n  }\n  #nav:hover\n{\n  background-color:#e60e23!important;\n\n}\n    .logo {\n  width: 110px;\n  height: 90px;\n  padding: 3px;\n  margin: 0;\n  padding: 0;\n}\n.nav-item :hover{\n  margin-bottom: 10px;\n  \n  \n}\n#header-nav .navbar-nav .nav-item .nav-link:hover {\n  color: red;\n  text-decoration: none; /* Remove underline */\n  transition: color 0.3s ease, text-shadow 0.3s ease; /* Add transition effect */\n  text-shadow: 0 0 10px red; /* Add glowing effect */\n}\n.fas:hover{background: none!important ;}\n.nav-item{ flex-wrap:wrap;}\n.menu li a:hover {\n  color: red !important;\n  opacity: 0.5;\n}\n.navbar-nav{\n  display: flex;\n  align-items: center;\n  padding: 0px 7.5px;\n}\n    @media only screen and (max-width: 1400px){\n  #header-nav .nav-link {\n    color: white;\n    font-size: 18px;\n    margin-left: 18px;\n  }\n}\n\n@media only screen and (min-width: 1133px) and (max-width: 1275px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n}\n@media only screen and (min-width: 1035px) and (max-width: 1132px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 15px;\n    margin-left: 10px;\n  } \n  #searchText{\n    width: 120px;\n  }\n  #submitBtn{\n    width: 60px;\n    display: flex;\n    justify-content: center;\n  }\n}\n@media only screen and (min-width: 993px) and (max-width: 1034px) {\n  #header-nav .nav-link {\n    color: white;\n    font-size: 14px;\n    margin-left: 10px;\n  } \n\n#searchText{\n  width: 100px;\n}\n#submitBtn{\n  width: 50px;\n  display: flex;\n  justify-content: center;\n}\n}\n/* CSS FOR FOOTER */\n.footer{\nmargin-bottom:15px;\nfont-family: Verdana, Geneva, Tahoma, sans-serif;\n}\n.footer-content{\n  display:flex;\n  justify-content:space-between;\n  padding: 10px 20px;\n}\n.footer-logo{\n  width: 150px;\n  height: 120px;\n  padding: 3px;\n  margin:0px 0px 0px 10px;\n  padding: 0;\n}\n.footer-heading{\n  color:white;\n}\n.footer-left, .footer-right, .footer-middle{\ntext-align:center;\n}\n.icons{\n  margin-left:-30px;\n}\n.footer-links i{\nfont-size:30px;\nwidth:40px;\nheight:40px;\npadding:5px;\nmargin-top:30px;\n}\n.footer-middle a i:hover{\nbackground-color:white;\nborder-radius:50px;\ncolor:red;\n}\n.footer-middle-list-item{\nlist-style:none;\nfont-size:15px;\nfont-family:cursive;\nmargin:5px 0px 0px 15px;\ntext-align:left;\n}\n.footer-middle-list-item a{\ntext-decoration:none;\ncolor:white;\n}\n.footer-middle-list-item a:hover{\ncolor:red;\n}\n.footer-right{\n  margin-top:-15px;\n}\n.footer-contact-button{\nfont-size:20px;\nbackground-color:red;\ncolor:black;\npadding:10px;\nborder:none;\nborder-radius:10px;\ntext-decoration:none;\n}\n.footer-contact-button:hover{\nbackground-color:white;\ncolor:red;\n}\n.footer-bottom-tagline{\ncolor:white;\nfont-size:15px;\nfont-family:cursive;\nmargin-bottom:25px;\n}\n\n\n.footer-copyright{\ntext-align:center;\ncolor:white;\nmargin-top:20px;\nfont-size:18px;\n}\n.footer-hr{\n    color:grey;\n    font-weight:bold;\n}\n/* .footer-right a:hover{transform:scale(1.1); -webkit-transform:scale(1.1);} */\n\n/***************** Media Queries *********************/\n\n@media (max-width: 600px) {\n.footer-content{\n   display:block;\n   text-align:center;\n}\n.footer-middle-list-item{\n  text-align:center;\n  margin-left:-20px;\n}\n\n.footer-left, .footer-middle, .footer-right{\n  margin-top:50px;\n}\n}\n\n#waterdrop {\n  height: 30px;\n}\n\n#waterdrop canvas {\n  bottom: -70px !important;\n}\n\n@media only screen and (max-width: 531px) {\n  .poster {\n  margin: 50px auto !important;\n  width: 230px !important;\n}\n}\n\n.poster {\n  margin: 50px 20px;\n}\n\n</style>    \n\n\n</head>\n\n<body style=\"background-color:black;\" color=\"height:auto;\">\n\n\n    <div class=\"scroll-bar\">\n    <!-- navbar starts -->\n\n    <nav class=\"navbar navbar-expand-lg navbar-light bg-dark\" id=\"header-nav\">\n      <div class=\"container-fluid\">\n        <a class=\"navbar-brand\" href=\"home.html\"><img class=\"logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\"\n            height=\"24\"></a>\n        <button id=\"nav\" class=\"navbar-toggler\" id=\"nav\" style=\"background-color:#8b0000\" type=\"button\" data-bs-toggle=\"collapse\"\n          data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n          <span class=\"navbar-toggler-icon\" style=\"background-color:dark-grey;\"></span>\n        </button>\n        \n        <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n          <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n            <li class=\"nav-item\">\n              <a class=\"nav-link active\" aria-current=\"page\" href=\"home.html\">Home</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"movies.html\">Movies</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"web-series.html\">Web Series</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"kids.html\">Kids</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"tv.html\">TV</a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"premium.html\">Premium</a>\n            </li>\n          \n            <li class=\"nav-item\">\n              <a class=\"nav-link\" href=\"contactus.html\">Contact Us</a>\n            </li>\n            <li>\n              <!-- Genre dropdown starts-->\n              <div>\n                <div class=\"dropdown\" style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n                    <button class=\"btn btn-outline-danger dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" style=\"font-size:20px;\">\n                        Genres\n                    </button>\n                    <div class=\"dropdown-content\" style=\"color: white;\">\n                        <a href=\"popular.html\">Popular</a>\n                        <a href=\"crime.html\">Crime</a>\n                        <a href=\"suspense.html\">Suspense & Thriller</a>\n                        <a href=\"action.html\">Action</a>\n                        <a href=\"fantasy.html\">Sci-Fi & Fantasy</a>\n                        <a href=\"documentary.html\">Documentary</a>\n                        <a href=\"horror.html\">Horror</a>\n                        <a href=\"drama.html\">Drama</a>\n                        <a href=\"war.html\">War & Politics</a>\n                        <a href=\"comedy.html\">Comedy</a>\n                        <a href=\"romance.html\">Romance</a>\n                        <a href=\"anime.html\">Anime</a>\n                      </div>\n                </div>\n              </div>\n              <!-- Genre dropdown ends-->\n            </li>\n            <div style=\"position: relative; display: inline-block; padding-top: 5px; padding-left: 15px;\">\n              <li>\n                <button  type=\"button\" class=\"btn btn-light\" onclick=\"logout()\">Logout</button>\n              </li>\n            </div>\n          </ul>\n          <form id=\"searchForm\" class=\"d-flex\">\n            <input class=\"form-control me-2\" type=\"text\" id=\"searchText\" placeholder=\"Search\" aria-label=\"Search\">\n            <button class=\"btn btn-danger\" type=\"submit\">Search</button>\n          </form>\n        </div>\n      </div>\n      </nav>\n\n        <!-- navbar ends -->\n        \n        <div class=\"main-content\">\n\n            <div id=\"carouselExampleControls\" class=\"carousel slide\" data-bs-ride=\"carousel\">\n                <div class=\"carousel-inner\">\n                    <div class=\"carousel-item active\">\n                        <img src=\"./Images/family_man_cover.jpg\" height=\"400\" class=\"d-block w-100\" alt=\"...\">\n                    </div>\n                    <div class=\"carousel-item\">\n                        <img src=\"./Images/sacred_games_cover.jpg\" height=\"400\" class=\"d-block w-100\" alt=\"...\">\n                    </div>\n                    <div class=\"carousel-item\">\n                        <img src=\"./Images/scam_cover.jpg\" height=\"400\" class=\"d-block w-100\" alt=\"...\">\n                    </div>\n                    <div class=\"carousel-item\">\n                        <img src=\"./Images/Asur_cover.png\" height=\"400\" class=\"d-block w-100\" alt=\"...\">\n                    </div>\n                    <div class=\"carousel-item\">\n                        <img src=\"./Images/mirzapur_cover.jpg\" height=\"400\" class=\"d-block w-100\" alt=\"...\">\n                    </div>\n                </div>\n\n                <a class=\"carousel-control-prev\" href=\"#carouselExampleControls\" role=\"button\" data-bs-slide=\"prev\">\n                    <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Previous</span>\n                </a>\n                <a class=\"carousel-control-next\" href=\"#carouselExampleControls\" role=\"button\" data-bs-slide=\"next\">\n                    <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Next</span>\n                </a>\n            </div>\n\n        </div>\n\n\n\n        <div class=\"row poster\">\n            <div class=\"container\">\n                <div id=\"movies\" class=\"row\"></div>\n            </div>\n            <hr>\n            <div class=\"row\">\n                <h3 class=\"section-title text-center\">Popular</h3>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/family_man.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Family Man</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 8.5 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/mirzapur.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Mirzapur</h5>\n                        <span class=\"movie_info\">2018</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 8.4 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/stranger_things.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Stranger Things</h5>\n                        <span class=\"movie_info\">2016</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> IMDb 8.7 / 10</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/sacred.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Sacred Games</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> IMDb 8.7 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/got.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Game of Thrones</h5>\n                        <span class=\"movie_info\">2011</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9.3 / 10</span>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"row poster\">\n            <div class=\"row\">\n                <h3 class=\"section-title text-center\">Top Picks For You</h3>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/breaking.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Breaking Bad</h5>\n                        <span class=\"movie_info\">2013</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9.5 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/kota.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Kota Factory</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9.6 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/cricket.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Inside Edge</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 8.0 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/tvf.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Pitchers</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9.1 / 10</span>\n\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/day.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Selection Day</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 7.4 / 10</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n\n        <div class=\"row poster\">\n            <div class=\"row\">\n                <h3 class=\"section-title text-center\">Featured</h3>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/scam.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Scam 1992</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9.5 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/asur.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Asur:Welcome to your darkest side</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 8.4 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/panch.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Panchayat</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 8.7 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/ashram.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Aashram</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i> IMDb 7.5 / 10</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col\">\n                <div class=\"card movie_card\">\n                    <img src=\"./Images/criminal.jpg\" class=\"card-img-top\" alt=\"...\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title\">Criminal Justice</h5>\n                        <span class=\"movie_info\">2019</span>\n                        <span class=\"movie_info_rating\"><i class=\"fas fa-star\"></i>IMDb 9 / 10</span>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n\n\n\n\n    </div>\n\n\n\n\n\n\n\n\n    <!-------------------------------Footer-------------------------------->\n    <div id=\"waterdrop\"></div>\n    <footer class=\"footer\">\n        <hr class=\"footer-hr\">\n        <div class=\"footer-content\">\n            <div class=\"footer-left\">\n                <a href=\"home.html\"><img class=\"footer-logo\" src=\"Images/TheaterLogoFinal.png\" alt=\"\" width=\"30\" height=\"24\"></a>\n                <p class=\"footer-bottom-tagline\">Watch! Chill! Repeat!</p>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Follow Us</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"https://www.facebook.com/\" target=\"_blank\"><i class=\"fab fa-facebook-f facebook\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://twitter.com/login?lang=en\" target=\"_blank\"><i class=\"fab fa-twitter twitter\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.linkedin.com/login\" target=\"_blank\"><i class=\"fab fa-linkedin linkedin\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://www.instagram.com/\" target=\"_blank\"><i class=\"fab fa-instagram instagram\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"https://github.com/QAZIMAAZARSHAD/Movie-Streaming-Website\" target=\"_blank\"><i class=\"fab fa-github github\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Services</h2>\n                <ul class=\"footer-middle-list\">\n                    <li class=\"footer-middle-list-item\"><a href=\"home.html\">Enjoy Latest Movies</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"web-series.html\">Watch Web-Series</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"kids.html\">Everything for Kids</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"news.html\">Coming soon</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"premium.html\">Get Premium Subscription</a> </li>\n                    <li class=\"footer-middle-list-item\"><a href=\"faq.html\">FAQ</a> </li>\n                </ul>\n            </div>\n            <div class=\"footer-middle\">\n                <h2 class=\"footer-heading\">Try Our App</h2>\n                <ul class=\"footer-middle-list icons\">\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-google-play\" style=\"color:red\"></i></a>\n                    <a class=\"footer-links\" href=\"#\"><i class=\"fab fa-app-store-ios\" style=\"color:red\"></i></a>\n                </ul>\n            </div>\n            <div class=\"footer-right\">\n                <p class=\"footer-links\">\n                    <h2 class=\"footer-heading\">Contact Us</h2>\n                    <p class=\"footer-bottom-tagline\">Feel free to contact us.</p>\n                    <a class=\"footer-contact-button\" href=\"contactus.html\">Contact</a>\n                </p>\n            </div>\n        </div>\n        <hr class=\"footer-hr\">\n        <div class=\"footer-copyright\">\n            <p>Copyright &copy; and &reg; Since\n                <script>\n                    document.write(new Date().getFullYear())\n                </script> Under ApnaTheatre.com : (Project Is Done By Qazi Maaz Arshad)</p>\n        </div>\n    </footer>\n\n    <!----------------------scroll back to top button-->\n    <button  id=\"scrollToTopButton\" title=\"Go to top\" class=\"ml-5\" >\n        <i class=\"fa fa-angle-double-up\" aria-hidden=\"true\"></i>\n      </button>\n      <script>\n      $(document).ready(function(){\n        var scrollTopButton = document.getElementById(\"scrollToTopButton\");\n        window.onscroll = function () { scrollFunction() };\n\n        function scrollFunction() {\n        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {\n          scrollTopButton.style.display = \"block\";\n        } else {\n          scrollTopButton.style.display = \"none\";\n        }\n      }\n\n      $(\"#scrollToTopButton\").click(function(){\n      $('html ,body').animate({scrollTop : 0},800)\n      });\n      });\n      </script>\n<script>\n  function logout(){\n    window.location.replace(\"login.html\");\n  }\n  </script>\n    <!-- offcanva JS and footer js -->\n\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\"></script>\n    <script src=\"http://code.jquery.com/ui/1.11.4/jquery-ui.js\"></script>\n    <script src=\"https://daniellaharel.com/raindrops/js/raindrops.js\"></script>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n    <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n    <script src=\"js/main-min.js\"></script>\n    <script>\n        jQuery('#waterdrop').raindrops({\n            color: '#292c2f',\n            canvasHeight: 150,\n            density: 0.1,\n            frequency: 20\n        });\n    </script>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\" crossorigin=\"anonymous\"></script>\n    <script src=\"./static/script.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "webStyle.css",
    "content": "* {\n  margin: 0;\n  padding: 0;\n  font-family: \"Ubuntu\", sans-serif;\n}\n/* navbar css */\n#header-nav .nav-link {\n  color: white;\n  font-size: 20px;\n  margin-left: 20px;\n}\n.menu li a:hover {\n  color: red !important;\n  opacity: 0.5;\n}\n\n#variety {\n  margin-top: 1rem;\n  margin-bottom: 0.5rem;\n}\n\nimg {\n  -webkit-user-drag: none;\n  -moz-user-drag: none;\n  -o-user-drag: none;\n}\n\n.movie_card {\n  padding: 0 !important;\n  width: 14rem;\n  margin: 5px;\n  border-radius: 20px;\n  background-color: rgb(15, 15, 73) !important;\n  color: white;\n  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 15px 0 rgba(0, 0, 0, 0.19);\n\n  box-shadow: 0 0 15px red !important;\n}\n\n.movie_card img {\n  height: 16rem;\n}\n\n.movie_info {\n  color: red;\n}\n\n.movie_info i {\n  font-size: 10px;\n}\n\n.card-title {\n  width: 80%;\n  font-size: 15px;\n  height: 2rem;\n}\n\n.section-title {\n  color: red;\n  font-size: 25px;\n  margin-bottom: 40px;\n}\n\n.movie_info_rating {\n  color: goldenrod;\n  float: right;\n}\n\n.scroll-bar {\n  height: auto;\n  width: auto;\n  margin: auto;\n  overflow-y: auto;\n  overflow-x: hidden;\n  max-width: 100%;\n}\n\n::-webkit-scrollbar-track {\n  border: 5px solid #2c2f30;\n  background-color: red;\n}\n::-webkit-scrollbar-thumb:hover {\n  background-color: red !important;\n}\n::-webkit-scrollbar-track:hover {\n  background-color: white;\n}\n\n::-webkit-scrollbar {\n  width: 15px;\n  background-color: #2c2f30;\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: black;\n  border-radius: 10px;\n}\n\n.logo {\n  width: 81px;\n  height: 52px;\n  padding: 3px;\n}\n.container,\n.container-fluid,\n.container-lg,\n.container-md,\n.container-sm,\n.container-xl,\n.container-xxl {\n  padding-left: 0px !important;\n}\n.row > * {\n  padding-left: 0px !important;\n}\n/* CSS FOR FOOTER */\n@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);\n\n.footer-distributed {\n  background-color: #292c2f;\n  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);\n  box-sizing: border-box;\n  width: 100%;\n  text-align: left;\n  font: normal 16px sans-serif;\n  padding: 20px 20px;\n}\n\n.footer-distributed .footer-left p {\n  color: #8f9296;\n  font-size: 14px;\n  margin: 0;\n}\n\n/* Footer links */\n\n.footer-distributed p.footer-links {\n  font-size: 18px;\n  font-weight: bold;\n  color: #ffffff;\n  margin: 0 0 10px;\n  padding: 0;\n  transition: ease 0.25s;\n  font-family: Verdana, Geneva, Tahoma, sans-serif;\n}\n\n.footer-distributed p.footer-links a {\n  display: inline-block;\n  line-height: 1.8;\n  text-decoration: none;\n  color: inherit;\n  transition: ease 0.25s;\n}\n\n.footer-distributed .footer-links a:before {\n  content: \"·\";\n  font-size: 20px;\n  left: 0;\n  color: #fff;\n  display: inline-block;\n  padding-right: 5px;\n}\n\n.footer-distributed .footer-links .link-1:before {\n  content: none;\n}\n\n.footer-distributed .footer-right {\n  float: right;\n  margin-top: 6px;\n  max-width: 180px;\n}\n\n.footer-distributed .footer-right a {\n  display: inline-block;\n  width: 35px;\n  height: 35px;\n  background-color: #647681;\n  border-radius: 2px;\n  font-size: 20px;\n  color: #ffffff;\n  text-align: center;\n  line-height: 35px;\n  margin-left: 3px;\n  transition: all 0.25s;\n}\n\n.footer-distributed .footer-right a:hover {\n  transform: scale(1.1);\n  -webkit-transform: scale(1.1);\n}\n\n.footer-distributed p.footer-links a:hover {\n  text-decoration: underline;\n}\n\n/* Media Queries */\n\n@media (max-width: 600px) {\n  .footer-distributed .footer-left,\n  .footer-distributed .footer-right {\n    text-align: center;\n  }\n\n  .footer-distributed .footer-right {\n    float: none;\n    margin: 0 auto 20px;\n  }\n\n  .footer-distributed .footer-left p.footer-links {\n    line-height: 1.8;\n  }\n}\n\n#waterdrop {\n  height: 30px;\n}\n\n#waterdrop canvas {\n  bottom: -70px !important;\n}\n\n/* Genre dropdown */\n.dropdown:hover .dropdown-content {\n  display: block;\n}\n\n.dropdown-content {\n  border-radius: 5px;\n  display: none;\n  position: absolute;\n  background-color: black;\n  min-width: 160px;\n  z-index: 1;\n}\n\n.dropdown-content a {\n  font-size: 15px;\n  border-radius: 5px;\n  color: white;\n  padding: 10px;\n  text-decoration: none;\n  display: block;\n}\n\n.dropdown-content a:hover {\n  background-color: red;\n  color: white;\n  text-decoration: none;\n}\n\n.col img {\n  cursor: pointer;\n}\n"
  }
]