@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100; 300; 400; 500; 700; 900&display=swap'); 

/* Fonts */
:root { 
 --font-default: arial, 'Noto Sans KR', sans-serif; 
 --font-primary: arial, 'Noto Sans KR', sans-serif; 
 --font-secondary: arial, 'Noto Sans KR', sans-serif; 
 } 

:root { 
 --color-default: #111; 
 --color-primary: #feb900; 
 --color-secondary: #333; 
 } 

:root { 
 scroll-behavior: smooth; 
 } 

body { 
 font-family: arial, 'Noto Sans KR', sans-serif; 
 letter-spacing:-0.8px;
 color: var(--color-default); 
 overflow-x: hidden; 
 } 

a { 
 color: var(--color-primary); 
 text-decoration: none; 
 } 

a:hover { 
 color: #ffc732; 
 text-decoration: none; 
 } 

h1,
h2,
h3,
h4,
h5,
h6 { 
 font-family: var(--font-primary); 
 letter-spacing: -1px; 
 } 

img { 
 height: auto; 
 max-width: 100%; 
 } 

section { 
 padding: 80px 0; 
 overflow: hidden; 
 } 

.section-bg { 
 background-color: #f5f6f7; 
 } 

.section-header { 
 text-align: center; 
 padding-bottom: 70px; 
 } 

.section-header h2 { 
 font-size: 38px; 
 font-weight: 700; 
 letter-spacing: -1.6px;
 position: relative; 
 color: #2e3135; 
 padding-bottom: 0.8rem; 
 } 

.section-header h2:before { 
 margin: 0 15px 10px 0; 
 } 

.section-header h2:after { 
 margin: 0 0 10px 15px; 
 } 

.section-header p { 
 margin: 0 auto 0 auto; 
 } 

@media (min-width: 1199px) { 
 .section-header p { 
 /* max-width: 60%; */
 } 
 } 

.breadcrumbs { 
 padding: 140px 0 60px 0; 
 min-height: 30vh; 
 position: relative; 
 background-size: cover; 
 background-position: center; 
 background-repeat: no-repeat; 
 } 

.breadcrumbs:before { 
 content: ""; 
 background-color: rgba(0, 0, 0, 0.2); 
 position: absolute; 
 inset: 0; 
 } 

.breadcrumbs h2 { 
 font-size: 50px; 
 font-weight: 600; 
 color: #fff; 
 letter-spacing:-3px;
 font-family: var(--font-secondary); 
 } 

.breadcrumbs ol { 
 display: flex; 
 flex-wrap: wrap; 
 list-style: none; 
 padding: 0 0 10px 0; 
 margin: 0; 
 font-size: 16px; 
 font-weight: 500; 
 color: var(--color-primary); 
 } 

.breadcrumbs ol a { 
 color: rgba(255, 255, 255, 0.8); 
 transition: 0.3s; 
 } 

.breadcrumbs ol a:hover { 
 text-decoration: underline; 
 } 

.breadcrumbs ol li+li { 
 padding-left: 10px; 
 } 

.breadcrumbs ol li+li::before { 
 display: inline-block; 
 padding-right: 10px; 
 color: #fff; 
 content: "/"; 
 } 

.scroll-top { 
 position: fixed; 
 visibility: hidden; 
 opacity: 0; 
 right: 15px; 
 bottom: 15px; 
 z-index: 99999; 
 background: var(--color-primary); 
 width: 40px; 
 height: 40px; 
 border-radius: 4px; 
 transition: all 0.4s; 
 } 

.scroll-top i { 
 font-size: 24px; 
 color: var(--color-secondary); 
 line-height: 0; 
 } 

.scroll-top:hover { 
 background: #ffc732; 
 color: #fff; 
 } 

.scroll-top.active { 
 visibility: visible; 
 opacity: 1; 
 } 

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader { 
 position: fixed; 
 inset: 0; 
 z-index: 999999; 
 overflow: hidden; 
 background: #fff; 
 transition: all 0.6s ease-out; 
 } 

#preloader:before { 
 content: ""; 
 position: fixed; 
 top: calc(50% - 30px); 
 left: calc(50% - 30px); 
 border: 6px solid #fff; 
 border-color: var(--color-primary) transparent var(--color-primary) transparent; 
 border-radius: 50%; 
 width: 60px; 
 height: 60px; 
 -webkit-animation: animate-preloader 1.5s linear infinite; 
 animation: animate-preloader 1.5s 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); 
 } 
 } 

@media screen and (max-width: 768px) { 
 [data-aos-delay] { 
 transition-delay: 0 !important; 
 } 
 } 

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header { 
 background: rgba(20, 20, 20, 0.6); 
 z-index: 997; 
 position: fixed; 
 padding: 25px 0; 
 top: 0; 
 left: 0; 
 right: 0; 
 } 

.header .logo img { 
 max-height: 45px; 
 margin-right: 6px; 
 } 

.header .logo h1 { 
 font-size: 24px; 
 font-weight: 700; 
 color: #fff; 
 margin-bottom: 0; 
 font-family: var(--font-primary); 
 } 

.header .logo h1 span { 
 color: var(--color-primary); 
 } 
.header100 { 
 background: rgba(20, 20, 20) !important; 
 } 
