.about-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8, <svg viewBox='0 0 1200 600' xmlns='http://www.w3.org/2000/svg'> <defs> <pattern id='hex' patternUnits='userSpaceOnUse' width='60' height='52'> <polygon points='30,0 60,15 60,45 30,60 0,45 0,15' stroke='%23f7a800' stroke-width='1' fill='none'/> </pattern> <linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'> <stop offset='0%' style='stop-color:%23ee1d57; stop-opacity:0.1' /> <stop offset='100%' style='stop-color:%23f7a800; stop-opacity:0.1' /> </linearGradient> </defs> <rect width='1200' height='600' fill='url(%23grad1)'/> <rect width='1200' height='600' fill='url(%23hex)'/> </svg>");
    background-repeat: repeat;
    background-size: cover;
    opacity: 0.2;
    pointer-events: none;
    border-radius: 8px;
}
.message-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8, <svg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg'> <path d='M0,100 C150,60 300,140 450,100 S750,100 900,80 S1050,120 1200,100' stroke='%23ee1d57' stroke-width='3' fill='none'/> <path d='M0,110 Q200,40 400,110 T800,110 T1200,110' stroke='%23f7a800' stroke-width='3' fill='none' stroke-dasharray='8,6'/> <circle cx='150' cy='105' r='5' fill='%23ee1d57'/> <circle cx='600' cy='100' r='5' fill='%23f7a800'/> <circle cx='1050' cy='95' r='5' fill='%23ee1d57'/> </svg>");
    background-repeat: no-repeat;
    background-position: bottom 10px center;
    background-size: contain;
    opacity: 0.12;
    pointer-events: none;
}

.vision-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8, <svg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg'> <path d='M0,90 Q100,30 200,90 T400,90 T600,90 T800,90 T1000,90 T1200,90' stroke='%23f7a800' stroke-width='4' stroke-dasharray='5,10' fill='none'/> <circle cx='100' cy='90' r='6' fill='%23ee1d57'/> <circle cx='103' cy='78' r='4' fill='%23ee1d57'/> <circle cx='94' cy='84' r='4' fill='%23ee1d57'/> <circle cx='300' cy='90' r='6' fill='%23ee1d57'/> <circle cx='303' cy='78' r='4' fill='%23ee1d57'/> <circle cx='294' cy='84' r='4' fill='%23ee1d57'/> <circle cx='500' cy='90' r='6' fill='%23ee1d57'/> <circle cx='503' cy='78' r='4' fill='%23ee1d57'/> <circle cx='494' cy='84' r='4' fill='%23ee1d57'/> <circle cx='700' cy='90' r='6' fill='%23ee1d57'/> <circle cx='703' cy='78' r='4' fill='%23ee1d57'/> <circle cx='694' cy='84' r='4' fill='%23ee1d57'/> </svg>");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    opacity: 0.15;
    pointer-events: none;
}
.our-values-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8, <svg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg'> <path d='M0,90 C200,30 400,150 600,90 S1000,90 1200,80' stroke='%23ee1d57' stroke-width='3' fill='none'/> <path d='M0,105 Q300,50 600,105 T1200,105' stroke='%23f7a800' stroke-width='3' fill='none' stroke-dasharray='10,6'/> <circle cx='200' cy='95' r='6' fill='%23f7a800'/> <circle cx='600' cy='90' r='6' fill='%23ee1d57'/> <circle cx='1000' cy='85' r='6' fill='%23f7a800'/> </svg>");
    background-repeat: no-repeat;
    background-position: bottom 20px center;
    background-position-y: 100%;
    background-size: contain;
    opacity: 0.14;
    pointer-events: none;
}

