@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');

*{
  margin:0;
  padding:0;
  font-size:18px;
 /* list-style:none;*/
  text-decoration:none;
  outline:none;
  font-family: 'Poppins', sans-serif;
}
*{
  scrollbar-width:auto;
  scrollbar-color:#5e5e5e #fff
}
*::-webkit-scrollbar{
  width:9px
}
*::-webkit-scrollbar-track{
  background:#fff
}
*::-webkit-scrollbar-thumb{
  background-color:#ff0145;
  border:0 #fff
}
html{
  scroll-behavior:smooth;
  letter-spacing:.2px
}
body{
  background-color:#f9f9f9;
  font-family:geomanistregular;
  color:#3c424a;
  font-size:1.6rem
}
::selection{
  background:#ff0145;
  color:#fff;
  text-shadow:none
}
section{
  width:82%;
  margin:0 auto;
  display:table;
  position:relative
}
/* ==========================================================================
   Header & Navigation (Brand Theme)
   ========================================================================== */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  padding: 0;
  transition: all 0.3s ease;
}

header section {
  width: 90%;
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  position: relative;
}

#logo {
  display: inline-flex;
  align-items: center;
  font-size: 22px;
  line-height: 2rem;
  color: #171817;
  padding: 4px 0;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

#logo:hover {
  opacity: 0.9;
}

#logo table {
  border-collapse: collapse;
}

.logoimg {
  width: 36px;
  height: 36px;
  margin: -6px 8px -6px 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#logo:hover .logoimg {
  transform: rotate(-8deg) scale(1.08);
}

.coloringpages {
  font-size: 17px;
  font-weight: 700;
  color: #171817;
  padding: 0;
  margin: 0;
  line-height: 1.2;
}

.collection {
  font-size: 11px;
  margin-top: -3px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 5px;
  color: #ff0145;
  text-transform: uppercase;
}

.taghy {
  position: absolute;
  background-color: #ff0145;
  padding: 1px 10px;
  font-size: 14px;
  color: #fff;
}

nav {
  width: auto;
  margin: 0;
}

nav ul#ctegories {
  display: flex;
  align-items: center;
  gap: 3px;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul#ctegories li {
  list-style: none;
  display: flex;
  align-items: center;
}

nav ul#ctegories li a {
  color: #2b2f38;
  font-size: 13.5px;
  font-weight: 600;
  padding: 6px 9px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  letter-spacing: 0.15px;
  white-space: nowrap;
}

nav ul#ctegories li a:hover {
  color: #ff0145 !important;
  background-color: rgba(255, 1, 69, 0.08);
}

/* "Explore All" Button: Thematic Call to Action */
nav ul#ctegories li a.exploreall {
  background: linear-gradient(135deg, #ff0145 0%, #e6003d 100%) !important;
  color: #ffffff !important;
  border-radius: 50px;
  padding: 7px 15px;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 3px 10px rgba(255, 1, 69, 0.28);
  margin-left: 4px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

nav ul#ctegories li a.exploreall:hover {
  background: linear-gradient(135deg, #ff1a57 0%, #cc0035 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px rgba(255, 1, 69, 0.42);
}

nav ul#ctegories li a.exploreall:active {
  transform: translateY(0);
}

/* Search Button Enhancement */
nav ul#ctegories li a[title="Search"],
nav ul#ctegories li a:has(.searchhy) {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f4f5f8;
  margin-left: 4px;
  transition: all 0.2s ease;
}

nav ul#ctegories li a[title="Search"]:hover,
nav ul#ctegories li a:has(.searchhy):hover {
  background: rgba(255, 1, 69, 0.1);
  transform: scale(1.08);
}

/* Hamburger Menu Toggle Button */
.toggle-menu {
  display: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  transition: background-color 0.2s ease;
  z-index: 1002;
  user-select: none;
  -webkit-user-select: none;
}

.toggle-menu:hover {
  background-color: rgba(255, 1, 69, 0.08);
}

