:root {
   --white-color: #ffffff;
   --primary-color: #0077b6;
   --secondary-color: #03045e;
   --section-bg-color: #f0f8ff;
   --custom-btn-bg-color: #03045e;
   --custom-btn-commercial-bg-color: #0077b6;
   --custom-btn-bg-hover-color: #7cb8eb;
   --dark-color: #000000;
   --p-color: #717275;
   --border-color: #e9eaeb;
   --link-hover-color: #0077b6;

   --body-font-family: 'Poppins', sans-serif;

   --h1-font-size: 52px;
   --h2-font-size: 46px;
   --h3-font-size: 32px;
   --h4-font-size: 28px;
   --h5-font-size: 24px;
   --h6-font-size: 22px;
   --p-font-size: 16px;
   --btn-font-size: 18px;
   --copyright-font-size: 14px;

   --border-radius-large: 100px;
   --border-radius-medium: 20px;
   --border-radius-small: 10px;

   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-bold: 700;
 }

 body {
   background-color: var(--white-color);
   font-family: var(--body-font-family);
 }


 /*---------------------------------------
  TYPOGRAPHY               
-----------------------------------------*/

 h2,
 h3,
 h4,
 h5,
 h6 {
   color: var(--dark-color);
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-weight: var(--font-weight-medium);
 }

 h1 {
   font-size: var(--h1-font-size);
   font-weight: var(--font-weight-bold);
 }

 h2 {
   font-size: var(--h2-font-size);
   font-weight: var(--font-weight-bold);
 }

 h3 {
   font-size: var(--h3-font-size);
 }

 h4 {
   font-size: var(--h4-font-size);
 }

 h5 {
   font-size: var(--h5-font-size);
 }

 h6 {
   font-size: var(--h6-font-size);
 }

 p {
   color: var(--p-color);
   font-size: var(--p-font-size);
   font-weight: var(--font-weight-normal);
 }

 ul li {
   color: var(--p-color);
   font-size: var(--p-font-size);
   font-weight: var(--font-weight-normal);
 }

 a,
 button {
   touch-action: manipulation;
   transition: all 0.3s;
 }

 a {
   display: inline-block;
   color: var(--primary-color);
   text-decoration: none;
 }

 a:hover {
   color: var(--link-hover-color);
 }

 b,
 strong {
   font-weight: var(--font-weight-bold);
 }

 .page-404-title {
   color: var(--secondary-color);
   font-size: 10rem;
 }


 /*---------------------------------------
  SECTION               
-----------------------------------------*/
 .section-padding {
   padding-top: 100px;
   padding-bottom: 100px;
 }

 .section-bg {
   background-color: var(--section-bg-color);
 }

 .section-overlay {
   background-color: var(--secondary-color);
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: none;
   width: 100%;
   height: 100%;
   opacity: 0.6;
 }

 .testimonial-section .section-overlay {
   opacity: 0.85;
 }

 .section-overlay+.container {
   position: relative;
 }


 /*---------------------------------------
  ANIMATED HEADLINE               
-----------------------------------------*/
 .cd-words-wrapper {
   display: inline-block;
   position: relative;
   text-align: left;
 }

 .cd-words-wrapper b {
   color: #90e0ef;
   display: inline-block;
   position: absolute;
   white-space: nowrap;
   left: 0;
   top: 0;
 }

 .cd-words-wrapper b.is-visible {
   position: relative;
 }

 .no-js .cd-words-wrapper b {
   opacity: 0;
 }

 .no-js .cd-words-wrapper b.is-visible {
   opacity: 1;
 }

 .cd-headline {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }

 .cd-words-wrapper {
   display: inline-block;
   text-align: center;
   width: 100%;
 }

 .cd-words-wrapper b {
   display: block;
   text-align: center;
   width: 100%;
 }

 .cd-headline.rotate-1 .cd-words-wrapper {
   -webkit-perspective: 300px;
   -moz-perspective: 300px;
   perspective: 300px;
 }

 .cd-headline.rotate-1 b {
   opacity: 0;
   -webkit-transform-origin: 50% 100%;
   -moz-transform-origin: 50% 100%;
   -ms-transform-origin: 50% 100%;
   -o-transform-origin: 50% 100%;
   transform-origin: 50% 100%;
   -webkit-transform: rotateX(180deg);
   -moz-transform: rotateX(180deg);
   -ms-transform: rotateX(180deg);
   -o-transform: rotateX(180deg);
   transform: rotateX(180deg);
 }

 .cd-headline.rotate-1 b.is-visible {
   opacity: 1;
   -webkit-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -ms-transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   transform: rotateX(0deg);
   -webkit-animation: cd-rotate-1-in 1.2s;
   -moz-animation: cd-rotate-1-in 1.2s;
   animation: cd-rotate-1-in 1.2s;
 }

 .cd-headline.rotate-1 b.is-hidden {
   -webkit-transform: rotateX(180deg);
   -moz-transform: rotateX(180deg);
   -ms-transform: rotateX(180deg);
   -o-transform: rotateX(180deg);
   transform: rotateX(180deg);
   -webkit-animation: cd-rotate-1-out 1.2s;
   -moz-animation: cd-rotate-1-out 1.2s;
   animation: cd-rotate-1-out 1.2s;
 }

 @-webkit-keyframes cd-rotate-1-in {
   0% {
     -webkit-transform: rotateX(180deg);
     opacity: 0;
   }

   35% {
     -webkit-transform: rotateX(120deg);
     opacity: 0;
   }

   65% {
     opacity: 0;
   }

   100% {
     -webkit-transform: rotateX(360deg);
     opacity: 1;
   }
 }

 @-moz-keyframes cd-rotate-1-in {
   0% {
     -moz-transform: rotateX(180deg);
     opacity: 0;
   }

   35% {
     -moz-transform: rotateX(120deg);
     opacity: 0;
   }

   65% {
     opacity: 0;
   }

   100% {
     -moz-transform: rotateX(360deg);
     opacity: 1;
   }
 }

 @keyframes cd-rotate-1-in {
   0% {
     -webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
     -ms-transform: rotateX(180deg);
     -o-transform: rotateX(180deg);
     transform: rotateX(180deg);
     opacity: 0;
   }

   35% {
     -webkit-transform: rotateX(120deg);
     -moz-transform: rotateX(120deg);
     -ms-transform: rotateX(120deg);
     -o-transform: rotateX(120deg);
     transform: rotateX(120deg);
     opacity: 0;
   }

   65% {
     opacity: 0;
   }

   100% {
     -webkit-transform: rotateX(360deg);
     -moz-transform: rotateX(360deg);
     -ms-transform: rotateX(360deg);
     -o-transform: rotateX(360deg);
     transform: rotateX(360deg);
     opacity: 1;
   }
 }

 @-webkit-keyframes cd-rotate-1-out {
   0% {
     -webkit-transform: rotateX(0deg);
     opacity: 1;
   }

   35% {
     -webkit-transform: rotateX(-40deg);
     opacity: 1;
   }

   65% {
     opacity: 0;
   }

   100% {
     -webkit-transform: rotateX(180deg);
     opacity: 0;
   }
 }

 @-moz-keyframes cd-rotate-1-out {
   0% {
     -moz-transform: rotateX(0deg);
     opacity: 1;
   }

   35% {
     -moz-transform: rotateX(-40deg);
     opacity: 1;
   }

   65% {
     opacity: 0;
   }

   100% {
     -moz-transform: rotateX(180deg);
     opacity: 0;
   }
 }

 @keyframes cd-rotate-1-out {
   0% {
     -webkit-transform: rotateX(0deg);
     -moz-transform: rotateX(0deg);
     -ms-transform: rotateX(0deg);
     -o-transform: rotateX(0deg);
     transform: rotateX(0deg);
     opacity: 1;
   }

   35% {
     -webkit-transform: rotateX(-40deg);
     -moz-transform: rotateX(-40deg);
     -ms-transform: rotateX(-40deg);
     -o-transform: rotateX(-40deg);
     transform: rotateX(-40deg);
     opacity: 1;
   }

   65% {
     opacity: 0;
   }

   100% {
     -webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
     -ms-transform: rotateX(180deg);
     -o-transform: rotateX(180deg);
     transform: rotateX(180deg);
     opacity: 0;
   }
 }


 /*---------------------------------------
  CUSTOM LINK               
-----------------------------------------*/
 .link {
   cursor: pointer;
   position: relative;
   white-space: nowrap;
 }

 .link::before,
 .link::after {
   position: absolute;
   width: 100%;
   height: 1px;
   background: currentColor;
   top: 100%;
   left: 0;
   pointer-events: none;
 }

 .link::before {
   content: '';
 }

 .link--herse::before {
   display: none;
 }

 .link__graphic {
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: none;
   fill: none;
   stroke: var(--dark-color);
   stroke-width: 1px;
 }

 .link__graphic--stroke path {
   stroke-dasharray: 1;
   stroke-dashoffset: 1;
 }

 .link:hover .link__graphic--stroke path {
   stroke-dashoffset: 0;
 }

 .link__graphic--arc {
   top: 73%;
   left: -23%;
 }

 .link__graphic--arc path {
   transition: stroke-dashoffset 0.4s cubic-bezier(0.7, 0, 0.3, 1);
 }

 .link:hover .link__graphic--arc path {
   transition-timing-function: cubic-bezier(0.8, 1, 0.7, 1);
   transition-duration: 0.3s;
 }

 .button {
   display: inline-block;
   position: relative;
 }

 .button::before,
 .button::after {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }

 .button--atlas>span {
   display: inline-block;
 }

 .button--atlas:hover>span {
   opacity: 0;
 }

 .marquee {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   overflow: hidden;
   pointer-events: none;
 }

 .marquee__inner {
   width: fit-content;
   display: flex;
   position: relative;
   --offset: 1rem;
   --move-initial: calc(-25% + var(--offset));
   --move-final: calc(-50% + var(--offset));
   transform: translate3d(var(--move-initial), 0, 0);
   animation: marquee 1s linear infinite;
   animation-play-state: paused;
   opacity: 0;
 }

 .button--atlas:hover .marquee__inner {
   animation-play-state: running;
   opacity: 1;
   transition-duration: 0.4s;
 }

 .marquee span {
   text-align: center;
   white-space: nowrap;
   font-style: italic;
   padding: 15px;
 }

 @keyframes marquee {
   0% {
     transform: translate3d(var(--move-initial), 0, 0);
   }

   100% {
     transform: translate3d(var(--move-final), 0, 0);
   }
 }

 .button--pan {
   overflow: hidden;
 }

 .button--pan span {
   position: relative;
 }

 .button--pan::before {
   content: '';
   transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
 }

 .button--pan:hover::before {
   background: transparent;
   transform: translate3d(0, -100%, 0);
 }


 /*---------------------------------------
  CUSTOM BLOCK               
-----------------------------------------*/
 .custom-block-wrap {
   position: relative;
 }

 .custom-block-wrap .custom-block {
   position: absolute;
   bottom: 0;
   right: 0;
 }

 .custom-block {
   background-color: var(--primary-color);
   border-radius: var(--border-radius-small);
   padding: 35px;
 }

 .custom-block .custom-icon,
 .custom-block a {
   color: var(--white-color);
 }


 /*---------------------------------------
  CUSTOM ICON COLOR               
-----------------------------------------*/
 .custom-icon {
   color: var(--secondary-color);
 }

 .bi-star-fill {
   color: var(--custom-btn-bg-color);
 }


 /*---------------------------------------
  AVATAR IMAGE - TESTIMONIAL               
-----------------------------------------*/
 .avatar-image {
   border-radius: var(--border-radius-large);
   width: 60px;
   height: 60px;
   object-fit: cover;
 }


 /*---------------------------------------
  CUSTOM BUTTON               
-----------------------------------------*/
 .custom-btn {
   background: var(--custom-btn-bg-color);
   border: 2px solid transparent;
   border-radius: var(--border-radius-large);
   color: var(--white-color);
   font-size: var(--btn-font-size);
   font-weight: var(--font-weight-normal);
   line-height: normal;
   transition: all 0.3s;
   padding: 15px 25px;
 }
  .custom-btn-commercial {
   background: var(--custom-btn-commercial-bg-color);
   border: 2px solid transparent;
   border-radius: var(--border-radius-large);
   color: var(--white-color);
   font-size: var(--btn-font-size);
   font-weight: var(--font-weight-normal);
   line-height: normal;
   transition: all 0.3s;
   padding: 15px 25px;
 }

 .navbar-expand-lg .navbar-nav .nav-link.custom-btn {
   margin-top: 8px;
   margin-right: 0;
   padding: 12px 25px;
 }

 .custom-btn:hover {
   background: var(--custom-btn-bg-hover-color);
   color: var(--white-color);
 }

 .custom-border-btn {
   background: transparent;
   border: 2px solid var(--custom-btn-bg-color);
   color: var(--custom-btn-bg-color);
 }

 .navbar-expand-lg .navbar-nav .nav-link.custom-btn:hover,
 .custom-border-btn:hover {
   background: var(--custom-btn-bg-hover-color);
   border-color: transparent;
   color: var(--white-color);
 }

 .custom-btn-bg-white {
   border-color: var(--white-color);
   color: var(--white-color);
 }


 /*---------------------------------------
  NAVIGATION              
-----------------------------------------*/
 .company-name {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   font-size: 1.25rem;
   font-weight: 500;
   white-space: nowrap;
   min-height: 60px;
   /* Ensures vertical centering with the logo */
 }

 .company-subtitle {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.1;
   white-space: nowrap;
 }

 @media (max-width: 576px) {
   .company-name {
     font-size: 1.1rem;
     min-height: 40px;
     white-space: normal;
   }

   .company-subtitle {
     font-size: 0.95rem;
   }
 }

 .navbar {
   background: transparent;
   position: absolute;
   top: 49px;
   right: 0;
   left: 0;
   z-index: 9;
   padding-top: 20px;
   padding-bottom: 20px;
 }

 .navbar-brand,
 .navbar-brand:hover {
   color: var(--white-color);
   font-size: var(--h6-font-size);
   font-weight: var(--font-weight-light);
   display: flex;
 }

 .logo {
   background-color: var(--white-color);
   border-radius: var(--border-radius-large);
   width: 100px;
   height: 100px;
   object-fit: cover;
   padding: 1px;
 }

 .navbar-expand-lg .navbar-nav .nav-link {
   margin: 20px;
   padding: 0;
 }

 .navbar-nav .nav-link {
   display: inline-block;
   color: var(--white-color);
   font-size: var(--p-font-size);
   font-weight: var(--font-weight-medium);
   position: relative;
   padding-top: 15px;
   padding-bottom: 15px;
 }

 .navbar-nav .nav-link.active,
 .navbar-nav .nav-link:hover {
   background: transparent;
   color: #90e0ef;
 }

 .dropdown-menu {
   background: var(--white-color);
   box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
   border: 0;
   display: inherit;
   opacity: 0;
   min-width: 9rem;
   margin-top: 20px;
   padding: 13px 0 10px 0;
   transition: all 0.3s;
   pointer-events: none;
 }

 .dropdown-menu::before {
   content: "";
   width: 0;
   height: 0;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-bottom: 15px solid var(--white-color);
   position: absolute;
   top: -10px;
   left: 10px;
 }

 .dropdown-item {
   display: inline-block;
   color: var(--p-bg-color);
   font-size: var(--menu-font-size);
   font-weight: var(--font-weight-medium);
   position: relative;
   padding-top: 0;
   padding-bottom: 7px;
 }

 .dropdown-item.active,
 .dropdown-item:active,
 .dropdown-item:focus,
 .dropdown-item:hover {
   background: transparent;
   color: var(--primary-color);
 }

 .dropdown-toggle::after {
   content: "\f282";
   display: inline-block;
   font-family: bootstrap-icons !important;
   font-size: var(--copyright-font-size);
   font-style: normal;
   font-weight: normal !important;
   font-variant: normal;
   text-transform: none;
   line-height: 1;
   vertical-align: -.125em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   position: relative;
   left: 2px;
   border: 0;
 }

 @media screen and (min-width: 992px) {
   .dropdown:hover .dropdown-menu {
     opacity: 1;
     margin-top: 0;
     pointer-events: auto;
   }
 }

 .navbar-toggler {
   border: 0;
   padding: 0;
   cursor: pointer;
   margin: 0;
   width: 30px;
   height: 35px;
   outline: none;
 }

 .navbar-toggler:focus {
   outline: none;
   box-shadow: none;
 }

 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
   background: transparent;
 }

 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before,
 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
   transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;
   transition: top 300ms 50ms ease, transform 300ms 350ms ease;
   transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease;
   top: 0;
 }

 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
   transform: rotate(45deg);
 }

 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
   transform: rotate(-45deg);
 }

 .navbar-toggler .navbar-toggler-icon {
   background: var(--dark-color);
   transition: background 10ms 300ms ease;
   display: block;
   width: 30px;
   height: 2px;
   position: relative;
 }

 .navbar-toggler .navbar-toggler-icon:before,
 .navbar-toggler .navbar-toggler-icon:after {
   transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;
   transition: top 300ms 350ms ease, transform 300ms 50ms ease;
   transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease;
   position: absolute;
   right: 0;
   left: 0;
   background: var(--dark-color);
   width: 30px;
   height: 2px;
   content: '';
 }

 .navbar-toggler .navbar-toggler-icon::before {
   top: -8px;
 }

 .navbar-toggler .navbar-toggler-icon::after {
   top: 8px;
 }


 /*---------------------------------------
  SITE HEADER              
-----------------------------------------*/
 .site-header {
   background: var(--primary-color);
   position: relative;
   z-index: 22;
   padding-top: 15px;
   padding-bottom: 15px;
 }

 .site-header p,
 .site-header p a,
 .site-header .social-icon-link {
   color: var(--white-color);
   font-size: var(--copyright-font-size);
 }

 .site-header .social-icon {
   text-align: right;
 }

 .site-header .social-icon-link {
   background: transparent;
   width: inherit;
   height: inherit;
   line-height: inherit;
   margin-right: 15px;
 }

 .site-header-icon {
   display: inline-block;
 }


 /*---------------------------------------
  HERO        
-----------------------------------------*/
 .hero-section {
   position: relative;
   overflow: hidden;
   padding-top: 100px;
   padding-bottom: 100px;
   min-height: 680px;
 }

 .hero-section .container {
   position: relative;
   z-index: 2;
 }

 .hero-section svg {
   position: absolute;
   bottom: -50px;
   right: 0;
   left: 0;
   pointer-events: none;
 }

 .cd-words-wrapper b {
   font-size: 3rem;
 }

 @media (max-width: 576px) {
   .cd-words-wrapper b {
     font-size: 1.1rem;
   }
 }

 @media screen and (min-width: 991px) {
   .hero-section-full-height {
     height: 85vh;
   }
 }


 /*---------------------------------------
  INTRO        
-----------------------------------------*/
 .intro-section {
   padding-top: 50px;
 }


 /*---------------------------------------
  BANNER        
-----------------------------------------*/
 .banner-section {
   background-image: url('../images/high-angle-woman-cleaning-floors.jpg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   position: relative;
   overflow: hidden;
   min-height: 340px;
   padding-top: 100px;
   padding-bottom: 50px;
 }

 .banner-section .breadcrumb {
   margin-bottom: 0;
 }

 .breadcrumb-item+.breadcrumb-item::before,
 .breadcrumb-item.active {
   color: var(--white-color);
 }


 /*---------------------------------------
  COUNTDOWN              
-----------------------------------------*/
 .countdown-section {
   position: relative;
 }

 .countdown-section-title {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
 }

 .countdown {
   text-align: center;
   padding-left: 0;
 }

 .countdown-item {
   list-style: none;
   flex: 0 0 13%;
   margin: 15px;
 }

 .countdown-text {
   background: var(--section-bg-color);
   border-radius: 6px;
   color: var(--secondary-color);
   font-size: var(--p-font-size);
   position: relative;
   padding: 4px 8px;
 }

 .countdown-text::before {
   content: "";
   display: block;
   margin: auto;
   width: 0;
   height: 0;
   border-bottom: 5px solid var(--section-bg-color);
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
   position: absolute;
   top: -5px;
   right: 0;
   left: 0;
 }


 /*---------------------------------------
  FEATURED              
-----------------------------------------*/
 .featured-image {
   border-radius: var(--border-radius-medium);
 }

 .featured-block {
   padding: 20px;
 }


 /*---------------------------------------
  ABOUT              
-----------------------------------------*/
 .about-image,
 .gallery-image {
   border-radius: var(--border-radius-medium);
 }

 .team-info {
   background: var(--white-color);
   border-radius: var(--border-radius-medium);
   position: relative;
   padding: 30px;
 }

 .team-info p {
   margin-bottom: 0;
 }

 .team-info::before {
   content: "";
   display: block;
   margin: auto;
   width: 0;
   height: 0;
   border-right: 20px solid var(--white-color);
   border-top: 20px solid transparent;
   border-bottom: 20px solid transparent;
   position: absolute;
   left: -20px;
   top: 0;
   bottom: 0;
 }

 .gallery-image {
   transition: all 0.3s;
 }

 .gallery-image:hover {
   transform: scale(1.02);
 }


 /*---------------------------------------
  SERVICES              
-----------------------------------------*/
 .services-thumb {
   background-color: var(--white-color);
   border-radius: var(--border-radius-small);
   position: relative;
   overflow: hidden;
   margin-bottom: 24px;
   padding: 30px;
 }

 .services-thumb.section-bg {
   background: var(--section-bg-color);
 }

 .services-detail-section .services-image {
   aspect-ratio: 0;
 }

 .services-image-wrap {
   border-radius: var(--border-radius-small);
   position: relative;
   overflow: hidden;
 }

 .services-image-wrap:hover .services-image-hover {
   opacity: 1;
 }

 .services-title-link {
   display: block;
 }

 .services-image,
 .team-image {
   border-radius: var(--border-radius-small);
   display: block;
   aspect-ratio: 1;
   object-fit: cover;
   transition: all 0.5s;
 }

 .services-image-hover {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: 0;
 }

 .services-icon-wrap {
   background: var(--secondary-color);
   color: var(--white-color);
   font-size: var(--h3-font-size);
   position: absolute;
   bottom: 0;
   right: 0;
   left: 0;
   transition: opacity 0.5s;
   padding: 8px 12px;
 }

 .services-icon-wrap .button--skoll {
   width: 100%;
   height: 100%;
 }


 /*---------------------------------------
  TESTIMONIAL              
-----------------------------------------*/
 .testimonial-section {
   background-image: url('../images/coffe-shop-with-wooden-walls-unfocused.jpg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   position: relative;
 }

 .testimonial-section .featured-block {
   background-color: var(--primary-color);
   border-radius: var(--border-radius-medium);
   margin-bottom: 24px;
   padding: 30px;
 }

 .testimonial-section .featured-block h4,
 .testimonial-section .featured-block p {
   color: var(--white-color);
 }



 /*---------------------------------------
  PARTNERS              
-----------------------------------------*/
 .partners-section {
   text-align: center;
   padding-top: 25px;
   padding-bottom: 50px;
 }

 .partners-section-title {
   border-radius: var(--border-radius-large);
   display: inline-block;
   position: relative;
   bottom: 50px;
   margin-bottom: -50px;
   padding: 10px 20px;
 }

 .partners-image {
   display: block;
   width: 150px;
   margin: auto;
   transition: all 0.3s;
 }

 .partners-image:hover {
   transform: scale(1.05);
 }


 /*---------------------------------------
  COUNTER NUMBERS              
-----------------------------------------*/
 .counter-thumb {
   margin: 20px;
   margin-top: 0;
 }

 .counter-number {
   color: var(--secondary-color);
   display: block;
 }

 .counter-number,
 .counter-number-text {
   color: var(--secondary-color);
   font-size: var(--h1-font-size);
   font-weight: var(--font-weight-bold);
   line-height: normal;
 }


 /*---------------------------------------
  CONTACT               
-----------------------------------------*/
 .contact-section {
   background: var(--white-color);
 }

 .contact-form {
   background: var(--section-bg-color);
   border-radius: var(--border-radius-small);
   padding: 40px;
 }

 .contact-info {
   background: var(--white-color);
   border-radius: var(--border-radius-medium);
   display: inline-block;
   margin-top: 20px;
   padding: 40px;
 }

 .team-info a,
 .contact-info h5,
 .contact-info h5 a {
   color: var(--p-color);
 }

 .team-info a:hover,
 .contact-info h5 a:hover {
   color: var(--link-hover-color);
 }


 /*---------------------------------------
  CUSTOM FORM               
-----------------------------------------*/
 .custom-form .form-control,
 .input-group-file {
   color: var(--p-color);
   margin-bottom: 24px;
   padding-top: 13px;
   padding-bottom: 13px;
   outline: none;
 }

 .custom-form .form-control:hover,
 .custom-form .form-control:focus {
   border-color: var(--secondary-color);
 }

 .custom-form label {
   margin-bottom: 10px;
 }

 .custom-form .form-check-group {
   margin-bottom: 20px;
 }

 .donate-form .form-check-group-donation-frequency {
   padding-right: 0;
 }

 .form-check-group-donation-frequency+.form-check-group-donation-frequency {
   padding-right: 12px;
   padding-left: 0;
 }

 .form-check-group-donation-frequency .form-check-label {
   font-weight: var(--font-weight-medium);
 }

 #DonationFrequencyOne {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }

 #DonationFrequencyMonthly {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }

 .custom-form .form-check-radio {
   position: relative;
   height: 100%;
   padding-left: 0;
 }

 .custom-form .input-group-text {
   background: var(--secondary-color);
   border: 0;
   color: var(--white-color);
 }

 .custom-form .form-check-radio .form-check-label {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
 }

 .form-check-radio .form-check-input[type=radio] {
   background-color: var(--section-bg-color);
   border-radius: .25rem;
   border: 0;
   box-shadow: none;
   outline: none;
   width: 100%;
   margin-top: 0;
   margin-left: 0;
   padding: 25px 50px;
   transition: all 0.3s;
 }

 .form-check-radio .form-check-input:checked[type=radio] {
   background-image: none;
 }

 .form-check-radio .form-check-input:checked[type=radio]+.form-check-label,
 .form-check-radio .form-check-input:hover+.form-check-label,
 .form-check-radio .form-check-input:checked+.form-check-label {
   color: var(--white-color);
 }

 .form-check-radio .form-check-input:hover,
 .form-check-radio .form-check-input:checked {
   background-color: var(--secondary-color);
   border-color: var(--white-color);
 }

 .input-group-file {
   border-radius: .25rem;
   padding: 13px .75rem;
 }

 .input-group-file input[type=file] {
   width: 0.1px;
   height: 0.1px;
   opacity: 0;
   overflow: hidden;
   position: absolute;
   z-index: -1;
   padding: 0;
 }

 .input-group-file .input-group-text {
   background: transparent;
   color: inherit;
   margin-bottom: 0;
   padding: 0;
 }

 .custom-form button[type="submit"] {
   background: var(--custom-btn-bg-color);
   border: none;
   border-radius: var(--border-radius-large);
   color: var(--white-color);
   font-size: var(--p-font-size);
   font-weight: var(--font-weight-medium);
   transition: all 0.3s;
   margin-bottom: 0;
 }

 .custom-form button[type="submit"]:hover,
 .custom-form button[type="submit"]:focus {
   background: var(--custom-btn-bg-hover-color);
   border-color: transparent;
 }

 .consulting-form {
   background: var(--white-color);
   border-radius: var(--border-radius-medium);
   position: relative;
   overflow: hidden;
   padding: 45px;
 }

 .consulting-form-header .form-icon {
   font-size: var(--h2-font-size);
   color: var(--white-color);
 }


 /*---------------------------------------
  SITE FOOTER              
-----------------------------------------*/
 .site-footer {
   background-color: var(--primary-color);
   padding-top: 50px;
 }

 .site-footer-bottom {
   border-top: 1px solid #7fbcf0;
   position: relative;
   z-index: 2;
   margin-top: 50px;
   padding-top: 25px;
   padding-bottom: 25px;
 }

 .site-footer .logo {
   background-color: var(--white-color);
   border-radius: var(--border-radius-large);
   width: 100px;
   height: 100px;
   object-fit: cover;
   padding: 1px;
 }

 .site-footer-title,
 .site-footer-link {
   color: var(--white-color);
 }

 .copyright-text {
   color: var(--section-bg-color);
   font-size: var(--copyright-font-size);
   margin-right: 30px;
 }

 .site-footer .custom-btn {
   font-size: var(--copyright-font-size);
 }

 .site-footer .custom-btn:hover {
   background: var(--primary-color);
 }

 .site-footer-bottom a {
   color: var(--white-color);
 }

 .site-footer-bottom a:hover {
   color: var(--link-hover-color);
 }


 /*---------------------------------------
  FOOTER MENU               
-----------------------------------------*/
 .footer-menu {
   column-count: 2;
   margin: 0;
   padding: 0;
 }

 .footer-menu-item {
   list-style: none;
   display: block;
 }

 .footer-menu-link {
   font-size: var(--p-font-size);
   color: var(--white-color);
   display: inline-block;
   vertical-align: middle;
   margin-right: 20px;
   margin-bottom: 5px;
 }


 /*---------------------------------------
  SOCIAL ICON               
-----------------------------------------*/
 .social-icon {
   margin: 0;
   padding: 0;
 }

 .social-icon-item {
   list-style: none;
   display: inline-block;
   vertical-align: top;
 }

 .social-icon-link {
   background: #7fbcf0;
   border-radius: var(--border-radius-large);
   color: var(--white-color);
   font-size: var(--copyright-font-size);
   display: block;
   margin-right: 10px;
   text-align: center;
   width: 35px;
   height: 35px;
   line-height: 36px;
 }

 .social-icon-link:hover {
   background: var(--primary-color);
   color: var(--white-color);
 }

 .button--skoll {
   overflow: hidden;
   border-radius: 50%;
   color: var(--white-color);
   width: 35px;
   height: 35px;
 }

 .button--skoll span {
   display: block;
   position: relative;
 }

 .button--skoll>span {
   overflow: hidden;
 }

 .button--skoll:hover>span>span {
   animation: MoveUpInitial 0.2s forwards, MoveUpEnd 0.2s forwards 0.2s;
 }

 .button--skoll::before {
   content: '';
   background: var(--custom-btn-bg-color);
   width: 100%;
   height: 0;
   padding-bottom: 100%;
   border-radius: 50%;
   transform: translate3d(0, 0, 0);
   transition: transform 0.3s;
   transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
 }

 .button--skoll:hover::before {
   transform: translate3d(0, 100%, 0);
 }


 /*---------------------------------------
  RESPONSIVE STYLES               
-----------------------------------------*/
 @media screen and (min-width: 1600px) {
   .intro-section {
     padding-top: 0;
   }
 }

 @media screen and (max-width: 991px) {
   h1 {
     font-size: 42px;
   }

   h2 {
     font-size: 36px;
   }

   h3 {
     font-size: 32px;
   }

   h4 {
     font-size: 28px;
   }

   h5 {
     font-size: 20px;
   }

   h6 {
     font-size: 18px;
   }

   .section-padding {
     padding-top: 50px;
     padding-bottom: 50px;
   }

   .team-section {
     padding-bottom: 80px;
   }

   .navbar {
     background-color: var(--white-color);
     padding-top: 5px;
     padding-bottom: 5px;
   }

   .navbar-brand,
   .navbar-brand:hover {
     color: var(--primary-color);
   }

   .navbar-nav .nav-link {
     color: var(--p-color);
   }

   .navbar-expand-lg .navbar-nav {
     padding-bottom: 30px;
   }

   .navbar-expand-lg .navbar-nav .nav-link {
     margin: 8px 20px;
   }

   .navbar-expand-lg .navbar-nav .nav-link.custom-btn {
     background-color: var(--custom-btn-bg-color);
     color: var(--white-color);
     margin-left: 0;
   }

   .navbar-nav .dropdown-menu {
     position: relative;
     left: 20px;
     opacity: 1;
     pointer-events: auto;
     max-width: 100px;
     margin-top: 10px;
     margin-bottom: 15px;
   }

   .custom-block-wrap .custom-block {
     right: 12px;
   }

   .site-footer {
     padding-top: 50px;
   }

   .copyright-text-wrap {
     justify-content: center;
   }

   .site-footer-bottom {
     text-align: center;
     margin-top: 50px;
   }

   .site-footer-bottom .footer-menu {
     margin-top: 10px;
     margin-bottom: 10px;
   }
 }

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

   .custom-btn {
     font-size: 14px;
     padding: 10px 20px;
   }

   .hero-section svg {
     bottom: 0;
   }

   .team-info::before {
     border-top: 0;
     border-bottom: 20px solid var(--white-color);
     border-left: 20px solid transparent;
     border-right: 20px solid transparent;
     top: -20px;
     bottom: auto;
     right: 0;
     left: 0;
   }
 }

 @media screen and (max-width: 480px) {
   h1 {
     font-size: 40px;
   }

   h2 {
     font-size: 28px;
   }

   h3 {
     font-size: 26px;
   }

   h4 {
     font-size: 22px;
   }

   h5 {
     font-size: 20px;
   }
 }