/* ============================================
   THEME-02: Kid Toy Store — Complete Redesign
   ============================================ */

:root {
  --toy-coral: #ff6b6b;
  --toy-yellow: #ffd93d;
  --toy-mint: #6bcb77;
  --toy-sky: #4d96ff;
  --toy-purple: #9b5de5;
  --toy-pink: #f15bb5;
  --toy-dark: #2b2d42;
  --toy-light: #fffbf0;
  --toy-card-bg: #ffffff;
  --toy-radius: 24px;
  --toy-shadow: 0 8px 32px rgba(43,45,66,0.10);
  --toy-shadow-hover: 0 16px 48px rgba(43,45,66,0.18);
  --toy-transition: all 0.3s cubic-bezier(.4,0,.2,1);
}

/* === BODY === */
html, body { overflow-x: hidden; }
body.theme01-body {
  background: var(--toy-light) !important;
  color: var(--toy-dark);
  font-family: "Nunito", "Baloo 2", sans-serif !important;
}
body.theme01-body *:not(i):not(svg):not(path):not(canvas):not([class^="fa"]):not([class*=" fa"]):not([class^="bx"]):not([class*=" bx"]) { font-family: inherit !important; }

/* === TOPBAR: rainbow gradient === */
.site-topbar {
  background: linear-gradient(90deg, var(--toy-coral), var(--toy-yellow), var(--toy-mint), var(--toy-sky), var(--toy-purple), var(--toy-pink)) !important;
  border: none !important;
  padding: 6px 0 !important;
}
.site-topbar, .site-topbar a, .site-topbar span,
.topbar-action-btn, .topbar-action-btn span { color: #fff !important; }
.topbar-action-btn {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.5) !important;
  border-radius: 20px !important;
}
.site-topbar-right #google_translate_element .goog-te-gadget-simple {
  background: rgba(255,255,255,0.25) !important;
  border-color: rgba(255,255,255,0.5) !important;
  border-radius: 20px !important;
}
.site-topbar-right #google_translate_element .goog-te-menu-value span { color: #fff !important; }

/* === NAVBAR: bubbly pill style === */
.site-navbar {
  background: rgba(255,255,255,0.97) !important;
  border-bottom: 3px solid var(--toy-yellow) !important;
  box-shadow: 0 4px 20px rgba(43,45,66,0.08) !important;
  border-radius: 0 0 28px 28px;
}
.site-nav-link {
  border-radius: 50px !important;
  font-weight: 800 !important;
  color: var(--toy-dark) !important;
  font-size: 0.95rem !important;
  transition: var(--toy-transition) !important;
}
.site-nav-link:hover, .site-nav-link:focus {
  background: var(--toy-yellow) !important;
  color: var(--toy-dark) !important;
  transform: scale(1.05);
}
.dropdown-menu {
  border-radius: 18px !important;
  border: 2px solid var(--toy-yellow) !important;
  box-shadow: var(--toy-shadow) !important;
}
.dropdown-item:hover { background: #fff8e1 !important; }

.header-cta, .mobile-contact-btn {
  background: linear-gradient(135deg, var(--toy-coral), var(--toy-pink)) !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 20px rgba(241,91,181,0.35) !important;
  transition: var(--toy-transition) !important;
}
.header-cta:hover { transform: translateY(-3px) scale(1.04); }

/* === SECTION HEADINGS: playful underline === */
.section-heading {
  color: var(--secondary-color, var(--toy-purple)) !important;
  font-weight: 900 !important;
  font-family: "Baloo 2", "Nunito", sans-serif !important;
  text-transform: none !important;
  position: relative;
}
.section-subtitle, .products-subtitle {
  background: linear-gradient(135deg, rgba(255,217,61,0.12), rgba(107,203,119,0.10)) !important;
  border: 2px dashed rgba(155,93,229,0.25) !important;
  border-radius: 18px !important;
  color: #555 !important;
  box-shadow: none !important;
}
.section-subtitle::after, .products-subtitle::after {
  background: linear-gradient(90deg, var(--toy-coral), var(--toy-yellow), var(--toy-mint)) !important;
  height: 4px !important;
  border-radius: 4px !important;
}

/* === HOME SECTIONS CONTAINER === */
.home-sections {
  background: repeating-linear-gradient(
    135deg,
    rgba(255,217,61,0.04) 0px, rgba(255,217,61,0.04) 20px,
    transparent 20px, transparent 40px
  ), var(--toy-light) !important;
  gap: 20px !important;
  padding: 20px 12px 30px !important;
}

/* === CMS SECTION CARDS: rounded bubbly containers === */
.cms-section {
  border-radius: var(--toy-radius) !important;
  border: 2px solid rgba(255,217,61,0.35) !important;
  box-shadow: var(--toy-shadow) !important;
  background: #fff !important;
  overflow: hidden;
  position: relative;
}

/* Add floating toy shapes to backgrounds */
.cms-section::before, .cms-section::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: floatImage 8s ease-in-out infinite alternate;
  opacity: 0.4;
  display: block !important;
}

