/* ==========================================
DATANIQ TECHNOLOGIES PVT LTD
Enterprise Website
========================================== */

:root{

--primary:#0056D2;
--secondary:#00AEEF;
--accent:#FFC857;
--dark:#071C38;
--light:#F5F9FC;
--white:#FFFFFF;
--text:#444;
--success:#28A745;

}

*{

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

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:#fff;
color:var(--text);
line-height:1.7;
overflow-x:hidden;

}

/* ======================================
HEADINGS
====================================== */

h1,h2,h3,h4,h5,h6{

font-weight:700;
color:var(--dark);

}

p{

font-size:16px;
line-height:1.8;

}

/* ======================================
LINKS
====================================== */

a{

text-decoration:none;
transition:.3s;

}

a:hover{

text-decoration:none;

}

/* ======================================
TOP BAR
====================================== */

.top-bar{

background:var(--dark);
color:#fff;
padding:8px 0;
font-size:14px;

}

.top-bar span{

margin-right:20px;

}

.top-social{

color:white;
margin-left:15px;
font-size:18px;

}

.top-social:hover{

color:var(--accent);

}

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

.navbar{

padding:15px 0;
background:#fff!important;

}

.navbar-brand img{

transition:.3s;

}

.navbar-brand img:hover{

transform:scale(1.05);

}

.navbar-nav .nav-link{

font-weight:600;
margin-left:18px;
color:var(--dark)!important;

}

.navbar-nav .nav-link:hover{

color:var(--primary)!important;

}

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

.btn-primary{

background:var(--primary);
border:none;
padding:12px 28px;
border-radius:30px;
font-weight:600;

}

.btn-primary:hover{

background:var(--secondary);

}

.btn-warning{

background:var(--accent);
border:none;
color:#000;
padding:12px 28px;
border-radius:30px;
font-weight:600;

}

.btn-warning:hover{

background:#ffb300;

}

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

.hero{

background:url("../images/hero/hero-bg.jpg") center center;
background-size:cover;
position:relative;
padding:140px 0;
color:white;

}

.hero::before{

content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(7,28,56,.75);

}

.hero .container{

position:relative;
z-index:2;

}

.hero h1{

font-size:58px;
font-weight:800;
color:white;
margin-bottom:20px;

}

.hero p{

font-size:20px;
color:#ddd;
margin-bottom:35px;

}

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

section{

padding:90px 0;

}

.section-title{

font-size:42px;
font-weight:700;
margin-bottom:20px;
text-align:center;

}

.section-subtitle{

max-width:750px;
margin:auto;
margin-bottom:60px;
color:#666;
text-align:center;

}

.section-white{

background:white;

}

.section-light{

background:#f7f9fc;

}

/* ======================================
CARDS
====================================== */

