* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
    display: none;
}

html, body {
    overflow: hidden;
    height: 100%;
    width: 100%;
}

body {
    color: #333;
    direction: rtl;
    line-height: 1.6;
}
body::-webkit-scrollbar {
    display: none;
}
p{
    text-align: right;
    font-size: 2.8vh;
}
.container {
    max-width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: row-reverse; /* RTL layout */
}
.container::-webkit-scrollbar {
    display: none;
}
/* Left sidebar (appears on left in RTL) */
.sidebar {
    height: 40vh;
    width: 100%;
    padding: 2vh 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border-radius: 3vh;
    box-shadow: 0 0 10px 2px #4285f4, 0 0 0 0 #4285f4;
    border: 2px solid #6197ee;
    position: relative;
    overflow: visible;
    transition: box-shadow 0.5s, border 0.5s;
}


@keyframes sidebar-round-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes sidebar-shadow-pulse {
    0%, 100% { box-shadow: 0 0 10px 2px #59b3f0, 0 0 0 0 #4285f4; }
    25% { box-shadow: 0 0 18px 6px #a8d9fa, 0 0 0 0 #59b3f0; }
    50% { box-shadow: 0 0 14px 4px #4285f4, 0 0 0 0 #a8d9fa; }
    75% { box-shadow: 0 0 18px 6px #59b3f0, 0 0 0 0 #4285f4; }
}

@keyframes sidebar-border-flow {
    0% { border-image-source: linear-gradient(120deg, #59b3f0, #4285f4, #a8d9fa, #59b3f0); }
    100% { border-image-source: linear-gradient(480deg, #a8d9fa, #59b3f0, #4285f4, #a8d9fa); }
}


.profile-img {
    width: 17vh;
    height: 17vh;
    border-radius: 50%;
    background-color: #e0e0e0;
    margin: 2vh 0;
    box-shadow: 0 12px 16px 0px rgba(0,0,0,0.25);
}

.sidebar-title {
    color: #4285f4;
    margin: 3vh 0 1vh 0;
    font-size: 4vh;
    
}

.sidebar-text {
    font-size: 1vh;
    color: #555;
    margin-bottom: 15px;
    align-self: flex-start;
}

.donation-button {
    width: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(120deg, #59b3f0 0%, #a8d9fa 50%, #4285f4 100%);
    background-size: 200% 200%;
    color: white;
    text-align: center;
    padding: 1vh 3vh;
    border-radius: 50vh;
    text-decoration: none;
    font-weight: bold;
    margin: 3vh 0;
    font-size: 3vh;
    box-shadow: 0 0 30px 10px rgba(66,133,244,0.25), 0 4px 40px 0 rgba(126,203,255,0.18);
    border: none;
    outline: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(.68,-0.55,.27,1.55), box-shadow 0.5s, background-position 1.2s;
}

@keyframes donation-waterflow {
    0% { background-position: 0% 50%; }
    25% { background-position: 50% 60%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 40%; }
    100% { background-position: 0% 50%; }
}

.donation-button::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle, rgba(126,203,255,0.18) 0%, rgba(66,133,244,0) 80%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

@keyframes donation-waterglow {
    0%, 100% { opacity: 0.5; filter: blur(0px); }
    50% { opacity: 0.7; filter: blur(4px); }
}


@keyframes donation-droplet {
    0%, 100% { transform: translateY(-50%) scale(1) rotate(0deg); opacity: 0.6; }
    20% { transform: translateY(-60%) scale(1.15) rotate(8deg); opacity: 0.8; }
    40% { transform: translateY(-50%) scale(1) rotate(-8deg); opacity: 0.6; }
    60% { transform: translateY(-40%) scale(1.15) rotate(8deg); opacity: 0.8; }
    80% { transform: translateY(-50%) scale(1) rotate(-8deg); opacity: 0.6; }
}

.donation-button span {
    position: relative;
    z-index: 3;
    display: inline-block;
    transition: color 0.5s, text-shadow 0.5s, transform 0.5s;
    -webkit-text-stroke: 2vh #0b4075;
    text-stroke: 2vh #205081;
}

.donation-button:hover {
    transform: scale(1.06) rotate(-1deg);
    background-position: 100% 50%;
}

.donation-button:hover span {
    color: #eaf6ff;
    text-shadow: 0 0 20px #7ecbff, 0 0 40px #4285f4;
    transform: scale(1.08) rotate(1deg);
}

.donation-button:hover::before {
    animation: donation-waterglow 3s ease-in-out infinite;
}

.donation-button:hover::after {
    transform: translateY(-50%) scale(1.3) rotate(12deg);
    opacity: 0.9;
}

.sidebar-footer p{
    text-align: center;
    font-size: 2.3vh;
}
/* Main content */
.main-content {
    padding: 2vh 3vh;
}

.header-text {
    margin-bottom: 2vh;
    font-weight: bold;
}

.header-link {
    color: #4285f4;
    text-decoration: none;
    font-weight: bold;
    font-size: 2.6vh;
}

.content-paragraph {
    margin-bottom: 2vh;
    width: 100%;
}

.section-title {
    color: #4285f4;
    font-size: 4vh;
    align-self: flex-start;
    margin: 0;
}
.white-box {
    background-color: white;
    padding: 1vh 2vh;
    border-radius: 3vh;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 2vh;
    width: 100%;
    margin-top: 2vh;
   
}

.social-icons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2vh;
    width: fit-content;  /* Adjust width to content */
    margin: 0 auto;     /* Center the container */
}

.social-icons-container .btn-circle {
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    margin: 0;          /* Remove margin to use gap instead */
}

.social-icons-container .btn-circle i {
    color: #fff;
    font-size: 2vh;
}

/* LinkedIn specific styles */
.social-icons-container .btn-circle .fa-linkedin-in {
    background-color: #0077b5;
}

.social-icons-container .btn-circle:hover .fa-linkedin-in {
    background-color: #005f8e;
}

/* X/Twitter specific styles */
.social-icons-container .btn-circle .fa-x {
    background-color: #000;
}

.social-icons-container .btn-circle:hover .fa-x {
    background-color: #333;
}

/* Common hover effect */
.social-icons-container .btn-circle:hover {
    transform: scale(1.1);
}

.content-paragraph {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.content-paragraph.visible {
    opacity: 1;
}


.buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 5px 0;
}

.btn-circle {
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.6vh;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    color: white;
}

/* Share button */
.btn-circle:nth-child(1) {
    background: linear-gradient(145deg, #2f9d44, #25802e);
}

.btn-circle:nth-child(1):hover {
    background: linear-gradient(145deg, #33ae4a, #2a9134);
    transform: translateY(-2px);
}

/* Facebook button */
.btn-circle:nth-child(3) {
    background: linear-gradient(145deg, #3b5998, #2f477a);
}

.btn-circle:nth-child(3):hover {
    background: linear-gradient(145deg, #4267B2, #365899);
    transform: translateY(-2px);
}

/* Twitter/X button */
.btn-circle:nth-child(4) {
    background: linear-gradient(145deg, #14171A, #000000);
}

.btn-circle:nth-child(4):hover {
    background: linear-gradient(145deg, #1DA1F2, #14171A);
    transform: translateY(-2px);
}

/* Instagram button */
.btn-circle:nth-child(5) {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.btn-circle:nth-child(5):hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    transform: translateY(-2px);
}

/* Active state for all buttons */
.btn-circle:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

/* Add this if you want a pressed effect when sharing */
.btn-circle.sharing {
    animation: press 0.2s ease-in-out;
}
/* Base button styles */
.btn-circle {
    width: 6vh;
    height: 6vh;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.6vh;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

/* LinkedIn button */
.btn-circle .fa-linkedin-in {
    color: #fff;
    background-color: #0077b5;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 2vh;
}

.btn-circle .fa-linkedin-in:hover {
    background-color: #005f8e;
    transform: scale(1.1);
}

/* X/Twitter button */
.btn-circle .fa-x {
    color: #fff;
    background-color: #000;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 2vh;
}

.btn-circle .fa-x:hover {
    background-color: #333;
    transform: scale(1.1);
}

/* Buttons container */
.buttons {
    display: flex;
    gap: 1.2vh;
    align-items: center;
    justify-content: center;
}