/* GOOGLE FONTS */
@import url(https://fonts.googleapis.com/css?family=Amiri:400,400italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

/* ============================================================
   GLOBAL
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

a[href^="tel:"] { color: inherit; text-decoration: none; }
::selection { background: #999999 !important; color: #000; }
::-moz-selection { background: #999999 !important; color: #000; }

a { color: #000000; text-decoration: underline; outline: none; }
a:hover { color: #4c4b4b; text-decoration: none; outline: none; }

body {
  margin: 0;
  padding: 0;
  background: #fff;
  border: 0;
  font: 15px 'Amiri', Arial, Helvetica, sans-serif;
  color: #000000;
  line-height: 1.6666667;
  min-width: 320px;
}

.container { position: relative; min-width: 320px; }
#main { margin: 0 auto; position: relative; overflow: hidden; }

/* Animated items */
.animated { visibility: hidden; }
.visible { visibility: visible; }

/* ============================================================
   TYPOGRAPHY — single definition each
   ============================================================ */
h1 {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #35373e;
  line-height: 1;
  padding: 20px 0 25px;
  margin: 0 0 25px;
  position: relative;
  text-transform: uppercase;
  background: url(../images/kand3.png) left bottom no-repeat;
  letter-spacing: 2px;
}

h2 {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #232323;
  line-height: 1.2;
  padding: 15px 0;
  margin: 0 0 20px;
  position: relative;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
}

h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #232323;
  margin: 0 0 15px;
}

h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #232323;
  margin: 0 0 10px;
}

h5 {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #666;
  line-height: 1;
  padding: 0 0 10px;
  margin: 0 0 5px;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 1px;
}

p {
  margin: 0 0 15px;
  font-size: 15px;
  color: #444;
  line-height: 1.7;
}

/* ============================================================
   HEADER & STICKY NAV
   ============================================================ */
#top { position: relative; }

.front #top {
  background-image: url(../images/bg3.jpg);
  background-size: cover;
  background-attachment: scroll;
  background-repeat: repeat-y;
  background-position: center center;
}
.support-fixed.front #top { background-attachment: fixed; }

#top2 {
  z-index: 100;
  background: none;
  transition: all 0.3s ease-out;
}

.is-sticky #top2 {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

#top2-sticky-wrapper { height: auto !important; }

.top2 {
  padding-top: 40px;
  padding-bottom: 1px;
  transition: all 0.3s ease-out;
}
.is-sticky .top2 { padding-top: 14px; padding-bottom: 14px; }

header { float: left; position: relative; z-index: 31; }

/* Keep nav text readable when sticky */
.is-sticky .navbar_ .nav > li > a { color: #000 !important; }

/* Sticky wrapper */
.sticky-wrapper { height: auto !important; min-height: 0 !important; }

/* Scroll offset for anchor links */
#about, #services, #services2_wrapper, #what_wrapper, #features,
#difference, #gallery, #tweets_section, #pricelist,
#contact, #google_map, #department, #counters {
  scroll-margin-top: 80px;
}

/* ============================================================
   MAIN MENU
   ============================================================ */