.services-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.12;
    background-image: url("data:image/svg+xml;utf8,\
<svg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg'>\
<path d='M0,100 C250,40 950,160 1200,100' stroke='%23ee1d57' stroke-width='2.5' fill='none'/>\
<path d='M0,110 Q400,30 800,110 T1200,110' stroke='%23f7a800' stroke-width='2' fill='none' stroke-dasharray='10,6'/>\
<rect x='100' y='95' width='6' height='6' fill='%23f7a800'/>\
<rect x='550' y='105' width='6' height='6' fill='%23ee1d57'/>\
<rect x='1000' y='100' width='6' height='6' fill='%23f7a800'/>\
<text x='180' y='90' font-size='18' fill='%23ee1d57' font-family='Arial'>؟</text>\
<text x='600' y='100' font-size='22' fill='%23f7a800' font-family='Arial'>؟</text>\
<text x='1030' y='85' font-size='20' fill='%23ee1d57' font-family='Arial'>؟</text>\
</svg>");
    background-repeat: no-repeat;
    background-position: bottom 20px center;
    background-position-y: 100%;
    background-size: contain;
    pointer-events: none;
}
.why-choose-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8,\
<svg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg'>\
<path d='M0,100 C150,60 300,140 450,100 S750,100 900,80 S1050,120 1200,100' stroke='%23f7a800' stroke-width='3' fill='none'/>\
<path d='M0,110 Q200,40 400,110 T800,110 T1200,110' stroke='%23ee1d57' stroke-width='3' fill='none' stroke-dasharray='8,6'/>\
<circle cx='150' cy='105' r='5' fill='%23ee1d57'/>\
<circle cx='600' cy='100' r='5' fill='%23f7a800'/>\
<circle cx='1050' cy='95' r='5' fill='%23ee1d57'/>\
</svg>");
    background-repeat: no-repeat;
    background-position: bottom 20px center;
    background-size: contain;
    opacity: 0.14;
    pointer-events: none;
}

.authenticity-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'> <path d='M0,250 Q75,200 150,250 T300,250' stroke='%23ee1d57' stroke-width='2' fill='none' opacity='0.2'/> <polygon points='150,240 158,260 180,260 162,275 170,295 150,282 130,295 138,275 120,260 142,260' fill='none' stroke='%23f7a800' stroke-width='1.5' opacity='0.3'/> <circle cx='60' cy='260' r='3' fill='%23f7a800' opacity='0.3'/> <circle cx='120' cy='270' r='4' fill='%23ee1d57' opacity='0.3'/> <circle cx='240' cy='255' r='3' fill='%23f7a800' opacity='0.3'/> </svg>");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    opacity: 1.15;
    pointer-events: none;
}

.creativity-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8, <svg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'> <path d='M0,260 C80,180 220,340 300,260' stroke='%23ee1d57' stroke-width='2' fill='none' opacity='0.3'/> <circle cx='50' cy='220' r='4' fill='%23f7a800' opacity='0.4'/> <circle cx='90' cy='240' r='6' fill='%23ee1d57' opacity='0.4'/> <circle cx='130' cy='260' r='5' fill='%23f7a800' opacity='0.4'/> <circle cx='180' cy='230' r='4' fill='%23ee1d57' opacity='0.4'/> <circle cx='240' cy='250' r='3' fill='%23f7a800' opacity='0.4'/> <polygon points='150,240 160,255 145,255' fill='%23f7a800' opacity='0.6'/> <polygon points='180,270 190,285 175,285' fill='%23ee1d57' opacity='0.6'/> </svg>");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    opacity: 1.15;
    pointer-events: none;
    border-radius: 8px;
}

.message2-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8, <svg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'> <path d='M0,250 Q75,200 150,250 T300,250' stroke='%23ee1d57' stroke-width='2' fill='none' opacity='0.2'/> <g opacity='0.4'> <rect x='135' y='225' width='30' height='20' rx='2' ry='2' fill='%23ffffff' stroke='%23f7a800' stroke-width='1.5'/> <polyline points='135,225 150,237 165,225' fill='none' stroke='%23ee1d57' stroke-width='1.5'/> </g> <circle cx='60' cy='260' r='3' fill='%23f7a800' opacity='0.3'/> <circle cx='120' cy='270' r='4' fill='%23ee1d57' opacity='0.3'/> <circle cx='240' cy='255' r='3' fill='%23f7a800' opacity='0.3'/> </svg>");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    opacity: 1.15;
    pointer-events: none;
}

.community-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8, <svg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'> <path d='M0,250 Q75,200 150,250 T300,250' stroke='%23ee1d57' stroke-width='2' fill='none' opacity='0.2'/> <circle cx='130' cy='240' r='7' fill='%23f7a800' opacity='0.8'/> <circle cx='150' cy='235' r='8' fill='%23ee1d57' opacity='0.8'/> <circle cx='170' cy='240' r='7' fill='%23f7a800' opacity='0.8'/> <rect x='123' y='247' width='14' height='8' rx='2' ry='2' fill='%23f7a800' opacity='0.6'/> <rect x='143' y='244' width='14' height='10' rx='2' ry='2' fill='%23ee1d57' opacity='0.6'/> <rect x='163' y='247' width='14' height='8' rx='2' ry='2' fill='%23f7a800' opacity='0.6'/> <circle cx='60' cy='260' r='3' fill='%23f7a800' opacity='0.3'/> <circle cx='120' cy='270' r='4' fill='%23ee1d57' opacity='0.3'/> <circle cx='240' cy='255' r='3' fill='%23f7a800' opacity='0.3'/> </svg>");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    opacity: 1.15;
    pointer-events: none;
}

