/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ==== GLOBAL ==== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  line-height: 1.6;
  color: #20282D;
  overflow-x: hidden;
}

[type="button"]:focus,
[type="button"]:hover,
[type="submit"]:focus,
[type="submit"]:hover,
button:focus,
button:hover {
  background-color: transparent !important;
}

button {
  background-color: transparent !important;
}

.site-header:not(.dynamic-header) {
  /* width: auto; */
}

a:active, a:hover
 {
    color: #20282D;
}


/*AO Innovate page styling */
        #overview {
            padding: 60px 0;
        }

        .overview-container {
            display: flex;
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
            align-items: flex-start;
			padding: 0 2rem;
        }

        .overview-image-wrapper {
            flex: 1;
            max-width: 50%;
        }

        .overview-image {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 35px;
        }

        .overview-content {
            flex: 1;
            max-width: 50%;
            padding-top: 20px;
        }

        .overview-title {
            display: none;
        }

        .overview-lead {
            font-size: 32px;
            margin-bottom: 20px;
        }

        .overview-text {
            font-size: 16px;
            margin-bottom: 15px;
        }

        .overview-text.muted {
            color: #555;
        }

        @media (max-width: 768px) {
            .overview-container {
               flex-direction: column-reverse;
                text-align: center;
            }

            .overview-image-wrapper,
            .overview-content {
                max-width: 100%;
            }
        }


        /* About Section */
        #about-ao-innovate {
            padding: 80px 0;
            color: #fff;
            background-image: url(/wp-content/uploads/2025/11/Innovate-background-image.png);
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .about-title {
            font-size: 32px;
            margin-bottom: 50px;
            color: #fff;
            text-align: center;
        }

        .about-grid {
            display: flex;
            gap: 30px;
            text-align: left;
        }

        .about-card {
            flex: 1;
            background-color: #20282D;
            border-radius: 35px;
            padding: 40px;
            border: 2px solid #50636C;
        }

        .about-card-lead {
            font-weight: 700;
            font-size: 18px;
            margin-bottom: 20px;
            color: #F05024;
        }

        .about-card-text {
            margin-bottom: 15px;
            color: #ffffff;
        }

        .about-list {
            list-style-type: disc;
            margin-left: 20px;
            padding-left: 0;
            line-height: 1.6;
        }

        .about-list li {
            color: #ffffff;
        }

        @media (max-width: 768px) {
            .about-grid {
                flex-direction: column;
            }
        }


        /* Venture Portfolio Section */
        #our-venture-portfolio {
            padding: 60px 0;
            color: #fff;
        }

        .venture-container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .venture-title {
            font-size: 40px;
            color: #F05024;
            text-align: center;
            margin-bottom: 10px;
        }

        .venture-intro {
            text-align: center;
            margin-bottom: 50px;
            color: #20282D;
        }

        /* KORA AI Venture */
        #kora-ai {
            display: flex;
            align-items: center;
            gap: 40px;
            margin-bottom: 60px;
        }

        .kora-content {
            flex: 1;
            text-align: left;
        }

        .kora-subtitle {
            font-size: 24px;
            color: #F05024;
            margin-bottom: 15px;
        }

        .kora-text {
            color: #20282D;
            margin-bottom: 15px;
        }

        .kora-list {
            list-style-type: disc;
            margin-left: 20px;
            padding-left: 0;
            line-height: 1.6;
            color: #20282D;
        }

        .kora-image-wrapper {
            flex: 1;
        }

        .kora-image {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 35px;
        }

        @media (max-width: 768px) {
            #kora-ai {
                flex-flow: column-reverse;
            }
            .kora-subtitle {    
                text-align: center;
            }
        }

         /* KORA KOMPLY Section */
        #kora-komply-section {
            padding: 60px 0;
            color: #fff;
            background-image: url(/wp-content/uploads/2025/11/Innovate-background-image.png);
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .komply-container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
        }

        #kora-komply {
            display: flex;
            align-items: center;
            gap: 40px;
            margin-bottom: 60px;
            color: #fff;
        }

        .komply-image-wrapper {
            flex: 1;
        }

        .komply-image {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 35px;
        }

        .komply-content {
            flex: 1;
            text-align: left;
        }

        .komply-subtitle {
            font-size: 24px;
            color: #F05024;
            margin-bottom: 15px;
        }

        .komply-text {
            color: #fff;
            margin-bottom: 15px;
        }

        @media (max-width: 768px) {
            #kora-komply {
                flex-direction: column-reverse;
            }
        }

        /* Send Me Some Section */
        #sendmesome-section {
            padding: 60px 0;
            color: #fff;
        }

        .sendmesome-container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
        }

        #send-me-some {
            display: flex;
            align-items: center;
            gap: 40px;
        }

        .sendmesome-content {
            flex: 1;
            text-align: left;
        }

        .sendmesome-subtitle {
            font-size: 24px;
            color: #F05024;
            margin-bottom: 15px;
        }

        .sendmesome-text {
            color: #20282D;
            margin-bottom: 15px;
        }

        .sendmesome-list {
            list-style-type: disc;
            margin-left: 20px;
            padding-left: 0;
            line-height: 1.6;
            color: #20282D;
        }

        .sendmesome-image-wrapper {
            flex: 1;
        }

        .sendmesome-image {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 35px;
        }

        @media (max-width: 768px) {
            #send-me-some {
                flex-direction: column-reverse;
            }
        }

        /* What We Do Section */
        #what-we-do {
            background: #20282D;
            padding: 60px 0;
            color: #fff;
        }

        .whatwedo-container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
            padding: 0 2rem;
        }

        .whatwedo-title {
            font-size: 30px;
            color: #F05024;
            margin-bottom: 10px;
        }

        .whatwedo-intro {
            margin-bottom: 40px;
            color: #fff;
        }

        .capabilities-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }

        .capability-card {
            width: calc(33.33% - 14px);
            background-color: #20282D;
            border: 2px solid #50636C;
            border-radius: 35px;
            padding: 25px;
            text-align: left;
            box-sizing: border-box;
        }

        .capability-title {
            font-size: 18px;
            font-weight: 700;
            color: #F05024;
            margin-bottom: 10px;
        }

        .capability-description {
            font-size: 14px;
            line-height: 1.5;
            color: #fff;
        }

        @media (max-width: 1024px) {
            .capability-card {
                width: calc(50% - 10px);
            }
        }

        @media (max-width: 768px) {
            .capability-card {
                width: 100%;
            }
        }

        
        /* Quote Banner Section */
        .quote-banner {
            background: #20282D;
            padding: 60px 0;
            text-align: center;
            color: #fff;
        }

        .quote-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .quote-title {
            font-size: 32px;
            line-height: 1.5;
            font-weight: 700;
            color: #fff;
        }

        .quote-highlight {
            color: #F05024;
        }

        @media (max-width: 768px) {
            .quote-title {
                font-size: 24px;
            }
        }


        /* Venture Model Section */
        #venture-model {            
            padding: 60px 0;
            color: #20282D;
        }

        .venture-container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
            padding: 0 2rem;
        }

        .venture-title {
            font-size: 40px;
            color: #F05024;
            margin-bottom: 5px;
        }

        .venture-intro {
            font-size: 20px;
            margin: 50px 0;
            
        }

        .venture-card {
            background-color: #20282D8C;
            color: #fff;
            border-radius: 35px;
            margin-bottom: 30px;
            position: relative;
            padding: 30px 30px 30px 180px;
            min-height: 250px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            text-align: left;
        }

        .venture-icon-wrapper {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 150px;
            background-color: #20282D;
            border-top-left-radius: 35px;
            border-bottom-left-radius: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1;
        }

        .venture-icon {            
            height: auto;
            margin-right: 70px;
        }

        .venture-content {
            padding: 20px;
            border-radius: 5px;
            height: 100%;
            box-sizing: border-box;
        }

        .venture-subtitle {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 15px;
            color: #fff;
        }

        .venture-subtitle span {
            margin-right: 5px;
        }

        .venture-text {
            margin-bottom: 15px;
            color: #fff;
        }

        .venture-text.700 {
            font-weight: 700;
        }

        .venture-list {
            list-style-type: disc;
            margin-left: 20px;
            padding-left: 0;
            line-height: 1.4;
            font-size: 14px;
        }

        .venture-footer {
            margin-top: 20px;
            color: #fff;
        }

        @media (max-width: 768px) {
            .venture-card {
                padding: 180px 20px 30px 20px;
                margin-top: 70px;
            }

            .venture-icon-wrapper {
                width: 100%;
                height: 150px;
                border-radius: 35px 35px 0 0;
            }

            .venture-icon {
                height: auto;
                margin-right: 0;                
            }
        }


        /* Acquisition Strategy Section */
        #acquisition-strategy {
            background: #20282D;
            padding: 60px 0;
            text-align: center;
            color: #fff;
        }

        .acquisition-container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .acquisition-title {
            font-size: 32px;
            margin-bottom: 30px;
            color: #F05024;
        }

        .acquisition-text {
            font-size: 16px;
            margin-bottom: 20px;
            line-height: 1.8;
        }

        .acquisition-list {
            list-style-type: disc;
            margin: 20px auto;
            padding-left: 0;
            max-width: 600px;
            text-align: center;
            line-height: 1.8;
            list-style-type: none;
        }

        .acquisition-list li {
            margin-left: 10px;
        }

        .acquisition-conclusion {
            margin-top: 30px;
            font-size: 16px;
            font-weight: 700;
        }

        @media (max-width: 768px) {
          
          .acquisition-container, .acquisition-list{
            text-align: left;
          }
          
            .acquisition-title {
                font-size: 26px;
            }

            .acquisition-list {
                padding-left: 20px;
            }
        }

        

        /* Why It Matters Section */
        #why-it-matters {
            background: #20282D;
            padding: 60px 0;
            text-align: center;
            color: white;
        }

        .matters-container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .matters-title {
            font-size: 32px;
            margin-bottom: 30px;
            color: #F05024;
        }

        .matters-intro {
            font-size: 16px;
            margin-bottom: 40px;
            line-height: 1.8;
        }

        .matters-list {
            list-style-type: none;
            margin: 0;
            padding: 0;
            text-align: left;
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .matters-list li {
            margin-bottom: 30px;
            line-height: 1.8;
            font-size: 16px;
        }

        .matters-list strong {
            color: #F05024;
            display: block;
            margin-bottom: 5px;
            font-size: 18px;
        }

        .matters-conclusion {
            margin-top: 40px;
            font-size: 18px;
            font-weight: 700;
        }

        @media (max-width: 768px) {
            .matters-title {
                font-size: 26px;
            }

            .matters-list li {
                font-size: 15px;
            }
        }
/* MAIN SECTION */
.ai-lab-section {    
    padding: 80px 0;
    text-align: center;
}

.ai-lab-title {
    font-size: 32px;
    color: #F05024;
    margin-bottom: 5px;

}

.ai-lab-subtitle {
    font-size: 18px;
    max-width: 900px;
    margin: 0 auto 50px auto;
    color: #20282D;
}

/* GRID */
.ai-lab-grid {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

/* CARD */
.ai-lab-card {
    background-color: #20282DBF;
    border-radius: 35px;
    width: 250px;
    text-align: left;
    position: relative;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    text-align: center;
    height: 300px;
}

/* ICON INSIDE BOX (top-left) */
.ai-lab-card .ai-icon {
    /*width: 70px;*/
    margin-bottom: 20px;    
    margin-top: -20px;
    z-index: 1;
    position: relative;
}

/* TITLE */
.ai-lab-heading {
    color: #F05024;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* DESCRIPTION */
.ai-lab-text {
    font-size: 14px;
    line-height: 1.4;
    color: #dcdcdc;
margin-block-end: 0;
}

/* FOOTER */
.ai-lab-footer {
    margin-top: 50px;
    font-size: 16px;
    color: #20282D;
}


#our-approach {
    padding: 0 2rem;
    margin: 0 auto;
    max-width: 1200px;
}
.accordion-checkbox {display: none;}
.accordion-checkbox:checked ~ .solution-title::before {
    content: '______';
    position: absolute;
    /* top: -7px; */
    left: 0;
    bottom: 8px;
    letter-spacing: -3px;
    /* border-top: 3px solid; */
    /* width: 20%;*/    
}
#ao-kenya .solution-item, .ao-innovate-wrapper .solution-item {border-bottom:2px solid #8A8A8A;margin-bottom: 12px;overflow: hidden;}
#ao-kenya .solutions-grid .solution-title, .ao-innovate-wrapper .solutions-grid .solution-title {cursor:pointer;padding-left:70px;position: relative;}
#ao-kenya .solution-title::after, .ao-innovate-wrapper .solution-title::after {position: absolute;left: 0;top: 50%;font-size: 1.5rem;font-weight: 300;}
#ao-kenya .solution-description, .ao-innovate-wrapper .solution-description {max-height: 0;overflow: hidden;padding: 0 24px;line-height: 1.6;transition: max-height 0.4s ease, padding 0.4s ease;}
#ao-kenya .accordion-checkbox:checked ~ .solution-description, .ao-innovate-wrapper .accordion-checkbox:checked ~ .solution-description {max-height: 500px;padding: 0 24px 20px 70px;}

@media (max-width: 991px) {
    .ao-container, .venture-container, .ai-lab-container, .komply-container, .sendmesome-container, .whatwedo-container, .quote-container, .acquisition-container, .matters-container, #our-approach {
        padding: 0 30px;
    }
}
/*AO Kenya*/
.strap {background-color:#262F34;color:#FFF;margin-left:calc(-50vw + 50%);padding:90px 25px;width: 100vw;}
.mt-0{margin-top:0}
.mt-90{margin-top:90px}
.w-800{margin: 0 auto;max-width: 800px;padding: 0 15px;}
.text-center {text-align: center;}
.style-none li {list-style:none; margin:0;}

/* AO Finland */
.aof-text {
	text-align: center;
}
.aof-content-section{
  display: flex;
  gap: 5%; 
  align-items: center;
}


.ao-section.aof-dark-section{
    background-image: url(https://weareao.group/wp-content/uploads/2025/11/Innovate-background-image.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    background-position: center center;
    padding: 6rem 0;
    color: #ffffff;
}

.aof-strap {
  background-color:#262F34;
  color:#FFF;
  margin-left:calc(-50vw + 50%);
  padding:30px 45px;
  width: 100vw;
  /*margin-top: 50px;*/
}

.aof-strap-content {
   max-width: 1265px;
   margin: 0 auto;
}

.aof-strap-text {
  color: #ffff;
}

@media (max-width: 1050px) {

  .aof-content-section {
    flex-direction: column;
    /*text-align: center;*/
    gap: 10px;
  }
.aof-content-section img, .aof-content-section .aof-content {
    width: 100%;
}

  .section-heading {
    order: -1;
  }

  .aof-content-section > img {   
    order: 1;
  }

  .aof-content {
    order: 2;
  }

 .aof-content .service-description {
  text-align: left;
}  
}

.aof-list {
    margin: 20px 0 20px 40px;
    padding: 0;
}

.service-title span {
    font-size: 20px;
    padding-right: 10px;
}

.ao-section.aof-dark-section .ao-text,.ao-section.aof-dark-section .solution-description,.ao-section.aof-dark-section .service-description  {    
    color: #ffffff;    
}

.ao-section.aof-strap-dark {
    background-image: url(/wp-content/uploads/2025/11/low-angle-shot-of-a-modern-business-glass-building-2023-11-27-05-29-40-utc-1.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    background-position: center center;
    padding:0;
}

.section-heading.aof-heading {  
    text-align: left;
}

.ao-section.aof-strap-dark .section-heading {  
       text-align: center;
}

.aof-strap {
    margin-top: 0px;
}

.aof-content-section img,
.aof-content-section .aof-content {
    width: 50%;
}

.ao-section.aof-dark-section .solution-description,.ao-section.aof-dark-section .service-description {    
    text-align: left;   
}

@media (max-width: 1050px) {


.aof-content-section img, .aof-content-section .aof-content {
    width: 100%;
}

/*.ao-section .section-heading {
    text-align: center;
}*/

}

/*404-page*/
.hero-section-404 {
    background-image: url(/wp-content/uploads/2025/11/low-angle-shot-of-a-modern-business-glass-building-2023-11-27-05-29-40-utc-1.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.error-code-wrapper {
    padding-top: 85px;
}

.error-digit {    
    color:#20282D;    
}

.error-detail {    
    color: #20282D;
}

.error-actions {
    margin-bottom: 0px;
    padding-bottom: 30px;  
}

@media (max-width: 768px) {
    .error-detail {        
        text-align: center;
    }
}

    .footer-company-links>.footer-link-group-title {
        padding-top: 80px;
    }

/* AO consult */

.aoc-text{
text-align: center;
}
.ao-consult-client-logo-grid {
    display: grid;
    gap: 30px;
    padding: 0;
    list-style: none;
    margin-top: 40px;
    grid-template-columns: repeat(4, 1fr);
}
.ao-consult-client-logo-item {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px; 
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
}

.aoc-services {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.aoc-service-card {
  display: flex;
  border-radius: 28px;
  overflow: visible;
  position: relative;
}

/* left dark panel */
.aoc-left-panel {
  background: #1c2227;
  width: 160px;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  border-top-left-radius: 28px;
  border-bottom-left-radius: 28px;
  position: relative;
}

/* icon inside light box */
.aoc-icon-container {
    width: 145px;
    height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    position: absolute;
    right: 55px;
}


/* right light panel */
.aoc-right-panel {
  background: #262F348C;
  padding: 35px 40px;
  flex: 1;
  border-top-right-radius: 28px;
  border-bottom-right-radius: 28px;
}

.aoc-right-panel h2 {
  margin-top: 0;
  margin-bottom: 12px;
color: #ffff;

}

.aoc-right-panel p {
  margin-top: 20px;
  margin-bottom: 10px;
color: #ffff;
}

.aoc-right-panel ul {
  padding-left: 20px;
}

.aoc-right-panel li {
  margin-bottom: 6px;
color: #ffff;
}


@media (max-width: 750px) {
  .aoc-service-card {
    flex-direction: column;
  }

  .aoc-left-panel {
    width: 100%;
    min-width: unset;
    border-radius: 28px 28px 0 0;
    padding: 30px 0;
  }

  .aoc-icon-container {
    width: 100px;
    height: 100px;
  }

  .aoc-right-panel {
    border-radius: 0 0 28px 28px;
  }

.ao-consult-client-logo-grid {
    grid-template-columns: repeat(2, 1fr);
}
}

/*Our Work */
.client-logo-item img {
  max-height:100px;
}
.mt-70 {
  margin-top:70px;
}

.cta-section {
    background: #20282D;
    width: 100%;
    padding: 1.5rem 0;
}

.cta-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.call-to-action-description {
   color: #ffffff;
}

.our-work-cta-button {
    display: block;
    background: #F05024;
    color: white;
    padding: 12px 40px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95em;
    margin-top: 25px;
    max-width: 250px;
    margin: 25px auto;
    text-align: center;
    transition: background 0.3s ease;
}


/*Style from the Customise */
h1, h2, h3, h4, h5, h6 {
    color: #F05024 ;
		font-weight: 700;    
}


/* ============================================
   GLOBAL & UTILITY STYLES
   ============================================ */

/* Policy Content Cleanup */
.policy-content div {
    margin-bottom: 40px;
}

.policy-content .section {
    margin-top: 40px;
}

.data-controller-div p {
    margin-block-end: 0;
}

.policy-content h2 {
    font-weight: 600;
    color: #000;
	font-size: 1.5rem;
}

/* FIX: Corrected .policy-contentdl to .policy-content dl */
.policy-content dd,
.policy-content dl,
.policy-content dt,
.policy-content ol,
.policy-content ul {
    padding-left: 45px;
}

.ul-p-tag {
    margin-block-end: 0;
}

.muted {
    color: #666;
    font-weight: 500;
}

/* Anchor padding fix for fixed headers (if you have one) */
:target {
    scroll-margin-top: 90px;
}

/* ============================================
   MEGA MENU STYLES
   ============================================ */

/* Fix the parent to allow proper centering */
.menu-item-has-children {
    position: static !important;
    /* This is the key - removes relative positioning */
}

/* Centered Mega Menu */


/* When mega menu is visible */
.menu-item-has-children:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Mega Grid and Card Styles */
.mega-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    width: 100%;
}

.mega-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1.25rem;
    transition: transform 0.3s;
}

.mega-card a {
    text-decoration: none;
    color: inherit;
}

.mega-card span {
    color: #F05024;
}

.mega-card:hover {
    transform: translateY(-4px);
}

.mega-card h4 {
    color: #F05024;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.mega-card p {
    font-size: 0.85rem;
    color: #cbd5e1;
    line-height: 1.5;
}



/* ============================================
   AO GENERAL SECTION STYLES
   (Consolidated background and typography)
   ============================================ */

/* Wrapper: Defines the fixed background image for the whole page/container */
.ao-innovate-wrapper,
.what-we-offer-section,
.ao-products-section,
.services-page-section {
    background-image: url(/wp-content/uploads/2025/11/low-angle-shot-of-a-modern-business-glass-building-2023-11-27-05-29-40-utc-1.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    box-sizing: border-box;
    width: 100%;
    /* Keep .ao-innovate-wrapper padding separate if it's the main container */
}


/* Section Shell / Container */
.ao-section {
    background-image: url(/wp-content/uploads/2025/11/low-angle-shot-of-a-modern-business-glass-building-2023-11-27-05-29-40-utc-1.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    background-position: center center;
padding: 6rem 0;
}

.ao-container {
    max-width: 1200px;
    margin: 0 auto;
    padding:0 2rem;
}
/* Headings & Typography */
.ao-title {
    text-align: center;
    color: #e64919;
    font-size: 40px;
    margin: 0 0 18px;
    font-weight: 700;
}

.ao-subtitle {
    color: #e64919;
    font-size: 18px;
    margin: 18px 0 8px;
    font-weight: 700;
}

.ao-subtitle.small {
    font-size: 16px;
    margin-top: 6px;
}

.ao-lead {
    color: #e64919;
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 12px;
}

/* Text styles (Consolidated) */
.ao-text {
    font-size: 18px;
    /* Used larger font size */
    line-height: 1.8;
    /* Used larger line height */
    margin-bottom: 20px;
    /* Used larger margin-bottom */
    color: #333;
    font-weight: 400;
}

.ao-strong {
    font-weight: 600;
}

.ao-bottom {
    margin-top: 16px;
}

/* Section Headings (Redefined for other pages) */
.section-heading {
    color: #F05024;
    font-size: 28px;
    font-weight: 700;
    margin: 40px 0 25px 0;
    text-align: center;
}

.subsection-heading {
    color: #F05024;
    font-size: 18px;
    font-weight: 700;
    margin: 30px 0 15px 0;
}

/* Header image */
.ao-header {
    text-align: center;
    padding: 30px 0 10px;
}

.ao-header-image {
    max-width: 420px;
    width: 60%;
    height: auto;
    display: inline-block;
}

/* Lists */
.ao-list {
    margin: 20px 0 20px 40px;
    padding: 0;
}
.ao-list li {
    list-style: none;
}

.ao-list span {
    font-size: 20px;
    padding-right: 10px;
}

/* Numbered lists */
.ao-numbered {   
    padding: 0;
    list-style: none;

}

.ao-numbered li {
    margin-bottom: 12px;
}

/* Two-column layout for venture model */
.ao-two-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 12px;
}

@media (min-width: 820px) {
    .ao-two-column {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* Ventures articles spacing */
.ao-venture {
    margin-bottom: 20px;
}

.ao-section:first-of-type {
    border-top: none;
    padding-top: 8px;
}

/* Responsive AO Styles */
@media (max-width: 640px) {
    .ao-header-image {
        width: 85%;
    }

    .ao-title {
        font-size: 22px;
    }

    .ao-lead {
        font-size: 16px;
    }

    .ao-text {
        font-size: 15px;
    }
}


/* ============================================
   PRODUCTS AND SOLUTIONS BAR
   ============================================ */

.products-and-solutins {
    background: #20282D;
    color: white;
    padding: 60px 0;
    position: relative;
}

.products-and-solutins .content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}

.products-and-solutins .column h2 {
    color: #F05024;
    font-size: 20px;
    margin-bottom: 25px;
    font-weight: 600;
}

.products-and-solutins .column ul {
    list-style: none;
    padding-left: 25px;
    margin: 0;
}

.products-and-solutins .column ul li {
    margin-bottom: 0;
    padding-left: 20px;
    position: relative;
    color: white;
    font-size: 0.95em;
    line-height: 1.6;
}

.products-and-solutins .column ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 1.2em;
}

@media (max-width: 768px) {
    .products-and-solutins .content-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px;
    }

    .products-and-solutins {
        padding: 40px 0;
    }

    .products-and-solutins .column h2 {
        font-size: 1.3em;
    }

    .products-and-solutins .column ul li {
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .products-and-solutins .column ul li {
        padding-left: 18px;
        font-size: 0.85em;
    }
}



/* ============================================
   AO PRODUCTS SECTION
   ============================================ */

/* Product Header */
.product-header {
    padding: 60px 40px;
    text-align: center;
}

.product-header h1 {
    color: #F05024;
    font-size: 2em;
    margin-bottom: 20px;
    font-weight: bold;
}

.product-header p {
    color: #333;
    font-size: 0.95em;
    line-height: 1.7;
    max-width: 900px;
    margin: 0 auto;
}

/* Product Item */
.product-item {
    padding: 60px 40px;
    text-align: center;
}

.product-item.dark {
    background: #20282D;
    color: white;
}

.product-item.light {
    color: #333;
}

.product-item h2 {
    color: #F05024;
    font-size: 1.8em;
    margin-bottom: 25px;
    font-weight: bold;
}

.product-description {
    max-width: 900px;
    margin: 0 auto 30px;
    font-size: 0.95em;
    line-height: 1.7;
}

.cms-section .product-description {
    max-width: 800px;
    text-align: left;
}

.cms-section .product-subtitle {
    text-align: left;
}

.product-features {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.product-features p {
    margin-bottom: 20px;
    font-size: 0.95em;
    line-height: 1.7;
}

.product-features p strong {
    color: #F05024;
    display: block;
    margin-bottom: 5px;
}

.product-features ul {
    padding: 0;
    margin: 20px 0;
    place-items: center;
}

.product-features ul li {
    margin-bottom: 0;
    font-size: 0.95em;
    line-height: 25px;
    position: relative;
    font-weight: 600;
}

.product-tagline {
    margin-top: 25px;
    font-size: 0.95em;
}

.cta-button {
    display: inline-block;
    background: #F05024;
    color: white;
    padding: 12px 40px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95em;
    margin-top: 25px;
    transition: background 0.3s ease;
}

.cta-button:hover {
    background: #e55a25;
}

.product-subtitle {
    max-width: 800px;
    margin: 0 auto 25px;
    font-size: 1em;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .product-header,
    .product-item {
        padding: 40px 20px;
    }

    .product-header h1,
    .product-item h2 {
        font-size: 1.5em;
    }

    .product-description,
    .product-subtitle,
    .product-features ul li {
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .product-header h1,
    .product-item h2 {
        font-size: 1.3em;
    }

    .product-description,
    .product-subtitle,
    .product-features ul li {
        font-size: 0.85em;
    }

    .product-features ul li {
        padding-left: 18px;
    }
}


/* ============================================
   COUNTRY HEADER BAR (From previous request)
   ============================================ */

.country-header-bar {
    background-color:  #20282D;
    padding: 50px 0;
    text-align: center;
}

.country-header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.country-header-logo {
	  width: 80%;
    height: auto;
    margin-right: 15px;
    filter: brightness(0) invert(1);
}



/* Responsive Country Header */


/* ==== HEADER ==== */
.site-header:not(.dynamic-header) {
  width: 100%;
  justify-self: anchor-center;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(38, 47, 52, 0.75);
  backdrop-filter: blur(10px);
  padding: 1rem 0;
  transition: all 0.3s;
  border-radius: 38.5px;
  margin-top: 30px;
}

.header-container {
  /* 1. Enable Flexbox for horizontal arrangement */
  display: flex;

  /* 2. Push the three main items to the edges and center */
  /* .site-branding (Logo) | .desktop-nav (Menu) | .header-actions (Button) */
  justify-content: space-between;

  /* 3. Ensure vertical alignment is centered */
  align-items: center;

  /* 4. Ensure it spans the full width of the viewport */
  width: 100%;

  /* Add padding for spacing off the screen edges */
  padding: 0px 72px;
}

.site-branding {
  flex-shrink: 0;
  z-index: 1001;
}

.custom-logo-link {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.custom-logo-link img {
  max-height: 40px;
  width: auto;
}

/* ---- Desktop Nav ---- */
.desktop-nav {
  display: none;
  flex-grow: 1;
  justify-content: center;
}

.nav-menu {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  position: relative;
  padding: 0 1rem;
}

.nav-menu li:not(:last-child) {
  border-right: 1px solid rgba(255, 107, 74, 0.5);
}

.nav-menu a {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.5rem 0;
  display: block;
  transition: color 0.3s;
  text-decoration: none;
}

.nav-menu a:hover,
.nav-menu li.current-menu-item a {
  color: #F05024;
}

.menu-item-has-children > a::after {
  content: "▾";
  margin-left: 0.5rem;
  font-size: 0.8rem;
}

/* Mega-dropdown */
.mega-menu {
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: #262f34;
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: 27px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  margin-top: -30px;
  max-width: 1400px;
  width:100%;
}

.menu-item-has-children:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}

.mega-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 1.25rem;
  transition: transform 0.3s;
}

.mega-card a {
  text-decoration: none;
  color: inherit;
}

.mega-card:hover {
  transform: translateY(-4px);
}

.mega-card h4 {
  color: #F05024;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.mega-card p {
  font-size: 0.85rem;
  color: #cbd5e1;
  line-height: 1.5;
}

/* Desktop Login Button */
.header-actions {
  flex-shrink: 0;
  display: none;
}

.btn-login {
  background: #F05024;
  color: #fff;
  padding: 0.65rem 1.75rem;
  border-radius: 25px;
  font-weight: 500;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
}

.btn-login:hover {
  background: #ff5533;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(255, 107, 74, 0.4);
}

/* ---- Mobile Hamburger Menu ---- */
.mobile-menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 30px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
  padding: 0;
  position: relative;
}

.hamburger-line {
  height: 3px;
  width: 100%;
  background: #F05024;
  border-radius: 2px;
  transition: all 0.3s ease;
  display: block;
}

/* Hamburger Animation to X */
.mobile-menu-toggle.is-open .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.is-open .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.is-open .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Navigation Overlay */
.mobile-navigation {
  position: fixed;
  top: 0;
  right: -165%;
  width: 100%;
  /* max-width: 400px; */
  height: 100vh;
  background: #262f34;
  transition: right 0.4s ease;
  z-index: 999;
  overflow-y: auto;
  padding: 6rem 2rem 2rem;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
  border-radius: 27px;
}

.mobile-navigation.active {
  right: 0;
}

.mobile-menu-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mobile-nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav-menu > li > a {
  display: block;
  padding: 10px 0;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.3s;
}

.mobile-nav-menu > li > a:hover {
  color: #F05024;
}

/* Mobile Submenu */
.mobile-nav-menu .sub-menu {
  list-style: none;
  padding-left: 1.5rem;
  margin: 0;
  display: none;
  padding-bottom: 0.5rem;
}

.mobile-nav-menu .sub-menu.active {
  display: block;
}

.mobile-nav-menu .sub-menu li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 0.5rem;
}

.mobile-nav-menu .sub-menu li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 8px;
  color: #F05024;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.2;
}

.mobile-nav-menu .sub-menu a {
  display: block;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.6rem 0;
  text-decoration: none;
  transition: color 0.3s;
}

.mobile-nav-menu .sub-menu a:hover {
  color: #F05024;
}

/* Mobile Login Button */
.mobile-login {
  margin-top: auto;
  padding-top: 2rem;
}

.mobile-btn-login {
  display: block;
  text-align: center;
  background: #F05024;
  color: #fff;
  padding: 1rem;
  border-radius: 27px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s;
}

.mobile-btn-login:hover {
  background: #ff5533;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 107, 74, 0.4);
}

/* Overlay when mobile menu is open */
body.mobile-menu-open {
  overflow: hidden;
}

/* ==== HERO ==== */

/* .hero-section { */
  /* position: relative; */
/* } */

body:not(.home) .hero-section {
  min-height: 70vh;
  background-image: url(/wp-content/uploads/2025/11/AO-Screen-2.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (min-width: 768px) {
  .country-header-logo {
      width: 50%;
  }
}

@media (min-width: 992px) {
    body:not(.home) .hero-content {
         padding-top: 30vh; 
    }
}

.hero-container {
    position: relative;
    height: 80vh;
    background-image: url(/wp-content/uploads/2025/10/image.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /* z-index: 3; */
    width: 100%;
}

.hero-container-sub-page {
    position: relative;
    height: 70vh;
    width: 100%;
}


.hero-video {
    display:none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the video */

    /* Make sure video covers the entire container */
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: 80vh;

    /* Send it to the background */
    object-fit: cover;
    z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  animation: fade-slide-up 1s ease-out;
  padding: 0 2rem 40px;
  padding-top: 30vh;
  margin:0 auto; 
}

/* @media (min-width: 768px) {
  .hero-content {
    padding-top: 30vh; 
  }
} */

@media (min-width: 992px) {
  .hero-content {
    padding-top: 50vh; 
  }
}


@keyframes fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-title {
  font-weight: 700;
  font-size: 48px;
  color: #ffffff;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  text-shadow: 0 0 10px #000000;
}

.hero-subtitle {
  font-size: 20px;
  color: #FFFFFF;
  margin-bottom: 2.5rem;
  text-shadow: 0 0 10px #000000;
}

.btn-hero {
  display: inline-block;
  background: #F05024;
  color: #fff;
  padding: 1rem 2.5rem;
  border-radius: 20px;
  font-weight: 600;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(255, 107, 74, 0.3);
  text-decoration: none;
}

.btn-hero:hover {
  background: #ff5533;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 107, 74, 0.5);
}

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

@keyframes scroll-animation {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}


@media (max-width: 768px) {
    .hero-section {
        background-image: url("/wp-content/uploads/2025/11/mobile-hroe-image.png");
        background-size: cover;
        background-position: center center;
        min-height: 70vh; /* optional — you can adjust */
    }
}

/* ==== MAIN CONTENT ==== */


/* ==== FOOTER ==== */
.site-footer {
  background: #20282D;
  padding: 5rem 0 0;
  color: #fff;
  background-image: url(/wp-content/uploads/2025/10/footer-bg-img.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.footer-content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.footer-top {
  padding-bottom: 4rem;
  margin-bottom: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-title {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  max-width: 800px;
  color: #F05024;
}

.footer-title span {
  color: #F05024;
}

.footer-description {
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 600px;
}

.btn-footer-cta {
  display: inline-block;
  background: #F05024;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 1rem 2.5rem;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-footer-cta:hover {
  background: #ff5533;
  transform: translateY(-2px);
}

.footer-logo {
  align-self: start;
}

.footer-logo img {
  max-width: 200px;
  height: auto;
}

.footer-nav-grid {
  display: grid;
  /* display: flex; */
  /* grid-template-columns: repeat(5, 1fr); */
  /* gap: 2rem; */
  margin-bottom: 3rem;
}

.footer-col-main-company {
  display: flex;
  flex-direction: row;
  gap: 6rem;
  grid-column: span 2;
}

.footer-main-links,
.footer-company-links,
.footer-services-column {
  list-style: none;
  padding: 0;
  margin: 0;
}


.footer-company-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-company-links ul li {
  position: relative;
  padding-left: 20px;
  /* margin-bottom: 0.75rem; */
}

.footer-company-links.no-padding ul li {
  padding-left: 0px;
  margin-bottom:5px;
  /* margin-bottom: 0.75rem; */
}

.footer-col-main-company .footer-company-links ul li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  color: #F05024;
  font-weight: bold;
  font-size: 1rem;
  line-height: 1.2;
}
/* 
.footer-main-links li,
.footer-company-links li,
.footer-services-column li {
  margin-bottom: 0.75rem;
} */

.footer-main-links a,
.footer-company-links a,
.footer-services-column a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  /* font-size: 0.95rem; */
  font-size: 14px;
  line-height: 1.5;
  transition: color 0.3s;  
}

.footer-main-links a:hover,
.footer-company-links a:hover,
.footer-services-column a:hover {
  color: #F05024;
}

.footer-link-group-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: left;
  padding: 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  margin: 0 0;
}

.footer-social {
  display: flex;
  gap: 1.25rem;
}



.footer-social a {
  color: #fff;
  /* font-size: 1.1rem; */
  font-size: 1.5rem;
  transition: color 0.3s;
}

.footer-social a:hover {
  color: #F05024;
}

/* .footer-bottom-links {
  display: flex;
  gap: 1.5rem;
} */
.footer-bottom-links {
  margin-bottom:20px;
}

.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s;
  display: inline-block;
  /* padding: 0 10px; */
  margin-right:20px;
  margin-bottom:5px;
}

.footer-bottom-links a:hover {
  color: #F05024;
}

.footer-bottom-links {
  text-align: left;
}

.footer-copyright {
  margin: 0 0 20px;
}

.mobile-no {
  display:none;
}

.tablet-no {
  display:none;
}

/* Footer Responsive fixes */
@media (min-width: 768px) {
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin: 0 35px;
  }

  .footer-bottom-links {
    display: flex;
    gap: 1.5rem;
  }

  .footer-link-group-title {
    /* margin-bottom: 1rem; */
    font-size: 1rem;
  }

  .tablet-no {
    display:none;
  }
  .tablet-yes {
    display:block;
  }
}

@media (min-width: 992px) {
  .footer-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .mobile-no {
    display:block;
  }
  .footer-company-links.services-links {
    grid-column-start: 1;
  }


  .tablet-no {
    display:none;
  }
  .tablet-yes {
    display:block;
  }
}

@media (min-width: 1200px) {
  .footer-col-main-company {
    /* display: flex; */
    flex-direction: column;
    gap: 2rem;
  }

  .footer-nav-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .footer-company-links.services-links {
    grid-column-start: 3;
  }
  .tablet-no {
    display:block;
  }
  .tablet-yes {
    display:none;
  }
}

.hero-title {
  font-size: 2rem;
}

.about-title,
.help-title,
.country-main-title,
.footer-title {
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

/* =================================
    MODULAR SECTION STYLES
    ================================= */

/* =================================
    CLIENT LOGOS SECTION STYLES
    ================================= */
.client-logos-section {
  background: #20282D;
  width: 100%;
  padding: 1.5rem 0;
}

.client-logos-container {
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 2rem;
}

.logos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0rem;
  align-items: center;
  justify-items: center;
}

.logos-grid-about-us {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  align-items: center;
  justify-items: center;
}

.logos-grid img {
  max-width: 200px;
  height: auto;
  opacity: 0.9;
  transition: opacity 0.5s ease-out;
}

/* --- Fade-In Animation Setup --- */
.fade-logo {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s, transform 1s;
}

.fade-logo.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.logos-grid > div:nth-child(1) {
  transition-delay: 0.1s;
}
.logos-grid > div:nth-child(2) {
  transition-delay: 0.2s;
}
.logos-grid > div:nth-child(3) {
  transition-delay: 0.3s;
}
.logos-grid > div:nth-child(4) {
  transition-delay: 0.4s;
}
.logos-grid > div:nth-child(5) {
  transition-delay: 0.5s;
}
.logos-grid > div:nth-child(6) {
  transition-delay: 0.6s;
}

/* =================================
    ABOUT AO GROUP SECTION STYLES
    ================================= */
.about-ao-group-section {
  background: #20282D;
  color: #fff;
  width: 100%;
  padding: 6rem 0;
}

.about-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  gap: 4rem;
  align-items: center;
}

.about-content {
  flex: 1;
  max-width: 55%;
}

.about-title {
  text-align: left;
}

.about-description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  /* margin-bottom: 3rem; */
  max-width: 600px;
  text-align: left;
}

.about-image-wrapper {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.about-image {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.counters-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 3rem;
  max-width: 570px;
}

/*get to know us loaders*/
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 600px;
}
.counter {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  color: #F05024;
}

.counter span {
  margin-left: 10px;
}

.circle {
  width: 50px;
  height: 50px;
  background-image: url("/wp-content/uploads/2025/02/Subtract.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 5px;
}

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  .circle {
    width: 60px;
    height: 60px;
    font-size: 18px;
  }
}

/* Mobile (Below 768px) */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    align-items: center;
    grid-template-columns: repeat(1, 1fr);
  }
  .circle {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}

/* =================================
    HOW WE HELP SECTION STYLES
    ================================= */
.how-we-help-section {
  background-size: cover;
  width: 100%;
  padding: 6rem 0;
  color: #20282D;
  position: relative;
  overflow-x: hidden;
  background-image: url(/wp-content/uploads/2025/11/low-angle-shot-of-a-modern-business-glass-building-2023-11-27-05-29-40-utc-1.png);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.help-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  gap: 4rem;
  align-items: flex-start;
}

.help-content-wrapper {
  flex: 1;
  padding-top: 2rem;
}

.help-title {
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  color: #F05024;
}

.help-description {
  font-size: 1rem;
  color: #20282D;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  text-align: left;
}

.btn-help-connect {
  display: inline-block;
  background: #F05024;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 1rem 2.5rem;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-help-connect:hover {
  background: #ff5533;
  transform: translateY(-2px);
}

.company-cards-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 55%;
}

.company-card {
  background: #20282D;
  color: #fff;
  padding: 1.5rem 2.5rem;
  border-radius: 27px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s;
  text-align: center;
  font-size: 14px;
  width:100%;
}

.card-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  border-bottom: 2px solid #F05024;
  padding-bottom: 0.5rem;
  display: inline-block;
}

