9B534B8686E580E0E01768F00155B461

at path：ROOT / wp-content / themes / kadu / assets / scss / components / _header.scss

run：R W Run

_about.scss

11.46 KB

2024-06-07 08:38:52

R W Run

_animation.scss

3.86 KB

2024-06-02 09:44:42

R W Run

_back-to-top.scss

1.11 KB

2024-04-25 09:34:42

R W Run

_blog-page.scss

26.83 KB

2024-06-11 06:51:22

R W Run

_blog.scss

11.77 KB

2024-06-06 04:16:02

R W Run

_breadcrumb.scss

2.53 KB

2024-06-12 03:56:04

R W Run

_button.scss

10.66 KB

2024-06-06 11:59:28

R W Run

_choose-us.scss

7.76 KB

2024-06-06 11:53:36

R W Run

_client.scss

4.37 KB

2024-05-28 11:54:48

R W Run

_contact-us.scss

3.81 KB

2024-06-11 08:55:10

R W Run

_counter.scss

3.1 KB

2024-05-30 05:51:10

R W Run

_course-details.scss

29.48 KB

2024-06-09 06:18:52

R W Run

_course.scss

34.5 KB

2024-06-04 06:49:00

R W Run

_cta.scss

6.27 KB

2024-06-06 05:12:08

R W Run

_error.scss

2.65 KB

2024-06-11 10:20:46

R W Run

_event-details.scss

9.96 KB

2024-06-10 05:05:32

R W Run

_event.scss

7.68 KB

2024-06-09 11:06:54

R W Run

_faq.scss

1.27 KB

2024-05-26 10:40:32

R W Run

_footer.scss

18.39 KB

2024-06-06 08:53:18

R W Run

_full-page-nav.scss

4.43 KB

2024-06-11 12:42:00

R W Run

_gallery.scss

3.55 KB

2024-06-10 06:49:40

R W Run

_header.scss

17.28 KB

2024-06-11 11:02:34

R W Run

_hero.scss

18.73 KB

2024-06-11 10:40:22

R W Run

_instructor-details.scss

5.15 KB

2024-06-09 09:15:04

R W Run

_popular-category.scss

12.24 KB

2024-06-06 09:59:08

R W Run

_preloader.scss

621 By

2024-05-28 04:48:48

R W Run

_price.scss

9.83 KB

2024-05-30 05:52:22

R W Run

_privacy-page.scss

1.33 KB

2024-06-11 09:15:36

R W Run

_search.scss

3.03 KB

2024-06-11 10:42:44

R W Run

_services.scss

10.43 KB

2024-06-03 04:06:10

R W Run

_team.scss

9.23 KB

2024-06-09 06:56:08

R W Run

_testimonial.scss

12.14 KB

2024-06-06 10:34:22

R W Run

_title.scss

2.9 KB

2024-06-02 12:32:10

R W Run

_video-course.scss

4.96 KB

2024-05-30 10:54:24

R W Run

error_log

📄_header.scss

/* 
  header-1-css-start
*/

.kd-header-1 {

&-area {
    background: #fff;
  }

&-top {
    &-row {
      gap: 35px;

@media #{$md,$xs} {
        justify-content: space-between;
      }

.kd-pr-btn-1 {
        @media #{$xs} {
          display: none;
        }
        @media #{$sm} {
          display: inline-block;
        }
      }

}

&-contact-item {
      gap: 10px;

.icon {
        flex: 0 0 auto;
        width: 45px;
        height: 45px;
        background: #22281e;
        border-radius: 50%;
        color: #fff;
        font-size: 16px;
        transition: 300ms var(--cube-1);
      }

.subtitle {
        font-size: 15px;
        color: #363539;
        margin-bottom: -2px;
      }

.link {
        font-size: 18px;
        font-weight: 800;
        line-height: 1;
        transition: 300ms var(--cube-1);

&:hover {
          color: var(--kd-clr-pr-1);
          transform: translateX(3px);
        }
      }

&:hover {
        .icon {
          background: var(--kd-clr-pr-1);
          animation: kd-jello 1s;
        }
      }
    }
  }

&-logo-1 {
    max-width: 180px;
  }

&-main {
    background: #00675f;
    position: relative;
    z-index: 1;

&::after {
      content: "";
      width: 34%;
      height: 100%;
      background: #017067;
      position: absolute;
      top: 0;
      right: 0;
      z-index: -1;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 7% 100%);
    }
    
    @media #{$md,$xs} {
      padding: 10px 0;
    }

&-row {
      gap: 15px;
    }

&-home-icon {
      display: flex;
      width: 44px;
      height: 44px;
      justify-content: center;
      align-items: center;
      background: var(--kd-clr-pr-1);
      border-radius: 50%;
      color: #fff;
      font-size: 16px;
    }
  }

