iceholidays-frontend 0.3.0 → 0.5.0

data/app/assets/stylesheets/iceholidays/frontend/application.sass.scss

@@ -0,0 +1,2194 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */
+
+@import url("//fonts.googleapis.com/css?family=Poppins:ital,wght@0,100;0,200;0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,200;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import "utils/_variables.scss";
+@import "utils/_antd_overrides.scss";
+@import "layout.scss";
+@import "common.scss";
+@import "widgets/search_bar.scss";
+@import "widgets/filter_pills.scss";
+@import "actiontext.scss";
+ 
+
+body{
+  margin: 0;
+  background: #F2F2F2;
+  font-family: $font-default;
+}
+
+
+.flip{
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1);
+}
+
+#homepage{
+  
+  &_banner{
+    // min-height: 760px;
+    border-radius: 0px 0px 50px 50px;
+
+    [class~='ant-carousel'] {
+      .slick-prev{
+        inset-inline-start: 115px;
+      }
+      .slick-next{
+        inset-inline-end: 115px;
+      }
+      .slick-slide img{
+        width: 100%;
+      }
+    }
+  }
+}
+
+
+#popular-destinations{
+  margin-bottom: 30px;
+
+  h1{
+    font-family: $font-default;
+    text-align: center;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    text-transform: uppercase;
+    color: #545047;
+    font-size: 24px;
+    font-weight: 300;
+    line-height: 36px;
+
+    width: 80%;
+    margin: 20px auto;
+  }
+
+  .ant-tabs >.ant-tabs-nav{
+    display: none;
+  }
+  
+
+  .country{
+    position: relative;
+    display: block;
+
+    &-image{
+      width: 100%;
+      height: 392px;
+      object-fit: cover;
+      object-position: center;
+      border-width: 5px 0px 5px 0px;
+      border-style: solid;
+      border-color: $primary-color;
+    }
+
+    &-name{
+      width: auto;
+      height: 42px;
+      top: 24px;
+      left: 24px;
+      position: absolute;
+      text-align: left;
+      font-size: 28px;
+      font-weight: 300;
+      line-height: 42px;
+    }
+
+    .bottom-logo{
+      position: absolute;
+      bottom: -35px;
+      border-color: #F2F2F2;
+      left: 0;
+      width: 100%;
+      text-align: center;
+    }
+  }
+
+
+  h2{
+    font-family: $font-default;
+    font-size: 22px;
+    font-weight: 600;
+    line-height: 33px;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+  }
+
+  .top-cities,
+  .more-cities,
+  .highlights {
+    padding: 10px 25px;
+  }
+
+  .more-cities {
+
+    .other-destinations{
+      display: inline-flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    
+      a{
+        font-family: $font-default;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        text-align: left;
+        text-underline-position: from-font;
+        text-decoration-skip-ink: none;
+        background: linear-gradient(360deg, $primary-color 5.04%, $secondary-color 99.13%);
+        color: #836848;
+    
+        width: auto;
+        padding:  5px 15px;
+        gap: 4px;
+        border-radius: 20px;
+        opacity: 0px;
+      }
+    }
+  }
+
+  .highlights{
+    display: inline-flex;
+    overflow-x: auto;
+    gap: 10px;
+    margin-top: 20px;
+    width: 100%;
+
+    a{
+      flex-grow: 1;
+      flex-shrink: 0;
+    }
+
+    .tour{
+      min-width: 210px;
+      height: 352px;
+      padding: 15px 0px 0px 0px;
+      gap: 0px;
+      border-radius: 20px;
+      opacity: 0px;
+      object-fit: cover;
+      position: relative;
+      background-size: cover;
+      position: relative;
+      background-position: top;
+      background-color: linear-gradient(
+        rgba(0, 0, 0, 0.5),
+        rgba(0, 0, 0, 0.5)
+      );
+
+      .details{
+        position: absolute;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        bottom: 10px;
+        width: 100%;
+        padding: 0 15px;
+
+        .city-name{
+          font-family: $font-default;
+          font-size: 20px;
+          font-weight: 400;
+          line-height: 30px;
+          letter-spacing: 0.05em;
+          text-align: left;
+          text-underline-position: from-font;
+          text-decoration-skip-ink: none;
+          color: $secondary-color;
+        }
+  
+        .tour-count{
+          width: 80px;
+          font-family: $font-default;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 21px;
+          letter-spacing: 0.05em;
+          text-align: right;
+          text-underline-position: from-font;
+          text-decoration-skip-ink: none;
+          color: #FFFFFF;
+          display: inline-flex;
+          align-items: center;
+          justify-content: flex-end;
+        }
+      }
+    }
+  }
+}
+
+
+#testimonials-section{
+  display: none;
+}
+
+
+#listing-page{
+
+  &_header{
+    .location-dropdown{
+      margin: 0;
+    }
+
+    .location-filter.ant-select{
+      // line-height: 36px;
+      height: auto;
+      width: 100%;
+
+      .ant-select-selector{
+        background: #FFFF;
+        height: 36px;
+      }
+
+      .ant-select-selection-item{
+        font-family: $font-default;
+        font-family: Poppins;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 5%;
+        text-align: left;
+        text-underline-position: from-font;
+        text-decoration-skip-ink: none;
+        color: #836848;
+        text-transform: uppercase;
+      }
+
+      .ant-select-arrow{
+        inset-inline-end: 20px;
+        color: #836848;
+      }
+    }
+
+  }
+
+  &_body{
+    padding: 20px var(--side-padding);
+  }
+
+  #legends{
+    --legend-size: 10px;
+    padding: 20px 0;
+
+    .ant-badge-status-dot{
+      width: var(--legend-size);
+      height: var(--legend-size);
+    }
+
+    .ant-badge-status-text{
+      font-family: $font-default;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 18px;
+      letter-spacing: 0.05em;
+      text-align: center;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+
+    }
+  }
+
+  #tours{
+    .tour{
+      flex-direction: column;
+
+      &_image{
+        height: 100%;
+
+        img{
+          width: 100%;
+          height: 100%;
+          border-top-left-radius: 20px;
+          border-top-right-radius: 20px;
+        }
+      }
+
+      &_details{
+        padding: 20px;
+        background-color: #FFFFFF;
+        height: 100%;
+
+        .ant-space{
+          .ant-space-item:first-child{
+            position: relative;
+          }
+        }
+
+        &_title{
+          font-family: $font-default;
+          font-size: 16px;
+          font-weight: 500;
+          line-height: 24px;
+          letter-spacing: 0.05em;
+          text-align: left;
+          text-underline-position: from-font;
+          text-decoration-skip-ink: none;
+          max-width: calc(100% - 30px);
+          overflow-wrap: anywhere;
+        }
+
+        &_subtitle{
+          font-family: $font-default;
+          font-size: 15px;
+          font-weight: 400;
+          line-height: 24px;
+          letter-spacing: 0.05em;
+          text-align: left;
+          text-underline-position: from-font;
+          text-decoration-skip-ink: none;
+          color: #00000066;
+        }
+
+        &_country{
+          font-family: $font-default;
+          font-size: 15px;
+          font-weight: 500;
+          line-height: 22.5px;
+          letter-spacing: 0.05em;
+          text-align: left;
+          text-underline-position: from-font;
+          text-decoration-skip-ink: none;
+        }
+
+        &_code{
+          color: $primary-color;
+        }
+
+        &_country, &_code{
+          svg{
+            vertical-align: middle;
+          }
+        }
+
+        &_info{
+          position: absolute;
+          right: 0;
+          top: 0;
+          
+          svg{
+            color: $primary-color;
+            cursor: pointer;
+           }
+        }
+
+        &_dates{
+          padding: 12px 8px 17px 8px;
+
+          label{
+            font-family: $font-default;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 21px;
+            letter-spacing: 0.05em;
+            text-align: left;
+            text-underline-position: from-font;
+            text-decoration-skip-ink: none;
+            color: #434039;
+          }
+
+          .date-selector{
+            justify-content: center;
+          }
+        }
+      }
+
+      &_pricing{
+        background-color: $primary-color;
+        padding: 20px;
+        border-bottom-left-radius: 20px;
+        border-bottom-right-radius: 20px;
+        height: 100%;
+
+        &_details{
+          align-items: baseline;
+          justify-content: center;
+          gap: 10px;
+        }
+
+        &>.ant-space{
+          height: 100%;
+          width: 100%;
+          justify-content: center;
+        }
+
+        .ant-space-item{
+          width: 100%;
+        }
+
+        span{
+          font-family: $font-default;
+          font-size: 15px;
+          font-weight: 400;
+          line-height: 22.5px;
+          letter-spacing: 0.05em;
+          text-align: center;
+          text-underline-position: from-font;
+          text-decoration-skip-ink: none;
+
+          &.price{
+            font-size: 28px;
+            font-weight: 500;
+            line-height: 42px;
+            color: #FFFFFF;
+          }
+
+        }
+
+        .select-tour{
+          padding: 5px 27px 5px 27px;
+          border-radius: 20px;
+          font-family: $font-default;
+          font-size: 15px;
+          font-weight: 700;
+          line-height: 22.5px;
+          letter-spacing: 0.05em;
+          text-align: center;
+          text-underline-position: from-font;
+          text-decoration-skip-ink: none;
+          color: $primary-color;
+          background-color: #FFFFFF;
+          display: block;
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+.tour_details_description.ant-modal{
+  .ant-modal-title{
+    font-family: $font-default;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0.05em;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    color: #836848;
+  }
+
+  .ant-modal-body{
+    overflow-y: auto;
+    max-height: 500px;
+  }
+}
+
+.tour_details_itinerary.ant-modal{
+  #itinerary-file img{
+    width: 100%;
+    object-fit: contain;
+  }
+}
+
+.tour_details_all_dates.ant-modal{
+  .ant-modal-title{
+    padding-right: 30px;
+  }
+  .custom-modal-header-title{
+    font-family: $font-default;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 30px;
+    letter-spacing: 0.05em;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    color: #434039;
+  }
+
+  .custom-modal-header-legends{
+    font-family: $font-default;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0.05em;
+    text-align: center;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    color: #545047;
+
+    --legend-size: 10px;
+
+    .ant-badge-status-dot{
+      width: var(--legend-size);
+      height: var(--legend-size);
+    }
+
+  }
+
+  .ant-modal-footer{
+    text-align: center;
+    
+    button{
+      padding: 5px 27px 5px 27px;
+      border-radius: 32px;
+      background: #AA853E;
+      color: #FFFFFF;
+      text-transform: uppercase;
+      
+      &:hover{
+        color: #FFFFFF;
+        background: $primary-color;
+        border-color: $primary-color;
+        outline: $primary-color;
+      }
+    }
+  }
+}
+
+.country-filter_option{
+  font-family: $font-default;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 30px;
+  letter-spacing: 0.05em;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  text-transform: uppercase;
+}
+
+*{
+  //can change to container width
+  --side-padding: 20px;
+}
+
+#show-page{
+  $transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &_header{
+    h1{
+      font-size: 18px;
+      line-height: 27px;
+      letter-spacing: 0%;
+      text-align: left;
+      overflow-wrap: anywhere;
+    }
+
+    .tour_details{
+      display: inline-flex;
+      gap: 10px;
+      opacity: 0.5;
+
+      span{
+        font-family: $font-default;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 24px;
+        letter-spacing: 0.05em;
+        text-align: left;
+        text-underline-position: from-font;
+        text-decoration-skip-ink: none;
+      }
+    }
+  }
+
+  #date-selector{
+    padding: 20px var(--side-padding);
+
+    [class~='ant-carousel'] {
+      .slick-slide > div{
+        padding: 0 5px;
+      }
+
+      .slick-arrow{
+        color: rgba(149, 148, 146, 1);
+
+        &:hover{
+          color: $primary-color;
+        }
+      }
+
+      .slick-prev{
+        inset-inline-start: -40px;
+      }
+
+      .slick-next{
+        inset-inline-end: -40px;
+      }
+    }
+    .date-box{
+      background: #FFFFFF;
+      border: 1px solid #DFB16333;
+      padding: 6px 13px 6px 13px;
+      border-radius: 20px;
+      border-width: 1px;
+      color:rgba(0, 0, 0, 0.8);
+      cursor: pointer;
+      text-align: center;
+
+      &_date{
+        font-family: $font-default;
+        font-size: 15px;
+        font-weight: 400;
+        line-height: 22.5px;
+        letter-spacing: 0.05em;
+        text-align: center;
+        text-underline-position: from-font;
+        text-decoration-skip-ink: none;
+      }
+
+      span{
+        font-family: $font-default;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 18px;
+        letter-spacing: 0.05em;
+        text-align: center;
+        text-underline-position: from-font;
+        text-decoration-skip-ink: none;
+        opacity: 50%;
+      }
+
+      &_price{
+        font-family: $font-default;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 21px;
+        letter-spacing: 0.05em;
+        text-align: center;
+        text-underline-position: from-font;
+        text-decoration-skip-ink: none;
+      }
+
+      &.selected{
+        background-color: $primary-color;
+        color: rgba(249, 246, 243, 1);
+
+        .date-box_date, .date-box_price{
+          font-weight: 700;
+        }
+      }
+    }
+  }
+
+  &_body{
+    padding: 20px var(--side-padding);
+    gap: 20px;
+
+    .details{
+      // max-width: 790px;
+    }
+
+    .details-container{
+      padding: 20px;
+      gap: 20px;
+      border-radius: 20px;
+      background: #FFFFFF;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0px 5px 20px 0px #00000026;
+
+      &_header{
+        font-family: $font-default;
+        font-size: 16px;
+        font-weight: 700;
+        line-height: 24px;
+        letter-spacing: 0.05em;
+        text-align: left;
+        text-underline-position: from-font;
+        text-decoration-skip-ink: none;
+        color: $supportive-color;
+      }
+
+      &_content{
+       #things-to-know{
+        padding: 20px;
+        border-radius: 5px;
+        background: #F9F6F3;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        justify-content: center;
+        text-align: center;
+        gap: 20px;
+
+        .item{
+          color: $supportive-color;
+
+          .icon{
+            opacity: 0.8;
+          }
+  
+          label{
+            font-family: $font-default;
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 18px;
+            letter-spacing: 0.05em;
+            text-align: center;
+            text-underline-position: from-font;
+            text-decoration-skip-ink: none;
+          }
+  
+          &.guaranteed{
+            color: $primary-color;
+          }
+        }
+
+       } 
+
+       #description{
+        position: relative;
+        transition: height $transition;
+
+        &+button{
+          margin-top: 10px;
+          font-family: $font-default;
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 21px;
+          letter-spacing: 5%;
+          text-align: right;
+          color: #545047;
+         }
+
+        &.collapsed{
+           height: 300px;
+           overflow: hidden;
+
+          &::after{
+             content: "";
+             position: absolute;
+             z-index: 1;
+             bottom: 0;
+             left: 0;
+             pointer-events: none;
+             background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 90%);
+             width: 100%;
+             height: 5em;
+            transition: opacity $transition;
+          }
+
+          &+button{
+            margin-top: 0px;
+          }
+        }
+
+       }
+
+       .schedule{
+          padding: 20px;
+          gap: 32px;
+          border-radius: 5px;
+          background: #F9F6F3;
+          display: inline-flex;
+          align-items: center;
+          justify-content: space-between;
+          flex-direction: column;
+          text-align: center;
+
+          .flight-date{
+            width: 100%;
+            text-align: left;
+
+            svg{
+              vertical-align: middle;
+              margin-right: 12px;
+
+            }
+            span{
+              color: rgba(91, 71, 19, 0.7);
+              font-family: $font-default;
+              font-size: 12px;
+              font-weight: 400;
+              line-height: 18px;
+              letter-spacing: 0.05em;
+              text-align: left;
+              text-underline-position: from-font;
+              text-decoration-skip-ink: none;
+            }
+          }
+
+          .flight-details{
+            display: flex;
+            flex-direction: column;
+            gap: 11px;
+
+            label{
+              font-family: $font-default;
+              font-size: 12px;
+              font-weight: 700;
+              line-height: 18px;
+              letter-spacing: 0.05em;
+              text-align: left;
+              text-underline-position: from-font;
+              text-decoration-skip-ink: none;
+              color: rgba(0, 0, 0, 0.8)
+            }
+
+            img{
+              width: 14px;
+              height: 14px;
+              vertical-align: middle;
+              margin-right: 5px;
+            }
+            
+            span{
+              font-family: $font-default;
+              font-size: 12px;
+              font-weight: 400;
+              line-height: 18px;
+              letter-spacing: 0.05em;
+              text-align: left;
+              text-underline-position: from-font;
+              text-decoration-skip-ink: none;
+              color: rgba(0, 0, 0, 0.8);
+            }
+          }
+
+          .flight-time{
+            .from, .to{
+              display: flex;
+              flex-direction: column;
+              gap: 8px;
+            }
+
+            label{
+              font-family: $font-default;
+              font-size: 15px;
+              font-weight: 700;
+              line-height: 22.5px;
+              letter-spacing: 0.05em;
+              text-align: center;
+              text-underline-position: from-font;
+              text-decoration-skip-ink: none;
+              color: rgba(0, 0, 0, 1);
+            }
+
+            span{
+              font-family: $font-default;
+              font-size: 12px;
+              font-weight: 300;
+              line-height: 18px;
+              text-underline-position: from-font;
+              text-decoration-skip-ink: none;
+              color: rgba(91, 71, 19, 0.7);
+            }
+
+            
+            .from{
+              align-items: flex-end;
+
+              span{
+                text-align: right;
+              }
+            }
+
+            .to{
+              align-items: flex-start;
+
+              span{
+                text-align: left;
+              }
+            }
+
+            &_icon{
+              width: 53px;
+
+              img{
+                vertical-align: middle;
+              }
+
+              &::before, &::after{
+                  /* Styles kept */
+                  width: 25%;
+                  height: 1px;
+
+                  /* Changed to border-top (instead of border) to simulate a line better */
+                  border-top: 1px solid #ccc; 
+
+                  /* Styles added */
+                  display: inline-block;
+                  content: '';
+                
+                  /* Use padding to vertical align the line */
+                  /* Use padding in em for a responsive icon height */
+                  padding-top: 0.2em; 
+                
+                  /* Use margins to give the lines some spacement around the icon */
+                  /* Use margins in % for a responsive spacement */
+                  margin-left: 5%; 
+                  margin-right: 5%;
+              }
+            }
+          }
+       }
+
+      .super-promo{
+        background: rgba(249, 226, 152, 1);
+      }
+
+      .promo1{
+        background: rgba(249, 246, 243, 1);
+      }
+
+      .normal{
+        background: rgba(245, 245, 245, 1);
+      }
+
+       #pricing-table{
+        display: none;
+       }
+
+       #pricing-list{
+        .ant-card .ant-card-body{
+          padding: 10px 15px;
+        }
+
+        .pricing-header{
+          font-family: $font-default;
+          font-weight: 600;
+          font-size: 14px;
+          line-height: 21px;
+          letter-spacing: 2%;
+          text-align: center;
+          color: #836848;
+          margin-bottom: 10px;
+          text-transform: capitalize;
+        }
+
+        .pricing-body{
+
+          .pricing {
+            display: flex;
+            justify-content: space-between;
+            color: #545047;
+
+            .category{
+              font-family: $font-default;
+              font-weight: 400;
+              font-size: 12px;
+              line-height: 18px;
+              letter-spacing: 5%;
+            }
+            .price{
+              font-family: Poppins;
+            font-weight: 500;
+            font-size: 14px;
+            line-height: 21px;
+            letter-spacing: 5%;
+            text-align: center;
+
+            }
+          }
+        }
+
+       }
+      }
+    }
+
+    .toggle_contact-agent{
+      cursor: pointer;
+      border-bottom-left-radius: 20px;
+      border-top-left-radius: 20px;
+      color: #FFFFFF;
+      background-color: #836848;
+      font-size: 12px;
+      line-height: 18px;
+      letter-spacing: 5%;
+      padding: 11px 15px 11px 15px;
+      width: 135px;
+      position: absolute;
+      right: 0;
+    }
+
+    .contact-agent-sider{
+      position: fixed;
+      z-index: 1;
+      right: 0;
+      top: 110px;
+    }
+
+    .contact-agent{
+      height: auto;
+      background: #FFFFFF;
+      border-radius: 20px;
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      display: none;
+
+      &_header{
+        background-color: #F9E298;
+        font-family: $font-default;
+        font-size: 15px;
+        font-weight: 400;
+        line-height: 22.5px;
+        letter-spacing: 0.05em;
+        text-align: left;
+        text-underline-position: from-font;
+        text-decoration-skip-ink: none;
+        color: #545047;
+        padding: 11px 15px 11px 15px;
+        border-radius: inherit;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      &_content{
+        padding: 10px 15px 15px 15px;
+
+        .ant-form-item{
+          margin-bottom: 15px;
+
+          &:last-child{
+            margin-bottom: 0;
+          }
+        }
+
+        .search-results{
+          margin-top: 10px;
+
+          .agent-info{
+            .company{
+              font-family: $font-default;
+              font-size: 10px;
+              font-weight: 600;
+              line-height: 15px;
+              text-align: left;
+              text-underline-position: from-font;
+              text-decoration-skip-ink: none;
+              min-height: 20px;
+              color: rgba(0, 0, 0, 0.8);
+              max-width: 180px;
+              cursor: pointer;
+            }
+
+            .contact-numbers{
+              display: inline-flex;
+              gap: 2px;
+            }
+          }
+        }
+      }
+
+    }
+
+    .show-contact-agent-mobile{
+      .toggle_contact-agent{
+        display: none;
+      }
+      .contact-agent{
+        display: block;
+      }
+    }
+  }
+}
+
+.agent-full-contact-details{
+  .ant-modal-title{
+    img{
+      height: 40px;
+      object-fit: cover;
+    }
+  }
+  .contact-details{
+    padding: 15px 10px 15px 10px;
+    background: rgba(245, 245, 245, 1);
+
+    h2{
+      font-family: $font-default;
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 24px;
+      letter-spacing: 3%;
+      color: #000000CC;
+    }
+
+    svg{
+      color: rgba(170, 133, 62, 1);
+      background: rgba(255, 255, 255, 1);
+      height: Fixed (25px)px;
+      padding: 3.75px;
+      border-radius: 62.5px;
+      margin-right: 6px;
+      vertical-align: middle;
+    }
+
+    span{
+      font-family: $font-default;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 21px;
+      letter-spacing: 0.03em;
+      text-align: left;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+    }
+  }
+}
+
+#about-signature-tours{
+  height: 100%;
+  padding: 45px;
+
+  h1{
+    font-family: $font-default;
+    font-size: 24px;
+    font-weight: 300;
+    line-height: 36px;
+    letter-spacing: 0.06em;
+    text-align: center;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    color: #545047;
+  }
+
+  p{
+    font-family: $font-default;
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 24px;
+    letter-spacing: 0.03em;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    color: #545047;
+    margin: 20px 0;
+    display: block;
+  }
+
+  #about-st-feature{
+
+    #feature{
+      // width: 419px;
+      height: 246px;
+      gap: 0px;
+      border-radius: 20px;
+      opacity: 0px;
+      background: #FFFFFF;
+      box-shadow: 0px 5px 20px 0px #00000026;
+      
+      &> img{
+        width: 100%;
+        height: 183.24px;
+        gap: 0px;
+        border-radius: 20px;
+        opacity: 0px;
+        border: 3px solid #FFFFFF;
+    
+        object-fit: cover;
+        object-position: 50% 33%;
+        display: block;
+        box-sizing: border-box;
+      }
+
+      #st-brand{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 5px 23px 0px 12px;
+    
+        span{
+          font-family: $font-default;
+          font-size: 20px;
+          font-weight: 400;
+          line-height: 30px;
+          letter-spacing: 0.05em;
+          text-align: left;
+          text-underline-position: from-font;
+          text-decoration-skip-ink: none;
+        }
+    
+        #st-logo{
+          width: 47px;
+          height: 43.76px;
+          gap: 0px;
+          opacity: 0px; 
+        }
+      }
+    }
+  }
+}
+
+#about-us-page{
+  &_body{
+    padding: 20px var(--side-padding);
+
+    #introduction{
+      img{
+        width: 42.96px;
+        height: 40px;
+      }
+
+      h1{
+        font-family: $font-default;
+        font-size: 24px;
+        font-weight: 500;
+        line-height: 36px;
+        text-align: left;
+        text-underline-position: from-font;
+        text-decoration-skip-ink: none;
+      }
+    }
+
+    #article{
+      background: #FFFFFF;
+      padding: 32px;
+      border-radius: 20px;
+      box-shadow: 0px 5px 20px 0px #E1B65B33;
+
+      img{
+        // width: 1056px;
+        height: 644px;
+        border-radius: 20px;
+        width: 100%;
+        object-fit: cover;
+      }
+
+      p{
+        font-family: $font-default;
+        font-size: 14px;
+        font-weight: 300;
+        line-height: 27px;
+        text-align: left;
+        text-underline-position: from-font;
+        text-decoration-skip-ink: none;
+        color: #000000;
+      }
+    }
+  }
+
+  .section-header{
+    // width: 741px;
+    // margin: auto;
+    
+    h2{
+      font-family: $font-default;
+      font-size: 24px;
+      font-weight: 500;
+      line-height: 36px;
+      text-align: center;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+      color: #000000;
+    }
+    p{
+      font-family: $font-default;
+      font-size: 14px;
+      font-weight: 300;
+      line-height: 27px;
+      text-align: center;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+      color: #000000;
+    }
+  }
+
+  .items{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    color: #000000;
+    padding: 24px;
+
+    label{
+      font-family: $font-default;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      text-align: center;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+    }
+
+    p{
+      font-family: $font-default;
+      font-size: 14px;
+      font-weight: 300;
+      line-height: 27px;
+      text-align: center;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+
+    }
+  }
+
+  #quality-policy{
+    padding: 60px var(--side-padding) 30px;
+    margin-top: -70px;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+
+
+  #certificates{
+    background: linear-gradient(180deg, #F7F4EB 0%, #FFFFFF 100%);
+    padding: 0 var(--side-padding) 30px;
+
+    .ant-col{
+      text-align: center;
+    }
+
+    img {
+      margin: auto;
+      width: 263px;
+      height: 365px;
+      box-shadow: 0px 2px 16px 0px #0000001A;
+    }
+  }
+}
+
+#countries-page{
+  &_body{
+    padding: 20px var(--side-padding);
+
+    #introduction{
+      // width: 1120px;
+      // height: Hug (263px)px;
+      padding: 32px;
+      border-radius: 20px;
+      background: #FFFFFF;
+  
+      &_header{
+        text-align: center;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        gap: 24px;
+
+        img{
+          width: 42.96px;
+          height: 40px;
+        }
+        span{
+          font-family: $font-default;
+          font-size: 24px;
+          font-weight: 500;
+          line-height: 36px;
+          text-align: left;
+          text-underline-position: from-font;
+          text-decoration-skip-ink: none;
+          color: #000000;
+        }
+      }
+  
+      &_body{
+        p {
+          font-family: $font-default;
+          font-size: 14px;
+          font-weight: 300;
+          line-height: 27px;
+          text-align: left;
+          text-underline-position: from-font;
+          text-decoration-skip-ink: none;
+        }
+      }
+    }
+
+    h2{
+      font-family: $font-default;
+      font-size: 30px;
+      font-weight: 600;
+      line-height: 45px;
+      letter-spacing: 0.05em;
+      text-align: left;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+    }
+  }
+}
+
+#contact-us-page{
+  &_body{
+    margin: 20px var(--side-padding);
+    border-radius: 20px;
+    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15);
+    background-color: #FFFFFF;
+
+    img{
+      height: 250px;
+      width: 100%;
+      object-fit: cover;
+      border-top-left-radius: 20px;
+      border-top-right-radius: 20px;
+    }
+
+    #contact-us-form{
+      padding: 20px 24px 40px 24px;
+
+      &_header{
+        margin-bottom: 20px;
+        h2{
+          font-family: $font-default;
+          font-size: 16px;
+          font-weight: 700;
+          line-height: 24px;
+          letter-spacing: 0.05em;
+          text-align: left;
+          text-underline-position: from-font;
+          text-decoration-skip-ink: none;
+          color: rgba(91, 71, 19, 1);
+          margin: 0;
+        }
+
+        span{
+          font-family: $font-default;
+          font-size: 14px;
+          font-weight: 300;
+          line-height: 21px;
+          letter-spacing: 0.05em;
+          text-align: left;
+          text-underline-position: from-font;
+          text-decoration-skip-ink: none;
+          color: rgba(0, 0, 0, 1);
+        }
+      }
+
+      textarea{
+        min-height: 200px;
+      }
+
+      button[type=submit]{
+        width: 216px;
+      }
+    }
+  }
+
+  &_footer{
+    margin: 20px var(--side-padding);
+    border-radius: 20px;
+    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15);
+    background-color: #FFFFFF;
+    padding: 40px 24px 40px 24px;
+
+    label{
+      font-family: $font-default;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 24px;
+      letter-spacing: 0.05em;
+      text-align: left;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+      color: rgba(91, 71, 19, 1);
+      display: block;
+      margin-bottom: 10px;
+    }
+
+    span{
+      font-family: $font-default;
+      font-size: 14px;
+      font-weight: 300;
+      line-height: 21px;
+      letter-spacing: 0.05em;
+      text-align: left;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+      color: rgba(0, 0, 0, 1);
+    }
+
+    svg{
+      color: $primary-color;
+    }
+  }
+}
+
+#contact-agents-page{
+  &_body{
+    margin: 20px var(--side-padding);
+
+    #find-agents{
+      &_header{
+        width: 171px;
+        height: 45px;
+        margin: auto;
+        padding-top: 11px;
+        padding-right: 32px;
+        padding-bottom: 11px;
+        padding-left: 32px;
+        gap: 10px;
+        border-top-left-radius: 20px;
+        border-top-right-radius: 20px;
+        border-top-width: 1px;
+        border-right-width: 1px;
+        border-left-width: 1px;
+        background: #F9E298;
+
+        span{
+          font-family: $font-default;
+          font-weight: 400;
+          font-size: 15px;
+          line-height: 22.5px;
+          letter-spacing: 5%;
+          text-align: center;
+          color: #545047;
+        }
+      }
+
+      &_form{
+        // width: 343;
+        // height: 245;
+        border-radius: 20px;
+        padding-top: 33px;
+        padding-right: 40px;
+        padding-bottom: 33px;
+        padding-left: 40px;
+        gap: 10px;
+        background: #FFFFFF;
+        box-shadow: 0px 5px 20px 0px #00000026;
+
+        .find-button{
+          width: 100%;
+        }
+      }
+    }
+
+    #agents-list{
+      margin: 40px 0;
+
+      img{
+        height: 265;
+        object-fit: cover;
+      }
+
+      svg{
+        vertical-align: middle;
+        color: #000000;
+        margin-right: 10px;
+      }
+
+      span{
+        font-family: $font-default;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 24px;
+        letter-spacing: 0%;
+        color: #959492;
+      }
+
+      .ant-card-meta-title{
+        font-family: Poppins;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 0.05em;
+      }
+
+      .more-info-button{
+        width: 225px;
+        margin: 20px auto 0;
+        display: block;
+      }
+    }
+    
+  }
+}
+
+.agent-full-details{
+  .ant-modal-title{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+
+    img{
+      height: 120px;
+      object-fit: cover;
+    }
+
+    span{
+      font-family: $font-default;
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 24px;
+      letter-spacing: 0%;
+
+    }
+  }
+
+  .ant-modal-body{
+    margin: 20px -24px;
+    background: #FAFAFA;
+    height: 100%;
+
+    .ant-row{
+      width: 100%;
+      margin: 0 !important;
+      padding: 20px;
+
+      label{
+        font-family: $font-default;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 21px;
+        letter-spacing: 0%;
+        color: #836848;
+      }
+
+      span{
+        font-family: $font-default;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 24px;
+        letter-spacing: 0%;
+        color: #545047;
+      }
+    }
+  }
+}
+
+#blog-page{
+  &_body{
+    margin: 20px var(--side-padding);
+
+    #blogs{
+      margin: 30px 0;
+    }
+  }
+}
+
+#blog-show-page{
+  &_body{
+    margin: 20px var(--side-padding);
+    padding: 32px;
+    border-radius: 20px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 5px 20px 0px rgba(225, 182, 91, 0.2);
+  }
+
+}
+
+
+@media only screen and (min-width: 769px) {
+  *{
+    //can change to container width
+    --side-padding: 10%;
+  }
+
+  #popular-destinations{
+    margin: auto;
+    width: 80%;
+
+    h1{
+      font-size: 45px;
+      font-weight: 200;
+      line-height: 67.5px;
+
+      width: 100%;
+      margin: 50px 0;
+    }
+
+    .location-dropdown{
+      display: none;
+    }
+
+    .ant-tabs .ant-tabs-content-holder{
+      margin-top: -2px;
+    }
+  
+    .ant-tabs >.ant-tabs-nav{
+      display: flex;
+      margin: 0;
+    }
+  
+    .ant-tabs-nav {
+      width: 100% !important;
+    }
+  
+    .ant-tabs-card.ant-tabs-top >.ant-tabs-nav {
+      .ant-tabs-tab {
+      display: block; // centers text inside tabs
+      // flex: 1;
+      text-align: center;
+      justify-content: center;
+      background: transparent;
+      // border-color: #EBEBEB;
+      // border-bottom-color: $primary-color;
+      margin-left: 30px;
+      padding: 0;
+  
+      &+.ant-tabs-tab{
+        margin:0;
+      }
+  
+        .ant-tabs-tab-btn {
+          text-transform: uppercase;
+          font-family: $font-default;
+          font-size: 20px;
+          font-weight: 400;
+          line-height: 30px;
+          letter-spacing: 0.05em;
+          text-align: center;
+          text-underline-position: from-font;
+          text-decoration-skip-ink: none;
+          color: $primary-color;
+  
+          position: relative;
+          margin: 0 5px;
+          padding: 8px 20px;
+          background: #FAFAFA;
+          border-radius: 20px 20px 0 0;
+  
+          &:before,  &:after{
+            content: " ";
+            position: absolute;
+            top: 0;
+            width: 23px;
+            height: 100%;
+            background-color: inherit;
+          }
+  
+          &:before{
+            border-radius: 12px 0 0 0;
+            transform: skew(-24deg);
+            left: -13px;
+          }
+  
+          &:after{
+            border-radius: 0 12px 0 0;
+            transform: skew(24deg);
+            right: -13px; /* play with this one to give the LI border ~2px extrusion */
+            border-right: 1px solid #EBEBEB;
+            z-index: 1; /* overlap next element */
+          }
+        }
+  
+        &.ant-tabs-tab-active{
+          z-index: 1;
+          // border-bottom-color: $primary-color;
+          .ant-tabs-tab-btn {
+            background: linear-gradient(180deg, $secondary-color -1.58%, $primary-color 92.51%);
+            color: white !important;
+  
+            &:before, &:after{
+              background: linear-gradient(180deg, $secondary-color -1.58%, $primary-color 92.51%);
+            }
+          }
+        }
+      }
+    }
+  
+    .ant-tabs-nav > div:nth-of-type(1) {
+      display: unset !important;
+      width: 100% !important;
+    }
+
+    .country{
+      &-image{
+        border-radius: 20px;
+      }
+
+      &-name{
+        width: auto;
+        height: 71px;
+        top: 64px;
+        left: 62px;
+        
+        font-size: 47px;
+        font-weight: 400;
+        line-height: 70.5px;
+      }
+    }
+
+    h2{
+      font-size: 30px;
+      font-weight: 600;
+      line-height: 45px;
+      letter-spacing: 0.05em;
+    }
+
+    .top-cities,
+    .more-cities,
+    .highlights {
+      padding: unset;
+    }
+
+    .more-cities .other-destinations a{
+      font-size: 18px;
+      font-weight: 400;
+      line-height: 27px;
+      letter-spacing: 0.05em;
+    }
+  }
+
+  #testimonials-section{
+    display: block;
+
+    #testimonials{
+      max-width: 1099px;
+      margin: auto;
+      padding: 50px 0;
+    
+      [class~='ant-carousel'] {
+        .slick-slider{
+          padding: 0 70px;
+        }
+        .slick-list {
+          margin: 0;
+        }
+    
+        .slick-track {
+          margin: auto;
+        }
+    
+        .slick-slide>div {
+          padding: 20px 15px;
+        }
+    
+        .slick-prev,
+        .slick-next{
+          color: #959492;
+    
+          &:hover{
+            color: #DFB163;
+          }
+        }
+      }
+    
+      .testimonial{
+        // min-height: 383px;
+        padding: 10px 18px 20px 18px;
+        gap: 15px;
+        border-radius: 20px;
+        opacity: 0px;
+        background: #FFFFFF;
+        box-shadow: 0px 5px 20px 0px #E1B65B33;
+        text-align: center;
+        display: flex !important;
+        flex-direction: column;
+        justify-content: flex-start;
+    
+        .stars-icon{
+          width: 92px;
+          height: 32px;
+          gap: 0px;
+          opacity: 0px;
+          margin: auto;
+        
+        }
+    
+        .tour{
+          width: 100%;
+          // height: 56px;
+          padding: 10px;
+          gap: 10px;
+          border-radius: 10px;
+          opacity: 0px;
+          background: linear-gradient(270deg, $secondary-color 0%, #FFFDF5 117.76%);
+          box-shadow: 0px 7px 16.7px 0px #E1B65B80;
+          box-sizing: border-box;
+          display: inline-flex;
+          align-items: center;
+    
+          img{
+            width: 28.46px;
+            height: 26.5px;
+          } 
+    
+          span{
+            font-family: $font-default;
+            font-size: 12px;
+            font-weight: 500;
+            line-height: 18px;
+            text-align: left;
+            text-underline-position: from-font;
+            text-decoration-skip-ink: none;
+            color: #AA853E;
+            width: 100%;
+            display: block;
+            }
+          
+        }
+    
+        .comment {
+          white-space: break-spaces;
+    
+          span{
+            font-family: $font-default;
+            font-size: 14px;
+            font-style: italic;
+            font-weight: 200;
+            line-height: 21px;
+            text-align: center;
+            text-underline-position: from-font;
+            text-decoration-skip-ink: none;
+          }
+        }
+    
+        .author {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 10px;
+        
+          .author-icon{
+            color: rgba(0, 0, 0, 0.8);
+            width: 20px;
+            height: 20px;
+          }
+          span{
+            font-family: $font-default;
+            font-size: 20px;
+            font-weight: 400;
+            line-height: 30px;
+            letter-spacing: 0.05em;
+            text-align: left;
+            text-underline-position: from-font;
+            text-decoration-skip-ink: none;
+          
+          }
+        }
+      }
+    }
+  }
+
+  #about-signature-tours{
+
+    &>div{
+      width: 70%;
+      margin: auto;
+    }
+
+    h1{
+      font-size: 45px;
+      font-weight: 200;
+      line-height: 67.5px;
+      letter-spacing: 0.06em;
+    }
+
+    p{
+      font-size: 18px;
+      font-weight: 200;
+      line-height: 27px;
+      letter-spacing: 0.05em;
+      text-align: left;
+    }
+
+    picture{
+      height: 100%;
+      display: block;
+      margin: 30px 0;
+    }
+  }
+
+  #listing-page{
+    &_header{
+      &>.ant-flex{
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+      }
+      
+      .location-filter.ant-select{
+        line-height: 36px;
+        width: 170px;
+
+        .ant-select-selection-item{
+          font-size: 20px;
+          font-weight: 500;
+          line-height: 30px;
+          letter-spacing: 0.05em;
+        }
+      }
+    }
+
+    #tours{
+      .tour{
+        flex-direction: row;
+  
+        &_image{
+          img{
+            border-top-right-radius: 0;
+            border-top-left-radius: 20px;
+            border-bottom-left-radius: 20px;
+          }
+        }
+
+        &_details_dates {
+          .date-selector{
+            justify-content: unset;
+          }
+        }
+
+        &_pricing{
+          border-bottom-left-radius: 0;
+          border-top-right-radius: 20px;
+          border-bottom-right-radius: 20px;
+
+          &_details{
+            flex-direction: column;
+            align-items: stretch;
+          }
+
+          .ant-space-item{
+            width: auto;
+          }
+        }
+      }
+    }
+  }
+
+  #show-page {
+    &_header{
+      h1{
+        font-size: 18px;
+        line-height: 27px;
+        letter-spacing: 0%;
+        text-align: left;
+  
+        font-size: 30px;
+        font-weight: 400;
+        line-height: 45px;
+        letter-spacing: 0.05em;
+      }
+    }
+
+    &_body{
+      .toggle_contact-agent,
+      .collapse-contact-agent{
+        display: none;
+      }
+
+      .contact-agent-sider{
+        position: relative;
+        top: unset;
+      }
+  
+      .contact-agent {
+        border-bottom-right-radius: 20px;
+        border-top-right-radius: 20px;
+        display: block;
+      }
+  
+      .details-container_content{
+        #things-to-know{
+          grid-template-columns: repeat(5, 1fr);
+        }
+  
+        .schedule{
+          flex-direction: row;
+  
+          .flight-date{
+            width: auto;
+          }
+        }
+        #pricing-list{
+          display: none;
+        }
+  
+        #pricing-table{
+          display: table;
+          width: 100%;
+          border-spacing: 5px 0;
+    
+          .price-type{
+            text-transform: capitalize;
+          }
+    
+          th{
+            border-top-left-radius: 10px;
+            border-top-right-radius: 10px;
+            font-family: $font-default;
+            font-size: 14px;
+            font-weight: 700;
+            line-height: 21px;
+            letter-spacing: 0.05em;
+            text-align: center;
+            text-underline-position: from-font;
+            text-decoration-skip-ink: none;
+            color: rgba(131, 104, 72, 1);
+            padding: 10px 15px;
+          }
+    
+          td{
+            font-family: $font-default;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 21px;
+            letter-spacing: 0.05em;
+            text-align: center;
+            text-underline-position: from-font;
+            text-decoration-skip-ink: none;
+            color: rgba(84, 80, 71, 1);
+            padding: 15px;
+            white-space: nowrap;
+    
+            &:first-child{
+              text-align: left;
+              font-weight: 400;
+            }
+          }
+    
+          tr:last-child td{
+            border-bottom-left-radius: 10px;
+            border-bottom-right-radius: 10px;
+          }
+         }
+      }
+    }
+
+  }
+
+  .agent-full-contact-details{
+    width: 650px !important;
+  }
+
+  #contact-agents-page_body {
+    #find-agents{
+      width: 65%;
+      margin: auto;
+
+      &_form{
+        text-align: center;
+        form{
+          display: inline-flex;
+          gap: 16px;
+        }
+        .ant-form-item{
+          margin-bottom: 0;
+          text-align: left;
+        }
+  
+        .ant-form-item,
+        .find-button{
+          width: 210px;
+        }
+      }
+    }
+
+    #agents-list{
+      .more-info-button{
+        width: 100%;
+      }
+    }
+  }
+
+  .agent-full-details{
+    width: 800px !important;
+  }
+
+  #about-us-page{
+    .section-header {
+      width: 741px;
+      margin: auto;
+    }
+
+    #quality-policy{
+      padding: 0 170px 16px 170px;
+    }
+
+    #certificates{
+      padding: 40px 160px 40px 160px;
+      justify-content: flex-start;
+    }
+  }
+}