/* =====================================================================
   OVAVUE – custom.css
   Sections follow the order they appear on index.html:
    1. ROOT VARIABLES & UTILITY CLASSES
    2. BASE ELEMENTS
    3. SHARED STYLES
    4. PAGE LOADER
    5. NAVBAR
    6. WELCOME BANNER
    7. INTRODUCTION
    8. OUR INDUSTRIES
    9. THE SYSTEM
   10. WORKFLOW JOURNEY (TIMELINE)
   11. CURRENT OPERATIONS & TESTIMONIALS
   12. PRICING PACKAGES
   13. CONTACT US
   14. MODALS
   15. SITE MAP (FOOTER)
   16. FLOATING WHATSAPP BUTTON
   17. CONTACT CARD PAGE
   ===================================================================== */


/* =====================================================================
   1. ROOT VARIABLES & UTILITY CLASSES
   Colour variables, then small single-purpose helper classes used across the page.
   ===================================================================== */

:root {
    /* Font – Helvetica everywhere. Arial is the named fallback for devices
       without Helvetica (Windows, Android, Linux), so they all fall back to
       the same Helvetica-like font instead of each browser's own default. */
    --AgFont: Helvetica, Arial, sans-serif;

    /* Colours */
    --AgConsole: #03AC7D;
    --AgConsoleDark: #0C966F;
    --AgConsoleHighlight: #D9FFE6;
    --AgGradient: linear-gradient(180deg,rgba(0, 199, 143, 1) 0%, rgba(0, 150, 108, 1) 100%);
    --AgGradient30: linear-gradient(210deg,rgba(0, 199, 143, 1) 0%, rgba(0, 150, 108, 1) 100%);
    --AgGradientOverlay: linear-gradient(180deg,rgba(0, 199, 143, 0.55) 0%, rgba(0, 150, 108, 0.8) 100%);
    --registerGradient: linear-gradient(180deg,rgba(233, 77, 68, 1) 0%, rgba(181, 59, 53, 1) 100%);
    --registerGradient30: linear-gradient(210deg,rgba(233, 77, 68, 1) 0%, rgba(181, 59, 53, 1) 100%);
    --construction: #ffdd9c;
    --constructionDark: #7e5403;
    --agriculture: #a2f0c6;
    --agricultureDark: #136d3d;
    --highlightGrey: #F2F2F2;
    --midGrey: #c9c9c9;
    --textGreyDark: #494949;
    --textBox: #ced4da;
    --AgWarning: #F2A929;
    --AgWarningHighlight: #ffdc9e;
    --AgWarningDark: #BD7E13;
    --AgDangerHighlight: #ffafa9;
    --AgDanger: #d0493f;
    --AgDangerDark: #6b1e14;
    --AgReporting: #794feb;
    /* Box Shadows */
    --BoxShadow: 0px 0px 20px #49494970;
    --BoxShadowSM: 0px 0px 10px #2d2d2d59;
    /* Software Packages */
    --StarterPackage: linear-gradient(30deg,rgb(0, 126, 137) 0%, rgb(0, 226, 157) 100%);
    --GrowthPackage: linear-gradient(30deg,rgb(0, 81, 132) 0%, rgb(19, 206, 200) 100%);
    --EnterprisePackage: linear-gradient(30deg,rgb(36, 0, 132) 0%, rgb(147, 0, 255) 100%); 
    --ProfessionalPackage: linear-gradient(30deg,rgb(55, 39, 141) 0%, rgb(0, 181, 204) 100%);
    /* Components */
    --Register: #a83931;
    --Assets: #f76239;
    /* Status Colours */
    --Resting: #2e7cef;
    --RestingLight: #d1e3ff;
    --Working: #ef742e;
    --WorkingLight: #ffe8db;
    --Available: #03AC7D;
    --AvailableLight: #d1fff2;
}

/* BACKGROUND COLOURS */

.bg-white {
    background-color: white !important;
}

/* BG - Tiers */

.bg-Starter {
    background: var(--StarterPackage)!important;
}

.bg-Growth {
    background: var(--GrowthPackage)!important;
}

.bg-Professional{
    background: var(--ProfessionalPackage)!important;
}

.bg-Enterprise {
    background: var(--EnterprisePackage)!important;
}

.txt-Grey {
    color: #999999;
}

.txt-ccc {
    color: #6a6e6d;
}

.txt-AgConsole {
    color: var(--AgConsole);
}

.txt-AgDanger {
    color: var(--AgDanger);
}

/* DIV RADIUS */

.rad-20 {
    border-radius: 20px!important;
}

/* SPACING */

.padB-20 {
    padding-bottom: 20px;
}

.padB-40 {
    padding-bottom: 40px;
}

.padB-80 {
    padding-bottom: 80px;
}

.padB-100 {
    padding-bottom: 100px;
}

/* TYPOGRAPHY */

.fw-600 {
    font-weight: 600;
}

.fadedText {
    opacity: 0.4;
}

/* ANIMATION TIMING (used with .fade-up and .slide-in) */

.delay-15 {
    --delay: 0.15s;
}

.delay-25 {
    --delay: 0.25s;
}

.delay-30 {
    --delay: 0.3s;
}

.delay-35 {
    --delay: 0.35s;
}

.delay-45 {
    --delay: 0.45s;
}

.delay-55 {
    --delay: 0.55s;
}

.delay-65 {
    --delay: 0.65s;
}

.distance-60 {
    --distance: 60px;
}

.slide-from-80 {
    --from: 80px;
}

.slide-from-200 {
    --from: 200px;
}


/* =====================================================================
   2. BASE ELEMENTS
   Default styling for plain HTML tags (body, links, paragraphs, tables...).
   ===================================================================== */

html, body {
    font-family: var(--AgFont);
    max-width: 100%;
    overflow-x: hidden;
    background: #FFFFFF;
}

/* Browsers give form fields and buttons their own system font, and
   Bootstrap gives tooltips/popovers a fixed font list – make them all
   use the site font too. (Font Awesome icons keep their icon font.) */
button, input, select, optgroup, textarea,
.tooltip, .popover {
    font-family: var(--AgFont);
}

/* Hide the page scrollbar on all browsers (the page still scrolls with wheel,
   trackpad, touch and keyboard). With no scrollbar, nothing shifts sideways
   when scrolling is locked (e.g. mobile drawer open). */
html {
    scrollbar-width: none;            /* Firefox, Chrome, Edge */
}

html::-webkit-scrollbar {
    display: none;                    /* Safari, older Chrome */
}

p {
    font-weight: 400;
}

h4 {
    font-weight: 400;
}

b {
    font-weight: 600;
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

form input:focus,
form textarea:focus {

border: 1px solid #3DC57C !important;

box-shadow: 0 0 3px #3DC57C !important;

-moz-box-shadow: 0 0 3px #3DC57C !important;

-webkit-box-shadow: 0 0 3px #3DC57C !important;

}

input:focus,
textarea:focus {

outline-offset: 0px !important;

outline: none !important;

}

input::placeholder {
    color: #d3d3d3!important;
    font-size: 0.9em;
    font-style: italic;
    opacity: 1;    /* Firefox lowers placeholder opacity by default */
}

textarea::placeholder {
    color: #d3d3d3!important;
    font-size: 0.9em;
    font-style: italic;
    opacity: 1;    /* Firefox lowers placeholder opacity by default */
}


/* =====================================================================
   3. SHARED STYLES
   Headings, section spacing, tables and animations used in more than one section.
   ===================================================================== */

.row {
    margin-right: 0;
}

.sexion {
    padding: 75px 0px 75px 0px;
}

.Hstyle {
    font-size: 40px; 
    font-weight: 600; 
    color:#3dc57c;
}

.Hstyle2 {
    font-size: 50px; 
    font-weight: 600; 
    color:#3dc57c;
}

.SubHStyle {
    font-size: 26px; 
    font-weight: 400; 
    line-height: 1.45em;
    margin-left: auto;
    margin-right: auto;
}

/* Starting state: lowered and invisible */
.fade-up {
    opacity: 0;
    translate: 0 var(--distance, 40px);
    transition: opacity 0.8s ease, translate 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--delay, 0s);
}

