diff --git a/trending.css b/trending.css
index 247de9eb..9cc271ae 100644
--- a/trending.css
+++ b/trending.css
@@ -1,11 +1,27 @@
-div.niha{
+div.niha {
+
 
-    width: 500px;
     border: 2px solid rgb(151, 228, 240);
     display: inline-block;
     color: rgb(151, 228, 240);
     font-size: small;
 }
+
+body {
+    background-color: lightskyblue;
+}
+
+.headingfonts {
+    font-family: "Open Sans", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 40px;
+    font-style: normal;
+    font-variation-settings:
+        "wdth" 100;
+    text-align: center;
+}
+
+
 /* Typing Effect CSS */
 /* 
 @keyframes typing {
@@ -18,7 +34,7 @@ div.niha{
     50% { border-color: transparent; }
 } */
 
-#heading2{
+#heading2 {
     font-family: 'Courier New', Courier, monospace;
     font-size: 2em;
     color: #d6cece;
@@ -32,52 +48,6 @@ div.niha{
 }
 
 
-#container {
-    color: rgb(8, 9, 10);
-    text-align: center;
-    width: 1240px;
-    height: 450px;
-    display: flex;
-    flex-direction: row;
-    margin-left: 150px;
-    margin-right: 120px;
-    margin-top: 90px;
-    margin-bottom: 110px;
-    align-content: center;
-    
-}
-
-
-#button1 {
-    color: black;
-    margin: 18px 18px 50px 540px;
-    transition: 1s;
-    border: none;
-    background-color:#C07F00;
-    padding: 13px 15px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    font-size: large;
-    font-weight: bold;
-    border-radius: 20px ;
-    cursor: pointer;
-    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
-
-   
-}
-
-#button1:hover {
-    background: #C07F00;
-    box-shadow: 0 0 90px#C07F00
-    /* transform: scale(1.3); */
-}
-
-a {
-    text-decoration: none;
-    color: rgb(94, 4, 4);
-}
 
 #heading2 {
     color: #36fe9a;
@@ -88,229 +58,198 @@ a {
 
 }
 
-
-#container2 {
+.buttons {
+    background: linear-gradient(135deg, #007BFF, #1E90FF);
+    /* Gradient blue background */
+    color: white;
+    /* Text color */
+    border-radius: 30px;
+    /* Softer, more elegant rounded corners */
+    text-decoration: none;
+    /* Remove underline */
+    width: 120px;
+    /* Increased width for better readability */
+    height: 40px;
+    /* Increased height */
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    /* Classic font */
+    font-size: 16px;
+    /* Slightly larger text for better readability */
+    font-weight: bold;
+    /* Make text bold */
     text-align: center;
-    /* width:  1360px; */
-    width: 1159px;
-    height: 500px;
-    display: flex;
-    flex-direction: row;
-    margin-left: 40px;
-    margin-right: 40px;
-    margin-top:5px;
-    margin-bottom: 110px;
-    box-sizing:border-box;
-    border: 10 solid rgb(255, 130, 130);
-    /* align-items:center; */
-    justify-content:space-between;
+    /* Center text horizontally */
+    line-height: 40px;
+    /* Center text vertically */
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    /* Soft shadow for depth */
+    cursor: pointer;
+    /* Pointer on hover */
+    margin: 10px;
+    /* Add spacing around button */
+}
+
+/* Hover effect */
+.buttons:hover {
+    background: linear-gradient(135deg, #1E90FF, #007BFF);
+    /* Reverse gradient on hover */
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+    /* Deeper shadow on hover */
+    transform: translateY(-3px);
+    /* Slight lift on hover */
+}
+
+/* Active effect (when button is clicked) */
+.buttons:active {
+    background: linear-gradient(135deg, #0056b3, #004080);
+    /* Darker gradient on click */
+    transform: translateY(0);
+    /* Reset lift on click */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    /* Slightly reduced shadow */
+}
+
+.buttons a {
+    color: white;
+    /* Change link text color */
+    text-decoration: none;
+    /* Remove underline from link */
+    display: block;
+    /* Make the link a block element to fill the button */
+    width: 100%;
+    /* Make link fill the button width */
+    height: 100%;
+    /* Make link fill the button height */
+    text-align: center;
+    /* Center text */
 }
 
-#box5 {
-    background-image: url("https://www.pariaoutdoorproducts.com/cdn/shop/articles/Kesugi_Ridge_Trail.jpg?v=1483048098");
-    background-size: cover;
-    font-size: 20px;
-    font-weight: bold;
-    border-radius: 20px;
-    margin-right: 10px;
-    position: relative;
-    border: 2px solid rgb(206, 9, 6);
-    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
-
+.buttons:hover {
+    background-color: black;
+    color: white;
 }
 
-#box5:hover {
-    transform: scale(1.1);
-    border: 3px solid rgb(206, 9, 6);
-    transition: 0.9s;
-    box-shadow: rgb(206, 9, 6);
-   
-}
 
-#box6 {
-    background-image: url("https://plutoniclove.files.wordpress.com/2019/03/39223328504_a7dc3c9054_o.jpg?w=1280");
+.bottom-background {
+    position: fixed;
+    top: 0;
+    bottom: 0%;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+    /* Adjust height as needed */
+    /* background-image: url(""); */
+    /* Your moving background image */
     background-size: cover;
-    font-size: 20px;
-    font-weight: bold;
-    border-radius: 20px;
-    margin-right: 10px;
-    margin-left: 10px;
-    position: relative;
-    top: 45px;
-    border: 2px solid rgb(206, 9, 6);
-    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
-
-
-}
-
-#box6:hover {
-    transform: scale(1.1);
-    border: 5px solid rgb(206, 9, 6);
-    transition: 0.9s;
-   
+    background-repeat: no-repeat;
+    z-index: -1;
+    /* Ensure it stays behind other content */
+    right: 0%;
 }
 
-#box7 {
-    background-image: url("https://cdn.bookatrekking.com/data/images/2020/06/shutterstock-1013024953.jpg");
-    background-size: cover;
-    font-size: 20px;
-    font-weight: bold;
-    border-radius: 20px;
-    margin-right: 10px;
-    margin-left: 10px;
-    position: relative;
-    top: 80px;
-    text-align: center;
-    border: 2px solid rgb(206, 9, 6);
-    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
-
-
-
+.card-container {
+    display: flex;
+    overflow-x: auto;
+    padding: 16px;
+    gap: 16px;
+    overflow-x: hidden;
+    /* Hides horizontal scrollbar */
 
-}
 
-#box7:hover {
-    transform: scale(1.1);
-    border: 5px solid rgb(206, 9, 6);
-    transition: 0.9s;
-   
 }
 
