header.header{
  background-color: #fff;
    height: 85px;
    position: sticky;
    top:0;
    width: 100%;
    z-index: 99;
    padding: 0;
   /*  border-bottom:8px solid $sColor; */

   @include xl-up{
    padding: 25px 0;
    height: 135px;
   }

    &::after {
      content: "";
      background-color: $pColor;
      width: 100%;
      height: 7px;
      display: block;
      transform: translate(0px, -15px);

      @include xl-up{
        transform: translate(0px, 0);
      }
  }

    .d_flex{
      align-items: center;
      justify-content: flex-end;
    }

    .branding{
        display: flex;
        height: 100px;
        justify-content: flex-start;

        @include xl-up{
          align-items: center;
        }


            a{
        
            display: flex;
            align-items: center;
            white-space: nowrap;
            gap: 15px;
            color:$tColor;
            
        }


        .tagline_wrapper{
             display: flex;
                    flex-direction: column;
            span.title{

              font-family:$fjalla;
              font-size: 32px;
              text-transform: uppercase;
              font-weight: bold;
                  line-height: 1;

                  @include xl-up{
                     font-size: 45px;
                  }

              }
              span.tagline{
                  font-size: 12px;

                  @include xl-up{
                    font-size: 22px;
                  }

              }
        }

        img{
          width: 70px;
          z-index: 999;
          position: relative;
          max-width: 100%;
          margin-top: -12px;
       
          @include xl-up{
               width: 115px;
                  margin-top: -15px;
          }

        }

       
    }

    .box_wrap {
        border: 1px solid $tColor;
        display: inline-flex;
        padding: 6px 15px;
        min-width: 128px;
        height: 40px;
        position: relative;
        justify-content: center;
        cursor: pointer;
        transition:all 0.3s ease;
        align-items: center;
        color:#000;

        @include xxl-up{
          padding: 6px 30px;
        }

        &:hover{
            background-color: $sColor;
            transition:all 0.3s ease;
          
            a{
              color:#000 !important;
            }

            
        }


        &:before{
            content:"";
            width: 15px;
            height: 15px;
            background-color: $tColor;
            display: block;
            position: absolute;
            left: -8px;
            top: 10px;
        }
        a{
            color:#000;
          /*   font-weight: 600; */
            font-size: 16px;
            font-family: $franklinM;
             text-transform: uppercase; 

          
        }
    }

    .right_wrapper {
        display: flex;
        gap: 15px;
        flex-direction: column;
        align-items: flex-end;
    }
    
    .top_wrapper {
        display: flex;
        gap: 15px;
        flex-direction: column;
        

        @include xl-up{
            flex-direction: row;
        }

        @include xxl-up{
          gap: 25px;
      }


    }
    
    .contact_wrap {
        display: flex;
        gap: 10px;
        align-items: center;
        

        &.tel_wrap{
            a{
             white-space: nowrap;
                 font-size: 22px; 
              //font-size: 18px;
                color:$pColor;
                line-height: 1.2;
                 font-family: $times; 
                font-weight: bold;
            }
            .wrap{
              display: flex;
              flex-direction: column;
              line-height: 1;
            }
        }
        &.email_wrap{

            span{
                display: flex;
                flex-direction: column;
                line-height: 1.1;

                a{
                    white-space: nowrap;
                    font-size: 16px;
                    color:#000;
                    font-weight: 500;
                    font-family: $arsenal;
                    
                }
            }
            span.tagline{
                  font-size: 12px;
                  color: $tColor;

                  @include xl-up{
                    font-size: 25px;
                  }

              }
            
        }
        
      


    }
    
    .icon_wrap {
        display: flex;
        width: 38px;
        height: 38px;
        background-color: $sColor; 
        min-width: 38px;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        border:1px solid $sColor;
       

    }



    
   .nav_wrapper{
/*       transform: translate(0px, 17px); */
    .menu_ul{
        padding:0;
        margin:0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        list-style: none;
        
        >li{
           // padding:0 25px;
            padding:16px 0;
   /*          border-right: 1px solid $sColor;  */
    cursor: pointer;

           
           > a{
                color:#000;
                font-size: 15px;
                transition: all 0.3s ease;
                font-weight: 500;
                display: flex;
                align-items: center;
                border-right: 1px solid $sColor;
                padding: 0 15px;

                @include xxl-up{
                   padding: 0 25px;
                }

                

                @include xxl-up{
                  font-size: 16px;
                }

                &:hover{
                    color:$pColor;
                    transition: all 0.3s ease;
                }
              
                
            }

            &:last-child{
              a{
                border:none;
                padding-right: 0;
              }
          
          }

            &.dropdown{
              .dropdown-menu{
               border-radius: 0;
               padding:0;
               column-count: 2;
               border:none;
               //margin-left: -100%;
               column-gap: 0px;
               border-top: 5px solid $sColor;
               max-height: 0;
               overflow: hidden;
               visibility: hidden;
               transition:all 0.1s ease-in-out;
               display: block !important;
               top:55px;


               li{
                padding:0;
                max-width: 250px;
                background-color: #fff;
                border-bottom: 1px solid;
                display: flex;
                align-items: center;
                padding: 0 10px;
                transition: all 0.3s ease;

                &:hover{
                  background-color:  $sColor;
                  transition: all 0.3s ease;
              }

                &::before {
                  content: "";
                  width: 10px;
                  height: 10px;
                  display: inline-flex;
                  min-width: 10px;
                  background-color: $pColor;
                }

                  a{
                    color:#000;
                    font-size: 14px;
                    transition: all 0.3s ease;
                    padding:8px 0 8px 8px; 
                    display: block;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;

                      &:hover{
                        color:#000;
                        transition: all 0.3s ease;
                    }
                  }
               }

                .dropdown-item:focus, .dropdown-item:hover{
                    background-color:  transparent;
                }
              }
            
              
            }
        }
    }
} 
 

/* 
    .nav_wrapper{
        .menu_ul{
            padding:0;
            margin:0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            list-style: none;
            
            >li{
               // padding:0 25px;
                padding:0 13px;
                border-right: 1px solid $sColor;

                @include xxl-up{
                  padding:0 18px;
                }

                &:last-child{
                    border:none;
                    padding-right: 0;
                }
                a{
                    color:#fff;
                    font-size: 15px;
                    transition: all 0.3s ease;
                    font-weight: 500;
                    display: flex;
                    align-items: center;

                    @include xxl-up{
                      font-size: 16px;
                    }

                    &:hover{
                        color:$sColor;
                        transition: all 0.3s ease;
                    }
                  
                    
                    
                }
            &.dropdown{
              .dropdown-menu{
               border-radius: 0;
               padding:0;
               //column-count: 2;
               border:none;
               //margin-left: -100%;
               column-gap: 0px;
               border-top: 5px solid $sColor;
               max-height: 0;
               overflow: hidden;
               visibility: hidden;
               transition:all 0.1s ease-in-out;
               display: block !important;
               top:55px;


               li{
                padding:0;
                max-width: 250px;
                background-color: #fff;
                border-bottom: 1px solid;
                display: flex;
                align-items: center;
                padding: 0 10px;
                transition: all 0.3s ease;

                &:hover{
                  background-color:  $sColor;
                  transition: all 0.3s ease;
              }

                &::before {
                  content: "";
                  width: 10px;
                  height: 10px;
                  display: inline-flex;
                  min-width: 10px;
                  background-color: $pColor;
                }

                  a{
                    color:#000;
                    font-size: 14px;
                    transition: all 0.3s ease;
                    padding:8px 0 8px 8px; 
                    display: block;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;

                      &:hover{
                        color:#fff;
                        transition: all 0.3s ease;
                    }
                  }
               }

                .dropdown-item:focus, .dropdown-item:hover{
                    background-color:  transparent;
                }
              }
            
              
            }
            }
        }
    } */
 

 .dropdown:hover>.dropdown-menu {
  max-height: 500px !important;
  visibility: visible !important;
  transition:all 0.5s ease-in-out !important;
}

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

    
  // Mobile Menu Start
  nav.mobile_nav {
    position: fixed;
    background-color: $pColor;
    width: 320px;
    height: 100%;
    z-index: 999;
    right: -100%;
    top:0;
    transition: all 0.3s ease;
    padding: 24px 30px 0;
    overflow-y: auto;

    .logo{
      width: 180px;
    /*   transform: translate(-15px, 15px); */
    margin: 0 auto;
    display: block;
    }

    .menu_ul{
      padding: 0;
      list-style: none;
      margin: 20px 0 30px;

      >li{
        a{
          border-bottom: 1px solid $tColor;
          display: block;
          color: #fff;
          padding: 5px 0;
          font-size: 17px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          width: 100%;

          span{
            font-size: 12px;
            top: -2px;
            background-color: #ff4646;
            border-radius: 2px;
            padding: 2px 4px 2px;
            margin-left: 5px;
            color: $sColor;
            position: relative;
          }

          &:hover{
            color:$sColor;
          }
        }

        .collapse_a:after{
          display: inline-block;
          margin-left: 0.255em;
          vertical-align: 0.255em;
          content: "";
          border-top: 0.3em solid;
          border-right: 0.3em solid transparent;
          border-bottom: 0;
          border-left: 0.3em solid transparent;
        }

        .collapseExample{
          ul{
            list-style: none;
            padding-left: 15px !important;

            li{
              a{
                &:focus,  &:hover, &:visited, &:active{
                  background-color: transparent;
                }
              }
            }
          }
          
        }
      }

    }

    p {
      &.underline_text{
          line-height:1.4;
          text-align: left;
      }
        span.highlight{
          font-size: 14px;
          color:$black;
     

          svg{
            stroke-width: 2px;
          }
        }
    }
    h4{
      color: $black;
      font-size: 15px;
      text-transform: uppercase;
      margin: 30px 0 0;
    }

    .contact_details {
      p {
        margin: 10px 0;
        font-size: 14px;
        color:$black;
  
        a {
          color: $black;
        }
  
        
      }

      .whatsapp-icon-xs{
        cursor: pointer;
        display: inline-block;
        z-index: 9999;
        vertical-align: middle;
  
        svg{
          fill: #f6f4f3;
          width: 30px;
          height: 30px;
          background-color: #4dc247;
          overflow: hidden;
          border-radius: 50%;
          padding: 3px;
        }
      }
    }
  
    // Social Icons start
    .social_icons {
      margin: 20px 0;
      ul {
        padding: 0;
        margin: 0;
        list-style: none;
  
        li {
          margin: 0 12px 0 0;
          display: inline-block;
          vertical-align: top;
  
          a {
            border:none;
            svg {
              fill: $black;
              width: 25px;
              height: 25px;

              &:hover{
                fill: $blue;
                transition: all 0.3s ease;
              }
            }
          }
        }
      }
    } // Social Icons End

    &.open{
      right:0;
      transition: all 0.3s ease;
    }


    .box_wrap{
      a{
        color:#fff;
      }
    }

    .contact_wrap a{
      color:#fff;
    }
}
  .hamburger_wrapper {
    position: fixed;
    right: 10px;
    top: 30px;
    z-index: 9999;
    width: 30px;
    height: 25px;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    cursor: pointer;

 

    &.open {

      .hamburger {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);

        &:after {
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
          bottom: 0;
          width: 100% !important;
        }

        &:before {
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
          top: 0;
          width: 100% !important;
        }
      }
    }
    &:hover{
      .hamburger {
        &:before{
          width: 100%;
          transition: .2s ease-in-out;
        }
      }
    }
  }
  
  .hamburger {
    position: absolute;
    top: 10px;
    left: 0;
    width: 30px;
    height: 2px;
    background:  $tColor;
    display: block;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transition: .5s ease-in-out;
    transition: .2s ease-in-out;

    &:after, &:before {
      -webkit-transition: .2s ease-in-out;
      transition: .2s ease-in-out;
      content: "";
      position: absolute;
      display: block;
      width: 80%;
      height: 100%;
      background: $tColor;
      right:0;  
    }
    &:before { top: -10px; }
    &:after { bottom: -10px; }
  
  }  
  // Mobile Menu End

}
.second_menu_wrapper {
  background-color: $sColor;
  width: 100%;
  height: 60px;
  margin-top: 15px;

  ul.second_menu_ul {
    display: flex;
    list-style: none;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 20px;
    color: #fff;
    margin: 0;
    padding: 0;

    li{
      a {
        color: #fff;
        padding: 0 15px;
        display: block;
        font-family: $fjalla;
        white-space: nowrap;
/*         border-right:1px solid #fff; */
        text-transform: uppercase;
        font-size: 18px;

        @include xxl-up{
          padding: 0 22px;
        }
      }

      &:last-child a{
        border-right:none;
      }
    }
   
}

}

