.elementor-2284 .elementor-element.elementor-element-a67e41a > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-2284 .elementor-element.elementor-element-a67e41a{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:10px 45px 10px 45px;}.elementor-2284 .elementor-element.elementor-element-a67e41a > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-2284 .elementor-element.elementor-element-1fd7e06{width:auto;max-width:auto;}.elementor-2284 .elementor-element.elementor-element-1fd7e06.elementor-element{--flex-grow:0;--flex-shrink:1;}.elementor-2284 .elementor-element.elementor-element-1fd7e06 img{max-width:100%;}.elementor-2284 .elementor-element.elementor-element-42fbdd4{width:auto;max-width:auto;}.elementor-2284 .elementor-element.elementor-element-42fbdd4 > .elementor-widget-container{margin:0px 0px 0px 35px;}.elementor-2284 .elementor-element.elementor-element-42fbdd4 .navbar-nav.megamenu > li > a{color:#000000;}.elementor-2284 .elementor-element.elementor-element-42fbdd4 .navbar-nav.megamenu > li:hover > a,.elementor-2284 .elementor-element.elementor-element-42fbdd4 .navbar-nav.megamenu > li.active > a{color:#000000;}.elementor-2284 .elementor-element.elementor-element-42fbdd4 .navbar-nav.megamenu .dropdown-menu li.current-menu-item > a,.elementor-2284 .elementor-element.elementor-element-42fbdd4 .navbar-nav.megamenu .dropdown-menu li.open > a,.elementor-2284 .elementor-element.elementor-element-42fbdd4  .navbar-nav.megamenu .dropdown-menu li.active > a,.elementor-2284 .elementor-element.elementor-element-42fbdd4 .navbar-nav.megamenu .dropdown-menu li:hover > a{color:#000000;}.elementor-2284 .elementor-element.elementor-element-42fbdd4 .megamenu .dropdown-menu{border-top-color:#000000;}.elementor-2284 .elementor-element.elementor-element-42fbdd4 .megamenu .dropdown-menu:before{border-color:transparent transparent #000000;}.elementor-bc-flex-widget .elementor-2284 .elementor-element.elementor-element-eb299da.elementor-column .elementor-widget-wrap{align-items:space-around;}.elementor-2284 .elementor-element.elementor-element-eb299da.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:space-around;align-items:space-around;}.elementor-2284 .elementor-element.elementor-element-eb299da.elementor-column > .elementor-widget-wrap{justify-content:flex-end;}.elementor-2284 .elementor-element.elementor-element-3d66798 .elementor-button{background-color:#000000;font-size:15px;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#000000;border-radius:8px 8px 8px 8px;padding:16px 40px 16px 40px;}.elementor-2284 .elementor-element.elementor-element-3d66798 .elementor-button:hover, .elementor-2284 .elementor-element.elementor-element-3d66798 .elementor-button:focus{background-color:#FFFFFF;color:#000000;border-color:#000000;}.elementor-2284 .elementor-element.elementor-element-3d66798{width:auto;max-width:auto;margin:0px 20px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2284 .elementor-element.elementor-element-3d66798 .elementor-button:hover svg, .elementor-2284 .elementor-element.elementor-element-3d66798 .elementor-button:focus svg{fill:#000000;}.elementor-2284 .elementor-element.elementor-element-cf3d919 .elementor-button{background-color:#FFFFFF;font-size:15px;fill:#000000;color:#000000;border-style:solid;border-width:1px 1px 1px 1px;border-color:#000000;border-radius:8px 8px 8px 8px;padding:16px 40px 16px 40px;}.elementor-2284 .elementor-element.elementor-element-cf3d919 .elementor-button:hover, .elementor-2284 .elementor-element.elementor-element-cf3d919 .elementor-button:focus{background-color:#000000;color:#FFFFFF;border-color:#FFFFFF;}.elementor-2284 .elementor-element.elementor-element-cf3d919{width:auto;max-width:auto;margin:0px 20px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2284 .elementor-element.elementor-element-cf3d919.elementor-element{--align-self:flex-start;}.elementor-2284 .elementor-element.elementor-element-cf3d919 .elementor-button:hover svg, .elementor-2284 .elementor-element.elementor-element-cf3d919 .elementor-button:focus svg{fill:#FFFFFF;}@media(max-width:1024px){.elementor-bc-flex-widget .elementor-2284 .elementor-element.elementor-element-eb299da.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-2284 .elementor-element.elementor-element-eb299da.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}}@media(min-width:768px){.elementor-2284 .elementor-element.elementor-element-69c7b96{width:59.923%;}.elementor-2284 .elementor-element.elementor-element-eb299da{width:40.039%;}}/* Start custom CSS */#main-header {
    background-color: transparent;
    transition: background 0.3s ease;
}

#main-header.scrolled {
    background-color: #ffffff !important; /* white bg when scrolled */
    /* Optional frosted blur */
    /* backdrop-filter: blur(10px); */
}