.card-title-home {
    /* font-size: 1.2rem; */
    /* font-weight: 700; */
    /* margin-bottom: 0.5rem; */
    border-bottom: 2px solid #F05024;
    padding-bottom: 0.5rem;
    /* display: inline-block; */
}
.card-description {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  text-align: center;
  margin-top: 5px;
  position: relative;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Slide-In-From-Right Animation Setup --- */
.slide-in-card {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-in-card.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.company-cards-wrapper .slide-in-card:nth-child(1) {
  transition-delay: 0.1s;
}
.company-cards-wrapper .slide-in-card:nth-child(2) {
  transition-delay: 0.2s;
}
.company-cards-wrapper .slide-in-card:nth-child(3) {
  transition-delay: 0.3s;
}
.company-cards-wrapper .slide-in-card:nth-child(4) {
  transition-delay: 0.4s;
}
.company-cards-wrapper .slide-in-card:nth-child(5) {
  transition-delay: 0.5s;
}

/* =================================
    MULTI-COUNTRY OPERATIONS STYLES
    ================================= */
.multi-country-section {
  background: #20282D;
  color: #fff;
  width: 100%;
  padding: 6rem 0; 
}

.multi-country-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: block;
  gap: 4rem;
  align-items: flex-start;
}

.country-cards-wrapper {
  max-width: 100%;
  flex-direction: column;
  gap: 1.25rem;
  padding-right: 0px;
}

.country-content-wrapper {
  max-width: 100%;
  text-align: end;  
  position: inherit; 
  box-sizing: border-box;  
}

.country-main-title {
  color: #F05024;
}

.country-description {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  text-align: right;
}

.btn-country-connect {
  display: inline-block;
  background: #F05024;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 1rem 2.5rem;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-country-connect:hover {
  background: #ff5533;
  transform: translateY(-2px);
}

.country-card {
  min-height: 100px;
  border-radius: 27px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  text-align: center;
  padding: 60px 0;
  margin-bottom: 40px;
  display:block;
}

.country-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5);
  transition: filter 0.3s;
}