.cms-section:nth-child(odd)::before {
  width: 150px; height: 150px;
  background: radial-gradient(circle, var(--toy-yellow) 0%, transparent 70%);
  top: -20px; left: -40px;
}
.cms-section:nth-child(even)::before {
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--toy-pink) 0%, transparent 70%);
  bottom: -50px; right: -50px;
  animation-duration: 10s;
}
.cms-section:nth-child(3n)::after {
  width: 100px; height: 100px;
  background: radial-gradient(circle, var(--toy-sky) 0%, transparent 70%);
  top: 40%; right: 5%;
  animation-duration: 6s;
}
.cms-section:nth-child(4n)::after {
  width: 120px; height: 120px;
  background: radial-gradient(circle, var(--toy-mint) 0%, transparent 70%);
  bottom: 20%; left: 10%;
  animation-duration: 7s;
}

.cms-section > * {
  position: relative;
  z-index: 1;
}

/* === HERO SLIDER === */
.sec-1 {
  height: min(82vh, 700px) !important;
  min-height: 460px;
  border-radius: 0 0 40px 40px !important;
  overflow: hidden;
}
.sec-1 main { border-radius: 0 0 40px 40px !important; overflow: hidden; }
.item { border-radius: 0 !important; }
.item::after {
  background: linear-gradient(150deg, rgba(43,45,66,0.55), rgba(155,93,229,0.20)) !important;
}
.content .title {
  background: rgba(43,45,66,0.5) !important;
  border-radius: 16px !important;
  padding: 0.5rem 1rem !important;
  backdrop-filter: blur(6px);
  font-family: "Baloo 2", sans-serif !important;
}
.hero-cta-group { gap: 0.8rem !important; }
.hero-cta-primary {
  background: linear-gradient(135deg, var(--toy-coral), var(--toy-pink)) !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 24px rgba(241,91,181,0.3) !important;
}
.hero-cta-secondary {
  background: rgba(255,255,255,0.2) !important;
  border: 2px solid #fff !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  backdrop-filter: blur(4px);
}
.hero-cta-outline {
  background: var(--toy-yellow) !important;
  color: var(--toy-dark) !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 18px rgba(255,217,61,0.35) !important;
}
.hero-nav-btn {
  background: rgba(255,255,255,0.25) !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  width: 48px !important; height: 48px !important;
}
.hero-nav-btn:hover { background: var(--toy-yellow) !important; color: var(--toy-dark) !important; }

/* === PRODUCT CARDS: bouncy toy-box feel === */
.product-card, .catalog-card, .home-blog-card, .similar-product-card {
  border-radius: 22px !important;
  border: 2px solid rgba(107,203,119,0.25) !important;
  box-shadow: var(--toy-shadow) !important;
  background: #fff !important;
  transition: var(--toy-transition) !important;
  overflow: hidden;
  animation: floatUp 4s ease-in-out infinite alternate;
}
/* Stagger product card animations so they don't all float together */
.col-lg-3:nth-child(even) .product-card {
  animation-delay: 1s;
}
.col-lg-3:nth-child(3n) .product-card {
  animation-delay: 2s;
}

.product-card:hover, .catalog-card:hover, .home-blog-card:hover, .similar-product-card:hover {
  transform: translateY(-10px) rotate(-2deg) scale(1.02) !important;
  box-shadow: var(--toy-shadow-hover) !important;
  border-color: var(--toy-yellow) !important;
  animation-play-state: paused;
}
.product-thumb, .catalog-thumb, .home-blog-thumb, .similar-product-thumb {
  border-radius: 18px 18px 0 0 !important;
  transition: transform 0.4s ease !important;
}
.product-card:hover .product-thumb, .catalog-card:hover .catalog-thumb { transform: scale(1.08) !important; }
.product-name, .catalog-name { font-weight: 800 !important; color: var(--toy-dark) !important; }

