/* ========================================================= */
/* ======================== RESET ========================== */
/* ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{
  width:100%;
  overflow-x:hidden;
  scroll-behavior:smooth;
  font-family:'Poppins',sans-serif;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

:root{
  --leaf-blue:#0050a6;
  --leaf-hover:#003b7a;
  --white:#ffffff;
  --black:#111111;
  --border:#e8e8e8;
}

/* ========================================================= */
/* ======================== HEADER ========================= */
/* ========================================================= */

.garden-header{
  width:100%;
  min-height:110px;

  background:#ffffff;

  display:flex;
  align-items:center;
  justify-content:center;

  position:relative;
  z-index:999999;

  overflow:visible;

  padding:0;

  border:none;
}

/* ========================================================= */
/* ======================= CONTAINER ======================= */
/* ========================================================= */

.garden-container{
  width:100%;
  max-width:1920px;

  margin:0 auto;

  padding:0 24px;

  position:relative;

  overflow:visible;
}

/* ========================================================= */
/* ===================== MAIN FLEX AREA ==================== */
/* ========================================================= */

.header-container{
  width:100%;

  min-height:110px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  position:relative;

  overflow:visible;
}

/* ========================================================= */
/* ========================= LOGO ========================== */
/* ========================================================= */

.flower-area{
  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:flex-start;

  margin-right:40px;

  min-width:max-content;
}

.flower-logo{
  height:82px;
  width:auto;

  object-fit:contain;
}

/* ========================================================= */
/* ======================= NAVIGATION ====================== */
/* ========================================================= */

.tree-menu{
  flex:1;

  display:flex;
  align-items:center;
  justify-content:center;

  position:relative;

  overflow:visible;
}

/* ========================================================= */
/* ======================= MENU LIST ======================= */
/* ========================================================= */

.branch-list{
  width:100%;

  list-style:none;

  display:flex;
  align-items:center;
  justify-content:center;

  height:84px;

  margin:0;
  padding:0;

  overflow:visible;
}

/* ========================================================= */
/* ======================= MENU ITEM ======================= */
/* ========================================================= */

.leaf-item{
  position:relative;

  background:var(--leaf-blue);

  transform:none;

  height:84px;

  min-width:165px;

  padding:0 38px;

  margin-left:0;

  display:flex;
  align-items:center;
  justify-content:center;
 font-family:'Poppins',sans-serif;
  transition:background 0.3s ease;

  overflow:visible;
}

.leaf-item:first-child{
  margin-left:0;
}

/* ========================================================= */
/* ======================= MENU LINK ======================= */
/* ========================================================= */

.leaf-item > a{
  color:#ffffff !important;

  text-decoration:none !important;

  font-size:18px !important;

  font-weight:600 !important;

  font-family:inherit !important;

  line-height:1.2 !important;

  letter-spacing:0.2px !important;

  white-space:nowrap !important;

 transform:none;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;

  transition:all 0.3s ease;

  -webkit-text-size-adjust:100%;
}

/* ========================================================= */
/* ====================== ACTIVE MENU ====================== */
/* ========================================================= */

/* ACTIVE MENU */

.leaf-item.active{
  background:#003b7a;   /* logo blue shade */
}

.leaf-item.active > a{
  color:#ffffff !important;
}

/* ACTIVE HOVER */

.leaf-item.active:hover{
  background:#003b7a;
}

.leaf-item.active:hover > a{
  color:#ffffff !important;
}


/* SAME HOVER EFFECT FOR ACTIVE MENU */

.leaf-item.active:hover{
  background:var(--leaf-hover);
}

.leaf-item.active:hover > a{
  color:#ffffff !important;
}
/* ========================================================= */
/* ======================= RIGHT ICONS ===================== */
/* ========================================================= */

.right-icons{
  display:flex;
  align-items:center;
  gap:18px;

  margin-left:28px;

  position:relative;
  z-index:9999;

  flex-shrink:0;
}

.right-icons a{
  text-decoration:none;
}

.right-icons a i{
  font-size:42px;

  opacity:1 !important;
  visibility:visible !important;
}

/* ICON COLORS */

.right-icons a i.fa-linkedin{
  color:#0077b5 !important;
}

.right-icons a i.fa-youtube{
  color:#ff0000 !important;
}