/* Visible state, added by the script */
.fade-up.in-view {
    opacity: 1;
    translate: 0 0;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid #d5d5d5;
    border-radius: 12px;
}

.clean-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.95rem;
}

.clean-table th,
.clean-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 0.95em;
    vertical-align: top;
}

.clean-table td {
    line-height: 2em
}

.clean-table tbody tr:last-child td {
    border-bottom: none;
}

.clean-table a {
    font-style: normal;
    color: var(--AgReporting);
}

.clean-table tbody i {
    width: 25px;
    text-align: center;
    color: var(--AgReporting);
}

.left {
    padding-left: 40px;
}

@media (prefers-reduced-motion: reduce) {

    /* Respect users who turn off animations */
    .fade-up {
        translate: none;
        transition: opacity 0.6s ease;
    }

}

@media (max-width: 1200px) {

    .sexion {
        padding: 50px 0px 50px 0px;
    }

    .Hstyle {
        font-size: 30px; 
        font-weight: 600; 
        color:#3dc57c;
    }

    .Hstyle2 {
        font-size: 35px; 
        font-weight: 600; 
        color:#3dc57c;
    }

    .SubHStyle {
        font-size: 22px; 
        font-weight: 400; 
    }

}

@media (max-width: 768px) {

    .sexion {
        padding: 50px 0px 50px 0px;
    }

    .SubHStyle {
        font-size: 20px;
        font-weight: 400;
    }

}


/* =====================================================================
   4. PAGE LOADER
   White overlay + spinner shown until the page has loaded (#pageLoader).
   ===================================================================== */

html.is-loading {
    overflow: hidden;
}

#pageLoader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: #FFFFFF;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#pageLoader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.pageLoader-spinner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #f1f1f1;
    border-top-color: #03AC7D;
    animation: pageLoaderSpin 0.8s linear infinite;
}

@keyframes pageLoaderSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pageLoader-spinner {
        animation-duration: 2s;
    }
}


/* =====================================================================
   5. NAVBAR
   Top navigation bar, mobile drawer, Sign In button and country flag.
   ===================================================================== */

#countryFlag img {
    width: 35px;
    border: 2px solid #FFF;
    border-radius: 17px;;
}

#loginBtn:hover svg {
    fill: #27A67E;
    transition: fill 0.3s;
}

#navbar {
    top:0;
    transition: top 0.5s;
    background-color: #fff;
}

.nav-item {
    padding-left: 30px;
}

.navbarCustom {
    border-radius: 0px 0px 15px 15px;
    background-color: none;
    padding: 0px 5px 0px 5px;
    font-weight: 400;
    z-index: 1000;
}

.navbar-brand {
    padding-top: 10px;
}

.navbarCustom a {
    color: #999999;
}

.navbarCustom .navbar-nav .nav-item i {
    width: 25px;
    margin-right: 8px;
    text-align: center;
    color: #ababab;
}

.navbarCustom a:hover {
    color: var(--AgConsole);
    cursor: pointer;
}

.navbarCustom a:hover i {
    color: var(--AgConsole)!important;
}

.navbarCustom svg {
    display: inline-block;
    fill: #CCC;
    width: 15px; 
    margin: -3px 6px 0px 0px;
}

.navbar-toggler-icon {
    background-image: none !important;
    background-color: var(--AgConsole);
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% 100% no-repeat;
}

.navOpen {
    background: #27A67E;
    color: #FFF;
}

.collapseNavSpac {
        padding-left: 0px;
    }

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

/* Mobile drawer backdrop: full-screen see-through AgConsole gradient behind the
   drop-down menu that tints and softly blurs the page underneath.
   Shown/hidden by script section 3. */
.navBack {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--AgGradientOverlay);
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    backdrop-filter: blur(4px) saturate(120%);
    touch-action: none;
    z-index: 999;
}

/* Page scroll is locked while the mobile drawer or the package modal is open */
html.navLocked,
html.navLocked body,
html.modalOpen,
html.modalOpen body {
    overflow: hidden;
    overscroll-behavior: none;
}

.navbar-collapse {
    margin: -25px -16px 0px -16px;
    padding: 30px 30px 5px 15px;
    border-radius: 0px 0px 15px 15px;
    z-index: -10;
}

.login-btn {
    border-radius: 10px;
    color: #CCC;
    cursor: pointer;
    transition: background 0.5s ease, border 0.5s ease;
}

.login-btn:hover {
    background: var(--AgConsoleHighlight)!important;
    border: 1px solid var(--AgConsole);
}

.Web {
}

.Mob {
    display: none;
}

body .show {
    padding-right: 0px!important;
}

#brandImg {
    width: 130px;
    margin-left: 20px;
    margin-top: -5px;
}

@media (max-width: 1200px) {

    .collapseNavSpac {
        padding-left: 40px;
    }

    .nav-item {
        padding-left: 0px;
    }
    
    .Mob {
        display: block;
    }
    .Web {
        display: none;
    }

}

/* The drawer only exists below 992px (navbar-expand-lg), so never show the backdrop above it */
@media (min-width: 992px) {

    .navBack {
        display: none !important;
    }

}

/* MOBILE DRAWER LINKS – only below 992px, where the hamburger menu appears
   (Bootstrap's navbar-expand-lg breakpoint). Values below are the current
   look, ready to edit. */
@media (max-width: 991.98px) {
    
    .navbar-brand img {
        padding: 8px;
        margin-left: 6px!important;
    }
    
    #loginBtn {
        display: none;
    }

    /* Drawer exactly the screen width, no side padding */
    .navbarCustom .navbar-collapse {
        margin: -28px -4px 0px -4px;   /* cancels the navbar's 4px padding */
        padding-left: 0;
        padding-right: 0;
    }
    
    .navbarCustom .navbar-nav {
        padding-top: 0px;
    }
    
    .navbarCustom .navbar-nav .nav-item i {
        width: 25px;
        text-align: center;
        color: #ababab;
    }

    /* Link fills the row; the inner padding keeps the text off the edge */
    .navbarCustom .navbar-nav .nav-link {
        color: #6d6d6d;
        margin: 0px 10px 0px 10px;
        border-right: 1px solid #e6e6e6;
        border-left: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
        padding: 12px 16px;
        font-size: 1em;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    
    .navbar-nav .nav-item:first-child .nav-link{
        border-radius: 10px 10px 0px 0px;
        border-top: 1px solid #e6e6e6;
    }
    
    .navbar-nav .nav-item:last-child .nav-link {
        border-radius: 0px 0px 10px 10px;
        margin-bottom: 8px;
    }

    .navbarCustom .navbar-nav .nav-link:hover {
        color: var(--AgConsole);
    }
    
    .Web {
        display: none;
    }

}

/* PHONES ONLY (below 768px): the navbar starts tucked above the screen
   (-60px) so the welcome image fills the view. Once the page is scrolled
   50px it slides down into view, and slides back up when the visitor
   returns to the top. .navInView is toggled by script section 3b. */
@media (max-width: 767.98px) {

    #navbar {
        margin-top: -60px;
        transition: top 0.5s, margin-top 0.4s ease;
    }

    #navbar.navInView {
        margin-top: 0;
    }

}


/* =====================================================================
   6. WELCOME BANNER
   The large image banner at the top of the page (.welcome).
   ===================================================================== */

.welcome {
    background-image: url('../media/image/people_bg.webp');
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: #3DC57C;
    min-height: 600px;
    max-height: 800px;
    color: #fff;
    display: flex;
    flex-direction: column;
    margin: 60px 1.5em 1.5em 1.5em;
    border-radius: 20px;
    padding: 1.75rem;
}

