@charset "UTF-8";

/*
Theme Name: Json For Matter
Theme URI: https://wordpress.org/themes/jsonformatter/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.8
Requires PHP: 5.6
Version: 2.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jsonformatter
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/


:root {
    --font-family:"Inter", sans-serif;;
    --black:#000;
    --black60:rgba(0,0,0,0.60);
    --border-col:#E8E8F0;
    --red:#ED6B5C;
}
a{ text-decoration:none; }
html {font-size: 62.5%;}
body{ font-family:var(--font-family); font-size: 1.4rem; line-height: 2.4rem; color:var(--black);}
.row{ margin-left:-1.5rem; margin-right:-1.5rem }
.row>*,.container{ padding-left:1.5rem; padding-right:1.5rem }
.site-header{ border-bottom:0.1rem solid var(--border-col); background-color:#FFF; position:fixed; width:100%; left:0; right:0; z-index:5 }
.site-header hgroup{ align-items:center; }
.menu-wrapper{ list-style:none; padding:0; margin:0; display:flex; align-items:center; gap:2.5rem }
.menu-wrapper li{ position:relative; }
.menu-wrapper li a{ font-weight:500; font-size:1.6rem; color:var(--black); display:inline-block; padding-block:2.2rem }
.menu-wrapper li a:hover{ color:var(--red); }
.menu-wrapper li p{ display:none; }
.menu-wrapper li button{ display:none; }
.menu-wrapper li.menu-item-has-children:after{content: "\ea4e";font-family: remixicon !important;}
.menu-wrapper li ul{ position:absolute; left:0; top:100%; border:0.1rem solid var(--border-col); list-style:none; padding:0; margin:0; display:block; min-width:23.5rem; display:none; background-color:#FFF }
.menu-wrapper li:hover ul{ display:block; }
.menu-wrapper li ul li:after{content: none;}
.menu-wrapper li ul li a{ font-size:1.4rem; padding:1rem; color:var(--black);}

.site-content{ padding-top:13.3rem }

.com-hed{ text-align:center; padding-bottom:9rem }
.com-hed h1{ font-size:3.6rem; font-weight:600;margin-bottom: 2rem; }
.com-hed p{ font-size:1.6rem; color:var(--black60); font-weight:500 }

.sub_head{ padding-bottom:3rem }
.sub_head_title{ font-size:2rem; font-weight:600 }

.dev_post_loop{ display:flex; margin-bottom:3rem }
.dev_post_loop_inner{ border-radius:0.8rem; border:0.1rem solid var(--border-col); padding:2.6rem; width:100%; height:100% }
.featured-image{ margin-bottom:1.5rem }
.post_title{ font-size:1.6rem; font-weight:600; margin-bottom:1.2rem;color:var(--black);text-decoration:underline; }
.post_title_link{ text-decoration:underline; color:var(--red); }
.post_title_link:hover{ color:var(--black); }
.excerpt p{ margin:0; color:var(--black60); }
.dev_post_loop:hover .post_title{text-decoration:underline; color:var(--red);}

.development-detsils-wrapper .com-hed{ padding-bottom:3rem }
.development_code{ display:block; background-color:transparent; border-radius:0.8rem; border:0.1rem solid var(--border-col); overflow:hidden; margin-bottom:4.8rem }
.development_code body{ padding:0; margin:0; background:transparent; background-color:transparent; }
.development_code .container_wr,.development_code .container_sub{ max-width:100%; padding: 0; height: 90vh}

.development-content{border-radius:0.8rem; border:0.1rem solid var(--border-col); padding: 2.4rem}
.development-content h2,.development-content h3,.development-content h4{ font-size:2rem; font-weight:600; margin-bottom:1.6rem }
.development-content p{ color:var(--black60);margin-bottom:1.6rem }
.development-content p:last-child{margin-bottom: 0}
.development-content ul,.development-content ol{ margin-left:1rem }

.cat_det .com-hed,.blog_page{ padding-bottom:3rem }

.faq_home{ padding-top:8rem;padding-bottom:6rem}
.faq_section_top{ text-align:center; padding-bottom:4rem}
.faq_section_top h2,.faq_section_loop h2,.faq_section_loop h3{ font-size:2rem; font-weight:600; margin-bottom:2rem}
.faq_section_top p{ font-size:1.6rem; line-height:3.2rem}

.faq_section_loop{ padding:2.5rem; border-radius: 0.8rem;border: 0.1rem solid var(--border-col);}
.faq_section_loop ul li,.faq_section_loop p{ margin-bottom:1.2rem}
.faq_list_wrapper .faq_section_loop{ margin-bottom:2.4rem}
.faq_list_wrapper { padding-bottom:6rem}


.site-footer{ padding-top:5rem }
.footer-list-row{ display:flex; justify-content:space-between; }
.footer-logo{ margin-bottom:2rem }
.footer-list-loop h4{ font-size:1.6rem; font-weight:500; margin-bottom:1rem }
.footer-list-loop ul{ list-style:none; padding:0; margin:0 }
.footer-list-loop ul li{ margin-bottom:0.5rem }
.footer-list-loop ul a{ color:var(--black); }
.footer-list-loop ul a:hover{ color:var(--red); }

.socialmenu-nav ul{ display:flex; align-items:center; gap:2rem; list-style:none; padding:0; margin:0;margin-top: 2rem; }
.socialmenu-nav ul a{ font-size:1.8rem; color:var(--black); }
.site-info{ border-top:0.1rem solid var(--border-col); margin-top:2rem; padding-top:2rem; text-align:center; padding-bottom:2rem }

.close-menu{ display:none; }
.menu-toggle {
  display: none;
  padding:0.2rem 0.8rem;
  cursor: pointer;
  font-size: 16px;
  border: none;
  background:#FFF; border:0.1rem solid var(--black);
  color:var(--black);
  margin-bottom: 10px;
  margin: 0;
}
@media (max-width: 768px) {

.site-header{padding: 1rem 0;}
  .menu-toggle {display: block;}
  .wp-block-heading br,.footer-list-loop p br{ display:none; }

  .footer-list-loop{ width:50%; margin-bottom:2rem }
  .footer-list-loop:first-child{ width:100% }
  .footer-list-row{flex-wrap: wrap;}
/* Menu Toggle Button */


