* { margin: 0; padding: 0; } body { background: #ffffff !important; color: var(--font-color); font-family: Open Sans, Arial, Helvetica, Verdana, sans-serif; font-size: var(--font-size); font-weight: var(--font-weight); line-height: var(--line-height); margin: 0px; overflow-x: hidden; } ul, li { list-style-type: none; margin: 0; padding: 0; } ::selection { background: #69af07; color: #fff; } ::-moz-selection { background: #69af07; color: #fff; } a { text-decoration: none; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; } a:not(.white) { color: var(--second-color); } a.white { color: #fff; } a:hover, a:focus { color: var(--first-color); text-decoration: none; } .head { font-family: "Oswald", sans-serif; } .border40 { border-radius: 40px; } .theme-bg { background: #000; } .theme-text { color: var(--first-color); } #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 99; } #status { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; background-image: url(../image/jama-loader.gif); background-repeat: no-repeat; background-position: center; margin: -100px 0 0 -100px; } header, header.top-header { width: 100%; padding: 10px 0; position: absolute; z-index: 10; } .jama-logo { position: relative; } .jama-info { color: #fff; } .jama-info ul li { display: inline-block; padding: 0 12px 0 10px; } .jama-info a { color: #fff; font-size: 16px; font-weight: 600; } .jama-info a:hover { text-decoration: none; color: rgba(255, 255, 255, 0.5); } .navigation { width: 100%; background: transparent; position: absolute; z-index: 10; top: 80px; } .navigation .navbar { padding: 0 0; } .navigation .navbar-nav .nav-link { color: #fff; font-size: 18px; padding: 40px 25px; } .navigation .navbar-nav .nav-link:hover, .navigation .navbar-nav .nav-link:active, .active { background: var(--first-color); } .navigation .navbar-header .navbar-toggler { margin: 8px 0; padding: 10px 15px; color: #ffffff; border: 1px solid #ffffff; } .navigation .dropdown-menu { border-radius: 0; margin: 0 0; padding: 0 0; } .navigation .dropdown-item { color: #fff; border-bottom: 1px solid #000; padding: 15px 10px; } .navigation .dropdown-item:focus, .navigation .dropdown-item:hover { color: #fff !important; background-color: #ddd; } .dropdown-toggle::after { transition: transform 0.15s linear; } .show.dropdown .dropdown-toggle::after { transform: translateY(5px); } .navfix { display: none; width: 100%; height: fit-content; position: fixed; padding: 20px 0; top: 0; background: #fff; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 7px; border-bottom: 2px solid black; z-index: 10000; } .navfix .navbar-nav .nav-link { color: #333; font-size: 16px; text-transform: uppercase; padding: 11px 10px; } .navfix .navbar { padding: 0 0; } .navfix .dropdown-menu { border-radius: 0; margin: 0 0; padding: 0 0; } .navfix .dropdown-item { color: #fff; border-bottom: 1px solid #000; padding: 15px 10px; } .navfix .dropdown-item:focus, .navfix .dropdown-item:hover { background-color: #ddd; } .navfix .navbar-nav .nav-link:hover, .navfix .navbar-nav .nav-link:active, .active { background: var(--first-color); color: #fff; } .swiper-container { width: 100%; height: 930px; } .slide { height: auto; min-height: 930px; background-size: cover; background-position: center center; background-repeat: no-repeat; } .slide.slide1 { background-image: url(../images/index-top-slide1.jpg); } .slide.slide2 { background-image: url(../images/index-top-slide2.jpg); } .swiper-button-next, .swiper-button-prev { width: 50px; height: 50px; border-radius: 4px; background: rgba(0, 0, 0, 1); top: 0; position: relative; display: inline-flex; } .swiper-button-wrap { visibility: hidden; opacity: 0; transition: all 0.3s ease-in; } .swiper-container:hover .swiper-button-wrap { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; visibility: visible; opacity: 1; } .swiper-button-next { left: unset; right: 80px; } .swiper-button-prev { left: 80px; right: unset; } .swiper-button-next:after, .swiper-button-prev:after { font-size: 20px; color: rgba(255, 255, 255, 1); } .ovelay { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); top: 0; bottom: 0; right: 0; left: 0; z-index: 1; } .slide-con { display: flex; align-items: center; justify-content: center; min-height: 930px; } .con-center { text-align: center; z-index: 2; } .head1 { font-size: 5rem; font-weight: 500; padding: 0 0; margin: 0 0 30px 0; } .subhead1 { font-size: 1.5rem; font-weight: 500; padding: 0 0; margin: 0 0 50px 0; } .head2 { font-size: 5rem; font-weight: 500; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; padding: 20px 0; margin: 0 0 50px 0; } .subhead2 { font-size: 1.5rem; font-weight: 500; padding: 0 0; margin: 0 0 20px 0; } .get-touch { border: 2px solid #fff; width: 206px; min-height: 66px; padding: 20px 30px; color: rgba(255, 255, 255, 0.9); display: inline-block; background: rgba(255, 255, 255, 0); } .get-touch:hover { background: rgba(255, 255, 255, 0.8); } .swiper-slide-active .slider-title { animation: slideInUp 1.5s; } .swiper-slide-active .slider-sub-title { animation: slideInUp 2s; } .swiper-slide-active .slider-buttton { animation: slideInUp 2.5s; } .bg-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; transition: 5s all; transform: scale(1.2); } .swiper-slide-active .bg-img { animation: scale 5s ease forwards; } @keyframes scale { 0% { transform: scale(1); } 100% { transform: scale(1.2); } } .service-text { font-size: 4.4rem; font-weight: 700; text-transform: uppercase; } .service-subtext { font-size: 1.5rem; font-weight: 400; } .jama-service { width: 100%; padding: 100px 0; } .service-ico { box-shadow: #434f0c 0px 0px 0px 3px; border: 5px solid #fff; display: inline-block; border-radius: 100%; background: var(--first-color); position: relative; transition: all 0.25s ease-in-out 0s; } .service-ico:hover { border: 5px solid var(--first-color); display: inline-block; border-radius: 50%; } .service-ico a { display: inline-block; width: 100%; } .service-ico a i { font-size: 2.2em; width: 100px; height: 100px; line-height: 100px; text-align: center; color: #fff; } .service-info { font-size: 20px; text-transform: uppercase; font-weight: 600; padding: 0 0; margin: 40px 0; } .service-desc { padding: 0 0; margin: 0 0 10px 0; font-weight: 600; color: #616161; } .service-btn { border-radius: 4px; background: var(--first-color); padding: 5px 0px; min-height: 40px; display: inline-block; min-width: 195px; text-align: center; color: #fff; border-bottom: 4px solid rgba(0, 0, 0, 0.5); } .service-btn:hover { text-align: center; background: rgba(0, 0, 0, 0.9); color: #fff; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .accom-text { font-size: 50px; padding: 0 0; margin: 15px 0 50px 0; } .mission { width: 100%; padding: 90px 0; } .mission-text { font-size: 35px; text-transform: uppercase; padding: 0 0; margin: 10px 0 50px 0; } .mission-subtext { text-align: justify; color: #616161; } .jama-contact { width: 100%; padding: 130px 0; background: url(../images/cta-bg.jpg) no-repeat; background-size: cover; background-position: center center; min-height: 524px; position: relative; } .jama-contact::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1; } .jama-contact .container { position: relative; z-index: 2; } .footer { width: 100%; position: relative; } .footer-top { width: 100%; background: #333333; padding: 60px 0; } .footer-head { font-size: 20px; color: #fff; text-transform: uppercase; margin: 0 0 40px 0; } .footer-info { font-size: 16px; color: #fff; margin: 40px 0 20px 0; font-weight: 600; text-align: justify; } .quote-text { font-size: 70px; color: #fff; font-weight: 500; padding: 0 0; margin: 0 0; } @media screen and (max-width: 768px) { .quote-text { font-size: 40px; } } .quote-subtext { font-size: 24px; color: #fff; font-weight: 600; padding: 0; margin: 30px 0 50px 0; } .partners { width: 100%; background: #fff; padding: 50px 0 70px 0; } .partners-text { font-size: 16px; font-weight: 600; padding: 0; margin: 0px 0 50px 0; } .partner-swiper { width: 100%; height: 120px; } .partner-swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .partner-swiper .swiper-wrapper .swiper-slide { display: flex; align-items: center; justify-content: center; } .footer { background-color: var(--first-color); } .footer h1, .footer h2, .footer h3, .footer h4 { color: #fff; } .footer p { line-height: 1.8; } p.footer-copy{ margin-bottom: 0!important; } .footer .social a { color: var(--first-color); display: inline-block; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background-color: #ffffff; line-height: 2.5rem; text-align: center; margin-right: 0.5rem; } .footer .social a:last-child { margin-right: 0; } .footer .social a:hover { color: #ffffff; background-color: #333333; } .back-to-top { position: fixed; bottom: 70px; background: #000; width: 50px; height: 50px; z-index: 50; -moz-border-radius: 50%; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 0; right: 4%; text-align: center; color: #fff; padding: 0px; margin: 0px; border-bottom: 6px solid rgba(0, 0, 0, 0.7); -webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; -ms-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .back-to-top a { color: #fff; font-size: 24px; text-decoration: none; vertical-align: middle; display: block; line-height: 50px; } .back-to-top:hover { background: rgba(0, 0, 0, 0.7); } .back-to-top .fa { color: #fff; font-size: 24px; } @media (max-width: 767px) { .jama-logo { text-align: center; } .jama-logo img { max-width: 100%; } .jama-info { text-align: center; width: 100%; margin: 10px auto; display: block !important; } .navbar-header { width: 100%; } .navigation .navbar-nav .nav-link { border-right: 0px solid transparent; border-bottom: 1px solid #2d2d2d; background-color: rgba(0, 0, 0, 0.9); padding: 10px 7px; } .head1 { font-size: 3rem; } .subhead1 { font-size: 1rem; } .head2 { font-size: 3rem; } .subhead2 { font-size: 1rem; } .service-text { font-size: 3.4rem; } .accom-text { font-size: 30px; } } @media (max-width: 1199px) and (min-width: 992px) { .navfix .navbar-nav .nav-link { font-size: 14px; padding: 10px 6px; } } @media (min-width: 767px) and (max-width: 992px) { .navigation .navbar-nav .nav-link { font-size: 14px; padding: 10px 7px; } .navfix { display: none !important; } } @media (max-width: 767px) { .navfix { display: none !important; } } .get-touch { transition: 0.3s linear; } .bg-grey { background: #f8f8f8; } .bread-con { position: relative; } .crumb-list { list-style: none; } .crumb-list li { display: inline; color: var(--first-color); font-weight: 600; } .crumb-list li a { color: #fff; } .crumb-list li a:hover { text-decoration: underline; } .crumb-name { text-align: center; } .content-inner { width: 100%; padding: 60px 0; } .border2x { border: 2px solid #dee2e6; } .vision-text, .approch-text { position: relative; font-size: 36px; text-transform: uppercase; padding: 0 0; margin: 10px 0 40px 0; } .vision-text{ display: flex; align-items: end; } .vision-text:after, .approch-text:after { content: ""; flex: 1; height: 2px; background: var(--first-color); } .approch-text:after { width: 69%; } .title { font-size: 46px; text-transform: uppercase; padding: 0 0; margin: 10px 0 50px 0; } .portfolio-box { min-height: 60vh; } #filters { margin: 30px auto; padding: 0; list-style: none; display: flex; align-items: center; justify-content: center; } #filters li { margin-right: 10px; } #filters li span { display: block; padding: 5px 20px; text-decoration: none; color: #fff; background: #616161; cursor: pointer; font-size: 16px; text-transform: uppercase; } .crumb-list li:not(:last-child)::after { content: '\f101'; font-family: 'FontAwesome'; font-size: 16px; color: #fff; margin: 0 15px; } #filters li span.active { background: var(--first-color); } #portfoliolist .portfolio { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; margin: 0px 0px 0 0; display: none; overflow: hidden; } .portfolio-wrapper { overflow: hidden; position: relative !important; background: #666; cursor: pointer; height: 200px; width: auto; margin-bottom: 30px; } .portfolio img { width: 100%; position: relative; top: 0; -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); height: 100%; } .portfolio .label { position: absolute; width: 100%; height: 40px; bottom: -40px; -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); } .portfolio .label-bg { background: var(--first-color); width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .portfolio .label-text { position: relative; z-index: 500; padding: 5px 8px; } .portfolio .label-text .text-title { color: #fff; } .portfolio:hover .label { bottom: 0px; } .portfolio:hover img { top: -30px; } .content-inner .page-link { color: var(--first-color); background-color: #f8f8f8; border: 1px solid #d2d2d2; font-size: 16px; text-transform: uppercase; padding: 10px 20px; } .content-inner .page-link:hover { color: #ffffff; background-color: var(--first-color); } .post-wrap { border-bottom: 1px solid #eeeeee; padding-bottom: 40px; margin-bottom: 40px; } .post-circle { width: 40px; height: 40px; display: inline-block; background: var(--first-color); border-radius: 50%; line-height: 40px; text-align: center; color: #fff; font-size: 20px; margin: 20px 0; } .author-info { font-size: 16px; font-weight: 600; padding-left: 20px; color: var(--first-color); } .post-head { font-size: 20px; font-weight: 600; margin: 0px 0 10px 0; } .post-desc { font-size: 16px; line-height: 26px; text-align: justify; } .post-wrap a { float: right; } .box-img { width: 100%; height: 283px; overflow: hidden; } .special { line-height: 2rem; font-size: 0.875rem; border-left: 2px solid var(--first-color); height: 100%; display: block; padding: 1rem; background: rgba(0, 0, 0, 0.04); text-align: justify; } .location-title { font-size: 18px; color: #616161; font-weight: 600; margin: 10px 0 0 0; } .location-img { width: 72px; height: 72px; background: var(--first-color); position: relative; border-radius: 20px; transition: all 0.6s ease-out 0s; text-align: center; margin-bottom: 50px; } .location-img span { line-height: 72px; font-size: 42px; color: #fff; } .location-img:hover { border-radius: 100px; } .send { position: relative; } input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="Number"]::placeholder { color: #333; text-transform: uppercase; } .btn-send { width: 270px; height: 50px; background: var(--first-color); border: 0px; border-bottom: 4px solid rgba(0, 0, 0, 0.25); text-transform: uppercase; font-weight: 600; color: #ffffff; } .btn-send:hover, .btn-send:focus, .btn-send:active { background: rgba(0, 0, 0, 0.5) !important; border-bottom: 4px solid transparent !important; } .policy-list { list-style: none; position: fixed; } .policy-list li { display: block; padding: 0px 0 30px 0; } .policy-list li a { display: block; color: #333333; font-size: 16px; font-weight: 600; padding: 0.5rem 1rem; } .policy-list li a:hover, .policy-list li a.active { color: #ffffff; background: var(--first-color); } .btn-subscribe { width: 220px; height: 50px; background: rgba(0, 0, 0, 0.25); border: 0px; text-transform: uppercase; font-weight: 600; color: #ffffff; } .btn-subscribe:hover, .btn-subscribe:focus, .btn-subscribe:active { background: rgba(0, 0, 0, 0.85) !important; } #timer { font-size: 2.5em; font-weight: 600; color: #000000; display: flex; justify-content: center; } #timer div { display: inline-block; min-width: 120px; text-align: center; border-right: 1px solid #878a9b; text-transform: uppercase; } @media screen and (max-width: 575px) { #timer div { min-width: 60px; } } #timer div:last-child { border-right: none; } #timer div span { color: var(--first-color); display: block; font-size: 0.5em; font-weight: 600; } @media (max-width: 767px) { .crumb-list { text-align: center; } .content-inner .page-link { padding: 10px 12px; } } @media (max-width: 1199px) and (min-width: 992px) { .vision-text:after { width: 68%; } .approch-text:after { width: 65%; } } @media (min-width: 767px) and (max-width: 992px) { .vision-text:after, .approch-text:after { width: 52%; } } @media (max-width: 767px) { .vision-text:after, .approch-text:after { width: 50%; } } @media (max-width: 460px) { .vision-text:after, .approch-text:after { width: 30%; } .service-text { font-size: 2.5rem; } #filters li span { padding: 5px 10px; } } .breadcrumb { width: 100%; min-height: 450px; border-radius: 0; margin-bottom: 0; position: relative; display: flex; align-items: center; justify-content: center; } .breadcrumb-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 1; } .bread-con { position: relative; z-index: 2; text-align: center; padding: 30px 0; } .crumb-list { list-style: none; padding: 0; margin: 0 0 20px 0; } .crumb-list li { display: inline; color: #fff; font-weight: 600; font-size: 14px; } .crumb-list li a { color: #fff; text-decoration: none; } .crumb-list li a:hover { text-decoration: underline; } .crumb-list li.active-crumb { color: #ffc107; } .crumb-name { text-align: center; font-size: 48px; font-weight: 700; color: #fff; margin: 0; }