/* GOOGLE FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


:root {
      --emerald-green: #257d18;
      --gold-accent: #d4af37;
      --pure-white: #ffffff;
      --dark-emerald: #13460c;
    }

  body {
      background-color: var(--emerald-green);
      color: var(--pure-white);
      font-family: 'Plus Jakarta Sans', sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* =========================================================
       ROTATING TECH CIRCLES BACKDROP (MATCHING THE IMAGE STYLE)
    ========================================================= */
    .tech-backdrop {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 220px;
      overflow: hidden;
      z-index: 0;
      pointer-events: none;
    }

    /* Left Prominent Circular HUD Rings */
    .hud-circle-left {
      position: absolute;
      top: -80px;
      left: -80px;
      width: 320px;
      height: 320px;
      border-radius: 50%;
    }

    /* Right Faded Circular HUD Rings */
    .hud-circle-right {
      position: absolute;
      top: -100px;
      right: -80px;
      width: 340px;
      height: 340px;
      border-radius: 50%;
      opacity: 0.35;
    }

    /* Concentric Ring Layers */
    .ring-outer {
      position: absolute;
      inset: 0;
      border: 3px dashed var(--gold-accent);
      border-radius: 50%;
      animation: spinClockwise 25s linear infinite;
    }

    .ring-mid {
      position: absolute;
      inset: 22px;
      border: 2px solid var(--pure-white);
      border-top-color: transparent;
      border-bottom-color: transparent;
      border-radius: 50%;
      animation: spinCounter 15s linear infinite;
    }

    .ring-inner {
      position: absolute;
      inset: 48px;
      border: 4px dashed var(--emerald-green);
      outline: 2px solid var(--gold-accent);
      border-radius: 50%;
      animation: spinClockwise 10s linear infinite;
    }

    .ring-core {
      position: absolute;
      inset: 80px;
      border: 1px double var(--pure-white);
      border-radius: 50%;
      animation: pulseGlow 3s ease-in-out infinite alternate;
    }

    /* =========================================================
       KEYFRAME ANIMATIONS
    ========================================================= */
    @keyframes spinClockwise {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes spinCounter {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(-360deg); }
    }

    @keyframes pulseGlow {
      0% { opacity: 0.3; transform: scale(0.96); }
      100% { opacity: 1; transform: scale(1.04); }
    }

    @keyframes goldGlow {
      0%, 100% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); }
      50% { box-shadow: 0 0 25px rgba(255, 255, 255, 0.8), 0 0 15px rgba(212, 175, 55, 0.9); }
    }







