/* Importing 'Noto Sans Bengali' from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@300;400;500;600;700&display=swap');

/* Setting Bengali font as default for body */
body {
    font-family: 'Noto Sans Bengali', sans-serif;
}

/* Light patterned background for hero section */
.hero-pattern {
    background-color: #f3f4f6;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2315630d' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Enables smooth scrolling */
.scroll-smooth {
    scroll-behavior: smooth;
}

/* Controls transition speed, animation smoothness, and dot colors */
:root {
    /* Duration of slide animation */
    --carousel-transition-duration: 1000ms;

    /* Easing style for smoother animation */
    --carousel-timing-function: ease-in-out;

    /* Color of inactive navigation dots */
    --dot-inactive-color: #d1d5db;

    /* Color of active navigation dot */
    --dot-active-color: #15803d;
}

/* === Carousel Animation === */

/* Perspective for 3D effect */
.has-perspective {
    perspective: 1200px;
}

/* Base style for each carousel item */
.carousel-item {
    transition: transform var(--carousel-transition-duration) var(--carousel-timing-function),
        opacity var(--carousel-transition-duration) var(--carousel-timing-function);
    opacity: 0;
    transform: scale(1);
    transform-style: preserve-3d;
}

/* Active (visible) slide style */
.carousel-item.active {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1) rotateY(0) rotateX(0);
    z-index: 10;
}

/* Slide entry/exit transitions (set via JavaScript) */
.carousel-item.enter-from-right {
    transform: translateX(100%);
}

.carousel-item.exit-to-left {
    transform: translateX(-100%);
}

.carousel-item.enter-from-left {
    transform: translateX(-100%);
}

.carousel-item.exit-to-right {
    transform: translateX(100%);
}

.carousel-item.enter-from-bottom {
    transform: translateY(100%);
}

.carousel-item.exit-to-top {
    transform: translateY(-100%);
}

.carousel-item.enter-from-top {
    transform: translateY(-100%);
}

.carousel-item.exit-to-bottom {
    transform: translateY(100%);
}

.carousel-item.enter-zoom-in {
    transform: scale(0.5);
}

.carousel-item.exit-zoom-out {
    transform: scale(1.5);
}

.carousel-item.enter-fade {
    opacity: 0;
}

.carousel-item.exit-fade {
    opacity: 0;
}

.carousel-item.enter-rotate-scale {
    transform: scale(0.3) rotate(-360deg);
}

.carousel-item.exit-rotate-scale {
    transform: scale(0.3) rotate(360deg);
    opacity: 0;
}

.carousel-item.enter-flip-right {
    transform: rotateY(-180deg);
}

.carousel-item.exit-flip-left {
    transform: rotateY(180deg);
}

.carousel-item.enter-flip-down {
    transform: rotateX(180deg);
}

.carousel-item.exit-flip-up {
    transform: rotateX(-180deg);
}

.carousel-item.enter-from-top-left {
    transform: translate(-100%, -100%);
}

.carousel-item.exit-to-bottom-right {
    transform: translate(100%, 100%);
}

.carousel-item.enter-from-bottom-right {
    transform: translate(100%, 100%);
}

.carousel-item.exit-to-top-left {
    transform: translate(-100%, -100%);
}

.carousel-item.enter-skew {
    transform: skewX(-45deg) translateX(-150%);
    opacity: 0;
}

.carousel-item.exit-skew {
    transform: skewX(45deg) translateX(150%);
    opacity: 0;
}

.carousel-item.enter-soft-zoom {
    transform: scale(1.2);
}

.carousel-item.exit-soft-zoom {
    transform: scale(0.8);
    opacity: 0;
}

.carousel-item.enter-newspaper {
    transform: scale(0.1) rotate(360deg);
}

.carousel-item.exit-newspaper {
    transform: scale(3) rotate(-360deg);
    opacity: 0;
}

/* Bounce animation classes */
.carousel-item.enter-bounce-right {
    animation: bounceInRight var(--carousel-transition-duration) ease-in-out;
}

.carousel-item.exit-bounce-left {
    animation: bounceOutLeft var(--carousel-transition-duration) ease-in-out;
}


/* === Bounce Keyframes === */

/* Bounce in from right */
@keyframes bounceInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    60% {
        transform: translateX(-15%);
        opacity: 1;
    }

    80% {
        transform: translateX(5%);
    }

    100% {
        transform: translateX(0);
    }
}

/* Bounce out to left */
@keyframes bounceOutLeft {
    20% {
        transform: translateX(10%);
    }

    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}


/* === Gallery Thumbnail Animation === */

/* Initial state of thumbnails */
.gallery-thumbnail {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Show thumbnail */
.gallery-thumbnail.enter {
    opacity: 1;
    transform: scale(1);
}

/* Hide thumbnail */
.gallery-thumbnail.exit {
    opacity: 0;
    transform: scale(0.95);
}


/* === Lightbox Styles === */

/* --- Lightbox sizes for devices --- */

/* Mobile */
.lightbox .lb-image {
    max-width: 90vw !important;
    max-height: 80vh !important;
}

/* Tablet */
@media (min-width: 768px) {
    .lightbox .lb-image {
        max-width: 700px !important;
        max-height: 650px !important;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    .lightbox .lb-image {
        max-width: 950px !important;
        max-height: 700px !important;
    }
}

/* --- Lightbox image style --- */

/* Rounded image border */
.lightbox .lb-image {
    border-radius: 8px;
}

/* Image fits container while maintaining aspect ratio */
.lightbox .lb-image img {
    object-fit: contain !important;
    width: 100%;
    height: 100%;
}


/* --- Lightbox animation transitions --- */

.lb-image.carousel-item {
    transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
    opacity: 0;
    transform: scale(1);
    transform-style: preserve-3d;
}

.lb-image.carousel-item.active {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1) rotateY(0) rotateX(0);
}


/* === Other Custom Styles === */

/* Background image for slider */
.slider-background {
    background-image: url('../images/bg.gif');
}