/* ===================================
   GLOBAL SETTINGS
=================================== */


:root{

    --primary:#2563EB;
    --secondary:#06B6D4;
    --success:#10B981;

    --bg:#0F172A;
    --card:#1E293B;

    --text:#F8FAFC;
    --text-light:#CBD5E1;
    --muted:#94A3B8;


    --radius:18px;

    --shadow:
    0 15px 40px rgba(0,0,0,.25);

}



*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

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

    direction:rtl;

    background:

    radial-gradient(
        circle at top right,
        rgba(37,99,235,.18),
        transparent 30%
    ),

    radial-gradient(
        circle at bottom left,
        rgba(6,182,212,.15),
        transparent 30%
    ),

    var(--bg);


    color:var(--text);

    line-height:1.8;

}



a{

    text-decoration:none;

    color:inherit;

}



ul{

    list-style:none;

}



.container{

    width:90%;

    max-width:1200px;

    margin:auto;


}




section{

    padding:120px 0;

}




/* ===================================
        HEADER
=================================== */


header{

    position:fixed;

    top:20px;

    left:50%;

    transform:translateX(-50%);


    width:92%;

    max-width:1300px;


    z-index:1000;

    
}




.navbar{

    height:105px;

    padding:0 35px;

    display:flex;

    justify-content:space-between;

    align-items:center;


    background:
    rgba(15,23,42,.75);


    backdrop-filter:blur(15px);


    border-radius:20px;


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


    box-shadow:var(--shadow);

}

/* ===========================
        NAV CTA BUTTON
=========================== */


.nav-action{

    display:flex;

    align-items:center;

}



.nav-btn{


    padding:12px 22px;


    border-radius:14px;


    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
    );


    color:white;


    font-size:14px;


    font-weight:700;


    transition:.35s;


    box-shadow:

    0 8px 25px rgba(37,99,235,.25);


}





.nav-btn:hover{


    transform:translateY(-3px);


    box-shadow:

    0 15px 35px rgba(6,182,212,.35);


}




/* ===========================
        LOGO ANIMATION
=========================== */


.logo-link{

    display:flex;

    align-items:center;

    width:220px;

    gap:12px;

    transition:.4s ease;

}



/* Logo Image */

.logo img{

    width:55px;

    height:55px;

    object-fit:contain;

    border-radius:12px;

    transition:

    transform .4s ease,

    filter .4s ease,

    box-shadow .4s ease;

}




/* Logo hover */

.logo-link:hover img{


    transform:

    scale(1.12)

    rotate(-5deg);


    filter:

    drop-shadow(
    0 0 15px rgba(37,99,235,.8)
    );


}




/* Brand text */


.logo-text strong{


    font-size:24px;

    font-weight:900;


    transition:.4s ease;


    background:

    linear-gradient(
    90deg,
    #38bdf8,
    #2563eb
    );


    background-clip:text;

    -webkit-background-clip:text;


    -webkit-text-fill-color:transparent;


}





.logo-text span{


    font-size:10px;

    color:#94a3b8;

    transition:.4s ease;


}





.logo-link:hover .logo-text strong{


    letter-spacing:1px;


}



.logo-link:hover .logo-text span{


    color:#38bdf8;


}



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


.menu-toggle{


    display:none;


    width:45px;

    height:40px;


    background:none;


    border:none;


    cursor:pointer;


    flex-direction:column;


    justify-content:center;


    gap:7px;


}





.menu-toggle span{


    width:30px;


    height:3px;


    background:white;


    border-radius:5px;


    transition:.3s;


}




.nav-links{

    display:flex;

    gap:10px;

}




.nav-links a{

    padding:10px 15px;

    border-radius:12px;

    color:var(--text-light);

    transition:.3s;

}



.nav-links a:hover{

    background:
    rgba(37,99,235,.2);

    color:white;

}





/* ===================================
        HERO
=================================== */


#hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:190px;

}



.hero-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

}



.hero-content{

    flex:1;

}