.card{

border:none;
border-radius:18px;
box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.card:hover{

transform:translateY(-8px);
transition:.35s;

}

/* ======================================
IMAGES
====================================== */

img{

max-width:100%;

}

.rounded-custom{

border-radius:20px;

}

.shadow-custom{

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

}

/* ======================================
GLASS CARD
====================================== */

.glass-card{

background:white;
padding:35px;
border-radius:18px;
box-shadow:0 10px 40px rgba(0,0,0,.08);

}

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

.cta{

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

color:white;
text-align:center;

}

.cta h2{

color:white;
font-size:42px;

}

.cta p{

color:#f3f3f3;
font-size:18px;

}

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

.footer{

background:var(--dark);
color:white;
padding:80px 0 30px;

}

.footer h5{

margin-bottom:20px;
color:white;

}

.footer p{

color:#ccc;

}

.footer-links{

list-style:none;
padding:0;

}

.footer-links li{

margin-bottom:10px;

}

.footer-links a{

color:#ddd;

}

.footer-links a:hover{

color:var(--accent);

}

/* ======================================
UTILITIES
====================================== */

.text-primary-custom{

color:var(--primary);

}

.bg-primary-custom{

background:var(--primary);

}

.mt-80{

margin-top:80px;

}

.mb-80{

margin-bottom:80px;

}

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

.service-card{

background:#fff;
padding:35px;
border-radius:20px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.35s;
height:100%;
text-align:center;

}

.service-card:hover{

transform:translateY(-10px);
box-shadow:0 20px 50px rgba(0,0,0,.15);

}

.service-card img{

height:75px;
margin-bottom:25px;

}

.service-card i{

font-size:60px;
color:var(--primary);
margin-bottom:20px;

}

.service-card h3{

font-size:24px;
margin-bottom:15px;

}

.service-card p{

color:#666;

}


/* =====================================================
INDUSTRY
===================================================== */

.industry-card{

background:#fff;
padding:40px;
border-radius:20px;
text-align:center;
height:100%;
transition:.35s;
box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.industry-card:hover{

background:var(--primary);
color:white;
transform:translateY(-8px);

}

.industry-card:hover h4{

color:white;

}

.industry-card:hover p{

color:#eee;

}

.industry-card:hover .industry-icon{

color:var(--accent);

}

.industry-icon{

font-size:65px;
color:var(--primary);
margin-bottom:25px;

}


/* =====================================================
WHY CHOOSE US
===================================================== */

.choose-card{

background:#fff;
padding:35px;
border-radius:18px;
text-align:center;
box-shadow:0 10px 35px rgba(0,0,0,.08);
height:100%;
transition:.35s;

}

.choose-card:hover{

transform:translateY(-8px);

}

.choose-card i{

font-size:55px;
color:var(--primary);
margin-bottom:20px;

}


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

.project-card{

background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,.10);
transition:.35s;

}

.project-card:hover{

transform:translateY(-10px);

}

.project-card img{

width:100%;
height:250px;
object-fit:cover;
border-radius:12px 12px 0 0;

}

.project-content{

padding:30px;

}

.project-tag{

display:inline-block;
background:var(--primary);
color:white;
padding:6px 18px;
border-radius:30px;
font-size:14px;
margin-bottom:18px;

}


/* =====================================================
TECHNOLOGY LOGOS
===================================================== */

.tech-logo{

background:white;
padding:25px;
border-radius:18px;
text-align:center;
box-shadow:0 10px 35px rgba(0,0,0,.08);
transition:.35s;
height:100%;

}

.tech-logo:hover{

transform:translateY(-6px);

}

.tech-logo img{

height:65px;

}


/* =====================================================
TRUST STRIP
===================================================== */

.trust-strip{

background:var(--dark);
color:white;
padding:18px 0;

}

.trust-item{

text-align:center;
font-weight:600;

}

.trust-item i{

color:var(--accent);
margin-right:8px;

}


/* =====================================================
PROCESS TIMELINE
===================================================== */

.timeline{

display:flex;
justify-content:space-between;
flex-wrap:wrap;
margin-top:60px;

}

.timeline-item{

background:white;
padding:25px;
border-radius:18px;
width:13%;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,.08);
position:relative;
transition:.3s;

}

.timeline-item:hover{

transform:translateY(-8px);

}

.timeline-item::after{

content:"→";
position:absolute;
right:-18px;
top:50%;
font-size:24px;
transform:translateY(-50%);
color:var(--primary);

}

.timeline-item:last-child::after{

display:none;

}


/* =====================================================
PROJECT STATS
===================================================== */

