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