.navbar_ {
  margin: 0; padding: 0; background: none; border: none;
  position: relative; z-index: 30; min-height: 0; float: right; text-align: center;
}
.navbar_ .navbar-toggle {
  background: #161616; border: none; box-shadow: none;
  margin-top: 4px; margin-bottom: 4px; margin-right: 5px;
}
.navbar_ .navbar-toggle:hover,
.navbar_ .navbar-toggle:focus { background: #303030; }
.navbar_ .navbar-toggle .icon-bar { background: #fff; }

.navbar-collapse_ { padding-left: 0; padding-right: 0; border: none; }

.navbar_ .nav {
  position: relative; margin: 0; padding: 0;
  display: inline-block; vertical-align: top; float: none;
}
.navbar_ .nav > li {
  position: relative; display: block; float: left;
  white-space: nowrap; background: none; margin-left: 45px;
}
.navbar_ .nav > li:first-child { margin-left: 0; }

.navbar_ .nav > li > a {
  display: block; text-decoration: none; background: none;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 14px; line-height: 20px; color: #000;
  text-shadow: none; padding: 10px 0; border: none; margin: 0;
  text-align: center; position: relative; z-index: 2;
  text-transform: uppercase; letter-spacing: 2px;
  transition: all 0.3s ease-out;
}
.navbar_ .nav > li > a em {
  display: inline-block; width: 7px; height: 5px;
  background: url(../images/caret1.png) center center no-repeat;
  margin-left: 10px; vertical-align: middle;
}
.navbar_ .nav > li > a:hover,
.navbar_ .nav > li > a:focus,
.navbar_ .nav > li.sfHover > a,
.navbar_ .nav > li.active > a {
  color: #000; text-decoration: underline;
  box-shadow: none; background: none;
}

/* Dropdown */
.sub-menu ul {
  position: absolute; display: none; left: 0; top: 100%;
  list-style: none; z-index: 100; margin: 0; padding: 0;
  background: #3e3e40; text-align: left; min-width: 200px;
}
.sub-menu li {
  margin: 0; position: relative; display: block;
  border-top: 1px solid #515152;
}
.sub-menu li:first-child { border-top: none; }
.sub-menu li a {
  display: block; font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 11px; line-height: 20px;
  color: #fff; text-decoration: none; padding: 10px 20px;
  text-transform: uppercase; letter-spacing: 2px;
  transition: all 0.3s ease-out;
}
.sub-menu li a:hover { color: #000; background: #fff; }
.sub-menu-2 > ul { left: 100%; top: 0; background: #3e3e40; }

/* Bootstrap dropdown */
.navbar-nav > li.dropdown:hover > .dropdown-menu {
  display: block;
  background: #111;
  padding: 10px 0;
  border-radius: 0;
  min-width: 200px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.navbar-nav .dropdown-menu > li > a {
  color: #fff; padding: 10px 20px; font-size: 14px;
  transition: all 0.3s ease;
}
.navbar-nav .dropdown-menu > li > a:hover {
  background-color: #4a2b7a; color: #fff;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs1_wrapper {
  background: #e6e6e6; padding: 8px 0;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  text-transform: uppercase; position: relative; z-index: 1;
}
.breadcrumbs1 {
  padding: 0; margin-top: 0; line-height: 20px;
  color: #232323; font-size: 14px; background: none;
}
.breadcrumbs1 a { color: #232323; text-decoration: none; }
.breadcrumbs1 a:hover { color: #232323; text-decoration: underline; }
.breadcrumbs1 span { display: inline-block; margin: 0 5px; color: #615e5e; }

/* Non-front inner pages: push content below sticky header */
body.not-front #main,
body.not-front #content { padding-top: 100px; }

/* ============================================================
   CONTENT
   ============================================================ */
#content { position: relative; padding-top: 30px; padding-bottom: 40px; background: #fff; }
#google_map { position: relative; width: 100%; height: 570px; }

/* ============================================================
   LAYOUT TITLES
   ============================================================ */
.title1 {
  text-align: center; color: #35373e; font-weight: 700;
  font-family: 'Montserrat', sans-serif; font-size: 22px; line-height: 1;
  text-transform: uppercase; padding-top: 20px; padding-bottom: 30px;
  margin-bottom: 15px; background: url(../images/kand1.png) center bottom no-repeat;
  letter-spacing: 2px;
}
.title1:hover { color: purple; }

.title2 {
  text-align: center; color: #777777; font-size: 19px; margin-bottom: 15px;
}
.title2:hover { color: #000; }

.title3 {
  text-align: left; color: #35373e; font-weight: 700;
  font-family: 'Montserrat', sans-serif; font-size: 22px; line-height: 1;
  text-transform: uppercase; padding-bottom: 30px; margin-bottom: 15px;
  background: url(../images/kand4.png) left bottom no-repeat; letter-spacing: 2px;
}

.m {
  display: block; font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 24px; color: #35373e; line-height: 3; padding: 20px 0 25px;
  margin: 0 0 25px; position: relative; text-transform: uppercase;
  background: url(../images/kand1.png) center bottom no-repeat; letter-spacing: 5px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-default.btn0 {
  font-family: 'Montserrat', sans-serif; display: inline-block;
  color: #000; font-size: 12px; line-height: 20px; font-weight: 700;
  padding: 12px 20px; text-decoration: none; border-radius: 0;
  text-transform: uppercase; background: none;
  border: 3px solid #000; letter-spacing: 1px; margin: 0 5px;
  transition: all 0.3s ease-out;
}
.btn-default.btn0:hover { color: #fff; background: #000; }

.btn-default.btn1 {
  font-family: 'Montserrat', sans-serif; display: inline-block;
  color: #fff; font-size: 11px; line-height: 20px; font-weight: 700;
  padding: 8px 20px; text-decoration: none; border-radius: 0;
  text-transform: uppercase; background: none;
  border: 2px solid #fff; letter-spacing: 1px;
  transition: all 0.3s ease-out;
}
.btn-default.btn1:hover { color: #000; background: #fff; }

.btn-default.btn2 {
  font-family: 'Montserrat', sans-serif; display: inline-block;
  color: #141414; font-size: 12px; line-height: 20px; font-weight: 700;
  padding: 0 30px 0 0; text-decoration: none; border-radius: 0;
  text-transform: uppercase; background: url(../images/btn2.png) right center no-repeat;
  letter-spacing: 1px;
}
.btn-default.btn2:hover { color: #000; text-decoration: underline; }

.btn-default.btn3 {
  font-family: 'Montserrat', sans-serif; display: inline-block;
  color: #4c4b4b; font-size: 10px; line-height: 20px; font-weight: 700;
  padding: 2px 15px; text-decoration: none; border-radius: 0;
  text-transform: uppercase; background: none;
  border: 2px solid #4c4b4b; letter-spacing: 1px;
  transition: all 0.3s ease-out;
}
.btn-default.btn3:hover { color: #fff; background: #000; border-color: #000; }

.btn-default.btn-cf-submit {
  display: inline-block; background: none; color: #232323;
  font-family: 'Montserrat', sans-serif; font-size: 11px; line-height: 20px;
  font-weight: 700; padding: 10px 20px; text-decoration: none; border-radius: 0;
  border: 2px solid #232323; text-transform: uppercase; letter-spacing: 2px;
  transition: all 0.3s ease-out;
}
.btn-default.btn-cf-submit:hover { background: #232323; color: #fff; }

.btn-default.btn-cf-submit3 {
  display: block; background: #fff; color: #4c4b4b;
  font-family: 'Montserrat', sans-serif; font-size: 10px; line-height: 20px;
  font-weight: 700; padding: 7px 15px; text-decoration: none; border-radius: 0;
  border: 2px solid #4c4b4b; text-transform: uppercase; letter-spacing: 2px;
  transition: all 0.3s ease-out;
}
.btn-default.btn-cf-submit3:hover { background: #000; color: #fff; border-color: #000; }

/* ============================================================
   BLOG
   ============================================================ */
.post { margin-bottom: 40px; border: 1px solid #dedede; border-radius: 3px; }
.post .post-image { position: relative; }
.post .post-image a {
  display: block; text-decoration: none; background: #000;
  border-radius: 3px 3px 0 0;
}
.post .post-image a img {
  position: relative; width: 100%; border-radius: 3px 3px 0 0;
  transition: all 0.3s ease-out;
}
.post .post-image a:hover img { opacity: 0.45; }
.post .post-image a em {
  display: block; position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  background: url(../images/zoom1.png) center center no-repeat;
  opacity: 0; transition: all 0.3s ease-out;
}
.post .post-image a:hover em { opacity: 1; }
.post .post-image-info { position: relative; margin-top: -20px; }
.post .post-image-info .post-image-date {
  display: inline-block; font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #000; padding: 10px 15px;
  background: #dfdfdf; border: 1px solid #000;
}
.post .post-story .post-story-info {
  text-align: center; padding: 0 20px 25px;
  background: url(../images/kand5.png) center bottom no-repeat; margin-bottom: 20px;
}
.post .post-story .post-story-info a {
  display: inline-block; padding-left: 20px;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
  text-transform: uppercase; color: #b4b4b4; text-decoration: none;
  letter-spacing: 2px; margin: 0 4px;
}
.post .post-story .post-story-info a:hover { color: #000; }
.post .post-story .post-story-info .by { background: url(../images/li_st1.png) left center no-repeat; }
.post .post-story .post-story-info .by:hover { background-image: url(../images/li_st1_over.png); }
.post .post-story .post-story-info .com_num,
.post .post-story .post-story-info .cat { background: url(../images/li_st2.png) left center no-repeat; }
.post .post-story .post-story-info .com_num:hover,
.post .post-story .post-story-info .cat:hover { background-image: url(../images/li_st2_over.png); }
.post .post-story .post-story-body { padding: 0 20px; }
.post .post-story .post-story-link { text-align: right; padding: 0 20px 20px; }
.post .post-tags { padding: 20px; }

.author-block { padding: 20px; }
.author-block .title {
  font-family: 'Montserrat', sans-serif; font-size: 16px; color: #232323;
  text-transform: uppercase; letter-spacing: 2px; padding-bottom: 20px;
}
.author-block figure { float: left; margin-right: 20px; }
.author-block figure img { border: 2px solid #000; border-radius: 2px; }
.author-block .caption { overflow: hidden; }
.author-block .caption .txt1 {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px;
  color: #232323; padding-bottom: 5px; text-transform: uppercase; letter-spacing: 2px;
}
.author-block .caption .txt2 { font-size: 14px; font-style: italic; }

.idea-block { padding: 20px; text-align: center; }
.idea-block .txt1 {
  font-family: 'Montserrat', sans-serif; font-size: 27px; letter-spacing: 3px;
  font-weight: 700; text-transform: uppercase; color: #232323;
}
.idea-block .txt2 { font-size: 17px; color: #4c4b4b; padding-bottom: 15px; }

.post-comments {
  font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase;
  color: #232323; font-size: 16px; letter-spacing: 2px; padding: 20px;
}

.comment-block { margin-bottom: 20px; padding: 20px; }
.comment-block.left1 { margin-left: 150px; }
.comment-block figure { float: left; margin-right: 20px; }
.comment-block figure img { border: 1px solid #504f4f; border-radius: 50%; }
.comment-block .caption { overflow: hidden; }
.comment-block .caption .top { padding-bottom: 10px; }
.comment-block .caption .top .top_left { float: left; }
.comment-block .caption .top .txt1 {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px;
  color: #232323; padding-bottom: 5px; text-transform: uppercase; letter-spacing: 2px;
}
.comment-block .caption .top .txt2 { font-size: 14px; }
.comment-block .caption .top .top_right { float: right; }

.live-comment { padding: 20px; }
.live-comment .live-comment-title {
  font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase;
  color: #232323; font-size: 16px; letter-spacing: 2px; padding-bottom: 20px;
}

.prev_next { padding: 0; margin: 0; list-style: none; }
.prev_next li { display: block; }
.prev_next .prev { float: left; }
.prev_next .next { float: right; }
.prev_next a {
  display: block; border: 1px solid #141414; padding: 7px 10px;
  color: #141414; font-family: 'Montserrat', sans-serif;
  text-transform: uppercase; font-size: 12px; letter-spacing: 1px; text-decoration: none;
}
.prev_next a:hover { background: #000; border-color: #000; color: #fff; }

.pager { display: block; text-align: left; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; }
.pager li { margin-right: 5px; float: left; }
.pager li > a {
  padding: 3px; border-radius: 0; background: #fff; color: #4c4b4b;
  text-align: center; min-width: 35px; line-height: 27px;
  text-decoration: none; border: 1px solid #4c4b4b;
}
.pager li > a:hover { color: #fff; background: #000; }
.pager li.active > a { background: #000; color: #fff; cursor: default; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar-block { margin-bottom: 50px; position: relative; }
.sidebar-block .sidebar-block-title {
  margin-bottom: 20px; font-family: 'Montserrat', sans-serif;
  font-size: 16px; line-height: 1; color: #232323; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
}

.ul1 { padding: 0; margin: 0; list-style: none; }
.ul1 > li {
  font-size: 11px; font-family: 'Montserrat', sans-serif; letter-spacing: 2px;
  font-weight: 700; line-height: 20px; color: #b4b4b4; text-transform: uppercase;
}
.ul1 > li a {
  color: #b4b4b4; text-decoration: none; display: block;
  padding: 7px 0 7px 20px; background: url(../images/li_st1.png) left center no-repeat;
  transition: all 0.3s ease-out;
}
.ul1 > li a:hover { color: #000; background-image: url(../images/li_st1_over.png); }

.recent { padding: 0; margin: 0; list-style: none; }
.recent li { display: block; float: left; padding: 0 2px 2px 0; }
.recent li a { display: block; text-decoration: none; }
.recent li a figure { position: relative; background: #6b6c6c; border-radius: 3px; }
.recent li a figure img { position: relative; border-radius: 3px; transition: all 0.3s ease-out; }
.recent li a:hover figure img { opacity: 0.2; }
.recent li a figure em {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: url(../images/zoom2.png) center center no-repeat;
  opacity: 0; transition: all 0.3s ease-out;
}
.recent li a:hover figure em { opacity: 1; }

.latest { margin-bottom: 20px; border-bottom: 1px solid #f2f2f2; padding-bottom: 20px; }
.latest a { display: block; text-decoration: none; }
.latest a .txt1 {
  color: #4c4b4b; font-weight: 700; font-size: 16px; margin-bottom: 7px;
  font-style: italic; padding-left: 15px;
  background: url(../images/li_st1_over.png) left center no-repeat;
}
.latest a .txt2 { color: #999999; font-size: 13px; transition: all 0.3s ease-out; }
.latest a:hover .txt2 { color: #000; }

.tags { display: block; margin: 0; padding: 0; list-style: none; text-align: left; }
.tags li { display: inline-block; margin: 0 5px 5px 0; float: left; }
.tags li a {
  display: inline-block; background: #fff; border: 2px solid #4c4b4b;
  padding: 9px 12px; font-weight: 700; color: #4c4b4b; border-radius: 0;
  text-decoration: none; font-size: 10px; font-family: 'Montserrat', sans-serif;
  letter-spacing: 1px; text-transform: uppercase; transition: all 0.3s ease-out;
}
.tags li a:hover { background: #000; color: #fff; border-color: #000; }

.feed { margin-bottom: 20px; border-bottom: 1px solid #f2f2f2; padding-bottom: 20px; padding-left: 50px; background: url(../images/feed.png) left top no-repeat; }
.feed a { display: block; text-decoration: none; }
.feed a .txt1 { color: #000; font-size: 16px; margin-bottom: 0; transition: all 0.3s ease-out; }
.feed a .txt2 { color: #000; font-size: 16px; }
.feed a:hover .txt2 { color: #000; }

.counters { display: block; margin: 0; padding: 0; list-style: none; text-align: left; }
.counters li { display: block; width: 50%; float: left; }
.counters li a { display: block; text-decoration: none; border: 2px solid transparent; padding: 15px 10px; }
.counters li a:hover { border-color: #000; }
.counters li a figure { float: left; color: #4c4b4b; font-size: 35px; line-height: 1; padding-top: 4px; }
.counters li a:hover figure { color: #000; }
.counters li a figure i { font-size: inherit; line-height: inherit; }
.counters li a .caption {
  overflow: hidden; text-align: right; color: #4c4b4b; font-weight: 700;
  text-transform: uppercase; font-family: 'Montserrat', sans-serif; letter-spacing: 1px;
}
.counters li a:hover .caption { color: #000; }
.counters li a .caption .txt1 { font-size: 15px; }
.counters li a .caption .txt2 { font-size: 11px; }

/* ============================================================
   FRONT SLIDER / MISSION
   ============================================================ */
.front-slider { position: absolute; left: 0; top: 50%; width: 100%; margin-top: -100px; }
.subpage-slider { position: relative; height: 230px; }

.mission_prev, .mission_next {
  display: block; width: 40px; height: 100px; position: absolute;
  left: 0; top: 50%; margin-top: -50px; background: rgba(0, 0, 0, 0.2);
  z-index: 2; transition: all 0.3s ease-out;
}
.mission_next { left: auto; right: 0; }
.mission_prev:after, .mission_next:after {
  content: ''; display: block; width: 100%; height: 100%;
  background: url(../images/prev.png) center center no-repeat;
}
.mission_next:after { background: url(../images/next.png) center center no-repeat; }
.mission_prev:hover, .mission_next:hover { background: #000; }

#mission .carousel-box { position: relative; }
#mission .carousel-box .inner { position: relative; overflow: visible; max-width: none; margin: 0; }
#mission .carousel.main { position: relative; overflow: visible; margin: 0; padding: 0; }
#mission .caroufredsel_wrapper { padding: 0; margin: 0; overflow: visible !important; }
#mission .caroufredsel_wrapper ul { padding: 0; margin: 0; }
#mission .carousel-box ul li { float: left; display: inline-block; position: relative; width: 100%; }

.mission .mission_inner { text-align: center; color: #000; }
.mission .mission_inner .txt1 { font-family: 'Montserrat', sans-serif; font-size: 60px; font-weight: 700; }
.mission .mission_inner .txt2 { font-family: 'Amiri', sans-serif; font-size: 20px; font-weight: 700; font-style: italic; }
.mission .mission_inner .txt3 { text-align: center; padding-top: 20px; }

/* ============================================================
   SECTIONS
   ============================================================ */
#about { position: relative; background: #fff; padding: 50px 0; }

.about1 { padding-bottom: 30px; }
.about1 a { display: block; text-decoration: none; text-align: center; }
.about1 a .c1 {
  display: inline-block; width: 92px; height: 92px; background: #fff;
  border: 1px solid #d8d8d8; border-radius: 50%; margin-bottom: 20px;
  transition: all 0.3s ease-out;
}
.about1 a:hover .c1 { background: #000; border-color: #000; }
.about1 a .c1 i { color: #000; font-size: 30px; line-height: 90px; transition: all 0.3s ease-out; }
.about1 a:hover .c1 i { color: #fff; }
.about1 a .txt1 {
  color: #020202; font-size: 12px; font-family: 'Montserrat', sans-serif;
  letter-spacing: 1px; background: url(../images/kand2.png) center bottom no-repeat;
  padding-bottom: 5px; margin-bottom: 20px;
}
.about1 a .txt2 { margin-bottom: 20px; }
.about1 a .txt3 {
  display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 11px;
  letter-spacing: 1px; font-weight: 700; color: #35373e; text-transform: uppercase;
  background: #fff; border: 1px solid #e8e8e8; padding: 13px 20px; margin-bottom: 10px;
  transition: all 0.3s ease-out;
}
.about1 a:hover .txt3 { color: #fff; background: #000; border-color: #000; }

#services { position: relative; background: #f7f8f9; padding: 80px 0; }

#services2_wrapper { position: relative; background: #fff; border-bottom: 1px solid #f0f0f0; }
#services2 { position: relative; display: table; width: 100%; }
#services2 .left_box_wrapper { position: relative; overflow: hidden; display: table-cell; width: 60%; }
#services2 .left_box { padding: 70px 50px; }
#services2 .right_box_wrapper {
  position: relative; overflow: hidden; display: table-cell; width: 40%;
  background: url(../images/img1.jpg) center center no-repeat; background-size: cover;
}

.services2 { position: relative; padding: 20px 0 20px 70px; }
.services2:before {
  content: ''; display: block; width: 1px; height: 100%;
  background: url(../images/vl1.png) 0 0 no-repeat; background-size: 100% 100%;
  position: absolute; left: -15px; top: 0;
}
.services2:after {
  content: ''; display: block; width: 100%; height: 1px;
  background: url(../images/hl1.png) 0 0 no-repeat; background-size: 100% 100%;
  position: absolute; left: 0; bottom: 0;
}
.services2.nav1:before, .services2.nav3:before,
.services2.nav3:after, .services2.nav4:after { display: none; }
.services2 .ic1 { position: absolute; left: 0; top: 20px; }
.services2 .ic1 i { color: #35373e; font-size: 40px; line-height: 1; }
.services2:hover .ic1 i { color: #9D215F; transition: color 0.3s ease; }
.services2 .txt1 {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px;
  color: #35373e; text-transform: uppercase; letter-spacing: 2px;
  padding-bottom: 25px; margin-bottom: 25px;
  background: url(../images/kand3.png) left bottom no-repeat;
}

#department { position: relative; background: #fff; padding: 70px 0 90px; }
.department1 { position: relative; margin-bottom: 30px; text-align: center; }
.department1 figure { position: relative; display: inline-block; margin-bottom: 25px; }
.department1 .caption {
  font-family: 'Montserrat', sans-serif; font-size: 12px; color: #35373e;
  font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
}
.yjsg-round-progress { width: 155px; height: 155px; font-size: 15px; color: #232323; border-top-color: #000; border-bottom-color: transparent; }

#what_wrapper { position: relative; background: #f7f8f9; }
#what { position: relative; display: table; width: 100%; }
#what .left_box_wrapper {
  position: relative; overflow: hidden; display: table-cell; width: 50%;
  background: url(../images/imgs02.png) center center no-repeat;
  background-size: cover; vertical-align: middle;
}
#what .left_box { padding: 110px; }
#what .right_box_wrapper { position: relative; overflow: hidden; display: table-cell; width: 50%; vertical-align: middle; }
#what .right_box { padding: 70px; }
#what .right_box_inner { margin-left: -20px; margin-right: -20px; }

.what1 { background: rgba(53, 55, 62, 0.6); padding: 50px; text-align: center; color: #fff; }
.what1 .ic1 { margin-bottom: 10px; }
.what1 .ic1 i { font-size: 35px; line-height: 1; }
.what1 .txt1 {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px;
  color: #fff; text-transform: uppercase; letter-spacing: 2px; padding-bottom: 15px;
}
.what1 .txt2 { font-size: 16px; padding-bottom: 20px; }

.what2 { position: relative; margin-top: 15px; margin-bottom: 15px; }
.what2 a { display: block; text-decoration: none; border: 1px solid transparent; padding: 20px; transition: all 0.3s ease-out; }
.what2 a:hover { border-color: #35373e; }
.what2 a .ic1 { margin-bottom: 10px; color: #6e6e6f; transition: all 0.3s ease-out; }
.what2 a:hover .ic1 { color: #35373e; }
.what2 a .ic1 i { font-size: 35px; line-height: 1; }
.what2 a .txt1 {
  font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 12px;
  color: #6e6e6f; text-transform: uppercase; letter-spacing: 2px; padding-bottom: 5px;
  transition: all 0.3s ease-out;
}
.what2 a:hover .txt1 { color: #35373e; }

#features { position: relative; overflow: hidden; background: #fff; padding: 80px 0 0; }
.features .left_box { text-align: right; padding-top: 60px; }
.features .right_box { padding-top: 60px; }
.features .center_box img { margin-left: auto; margin-right: auto; }

.features1 { position: relative; margin-bottom: 50px; }
.features1 .ic1 { margin-bottom: 15px; color: #000; }
.features1 .ic1 i { font-size: 25px; line-height: 1; }
.features1 .txt1 {
  font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 12px;
  color: #6e6e6f; text-transform: uppercase; letter-spacing: 2px; padding-bottom: 15px;
}
.features1 .txt2 { font-size: 19px; line-height: 1.3; }

.numbers1 { position: relative; margin-bottom: 30px; text-align: center; color: #fff; }
.numbers1 .ic1 { margin-bottom: 10px; color: #fff; }
.numbers1 .ic1 i { font-size: 32px; line-height: 1; }
.numbers1 .txt1 {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 32px;
  color: #fff; text-transform: uppercase; letter-spacing: 2px; padding-bottom: 10px;
}
.numbers1 .txt2 {
  font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 11px;
  color: #fff; text-transform: uppercase; letter-spacing: 2px;
}

#difference { position: relative; background: #f7f8f9; padding: 70px 0 50px; }
.screen img { margin-left: auto; margin-right: auto; }

#pricelist { position: relative; background: #fff; padding: 70px 0 50px; }

.table1 { margin-bottom: 0; }
.table1 tr { background: #fff; }
.table1 tbody tr td, .table1 thead tr td {
  border: 1px solid #eeeeee; color: #999999; font-size: 16px;
  font-weight: 400; padding: 7px 12px; vertical-align: middle; text-align: center;
}
.table1 thead tr td {
  font-weight: 700; font-family: 'Montserrat', sans-serif; text-transform: uppercase;
  color: #35373e; font-size: 11px; letter-spacing: 2px;
}
.table1 > thead:first-child > tr:first-child > td { border: 1px solid #eeeeee; }
.table1 tbody tr td:first-child + td, .table1 thead tr td:first-child + td { text-align: left; }
.table1 tbody tr:nth-child(odd) { background: #fbfbfc; }
.table1 tbody tr:hover { background: #f4f4f7; }

.prices { margin-bottom: 30px; }
.prices a {
  display: block; padding: 25px 0 50px; text-decoration: none;
  background: #fff; border: 1px solid #f0f0f0; text-align: center; position: relative;
  transition: all 0.3s ease-out;
}
.prices a:hover {
  z-index: 5; transform: scale(1.02);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.prices a .txt1 {
  font-size: 16px; color: #35373e; font-family: 'Montserrat', sans-serif;
  text-transform: uppercase; padding-bottom: 20px; letter-spacing: 2px;
}
.prices a .c1 { position: relative; }
.prices a .c1:before {
  content: ''; display: block; width: 100%; height: 1px;
  background: #e9eaeb; position: absolute; left: 0; top: 50%;
}
.prices a .txt2 {
  position: relative; display: block; width: 120px; height: 120px;
  margin-left: auto; margin-right: auto; background: #fff; border-radius: 50%;
  font-size: 30px; line-height: 1.2; border: 1px solid #e9eaeb; color: #35373e;
  padding-top: 30px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.prices a .txt2 span { display: block; color: #777777; font-size: 14px; }
.prices a ul { padding: 0; margin: 0 0 40px; list-style: none; }
.prices a ul li { display: block; border-bottom: 1px solid #f5f5f5; color: #999999; padding: 15px 0; }
.prices a .txt3 {
  display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 11px;
  letter-spacing: 2px; background: #fff; color: #35373e; padding: 13px 40px;
  border: 1px solid #e8e8e8; text-transform: uppercase; transition: all 0.3s ease-out;
}
.prices a:hover .txt3 { background: #000; color: #fff; }

#gallery { position: relative; background: #f7f8f9; padding: 70px 0; }
#gallery2 { position: relative; background: #eaeaea; }
.gallery { width: 50%; float: left; }
.gallery figure { width: 50%; float: left; position: relative; }
.gallery_right figure { float: right; }
.gallery figure img { width: 100%; position: relative; }
.gallery figure em {
  display: block; width: 25px; height: 50px;
  background: url(../images/arrow1.png) 0 0 no-repeat;
  position: absolute; right: 0; top: 50%; margin-top: -25px;
}
.gallery_right figure em { background-image: url(../images/arrow2.png); right: auto; left: 0; }
.gallery .caption { width: 50%; float: left; padding: 20px 20px 0 30px; }
.gallery_right .caption { float: right; }
.gallery .caption .txt1 { font-size: 16px; color: #141414; padding-bottom: 5px; }
.gallery .caption .txt2 { font-family: 'Montserrat', sans-serif; font-size: 20px; color: #141414; padding-bottom: 5px; }
.gallery .caption .txt3 { font-family: 'Montserrat', sans-serif; font-size: 13px; line-height: 1.3; color: #6f6f6f; padding-bottom: 5px; }

/* ============================================================
   TWEETS
   ============================================================ */
#tweets_section { position: relative; background: #f7f8f9; padding: 50px 0; }
.tweets_pag { text-align: center; padding-top: 30px; }
.tweets_pag a {
  display: inline-block; width: 10px; height: 10px; background: #b6b7b7;
  border-radius: 50%; margin: 0 3px;
}
.tweets_pag a:hover, .tweets_pag a.selected { background: #000; }
.tweets_pag a span { display: none; }
#tweets .carousel-box { position: relative; }
#tweets .carousel-box .inner { position: relative; overflow: hidden; max-width: none; margin: 0; }
#tweets .carousel.main { position: relative; overflow: hidden; margin: 0; padding: 0; margin-right: -30px; }
#tweets .caroufredsel_wrapper { padding: 0; margin: 0; }
#tweets .caroufredsel_wrapper ul { padding: 0; margin: 0; }
#tweets .carousel-box ul li { float: left; display: inline-block; position: relative; width: 300px; overflow: hidden; padding-right: 30px; }
.tweets .tweets_inner { text-align: center; padding-left: 10%; padding-right: 10%; }
.tweets .tweets_inner .c1 {
  display: block; width: 50px; height: 50px; background: none;
  border: 1px solid #060606; margin-left: auto; margin-right: auto;
  border-radius: 50%; margin-bottom: 20px;
}
.tweets .tweets_inner .c1 i { color: #000; font-size: 20px; line-height: 48px; }
.tweets .tweets_inner .txt1 { font-family: 'Amiri', sans-serif; font-size: 19px; color: #777777; }

/* ============================================================
   PARALLAX
   ============================================================ */
.parallax { width: 100%; position: relative; overflow: hidden; padding-top: 110px; padding-bottom: 80px; }
.parallax, .parallax .parallax-content, .parallax .overlay { height: 100%; }
.parallax-bg {
  width: 100%; height: 100%; left: 0; top: 0; margin: 0 auto;
  position: absolute; background-size: cover; background-attachment: scroll;
  background-repeat: repeat-y; background-position: center center;
}
.parallax-bg.bg-fixed { background-attachment: fixed; }
.parallax .overlay { background: none; width: 100%; position: absolute; overflow: hidden; left: 0; top: 0; }
.bg1 { background-image: url(../images/parallax1.jpg); }

/* ============================================================
   FOOTER
   ============================================================ */
.bot1 { position: relative; background: #111111; padding: 60px 0 30px; color: #999999; }
.bot1 a { color: #999999; text-decoration: none; }
.bot1 a:hover { color: #ffffff; }

.logo2_wrapper { padding-top: 25px; padding-bottom: 25px; }

.bot_title {
  text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-size: 13px;
  font-weight: 700; color: #fff; letter-spacing: 2px; padding-top: 25px; padding-bottom: 30px;
}

.bot_menu { padding: 0; margin: 0; list-style: none; }
.bot_menu li { display: block; margin-bottom: 8px; }
.bot_menu li a { color: #999999; text-decoration: none; transition: color 0.3s ease; }
.bot_menu li a:hover { color: #fff; text-decoration: underline; }

.smallicons { padding-bottom: 15px; }
.smallicons i { float: left; padding-right: 10px; color: #999999; font-size: 20px; min-width: 35px; }
.smallicons span { display: table; }
.smallicons span a { color: #999999; text-decoration: none; }

.bot2 {
  position: relative; background: #111111; border-top: 1px solid #4b4b4b;
  padding: 20px 0; font-size: 10px; font-family: 'Montserrat', sans-serif;
  text-transform: uppercase; color: #aaaaaa; letter-spacing: 2px; text-align: center;
}

/* Social icons */
.social { display: block; margin: 0; padding: 0; list-style: none; }
.social li { display: inline-block; margin: 0 3px; width: 35px; height: 35px; }
.social li a {
  display: block; text-decoration: none; font-size: 14px; color: #aaaaaa;
  line-height: 33px; text-align: center; border: 1px solid #858585;
  transition: all 0.3s ease-out;
}
.social li a i { line-height: inherit; color: #aaaaaa; transition: color 0.3s ease; }
.social li a:hover { border-color: #fff; }
.social li a:hover .fa-facebook-f { color: #1877F2; }
.social li a:hover .fa-x-twitter { color: #fff; }
.social li a:hover .fa-google-plus-g { color: #DB4437; }
.social li a:hover .fa-instagram { color: #E4405F; }
.social li a:hover .fa-linkedin-in { color: #0A66C2; }

.social2 { display: block; margin: 0; padding: 0; list-style: none; }
.social2 li { display: inline-block; margin: 0 1px; width: 35px; height: 35px; }
.social2 li a {
  display: block; text-decoration: none; font-size: 11px; color: #676666;
  line-height: 33px; text-align: center; border: 1px solid #676666;
  transition: all 0.3s ease-out;
}
.social2 li a:hover { color: #fff; background: #000; border-color: #000; }
.social2 li a i { line-height: inherit; }

/* ============================================================
   FORMS
   ============================================================ */
#ajax-contact-form .form-group { margin-left: 0; margin-right: 0; }
#ajax-contact-form .form-group label { color: #525252; font-weight: 400; font-style: italic; display: none; }
#ajax-contact-form .form-control {
  height: 38px; padding: 8px 12px; font-size: 14px; line-height: 20px;
  color: #8c8c8c; background: #fff; border: 1px solid #f4f4f4;
  border-radius: 0; font-style: italic;
}
#ajax-contact-form .form-control:focus {
  border-color: #d0d0d0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(153,153,153,.3);
}
#ajax-contact-form textarea.form-control { height: auto; }
#ajax-contact-form .form-group.capthca { float: left; margin-right: 20px; }
#ajax-contact-form .form-group.capthca input { width: 170px; }
#ajax-contact-form .form-group.img { float: left; }
#ajax-contact-form .form-group.img img { width: 170px; height: 38px; }
#ajax-contact-form .checkbox { font-style: italic; padding-bottom: 15px; }
#ajax-contact-form #inputName { background: url(../images/n1.png) right center no-repeat #fff; }
#ajax-contact-form #inputEmail { background: url(../images/e1.png) right center no-repeat #fff; }
#ajax-contact-form #inputSubject { background: url(../images/s1.png) right center no-repeat #fff; }
#ajax-contact-form #inputMessage { background: url(../images/m1.png) right 15px no-repeat #fff; }

#ajax-contact-form3 .form-group { margin-left: 0; margin-right: 0; }
#ajax-contact-form3 .form-group label { color: #c4c4c4; font-weight: 400; display: none; }
#ajax-contact-form3 .form-control {
  height: 38px; padding: 8px 12px; font-size: 14px; line-height: 20px;
  color: #8c8c8c; background: #fff; border: 1px solid #dedede; border-radius: 0;
}
#ajax-contact-form3 .form-control:focus { border-color: #000; box-shadow: none; }
#ajax-contact-form3 textarea.form-control { height: auto; }
.notification_error, .notification_error3 { color: #f00; padding-bottom: 10px; }
.notification_ok, .notification_ok3 { text-align: left; padding-bottom: 10px; }

/* Search form */
.search-form-wrapper { position: relative; }
.search-form-wrapper .form-control {
  border: 1px solid #b4b4b4; border-radius: 0; padding-top: 9px;
  padding-bottom: 9px; height: 40px; color: #b4b4b4; font-style: italic;
}
.search-form-wrapper .form-control:focus { box-shadow: none; border-color: #000; }
.search-form-wrapper a { position: absolute; right: 0; top: 0; text-align: center; width: 40px; line-height: 40px; color: #aaaaaa; }
.search-form-wrapper a:hover { color: #000; }
.search-form-wrapper a i { font-size: 16px; line-height: 40px; }

/* Map */
#map { height: 400px; width: 100%; margin-bottom: 30px; }
#pac-card { background-color: #fff; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }
#google_map { position: relative; width: 100%; height: 570px; }

/* ============================================================
   THUMBNAILS / IMAGES
   ============================================================ */
.img-polaroid { position: relative; padding: 5px; background: none; border: 1px solid #cfcfcf; box-shadow: none; }
.thumbnail .caption { padding: 0; color: inherit; }
.thumb1 { margin-bottom: 0; margin-top: 0; }
.thumb1 .thumbnail { padding: 0; border: none; border-radius: 0; box-shadow: none; margin-bottom: 0; background: none; }
.thumb1 figure { margin: 0 20px 20px 0; float: left; }
.thumb1 figure img { width: auto; }
.img-responsive { width: auto \9; }
.border-box { box-sizing: border-box; }

/* Dividers */
.hl2 { border-top: 1px solid #eeeeee; margin-top: 15px; margin-bottom: 20px; }
.hl3 { border-top: 1px solid #eeeeee; margin-top: 25px; margin-bottom: 25px; }

/* Page loader */
/*#load { width: 100%; height: 100%; position: fixed; overflow: hidden; z-index: 1001; background-color: #fff; }*/
/*#qLoverlay { background: #fff !important; }*/
/*#qLbar { background: #000 !important; }*/
/*#qLpercentage { color: #000 !important; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 40px !important; line-height: 1; }*/

/* To top */
#toTop { display: none; text-decoration: none; position: fixed; bottom: 10px; right: 10px; z-index: 1000; overflow: hidden; width: 50px; height: 50px; border: none; text-indent: 100%; background: url(../images/totop.gif) no-repeat left top; }
#toTopHover { background: url(../images/totop.gif) no-repeat left bottom; width: 50px; height: 50px; display: block; overflow: hidden; float: left; opacity: 0; }
#toTop:active, #toTop:focus { outline: none; }

/* ============================================================
   TEAM
   ============================================================ */
.team-container { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }

.team-card { width: 240px; text-align: center; }
.team-card img { width: 100%; height: auto; border-radius: 5px; }

.team-name {
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 16px; color: #222; margin-top: 12px; margin-bottom: 4px;
}
.team-role { color: #777; font-size: 13px; font-weight: 400; margin-bottom: 10px; }
.team-desc { font-size: 13px; color: #999; padding: 0 8px; margin-bottom: 10px; line-height: 1.6; }

.social-icons { display: flex; justify-content: center; gap: 10px; }
.social-icons a { color: #888; text-decoration: none; font-size: 14px; transition: color 0.3s ease; }
.social-icons a:hover { color: #000; }

/* ============================================================
   TRUSTED / LOGO SLIDER
   ============================================================ */
.trusted-bg-override { background-color: #f0f5e6; }
.trusted-section { text-align: center; padding: 30px 0; }
.trusted-section h3 { margin-bottom: 20px; color: #333; font-weight: 400; }

.logo-slider { overflow: hidden; position: relative; height: 100px; }
.logo-track {
  display: flex;
  width: calc(250px * 10);
  animation: scroll 20s linear infinite;
}
.logo-track img {
  height: 55px; width: auto; margin: 0 24px; object-fit: contain;
  filter: grayscale(100%) opacity(0.6); transition: filter 0.3s ease;
}
.logo-track img:hover { filter: none; }
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   TECH GRID
   ============================================================ */
.tech-section { background-color: #fff; padding: 60px 20px; text-align: center; }
.tech-section h2 { font-size: 28px; margin-bottom: 10px; color: #232323; }
.tech-section h2 span { color: #f4b428; }
.tech-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 40px; }
.tech-item {
  background-color: #4a2b7a; border: 2px solid transparent; border-radius: 12px;
  width: 240px; padding: 28px; filter: grayscale(100%);
  transition: transform 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
}
.tech-item:hover { transform: translateY(-4px); border-color: #f4b428; filter: grayscale(0%); }
.tech-item img { width: 100%; height: auto; border-radius: 8px; }
.tech-item p { margin-top: 12px; font-size: 16px; font-weight: 700; color: #fff; transition: color 0.3s ease; }
.tech-item:hover p { color: #f4e0a0; }

/* ============================================================
   STATS SECTION
   ============================================================ */
.stats-section {
  background-size: cover; background-position: center; background-repeat: no-repeat;
  min-height: 180px; display: flex; align-items: center; color: #fff;
}
.stats-section .container { width: 100%; max-width: 1350px; margin: auto; }
.stats-section .row { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; }
.stats-section .col { flex: 1; min-width: 140px; text-align: center; padding: 16px; }
.stats-section .icon { font-size: 28px; margin-bottom: 6px; }
.stats-section h2 { font-size: 30px; font-weight: 700; color: #fff; margin: 4px 0; text-align: center; padding: 0; }
.stats-section p { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.8); margin: 0; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: #fff; border-radius: 12px; border: 1px solid #eee;
  overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); }
.card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.card-header {
  text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 700;
  color: #fff; padding: 10px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
}
.card-header.purple { background-color: #6b3fa0; }
.card-header.green { background-color: #6a9f30; }
.card ul { list-style: disc; padding: 14px 20px; font-size: 14px; color: #444; margin: 0; }
.card ul li { margin-bottom: 8px; line-height: 1.5; }

.dashboard-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-item { border: 2px solid #ddd; border-radius: 10px; padding: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

.step-number { font-size: 24px; font-weight: 700; color: #800000; margin-bottom: 10px; }
.step-title { font-size: 18px; font-weight: 700; color: #800000; margin-bottom: 10px; }
.step-description { font-size: 14px; color: #333; }

/* ============================================================
   PROJECT GALLERY
   ============================================================ */
.project-gallery-section { padding: 60px 20px; text-align: center; }
.project-gallery-section h2 { font-size: 26px; margin-bottom: 30px; color: #222; }
.project-gallery-section h2 span { color: #000; transition: color 0.3s ease; }
.project-gallery-section h2:hover span { color: purple; }

.project-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
}
.gallery-item {
  border: 2px solid #ddd; padding: 16px; border-radius: 10px;
  background: #fff; text-align: center;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.gallery-item:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); transform: translateY(-3px); }
.gallery-img { width: 100%; height: auto; display: block; object-fit: contain; border-radius: 4px; }
.gallery-title { margin-top: 10px; font-weight: 700; font-size: 15px; color: #222; }

/* ============================================================
   CUSTOMERS SECTION
   ============================================================ */
.customers-section { padding: 70px 20px; text-align: center; background: #f4f6f8; }
.customers-title { font-size: 30px; font-weight: 800; letter-spacing: 2px; margin-bottom: 12px; color: #222; }
.customers-subtitle { font-size: 15px; color: #6b7280; max-width: 580px; margin: 0 auto 50px; line-height: 1.7; }
.customers-line { width: 80%; height: 1px; background: #e5e7eb; margin: 0 auto 50px; }
.customers-row { display: flex; justify-content: center; align-items: center; gap: 60px; flex-wrap: wrap; }
.brand { font-size: 18px; font-weight: 600; color: #9ca3af; letter-spacing: 1px; transition: all 0.3s ease; cursor: pointer; }
.brand:hover { color: #111; transform: translateY(-2px); }

/* ============================================================
   PHONE SLIDER
   ============================================================ */
.phone-slider-container { position: relative; }
.phone-slider { position: absolute; top: 8%; left: 10%; width: 81%; height: 90%; overflow: hidden; border-radius: 20px; z-index: 2; }
.phone-slider img { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out; }
.phone-slider img.active { opacity: 1; }

/* ============================================================
   CHATBOT / INFO CARDS
   ============================================================ */
.chatbot-container-page { margin: 0; padding: 30px; background-color: #f0f2f5; }
.info-section { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.info-card {
  background: #fff; padding: 20px; border-radius: 8px; width: 280px;
  position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.08); text-align: left;
}
.icon-circle {
  width: 80px; height: 80px; margin: 0 auto 10px; border-radius: 50%;
  background-color: rgba(0,123,255,0.1); display: flex; justify-content: center;
  align-items: center; border: 4px solid #007bff;
}
.icon-circle img { width: 60%; height: 60%; object-fit: contain; }
.speech-icon {
  position: absolute; left: -10px; top: 20px; background-color: #00bcd4;
  color: #fff; padding: 5px 8px; font-size: 16px; border-radius: 5px;
}
.info-card ul { margin-top: 10px; padding-left: 20px; font-size: 14px; color: #444; }
.info-card ul li { margin-bottom: 8px; line-height: 1.6; }

.chatbot-container { background-color: #f9f9f9; padding: 60px 20px; max-width: 1200px; margin: auto; }
.chatbot-header { text-align: center; font-size: 30px; font-weight: 700; margin-bottom: 40px; color: #2a2a2a; }
.chatbot-section { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; }
.chatbot-content { flex: 1 1 55%; }
.intro-text { font-size: 16px; line-height: 1.7; margin-bottom: 25px; color: #444; }
.chatbot-features { list-style: disc; padding-left: 20px; color: #333; }
.chatbot-features li { margin-bottom: 15px; font-size: 15px; line-height: 1.6; }
.chatbot-features strong { color: #000; }
.image-wrapper { flex: 1 1 40%; text-align: center; }
.image-wrapper img { max-width: 100%; width: 500px; height: auto; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* ============================================================
   BI / ARCHITECTURE / SECTION CONTAINERS
   ============================================================ */
.bi-section { display: flex; flex-wrap: wrap; justify-content: space-between; background: #fff; padding: 40px 20px; color: #333; }
.bi-column { flex: 1; min-width: 280px; margin: 10px; }
.bi-column h3 { font-size: 18px; margin-bottom: 15px; border-bottom: 2px solid #ddd; padding-bottom: 5px; }
.use-cases h4 { color: #78b947; margin-bottom: 10px; }
.use-cases ul { list-style: disc; margin-left: 20px; margin-bottom: 20px; }
.value-creation ul { list-style: square; padding-left: 20px; }
.value-creation li { margin-bottom: 15px; }
.value-creation li span { font-weight: 700; color: #0073b7; }
.framework-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.framework-box { background-color: #001f5f; color: #fff; text-align: center; padding: 20px 10px; border-radius: 8px; font-size: 14px; font-weight: 700; }

.architecture-container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.architecture-box { background: #f2f2f2; border-radius: 8px; padding: 15px; margin: 0; flex: 1 1 160px; box-sizing: border-box; }
.architecture-box h4 { font-size: 15px; margin-bottom: 12px; }
.architecture-box ul { list-style: none; padding: 0; margin: 0; }
.architecture-box ul li { font-size: 13px; color: #444; margin-bottom: 6px; line-height: 1.5; }

.section-container { display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap; }
.section { background-color: #f7f7f7; border: 1px solid #ccc; padding: 20px; width: 18%; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: 5px; }
.section h3 { background-color: #005baa; color: #fff; font-size: 15px; padding: 8px; text-align: center; margin: -20px -20px 10px -20px; border-radius: 5px 5px 0 0; }
.section h4 { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: #333; }
.section p { font-size: 13px; color: #444; line-height: 1.5; margin: 0; }

/* Badge */
.badge { position: absolute; top: 12px; right: 12px; background: #4f46e5; color: #fff; font-size: 10px; padding: 4px 8px; border-radius: 20px; }
.image-box { height: 100px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.image-box img { max-height: 100%; max-width: 100%; object-fit: contain; }
.product-name { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: #222; }
.cta { font-size: 13px; color: #4f46e5; font-weight: 700; }

/* ============================================================
   MEDIA QUERIES
   ============================================================ */
@media (min-width: 1200px) {}

@media (max-width: 1199px) {
  .navbar_ .nav > li { margin-left: 40px; }
  .mission .mission_inner .txt1 { font-size: 45px; }
  .front-slider { margin-top: -90px; }
  #what { display: block; }
  #what .left_box_wrapper, #what .right_box_wrapper { display: block; width: auto; }
  #what .left_box { padding: 70px; }
  .gallery { width: auto; float: none; }
  .gallery .caption { padding: 50px 50px 10px; }
  .gallery.nav2 figure { float: right; }
  .gallery.nav2 figure em { background-image: url(../images/arrow2.png); right: auto; left: 0; }
  .gallery.nav2 .caption { float: right; }
  .gallery.nav3 figure { float: left; }
  .gallery.nav3 figure em { background-image: url(../images/arrow1.png); right: 0; left: auto; }
  .gallery.nav3 .caption { float: left; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .features .left_box { padding-top: 30px; }
  .features .right_box { padding-top: 30px; }
  .features1 { margin-bottom: 30px; }
  .features1 .ic1 { margin-bottom: 10px; }
  .features1 .txt1 { padding-bottom: 10px; }
}

@media (max-width: 991px) {
  .navbar_ .nav > li { margin-left: 10px; }
  .mission .mission_inner .txt1 { font-size: 35px; }
  .mission .mission_inner .txt2 { font-size: 18px; }
  .front-slider { margin-top: -80px; }
  #services2 { display: block; }
  #services2 .left_box_wrapper, #services2 .right_box_wrapper { display: block; width: auto; }
  #services2 .right_box_wrapper { padding-bottom: 70%; }
  #services2 .left_box { padding: 50px 30px; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .features .left_box, .features .right_box { padding-top: 0; }
  .features1 { margin-bottom: 20px; }
  .features1 .ic1 { margin-bottom: 5px; }
  .features1 .txt1 { padding-bottom: 5px; }
  .features1 .txt2 { font-size: 16px; }
}

@media (max-width: 767px) {
  .navbar_ { float: none; height: 40px; margin-bottom: 0; }
  .navbar-collapse_ { clear: both; margin-left: -15px; margin-right: -15px; padding-top: 14px; box-shadow: none; }
  .navbar_ .nav { display: block; background: #3e3e40; border: none; }
  .navbar_ .nav > li { float: none; background: none; border-top: 1px solid #515152; margin-left: 0; }
  .navbar_ .nav > li > a { padding: 10px; color: #fff; }
  .sub-menu ul { position: relative; left: 0; top: 0; }
  .mission .mission_inner .txt1 { font-size: 20px; }
  .mission .mission_inner .txt2 { font-size: 14px; }
  .front-slider { margin-top: -60px; }
  .services2:before { display: none; }
  .services2:after { display: block !important; }
  #what .left_box, #what .right_box { padding: 30px; }
  .features .left_box { text-align: center; padding-top: 0; }
  .features .right_box { text-align: center; padding-top: 0; }
  .gallery { margin-bottom: 20px; }
  .gallery figure { float: none; width: auto; }
  .gallery figure em { display: none; }
  .gallery .caption { float: none; width: auto; padding: 20px; }
  .content-part, .sidebar-part { padding-bottom: 25px; }
  .customers-row { gap: 30px; }
  .customers-title { font-size: 24px; }
  .project-gallery-grid { grid-template-columns: 1fr; }
  .architecture-container { flex-direction: column; }
  .section { width: 100%; }
  .framework-grid { grid-template-columns: 1fr; }
  .stats-section .row { flex-direction: column; align-items: center; }
  .tech-item { width: 100%; max-width: 300px; }
}

@media (max-width: 480px) {
  #google_map { height: 240px; }
  .mission .mission_inner .txt3 { display: none; }
  .front-slider { margin-top: -30px; }
}