body, html {
    font-size: 16px;
    color: #000;
    line-height: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    scroll-behavior: smooth;
    transition: 0.1s ease-in-out 0.1s;
    margin: 0;
}

#wrapper-navbar{background: #12122e;text-align: center;position: relative;}
#wrapper-navbar .navbar {position: relative;padding: 10px 0;-webkit-transition: width 1s, height 1s;transition: width 1s, height 1s;-moz-transition: width 1s, height 1s;-ms-transition: width 1s, height 1s;-o-transition: width 1s, height 1s;height: 600px;margin-bottom: 0px;min-height: auto;border: 0  !important;}
#wrapper-navbar .navbar-expand-md {-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-flow: row nowrap;flex-flow: row nowrap;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}
#wrapper-navbar .navbar .navbar-box {position: relative;display: block;top: 0;}

/*#wrapper-navbar .navbar>.container, 
#wrapper-navbar .navbar>.container-fluid {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-align: center;-ms-flex-align: center;align-items: center;
-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}*/

.navbar-brand{margin: 150px auto 0;margin: 0 auto;height: 322px;transition: 1.2s;}
.header-right{position: absolute;top: 0;right: 0;z-index: 10;}
.main-title{font-size: 30px;color: #FFFFFF;margin: 22px 0 200px;line-height: 40px;font-weight: 600;text-transform: uppercase;letter-spacing: 11px;}
.section-title{font-size: 30px;color: #FFFFFF;margin: 0 0 50px;line-height: 40px;font-weight: 700;text-transform: uppercase;text-align: center;}
#wrapper-navbar .navbar.sticky a.navbar-brand{height: 66px;overflow: hidden;}
#wrapper-navbar .navbar.sticky .navbar-brand img {padding-top: 0px;width: 120px;}
#wrapper-navbar .stiky-logo {display:none;}

.title-home-main {font-size: 24px;color: #FFFFFF;margin: 60px 0 20px;line-height: 40px;font-weight: 600;text-transform: uppercase;letter-spacing: 10px;transition: all 1s ease;}
#wrapper-navbar .navbar .navbar-brand img {-webkit-transition: width 1s, height 1s;transition: width 1s, height 1s;-moz-transition: width 1s, height 1s;-ms-transition: width 1s, height 1s;-o-transition: width 1s, height 1s;height: auto;width: 200px;padding-top:150px;transition: 1.2s;}


#wrapper-navbar .navbar .navbar-brand img{ padding-top: 50px;}
.sticky_new a.navbar-brand img {height: 157px !important;width: auto !important;transition: all 1s ease !important;}
#wrapper-navbar.sticky_new {background: #63616c;}   
#wrapper-navbar.sticky_new .navbar {height: 450px;}
#wrapper-navbar.sticky_new .navbar .navbar-brand {display: none;}
#wrapper-navbar.sticky_new .navbar .stiky-logo {display: block;padding-top: 50px;padding-bottom: 20px;}
#wrapper-navbar.sticky_new .navbar .stiky-logo img {height: 60px;}
#wrapper-navbar.sticky_new .title-home-main {opacity: 0;height: 0;margin: 0px;}
#wrapper-navbar.sticky_new #en-sticky {position: fixed;top: -30px; background: #12122e;width: 100%;max-width: 100%;background: #63616c; display: block;z-index: 9;}


#menuToggle {display: block;position: fixed;top: 35px;right: 50px;z-index: 1;-webkit-user-select: none;user-select: none;margin: 0px;padding: 0px;border-radius: 5px;background: none;}
#menuslide {position: fixed;width: auto;margin: -50px 0 0 0;padding: 12px 100px 20px 20px; right: 0px;background: none;list-style-type: none;-webkit-font-smoothing: antialiased;transform-origin: 0% 0%;transform: translate(100%, 0);transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);height: auto;}
#menuToggle input {display: block;width: 45px;height: 45px;position: absolute;top: -10px;left: -5px;cursor: pointer;opacity: 0;z-index: 2; -webkit-touch-callout: none;}
#menuToggle span {display: block;width: 35px;height: 5px;border-radius: 5px;margin-bottom: 5px;position: relative;background: #fff;z-index: 1;transform-origin: 4px 0px;transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),opacity 0.55s ease;}
#menuToggle span:first-child {transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(2){transform-origin: 0% 100%;}
#menuToggle input:checked ~ span {opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #ffffff;}
#menuToggle input:checked ~ span:nth-last-child(3) {opacity: 0;  transform: rotate(0deg) scale(0.2, 0.2);}
#menuToggle input:checked ~ span:nth-last-child(2) {opacity: 1; transform: rotate(-45deg) translate(0, -1px);}

#menuslide {position: fixed;width: auto;padding: 12px 100px 20px 20px;right: 0px;background: none;list-style-type: none;-webkit-font-smoothing: antialiased;transform-origin: 0% 0%;transform: translate(100%, 0);transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);height: auto;}
#menuToggle input:checked ~ ul {transform: none;  opacity: 1;}
#menuToggle input:checked ~ span {background: #fff;}
#menuToggle input:checked ~ span:after {content:"";display: block;top: -17px;position: relative;}
#menuToggle input:checked ~ span:nth-child(1) {}
#menuToggle input:checked ~ span:nth-child(2):after {background:none;}
#menuToggle input:checked ~ span:nth-child(3):after {background:none;}

#menuslide ul > li > a {padding: 15px;margin: 5px;color: #575757;text-transform: uppercase;}
#menuslide ul li.active a {color: #fff;}

#menuslide {display: flex; justify-content: center;}
#menuslide li {margin: 0 15px;}
#menuslide li a { display: block; font-size: 16px; padding: 10px 15px; color: #a8a7a7; font-weight: 800; text-decoration: none; text-transform: uppercase; transition: background-color 0.3s;}
#menuslide li a:hover { color: #fff;}
#menuslide li a:after {content: "|" !important;left: auto;position: absolute;top: 24px;margin-left: 25px;}
#menuslide li:last-child a:after {display: none;}

.services_row{ overflow: hidden;}
.services_row .service_column{position: relative;}
.services_row .service_column .servise_texts h3.widget-title {position: absolute;top: 50%;width: 100%;left: 0;color: #fff;font-size: 20px;text-shadow: 10px 11px 13px black;text-transform: uppercase;letter-spacing: 2px;transition-delay: 0s;transition-duration: 0.5s;font-weight: bold;z-index: 99999;text-align: center;z-index: 1;}
.services_row .service_column:hover .servise_texts h3.widget-title {transform: translateY(-70px);-webkit-transform: translateY(-70px);top: 26%;}
.services_row .service_column .servise_img img {transition-delay: 0s;transition-duration: 0.5s;}
.services_row .service_column:hover .servise_img img {transform: translateY(-270px);-webkit-transform: translateY(-270px);filter: grayscale(1);}
.services_row .service_column .servise_texts .textwidget{width: 100%;padding: 15px 15px 50px;background: #fff;color: #040308;font-size: 14px;line-height: 20px;position: absolute;top: 550px;opacity: 0;transition-delay: 0s;transition-duration: 0.5s;}
.service_column:hover .servise_texts .textwidget{opacity: 1;transform: translateY(-294px);-webkit-transform: translateY(-294px);align-items: center;overflow: auto;    height: 100%;}


  

/* Mobile */
@media only screen and (max-width: 767px)
{   
    #wrapper-navbar .navbar {height: 350px;}
    #wrapper-navbar.sticky_new .navbar { height: 350px;}
    #menuslide { display: flex; justify-content: center; flex-direction: column; position: fixed; padding: 0px; width: 100%; height: 250px; background-color: #12122e;}
    #menuslide li {margin: 0px;}
    #menuslide li a:after {display: none;}
    #menuslide li a { padding: 23px 0px; background-color: #12122e; color: #ffffff;}
    #wrapper-navbar .navbar .navbar-brand img {padding-top: 30px;}
    .title-home-main { font-size: 18px; margin: 20px 0 20px; line-height: 26px; font-weight: 600; letter-spacing: 2px; transition: all 1s ease;}
    .services_row .service_column .servise_img img {height: 250px !important;object-fit: cover;}
    .services_row .service_column:hover .servise_img img {transform: translateY(0px);-webkit-transform: translateY(0px);filter: grayscale(1);}
    .services_row .service_column .servise_texts h3.widget-title {top: 108px;width: 70%;margin: 0 auto;left: 0;right: 0;}
    .services_row .service_column:hover .servise_texts h3.widget-title {transform: translateY(-40px);-webkit-transform: translateY(-40px); top: 150px;}
    .services_row .service_column .servise_texts .textwidget { padding: 15px 15px 10px;position: relative;top: 0px;display: none;}
    .services_row .service_column:hover .servise_texts .textwidget {transform: translateY(0);-webkit-transform: translateY(0);display: block !important;}

}