.toggle-menu ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.toggle-menu ul li {
  width: 100%;
  height: 2.2px;
  background-color: #171817;
  border-radius: 4px;
  list-style: none;
  margin: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

input[type=checkbox]#toggle-1 {
  display: none;
}
.adsbygoogle{
  text-align:center;
  margin:5px 0
}
.flx{
  display:flex
}
.secl{
  margin:20px 0;
  width:78%
}
.secr{
  margin:20px 0;
  width:22%
}
aside{
  position: sticky;
    top: 80px;
}

h1 {
  font-size: 30px;
  color: #0f1321;
  margin: 20px 0;
}
h2,h3{
  margin:25px 0 20px;
  font-size:25px;
  color: #0f1321;
  padding-top: 45px;
}
h3{
  margin:25px 0 20px;
  font-size:20px;
  color: #0f1321;
  padding-left: 15px;
}

h4{
  margin:25px 0 20px;
  font-size:18px
}
.letrcs{
  margin:25px 0 20px;
  font-size:18px
}
.date i{
font-size: 14px;
color:#282828;
}

p {
  color: #080808;
  line-height: 18px;
  font-weight: 500;
  margin: 20px 0;
  font-size: 18px;
  line-height: 30px;
  text-align: justify;
  padding-left: 15px;
  padding-right: 15px
}

.post_image img {
  width: 424px;
  height: 600px;
  box-shadow: 0px 0 60px 0 rgb(0 0 0 / 6%);
  background-image: url("images/loading.gif");
  background-repeat: no-repeat;
  background-size: cover;
}

.post_image_top img {
  width: calc(100% - 20px);
  
  margin: auto;
  display: block;
}

.post_image {
  text-align: center;
}


/* ==========================================================================
   Breadcrumb Navigation (Themed Pill Badge)
   ========================================================================== */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  margin: 16px 0 10px 0;
  background: #ffffff;
  border: 1px solid rgba(255, 1, 69, 0.15);
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(255, 1, 69, 0.05);
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #cbd5e1;
  line-height: 1;
  transition: all 0.25s ease;
}

.breadcrumb:hover {
  border-color: rgba(255, 1, 69, 0.3);
  box-shadow: 0 4px 14px rgba(255, 1, 69, 0.1);
}

.breadcrumb a {
  color: #64748b !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 3px 8px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

/* Home Icon via ::before */
.breadcrumb a:first-child::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 5px;
  vertical-align: -1px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") no-repeat center / contain;
}

.breadcrumb a:hover {
  color: #ff0145 !important;
  background: rgba(255, 1, 69, 0.08);
}

/* Active Category Pill */
.breadcrumb a:last-child:not(:first-child) {
  color: #ff0145 !important;
  background: rgba(255, 1, 69, 0.08);
  font-weight: 700 !important;
  letter-spacing: 0.3px;
}

.breadcrumb a:last-child:not(:first-child):hover {
  background: rgba(255, 1, 69, 0.15);
}

.svgico {
  width: 30px;
  height: 30px;
  margin: 0px 10px;
  cursor: pointer;
  transition: 0.1s;
  border-radius: 6px;
}
.svgico:hover{
transform:scale(1.1);
}
.sbfbt {
  padding: 10px 4px 4px 4px;
  background-color: #ffffff;
  border: 1px solid #dedede;
  box-shadow: 2px 2px 8px #d9d4d4;
  border-radius: 10px;
  margin-right: 3px;
}
article a{
  color: #ff0145;
  font-weight: 700;
  text-decoration: underline;
}