.country-name {
  transform: translateY(-50%);
  font-size: 36px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 2;
  text-align: center;
}

.country-card:hover .country-image {
  filter: brightness(0.65);
}

/* --- Slide-In-From-Left Animation Setup --- */
.slide-in-left-card {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-in-left-card.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.country-cards-wrapper .slide-in-left-card {
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  border: 3px solid #F05024;
}
.country-cards-wrapper .slide-in-left-card:nth-child(1) {
  background-image: url("/wp-content/uploads/2025/03/South-AfricaDark-Overlay.png");
  transition-delay: 0.1s;
}
.country-cards-wrapper .slide-in-left-card:nth-child(2) {
  background-image: url("/wp-content/uploads/2025/03/BotswanaDark-Overlay.png");
background-position: center center;
  transition-delay: 0.2s;
}
.country-cards-wrapper .slide-in-left-card:nth-child(3) {
  background-image: url("/wp-content/uploads/2025/03/GhanaDark-Overlay.png");
background-position: center center;
  transition-delay: 0.3s;
}
.country-cards-wrapper .slide-in-left-card:nth-child(4) {
  background-image: url("/wp-content/uploads/2025/10/KenyaDark-Overlay.png");
  background-position: center center;;
  transition-delay: 0.4s;
}
.country-cards-wrapper .slide-in-left-card:nth-child(5) {
  background-image: url("/wp-content/uploads/2025/03/MauritiusDark-Overlay.png");
 background-position: center center;
  transition-delay: 0.5s;
}
.country-cards-wrapper .slide-in-left-card:nth-child(6) {
  background-image: url("/wp-content/uploads/2025/03/ZambiaDark-Overlay.png");
  transition-delay: 0.6s;
}
.country-cards-wrapper .slide-in-left-card:nth-child(7) {
  background-image: url("/wp-content/uploads/2025/11/finlandDark-Overlay.png");
  background-position: center center;
  transition-delay: 0.7s;
}

/* =================================
    RESPONSIVE ADJUSTMENTS
    ================================= */

/* General Desktop/Header Adjustments */
@media (min-width: 992px) {
  .desktop-nav {
    display: flex;
  }
  .header-actions {
    display: block;
  }
  .mobile-menu-toggle,
  .mobile-navigation {
    display: none;
  }

  .counter {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
  }

  .company-card {
    font-size: 1rem;
  }
}

@media (max-width: 991px) {
  .header-actions {
    display: none;
  }
  .mobile-menu-toggle {
    display: flex;
  }  
  .footer-nav-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .footer-bottom-links {
    margin-top: 1rem;
    justify-content: center;
	text-align: center;
  }
  .footer-social {
    order: -1;
    margin-bottom: 1rem;
  }

  /* Modular Sections - Tablet */
  .about-container,
  .help-container,
  .multi-country-container {
    flex-direction: column;
    gap: 3rem;
  }
  .about-content,
  .help-content-wrapper,
  .company-cards-wrapper,
  .country-content-wrapper,
  .country-cards-wrapper {
    max-width: 100%;
    width: 100%;
    /* text-align: -webkit-center; */
  }
  .about-image-wrapper {
    justify-content: center;
    width: 100%;
  }
  .about-image {
    max-width: 80%;
  }
  .multi-country-container {
    flex-direction: column-reverse;
  }
}

/* Mobile Adjustments (Max 767px) */
@media (max-width: 767px) {
  .hero-subtitle {
    font-size: 1rem;
  }
  .btn-hero {
    padding: 0.85rem 1.75rem;
    font-size: 0.95rem;
  }
  /* .footer-nav-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .footer-col-main-company {
    flex-direction: column;
    gap: 1.5rem;
  }
  .footer-bottom-links {
    flex-wrap: wrap;
    gap: 10px;
  }
  .footer-bottom-links a {
    margin-left: 0;
  }   */
  .logos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
  }
  .logos-grid-about-us {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
  }
  .about-ao-group-section,
  .how-we-help-section,
  .multi-country-section {
    padding: 4rem 0;
  }
  .about-image {
    max-width: 100%;
  }
  .counters-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }  
  .country-name {
    font-size: 1.3rem;
  }
