.elementor-4206 .elementor-element.elementor-element-3196a42{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4206 .elementor-element.elementor-element-76527644 .bg-dark{--dark:var( --e-global-color-df23b80 );}.elementor-4206 .elementor-element.elementor-element-76527644 .no-background ul.nav > li > a{color:var( --e-global-color-secondary );}.elementor-4206 .elementor-element.elementor-element-76527644 .no-background ul.nav > li > a:hover{color:var( --e-global-color-85c0551 );}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for agricaheader, class: .elementor-element-76527644 *//* ===============================
   🎨 SCOPED HEADER STYLING
================================= */
.elementor-element-76527644 .top-bar.top-style-two.bg-dark.text-light {
    background-color: #f1c40f !important;
}

/* ICON BASE STYLING */
.elementor-element-76527644 .top-bar .icon .fas {
    color: #27ae60 !important;
    font-size: 24px !important;
    width: 16px !important;
    height: 16px !important;
    transition: all 0.3s ease;
    display: inline-block;
}

/* ===============================
   ✨ ICON HOVER ANIMATIONS
================================= */

/* Phone icon - simulate ringing */
.elementor-element-76527644 .top-bar .icon .fa-phone:hover {
    animation: ring 0.5s ease-in-out 2;
    color: #2ecc71 !important;
}

/* Mail icon - simulate envelope opening */
.elementor-element-76527644 .top-bar .icon .fa-envelope:hover {
    animation: mailopen 0.6s ease-in-out 2;
    color: #2ecc71 !important;
}

/* Keyframes for ringing effect */
@keyframes ring {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-15deg); }
    60% { transform: rotate(10deg); }
    80% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}

/* Keyframes for mail opening effect */
@keyframes mailopen {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-10deg); }
    50% { transform: scale(1.05) rotate(10deg); }
    75% { transform: scale(1.1) rotate(-10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* ===============================
   TEXT STYLING
================================= */
.elementor-element-76527644 .top-bar .content,
.elementor-element-76527644 .top-bar .content a,
.elementor-element-76527644 .top-bar .content span,
.elementor-element-76527644 .top-bar .content p {
    color: #000 !important;
    transition: color 0.3s ease;
}

.elementor-element-76527644 .top-bar .content:hover,
.elementor-element-76527644 .top-bar .content a:hover,
.elementor-element-76527644 .top-bar .content span:hover,
.elementor-element-76527644 .top-bar .content p:hover {
    color: #333 !important;
}

/* ===============================
   LOGO
================================= */
.elementor-element-76527644 .logo img {
    width: 200px !important;
    height: auto !important;
    transition: transform 0.3s ease;
}

.elementor-element-76527644 .logo img:hover {
    transform: scale(1.05);
}

/* ===============================
   RESPONSIVE
================================= */
@media (max-width: 767px) {
    .elementor-element-76527644 .top-bar .icon {
        font-size: 12px !important;
        width: 12px !important;
        height: 12px !important;
    }

    .elementor-element-76527644 .logo img {
        width: 150px !important;
    }

    .elementor-element-76527644 .top-bar .content,
    .elementor-element-76527644 .top-bar .content a,
    .elementor-element-76527644 .top-bar .content span,
    .elementor-element-76527644 .top-bar .content p {
        font-size: 14px !important;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3196a42 *//* Ensure top-bar appears above navbar on homepage */
.home .top-bar {
    position: relative;
    z-index: 1001; /* Higher z-index to ensure it stays on top */
}

.home .nav-no-background {
    position: relative;
    top: 60px; /* Adjust based on the height of the top-bar */
    z-index: 1000;
}

/* Use flexbox to control order if needed */
.home header {
    display: flex;
    flex-direction: column;
}
.home .top-bar {
    order: 1;
}
.home .nav-no-background {
    order: 2;
}/* End custom CSS */