/** * Aissel Website General CSS * Author: Developer * License: https://aissel.com/ */ /**** ### General ### ****/ body { font-family: asap,sans-serif; font-size: 10px; } a { color: #fff; text-decoration: none; } a:hover { color: #3b8af2; text-decoration: none; } #header-container{ padding-right: 24px; padding-left: 24px; } .orange_color, .orange-color { color: #f96731 !important; } .blue-color { color: #0071BC; } /*-------------------------------------------------------------- # Buttons --------------------------------------------------------------*/ .button{ border-radius: 3px; font-family: asap,sans-serif; font-size: 15px; font-weight: 700; padding: 6px 27px; display: inline-block; } .button-12{ font-size: 12px; font-weight: 400; } .bg-button{ font-weight: 400; font-size: 24px; } .rounded-border{ border-radius: 15px; } .button-arrow { position: relative; right: -18px; } .blue-button{ color: #fff; background-color: #005e8c; border: 1px solid #005e8c; } .blue-button:hover{ border: 1px solid #005e8c; background-color: transparent; color: #005e8c; text-decoration: none; } .orange-button{ color: #ffffff; background-color: #f96731; border: 1px solid #f96731; } .orange-button:hover{ border: 1px solid #f96731; background-color: #ffffff; color: #f96731; text-decoration: none; } .orange-arrow{ position: relative; right: -20px; padding: 0px 5px; background: red; border-radius: 25px; top: 0px; } /*-------------------------------------------------------------- # Top Bar --------------------------------------------------------------*/ #topbar { background: #106eea; height: 36px; transition: all 0.5s; color: #fff; padding: 0; } #topbar a{ color: white; cursor: pointer; font-family: asap,sans-serif; font-size: 12px; font-weight: 400; line-height: 14px; margin: 0 10px; outline: 0 none; text-align: left; text-decoration: none; } .phone_num { font-size: 18px !important; margin-right: 80px; cursor: text !important; } /*-------------------------------------------------------------- # Header --------------------------------------------------------------*/ #header { position:relative; background: #fff; transition: all 0.5s; z-index: 997; min-height: 57px; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); } .fixed-top{ position:fixed !important; } #header.fixed-top { min-height: 57px; } #header .logo { font-size: 30px; margin: 0; padding: 0; line-height: 1; font-weight: 600; letter-spacing: 0.8px; font-family: "Poppins", sans-serif; } #header .logo a { color: #222222; } #header .logo a span { color: #106eea; } #header .logo img { max-height: 60px; padding: 2%; } .scrolled-offset { margin-top: 57px; } /*-------------------------------------------------------------- # Navigation Menu --------------------------------------------------------------*/ /** * Desktop Navigation */ .primary-navbar { padding: 0; } .primary-navbar ul { margin: 0; padding: 0; display: flex; list-style: none; align-items: center; } .primary-navbar li { position: relative; } .primary-navbar > ul > li { white-space: nowrap; padding: 9px 20px 10px 0px; } .primary-navbar a, .primary-navbar a:focus { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: #7f7f7f; white-space: nowrap; transition: 0.3s; position: relative; padding: 0 3px; } .primary-navbar a i, .primary-navbar a:focus i { font-size: 12px; line-height: 0; margin-left: 5px; } .primary-navbar > ul > li > a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: -6px; left: 0; background-color: #106eea; visibility: hidden; width: 0px; transition: all 0.3s ease-in-out 0s; } .primary-navbar a:hover:before, .primary-navbar li:hover > a:before, .primary-navbar .active:before { visibility: hidden; width: 100%; } .primary-navbar a:hover, .primary-navbar .active, .primary-navbar .active:focus, .primary-navbar li:hover > a { color: #106eea; } .primary-navbar .dropdown ul { display: block; position: absolute; left: 28px; top: calc(100% + 30px); margin: 0; padding: 10px 0; z-index: 99; opacity: 0; visibility: hidden; background: #fff; box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); transition: 0.3s; } .primary-navbar .dropdown ul li { min-width: 200px; } .primary-navbar .dropdown ul a { padding: 10px 20px; font-weight: 400; } .primary-navbar .dropdown ul a i { font-size: 12px; } .primary-navbar .dropdown ul a:hover, .primary-navbar .dropdown ul .active:hover, .primary-navbar .dropdown ul li:hover > a { color: #106eea; } .primary-navbar .dropdown:hover > ul { opacity: 1; top: 100%; visibility: visible; } .primary-navbar .dropdown .dropdown ul { top: 0; left: calc(100% - 30px); visibility: hidden; } .primary-navbar .dropdown .dropdown:hover > ul { opacity: 1; top: 0; left: 100%; visibility: visible; } /*secondary Menu */ #secondary-navbar { padding: 0; } #secondary-navbar ul { margin: 0; padding: 0; display: flex; list-style: none; align-items: center; } #secondary-navbar li { position: relative; } #secondary-navbar > ul > li { white-space: nowrap; padding: 0px 10px 6px 0px; } #secondary-navbar a, #secondary-navbar a:focus { display: flex; align-items: center; justify-content: space-between; padding: 0 3px; font-size: 13px; font-weight: normal; color: #7f7f7f; white-space: nowrap; transition: 0.3s; position: relative; } #secondary-navbar a i, #secondary-navbar a:focus i { font-size: 12px; line-height: 0; margin-left: 5px; } #secondary-navbar > ul > li > a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: -2px; left: 0; background-color: #106eea; visibility: hidden; width: 0px; transition: all 0.3s ease-in-out 0s; } #secondary-navbar a:hover:before, #secondary-navbar li:hover > a:before, #secondary-navbar .active:before { visibility: visible; width: 100%; } #secondary-navbar a:hover, #secondary-navbar .active, #secondary-navbar .active:focus, #secondary-navbar li:hover > a { color: #106eea; } #secondary-navbar .dropdown .dropdown-menu { display: block; position: absolute; left: 6px; top: calc(100% + 30px); margin: 0; padding: 6px 6px; z-index: 99; opacity: 0; visibility: hidden; background: #fff; box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); transition: 0.3s; } #secondary-navbar .dropdown:hover > .dropdown-menu { opacity: 1; top: 100%; visibility: visible; } #secondary-navbar .dropdown .dropdown .dropdown-menu { top: 0; left: calc(100% - 30px); visibility: hidden; } #secondary-navbar .dropdown .dropdown:hover > .dropdown-menu { opacity: 1; top: 0; left: 100%; visibility: visible; } #secondary-navbar .dropdown div > ul{ display: flex; flex-wrap: wrap; } #secondary-navbar .dropdown div > ul li { min-width: 200px; } #secondary-navbar .dropdown div > ul a { padding: 6px 15px; font-weight: 400; } #secondary-navbar .dropdown div > ul a i { font-size: 12px; } #secondary-navbar .dropdown div > ul a:hover, #secondary-navbar .dropdown div > ul .active:hover, #secondary-navbar .dropdown div > ul li:hover > a { color: #106eea; } #secondary-navbar .item-last{ padding-right:18px !important; } #product-subheader{ padding-bottom:12px !important; } .get-demo-btn{ background-color: #f96731; border: 1px solid #f96731; border-radius: 3px; color: #fff !important; display: inline-block !important; font-family: asap,sans-serif; font-size: 15px; font-weight: bold !important; height: 33px; line-height: 25px !important; margin-right: 0 !important; padding: 2px 20px !important; } @media (max-width: 1366px) { .navbar .dropdown .dropdown ul { left: -90%; } .navbar .dropdown .dropdown:hover > ul { left: -100%; } } /** * Mobile Navigation */ .mobile-nav-toggle { color: #222222; font-size: 28px; cursor: pointer; display: none; line-height: 0; transition: 0.5s; } .mobile-nav-toggle.bi-x { color: #fff; } @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: rgba(9, 9, 9, 0.9); transition: 0.3s; z-index: 999; } .navbar-mobile .mobile-nav-toggle { position: absolute; top: 15px; right: 15px; } .navbar-mobile ul { display: block; position: absolute; top: 55px; right: 15px; bottom: 15px; left: 15px; padding: 10px 0; background-color: #fff; overflow-y: auto; transition: 0.3s; } .navbar-mobile a { padding: 10px 20px; font-size: 15px; color: #222222; } .navbar-mobile > ul > li { padding: 0; } .navbar-mobile a:hover:before, .navbar-mobile li:hover > a:before, .navbar-mobile .active:before { visibility: hidden; } .navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a { color: #106eea; } .navbar-mobile .getstarted { 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: #106eea; } .navbar-mobile .dropdown > .dropdown-active { display: block; } /*-------------------------------------------------------------- # Konectar Instances Band --------------------------------------------------------------*/ #konectar-instance-list{ } #konectar-instance-list .konectar-instance-icon img{ } #konectar-instance-list .konectar-instance-title a span, #konectar-instance-list .konectar-instance-title a:hover{ color: #fff !important; text-decoration: none; font-weight: bold; font-size: 18px; } .home_page_header_text { font-size: 18px; } /*-------------------------------------------------------------- # discover-band --------------------------------------------------------------*/ .band-image-block{ } .band-title-block{ text-align: center; } .band-title-block .band-title{ color: #1c252e; font-family: asap-bold; font-size: 22px; line-height: 26px; } .band-title-block .band-content{ color: #7f7f7f; font-family: asap,sans-serif; font-size: 14px; font-weight: 400; line-height: 19px; } .divider{ position:absolute; } .main-title{ padding-top: 12px; margin-top:0px !important; font-size: 40px; line-height: 1.42857143; color: #333; font-family: asap; } #konectar-sub-product { background-image: url(../images/homepage/konectar_soc_virutual.png); background-repeat: no-repeat; background-size: cover; height: auto; } .ksp-virtual-engage, .ksp-social{ font-size: 16px; } .label-bold { font-family: asap-bold-italic; font-weight: bold; color: #000000; font-size: 16px; line-height: 22px; } .specialities-title { padding-top: 10px; font-size: 40px; line-height: 1.42857143; color: #333; font-family: asap; } .specialities-listing .list-group li{ font-size: 20px; padding-top: 5px; } /*-------------------------------------------------------------- # Product Page --------------------------------------------------------------*/ #products .band-one { background: rgba(0, 0, 0, 0) url("../images/products/p2.jpg") no-repeat scroll 0 0 / cover; background-repeat: no-repeat; background-size: cover; /* background-attachment:fixed; */ min-height: 450px; } #products .band-one-text{ font-family: asap-italic; font-size: 30px; font-weight: 400; line-height: 41px; color: #fff; padding:9% 4%; margin: 3% 0%; } #products .bold-text{ font-family: asap-bold-italic; font-size: 36px !important ; } #products .band-two, #products .band-four, #products .band-six, #products .band-nine{ background-color: #1c252e; } #products .band-image-block{ } #products .band-title-block{ text-align: center; } #products .band-title-block .band-title{ color: #ffffff; font-family: asap-bold; font-size: 20px; line-height: 24px; } #products .band-title-block .band-content{ color: #98a3ad; font-family: asap,sans-serif; font-weight: 400; text-align: left; font-size: 14px; } #products .band-three .content-title{ color: #1c252e; font-size: 34px; font-family: asap-bold; padding-bottom: 12px; } #products .band-three .content-description{ color: #7f7f7f; font-size: 20px; line-height: 24px; font-family: asap,sans-serif; } #products .band-five .content-title{ color: #1c252e; font-size: 34px; line-height: 41px; font-family: asap-bold; } #products .band-five .content-description{ color: #7f7f7f; font-size: 20px; line-height: 24px; font-family: asap,sans-serif; } #products .band-seven{ background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.6) 100%), url("../images/products/integrated.jpg"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; height: 450px; color: #fff; } #products .profile-healthcare-text{ color: #000000; font-family: asap-bold-italic; font-size: 23px; line-height: 28px; } #products .band-eight .content-title{ color: #1c252e; font-family: asap-bold; font-size: 24px; line-height: 29px; } #products .band-eight .content-description{ color: #7f7f7f; font-family: asap,sans-serif; font-size: 16px; font-weight: 400; line-height: 19px; } #products .brochure-download-btn{ font-size: 14px; color:blue; } #products .brochure-download-btn img{ width: 15px; vertical-align: baseline; } #band-ten{ height: 250px; background-color: #f7f2ef; display: flex; align-items: center; justify-content: center; color: #fff; } #products .band-ten-text{ color: #1c252e; font-family: asap-bold-italic; font-size: 30px; line-height: 36px; margin-bottom: 32px; } /*-------------------------------------------------------------- # footer --------------------------------------------------------------*/ footer{ background-image: url("../images/optimized_images/footer.webp"); bottom: 0%; height: auto !important; } footer .container-fluid .row{ margin-left:0px; margin-right:0px; padding-right: 0px; } .footerLinksSection ul li{ padding-bottom: 15px; font-size: 12px; } .footerLinksSection ul li a{ color: #60717c; } .footerLinks label{ color: white; font-size: 14px; font-family: asap; font-weight: bold; } .footerLinks a{ color: #60717c; font-size:14px; font-family: asap; } .footerLinksSection .support_email_id{ padding-left:5px; } .footerLinksSection .footer_phone{ padding-left:3px; color: #60717c; } .copy_right_text{ background-color: transparent; color: #c8c8c8; font-size: 9px; font-weight: 400; line-height: 12px; text-align: center; } .copyright{ background-color: #3f444d; border-color: rgba(0, 0, 0, 0); border-style: none; height: 30px; } /*-------------------------------------------------------------- # Animation --------------------------------------------------------------*/ @keyframes fadeInUp { from { transform: translate3d(0,40px,0) } to { transform: translate3d(0,0,0); opacity: 1 } } @-webkit-keyframes fadeInUp { from { transform: translate3d(0,40px,0) } to { transform: translate3d(0,0,0); opacity: 1 } } .animated { animation-duration: 2s; animation-fill-mode: both; -webkit-animation-duration: 2s; -webkit-animation-fill-mode: both } .animatedFadeInUp { opacity: 0 } .fadeInUp { opacity: 0; animation-name: fadeInUp; -webkit-animation-name: fadeInUp; } @media screen and (max-width:768px) { .footerLinks .logo{ text-align: center; } }