.country-main-title, .country-description {    
    text-align: left;
}

.btn-country-connect {
    float: left;
 }
}

@media (max-width: 480px) {
  .logos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .logos-grid img {
    max-width: 100%;
  }
  .logos-grid-about-us {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {

  .hero-title {
    font-size:48px;
  }
  .about-title,
  .help-title,
  .country-main-title,
  .footer-title {
    font-size: 2rem;
  }

  .multi-country-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    gap: 4rem;
    align-items: flex-start;
  }

  /*
  .country-cards-wrapper {
    flex: 1;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;    
  }

  .country-content-wrapper {
    flex: 1;
    max-width: 50%;
    text-align: end;
    position: sticky;
    top: 100px;
    height: 100vh; 
    box-sizing: border-box;   
  }
    */
}

@media (min-width: 992px) {
  .country-cards-wrapper {
    flex: 1;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;    
  }

  .country-content-wrapper {
    flex: 1;
    max-width: 50%;
    text-align: end;
    position: sticky;
    top: 150px;
    height: auto; 
    box-sizing: border-box;    
  }
}

/* =================================
    THE AO TEAM SECTION STYLES
    ================================= */

.ao-team-section {  
  background-image: url(/wp-content/uploads/2025/11/low-angle-shot-of-a-modern-business-glass-building-2023-11-27-05-29-40-utc-1.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  background-position: center center;
  color: #20282D;
  width: 100%;
  padding: 6rem 0;
}

.team-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;  
}

.team-main-title {
  font-size: 32px;
  font-weight: 600;
  color: #F05024; /* Orange title */
  margin-bottom: 1.5rem;
  text-align: center;
}

.team-intro-text {
  max-width: 1200px;
  margin: 0 auto 4rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #555;
  text-align: center;
}

/* --- Team Cards Grid --- */
.team-cards-grid {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

 .team-cards-grid-3 {
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
    justify-items: center;
}

 .team-cards-grid-3 .card, .team-cards-grid .card {
  background: #262F34;
  color: #fff;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;  
  position: relative;
  overflow: hidden;
  height: 100%;
}

 .team-cards-grid-3 .card,.team-cards-grid .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

 .team-cards-grid-3 .card img,.team-cards-grid .card img {
 width: auto;
 border-radius: 15px;
}

.team-cards-grid-3 .card h3, .team-cards-grid .card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: #fff;
}

.team-cards-grid-3 .team-title,.team-cards-grid .team-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: #F05024; 
  margin: 0;
}

