/* SITE CHROME STYLES (Navigation, Header, Footer, Offcanvas) */

.body-overlay{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 996;
  background: rgba(16, 48, 42, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.body-overlay.apply{
  opacity: 1;
  visibility: visible;
  transition: opacity 0.22s ease, visibility 0s;
}
.body-overlay:hover{
  cursor: url(../img/cross-icon/cross-out.png), pointer;
}

.tp-offcanvas{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 997;
  width: 450px;
  padding: 50px;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.88), rgba(244, 251, 239, 0.78));
  -webkit-backdrop-filter: blur(26px) saturate(175%);
  backdrop-filter: blur(26px) saturate(175%);
  border-left: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: -24px 0 70px rgba(16, 48, 42, 0.18), inset 1px 0 0 rgba(255, 255, 255, 0.7);
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  will-change: transform;
  transition: -webkit-transform 0.28s ease, transform 0.28s ease, opacity 0.22s ease, visibility 0s linear 0.28s;
}
.tp-offcanvas::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 18% 6%, rgba(255, 255, 255, 0.9), transparent 34%), radial-gradient(circle at 100% 34%, rgba(180, 231, 23, 0.18), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent 48%);
}
.tp-offcanvas > *{
  position: relative;
  z-index: 1;
}
@media (max-width: 574.98px){
  .tp-offcanvas{
    width: 100%;
    padding: 30px 22px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px){.tp-offcanvas{
    width: 400px;
    padding: 40px;
  }
}
.tp-offcanvas.opened{
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition: -webkit-transform 0.28s ease-out, transform 0.28s ease-out, opacity 0.2s ease, visibility 0s;
}
.tp-offcanvas-top{
  margin-bottom: 32px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 16px 34px rgba(16, 48, 42, 0.1);
}
.tp-offcanvas-close-btn button{
  color: var(--tp-common-black);
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 10px 24px rgba(16, 48, 42, 0.12);
}
.tp-offcanvas-close-btn button:hover{
  transform: rotate(90deg);
}
.tp-offcanvas-menu ul{
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 18px 42px rgba(16, 48, 42, 0.1);
}
.tp-offcanvas-menu ul li{
  list-style: none;
  border-bottom: 0;
}
.tp-offcanvas-menu ul li + li{
  margin-top: 8px;
}
.tp-offcanvas-menu ul li a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 14px 18px;
  color: var(--tp-common-black);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--tp-ff-inter);
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}
.tp-offcanvas-menu ul li a::after{
  content: "\f061";
  font-family: "Font Awesome 6 Pro";
  font-size: 13px;
  font-weight: 400;
  opacity: 0;
  transform: translateX(-6px);
  transition: all 0.3s ease;
}
.tp-offcanvas-menu ul li a:hover,
.tp-offcanvas-menu ul li a:focus-visible,
.tp-offcanvas-menu ul li a.is-active,
.tp-offcanvas-menu ul li a[aria-current="page"]{
  color: var(--tp-common-black-1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(246, 255, 230, 0.58));
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 30px rgba(16, 48, 42, 0.13);
  transform: translateX(4px);
}
.tp-offcanvas-menu ul li a:hover::after,
.tp-offcanvas-menu ul li a:focus-visible::after,
.tp-offcanvas-menu ul li a.is-active::after,
.tp-offcanvas-menu ul li a[aria-current="page"]::after{
  opacity: 1;
  transform: translateX(0);
}
.tp-offcanvas-menu ul li a:active{
  box-shadow: inset 0 2px 10px rgba(16, 48, 42, 0.16), 0 8px 20px rgba(16, 48, 42, 0.1);
  transform: translateX(4px) scale(0.98);
}
.tp-offcanvas-contact{
  margin-top: 28px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 14px 32px rgba(16, 48, 42, 0.09);
}
.tp-offcanvas-title.sm{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--tp-common-black);
  text-transform: uppercase;
}
.tp-offcanvas-contact ul li{
  list-style: none;
}
.tp-offcanvas-contact ul li a{
  color: #414144;
  font-size: 16px;
  font-family: var(--tp-ff-inter);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px){.tp-header-lg-spacing{
    padding: 15px 0px;
  }
}
@media (max-width: 574.98px){.tp-header-lg-spacing{
    padding: 8px 0px;
  }
}
.tp-header-sidebar-btn span{
  height: 2px;
  width: 25px;
  display: block;
  margin: 6px auto;
  background: var(--tp-common-black);
}
.tp-header-sidebar-btn:hover span{
  animation: bar_anim 0.8s cubic-bezier(0.44, 1.1, 0.53, 0.99) 1 forwards;
}
.tp-header-sidebar-btn:hover span:nth-child(2){
  animation-delay: 0.1s;
}
.tp-header-it-bg{
  border-radius: 60px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(252, 255, 252, 0.7));
  -webkit-backdrop-filter: blur(8px) saturate(170%);
  backdrop-filter: blur(8px) saturate(170%);
  transform: translateZ(0);
  will-change: transform;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 20px 60px rgba(16, 48, 42, 0.12);
  padding: 8px 24px;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}