.stats{

background:linear-gradient(135deg,#0056D2,#00AEEF);
color:white;

}

.stat-box{

text-align:center;
padding:30px;

}

.stat-box h2{

font-size:52px;
font-weight:800;
color:white;

}

.stat-box p{

color:#f1f1f1;
font-size:18px;

}


/* =====================================================
CLIENT LOGOS
===================================================== */

.client-logo{

background:white;
padding:25px;
border-radius:15px;
text-align:center;
box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.client-logo img{

height:55px;
filter:grayscale(100%);
transition:.3s;

}

.client-logo img:hover{

filter:none;
transform:scale(1.1);

}


/* =====================================================
TESTIMONIALS
===================================================== */

.testimonial{

background:white;
padding:35px;
border-radius:20px;
box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.testimonial img{

width:80px;
height:80px;
border-radius:50%;
margin-bottom:20px;

}

.testimonial h5{

margin-top:15px;

}


/* =====================================================
HOVER EFFECTS
===================================================== */

.zoom{

overflow:hidden;
border-radius:20px;

}

.zoom img{

transition:.5s;

}

.zoom:hover img{

transform:scale(1.08);

}


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

.fade-up{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(30px);

}

to{

opacity:1;
transform:translateY(0);

}

}


/* =====================================================
BADGES
===================================================== */

.badge-custom{

background:var(--primary);
color:white;
padding:8px 18px;
border-radius:30px;
font-size:14px;

}

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

.portfolio-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    transition:.35s;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    border:1px solid #eee;
    height:100%;
}

.portfolio-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

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


/* =====================================================
   BLOG
===================================================== */

.blog-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    transition:.35s;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    height:100%;
}

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

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


/* =====================================================
   RESOURCE
===================================================== */

.resource-card{

    background:#fff;

    padding:40px;

    border-radius:18px;

    transition:.3s;

    box-shadow:0 5px 20px rgba(0,0,0,.06);

}

.resource-card:hover{

    transform:translateY(-6px);

}


/* =====================================================
   NEWSLETTER
===================================================== */

.newsletter-card{

    background:#fff;

}

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

.contact-card{

    background:#fff;

    padding:35px;

    border-radius:20px;

    box-shadow:0 8px 30px rgba(0,0,0,.07);

    transition:.3s;

    height:100%;

}

.contact-card:hover{

    transform:translateY(-6px);

}


.contact-form-wrapper{

    background:#fff;

    padding:45px;

    border-radius:20px;

    box-shadow:0 12px 40px rgba(0,0,0,.08);

}


.contact-sidebar{

    display:flex;

    flex-direction:column;

    gap:20px;

}


.contact-info-box{

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-shadow:0 6px 18px rgba(0,0,0,.06);

}

/* =====================================================
   CAREERS
===================================================== */

.job-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    border-left:5px solid var(--bs-primary);

    box-shadow:0 8px 28px rgba(0,0,0,.08);

    transition:.3s;

}

.job-card:hover{

    transform:translateY(-6px);

}


.value-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    box-shadow:0 8px 25px rgba(0,0,0,.07);

    transition:.3s;

}

.value-card:hover{

    transform:translateY(-6px);

}

/* =====================================================
   FAQ
===================================================== */

.accordion-item{

    border:none;

    margin-bottom:15px;

    border-radius:12px !important;

    overflow:hidden;

    box-shadow:0 5px 15px rgba(0,0,0,.05);

}

.accordion-button{

    padding:20px;

    font-weight:600;

}

.accordion-button:not(.collapsed){

    background:#0d6efd;

    color:#fff;

}

.accordion-button:focus{

    box-shadow:none;

}

/* =====================================================
   BADGES
===================================================== */

.section-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:#e9f2ff;

    color:#0d6efd;

    font-weight:600;

}


/* =====================================================
   FORMS
===================================================== */

.form-control,

.form-select{

    min-height:52px;

    border-radius:12px;

}

textarea.form-control{

    min-height:170px;

}


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

.btn{

    border-radius:10px;

}


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

.cta-section{

    background:linear-gradient(135deg,#0d6efd,#0056d2);

    padding:80px 0;

}


/* =====================================================
   SHADOW
===================================================== */

.shadow-lg{

    box-shadow:0 25px 50px rgba(0,0,0,.12)!important;

}

/* ==========================================
   ERROR PAGES
========================================== */

.error-image{

    max-width:450px;

}

.error-title{

    font-size:8rem;

    font-weight:700;

    color:var(--bs-primary);

}

/* ==========================================
   DEVELOPMENT PROCESS
========================================== */

.timeline-item{
    background:#fff;
    padding:30px 20px;
    border-radius:18px;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
    transition:0.3s;
    height:100%;
}

.timeline-item:hover{
    transform:translateY(-8px);
}

.timeline-item i{
    font-size:3rem;
}

.timeline-item h6{
    margin-top:15px;
    font-weight:600;
}