iceholidays-frontend 0.4.0 → 0.6.0

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

@@ -21,6 +21,7 @@
 @import "common.scss";
 @import "widgets/search_bar.scss";
 @import "widgets/filter_pills.scss";
+@import "actiontext.scss";
  
 
 body{
@@ -38,7 +39,7 @@ body{
 #homepage{
   
   &_banner{
-    min-height: 760px;
+    // min-height: 760px;
     border-radius: 0px 0px 50px 50px;
 
     [class~='ant-carousel'] {
@@ -48,116 +49,36 @@ body{
       .slick-next{
         inset-inline-end: 115px;
       }
+      .slick-slide img{
+        width: 100%;
+      }
     }
   }
 }
 
 
 #popular-destinations{
-  margin: auto;
-  width: 80%;
+  margin-bottom: 30px;
 
   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;
-  }
+    font-size: 24px;
+    font-weight: 300;
+    line-height: 36px;
 
-  .ant-tabs .ant-tabs-content-holder{
-    margin-top: -2px;
+    width: 80%;
+    margin: 20px auto;
   }
 
   .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;
+    display: none;
   }
+  
 
   .country{
     position: relative;
@@ -171,17 +92,18 @@ body{
       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;
+      width: auto;
+      height: 42px;
+      top: 24px;
+      left: 24px;
       position: absolute;
+      text-align: left;
+      font-size: 28px;
+      font-weight: 300;
+      line-height: 42px;
     }
 
     .bottom-logo{
@@ -190,45 +112,40 @@ body{
       border-color: #F2F2F2;
       left: 0;
       width: 100%;
+      text-align: center;
     }
   }
 
-  .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;
-    
-    }
+
+  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 {
-    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;
+      flex-wrap: wrap;
       gap: 10px;
     
       a{
         font-family: $font-default;
-        font-size: 18px;
+        font-size: 14px;
         font-weight: 400;
-        line-height: 27px;
-        letter-spacing: 0.05em;
+        line-height: 21px;
+        letter-spacing: 0.02em;
         text-align: left;
         text-underline-position: from-font;
         text-decoration-skip-ink: none;
@@ -240,19 +157,24 @@ body{
         gap: 4px;
         border-radius: 20px;
         opacity: 0px;
-    
       }
     }
   }
 
   .highlights{
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
+    display: inline-flex;
+    overflow-x: auto;
     gap: 10px;
-    margin-top: 30px;
+    margin-top: 20px;
+    width: 100%;
+
+    a{
+      flex-grow: 1;
+      flex-shrink: 0;
+    }
 
     .tour{
-      // width: 220px;
+      min-width: 210px;
       height: 352px;
       padding: 15px 0px 0px 0px;
       gap: 0px;
@@ -310,153 +232,35 @@ body{
 }
 
 
-#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;
-      
-      }
-    }
-  }
+#testimonials-section{
+  display: none;
 }
 
 
 #listing-page{
 
   &_header{
-    .country-filter.ant-select{
-      line-height: 35px;
-      width: 170px;
+    .location-dropdown{
+      margin: 0;
+    }
+
+    .location-filter.ant-select{
+      // line-height: 36px;
+      height: auto;
+      width: 100%;
 
       .ant-select-selector{
-        padding: 3px 40px 3px 15px;
-        border-radius: 30px;
+        background: #FFFF;
         height: 36px;
       }
 
       .ant-select-selection-item{
         font-family: $font-default;
-        font-size: 20px;
+        font-family: Poppins;
         font-weight: 500;
-        line-height: 30px;
-        letter-spacing: 0.05em;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 5%;
         text-align: left;
         text-underline-position: from-font;
         text-decoration-skip-ink: none;
@@ -500,15 +304,16 @@ body{
 
   #tours{
     .tour{
+      flex-direction: column;
 
       &_image{
         height: 100%;
 
         img{
-          width: 300px;
+          width: 100%;
           height: 100%;
           border-top-left-radius: 20px;
-          border-bottom-left-radius: 20px;
+          border-top-right-radius: 20px;
         }
       }
 
@@ -532,7 +337,8 @@ body{
           text-align: left;
           text-underline-position: from-font;
           text-decoration-skip-ink: none;
-          max-width: 95%;
+          max-width: calc(100% - 30px);
+          overflow-wrap: anywhere;
         }
 
         &_subtitle{
@@ -593,22 +399,36 @@ body{
             text-decoration-skip-ink: none;
             color: #434039;
           }
+
+          .date-selector{
+            justify-content: center;
+          }
         }
       }
 
       &_pricing{
         background-color: $primary-color;
         padding: 20px;
-        border-top-right-radius: 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;
@@ -641,10 +461,19 @@ body{
           text-decoration-skip-ink: none;
           color: $primary-color;
           background-color: #FFFFFF;
+          display: block;
+          width: 100%;
         }
       }
     }
   }
+
+  #no-tours-found{
+    font-family: $font-default;
+    font-weight: 400;
+    text-align: center;
+    color: #00000c99;
+  }
 }
 
 .tour_details_description.ant-modal{
@@ -666,6 +495,13 @@ body{
   }
 }
 
+.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;
@@ -736,18 +572,19 @@ body{
 
 *{
   //can change to container width
-  --side-padding: 10%;
+  --side-padding: 20px;
 }
 
 #show-page{
+  $transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
 
   &_header{
     h1{
-      font-size: 30px;
-      font-weight: 400;
-      line-height: 45px;
-      letter-spacing: 0.05em;
+      font-size: 18px;
+      line-height: 27px;
+      letter-spacing: 0%;
       text-align: left;
+      overflow-wrap: anywhere;
     }
 
     .tour_details{
@@ -873,7 +710,7 @@ body{
         text-align: left;
         text-underline-position: from-font;
         text-decoration-skip-ink: none;
-        color: #5B4713;
+        color: $supportive-color;
       }
 
       &_content{
@@ -882,13 +719,13 @@ body{
         border-radius: 5px;
         background: #F9F6F3;
         display: grid;
-        grid-template-columns: repeat(5, 18%);
+        grid-template-columns: repeat(2, 1fr);
         justify-content: center;
         text-align: center;
         gap: 20px;
 
         .item{
-          color: #5B4713;
+          color: $supportive-color;
 
           .icon{
             opacity: 0.8;
@@ -912,9 +749,46 @@ body{
 
        } 
 
+       #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{
-          // width: Fill (795px)px;
-          // height: Hug (87px)px;
           padding: 20px;
           gap: 32px;
           border-radius: 5px;
@@ -922,8 +796,13 @@ body{
           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;
@@ -985,14 +864,6 @@ body{
               flex-direction: column;
               gap: 8px;
             }
-            
-            .from{
-              align-items: flex-end;
-            }
-
-            .to{
-              align-items: flex-start;
-            }
 
             label{
               font-family: $font-default;
@@ -1011,13 +882,35 @@ body{
               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);
             }
 
+            
+            .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%;
@@ -1032,7 +925,7 @@ body{
                 
                   /* Use padding to vertical align the line */
                   /* Use padding in em for a responsive icon height */
-                  padding-top: 0.5em; 
+                  padding-top: 0.2em; 
                 
                   /* Use margins to give the lines some spacement around the icon */
                   /* Use margins in % for a responsive spacement */
@@ -1043,69 +936,98 @@ body{
           }
        }
 
-       #pricing-table{
-        width: 100%;
-        border-spacing: 5px 0;
+      .super-promo{
+        background: rgba(249, 226, 152, 1);
+      }
 
-        .super-promo{
-          background: rgba(249, 226, 152, 1);
-        }
+      .promo1{
+        background: rgba(249, 246, 243, 1);
+      }
 
-        .promo{
-          background: rgba(249, 246, 243, 1);
-        }
+      .normal{
+        background: rgba(245, 245, 245, 1);
+      }
 
-        .normal{
-          background: rgba(245, 245, 245, 1);
-        }
+       #pricing-table{
+        display: none;
+       }
 
-        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);
+       #pricing-list{
+        .ant-card .ant-card-body{
           padding: 10px 15px;
         }
 
-        td{
+        .pricing-header{
           font-family: $font-default;
+          font-weight: 600;
           font-size: 14px;
-          font-weight: 500;
           line-height: 21px;
-          letter-spacing: 0.05em;
+          letter-spacing: 2%;
           text-align: center;
-          text-underline-position: from-font;
-          text-decoration-skip-ink: none;
-          color: rgba(84, 80, 71, 1);
-          padding: 15px;
-          white-space: nowrap;
+          color: #836848;
+          margin-bottom: 10px;
+          text-transform: capitalize;
+        }
 
-          &:first-child{
-            text-align: left;
-            font-weight: 400;
+        .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;
+
+            }
           }
         }
 
-        tr:last-child td{
-          border-bottom-left-radius: 10px;
-          border-bottom-right-radius: 10px;
-        }
        }
       }
     }
 
+    .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{
-      // width: 265px;
       height: auto;
-      border-radius: 20px;
       background: #FFFFFF;
+      border-radius: 20px;
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      display: none;
 
       &_header{
         background-color: #F9E298;
@@ -1122,6 +1044,9 @@ body{
         border-radius: inherit;
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
       }
 
       &_content{
@@ -1162,14 +1087,38 @@ body{
       }
 
     }
+
+    .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);
@@ -1194,24 +1143,14 @@ body{
 }
 
 #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;
-  }
+  padding: 45px;
 
   h1{
     font-family: $font-default;
-    font-size: 45px;
-    font-weight: 200;
-    line-height: 67.5px;
+    font-size: 24px;
+    font-weight: 300;
+    line-height: 36px;
     letter-spacing: 0.06em;
     text-align: center;
     text-underline-position: from-font;
@@ -1221,10 +1160,10 @@ body{
 
   p{
     font-family: $font-default;
-    font-size: 18px;
-    font-weight: 200;
-    line-height: 27px;
-    letter-spacing: 0.05em;
+    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;
@@ -1234,12 +1173,9 @@ body{
   }
 
   #about-st-feature{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
 
     #feature{
-      width: 419px;
+      // width: 419px;
       height: 246px;
       gap: 0px;
       border-radius: 20px;
@@ -1248,7 +1184,7 @@ body{
       box-shadow: 0px 5px 20px 0px #00000026;
       
       &> img{
-        width: 419px;
+        width: 100%;
         height: 183.24px;
         gap: 0px;
         border-radius: 20px;
@@ -1304,7 +1240,7 @@ body{
         font-size: 24px;
         font-weight: 500;
         line-height: 36px;
-        text-align: left;
+        text-align: center;
         text-underline-position: from-font;
         text-decoration-skip-ink: none;
       }
@@ -1338,8 +1274,8 @@ body{
   }
 
   .section-header{
-    width: 741px;
-    margin: auto;
+    // width: 741px;
+    // margin: auto;
     
     h2{
       font-family: $font-default;
@@ -1394,16 +1330,23 @@ body{
   }
 
   #quality-policy{
-    padding: 0 170px 16px 170px;
+    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: 40px 160px 40px 160px;
+    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;
@@ -1566,6 +1509,150 @@ body{
   }
 }
 
+#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);
@@ -1586,3 +1673,529 @@ body{
   }
 
 }
+
+
+@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;
+    }
+  }
+}