/* =====================================================
   RASHTECH INNOVATION - MAIN STYLE
   Design : Digital Agency / Futuristic
===================================================== */


/* GLOBAL */

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


body{

    background:#050816;
    color:#ffffff;

    font-family:'Poppins', sans-serif;

    overflow-x:hidden;

}



h1,h2,h3{

    font-weight:700;

}


a{

    text-decoration:none;

}



/* =====================================================
 NAVBAR
===================================================== */


.navbar{

    padding:20px 0;

    background:rgba(5,8,22,0.75);

    backdrop-filter:blur(15px);

}






.nav-link{

    color:white!important;

    margin-left:20px;

    transition:.3s;

}


.nav-link:hover{

    color:#00a8ff!important;

}



.btn-contact{

    background:linear-gradient(
    45deg,
    #00a8ff,
    #7b2fff
    );

    border-radius:30px;

    padding:10px 25px!important;

}






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


.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    background:

    radial-gradient(
    circle at top right,
    rgba(0,168,255,.25),
    transparent 40%
    ),

    radial-gradient(
    circle at bottom left,
    rgba(123,47,255,.25),
    transparent 40%
    );

}



.hero-text h1{

    font-size:60px;

    line-height:1.2;

}


.hero-text h1 span{

    background:linear-gradient(
    45deg,
    #00a8ff,
    #7b2fff
    );

    -webkit-background-clip:text;

    color:transparent;

}



.hero-text p{

    margin-top:25px;

    font-size:18px;

    color:#c8c8c8;

    max-width:600px;

}





.hero-buttons{

    margin-top:35px;

}



.btn-primary{

    background:linear-gradient(
    45deg,
    #00a8ff,
    #7b2fff
    );

    border:none;

    padding:14px 35px;

    border-radius:30px;

}



.btn-primary:hover{

    box-shadow:
    0 0 25px #00a8ff;

}





.btn-outline-light{

    padding:14px 35px;

    border-radius:30px;

    margin-left:15px;

}





/* HERO CARD */


.hero-card{


    padding:50px 30px;

    text-align:center;


    background:

    rgba(255,255,255,0.08);


    border:

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


    border-radius:25px;


    backdrop-filter:blur(15px);


    animation:floating 4s infinite;

}



.hero-card i{


    font-size:80px;

    color:#00a8ff;


}



@keyframes floating{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-20px);

}


}






/* =====================================================
 STATISTIQUES
===================================================== */


.stats{

    padding:80px 0;

}



.stats h2{


    font-size:50px;


    background:linear-gradient(
    45deg,
    #00a8ff,
    #7b2fff
    );


    -webkit-background-clip:text;

    color:transparent;


}







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


.services{

    padding:90px 0;

}



.section-title{

    text-align:center;

    margin-bottom:60px;

}



.section-title h2{

    font-size:45px;

}




.service-box{


    height:100%;


    padding:40px;


    background:

    rgba(255,255,255,.06);


    border-radius:25px;


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


    transition:.4s;


}



.service-box:hover{


    transform:translateY(-15px);


    box-shadow:

    0 0 35px rgba(0,168,255,.4);


}



.service-box i{


    font-size:55px;


    color:#00a8ff;


}



.service-box h3{


    margin-top:25px;

}








/* =====================================================
 FORMATION BANNER
===================================================== */


.formation-banner{


    padding:90px 0;


    background:

    linear-gradient(
    135deg,
    #101b45,
    #050816
    );


}








/* =====================================================
 CTA
===================================================== */


.cta{


    padding:80px 0;


}







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


.footer{


    padding:60px 0;


    background:#02030a;


}



.footer h4{

    color:#00a8ff;

}

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


.page-header{

padding:180px 0 100px;

background:
radial-gradient(
circle,
rgba(0,168,255,.25),
transparent 50%
);

}


.page-header h1{

font-size:55px;

}


.page-header span{

color:#00a8ff;

}



.about-section{

padding:90px 0;

}



