/**
* Template Name: FlexStart - v1.10.1
* Template URL: https://bootstrapmade.com/flexstart-bootstrap-startup-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
scroll-behavior: smooth;
}
body {
font-family: "Arial", sans-serif;
color: #444444;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #8a8a8a;
text-decoration: none;
}
@font-face {
font-family: MYRIADPRO-BOLD;
src: url(../font/MYRIADPRO-BOLD.otf);
}
@font-face {
font-family: MYRIADPRO-BOLDCOND;
src: url(../font/MYRIADPRO-BOLDCOND.otf);
}
@font-face {
font-family: MYRIADPRO-COND;
src: url(../font/MYRIADPRO-COND.otf);
}
@font-face {
font-family: MyriadPro-Light;
src: url(../font/MyriadPro-Light.otf);
}
@font-face {
font-family: MYRIADPRO-REGULAR;
src: url(../font/MYRIADPRO-REGULAR.otf);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "MYRIADPRO-REGULAR", sans-serif;
}
/*-- modal--*/
.modal-confirm {
color: #434e65;
width: 525px;
}
.modal-confirm .modal-content {
padding: 20px;
font-size: 16px;
border-radius: 5px;
border: none;
}
.modal-confirm .modal-header {
background: #368fa2;
border-bottom: none;
position: relative;
text-align: center;
margin: -20px -20px 0;
border-radius: 5px 5px 0 0;
padding: 35px;
}
.modal-confirm h4 {
text-align: center;
font-size: 36px;
margin: 10px 0;
}
.modal-confirm .form-control, .modal-confirm .btn {
min-height: 40px;
border-radius: 3px;
}
.modal-confirm .close {
width:30px;
height:30px;
position: absolute;
top: 15px;
right: 15px;
color: #fff;
text-shadow: none;
opacity: 0.5;
}
.modal-confirm .close:hover {
opacity: 0.8;
}
.modal-confirm .icon-box {
color: #fff;
width: 95px;
height: 95px;
display: inline-block;
border-radius: 50%;
z-index: 9;
border: 5px solid #fff;
padding: 15px;
text-align: center;
}
.modal-confirm .icon-box i {
font-size: 64px;
margin: -4px 0 0 -4px;
}
.modal-confirm.modal-dialog {
margin-top: 80px;
}
.modal-confirm .btn, .modal-confirm .btn:active {
color: #fff;
border-radius: 4px;
background: #eeb711 !important;
text-decoration: none;
transition: all 0.4s;
line-height: normal;
border-radius: 30px;
margin-top: 10px;
padding: 6px 20px;
border: none;
}
.modal-confirm .btn:hover, .modal-confirm .btn:focus {
background: #eda645 !important;
outline: none;
}
.modal-confirm .btn span {
margin: 1px 3px 0;
float: left;
}
.modal-confirm .btn i {
margin-left: 1px;
font-size: 20px;
float: right;
}
@media (max-width: 564px) {
.modal-confirm {
color: #434e65;
width: 300px;
left:5%;
}
.modal-confirm .modal-content {
padding: 20px;
font-size: 16px;
border-radius: 5px;
border: none;
}
.modal-confirm .modal-header {
background: #368fa2;
border-bottom: none;
position: relative;
text-align: center;
margin: -20px -20px 0;
border-radius: 5px 5px 0 0;
padding: 35px;
}
.modal-confirm h4 {
text-align: center;
font-size: 36px;
margin: 10px 0;
}
.modal-confirm .form-control, .modal-confirm .btn {
min-height: 40px;
border-radius: 3px;
}
.modal-confirm .close {
width:30px;
height:30px;
position: absolute;
top: 15px;
right: 15px;
color: #fff;
text-shadow: none;
opacity: 0.5;
}
.modal-confirm .close:hover {
opacity: 0.8;
}
.modal-confirm .icon-box {
color: #fff;
width: 95px;
height: 95px;
display: inline-block;
border-radius: 50%;
z-index: 9;
border: 5px solid #fff;
padding: 15px;
text-align: center;
}
.modal-confirm .icon-box i {
font-size: 64px;
margin: -4px 0 0 -4px;
}
.modal-confirm.modal-dialog {
margin-top: 80px;
}
.modal-confirm .btn, .modal-confirm .btn:active {
color: #fff;
border-radius: 4px;
background: #eeb711 !important;
text-decoration: none;
transition: all 0.4s;
line-height: normal;
border-radius: 30px;
margin-top: 10px;
padding: 6px 20px;
border: none;
}
.modal-confirm .btn:hover, .modal-confirm .btn:focus {
background: #eda645 !important;
outline: none;
}
.modal-confirm .btn span {
margin: 1px 3px 0;
float: left;
}
.modal-confirm .btn i {
margin-left: 1px;
font-size: 20px;
float: right;
}
}
/*--button--*/
.button-custom {
text-align: center;
padding-top: 10px;
padding-bottom: 40px;
}
.button-custom .btn-contact {
margin-top: 30px;
line-height: 0;
padding: 15px 40px;
border-radius: 4px;
transition: 0.5s;
color: #fff;
background: #002476;
box-shadow: 0px 5px 30px rgba(133,133,133, 0.5);
}
.button-custom .btn-contact span {
font-family: "MYRIADPRO-REGULAR", sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
}
.button-custom .btn-contact i {
margin-left: 5px;
font-size: 18px;
transition: 0.3s;
}
.button-custom .btn-contact a:hover {
color: #fff;
}
.button-custom .btn-contact:hover span {
color: #fff;
content: "Hubungi Kami";
}
.button-custom .btn-contact:hover i {
transform: translateX(5px);
color: #fff;
}
.sticky{
position: sticky;
top: 0;
}
.description {
background-color: #fff;
box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
padding: 10px 20px 0 20px;
}
.desktop {
display: block;
}
.mobile {
display: none;
}
@media (max-width: 768px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
/*--------------------------------------------------------------
# Hamburger
--------------------------------------------------------------*/
.sidenav {
height: 100%;
width: 0;
position: fixed;
top: 0;
right: 0;
background-color: rgb(54, 143, 162,0.8);
overflow-x: hidden;
transition: 0.5s;
color: #fff;
padding-top: 100px;
}
.sidenav ul{
list-style: none;
}
.sidenav a {
text-align: right;
font-family: "MYRIADPRO-COND",sans-serif;
padding: 8px 40px 8px 8px;
text-decoration: none;
font-size: 42px;
color: #fff;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .sidenav-close {
position: absolute;
top: 0;
right: 0;
font-size: 36px;
margin-left: 50px;
}
/*@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}*/
.hamburger {
background: transparent;
border: none;
display: block;
height: 36px;
width: 36px;
text-align: center;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
outline: none;
}
.hamburger.open-nav:before {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: all 0.35s ease-in-out;
color: #ffffff;
content: '';
display: block;
font-size: 14px;
line-height: 32px;
opacity: 0;
text-align: center;
width: 100px;
}
.hamburger.open-nav:hover before {
-webkit-transform: translate3d(-100px, 0, 0);
-webkit-transition: all 0.35s ease-in-out;
display: block;
opacity: 1;
}
.hamburger.open-nav:hover .hamb-top {
-webkit-transition: all 0.35s ease-in-out;
top: 0;
}
.hamburger.open-nav:hover .hamb-bottom {
-webkit-transition: all 0.35s ease-in-out;
bottom: 0;
}
.hamburger.open-nav .hamb-top {
-webkit-transition: all 0.35s ease-in-out;
background-color: #1b859a;
border-radius:50px;
top: 5px;
}
.hamburger.open-nav .hamb-middle {
background-color: #1b859a;
border-radius:50px;
margin-top: -2px;
top: 50%;
}
.hamburger.open-nav .hamb-bottom {
-webkit-transition: all 0.35s ease-in-out;
background-color: #1b859a;
border-radius:50px;
bottom: 5px;
}
.hamburger.open-nav .hamb-top,
.hamburger.open-nav .hamb-middle,
.hamburger.open-nav .hamb-bottom {
height: 5px;
left: 0;
position: absolute;
width: 100%;
}
.overlay-menu {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1;
}
/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
section {
overflow: hidden;
}
.section-header {
text-align: center;
padding-bottom: 20px;
}
/*.section-header h2 {
font-size: 13px;
letter-spacing: 1px;
font-weight: 700;
margin: 0;
color: #002c91;
text-transform: uppercase;
border-radius: 25px;
border: 1px solid #002476;
padding: 10px;
display: inline-block;
}*/
.section-header2 {
text-align: center;
padding-bottom: 40px;
font-family: "Arial",sans-serif;
}
.section-header2 h2 {
font-size: 13px;
letter-spacing: 1px;
font-weight: 700;
margin: 0;
color: #002c91;
text-transform: uppercase;
border-radius: 25px;
border: 1px solid #002476;
padding: 10px;
display: inline-block;
}
.section-header2 p {
margin: 10px 0 0 0;
padding: 0;
font-size: 38px;
line-height: 42px;
font-weight: 700;
color: #368fa2;
font-family: "DiverdaBlack",sans-serif;
}
@media (max-width: 768px) {
.section-header p {
font-size: 26px;
line-height: 32px;
}
.section-header2 p {
font-size: 22px;
line-height: 32px;
}
}
.img-responsive {
width: 100%;
height: auto;
background-size: cover;
}
.img-border {
width: 100%;
height: auto;
background-size: cover;
border-radius: 25px;
}
.img-border-scale {
height: 300px;
width: auto;
background-size: cover;
border-radius: 25px;
}
.img-services {
width: 100%;
background-size: cover;
}
@media (max-width: 768px) {
.img-services {
width: 100%;
height: auto;
}
.img-border-scale {
width: 100%;
height: auto;
background-size: cover;
border-radius: 25px;
}
}
/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
padding: 15px 0;
background: #012970;
min-height: 40px;
margin-top: 82px;
color: #fff;
}
@media (max-width: 992px) {
.breadcrumbs {
margin-top: 57px;
}
}
.breadcrumbs h2 {
font-size: 28px;
font-weight: 500;
}
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0 0 10px 0;
margin: 0;
font-size: 14px;
}
.breadcrumbs ol a {
color: #fff;
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: #8894f6;
content: "/";
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.btn-float{
position:fixed;
width:70px;
height:70px;
bottom:20px;
right:20px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
box-shadow: 2px 2px 3px #999;
}
.btn-float:hover {
background: #44c976;
color: #fff;
}
.my-float{
margin-top:16px;
}
.back-to-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 20px;
bottom: 20px;
background: #636363;
width: 40px;
height: 40px;
border-radius: 4px;
transition: all 0.4s;
}
.back-to-top i {
font-size: 24px;
color: #fff;
line-height: 0;
}
.back-to-top:hover {
background: #878585;
color: #fff;
}
.back-to-top.active {
visibility: visible;
opacity: 1;
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
}
/*--------------------------------------------------------------
# Video
--------------------------------------------------------------*/
.video-circle {
position: relative;
left: 50%;
transform: translate(-50%);
height: 250px;
width: 250px;
border-radius: 50%;
background: linear-gradient(to bottom ,#fff 50%, #878585 50%);
}
.video-button {
position: relative;
left: 50%;
top:20%;
transform: translate(-50%);
height: 100px;
width: 100px;
border-radius: 50%;
transition: transform .2s;
background: linear-gradient(27deg, rgba(30,127,146,1) 0%, rgba(81,191,213,1) 100%);
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.5);
}
.video-watch {
position: relative;
left: 20%;
top:15%;
color: #1b859a;
font-size: 20px;
text-align: center;
}
.video-button span{
position: relative;
left: 25%;
top:15%;
transition: all 0.3s ease;
}
.video-button span:hover {
padding: 10px 5px;
}
/*--------------------------------------------------------------
# Popup
--------------------------------------------------------------*/
.overlay {
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
display: none;
padding: 0 20px;
z-index: 2;
}
.showing-popup {
visibility: visible;
opacity: 1;
}
/*--PopUp Join--*/
.popup-join {
margin: 40px auto;
padding: 30px 40px;
background: #368fa2;
background: url(../img/background/freelance.png);
background-repeat: no-repeat;
background-size:100% auto;
background-position: 10% 30%;
border-radius: 5px;
transition: all 5s ease-in-out;
position: absolute;
z-index:2;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
}
.popup-join .btn-join {
position:absolute;
bottom:45px;
right:50px;
border-radius: 10px;
padding: 5px 20px 5px 20px;
color: #fff;
max-height:60px;
width:210px;
font-size: 20pt;
border-color:transparent;
font-family: "MYRIADPRO-COND",sans-serif;
background: #114153;
text-align: right;
}
.popup-join .btn-join img{
margin-left:40px;
height:28px;
transition: 0.3s;
}
.popup-join .btn-join:hover img{
transform: translateX(5px);
}
.popup-join .close {
line-height: 28px;
width: 30px;
height: 30px;
text-align: center;
position: fixed;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
text-decoration: none;
color: #fff;
}
.popup-join img{
filter: drop-shadow(0px 10px 15px #333);
}
@media (max-width: 564px) {
.popup-join {
background: url(../img/background/freelance-mobile.png);
background-size:contain;
background-repeat: no-repeat;
background-position: center;
background-color: #368fa2;
}
.popup-join .btn-join{
bottom:65px;
}
.popup-join .close {
right: 20px;
}
}
/*--PopUp Inquiry--*/
.popup-inquiry {
margin: 40px auto;
padding: 30px 40px;
background-color: rgb(54, 143, 162,0.95);
background-image: url(../img/background/bottle-inquiry.png);
background-repeat: no-repeat;
background-size:auto 100%;
border-radius: 8px;
transition: all 5s ease-in-out;
position: absolute;
top: 50%;
left: 50%;
z-index:1;
transform: translate(-50%, -50%);
width: 90%;
height:auto;
}
.popup-inquiry .row{
padding-bottom:10px;
}
.popup-inquiry .form-control{
box-shadow: inset 0 0 8px 3px #bfbfbf !important;
font-family: "MYRIADPRO-REGULAR",sans-serif !important;
padding: 8px 20px 8px 20px;
color: #7e7e7e !important;
}
.popup-inquiry .form-control:focus{
border-color:#7e7e7e;
}
.popup-inquiry select{
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position-x: 100%;
background-position-y: 5px;
}
.popup-inquiry select:hover option:hover {
background-color: red;
color: white;
}
.popup-inquiry textarea{
resize:none;
}
.popup-inquiry .form-control:placeholder{
color: #7e7e7e !important;
}
.popup-inquiry h2{
font-size:30pt;
font-family: "MYRIADPRO-COND",sans-serif;
color: #fff;
}
.popup-inquiry span.text-input{
font-size:14pt;
font-family: "MYRIADPRO-COND",sans-serif;
color: #fff;
}
.popup-inquiry span.text-desc{
font-size:14pt;
font-family: "MyriadPro-Light",sans-serif;
color: #fff;
}
.popup-inquiry .btn-submit {
position:absolute;
border-radius: 10px;
padding: 0px 20px 0px 20px;
color: #fff;
height:60px;
width:210px;
font-size: 20pt;
border-color:transparent;
font-family: "MYRIADPRO-COND",sans-serif;
background: #114153;
text-align:right;
right:14%;
}
.popup-inquiry .btn-submit img{
margin-left:25px;
height:28px;
transition: 0.3s;
}
.popup-inquiry .btn-submit:hover img{
transform: translateX(5px);
}
.popup-inquiry .close {
line-height: 28px;
width: 30px;
height: 30px;
text-align: center;
position: fixed;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
text-decoration: none;
color: #fff;
}
@media (max-width: 768px) {
.popup-inquiry {
margin: 65px auto;
padding: 30px 40px;
background-color: rgb(54, 143, 162,0.95);
background-image: url(../img/background/bottle-inquiry.png);
background-repeat: no-repeat;
background-size:auto 100%;
border-radius: 8px;
transition: all 5s ease-in-out;
position: absolute;
top: 65%;
left: 50%;
z-index:1;
transform: translate(-50%, -50%);
width: 90%;
height:auto;
}
.popup-inquiry .btn-submit {
position:absolute;
border-radius: 10px;
padding: 0px 20px 0px 20px;
color: #fff;
height:60px;
width:210px;
font-size: 20pt;
border-color:transparent;
font-family: "MYRIADPRO-COND",sans-serif;
background: #114153;
text-align:right;
right:6%;
}
@media (max-width: 587px) {
.popup-inquiry {
margin: 50px auto;
padding: 30px 20px 1px 20px;
background-color: rgb(54, 143, 162,0.95);
background-image: none;
background-repeat: no-repeat;
background-size:auto 100%;
border-radius: 8px;
transition: all 5s ease-in-out;
position: absolute;
top: 70%;
left: 50%;
z-index:1;
transform: translate(-50%, -50%);
width: 90%;
height:auto;
}
.popup-inquiry span.text-desc {
font-size: 14pt;
font-family: "MyriadPro-Light", sans-serif;
color: #fff;
}
.popup-inquiry .btn-submit {
position: relative;
border-radius: 10px;
padding: 0px 20px 0px 20px;
color: #fff;
height: 60px;
width: 210px;
font-size: 20pt;
border-color: transparent;
font-family: "MYRIADPRO-COND", sans-serif;
background: #114153;
text-align: right;
left: 10%;
}
}
}
/*--PopUp Promo--*/
.popup-promo {
margin: 40px auto;
padding: 30px 40px;
background: #368fa2;
border-radius: 5px;
transition: all 5s ease-in-out;
position: absolute;
z-index: -1;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height:90%;
}
.popup-promo .btn-promo {
position:absolute;
bottom:50px;
right:50px;
border-radius: 50px;
padding:20px 90px;
color: #fff;
max-height:100px;
width:auto;
font-size: 22pt;
border-color:transparent;
font-family: "MYRIADPRO-COND",sans-serif;
background: rgb(214,214,214);
background: linear-gradient(180deg, rgb(181 209 224) 0%, rgb(79 132 159) 18%, rgb(30 168 225) 100%);
}
.popup-promo .close {
line-height: 28px;
width: 30px;
height: 30px;
text-align: center;
position: fixed;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
text-decoration: none;
color: #fff;
}
.popup-promo img{
filter: drop-shadow(0px 10px 15px #333);
}
/*--PopUp Contact--*/
.popup-contact {
padding: 120px 150px 50px 100px;
background-image: url(../img/background/bg-contact.png);
background-size:100%;
transition: all 5s ease-in-out;
position: absolute;
z-index:-1;
left:-0.1%;
width: 100%;
height:100%;
}
.popup-contact .form-profil{
padding-left:50px;
}
.popup-contact .ct-sosmed{
width:28px;
height:28px;
margin-right:10px;
}
.popup-contact .form-ask{
padding-right:50px;
padding-left:100px;
}
.popup-contact .form-control{
background: rgb(54, 143, 162,0.5);
font-family: "MYRIADPRO-COND",sans-serif !important;
padding: 8px 20px 8px 20px;
height:65px;
font-size:28px;
border: none;
color: #fff !important;
}
.popup-contact .form-control:focus{
border-color:#7e7e7e;
}
.popup-contact select{
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position-x: 100%;
background-position-y: 5px;
}
.popup-contact select:hover option:hover {
background-color: red;
color: white;
}
.popup-contact textarea{
resize:none;
}
.popup-contact input::placeholder{
color: white !important;
opacity: 1; /* Firefox */
}
.popup-contact h2{
font-size:30pt;
font-family: "MYRIADPRO-COND",sans-serif;
color: #fff;
}
.popup-contact h3{
font-size:20pt;
font-family: "MYRIADPRO-COND",sans-serif;
color: #fff;
}
.popup-contact span{
font-size:14pt;
font-family: "MyriadPro-Light",sans-serif;
color: #fff;
}
.popup-contact span.text-input{
font-size:14pt;
font-family: "MYRIADPRO-COND",sans-serif;
color: #fff;
}
.popup-contact span.text-desc{
font-size:14pt;
font-family: "MyriadPro-Light",sans-serif;
color: #fff;
}
.popup-contact .btn-submit {
position:absolute;
border-radius: 5px;
padding: 0px 20px 0px 20px;
color: #fff;
height:70px;
width:210px;
font-size: 24pt;
border-color:transparent;
font-family: "MYRIADPRO-COND",sans-serif;
background: #368fa2;
right:14%;
}
.popup-contact .btn-submit img{
margin-left:25px;
height:28px;
transition: 0.3s;
}
.popup-contact .btn-submit:hover img{
transform: translateX(5px);
}
.popup-contact .close {
border-radius: 50%;
line-height: 28px;
width: 30px;
height: 30px;
text-align: center;
border: 3px solid white;
position: fixed;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
text-decoration: none;
color: #fff;
z-index: 9999;
}
@media (max-width: 1115px) {
.popup-contact {
padding: 120px 10px 50px 10px;
background-image: url(../img/background/bg-contact.png);
background-size:100%;
transition: all 5s ease-in-out;
position: absolute;
z-index:-1;
left:-0.1%;
width: auto;
height: 110vh;
}
.popup-contact .form-ask{
padding-right:50px;
padding-left:50px;
}
}
@media (max-width: 990px) {
.popup-contact {
padding: 120px 10px 50px 10px;
background-image: url(../img/background/bg-contact.png);
background-size:100%;
transition: all 5s ease-in-out;
position: absolute;
z-index:-1;
left:-0.1%;
width: auto;
height: 180vh;
}
.popup-contact .form-profil{
padding-left:50px;
}
.popup-contact .ct-sosmed{
width:28px;
height:28px;
margin-right:10px;
margin-bottom:10px;
}
}
/*--PopUp Join Form--*/
.popup-joinform {
padding: 10px 20px;
background-color: rgb(54, 143, 162,0.95);
border-radius: 5px;
transition: all 5s ease-in-out;
max-width: 25%;
margin: 100px auto;
}
.popup-joinform h2 {
margin: 20px 80px 5px 20px;
font-size:30pt;
color: #bfbdbc;
font-family: "MYRIADPRO-COND", sans-serif;
text-transform: uppercase;
}
.popup-joinform .close {
line-height: 28px;
width: 30px;
height: 30px;
text-align: center;
position: absolute;
top:120px;
right: 39%;
transition: all 200ms;
font-size: 30px;
text-decoration: none;
color: #fff;
}
.popup-joinform .close:hover {
color: #fff;
}
.popup-joinform .content {
color: #ffffff;
font-size:16pt;
font-family: "MYRIADPRO-COND", sans-serif;
margin: 5px 50px 10px 5px;
max-height: 500px;
overflow: auto;
}
.popup-joinform .btn-submit {
border-radius: 10px;
margin-top:15px;
color: #fff;
max-height:50px;
width:100%;
font-size: 18pt;
border-color:transparent;
font-family: "MYRIADPRO-COND",sans-serif;
background: #114153;
}
@media (max-width: 564px) {
.popup-joinform {
padding: 10px 20px;
background-color: rgb(54, 143, 162,0.95);
border-radius: 5px;
transition: all 5s ease-in-out;
max-width: 100%;
margin: 150px 10px 0 10px;
}
.popup-joinform .close {
line-height: 28px;
width: 30px;
height: 30px;
text-align: center;
position: absolute;
top: 165px;
right: 10%;
transition: all 200ms;
font-size: 30px;
text-decoration: none;
color: #fff;
}
}
/*--PopUp Product More Detail--*/
.popup-product {
margin: 40px auto;
padding: 30px 40px;
background: rgba(16, 87, 102, 0.98);
border-radius: 5px;
transition: all 5s ease-in-out;
max-width: 45%;
margin: 100px auto;
}
.popup-product h2 {
margin: 20px 80px 5px 20px;
font-size:30pt;
color: #bfbdbc;
font-family: "MYRIADPRO-COND", sans-serif;
text-transform: uppercase;
}
/*
border-radius: 50%;
line-height: 28px;
width: 30px;
height: 30px;
text-align: center;
border: 3px solid black;
position: absolute;
top: 125px;
margin-left:10px;
transition: all 200ms;
font-size: 30px;
text-decoration: none;
color: #000;
*/
.popup-product .close {
line-height: 28px;
width: 30px;
height: 30px;
text-align: center;
position: absolute;
top:130px;
right: 30%;
transition: all 200ms;
font-size: 30px;
text-decoration: none;
color: #fff;
}
.popup-product .close:hover {
color: #fff;
}
.popup-product .content {
color: #bfbdbc;
font-size:16pt;
font-family: "MYRIADPRO-COND", sans-serif;
margin: 5px 200px 10px 20px;
max-height: 500px;
overflow: auto;
}
.popup-product .content:after {
content: '';
width:120px;
padding-top:15px;
border-bottom: 10px solid #bfbdbc;
display: block;
}
.popup-product ul.content-item{
padding-top:20px;
list-style-type: none;
color: #bfbdbc;
font-size:12pt;
}
.popup-product li.item-line{
border-bottom:1px solid #bfbdbc;
}
.popup-product li.item-unline{
}
.popup-product img{
filter: drop-shadow(0px 10px 15px #333);
}
@media (max-width:400px) {
.popup-product {
margin: 40px auto;
padding: 40px 30px;
background: rgba(16, 87, 102, 0.98);
border-radius: 5px;
transition: all 5s ease-in-out;
max-width: 95%;
margin: 100px auto;
}
.popup-product h2 {
margin: 5px 10px 10px 10px;
font-size:30pt;
color: #bfbdbc;
font-family: "MYRIADPRO-COND", sans-serif;
text-transform: uppercase;
}
.popup-product .close {
line-height: 28px;
width: 30px;
height: 30px;
text-align: center;
position: absolute;
top:115px;
right: 12%;
transition: all 200ms;
font-size: 30px;
text-decoration: none;
color: #fff;
}
.popup-product .close:hover {
color: #fff;
}
.popup-product .content {
color: #bfbdbc;
font-size: 16pt;
font-family: "MYRIADPRO-COND", sans-serif;
margin: 5px 10px 10px 10px;
max-height: 500px;
overflow: auto;
}
}
@media (min-width:401px) and (max-width: 768px) {
.popup-product {
margin: 40px auto;
padding: 40px 30px;
background: rgba(16, 87, 102, 0.98);
border-radius: 5px;
transition: all 5s ease-in-out;
max-width: 90%;
margin: 100px auto;
}
.popup-product h2 {
margin: 5px 10px 10px 10px;
font-size:30pt;
color: #bfbdbc;
font-family: "MYRIADPRO-COND", sans-serif;
text-transform: uppercase;
}
.popup-product .close {
line-height: 28px;
width: 30px;
height: 30px;
text-align: center;
position: absolute;
top:115px;
right: 12%;
transition: all 200ms;
font-size: 30px;
text-decoration: none;
color: #fff;
}
.popup-product .close:hover {
color: #fff;
}
.popup-product .content {
color: #bfbdbc;
font-size: 16pt;
font-family: "MYRIADPRO-COND", sans-serif;
margin: 5px 10px 10px 10px;
max-height: 500px;
overflow: auto;
}
}
/*--PopUp Brand--*/
.popup-brand {
background: #fff;
transition: all 5s ease-in-out;
margin: 100px auto;
max-width: 45%;
}
.popup-brand .close {
line-height: 28px;
width: 30px;
height: 30px;
text-align: center;
position: absolute;
top: 125px;
margin-left:10px;
transition: all 200ms;
font-size: 30px;
text-decoration: none;
color: #000;
}
.popup-brand .brand-about{
background: linear-gradient(to bottom, transparent 100%, #fff 60%),
linear-gradient(to left, #dbf4fa 50%, #fff 50%);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.popup-brand .close:hover {
color: #000;
}
.popup-brand .content {
margin: 55px 0px 0px 10px;
padding: 30px 10px 30px 40px;
color: #000;
padding-top: 0.5em;
overflow: auto;
}
.popup-brand .content span.about-popbrand{
font-size:10pt;
}
.popup-brand ul.content-item{
padding: 0;
padding-top:80px;
list-style-type: none;
color: #000;
font-size:12pt;
}
.popup-brand li.item-line{
border-bottom:1px solid #bfbdbc;
}
.popup-brand li.item-unline{
}
.popup-brand .logo-brand{
height:auto;
width:60%;
}
.popup-brand .brand-product-main img{
top: 50%;
transform: translate(0%,50%);
}
.popup-brand .brand-product-main{
filter: drop-shadow(0px 10px 15px #333);
}
.popup-brand .brand-product-name{
background: #fff;
padding: 0px 30px 30px 50px;
}
.popup-brand .brand-product-others{
background: #fff;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
@media (max-width:1199px){
.popup-brand {
background: #fff;
transition: all 5s ease-in-out;
margin: 100px auto;
max-width: 85%;
}
.popup-brand .brand-product-name{
background: #fff;
padding: 0px 30px 30px 45px;
}
}
@media (max-width:501px){
.popup-brand {
background: #fff;
transition: all 5s ease-in-out;
margin: 100px auto;
max-width: 90%;
}
.popup-brand .content {
margin: 35px 0px 0px 10px;
padding: 30px 5px 30px 5px;
color: #000;
padding-top: 0.5em;
overflow: auto;
}
.popup-brand .brand-product-name{
background: #fff;
padding: 0px 30px 30px 15px;
}
.popup-brand .logo-brand {
height: auto;
width: 70%;
}
.popup-brand .content span.about-popbrand {
font-size: 8pt;
}
.popup-brand ul.content-item {
padding: 0;
padding-top: 30px;
list-style-type: none;
color: #000;
font-size: 8pt !important;
}
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
transition: all 0.5s;
z-index: 1;
padding: 30px 0;
}
.header.header-scrolled {
background: #fff;
padding: 15px 0;
box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
}
.header.header-scrolled .navbar .white a{
color: #368fa2;
}
.header .logo {
line-height: 0;
}
.header .logo img {
max-height: 60px;
margin-right: 6px;
}
.header .logo span {
font-size: 30px;
font-weight: 700;
letter-spacing: 1px;
color: #012970;
font-family: "MYRIADPRO-REGULAR", sans-serif;
margin-top: 3px;
}
@media (max-width: 564px) {
.header {
padding: 20px 0;
}
.header .logo img {
max-height: 30px;
margin-left: 10px;
}
}
/*--------------------------------------------------------------
# Header2
--------------------------------------------------------------*/
.header2 {
transition: all 0.5s;
z-index: 997;
padding: 15px 0;
background: #fff;
box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
}
.header2 .header-scrolled {
background: #fff;
padding: 15px 0;
box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
}
.header2 .logo {
line-height: 0;
}
.header2 .logo img {
max-height: 40px;
margin-right: 6px;
}
.header2 .logo span {
font-size: 30px;
font-weight: 700;
letter-spacing: 1px;
color: #012970;
font-family: "MYRIADPRO-REGULAR", sans-serif;
margin-top: 3px;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.nav-sub a.sub-ind,.nav-sub a.sub-ind:focus{
margin-left:10px;
padding-top:5px;
padding-bottom:5px;
padding-right:10px;
display:inline-block;
border-left: 1px solid #a6a6a6;
border-top: 1px solid #a6a6a6;
border-bottom: 1px solid #a6a6a6;
font-size:18px !important;
background: rgb(255,255,255,0.5);
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
.nav-sub a.sub-ind:after{
content:"";
margin-left:10px;
border-left: 1px solid #368fa2;
}
.nav-sub a.sub-en,.nav-sub a.sub-en:focus{
display:inline-block;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
border-right: 1px solid #a6a6a6;
border-top: 1px solid #a6a6a6;
border-bottom: 1px solid #a6a6a6;
font-size:18px !important;
background: rgb(255,255,255,0.5);
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.navbar, .navbar white {
padding: 0;
}
.navbar ul,.navbar .white ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li, .navbar .white li {
position: relative;
}
.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px 10px 20px;
font-family: "MYRIADPRO-REGULAR", sans-serif;
font-size: 24px;
color: #368fa2;
white-space: nowrap;
transition: 0.3s;
}
.navbar .white a,
.navbar .white a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px 10px 20px;
font-family: "MYRIADPRO-REGULAR", sans-serif;
font-size: 24px;
color: #fff;
white-space: nowrap;
transition: 0.3s;
}
.navbar a i,
.navbar a:focus i,.navbar .white a i,
.navbar .white 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: #1b859a;
font-weight:bold;
}
.navbar .white a:hover,
.navbar .white .active,
.navbar .white .active:focus,
.navbar .white li:hover>a {
color: #fff;
font-weight:bold;
}
.navbar .nav-end,.navbar .nav-end:focus,.navbar .white .nav-end,.navbar .white .nav-end:focus {
margin-right:25px;
}
.navbar button,.navbar .white button{
display: flex;
justify-content: space-between;
padding: 10px 0 10px 30px;
font-size: 24px;
white-space: nowrap;
transition: 0.3s;
}
.navbar .dropdown ul,.navbar .white .dropdown ul {
display: block;
position: absolute;
left: 14px;
top: calc(100% + 30px);
margin: 0;
padding: 10px 0;
padding-right: 20px;
z-index: 99;
opacity: 0;
visibility: hidden;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
border-radius: 4px;
}
.navbar .dropdown ul li,.navbar .white .dropdown ul li {
min-width: 200px;
}
.navbar .dropdown ul a i,.navbar .white .dropdown ul a i {
font-size: 12px;
}
.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a,
.navbar .white .dropdown ul a:hover,
.navbar .white .dropdown ul .active:hover,
.navbar .white .dropdown ul li:hover>a {
color: #1b859a;
}
.navbar .dropdown:hover>ul,.navbar .white .dropdown:hover>ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.navbar .dropdown .dropdown ul,.navbar .white .dropdown .dropdown ul {
top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
.navbar .dropdown .dropdown:hover>ul,.navbar .white .dropdown .dropdown:hover>ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
}
@media (max-width: 1366px) {
.navbar .dropdown .dropdown ul, .navbar .white .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover>ul,.navbar .white .dropdown .dropdown:hover>ul {
left: -100%;
}
}
/**
* Mobile Navigation
*/
.mobile-nav-toggle {
color: #368fa2;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}
.mobile-nav-toggle.bi-x {
color: #fff;
z-index:1;
padding-top:15px;
}
@media (max-width: 991px) {
.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
}
.navbar-mobile {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgb(54, 143, 162, 0.8);
transition: 0.3s;
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 0;
margin-right:30px;
}
.navbar-mobile ul {
display: block;
position: absolute;
top: 10%;
right:0;
padding: 10px 0;
background-size: auto;
padding-top:10%;
transition: 0.3s;
margin-right: 20px;
}
.navbar-mobile a,
.navbar-mobile a:focus {
text-align:right;
padding: 5px 20px;
font-size: 20px;
color: #fff;
display:block;
}
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
color: #fff;
}
.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
margin: 15px;
}
.navbar-mobile .dropdown ul {
position: static;
display: none;
margin: 10px 20px;
padding: 10px 0;
z-index: 99;
opacity: 1;
visibility: visible;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li {
min-width: 200px;
}
.navbar-mobile .dropdown ul a {
padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
color: #8a8a8a;
}
.navbar-mobile .dropdown>.dropdown-active {
display: block;
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
width: 100%;
height: 100vh;
background: url(../img/hero-carousel/bg-home.png);
background-size: cover;
}
.hero .container{
padding-top:100px;
padding-bottom:50px;
}
.hero h1 {
margin: 0;
font-size: 60px;
font-weight: 700;
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
color: #1b859a;
}
.hero h2 {
color: #595e64;
margin: 15px 0 0px 0;
font-size: 26px;
}
.hero h2 a{
color: #000;
margin: 15px 0 0 0;
font-size: 26px;
}
.hero .sp-pararagraph{
color: #1b859a;
margin: 15px 0 0 0;
font-size: 22px;
}
.hero .img-licence{
height:100px;
width:auto;
}
.hero h2 a:hover{
border-bottom:2px solid #8a8a8a;
}
.hero .btn-get-started {
margin-top:40px;
line-height: 0;
padding: 30px 50px;
border-radius: 50px;
transition: 0.5s;
color: #fff;
background: #1b859a;
/*box-shadow: 0px 5px 30px rgba(133,133,133, 0.5);*/
}
.hero .btn-get-started span {
font-family: "MYRIADPRO-REGULAR", sans-serif;
font-size: 28px;
letter-spacing: 1px;
}
.hero .btn-get-started i {
margin-left: 5px;
font-size: 18px;
transition: 0.3s;
}
.hero .btn-get-started:hover i {
transform: translateX(5px);
}
.hero .hero-img {
text-align: right;
}
@media (min-width: 1024px) {
.hero {
background-attachment: fixed;
}
}
@media (max-width: 991px) {
.hero {
height: auto;
padding: 120px 0 60px 0;
}
.hero .hero-img {
text-align: center;
margin-top: 10px;
}
}
@media (max-width: 564px) {
.hero{
width: 100%;
height: 600px;
text-align: center;
background: url(../img/hero-carousel/bg-home-mobile.png) no-repeat;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
padding: 0px 0px 0px 0px;
}
.hero .container{
padding-top:10px;
padding-left:50px;
padding-right:50px;
padding-bottom:260px;
}
.hero .btn-get-started {
line-height: 0;
padding: 25px 38px;
border-radius: 50px;
transition: 0.5s;
color: #fff;
background: #1b859a;
position: absolute;
margin-top: 550px
}
.hero .btn-get-started span {
font-family: "MYRIADPRO-REGULAR", sans-serif;
font-size: 24px;
letter-spacing: 1px;
}
.hero::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(255,255,255, 0.1);
}
.hero h1 {
font-size: 30px;
}
.hero h2 {
font-size: 16px;
}
.hero .sp-pararagraph{
color: #000;
margin: 15px 0 0 0;
font-size: 16px;
color: #1b859a;
}
.hero .img-licence{
height: 15vw;
width: auto;
}
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero2 {
width: 100%;
height: 100vh;
background: url(../img/background/bg-about.png);
background-repeat: no-repeat;
background-size: cover;
object-fit: contain;
position: relative;
}
.hero2::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0, 0.3);
background-size: cover;
}
.hero2 h1 {
margin: 0;
font-size: 48px;
font-weight: 700;
color: #002476;
font-family: "Arial", sans-serif;
}
.hero2 h2 {
color: #444444;
margin: 15px 0 0px 0;
font-size: 26px;
}
.hero2 h2 a{
color: #000;
margin: 15px 0 0 0;
font-size: 26px;
}
.hero2 .sp-pararagraph{
color: #000;
margin: 15px 0 0 0;
font-size: 18px;
}
.hero2 .img-licence{
height:100px;
width:auto;
}
.hero2 h2 a:hover{
border-bottom:2px solid #8a8a8a;
}
.hero2 .btn-get-started {
margin-top: 30px;
line-height: 0;
padding: 15px 40px;
border-radius: 4px;
transition: 0.5s;
color: #fff;
background: #002476;
box-shadow: 0px 5px 30px rgba(133,133,133, 0.5);
}
.hero2 .btn-get-started span {
font-family: "MYRIADPRO-REGULAR", sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
}
.hero2 .btn-get-started i {
margin-left: 5px;
font-size: 18px;
transition: 0.3s;
}
.hero2 .btn-get-started:hover i {
transform: translateX(5px);
}
.hero2 .hero-img {
text-align: right;
}
@media (min-width: 1024px) {
.hero2 {
background-attachment: fixed;
}
}
@media (max-width: 991px) {
.hero2 {
width: 100%;
height: 600px;
}
.hero2 .hero-img {
text-align: center;
margin-top: 80px;
}
}
@media (max-width: 768px) {
.hero2 {
width: 100%;
height: 400px;
text-align: left;
background: url(../img/background/bg-about.png);
background-repeat: no-repeat;
background-size: cover;
object-fit: contain;
position: relative;
padding: 50px 0 0 0;
}
.hero2::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0, 0.3);*/
background-size: cover;
}
.hero2 .sp-pararagraph{
color: #000;
margin: 15px 0 0 0;
font-size: 14px;
}
.hero2 .img-licence{
height: 70px;
width: auto;
}
.hero2 h1 {
margin: 0;
font-size: 38px;
font-weight: 700;
color: #002476;
}
.hero2 h2 {
color: #444444;
margin: 15px 0 0px 0;
font-size: 16px;
}
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
/*.hero-services {
width: 100%;
height: 300px;
background-color: #efefef;
background-size: cover;
}*/
.hero-services {
width: auto;
height: 360px;
background: url(../img/illustration/chemical.jpg);
background-repeat: no-repeat;
background-size: contain;
}
.services-header {
text-align: center;
padding-bottom: 40px;
font-family: "Arial",sans-serif;
}
.services-header h2 {
font-size: 13px;
letter-spacing: 1px;
font-weight: 700;
margin: 0;
color: #002c91;
text-transform: uppercase;
}
.services-header p {
margin: 10px 0 0 0;
padding: 0;
font-size: 38px;
color: #000;
font-family: "DiverdaBlack",sans-serif;
}
.hero-services::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(255,255,255, 0.5);*/
background-size: cover;
}
.hero-services h1 {
margin: 0;
font-size: 48px;
font-weight: 700;
color: #002476;
}
.hero-services h2 {
color: #002476;
margin: 15px 0 0px 0;
font-size: 16px;
border-radius: 25px;
border: 1px solid #002476;
padding: 10px;
display: inline-block;
}
.hero-services h2 a{
color: #000;
margin: 15px 0 0 0;
font-size: 26px;
}
.hero-services .sp-pararagraph{
color: #000;
margin: 15px 0 0 0;
font-size: 18px;
}
.hero-services .img-licence{
height:100px;
width:auto;
}
.hero-services h2 a:hover{
border-bottom:2px solid #8a8a8a;
}
.hero-services .btn-get-started {
margin-top: 30px;
line-height: 0;
padding: 15px 40px;
border-radius: 4px;
transition: 0.5s;
color: #fff;
background: #002476;
box-shadow: 0px 5px 30px rgba(133,133,133, 0.5);
}
.hero-services .btn-get-started span {
font-family: "MYRIADPRO-REGULAR", sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
}
.hero-services .btn-get-started i {
margin-left: 5px;
font-size: 18px;
transition: 0.3s;
}
.hero-services .btn-get-started:hover i {
transform: translateX(5px);
}
.hero-services .hero-img {
text-align: right;
}
@media (min-width: 1024px) {
.hero-services {
background-attachment: fixed;
}
}
@media (max-width: 991px) {
.hero-services {
height: 300px;
padding: 50px 0 60px 0;
}
.hero-services .hero-img {
text-align: center;
margin-top: 80px;
}
}
@media (max-width: 768px) {
.hero-services {
width: 100%;
height: 300px;
text-align: left;
background: url(../img/illustration/chemical_mobile.jpg);
background-size: cover;
}
.hero-services::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-i: rgba(0,0,0, 0.7);*/
background-size: cover;
}
.hero-services h1 {
font-size: 20px;
}
.hero-services h2 {
font-size: 14px;
}
.hero-services p {
font-size: 26px;
}
.hero-services .sp-pararagraph{
color: #000;
margin: 15px 0 0 0;
font-size: 14px;
}
.hero-services .img-licence{
height: 70px;
width: auto;
}
}
/*--------------------------------------------------------------
# Hero Section Product
--------------------------------------------------------------*/
.hero-product {
width: auto;
background-repeat: no-repeat;
background-size: contain;
}
.hero-product h1{
width: auto;
background-repeat: no-repeat;
background-size: contain;
font-family: "DiverdaBlack",sans-serif;
margin: 0;
font-size: 48px;
font-weight: 700;
color: #303030;
}
.hero-product::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(255,255,255,0.7);
}
.hero-product .box{
background: #fff;
box-shadow: 0px 0 5px rgba(1, 41, 112, 0.08);
text-align: center;
}
.hero-product h2 {
color: #444444;
margin: 15px 0 0px 0;
font-size: 18px;
font-family: "fsalbert", sans-serif;
}
.hero-product h2 a{
color: #000;
margin: 15px 0 0 0;
font-size: 18px;
}
.hero-product .sp-pararagraph{
color: #000;
margin: 15px 0 0 0;
font-size: 18px;
}
.hero-product .img-licence{
height:100px;
width:auto;
}
.hero-product h2 a:hover{
border-bottom:2px solid #8a8a8a;
}
.hero-product .btn-get-started {
margin-top: 30px;
line-height: 0;
padding: 15px 40px;
border-radius: 4px;
transition: 0.5s;
color: #fff;
background: #002476;
box-shadow: 0px 5px 30px rgba(133,133,133, 0.5);
}
.hero-product .hero-img {
text-align: right;
}
.hero-product .product-header {
text-align: center;
}
.hero-product .round {
text-align: center;
color: #002476;
margin: 10 0 10px 0px;
font-size: 12px;
border-radius: 25px;
border: 1px solid #002476;
padding: 10px;
display: inline-block;
font-family: "Arial", sans-serif;
font-weight: 100px;
}
@media (min-width: 1024px) {
.hero-product {
background-attachment: fixed;
background-color: #efefef;
}
}
@media (max-width: 991px) {
.hero-product {
height: auto;
padding: 120px 0 60px 0;
background-color: #efefef;
}
.hero-product .hero-img {
text-align: center;
margin-top: 80px;
}
}
@media (max-width: 768px) {
.hero-product{
width: 100%;
text-align: left;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.hero-product h1 {
font-size: 40px;
}
.hero-product h2 {
font-size: 14px;
}
.hero-product .sp-pararagraph{
color: #000;
margin: 15px 0 0 0;
font-size: 14px;
}
.hero-product .img-licence{
height: 70px;
width: auto;
}
}
/*--------------------------------------------------------------
# Index Page
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# services-home
--------------------------------------------------------------*/
.services-home .description {
background-color: #fff;
box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
padding: 0 20px 0 20px;
}
.services-home h3{
font-family:"MYRIADPRO-COND", sans-serif;
text-align: center;
padding-left:50px;
padding-right:50px;
}
.services-home iframe{
width: 90%;
height: 600px;
margin-left: auto;
margin-right: auto;
}
.services-home .content {
background-color: #efefef;
padding: 30px 40px 30px 40px;
}
.services-home .box {
display: flex;
justify-content: center;
align-items: center;
height:180px;
padding-left:20px;
padding-right:20px;
font-family:"MYRIADPRO-COND", sans-serif;
font-size:26px;
box-shadow: 0px 0 5px rgba(1, 41, 112, 0.08);
transition: 0.3s;
color: #fff;
}
@media (max-width: 576px) {
.services-home .box {
display: flex;
justify-content: center;
align-items: center;
height:120px;
padding-left:20px;
padding-right:20px;
font-family:"MYRIADPRO-COND", sans-serif;
font-size:18px;
box-shadow: 0px 0 5px rgba(1, 41, 112, 0.08);
transition: 0.3s;
color: #fff;
}
}
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about-home {
padding-top: 60px;
padding-bottom:60px;
}
.about-home .description {
background-color: #fff;
box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
padding: 0 20px 0 20px;
}
.about-home iframe{
width: 90%;
height: 600px;
margin-left: auto;
margin-right: auto;
}
.about-home .content {
background-color: #efefef;
padding: 30px 40px 30px 40px;
}
.about-home .content2 {
background-color: #efefef;
padding: 40px;
}
.about-home .article1 {
padding-left: 20px;
}
.about-home .article2 {
padding-right: 20px;
}
.about-home .product1 {
background-image: linear-gradient(to bottom right, #eff4ff, #9ba4c9);
padding: 40px;
}
.about-home .product2 {
background-image: linear-gradient(to bottom right, #efefef, #c9b29f);
padding: 40px;
}
.about-home .bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
color: #fff;
font-size: 14px;
}
.about-home .sticky {
position: sticky;
top: 0;
}
.about-home h3 {
font-size: 14px;
font-weight: 700;
color: #002c91;
text-transform: uppercase;
border-radius: 30px;
border: 1px solid #002476;
padding: 10px;
margin: 0 0 10px 0;
display: inline-block;
}
.about-home h2 {
font-size: 24px;
font-weight: 700;
color: #000;
}
.about-home h2 a:hover {
color: #fff;
}
.about-home h1 {
font-size: 36px;
font-weight: 700;
color: #002c91;
}
.about-home .section-header p {
margin: 15px 0 10px 0;
font-size: 60px;
line-height: 1.1;
color: #1b859a;
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
font-weight:700;
}
.about-home .section-header p:after {
content: '';
width:200px;
padding-top:15px;
border-bottom: 5px solid #368fa2;
display: block;
margin: 0 auto;
}
.about-home .sp-pararagraph{
color: #1b859a;
font-size: 22px;
text-align: center;
}
.about-home li {
font-family: "fsalbert", sans-serif;
text-align: left;
padding-left: 5px;
}
.about-home .btn-read-more {
line-height: 0;
padding: 15px 40px;
border-radius: 4px;
transition: 0.5s;
color: #fff;
background: #002476;
box-shadow: 0px 5px 25px rgba(133,133,133, 0.5);
}
.about-home .btn-read-more span {
font-family: "MYRIADPRO-REGULAR", sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
}
.about-home .btn-read-more i {
margin-left: 5px;
font-size: 18px;
transition: 0.3s;
}
.about-home .btn-read-more:hover i {
transform: translateX(5px);
}
@media (max-width: 992px) {
.about-home .article1 {
padding-left: 0px;
padding-top: 20px;
}
.about-home .article1 p{
text-align: justify;
}
.about-home .article2 {
padding: 0px;
}
.about-home .article2 p{
text-align: justify;
}
}
@media (max-width: 768px) {
.about-home .article1 {
padding-left: 0px;
padding-top: 20px;
}
.about-home .article1 p{
text-align: justify;
}
.about-home .article2 {
padding: 0px;
}
.about-home .article2 p{
text-align: justify;
}
.about-home h2 {
font-size: 20px;
font-weight: 700;
color: #000;
}
.about-home iframe{
width: 90%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 576px) {
.about-home .section-header p {
font-size: 30px;
margin-left:5px;
margin-right:5px;
}
.about-home .sp-pararagraph{
font-size: 16px;
margin-left:20px;
margin-right:20px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
}
.about{
background-color: #3a869a;
min-height: 500px;
padding-left:100px;
padding-right: 100px;
}
.about iframe{
width: 90%;
height: 600px;
margin-left: auto;
margin-right: auto;
}
.about .about-header .row{
text-align:center;
}
.about .about-header img{
width:200px;
height:auto;
transform: translate(-50%, -50%);
position:absolute;
}
.about .about-header h2{
padding-top:120px;
font-family: "MYRIADPRO-COND",sans-serif;
font-size:34px;
color: #fff;
font-weight:100;
}
.about .about-header p{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:22px;
color: #fff;
font-weight:100;
}
.about .visi-misi {
padding: 100px 0 25px 0;
text-align: left;
}
.about .visi-misi h2{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:34px;
color: #fff;
font-weight:100;
}
.about .visi-misi p, .about .visi-misi ol, .about .visi-misi ol li{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:22px;
color: #fff;
font-weight:100;
line-height: 1.5;
}
.about .about-visi {
padding: 100px 0 25px 0;
text-align: center;
}
.about .about-visi h2{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:34px;
color: #fff;
font-weight:100;
}
.about .about-visi p{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:22px;
color: #fff;
font-weight:100;
line-height: 1.5;
}
.about .about-misi {
padding: 25px 0 100px 0;
text-align: center;
}
.about .about-misi h2{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:34px;
color: #fff;
font-weight:100;
}
.about .about-misi p{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:22px;
color: #fff;
font-weight:100;
line-height: 1.5;
}
@media (max-width: 992px) {
.about{
background-color: #3a869a;
min-height: 500px;
padding-left:50px;
padding-right: 50px;
}
.about .about-header img{
width:150px;
height:auto;
transform: translate(-50%, -50%);
position:absolute;
}
}
@media (max-width: 768px) {
.about{
background-color: #3a869a;
min-height: 300px;
padding-left:50px;
padding-right: 50px;
}
.about .about-header img{
width:150px;
height:auto;
transform: translate(-50%, -50%);
position:absolute;
}
}
@media (max-width: 515px) {
.about{
background-color: #3a869a;
min-height: 300px;
padding-left:20px;
padding-right: 20px;
}
.about .about-header img{
width:100px;
height:auto;
transform: translate(-50%, -50%);
position:absolute;
}
.about .about-header h2{
padding-top:80px;
font-family: "MYRIADPRO-COND",sans-serif;
font-size:30px;
color: #fff;
font-weight:100;
}
.about .about-header p{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:20px;
color: #fff;
font-weight:100;
}
.about .about-visi {
padding: 60px 0 25px 0;
text-align: center;
}
.about .about-visi h2{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:30px;
color: #fff;
font-weight:100;
}
.about .about-visi p{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:20px;
color: #fff;
font-weight:100;
line-height: 1.5;
}
.about .about-misi {
padding: 25px 0 100px 0;
text-align: center;
}
.about .about-misi h2{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:30px;
color: #fff;
font-weight:100;
}
.about .about-misi p{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:20px;
color: #fff;
font-weight:100;
line-height: 1.5;
}
}
@media (max-width: 400px) {
.about .about-header h2{
padding-top:50px;
font-family: "MYRIADPRO-COND",sans-serif;
font-size:28px;
color: #fff;
font-weight:100;
}
.about .about-header p{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:18px;
color: #fff;
font-weight:100;
}
.about .about-visi {
padding: 40px 0 25px 0;
text-align: center;
}
.about .about-visi h2{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:28px;
color: #fff;
font-weight:100;
}
.about .about-visi p{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:18px;
color: #fff;
font-weight:100;
line-height: 1.5;
}
.about .about-misi {
padding: 25px 0 100px 0;
text-align: center;
}
.about .about-misi h2{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:28px;
color: #fff;
font-weight:100;
}
.about .about-misi p{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:18px;
color: #fff;
font-weight:100;
line-height: 1.5;
}
}
/*--------------------------------------------------------------
# ABOUT LICENCE
--------------------------------------------------------------*/
.about-licence {
}
.about-licence .header-licence{
background-color: #878585;
padding: 50px 200px 50px 200px;
}
.about-licence .logo-licence{
background-color: #fff;
padding: 50px;
}
.about-licence .logo-licence img{
display: block;
margin-left: auto;
margin-right: auto;
width: 60%;
}
.about-licence .header-licence .section-header p{
margin: 15px 0 10px 0;
font-size: 56px;
line-height: 1.1;
color: #fff;
font-weight:700;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-family: "MYRIADPRO-BOLDCOND",sans-serif;
}
.about-licence .sp-pararagraph{
padding: 30px;
color: #fff;
font-size: 22px;
text-align: center;
}
@media (max-width: 564px) {
.about-licence .header-licence {
padding: 50px 10px 0px 10px;
background-color:#f9f9f900;
}
.about-licence .header-licence .section-header p{
font-size:30px;
color: #368fa2;
}
}
@media (max-width: 768px) {
.about-licence .header-licence .section-header p{
color: #368fa2;
}
.about-licence {
background-image: linear-gradient(360deg, rgba(132, 199, 227, 1) 0%, rgba(255, 255, 255, 1) 70%);
}
.about-licence .logo-licence{
background-color: #f9f9f900;
}
.about-licence .sp-pararagraph {
color: #368fa2;
font-size: 16px;
margin-left: 10px;
margin-right: 10px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
}
@media (max-width: 1199px) {
.about-licence .logo-licence img{
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
}
/*--------------------------------------------------------------
# rnd
--------------------------------------------------------------*/
.rnd{
background-color: #fff;
background: url(../img/background/chemical-topleft.png) no-repeat left top, url(../img/background/chemical-bottomright.png) no-repeat right bottom;
min-height: 500px;
}
.rnd .description {
background-color: #fff;
box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
padding: 0 20px 0 20px;
font-family: "fsalbert", sans-serif;
}
.rnd .content2 {
background-color: #efefef;
padding: 40px;
font-family: "fsalbert", sans-serif;
}
.rnd .product1 {
background-image: linear-gradient(to bottom right, #eff4ff, #9ba4c9);
padding: 40px;
}
.rnd .product2 {
background-image: linear-gradient(to bottom right, #efefef, #c9b29f);
padding: 40px;
}
.rnd .bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
color: #fff;
font-size: 14px;
}
.rnd .sticky {
position: sticky;
top: 0;
}
.rnd .btn-option{
font-size: 14px;
padding: 6px 14px;
margin: 0 6px 8px 0;
border: 1px solid #002476;
display: inline-block;
transition: 0.3s;
}
.rnd .btn-option a{
color: #0257ee;
}
.rnd h3 {
font-size: 14px;
font-weight: 700;
color: #002c91;
text-transform: uppercase;
}
.rnd h2 {
font-size: 24px;
font-weight: 700;
color: #000;
}
.rnd h2 a:hover {
color: #fff;
}
.rnd h1 {
font-size: 36px;
font-weight: 700;
color: #002c91;
}
.rnd p {
margin: 15px 0 30px 0;
line-height: 24px;
}
.rnd table {
width: 50%;
text-align: center;
font-family: "fsalbert", sans-serif;
}
.rnd .btn-read-more {
line-height: 0;
padding: 15px 40px;
border-radius: 4px;
transition: 0.5s;
color: #fff;
background: #002476;
box-shadow: 0px 5px 25px rgba(133,133,133, 0.5);
}
.rnd .btn-read-more span {
font-family: "MYRIADPRO-REGULAR", sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
}
.rnd .btn-read-more i {
margin-left: 5px;
font-size: 18px;
transition: 0.3s;
}
.rnd .btn-read-more:hover i {
transform: translateX(5px);
}
@media (max-width: 768px) {
.rnd table {
width: 100%;
}
}
/*--------------------------------------------------------------
# Product
--------------------------------------------------------------*/
.page-area {
position: relative;
}
.product{
padding: 0px;
}
.product .content {
background-color: #efefef;
padding: 40px;
}
.product .content2 {
background-color: #efefef;
padding: 40px;
}
.product .productdtl {
background-color: #fff;
padding: 40px;
background: url(../img/background/chemical-topright.png) no-repeat right top;
min-height: 500px;
}
.product .product1 {
width: 100%;
height: 300px;
background-repeat: no-repeat;
background-size: cover;
position: relative;
/*background: rgb(239,239,239);
background: linear-gradient(167deg, rgba(239,239,239,1) 42%, rgba(208,208,208,1) 84%);*/
}
.product .product1::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,8,50,0.7);
}
.product .product2 {
width: 100%;
background-size: 100%;
height: 700px;
background: rgb(208,208,208);
background: linear-gradient(167deg, rgba(208,208,208,1) 6%, rgba(239,239,239,1) 44%);
}
.product .product3 {
width: 100%;
background-size: 100%;
height: 700px;
background: rgb(208,208,208);
background: linear-gradient(9deg, rgba(208,208,208,1) 29%, rgba(239,239,239,1) 93%);
}
.product .product4 {
width: 100%;
background-size: 100%;
height: 700px;
background: rgb(235,235,235);
background: linear-gradient(9deg, rgba(235,235,235,1) 30%, rgba(239,239,239,1) 92%);
}
.product h3 {
font-size: 14px;
font-weight: 700;
color: #002c91;
text-transform: uppercase;
}
.product h2 {
font-size: 24px;
font-weight: 700;
color: #000;
}
.product h2 a:hover {
color: #8a8a8a;
}
.product h1 {
font-size: 36px;
font-weight: 700;
color: #fff;
}
.product p {
margin: 15px 0 30px 0;
line-height: 24px;
font-family: "fsalbert", sans-serif;
}
.product li {
font-family: "fsalbert", sans-serif;
}
.product .btn-read-more {
line-height: 0;
padding: 15px 40px;
border-radius: 4px;
transition: 0.5s;
color: #fff;
background: #002476;
box-shadow: 0px 5px 25px rgba(133,133,133, 0.5);
}
.product .btn-read-more span {
font-family: "MYRIADPRO-REGULAR", sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
}
.product .btn-read-more i {
margin-left: 5px;
font-size: 18px;
transition: 0.3s;
}
.product .btn-read-more:hover i {
transform: translateX(5px);
}
@media (max-width: 768px) {
.product .product1 {
height: 100%;
object-fit: contain;
background-repeat: no-repeat;
background-size: cover;
position: relative;
/*background: rgb(239,239,239);
background: linear-gradient(167deg, rgba(239,239,239,1) 42%, rgba(208,208,208,1) 84%);*/
}
}
/*--------------------------------------------------------------
# Values
--------------------------------------------------------------*/
.values{
background: #f5f5f5;
/*background-image: url(../img/illustration/bg_solution.png);
background-repeat: no-repeat;
background-size: 650px auto;
padding: 60px 0 0 0;*/
}
.values .section-header p {
margin: 15px 15px 10px 15px;
font-size: 56px;
color: #368fa2;
line-height: 42px;
font-weight: 700;
line-height: 1.1;
display: flex;
justify-content: center;
align-items: center;
font-family: "MYRIADPRO-BOLDCOND",sans-serif;
}
.values .box {
position:relative;
}
.values .box img {
display: block;
width: 100%;
object-fit: cover;
transition: 0.5s;
}
.values .bottom{
position: absolute;
bottom: 15px;
left: 16px;
color: #fff;
z-index: 1;
}
.values .box span {
color: #fff;
margin-bottom: 18px;
font-size:13pt;
font-family: "MyriadPro-Light",sans-serif;
}
@media (max-width: 576px) {
.values .section-header p {
font-size: 30px;
}
}
@media (max-width: 768px) {
.values{
background: #f5f5f5;
background-repeat: no-repeat;
background-size: 650px auto;
padding: 60px 0;
}
.values .section-header p {
color: #368fa2;
line-height: 42px;
font-weight: 700;
line-height: 1.1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-family: "MYRIADPRO-BOLDCOND",sans-serif;
}
}
/*--------------------------------------------------------------
# Values2 test
--------------------------------------------------------------*/
.values2{
background: #fff;
background-repeat: no-repeat;
background-size: 650px auto;
padding: 60px 0 0 0;
}
.values2 .container,.values2 .row{
--bs-gutter-x: 1px !important;
--bs-gutter-y:1px !important;
}
.values2 .section-header p {
margin: 15px 0 10px 60px;
font-size: 56px;
color: #368fa2;
line-height: 42px;
font-weight: 700;
line-height: 1.1;
text-align: center;
font-family: "MYRIADPRO-BOLDCOND",sans-serif;
}
.values2 .box {
width:100%;
height:350px;
position:relative;
overflor:hidden !important;
}
.values2 .box .img-bg{
height:100%;
width:100%;
object-fit:cover;
transition:0.5s;
}
.values2 .box:hover .box-text{
right:100%;
padding-left:0;
padding-right:0;
background:#368fa2;
}
.values2 .box:hover .box-text span{
opacity:0;
}
.values2 .box .box-text {
padding-top:100px;
position:absolute;
padding-left:10px;
padding-right:10px;
top:0;
bottom:0;
right:50%;
top:0;
left:0;
bottom:0;
background:#368fa2;
color: #fff;
transition:0.5s;
text-align:center;
}
.values2 .box .box-text:hover {
padding-top:100px;
right:0;
top:0;
left:0;
bottom:0;
background:#368fa2;
color: #fff;
}
.values2 .box .box-text:hover span{
opacity:1;
}
.values2 .box .box-text:hover .img-sup{
opacity:1;
}
.values2 .box .box-text span {
color: #fff;
font-size:13pt;
text-align:center;
font-family: "MyriadPro-Light",sans-serif;
transition:0.3s;
}
@media (max-width: 768px) {
.values2{
background: #fff;
background-repeat: no-repeat;
background-size: 650px auto;
}
.values2 .section-header p {
font-size: 56px;
color: #368fa2;
line-height: 42px;
font-weight: 700;
line-height: 1.1;
text-align: center;
font-family: "MYRIADPRO-BOLDCOND",sans-serif;
}
}
/*--------------------------------------------------------------
# Values3 test
--------------------------------------------------------------*/
.values3{
background: #fff;
background-repeat: no-repeat;
background-size: 650px auto;
padding: 60px 0 0 0;
}
.values3 .container,.values3 .row{
--bs-gutter-x: 0px !important;
--bs-gutter-y:0px !important;
}
.values3 img{
width:100%;
height:250px;
}
.values3 .box-text{
display:flex;
justify-content: center;
align-items: center;
width:100%;
height:100%;
background-color:#fff;
padding-left:10px;
padding-right:10px;
border-style:solid;
border-width:thin;
border-color:#368fa2;
}
.values3 .section-header p {
margin: 15px 0 10px 60px;
font-size: 56px;
color: #368fa2;
line-height: 42px;
font-weight: 700;
line-height: 1.1;
text-align: center;
font-family: "MYRIADPRO-BOLDCOND",sans-serif;
}
.values3 span {
color: #368fa2;
font-size:13pt;
text-align:center;
font-family: "MYRIADPRO-BOLD",sans-serif;
transition:0.3s;
}
@media (max-width: 768px) {
.values3{
background: #fff;
background-repeat: no-repeat;
background-size: 650px auto;
}
.values3 .section-header p {
font-size: 56px;
color: #368fa2;
line-height: 42px;
font-weight: 700;
line-height: 1.1;
text-align: center;
font-family: "MYRIADPRO-BOLDCOND",sans-serif;
}
}
/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/
.counts {
padding: 30px 0 30px;
background: #efefef;
}
.counts .count-box {
display: flex;
align-items: center;
padding: 30px;
width: 100%;
background: #fff;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
font-family: "fsalbert",sans-serif;
}
.counts .count-box i {
font-size: 42px;
line-height: 0;
margin-right: 20px;
color: #4154f1;
}
.counts .count-box span {
font-size: 36px;
display: block;
font-weight: 600;
color: #0b198f;
}
.counts .count-box p {
padding: 0;
margin: 0;
font-family: "fsalbert",sans-serif;
font-size: 14px;
}
.counts .count-box h3 {
font-family: "fsalbert",sans-serif;
font-size: 18px;
padding-left: 10px;
text-align: left;
color: #444444;
font-weight: 700;
}
@media (max-width: 768px) {
.counts h2{
font-size: 18px;
}
}
/*--------------------------------------------------------------
# Proses
--------------------------------------------------------------*/
.proses {
padding: 30px 0 30px;
}
.proses .desktop {
display: block;
}
.proses .mobile {
display: none;
}
.proses .img-proses{
height: 300px;
width: auto;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 768px) {
.proses .desktop {
display: none;
}
.proses .mobile {
display: block;
}
.proses .img-proses{
height: auto;
width: 80%;
margin-left: auto;
margin-right: auto;
}
}
/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
.features .feature-box {
padding: 24px 20px;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
transition: 0.3s;
height: 100%;
}
.features .feature-box h3 {
font-size: 18px;
color: #012970;
font-weight: 700;
margin: 0;
}
.features .feature-box i {
line-height: 0;
background: #ecf3ff;
padding: 4px;
margin-right: 10px;
font-size: 24px;
border-radius: 3px;
transition: 0.3s;
}
.features .feature-box:hover i {
background: #4154f1;
color: #fff;
}
.features .feture-tabs {
margin-top: 120px;
}
.features .feture-tabs h3 {
color: #012970;
font-weight: 700;
font-size: 32px;
margin-bottom: 10px;
}
@media (max-width: 768px) {
.features .feture-tabs h3 {
font-size: 28px;
}
}
.features .feture-tabs .nav-pills {
border-bottom: 1px solid #eee;
}
.features .feture-tabs .nav-link {
background: none;
text-transform: uppercase;
font-size: 15px;
font-weight: 600;
color: #012970;
padding: 12px 0;
margin-right: 25px;
margin-bottom: -2px;
border-radius: 0;
}
.features .feture-tabs .nav-link.active {
color: #4154f1;
border-bottom: 3px solid #4154f1;
}
.features .feture-tabs .tab-content h4 {
font-size: 18px;
margin: 0;
font-weight: 700;
color: #012970;
}
.features .feture-tabs .tab-content i {
font-size: 24px;
line-height: 0;
margin-right: 8px;
color: #4154f1;
}
.features .feature-icons {
margin-top: 120px;
}
.features .feature-icons h3 {
color: #012970;
font-weight: 700;
font-size: 32px;
margin-bottom: 20px;
text-align: center;
}
@media (max-width: 768px) {
.features .feature-icons h3 {
font-size: 28px;
}
}
.features .feature-icons .content .icon-box {
display: flex;
}
.features .feature-icons .content .icon-box h4 {
font-size: 20px;
font-weight: 700;
margin: 0 0 10px 0;
color: #012970;
}
.features .feature-icons .content .icon-box i {
font-size: 44px;
line-height: 44px;
color: #0245bc;
margin-right: 15px;
}
.features .feature-icons .content .icon-box p {
font-size: 15px;
color: #848484;
}
/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services {
padding: 120px 0 70px 0;
background: linear-gradient(180deg, rgba(131,198,226,1) 0%, rgba(255,255,255,1) 100%);
min-height: 900px;
}
.services .bg-contain{
position: absolute;
height: 130%;
top: 25px;
right: 0;
}
.services .s-oem{
text-align:right;
line-height:1;
padding: 0 10px;
}
.services .s-oem span{
font-size:26pt;
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
}
.services .s-oem h1{
font-size:84pt;
font-weight:700;
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
}
.services .s-odm{
text-align:left;
line-height:1;
padding: 0 10px;
}
.services .s-odm h1{
font-size:84pt;
text-align:left;
font-weight:700;
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
}
.services .s-odm span{
font-size:26pt;
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
}
.services .s-pl{
text-align:right;
line-height:1;
padding: 0 10px;
}
.services .s-pl .pl1{
text-align:right;
font-size:84pt;
font-weight:700;
line-height:0.8;
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
}
.services .s-pl .pl2{
text-align:right;
font-size:62pt;
font-weight:700;
line-height:0.8;
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
}
.services2 {
padding: 20px 0 50px 0;
background: linear-gradient(360deg, rgba(132, 199, 227, 1) 0%, rgba(255, 255, 255, 1) 70%);
min-height:800px;
}
.services2 .bg-contain{
position: relative;
height: auto;
width: 100%;
left:10%;
}
.services2 .service-contain{
margin-left:3px;
margin-right:3px;
}
.services2 span{
font-size:26pt;
font-family: "MYRIADPRO-COND", sans-serif;
color:#1b859a;
}
.services3 .bg-contain{
width:100%;
height:auto;
object-fit:cover;
}
.services3 .text-contain{
position:absolute;
z-index:1;
color: #fff;
margin-right:20px;
font-family: "MYRIADPRO-COND", sans-serif;
font-size:22pt;
top:25%;
left: 50%;
}
@media (max-width: 400px) {
.services {
padding: 100px 0 70px 0;
background: linear-gradient(180deg, rgba(131,198,226,1) 0%, rgba(255,255,255,1) 100%);
min-height: 300px;
}
.services .bg-contain{
position: absolute;
height: 130%;
top: 25px;
left: 70px;
}
.services .s-oem{
text-align:right;
line-height:1;
padding: 0 10px;
}
.services .s-oem span{
font-size:12pt;
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
}
.services .s-oem h1{
font-size:56pt;
font-weight:700;
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
}
.services .s-odm{
text-align:left;
line-height:1;
padding: 0 10px;
}
.services .s-odm h1{
font-size:56pt;
text-align:left;
font-weight:700;
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
}
.services .s-odm span{
font-size:12pt;
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
}
.services .s-pl{
text-align:right;
line-height:1;
padding: 0 10px;
}
.services .s-pl .pl1{
text-align:right;
font-size:48pt;
font-weight:700;
line-height:0.8;
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
}
.services .s-pl .pl2{
text-align:right;
font-size:32pt;
font-weight:700;
line-height:0.8;
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
}
.services2 {
padding: 20px 0 50px 0;
background: linear-gradient(360deg, rgba(132, 199, 227, 1) 0%, rgba(255, 255, 255, 1) 70%);
min-height:300px;
}
.services2 .bg-contain{
position: absolute;
height: auto;
width:100%;
}
.services2 .service-contain{
padding-top:400px;
margin-left:3px;
margin-right:3px;
}
.services2 span{
font-size:12pt;
font-family: "MYRIADPRO-COND", sans-serif;
color:#1b859a;
}
.services3 .bg-contain{
width:100%;
height:auto;
display:block;
object-fit:cover;
}
.services3 .text-contain{
position:absolute;
z-index:1;
color: #fff;
font-family: "MYRIADPRO-COND", sans-serif;
font-size:7pt;
top:auto;
bottom: 8px;
left: 16px;
}
}
@media (min-width: 401px) and (max-width:768px){
.services .bg-contain{
position: absolute;
height: 130%;
top: 25px;
left: 12%;
}
.services2 .bg-contain {
position: relative;
height: auto;
width: 100%;
left: 18%;
}
.services2 span{
font-size:16pt;
font-family: "MYRIADPRO-COND", sans-serif;
color:#1b859a;
}
.services3 .bg-contain{
width:100%;
height:auto;
display:block;
object-fit:cover;
}
.services3 .text-contain{
position:absolute;
z-index:1;
color: #fff;
font-family: "MYRIADPRO-COND", sans-serif;
font-size:12pt;
top:auto;
bottom: 8px;
left: 16px;
}
}
@media (min-width: 769px) and (max-width:1115px){
.services3 .text-contain{
font-size:14pt;
}
}
/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing .box {
padding: 40px 20px;
background: #fff;
text-align: center;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
border-radius: 4px;
position: relative;
overflow: hidden;
transition: 0.3s;
}
.pricing .box:hover {
transform: scale(1.1);
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
}
.pricing h3 {
font-weight: 700;
font-size: 18px;
margin-bottom: 15px;
}
.pricing .price {
font-size: 36px;
color: #444444;
font-weight: 600;
font-family: "Poppins", sans-serif;
}
.pricing .price sup {
font-size: 20px;
top: -15px;
left: -3px;
}
.pricing .price span {
color: #bababa;
font-size: 16px;
font-weight: 300;
}
.pricing img {
padding: 30px 40px;
}
.pricing ul {
padding: 0;
list-style: none;
color: #444444;
text-align: center;
line-height: 26px;
font-size: 16px;
margin-bottom: 25px;
}
.pricing ul li {
padding-bottom: 10px;
}
.pricing ul .na {
color: #ccc;
text-decoration: line-through;
}
.pricing .btn-buy {
display: inline-block;
padding: 8px 40px 10px 40px;
border-radius: 50px;
color: #4154f1;
transition: none;
font-size: 16px;
font-weight: 400;
font-family: "MYRIADPRO-REGULAR", sans-serif;
font-weight: 600;
transition: 0.3s;
border: 1px solid #4154f1;
}
.pricing .btn-buy:hover {
background: #4154f1;
color: #fff;
}
.pricing .featured {
width: 200px;
position: absolute;
top: 18px;
right: -68px;
transform: rotate(45deg);
z-index: 1;
font-size: 14px;
padding: 1px 0 3px 0;
background: #4154f1;
color: #fff;
}
/*--------------------------------------------------------------
# F.A.Q
--------------------------------------------------------------*/
.faq .accordion-collapse {
border: 0;
}
.faq .accordion-header {
font-family: "Arial", sans-serif;
}
.faq .accordion-body {
font-family: "fsalbert", sans-serif;
margin: 10px 10px 10px 10px;
}
.faq .accordion-button {
padding: 15px 15px 20px 0;
font-weight: 600;
border: 0;
font-size: 18px;
color: #444444;
text-align: left;
}
.faq .accordion-button:focus {
box-shadow: none;
}
.faq .accordion-button: after{
color: #002476;
}
.faq .accordion-button:not(.collapsed) {
background: none;
color: #002476;
border-bottom: 0;
}
.faq .accordion-body {
padding: 0 0 25px 0;
border: 0;
}
/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio #portfolio-flters {
padding: 0;
margin: 0 auto 25px auto;
list-style: none;
text-align: center;
background: white;
border-radius: 50px;
padding: 2px 15px;
}
.portfolio #portfolio-flters li {
cursor: pointer;
display: inline-block;
padding: 8px 20px 10px 20px;
font-size: 15px;
font-weight: 600;
line-height: 1;
color: #444444;
margin: 0 4px 8px 4px;
transition: 0.3s;
border-radius: 50px;
border: 1px solid #fff;
}
.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
color: #4154f1;
border-color: #4154f1;
}
.portfolio #portfolio-flters li:last-child {
margin-right: 0;
}
.portfolio .portfolio-wrap {
transition: 0.3s;
position: relative;
overflow: hidden;
z-index: 1;
background: rgba(255, 255, 255, 0.75);
}
.portfolio .portfolio-wrap::before {
content: "";
background: rgba(255, 255, 255, 0.75);
position: absolute;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
transition: all ease-in-out 0.3s;
z-index: 2;
opacity: 0;
}
.portfolio .portfolio-wrap img {
transition: 1s;
}
.portfolio .portfolio-wrap .portfolio-info {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
z-index: 3;
transition: all ease-in-out 0.3s;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.portfolio .portfolio-wrap .portfolio-info::before {
display: block;
content: "";
width: 48px;
height: 48px;
position: absolute;
top: 35px;
left: 35px;
border-top: 3px solid rgba(1, 41, 112, 0.2);
border-left: 3px solid rgba(1, 41, 112, 0.2);
transition: all 0.5s ease 0s;
z-index: 9994;
}
.portfolio .portfolio-wrap .portfolio-info::after {
display: block;
content: "";
width: 48px;
height: 48px;
position: absolute;
bottom: 35px;
right: 35px;
border-bottom: 3px solid rgba(1, 41, 112, 0.2);
border-right: 3px solid rgba(1, 41, 112, 0.2);
transition: all 0.5s ease 0s;
z-index: 9994;
}
.portfolio .portfolio-wrap .portfolio-info h4 {
font-size: 20px;
color: #012970;
font-weight: 700;
}
.portfolio .portfolio-wrap .portfolio-info p {
color: #012970;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
padding: 0;
margin: 0;
}
.portfolio .portfolio-wrap .portfolio-links {
text-align: center;
z-index: 4;
}
.portfolio .portfolio-wrap .portfolio-links a {
color: #fff;
background: #4154f1;
margin: 10px 2px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: 0.3s;
}
.portfolio .portfolio-wrap .portfolio-links a i {
font-size: 24px;
line-height: 0;
}
.portfolio .portfolio-wrap .portfolio-links a:hover {
background: #5969f3;
}
.portfolio .portfolio-wrap:hover img {
transform: scale(1.1);
}
.portfolio .portfolio-wrap:hover::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
}
.portfolio .portfolio-wrap:hover .portfolio-info {
opacity: 1;
}
.portfolio .portfolio-wrap:hover .portfolio-info::before {
top: 15px;
left: 15px;
}
.portfolio .portfolio-wrap:hover .portfolio-info::after {
bottom: 15px;
right: 15px;
}
/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
padding-top: 40px;
}
.portfolio-details .portfolio-details-slider img {
width: 100%;
}
.portfolio-details .portfolio-details-slider .swiper-pagination {
margin-top: 20px;
position: relative;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
border: 1px solid #4154f1;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
background-color: #4154f1;
}
.portfolio-details .portfolio-info {
padding: 30px;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
}
.portfolio-details .portfolio-info h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.portfolio-details .portfolio-info ul {
list-style: none;
padding: 0;
font-size: 15px;
}
.portfolio-details .portfolio-info ul li+li {
margin-top: 10px;
}
.portfolio-details .portfolio-description {
padding-top: 30px;
}
.portfolio-details .portfolio-description h2 {
font-size: 26px;
font-weight: 700;
margin-bottom: 20px;
}
.portfolio-details .portfolio-description p {
padding: 0;
}
/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials {
background: #fff;
background-image: linear-gradient(180deg, rgba(132,199,227,1) 0%, rgba(255,255,255,1) 70%);
padding: 60px 0;
}
.testimonials .section-header p {
margin: 15px 0 10px 0;
font-size: 60px;
line-height: 1.1;
color: #368fa2;
font-weight: 700;
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
}
.testimonials .section-header p:after {
content: '';
width:200px;
padding-top:15px;
border-bottom: 5px solid #368fa2;
display: block;
margin: 0 auto;
}
.testimonials .sp-pararagraph{
color: #368fa2;
font-size: 22px;
text-align: center;
}
.testimonials .testimonial-item {
overflow: hidden;
border-radius: 5px;
margin: 0px 50px 50px 50px;
box-shadow: 0px 0 20px rgba(1, 41, 112, 0.2);
background: #fff;
text-align: center;
transition: 0.3s;
}
.testimonials .testimonial-item .info h4 {
font-weight: 700;
margin-bottom: 5px;
font-size: 20px;
font-size-adjust: 0.5;
color: #368fa2;
text-transform: uppercase;
}
.testimonials .testimonial-item .info {
padding: 50px 15px 20px 15px;
}
.testimonials .testimonial-item .img-product {
display:block;
position: absolute;
overflow: hidden;
left: 50%;
transform: translate(-50%);
max-width:80%;
height: auto;
top: 7%;
z-index: 1;
-webkit-filter: drop-shadow(0px 10px 15px #333);
filter: drop-shadow(0px 10px 15px #333);
transition: 0.5s;
}
.testimonials .testimonial-item .img-product {
}
.testimonials .testimonial-item .img-product:hover {
transform: scale(1.08) translate(-46%);
}
.testimonials .testimonial-item .stars {
margin-bottom: 15px;
}
.testimonials .testimonial-item .stars i {
color: #ffc107;
margin: 0 1px;
}
.testimonials .testimonial-item .testimonial-img {
width: 150px;
/*border-radius: 50%;
border: 4px solid #fff;*/
filter: drop-shadow(0px 2px 3px #222);
margin: 0 auto;
}
.testimonials .testimonial-item h3 {
font-size: 18px;
font-weight: bold;
margin: 10px 0 5px 0;
color: #111;
}
.testimonials .testimonial-item h4 {
font-size: 14px;
color: #999;
margin: 0;
}
.testimonials .testimonial-item p {
font-family: "fsalbert", sans-serif;
font-size: 10pt;
margin: 0 auto 15px auto;
}
.testimonials .swiper-pagination {
margin-top: 20px;
position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #efefef;
opacity: 1;
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
background-color: #368fa2;
}
.testimonials .swiper-slide {
opacity: 0.3;
}
.testimonials .btn-more {
font-family: 'MYRIADPRO-REGULAR', sans-serif;
margin: 20px 25px 20px 25px;
padding: 20px;
text-align: center;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 50px;
display: block;
line-height: 0;
color: #fff;
background: #368fa2;
}
@media (max-width: 576px){
.testimonials .section-header p {
font-size: 30px;
}
.testimonials .sp-pararagraph{
font-size: 16px;
margin-left: 20px;
margin-right: 20px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
}
@media (max-width: 450px){
.testimonials .testimonial-item .img-product {
max-width:80%;
height: auto;
top: 3%;
}
.testimonials .testimonial-item .img-product {
display:block;
position: absolute;
overflow: hidden;
left: 50%;
transform: translate(-50%);
max-width:50%;
height: auto;
top: 7%;
z-index: 1;
-webkit-filter: drop-shadow(0px 10px 15px #333);
filter: drop-shadow(0px 10px 15px #333);
transition: 0.5s;
}
}
@media (max-width: 1199px) {
.testimonials .swiper-slide-active {
opacity: 1;
}
.testimonials .swiper-pagination {
margin-top: 0;
}
.testimonials .testimonial-item .img-product {
display:block;
position: absolute;
overflow: hidden;
left: 50%;
transform: translate(-50%);
max-width:80%;
height: auto;
top: -5%;
z-index: 1;
-webkit-filter: drop-shadow(0px 10px 15px #333);
filter: drop-shadow(0px 10px 15px #333);
transition: 0.5s;
}
}
@media (min-width: 1200px) {
.testimonials .swiper-slide-next {
opacity: 1;
transform: scale(1.12);
}
.testimonials .testimonial-item .img-product {
display:block;
position: absolute;
overflow: hidden;
left: 50%;
transform: translate(-50%);
max-width:10%;
height: auto;
top: 7%;
z-index: 1;
-webkit-filter: drop-shadow(0px 10px 15px #333);
filter: drop-shadow(0px 10px 15px #333);
transition: 0.5s;
}
}
/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team {
background: #fff;
background-image: linear-gradient(180deg, rgba(132,199,227,1) 0%, rgba(255,255,255,1) 70%);
padding: 60px 0;
}
.team .section-header p {
margin: 15px 0 10px 0;
font-size: 60px;
line-height: 1.1;
color: #368fa2;
font-weight: 700;
font-family: "MYRIADPRO-BOLDCOND",sans-serif;
}
.team .section-header p:after {
content: '';
width:200px;
padding-top:15px;
border-bottom: 5px solid #368fa2;
display: block;
margin: 0 auto;
}
.team .sp-pararagraph{
color: #368fa2;
font-size: 22px;
text-align: center;
}
.team .member {
overflow: hidden;
text-align: center;
border-radius: 5px;
background: #fff;
box-shadow: 0px 0 50px rgba(1, 41, 112, 0.2);
transition: 0.3s;
}
.img-product {
display:block;
position: absolute;
overflow: hidden;
top:-8%;
left: 50%;
transform: translate(-50%);
max-width:100%;
height: auto;
z-index: 1;
-webkit-filter: drop-shadow(0px 10px 15px #333);
filter: drop-shadow(0px 10px 15px #333);
transition: 0.5s;
}
.img-product:hover {
transform: scale(1.08) translate(-46%);
}
.member-img {
position: relative;
overflow: hidden;
}
.team .member .img-product{
position:relative;
}
.team .member .social {
position: absolute;
right: -100%;
top: 30px;
opacity: 0;
border-radius: 4px;
transition: 0.5s;
background: rgba(255, 255, 255, 0.3);
z-index: 2;
}
.team .member .social a {
transition: color 0.3s;
color: rgba(1, 41, 112, 0.5);
margin: 15px 12px;
display: block;
line-height: 0;
text-align: center;
}
.team .member .social a:hover {
color: rgba(1, 41, 112, 0.8);
}
.team .member .social i {
font-size: 18px;
}
.team .member .member-info {
padding: 40px 15px 20px 15px;
}
.team .member .member-info h4 {
letter-spacing:1px;
font-weight: 700;
margin-bottom: 5px;
font-size: 22px;
color: #368fa2;
text-transform: uppercase;
}
.team .member .member-info span {
display: block;
font-size: 16px;
letter-spacing: 0.5px;
color: #aaaaaa;
font-family: 'MyriadPro-Light', sans-serif;
}
.team .member .member-info p {
font-style: italic;
font-size: 14px;
padding-top: 15px;
line-height: 26px;
color: #5e5e5e;
font-family: "fsalbert", sans-serif;
}
/*.team .member:hover {
transform: scale(1.08);
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
}
.team .member:hover .social {
right: 8px;
opacity: 1;
}*/
.team .btn-more {
margin: 20px 25px 20px 25px;
padding: 20px;
text-align: center;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 50px;
display: block;
line-height: 0;
color: #fff;
background: #368fa2;
}
.btn-grad2 {
background-image: linear-gradient(to right, #314755 0%, #26a0da 51%, #314755 100%);
margin: 10px;
padding: 15px 45px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
display: block;
}
.btn-grad2:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}
/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
.clients{
background: #fff;
background-image: linear-gradient(180deg, rgba(132,199,227,1) 0%, rgba(255,255,255,1) 70%);
padding: 60px 0 0 0;
}
.clients2{
background: #fff;
padding: 60px 0 60px 0;
}
.clients .section-header p {
margin: 15px 0 10px 0;
font-size: 56px;
line-height: 1.1;
color: #368fa2;
font-weight: 700;
padding-bottom:100px;
font-family: "MYRIADPRO-BOLDCOND",sans-serif;
}
.clients2 .section-header p {
margin: 15px 0 10px 0;
font-size: 56px;
line-height: 1.1;
color: #368fa2;
font-weight: 700;
padding-bottom:10px;
font-family: "MYRIADPRO-BOLDCOND",sans-serif;
}
.clients .list-logo{
text-align:center;
padding-bottom:100px;
}
.clients2 .swiper-pagination {
margin-top: 20px;
position: relative;
}
.clients2 .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #efefef;
opacity: 1;
}
.clients2 .swiper-pagination .swiper-pagination-bullet-active {
background-color: #368fa2;
}
@media (max-width: 768px) {
.clients .section-header p {
font-size: 40px;
}
.clients2 .clients-slider{
margin-left:10px;
margin-right:10px;
}
}
@media (max-width: 564px) {
.clients2 .section-header p {
margin: 15px 0 10px 0;
font-size: 30px;
}
}
/*--------------------------------------------------------------
# Gallery
--------------------------------------------------------------*/
.gallery {
padding-top: 60px;
padding-bottom:60px;
}
.gallery .content .column{
padding:0px 30px 0px 0px;
}
.gallery .content .column-desc{
padding-bottom:50px;
}
.gallery .content img {
width:100%;
height: auto;
}
.gallery span{
font-family: "MYRIADPRO-REGULAR",sans-serif;
font-size:12pt;
color:#606161;
}
.gallery h4 {
color : #848685;
margin-top:10px;
font-size:13pt;
font-family: "MYRIADPRO-REGULAR",sans-serif;
}
.gallery h2 {
font-family: "MYRIADPRO-BOLDCOND",sans-serif;
font-size: 26pt;
letter-spacing: 2;
color: #64ad9a;
}
.gallery h1 {
font-size: 36px;
font-weight: 700;
color: #002c91;
}
.gallery .section-header p {
margin: 15px 0 10px 0;
font-size: 60px;
line-height: 1.1;
color: #33987f;
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
font-weight:700;
text-align: left;
}
@media (max-width: 992px) {
.gallery .content .column{
padding:0px 20px 0px 0px;
}
.gallery h4 {
color : #848685;
margin-top:10px;
font-size:11pt;
font-family: "MYRIADPRO-REGULAR",sans-serif;
}
.gallery h2 {
font-family: "MYRIADPRO-BOLDCOND",sans-serif;
font-size: 24pt;
letter-spacing: 2;
color: #64ad9a;
}
}
@media (max-width: 768px) {
.gallery .content .column{
padding:0px 15px 0px 0px;
}
.gallery h4 {
color : #848685;
margin-top:10px;
font-size:11pt;
font-family: "MYRIADPRO-REGULAR",sans-serif;
}
.gallery h2 {
font-family: "MYRIADPRO-BOLDCOND",sans-serif;
font-size: 24pt;
letter-spacing: 2;
color: #64ad9a;
}
}
/*--------------------------------------------------------------
# Recent Blog Posts
--------------------------------------------------------------*/
.recent-blog-posts .post-box {
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
transition: 0.3s;
height: 100%;
overflow: hidden;
padding: 30px;
border-radius: 8px;
position: relative;
display: flex;
flex-direction: column;
}
.recent-blog-posts .post-box .post-img {
overflow: hidden;
margin: -30px -30px 15px -30px;
position: relative;
}
.recent-blog-posts .post-box .post-img img {
transition: 0.5s;
}
.recent-blog-posts .post-box .post-date {
font-size: 16px;
font-weight: 600;
color: rgba(1, 41, 112, 0.6);
display: block;
margin-bottom: 10px;
}
.recent-blog-posts .post-box .post-title {
font-size: 24px;
color: #012970;
font-weight: 700;
margin-bottom: 18px;
position: relative;
transition: 0.3s;
}
.recent-blog-posts .post-box .readmore {
display: flex;
align-items: center;
font-weight: 600;
line-height: 1;
transition: 0.3s;
}
.recent-blog-posts .post-box .readmore i {
line-height: 0;
margin-left: 4px;
font-size: 18px;
}
.recent-blog-posts .post-box:hover .post-title {
color: #4154f1;
}
.recent-blog-posts .post-box:hover .post-img img {
transform: rotate(6deg) scale(1.2);
}
/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact{
background-color: #fff;
padding: 40px;
background: url(../img/background/chemical-topright.png) no-repeat right top;
min-height: 500px;
}
.contact .text-logo{
font-size: 24pt;
font-style: normal;
color: #000;
}
.contact .info-box {
color: #000;
background: #efefef;
padding: 30px;
}
.contact .info-box i {
font-size: 38px;
line-height: 0;
color: #002476;
}
.contact .info-box h3 {
font-size: 20px;
color: #012970;
font-weight: 700;
margin: 20px 0 10px 0;
}
.contact span {
font-family: "fsalbert", sans-serif;
}
.contact .info-box p {
padding-top: 10px;
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
font-family: "fsalbert", sans-serif;
}
.contact .php-email-form {
background: #fafbff;
padding: 30px;
height: 100%;
}
.contact .php-email-form .error-message {
display: none;
color: #fff;
background: #ed3c0d;
text-align: left;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
}
.contact .php-email-form .sent-message {
display: none;
color: #fff;
background: #18d26e;
text-align: center;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
}
.contact .php-email-form .loading {
display: none;
background: #fff;
text-align: center;
padding: 15px;
margin-bottom: 24px;
}
.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 #18d26e;
border-top-color: #eee;
-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;
border-radius: 0;
}
.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
border-color: #4154f1;
}
.contact .php-email-form input {
padding: 10px 15px;
}
.contact .php-email-form textarea {
padding: 12px 15px;
}
.contact .php-email-form button[type=submit] {
background: #4154f1;
border: 0;
padding: 10px 30px;
color: #fff;
transition: 0.4s;
border-radius: 4px;
}
.contact .php-email-form button[type=submit]:hover {
background: #5969f3;
}
@-webkit-keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Trend Products
--------------------------------------------------------------*/
.trend-products {
padding: 160px 0 160px 0;
min-height: 500px;
}
.trend-products h2{
margin: 15px 0 10px 0;
font-size: 60px;
line-height: 1.1;
color: #33987f;
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
font-weight: 700;
text-align: left;
}
.trend-products img{
width:auto;
height:350px;
display: block;
margin: auto;
}
.trend-products .title h2{
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
font-size: 36pt;
color: #64ad9a;
}
.trend-products .title h4{
color: #5d5d5d;
font-weight:700;
margin-top: 10px;
font-size: 16pt;
font-family: "MYRIADPRO-REGULAR", sans-serif;
}
.trend-products .sp-paragraph{
padding-top:10px;
}
.trend-products .sp-paragraph span{
margin-top:10px;
font-family: "MYRIADPRO-REGULAR", sans-serif;
font-size: 16pt;
color: #5d5d5d;
}
.trend-products .content{
padding-top:80px;
}
.trend-products .content h3{
color: #000;
font-family: "MYRIADPRO-COND",sans-serif;
font-size:68px;
}
.trend-products .content p{
color: #000;
font-family: "MYRIADPRO-REGULAR",sans-serif;
font-size:26px;
}
@media (max-width: 564px){
.trend-products {
padding: 80px 0 60px 0;
min-height: 500px;
}
.trend-products h2{
margin: 15px 0 10px 0;
font-size: 40px;
line-height: 1.1;
color: #33987f;
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
font-weight: 700;
text-align: left;
}
.trend-products img{
width:auto;
height:250px;
display: block;
margin: auto;
}
.trend-products .title h2{
font-family: "MYRIADPRO-BOLDCOND", sans-serif;
font-size: 20pt;
color: #64ad9a;
}
.trend-products .title h4{
color: #5d5d5d;
font-weight:700;
margin-top: 10px;
font-size: 12pt;
font-family: "MYRIADPRO-REGULAR", sans-serif;
}
.trend-products .sp-paragraph{
padding-top:10px;
}
.trend-products .sp-paragraph span{
margin-top:10px;
font-family: "MYRIADPRO-REGULAR", sans-serif;
font-size: 12pt;
color: #5d5d5d;
}
}
/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.blog {
padding: 160px 0 50px 0;
background-color: #fff;
min-height: 500px;
}
.blog .section-header{
text-align: left;
}
.blog .section-header h2{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:26pt;
}
.blog .section-header h2:after {
content: '';
width: 100%;
padding-top: 2px;
border-bottom: 3px solid #bfbfbf;
display: block;
margin: 0 auto;
}
.blog .section-header span{
font-family: "MYRIADPRO-REGULAR",sans-serif;
font-size:32pt;
font-weight: 1000;
}
.blog .news-left-one,.news-left-two,.news-left-three,.news-right-one,.news-right-two{
position:relative;
overflow:hidden !important;
}
.blog .news-title {
font-family: "MYRIADPRO-COND",sans-serif;
font-size:24pt;
position: absolute;
bottom: 8px;
left: 16px;
color: #fff;
z-index:1;
}
.blog .news-left-one:after,.news-left-two:after,.news-left-three:after,
.news-right-one:after,.news-right-two:after{
content:"";
position:absolute;
display: inline-block;
left:0;
top:0;
width:100%;
height:100%;
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(0,0,0,0.60) 100%);
}
.blog .news-left-one img{
display:block;
width:100%;
height:500px;
object-fit:cover;
transition:0.5s;
}
.blog .news-left-two img{
display:block;
width:100%;
height:300px;
object-fit:cover;
transition:0.5s;
}
.blog .news-left-three img{
display:block;
width:100%;
height:300px;
object-fit:cover;
transition:0.5s;
}
.blog .news-right-one img{
display:block;
width:100%;
height:400px;
object-fit:cover;
transition:0.5s;
}
.blog .news-right-two img{
display:block;
width:100%;
height:400px;
object-fit:cover;
transition:0.5s;
}
.blog .news-left-one:hover img,.news-left-two:hover img,.news-left-three:hover img,
.news-right-one:hover img,.news-right-two:hover img{
transform:scale(1.1);
}
.blog .ep-top img{
width:100%;
height:350px;
object-fit:cover;
}
.blog .ep-top h2{
margin-top:20px;
font-family: "MYRIADPRO-COND",sans-serif;
font-size:24pt;
}
.blog .ep-top p{
font-family: "MyriadPro-Light",sans-serif;
font-size:12pt;
}
.blog .ep-others .row{
padding-bottom: 50px;
}
.blog .ep-others img{
width:120px;
height:120px;
object-fit:cover;
}
.blog .ep-others h2{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:16pt;
}
.blog .ep-others p{
font-family: "MyriadPro-Light",sans-serif;
font-size:10pt;
}
.blog .header-spotlight{
font-family: "MYRIADPRO-BOLD",sans-serif;
font-size:18px;
background: #fff;
position: fixed;
left: 83%;
transform: translate(-50%, -50%);
}
.blog .spotlight{
border-radius: 5px;
padding: 25px;
box-shadow: 3px 1px 10px rgba(0, 0, 0, 0.1);
}
.blog .spotlight img{
width:100%;
height:150px;
object-fit:cover;
}
.blog .spotlight h2{
font-family: "MYRIADPRO-COND",sans-serif;
font-size:16pt;
padding-top:10px;
}
.blog .spotlight p{
font-family: "MyriadPro-Light",sans-serif;
font-size:10pt;
}
.blog .entry {
background-color: #fff;
padding: 30px;
margin-bottom: 60px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog .entry .entry-img {
max-height: 440px;
margin: -30px -30px 20px -30px;
overflow: hidden;
}
.blog .entry .entry-title {
font-size: 28px;
font-weight: bold;
padding: 0;
margin: 0 0 20px 0;
}
.blog .entry .entry-title a {
color: #33987f;
transition: 0.3s;
}
.blog .entry .entry-title a:hover {
color: #1b859a;
}
.blog .entry .entry-meta {
margin-bottom: 15px;
color: #000;
}
.blog .entry .entry-meta ul {
display: flex;
flex-wrap: wrap;
list-style: none;
align-items: center;
padding: 0;
margin: 0;
}
.blog .entry .entry-meta ul li+li {
padding-left: 20px;
}
.blog .entry .entry-meta i {
font-size: 16px;
margin-right: 8px;
line-height: 0;
}
.blog .entry .entry-meta a {
color: #777777;
font-size: 14px;
display: inline-block;
line-height: 1;
}
.blog .entry .entry-content p {
line-height: 24px;
font-family: "fsalbert", sans-serif;
}
.blog .entry .entry-content img {
max-width: 100%;
max-height: 100%;
}
.blog .entry .entry-content .read-more {
-moz-text-align-last: right;
text-align-last: right;
}
.blog .btn-read-more {
line-height: 0;
padding: 15px;
border-radius: 4px;
transition: 0.5s;
color: #fff;
background: #002476;
box-shadow: 0px 5px 25px rgba(133,133,133, 0.5);
}
.blog .btn-read-more span {
font-family: "MYRIADPRO-REGULAR", sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
}
.blog .btn-read-more i {
margin-left: 5px;
font-size: 18px;
transition: 0.3s;
}
.blog .btn-read-more:hover i {
transform: translateX(5px);
}
.blog .entry .entry-content h3 {
font-size: 22px;
margin-top: 30px;
font-weight: bold;
}
.blog .entry .entry-content blockquote {
overflow: hidden;
background-color: #fafafa;
padding: 60px;
position: relative;
text-align: center;
margin: 20px 0;
}
.blog .entry .entry-content blockquote p {
color: #444444;
line-height: 1.6;
margin-bottom: 0;
font-style: italic;
font-weight: 500;
font-size: 22px;
}
.blog .entry .entry-content blockquote::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: #012970;
margin-top: 20px;
margin-bottom: 20px;
}
.blog .entry .entry-footer {
padding-top: 10px;
border-top: 1px solid #e6e6e6;
}
.blog .entry .entry-footer i {
color: #1b859a;
display: inline;
}
.blog .entry .entry-footer a {
color: #1b859a;
transition: 0.3s;
}
.blog .entry .entry-footer a:hover {
color: #33987f;
}
.blog .entry .entry-footer .cats {
list-style: none;
display: inline;
padding: 0 20px 0 0;
font-size: 14px;
}
.blog .entry .entry-footer .cats li {
display: inline-block;
}
.blog .entry .entry-footer .tags {
list-style: none;
display: inline;
padding: 0;
font-size: 14px;
}
.blog .entry .entry-footer .tags li {
display: inline-block;
}
.blog .entry .entry-footer .tags li+li::before {
padding-right: 6px;
color: #6c757d;
content: ",";
}
.blog .entry .entry-footer .share {
font-size: 16px;
}
.blog .entry .entry-footer .share i {
padding-left: 5px;
}
.blog .entry-single {
margin-bottom: 30px;
}
.blog .blog-author {
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog .blog-author img {
width: 120px;
margin-right: 20px;
}
.blog .blog-author h4 {
font-weight: 600;
font-size: 22px;
margin-bottom: 0px;
padding: 0;
color: #012970;
}
.blog .blog-author .social-links {
margin: 0 10px 10px 0;
}
.blog .blog-author .social-links a {
color: rgba(1, 41, 112, 0.5);
margin-right: 5px;
}
.blog .blog-author p {
font-style: italic;
color: #b7b7b7;
}
.blog .blog-comments {
margin-bottom: 30px;
}
.blog .blog-comments .comments-count {
font-weight: bold;
}
.blog .blog-comments .comment {
margin-top: 30px;
position: relative;
}
.blog .blog-comments .comment .comment-img {
margin-right: 14px;
}
.blog .blog-comments .comment .comment-img img {
width: 60px;
}
.blog .blog-comments .comment h5 {
font-size: 16px;
margin-bottom: 2px;
}
.blog .blog-comments .comment h5 a {
font-weight: bold;
color: #444444;
transition: 0.3s;
}
.blog .blog-comments .comment h5 a:hover {
color: #4154f1;
}
.blog .blog-comments .comment h5 .reply {
padding-left: 10px;
color: #012970;
}
.blog .blog-comments .comment h5 .reply i {
font-size: 20px;
}
.blog .blog-comments .comment time {
display: block;
font-size: 14px;
color: #013ca3;
margin-bottom: 5px;
}
.blog .blog-comments .comment.comment-reply {
padding-left: 40px;
}
.blog .blog-comments .reply-form {
margin-top: 30px;
padding: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog .blog-comments .reply-form h4 {
font-weight: bold;
font-size: 22px;
}
.blog .blog-comments .reply-form p {
font-size: 14px;
}
.blog .blog-comments .reply-form input {
border-radius: 4px;
padding: 10px 10px;
font-size: 14px;
}
.blog .blog-comments .reply-form input:focus {
box-shadow: none;
border-color: #a0aaf8;
}
.blog .blog-comments .reply-form textarea {
border-radius: 4px;
padding: 10px 10px;
font-size: 14px;
}
.blog .blog-comments .reply-form textarea:focus {
box-shadow: none;
border-color: #a0aaf8;
}
.blog .blog-comments .reply-form .form-group {
margin-bottom: 25px;
}
.blog .blog-comments .reply-form .btn-primary {
border-radius: 4px;
padding: 10px 20px;
border: 0;
background-color: #012970;
}
.blog .blog-comments .reply-form .btn-primary:hover {
background-color: #013289;
}
.blog .blog-pagination {
color: #024ed5;
}
.blog .blog-pagination ul {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
.blog .blog-pagination li {
margin: 0 5px;
transition: 0.3s;
}
.blog .blog-pagination li a {
color: #002476;
padding: 7px 16px;
display: flex;
align-items: center;
justify-content: center;
}
.blog .blog-pagination li.active,
.blog .blog-pagination li:hover {
background: #002476;
}
.blog .blog-pagination li.active a,
.blog .blog-pagination li:hover a {
color: #fff;
}
.blog .sidebar {
padding: 30px;
background: #fff;
margin: 0 0 60px 20px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog .sidebar .sidebar-title {
font-size: 20px;
font-weight: 700;
padding: 0 0 0 0;
margin: 0 0 15px 0;
color: #33987f;
position: relative;
}
.blog .sidebar .sidebar-item {
margin-bottom: 30px;
}
.blog .sidebar .search-form form {
background: #fff;
border: 1px solid #ddd;
padding: 3px 10px;
position: relative;
}
.blog .sidebar .search-form form input[type=text] {
border: 0;
padding: 4px;
border-radius: 4px;
width: calc(100% - 40px);
}
.blog .sidebar .search-form form button {
position: absolute;
top: 0;
right: 0;
bottom: 0;
border: 0;
background: none;
font-size: 16px;
padding: 0 15px;
margin: -1px;
background: #4154f1;
color: #fff;
transition: 0.3s;
border-radius: 0 4px 4px 0;
line-height: 0;
}
.blog .sidebar .search-form form button i {
line-height: 0;
}
.blog .sidebar .search-form form button:hover {
background: #5465f2;
}
.blog .sidebar .categories ul {
list-style: none;
padding: 0;
}
.blog .sidebar .categories ul li+li {
padding-top: 10px;
}
.blog .sidebar .categories ul a {
color: #33987f;
transition: 0.3s;
}
.blog .sidebar .categories ul a:hover {
color: #1b859a;
}
.blog .sidebar .categories ul a span {
padding-left: 5px;
color: #aaaaaa;
font-size: 14px;
}
.blog .sidebar .recent-posts .post-item+.post-item {
margin-top: 15px;
}
.blog .sidebar .recent-posts img {
width: 80px;
float: left;
}
.blog .sidebar .recent-posts h4 {
font-size: 15px;
margin-left: 95px;
font-weight: bold;
}
.blog .sidebar .recent-posts h4 a {
color: #33987f;
transition: 0.3s;
}
.blog .sidebar .recent-posts h4 a:hover {
color: #1b859a;
}
.blog .sidebar .recent-posts time {
display: block;
margin-left: 95px;
font-style: italic;
font-size: 14px;
color: #aaaaaa;
}
.blog .sidebar .tags {
margin-bottom: -10px;
}
.blog .sidebar .tags ul {
list-style: none;
padding: 0;
}
.blog .sidebar .tags ul li {
display: inline-block;
}
.blog .sidebar .tags ul a {
color: #0257ee;
font-size: 14px;
padding: 6px 14px;
margin: 0 6px 8px 0;
border: 1px solid #d7e6ff;
display: inline-block;
transition: 0.3s;
}
.blog .sidebar .tags ul a:hover {
color: #fff;
border: 1px solid #4154f1;
background: #4154f1;
}
.blog .sidebar .tags ul a span {
padding-left: 5px;
color: #a5c5fe;
font-size: 14px;
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
background: #368fa2;
padding: 0 0 30px 0;
font-size: 14px;
}
.footer .footer-newsletter {
padding: 50px 0;
background: #f6f9ff;
border-top: 1px solid #e1ecff;
}
.footer .img-licence{
height:70px;
width:auto;
}
.footer .footer-newsletter h4 {
font-size: 24px;
margin: 0 0 10px 0;
padding: 0;
line-height: 1;
font-weight: 700;
color: #012970;
}
.footer .footer-newsletter form {
margin-top: 20px;
background: #fff;
padding: 6px 10px;
position: relative;
border-radius: 4px;
border: 1px solid #e1ecff;
}
.footer .footer-newsletter form input[type=email] {
border: 0;
padding: 8px;
width: calc(100% - 140px);
}
.footer .footer-newsletter form input[type=submit] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
border: 0;
background: none;
font-size: 16px;
padding: 0 30px;
margin: 3px;
background: #4154f1;
color: #fff;
transition: 0.3s;
border-radius: 4px;
}
.footer .footer-newsletter form input[type=submit]:hover {
background: #5969f3;
}
.footer .footer-top {
background-size: contain;
border-bottom: 1px solid #fff;
padding: 60px 0 30px 0;
}
@media (max-width: 992px) {
.footer .footer-top {
background-position: center bottom;
}
}
@media (max-width: 768px) {
.footer .img-licence{
height:50px;
width:auto;
}
}
.footer .footer-top .footer-info {
margin-bottom: 30px;
}
.footer .footer-top .footer-info .logo {
line-height: 0;
margin-bottom: 15px;
}
.footer .footer-top .footer-info .logo img {
max-height: 100px;
margin-right: 6px;
}
.footer .footer-top .footer-info span {
font-size: 50px;
font-weight: 700;
color: #fff;
margin-top: 3px;
line-height: 1;
font-family: "MYRIADPRO-BOLDCOND",sans-serif;
}
.footer .footer-top .footer-info p {
padding-top:10px;
font-size: 20px;
line-height: 24px;
color: #fff;
margin-bottom: 0;
}
.footer .footer-top .footer-download .catalog {
display: block;
margin-left:auto;
margin-right:auto;
max-width:60%;
}
.footer .footer-top .footer-download img {
max-width:100%;
height:auto;
}
.footer .footer-top .footer-download span {
display:inline-block;
text-align:center;
color: #fff;
font-size:16px;
}
.footer .footer-top .social-links a {
font-size: 20px;
display: inline-block;
color: rgba(48,48,48,1);
line-height: 0;
margin-right: 10px;
transition: 0.3s;
}
.footer .footer-top .social-links a:hover {
color: #8a8a8a;
}
.footer .footer-top h4 {
font-size: 16px;
font-weight: bold;
color: #444444;
text-transform: uppercase;
position: relative;
padding-bottom: 12px;
}
.footer .footer-top .footer-links {
margin-bottom: 30px;
}
.footer .footer-top .footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer .footer-top .footer-links ul i {
padding-right: 2px;
color: #d0d4fc;
font-size: 12px;
line-height: 0;
}
.footer .footer-top .footer-links ul li {
padding: 10px 0;
display: flex;
align-items: center;
}
.footer .footer-top .footer-links ul li:first-child {
padding-top: 0;
}
.footer .footer-top .footer-links ul a {
color: #013289;
transition: 0.3s;
display: inline-block;
line-height: 1;
}
.footer .footer-top .footer-links ul a:hover {
color: #4154f1;
}
.footer .footer-top .footer-contact p {
line-height: 26px;
}
.footer .copyright {
text-align: center;
padding-top: 30px;
color: #fff;
}
.footer .credits {
padding-top: 10px;
text-align: center;
font-size: 13px;
color: #000;
}