/* ASOSIY SOZLAMALAR */
* { /* Barcha elementlar uchun */
  margin: 0; /* Tashqi bo'sh joyni olib tashlash */
  padding: 0; /* Ichki bo'sh joyni olib tashlash */
  box-sizing: border-box; /* Chegaralar ichki o'lchamlarga kiritilsin */
}

body { /* Sahifa tanasi */
  font-family: 'Arial', sans-serif; /* Shrift turi */
  line-height: 1.6; /* Qator balandligi */
  color: #333; /* Asosiy matn rangi */
}
.container {
    max-width: 1200px; /* Maksimal kenglik */
    margin: 0 auto; /* Markazga joylash */ 
    padding: 0 20px; /* chap-o'ng bo'sh joy */
}
/* Header Bo'limi */ 
.site-header {
    display: flex; /* Yonma-yon joylash uchun */ 
    justify-content: space-between;  /* Lopotip chapda menyu ongda bolishi uchun  */
    align-items: center; /* Verital markaz */ 
    padding: 20px 40px;  /* ichki bosh joy */ 
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ostki soya effekti */
}
.logo {
    display: flex; /*Yonma yon joylash */ 
    align-items: center; /* Vertikal joylash */
    gap: 10px; /*rasm va matn orasidagi masofa */
}
.logo-photo {
    width:40px ; /* Kenglik */ 
    height: 40px; /* Balandlik */ 
    border-radius: 50%; /* Aylana shakli */ 
    background-color: #4285f4;
}
.logo span {
    font-size: 24px; /* shrift o'lchami */ 
    font-weight:bold ; /* Qalin shrift */ 
    color: #555;
}
.main-nav {
    display: flex; /* Yonma-yon joylash */
    gap: 20px; /* Linklar orasidagi masofa */
}
.main-nav a {
    text-decoration: none;
    color: #666;
    font-weight: 400; /* O'rtacha qalinlik */
    transition: color 0.3s ease; /* Rang o'zgarishi uchun animatsiya */
}
.main-nav a:hover {
    color: #4285f4; /* Hover holatida rang o'zgarishi */
}
.main-nav a:first-child{
    color: #333;
    font-weight: 600; /* Qalin shrift */
}
/* Header Bo'limi */  

/* Asosiy Bo'lim */
.hero {
    padding: 80px 0; /* Yuqori osti bo'sh joy */
    background-color:#fafafa; /* Yorqin fon rangi */
    min-height: 80vh; /* Minimalni balandlik */
}
.hero .container {
    display: flex; /* Yonma-yon joylash */
    align-items: center; /* Markazga joylash */
    justify-content: space-between; /* Joylashuvni tenglashtirish */
    gap: 60px; /* Elementlar orasidagi masofa */
}
.hero-text1{
    width: 427px;/* Matn qismi kengligi */
    height: 250px; /* Matn qismi balandligi */
    top:362px; /* Matn qismi yuqoridan joylashuvi */
    left:246px; /* Matn qismi chapdan joylashuvi */
    color: #666;
}
.hero-text1 h1 {
    font-size: 48px; /* Sarlavha o'lchami */
    font-weight: 700; /* Qalin shrift */
    margin-bottom: 20px; /* Pastdan bo'sh joy */
    color: #000000; /* Matn rangi */
}
.hero-tex h1 {
    width: 427px;/* Matn qismi kengligi */
    height:112px; /* Matn qismi balandligi */
    top:362px; /* Matn qismi yuqoridan joylashuvi */
    left:246px; /* Matn qismi chapdan joylashuvi */
}

