* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #2b2320;    /* Softer Dark Brown */
    --secondary-color: #c4a484;  /* Muted Gold */
    --text-color: #2d2d2d;      /* Dark Gray */
    --light-color: #f5f0eb;     /* Soft Cream */
    --accent-color: #766153;    /* Warm Gray Brown */
    --gradient-start: #2b2320;  /* Softer Dark Brown */
    --gradient-end: #3d332f;    /* Medium Soft Brown */
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, 
        var(--gradient-start),
        var(--gradient-end));
    background-attachment: fixed;
    color: var(--light-color);
    line-height: 1.6;
    position: relative;
    overflow-x: hidden;
}

/* Base pattern layer */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(
            rgba(43, 35, 32, 0.97), 
            rgba(61, 51, 47, 0.97)
        ),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(196, 164, 132, 0.03) 10px,
            rgba(196, 164, 132, 0.03) 20px
        );
    opacity: 0.9;
    z-index: -1;
}

/* Islamic geometric pattern overlay */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, transparent 47%, rgba(196, 164, 132, 0.05) 47%, rgba(196, 164, 132, 0.05) 53%, transparent 53%),
        linear-gradient(45deg, transparent 47%, rgba(196, 164, 132, 0.05) 47%, rgba(196, 164, 132, 0.05) 53%, transparent 53%),
        radial-gradient(circle at 50% 50%, transparent 45%, rgba(196, 164, 132, 0.03) 45%, rgba(196, 164, 132, 0.03) 55%, transparent 55%);
    background-size: 50px 50px, 50px 50px, 100px 100px;
    opacity: 0.5;
    z-index: -1;
    animation: subtleFloat 40s infinite linear;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    position: relative;
}

header {
    text-align: center;
    padding: 50px 0;
    animation: fadeIn 1s ease-in;
    position: relative;
}

/* Decorative arch shape above header */
header::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 60px;
    background: radial-gradient(ellipse at top, rgba(196, 164, 132, 0.15) 0%, transparent 70%);
}

.kalima-container {
    text-align: center;
    margin-bottom: 10px;
    padding: 12px;
    position: relative;
    overflow: hidden;
}

/* Rotating light effect */
.kalima-container::before {
    content: '';
    position: absolute;
    top: -150%;
    left: -150%;
    width: 400%;
    height: 400%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(196, 164, 132, 0.05) 40deg,
        rgba(196, 164, 132, 0.2) 80deg,
        rgba(196, 164, 132, 0.3) 120deg,
        rgba(196, 164, 132, 0.2) 160deg,
        rgba(196, 164, 132, 0.05) 200deg,
        transparent 240deg,
        transparent 360deg
    );
    animation: rotateLight 15s linear infinite;
    z-index: 0;
    filter: blur(10px);
}

/* Additional light beam effect */
.kalima-container::after {
    content: '';
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 200%;
    background: linear-gradient(
        180deg,
        rgba(196, 164, 132, 0.4) 0%,
        rgba(196, 164, 132, 0.3) 20%,
        rgba(196, 164, 132, 0.2) 40%,
        rgba(196, 164, 132, 0.1) 60%,
        rgba(196, 164, 132, 0.05) 80%,
        transparent 100%
    );
    z-index: 1;
    filter: blur(5px);
}

.kalima {
    font-family: 'Traditional Arabic', 'Amiri', serif;
    font-size: 2.2em;
    color: var(--secondary-color);
    line-height: 1.5;
    direction: rtl;
    text-align: center;
    white-space: nowrap;
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 10px 20px;
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.2),
        0 0 30px rgba(196, 164, 132, 0.5);
    animation: fadeIn 2s ease, glowPulse 3s ease-in-out infinite;
    background: linear-gradient(
        180deg,
        var(--secondary-color) 0%,
        rgba(196, 164, 132, 0.9) 50%,
        rgba(196, 164, 132, 0.7) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(196, 164, 132, 0.4));
    z-index: 2;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.kalima::-webkit-scrollbar {
    display: none;
}

