* {margin: 0;padding: 0;box-sizing: border-box;}
  /* navbar */
  /* .sticky {position: -webkit-sticky;position: sticky;top: 0;z-index: 999;} */
  .menu-btn {position: relative;display: none;justify-content: center;align-items: center;width: 1.5rem;height: 1.5rem;cursor: pointer;z-index: 2;}
  .navbar .menu-btn__lines::before,
  .navbar .menu-btn__lines::after {content: "";position: absolute;}
  .navbar .menu-btn__lines,
  .navbar .menu-btn__lines::before, 
  .navbar .menu-btn__lines::after {width: 1.5rem;height: 0.1rem;background: #FFF;transition: all 0.4s ease-in-out;}
  .navbar .menu-btn__lines::before {transform: translateY(-0.5rem);}
  .navbar .menu-btn__lines::after {transform: translateY(0.5rem);}
  .navbar .menu-items {display: flex;align-items: center;}
  .navbar ul li {list-style: none;transition: 0.3s ease;}
  .navbar ul li .arrow {transition: all 0.3s ease-out;}
  .navbar ul li a {text-decoration: none;color: #112f48;}
    /* dropdown menu */
  .navbar .dropdown {position: relative;}
  .expand-btn:after {content: " \25BE";opacity: 0.4;margin-left: 5px;}
  .navbar .dropdown-menu,
  .menu-right {position: absolute;background: #e9ecef;width: 190px;line-height: 30px;border-radius: 0 0 5px 5px;top: 65px;border-top: 1px solid white;left: 0;opacity: 0;visibility: hidden;display: block;transition: all 0.4s ease;-webkit-box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);}
  .navbar .menu-right {top: 0;left: 100%;}
  .navbar .dropdown-menu,
  .menu-left {left: unset;right: 0;}
  .navbar .menu-left {left: -100%;}
  .navbar .menu-item {display: flex;justify-content: space-between;width: 100%;padding: 0.5rem 1.5rem;font-size: 18px;font-family: "Roboto";font-weight: 400;color: #FFF;}
  .navbar .menu-item:hover {color: #A9CF46;}
  .menu-item.first-item {padding: 1.5rem 1rem;font-family: 'Roboto';font-weight: 400;font-size: 20px;line-height: 19px;color: #FFFFFF;text-transform: uppercase;}
  .navbar .dropdown:hover .dropdown-menu {opacity: 1;visibility: visible;}
  .navbar .dropdown-right:hover .menu-right {left: 100%;opacity: 1;visibility: visible;}
  .navbar .dropdown-right:hover .menu-left {left: -100%;}
  /* mega menu  */
  .navbar .mega-menu {position: absolute;right: 80px;width: 75%;top: 120px;border-top: 1px solid #ffffff;opacity: 0;visibility: hidden;transition: all 0.4s ease-out 0s, visibility 0.1s linear 0s;}
  .mega-menu .content {background: #67552F;padding: 3rem;display: grid;grid-template-columns: repeat(4, 1fr);gap: 1rem;width: 100%;justify-content: space-between;-webkit-box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);}
  .blog .content {grid-template-columns: repeat(4, 1fr);}
  .content .col {display: flex;flex-direction: column;justify-content: space-between;line-height: 3rem;}
  .content .col .img-wrapper {display: block;position: relative;width: 100%;height: 20vw;overflow: hidden;}
  .content .col .img {position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
  .content .col img {width: 100%;transition: transform 0.3s ease-in-out;}
  .content .col .img-wrapper:hover img {transform: scale(1.1);}
  .content .col .menu-title {color: #A9CF46;font-size: 24px;font-weight: 500;border-bottom: 1px solid;margin-bottom: 10px;padding-bottom: 10px;line-height: normal;width: 100%;display: block;transition: 0.3s;}
  .content .col .menu-title:hover{color: #FFF;}
  .content .col p {line-height: 1.2rem;margin-top: 5px;color: #112f48;}
  .content .col .read-more {font-size: 16px;display: flex;padding-top: 1rem;color: #03a9f4;transition: color 0.3s ease;justify-content: flex-end;padding-right: 10px;}
  .col .mega-links{height: 110px;}
  .col .mega-links li,
  .col .mega-links li a {padding: 0;font-size: 18px;font-family: "Roboto";font-weight: 500;}
  .menu-items li:hover .mega-menu {opacity: 1;visibility: visible;z-index: 1;}
  .content .col .read-more:hover {color: #ff5722;}
  /* animation menu hamburger */
  .menu-btn.open .menu-btn__lines {transform: translateX(1rem);background: transparent;}
  .menu-btn.open .menu-btn__lines::before {transform: rotate(45deg) translate(-0.5rem, 0.5rem);background: #ffffff;}
  .menu-btn.open .menu-btn__lines::after {transform: rotate(-45deg) translate(-0.5rem, -0.5rem);background: #ffffff;}
  
  /* Responsive style */
    @media screen and (max-width: 1024px) {
    .navbar {padding:0;}
    a.logo img {width: 100px;}
    .overflow {overflow: hidden;}
    .overlay {position: fixed;left: 0;right: 0;top: 0;bottom: 0;z-index: 500;background-color: rgba(0, 0, 0, 0.6);opacity: 0;visibility: hidden;transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;}
    .overlay--active {opacity: 1;visibility: visible;z-index: -1;}
    .menu-btn {display: flex;}
    .navbar .menu-items {position: fixed;height: 100%;max-height: initial;overflow-y: auto;width: 80%;top: 0;left: -100%;background: #000000;display: block;transform: translateX(-100vh);transition: 0.3s ease-out;padding-bottom: 100px;font-size: 18px;font-weight: 400;font-family: "Roboto";z-index: 3;}
    .menu-items.open {transform: translateY(0);left: 0;}
    .menu-items li:first-child {margin-top: 20px;}
    .menu-items li a {padding: 10px 1rem;display: block;font-size: 18px;}
    .menu-items .dropdown-right .right-arrow {transform: rotate(90deg);}
    .menu-item.first-item {padding: 1rem 1rem;}
    /* DROPDOWN, MEGA MENUS */
    .menu-items .dropdown-menu,
    .menu-items .menu-right,
    .menu-items .mega-menu {position: static;opacity: 1;top: 4rem;visibility: visible;margin-left: -18px;width: auto;max-height: 0;transform: scaleX(0);transform-origin: left;overflow: hidden;transition: all 0.5s ease;}
    .menu-items .dropdown-menu,
    .menu-items .menu-right {padding-left: 1rem;width: 102%;margin-left: -10px;}
    .menu-items .mega-menu .col {padding-left: 1rem;}
    .expand-btn.open + .sample {max-height: 100%;transform: scaleZ(1);}
    .expand-btn.open + .blog.sample {max-height: 100%;transform: scaleZ(1);max-width: fit-content;}
    .navbar .sample {border-top: none;}
    .sample li {margin: 0;}
    .sample li:last-child {border-bottom: none;}
    .sample li a {font-size: 1rem;}
    .mega-menu .content {grid-template-columns: auto;padding: 1rem 1rem 0 1rem;gap: 0;}
    .mega-menu .content .col {width: 100%;padding-top: 1rem;}
    .col .mega-links li,
    .col .mega-links li a {padding: 0;font-size: 14px;line-height: 2.3;}
    .col .mega-links li {margin: 0;}
    .content .col .menu-title{font-size: 16px;}
    .content .col{line-height: normal;}
    .menu-item.first-item{font-size: 20px;}
  }

  @media (min-width:1280px) and (max-width:1440px) {
    .content .col .menu-title{font-size: 16px;}
    .col .mega-links li, .col .mega-links li a{font-size: 14px;line-height: 2.2;}
    .mega-menu .content{padding: 20px;}
    .navbar {padding: 0 !important;transition: 0.5s;}
    .navbar.sticky {height: 70px;position: fixed;background-color: #67552F;width: 100%;left: 0;top: 0;padding: 0 !important;z-index: 9999;box-shadow: 0px 14px 19px rgba(0, 0, 0, 0.25);}
    .navbar.sticky .container{margin: 0 auto !important;}
    .navbar.sticky .navbar .menu-btn__lines,
    .navbar .menu-btn__lines::before, 
    .navbar .menu-btn__lines::after {background-color: #000;}
    .navbar.sticky  .logo img{max-width: 130px;position: absolute;top: 0;}
    .navbar.sticky .mega-menu{right: 3%;width: 75%;top: 70px;}
    .navbar.sticky .hero-section{height: 830px !important;}
}
@media (min-width:1441px) {
  .content .col .menu-title{font-size: 16px;}
  .col .mega-links li, .col .mega-links li a{font-size: 15px;line-height: 2.2;}
  .mega-menu .content{padding: 20px;}
  .navbar {padding: 0 !important;transition: 0.5s;}
  .navbar.sticky {height: 70px;position: fixed;background-color: #67552F;width: 100%;left: 0;top: 0;padding: 0 !important;z-index: 9999;box-shadow: 0px 14px 19px rgba(0, 0, 0, 0.25);}
  .navbar.sticky .container{margin: 0 auto !important;}
  .navbar.sticky .navbar .menu-btn__lines,
  .navbar .menu-btn__lines::before, 
  .navbar .menu-btn__lines::after {background-color: #000;}
  .navbar.sticky  .logo img{max-width: 130px;position: absolute;top: 0;}
  .navbar.sticky .mega-menu{right: 15%;width: 60%;top: 70px;}
  .navbar.sticky .hero-section{height: 830px !important;}
}
  @media (min-width:1200px) and (max-width:1440px) {
    .navbar .mega-menu{width: 80%;right: 0;}
  }