/*--------------------------------------------------------------
# Desktop Navigation
--------------------------------------------------------------*/
@media (min-width: 1280px) { 
 .navbar { 
 padding: 0; 
 } 

 .navbar ul { 
 margin: 0; 
 padding: 0; 
 display: flex; 
 list-style: none; 
 align-items: center; 
 } 

 .navbar li { 
 position: relative; 
 } 

 .navbar>ul>li { 
 white-space: nowrap; 
 padding: 10px 0 10px 40px; 
 } 

 .navbar a,
 .navbar a:focus { 
 display: flex; 
 align-items: center; 
 justify-content: space-between; 
 padding: 0 3px; 
 font-family: var(--font-primary); 
 font-size: 17px; 
 font-weight: 500; 
 color: rgba(255, 255, 255, 0.6); 
 text-transform: uppercase; 
 white-space: nowrap; 
 transition: 0.3s; 
 position: relative; 
 } 

 .navbar a i,
 .navbar a:focus i { 
 font-size: 12px; 
 line-height: 0; 
 margin-left: 5px; 
 } 

 .navbar>ul>li>a:before { 
 content: ""; 
 position: absolute; 
 width: 100%; 
 height: 2px; 
 bottom: -6px; 
 left: 0; 
 background-color: var(--color-primary); 
 visibility: hidden; 
 width: 0px; 
 transition: all 0.3s ease-in-out 0s; 
 } 

 .navbar a:hover:before,
 .navbar li:hover>a:before,
 .navbar .active:before { 
 visibility: visible; 
 width: 100%; 
 } 

 .navbar a:hover,
 .navbar .active,
 .navbar .active:focus,
 .navbar li:hover>a { 
 color: #fff; 
 } 

 .navbar .dropdown ul { 
 display: block; 
 position: absolute; 
 left: 28px; 
 top: calc(100% + 30px); 
 margin: 0; 
 padding: 10px 0; 
 z-index: 99; 
 opacity: 0; 
 visibility: hidden; 
 background: #fff; 
 box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); 
 transition: 0.3s; 
 } 

 .navbar .dropdown ul li { 
 min-width: 200px; 
 } 

 .navbar .dropdown ul a { 
 padding: 10px 20px; 
 font-size: 15px; 
 text-transform: none; 
 color: var(--color-default); 
 font-weight: 400; 
 } 

 .navbar .dropdown ul a i { 
 font-size: 12px; 
 } 

 .navbar .dropdown ul a:hover,
 .navbar .dropdown ul .active:hover,
 .navbar .dropdown ul li:hover>a { 
 color: var(--color-primary); 
 } 

 .navbar .dropdown:hover>ul { 
 opacity: 1; 
 top: 100%; 
 visibility: visible; 
 } 

 .navbar .dropdown .dropdown ul { 
 top: 0; 
 left: calc(100% - 30px); 
 visibility: hidden; 
 } 

 .navbar .dropdown .dropdown:hover>ul { 
 opacity: 1; 
 top: 0; 
 left: 100%; 
 visibility: visible; 
 } 
 } 

@media (min-width: 1280px) and (max-width: 1366px) { 
 .navbar .dropdown .dropdown ul { 
 left: -90%; 
 } 

 .navbar .dropdown .dropdown:hover>ul { 
 left: -100%; 
 } 
 } 

@media (min-width: 1280px) { 

 .mobile-nav-show,
 .mobile-nav-hide { 
 display: none; 
 } 
 } 

/*--------------------------------------------------------------
# Mobile Navigation
--------------------------------------------------------------*/
@media (max-width: 1279px) { 
 .navbar { 
 position: fixed; 
 top: 0; 
 right: -100%; 
 width: 100%; 
 max-width: 400px; 
 bottom: 0; 
 transition: 0.3s; 
 z-index: 9997; 
 } 

 .navbar ul { 
 position: absolute; 
 inset: 0; 
 padding: 50px 0 10px 0; 
 margin: 0; 
 background: rgba(0, 0, 0, 0.8); 
 overflow-y: auto; 
 transition: 0.3s; 
 z-index: 9998; 
 } 

 .navbar a,
 .navbar a:focus { 
 display: flex; 
 align-items: center; 
 justify-content: space-between; 
 padding: 10px 20px; 
 font-family: var(--font-primary); 
 font-size: 15px; 
 font-weight: 500; 
 color: rgba(255, 255, 255, 0.7); 
 white-space: nowrap; 
 text-transform: uppercase; 
 transition: 0.3s; 
 } 

 .navbar a i,
 .navbar a:focus i { 
 font-size: 12px; 
 line-height: 0; 
 margin-left: 5px; 
 } 

 .navbar a:hover,
 .navbar .active,
 .navbar .active:focus,
 .navbar li:hover>a { 
 color: #fff; 
 } 

 .navbar .dropdown ul,
 .navbar .dropdown .dropdown ul { 
 position: static; 
 display: none; 
 padding: 10px 0; 
 margin: 10px 20px; 
 transition: all 0.5s ease-in-out; 
 border: 1px solid #222428; 
 } 

 .navbar .dropdown>.dropdown-active,
 .navbar .dropdown .dropdown>.dropdown-active { 
 display: block; 
 } 

 .mobile-nav-show { 
 position: relative; 
 color: #fff; 
 font-size: 28px; 
 cursor: pointer; 
 line-height: 0; 
 transition: 0.5s; 
 z-index: 9999; 
 padding-right: 10px; 
 } 

 .mobile-nav-hide { 
 color: #fff; 
 font-size: 32px; 
 cursor: pointer; 
 line-height: 0; 
 transition: 0.5s; 
 position: fixed; 
 right: 20px; 
 top: 20px; 
 z-index: 9999; 
 } 

 .mobile-nav-active { 
 overflow: hidden; 
 } 

 .mobile-nav-active .navbar { 
 right: 0; 
 } 

 .mobile-nav-active .navbar:before { 
 content: ""; 
 position: fixed; 
 inset: 0; 
 background: rgba(0, 0, 0, 0.6); 
 z-index: 9996; 
 } 
 } 

/*--------------------------------------------------------------
# Get Started Section
--------------------------------------------------------------*/
.get-started .content { 
 padding: 30px 0; 
 } 

