diff --git a/style.css b/style.css
index 89991e0..cf00b2d 100644
--- a/style.css
+++ b/style.css
@@ -3,53 +3,57 @@
 * {
     padding: 0;
     margin: 0;
+    box-sizing: border-box;
     font-family: "Poppins", sans-serif;
 }
 
 body {
     background-color: black;
+    color: white;
 }
 
 .main {
-    background-image: url(assets/images/bg.jpg);
-    height: 70vh;
+    height: 100vh;
     position: relative;
+    background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/f562aaf4-5dbb-4603-a32b-6ef6c2230136/dh0w8qv-9d8ee6b2-b41a-4681-ab9b-8a227560dc75.jpg/v1/fill/w_1280,h_720,q_75,strp/the_netflix_login_background__canada__2024___by_logofeveryt_dh0w8qv-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzIwIiwicGF0aCI6IlwvZlwvZjU2MmFhZjQtNWRiYi00NjAzLWEzMmItNmVmNmMyMjMwMTM2XC9kaDB3OHF2LTlkOGVlNmIyLWI0MWEtNDY4MS1hYjliLThhMjI3NTYwZGM3NS5qcGciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.LOYKSxIDqfPwWHR0SSJ-ugGQ6bECF0yO6Cmc0F26CQs'); 
     background-position: center center;
     background-repeat: no-repeat;
-    background-size: max(1200px, 100vw);
+    background-size: cover; /* Use cover to ensure it always fills the screen */
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
 }
 
 .main .box {
-    height: 70vh;
+    height: 100vh;
     width: 100%;
-    opacity: 0.69;
+    opacity: 0.7; 
     background-color: black;
     position: absolute;
     top: 0;
+    left: 0;
+    z-index: 1;
 }
 
 nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    max-width: 65vw;
+    max-width: 90vw;
     margin: auto;
     height: 100px;
-
-}
-
-nav img {
-    color: red;
-    width: 130px;
     position: relative;
     z-index: 10;
 }
 
