/* ==============================

   Global Styles & Reset

   ============================== */

  

@font-face {

    font-family: "Peyda-main";

    src: url("../fonts/peydabold.ttf") format('truetype');

    font-weight: normal;

    font-style: normal;

  }

  

  

  @font-face {

    font-family: "vazir-main";

    src: url("../fonts/vazir.ttf") format('truetype');

    font-weight: normal;

    font-style: normal;

  }


  @font-face {

    font-family: "IranNastaliq";

    src: url("../fonts/IranNastaliq.ttf") format('truetype');

    font-weight: normal;

    font-style: normal;

  }


    @font-face {

    font-family: "Vazirbold";

    src: url("../fonts/Vazirbold.ttf") format('truetype');

    font-weight: normal;

    font-style: normal;

  }

  

 

  

* {

    font-family:"vazir-main" ;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



:root {

    /* Color Palette - White, Red, Earthy */

    --primary-red: #C41E3A;

    --primary-red_trans: #c41e3a80;

    --primary-red-dark: #A01729;

    --primary-red-light: #E63950;

    --secondary-earth: #8B7355;

    --secondary-earth-light: #A68968;

    --secondary-earth-dark: #6B5845;

    --white: #FFFFFF;

    --transparent: #ffffff9c;

    --off-white: #f7f7f7;

    --light-gray: #e7e7e7;

    --text-dark: #2b2a2c;

    --text-gray: #616163;

    

    /* Spacing */

    --spacing-xs: 0.5rem;

    --spacing-sm: 1rem;

    --spacing-md: 2rem;

    --spacing-lg: 4rem;

    --spacing-xl: 6rem;

    

    /* Transitions */

    --transition-fast: 0.2s ease;

    --transition-normal: 0.3s ease;

    --transition-slow: 0.5s ease;

    

    /* Shadows */

    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);

    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);

    --shadow-lg: 0 8px 24px rgba(0,0,0,0.2);



    --slider3d-accent: #e8c87a;

    --slider3d-dark: #0d0d12;

  

        --slider3d-card-w: clamp(190px, 72vw, 360px);

        --slider3d-card-h: clamp(340px, 88vw, 560px);

    

        --slider3d-gap: clamp(12px, 3vw, 60px);

    

        --slider3d-behind-scale: 0.78;

    

        --slider3d-behind-x: calc(

            var(--slider3d-card-w) * 0.60 + var(--slider3d-gap)

        );

    

        --slider3d-transition: 700ms cubic-bezier(0.77, 0, 0.18, 1);

    }

    

    @media (min-width: 768px) {

        :root {

            --slider3d-card-w: clamp(240px, 34vw, 420px);

            --slider3d-card-h: clamp(360px, 52vw, 620px);

    

            --slider3d-behind-scale: 0.82;

    

            --slider3d-behind-x: calc(

                var(--slider3d-card-w) * 0.68 + var(--slider3d-gap)

            );

        }

    }

    

html {

    scroll-behavior: smooth;

    font-size: 16px;

}

a{

    text-decoration: none;

    color:#0008

}

body {

    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    background-color: var(--off-white);

    color: var(--text-dark);

    line-height: 1.8;

    overflow-x: hidden;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 var(--spacing-md);

}



/* ==============================

   Navigation

   ============================== */

.navbar {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    background-color: var(--transparent);

    backdrop-filter: blur(20px);

    box-shadow: var(--shadow-sm);

    z-index: 1000;

    transition: var(--transition-normal);

}



.navbar.scrolled {

    box-shadow: var(--shadow-lg);

}



.nav-wrapper {

    display: flex;

    justify-content: right;

    align-items: center;

    padding: 0px 50px 0px 50px;

    

}



.logo {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-left: 50px;

    padding: 2px 0 2px 0;

}



.logo-img {

  

    width: 70px;

    height: 70px;

    padding: 8px;

    object-fit: contain;

    cursor: pointer;

}



.logo-text { 

     font-family:"IranNastaliq";

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--primary-red);

}



.nav-menu {

    display: flex;

    list-style: none;

    gap: 2rem;

}



.nav-link {
        font-family: "Vazirbold";


    text-decoration: none;

    color: var(--text-dark);

    font-weight: 900;

    padding: 0.5rem 0;

    position: relative;

    transition: var(--transition-fast);

}



.nav-link::after {

    content: '';

    position: absolute;

    bottom: 0;

    right: 0;

    width: 0;

    height: 2px;

    background-color: var(--primary-red);

    transition: var(--transition-normal);

}



.nav-link:hover,

.nav-link.active {

    color: var(--primary-red);

}



.nav-link:hover::after,

.nav-link.active::after {

    width: 100%;

}



.mobile-menu-btn {

    display: none;

    flex-direction: column;

    gap: 5px;

    background: none;

    border: none;

    cursor: pointer;

    padding: 0.5rem;

}



.mobile-menu-btn span {

    width: 25px;

    height: 3px;

    background-color: var(--primary-red);

    border-radius: 2px;

    transition: var(--transition-fast);

}



/* ==============================

   Hero Section

   ============================== */

.hero {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

   

    overflow: hidden;

}



.hero-overlay {

    position: absolute;

    inset: 0;

}



