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

DAOODY WEBSITE

style.css

Author : ChatGPT

Version : 1.0

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



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

GENERAL

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

body{

    background:var(--background);

    color:var(--paragraph);

    font-family:var(--font-ar);

    transition:var(--transition);

}



section{

    position:relative;

}



.container{

    width:min(92%,1280px);

    margin-inline:auto;

}



html{

    scroll-padding-top:90px;

}



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

HEADER

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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:var(--header-height);

    z-index:var(--z-fixed);

    transition:var(--transition);

    background:transparent;

}



.header.scrolled{

    background:rgba(21,29,54,.92);

    backdrop-filter:blur(18px);

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


    
}



.header .container{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


/*==========================================================
HAMBURGER BUTTON
==========================================================*/

.menu-toggle{

    display:none;

    width:52px;

    height:52px;

    border:none;

    background:transparent;

    cursor:pointer;

    position:relative;

    z-index:2000;

}

.menu-toggle span{

    position:absolute;

    left:11px;

    width:30px;

    height:3px;

    border-radius:50px;

    background:var(--heading);

    transition:.35s ease;

}

.menu-toggle span:nth-child(1){

    top:16px;

}

.menu-toggle span:nth-child(2){

    top:24px;

}

.menu-toggle span:nth-child(3){

    top:32px;

}


/*==========================================================
MENU ANIMATION
==========================================================*/

.menu-toggle.active span:nth-child(1){

    transform:rotate(45deg);

    top:24px;

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:rotate(-45deg);

    top:24px;

}

[data-theme="dark"] .menu-toggle span{

    background:#ffffff;

}

[data-theme="light"] .menu-toggle span{

    background:var(--heading);

}


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

LOGO

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

.logo{

    position:relative;

    display:flex;

    align-items:center;

}

.logo img{

    height:150px;

    transition:.3s;

}

.logo-white{

    display:none;

}

.header.scrolled .logo-light{

    display:none;

}

.header.scrolled .logo-white{

    display:block;

}





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

NAVIGATION

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

.nav{

    display:flex;

    align-items:center;

    gap:36px;

}



.nav a{


    color:var(--heading);

    font-weight:600;

    position:relative;

    transition:var(--transition);

}



.nav a::after{

    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    width:0;

    height:3px;

    background:var(--primary);

    transition:var(--transition);

}



.nav a:hover{

    color:var(--primary);

}



.nav a:hover::after{

    width:100%;

}






/*==========================================================
HEADER SCROLLED NAVIGATION
==========================================================*/

.header.scrolled .nav a{

    color:#ffffff;

}

.header.scrolled .nav a:hover{

    color:#ffffff;

}

.header.scrolled .nav a::after{

    background:#ffffff;

}

@media (max-width:992px){

    [data-theme="light"] .nav.active a{

        color:var(--heading) !important;

    }

    [data-theme="dark"] .nav.active a{

        color:#ffffff !important;

    }

}



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

HEADER ACTIONS

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

.actions{

    display:flex;

    align-items:center;

    gap:14px;

}



.actions button{

    width:46px;

    height:46px;

    border-radius:50%;

    background:transparent;

    color:var(--heading);

    border:1px solid var(--border);

    transition:var(--transition);

}



.actions button:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-3px);

}



.btn-whatsapp{

    padding:14px 26px;

    background:var(--gradient-primary);

    color:#fff;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

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

}



.btn-whatsapp:hover{

    transform:translateY(-4px);

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

}



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

HERO

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

.hero{

    min-height:100vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

    padding-top:120px;

    overflow:hidden;

}



.hero::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:rgba(46,99,197,.08);

    top:-220px;

    right:-220px;

    filter:blur(80px);

}



.hero::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:rgba(255, 0, 55, 0.08);

    border-radius:50%;

    bottom:-180px;

    left:-180px;

    filter:blur(80px);

}



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

HERO IMAGE

==========================================================*/
.hero-left{
    position:relative;
}

