/* Global styles to prevent saving and inspection */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-app-region: no-drag;
  -webkit-touch-callout: none;
  font-family: 'Quicksand', sans-serif;
}

/* Allow selection in input fields and textareas */
input, textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Allow YouTube iframe interaction */
.youtube-section iframe {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
  pointer-events: auto;
}

body {
  width: 100dvw;
  overflow-x: hidden;
  background-color: black;
}

/* Prevent scrolling when modal is open */
body.modal-open {
  overflow: hidden;
}

/* Blur background when modal is open */
body.modal-open #main-content {
  filter: blur(5px);
  transition: filter 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Quicksand', sans-serif;
}

::-webkit-scrollbar {
  display: none; /* Hides the scrollbar */
}

.scrollbar { 
  position: fixed; 
  top: 0; 
  left: 10;
  bottom: 10;
  right: 10; 
  width: 20px; 
  height: 100%; 
  background: transparent; 
} 

/* Animation classes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounceIn {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  to {
    transform: scale(1);
  }
}

/* Enhanced animations inspired by Tanhaji website */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 15px rgba(255, 215, 0, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes tilt {
  0% {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(1000px) rotateX(1deg) rotateY(1deg);
  }
  100% {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  }
}

@keyframes glow {
  0% {
    box-shadow: 0 0 5px #f59e0b, 0 0 10px #f59e0b;
  }
  50% {
    box-shadow: 0 0 20px #f59e0b, 0 0 30px #f97316;
  }
  100% {
    box-shadow: 0 0 5px #f59e0b, 0 0 10px #f59e0b;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Enhanced animations inspired by Tanhaji website */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 15px rgba(255, 215, 0, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes tilt {
  0% {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(1000px) rotateX(1deg) rotateY(1deg);
  }
  100% {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  }
}

@keyframes glow {
  0% {
    box-shadow: 0 0 5px #f59e0b, 0 0 10px #f59e0b;
  }
  50% {
    box-shadow: 0 0 20px #f59e0b, 0 0 30px #f97316;
  }
  100% {
    box-shadow: 0 0 5px #f59e0b, 0 0 10px #f59e0b;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.6s ease-out forwards;
}

.animate-fadeInUp {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fadeInLeft {
  animation: fadeInLeft 0.6s ease-out forwards;
}

.animate-fadeInRight {
  animation: fadeInRight 0.6s ease-out forwards;
}

.animate-slideInUp {
  animation: slideInUp 0.8s ease-out forwards;
}

.animate-slideInLeft {
  animation: slideInLeft 0.8s ease-out forwards;
}

.animate-slideInRight {
  animation: slideInRight 0.8s ease-out forwards;
}

.animate-zoomIn {
  animation: zoomIn 0.6s ease-out forwards;
}

.animate-bounceIn {
  animation: bounceIn 0.8s ease-out forwards;
}

/* Enhanced animation classes */
.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

.animate-tilt {
  animation: tilt 5s infinite ease-in-out;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

/* Enhanced animation classes */
.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

.animate-tilt {
  animation: tilt 5s infinite ease-in-out;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

/* Staggered animations */
.animate-stagger-1 {
  animation-delay: 0.1s;
}

.animate-stagger-2 {
  animation-delay: 0.2s;
}

.animate-stagger-3 {
  animation-delay: 0.3s;
}

.animate-stagger-4 {
  animation-delay: 0.4s;
}

.animate-stagger-5 {
  animation-delay: 0.5s;
}

.animate-stagger-6 {
  animation-delay: 0.6s;
}

.animate-stagger-7 {
  animation-delay: 0.7s;
}

.animate-stagger-8 {
  animation-delay: 0.8s;
}

.animate-stagger-6 {
  animation-delay: 0.6s;
}

.animate-stagger-7 {
  animation-delay: 0.7s;
}

.animate-stagger-8 {
  animation-delay: 0.8s;
}

.border-hsla {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-hover-btn {
  position: relative;
  margin-left: 2.5rem;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #3b82f6;
  cursor: pointer;
}

.nav-hover-btn::after {
  content: '';
  position: absolute;
  bottom: -0.125rem;
  left: 0;
  height: 2px;
  width: 100%;
  transform-origin: bottom right;
  transform: scaleX(0);
  background-color: #4b5563;
  transition: transform 0.3s ease;
}

.nav-hover-btn:hover::after {
  transform-origin: bottom left;
  transform: scaleX(1);
}

.dark .nav-hover-btn::after {
  background-color: white;
}

.floating-nav {
  background-color: black;
  border-radius: 0.5rem;
  border: 1px solid;
}

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mask-clip-path {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.special-font b {
  font-family: "Zentry";
  font-feature-settings: "ss01" on;
}

.hero-heading {
  text-transform: uppercase;
  font-family: "Quicksand", sans-serif;
  font-weight: 900;
  font-size: 3.75rem;
}

@media (min-width: 640px) {
  .hero-heading {
    right: 2.5rem;
    font-size: 4.5rem;
  }
}

@media (min-width: 768px) {
  .hero-heading {
    font-size: 8rem;
  }
}

@media (min-width: 1024px) {
  .hero-heading {
    font-size: 6rem;
  }
}

.about-subtext {
  position: absolute;
  bottom: -80dvh;
  left: 50%;
  width: 100%;
  max-width: 24rem;
  transform: translateX(-50%);
  text-align: center;
  font-family: "Quicksand", sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

@media (min-width: 768px) {
  .about-subtext {
    max-width: 34rem;
  }
}

.about-image {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 20;
  height: 60vh;
  width: 24rem;
  transform-origin: center;
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 1.5rem;
}

@media (min-width: 768px) {
  .about-image {
    width: 30vw;
  }
}

.animated-title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 4.5rem;
  text-transform: uppercase;
  line-height: 0.8;
  color: white;
  font-family: "Quicksand", sans-serif;
}

@media (min-width: 640px) {
  .animated-title {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

@media (min-width: 768px) {
  .animated-title {
    font-size: 6rem;
  }
}

.animated-word {
  font-family: "Quicksand", sans-serif;
  font-weight: 900;
  opacity: 0;
  transform: translate3d(10px, 51px, -60px) rotateY(60deg) rotateX(-40deg);
  transform-origin: 50% 50% -150px !important;
  will-change: opacity, transform;
}

.bento-tilt_1 {
  position: relative;
  grid-column: span 2 / span 2;
  overflow: hidden;
  border-radius: 0.375rem;
  transition: transform 0.3s ease-out;
}

.bento-tilt_2 {
  position: relative;
  grid-column: span 1 / span 1;
  grid-row: span 1 / span 1;
  overflow: hidden;
  border-radius: 0.375rem;
  transition: transform 0.3s ease-out;
}

.bento-title {
  text-transform: uppercase;
  font-family: "Quicksand", sans-serif;
  font-weight: 900;
}

@media (min-width: 768px) {
  .bento-title {
    font-size: 3.75rem;
  }
}

@media (min-width: 640px) {
  .bento-title {
    font-size: 2.25rem;
  }
}

.story-img-container {
  position: relative;
  height: 90vh;
  width: 100%;
  filter: url("#flt_tag");
}

@media (min-width: 768px) {
  .story-img-container {
    height: 100dvh;
  }
}

.story-img-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: polygon(4% 0, 83% 21%, 100% 73%, 0% 100%);
}

@media (min-width: 768px) {
  .story-img-mask {
    left: 20%;
    top: -10%;
    width: 80%;
  }
}

.story-img-content {
  position: absolute;
  width: 100%;
  height: 50dvh;
  opacity: 1;
  left: 2.5rem;
  top: 4rem;
  transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1);
}

@media (min-width: 768px) {
  .story-img-content {
    height: 100dvh;
    left: 0;
    top: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .story-img-content {
    left: -300px;
    top: -100px;
  }
}

.gallery-img-container {
  width: 16rem;
  height: 16rem;
  overflow: hidden;
  background-color: #c7d2fe;
}

.gallery-img {
  width: 100%;
  height: 100%;
  background-size: cover;
}

.gallery-img-4 {
  border-radius: 0.5rem;
}

@media (min-width: 640px) {
  .gallery-img-4 {
    width: 20rem;
    height: 20rem;
  }
}

@media (min-width: 768px) {
  .gallery-img-4 {
    height: 24rem;
    width: 25rem;
  }
}

.sword-man-clip-path {
  clip-path: polygon(16% 0, 89% 15%, 75% 100%, 0 97%);
}

.contact-clip-path-1 {
  clip-path: polygon(25% 0%, 74% 0, 69% 64%, 34% 73%);
}

.contact-clip-path-2 {
  clip-path: polygon(29% 15%, 85% 30%, 50% 100%, 10% 64%);
}

.indicator-line {
  height: 1px;
  width: 0.25rem;
  border-radius: 0.125rem;
  background-color: white;
  transition: all 0.2s ease-in-out;
}

.indicator-line.active {
  animation: indicator-line 0.5s ease infinite;
  animation-delay: calc(var(--animation-order) * 0.1s);
}

@keyframes indicator-line {
  0% {
    height: 4px;
    transform: translateY(-0px);
  }
  50% {
    height: 16px;
    transform: translateY(-4px);
  }
  100% {
    height: 4px;
    transform: translateY(-0px);
  }
}

/* From Uiverse.io by G4b413l */
/* https://uiverse.io/G4b413l/tidy-walrus-92 */
.three-body {
  --uib-size: 35px;
  --uib-speed: 0.8s;
  --uib-color: #FFD700;
  position: relative;
  display: inline-block;
  height: var(--uib-size);
  width: var(--uib-size);
  animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
}

.three-body__dot {
  position: absolute;
  height: 100%;
  width: 30%;
}

.three-body__dot:after {
  content: "";
  position: absolute;
  height: 0%;
  width: 100%;
  padding-bottom: 100%;
  background-color: var(--uib-color);
  border-radius: 50%;
}

.three-body__dot:nth-child(1) {
  bottom: 5%;
  left: 0;
  transform: rotate(60deg);
  transform-origin: 50% 85%;
}

.three-body__dot:nth-child(1)::after {
  bottom: 0;
  left: 0;
  animation: wobble1 var(--uib-speed) infinite ease-in-out;
  animation-delay: calc(var(--uib-speed) * -0.3);
}

.three-body__dot:nth-child(2) {
  bottom: 5%;
  right: 0;
  transform: rotate(-60deg);
  transform-origin: 50% 85%;
}

.three-body__dot:nth-child(2)::after {
  bottom: 0;
  left: 0;
  animation: wobble1 var(--uib-speed) infinite calc(var(--uib-speed) * -0.15)
    ease-in-out;
}

.three-body__dot:nth-child(3) {
  bottom: -5%;
  left: 0;
  transform: translateX(116.666%);
}

.three-body__dot:nth-child(3)::after {
  top: 0;
  left: 0;
  animation: wobble2 var(--uib-speed) infinite ease-in-out;
}

@keyframes spin78236 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes wobble1 {
  0%,
  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
  }

  50% {
    transform: translateY(-66%) scale(0.65);
    opacity: 0.8;
  }
}

@keyframes wobble2 {
  0%,
  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
  }

  50% {
    transform: translateY(66%) scale(0.65);
    opacity: 0.8;
  }
}

/* Button animation styles */
.group-hover\:translate-y-\[160\%\] {
  transform: translateY(160%);
}

.group-hover\:skew-y-12 {
  transform: skewY(12deg);
}

.translate-y-0 {
  transform: translateY(0);
}

.skew-y-0 {
  transform: skewY(0);
}

.transition {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.duration-700 {
  transition-duration: 700ms;
}

.duration-1000 {
  transition-duration: 1000ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

.backdrop-blur {
  backdrop-filter: blur(8px);
}

.z-50 {
  z-index: 50;
}

.z-40 {
  z-index: 40;
}

.z-30 {
  z-index: 30;
}

.z-20 {
  z-index: 20;
}

.z-10 {
  z-index: 10;
}

.z-0 {
  z-index: 0;
}

/* Responsive height for gallery */
.h-auto {
  height: auto;
}

@media (min-width: 768px) {
  .md\:h-\[800px\] {
    height: 800px;
  }
}

/* Blog auto-scroll indicator */
@keyframes autoScroll {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* Enhanced shimmer effect for buttons */
.shimmer-effect {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Blog hover effect */
.blog-posts-container.hovered #auto-scroll-indicator {
  width: 0% !important;
  animation: none !important;
}

/* Read more button animation */
.group-hover\:translate-x-1 {
  transform: translateX(0.25rem);
  transition: transform 0.2s ease;
}

.group:hover .group-hover\:translate-x-1 {
  transform: translateX(0.25rem);
}

/* Modal styles */
#image-modal {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

#image-modal.hidden {
  display: none;
}

/* Attractive modal design */
.image-modal-container {
  position: relative;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.image-modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(30, 41, 59, 0.9);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.image-modal-content::before {
  display: none;
}

.modal-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

#modal-image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
}

#modal-image:hover {
  transform: scale(1.02);
}

/* Gallery item enhancements */
.gallery-item {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
}

.gallery-item:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

/* Scroll card enhancements */
.scroll-card {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
}

.scroll-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 15px 35px rgba(255, 215, 0, 0.3);
}

#close-modal {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f59e0b, #f97316);
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
  transition: all 0.3s ease;
}

#close-modal:hover {
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
}

#modal-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  padding: 12px 24px;
  border-radius: 30px;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Navigation buttons for image gallery */
.modal-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  z-index: 60;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.modal-nav-btn:hover {
  background: linear-gradient(45deg, #f59e0b, #f97316);
  transform: translateY(-50%) scale(1.1);
}

.modal-nav-btn.prev {
  left: 20px;
}

.modal-nav-btn.next {
  right: 20px;
}

.modal-counter {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 16px;
  border-radius: 20px;
  z-index: 60;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.modal-image-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px 100px 20px;
}

.modal-image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Line clamp for blog excerpts */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Enhanced view card animation */
.view-card {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
}

.view-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 35px rgba(255, 215, 0, 0.3);
}

.hidden {
  display: none;
}

/* Auto-scroll animation */
@keyframes autoScroll {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

/* Enhanced contact detail animation */
.contact-detail {
  transition: all 0.3s ease;
}

.contact-detail:hover {
  transform: translateX(10px);
}

/* Blog post styling */
.blog-post {
  transition: all 0.3s ease;
}

/* Enhanced button animations */
.animated-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

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

.animated-button:hover::before {
  left: 100%;
}

.blog-post:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Enhanced blog post animation */
.blog-post {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
}

.blog-post:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

/* Enhanced blog post animation */
.blog-post {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
}

.blog-post:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

/* Read more button styling */
.read-more-btn {
  background: transparent;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.read-more-btn:hover {
  background: rgba(255, 215, 0, 0.1);
  transform: translateX(2px);
}

/* Enhanced form input animations */
.form-input {
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.form-input:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
  transform: translateY(-2px);
}

/* Modal styles */
#image-modal {
  background: radial-gradient(circle, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.95) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#image-modal:not(.hidden) {
  opacity: 1;
}

#image-modal.hidden {
  display: none;
}

/* Attractive modal design */
.image-modal-container {
  position: relative;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.image-modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.7);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(255, 215, 0, 0.3),
              0 0 30px rgba(255, 215, 0, 0.2);
  border: 1px solid rgba(255, 215, 0, 0.2);
}

.image-modal-content::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #f59e0b, #f97316, #f59e0b, #f97316);
  z-index: -1;
  border-radius: 22px;
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.modal-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(0, 0, 0, 0.3);
}

#modal-image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
}

#modal-image:hover {
  transform: scale(1.02);
}

#close-modal {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f59e0b, #f97316);
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
  transition: all 0.3s ease;
}

#close-modal:hover {
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
}

#modal-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  color: white;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  padding: 12px 24px;
  border-radius: 30px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 215, 0, 0.3);
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: transform 0.4s ease 0.3s, opacity 0.4s ease 0.3s;
}

#image-modal:not(.hidden) #modal-caption {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Navigation buttons for image gallery */
.modal-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  z-index: 60;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.modal-nav-btn:hover {
  background: linear-gradient(45deg, #f59e0b, #f97316);
  transform: translateY(-50%) scale(1.1);
}

.modal-nav-btn.prev {
  left: 20px;
}

.modal-nav-btn.next {
  right: 20px;
}

.modal-counter {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 16px;
  border-radius: 20px;
  z-index: 60;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 215, 0, 0.3);
  transform: translateX(-20px);
  opacity: 0;
  transition: all 0.4s ease 0.3s;
}

#image-modal:not(.hidden) .modal-counter {
  transform: translateX(0);
  opacity: 1;
}

.modal-image-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px 100px 20px;
}

.modal-image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}