.elementor-12 .elementor-element.elementor-element-f50561d{--display:flex;}.elementor-12 .elementor-element.elementor-element-c399604{--display:flex;}.elementor-12 .elementor-element.elementor-element-fcb2d05{--display:flex;}.elementor-widget-posts .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-post__title, .elementor-widget-posts .elementor-post__title a{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-posts .elementor-post__meta-data{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .elementor-post__excerpt p{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-posts .elementor-post__read-more{color:var( --e-global-color-accent );}.elementor-widget-posts a.elementor-post__read-more{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-post__card .elementor-post__badge{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-12 .elementor-element.elementor-element-020257d{--grid-row-gap:5px;--grid-column-gap:5px;}.elementor-12 .elementor-element.elementor-element-020257d > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-020257d.elementor-element{--align-self:center;}.elementor-12 .elementor-element.elementor-element-020257d .elementor-post__meta-data span + span:before{content:"•";}.elementor-12 .elementor-element.elementor-element-020257d .elementor-post__card{border-radius:4px;padding-top:0px;padding-bottom:0px;}.elementor-12 .elementor-element.elementor-element-020257d .elementor-post__text{padding:0 10px;}.elementor-12 .elementor-element.elementor-element-020257d .elementor-post__meta-data{padding:10px 10px;}.elementor-12 .elementor-element.elementor-element-020257d .elementor-post__avatar{padding-right:10px;padding-left:10px;}.elementor-12 .elementor-element.elementor-element-020257d .elementor-post__title, .elementor-12 .elementor-element.elementor-element-020257d .elementor-post__title a{color:#FFFFFF;font-family:"Roboto", Sans-serif;font-size:18px;font-weight:500;text-transform:capitalize;text-decoration:none;}@media(max-width:767px){.elementor-12 .elementor-element.elementor-element-c399604{--content-width:1140px;}}@media(min-width:768px){.elementor-12 .elementor-element.elementor-element-c399604{--content-width:50%;}}@media(max-width:1024px) and (min-width:768px){.elementor-12 .elementor-element.elementor-element-c399604{--content-width:1140px;}}/* Start custom CSS for posts, class: .elementor-element-020257d *//*
=====================================
1. "Popular Jobs" हेडिंग 
(Custom Heading CSS)
=====================================
*/

/* 1.1 - विजेट कंटेनर को हेडिंग के लिए तैयार करना */
.elementor-12 .elementor-element.elementor-element-020257d > .elementor-widget-container {
  position: relative; /* ::before को पोजीशन देने के लिए */
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
}

/* 1.2 - पोस्ट ग्रिड को हेडिंग के नीचे खिसकाना */
.elementor-12 .elementor-element.elementor-element-020257d .elementor-posts-container {
  margin-top: 45px; /* हेडिंग के लिए जगह */
}

/* 1.3 - CSS से हेडिंग बनाना */
.elementor-12 .elementor-element.elementor-element-020257d > .elementor-widget-container::before {
  content: "⭐ Popular Tools"; 
  position: absolute;
  top: 0; /* कंटेनर के टॉप पर */
  left: 0; /* कंटेनर के लेफ्ट में */
  width: 100%;
  padding: 7px 25px;
  box-sizing: border-box; 
  background-color: #060097; /* थीम का प्राइमरी रंग */
  color: white;
  font-size: 22px;
  font-weight: 600;
  border-radius: 10px 10px 0 0; /* टॉप कोनों को गोल करें */
  text-align: left;
}

/*
=====================================
2. कार्ड की स्टाइलिंग और Hover इफ़ेक्ट
(Card Styling & Hover)
=====================================
*/
.elementor-12 .elementor-element.elementor-element-020257d .elementor-post__card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
 
  height: 100px;
  max-height: 120px;
}

.elementor-12 .elementor-element.elementor-element-020257d .elementor-post__card:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}


.elementor-12 .elementor-element.elementor-element-020257d .elementor-post__title {
  color: #ffffff; 
  

  display: -webkit-box;
  -webkit-line-clamp: 3; /* 3 लाइनों से ज़्यादा नहीं */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3.6em; /* 2 लाइनों के लिए अंदाजित ऊंचाई */
}

/* ✅ टाइटल का Hover कलर बदलना */
.elementor-12 .elementor-element.elementor-element-020257d .elementor-post__card:hover .elementor-post__title a {
  color: #ffcd57; /* Hover पर चमकदार पीला */
  opacity: 1;
}

/*
=====================================
4. हर कार्ड के लिए गहरे (Solid) बैकग्राउंड कलर
=====================================
*/

/* Card 1 */
.elementor-12 .elementor-element.elementor-element-020257d .elementor-post:nth-child(1) .elementor-post__card {
  background-color: #4a90e2; /* गहरा नीला */
}
/* Card 2 */
.elementor-12 .elementor-element.elementor-element-020257d .elementor-post:nth-child(2) .elementor-post__card {
  background-color: #50e3c2; /* गहरा हरा (टील) */
}
/* Card 3 */
.elementor-12 .elementor-element.elementor-element-020257d .elementor-post:nth-child(3) .elementor-post__card {
  background-color: #f5a623; /* गहरा पीला (सरसों) */
}
/* Card 4 */
.elementor-12 .elementor-element.elementor-element-020257d .elementor-post:nth-child(4) .elementor-post__card {
  background-color: #f78da7; /* गहरा गुलाबी */
}
/* Card 5 */
.elementor-12 .elementor-element.elementor-element-020257d .elementor-post:nth-child(5) .elementor-post__card {
  background-color: #9013fe; /* गहरा बैंगनी */
}
/* Card 6 */
.elementor-12 .elementor-element.elementor-element-020257d .elementor-post:nth-child(6) .elementor-post__card {
  background-color: #f8a55d; /* गहरा नारंगी */
}
/* Card 7 */
.elementor-12 .elementor-element.elementor-element-020257d .elementor-post:nth-child(7) .elementor-post__card {
  background-color: #4fc1b9; /* गहरा फिरोज़ी */
}
/* Card 8 */
.elementor-12 .elementor-element.elementor-element-020257d .elementor-post:nth-child(8) .elementor-post__card {
  background-color: #d0021b; /* गहरा लाल */
}
/* Card 9 */
.elementor-12 .elementor-element.elementor-element-020257d .elementor-post:nth-child(9) .elementor-post__card {
  background-color: #5c6bc0; /* गहरा इंडिगो */
}
/* Card 10 */
.elementor-12 .elementor-element.elementor-element-020257d .elementor-post:nth-child(10) .elementor-post__card {
  background-color: #7f8c8d; /* गहरा स्लेटी */
}






/* ✅ Bottom row: Excerpt (Last Date) + Read More */
.elementor-12 .elementor-element.elementor-element-020257d .elementor-post__excerpt {
  margin: 0;
}

.elementor-12 .elementor-element.elementor-element-020257d .elementor-post__excerpt {
  position: absolute;
  bottom: 3px; /* distance from bottom of post */
  left: 12px;   /* distance from left of post */
  
}




/* Target the Expert text */
.elementor-12 .elementor-element.elementor-element-020257d .elementor-post__excerpt {
  color: red;
  font-weight: bold;
  animation: popBlink 2s infinite; /* duration doubled for slower blink */
}

/* Animation keyframes */
@keyframes popBlink {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.05); /* smaller pop */
    opacity: 0.8;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  75% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}/* End custom CSS */