/* Transparent + sticky mobile header styling */
@media (max-width: 1024px) { 
  #apus-header-mobile{
    background: transparent !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    border-bottom: none !important; /* remove any default line */
    box-shadow: none !important;
    margin-bottom: 70px;
}

/* Offset content for fixed transparent header */
body:not(.scrolled) {
    padding-top: 70px; /* match your header height */
    }

/* Once scrolled (white header), remove the gap */
body.scrolled {
    padding-top: 0;
}


body.page-id-20, body.page-id-40 {
    padding-top: 0px; /* match your header height */
    }

  /* Make ALL icons and menu bars white initially */
  body.page-id-20 #apus-header-mobile .ti-bell,
  body.page-id-20 #apus-header-mobile .flaticon-user,
  body.page-id-40 #apus-header-mobile .ti-bell,
  body.page-id-40 #apus-header-mobile .flaticon-user {
    color: #fff !important;
    /*background: #fff !important;*/
  }
  
  body.page-id-20 #apus-header-mobile .btn-showmenu span,
  body.page-id-40 #apus-header-mobile .btn-showmenu span {
    color: #fff !important;
    background: #fff !important;
  }

  /* When scrolled: white bg, black icons */
  #apus-header-mobile.scrolled {
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 0px;
  }

  body.page-id-20 #apus-header-mobile.scrolled .ti-bell,
  body.page-id-20 #apus-header-mobile.scrolled .flaticon-user,
  body.page-id-40 #apus-header-mobile.scrolled .ti-bell,
  body.page-id-40 #apus-header-mobile.scrolled .flaticon-user {
    color: #000 !important;
    /*background: #000 !important;*/
  }
  
  body.page-id-20 #apus-header-mobile.scrolled .btn-showmenu span, 
  body.page-id-40 #apus-header-mobile.scrolled .btn-showmenu span {
    color: #000 !important;
    background: #000 !important;
  }
}

/* Default (desktop) */
.my-floating-button {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 9999;
}

/* Tablet */
@media (max-width: 1024px) {
  .my-floating-button {
    right: 20px;
    bottom: 20px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .my-floating-button {
    right: 15px;
    bottom: 15px;
  }
}


/* MAKE MENU HEADER ITEMS WHITE */
/* ==== DESKTOP HEADER MENU COLORS FOR HOME + ABOUT ==== */

/* Make menu items white by default (before scroll) */
body.page-id-20 #main-header .navbar-nav > li > a,
body.page-id-40 #main-header .navbar-nav > li > a {
    color: #fff !important;
}

/* Also make logo icon or SVGs white if needed */
body.page-id-20 #main-header img.logo-img,
body.page-id-40 #main-header img.logo-img {
    filter: brightness(0) invert(1); /* turns dark logo white */
}

/* ON SCROLL – header turns white, menu items turn black */
body.page-id-20 #main-header.scrolled .navbar-nav > li > a,
body.page-id-40 #main-header.scrolled .navbar-nav > li > a {
    color: #000 !important;
}

/* If your sticky header uses .sticky-header instead of .scrolled */
body.page-id-20 #main-header.sticky-header .navbar-nav > li > a,
body.page-id-40 #main-header.sticky-header .navbar-nav > li > a {
    color: #000 !important;
}

/* Page 20 & 40 — Top of page: use alternate logo */
body.page-id-20 #main-header .logo img,
body.page-id-40 #main-header .logo img {
    content: url("https://res.cloudinary.com/dlzoni81s/image/upload/v1763327782/white-logo_wcbkcc.png");
}

/* When scrolled — restore default logo */
body.page-id-20 #main-header.scrolled .logo img,
body.page-id-40 #main-header.scrolled .logo img {
    content: url("https://res.cloudinary.com/dlzoni81s/image/upload/v1763327806/black-logo_zz3juw.png");
}

/* Set dimensions */
body.page-id-20 #main-header .logo img,
body.page-id-40 #main-header .logo img {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain;
}

#main-header.scrolled {
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}

/* ==== MOBILE HEADER LOGO BEHAVIOUR FOR PAGE 20 & 40 ==== */

/* Top of page — use alternate white logo */
body.page-id-20 #apus-header-mobile .logo img,
body.page-id-40 #apus-header-mobile .logo img {
    content: url("https://res.cloudinary.com/dlzoni81s/image/upload/v1763327782/white-logo_wcbkcc.png");
    width: 50px !important;
    height: 50px !important;
    object-fit: contain;
}

/* When scrolled — restore default black logo */
body.page-id-20 #apus-header-mobile.scrolled .logo img,
body.page-id-40 #apus-header-mobile.scrolled .logo img {
    content: url("https://res.cloudinary.com/dlzoni81s/image/upload/v1763327806/black-logo_zz3juw.png");
    width: 50px !important;
    height: 50px !important;
    object-fit: contain;
}

/* Add subtle shadow so mobile header doesn't blend */
#apus-header-mobile.scrolled {
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}/* End custom CSS */