.get-started .content h3 { 
 font-size: 36px; 
 color: var(--color-secondary); 
 font-weight: 600; 
 margin-bottom: 25px; 
 padding-bottom: 25px; 
 position: relative; 
 } 

.get-started .content h3:after { 
 content: ""; 
 position: absolute; 
 display: block; 
 width: 60px; 
 height: 4px; 
 background: var(--color-primary); 
 left: 0; 
 bottom: 0; 
 } 


.get-started .php-email-form { 
 background: #eee; 
 padding: 30px; 
 height: 100%; 
 border-radius: 8px; 
 } 

@media (max-width: 575px) { 
 .get-started .php-email-form { 
 padding: 20px; 
 } 
 } 

.get-started .php-email-form h3 { 
 font-size: 14px; 
 font-weight: 700; 
 text-transform: uppercase; 
 letter-spacing: 1px; 
 } 

.get-started .php-email-form p { 
 font-size: 14px; 
 margin-bottom: 20px; 
 } 

.get-started .php-email-form .error-message { 
 display: none; 
 color: #fff; 
 background: #df1529; 
 text-align: left; 
 padding: 15px; 
 margin-bottom: 24px; 
 font-weight: 600; 
 } 

.get-started .php-email-form .sent-message { 
 display: none; 
 color: #fff; 
 background: #059652; 
 text-align: center; 
 padding: 15px; 
 margin-bottom: 24px; 
 font-weight: 600; 
 } 

.get-started .php-email-form .loading { 
 display: none; 
 background: #fff; 
 text-align: center; 
 padding: 15px; 
 margin-bottom: 24px; 
 } 

.get-started .php-email-form .loading:before { 
 content: ""; 
 display: inline-block; 
 border-radius: 50%; 
 width: 24px; 
 height: 24px; 
 margin: 0 10px -6px 0; 
 border: 3px solid #059652; 
 border-top-color: #fff; 
 -webkit-animation: animate-loading 1s linear infinite; 
 animation: animate-loading 1s linear infinite; 
 } 

.get-started .php-email-form input,
.get-started .php-email-form textarea { 
 border-radius: 0; 
 box-shadow: none; 
 font-size: 14px; 
 border-radius: 0; 
 } 

.get-started .php-email-form input:focus,
.get-started .php-email-form textarea:focus { 
 border-color: var(--color-primary); 
 } 

.get-started .php-email-form input { 
 padding: 10px; 
 margin-top: 0 !important; 
 vertical-align: middle !important; 
 } 

.get-started .php-email-form textarea { 
 padding: 12px 15px; 
 } 

.get-started .php-email-form button[type=submit] { 
 background: var(--color-primary); 
 border: 0; 
 padding: 10px 30px; 
 color: #fff; 
 transition: 0.4s; 
 border-radius: 4px; 
 } 

.get-started .php-email-form button[type=submit]:hover { 
 background: rgba(254, 185, 0, 0.8); 
 } 

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

 100% { 
 transform: rotate(360deg); 
 } 
 } 

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

 100% { 
 transform: rotate(360deg); 
 } 
 } 

/*--------------------------------------------------------------
# Constructions Section
--------------------------------------------------------------*/
.constructions .card-item { 
 border: 1px solid rgba(82, 86, 94, 0.2); 
 background: #fff; 
 position: relative; 
 border-radius: 0; 
 } 

.constructions .card-item .card-bg { 
 min-height: 300px; 
 background-size: cover; 
 background-position: center; 
 background-repeat: no-repeat; 
 } 

.constructions .card-item .card-body { 
 padding: 30px; 
 } 

.constructions .card-item h4 { 
 font-weight: 700; 
 font-size: 20px; 
 margin-bottom: 15px; 
 color: var(--color-secondary); 
 } 

.constructions .card-item p { 
 color: var(--color-secondary); 
 margin: 0; 
 } 

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item { 
 /* background: #fff; */
 height: 100%; 
 text-align: center; 
 } 

.services .service-item .icon { 
 width: 48px; 
 height: 48px; 
 position: relative; 
 margin-bottom: 50px; 
 } 

.services .service-item .icon i { 
 color: var(--color-secondary); 
 font-size: 40px; 
 transition: ease-in-out 0.3s; 
 z-index: 2; 
 position: relative; 
 line-height: 1.8; 
 } 

.services .service-item .icon:before { 
 position: absolute; 
 content: ""; 
 height: 100%; 
 width: 100%; 
 background: #f0f1f2; 
 border-radius: 50px; 
 z-index: 1; 
 top: 10px; 
 right: -15px; 
 transition: 0.3s; 
 } 

.services .service-item h3 { 
 color: var(--color-default); 
 font-weight: 700; 
 margin: 0 0 20px 0; 
 padding-bottom: 8px; 
 font-size: 22px; 
 position: relative; 
 display: inline-block; 
 border-bottom: 4px solid #ebebed; 
 transition: 0.3s; 
 } 

.services .service-item p { 
 line-height: 24px; 
 font-size: 14px; 
 margin-bottom: 0; 
 } 

.services .service-item .readmore { 
 margin-top: 15px; 
 display: inline-block; 
 color: var(--color-primary); 
 } 

.services .service-item:hover .icon:before { 
 background: var(--color-primary); 
 } 

.services .service-item:hover h3 { 
 border-color: var(--color-primary); 
 } 

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .nav-tabs { 
 border: 0; 
 } 

.features .nav-link { 
 padding: 15px 0; 
 transition: 0.3s; 
 color: var(--color-secondary); 
 border-radius: 0; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 cursor: pointer; 
 height: 100%; 
 border: 0; 
 border-bottom: 4px solid #e2e4e6; 
 } 

.features .nav-link i { 
 padding-right: 15px; 
 font-size: 48px; 
 } 

