/* =========================
   ARC NAVIGATION CONTAINER
========================= */





        /* Green button styles for navigation */
        .arc-btn.green {
            background: linear-gradient(135deg, #2d6a4f, #40916c) !important;
            color: white !important;
            border: none;
        }
        
        .mobile-togglegreen {
            background: linear-gradient(135deg, #2d6a4f, #40916c) !important;
            color: white;
        }



  




    .arc-nav {
      position: sticky;
      top: 1rem;
      z-index: 999;

      display: flex;
        align-items: center;
      justify-items: end;
      justify-content: flex-end;
      gap: 2rem;
      width: 100%;
      margin-top: 2rem;
    }


    .arc-logo {
      width: 50px;
      height: 50px;
      align-items: center;
      justify-content: center; /* centers the image inside */

    }

    .arc-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain; /* ✅ prevents stretching */
    }

    .arc-left-group {
  display: flex;
  margin-right: auto; /* pushes the rest to the right */
}

.arc-right-group {
  display: flex;
  margin-left: auto; /* pushes this group to the right */
}








/* =========================
   ARC BUTTONS
========================= */
    .arc-btn {
    padding: 0.8rem 1.2rem;  /* proper size */
    text-align: center;
     background: rgba(220, 38, 38, 0.8);
    text-decoration: none;
     cursor: crosshair;
     opacity: 0.9;

  /* Glow + shadow */
  box-shadow: 
    0 0 10px rgba(255, 255, 255, 0.7),   /* soft glow */
    0 0 20px rgba(211, 202, 202, 0.6),   /* medium glow */
    0 0 30px rgba(220, 38, 38, 0.5),   /* outer glow */
    #000000 0px 3px 8px;               /* base shadow */
    display: inline-block;
    color: #dedbdb;
    border-radius: 50px 74px 2px 74px;
     transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
     /* keep rotation always */
     transform: rotate(-20deg);

     /* floating animation only moves Y */
     animation: float 6s ease-in-out infinite;
}



/* Extra glow on hover */
.arc-btn:hover {
  background: rgba(220, 38, 38, 1);
  box-shadow: 
    0 0 15px rgba(220, 38, 38, 0.9),
    0 0 30px rgba(220, 38, 38, 0.8),
    0 0 45px rgba(220, 38, 38, 0.7),
    #000000 0px 3px 8px;
  transform: rotate(-20deg) scale(1.05);
}




.arc-btn.teal{
     background: rgba(7, 115, 134, 0.8);
     

}
.arc-btn.teal:hover {
  background: rgb(0, 75, 96);
  box-shadow: 
    0 0 15px rgba(38, 220, 169, 0.9),
    0 0 30px rgba(38, 181, 220, 0.8),
    0 0 45px rgba(38, 144, 220, 0.7),
    #000000 0px 3px 8px;
  transform: rotate(-20deg) scale(1.05);
}






.arc-btn.blue{
     background: rgba(23, 38, 175, 0.863);
     

}
.arc-btn.blue:hover {
  background: rgb(0, 0, 96);
  box-shadow: 
    0 0 15px rgba(38, 44, 220, 0.9),
    0 0 30px rgba(53, 38, 220, 0.8),
    0 0 45px rgba(11, 35, 146, 0.681),
    #000000 0px 3px 8px;
  transform: rotate(-20deg) scale(1.05);
}





.arc-btn.pink{
     background: rgba(194, 43, 189, 0.863);

}
.arc-btn.pink:hover {
  background: rgb(133, 28, 121);
  box-shadow: 
    0 0 15px rgba(220, 38, 193, 0.9),
    0 0 30px rgba(220, 38, 184, 0.8),
    0 0 45px rgba(135, 11, 146, 0.681),
    #000000 0px 3px 8px;
  transform: rotate(-20deg) scale(1.05);
}






.arc-btn.white{
     background: rgba(224, 205, 223, 0.863);
     color: #000000;

}
.arc-btn.white:hover {
  background: rgb(113, 101, 111);
  box-shadow: 
    0 0 15px rgba(105, 92, 103, 0.9),
    0 0 30px rgba(205, 195, 203, 0.8),
    0 0 45px rgba(94, 90, 94, 0.681),
    #000000 0px 3px 8px;
  transform: rotate(-20deg) scale(1.05);
}





.arc-btn.beige{
     background: rgba(234, 226, 113, 0.863);
     color: #000000;

}
.arc-btn.beige:hover {
  background: rgb(184, 158, 53);
  box-shadow: 
    0 0 15px rgba(220, 197, 53, 0.9),
    0 0 30px rgba(143, 135, 49, 0.8),
    0 0 45px rgba(193, 156, 68, 0.681),
    #000000 0px 3px 8px;
  transform: rotate(-20deg) scale(1.05);
}




.arc-btn.purple{
     background: rgba(119, 28, 188, 0.863);

}
.arc-btn.purple:hover {
  background: rgb(125, 53, 184);
  box-shadow: 
    0 0 15px rgba(137, 53, 220, 0.9),
    0 0 30px rgba(109, 49, 143, 0.8),
    0 0 45px rgba(156, 68, 193, 0.681),
    #000000 0px 3px 8px;
  transform: rotate(-20deg) scale(1.05);
}



















/* Floating animation */
@keyframes float {
  0%   { transform: rotate(-10deg) translateY(0); }
  50%  { transform: rotate(-10deg) translateY(-10px); }
  100% { transform: rotate(-10deg) translateY(0); }
}

/* Extra large screens (wide desktops) */
@media (min-width: 1280px) {
  .arc-btn {
    font-size: 15px;
    padding: 1rem 1.5rem;
  }
  .arc-nav {
    gap: 1.25rem;
    justify-items: flex-end;
  }
}

/* Extra large screens (wide desktops) */
@media (max-width: 740px) {
  .arc-btn {
    font-size: 14px;
    padding: .4rem .2rem;
  }
 
  .arc-logo{
    width: 40px;
    height: 40px;
    justify-self: center;
  }

}



@media (max-width: 1040px) {
  .arc-btn {
    font-size: 14px;
    padding: .6rem;
  }
 
  .arc-logo{
    width: 40px;
    height: 40px;
    justify-self: center;
  }

}




    



    
  /* Force home page mobile toggle to be visible */
body.smoothbgred .mobile-togglered,
body.smoothbgred [class*="mobile-toggle"] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #c00606, #801100) !important;  /* Keep only this one */
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2rem;
    box-shadow: 0 0 20px rgba(163, 160, 160, 0.7);

    opacity: 1 !important;
    visibility: visible !important;
    position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  display: none;


}    

               
        .tools-dropdown {
            position: relative;
            display: inline-block;
            margin-left: 10px;
            
        }
     
        
        .tools-menu {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border-radius: 8px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
            min-width: 180px;
            z-index: 10000;
            margin-top: 5px;
            padding: 8px 0;
        }
        
        .tools-menu a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 15px;
            color: #333;
            text-decoration: none;
            border-bottom: 1px solid #eee;
        }
        
        .tools-menu a:last-child {
            border-bottom: none;
        }
        
        .tools-menu a:hover {
            background: #f5f5f5;
        }
        
        .tools-menu a.active {
            background: #f0f0f0;
            font-weight: bold;
            color: #9d42c1;
        }
        
     
        
        /* Mobile Header - Only visible on mobile */
        .mobile-header {
            display: none;
            padding: 15px;
            background: rgba(0,0,0,0.1);
        }
        
        .mobile-header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
        }
        
        .mobile-logo {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .mobile-logo img {
            max-height: 40px;
        }
        
   

.mobile-arc-menu {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  display: none;
}



@media (max-width: 640px) {
  .mobile-arc-menu {
    display: block;
  }
}

.mobile-toggle {
  width: 60px;
  height: 60px;
  background: #dc2626;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.7);
}
.mobile-togglepink {
  width: 60px;
  height: 60px;
  background: #49073d;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(163, 160, 160, 0.7);
}




.mobile-toggleblue {
  width: 60px;
  height: 60px;
  background: #0a0749;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(163, 160, 160, 0.7);
}


.mobile-togglewhite {
  width: 60px;
  height: 60px;
  background: #6c676b;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(163, 160, 160, 0.7);
}



.mobile-toggleteal {
  width: 60px;
  height: 60px;
  background: #156c6ddc;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(163, 160, 160, 0.7);
}

.mobile-togglepurple {
  width: 60px;
  height: 60px;
  background: #3e156ddc;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(163, 160, 160, 0.7);
}



.mobile-togglegreen {
  width: 60px;
  height: 60px;
  background: #166d15dc;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(163, 160, 160, 0.7);
}





.mobile-togglebeige {
  width: 60px;
  height: 60px;
  background: #6d6315dc;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(163, 160, 160, 0.7);
}




.mobile-items {
  position: absolute;
  bottom: 0;
  right: 0;
  transform-origin: bottom right;
  font-size: 15px;

}

.mobile-items .arc-btn {
  position: absolute;
  opacity: 0;
  transform: scale(0.5) rotate(0deg) !important;
  pointer-events: none;
  transition: 0.44s ease;
  animation: none !important;
}

.mobile-arc-menu.open .mobile-items .arc-btn:nth-child(1) {
  transform: translate(-70px, -10px) scale(1) !important;
  opacity: 1;
  pointer-events: auto;
}

.mobile-arc-menu.open .mobile-items .arc-btn:nth-child(2) {
  transform: translate(-110px, -40px) scale(1) !important;
  opacity: 1;
  pointer-events: auto;
}

.mobile-arc-menu.open .mobile-items .arc-btn:nth-child(3) {
  transform: translate(-150px, -80px) scale(1) !important;
  opacity: 1;
  pointer-events: auto;
}

.mobile-arc-menu.open .mobile-items .arc-btn:nth-child(4) {
  transform: translate(-170px, -130px) scale(1) !important;
  opacity: 1;
  pointer-events: auto;
}

.mobile-arc-menu.open .mobile-items .arc-btn:nth-child(5) {
  transform: translate(-150px, -180px) scale(1) !important;
  opacity: 1;
  pointer-events: auto;
}

.mobile-arc-menu.open .mobile-items .arc-btn:nth-child(6) {
  transform: translate(-100px, -220px) scale(1) !important;
  opacity: 1;
  pointer-events: auto;
}

.mobile-arc-menu.open .mobile-items .arc-btn:nth-child(7) {
  transform: translate(-40px, -240px) scale(1) !important;
  opacity: 1;
  pointer-events: auto;
}

.mobile-arc-menu.open .mobile-items .arc-btn:nth-child(8) {
  transform: translate(-5px, -110px) scale(.8) !important;
  opacity: 1;
  pointer-events: auto;
}   

.mobile-arc-menu.open .mobile-items .arc-btn:nth-child(9) {
  transform: translate(-20px, -160px) scale(.8) !important;
  opacity: 1;
  pointer-events: auto;
} 





/* ✅ FORCE HIDE NAV ON MOBILE */
@media (max-width: 640px) {
  .arc-nav {
    display: none !important;
  }
}




     /* Mobile responsive */
        @media (max-width: 768px) {
            .arc-nav {
                display: none !important;
            }
            .mobile-header {
                display: block !important;
                position: relative;
            }
            .install-container {
                top: 120px !important;
            }
        }
        








  /* FIX FOR CENTERING - ADD THIS */
    .h2titlColorGreen {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        margin: 0 auto;
        padding: 20px 0;
    }

    .h2titlColorGreen span {
        display: inline-block;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: 700;
        font-style: oblique;
        letter-spacing: 5px;
        text-transform: uppercase;
        font-size: 3.5rem;
        
        background: linear-gradient(
            90deg,
            #0fa889,
            #1ad14e,
            #2d6a0a,
            #1ad132,
            #0f9ba8
        );
        background-size: 300% 100%;
        background-position: 0% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: greenWave 2s linear infinite;
    }

    /* STAGGERED FLOW */
    .h2titlColorGreen span:nth-child(1) { animation-delay: 0s; }
    .h2titlColorGreen span:nth-child(2) { animation-delay: 0.1s; }
    .h2titlColorGreen span:nth-child(3) { animation-delay: 0.2s; }
    .h2titlColorGreen span:nth-child(4) { animation-delay: 0.3s; }
    .h2titlColorGreen span:nth-child(5) { animation-delay: 0.4s; }
    .h2titlColorGreen span:nth-child(6) { animation-delay: 0.5s; }
    .h2titlColorGreen span:nth-child(7) { animation-delay: 0.6s; }

    /* ANIMATION */
    @keyframes greenWave {
        from { background-position: 0% 50%; }
        to { background-position: 300% 50%; }
    }






















    /* FIX FOR CENTERING - ADD THIS */
    .h2titlColorTeal {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        margin: 0 auto;
        padding: 20px 0;
    }

    .h2titlColorTeal span {
        display: inline-block;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: 700;
        font-style: oblique;
        letter-spacing: 5px;
        text-transform: uppercase;
        font-size: 3.5rem;
        
        background: linear-gradient(
            90deg,
            #095f58,
            #1ab6d1,
            #0a6a64,
            #038082,
            #0f9ba8
        );
        background-size: 300% 100%;
        background-position: 0% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: greenWave 2s linear infinite;
    }

    /* STAGGERED FLOW */
    .h2titlColorTeal span:nth-child(1) { animation-delay: 0s; }
    .h2titlColorTeal span:nth-child(2) { animation-delay: 0.1s; }
    .h2titlColorTeal span:nth-child(3) { animation-delay: 0.2s; }
    .h2titlColorTeal span:nth-child(4) { animation-delay: 0.3s; }
    .h2titlColorTeal span:nth-child(5) { animation-delay: 0.4s; }
    .h2titlColorTeal span:nth-child(6) { animation-delay: 0.5s; }
    .h2titlColorTeal span:nth-child(7) { animation-delay: 0.6s; }

    /* ANIMATION */
    @keyframes greenWave {
        from { background-position: 0% 50%; }
        to { background-position: 300% 50%; }
    }

















    /* FIX FOR CENTERING - ADD THIS */
    .h2titlColorPurple {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        margin: 0 auto;
        padding: 20px 0;
    }

    .h2titlColorPurple span {
        display: inline-block;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: 700;
        font-style: oblique;
        letter-spacing: 5px;
        text-transform: uppercase;
        font-size: 3.5rem;
        
        background: linear-gradient(
            90deg,
            #59095f,
            #d11ace,
            #400a6a,
            #2f0382,
            #870fa8
        );
        background-size: 300% 100%;
        background-position: 0% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: greenWave 2s linear infinite;
    }

    /* STAGGERED FLOW */
    .h2titlColorPurple span:nth-child(1) { animation-delay: 0s; }
    .h2titlColorPurple span:nth-child(2) { animation-delay: 0.1s; }
    .h2titlColorPurple span:nth-child(3) { animation-delay: 0.2s; }
    .h2titlColorPurple span:nth-child(4) { animation-delay: 0.3s; }
    .h2titlColorPurple span:nth-child(5) { animation-delay: 0.4s; }
    .h2titlColorPurple span:nth-child(6) { animation-delay: 0.5s; }
    .h2titlColorPurple span:nth-child(7) { animation-delay: 0.6s; }

    /* ANIMATION */
    @keyframes greenWave {
        from { background-position: 0% 50%; }
        to { background-position: 300% 50%; }
    }












    /* FIX FOR CENTERING - ADD THIS */
    .h2titlColorWhite {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        margin: 0 auto;
        padding: 20px 0;
    }

    .h2titlColorWhite span {
        display: inline-block;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: 700;
        font-style: oblique;
        letter-spacing: 5px;
        text-transform: uppercase;
        font-size: 3.5rem;
        
        background: linear-gradient(
            90deg,
            #948795,
            #9e9a9e,
            #ebe1f2,
            #9f9ba6,
            #c2c2c3
        );
        background-size: 300% 100%;
        background-position: 0% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: greenWave 2s linear infinite;
    }

    /* STAGGERED FLOW */
    .h2titlColorWhite span:nth-child(1) { animation-delay: 0s; }
    .h2titlColorWhite span:nth-child(2) { animation-delay: 0.1s; }
    .h2titlColorWhite span:nth-child(3) { animation-delay: 0.2s; }
    .h2titlColorWhite span:nth-child(4) { animation-delay: 0.3s; }
    .h2titlColorWhite span:nth-child(5) { animation-delay: 0.4s; }
    .h2titlColorWhite span:nth-child(6) { animation-delay: 0.5s; }
    .h2titlColorWhite span:nth-child(7) { animation-delay: 0.6s; }

    /* ANIMATION */
    @keyframes greenWave {
        from { background-position: 0% 50%; }
        to { background-position: 300% 50%; }
    }

















    /* FIX FOR CENTERING - ADD THIS */
    .h2titlColorBeige {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        margin: 0 auto;
        padding: 20px 0;
    }

    .h2titlColorBeige span {
        display: inline-block;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: 700;
        font-style: oblique;
        letter-spacing: 5px;
        text-transform: uppercase;
        font-size: 3.5rem;
        
        background: linear-gradient(
            90deg,
            #5f5909,
            #c5d11a,
            #6a580a,
            #828003,
            #96a80f
        );
        background-size: 300% 100%;
        background-position: 0% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: greenWave 2s linear infinite;
    }

    /* STAGGERED FLOW */
    .h2titlColorBeige span:nth-child(1) { animation-delay: 0s; }
    .h2titlColorBeige span:nth-child(2) { animation-delay: 0.1s; }
    .h2titlColorBeige span:nth-child(3) { animation-delay: 0.2s; }
    .h2titlColorBeige span:nth-child(4) { animation-delay: 0.3s; }
    .h2titlColorBeige span:nth-child(5) { animation-delay: 0.4s; }
    .h2titlColorBeige span:nth-child(6) { animation-delay: 0.5s; }
    .h2titlColorBeige span:nth-child(7) { animation-delay: 0.6s; }

    /* ANIMATION */
    @keyframes greenWave {
        from { background-position: 0% 50%; }
        to { background-position: 300% 50%; }
    }


















    /* FIX FOR CENTERING - ADD THIS */
    .h2titlColorPink {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        margin: 0 auto;
        padding: 20px 0;
    }

    .h2titlColorPink span {
        display: inline-block;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: 700;
        font-style: oblique;
        letter-spacing: 5px;
        text-transform: uppercase;
        font-size: 3.5rem;
        
        background: linear-gradient(
            90deg,
            #5f0948,
            #c334d0,
            #b161d7,
            #820382,
            #9c4bbc
        );
        background-size: 300% 100%;
        background-position: 0% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: greenWave 2s linear infinite;
    }

    /* STAGGERED FLOW */
    .h2titlColorPink span:nth-child(1) { animation-delay: 0s; }
    .h2titlColorPink span:nth-child(2) { animation-delay: 0.1s; }
    .h2titlColorPink span:nth-child(3) { animation-delay: 0.2s; }
    .h2titlColorPink span:nth-child(4) { animation-delay: 0.3s; }
    .h2titlColorPink span:nth-child(5) { animation-delay: 0.4s; }
    .h2titlColorPink span:nth-child(6) { animation-delay: 0.5s; }
    .h2titlColorPink span:nth-child(7) { animation-delay: 0.6s; }

    /* ANIMATION */
    @keyframes greenWave {
        from { background-position: 0% 50%; }
        to { background-position: 300% 50%; }
    }