:root {
                           --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                           --heading-font: "Raleway", sans-serif;
                           --nav-font: "Poppins", sans-serif;
                       }
                       
                        :root {
                           --background-color: #f9f9f4;
                           --default-color: #252f1b;
                           --heading-color: #1e2012;
                           --accent-color: #628e49;
                           --contrast-color: #ffffff;
                       }
                       
                        :root {
                           --nav-color: #252f1b;
                           --nav-hover-color: #628e49;
                           --nav-dropdown-background-color: #f9f9f4;
                           --nav-dropdown-color: #252f1b;
                           --nav-dropdown-hover-color: #628e49;
                       }
                       
                        :root {
                           scroll-behavior: smooth;
                       }
                       
                        :root {
                           --bg-position-large: center;
                           --bg-position-small: top;
                       }
                       
                       body {
                           color: var(--default-color);
                           background-color: var(--background-color);
                           font-family: var(--default-font);
                       }
                       
                       a {
                           color: var(--accent-color);
                           text-decoration: none;
                           transition: 0.3s;
                       }
                       
                       a:hover {
                           color: color-mix(in srgb, var(--accent-color), transparent 25%);
                           text-decoration: none;
                       }
                       
                       h1,
                       h2,
                       h3,
                       h4,
                       h5,
                       h6 {
                           color: var(--heading-color);
                           font-family: var(--heading-font);
                       }
                       
                       .header {
                           color: var(--default-color);
                           background-color: var(--background-color);
                           padding: 15px 0;
                           transition: all 0.5s;
                           z-index: 997;
                       }
                       
                       .header .logo {
                           line-height: 1;
                       }
                       
                       .header .logo img {
                           width: 300px;
                           height: 100px;
                           margin-right: 8px;
                       }
                       
                       .header .logo h1 {
                           font-size: 30px;
                           margin: 0;
                           font-weight: 700;
                           color: var(--heading-color);
                       }
                       
                       .header .btn-getstarted,
                       .header .btn-getstarted:focus {
                           color: var(--contrast-color);
                           background: var(--accent-color);
                           font-size: 14px;
                           padding: 8px 25px;
                           margin: 0 0 0 30px;
                           border-radius: 30px;
                           transition: 0.3s;
                       }
                       
                       .header .btn-getstarted:hover,
                       .header .btn-getstarted:focus:hover {
                           color: var(--contrast-color);
                           background: color-mix(in srgb, var(--accent-color), transparent 15%);
                       }
                       
                       @media (max-width: 1200px) {
                           .header .logo {
                               order: 1;
                           }
                           .header .logo img {
                               width: 140px;
                               height: 90px;
                               margin-right: 8px;
                           }
                           .header .btn-getstarted {
                               order: 2;
                               margin: 0 15px 0 0;
                               padding: 6px 15px;
                           }
                           .header .navmenu {
                               order: 3;
                           }
                       }
                       
                       @media (max-width: 425px) {
                           .header .logo img {
                               width: 130px;
                               height: 80px;
                               margin-right: 8px;
                           }
                       }
                       
                       .scrolled .header {
                           box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);
                       }
                       
                       @media (min-width: 1200px) {
                           .navmenu {
                               padding: 0;
                           }
                           .navmenu ul {
                               margin: 0;
                               padding: 0;
                               display: flex;
                               list-style: none;
                               align-items: center;
                           }
                           .navmenu li {
                               position: relative;
                           }
                           .navmenu a,
                           .navmenu a:focus {
                               color: var(--nav-color);
                               padding: 18px 15px;
                               font-size: 16px;
                               font-family: var(--nav-font);
                               font-weight: 400;
                               display: flex;
                               align-items: center;
                               justify-content: space-between;
                               white-space: nowrap;
                               transition: 0.3s;
                           }
                           .navmenu a i,
                           .navmenu a:focus i {
                               font-size: 12px;
                               line-height: 0;
                               margin-left: 5px;
                               transition: 0.3s;
                           }
                           .navmenu li:last-child a {
                               padding-right: 0;
                           }
                           .navmenu li:hover>a,
                           .navmenu .active,
                           .navmenu .active:focus {
                               color: var(--nav-hover-color);
                           }
                           .navmenu .dropdown ul {
                               margin: 0;
                               padding: 10px 0;
                               background: var(--nav-dropdown-background-color);
                               display: block;
                               position: absolute;
                               visibility: hidden;
                               left: 14px;
                               top: 130%;
                               opacity: 0;
                               transition: 0.3s;
                               border-radius: 4px;
                               z-index: 99;
                               box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
                           }
                           .navmenu .dropdown ul li {
                               min-width: 200px;
                           }
                           .navmenu .dropdown ul a {
                               padding: 10px 20px;
                               font-size: 15px;
                               text-transform: none;
                               color: var(--nav-dropdown-color);
                           }
                           .navmenu .dropdown ul a i {
                               font-size: 12px;
                           }
                           .navmenu .dropdown ul a:hover,
                           .navmenu .dropdown ul .active:hover,
                           .navmenu .dropdown ul li:hover>a {
                               color: var(--nav-dropdown-hover-color);
                           }
                           .navmenu .dropdown:hover>ul {
                               opacity: 1;
                               top: 100%;
                               visibility: visible;
                           }
                           .navmenu .dropdown .dropdown ul {
                               top: 0;
                               left: -90%;
                               visibility: hidden;
                           }
                           .navmenu .dropdown .dropdown:hover>ul {
                               opacity: 1;
                               top: 0;
                               left: -100%;
                               visibility: visible;
                           }
                       }
                       
                       @media (max-width: 1199px) {
                           .mobile-nav-toggle {
                               color: var(--nav-color);
                               font-size: 28px;
                               line-height: 0;
                               margin-right: 10px;
                               cursor: pointer;
                               transition: color 0.3s;
                           }
                           .navmenu {
                               padding: 0;
                               z-index: 9997;
                           }
                           .navmenu ul {
                               display: none;
                               position: absolute;
                               inset: 60px 20px 20px 20px;
                               padding: 10px 0;
                               margin: 0;
                               border-radius: 6px;
                               background-color: var(--nav-dropdown-background-color);
                               overflow-y: auto;
                               transition: 0.3s;
                               z-index: 9998;
                               box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
                           }
                           .navmenu a,
                           .navmenu a:focus {
                               color: var(--nav-dropdown-color);
                               padding: 10px 20px;
                               font-family: var(--nav-font);
                               font-size: 17px;
                               font-weight: 500;
                               display: flex;
                               align-items: center;
                               justify-content: space-between;
                               white-space: nowrap;
                               transition: 0.3s;
                           }
                           .navmenu a i,
                           .navmenu a:focus i {
                               font-size: 12px;
                               line-height: 0;
                               margin-left: 5px;
                               width: 30px;
                               height: 30px;
                               display: flex;
                               align-items: center;
                               justify-content: center;
                               border-radius: 50%;
                               transition: 0.3s;
                               background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
                           }
                           .navmenu a i:hover,
                           .navmenu a:focus i:hover {
                               background-color: var(--accent-color);
                               color: var(--contrast-color);
                           }
                           .navmenu a:hover,
                           .navmenu .active,
                           .navmenu .active:focus {
                               color: var(--nav-dropdown-hover-color);
                           }
                           .navmenu .active i,
                           .navmenu .active:focus i {
                               background-color: var(--accent-color);
                               color: var(--contrast-color);
                               transform: rotate(180deg);
                           }
                           .navmenu .dropdown ul {
                               position: static;
                               display: none;
                               z-index: 99;
                               padding: 10px 0;
                               margin: 10px 20px;
                               background-color: var(--nav-dropdown-background-color);
                               border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
                               box-shadow: none;
                               transition: all 0.5s ease-in-out;
                           }
                           .navmenu .dropdown ul ul {
                               background-color: rgba(33, 37, 41, 0.1);
                           }
                           .navmenu .dropdown>.dropdown-active {
                               display: block;
                               background-color: rgba(33, 37, 41, 0.03);
                           }
                           .mobile-nav-active {
                               overflow: hidden;
                           }
                           .mobile-nav-active .mobile-nav-toggle {
                               color: #fff;
                               position: absolute;
                               font-size: 32px;
                               top: 15px;
                               right: 15px;
                               margin-right: 0;
                               z-index: 9999;
                           }
                           .mobile-nav-active .navmenu {
                               position: fixed;
                               overflow: hidden;
                               inset: 0;
                               background: rgba(33, 37, 41, 0.8);
                               transition: 0.3s;
                           }
                           .mobile-nav-active .navmenu>ul {
                               display: block;
                           }
                       }
                       
                       .footer {
                           color: var(--default-color);
                           background-color: var(--background-color);
                           font-size: 14px;
                           padding: 40px 0;
                           position: relative;
                           box-shadow: 0px 0px 12px 0px color-mix(in srgb, var(--default-color), transparent 90%);
                       }
                       
                       .footer .copyright p {
                           margin-bottom: 0;
                       }
                       
                       .footer .social-links {
                           margin-top: 20px;
                       }
                       
                       .footer .social-links a {
                           display: flex;
                           align-items: center;
                           justify-content: center;
                           width: 40px;
                           height: 40px;
                           border-radius: 50%;
                           border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
                           font-size: 16px;
                           color: color-mix(in srgb, var(--default-color), transparent 50%);
                           margin: 0 5px;
                           transition: 0.3s;
                       }
                       
                       .footer .social-links a:hover {
                           color: var(--accent-color);
                           border-color: var(--accent-color);
                       }
                       
                       .footer .credits {
                           margin-top: 10px;
                           font-size: 13px;
                           text-align: center;
                       }
                       
                       #preloader {
                           position: fixed;
                           inset: 0;
                           z-index: 999999;
                           overflow: hidden;
                           background: var(--background-color);
                           transition: all 0.6s ease-out;
                       }
                       
                       #preloader:before {
                           content: "";
                           position: fixed;
                           top: calc(50% - 30px);
                           left: calc(50% - 30px);
                           border: 6px solid #ffffff;
                           border-color: var(--accent-color) transparent var(--accent-color) transparent;
                           border-radius: 50%;
                           width: 60px;
                           height: 60px;
                           animation: animate-preloader 1.5s linear infinite;
                       }
                       
                       @keyframes animate-preloader {
                           0% {
                               transform: rotate(0deg);
                           }
                           100% {
                               transform: rotate(360deg);
                           }
                       }
                       
                       .scroll-top {
                           position: fixed;
                           visibility: hidden;
                           opacity: 0;
                           right: 15px;
                           bottom: 15px;
                           z-index: 99999;
                           background-color: var(--accent-color);
                           width: 40px;
                           height: 40px;
                           border-radius: 4px;
                           transition: all 0.4s;
                       }
                       
                       .scroll-top i {
                           font-size: 24px;
                           color: var(--contrast-color);
                           line-height: 0;
                       }
                       
                       .scroll-top:hover {
                           background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
                           color: var(--contrast-color);
                       }
                       
                       .scroll-top.active {
                           visibility: visible;
                           opacity: 1;
                       }
                       
                       @media screen and (max-width: 768px) {
                           [data-aos-delay] {
                               transition-delay: 0 !important;
                           }
                       }
                       
                       .page-title {
                           --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
                           color: var(--default-color);
                           background-color: var(--background-color);
                           padding: 20px 0;
                           position: relative;
                       }
                       
                       .page-title h1 {
                           font-size: 28px;
                           font-weight: 700;
                           margin: 0;
                       }
                       
                       .page-title .breadcrumbs ol {
                           display: flex;
                           flex-wrap: wrap;
                           list-style: none;
                           padding: 0 0 10px 0;
                           margin: 0;
                           font-size: 14px;
                           font-weight: 400;
                       }
                       
                       .page-title .breadcrumbs ol li+li {
                           padding-left: 10px;
                       }
                       
                       .page-title .breadcrumbs ol li+li::before {
                           content: "/";
                           display: inline-block;
                           padding-right: 10px;
                           color: color-mix(in srgb, var(--default-color), transparent 70%);
                       }
                       
                       section,
                       .section {
                           color: var(--default-color);
                           background-color: var(--background-color);
                           padding: 60px 0;
                           scroll-margin-top: 90px;
                           overflow: clip;
                       }
                       
                       @media (max-width: 1199px) {
                           section,
                           .section {
                               scroll-margin-top: 66px;
                           }
                       }
                       
                       .section-title {
                           text-align: center;
                           padding-bottom: 60px;
                           position: relative;
                       }
                       
                       .section-title h2 {
                           font-size: 32px;
                           font-weight: 700;
                           position: relative;
                       }
                       
                       .section-title h2:before,
                       .section-title h2:after {
                           content: "";
                           width: 50px;
                           height: 2px;
                           background: var(--accent-color);
                           display: inline-block;
                       }
                       
                       .section-title h2:before {
                           margin: 0 15px 10px 0;
                       }
                       
                       .section-title h2:after {
                           margin: 0 0 10px 15px;
                       }
                       
                       .section-title p {
                           margin-bottom: 0;
                       }
                       
                       @media (max-width:466px) {
                           .section-title h2 {
                               font-size: 20px;
                           }
                           .section-title h2:before {
                               margin: 0 13px 3px 0;
                           }
                           .section-title h2:after {
                               margin: 0 0 5px 15px;
                           }
                       }
                       
                       @media (max-width:386px) {
                           .section-title h2 {
                               font-size: 22px;
                           }
                       }
                       
                       @media (max-width:368px) {
                           .section-title h2 {
                               font-size: 18px;
                           }
                           /* .section-title h2:before,
    .section-title h2:after {
        width: 35px;
    } */
                           .section-title h2:before {
                               margin: 0 13px 3px 0;
                           }
                           .section-title h2:after {
                               margin: 0 0 5px 15px;
                           }
                       }
                       
                       @media (max-width:328px) {
                           .section-title h2 {
                               font-size: 18px;
                           }
                           .section-title h2:before,
                           .section-title h2:after {
                               width: 35px;
                           }
                           .section-title h2:before {
                               margin: 0 15px 5px 0;
                           }
                           .section-title h2:after {
                               margin: 0 0 5px 15px;
                           }
                       }
                       
                       @media (max-width:305px) {
                           .section-title h2 {
                               font-size: 16px;
                           }
                       }
                       
                       @media (max-width:305px) {
                           .section-title h2 {
                               font-size: 15px;
                           }
                       }
                       
                       @media (max-width:254px) {
                           .section-title h2 {
                               font-size: 15px;
                           }
                       }
                       
                       @media (max-width:254px) {
                           .section-title h2 {
                               font-size: 13px;
                           }
                       }
                       
                       @media (max-width:219px) {
                           .section-title h2 {
                               font-size: 11px;
                           }
                       }
                       
                       .hero {
                           width: 100%;
                           min-height: 100vh;
                           position: relative;
                           padding: 80px 0 60px 0;
                           display: flex;
                           align-items: center;
                           justify-content: center;
                           background: url("../img/afri_header1.jpg");
                           background-repeat: no-repeat;
                           background-size: cover;
                           background-position: center center;
                       }
                       
                       .hero .hero_text {
                           margin-top: 350px;
                       }
                       
                       .hero h1 {
                           margin: 0;
                           font-size: 48px;
                           font-weight: 700;
                           line-height: 56px;
                           color: var(--heading-color);
                       }
                       
                       .hero p {
                           color: #434540;
                           /* color: white; */
                           margin: 5px 0 20px 0;
                           font-size: 28px;
                           font-weight: 400;
                       }
                       
                       .hero .btn-get-started {
                           font-family: var(--heading-font);
                           font-weight: 500;
                           font-size: 15px;
                           letter-spacing: 1px;
                           display: inline-block;
                           padding: 10px 25px;
                           border-radius: 10px;
                           transition: 0.3s;
                           border: 2px solid var(--accent-color);
                       }
                       
                       .hero .btn-get-started:hover {
                           color: var(--contrast-color);
                           background: var(--accent-color);
                       }
                       
                       .hero .animated {
                           animation: up-down 2s ease-in-out infinite alternate-reverse both;
                       }
                       
                       @media (max-width: 786px) {
                           .hero {
                               width: 100vw;
                               background-position: 90% 90%;
                               background-size: cover;
                               overflow: hidden;
                           }
                           .hero .hero_text {
                               margin-top: 100px;
                               width: 60%;
                           }
                           .hero h1 {
                               font-size: 24px;
                               line-height: 30px;
                               color: var(--heading-color);
                               margin-top: 50px;
                           }
                           .hero p {
                               font-size: 16px;
                               line-height: 18px;
                               color: #434540;
                           }
                       }
                       
                       @media (min-width: 786px) and (max-width: 992px) {
                           .hero .hero_text {
                               margin-top: 150px;
                               width: 70%;
                           }
                           .hero h1 {
                               font-size: 48px;
                               font-weight: 700;
                           }
                           .hero p {
                               font-size: 28px;
                               font-weight: 400;
                           }
                       }
                       
                       @media (max-width: 506px) {
                           .hero {
                               width: 100vw;
                               background-size: cover;
                               background-position: 60% center;
                           }
                           .hero .hero_text {
                               margin-top: 150px;
                               width: 70%;
                           }
                           .hero h1 {
                               color: var(--heading-color);
                           }
                           .hero .btn-get-started {
                               font-weight: 700;
                               font-size: 15px;
                               border: 3px solid var(--accent-color);
                           }
                       }
                       
                       @media (min-width:1200px) {
                           .hero {
                               background-position: center top;
                           }
                       }
                       
                       @media (min-width: 1600px) {
                           .hero {
                               background-position: center 20%;
                           }
                           .hero .hero_text {
                               width: 1000px;
                               margin-right: -500px;
                               padding: 0;
                           }
                           .hero .btn-get-started {
                               font-weight: 600;
                               font-size: 20px;
                               letter-spacing: 3px;
                               display: inline-block;
                               padding: 18px 30px;
                               border-radius: 15px;
                               transition: 0.3s;
                               border: 3px solid var(--accent-color);
                           }
                       }
                       
                       @keyframes up-down {
                           0% {
                               transform: translateY(10px);
                           }
                           100% {
                               transform: translateY(-10px);
                           }
                       }
                       
                       .clients {
                           --background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
                           padding: 20px 0;
                       }
                       
                       .clients .client-logo {
                           display: flex;
                           justify-content: center;
                           align-items: center;
                           overflow: hidden;
                       }
                       
                       .clients .client-logo img {
                           padding: 20px 40px;
                           max-width: 60%;
                           transition: 0.3s;
                           opacity: 0.5;
                       }
                       
                       @media (max-width: 640px) {
                           .clients .client-logo img {
                               padding: 20px;
                           }
                       }
                       
                       .about .content h3 {
                           font-weight: 700;
                           font-size: 34px;
                           margin-bottom: 30px;
                       }
                       
                       .about .content p {
                           margin-bottom: 30px;
                       }
                       
                       .about ul {
                           list-style: none;
                           padding: 0;
                       }
                       
                       .about ul li {
                           padding-left: 28px;
                           position: relative;
                       }
                       
                       .about ul li+li {
                           margin-top: 15px;
                       }
                       
                       .about ul i {
                           position: absolute;
                           left: 0;
                           top: 2px;
                           font-size: 20px;
                           color: var(--accent-color);
                           line-height: 1;
                       }
                       
                       .about .about-btn {
                           padding: 8px 25px 9px 25px;
                           color: var(--accent-color);
                           border-radius: 10px;
                           transition: 0.3s;
                           text-transform: uppercase;
                           font-weight: 600;
                           font-size: 13px;
                           display: inline-flex;
                           align-items: center;
                           border: 2px solid var(--accent-color);
                       }
                       
                       .about .about-btn i {
                           font-size: 16px;
                           padding-left: 5px;
                       }
                       
                       .about .content .about-btn:hover {
                           background: var(--accent-color);
                           color: var(--contrast-color);
                       }
                       
                       .about .icon-box i {
                           font-size: 40px;
                           color: var(--accent-color);
                           margin-bottom: 10px;
                       }
                       
                       .about .icon-box h4 {
                           font-size: 20px;
                           font-weight: 700;
                           margin: 0 0 10px 0;
                       }
                       
                       .about .icon-box h4 a {
                           color: var(--heading-color);
                           transition: 0.3s;
                       }
                       
                       .about .icon-box p {
                           font-size: 15px;
                           color: color-mix(in srgb, var(--default-color), transparent 40%);
                           margin-bottom: 0;
                       }
                       
                       .about .icon-box:hover h4 a {
                           color: var(--accent-color);
                       }
                       
                       .about .mission {
                           border: 2px solid var(--accent-color);
                           border-radius: 10px;
                           padding: 10px;
                           margin-bottom: 10px;
                       }
                       
                       .stats .stats-item {
                           padding: 10px;
                       }
                       
                       .stats .stats-item i {
                           font-size: 44px;
                           color: var(--accent-color);
                           line-height: 0;
                           margin-right: 15px;
                       }
                       
                       .stats .stats-item .purecounter {
                           color: var(--heading-color);
                           font-size: 40px;
                           display: block;
                           font-weight: 700;
                           line-height: 40px;
                       }
                       
                       .stats .stats-item p {
                           color: color-mix(in srgb, var(--default-color), transparent 40%);
                           padding: 15px 0 0 0;
                           margin: 0;
                           font-family: var(--heading-font);
                           font-size: 14px;
                       }
                       
                       .services .service-item ul {
                           list-style: none;
                           margin: 0;
                           padding: 0;
                       }
                       
                       .services .service-item ul li {
                           margin-top: 10px;
                       }
                       
                       .services .service-item ul i {
                           color: var(--accent-color);
                           font-size: 30px;
                       }
                       
                       .services .service-item:hover ul i {
                           color: var(--contrast-color);
                       }
                       
                       .services .service-item {
                           box-shadow: 0px 0 30px 0 color-mix(in srgb, var(--default-color), transparent 90%);
                           padding: 50px 30px;
                           transition: all ease-in-out 0.4s;
                           min-height: 350px;
                           width: 100%;
                           overflow: hidden;
                           z-index: 1;
                       }
                       
                       .services .service-item:before {
                           content: "";
                           position: absolute;
                           background: color-mix(in srgb, var(--accent-color), transparent 96%);
                           right: -80px;
                           top: -80px;
                           width: 150px;
                           height: 150px;
                           border-radius: 50%;
                           transition: all 0.3s;
                           z-index: -1;
                       }
                       
                       .services .service-item:after {
                           content: "";
                           position: absolute;
                           background: color-mix(in srgb, var(--accent-color), transparent 97%);
                           right: -140px;
                           top: -140px;
                           width: 250px;
                           height: 250px;
                           border-radius: 50%;
                           transition: all 0.3s;
                           z-index: -1;
                       }
                       
                       .services .service-item .service-icon {
                           background: var(--accent-color);
                           color: var(--contrast-color);
                           font-size: 24px;
                           transition: 0.3s;
                           display: flex;
                           align-items: center;
                           justify-content: center;
                           width: 56px;
                           height: 56px;
                           border-radius: 50%;
                       }
                       
                       .services .service-item h4 {
                           font-weight: 600;
                           margin: 15px 0 0 0;
                           transition: 0.3s;
                           font-size: 1em;
                       }
                       
                       .services .service-item h4 a {
                           color: var(--heading-color);
                       }
                       
                       .services .service-item p {
                           line-height: 24px;
                           font-size: 14px;
                           margin: 10px 0 0 0;
                       }
                       
                       .services .service-item:hover:before,
                       .services .service-item:hover:after {
                           background: var(--accent-color);
                           right: 0;
                           top: 0;
                           width: 100%;
                           height: 100%;
                           border-radius: 0px;
                       }
                       
                       .services .service-item:hover h4 a,
                       .services .service-item:hover p {
                           color: var(--contrast-color);
                       }
                       
                       .services .service-item:hover .service-icon {
                           background: var(--contrast-color);
                           color: var(--accent-color);
                       }
                       
                       .alt-services .img {
                           border-radius: 8px;
                           overflow: hidden;
                       }
                       
                       .alt-services .img img {
                           transition: 0.6s;
                       }
                       
                       .alt-services .details {
                           position: absolute;
                           left: 20px;
                           right: 20px;
                           bottom: 20px;
                           padding: 30px;
                           transition: all ease-in-out 0.3s;
                           background: color-mix(in srgb, var(--contrast-color), transparent 5%);
                           text-align: center;
                           border-radius: 8px;
                           box-shadow: 0px 0 25px color-mix(in srgb, var(--default-color), transparent 92%);
                       }
                       
                       .alt-services .details h3 {
                           font-weight: 700;
                           margin: 10px 0 15px 0;
                           font-size: 22px;
                           transition: ease-in-out 0.3s;
                       }
                       
                       .alt-services .details p {
                           color: color-mix(in srgb, var(--default-color), transparent 10%);
                           line-height: 24px;
                           font-size: 14px;
                           margin-bottom: 0;
                       }
                       
                       .alt-services .service-item:hover .details h3 {
                           color: var(--accent-color);
                       }
                       
                       .alt-services .service-item:hover .img img {
                           transform: scale(1.2);
                       }
                       
                       @media (max-width:320px) {
                           .alt-services .details {
                               left: 15px;
                               right: 15px;
                               bottom: 15px;
                               padding: 12px;
                           }
                           .alt-services .details h3 {
                               font-weight: 700;
                               margin: 10px 0 15px 0;
                               font-size: 16px;
                               transition: ease-in-out 0.3s;
                           }
                           .alt-services .details p {
                               line-height: 20px;
                               font-size: 12px;
                           }
                       }
                       
                       @media (max-width:408px) {
                           .alt-services .details {
                               left: 15px;
                               right: 15px;
                               bottom: 15px;
                               padding: 12px;
                           }
                           .alt-services .details h3 {
                               font-weight: 700;
                               margin: 10px 0 15px 0;
                               font-size: 14px;
                               transition: ease-in-out 0.3s;
                           }
                           .alt-services .details p {
                               line-height: 18px;
                               font-size: 12px;
                           }
                       }
                       
                       @media (max-width:292px) {
                           .alt-services .details {
                               left: 15px;
                               right: 15px;
                               bottom: 15px;
                               padding: 12px;
                           }
                           .alt-services .details h3 {
                               font-weight: 700;
                               margin: 10px 0 15px 0;
                               font-size: 10px;
                               transition: ease-in-out 0.3s;
                           }
                           .alt-services .details p {
                               line-height: 16px;
                               font-size: 8px;
                           }
                       }
                       
                       @media (max-width:242px) {
                           .alt-services .details {
                               left: 15px;
                               right: 15px;
                               bottom: 15px;
                               padding: 8px;
                               Fh
                           }
                           .alt-services .details h3 {
                               font-weight: 600;
                               margin: 8px 0 13px 0;
                               font-size: 8px;
                               transition: ease-in-out 0.3s;
                           }
                           .alt-services .details p {
                               line-height: 16px;
                               font-size: 6px;
                           }
                       }
                       
                       .features .features-item {
                           background-color: var(--box-background-color);
                           display: flex;
                           align-items: center;
                           padding: 20px;
                           transition: 0.3s;
                           border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
                           position: relative;
                       }
                       
                       .features .features-item i {
                           font-size: 32px;
                           padding-right: 10px;
                           line-height: 0;
                       }
                       
                       .features .features-item h3 {
                           font-weight: 700;
                           margin: 0;
                           padding: 0;
                           line-height: 1;
                           font-size: 16px;
                       }
                       
                       .features .features-item h3 a {
                           color: var(--heading-color);
                           transition: 0.3s;
                       }
                       
                       .features .features-item:hover {
                           border-color: var(--accent-color);
                       }
                       
                       .features .features-item:hover h3 a {
                           color: var(--accent-color);
                       }
                       
                       .team .team-member {
                           overflow: hidden;
                           border-radius: 5px;
                           box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 90%);
                           height: 100%;
                       }
                       
                       .team .team-member .member-img {
                           position: relative;
                           overflow: hidden;
                           width: 100%;
                           height: 50%;
                       }
                       
                       .team .team-member .member-img img {
                           width: 100%;
                           height: 100%;
                           object-fit: cover;
                           /* Ensures the image covers the div without distortion */
                       }
                       
                       .team .team-member .social {
                           position: absolute;
                           left: 0;
                           bottom: 30px;
                           right: 0;
                           opacity: 0;
                           transition: ease-in-out 0.3s;
                           text-align: center;
                       }
                       
                       .team .team-member .social a {
                           background: color-mix(in srgb, var(--background-color), transparent 25%);
                           color: color-mix(in srgb, var(--default-color), transparent 20%);
                           transition: color 0.3s;
                           margin: 0 3px;
                           border-radius: 4px;
                           width: 36px;
                           height: 36px;
                           transition: ease-in-out 0.3s;
                           display: inline-flex;
                           justify-content: center;
                           align-items: center;
                       }
                       
                       .team .team-member .social a:hover {
                           color: var(--background-color);
                           background: var(--accent-color);
                       }
                       
                       .team .team-member .social i {
                           font-size: 18px;
                           line-height: 0;
                       }
                       
                       .team .team-member .member-info {
                           padding: 25px 15px;
                       }
                       
                       .team .team-member .member-info h4 {
                           font-weight: 700;
                           margin-bottom: 5px;
                           font-size: 18px;
                       }
                       
                       .team .team-member .member-info span {
                           display: block;
                           font-size: 13px;
                           font-weight: 400;
                           color: color-mix(in srgb, var(--default-color), transparent 40%);
                       }
                       
                       @media (max-width: 375px) {
                           .team .team-member .member-info h4 {
                               font-weight: 600;
                               margin-bottom: 5px;
                               font-size: 16px;
                           }
                           .team .team-member .member-info i {
                               font-size: 12px;
                           }
                       }
                       
                       @media (max-width: 272px) {
                           .team .team-member .member-info {
                               padding: 25px 20px 100px 25px;
                           }
                           .team .team-member .member-info h4 {
                               font-weight: 600;
                               margin-bottom: 5px;
                               font-size: 16px;
                           }
                           .team .team-member .member-info i {
                               font-size: 10px;
                           }
                       }
                       
                       .team .team-member:hover .social {
                           opacity: 1;
                           bottom: 15px;
                       }
                       
                       .contact {
                           background-image: url("../img/contact-bg.png");
                           background-position: left center;
                           background-repeat: no-repeat;
                           position: relative;
                       }
                       
                       @media (max-width: 640px) {
                           .contact {
                               background-position: center 50px;
                               background-size: contain;
                           }
                       }
                       
                       .contact .middle-contact {
                           padding-left: -10px;
                       }
                       
                       .contact:before {
                           content: "";
                           position: absolute;
                           bottom: 0;
                           top: 0;
                           left: 0;
                           right: 0;
                       }
                       
                       .contact .info-item+.info-item {
                           margin-top: 40px;
                       }
                       
                       .contact .info-item i {
                           background: var(--accent-color);
                           color: var(--contrast-color);
                           font-size: 20px;
                           width: 44px;
                           height: 44px;
                           display: flex;
                           justify-content: center;
                           align-items: center;
                           border-radius: 50px;
                           transition: all 0.3s ease-in-out;
                           margin-right: 15px;
                       }
                       
                       .contact .info-item h3 {
                           font-size: 20px;
                           padding: 0;
                           font-size: 18px;
                           font-weight: 700;
                           margin-bottom: 5px;
                       }
                       
                       .contact .info-item p {
                           padding: 0;
                           margin-bottom: 0;
                           font-size: 14px;
                       }
                       
                       .contact .social-links {
                           margin-top: 20px;
                       }
                       
                       .contact .social-links a {
                           display: flex;
                           align-items: center;
                           justify-content: center;
                           width: 40px;
                           height: 40px;
                           border-radius: 50%;
                           border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
                           font-size: 16px;
                           color: color-mix(in srgb, var(--default-color), transparent 50%);
                           margin: 0 5px;
                           transition: 0.3s;
                       }
                       
                       .contact .social-links a:hover {
                           color: var(--accent-color);
                           border-color: var(--accent-color);
                       }
                       
                       .contact .php-email-form {
                           height: 100%;
                       }
                       
                       .contact .php-email-form .error-message {
                           display: none;
                           background: #df1529;
                           color: #ffffff;
                           text-align: left;
                           padding: 15px;
                           margin-bottom: 24px;
                           font-weight: 600;
                       }
                       
                       .contact .php-email-form .sent-message {
                           display: none;
                           color: #ffffff;
                           background: #059652;
                           text-align: center;
                           padding: 15px;
                           margin-bottom: 24px;
                           font-weight: 600;
                       }
                       
                       .contact .php-email-form .loading {
                           display: none;
                           background: var(--background-color);
                           text-align: center;
                           padding: 15px;
                           margin-bottom: 24px;
                       }
                       
                       .contact .php-email-form .loading:before {
                           content: "";
                           display: inline-block;
                           border-radius: 50%;
                           width: 24px;
                           height: 24px;
                           margin: 0 10px -6px 0;
                           border: 3px solid var(--accent-color);
                           border-top-color: var(--background-color);
                           animation: animate-loading 1s linear infinite;
                       }
                       
                       .contact .php-email-form input[type=text],
                       .contact .php-email-form input[type=email],
                       .contact .php-email-form textarea {
                           font-size: 14px;
                           padding: 10px 15px;
                           box-shadow: none;
                           border-radius: 0;
                           color: var(--default-color);
                           background-color: color-mix(in srgb, var(--background-color), transparent 50%);
                           border-color: color-mix(in srgb, var(--default-color), transparent 80%);
                       }
                       
                       .contact .php-email-form input[type=text]:focus,
                       .contact .php-email-form input[type=email]:focus,
                       .contact .php-email-form textarea:focus {
                           border-color: var(--accent-color);
                       }
                       
                       .contact .php-email-form input[type=text]::placeholder,
                       .contact .php-email-form input[type=email]::placeholder,
                       .contact .php-email-form textarea::placeholder {
                           color: color-mix(in srgb, var(--default-color), transparent 70%);
                       }
                       
                       .contact .php-email-form button[type=submit] {
                           color: var(--contrast-color);
                           background: var(--accent-color);
                           border: 0;
                           padding: 10px 30px;
                           transition: 0.4s;
                           border-radius: 50px;
                       }
                       
                       .contact .php-email-form button[type=submit]:hover {
                           background: color-mix(in srgb, var(--accent-color), transparent 20%);
                       }
                       
                       @keyframes animate-loading {
                           0% {
                               transform: rotate(0deg);
                           }
                           100% {
                               transform: rotate(360deg);
                           }
                       }