.custom-border {  
  border-bottom: 2px solid #F24E1E;   
  width: 130px;   
  display: block; 
  margin: 10px 0;  
}

.team-cards-grid-3 .team-content,.team-cards-grid .team-content {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  min-height: 80px;
}

/* --- Social Icons --- */
.team-cards-grid-3 .icons,.team-cards-grid .icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding-top: 1rem;
  margin-top: auto;
}

.team-cards-grid-3 .icons a,.team-cards-grid .icons a {
  color: #fff;
  font-size: 1.1rem;
  width: 35px;
  height: 35px;
  line-height: 35px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.3s, color 0.3s;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.team-cards-grid-3 .icons a:hover,.team-cards-grid .icons a:hover {
  background: #F05024;
  color: #fff;
}

.team-content-container {  
  overflow: hidden;
}

.team-content.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 4; 
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}
/* Style for when content is fully visible */
.team-content.expanded {
  -webkit-line-clamp: unset;
}

.read-more-btn {
  background: none;
  border: none;
  color: #f24e1e;
  cursor: pointer;
  padding: 0;
  font-size: 1em;
  text-decoration: none;
  display: block;
  margin-top: 5px;  
}


/* ==== RESPONSIVE ADJUSTMENTS ==== */
@media (max-width: 1200px) {
  .team-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .team-cards-grid, .team-cards-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .team-main-title {
    font-size: 2rem;
  }
  .team-cards-grid, .team-cards-grid-3 {
    grid-template-columns: 1fr;
  }
  .team-cards-grid-3 .card,.team-cards-grid .card {
    max-width: 350px;
    margin: 0 auto;
  }
}


/* =================================
    SERVICES PAGE STYLES - UPDATED TO MATCH SCREENSHOT
    ================================= */

.services-page-wrapper {
  background-image: url(/wp-content/uploads/2025/11/low-angle-shot-of-a-modern-business-glass-building-2023-11-27-05-29-40-utc-1.png);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 20px;
  min-height: 100vh;
}

.services-header {
  text-align: center;
  margin-bottom: 60px;
  padding: 0 20px;
}

.services-header h1 {
  color: #F24E1E;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
}

.services-header p {
  color: #000000;
  font-size: 14px;
  max-width: 1200px;
  margin: 0 auto;
  line-height: 1.7;
}

.services-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}


.service-card {
  background: #20282d80;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.card-header {
  background: #262f34;
  padding: 35px 40px;
  position: relative;
  border-radius: 0 0px 27px 27px;
}

.brand-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.brand-info {
  flex: 1;
  min-width: 300px;
}

/*.brand-logo {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 12px;
  letter-spacing: 2px;
  line-height: 1.2;
}*/

.brand-logo span {
  color: #a0aec0;
  font-weight: 700;
}

.brand-description {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.6;
  max-width: 600px;
  text-align: justify; /* Justify text */
  text-align-last: right;
}