.quality-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8, <svg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'> <path d='M0,250 Q75,200 150,250 T300,250' stroke='%23ee1d57' stroke-width='2' fill='none' opacity='0.2'/> <g opacity='0.9'> <circle cx='150' cy='245' r='14' fill='%23ffffff' stroke='%23f7a800' stroke-width='2'/> <polygon points='150,232 153,240 161,240 155,246 158,254 150,249 142,254 145,246 139,240 147,240' fill='%23ee1d57' /> </g> <circle cx='60' cy='260' r='3' fill='%23f7a800' opacity='0.3'/> <circle cx='120' cy='270' r='4' fill='%23ee1d57' opacity='0.3'/> <circle cx='240' cy='255' r='3' fill='%23f7a800' opacity='0.3'/> </svg>");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    opacity: 1.15;
    pointer-events: none;
}





/***************Services************/

.handmade-bg {
    position: relative;
}

    .handmade-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image: url("data:image/svg+xml;utf8, <svg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'> <defs> <pattern id='dots' x='0' y='0' width='20' height='20' patternUnits='userSpaceOnUse'> <circle cx='2' cy='2' r='1' fill='%23ee1d57'/> </pattern> </defs> <rect width='300' height='300' fill='url(%23dots)' opacity='0.05'/> <path d='M30,260 Q150,200 270,260' stroke='%23ee1d57' stroke-width='2' fill='none' opacity='0.3'/> <g opacity='0.9'> <path d='M150 240 L145 255 L155 255 Z' fill='%23f7a800' /> <circle cx='150' cy='250' r='6' fill='%23ffffff' stroke='%23f7a800' stroke-width='1.5'/> </g> </svg>");
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: cover;
        opacity: 0.6;
        pointer-events: none;
        border-radius: 8px;
    }


.event-decor-bg {
    position: relative;
}

    .event-decor-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'><path d='M0 60 Q50 20 100 60 T200 60 T300 60' fill='none' stroke='%23ee1d57' stroke-width='2' opacity='0.2'/><polygon points='10,60 20,80 0,80' fill='%23f7a800' opacity='0.4'/><polygon points='60,60 70,80 50,80' fill='%23ee1d57' opacity='0.4'/><polygon points='110,60 120,80 100,80' fill='%23f7a800' opacity='0.4'/><polygon points='160,60 170,80 150,80' fill='%23ee1d57' opacity='0.4'/><polygon points='210,60 220,80 200,80' fill='%23f7a800' opacity='0.4'/><circle cx='260' cy='90' r='5' fill='%23ee1d57' opacity='0.2'/><path d='M250 100 A10 10 0 0 1 270 100' stroke='%23f7a800' stroke-width='2' fill='none' opacity='0.2'/></svg>");
        background-repeat: no-repeat;
        background-position: top center;
        background-position-y: 20px;
        background-size: contain;
        pointer-events: none;
        opacity: 1;
    }


.edu-giveaway-bg {
    position: relative;
}

    .edu-giveaway-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        opacity: 0.18;
        background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'> <g> <rect x='40' y='180' width='70' height='90' rx='6' fill='%23f7a800'/> <line x1='50' y1='190' x2='100' y2='190' stroke='%23fff' stroke-width='2'/> <line x1='50' y1='200' x2='100' y2='200' stroke='%23fff' stroke-width='2'/> <line x1='50' y1='210' x2='100' y2='210' stroke='%23fff' stroke-width='2'/> </g> <g> <polygon points='220,80 235,85 140,220 130,205' fill='%23ee1d57'/> <rect x='138' y='207' width='6' height='15' fill='%23f7a800'/> </g> <g> <rect x='180' y='160' width='15' height='80' fill='%23999999' transform='rotate(45 190 200)'/> <line x1='185' y1='165' x2='220' y2='200' stroke='%23fff' stroke-width='1'/> </g> <circle cx='60' cy='70' r='4' fill='%23f7a800'/> <circle cx='250' cy='60' r='3' fill='%23ee1d57'/> </svg>");
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 80%;
        pointer-events: none;
    }