/* === BUTTONS: all vibrant pills === */
.product-btn, .catalog-btn, .blog-read-btn, .home-blog-read-btn,
.view-all-products-btn, .home-blog-more-btn, .detail-enquiry-btn,
.contact-submit-btn, .enquiry-submit-btn, .theme-btn, .branch-map-btn {
  border-radius: 50px !important;
  background: linear-gradient(135deg, var(--primary-color, var(--toy-sky)), var(--secondary-color, var(--toy-purple))) !important;
  color: #fff !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(77,150,255,0.25) !important;
  transition: var(--toy-transition) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.82rem !important;
  position: relative;
  overflow: hidden;
}
/* Button shine animation */
.product-btn::after, .catalog-btn::after, .theme-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  animation: buttonShine 3s infinite;
}
.product-btn:hover, .catalog-btn:hover, .view-all-products-btn:hover,
.contact-submit-btn:hover, .enquiry-submit-btn:hover, .theme-btn:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 10px 28px rgba(77,150,255,0.35) !important;
}
.product-enquiry-btn, .catalog-enquiry-btn, .detail-back-btn, .hero-cta-outline {
  background: var(--toy-yellow) !important;
  color: var(--toy-dark) !important;
  border: 2px solid rgba(255,217,61,0.6) !important;
  box-shadow: 0 4px 14px rgba(255,217,61,0.25) !important;
}
.product-enquiry-btn:hover, .catalog-enquiry-btn:hover {
  background: #ffe066 !important;
  border-color: var(--toy-yellow) !important;
}

/* === WHY CHOOSE US / FEATURE CARDS === */
.feature-card, .sec-3 .border {
  border-radius: 20px !important;
  border: 2px solid rgba(107,203,119,0.2) !important;
  background: linear-gradient(160deg, #fff, #f0fff4) !important;
  box-shadow: var(--toy-shadow) !important;
  transition: var(--toy-transition) !important;
  padding: 1.5rem !important;
}
.feature-card:hover, .sec-3 .border:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--toy-shadow-hover) !important;
  border-color: var(--toy-mint) !important;
  background: linear-gradient(160deg, #fff, #e8f5e9) !important;
}
.customwidth i, .icon-color { color: var(--secondary-color, var(--toy-purple)) !important; font-size: 42px !important; }

/* === TESTIMONIALS === */
.testimonial-card {
  border-radius: 22px !important;
  border: 2px solid rgba(155,93,229,0.2) !important;
  box-shadow: var(--toy-shadow) !important;
  transition: var(--toy-transition) !important;
  overflow: hidden;
}
.testimonial-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--toy-shadow-hover) !important;
}
.testimonial-card .card-up {
  background: linear-gradient(90deg, var(--toy-coral), var(--toy-yellow), var(--toy-mint), var(--toy-sky)) !important;
  height: 8px !important;
}

/* === GALLERY === */
.gallery {
  border-radius: 22px !important;
  border: 2px solid rgba(77,150,255,0.18) !important;
  transition: var(--toy-transition) !important;
}
.gallery:hover { transform: translateY(-8px) scale(1.02) !important; border-color: var(--toy-sky) !important; }
.Gallry-sec img { border-radius: 16px !important; }
.gallery button, #strbry {
  background: var(--toy-sky) !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* === FAQ === */
.faq_7 .accordion-item {
  border-radius: 16px !important;
  border: 2px solid rgba(255,217,61,0.3) !important;
  margin-bottom: 10px !important;
  overflow: hidden;
}
.faq_7 .accordion-button {
  font-weight: 700 !important;
  font-size: 1rem !important;
  background: #fffdf5 !important;
  color: var(--toy-dark) !important;
}
.faq_7 .accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, rgba(255,217,61,0.15), rgba(107,203,119,0.10)) !important;
  color: var(--toy-dark) !important;
  box-shadow: none !important;
}

/* === TEAM === */
.team-sec .card {
  border-radius: 22px !important;
  border: 2px solid rgba(241,91,181,0.18) !important;
  box-shadow: var(--toy-shadow) !important;
  transition: var(--toy-transition) !important;
}
.team-sec .card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--toy-pink) !important;
}

/* === CERTIFICATES === */
.cert-approval-card {
  border-radius: 20px !important;
  border: 2px solid rgba(107,203,119,0.25) !important;
  background: linear-gradient(150deg, #fff, #f0fff4) !important;
  box-shadow: var(--toy-shadow) !important;
}
.cert-approval-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--toy-mint) !important;
}