/* Bottom Section - Light gray with services and buttons */
.card-content {
  padding: 30px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}

/* Services List - Bullet points in columns */
.services-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px 40px;
  flex: 1;
  min-width: 300px;
}

.service-item {
  color: #ffffff;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
  font-weight: 500;
  margin-bottom: 5px !important;
}

.service-item::before {
  content: "•";
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Card Actions - Buttons */
.card-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Button Styling */
.btn {
  padding: 12px 32px;
  border: none;
  border-radius: 20px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

.btn-primary,
.btn-secondary {
  background: #f05024;
  color: white;
  box-shadow: 0 4px 12px rgba(255, 107, 61, 0.3);
}

.btn-primary:hover,
.btn-secondary:hover {
  background: #ff5722;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 107, 61, 0.4);
}

/* Animation for cards */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.service-card {
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
}

.service-card:nth-child(1) {
  animation-delay: 0.1s;
}
.service-card:nth-child(2) {
  animation-delay: 0.2s;
}
.service-card:nth-child(3) {
  animation-delay: 0.3s;
}
.service-card:nth-child(4) {
  animation-delay: 0.4s;
}
.service-card:nth-child(5) {
  animation-delay: 0.5s;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .services-header h1 {
    font-size: 2.3rem;
  }

  .brand-logo {
    font-size: 2rem;
  }

  .card-header,
  .card-content {
    padding: 30px 35px;
  }
}

@media (max-width: 768px) {
  .services-page-wrapper {
    padding: 80px 15px;
  }

  .services-header {
    margin-bottom: 40px;
  }

  .services-header h1 {
    font-size: 2rem;
  }

  .services-header p {
    font-size: 1rem;
  }

  .services-container {
    gap: 25px;
  }

  .card-header,
  .card-content {
    padding: 25px 25px;
  }

  .brand-logo {
    font-size: 1.7rem;
    margin-bottom: 10px;
  }

  .brand-description {
    font-size: 0.9rem;
	text-align-last: center;
    text-align: center;
  }

  .brand-section {
    flex-direction: column;
    align-items: center;
    text-align-last: center;
    gap: 0;
  }

  .card-content {
    flex-direction: column;
    align-items: stretch;
    gap: 25px;
  }

  .services-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    min-width: 100%;
    display: none;
  }

  .service-item {
    font-size: 0.85rem;
  }

  .card-actions {
    justify-content: center;
    width: 100%;
  }

  .btn {
    padding: 11px 28px;
    font-size: 0.9rem;
    flex: 1;
    min-width: 130px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .services-header h1 {
    font-size: 1.7rem;
  }

  .card-header,
  .card-content {
    padding: 20px 20px;
  }

  .brand-logo {
    font-size: 1.5rem;
  }

  .card-actions {
    flex-direction: column;
    gap: 10px;
  }

  .btn {
    width: 100%;
    min-width: 100%;
  }
}

/* === Force Full Width Layout === */
@media (min-width: 576px),
  (min-width: 768px),
  (min-width: 992px),
  (min-width: 1200px) {
  .page-header .entry-title,
  .site-footer .footer-inner,
  .site-footer:not(.dynamic-footer),
  .site-header .header-inner,
  body:not([class*="elementor-page-"]) .site-main {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }
}

@media (min-width: 576px),
  (min-width: 768px),
  (min-width: 992px),
  (min-width: 1200px) {
  .site-footer:not(.dynamic-footer) {
    padding: 40px 80px;
  }
}

/* Remove leftover container padding (if present) */
body.full-width .site-main,
body.full-width .site-header,
body.full-width .site-footer {
  padding-left: 0 ;
  padding-right: 0 ;
}

:root {
  --primary-color: #ffa500;
  --secondary-color: #000000;
  --light-bg-color: #ffffff;
  --dark-text-color: #20282D;
  --light-text-color: #f0f0f0;
  --border-radius: 12px;
}

/* Base styling and Parallax effect from the background images */
#contact-page-wrapper {  
  background-image: url("/wp-content/uploads/2025/11/low-angle-shot-of-a-modern-business-glass-building-2023-11-27-05-29-40-utc-1.png");
  background-attachment: fixed; 
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
  padding: 50px 0;
}

/* --- A. Office Selector Section Styling (Image 3) --- */
/*.office-selector-section {
  padding-bottom: 80px;
}*/

.multi-country-container {
  display: flex;
  justify-content: center;
  align-items: flex-start; 
  margin: 0 auto;
  padding: 0 2rem;
}

.contact-offices-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 350px;
}

/* Individual Office Card Styling */
.contact-office-card {
  position: relative;
  width: 100%;
  height: 90px;
  border-radius: var(--border-radius);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.contact-office-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) brightness(50%);
  transition: filter 0.3s ease;
}

/*.contact-office-card .country-name {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  color: var(--light-text-color);
  font-size: 1.3rem;
  font-weight: 600;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  z-index: 10;
}*/

/* Active Card State (South Africa in Image 3) */
.contact-office-card.active-card,
.contact-office-card:hover {
  border-color: var(--primary-color);
}

.contact-office-card.active-card img,
.contact-office-card:hover img {
  filter: grayscale(0%) brightness(70%); 
}

:root {
  --primary-color: #ffa500; 
  --light-text-color: #f0f0f0;
  --border-radius: 12px;
}


.contact-office-card {
  position: relative;
  width: 100%;
  height: 90px; 
  border-radius: var(--border-radius);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 3px solid transparent; 
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/*.contact-office-card .country-name {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  color: var(--light-text-color);
  font-size: 1.3rem;
  font-weight: 600;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  z-index: 10;  
}*/


/* South Africa */
.contact-offices-wrapper .contact-office-card:nth-child(1) {
  background: url("/wp-content/uploads/2025/03/South-AfricaDark-Overlay.png")
    no-repeat center/cover;
  transition-delay: 0.1s;
}

/* Botswana */
.contact-offices-wrapper .contact-office-card:nth-child(2) {
  background: url("/wp-content/uploads/2025/03/BotswanaDark-Overlay.png")
    no-repeat center/cover;
  transition-delay: 0.2s;
}

/* Ghana */
.contact-offices-wrapper .contact-office-card:nth-child(3) {
  background: url("/wp-content/uploads/2025/03/GhanaDark-Overlay.png") no-repeat
    center/cover;
  transition-delay: 0.3s;
}

/* Kenya */
.contact-offices-wrapper .contact-office-card:nth-child(4) {
  background: url("/wp-content/uploads/2025/10/KenyaDark-Overlay.png") no-repeat
    center/cover;
  transition-delay: 0.4s;
}

/* Mauritius */
.contact-offices-wrapper .contact-office-card:nth-child(5) {
  background: url("/wp-content/uploads/2025/03/MauritiusDark-Overlay.png")
    no-repeat center/cover;
  transition-delay: 0.5s;
}

/* Zambia */
.contact-offices-wrapper .contact-office-card:nth-child(6) {
  background: url("/wp-content/uploads/2025/03/ZambiaDark-Overlay.png")
    no-repeat center/cover;
  transition-delay: 0.6s;
}

/* Finland */
.contact-offices-wrapper .contact-office-card:nth-child(7) {
  background: url("/wp-content/uploads/2025/11/finland-scaled.jpg") no-repeat
    center/cover;
  transition-delay: 0.7s;
}


.contact-office-card:hover:not(.active-card) {
  border-color: #F05024;  
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}


.contact-office-card.active-card {
  border-color: #F05024;
  box-shadow: 0 0 15px rgba(255, 165, 0, 0.7);
  cursor: default;
}


.contact-details-box {
  flex-grow: 1;  
  padding: 20px;
  color: var(--dark-text-color);
  font-size: 1.1rem;
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.85); 
  border-radius: var(--border-radius);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-right: 60px;
}

.contact-details-box h2 {
  color: #F05024;
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.contact-details-box a {
  color: #F05024;
  text-decoration: none;
}


.form-map-section {
  max-width: 1200px;
  margin: 40px auto;
}

.form-map-container {
  display: flex;
  min-height: 600px;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  border: 3px solid #F05024; 
}


.form-column {
  flex: 1;
  background-color: var(--light-bg-color);
  padding: 50px;
}

.form-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--dark-text-color);
  margin-bottom: 40px;
}

/* Form Styling */
.form-group {
  margin-bottom: 25px;
  position: relative;
}

.form-group label {
  display: block;
  color: var(--dark-text-color);
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
  font-size: 1rem;
  color: var(--dark-text-color);
  background: transparent;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-bottom-color: var(--primary-color);
}

/* Checkbox specific styling */
.checkbox-group {
  display: flex;
  align-items: center;
  margin-top: 30px;
}
.checkbox-group label {
  display: inline;
  font-size: 0.95rem;
  color: var(--dark-text-color);
  margin-left: 10px;
}

/* Submit Button Styling */
.submit-button {
  background-color: var(--primary-color);
  color: var(--light-bg-color);
  border: none;
  padding: 12px 30px;
  border-radius: 5px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 20px;
}

.submit-button:hover {
  background-color: #cc8400; 
}

/* Right Column: Map and Info (Black background) */
.map-info-column {
  flex: 1;
  background-color: var(--secondary-color);
  color: var(--light-text-color);
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}

.intro-text {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 30px;
}

.map-placeholder {
  position: relative;
  height: 250px;
  width: 100%;
  background-color: #20282D;
  margin-bottom: 30px;
}

.map-info-box {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: var(--light-bg-color);
  color: var(--dark-text-color);
  padding: 10px;
  border-radius: 5px;
  font-size: 0.8rem;
  line-height: 1.3;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  z-index: 20;
}

.contact-info-list p {
  margin-bottom: 15px;
  font-size: 1rem;
  display: flex;
  align-items: center;
}

.contact-info-list i {
  margin-right: 15px;
  font-size: 1.2rem;
}

/* Social Icons */
.social-icons {
  margin-top: 30px;
  text-align: right;
}

.social-icons a {
  color: var(--light-text-color);
  font-size: 1.5rem;
  margin-left: 15px;
  transition: color 0.3s;
}

.social-icons a:hover {
  color: var(--primary-color);
}


@media (max-width: 900px) {  
  .multi-country-container {
    flex-direction: column;
    align-items: center;
  }
  .contact-offices-wrapper {
    width: 100%;
    max-width: 350px; 
   /* margin-bottom: 30px;*/
  }
  .contact-details-box {
    margin-left: 0;
    width: 100%;
  }


  .form-map-container {
    flex-direction: column;
    border-width: 2px;
    margin: 20px;
  }
  .form-column,
  .map-info-column {
    padding: 30px;
  }

  
  .form-column {
    text-align: center; 
  }
  .form-title {
    font-size: 2rem;
    margin-bottom: 20px;
  }
  .form-title::after {
    content: "Let's get in touch!"; 
    display: block;
    font-size: 1rem;
    font-weight: 400;
    color: #000000;
    margin-top: 5px;
  }


  .submit-button {
    display: block;
    width: 100%;
  }

 
  .map-info-column {
    order: 2; 
    text-align: center;
  }

  .intro-text {
    display: none; 
  }
  .social-icons {
    text-align: center;
  }
  .social-icons a {
    margin: 0 10px;
  }
  .contact-info-list {
    justify-items: left;
  }
}