.hero-content {

    position: relative;

    z-index: 2;

    text-align: center;

    color: var(--white);

    padding: var(--spacing-lg) 0;

}



.hero-title {

   display: flex;

   justify-content: center;

   align-items:center ;

}

.hero-title img {

    

    margin-top: 85px;

 width: 50%;

}



.hero-subtitle {

    font-size: 1.5rem;

    font-weight: 300;

    margin-bottom: var(--spacing-lg);

    opacity: 0.95;

}



.hero-stats {

    display: flex;

    justify-content: center;

    gap: var(--spacing-lg);

    margin-bottom: var(--spacing-lg);

    flex-wrap: wrap;

}



.stat-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 0 var(--spacing-md)var(--spacing-md)var(--spacing-md);

    background: url(../img/back_stat.png), #a70a0a 50% / cover no-repeat;

    backdrop-filter: blur(10px);

    border-radius: 12px;

    min-width: 300px;

    border: 1px solid rgba(255,255,255,0.2);

}



.stat-number {

    font-size: 3rem;

    font-weight: 700;

    line-height: 1;

    margin-bottom: 0.5rem;

}

.stat-icon{

    background-color: white;

    padding: 10px;

    font-size: 20px;

    color: rgb(154, 2, 27);

    border-radius: 50%;

    width: 70px;height: 70px;

    display: flex;

    justify-content: center;align-items: center;text-align:center;

    margin: 30px;

}



.stat-label {

    font-size: 1rem;

    opacity: 0.9;

}



.hero-buttons {

    display: flex;

    gap: var(--spacing-md);

    justify-content: center;

    flex-wrap: wrap;

}



.btn {

    padding: 1rem 2.5rem;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 600;

    font-size: 1rem;

    transition: var(--transition-normal);

    border: 2px solid transparent;

    cursor: pointer;

    display: inline-block;

}



.btn-primary {

    background-color: var(--white);

    color: var(--primary-red);

    border-color: var(--text-gray);

}



.btn-primary:hover {

    background-color: transparent;

    color: var(--primary-red-light);

    border-color: var(--primary-red-dark);

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(0,0,0,0.2);

}



.btn-secondary {

    background-color: transparent;

    color: var(--white);

    border-color: var(--white);

}



.btn-secondary:hover {

    background-color: var(--white);

    color: var(--primary-red);

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(0,0,0,0.2);

}



.scroll-indicator {

    position: absolute;

    bottom: var(--spacing-md);

    left: 50%;

    transform: translateX(-50%);

    text-align: center;

    color: var(--white);

    z-index: 2;

}



.scroll-indicator span {

    display: block;

    font-size: 0.875rem;

    margin-bottom: 0.5rem;

    opacity: 0.8;

}



.scroll-arrow {

    width: 30px;

    height: 30px;

    border-left: 2px solid var(--white);

    border-bottom: 2px solid var(--white);

    transform: rotate(-45deg);

    margin: 0 auto;

    animation: bounce 2s infinite;

}



/* ==============================

   Section Styles

   ============================== */

section {

    padding: var(--spacing-xl) 0 ;

}



.section-header {

    text-align: center;

    margin-bottom: var(--spacing-lg);

}



.section-title {

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--primary-red);

    margin-bottom: var(--spacing-sm);

}



.title-underline {

    width: 80px;

    height: 4px;

    background: linear-gradient(90deg, var(--primary-red), var(--secondary-earth));

    margin: 0 auto;

    border-radius: 2px;

}



/* ==============================

   About Section

   ============================== */

.about {

    background-color: var(--white);

}



.about-text {

    max-width: 900px;

    margin: 0 auto;

}



.lead {

    font-size: 1.25rem;

    font-weight: 500;

    color: var(--secondary-earth-dark);

    margin-bottom: var(--spacing-md);

    line-height: 1.8;

}



.about-text p {

    margin-bottom: var(--spacing-md);

    color: var(--text-gray);

    font-size: 1.05rem;

}



.features-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: var(--spacing-md);

    margin-top: var(--spacing-lg);

}



.feature-card {

    background: var(--off-white);

    padding: var(--spacing-md);

    border-radius: 12px;

    text-align: center;

    transition: var(--transition-normal);

    border: 2px solid transparent;

}



.feature-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-lg);

    border-color: var(--primary-red);

}



.feature-icon {

    font-size: 3rem;

    margin-bottom: var(--spacing-sm);

}



.feature-card h3 {

    font-size: 1.25rem;

    color: var(--primary-red);

    margin-bottom: var(--spacing-sm);

}



.feature-card p {

    color: var(--text-gray);

    font-size: 0.95rem;

}



/* ==============================

   Martyrs Section

   ============================== */

.martyrs {

    background-image:url("../img/shohada-lg-BrTMCgLw.png") ;

    background-repeat: no-repeat;

    background-position: center;

    background-size:cover;

}



.search-box {

    display: flex;

    

    width: 70%;

        margin: 0 auto var(--spacing-lg);

    box-shadow: var(--shadow-md);

    border-radius: 50px;

    overflow: hidden;

}



.search-input {

    flex: 1;

    padding: 1rem 1.5rem;

    border: none;

    font-family: inherit;

    font-size: 1rem;

    outline: none;

    background-color: #ffffffbd;

}