.features .nav-link h4 { 
 font-size: 18px; 
 font-weight: 600; 
 margin: 0; 
 } 

@media (max-width: 575px) { 
 .features .nav-link h4 { 
 font-size: 16px; 
 } 
 } 

.features .nav-link:hover { 
 color: var(--color-primary); 
 } 

.features .nav-link.active { 
 color: var(--color-primary); 
 background-color: transparent; 
 border-color: var(--color-primary); 
 } 

.features .tab-content { 
 margin-top: 30px; 
 } 

.features .tab-pane h3 { 
 font-weight: 700; 
 font-size: 32px; 
 position: relative; 
 margin-bottom: 20px; 
 padding-bottom: 20px; 
 } 

.features .tab-pane h3:after { 
 content: ""; 
 position: absolute; 
 display: block; 
 width: 60px; 
 height: 3px; 
 background: var(--color-primary); 
 left: 0; 
 bottom: 0; 
 } 

.features .tab-pane ul { 
 list-style: none; 
 padding: 0; 
 } 

.features .tab-pane ul li { 
 padding-top: 10px; 
 } 

.features .tab-pane ul i { 
 font-size: 20px; 
 padding-right: 4px; 
 color: var(--color-primary); 
 } 

.features .tab-pane p:last-child { 
 margin-bottom: 0; 
 } 

/*--------------------------------------------------------------
# Alt Services Section
--------------------------------------------------------------*/
.alt-services .img-bg { 
 background-size: cover; 
 min-height: 400px; 
 } 

.alt-services h3 { 
 font-size: 36px; 
 font-weight: 700; 
 line-height: 1.4; 
 color: var(--color-secondary); 
 margin-bottom: 25px; 
 padding-bottom: 20px; 
 position: relative; 
 } 

.alt-services h3:after { 
 content: ""; 
 position: absolute; 
 display: block; 
 width: 40px; 
 height: 3px; 
 background: var(--color-primary); 
 left: 0; 
 bottom: 0; 
 } 

.alt-services .icon-box { 
 margin-top: 50px; 
 } 

.alt-services .icon-box i { 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 color: var(--color-primary); 
 margin-right: 25px; 
 font-size: 28px; 
 width: 56px; 
 height: 56px; 
 border-radius: 4px; 
 line-height: 0; 
 box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.08); 
 background-color: #fff; 
 transition: 0.3s; 
 } 

.alt-services .icon-box:hover i { 
 background-color: var(--color-primary); 
 color: #fff; 
 } 

.alt-services .icon-box h4 { 
 font-weight: 700; 
 margin-bottom: 10px; 
 font-size: 18px; 
 } 

.alt-services .icon-box h4 a { 
 color: #000; 
 transition: 0.3s; 
 } 

.alt-services .icon-box h4 a:hover { 
 color: var(--color-primary); 
 } 

.alt-services .icon-box p { 
 line-height: 24px; 
 font-size: 14px; 
 margin-bottom: 0; 
 } 

/*--------------------------------------------------------------
# Servie Cards Section
--------------------------------------------------------------*/
.services-cards h3 { 
 font-size: 20px; 
 font-weight: 700; 
 color: var(--color-secondary); 
 } 

.services-cards p { 
 font-size: 15px; 
 } 

.services-cards ul li { 
 display: flex; 
 align-items: center; 
 font-size: 14px; 
 padding-top: 10px; 
 } 

.services-cards ul li i { 
 font-size: 16px; 
 color: var(--color-primary); 
 margin-right: 6px; 
 } 

/*--------------------------------------------------------------
# Projet Details Section
--------------------------------------------------------------*/
.project-details .portfolio-details-slider img { 
 width: 100%; 
 } 

.project-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet { 
 width: 12px; 
 height: 12px; 
 background-color: rgba(255, 255, 255, 0.7); 
 opacity: 1; 
 } 

.project-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active { 
 background-color: var(--color-primary); 
 } 

.project-details .swiper-button-prev,
.project-details .swiper-button-next { 
 width: 48px; 
 height: 48px; 
 } 

.project-details .swiper-button-prev:after,
.project-details .swiper-button-next:after { 
 color: rgba(255, 255, 255, 0.8); 
 background-color: rgba(0, 0, 0, 0.2); 
 font-size: 24px; 
 border-radius: 50%; 
 width: 48px; 
 height: 48px; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 transition: 0.3s; 
 } 

.project-details .swiper-button-prev:hover:after,
.project-details .swiper-button-next:hover:after { 
 background-color: rgba(0, 0, 0, 0.6); 
 } 

@media (max-width: 575px) { 

 .project-details .swiper-button-prev,
 .project-details .swiper-button-next { 
 display: none; 
 } 
 } 

.project-details .portfolio-info h3 { 
 font-size: 22px; 
 font-weight: 700; 
 margin-bottom: 20px; 
 padding-bottom: 20px; 
 position: relative; 
 } 

.project-details .portfolio-info h3:after { 
 content: ""; 
 position: absolute; 
 display: block; 
 width: 50px; 
 height: 3px; 
 background: var(--color-primary); 
 left: 0; 
 bottom: 0; 
 } 

.project-details .portfolio-info ul { 
 list-style: none; 
 padding: 0; 
 font-size: 15px; 
 } 

.project-details .portfolio-info ul li { 
 display: flex; 
 flex-direction: column; 
 padding-bottom: 15px; 
 } 

.project-details .portfolio-info ul strong { 
 text-transform: uppercase; 
 font-weight: 400; 
 color: #838893; 
 font-size: 14px; 
 } 

.project-details .portfolio-info .btn-visit { 
 padding: 8px 40px; 
 background: var(--color-primary); 
 color: #fff; 
 border-radius: 50px; 
 transition: 0.3s; 
 } 