@media (max-width: 575px) {
  .page-header .entry-title,
  .site-footer .footer-inner,
  .site-footer:not(.dynamic-footer),
  .site-header .header-inner,
  .site-header:not(.dynamic-header),
  body:not([class*="elementor-page-"]) .site-main {
    padding-inline-start: 0px;
    padding-inline-end: 0px;
  }
}

@media (max-width: 767px) {
  .footer-services-column,
  .footer-logo {
    display: none;
  }

  .site-footer:not(.dynamic-footer) {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* =================================
    CONTACT FORM SECTION - MATCHING SCREENSHOT
    ================================= */

:root {
  --primary-color: #F05024;
  --secondary-color: #000000;
  --light-bg-color: #ffffff;
  --dark-text-color: #20282D;
  --light-text-color: #f0f0f0;
  --border-radius: 12px;
}

#contact-page-wrapper {
  background-image: url("/wp-content/uploads/2025/11/low-angle-shot-of-a-modern-business-glass-building-2023-11-27-05-29-40-utc-1.png");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 20px;
  min-height: 100vh;
}

.contact-section.form-map-section {
  max-width: 1200px;
  margin: 0 auto;
}

.form-map-container {
  display: flex;
  min-height: 500px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
  border: 3px solid #F05024;
}

/* Left Column - White Form Section */
.form-column {
  flex: 1;
  background-color: #ffffff;
  padding: 50px 45px;
  display: flex;
  flex-direction: column;
}

.form-title {
  font-size: 52px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 35px;
  line-height: 1.2;
}

/* Contact Form 7 Styling */
.contact-form-shortcode-wrapper {
  width: 100%;
}

.wpcf7-form {
  width: 100%;
}

.wpcf7-form select {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
}

.wpcf7-form p {
  margin-bottom: 25px;
}

.wpcf7-form label {
  display: block;
  color: #20282D;
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 8px;
  text-align: -webkit-left;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  border: none;
  border-bottom: 2px solid #e0e0e0;
  padding: 12px 0;
  font-size: 1rem;
  color: #20282D;
  background: transparent;
  transition: border-color 0.3s;
  font-family: "Inter", sans-serif;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-bottom-color: #F05024;
}

.wpcf7-form textarea {
  min-height: 80px;
  resize: vertical;
  height: 75px;
}

/* Checkbox Styling */
.wpcf7-form .wpcf7-checkbox {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.wpcf7-form .wpcf7-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  cursor: pointer;
}

.wpcf7-form .wpcf7-checkbox .wpcf7-list-item-label {
  font-size: 0.9rem;
  color: #000000;
}

/* Submit Button */
.wpcf7-form input[type="submit"] {
  background: #F05024;
  color: #ffffff;
  border: none;
  padding: 14px 35px;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 15px;
  box-shadow: 0 4px 15px rgba(255, 107, 74, 0.3);
}

.wpcf7-form input[type="submit"]:hover {
  background: #ff5533;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 74, 0.5);
}

/* Right Column - Black Map Section */
.map-info-column {
  flex: 1;
  background-color: #000000;
  color: #ffffff;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.intro-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #e0e0e0;
  margin-bottom: 30px;
}

/* Map Placeholder */
.map-placeholder {
  position: relative;
  height: 250px;
  width: 100%;
  background-color: #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 30px;
}

.map-placeholder iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Contact Info List */
.contact-info-list {
  margin-bottom: 30px;
  text-align: left;
}

.contact-info-list p {
  margin-bottom: 20px;
  font-size: 0.95rem;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  color: #ffffff;
}

.contact-info-list svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-info-list a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-info-list a:hover {
  color: #F05024;
}

.contact-info-list .elementor-icon-list-text {
  line-height: 1.6;
}

/* Social Icons */
.social-icons {
  display: flex;
  gap: 15px;
  margin-top: auto;
}

.social-icons a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.1rem;
  transition: all 0.3s;
}

/* Responsive Design */
@media (max-width: 900px) {
  .form-map-container {
    flex-direction: column;
    border-width: 3px;
  }

  .form-column,
  .map-info-column {
    padding: 40px 30px;
  }

  .form-title {
    font-size: 2rem;
    text-align: center;
  }

  .wpcf7-form input[type="submit"] {
    width: 100%;
  }

  .map-info-column {
    text-align: center;
  }

  .contact-info-list p {
    justify-content: center;
  }

  .social-icons {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  #contact-page-wrapper {
    padding: 60px 15px;
  }

  .form-column,
  .map-info-column {
    padding: 30px 20px;
  }

  .form-title {
    font-size: 1.8rem;
  }

  .map-placeholder {
    height: 200px;
  }

  .contact-info-list p {
    flex-direction: column;
    /* align-items: center; */
    /* text-align: center; */
  }
}

/* Office Selector Section */
.office-selector-section {
  max-width: 1200px;
  /*margin: 0 auto 80px;*/
}

.multi-country-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}

.contact-offices-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 350px;
}

.contact-office-card {
  position: relative;
  width: 100%;
  height: 90px;
  border-radius: 27px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 3px solid transparent;
}

.contact-office-card .country-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 30px;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    z-index: 10;
    text-align: center;
    width: 100%;
}

.contact-office-card:hover,
.contact-office-card.active-card {
  border-color: #F05024;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 107, 74, 0.4);
}

.contact-offices-wrapper .contact-office-card.card-south-africa {
  background: url("/wp-content/uploads/2025/03/South-AfricaDark-Overlay.png")
    no-repeat center/cover;
  border: 3px solid #F05024;
}

.contact-offices-wrapper .contact-office-card.card-botswana {
  background: url("/wp-content/uploads/2025/03/BotswanaDark-Overlay.png")
    no-repeat center/cover;
  border: 3px solid #F05024;
}

.contact-offices-wrapper .contact-office-card.card-ghana {
  background: url("/wp-content/uploads/2025/03/GhanaDark-Overlay.png")
    no-repeat center/cover;
  border: 3px solid #F05024;
}

.contact-offices-wrapper .contact-office-card.card-kenya {
  background: url("/wp-content/uploads/2025/10/KenyaDark-Overlay.png")
    no-repeat center/cover;
  border: 3px solid #F05024;
}

.contact-offices-wrapper .contact-office-card.card-mauritius {
  background: url("/wp-content/uploads/2025/03/MauritiusDark-Overlay.png")
    no-repeat center/cover;
  border: 3px solid #F05024;
}

.contact-offices-wrapper .contact-office-card.card-zambia {
  background: url("/wp-content/uploads/2025/03/ZambiaDark-Overlay.png")
    no-repeat center/cover;
  border: 3px solid #F05024;
}

.contact-offices-wrapper .contact-office-card.card-finland {
  background: url("/wp-content/uploads/2025/11/finlandDark-Overlay.png")
    no-repeat center/cover;
  border: 3px solid #F05024;
}