-#box8 {
-    background-image: url("https://media.cntraveler.com/photos/643d5d0a5722b1af03793a06/16:9/w_2560%2Cc_limit/Dal%2520Lake_GettyImages-1323846766.jpg");
-    background-size: cover;
-    font-size: 20px;
-    font-weight: bold;
-    border-radius: 20px;
-    margin-right: 13px;
-    margin-left: 13px;
-    position: relative;
-    top: 45px;
-    border: 2px solid rgb(206, 9, 6);
-    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
-
-  
-    
+.cards {
+    flex: 0 1 50px;
+    /* Ensure each card has a base width of 350px */
+    margin: 8px;
+    /* Add some space around each card */
+    border: 1px solid #eaeaea;
+    /* Border for the card */
+    border-radius: 8px;
+    /* Rounded corners */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    /* Shadow for depth */
+    background-color: white;
 }
 
-#box8:hover {
-    transform: scale(1.1);
-    border: 5px solid rgb(206, 9, 6);
-    transition: 0.9s;
+.cards:hover {
+    background: linear-gradient(to bottom, blue, white);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
 }
-#box9 {
-    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPF21UstFZ23Hy_Kfnad_8zlAcnMohJLuoBg&s");
-    background-size: cover;
-    font-size: 20px;
-    font-weight: bold;
-    border-radius: 20px;
-    margin-right: 10px;
-    margin-left: 10px;
-    position: relative;
-    border: 2px solid rgb(206, 9, 6);
-    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
 
-   
+.card-image {
+    border: 1px solid #eaeaea;
+    /* Card border */
+    border-radius: 8px;
+    /* Rounded corners */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    /* Shadow for depth */
+    overflow: hidden;
+    /* Prevent overflow */
 }
 