.project-details .portfolio-info .btn-visit:hover { 
 background: #ffc019; 
 } 

.project-details .portfolio-description h2 { 
 font-size: 26px; 
 font-weight: 700; 
 margin-bottom: 20px; 
 color: var(--color-secondary); 
 } 

.project-details .portfolio-description p { 
 padding: 0; 
 } 

.project-details .portfolio-description .testimonial-item { 
 padding: 30px 30px 0 30px; 
 position: relative; 
 background: #f5f6f7; 
 height: 100%; 
 margin-bottom: 50px; 
 } 

.project-details .portfolio-description .testimonial-item .testimonial-img { 
 width: 90px; 
 border-radius: 50px; 
 border: 6px solid #fff; 
 float: left; 
 margin: 0 10px 0 0; 
 } 

.project-details .portfolio-description .testimonial-item h3 { 
 font-size: 18px; 
 font-weight: bold; 
 margin: 15px 0 5px 0; 
 padding-top: 20px; 
 } 

.project-details .portfolio-description .testimonial-item h4 { 
 font-size: 14px; 
 color: #6c757d; 
 margin: 0; 
 } 

.project-details .portfolio-description .testimonial-item .quote-icon-left,
.project-details .portfolio-description .testimonial-item .quote-icon-right { 
 color: #ffd565; 
 font-size: 26px; 
 line-height: 0; 
 } 

.project-details .portfolio-description .testimonial-item .quote-icon-left { 
 display: inline-block; 
 left: -5px; 
 position: relative; 
 } 

.project-details .portfolio-description .testimonial-item .quote-icon-right { 
 display: inline-block; 
 right: -5px; 
 position: relative; 
 top: 10px; 
 transform: scale(-1, -1); 
 } 

.project-details .portfolio-description .testimonial-item p { 
 font-style: italic; 
 margin: 0 0 15px 0 0 0; 
 padding: 0; 
 } 

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list { 
 padding: 10px 30px; 
 border: 1px solid #d5d7da; 
 margin-bottom: 20px; 
 } 

.service-details .services-list a { 
 display: block; 
 line-height: 1; 
 padding: 8px 0 8px 15px; 
 border-left: 3px solid #d9e3e8; 
 margin: 20px 0; 
 color: var(--color-secondary); 
 transition: 0.3s; 
 } 

.service-details .services-list a.active { 
 font-weight: 700; 
 border-color: var(--color-primary); 
 } 

.service-details .services-list a:hover { 
 border-color: var(--color-primary); 
 } 

.service-details .services-img { 
 margin-bottom: 20px; 
 } 

.service-details h3 { 
 font-size: 28px; 
 font-weight: 700; 
 } 

.service-details h4 { 
 font-size: 20px; 
 font-weight: 700; 
 } 

.service-details p { 
 font-size: 15px; 
 } 

.service-details ul { 
 list-style: none; 
 padding: 0; 
 font-size: 15px; 
 } 

.service-details ul li { 
 padding: 5px 0; 
 display: flex; 
 align-items: center; 
 } 

.service-details ul i { 
 font-size: 20px; 
 margin-right: 8px; 
 color: var(--color-primary); 
 } 

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item { 
 box-shadow: 0 0 25px rgba(0, 0, 0, 0.08); 
 padding: 20px 0 30px 0; 
 } 

.contact .info-item i { 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 width: 56px; 
 height: 56px; 
 font-size: 24px; 
 line-height: 0; 
 color: var(--color-primary); 
 border-radius: 50%; 
 border: 2px dotted #ffd565; 
 } 

.contact .info-item h3 { 
 font-size: 20px; 
 color: #6c757d; 
 font-weight: 700; 
 margin: 10px 0; 
 } 

.contact .info-item p { 
 padding: 0; 
 line-height: 24px; 
 font-size: 14px; 
 margin-bottom: 0; 
 } 

.contact .php-email-form { 
 width: 100%; 
 background: #fff; 
 box-shadow: 0 0 25px rgba(0, 0, 0, 0.08); 
 padding: 30px; 
 } 

.contact .php-email-form .form-group { 
 padding-bottom: 20px; 
 } 

.contact .php-email-form .error-message { 
 display: none; 
 color: #fff; 
 background: #df1529; 
 text-align: left; 
 padding: 15px; 
 font-weight: 600; 
 } 

.contact .php-email-form .error-message br+br { 
 margin-top: 25px; 
 } 

.contact .php-email-form .sent-message { 
 display: none; 
 color: #fff; 
 background: #059652; 
 text-align: center; 
 padding: 15px; 
 font-weight: 600; 
 } 

.contact .php-email-form .loading { 
 display: none; 
 background: #fff; 
 text-align: center; 
 padding: 15px; 
 } 

.contact .php-email-form .loading:before { 
 content: ""; 
 display: inline-block; 
 border-radius: 50%; 
 width: 24px; 
 height: 24px; 
 margin: 0 10px -6px 0; 
 border: 3px solid #059652; 
 border-top-color: #fff; 
 -webkit-animation: animate-loading 1s linear infinite; 
 animation: animate-loading 1s linear infinite; 
 } 

.contact .php-email-form input,
.contact .php-email-form textarea { 
 border-radius: 0; 
 box-shadow: none; 
 font-size: 14px; 
 } 

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus { 
 border-color: var(--color-primary); 
 } 

.contact .php-email-form input { 
 height: 44px; 
 } 

.contact .php-email-form textarea { 
 padding: 10px 12px; 
 } 

.contact .php-email-form button[type=submit] { 
 background: var(--color-primary); 
 border: 0; 
 padding: 10px 35px; 
 color: #fff; 
 transition: 0.4s; 
 border-radius: 5px; 
 } 