.search-btn {

    padding: 1rem 2rem;

    background-color: var(--primary-red_trans);

    color: var(--white);

    border: none;

    cursor: pointer;

    font-family: inherit;

    font-weight: 600;

    transition: var(--transition-fast);

}



.search-btn:hover {

    background-color: var(--primary-red-dark);

}



.martyrs-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: var(--spacing-md);

    margin-bottom: var(--spacing-lg);

}



.martyr-card {

    background: var(--white);

    border-radius: 12px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition: var(--transition-normal);

}



.martyr-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-lg);

}



.martyr-image {

    position: relative;

    width: 100%;

    height: 320px;

    overflow: hidden;

}



.martyr-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition-slow);

}



.martyr-card:hover .martyr-image img {

    transform: scale(1.1);

}



.martyr-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(196, 30, 58, 0.9), transparent);

    display: flex;

    align-items: flex-end;

    justify-content: center;

    padding: var(--spacing-md);

    opacity: 0;

    transition: var(--transition-normal);

}



.martyr-card:hover .martyr-overlay {

    opacity: 1;

}



.view-details-btn {

    background-color: var(--white);

    color: var(--primary-red);

    border: none;

    padding: 0.75rem 1.5rem;

    border-radius: 50px;

    font-family: inherit;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition-fast);

}



.view-details-btn:hover {

    background-color: var(--off-white);

    transform: scale(1.05);

}



.martyr-info {

    padding: var(--spacing-md);

}



.martyr-name {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--primary-red);

    margin-bottom: 0.5rem;

}



.martyr-details,

.martyr-location {

    font-size: 0.95rem;

    color: var(--text-gray);

    margin-bottom: 0.25rem;

}



.load-more {

    text-align: center;

margin-top: 400px;

}



/* ==============================

   Gallery Section

   ============================== */

.gallery {

    background-color: var(--white);

}



.gallery-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: var(--spacing-md);

}



.gallery-item {

    position: relative;

    height: 300px;

    border-radius: 12px;

    overflow: hidden;

    cursor: pointer;

    box-shadow: var(--shadow-sm);

    transition: var(--transition-normal);

}



.gallery-item:hover {

    transform: scale(1.05);

    box-shadow: var(--shadow-lg);

}



.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition-slow);

}



.gallery-item:hover img {

    transform: scale(1.1);

}



.gallery-overlay {

    position: absolute;

    inset: 0;

    background: rgba(196, 30, 58, 0.8);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: var(--transition-normal);

}



.gallery-item:hover .gallery-overlay {

    opacity: 1;

}



.gallery-icon {

    font-size: 3rem;

}



/* ==============================

   Events Section

   ============================== */

.events {

    background-color: var(--off-white);

}



.events-timeline {

    max-width: 800px;

    margin: 0 auto;

}



.event-item {

    display: flex;

    gap: var(--spacing-md);

    background: var(--white);

    padding: var(--spacing-md);

    border-radius: 12px;

    margin-bottom: var(--spacing-md);

    box-shadow: var(--shadow-sm);

    transition: var(--transition-normal);

    border-right: 4px solid var(--primary-red);

    direction: rtl;

}



.event-item:hover {

    transform: translateX(-8px);

    box-shadow: var(--shadow-md);

}



.event-date {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: var(--primary-red);

    color: var(--white);

    padding: var(--spacing-sm);

    border-radius: 8px;

    min-width: 80px;

    text-align: center;

}



.event-date .day {

    font-size: 2rem;

    font-weight: 700;

    line-height: 1;

    color: white;

}



.event-date .month {

    font-size: 0.875rem;

    margin-top: 0.25rem;

    color: white;

}



.event-content h3 {

    font-size: 1.25rem;

    color: var(--primary-red);

    margin-bottom: 0.5rem;

}



.event-content p {

    color: var(--text-gray);

    margin-bottom: 0.5rem;

}



.event-location {

    font-size: 0.875rem;

    color: var(--secondary-earth);

    font-weight: 500;

}



/* ==============================

   Contact Section

   ============================== */

.contact {

    background-color: var(--white);

}



.contact-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--spacing-lg);

    max-width: 1000px;

    margin: 0 auto;

}



.contact-form {

    background: var(--off-white);

    padding: var(--spacing-lg);

    border-radius: 12px;

}



.form-group {

    margin-bottom: var(--spacing-md);

}



.form-group input,

.form-group textarea {

    width: 100%;

    padding: 1rem;

    border: 2px solid var(--light-gray);

    border-radius: 8px;

    font-family: inherit;

    font-size: 1rem;

    transition: var(--transition-fast);

    outline: none;

}



.form-group input:focus,

.form-group textarea:focus {

    border-color: var(--primary-red);

}



.form-group textarea {

    resize: vertical;

    min-height: 120px;

}



.contact-info {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-md);

}



.info-item {

    display: flex;

    gap: var(--spacing-sm);

    padding: var(--spacing-md);

    background: var(--off-white);

    border-radius: 12px;

    border-right: 4px solid var(--secondary-earth);

}



.info-icon {

    font-size: 2rem;

}



.info-text h4 {

    font-size: 1.1rem;

    color: var(--primary-red);

    margin-bottom: 0.25rem;

}