.btn {
  background-color: transparent; /* Shaffof fon */
  color: #458ff6; /* Ko'k matn rangi */
  border: 2px solid #458ff6; /* Ko'k chegara */
  padding: 15px 40px; /* Ichki bo'sh joy */
  border-radius: 25px; /* Yumaloq tugma */
  font-size: 18px; /* Shrift o'lchami */
  font-weight: 600; /* Qalin shrift */
  cursor: pointer; /* Ko'rsatkich qo'l shakli */
  transition: all 0.3s ease; /* Barcha o'zgarishlar uchun effekt */
  text-decoration: none; /* Chiziqni olib tashlash */
  display: inline-block; /* Blok element sifatida */
}
.btn:hover {
    background-color: #3367d6; /* Hover holatida fon rangi o'zgarishi */
    transform: translate(-2px); /* Hover holatida joylashuv o'zgarishi */
    box-shadow: 0 6px 20px rgba(66,133,244,0.4); /* Hover holatida soya effekti */
}
.hero-image {
    flex: 1; /* Moslashuvchan kenglik */
    display: flex; /* Flex konteyner */
    justify-content: center; /* Markazga joylash */
    align-items: center; /* Vertikal markaz */
}
.hero-image img {
    max-width: 100%; /* Rasm kengligi */
    height: auto; /* Balandlik avtomatik */
    object-fit: contain; /* Rasmni moslashtirish */
}
/* Asosiy Bo'lim */
.our-service { /* Xizmatlar bo'limi konteyner */
  padding: 80px 20px; /* Yuqori-ostki va chap-o'ng bo'sh joy */
  background-color: #ffffff; /* Oq fon rangi */
  text-align: center; /* Matnni markazlashtirish */
  max-width: 1200px; /* Maksimal kenglik */
  margin: 0 auto; /* Markazga joylashtirish */
}
.line {
  width: 80px;     /* control length */
  height: 2px;     /* control thickness */
  background: black;
  border: none;
  margin: 0 auto; /* Markazga joylashtirish va pastdan bo'sh joy */
}

.our-service h2 { /* Asosiy sarlavha */
width: 212;
height: 56;
top: 967px;
left: 695px;
}


.our-service > p { /* Asosiy tushuntirish matni */
  font-size: 18px; /* O'rtacha shrift o'lchami */
  color: #7d7987; /* Kulrang matn rangi */
  line-height: 1.6; /* Qator balandligi */
  max-width: 600px; /* Maksimal kenglik */
  margin: 0 auto 60px auto; /* Markaz va ostki bo'sh joy */
}

/* XIZMATLAR GRID LAYOUTI */
.services-container { /* Barcha xizmatlar uchun konteyner */
  display: grid; /* Grid layout ishlatish */
  grid-template-columns: repeat(3, 1fr); /* 3 ustunli grid */
  gap: 40px; /* Kartalar orasidagi masofa */
  margin-bottom: 50px; /* Ostki bo'sh joy */
}

.service-card { /* Har bir xizmat kartasi */
  background-color: #ffffff; /* Oq fon */
  padding: 40px 20px; /* Ichki bo'sh joy */
  border-radius: 10px; /* Yumaloq burchaklar */
  box-shadow: 0 10px 40px rgba(0,0,0,0.1); /* Yumshoq soya */
  text-align:left; /* Matnni markazlashtirish */
  transition: transform 0.3s ease; /* Hover effekti uchun */
  border: 1px solid #f0f0f0; /* Nozik chegara */
}

.service-card:hover { /* Karta ustiga sichqoncha kelganda */
  transform: translateY(-5px); /* 5px yuqoriga ko'tarish */
  box-shadow: 0 15px 50px rgba(0,0,0,0.15); /* Kattaroq soya */
}

.service-card img { /* Xizmat ikonkalari */
  width: 60px; /* Kenglik */
  height: 60px; /* Balandlik */
  margin-bottom: 25px; /* Ostki bo'sh joy */
  object-fit: contain; /* Rasmni to'liq ko'rsatish */
}

.service-card h2 { /* Xizmat nomi */
  font-size: 24px; /* Shrift o'lchami */
  font-weight: 600; /* Yarim qalin shrift */
  color: #000000; /* Qora matn rangi */
  margin-bottom: 15px; /* Ostki bo'sh joy */
}