.contact .php-email-form button[type=submit]:hover { 
 background: rgba(254, 185, 0, 0.8); 
 } 

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

 100% { 
 transform: rotate(360deg); 
 } 
 } 

/*--------------------------------------------------------------
# Recent Blog Posts Section
--------------------------------------------------------------*/
.recent-blog-posts .post-item { 
 box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.06); 
 transition: 0.3s; 
 } 

.recent-blog-posts .post-item .post-img img { 
 transition: 0.5s; 
 } 

.recent-blog-posts .post-item .post-date { 
 position: absolute; 
 right: 0; 
 bottom: 0; 
 background-color: var(--color-primary); 
 color: #fff; 
 text-transform: uppercase; 
 font-size: 13px; 
 padding: 6px 12px; 
 font-weight: 500; 
 } 

.recent-blog-posts .post-item .post-content { 
 padding: 30px; 
 } 

.recent-blog-posts .post-item .post-title { 
 font-size: 24px; 
 color: var(--color-secondary); 
 font-weight: 700; 
 transition: 0.3s; 
 margin-bottom: 15px; 
 } 

.recent-blog-posts .post-item .meta i { 
 font-size: 16px; 
 color: var(--color-primary); 
 } 

.recent-blog-posts .post-item .meta span { 
 font-size: 15px; 
 color: #838893; 
 } 

.recent-blog-posts .post-item hr { 
 color: #888; 
 margin: 20px 0; 
 } 

.recent-blog-posts .post-item .readmore { 
 display: flex; 
 align-items: center; 
 font-weight: 600; 
 line-height: 1; 
 transition: 0.3s; 
 color: #838893; 
 } 

.recent-blog-posts .post-item .readmore i { 
 line-height: 0; 
 margin-left: 6px; 
 font-size: 16px; 
 } 

.recent-blog-posts .post-item:hover .post-title,
.recent-blog-posts .post-item:hover .readmore { 
 color: var(--color-primary); 
 } 

.recent-blog-posts .post-item:hover .post-img img { 
 transform: scale(1.1); 
 } 

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero { 
 overflow-x: hidden; 
 padding: 0; 
 } 

.hero .carousel { 
 width: 100%; 
 min-height: 100vh; 
 padding: 80px 0; 
 margin: 0; 
 position: relative; 
 } 

.hero .carousel-item { 
 position: absolute; 
 inset: 0; 
 background-size: cover; 
 background-position: center; 
 background-repeat: no-repeat; 
 overflow: hidden; 
 z-index: 1; 
 transition-duration: 0.4s; 
 } 

.hero .carousel-item::before { 
 content: ""; 

 background-color: rgba(0, 0, 0, 0.1); 
 position: absolute; 
 inset: 0; 
 } 

.hero .info { 
 position: absolute; 
 inset: 0; 
 z-index: 2; 
 } 

@media (max-width: 768px) { 
 .hero .info { 
 padding: 0 50px; 
 } 
 } 

.hero .info h2 { 
 color: #fff; 
 margin-bottom: 30px; 
 padding-bottom: 30px; 
 font-size: 56px; 
 font-weight: 700; 
 position: relative; 
 } 

.hero .info h2:after { 
 content: ""; 
 position: absolute; 
 display: block; 
 width: 80px; 
 height: 4px; 
 /* background: var(--color-primary); */
 left: 0; 
 right: 0; 
 bottom: 0; 
 margin: auto; 
 } 

@media (max-width: 768px) { 
 .hero .info h2 { 
 font-size: 36px; 
 } 
 } 

.hero .info p { 
 color: rgba(255, 255, 255, 0.9); 
 font-size: 21px; 
 } 

.hero .info .btn-get-started { 
 font-family: var(--font-primary); 
 font-weight: 500; 
 font-size: 16px; 
 letter-spacing: 1px; 
 display: inline-block; 
 padding: 12px 40px; 
 border-radius: 50px; 
 transition: 0.5s; 
 margin: 10px; 
 color: #fff; 
 border: 2px solid var(--color-primary); 
 } 

.hero .info .btn-get-started:hover { 
 background: var(--color-primary); 
 } 

.hero .carousel-control-prev { 
 justify-content: start; 
 } 

@media (min-width: 640px) { 
 .hero .carousel-control-prev { 
 padding-left: 15px; 
 } 
 } 

.hero .carousel-control-next { 
 justify-content: end; 
 } 

@media (min-width: 640px) { 
 .hero .carousel-control-next { 
 padding-right: 15px; 
 } 
 } 

.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon { 
 background: none; 
 font-size: 26px; 
 line-height: 0; 
 background: rgba(255, 255, 255, 0.2); 
 color: rgba(255, 255, 255, 0.6); 
 border-radius: 50px; 
 width: 54px; 
 height: 54px; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 } 

.hero .carousel-control-prev,
.hero .carousel-control-next { 
 z-index: 3; 
 transition: 0.3s; 
 } 

.hero .carousel-control-prev:focus,
.hero .carousel-control-next:focus { 
 opacity: 0.5; 
 } 

.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover { 
 opacity: 0.9; 
 } 

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer { 
 color: #eaeaea; 
 font-size: 13px; 

 padding: 52px 0 50px; 
 position: relative; 
 } 

.footer:before { 
 content: ""; 
 background: rgba(39, 41, 48, 1); 
 position: absolute; 
 inset: 0; 
 } 

.footer .footer-content .footer-info { 
 margin-bottom: 30px; 
 } 

.footer .footer-content .footer-info h3 { 
 font-size: 28px; 
 margin: 0 0 20px 0; 
 padding: 2px 0 2px 0; 
 line-height: 1; 
 font-weight: 700; 
 text-transform: uppercase; 
 } 

.footer .footer-content .footer-info h3 span { 
 color: var(--color-primary); 
 } 