.kalima::before,
.kalima::after {
    content: '❈';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondary-color);
    opacity: 0.7;
    font-size: 0.8em;
}

.kalima::before {
    left: -10px;
}

.kalima::after {
    right: -10px;
}

.profile-image {
    width: 200px;
    height: 200px;
    margin: 0 auto 18px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid var(--secondary-color);
    padding: 5px;
    box-shadow: 0 0 20px rgba(196, 164, 132, 0.15);
    background: var(--gradient-start);
    position: relative;
}

.profile-image::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent, rgba(196, 164, 132, 0.1), transparent);
    animation: rotateBorder 8s linear infinite;
    pointer-events: none;
}

.profile-image img {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    margin: 5px;
    object-fit: cover;
    border-radius: 50%;
    transition: transform 0.5s ease;
}

.profile-image:hover img {
    transform: scale(1.05);
}

.name {
    font-size: 2.8em;
    margin-bottom: 10px;
    color: var(--secondary-color);
    animation: slideInDown 1s ease;
    text-shadow: 
        1px 1px 3px rgba(0, 0, 0, 0.2),
        0 0 15px rgba(196, 164, 132, 0.1);
}

.title {
    font-size: 1.3em;
    color: var(--light-color);
    margin-bottom: 10px;
    animation: slideInUp 1s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.95;
}

.organization {
    font-size: 1.1em;
    color: var(--secondary-color);
    margin-bottom: 18px;
    animation: slideInUp 1.2s ease;
    font-weight: 500;
    letter-spacing: 1px;
    opacity: 0.9;
}

.social-links {
    margin: 20px 0;
    animation: fadeIn 1.5s ease;
}

.social-icon {
    font-size: 1.5em;
    margin: 0 12px;
    color: var(--light-color);
    transition: all 0.3s ease;
    display: inline-block;
}

.social-icon:hover {
    transform: translateY(-5px);
    color: var(--secondary-color);
    text-shadow: 0 0 15px rgba(196, 164, 132, 0.4);
}

.takbir-container {
    text-align: center;
    margin-bottom: 15px;
    padding-top: 2px;
}

.takbir {
    font-family: 'SolaimanLipi', Arial, sans-serif;
    font-size: 0.9em;
    color: var(--secondary-color);
    opacity: 0.85;
    letter-spacing: 0.5px;
}

.takbir-left {
    font-family: 'SolaimanLipi', Arial, sans-serif;
}

.takbir-right {
    font-family: 'Amiri', 'Traditional Arabic', serif;
}

section {
    background: rgba(43, 35, 32, 0.7);
    border-radius: 16px;
    padding: 30px;
    margin: 30px 0;
    backdrop-filter: blur(10px);
    animation: slideInUp 1s ease;
    border: 1px solid rgba(196, 164, 132, 0.15);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 0 32px rgba(196, 164, 132, 0.03);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Islamic pattern for sections */
section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(135deg, transparent 48%, rgba(196, 164, 132, 0.03) 48%, rgba(196, 164, 132, 0.03) 52%, transparent 52%),
        linear-gradient(45deg, transparent 48%, rgba(196, 164, 132, 0.03) 48%, rgba(196, 164, 132, 0.03) 52%, transparent 52%),
        radial-gradient(circle at center, rgba(196, 164, 132, 0.02) 0%, transparent 60%);
    background-size: 30px 30px, 30px 30px, 60px 60px;
    opacity: 0.3;
    z-index: 1;
}

section > * {
    position: relative;
    z-index: 2;
}

section:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        inset 0 0 32px rgba(196, 164, 132, 0.05);
    border-color: rgba(196, 164, 132, 0.25);
}

h2 {
    color: var(--secondary-color);
    margin-bottom: 25px;
    position: relative;
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 2px;
}

h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--secondary-color);
    border-radius: 2px;
}