.hero-left img{
    width:150%;
    max-width:520px;
    margin:auto;
    display:block;
    filter:grayscale(150%);
}



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

HERO CONTENT

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

.hero-right{

    display:flex;

    flex-direction:column;

    gap:24px;

}



.hero-logo{

    width:230px;

}



.hero h1{

    font-size:var(--hero-title);

    color:var(--heading);

    line-height:1.1;

}



.hero h2{

    font-size:1.4rem;

    color:var(--primary);

}



.hero p{

    max-width:620px;

    line-height:1.9;

}



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

PRIMARY BUTTON

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

.primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    padding:18px 36px;

    border-radius:999px;

    background:var(--gradient-primary);

    color:#fff;

    font-weight:700;

    transition:var(--transition);

}



.primary-btn:hover{

    transform:translateY(-5px);

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

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

ABOUT SECTION

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

.about{

    background:var(--surface);

}



.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}



.about-image{

    position:relative;

}



.about-image img{

    width:100%;

    border-radius:var(--card-radius);

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

}



.about-content{

    display:flex;

    flex-direction:column;

    gap:24px;

}



.section-title{

    font-size:var(--fs-4xl);

    color:var(--heading);

    position:relative;

}



.section-title::after{

    content:"";

    width:90px;

    height:5px;

    background:var(--primary);

    display:block;

    margin-top:18px;

    border-radius:999px;

}



.section-description{

    font-size:1.08rem;

    line-height:2;

    color:var(--paragraph);

}



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

STATISTICS

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

.stats{

    padding:100px 0;

}



.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}



.stat-card{

    background:var(--surface-card);

    border:1px solid var(--border);

    border-radius:var(--card-radius);

    padding:40px 30px;

    text-align:center;

    transition:var(--transition);

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

}



.stat-card:hover{

    transform:translateY(-10px);

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

}



.stat-number{

    font-size:3.5rem;

    font-weight:800;

    color:var(--primary);

    font-family:var(--font-en);

}



.stat-title{

    margin-top:14px;

    color:var(--paragraph);

    font-size:1rem;

}



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

SERVICES

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

.services{

    background:var(--background);

}



.services-grid{

    margin-top:70px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.service-card{

    position:relative;

    background:var(--surface-card);

    border-radius:var(--card-radius);

    padding:40px;

    border:1px solid var(--border);

    transition:var(--transition);

    overflow:hidden;

}



.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

    135deg,

    rgba(46,99,197,.06),

    transparent

    );

    opacity:0;

    transition:var(--transition);

}



.service-card:hover::before{

    opacity:1;

}



.service-card:hover{

    transform:translateY(-12px);

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

}



.service-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gradient-primary);

    color:#fff;

    font-size:30px;

    margin-bottom:28px;

}



.service-card h3{

    margin-bottom:18px;

    font-size:1.4rem;

}



.service-card p{

    line-height:1.9;

}



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

SERVICE BUTTON

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

.service-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:30px;

    color:var(--primary);

    font-weight:700;

    transition:var(--transition);

}



.service-btn:hover{

    gap:18px;

}



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

SECTION SPACING

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

.about,

.stats,

.services{

    position:relative;

    overflow:hidden;

}



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

DECORATION

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

.services::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(46,99,197,.05);

    top:-150px;

    left:-180px;

    filter:blur(70px);

}



.services::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(214,40,40,.05);

    bottom:-120px;

    right:-120px;

    filter:blur(70px);

}

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

ABOUT SECTION

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

.about{

    background:var(--surface);

}



.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}



.about-image{

    position:relative;

}



.about-image img{

    width:100%;

    border-radius:var(--card-radius);

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

}



.about-content{

    display:flex;

    flex-direction:column;

    gap:24px;

}



.section-title{

    font-size:var(--fs-4xl);

    color:var(--heading);

    position:relative;

}



.section-title::after{

    content:"";

    width:90px;

    height:5px;

    background:var(--primary);

    display:block;

    margin-top:18px;

    border-radius:999px;

}



