iceholidays-frontend 0.3.0 → 0.4.0

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

@@ -0,0 +1,1588 @@
+/*
+ * 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";
+ 
+
+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;
+      }
+    }
+  }
+}
+
+
+#popular-destinations{
+  margin: auto;
+  width: 80%;
+
+  h1{
+    font-family: $font-default;
+    font-size: 45px;
+    font-weight: 200;
+    line-height: 67.5px;
+    text-align: center;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    text-transform: uppercase;
+    color: #545047;
+  }
+
+  .ant-tabs .ant-tabs-content-holder{
+    margin-top: -2px;
+  }
+
+  .ant-tabs >.ant-tabs-nav{
+    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{
+    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;
+      border-radius: 20px;
+    }
+
+    &-name{
+      width: 160px;
+      height: 71px;
+      top: 58px;
+      left: 45px;
+      gap: 0px;
+      opacity: 0px;
+      position: absolute;
+    }
+
+    .bottom-logo{
+      position: absolute;
+      bottom: -35px;
+      border-color: #F2F2F2;
+      left: 0;
+      width: 100%;
+    }
+  }
+
+  .top-cities {
+    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;
+    
+    }
+  }
+
+  .more-cities {
+    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;
+    }
+
+    .other-destinations{
+      display: inline-flex;
+      gap: 10px;
+    
+      a{
+        font-family: $font-default;
+        font-size: 18px;
+        font-weight: 400;
+        line-height: 27px;
+        letter-spacing: 0.05em;
+        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: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 10px;
+    margin-top: 30px;
+
+    .tour{
+      // width: 220px;
+      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{
+  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;
+      
+      }
+    }
+  }
+}
+
+
+#listing-page{
+
+  &_header{
+    .country-filter.ant-select{
+      line-height: 35px;
+      width: 170px;
+
+      .ant-select-selector{
+        padding: 3px 40px 3px 15px;
+        border-radius: 30px;
+        height: 36px;
+      }
+
+      .ant-select-selection-item{
+        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: #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{
+
+      &_image{
+        height: 100%;
+
+        img{
+          width: 300px;
+          height: 100%;
+          border-top-left-radius: 20px;
+          border-bottom-left-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: 95%;
+        }
+
+        &_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;
+          }
+        }
+      }
+
+      &_pricing{
+        background-color: $primary-color;
+        padding: 20px;
+        border-top-right-radius: 20px;
+        border-bottom-right-radius: 20px;
+        height: 100%;
+
+        &>.ant-space{
+          height: 100%;
+          width: 100%;
+          justify-content: center;
+        }
+
+        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;
+        }
+      }
+    }
+  }
+}
+
+.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_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: 10%;
+}
+
+#show-page{
+
+  &_header{
+    h1{
+      font-size: 30px;
+      font-weight: 400;
+      line-height: 45px;
+      letter-spacing: 0.05em;
+      text-align: left;
+    }
+
+    .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: #5B4713;
+      }
+
+      &_content{
+       #things-to-know{
+        padding: 20px;
+        border-radius: 5px;
+        background: #F9F6F3;
+        display: grid;
+        grid-template-columns: repeat(5, 18%);
+        justify-content: center;
+        text-align: center;
+        gap: 20px;
+
+        .item{
+          color: #5B4713;
+
+          .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;
+          }
+        }
+
+       } 
+
+       .schedule{
+          // width: Fill (795px)px;
+          // height: Hug (87px)px;
+          padding: 20px;
+          gap: 32px;
+          border-radius: 5px;
+          background: #F9F6F3;
+          display: inline-flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .flight-date{
+            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;
+            }
+            
+            .from{
+              align-items: flex-end;
+            }
+
+            .to{
+              align-items: flex-start;
+            }
+
+            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-align: center;
+              text-underline-position: from-font;
+              text-decoration-skip-ink: none;
+              color: rgba(91, 71, 19, 0.7);
+            }
+
+            &_icon{
+              &::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.5em; 
+                
+                  /* Use margins to give the lines some spacement around the icon */
+                  /* Use margins in % for a responsive spacement */
+                  margin-left: 5%; 
+                  margin-right: 5%;
+              }
+            }
+          }
+       }
+
+       #pricing-table{
+        width: 100%;
+        border-spacing: 5px 0;
+
+        .super-promo{
+          background: rgba(249, 226, 152, 1);
+        }
+
+        .promo{
+          background: rgba(249, 246, 243, 1);
+        }
+
+        .normal{
+          background: rgba(245, 245, 245, 1);
+        }
+
+        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;
+        }
+       }
+      }
+    }
+
+    .contact-agent{
+      // width: 265px;
+      height: auto;
+      border-radius: 20px;
+      background: #FFFFFF;
+
+      &_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;
+      }
+
+      &_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;
+            }
+          }
+        }
+      }
+
+    }
+  }
+}
+
+.agent-full-contact-details{
+  .contact-details{
+    padding: 15px 10px 15px 10px;
+    background: rgba(245, 245, 245, 1);
+
+    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{
+  // width: 1440px;
+  height: 100%;
+  gap: 0px;
+  opacity: 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 50px 0;
+
+  &>div{
+    max-width: 970px;
+  }
+
+  h1{
+    font-family: $font-default;
+    font-size: 45px;
+    font-weight: 200;
+    line-height: 67.5px;
+    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: 18px;
+    font-weight: 200;
+    line-height: 27px;
+    letter-spacing: 0.05em;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    color: #545047;
+    margin: 20px 0;
+    display: block;
+  }
+
+  #about-st-feature{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    #feature{
+      width: 419px;
+      height: 246px;
+      gap: 0px;
+      border-radius: 20px;
+      opacity: 0px;
+      background: #FFFFFF;
+      box-shadow: 0px 5px 20px 0px #00000026;
+      
+      &> img{
+        width: 419px;
+        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: 0 170px 16px 170px;
+    margin-top: -70px;
+  }
+
+
+  #certificates{
+    background: linear-gradient(180deg, #F7F4EB 0%, #FFFFFF 100%);
+    padding: 40px 160px 40px 160px;
+
+    img {
+      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;
+    }
+  }
+}
+
+#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);
+  }
+
+}