article ul li{
  color:#080808;
  padding: 3px 0px;
}
article ul {
padding: 5px 5px 5px 30px;
    background-color: #fde4fb;
    border-radius: 10px;
    box-shadow: 2px 2px 20px aliceblue;
    border: 1px solid #f5d2f3;}

.point {
  background-color: #f7babb;
  padding: 10px;
  font-weight: 600;
  color: #000;
  width: auto;
  display: inline;
}

.note {
  background-color: #ffe4eb;
  padding: 10px;
  color: #221212;
  background: -moz-linear-gradient(-45deg,#fe127b 0%,#d913cb 52%,#6875dd 100%);
  /* background: -webkit-linear-gradient(-45deg,#fe127b 0%,#d913cb 52%,#6875dd 100%); */
  /* background: linear-gradient(135deg,#fe127b 0%,#d913cb 52%,#6875dd 100%); */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe127b',endColorstr='#6875dd',GradientType=1);
  background-size: 350% 350%;
  animation: waveColors 8s ease infinite;
  /* font-weight: 600; */
  margin: 5px;
  border-radius: 5px;
  font-size: 16px;
}

.searchhy{
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48"><path fill="%23199be2" d="M35.983,32.448l-3.536,3.536l7.87,7.87c0.195,0.195,0.512,0.195,0.707,0l2.828-2.828c0.195-0.195,0.195-0.512,0-0.707L35.983,32.448z"></path><radialGradient id="KGt2acGa95QyN2j07oBX6a_KPmthqkeTgDN_gr1" cx="20.024" cy="20.096" r="19.604" gradientUnits="userSpaceOnUse"><stop offset=".693" stop-color="%23006185"></stop><stop offset=".921" stop-color="%2335c1f1"></stop></radialGradient><polygon fill="url(%23KGt2acGa95QyN2j07oBX6a_KPmthqkeTgDN_gr1)" points="31.601,28.065 28.065,31.601 32.448,35.983 35.983,32.448"></polygon><linearGradient id="KGt2acGa95QyN2j07oBX6b_KPmthqkeTgDN_gr2" x1="8.911" x2="31.339" y1="8.911" y2="31.339" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="%23a3ffff"></stop><stop offset=".223" stop-color="%239dfbff"></stop><stop offset=".53" stop-color="%238bf1ff"></stop><stop offset=".885" stop-color="%236ee0ff"></stop><stop offset="1" stop-color="%2363daff"></stop></linearGradient><circle cx="20" cy="20" r="16" fill="url(%23KGt2acGa95QyN2j07oBX6b_KPmthqkeTgDN_gr2)"></circle></svg>');
    background-size: 25px;
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
  }
  

  .ctgtitle {
    background-color: white;
    display: block;
    text-align: center;
    margin-top: auto;
    padding: 5px;
    border-radius: 10px;
    font-weight: 700;
    color: #1f1e1e;
    border: 1px solid #e7e7e7;
   margin: 10px; 
    display: inline-block;
}

.ctgimghy{
  width:145px;
  height: auto;
}



.ctgtitle:hover  .ctgimghy{
  background-color: #ff0145;
  opacity:0.8 !important;
}
.ctgtitle:hover{
  background-color: #ff0145; 
  color: #fff;
}

.note strong {
  font-weight: 700;
  font-size: 15px;
}

@-webkit-keyframes waveColors{0%{background-position:0% 7%}50%{background-position:100% 94%}100%{background-position:0% 7%}}@keyframes waveColors{0%{background-position:0% 7%}50%{background-position:100% 94%}100%{background-position:0% 7%}}

/* ==========================================================================
   Sidebar: .categories ("Read More" / Recommended Section)
   ========================================================================== */
.categories {
  background-color: #ffffff;
  padding: 18px 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  margin: 0 5px 25px;
  position: sticky;
  top: 80px;
  display: block;
  transition: box-shadow 0.3s ease;
}

.categories:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(255, 1, 69, 0.04);
}

.categname {
  padding: 12px 16px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff0145 0%, #e6003d 100%);
  box-shadow: 0 4px 14px rgba(255, 1, 69, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.categname::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.categories ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.categories ul li {
  margin: 0;
  list-style: none;
}

.categories a,
.categories ul li a {
  padding: 10px 14px;
  color: #2b303a;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-transform: capitalize;
  text-decoration: none !important;
  background-color: #fafafc;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-left: 3px solid transparent;
  border-radius: 10px;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.categories a::after,
.categories ul li a::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: #a0a6b5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.22s ease, background-color 0.22s ease;
}

.categories a:hover,
.categories ul li a:hover {
  background-color: rgba(255, 1, 69, 0.05);
  border-color: rgba(255, 1, 69, 0.15);
  border-left: 3px solid #ff0145;
  color: #ff0145 !important;
  transform: translateX(3px);
  box-shadow: 0 3px 10px rgba(255, 1, 69, 0.08);
}

.categories a:hover::after,
.categories ul li a:hover::after {
  transform: translateX(3px);
  background-color: #ff0145;
}

.categad{
  margin-top:30px;
  text-align:center;
  background-color:#fff;
  padding:10px;
  box-shadow:2px 2px 2px #f2f2f2;
  border-radius:10px
}
.ad{
  position:sticky;
  top:0;
  display: none;
}


.toc{
  max-width:560px;
  border:1px solid #f2f2f2;
  box-shadow:2px 2px 8px #f2f2f2;
  border-radius:10px;
  background-color:#fff;
  padding:5px;
  margin:20px 0;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none
}
.crdh{
  margin:auto;
  text-align:center;
  font-size:16px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical
}

.toc{max-width:500px;border:1px solid #f2f2f2;box-shadow:2px 2px 8px #f2f2f2;border-radius:10px;background-color:#fff;padding:5px;margin:20px 0;-webkit-user-select:none;-ms-user-select:none;user-select:none}.crdh{margin:auto;text-align:center;font-size:16px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.toctit{display:flex}.toctitleft{width:80%;padding:5px 10px;font-weight:600;text-transform:UPPERCASE}.toctitright{}
.toccont{padding:10px;display:none;}
.toccont ul{
list-style: none;}

.toccont ul li a {
  text-decoration: none;
  color: #3c424a;
  transition: .3s;
  font-weight: 500;
  font-size: 16px;
  list-style: none;
}
.toccont ul li a:hover{color:#ff0145}
.toccont ul li a::before {
  content: "#";
  padding: 1px 6px;
  color: #ffffff;
  background-color: #000;
  width: 20px;
  height: 20px;
  border-radius: 27px;
  margin: 6px;
  font-size: 15px;
  text-align: center;
}
.toccont ul li{padding:2px 0}
#hide {
  margin: 6px 0;
  background-color: #f7babb;
  background-image: linear-gradient(315deg,#f7babb 0%,#ff9bbd 74%);
  color: #313131;
  font-size: 15px;
  font-weight: 600;
  border-radius: 15px;
  outline: none;
  padding: 2px 15px;
  cursor: pointer;
  border: none;
  box-shadow: 2px 2px 6px #edbaf7;
  width: 50px;
  text-align: center;
}
hr{
  height:0;
  outline:none;
  border-bottom:2px dashed #afabab;
  border-top:none;
  width:30%;
  margin:24px auto
}

.related {
  margin: 15px 0px;
  font-weight: 700;
  color: #1e1e1e;
  padding: 5px 8px;
  border: 1px solid #ededed;
  border-left: 15px solid #ff0145;
  width: auto;
  display: inline-block;
  border-radius: 10px;
  box-shadow: 2px 2px 20px #e3fff0;
}
.related a {
  color: #ff0145;
  text-decoration: none;
}

footer {
  background-color: #282828;
  padding: 20px 0px;
}

.fotr a {
  color: #fff;
  font-size: 14px;
  padding: 5px;
}


.herosection {
  text-align: center;
  display: block;
  background-color: #eaeef6;
  border-radius: 20px;
}
.hero_img {
  width: 180px;
  height: 180px;
  margin: auto;
}

.hero_sec_card {
  /* display: flex; */
  /* width: calc(100% - 30px); */
  /* height: auto; */
  margin: 20px;
  padding: 20px 10px;
  border-radius: 23px;
}
.hero_card_title {
  padding: 5px;
  font-weight: 600;
  color: #994eff;
  margin-top: 10px;
  background-color: #f1eeff;
}
.homepage_cards {
  display: block;
  margin: 20px 10px;
  text-align: center;

}

.load_morex {
  margin-top: 20px !important;
  width: 140px !important;
  background-color: #eaeef6 !important;
  padding: 5px !important;
  font-weight: 600 !important;
  color: #a264f7 !important;
  border: 2px solid #e8d9fc !important;
  /* box-shadow: 2px 2px 20px #dce7ff; */
  border-radius: 33px !important;
  height: 28px !important;
}

.homepage_cards a {
  color: #282828;
  margin: 6px;
  width: 260px;
  height: 225px;
  display: inline-grid;
  background-color: #ffffff;
  border: 1px solid #f2f2f2;
  border-radius: 10px;
  padding: 10px;
  transition: 0.3s;
  box-shadow: 4px 4px 17px 3px #f0f0f0;
}

.homepage_cards a:hover {
  transform: scale(1.01);
  box-shadow: 5px 4px 17px 3px #e0dada;
}

.homepage_card_image img {
  width: 260px;
  height: 170px;
}
.homepage_card_title {
  font-weight: 600;
  font-size: 16px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: left;
}

.all_share{
  display: inline-flex;
}
.sharename {
  display: block;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  font-size: 14px;
  padding: 1px;
  margin-right: -20px;
  color: #6c6c6c;
}
.read_more_post {
  width: calc(100% - 10px);
}
.read_more_post::before {
  content: "READ MORE";
  background-color: #ff0145;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe127b',endColorstr='#6875dd',GradientType=1);
  background-size: 350% 350%;
  animation: waveColors 8s ease infinite;
  color: #ffffff;
  padding: 10px;
  font-weight: 600;
  margin: 0px 0px;
  display: inline-block;
  border-radius: 10px 10px 0px 0px;
}
.read_more_post .homepage_cards {
  margin: 0px;
  border: 1px solid #ffeded;
  padding: 12px 0px;
}




.subx::before{
  content: "-" !important;
  background-color: #ffffff !important;
  padding: 1px 8px !important;
  font-size: 14px !important;
  margin-left: 15px !important;
  color:#282828 !important;
  
}



/* ==========================================================================
   Action Buttons: "Download PDF" & "Color Online"
   ========================================================================== */
.articlebtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 210px;
  max-width: calc(100% - 30px);
  min-height: 46px;
  padding: 11px 22px;
  margin: 10px auto 28px;
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.3px;
  text-decoration: none !important;
  text-align: center;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.25s ease,
              border-color 0.25s ease;
  
  /* Primary Theme Style: "Download PDF" */
  background: linear-gradient(135deg, #ff0145 0%, #e6003d 100%);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 14px rgba(255, 1, 69, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.articlebtn:visited {
  color: #ffffff !important;
}

/* Glass shine reflection on hover */
.articlebtn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    60deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  transition: transform 0.65s ease;
  pointer-events: none;
  opacity: 0;
}

.articlebtn:hover::after {
  opacity: 1;
  transform: rotate(25deg) translate(350%, 0);
}

/* Download PDF: SVG Icon via ::before */
.articlebtn:not(.color-online-btn):not(.online-color-btn)::before,
.articlebtn[href*="download-pdf"]::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.25s ease;
}

/* Download PDF: Hover & Active */
.articlebtn:not(.color-online-btn):not(.online-color-btn):hover,
.articlebtn[href*="download-pdf"]:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ff1a57 0%, #cc0035 100%);
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(255, 1, 69, 0.48),
              0 2px 6px rgba(0, 0, 0, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.articlebtn:not(.color-online-btn):not(.online-color-btn):hover::before,
.articlebtn[href*="download-pdf"]:hover::before {
  transform: translateY(1.5px);
}

.articlebtn:not(.color-online-btn):not(.online-color-btn):active,
.articlebtn[href*="download-pdf"]:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 8px rgba(255, 1, 69, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   "Color Online" Button Styling
   ========================================================================== */
.articlebtn.color-online-btn,
.articlebtn.online-color-btn,
.articlebtn[href*="color-online"] {
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* Color Online: Palette Icon via ::before */
.articlebtn.color-online-btn::before,
.articlebtn[href*="color-online"]:not(.online-color-btn)::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12c0 5.52 4.48 10 10 10 1.1 0 2-.9 2-2 0-.46-.17-.88-.44-1.22-.27-.34-.44-.76-.44-1.22 0-1.1.9-2 2-2h1.66c3.44 0 6.22-2.78 6.22-6.22C23 5.48 18.06 2 12 2z'/%3E%3Ccircle cx='7.5' cy='11.5' r='1.5' fill='currentColor'/%3E%3Ccircle cx='10.5' cy='7.5' r='1.5' fill='currentColor'/%3E%3Ccircle cx='14.5' cy='7.5' r='1.5' fill='currentColor'/%3E%3Ccircle cx='17.5' cy='11.5' r='1.5' fill='currentColor'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12c0 5.52 4.48 10 10 10 1.1 0 2-.9 2-2 0-.46-.17-.88-.44-1.22-.27-.34-.44-.76-.44-1.22 0-1.1.9-2 2-2h1.66c3.44 0 6.22-2.78 6.22-6.22C23 5.48 18.06 2 12 2z'/%3E%3Ccircle cx='7.5' cy='11.5' r='1.5' fill='currentColor'/%3E%3Ccircle cx='10.5' cy='7.5' r='1.5' fill='currentColor'/%3E%3Ccircle cx='14.5' cy='7.5' r='1.5' fill='currentColor'/%3E%3Ccircle cx='17.5' cy='11.5' r='1.5' fill='currentColor'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.25s ease;
}

/* Color Online: Hover & Active */
.articlebtn.color-online-btn:hover,
.articlebtn.online-color-btn:hover,
.articlebtn[href*="color-online"]:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #8b5cf6 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.48),
              0 2px 6px rgba(0, 0, 0, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.articlebtn.color-online-btn:hover::before,
.articlebtn[href*="color-online"]:not(.online-color-btn):hover::before {
  transform: rotate(-15deg);
}

.articlebtn.color-online-btn:active,
.articlebtn.online-color-btn:active,
.articlebtn[href*="color-online"]:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Margins & Section Spacing */
a.articlebtn + a.articlebtn,
a.articlebtn.color-online-btn,
a.articlebtn.online-color-btn {
  margin-top: 10px;
  margin-bottom: 30px;
}
a.articlebtn:not(:has(+ a.articlebtn)):not(.color-online-btn):not(.online-color-btn) {
  margin-bottom: 30px;
}

/* Responsive Side-by-Side Arrangement on Medium+ Screens */
@media (min-width: 580px) {
  a.articlebtn:not(.color-online-btn):not(.online-color-btn):has(+ a.articlebtn) {
    display: inline-flex;
    width: 185px;
    min-width: 185px;
    margin-left: calc(50% - 193px);
    margin-right: 14px;
    margin-top: 14px;
    margin-bottom: 32px;
  }
  a.articlebtn.color-online-btn,
  a.articlebtn.online-color-btn,
  a.articlebtn + a.articlebtn {
    display: inline-flex;
    width: 185px;
    min-width: 185px;
    margin-left: 0;
    margin-right: auto;
    margin-top: 14px;
    margin-bottom: 32px;
  }
}

.printbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  outline: none;
  padding: 11px 24px;
  background: linear-gradient(135deg, #ff0145 0%, #e6003d 100%);
  margin: 10px auto;
  width: 210px;
  text-decoration: none;
  color: #fff;
  text-align: center;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 14px rgba(255, 1, 69, 0.35);
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  transition: all 0.25s ease;
}

.printbtn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ff1a57 0%, #cc0035 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(255, 1, 69, 0.48);
}

/* Color Online Studio Card Button Harmonization */
.co-card-btn-color {
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.28) !important;
  transition: all 0.2s ease !important;
}
.co-card-btn-color:hover {
  background: linear-gradient(135deg, #8b5cf6 0%, #4f46e5 100%) !important;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.42) !important;
  transform: translateY(-1px) !important;
}
.spacediv{
  padding: 10px 0px;
}
.printimg{
  width:714px !important;
  height: 1010px !important;
}

/*Related article here*/

.aajun-container {
    background: white;
    border: 2px dashed #fe0145;
    border-radius: 16px;
    padding: 30px;
    /* max-width: 600px; */
    /* width: 100%; */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: auto;
    display: block;
}

.aajun-title {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 25px;
    line-height: 1.3;
    margin: -45px 0 14px;
}

        .aajun-links-wrapper {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }

.aajun-link {
    background: #e62359;
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
    min-width: 120px;
}

        .aajun-link:hover {
            background: #22000b;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
        }

        .aajun-link:active {
            transform: translateY(0);
            box-shadow: 0 2px 6px rgba(66, 133, 244, 0.2);
        }

        @media (max-width: 480px) {
            .aajun-container {
                padding: 20px;
                margin: 0 10px;
            }
            
            .aajun-title {
                font-size: 18px;
                margin-bottom: 20px;
            }
            
            .aajun-link {
                font-size: 14px;
                padding: 10px 18px;
                min-width: 100px;
            }
            
            .aajun-links-wrapper {
                gap: 10px;
            }
        }

/*Related article end here*/

@page { size: auto;  margin: 0mm; }







@media print {
  header, footer, button, .spacediv, .printbtn {
      display: none;
  }
  .post_image img{
box-shadow: none;
  }
}

@media only screen and (max-width: 1080px) {
  header section {
    width: 92%;
    padding: 8px 0;
  }

  #logo {
    padding: 0;
  }

  .toggle-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    padding: 8px;
    margin: 0;
  }

  /* Animated Hamburger to "X" Morph */
  header:has(input#toggle-1:checked) .toggle-menu ul li:nth-child(1),
  input#toggle-1:checked ~ .toggle-menu ul li:nth-child(1) {
    transform: translateY(6.9px) rotate(45deg);
    background-color: #ff0145;
  }

  header:has(input#toggle-1:checked) .toggle-menu ul li:nth-child(2),
  input#toggle-1:checked ~ .toggle-menu ul li:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  header:has(input#toggle-1:checked) .toggle-menu ul li:nth-child(3),
  input#toggle-1:checked ~ .toggle-menu ul li:nth-child(3) {
    transform: translateY(-6.9px) rotate(-45deg);
    background-color: #ff0145;
  }

  input[type=checkbox]#toggle-1 {
    position: absolute;
    top: -9999px;
    left: -9999px;
    opacity: 0;
  }

  /* Mobile Dropdown Menu */
  nav {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 260px;
    max-width: calc(100vw - 32px);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12),
                0 4px 16px rgba(255, 1, 69, 0.06);
    padding: 8px;
    z-index: 1001;
    overflow: hidden;
  }

  input[type=checkbox]#toggle-1:checked ~ nav {
    display: block;
    animation: navDropIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  nav ul#ctegories {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2px;
  }

  nav ul#ctegories li {
    width: 100%;
    display: block;
  }

  nav ul#ctegories li a {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 14px;
    font-size: 14px;
    border-radius: 10px;
    color: #282828;
    justify-content: flex-start;
  }

  nav ul#ctegories li a:hover {
    background: rgba(255, 1, 69, 0.08);
    color: #ff0145 !important;
    padding-left: 18px;
  }

  nav ul#ctegories li a.exploreall {
    margin: 6px 4px 2px;
    width: calc(100% - 8px);
    box-sizing: border-box;
    justify-content: center;
    border-radius: 12px;
    padding: 9px 14px;
  }

  nav ul#ctegories li a[title="Search"],
  nav ul#ctegories li a:has(.searchhy) {
    width: calc(100% - 8px);
    height: auto;
    margin: 4px;
    padding: 9px 14px;
    border-radius: 10px;
    justify-content: flex-start;
    gap: 8px;
    background: #f4f5f8;
  }

  nav ul#ctegories li a[title="Search"]::after,
  nav ul#ctegories li a:has(.searchhy)::after {
    content: "Search Collection";
    font-size: 13.5px;
    font-weight: 600;
    color: #4b5563;
  }

  section {
    width: 96%;
  }
}