.service-card p { /* Xizmat tushuntiruvi */
  font-size: 16px; /* Shrift o'lchami */
  color: #7d7987; /* Kulrang matn rangi */
  line-height: 1.5; /* Qator balandligi */
  margin: 0; /* Bo'sh joyni olib tashlash */
}

/* LEARN MORE TUGMASI */
.button { /* Asosiy tugma */
  background-color: transparent; /* Shaffof fon */
  color: #458ff6; /* Ko'k matn rangi */
  border: 2px solid #458ff6; /* Ko'k chegara */
  padding: 15px 40px; /* Ichki bo'sh joy */
  border-radius: 25px; /* Yumaloq tugma */
  font-size: 18px; /* Shrift o'lchami */
  font-weight: 600; /* Qalin shrift */
  cursor: pointer; /* Ko'rsatkich qo'l shakli */
  transition: all 0.3s ease; /* Barcha o'zgarishlar uchun effekt */
  text-decoration: none; /* Chiziqni olib tashlash */
  display: inline-block; /* Blok element sifatida */
  margin-right: 460px; /* O'ng tomonda bo'sh joy */
}

.button:hover { /* Tugma ustiga sichqoncha kelganda */
  background-color: #458ff6; /* Ko'k fon */
  color: #ffffff; /* Oq matn */
  transform: translateY(-2px); /* Biroz yuqoriga ko'tarish */
  box-shadow: 0 5px 15px rgba(69, 143, 246, 0.3); /* Ko'k soya */
}
/* XIZMATLAR GRID LAYOUTI */

/* Umumiy konteyner */
.container {
  display: flex; /* Matn va rasm yonma-yon */
  align-items: center; /* Vertikal markazlash */
  justify-content: space-between; /* Chap va o‘ngga joylash */
  gap: 40px; /* Orasida bo‘sh joy */
  flex-wrap: wrap; /* Kichik ekranda pastga tushishi uchun */
  padding: 40px 20px; /* Ichki bo‘sh joy */
  list-style: 1.6px;
}
/* Matn qismi */
.hero-text,
.app-text {
  flex: 1; /* Qolgan joyni egallash */
  max-width: 500px; /* Juda keng bo‘lmasligi uchun */
}


.hero-text h3,
.app-text h3 {
  font-size: 1.8rem; /* Sarlavha kattaligi */
  color: #222; /* To‘q qora rang */
  margin-bottom: 10px; /* Pastida bo‘sh joy */
  margin-left: 40px;
  
}
.hero .app-image {
  order: -1; /* Rasm chapga o‘tadi */
}
.section-app {
  margin-top: 60px; /* Pastga joylash */
}

.hero-text p,
.app-text p {
  font-size: 1rem; /* Normal o‘lcham */
  color: #666; /* Kul rang */
  line-height: 1.6; /* Qatorlar orasida masofa */
  margin-bottom: 20px; /* Pastida bo‘sh joy */
  margin-left: 40px; 
}
.hero-btn {
  background-color: transparent; /* Shaffof fon */
  color: #458ff6; /* Ko'k matn rangi */
  border: 2px solid #458ff6; /* Ko'k chegara */
  padding: 15px 40px; /* Ichki bo'sh joy */
  border-radius: 25px; /* Yumaloq tugma */
  font-size: 18px; /* Shrift o'lchami */
  font-weight: 600; /* Qalin shrift */
  cursor: pointer; /* Ko'rsatkich qo'l shakli */
  transition: all 0.3s ease; /* Barcha o'zgarishlar uchun effekt */
  text-decoration: none; /* Chiziqni olib tashlash */
  display: inline-block; /* Blok element sifatida */
  margin-left: 40px;
  
}

/* Testimonials Section - Light background like in image */
.testimonials {
  background: #f5f6fa;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 600px;
}