.hero-badge{

    display:inline-block;

    padding:8px 20px;

    background:
    rgba(6,182,212,.15);

    color:var(--secondary);

    border-radius:30px;

    margin-bottom:25px;

}





.hero-content h1{

    font-size:48px;

    line-height:1.6;

    font-weight:900;


    background:

    linear-gradient(
    90deg,
    #38bdf8,
    #2563eb
    );


    background-clip: text;
    -webkit-background-clip: text;


    -webkit-text-fill-color:transparent;


    margin-bottom:25px;

}





.hero-content p{

    max-width:650px;

    color:var(--text-light);

    font-size:19px;

    line-height:2.2;

    margin-bottom:35px;

}





.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:40px;

}




.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:14px 32px;

    border-radius:14px;

    transition:.3s;

    font-weight:600;

}




.btn.primary{

    background:var(--primary);

    color:white;

}




.btn.primary:hover{

    transform:translateY(-4px);

    box-shadow:
    0 10px 30px rgba(37,99,235,.4);

}





.btn.secondary{

    border:

    1px solid rgba(255,255,255,.2);

}




.btn.secondary:hover{

    background:white;

    color:var(--bg);

}





.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}



.hero-features span{


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


    padding:8px 16px;


    border-radius:12px;


    color:var(--text-light);


}




.hero-image{

    flex:.8;

    display:flex;

    justify-content:center;

}




.hero-circle{

    width:380px;

    height:380px;

    padding:8px;

    border-radius:50%;


    background:

    linear-gradient(
    135deg,
    var(--secondary),
    var(--primary)
    );


    box-shadow:

    0 0 80px rgba(37,99,235,.4);


}




.hero-circle img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:50%;

    border:8px solid var(--bg);

}





/* ===================================
        SECTION TITLE
=================================== */


.section-title{

    text-align:center;

    max-width:750px;

    margin:
    0 auto 70px;

}



.section-title span{

    color:var(--secondary);

    font-weight:700;

}



.section-title h2{

    font-size:42px;

    margin:15px 0;

}



.section-title p{

    color:var(--text-light);

    font-size:18px;

}



/* ===================================
        TRUST SECTION
=================================== */


#trust{


    padding:60px 0;


}



.trust-grid{


    display:grid;


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


    gap:25px;


}




.trust-card{


    background:

    rgba(255,255,255,.05);



    border:

    1px solid rgba(255,255,255,.08);



    border-radius:20px;


    padding:35px 20px;


    text-align:center;


    transition:.35s;


}





.trust-card:hover{


    transform:translateY(-10px);


    background:

    rgba(37,99,235,.15);


}





.trust-card h3{


    font-size:42px;


    font-weight:900;


    color:var(--secondary);


    margin-bottom:10px;


}





.trust-card p{


    color:var(--text-light);


    font-size:15px;


}


/* ===================================
        SERVICES
=================================== */


.services-layout{


    display:grid;


    grid-template-columns:1.3fr 1fr;


    gap:30px;


}





.service-feature,


.service-card{


    background:

    rgba(255,255,255,.05);



    border:

    1px solid rgba(255,255,255,.08);



    border-radius:25px;


    padding:35px;


    transition:.35s;


}





.service-feature{


    min-height:420px;


    display:flex;


    flex-direction:column;


    justify-content:center;


}





.service-feature:hover,


.service-card:hover{


    transform:translateY(-8px);


    border-color:

    rgba(56,189,248,.4);


}





.service-side{


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:25px;


}





.service-card{


    padding:25px;


}





.service-icon{


    width:60px;


    height:60px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:18px;


    background:

    rgba(37,99,235,.2);


    font-size:30px;


    margin-bottom:20px;


}





.service-feature h3{


    font-size:32px;


    margin-bottom:20px;


}





.service-card h3{


    font-size:22px;


    margin-bottom:12px;


}





.service-feature p,


.service-card p{


    color:var(--text-light);


    line-height:2;


}





.tech-tags{


    display:flex;


    flex-wrap:wrap;


    gap:10px;


    margin-top:25px;


}