/* === PARTNERS === */
.wrapper { padding: 10px 0; }
.item-1 img { border-radius: 14px !important; transition: transform 0.3s ease; }
.item-1 img:hover { transform: scale(1.1); }

/* === CONTACT PAGE === */
.contact-page-wrap { background: var(--toy-light) !important; }
.contact-title-panel {
  background: linear-gradient(135deg, rgba(255,217,61,0.12), rgba(155,93,229,0.08)) !important;
  border: 2px dashed rgba(155,93,229,0.3) !important;
  border-radius: var(--toy-radius) !important;
}
.contact-form-card, .contact-map-card {
  border-radius: 22px !important;
  border: 2px solid rgba(77,150,255,0.2) !important;
  box-shadow: var(--toy-shadow) !important;
}
.contact-info-card {
  border-radius: 20px !important;
  border: 2px solid rgba(255,217,61,0.3) !important;
  transition: var(--toy-transition) !important;
}
.contact-info-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--toy-yellow) !important;
  box-shadow: var(--toy-shadow-hover) !important;
}
.contact-info-icon {
  background: linear-gradient(135deg, var(--primary-color, var(--toy-sky)), var(--secondary-color, var(--toy-purple))) !important;
  width: 52px !important; height: 52px !important;
  border-radius: 16px !important;
  font-size: 1.2rem !important;
  animation: pulseIcon 2s infinite;
}
.branch-card {
  border-radius: 20px !important;
  border: 2px solid rgba(107,203,119,0.25) !important;
}

/* === ENQUIRY MODAL === */
.enquiry-modal .modal-content { border-radius: 24px !important; border: 2px solid var(--toy-yellow) !important; }
.enquiry-modal .modal-header {
  background: linear-gradient(135deg, var(--primary-color, var(--toy-sky)), var(--secondary-color, var(--toy-purple))) !important;
}
.enquiry-form-card { border-radius: 18px !important; }
.enquiry-captcha-box {
  border: 2px dashed var(--toy-yellow) !important;
  background: #fffdf5 !important;
  border-radius: 16px !important;
}

