@tailwind base;
@tailwind components;
@tailwind utilities;

html {
   scroll-behavior: smooth;
}
.social-buttons {
   position: fixed;
   bottom: 20px;
   right: 20px;
   display: flex;
   flex-direction: column-reverse;
   gap: 7px;
}

.btn {
   width: 55px;
   height: 55px;
   border-radius: 50%;
   border: none;
   color: white;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.btn:hover {
   transform: scale(1.1);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.btn-toggle {
   background: linear-gradient(45deg, #FF8C00, #FF2D55);
   transition: transform 0.3s ease;
   z-index: 99999;
}

.btn-toggle.active {
   transform: rotate(45deg);
}

.btn-instagram {
   background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
   transform: translateY(20px);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

.btn-telegram {
   background: linear-gradient(45deg, #0088cc, #00B2FF);
   transform: translateY(20px);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

.btn-instagram.show {
   transform: translateY(0);
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}

.btn-telegram.show {
   transform: translateY(0);
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}

.btn i {
   font-size: 24px;
}

/* Staggered animation delay */
.btn-telegram.show {
   transition: all 0.3s ease 0.1s;
}

.btn-instagram.show {
   transition: all 0.3s ease 0.2s;
}

/* Styles for active page links */
.active-mobile-link {
   color: #2563eb !important;
   background-color: #f3f4f6;
}

.active-desktop-nav-link {
   color: #2563eb !important
}