html {
  scroll-behavior: smooth;
}

.wp-block-template-part {
  position: sticky;
  z-index: 9999;
  transition: background-color .3s ease-in-out, color .3s ease-in;
  transition: all 0.5s ease-in-out;
}

.wp-block-template-part.active {
  top: var(--_top);
}
.wp-block-template-part.active header{
  padding:1rem var(--gap-margins);
}
.wp-block-template-part.clr header{
  background:var(--WhiteClr);
  box-shadow: 0 10px 12px #0005;
}

.contact-badge {
  position: fixed;
  top: 35%;
  right: 0;
  transform: translateY(-35%) rotate(-90deg);
  transform-origin: right center;
  background-color:var(--PrimaryClr); /* red color */
  padding: 7px 15px 50px 15px;
  text-decoration: none;
  transition: background 0.3s, transform 0.3s;
  z-index: 3;
}
.contact-badge:hover {background-color:var(--BorderClr);}
.contact-badge img {transform: rotate(1deg); filter: invert(97%) sepia(3%) saturate(0%) hue-rotate(265deg) brightness(255%) contrast(255%); width: 16px;}
.contact-badge a{color:var(--WhiteClr); font-family: var(--HeadingFont); column-gap: 1rem;}


header {padding:1.5rem var(--gap-margins);}
header .logo-image img{max-height:40px; height: 40px; width: 100%; }

#menu {background:var(--PrimaryClr); opacity: 0; transition: all 0.7s ease-in-out; visibility: hidden; z-index: 1100;}
#menu.open {opacity: 1; visibility: visible;}

#menu.open li:nth-child(1) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
#menu.open li:nth-child(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
#menu.open li:nth-child(3) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
#menu.open li:nth-child(4) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
#menu.open li:nth-child(5) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
#menu.open li:nth-child(6) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
#menu.open li:nth-child(7) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
#menu.open li:nth-child(8) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
#menu.open li:nth-child(9) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
#menu.open li:nth-child(10) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

#menu.open li {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}
#menu ul a {
  -webkit-transform: translateZ(0);
  transition: opacity 0.3s ease-in-out;
}
#menu ul a:hover {
  opacity: 1;
}
#menu .main-nav {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding-left: 10rem;
}
#menu .main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#menu .main-nav a {
  color: #ffffff;
  font-family: var(--HeadingFont);
  font-size:7vh;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 1rem 1rem 1rem 0rem;
  display: inline-block;
  text-decoration: none;
  transition:all 0.5s ease;
  position: relative;
}
#menu .main-nav a:hover{margin-left: 1.5rem;}
#menu .main-nav a:first {padding-top: 0;}

#menu .main-nav a:after{content: '';width: 0px;transition: width .5s ease-in-out;height: 4px;background: var(--WhiteClr);position: absolute;bottom: 16%;left: 0;}
#menu .main-nav a:hover:after{content: '';width: 91%;}



