/*
Theme Name: Twenty Twenty Child
Theme URI: https://wordpress.org/themes/twentytwenty/
Template: twentytwenty
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog,one-column,custom-background,custom-colors,custom-logo,custom-menu,editor-style,featured-images,footer-widgets,full-width-template,rtl-language-support,sticky-post,theme-options,threaded-comments,translation-ready,block-patterns,block-styles,wide-blocks,accessibility-ready
Version: 2.9.1761719241
Updated: 2025-10-29 06:27:21

*/

#site-header {
    background: #1d222d;
    border-bottom: 2px solid #1bbc9b;
	position: sticky;
    top: 0;
	z-index:9;
}
ul.primary-menu.reset-list-style li a {
    color: #ffffff !important;
    font-size: 13px;
    text-transform: uppercase;
}
.primary-menu li.current-menu-item > a, .primary-menu li.current-menu-item > .link-icon-wrapper > a {
    background: #1bbc9b;
    text-decoration: none;
}
.site-logo a img {
    width: 310px;
}
.header-inner {
        padding: 0.5rem 0;
		max-width: 110rem;
    }  
/* ===== ACTIVE MENU ITEM ===== */
.primary-menu li.current-menu-item > a,
.primary-menu li.current_page_item > a {
  background-color: #1bbc9b;
  border-radius: 20px;
  color: #fff !important;
  transition: all 0.3s ease;
}

/* ===== NORMAL LINK STYLING ===== */
.primary-menu li a {
  position: relative;
  display: inline-block;
  color: #000;
  text-decoration: none;
  border-radius: 20px;
  overflow: hidden;
  transition: color 0.3s ease;
  padding: 10px 15px;
}

/* ===== FILL SWEEP HOVER ANIMATION ===== */
.primary-menu li a::before {
  content: "";
  position: absolute;

  top: 0;
  width: 0%;
  height: 100%;
  background-color: #1bbc9b;
  z-index: -1;
  transition: width 0.4s ease;
  border-radius: 20px;
 left: 50%;
  transform: translateX(-50%);
  width: 0;

}
.primary-menu li a:hover::before {
  width: 100%;
}
.primary-menu li a:hover {
  color: #fff;
}
.primary-menu > li {
    margin: 0rem 0 0 0.3rem;
}
.primary-menu a:hover, .primary-menu a:focus, .primary-menu .current_page_ancestor {
    text-decoration: none;
}
.header-inner .toggle path {
    fill: rgb(255 255 255);
}
.toggle-inner {
    height: 3.3rem;
}
.header-toggles .toggle {
        padding: 0 3rem;
    }
    .toggle-inner .toggle-text {
        top: calc(100% - 1.3rem);
        color: #fff !important;
    }
    .search-modal .search-field {
        height: 6rem;
    }
.primary-menu > li > .icon {
    right: -0.5rem;
    color: #fff !important;
    top: 13px;
    right: 0;
}
ul.primary-menu {
    margin-top: 10px !important;
}
.search-toggle .toggle-icon, .search-toggle svg {
    height: 1.5rem;
    max-width: 2.3rem;
    width: 1.5rem;
}
.toggle-inner {
    height: 2rem;
}
.search-toggle {
    bottom: 6px !important;
}
    .primary-menu-wrapper + .header-toggles {
        margin-left: 2rem;
    }

.home-subheader {
  position: relative;
  background: url('https://topyonogames.com/wp-content/uploads/2025/10/H52.webp') no-repeat center top / cover;
  color: #fff;
  text-align: center;
  padding: 30px 20px 100px;
  overflow: hidden;
}

/* Animated background layer */
.home-subheader::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 110%;
  height: 110%;
  background: url('https://topyonogames.com/wp-content/uploads/2025/10/H52.webp') no-repeat center top / cover;
  animation: subheaderimg 20s linear infinite;
  z-index: 0;
  transform-origin: center;
}

/* Overlay layer */
.home-subheader::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

