body {
     color: #444242;
     background: white;
     font-family: "Host Grotesk", sans-serif;
     font-weight: 400
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     color: #0e72a1
 }

 a {
     color: #666666;
     transition: .3s
 }

 a:hover,
 a:active,
 a:focus {
     color: #88bc4a;
     outline: none;
     text-decoration: none
 }

 .btn:focus {
     box-shadow: none
 }

 .wrapper {
     position: relative;
     width: 100%;
     margin: 0 auto;
     background: #ffffff
 }

 .back-to-top {
     position: fixed;
     display: none;
     background: #88bc4a;
     color: #005796;
     width: 44px;
     height: 44px;
     text-align: center;
     line-height: 1;
     font-size: 22px;
     right: 15px;
     bottom: 15px;
     transition: background .5s;
     z-index: 9
 }

 .back-to-top:hover {
     color: #88bc4a;
     background: #005796
 }

 .back-to-top i {
     padding-top: 10px
 }

 .btn {
     transition: .3s
 }

 .top-bar {
     position: relative;
     height: 90px;
     background: #030f27
 }

 .logo h2 {
     color: white !important
 }

 .top-bar .logo {
     padding: 10px 0;
     text-align: left;
     overflow: hidden
 }

 .top-bar .logo h1 {
     margin: 0;
     color: #0e72a1;
     font-size: 60px;
     line-height: 60px;
     font-weight: 700
 }

 .top-bar .logo img {
     width: 100%;
     max-width: 150px;
     max-height: 80px;
     object-fit: cover
 }

 .logo {
     text-align: left
 }

 .logo h1 {
     margin: 0;
     color: #0e72a1;
     font-size: 60px;
     line-height: 60px;
     font-weight: 700
 }

 .logo img {
     width: 100%;
     max-width: 150px;
     max-height: 80px;
     object-fit: cover
 }

 .top-bar .top-bar-item {
     display: flex;
     align-items: center;
     justify-content: flex-end
 }

 .top-bar .top-bar-icon {
     width: 40px;
     display: flex;
     align-items: center;
     justify-content: center
 }

 .top-bar .top-bar-text {
     padding-left: 15px
 }

 .top-bar .top-bar-text h3 {
     margin: 0 0 5px 0;
     color: #ffffff;
     font-size: 16px;
     font-weight: 400
 }

 .top-bar .top-bar-text p {
     margin: 0;
     color: #ffffff;
     font-size: 13px;
     font-weight: 400
 }

 @media (min-width:992px) {
     .top-bar {
         padding: 0 60px
     }
 }

 @media (max-width:991.98px) {
     .top-bar .logo {
         text-align: center
     }
 }

 .nav-bar {
     position: relative;
     background: #ffffff;
     transition: .3s
 }

 .nav-bar .container-fluid {
     padding: 0
 }

 .nav-bar.nav-sticky {
     position: fixed;
     top: 0;
     width: 100%;
     box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
     z-index: 999
 }

 .nav-bar .navbar {
     height: 100%;
     background: #ffffff !important
 }

 .navbar-dark .navbar-nav .nav-link,
 .navbar-dark .navbar-nav .nav-link:focus,
 .navbar-dark .navbar-nav .nav-link:hover,
 .navbar-dark .navbar-nav .nav-link.active {
     padding: 10px 10px 8px 10px;
     color: #000000
 }

 .navbar-dark .navbar-nav .nav-link:hover,
 .navbar-dark .navbar-nav .nav-link.active {
     color: #88bc4a;
     transition: none
 }

 .navbar-dark .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,0,0,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important
 }

 .nav-bar .dropdown-menu {
     margin-top: 0;
     border: 0;
     border-radius: 0;
     background: #f8f9fa
 }

 .nav-bar .btn {
     color: #000000;
     border: 2px solid #000000;
     border-radius: 0
 }

 .nav-bar .btn:hover {
     color: #0e72a1;
     background: #88bc4a;
     border-color: #88bc4a
 }

 @media (min-width:992px) {
     .nav-bar {
         padding: 0 75px
     }

     .nav-bar.nav-sticky {
         padding: 0 80px
     }

     .nav-bar a.nav-link {
         padding: 8px 15px;
         font-size: 15px;
         text-transform: uppercase
     }
 }

 @media (max-width:991.98px) {
     .nav-bar .navbar {
         padding: 4px 29px
     }

     .nav-bar a.nav-link {
         padding: 5px
     }

     .nav-bar .dropdown-menu {
         box-shadow: none
     }

     .nav-bar .btn {
         display: none
     }

     #large-row {
         flex-direction: column
     }
 }

 .owl-carousel-inner {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     display: flex;
     align-items: center;
     background: rgba(0, 0, 0, .5)
 }

 .header-carousel .owl-carousel-item img {
     height: 100vh;
     object-fit: cover
 }

 .page-header::after {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background: rgba(0, 0, 0, .3);
     z-index: 1
 }

 @media (max-width:768px) {
     .header-carousel .owl-carousel-item {
         position: relative;
         min-height: 500px
     }

     .header-carousel .owl-carousel-item img {
         position: absolute;
         width: 100%;
         height: 100%;
         object-fit: cover
     }

     .header-carousel .owl-carousel-item p {
         font-size: 16px !important
     }
 }

 .header-carousel .owl-dots {
     position: absolute;
     width: 60px;
     height: 100%;
     top: 0;
     right: 30px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center
 }

 .header-carousel .owl-dots .owl-dot {
     position: relative;
     width: 45px;
     height: 45px;
     margin: 5px 0;
     background: var(--dark);
     transition: .5s
 }

 .header-carousel .owl-dots .owl-dot.active {
     width: 60px;
     height: 60px
 }

 .header-carousel .owl-dots .owl-dot img {
     position: absolute;
     width: 100%;
     height: 100%;
     object-fit: cover;
     padding: 2px;
     transition: .5s;
     opacity: .3
 }

 .header-carousel .owl-dots .owl-dot.active img {
     opacity: 1
 }

 #page-content {
     position: relative;
     z-index: 3 !important
 }

 .page-header {
     position: relative;
     padding: 200px 0;
     text-align: center;
     background-image: url('../img/about-solar3.jpg');
     background-size: cover;
     background-position: center
 }

 #about-wallpaper {
     position: relative;
     padding: 200px 0;
     text-align: center;
     background-image: url('../img/solarwallpaper\ \(1\).jpg');
     background-size: cover;
     background-position: center
 }

 #service-wallpaper {
     position: relative;
     padding: 200px 0;
     text-align: center;
     background-image: url('../img/solarwallpaper\ \(2\).jpg');
     background-size: cover;
     background-position: center
 }

 #projects-wallpaper {
     position: relative;
     padding: 200px 0;
     text-align: center;
     background-image: url('../img/solarwallpaper\ \(3\).jpg');
     background-size: cover;
     background-position: center
 }

 #contact-wallpaper {
     position: relative;
     padding: 200px 0;
     text-align: center;
     background-image: url('../img/solarwallpaper\ \(4\).jpg');
     background-size: cover;
     background-position: center
 }

 .page-header h2 {
     position: relative;
     color: #ffffff;
     font-size: 60px;
     font-weight: 700;
     margin-bottom: 20px;
     padding-bottom: 5px
 }

 .page-header h2::after {
     position: absolute;
     content: "";
     width: 100px;
     height: 2px;
     left: calc(50% - 50px);
     bottom: 0;
     background: #0e72a1
 }

 .page-header a {
     position: relative;
     padding: 0 12px;
     font-size: 22px;
     color: #ffffff
 }

 .page-header a:hover {
     color: #ffffff
 }

 .page-header a::after {
     position: absolute;
     content: "/";
     width: 8px;
     height: 8px;
     top: -2px;
     right: -7px;
     text-align: center;
     color: #005796
 }

 .page-header a:last-child::after {
     display: none
 }

 @media (max-width:991.98px) {
     .page-header {
         padding: 60px 0
     }

     .page-header h2 {
         font-size: 45px
     }

     .page-header a {
         font-size: 20px
     }
 }

 @media (max-width:767.98px) {
     .page-header {
         padding: 45px 0
     }

     .page-header h2 {
         font-size: 35px
     }

     .page-header a {
         font-size: 18px
     }
 }

 .section-header {
     position: relative;
     width: 100%;
     margin-bottom: 45px
 }

 .section-header p {
     color: #88bc4a;
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 5px
 }

 .section-header h2 {
     margin: 0;
     position: relative;
     font-size: 50px;
     font-weight: 700
 }

 @media (max-width:767.98px) {
     .section-header h2 {
         font-size: 30px
     }

     #contact-number {
         font-size: 17px
     }

     #contact-email {
         font-size: 17px
     }
 }

 .feature {
     position: relative
 }

 .feature .col-md-12 {
     background: #0e72a1
 }

 .feature .col-md-12:nth-child(2n) {
     color: #0e72a1;
     background: #88bc4a
 }

 .feature .feature-item {
     min-height: 250px;
     padding: 30px;
     display: flex;
     align-items: center;
     justify-content: flex-start
 }

 .feature .feature-icon {
     position: relative;
     width: 60px;
     display: flex;
     align-items: center;
     justify-content: center
 }

 .feature .col-md-12:nth-child(2n) .feature-icon::after {
     background: #88bc4a
 }

 .feature .feature-text {
     padding-left: 30px
 }

 .feature .feature-text h3 {
     margin: 0 0 10px 0;
     color: #ffffff;
     font-size: 25px;
     font-weight: 600
 }

 .feature .feature-text p {
     margin: 0;
     color: #ffffff;
     font-size: 18px;
     font-weight: 400
 }

 .feature .col-md-12:nth-child(2n) h3,
 .feature .col-md-12:nth-child(2n) p {
     color: #ffffff
 }

 #choose-para {
     color: #000000
 }

 .mb-0.choose-sub {
     color: #000000 !important
 }

 @media (min-width:992px) {
     .container.feature {
         max-width: 100% !important
     }

     .feature-text {
         padding-left: calc(((100% - 960px) / 2) + .75rem)
     }
 }

 @media (min-width:1200px) {
     .feature-text {
         padding-left: calc(((100% - 1140px) / 2) + .75rem)
     }
 }

 @media (min-width:1400px) {
     .feature-text {
         padding-left: calc(((100% - 1320px) / 2) + .75rem)
     }
 }

 .btn-lg-square {
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: normal;
     width: 48px;
     height: 48px
 }

 .progress {
     height: 5px
 }

 .progress .progress-bar {
     width: 0;
     transition: 3s;
     background-color: #88bc4a !important
 }

 .about {
     position: relative;
     width: 100%;
     padding: 45px 0
 }

 .about .section-header {
     margin-bottom: 30px
 }

 .fact {
     position: relative;
     width: 100%
 }

 .fact .col-6 {
     display: flex;
     align-items: flex-start
 }

 .fact .fact-left,
 .fact .fact-right {
     padding-top: 60px;
     padding-bottom: 60px
 }

 .fact .fact-text h2 {
     font-size: 35px;
     font-weight: 700
 }

 .fact .fact-text p {
     margin: 0;
     font-size: 16px;
     font-weight: 600;
     text-transform: uppercase
 }

 .fact .fact-left {
     color: #88bc4a;
     background: #0e72a1
 }

 .fact .fact-right {
     color: #0e72a1;
     background: #88bc4a
 }

 .fact .fact-left h2 {
     color: #88bc4a
 }

 .service-item {
     box-shadow: 0 0 45px rgba(0, 0, 0, .08)
 }

 .service-icon {
     position: relative;
     margin: -50px 0 25px 0;
     width: 100px;
     height: 100px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary);
     background: #FFFFFF;
     border-radius: 100px;
     box-shadow: 0 0 45px rgba(0, 0, 0, .08);
     transition: .5s
 }

 .service-item img {
     width: 100%;
     min-height: 200px;
     max-height: 200px;
     border-radius: 5px;
     object-fit: fill
 }

 .video {
     position: relative;
     margin: 45px 0;
     height: 100%;
     min-height: 500px;
     background: linear-gradient(rgba(3, 15, 39, .9), rgba(3, 15, 39, .9)), url(../img/carousel-1.jpg);
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover
 }

 .video .btn-play {
     position: absolute;
     z-index: 1;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
     box-sizing: content-box;
     display: block;
     width: 32px;
     height: 44px;
     border-radius: 50%;
     border: none;
     outline: none;
     padding: 18px 20px 18px 28px
 }

 .video .btn-play:before {
     content: "";
     position: absolute;
     z-index: 0;
     left: 50%;
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
     display: block;
     width: 100px;
     height: 100px;
     background: #88bc4a;
     border-radius: 50%;
     animation: pulse-border 1500ms ease-out infinite
 }

 .video .btn-play:after {
     content: "";
     position: absolute;
     z-index: 1;
     left: 50%;
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
     display: block;
     width: 100px;
     height: 100px;
     background: #88bc4a;
     border-radius: 50%;
     transition: all 200ms
 }

 .video .btn-play:hover:after {
     background-color: darken(#88bc4a, 10%)
 }

 .video .btn-play img {
     position: relative;
     z-index: 3;
     max-width: 100%;
     width: auto;
     height: auto
 }

 .video .btn-play span {
     display: block;
     position: relative;
     z-index: 3;
     width: 0;
     height: 0;
     border-left: 32px solid #0e72a1;
     border-top: 22px solid transparent;
     border-bottom: 22px solid transparent
 }

 @keyframes pulse-border {
     0% {
         transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
         opacity: 1
     }

     100% {
         transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
         opacity: 0
     }
 }

 #videoModal .modal-dialog {
     position: relative;
     max-width: 800px;
     margin: 60px auto 0 auto
 }

 #videoModal .modal-body {
     position: relative;
     padding: 0
 }

 #videoModal .close {
     position: absolute;
     width: 30px;
     height: 30px;
     right: 0;
     top: -30px;
     z-index: 999;
     font-size: 30px;
     font-weight: normal;
     color: #ffffff;
     background: #000000;
     opacity: 1
 }

 .faqs {
     background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url(../img/about-wallpapersd.jpg);
     background-position: center center;
     background-attachment: fixed;
     background-repeat: no-repeat;
     background-size: cover;
     padding: 140px 0;
     position: relative;
     width: 100%
 }

 .faqs .row {
     position: relative
 }

 .faqs .row::after {
     position: absolute;
     content: "";
     width: 1px;
     height: 100%;
     top: 0;
     left: calc(50% - .5px);
     background: #88bc4a
 }

 .faqs #accordion-1 {
     padding-right: 15px
 }

 .faqs #accordion-2 {
     padding-left: 15px
 }

 @media(max-width:767.98px) {
     .faqs .row::after {
         display: none
     }

     .faqs #accordion-1,
     .faqs #accordion-2 {
         padding: 0
     }

     .faqs #accordion-2 {
         padding-top: 15px
     }
 }

 .faqs .card {
     margin-bottom: 15px;
     border: none;
     border-radius: 0
 }

 .faqs .card:last-child {
     margin-bottom: 0
 }

 .faqs .card-header {
     padding: 0;
     border: none;
     background: #ffffff
 }

 .faqs .card-header a {
     display: block;
     padding: 10px 25px;
     width: 100%;
     color: #005796;
     font-size: 18px;
     line-height: 40px;
     border: 1px solid rgba(0, 0, 0, .1);
     transition: .5s
 }

 .faqs .card-header [data-toggle="collapse"][aria-expanded="true"] {
     background: #88bc4a
 }

 .faqs .card-header [data-toggle="collapse"]:after {
     content: '';
     float: right;
     width: 20px;
     height: 20px;
     color: #88bc4a;
     background-image: url('https://api.iconify.design/mdi-chevron-down.svg');
     background-repeat: no-repeat;
     background-size: contain;
     transition: .5s;
     margin-top: 11px
 }

 .faqs .card-header [data-toggle="collapse"][aria-expanded="true"]:after {
     content: '';
     float: right;
     width: 20px;
     height: 20px;
     color: #88bc4a;
     background-image: url('https://api.iconify.design/mdi-chevron-up.svg');
     background-repeat: no-repeat;
     background-size: contain;
     transition: .5s;
     margin-top: 11px
 }

 .faqs .card-body {
     padding: 20px 25px;
     font-size: 16px;
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, .1);
     border-top: none
 }

 .testimonial {
     background: #88bc4a;
     background-size: cover
 }

 .testimonial-item img {
     width: 60px !important;
     height: 60px !important;
     border-radius: 60px
 }

 .testimonial-carousel .owl-nav {
     position: absolute;
     top: 0;
     right: 0;
     display: flex
 }

 .testimonial-carousel .owl-nav .owl-prev,
 .testimonial-carousel .owl-nav .owl-next {
     margin-left: 15px;
     color: var(--bs-primary);
     font-size: 30px;
     line-height: 0;
     transition: .5s
 }

 .testimonial-carousel .owl-nav .owl-prev:hover,
 .testimonial-carousel .owl-nav .owl-next:hover {
     color: var(--bs-dark)
 }

 .blog {
     position: relative;
     width: 100%;
     padding: 45px 0 15px 0
 }

 .single {
     position: relative;
     padding: 45px 0
 }

 .single .related-slider {
     position: relative;
     margin: 0 -15px;
     width: calc(100% + 30px)
 }

 .single .related-slider .owl-nav {
     position: absolute;
     width: 90px;
     top: -55px;
     right: 15px;
     display: flex
 }

 .single .related-slider .owl-nav .owl-prev,
 .single .related-slider .owl-nav .owl-next {
     margin-left: 15px;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #0e72a1;
     background: #88bc4a;
     font-size: 16px;
     transition: .3s
 }

 .single .related-slider .owl-nav .owl-prev:hover,
 .single .related-slider .owl-nav .owl-next:hover {
     color: #88bc4a;
     background: #0e72a1
 }

 @media (min-width:992px) {
     .contact-info::after {
         position: absolute;
         content: "";
         width: 0;
         height: 100%;
         top: 0;
         left: 50%;
         border-left: 1px dashed rgba(255, 255, 255, .2)
     }
 }

 @media (max-width:991.98px) {
     .contact-info::after {
         position: absolute;
         content: "";
         width: 100%;
         height: 0;
         top: 50%;
         left: 0;
         border-top: 1px dashed rgba(255, 255, 255, .2)
     }
 }

 .animal-item {
     position: relative;
     display: block
 }

 .gallery-1 {
     width: 100%;
     max-width: 355px;
     height: 427px
 }

 .gallery-2 {
     width: 100%;
     max-width: 355px;
     height: 207px
 }

 #home-projects {
     background: rgb(251, 255, 247)
 }

 #home-gallery {
     background: rgb(251, 255, 247);
     background: linear-gradient(90deg, rgba(251, 255, 247, 1) 0%, rgba(230, 243, 216, 1) 28%, rgb(228, 255, 196) 100%)
 }

 .footer {
     position: relative;
     padding-top: 90px;
     background: #030f27;
     color: #ffffff
 }

 .footer .footer-contact,
 .footer .footer-link {
     position: relative;
     margin-bottom: 45px
 }

 .footer h2 {
     position: relative;
     margin-bottom: 20px;
     padding-bottom: 10px;
     font-size: 20px;
     font-weight: 600;
     color: #ffffff
 }

 .footer h2::after {
     position: absolute;
     content: "";
     width: 60px;
     height: 2px;
     left: 0;
     bottom: 0;
     background: #88bc4a
 }

 .footer .footer-link a {
     display: block;
     margin-bottom: 10px;
     color: #ffffff;
     transition: .3s
 }

 .footer .footer-link a:hover {
     color: #88bc4a;
     letter-spacing: 1px
 }

 .footer .footer-contact p i {
     width: 25px
 }

 .footer .footer-social {
     position: relative;
     margin-top: 20px
 }

 .footer .footer-social a {
     display: inline-block;
     width: 40px;
     height: 40px;
     padding: 7px 0;
     text-align: center;
     border: 1px solid rgba(256, 256, 256, .3);
     border-radius: 60px;
     transition: .3s
 }

 .footer .footer-social a i {
     font-size: 15px;
     color: #ffffff
 }

 .footer .footer-social a:hover {
     background: #88bc4a;
     border-color: #88bc4a
 }

 .footer .footer-social a:hover i {
     color: #0e72a1
 }

 .footer .copyright {
     padding: 30px 15px
 }

 .footer .copyright p {
     margin: 0;
     color: #ffffff
 }

 .footer .copyright .col-md-6:last-child p {
     text-align: right
 }

 .footer .copyright p a {
     color: #88bc4a;
     font-weight: 500;
     letter-spacing: 1px
 }

 .footer .copyright p a:hover {
     color: #ffffff
 }

 @media (max-width:768px) {

     .footer .copyright p,
     .footer .copyright .col-md-6:last-child p {
         margin: 5px 0;
         text-align: center
     }

     #project-heading {
         font-size: 25px !important
     }
 }

 #frequently {
     color: white
 }

 #frequently-h2 {
     color: white
 }

 .img-border {
     position: relative;
     height: 100%;
     min-height: 500px
 }

 .img-border::before {
     position: absolute;
     content: "";
     top: 0;
     left: 0;
     right: 3rem;
     bottom: 3rem;
     border: 5px solid #005796;
     border-radius: 6px
 }

 .img-border img {
     position: absolute;
     top: 3rem;
     left: 3rem;
     width: calc(100% - 3rem);
     height: calc(100% - 3rem);
     object-fit: cover;
     border-radius: 6px
 }

 .vendor-carousel img {
     width: 100%;
     max-width: 200px;
     min-height: 100px;
     max-height: 100px;
     object-fit: contain
 }

 .jarallax {
     min-height: 350px;
     transition: all .5s ease-in-out
 }

 .service-block {
     transition: all .5s ease-in-out
 }

 .service-block:hover .jarallax {
     opacity: 0
 }

 .bg-secondary {
     background-color: #0e72a1 !important
 }

 .container-service {
     position: relative
 }

 .container-service::before {
     position: absolute;
     content: '';
     background: var(--bs-light);
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     clip-path: polygon(0 0, 100% 0, 100% 30%, 0 70%);
     z-index: -1
 }

 .service-item {
     position: relative;
     height: 100%;
     padding: 45px 30px;
     background: var(--bs-white);
     box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23)
 }

 #home-service {
     padding: 0 !important
 }

 .service-item::before {
     position: absolute;
     content: "";
     width: 100%;
     height: 0;
     left: 0;
     bottom: 0;
     transition: .5s;
     background: var(--bs-primary)
 }

 .service-item:hover::before {
     height: 100%;
     top: 0
 }

 .service-item * {
     position: relative;
     transition: .5s;
     z-index: 1
 }

 .service-item:hover h5,
 .service-item:hover p {
     color: var(--bs-white)
 }

 .service-item:hover .icon-box-primary::before {
     background: var(--bs-dark)
 }

 .service-item:hover .icon-box-primary i {
     color: var(--bs-white) !important
 }

 #service-first {
     background: rgb(170, 227, 113);
     background: linear-gradient(90deg, rgb(228, 240, 218) 0%, rgba(230, 243, 216, 1) 28%, rgb(236, 241, 230) 100%)
 }

 #project-heading {
     white-space: nowrap
 }

 .whapp {
     position: sticky;
     bottom: 18px;
     position: fixed;
     left: 30px;
     z-index: 100 !important
 }

 .whapp-btn {
     display: flex;
     text-align: center;
     border-radius: 50%;
     height: 3rem;
     min-width: 3rem;
     background-color: #54c151;
     box-shadow: 0 4px 8px rgba(0, 0, 0, .18);
     -webkit-transition-duration: .1s;
     transition-duration: .1s;
     padding: .25rem;
     align-content: center;
     justify-content: center;
     align-items: center
 }

 .display-5 {
     font-weight: 600 !important;
     font-size: 2.5rem !important
 }

 #projects-wrapper {
     background-color: #f4f5f7
 }

 .whapp-btn .float-whatsapp {
     width: 25px;
     display: flex;
     text-align: center
 }

 .whapp-btn:hover {
     background-color: #439a41
 }

 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 0 0 0 rgba(84, 193, 81, .7);
         border-radius: 50%
     }

     70% {
         transform: scale(1.2);
         box-shadow: 0 0 0 10px rgba(84, 193, 81, 0), 0 0 0 20px rgba(84, 193, 81, .4), 0 0 0 30px rgba(84, 193, 81, .2), 0 0 0 40px rgba(84, 193, 81, 0);
         border-radius: 50%
     }

     100% {
         transform: scale(1);
         box-shadow: 0 0 0 0 rgba(84, 193, 81, 0);
         border-radius: 50%
     }
 }

 .animated.pulse {
     animation: pulse infinite;
     animation-duration: 2s
 }

 #spinner {
     opacity: 0;
     visibility: hidden;
     transition: opacity .5s ease-out, visibility 0s linear .5s;
     z-index: 99999
 }

 #spinner.show {
     transition: opacity .5s ease-out, visibility 0s linear 0s;
     visibility: visible;
     opacity: 1
 }

 #spinner-icon {
     width: 64px;
     height: 64px;
     object-fit: cover
 }

 #about-usheading {
     color: white !important
 }