/* Color Palette - Professional Abstract */
:root {
    --primary-color: #EFE9E3; /* Light Beige - Main accent */
    --primary-rgb: 239, 233, 227;
    --secondary-color: #F9F8F6; /* Off-White - Background */
    --secondary-rgb: 249, 248, 246;
    --text-color: #333333; /* Dark gray for text contrast */
}

/* Background Image */
body {
    background: linear-gradient(to bottom, #F9F8F6, #EFE9E3);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

/* Top Message Bar */
.bg-primary {
    background-color: #0d6efd !important;
}
.bg-primary p {
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    font-weight: 500;
}
@media (max-width: 768px) {
    .bg-primary p {
        font-size: 0.85rem;
    }
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #303030!important;;
   /* color: var(--bs-navbar-active-color)!important;*/
    font-weight: 400;
    font-size:large;
    
}

/* Highlighted Refill Button */
.nav-refill-btn {
    background-color: #ff6b6b !important;
    color: white !important;
    padding: 8px 18px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
    transition: all 0.3s ease;
}

.nav-refill-btn:hover {
    background-color: #ff5252 !important;
    box-shadow: 0 6px 16px rgba(255, 107, 107, 0.5);
    transform: translateY(-2px);
}
.navbar-toggler-icon {
    filter: saturate(100%) brightness(0%) drop-shadow(0 0 7px rgb(133, 119, 119));
   }



/* ICON */

i{ 
    background: none !important;
    border-radius: 50% !important;
}

.nav-link.active:hover{
    background-color: #EFE9E3; 
    color: #333333 !important;
    border-radius: 7%;
    box-shadow: 0 4px 8px rgba(75, 46, 43, 0.2);
    transition: all 0.3s ease;
}
.bi:hover {color: var(--secondary-color);}

/* BLOG & CARD */
/*#bo:hover{box-shadow: 10px 10px 20px black ,-10px -10px 20px black; }*/
#bo:hover{box-shadow: 10px 10px 5px rgba(var(--primary-rgb), 0.3) ;}

/* Service Cards */
.service-primary {
    background: var(--primary-color);
    color: var(--secondary-color);
}
.service-secondary {
    background: var(--secondary-color);
    color: var(--primary-color);
}

/* Action Card Colors */
.card-color-1 {
    background-color: #E3D8CE;
    transition: all 0.3s ease;
}
.card-color-1:hover {
    box-shadow: 8px 8px 16px rgba(75, 46, 43, 0.15) !important;
    transform: translateY(-2px);
}

.card-color-2 {
    background-color: #D9E0E8;
    transition: all 0.3s ease;
}
.card-color-2:hover {
    box-shadow: 8px 8px 16px rgba(75, 46, 43, 0.15) !important;
    transform: translateY(-2px);
}

.card-color-3 {
    background-color: #E0D8CC;
    transition: all 0.3s ease;
}
.card-color-3:hover {
    box-shadow: 8px 8px 16px rgba(75, 46, 43, 0.15) !important;
    transform: translateY(-2px);
}


/* For carousel */
.c-item .c-img{
    display: block;
    max-width: 100%;
    height: 530px !important;
}


.carousel-item img {
  max-height: 200vh; /* 80% of viewport height */
  object-fit: contain; /* show full image without cropping */
}


/* ---------- LOGO ANIMATION START ---------- 

        #img_anim_1{
          animation-name: swing;
          animation-duration: 4s;
          animation-iteration-count: infinite;
          animation-direction:normal;
          animation-play-state: running;
        }
       @keyframes swing{
          50% {transform: rotatey(180deg);}
        }. -- */
      /*----------
       #img_anim_2{
          animation-name: swi;
          animation-duration: 4s;
          animation-iteration-count: infinite;
          animation-direction:normal;
          animation-play-state: running; 
        }
                  --------- */
      /* @keyframes swi{
          50%{transform: scale(0.5,0.5);}
        }*/
/* --------- LOGO ANIMATION END ---------   

        #pic_anim{
          animation-name: slideLeft;
          animation-duration: 4s;
          animation-timing-function: linear;
          animation-fill-mode:backwards; 
          animation-timeline: view();
          animation-range: entry 0% entry 150%;
        }
       @keyframes slideLeft{
            0%{transform: scale(0.5,0.5);}
          50%{transform: scale(0.5,0.5);}
       }. 
       */