.about-section h2{

font-size:40px;

margin-bottom:25px;

}



.about-section p{

color:#c8c8c8;

font-size:17px;

line-height:1.8;

}




.about-card{

padding:45px;

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

border-radius:25px;

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

text-align:center;

}


.about-card i{

font-size:70px;

color:#7b2fff;

}



.values{

padding:90px 0;

}



.mission{

padding:90px 0;

background:
linear-gradient(
135deg,
#101b45,
#050816
);

}


.mission p{

max-width:800px;

margin:auto;

font-size:20px;

color:#ddd;

}

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


.services-page{

padding:90px 0;

}



.services-page .service-box{

margin-bottom:30px;

min-height:350px;

display:flex;

flex-direction:column;

justify-content:center;

}



.services-page .service-box p{

color:#cfcfcf;

line-height:1.7;

}



.services-page .service-box:hover i{

transform:scale(1.15);

}



.services-page .service-box i{

transition:.4s;

display:block;

}

/* ================= PORTFOLIO ================= */


.portfolio-section{

padding:90px 0;

}



.project-card{


padding:40px;


margin-bottom:35px;


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


border-radius:25px;


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


transition:.4s;


height:100%;


}



.project-card:hover{


transform:translateY(-15px);


box-shadow:

0 0 35px rgba(0,168,255,.35);


}




.project-icon{


width:80px;

height:80px;


display:flex;

align-items:center;

justify-content:center;


border-radius:50%;


background:

linear-gradient(
45deg,
#00a8ff,
#7b2fff
);


margin-bottom:25px;


}



.project-icon i{


font-size:40px;


color:white;


}



.project-card h3{


font-size:30px;


}



.project-card h5{


color:#00a8ff;


margin-bottom:20px;


}



.project-card p{


color:#ccc;


line-height:1.8;


}



.tags span{


display:inline-block;


background:#101b45;


padding:7px 15px;


border-radius:20px;


margin:5px;


font-size:13px;


color:white;


}

/* ================= FORMATIONS ================= */


.formation-section{

padding:90px 0;

}



.formation-card{


padding:40px;


background:

rgba(255,255,255,.06);


border-radius:25px;


border:

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


margin-bottom:35px;


height:100%;


transition:.4s;


}



.formation-card:hover{


transform:translateY(-15px);


box-shadow:

0 0 35px rgba(123,47,255,.4);


}



.formation-card i{


font-size:60px;


color:#00a8ff;


}



.formation-card h3{


margin-top:25px;


}



.formation-card p{


color:#ccc;


line-height:1.7;


}



.formation-card ul{


padding-left:20px;


color:#ddd;


line-height:2;


}



.formation-card li::marker{


color:#00a8ff;


}

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


.contact-section{

padding:90px 0;

}



.contact-section p{

color:#ccc;

line-height:1.8;

}



.contact-form input,
.contact-form textarea,
.contact-form select{


background:#101426;

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

color:white;

padding:15px;

margin-bottom:20px;

border-radius:15px;


}



.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{


background:#101426;

color:white;

border-color:#00a8ff;

box-shadow:none;


}


.contact-info i{

color:#00a8ff;

font-size:20px;

}

/* ================= ADMIN DASHBOARD ================= */


.dashboard-card{


padding:35px;


background:

rgba(255,255,255,.07);


border-radius:25px;


border:

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


text-align:center;


transition:.3s;


}



.dashboard-card:hover{


transform:translateY(-10px);


box-shadow:

0 0 30px rgba(0,168,255,.3);


}



.dashboard-card i{


font-size:55px;


color:#00a8ff;


}



.dashboard-card h2{


font-size:45px;


color:white;


}



.dashboard-chart{


padding:40px;


background:

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


border-radius:25px;


}


/* =====================================
   NAVBAR RASHTECH RESPONSIVE
===================================== */


.navbar{

    background:rgba(5,8,22,0.92);

    backdrop-filter:blur(10px);

    padding:15px 0;

    transition:.3s;

}