.footer .footer-content .footer-info p { 
 font-size: 14px; 
 line-height: 24px; 
 margin-bottom: 0; 
 font-family: var(--font-primary); 
 color: #fff; 
 } 

.footer .footer-content .social-links a { 
 font-size: 18px; 
 display: inline-block; 
 background: rgba(255, 255, 255, 0.1); 
 color: #fff; 
 line-height: 1; 
 margin-right: 8px; 
 border-radius: 4px; 
 width: 36px; 
 height: 36px; 
 transition: 0.3s; 
 } 

.footer .footer-content .social-links a:hover { 
 background: var(--color-primary); 
 text-decoration: none; 
 } 

.footer .footer-content h4 { 
 font-size: 16px; 
 font-weight: 600; 
 color: #fff; 
 position: relative; 
 padding-bottom: 12px; 
 } 

.footer .footer-content .footer-links { 
 margin-bottom: 30px; 
 } 

.footer .footer-content .footer-links ul { 
 list-style: none; 
 padding: 0; 
 margin: 0; 
 } 

.footer .footer-content .footer-links ul li { 
 padding: 8px 0; 
 } 

.footer .footer-content .footer-links ul li:first-child { 
 padding-top: 0; 
 } 

.footer .footer-content .footer-links ul a { 
 color: rgba(255, 255, 255, 0.6); 
 transition: 0.3s; 
 display: inline-block; 
 line-height: 1; 
 } 

.footer .footer-content .footer-links ul a:hover { 
 color: #fff; 
 } 

.footer .footer-legal .copyright { 
 /*
 padding-top: 30px; 
 border-top: 1px solid rgba(255, 255, 255, 0.15); 
 */
 } 

.footer .footer-legal .credits { 
 font-size: 13px; 
 color: #fff; 
 } 

.footer .footer-legal .credits a { 
 color: var(--color-primary); 
 } 

.overlay { 
 position: relative; 
 } 

/*
#client { background: #233142; color:rgba(255, 255, 255, 0.9); !important; } 
#client .section-header h2 { color:rgba(255, 255, 255, 0.9); !important; } 
*/
#client .client img { 
 width: 150px; 
 } 

.p-l-5 { 
 padding-left: 5px; 
 } 

.p-l-10 { 
 padding-left: 10px; 
 } 

.p-l-20 { 
 padding-left: 20px; 
 } 

.p-t-10 { 
 padding-top: 10px; 
 } 

.p-t-15 { 
 padding-top: 10px; 
 } 

.p-t-20 { 
 padding-top: 20px; 
 } 

.p-t-30 { 
 padding-top: 30px; 
 } 

.p-t-40 { 
 padding-top: 40px; 
 } 

.p-t-50 { 
 padding-top: 50px; 
 } 

.p-t-80 { 
 padding-top: 80px !important; 
 } 

.p-b-20 { 
 padding-bottom: 20px; 
 } 

.p-b-30 { 
 padding-bottom: 30px; 
 } 

.p-b-40 { 
 padding-bottom: 40px; 
 } 

.p-b-50 { 
 padding-bottom: 50px; 
 } 

.p-b-0 { 
 padding-bottom: 0px !important
 } 

.m-t-5 { 
 margin-top: 5px; 
 } 

.m-t-10 { 
 margin-top: 10px; 
 } 

.m-t-20 { 
 margin-top: 20px; 
 } 

.m-t-50 { 
 margin-top: 50px; 
 } 

.form-check-label { 
 font-size: 15px; 
 padding-left: 5px; 
 } 

.text-center { 
 text-align: center; 
 } 

img.per70 { 
 width: 70%; 
 } 

img.per75 { 
 width: 75%; 
 } 

img.per80 { 
 width: 80%; 
 } 

@media (min-width: 1400px) { 
 .container-v { 
 max-width: 1920px; 

 img.per70 { 
 width: 70%; 
 } 

 img.per75 { 
 width: 75%; 
 } 

 img.per80 { 
 width: 80%; 
 } 
 } 
 } 


.container-v { 
 --bs-gutter-x: 1.5rem; 
 --bs-gutter-y: 0; 
 width: 100%; 
 padding-right: calc(var(--bs-gutter-x) * 0.5); 
 padding-left: calc(var(--bs-gutter-x) * 0.5); 
 margin-right: auto; 
 margin-left: auto; 
 } 

@media (min-width: 576px) { 
 .container-v { 
 max-width: 540px; 
 } 
 } 

@media (min-width: 768px) { 
 .container-v { 
 max-width: 720px; 
 } 
 } 

@media (min-width: 992px) { 
 .container-v { 
 max-width: 960px; 
 } 
 } 

@media (min-width: 1200px) { 
 .container-v { 
 max-width: 1140px; 
 } 
 } 

@media (min-width: 1400px) { 
 .container-v { 
 max-width: 1920px; 
 } 
 } 


#schedule { 
 padding: 60px 0 60px 0; 
 } 

#schedule .nav-tabs { 
 text-align: center; 
 margin: auto; 
 display: block; 
 border: 0 !important; 
 margin-bottom: 30px; 
 } 

#schedule .nav-tabs li { 
 display: inline-block; 
 margin-bottom: 0; 
 } 

#schedule .nav-tabs a { 
 border: none; 
 width: 416px; 
 height: 175px; 
 border-radius: 0 !important; 
 } 

#schedule .nav-tabs .t1 { 
 background: url(../img/process-1.png) no-repeat; 
 } 

#schedule .nav-tabs .t2 { 
 background: url(../img/process-2.png) no-repeat; 
 } 

#schedule .nav-tabs .t3 { 
 background: url(../img/process-3.png) no-repeat; 
 } 

#schedule .nav-tabs .t1.active { 
 background: url(../img/process-1-r.png) no-repeat; 
 } 

