/*fonts*/
@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html { scroll-behavior: smooth;  font-family: 'Hanken Grotesk';}
body {-webkit-tap-highlight-color: transparent; font-family: 'Hanken Grotesk';   color: #111;  margin: 0;  padding: 0;  line-height: 1.4;}

.container {max-width: 1330px; margin: 0 auto;   width: 100%;}

footer,.blog-details { -webkit-user-select: text !important;  -moz-user-select: text !important;  user-select: text !important}
img { max-width: 100%;  height: auto; aspect-ratio: attr(width) / attr(height);}

ul,ol {list-style: none;  margin: 0;   padding: 0;}
h1,h2,h3,h4,h5,h6 {margin: 0;}
p {margin-bottom: 20px;  color: #111;}
p:last-child {margin-bottom: 0;}
main {position: relative;}
li {list-style: none;}
.text-center { text-align: center;}
a {color: var(--dusky-blue);}
a:hover {color: #343333;}
a,a:hover {text-decoration: none !important;}

:root {

    --dusky-blue: #358bcc;
    --padding50:50px;

}

.mb-60 {margin-bottom: var(--padding50) !important;}
.padding50 {padding: var(--padding50) 0;}
.pt-50 {padding-top: var(--padding50);}
.pb-50 {padding-bottom: var(--padding50);}
.ml-30 {margin-left: 30px;}
.mt-50 {margin-top: var(--padding50);}
.mb-50 {margin-bottom: var(--padding50);}
.mt-30 {margin-top: 30px !important;}
.mb-30 {margin-bottom: 30px !important;}
.mb-0 {margin-bottom: 0 !important;}

.font44 {font-size: 44px;  font-weight: 600;  font-family: 'Hanken Grotesk';  line-height: 1.2; color:#0e1526;  margin-bottom: 20px;}
.font36 {font-size: 36px;  font-weight: 600;  font-family: 'Hanken Grotesk';  line-height: 1.3; color:#0e1526;  margin-bottom: 20px;}
.font30 {font-size: 30px;  font-weight: 600;  font-family: 'Hanken Grotesk';  line-height: 1.3; color:#0e1526;   margin-bottom: 20px;}
.font24 {font-size: 24px;  font-weight: 600;  font-family: 'Hanken Grotesk';  line-height: 1.3; color:#0e1526;  margin-bottom: 20px;}
.font20 {font-size: 20px;  font-weight: 400;  font-family: 'Hanken Grotesk';  line-height: 1.4; color:#0e1526;  margin-bottom: 20px;}
.font18 {font-size: 18px;  font-weight: 500;  font-family: 'Hanken Grotesk';  line-height: 1.4; color:#0e1526;  margin-bottom: 20px;}

.bg-ofwhite {background-color: #F5F7FA;}
.bg-blue{background-color:#2C3E50}
.text-white{color: #fff;}
.text-black{color: #13151a;}
.text-blue{color: var(--dusky-blue)}
.link-color{color:#1449C2;}

.bg-primary-100{ background-color:#dbeafe; }
.text-primary-600 {color: #2563eb;}
.bg-amber-100 {background-color: #fef3c7;}
.text-amber-600 {color: #d97706;}
.bg-yellow-100 {background-color: #fef9c3;}
.text-yellow-600 {color: #ca8a04;}
.bg-blue-100 {background-color: #dbeafe;}
.text-blue-600 {color: #2563eb;}
.bg-purple-100 {background-color: #f3e8ff;}
.text-purple-600 {color: #9333ea;}
.bg-green-100 {background-color: #dcfce7;}
.text-green-600 {color: #16a34a;}
.bg-pink-100 {background-color: #fce7f3;}
.text-pink-500 {color: #ec4899;}
.bg-orange-100 {background-color: #ffedd5;}
.text-orange-600 {color: #ea580c;}
.bg-teal-100 {background-color: #ccfbf1;}
.text-teal-600 {color: #0d9488;}

.btn {display: inline-block;  margin-bottom: 0;  border-radius: 0px; outline: none !important;  padding: 10px 30px; min-height: 38px;  border-radius: 5px;  font-size: 16px;   line-height: 1.4;  font-weight: 500;  letter-spacing: 0;  color: #000;  outline: 0;  cursor: pointer;  -webkit-appearance: none;  background: #fff;  transition: .4s;  border: none;  box-shadow: none; position: relative;}
.btn-dark {color: #fff;  border: 1px solid var(--dusky-blue);  background-color: var(--dusky-blue);}
.btn.btn-dark:hover {border-color: var(--dusky-blue);  background-color: #fff !important; color: var(--dusky-blue);  box-shadow: none;}
.btn-dark:focus {box-shadow: none !important;}
.btn-white {background: #fff;  color: #000;}
.btn-white:hover { background: rgba(255, 255, 255, 0.7);}
.btn-check:focus+.btn-dark,
.btn-dark:focus {color: #fff; background-color: var(--dusky-blue) !important;}
.btn.btn-blue {color: #2C3E50;   border: 1px solid #2C3E50;}
.btn.btn-blue:hover {border-color:#2C3E50; background-color:#2C3E50;  color: #fff;   box-shadow:none;}

.box-shadow {filter: drop-shadow(-10px 10px 34px #cecece);}
.flex-row {display: flex;  flex-wrap: wrap;}
.white-color {color: #fff;}
.ads-sec {min-height: 90px;}

.banner-post-img {position: absolute; top: 0;  left: 0;  right: 0;  bottom: 0;   height: 100%;  width: 100%;  -o-object-fit: cover;  object-fit: cover;}
.banner-post-img img {height: 100%;  width: 100%;   -o-object-fit: cover;    object-fit: cover;}

/*header*/
header {background:#f5f7fa;  padding: 15px 0;  border-bottom: 1px solid #f5f5f5;  transition: all 0.4s ease;  animation-duration: 1s;  animation-fill-mode: both;  transition: all 0.4s ease;  width: 100%;  z-index: 999;}
header.sticky {animation-name: slideInDown;   position: fixed;   top: 0;}
.header-main .logo img {width: 215px;  transition: all 0.4s ease;}
header.sticky .logo img {width: 180px;}
.header-main nav.navbar {  padding: 0;}
.header-main .navbar-brand {margin: 0;  display: inline-block;  padding: 0;  border: none;  outline: none;}
.nav-link {font-size: 15px; text-transform: capitalize;  font-weight: 500;  margin: 0 15px;  color:#2C3E50;  transition: all 0.4s ease;   padding: 0;}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover {color: var(--dusky-blue);}
.header-search .form-control {box-shadow: none; padding: 6px 10px;  line-height: normal;  height: auto;  font-size: 16px;   border-radius: 0;}
.search-main {position: relative;}
.search-menu {max-height: 220px;  margin-top: px;  overflow-y: auto;  overflow-x: hidden;  position: absolute;  width: 100%;  background: #fff;  z-index: 9;   border: 1px solid #f2f2f2;}
.search-menu .list-link {font-size: 14px; padding: 8px 10px;  border-bottom: 1px solid #d4d7e1;  border-top: 1px solid white;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;  word-wrap: normal;   max-width: 100%;}
.search-menu .list-link {color: #444;  text-decoration: none;  display: block;}
.search-menu {display: none;}
.search-menu.active {display: block;}
.search-submit {background: var(--dusky-blue);  color: #FFFFFF;  vertical-align: middle;   padding: 5px 15px;  border: 0;  outline: none;   cursor: pointer;}
.search-submit:hover {background: var(--dusky-blue);  color: #fff;}
header .nav-link.btn-blue {padding: 8px 20px !important;  font-size: 14px;}
header .nav-link.btn-blue:hover {color: #fff;}

@keyframes slideInDown {
    0% {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

/*footer*/
.before-footer {background-color: #f8fafc;}
.footer-col-inner .list-unstyled {display: grid;  grid-template-columns: repeat(5,1fr);  grid-gap: 10px;}
.footer-col-inner .list-unstyled .list-link {font-size: 16px;  color: #000;  text-align: center;  display: block;  transition: all 0.4s ease;  border: 1px solid #f1f5f9;  padding: 10px;  background: #fff;  border-radius: 0px;  font-weight: 500;}
.footer-col-inner .list-unstyled .list-link:hover{color: var(--dusky-blue);  background-color: #eff6ff;  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.12);}
.footer-content{background-color: #58595b;}
.footer-content p{color: #fff;}
.footer-content a{font-size: 20px; font-weight: 600; color: #fff;}
.footer-content a:hover{text-decoration: underline !important;}
footer .footer-top{background-color:#2C3E50; }
footer .footer-row {margin-bottom: 30px;}
footer .footer-sec .footer-row:nth-last-child(-n + 3) {margin-bottom: 0;}
footer .list-unstyled li {display: block;  margin-bottom: 10px;}
footer .list-unstyled li:last-child{margin-bottom: 0;}
footer .list-unstyled li a {color: #fff;  font-size: 14px;  display: inline-block; transition: all 0.4s ease;}
footer .list-unstyled li a:hover{color:var(--dusky-blue) ;}
footer .footer-down-sec {padding: 15px 0;  background-color: #15151f;   margin-top: -1px;}
footer .copy-right p {color: #fff; text-align: center;  font-size: 14px;}
.copy-right a {color: #fff;}
.footer-logo {padding: 5px 0;  background: #ffff;  margin-bottom: 20px;}
.footer-text  a {color: #fff;  font-weight: 600;  font-size: 24px;}
.footer-content-info{background-color: #111827;}
.footer-content-info p {color: #9ca3af;}
.footer-menu ul li {padding-right:0px;  border-right:none; margin-bottom: 5px;  line-height: normal;}
.footer-menu ul li:last-child {border-right: none;   margin-bottom: 0;}
.footer-menu ul li a {color: #9ca3af; line-height: normal;  font-size: 16px;  text-transform: capitalize;  transition: all 0.4s ease;}
.footer-menu ul li a:hover{color: var(--dusky-blue) !important;}
.social-list-info ul {display: flex;  grid-gap: 15px;}
.social-list-info ul li a {width: 40px; height: 40px;  background: #f7f7f7;  display: flex;  align-items: center;  justify-content: center;  color: #000000;  border-radius:100px;  font-size: 16px;  transition: all 0.4s ease;}
.social-list-info ul li a:hover {background-color: var(--dusky-blue);  color: #fff;}
.page-loader {position: fixed; top: 0;  left: 0;  width: 100%;   height: 100%;  z-index: 9999;  background: #fff;  display: none;}
.loader-inner {display: flex;  flex-direction: column;  justify-content: center;  align-items: center;   height: 100%;}
.loader-inner svg {width: 110px; height: auto;}

/*tool info*/
.tool-section-info{background-color: #fff;}
.tool-section-info .btn-group, .tool-section-info .btn-group-vertical {position: relative;  display: flex;  vertical-align: middle;  justify-content: end;}
.tool-section-info .ojf-btn-group>div {display: inline-block;  padding: 7px;  margin: 0;  vertical-align: middle;  cursor: pointer;}
.tool-section-info button#ojf-sampleDataBtn {background: transparent;  border: none;  color: #e9e9e0 !important;  font-size: 14px;}
.tool-section-info .jsoneditor-sec {height: 80vh;  text-align: left;  contain: layout style;}
.tool-section-info  .jsoneditor-menu {background-color: #2c3e50  !important;  border-bottom: 1px solid #2c3e50 !important;}
.tool-section-info  .jsoneditor {border: thin solid #2c3e50 !important;}
.tool-section-info .jsoneditor-menu .jsoneditor-menu {background-color: #fff !important;   border-bottom: 1px solid #d3d3d3 !important;}
.tool-section-info .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected, .tool-section-info .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus, .tool-section-info .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover {color: #fff !important;  background-color: #358bcc  !important;}
.modal-body .form-control {box-shadow: none !important;   border-radius: 0px;   padding: 6px 10px;  height: auto;  border-color: #dee2e6 !important;}
.jsoneditor-modal .pico-modal-header {background: var(--dusky-blue)  !important;}
.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc, .jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc {background: var(--dusky-blue)  !important; border-color:var(--dusky-blue)  !important; color: #fff;}
.tool-section-info  button.jsoneditor-redo, .tool-section-info  button.jsoneditor-undo.jsoneditor-separator {background-color: #b4bdc5 !important;}

/*tool home page*/
.tool-list-info {width: 100%;  margin: 0 auto;  display: grid;  grid-template-columns: repeat(4,1fr);  grid-gap:20px;}
.tool-list-info a {background-color: #fff;  border: 1px solid #dbdbdb;  color: #020202;  cursor: pointer;  padding: 10px;  border-radius: 0px; text-align: center;  margin: 0px;  text-transform: capitalize;   font-weight: 600;   transition: all 0.4s ease;     display: flex;  align-items: center;   grid-gap: 15px;}
.tool-list-info a .title-tool{font-size: 18px; text-align: left;}
.tool-list-info a:hover .title-tool {color: var(--dusky-blue);}
.tool-icon-home {width: 45px;}
.how-to-use {box-shadow:0 1px 3px 0 rgb(0 0 0 / 0.05);  padding: 30px;  border-radius: 16px;  background-color: #fff;   text-align: center;}
.how-to-use p{font-size: 16px;  font-weight: 500;}
.how-counter {/*background: rgb(53 139 204 / 30%);  color: #358bcc; */  line-height: 50px;  width: 50px;  margin-bottom: 15px;  font-weight: 600;  font-size: 20px;  display: inline-block;  border-radius: 100px;}
.how-to-use .font20{font-weight: bold; margin-bottom: 10px;}
.features-box {display: flex; gap: 15px;  padding: 15px;  background: #ffffff;  border: 1px solid #b3b3b3;  border-radius: 15px; height: 100%;}
.features-icon {display: flex; align-items: center; justify-content: center;  flex-shrink: 0;  width: 50px;  height: 50px;  border-radius: 10px;}
.features-icon svg{font-size: 24px;}
.features-box .font20 {font-weight:bold;  margin-bottom:10px;}
.benefits-box {padding: 30px;  color: #141a16;  background:#f8fafc;  text-align: center; border-radius: 15px;     height: 100%; box-shadow: 0px 1px 0px rgba(0, 0, 0, .05), 0px 1px 4px rgba(0, 0, 0, .02), 0px 5px 10px rgb(27 32 29 / 10%);}
.benefits-box .font20 {text-transform: capitalize;  font-weight: 600;}
.benefits-icon {background-color: #358bcc; width: 50px;  height: 50px;  margin:0 auto 15px;  border-radius: 10px;  display: flex;  justify-content: center;  align-items: center;}
.benefits-icon img {width: 30px;}
.benefits-icon svg {color: #fff;  font-size: 22px;}

/*content info*/
.list-content {margin-left: 20px; margin-bottom: 20px;}
.list-content  li{margin-bottom: 10px; list-style:disc;}
.list-content li:last-of-type { margin-bottom: 0;}
.Faq-sec-info .faq-inner .accordion {margin-bottom: 0; border: none !important;  border-radius: 0 !important;  -webkit-box-shadow: none !important;   box-shadow: none !important;}
.Faq-sec-info .faq-inner .accordion-item {border: 1px solid #ddd !important;  margin-bottom: 20px;  border-radius: 10px !important; overflow: hidden;}
.Faq-sec-info .faq-inner .accordion-collapse {border-top: 1px solid #e2e2e2;  padding-top: 15px;}
.Faq-sec-info .faq-inner .accordion-item:last-of-type {margin-bottom: 0;}
.Faq-sec-info .faq-inner .accordion .accordion-header .accordion-button { background-color: #fff;  border-color: #ddd;  margin: 0;   border-radius: 0 !important;  box-shadow: none !important;  }
.Faq-sec-info .faq-inner .accordion .accordion-header .accordion-button.font20 , .Faq-sec-info .faq-inner .accordion .accordion-header .accordion-button .font20{ color:#0e1526; font-weight: 700; }
.Faq-sec-info .faq-inner .accordion-body p{color: #111;   font-weight: 500;}
.Faq-sec-info .faq-inner .accordion > .accordion-header + .panel-collapse>.accordion-body {border-top-color: #ddd;}
.Faq-sec-info .faq-inner .accordion-body {padding-top: 0;}

/*contact page*/
form {margin: 0; border-radius: 0px;}
.contact-form .form-label {font-size: 14px;  margin-bottom: 0; font-weight: bold;}
.contact-form .form-control, .contact-form .form-select {box-shadow: none !important;   border-radius: 10px;   padding: 6px 10px;  height: auto;  border-color: #dee2e6 !important;}

/*tool code*/
.tool-code-info .editor-toolbar {display: flex; align-items: center; grid-gap: 9px;  background:#358bcc;  padding: 4px;  width: 100%;   height: 35px;}
.tool-code-info .editor-toolbar button {background: transparent;  border: none;  color: #fff;  font-size: 14px;}
.tool-code-info .editor-toolbar button {display: flex;  padding: 0;  align-items: center;  font-size: 13px;  line-height: 0;  background: transparent;  color: #fff !important;  padding: 3px;   border: 1px solid transparent;}
.tool-code-info .editor-toolbar button:hover {background-color: rgba(255, 255, 255, .2);  border: 1px solid rgba(255, 255, 255, .4);}
.tool-code-info .editor-toolbar button svg {margin-right: 4px;}
.tool-code-info .editor-wrap,.tool-code-info .viewer-wrap {border: thin solid #358bcc;}
.tool-code-info .ace-cobalt .ace_gutter {background: #ebebeb;  color: #333;}
.tool-code-info .ace-cobalt {background-color: #fff;  color: #000000;}
.tool-code-info .ace-cobalt .ace_marker-layer .ace_active-line {background: #fffbd1 !important;}
.tool-code-info .ace-cobalt .ace_meta.ace_tag {color: #1a1a1a;}
.tool-code-info .ace-cobalt .ace_marker-layer .ace_selection {background: #d3d3d3;}
.tool-code-info .ace-cobalt .ace_cursor {color: #000000;}
.tool-code-info .ace-cobalt .ace_gutter-active-line {background-color: #dcdcdc;}
.tool-code-info .file-upload,.valid-html-upload {position: relative;  font-size: 16px;  border-radius: 0px;  border: 1px dashed #358bcc;  margin-bottom: 15px !important;}
.tool-code-info .file-upload input#uploadFileBtn,.valid-html-upload .upload-file {opacity: 0;  margin: 0 !important;   padding: 15px;}
.tool-code-info .file-upload span, .valid-html-upload span {position: absolute; top: 50%;  left: 50%;  transform: translate(-50%, -50%);   z-index: 0;}
.jsoneditor-menu>.jsoneditor-modes>button:disabled, .jsoneditor-menu>button:disabled {opacity: 1 !important;}

/*html*/
.html-code .editor-toolbar {display: flex; align-items: center;  grid-gap: 9px;  background: #358bcc  !important;  padding: 4px;  width: 100%;   height: 35px;}
.html-code .editor-toolbar button {background: transparent;  border: none;  color: #fff;  font-size: 14px;}
.html-code .editor-toolbar button {display: flex; padding: 0; align-items: center;  font-size: 13px;  line-height: 0;  background: transparent;  color: #fff !important;  padding: 3px;   border: 1px solid transparent;}
.html-code .editor-toolbar button:hover {background-color: rgba(255, 255, 255, .2);  border: 1px solid rgba(255, 255, 255, .4);}
.html-code .editor-toolbar button svg {margin-right: 4px;}
.html-code .editor-wrap, .html-code .viewer-wrap {border:thin solid #358bcc;   background: #fff;}
.html-code .ace-cobalt .ace_gutter {background: #ebebeb;   color: #333;}
.html-code .ace-cobalt {background-color: #fff;   color: #000000;}
.html-code .ace-cobalt .ace_marker-layer .ace_active-line {background: #fffbd1 !important;}
.html-code .ace-cobalt .ace_meta.ace_tag {color: #1a1a1a;}
.html-code .ace-cobalt .ace_marker-layer .ace_selection {background: #d3d3d3;}
.html-code .ace-cobalt .ace_cursor {color: #000000;}
.html-code .ace-cobalt .ace_gutter-active-line {background-color: #dcdcdc;}
.html-code .file-upload, .valid-html-upload {position: relative; font-size: 16px; border-radius: 0px;  border:thin dashed #358bcc;  margin-bottom: 15px !important;    padding: 15px !important;}
.html-code .file-upload input#uploadFileBtn,
.valid-html-upload .upload-file {opacity: 0;  margin: 0 !important;   padding: 15px; z-index:1; }
.html-code .file-upload span, .valid-html-upload span {position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);   z-index: 0;}

/*form*/
.ovr-form .form-control {font-size: 16px;  color: #000;  background-color: transparent;  border-radius: 0;  box-shadow: none;  border:1px solid #358bcc;  padding: 5px 10px;  position: relative;  box-shadow: none;  border-radius:0;}
.ovr-form label {font-size: 14px;}
select {appearance: auto !important;}
select.form-select.form-control {background: transparent;}
select.form-select {appearance: none;  --bs-form-select-bg-img: none;}
.form-check-input:checked {background-color: var(--dusky-blue) !important;  border-color: var(--dusky-blue) !important;}
.form-check-input:focus {border-color: #86b7fe;  outline: 0;  box-shadow: none;}
.ovr-form .select2-container {font-size: 16px !important; color: #000 !important;  background-color: transparent;  border-radius: 0;  box-shadow: none;  border: 1px solid #358bcc !important;  padding: 3px 10px !important;  position: relative;  box-shadow: none;  border-radius: 0px;   width: 100% !important;}
.select2-container--default .select2-selection--single {background-color: transparent !important;   border: none !important;   border-radius: 0 !important;}

/*random detail*/
.gray-color {background-color: #f7f7f7;}
.random-name {display: grid;  grid-template-columns: repeat(4, 1fr);  grid-gap: 15px;}
.random-name input.form-control {border: none !important; outline: none !important;  padding: 20px 20px;  background: #fff;  border-radius: 0;  margin: 0 !important;  text-align: center;  box-shadow: none !important;}
.random-name .input-group {width: 100%;  box-shadow: rgba(10, 35, 60, .30) 0px 4px 8px -2px, rgba(10, 35, 60, .085) 0px 0px 0px 1px;  border-radius: 0px;  background-color: #fff;  overflow: hidden;  margin-bottom: 0 !important;}
.rendom-form {box-shadow: 0 5px 8px 5px rgba(0,0,0,0.10);  border-radius: 0px;}

/*JPG to PNG Converter*/
.filepond--drop-label {border: 1px dashed #aaa;  min-width: 278px;  width: 100%;  padding: 16px;  border-radius: 0px;}
.preview-card {border: 1px solid #e2e2e2;   padding: 10px;}
.preview-card .card-body {padding: 0; margin-top: 15px;  text-align: center;}
.preview-card .image-box {width: 100%;  height: 193px;}
.image-box img {width: 100%;  height: 100%;   object-fit: contain;}

/*images optimize */
.images-optimize .dropzone {min-height: auto !important;  border: 2px solid rgba(0, 0, 0, .3) !important;  background: #f1f0ef !important;  padding: 20px 20px;  background: #f1f0ef;  border: 1px dashed #aaa !important;  min-width: 278px; width: 100%;  padding: 16px;  border-radius: 0px;}

/*random grid-string*/
.grid-string {display: grid; grid-template-columns: repeat(4, 1fr);  grid-gap: 15px;}
.grid-string .input-group {width: 100%; box-shadow:0 6px 10px 5px rgba(0,0,0,0.12); border-radius: 0px; background-color: #fff; overflow: hidden;  margin-bottom: 0 !important;}
.grid-string  input.form-control {border: none !important;  outline: none !important;  padding: 20px 20px;  background: #fff;  border-radius: 0;  margin: 0 !important;  text-align: center;  box-shadow: none !important;}
.grid-string .copyString {padding: 20px;  border: none !important;  background-color: #358bcc;  color: #fff;  outline: none !important;}

/*color*/
.color_picker {padding: 2px !important;  display: inline-block;  width: 100%;  height: 36px;  margin-top: 0px;}
.color-pantone .pantone-colors-wrap {display: grid; grid-template-columns: repeat(8, 1fr);  justify-content: center;  grid-column-gap: 20px;  text-align: center;   grid-row-gap: 30px;}
.pantone-colors-wrap .pantone-name {min-height:auto;  vertical-align: middle;  font-size: 12px;  margin-bottom: 5px;   font-weight: 500;}
.pantone-color-list .pantone-color {width: 100% !important;}
.pantone-colors-wrap .pantone-color-list .pantone-color {padding: 5px;  border: 1px solid #13151a;}

/*phone number*/
.random-numbers-wrap ul {display: grid;  grid-template-columns: repeat(4, 1fr);  grid-gap: 15px;    margin-top: 0;}
.random-numbers-wrap ul li {width: 100%;  box-shadow: rgba(10, 35, 60, .30) 0px 4px 8px -2px, rgba(10, 35, 60, .085) 0px 0px 0px 1px;   border-radius:0;  background-color: #358bcc;  overflow: hidden; margin-bottom: 0 !important; border: none !important;  outline: none !important; padding: 20px 20px;   margin: 0 !important;  text-align: center;  position: relative;  cursor: pointer; color: #fff; }
.random-numbers-wrap .copy-btn {position: absolute;  right: 15px; color: #fff; font-size: 18px;   transition: all 0.4s ease;}
#loremOutput {height: 250px;  overflow-y: auto;  padding: 10px;  font-family: 'Libre Franklin';  background-color: #f7f7f7;  border: none;}

/*modal*/
.modal-title {font-size: 18px !important;  font-weight: 500 !important;}
.modal-content {border-radius: 0 !important;}
button:focus:not(:focus-visible) {box-shadow: none !important;}

/*Responsive*/
@media (max-width: 1535px) {

    .container {max-width: 1250px}

}

@media (max-width: 1365px) {

    .container {max-width: 1180px}

}

@media (max-width: 1279px) {

    .container {max-width: 1100px;}

}

@media (max-width:1199px) {

    .container {max-width: 95%;}

    /*header*/
    .search-main {display: none;}

    .tool-list-info {width: 100%;}
    .footer-col-inner .list-unstyled {grid-template-columns: repeat(4,1fr);}
    .grid-string {grid-template-columns: repeat(3, 1fr);}
    .how-to-use {padding: 20px;}
    .benefits-box {padding: 20px;}

}

@media (max-width:1023px) {

     :root {

        --padding50:40px;

    }

    .font44 {font-size: 40px; margin-bottom: 15px;}
    .font36 {font-size: 34px; margin-bottom: 15px;}
    .font30 {font-size: 28px; margin-bottom: 15px;}
    .font24 {font-size: 22px; margin-bottom: 15px;}
    .font20 {font-size: 18px; margin-bottom: 15px;}
    .font18 {font-size: 16px; margin-bottom: 15px;}

    p {margin-bottom: 15px;}
    .pr-30 {padding-right: 0px;}
    .mr-30 {margin-right: 0px;}
    .ml-30 {margin-left: 0px;}

    /*header*/
    .header-main .logo img {width: 175px;}
    .navbar-collapse {position: fixed;  top: 0;  left: -100%;  background:#111212;  height: 100vh; width: 100%;  z-index: 9;  padding: 20px;  display: initial !important;  opacity: 0;   transition: all 0.4s ease;  padding-top: 130px;}
    .navbar-collapse.show {left: 0;  opacity: 1;}
    .navbar-nav.ms-auto.mb-2.me-3.mb-lg-0 {margin: 0 !important;}
    .navbar-toggler {box-shadow: none !important;  border: none !important;  outline: none !important; padding: 0;}
    .navbar-nav li a {color: #fff;  font-size: 20px;}
    .navbar-nav li {margin-bottom: 10px;  width: 100%;  padding-bottom: 10px;  border-bottom: 1px solid #fff;   text-align: center; }
    .navbar-nav li:last-child {margin-bottom: 0;  padding-bottom: 0;   border-bottom: none;}
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link:focus,
    .navbar-nav .nav-link:hover {color:var(--dusky-blue);}
    .navbar-expand-lg .navbar-nav {flex-direction: column !important;}
    .navbar-toggler-icon {background-image: url(../images/menu-icon.svg) ; background-size: 20px;}
    .header-main [aria-expanded="true"] .navbar-toggler-icon {background-image: url(../images/close_icon.svg);  z-index: 999;   position:relative;   background-color: #fff;   background-size: 20px;   padding: 5px;}

    /*tool*/
    .button-wrap {margin: 30px 0;}
    .tool-list-info {grid-template-columns: repeat(3,1fr);}
    .footer-col-inner .list-unstyled {grid-template-columns: repeat(3,1fr);}
    .color-pantone .pantone-colors-wrap {grid-template-columns: repeat(6, 1fr);   grid-row-gap: 20px; }
    .random-numbers-wrap ul { grid-template-columns: repeat(3, 1fr);}
    .grid-string {grid-template-columns: repeat(2, 1fr);}
    .random-name {display: grid;  grid-template-columns: repeat(3, 1fr);}

}

@media (max-width:767px) {

    :root {

        --padding50:30px;

    }

    .container {max-width: 100%;}

    .font44 {font-size: 36px; margin-bottom: 15px;}
    .font36 {font-size: 30px; margin-bottom: 15px;}
    .font30 {font-size: 24px; margin-bottom: 15px;}

    .mt-30 {margin-top: 20px !important;}
    .mb-30 {margin-bottom: 20px !important;}

    /*tool*/
    .button-wrap {margin: 20px 0;}
    .tool-list-info {grid-template-columns: repeat(2,1fr); grid-gap: 15px;}
    .footer-col-inner .list-unstyled {grid-template-columns: repeat(2,1fr);}
    .color-pantone .pantone-colors-wrap {grid-template-columns: repeat(5, 1fr);   grid-row-gap: 20px; }
    .random-numbers-wrap ul { grid-template-columns: repeat(2, 1fr);}
    .random-numbers-wrap ul li {padding: 15px 15px;}
    .random-name {display: grid;  grid-template-columns: repeat(2, 1fr);}
    .Faq-sec-info .faq-inner .accordion-item {margin-bottom: 15px;}
    .json-content-free{width: 100% !important;}

}

@media (max-width:575px) {

    /*tool*/
    .tool-list-info {grid-template-columns: repeat(1,1fr);}
    .color-pantone .pantone-colors-wrap {grid-template-columns: repeat(3, 1fr); }
    .random-numbers-wrap ul { grid-template-columns: repeat(1, 1fr);}
    .grid-string {grid-template-columns: repeat(1, 1fr);}
    .random-name input.form-control {padding: 15px 10px;}
    .jsoneditor-menu {height: auto;}
    .tool-section-info .btn-group, .tool-section-info .btn-group-vertical {justify-content: start;   flex-wrap: wrap;    width: 100%;}
    .button-wrap {margin-top: 50px;}
    .tool-section-info .jsoneditor-sec {height: 400px;}

}