&-action-link {
    gap: 10px;

.gap-left {
      margin-left: 35px;
    }
  }
}

.main-navigation {
  .navbar-nav {
    display: inherit;
    li {
      display: inline-block;
      position: relative;

&:not(:last-child) {
        margin-right: 45px;

@media #{$xl,$lg} {
          margin-right: 20px;
        }
      }
      
      &:is(.dropdown) {
        > a {
          padding-right: 15px;
          &::before {
            content: "\f0d7";
            font-family: "Font Awesome 6 Pro";
            font-weight: 700;
            position: absolute;
            font-size: 14px;
            right: 0;
            top: 49%;
            transform: translateY(-50%);
            transition: 400ms var(--cube-1);
          }
        }
      }

a {
        position: relative;
        z-index: 1;
        font-family: var(--kd-font-pr-1);
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
        color: #fff;
        padding: 26px 0;
        display: inline-block;
        text-transform: capitalize;
        line-height: 1;
        transition: 400ms var(--cube-1);

&:is(.is-active) {
          color: var(--kd-clr-sd-1);
        }
      }

.dropdown-menu {
        left: 0;
        top: 100%;
        z-index: 100;
        margin: 0px;
        padding: 20px 0px;
        height: auto;
        min-width: 250px;
        display: block;
        border: none;
        border-top: 2px solid var(--kd-clr-sd-1);
        box-shadow: 0 10px 50px 0 rgb(0 0 0 / 5%);
        border-radius: 0;
        position: absolute;
        background: #017067;
        border-radius: 2px;
        text-align: left;
        opacity: 0;
        visibility: hidden;
        transform: translateY(15px) translateZ(0);
        transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1), visibility 0.4s cubic-bezier(0.19, 1, 0.22, 1), transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
        
        li {
          display: block;
          margin: 0;
          position: relative;

a {
            color: #fff;
            width: 100%;
            font-weight: 500;
            display: block;
            padding: 10px 20px;
            font-size: 16px;

&:is(.is-active) {
              color: var(--kd-clr-sd-1);
            }
          }

&:is(.dropdown) {
            > a {
              &::before {
                right: 20px;
                top: 49%;
              }
            }
          }

.dropdown-menu {
            top: 0;
            left: 100%;
            min-width: 250px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(15px) translateZ(0);
            transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1), visibility 0.4s cubic-bezier(0.19, 1, 0.22, 1), transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);

}

&:hover {
            .dropdown-menu {
              opacity: 1;
              visibility: visible;
              transform: translateY(0px) translateZ(0);
            }

> a {
              color: var(--kd-clr-sd-1);
            }
          }
        }
      }

&:hover {
        > a {
          color: var(--kd-clr-sd-1);

}
        .dropdown-menu {
          opacity: 1;
          visibility: visible;
          transform: translateY(0px) translateZ(0);
        }
      }
    }
  }
}

/* 
  header-1-css-end
*/

/* 
  header-2-css-start
*/

.kd-header-2 {

&-area {
    position: absolute;
    z-index: 7;
    width: 100%;
    left: 0;
    top: 25px;
  }

&-top {
    display: flex;
    gap: 20px;
    padding: 10px 50px;
    background: var(--kd-clr-sd-1);
    border-radius: 100px 100px  0 0;
    max-width: 630px;
    margin-left: auto;
    margin-right: 30px;

@media #{$xs} {
      display: none;
    }

&-contact {
      display: flex;
      align-items: center;
      gap: 10px 20px;
      flex-wrap: wrap;

li {
        font-family: var(--kd-font-pr-1);
        color: #131313;
        font-weight: 700;
        font-size: 14px;
        line-height: 1;

i {
          margin-right: 3px;
        }

a {
          display: inline-block;
          transition: .3s var(--cube-1);

&:hover {
            color: var(--kd-clr-pr-1);
            transform: translateX(3px);
          }
        }
      }
    }
  }

&-main {
    background: #fff;
    margin-left: -18px;
    margin-right: -18px;
    padding: 0 30px;
    border-radius: 53px;
    gap: 30px;

@media #{$md,$xs} {
      padding: 15px 15px;
      margin-left: 0px;
      margin-right: 0px;
    }
  }

&-action-link {

gap: 26px;

.kd-search-btn-1 {
      width: unset;
      height: unset;
      color: #000;
      background: transparent;

@media #{$lg,$md,$xs} {
        display: none;
      }

&:hover {
        color: var(--kd-clr-pr-1);
      }
    }

.kd-cart-btn-1 {
      width: unset;
      height: unset;
      color: #000;
      background: transparent;

@media #{$lg,$md,$xs} {
        display: none;
      }

&:hover {
        color: var(--kd-clr-pr-1);
      }
    }