@keyframes navDropIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media only screen and (max-width:960px){
  .flx{
      display:block
  }
  .secl{
      width:100%
  }
  .secr{
      width:100%
  }
  article{
      padding:5px
  }
  .codeinfo{
      text-align:center
  }
  .readcard{
      width:46%
  }




}
@media only screen and (max-width:720px){
  .cinfocrd{
      width:calc(100% - 40px)
  }
  .cardtbl{
      margin:auto;
      width:calc(100% - 40px)
  }
  .printimg{
    width:354px !important;
    height: 500px !important;
  }
}
@media only screen and (max-width:660px){
  .readcard{
      width:calc(100% - 20px)
  }
  .post_image img {
    width: calc(100% - 20px);
    height: 100%;
  }
}
@media only screen and (max-width:420px){
  .altcd{
      width:96%
  }
  .homepage_cards a {
    width: calc(100% - 20px);
    height: 100%;
}

  .homepage_card_image img {
    width: calc(100% - 10px);
    height: 100%;
}

.printimg{
  width: calc(100% - 30px) !important;
  height: auto !important;
}
}
@media only screen and (max-width:420px){
  .printimg{
    width: 200px !important;
    height: 283px !important;
  }
}

/* ==========================================================================
   Related Coloring Pages Spotlight Studio (Theme-Matched, Line Art Preview)
   ========================================================================== */