/* ========================================================= */
/* ======================= HOVER MENU ====================== */
/* ========================================================= */

.leaf-item:hover{
  background:var(--leaf-hover);
}

.leaf-item:hover > a{
  color:#ffffff !important;
}

/* ========================================================= */
/* ===================== DESKTOP DROPDOWN ================= */
/* ========================================================= */

.seed-menu{
  position:absolute;

  top:100%;

  left:50%;

  transform:translateX(-50%) skewX(-25deg) !important;

  width:240px;

  min-width:240px;

  max-width:240px;

  background:#ffffff;

  display:none;

  flex-direction:column;

  padding:0;

  margin:0;

  z-index:999999;

  border:none;

  overflow:hidden;

  border-radius:0 !important;

  box-shadow:0 10px 22px rgba(0,0,0,0.14);
}

/* SHOW DROPDOWN */

.leaf-item:hover > .seed-menu{
  display:flex;
}

/* ========================================================= */
/* ================= FIX SKEW ISSUE ======================== */
/* ========================================================= */

.seed-menu,
.seed-menu *{
  transform:none !important;
}

/* ========================================================= */
/* ================= PERFECT POSITION ====================== */
/* ========================================================= */

.leaf-item{
  position:relative;

  overflow:visible;
}

/* EXACT CENTER BELOW MENU */

.leaf-item .seed-menu{
  top:100%;

  left:80%;
  

  margin-top:0;

  transform:translateX(-50%) !important;
}
/* FIX ONLY CAPABILITIES DROPDOWN */

.leaf-item:nth-child(3) .seed-menu{
  left:73% !important;
}

/* ========================================================= */
/* ==================== DROPDOWN ITEMS ===================== */
/* ========================================================= */

.seed-menu li{
  width:100%;

  list-style:none;

  margin:0;

  padding:0;

  background:#ffffff;

  border-bottom:1px solid #ececec;
}

.seed-menu li:last-child{
  border-bottom:none;
}

/* ========================================================= */
/* ==================== DROPDOWN LINKS ===================== */
/* ========================================================= */

.seed-menu li a{
  width:100%;

  display:flex;

  align-items:center;

  justify-content:flex-start;

  padding:16px 18px;

  min-height:58px;

  background:#ffffff;

  color:#222222 !important;

  text-decoration:none !important;

  font-family:'Poppins',sans-serif !important;

  font-size:15px !important;

  font-weight:500 !important;

  line-height:1.5 !important;

  text-align:left !important;

  white-space:normal !important;

  word-break:break-word;

  overflow-wrap:break-word;

  transition:all 0.25s ease;
}

/* ========================================================= */
/* ==================== DROPDOWN HOVER ===================== */
/* ========================================================= */

.seed-menu li:hover{
  background:#f5f8fd;
}

.seed-menu li:hover a{
  color:var(--leaf-blue) !important;
}

/* ========================================================= */
/* =================== FIX ICON COLORS ===================== */
/* ========================================================= */

.right-icons a i.fa-linkedin{
  color:#0077b5 !important;
}

.right-icons a i.fa-youtube{
  color:#ff0000 !important;
}

/* ========================================================= */
/* =================== REMOVE DROPDOWN SLANT =============== */
/* ========================================================= */

.seed-menu,
.seed-menu li,
.seed-menu li a{
  clip-path:none !important;

  border-radius:0 !important;
}
/* ========================================================= */
/* ====================== MOBILE ICONS ===================== */
/* ========================================================= */

.mobile-icons{
  display:none;
}

/* ========================================================= */
/* ======================= 4K SCREEN ======================= */
/* ========================================================= */

@media (min-width:1921px){

  .garden-container{
    max-width:2200px;
  }

  .leaf-item{
    min-width:180px;
  }

  .leaf-item > a{
    font-size:20px !important;
  }
}

/* ========================================================= */
/* ==================== LARGE DESKTOP ====================== */
/* ========================================================= */

@media (max-width:1600px){

  .leaf-item{
    min-width:150px;

    padding:0 30px;
  }

  .leaf-item > a{
    font-size:17px !important;
  }

  .right-icons a i{
    font-size:38px;
  }
}

/* ========================================================= */
/* ===================== SMALL LAPTOP ====================== */
/* ========================================================= */

