/*
  css/style.css
  Modern, responsive styles for IT & Digital Marketing agency
  - White background with blue gradient accents
  - Uses Poppins font (loaded from HTML)
  - Rounded cards, buttons, smooth hover animations
*/
:root{
  --bg:#ffffff;
  --text:#0f1724;
  --muted:#6b7280;
  --blue-500:#0ea5e9;
  --blue-600:#0ea5e9;
  --accent-gradient: linear-gradient(135deg,#0066ff 0%,#00b0ff 100%);
  --glass: rgba(255,255,255,0.6);
  --card-radius:16px;
  --shadow: 0 6px 22px rgba(16,24,40,0.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
img{max-width:100%;display:block}
.container{width:1150px;max-width:92%;margin:0 auto}
/* Header */
.header{
  position:sticky;top:0;z-index:80;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.6));
  border-bottom: 1px solid rgba(15,23,36,0.04);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{display:flex;gap:12px;align-items:center}
.logo-img{width:52px;height:52px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.logo h1{font-size:18px;margin:0}
.nav{display:flex;gap:22px;align-items:center}
.nav a{color:var(--text);text-decoration:none;padding:8px 12px;border-radius:8px;transition:all .18s ease;font-weight:600}
.nav a:hover{background:rgba(14,165,233,0.08);transform:translateY(-2px)}
.btn-primary{background:var(--accent-gradient);color:#fff;padding:10px 16px;border-radius:10px;border:none;cursor:pointer;font-weight:700;box-shadow:0 8px 24px rgba(0,112,255,0.12);transition:transform .12s ease;text-decoration:none;display:inline-block}
.btn-primary:hover{transform:translateY(-3px)}
.mobile-toggle{display:none;background:transparent;border:0;padding:8px;border-radius:8px}
/* Hero */
.hero{padding:88px 0 56px;background:linear-gradient(180deg, rgba(6,30,63,0.02), transparent)}
.hero-grid{display:grid;grid-template-columns:1fr 460px;gap:28px;align-items:center}
.hero h1{font-size:40px;margin:0 0 12px;line-height:1.05}
.hero p{margin:0 0 20px;color:var(--muted)}
.hero-cta{display:flex;gap:12px;align-items:center}
.hero-card{background:linear-gradient(180deg,rgba(255,255,255,0.85),#fff);padding:24px;border-radius:14px;box-shadow:var(--shadow);}
/* Hero Dark */
.hero-dark{
  background: 
    linear-gradient(135deg, rgba(26, 31, 58, 0.92) 0%, rgba(45, 53, 97, 0.88) 50%, rgba(31, 40, 71, 0.92) 100%),
    url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1920&q=80') center/cover no-repeat;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.hero-dark::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 70, 200, 0.15) 0%, rgba(0, 40, 150, 0.2) 100%);
  opacity: 1;
}
.hero-dark-content{
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.hero-dark h1{
  font-size: 48px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 20px;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.hero-dark p{
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  margin: 0 0 32px;
  line-height: 1.6;
}
.hero-dark-cta{
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-consultation{
  background: #0066ff;
  color: #fff;
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: background .2s, transform .2s;
  box-shadow: 0 8px 24px rgba(0,102,255,0.3);
}
.btn-consultation:hover{
  background: #0052cc;
  transform: translateY(-2px);
}
.btn-contact-outline{
  background: transparent;
  color: #fff;
  padding: 14px 32px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: all .2s;
}
.btn-contact-outline:hover{
  border-color: #fff;
  background: rgba(255,255,255,0.1);
}
@media (max-width:680px){
  .hero-dark{padding: 80px 0}
  .hero-dark h1{font-size: 32px}
  .hero-dark p{font-size: 16px}
  .hero-dark-cta{flex-direction: column; align-items: stretch}
}
/* Service Grid */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.card{background:#fff;border-radius:var(--card-radius);padding:20px;box-shadow:var(--shadow);transition:transform .18s ease, box-shadow .18s ease;border:1px solid rgba(15,23,36,0.03)}
.card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(2,6,23,0.08)}
.card h3{margin:10px 0 6px;color:#1a1d3a;font-size:18px;font-weight:700}
.card p{margin:0;color:var(--muted);font-size:14px}
.icon-box{width:56px;height:56px;background:linear-gradient(135deg,#4f6cff 0%,#3b5bdb 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:12px}
/* Services Detailed */
.services-detailed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px;text-align:left}
.service-detail-card{background:#fff;padding:28px;border-radius:14px;box-shadow:0 4px 20px rgba(0,0,0,0.06);transition:transform .2s,box-shadow .2s}
.service-detail-card:hover{transform:translateY(-6px);box-shadow:0 8px 32px rgba(0,0,0,0.1)}
.service-detail-card:nth-child(4){grid-column:2/3}
.service-icon{width:64px;height:64px;background:linear-gradient(135deg,#5b8bff 0%,#4a7aee 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:32px;margin-bottom:16px}
.service-detail-card h3{font-size:20px;font-weight:700;color:#1a1d3a;margin:0 0 8px}
.service-desc{font-size:14px;color:var(--muted);margin:0 0 16px}
.service-list{list-style:none;padding:0;margin:0}
.service-list li{font-size:14px;color:#4a5568;margin-bottom:8px;padding-left:4px}
@media (max-width:980px){
  .services-detailed-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .service-detail-card:nth-child(4){grid-column:auto}
}
@media (max-width:680px){
  .services-detailed-grid{grid-template-columns:1fr}
}
/* Contact Section */
.contact-section{background:#f8f9fa;padding:64px 0;margin:48px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}
.contact-form-wrapper{background:#fff;padding:36px;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.08)}
.contact-form-wrapper h3{font-size:20px;margin:0 0 24px;color:#1a1d3a;font-weight:600}
.main-contact-form input,.main-contact-form textarea{width:100%;padding:14px;margin-bottom:16px;border:1px solid #e0e3e8;border-radius:8px;font-family:'Poppins',sans-serif;font-size:15px}
.main-contact-form input:focus,.main-contact-form textarea:focus{outline:none;border-color:var(--blue-500)}
.btn-submit{width:100%;padding:14px;background:#0066ff;color:#fff;border:none;border-radius:8px;font-weight:700;font-size:15px;cursor:pointer;transition:background .2s;text-decoration:none}
.btn-submit:hover{background:#0052cc}
.contact-illustration{text-align:center;padding:24px}
.get-in-touch-title{font-size:32px;font-weight:800;color:#0066ff;margin-bottom:24px;letter-spacing:-0.5px}
.get-in-touch-title::after{content:'';display:block;width:80px;height:4px;background:var(--accent-gradient);margin:12px auto 0}
.illustration-placeholder svg{max-width:100%;height:auto}
@media (max-width:980px){
  .contact-grid{grid-template-columns:1fr;gap:32px}
  .contact-illustration{order:-1}
}
/* Footer */
.footer {
  background: #23264a;
  color: #e5e7ef;
  padding: 56px 0 0 0;
  border-top: 1px solid rgba(15,23,36,0.04);
  font-size: 15px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer h3, .footer h4 {
  color: #fff;
  margin: 0 0 12px 0;
}
.footer-links, .footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li, .footer-contact li {
  margin-bottom: 8px;
}
.footer-links a {
  color: #e5e7ef;
  text-decoration: none;
  transition: color .18s;
}
.footer-links a:hover {
  color: var(--blue-500);
}
.footer-socials {
  display: flex;
  gap: 14px;
  margin-top: 18px;
}
.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 18px;
  transition: background .18s, color .18s;
}
.footer-social:hover {
  background: var(--accent-gradient);
  color: #fff;
}
.footer-bottom {
  text-align: center;
  padding: 18px 0 0 0;
  color: #bfc2d6;
  font-size: 14px;
}
@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:680px){
  .footer-grid{grid-template-columns:1fr;gap:18px}
  .footer{padding:36px 0 0 0}
}
/* Responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .test-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .nav{display:none}
  .mobile-toggle{display:inline-flex}
  .service-grid{grid-template-columns:1fr}
  .test-grid{grid-template-columns:1fr}
  .header-inner{padding:12px 0}
  .hero{padding:64px 0 36px}
  .logo h1{font-size:16px}
  .hero h1{font-size:28px}
}
/* Utility */
.text-muted{color:var(--muted)}
.padded{padding:28px}
.center{text-align:center}
.link-ghost{background:transparent;border:1px solid rgba(15,23,36,0.06);padding:8px 12px;border-radius:10px}
.section-title{font-size:32px;font-weight:800;color:#1a1d3a;margin-bottom:8px;letter-spacing:-0.5px}
.section-title::after{content:'';display:block;width:80px;height:4px;background:var(--accent-gradient);margin:12px auto 0}
/* Milestones */
.milestones-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:48px}
.milestone{text-align:center}
.milestone-icon{font-size:48px;margin-bottom:16px}
.milestone-number{font-size:36px;font-weight:800;color:#1a1d3a;margin-bottom:8px}
.milestone-label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:600}
@media (max-width:980px){
  .milestones-grid{grid-template-columns:repeat(2,1fr);gap:32px}
}
@media (max-width:680px){
  .milestones-grid{grid-template-columns:1fr;gap:24px}
}
/* Why Choose Us */
.why-choose-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:24px}
.why-card{background:#fff;padding:32px 24px;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,0.06);text-align:center;transition:transform .2s,box-shadow .2s}
.why-card:hover{transform:translateY(-6px);box-shadow:0 8px 28px rgba(0,0,0,0.1)}
.why-card:nth-child(5){grid-column:2/4}
.why-icon{font-size:48px;margin-bottom:16px;color:#0066ff}
.why-card h3{font-size:16px;font-weight:700;color:#1a1d3a;margin:0 0 12px;line-height:1.4}
.why-card p{font-size:14px;color:var(--muted);margin:0;line-height:1.5}
@media (max-width:980px){
  .why-choose-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .why-card:nth-child(5){grid-column:auto}
}
@media (max-width:680px){
  .why-choose-grid{grid-template-columns:1fr;gap:20px}
}
/* About Page */
.about-main-title{font-size:36px;font-weight:800;color:#1a1d3a;margin:0 0 16px;line-height:1.2}
.about-subtitle{font-size:16px;color:var(--muted);max-width:860px;margin:0 auto;line-height:1.6}
.journey-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.journey-content h2{font-size:28px;font-weight:700;color:#1a1d3a;margin:0 0 16px}
.journey-content p{color:var(--muted);margin-bottom:14px;line-height:1.6}
.mission-vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.mv-card{background:#f8f9fa;padding:36px;border-radius:14px;text-align:center}
.mv-icon{font-size:56px;margin-bottom:16px}
.mv-card h3{font-size:24px;font-weight:700;color:#1a1d3a;margin:0 0 12px}
.mv-card p{color:var(--muted);line-height:1.6;margin:0}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.value-card{background:#fff;padding:28px 20px;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,0.06);text-align:center;transition:transform .2s}
.value-card:hover{transform:translateY(-6px)}
.value-icon{font-size:42px;margin-bottom:12px}
.value-card h4{font-size:18px;font-weight:700;color:#1a1d3a;margin:0 0 8px}
.value-card p{font-size:14px;color:var(--muted);line-height:1.5;margin:0}
@media (max-width:980px){
  .journey-grid{grid-template-columns:1fr}
  .mission-vision-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .values-grid{grid-template-columns:1fr}
  .about-main-title{font-size:28px}
}
/* Services Page */
.service-tabs{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.service-tab{background:#fff;border:2px solid #e0e3e8;padding:14px 24px;border-radius:10px;font-weight:600;color:#1a1d3a;cursor:pointer;transition:all .2s;font-size:15px}
.service-tab:hover{border-color:#0066ff;color:#0066ff}
.service-tab.active{background:var(--accent-gradient);border-color:#0066ff;color:#fff}
.tab-content{display:none;padding:48px 0}
.tab-content.active{display:block}
.service-detail-section{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-bottom:64px}
.service-detail-left h2{font-size:32px;font-weight:800;color:#1a1d3a;margin:0 0 16px}
.service-intro{font-size:16px;color:var(--muted);margin:0 0 24px;line-height:1.6}
.service-detail-left h3{font-size:20px;font-weight:700;color:#1a1d3a;margin:24px 0 12px}
.service-features{list-style:none;padding:0;margin:0}
.service-features li{padding:10px 0;font-size:15px;color:#4a5568;border-bottom:1px solid #f0f0f0}
.service-img{width:100%;border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,0.12)}
.pricing-section{padding:64px 0;background:#f8f9fa;margin:48px -100vw;padding-left:100vw;padding-right:100vw}
.pricing-section h2{font-size:32px;font-weight:800;color:#1a1d3a;margin:0 0 48px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1150px;margin:0 auto}
.pricing-card{background:#fff;padding:32px 24px;border-radius:14px;box-shadow:0 4px 20px rgba(0,0,0,0.08);position:relative;transition:transform .2s}
.pricing-card:hover{transform:translateY(-8px)}
.pricing-card.featured{border:3px solid #0066ff;transform:scale(1.05)}
.package-badge{background:#e0e7ff;color:#0066ff;padding:6px 16px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:0.5px;display:inline-block;margin-bottom:16px}
.package-badge.popular{background:#0066ff;color:#fff}
.pricing-card h3{font-size:22px;font-weight:700;color:#1a1d3a;margin:0 0 12px}
.price{font-size:36px;font-weight:800;color:#0066ff;margin:12px 0 4px}
.price-note{font-size:13px;color:var(--muted);margin:0 0 20px}
.package-features{list-style:none;padding:0;margin:0 0 24px}
.package-features li{padding:10px 0;font-size:14px;color:#4a5568;border-bottom:1px solid #f0f0f0}
.btn-outline{background:transparent;border:2px solid #0066ff;color:#0066ff;padding:12px 32px;border-radius:8px;font-weight:700;text-decoration:none;display:inline-block;transition:all .2s}
.btn-outline:hover{background:#0066ff;color:#fff}
.working-process{background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);padding:80px 0;margin-top:64px}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.process-step{text-align:center;color:#fff}
.process-icon{font-size:56px;margin-bottom:16px}
.process-step h3{font-size:18px;font-weight:700;margin:0 0 12px;color:#fff}
.process-step p{font-size:14px;color:rgba(255,255,255,0.85);line-height:1.5;margin:0}
@media (max-width:980px){
  .service-detail-section{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr;max-width:400px}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .service-tabs{flex-direction:column}
}
@media (max-width:680px){
  .process-grid{grid-template-columns:1fr}
  .pricing-section{padding-left:5vw;padding-right:5vw}
}
/* Smooth animations */
.fade-in{animation:fadeIn .6s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}