.tech-tags span{


    padding:8px 16px;


    background:

    rgba(6,182,212,.15);


    color:#67e8f9;


    border-radius:30px;


    font-size:13px;


}




/* ===================================
        WHY NEXT OFFER
=================================== */


#why-us{

    background:

    linear-gradient(
    180deg,
    transparent,
    rgba(37,99,235,.05)
    );

}



.why-grid{


    display:grid;


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


    grid-template-rows:auto auto;


    gap:25px;


}





.why-main{


    grid-row:span 2;


    background:

    linear-gradient(
    145deg,
    rgba(37,99,235,.25),
    rgba(6,182,212,.1)
    );


    border:

    1px solid rgba(255,255,255,.1);


    border-radius:25px;


    padding:45px;


    display:flex;


    flex-direction:column;


    justify-content:center;


}





.why-item{


    background:

    rgba(255,255,255,.05);


    border:

    1px solid rgba(255,255,255,.08);


    border-radius:22px;


    padding:30px;


    transition:.35s;


}





.why-item:hover,


.why-main:hover{


    transform:translateY(-8px);


}





.why-icon{


    width:65px;


    height:65px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:18px;


    background:

    rgba(37,99,235,.2);


    font-size:32px;


    margin-bottom:20px;


}




.why-main h3{


    font-size:32px;


    margin-bottom:20px;


}





.why-item h3{


    font-size:22px;


    margin-bottom:15px;


}





.why-main p,


.why-item p{


    color:var(--text-light);


    line-height:2;


}




/* ===================================
        PROJECTS
=================================== */


.projects-grid{


    display:grid;


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


    gap:30px;


}





.project-card{


    position:relative;


    background:

    rgba(255,255,255,.05);



    border:

    1px solid rgba(255,255,255,.08);



    border-radius:25px;


    padding:35px;


    overflow:hidden;


    transition:.35s;


}





.project-card::before{


    content:"";


    position:absolute;


    width:120px;

    height:120px;


    background:

    rgba(37,99,235,.25);


    border-radius:50%;


    top:-60px;

    left:-60px;


    filter:blur(20px);


}





.project-card:hover{


    transform:translateY(-10px);


    border-color:

    rgba(6,182,212,.5);


}





.project-number{


    font-size:48px;


    font-weight:900;


    color:

    rgba(255,255,255,.12);


    margin-bottom:10px;


}





.project-card h3{


    font-size:26px;


    margin-bottom:15px;


}





.project-card p{


    color:var(--text-light);


    line-height:2;


    margin-bottom:25px;


}





.project-tags{


    display:flex;


    gap:10px;


    flex-wrap:wrap;


}





.project-tags span{


    padding:7px 15px;


    border-radius:30px;


    background:

    rgba(6,182,212,.15);


    color:#67e8f9;


    font-size:13px;


}




/* ===================================
        ABOUT
=================================== */


.about-wrapper{


    display:flex;


    align-items:center;


    gap:70px;


}





.about-image{


    flex:.8;


    display:flex;


    justify-content:center;


}




.about-circle{


    width:330px;


    height:330px;


    padding:8px;


    border-radius:50%;


    background:

    linear-gradient(
    135deg,
    var(--secondary),
    var(--primary)
    );


    box-shadow:

    0 0 70px rgba(37,99,235,.35);


}





.about-circle img{


    width:100%;


    height:100%;


    object-fit:cover;


    border-radius:50%;


    border:

    8px solid var(--bg);


}





.about-content{


    flex:1;


}





.about-label{


    color:var(--secondary);


    font-weight:700;


}





.about-content h2{


    font-size:42px;


    line-height:1.5;


    margin:15px 0 25px;


}





.about-content p{


    color:var(--text-light);


    font-size:18px;


    line-height:2.2;


}





.about-skills{


    display:grid;


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


    gap:20px;


    margin-top:35px;


}





.about-skills div{


    background:

    rgba(255,255,255,.05);


    border:

    1px solid rgba(255,255,255,.08);


    padding:20px;


    border-radius:18px;


}





