Skip to content
GitLab
Commit b5fab406 authored by Sven Schneider's avatar Sven Schneider
Browse files

added main figure to demo page and added buttons to each section, section header made bold

parent bfe9b23a
Pipeline #6775 passed with stages
in 14 seconds
Hide whitespace changes
Inline Side-by-side
Showing
with 1535 additions and 1456 deletions
+1535 -1456
public/assets/css/style.css
+ 1296
- 1302
View file @ b5fab406
......@@ -5,28 +5,27 @@
* License: https://bootstrapmade.com/license/
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
scroll-behavior: smooth;
scroll-behavior: smooth;
}
body {
font-family: "Open Sans", sans-serif;
color: #444444;
font-family: "Open Sans", sans-serif;
color: #444444;
}
a {
color: #009cb4;
text-decoration: none;
color: #009cb4;
text-decoration: none;
}
a:hover {
color: #003056;
text-decoration: none;
color: #003056;
text-decoration: none;
}
h1,
......@@ -35,2494 +34,2489 @@ h3,
h4,
h5,
h6 {
font-family: "Nunito", sans-serif;
font-family: "Nunito", sans-serif;
}
/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
section {
padding: 60px 0;
overflow: hidden;
padding: 60px 0;
overflow: hidden;
}
.section-header {
text-align: center;
padding-bottom: 40px;
text-align: center;
padding-bottom: 40px;
}
.section-header h2 {
font-size: 13px;
letter-spacing: 1px;
font-weight: 700;
margin: 0;
color: #009cb4;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 1px;
font-weight: 700;
margin: 0;
color: #009cb4;
text-transform: uppercase;
}
.section-header p {
margin: 10px 0 0 0;
padding: 0;
font-size: 38px;
line-height: 42px;
font-weight: 700;
color: #003056;
margin: 10px 0 0 0;
padding: 0;
font-size: 38px;
line-height: 42px;
font-weight: 700;
color: #003056;
}
@media (max-width: 768px) {
.section-header p {
font-size: 28px;
line-height: 32px;
}
.section-header p {
font-size: 28px;
line-height: 32px;
}
}
/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
padding: 15px 0;
background: #003056;
min-height: 40px;
margin-top: 82px;
color: #fff;
padding: 15px 0;
background: #003056;
min-height: 40px;
margin-top: 82px;
color: #fff;
}
@media (max-width: 992px) {
.breadcrumbs {
margin-top: 57px;
}
.breadcrumbs {
margin-top: 57px;
}
}
.breadcrumbs h2 {
font-size: 28px;
font-weight: 500;
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;
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;
color: #fff;
transition: 0.3s;
}
.breadcrumbs ol a:hover {
text-decoration: underline;
text-decoration: underline;
}
.breadcrumbs ol li+li {
padding-left: 10px;
.breadcrumbs ol li + li {
padding-left: 10px;
}
.breadcrumbs ol li+li::before {
display: inline-block;
padding-right: 10px;
color: #8894f6;
content: "/";
.breadcrumbs ol li + li::before {
display: inline-block;
padding-right: 10px;
color: #8894f6;
content: "/";
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 99999;
background: #009cb4;
width: 40px;
height: 40px;
border-radius: 4px;
transition: all 0.4s;
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 99999;
background: #009cb4;
width: 40px;
height: 40px;
border-radius: 4px;
transition: all 0.4s;
}
.back-to-top i {
font-size: 24px;
color: #fff;
line-height: 0;
font-size: 24px;
color: #fff;
line-height: 0;
}
.back-to-top:hover {
background: #003056;
color: #fff;
background: #003056;
color: #fff;
}
.back-to-top.active {
visibility: visible;
opacity: 1;
visibility: visible;
opacity: 1;
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
[data-aos-delay] {
transition-delay: 0 !important;
}
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
transition: all 0.9s;
z-index: 997;
padding: 20px 5px;
max-height: 90px;
height: 90px;
transition: all 0.9s;
z-index: 997;
padding: 20px 5px;
max-height: 90px;
height: 90px;
}
.header.header-scrolled {
background: #fff;
padding: 5px 5px 50px 50px;
box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
letter-spacing: 2px;
max-height: 80px;
background: #fff;
padding: 5px 5px 50px 50px;
box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
letter-spacing: 2px;
max-height: 80px;
}
.header .logo {
line-height: 0;
line-height: 0;
}
.header .logo img {
max-height: 70px;
margin-right: 6px;
max-height: 70px;
margin-right: 6px;
}
.header .logo span {
font-size: 45px;
font-weight: 700;
letter-spacing: 2px;
color: #003056;
font-family: "Nunito", sans-serif;
margin-top: 3px;
font-size: 45px;
font-weight: 700;
letter-spacing: 2px;
color: #003056;
font-family: "Nunito", sans-serif;
margin-top: 3px;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
padding: 0;
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
position: relative;
}
.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 10px 30px;
font-family: "Nunito", sans-serif;
font-size: 16px;
font-weight: 700;
color: #013289;
white-space: nowrap;
transition: 0.3s;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 10px 30px;
font-family: "Nunito", sans-serif;
font-size: 16px;
font-weight: 700;
color: #013289;
white-space: nowrap;
transition: 0.3s;
}
.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #009cb4;
.navbar li:hover > a {
color: #009cb4;
}
.navbar .getstarted {
background: #009cb4;
padding: 8px 20px;
margin-left: 30px;
border-radius: 4px;
color: #fff;
background: #009cb4;
padding: 8px 20px;
margin-left: 30px;
border-radius: 4px;
color: #fff;
}
.navbar .getstarted:hover {
color: #fff;
background: #009cb4;
color: #fff;
background: #009cb4;
}
.navbar .dropdown ul {
display: block;
position: absolute;
left: 14px;
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;
border-radius: 4px;
display: block;
position: absolute;
left: 14px;
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;
border-radius: 4px;
}
.navbar .dropdown ul li {
min-width: 200px;
min-width: 200px;
}
.navbar .dropdown ul a {
padding: 10px 20px;
font-size: 15px;
text-transform: none;
font-weight: 600;
padding: 10px 20px;
font-size: 15px;
text-transform: none;
font-weight: 600;
}
.navbar .dropdown ul a i {
font-size: 12px;
font-size: 12px;
}
.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
color: #009cb4;
.navbar .dropdown ul li:hover > a {
color: #009cb4;
}
.navbar .dropdown:hover>ul {
opacity: 1;
top: 100%;
visibility: visible;
.navbar .dropdown:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.navbar .dropdown .dropdown ul {
top: 0;
left: calc(100% - 30px);
visibility: hidden;
top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
.navbar .dropdown .dropdown:hover>ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
.navbar .dropdown .dropdown:hover > ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
}
@media (max-width: 1366px) {
.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover>ul {
left: -100%;
}
.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover > ul {
left: -100%;
}
}
/**
* Mobile Navigation
*/
.mobile-nav-toggle {
color: #003056;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
color: #003056;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}
.mobile-nav-toggle.bi-x {
color: #fff;
color: #fff;
}
@media (max-width: 91px) {
.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
.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(1, 22, 61, 0.9);
transition: 0.3s;
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(1, 22, 61, 0.9);
transition: 0.3s;
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 15px;
position: absolute;
top: 15px;
right: 15px;
}
.navbar-mobile ul {
display: block;
position: absolute;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
border-radius: 10px;
background-color: #fff;
overflow-y: auto;
transition: 0.3s;
display: block;
position: absolute;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
border-radius: 10px;
background-color: #fff;
overflow-y: auto;
transition: 0.3s;
}
.navbar-mobile a {
padding: 10px 20px;
font-size: 15px;
color: #003056;
padding: 10px 20px;
font-size: 15px;
color: #003056;
}
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
color: #009cb4;
.navbar-mobile li:hover > a {
color: #009cb4;
}
.navbar-mobile .getstarted {
margin: 15px;
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);
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;
min-width: 200px;
}
.navbar-mobile .dropdown ul a {
padding: 10px 20px;
padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
font-size: 12px;
font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
color: #009cb4;
.navbar-mobile .dropdown ul li:hover > a {
color: #009cb4;
}
.navbar-mobile .dropdown>.dropdown-active {
display: block;
.navbar-mobile .dropdown > .dropdown-active {
display: block;
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
width: 100%;
height: 100vh;
background: url(../img/hero-bg.png) top center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
background: url(../img/hero-bg.png) top center no-repeat;
background-size: cover;
}
.hero h1 {
margin: 0;
font-size: 48px;
font-weight: 700;
color: #003056;
margin: 0;
font-size: 48px;
font-weight: 700;
color: #003056;
}
.hero h2 {
color: #444444;
margin: 15px 0 0 0;
font-size: 26px;
color: #444444;
margin: 15px 0 0 0;
font-size: 26px;
}
.hero .btn-get-started {
margin-top: 30px;
line-height: 0;
padding: 15px 40px;
border-radius: 4px;
transition: 0.5s;
color: #fff;
background: #009cb4;
/* box-shadow: 0px 5px 30px rgba(65, 84, 241, 0.4); */
margin-top: 30px;
line-height: 0;
padding: 15px 40px;
border-radius: 4px;
transition: 0.5s;
color: #fff;
background: #009cb4;
/* box-shadow: 0px 5px 30px rgba(65, 84, 241, 0.4); */
}
.hero .btn-get-started span {
font-family: "Nunito", sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
font-family: "Nunito", sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
}
.hero .btn-get-started i {
margin-left: 5px;
font-size: 18px;
transition: 0.3s;
margin-left: 5px;
font-size: 18px;
transition: 0.3s;
}
.hero .btn-get-started:hover i {
transform: translateX(5px);
transform: translateX(5px);
}
.hero .hero-img {
text-align: right;
text-align: right;
}
@media (min-width: 1024px) {
.hero {
background-attachment: fixed;
}
.hero {
background-attachment: fixed;
}
}
@media (max-width: 991px) {
.hero {
height: auto;
padding: 120px 0 60px 0;
}
.hero .hero-img {
text-align: center;
margin-top: 80px;
}
.hero .hero-img img {
width: 80%;
}
.hero {
height: auto;
padding: 120px 0 60px 0;
}
.hero .hero-img {
text-align: center;
margin-top: 80px;
}
.hero .hero-img img {
width: 80%;
}
}
@media (max-width: 768px) {
.hero {
text-align: center;
}
.hero h1 {
font-size: 32px;
}
.hero h2 {
font-size: 24px;
}
.hero .hero-img img {
width: 100%;
}
.hero {
text-align: center;
}
.hero h1 {
font-size: 32px;
}
.hero h2 {
font-size: 24px;
}
.hero .hero-img img {
width: 100%;
}
}
/*--------------------------------------------------------------
# Index Page
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about .content {
background-color: #f6f9ff;
padding: 40px;
background-color: #f6f9ff;
padding: 40px;
}
.about h3 {
font-size: 14px;
font-weight: 700;
color: #009cb4;
text-transform: uppercase;
font-size: 14px;
font-weight: 700;
color: #009cb4;
text-transform: uppercase;
}
.about h2 {
font-size: 24px;
font-weight: 700;
color: #003056;
font-size: 24px;
font-weight: 700;
color: #003056;
}
.about p {
margin: 15px 0 30px 0;
line-height: 24px;
margin: 15px 0 30px 0;
line-height: 24px;
}
.about .btn-read-more {
line-height: 0;
padding: 15px 40px;
border-radius: 4px;
transition: 0.5s;
color: #fff;
background: #009cb4;
/* box-shadow: 0px 5px 25px rgba(65, 84, 241, 0.3); */
line-height: 0;
padding: 15px 40px;
border-radius: 4px;
transition: 0.5s;
color: #fff;
background: #009cb4;
/* box-shadow: 0px 5px 25px rgba(65, 84, 241, 0.3); */
}
.about .btn-read-more span {
font-family: "Nunito", sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
font-family: "Nunito", sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
}
.about .btn-read-more i {
margin-left: 5px;
font-size: 18px;
transition: 0.3s;
margin-left: 5px;
font-size: 18px;
transition: 0.3s;
}
.about .btn-read-more:hover i {
transform: translateX(5px);
transform: translateX(5px);
}
/*--------------------------------------------------------------
# Values
--------------------------------------------------------------*/
.values .box {
padding: 30px;
box-shadow: 0px 0 5px rgba(1, 41, 112, 0.08);
text-align: center;
transition: 0.3s;
height: 100%;
padding: 30px;
box-shadow: 0px 0 5px rgba(1, 41, 112, 0.08);
text-align: center;
transition: 0.3s;
height: 100%;
}
.values .box img {
padding: 30px 50px;
transition: 0.5s;
transform: scale(1.1);
padding: 30px 50px;
transition: 0.5s;
transform: scale(1.1);
}
.values .box h3 {
font-size: 24px;
color: #003056;
font-weight: 700;
margin-bottom: 18px;
font-size: 24px;
color: #003056;
font-weight: 700;
margin-bottom: 18px;
}
.values .box:hover {
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
}
.values .box:hover img {
transform: scale(1);
transform: scale(1);
}
/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/
.counts {
padding: 70px 0 60px;
padding: 70px 0 60px;
}
.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);
display: flex;
align-items: center;
padding: 30px;
width: 100%;
background: #fff;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
}
.counts .count-box i {
font-size: 42px;
line-height: 0;
margin-right: 20px;
color: #009cb4;
font-size: 42px;
line-height: 0;
margin-right: 20px;
color: #009cb4;
}
.counts .count-box span {
font-size: 36px;
display: block;
font-weight: 600;
color: #0b198f;
font-size: 36px;
display: block;
font-weight: 600;
color: #0b198f;
}
.counts .count-box p {
padding: 0;
margin: 0;
font-family: "Nunito", sans-serif;
font-size: 14px;
padding: 0;
margin: 0;
font-family: "Nunito", sans-serif;
font-size: 14px;
}
/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
.features .feature-box {
padding: 24px 20px;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
transition: 0.3s;
height: 100%;
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: #003056;
font-weight: 700;
margin: 0;
font-size: 18px;
color: #003056;
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;
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: #009cb4;
color: #fff;
background: #009cb4;
color: #fff;
}
.features .feture-tabs {
margin-top: 120px;
margin-top: 120px;
}
.features .feture-tabs h3 {
color: #003056;
font-weight: 700;
font-size: 32px;
margin-bottom: 10px;
color: #003056;
font-weight: 700;
font-size: 32px;
margin-bottom: 10px;
}
@media (max-width: 768px) {
.features .feture-tabs h3 {
font-size: 28px;
}
.features .feture-tabs h3 {
font-size: 28px;
}
}
.features .feture-tabs .nav-pills {
border-bottom: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.features .feture-tabs .nav-link {
background: none;
text-transform: uppercase;
font-size: 15px;
font-weight: 600;
color: #003056;
padding: 12px 0;
margin-right: 25px;
margin-bottom: -2px;
border-radius: 0;
background: none;
text-transform: uppercase;
font-size: 15px;
font-weight: 600;
color: #003056;
padding: 12px 0;
margin-right: 25px;
margin-bottom: -2px;
border-radius: 0;
}
.features .feture-tabs .nav-link.active {
color: #009cb4;
border-bottom: 3px solid #009cb4;
color: #009cb4;
border-bottom: 3px solid #009cb4;
}
.features .feture-tabs .tab-content h4 {
font-size: 18px;
margin: 0;
font-weight: 700;
color: #003056;
font-size: 18px;
margin: 0;
font-weight: 700;
color: #003056;
}
.features .feture-tabs .tab-content i {
font-size: 24px;
line-height: 0;
margin-right: 8px;
color: #009cb4;
font-size: 24px;
line-height: 0;
margin-right: 8px;
color: #009cb4;
}
.features .feature-icons {
margin-top: 120px;
margin-top: 120px;
}
.features .feature-icons h3 {
color: #003056;
font-weight: 700;
font-size: 32px;
margin-bottom: 20px;
text-align: center;
color: #003056;
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 h3 {
font-size: 28px;
}
}
.features .feature-icons .content .icon-box {
display: flex;
display: flex;
}
.features .feature-icons .content .icon-box h4 {
font-size: 20px;
font-weight: 700;
margin: 0 0 10px 0;
color: #003056;
font-size: 20px;
font-weight: 700;
margin: 0 0 10px 0;
color: #003056;
}
.features .feature-icons .content .icon-box i {
font-size: 44px;
line-height: 44px;
color: #0245bc;
margin-right: 15px;
font-size: 44px;
line-height: 44px;
color: #0245bc;
margin-right: 15px;
}
.features .feature-icons .content .icon-box p {
font-size: 15px;
color: #848484;
font-size: 15px;
color: #848484;
}
/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .service-box {
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
height: 100%;
padding: 60px 30px;
text-align: center;
transition: 0.3s;
border-radius: 5px;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
height: 100%;
padding: 60px 30px;
text-align: center;
transition: 0.3s;
border-radius: 5px;
}
.services .service-box .icon {
font-size: 36px;
padding: 40px 20px;
border-radius: 4px;
position: relative;
margin-bottom: 25px;
display: inline-block;
line-height: 0;
transition: 0.3s;
font-size: 36px;
padding: 40px 20px;
border-radius: 4px;
position: relative;
margin-bottom: 25px;
display: inline-block;
line-height: 0;
transition: 0.3s;
}
.services .service-box h3 {
color: #444444;
font-weight: 700;
color: #444444;
font-weight: 700;
}
.services .service-box .read-more {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 16px;
padding: 8px 20px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 16px;
padding: 8px 20px;
}
.services .service-box .read-more i {
line-height: 0;
margin-left: 5px;
font-size: 18px;
line-height: 0;
margin-left: 5px;
font-size: 18px;
}
.services .service-box.blue {
border-bottom: 3px solid #2db6fa;
border-bottom: 3px solid #2db6fa;
}
.services .service-box.blue .icon {
color: #2db6fa;
background: #dbf3fe;
color: #2db6fa;
background: #dbf3fe;
}
.services .service-box.blue .read-more {
color: #2db6fa;
color: #2db6fa;
}
.services .service-box.blue:hover {
background: #2db6fa;
background: #2db6fa;
}
.services .service-box.orange {
border-bottom: 3px solid #f68c09;
border-bottom: 3px solid #f68c09;
}
.services .service-box.orange .icon {
color: #f68c09;
background: #fde3c4;
color: #f68c09;
background: #fde3c4;
}
.services .service-box.orange .read-more {
color: #f68c09;
color: #f68c09;
}
.services .service-box.orange:hover {
background: #f68c09;
background: #f68c09;
}
.services .service-box.green {
border-bottom: 3px solid #08da4e;
border-bottom: 3px solid #08da4e;
}
.services .service-box.green .icon {
color: #08da4e;
background: #cffddf;
color: #08da4e;
background: #cffddf;
}
.services .service-box.green .read-more {
color: #08da4e;
color: #08da4e;
}
.services .service-box.green:hover {
background: #08da4e;
background: #08da4e;
}
.services .service-box.red {
border-bottom: 3px solid #e9222c;
border-bottom: 3px solid #e9222c;
}
.services .service-box.red .icon {
color: #e9222c;
background: #fef7f8;
color: #e9222c;
background: #fef7f8;
}
.services .service-box.red .read-more {
color: #e9222c;
color: #e9222c;
}
.services .service-box.red:hover {
background: #e9222c;
background: #e9222c;
}
.services .service-box.purple {
border-bottom: 3px solid #b50edf;
border-bottom: 3px solid #b50edf;
}
.services .service-box.purple .icon {
color: #b50edf;
background: #f8e4fd;
color: #b50edf;
background: #f8e4fd;
}
.services .service-box.purple .read-more {
color: #b50edf;
color: #b50edf;
}
.services .service-box.purple:hover {
background: #b50edf;
background: #b50edf;
}
.services .service-box.pink {
border-bottom: 3px solid #f51f9c;
border-bottom: 3px solid #f51f9c;
}
.services .service-box.pink .icon {
color: #f51f9c;
background: #feecf7;
color: #f51f9c;
background: #feecf7;
}
.services .service-box.pink .read-more {
color: #f51f9c;
color: #f51f9c;
}
.services .service-box.pink:hover {
background: #f51f9c;
background: #f51f9c;
}
.services .service-box:hover h3,
.services .service-box:hover p,
.services .service-box:hover .read-more {
color: #fff;
color: #fff;
}
.services .service-box:hover .icon {
background: #fff;
background: #fff;
}
/*--------------------------------------------------------------
# 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;
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);
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;
font-weight: 700;
font-size: 18px;
margin-bottom: 15px;
}
.pricing .price {
font-size: 36px;
color: #444444;
font-weight: 600;
font-family: "Poppins", sans-serif;
font-size: 36px;
color: #444444;
font-weight: 600;
font-family: "Poppins", sans-serif;
}
.pricing .price sup {
font-size: 20px;
top: -15px;
left: -3px;
font-size: 20px;
top: -15px;
left: -3px;
}
.pricing .price span {
color: #bababa;
font-size: 16px;
font-weight: 300;
color: #bababa;
font-size: 16px;
font-weight: 300;
}
.pricing img {
padding: 30px 40px;
padding: 30px 40px;
}
.pricing ul {
padding: 0;
list-style: none;
color: #444444;
text-align: center;
line-height: 26px;
font-size: 16px;
margin-bottom: 25px;
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;
padding-bottom: 10px;
}
.pricing ul .na {
color: #ccc;
text-decoration: line-through;
color: #ccc;
text-decoration: line-through;
}
.pricing .btn-buy {
display: inline-block;
padding: 8px 40px 10px 40px;
border-radius: 50px;
color: #009cb4;
transition: none;
font-size: 16px;
font-weight: 400;
font-family: "Nunito", sans-serif;
font-weight: 600;
transition: 0.3s;
border: 1px solid #009cb4;
display: inline-block;
padding: 8px 40px 10px 40px;
border-radius: 50px;
color: #009cb4;
transition: none;
font-size: 16px;
font-weight: 400;
font-family: "Nunito", sans-serif;
font-weight: 600;
transition: 0.3s;
border: 1px solid #009cb4;
}
.pricing .btn-buy:hover {
background: #009cb4;
color: #fff;
background: #009cb4;
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: #009cb4;
color: #fff;
width: 200px;
position: absolute;
top: 18px;
right: -68px;
transform: rotate(45deg);
z-index: 1;
font-size: 14px;
padding: 1px 0 3px 0;
background: #009cb4;
color: #fff;
}
/*--------------------------------------------------------------
# F.A.Q
--------------------------------------------------------------*/
.faq .accordion-collapse {
border: 0;
border: 0;
}
.faq .accordion-button {
padding: 15px 15px 20px 0;
font-weight: 600;
border: 0;
font-size: 18px;
color: #444444;
text-align: left;
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;
box-shadow: none;
}
.faq .accordion-button:not(.collapsed) {
background: none;
color: #009cb4;
border-bottom: 0;
background: none;
color: #009cb4;
border-bottom: 0;
}
.faq .accordion-body {
padding: 0 0 25px 0;
border: 0;
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;
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;
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: #009cb4;
border-color: #009cb4;
color: #009cb4;
border-color: #009cb4;
}
.portfolio #portfolio-flters li:last-child {
margin-right: 0;
margin-right: 0;
}
.portfolio .portfolio-wrap {
transition: 0.3s;
position: relative;
overflow: hidden;
z-index: 1;
background: rgba(255, 255, 255, 0.75);
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;
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;
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;
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;
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;
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: #003056;
font-weight: 700;
font-size: 20px;
color: #003056;
font-weight: 700;
}
.portfolio .portfolio-wrap .portfolio-info p {
color: #003056;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
padding: 0;
margin: 0;
color: #003056;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
padding: 0;
margin: 0;
}
.portfolio .portfolio-wrap .portfolio-links {
text-align: center;
z-index: 4;
text-align: center;
z-index: 4;
}
.portfolio .portfolio-wrap .portfolio-links a {
color: #fff;
background: #009cb4;
margin: 10px 2px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: 0.3s;
color: #fff;
background: #009cb4;
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;
font-size: 24px;
line-height: 0;
}
.portfolio .portfolio-wrap .portfolio-links a:hover {
background: #5969f3;
background: #5969f3;
}
.portfolio .portfolio-wrap:hover img {
transform: scale(1.1);
transform: scale(1.1);
}
.portfolio .portfolio-wrap:hover::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
}
.portfolio .portfolio-wrap:hover .portfolio-info {
opacity: 1;
opacity: 1;
}
.portfolio .portfolio-wrap:hover .portfolio-info::before {
top: 15px;
left: 15px;
top: 15px;
left: 15px;
}
.portfolio .portfolio-wrap:hover .portfolio-info::after {
bottom: 15px;
right: 15px;
bottom: 15px;
right: 15px;
}
/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
padding-top: 40px;
padding-top: 40px;
}
.portfolio-details .portfolio-details-slider img {
width: 100%;
width: 100%;
}
.portfolio-details .portfolio-details-slider .swiper-pagination {
margin-top: 20px;
position: relative;
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 #009cb4;
.portfolio-details
.portfolio-details-slider
.swiper-pagination
.swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
border: 1px solid #009cb4;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
background-color: #009cb4;
.portfolio-details
.portfolio-details-slider
.swiper-pagination
.swiper-pagination-bullet-active {
background-color: #009cb4;
}
.portfolio-details .portfolio-info {
padding: 30px;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
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;
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;
list-style: none;
padding: 0;
font-size: 15px;
}
.portfolio-details .portfolio-info ul li+li {
margin-top: 10px;
.portfolio-details .portfolio-info ul li + li {
margin-top: 10px;
}
.portfolio-details .portfolio-description {
padding-top: 30px;
padding-top: 30px;
}
.portfolio-details .portfolio-description h2 {
font-size: 26px;
font-weight: 700;
margin-bottom: 20px;
font-size: 26px;
font-weight: 700;
margin-bottom: 20px;
}
.portfolio-details .portfolio-description p {
padding: 0;
padding: 0;
}
/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials .testimonial-item {
box-sizing: content-box;
padding: 30px;
margin: 40px 30px;
box-shadow: 0px 0 20px rgba(1, 41, 112, 0.1);
background: #fff;
min-height: 320px;
display: flex;
flex-direction: column;
text-align: center;
transition: 0.3s;
box-sizing: content-box;
padding: 30px;
margin: 40px 30px;
box-shadow: 0px 0 20px rgba(1, 41, 112, 0.1);
background: #fff;
min-height: 320px;
display: flex;
flex-direction: column;
text-align: center;
transition: 0.3s;
}
.testimonials .testimonial-item .stars {
margin-bottom: 15px;
margin-bottom: 15px;
}
.testimonials .testimonial-item .stars i {
color: #ffc107;
margin: 0 1px;
color: #ffc107;
margin: 0 1px;
}
.testimonials .testimonial-item .testimonial-img {
width: 90px;
border-radius: 50%;
border: 4px solid #fff;
margin: 0 auto;
width: 90px;
border-radius: 50%;
border: 4px solid #fff;
margin: 0 auto;
}
.testimonials .testimonial-item h3 {
font-size: 18px;
font-weight: bold;
margin: 10px 0 5px 0;
color: #111;
font-size: 18px;
font-weight: bold;
margin: 10px 0 5px 0;
color: #111;
}
.testimonials .testimonial-item h4 {
font-size: 14px;
color: #999;
margin: 0;
font-size: 14px;
color: #999;
margin: 0;
}
.testimonials .testimonial-item p {
font-style: italic;
margin: 0 auto 15px auto;
font-style: italic;
margin: 0 auto 15px auto;
}
.testimonials .swiper-pagination {
margin-top: 20px;
position: relative;
margin-top: 20px;
position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
border: 1px solid #009cb4;
width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
border: 1px solid #009cb4;
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
background-color: #009cb4;
background-color: #009cb4;
}
.testimonials .swiper-slide {
opacity: .3;
opacity: 0.3;
}
@media (max-width: 1199px) {
.testimonials .swiper-slide-active {
opacity: 1;
}
.testimonials .swiper-pagination {
margin-top: 0;
}
.testimonials .swiper-slide-active {
opacity: 1;
}
.testimonials .swiper-pagination {
margin-top: 0;
}
}
@media (min-width: 1200px) {
.testimonials .swiper-slide-next {
opacity: 1;
transform: scale(1.12);
}
.testimonials .swiper-slide-next {
opacity: 1;
transform: scale(1.12);
}
}
/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team {
background: #fff;
padding: 60px 0;
background: #fff;
padding: 60px 0;
}
.team .member {
overflow: hidden;
text-align: center;
border-radius: 5px;
background: #fff;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
transition: 0.3s;
overflow: hidden;
text-align: center;
border-radius: 5px;
background: #fff;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
transition: 0.3s;
}
.team .member .member-img {
position: relative;
overflow: hidden;
position: relative;
overflow: hidden;
}
.team .member .member-img:after {
position: absolute;
content: "";
left: 0;
bottom: 0;
height: 100%;
width: 100%;
background: url(../img/team-shape.svg) no-repeat center bottom;
background-size: contain;
z-index: 1;
position: absolute;
content: "";
left: 0;
bottom: 0;
height: 100%;
width: 100%;
background: url(../img/team-shape.svg) no-repeat center bottom;
background-size: contain;
z-index: 1;
}
.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;
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;
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);
color: rgba(1, 41, 112, 0.8);
}
.team .member .social i {
font-size: 18px;
font-size: 18px;
}
.team .member .member-info {
padding: 10px 15px 20px 15px;
padding: 10px 15px 20px 15px;
}
.team .member .member-info h4 {
font-weight: 700;
margin-bottom: 5px;
font-size: 20px;
color: #003056;
font-weight: 700;
margin-bottom: 5px;
font-size: 20px;
color: #003056;
}
.team .member .member-info span {
display: block;
font-size: 14px;
font-weight: 400;
color: #aaaaaa;
display: block;
font-size: 14px;
font-weight: 400;
color: #aaaaaa;
}
.team .member .member-info p {
font-style: italic;
font-size: 14px;
padding-top: 15px;
line-height: 26px;
color: #5e5e5e;
font-style: italic;
font-size: 14px;
padding-top: 15px;
line-height: 26px;
color: #5e5e5e;
}
.team .member:hover {
transform: scale(1.08);
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
transform: scale(1.08);
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
}
.team .member:hover .social {
right: 8px;
opacity: 1;
right: 8px;
opacity: 1;
}
/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
.clients .clients-slider .swiper-slide img {
opacity: 0.5;
transition: 0.3s;
opacity: 0.5;
transition: 0.3s;
}
.clients .clients-slider .swiper-slide img:hover {
opacity: 1;
opacity: 1;
}
.clients .clients-slider .swiper-pagination {
margin-top: 20px;
position: relative;
margin-top: 20px;
position: relative;
}
.clients .clients-slider .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
border: 1px solid #009cb4;
width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
border: 1px solid #009cb4;
}
.clients .clients-slider .swiper-pagination .swiper-pagination-bullet-active {
background-color: #009cb4;
background-color: #009cb4;
}
/*--------------------------------------------------------------
# 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;
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;
overflow: hidden;
margin: -30px -30px 15px -30px;
position: relative;
}
.recent-blog-posts .post-box .post-img img {
transition: 0.5s;
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;
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: #003056;
font-weight: 700;
margin-bottom: 18px;
position: relative;
transition: 0.3s;
font-size: 24px;
color: #003056;
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;
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;
line-height: 0;
margin-left: 4px;
font-size: 18px;
}
.recent-blog-posts .post-box:hover .post-title {
color: #009cb4;
color: #009cb4;
}
.recent-blog-posts .post-box:hover .post-img img {
transform: rotate(6deg) scale(1.2);
transform: rotate(6deg) scale(1.2);
}
/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
color: #444444;
background: #fafbff;
padding: 30px;
color: #444444;
background: #fafbff;
padding: 30px;
}
.contact .info-box i {
font-size: 38px;
line-height: 0;
color: #009cb4;
font-size: 38px;
line-height: 0;
color: #009cb4;
}
.contact .info-box h3 {
font-size: 20px;
color: #003056;
font-weight: 700;
margin: 20px 0 10px 0;
font-size: 20px;
color: #003056;
font-weight: 700;
margin: 20px 0 10px 0;
}
.contact .info-box p {
padding: 0;
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
padding: 0;
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
}
.contact .php-email-form {
background: #fafbff;
padding: 30px;
height: 100%;
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;
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;
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;
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;
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;
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: #009cb4;
border-color: #009cb4;
}
.contact .php-email-form input {
padding: 10px 15px;
padding: 10px 15px;
}
.contact .php-email-form textarea {
padding: 12px 15px;
padding: 12px 15px;
}
.contact .php-email-form button[type="submit"] {
background: #009cb4;
border: 0;
padding: 10px 30px;
color: #fff;
transition: 0.4s;
border-radius: 4px;
background: #009cb4;
border: 0;
padding: 10px 30px;
color: #fff;
transition: 0.4s;
border-radius: 4px;
}
.contact .php-email-form button[type="submit"]:hover {
background: #5969f3;
background: #5969f3;
}
@-webkit-keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.blog {
padding: 40px 0 20px 0;
padding: 40px 0 20px 0;
}
.blog .entry {
padding: 30px;
margin-bottom: 60px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
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;
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;
font-size: 28px;
font-weight: bold;
padding: 0;
margin: 0 0 20px 0;
}
.blog .entry .entry-title a {
color: #003056;
transition: 0.3s;
color: #003056;
transition: 0.3s;
}
.blog .entry .entry-title a:hover {
color: #009cb4;
color: #009cb4;
}
.blog .entry .entry-meta {
margin-bottom: 15px;
color: #4084fd;
margin-bottom: 15px;
color: #4084fd;
}
.blog .entry .entry-meta ul {
display: flex;
flex-wrap: wrap;
list-style: none;
align-items: center;
padding: 0;
margin: 0;
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 ul li + li {
padding-left: 20px;
}
.blog .entry .entry-meta i {
font-size: 16px;
margin-right: 8px;
line-height: 0;
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;
color: #777777;
font-size: 14px;
display: inline-block;
line-height: 1;
}
.blog .entry .entry-content p {
line-height: 24px;
line-height: 24px;
}
.blog .entry .entry-content .read-more {
-moz-text-align-last: right;
text-align-last: right;
-moz-text-align-last: right;
text-align-last: right;
}
.blog .entry .entry-content .read-more a {
display: inline-block;
background: #009cb4;
color: #fff;
padding: 6px 20px;
transition: 0.3s;
font-size: 14px;
border-radius: 4px;
display: inline-block;
background: #009cb4;
color: #fff;
padding: 6px 20px;
transition: 0.3s;
font-size: 14px;
border-radius: 4px;
}
.blog .entry .entry-content .read-more a:hover {
background: #5969f3;
background: #5969f3;
}
.blog .entry .entry-content h3 {
font-size: 22px;
margin-top: 30px;
font-weight: bold;
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;
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;
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: #003056;
margin-top: 20px;
margin-bottom: 20px;
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: #003056;
margin-top: 20px;
margin-bottom: 20px;
}
.blog .entry .entry-footer {
padding-top: 10px;
border-top: 1px solid #e6e6e6;
padding-top: 10px;
border-top: 1px solid #e6e6e6;
}
.blog .entry .entry-footer i {
color: #0d64fd;
display: inline;
color: #0d64fd;
display: inline;
}
.blog .entry .entry-footer a {
color: #013289;
transition: 0.3s;
color: #013289;
transition: 0.3s;
}
.blog .entry .entry-footer a:hover {
color: #009cb4;
color: #009cb4;
}
.blog .entry .entry-footer .cats {
list-style: none;
display: inline;
padding: 0 20px 0 0;
font-size: 14px;
list-style: none;
display: inline;
padding: 0 20px 0 0;
font-size: 14px;
}
.blog .entry .entry-footer .cats li {
display: inline-block;
display: inline-block;
}
.blog .entry .entry-footer .tags {
list-style: none;
display: inline;
padding: 0;
font-size: 14px;
list-style: none;
display: inline;
padding: 0;
font-size: 14px;
}
.blog .entry .entry-footer .tags li {
display: inline-block;
display: inline-block;
}
.blog .entry .entry-footer .tags li+li::before {
padding-right: 6px;
color: #6c757d;
content: ",";
.blog .entry .entry-footer .tags li + li::before {
padding-right: 6px;
color: #6c757d;
content: ",";
}
.blog .entry .entry-footer .share {
font-size: 16px;
font-size: 16px;
}
.blog .entry .entry-footer .share i {
padding-left: 5px;
padding-left: 5px;
}
.blog .entry-single {
margin-bottom: 30px;
margin-bottom: 30px;
}
.blog .blog-author {
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
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;
width: 120px;
margin-right: 20px;
}
.blog .blog-author h4 {
font-weight: 600;
font-size: 22px;
margin-bottom: 0px;
padding: 0;
color: #003056;
font-weight: 600;
font-size: 22px;
margin-bottom: 0px;
padding: 0;
color: #003056;
}
.blog .blog-author .social-links {
margin: 0 10px 10px 0;
margin: 0 10px 10px 0;
}
.blog .blog-author .social-links a {
color: rgba(1, 41, 112, 0.5);
margin-right: 5px;
color: rgba(1, 41, 112, 0.5);
margin-right: 5px;
}
.blog .blog-author p {
font-style: italic;
color: #b7b7b7;
font-style: italic;
color: #b7b7b7;
}
.blog .blog-comments {
margin-bottom: 30px;
margin-bottom: 30px;
}
.blog .blog-comments .comments-count {
font-weight: bold;
font-weight: bold;
}
.blog .blog-comments .comment {
margin-top: 30px;
position: relative;
margin-top: 30px;
position: relative;
}
.blog .blog-comments .comment .comment-img {
margin-right: 14px;
margin-right: 14px;
}
.blog .blog-comments .comment .comment-img img {
width: 60px;
width: 60px;
}
.blog .blog-comments .comment h5 {
font-size: 16px;
margin-bottom: 2px;
font-size: 16px;
margin-bottom: 2px;
}
.blog .blog-comments .comment h5 a {
font-weight: bold;
color: #444444;
transition: 0.3s;
font-weight: bold;
color: #444444;
transition: 0.3s;
}
.blog .blog-comments .comment h5 a:hover {
color: #009cb4;
color: #009cb4;
}
.blog .blog-comments .comment h5 .reply {
padding-left: 10px;
color: #003056;
padding-left: 10px;
color: #003056;
}
.blog .blog-comments .comment h5 .reply i {
font-size: 20px;
font-size: 20px;
}
.blog .blog-comments .comment time {
display: block;
font-size: 14px;
color: #013ca3;
margin-bottom: 5px;
display: block;
font-size: 14px;
color: #013ca3;
margin-bottom: 5px;
}
.blog .blog-comments .comment.comment-reply {
padding-left: 40px;
padding-left: 40px;
}
.blog .blog-comments .reply-form {
margin-top: 30px;
padding: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
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;
font-weight: bold;
font-size: 22px;
}
.blog .blog-comments .reply-form p {
font-size: 14px;
font-size: 14px;
}
.blog .blog-comments .reply-form input {
border-radius: 4px;
padding: 10px 10px;
font-size: 14px;
border-radius: 4px;
padding: 10px 10px;
font-size: 14px;
}
.blog .blog-comments .reply-form input:focus {
box-shadow: none;
border-color: #a0aaf8;
box-shadow: none;
border-color: #a0aaf8;
}
.blog .blog-comments .reply-form textarea {
border-radius: 4px;
padding: 10px 10px;
font-size: 14px;
border-radius: 4px;
padding: 10px 10px;
font-size: 14px;
}
.blog .blog-comments .reply-form textarea:focus {
box-shadow: none;
border-color: #a0aaf8;
box-shadow: none;
border-color: #a0aaf8;
}
.blog .blog-comments .reply-form .form-group {
margin-bottom: 25px;
margin-bottom: 25px;
}
.blog .blog-comments .reply-form .btn-primary {
border-radius: 4px;
padding: 10px 20px;
border: 0;
background-color: #003056;
border-radius: 4px;
padding: 10px 20px;
border: 0;
background-color: #003056;
}
.blog .blog-comments .reply-form .btn-primary:hover {
background-color: #013289;
background-color: #013289;
}
.blog .blog-pagination {
color: #024ed5;
color: #024ed5;
}
.blog .blog-pagination ul {
display: flex;
padding: 0;
margin: 0;
list-style: none;
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
.blog .blog-pagination li {
margin: 0 5px;
transition: 0.3s;
margin: 0 5px;
transition: 0.3s;
}
.blog .blog-pagination li a {
color: #003056;
padding: 7px 16px;
display: flex;
align-items: center;
justify-content: center;
color: #003056;
padding: 7px 16px;
display: flex;
align-items: center;
justify-content: center;
}
.blog .blog-pagination li.active,
.blog .blog-pagination li:hover {
background: #009cb4;
background: #009cb4;
}
.blog .blog-pagination li.active a,
.blog .blog-pagination li:hover a {
color: #fff;
color: #fff;
}
.blog .sidebar {
padding: 30px;
margin: 0 0 60px 20px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
padding: 30px;
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: #003056;
position: relative;
font-size: 20px;
font-weight: 700;
padding: 0 0 0 0;
margin: 0 0 15px 0;
color: #003056;
position: relative;
}
.blog .sidebar .sidebar-item {
margin-bottom: 30px;
margin-bottom: 30px;
}
.blog .sidebar .search-form form {
background: #fff;
border: 1px solid #ddd;
padding: 3px 10px;
position: relative;
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);
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: #009cb4;
color: #fff;
transition: 0.3s;
border-radius: 0 4px 4px 0;
line-height: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
border: 0;
background: none;
font-size: 16px;
padding: 0 15px;
margin: -1px;
background: #009cb4;
color: #fff;
transition: 0.3s;
border-radius: 0 4px 4px 0;
line-height: 0;
}
.blog .sidebar .search-form form button i {
line-height: 0;
line-height: 0;
}
.blog .sidebar .search-form form button:hover {
background: #5465f2;
background: #5465f2;
}
.blog .sidebar .categories ul {
list-style: none;
padding: 0;
list-style: none;
padding: 0;
}
.blog .sidebar .categories ul li+li {
padding-top: 10px;
.blog .sidebar .categories ul li + li {
padding-top: 10px;
}
.blog .sidebar .categories ul a {
color: #003056;
transition: 0.3s;
color: #003056;
transition: 0.3s;
}
.blog .sidebar .categories ul a:hover {
color: #009cb4;
color: #009cb4;
}
.blog .sidebar .categories ul a span {
padding-left: 5px;
color: #aaaaaa;
font-size: 14px;
padding-left: 5px;
color: #aaaaaa;
font-size: 14px;
}
.blog .sidebar .recent-posts .post-item+.post-item {
margin-top: 15px;
.blog .sidebar .recent-posts .post-item + .post-item {
margin-top: 15px;
}
.blog .sidebar .recent-posts img {
width: 80px;
float: left;
width: 80px;
float: left;
}
.blog .sidebar .recent-posts h4 {
font-size: 15px;
margin-left: 95px;
font-weight: bold;
font-size: 15px;
margin-left: 95px;
font-weight: bold;
}
.blog .sidebar .recent-posts h4 a {
color: #003056;
transition: 0.3s;
color: #003056;
transition: 0.3s;
}
.blog .sidebar .recent-posts h4 a:hover {
color: #009cb4;
color: #009cb4;
}
.blog .sidebar .recent-posts time {
display: block;
margin-left: 95px;
font-style: italic;
font-size: 14px;
color: #aaaaaa;
display: block;
margin-left: 95px;
font-style: italic;
font-size: 14px;
color: #aaaaaa;
}
.blog .sidebar .tags {
margin-bottom: -10px;
margin-bottom: -10px;
}
.blog .sidebar .tags ul {
list-style: none;
padding: 0;
list-style: none;
padding: 0;
}
.blog .sidebar .tags ul li {
display: inline-block;
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;
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 #009cb4;
background: #009cb4;
color: #fff;
border: 1px solid #009cb4;
background: #009cb4;
}
.blog .sidebar .tags ul a span {
padding-left: 5px;
color: #a5c5fe;
font-size: 14px;
padding-left: 5px;
color: #a5c5fe;
font-size: 14px;
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
background: #f6f9ff;
padding: 0 0 30px 0;
font-size: 14px;
background: #f6f9ff;
padding: 0 0 30px 0;
font-size: 14px;
}
.footer .footer-newsletter {
padding: 50px 0;
background: #f6f9ff;
border-top: 1px solid #e1ecff;
padding: 50px 0;
background: #f6f9ff;
border-top: 1px solid #e1ecff;
}
.footer .footer-newsletter h4 {
font-size: 24px;
margin: 0 0 10px 0;
padding: 0;
line-height: 1;
font-weight: 700;
color: #003056;
font-size: 24px;
margin: 0 0 10px 0;
padding: 0;
line-height: 1;
font-weight: 700;
color: #003056;
}
.footer .footer-newsletter form {
margin-top: 20px;
background: #fff;
padding: 6px 10px;
position: relative;
border-radius: 4px;
border: 1px solid #e1ecff;
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);
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: #009cb4;
color: #fff;
transition: 0.3s;
border-radius: 4px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
border: 0;
background: none;
font-size: 16px;
padding: 0 30px;
margin: 3px;
background: #009cb4;
color: #fff;
transition: 0.3s;
border-radius: 4px;
}
.footer .footer-newsletter form input[type="submit"]:hover {
background: #5969f3;
background: #5969f3;
}
.footer .footer-top {
background: white url(../img/footer-bg.png) no-repeat right top;
background-size: contain;
border-top: 1px solid #e1ecff;
border-bottom: 1px solid #e1ecff;
padding: 60px 0 30px 0;
background: white url(../img/footer-bg.png) no-repeat right top;
background-size: contain;
border-top: 1px solid #e1ecff;
border-bottom: 1px solid #e1ecff;
padding: 60px 0 30px 0;
}
@media (max-width: 992px) {
.footer .footer-top {
background-position: center bottom;
}
.footer .footer-top {
background-position: center bottom;
}
}
.footer .footer-top .footer-info {
margin-bottom: 30px;
margin-bottom: 30px;
}
.footer .footer-top .footer-info .logo {
line-height: 0;
margin-bottom: 15px;
line-height: 0;
margin-bottom: 15px;
}
.footer .footer-top .footer-info .logo img {
max-height: 40px;
margin-right: 6px;
max-height: 40px;
margin-right: 6px;
}
.footer .footer-top .footer-info .logo span {
font-size: 30px;
font-weight: 700;
letter-spacing: 1px;
color: #003056;
font-family: "Nunito", sans-serif;
margin-top: 3px;
font-size: 30px;
font-weight: 700;
letter-spacing: 1px;
color: #003056;
font-family: "Nunito", sans-serif;
margin-top: 3px;
}
.footer .footer-top .footer-info p {
font-size: 14px;
line-height: 24px;
margin-bottom: 0;
font-family: "Nunito", sans-serif;
font-size: 14px;
line-height: 24px;
margin-bottom: 0;
font-family: "Nunito", sans-serif;
}
.footer .footer-top .social-links a {
font-size: 20px;
display: inline-block;
color: rgba(1, 41, 112, 0.5);
line-height: 0;
margin-right: 10px;
transition: 0.3s;
font-size: 20px;
display: inline-block;
color: rgba(1, 41, 112, 0.5);
line-height: 0;
margin-right: 10px;
transition: 0.3s;
}
.footer .footer-top .social-links a:hover {
color: #003056;
color: #003056;
}
.footer .footer-top h4 {
font-size: 16px;
font-weight: bold;
color: #003056;
text-transform: uppercase;
position: relative;
padding-bottom: 12px;
font-size: 16px;
font-weight: bold;
color: #003056;
text-transform: uppercase;
position: relative;
padding-bottom: 12px;
}
.footer .footer-top .footer-links {
margin-bottom: 30px;
margin-bottom: 30px;
}
.footer .footer-top .footer-links ul {
list-style: none;
padding: 0;
margin: 0;
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;
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;
padding: 10px 0;
display: flex;
align-items: center;
}
.footer .footer-top .footer-links ul li:first-child {
padding-top: 0;
padding-top: 0;
}
.footer .footer-top .footer-links ul a {
color: #013289;
transition: 0.3s;
display: inline-block;
line-height: 1;
color: #013289;
transition: 0.3s;
display: inline-block;
line-height: 1;
}
.footer .footer-top .footer-links ul a:hover {
color: #009cb4;
color: #009cb4;
}
.footer .footer-top .footer-contact p {
line-height: 26px;
line-height: 26px;
}
.footer .copyright {
text-align: center;
padding-top: 30px;
color: #003056;
text-align: center;
padding-top: 30px;
color: #003056;
}
.footer .credits {
padding-top: 10px;
text-align: center;
font-size: 13px;
color: #003056;
padding-top: 10px;
text-align: center;
font-size: 13px;
color: #003056;
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header{
padding-left:0px !important;
#header {
padding-left: 0px !important;
}
@media (max-width: 1237px) {
#citydemText{
font-size: 22px !important;
}
#logoDrees{
width: 130px !important;
}
#logoICity{
width: 120px !important;
}
#citydemText {
font-size: 22px !important;
}
#logoDrees {
width: 130px !important;
}
#logoICity {
width: 120px !important;
}
}
@media (max-width: 763px) {
#citydemText {
font-size: 12px !important;
}
#logoDrees {
width: 100px !important;
}
#logoICity {
width: 90px !important;
}
}
@media (max-width: 576px) {
#leftBorder {
display: none;
}
#rightBorder {
display: none;
}
#TextBorder {
width: 50%;
}
#LogoBorder {
width: 50%;
}
}
#citydemText{
font-size: 12px !important;
}
#logoDrees{
width: 100px !important;
}
#logoICity{
width: 90px !important;
}
}
@media (max-width: 576px){
#leftBorder{
display: none;
}
#rightBorder{
display: none;
}
#TextBorder{
width: 50%;
}
#LogoBorder{
width: 50%;
}
}
@media (max-width: 457px){
#leftBorder{
display: none;
}
#rightBorder{
display: none;
}
#TextBorder{
width: 60%;
}
#LogoBorder{
width: 40%;
}
#citydemText{
display:none !important;
}
#logoDrees{
width: 90px !important;
}
#logoICity{
width: 70px !important;
}
}
\ No newline at end of file
@media (max-width: 457px) {
#leftBorder {
display: none;
}
#rightBorder {
display: none;
}
#TextBorder {
width: 60%;
}
#LogoBorder {
width: 40%;
}
#citydemText {
display: none !important;
}
#logoDrees {
width: 90px !important;
}
#logoICity {
width: 70px !important;
}
}
.cent {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.mycenter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.myBtnCenter {
position: absolute;
top: 87%;
left: 50%;
transform: translate(-50%, -50%);
}
\ No newline at end of file
public/demos.html
+ 239
- 154
View file @ b5fab406
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>iCity Demonstrator</title>
<meta content="" name="description">
<meta content="" name="description" />
<meta content="" name="keywords">
<meta content="" name="keywords" />
<!-- Favicons -->
<link href="assets/img/logo_fav.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<link href="assets/img/logo_fav.png" rel="icon" />
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet"
/>
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link
href="assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
href="assets/vendor/bootstrap-icons/bootstrap-icons.css"
rel="stylesheet"
/>
<link href="assets/vendor/aos/aos.css" rel="stylesheet" />
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet" />
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />
<link
href="assets/vendor/glightbox/css/glightbox.min.css"
rel="stylesheet"
/>
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet" />
<!-- =======================================================
* Template Name: FlexStart - v1.4.0
......@@ -35,8 +45,8 @@
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
<script>
/*
<script>
/*
$(document).ready(function() {
var windowURL = window.location.href;
console.log(windowURL);
......@@ -46,40 +56,45 @@
}
});
*/
</script>
</head>
<body>
</script>
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="header fixed-top">
<!-- <div class="container-fluid container-xl d-flex align-items-center justify-content-between"> -->
<div class="row">
<div id="leftBorder" class="col-lg-1 col-md-1 col-sm-1 ">
<img src="assets/img/dummy.png" alt="">
</div>
<div id="TextBorder" class="col-lg-5 col-md-5 col-sm-5">
<a href="index.html" class="logo d-flex align-items-center">
<img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg" alt="">
<span id="citydemText">City Demonstrator</span>
</a>
</div>
<!-- <div class="container-fluid container-xl d-flex align-items-center justify-content-between"> -->
<div id="LogoBorder" class="col-lg-5 col-md-5 col-sm-5 ">
<span style="float: right; margin-top: 10px;">
<!--<img id="logoDrees" src="https://www.dreso.com/typo3conf/ext/dreso/Resources/Public/dreso-logo.svg " style="width: 160px; padding-right:20px;" alt=" ">-->
<img id="logoICity" src="assets/img/icityLogo.svg " style="width: 140px; " alt=" ">
</span>
<div class="row">
<div id="leftBorder" class="col-lg-1 col-md-1 col-sm-1">
<img src="assets/img/dummy.png" alt="" />
</div>
<div id="TextBorder" class="col-lg-5 col-md-5 col-sm-5">
<a href="index.html" class="logo d-flex align-items-center">
<img
src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg"
alt=""
/>
<span id="citydemText">City Demonstrator</span>
</a>
</div>
</div>
<div id="rightBorder" class="col-lg-1 col-md-1 col-sm-1">
<img src="assets/img/dummy.png" alt="">
</div>
<div id="LogoBorder" class="col-lg-5 col-md-5 col-sm-5">
<span style="float: right; margin-top: 10px">
<!--<img id="logoDrees" src="https://www.dreso.com/typo3conf/ext/dreso/Resources/Public/dreso-logo.svg " style="width: 160px; padding-right:20px;" alt=" ">-->
<img
id="logoICity"
src="assets/img/icityLogo.svg "
style="width: 140px"
alt=" "
/>
</span>
</div>
<div id="rightBorder" class="col-lg-1 col-md-1 col-sm-1">
<img src="assets/img/dummy.png" alt="" />
</div>
<!-- <nav id="navbar " class="navbar ">
</div>
<!-- <nav id="navbar " class="navbar ">
<ul>
<li><a class="nav-link scrollto active " href="#hero ">Home</a></li>
<li><a class="nav-link scrollto " href="#about ">About</a></li>
......@@ -107,66 +122,116 @@
<li><a class="nav-link scrollto " href="#contact ">Contact</a></li>
<li><a class="getstarted scrollto " href="#about ">Get Started</a></li>
</ul> -->
<i class="bi bi-list mobile-nav-toggle "></i>
<!-- </nav> -->
<!-- .navbar -->
<i class="bi bi-list mobile-nav-toggle"></i>
<!-- </nav> -->
<!-- .navbar -->
<!-- </div> -->
<!-- </div> -->
</header>
<!-- End Header -->
<section class="hero d-flex align-items-center">
<div class="mycenter">
<p>
<img
src="assets/img/iCity_network_1.svg "
style="height: 500px; width: 800px"
alt=" "
/>
</p>
<div class="d-flex justify-content-between">
<span>
<a
href="#Mobility"
class="btn btn-danger d-inline-flex align-items-center justify-content-center align-self-center"
style="width: 260px;margin-left: 5px;"
>
Explore Mobility
</a>
<a
href="#Energy"
class="btn btn-success d-inline-flex align-items-center justify-content-center align-self-center"
style="width: 260px;"
>
</i> Explore Energy
</a>
<a
href="#SmartBlds"
class=" btn btn-warning d-inline-flex align-items-center justify-content-center align-self-center"
style="width: 260px; min-height: 48; padding: 0 0 10 10;"
>
Explore Smart Buildings
</a>
</span>
</div>
</div>
</section>
<main id="main ">
<!-- ======= Hero Section ======= -->
<section id="hero " class="hero d-flex align-items-center ">
<div class="container ">
<div >
<h2 data-aos="fade-up " data-aos-delay="400 ">Mobility</h2>
<div data-aos="fade-up " data-aos-delay="600 ">
<div>
<iframe width="100%" height="600" src="https://ugl.hft-stuttgart.de/demos.html?keyword=SensorThings%20API"></iframe>
</div>
</div>
</div>
<!-- ======= Demo & Mobility Section ======= -->
<section id="Mobility" class="hero d-flex align-items-center">
<div class="container">
<div>
<h4 data-aos="fade-up " data-aos-delay="400 " style="color: red; font-weight: 900;">Mobility</h4>
<div data-aos="fade-up " data-aos-delay="600 ">
<div>
<iframe
position="relative"
width="100%"
height="600"
src="https://ugl.hft-stuttgart.de/demos.html?keyword=SensorThings%20API"
></iframe>
</div>
</div>
</div>
</div>
</section>
<section id="hero " class="hero d-flex align-items-center ">
<div class="container ">
<div >
<h2 data-aos="fade-up " data-aos-delay="400 ">Energy</h2>
<div data-aos="fade-up " data-aos-delay="600 ">
<div>
<iframe width="100%" height="600" src="https://ugl.hft-stuttgart.de/demos.html?keyword=Urban%20Analytics" ></iframe>
</div>
</div>
</div>
</section>
<section id="Energy" class="hero d-flex align-items-center">
<div class="container">
<div width="100%" height="600">
<h2 data-aos="fade-up " data-aos-delay="400 " style="color: green; font-weight: 900;">Energy</h2>
<div data-aos="fade-up " data-aos-delay="600 ">
<div>
<iframe
width="100%"
height="600"
src="https://ugl.hft-stuttgart.de/demos.html?keyword=Urban%20Analytics"
></iframe>
</div>
</div>
</div>
</div>
</section>
<section id="hero " class="hero d-flex align-items-center ">
<div class="container ">
<div >
<h2 data-aos="fade-up " data-aos-delay="400 ">Smart Buildings</h2>
<div data-aos="fade-up " data-aos-delay="600 ">
<div style="overflow: hidden">
<iframe width="100%" height="600" src="https://ugl.hft-stuttgart.de/demos.html" ></iframe>
</div>
</div>
</div>
</section>
<section id="SmartBlds" class="hero d-flex align-items-center">
<div class="container">
<div>
<h2 data-aos="fade-up " data-aos-delay="400 " style="color: #f2c433; font-weight: 900;">Smart Buildings</h2>
<div data-aos="fade-up " data-aos-delay="600 ">
<div style="overflow: hidden">
<iframe
width="100%"
height="600"
src="https://ugl.hft-stuttgart.de/demos.html"
></iframe>
</div>
</div>
</div>
</div>
</section>
<!-- End Hero -->
</section>
<!-- End Hero -->
</main>
<!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer " class="footer ">
<!-- <div class="footer-newsletter ">
<footer id="footer " class="footer">
<!-- <div class="footer-newsletter ">
<div class="container ">
<div class="row justify-content-center ">
<div class="col-lg-12 text-center ">
......@@ -182,38 +247,46 @@
</div>
</div> -->
<div class="footer-top ">
<div class="container ">
<div class="row gy-4 ">
<div class="col-lg-5 col-md-12 footer-info ">
<a href="https://www.hft-stuttgart.de " class="logo d-flex align-items-center ">
<img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg " alt=" ">
<span>City Demonstrator</span>
</a>
<!-- <p>Visit us on our social media accounts</p> -->
<div class="social-links mt-3 ">
<!-- <a href="# " class="twitter "><i class="bi bi-twitter "></i></a>
<div class="footer-top">
<div class="container">
<div class="row gy-4">
<div class="col-lg-5 col-md-12 footer-info">
<a
href="https://www.hft-stuttgart.de "
class="logo d-flex align-items-center"
>
<img
src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg "
alt=" "
/>
<span>City Demonstrator</span>
</a>
<!-- <p>Visit us on our social media accounts</p> -->
<div class="social-links mt-3">
<!-- <a href="# " class="twitter "><i class="bi bi-twitter "></i></a>
<a href="# " class="facebook "><i class="bi bi-facebook "></i></a>
<a href="# " class="instagram "><i class="bi bi-instagram bx bxl-instagram "></i></a>
<a href="# " class="linkedin "><i class="bi bi-linkedin bx bxl-linkedin "></i></a> -->
<p style="margin-top: 20px; margin-bottom: 20px;"> </p>
<p style="margin-top: 20px; margin-bottom: 20px"></p>
<!-- <a href="https://www.dreso.com " class=" align-items-center ">
<!-- <a href="https://www.dreso.com " class=" align-items-center ">
<img src="https://www.dreso.com/typo3conf/ext/dreso/Resources/Public/dreso-logo.svg " style="width: 120px;" alt=" "></a> -->
<a href="http://icity.hft-stuttgart.de/#/ " class="
align-items-center ">
<img src="assets/img/icityLogo.svg " style="width: 140px; " alt=" "></a>
</div>
</div>
<a
href="http://icity.hft-stuttgart.de/#/ "
class="align-items-center"
>
<img
src="assets/img/icityLogo.svg "
style="width: 140px"
alt=" "
/></a>
</div>
</div>
<div class="col-lg-2 col-6 footer-links ">
<!-- <h4>Useful Links</h4>
<div class="col-lg-2 col-6 footer-links">
<!-- <h4>Useful Links</h4>
<ul>
<li><i class="bi bi-chevron-right "></i> <a href="# ">Home</a></li>
<li><i class="bi bi-chevron-right "></i> <a href="# ">About us</a></li>
......@@ -221,10 +294,10 @@
<li><i class="bi bi-chevron-right "></i> <a href="# ">Terms of service</a></li>
<li><i class="bi bi-chevron-right "></i> <a href="# ">Privacy policy</a></li>
</ul> -->
</div>
</div>
<div class="col-lg-2 col-6 footer-links ">
<!-- <h4>Our Services</h4>
<div class="col-lg-2 col-6 footer-links">
<!-- <h4>Our Services</h4>
<ul>
<li><i class="bi bi-chevron-right "></i> <a href="# ">Web Design</a></li>
<li><i class="bi bi-chevron-right "></i> <a href="# ">Web Development</a></li>
......@@ -232,44 +305,58 @@
<li><i class="bi bi-chevron-right "></i> <a href="# ">Marketing</a></li>
<li><i class="bi bi-chevron-right "></i> <a href="# ">Graphic Design</a></li>
</ul> -->
</div>
<div class="col-lg-3 col-md-12 footer-contact text-center text-md-start ">
<h4>Contact Us</h4>
<p>
Hochschule fuer Technik Stuttgart <br> Schellingstr. 24<br> 70174 Stuttgart <br><br>
<strong>Phone:</strong> +49 (0)711 8926 0 <br>
<strong>Email:</strong> icity@hft-stuttgart.de<br>
</p>
</div>
</div>
</div>
<div
class="col-lg-3 col-md-12 footer-contact text-center text-md-start"
>
<h4>Contact Us</h4>
<p>
Hochschule fuer Technik Stuttgart <br />
Schellingstr. 24<br />
70174 Stuttgart <br /><br />
<strong>Phone:</strong> +49 (0)711 8926 0 <br />
<strong>Email:</strong> icity@hft-stuttgart.de<br />
</p>
</div>
</div>
</div>
</div>
<div class="container ">
<div class="copyright ">
&copy; Copyright <strong><span>HfT Stuttgart</span></strong>. All Rights Reserved
</div>
<div class="credits ">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/flexstart-bootstrap-startup-template/ -->
Designed by <a href="https://bootstrapmade.com/ ">BootstrapMade</a>
<div class="container">
<p>
<a href="https://www.hft-stuttgart.de/impressum" target="_blank" style="padding-right: 10px">Impressum</a>
<a href="https://www.hft-stuttgart.de/datenschutz" target="_blank">Datenschutz</a>
</p>
</div>
</div>
<div class="container">
<div class="copyright">
&copy; Copyright <strong><span>HfT Stuttgart</span></strong
>. All Rights Reserved
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/flexstart-bootstrap-startup-template/ -->
Designed by <a href="https://bootstrapmade.com/ ">BootstrapMade</a>
<div class="container">
<p>
<a
href="https://www.hft-stuttgart.de/impressum"
target="_blank"
style="padding-right: 10px"
>Impressum</a
>
<a href="https://www.hft-stuttgart.de/datenschutz" target="_blank"
>Datenschutz</a
>
</p>
</div>
</div>
</div>
</footer>
<!-- End Footer -->
<a href="# " class="back-to-top d-flex align-items-center justify-content-center "><i class="bi bi-arrow-up-short "></i></a>
<a
href="# "
class="back-to-top d-flex align-items-center justify-content-center"
><i class="bi bi-arrow-up-short"></i
></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.js "></script>
......@@ -282,7 +369,5 @@
<!-- Template Main JS File -->
<script src="assets/js/main.js "></script>
</body>
</body>
</html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal