fix: Debugged PACKAGE.html problem #697

index.html

@@ -421,16 +421,19 @@ <h3 style="font-weight: 600;font-size: 24px;">Get Flat 15% OFF</h3>
       </div>
     </div>
 
-    <section class="section__container destination__container" id="Destinations" data-aos="fade-up">
-    <div class="section__header">
-      <div>
-        <h2 class="section__title" data-aos="fade-in">Explore top destinations</h2>
-        <p class="section__subtitle" data-aos="fade-in">
+    <section class="destination" id="Destinations" data-aos="fade-up">
+    <div class="section__container destination__container">
+      <div class="section__header">
+        <div>
+          <h2 class="section__title" data-aos="fade-in">Explore top destinations</h2>
+          <p class="section__subtitle" data-aos="fade-in">
           Explore your suitable and dream places around the world. Here you
           can find your right destination.
-        </p>
+          </p>
+        </div>
       </div>
     </div>
+    </section>
 
     <!-- slideshow -->
 <!-- <div class="slideshow-container" data-aos="fade-up"> -->
@@ -520,7 +523,7 @@ <h3>MALDIVES</h3>
     <section class="trip" id="trip" data-aos="zoom-in" data-aos-offset="100">
       <div class="section__container trip__container">
         <h2 class="section__title">Best trip packages</h2>
-        <p class="section__subtitle">
+        <p>
           Explore your suitable and dream places around the world. Here you can
           find your right destination.
         </p>
@@ -605,7 +608,7 @@ <h2 class="section__title">Best trip packages</h2>
 <section class="gallary" id="ReviewGallery">
   <div class="section__container gallary__container">
     <div class="section__container gallary__container" id="originalDiv">
-      <div class="gallary__content">
+      <!-- <div class="gallary__content"> -->
         <div>
           <h2 class="section__title" data-aos="zoom-in">
             Our trip gallery that will inspire you
@@ -617,7 +620,7 @@ <h2 class="section__title" data-aos="zoom-in">
           <button class="btn btn-style" id="btn-page" onclick="replaceDivs()" data-aos="zoom-in"
             style="box-shadow: 2px 2px 8px rgb(0, 191, 255);">View All</button>
         </div>
-      </div>
+      <!-- </div> -->
     </div>
   </div>
       <br><br>

package.html

@@ -158,7 +158,7 @@
   <section class="trip" id="trip">
     <div class="section__container trip__container">
       <h2 class="section__title">Best trip package</h2>
-      <p class="section__subtitle">
+      <p>
         Explore your suitable and dream places around the world. Here you can
         find your right destination.
       </p>

styles.css

@@ -364,17 +364,36 @@ body {
   margin-bottom: 4rem;
 }
 
+.trip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
+  flex-wrap: wrap;
+  margin-bottom: 4rem;
+}
+
+.destination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
+  flex-wrap: wrap;
+  /* margin-bottom: 4rem; */
+}
+
 .section__title {
   font-size: 2rem;
   font-weight: 600;
   color: var(--text-dark);
   margin-bottom: 15px;
-  text-align: left;
+  text-align: center;
   display: inline-block;
   font-weight: 600;
   letter-spacing: 0.5px;
-  line-height: 34px;
+  line-height: 40px;
   margin-bottom: 28px;
+
 
   background: #FD4766;
   background: linear-gradient(120deg, #1C99FE 20.69%, #7644FF 50.19%, #FD4766 79.69%);
@@ -388,7 +407,6 @@ body {
   font-size: 1rem;
   color: var(--text-dark);
   max-width: calc(var(--max-width) / 2);
-  text-align: right;
 }
 
 .section_header .section_subtitle {
@@ -851,7 +869,10 @@ header {
 /* carousel */
 
 .destination__container {
-  background-color: var(--body-light);
+  /* background-color: var(--body-light); */
+  text-align: center;
+  /* margin-right: auto; */
+  /* margin-left: auto; */
 }
 
 .slideshow-container {
@@ -981,7 +1002,7 @@ header {
   max-width: var(--max-width);
 }
 
-.trip_container :is(.sectiontitle, .sectionsubtitle, .view_all) {
+.trip__container :is(.sectiontitle, .sectionsubtitle, .view_all) {
   text-align: center;
   margin-right: auto;
   margin-left: auto;
@@ -1090,7 +1111,7 @@ header {
   flex-direction: column;
 }
 
-.gallary__content>div {
+.gallary__content {
   max-width: 400px;
 }
 
@@ -1100,7 +1121,7 @@ header {
 
 .gallary_content .section_subtitle {
   margin-bottom: 2rem;
-  text-align: right;
+  /* text-align: center; */
 }
 
 .trip-gallery-container {
@@ -1132,10 +1153,14 @@ header {
   gap: 2rem;
 }
 
-.subscribe_container .subscribecontent .section_title {
+.subscribe_container .subscribecontent{
   text-align: left;
 }
 
+.section__subtitle {
+  text-align: center;
+}
+
 .subscribe_container .subscribecontent .section_subtitle {
   text-align: left;
 }
@@ -2058,6 +2083,14 @@ body {
   /* Use the text-dark custom property for color */
 }
 
+.headingofexploretopdestinations {
+  font-weight: bolder;
+  /* Set font weight to bolder */
+  text-align: center;
+  color: var(--text-dark);
+  /* Use the text-dark custom property for color */
+}
+
 /* Styling for elements with .aboutcon class */
 .aboutcon {
   display: flex;
@@ -2376,9 +2409,10 @@ body {
   .section__subtitle {
     font-size: 0.7rem; /* Adjust font size for smaller devices */
     padding: 0 10px; /* Add vertical padding */
+
     text-align: center; /* Center align text */
-    max-width: 30%; /* Limit width to prevent overflow */
-    margin: 0 auto; /* Center the subtitle */
+    max-width: 100%; /* Limit width to prevent overflow */
+    margin: auto; /* Center the subtitle */
   }
 }