#schedule .nav-tabs .t2.active { 
 background: url(../img/process-2-r.png) no-repeat; 
 } 

#schedule .nav-tabs .t3.active { 
 background: url(../img/process-3-r.png) no-repeat; 
 } 

#schedule .sub-heading { 
 text-align: center; 
 font-size: 23px; 
 font-weight: 600; 
 margin: 60px auto 50px; 
 } 

#schedule .tab-pane { 
 transition: ease-in-out .2s; 
 } 

#schedule .schedule-item { 
 border-bottom: 1px solid #cad4f6; 
 padding-top: 15px; 
 padding-bottom: 15px; 
 transition: background-color ease-in-out 0.3s; 
 } 

#schedule .schedule-item:hover { 
 background-color: #fff; 
 } 

#schedule .schedule-item time { 
 padding-bottom: 5px; 
 display: inline-block; 
 } 

#schedule .schedule-item .speaker { 
 width: 60px; 
 height: 60px; 
 overflow: hidden; 
 border-radius: 50%; 
 float: left; 
 margin: 0 10px 10px 0; 
 } 

#schedule .schedule-item .speaker img { 
 height: 100%; 
 -webkit-transform: translateX(-50%); 
 transform: translateX(-50%); 
 margin-left: 50%; 
 transition: all ease-in-out 0.3s; 
 } 

#schedule .schedule-item h4 { 
 font-size: 18px; 
 font-weight: 600; 
 margin-bottom: 5px; 
 } 

#schedule .schedule-item h4 span { 
 font-style: italic; 
 color: #19328e; 
 font-weight: normal; 
 font-size: 16px; 
 } 

#schedule .schedule-item p { 
 font-style: italic; 
 color: #152b79; 
 margin-bottom: 0; 
 } 

#schedule .feature_stitle { 
 text-align: center; 
 font-weight: 500; 
 letter-spacing: -0.8px; 
 } 

#schedule .info-item { 
 box-shadow: 0 0 25px rgba(0, 0, 0, 0.08); 
 border: 1px solid #e2e2e2; 
 padding: 20px; 
 } 

#schedule .info-item h5 { 
 text-align: center; 
 } 

#schedule .info-item p { 
 text-align: center; 
 font-size: 15px; 
 } 

#schedule .info-item i { 
 font-size: 36px; 
 line-height: 0; 
 margin-top: 1rem; 
 margin-bottom: 15px; 
 color: #0d6efd; 
 } 

#schedule .info-item2 { 
 padding: 30px; 
 background-color: #f0f2f3; 
 border-radius: 6px; 
 } 

#schedule .info-item2 h5 { 
 text-align: center; 
 } 

#schedule .info-item2 p { 
 text-align: center; 
 font-size: 15px; 
 } 

#schedule .info-item2 i { 
 font-size: 36px; 
 line-height: 0; 
 margin-top: 1rem; 
 margin-bottom: 15px; 
 color: var(--color-primary); 
 } 

.aligncenter { 
 text-align: center; 
 } 

.screenshot-info { 
 color: #007cd5; 
 letter-spacing: -0.5px; 
 font-weight: 500; 
 } 

.services .icon-box { 
 margin-bottom: 20px; 
 padding: 30px; 
 border-radius: 6px; 
 } 

.section-bg,
.services .icon-box { 
 background-color: #f8f9fa; 
 } 

.copyright .copy { 
 margin: 0 !important; 
 } 


.icon-box li:first-child:nth-last-child(2), 
.icon-box li:first-child:nth-last-child(2)~li { width: 48.333%; } 
.icon-box li:first-child:nth-last-child(5),  
.icon-box li:first-child:nth-last-child(5)~li,
.icon-box li:first-child:nth-last-child(3), 
.icon-box li:first-child:nth-last-child(3)~li,
.icon-box li:first-child:nth-last-child(6), 
.icon-box li:first-child:nth-last-child(6)~li { width: 32%; } 
.icon-box li:first-child:nth-last-child(7), 
.icon-box li:first-child:nth-last-child(7)~li,
.icon-box li:first-child:nth-last-child(4), 
.icon-box li:first-child:nth-last-child(4)~li,
.icon-box li:first-child:nth-last-child(8), 
.icon-box li:first-child:nth-last-child(8)~li { width: 23.666%; }  
@media only screen and (max-width:800px) {
.icon-box li {
    float: none !important;
    width: 100% !important;
	display:block;
	border:none;
}
}

.icon-box { 
 overflow: hidden; 
 position: relative; 
 text-align: center; 
 } 

.icon-box li { 
 display: inline-block; 
 margin: 0 0.5% 1.4%; 
 text-align: left; 
 min-height: 610px; 
 border: 1px solid #e8e8e8; 
 background: #fff; 
 padding:0;
 } 

.h5-tit06 { 
 font-weight: 600; 
 font-size: 21px; 
 color: #111; 
 line-height: 30px; 
 letter-spacing: -1px; 
 min-height: 94px; 
 padding-top: 25px; 
 padding-right: 20px; 
 padding-left: 20px; 
 display: block; 
 } 

 .icon-box p {padding:0 20px 20px 20px; }

 .pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.pagination > a, .pagination > span {
	color: #636363;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	margin: 0 3px 5px;
	min-width: 20px;
	height: 30px;
	text-decoration: none;
	position: relative;
	font-family: Helvetica, Arial, sans-serif;
	padding: 1px 10px;
}
.pagination > span {
	pointer-events: none;
}

.pagination > a:hover {
	background-color: #444;
	color: #fff;
}
.pagination > a.page-active {
	background-color: #272930;
	color: #fff;
}

.mt-100 {margin-top:100px;}
.mt-20 {margin-top:20px;}