.info-text p {

    color: var(--text-gray);

    font-size: 0.95rem;

}/* ==============================

   Footer

   ============================== */



.footer{

    background: linear-gradient(135deg,#0f2b46,#1c3f63);

    color:#fff;

    padding:60px 0 25px;

    font-family: inherit;

}



.footer-container{

    max-width:1600px;

    margin:auto;

}



.footer-content{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:40px;

    align-items:start;   /* مهم: همه ستون‌ها از بالا شروع می‌شوند */

}



.footer-section{

    text-align:center;

}



.footer-section h3{

    margin:0 0 15px 0;

    font-size:20px;

    position:relative;

}



.footer-section h3::after{

    content:"";

    width:70px;

    height:3px;

    background:#c9a84f;

    display:block;

    margin:8px auto 0;

    border-radius:5px;

}



/* about */



.footer-logo{

    width:90px;

    margin-bottom:10px;

}



.footer-about p{

    opacity:0.9;

    line-height:1.8;

    margin-bottom:15px;

}



/* links */



.footer-links{

    list-style:none;

    padding:0;

}



.footer-links li{

    margin-bottom:10px;

}



.footer-links a{

    color:#fff;

    text-decoration:none;

    opacity:.9;

    transition:.3s;

}



.footer-links a:hover{

    opacity:1;

    color:#f0c674;

}



/* contact */



.footer-contact{

    list-style:none;

    padding:0;

    line-height:2;

    opacity:.9;

}



/* social */



.social-links{

    display:flex;

    gap:10px;

    justify-content:center;

    margin-top:10px;

}



.social-link{

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    background:rgba(255,255,255,.08);

    border-radius:50%;

    transition:.3s;

}



.social-link img{

    width:18px;

}



.social-link:hover{

    background:#c9a84f;

    transform:translateY(-2px);

}



/* bottom */



.footer-bottom{

    text-align:center;

    margin-top:40px;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.15);

    font-size:14px;

    opacity:.8;

}





/* ==============================

   Animations

   ============================== */

@keyframes bounce {

    0%, 20%, 50%, 80%, 100% {

        transform: translateY(0) rotate(-45deg);

    }

    40% {

        transform: translateY(-10px) rotate(-45deg);

    }

    60% {

        transform: translateY(-5px) rotate(-45deg);

    }

}



.animate-fade-in {

    animation: fadeIn 1s ease-out;

}



.animate-fade-in-delay {

    animation: fadeIn 1s ease-out 0.3s both;

}



.animate-fade-in-delay-2 {

    animation: fadeIn 1s ease-out 0.6s both;

}



.animate-fade-in-delay-3 {

    animation: fadeIn 1s ease-out 0.9s both;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* ==============================

   Responsive Design

   ============================== */

@media (max-width: 1024px) {

    .nav-wrapper {

        justify-content: space-between;

        

    }

    .hero-title {

        font-size: 2.5rem;

    }

    

    .hero-subtitle {

        font-size: 1.25rem;

    }

    

    .section-title {

        font-size: 2rem;

    }

}



@media (max-width: 768px) {

    .mobile-menu-btn {

        display: flex;

    }

    

    .nav-menu {

        position: fixed;

        top: 80px;

        right: -100%;

        width: 100%;

        height: calc(100vh - 80px);

        background-color: var(--white);

        flex-direction: column;

        padding: var(--spacing-md);

        gap: 0;

        transition: var(--transition-normal);

        box-shadow: var(--shadow-lg);

    }

    

    .nav-menu.active {

        right: 0;

    }

    

    .nav-link {

        padding: var(--spacing-sm) 0;

        border-bottom: 1px solid var(--light-gray);

        width: 100%;

    }

    

    .hero {

        margin-top: 70px;

    }

    

    .hero-title {

        font-size: 2rem;

    }

    

    .hero-subtitle {

        font-size: 1rem;

    }

    

    .stat-number {

        font-size: 2rem;

    }

    

    .hero-stats {

        gap: var(--spacing-sm);

    }

    

    .stat-item {

        min-width: 120px;

        padding: var(--spacing-sm);

    }

    

    .section-title {

        font-size: 1.75rem;

    }

    

    .contact-wrapper {

        grid-template-columns: 1fr;

    }

    

    .footer-content {

        grid-template-columns: 1fr;

        text-align: center;

    }

    

    .social-links {

        justify-content: center;

    }

    

    .martyrs-grid {

        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

    }

    

    .gallery-grid {

        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

    }

}



@media (max-width: 600px) {

    html {

        font-size: 14px;

    }

    

    .hero-title {

        font-size: 1.75rem;

    }

    

    .hero-stats {

        flex-direction: column;

    }

    

    .stat-item {

        width: 100%;

    }

    

    .hero-buttons {

        flex-direction: column;

        width: 100%;

    }

    

    .btn {

        width: 100%;

    }

    

    .features-grid {

        grid-template-columns: 1fr;

    }

    

    .martyrs-grid {

        grid-template-columns: 1fr;

    }

    

    .gallery-grid {

        grid-template-columns: 1fr;

    }

    

    .event-item {

        flex-direction: column;

        text-align: center;

    }

    

    .event-date {

        width: 100%;

    }

}



/* ==============================

   Print Styles

   ============================== */

@media print {

    .navbar,

    .mobile-menu-btn,

    .hero-buttons,

    .scroll-indicator,

    .footer {

        display: none;

    }

    

    body {

        background: white;

        color: black;

     

    }

    

    section {

        page-break-inside: avoid;

    }

}





















.carousel-container {

    direction: ltr;

    max-width: 1200px;

    width: 100%;

    position: relative;

    overflow: hidden;

    border-radius: 30px;

    box-shadow: 0 25px 60px rgba(220, 20, 60, 0.3);

    background: white;

}



.carousel-wrapper {

    display: flex;

    transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);

}