.ftc-mobile-menu-btn-1 {
      height: 20px;

@media #{$over,$xxxl,$xxl,$xl,$lg} {
        display: none;
      }

span {
        border-radius: 3px;
        background: var(--kd-clr-pr-1);
        height: 4px;
      }
    }

.kd-pr-btn-1  {

@media #{$xs} {
        display: none;
      }

@media #{$sm} {
        display: inline-block;
      }

}

&-bottom {
    margin-left: 25px;
    padding: 10px 50px;
    background: var(--kd-clr-sd-1);
    border-radius: 0 0 100px 100px;
    display: inline-block;

@media #{$xs} {
      display: none;
    }

&-text {
      font-size: 15px;
      color: #282828;
      font-weight: 600;
    }
  }

}

.kd-header-2-main {
  .main-navigation {
    .navbar-nav {
      li {

a {
          font-size: 16px;
          font-weight: 800;
          color: #191919;
          padding: 42px 0;
          text-transform: uppercase;

&:is(.is-active) {
              color: var(--kd-clr-sd-1);
          }
        }

&:is(.dropdown) {

> a {
            padding-right: 15px;
          }
        }

.dropdown-menu {
          background: #fff;
          border-color: var(--kd-clr-pr-1);

li {
            a {
              color: #191919;
              font-weight: 600;
            }

&:hover {
              > a {
                color: var(--kd-clr-sd-1);
              }
            }
          }
        }

&:hover {
          a {
            color: var(--kd-clr-sd-1);
          }
        }

}
    }
  }  
}

.kd-social-link-1 {
  display: flex;
  align-items: center;
  gap: 10px 20px;
  flex-wrap: wrap;

.link {
    font-size: 16px;
    color: #131313;
    line-height: 1;
    display: inline-block;
    &:hover {
      color: var(--kd-clr-pr-1);
    }
  }
}

/* 
  header-2-css-end
*/

/* 
  header-3-css-start
*/
.kd-header-3 {
  &-area {
    position: absolute;
    top: 25px;
    left: 0;
    width: 100%;
    z-index: 2;
  }

&-top {
    display: flex;
    position: relative;
    z-index: 1;
    background: #014f4b;
    margin-right: 50px;
    margin-left: 50px;
    padding: 15px 60px;
    border-radius: 200px 200px 0 0;

@media #{$xs} {
      display: none;
    }

.kd-header-2-top-contact {
      gap: 10px 40px;

li {
        color: #fff;
        font-size: 15px;

a {
          &:hover {
            color: var(--kd-clr-sd-1);
          }
        }
      }
    }

.kd-social-link-1 .link {
      color: #fff;
      transition: .3s var(--cube-1);

&:hover {
        color: var(--kd-clr-sd-1);
        transform: translateX(3px);
      }
    }

}

&-logo-1 {
    max-width: 170px;
  }

&-main {
    background: #fff;
    border-radius: 50px;
    padding: 0 60px;

@media #{$lg} {
      padding: 0px 30px;
    }

@media #{$md,$xs} {
      padding: 15px 30px;
    }
  }

&-action-link {
    gap: 30px;

.kd-land-1-btn {
      @media #{$xs} {
        display: none;
      }
    }

.ftc-mobile-menu-btn-1 {
      @media #{$over,$xxxl,$xxl,$xl,$lg} {
        display: none;
      }
    }

.kd-cart-btn-1 {
      width: auto;
      height: auto;
      color: #0d112f;
      background: transparent;

@media #{$xs} {
        display: none;
      }

@media #{$sm} {
        display: inline-block;
      }

&:hover {
        color: var(--kd-clr-sd-1);
      }
    }

.kd-search-btn-1 {
      width: auto;
      height: auto;
      color: #0d112f;
      background: transparent;

@media #{$xs} {
        display: none;
      }

@media #{$sm} {
        display: inline-block;
      }

&:hover {
        color: var(--kd-clr-sd-1);
      }
    }

.ftc-mobile-menu-btn-1 span {
      display: block;
      background: var(--kd-clr-pr-1);
    }

}

&-bottom {
    flex-wrap: wrap;
    gap: 10px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    background: #014f4b;
    margin-right: 50px;
    margin-left: 50px;
    padding: 15px 60px;
    border-radius: 0 0 200px 200px;

@media #{$md,$xs} {
      display: none;
    }

&-link {
      font-size: 15px;
      transition: .2s var(--cube-1);
      i {
        margin-right: 3px;
      }
      &:hover {
        color: var(--kd-clr-sd-1);
        transform: translateX(3px);
      }
    }

}

