/* ===================================
   DATA N'FIGURES TECH SOLUTIONS
   Main Stylesheet
=================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
    --primary:#c23bff;
    --secondary:#00a3ff;
    --dark:#050816;
    --dark-card:#0d1326;
    --dark-light:#151d35;
    --white:#ffffff;
    --gray:#cfd8dc;
    --success:#00e676;

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

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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:var(--dark);
    color:var(--white);
    overflow-x:hidden;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

img{
    max-width:100%;
}

/* ===================================
   SCROLLBAR
=================================== */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#08101f;
}

::-webkit-scrollbar-thumb{
    background:var(--gradient);
    border-radius:20px;
}

/* ===================================
   TEXT
=================================== */

.gradient-text{
    background:var(--gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.section-title{
    font-size:2.5rem;
    font-weight:700;
    margin-bottom:20px;
}

.section-subtitle{
    color:var(--gray);
    max-width:700px;
    margin:auto;
}

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

.navbar{
    background:rgba(5,8,22,.95);
    backdrop-filter:blur(10px);
    padding:15px 0;
}

.navbar-brand{
    font-weight:700;
    color:white !important;
}

.navbar-nav .nav-link{
    color:white !important;
    margin-left:15px;
    transition:.3s;
}

.navbar-nav .nav-link:hover{
    color:var(--secondary) !important;
}

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

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding-top:100px;
    padding-bottom:40px;

    background:
    radial-gradient(
    circle at top right,
    rgba(194,59,255,.2),
    transparent 40%
    ),
    radial-gradient(
    circle at bottom left,
    rgba(0,163,255,.15),
    transparent 40%
    );
}

.hero h1{
    font-size:4rem;
    font-weight:800;
    line-height:1.2;
}

.hero p{
    font-size:1.2rem;
    color:var(--gray);
    margin-top:20px;
}

/* ===================================
   BUTTONS
=================================== */

.btn-gradient{
    background:var(--gradient);
    border:none;
    color:white;
    padding:14px 30px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
}

.btn-gradient:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(194,59,255,.4);
}

.btn-outline-custom{
    border:1px solid var(--secondary);
    color:var(--secondary);
    padding:14px 30px;
    border-radius:50px;
}

.btn-outline-custom:hover{
    background:var(--secondary);
    color:white;
}

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

.service-card{
    background:var(--dark-card);
    padding:30px;
    border-radius:20px;
    transition:.4s;
    height:100%;
    border:1px solid transparent;
}

.service-card:hover{
    transform:translateY(-10px);
    border-color:var(--secondary);
}

.service-icon{
    font-size:45px;
    margin-bottom:20px;
    color:var(--secondary);
}

.service-card h4{
    margin-bottom:15px;
    font-weight:600;
}

.service-card p{
    color:var(--gray);
}

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

.about-box{
    background:var(--dark-card);
    padding:40px;
    border-radius:20px;
}

.about-box p{
    color:var(--gray);
    line-height:1.8;
}

/* ===================================
   VALUES
=================================== */

.value-card{
    background:var(--dark-card);
    padding:30px;
    border-radius:20px;
    text-align:center;
    transition:.3s;
}

.value-card:hover{
    transform:translateY(-8px);
}

.value-card i{
    font-size:40px;
    margin-bottom:15px;
    background:var(--gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

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

.portfolio-card{
    background:var(--dark-card);
    border-radius:20px;
    overflow:hidden;
    transition:.4s;
}

.portfolio-card:hover{
    transform:translateY(-10px);
}

.portfolio-card img{
    width:100%;
    height:250px;
    object-fit:cover;
}

.portfolio-content{
    padding:25px;
}

.portfolio-content p{
    color:var(--gray);
}

/* ===================================
   COUNTERS
=================================== */

.counter{
    text-align:center;
}

.counter h2{
    font-size:3rem;
    font-weight:700;
    background:var(--gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* ===================================
   COMING SOON
=================================== */

.coming-soon{
    background:var(--dark-card);
    border-radius:25px;
    padding:60px 30px;
}

.coming-soon h2{
    font-weight:700;
}

.coming-soon p{
    color:var(--gray);
}

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

.contact-form{
    background:var(--dark-card);
    padding:40px;
    border-radius:20px;
}

.form-control{
    background:#0b1020;
    border:none;
    color:white;
    padding:15px;
}

.form-control:focus{
    background:#0b1020;
    color:white;
    border:1px solid var(--secondary);
    box-shadow:none;
}

.contact-info{
    background:var(--dark-card);
    padding:40px;
    border-radius:20px;
    height:100%;
}

.contact-info h5{
    margin-bottom:20px;
}

.contact-info p{
    color:var(--gray);
}

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

.cta{
    background:var(--gradient);
    border-radius:25px;
    padding:70px 30px;
    text-align:center;
}

.cta h2{
    font-weight:700;
}

.cta p{
    color:white;
}

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

footer{
    background:#03050f;
    padding:50px 0;
}

.footer-logo{
    font-size:1.5rem;
    font-weight:700;
}

.footer-links a{
    display:block;
    color:var(--gray);
    margin-bottom:10px;
}

.footer-links a:hover{
    color:var(--secondary);
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.1);
    margin-top:30px;
    padding-top:20px;
    text-align:center;
    color:var(--gray);
}

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

.fade-up{
    animation:fadeUp 1s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

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

@media(max-width:991px){

    .hero{
        text-align:center;
        padding-top:120px;
    }

    .hero h1{
        font-size:2.8rem;
    }

    .section-title{
        font-size:2rem;
    }
}

@media(max-width:768px){

    .hero h1{
        font-size:2.2rem;
    }

    .hero p{
        font-size:1rem;
    }

    .section-title{
        font-size:1.8rem;
    }

    .contact-form,
    .contact-info{
        margin-bottom:20px;
    }
}