.carousel-slide {

    min-width: 100%;

    display: flex;

    align-items: center;

    padding: 60px;

    position: relative;

    overflow: hidden;

}



.carousel-slide::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -50%;

    width: 200%;

    height: 200%;

    background: radial-gradient(circle, rgba(220, 20, 60, 0.05) 0%, transparent 70%);

    animation: rotateGradient 20s linear infinite;

}



@keyframes rotateGradient {

    0% { transform: rotate(0deg); }

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

}



.slide-content {

    flex: 1;

    z-index: 2;

    padding-left: 40px;

}



.slide-number {

    font-size: 14px;

    color: #dc143c;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 15px;

    opacity: 0;

    transform: translateY(-20px);

    animation: slideInDown 0.6s ease forwards;

}



.slide-title {

    font-size: 48px;

    color: #dc143c;

    font-weight: 800;

    margin-bottom: 20px;

    line-height: 1.2;

    opacity: 0;

    transform: translateX(50px);

    animation: slideInRight 0.8s ease 0.2s forwards;

}



.slide-description {

    font-size: 18px;

    color: #555;

    line-height: 1.8;

    margin-bottom: 30px;

    opacity: 0;

    transform: translateX(50px);

    animation: slideInRight 0.8s ease 0.4s forwards;

}



.slide-button {

    display: inline-block;

    padding: 15px 40px;

    background: linear-gradient(135deg, #dc143c 0%, #a00d2a 100%);

    color: white;

    text-decoration: none;

    border-radius: 50px;

    font-weight: 600;

    transition: all 0.3s ease;

    opacity: 0;

    transform: translateY(20px);

    animation: slideInUp 0.8s ease 0.6s forwards;

    box-shadow: 0 10px 30px rgba(220, 20, 60, 0.3);

}



.slide-button:hover {

    transform: translateY(-3px);

    box-shadow: 0 15px 40px rgba(220, 20, 60, 0.4);

}



.slide-image {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 2;

}



.image-wrapper {

    position: relative;

    width: 100%;

    max-width: 450px;

    opacity: 0;

    transform: scale(0.8);

    animation: zoomIn 1s ease 0.3s forwards;

}



.image-wrapper::before {

    content: '';

    position: absolute;

    top: -20px;

    right: -20px;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, #dc143c 0%, #ff6b6b 100%);

    border-radius: 30px;

    z-index: -1;

    animation: pulse 3s ease-in-out infinite;

}



@keyframes pulse {

    0%, 100% { transform: scale(1); opacity: 0.5; }

    50% { transform: scale(1.05); opacity: 0.3; }

}



.slide-img {

    width: 100%;

    height: 400px;

    object-fit: cover;

    border-radius: 30px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);

}