@media (max-width:1400px){

  .garden-header{
    min-height:100px;
  }

  .header-container{
    min-height:100px;
  }

  .branch-list{
    height:76px;
  }

  .leaf-item{
    height:76px;

    min-width:132px;

    padding:0 22px;
  }

  .leaf-item > a{
    font-size:15px !important;
  }

  .flower-logo{
    height:70px;
  }

  .seed-menu{
    width:190px;
  }
}

/* ========================================================= */
/* ====================== MINI LAPTOP ====================== */
/* ========================================================= */

@media (max-width:1200px){

  .garden-container{
    padding:0 18px;
  }

  .flower-area{
    margin-right:18px;
  }

  .flower-logo{
    height:62px;
  }

  .leaf-item{
    min-width:115px;

    padding:0 16px;
  }

  .leaf-item > a{
    font-size:14px !important;
  }

  .right-icons{
    margin-left:15px;
  }

  .right-icons a{
    margin-left:15px;
  }

  .right-icons a i{
    font-size:32px;
  }
}

/* ========================================================= */
/* ====================== LARGE TABLET ===================== */
/* ========================================================= */

@media (max-width:1024px){

  .garden-header{
    min-height:82px;
  }

  .header-container{
    min-height:82px;

    justify-content:center;
  }

  .flower-logo{
    height:56px;
  }

  /* HAMBURGER */

  .fruit-toggle{
    display:flex;

    flex-direction:column;

    position:absolute;

    left:16px;
    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

    z-index:999999;
  }

  .fruit-toggle span{
    width:26px;
    height:3px;

    background:var(--leaf-blue);

    margin:4px 0;

    border-radius:3px;

    transition:0.3s ease;
  }

  /* MOBILE MENU */

  .tree-menu{
    position:fixed;

    top:82px;
    left:-100%;

    width:86%;
    max-width:360px;

    height:calc(100vh - 82px);

    background:#ffffff;

    transition:0.35s ease;

    z-index:999999;

    overflow-y:auto;

    box-shadow:5px 0 20px rgba(0,0,0,0.12);

    justify-content:flex-start;
  }

  .tree-menu.active{
    left:0;
  }

  /* MOBILE LIST */

  .branch-list{
    flex-direction:column;

    align-items:flex-start;
    justify-content:flex-start;

    width:100%;

    height:auto;
  }

  /* MOBILE ITEM */

  .leaf-item{
    width:100%;

    min-width:100%;

    height:auto;

    transform:none !important;

    margin:0;
    padding:0;

    background:#ffffff;

    border-bottom:1px solid #eeeeee;

    display:flex;
    flex-direction:column;

    align-items:stretch;
    justify-content:flex-start;
  }

  /* MOBILE LINKS */

  .leaf-item > a{
    transform:none;

    width:100%;

    padding:18px 20px;

    color:#333333 !important;

    font-size:16px !important;

    font-weight:500 !important;

    text-align:left;

    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  /* MOBILE ACTIVE */

  .leaf-item.active{
    background:#ffffff;
  }

  .leaf-item.active > a{
    color:var(--leaf-blue) !important;
  }

  /* MOBILE HOVER */

  .leaf-item:hover{
    background:#ffffff;
  }

  .leaf-item:hover > a{
    color:var(--leaf-blue) !important;
  }

  /* DROPDOWN ICON */

  .has-seed > a::after{
    content:"+";

    font-size:24px;

    color:var(--leaf-blue);

    transition:0.3s ease;
  }

  .leaf-item.open > a::after{
    content:"-";
  }

  /* MOBILE DROPDOWN */

  .seed-menu{
    position:relative;

    top:0;
    left:0;

    transform:none;

    width:100%;

    max-height:0;

    overflow:hidden;

    transition:max-height 0.35s ease;

    background:#f8f8f8;

    border:none;

    box-shadow:none;

    display:flex;
    flex-direction:column;
  }

  /* OPEN DROPDOWN */

  .leaf-item.open .seed-menu{
    max-height:500px;
  }

  /* MOBILE DROPDOWN LINK */

  .seed-menu li a{
    transform:none;

    padding:14px 40px;

    font-size:15px;

    color:#444444;

    background:#f8f8f8;
  }

  /* MOBILE DROPDOWN HOVER */

  .seed-menu li:hover{
    background:#efefef;
  }

  .seed-menu li:hover a{
    color:var(--leaf-blue);
  }

  /* MOBILE SOCIAL */

  .mobile-icons{
    display:flex;

    align-items:center;

    gap:20px;

    padding:20px;
  }

  .mobile-icons a{
    text-decoration:none;
  }

  .mobile-icons a i{
    font-size:30px;
  }

  /* HIDE DESKTOP ICONS */

  .right-icons{
    display:none;
  }
}

/* ========================================================= */
/* ======================== TABLET ========================= */
/* ========================================================= */

@media (max-width:768px){

  .garden-header{
    min-height:74px;
  }

  .header-container{
    min-height:74px;
  }

  .tree-menu{
    top:74px;

    height:calc(100vh - 74px);

    width:88%;
  }

  .flower-logo{
    height:48px;
  }

  .leaf-item > a{
    font-size:15px !important;

    padding:17px 18px;
  }

  .seed-menu li a{
    font-size:14px;

    padding:13px 34px;
  }
}

/* ========================================================= */
/* ======================== MOBILE ========================= */
/* ========================================================= */

@media (max-width:576px){

  .garden-header{
    min-height:70px;
  }

  .header-container{
    min-height:70px;
  }

  .garden-container{
    padding:0 14px;
  }

  .tree-menu{
    top:70px;

    height:calc(100vh - 70px);

    width:92%;
  }

  .flower-logo{
    height:42px;
  }

  .fruit-toggle{
    left:14px;
  }

  .fruit-toggle span{
    width:24px;
  }

  .leaf-item > a{
    font-size:14px !important;

    padding:15px 16px;
  }

  .seed-menu li a{
    font-size:13px;

    padding:12px 30px;
  }

  .mobile-icons{
    padding:18px 16px;
  }

  .mobile-icons a i{
    font-size:24px;
  }
}

/* ========================================================= */
/* ===================== SMALL MOBILE ====================== */
/* ========================================================= */

@media (max-width:420px){

  .flower-logo{
    height:38px;
  }

  .tree-menu{
    width:95%;
  }

  .leaf-item > a{
    font-size:13px !important;
  }

  .seed-menu li a{
    font-size:12px;
  }
}

/* ========================================================= */
/* ===================== KEYPAD MOBILE ===================== */
/* ========================================================= */

@media (max-width:320px){

  .garden-container{
    padding:0 10px;
  }

  .flower-logo{
    height:34px;
  }

  .tree-menu{
    width:100%;
  }

  .leaf-item > a{
    font-size:12px !important;

    padding:13px;
  }

  .seed-menu li a{
    font-size:11px;

    padding:10px 24px;
  }

  .mobile-icons a i{
    font-size:20px;
  }
}

/* ========================================================= */
/* ==================== WORDPRESS FIX ====================== */
/* ========================================================= */

main,
section,
.elementor-section,
.wp-block-group,
.site-content,
.site-main,
.elementor-container,
.elementor-widget-wrap{
  position:relative;
  z-index:1;
}

/* ========================================================= */
/* =================== GLOBAL FIXES ======================== */
/* ========================================================= */

.garden-header *,
.garden-header a,
.garden-header li,
.garden-header ul,
.garden-header div{
  box-sizing:border-box;
}

/* FIX ICON VISIBILITY */

.right-icons,
.right-icons a,
.right-icons i{
  opacity:1 !important;
  visibility:visible !important;
}

/* LOCK TYPOGRAPHY */

.garden-header .leaf-item > a{
  font-family:'Poppins',sans-serif !important;

  text-transform:none !important;

  text-shadow:none !important;
}
/* PREVENT PAGE BUILDERS OVERRIDE */

.elementor .garden-header .leaf-item > a,
.wp-block .garden-header .leaf-item > a,
.site-header .garden-header .leaf-item > a,
.elementor-nav-menu .leaf-item > a{
  font-size:inherit !important;
}

/* SAME HEADER ON ALL PAGES */

.garden-header,
.garden-container,
.header-container,
.tree-menu,
.branch-list{
  max-width:100% !important;
}

/* FIX PAGE OVERFLOW */

body.elementor-page .garden-header,
body.page .garden-header{
  overflow:visible !important;
}