.section-description{

    font-size:1.08rem;

    line-height:2;

    color:var(--paragraph);

}



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

STATISTICS

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

.stats{

    padding:100px 0;

}



.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}



.stat-card{

    background:var(--surface-card);

    border:1px solid var(--border);

    border-radius:var(--card-radius);

    padding:40px 30px;

    text-align:center;

    transition:var(--transition);

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

}



.stat-card:hover{

    transform:translateY(-10px);

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

}



.stat-number{

    font-size:3.5rem;

    font-weight:800;

    color:var(--primary);

    font-family:var(--font-en);

}



.stat-title{

    margin-top:14px;

    color:var(--paragraph);

    font-size:1rem;

}



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

SERVICES

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

.services{

    background:var(--background);

}



.services-grid{

    margin-top:70px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.service-card{

    position:relative;

    background:var(--surface-card);

    border-radius:var(--card-radius);

    padding:40px;

    border:1px solid var(--border);

    transition:var(--transition);

    overflow:hidden;

}



.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

    135deg,

    rgba(46,99,197,.06),

    transparent

    );

    opacity:0;

    transition:var(--transition);

}



.service-card:hover::before{

    opacity:1;

}



.service-card:hover{

    transform:translateY(-12px);

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

}



.service-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gradient-primary);

    color:#fff;

    font-size:30px;

    margin-bottom:28px;

}



.service-card h3{

    margin-bottom:18px;

    font-size:1.4rem;

}



.service-card p{

    line-height:1.9;

}



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

SERVICE BUTTON

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

.service-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:30px;

    color:var(--primary);

    font-weight:700;

    transition:var(--transition);

}



.service-btn:hover{

    gap:18px;

}



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

SECTION SPACING

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

.about,

.stats,

.services{

    position:relative;

    overflow:hidden;

}



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

DECORATION

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

.services::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(46,99,197,.05);

    top:-150px;

    left:-180px;

    filter:blur(70px);

}



.services::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(214,40,40,.05);

    bottom:-120px;

    right:-120px;

    filter:blur(70px);

}

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

FOOTER

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

.footer{

    position:relative;

    background:var(--dark);

    color:#ffffff;

    padding:90px 0 30px;

    overflow:hidden;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

    margin-bottom:60px;

}

.footer-logo{

    width:220px;

    margin-bottom:25px;

}

.footer p{

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

    line-height:2;

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer-links a{

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

    transition:var(--transition);

}

.footer-links a:hover{

    color:#ffffff;

    transform:translateX(8px);

}

.footer-title{

    color:#ffffff;

    margin-bottom:24px;

    font-size:1.25rem;

}

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer-contact span{

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

}

.footer-bottom{

    padding-top:30px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.footer-bottom p{

    margin:0;

}








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

SOCIAL ICONS

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

.socials{

    display:flex;

    gap:14px;

}

.socials a{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    transition:var(--transition);

}

.socials a:hover{

    background:var(--primary);

    transform:translateY(-5px);

}



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

BACK TO TOP

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

.back-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--gradient-primary);

    color:#fff;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:999;

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

}

.back-top.show{

    opacity:1;

    visibility:visible;

}

.back-top:hover{

    transform:translateY(-6px);

}



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

LOADER

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

.loader{

    position:fixed;

    inset:0;

    background:var(--background);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:.6s;

}

.loader.hidden{

    opacity:0;

    visibility:hidden;

}

.loader-circle{

    width:80px;

    height:80px;

    border-radius:50%;

    border:6px solid rgba(46,99,197,.15);

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

    animation:spin 1s linear infinite;

}



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

ANIMATIONS

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

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;

}

.fade-up.active{

    opacity:1;

    transform:none;

}

.fade-left{

    opacity:0;

    transform:translateX(-60px);

    transition:.8s ease;

}

.fade-left.active{

    opacity:1;

    transform:none;

}

.fade-right{

    opacity:0;

    transform:translateX(60px);

    transition:.8s ease;

}

.fade-right.active{

    opacity:1;

    transform:none;

}