/* Content stays stable */
.subheader-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}
.search-box { width: 600px max-width: 600px; padding: 12px 20px; border: none; border-radius: 50px; outline: none; font-size: 1rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); margin: 30px auto 0; } input.search-box { width: 600px; margin: 30px auto 0; border-radius: 50px; }
.subheader-content h2 { margin-bottom: 20px; color: #fff; font-size: 40px; padding-bottom: 20px; font-weight: 300; line-height: 46px; margin-top: 0; } .subheader-content p { font-size: 16px; line-height: 30px; color: #f1f1f1; margin-bottom: 30px; max-width: 730px; margin: 0 auto; font-weight: 300; }
/* Responsive */
@media (max-width: 768px) {
  .home-subheader {
    padding: 80px 15px 60px;
    background-position: center top;
  }
  .search-box {
    width: 90%;
  }
}

/* Animation keyframes (only for background) */
@keyframes subheaderimg {
  0% {
    transform: scale(1) translateX(0);
  }
  50% {
    transform: scale(1.05) translateX(-3%);
  }
  100% {
    transform: scale(1) translateX(0);
  }
}

.yono-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 20px;
  background: #eef1f5;
}

.section-title {
  font-size: 26px;
  font-weight: 600;
  color: #333;
  margin-bottom: 25px;
}

/* ---------- TOP RATED SECTION ---------- */
.top-rated-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 60px;
}

.top-card {
  flex: 1 1 calc(33.333% - 20px);
  background: #fff;
  display: flex;
  align-items: center;
  border-radius: 16px;
  text-decoration: none;
  color: #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-bottom: 3px solid #1bbc9b;
  overflow: hidden;
}

.top-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(27, 188, 155, 0.3);
}

.top-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 12px 0 0 12px;
}

.top-card-content {
  padding: 15px;
}

.top-card-content h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
}

.top-card-content p {
  font-size: 13px;
  color: #666;
  margin: 0;
}

.top-card-content span {
  font-size: 12px;
  color: #1bbc9b;
  display: block;
  margin-top: 4px;
}

/* ---------- LATEST SECTION ---------- */
.latest-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.latest-card {
  background: #fff;
  border-radius: 16px;
  text-align: center;
  text-decoration: none;
  color: #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-bottom: 3px solid #1bbc9b;
  padding-bottom: 10px;
}

.latest-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(27, 188, 155, 0.3);
}

.latest-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
}

.latest-card h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 10px 0 4px;
}

.latest-card p {
  font-size: 13px;
  color: #666;
  margin: 0;
}

.latest-card span {
  font-size: 12px;
  color: #1bbc9b;
  display: block;
  margin-top: 3px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
  .latest-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .top-card {
    flex: 1 1 100%;
  }
}