@media (hover: none) and (pointer: coarse) {
    .welcome {
        background-attachment: scroll;
    }
}

.WelmoreInfo {
    display: none;
}

.icon-fade-cycle {
    display: inline-block;
    animation: iconFadeCycle 1.5s ease infinite;
}

@keyframes iconFadeCycle {
    0% {
        transform: translateY(0);
        opacity: 0.5;
    }
    45% {
        transform: translateY(-10px); /* fade out upward */
        opacity: 0;
    }
    46% {
        transform: translateY(20px); /* jump below while invisible */
        opacity: 0;
    }
    100% {
        transform: translateY(0); /* fade back in from the bottom */
        opacity: 0.5;
    }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .icon-fade-cycle { animation: none !important; }
}

.WelLogo {
    flex-grow: 1;
}

.WelLogo img {
    width: 300px;
}

.welcTitles {
    font-size: 2em;
}

.welcTitles div {
    margin-bottom: 8px;
}

.welcTitles i {
    width: 30px;
    margin-right: 10px;
    text-align: center;
}

.buttonWelcome {
    background: #FFF;
    color: #41678F;
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px;
    white-space: nowrap;
}

.buttonWelcome:hover {
    background: #3DC57C;
    color: #FFF;
    box-shadow: 0px 0px 10px 2px #1C385150;
}

.WelText {
    margin-top: 20px;
    font-size: 25px;
    font-weight: 400;
}

.welcTitles .fade-up.welcTitleSoon {
    opacity: 0.5;
}

.welcComingSoon {
    font-size: 0.5em;
    margin-left: 0.5em;
    font-weight: 200;
}

.welcomeBtm {
    display: flex;
    align-items: right;
}

.welcSubText {
    color: #FFF;
    font-size: 12px;
    text-align: right;
    margin-bottom: 0px;
}

@media (max-width: 1400px) {

    .welcTitles {
        font-size: 1.8em;
    }

}

@media (max-width: 1200px) {

    .WelText {
        font-size: 25px;
        font-weight: 400;
        color: #FFF;
    }

}

@media (max-width: 768px) {
    
    .WelmoreInfo {
        display: block;
        position: relative;
        text-align: center;
        background: #fff;
        border-radius: 15px;
        padding: 10px 20px;
        margin: 15px 20px -22px 20px;
        color: var(--AgReporting);
        font-size: 0.87em;
        font-weight: 600;
    }
    
    .WelmoreInfo::active {
        color: var(--AgReporting);
    }

    .WelmoreInfo::after  {
        content: "";
        position: absolute;
        left: -35px;
        bottom: 5px;
        width: 35px;
        height: 35px;
        background: transparent;
        border-radius: 50%;
        box-shadow: 15px 15px 0 0 #FFF;
    }
    
    .WelmoreInfo::before  {
        content: "";
        position: absolute;
        right: -35px;
        bottom: 5px;
        width: 35px;
        height: 35px;
        background: transparent;
        border-radius: 50%;
        box-shadow: -15px 15px 0 0 #FFF;
    }
    
    .WelmoreInfo i {
        opacity: 0.5;
    }
    
    .welcome {
        background-image: url('../media/image/people_bg_mob_2.webp');
        margin: 50px 1em 1em 1em;
        border-radius: 20px;
        padding: 1rem;    
    }
    
    .welcTitles {
        font-size: 1.58em;
    }
    
    .welcTitles div {
        margin-bottom: 4px;
    }
    
    .welcTitles i {
        width: 28px;
        text-align: center;
    }
    
    .WelLogo img {
        width: 250px;
        padding: 5px;
    }
    
    .WelText {
        margin-top: 20px;
        font-size: 25px;
    }
    
    .WelText span {
        display: block;
    }
    
    .welcomeBtm {
        display: inline-block;
    }

}

/* PHONES ONLY (below 768px): the welcome image exactly fills the screen
   with the same gap on all four sides. svh = the visible screen height
   with the browser's address bar showing, so nothing is cut off on load
   (100vh is the fallback for older browsers). The navbar is tucked away
   at the top on phones, so no extra top margin is needed for it. */
@media (max-width: 767.98px) {

    .welcome {
        --welcGap: 1em;
        height: calc(100vh - 2 * var(--welcGap));
        height: calc(100svh - 2 * var(--welcGap));
        min-height: 0;
        max-height: none;
        margin: var(--welcGap);
    }

}


/* =====================================================================
   7. INTRODUCTION
   #welcomeArea – intro text, module tags and the Lottie animation.
   ===================================================================== */

.tools {
    display: inline-block;
    font-size: 13px;
    color: #FFF;
    font-weight: 400;
    padding: 5px 8px;
    border-radius: 5px;
    margin: 5px 0px 1px 0px;
}

.register {
    background-color: #B53B35;
}

.assets {
    background-color: #F76239;
}

.finances {
    background-color: #FFA42C;
}

.stocking {
    background-color: #2C6BC6;
}

.planning {
    background-color: #4D459B;
}

.cropping {
    background-color: #23C162;
}


/* =====================================================================
   8. OUR INDUSTRIES
   Construction / Agriculture split image with hover reveal.
   ===================================================================== */

.industryImages {
    position: relative;
    display: grid;
    width: fit-content;
    border-radius: 20px;
    overflow: hidden;
}

.industryImages:hover {
    cursor: pointer;
}

.industryImages::after {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    content: "\f25a";
    font-family: "Font Awesome 6 Free";
    font-size: 1.6em;
    font-weight: 900;
    transform: rotate(-25deg);
    background: rgb(255, 255, 255);
    color: var(--AgConsoleDark);
    height: 45px;
    width: 45px;
    border-radius: 50%;
    z-index: 100;
    left: 50%;          
    top: 80%;                
    translate: -50% -50%;      
    pointer-events: none;
}

.industryImages img {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    transition: clip-path 0.6s ease;
}

.industryImages.peek::after {
    animation:
        peek-icon 1.6s ease-in-out 0.5s,       /* same timing as the images */
        fade-icon 0.4s ease 2.6s forwards;   /* starts as the swing ends, stays hidden */
}

@keyframes peek-icon {
    0%   { left: 50%; }
    30%  { left: 60%; }   /* divide goes left → icon goes right */
    65%  { left: 40%; }   /* divide goes right → icon goes left */
    100% { left: 50%; }   /* both back to centre */
}

@keyframes fade-icon {
    to { opacity: 0; }
}

/* Default: split down the middle */
.construction { clip-path: inset(0 50% 0 0); }

/* shows left half */
.farm         { clip-path: inset(0 0 0 50%); }

/* shows right half */
/* Hover farm → farm 75%, construction 25% */
.industryImages:has(.farm:hover) .farm         { clip-path: inset(0 0 0 5%); }

.industryImages:has(.farm:hover) .construction { clip-path: inset(0 95% 0 0); }

.industryImages:has(.farm:hover) .label-construction { opacity: 0;}

/* Hover construction → construction 75%, farm 25% */
.industryImages:has(.construction:hover) .construction { clip-path: inset(0 5% 0 0); }

.industryImages:has(.construction:hover) .farm         { clip-path: inset(0 0 0 95%); }

.industryImages:has(.construction:hover) .label-farm { opacity: 0;}

.industryImages.peek .construction {
    animation: peek-construction 1.6s ease-in-out 0.5s;
}

/* Divide nudges left, then right, then settles back to centre */
@keyframes peek-construction {
    0%   { clip-path: inset(0 50% 0 0); }
    30%  { clip-path: inset(0 60% 0 0); }   /* divide moves left */
    65%  { clip-path: inset(0 40% 0 0); }   /* divide moves right */
    100% { clip-path: inset(0 50% 0 0); }   /* back to centre */
}