.kd-header-3-main {
  .main-navigation {
    .navbar-nav {
      li {
        a {
          font-size: 18px;
          font-weight: 800;
          color: #282828;
          padding: 41px 0;

&:is(.is-active) {
            color: var(--kd-clr-sd-1);
          }
        }

&:is(.dropdown) {
          > a {
            padding-right: 15px;
          }
        }

.dropdown-menu {
          li {
            a {
              font-weight: 600;
            }
          }
        }

&:hover {
          > a {
            color: var(--kd-clr-sd-1);
          }
        }

}
    }
  }
}
/* 
  header-3-css-end
*/

/* 
  header-4-css-start
*/
.kd-header-4 {
  &-area {
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;

&::after {
      content: "";
      width: 28%;
      height: 100%;
      top: 0;
      left: 0;
      background: var(--kd-clr-pr-4);
      clip-path: polygon(0 0, 91% 0%, 100% 100%, 0% 100%);
      position: absolute;
      z-index: -1;

@media #{$xxxl} {
        width: 25%;
      }

@media #{$xxl} {
        width: 22%;
      }

@media #{$xl} {
        width: 20%;
      }

@media #{$lg} {
        width: 22%;
      }

@media #{$md} {
        width: 32%;
      }

@media #{$xs} {
        width: 68%;
      }

@media #{$sm} {
        width: 40%;
      }

@media only screen and (min-width: 2000px) and (max-width: 2200px) {
        width: 30%;
      }

@media only screen and (min-width: 2201px) and (max-width: 2400px) {
        width: 32%;
      }

@media only screen and (min-width: 2401px) and (max-width: 2600px) {
        width: 34%;
      }

@media only screen and (min-width: 2601px) and (max-width: 2800px) {
        width: 36%;
      }

@media only screen and (min-width: 2801px) and (max-width: 3000px) {
        width: 38%;
      }

@media only screen and (min-width: 3001px) and (max-width: 6000px) {
        width: 40%;
      }

@media only screen and (min-width: 6001px) and (max-width: 10000px) {
        width: 48%;
      }
    }
  }

&-row {
    gap: 20px;
    padding: 15px 0;
  }

&-logo-1 {
    max-width: 180px;
  }

&-action-link {
    gap: 30px;

.ftc-mobile-menu-btn-1 {
      @media #{$over,$xxxl,$xxl,$xl,$lg} {
        display: none;
      }
    }

.kd-pr-btn-2  {
      @media #{$xs} {
        display: none;
      }
      @media #{$sm} {
        display: inline-block;
      }
    }
  }
}

.main-navigation {
  &:is(.has-header-4) {
    .navbar-nav {
      li {

&:not(:last-child) {
          margin-right: 40px;

@media #{$lg} {
            margin-right: 20px;
          }
        }

a {
          font-family: var(--kd-font-barlow);
          text-transform: uppercase;
          padding: 37px 0;

&::after {
            content: "";
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: var(--kd-clr-sd-4);
            position: absolute;
            left: -9px;
            top: 51%;
            transform: translateY(-50%) scale(0);
            z-index: -1;
            transition: .3s var(--cube-1);
          }

&:is(.is-active) {
            color: var(--kd-clr-pr-4) !important;

&::after {
              transform: translateY(-50%) scale(1);
            }
          }

}

&:is(.dropdown) > a {
          padding-right: 15px;
        }

.dropdown-menu {
          background: #000;
          border-color: var(--kd-clr-pr-4);
          li {
            margin-right: 0;

a {
              font-weight: 600;
              &::after {
                width: 15px;
                height: 15px;
                left: 15px;
              }
            }

&:hover {
              > a {
                color: var(--kd-clr-pr-4);
                font-weight: 600;
              }
            }
          }
        }

&:hover {
          > a {
            color: var(--kd-clr-pr-4);

&::after {
              transform: translateY(-50%) scale(1);
            }
          }
        }

}
    }
  }

}

/* 
  header-4-css-end
*/

/* 
  sticky-header-css-start
*/
.txa_sticky_header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  transition: 300ms ease-in-out;
  z-index: 8;

&:is(.kd-header-1-area) {
    top: 6px;
    &:is(.txa_sticky) {
      transform: translateY(-150%);

&:is(.txa_sticky_show) {
        top: 0;
        transform: translateY(0%);
      }
    }

}

&:is(.kd-header-2-area) {
    top: 25px;
    &:is(.txa_sticky) {
      transform: translateY(-150%);
      &:is(.txa_sticky_show) {
        transform: translateY(0%);
      }
    }

}

&:is(.kd-header-3-area) {
    top: 25px;
    &:is(.txa_sticky) {
      transform: translateY(-150%);
      &:is(.txa_sticky_show) {
        transform: translateY(0%);
      }
    }

}

&:is(.kd-header-4-area) {
    &:is(.txa_sticky) {
      transform: translateY(-150%);
      background-color: #152028;
      &:is(.txa_sticky_show) {
        transform: translateY(0%);
      }
    }

}

/* 
  sticky-header-css-end
*/