@media (max-width: 600px) {
  .latest-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .top-card {
    flex-direction: column;
    text-align: center;
  }

  .top-card img {
    border-radius: 16px 16px 0 0;
  }

  .top-card-content {
    padding: 10px;
  }
}
.subtitle {
            color: #777;
            font-size: 16px;
        }
        
        section {
            margin-bottom: 50px;
        }
        
        .section-title {
            font-size: 22px;
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #1bbc9b;
        }
        
        /* Top Rated Section Styles */
        .top-rated-apps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
        
        .top-app-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            border-bottom: 3px solid #1bbc9b;
			text-decoration: none;
        }
        
        .top-app-image {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
			padding:15px;
        }
        
        .top-app-content {
            padding: 15px;
            flex: 1;
        }
        
        .top-app-title {
            font-size: 16px;
            color: #333;
            margin-bottom: 8px;
            font-weight: bold;
        }
        
        .top-app-description {
            font-size: 14px;
            color: #777;
            margin-bottom: 5px;
        }
        
        .top-app-version {
            font-size: 13px;
            color: #1bbc9b;
            font-weight: bold;
        }
        
        /* Latest Apps Section Styles */
        .latest-apps {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 15px;
        }
        
        .latest-app-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
            position: relative;
            border-bottom: 3px solid #1bbc9b;
            transition: all 0.3s ease;
			text-decoration:none;
        }
        p.latest-app-description {
    color: #a7a7a7;
    font-size: 12px;
    font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
    margin-bottom: 0;
}
        .latest-app-card:hover {
            transform: translateY(-5px);
        }
        
        .latest-app-card:hover .app-overlay {
            opacity: 1;
        }
        
        .latest-app-image {
            width: 100%; 
            display: flex;
            align-items: center;
            justify-content: center;
            color: #555;
            font-weight: bold;
			padding: 15px;
        }
        h3.latest-app-title {
          margin: 0 0;
			margin-bottom: 4px;
          }
        .latest-app-content {
            padding: 0px 10px 10px 10px;	
        }
        
        .latest-app-title {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .latest-app-description {
            font-size: 12px;
            color: #777;
        }
        
        .app-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .plus-icon {
            color: white;
    font-size: 15px;
    background: #1bbc9b;
    position: relative;
    padding: 10px;
    border-radius: 50px;
    width: 35px;
    height: 35px;
        }
        
        /* Responsive Styles */
        @media (max-width: 1100px) {
            .latest-apps {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .top-rated-apps {
                grid-template-columns: 1fr;
            }
            
            .latest-apps {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (max-width: 576px) {
            .latest-apps {
                grid-template-columns: repeat(2, 1fr);
            }
        }
section.latest-section, section.top-rated-section {
    max-width: 1100px !important;
}

h3.top-app-title {
    margin: 0;
    font-size: 14px;
    color: #444;
	font-weight: 500
}
p.top-app-description, p.top-app-version {
    color: #a7a7a7;
    font-size: 12px;
    margin: 2px 0 0;
    height: 18px;
    font-weight: 300;
    font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
}

.home header.entry-header.has-text-align-center.header-footer-group {
    display: none;
}
.home .post-inner.thin {
    padding-top: 0;
}
section.top-rated-section {
    padding-top: 0;
	padding-bottom:0px;
}
.top-rated-section h2.section-title, section.latest-section h2.section-title {
    margin-top: 0;
}
p.latest-app-description:last-child {
    margin-top: 4px;
    padding-bottom: 20px;
}
a.top-app-card:hover {
    transition: 0.25s;
    background: #ebebec;
}
section.latest-section {
    padding-top: 25px;
}
.footer-nav-widgets-wrapper.header-footer-group {
    background: #1d222d;
    border-top: 2px solid #1bbc9b;
    color: #fff;
}
footer#site-footer {
    display: none;
}
.footer-widgets-wrapper {
    display: block;
    text-align: center;
}
.footer-widgets.luckyssb {
    width: 100%;
    margin-left: 0;
}
.footer-widgets-wrapper {
    margin-left: 0;
}
ul#menu-footer-menu {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-top: 15px;
    font-size: 13px;
    text-transform: uppercase;
}
#menu-footer-menu li a {
    color: #fff;
    font-weight: 400;
}
.textwidget.custom-html-widget {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.3);
    line-height: 26px;
}
.textwidget.custom-html-widget a {
    color: #fff;
    text-decoration: none;
}
.widget_nav_menu li {
    margin-top: 0;
}
aside.footer-widgets-outer-wrapper {
    padding: 20px 0;
}
.widget_text.widget.widget_custom_html {
    margin-top: 0;
}
#menu-footer-menu li:after {
    content: "|";
    padding: 5px;
    margin-left: 5px;
}
#menu-footer-menu li:last-child:after {
    content: none !important;
}
#menu-footer-menu li a {
    text-decoration: none;
}
.widget img {
    margin: 0 auto;
}
h1.entry-title {
    font-size: 32px;
    color: #4c4c4c;
}
.entry-header {
    padding: 15px 0px !important;
}
.footer-top-visible .footer-nav-widgets-wrapper {
    margin-top: 0;
}
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 1100px;
    margin: 0 auto;
}
.post-inner.thin {
    padding-top: 25px;
}
/* ---- App Single Layout Styling (child theme) ---- */

.app-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px;
}

/* wrapper flex: main + sidebar */
.content-with-sidebar {
  display: flex;
  gap: 30px;
}

/* main area and sidebar sizes */
.app-main { flex: 0 0 72%; }
.app-sidebar { flex: 0 0 28%; }

/* top box */
.app-top-box {
  display: flex;
  gap: 24px;
  background: #ffffff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(10,10,10,0.03);
}

