@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap');
body {
  margin: 0;
  padding: 0;
  color: #333;
   
}


.container-blog {
  font-family: 'Merriweather', serif;
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  max-width: 1450px;
  margin: auto;
  padding: 0 1rem;
  align-items: flex-start;
}


.main-coding-blog {

  display: flex;
  flex-wrap: wrap;
  gap: 20px;
 
  padding: 30px;
  font-family: "Segoe UI", sans-serif;
  color: #fff;
 justify-content: center;
 align-items: center;

}
.main-coding-blog p{
    1.1rem
}

/* First 3 cards fixed width */
a.coding-blog-card-2 {
  width: 317px;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* Last 2 cards - grow equally */
a.coding-blog-card-3 {
 flex: 1 1 calc(50% - 12.5px); /* 2 cards per row with gap */
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  min-width: 300px;
}

a.coding-blog-card-2:hover,
a.coding-blog-card-3:hover {
  transform: translateY(-5px);
}

a.coding-blog-card-2 img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
a.coding-blog-card-3 img{
    width: 100%;
  height: 300px;
  object-fit: cover;
}

a.coding-blog-card-2 h3,
a.coding-blog-card-3 h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 15px;
  line-height: 1.3;
   color: #191cdb;
}

a.coding-blog-card-2 p,
a.coding-blog-card-3 p {
  font-size: 1.1rem;
  color: #2c2a2a;
  margin: 0 15px 15px;
  line-height: 1.5;
}

a.coding-blog-card-2 .author-date,
a.coding-blog-card-3 .author-date {
  font-size: 13px;
  color: #959ba0;
  margin: 0 15px 15px;
  display: flex;
  justify-content: space-between;
}

/* Sidebar */
.sidebar {
  width: 330px;
  padding: 1px;
  border-radius: 10px;
  display: flex;
    flex-direction: column;
  gap: 2rem;
  margin: 2rem auto;
}

/* Section Title */
.sidebar-section h4 {
  font-size: 20px;
  font-weight: 700;
  color: #191cdb;
  margin-bottom: 10px;
}

/* Admin Section */
.admin-section {
  padding: 1rem 0rem;
   width: 340px;
  text-align: center;
  background: #ffffff;
   box-shadow: 0 4px 15px rgba(0,0,0,0.08);
   border-radius: 12px;
   margin: auto;
}

.admin-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 10px;
}

.admin-name {
  font-size: 18px;
  font-weight: 670;
  color: #333;
  margin-bottom: 10px;
}
.social-links{
   display: flex;
  flex-direction: row;
    gap: 10px;
      align-items: center;
  justify-content: center;

}
.social-links a {
  width: 40px;
  height: 40px;
  display: flex;
      align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;

}

.facebook { background: #1877f2; }
.twitter { background: #1da1f2; }
.instagram { background: #e4405f; }
.linkedin { background: #0077b5; }
.telegram { background: #0088cc; }

.social-links a:hover {
  opacity: 0.85;
  transform: scale(1.1);
}


/* Categories Section */
.categories-section{
  padding: 1rem 2rem;
   width: 340px;
  background: #ffffff;
   box-shadow: 0 4px 15px rgba(0,0,0,0.08);
   border-radius: 12px;
    margin: auto;
}

.categories-section ul {
  list-style: none;
  padding: 0;
}

.categories-section li {
  margin-bottom: 8px;
}

.categories-section a {
  color: #555;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.3s ease;
}

.categories-section a:hover {
  color: #191cdb;
}

/* eBooks Section */
.ebooks-section{
  padding: 1rem 2rem;
   width: 340px;
  background: #ffffff;
   box-shadow: 0 4px 15px rgba(0,0,0,0.08);
   border-radius: 12px;
    margin: auto;
}

.ebooks-section .ebook-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 8px;
}


.ebooks-section img {
  width: 100%;
  border-radius: 5px;
  object-fit: cover;
}

/* Responsive for Tablets & Phones */
@media screen and (max-width: 1024px) {
  .sidebar {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .ebooks-section .ebook-list {
    grid-template-columns: repeat(3, 1fr);
  
  }
}

@media screen and (max-width: 500px) {
  .ebooks-section .ebook-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* === Tablet (Portrait & Landscape): 768px–1024px === */
@media screen and (max-width: 1024px) {
  .container-blog {
    flex-direction: column;
    padding: 0 1rem;
  }

  .sidebar {
    width: 100%;
    margin-top: 2rem;
    padding: 1rem;
  }

  .main-coding-blog {
    justify-content: center;
  }

  a.coding-blog-card-2 {
    width: calc(50% - 15px);
  }

  a.coding-blog-card-3 {
    flex: 1 1 calc(50% - 15px);
  }
    .ebooks-section .ebook-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* === Mobile (Phones): Below 768px === */
@media screen and (max-width: 768px) {
  .container-blog {
    padding: 0 0px;
  }

  .main-coding-blog {
    flex-direction: column;
  }

  a.coding-blog-card-2,
  a.coding-blog-card-3 {
    width: 100% !important;
    flex: none;
  }

  .sidebar {
    width: 100%;
    padding: 1rem;
    margin-top: 2rem;
  }
  
  a.coding-blog-card-2 p,
  a.coding-blog-card-3 p {
    font-size: 1.1rem;
  }
    .ebooks-section .ebook-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* === Small Phones (optional tweak): Below 480px === */
@media screen and (max-width: 480px) {
  a.coding-blog-card-2 h3,
  a.coding-blog-card-3 h3 {
    font-size: 16px;
  }

  a.coding-blog-card-2 p,
  a.coding-blog-card-3 p {
    font-size: 17px;
  }
    .ebooks-section .ebook-list {
    grid-template-columns: repeat(1, 1fr);
  }
}


/* Blog Preview Card - Base */
.blog-preview-card {
  display: flex;
  gap: 30px;
  text-decoration: none;
  border-radius: 10px;
  padding: 25px;
  transition: transform 0.3s ease;
  color: #fff;
  max-width: 100%;
  align-items: flex-start;
  background: #fff;
}

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

/* Left image area */
.blog-preview-card .blog-card-left {
  flex: 1;
  min-width: 600px;
  max-width: 600px;
}

.blog-preview-card .blog-card-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* Right content area */
.blog-preview-card .blog-card-right {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blog-preview-card .blog-card-right h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  color: #191cdb;
  margin-bottom: 10px;
}

.blog-preview-card .blog-card-right p {
  font-size: 16px;
  line-height: 1.6;
  color: #645e5e;
  margin-bottom: 20px;
}

/* Author info */
.blog-preview-card .author-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #aaaaaa;
}

.blog-preview-card .author-info img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

/* Tablet Responsive */
@media screen and (max-width: 1024px) {
  .blog-preview-card {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }

  .blog-preview-card .blog-card-left {
    min-width: 100%;
    max-width: 100%;
  }

  .blog-preview-card .blog-card-right h2 {
    font-size: 24px;
  }
}

/* Mobile Responsive */
@media screen and (max-width: 600px) {
  .blog-preview-card {
    padding: 15px;
    gap: 15px;
  }

  .blog-preview-card .blog-card-right h2 {
    font-size: 20px;
  }

  .blog-preview-card .blog-card-right p {
    font-size: 16px;
  }
}