/* 
    WizardGenerator.com 
    All rights reserved.
*/

*,html{margin:0;padding:0;box-sizing:border-box;}
html {scroll-behavior: smooth;}
body{margin:0;font-family:"Chiron Sung HK",Times,Arial,serif;font-optical-sizing:auto;padding-top:60px;}

/* Global */
.wrapper{width:100%;max-width:1580px;margin:auto;padding:0 10px;}
h1{font-size:68px;margin-top:40px;}
h2{font-size:32px;margin-top:40px;}
h3{font-size:24px;margin-top:40px;}
h1,h2,h3,h4,h5,h6{margin-bottom:20px;line-height:120%;}
h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,
section h1:first-child,section h2:first-child,section h3:first-child,section h4:first-child,section h5:first-child{margin-top:0;}
section{padding:40px 0 60px;}
section.secondary-bg{background:#eee}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:16px}
h1 small{display:block;font-size:15px;font-weight:normal;text-transform:uppercase;margin:0;line-height:100%;letter-spacing:1px;}
p{line-height:160%;margin-bottom:15px;}
ul,ol{padding-left:17.5px;margin-bottom:15px;}
ul{list-style-type:square;}
li{margin-bottom:15px;}
p,li{font-weight:400;font-style:normal;}
p a,li a{color:#3641D9;text-decoration:none;}
p a:hover,li a:hover{color:#000;}
hr{opacity:0.3;border:none;border-top:1px solid #aaa}
label{font-weight:600;}
table { width: 100%; border-collapse: collapse; font-family: sans-serif; background: #fff; border-radius: 8px; overflow: hidden; } 
thead { background: #f4f4f4; } thead th { text-align: left; padding: 1rem; font-weight: 600; font-size: 1rem; color: #333; } 
tbody td { padding: 0.75rem 1rem; border-top: 1px solid #eee; font-size: 0.95rem; color: #555; } 
tbody tr:nth-child(even) { background: #fafafa; } 
tbody tr:hover { background: #f0f8ff; } 
.btn{border-radius:15px;background:#7493C4;background:linear-gradient(to bottom,#7493C4,#513F98);border:none;color:#fff;display:inline-block;max-width:280px;text-align:center;line-height:140%;font-size:26px;cursor:pointer;transition:0.1s;width:100%;padding:25px 5px;margin-top:20px;margin-bottom:20px;text-shadow:0px 1px 2px rgba(0,0,0,0.8);text-decoration:none;font-family:"Chiron Sung HK",Times,Arial,serif;}
.btn:hover{transform:scale(1.04);}
.btn:active{transform:scale(0.97);}
.btn.btn-copy{position:absolute;right:2px;top:0;height:100%;line-height:60px;font-size:19px;width:120px;color:#736F6E;background:none;min-width:0;width:auto;z-index:3;display:flex;align-items:center;gap:5px;user-select:none;-webkit-user-select:none;-ms-user-select:none;text-shadow:none;font-family:"Almendra",Times,Arial,serif;transition:0.05s;margin:0;}
.btn.btn-copy:hover{color:#736F6E;}
.btn.btn-copy .icon{margin-top:15px;}
.btn.btn-copy .icon svg{stroke:#736F6E;width:22.5px;height:22.5px;}
.btn.btn-copy:hover .icon svg,.btn-copy.active .icon svg{stroke:#3E537A;}
.btn.view-all{padding:10px 15px;font-size:18px;margin:-5px 0 20px 0;}
#generateBtn{margin-top:0;width:100%;flex:1;max-width:100%;}

/* Header */
.header{height:60px;background:#fff;position:fixed;top:0;left:0;width:100%;z-index:10;border-bottom:1px solid rgba(0,0,0,.1)}
.header .wrapper{display:flex;align-items:center;justify-content:space-between;height:100%;}
.header .logo{max-width:200px;}
.header .logo img{display:block;width:100%;height:auto;}
.nav-menu{display:flex;list-style-type:none;gap:15px;align-items:center;padding:0;margin:0;}
.nav-menu li{margin:0;position:relative;display:flex;align-items:center;}
.nav-menu li a{display:block;line-height:60px;text-decoration:none;color:#000;position:relative;z-index:999999999999;padding:0 5px;cursor:pointer;}
.nav-menu li.has-children a:after{content:"\25BC";margin-left:7.5px;width:15px;display:inline-block;font-size:11px;line-height:0;transition:0.2s;}
.nav-menu li.has-children.active a:after{transform:rotate(180deg) translate(3.5px);}
.nav-menu li a:hover{background:rgba(222,222,222,.6);}
.nav-menu li a:before{content:"";height:4px;width:0%;background:#444db3;position:absolute;bottom:0px;left:50%;transform:translateX(-50%);transition:0.2s;}
.nav-menu li a:hover:before,
.nav-menu li.has-children.active a:before{width:100%;}
.mega-menu{position:fixed;top:60px;width:100%;z-index:9;background:#fff;box-shadow:0px 5px 10px rgba(0,0,0,.15);padding:10px 0 0 0;display:none;}
.mega-menu .links{justify-content:space-between;padding:20px 0 25px;}
.mega-menu ul{list-style-type:none;padding-left:0;}
.mega-menu.active{display:block;}
/*.mega-menu ul{list-style-type:none;display:flex;flex-wrap:wrap;}
.mega-menu li{margin-bottom:0px;}
.mega-menu li a{color:#000;text-decoration:none;display:block;padding:0 10px;position:relative;line-height:60px;}
.mega-menu .related-generators img{min-width:140px;}
.mega-menu h5.heading{text-transform:capitalize;font-size:16px;margin-left:10px;margin-top:10px;}
.mega-menu .related-generators li{flex:1}
.mega-menu .related-generators li .thumbnail{}
*/
.mobile-menu{display:none;}

#toggle-darkmode{padding-right:15px;padding-left:15px;}
#toggle-darkmode .icon:after{content:"🌙";}
#toggle-darkmode.active .icon:after{content:"☀️";}

.nav-mobile{display:none !important;}
.nav-mobile .icon{display:flex;gap:7px;flex-direction:column;width:40px;height:28px;cursor:pointer;}
.nav-mobile .icon i{display:block;height:4px;background:#000;border-radius:150px;}

/* Main */
.name-generator-layout{background:#E8EEF5;padding:0 0 70px;position:relative;}
.name-generator-layout .wrapper{z-index:2;position:relative;}
.page-content ul{padding-left:20px;list-style-type:square;}
.page-content li a,.page-content p a{position:relative;}
html.darkmode .page-content p a,
html.darkmode .page-content li a{color:#585dbd;}
.page-content li a:hover,.page-content p a:hover{text-decoration:underline;}

.page-content li a:hover:after,.page-content p a:hover:after{width:100%;}
.name-generator-layout.wizard .name-entry,.name-generator-layout.wizard .btn{font-family:"Almendra",serif;font-weight:400;font-style:normal;}
.banner{width:100%;height:230px;position:relative;display:flex;background:rgb(100, 102, 104); overflow: hidden;
}


.name-generator-bg {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  max-width: 1580px;
  height: 100%;
  transform: translateX(-50%);
  background-size: cover !important;
  background-position: 60% 30% !important;
  z-index: 1;
}

.name-generator-bg:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(83,109,139,0.7);
  mix-blend-mode: saturation;
  z-index: 1;
}

.banner-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(100,102,104,0.9) 20%, 
    rgba(100,102,104,0.0) 50%, 
    rgba(100,102,104,0.9) 70%
  );
}

.banner .intro {
  position: relative;
  z-index: 5;
  color: #fff;
  text-shadow: 0px 2px 3px rgba(0,0,0,.8);
}

.banner .intro{color:#fff;text-shadow:0px 2px 3px rgba(0,0,0,.8)}
.name-generator-bg{background-size:cover !important;background-position:60% 30% !important;position:absolute;left:50%;top:0;width:100%;max-width:1580px;transform:translateX(-50%);height:100%;z-index:0;animation:fadein 1s forwards;animation-delay:0.35s;opacity:0;}
.name-generator-bg:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(83,109,139,0.7);mix-blend-mode:saturation;}
.name-generator-container{display:flex;flex-direction:row;gap:20px;position:relative;padding-top:30px;z-index:1;}
.intro{text-align:center;margin:auto;text-align:center;padding:25px 0;margin-bottom:20px;position:relative;z-index:2;}
.intro p{max-width:950px;margin:auto;}
.intro .heading{margin-bottom:10px;}
.settings-container{flex:0 0 330px;}
.settings-container .heading{text-align:center;padding-bottom:5px;margin-bottom:5px;margin-top:10px;display:flex;font-size:18px;letter-spacing:0.5px;align-items:center;justify-content:space-between;color:rgba(0,0,0,.5)}
.settings-container .heading:before,.settings-container .heading:after{content:"";width:33.5%;height:1px;background:rgba(0,0,0,.5);display:block;opacity:0.5}
.results-container,
.results{display:flex;flex:1;align-self:flex-start;width:100%;gap:10px}
.results{flex-direction:column;}
.results-intro{display:flex;gap:5px;align-items:center;margin-bottom:10px;}
.results-intro h3,.results-intro h4,.results-intro h5{margin-bottom:0}
.tooltip-btn{width:15px;height:15px;line-height:15px;font-size:12px;font-weight:600;border-radius:150px;background:rgba(0,0,0,.7);border:none;color:#fff;text-align:center;position:relative;cursor:pointer;}
.tooltip-btn:hover{background:#777;}
.tooltip{font-weight:400;color:#fff;background:rgba(0,0,0,.9);border-radius:7.5px;position:absolute;padding:5px 10px;font-size:14px;top: 50%;left: 20px;transform: translateY(-50%);min-width: 250px;text-align:left;z-index:9;}
.tooltip-btn.active .tooltip{display:block;}
#result{width:100%;display:flex;gap:3%;align-items:flex-start;flex-wrap:wrap;}
.related-generators .block:hover{text-decoration:none;}
.name-entry{flex:0 0 48%;height:60px;line-height:50px;padding-left:20px;background-color:#fff;border-radius:5px;padding:5px 5px 5px 15px;margin-bottom:3%;font-size:28px;width:100%;color:#000;position:relative;border:1px solid #ccc;}
.name-entry.class-name{font-size:21px;}
.name-entry.active{outline:2px solid #3b5fd7}
html.darkmode .name-entry.active{outline:2px solid #ffee00}
.cover-container{flex:0 0 320px;}
.cover-image{display:block;border-radius:10px;background:rgba(255,255,255,0.1);background:linear-gradient(to bottom,rgba(255,255,255,0.1),rgba(255,255,255,0));width:100%;object-fit:cover;animation:appearup 0.5s forwards;animation-delay:0.25s;opacity:0;min-height:425px;}
.label-container{display:flex;justify-content:space-between;margin-bottom:15px;}
label{font-size:16px;color:#222;display:block;margin-top:15px;}
.label-container.column{flex-direction:column;gap:5px;margin-bottom:20px;}
.checkbox-container{margin-bottom:10px;display:flex;align-items:center;width:100%;justify-content:left;}
.checkbox-container .checkbox{height:0px;height:0px;min-width:0;margin:0;overflow:hidden;-webkit-appearance:none;position:absolute;left:-5000px;top:-5000px;z-index:0;}
.checkbox-container .checkbox:focus{outline:0;}
.checkbox-container .label{cursor:pointer;font-weight:600;}
.checkbox-container .label:before{content:"";display:inline-block;vertical-align:middle;background:#fff;border-radius:5px;border:1px solid #999;width:30px;height:30px;line-height:30px;font-size:25px;font-weight:700;color:#000;text-align:center;margin-right:10px;}
.checkbox-container .checkbox:checked + label:before{content:"\2713";}
input,select{min-width:150px;display:block;line-height:100%;padding:5px;border-radius:5px;border:none;height:40px;font-size:15px;color:#777;border:1px solid #ccc;}
input:focus,select:focus{outline:2px solid #333;}
.page-content{padding:40px 0;}
.page-content .container{display:flex;}
.page-content .sidebar{flex:0 0 320px;}
.sidebar .btn-container{display:flex;flex-direction:column;gap:15px}
.sidebar .btn-container .btn{margin:0;}
.page-content .content{padding-right:20px;}
.related-generators{display:flex;margin-bottom:20px;list-style-type:none;flex-wrap:wrap;padding:0 !important;gap:20px;}
.related-generators li{display:flex;flex-direction:column;flex:0 0 calc(20% - 20px);align-items:flex-start;text-decoration:none;}
.related-generators .block{margin-bottom:20px;text-decoration:none;color:#475581;position:relative;}
.related-generators .block h5{margin:0;}
.related-generators .block .thumbnail{display:block;max-width:210px;min-width:120px;height:auto;margin-bottom:15px;overflow:hidden;border-radius:15px;transition:0.1s;position:relative;}
.related-generators .block .thumbnail img{display:block;width:100%;height:100%;object-fit:contain;object-position:0 0;}
.related-generators .block:hover .thumbnail{box-shadow:0px 0px 15px rgba(0,0,0,.3);transform:scale(1.025);text-decoration:none;}
.related-generators .title{margin:0;display:block;font-size:20px;color:#000;}
.related-generators .subtitle{display:block;margin-top:5.5px;font-size:14px;}

.static .related-generators li{flex:1}
.content-intro{margin-bottom:25px}
.content-intro h3{margin-bottom:5px;}
.content-intro p{color:#555}

.badge{position:absolute;bottom:20px;left:0;text-align:right;background:rgba(0,0,0,.8);color:#fff;padding:5px 10px;border-top-right-radius:5px;border-bottom-right-radius:5px;font-size:16px;}
.badge:after{content:"Coming Soon";}
.settings-container{width:100%;}

.name-guides-section .container{display:flex;flex-direction:row !important;flex-wrap:wrap;justify-content:space-between;gap:15px}
.name-guides-section .container .block{flex:0 0 calc(33% - 15px);display:flex;flex-direction:column;margin-bottom:10px;border-radius:10px;padding:5px 15px 15px 15px;background:linear-gradient(to bottom right,#fff,#f3f3f3);}
.name-guides-section .container .block ul{margin-bottom:0;}
.name-guides-section .container .block .heading{display:flex;align-items:center;gap:10px;margin:15px 0 20px 0}
.name-guides-section .container .block .heading-title{color:#000;margin:0;line-height:130%;}
.name-guides-section .container .block .icon{width:40px;height:40px;border-radius:5px;background:rgb(201, 201, 231);position:relative}
.name-guides-section .container .block .icon svg{stroke:#000;width:70%;height:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}

html.darkmode .name-guides-section .container .block{background:#000;}
html.darkmode .name-guides-section .block .heading-title{color:#ffff;}
html.darkmode .name-guides-section .block .icon{background:#181818;}
html.darkmode .name-guides-section .block .icon svg{stroke:#8a8a8a}

.share-btn{display:flex;align-items:center}
.share-btn .icon{display:inline-block;margin-top:10px}
.share-links-container{display:BLOCK;position:relative;margin-top:20px}
.share-links-container:after{content:"";border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid rgba(0,0,0,.8);position:absolute;left:50%;top:-10px;transform:translateX(-50%)}
.share-links-container ul{ background: rgba(0,0,0,.8); color: #ccc; border-radius: 10px; padding:0; list-style-type: none; }
.share-links-container ul li{margin:0;}
.share-links-container ul li a{display:block;border-bottom:1px solid rgba(255,255,255,.2);padding:10px;color:#ccc}
.share-links-container ul li a:hover{color:#fff;text-decoration:none;}
.share-links a{cursor:pointer}

.below-container{margin-top:10px;animation:fadein 0.25s forwards;animation-delay:3s;opacity:0;}
.like-btn{background:rgba(11,11,11,.6);}
.like-btn,
.share-btn{color:#fff;font-size:16px;line-height:55px;height:auto;display:inline-block;padding-left:5px;padding-right:15px;display:flex;align-items:center;justify-content:center;gap:5px;line-height: 40px;padding-top: 15px;padding-bottom: 15px;max-width:100%;}
.like-btn:hover{outline:2px solid #fff;transform:scale(1.02)}
.like-btn:before{content:"";background-size:100%;background:url('images/icon-heart.svg') no-repeat;width:24px;height:24px;display:inline-block;margin-right:5px;}
.like-btn:active{transform:scale(0.95)}
html.darkmode .like-btn{background:rgba(233,233,233,.2);color:#fff;text-shadow:none;}
.like-btn.active:before{filter: brightness(0.6) saturate(100%) invert(20%) sepia(100%) saturate(5000%) hue-rotate(-15deg);}


.page-content.wizard h2,.page-content.wizard h3{font-weight:700;font-style:normal;color:#000;}
.page-content.rapper .content-container li a,
.page-content.rapper .content-container p a{color:#ff0000;}
.page-content.knight .content-container li a,
.page-content.knight .content-container p a{color:#53c2db;}
.name-generator-layout.wizard h1{font-family:"Almendra",serif;font-weight:700;font-style:normal;}
.name-generator-layout.wu-tang #generateBtn{background:#ffae00;background:linear-gradient(to bottom,#ffe600,#ffae00);color:#000;text-shadow:none;}
/*.name-generator-layout.wu-tang .page-content li a, 
.name-generator-layout.wu-tang .page-content p a{color:#ffae00}*/
.name-generator-layout.rapper #generateBtn{background:#880000;background:linear-gradient(to bottom,#ff0000,#880000);}
.name-generator-layout.knight #generateBtn{background:#ffae00;background:linear-gradient(to bottom,#53c2db,#1e3d3f);}

.hero-banner{padding:70px 0;background:#eee;position:relative;}
.hero-banner .btn{padding:15px 40px;}
.hero-banner-image{width:50%;height:100%;position:absolute;top:0;right:0;background-size:cover !important;background-position:50% 30% !important;background-repeat:no-repeat !important;z-index:0;animation:fadein 1s forwards;animation-delay:0.5s;opacity:0;}
.hero-banner-image:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(to left,rgba(238,238,238,0),rgba(238,238,238,1));}
.hero-banner-image:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgb(81, 151, 255);mix-blend-mode:soft-light}
.hero-banner .hero-content{position:relative;z-index:3;}
.hero-banner h1{margin-bottom:10px;}
.hero-banner p a, .hero-banner li a{color:#444db3;text-decoration:none;}
.hero-banner p a:hover, .hero-banner li a:hover{color:#000;}

/* Footer */
.footer{padding:15px 0;}
.footer p{margin:0;color:#444;}
.footer a{color:#3640AC;text-decoration:none;}
.footer a:hover{color:#000;}
.footer ul{list-style-type:none;padding-left:0;}
.footer-section{background:#f7f7f7;padding:40px 0;}
.footer-section .container{display:flex;align-items:flex-start;gap:100px;}
.footer-bottom .container{display:flex;justify-content:space-between;align-items:center;}
.footer-section .info{max-width:450px;padding-left:20px;}
.links{display:flex;align-items:flex-start;width:100%;justify-content:space-evenly;}
.footer .bottom-links{display:inline-block;margin-left:5px;}
.footer .bottom-links a{margin:0 5px;color:#666;}
.footer .social-links{margin-top:20px;}
.footer-bottom{border-top:1px solid #ddd;padding-top:10px;}
.footer-bottom p{font-size:12px;}

.scroll-to-top{padding:5px;}
.scroll-to-top:before{content:"\2191";display:inline-block;margin-right:5px;}

/* Dark mode */
html.darkmode{}
html.darkmode h6{color:#eee;}
html.darkmode .logo img{filter:invert(1) hue-rotate(178deg) contrast(1.25) brightness(0.95)}
html.darkmode label{color:#bbb}
html.darkmode .nav-mobile .icon i{background:#999;}
html.darkmode .nav-menu li a:hover{background:rgba(222,222,222,.1);}
html.darkmode .nav-menu li a{color:#eee;}
html.darkmode .mega-menu{background:#0a0b0c;}
html.darkmode hr{border-color:#595959}

html.darkmode .nav-menu li.has-children a:after{color:rgba(255,255,255,.5);}
html.darkmode .name-generator-layout{background:#2c2c2c}
html.darkmode .name-generator-bg:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background: rgba(10,10,26,0.95);mix-blend-mode:darken;filter: saturate(1.5);opacity:0.9}
html.darkmode table{background:none;color:#aaa}
html.darkmode thead,
html.darkmode tbody tr:nth-child(even){background:none;}
html.darkmode thead th{color:#fff}
html.darkmode tbody td{color:#999;}
html.darkmode tbody tr:hover{background:#252525;}
html.darkmode tbody tr:hover td{color:#fff;}
html.darkmode h1,html.darkmode h2,html.darkmode h3,html.darkmode h4,html.darkmode h5{color:#fff;}
html.darkmode p,html.darkmode li{color:#A59E9E}
html.darkmode > body{background:#121418;}
html.darkmode .header,html.darkmode .footer{background:#121418;color:#777;border-color: rgba(255,255,255,.1)}
html.darkmode .page-content h2,
html.darkmode .page-content h3{color:#ddd;}
html.darkmode .name-generator-layout.wizard h1,
html.darkmode .page-content.wizard h2,
html.darkmode .page-content.wizard h3{color:#fff;}
html.darkmode section.secondary-bg{background:#000}

html.darkmode .page-content{background:#121418;color:#999;}
html.darkmode .footer p{color:#999;}
html.darkmode .block .title{color:#ccc;}
html.darkmode .block .subtitle{color:#6f89b3;}
html.darkmode .name-entry,html.darkmode input,html.darkmode select,html.darkmode .checkbox-container .label:before{background:#000;color:#fff;border-color:#6A6969;}
html.darkmode input,html.darkmode select{border-color:#6A6969;}

html.darkmode .banner{background:#101127}
html.darkmode .hero-banner-image:before{background:linear-gradient(to left,rgba(0,0,0,0),rgba(0,0,0,1));}
html.darkmode .hero-banner-image:after{background:rgb(94, 94, 255);mix-blend-mode:soft-light}
html.darkmode .hero-banner{background:#000;}

html.darkmode .settings-container .heading{color:rgba(255,255,255,.5)}
html.darkmode .settings-container .heading:before,html.darkmode .settings-container .heading:after{background:rgba(255,255,255,.5);}
html.darkmode .banner-gradient {
  background: linear-gradient(
    to right,
    rgba(21, 36, 54, 0.9) 20%, 
    rgba(43, 39, 58, 0) 50%, 
    rgba(22, 39, 58, 0.9) 70%
  );
}

html.darkmode .footer-section{background:#000;}
html.darkmode .footer-bottom{border-color:#333;}
html.darkmode .footer p a,
html.darkmode .footer li a,
html.darkmode p a,
html.darkmode li a,
html.darkmode .page-content p a,
html.darkmode .page-content li a{color:#9096FF;}

html.darkmode .footer p a:hover,
html.darkmode .footer li a:hover,
html.darkmode p a:hover,html.darkmode li a:hover{color:#fff;}

/* Animations */
@keyframes fadein{
  0%{opacity:0;}
  100%{opacity:1;}
}
@keyframes appearup{
  0%{opacity:0;transform:translateY(10px)}
  100%{opacity:1;transform:translateY(0px)}
}

/* Media queries */
@media screen and (max-width:1350px){
  .results-container{flex-direction:column;gap:5px;}
  .mega-menu .related-generators{overflow-x:scroll;flex-wrap:nowrap}
}
@media screen and (max-width:1200px){
  h1{font-size:6vw;}
  .hero-banner .btn{font-size:25px;}
  .cover-container{}
  .name-entry{font-size:20px;}
  .name-entry.class-name{font-size:19px;}

}
@media screen and (max-width:1160px){
  .cover-image{max-width:100%;height:160px;object-position:50% 30%;max-height:none;}
  .name-generator-container{flex-direction:column-reverse;}
  .results-container{flex-direction:row;}
  .name-entry{margin-bottom:15px;}
  .page-content .container{flex-direction:column;flex-wrap:wrap;}
  .page-content .sidebar{flex:0 0 100%;margin-top:20px;width:100%;}
  .footer-section .container{flex-direction:column;gap:50px;}
  .footer-section .info{max-width:800px;padding-left:0;}
   .links{justify-content:space-between;}
   .name-guides-section .container .block{flex:0 0 calc(50% - 15px);}
}
@media screen and (max-width:820px){
  .results-container{flex-direction:column;}
  table { display: block; overflow-x: auto; white-space: nowrap;overflow-x:scroll;width:100%;max-width:100%;white-space:unset} 
  thead th, tbody td { padding: 0.75rem; font-size: 0.95rem; } 
  .related-generators{overflow-x:scroll;}
  .related-generators li{flex:0 0 calc(25% - 20px);}
  .btn.btn-copy{font-size:17px;}
  .mega-menu li:nth-child(7){display:none;}
}
@media screen and (max-width:700px){
  .nav-menu{gap:5px;}
  .related-generators li{flex:0 0 calc(33% - 20px);}
  .hero-banner{text-align:center;}
  .hero-banner-image{width:100%;opacity:0.5 !important}
  .main-menu{display:none;}
  .nav-mobile{display:flex !important;}
}
@media screen and (max-width:640px){
  .related-generators li{flex:0 0 calc(50% - 20px);}
  .header .logo{max-width:160px;}
    .links{flex-wrap:wrap;justify-content:left;}
  .links .block{flex:0 0 50%;margin-bottom:40px;}
  .name-guides-section .container .block{flex:0 0 calc(100% - 15px);}
}
@media screen and (max-width:470px){
  .results-container{flex-direction:column;}
  .name-entry{flex:0 0 100%;}
  .links{flex-direction:column;gap:30px;}
}