.contact-details-box {
  flex: 1;
  padding: 30px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.contact-details-box h2 {
  color: #F05024;
    font-size: 24px;
    margin-bottom: 20px;
}

.contact-details-box p {
  margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.6;
    color: #000000;
}

.contact-details-box a {
  color: #000000;
    text-decoration: underline;
    transition: color 0.3s;
}

.contact-details-box a:hover {
  color: #F05024;
}

@media (max-width: 900px) {
  .multi-country-container {
    flex-direction: column;
    align-items: center;
    flex-direction: column-reverse;
    padding: 0 1rem;
  }

  .contact-offices-wrapper {
    width: 100%;
    max-width: 400px;
  }

  .contact-details-box {
    width: 100%;
  }
}

.help-container {
  position: relative;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.help-content-wrapper {
  flex: 0 0 auto;
}

.company-cards-wrapper {
  flex: 1;
}

@media (max-width: 991px) {
  .help-container {
    flex-direction: column;
  }

  .help-content-wrapper {
    width: 100%;
  }
}

/* How we help our customers */
.help-ao-group-section {
  background-image: url(/wp-content/uploads/2025/11/low-angle-shot-of-a-modern-business-glass-building-2023-11-27-05-29-40-utc-1.png);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 2rem 0;
  width: 100%;
}

.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: block;
  box-sizing: border-box;
}


.left-half {
  position: inherit;
  box-sizing: border-box;
  padding-right: 0px;
  padding-bottom: 40px;
}

.right-half {
  padding-left: 0px;
  overflow: hidden;
}

/* @media (min-width: 768px) {} */

@media (min-width: 1024px) {
  .help-ao-group-section {
    padding: 4rem 0;
  }

  .main-container {
    display: flex;
    align-items: flex-start;
  }

  .left-half {
    flex: 1;
    position: sticky;
    top: 100px;
    box-sizing: border-box;
    padding-right: 80px;
  }

  .right-half {
    flex: 1;
    padding-left: 80px;
  }
}

/* Example boxes to show scrolling */
.right-half .box {
  min-height: 200px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Base styles for the section container */
.client-section {
  background-image: url(/wp-content/uploads/2025/11/low-angle-shot-of-a-modern-business-glass-building-2023-11-27-05-29-40-utc-1.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 60px 20px;
  text-align: center;
}

/* Wrapper to constrain content width */
.client-content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

/* Header and Introduction Text */
.client-header {
  margin-bottom: 40px;
}

.client-section h2 {
  color: #ff5722; 
  font-size: 2.5em;
  font-weight: 700;
  margin-bottom: 20px;
}

.client-intro {
  max-width: 800px;
  margin: 0 auto 40px;
  font-size: 1em;
  line-height: 1.6;
  color: rgb(85, 85, 85);
}

/* --- Client Logo Grid (Mobile-First) --- */

.client-logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  list-style: none;
  margin-top: 40px;
  gap: 40px 20px;
}

.client-logo-item {
  width: calc((100% - 29px) / 2);
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px; 
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
  box-sizing: border-box;
}

.client-logo-item img {
  max-width: 100%;
  transition: opacity 0.3s, filter 0.3s;
}

.client-logo-item:hover img {
  opacity: 1;
  filter: grayscale(0%) brightness(1); 
}



/* --- Tablet/Mid-Screen Adjustments (4 Columns) --- */
@media (min-width: 768px) {
  .client-logo-grid {
    gap: 40px 20px;
  }

  .client-logo-item {
    border-bottom: none;
    width: calc((100% - 60px) / 4);
  }
}

/* --- Desktop Adjustments (5 Columns) --- */
@media (min-width: 1024px) {
  .client-logo-grid {
    gap: 50px 30px;
  }
  
  .client-logo-item {
     width: calc((100% - 120px) / 5);
   }
}

/* Tablet and Mobile (991px and below) */
@media (max-width: 991px) {  
  .mobile-navigation { 
    right: -955px; 
  }

}

@media (min-width: 992px) {
  
  .client-logo-grid {
     gap: 40px 10px;
  }
  
  .site-header:not(.dynamic-header) {
    max-width: 1400px;	
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .site-header:not(.dynamic-header) {
        width: 100%;       
    }
}

.menu-item-has-children .footer-link-group-title {
  font-weight: 400;
}

.menu-item-has-children .footer-company-links ul {
  padding-left: 15px;
}



/* Policy pages - Revised to match screenshot colors and text styling */
.policy-content {
  /* Background image and properties retained */
  background-image: url(/wp-content/uploads/2025/11/low-angle-shot-of-a-modern-business-glass-building-2023-11-27-05-29-40-utc-1.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 60px 40px;
}

.policy-content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.policy-content h1 {
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 30px;
  font-weight: bold;
  color: #000; /* Black for title */
}

/* Base style for all text inside policy-content to match the screenshot's color */
.policy-content a,
.policy-content p,
.policy-content div {
  /* Set all text to black/dark gray and remove default underline */
  color: #000;
  text-decoration: none;
  line-height: 1.6; /* Improve readability */
}

.policy-content .last-updated {
  /* This element is treated as plain text in the screenshot */
  color: #000;
  text-decoration: none;
  margin-bottom: 20px;
  display: block;
  font-size: 0.95em;
}

.policy-content .intro {
  /* This element is treated as plain text in the screenshot */
  margin-bottom: 25px;
  color: #000;
  text-decoration: none;
  font-size: 0.95em;
}

.policy-content .section {
  /* Used for spacing between main titles and content */
  margin-bottom: 15px; /* Reduce space after main titles */
}

.policy-content .section-title {
  /* NOTE: This class isn't used in your HTML, but keeping it for context */
  color: #000;
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 1em;
}

.policy-content .section-content {
  /* Policy content text */
  color: #000;
  text-decoration: none;
  margin-bottom: 10px;
  font-size: 0.95em;
  /* Reduce left margin for policy body text to match screenshot */
  margin-left: 0;
}

.policy-content .bullet-point {
  /* Used for main section headers: • What Are Cookies? */
  /* Remove left margin to align with the rest of the text */
  margin-left: 0;
  margin-bottom: 15px;
  position: relative;
  font-weight: bold; /* Make the titles bold */
}

.policy-content .bullet-point::before {
  /* Keep the bullet for the main section headers */
  content: "•";
  position: absolute;
  left: -15px;
  color: #000;
  font-weight: bold;
}

.policy-content .bullet-title {
  /* Style for the text within the • bullets (the section titles) */
  color: #000; /* Black */
  text-decoration: none; /* No underline */
  font-size: 0.95em;
  font-weight: bold; /* Ensure the title text is bold */
}

/* Specific styling for the list items inside the policy body (e.g., Types of Cookies) */
/* The original code didn't use list tags, but used .section-content for the list items. */
.policy-content .section-content a:first-child {
  display: block;
  text-indent: -15px; /* Use negative indent to simulate hanging list marker */
  padding-left: 15px;
  margin-left: 20px; /* Add margin to indent the whole list block */
  color: #000;
  text-decoration: none;
}

/* Ensure the contact info remains black and un-underlined */
.policy-content .no-link,
.policy-content .contact-intro a {
  color: #000;
  text-decoration: none;
}

.policy-content .contact-section {
  margin-top: 40px;
  padding-top: 20px;
}

.policy-content .contact-title {
  font-weight: bold;
  color: #000;
  margin-bottom: 15px;
  font-size: 1em;
}

.policy-content .contact-intro {
  color: #000;
  text-decoration: none;
  margin-bottom: 15px;
  font-size: 0.95em;
}

.policy-content .contact-info {
  margin-left: 0;
}

.policy-content .contact-info p {
  margin-bottom: 5px;
  font-size: 0.95em;
}

/* Re-apply styling only to the mailto link in the contact section to be clear it's a link */
.policy-content .contact-info a {
  text-decoration: none;
}

/* Media Query remains the same */
@media (max-width: 1025px) {
  .policy-content {
    padding: 30px 50px;
  }

  .policy-content .bullet-point {
    margin-left: 0; /* Remove margin for smaller screens */
  }
}

/* --- 404 Page Styling (Add this to your existing style.css) --- */

.page-404-content {
  /* Ensure the 404 area takes up enough vertical space */
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background-color: #0d123d; /* Dark space background color */
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.error-404-container {
  max-width: 900px;
  width: 100%;
  z-index: 10;
}

.space-scene {
  margin-bottom: 40px;
}

.error-message-top {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: #F05024;
  justify-content: center;
  align-items: center;
  display: flex;
}

.error-code-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  margin-bottom: 30px;
  position: relative;
}

.error-digit {
  font-size: 15vw; /* Fluid size for digits */
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.error-astronaut {
  position: relative;
  width: 150px; /* Adjust size of the placeholder */
  height: 200px;
  margin: 0 20px;
}

.error-detail {
  max-width: 600px;
  margin: 0 auto 40px auto;
  font-size: 1.1rem;
  line-height: 1.6;
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 30px;
  letter-spacing: 2px;
  color: #ffffff;
}

.btn-go-back:hover {
  background-color: #3b4ae0;
  transform: translateY(-2px);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .page-404-content {
    min-height: 60vh;
    padding: 40px 15px;
  }
  .error-message-top {
    font-size: 1.2rem;
  }
  .error-digit {
    font-size: 20vw;
  }
  .error-astronaut {
    width: 100px;
    height: 140px;
    margin: 0 10px;
  }
  .error-detail {
    font-size: 1rem;
  }
}

/* Keyframe for floating astronaut */
@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(1deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

.error-actions {  
  font-weight: 500;  
  letter-spacing: 2px;
  color: #ffffff;
  justify-content: center;
  align-items: center;
  display: flex;
}

.mobile-contact-details {
    display: none;
    width: 100%; /* Full width */
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .mobile-contact-details {
        display: block;
        padding: 20px;
        background: #ffffff;
        margin: 0 0 20px 0; /* Space below, no side margins */
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        animation: slideDown 0.3s ease;
    }
    
    .mobile-contact-details h3 {
        margin-top: 0;
        color: #20282D;
    }
    
    .mobile-contact-details p {
        margin: 10px 0;
    }
    
    #contact-details-container {
        display: none;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}



/* Mobile contact details styling */
.mobile-contact-details-wrapper {
    display: none;
}

.mobile-contact-details {
    display: none;
}

@media (max-width: 768px) {
    /* Hide the desktop side container on mobile */
    #contact-details-container {
        display: none !important;
    }
    
    /* Show the wrapper as a separate block between cards */
    .mobile-contact-details-wrapper {
        display: block;
        width: 100%;
        margin: 0 0 20px 0;
        animation: slideDown 0.3s ease;
    }
    
    /* Show mobile details */
    .mobile-contact-details {
        display: block;
        width: 100%;
        padding: 25px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        box-sizing: border-box;
    }
    
    .mobile-contact-details .contact-details-content {
        width: 100%;
    }
    
    .mobile-contact-details h3 {
        margin: 0 0 20px 0;
        color: #333;
        font-size: 22px;
        font-weight: 700;
    }
    
    .mobile-contact-details p {
        margin: 12px 0;
        line-height: 1.8;
        font-size: 15px;
        color: #333;
    }
    
    .mobile-contact-details strong {
        color: #000;
        font-weight: 600;
    }
    
    .mobile-contact-details a {
        color: #e95420;
        text-decoration: none;
        word-break: break-word;
    }
    
    .mobile-contact-details a:hover {
        text-decoration: underline;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}
/* ==== RESPONSIVE ==== */

/* Desktop View (992px and above) */
@media (min-width: 992px) {
    .header-actions {
    display: block;
  }
  .mobile-menu-toggle {
    display: none !important;
  }
  .mobile-navigation {
    display: none !important;
  }
}

/* Tablet and Mobile (991px and below) */
@media (max-width: 991px) {
  .site-header {
width: 100% ;
    margin-top: 15px;
    border-radius: 27px;
    padding: 0.8rem 0;
    margin-left: 15px;
    margin-right: 15px;
  }

  .header-container {
    padding: 0 1.5rem;
  }

  .desktop-nav {
    display: none !important;
  }

  .header-actions {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
  }

  .ao-container {   
    padding: 0 30px;
  }


  /* .footer-nav-grid {
    grid-template-columns: repeat(2, 1fr);
  } */

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .footer-social {
    order: -1;
  }
}

/* Mobile (767px and below) */
@media (max-width: 767px) {
  .hero-subtitle {
    font-size: 1rem;
  }

  .btn-hero {
    padding: 0.85rem 1.75rem;
    font-size: 0.95rem;
  }

  .footer-title {
    font-size: 2rem;
  }

  /* .footer-nav-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  } */

  .footer-services-column,
  .footer-logo {
    display: none;
  }

  .site-footer:not(.dynamic-footer) {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* Very Small Mobile (575px and below) */
@media (max-width: 575px) {
  .page-header .entry-title,
  .site-footer .footer-inner,
  .site-footer:not(.dynamic-footer),
  .site-header .header-inner,
  .site-header:not(.dynamic-header),
  body:not([class*="elementor-page-"]) .site-main {
    padding-inline-start: 0px;
    padding-inline-end: 0px;
  }
 .site-header:not(.dynamic-header) {
	width: 90% ;
   /* margin-right: auto;
    margin-left: 15px;
	 width: 380px;*/
  }
}

/*@media (min-width: 768px) {
    .site-header:not(.dynamic-header) {        
        width: 698px;
        margin-right: 0;
        margin-left: 0;
    }
}
*/



/* @media (max-width: 575px) {
    .site-header:not(.dynamic-header) {
		width: 90%;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: 768px) {
    .site-header:not(.dynamic-header) {        
        width: 90%;
    }

}
@media (min-width: 576px) {
    .site-header:not(.dynamic-header) { 
        width: 90%;
    }
} */

#contact-page-wrapper .country-content-wrapper {
    /* This will undo any 'text-align: end;' or 'text-align: right;' 
       and set it back to the default 'text-align: start;' (or 'left') */
    text-align: start !important; 
}

/*#contact-page-wrapper .multi-country-container {    
    padding-bottom: 50px;
}*/

/* Our Work */
.client-logo-item img {max-height:100px;}
.mt-70{margin-top:70px;}