/* Container */
.testimonials .container {
  background: linear-gradient(135deg, #6bb6ff 0%, #4a9eff 50%, #5ba7f7 100%);
  width: 1120px;
  height: 425px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
}
.container h2 {
  padding-top: 80px;
}



/* The blue rounded card container */
.testimonials-content {
    border-radius: 20px;
    padding: 50px;
    width: 100%;
    max-width: 800px;
    color: white;
    position: relative;
    box-shadow: 0 8px 25px rgba(74, 158, 255, 0.25);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 50px;
    align-items: center;
}
.testimonials h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: px;
    text-align: center;
    color: white;
}

/* Dotted pattern in top right of blue card */
.testimonials-content::after {
    content: '';
    position: absolute;
    top: 30px;
    right: 40px;
    width: 80px;
    height: 80px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 2px, transparent 2px);
    background-size: 12px 12px;
    background-repeat: repeat;
}

/* Author section - left side of card */
.testimonials-author {
    display: flex;
    flex-direction: column;
    align-items: center;  
    text-align: center;
    gap: 15px;
}

/* Circular author image */
.testimonials-author img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.3);
    object-fit: cover;
}

/* Author name */
.author-info h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
    color: white;
    line-height: 1.2;
}

/* Author title */
.author-info p {
    font-size: 1rem;
    margin: 0;
    opacity: 0.85;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
}

/* Testimonial text - right side of card */
.testimonials-text {
    font-size: 1.15rem;
    line-height: 1.7;
    margin: 0;
    color: white;
    font-weight: 300;
    text-align: left;
}

/* Navigation container - outside and below the blue card */
.navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-top: 40px;
}

/* Left and right arrow buttons */
.navigation button {
    background: transparent;
    border: 0px solid #d1d5db;
    color: #9ca3af;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    transition: all 0.3s ease;
    font-weight: bold;
}

.navigation button:hover {
    border-color: #6bb6ff;
    color: #6bb6ff;
    background: rgba(107, 182, 255, 0.1);
}

/* Dots indicator container */
.dots {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Individual dots */
.dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d1d5db;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Active dot - blue and larger */
.dots span.active {
    background: #6bb6ff;
    width: 12px;
    height: 12px;
}

.dots span:hover {
    background: #9ca3af;
}

/* ===== Articles Section ===== */
  .articles {
    padding: 60px 0;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .section-title {
    text-align: center;
    font-size: 2em;
    margin-bottom: 40px;
    color: #333;
    margin-left: 250px;
  }

  .cards-grid {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 360px;
    transition: transform 0.3s ease;
  }

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

  .card img {
    width: 100%;
    display: block;
  }

  .card-body {
    padding: 20px;
  }

  .card-body h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #222;
  }

  .card-text {
    font-size: 0.95em;
    color: #666;
    margin-bottom: 15px;
  }

  .read-more {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
  }

  .read-more:hover {
    text-decoration: underline;
  }

  /* Button center */
  .button-container {
    display: flex;
    justify-content: center;
    margin-top: 40px;
  }

  .button {
    padding: 12px 30px;
    border: 2px solid #007bff;
    background: none;
    color: #007bff;
    border-radius: 15px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 470px;
  }

  .button:hover {
    background: #007bff;
    color: #fff;
  }


/* footer section */
.footer {
  background: linear-gradient(135deg, #67b7f7 0%, #5ba3f3 100%);
  padding: 80px 0 60px 0;
  color: white;
}
/* 🧾 Maqolalar bo‘limi */
.footer .container {
  max-width: 1200px;
  margin: 0 auto;       /* Center the footer */
  padding: 0 20px;      /* Padding left & right */
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.footer-column {
  display: flex;
  flex-direction: column;
}

.footer-column .logo {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  position: relative;
}

/* Circle before the T */
.footer-column .logo::before {
  content: 'T';
  width: 35px;
  height: 35px;
  background: white;
  color: #67b7f7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
}

.footer-column p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 25px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
}

.footer-column .copyright {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: auto;
}

.footer-column h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 25px;
  color: white;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 12px;
}

.footer-column a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 300;
  transition: all 0.3s ease;
}

.footer-column a:hover {
  color: white;
}
/* footer section */