/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body { background-color: #f5f5f5; color: #4e4e4e; }
h1,h2,h3,h4,h5,h6 { color: #1e1e1e; }
a { color: #1e1e1e; transition: all 0.5s ease-in-out; }
a:hover { color: #264e79; text-decoration: none; transition: all 0.5s ease-in-out; }

.btn.focus, .btn:focus {
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(0, 0, 0, .25);
}

.display-none { display: none !important; }

.p-r { position: relative; }
.color-a { color: #264e79; }
.color-d { color: #f5f5f5; }
.color-text-a { color: #4e4e4e; }

.box-shadow, .paralax-mf, .service-box, .work-box, .card-blog { box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1); }
.box-shadow-a, .button:hover { box-shadow: 0 0 0 4px #cde1f8; }

.avatar { width: 32px; height: 32px; margin-right: 4px; overflow: hidden; }
.bg-image { background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }

@media (max-width: 1024px) {
  .bg-image { background-attachment: scroll; }
}

.overlay-mf { background-color: #000; }
.overlay-mf { position: absolute; top: 0; left: 0px; padding: 0; height: 100%; width: 100%; opacity: .6; }
.paralax-mf { position: relative; padding: 5rem 0; }

.display-table { width: 100%; height: 100%; display: table; }
.table-cell { display: table-cell; vertical-align: middle; }

/*--/ Sections /--*/
.sect-4 { padding: 4rem 0; }
.sect-pt4 { padding-top: 4rem; }
.sect-mt4 { margin-top: 4rem; }

/*--/ Title s /--*/
.title-s { font-weight: 600; color: #1e1e1e; font-size: 1.4rem; }

/*--/ Title A /--*/
.title-box { margin-bottom: 4rem; }
.title-a { font-size: 3rem; font-weight: bold; text-transform: uppercase; }
.subtitle-a { color: #4e4e4e; }
.line-mf { width: 40px; height: 5px; background-color: #264e79; margin: 0 auto; }

/*--/ Title Left /--*/
.title-box-2 { margin-bottom: 3rem; }
.title-left { font-size: 2rem; position: relative; }
.title-left:before { content: ''; position: absolute; height: 3px; background-color: #264e79; width: 100px; bottom: -12px; }

.about-me p:nth-child(1),
.about-me p:nth-child(3) { margin-bottom: 0px; font-size: 24px; color: #264e79; }
.about-me p:nth-child(2),
.about-me p:nth-child(4) { margin-left: 10px; margin-bottom: 15px; font-size: 14px; color: #aaa; }

@media (max-width: 767px) {
  .about-me { margin-bottom: 40px; }
}

/*------/ Box /------*/
.box-pl2 { padding-left: 2rem; }
.box-shadow-full { padding: 3rem 1.25rem; position: relative; background-color: #fff; margin-bottom: 3rem; z-index: 2; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2); }

@media (min-width: 768px) {
  .box-shadow-full { padding: 3rem; }
}

/*------/ Socials /------*/
.socials { padding: 1.5rem 0; }
.socials ul li { display: inline-block; }
.socials .ico-circle { height: 40px; width: 40px; font-size: 1.7rem; border-radius: 50%; line-height: 1.4; margin: 0 15px 0 0; box-shadow: 0 0 0 3px #264e79; transition: all 500ms ease; }
.socials .ico-circle:hover { background-color: #264e79; color: #fff; box-shadow: 0 0 0 3px #cde1f8; transition: all 500ms ease; }

/*------/ Ul resect /------*/
.ul-resect, .socials ul, .list-ico, .blog-wrapper .post-meta ul, .box-comments .list-comments, .widget-sidebar .list-sidebar, .widget-tags ul { list-style: none; padding-left: 0; margin-bottom: 0; }

.list-ico { line-height: 2; }
.list-ico span { color: #264e79; margin-right: 10px; }

/*------/ Ico Circle /------*/
.ico-circle { height: 100px; width: 100px; font-size: 2rem; border-radius: 50%; line-height: 1.55; margin: 0 auto; text-align: center; box-shadow: 0 0 0 10px #264e79; display: block; }

/*------/ Owl Carousel /------*/
.owl-theme .owl-dots { text-align: center; margin-top: 18px; }
.owl-theme .owl-dots .owl-dot { display: inline-block; }
.owl-theme .owl-dots .owl-dot span { width: 18px; height: 7px; margin: 5px 5px; background: #cde1f8; border: 0px solid #cde1f8; display: block; transition: all 0.6s ease-in-out; cursor: pointer; }
.owl-theme .owl-dots .owl-dot:hover span { background-color: #cde1f8; }
.owl-theme .owl-dots .owl-dot.active span { background-color: #1B1B1B; width: 25px; }

/*--/ Scrolltop s /--*/
.scrolltop-mf { position: relative; display: none; }
.scrolltop-mf span { z-index: 999; position: fixed; width: 42px; height: 42px; background-color: #264e79; opacity: .7; font-size: 1.6rem; line-height: 1.5; text-align: center; color: #fff; top: auto; left: auto; right: 30px; bottom: 50px; cursor: pointer; border-radius: 50%; }

/*------/ Back to top button /------*/
.back-to-top { position: fixed; display: none; background: #264e79; color: #fff; width: 44px; height: 44px; text-align: center; line-height: 1; font-size: 16px; border-radius: 50%; right: 15px; bottom: 15px; transition: background 0.5s; z-index: 11; }
.back-to-top i { padding-top: 12px; color: #fff; }

@media (max-width: 768px) {
  .back-to-top { bottom: 15px; }
}

/*------/ Prelaoder /------*/
#preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; overflow: hidden; background: #fff; }
#preloader:before { content: ""; position: fixed; top: calc(50% - 30px); left: calc(50% - 30px); border: 6px solid #f2f2f2; border-top: 6px solid #264e79; border-radius: 50%; width: 60px; height: 60px; -webkit-animation: animate-preloader 1s linear infinite; animation: animate-preloader 1s linear infinite; }

@-webkit-keyframes animate-preloader {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes animate-preloader {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*------/ Button /------*/
.button { display: inline-block; padding: .3rem .6rem; text-align: center; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 1rem; border-radius: .3rem; border: 1px solid transparent; transition: all 500ms ease; cursor: pointer; }
.button:focus { outline: 0; }
.button:hover { background-color: #0062d3; color: #fff; transition: all 500ms ease; }
.button-a { background-color: #264e79; color: #fff; border-color: #cde1f8; }
.button-big { padding: .9rem 2.3rem; font-size: 1.2rem; }
.button-rouded { border-radius: 5rem; }
.btn-lg { padding: .5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: .3rem; }

/*--------------------------------------------------------------
# Nav Bar
--------------------------------------------------------------*/
.navbar-b { transition: all .5s ease-in-out; background-color: transparent; padding-top: 1.563rem; padding-bottom: 1.563rem; }
.navbar-b.navbar-reduce { box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.06); }
.navbar-b.navbar-trans .nav-item, .navbar-b.navbar-reduce .nav-item { position: relative; padding-right: 10px; padding-left: 0; }

@media (min-width: 768px) {
 .navbar-b.navbar-trans .nav-item, .navbar-b.navbar-reduce .nav-item { padding-left: 10px; }
}

.navbar-b.navbar-trans .nav-link, .navbar-b.navbar-reduce .nav-link { color: #fff; text-transform: uppercase; font-weight: 600; }
.navbar-b.navbar-trans .nav-link:before, .navbar-b.navbar-reduce .nav-link:before { content: ''; position: absolute; margin-left: 0px; width: 0%; bottom: 0; left: 0; height: 2px; transition: all 500ms ease; }

@media (min-width: 768px) {
 .navbar-b.navbar-trans .nav-link:before, .navbar-b.navbar-reduce .nav-link:before { margin-left: 18px; }
}

.navbar-b.navbar-trans .nav-link:hover, .navbar-b.navbar-reduce .nav-link:hover { color: #1B1B1B; }
.navbar-b.navbar-trans .nav-link:hover:before, .navbar-b.navbar-reduce .nav-link:hover:before { width: 35px; }

.navbar-b.navbar-trans .show > .nav-link:before,
.navbar-b.navbar-trans .active > .nav-link:before,
.navbar-b.navbar-trans .nav-link.show:before,
.navbar-b.navbar-trans .nav-link.active:before, .navbar-b.navbar-reduce .show > .nav-link:before,
.navbar-b.navbar-reduce .active > .nav-link:before,
.navbar-b.navbar-reduce .nav-link.show:before,
.navbar-b.navbar-reduce .nav-link.active:before { width: 35px; }
.navbar-b.navbar-trans .nav-link:before { background-color: #fff; }
.navbar-b.navbar-trans .nav-link:hover { color: #fff; }
.navbar-b.navbar-trans .show > .nav-link,
.navbar-b.navbar-trans .active > .nav-link,
.navbar-b.navbar-trans .nav-link.show,
.navbar-b.navbar-trans .nav-link.active { color: #fff; }
.navbar-b.navbar-reduce { transition: all .3s ease-in-out; background-color: #fff; padding-top: 15px; padding-bottom: 15px; }
.navbar-b.navbar-reduce .nav-link { color: #000; }
.navbar-b.navbar-reduce .nav-link:before { background-color: #264e79; }
.navbar-b.navbar-reduce .nav-link:hover { color: #000; }
.navbar-b.navbar-reduce .show > .nav-link,
.navbar-b.navbar-reduce .active > .nav-link,
.navbar-b.navbar-reduce .nav-link.show,
.navbar-b.navbar-reduce .nav-link.active { color: #000; }
.navbar-b.navbar-reduce .navbar-toggler span { background-color: #1B1B1B; }
.navbar-b .navbar-brand { padding: 2px 10px; display: flex; align-items: center; color: #000; font-size: 1.6rem; font-weight: 600; color: #000; background: white; }
.navbar-b .navbar-brand img { margin-right: 10px; width: 28px; }
.navbar-b .navbar-nav .dropdown-item.show .dropdown-menu,
.navbar-b .dropdown.show .dropdown-menu,
.navbar-b .dropdown-btn.show .dropdown-menu { transform: translate3d(0px, 0px, 0px); visibility: visible !important; }
.navbar-b .dropdown-menu { margin: 1.12rem 0 0; border-radius: 0; }
.navbar-b .dropdown-menu .dropdown-item { padding: .7rem 1.7rem; transition: all 300ms ease; }
.navbar-b .dropdown-menu .dropdown-item:hover {background-color: #264e79; color: #fff; transition: all 500ms ease; }
.navbar-b .dropdown-menu .dropdown-item.active { background-color: #264e79; }

/*--/ Hamburger Navbar /--*/
.navbar-toggler { position: relative; }
.navbar-toggler:focus,
.navbar-toggler:active { outline: 0; }
.navbar-toggler span { display: block; background-color: #fff; height: 3px; width: 25px; margin-top: 4px; margin-bottom: 4px; transform: rotate(0deg); left: 0; opacity: 1; }
.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) { transition: transform .35s ease-in-out; }
.navbar-toggler:not(.collapsed) span:nth-child(1) { position: absolute; left: 12px; top: 10px; transform: rotate(135deg); opacity: 0.9; }
.navbar-toggler:not(.collapsed) span:nth-child(2) { height: 12px; visibility: hidden; background-color: transparent; }
.navbar-toggler:not(.collapsed) span:nth-child(3) { position: absolute; left: 12px; top: 10px; transform: rotate(-135deg); opacity: 0.9; }

/*--------------------------------------------------------------
# Intro Section
--------------------------------------------------------------*/
.intro { height: 100vh; position: relative; color: #fff; }
.intro .intro-content { text-align: center; position: absolute; }
.intro .overlay-intro { background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 0; left: 0px; padding: 0; height: 100%; width: 100%; opacity: .9; }
.intro .intro-title { color: #fff; font-weight: 600; font-size: 3rem; }

@media (min-width: 768px) {
  .intro .intro-title { font-size: 5.5rem; }
}

.intro .intro-subtitle { font-size: 1.5rem; font-weight: 300; }

@media (min-width: 768px) {
  .intro .intro-subtitle { font-size: 2.2rem; }
}

.intro .text-slider-items { display: none; }

.intro-single { height: 380px; }
.intro-single .intro-content { margin-top: 40px; }
.intro-single .intro-title { text-transform: uppercase; font-size: 3rem; }

@media (min-width: 768px) {
  .intro-single .intro-title { font-size: 3.5rem; }
}

.intro-single .breadcrumb { margin: 0px; background-color: transparent; color: #264e79; }
.intro-single .breadcrumb .breadcrumb-item:before { color: #cde1f8; }
.intro-single .breadcrumb .breadcrumb-item.active { color: #cde1f8; }
.intro-single .breadcrumb a { color: #fff; }

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about .box-shadow-full { padding-top: 3rem; padding-bottom: 4rem; }

.about .about-info { margin-top: 2px; }
.about .about-info .title-s { display: inline-block; margin-left: 10px; width: 70px; }

.about .about-img { margin-bottom: 2rem; }
.about .about-img img { width: 100%; }

.about .sub-1 { font-size: 2.1rem; font-weight: 300; line-height: 1.4; }
.about .sub-2 { font-size: 1.4rem; font-weight: 400; line-height: 1.8; }
.about .sub-3{ font-size: 1.2rem; font-weight: 300; line-height: 1.8; }

@media (max-width: 767px) {
  .about .about-info .title-s { margin-left: 0; }
  .about .about-img { text-align: center; }
}
@media (min-width: 767px) {
  .about .box-pl2 { margin-top: 3rem; padding-left: 0rem; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .about .about-info { margin-top: 0px; margin-bottom: 40px; }
  .about .about-info p { margin-bottom: 8px; }
  .about .about-info p span { font-size: 14px; }
  .about .about-info p span.title-s { margin-left: 0px; display: block; }
}

.about-contents { padding: 3rem 2rem; }
.about-contents span { color: #4e4e4e; }
.about-contents .button-box { display: flex; }
.about-contents .button-box button { padding: 0.5rem 1rem; border: 1px solid #555; }
.about-contents .button-box button:hover { background-color: #333; color: white; }

@media (max-width: 767px) {
  .skill { margin-top: 20px; }
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.service-box { background-color: #fff; padding: 2.5rem 1.3rem; border-radius: 1rem; margin-bottom: 3rem; }
.service-box:hover .ico-circle { transition: all 500ms ease; color: #fff; background-color: #264e79; box-shadow: 0 0 0 10px #cde1f8; }
.service-box .service-ico { margin-bottom: 1rem; color: #1e1e1e; }
.service-box .ico-circle { transition: all 500ms ease; font-size: 4rem; }
.service-box .s-title { font-size: 1.4rem; text-transform: uppercase; text-align: center; padding: .4rem 0; }
.service-box .s-description { color: #4e4e4e; }

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.work-box { margin-bottom: 2rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: #fff; }
.work-img { display: block; height: 125px; line-height: 120px; background-color: #eee; overflow: hidden; vertical-align: middle; cursor: pointer; }
.work-img img { transform: scale(1.0); transition: 0.5s; }
.work-img img:hover { transform: scale(1.1); transition: 0.5s; }
.work-content { padding: 0px 3% 8px 4%; }
.work-content .w-more { color: #4e4e4e; font-size: .8rem; }
.work-content .w-ctegory { font-size: 11px; font-weight: bold; color: #aaa; vertical-align: bottom; }
.work-content .w-like { font-size: 2.5rem; color: #264e79; float: right; }
.work-content .w-like a { color: #264e79; }
.work-content .w-like .num-like { font-size: .7rem; }

.w-title { margin-bottom: 0px; font-family: 'Arial'; font-size: 16px; line-height: 1.4em; }
.w-date { color: #999; }

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details { padding-top: 30px; }
.portfolio-details .portfolio-details-container { position: relative; }
.portfolio-details .portfolio-details-carousel { position: relative; z-index: 1; }
.portfolio-details .portfolio-details-carousel .owl-nav, .portfolio-details .portfolio-details-carousel .owl-dots { margin-top: 5px; text-align: left; }
.portfolio-details .portfolio-details-carousel .owl-dot { display: inline-block; margin: 0 10px 0 0; width: 12px; height: 12px; border-radius: 50%; background-color: #ddd !important; }
.portfolio-details .portfolio-details-carousel .owl-dot.active { background-color: #264e79 !important; }
.portfolio-details .portfolio-info { padding: 25px; position: absolute; right: 0; bottom: -50px; background: #fff; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); z-index: 2; }
.portfolio-details .portfolio-info span { font-size: 14px; color: #999; }
.portfolio-details .portfolio-info h3 { font-size: 24px; font-weight: 700; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.portfolio-details .portfolio-info ul { list-style: none; margin-bottom: 5px; padding: 0; font-size: 15px; }
.portfolio-details .portfolio-info ul li + li { margin-top: 10px; }
.portfolio-details .portfolio-description { padding-top: 30px; padding-bottom: 80px; }
.portfolio-details .portfolio-description h2 { width: 50%; font-size: 24px; font-weight: 700; margin-bottom: 20px; }
.portfolio-details .portfolio-description p { padding: 0 0 0 0; }

@media (max-width: 768px) {
  .portfolio-details .portfolio-description h2 { width: 100%; }
  .portfolio-details .portfolio-info { position: static; margin-top: 30px; }
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.footer-paralax { padding: 4rem 0 0 0; }

.contact-mf { margin-top: 4rem; }
.contact-mf .box-shadow-full { background: none; box-shadow: none; }
.contact-mf .box-shadow-full .title-left:before { background-color: rgba(255,255,255,.8); }
.contact-mf .box-shadow-full h5 { color: #fff; }
.contact-mf .box-shadow-full p { color: #fff; }
.contact-mf .socials .ico-circle { box-shadow: 0 0 0 3px #eee; }
.contact-mf .socials .ico-circle:hover { background-color: #fff; box-shadow: 0 0 0 3px #264e79; }
.contact-mf .socials .ico-circle i { color: #fff; }
.contact-mf .socials .ico-circle:hover i { color: #264e79; }

@media (min-width: 767px) {
 .contact-mf .box-pl2 { margin-top: 3rem; padding-left: 0rem; }
}

@-webkit-keyframes animate-loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes animate-loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
@media (min-width: 767px) {
 .card-blog { margin-bottom: 3rem; }
}

.card-blog .card-body { position: relative; }
.card-blog .card-category-box { position: absolute; text-align: center; top: -16px; left: 15px; right: 15px; line-height: 25px; overflow: hidden; }
.card-blog .card-category { display: inline-block; color: #fff; padding: 0 15px 5px; overflow: hidden; background-color: #264e79; border-radius: 4px; }
.card-blog .card-category .category { color: #fff; display: inline-block; text-transform: uppercase; font-size: .7rem; letter-spacing: .1px; margin-bottom: 0; }
.card-blog .card-title { font-size: 1.3rem; margin-top: .6rem; }
.card-blog .card-description { color: #4e4e4e; }
.card-blog .post-author { display: inline-block; }
.card-blog .post-date { color: #4e4e4e; display: inline-block; float: right; }

/*--------------------------------------------------------------
# Blog Single
--------------------------------------------------------------*/
.post-box,
.form-comments,
.box-comments,
.widget-sidebar { padding: 2rem; background-color: #fff; margin-bottom: 3rem; }

@media (min-width: 768px) {
  .post-box,
  .form-comments,
  .box-comments,
  .widget-sidebar { padding: 3rem; }
}

.blog-wrapper .article-title { font-size: 1.5rem; }

@media (min-width: 768px) {
  .blog-wrapper .article-title { font-size: 1.9rem; }
}

.blog-wrapper .post-meta { margin: 1rem 0; }
.blog-wrapper .post-meta ul { border-left: 4px solid #264e79; margin-top: 1rem; }
.blog-wrapper .post-meta ul li { display: inline-block; margin-left: 15px; }
.blog-wrapper .post-meta ul a { color: #264e79; }
.blog-wrapper .post-meta ul span { color: #1e1e1e; }
.blog-wrapper .blockquote { border-left: 4px solid #264e79; padding: 18px; font-style: italic; }

/*------/ Comments /------*/
.box-comments .list-comments li { padding-bottom: 40px; }
.box-comments .list-comments .comment-avatar { display: table-cell; vertical-align: top; }
.box-comments .list-comments .comment-avatar img { width: 80px; height: 80px; }
.box-comments .list-comments .comment-author { font-size: 1.3rem; }

@media (min-width: 768px) {
  .box-comments .list-comments .comment-author { font-size: 1.5rem; }
}

.box-comments .list-comments .comment-details { display: table-cell; vertical-align: top; padding-left: 25px; }
.box-comments .list-comments a { color: #264e79; }
.box-comments .list-comments span { color: #1e1e1e; font-style: italic; }
.box-comments .comment-children { margin-left: 40px; }

/*------/ Sidebar /------*/
.widget-sidebar .sidebar-title { font-size: 1.6rem; font-weight: 600; border-left: 5px solid #264e79; padding-left: 15px; text-transform: uppercase; margin-bottom: 1.5rem; }
.widget-sidebar .list-sidebar li { position: relative; padding: 6px 0 6px 24px; }
.widget-sidebar .list-sidebar li:before { position: absolute; content: ""; width: 10px; height: 1px; left: 0; background-color: #264e79; top: 20px; }
.sidebar-search input { background-color: #fff; border-radius: 0; transition: all 0.5s ease-in-out; }
.sidebar-search .btn-search { background-color: #264e79; border-color: #264e79; border-radius: 0; padding-left: 20px; padding-right: 20px; }
.widget-tags ul li { display: inline-block; background-color: #264e79; padding: .2rem .6rem; margin-bottom: .5rem; border-radius: 15px; }
.widget-tags ul li a { color: #fff; }

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer { text-align: center; color: #fff; padding: 25px 0; background: #111; }
footer .copyright { margin-bottom: .3rem; }
footer .credits { margin-top: 5px; margin-bottom: 0; font-size: 12px; }
footer .credits a { color: #fff; }


/* ---------------------------------------------- /*
 * Design
/* ---------------------------------------------- */
.design-mf { padding-top: 4rem; padding-bottom: 4rem; }
.design-mf .design-item { opacity: 0; display: none; float: left; margin: 0; padding: 15px; width: 25%; }
.design-mf .design-item .cont_area { position: relative; overflow: hidden; max-height: 180px; box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1); }
.design-mf .design-item .cont_area img { width: 100%; height: auto; overflow: hidden; }

@media (max-width: 767px) {
  .design-mf .design-item { width: 100%; }
  .design-mf .design-item .cont_area { max-height: 220px; }
}

.designFilter { font-weight: 400; margin-bottom: 20px; list-style: none; }
.designFilter li { margin-right: 10px; text-decoration:none; color: #264e79; font-size: 15px; font-weight: 400; text-align: center; display: inline; cursor: pointer; border: #264e79 1px solid; padding: 5px 10px; line-height: 45px; }
.designFilter li.active { background: #264e79 none repeat scroll 0 0; border: 1px solid #264e79; color: #fff; }

.design-item { position: relative; color: #ffffff; line-height: 0; margin-top: 10px; margin-bottom: 10px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.design-item a:hover > .project-hover { padding: 15px; color: rgba(255, 255, 255, 1); background: rgba(38, 78, 121, 0.9); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.design-item a:hover > .project-hover span { padding: 0; }
.design-item a:hover > .project-hover b { color: rgba(255, 255, 255, 0.5); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }

.project-hover { position: absolute; width: 100%; height: 100%; overflow: hidden; color: rgba(255, 255, 255, 0.0); background: rgba(0, 0, 0, 0.0); font-size: 15px; font-weight: 400; letter-spacing: 1px; line-height: 20px; text-transform: uppercase; visibility: visible; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.project-hover span { display: inline-block; position: absolute; left: 50%; top: 50%; font-weight: bold; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

/*------/ Business Area /------*/
.business-mf { padding: 4rem 0; background-color: #fff; }

.business-item {
  background: #f9f9f9;
  padding: 2rem 1.5rem;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid #eee;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.business-item:hover {
  box-shadow: 0 5px 20px rgba(38, 78, 121, 0.1);
  transform: translateY(-5px);
  border-color: #264e79;
}

.business-icon {
  font-size: 3rem;
  color: #264e79;
  margin-bottom: 1.5rem;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.business-icon i {
  font-size: 3rem;
}

.business-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1e1e1e;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.business-desc {
  font-size: 0.95rem;
  color: #4e4e4e;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.business-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #264e79;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.business-link:hover {
  color: #1e1e1e;
  gap: 0.8rem;
}

.business-link i {
  font-size: 1rem;
}

@media (max-width: 768px) {
  .business-item {
    padding: 1.5rem 1rem;
  }

  .business-icon {
    height: 60px;
  }

  .business-icon i {
    font-size: 2.5rem;
  }

  .business-title {
    font-size: 1.1rem;
  }

  .business-desc {
    font-size: 0.9rem;
  }
}

/*------/ Partners /------*/
.partners-mf { padding: 4rem 0; background-color: #fff; }

.partners-carousel-wrapper {
  width: 100%;
  overflow: hidden;
  padding: 3rem 0;
  background: linear-gradient(to right, #f5f5f5 0%, #fff 10%, #fff 90%, #f5f5f5 100%);
}

.partners-carousel {
  display: flex;
  animation: scroll-left 30s linear infinite;
  gap: 2rem;
  padding: 0 2rem;
}

.partners-carousel:hover {
  animation-play-state: paused;
}

.partner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 180px;
  transition: transform 0.3s ease;
}

.partner-item:hover {
  transform: scale(1.1);
}

.partner-item img,
.partner-item svg {
  width: 100%;
  height: auto;
  max-width: 150px;
}

/* 로고가 많을 때 - 스크롤 애니메이션 */
.partners-carousel.has-many {
  animation: scroll-left 40s linear infinite;
  justify-content: flex-start;
}

.partners-carousel.has-many:hover {
  animation-play-state: paused;
}

/* 로고 1-2개일 때: 중앙 정렬 */
.partners-carousel.has-few {
  justify-content: center;
  animation: none;
}

.partners-carousel.has-few .partner-item {
  min-width: auto;
  flex: 0 1 auto;
}

/* 로고 3개 이상일 때: 반복 스크롤 */
.partners-carousel.has-many .partner-item {
  min-width: 180px;
  flex-shrink: 0;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-180px * 3 - 2rem * 3));
  }
}

@media (max-width: 768px) {
  .partners-carousel {
    gap: 1rem;
    padding: 0 1rem;
  }

  .partners-carousel.has-many .partner-item {
    min-width: 140px;
  }

  .partners-carousel.has-many {
    animation: scroll-left-mobile 40s linear infinite;
  }

  @keyframes scroll-left-mobile {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-140px * 3 - 1rem * 3));
    }
  }
}