/* === FOOTER: dark playful === */
.site-footer {
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
  color: #d0d8e8 !important;
  margin-top: 30px;
  border-radius: 30px 30px 0 0 !important;
}
.site-footer-top {
  background: rgba(255,255,255,0.05) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.site-footer-title { color: var(--toy-yellow) !important; font-weight: 800 !important; }
.site-social-links a {
  border: 2px solid rgba(255,217,61,0.4) !important;
  color: #fff !important;
  border-radius: 50% !important;
  transition: var(--toy-transition) !important;
}
.site-social-links a:hover {
  background: var(--toy-yellow) !important;
  color: var(--toy-dark) !important;
  transform: translateY(-3px) rotate(10deg) !important;
}
.site-footer-bottom {
  background: rgba(0,0,0,0.2) !important;
  border-top: 1px solid rgba(255,217,61,0.15) !important;
}

/* === FLOATING BUTTONS === */
.scroll-top, .scroll-top_1 {
  border-radius: 50% !important;
  width: 52px !important; height: 52px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important;
  transition: var(--toy-transition) !important;
}
.scroll-top { background: linear-gradient(135deg, #25d366, #128c7e) !important; }
.scroll-top_1 { background: linear-gradient(135deg, var(--primary-color, var(--toy-sky)), var(--secondary-color, var(--toy-purple))) !important; }
.scroll-top:hover, .scroll-top_1:hover { transform: translateY(-4px) scale(1.1) !important; }

/* === ABOUT PAGE === */
.about-1 h2, .about-2 h4 { color: var(--secondary-color, var(--toy-purple)) !important; font-weight: 900 !important; }
.mission-card, .vision-card {
  border-radius: 22px !important;
  border: 2px solid rgba(77,150,255,0.2) !important;
  background: linear-gradient(150deg, #fff, #f0f7ff) !important;
  box-shadow: var(--toy-shadow) !important;
  transition: var(--toy-transition) !important;
}
.mission-card:hover, .vision-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--toy-sky) !important;
}
.about-sec img, .about-1 .img-2 img, .about-2 img {
  border-radius: 22px !important;
  filter: drop-shadow(0 12px 28px rgba(43,45,66,0.15)) !important;
  animation: floatImage 6s ease-in-out infinite;
}

/* === BLOG CARDS === */
.blog-card, .blog-article-wrap {
  border-radius: 22px !important;
  border: 2px solid rgba(241,91,181,0.18) !important;
  box-shadow: var(--toy-shadow) !important;
}
.home-blog-chip {
  background: linear-gradient(135deg, rgba(255,107,107,0.12), rgba(241,91,181,0.12)) !important;
  border: 1px solid rgba(241,91,181,0.3) !important;
  color: var(--toy-pink) !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
}

/* === EDITOR CONTENT / LEGAL PAGES === */
.editor-content, .detail-wrap, .detail-long-description-card {
  border-radius: 22px !important;
  border: 2px solid rgba(77,150,255,0.15) !important;
  box-shadow: var(--toy-shadow) !important;
}

/* === CATALOG (products listing page) === */
.catalog-section { background: var(--toy-light) !important; }

/* === SECTION BACKGROUNDS (each unique & playful) === */
.products-showcase { background: linear-gradient(170deg, #fffbf0, #fff0f5) !important; }
.about-sec { background: linear-gradient(170deg, #f0faf5, #fffbf0) !important; }
.export-sec { background: linear-gradient(170deg, #f0f4ff, #fffbf0) !important; }
.sec-3 { background: linear-gradient(170deg, #fffbf0, #f0faf5) !important; }
.sec-4 { background: linear-gradient(170deg, #fef0f5, #f0f4ff) !important; }
.Gallry-sec { background: linear-gradient(170deg, #f0f4ff, #fef0f5) !important; }
.team-sec { background: linear-gradient(170deg, #f5f0ff, #fffbf0) !important; }
.home-blog-section { background: linear-gradient(170deg, #fff0f5, #f5f0ff) !important; }
.faq_7 { background: linear-gradient(170deg, #fffbf0, #f0f4ff) !important; }
.ftco-section { background: linear-gradient(170deg, #f0faf5, #f5f0ff) !important; }
.cert-approval-section { background: linear-gradient(170deg, #f0faf5, #fffbf0) !important; }

/* === SECTION TOP DECORATIVE BORDER === */
.products-showcase::before, .about-sec::before, .export-sec::before,
.sec-3::before, .sec-4::before, .home-blog-section::before,
.Gallry-sec::before, .team-sec::before, .faq_7::before, .ftco-section::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(600px, 80%) !important;
  height: 5px !important;
  border-radius: 0 0 5px 5px !important;
  background: linear-gradient(90deg, var(--toy-coral), var(--toy-yellow), var(--toy-mint), var(--toy-sky), var(--toy-purple)) !important;
  z-index: 2 !important;
}

/* === RESPONSIVE === */
@media (max-width: 991.98px) {
  .site-navbar { border-radius: 0 0 18px 18px; }
  .cms-section { border-radius: 18px !important; }
  .sec-1 { height: min(72vh, 580px) !important; border-radius: 0 0 28px 28px !important; }
  .sec-1 main { border-radius: 0 0 28px 28px !important; }
}
@media (max-width: 767.98px) {
  .home-sections { gap: 14px !important; padding: 14px 8px 20px !important; }
  .sec-1 { height: 65vh !important; min-height: 360px !important; border-radius: 0 0 22px 22px !important; }
  .product-card:hover, .catalog-card:hover, .home-blog-card:hover { transform: translateY(-6px) rotate(0deg) !important; }
  .site-footer { border-radius: 22px 22px 0 0 !important; }
  .hero-cta-group { flex-direction: column !important; align-items: center; }
  .hero-cta-btn { width: 90% !important; }
  .product-card-actions,  .catalog-actions { flex-direction: column; }
  .product-btn, .catalog-btn { width: 100%; text-align: center; }
}

/* === KEYFRAME ANIMATIONS === */
@keyframes floatUp {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

@keyframes floatImage {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes buttonShine {
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}

@keyframes pulseIcon {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(155,93,229,0.4); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(155,93,229,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(155,93,229,0); }
}

@keyframes wavePattern {
  0% { background-position: 0px 0px; }
  100% { background-position: 100px 100px; }
}

/* Add animated pattern to main container */
.home-sections {
  animation: wavePattern 20s linear infinite;
}

/* === ANIMATION POLISH === */
.feature-card, .testimonial-card, .gallery { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.feature-card.is-visible, .testimonial-card.is-visible, .gallery.is-visible { opacity: 1; transform: translateY(0); }