.industryImages.peek .farm {
    animation: peek-farm 1.6s ease-in-out 0.5s;
}

@keyframes peek-farm {
    0%   { clip-path: inset(0 0 0 50%); }
    30%  { clip-path: inset(0 0 0 40%); }
    65%  { clip-path: inset(0 0 0 60%); }
    100% { clip-path: inset(0 0 0 50%); }
}

/* Shared: everything sits in the same grid cell as the images */
.label,
.reveal {
    grid-area: 1 / 1;
    z-index: 1;
    padding: 20px;
    max-width: 50%;
    color: #fff;
    pointer-events: none;
}

/* Labels at the top */
.label {
    align-self: start;
    font-size: 2.2rem;
    font-weight: 700;
}

/* Text at the bottom */
.reveal {
    align-self: end;
    overflow: hidden;
}

/* Left or right side */
.label-construction, .reveal-construction { justify-self: start; text-align: left; }

.label-farm,         .reveal-farm         { justify-self: end;   text-align: right; }

/* Hidden text, slides up on hover */
.reveal p {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.5;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.industryImages:has(.construction:hover) .reveal-construction p,
.industryImages:has(.farm:hover) .reveal-farm p {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.2s;
}

.shade {
    grid-area: 1 / 1;
    z-index: 1;                  /* lifts it above the clipped images */
    pointer-events: none;
    --shade: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, var(--shade)) 0%, rgba(0, 0, 0, 0) 80%);
    transition: --shade 0.5s ease;
}

@property --shade {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
}

/* Fade in when either side is hovered */
.industryImages:has(img:hover) .shade {
    --shade: 0.6;
    transition-delay: 0.2s;
}

.hoverHintIcon {
    display: inline-block;
    transform: rotate(-18deg);
}

/* TABLETS & PHONES (below 992px): the box fills the column and each image is
   150% of its width, centred, so it overflows equally on both sides and the
   rounded box crops it. The split between the images stays in the centre. */
@media (max-width: 991.98px) {

    .industryImages {
        width: 100%;
        height: 400px;
    }

    .industryImages img {
        width: 200%;
        max-width: none;
        margin-left: -50%;     
        align-self: stretch;   
        height: 100%;
        object-fit: cover;
    }

    .label {
        padding: 13px 15px;
        font-size: clamp(1.35rem, 4.4vw, 2.2rem);
        transform-origin: 15px 13px;
        transition: transform 0.4s ease;
    }

    .label-farm {
        transform-origin: calc(100% - 15px) 13px;
    }

    .industryImages:has(.construction:hover) .label-construction,
    .industryImages:has(.farm:hover) .label-farm {
        transform: scale(var(--labelGrow, 1.5));
    }

    .reveal p {
        font-size: clamp(0.95rem, 2.6vw, 1.3rem);
    }

    .industryImages:has(.construction:hover) .reveal-construction,
    .industryImages:has(.farm:hover) .reveal-farm {
        max-width: 90%;
    }

}

@media (max-width: 768px) {

    .industryImages {
        border-radius: 10px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .industryImages.peek::after { animation: fade-icon 0.4s ease 1s forwards; }

    /* Skip the animation for people who prefer reduced motion */
    .industryImages.peek img { animation: none; }

}


/* =====================================================================
   9. THE SYSTEM
   #systemArea – key features table and the computer/tablet images.
   ===================================================================== */

.imgCont {
    position: relative;
}

.OPod {
    padding-top: 50px;
    position: relative;
    width: fit-content; 
    overflow: hidden;
}

.OPod::after{
    content:'';
    top: 0;    
    right: 0;
    position: absolute;
    width: 90px;
    height: 100%;
    background: #FFFFFF;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 00%, rgba(255, 255, 255, 1) 100%);
}

.OPod img {
    max-height: 650px;
}

.OPod img:last-of-type {
    position: absolute;
    max-height: 650px;
    bottom: 0;
    right: 0;
}

.slide-in img {
    transform: translateX(var(--from, 100px));
    opacity: 1;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.9s ease;
}

.slide-in img:nth-of-type(2) {
    transition-delay: 0.05s;
}

.slide-in.in-view img {
    transform: translateX(0);
    opacity: 1;
}

.clean-table th {
    background: #f7f7f7;
    font-weight: 600;
    border-bottom: 1px solid #d5d5d5;
    padding: 20px;
}

.tableHeadIcon {
    height: 43px;
}

/* Feature accordion – bordered list above the features table.
   Each title row is a flex button: feature name on the left, and the
   .featureAccordion-end group (optional Unique Feature badge + the
   Font Awesome plus) pushed to the right. Opening a feature spins the
   plus 225deg so it rests as an ×, and the panel slides open
   (grid rows 0fr → 1fr). */

/* "Unique Feature" badge – optional, sits beside the plus icon. */
.uniqueFeature {
    position: relative;
    font-size: 0.65em;
    padding: 3px 5px;
    border-radius: 4px;
    border: 2px solid #e1ba00;
    background: linear-gradient(210deg,rgb(255, 191, 0) 0%, rgb(255, 230, 0) 100%);
    color: #8a5200;
    white-space: nowrap;
    text-align: center;
}

.featureAccordion {
    margin-bottom: 30px;
    border: 1px solid #d5d5d5;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0px 0px 30px #2d2d2d20;
}

.featureAccordion-item + .featureAccordion-item {
    border-top: 1px solid #e5e5e5;
}

.featureAccordion-title {
    margin: 0;
}

.featureAccordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 15px 18px;
    border: 0;
    background: none;
    color: #494949;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s ease;
}

.featureAccordion-toggle > span:first-of-type i  {
    width: 20px;
    text-align: center;
    margin-right: 15px;
    color: var(--AgReporting);
}

.featureAccordion-item:nth-child(even) > .featureAccordion-title {
    background: #f9f9f9!important;
}

.featureAccordion-toggle:hover,
.featureAccordion-item.is-open .featureAccordion-toggle {
    color: var(--AgReporting);
    background: #f9f7ff;
}

.featureAccordion-toggle:focus {
    outline: none;
}

.featureAccordion-toggle:focus-visible {
    outline: 2px solid var(--AgConsole);
    outline-offset: -2px;
}

/* Right-hand group: badge (if any) + plus icon, kept together. */
.featureAccordion-end {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Font Awesome plus – width:1em + centred so it spins on its centre. */
.featureAccordion-icon {
    width: 1em;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    color: #8a8a8a;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.featureAccordion-item.is-open .featureAccordion-icon {
    transform: rotate(225deg);
}

.featureAccordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s ease;
}

.featureAccordion-item.is-open .featureAccordion-panel {
    grid-template-rows: 1fr;
}

/* Hidden from tabbing/screen readers once closed (after the slide). */
.featureAccordion-body {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 0.45s;
}

.featureAccordion-item.is-open .featureAccordion-body {
    visibility: visible;
    transition-delay: 0s;
    color: var(--AgReporting)!important;
    background: #f9f7ff;
}

.featureAccordion-body p {
    margin: 0;
    padding: 0 60px 15px 18px;
    font-size: 0.9em;
    line-height: 1.55;
}

.UF {
    margin-left: 3px;
}