/* left column */
.app-left { width: 160px; flex-shrink: 0; text-align: center; }
.app-image img { width: 150px; height: 150px; object-fit: cover; border-radius: 12px; display:block; margin: 0 auto 12px; }

/* controls under image */
.app-left-controls .btn { display:inline-block; padding:8px 14px; border-radius:18px; text-decoration:none; color:#fff; font-weight:700; margin-bottom:8px; width:100%; }
.btn-download { background:#00c48e; margin-right:6px; }
.btn-telegram { background:#0aa0d6; display:block; margin: 6px auto; }

/* rating & votes */
.rating { margin-top:10px; }
.rate-value { font-weight:800; font-size:20px; color:#20a37f; }
.rate-value .small { font-size:12px; color:#666; margin-left:4px; }
.votes { font-size:13px; color:#666; margin-top:6px; }

/* report button style */
.btn-report-link { display:inline-block; margin-top:10px; border: 1px solid #e0e0e0; padding:8px 12px; border-radius:14px; background:#fff; cursor:pointer; color:#4c4c4c; font-size: 13px; }

/* right column */
.app-right { flex:1; }
.breadcrumb { font-size:12px; color:#999; margin-bottom:6px; }
.app-title { font-size:38px; line-height:1.1; margin:6px 0 12px; font-weight:600; color:#333; letter-spacing: 0;}

/* tag buttons */
.tag-buttons { margin-bottom:12px; }
.tag-btn { display:inline-block; text-decoration:none; background:#00c48e; color:#fff; padding:6px 12px; margin-right:8px; border-radius:20px; font-weight:700; font-size:13px; }
section#search-2 {padding: 0; margin-bottom:0px;}
input.search-submit {background: #00c48e !important; color: #fff;}
form.search-form {
    background: #fff;
    padding: 15px;
    border-radius: 14px;
	margin:0px;
}
#recent-posts-2, #categories-2, #custom_html-4, #nav_menu-5 {
    padding-top: 0px;
    background: #fff;
    padding: 15px;
    border-radius: 14px;
	margin-bottom: 0;
}
input#search-form-2 {
    margin-left: 0;
}
#recent-posts-2 h2.widget-title, #categories-2 h2.widget-title, #custom_html-4 h2.widget-title, #nav_menu-5 h2.widget-title  {
    font-size: 16px;
    color: #4c4c4c;
    text-transform: uppercase;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 8px;
    margin: 0;
}
#recent-posts-2 li a, #categories-2 li a, #custom_html-4 li a, #nav_menu-5 li a {
    font-size: 13px;
    color: #000;
    font-weight: 400;
    line-height: normal;
}
input#search-form-2 {
    margin-bottom: 0;
}
input.search-submit {
    margin-bottom: 0px !important;
}
.description-inner h2 {
    font-size: 20px;
    margin: 20px 0;
    color: #4c4c4c;
}
/* long tags description line */
.compact-tags-des .long-tags { color:#6b6b6b; font-size:13px; margin-bottom:12px; }

/* meta grid */
.meta-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:10px; }
.meta-row {justify-content:space-between; font-size:14px; padding:8px 10px; background:#fafafa; border-radius:8px; }
.meta-label { color:#4c4c4c; font-weight:600;width: 100%; float:left; line-height: 26px; }
.meta-value { color:#222; font-weight:400; font-size:13px; }

/* google play and social */
.get-on img { width:120px; margin-top:12px; display:block; }
.social-row { margin-top:12px; }
.social-btn { display:inline-block; border-radius:20px; border:1px solid #e6e6e6; padding:8px 12px; margin-right:8px; text-decoration:none; color:#fff; font-weight:normal; font-size:14px; }

/* sections boxes */
.section-box { background:#fff; border-radius:12px; padding:16px; margin-top:20px; box-shadow:0 2px 8px rgba(0,0,0,0.03); }
.section-title { font-weight:800; color:#333; margin-bottom:12px; font-size:16px; text-transform: uppercase; margin-top: 0}

/* related apps grid */
.related-grid { display:flex; gap:12px; align-items:flex-start; overflow:hidden; }
.related-card { display:block; width:140px; text-decoration:none; color:inherit; background:#fff; border-radius:10px; padding:8px; box-shadow:0 1px 6px rgba(0,0,0,0.04); text-align:center; }
.related-thumb img { width:100%; height:auto; object-fit:cover; border-radius:8px; display:block; margin-bottom:8px; }
.related-text h4 { font-size:13px; margin:0 0 6px; }

/* tags full list pills */
.tag-list { display:flex; gap:8px; flex-wrap:wrap; }
.tag-pill { display:inline-block; background:#00c48e; color:#fff; padding:6px 12px; border-radius:20px; text-decoration:none; font-weight:600; font-size:13px; }

/* report modal */
.modal-report { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); align-items:center; justify-content:center; z-index:9999; padding:20px; }
.modal-report .modal-inner { background:#fff; border-radius:12px; padding:18px; width:100%; max-width:420px; position:relative; }
.modal-report .modal-close { position:absolute; right:12px; top:8px; font-size:22px; background:none; border:none; cursor:pointer; }
.meta-value a {color: #00c48e; text-decoration: none;}
/* show modal class */
.modal-report.show { display:flex; }
.get-on label {
    font-size: 14px;
    font-weight: 600;
    color: #4c4c4c;
    margin-top: 10px;
}
a.has-light-green {
    background: #45d79e;
    border-width: 2px;
    border-style: solid;
    color: currentColor;
    padding-top: 0.667em;
    padding-right: 1.33em;
    padding-bottom: 0.667em;
    padding-left: 1.33em;
    border-radius: 33px;
    font-size: 16px;
    text-decoration: none;
    letter-spacing: 0;
    display: flex;
    width: max-content;
    margin: 0 auto;
}
a.cbtn {
    color: #1bbc9b;
}
.description-inner {
    font-size: 14px;
}
.red {
    color: red;
}
.green {
    color: #45d79e;
}
.has-blush-bordeaux-gradient-background {
    border-radius: 62px;
}
  .social-btn.facebook { background: #1877F2; }
    .social-btn.twitter { background: #1DA1F2; }
    .social-btn.pinterest { background: #E60023; }
    .social-btn.telegram { background: #0088cc; }
    .social-btn.whatsapp { background: #25D366; }
/* responsive */
/* Base card container */
.app-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  padding: 20px 28px;
  max-width: 900px;
  margin: 20px auto;
  transition: background 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

/* Hover effect on full card */
.app-card:hover {
  background: #f7f9fa;
  transform: translateY(-4px);
}

/* Left image */
.app-image img {
  width: 150px;
  height: 150px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

/* Right content */
.app-content {
  flex: 1;
}
h2.app-title {
    margin-top: 0;
}
.app-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.app-desc {
  font-size: 15px;
  color: #374151;
  margin-bottom: 14px;
}

/* Download button */
.app-button {
  display: inline-block;
  padding: 10px 24px;
  background: #00c46c;
  color: #fff;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  border: 2px solid #00b362;
  transition: all 0.3s ease;
}

.app-button:hover {
  background: #00a95e;
  border-color: #009e57;
  color: #fff;
  transform: scale(1.03);
}

/* Responsive: Stack layout on small screens */
@media (max-width: 700px) {
  .app-card {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  .app-image img {
    width: 90px;
    height: 90px;
  }

  .app-title {
    font-size: 1.1rem;
  }

  .app-button {
    margin-top: 8px;
  }
}

@media (max-width: 1040px) {
  .content-with-sidebar { flex-direction:column; }
  .app-main { width:100%; }
  .app-sidebar { width:100%; }
  .app-top-box { flex-direction:column; align-items:flex-start; }
  .app-left { width:100%; display:flex; gap:12px; }
  .app-image img { width:96px; height:96px; }
  .meta-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 600px) {
  .meta-grid { grid-template-columns: 1fr; }
  .related-grid { overflow-x:auto; }
}
.app-left-controls a {
    font-size: 15px;
}
/* App grid container */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Each app box */
.app-box {
  background: var(--bg, #f2f2f2);
  border-radius: 16px;
  padding: 24px 16px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.app-box:hover {
  background: #f9f9f9;
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* App title */
.app-box .app-title {
  font-size: 2.6rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
}

/* App image */
.app-img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    margin: 20px auto;
}

.app-box:hover .app-img {
  transform: scale(1.05);
}

/* Download button */
.app-btn {
  display: inline-block;
  padding: 10px 28px;
  background: #00c46c;
  color: #fff;
  font-weight: 600;
  border-radius: 50px;
  border: 2px solid #00b362;
  text-decoration: none;
  transition: all 0.3s ease;
}

.app-btn:hover {
  background: #00a95e;
  border-color: #009e57;
  transform: scale(1.05);
  color: #fff;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .app-title {
    font-size: 1.3rem;
  }
  .app-img {
    width: 120px;
    height: 120px;
  }
  .app-btn {
    font-size: 0.95rem;
    padding: 9px 22px;
  }
}
/* Wrapper - keeps buttons in one line and centered */
.download-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 20px 0;
}

/* Stylish download buttons */
.download-btn {
  display: inline-block;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  border: 2px solid #ff9900;
  background: linear-gradient(90deg, #ffb700, #ff7b00);
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(255, 165, 0, 0.3);
}

/* Hover effect */
.download-btn:hover {
  background: linear-gradient(90deg, #ff7b00, #ffb700);
  border-color: #ff7b00;
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(255, 140, 0, 0.4);
  color: #fff;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .download-btn {
    width: 90%;
    text-align: center;
    padding: 12px 0;
    font-size: 15px;
  }
}
/* Table Base */
.yono-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 16px;
  background-color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
}

/* Header */
.yono-table thead th {
  background: linear-gradient(90deg, #20d48a, #1cc47a);
  color: #000;
  text-align: center;
  padding: 12px;
  font-weight: 700;
  border-bottom: 2px solid #ddd;
}

/* Table cells */
.yono-table td {
  text-align: center;
  vertical-align: middle;
  padding: 15px;
  border: 1px solid #e0e0e0;
}

/* Image wrapper */
.img-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-wrapper img {
  width: 150px;
  height: 150px;
  border-radius: 15px;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-wrapper img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Highlight mark */
.highlight {
  background: none;
  color: red;
  font-weight: 700;
}

/* ✅ New Button Style (does not affect .cbtn) */
.ybtn {
  display: inline-block;
  background: linear-gradient(90deg, #1cc67c, #ffcc33);
  color: #000;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 6px;
  border: 2px solid #ff9800;
  margin-top: 8px;
  transition: all 0.3s ease;
}

.ybtn:hover {
  background: linear-gradient(90deg, #ffcc33, #ffb347);
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(255,152,0,0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
  .yono-table thead {
    display: none;
  }

  .yono-table, .yono-table tbody, .yono-table tr, .yono-table td {
    display: block;
    width: 100%;
  }

  .yono-table tr {
    margin-bottom: 20px;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }

  .yono-table td {
    text-align: center;
    border: none;
  }

  .img-wrapper img {
    width: 120px;
    height: 120px;
  }

  .ybtn {
    font-size: 14px;
    padding: 6px 14px;
  }
}
.image-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* 👈 Ye gap control karta hai */
  flex-wrap: wrap; /* Responsive ke liye */
  margin: 20px 0;
}

.image-card {
  flex: 1 1 calc(33.333% - 20px); /* 3 images ek line me */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-card img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-card img:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}

/* 📱 Responsive Design */
@media (max-width: 768px) {
  .image-card {
    flex: 1 1 calc(50% - 15px); /* 2 images per row */
  }
}

@media (max-width: 480px) {
  .image-card {
    flex: 1 1 100%; /* 1 image per row */
  }
}
.yono-section {
  background: #f7f9fb;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.yono-section:hover {
  background: #eef9f2;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}


.allyon {
  color: #0c853f;
  font-size: 26px;
  text-align: center;
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


.yono-section p {
  color: #222;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  margin: 10px 0;
}


.yono-image-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 0 20px;
}

.yono-image-box img {
  width: 100%;
  max-width: 350px;
  height: auto;
  border-radius: 12px;
  border: 3px solid #20d48a;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.yono-image-box img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .allyon {
    font-size: 22px;
  }
  .yono-section {
    padding: 18px;
  }
  .yono-image-box img {
    max-width: 280px;
  }
}
.orange {
    color: orange;
}