/* import variables */
@import url('./fonts.css');
@import url('./root.css');


  .vidz_button{
    border-radius: 5px;
    text-align: center;
    padding: 0.3em 1.2em;
    font-weight: 500;
    font-size: 1.2em;
    color: var(--body_color);
    cursor: pointer;
    background: transparent;
    z-index: 10;
    span{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid var(--body_color);
      margin-right: 1em;
      svg{
        width: 24px;
        height: 24px;
        path{
          fill: var(--body_color);
        }
      }
    }
    p{
      font-size: var(--size_1p0rem);
      font-weight: 600;
      padding: 0;
      margin: 0;
      margin-bottom: 0;
    }
  }
  .title{
    font-family: var(--heading_family);
    font-size: 3em;
    
  }
  .display_none{
    display: none;
  }
  .sub_title{
    font-size: var(--size_2p0rem);
    font-family: var(--heading_family);
    font-weight: 400;
  }
  .sub_sub_title{
    font-size: var(--size_1p8rem);
    font-family: var(--subhead_family);
  }
  .script_title{
    font-size: var(--size_1p8rem);
    font-family: var(--script_family);
  }
  .desc_para{
    font-size: var(--size_1p4rem);
  }
  
  .call_btn{
    background-color: var(--text_color);
    border-radius: 5px;
    text-align: center;
    padding: 0.3em 1.2em;
    outline: none;
    cursor: pointer;
    font-weight: 500;
    font-size: var(--size_1p2rem);
    color: var(--body_color);
    transition: all 0.35s ease;
    border: 1px solid var(--text_color);
    &:hover{
      border: 1px solid var(--body_color);
      background-color: var(--body_color);
      color: var(--text_color);
    }
  }
  .gen_btn{
    background-color: transparent;
    padding: 0.6em 1.4em;
    border: 1px solid var(--text_color);
    border-radius: 5px;
    transition: all 0.35s ease;
    font-weight: 500;
    font-size: var(--size_1p0rem);
    text-transform: uppercase;
    &:hover{
      background-color: var(--text_color);
      color: var(--body_color);
    }
    &.btn_filled{
      background-color: var(--text_color);
      color: var(--body_color);
      &:hover{
        background-color: var(--body_color);
        color: var(--text_color);
      }
    }
  }

  .image_layer{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
  }

  .gallery_card{
    width: var(--width_100);
    position: relative;
    .photos_grid{
      width: var(--width_100);
      max-height: 540px;
      overflow-y: scroll;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      grid-gap: 20px;
      .one_photo{
        width: var(--width_100);
        position: relative;
        cursor: pointer;
        height: 260px;
        border-radius: 8px;
        border: 0;
        outline: none;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
       .photo_layer{
        width: 100%;
        height: 0;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 10;
        background-color: rgba(32, 39, 47, 0.75);
        border-radius: 8px;
        transition: all 0.25s ease;
        h4{
          width: var(--width_100);
          text-align: center;
          font-weight: 400;
          color: var(--orange_color);
          font-size: var(--size_1p0rem);
          transition: all 0.25s ease;
          opacity: 0;
        }
  
       }
       &:hover{
        .photo_layer{
          height: 100%;
          h4{
            opacity: 1;
          }
        }
       }
      }
    }
  }
  .hidden_gallery{
    width: var(--width_100);
    height: 100vh;
    position: fixed;
    opacity: 0;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: all 0.35s ease-in-out;
    .image_layer{
      background-color: rgba(32, 39, 47, 0.85);
      z-index: 1;
      cursor: pointer;
      .close_btn{
       
        position: absolute;
        right: 50px;
        top: 30px;
        width: 30px;
        height: 30px;
        display: flex;
        z-index: 10;
        border: 0;
        outline: none;
        opacity: 0;
        pointer-events: none;
        transition: 0.25s ease;
        cursor: pointer;
        justify-content: center;
        align-items: center;
        .image_layer{
          display: none;
        }
        svg{
          width: 100%;
          height: 100%;
          path{
            fill: var(--body_color)
          }
        }
      }
      &:hover{
        .close_btn{
          opacity: 1;
          pointer-events: initial;
        }
      }
    }
    .big_image{
      position: relative;
      z-index: 10;
      width: var(--width_70);
      height: var(--width_80);
      border-radius: 10px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
  
      .arrow_btns{
        width: 115%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        row-gap: 15px;
        opacity: 0;
        pointer-events: none;
        transition: all 0.25s ease;
        .arrow{
         
          width: 45px;
          height: 45px;
          border-radius: 50%;
          border: 1px solid var(--body_color);
         
          position: relative;
          transition: all 0.3s ease;
          .image_layer{
            display: none;
          }
          img{
            display: none;
          }
          svg{
            width: 20px;
            height: 20px;
            path{
              fill: var(--body_color)
            }
          }
          &:hover{
            border: 2px solid var(--body_color);
            background-color: var(--body_color);
            svg{
              path{
                fill: var(--text_color)
              }
            }
          }
        }
      }
      &:hover{
        .arrow_btns{
          opacity: 1;
          pointer-events: initial;
        }
      }
    }
    &.visible{
      opacity: 1;
      pointer-events: initial;
    }
  }
  
  /* nave */
  .home_nav{
    width: var(--width_100);
    padding: 1em 10%;
    margin: auto;
    position: relative;
    z-index: 10;
    transition: all 0.4s ease;
  
    .logo{
      
      .link_btn{
        column-gap: 1em;
        background-color: transparent;
        cursor: pointer;
        outline:  none;
        border: 0;
        img{
          width: 60px;
          object-fit: cover;
        }
        h2{
          color: var(--body_color);
          font-family: var(--heading_family);;
          /* font-family: 'Harper'; */
          /* font-family: 'Playthings'; */
          text-transform: uppercase;
          font-weight: 400;
          letter-spacing: 2px;
          font-size: var(--size_1p2rem);
        }
      }
      
    }
    .home_left{
      column-gap: 2em;
      button{
        img{
          width: 32px;
          object-fit: cover;
        }
      }
    }
    &.nav_standalone{
      width: var(--width_100);
      background-color: #001f2b;
      padding: 2em 10%;

      .home_left{

        .call_btn{
          background-color: var(--body_color);
          border: 1px solid var(--body_color);
          color: var(--text_color);
        &:hover{
          border: 1px solid var(--body_color);
          background-color: var(--text_color);
          color: var(--body_color);
        }
  
        }
        
      }

     
    }
    &.fixed{
      background-color: var(--text_color);
      border-bottom: 2px solid var(--body_color);
      position: fixed !important;
      top: 0;
      left: 0;
      z-index: 5000;
    }
  }
  /* hero */
  .video_player{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 10%;
    left: 0;
    z-index: 1000;
    transition: all 0.35s ease;
    pointer-events: none;
    opacity: 0;
    .layer{
      cursor: pointer;
      
    }
    .video{
      width: 80vw;
      height: 85vh;
      border-radius: 10px;
      position: relative;
      z-index: 10;
      video{
        width: var(--width_100);
        height: var(--width_100);
        border-radius: 10px;
        object-fit: cover;
      }
    }
    &.visible{
      top: 0;
      pointer-events: initial;
      opacity: 1;
    }
  }
  .hero{
    width: var(--width_100);
    min-height: 100vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    

  
    .main_hero{
      width: 100%;
      min-height: 100vh;
      background-color: rgba(0, 31, 43, 0.4);
  
      
      .hero_left{
        width: var(--width_50);
        min-height: 100vh;
        background: rgba(0, 31, 43, 0.15);
        backdrop-filter: blur(2px);
       
        position: absolute;
        left: 0;
        top: 0;
        z-index: 5;
        .hero_left_content{
          width: 100%;
          padding-left: 20%;
          padding-right: 5%;
          /* position: relative; */
          .title{
            color: var(--orange_color);
            font-weight: 400;
            font-family: var(--heading_family);
            margin-bottom: 0.6rem;
            font-size: var(--size_2p6rem);
            text-transform: uppercase;

            &.break{
              display: none;
            }
          }
          p{
            color: var(--body_color);
            font-weight: 300;
            margin-bottom: 1rem;
            font-family: var(--text_family);
            font-size: var(--size_1p1rem);
          }
          .vidz_button{
            p{
              margin-bottom: 0;
              font-size: var(--size_0p95rem);
            }
          }
          .actions{
            width: 100%;
            column-gap: 2em;
          }
          .btn{
            padding: 0.3em 3em;
            &:hover{
              background-color: var(--body_color);
              color: var(--text_color);
              border-color: var(--body_color);
            }
            
            &:last-child{
              padding: 0.3em 2em;
              &:hover{
                background-color: transparent;
                color: var(--body_color);
                span{
                  background-color: var(--body_color);
                  svg{
                    path{
                      fill: var(--green_color);
                    }
                  }
                }
              }
            }
            span{
              display: block;
              width: 30px;
              height: 30px;
              border-radius: 50%;
              border: 1px solid var(--body_color);
              margin-right: 1em;
              transition: all 0.25s ease;
  
              svg{
                width: 18px;
                height: 18px;
                path{
                  fill: var(--body_color);
                }
              }
            }
          }

          .slider_arrows{
            position: absolute;
            bottom: 5%;
            left: 20%;
            column-gap: 10px;
            opacity: 0;
            transition: all 0.35s ease;
            pointer-events: none;
    
            .arrow{
              flex: 1;
              width: 36px;
              height: 36px;
              border-radius: 50%;
              border: none;
              display: flex;
              align-items: center;
              justify-content: center;
             
              position: relative;
              transition: all 0.3s ease;
              .image_layer{
                display: none;
              }
              img{
                display: none;
              }
              svg{
                width: 34px;
                height: 34px;
                path{
                  fill: var(--body_color)
                }
              }
              &:hover{
                background-color: var(--body_color);
                svg{
                  path{
                    fill: var(--text_color)
                  }
                }
              }

              &:first-child{
                svg{
                  margin-right: 5px;
                }
              }
              &:last-child{
                svg{
                  margin-left: 5px;
                }
              }
            }
          }
        }
        &:hover{
          .hero_left_content{
            .slider_arrows{
              opacity: 1;
              pointer-events: initial;
            }
          }
        }
      }
  
      .slider{
        width: var(--width_50);
        position: absolute;
        bottom: 1em;
        right: 0;
        padding: 2.5% 1%;
        column-gap: 2em;
        
        
        .slider_images{
          flex: 2;
          .slide{
            position: relative;
            border: 0;
            width: 80px;
            height: 50px;
            border-radius: 4px;
            opacity: 0.4;
            border-radius: 6px;
            transition: all 0.25s ease;
            &:not(:last-child){
              margin-right: 1em;
            }
            
            img{
              width: 100%;
              height: 100%;
              object-fit: cover;
              position: relative;
              z-index: 2;
              border-radius: 6px;
              border: 1px solid rgba(255, 255, 255, 0.3);
              transition: all 0.25s ease;
            }
            &:hover{
              opacity: 1;
              
              img{
                border: 1px solid var(--body_color);
              }
            }
            &.current{
              width: 100px;
              height: 70px;
              opacity: 1;
              
              img{
                border: 1px solid var(--body_color);
              }
            }
          }
        }
  
      }
    }
   
  }
  
  
  /* nav */
  .main_nav{
    width: var(--width_50);
    position: fixed;
    right: 5%;
    top: 0;
    height: 100vh;
    z-index: 8;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s ease;
  
   
  
    .nav_links{
      width: var(--width_full);
      height: 100%;
      background: var(--body_color);
      column-gap: 10%;
      padding: 10% 15%;
      .call_btn{
        display: none;
  
        &:hover{
          border: 2px solid var(--green_color);
          background-color: var(--body_color);
          color: var(--green_color);
        }
      }
  
      .nav_img{
        img{
          width: 400px;
        }
      }
  
      .nav_items{
        position: absolute;
        right: 0;
        padding: 1em 2em;
        padding-right: 12%;
        .nav_list{
          margin-top: 4em;
          margin-bottom: 2em;
          padding-top: 4em;
          .nav_item{
           
            width: 100%;
           
            display: inline-block;
           
            &:not(:last-child){
              margin-right: 1em;
            }
    
            .nav_link{
              width: 100%;
              display: block;
              color: var(--text_color);
              background-color: transparent !important;
              border: 0;
              outline: none;
              cursor: pointer;
              font-size: var(--size_2p4rem);
              text-transform: uppercase;
              font-weight: 500;
              font-family: var(--heading_family);
              text-align: right;
              transition: all 0.35s ease;
              position: relative;
              z-index: 3;
              &:hover{
                color: var(--text_color);
                opacity: 0.7;
              }
            }
            
            &.main_item{
              width: var(--width_100);
              position: relative;
              .nested_list{
                position: absolute;
                width: 70%;
                left: -25%;
                top: 15%;
                z-index: 20;
                border-right: 3px solid var(--text_color);
                transition: all 0.45s ease;
                opacity: 0;
                pointer-events: none;
                /* &.visible{
                  opacity: 1;
                  pointer-events: initial;
                  left: 35%;
                } */
                .pointer_arrow{
                  position: absolute;
                  width: 36px;
                  height: 36px;
                  right: -36px;
                  top: 0;
                  svg{
                    width: 100%;
                    height: 100%;
                    path{
                      fill: var(--text_color);
                    }
                  }
                }
                .sub_list{
                  width: 100%;
                  padding: 1em 2em;
                  .sub_item{
                    width: var(--width_100);
                    margin-bottom: 0.8em;
                    .sub_link{
                      width: 100%;
                      display: block;
                      outline: none;
                      background-color: transparent;
                      border: 0;
                      cursor: pointer;
                      color: var(--text_color);
                      font-weight: 500;
                      transition: all 0.35s ease;
                      text-transform: uppercase;
                      font-size: var(--size_1p0rem);
                      text-align: right;
                      &:hover{
                        color: var(--green_color);
                        opacity: 0.75;
                      }
                    }
                  }
                }
              }
              &:hover{
                .nested_list{
                  opacity: 1;
                  pointer-events: initial;
                  left: -16%;
        
                }
              }
            }
          }
        }
        .other_list{
         width: 50%;
         position: relative;
         margin-left: 50%;
         column-gap: 15px;
         margin-top: 12%;
        .col{
          width: var(--width_half);
        }
  
          .nav_item{
            width: 100%;
            margin-bottom: 0.15em;
            display: inline-block;
            .nav_link{
              display: block;
              width: 100%;
              color: var(--green_color);
              font-size:var(--size_1p0rem);
              text-transform: none;
              font-weight: 600;
              text-align: right;
              transition: all 0.35s ease;
              font-family: var(--text_family);
              text-transform: uppercase;
              &:hover{
                color: var(--dark_color);
              }
              
            }
          }
        }
      }
      
    }
    .nav_left{
      button{
       
        width: 30px;
        height: 30px;
        margin-right: 2em;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  
    &.visible{
      opacity: 1;
      pointer-events: initial;
      right: 0;
    }
  }
  
  /* bridge */
  
  .bridge{
    width: var(--width_full);
    margin: auto;
    padding: 4em 10%;
    padding-bottom: 5em;
    background-color: var(--text_color);
    position: relative;
    z-index: 3;
  
  
    h2{
      width: var(--width_full);
      text-align: justify;
      font-weight: 500;
      font-size: var(--size_2p2rem);
      font-family: var(--heading_family);
      color: var(--body_color);
    }
    &.no_back{
  
      margin: var(--size_3p4rem) auto;
      background-color: transparent;
      &::before{
        display: none;
      }
      h2{
        color: var(--text_color);
        margin-bottom: 1.4em;
      }
      .btns{
        width: 100%;
        column-gap: 4em;
      }
    }
    &.bridge_at_destination{
      margin: var(--size_3p0rem) auto;
      background-color: transparent;
      &::before{
        display: none;
      }
      h2{
        color: var(--text_color);
        margin-bottom: unset;
        font-size: var(--size_2p4rem);
        text-align: justify;
      }
      
    }
  }
  .section_head{
    width: var(--width_100);
    text-align: center;
    .mixed {
      width: var(--width_100);
      text-align: center;
      column-gap: 0.8em;
      h2{
        color: var(--text_color);
        
        font-weight: 400;
      }
      .normal{
        font-family: var(--heading_family);
        font-size: var(--size_2p8rem);
      }
      .scripted{
        font-family: var(--script_family);
        font-size: var(--size_3p2rem);
        
      }
    }
    &.feature_head{
      p{
        display: none;
      }
    }
    p{
      width: 80%;
      margin: auto;
      text-align: center;
      font-size: var(--size_1p2rem);
      font-family: var(--heading_family);
    }
    &.section_header{
      margin-bottom: var(--size_2p5rem);
    }
    &.tour_head_section{
      margin-top: 4em;
      margin-bottom: 4em;
    }
  }
  
  .page_section{
    width: var(--width_80) ;
    margin: 4% auto;
    
    .tour_styles{
     justify-content: space-between;
      column-gap: var(--size_2p0rem);
      
      .tour_card{
        padding: var(--size_2p0rem);
        border-width: 2px;
        border-style: solid;
        border-radius: 10px;
        position: relative;
        display: flex;
        flex-direction: column;
        .section_head{
          .mixed {
           
            h2{
              color: var(--text_color);
            }
            .normal{
              font-size: var(--size_2p8rem);
            }
            .scripted{
              font-size: var(--size_3p2rem);
              
            }
          }
          p{
            display: none;
          }
        }
        .head_row{
          column-gap: var(--size_2p0rem);
          margin-bottom: var(--size_1p4rem);
        
          h4{
            font-size: var(--size_1p2rem);
            font-family: var(--heading_family);
            text-transform: uppercase;
          }
        }
        h3{
          font-weight: 600;
          font-family: var(--subhead_family);
          font-size: var(--size_1p0rem);
          margin-bottom: 1rem;
        }
        .gen_btn{
         margin-top: 1em;
         position: relative;
         bottom: 0;
         width: 70%;
        }
        p{
          width: var(--width_100);
          text-align: justify;
          font-size: var(--size_1p0rem);
          margin-bottom: var(--size_2p0rem);
          flex: 2;
        }
  
        &.card_left{
          border-color: var(--green_color);
          .section_head{
            
            .mixed {
             
              h2{
                color: var(--green_color);
    
              }
              
            }
          }
          h3, p{
            color: var(--green_color);
          }
          .gen_btn{
           
            border: 1px solid var(--green_color);
            color: var(--green_color);
            &:hover{
              background-color: var(--green_color);
              
              color: var(--body_color);
            }
          }
    
        }
       
      }
    }

    .two_columns{
      grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
      grid-gap: 3%;
      .grid_col{
  
        .col_img{
          position: relative;
          width: var(--width_100);
          height: var(--width_100);
          min-height: var(--width_100);
          background-size: cover;
          border-radius: 8px;
          background-position: center;
          background-repeat: no-repeat;
        }
        .section_head{
          margin-bottom: 0.9em;
        
          .mixed {
            justify-content: flex-start;
            .normal{
              font-size: var(--size_2p8rem);
            }
            .scripted{
              font-size: var(--size_3p2rem);
              
            }
          }
          p{
            width: 100%;
            text-align: left;
            font-size: var(--size_1p2rem);
            margin-bottom: 0;
          }
          
        }
        p{
  
          text-align: justify;
          font-size: var(--size_1p2rem);
          margin-bottom: 2.2em;
          margin-top: 0;
        
        }
      }
      &.why{
        .grid_col{
          
          .section_head{
           
            .mixed {
              flex-direction: column;
              h2{
                display: block;
                width: 100%;
                text-align: left;
              }
              .normal{
                text-transform: uppercase;
              }
    
            }
            
          }
        }
      }
      &.re-order{
        .col_content{
          order: 1;
        }
        .col_left{
          order: 2;
        }
      }
    }
  }
  
  .values{
    width: var(--width_100);
    margin: var(--width_5) auto;
    
    background-color: rgba(59, 77, 37, 0.1);
  
  
    .values_slider{
      width: var(--width_80);
      overflow-x: scroll;
      padding: 3em 0;
      margin: auto;
      flex-wrap: nowrap;
      column-gap: 2.5%;
      .value{
        flex-basis: 18%;
        min-width: 18%;
        img{
          margin-bottom: var(--size_0p8rem);
          width: 60px;
        }
        span{
          font-weight: 500;
          text-align: center;
          width: 100%;
          text-transform: uppercase;
          font-size: var(--size_0p9rem);
        }
      }
    }
    
  }
  
  .two_cols{
    height: 620px;
    grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
    grid-gap: 6%;
    .grid_col{
  
      .col_img{
        position: relative;
        width: var(--width_100);
        height: var(--width_100);
        min-height: var(--width_100);
        background-size: cover;
        border-radius: 8px;
        background-position: center;
        background-repeat: no-repeat;
      }
      .section_head{
        margin-bottom: 0.9em;
      
        .mixed {
          justify-content: flex-start;
          .normal{
            font-size: var(--size_3p6rem);
          }
          .scripted{
            font-size: var(--size_5p2rem);
          }
        }
        p{
          width: 100%;
          text-align: left;
          font-size: var(--size_1p2rem);
          margin-bottom: 0;
        }
        
      }
      p{

        text-align: justify;
        font-size: var(--size_1p2rem);
        margin-bottom: 2.2em;
        margin-top: 0;
      
      }
    }
    &.why{
      .grid_col{
        
        .section_head{
         
          .mixed {
            flex-direction: column;
            h2{
              display: block;
              width: 100%;
              text-align: left;
            }
            .normal{
              text-transform: uppercase;
            }
  
          }
          
        }
      }
    }
    &.re-order{
      .col_content{
        order: 1;
      }
      .col_left{
        order: 2;
      }
    }
  }
  .layer{
    width: var(--width_100);
    height: var(--width_100);
    background: rgba(0, 31, 43, 0.5);
    position: absolute;
    top: 0;
    left: 0;

    z-index: 2;
    .btn{
      position: absolute;
      top: 10px;
      right: 10px;
      opacity: 0;
      transition: all 0.35s ease;
      pointer-events: none;
      svg{
        width: 24px;
      }
    }
    &:hover{
      .btn{
        pointer-events: initial;
        opacity: 1;
      }
    }
  }
  
  .tour_slide{
    border-radius: 8px;
    border: 1px solid var(--text_color);
  
    .tour_img{
      width: 100%;
      height: 200px;
      border-top-right-radius: 6px;
      border-top-left-radius: 6px;
      border-bottom: 0.6px solid var(--text_color);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }
    .tour_content{
      width: var(--width_100);
      padding: 0.8em 1.2em;
      flex: 1;
      h3{
        width: var(--width_100);
        text-align: left;
        text-transform: uppercase;
        font-size: var(--size_1p0rem);
        font-weight: 500;
      }
      p.t_txt{
        width: var(--width_100);
        text-align: justify;
        font-size: var(--size_1p0rem);
      }
      h1{
        width: 100%;
        text-align: left;
        font-weight: 400;
        font-family: var(--heading_family);
        color: var(--text_color);
        font-size: var(--size_1p5rem);
      }
      .route{
        width: var(--width_100);
        margin-bottom: 0.4em;
        
        img{
          width: 16px;
          margin-right: 0.5em;
          opacity: 0.6;
        }
        h5{
          color: var(--text_color);
          opacity: 0.6;
          font-size: var(--size_0p8rem);
          text-transform: uppercase;
        }
        
      }
      .price{
        width: var(--width_100);
        margin: 1em 0;
        margin-bottom: 40px;
        align-items: center;
        gap: 2em;
        p{
          width: auto;
          opacity: 0.7;
          color: var(--text_color);
          font-size: var(--size_1p0rem);
          flex: 1;
          margin-bottom: 0 !important;
        }
        h2{
          flex: 1;
          font-family: var(--heading_family);
          font-weight: 400;
          span{
            font-family: var(--heading_family);
            text-transform: uppercase;
            font-size: var(--size_0p7rem);
          }
        }
      }
      .gen_btn{
        display: block !important;
        position: relative !important;
        margin-left: var(--width_60) !important;
        margin-top: 0.6em;
        padding: 0.4em 1em;
        font-weight: 400;
        text-align: center !important;
        color: var(--body_color);
        background-color: var(--text_color);
        width: var(--width_40) !important;
        font-size: var(--size_1p0rem);
        border-width: 1px;
        &:hover{
          background-color: var(--body_color);
          color: var(--text_color);
        }
      }
    }
    
  }
  
  
  .featured_tours{
    width: var(--width_100);
    padding: 3em 10%;
    margin: auto;
    background-color: rgba(59, 77, 37, 0.1);
   

    .feature_buttons{
      width: var(--width_100);
      margin-bottom: 4em;
      column-gap: 2em;
      button{
        border: 0;
        font-weight: 600;
        font-size: var(--size_1p2rem);
        text-transform: uppercase;
        position: relative;
        color: var(--text_color);
        transition: all 0.35s ease;
       
        &::after{
          content: '';
          height: 2px;
          width: 0;
          position: absolute;
          left: 50%;
          bottom: -5px;
          transform: translateX(-50%);
          transition: all 0.35s ease;
 
        }

        &:hover, &.current{
          color: var(--orange_color);
          &::after{
            background-color: var(--orange_color);;
            width: var(--width_100);
          }
        }
      }
  
    }

    .featured_container{
      width: var(--width_100);
      gap: 30px;
    
      .featured_col{
       
        position: relative;

        &.featured_col_left{
          display: flex;
          flex-direction: column;
          flex-basis: 35%;
          flex-grow: 1;
        }
  
        .section_head{
  
          .mixed {
            flex-direction: column;
            h2{
              width: var(--width_100);
              display: block;
              text-align: left;
            }
            .normal{
              font-size: var(--size_2p8rem);
            }
            .scripted{
              font-size: var(--size_3p2rem);
            }
          }
          
          
        }
        p{
          width: var(--width_100);
          text-align: justify;
          flex: 1;
          font-size: var(--size_1p1rem);
          margin-bottom: 2em;
        }
        .arrow_btns{
          position: absolute;
          bottom: 0;
          right: 0;
          gap: 15px;
          .arrow{
           
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1px solid var(--text_color);
           
            position: relative;
            transition: all 0.3s ease;
            .image_layer{
              display: none;
            }
            img{
              display: none;
            }
            svg{
              width: 20px;
              height: 20px;
              path{
                fill: var(--text_color)
              }
            }
            &:hover{
              border: 1px solid var(--text_color);
              background-color: var(--text_color);
              svg{
                path{
                  fill: var(--body_color)
                }
              }
            }
          }
        }

        .gen_btn{
          display: block;
          width: 60%;
          text-align: center;
          font-size: var(--size_1p0rem);
        }

        &.featured_col_right{
          flex-basis: 65%;
          flex-grow: 3;
        
          .feature_slider{
           min-width: var(--width_100);
           .featured_card{
            min-width: var(--width_100);

            .tour_slider{
             width: 100%;
             min-width: 100%;
             overflow-x: scroll;
              grid-template-columns: repeat(2, minmax(300px, 1fr));
              gap: 1.5%;
              cursor: grab;
              .tour_slide{
                flex: 1;
        
              }
            }
           }
          }
        }
  
       
        
      }
    }

  }
  
 



  .dest_nations{
    .section_head{
      margin-bottom: 3em;
    }
    .destinatin_controller{
      width: var(--width_100);
      
    }
    .dest_nation_btns{
        width: var(--width_100);
        margin: auto;
        margin-bottom: 4em;
        column-gap: 1em;
        flex-wrap: nowrap;
        
        button{
          border: 0;
          min-width: 10%;
          font-weight: 600;
          font-size: var(--size_1p2rem);
          text-transform: uppercase;
          position: relative;
         
    
         
          &::after{
            content: '';
            height: 2px;
            width: 0;
            position: absolute;
            left: 50%;
            bottom: -5px;
            transform: translateX(-50%);
            transition: all 0.35s ease;
            
          }
  
          &:hover, &.current{
            color: var(--green_color);
            &::after{
              width: var(--width_100);
              background-color: var(--green_color);
            }
          }
        }
    
      
    }
    .destinations_container{
      width: var(--width_100);
      position: relative;
      height: 750px;
  
      .arrow_btns{
        width: var(--width_100);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        
        .arrow{
         
          width: 40px;
          height: 40px;
          border-radius: 50%;
          border: 1px solid var(--text_color);
         
          position: relative;
          transition: all 0.3s ease;
          .image_layer{
            display: none;
          }
          img{
            display: none;
          }
          svg{
            width: 20px;
            height: 20px;
            path{
              fill: var(--text_color)
            }
          }
          &:hover{
            border: 1px solid var(--text_color);
            background-color: var(--text_color);
            svg{
              path{
                fill: var(--body_color)
              }
            }
          }
        }
      }
  
      .destinations_slider{
        width: var(--width_85);
        margin: auto;
        height: var(--width_100);
        flex-wrap: nowrap;
        overflow: hidden;
  
        .destination{
          min-width: var(--width_100);
          height: var(--width_100);
          border-radius: 8px;
          position: relative;
          
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          .layer{
            border-radius: 8px;
          }
          .destination_preview{
            width: var(--width_100);
            padding: 2em 4%;
            position: absolute;
            column-gap: 10%;
            bottom: 0;
            left: 0;
            z-index: 10;
            h2{
              text-align: left;
              font-weight: 400;
              font-family: var(--script_family);
              color: var(--body_color);
              font-size: var(--size_3p2rem);
              margin-bottom: 0.1em;
            }
            p{
              color: var(--body_color);
              text-align: justify;
              font-size: var(--size_1p0rem);
            }
            .gen_btn{
              border-color: var(--body_color);
              color: var(--body_color);
  
              &:hover{
                background-color: var(--body_color);
               color: var(--text_color);
              }
            }
          }
  
        }
      }
    }
  }
  
  .featured_hotels{
    width: var(--width_100);
    padding: 4em 10%;
    margin: 4em auto;
    padding-bottom: 6em;
    background: rgba(59, 77, 37, 0.1);
    .section_head{
      margin-bottom: 2em;
      .mixed{
        justify-content: flex-start;
      }
    }
  
    .hotels_preview{
      width: var(--width_100);
      margin-bottom: 4em;
      .tour_slide{
        width: 32%;
        position: relative;
  
        .tour_img{
          height: 240px;
          border: 0;
      
        }
  
        .tour_content{
          p.t_txt{
            margin-bottom: 2em;
          }
         
  
          .route{
            margin-bottom: 2em;
  
            &.route2{
              display: none;
            }
            
          }
          .price{
           display: none;
            
          }
          .gen_btn{
            display: block;
            position: absolute;
            right: 1.2em;
            bottom: 20px;
           
            padding: 0.4em 1em;
            text-align: center ;
            width: var(--width_35);
          
            &:hover{
              background-color: var(--body_color);
              color: var(--text_color);
            }
          }
        }
        
      }
    }
    &>.gen_btn{
      border-width: 1px;
    
    }
    &.hotels_at_destination{
      margin-top: 0;
      position: relative;
      .arrow_btns{
          position: absolute;
          left: 10%;
          bottom: 5em;
          column-gap: 2em;
          .arrow{
           
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1px solid var(--text_color);
           
            position: relative;
            transition: all 0.3s ease;
            .image_layer{
              display: none;
            }
            img{
              display: none;
            }
            svg{
              width: 18px;
              height: 18px;
              path{
                fill: var(--text_color)
              }
            }
            &:hover{
              border: 1px solid var(--text_color);
              background-color: var(--text_color);
              svg{
                path{
                  fill: var(--body_color)
                }
              }
            }
          }
        }
  
        .hotels_preview{
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 20px;

          .tour_slide{
            width: 100%;
            .tour_img{
              height: 200px;
           
            }
            .tour_content{
              position: relative;
              flex: 1;
              p.t_txt{
                flex: 1;
                font-size: var(--size_1p0rem);
              }
              .gen_btn{
                margin-left: calc(40% + 1.2em) !important;
                width: 60% !important;
              }
            }
            
          }
  
          &.tours_cards{
            
            gap: 20px;
          grid-template-columns: repeat(3, 1fr);
            .tour_slide{
              &.card_on_tours{
 
                .tour_img{
                  height: 200px;
                }
                .tour_content{
                  h1{
                    font-size: var(--size_1p5rem);
                  }
            
                  .route{
                    margin-bottom: 0.3em;
                    &.route2{
                      margin-top: 0;
                      padding-top: 0;
                      display: flex;
                    }
                    
                  }
                  .price{
                   display: flex;
                    
                  }
                  
                }
              }
            }
  
            
          }
          
          .tour_slide{

            .tour_content{
   
              .route{
                margin-bottom: 1.5em;
                
              }
              
             
            }
          }
        }
      
    }
    &.hotels_at{
      position: relative;
      margin-top: 0;
      .arrow_btns{
       
        display: none;
        left: 10%;
        bottom: 5em;
        column-gap: 2em;
       
      }
      .hotels_preview{
        justify-content: start;
       flex-wrap: wrap;
       gap: 20px !important;
        
        
      }
    }
  
    &.hotels_at_tours{
      margin-bottom: 0 !important;
      .arrow_btns{
        display: none;
      }
    }
  }
  
  .the_plan{
    margin: 4rem auto;
    margin-top: 6rem;
    .section_head{
      margin-bottom: 2em;
    }
    .plan_container{
      width: var(--width_100);
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2%;
      .plan_card{
       
        padding: 20px;
        border-radius: 8px;
        background: rgba(59, 77, 37, 0.1);
  
        h2, h3{
          width: var(--width_100);
          text-align: center;
          font-weight: 400;
        }
        h3{
          font-size: var(--size_2p8rem);
          font-family: var(--script_family);
        }
        h2{
          font-size: var(--size_2p0rem);
          font-family: var(--heading_family);
          text-transform: uppercase;
          margin-bottom: 0.4em;
        }
        p{
          width: var(--width_100);
          font-weight: 400;
          text-align: center;
          font-size: var(--size_1p0rem);
        }
      }
    }
  }
  
  .reviews{
    width: var(--width_100);
    background: rgba(59, 77, 37, 0.1);
    padding: 4em 10%;
    margin-bottom: 0;

    .review_grid{
      width: var(--width_100);
      gap: 5%;
      grid-template: 500px/repeat(2, minmax(300px, 1fr));

      .grid_col{
        position: relative;
        .col_img{
          height: 100%;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          border-radius: 8px;
          .col_content{
            width: var(--width_100);
            height: var(--width_100);
            background-color: rgba(0, 31, 43, 0.4);
            position: relative;
            border-radius: 8px;
            .review_tit{
              width: var(--width_100);
              position: absolute;
              bottom: 2%;
              padding: 4%;
              .section_head{
                width: var(--width_100);
                margin-bottom: 1em;
              
                .mixed {
                  flex-direction: column;
                  h2{
                    width: var(--width_100);
                    text-align: center;
                    color: var(--body_color);
                  }
                  .normal{
                    text-transform: uppercase;
                    font-size: var(--size_3p8rem);
                  }
                  .scripted{
                    font-size: var(--size_3p2rem);
                  }
                }
                p{
                  width: 100%;
                  text-align: left;
                  font-size: var(--size_1p2rem);
                  margin-bottom: 0;
                }
                
              }
              .gen_btn{
                display: block;
                width: var(--width_50);
                margin: auto;
                border-color: var(--body_color);
                color: var(--body_color);
                text-align: center;
                font-size: var(--size_1p1rem);
                &:hover{
                  background-color: var(--body_color);
                  color: var(--text_color);
                }
              }
            }
          }
        }
  
        
        .review_slider{
          .review_card{
            .stars{
              width: var(--width_100);
              margin-bottom: 0.6em;
              img{
                width: 140px;
                object-fit: cover;
                margin-bottom: 1em;
              }
            }
      
              h3{
                width: var(--width_100);
                text-align: justify;
                font-weight: 400;
                font-size: var(--size_2p6rem);
                font-family: var(--heading_family);
                margin-bottom: 1em;
              }
              h4, h5{
                text-transform: uppercase;
              }
              h4{
                font-weight: 600;
                font-size: var(--size_1p2rem);
              }
              h5{
                font-weight: 400;
                font-size: var(--size_1p0rem);
              }
          }
        }
      
  
        .review_btns{
            position: absolute;
            right: 0;
            bottom: 2%;
            column-gap: 1em;
            
            .arrow{
             
              width: 40px;
              height: 40px;
              border-radius: 50%;
              border: 1px solid var(--text_color);
              position: relative;
              transition: all 0.3s ease;
              .image_layer{
                display: none;
              }
              img{
                display: none;
              }
              svg{
                width: 20px;
                height: 20px;
                path{
                  fill: var(--text_color)
                }
              }
              &:hover{
                border: 1px solid var(--text_color);
                background-color: var(--text_color);
                svg{
                  path{
                    fill: var(--body_color)
                }
              }
            }
          }
        }
        
      }
    }
    .two_cols{

      .grid_col{
        position: relative;
        .col_img{
          .col_content{
            width: var(--width_100);
            height: var(--width_100);
            background-color: rgba(0, 31, 43, 0.4);
            position: relative;
            border-radius: 8px;
            .review_tit{
              width: var(--width_100);
              position: absolute;
              bottom: 2%;
              padding: 4%;
              .section_head{
                width: var(--width_100);
                margin-bottom: 1em;
              
                .mixed {
                  flex-direction: column;
                  h2{
                    width: var(--width_100);
                    text-align: center;
                    color: var(--body_color);
                  }
                  .normal{
                    text-transform: uppercase;
                  }
                  .scripted{
                    font-size: var(--size_6p0rem);
                  }
                }
                p{
                  width: 100%;
                  text-align: left;
                  font-size: var(--size_1p2rem);
                  margin-bottom: 0;
                }
                
              }
              .gen_btn{
                display: block;
                width: var(--width_50);
                margin: auto;
                border-color: var(--body_color);
                color: var(--body_color);
                text-align: center;
                &:hover{
                  background-color: var(--body_color);
                  color: var(--text_color);
                }
              }
            }
          }
        }
  
        
        .review_slider{
          .review_card{
            .stars{
              width: var(--width_100);
              margin-bottom: 1em;
              img{
                width: 150px;
                object-fit: cover;
                margin-bottom: 1em;
              }
            }
      
              h3{
                width: var(--width_100);
                text-align: justify;
                font-weight: 400;
                font-size: var(--size_2p8rem);
                font-family: var(--heading_family);
                margin-bottom: 1em;
              }
              h4, h5{
                text-transform: uppercase;
              }
              h4{
                font-weight: 600;
                font-size: var(--size_1p2rem);
              }
              h5{
                font-weight: 400;
                font-size: var(--size_1p0rem);
              }
          }
        }
      
  
        .review_btns{
            position: absolute;
            right: 0;
            bottom: 2%;
            column-gap: 1em;
            
            .arrow{
             
              width: 40px;
              height: 40px;
              border-radius: 50%;
              border: 1px solid var(--text_color);
              position: relative;
              transition: all 0.3s ease;
              .image_layer{
                display: none;
              }
              img{
                display: none;
              }
              svg{
                width: 20px;
                height: 20px;
                path{
                  fill: var(--text_color)
                }
              }
              &:hover{
                border: 1px solid var(--text_color);
                background-color: var(--text_color);
                svg{
                  path{
                    fill: var(--body_color)
                }
              }
            }
          }
        }
        
      }
      
    }
  
   
  }
  
  .news_letter{
    width: var(--width_100);
    column-gap: 3em;
    padding: 1em 10%;
    margin: 3em auto;
    h3{
      font-weight: 400;
      font-family: var(--heading_family);
      font-size: var(--size_2p6rem);
      
    }
  }
  
  .footer{
    width: var(--width_100);
    padding: 3em 10%;
    padding-top: 6em;
    background-color: var(--text_color);
    .footer_columns{
      width: var(--width_100);
      column-gap: 4em;
      padding-bottom: 3em;
      border-bottom: 2px solid var(--body_color);
      position: relative;
      .footer_column{
        flex: 1;
        .logo{
          width: var(--width_100);
          margin-bottom: 1em;
          img{
            width: 140px;
          }
        }
        h2{
          display: block;
          width: var(--width_100);
          text-align: left;
          color:  var(--body_color);
          font-weight: 600;
          font-size: var(--size_1p2rem);
          span{
            
            color: var(--body_color);
            font-weight: 300;
            
          }
        }
        .gen_btn{
          display: block;
          width: var(--width_60);
          text-align: center;
          position: relative;
          margin-top: 1em;
          margin-bottom: 1em;
          border-color: var(--body_color);
          color: var(--body_color);
          &:hover{
            background-color: var(--body_color);
            color: var(--text_color);
          }
        }
        .socials{
          width: var(--width_100);
          
          column-gap: 0.6em;
          .social_link{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            outline: none;
            border: 0;
            cursor: pointer;
          }
          svg{
            width: 26px;
            path{
              fill: var(--orange_color);
            }
          }
        }
  
        .big_link, .normal_link{
          display: block;
          width: var(--width_100);
          text-align: left;
          outline: none;
          border: 0;
          background-color: transparent;
          color: var(--body_color);
          text-transform: uppercase;
          font-weight: 500;
          letter-spacing: 1.6px;
          font-size: var(--size_1p2rem);
          transition: all 0.35s ease;
          &:hover{
            opacity: 0.65;
          }
        }
        .big_link{
          font-size: var(--size_2p8rem);
          font-family: var(--heading_family);
          font-weight: 400;
        }
        
        
      }
      .policy_links{
        position: absolute;
        bottom: 2px;
        right: 0;
        gap: 1em;
        .normal_link{
          color: var(--body_color);
          font-weight: 400;
          font-size: var(--size_1p1rem);
          transition: all 0.35s ease;
          outline: none;
          cursor: pointer;
          border: 0;
          background-color: transparent;
  
          &:first-child{
            padding-right: 1em;
            border-right: 1px solid var(--body_color);
          }
          &:hover{
            opacity: 0.65;
          }
        }
      }
    }
    .footer_bottom{
      padding: 2em 0;
      width: var(--width_100);
      column-gap: 5%;
      .f_col{
        flex: 1;
        h4{
          display: block;
          width: var(--width_100);
          font-weight: 600;
          text-transform: uppercase;
          color: var(--body_color);
          font-size: var(--size_1p2rem);
          margin-bottom: 1em;
        }
        img{
          width: 50px;
        }
        .agencies, .payments{
          gap: 2em;
        }
      }
      /* .payments{
        flex: 1;
      } */
    }
    .copy{
      display: block;
      width: var(--width_100);
      color: var(--body_color);
      text-align: center;
      font-size: var(--size_1p2rem);
      padding: 2em 0;
    }
  }
  
  
  .destinations{
    width: var(--width_100);
    .one_destination{
      width: var(--width_100);
      .destination_hero{
        width: var(--width_100);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        .home_nav{
          position: relative;
          z-index: 10;
          margin-bottom: 1em;
        }
        
        .hero_area{
          width: var(--width_80);
          margin: 2em auto;
          padding-bottom: 4em;
          .hero_left, .hero_right{
            position: relative;
            z-index: 6;
          }
         
          .hero_left{
            width:60%;
            h1, h2{
              width: 100%;
              text-align: left;
              font-weight: 400;
              
            }
            h1{
              text-transform: none;
              font-family: var(--heading_family);
              font-size: var(--size_4p0rem);
              margin-bottom: 0.2em;
              color: var(--orange_color);
            }
            h2{
              text-transform: none;
              font-family: var(--script_family);
              font-size: var(--size_4p5rem);
              margin-bottom: 0.5em;
              color: var(--body_color);
            }
            .gen_btn{
              position: relative;
              margin-bottom: 2em;
              text-align: center;
              color: var(--body_color);
              border-color: var(--body_color);
              &:hover{
                background-color: var(--body_color);
                color: var(--text_color);
              }
            }
          }
          .hero_right{
            width: 35%;
            gap: 1em;
            .info{
              flex: 1;
              h2{
                width: 100%;
                gap: 1em;
                color: var(--body_color);
                text-transform: uppercase;
                font-weight: 600;
                font-size: var(--size_1p0rem);
                margin-bottom: 0.3em;
                img{
                  width: 20px;
                }
              }
              h3{
                width: 100%;
                text-align: left;
                color: var(--body_color);
                font-weight: 400;
                font-size: var(--size_1p0rem);
              }
            }
          }
        }
        &.detail_hero{
  
          .hero_area{
            width: var(--width_80);
            margin: 2em auto;
            padding-bottom: 4em;
            .hero_left, .hero_right{
              position: relative;
              z-index: 6;
            }
           
            .hero_left{
              width:100%;
              h1, h2{
                text-align: center;
              }
              h1{
  
                font-size: var(--size_2p8rem);
              }
              h2{
                font-size: var(--size_3p2rem);
              }
              .gen_btn{
                display: none;
               
              }
            }
            .hero_right{
              display: none;
            }
          }
  
        }
        &.hotel_hero{
          .hero_area{
            justify-content: center;
            align-items: center;
            
           
            .hero_left{
              width:60%;
              h1, h2{
                text-align: center;
              }
              
             
              .gen_btn{
                width: 40%;
                display: block;
                margin: auto;
                
              }
            }
            .hero_right{
              display: none;
            }
          }
        }

        &.whole_hero{
  
          .hero_area{
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: var(--width_80);
            margin: 2em auto;
            padding-bottom: 4em;
            .hero_left, .hero_right{
              position: relative;
              z-index: 6;
            }
           
            .hero_left{
              width:100%;
              margin-bottom: 0.6em;
              h1, h2{
                text-align: center;
                
              }
              h1{
  
                font-size: var(--size_2p8rem);
              }
              h2{
                font-size: var(--size_3p2rem);
              }

              .gen_btn{
                display: block;
                margin: auto;
                margin-top: 3em;
              }
              
            }
            .hero_right{
              width: var(--width_75);
              margin: auto;
             align-items: center;
             justify-content:space-between;
             margin-top: 2em;
             flex-direction: row;
              gap: 1em;
              .info{
                
               

                h2, h3{
                  text-align: left;
                  color: var(--body_color);
                  font-size: var(--size_1p0rem);
                  font-family: var(--text_family) !important;
                }
                h2{
                  
                  gap: 1em;
                  text-transform: uppercase;
                  font-weight: 600;
                  margin-bottom: 0.4em;
                  img{
                    width: 20px;
                  }
                }
                h3{
                  color: var(--body_color);
                  font-weight: 400;
                }
              }
            }
          }
  
        }
      }
  
     
      .destination_info{
        width: var(--width_80);
        margin: 3em auto;
        margin-bottom: 6em;
        .detail{
          width: var(--width_100);
          margin-bottom: 1em;
          h1{
            width: var(--width_100);
            font-weight: 400;
            font-size: var(--size_2p2rem);
            font-family: var(--heading_family);
          }
          h2{
            font-size: var(--size_1p2rem);
            text-transform: uppercase;
            margin-top: 10px;
          }
          p{
            width: var(--width_100);
            text-align: justify;
            font-size: var(--size_1p1rem);
          }
        }
      }
      
      
    }
  }

  .why_section{
    width: var(--width_100);
    margin: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
   
    .reasons{
      position: relative;
      width: 100%;
      margin: auto;
      /* position: absolute;
      right: 10%;
      height: 800px; */
   
      background-color: var(--body_color);
      border-radius: 8px;
      padding: 2em;
      .section_head{
        margin-bottom: 2em;
        position: relative;
        .mixed{
          justify-content: flex-start;
          .normal{
            font-size: var(--size_3p2rem);
          }
          .scripted{
            font-size: var(--size_4p0rem);
          }
        }
       

        p{
          width: 100%;
          text-align: justify;
          margin: 0;
          padding: 0;
        }
      }
      .why_list{
        width: var(--width_100);
        margin-bottom: 2em;
        .why_item{
          width: var(--width_100);
          list-style-type: initial;
          list-style-position: outside;
          margin-bottom: 0.5em;
          h2{
            width: var(--width_100);
            text-align: left;
            font-weight: 600;
            font-size: var(--size_1p2rem);
            span{
              font-weight: 400;
              font-size: var(--size_1p1rem);
              margin-left: 1em;
            }
          }
        }
      }
      .gen_btn{
        font-size: var(--size_1p0rem);
      }

     
     
    }

    &.tour_detail_why{
      padding: 50px;
      .reasons{
        gap: 25px;
        .reasons_left{
          width: 35%;
          .arrow_btns{
            display: none;
          }
          .gen_btn{
            width: 50%;
            font-weight: 400;
            padding: 8px;
          }
        }
        .reasons_right{
          width: 65%;
          .sliding_cards{
            width: 100%;
            .card_slider{
              width: 100%;
              gap: 20px;
              grid-template-columns: repeat(2, 1fr);
            }
          }
        }

      }
    }

    &.destination_why{

      padding: 50px;
      .reasons{
        display: block;
        width: var(--width_50);
        margin-left: 50%;
      }
    }
   
    
  }

  
  .safari_why{
    width: var(--width_100);
    padding: 6em 10%;
    background-color: rgba(59, 77, 37, 0.1);
    height: auto;
  
    .reasons{
      width: var(--width_100);
      margin: 0;
      padding: 0 !important;
      background-color: transparent;
      .reasons_left{
        width: 32%;
        position: relative;
        .section_head{
          .mixed{
            justify-content: flex-start;
            margin-bottom: 0.6em;
          }
          p{
            text-align: justify;
            margin: 0;
            padding: 0;
          }
        }
        .arrow_btns{
         display: none;
          
        }
    
      }
      .reasons_right{
        width: 65%;
        .sliding_cards{
          width: var(--width_100);
          overflow-x: scroll;
          .card_slider{
            width: var(--width_100);
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
          }
        }
      }
    }
  
  }
  .tour_itenary_container{
    width: var(--width_100);
    padding: 5em 10%;
    .tour_itenary_details{
      width: var(--width_100);
      position: relative;
      .it_btn_toggle{
      
        display: none;
        position: absolute;
        left: 1em;
        top: 1.5em;
        z-index: 15;
        width: 30px;
        height: 30px;
        outline: 0;
        cursor: pointer;
        background-color: var(--text_color);
        border: 0;
       
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        img{
          width: 20px;
          height: 20px;
        }
      }
      .col_left{
        width: 32%;
        border-radius: 8px;
        border: 1px solid var(--text_color);
        h2{
          width: var(--width_100);
          text-align: left;
          font-size: var(--size_1p4rem);
          text-transform: uppercase;
          font-weight: 400;
          color: var(--orange_color);
          font-family: var(--heading_family);
          margin-left: 1em;
          margin-top: 2em;
        }
  
        .gen_btn{
          display: block;
          position: relative;
          width: var(--width_90);
          text-align: center;
          background-color: var(--text_color);
          color: var(--body_color);
          font-size: var(--size_1p0rem);
          margin: 1em auto;
          &:hover{
            background-color: var(--body_color);
            color: var(--text_color);
          }
        }
  
        .itenary_btn{
          width: var(--width_100);
          background-color: var(--body_color);
          border: 0;
          padding: 0.4em 1em;
          color: var(--text_color);
          text-transform: uppercase;
          font-weight: 400;
          text-align: left;
          font-family: var(--heading_family);
          font-size: var(--size_1p8rem);
          text-transform: uppercase;
          cursor: pointer;
          transition: all 0.35s ease;
          &:first-child{
            border-top-right-radius: 6px;
            border-top-left-radius: 6px;
            border-top: 1px solid var(--text_color);
          }
          &:hover, &.current{
            background-color: var(--text_color);
            color: var(--body_color);
          }
        }
      }
      .col_right{
        width: 65%;
        overflow-x: hidden;

        .cards_slider{
          flex-wrap: nowrap;
          width: calc(6*100%);
          min-height: var(--width_100);
        }
        .hotel_slider{
          flex-wrap: nowrap;
          width: calc(3*100%);
          min-height: var(--width_100);
          .safari_card{
            min-width: calc(100%/3) !important; 
          }
        }
        
        .safari_card{
          min-width: calc(100%/6);
          min-height: var(--width_100);
          padding: 1em;
          .card_content{
            width: var(--width_100);
  
            h2{
              width: var(--width_100);
              text-align: left;
              font-size: var(--size_2p4rem);
              font-family: var(--heading_family);
              margin-bottom: 0.5em;
              font-weight: 400;
            }
            p{
              width: 100%;
              text-align: justify;
              font-size: var(--size_1p0rem);
              margin-bottom: 1em;
              font-weight: 400;
            }
            &.highlights{
              h3{
                text-transform: uppercase;
                margin-bottom: 0.5em;
                font-weight: 600;
              }
              p{
                margin-bottom: 0.5em;
                position: relative;
                font-size: var(--size_1p0rem);
                span{
                  width: 10px;
                  height: 10px;
                  display: inline-block;
                  background-color: var(--text_color);
                  position: relative;
                  margin-right: 10px;
                  border-radius: 50%;
                }
              }
            }

            .it_day{
              width: var(--width_100);
              margin-bottom: 1em;
              .day_btn{
                display: block;
                width: var(--width_100);
                color: var(--text_color);
                font-family: var(--heading_family);
                border: 1px solid var(--body_color);
                border-bottom: 2px solid var(--text_color);
                text-align: left;
                position: relative;
                font-size: var(--size_1p5rem);
                padding: 0.3em 0.5em;
                margin-bottom: 0.8em;

                &.open, &:hover{
                  background-color: var(--text_color);
                  color: var(--body_color);
                  border: 1px solid var(--text_color);
                  span{
                  
                    svg{
                   
                      path{
                        fill: var(--body_color);
                      }
                    }
                    
                  }
                }

                span{
                  width: 30px;
                  height: 30px;
                  position: absolute;
                  right: 0;
                  top: 50%;
                  transform: translateY(-50%);
                  transition: all 0.35s ease;
                  svg{
                    width: 26px;
                    height: 26px;
                    path{
                      fill: var(--text_color);
                    }
                  }
                  &.rotate{
                    right: 5px;
                    transform: translateY(-50%) rotate(180deg);
                  }
                }
              }
              .day_content{
                width: var(--width_100);
                transition: all 0.35s ease-in-out;
                max-height: 0;
                overflow-y: hidden;
                will-change: max-height;

                .day_image{
                  width: var(--width_100);
                  height: 320px;
                  background-size: cover;
                  background-position: center;
                  background-repeat: no-repeat;
                  border-radius: 4px;
                  margin-bottom: 1em;
                }

             
               
                .day_desc{
                  width: var(--width_100);
                  margin-bottom: 1em;
                  p{
                    margin-bottom: 0.5em;
                  }
                }
                .day_extras{
                  width: var(--width_100);
                  border-radius: 8px;
                  padding: 2em;
                  background-color: rgba(59, 77, 37, 0.1);

                  .day_extra{
                    width: var(--width_100);
                    margin-bottom: 1em;
                    h3{
                      width: var(--width_100) ;
                      color: var(--text_color);
                      font-weight: 600;
                      font-size: var(--size_1p2rem);
                      text-transform: uppercase;
                      margin-bottom: 0.5em;

                      img{
                        width: 24px;
                        margin-right: 1em;
                      }
                    }
                    h4{
                      text-align: left;
                      width: var(--width_100);
                      font-weight: 500;
                      font-size: var(--size_1p1rem);
                      margin-bottom: 0.3em;
                      display: flex;
                      align-items: center;

                      span{
                        display: block;
                        position: relative;
                        width: 8px;
                        height: 8px;
                        font-size: 2px;
                        border-radius: 50%;
                        background-color: var(--text_color);
                        margin-right: 3em;
                      }
                    }
                  }
                }
              }
            }
          }
  
          .photo_gallery{
            min-width: 100%;
            &.card_gallery{
              h2{
                font-family: var(--heading_family);
              }
            }
            h2{
              width: var(--width_100);
              text-align: left;
              font-size: var(--size_3p0rem);
              margin-bottom: 0.5em;
              font-weight: 400;
            }
          }
          
        }
      }
    }
  }
  
  .destination_highlights{
    width: var(--width_100);
    margin: 3em auto;
    padding: 0 10%;
    position: relative;
    z-index: 1;
    .section_head{
      margin-bottom: 2em;
      .mixed{
        justify-content: flex-start;

        .normal{
          font-size: var(--size_3p6rem);
        }
        .scripted{
          font-size: var(--size_4p4rem);
        }
        
      }
    }
  }
  
  .main_image_slider{
    width: var(--width_100);
    .image_slider{
      width: var(--width_100);
      height: 600px;
      position: relative;
  
      .slider_btns{
        width: var(--width_100);
        position: absolute;
        z-index: 15;
        left: 50%;
        top: 50%;
        padding: 1em 3em;
        transform: translate(-50%, -50%);
        justify-content: space-between;
  
        .arrow{
         
          width: 40px;
          height: 40px;
          border-radius: 50%;
          border: 1px solid var(--body_color);
         
          position: relative;
          transition: all 0.3s ease;
          .image_layer{
            display: none;
          }
          img{
            display: none;
          }
          svg{
            width: 20px;
            height: 20px;
            path{
              fill: var(--body_color);
            }
          }
          &:hover{
            border: 1px solid var(--body_color);
            background-color: var(--body_color);
            svg{
              path{
                fill: var(--text_color)
              }
            }
          }
        }
      }
  
      .main_image{
        width: var(--width_100);
        height: var(--width_100);
        position: relative;
        border-radius: 8px;
        z-index: 10;
        cursor: pointer;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        .layer{
          background-color: rgba(0, 31, 43, 0.1);
        }
        h2{
          width: var(--width_100);
          text-align: center;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 0;
          padding: 0.4em;
          font-family: var(--heading_family);
          background: var(--text_color);
          font-weight: 400;
          text-transform: uppercase;
          font-size: var(--size_1p8rem);

          color: var(--body_color);
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
        }
      }
      .image_big{
        width: 100vw;
        height: 100vh;
        position: fixed;
        opacity: 0;
        pointer-events: none;
        transition: all 0.45s ease;
        top: 0;
        left: 0;
        z-index: 100;
        &>.layer{
          background-color: rgba(0, 31, 43, 0.8);
          border-radius: 0;
        }
        .main_image{
          background-color: #ececec;
          width: var(--width_80);
          height: var(--width_80);
          h2{
            background: transparent;
            color: var(--text_color);
          }
        }
        &.visible{
          opacity: 1;
          pointer-events: initial;
        }
        .close_btn{
          position: absolute;
          right: 50px;
          top: 30px;
          width: 26px;
          height: 26px;
          display: flex;
          z-index: 10;
          border: 0;
          outline: none;
          cursor: pointer;
          justify-content: center;
          align-items: center;
          svg{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    
  }
  
  .filter_row{
    width: var(--width_100);
    padding: 3em var(--width_10);
  
    .filterr{
      width: var(--width_100);
      column-gap: 3em;
      h2{
        text-transform: uppercase;
        font-size: var(--size_1p4rem);
        font-weight: 500;
      }
      .custom_select{
        flex: 1;
        position: relative;
        .selected{
          width: 300px;
          border-radius: 6px;
          position: relative;
          border: 1px solid var(--text_color);
          input{
            width: 100%;
            padding: 0.3em 0.5em;
            text-align: left;
            font-size: var(--size_1p4rem);
            color: var(--text_color);
            font-weight: 500;
            border: 0;
            cursor: pointer;
            outline: none;
            background: transparent;
          }
        }
        .select_options{
          width: 300px;
          position: absolute;
          background-color: var(--body_color);
          top: 130%;
          left: 0;
          z-index: 5;
          transition: all 0.4s ease;
          opacity: 0;
          pointer-events: none;
          border: 0.5px solid rgba(0, 31, 43, 0.4);
          border-radius: 8px;
          &.visible{
            top: 110%;
            opacity: 1;
            pointer-events: initial;
          }
        
          .option_btn{
            display: block;
            width: 100%;
            border: 0;
            outline: none;
            color: var(--text_color);
            font-size: var(--size_1p2rem);
            cursor: pointer;
            text-align: left;
            background: transparent;
            padding: 0.2em 0.8em;
            margin-bottom: 0.4em;
            transition: all 0.35s ease;
            &:hover{
              background-color: var(--text_color);
              color: var(--body_color);
            }
          }
        }
      }
      
    }
  }
  .close_btn{
       
    position: absolute;
    right: 50px;
    top: 30px;
    width: 30px;
    height: 30px;
    display: flex;
    z-index: 10;
    border: 0;
    outline: none;
    opacity: 0;
    pointer-events: none;
    transition: 0.25s ease;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    .image_layer{
      display: none;
    }
    svg{
      width: 100%;
      height: 100%;
      path{
        fill: var(--body_color)
      }
    }
  }
  .tour_preview{
    width: var(--width_100);
    height: 600px;
    .preview_col{
      width: 50%;
      height: 100%;
  
      .container{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        position: relative;
        &::after{
          width: 100%;
          height: 100%;
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          background-color: rgba(0, 31, 43, 0.25);
          z-index: 1;
        }
        .slider{
          min-width: 100%;
          height: 100%;
          flex-direction: row;
          flex-wrap: nowrap;
          .image{
            width: var(--width_100);
           min-width: 100% !important;
            min-height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
          }
        }
       .arrow_btns{
          position: absolute;
          width: var(--width_100);
          padding: 0 2em;
          left: 0;
          z-index: 5;
          top: var(--width_50);
          transform: translateY(-50%);
          flex-direction: row;
          justify-content: space-between;
          .arrow{
           
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1px solid var(--body_color);
           
            position: relative;
            transition: all 0.3s ease;
            .image_layer{
              display: none;
            }
            img{
              display: none;
            }
            svg{
              width: 18px;
              height: 18px;
              path{
                fill: var(--body_color)
              }
            }
            &:hover{
              border: 1px solid var(--text_color);
              background-color: var(--text_color);
              svg{
                path{
                  fill: var(--body_color)
                }
              }
            }
          }
        }
  
        .vidz_button{
          position: absolute;
          bottom: 2em;
          left: 1em;
          p{
            color: var(--body_color);
          }
        }
  
      }
  
    }
    .preview_right{
      padding: 2em;
      h4{
        display: block;
        width: 100%;
        text-align: left;
        text-transform: uppercase;
        font-size: var(--size_1p2rem);
      }
      h1{
        display: block;
        width: 100%;
        text-align: left;
        font-weight: 400;
        font-family: var(--heading_family);
        font-size: var(--size_2p2rem);
      }
      h3{
        width: 100%;
        text-align: left;
        text-transform: uppercase;
        font-weight: 500;
        font-size: var(--size_1p0rem);
        margin-bottom: 0.5em;
  
        
        img{
          width: 20px;
          object-fit: cover;
          margin-right: 0.6em;
        }
        span{
          text-transform: uppercase;
        }
      }
      h2{
        display: block;
        width: 100%;
        margin-top: 1em;
        text-align: left;
        font-weight: 400;
        text-transform: uppercase;
        font-family: var(--heading_family);
        font-size: var(--size_1p6rem);
        margin-bottom: 2em;
      }
      .link_btns{
        column-gap: 2em;
        .gen_btn{
          background-color: var(--text_color);
          color: var(--body_color);
          &:hover{
            background-color: transparent;
            color: var(--text_color);
          }
          &.btn_bdnbgless{
            background: transparent;
            color: var(--text_color);
            border: 0;
            &:hover{
              background-color: transparent;
              color: var(--text_color);
              border: 0;
            }
          }
        }
      }
    }
  }
  .captcha{
    
   
   .captcha_img{
    width: 180px;
    user-select: none;
    position: relative;
    height: 50px;
    margin-right: 1em;
    .captcha_bg{
      position: absolute;
      width: var(--width_100);
      height: var(--width_100);
      left: 0;
      top: 0;
      background-position: center;
      background-size: cover;
      padding: 1rem;
      background-repeat: no-repeat;
      user-select: none;
      z-index: 5;
      
    }
    .captcha_code{
      outline: none;
      border: 0 !important;
      background: transparent;
      width: var(--width_100);
      text-align: center;
      letter-spacing: 4px;
      text-decoration: line-through;
    font-style: italic;
    font-size: var(--size_1p6rem) !important;
    font-family: var(--distorted);
    position: relative;
    z-index: 1;
    font-weight: 400;
      transform: skewX(42deg);
    }
   }
   .refresh_btn{
    background: transparent;
    outline: none;
    border: 0;
    cursor: pointer;
    position: relative;
    transition: all 0.25s ease;
    &:active{
      svg{
        transform: scale(0.85) rotate(180deg);
      }
    }
    svg{
      width: 26px;
      height: 26px;
      transition: all 0.15s ease;
      path{
        fill: var(--text_color);
      }
    }
   }
  }
  .custom_select_input{
    width: var(--width_100);
    position: relative;
    .selected{
      width: var(--width_100);
      border-radius: 6px;
      position: relative;
      border: 1px solid var(--text_color);
      input{
        width: 100%;
        padding: 0.3em 0.5em;
        text-align: left;
        font-size: var(--size_1p0rem);
        color: var(--text_color);
        font-weight: 500;
        border: 0;
        cursor: pointer;
        outline: none;
        background: transparent;
      }
    }
    .select_options{
      width: var(--width_100);
      position: absolute;
      background-color: var(--body_color);
      top: 130%;
      left: 0;
      z-index: 5;
      transition: all 0.4s ease;
      opacity: 0;
      pointer-events: none;
      border: 0.5px solid rgba(0, 31, 43, 0.4);
      border-radius: 6px;
      &.visible{
        top: 110%;
        opacity: 1;
        pointer-events: initial;
      }
    
      .option_btn{
        display: block;
        width: 100%;
        position: relative;
        z-index: 5;
        border: 0;
        outline: none;
        color: var(--text_color);
        font-size: var(--size_1p0rem);
        cursor: pointer;
        text-align: left;
        background: transparent;
        padding: 0.2em 0.8em;
        margin-bottom: 0.4em;
        transition: all 0.35s ease;
        &:hover{
          background-color: var(--text_color);
          color: var(--body_color);
        }
      }
     
      &.horizontal{
        flex-wrap: wrap;
        padding: 0.8em;
        .option_btn{
          width: 32%;
          display: inline;
          text-align: center;
          border-radius: 6px;
          text-align: left;
        }
      }
      &.scrollable{
        max-height: 150px;
        overflow-y: scroll;
      }
    }
  }
  
  .main_form{
    width: var(--width_100);
    position: relative;
    .input_line{
      position: relative;
      width: var(--width_100);
      h3{
        display: block;
        width: var(--width_100);
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 0.5em;
      }
      .input_group{
        position: relative;
        width: var(--width_100);
  
        .counted{
          position: absolute;
          bottom: -50%;
          font-weight: 400;
          font-size: var(--size_1p0rem);
          opacity: 0;
          pointer-events: none;
          transition: all 0.25s ease;
          span{
            font-weight: 600;
          }
          &.visible{
            opacity: 1;
            pointer-events: initial;
          }
        }
        .input_label{
          display: block;
          width: var(--width_100);
          text-align: left;
          color: var(--text_color);
          margin-bottom: 0.4em;
          font-size: var(--size_1p0rem);
        }
        input, .text_area{
          width: var(--width_100);
          border: 1px solid var(--text_color);
          font-size: var(--size_1p0rem);
          padding: 5px 10px;
          border-radius: 6px;
          outline: none;
          background-color: transparent;
          &::placeholder{
            color: #20272f;
            opacity: 0.5;
            font-weight: 300;
            font-size: var(--size_0p9rem);
          }
        }
        .text_area{
          &.input{
            min-height: 30px;
          }
        } 
        &.upload{
          position: relative;
          input{
            background: var(--text_color);
            position: relative;
            cursor: pointer;
            &::after{
              border: 1px solid var(--text_color);
              pointer-events: none;
              content: 'Select Image';
              position: absolute;
              top: 0;
              left: 0;
              width: var(--width_100);
              height: var(--width_100);
              background-color: var(--text_color);
              color: var(--body_color);
              text-align: center;
              font-size: var(--size_1p0rem);
            }
            &.multiple{
              &::after{
                border: 1px solid var(--text_color);
                pointer-events: none;
                content: 'Select Images';
                position: absolute;
                top: 0;
                left: 0;
                width: var(--width_100);
                height: var(--width_100);
                background-color: var(--text_color);
                color: var(--body_color);
                text-align: center;
                font-size: var(--size_1p0rem);
              }
            }
          }
        }
        &.place_holder{
          opacity: 0;
          pointer-events: none;
        }
        .manage_btn{
          width: var(--width_100);
          border: 1px solid var(--text_color);
          font-size: var(--size_1p0rem);
          padding: 6px 10px;
          border-radius: 6px;
          outline: none;
          background-color: var(--text_color);
          position: relative;
          cursor: pointer;
          color: var(--body_color);
          text-align: center;
          font-size: var(--size_1p0rem);
        }
      }
      &.double_input{
        display: flex;
        align-items: center;
        column-gap: 1em;
      }
      .break_away{
        display: flex;
        align-items: center;
        column-gap: 1em;
  
        &.left_large{
          display: flex;
          align-items: center;
          column-gap: 1em;
          .input_group{
            &:first-child{
              flex: 3 !important;
            }
            &:last-child{
              flex: 1 !important;
            }
          }
        }
      }
     
  
      &.triple{
        display: flex;
        align-items: center;
        column-gap: 1em;
      }
      &.right_large{
        display: flex;
        align-items: center;
        column-gap: 1em;
        .input_group{
          &:first-child{
            flex: 1 !important;
          }
          &:last-child{
            flex: 3 !important;
          }
        }
      }
    
      &.middle_large{
        .input_group{
          &:first-child{
            flex: 1;
          }
          &:nth-child(2){
            flex: 3;
          }
          &:last-child{
            flex: 1;
          }
        }
      }
    }
    .upload_manager{
      width: var(--width_65);
      position: fixed;
      background-color: var(--body_color);
      left: 50%;
      transform: translateX(-50%);
      border:  1px solid rgba(0, 31, 43, 0.4);
      top: 5%;
      z-index: 50;
      padding: 1em;
      border-radius: 6px;
      opacity: 0;
      pointer-events: none;
      transition: all 0.35s ease;
  
      &.manage_booking{
        width: var(--width_50);
        padding-top: 2.5em;
  
       .close_btn{
        right: 10px !important;
        top: 10px !important;
      }
      .progress_btn{
        display: block;
        width: 60%;
      }
  
      }
      .close_btn{
        right: 20px !important;
        top: 20px !important;
        cursor: pointer;
        svg{
          path{
            fill: var(--text_color)
          }
        }
      }
      &:hover{
        .close_btn{
          opacity: 1;
          pointer-events: initial;
        }
      }
  
      .uploads{
        width: var(--width_100);
        h3{
          width: var(--width_100);
          text-transform: uppercase;
          font-family: var(--heading_family);
          margin-bottom: 0.3em;
          font-size: var(--size_1p5rem);
        }
        p{
          margin-bottom: 0.6em;
          width: var(--width_100);
          padding-bottom: 0.6em;
          border-bottom: 1px solid rgba(32, 39, 47, 0.65);
        }
      }
      &.visible{
        pointer-events: initial;
        opacity: 1;
        top: 15%;
      }
    }
    .note{
      width: var(--width_100);
      text-align: left;
      font-style: italic;
      span{
        font-weight: 600;
      }
    }
  }

  .preview_image_container{
    position: fixed;
    top: 10%;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 5000;
    background-color: rgba(0, 31, 43, 0.6);
    transition: all 0.4s ease-in-out;
    opacity: 0; 
    pointer-events: none;
    .display_img{
      width: 1000px;
      height: 600px;
      border-radius: 8px;
      background-color: rgba(0, 31, 43, 1);
      .preview_image{
        width: var(--width_100);
        margin: auto;
        height: 540px;
        overflow: hidden;
        user-select: none;
        padding: 1em;
        position: relative;
        z-index: 10;
        img{
          position: relative;
          z-index: 2;
          width: var(--width_100);
          height: var(--width_100);
          object-fit: cover;
          border-radius: 6px;
          user-select: none;
         
        }
        
      }
      .decision_btns{
        width: var(--width_100);
        border: 6px solid rgba(0, 31, 43, 1);
        border-top: 0;
        height: 60px;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        padding: 8px 1em;
        background-color: var(--body_color);
        position: relative;
        z-index: 10;
        .progress_btn{
          outline: none;
          border: 0;
          cursor: pointer;
          border-radius: 8px;
          font-size: var(--size_1p1rem);
          padding: 4px 2em;
          transition: all 0.25s ease;
          &.back_btn{
            background-color: rgba(59, 77, 37, 0.1);
            color: var(--text_color);
            border: 0.5px solid rgba(59, 77, 37, 0.1);
          }
          
          &.next_btn{
            background-color: var(--text_color);
            color: var(--body_color);
            border: 0.5px solid var(--text_color);
          }
          &:hover{
            background-color: var(--body_color);
            color: var(--text_color);
            border: 0.5px solid rgba(0, 31, 43, 0.4);
          }
        }
      }
      &.visible{
        opacity: 1;
        pointer-events: initial;
        top: 50%;
      }
    }

    .display_images{
      width: 1500px;
      height: 800px;
      border-radius: 8px;
      background-color: rgba(0, 31, 43, 1);

      .preview_images{
        width: var(--width_100);
        margin: auto;
        height: 740px;
        overflow-y: scroll;
       
        user-select: none;
        padding: 1em;
        position: relative;
        z-index: 2;
        gap: 20px;
        img{
          position: relative;
          z-index: 2;
          width: 480px;
          height: 300px;
          object-fit: cover;
          border-radius: 6px;
          user-select: none;
         
        }
        
      }
      .decision_btns{
        position: relative;
        z-index: 10;
        width: var(--width_100);
        border: 6px solid rgba(0, 31, 43, 1);
        border-top: 0;
        height: 60px;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        padding: 8px 1em;
        background-color: var(--body_color);
        .progress_btn{
          outline: none;
          border: 0;
          cursor: pointer;
          border-radius: 8px;
          font-size: var(--size_1p1rem);
          padding: 4px 2em;
          transition: all 0.25s ease;
          &.back_btn{
            background-color: rgba(59, 77, 37, 0.1);
            color: var(--text_color);
            border: 0.5px solid rgba(59, 77, 37, 0.1);
          }
          
          &.next_btn{
            background-color: var(--text_color);
            color: var(--body_color);
            border: 0.5px solid var(--text_color);
          }
          &:hover{
            background-color: var(--body_color);
            color: var(--text_color);
            border: 0.5px solid rgba(0, 31, 43, 0.4);
          }
        }
      }
     
    }
    &.visible{
      opacity: 1;
      pointer-events: initial;
      top: 0;
    }
  }
  
  
  .err_box{
    position: fixed;
    max-width: 600px;
    top: 10px;
    left: 20px;
  z-index: 3000;
    transition: all 0.35s ease;
    opacity: 0;
    pointer-events: none;
    .err_message{
      font-weight: 500;
      font-style: italic;
      color: var(--text_color);
      font-size: var(--size_1p0rem);
      text-align: left;
      background-color: var(--text_color);
      padding: 8px 1em;
      border-radius: 6px;
      
      &.err_failure{
        color: var(--fail_color);
        border-top: 4px solid var(--fail_color);
    
      }
      &.err_success{
        color: var(--success_color);
        border-top: 4px solid var(--success_color);
      
      }
    }
    .error_btn{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: block;
      margin-right: 1em;
      border: 0;
      background-color: transparent;
      cursor: pointer;
      
      svg{
        width: 100%;
        height: 100%;
      }
    }
    &.visible{
      opacity: 1;
      pointer-events: initial;
    }
    
  }
  .bookings{
    position: relative;
    .booking_header{
      width: var(--width_100);
      padding: 1em var(--width_5);
      background-color: rgba(59, 77, 37, 0.1);

      .menu_btn{
        display: none;
          img{
            width: 36px;
            object-fit: cover;
          }
        
      }
     
      .links{
        position: relative;
        
        gap: 1em;
        .nav_item{

          .nav_link{
            background-color: transparent;
            color: var(--text_color);
            border: 0;
            font-size: var(--size_1p1rem);
            text-transform: uppercase;
            transition: all 0.35s ease;
            &:hover{
              color: var(--orange_color);
            }
          }
          &.current{
            .nav_link{
              color: var(--orange_color);
            }
          }
        }
      }
      .logo{
        pointer-events: none;
        img{
          width: 80px;
          object-fit: cover;
        }
      }
      .contacts{
      
        h2{
          color: var(--text_color);
          font-weight: 500;
          &:first-child{
            padding-right: 0.6em;
            margin-right: 0.6em;
            border-right: 2px solid var(--text_color);
          }
          span{
            font-weight: 400;
          }
        }
      }
      .log_btn{
        outline: none;
        background-color: var(--text_color);
        color: var(--body_color);
        text-align: center;
        border-radius: 6px;
        cursor: pointer;
        font-size: var(--size_1p0rem);
        padding: 6px 1.5em;
        transition: all 0.35s ease;
        border: 1px solid var(--text_color);
        &:hover{
          background-color: var(--body_color);
          color: var(--text_color);
         
        }
      }
     
    }

    .management_title{
      width: var(--width_75);
      margin: 2em auto;

      h1{
        font-size: var(--size_2p6rem);
        font-weight: 500;
        font-family: var(--heading_family);
      }
      h2{
        font-size: var(--size_1p4rem);
        font-weight: 400;
        font-family: var(--heading_family);
        span{
          font-family: var(--heading_family);
          font-weight: 500;
          text-transform: uppercase;
          letter-spacing: 2px;
        }
      }
      .left{
        p{
          font-size: var(--size_1p1rem);
        }
      }
     
    }
    .form_container{
      width: var(--width_50);
      margin: 1em auto;
     position: relative;
     z-index: 4;
     height: max-content;
     min-height: 70vh;
     .permanent_note{
      width: var(--width_100);
      text-align: left;
      color: var(--fail_color);
      font-weight: 500;
      font-size: var(--size_1p0rem);
      font-style: italic;
      margin-bottom: 0.6em;
     }
      .payment_form{
        width: var(--width_100);
        border-radius: 8px;
        padding: 2.5em;
        background-color: rgba(59, 77, 37, 0.1);
        margin-bottom: 1.5em;
  
        .progress_line{
          width: var(--width_100);
          margin-bottom: 1em;
          span{
            position: relative;
            flex: 1;
            border-radius: 2px;
            height: 4px;
            background-color: rgba(59, 77, 37, 0.2);
            &.current{
              background-color: var(--orange_color);
            }
            &:not(&:last-child),  &:not(&:first-child){
              border-right: 2px solid var(--body_color);
              border-left: 2px solid var(--body_color);
            }
            &:first-child{
              border-right: 4px solid var(--body_color);
            }
            &:last-child{
              border-left: 4px solid var(--body_color);
            }
          }
        }
        .book_steps{
          width: var(--width_100);
          flex-direction: row;
          flex-wrap: nowrap;
       
          /* overflow-x: hidden; */
          .step{
            width: var(--width_100);
            position: relative;
            /* min-width: var(--width_100); */
            h1{
              width: var(--width_100);
              text-align: left;
              font-size: var(--size_2p2rem);
              font-weight: 400;
              font-family: var(--heading_family);
            }
            p{
              margin-bottom: 1em;
              font-size: var(--size_1p0rem);
              font-weight: 300;
              span{
                font-weight: 600;
              }
            }
            .tour_info{
              margin-bottom: 1em;
              &.book_start{
                width: var(--width_100);
                padding-bottom: 1em;
                border-bottom: 1px solid rgba(59, 77, 37, 0.25);;
                gap: 3em;
                .link_btn{
                  flex: 1;
                }
              }
              p{
                margin-bottom: 0.3em;
                span{
                  font-weight: 600;
                }
              }
              .link_btn{
                display: block;
                outline: none;
                border: 0;
                cursor: pointer;
                border-radius: 8px;
                font-size: var(--size_1p2rem);
                padding: 8px 1em;
                background-color: var(--text_color);
                  color: var(--body_color);
                  border: 0.5px solid var(--text_color);
                transition: all 0.25s ease;
                margin-top: 1em;
                width: 200px;
                text-align: center;
                font-weight: 400;
                font-family: var(--heading_family);
                
                &:hover{
                  background-color: var(--body_color);
                  color: var(--text_color);
                  border: 0.5px solid rgba(0, 31, 43, 0.4);
                }
              }
              &.flex_center{
                padding-bottom: 1em;
                border-bottom: 1px solid rgba(59, 77, 37, 0.25);;
                p{
                  &:last-child{
                    margin-left: 2em;
                  }
                }
              }
              &.card_detail{
                border-top: 1px solid rgba(59, 77, 37, 0.2);
                margin-top: 0.6em;
                padding-top: 0.6em;
                h4{
                  font-size: var(--size_1p0rem);
                  font-family: var(--heading_family);
                  font-weight: 500;
                }
                span{
                  font-family: var(--text_family);
                  font-weight: 400;
                  margin-left: 0.6em;
                }
              }
            }

            .final_notification{
              position: fixed;
              z-index: 5000;
              top: 0;
              left: 0;
              width: 100vw;
              height: 100vh;
              display: flex;
              align-items: center;
              justify-content: center;
              .notification{
                width: 500px;
                background-color: var(--body_color);
                border-radius: 6px;
                border: 0.6px solid var(--text_color);
                padding: 1em;
                img{
                  width: 30px;
                  
                  margin-right: 1em;
                }
                p{
                  text-align: left;
                  margin: 0;

                  &.success{
                    color: var(--success_color);
                  }
                  &.failure{
                    color: var(--fail_color);
                  }
                }
              }

            }
            .terms{
              width: var(--width_100);
              display: flex;
              .custom_check_box{
                margin-right: 0.8em;
                width: 20px;
                height: 20px;
                margin-top: 0;
                position: relative;
                .check_mark{
                  width: var(--width_100);
                  height: var(--width_100);
                  cursor: pointer;
                  position: relative;
                  z-index: 1;
                  border-radius: 50%;
                  opacity: 0;
                }
                label{
                  position: absolute;
                  z-index: 5;
                  background-color: var(--body_color);
                  border: 0.5px solid rgba(59, 77, 37, 0.25);
                  width: var(--width_90);
                  height: var(--width_90);
                  border-radius: 4px;
                  cursor: pointer;
                  svg{
                    width: var(--width_70);
                  }
                  &.checked{
                    background-color: var(--text_color);
                    border: 0.5px solid var(--text_color);
                  }
                }
              }
              .btn{
                color: var(--text_color);
                font-size: var(--size_1p0rem);
                border: 0;
                transition: all 0.25s ease;
                &:hover{
                  text-decoration: underline;
                }
              }
            }
  
            .payment_frame {
              width: var(--width_100);
              min-width: var(--width_100);
              height: 100%;
              min-height: 100%;
              position: relative;
              .pesapal {
                display: block;
                height: 100%;
                min-height: 500px;
                max-height: 100%;
                width: 100%;
                position: relative;
                iframe {
                  position: absolute;
                  top: 0;
                  left: 0;
                  bottom: 0;
                  right: 0;
                  width: 100%;
                  height: 100%;
                  min-width: 100%;
                  min-height: 100%;
                }
              }
             
            }
          }
          .main_form{
     
            .input_line{
              margin-bottom: 1em;
              .input_group{
                width: var(--width_100);
                .input_label{
                  display: block;
                  width: var(--width_100);
                  text-align: left;
                  color: var(--text_color);
                  margin-bottom: 0.4em;
                  font-size: var(--size_1p0rem);
                  position: relative;
                  z-index: 2;
                }
                .custom_select_input{
                  .selected{
                
                    input{
                      border: 0; 
                    }
                  }
                }
              }
              
            }
          }
        }    
      }
      .progress_buttons{
        width: var(--width_100);
        .progress_btn{
          outline: none;
          border: 0;
          cursor: pointer;
          border-radius: 8px;
          font-size: var(--size_1p0rem);
          padding: 8px 1em;
          transition: all 0.25s ease;
          &.back_btn{
            background-color: rgba(59, 77, 37, 0.1);
            color: var(--text_color);
            border: 0.5px solid rgba(59, 77, 37, 0.1);
          }
          &.invisible{
            opacity: 0;
            pointer-events: none;
          }
          &.next_btn{
            background-color: var(--text_color);
            color: var(--body_color);
            border: 0.5px solid var(--text_color);
          }
          &:hover{
            background-color: var(--body_color);
            color: var(--text_color);
            border: 0.5px solid rgba(0, 31, 43, 0.4);
          }
        }
        .counted{
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 0%;
          font-weight: 400;
          font-size: var(--size_1p2rem);
          opacity: 0;
          pointer-events: none;
          transition: all 0.25s ease;
          span{
            font-weight: 600;
          }
          &.visible{
            opacity: 1;
            pointer-events: initial;
          }
        }
       
      }
      &.manage_form{
        width: var(--width_75);
      }
    }
    .footer_bottom{
      padding: 2em 10%;
      width: var(--width_100);
      position: relative;
      
      z-index: 2;
      column-gap: 5%;
      background-color: var(--body_color);
      &::after{
        content: '';
        width: var(--width_100);
        height: var(--width_100);
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(59, 77, 37, 0.1);
        z-index: -1;
      }
      .f_col{
        
        h4{
          
          font-weight: 600;
          text-transform: uppercase;
          color: var(--text_color);
          font-size: var(--size_1p0rem);
          margin-right: 1em;
        }
        img{
          width: 45px;
        }
        .agencies, .payments{
          gap: 2em;
        }
      
        .normal_link{
          border: 0 !important;
          outline: 0 !important;
          cursor: pointer;
          font-size: var(--size_1p0rem);
          &:first-child{
            padding-right: 0.6em;
            border-right: 1px solid var(--text_color);
            margin-right: 0.6em;
          }
        }
      }
      /* .payments{
        flex: 1;
      } */
    }
    &.management{
      overflow: hidden;
      .form_container{
        padding-top: 4em;
        width: 35%;
        
      }
    }
  }
  
  .custom_table{
    width: var(--width_100);
    .table{
      width: var(--width_100);
      border-collapse: collapse;
      th, td{
        padding: 8px;
        text-align: center;
        &:nth-child(1), &:nth-child(2){
          text-align: left;
        }
        
        /* border: 1px solid #666464; */
      }
      th{
        color: var(--body_color);
        background-color: var(--orange_color);
      }
      tfoot{
        /* background-color: var(--body_color); */
        border-top: 1px solid rgba(59, 77, 37, 0.25);
        td{
          font-weight: 500;
          font-size: var(--size_1p0rem);
        
        }
        .total{
          td{
            font-weight: 600;
            font-family: var(--heading_family);
            font-size: var(--size_1p1rem);
          }
        }
      }
    }
  }
  
  
  /* responsive design */
  /* use: max-width - exact or smaller for desktop first approach*/
  /* use: min-width - exact or larger for mobile first */
  /* my screen resolution - 1366px x 768px
  standard media screen resolution
  
  Some standard display resolutions and their market names/acronyms:
  1280 x 720 (720p, HD, HD Ready, Standard HD)
  1920 x 1080 (1080p, Full HD, FHD)
  2560 x 1440 (1440p, Wide Quad HD, Quad HD, WQHD, QHD)
  3840 x 2160 (4K, Ultra HD, UHD, 4K UHD)
  7680 x 4320 (8K, 8K UHD)
  
  
  
  Some common aspect ratios for displays:
  4:3 (Fullscreen)
  16:9 (Widescreen)
  21:9 (Ultrawide)
   */
  
 
  @media screen and (max-width: 1400px){
  
    .news_letter{
      column-gap: 2em;
  
      h3{
        width: var(--width_65);
        font-size: var(--size_2p6rem);
      }
    }


    
  }
  @media screen and (max-width: 1350px){
    .why_section{

    
      &.destination_why{
       
        padding: 50px;
        .reasons{
          display: block;
          width: var(--width_60);
          
          margin-left: 40%;
        }
      }
     
      
    }
  
  }
  @media screen and (max-width: 1300px){
    .tour_styles{

       .tour_card{
       

         .gen_btn{

          width: 80%;
         }
         
       }
     }


    .main_nav{

      .nav_links{
     
        
    
    
        .nav_items{
          
          .nav_list{
          
            .nav_item{
             
             
      
             
              
              &.main_item{
             
                .nested_list{
                  position: absolute;
                  width: 80%;
                  left: -30%;
                
                
                  
                }
                &:hover{
                  .nested_list{
                    opacity: 1;
                    pointer-events: initial;
                    left: -42%;
          
                  }
                }
              }
            }
          }
          
        }
        
      }
     
    
     
    }
  
    .two_cols{
      height: 640px;
     
    }
    
  
    
  
     .dest_nations{
  
     
       
      .destinations_container{
        width: var(--width_100);
        position: relative;
        height: 600px;
    
        
      }
    }
    .featured_hotels{
    
     
      /* .section_head{
        margin-bottom: 2em;
        .mixed{
          justify-content: flex-start;
        }
      } */
    
      .hotels_preview{
      
        .tour_slide{
          width: 32%;
          position: relative;
    
          
    
          .tour_content{
            p.t_txt{
              margin-bottom: 2em;
            }
           
    
           
            .gen_btn{
             
            
              width: var(--width_40);
            
              &:hover{
                background-color: var(--body_color);
                color: var(--text_color);
              }
            }
          }
        }
      }
      
    }

    .destinations{

      .one_destination{

        .destination_hero{


          
         
         
  
          &.whole_hero{
    
            .hero_area{
              
              .hero_left, .hero_right{
                position: relative;
                z-index: 6;
              }
             
              .hero_right{
                width: var(--width_100);
             
               margin-top: 2em;
               
              }
            }
    
          }
        }
    
       
       
        
        
      }
    }
  
  }
  @media screen and (max-width: 1200px){
    .tour_styles{
     
       .tour_card{
         
         .gen_btn{
         display: block;
          width: 100% !important;
         }
        
   
         &.card_left{
           
          
           .gen_btn{
            
             border: 2px solid var(--green_color);
             color: var(--green_color);
             &:hover{
               background-color: var(--green_color);
               
               color: var(--body_color);
             }
           }
     
         }
        
       }
     }

 
      /* nav */
  .main_nav{
    width: var(--width_60);


  
    .nav_links{
    
     
  
      .nav_img{
        img{
          width: 300px;
        }
      }
  
      .nav_items{

        .nav_list{

          .nav_item{
            &.main_item{
             
              .nested_list{
                position: absolute;
                width: 80%;
                left: -30%;
              
              
                
              }
              &:hover{
                .nested_list{
                  opacity: 1;
                  pointer-events: initial;
                  left: -42%;
        
                }
              }
            }
          }
        }
       
        
        .other_list{
         width: 60%;
         position: relative;
         margin-left:40%;
        .col{
          width: var(--width_half);
        }
  
         
        }
      }
      
    }
  
   
  }
  
  
    .hero{
    
      .main_hero{

        .hero_left{

          .hero_left_content{
            padding-left: 15%;
            padding-right: 5%;
            /* position: relative; */
            /* .title{
              color: var(--orange_color);
              font-weight: 400;
              font-family: var(--heading_family);
              margin-bottom: 0.6rem;
              font-size: 4rem;
              text-transform: uppercase;
            } */
          
          
            .btn{
              padding: 0.3em 3em;
              &:hover{
                background-color: var(--body_color);
                color: var(--text_color);
                border-color: var(--body_color);
              }
              
              &:last-child{
                padding: 0.3em 2em;
                &:hover{
                  background-color: transparent;
                  color: var(--body_color);
                  span{
                    background-color: var(--body_color);
                    svg{
                      path{
                        fill: var(--green_color);
                      }
                    }
                  }
                }
              }
              span{
                display: block;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                border: 1px solid var(--body_color);
                margin-right: 1em;
                transition: all 0.25s ease;
    
                svg{
                  width: 18px;
                  height: 18px;
                  path{
                    fill: var(--body_color);
                  }
                }
              }
            }
  
            .slider_arrows{
              position: absolute;
              bottom: 5%;
              left: 20%;
              column-gap: 10px;
              opacity: 0;
              transition: all 0.35s ease;
              pointer-events: none;
      
              .arrow{
                flex: 1;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
               
                position: relative;
                transition: all 0.3s ease;
                .image_layer{
                  display: none;
                }
                img{
                  display: none;
                }
                svg{
                  width: 34px;
                  height: 34px;
                  path{
                    fill: var(--body_color)
                  }
                }
                &:hover{
                  background-color: var(--body_color);
                  svg{
                    path{
                      fill: var(--text_color)
                    }
                  }
                }
  
                &:first-child{
                  svg{
                    margin-right: 5px;
                  }
                }
                &:last-child{
                  svg{
                    margin-left: 5px;
                  }
                }
              }
            }
          }
          
        }
  
     
    
        .slider{
        
          padding: 2.5% 0.5%;
          column-gap: 2em;
          
          
          .slider_images{
            .slide{
            
              width: 70px;
              height: 40px;
             
              &:not(:last-child){
                margin-right: 0.8em;
              }
              
             
              &.current{
                width: 80px;
                height: 50px;
         
              }
            }
          }
    
        }
      }
     
    }
  
   
  
    .two_cols{
      height: 740px;
     
    }
  
    .dest_nations{
      
      
      .destinations_container{
       
        height: 600px;
        position: relative;
    
        .arrow_btns{
          width: var(--width_75);
  
          z-index: 10;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          
          .arrow{
            width: 32px;
            height: 32px;
  
            border: 1px solid var(--body_color);
  
            svg{
              width: 18px;
              height: 18px;
              path{
                fill: var(--body_color)
              }
            }
            &:hover{
              border: 1px solid var(--body_color);
              background-color: var(--body_color);
              svg{
                path{
                  fill: var(--text_color)
                }
              }
            }
          }
        }
    
        .destinations_slider{
          width: var(--width_100);
       
          
    
          
        }
      }
    }
    
    .featured_hotels{
    
     
      /* .section_head{
        margin-bottom: 2em;
        .mixed{
          justify-content: flex-start;
        }
      } */
    
      .hotels_preview{
      flex-wrap: wrap;
      column-gap: 4%;
      row-gap: 2em;
        .tour_slide{
          width: 48%;
          position: relative;
    
          
    
          .tour_content{
            p.t_txt{
              margin-bottom: 2em;
            }
           
    
           
            .gen_btn{
  
              width: var(--width_40);
            
              
            }
          }
        }
      }
      
    }
  
   
  
    .footer{
     
      padding-top: 5em;
      
      .footer_columns{
        row-gap: 3em;
        flex-direction: column;
        .footer_column{
          width: 100%;
         
          .logo{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1em;
            img{
              width: 120px;
            }
          }
          h2{
            display: block;
            width: var(--width_100);
            text-align: center;
            color:  var(--body_color);
            font-weight: 600;
            font-size: var(--size_1p2rem);
            span{
              
              color: var(--body_color);
              font-weight: 300;
              
            }
          }
          .gen_btn{
            display: block;
            width: var(--width_60);
           
           margin: 1em auto;
          }
          .socials{
            width: var(--width_100);
            
            column-gap: 0.6em;
            justify-content: center;
            svg{
              width: 30px;
              path{
                fill: var(--orange_color);
              }
            }
          }
    
          .big_link, .normal_link{
            display: block;
     
            text-align: center;
            color: var(--body_color);
            
            font-size: var(--size_1p2rem);
            
            
          }
          .big_link{
            font-size: var(--size_2p8rem);
            font-family: var(--heading_family);
            font-weight: 400;
          }
          
        }
      }
      .footer_bottom{
        padding: 2em 0;
        width: var(--width_100);
        column-gap: 2%;
        justify-content: space-between;
        .f_col{
          flex: 1;
          &:first-child{
            flex: 2;
          }
          h4{
          
            font-size: var(--size_1p2rem);
        
          }
          img{
            width: 50px;
          }
          .agencies, .payments{
            gap: 1em;
          }
        }
        /* .payments{
          flex: 1;
        } */
      }
      .copy{
        display: block;
        width: var(--width_100);
        color: var(--body_color);
        text-align: center;
        font-size: var(--size_1p2rem);
        padding: 2em 0;
      }
    }

    .why_section{



     
      &.tour_detail_why{
       
        .reasons{
          .reasons_right{
           
            .sliding_cards{
              .card_slider{
                .tour_slide{
                  .tour_content{

                    .gen_btn{
                     
                      margin-left: var(--width_40) !important;
                      width: var(--width_60) !important;
                   
                    
                    }
                  }
                }
              }
            }
          }
  
        }
      }

      &.destination_why{
      
        padding: 50px;
        .reasons{
          display: block;
          width: 65%;
       
          margin-left: 35%;
        }
      }
     
      
    }

    .safari_why{
      width: var(--width_100);
      padding: 6em 10%;
      background-color: rgba(59, 77, 37, 0.1);
      height: auto;
    
      .reasons{
        flex-direction: column;

        .reasons_left{
          width: 100%;
          position: relative;
          margin-bottom: 30px;
          .section_head{
            .mixed{
              justify-content: flex-start;
              flex-direction: row !important;
              margin-bottom: 0.6em;
            }
            p{
              text-align: justify;
              margin: 0;
              padding: 0;
            }
          }
          .arrow_btns{
           display: none;
            
          }
          .gen_btn{
            width: 40%;
          }
      
        }
        .reasons_right{
          width: 100%;
          .sliding_cards{
            width: var(--width_100);
            overflow-x: scroll;
            .card_slider{
              width: var(--width_100);
              grid-template-columns: repeat(2, 1fr);
              gap: 20px;
            }
          }
        }
      }
    
    }

    .featured_tours{
      /* padding: 3em 10%; */

      .feature_buttons{
        /* margin-bottom: 3em; */
        /* gap: 2em; */
        button{
          font-size: var(--size_1p2rem);
        }
    
      }
  
      .featured_container{
        width: var(--width_100);
        gap: 25px;
      
        .featured_col{

          &.featured_col_left{
          
            flex-basis: 50%;
            flex-grow: 1;
          }
    
          .section_head{
    
            .mixed {
              /* flex-direction: column;
              h2{
                width: var(--width_100);
                display: block;
                text-align: left;
              } */
              /* .normal{
                font-size: var(--size_2p4rem);
              }
              .scripted{
                font-size: var(--size_3p2rem);
              } */
            }
            
            
          }
          p{
            font-size: var(--size_1p0rem);
            /* margin-bottom: 2em; */
          }
         
          .gen_btn{
            width: 60%;
            /* font-size: var(--size_1p0rem); */
          }
  
          &.featured_col_right{
            flex-basis: 50%;
            flex-grow: 3;
          
            .feature_slider{
             .featured_card{
          
  
              .tour_slider{
                grid-template-columns: 100% 100%;
                .tour_slide{
                  flex: 1;
          
                }
              }
             }
            }
          }
    
         
          
        }
      }
  
    }

    .reviews{

      /* padding: 4em 10%; */

  
      .review_grid{
        width: var(--width_100);
        gap: 5%;
        grid-template: 400px/repeat(2, minmax(300px, 1fr));
  
        .grid_col{
          .col_img{
            
            .col_content{
              
              .review_tit{
               
                /* padding: 4%; */
                .section_head{

                  .mixed {
                    
                    .normal{
                      text-transform: uppercase;
                      font-size: var(--size_2p8rem);
                    }
                    .scripted{
                      font-size: var(--size_3p2rem);
                    }
                  }
                 
                  
                }
                .gen_btn{
                  width: var(--width_60);
                  font-size: var(--size_1p1rem);
                  
                }
              }
            }
          }
    
          
          .review_slider{
            .review_card{
              .stars{
                /* margin-bottom: 0.6em; */
                img{
                  /* width: 140px; */
                  margin-bottom: 1em;
                }
              }
        
                h3{
                  font-size: var(--size_2p2rem);
                }
                
                h4{
                  font-size: var(--size_1p2rem);
                }
                h5{
                  font-size: var(--size_1p0rem);
                }
            }
          }
        
    
          .review_btns{
 
              .arrow{
               
                width: 36px;
                height: 36px;
                
               
                svg{
                  width: 17px;
                  height: 17px;
                 
                }
              
            }
          }
          
        }
      }
      .two_cols{
  
        .grid_col{
          position: relative;
          .col_img{
            .col_content{
              width: var(--width_100);
              height: var(--width_100);
              background-color: rgba(0, 31, 43, 0.4);
              position: relative;
              border-radius: 8px;
              .review_tit{
                width: var(--width_100);
                position: absolute;
                bottom: 2%;
                padding: 4%;
                .section_head{
                  width: var(--width_100);
                  margin-bottom: 1em;
                
                  .mixed {
                    flex-direction: column;
                    h2{
                      width: var(--width_100);
                      text-align: center;
                      color: var(--body_color);
                    }
                    .normal{
                      text-transform: uppercase;
                    }
                    .scripted{
                      font-size: var(--size_6p0rem);
                    }
                  }
                  p{
                    width: 100%;
                    text-align: left;
                    font-size: var(--size_1p2rem);
                    margin-bottom: 0;
                  }
                  
                }
                .gen_btn{
                  display: block;
                  width: var(--width_50);
                  margin: auto;
                  border-color: var(--body_color);
                  color: var(--body_color);
                  text-align: center;
                  &:hover{
                    background-color: var(--body_color);
                    color: var(--text_color);
                  }
                }
              }
            }
          }
    
          
          .review_slider{
            .review_card{
              .stars{
                width: var(--width_100);
                margin-bottom: 1em;
                img{
                  width: 150px;
                  object-fit: cover;
                  margin-bottom: 1em;
                }
              }
        
                h3{
                  width: var(--width_100);
                  text-align: justify;
                  font-weight: 400;
                  font-size: var(--size_2p8rem);
                  font-family: var(--heading_family);
                  margin-bottom: 1em;
                }
                h4, h5{
                  text-transform: uppercase;
                }
                h4{
                  font-weight: 600;
                  font-size: var(--size_1p2rem);
                }
                h5{
                  font-weight: 400;
                  font-size: var(--size_1p0rem);
                }
            }
          }
        
    
          .review_btns{
              position: absolute;
              right: 0;
              bottom: 2%;
              column-gap: 1em;
              
              .arrow{
               
                width: 40px;
                height: 40px;
                border-radius: 50%;
                border: 1px solid var(--text_color);
                position: relative;
                transition: all 0.3s ease;
                .image_layer{
                  display: none;
                }
                img{
                  display: none;
                }
                svg{
                  width: 20px;
                  height: 20px;
                  path{
                    fill: var(--text_color)
                  }
                }
                &:hover{
                  border: 1px solid var(--text_color);
                  background-color: var(--text_color);
                  svg{
                    path{
                      fill: var(--body_color)
                  }
                }
              }
            }
          }
          
        }
        
      }
    
     
    }

    .bookings{
      
     
      &.management{
        overflow: hidden;
        .form_container{
          /* padding-top: 4em; */
          width: 40%;
          
        }
      }
    }

   
    
  }
  @media screen and (max-width: 1050px){
    .tour_itenary_container{
      .tour_itenary_details{
        .col_left{

          .gen_btn{
            width: var(--width_90);
            font-size: var(--size_1p0rem);
          }
    
          .itenary_btn{
            padding: 0.4em 0.5em;
            font-size: var(--size_1p8rem);
           
          
          }
        }
        
      }
    }

    .hero{
    
      .main_hero{

        .hero_left{

          .hero_left_content{
            padding-left: 15%;
            padding-right: 5%;
            /* position: relative; */
           

            .vidz_button{
              width: 300px;
              p{
                margin-bottom: 0;
              }
            }
          
          
          
  
            .slider_arrows{
              position: absolute;
              bottom: 5%;
              left: 20%;
              column-gap: 10px;
              opacity: 0;
              transition: all 0.35s ease;
              pointer-events: none;
      
              .arrow{
                flex: 1;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
               
                position: relative;
                transition: all 0.3s ease;
                .image_layer{
                  display: none;
                }
                img{
                  display: none;
                }
                svg{
                  width: 34px;
                  height: 34px;
                  path{
                    fill: var(--body_color)
                  }
                }
                &:hover{
                  background-color: var(--body_color);
                  svg{
                    path{
                      fill: var(--text_color)
                    }
                  }
                }
  
                &:first-child{
                  svg{
                    margin-right: 5px;
                  }
                }
                &:last-child{
                  svg{
                    margin-left: 5px;
                  }
                }
              }
            }
          }
          
        }
  
     
    
        .slider{
        
          padding: 2.5% 0.5%;
          column-gap: 2em;
          
          
          .slider_images{
            .slide{
            
              width: 70px;
              height: 40px;
             
              &:not(:last-child){
                margin-right: 0.8em;
              }
              
             
              &.current{
                width: 80px;
                height: 50px;
         
              }
            }
          }
    
        }
      }
     
    }
  
    .bridge{
      
      padding: 2em 10%;
   
    
      &::before {
     
      top: -8%;
    
      height: 30px;
    }
     
    }
  
    .section_head{
              
      margin-bottom: var(--size_1p4rem);
      .mixed {
       
        h2{
          color: var(--text_color);
        }
        .normal{
          font-size: var(--size_2p8rem);
        }
        .scripted{
          font-size: var(--size_3p2rem);
          
        }
      }
    }

  
   
  
    .two_cols{
      height: unset;
      grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
      gap: 6%;
      margin-bottom: 8em;
      .grid_col{
  
        &.col_left{
          height: 400px;
          
        }
    
        
      }
      
      &.re-order{
        .col_content{
          order: 2;
        }
        .col_left{
          order: 1;
        }
      }
    }

    .why_section{



    
      &.tour_detail_why{
      
        padding: 50px; 
        .reasons{
         flex-direction: column;
         gap: 30px;
          .reasons_left{
            width: 100%;
       
            .gen_btn{
              width: 40%;
            }
          }
          .reasons_right{
            width: 100%;
            .sliding_cards{
              width: 100%;
              .card_slider{
                width: 100%;
                gap: 20px;
                grid-template-columns: repeat(2, 1fr);
              }
            }
          }
  
        }
      }

      &.destination_why{
        
        padding: 50px;
        .reasons{
          display: block;
          width: 70%;
          margin-left: 30%;
        }
      }

     
     
      
    }

    .featured_hotels{
     
    
      &.hotels_at_destination{

          .hotels_preview{

            &.tours_cards{
              grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
              .tour_slide{
                &.card_on_tours{
   
                 
                  .tour_content{
                    h1{
                      font-size: var(--size_1p5rem);
                    }
              
                    .route{
                      margin-bottom: 0.3em;
                      &.route2{
                        margin-top: 0;
                        padding-top: 0;
                        display: flex;
                      }
                      
                    }
                    .price{
                     display: flex;
                      
                    }
                    
                  }
                }
              }
    
              
            }  
          } 
      }
      
    }

    .reviews{

      /* padding: 4em 10%; */

  
      .review_grid{
        gap: 4%;
        grid-template: 420px/repeat(2, minmax(300px, 1fr));
  
        .grid_col{
          .col_img{
            
            .col_content{
              
              .review_tit{
               
                /* padding: 4%; */
                .section_head{

                  .mixed {
                    
                    .normal{
                      text-transform: uppercase;
                      font-size: var(--size_2p8rem);
                    }
                    .scripted{
                      font-size: var(--size_3p2rem);
                    }
                  }
                 
                  
                }
                .gen_btn{
                  width: var(--width_60);
                  font-size: var(--size_1p1rem);
                  
                }
              }
            }
          }
    
          
          .review_slider{
            .review_card{
              .stars{
                /* margin-bottom: 0.6em; */
                img{
                  /* width: 140px; */
                  margin-bottom: 1em;
                }
              }
        
                h3{
                  font-size: var(--size_2p2rem);
                }
                
                h4{
                  font-size: var(--size_1p2rem);
                }
                h5{
                  font-size: var(--size_1p0rem);
                }
            }
          }
        
    
          .review_btns{
 
              .arrow{
               
                width: 36px;
                height: 36px;
                
               
                svg{
                  width: 17px;
                  height: 17px;
                 
                }
              
            }
          }
          
        }
      }
      .two_cols{
  
        .grid_col{
          position: relative;
          .col_img{
            .col_content{
              width: var(--width_100);
              height: var(--width_100);
              background-color: rgba(0, 31, 43, 0.4);
              position: relative;
              border-radius: 8px;
              .review_tit{
                width: var(--width_100);
                position: absolute;
                bottom: 2%;
                padding: 4%;
                .section_head{
                  width: var(--width_100);
                  margin-bottom: 1em;
                
                  .mixed {
                    flex-direction: column;
                    h2{
                      width: var(--width_100);
                      text-align: center;
                      color: var(--body_color);
                    }
                    .normal{
                      text-transform: uppercase;
                    }
                    .scripted{
                      font-size: var(--size_6p0rem);
                    }
                  }
                  p{
                    width: 100%;
                    text-align: left;
                    font-size: var(--size_1p2rem);
                    margin-bottom: 0;
                  }
                  
                }
                .gen_btn{
                  display: block;
                  width: var(--width_50);
                  margin: auto;
                  border-color: var(--body_color);
                  color: var(--body_color);
                  text-align: center;
                  &:hover{
                    background-color: var(--body_color);
                    color: var(--text_color);
                  }
                }
              }
            }
          }
    
          
          .review_slider{
            .review_card{
              .stars{
                width: var(--width_100);
                margin-bottom: 1em;
                img{
                  width: 150px;
                  object-fit: cover;
                  margin-bottom: 1em;
                }
              }
        
                h3{
                  width: var(--width_100);
                  text-align: justify;
                  font-weight: 400;
                  font-size: var(--size_2p8rem);
                  font-family: var(--heading_family);
                  margin-bottom: 1em;
                }
                h4, h5{
                  text-transform: uppercase;
                }
                h4{
                  font-weight: 600;
                  font-size: var(--size_1p2rem);
                }
                h5{
                  font-weight: 400;
                  font-size: var(--size_1p0rem);
                }
            }
          }
        
    
          .review_btns{
              position: absolute;
              right: 0;
              bottom: 2%;
              column-gap: 1em;
              
              .arrow{
               
                width: 40px;
                height: 40px;
                border-radius: 50%;
                border: 1px solid var(--text_color);
                position: relative;
                transition: all 0.3s ease;
                .image_layer{
                  display: none;
                }
                img{
                  display: none;
                }
                svg{
                  width: 20px;
                  height: 20px;
                  path{
                    fill: var(--text_color)
                  }
                }
                &:hover{
                  border: 1px solid var(--text_color);
                  background-color: var(--text_color);
                  svg{
                    path{
                      fill: var(--body_color)
                  }
                }
              }
            }
          }
          
        }
        
      }
    
     
    }


    .bookings{
      position: relative;
      .booking_header{
        /* padding: 1em var(--width_5); */
     
        .links{
          gap: 1em;
          .nav_item{
  
            .nav_link{
              background-color: transparent;
              color: var(--text_color);
              border: 0;
              font-size: var(--size_1p1rem);
              text-transform: uppercase;
              transition: all 0.35s ease;
              &:hover{
                color: var(--orange_color);
              }
            }
            &.current{
              .nav_link{
                color: var(--orange_color);
              }
            }
          }
        }
        .logo{
          pointer-events: none;
          img{
            width: 80px;
            object-fit: cover;
          }
        }
        .contacts{
        
          h2{
            color: var(--text_color);
            font-weight: 500;
            &:first-child{
              padding-right: 0.6em;
              margin-right: 0.6em;
              border-right: 2px solid var(--text_color);
            }
            span{
              font-weight: 400;
            }
          }
        }
        
       
      }
  
     
      .form_container{
        width: var(--width_70);
        /* margin: 1em auto; */
      
       /* min-height: 70vh; */
       
        .payment_form{
          width: var(--width_100);
          border-radius: 8px;
          padding: 2.5em;
          background-color: rgba(59, 77, 37, 0.1);
          margin-bottom: 1.5em;
    
          .progress_line{
            width: var(--width_100);
            margin-bottom: 1em;
            span{
              position: relative;
              flex: 1;
              border-radius: 2px;
              height: 4px;
              background-color: rgba(59, 77, 37, 0.2);
              &.current{
                background-color: var(--orange_color);
              }
              &:not(&:last-child),  &:not(&:first-child){
                border-right: 2px solid var(--body_color);
                border-left: 2px solid var(--body_color);
              }
              &:first-child{
                border-right: 4px solid var(--body_color);
              }
              &:last-child{
                border-left: 4px solid var(--body_color);
              }
            }
          }
          .book_steps{
            width: var(--width_100);
            flex-direction: row;
            flex-wrap: nowrap;
         
            /* overflow-x: hidden; */
            .step{
              width: var(--width_100);
              position: relative;
              /* min-width: var(--width_100); */
              h1{
                width: var(--width_100);
                text-align: left;
                font-size: var(--size_2p2rem);
                font-weight: 400;
                font-family: var(--heading_family);
              }
              p{
                margin-bottom: 1em;
                font-size: var(--size_1p0rem);
                font-weight: 300;
                span{
                  font-weight: 600;
                }
              }
              .tour_info{
                margin-bottom: 1em;
                &.book_start{
                  width: var(--width_100);
                  padding-bottom: 1em;
                  border-bottom: 1px solid rgba(59, 77, 37, 0.25);;
                  gap: 3em;
                  .link_btn{
                    flex: 1;
                  }
                }
                p{
                  margin-bottom: 0.3em;
                  span{
                    font-weight: 600;
                  }
                }
                .link_btn{
                  display: block;
                  outline: none;
                  border: 0;
                  cursor: pointer;
                  border-radius: 8px;
                  font-size: var(--size_1p2rem);
                  padding: 8px 1em;
                  background-color: var(--text_color);
                    color: var(--body_color);
                    border: 0.5px solid var(--text_color);
                  transition: all 0.25s ease;
                  margin-top: 1em;
                  width: 200px;
                  text-align: center;
                  font-weight: 400;
                  font-family: var(--heading_family);
                  
                  &:hover{
                    background-color: var(--body_color);
                    color: var(--text_color);
                    border: 0.5px solid rgba(0, 31, 43, 0.4);
                  }
                }
                &.flex_center{
                  padding-bottom: 1em;
                  border-bottom: 1px solid rgba(59, 77, 37, 0.25);;
                  p{
                    &:last-child{
                      margin-left: 2em;
                    }
                  }
                }
                
              }
  
              .final_notification{
                position: fixed;
                z-index: 5000;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                .notification{
                  width: 500px;
                  background-color: var(--body_color);
                  border-radius: 6px;
                  border: 0.6px solid var(--text_color);
                  padding: 1em;
                  img{
                    width: 30px;
                    
                    margin-right: 1em;
                  }
                  p{
                    text-align: left;
                    margin: 0;
  
                    &.success{
                      color: var(--success_color);
                    }
                    &.failure{
                      color: var(--fail_color);
                    }
                  }
                }
  
              }
              .terms{
                width: var(--width_100);
                display: flex;
                .custom_check_box{
                  margin-right: 0.8em;
                  width: 25px;
                  height: 25px;
                  margin-top: 0;
                  position: relative;
                  .check_mark{
                    width: var(--width_100);
                    height: var(--width_100);
                    cursor: pointer;
                    position: relative;
                    z-index: 1;
                    border-radius: 50%;
                    opacity: 0;
                  }
                  label{
                    position: absolute;
                    z-index: 5;
                    background-color: var(--body_color);
                    border: 0.5px solid rgba(59, 77, 37, 0.25);
                    width: var(--width_90);
                    height: var(--width_90);
                    border-radius: 4px;
                    cursor: pointer;
                    svg{
                      width: var(--width_70);
                    }
                    &.checked{
                      background-color: var(--text_color);
                      border: 0.5px solid var(--text_color);
                    }
                  }
                }
                .btn{
                  color: var(--text_color);
                  font-size: var(--size_1p0rem);
                  border: 0;
                  transition: all 0.25s ease;
                  &:hover{
                    text-decoration: underline;
                  }
                }
              }
    
              .payment_frame {
                width: var(--width_100);
                min-width: var(--width_100);
                height: 100%;
                min-height: 100%;
                position: relative;
                .pesapal {
                  display: block;
                  height: 100%;
                  min-height: 500px;
                  max-height: 100%;
                  width: 100%;
                  position: relative;
                  iframe {
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    width: 100%;
                    height: 100%;
                    min-width: 100%;
                    min-height: 100%;
                  }
                }
               
              }
            }
            
          }    
        }
        
        
      }

      &.management{
        .form_container{
          /* padding-top: 4em; */
          width: 50%;
          
        }
      }
      
      
    }
    
    
  }
  @media screen and (max-width: 980px){

   
    .tour_preview{
    
     
      .preview_right{
     
        
        .link_btns{
          gap: 1em;
          .gen_btn{
            font-size: var(--size_1p0rem);
            
          }
        }
      }
    }

    .main_nav{
      
  
  
    
      .nav_links{
      
       
    
       
    
        .nav_items{
  
          .nav_list{
  
            .nav_item{
              &.main_item{
               
                
                &:hover{
                  .nested_list{
                    opacity: 1;
                    pointer-events: initial;
                    left: -48%;
          
                  }
                }
              }
            }
          }
         
          
          .other_list{
           width: 60%;
           position: relative;
           margin-left:40%;
          .col{
            width: var(--width_half);
          }
    
           
          }
        }
        
      }
    
     
    }
  .page_section{
    width: var(--width_85);

    .two_columns{
      grid-template-columns: 1fr;
      .grid_col{
  
        .col_img{
          position: relative;
          height: 400px;
        }
        .section_head{
          margin-bottom: 0.9em;
        
          .mixed {
            justify-content: center;
            h2{
              display: block;
              width: var(--width_100);
              text-align: center;
            }
            .normal{
              display: block;
              width: var(--width_100);
              font-size: var(--size_3p0rem);
              text-align: center;

            }
            .scripted{
              font-size: var(--size_3p5rem);
              text-align: center;
            }
          }
          p{
            text-align: justify;
            font-size: var(--size_1p1rem);
          }
          
        }
        p{
  
          text-align: justify;
          font-size: var(--size_1p1rem);
          margin-bottom: 2.2em;
          margin-top: 0;
        
        }
      }
     
     
    }
    &.reviews{
      width: var(--width_100);
    }
  }
  .home_nav{
         
    .logo{
      column-gap: 1.4em;
      img{
        width: 60px;
      }
      h2{
     
        letter-spacing: 1.6px;
        font-size: var(--size_1p6rem);
      }
    }
    .home_left{
      column-gap: 2em;
      button{
        img{
          width: 34px;
          object-fit: cover;
        }
      }
      .call_btn{
        display: none;
       
      }
    }
  }
  .video_player{
  
 
    .video{
      width: 85vw;
      height: 70vh;
     
    }
    
  }
  
    .hero{
  
      .main_hero{
      
       
        .hero_left{
          width: var(--width_full);
        
          background: rgba(236, 236, 236, 0.15);
          backdrop-filter: blur(1px);
          /* box-shadow: 6px 0px 16px 20px rgba(236, 236, 236, 0.2); */
         
          .hero_left_content{
            width: 100%;
            padding-left: unset;
            padding-right: unset;
            padding: 0 5%;
            .title{
              width: 100%;
              font-weight: 500;
              text-align: center;
              text-transform: uppercase;
            }

            p.desc_para{
              width: var(--width_100);
              text-align: center;
            }

            
          
           
            .actions{
              width: 100%;
              justify-content: center;
              column-gap: 2em;
            }
            .button{
             
              &:last-child{
                padding: 0.3em 2em;
                
              }
             
            }
            .slider_arrows{
              position: absolute;
              bottom: 5%;
              left: 50%;
              opacity: 1;
              pointer-events: all;
             transform: translateX(-50%);
      
              
            }
          }
        }
    
        .slider{
          width: 100%;
          position: absolute;
          bottom: 1em;
          right: 0;
          padding: 2.5% 1%;
          column-gap: 2em;
          z-index: 15;
         
          .slider_images{
            display: none;
          }
    
        }
      }
      
    }
  
 
    .values{
   
    
      .values_slider{
       
        column-gap: 2%;
        .value{
          flex-basis: 23%;
          min-width: 23%;
          img{
            width: 50px;
          }
          
        }
      }
      
    }
  
  
    .tour_slide{
    
     
      .tour_content{
        
        .price{
        
          gap: 1em;
          p{
            
            flex: 1;
          }
          h2{
            flex: 2;
           
           
          }
        }
        .gen_btn{
       
          margin-left: var(--width_50);
          padding: 0.4em 1em;
          width: var(--width_50);
          font-size: var(--size_1p1rem); 
        }
      }
    }

    .tour_itenary_container{
      padding: 2em 10%;
      .tour_itenary_details{
        .it_btn_toggle{
          display: flex;
          width: 30px;
          height: 30px;

          img{
            width: 20px;
            height: 20px;
          }
        }
        .col_left{
          width: 60%;
          z-index: 10;
          position: absolute;
          top: 6em;
          left: 0;
          opacity: 0;
          pointer-events: none;
          background-color: var(--body_color);
          transition: all 0.35s ease;
          h2{
            width: var(--width_100);
            text-align: left;
            font-size: var(--size_1p4rem);
            text-transform: uppercase;
            font-weight: 400;
            color: var(--orange_color);
            font-family: var(--heading_family);
            margin-left: 1em;
            margin-top: 2em;
          }
    
          .gen_btn{
            display: block;
            position: relative;
            width: var(--width_90);
            text-align: center;
            background-color: var(--text_color);
            color: var(--body_color);
            font-size: var(--size_1p0rem);
            margin: 1em auto;
            &:hover{
              background-color: var(--body_color);
              color: var(--text_color);
            }
          }
    
          .itenary_btn{
            border: 0;
            padding: 0.4em 1em;
            color: var(--text_color);
            text-transform: uppercase;
            font-size: var(--size_1p8rem);

          }

          &.visible{
            opacity: 1;
            top: 1em;
            pointer-events: initial;
          }
        }
        .col_right{
          width: 100%;
          overflow-x: hidden;
          position: relative;
          z-index: 2;
          .cards_slider{
            flex-wrap: nowrap;
            width: calc(6*100%);
            min-height: var(--width_100);
          }
          .hotel_slider{
            flex-wrap: nowrap;
            width: calc(3*100%);
            min-height: var(--width_100);
            .safari_card{
              min-width: calc(100%/3) !important; 
            }
          }
          
          .safari_card{
            min-width: calc(100%/6);
            min-height: var(--width_100);
            padding: 1em;
            .card_content{

              h2{
                text-align: left;
                font-size: var(--size_2p4rem);
                margin-left: 45px;
              }
              p{
                width: 100%;
                text-align: justify;
                font-size: var(--size_1p0rem);
                margin-bottom: 1em;
                font-weight: 400;
              }
              &.highlights{
                h3{
                  text-transform: uppercase;
                  margin-bottom: 0.5em;
                  font-weight: 600;
                }
                p{
                  margin-bottom: 0.5em;
                  position: relative;
                  font-size: var(--size_1p0rem);
                  span{
                    width: 10px;
                    height: 10px;
                    display: inline-block;
                    background-color: var(--text_color);
                    position: relative;
                    margin-right: 10px;
                    border-radius: 50%;
                  }
                }
              }
  
              .it_day{
                width: var(--width_100);
                margin-bottom: 1em;
                .day_btn{
                  display: block;
                  width: var(--width_100);
                  color: var(--text_color);
                  font-family: var(--heading_family);
                  border: 1px solid var(--body_color);
                  border-bottom: 2px solid var(--text_color);
                  text-align: left;
                  position: relative;
                  font-size: var(--size_1p5rem);
                  padding: 0.3em 0.5em;
                  margin-bottom: 0.8em;
  
                  &.open, &:hover{
                    background-color: var(--text_color);
                    color: var(--body_color);
                    border: 1px solid var(--text_color);
                    span{
                    
                      svg{
                     
                        path{
                          fill: var(--body_color);
                        }
                      }
                      
                    }
                  }
  
                  span{
                    width: 30px;
                    height: 30px;
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    transition: all 0.35s ease;
                    svg{
                      width: 26px;
                      height: 26px;
                      path{
                        fill: var(--text_color);
                      }
                    }
                    &.rotate{
                      right: 5px;
                      transform: translateY(-50%) rotate(180deg);
                    }
                  }
                }
                .day_content{
                  width: var(--width_100);
                  transition: all 0.35s ease-in-out;
                  max-height: 0;
                  overflow-y: hidden;
                  will-change: max-height;
  
                  .day_image{
                    width: var(--width_100);
                    height: 320px;
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                    border-radius: 4px;
                    margin-bottom: 1em;
                  }
  
               
                 
                  .day_desc{
                    width: var(--width_100);
                    margin-bottom: 1em;
                    p{
                      margin-bottom: 0.5em;
                    }
                  }
                  .day_extras{
                    width: var(--width_100);
                    border-radius: 8px;
                    padding: 2em;
                    background-color: rgba(59, 77, 37, 0.1);
  
                    .day_extra{
                      width: var(--width_100);
                      margin-bottom: 1em;
                      h3{
                        width: var(--width_100) ;
                        color: var(--text_color);
                        font-weight: 600;
                        font-size: var(--size_1p2rem);
                        text-transform: uppercase;
                        margin-bottom: 0.5em;
  
                        img{
                          width: 24px;
                          margin-right: 1em;
                        }
                      }
                      h4{
                        text-align: left;
                        width: var(--width_100);
                        font-weight: 500;
                        font-size: var(--size_1p1rem);
                        margin-bottom: 0.3em;
                        display: flex;
                        align-items: center;
  
                        span{
                          display: block;
                          position: relative;
                          width: 8px;
                          height: 8px;
                          font-size: 2px;
                          border-radius: 50%;
                          background-color: var(--text_color);
                          margin-right: 3em;
                        }
                      }
                    }
                  }
                }
              }
            }
    
            .photo_gallery{
              min-width: 100%;
              &.card_gallery{
                h2{
                  font-family: var(--heading_family);
                  font-size: var(--size_2p4rem) !important;
                  margin-left: 45px !important;

                }
              }
              h2{

                margin-bottom: 0.5em;
             
                font-size: var(--size_2p4rem);
                margin-left: 45px;
              }
            }
            
          }
        }
      }
    }

    .why_section{
      &.destination_why{
        padding: 50px;
        .reasons{
          display: block;
          width: 70%;
          margin-left: 30%;
          .section_head{
            margin-bottom: 1.5em;
            .mixed{
              justify-content: flex-start;
              .normal{
                font-size: var(--size_3p2rem);
              }
              .scripted{
                font-size: var(--size_4p0rem);
              }
            }
          }
          .why_list{
          
            /* margin-bottom: 2em; */
            .why_item{
              h2{
                font-size: var(--size_1p1rem);
                span{
                  font-size: var(--size_1p0rem);
                }
              }
            }
          }
        }
      }
      
    }

    .main_image_slider{

      .image_slider{
      
        height: 450px;
        position: relative;
    
        .slider_btns{
          width: var(--width_100);
          position: absolute;
          z-index: 15;
          left: 50%;
          top: 50%;
          padding: 1em 2em;
          transform: translate(-50%, -50%);
          justify-content: space-between;
    
          .arrow{
           
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid var(--body_color);
           
            position: relative;
            transition: all 0.3s ease;
            .image_layer{
              display: none;
            }
            img{
              display: none;
            }
            svg{
              width: 20px;
              height: 20px;
              path{
                fill: var(--body_color);
              }
            }
            &:hover{
              border: 1px solid var(--body_color);
              background-color: var(--body_color);
              svg{
                path{
                  fill: var(--text_color)
                }
              }
            }
          }
        }
    
        .main_image{
          width: var(--width_100);
          height: var(--width_100);
          position: relative;
          border-radius: 8px;
          z-index: 10;
          cursor: pointer;
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          .layer{
            background-color: rgba(0, 31, 43, 0.1);
          }
          h2{
            width: var(--width_100);
            text-align: center;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
            padding: 0.4em;
            font-family: var(--heading_family);
            background: var(--text_color);
            font-weight: 400;
            text-transform: uppercase;
            font-size: var(--size_1p8rem);
  
            color: var(--body_color);
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
          }
        }
        
      }
      
    }
    
    
   
  }
  @media screen and (max-width: 950px){
    
    .why_section{



    
      &.tour_detail_why{

        .reasons{
         gap: 30px;
          .reasons_left{

       
            .gen_btn{
              width: 40%;
            }
          }
          .reasons_right{
            width: 100%;
            .sliding_cards{
              width: 100%;
              .card_slider{
                width: 100%;
                gap: 20px;
                grid-template-columns: repeat(2, 1fr);
              }
            }
          }
  
        }
      }
     
      
    }

    .section_head{
      .mixed {
        .normal{
          font-size: var(--size_3p8rem);
        }
        .scripted{
          font-size: var(--size_4p4rem);
          
        }
      }
     
      /* p{
        font-size: var(--size_1p0rem);
      } */
    }

    .reviews{

      /* padding: 4em 10%; */

  
      .review_grid{
       
        .grid_col{
          .col_img{
            
            .col_content{
              
              .review_tit{
               
              
                .gen_btn{
                  width: var(--width_80);
                  font-size: var(--size_1p1rem);
                  
                }
              }
            }
          }
    
          
          .review_slider{
            .review_card{
              .stars{
                /* margin-bottom: 0.6em; */
                img{
                  width: 120px; 
                  margin-bottom: 1em;
                }
              }
        
                h3{
                  font-size: var(--size_2p0rem);
                }
                
                h4{
                  font-size: var(--size_1p2rem);
                }
                h5{
                  font-size: var(--size_1p0rem);
                }
            }
          }
        
    
          .review_btns{
 
              .arrow{
               
                width: 36px;
                height: 36px;
                
               
                svg{
                  width: 17px;
                  height: 17px;
                 
                }
              
            }
          }
          
        }
      }
      .two_cols{
  
        .grid_col{
          position: relative;
          .col_img{
            .col_content{
              width: var(--width_100);
              height: var(--width_100);
              background-color: rgba(0, 31, 43, 0.4);
              position: relative;
              border-radius: 8px;
              .review_tit{
                width: var(--width_100);
                position: absolute;
                bottom: 2%;
                padding: 4%;
                .section_head{
                  width: var(--width_100);
                  margin-bottom: 1em;
                
                  .mixed {
                    flex-direction: column;
                    h2{
                      width: var(--width_100);
                      text-align: center;
                      color: var(--body_color);
                    }
                    .normal{
                      text-transform: uppercase;
                    }
                    .scripted{
                      font-size: var(--size_6p0rem);
                    }
                  }
                  p{
                    width: 100%;
                    text-align: left;
                    font-size: var(--size_1p2rem);
                    margin-bottom: 0;
                  }
                  
                }
                .gen_btn{
                  display: block;
                  width: var(--width_50);
                  margin: auto;
                  border-color: var(--body_color);
                  color: var(--body_color);
                  text-align: center;
                  &:hover{
                    background-color: var(--body_color);
                    color: var(--text_color);
                  }
                }
              }
            }
          }
    
          
          .review_slider{
            .review_card{
              .stars{
                width: var(--width_100);
                margin-bottom: 1em;
                img{
                  width: 150px;
                  object-fit: cover;
                  margin-bottom: 1em;
                }
              }
        
                h3{
                  width: var(--width_100);
                  text-align: justify;
                  font-weight: 400;
                  font-size: var(--size_2p8rem);
                  font-family: var(--heading_family);
                  margin-bottom: 1em;
                }
                h4, h5{
                  text-transform: uppercase;
                }
                h4{
                  font-weight: 600;
                  font-size: var(--size_1p2rem);
                }
                h5{
                  font-weight: 400;
                  font-size: var(--size_1p0rem);
                }
            }
          }
        
    
          .review_btns{
              position: absolute;
              right: 0;
              bottom: 2%;
              column-gap: 1em;
              
              .arrow{
               
                width: 40px;
                height: 40px;
                border-radius: 50%;
                border: 1px solid var(--text_color);
                position: relative;
                transition: all 0.3s ease;
                .image_layer{
                  display: none;
                }
                img{
                  display: none;
                }
                svg{
                  width: 20px;
                  height: 20px;
                  path{
                    fill: var(--text_color)
                  }
                }
                &:hover{
                  border: 1px solid var(--text_color);
                  background-color: var(--text_color);
                  svg{
                    path{
                      fill: var(--body_color)
                  }
                }
              }
            }
          }
          
        }
        
      }
    
     
    }

    .bookings{
      position: relative;
      .booking_header{
        .logo{
          flex: 1;
        }
        
        .menu_btn{
          margin-right: 20px;
          display: block;
          position: relative;
          z-index: 4500;

          
        }
        .log_btn{
          position: relative;
          z-index: 4500;
        }
       
        .links{
          position: fixed;
          top: 0;
          right: 10%;
          z-index: 4000;
          background-color: var(--body_color);
          height: 100vh;
          width: var(--width_50);
          display: initial;
          padding: 5%;
          padding-top: 20vh;
          opacity: 0;
          pointer-events: none;
          transition: all 0.35s ease;

          .nav_item{
            display: block;
            width: var(--width_100);
            margin-bottom: 10px;

  
            .nav_link{
              display: block;
            width: var(--width_100);
            font-weight: 500;
              font-size: var(--size_1p8rem);
              font-family: var(--heading_family);
              text-align: right;
             
            }
            &.current{
              .nav_link{
                color: var(--orange_color);
              }
            }
          }
          &.visible{
            opacity: 1;
            pointer-events: initial;
            right: 0;
          }
        }
        .logo{
          pointer-events: none;
          img{
            width: 80px;
            object-fit: cover;
          }
        }
        .contacts{
        
          h2{
            color: var(--text_color);
            font-weight: 500;
            &:first-child{
              padding-right: 0.6em;
              margin-right: 0.6em;
              border-right: 2px solid var(--text_color);
            }
            span{
              font-weight: 400;
            }
          }
        }
       
       
      }

      .management_title{
        width: var(--width_90);

  
        h1{
          font-size: var(--size_2p4rem);
    
        }
        h2{
          font-size: var(--size_1p2rem);
          
          
        }
        .left{
          p{
            font-size: var(--size_1p0rem);
          }
        }
       
      }

      .form_container{
      
       /* min-height: 70vh; */
       
       
        &.manage_form{
          width: var(--width_90);
        }
      }
  
     
     
      
     
    }
   
  }
  @media screen and (max-width: 920px){
    .main_nav{
      
  
  
    
      .nav_links{
      
       
    
       
    
        .nav_items{
  
          .nav_list{
  
            .nav_item{
              &.main_item{
               
                
                &:hover{
                  .nested_list{
                    opacity: 1;
                    pointer-events: initial;
                    left: -50%;
          
                  }
                }
              }
            }
          }
         
          
          
        }
        
      }
    
     
    }
    .destinatin_controller{
      display: none;
      
    }


    .featured_tours{
      /* padding: 3em 10%; */

      .feature_buttons{
        /* margin-bottom: 3em; */
        /* gap: 2em; */
        button{
          font-size: var(--size_1p2rem);
        }
    
      }
  
      .featured_container{

        .featured_col{

         
    
          .section_head{
    
            .mixed {
              /* flex-direction: column;
              h2{
                width: var(--width_100);
                display: block;
                text-align: left;
              } */
              .normal{
                font-size: var(--size_2p8rem);
              }
              .scripted{
                font-size: var(--size_3p2rem);
              }
            }
            
            
          }
          p{
            font-size: var(--size_1p0rem);
            /* margin-bottom: 2em; */
          }
         
       
  
         
          
        }
      }
  
    }
    
   
  }
  @media screen and (max-width: 880px){

    
   
    .why_section{
      &.destination_why{
        padding: 50px;
        .reasons{
          display: block;
          width: 80%;
          margin-left: 20%;
          .section_head{
            margin-bottom: 1.5em;
            .mixed{
              justify-content: flex-start;
              .normal{
                font-size: var(--size_3p2rem);
              }
              .scripted{
                font-size: var(--size_4p0rem);
              }
            }
          }
          .why_list{
          
            /* margin-bottom: 2em; */
            .why_item{
              h2{
                font-size: var(--size_1p1rem);
                span{
                  font-size: var(--size_1p0rem);
                  margin-left: 0.4em;
                }
              }
            }
          }
        }
      }
      
    }
   
  }
  @media screen and (max-width: 850px){

    .main_nav{
      width: var(--width_65);
  
  
    
      .nav_links{
      
       
    
       
    
        .nav_items{
  
          .nav_list{
  
            .nav_item{
              &.main_item{
               
                
                &:hover{
                  .nested_list{
                    opacity: 1;
                    pointer-events: initial;
                    left: -50%;
          
                  }
                }
              }
            }
          }
         
          
          
        }
        
      }
    
     
    }

    .section_head{
    
      .mixed {
        gap: 0.8em;
       
        .normal{
          font-size: var(--size_3p2rem);
        }
        .scripted{
          font-size: var(--size_3p2rem);
          
        }
        
      }
      &.feature_head{
        p{
          display: none;
        }
      }
      p{

        font-size: var(--size_1p2rem);
      }
      &.section_header{
        margin-bottom: var(--size_2p5rem);
      }
      &.tour_head_section{
        margin-top: 2em;
        margin-bottom: 2em;
      }
    }
   
  
   .tour_slide{
    
      .tour_content{
        
        .price{
        
          p{
            
            flex: 1;
          }
          h2{
            flex: 1;
         
          }
        }
        
      }
    } 
    
    .featured_hotels{
    
     
      .section_head{
        margin-bottom: 2em;
        .mixed{
          flex-direction: row;
          justify-content: flex-start;
          .normal{
            font-size: var(--size_3p0rem);
          }
          .scripted{
            font-size: var(--size_3p8rem);
          }
          h2{
            text-align: left;
          }
        }
      }
    
      .hotels_preview{
      flex-wrap: wrap;
    
      row-gap: 2em;
        .tour_slide{
          width: 100%;
          height: unset;
          position: relative;
    
          
    
          .tour_content{
            p.t_txt{
              margin-bottom: 2em;
            }
           
    
           
            .gen_btn{
              position: relative;
              margin-top: 2em;
              float: right;
              width: var(--width_40);
            
              
            }
          }
        }
      }
      
    }
  
   
  
    .footer{
     
      padding-top: 5em;
      
      .footer_columns{
        padding-bottom: 5em;
      }
      
    }

    .tour_styles{
      grid-template-columns:  repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }


     .section_head{
    
      /* .mixed {
       
        .normal{
          font-size: var(--size_3p2rem) !important;
        }
        .scripted{
          font-size: var(--size_4p8rem) !important;
        }
      } */
      
      p{
        width: 100%;
        font-size: var(--size_1p5rem);
      }
      
      /* &.tour_head_section{
        margin-top: 4em;
        margin-bottom: 4em;
      } */
    } 

    .reviews{

      /* padding: 4em 10%; */

  
      .review_grid{
        gap: 4%;
        grid-template: auto/repeat(auto-fit, minmax(300px, 1fr));
  
        .grid_col{
          &.col_left{
            height: 400px;
          }
          .col_img{
            
            .col_content{
              
              .review_tit{
               
                /* padding: 4%; */
                .section_head{

                  .mixed {
                    
                    .normal{
                      text-transform: uppercase;
                      font-size: var(--size_2p8rem);
                    }
                    .scripted{
                      font-size: var(--size_3p2rem);
                    }
                  }
                 
                  
                }
                .gen_btn{
                  width: var(--width_60);
                  font-size: var(--size_1p1rem);
                  
                }
              }
            }
          }
    
          
          .review_slider{
            .review_card{
              .stars{
                /* margin-bottom: 0.6em; */
                img{
                  /* width: 140px; */
                  margin-bottom: 1em;
                }
              }
        
                h3{
                  font-size: var(--size_2p2rem);
                }
                
                h4{
                  font-size: var(--size_1p2rem);
                }
                h5{
                  font-size: var(--size_1p0rem);
                }
            }
          }
        
    
          .review_btns{
 
              .arrow{
               
                width: 36px;
                height: 36px;
                
               
                svg{
                  width: 17px;
                  height: 17px;
                 
                }
              
            }
          }
          
        }
      }
      .two_cols{
  
        .grid_col{
          position: relative;
          .col_img{
            .col_content{
              width: var(--width_100);
              height: var(--width_100);
              background-color: rgba(0, 31, 43, 0.4);
              position: relative;
              border-radius: 8px;
              .review_tit{
                width: var(--width_100);
                position: absolute;
                bottom: 2%;
                padding: 4%;
                .section_head{
                  width: var(--width_100);
                  margin-bottom: 1em;
                
                  .mixed {
                    flex-direction: column;
                    h2{
                      width: var(--width_100);
                      text-align: center;
                      color: var(--body_color);
                    }
                    .normal{
                      text-transform: uppercase;
                    }
                    .scripted{
                      font-size: var(--size_6p0rem);
                    }
                  }
                  p{
                    width: 100%;
                    text-align: left;
                    font-size: var(--size_1p2rem);
                    margin-bottom: 0;
                  }
                  
                }
                .gen_btn{
                  display: block;
                  width: var(--width_50);
                  margin: auto;
                  border-color: var(--body_color);
                  color: var(--body_color);
                  text-align: center;
                  &:hover{
                    background-color: var(--body_color);
                    color: var(--text_color);
                  }
                }
              }
            }
          }
    
          
          .review_slider{
            .review_card{
              .stars{
                width: var(--width_100);
                margin-bottom: 1em;
                img{
                  width: 150px;
                  object-fit: cover;
                  margin-bottom: 1em;
                }
              }
        
                h3{
                  width: var(--width_100);
                  text-align: justify;
                  font-weight: 400;
                  font-size: var(--size_2p8rem);
                  font-family: var(--heading_family);
                  margin-bottom: 1em;
                }
                h4, h5{
                  text-transform: uppercase;
                }
                h4{
                  font-weight: 600;
                  font-size: var(--size_1p2rem);
                }
                h5{
                  font-weight: 400;
                  font-size: var(--size_1p0rem);
                }
            }
          }
        
    
          .review_btns{
              position: absolute;
              right: 0;
              bottom: 2%;
              column-gap: 1em;
              
              .arrow{
               
                width: 40px;
                height: 40px;
                border-radius: 50%;
                border: 1px solid var(--text_color);
                position: relative;
                transition: all 0.3s ease;
                .image_layer{
                  display: none;
                }
                img{
                  display: none;
                }
                svg{
                  width: 20px;
                  height: 20px;
                  path{
                    fill: var(--text_color)
                  }
                }
                &:hover{
                  border: 1px solid var(--text_color);
                  background-color: var(--text_color);
                  svg{
                    path{
                      fill: var(--body_color)
                  }
                }
              }
            }
          }
          
        }
        
      }
    
     
    }
   
  }
  @media screen and (max-width: 820px){
    .tour_preview{
      /* height: 600px; */
      .preview_col{
        /* width: 50%;
        height: 100%;
     */
        .container{
          width: 100%;
          height: 100%;
          overflow-x: hidden;
          position: relative;
         
        
         .arrow_btns{
         
            padding: 0 1em;
          
           
            .arrow{
             
              width: 32px;
              height: 32px;

             
            }
          }
    
          .vidz_button{
            left: 0;
          }
    
        }
    
      }
      .preview_right{
        padding: 2em;
        h4{
          font-size: var(--size_1p2rem);
        }
        h1{
          display: block;
          width: 100%;
          text-align: left;
          font-weight: 400;
          font-family: var(--heading_family);
          font-size: var(--size_2p2rem);
        }
        h3{
          font-size: var(--size_1p0rem);
          img{
            width: 20px;
          }
        }
        h2{
          display: block;
          width: 100%;
          margin-top: 1em;
          text-align: left;
          font-weight: 400;
          text-transform: uppercase;
          font-family: var(--heading_family);
          font-size: var(--size_1p6rem);
          margin-bottom: 2em;
        }
        .link_btns{
          gap: 1em;
          
          .gen_btn{
            width: 70%;
            font-size: var(--size_1p0rem);
           
            &.btn_bdnbgless{
              display: none;
            }
          }
        }
      }
    }

    .bridge{
      &.bridge_at_destination{
       
        h2{
          font-size: var(--size_2p2rem);
        }
      }
    }

    .featured_tours{
      /* padding: 3em 10%; */

      .feature_buttons{
        /* margin-bottom: 3em; */
        /* gap: 2em; */
        button{
          font-size: var(--size_1p1rem);
        }
    
      }
  
      .featured_container{
        width: var(--width_100);
        gap: 30px;
        flex-direction: column;
      
        .featured_col{

          &.featured_col_left{
          
            flex-basis: 100%;
            flex-grow: 1;
          }
    
          .section_head{
    
            .mixed {
              /* flex-direction: column;
              h2{
                width: var(--width_100);
                display: block;
                text-align: left;
              } */
              .normal{
                font-size: var(--size_3p4rem);
              }
              .scripted{
                font-size: var(--size_3p2rem);
              }
            }
            
            
          }
          p{
            font-size: var(--size_1p0rem);
            /* margin-bottom: 2em; */
          }
         
          .gen_btn{
            width: 60%;
            /* font-size: var(--size_1p0rem); */
          }
  
          &.featured_col_right{
            flex-basis: 100%;
            flex-grow: 1;
          
            .feature_slider{
             .featured_card{
          
  
              .tour_slider{
                gap: 4%;
                grid-template-columns: 48% 48%;
                .tour_slide{
                  flex: 1;
          
                }
              }
             }
            }
          }
    
         
          
        }
      }
  
    }

    .section_head{
      .mixed {
        .normal{
          font-size: var(--size_3p2rem) !important;
        }
        .scripted{
          font-size: var(--size_3p8rem) !important;
        }
      }
      /* p{
        font-size: var(--size_1p0rem);
      } */
    }

    .news_letter{
     
      h3{
     
        font-size: var(--size_2p2rem);
        
      }
    }

    .hidden_gallery{
    
      .image_layer{
        
        .close_btn{
         
          position: absolute;
          right: 20px;
          top: 20px;
          width: 26px;
          height: 26px;
         
         
        }
       
      }
      .big_image{
        
        width: var(--width_70);
        height: var(--width_60);
       
        .arrow_btns{
          
          .arrow{
           
            width: 36px;
            height: 36px;
           
           
            svg{
              width: 17px;
              height: 17px;
            
            }
           
          }
        }
        
      }
      &.visible{
        opacity: 1;
        pointer-events: initial;
      }
    }
  }
  @media screen and (max-width: 800px){
    .why_section{



    
      &.tour_detail_why{
        .reasons{
         gap: 30px;
          .reasons_left{

       
            .gen_btn{
              width: 40%;
            }
          }
          .reasons_right{
            width: 100%;
            .sliding_cards{
              width: 100%;
              .card_slider{
                width: 100%;
                gap: 20px;
                grid-template-columns: repeat(2, 1fr);
              }
            }
          }
  
        }
      }
     
      
    }
   
  }
  @media screen and (max-width: 786px){
  
    .main_nav{
      width: var(--width_100);
  
  
    
      .nav_links{
      
       
    
       
    
        .nav_items{
  
          .nav_list{
  
            .nav_item{
              &.main_item{
               
                
                &:hover{
                  .nested_list{
                    opacity: 1;
                    pointer-events: initial;
                    left: -38%;
          
                  }
                }
              }
            }
          }
          .other_list{
            width: 70%;
            margin-left: 30%;
    
           }
         
          
          
        }
        
      }
    
     
    }
  
    .bridge{
      
      padding: 2em 10%;
   
    
      &::before {
     
      top: -8%;
    
      height: 40px;
    }
      h2{
       
        font-size: var(--size_2p0rem);
      }
    }
  
    .values{
   
    
      .values_slider{
       
        column-gap: 2%;
        .value{
          flex-basis: 32%;
          min-width: 32%;
          
          
        }
      }
      
    }
  
    .news_letter{
   
      h3{
        width: var(--width_65);
        font-size: var(--size_2p0rem);
      }
    }
  
    .dest_nations{
      
      .section_head{
       
        .mixed {
        /* gap: unset; */
          /* h2{
            display: block;
            text-align: left;
          } */
          .normal{
            font-size: var(--size_2p8rem);
            text-align: left;
          }
          .scripted{
            font-size: var(--size_3p2rem);
            text-align: left;
          }
        }
        p{
          width: 100%;
          text-align: center;
          font-size: var(--size_1p2rem);
        }
        &.section_header{
          margin-bottom: var(--size_2p5rem);
        }
      }
      .destinations_container{
       
        .arrow_btns{
          width: var(--width_75);
          left: 50%;
          top: 10%;
          transform: translateX( -50%);
          
          
        }
    
        .destinations_slider{
          width: var(--width_100);
       
          
    
          .destination{
        
          
            
            .destination_preview{
             gap: 10%;
             
              flex-direction: column;
              h2{
                
                font-size: var(--size_3p2rem);
     
              }
              p{
                color: var(--body_color);
                text-align: justify;
                font-size: var(--size_1p0rem);
              }
              .gen_btn{
                display: block;
                width: var(--width_30);
                margin-top: 2em;
                text-align: center;
  
              }
            }
    
          }
        }
      }
    }
  
   
    
  }
  @media screen and (max-width: 760px){

    .why_section{



    
      &.tour_detail_why{
        .reasons{
          gap: 30px;
          .reasons_left{

       
            .gen_btn{
              width: 40%;
            }
          }
          .reasons_right{

            .sliding_cards{
            
              .card_slider{
            
                grid-template-columns: repeat(2, 1fr);
              }
            }
          }
  
        }
      }
     
      
    }

    .bookings{
    
      .booking_header{
        /* padding: 1em var(--width_5); */
     
        
        .logo{
          img{
            width: 50px;
          }
        }
        .contacts{
        
          h2{
            
            font-size: var(--size_1p0rem);
          }
        }
        .log_btn{
          
          font-size: var(--size_1p0rem);
          padding: 5px 1em;
         
        }
       
      }
  
    
      .form_container{
        width: var(--width_90);
        /* margin: 1em auto; */
      
       /* min-height: 70vh; */
       
        .payment_form{
          width: var(--width_100);
          border-radius: 8px;
          padding: 2.5em;
          background-color: rgba(59, 77, 37, 0.1);
          margin-bottom: 1.5em;
    
          .progress_line{
            width: var(--width_100);
            margin-bottom: 1em;
            span{
              position: relative;
              flex: 1;
              border-radius: 2px;
              height: 4px;
              background-color: rgba(59, 77, 37, 0.2);
              &.current{
                background-color: var(--orange_color);
              }
              &:not(&:last-child),  &:not(&:first-child){
                border-right: 2px solid var(--body_color);
                border-left: 2px solid var(--body_color);
              }
              &:first-child{
                border-right: 4px solid var(--body_color);
              }
              &:last-child{
                border-left: 4px solid var(--body_color);
              }
            }
          }
          .book_steps{
            width: var(--width_100);
            flex-direction: row;
            flex-wrap: nowrap;
         
            /* overflow-x: hidden; */
            .step{
              width: var(--width_100);
              position: relative;
              /* min-width: var(--width_100); */
              h1{
                width: var(--width_100);
                text-align: left;
                font-size: var(--size_2p2rem);
                font-weight: 400;
                font-family: var(--heading_family);
              }
              p{
                margin-bottom: 1em;
                font-size: var(--size_1p0rem);
                font-weight: 300;
                span{
                  font-weight: 600;
                }
              }
              .tour_info{
                margin-bottom: 1em;
                &.book_start{
                  width: var(--width_100);
                  padding-bottom: 1em;
                  border-bottom: 1px solid rgba(59, 77, 37, 0.25);;
                  gap: 3em;
                  .link_btn{
                    flex: 1;
                  }
                }
                p{
                  margin-bottom: 0.3em;
                  span{
                    font-weight: 600;
                  }
                }
                .link_btn{
                  display: block;
                  outline: none;
                  border: 0;
                  cursor: pointer;
                  border-radius: 8px;
                  font-size: var(--size_1p2rem);
                  padding: 8px 1em;
                  background-color: var(--text_color);
                    color: var(--body_color);
                    border: 0.5px solid var(--text_color);
                  transition: all 0.25s ease;
                  margin-top: 1em;
                  width: 200px;
                  text-align: center;
                  font-weight: 400;
                  font-family: var(--heading_family);
                  
                  &:hover{
                    background-color: var(--body_color);
                    color: var(--text_color);
                    border: 0.5px solid rgba(0, 31, 43, 0.4);
                  }
                }
                &.flex_center{
                  padding-bottom: 1em;
                  border-bottom: 1px solid rgba(59, 77, 37, 0.25);;
                  p{
                    &:last-child{
                      margin-left: 2em;
                    }
                  }
                }
                
              }
  
              .final_notification{
                position: fixed;
                z-index: 5000;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                .notification{
                  width: 500px;
                  background-color: var(--body_color);
                  border-radius: 6px;
                  border: 0.6px solid var(--text_color);
                  padding: 1em;
                  img{
                    width: 30px;
                    
                    margin-right: 1em;
                  }
                  p{
                    text-align: left;
                    margin: 0;
  
                    &.success{
                      color: var(--success_color);
                    }
                    &.failure{
                      color: var(--fail_color);
                    }
                  }
                }
  
              }
              .terms{
                width: var(--width_100);
                display: flex;
                .custom_check_box{
                  margin-right: 0.8em;
                  width: 25px;
                  height: 25px;
                  margin-top: 0;
                  position: relative;
                  .check_mark{
                    width: var(--width_100);
                    height: var(--width_100);
                    cursor: pointer;
                    position: relative;
                    z-index: 1;
                    border-radius: 50%;
                    opacity: 0;
                  }
                  label{
                    position: absolute;
                    z-index: 5;
                    background-color: var(--body_color);
                    border: 0.5px solid rgba(59, 77, 37, 0.25);
                    width: var(--width_90);
                    height: var(--width_90);
                    border-radius: 4px;
                    cursor: pointer;
                    svg{
                      width: var(--width_70);
                    }
                    &.checked{
                      background-color: var(--text_color);
                      border: 0.5px solid var(--text_color);
                    }
                  }
                }
                .btn{
                  color: var(--text_color);
                  font-size: var(--size_1p0rem);
                  border: 0;
                  transition: all 0.25s ease;
                  &:hover{
                    text-decoration: underline;
                  }
                }
              }
    
              .payment_frame {
                width: var(--width_100);
                min-width: var(--width_100);
                height: 100%;
                min-height: 100%;
                position: relative;
                .pesapal {
                  display: block;
                  height: 100%;
                  min-height: 500px;
                  max-height: 100%;
                  width: 100%;
                  position: relative;
                  iframe {
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    width: 100%;
                    height: 100%;
                    min-width: 100%;
                    min-height: 100%;
                  }
                }
               
              }
            }
            
          }    
        }
        .progress_buttons{
          .progress_btn{
            
            border-radius: 6px;
            font-size: var(--size_1p0rem);
            padding: 6px;
          }
          .counted{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0%;
            font-weight: 400;
            font-size: var(--size_1p2rem);
            opacity: 0;
            pointer-events: none;
            transition: all 0.25s ease;
            span{
              font-weight: 600;
            }
            &.visible{
              opacity: 1;
              pointer-events: initial;
            }
          }
         
        }
       
      }
      .footer_bottom{
        padding: 1.5em 5%;
        width: var(--width_100);
 
        column-gap: 2%;

       
        .f_col{
          
          h4{
            
            font-weight: 600;
            text-transform: uppercase;
            color: var(--text_color);
            font-size: var(--size_1p0rem);
            margin-right: 1em;
          }
          img,svg{
            width: 38px;
          }
          .agencies, .payments{
            gap: 1em;
          }
        
          
        }
        
      }
      
    }

    .close_btn{
      /* right: 50px;
      top: 30px; */
      width: 24px;
      height: 24px;
    }

    .upload_manager{
      width: var(--width_75) !important;
      
    
      &.manage_booking{
        width: var(--width_70) !important;
        padding-top: 2em;
  
      
      .progress_btn{
        display: block;
        width: 80%;
        padding: 6px;
        font-size: var(--size_1p0rem);
      }
  
      }
      .close_btn{
        right: 10px !important;
        top: 10px !important;
        cursor: pointer;
        
      }
     
  
      .uploads{
        width: var(--width_100);
        h3{
          width: var(--width_100);
          text-transform: uppercase;
          font-family: var(--heading_family);
          margin-bottom: 0.3em;
          font-size: var(--size_1p5rem);
        }
        p{
          margin-bottom: 0.6em;
          width: var(--width_100);
          padding-bottom: 0.6em;
          border-bottom: 1px solid rgba(32, 39, 47, 0.65);
        }
      }
      &.visible{
        
        top: 15%;
      }
    }
    
    
  }
  @media screen and (max-width: 750px){

    .why_section{

      padding: 25px;


    
      &.tour_detail_why{
        padding: 25px;
        .reasons{
          gap: 30px;
          .reasons_left{

       
            .gen_btn{
              width: 40%;
            }
          }
          .reasons_right{

            .sliding_cards{
            
              .card_slider{
            
                grid-template-columns: repeat(2, 1fr);
              }
            }
          }
  
        }
      }

        &.destination_why{
          padding: 50px;
          .reasons{
            display: block;
            width: 85%;
            margin-left: 15%;
            .section_head{
              margin-bottom: 1.5em;
              .mixed{
                flex-direction: row !important;
                justify-content: flex-start;
                .normal{
                  font-size: var(--size_2p8rem);
                }
                .scripted{
                  font-size: var(--size_3p6rem);
                }
              }
            }
            .why_list{
            
              /* margin-bottom: 2em; */
              .why_item{
                h2{
                  font-size: var(--size_1p1rem);
                  span{
                    font-size: var(--size_1p0rem);
                    margin-left: 0.4em;
                  }
                }
              }
            }
          }
        }
        

      
    }

    .main_image_slider{

      .image_slider{
      
        height: 380px;
        position: relative;
    
        .slider_btns{
        
          padding: 1em 2em;

          .arrow{
           
            width: 36px;
            height: 36px;
            
            svg{
              width: 18px;
              height: 18px;
              
            }
            
          }
        }
    
        .main_image{
         
          h2{
          
            font-size: var(--size_1p6rem);
          }
        }
        
      }
      
    }

    .destinations{
    
      .one_destination{
     
        .destination_info{
          /* width: var(--width_80); */
          /* margin: 3em auto;
          margin-bottom: 6em; */
          .detail{
        
            h1{
              
              font-size: var(--size_2p0rem);
            }
            h2{
              font-size: var(--size_1p2rem);
            }
            p{
              font-size: var(--size_1p0rem);
            }
          }
        }
    
 
        
      }
    }

    .bookings{
      
      
      .form_container{
        
        .payment_form{
          
          
          .book_steps{
           
            
            .main_form{
       
              .input_line{
                
                .input_group{
                  .input_label{
                   
                    font-size: var(--size_0p9rem);

                  }
                  
                }
                
              }
            }
          }    
        }
        .progress_buttons{
          width: var(--width_100);
          .progress_btn{
            outline: none;
            border: 0;
            cursor: pointer;
            border-radius: 8px;
            font-size: var(--size_1p0rem);
            padding: 8px 1em;
            transition: all 0.25s ease;
            &.back_btn{
              background-color: rgba(59, 77, 37, 0.1);
              color: var(--text_color);
              border: 0.5px solid rgba(59, 77, 37, 0.1);
            }
            &.invisible{
              opacity: 0;
              pointer-events: none;
            }
            &.next_btn{
              background-color: var(--text_color);
              color: var(--body_color);
              border: 0.5px solid var(--text_color);
            }
            &:hover{
              background-color: var(--body_color);
              color: var(--text_color);
              border: 0.5px solid rgba(0, 31, 43, 0.4);
            }
          }
          .counted{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0%;
            font-weight: 400;
            font-size: var(--size_1p2rem);
            opacity: 0;
            pointer-events: none;
            transition: all 0.25s ease;
            span{
              font-weight: 600;
            }
            &.visible{
              opacity: 1;
              pointer-events: initial;
            }
          }
         
        }
        
      }

      &.management{
        .form_container{
          /* padding-top: 4em; */
          width: 60%;
          
        }
      }
      
     
    }

    .captcha{
    
   
      .captcha_img{
      
      
       .captcha_code{
       
       font-size: var(--size_1p4rem) !important;
       
       }
      }
      
     }
    
    
  }
  @media screen and (max-width: 720px){

    .bridge{
     
      h2{
        font-size: var(--size_2p0rem);
        text-align: justify;
      }
      &.no_back{
        
        h2{
          text-align: justify;
          margin-bottom: 1.4em;
        }
        .btns{
          column-gap: 2em;
          .gen_btn{
            font-size: var(--size_1p1rem);
          }
        }
      }
    }
  
    .footer{
     
      padding-top: 5em;
      
      .footer_columns{
        .policy_links{
          width: 100%;
          justify-content: center;
          right: 50%;
          transform: translateX(50%);
          .normal_link{
            font-size: var(--size_1p0rem);
          }
        }
      }
      
    }

    .page_section{
      width: var(--width_90);
      margin-bottom: 3em;
  
      .two_columns{
        grid-template-columns: 1fr;
        grid-gap: 1.5%;
        .grid_col{
    
          .col_img{
            position: relative;
            height: 300px;
          }
          .section_head{
            margin-bottom: 0.9em;
          
            .mixed {
              justify-content: center;
              .normal{
                display: block;
                font-size: var(--size_2p6rem);
                width: var(--width_100);
               text-align: center;
              }
              .scripted{
                display: block;
                font-size: var(--size_3p2rem);
                width: var(--width_100);
                text-align: center;
              }
            }
            p{
              text-align: justify;
              font-size: var(--size_1p1rem);
            }
            
          }
          p{
            margin-bottom: 1.5rem;
            font-size: var(--size_1p1rem);

          
          }

          .gen_btn{
            display: block;
            width: var(--width_100);
          }
        }
       
       
      }
    }

    .why_section{



    
      &.tour_detail_why{
        .reasons{
          gap: 30px;
          .reasons_left{

       
            .gen_btn{
              width: 40%;
            }
          }
          .reasons_right{

            .sliding_cards{
            
              .card_slider{
            
                grid-template-columns: repeat(2, 1fr);
              }
            }
          }
  
        }
      }
     
      
    }

    .section_head{
    
      .mixed {
        gap: 0.8em;
        flex-direction: row;

        .normal{
          font-size: var(--size_2p8rem) !important;
        }
        .scripted{
          font-size: var(--size_3p2rem) !important;
        }
       
        
        
      }
      &.feature_head{
        p{
          display: none;
        }
      }
      p{
        font-size: var(--size_1p2rem);
      }
      &.section_header{
        margin-bottom: var(--size_2p5rem);
      }
      &.tour_head_section{
        margin-top: 2em;
        margin-bottom: 2em;

        .mixed {
          flex-direction: column;
          gap: 0.25em;
          .normal{
            font-size: var(--size_3p2rem) !important;
          }
          .scripted{
            font-size: var(--size_4p8rem) !important;
            
          }
          
        }

        /* p{
          font-size: var(--size_1p2rem);
        } */
      }
      
    }

    .filter_row{
      padding: 1.5em var(--width_10);
    
      .filterr{
        column-gap: 2em;
        h2{
          font-size: var(--size_1p2rem);
          width: 50%;
        }
        .custom_select{
          width: 50%;
          .selected{
            width: 100%;
            input{
              width: 100%;
            }
          }
          .select_options{
            width: 100%;
          
          }
        }
        
      }
    }

    .tour_preview{
      height: auto;
      flex-direction: column;
   
      .preview_col{
        width: 100%;
       .container{
        
          width: 100%;
          height: 400px;
        }
    
      }
      .preview_right{
        padding: 2em;
        h4{
          font-size: var(--size_1p2rem);
        }
        
        .link_btns{
          gap: 1em;
          
          .gen_btn{
            width: 40%;
            font-size: var(--size_1p0rem);
          }
        }
      }
    }

    .destinations{
    
      .one_destination{
     
        .destination_hero{
     
        
         
          
       
  
          &.whole_hero{
    
            .hero_area{
             width: var(--width_95);
              .hero_left{
                width:100%;
                margin-bottom: 0.6em;
                h1, h2{
                  text-align: center;
                  
                }
                h1{
    
                  font-size: var(--size_3p2rem);
                }
                h2{
                  font-size: var(--size_3p8rem);
                }
  
                .gen_btn{
                  display: block;
                  margin: auto;
                  margin-top: 3em;
                }
                
              }
              .hero_right{
                width: var(--width_100);
                margin: auto;
                justify-content: space-between;
                margin-top: 1em;
              
                
              }
            }
    
          }
        }

       
    
 
        
      }
    }


    .featured_tours{
      padding: 3em 5%; 

      .feature_buttons{
        margin-bottom: 1em;
        /* gap: 2em; */
        button{
          font-size: var(--size_1p0rem);
        }
    
      }
  
      .featured_container{
        gap: 30px;

        .featured_col{

       
          .section_head{
    
            .mixed {
              /* flex-direction: column;
              h2{
                width: var(--width_100);
                display: block;
                text-align: left;
              } */
              .normal{
                font-size: var(--size_3p0rem);
              }
              .scripted{
                font-size: var(--size_4p4rem);
              }
            }
            
            
          }
         
         
          .gen_btn{
            width: 60%;
            /* font-size: var(--size_1p0rem); */
          }
  
          &.featured_col_right{

          
            .feature_slider{
             .featured_card{
          
  
              .tour_slider{
                gap: 20px;
                grid-template-columns: 100% 100%;
  
              }
             }
            }
          }
    
         
          
        }
      }
  
    }

    .hidden_gallery{
    
      .big_image{
        
        width: var(--width_85);
        height: var(--width_50);
       
       
        
      }
      
    }

    .upload_manager{
      width: var(--width_90) !important;

      &.manage_booking{
        width: var(--width_90) !important;
  
      
      .progress_btn{
        width: 90%;
      }
  
      }
    
     
  
      .uploads{
        width: var(--width_100);
        h3{
          width: var(--width_100);
          text-transform: uppercase;
          font-family: var(--heading_family);
          margin-bottom: 0.3em;
          font-size: var(--size_1p5rem);
        }
        p{
          margin-bottom: 0.6em;
          width: var(--width_100);
          padding-bottom: 0.6em;
          border-bottom: 1px solid rgba(32, 39, 47, 0.65);
        }
      }
      &.visible{
        
        top: 15%;
      }
    }

    .bookings{
     

      .management_title{

        h1{
          font-size: var(--size_2p0rem);
    
        }
        h2{
          font-size: var(--size_1p0rem);
 
        }
        .left{
          p{
            font-size: var(--size_1p0rem);
          }
        }
       
      }

 
     
    }
   
  
    
    
  }
  @media screen and (max-width: 650px){

    
   
    .featured_hotels{
    
     padding: 2em 5%;
     padding-bottom: 5em;


      
    .hotels_preview{
      width: var(--width_100);
      margin-bottom: 2em;
      
    }

    &.hotels_at_destination{
    
      .arrow_btns{
          position: absolute;
          left: 5%;
          bottom: 2em;
         
        }
  
        .hotels_preview{
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 20px;

          .tour_slide{
            width: 100%;
            .tour_img{
              height: 200px;
           
            }
            .tour_content{
              position: relative;
              flex: 1;
              p.t_txt{
                flex: 1;
                font-size: var(--size_1p0rem);
              }
              .gen_btn{
                margin-left: calc(40% + 1.2em) !important;
                width: 60% !important;
              }
            }
            
          }
  
          &.tours_cards{
            
            gap: 2em;
            flex-wrap: wrap;
            .tour_slide{
              &.card_on_tours{
 
                .tour_img{
                  height: 200px;
                }
                .tour_content{
                  h1{
                    font-size: var(--size_1p5rem);
                  }
            
                  .route{
                    margin-bottom: 0.3em;
                    &.route2{
                      margin-top: 0;
                      padding-top: 0;
                      display: flex;
                    }
                    
                  }
                  .price{
                   display: flex;
                    
                  }
                  
                }
              }
            }
  
            
          }
          
          .tour_slide{

            .tour_content{
   
              .route{
                margin-bottom: 1.5em;
                
              }
              
             
            }
          }
        }
      
    }

     
    }
  
    .video_player{
  
 
      .video{
        width: 90vw;
        height: 60vh;
       
      }
      
    }
    

    .hero{
  
      .main_hero{
      
        
        .hero_left{
       
          /* box-shadow: 6px 0px 16px 20px rgba(236, 236, 236, 0.2); */
         
          .hero_left_content{
           
            
            .actions{
              column-gap: unset;
              row-gap: 2em;
              flex-direction: column;

              .btn{
                display: block;
                width: var(--width_90);
                font-size: var(--size_1p0rem);
              }

              .vidz_button{
                width: initial;
                align-items: center;
                justify-content: center;
              }
            }
            /* .button{
             
              &:last-child{
                padding: 0.3em 2em;
                
              }
             
            } */
          }
        }
    
       
      }
      
    }
  
    
    .news_letter{
      padding: 1em 5%;
      flex-direction: column;
      h3{
        width: var(--width_100);
        display: block;
        text-align: justify;
        font-size: var(--size_1p6rem);
        margin-bottom: 1em;
      
  
      }
      .gen_btn{
        display: block;
        text-align: center;
        font-size: var(--size_1p0rem);
  
        width: var(--width_100);
      }
    }
  
    .dest_nations{
      
      /* .section_head{
       
        .mixed {
          flex-direction: column;
          
          h2{
            display: block;
            width: var(--width_100);
            text-align: left;
          }
          .normal{
            font-size: var(--size_3p6rem);
          }
          .scripted{
            font-family: var(--script_family);
            font-size: var(--size_5p2rem);
            
          }
        }
        p{
          width: 100%;
          text-align: center;
          font-size: var(--size_1p2rem);
        }
       
      } */
      .destinations_container{
       height: 500px;
       
    
        .destinations_slider{
          width: var(--width_100);
       
          
    
          .destination{
        
          
            
            .destination_preview{
  
              
              .gen_btn{
                display: block;
                width: var(--width_40);
               
   
              }
            }
    
          }
        }
      }
    }
    .footer{
     
      padding-top: 5em;
      
      .footer_columns{
        row-gap: 3em;
        
        flex-direction: column;
        .footer_column{
          width: 100%;
         
          .logo{
         
            img{
              width: 100px;
            }
          }
          h2{
          
            font-size: var(--size_1p0rem);
            span{
              
              color: var(--body_color);
              font-weight: 300;
              
            }
          }
          .gen_btn{
            display: block;
            width: var(--width_60);
            font-size: var(--size_1p0rem);
           margin: 1em auto;
          }
          
    
          .big_link, .normal_link{
            display: block;
     
            text-align: center;
            color: var(--body_color);
            
            font-size: var(--size_1p0rem);
            
            
          }
          .big_link{
            font-size: var(--size_2p4rem);
         
          }
          
        }
      }
      .footer_bottom{
     flex-direction: column;
     gap: 20px;
        .f_col{
   
     
          h4{
        display: block;
        text-align: center;
            font-size: var(--size_1p0rem);
            font-weight: 400;
        
          }
          .agencies, .payments{
            gap: 1em;
            justify-content: center;
          }
        }
        
      }
      .copy{
  font-weight: 300;
        font-size: var(--size_1p0rem);
      }
    }
    .section_head{
    
      .mixed {

        .normal{
          font-size: var(--size_2p8rem) !important;
        }
        .scripted{
          font-size: var(--size_3p4rem) !important;
        }
        
      }
      
      p{

        font-size: var(--size_1p0rem);
      }
      
      &.tour_head_section{
        margin-top: 1em;
        margin-bottom: 1em;
      }
    }

    .page_section{

     
      
      .tour_styles{
      
        .tour_card{
  
       
          
          
         
          .gen_btn{
            margin-top: 1em;
          }
         
          
        }
      }

      .two_columns{
        grid-template-columns: 1fr;
        grid-gap: 1.5%;
        .grid_col{
    
          .col_img{
            position: relative;
            height: 300px;
          }
          .section_head{
            margin-bottom: 0.9em;
          
            .mixed {
              justify-content: center;
              .normal{
                display: block;
                font-size: var(--size_2p6rem);
                width: var(--width_100);
               text-align: center;
              }
              .scripted{
                display: block;
                font-size: var(--size_3p2rem);
                width: var(--width_100);
                text-align: center;
              }
            }
            p{
              text-align: justify;
              font-size: var(--size_1p0rem);
            }
            
          }
          p{
            margin-bottom: 1.5rem;
            font-size: var(--size_1p0rem);

          
          }

         
        }
       
       
      }
    }
    .why_section{



    
      &.tour_detail_why{
        padding: 15px;
        .reasons{
          gap: 30px;
          .reasons_left{

       
            .gen_btn{
              width: 40%;
            }
          }
          .reasons_right{

            .sliding_cards{
            
              .card_slider{
                overflow-x: scroll;
            
                grid-template-columns: repeat(2, 100%);
              }
            }
          }
  
        }
      }

      .section_head{
    
        .mixed {
  
          .normal{
            font-size: var(--size_2p8rem) !important;
          }
          .scripted{
            font-size: var(--size_3p4rem) !important;
          }
          
        }

      }
     
      
    }

    .destinations{
    
      .one_destination{
     
        .destination_hero{

          &.detail_hero{
  
            .hero_area{
              width: var(--width_100);
              /* margin: 2em auto;
              padding-bottom: 4em; */
              
             
              .hero_left{
                
                h1{
                  width: 85%;
                  margin: auto;
                  font-size: var(--size_2p8rem);
                  text-align: center;
                }
                h2{
                  margin: auto;
                  width: 85%;
                  text-align: center;
                  font-size: var(--size_3p4rem);
                }
               
              }
             
            }
    
          }
     
        
         
          
       
  
          &.whole_hero{
    
            .hero_area{
             width: var(--width_95);
              .hero_left{
                width:100%;
                margin-bottom: 0.6em;
                h1, h2{
                  text-align: center;
                  
                }
                h1{
    
                  font-size: var(--size_3p0rem);
                }
                h2{
                  font-size: var(--size_3p6rem);
                }
  
                .gen_btn{
                  display: block;
                  margin: auto;
                  width: var(--width_90);
                  margin-top: 2em;
                }
                
              }
              .hero_right{
                width: var(--width_60);
                margin: auto;
                flex-direction: column;
                align-items: start;
                
              }
            }
    
          }
        }

        .destination_info{
          width: var(--width_90);
          /* margin: 3em auto;
          margin-bottom: 6em; */
          .detail{
        
            h1{
              
              font-size: var(--size_1p6rem);
            }
            h2{
              font-size: var(--size_1p0rem);
            }
            p{
              font-size: var(--size_1p0rem);
            }
          }
        }
    
 
        
      }
    }
    .destination_highlights{

      /* margin: 3em auto;*/
     padding: 0 5%; 
     
      
    }
   

    .tour_itenary_container{
      padding: 2em 5%;
      .tour_itenary_details{
        .it_btn_toggle{
          width: 30px;
          height: 30px;
          left: 0;
          top: 0.5em;

          img{
            width: 20px;
            height: 20px;
          }
        }
        .col_left{
          z-index: 10;
          top: 6em;
          left: 0;
          h2{
            font-size: var(--size_1p4rem);
          }
    
          .gen_btn{
            display: block;
            position: relative;
            width: var(--width_90);
            text-align: center;
            background-color: var(--text_color);
            color: var(--body_color);
            font-size: var(--size_1p0rem);
            margin: 1em auto;
            &:hover{
              background-color: var(--body_color);
              color: var(--text_color);
            }
          }
    
          .itenary_btn{
            width: var(--width_100);
            background-color: var(--body_color);
            border: 0;
            padding: 0.4em 1em;
            color: var(--text_color);
            text-transform: uppercase;
            font-weight: 400;
            text-align: left;
            font-family: var(--heading_family);
            font-size: var(--size_1p8rem);
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.35s ease;
            &:first-child{
              border-top-right-radius: 6px;
              border-top-left-radius: 6px;
              border-top: 1px solid var(--text_color);
            }
            &:hover, &.current{
              background-color: var(--text_color);
              color: var(--body_color);
            }
          }
          &.visible{
            opacity: 1;
            top: 0;
            pointer-events: initial;
          }
        }
        .col_right{
          width: 100%;
          overflow-x: hidden;
          position: relative;
          z-index: 2;
          .cards_slider{
            flex-wrap: nowrap;
            width: calc(6*100%);
            min-height: var(--width_100);
          }
          .hotel_slider{
            flex-wrap: nowrap;
            width: calc(3*100%);
            min-height: var(--width_100);
            .safari_card{
              min-width: calc(100%/3) !important; 
            }
          }
          
          .safari_card{
            min-width: calc(100%/6);
            min-height: var(--width_100);
            padding: 0;
            .card_content{

              h2{
                text-align: left;
                font-size: var(--size_2p4rem);
                margin-left: 45px;
              }
              p{
                width: 100%;
                text-align: justify;
                font-size: var(--size_1p0rem);
                margin-bottom: 1em;
                font-weight: 400;
              }
              &.highlights{
                h3{
                  text-transform: uppercase;
                  margin-bottom: 0.5em;
                  font-weight: 600;
                }
                p{
                  margin-bottom: 0.5em;
                  position: relative;
                  font-size: var(--size_1p0rem);
                  span{
                    width: 10px;
                    height: 10px;
                    display: inline-block;
                    background-color: var(--text_color);
                    position: relative;
                    margin-right: 10px;
                    border-radius: 50%;
                  }
                }
              }
  
              .it_day{
                width: var(--width_100);
                margin-bottom: 1em;
                .day_btn{
                  display: block;
                  width: var(--width_100);
                  color: var(--text_color);
                  font-family: var(--heading_family);
                  border: 1px solid var(--body_color);
                  border-bottom: 2px solid var(--text_color);
                  text-align: left;
                  position: relative;
                  font-size: var(--size_1p5rem);
                  padding: 0.3em 0.5em;
                  margin-bottom: 0.8em;
  
                  &.open, &:hover{
                    background-color: var(--text_color);
                    color: var(--body_color);
                    border: 1px solid var(--text_color);
                    span{
                    
                      svg{
                     
                        path{
                          fill: var(--body_color);
                        }
                      }
                      
                    }
                  }
  
                  span{
                    width: 30px;
                    height: 30px;
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    transition: all 0.35s ease;
                    svg{
                      width: 26px;
                      height: 26px;
                      path{
                        fill: var(--text_color);
                      }
                    }
                    &.rotate{
                      right: 5px;
                      transform: translateY(-50%) rotate(180deg);
                    }
                  }
                }
                .day_content{
                  width: var(--width_100);
                  transition: all 0.35s ease-in-out;
                  max-height: 0;
                  overflow-y: hidden;
                  will-change: max-height;
  
                  .day_image{
                    width: var(--width_100);
                    height: 320px;
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                    border-radius: 4px;
                    margin-bottom: 1em;
                  }
  
               
                 
                  .day_desc{
                    width: var(--width_100);
                    margin-bottom: 1em;
                    p{
                      margin-bottom: 0.5em;
                    }
                  }
                  .day_extras{
                    width: var(--width_100);
                    border-radius: 8px;
                    padding: 2em;
                    background-color: rgba(59, 77, 37, 0.1);
  
                    .day_extra{
                      width: var(--width_100);
                      margin-bottom: 1em;
                      h3{
                        width: var(--width_100) ;
                        color: var(--text_color);
                        font-weight: 600;
                        font-size: var(--size_1p2rem);
                        text-transform: uppercase;
                        margin-bottom: 0.5em;
  
                        img{
                          width: 24px;
                          margin-right: 1em;
                        }
                      }
                      h4{
                        text-align: left;
                        width: var(--width_100);
                        font-weight: 500;
                        font-size: var(--size_1p1rem);
                        margin-bottom: 0.3em;
                        display: flex;
                        align-items: center;
  
                        span{
                          display: block;
                          position: relative;
                          width: 8px;
                          height: 8px;
                          font-size: 2px;
                          border-radius: 50%;
                          background-color: var(--text_color);
                          margin-right: 3em;
                        }
                      }
                    }
                  }
                }
              }
            }
    
            .photo_gallery{
              min-width: 100%;
              &.card_gallery{
                h2{
                  font-family: var(--heading_family);
                }
              }
              
            }
            
          }
        }
      }
    }

    .safari_why{

      padding: 3em 5%;
      background-color: rgba(59, 77, 37, 0.1);
      height: auto;
      .reasons{
        flex-direction: column;
        .reasons_left{
          width: 100%;
          position: relative;
          margin-bottom: 30px;
          .section_head{
            .mixed{
              justify-content: flex-start;
              flex-direction: row !important;
              margin-bottom: 0.6em;

              .normal{
                font-size: var(--size_2p8rem);
              }
              .scripted{
                font-size: var(--size_3p6rem);
              }
            }
            p{
              text-align: justify;
              margin: 0;
              padding: 0;
            }
          }
          .arrow_btns{
           display: none;
            
          }
          .gen_btn{
            width: 40%;
          }
      
        }
        .reasons_right{
          .sliding_cards{

            .card_slider{
              overflow-x: scroll;
              width: var(--width_100);
              grid-template-columns: repeat(1, 100%);
              gap: 20px;
            }
          }
        }
      }
    
    }

    .bridge{
     
      
     
      &.bridge_at_destination{
        margin: var(--size_2p0rem) auto;

        h2{
          
          font-size: var(--size_1p8rem);
          
        }
        
      }
    }


    .main_form{
      
      .input_line{
      
        
        .input_group{
          
          
          .input_label{
            font-size: var(--size_0p9rem);
          }
          input, .text_area{
            font-size: var(--size_0p9rem);
            &::placeholder{
              font-size: var(--size_0p8rem);
            }
          }
         
        }
        
      }
      
    }


    .bookings{
      
      
      .form_container{
        
        .payment_form{
          
          
          .book_steps{

              /* overflow-x: hidden; */
              .step{
                &.step_three{
                  .tour_info{
                    flex-direction: column;
                    align-items: start;
                    gap: 10px;

                    &.flex_center{
                      p{
                        &:last-child{
                          margin-left: 0;
                        }
                      }
                    }
                  }
                  
                }
                

              }
              
             
           
            
            .main_form{
       
              .input_line{
                
                .input_group{
                  .input_label{
                   
                    font-size: var(--size_0p9rem);

                  }
                  
                }
                
              }
            }
          }    
        }
        .progress_buttons{
          width: var(--width_100);
          .progress_btn{
            outline: none;
            border: 0;
            cursor: pointer;
            border-radius: 8px;
            font-size: var(--size_1p0rem);
            padding: 8px 1em;
            transition: all 0.25s ease;
            &.back_btn{
              background-color: rgba(59, 77, 37, 0.1);
              color: var(--text_color);
              border: 0.5px solid rgba(59, 77, 37, 0.1);
            }
            &.invisible{
              opacity: 0;
              pointer-events: none;
            }
            &.next_btn{
              background-color: var(--text_color);
              color: var(--body_color);
              border: 0.5px solid var(--text_color);
            }
            &:hover{
              background-color: var(--body_color);
              color: var(--text_color);
              border: 0.5px solid rgba(0, 31, 43, 0.4);
            }
          }
          .counted{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0%;
            font-weight: 400;
            font-size: var(--size_1p2rem);
            opacity: 0;
            pointer-events: none;
            transition: all 0.25s ease;
            span{
              font-weight: 600;
            }
            &.visible{
              opacity: 1;
              pointer-events: initial;
            }
          }
         
        }
        
      }
      
      
    }

    .custom_table{
      .table{

      
        th{
          display: none;
        }
        td{
          width: var(--width_100);
          display: grid;
          grid-template-columns: 15ch 1fr;
          text-align: left;
          &::before{
            content: attr(data-label) ': ';
            text-transform: capitalize;
            font-weight: 500;
              font-family: var(--heading_family);
              font-size: var(--size_1p1rem);
          }
          &[data-label='rate'], &[data-label='amount']{
            &::before{
              content: attr(data-label) '($): ';
            }
          }
          &.no_data{
            display: none;
          }
        }

        tfoot{

          
          .total{
            &:nth-child(1){
              border-top: 1px solid rgba(59, 77, 37, 0.25) !important;
              margin-top: 10px;
            }
            
            td{
              grid-template-columns: 19ch 1fr;
              &[data-label='paid']{
                border-top: 1px solid rgba(59, 77, 37, 0.25) !important;
                padding-top: 10px;
              }
              &[data-label='balance']{
                border-bottom: 1px solid rgba(59, 77, 37, 0.25) !important;
               padding-bottom: 10px;
              }
              
            }
          }
        }
        
      }
    }

    

    

    
  }
  @media screen and (max-width: 620px){

  
   
    .bridge{
     
      
      &.no_back{
        
       h2{
        margin-bottom: 1em;
       }
        .btns{
          column-gap: 1em;
          justify-content: space-between;
          .gen_btn{
            font-size: var(--size_1p0rem);
          }
        }
      }
    }

    .why_section{


      &.tour_detail_why{
        .reasons{
          .reasons_left{

            .gen_btn{
              display: block;
              width: 100%;
            }

            .section_head{
              margin-bottom: 1.5em;
              .mixed{
               
                .normal{
                  font-size: var(--size_2p6rem) !important;
                }
                .scripted{
                  font-size: var(--size_3p2rem) !important;
                }
              }
            }
          }
         
  
        }
      }
     
      
    }

    .bookings{
      position: relative;
      .booking_header{
        .logo{
          flex: 1;
        }
        
        .menu_btn{
          img{
            width: 28px;
          }

          
        }
       
       
        .links{
          width: var(--width_70);
          padding: 5%;
          padding-top: 20vh;
        

          .nav_item{
        
            /* margin-bottom: 10px; */

  
            .nav_link{
             
              font-size: var(--size_1p4rem);
              
             
            }
            
          }
          
        }
        
        .contacts{
        
          h2{
            color: var(--text_color);
            font-weight: 500;
            &:first-child{
              padding-right: 0.6em;
              margin-right: 0.6em;
              border-right: 2px solid var(--text_color);
            }
            span{
              font-weight: 400;
            }
          }
        }
        
       
      }

      .management_title{

        h1{
          font-size: var(--size_1p8rem);
    
        }
        h2{
          display: none;
 
        }
        
       
      }
  
     
     
      
     
    }

    .hero{
  
      .main_hero{
      
        
        .hero_left{
       
          /* box-shadow: 6px 0px 16px 20px rgba(236, 236, 236, 0.2); */
         
          .hero_left_content{
           
            
            

            .title{
              font-size: var(--size_2p4rem);
            }
            p{ font-size: var(--size_1p0rem);}
            /* .button{
             
              &:last-child{
                padding: 0.3em 2em;
                
              }
             
            } */
          }
        }
    
       
      }
      
    }
  
    
    
  }
  @media screen and (max-width: 600px){

    .why_section{


      &.destination_why{
        padding: 20px;
       
        .reasons{
          display: block;
          width: 100%;
          margin-left: 0;
          padding: 25px;
          .section_head{
            margin-bottom: 1.5em;
            .mixed{
              flex-direction: row !important;
              justify-content: flex-start;
              .normal{
                font-size: var(--size_2p2rem);
              }
              .scripted{
                font-size: var(--size_3p2rem);
              }
            }
          }
          .why_list{
          
            /* margin-bottom: 2em; */
            .why_item{
              h2{
                font-size: var(--size_1p0rem);
                text-align: justify;
                span{
                  font-size: var(--size_0p9rem);
                  margin-left: 0.2em;
                }
              }
            }
          }
        }
      }


     
     
      
    }
  
    
    
  }
  @media screen and (max-width: 550px){

   

    .featured_hotels{
    
     
      .section_head{
      
        .mixed{
      
          .normal{
            font-size: var(--size_2p6rem);
          }
          .scripted{
            font-size: var(--size_3p4rem);
          }
          h2{
            text-align: left;
          }
        }
      }
    
     
      
    }

    .main_nav{
      width: var(--width_100);
  
  
    
      .nav_links{
      

    
        .nav_items{
  
          .nav_list{
  
            .nav_item{
              .nav_link{

                font-size: var(--size_2p0rem);
               
              }
              &.main_item{
               position: relative;
                
                &:hover{
                  .nested_list{
                    background-color: var(--body_color);
                    opacity: 1;
                    pointer-events: initial;
                    left: -40%;
          
                  }
                }
              }
            }
          }
          .other_list{

            .nav_item{
          
              .nav_link{
               
                font-size:var(--size_0p85rem);
              
                
              }
            }
    
           }
         
          
          
        }
        
      }
    
     
    }
    .video_player{
  
 
      .video{
        width: 90vw;
        height: 50vh;
       
      }
      
    }
    
  
    .home_nav{
         padding: 1em 5%;
      .logo{
          .link_btn{
            
            img{
              width: 55px;
              object-fit: cover;
            }
            
          }
          h2{
            display: none;
             
             }
          
        }
        
        .home_left{
        
          button{
            img{
              width: 28px;
           
            }
          }
        }
        &.nav_standalone {
          padding: 1em 5%;
        }
        
       
      }
      
    
  
    .hero{
  
      .main_hero{
      
        
        .hero_left{
       
          /* box-shadow: 6px 0px 16px 20px rgba(236, 236, 236, 0.2); */
         
          .hero_left_content{
           
            
            .actions{
              column-gap: unset;
              row-gap: 2em;
              flex-direction: column;
            }

            .title{
              font-size: var(--size_2p4rem);
            }
       
            /* .button{
             
              &:last-child{
                padding: 0.3em 2em;
                
              }
             
            } */
          }
        }
    
       
      }
      
    }
  
   
  
    .bridge{
      
      padding: 2em 5%;
   
    
      h2{
       
        font-size: var(--size_1p6rem);
        text-align: justify;
        
      }
      &.no_back{
        h2{
          text-align: justify;
          margin-bottom: 1em;
          
        }
       
        
          .btns{
            column-gap: 1em;
            flex-direction: column;
            .gen_btn{
              width: var(--width_80);
              display: block;
              margin: auto;
              font-size: var(--size_1p0rem);
              &:last-child{
                margin-top: 2em;
              }
            }
          }
      }

      &.bridge_at_destination{
        margin: var(--size_2p0rem) auto;

        h2{
          
          font-size: var(--size_1p6rem);
          
        }
        
      }
    }
  
   
  
    
    .news_letter{
      h3{
     
        font-size: var(--size_1p4rem);

      
  
      }
      
    }
  
  
    .values{
  
      .values_slider{
       
        column-gap: 2%;
        .value{
          flex-basis: 49%;
          min-width: 49%;
          
        }
      }
      
    }
  
    .two_cols{
     
      .grid_col{
        &.col_left{
          height: 400px;
          
        }
    
       
        .section_head{
          margin-bottom: 0.9em;
        
          .mixed {
            justify-content: flex-start;
            .normal{
              font-size: var(--size_3p2rem);
            }
            .scripted{
              font-size: var(--size_4p6rem);
            }
          }
          p{
            font-size: var(--size_1p1rem);
          }
          
        }
        p{
          font-size: var(--size_1p1rem);
          margin-bottom: 2.2em;
        }
      }
      
    }


  
   
  
   
    
    
     .tour_slide{
       
       
       .tour_content{
         
        
         p.t_txt{
           width: var(--width_100);
           text-align: justify;
         }
         h1{
         
           font-size: var(--size_1p7rem);
         }
         
        
         .gen_btn{
          
           margin-left: var(--width_50);
           
           width: var(--width_50);
          
         }
       }
     }

     .gen_btn{
   display: block;
   width: var(--width_100);
      font-size: var(--size_1p0rem);

   
    
    }

    .the_plan{
      .section_head{
        margin-bottom: 2em;
        .mixed{
          flex-direction: column;
          justify-content: center;
        }
      }
      .plan_container{
       
        .plan_card{
          padding: 20px;

          h3{
            font-size: var(--size_2p6rem);
          }
          h2{
            font-size: var(--size_1p8rem);
          }
          p{
            font-size: var(--size_1p0rem);
          }
        }
      }
    }

    .tour_preview{

      .preview_col{
       .container{
          height: 300px;

          .vidz_button{
            bottom: 1em;
            left: 0;
           
          }
    
        }
    
      }
      .preview_right{
        padding: 2em;
        h4{
          font-size: var(--size_1p0rem);
        }
        h1{
          font-size: var(--size_1p8rem);
        }
        h3{
          font-size: var(--size_0p95rem);
          img{
            width: 18px;
          }
        }
        h2{
          font-size: var(--size_1p4rem);
          margin-bottom: 1em;
        }
        .link_btns{
          .gen_btn{
            width: 60%;
            font-size: var(--size_1p0rem);
          }
        }
      }
    }

    .tour_itenary_container{
      padding: 2em 5%;
      .tour_itenary_details{
        .it_btn_toggle{
          width: 30px;
          height: 30px;
          left: 0;
          top: 0.5em;

          img{
            width: 20px;
            height: 20px;
          }
        }
        .col_left{
          width: 70%;
         
          h2{
            font-size: var(--size_1p4rem);
            margin-top: 0.6em;
          }
    
    
          .itenary_btn{
            width: var(--width_100);
            background-color: var(--body_color);
            border: 0;
            padding: 0.4em 1em;
            color: var(--text_color);
            text-transform: uppercase;
            font-weight: 400;
            text-align: left;
            font-family: var(--heading_family);
            font-size: var(--size_1p8rem);
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.35s ease;
            &:first-child{
              border-top-right-radius: 6px;
              border-top-left-radius: 6px;
              border-top: 1px solid var(--text_color);
            }
            &:hover, &.current{
              background-color: var(--text_color);
              color: var(--body_color);
            }
          }
        }
       
      }
    }

    .section_head{
        margin-bottom: 2em;
        .mixed{
          
          .normal{
            font-size: var(--size_2p4rem) !important;
          }
          .scripted{
            font-size: var(--size_3p0rem) !important;
          }
          h2{
            text-align: left;
          }
        }

        &.tour_head_section{

          .mixed {
          
            .normal{
              font-size: var(--size_2p8rem) !important;
            }
            .scripted{
              font-size: var(--size_4p2rem) !important;
              
            }
            
          }
  
          /* p{
            font-size: var(--size_1p2rem);
          } */
        }
      }

        
  .destination_highlights{

    /* margin: 3em auto;
    padding: 0 10%; */
   
    .section_head{
      .mixed{
        justify-content: flex-start;

        .normal{
          font-size: var(--size_3p0rem);
        }
        .scripted{
          font-size: var(--size_3p8rem);
        }
        
      }
    }
  }

  .main_image_slider{

    .image_slider{
      height: 320px;

      .slider_btns{
        padding: 1em;
        .arrow{
          width: 30px;
          height: 30px; 
        }
      }


  
      .main_image{
       
        h2{
        
          font-size: var(--size_1p2rem);
        }
      }
      
    }
    
  }

  .reviews{

    padding: 4em 5%;


    .review_grid{
     
      .grid_col{
        &.col_left{
          height: 400px;
        }
        .col_img{
          
          .col_content{
            
            .review_tit{
             
              /* padding: 4%; */
              .section_head{

                .mixed {
                  
                  .normal{
                    text-transform: uppercase;
                    font-size: var(--size_2p6rem);
                  }
                  .scripted{
                    font-size: var(--size_3p6rem);
                  }
                }
               
                
              }
              .gen_btn{
                width: var(--width_70);
                font-size: var(--size_1p0rem);
                
              }
            }
          }
        }
  
        
        .review_slider{
          .review_card{
            .stars{
              /* margin-bottom: 0.6em; */
              img{
                width: 100px;
              }
            }
      
              h3{
                font-size: var(--size_1p8rem);
              }
              
              h4{
                font-size: var(--size_1p0rem);
              }
              h5{
                font-size: var(--size_1p0rem);
              }
          }
        }
      
  
        .review_btns{

            .arrow{
             
              width: 36px;
              height: 36px;
              
             
              svg{
                width: 17px;
                height: 17px;
               
              }
            
          }
        }
        
      }
    }
    .two_cols{

      .grid_col{
        position: relative;
        .col_img{
          .col_content{
            width: var(--width_100);
            height: var(--width_100);
            background-color: rgba(0, 31, 43, 0.4);
            position: relative;
            border-radius: 8px;
            .review_tit{
              width: var(--width_100);
              position: absolute;
              bottom: 2%;
              padding: 4%;
              .section_head{
                width: var(--width_100);
                margin-bottom: 1em;
              
                .mixed {
                  flex-direction: column;
                  h2{
                    width: var(--width_100);
                    text-align: center;
                    color: var(--body_color);
                  }
                  .normal{
                    text-transform: uppercase;
                  }
                  .scripted{
                    font-size: var(--size_6p0rem);
                  }
                }
                p{
                  width: 100%;
                  text-align: left;
                  font-size: var(--size_1p2rem);
                  margin-bottom: 0;
                }
                
              }
              .gen_btn{
                display: block;
                width: var(--width_50);
                margin: auto;
                border-color: var(--body_color);
                color: var(--body_color);
                text-align: center;
                &:hover{
                  background-color: var(--body_color);
                  color: var(--text_color);
                }
              }
            }
          }
        }
  
        
        .review_slider{
          .review_card{
            .stars{
              width: var(--width_100);
              margin-bottom: 1em;
              img{
                width: 150px;
                object-fit: cover;
                margin-bottom: 1em;
              }
            }
      
              h3{
                width: var(--width_100);
                text-align: justify;
                font-weight: 400;
                font-size: var(--size_2p8rem);
                font-family: var(--heading_family);
                margin-bottom: 1em;
              }
              h4, h5{
                text-transform: uppercase;
              }
              h4{
                font-weight: 600;
                font-size: var(--size_1p2rem);
              }
              h5{
                font-weight: 400;
                font-size: var(--size_1p0rem);
              }
          }
        }
      
  
        .review_btns{
            position: absolute;
            right: 0;
            bottom: 2%;
            column-gap: 1em;
            
            .arrow{
             
              width: 40px;
              height: 40px;
              border-radius: 50%;
              border: 1px solid var(--text_color);
              position: relative;
              transition: all 0.3s ease;
              .image_layer{
                display: none;
              }
              img{
                display: none;
              }
              svg{
                width: 20px;
                height: 20px;
                path{
                  fill: var(--text_color)
                }
              }
              &:hover{
                border: 1px solid var(--text_color);
                background-color: var(--text_color);
                svg{
                  path{
                    fill: var(--body_color)
                }
              }
            }
          }
        }
        
      }
      
    }
  
   
  }

  .hidden_gallery{
    
    .big_image{
      
      width: var(--width_90);
      height: var(--width_40);
     
     
      
    }
    
  }


  .bookings{
    
    .booking_header{
      /* padding: 1em var(--width_5); */
   
      
      .logo{
        img{
          width: 40px;
        }
      }
      .contacts{
      
        h2{
          
          &:first-child{
            display: none;
          }
          
        }
      }
      
     
    }

   
    .form_container{
      width: var(--width_90);
      /* margin: 1em auto; */
    
     /* min-height: 70vh; */
     
      .payment_form{
     
        padding: 1.5em;

  
        .progress_line{

          span{
          
            height: 3px;
            &.current{
              background-color: var(--orange_color);
            }

          }
        }
        .book_steps{
          flex-direction: row;
          flex-wrap: nowrap;
       
          /* overflow-x: hidden; */
          .step{
            
            /* min-width: var(--width_100); */
            h1{
              font-size: var(--size_1p8rem);
    
            }
            
            .tour_info{
            
              &.book_start{
                
                gap: 1em;
                .link_btn{
                  flex: 1;
                }
              }
              p{
                margin-bottom: 0.3em;
                span{
                  font-weight: 600;
                }
              }
              .link_btn{
               
                font-size: var(--size_1p2rem);
                /* padding: 8px 1em; */
                
                /* width: 200px; */
                
                
              }
              
             
            }

            .final_notification{
              position: fixed;
              z-index: 5000;
              top: 0;
              left: 0;
              width: 100vw;
              height: 100vh;
              display: flex;
              align-items: center;
              justify-content: center;
              .notification{
                width: 500px;
                background-color: var(--body_color);
                border-radius: 6px;
                border: 0.6px solid var(--text_color);
                padding: 1em;
                img{
                  width: 30px;
                  
                  margin-right: 1em;
                }
                p{
                  text-align: left;
                  margin: 0;

                  &.success{
                    color: var(--success_color);
                  }
                  &.failure{
                    color: var(--fail_color);
                  }
                }
              }

            }
            .terms{
              width: var(--width_100);
              display: flex;
              .custom_check_box{
                margin-right: 0.8em;
                width: 25px;
                height: 25px;
                margin-top: 0;
                position: relative;
                .check_mark{
                  width: var(--width_100);
                  height: var(--width_100);
                  cursor: pointer;
                  position: relative;
                  z-index: 1;
                  border-radius: 50%;
                  opacity: 0;
                }
                label{
                  position: absolute;
                  z-index: 5;
                  background-color: var(--body_color);
                  border: 0.5px solid rgba(59, 77, 37, 0.25);
                  width: var(--width_90);
                  height: var(--width_90);
                  border-radius: 4px;
                  cursor: pointer;
                  svg{
                    width: var(--width_70);
                  }
                  &.checked{
                    background-color: var(--text_color);
                    border: 0.5px solid var(--text_color);
                  }
                }
              }
              .btn{
                color: var(--text_color);
                font-size: var(--size_1p0rem);
                border: 0;
                transition: all 0.25s ease;
                &:hover{
                  text-decoration: underline;
                }
              }
            }
  
            .payment_frame {
              width: var(--width_100);
              min-width: var(--width_100);
              height: 100%;
              min-height: 100%;
              position: relative;
              .pesapal {
                display: block;
                height: 100%;
                min-height: 500px;
                max-height: 100%;
                width: 100%;
                position: relative;
                iframe {
                  position: absolute;
                  top: 0;
                  left: 0;
                  bottom: 0;
                  right: 0;
                  width: 100%;
                  height: 100%;
                  min-width: 100%;
                  min-height: 100%;
                }
              }
             
            }
          }
          
        }    
      }
      
      
    }
    .footer_bottom{
      padding: 1.5em 5%;

     flex-direction: column;
     gap: 15px;

     
      .f_col{
        
        h4{
          
          font-weight: 600;
          text-transform: uppercase;
          color: var(--text_color);
          font-size: var(--size_1p0rem);
          margin-right: 1em;
        }
        img,svg{
          width: 38px;
        }
        .agencies, .payments{
          gap: 1em;
        }
      
        
      }
      
    }
    
  }
    
  }
  @media screen and (max-width: 520px){

  


  


  .bookings{
    
    .booking_header{
      /* padding: 1em var(--width_5); */
   
      
      .logo{
        img{
          width: 40px;
        }
      }
      .contacts{
      
        h2{
          
          &:first-child{
            display: none;
          }
          
        }
      }
      
      
     
    }

    
    .form_container{
      width: var(--width_90);
      /* margin: 1em auto; */
    
     /* min-height: 70vh; */
     
      .payment_form{
     
        padding: 0.8em;

  
        .progress_line{

          span{
          
            height: 3px;
            &.current{
              background-color: var(--orange_color);
            }

          }
        }
        .book_steps{
          flex-direction: row;
          flex-wrap: nowrap;
       
          /* overflow-x: hidden; */
          .step{
            
            /* min-width: var(--width_100); */
            h1{
              font-size: var(--size_1p7rem);
    
            }
            
            .tour_info{
            
              &.book_start{
                flex-direction: column;
                
                gap: 10px;
                .link_btn{
                  width: 100%;
                }
              }
              p{
                margin-bottom: 0.3em;
                span{
                  font-weight: 600;
                }
              }
              .link_btn{
               
                font-size: var(--size_1p2rem);
                /* padding: 8px 1em; */
                
                /* width: 200px; */
                
                
              }
              
              
            }

            .final_notification{
              position: fixed;
              z-index: 5000;
              top: 0;
              left: 0;
              width: 100vw;
              height: 100vh;
              display: flex;
              align-items: center;
              justify-content: center;
              .notification{
                width: 500px;
                background-color: var(--body_color);
                border-radius: 6px;
                border: 0.6px solid var(--text_color);
                padding: 1em;
                img{
                  width: 30px;
                  
                  margin-right: 1em;
                }
                p{
                  text-align: left;
                  margin: 0;

                  &.success{
                    color: var(--success_color);
                  }
                  &.failure{
                    color: var(--fail_color);
                  }
                }
              }

            }
            .terms{
              width: var(--width_100);
              display: flex;
              .custom_check_box{
                margin-right: 0.8em;
                width: 25px;
                height: 25px;
                margin-top: 0;
                position: relative;
                .check_mark{
                  width: var(--width_100);
                  height: var(--width_100);
                  cursor: pointer;
                  position: relative;
                  z-index: 1;
                  border-radius: 50%;
                  opacity: 0;
                }
                label{
                  position: absolute;
                  z-index: 5;
                  background-color: var(--body_color);
                  border: 0.5px solid rgba(59, 77, 37, 0.25);
                  width: var(--width_90);
                  height: var(--width_90);
                  border-radius: 4px;
                  cursor: pointer;
                  svg{
                    width: var(--width_70);
                  }
                  &.checked{
                    background-color: var(--text_color);
                    border: 0.5px solid var(--text_color);
                  }
                }
              }
              .btn{
                color: var(--text_color);
                font-size: var(--size_1p0rem);
                border: 0;
                transition: all 0.25s ease;
                &:hover{
                  text-decoration: underline;
                }
              }
            }
  
            .payment_frame {
              width: var(--width_100);
              min-width: var(--width_100);
              height: 100%;
              min-height: 100%;
              position: relative;
              .pesapal {
                display: block;
                height: 100%;
                min-height: 500px;
                max-height: 100%;
                width: 100%;
                position: relative;
                iframe {
                  position: absolute;
                  top: 0;
                  left: 0;
                  bottom: 0;
                  right: 0;
                  width: 100%;
                  height: 100%;
                  min-width: 100%;
                  min-height: 100%;
                }
              }
             
            }
          }
          
        }    
      }
      
     
    }

    &.management{
      .form_container{
        /* padding-top: 4em; */
        width: 90%;
        
      }
    }
   
    
  }

  .main_form{
    width: var(--width_100);
    position: relative;
    .input_line{
      flex-direction: column;
      gap: 8px;
      
     
      &.double_input{
        flex-direction: column;
        gap: 8px;
      }
      .break_away{
        flex-direction: column; 
        gap: 8px;
  
        &.left_large{
          flex-direction: column; 
          gap: 8px;
          .input_group{
            &:first-child{
              flex:unset;
            }
            &:last-child{
              flex:unset;
            }
            width: var(--width_100);
          }
        }
      }
     
  
      &.triple{
        flex-direction: column; 
        gap: 8px;
      }
      &.right_large{
        flex-direction: column; 
        gap: 8px;
        .input_group{
          &:first-child{
            flex: unset;
          }
          &:last-child{
            flex: unset;
          }
          width: var(--width_100);
        }
      }
    
      &.middle_large{
        .input_group{
          &:first-child{
            flex: unset;
          }
          &:nth-child(2){
            flex: unset;
          }
          &:last-child{
            flex: unset;
          }
          width: var(--width_100);
        }
      }
    }
    
  }

  .captcha{
    
   
    .captcha_img{
     width: 60% !important;

     /* height: 50px; */

    
     
    }
    
   }
    
  }
  @media screen and (max-width: 450px){

   

    .hero{
  
      .main_hero{
      
        
        .hero_left{
       
          /* box-shadow: 6px 0px 16px 20px rgba(236, 236, 236, 0.2); */
         
          .hero_left_content{
           
          

            .title{
              font-size: var(--size_2p2rem);

              &.no_break{
                display: none;
              }
              &.break{
                display: block;
              }
            }
           
          }
        }
    
       
      }
      
    }
  
    .main_nav{
      width: var(--width_100);
  
  
    
      .nav_links{
      
       
    
       
    
        .nav_items{
  
          .nav_list{
  
            .nav_item{
              &.main_item{
               position: relative;
                
                &:hover{
                  .nested_list{
                    background-color: var(--body_color);
                    opacity: 1;
                    pointer-events: initial;
                    left: -10%;
          
                  }
                }
              }
            }
          }
          .other_list{
            width: 100%;
            margin-left: auto;
            margin: 2em auto;
    
           }
         
          
          
        }
        
      }
    
     
    }
   

    .page_section{
      margin: var(--width_10) auto;
      .section_head{
        .mixed {
  
          .normal{
            font-size: var(--size_2p8rem);
          }
          .scripted{
            font-size: var(--size_3p6rem);
            
          }
        }
        p{
          font-size: var(--size_1p1rem);
        }
        
      }
      .tour_styles{
      
        .tour_card{
  
          padding: var(--size_1p6rem);
      
          
          .head_row{
            column-gap: var(--size_1p4rem);
            h4{
              font-size: var(--size_0p9rem);
             
            }
          }
          h3{
            font-weight: 600;
            font-size: var(--size_1p0rem);
            
          }
         
          p{
         
            font-size: var(--size_1p0rem);
           
          }
    
         
          
        }
      }
    }

    .upload_manager{
    
      &.manage_booking{
        
      .progress_btn{
        width: 100% !important;
      }
  
      }
    
     
  
     
      
    }
  
    .values{
  
      .values_slider{
       
        column-gap: 2%;
        .value{
          flex-basis: 100%;
          min-width: 100%;
          
        }
      }
      
    }
    .bridge{
    &.no_back{
      
     
      
        .btns{
          .gen_btn{
            width: var(--width_100);
            
          }
        }
    }
  
    .footer{
     
      
      .footer_columns{
       
        .footer_column{
         
          h2{
            
            font-size: var(--size_1p0rem);
            span{
              
              color: var(--body_color);
              font-weight: 300;
              
            }
          }
          .gen_btn{
            display: block;
            width: var(--width_60);
           
           margin: 1em auto;
          }
          socials{
            width: var(--width_100);
            
            column-gap: 0.6em;
            justify-content: center;
            svg{
              width: 24px;
              path{
                fill: var(--orange_color);
              }
            }
          }
    
    
          .big_link, .normal_link{
            display: block;
     
            text-align: center;
            color: var(--body_color);
            
            font-size: var(--size_1p0rem);
            
            
          }
          .big_link{
            font-size: var(--size_2p0rem);
          
          }
          
        }
      }
      
    }
  }

  .why_section{

    &.tour_detail_why{
      .reasons{
        padding: 15px !important;
        width: var(--width_95);
        gap: 30px;

        .reasons_left{

         

          .section_head{
            .mixed{
             
              .normal{
                font-size: var(--size_2p2rem) !important;
              }
              .scripted{
                font-size: var(--size_2p6rem) !important;
              }
            }
          }
        }

      }
    }

    &.destination_why{

      .reasons{
        display: block;
        width: 100%;
        margin-left: 0;
        .section_head{
          margin-bottom: 1.5em;
          .mixed{
            flex-direction: row !important;
            justify-content: flex-start;
            .normal{
              font-size: var(--size_2p2rem);
            }
            .scripted{
              font-size: var(--size_3p0rem);
            }
          }
        }
        .why_list{
        
          /* margin-bottom: 2em; */
          .why_item{
            h2{
              font-size: var(--size_1p0rem);
              span{
                font-size: var(--size_0p9rem);
                margin-left: 0.2em;
              }
            }
          }
        }
      }
    }
   
    
  }

  .section_head{
    
    .mixed {

      .normal{
        font-size: var(--size_2p2rem) !important;
      }
      .scripted{
        font-size: var(--size_2p8rem) !important;
      }
      
    }
    
    p{

      font-size: var(--size_1p0rem);
    }
   
    &.tour_head_section{
      margin-top: 1em;
      margin-bottom: 1em;

        .mixed {
        
          .normal{
            font-size: var(--size_2p4rem) !important;
          }
          .scripted{
            font-size: var(--size_3p8rem) !important;
            
          }
          
        }

        /* p{
          font-size: var(--size_1p2rem);
        } */
      
    }
  }

  .filter_row{

    .filterr{
      column-gap: 1em;
      h2{
        font-size: var(--size_1p0rem);
        width: 50%;
      }
      .custom_select{
        width: 50%;
        .selected{
          input{
            font-size: var(--size_1p0rem);
            
          }
        }
        .select_options{
          .option_btn{
            font-size: var(--size_1p0rem);
           
          }
        }
      }
      
    }
  }

  .tour_itenary_container{
    padding: 2em 5%;
    .tour_itenary_details{
      .it_btn_toggle{
        width: 30px;
        height: 30px;
        left: 0;
        top: 0.5em;

        img{
          width: 20px;
          height: 20px;
        }
      }
      .col_left{
        width: 80%;
       
        h2{
          font-size: var(--size_1p4rem);
          margin-top: 0.6em;
        }
  
  
        .itenary_btn{
          padding: 0.4em 1em;
          font-size: var(--size_1p4rem);
        }
      }
     
    }
  }

  .safari_why{

    .reasons{
 
      .reasons_left{

        .section_head{
          .mixed{
        
            .normal{
              font-size: var(--size_2p6rem);
            }
            .scripted{
              font-size: var(--size_3p4rem);
            }
          }
         
        }
       
        .gen_btn{
          width: 100%;
        }
    
      }
    
    }
  
  }

  .destinations{
    
    .one_destination{
   
      .destination_hero{

        &.detail_hero{
  
          .hero_area{
            width: var(--width_100);
            /* margin: 2em auto;
            padding-bottom: 4em; */
            
           
            .hero_left{
              
              h1{
  
                font-size: var(--size_2p2rem);
              }
              h2{
                font-size: var(--size_2p6rem);
              }
             
            }
           
          }
  
        }
   
        &.whole_hero{
  
          .hero_area{
           width: var(--width_95);
            .hero_left{
              width:100%;
              margin-bottom: 0.6em;
              h1, h2{
                text-align: center;
                
              }
              h1{
  
                font-size: var(--size_2p6rem);
              }
              h2{
                font-size: var(--size_3p2rem);
              }

             
              
            }
            .hero_right{
              width: var(--width_80);
 
            }
          }
  
        }
      }

      .destination_info{
        width: var(--width_90);
        /* margin: 3em auto;
        margin-bottom: 6em; */
        .detail{
      
          h1{
            
            font-size: var(--size_1p4rem);
          }
         
          p{
            font-size: var(--size_1p0rem);
          }
        }
      }
  
  

      
    }
  }

  .main_image_slider{

    .image_slider{
    
      height: 300px;
  
      .main_image{
       
        h2{
        
          font-size: var(--size_1p0rem);
        }
      }
      
    }
    
  }

  .reviews{

    padding: 4em 5%;


    .review_grid{
     
      .grid_col{
        &.col_left{
          height: 350px;
        }
        .col_img{
          
          .col_content{
            
            .review_tit{
             
              /* padding: 4%; */
              .section_head{

                .mixed {
                  
                  .normal{
                    text-transform: uppercase;
                    font-size: var(--size_2p4rem);
                  }
                  .scripted{
                    font-size: var(--size_3p2rem);
                  }
                }
               
                
              }
              .gen_btn{
                width: var(--width_70);
             
                
              }
            }
          }
        }
  
        
        .review_slider{
          .review_card{
            .stars{
              /* margin-bottom: 0.6em; */
              img{
                width: 80px;
              }
            }
      
              h3{
                font-size: var(--size_1p6rem);
              }
              
              h4{
                font-size: var(--size_1p0rem);
              }
              h5{
                font-size: var(--size_1p0rem);
              }
          }
        }
      
  
        .review_btns{

            .arrow{
             
              width: 36px;
              height: 36px;
              
             
              svg{
                width: 17px;
                height: 17px;
               
              }
            
          }
        }
        
      }
    }
    .two_cols{

      .grid_col{
        position: relative;
        .col_img{
          .col_content{
            width: var(--width_100);
            height: var(--width_100);
            background-color: rgba(0, 31, 43, 0.4);
            position: relative;
            border-radius: 8px;
            .review_tit{
              width: var(--width_100);
              position: absolute;
              bottom: 2%;
              padding: 4%;
              .section_head{
                width: var(--width_100);
                margin-bottom: 1em;
              
                .mixed {
                  flex-direction: column;
                  h2{
                    width: var(--width_100);
                    text-align: center;
                    color: var(--body_color);
                  }
                  .normal{
                    text-transform: uppercase;
                  }
                  .scripted{
                    font-size: var(--size_6p0rem);
                  }
                }
                p{
                  width: 100%;
                  text-align: left;
                  font-size: var(--size_1p2rem);
                  margin-bottom: 0;
                }
                
              }
              .gen_btn{
                display: block;
                width: var(--width_50);
                margin: auto;
                border-color: var(--body_color);
                color: var(--body_color);
                text-align: center;
                &:hover{
                  background-color: var(--body_color);
                  color: var(--text_color);
                }
              }
            }
          }
        }
  
        
        .review_slider{
          .review_card{
            .stars{
              width: var(--width_100);
              margin-bottom: 1em;
              img{
                width: 150px;
                object-fit: cover;
                margin-bottom: 1em;
              }
            }
      
              h3{
                width: var(--width_100);
                text-align: justify;
                font-weight: 400;
                font-size: var(--size_2p8rem);
                font-family: var(--heading_family);
                margin-bottom: 1em;
              }
              h4, h5{
                text-transform: uppercase;
              }
              h4{
                font-weight: 600;
                font-size: var(--size_1p2rem);
              }
              h5{
                font-weight: 400;
                font-size: var(--size_1p0rem);
              }
          }
        }
      
  
        .review_btns{
            position: absolute;
            right: 0;
            bottom: 2%;
            column-gap: 1em;
            
            .arrow{
             
              width: 40px;
              height: 40px;
              border-radius: 50%;
              border: 1px solid var(--text_color);
              position: relative;
              transition: all 0.3s ease;
              .image_layer{
                display: none;
              }
              img{
                display: none;
              }
              svg{
                width: 20px;
                height: 20px;
                path{
                  fill: var(--text_color)
                }
              }
              &:hover{
                border: 1px solid var(--text_color);
                background-color: var(--text_color);
                svg{
                  path{
                    fill: var(--body_color)
                }
              }
            }
          }
        }
        
      }
      
    }
  
   
  }
  
  
  }
  @media screen and (max-width: 420px){
  
  
    .two_cols{
     
      .grid_col{
        &.col_left{
          height: 320px;
          
        }
    
       
        .section_head{
  
          .mixed {
            .normal{
              font-size: var(--size_2p8rem);
            }
            .scripted{
              font-size: var(--size_3p2rem);
            }
          }
          
          
        }
       
      }
      &.guides{
        .grid_col{
          &.col_left{
            height: 360px;
            
          }
      
         
          .section_head{
    
            .mixed {
              flex-direction: column;
              h2{
                text-align: left;
                display: block;
                width: var(--width_100);
              }
            }
            
            
          }
         
        }
      }
    }
  
   
    .news_letter{
     
      .gen_btn{
        display: block;
        text-align: center;

      }
    }
  
    .page_section{
      
      .tour_styles{
        
        .tour_card{
  
          .section_head{
            .mixed {
            
              .normal{
                font-size: var(--size_2p6rem);
              }
              .scripted{
                font-size: var(--size_3p0rem);
                
              }
            }
          }
   
          .head_row{
            column-gap: var(--size_1p0rem);
           
            h4{
              font-size: var(--size_1p2rem);
            
            }
          }
          h3{
            margin-bottom: var(--size_1p1rem);
          }
          
          p{
           
            font-size: var(--size_1p0rem);
          }
    
        
          
        }
      }
    }
  
    .dest_nations{

      .destinations_container{
       height: 460px;
       
    
        .destinations_slider{
  
    
          .destination{
        
          
            
            .destination_preview{
  
              h2{
                font-size: var(--size_4p0rem);
              }
              p{
                
                font-size: var(--size_1p0rem);
              }
              .gen_btn{
                font-size: var(--size_1p1rem);
                margin-top: 1em;
              }
            }
    
          }
        }
      }
    }
    
  
    .featured_hotels{


    
     
        .section_head{
        
          .mixed{
        
            .normal{
              font-size: var(--size_2p2rem);
            }
            .scripted{
              font-size: var(--size_3p0rem);
            }
          
          }
        }
      

    
      .hotels_preview{
      
        .tour_slide{
          
          
    
          .tour_content{
          
    
           
            .gen_btn{
             
              width: var(--width_50);
            float: right;
              
            }
          }
        }
      }
      &>.gen_btn{
        margin: auto;
        display: block;
        text-align: center;
      width: var(--width_100);
      font-size: var(--size_1p0rem);
      }
    }

    .tour_preview{

      .preview_col{
       .container{
          height: 300px;

          .vidz_button{
            bottom: 1em;
            left: 0;
           
          }
    
        }
    
      }
      .preview_right{
        padding: 1em;
        h4{
          font-size: var(--size_1p0rem);
        }
        h1{
          font-size: var(--size_1p6rem);
        }
        h3{
          font-size: var(--size_0p9rem);
          img{
            width: 18px;
          }
        }
        h2{
          width: var(--width_100);
          text-align: center;
          font-size: var(--size_1p25rem);
          margin-bottom: 1em;
        }
        .link_btns{
          .gen_btn{
            width: 100%;
          }
        }
      }
    }
    

    .why_section{



   

      &.destination_why{
        padding: 20px;
        .reasons{
          display: block;
          width: 100%;
          margin-left: 0;
          .section_head{
            margin-bottom: 1.5em;
            .mixed{
              flex-direction: row !important;
              justify-content: flex-start;
              .normal{
                font-size: var(--size_2p2rem);
              }
              .scripted{
                font-size: var(--size_3p0rem);
              }
            }
          }
          .why_list{
          
            /* margin-bottom: 2em; */
            .why_item{
              h2{
                font-size: var(--size_1p0rem);
                span{
                  font-size: var(--size_0p9rem);
                  margin-left: 0.2em;
                }
              }
            }
          }
        }
      }
     
      
    }

    .destination_highlights{

     
      .section_head{
        .mixed{
          justify-content: flex-start;
  
          .normal{
            font-size: var(--size_2p6rem);
          }
          .scripted{
            font-size: var(--size_3p4rem);
          }
          
        }
      }
    }

    .featured_tours{
      padding: 3em 5%; 

      .feature_buttons{
        margin-bottom: 1em;
        /* gap: 2em; */
        button{
          font-size: var(--size_1p0rem);
        }
    
      }
  
      .featured_container{
        gap: 30px;

        .featured_col{

       
          .section_head{
    
            .mixed {
              /* flex-direction: column;
              h2{
                width: var(--width_100);
                display: block;
                text-align: left;
              } */
              .normal{
                font-size: var(--size_2p6rem);
              }
              .scripted{
                font-size: var(--size_4p0rem);
              }
            }
            
            
          }
         
         
          .gen_btn{
            width: 65%;
            /* font-size: var(--size_1p0rem); */
          }
  
          &.featured_col_right{

          
            .feature_slider{
             .featured_card{
          
  
              .tour_slider{
                gap: 5%;
              }
             }
            }
          }
    
         
          
        }
      }
  
    }

    .bookings{
      
      
      .form_container{
        
        .payment_form{
          
          
          .book_steps{

              /* overflow-x: hidden; */
              .step{
                p{
                  font-size: var(--size_0p95rem);
                  
                }
                .tour_info{
                  p{
                    font-size: var(--size_0p95rem) !important;
                    
                  }
                  &.card_detail{
                      
                    h4{
                      font-size: var(--size_0p95rem);
                      align-items: start;
                    }
                    span{
                      font-size: var(--size_0p85rem);
                    }
                  }
                
              }

                &.step_three{
                  .tour_info{
                      p{
                        font-size: var(--size_0p95rem) !important;
                        
                      }

                      
                    
                  }
                  
                }
                .terms{
              
              .btn{
                font-size: var(--size_0p85rem) ;
   
                
              }
              p{
                font-size: var(--size_0p85rem) !important;
                .btn{
                  font-size: var(--size_0p85rem) ;
     
                  
                }
              }
            }

              }
              
             
           
            
            
          }    
        }
        
      }

      &.management{
        .form_container{
          /* padding-top: 4em; */
          width: 90%;
          
        }
      }
      
      
    }

    .custom_table{

      .table{
        
       
        td{
          font-size: var(--size_0p85rem);
          &::before{
            font-size: var(--size_0p9rem);
          }
        }
        tfoot{

          td{
            font-size: var(--size_0p85rem);
          
          }
          .total{
            td{
              font-size: var(--size_0p85rem);
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 386px){
  
  
    .two_cols{
     
      .grid_col{
        
    
       
        .section_head{
  
          .mixed {
            .normal{
              font-size: var(--size_2p8rem);
            }
            .scripted{
              font-size: var(--size_4p0rem);
            }
          }
          
          
        }
       
      }
      
    }

    .hidden_gallery{
    
      .big_image{
        
        width: var(--width_90);
        height: var(--width_30);
       
       
        
      }
      
    }
      

    .why_section{

      &.tour_detail_why{
        .reasons{
          gap: 30px;
    
        }
      }
     
      
    }

   

    .section_head{
    
      .mixed {
  
        .normal{
          font-size: var(--size_2p0rem);
        }
        .scripted{
          font-size: var(--size_2p8rem);
          
        }
        
      }
      
      p{
  
        font-size: var(--size_1p0rem);
      }
     
      &.tour_head_section{
        margin-top: 1em;
        margin-bottom: 1em;
      }
    }

    .tour_itenary_container{
      padding: 2em 5%;
      .tour_itenary_details{
        .it_btn_toggle{
          width: 30px;
          height: 30px;
          left: 0;
          top: 0.5em;
  
          img{
            width: 20px;
            height: 20px;
          }
        }
        .col_left{
          width: 95%;
         
          h2{
            font-size: var(--size_1p0rem);
            margin-top: 0.6em;
          }
    
    
          .itenary_btn{
            padding: 0.2em 1em;
            font-size: var(--size_1p4rem);
          }
        }
       
      }
    }

    .bridge{
    

      &.bridge_at_destination{


        h2{
          
          font-size: var(--size_1p4rem);
          
        }
        
      }
    }

    .bookings{
      position: relative;
      .booking_header{
        .logo{
          flex: 1;
        }
        
        
        
       
        .links{
          width: var(--width_100);

          padding-top: 20vh;
          .nav_item{
        
            /* margin-bottom: 10px; */

  
            .nav_link{
             
              font-size: var(--size_1p4rem);
              
             
            }
            
          }
          
        }
       
        .contacts{
        
          h2{
            color: var(--text_color);
            font-weight: 500;
            &:first-child{
              padding-right: 0.6em;
              margin-right: 0.6em;
              border-right: 2px solid var(--text_color);
            }
            span{
              font-weight: 400;
            }
          }
        }
      
       
      }
  
     
     
      
     
    }
    
    
    
  }
  @media screen and (max-width: 350px){
  
    .featured_tours{
 

     
  
      .featured_container{
        gap: 30px;

        .featured_col{

       
          .section_head{
    
            .mixed {
              /* flex-direction: column;
              h2{
                width: var(--width_100);
                display: block;
                text-align: left;
              } */
              .normal{
                font-size: var(--size_2p2rem);
              }
              .scripted{
                font-size: var(--size_3p6rem);
              }
            }
            
            
          }
         
         
 
          
        }
      }
  
    }

    .why_section{

    
      &.tour_detail_why{
        .reasons{
          gap: 20px;
    
        }
      }

      &.destination_why{
     
        padding: 20px;
        .reasons{
      
    
          .section_head{
            margin-bottom: 0.5em;
            .mixed{
              flex-direction: row !important;
              justify-content: flex-start;
              .normal{
                font-size: var(--size_1p8rem);
              }
              .scripted{
                font-size: var(--size_2p4rem);
              }
            }
          }
          .why_list{
          
            /* margin-bottom: 2em; */
            .why_item{
              h2{
                font-size: var(--size_0p9rem);
                span{
                  font-size: var(--size_0p85rem);
                  margin-left: 0.3em;
                }
              }
            }
          }
        }
      }
     
      
    }

    .featured_hotels{


    
     
      .section_head{
      
        .mixed{
      
          .normal{
            font-size: var(--size_1p8rem);
          }
          .scripted{
            font-size: var(--size_2p6rem);
          }
        
        }
      }
    

  
   
  }


  .destination_highlights{

     
    .section_head{
      .mixed{
        justify-content: flex-start;

        .normal{
          font-size: var(--size_2p0rem);
        }
        .scripted{
          font-size: var(--size_2p8rem);
        }
        
      }
    }
  }

  .main_image_slider{

    .image_slider{
    
      height: 260px;
  
      
    }
    
  }


  .section_head{
 
  
    &.tour_head_section{

        .mixed {
        
          .normal{
            font-size: var(--size_2p0rem) !important;
          }
          .scripted{
            font-size: var(--size_3p4rem) !important;
            
          }
          
        }

        /* p{
          font-size: var(--size_1p2rem);
        } */
      
    }
  }

  .reviews{

    padding: 4em 5%;


    .review_grid{
     
      .grid_col{
        &.col_left{
          height: 300px;
        }
        .col_img{
          
          .col_content{
            
            .review_tit{
             
              /* padding: 4%; */
              .section_head{

                .mixed {
                  
                  .normal{
                    text-transform: uppercase;
                    font-size: var(--size_2p4rem);
                  }
                  .scripted{
                    font-size: var(--size_3p2rem);
                  }
                }
               
                
              }
              .gen_btn{
                width: var(--width_70);
             
                
              }
            }
          }
        }
  
        
        .review_slider{
          .review_card{
            .stars{
              /* margin-bottom: 0.6em; */
              img{
                width: 80px;
              }
            }
      
              h3{
                font-size: var(--size_1p6rem);
              }
              
              h4{
                font-size: var(--size_1p0rem);
              }
              h5{
                font-size: var(--size_1p0rem);
              }
          }
        }
      
  
        .review_btns{

            .arrow{
             
              width: 36px;
              height: 36px;
              
             
              svg{
                width: 17px;
                height: 17px;
               
              }
            
          }
        }
        
      }
    }
    .two_cols{

      .grid_col{
        position: relative;
        .col_img{
          .col_content{
            width: var(--width_100);
            height: var(--width_100);
            background-color: rgba(0, 31, 43, 0.4);
            position: relative;
            border-radius: 8px;
            .review_tit{
              width: var(--width_100);
              position: absolute;
              bottom: 2%;
              padding: 4%;
              .section_head{
                width: var(--width_100);
                margin-bottom: 1em;
              
                .mixed {
                  flex-direction: column;
                  h2{
                    width: var(--width_100);
                    text-align: center;
                    color: var(--body_color);
                  }
                  .normal{
                    text-transform: uppercase;
                  }
                  .scripted{
                    font-size: var(--size_6p0rem);
                  }
                }
                p{
                  width: 100%;
                  text-align: left;
                  font-size: var(--size_1p2rem);
                  margin-bottom: 0;
                }
                
              }
              .gen_btn{
                display: block;
                width: var(--width_50);
                margin: auto;
                border-color: var(--body_color);
                color: var(--body_color);
                text-align: center;
                &:hover{
                  background-color: var(--body_color);
                  color: var(--text_color);
                }
              }
            }
          }
        }
  
        
        .review_slider{
          .review_card{
            .stars{
              width: var(--width_100);
              margin-bottom: 1em;
              img{
                width: 150px;
                object-fit: cover;
                margin-bottom: 1em;
              }
            }
      
              h3{
                width: var(--width_100);
                text-align: justify;
                font-weight: 400;
                font-size: var(--size_2p8rem);
                font-family: var(--heading_family);
                margin-bottom: 1em;
              }
              h4, h5{
                text-transform: uppercase;
              }
              h4{
                font-weight: 600;
                font-size: var(--size_1p2rem);
              }
              h5{
                font-weight: 400;
                font-size: var(--size_1p0rem);
              }
          }
        }
      
  
        .review_btns{
            position: absolute;
            right: 0;
            bottom: 2%;
            column-gap: 1em;
            
            .arrow{
             
              width: 40px;
              height: 40px;
              border-radius: 50%;
              border: 1px solid var(--text_color);
              position: relative;
              transition: all 0.3s ease;
              .image_layer{
                display: none;
              }
              img{
                display: none;
              }
              svg{
                width: 20px;
                height: 20px;
                path{
                  fill: var(--text_color)
                }
              }
              &:hover{
                border: 1px solid var(--text_color);
                background-color: var(--text_color);
                svg{
                  path{
                    fill: var(--body_color)
                }
              }
            }
          }
        }
        
      }
      
    }
  
   
  }


  .captcha{
    
   
    .captcha_img{
     width: 70% !important;

     /* height: 50px; */

    
     
    }
    
   }
    
    
  }
 
  @media screen and (max-width: 320px){
  


    .filter_row{

      .filterr{
        column-gap: 1em;
        h2{
          font-size: var(--size_0p85rem);
          width: 45%;
        }
        .custom_select{
          width: 55%;
          .selected{
            input{
              font-size: var(--size_1p0rem);
              
            }
          }
          .select_options{
            .option_btn{
              font-size: var(--size_1p0rem);
             
            }
          }
        }
        
      }
    }

    .bookings{
    
      .booking_header{
        /* padding: 1em var(--width_5); */
     
       
        .logo{
          img{
            width: 40px;
          }
        }
        .contacts{
        
          h2{
            
            &:first-child{
              display: none;
            }
            
          }
        }
      
       
      }
  
      
      .form_container{
        width: var(--width_90);
        /* margin: 1em auto; */
      
       /* min-height: 70vh; */
       
        .payment_form{
       
          padding: 1.5em;
  
    
          .progress_line{
  
            span{
            
              height: 3px;
              &.current{
                background-color: var(--orange_color);
              }
  
            }
          }
          .book_steps{
            flex-direction: row;
            flex-wrap: nowrap;
         
            /* overflow-x: hidden; */
            .step{
              
              /* min-width: var(--width_100); */
              h1{
                font-size: var(--size_1p5rem);
      
              }
              
              .tour_info{
              
                &.book_start{
                  
                  gap: 6px;
                 
                }
                p{
                  margin-bottom: 0.3em;
                  span{
                    font-weight: 600;
                  }
                }
                .link_btn{
                 
                  font-size: var(--size_1p2rem);
                  /* padding: 8px 1em; */
                  
                  /* width: 200px; */
                  
                  
                }
                
                
              }
  
              .final_notification{
                position: fixed;
                z-index: 5000;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                .notification{
                  width: 500px;
                  background-color: var(--body_color);
                  border-radius: 6px;
                  border: 0.6px solid var(--text_color);
                  padding: 1em;
                  img{
                    width: 30px;
                    
                    margin-right: 1em;
                  }
                  p{
                    text-align: left;
                    margin: 0;
  
                    &.success{
                      color: var(--success_color);
                    }
                    &.failure{
                      color: var(--fail_color);
                    }
                  }
                }
  
              }
              .terms{
                width: var(--width_100);
                display: flex;
                .custom_check_box{
                  margin-right: 0.8em;
                  width: 25px;
                  height: 25px;
                  margin-top: 0;
                  position: relative;
                  .check_mark{
                    width: var(--width_100);
                    height: var(--width_100);
                    cursor: pointer;
                    position: relative;
                    z-index: 1;
                    border-radius: 50%;
                    opacity: 0;
                  }
                  label{
                    position: absolute;
                    z-index: 5;
                    background-color: var(--body_color);
                    border: 0.5px solid rgba(59, 77, 37, 0.25);
                    width: var(--width_90);
                    height: var(--width_90);
                    border-radius: 4px;
                    cursor: pointer;
                    svg{
                      width: var(--width_70);
                    }
                    &.checked{
                      background-color: var(--text_color);
                      border: 0.5px solid var(--text_color);
                    }
                  }
                }
                .btn{
                  color: var(--text_color);
                  font-size: var(--size_1p0rem);
                  border: 0;
                  transition: all 0.25s ease;
                  &:hover{
                    text-decoration: underline;
                  }
                }
              }
    
              .payment_frame {
                width: var(--width_100);
                min-width: var(--width_100);
                height: 100%;
                min-height: 100%;
                position: relative;
                .pesapal {
                  display: block;
                  height: 100%;
                  min-height: 500px;
                  max-height: 100%;
                  width: 100%;
                  position: relative;
                  iframe {
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    width: 100%;
                    height: 100%;
                    min-width: 100%;
                    min-height: 100%;
                  }
                }
               
              }
            }
            
          }    
        }
        
       
      }
      .footer_bottom{

        .f_col{
          
          &.policy_links{
            flex-direction: column;
            gap: 10px
          }
        
          
        }
        
      }

      &.management{
        .form_container{
          /* padding-top: 4em; */
          width: 90%;
          
        }
      }
      
    }
    
    
  }

  @media screen and (max-width: 310px){
  

   
    
  }