/* Phones */
@media (max-width: 767.98px) {

    .featureAccordion-toggle {
        padding: 15px;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .featureAccordion-body p {
        padding: 0 13px 13px;
    }
    
    .featureAccordion-toggle > span:first-of-type i  {
        width: 18px;
        margin-right: 5px;
    }
    
    .featureAccordion-toggle .UF {
        display: none;
    }

}

@media (prefers-reduced-motion: reduce) {

    .slide-in img {
        transform: none;
        transition: opacity 0.6s ease;
    }

    .featureAccordion-icon,
    .featureAccordion-panel {
        transition: none;
    }

}


/* =====================================================================
   10. WORKFLOW JOURNEY (TIMELINE)
   Vertical timeline with the scroll progress line.
   ===================================================================== */

.SubHStyle2 {
    font-size: 22px; 
    font-weight: 400;
    line-height: 1.45em;
    max-width: 500px;
}

.left .SubHStyle2 {
    float:right;
}

.faceRecogLabel {
    position: absolute;
    top: 15px;
    left: 55px;
    z-index: 2;
    background: var(--EnterprisePackage);
    font-weight: 600;
    font-size: 0.85em;
    color: #ffffff;
    padding: 4px 8px 4px 7px;
    border-radius: 6px;
    border: 1px solid #410075;
    box-shadow: 0px 0px 15px #e600ffc8;
}

.timeline-labelStart {
    position: relative;
    text-align: center;
    padding-bottom: 150px;
    width: 100%;
    margin-top: -50px;
}

.timeline-labelEnd {
    position: relative;
    text-align: center;
    width: 100%;
    margin-bottom: -30px;
}

.timeline-labelStart > div {
    position: absolute;
    padding: 8px 12px;
    border-radius: 10px;
    border: 2px solid var(--AgReporting);
    color: var(--AgReporting);
    font-weight: 600;
    background: #FFF;
    z-index: 100;
    left: 50%;
    transform: translateX(-50%);
}

.timeline-labelEnd > div {
    position: absolute;
    padding: 8px 12px;
    border-radius: 10px;
    border: 2px solid var(--AgReporting);
    color: var(--AgReporting);
    font-weight: 600;
    background: #FFF;
    z-index: 100;
    left: 50%;
    transform: translateX(-50%);
}

.timeline {
    position: relative;
    padding: 40px 0;
    margin-top: 100px;
}

.timeline-grey {
    position: relative;  
    width: fit-content;
    overflow: hidden; 
    opacity: 0.3;
    transition: opacity 01s ease;
}

.timeline-row:has(.timeline-node.active) .timeline-grey {
    opacity: 1;
    transform: scale(1);
}

.timeline-grey img {
    display: block;   
    height: 300px;
}

.timeline-grey::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    -webkit-backdrop-filter: grayscale(100%);  
    backdrop-filter: grayscale(100%);
    pointer-events: none;
    opacity: 1;
    transition: opacity 1s ease;
}

.timeline-row:has(.timeline-node.active) .timeline-grey::after {
    opacity: 0;
}

/* Grey line down the middle */
.timeline-track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: #e0e0e0;
    border-radius: 3px;
}

/* Purple fill that grows from the top */
.timeline-fill {
    position: absolute;
    inset: 0;
    background: #7b3fe4;
    border-radius: 2px;
    transform-origin: top;
    transform: scaleY(0);   /* set by JavaScript */
}

/* Optional dot at the end of the purple line */
.timeline-dot {
    position: absolute;
    left: 50%;
    top: 0;                 /* set by JavaScript */
    width: 15px;
    height: 15px;
    background: #7b3fe4;
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.timeline-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-bottom: 120px;
}

.timeline-item {
    display: flex;
    flex-direction: column;      /* stack heading, text and tab vertically */
}

.timeline-item.left {
    grid-column: 1;
    text-align: right;
    justify-self: end;
    transform: scale(0.9);
    transform-origin: right;
    transition: transform 0.8s ease;
}

.timeline-item.right {
    grid-column: 2;
    text-align: left;
    justify-self: start;
    transform: scale(0.9);
    transform-origin: left;
    transition: transform 0.8s ease;
}

.timeline-node {
    position: absolute;
    left: 50%;
    top: 30px;      
    width: 16px;
    height: 16px;
    background: #FFF;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.timeline-node.active {
    border: 2px solid #FFF;
    background: #7b3fe4;
    animation: node-bounce 0.6s ease;
}

