.hero,
.menu-bar a {
   text-align: center
}

.output-row,
.url-row {
   gap: 10px;
   display: flex
}

.hero,
.info-item,
.menu-bar,
.output-row,
.shortener-box,
.url-row,
nav ul {
   display: flex
}

*,
nav ul {
   margin: 0
}

.sidebar ul,
nav ul {
   list-style: none
}

.overlay,
.sidebar {
   position: fixed;
   top: 0;
   height: 100%
}

.output-row button,
button {
   white-space: nowrap;
   cursor: pointer
}

* {
   padding: 0;
   box-sizing: border-box
}

body,
html {
   font-family: Arial, sans-serif;
   width: 100%;
   line-height: 1.6
}

.hero {
   background: linear-gradient(135deg, #006E7F, #008C8C, #00A6A6);
   color: #fff;
   flex-direction: column;
   align-items: center;
   padding: 20px 20px 50px
}

.hero h1 {
   font-size: 20px;
   margin-bottom: 0px;
}

.shortener-box {
   background: #fff;
   padding: 20px;
   border-radius: 2px;
   flex-direction: column;
   align-items: stretch;
   max-width: 600px;
   width: 100%;
   margin-bottom: 10px
}

.menu-bar {
   justify-content: space-between;
   margin-bottom: 15px;
   border-bottom: 1px solid #ddd;
   padding-bottom: 10px
}

.menu-bar a {
   flex: 1;
   text-decoration: none;
   color: #555;
   font-size: 14px;
   padding: 6px 10px;
   border-radius: 25px;
   background: #f9f9f9;
   margin: 0 8px
}

.output-row button,
.url-row button {
   background-color: #008C8C;
   color: #fff
}

.menu-bar a:hover {
   color: #000
}

.url-row {
   margin-bottom: 5px
}

.url-row input[type=url] {
   flex: 1;
   padding: 10px;
   font-size: 14px;
   border: 1px solid #ccc;
   border-radius: 2px;
   color: #000
}

.url-row button {
   padding: 10px 16px;
   border: none;
   border-radius: 2px;
   height: 38px;
   cursor: pointer;
   transition: opacity .3s
}

.url-row button:disabled {
   opacity: .65;
   cursor: not-allowed
}

.output-row {
   align-items: center;
   margin-top: 10px
}

.output-row input[type=text] {
   flex: 1;
   padding: 10px;
   font-size: 14px;
   border: 1px solid #ccc;
   border-radius: 2px;
   color: #000
}

.output-row button {
   padding: 8px 14px;
   border: none;
   border-radius: 2px;
   height: 36px
}

.info-box {
   margin-top: 15px;
   border-radius: 12px;
   background: #f4f8fb;
   padding: 16px 20px;
   border: 1px solid #d5e4f1;
   color: #000
}

.sidebar,
button {
   background-color: #006E7F
}

.info-item {
   flex-wrap: wrap;
   margin-bottom: 10px;
   text-align: left
}

.info-item .label {
   min-width: 130px;
   color: #15517a;
   font-size: 15px
}

.info-item .value {
   flex: 1;
   color: #222;
   font-size: 15px;
   overflow-x: auto
}

.info-item .value a {
   color: #007bff;
   text-decoration: none
}

.info-item .value a:hover {
   text-decoration: underline
}

header {
   background: linear-gradient(135deg, #006E7F, #008C8C, #00A6A6);
   color: #fff;
   padding: 0 20px
}

header .container {
   display: flex;
   justify-content: space-between;
   align-items: center
}

nav ul {
   gap: 20px;
   font-size: 14px
}

.sidebar {
   left: -300px;
   width: 250px;
   transition: .3s;
   padding: 20px;
   z-index: 999
}

.sidebar ul li {
   margin: 20px 0
}

.sidebar ul li a {
   color: #fff;
   text-decoration: none;
   font-size: 18px
}

.sidebar-btn {
   display: none;
   font-size: 24px;
   background: 0 0;
   border: none;
   color: #fff;
   cursor: pointer;
   padding: 0
}

.overlay {
   left: 0;
   width: 100%;
   background: rgba(0, 0, 0, .7);
   display: none;
   z-index: 998
}

input,
select {
   flex: 1;
   padding: 10px;
   font-size: 15px;
   border: 1px solid #ccc;
   border-radius: 6px;
   color: #000;
   min-width: 27%
}

button {
   border: none;
   border-radius: 6px;
   color: #fff
}

@font-face {
   font-family: Cookie;
   src: url('https://www.shorturls.in/framework/fonts/Cookie-Regular.ttf') format('truetype')
}

.blog-link a,
nav ul li a {
   color: #fff;
   text-decoration: none;
   font-size: 14px
}

@media (max-width:600px) {

   .output-row,
   .url-row {
      flex-direction: column;
      align-items: stretch
   }

   .output-row button,
   .output-row input[type=text] {
      width: 100%
   }

   .menu-bar a {
      font-size: 14px;
      padding: 6px 4px
   }
}

@media (max-width:370px) {
   .menu-bar a {
      font-size: 10px;
      padding: 6px 4px
   }
}

.hero2 {
   min-height: auto;
   background: #f9fafb;
   color: #fff;
   flex-direction: column;
   align-items: center;
   padding: 30px 100px 50px
}

.hero2 h3 {
   font-size: 16px;
   color: #555
}

.hero2 p {
   font-size: 14px;
   color: #555;
   margin-top: 5px;
   margin-bottom: 10px
}

@media (max-width:768px) {
   .sidebar-btn {
      display: block;
      order: 1;
      width: 6%
   }

   nav ul {
      display: none
   }

   .logo {
      order: 2;
      margin-left: auto
   }

   header .container {
      flex-direction: row;
      justify-content: space-between;
      align-items: center
   }

   .hero2 {
      padding: 20px
   }
}