/*
Theme Name: Shakundala
Theme URI: http://example.com/
Author: Your Name
Author URI: http://example.com/
Description: Custom theme converted from static site
Version: 1.0
*/

/* Add your custom styles below or import them from your existing CSS */


body {
     font-family: 'Inter', sans-serif;
}

.hero-gradient {
     background: linear-gradient(135deg,
               rgba(139, 92, 246, 0.1) 0%,
               rgba(125, 211, 252, 0.1) 25%,
               rgba(196, 181, 253, 0.1) 50%,
               rgba(167, 243, 208, 0.1) 75%,
               rgba(254, 243, 199, 0.1) 100%);
}

.glass-effect {
     backdrop-filter: blur(20px);
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
}

.hover-lift {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.btn-divine {
     background: linear-gradient(135deg, #8B5CF6, #7DD3FC);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
}

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

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

.btn-divine:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}

.service-card {
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
     backdrop-filter: blur(20px);
}

.service-card:hover {
     transform: translateY(-12px) scale(1.02);
     box-shadow: 0 25px 50px rgba(139, 92, 246, 0.2);
}

.floating-element {
     animation: float 6s ease-in-out infinite;
}

.intersection-observer {
     opacity: 0;
     transform: translateY(50px);
     transition: all 0.8s ease-out;
}

.intersection-observer.visible {
     opacity: 1;
     transform: translateY(0);
}

.floating-social-bar {
     position: fixed;
     left: 30px;
     top: 50%;
     transform: translateY(-50%);
     z-index: 40;
     background: rgba(255, 255, 255, 0.4);
     backdrop-filter: blur(16px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 25px;
     padding: 8px 6px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
     transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     width: 50px;
     overflow: hidden;
     will-change: width, padding, transform, box-shadow;
}

.floating-social-bar:hover {
     transform: translateY(-50%) scale(1.01);
     box-shadow: 0 15px 40px rgba(139, 92, 246, 0.3);
     width: 68px;
     padding: 12px 10px;
}

.social-icon {
     display: block;
     width: 38px;
     height: 38px;
     margin: 6px auto;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     position: relative;
     overflow: hidden;
     will-change: width, height, margin;
}

.floating-social-bar:hover .social-icon {
     width: 44px;
     height: 44px;
     margin: 8px auto;
}

.social-icon::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     transform: scale(0);
     transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     z-index: -1;
}

.social-icon:hover::before {
     transform: scale(1);
}

.social-icon:hover {
     transform: scale(1.08);
     color: white !important;
}

.social-icon.facebook::before {
     background: linear-gradient(135deg, #3b5998, #8b9dc3);
}

.social-icon.instagram::before {
     background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
}

.social-icon.twitter::before {
     background: linear-gradient(135deg, #1da1f2, #0d8bd9);
}

.social-icon.youtube::before {
     background: linear-gradient(135deg, #ff0000, #cc0000);
}

.social-icon.linkedin::before {
     background: linear-gradient(135deg, #0077b5, #005885);
}

.social-icon.email::before {
     background: linear-gradient(135deg, #8B5CF6, #7DD3FC);
}

@media (max-width: 768px) {
     .floating-social-bar {
          left: 15px;
          width: 45px;
          padding: 6px 4px;
     }

     .floating-social-bar:hover {
          width: 58px;
          padding: 8px 6px;
     }

     .social-icon {
          width: 34px;
          height: 34px;
          margin: 4px auto;
     }

     .floating-social-bar:hover .social-icon {
          width: 40px;
          height: 40px;
          margin: 6px auto;
     }
}

/* Back to Top Button */
#backToTop {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#backToTop.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
}

#backToTop:hover {
     transform: translateY(-2px) scale(1.1);
     box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4);
}

@media (max-width: 768px) {
     #backToTop {
          bottom: 20px;
          right: 20px;
          width: 48px;
          height: 48px;
     }
}