@keyframes node-bounce {
    0%   { transform: translate(-50%, -50%) scale(1); }
    30%  { transform: translate(-50%, -50%) scale(1.5); }
    50%  { transform: translate(-50%, -50%) scale(0.85); }
    70%  { transform: translate(-50%, -50%) scale(1.15); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

.timeline-dot {
    z-index: 2;              /* keeps the travelling dot above the nodes */
}

.moduleTab {
    display: flex;
    width: fit-content;  
    align-items: center; 
    border: 1px solid var(--AgReporting);
    padding: 5px 8px;
    border-radius: 5px;
    color: var(--AgReporting);
    font-weight: 600;
    align-items: center;
    margin-top: 30px;
}

.timeline-item.left .moduleTab {
    margin-left: auto;
}

.right {
    padding-right: 40px;
}

/* On tablets and phones the shared .sexion spacing (50px) takes over from the 40px above */
@media (max-width: 1200px) {

    .timeline {
        padding: 50px 0px 50px 0px;
    }

}

.faceRecogLabel img {
    height: 15px;
    width: 15px;
    margin-right: 6px;
}

.timelineImg {
    height: 300px;
    border-radius: 20px;
}

/* PHONES: the line moves to the left edge and each step becomes one column to
   its right – image on top, text underneath (the image containers carry
   .timeline-media so they always sort first, whichever side they sat on). */
@media (max-width: 768px) {

    /* Line and nodes on the left (the travelling dot sits inside the line, so it follows) */
    .timeline-track,
    .timeline-node {
        left: 20px;
    }
    
    .timeline-labelStart > div {
        border-radius: 10px 10px 10px 0px;
    }
    
    .timeline-labelEnd > div {
        border-radius: 0px 10px 10px 10px;
        margin-top: 18px;
    }

    /* Start / end labels sit on the line instead of the centre */
    .timeline-labelStart > div,
    .timeline-labelEnd > div {
        left: 19px;
        transform: none;
    }

    /* One column to the right of the line */
    .timeline-row {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 70px;
        padding: 0 16px 0 50px;
    }

    .timeline-item.left,
    .timeline-item.right {
        grid-column: 1;
        justify-self: stretch;
        text-align: left;
        transform-origin: left;
        padding-left: 0;
        padding-right: 0;
    }

    .timeline-media {
        order: -1;              /* image above its text */
    }

    .timeline-grey .timelineImg {
        width: 100%;
        height: auto;           /* scale images to the screen instead of a fixed 300px */
    }
    
    .SubHStyle2 {
        font-size: 1.2em;
    }

    .left .SubHStyle2 {
        float: none;
    }

    .timeline-item.left .moduleTab {
        margin-left: 0;
    }

    .faceRecogLabel {
        left: 15px;
    }

}


/* =====================================================================
   11. CURRENT OPERATIONS & TESTIMONIALS
   User numbers, company logos and the testimonial carousel.
   ===================================================================== */

.botBack {
    border-radius: 0px 0px 30px 30px;
}

.disabled:hover {
    pointer-events: none;
}

.dataBox {
    background-color: #f5f5f5;
    border-radius: 20px;
    height: 120px;
    margin: 10px;
    padding: 15px 20px;
    min-width: 200px;
}

.dataTxt {
    display: inline-block;
}

.dataImg {
    position: absolute;
    display: inline-block;
    width: 80px;
    right: 60px;
    bottom: 0;
}

.dataImg img {
    height: 100px;
}

.compLogo {
    text-align: center;
}

.compLogo img {
    width: 100%;
}

/* ---- COMPANY LOGO MARQUEE (#compLogoCarousel, script section 8b) ----
   One line of logos. Still and centred when they fit; when they don't,
   .is-moving scrolls them continuously from right to left. */
.logoMarquee {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    overflow: hidden;
    margin-left: 0;
    margin-right: 0;
}

.logoTrack {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
}

.logoMarquee .compLogo {
    flex: 0 0 auto;
    max-width: none;
    width: auto;
    padding: 0 35px;             /* space between logos (kept inside each item so the loop is seamless) */
}

.logoMarquee .compLogo img {
    width: auto;
    height: 60px;                /* every logo the same height, natural width */
    max-width: none;
}

.logoMarquee.is-moving {
    justify-content: flex-start;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.logoMarquee.is-moving .logoTrack {
    animation: logoScroll var(--marqueeDuration, 30s) linear infinite;
}

.logoMarquee.is-moving:hover .logoTrack {
    animation-play-state: paused;
}

/* The track holds the logos twice; moving it by half its width lines the
   copy up exactly where the original started, so the loop has no seam */
@keyframes logoScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {

    .logoMarquee.is-moving {
        overflow-x: auto;        /* no animation: let people scroll the strip themselves */
    }

    .logoMarquee.is-moving .logoTrack {
        animation: none;
    }

}

.dBH {
    font-size: 22px;
    font-weight: 400;
}

.dBT {
    font-size: 55px;
    font-weight: 600;
    line-height: 65px;
}

.TesText {
    display: flex;
    flex-direction: column;
}

.TesImage > img {
    border-radius: 150px;
    max-width: 120px;
    min-width: 60px;
}

/* Testimonials on phones */
@media (max-width: 767.98px) {
    
    .TesImage > img {
        border-radius: 100px;
        max-width: 80px;
        min-width: 50px;
    }

    .TesText h4 {
        font-size: 1.1em;
    }

    .TesText p {
        font-size: 0.85em;
    }
}

/* ---- TESTIMONIALS: FULL WIDTH WITH FADED EDGES ----
   Breaks out of the page's side padding to span the whole screen. The
   neighbouring testimonials peek in at each side (Owl's stagePadding in
   script section 9) and fade into the background over --bleed. */
.testimonialBleed {
    --bleed: 30px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--bleed), #000 calc(100% - var(--bleed)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--bleed), #000 calc(100% - var(--bleed)), transparent 100%);
}

@media (min-width: 768px)  { .testimonialBleed { --bleed: 120px; } }
@media (min-width: 1300px) { .testimonialBleed { --bleed: 160px; } }
@media (min-width: 1800px) { .testimonialBleed { --bleed: 300px; } }

.owlItem {
    position: relative;
    display: flex;
    flex-direction: row;
    border-radius: 20px;
    gap: 20px;
    height: 320px;
    margin: 0px 10px;
    padding: 20px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    transition: height 0.5s ease;
}

.owlItem::after {
    content: "Read More";
    text-align: center;
    padding-top: 55px;
    position: absolute;
    height: 85px;
    width: 100%;
    background: linear-gradient(180deg, rgb(255, 255, 255, 0) 0%, rgb(255, 255, 255) 60%);
    bottom: 0;
    margin-left: -20px;
    font-size: 0.8em;
    cursor: pointer;
    transition: opacity 0.4s ease;
}

.owlItem.expanded::after {
    opacity: 0;
    pointer-events: none;
}

.TesImage {
    text-align: right;
}

.TesCountry {
    position: relative;
}

.owl-carousel .owl-item .TesCountry img {
    position: absolute;
    right: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-right: -6px;
    border: 2px solid #FFF;
}

.WebXs {
    display: show;
}

.MobXs {
    display: none;
}

.stars .star {
    color: #ffbb03;
}

.stars .star-off {
    color: #CCC;
}

@media (max-width: 1400px) {

    .dataTxt {
        display: block;
    }

    .dataImg {
        display: block;
    }

    .WebXs {
        display: none;
    }

    .MobXs {
        display: block;
    }

    .dataBox {
        max-width: 320px;
    }

}

@media (max-width: 1200px) {

    .dataBox {
        max-width: none;
    }

}

@media (max-width: 768px) {

    .botBack{
        padding: 40px 40px;
    }

    .dataBox {
        background-color: #f5f5f5;
        border-radius: 10px;
        height: 100px;
        margin: 5px;
        padding: 10px 15px;
        min-width: 0px;
    }

    .dataTxt {
        display: inline-block;
    }

    .dataImg {
        position: absolute;
        display: inline-block;
        width: 100px;
        right: 0px;
        bottom: 0;
    }

    .dataImg img {
        height: 70px;
    }

    .dBH {
        font-size: 18px;
        font-weight: 400;
    }

    .dBT {
        font-size: 50px;
        font-weight: 600;
        line-height: 60px;
    }

}

/* NOTE: the rules below sat outside the phone (max-width: 768px) block in the original file because of a
   stray closing brace, so they apply at ALL screen sizes and must stay after the responsive rules above. */

.bg-white {
    background-color: white !important;
}


/* =====================================================================
   12. PRICING PACKAGES
   #packageArea – Starter, Growth, Professional and Enterprise tiles.
   ===================================================================== */

.getStarted {
    display: flex;
    flex-direction: column;
}

/* The button slides out from under its tile using translate (not margin), so the
   space it needs is always reserved: every package column keeps the same height,
   and the carousel's arrows and dots don't move while it animates. */
.getStartedBtn {
    position: relative;
    margin-top: 20px;
    translate: 0 -100px;         /* tucked 70px up behind the tile (same as the old -70px margin) */
    background: var(--AgReporting);
    color: #fff;
    transition: translate 0.6s ease 0.2s, scale 0.4s ease;
    font-style: italic;
    border: 1px solid #6e00d7;
    box-shadow: 0px 0px 13px #d300ff80;
}


.getStarted:has(.revealing2) .getStartedBtn {
    translate: 0 0;              /* slid out, 30px below the tile */
}

.getStartedBtn:hover {
    background: var(--AgReporting);
    color: #fff;
    cursor: pointer;
    scale: 1.04;
}

.packageTile {
    position: relative;
    z-index: 1;                  /* keeps the tucked-away button behind the tile */
    box-shadow: 0px 0px 20px #2d2d2d30;
    border-radius: 15px;
    transition: transform 0.4s ease, box-shadow 0.4s ease, min-width 0.6s ease, scale 0.6s ease;
    min-width: 276px;
    width: 276px;
    overflow: hidden;
    border: 1px solid #d5d5d5;
}

.packageTile_mob {
    position: relative;
    z-index: 1;                  /* keeps the tucked-away button behind the tile */
    box-shadow: 0px 0px 20px #2d2d2d30;
    transition: transform 0.4s ease, box-shadow 0.4s ease, min-width 0.6s ease, scale 0.6s ease;
    border: 1px solid #d5d5d5;

    border-radius: 15px;
}

.packageTile.revealing2 {
    position: relative;
    min-width: 560px!important;
    scale: 1.08;
    margin: 0px 20px;
    box-shadow: 0px 0px 20px #794feb70;
}

.packageTile:not(.revealing2):hover {
    transform: scale(1.02);
    cursor: pointer;
    box-shadow: 0px 0px 20px #794feb50;
}

.panelPackage {
    position: relative;
    min-width: 240px;
    color: #fff;
    border-radius: 15px 0 0 15px;
    display: flex;
    flex-direction: column;
}

.packageTile_mob .panelPackage {
    position: relative;
    min-width: 360px;
    color: #fff;
    border-radius: 14px 14px 0px 0px;
    height: 100%;
    display: flex;
    flex-direction: column;
    height: 265px;
}

.panelPackage > .p-3.d-flex.flex-column {
    flex-grow: 1;
}

.packageTile.popular::before {
    content: "\2605  Most Popular";
    position: absolute;
    padding: 4px 9px;
    border-radius: 5px;
    font-size: 0.8em;
    background: #dbac00;
    background: linear-gradient(-85deg, rgb(255, 180, 0) 0%, rgb(255, 220, 2) 100%);
    margin: 15px;
    bottom: 120px;
    border-top: 1px solid #ffed9b;
    border-left: 1px solid #ffe500;
    border-bottom: 1px solid #946301;
    border-right: 1px solid #bb880d;
    font-weight: 600;
    z-index: 1000;
    color: #4e371f;
    box-shadow: 0px 0px 8px #00000060;
}

.packTitle {
    font-size: 1.6em;
    line-height: 1em;
    font-weight: 600;
}

.packSymbol{
    border: 2.5px solid #FFF;
    border-radius: 50%;
    width: 33px;
    height: 33px;
    text-align: center;
    padding: 2px;
    font-weight: 600;
    margin-left: 15px;
}

.paramRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 8px;
}

.packageTile_mob .paramRow {
    margin-bottom: 1px;
}

.paramRow > div:nth-child(1) {
    opacity: 0.7;
}

.paramRow > div:nth-child(2) {
    font-size: 1.2em;
}

.priceBox {
    margin-top: auto;
    padding-bottom: 5px;
}

.priceTag {
    font-size: 3.5em;
    font-weight: 600;
    padding: 0px 5px;
    line-height: 1em;
}

.packageTile_mob .priceTag {
    font-size: 2.8em;
}

.packageTile_mob .priceTag span{
    font-size: 0.3em;
}

.priceTag span {
    font-size: 0.25em;
    font-weight: 400;
    opacity: 0.6;
    line-height: 1em;
}

.priceAdd {
    font-size: 1.5em;
    font-weight: 600;
    padding: 0px 5px;
    line-height: 1em;
}

.priceAdd span {
    font-size: .55em;
    font-weight: 400;
    opacity: 0.6;
    line-height: 1em;
}

.tablePackage {
    background: #FFF;
    border-radius: 0px 15px 15px 0px;
    box-shadow: inset 8px 0 8px -8px rgba(0, 0, 0, 0.4);
}

.packageTile_mob .tablePackage {
    border-radius: 0px 0px 15px 15px;
    box-shadow: inset 0 8px 8px -8px rgba(0, 0, 0, 0.4);
}

.datatable-softTier {
    width: 320px;
}

.packageTile_mob .datatable-softTier {
    width: 100%;
}

.datatable-softTier td {
    padding: 0.5em 0.5em;
    font-size: 0.9em;
    white-space: nowrap;
    line-height: 1.8em;
}

.packageTile_mob .datatable-softTier td {
    font-size: 0.83em;
    padding: 0.4em 0.6em;
}

.datatable-softTier td i {
    width: 20px;
    text-align: center;
}

.packageRow {
    position: relative;          /* the carousel script measures tile positions from here */
    justify-content: center;
    gap: 20px;
}

/* ---- DESKTOP / MOBILE PRICING ----
   #pricing (landscape tiles) from 768px up, #pricing_mob (portrait tiles) on phones */
#pricing_mob {
    display: none;
}