.edu-workshop-bg {
    position: relative;
}

    .edu-workshop-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        opacity: 0.18;
        background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'> <g> <rect x='50' y='180' width='80' height='60' rx='5' fill='%23f7a800'/> <line x1='60' y1='190' x2='120' y2='190' stroke='%23ffffff' stroke-width='2'/> <line x1='60' y1='200' x2='120' y2='200' stroke='%23ffffff' stroke-width='2'/> </g> <g> <polygon points='200,100 240,120 200,140 160,120' fill='%23ee1d57'/> <rect x='190' y='120' width='20' height='10' fill='%23ffffff' rx='2'/> </g> <g> <rect x='135' y='215' width='10' height='25' fill='%23999999'/> <rect x='150' y='215' width='5' height='25' fill='%23ee1d57'/> <rect x='160' y='215' width='8' height='25' fill='%23f7a800'/> </g> <circle cx='250' cy='80' r='5' fill='%23ee1d57'/> <circle cx='40' cy='70' r='4' fill='%23f7a800'/> </svg>");
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 80%;
        pointer-events: none;
    }

.volunteer-bg {
    position: relative;
}

    .volunteer-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        opacity: 0.18;
        background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'> <g> <path d='M150,120 Q170,90 190,120 Q210,150 150,190 Q90,150 110,120 Q130,90 150,120 Z' fill='%23ee1d57'/> <circle cx='60' cy='240' r='4' fill='%23f7a800'/> <circle cx='240' cy='60' r='6' fill='%23f7a800' opacity='0.4'/> </g> <g> <path d='M130,210 Q140,195 150,210 Q160,225 170,210' stroke='%23f7a800' stroke-width='2' fill='none'/> <path d='M145,150 A25,25 0 1,0 155,150' fill='%23ffffff' stroke='%23ee1d57' stroke-width='2'/> </g> </svg>");
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
        pointer-events: none;
    }




.auth-heading {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
    color: #ee1d57;
    font-weight: bold;
    font-size: 2rem;
    padding: 10px 20px;
}

    .auth-heading::before,
    .auth-heading::after {
        content: "";
        position: absolute;
        width: 25px;
        height: 25px;
        border: 2px solid #ee1d57;
        border-radius: 50%;
        opacity: 0.3;
        animation: pulse 3s infinite ease-in-out;
    }

    .auth-heading::before {
        top: -10px;
        left: -30px;
    }

    .auth-heading::after {
        bottom: -10px;
        right: -30px;
    }

.services-card:hover .auth-heading {
    color: #ffffff !important;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.1;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.3;
    }
}

#services {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.srv-card-main {
    display: flex;
    flex-direction: column;
}

.services-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 340px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 15px;
    background-color: white;
}

    .services-card .flex-grow-1 {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

.auth-heading {
    min-height: 60px;
}

.services-card p {
    min-height: 80px;
    font-weight: 800;
}

/*Choose Us*/
:root {
    --primary-color: #EE1D57;
    --secondary-color: #FF4677;
    --text-color: black;
    --light-color: #f9f9f9;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

/* Best Practices: Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Section styling */
.why-choose-us {
    padding: 3rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* Content styling */
.why-content {
    background: white;
    border-radius: 15px;
    padding: 3rem;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}


    .why-content::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
    }

    .why-content p {
        font-size: 1.2rem;
        line-height: 1.8;
        margin-bottom: 1.5rem;
        position: relative;
        padding-left: 1.5rem;
        font-weight:600;
    }

        .why-content p::before {
            content: '•';
            position: absolute;
            left: 0;
            color: var(--primary-color);
            font-weight: bold;
        }

.highlight {
    color: var(--primary-color);
    font-weight: bold;
}

/* Responsive design */
@media (max-width: 768px) {
    .why-choose-us {
        padding: 1rem 1rem;
    }

    .why-content {
        padding: 2rem 1.5rem;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .why-content p {
        font-size: 1.1rem;
    }
}



html[lang="ar"] .why-content::before {
    left: auto;
    right: 0;
    background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
}


html[lang="ar"] .why-content p {
    padding-left: 0;
    padding-right: 1.5rem;
    text-align: right;
}


    html[lang="ar"] .why-content p::before {
        left: auto;
        right: 0;
    }
@media (max-width: 468px) {
    .image-site {
        width: 200px;
        height: auto;
    }
}