-nav button {
+nav img {
+    width: 140px;
     position: relative;
     z-index: 10;
 }
 
+
 .hero {
     height: calc(100% - 100px);
     display: flex;
@@ -59,74 +63,99 @@ nav button {
     color: white;
     position: relative;
     font-family: "Martel Sans", serif;
-    gap: 23px;
+    gap: 20px;
     padding: 0 30px;
+    text-align: center;
+    z-index: 10;
 }
 
-.hero> :first-child {
-    font-weight: bolder;
+.hero > :first-child {
+    font-weight: 900;
     font-size: 48px;
-    text-align: center;
+    line-height: 1.1;
 }
 
-.hero> :nth-child(2) {
+.hero > :nth-child(2) {
     font-weight: 400;
     font-size: 24px;
-    text-align: center;
+    line-height: 1.2;
 }
 
-.hero> :nth-child(3) {
+.hero > :nth-child(3) {
     font-weight: 400;
     font-size: 20px;
-    text-align: center;
+    line-height: 1.2;
 }
 
 .separation {
-    height: 6px;
-    background-color: rgb(79, 74, 74);
+    height: 7px;
+    background-color: rgb(46, 46, 46);
     position: relative;
     z-index: 20;
 }
 
 .btn {
-    padding: 3px 8px;
-    font-weight: 400;
-    background-color: rgb(117, 115, 115);
+    padding: 8px 18px;
+    font-weight: 600;
+    background-color: rgba(255, 255, 255, 0.1);
     color: white;
-    border: 1px solid white;
+    border: 1px solid rgba(255, 255, 255, 0.5);
     border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+.btn:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+}
 
+.btn-red-sm {
+    background-color: #e50914;
+    color: white;
+    border: none;
+    padding: 8px 18px;
+    font-weight: 600;
+}
+.btn-red-sm:hover {
+    background-color: #b0060f;
 }
 
 .btn-red {
-    background-color: red;
+    background-color: #e50914;
     color: white;
-    padding: 3px 24px;
+    padding: 15px 25px;
     font-size: 20px;
     border-radius: 4px;
     font-weight: bold;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+.btn-red:hover {
+    background-color: #b0060f;
 }
 
 .hero-buttons {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 14px;
+    gap: 10px;
+    flex-wrap: wrap;
 }
 
 .main input {
-    padding: 7px 101px 8px 14px;
+    padding: 15px 14px;
+    width: 380px;
+    max-width: 90%;
     color: white;
-    font-size: 12px;
-    font-weight: 900;
+    font-size: 16px;
+    font-weight: 400;
     border-radius: 4px;
     background-color: rgba(23, 23, 23, 0.7);
     border: 1px solid rgba(126, 122, 122, 0.5);
+    outline: none;
 }
-
-.btn-red-sm {
-    background-color: red;
-    color: white;
+.main input::placeholder {
+    color: rgba(255, 255, 255, 0.7);
 }
 
 .first {
@@ -135,302 +164,281 @@ nav button {
     max-width: 70vw;
     margin: auto;
     color: white;
-    justify-content: center;
     align-items: center;
-}
-@media screen and (max-width:1300px){
-    .first{
-        flex-wrap: wrap;
-    }
-    .secImg img {
-        width: 305px;
-        position: relative;
-        z-index: 10;
-    }
-    .hero> :first-child {
-        font-size: 32px;
-    }
-    .hero> :nth-child(2){
-        font-size: 18px;
-    }
-    .hero> :nth-child(3){
-        font-size: 18px;
-    }
-    nav{
-        max-width: 90vw;
-    }
-    .main input{
-        padding: 7px 53px 8px 14px;
-    }
-    .hero-buttons {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 14px;
-    }
-    .faq h2{
-        text-align: center;
-        font-size: 32px;
-    }
-    footer{
-        max-width: 90vw;
-    }
-    .footer-item{
-        align-items: center;
-    }
+    padding: 70px 0;
+    flex-wrap: wrap;
 }
 
-.secImg img {
-    width: 400px;
-    position: relative;
-    z-index: 10;
+.second {
+    flex-direction: row-reverse;
 }
-
-.secImg {
-    position: relative;
-
-}
-section.first > div{
+section.first > div {
     display: flex;
     flex-direction: column;
-    padding: 34px 0;
+    padding: 0 34px;
+    flex: 1;
+    min-width: 300px;
+    text-align: left;
+    gap: 15px;
 }
 
-section.first > div :nth-child(1){
-    font-size: 30px;
+section.first > div :first-child {
+    font-size: 48px;
     font-weight: bolder;
+    line-height: 1.1;
 }
 
-section.first > div :nth-child(2){
+section.first > div :nth-child(2) {
     font-size: 24px;
+    line-height: 1.2;
 }
-.faq h2{
-    text-align: center;
-    font-size: 48px;
+
+.secImg {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    min-width: 400px;
 }
-.faq{
+
+.secImg img {
+    width: 100%;
+    max-width: 500px;
+    height: auto;
+    position: relative;
+    z-index: 10;
+}
+
+.secImg video {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 73%;
+    height: 70%;
+    max-width: 73%;
+    max-height: 70%;
+    z-index: 9;
+    object-fit: contain;
+}
+
+.faq {
     background-color: black;
     color: white;
-    padding: 34px;
-}
-.faqbox:hover{
-    background-color: rgb(147, 146, 146);
+    padding: 70px 0;
+    text-align: center;
 }
-.faqbox svg{
-    filter: invert(1);
+
+.faq h2 {
+    font-size: 48px;
+    font-weight: 900;
+    margin-bottom: 40px;
 }
-.faqbox{
+
+.faqbox {
     display: flex;
-    transition: all 0.5s ease-out;
-    background-color: rgb(84, 83, 83);
     justify-content: space-between;
+    align-items: center;
     padding: 24px;
     max-width: 60vw;
     font-size: 24px;
-    margin: 20px auto;
+    background-color: rgb(45, 45, 45);
+    margin: 10px auto;
     cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.faqbox:hover {
+    background-color: rgb(65, 65, 65);
+}
+
+.faqbox span {
+    font-weight: 400;
+    flex-grow: 1;
+    text-align: left;
+}
+
+.faqbox svg {
+    filter: invert(1);
+    width: 36px;
+    height: 36px;
 }
-footer{
+
+footer {
     color: white;
-    max-width: 60vw;
+    max-width: 70vw;
     margin: auto;
-    padding: 14px;
+    padding: 60px 0;
 }
-.footer{
+
+footer .questions {
+    padding: 20px 0;
+    font-size: 16px;
+    color: rgba(255, 255, 255, 0.7);
+    margin-bottom: 30px;
+}
+
+.footer {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 20px;
     color: white;
 }
-@media screen and (max-width:1300px){
-    .footer{
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        color: white;
-        gap: 25px;
-    }
-}
-.footer-item{
+
+.footer-item {
     display: flex;
     flex-direction: column;
-    gap: 23px;
+    gap: 15px;
 }
-.footer a{
+
+.footer a {
     text-decoration: none;
-    color: white;
+    color: rgba(255, 255, 255, 0.7);
     font-size: 14px;
+    transition: color 0.3s ease;
+}
+.footer a:hover {
+    color: white;
+    text-decoration: underline;
+}
+
+@media screen and (max-width: 1300px) {
+    .main {
+        background-size: cover;
+        background-position: top center;
+    }
+    nav {
+        max-width: 90vw;
+    }
+    nav img {
+        width: 120px;
+    }
+    .hero > :first-child {
+        font-size: 40px;
+    }
+    .hero > :nth-child(2),
+    .hero > :nth-child(3) {
+        font-size: 20px;
+    }
+    .hero-buttons {
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+    }
+    .main input {
+        width: 80%;
+        max-width: 400px;
+        padding: 12px 14px;
+        font-size: 14px;
+    }
+    .btn-red {
+        width: 80%;
+        max-width: 400px;
+        font-size: 18px;
+        padding: 12px 15px;
+    }
+
+    .first {
+        flex-direction: column;
+        text-align: center;
+        max-width: 90vw;
+    }
+    .second {
+        flex-direction: column;
+    }
+    section.first > div {
+        text-align: center;
+        padding: 20px 0;
+    }
+    section.first > div :first-child {
+        font-size: 32px;
+    }
+    section.first > div :nth-child(2) {
+        font-size: 18px;
+    }
+    .secImg {
+        width: 90%;
+        max-width: 450px;
+        margin-top: 20px;
+    }
+    .secImg img {
+        width: 100%;
+    }
+    .faq h2 {
+        font-size: 36px;
+    }
+    .faqbox {
+        max-width: 90vw;
+        font-size: 18px;
+        padding: 18px;
+    }
+    footer {
+        max-width: 90vw;
+    }
+    .footer {
+        grid-template-columns: 1fr 1fr;
+        gap: 20px;
+    }
+    .footer-item {
+        align-items: flex-start;
+    }
+    footer .questions {
+        text-align: left;
+    }
 }
-footer .questions{
-    padding: 34px 0;
-}
-#chatbot-widget {
-  position: fixed;
-  bottom: 30px;
-  right: 30px;
-  z-index: 1000;
-  font-family: 'Segoe UI', Arial, sans-serif;
-}
-#chatbot-toggle {
-  background: #e50914;
-  color: #fff;
-  border: none;
-  border-radius: 50%;
-  width: 56px;
-  height: 56px;
-  font-size: 2rem;
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-  transition: background 0.2s;
-}
-#chatbot-toggle:hover {
-  background: #b0060f;
-}
-#chatbot-window {
-  width: 340px;
-  min-height: 420px;
-  max-height: 70vh;
-  background: #181818;
-  color: #fff;
-  border-radius: 18px;
-  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
-  position: absolute;
-  bottom: 70px;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  animation: fadeIn 0.3s;
-}
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(30px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-#chatbot-header {
-  background: #e50914;
-  color: #fff;
-  padding: 14px 18px;
-  font-weight: bold;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 1.1rem;
-  letter-spacing: 0.5px;
-}
-#chatbot-close {
-  cursor: pointer;
-  font-size: 1.4rem;
-  transition: color 0.2s;
-}
-#chatbot-close:hover {
-  color: #ffd700;
-}
-#chatbot-messages {
-  flex: 1;
-  padding: 18px 12px 8px 12px;
-  overflow-y: auto;
-  background: #222;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.chat-message {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-.chat-message.user {
-  align-items: flex-end;
-}
-.bubble {
-  max-width: 80%;
-  padding: 12px 16px;
-  border-radius: 18px;
-  font-size: 1rem;
-  line-height: 1.5;
-  margin-bottom: 2px;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
-  word-break: break-word;
-}
-.chat-message.user .bubble {
-  background: #e50914;
-  color: #fff;
-  border-bottom-right-radius: 6px;
-  border-bottom-left-radius: 18px;
-  border-top-left-radius: 18px;
-  border-top-right-radius: 18px;
-}
-.chat-message.bot .bubble {
-  background: #333;
-  color: #fff;
-  border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 18px;
-  border-top-left-radius: 18px;
-  border-top-right-radius: 18px;
-}
-#chatbot-loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 10px 0;
-  background: #222;
-}
-.spinner {
-  border: 4px solid #444;
-  border-top: 4px solid #e50914;
-  border-radius: 50%;
-  width: 28px;
-  height: 28px;
-  animation: spin 1s linear infinite;
-}
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-#chatbot-form {
-  display: flex;
-  border-top: 1px solid #333;
-  background: #181818;
-  padding: 10px 12px;
-  gap: 8px;
-}
-#chatbot-input {
-  flex: 1;
-  padding: 10px 14px;
-  border: none;
-  background: #222;
-  color: #fff;
-  font-size: 1rem;
-  border-radius: 12px;
-  outline: none;
-  transition: box-shadow 0.2s;
-}
-#chatbot-input:focus {
-  box-shadow: 0 0 0 2px #e50914;
-}
-#chatbot-form button {
-  background: #e50914;
-  color: #fff;
-  border: none;
-  padding: 0 18px;
-  font-size: 1.2rem;
-  border-radius: 12px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-#chatbot-form button:hover {
-  background: #b0060f;
-}
-@media (max-width: 500px) {
-  #chatbot-window {
-    width: 98vw;
-    min-width: 0;
-    right: 1vw;
-    left: 1vw;
-    bottom: 80px;
-    max-height: 80vh;
-  }
-  #chatbot-toggle {
-    right: 10px;
-    bottom: 10px;
-  }
+
+@media screen and (max-width: 768px) {
+    nav {
+        height: 80px;
+    }
+    nav img {
+        width: 100px;
+    }
+    .btn {
+        padding: 6px 12px;
+        font-size: 14px;
+    }
+    .btn-red-sm {
+        padding: 6px 12px;
+    }
+    .hero > :first-child {
+        font-size: 28px;
+    }
+    .hero > :nth-child(2),
+    .hero > :nth-child(3) {
+        font-size: 16px;
+    }
+    .main input, .btn-red {
+        width: 90%;
+        max-width: 300px;
+        font-size: 16px;
+        padding: 10px 10px;
+    }
+    section.first > div :first-child {
+        font-size: 28px;
+    }
+    section.first > div :nth-child(2) {
+        font-size: 16px;
+    }
+    .faq h2 {
+        font-size: 30px;
+    }
+    .faqbox {
+        font-size: 16px;
+        padding: 16px;
+    }
+    .faqbox svg {
+        width: 28px;
+        height: 28px;
+    }
+    .footer {
+        grid-template-columns: 1fr;
+    }
+    .footer-item {
+        align-items: center;
+    }
+    footer .questions {
+        text-align: center;
+    }
 }
\ No newline at end of file