@media (max-width: 767.98px) {

    #pricing {
        display: none;
    }

    #pricing_mob {
        display: block;
    }

}

/* "Most Popular" badge on the portrait tiles: a sticker on the right of the
   seam between the coloured panel and the feature table */
.packageTile_mob.popular::before {
    content: "\2605  Most Popular";
    position: absolute;
    top: 124px;
    margin: 0 15px;
    padding: 4px 9px;
    border-radius: 5px;
    font-size: 0.67em;
    font-weight: 600;
    color: #4e371f;
    background: linear-gradient(-85deg, rgb(255, 180, 0) 0%, rgb(255, 220, 2) 100%);
    border-top: 1px solid #ffed9b;
    border-left: 1px solid #ffe500;
    border-bottom: 1px solid #946301;
    border-right: 1px solid #bb880d;
    box-shadow: 0px 0px 4px #00000060;
    z-index: 1000;
}

/* ---- MOBILE SWIPE CAROUSEL (#pricing_mob, script section 10b) ----
   Native swiping with scroll-snap: one package at a time, centred, with the
   neighbours peeking in at the sides. */
.swipeCarousel {
    --tileW: min(340px, calc(100vw - 88px));   /* 44px each side: the neighbours peek in ~22px */
    /* run edge to edge: break out of the 40px side padding on .botBack */
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.swipeCarousel .packageRow {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    /* side padding lets the first and last package sit in the centre;
       top/bottom room for the shadow and the "Most Popular" sticker */
    padding: 30px calc((100% - var(--tileW)) / 2);
    margin: -30px 0;
}

.swipeCarousel .packageRow::-webkit-scrollbar {
    display: none;
}

.swipeCarousel .getStarted {
    flex: 0 0 auto;
    scroll-snap-align: center;
    scroll-snap-stop: always;    /* one package per swipe */
}

.swipeCarousel .packageTile_mob {
    width: var(--tileW);
    transition: opacity 0.35s ease, scale 0.35s ease, box-shadow 0.4s ease;
}

.swipeCarousel .packageTile_mob .panelPackage {
    min-width: 0;                /* fit narrow phones (the 360px minimum was wider than the screen) */
}

/* The packages either side are slightly smaller and faded */
.swipeCarousel .packageTile_mob:not(.revealing2) {
    opacity: 0.55;
    scale: 0.94;
    cursor: pointer;
}

.swipeCarousel .packageTile_mob.revealing2 {
    box-shadow: 0px 0px 20px #794feb70;
}

/* The faded neighbours are see-through, so their tucked-away "Let's Get Started"
   button would show through them. Hide the button until its package is the
   active one: it disappears at once when you swipe away, and fades in as it
   starts sliding out on the new package. */
.swipeCarousel .getStarted .getStartedBtn {
    opacity: 0;
    transition: translate 0.6s ease 0.2s, scale 0.4s ease, opacity 0.1s ease;
}

.swipeCarousel .getStarted:has(.revealing2) .getStartedBtn {
    opacity: 1;
    transition: translate 0.6s ease 0.2s, scale 0.4s ease, opacity 0.25s ease 0.2s;
}

.swipeCarousel .carouselArrow {
    display: none !important;    /* swiping replaces the arrows on phones */
}

.swipeCarousel .carouselDots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    position: relative;
    z-index: 2;
}

/* ---- PACKAGE CAROUSEL ----
   Switched on by script section 10 (adds .is-carousel to .packageCarousel)
   only when the tiles are wider than the screen. */
.packageCarousel {
    position: relative;
}

.carouselArrow,
.carouselDots {
    display: none;
}

.packageCarousel.is-carousel .packageRow {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* room above/below for the enlarged tile and its shadow, and at the ends
       so the first and last tiles can still reach the centre */
    padding: 40px max(20px, calc(50% - 300px));
    margin: -40px 0;
    /* soft fade at the edges hints that there is more to scroll */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.packageCarousel.is-carousel .packageRow::-webkit-scrollbar {
    display: none;
}

.packageCarousel.is-dragging .packageRow {
    cursor: grabbing;
    user-select: none;
}

.packageCarousel.is-carousel .carouselArrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(50% - 20px);
    translate: 0 -50%;
    z-index: 5;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #d5d5d5;
    background: #FFF;
    color: var(--AgReporting);
    box-shadow: 0px 0px 15px #2d2d2d25;
    cursor: pointer;
    transition: opacity 0.3s ease, scale 0.2s ease;
}

.packageCarousel.is-carousel .carouselArrow:hover {
    scale: 1.08;
}

.packageCarousel.is-carousel .carouselArrow:disabled {
    opacity: 0;
    pointer-events: none;
}

.carouselArrow.prev {
    left: 20px;
}

.carouselArrow.next {
    right: 20px;
}

.packageCarousel.is-carousel .carouselDots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
    position: relative;
    z-index: 2;                  /* above the row's extra 40px of padding, so the dots can be clicked */
}

.carouselDots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: #d5d5d5;
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.carouselDots button.active {
    width: 26px;
    background: var(--AgReporting);
}

.datatable-softTier tr.tierUnavailable {
    opacity: 0.2;
}