.toggle-menu {height: 50px; outline: none; pointer-events: initial; vertical-align: middle; width: 50px; z-index: 1110; right:var(--gap-margins); position: relative; right: 0;}
.toggle-menu span {background-color: #000000; content: ""; display: block; height: 2px; left: calc(50% - 13px ); top: calc(50% - 1px ); transform-origin: 50% 50%; transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out, transform 0.2s linear; width: 26px;}
.toggle-menu span:before, .toggle-menu span:after {background-color: #000000; content: ""; display: block; height: 2px; position: absolute; transform-origin: 50% 50%; transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out, transform 0.2s linear; width: 26px;}

.toggle-menu span:before {top: 7px;}
.toggle-menu span:after {top: -7px;}
.toggle-menu.active span {background-color: transparent; transition: background 0.2s ease-out;}
.toggle-menu.active span:before, .toggle-menu.active span:after {transition: top 0.2s ease-out, transform 0.2s 0.2s ease-out;}
.toggle-menu.active span:before {top: 0; transform: rotate3d(0, 0, 1, -45deg);}
.toggle-menu.active span:after {top: 0; transform: rotate3d(0, 0, 1, 45deg);}
.toggle-menu.active span:before, 
.toggle-menu.active span:after {background-color: #ffffff;}




/* Footer */
footer{
  border-radius: 45px 45px 0 0;
  padding: 0px var(--gap-margins);
  position: relative;
  /* z-index: 2; */
}

.footer-top {
  padding: 2rem 0;
  border-bottom: 1px solid var(--BorderClr);
  grid-template-columns: 1fr 1fr; row-gap: 1rem; column-gap: 1rem;
}
.footer-top ul{list-style: none; padding: 0px; margin: 0px; display: grid; grid-template-columns:auto auto; row-gap: 10px; column-gap: 2rem;}
.footer-top ul li a{font-size:2.2rem; line-height: normal;letter-spacing: 0.5px; color: var(--WhiteClr); font-family: var(--HeadingFont);  
    background: -webkit-gradient(linear, left bottom, left top, color-stop(100%, var(--PrimaryClr)), color-stop(4%, transparent));
    background: linear-gradient(to top, var(--PrimaryClr) 100%, transparent 4%);
    -webkit-transition: .5s;
    transition: .5s;
    display: initial;
    border-bottom: 1px solid transparent;
    background-size: 0 100%;
    background-repeat: no-repeat;
}
.footer-top ul li a:hover{color: var(--WhiteClr);
    border-bottom: 1px solid var(--PrimaryClr);
    background:var(--PrimaryClr);
    background: linear-gradient(to top, var(--PrimaryClr) 100%, transparent 0);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.office-locations{grid-template-columns: 1fr; row-gap: 1rem; column-gap: 2rem; color: var(--WhiteClr); font-size: 1.4rem;}
.office-locations p{font-size:14px;  color: var(--WhiteClr); letter-spacing: 0.5px;}
.office-locations p strong{font-size:15px; font-weight: 400;}
.office-locations p a{opacity: 0.5; color: var(--WhiteClr);}
.office-locations p a:hover{opacity: 1;}

.m-icon{width: 50px;}
.footer-subscribe{margin-top: 4rem; max-width:90%;}
.footer-subscribe .form-control{border:0px; border-bottom: solid 1px var(--WhiteClr); padding: 1rem 60px 1rem 0rem; color: #ffffff;}
.footer-subscribe .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color:var(--WhiteClr);
}
.footer-subscribe .form-control::-moz-placeholder { /* Firefox 19+ */
  color: var(--WhiteClr);
}
.footer-subscribe .form-control:-ms-input-placeholder { /* IE 10+ */
  color: var(--WhiteClr);
}
.footer-subscribe .form-control:-moz-placeholder { /* Firefox 18- */
  color: var(--WhiteClr);
}
.subscribe-btn{background: url('../images/arrow-white.png') no-repeat center;background-size: 60%;text-indent: -9999px;border: 0;padding: 0px;height: 100%;width: 50px;position: absolute;top: 0px;right: 0px;}

.footer-bottom .fnav{order: 1; column-gap: 1.4rem;}
.footer-bottom .fnav a{font-size: 15px; opacity:0.30; color: var(--WhiteClr);}
.footer-bottom .fnav a:hover{opacity: 1;}
.footer-bottom .copy-txt{font-size: 15px; opacity:0.30; color: var(--WhiteClr);}

.transform-cta{background: var(--PrimaryClr); border-radius: 45px 45px 0 0; padding: 0px var(--gap-margins); position: relative;}
.transform-cta:after{content: ''; background: var(--PrimaryClr); height: 50px; width: 100%; position: absolute; left: 0;}
.transform-outer{padding: 2rem 0px 2.5rem 0px;}
.transform-outer h4{font-weight: 900; font-size: var(--HeadingOne); letter-spacing: 1px;}
.transform-outer h4 span{font-weight: 500;}
.transform-outer p{font-size: 16.5px;}
.transform-link img{filter: invert(97%) sepia(3%) saturate(0%) hue-rotate(265deg) brightness(255%) contrast(255%);width: 100%;height: 100%; width:42px;}

.home-footer{padding: calc(var(--gap-margins) / 1.5) var(--gap-margins);}
.home-footer h4{font-size: var(--HeadingTwo); font-weight: 500; text-transform: uppercase; max-width: 30%; color: var(--GrayClr);}
.mds-bottom img{max-width:30rem; width: 100%; opacity: 0.4;}




@media (max-width:1600px) {
    .home-footer h4{max-width: 40%;}
}

@media (max-width:767px) {
	.footer-copy-links a{font-size:13px; margin-left:10px;}
	.footer-copy-links a::after{right:-8px;}

	.fnav-widget h3{margin-bottom:10px;}
	.f-nav-outer {grid-template-columns:1fr; row-gap:20px;}
	.footer-top{padding:30px 0px; grid-template-columns: 1fr;}
	.footer{padding:0px; border-top:0px;}
	.fnav-widget ul li{padding-bottom:5px;}

	footer figure img{max-height:70px;}
	footer p{font-size: 14px;}

  header {padding:1rem;}
  header .logo-image img{max-height: 30px;}
  #menu .main-nav{padding-left:3rem;}

  .transform-outer h4{font-size: var(--HeadingThree);}
  .footer-top ul li a{font-size: 1.4rem;}

  .m-icon{display: none;}
  .footer-subscribe {margin-top: 0rem; max-width: 100%;}
  .footer-bottom .fnav{justify-content: center; width: 100%;}
  .footer-bottom .copy-txt{order: 2; margin-top: 1rem; width: 100%; text-align: center;}

  .home-footer .d-flex{flex-direction: column;}
  .home-footer h4 {max-width: 100%; font-size: var(--HeadingThree); text-align: center; margin-bottom: 1rem !important;}

  .transform-outer{row-gap: 1rem;padding: 2rem 0px 2rem 0px;}

}