html {
   scroll-behavior: smooth;
}

.icon {
   width: 1em;
   height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}

.btn {
   height: 48px;
   border-radius: 24px;
   border: none;
   padding: 0 24px;
   background: #546f8a;
   cursor: pointer;
}

.btn-small {
   height: 32px;
   border-radius: 16px;
   border: none;
   padding: 0 16px;
   background: #546f8a;
   cursor: pointer;
   font-size: 14px;
}

.btn:hover, .btn-small:hover {
   background: #c7e075;
}

.theme-color {
   color: #fff;
}

.black-color {
   color: #000;
}

.logo-holder img{
   max-height: 100%;
   cursor: pointer;
}

.white-color-bg {
   background: #fff;
}

.header {
   height: 100px;
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   background: none;
   display: flex;
   justify-content: space-between;
   z-index: 4;
   transition: all 0.2s;
}

.header-top {
   height: 70px;
   background: #000;
}

.menu {
   display: flex;
   justify-content: space-around;
   align-items: center;
   height: 100%;
   width: 240px;
   font-size: 36px !important;
   position: relative;
}
.menu a:hover,
.menu a:visited,
.menu a{
   text-decoration: none;
   color: #fff;
}
.menu a{
   font-size: 30px;
}

.toggle-menu-close svg {
   font-size: 36px;
}

.menu svg {
   cursor: pointer;
}

.toggle-menu {
   position: fixed;
   top: 0;
   right: -750px;
   width: 750px;
   height: 100%;
   background: #000;
   transition: right 0.2s;
   z-index: 5;
}

.toggle-menu-open {
   right: 0 !important;
}

.toggle-menu-close {
   text-align: right;
   padding: 8px 16px;
}

.toggle-menu-close svg{
   cursor: pointer;
}

.menu-logo-holder {
   display: flex;
   justify-content: center;
   align-items: center;
}

.menu-list {
   list-style: none;
   padding: 0;
   text-align: center;
   font-size: 32px;
   font-weight: bolder;
}

.menu-list a {
   line-height: 56px;
   text-decoration: none;
   color: #fff;
}

.menu-list a:hover {
   border-bottom: 2px solid #546f8a;
}

.menu-footer {
   width: 100%;
   padding: 16px 0;
   position: absolute;
   bottom: 0;
   text-align: center;
}


.footer {
   background: #000;
   text-align: center;
   padding-top: 24px;
   padding-bottom: 8px;
}

.social-icon svg, .menu-footer svg{
   font-size: 42px;
   margin: 16px;
   color: #546f8a;
   cursor: pointer;
}

.social-icon svg:hover, .menu-footer svg:hover {
   color: #dfff77;
}

.terms {
   padding: 12px 0;
}

.terms a{
   color: #fff;
   text-decoration: none;
}

.terms a:hover {
   text-decoration: underline;
}

.copyright {
   font-size: 14px;
   color: #9a9a9a;
}

.main-content-offset {
   margin-left: -750px;
}

.footer-logo img{
   padding: 0 12px;
}

@media screen and (max-width: 479px){
   .menu a{
      font-size: 18px;
   }
   .toggle-menu {
      right: -300px;
      width: 300px;
   }
   .main-content-offset {
      margin-left: -300px;
   }
   .menu-logo-holder{
      flex-wrap: wrap;
   }
   .menu-logo-holder img{
      max-width: 100%;
      margin-bottom: 16px;
   }
   .menu-list a{
      font-size: 24px;
      line-height: 42px;
   }
}