.tech-backdrop{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:2;
    pointer-events:none;
}


    /* =========================================================
       FLOATING GLASS NAVBAR CONTAINER
    ========================================================= */
    .navbar-wrapper {
      position: relative;
      z-index: 10;
      padding-top: 20px;
    }

    .custom-navbar {
      background: rgba(20, 73, 13, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 2px solid var(--gold-accent);
      border-radius: 24px;
      padding: 0.8rem 1.8rem;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    }

    /* 1. Left Image Logo Badge */
    .navbar-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }

    .logo-badge {
      width: 50px;
      height: 50px;
      background: var(--gold-accent);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 6px;
      animation: goldGlow 4s infinite;
      transition: transform 0.4s ease, background 0.4s ease;
    }

    .logo-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .navbar-brand:hover .logo-badge {
      transform: rotate(18deg) scale(1.1);
      background: var(--pure-white);
    }

    /* 2. Center Navigation Links */
    .nav-item {
      margin: 0 4px;
    }

    .nav-link {
      color: var(--pure-white) !important;
      font-weight: 600;
      font-size: 0.95rem;
      padding: 0.6rem 1.3rem !important;
      border-radius: 16px;
      position: relative;
      transition: all 0.3s ease;
      z-index: 1;
    }

    .nav-link::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 16px;
      background: var(--gold-accent);
      opacity: 0;
      transform: translateY(100%);
      transition: all 0.3s ease;
      z-index: -1;
    }

    .nav-link:hover {
      color: var(--emerald-green) !important;
      transform: translateY(-2px);
    }

    .nav-link:hover::before,
    .nav-link.active::before {
      opacity: 1;
      transform: translateY(0);
    }

    .nav-link.active {
      color: var(--emerald-green) !important;
      font-weight: 800;
    }

    /* 3. Right CTA Button */
    .btn-custom {
      position: relative;
      background: var(--gold-accent);
      color: var(--emerald-green);
      border: 2px solid var(--pure-white);
      padding: 0.65rem 1.8rem;
      border-radius: 16px;
      font-weight: 800;
      letter-spacing: 0.5px;
      overflow: hidden;
      transition: all 0.4s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .btn-custom::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
      transition: left 0.6s ease;
    }

    .btn-custom:hover::before {
      left: 100%;
    }

    .btn-custom:hover {
      background: var(--pure-white);
      color: var(--emerald-green);
      border-color: var(--gold-accent);
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
    }

    /* Mobile Menu Toggler */
    .navbar-toggler {
      border: 2px solid var(--gold-accent);
      background: var(--emerald-green);
      border-radius: 12px;
    }
    
    .navbar-toggler-icon {
      filter: invert(1);
    }
    
    
    
    
    
    
    
    
    
    
    :root {
    --brand-green: #257d18;
    --brand-gold: #d4af37;
    --brand-white: #ffffff;
  }

  .split-slider-section {
    background-color: #0d1a0b;
    position: relative;
    overflow: hidden;
  }

  .min-vh-75 {
    min-height: 70vh;
    padding: 30px 0;
  }

  /* Center Full Image Display Box */
  .center-img-frame {
    width: 100%;
   height: 900px;
    border-radius: 20px;
    border: 3px solid var(--brand-gold);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7),
                0 0 25px rgba(212, 175, 55, 0.25);
    background-color: #000;
  }

  .full-visible-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
  }

  .center-img-frame:hover .full-visible-img {
    transform: scale(1.04);
  }

  /* Left and Right Glass Cards */
  .glass-side-card {
    background: rgba(37, 125, 24, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid var(--brand-gold);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    height: 100%;
  }

  .bday-card-theme {
    background: rgba(37, 125, 24, 0.45);
  }

  /* Colors */
  .text-gold { color: var(--brand-gold) !important; }
  .bg-gold { background-color: var(--brand-gold) !important; }
  .bg-green { background-color: var(--brand-green) !important; }
  .border-gold { border-color: var(--brand-gold) !important; }

  /* Navigation Arrow Controls */
  .custom-arrow-btn {
    width: 50px;
    height: 50px;
    background-color: var(--brand-green);
    border: 2px solid var(--brand-gold);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    z-index: 10;
    transition: all 0.3s ease;
    color: var(--brand-gold);
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel-control-prev.custom-arrow-btn { left: 1px; }
  .carousel-control-next.custom-arrow-btn { right: 15px; }

  .custom-arrow-btn:hover {
    background-color: var(--brand-gold);
    color: #000;
    box-shadow: 0 0 20px var(--brand-gold);
    transform: translateY(-50%) scale(1.1);
  }

  /* Indicators */
  .custom-indicators {
    bottom: -10px;
  }

  .custom-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--brand-white);
    opacity: 0.4;
    border: none;
    margin: 0 6px;
    transition: all 0.3s ease;
  }

  .custom-indicators .active {
    width: 35px;
    border-radius: 10px;
    background-color: var(--brand-gold);
    opacity: 1;
  }

  @media (max-width: 991px) {
    .center-img-frame {
      height: 350px;
    }
  }
  
  
  
  
  
  
  
  @media (max-width: 991px) {

  .center-img-frame {
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
  }

  .full-visible-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* Birthday Vertical Moving Animation */

.birthday-scroll{
    height:430px;
    overflow:hidden;
    position:relative;
}

.birthday-track{
    display:flex;
    flex-direction:column;
    animation:birthdayMove 14s linear infinite;
}

.birthday-scroll:hover .birthday-track{
    animation-play-state:paused;
}

.birthday-item{
    display:flex;
    align-items:center;
    gap:15px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(212,175,55,.35);
    border-radius:18px;
    padding:12px;
    margin-bottom:15px;
    transition:.3s;
}

.birthday-item:hover{
    transform:translateX(8px);
    background:rgba(212,175,55,.18);
}

.birthday-img{
    width:70px;
    height:70px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #d4af37;
    flex-shrink:0;
}

@keyframes birthdayMove{

    0%{
        transform:translateY(0);
    }

    100%{
        transform:translateY(-50%);
    }

}

@media(max-width:991px){

    .birthday-scroll{
        height:320px;
    }

}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  <style>

/* MAIN SECTION ENTRY */

.about-section .row{
    animation: luxuryReveal 1.5s ease;
}


@keyframes luxuryReveal{

0%{
    opacity:0;
    transform:translateY(60px);
}

100%{
    opacity:1;
    transform:translateY(0);
}

}





/* PROCESS CARDS PREMIUM HOVER */


.about-section .card.border-0.shadow-lg.rounded-4{

    position:relative;
    overflow:hidden;
    transition:all .6s cubic-bezier(.25,.8,.25,1);

}



.about-section .card.border-0.shadow-lg.rounded-4::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(212,175,55,.25),
transparent
);