/* Buttons of the non-active phone packages are invisible – don't let them be tapped */
.swipeCarousel .getStarted:not(:has(.revealing2)) .getStartedBtn {
    pointer-events: none;
}


/* =====================================================================
   13. CONTACT US
   #contactArea – contact form and agent details.
   ===================================================================== */

.btn-primary {
    background-color: var(--AgConsole);
    color: #FFF;
    border-color: var(--AgConsoleDark)
}

.btn-primary:hover {
    background-color: var(--AgConsoleDark)!important;
    color: #FFF;
}


.btn-danger {
    background-color: var(--AgDanger);
    color: #FFF;
}



/* =====================================================================
   14. MODALS
   Every Bootstrap modal on index.html (package enquiry + thank you,
   contact success / error) uses .ovModal so they all look the same.
   ===================================================================== */

/* AgGradient backdrop (same as the mobile drawer). html.modalOpen is set
   by script section 10d while any modal is open. */
html.modalOpen .modal-backdrop {
    background: var(--AgGradientOverlay);
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    backdrop-filter: blur(4px) saturate(120%);
}

html.modalOpen .modal-backdrop.show {
    opacity: 1;
}

.ovModal .modal-dialog {
    max-width: 540px;
}

.ovModal-content {
    position: relative;
    border: 0;
    border-radius: 10px;
    box-shadow: 0px 10px 40px #00000040;
    padding: 20px;
    text-align: left;
}

.ovModal-content hr {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Header: .Hstyle with its icon inline */
.ovModal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    margin: 0 0 15px 0;
}

.ovModal-title i {
    font-size: 0.85em;
    flex-shrink: 0;
}

.ovModal-text {
    color: #6d6d6d;
    text-align: left;
}

/* Buttons inline, equal width */
.ovModal-buttons {
    display: flex;
    gap: 15px;
}

.ovModal-buttons .btn {
    flex: 1;
}

/* Keyboard focus ring in the button's own colour (instead of Bootstrap's blue) */
.ovModal-buttons .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(3, 172, 125, 0.35);
}

.ovModal-buttons .btn-danger:focus {
    box-shadow: 0 0 0 0.2rem rgba(208, 73, 63, 0.35);
}

/* Error modal: red header and icon */
.ovModal--danger .ovModal-title {
    color: var(--AgDanger);
}

@media (max-width: 575.98px) {

    .ovModal-content {
        padding: 24px 18px;
    }

}


/* =====================================================================
   15. SITE MAP (FOOTER)
   Brand, Explore (every page section), Modules and Get in Touch columns,
   with a © / Back to top bar. Tucks under the rounded bottom of the
   Current Operations section (.botBack sits on top of it).
   ===================================================================== */

.botBack {
    position: relative;
    z-index: 1;                  /* its rounded bottom corners overlap the top of the footer */
}

.siteMap {
    position: relative;
    z-index: 0;
    margin-top: -30px;           /* slides under .botBack's rounded corners */
    padding: 80px 0 24px 0;
    background: var(--AgGradient30);
    color: #FFF;
    font-size: 14px;
}

.siteMap-col {
    margin-bottom: 30px;
}

.siteMap-brand img {
    width: 170px;
    margin-bottom: 18px;
}

.siteMap-brand p {
    color: #ffffffd0;
    max-width: 320px;
}

.siteMap-tagline {
    font-size: 1.15em;
    color: #FFF !important;
    margin-bottom: 6px;
}

.siteMap-btn {
    margin-top: 6px;
    background: #FFF;
    color: var(--AgConsoleDark);
    font-weight: 600;
    border-radius: 5px;
    padding: 8px 18px;
}

.siteMap-btn:hover {
    background: var(--AgConsoleHighlight);
    color: var(--AgConsoleDark);
}

.siteMapTitle {
    font-weight: 600;
    font-size: 16px;
    color: #FFF;
    margin-bottom: 14px;
}

.siteMap-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.siteMap-links li {
    margin-bottom: 10px;
}

.siteMap-links a,
.siteMap-linkBtn {
    color: #ffffffd0;
    text-decoration: none;
    transition: color 0.2s ease;
}

.siteMap-links a:hover,
.siteMap-linkBtn:hover {
    color: #FFF;
    text-decoration: underline;
}

.siteMap-links i {
    width: 22px;
    margin-right: 6px;
    opacity: 0.85;
}

/* "Chat on WhatsApp" is a button (no number in the HTML) styled like the links */
.siteMap-linkBtn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.siteMap-contact a,
.siteMap-contact .siteMap-linkBtn {
    display: inline-flex;
    align-items: flex-start;
}

.siteMap-contact i {
    margin-top: 3px;
}

.siteMap-soon {
    color: #ffffff80;
}

.siteMap-soon small {
    font-style: italic;
    margin-left: 4px;
}

.siteMap-agent {
    margin-top: 14px;
    color: #ffffffb0;
}

.siteMap-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid #ffffff40;
    color: #ffffffb0;
    font-size: 13px;
}

.siteMap-top {
    color: #FFF;
    font-weight: 600;
}

.siteMap-top:hover {
    color: #FFF;
}

@media (max-width: 767.98px) {

    .siteMap {
        padding-top: 70px;
        padding-bottom: calc(80px + env(safe-area-inset-bottom));   /* room for the floating WhatsApp button */
    }

    .siteMap-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

}


/* =====================================================================
   16. FLOATING WHATSAPP BUTTON
   #waFloat, bottom right – shown by script section 11 (.is-visible) once
   the Introduction section is reached.
   ===================================================================== */

.waFloat {
    position: fixed;
    right: calc(20px + env(safe-area-inset-right));
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 990;                /* above the page, below the nav drawer backdrop and modals */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--AgConsole);         /* WhatsApp green #25D366; */
    color: #FFF;
    font-size: 32px;
    box-shadow: 0px 6px 20px #00000035;
    cursor: pointer;
    /* hidden until the Introduction is reached */
    opacity: 0;
    visibility: hidden;
    translate: 0 20px;
    scale: 0.8;
    transition: opacity 0.35s ease, translate 0.35s ease, scale 0.35s ease, visibility 0s linear 0.35s, box-shadow 0.2s ease;
}

.waFloat.is-visible {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    scale: 1;
    transition: opacity 0.35s ease, translate 0.35s ease, scale 0.35s ease, visibility 0s, box-shadow 0.2s ease;
    animation: waPulse 2s ease-out 0.4s 2;      /* a gentle "ping" twice when it first appears */
}

.waFloat.is-visible:hover {
    scale: 1.08;
    box-shadow: 0px 8px 26px #00000045;
}

.waFloat:focus-visible {
    outline: 3px solid #25D36680;
    outline-offset: 3px;
}

@keyframes waPulse {
    0%   { box-shadow: 0 0 0 0 #25D36699, 0px 6px 20px #00000035; }
    70%  { box-shadow: 0 0 0 16px #25D36600, 0px 6px 20px #00000035; }
    100% { box-shadow: 0 0 0 0 #25D36600, 0px 6px 20px #00000035; }
}

@media (max-width: 767.98px) {

    .waFloat {
        width: 52px;
        height: 52px;
        font-size: 28px;
        right: calc(16px + env(safe-area-inset-right));
        bottom: calc(16px + env(safe-area-inset-bottom));
    }

}

@media (prefers-reduced-motion: reduce) {

    .waFloat,
    .waFloat.is-visible {
        transition: opacity 0.2s ease, visibility 0s;
        translate: none;
        scale: none;
        animation: none;
    }

}


/* =====================================================================
   17. CONTACT CARD PAGE
   Only used by contact_page.html.
   ===================================================================== */

/* Bootstrap adds .modal-open to <body> while a modal is open. This only applies
   to the contact-card page (the one with #loadingModal), so it doesn't shift index.html. */
.modal-open:has(#loadingModal) {
    overflow: hidden;
    height: 100%;
    padding-right: 15px;
}