.navbar-brand.logo img{

    width:55px;

    height:55px;

    object-fit:contain;

}



.navbar-nav .nav-link{

    color:#e2e8f0;

    font-weight:500;

    margin-left:15px;

    transition:.3s;

}



.navbar-nav .nav-link:hover{

    color:#00a8ff;

}





/* BOUTON CONTACT */


.btn-contact{

    background:linear-gradient(135deg,#00a8ff,#7b2fff);

    padding:10px 22px !important;

    border-radius:30px;

    color:white !important;

}





/* BOUTON MENU MOBILE */


.navbar-toggler{

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

    padding:8px 12px;

}



.navbar-toggler:focus{

    box-shadow:none;

}




/* MOBILE */

@media(max-width:991px){



.navbar{

    padding:12px 20px;

}



.navbar-collapse{


    background:#080c20;


    margin-top:15px;


    padding:25px;


    border-radius:20px;


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


}



.navbar-nav{


    gap:10px;


}



.navbar-nav .nav-link{


    margin-left:0;


    padding:12px 15px;


    border-radius:10px;


}



.navbar-nav .nav-link:hover{


    background:#101b45;


}



.btn-contact{


    display:block;

    text-align:center;

    margin-top:10px;


}



.navbar-brand.logo img{


    width:45px;


    height:45px;


}


}

/* =====================================
   CORRECTION NAVBAR MOBILE
===================================== */


@media(max-width:991px){


body{

    padding-top:85px;

}



.navbar{

    padding:10px 15px;

}



.navbar-brand.logo img{

    width:45px;

    height:45px;

}



.navbar-collapse{

    margin-top:10px;

}



}



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


@media(max-width:992px){


.hero-text h1{

font-size:42px;

}


.hero-card{

margin-top:40px;

}


}


@media(max-width:576px){


.hero-text h1{

font-size:35px;

}


.btn-outline-light{

margin-left:0;

margin-top:15px;

}


}


/* =====================================
   BLOG RASHTECH INNOVATION
===================================== */


/* HEADER BLOG */

.page-header{

    padding:100px 0;

    background:
    linear-gradient(
        135deg,
        #050816,
        #0f172a
    );

    color:white;

}


.page-header h1{

    font-size:55px;

    font-weight:800;

    margin-bottom:20px;

}


.page-header h1 span{

    color:#00a8ff;

}


.page-header p{

    color:#cbd5e1;

    font-size:18px;

    max-width:700px;

    margin:auto;

}



/* SECTION BLOG */

.blog-section{

    padding:80px 0;

    background: radial-gradient(black, transparent);
    background-image: radial-gradient(black, transparent);
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;

}





/* CARTE ARTICLE */

.blog-card{


    background:white;

    border-radius:25px;

    overflow:hidden;

    height:100%;

    box-shadow:

    0 15px 40px rgba(0,0,0,.08);


    transition:.4s;


}



.blog-card:hover{


    transform:translateY(-12px);


    box-shadow:

    0 25px 50px rgba(0,168,255,.25);


}





/* IMAGE */


.blog-card img{


    width:100%;

    height:250px;

    object-fit:cover;


}




.blog-no-image{


    height:250px;


    background:

    linear-gradient(
        135deg,
        #00a8ff,
        #2563eb
    );


    display:flex;

    align-items:center;

    justify-content:center;


    color:white;


    font-size:70px;


}





/* CONTENU */


.blog-body{


    padding:30px;


}



.blog-body h3{


    font-size:24px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:15px;


}




.blog-body p{


    color:#64748b;

    line-height:1.7;


}





/* DATE */


.blog-date{


    display:flex;

    align-items:center;

    gap:8px;


    color:#00a8ff;


    font-size:14px;


    margin:20px 0;


}




/* BOUTON */


.blog-body .btn-primary{


    background:

    linear-gradient(
        135deg,
        #00a8ff,
        #2563eb
    );


    border:none;


    padding:12px 25px;


    border-radius:30px;


    font-weight:600;


}



.blog-body .btn-primary:hover{


    transform:translateY(-3px);


}


/* =================================
   PAGE ARTICLE BLOG
================================= */


.article-page{

    padding:80px 0;

    background:#f8fafc;

}



.article-container{


    max-width:900px;

    margin:auto;

    background:white;

    padding:40px;

    border-radius:30px;


    box-shadow:

    0 20px 50px rgba(0,0,0,.08);


}



.article-image{


    width:100%;

    height:450px;

    object-fit:cover;

    border-radius:25px;

    margin-bottom:35px;


}




.article-container h1{


    font-size:42px;

    font-weight:800;

    color:#0f172a;

    line-height:1.3;


}




.article-meta{


    color:#00a8ff;

    margin:20px 0 35px;

    font-size:15px;


}




.article-content{


    color:#334155;

    font-size:18px;

    line-height:1.9;


}





.btn-retour{


    display:inline-flex;

    align-items:center;

    gap:10px;


    margin-top:40px;


    background:

    linear-gradient(
        135deg,
        #00a8ff,
        #2563eb
    );


    color:white;


    padding:14px 30px;


    border-radius:30px;


    text-decoration:none;

    font-weight:600;


}



.btn-retour:hover{


    color:white;

    transform:translateY(-3px);


}



@media(max-width:768px){


.article-container{

    padding:25px;

}


.article-container h1{

    font-size:30px;

}


.article-image{

    height:250px;

}


.article-content{

    font-size:16px;

}


}







/* =====================================
   PARTENAIRES
===================================== */


.partners-section{

    padding:90px 0;

    background:#050816;

    overflow:hidden;

}



.section-title h2{

    font-size:45px;

    font-weight:800;

    color:white;

}



.section-title h2 span{

    color:#00a8ff;

}



.section-title p{

    color:#94a3b8;

    margin-bottom:50px;

}




.partners-slider{

    width:100%;

    overflow:hidden;

}



.partners-track{


    display:flex;

    width:max-content;

    animation:scrollPartners 25s linear infinite;


}





.partner-logo{


    width:220px;

    height:120px;

    margin:0 20px;


    background:white;


    border-radius:20px;


    display:flex;

    align-items:center;

    justify-content:center;


    padding:25px;


    transition:.3s;


}





.partner-logo img{


    max-width:100%;

    max-height:80px;

    object-fit:contain;


}





.partner-logo:hover{


    transform:scale(1.08);


}





@keyframes scrollPartners{


from{

    transform:translateX(0);

}


to{

    transform:translateX(-50%);

}


}





@media(max-width:768px){


.partner-logo{

    width:160px;

    height:100px;

}


.section-title h2{

    font-size:32px;

}


}





/* RESPONSIVE */


@media(max-width:768px){


.page-header h1{

    font-size:38px;

}


.blog-body h3{

    font-size:20px;

}


}

/* =====================================
   SERVICES RESPONSIVE FIX
===================================== */


@media(max-width:768px){

    .services,
    .services-page{

        padding:60px 15px;

    }


    .section-title{

        margin-bottom:40px;

    }


    .section-title h2{

        font-size:32px;

    }


    .service-box,
    .services-page .service-box{

        padding:30px 20px;

        min-height:auto;

        height:auto;

        margin-bottom:25px;

        border-radius:20px;

        text-align:center;

    }


    .service-box i,
    .services-page .service-box i{

        font-size:45px;

        margin-bottom:10px;

    }


    .service-box h3{

        font-size:22px;

        margin-top:15px;

    }


    .services-page .service-box p{

        font-size:15px;

        line-height:1.6;

    }


}



@media(max-width:576px){


    .services,
    .services-page{

        padding:50px 12px;

    }


    .service-box,
    .services-page .service-box{

        padding:25px 18px;

        margin-bottom:20px;

    }


    .service-box h3{

        font-size:20px;

    }


}