/* Main Nav Style */
.primary-navigation {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 320px;
  height: 100%;
  background:  var(--border-col);
  z-index: 9998;
  transition: right 0.4s ease;
  overflow-y: auto;
  padding: 20px;
  border: 0.1rem solid var(--border-col);
}
.primary-navigation.open {
  right: 0;
}

/* Close Button */
.close-menu {
  display: block;
  background: none;
  border: none;
  font-size: 18px;
  color: #000;
  margin-bottom: 15px;
  cursor: pointer;
  margin-left: auto;
}

/* Menu Items */
.primary-navigation ul {
  list-style: none;
  padding-left: 0;
  display: block;
}
.primary-navigation li {
  margin:0;
  display: flex;
 align-items: center;
 width: 100%;
justify-content: space-between;
}
.primary-navigation a {
  text-decoration: none;
  color: #000;
  font-size: 16px;
}
.menu-wrapper li.menu-item-has-children:after{ display:none; }
.menu-wrapper li button{ display:block; width:4rem; height:4rem }
.menu-wrapper li button:after{content: "\ea54";font-family: remixicon !important; font-size:3rem; color: #000}
/* Submenu Toggle Button */
.submenu-toggle {
  background: none;
  border: none;
  font-size: 16px;
  color: #000;
  margin-left: 10px;
  cursor: pointer;
}

/* Slide Panel for Submenus */
#mobile-menu-panels {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 320px;
  height: 100%;
  background: #f9f9f9;
  z-index: 9999;
  transition: right 0.4s ease;
  overflow-y: auto;
  display: none;
}
#mobile-menu-panels.active {
  display: block;
  right: 0;
}

/* Individual Panel Content */
.submenu-panel {
  padding: 20px;text-align: right;
  animation: slideIn 0.3s ease forwards;
}
.submenu-panel ul {
  list-style: none;
  padding-left: 0;
  text-align: left;
}
.submenu-panel a {
  display: block;
  color: #333;
  margin: 10px 0;
  text-decoration: none;
}
.back-button {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 16px;
  background: none;
  border: none;
  color:var(--black);
  cursor: pointer;
  font-weight: 600;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

}

.footer-list-loop ul li svg{ display:none}
.footer-list-loop ul li .screen-reader-text{position: static;clip-path: none;}