.about-skills strong{


    display:block;


    color:white;


    font-size:18px;


    margin-bottom:8px;


}





.about-skills span{


    color:var(--muted);


    font-size:13px;


}




/* ===================================
        CONTACT
=================================== */


#contact{


    background:

    linear-gradient(
    180deg,
    transparent,
    rgba(37,99,235,.08)
    );


}





.contact-wrapper{


    display:grid;


    grid-template-columns:1.5fr .8fr;


    gap:50px;


    align-items:center;


}





.contact-content > span{


    color:var(--secondary);


    font-weight:700;


}





.contact-content h2{


    font-size:45px;


    margin:15px 0 25px;


}





.contact-content p{


    color:var(--text-light);


    font-size:18px;


    line-height:2;


}





.contact-items{


    display:flex;


    gap:20px;


    margin-top:35px;


}





.contact-items div{


    background:

    rgba(255,255,255,.05);


    border:

    1px solid rgba(255,255,255,.08);


    border-radius:18px;


    padding:20px;


    flex:1;


}





.contact-items strong{


    display:block;


    margin-bottom:8px;


}





.contact-items p{


    font-size:14px;


}





.contact-card{


    background:

    linear-gradient(
    145deg,
    rgba(37,99,235,.25),
    rgba(6,182,212,.1)
    );


    border-radius:25px;


    padding:40px;


    border:

    1px solid rgba(255,255,255,.1);


}





.contact-card h3{


    font-size:30px;


    margin-bottom:15px;


}





.contact-card p{


    margin-bottom:30px;


}



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


footer{


    padding:70px 0 25px;


    border-top:

    1px solid rgba(255,255,255,.08);


    background:

    rgba(0,0,0,.15);


}





.footer-grid{


    display:grid;


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


    gap:40px;


}





.footer-logo{


    display:flex;


    align-items:center;


    gap:12px;


    margin-bottom:20px;


}




.footer-logo img{


    width:55px;


    height:55px;


    object-fit:contain;


}




.footer-logo strong{


    display:block;


    font-size:24px;


    font-weight:900;


    background:

    linear-gradient(
    90deg,
    #38bdf8,
    #2563eb
    );


    background-clip:text;

    -webkit-background-clip:text;


    -webkit-text-fill-color:transparent;


}





.footer-logo span{


    color:var(--muted);


    font-size:11px;


}





.footer-brand p{


    color:var(--text-light);


    line-height:2;


    font-size:15px;


}





.footer-links h3{


    font-size:20px;


    margin-bottom:20px;


}





.footer-links ul{


    display:flex;


    flex-direction:column;


    gap:10px;


}





.footer-links a{


    color:var(--text-light);


    transition:.3s;


}





.footer-links a:hover{


    color:var(--secondary);


}





.footer-bottom{


    margin-top:50px;


    padding-top:25px;


    border-top:

    1px solid rgba(255,255,255,.08);


    text-align:center;


}





.footer-bottom p{


    color:var(--muted);


    font-size:14px;


}



/* ===================================
        RESPONSIVE DESIGN
=================================== */


/* Tablet */

@media(max-width:992px){



    .navbar{

        height:auto;

        padding:20px;

    }



    .nav-links{

        gap:5px;

    }



    .nav-links a{

        padding:8px;

        font-size:14px;

    }





    .hero-container{


        flex-direction:column-reverse;


        text-align:center;


    }




    #hero{


        padding-top:170px;

    }





    .hero-content h1{


        font-size:42px;


    }





    .hero-content p{


        margin:auto;


    }





    .hero-buttons{


        justify-content:center;


    }





    .hero-features{


        justify-content:center;


    }





    .hero-image{


        margin-bottom:40px;


    }





    .services-layout{


        grid-template-columns:1fr;


    }




    .why-grid{


        grid-template-columns:1fr 1fr;


    }





    .about-wrapper{


        flex-direction:column;


        text-align:center;


    }





    .contact-wrapper{


        grid-template-columns:1fr;


    }





    .footer-grid{


        grid-template-columns:1fr 1fr;


    }


}