transition:.8s;

}



.about-section .card.border-0.shadow-lg.rounded-4:hover::before{

left:100%;

}



.about-section .card.border-0.shadow-lg.rounded-4:hover{

transform:
translateY(-12px)
rotateX(5deg);

box-shadow:
0 30px 60px rgba(37,125,24,.25)!important;

}







/* NUMBER ANIMATION */


.rounded-circle{

transition:.6s;

}



.process-item:hover .rounded-circle,
.card:hover .rounded-circle{

transform:
scale(1.15)
rotate(360deg);

background:#257d18!important;

color:#fff!important;

}





/* IMAGE PREMIUM FLOAT */


.about-section img{

transition:1s;

animation:
premiumFloat 5s infinite ease-in-out;

}



@keyframes premiumFloat{


0%,100%{

transform:
translateY(0)
rotate(0deg);

}


50%{

transform:
translateY(-20px)
rotate(2deg);

}


}






/* IMAGE HOVER */


.about-section img:hover{

transform:
scale(1.08)
rotate(-3deg);

}







/* FEATURE BOX */


.card.shadow-sm.rounded-4{

transition:.5s;

}



.card.shadow-sm.rounded-4:hover{

transform:
translateY(-15px)
scale(1.05);

background:#257d18;

color:white;

box-shadow:
0 20px 40px rgba(212,175,55,.35)!important;

}





/* ICON ROTATE */


.card.shadow-sm.rounded-4 i{

transition:.5s;

}



.card.shadow-sm.rounded-4:hover i{

transform:
rotateY(360deg)
scale(1.3);

color:#d4af37!important;

}





/* BUTTON PREMIUM */


.btn{

overflow:hidden;

transition:.5s;

}



.btn:hover{

transform:
translateY(-8px);

background:#d4af37!important;

box-shadow:
0 20px 40px rgba(212,175,55,.45);

}


/* Process Cards Green Border */

.about-section .card.border-0.shadow-lg.rounded-4{

    border:2px solid #257d18 !important;

}


img.no-animation{
    animation:none !important;
    transform:none !important;
    transition:none !important;
}

</style>



<style>

/* Process Cards Green Border */

.about-section .card.border-0.shadow-lg.rounded-4{

    border:2px solid #257d18 !important;

}


/* Right Image Main Card Border */

.about-section .card.border-0.shadow-lg.rounded-5{

    border:3px solid #257d18 !important;

}


/* Small Feature Cards Border */

.about-section .card.shadow-sm.rounded-4{

    border:2px solid #257d18 !important;

}


</style>







<style>

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.15);
}

100%{
transform:scale(1);
}

}

</style>




<style>

.product-card{
    transition:.5s;
}

.product-card:hover{
    transform:translateY(-15px);
}


.product-ribbon{

    position:absolute;
    top:22px;
    right:-38px;

    width:150px;
    padding:10px 0;

    background:#d4af37;
    color:#ffffff;

    text-align:center;
    font-size:13px;
    font-weight:800;
    letter-spacing:1px;

    transform:rotate(45deg);

    box-shadow:0 8px 20px rgba(212,175,55,.45);

    z-index:5;

}


</style>












.berry-section{

background:#ffffff;

}



.berry-title{

color:#257d18;

}



.gold-line{

width:100px;

height:5px;

background:#d4af37;

border-radius:20px;

}



.berry-heading{

color:#257d18;

}



.berry-text{

color:#257d18;

}



.berry-card{

background:#ffffff;

transition:0.5s;

}



.berry-card:hover{

transform:translateY(-15px);

}



.berry-icon{

width:90px;

height:90px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#257d18;

color:#ffffff;

font-size:40px;

animation:berryMove 3s infinite;

}



.berry-card h4{

color:#257d18;

font-weight:700;

}



.berry-card h5{

color:#d4af37;

font-weight:600;

}



.berry-card p{

color:#257d18;

}



@keyframes berryMove{

0%{

transform:scale(1);

}


50%{

transform:scale(1.1);

}


100%{

transform:scale(1);

}

}

/* Heading */

.heading-badge{
    background:#d4af37;
    color:#ffffff;
    font-size:14px;
    letter-spacing:1px;
}

.berry-title{
    color:#257d18;
    font-weight:700;
}

.berry-title span{
    color:#d4af37;
}

.berry-subtitle{
    color:#257d18;
    position:relative;
    display:inline-block;
    padding-bottom:12px;
}