.creator {
    color: var(--secondary-color);
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.creator:hover {
    color: #d4b08c;
}

/* Profile Popup Styles */
.profile-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.popup-content {
    position: relative;
    background: transparent;
    margin: 15% auto;
    padding: 20px;
    width: 250px;
    text-align: center;
    animation: fadeIn 0.3s ease;
}

.popup-image {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 3px solid var(--secondary-color);
    box-shadow: 0 0 30px rgba(196, 164, 132, 0.4);
    transition: transform 0.3s ease;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

.popup-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    z-index: 3;
}

.popup-name {
    color: var(--secondary-color);
    margin: 10px 0;
    font-size: 1.5em;
    text-shadow: 0 0 10px rgba(196, 164, 132, 0.4);
    animation: fadeIn 0.5s ease;
}

.about-content {
    font-family: 'Arial', sans-serif; /* Use a readable font */
    font-size: 1em; /* Adjust font size as needed */
    color: white(--text-color); /* Use your preferred text color */
    line-height: 1.5; /* Improve readability with line spacing */
    text-align: justify; /* Justify the text */
    margin: 10px 0; /* Add spacing around the text */
    }

.close-popup {
    position: absolute;
    right: 10px;
    top: -10px;
    color: var(--secondary-color);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.close-popup:hover {
    color: #d4b08c;
}

/* Image Protection Styles */
img {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

@media screen and (max-width: 768px) {
    .popup-content {
        width: 200px;
        margin: 40% auto;
    }
    
    .popup-image {
        width: 180px;
        height: 180px;
    }

    .popup-name {
        font-size: 1.3em;
    }
}

.footer {
    background: var(--gradient-start);
    padding: 20px 0;
    text-align: center;
    margin-top: 50px;
    border-top: 1px solid rgba(196, 164, 132, 0.2);
}

.footer-content {
    color: var(--secondary-color);
    font-size: 0.9em;
}

.footer-content p {
    margin: 5px 0;
}

@media screen and (max-width: 768px) {
    .kalima {
        font-size: 1.8em;
        padding: 20px 15px 5px 15px;
    }
    
    .kalima-container {
        margin-bottom: 5px;
        padding: 12px 12px 0 12px;
    }
    
    .profile-image {
        width: 200px;
        height: 200px;
    }
    
    .name {
        font-size: 2.5em;
    }
    
    .title {
        font-size: 1.4em;
    }
    
    .organization {
        font-size: 1.2em;
    }
    
    .social-icon {
        font-size: 1.5em;
        margin: 0 12px;
    }
    
    .container {
        padding: 20px;
    }
    
    .takbir {
        font-size: 1em;
    }
    
    .takbir-container {
        padding: 0 15px;
    }
    
    .footer {
        padding: 15px 0;
        margin-top: 30px;
    }
    
    .popup-content {
        width: 80%;
        margin: 30% auto;
    }
    
    .popup-image {
        width: 150px;
        height: 150px;
    }
}

@media screen and (max-width: 480px) {
    .profile-image {
        width: 180px;
        height: 180px;
    }

    .name {
        font-size: 2em;
    }

    .organization {
        font-size: 1em;
    }

    .social-icon {
        font-size: 1.4em;
        margin: 0 10px;
    }

    section {
        padding: 20px;
    }
    
    .takbir {
        font-size: 0.9em;
    }
    
    .takbir-container {
        padding: 0 10px;
    }
}

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

@keyframes slideInDown {
    from {
        transform: translateY(-70px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

@keyframes borderPulse {
    0% { box-shadow: 0 0 20px rgba(196, 164, 132, 0.1); }
    50% { box-shadow: 0 0 30px rgba(196, 164, 132, 0.2); }
    100% { box-shadow: 0 0 20px rgba(196, 164, 132, 0.1); }
}

@keyframes subtleFloat {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(20px, 20px);
    }
}

@keyframes rotateBorder {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotateLight {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}

@keyframes glowPulse {
    0% {
        filter: drop-shadow(0 0 20px rgba(196, 164, 132, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 30px rgba(196, 164, 132, 0.6));
    }
    100% {
        filter: drop-shadow(0 0 20px rgba(196, 164, 132, 0.4));
    }
}