/* Mobile */


@media(max-width:600px){



    .container{


        width:92%;


    }





    header{


        top:10px;


        width:94%;


    }





    .navbar{


        flex-direction:column;


        gap:20px;


    }





    .logo-link{


        justify-content:center;


    }





    .nav-links{


        flex-wrap:wrap;


        justify-content:center;


    }





    .nav-action{


        display:none;


    }






    #hero{


        padding-top:230px;


    }





    .hero-content h1{


        font-size:32px;


        line-height:1.7;


    }





    .hero-content p{


        font-size:16px;


    }





    .hero-buttons{


        flex-direction:column;


    }





    .hero-circle{


        width:280px;


        height:280px;


    }





    section{


        padding:80px 0;


    }





    .section-title h2{


        font-size:32px;


    }





    .service-side{


        grid-template-columns:1fr;


    }





    .why-grid{


        grid-template-columns:1fr;


    }





    .about-circle{


        width:260px;


        height:260px;


    }





    .about-content h2{


        font-size:32px;


    }





    .about-skills{


        grid-template-columns:1fr;


    }





    .projects-grid{


        grid-template-columns:1fr;


    }





    .contact-items{


        flex-direction:column;


    }





    .footer-grid{


        grid-template-columns:1fr;


        text-align:center;


    }


    .menu-toggle{


        display:flex;


        }

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

        transform:
        rotate(45deg)
        translate(7px,7px);

    }


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

        opacity:0;

    }


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

        transform:
        rotate(-45deg)
        translate(7px,-7px);

    }



    .navbar{


        position:relative;


    }




    .nav-links{


        position:absolute;


        top:100%;


        right:0;


        width:100%;


        background:


        rgba(15,23,42,.95);


        backdrop-filter:blur(15px);


        border-radius:20px;


        padding:20px;


        flex-direction:column;


        align-items:center;


        gap:15px;



        opacity:0;


        visibility:hidden;


        transform:translateY(-20px);


        transition:.35s;


    }



    .nav-links.active{


        opacity:1;


        visibility:visible;


        transform:translateY(10px);


    }



}





/* ===================================
        ANIMATIONS
=================================== */


/* Initial hidden state */

.reveal{


    opacity:0;


    transform:translateY(40px);


    transition:

    opacity .8s ease,

    transform .8s ease;


}



/* Visible state */


.reveal.active{


    opacity:1;


    transform:translateY(0);


}







/* Hero animation */


.hero-content{


    animation:

    heroText .9s ease forwards;


}





.hero-image{


    animation:

    heroImage 1.1s ease forwards;


}





@keyframes heroText{


    from{


        opacity:0;

        transform:translateX(60px);


    }


    to{


        opacity:1;

        transform:translateX(0);


    }


}





@keyframes heroImage{


    from{


        opacity:0;

        transform:translateX(-60px)
        scale(.9);


    }


    to{


        opacity:1;

        transform:translateX(0)
        scale(1);


    }


}


.service-card,
.project-card,
.why-item,
.trust-card{


    position:relative;

    overflow:hidden;


}




.service-card::after,
.project-card::after,
.why-item::after{


    content:"";


    position:absolute;


    width:100%;


    height:2px;


    bottom:0;


    right:0;


    background:

    linear-gradient(
    90deg,
    var(--secondary),
    var(--primary)
    );


    transform:scaleX(0);


    transition:.4s;


}





.service-card:hover::after,
.project-card:hover::after,
.why-item:hover::after{


    transform:scaleX(1);


}



.logo img{


    animation:

    logoFloat 4s ease-in-out infinite;


}



@keyframes logoFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-5px);

}


}




.page-loader{


position:fixed;

inset:0;

background:#0F172A;

display:flex;

justify-content:center;

align-items:center;

z-index:9999;


}


.page-loader img{


width:100px;

animation:loaderLogo 1.5s infinite;


}



@keyframes loaderLogo{


50%{

transform:scale(1.15);

}


}