.berry-subtitle::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:80px;
    height:4px;
    background:#d4af37;
    border-radius:10px;
}

.berry-description{
    color:#257d18;
    max-width:720px;
    margin:auto;
    line-height:1.9;
    font-size:17px;
}

/* Cards */

.berry-card{
    background:#ffffff;
    border:2px solid #d4af37;
    border-radius:20px;
    transition:.4s;
}

.berry-card:hover{
    border-color:#257d18;
    transform:translateY(-8px);
}

/* Icon Circle */



/* Change icon background and color on card hover */

.berry-card:hover .berry-icon{
    background:#d4af37;
    color:#ffffff;
    border-color:#257d18;
    transform:rotate(360deg) scale(1.1);
}




/*=====================================
        PREMIUM FOOTER
======================================*/

.footer-main{
    background:#257d18;
    position:relative;
      border-top:4px solid #d4af37;
}

/*-------------------------------
        Cards
--------------------------------*/

.footer-card{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    backdrop-filter:blur(15px);
    border-radius:25px;
    padding:35px;
    height:100%;
    transition:.5s;
    overflow:hidden;
    position:relative;
}

.footer-card::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    right:-70px;
    top:-70px;
    transition:.6s;
}

.footer-card:hover{
    transform:translateY(-12px);
    box-shadow:0 20px 45px rgba(0,0,0,.30);
}

.footer-card:hover::before{
    transform:scale(1.4);
}

/*-------------------------------
        Titles
--------------------------------*/

.footer-title{
    color:#FFD54F;
    font-weight:700;
    margin-bottom:25px;
    position:relative;
}

.footer-title::after{
    content:"";
    position:absolute;
    width:60px;
    height:4px;
    background:#FFD54F;
    left:0;
    bottom:-10px;
    border-radius:20px;
    transition:.5s;
}

.footer-card:hover .footer-title::after{
    width:90px;
}

/*-------------------------------
        Paragraph
--------------------------------*/

.footer-card p{
    color:#f5f5f5;
    line-height:1.9;
}

/*-------------------------------
        Links
--------------------------------*/

.footer-card ul{
    margin:0;
    padding:0;
}

.footer-card ul li{
    list-style:none;
    margin-bottom:18px;
}

.footer-card ul li a{
    color:#fff;
    text-decoration:none;
    transition:.4s;
    display:inline-block;
    position:relative;
}

.footer-card ul li a::before{
    content:"➜";
    color:#FFD54F;
    margin-right:10px;
}

.footer-card ul li a:hover{
    color:#FFD54F;
    transform:translateX(10px);
}

/*-------------------------------
        Benefits
--------------------------------*/

.footer-card ul li{
    color:#fff;
    transition:.4s;
}

.footer-card ul li:hover{
    color:#FFD54F;
    transform:translateX(8px);
}

/*-------------------------------
      Social Icons
--------------------------------*/

.social-icon{
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#FFD54F;
    color:#257d18;
    text-decoration:none;
    transition:.5s;
    font-size:20px;
}

.social-icon:hover{
    background:#fff;
    color:#257d18;
    transform:translateY(-10px) rotate(360deg);
    box-shadow:0 12px 25px rgba(255,255,255,.4);
}

/*-------------------------------
      Contact Icons
--------------------------------*/

.icon-box{
    width:55px;
    height:55px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#FFD54F;
    color:#257d18;
    font-size:22px;
    flex-shrink:0;
    transition:.5s;
}

.contact-card:hover .icon-box{
    transform:rotate(360deg);
    background-color:#ffffff;
}

.contact-card small{
    color:#FFD54F;
    font-weight:600;
}

.contact-card h6{
    color:#fff;
    margin-top:4px;
    line-height:1.6;
}

/*-------------------------------
        Bottom
--------------------------------*/

.footer-bottom{
    margin-top:70px;
    border-top:1px solid rgba(255,255,255,.15);
    padding:25px 0;
    background:rgba(0,0,0,.15);
    color:#fff;
}

/*-------------------------------
        Logo
--------------------------------*/

.footer-card img{
    transition:.6s;
}

.footer-card:hover img{
    transform:scale(1.08) rotate(-3deg);
}

/*-------------------------------
        Animation
--------------------------------*/

.footer-card{
    animation:upDown 4s ease-in-out infinite;
}

@keyframes upDown{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-6px);
}

100%{
transform:translateY(0px);
}

}

/*-------------------------------
      Responsive
--------------------------------*/

@media(max-width:991px){

.footer-card{
margin-bottom:25px;
}

.footer-bottom{
text-align:center;
}

}