.tp-header-it-bg::before{
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.72), transparent 32%), linear-gradient(115deg, rgba(255, 255, 255, 0.32), transparent 48%);
}
.tp-header-it-bg > .row{
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px){.tp-header-it-bg{
    margin-top: 0;
    padding: 10px 33px 10px 33px;
  }
}
@media (max-width: 574.98px){.tp-header-it-bg{
    padding: 8px 18px;
    border: none;
  }
}
.tp-header-it-btn{
  padding: 12px 26px;
  box-shadow: inset 0 4px 16px 1px #0c211b;
}
.tp-header-it-btn:focus,
.tp-header-it-btn:visited{
  color: var(--tp-grey-5);
  background: var(--tp-common-black-1);
  box-shadow: inset 0 4px 16px 1px #0c211b;
}
.tp-header-it-btn:hover{
  background: var(--tp-common-green-2);
  box-shadow: inset 0 4px 16px 1px var(--tp-common-green-2);
}
.tp-header-it-btn:active,
.tp-header-it-btn.is-active,
.tp-header-it-btn[aria-current="page"]{
  color: var(--tp-common-black-1);
  background: rgba(180, 231, 23, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 12px 28px rgba(16, 48, 42, 0.16);
}
.header-transparent{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  width: 100%;
}
.tp-main-menu nav > ul > li{
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0 4px;
  position: relative;
}
.tp-main-menu,
.tp-main-menu nav{
  height: 100%;
  align-items: center;
}
.tp-main-menu nav{
  display: flex;
}
.tp-main-menu nav > ul{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 574.98px){.tp-main-menu nav > ul > li{
    margin: 0 4px;
  }
}
.tp-main-menu nav > ul > li > a{
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--tp-common-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  line-height: 1;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  z-index: 1;
}
.tp-main-menu nav > ul > li > a::before{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.26));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.tp-main-menu nav > ul > li > a:hover,
.tp-main-menu nav > ul > li > a:focus-visible,
.tp-main-menu nav > ul > li > a.is-active,
.tp-main-menu nav > ul > li > a[aria-current="page"]{
  color: var(--tp-common-black-1);
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 32px rgba(16, 48, 42, 0.13);
  transform: translateY(-1px);
}
.tp-main-menu nav > ul > li > a:hover::before,
.tp-main-menu nav > ul > li > a:focus-visible::before,
.tp-main-menu nav > ul > li > a.is-active::before,
.tp-main-menu nav > ul > li > a[aria-current="page"]::before{
  opacity: 1;
}
.tp-main-menu nav > ul > li > a:active{
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 2px 10px rgba(16, 48, 42, 0.18), 0 8px 18px rgba(16, 48, 42, 0.1);
  transform: translateY(1px) scale(0.98);
}
.tp-main-menu nav > ul > li > a > span{
  color: var(--tp-grey-2);
  display: inline-block;
  margin-left: 2px;
  transition: all 0.4s ease;
}
.tp-main-menu nav ul li{
  position: relative;
}
.tp-main-menu-it > nav > ul > li > a{
  font-family: var(--tp-ff-inter);
  color: var(--tp-common-black-1);
  min-height: 40px;
  padding: 0 18px;
}
.header-sticky{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  width: 100%;
  z-index: 10;
  visibility: visible;
  background: transparent;
  box-shadow: none;
  animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
  -webkit-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
}
.header-sticky.tp-header-blur::after{
  content: none;
}
.header-sticky .tp-header-it-bg{
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 16px 46px rgba(16, 48, 42, 0.16);
}
.header-sticky .tp-main-menu-it > nav > ul > li > a{
  min-height: 40px;
  padding: 0 18px;
}
.tp-header-dropdown nav ul li{
  list-style: none;
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px){.tp-footer-widget p br{
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px){.tp-footer-widget a br{
    display: none;
  }
}
.tp-footer-copyright p span{
  transform: translateY(-2px);
  display: inline-block;
}
.tp-footer-cst-bottom{
  padding-top: 26px;
  padding-bottom: 14px;
}
.tp-footer-it-copyright{
  color: rgba(243, 241, 242, 0.8);
}
.tp-footer-it-copyright a{
  color: #f3f1f2;
}
.tp-footer-it-bottom{
  border-top: 1px solid rgba(243, 241, 242, 0.1);
}
.tp-footer-minimal{
  padding-top: clamp(72px, 8vw, 112px);
  margin-top: -2px;
  background: var(--tp-common-black-3);
  box-shadow: 0 -2px 0 var(--tp-common-black-3);
  color: var(--tp-common-white);
  overflow: hidden;
}
.tp-footer-minimal::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--tp-common-black-3) 0%, var(--tp-common-black-3) 24%, rgba(18, 18, 18, 0) 52%),
    radial-gradient(circle at 18% 58%, rgba(197, 255, 34, 0.018), rgba(197, 255, 34, 0) 40%);
  pointer-events: none;
  z-index: 0;
}
.tp-footer-minimal-main{
  position: relative;
  z-index: 1;
  padding-bottom: clamp(40px, 5vw, 68px);
}
.tp-footer-minimal-brand p{
  max-width: 430px;
  margin-bottom: 0;
  font-family: var(--tp-ff-inter);
  font-size: 18px;
  line-height: 1.55;
  color: rgba(243, 241, 242, 0.72);
}
.tp-footer-minimal-heading{
  margin-bottom: 18px;
  font-family: var(--tp-ff-inter);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(243, 241, 242, 0.92);
}
.tp-footer-minimal-links ul{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0;
  padding: 0;
}
.tp-footer-minimal-links ul li{
  list-style: none;
}
.tp-footer-minimal-links ul li a,
.tp-footer-minimal-contact a{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-family: var(--tp-ff-inter);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(243, 241, 242, 0.76);
}
.tp-footer-minimal-links ul li a:hover,
.tp-footer-minimal-contact a:hover{
  color: var(--tp-common-white);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.tp-footer-minimal-links ul li a span{
  margin-left: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: var(--tp-common-black-1);
  background: var(--tp-theme-primary);
}
.tp-footer-minimal-contact{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0;
  font-style: normal;
}
.tp-footer-minimal-contact p{
  margin-bottom: 12px;
  font-family: var(--tp-ff-inter);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(243, 241, 242, 0.7);
}
.tp-footer-minimal-bottom{
  position: relative;
  z-index: 1;
  border-top-color: rgba(243, 241, 242, 0.12);
  padding-top: 22px;
  padding-bottom: 12px;
}
.tp-footer-minimal .tp-footer-it-copyright{
  color: rgba(243, 241, 242, 0.72);
}
.tp-footer-minimal .tp-footer-it-copyright a{
  color: var(--tp-common-white);
}
.tp-footer-minimal .tp-footer-it-copyright svg path{
  fill: rgba(243, 241, 242, 0.68);
}

.tp-footer-legal-nav ul{
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.tp-footer-legal-nav ul li{
  list-style: none;
}
.tp-footer-legal-nav ul li a{
  font-family: var(--tp-ff-inter);
  color: var(--tp-grey-5);
  opacity: 0.8;
}
.tp-footer-legal-nav ul li a:hover{
  opacity: 1;
}

@media (max-width: 991.98px){
  .tp-footer-minimal{
    padding-top: 76px;
  }
  .tp-footer-legal-nav ul{
    justify-content: flex-start;
  }
}
@media (max-width: 574.98px){
  .tp-footer-minimal{
    padding-top: 64px;
  }
  .tp-footer-minimal-brand p,
  .tp-footer-minimal-links ul li a,
  .tp-footer-minimal-contact a{
    font-size: 16px;
  }
  .tp-footer-minimal-links ul{
    gap: 8px 18px;
  }
  .tp-footer-minimal-bottom{
    padding-top: 20px;
  }
  .tp-footer-legal-nav ul{
    gap: 10px 16px;
  }
}

@keyframes bar_anim{
  0%, 100% {
    -webkit-clip-path: inset(-2px 0);
    clip-path: inset(-2px 0);
  }
  42% {
    -webkit-clip-path: inset(-2px 0 -2px 100%);
    clip-path: inset(-2px 0 -2px 100%);
  }
  43% {
    -webkit-clip-path: inset(-2px 100% -2px 0);
    clip-path: inset(-2px 100% -2px 0);
  }
}

@keyframes headerSlideDown {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}
@-webkit-keyframes headerSlideDown {
  0% { -webkit-transform: translateY(-100%); }
  100% { -webkit-transform: translateY(0); }
}

@media (max-width: 767.98px){
  .tp-offcanvas{
    max-width: calc(100vw - 20px);
    padding: 28px 18px;
    border-radius: 24px 0 0 24px;
  }
  .tp-offcanvas-top{
    margin-bottom: 22px;
    padding: 10px;
  }
  .tp-offcanvas-menu ul{
    padding: 8px;
  }
  .tp-offcanvas-menu ul li a{
    min-height: 48px;
    padding: 12px 14px;
    font-size: 15px;
  }
}