-#box9:hover {
-    transform: scale(1.1);
-    border: 5px solid rgb(206, 9, 6);
-    transition: 0.9s;
-  
-}
-#text1{
-    color: #c84d4d;
-    align-content: center;
-    padding-top: 10%;
-}
-#text2{
-    color: #c84d4d;
-    padding-top: 10%;
-}
-#text3{
-    color: #c84d4d;
-    padding-top: 10%;
-}
-#text4{
-    color:#c84d4d;
-    padding-top: 10%;
-}
-#text0{
-    color: #c84d4d;
-    padding-top: 10%;
-}
-p{
-    color: #c84d4d;
-}
-#pre{
-    text-align: center;
-}
-.bottom-background {
+/* Button container for centering at the bottom */
+.button-container {
+    display: flex;
+    justify-content: center;
+    /* Center horizontally */
+    align-items: flex-end;
+    /* Align button at the bottom */
     position: fixed;
-    top:0;
-    bottom: 0%;
-    left: 0%;
+    bottom: 20px;
+    /* Distance from the bottom */
+    left: 0;
+    right: 0;
     width: 100%;
-    height: 100%; /* Adjust height as needed */
-    background-image: url("img/trendingbg.mp4"); /* Your moving background image */
-    background-size: cover;
-    background-repeat: no-repeat;
-    z-index: -1; /* Ensure it stays behind other content */
-    right:0%;
-}
-pre{
-    text-align: center;
-    color: #c84d4d;
-    
-}
-.golden-button {
-    position: absolute;
-    bottom: 30px; /* Adjust as needed */
-    left: 20%;
-    text-align: center;
-    touch-action: manipulation;
-    display: inline-block;
-    outline: none;
-    font-family: inherit;
-    font-size: 1em;
-    box-sizing: border-box;
-    border: none;
-    border-radius: 0.3em;
-    height: 2em;
-    line-height: 2.5em;
-    text-transform: uppercase;
-    padding: 0 1em;
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4),
-      inset 0 -2px 5px 1px rgba(139, 66, 8, 1),
-      inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
-    background-image: linear-gradient(
-      160deg,
-      #a54e07,
-      #b47e11,
-      #fef1a2,
-      #bc881b,
-      #a54e07
-    );
-    border: 1px solid #a55d07;
-    color: rgb(120, 50, 5);
-    text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
+    /* Ensure it spans the entire width */
+    padding: 10px;
+}
+
+.button1 {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    height: 50px;
+    /* Button height */
+    width: 200px;
+    /* Button width */
     cursor: pointer;
-    transition: all 0.2s ease-in-out;
-    background-size: 100% 100%;
-    background-position: center;
-  }
-  
-  .golden-button:focus,
-  .golden-button:hover {
-    background-size: 150% 150%;
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23),
-      inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
-    border: 1px solid rgba(165, 93, 7, 0.6);
-    color: rgba(120, 50, 5, 0.8);
-  }
-  
-  .golden-button:active {
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4),
-      inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
-  }
\ No newline at end of file
+    /* Pointer on hover */
+    background: linear-gradient(45deg, #36fe9a, #28a745);
+    /* Gradient color */
+    color: white;
+    /* Text color */
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+    /* More prominent shadow */
+    border: none;
+    /* Remove border */
+    border-radius: 50px;
+    /* Rounded button */
+    margin: 0 auto;
+    /* Centering in the flex container */
+    font-size: 1.1em;
+    font-weight: bold;
+}
+
+/* Make sure anchor tag inside button matches style */
+.button1 a {
+    text-decoration: none;
+    color: white;
+    /* Ensures link text is white */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    /* Fill the entire button */
+    height: 100%;
+}
+
+/* Hover effect */
+.button1:hover {
+    background: linear-gradient(45deg, #28a745, #36fe9a);
+    /* Reverse gradient on hover */
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
+    /* Deepen the shadow */
+    transform: translateY(-3px);
+    /* Lift the button slightly */
+}
\ No newline at end of file
diff --git a/trending.html b/trending.html
index 7de50f62..b7ea6eba 100644
--- a/trending.html
+++ b/trending.html
@@ -1,81 +1,85 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>TRENDING DESTINATIONS</title>
     <link rel="stylesheet" href="trending.css">
+
+
 </head>
+
 <body>
     <div class="bottom-background">
-        <video autoplay muted loop >
-          <source src="img/trendingbg.mp4">
-        </video>
-      </div>
-    <h1 id="heading2" style="color: #b47e11;">TRENDING TOURS</h1>
-    <pre id="" style="font-size: x-large;" >Explore the world with confidence through our selection popular tours crafted for those seek
-                a perfect blend of discovery and relaxation."
-    </pre>
-    <div id="container2">
-        <div class="niha" id="box5">
-            <p>The Kesugi Ridge Trail </p>
-            <span class="icon">
-                <i class="fa-regular fa-clock"></i>
-                
-                <i class="fa-solid fa-location-dot"></i>
-                
-                <a href="Blog/kesugi.html" id="bolgbtn" role="button" class="golden-button">BLOG PAGE</a>
-            </span>
-        </div>
-        <div class="niha" id="box6">
-            <p id="text1">Kepler Track</p>
-            <span class="icon">
-                <i class="fa-regular fa-clock"></i>
-                
-                <br>
-                <i class="fa-solid fa-location-dot"></i>
-                
-                <a href="Blog/kepler.html" id="bolgbtn" role="button" class="golden-button">BLOG PAGE</a>
-            </span>
-        </div>
-        <div class="niha" id="box7">
-            <p id="text2">Du Mont Blanc</p>
-            <span class="icon">
-                <i class="fa-regular fa-clock"></i>
-                
-                <br>
-                <i class="fa-solid fa-location-dot"></i>
-                
 
-                <a href="Blog/dumont.html" id="bolgbtn" role="button" class="golden-button">BLOG PAGE</a>
-            </span>
+    </div>
+    <div>
+        <h1 id="heading2" style="color:black">TRENDING TOURS</h1>
+        <pre class=" headingfonts" style="font-size: x-large;" style="color:black">Explore the world with confidence through our selection
+            popular tours crafted for those seek
+            a perfect blend of discovery and relaxation."
+            </pre>
+
+    </div>
+    <div class="card-container">
+        <div class="cards">
+            <div class="card-image">
+                <img src="https://www.pariaoutdoorproducts.com/cdn/shop/articles/Kesugi_Ridge_Trail.jpg?v=1483048098"
+                    alt="Placeholder image" width="250px" height="350px">
+            </div>
+            <p text-align="center">The Kesugi Ridge Trail </p>
+            <button class="buttons">
+                <a href="Blog/kesugi.html">Blog Page</a>
+            </button>
         </div>
-        <div class="niha" id="box8">
-            <p id="text3">Kashmir </p>
-            <span class="icon">
-                <i class="fa-regular fa-clock"></i>
-                
-                <br>
-                <i class="fa-solid fa-location-dot"></i>
-                
-                <a href="Blog/kashmir.html" id="bolgbtn" role="button" class="golden-button">BLOG PAGE</a>
-            </span>
+        <br>
+        <div class="cards">
+            <div class="card-image">
+                <img src="https://plutoniclove.files.wordpress.com/2019/03/39223328504_a7dc3c9054_o.jpg?w=1280"
+                    alt="Placeholder image" width="250px" height="350px">
+            </div>
+            <p text-align="center">Kepler Track </p>
+            <button class="buttons">
+                <a href="Blog/kesugi.html">Blog Page</a>
+            </button>
         </div>
-        <div class="niha"id="box9">
-            <p id="text4">Varanasi</p>
-            <span class="icon">
-                <i class="fa-regular fa-clock"></i>
-                
-                <br>
-                <i class="fa-solid fa-location-dot"></i>
-                
-                <a href="Blog/varanasi.html" id="bolgbtn" role="button" class="golden-button">BLOG PAGE</a>
-            </span>
+        <br>
+        <div class="cards">
+            <div class="card-image">
+                <img src="https://cdn.bookatrekking.com/data/images/2020/06/shutterstock-1013024953.jpg"
+                    alt="Placeholder image" width="250px" height="350px">
+            </div>
+            <p text-align="center">Du Mont Blanc </p>
+            <button class="buttons">
+                <a href="Blog/kesugi.html">Blog Page</a>
+            </button>
         </div>
+        <br>
+        <div class="cards">
+            <div class="card-image">
+                <img src="https://media.cntraveler.com/photos/643d5d0a5722b1af03793a06/16:9/w_2560%2Cc_limit/Dal%2520Lake_GettyImages-1323846766.jpg"
+                    alt="Placeholder image" width="250px" height="350px">
+            </div>
+            <p text-align="center">Kashmir </p>
+            <button class="buttons">
+                <a href="Blog/kesugi.html">Blog Page</a>
+            </button>
         </div>
-        <button id="button1">
-            <a href="./package.html">View all tours</a>
-        </button>
-        <hr>
+        <div class="cards">
+            <div class="card-image">
+                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPF21UstFZ23Hy_Kfnad_8zlAcnMohJLuoBg&s"
+                    alt="Placeholder image" width="250px" height="350px">
+            </div>
+            <p text-align="center">Varanasi </p>
+            <button class="buttons">
+                <a href="Blog/kesugi.html">Blog Page</a>
+            </button>
+        </div>
+    </div>
+    <button class="button1">
+        <a href="./package.html">View all tours</a>
+    </button>
 </body>
+
 </html>
\ No newline at end of file