@keyframes slideInDown {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes slideInRight {

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes slideInUp {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes zoomIn {

    to {

        opacity: 1;

        transform: scale(1);

    }

}



.carousel-controls {

    position: absolute;

    bottom: 40px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 15px;

    z-index: 10;

}



.control-btn {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: white;

    border: 2px solid #dc143c;

    color: #dc143c;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    font-size: 20px;

    font-weight: bold;

}



.control-btn:hover {

    background: #dc143c;

    color: white;

    transform: scale(1.1);

}



.carousel-indicators {

    position: absolute;

    bottom: 40px;

    right: 60px;

    display: flex;

    gap: 10px;

    z-index: 10;

}



.indicator {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: rgba(220, 20, 60, 0.3);

    cursor: pointer;

    transition: all 0.3s ease;

}



.indicator.active {

    width: 40px;

    border-radius: 10px;

    background: #dc143c;

}

.box-congere{

    display:flex;flex-direction: row; justify-content: space-between;align-items: center;

}



.box-congere img{



    width: 400px;border-radius: 16px;margin: 20px;

}

/* Responsive Design */

@media (max-width: 968px) {

    .carousel-slide {

        flex-direction: column-reverse;

        padding: 40px 30px;

    }



    .slide-content {

        padding-left: 0;

        padding-top: 30px;

        text-align: center;

    }



    .slide-title {

        font-size: 36px;

    }



    .slide-description {

        font-size: 16px;

    }



    .slide-img {

        height: 300px;

    }



    .carousel-indicators {

        right: 50%;

        transform: translateX(50%);

        bottom: 120px;

    }

    .box-congere{

        flex-wrap: wrap;

    }

}











@media (max-width: 576px) {

    .box-congere img{



        width: 100%;

    }

    .carousel-slide {

        padding: 30px 20px;

    }



    .slide-title {

        font-size: 28px;

    }



    .slide-description {

        font-size: 14px;

    }



    .slide-img {

        height: 250px;

    }



    .control-btn {

        width: 40px;

        height: 40px;

        font-size: 16px;

    }



    .carousel-controls {

        bottom: 30px;

    }



    .carousel-indicators {

        bottom: 100px;

    }



}









.slider3d-container {

    font-family: 'Vazirmatn', sans-serif;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    perspective: 1200px;

    position: relative;

    margin: 0;

  }



  .slider3d-container::before {

    content: '';

    position: fixed; inset: 0;

   

    pointer-events: none;

  }



  .slider3d-grain {

    position: fixed; inset: 0; pointer-events: none; opacity: .35;

  }



  .slider3d-stage {

    position: relative;

    height: calc(var(--slider3d-card-h) );

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 ;

    margin-top: 10px;

  }



  @media (min-width: 768px) {

    

    .slider3d-stage {

      height: calc(var(--slider3d-card-h) );

      padding: 0;

    }

  }



  .slider3d-card {

    position: absolute;

    width: var(--slider3d-card-w);

    height: var(--slider3d-card-h);

    border-radius: 12px;

    overflow: hidden;

    cursor: pointer;

    will-change: transform, opacity, filter;

    transition:

      transform var(--slider3d-transition),

      opacity   var(--slider3d-transition),

      filter    var(--slider3d-transition);

    box-shadow: 0 8px 20px #0009;

  }



  @media (min-width: 768px) {

    .slider3d-card {

      border-radius: 12px;

    }

  }



  .slider3d-card img {

    width: 100%; height: 100%;

    object-fit: cover;

    display: block;

    user-select: none;

    pointer-events: none;

  }



  .slider3d-card::after {

    content: '';

    position: absolute; inset: 0;

    background: linear-gradient(to top, #000c 0%, transparent 55%);

    transition: opacity var(--slider3d-transition);

  }



  .slider3d-card-body {

    position: absolute;

    bottom: 0; left: 0; right: 0;

    padding: clamp(14px, 4%, 32px);

    z-index: 2;

    transform: translateY(0);

    transition: transform var(--slider3d-transition), opacity var(--slider3d-transition);

  }



  .slider3d-card-body h2 {

    font-size: clamp(1rem, 2.4vw, 1.7rem);

    font-weight: 800;

    color: #fff;

    line-height: 1.3;

    margin-bottom: .4em;

    text-shadow: 0 2px 12px #0008;

  }



  .slider3d-card-body p {

    font-size: clamp(.75rem, 1.5vw, 1rem);

    color: rgba(255,255,255,.72);

    font-weight: 300;

    margin-bottom: 1em;

    line-height: 1.5;

  }



  .slider3d-card-btn {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: .6em 1.3em;

    background: var(--slider3d-accent);

    color: #111;

    font-family: inherit;

    font-size: clamp(.75rem, 1.4vw, .95rem);

    font-weight: 700;

    border: none;

    border-radius: 50px;

    cursor: pointer;

    text-decoration: none;

    transition: background .25s, transform .2s, box-shadow .25s;

    box-shadow: 0 4px 20px #e8c87a44;

  }



  .slider3d-card-btn:hover { 

    background: #f5d98a; 

    transform: translateY(-2px); 

    box-shadow: 0 8px 30px #e8c87a66; 

  }



  .slider3d-card-btn svg { transition: transform .25s; }

  .slider3d-card-btn:hover svg { transform: translateX(-4px); }



  .slider3d-card[data-pos="front"] {

    transform: translateX(0) scale(1) translateZ(0);

    z-index: 10;

    filter: brightness(1);

  }



  .slider3d-card[data-pos="right"] {

    transform: translateX(var(--slider3d-behind-x)) scale(var(--slider3d-behind-scale)) translateZ(-80px) rotateY(-12deg);

    z-index: 5;

    filter: brightness(.5);

  }



  @media (min-width: 768px) {

    .slider3d-card[data-pos="right"] {

      transform: translateX(var(--slider3d-behind-x)) scale(var(--slider3d-behind-scale)) translateZ(-120px) rotateY(-18deg);

      filter: brightness(.55);

    }

  }



  .slider3d-card[data-pos="right"] .slider3d-card-body { 

    opacity: 0; 

    transform: translateY(10px); 

  }



  .slider3d-card[data-pos="left"] {

    transform: translateX(calc(-1 * var(--slider3d-behind-x))) scale(var(--slider3d-behind-scale)) translateZ(-80px) rotateY(12deg);

    z-index: 5;

    filter: brightness(.5);

    box-shadow: 0 8px 40px #0008;

  }



  @media (min-width: 768px) {

    .slider3d-card[data-pos="left"] {

      transform: translateX(calc(-1 * var(--slider3d-behind-x))) scale(var(--slider3d-behind-scale)) translateZ(-120px) rotateY(18deg);

      filter: brightness(.55);

    }

  }



  .slider3d-card[data-pos="left"] .slider3d-card-body { 

    opacity: 0; 

    transform: translateY(10px); 

  }



  .slider3d-card.slider3d-anim-to-right {

    animation: slider3dToRight var(--slider3d-transition) forwards;

  }

  .slider3d-card.slider3d-anim-to-left {

    animation: slider3dToLeft var(--slider3d-transition) forwards;

  }

  .slider3d-card.slider3d-anim-from-right {

    animation: slider3dFromRight var(--slider3d-transition) forwards;

  }

  .slider3d-card.slider3d-anim-from-left {

    animation: slider3dFromLeft var(--slider3d-transition) forwards;

  }

  .slider3d-card.slider3d-anim-behind-swap-r {

    animation: slider3dBehindSwapR var(--slider3d-transition) forwards;

  }

  .slider3d-card.slider3d-anim-behind-swap-l {

    animation: slider3dBehindSwapL var(--slider3d-transition) forwards;

  }



  @keyframes slider3dToRight {

    to { 

      transform: translateX(var(--slider3d-behind-x)) scale(var(--slider3d-behind-scale)) translateZ(-80px) rotateY(-12deg); 

      filter: brightness(.5); 

    }

  }



  @media (min-width: 768px) {

    @keyframes slider3dToRight {

      to { 

        transform: translateX(var(--slider3d-behind-x)) scale(var(--slider3d-behind-scale)) translateZ(-120px) rotateY(-18deg); 

        filter: brightness(.55); 

      }

    }

  }



  @keyframes slider3dToLeft {

    to { 

      transform: translateX(calc(-1 * var(--slider3d-behind-x))) scale(var(--slider3d-behind-scale)) translateZ(-80px) rotateY(12deg); 

      filter: brightness(.5); 

    }

  }



  @media (min-width: 768px) {

    @keyframes slider3dToLeft {

      to { 

        transform: translateX(calc(-1 * var(--slider3d-behind-x))) scale(var(--slider3d-behind-scale)) translateZ(-120px) rotateY(18deg); 

        filter: brightness(.55); 

      }

    }

  }



  @keyframes slider3dFromRight {

    from { 

      transform: translateX(var(--slider3d-behind-x)) scale(var(--slider3d-behind-scale)) translateZ(-80px) rotateY(-12deg); 

      filter: brightness(.5); 

    }

    to { transform: translateX(0) scale(1) translateZ(0); filter: brightness(1); }

  }



  @media (min-width: 768px) {

    @keyframes slider3dFromRight {

      from { 

        transform: translateX(var(--slider3d-behind-x)) scale(var(--slider3d-behind-scale)) translateZ(-120px) rotateY(-18deg); 

        filter: brightness(.55); 

      }

      to { transform: translateX(0) scale(1) translateZ(0); filter: brightness(1); }

    }

  }



  @keyframes slider3dFromLeft {

    from { 

      transform: translateX(calc(-1 * var(--slider3d-behind-x))) scale(var(--slider3d-behind-scale)) translateZ(-80px) rotateY(12deg); 

      filter: brightness(.5); 

    }

    to { transform: translateX(0) scale(1) translateZ(0); filter: brightness(1); }

  }



  @media (min-width: 768px) {

    @keyframes slider3dFromLeft {

      from { 

        transform: translateX(calc(-1 * var(--slider3d-behind-x))) scale(var(--slider3d-behind-scale)) translateZ(-120px) rotateY(18deg); 

        filter: brightness(.55); 

      }

      to { transform: translateX(0) scale(1) translateZ(0); filter: brightness(1); }

    }

  }



  @keyframes slider3dBehindSwapR {

    from { 

      transform: translateX(calc(-1 * var(--slider3d-behind-x))) scale(var(--slider3d-behind-scale)) translateZ(-80px) rotateY(12deg); 

      filter: brightness(.5); 

    }

    to { 

      transform: translateX(var(--slider3d-behind-x)) scale(var(--slider3d-behind-scale)) translateZ(-80px) rotateY(-12deg); 

      filter: brightness(.5); 

    }

  }



  @media (min-width: 768px) {

    @keyframes slider3dBehindSwapR {

      from { 

        transform: translateX(calc(-1 * var(--slider3d-behind-x))) scale(var(--slider3d-behind-scale)) translateZ(-120px) rotateY(18deg); 

        filter: brightness(.55); 

      }

      to { 

        transform: translateX(var(--slider3d-behind-x)) scale(var(--slider3d-behind-scale)) translateZ(-120px) rotateY(-18deg); 

        filter: brightness(.55); 

      }

    }

  }



  @keyframes slider3dBehindSwapL {

    from { 

      transform: translateX(var(--slider3d-behind-x)) scale(var(--slider3d-behind-scale)) translateZ(-80px) rotateY(-12deg); 

      filter: brightness(.5); 

    }

    to { 

      transform: translateX(calc(-1 * var(--slider3d-behind-x))) scale(var(--slider3d-behind-scale)) translateZ(-80px) rotateY(12deg); 

      filter: brightness(.5); 

    }

  }



  @media (min-width: 768px) {

    @keyframes slider3dBehindSwapL {

      from { 

        transform: translateX(var(--slider3d-behind-x)) scale(var(--slider3d-behind-scale)) translateZ(-120px) rotateY(-18deg); 

        filter: brightness(.55); 

      }

      to { 

        transform: translateX(calc(-1 * var(--slider3d-behind-x))) scale(var(--slider3d-behind-scale)) translateZ(-120px) rotateY(18deg); 

        filter: brightness(.55); 

      }

    }

  }



  .slider3d-dots {

    display: flex;

    gap: 10px;

    margin-top: 20px;

    z-index: 20;

  }



  @media (min-width: 768px) {

    .slider3d-dots {

      margin-top: 28px;

    }

  }



  .slider3d-dot {

    width: 8px; height: 8px;

    border-radius: 50%;

    background: rgba(255,255,255,.25);

    cursor: pointer;

    transition: background .35s, transform .35s;

  }



  .slider3d-dot.slider3d-active {

    background: var(--slider3d-accent);

    transform: scale(1.4);

  }



  .slider3d-arrows {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    display: none;

    justify-content: space-between;

    padding: 0 clamp(4px, 2vw, 40px);

    z-index: 30;

    pointer-events: none;

  }



  .slider3d-arrow {

    pointer-events: all;

    width: clamp(40px, 10vw, 52px);

    height: clamp(40px, 10vw, 52px);

    border-radius: 50%;

    border: 1.5px solid rgba(255,255,255,.18);

    background: rgba(255,255,255,.08);

    backdrop-filter: blur(10px);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: background .25s, border-color .25s, transform .2s;

    font-size: 1.1rem;

  }



  @media (min-width: 768px) {

    .slider3d-arrow {

      width: clamp(36px, 5vw, 52px);

      height: clamp(36px, 5vw, 52px);

      font-size: 1.2rem;

    }

  }



  .slider3d-arrow:hover { 

    background: rgba(255,255,255,.14); 

    border-color: var(--slider3d-accent); 

    transform: scale(1.1); 

  }



  .slider3d-arrow svg { width: 16px; height: 16px; }



  @media (min-width: 768px) {

    .slider3d-arrow svg { width: 18px; height: 18px; }

  }



  .slider3d-label-strip {

    position: absolute;

    top: clamp(10px, 2vw, 20px);

    left: 50%; transform: translateX(-50%);

    z-index: 40;

    display: flex;

    gap: 8px;

  }



  .slider3d-badge {

    font-size: .65rem;

    font-weight: 600;

    letter-spacing: .1em;

    text-transform: uppercase;

    padding: 4px 12px;

    border-radius: 50px;

    background: rgba(255,255,255,.07);

    color: var(--slider3d-accent);

    border: 1px solid rgba(232,200,122,.25);

    backdrop-filter: blur(8px);

  }



  @media (min-width: 768px) {

    .slider3d-badge {

      font-size: .7rem;

      padding: 5px 14px;

      letter-spacing: .12em;

    }

  }







  .featured-martyrs-carousel {

    padding: 60px 0;

    background: #fff;

}



.carousel-wrapper {

    position: relative;

    margin-top: 40px;

}



.carousel-track-container {

    direction: ltr;

    overflow: hidden;

    padding: 20px 0;

    width: 100%;

}





.carousel-track {

    display: flex;

    gap: 20px;

   

}



.carousel-track {

    display: flex;

    gap: 20px;

    transition: transform 0.4s ease;

    width: max-content;

}



.carousel-item {

    flex: 0 0 auto;

    width:200px;

    height:250px;

    text-align: center;

    text-decoration: none;

    transition: transform 0.3s ease;

    border-radius: 16px;

background-color: var(--off-white);

}



.carousel-item:hover {

    transform: translateY(-8px);

}



.martyr-avatar {

    width: 160px;

    height: 160px;

    margin: 0 auto 12px;

    border-radius: 50%;

    overflow: hidden;

    border: 3px solid #8B1A1A;

    box-shadow: 0 4px 12px rgba(139, 26, 26, 0.2);

    margin: 5px 5px 5px 20px;

}



.martyr-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.martyr-name {

    font-size: 0.9rem;

    color: #333;

    font-weight: 600;

    margin-top: 40px;

}



.carousel-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background: #8B1A1A;

    color: #fff;

    border: none;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    font-size: 24px;

    cursor: pointer;

    z-index: 10;

    transition: background 0.3s ease;

}



.carousel-btn:hover {

    background: #6d1414;

}



.carousel-btn.prev {

    right: -50px;

}



.carousel-btn.next {

    left: -50px;

}



@media (max-width: 768px) {

  

    .carousel-btn {

        width: 35px;

        height: 35px;

        font-size: 20px;

    }

    .carousel-btn.prev {

        right: -10px;

    }

    

    .carousel-btn.next {

        left: -10px;

    }

}



.carousel-item.event-card {

    width: 200px;

    height: auto;

    padding: 20px;

    background: #fff;

    border: 1px solid #ddd;

    border-radius: 12px;

}



.event-date {

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-bottom: 15px;

}



.event-date .day {

    font-size: 2rem;

    font-weight: bold;

    color: #ffffff;

}



.event-date .month {

    font-size: 1rem;

    color: #ffffff;

}



.event-content h3 {

    font-size: 1.1rem;

    margin-bottom: 10px;

    color: #333;

}



.event-content p {

    font-size: 0.9rem;

    color: #666;

    margin-bottom: 10px;

}



.event-location {

    font-size: 0.85rem;

    color: #8B1A1A;

}