From 2027ab58540ced4af128cdc56445a02d4cf05585 Mon Sep 17 00:00:00 2001
From: sanskrutikarnuk13 <sanskrutikarnuk13@gmail.com>
Date: Tue, 24 Feb 2026 18:31:01 +0530
Subject: [PATCH] Fix hero section overlap and heading alignment issue

---
 index.html | 33 ++++++++++++++++++++++++---------
 styles.css |  9 +++++----
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 54942ba5..3d95a1d5 100644
--- a/index.html
+++ b/index.html
@@ -190,13 +190,9 @@
     }
 
     .circle-container {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 9999;
+     position:fixed;
+ z-index:0;
+ pointer-events:none;
     }
 
     /* cookie-consent */
@@ -358,6 +354,25 @@
         margin-bottom: 20px;
       }
     }
+
+    .header__content{
+ position:relative;
+ z-index:5;
+}
+
+.header__image{
+ z-index:1;
+}
+
+@media(max-width:768px){
+
+.header__content h1{
+ font-size:1.6rem;
+ line-height:1.5;
+ text-align:center;
+}
+
+}
   </style>
   <style>
     #progress-container {
@@ -576,8 +591,8 @@ <h1>TourGuide . . .</h1>
         </div>
         <div class="header__content">
           <div>
-            <h1 data-aos="fade-in">Find Your Perfect Getaway<br />Discover the World's Best Kept <div> <span
-                  class="auto-typed" style="color: var(--head-text);"></span></div>
+            <h1 data-aos="fade-in">Find Your Perfect Getaway<br />Discover the World's Best Kept  <span
+                  class="auto-typed" style="color: var(--head-text);"></span>
             </h1>
             <p class="section__subtitle" data-aos="fade-in">
               Make your travel more enjoyable with us. We are the best travel
diff --git a/styles.css b/styles.css
index 5c7ad38b..11e57aff 100644
--- a/styles.css
+++ b/styles.css
@@ -844,13 +844,14 @@ header {
 }
 
 .header__content h1 {
-  font-size: 3rem;
-  line-height: 4rem;
+   font-size: 3rem;
+  line-height: 1.3;
   font-weight: 800;
   color: var(--text-dark);
   text-align: right;
-  width: 30rem;
-  height: 20rem;
+  max-width: 30rem;
+  height:auto;  
+  word-break: normal;
 }
 
 .header_content .action_btns {