rmv video fr mobile - btn update translate - form styling fix

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

css/style.css

@@ -255,11 +255,15 @@ a {
   align-items: center;
   justify-content: center;
   position: relative;
+  background-image: url("../img/wp-phone.jpeg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
 }
 
 #hero::after {
   width: 100%;
-  height: 105vh;
+  height: 104vh;
   content: "";
   position: absolute;
   top: 0;
@@ -751,6 +755,8 @@ input::placeholder {
   border: none;
   margin-bottom: 20px;
   padding: 10px;
+  width: 160px;
+  opacity: 0.9;
 }
 
 .btn-danger:hover {
@@ -817,6 +823,7 @@ input::placeholder {
   outline: none;
   border: 1px solid black;
   color: white;
+  padding: 0.475rem 0.75rem;
 }
 
 .credentials {
@@ -994,8 +1001,7 @@ input::placeholder {
   }
 
   #hero::after {
-    width: 100%;
-    height: 103vh;
+    height: 101.5vh;
   }
 
   .img-huila {
@@ -1011,6 +1017,12 @@ input::placeholder {
   .ca-img {
     margin-top: 12%;
   }
+
+  .btn-danger {
+    padding: 22px;
+    width: 248px;
+    font-size: 25px;
+  }
 }
 
 /* media quaries  LAPTOP  */
@@ -1151,6 +1163,16 @@ input::placeholder {
   .sticky {
     width: 7%;
   }
+
+  video {
+    display: none;
+    visibility: hidden;
+  }
+
+  #hero::after {
+    width: 100%;
+    height: 100vh;
+  }
 }
 
 /* SMALL DEVICES  */
@@ -1171,7 +1193,7 @@ input::placeholder {
   }
 
   .btn-danger {
-    width: 126px;
+    width: 115px;
     font-size: 10px;
   }
 
@@ -1198,7 +1220,7 @@ input::placeholder {
 
   .logo-banner {
     position: absolute;
-    top: -80%;
+    top: -51%;
     left: -28%;
     width: 143%;
   }
@@ -1247,4 +1269,4 @@ input::placeholder {
   .sec-nav li {
     font-size: 1rem;
   }
-}
+}

index.html

@@ -18,7 +18,7 @@
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
 <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
 <!-- font awesome  -->
-<script src="https://kit.fontawesome.com/442c3c1532.js" crossorigin="anonymous"></script>
+<script src="https://kit.fontawesome.com/3c98501c58.js" crossorigin="anonymous"></script>
 <!-- animations  -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
 <!-- own style  -->
@@ -151,7 +151,11 @@
         <div class="caption">
             <img class="logo-banner" src="img/whitenobg-logo.png" alt="">
             <h2 class="titulo-banner text-center font-weight-bold text-white">NACIMOS PARA <br> VIAJAR</h2>
-            <a href="https://master--touch-co-nz.translate.goog/index.html?_x_tr_sl=es&_x_tr_tl=en&_x_tr_hl=en-US&_x_tr_pto=wapp" class="btn btn-danger">translate to english</a>
+            <a href="https://master--touch-co-nz.translate.goog/index.html?_x_tr_sl=es&_x_tr_tl=en&_x_tr_hl=en-US&_x_tr_pto=wapp" 
+            class="btn btn-danger">
+                English
+                <i class="fa-solid fa-globe"></i>
+            </a>
             <a href="#eventos"><button class="button-banner mt-2 text-white m-auto d-block">RESERVAR TOUR</button></a>
             <a href="#eventos"><i class="arrow-banner text-white fa-solid fa-angle-down"></i></a>    
         </div>
@@ -363,7 +367,8 @@ <h1 class="contact-title text-center text-white">CONTACTO</h1>
             </div>
             <div class="mb-3 frm-w">
                 <label for="validationTextarea" class="form-label">Mensaje</label>
-                <textarea name="message" class="form-control" id="validationTextarea" placeholder="Required example textarea" required></textarea>
+                <textarea name="message" class="form-control" id="validationTextarea" 
+                 required></textarea>
                 <div class="invalid-feedback">
                     Please enter a message in the textarea.
                 </div>