.zoom{

    opacity:0;

    transform:scale(.85);

    transition:.8s ease;

}

.zoom.active{

    opacity:1;

    transform:scale(1);

}



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

KEYFRAMES

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

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}



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

HELPER CLASSES

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

.hidden{

    display:none !important;

}

.text-primary{

    color:var(--primary);

}

.text-center{

    text-align:center;

}

.w-100{

    width:100%;

}

.shadow-lg{

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

}

.rounded{

    border-radius:var(--card-radius);

}

  



/*=========================================
FOOTER
=========================================*/

.footer{

    background:var(--surface);

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

    padding:80px 0 30px;

    margin-top:100px;

}

.footer-top{

    text-align:center;

    max-width:700px;

    margin:0 auto 60px;

}

.footer-top h2{

    font-size:2rem;

    margin-bottom:20px;

}

.footer-top p{

    line-height:1.9;

    margin-bottom:30px;

    color:var(--text-secondary);

}

.footer-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:60px;

    margin:60px 0;

}

.footer-column{

    display:flex;

    flex-direction:column;

}

.footer-column h3{

    margin-bottom:25px;

    font-size:1.2rem;

}

.footer-column a{

    color:var(--text);

    text-decoration:none;

    margin-bottom:14px;

    transition:.3s;

}

.footer-column a:hover{

    color:var(--primary);

    padding-right:8px;

}

.footer-column p{

    margin-bottom:15px;

    line-height:1.8;

    color:var(--text-secondary);

}

.footer-logo{

    width:170px;

    margin-bottom:25px;

}

.footer hr{

    border:none;

    height:1px;

    background:rgba(0, 0, 0, 0.184);

    margin:40px 0;

}

.footer-bottom{

    text-align:center;

}

.footer-bottom p{

    color:var(--text-secondary);

    font-size:.95rem;

}

/*==========================
MOBILE MENU BUTTON
==========================*/

.menu-toggle{

    display:none;

    font-size:30px;

    background:none;

    border:none;

    color:var(--heading);

    cursor:pointer;

}



/*==========================================================
FORCE HAMBURGER COLORS
==========================================================*/

[data-theme="light"] .menu-toggle span{

    background: var(--heading) !important;

}

[data-theme="light"] .header.scrolled .menu-toggle span{

    background: #ffffff !important;

}

[data-theme="dark"] .menu-toggle span{

    background: #ffffff !important;

}
/*==========================================================
GALLERY حق المعرض كروت 
==========================================================*/

.gallery{

    padding:100px 0;

}

.gallery h2{

    text-align:center;

    margin-bottom:40px;

}

.gallery-slider{

    display:flex;

    gap:20px;

    overflow-x:auto;

    padding:10px 20px 20px;

    scroll-behavior:smooth;

}

.gallery-slider::-webkit-scrollbar{

    height:8px;

}

.gallery-slider::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

.gallery-slider img{

    width:360px;

    height:240px;

    object-fit:cover;

    flex-shrink:0;

    border-radius:22px;

    transition:.35s;

    cursor:pointer;

}

.gallery-slider img:hover{

    transform:translateY(-6px);

}

.gallery-slider img{

    width:360px;

    height:240px;

    object-fit:cover;

    flex-shrink:0;

    border-radius:22px;

    transition:.35s ease;

    filter:drop-shadow(0 0 8px rgba(255,40,40,.12));

}

/* يعمل فقط على أجهزة الماوس */
@media (hover:hover){

    .gallery-slider img:hover{

        transform:translateY(-5px);

        filter:drop-shadow(0 0 14px rgba(255,40,40,.20));

    }

}


/*==========================================================
MENU OVERLAY
==========================================================*/

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(4px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:998;

}

ده حق  المنيو اختفاء عند الضغط يي--

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}

.menu-overlay{

    position:fixed;

    inset:0;

    background:transparent;

    display:none;

    z-index:1000;

}

.menu-overlay.active{

    display:block;

}



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

END OF STYLE.CSS

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