.related-spotlight {
  position: relative;
  background: linear-gradient(145deg, #ffffff 0%, #fff7f9 50%, #fef2f6 100%);
  border: 2px solid rgba(255, 1, 69, 0.16);
  border-radius: 22px;
  padding: 28px 22px 24px;
  margin: 38px 0 42px;
  box-shadow: 0 16px 45px -10px rgba(255, 1, 69, 0.12),
    0 2px 10px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  box-sizing: border-box;
}

/* Animated Top Brand Wave Bar */
.related-spotlight::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #ff0145 0%, #fe127b 35%, #d913cb 70%, #6875dd 100%);
  background-size: 200% auto;
  animation: waveShift 6s linear infinite;
}

@keyframes waveShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Header */
.spotlight-header {
  text-align: left;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 1, 69, 0.1);
}

.spotlight-title {
  font-family: 'Poppins', sans-serif;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px;
  line-height: 1.25;
  margin: 0 !important;
  background: linear-gradient(135deg, #111827 30%, #ff0145 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 4-Column Showcase Grid on Desktop */
.spotlight-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.spotlight-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 10px;
  text-decoration: none !important;
  box-sizing: border-box;
  overflow: hidden;
  user-select: none;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s ease;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);
}

.spotlight-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 1, 69, 0.38);
  box-shadow: 0 14px 30px -4px rgba(255, 1, 69, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Sheet Preview Frame - Vertical Portrait Ratio */
.card-preview {
  width: 100%;
  aspect-ratio: 1 / 1.35;
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    0 2px 6px rgba(0, 0, 0, 0.03);
}

.card-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  background-color: #ffffff;
  transition: transform 0.35s ease;
}

.spotlight-card:hover .card-preview img {
  transform: scale(1.05);
}

/* Card Text Info */
.card-info {
  padding: 9px 4px 3px;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.card-title {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  line-height: 1.3;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.spotlight-card:hover .card-title {
  color: #ff0145 !important;
}

/* Footer */
.spotlight-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 1, 69, 0.1);
  margin-top: 4px;
}

.footer-note {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ff0145 0%, #e6003d 100%);
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 18px;
  border-radius: 50px;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(255, 1, 69, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.footer-cta-btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.footer-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 1, 69, 0.45);
}

.footer-cta-btn:hover svg {
  transform: translateX(3px);
}

/* Responsive Breakpoints */
@media (max-width: 820px) {
  .spotlight-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .related-spotlight {
    padding: 20px 14px 18px;
    margin: 28px 0 32px;
    border-radius: 18px;
  }

  .spotlight-title {
    font-size: 20px !important;
  }

  .spotlight-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .card-title {
    font-size: 12.5px !important;
  }

  .spotlight-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .footer-cta-btn {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}